/*------------------------------------------------------------------
Project:        Listory
Author:         Crenoveative
URL:            https://themeforest.net/user/crenoveative/   
Created:        26/11/2016 
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
* Table of Content
* 1. Reset
* 2. Default Typography
* 3. Margin Sets
* 4. Padding Sets
* 5. Border
* 6. Global
* 7. Form
* 8. List
* 9. Layout
* 10. Timing - Transition
* 11. Gap for Raw
* 12. Typography
* 13. Background
* 14. Button
* 15. Section Title
* 16. Social Media
* 17. GridLex
* 18. Customized Flex Grid from FOundation
-------------------------------------------------------------------*/



/* HTML5 display-role reset for older browsers */

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/**
 * Layout
 */


section,
.section {
    padding: 90px 0;
}

/**
 * Background
 */

.bg-dark {
    background: #323232 !important;
    color: #828282;
}

/**
 * Section Title
 */

.section-title {
    margin: 0 0 35px;
    text-align: center;
}

.section-title h2 {
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    font-size: 39px;
    color: #0C71ED;
}


.section-title p {
    font-size: 30px;
}

/**
 * GridLex
 * http://gridlex.devlint.fr/index.html
 */

[class*=GridLex-grid] {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0
}

[class*=GridLex-grid-][class*=-equalHeight]>[class*=GridLex-col] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

[class*=GridLex-grid]>[class*=GridLex-col-1] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}

[class*=GridLex-grid]>[class*=GridLex-col-2] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}

[class*=GridLex-grid]>[class*=GridLex-col-3] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
}

@media (max-width: 479px) {
    [class*=GridLex-grid]>[class*=_xss-1] {
        -webkit-flex-basis: 8.33333333%;
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    
    [class*=GridLex-grid]>[push-right*=_xss-11] {
        margin-right: 91.66666667%
    }
}

.GridLex-gap-20 > div > div > div {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    width: 100%;
}