/* CONTAINERS */
.container-fluid,
.container{
    padding: 0 20px;
    margin: 0 auto;
}
.container-fluid{
    width: 100%;
    box-sizing: border-box;
}
.container {
    max-width: 1180px;
}
main{
    padding-top: 140px;
    transition: padding 0.2s ease;
}
    main .container{
        margin-top: 60px;
    }
header.scroll + main {
    padding-top: 80px;
}



/* COLUMNS */
div[class*="col-"] .container{
	display: flex;
    flex-wrap: wrap;
	max-width: 1200px;
	padding-right: 10px;
    padding-left: 10px;
}
	div[class*="col-"] section,
	div[class*="col-"] aside{
		position: relative;
        padding: 10px;
		box-sizing: border-box;
	}

/* COL EVENLY */
    .col-evenly section,
	.col-evenly aside{
        flex: 1;
    }

/* COL TWO THIRD */
	.reverse .container{
		flex-direction: row-reverse;
	}    
		.col-two-third section{
			flex: 0 0 66.6666%;
		}
            .col-two-third section > div{ /* Clear 1/8 on the right */
                padding-right: 12.5%;
            }
            .col-two-third.reverse section > div{ 
                padding-right: 0;
            }
		.col-two-third aside{
            flex: 0 0 33.3333%;
		}
	

/* COL CENTER FIXED */
.col-center .container{
    width: 600px;
}
	.col-center section{
		flex: 0 0 100%;
	}






/* MEDIA QUERIES */
@media (max-width: 1240px) {
	
	/* COL EVENLY (THIRDS)*/
	.col-evenly.fourths section,
	.col-evenly.fourths aside{
        flex: 0 0 50%;
    }
}
@media (max-width: 992px) {
    .container {
        max-width: 952px;
    }
	
	/* COLUMNS */
	div[class*="col-"] .container{
		max-width: 972px;
	}
}
@media (max-width: 768px) {
    .container {
        max-width: 728px;
    }
	
	/* COLUMNS */
	div[class*="col-"] .container{
		max-width: 748px;
	}
	
	/* COL EVENLY (THIRDS)*/
	.col-evenly.thirds section,
	.col-evenly.thirds aside{
        flex: 0 0 100%;
    }
	
	/* COL TWO THIRD */
    .col-two-third section,
	.col-two-third aside{
        flex: 0 0 100%;
    }
        .col-two-third section > div{
            padding-right: 0;
        }
}
@media (max-width: 640px) {
    .container {
        max-width: 600px;
    }
    main{
        padding-top: 80px;
    }
	
	/* COLUMNS */
	div[class*="col-"] .container{
		max-width: 620px;
	}
	
	/* COL EVENLY (HALFS & FOURTHS)*/
	.col-evenly.halfs section,
	.col-evenly.halfs aside,
	.col-evenly.fourths section,
	.col-evenly.fourths aside{
        flex: 0 0 100%;
    }
	
	/* COL CENTER FIXED */
	.col-center .container{
		width: auto;
	}
}