/* normalize.css v8.0.1 */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}


/* LARGEURS SECTION */
.w-100 {margin:auto; width:100%;}
.w-r90, .w-s90 {margin:0; max-width:90%; width:100%;}
.w-L90 {margin:0 0 0 10%; max-width:90%; width:100%;}
.w-90 {margin:0 auto; max-width:91.6%; width:100%;}
.w-80 {margin:auto; width:calc(100% - 20%);}
.w-70 {margin:auto; width:calc(100% - 30%);}
.w-60 {margin:auto; width:calc(100% - 40%);}
.w-50 {margin:auto; width:calc(100% - 50%);}
.w-c {margin:auto; width:calc(100% - 18%);}

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

/* RATIOS IMAGES */
.imgRatio {
	display: block;
	height: 0;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.ratio-1-1 {padding-top: 100%;}
.ratio-2-1 {padding-top: 50%;}
.ratio-3-1 {padding-top: 33.33%;}
.ratio-3-2 {padding-top: 66.66%;}
.ratio-4-3 {padding-top: 75%;}
.ratio-5-3 {padding-top: 60%;}
.ratio-5-4 {padding-top: 80%;}
.ratio-8-5 {padding-top: 62.5%;}
.ratio-16-9 {padding-top: 56.25%;}
.ratio-21-9 {padding-top: 42.86%;}
.ratio-1-2 {padding-top: 200%;}
.ratio-1-3 {padding-top: 300%;}
.ratio-2-3 {padding-top: 150%;}
.ratio-3-4 {padding-top: 133.33%;}
.ratio-3-5 {padding-top: 166.67%;}
.ratio-4-5 {padding-top: 125%;}
.ratio-5-8 {padding-top: 160%;}
.ratio-9-16 {padding-top: 177.78%;}
.ratio-9-21 {padding-top: 233.33%;}

.imgRatio img {
	position: absolute;
	display: block;
	height: 100%;
	/*top: 0;
	left: 0;*/
	object-fit: cover;
	width: 100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}


/* Preserve some sanity */
.grid,
.unit {
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

/* Set up some rules to govern the grid */
.grid {
	position: relative;
	display: block;
  	clear: both;
}
.grid .unit {
  	float: left;
  	width: 100%;
  	padding: 15px;
}

/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
.grid .unit:first-child { padding-left: 15px; }
.grid .unit:last-child { padding-right: 15px; }


/* Nested grids already have padding though, so let’s nuke it */
.unit .unit:first-child { padding-left: 0; }
.unit .unit:last-child { padding-right: 0; }
.unit .grid:first-child > .unit { padding-top: 0; }
.unit .grid:last-child > .unit { padding-bottom: 0; }

/* Let people nuke the gutters/padding completely in a couple of ways */
.no-gutters .unit,
.unit.no-gutters {
	padding: 0 !important;
}

/* 12 colonnes */
.grid .c-1  {width: 8.33333333%;}
.grid .c-2  {width: 16.66666667%;}
.grid .c-3  {width: 25%;}
.grid .c-4  {width: 33.33333333%;}
.grid .c-5  {width: 41.66666667%;}
.grid .c-6  {width: 50%;}
.grid .c-7  {width: 58.33333333%;}
.grid .c-8  {width: 66.66666667%;}
.grid .c-9  {width: 75%;}
.grid .c-10 {width: 83.33333333%;}
.grid .c-11 {width: 91.66666667%;}
.grid .c-12 {width: 100%;}
.grid .c-90 {width: 90%;}

/* Push It */
.grid .ml-1  {margin-left: 8.33333333%;}
.grid .ml-2  {margin-left: 16.66666667%;}
.grid .ml-3  {margin-left: 25%;}
.grid .ml-4  {margin-left: 33.33333333%;}
.grid .ml-5  {margin-left: 41.66666667%;}
.grid .ml-6  {margin-left: 50%;}
.grid .ml-7  {margin-left: 58.33333333%;}
.grid .ml-8  {margin-left: 66.66666667%;}
.grid .ml-9  {margin-left: 75%;}
.grid .ml-10 {margin-left: 83.33333333%;}
.grid .ml-11 {margin-left: 91.66666667%;}
.grid .ml-10per {margin-left: 10%;}

/* Clearfix after every .grid */
.grid {
	*zoom: 1;
}
.grid:before, .grid:after {
	display: table;
  	content: "";
  	line-height: 0;
}
.grid:after {
	clear: both;
}

/* Utility classes */
.align-justify { text-align: justify; }
.align-center { text-align: center; }
.align-left   { text-align: left; }
.align-right  { text-align: right; }
.pull-left    { float: left; }
.pull-right   { float: right; }
.mAuto {margin:auto;}

/* Hide elements using this class by default */
.only-on-mobiles {
	display: none !important;
}

/* FLEXBOX COL */
.flexFH {
	display: flex;
  	flex-direction: row;
  	flex-wrap: wrap;
	justify-content: flex-start;
  	align-content: stretch;
  	align-items: stretch;
  	width: 100%;
  	height: 100vh;
	margin:auto;
  	padding: 0;
}

.flexFH__col {
	display: flex;
	flex-direction: column;
  	justify-content: center;
	order: 0;
  	flex: 0 1 auto;
  	align-self: auto;
  	width: 50%;
  	height: 100vh;
  	margin: auto;
  	padding: 0 10%;
}
.flexFH__col h1{
	font-size:6rem;
	line-height:1.2;
	font-weight:400;
	text-transform:uppercase;
	text-align:left;
	letter-spacing:20px;
	color:#555;
	margin-bottom:40px;
}
.flexFH__col p{
	font-size: 2rem;
	line-height:1.6;
	font-weight:300;
	color:#e7e5db;
}

.flexFH__col:nth-child(1) {
	order: 0;
	background-size: cover;
  	background-repeat: no-repeat;
  	background-position: center center;
	background-image: url("../images/1.jpg");
}

.flexFH__col:nth-child(2) {
	order: 1;
	background:#121212;
}


/* GRID FX ///////////////////////////////////////////// */
/* Styles to help demonstrate the grid */

code, pre {
	background: #AFEAD0;
	color: #333;
	padding: 20px 3px !important;
	border-radius: 5px;
  }
  
  pre {
	padding: 20px;
	text-align: center;
  }
  
  .demo p {
	margin: 0;
  }
  
  .demo .unit pre {
	margin: 0;
	padding: 20px 0;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
  }
  
  .demo .unit pre:hover {
	background: #fac1c1;
  }
  
  .grid, .unit {
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
  }
  
  .demo .unit .grid {
	overflow: hidden;
	background: rgba(73,255,218,.5);
  }
  
  .demo .unit .grid:first-child {
	border-radius: 5px 5px 0 0;
  }
  
  .demo .unit .grid:last-child {
	border-radius: 0 0 5px 5px;
  }


/*****************************************************************************
* RESPONSIVE
*****************************************************************************/
/* Ipad (Paysage) ----------- */
@media only screen and (min-device-width : 810px) and (max-device-width : 1080px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	.w-50, .w-60 {
		width: calc(100% - 30%);
	}
	.flexCover p {
		min-width: 70%;
	}
}

/* Ipad (Portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
}

/* Smartphone Paysage */
@media (min-width: 481px) and (max-width: 991px) {
	.w-50, .w-60 {
		width: calc(100% - 20%);
	}
}

/* Smartphone Portrait */
@media screen and (min-width: 320px) and (max-width: 480px) {
	/* Stack anything that isn’t full-width on smaller screens 
	and doesn't provide the no-stacking-on-mobiles class */
	/*
	.w-50, .w-60, .w-70, .w-80, .w-90 {
		width:calc(100% - 4%);
	}
	*/
	.w-50, .w-60, .w-70, .w-80, .w-90 {
		width:100%;
	}
	.w-r90 {margin:0; max-width:100%; width:100%;}
	.w-s90 {margin:0; max-width:92%; width:100%;}
	.w-c {margin:auto; width:calc(100% - 8%);}
	 
  	.grid:not(.no-stacking-on-mobiles) > .unit {
		width: 100% !important;
		padding-left: 8%;
		padding-right: 8%;
		margin-left:0;
  	}
  	.unit .grid .unit {
		padding-left: 0px;
		padding-right: 0px;
	}
  	.center-on-mobiles {
    	text-align: center !important;
  	}
  	.hide-on-mobiles {
    	display: none !important;
  	}
  	.only-on-mobiles {
    	display: block !important;
  	}
	
	.align-justify { text-align: left; }
	
	.flexFH__col {
		width: 100%;
	}

}

/* Expand the wrap a bit further on larger screens */
@media screen and (min-width: 1180px) {
	.wider .grid,
  	.grid.wider {
    	max-width: 100%;
    	margin: 0 auto;
  	}
}