/*
	Theme Name:   Elka Électrique
	Author:       Cake communication
	Author URI:   http://cakecommunication.com
	Template:     cake_base
	Version:      1.0.0
	Text Domain:  elka
*/

/*	=============================================================================
	!Typography
	========================================================================== */
	@font-face 											{ font-family: 'cake'; src: url('fonts/cake.eot'); src: url('fonts/cake.eot?#iefix') format('embedded-opentype'), 
														url('fonts/cake.woff2') format('woff2'), url('fonts/cake.woff') format('woff'), url('fonts/cake.ttf') format('truetype'), 
														url('fonts/cake.svg#Comme-Medium') format('svg'); font-weight: 500; font-style: normal; }
	
	@font-face 											{ font-family: 'United'; src: url('fonts/UnitedSansReg-Black.eot'); src: url('fonts/UnitedSansReg-Black.eot?#iefix') format('embedded-opentype'), 
														  url('fonts/UnitedSansReg-Black.woff') format('woff'), url('fonts/UnitedSansReg-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; }
	
	/* Typographic baseline */
															
	html												{ font-family: 'Exo', sans-serif; color #000; 
														  font-weight: 400; font-size: 125%; }													/* 1rem = 20px */
																	
	body												{ font-size: .8rem; line-height: 1rem; font-weight: 400; }								/* 16px -20px */
											  	  																	
	h1, .h1												{ font-size: 2.75rem; line-height: 3rem; font-family: 'United'; font-weight: bold; }	/* 55px - 60px -  */
	
	h2, .h2												{ font-size: 2rem; line-height: 2rem; font-family: 'United'; font-weight: bold; }		/* 40px - 40px -  */	
														  												  	
	h3, .h3												{ font-size: 1.6rem; line-height: 2rem; font-family: 'Exo'; }							/* 32px - 40px -  */	
	
	h4, .h4												{ font-size: 1rem; line-height: 1rem; font-family: 'Exo'; }								/* 20px - 20px -  */
	
	
	small, .small										{ font-size: .7rem; line-height: 1.1; }													/* 14 / 15 */
	
	.exo												{ font-family: 'Exo', sans-serif; }
	.exo2												{ font-family: 'Exo 2', sans-serif; }
	
	.regular											{ font-weight: 400; }
	b, strong, .strong, .bold							{ font-weight: 700; }
	
	.underline											{ border-bottom: 1px solid;} 
	.strike												{ text-decoration: line-through; }	
	
	.normal-style										{ font-style: normal; }
	.italic, em											{ font-style: italic; }
	
	@media screen and ( max-width: 1400px  ){
		h1, .h1												{ font-size: 2.5rem; }	
		
	}
	
	@media screen and ( max-width: 600px  ){
		h1, .h1												{ font-size: 2rem; }		
		h2, .h2												{ font-size: 1.8rem; }
	}
	
	@media screen and ( max-width: 450px  ){
		h1, .h1												{ font-size: 1.5rem; }		
		h2, .h2												{ font-size: 1.4rem; }
		h3, .h3												{ font-size: 1.3rem; }

	}	
	

	
/*	============================================================================
	!SITE
	========================================================================== */
	.wrapper											{ height: 100%; }
	.container											{ max-width: 750px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
	.big-container										{ max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
	.c-item__head										{ max-width: 700px; width: 100%; text-align: center; }
	
	.border-top											{ border-top: 5px solid #0054A2; }
	.border-bottom										{ border-bottom: 5px solid #0054A2; }

	/* !BUTTONS */
	[class*="c-btn"]									{ position: relative; display: inline-block; background-image: url(img/btn2.png); background-size: auto 100%; background-position: left center; 
														  background-repeat: no-repeat; line-height: 2.5rem; padding-left:2.5rem; padding-right: 1rem; }
	[class*="c-btn"]:hover								{ opacity: .9; }

	/* !INPUT */
	[class*="input-"]									{ -webkit-appearance: none; border-radius: 0; border: 0; text-align: center; padding: .5rem 1rem; }
	[class*="input-"]::-webkit-input-placeholder		{ color: #fff;  } 		
	[class*="input-"]:-moz-placeholder					{ color: #fff;  }
	[class*="input-"]::-moz-placeholder					{ color: #fff;  }
	[class*="input-"]:-ms-input-placeholder				{ color: #fff;  }

	@media screen and ( max-width: 1250px ){ 
		.container											{ padding-left: 1rem; padding-right: 1rem; }									
	}
	
	@media screen and ( max-width: 950px ){ 
		.big-container										{ padding-left: 1rem; padding-right: 1rem; }									
	}
	
	@media screen and ( max-width: 650px ){
		[class*="c-btn"]									{ background-image: none; padding: .25rem .5rem; line-height: 1rem; }
	}

/*	============================================================================
	!MENU & HEADER & FOOTER
	========================================================================== */
	/* !HEADER */
	.c-header											{ width: 100%; }
	.c-header .c-header__utility,
	.c-header .c-header__logo							{ z-index: 2; }
	.c-header__icon										{ width: 194px; }
	.c-header__icon	span								{ position: relative; display: block; padding-bottom: 41.47%; }									
	.c-header__icon svg									{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
	
	.c-footer											{ background-image: linear-gradient(#001f4b , #000 ) }
	
	/* !MAIN NAV */
	.menu-main>li										{ padding: 0 1rem; position: relative; background-color: inherit; }	
	.menu-main>li .sub-menu								{ position: absolute; top: 100%; left: 0; min-width: 100%; max-height: 0; overflow: hidden; transition: all .3s; z-index: 1; box-sizing: border-box; } 
	.menu-main>li:hover .sub-menu						{ max-height: 50rem; background-color: inherit; }		
	.menu-main>li .sub-menu	li							{ padding: 1rem; text-align: left; }
	
	/* !UTILITY NAV */
	.menu-utility>li a									{ display: block; padding: 0 .5rem; border-left: 1px solid; }	
	.menu-utility>li:first-child a						{ border: 0; }
	.menu-utility>li .sub-menu							{ position: absolute; top: 100%; left: 0; min-width: 100%; max-height: 0; overflow: hidden; transition: all .3s; z-index: 1; box-sizing: border-box; } 

	/* !FOOTER NAV */
	.menu-footer>li										{ padding: 0 1rem; position: relative; background-color: inherit; border-left: 1px solid; }	
	.menu-footer>li:first-child							{ border-left: 0; }
	.menu-footer>li .sub-menu							{ position: absolute; top: 100%; left: 0; min-width: 100%; max-height: 0; overflow: hidden; transition: all .3s; z-index: 1; box-sizing: border-box; } 
	
	
	/* !MOBILE */
	.menu-mobile>li.hidden								{ display: none; }	
	.c-mobile__lbl										{ position: relative; z-index: 10; }
	.c-mobile__lbl-span									{ display: inline-block; vertical-align: middle; width: 2rem; height: 2rem; position: relative; box-sizing: content-box; }
	.c-mobile__lbl-line									{ width: 1.5rem; display: block; margin: auto; height: 1px; background-color: #00c1f3; position: absolute; top: 7px; left: .25rem; 
														  transition: top .3s linear .3s, transform .3s linear, background .3s linear .3s, height .3s linear .3s; }
	.c-mobile__lbl-line:nth-child(2)					{ height: 2px; background-color: #007dbf; top: 16px; }
	.c-mobile__lbl-line:nth-child(3)					{ top: 26px; background-color: #009dd7; }
	.c-mobile__in:checked ~ .c-header .c-mobile__lbl-line				{ top: 19.5px; transform: rotate(45deg); transition: top .3s linear, transform .3s linear .3s, background .3s, height .3s; }
	.c-mobile__in:checked ~ .c-header .c-mobile__lbl-line:nth-child(2) 	{ height: 1px; background-color: #00c1f3; }					
	.c-mobile__in:checked ~ .c-header .c-mobile__lbl-line:nth-child(3) 	{ transform: rotate(-45deg); background-color: #00c1f3;  } 
	.nav-mobile li										{ display: block; text-align: center; padding: .5rem }
	.nav-mobile .sub-menu								{ position: relative; font-size: .8rem; padding-top: .5rem; }
	.c-mobile__pan										{ position: fixed; left: 0; top: -100%; width: 100%; height: 100%; box-sizing: border-box; background-color: #fff; background-color: rgba( 255, 255, 255, 0); z-index: 5; 
														overflow: auto; transition: all .5s; padding-top: 5rem }
	.c-mobile__in:checked ~ .c-mobile__pan				{ top: 0; background-color: #fff; background-color: rgba( 255, 255, 255, .9); }
	.c-mobile__close									{ position: absolute; width: 2rem; line-height: 2rem; right: 2rem; top: 2rem; text-align: center; box-sizing: border-box; }	

	@media screen and ( max-width: 850px ){
		.c-header .c-header__logo						{ order: 2; }
		.c-header .c-header__utility					{ order: 1; padding-top: 1rem; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%;}
		.c-header .c-header__menu						{ order: 0; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%;}
		.menu-mobile li.hidden							{ display: block; }
		.nav-utility 									{ display: none; }
	}
	
	@media screen and ( max-width: 760px ){
			.menu-footer								{ display: none; }	
	}
				
	@media screen and ( max-width: 650px ){						
		/* MOBILE */
		/*[class*="c-mobile"]								{ display: block; }*/
		.menu-mobile>li.hidden								{ display: block; }

		.nav-utility									{ display: none; }
		.nav-main .grid-33:first-child					{ }
	}

/*	============================================================================
	!MODULES
	========================================================================== */
	.bkg-gradiant-18									{ background-color: rgba(0, 193, 243, .18); background-image: linear-gradient( -90deg, rgba( 0, 74, 153, .18), transparent ) }
	
	.cake-banner .flex-column							{ max-height: 100vh; }

	.c-map__grid										{ position: relative; }
/* 	.c-map__grid:first-child:after						{ content:''; position: absolute; left: 100%; margin-left: 1px; top: 0; display: block; background-color: #fff; z-index: 2; width: 2px; height: 100%; } */
	
	@media screen and ( max-width: 900px ){
		.cake-banner:not(.top-banner) .flex-column			{ height: auto!important; padding: 2rem; }
	}
	
	@media screen and ( max-width: 850px ){
		.c-map__grid										{ text-align: left; }
		.c-map__grid:first-child:after						{ display: none; }
	}
	
	@media screen and ( max-width: 750px ){
		.top-banner .flex-column							{ -ms-flex-pack: end; justify-content: flex-end; padding-bottom: 5rem; }
	}	
	
	@media screen and ( max-width: 650px ){				
		.top-banner .flex-column							{ height: auto!important; padding-top: 10rem; }
		.c-map__mail a										{ word-break: break-all; word-wrap: break-word; }
		.googlemaps											{ height: 50vw; }
	}
	
	@media screen and ( max-width: 450px ){	
		.googlemaps											{ height: 75vw; }
	}
	
/*	============================================================================
	!SLIDER
	========================================================================== */
		/* Réalisations */
	.slider, .slides, .flex								{ transition: height .3s, top .3s, bottom .3s, padding .3s, background .3s, left 0s; }
	.c-slider__full										{ display: table; z-index: -1; opacity:0; transition: opacity .6s; }
	.slide												{ transition: height .3s, background .3s, padding 0s; vertical-align: top }
	.c-slide-first__img	span							{ background-color: rgba(0, 100, 168, .6); transition: all .3s;}
	@supports ( background-blend-mode: multiply ){
		.c-slide-first__img	span							{ background-color: transparent; }
		.c-slide-first__img									{ background-color: #0064a8; background-blend-mode: multiply; transition: all .3s;}
	}
	
	.c-real__cb:checked ~ .slider .c-slide-first__img,
	.c-slider:hover .c-slide-first__img	span,
	.c-slider:hover .c-slide-first__img					{ background-color: transparent; }
	.c-slide-first__img	span							{ display: block; padding-bottom: 60.37%; /*background: linear-gradient( -90deg, #004a99, #00c1f3 ); background-blend-mode: multiply;*/ }
	
	.c-slider__desc										{ background-color: rgba( 0, 31, 75, .7 ); bottom: 0; left: 0; width: 100%; transition: all .3s; }
	
	.c-slider:nth-child(4n+1)							{ background-color: rgba(0, 193, 243, .09); background-image: linear-gradient( -90deg, rgba( 0, 74, 153, .09), transparent ) }
	.c-slider:nth-child(4n+2)							{ background-color: rgba(0, 193, 243, .18); background-image: linear-gradient( -90deg, rgba( 0, 74, 153, .18), transparent ) }
	.c-slider:nth-child(4n+3)							{ background-color: rgba(0, 193, 243, .27); background-image: linear-gradient( -90deg, rgba( 0, 74, 153, .27), transparent ) }
	.c-slider:nth-child(4n+4)							{ background-color: rgba(0, 193, 243, .36); background-image: linear-gradient( -90deg, rgba( 0, 74, 153, .36), transparent ) }
	
	.cake-posts .slide.bkg-cover						{ padding-bottom: 36.2%; }

	.c-real__lbl										{ position: relative; display: inline-block; background-image: url(img/btn.png); background-size: auto 100%; background-position: left center; 
														  background-repeat: no-repeat; line-height: 40px; padding-left:2.5rem; }
	.c-real__btn										{ position: absolute; z-index: 2; left: -2rem; top: 50%; margin-top: -2px; }
	.btn-right, .btn-left								{  width: 1rem; }
	.c-real__btn-img									{ display: block; position: relative; padding-bottom: 193.2%; }
	.c-real__btn svg									{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
	.c-real__btn.btn-right								{ left: auto; right: -2rem;}
	.c-real__btn.btn-plus								{ width: 2rem; height:2rem; padding: 0; left: auto; top: 1rem; margin-top: 0; right: 1rem; }
	.c-real__btn-line									{ display: block; width: 1rem; height: 2px; position: absolute; left: .5rem; background-color: #fff; top: 50%; transition: all .3s; }
	.c-real__btn-line:nth-child(2)						{ transform: rotate(90deg); }
	.is_active.slider .c-real__btn.btn-left				{ left: 6rem; }
	.is_active.slider .c-real__btn.btn-right			{ right: 6rem; }
	
	.c-real__cb:checked ~ .slider						{ position: fixed; top: 0; left: 0; right: 0; bottom: 0;  z-index: 10; background: rgba( 0, 74, 153, .7 )!important; }
	.c-real__cb:checked ~ .slider .slides,
	.c-real__cb:checked ~ .slider .slide				{ height: 100%; padding: 0; background: rgba( 0, 74, 153, .7 )!important; }
	.c-real__cb:checked ~ .slider .c-slider__full		{ z-index: 5; width: 100%; height: 100%; opacity: 1; transition: opacity .6s; }
	.c-real__cb:checked ~ .slider .flex					{ height: 100%; color: #fff; }
	.c-real__cb:checked ~ .slider .flex	.btn-plus		{ display: inline-block; }
	.c-real__cb:checked ~ .slider .flex	.c-real__btn-line			{ background-color: #000; }
	.c-real__cb:checked ~ .slider .c-real__btn-line:nth-child(1)	{ transform: rotate(-45deg); }
	.c-real__cb:checked ~ .slider .c-real__btn-line:nth-child(2)	{ transform: rotate(45deg); }
	
	@media screen and ( max-width: 1200px ){
		.slide .h2											{ margin-bottom: 1rem; }
		.slide .btn-bordered__square						{ margin-top: 0; }
	}
	
	@media screen and ( max-width: 1150px ){
		.slide .flex .box-x4								{ padding: 2rem; }
		.is_active.slider .c-real__btn.btn-left				{ left: 4rem; }
		.is_active.slider .c-real__btn.btn-right			{ right: 4rem; }							
	}
	
	@media screen and ( max-width: 875px ){
		.slide .grid-60:first-child							{ display: none; }
		.is_active.slider .c-real__btn.btn-left				{ left: 2rem; }
		.is_active.slider .c-real__btn.btn-right			{ right: 2rem; }
	}
	
	@media screen and ( max-width: 750px ){
	}
	
	@media screen and ( max-width: 650px ){
		.cake-posts .slide.bkg-cover						{ padding-bottom: 60%; }
		.slide .box-x4										{ padding: 1rem 2rem;}
	}
	
	@media screen and ( max-width: 450px ){
		.cake-posts .slide.bkg-cover						{ padding-bottom: 100%; margin-bottom: 2.2rem; }
		.c-slider__desc										{ background-color: rgba( 0, 0, 0, .7 ); bottom: -2.2rem; } 
		.is_active.slider .c-real__btn.btn-left				{ left: .5rem; }
		.is_active.slider .c-real__btn.btn-right			{ right: .5rem; }
	}