/* cmsms stylesheet: grid_system modified: Monday, July 25, 2016 3:38:18 PM */
/* =====================================
12 COLUMN GRID
===================================== */

/* ================================
Desktop
================================ */

.container, .container:after, .container:before,
.container div[class*='grid'], .container div[class*='grid']:after, .container div[class*='grid']:before
 {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.container img {max-width: 100%; height: auto;} 
 
/* Global Grid layout */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: .96%;
	margin-right: .96%   
}

/* alpha and omega classes remove margins, aplha = no margin left, omega = no margin right */
.alpha { margin-left: 0 }
.omega { margin-right: 0 }

/* Grid sizes up to 12 columns */
.container .grid_1 { width:6.333% }
.container .grid_2 { width:14.667% }
.container .grid_3 { width:23.0% }
.container .grid_4 { width:31.333% }
.container .grid_5 { width:39.667% }
.container .grid_6 { width:48.0% }
.container .grid_7 { width:56.333% }
.container .grid_8 { width:64.667% }
.container .grid_9 { width:73.0% }
.container .grid_10 { width:81.333% }
.container .grid_11 { width:89.667% }
.container .grid_12 { width:98.0% }

/* Prefix to add extra space left */
.container .prefix_1 { padding-left:8.333% }
.container .prefix_2 { padding-left:16.667% }
.container .prefix_3 { padding-left:25.0% }
.container .prefix_4 { padding-left:33.333% }
.container .prefix_5 { padding-left:41.667% }
.container .prefix_6 { padding-left:50.0% }
.container .prefix_7 { padding-left:58.333% }
.container .prefix_8 { padding-left:66.667% }
.container .prefix_9 { padding-left:75.0% }
.container .prefix_10 { padding-left:83.333% }
.container .prefix_11 { padding-left:91.667% }

/* Suffix to add extra space right */
.container .suffix_1 { padding-right:8.333% }
.container .suffix_2 { padding-right:16.667% }
.container .suffix_3 { padding-right:25.0% }
.container .suffix_4 { padding-right:33.333% }
.container .suffix_5 { padding-right:41.667% }
.container .suffix_6 { padding-right:50.0% }
.container .suffix_7 { padding-right:58.333% }
.container .suffix_8 { padding-right:66.667% }
.container .suffix_9 { padding-right:75.0% }
.container .suffix_10 { padding-right:83.333% }
.container .suffix_11 { padding-right:91.667% }

/* Push columns to right */
.container .push_1 { left:8.333% }
.container .push_2 { left:16.667% }
.container .push_3 { left:25.0% }
.container .push_4 { left:33.333% }
.container .push_5 { left:41.667% }
.container .push_6 { left:50.0% }
.container .push_7 { left:58.333% }
.container .push_8 { left:66.667% }
.container .push_9 { left:75.0% }
.container .push_10 { left:83.333% }
.container .push_11 { left:91.667% }

/* Pull columns to left */
.container .pull_1 { left:-8.333% }
.container .pull_2 { left:-16.667% }
.container .pull_3 { left:-25.0% }
.container .pull_4 { left:-33.333% }
.container .pull_5 { left:-41.667% }
.container .pull_6 { left:-50.0% }
.container .pull_7 { left:-58.333% }
.container .pull_8 { left:-66.667% }
.container .pull_9 { left:-75.0% }
.container .pull_10 { left:-83.333% }
.container .pull_11 { left:-91.667% }

/* =====================================
Tablet (Portrait) 
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {
    .container {
        width: 92%;
        min-width: 768px;
        max-width: 1024px
    } 
}

/* =====================================
Smartphones (Portait) 
===================================== */
@media only screen and (max-width: 320px) {
    .container {
        width: 92%;
        min-width: 300px;
        max-width: 320px
    } 
    .container .grid_1, 
    .container .grid_2,
    .container .grid_3,
    .container .grid_4,
    .container .grid_5,
    .container .grid_6,
    .container .grid_7,
    .container .grid_8,
    .container .grid_9,
    .container .grid_10,
    .container .grid_11,
    .container .grid_12 { 
        width: 98%;  
        margin: 0 1%;
        float: none
    }
}

/* =====================================
Smartphones (Landscape) 
===================================== */
@media only screen and (min-width: 321px) and (max-width: 767px) {
    .container {
        width: 92%;
        min-width: 321px;
        max-width: 767px
    } 
    .container .grid_1, 
    .container .grid_2,
    .container .grid_3,
    .container .grid_4,
    .container .grid_5,
    .container .grid_6,
    .container .grid_7,
    .container .grid_8,
    .container .grid_9,
    .container .grid_10,
    .container .grid_11,
    .container .grid_12 { 
        width: 98%;
        margin: 0 1%;
        display: block;
        float: none
    }    
}

/* =====================================
Smartphones (Portrait & Landscape) 
===================================== */
@media only screen and (min-width: 300px) and (max-width: 767px) {
    .container .prefix_1,
    .container .prefix_2,
    .container .prefix_3,
    .container .prefix_4,
    .container .prefix_5,
    .container .prefix_6,
    .container .prefix_7,
    .container .prefix_8,
    .container .prefix_9,
    .container .prefix_10,
    .container .prefix_11,
    .container .suffix_1,
    .container .suffix_2,
    .container .suffix_3,
    .container .suffix_4,
    .container .suffix_5,
    .container .suffix_6,
    .container .suffix_7,
    .container .suffix_8,
    .container .suffix_9,
    .container .suffix_10,
    .container .suffix_11 { 
        padding-right: 0;
        padding-left: 0
    } 
    .container .push_1,
    .container .push_2,
    .container .push_3,
    .container .push_4,
    .container .push_5,
    .container .push_6,
    .container .push_7,
    .container .push_8,
    .container .push_9,
    .container .push_10,
    .container .push_11,
    .container .pull_1,
    .container .pull_2,
    .container .pull_3,
    .container .pull_4,
    .container .pull_5,
    .container .pull_6,
    .container .pull_7,
    .container .pull_8,
    .container .pull_9,
    .container .pull_10,
    .container .pull_11 {
        left: auto;
        right: auto
    }
}

/* =====================================
iPhone 4, iPad2, Retina stuff ?
===================================== */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

/* if you buy me one i might test and add something here */

}

/* =====================================
CLEARING FLOATS
===================================== */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0
}

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
* html>body .clearfix {
	display: inline-block; 
	width: 100%;
}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}



.cf:before, 
.cf:after,
.row:before,
.row:after{ 
    content: ""; 
    display: table
}
.cf:after,
.row:after{ 
    clear: both
}
.cf,
.row { 
    *zoom: 1
}



/* =====================================
FIX PERSO
===================================== */


/* ------ fix marge grille ------ */	
div[class*='grid'] p:first-child {
	margin-top: 0;
	}


/* ------ position des blocs ------ */	
div[class*='grid'].center {text-align: center;}


/* ------ position des blocs ------ */	
div[class*='grid'] .second {float: right;}