/*  CSS STYLING FOR PAGE LAYOUT  
============================================================================= */

/*===============================================
    ||      GENERAL FOR ALL SECTIONS           ||
===============================================*/

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*===============================================
    ||              GROUPING                   ||
===============================================*/

.row { zoom: 1; } /* For IE 6/7 */

.row:before,
.row:after {
    content: "";
    display: table;
}

.row:after {
    clear: both;
}

/*===============================================
    ||             COLUMNS GRID                ||
===============================================*/

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except <= IE6*/

/*===============================================
|| Remove margin as all go full width at 480px ||
===============================================*/

@media only screen and (max-width: 480px) {
    .col {
        /* margin: 1% 0 1% 0%; */
        margin: 0;
    }
}

/*===============================================
    ||            2 COLUMNS GRID               ||
===============================================*/

.col-2-of-2 { width: 100%; }

.col-1-of-2 { width: 49.2%; }

/* Take full width when screen is less than 480px  
============================================================================= */

@media only screen and (max-width: 480px) {
    .col-2-of-2 { width: 100%; }
    .col-1-of-2 { width: 100%; }
}

/*===============================================
 ||             3 COLUMNS GRID                ||
===============================================*/

.col-3-of-3 { width: 100%; }

.col-2-of-3 { width: 66.13%; }

.col-1-of-3 { width: 32.26%; }

/* Take full width when screen is less than 480px  
============================================================================= */

@media only screen and (max-width: 480px) {
    .col-3-of-3 { width: 100%; }
    .col-2-of-3 { width: 100%; }
    .col-1-of-3 { width: 100%; }
}

/*===============================================
 ||             4 COLUMNS GRID                ||
===============================================*/

.col-4-of-4 { width: 100%; }

.col-3-of-4 { width: 74.6%; }

.col-2-of-4 { width: 49.2%; }

.col-1-of-4 { width: 23.8%; }

/* Take full width when screen is less than 480px  
============================================================================= */

@media only screen and (max-width: 480px) {
    .col-4-of-4 { width: 100%; }
    .col-3-of-4 { width: 100%; }
    .col-2-of-4 { width: 100%; }
    .col-1-of-4 { width: 100%; }
}

/*===============================================
 ||             5 COLUMNS GRID                ||
===============================================*/
	
.col-5-of-5 { width: 100%; }

.col-4-of-5 { width: 79.68%; }

.col-3-of-5 { width: 59.36%; }

.col-2-of-5 { width: 39.04%; }

.col-1-of-5 { width: 18.72%; }


/* Take full width when screen is less than 480px   ============================================================================= */

@media only screen and (max-width: 480px) {
	.col-5-of-5 { width: 100%; }
	.col-4-of-5 { width: 100%; }
	.col-3-of-5 { width: 100%; }
	.col-2-of-5 { width: 100%; }
	.col-1-of-5 { width: 100%; }
}

/*===============================================
 ||             6 COLUMNS GRID                ||
===============================================*/


.col-6-of-6 { width: 100%; }

.col-5-of-6 { width: 83.06%; }

.col-4-of-6 { width: 66.13%; }

.col-3-of-6 { width: 49.2%; }

.col-2-of-6 { width: 32.26%; }

.col-1-of-6 { width: 15.33%; }


/* Take full width when screen is less than 480px   ============================================================================= */

@media only screen and (max-width: 480px) {
	.col-6-of-6 { width: 100%; }
	.col-5-of-6 { width: 100%; }
	.col-4-of-6 { width: 100%; }
	.col-3-of-6 { width: 100%; }
	.col-2-of-6 { width: 100%; }
	.col-1-of-6 { width: 100%; }
}


/*===============================================
 ||             7 COLUMNS GRID                ||
===============================================*/

.col-7-of-7 { width: 100%; }

.col-6-of-7 { width: 85.48%; }

.col-5-of-7 { width: 70.97%; }

.col-4-of-7 { width: 56.45%; }

.col-3-of-7 { width: 41.94%; }

.col-2-of-7 { width: 27.42%; }

.col-1-of-7 { width: 12.91%; }

/* Take full width when screen is less than 480px   ============================================================================= */

@media only screen and (max-width: 480px) {
	.col-7-of-7 { width: 100%; }
	.col-6-of-7 { width: 100%; }
	.col-5-of-7 { width: 100%; }
	.col-4-of-7 { width: 100%; }
	.col-3-of-7 { width: 100%; }
	.col-2-of-7 { width: 100%; }
	.col-1-of-7 { width: 100%; }
}

/*===============================================
 ||             8 COLUMNS GRID                ||
===============================================*/

	
.col-8-of-8 { width: 100%; }

.col-7-of-8 { width: 87.3%; }

.col-6-of-8 { width: 74.6%; }

.col-5-of-8 { width: 61.9%; }

.col-4-of-8 { width: 49.2%; }

.col-3-of-8 { width: 36.5%; }

.col-2-of-8 { width: 23.8%; }

.col-1-of-8 { width: 11.1%; }


/* Take full width when screen is less than 480px   ============================================================================= */

@media only screen and (max-width: 480px) {
	.col-8-of-8 { width: 100%; }
	.col-7-of-8 { width: 100%; }
	.col-6-of-8 { width: 100%; }
	.col-5-of-8 { width: 100%; }
	.col-4-of-8 { width: 100%; }
	.col-3-of-8 { width: 100%; }
	.col-2-of-8 { width: 100%; }
	.col-1-of-8 { width: 100%; }
}

/*===============================================
 ||             9 COLUMNS GRID                ||
===============================================*/


.col-9-of-9 { width: 100%; }

.col-8-of-9 { width: 88.71%; }

.col-7-of-9 { width: 77.42%; }

.col-6-of-9 { width: 66.13%; }

.col-5-of-9 { width: 54.84%; }

.col-4-of-9 { width: 43.55%; }

.col-3-of-9 { width: 32.26%; }

.col-2-of-9 { width: 20.97%; }

.col-1-of-9 { width: 9.68%; }


/* Take full width when screen is less than 480px   ============================================================================= */

@media only screen and (max-width: 480px) {
	.col-9-of-9 { width: 100%; }
	.col-8-of-9 { width: 100%; }
	.col-7-of-9 { width: 100%; }
	.col-6-of-9 { width: 100%; }
	.col-5-of-9 { width: 100%; }
	.col-4-of-9 { width: 100%; }
	.col-3-of-9 { width: 100%; }
	.col-2-of-9 { width: 100%; }
	.col-1-of-9 { width: 100%; }
}

/*===============================================
 ||             10 COLUMNS GRID                ||
===============================================*/

.col-10-of-10 { width: 100%; }

.col-9-of-10 { width: 89.84%; }

.col-8-of-10 { width: 79.68%; }

.col-7-of-10 { width: 69.52%; }

.col-6-of-10 { width: 59.36%; }

.col-5-of-10 { width: 49.2%; }

.col-4-of-10 { width: 39.04%; }

.col-3-of-10 { width: 28.88%; }

.col-2-of-10 { width: 18.72%; }

.col-1-of-10 { width: 8.56%; }


/* Take full width when screen is less than 480px   ============================================================================= */

@media only screen and (max-width: 480px) {
	.col-10-of-10 { width: 100%; }
	.col-9-of-10 { width: 100%; }
	.col-8-of-10 { width: 100%; }
	.col-7-of-10 { width: 100%; }
	.col-6-of-10 { width: 100%; }
	.col-5-of-10 { width: 100%; }
	.col-4-of-10 { width: 100%; }
	.col-3-of-10 { width: 100%; }
	.col-2-of-10 { width: 100%; }
	.col-1-of-10 { width: 100%; }
}

/*===============================================
 ||             11 COLUMNS GRID                ||
===============================================*/

.col-11-of-11 { width: 100%; }

.col-10-of-11 { width: 90.76%; }

.col-9-of-11 { width: 81.52%; }

.col-8-of-11 { width: 72.29%; }

.col-7-of-11 { width: 63.05%; }

.col-6-of-11 { width: 53.81%; }

.col-5-of-11 { width: 44.58%; }

.col-4-of-11 { width: 35.34%; }

.col-3-of-11 { width: 26.1%; }

.col-2-of-11 { width: 16.87%; }

.col-1-of-11 { width: 7.63%; }


/* Take full width when screen is less than 480px   ============================================================================= */

@media only screen and (max-width: 480px) {
	.col-11-of-11 { width: 100%; }
	.col-10-of-11 { width: 100%; }
	.col-9-of-11 { width: 100%; }
	.col-8-of-11 { width: 100%; }
	.col-7-of-11 { width: 100%; }
	.col-6-of-11 { width: 100%; }
	.col-5-of-11 { width: 100%; }
	.col-4-of-11 { width: 100%; }
	.col-3-of-11 { width: 100%; }
	.col-2-of-11 { width: 100%; }
	.col-1-of-11 { width: 100%; }
}

/*===============================================
 ||             12 COLUMNS GRID                ||
===============================================*/

.col-12-of-12 { width: 100%; }

.col-11-of-12 { width: 91.53%; }

.col-10-of-12 { width: 83.06%; }

.col-9-of-12 { width: 74.6%; }

.col-8-of-12 { width: 66.13%; }

.col-7-of-12 { width: 57.66%; }

.col-6-of-12 { width: 49.2%; }

.col-5-of-12 { width: 40.73%; }

.col-4-of-12 { width: 32.26%; }

.col-3-of-12 { width: 23.8%; }

.col-2-of-12 { width: 15.33%; }

.col-1-of-12 { width: 6.86%; }


/* Take full width when screen is less than 480px   ============================================================================= */

@media only screen and (max-width: 480px) {
	.col-12-of-12 { width: 100%; }
	.col-11-of-12 { width: 100%; }
	.col-10-of-12 { width: 100%; }
	.col-9-of-12 { width: 100%; }
	.col-8-of-12 { width: 100%; }
	.col-7-of-12 { width: 100%; }
	.col-6-of-12 { width: 100%; }
	.col-5-of-12 { width: 100%; }
	.col-4-of-12 { width: 100%; }
	.col-3-of-12 { width: 100%; }
	.col-2-of-12 { width: 100%; }
	.col-1-of-12 { width: 100%; }
}