/* ==========================================================================
   CSS for groupe-lafrance case study
   ========================================================================== */
.container.portfolio-cs { background-color: #000; }
.bg-groupe-lafrance { background: #fff; }
.text-color-groupe-lafrance { color: #747761 !important; }

div.container-introduction { background-image: url('../../img/casestudies/groupe-lafrance/slide-lafrance.jpg'); }

div.container-description, div.content-description { background: #FFF; }

div.content-description div.column.left { width: 50%; /*410/960*/ padding: 15% 0px 10% 20px;/*144/960*/ }
div.content-description div.column.right { width: 42.70833333333333%; /*410/960*/ margin-left: 5%;/*90/960*/ padding: 15% 0 10% 0; }
/*div.content-description div.column img { margin-top: 50%; margin-left: 9%; }*/

.presentation-shadow {
	-webkit-box-shadow:  0px 0px 70px 0px #000;
    -moz-box-shadow: 0px 0px 70px 0px #000;
	box-shadow:  0px 0px 70px 0px #000;
}  

div.container-presentation { background-color: #000; }

div.more-img { text-align: center; }

div.container-presentation div.title, div.site-link a { color: #FFF; }
div.container-presentation div.title.first { margin-top: 0px; }
div.container-presentation div.title.last   { margin-bottom: 0px; }

div.content-presentation { overflow:hidden; }
div.content-presentation .bg-flou { background: url('../../img/casestudies/groupe-lafrance/bg-flou.jpg') center top no-repeat; max-height: 945px; overflow: hidden; }
div.content-presentation .bg-beige { background: #c1c19e; } 
div.content-presentation .bg-white { background: #fff;}
div.content-presentation .bg-white .title, div.content-presentation .bg-map .title, div.content-presentation .bg-beige .title { color: #000; }
div.content-presentation .bg-map { background: url('../../img/casestudies/groupe-lafrance/bg-map.jpg') center top no-repeat; background-size: cover; max-height: 670px; overflow: hidden; }
div.content-presentation .bg-black { background: #000; padding-bottom: 5%; }

div.title { padding: 4.25% 0px 4.083333%; }
div.title.last { padding-bottom: 0px; }
div#portfolio-screenshot-1 { height:870px; background: url('../../img/casestudies/groupe-lafrance/macbook.png') no-repeat center top; }
.en div#portfolio-screenshot-1 { background-image: url('../../img/casestudies/groupe-lafrance/macbook-en.png'); }
div#portfolio-screenshot-2 { height:500px; }
div#portfolio-screenshot-3 { height:490px; background: url('../../img/casestudies/groupe-lafrance/screenshot-refonte.jpg') no-repeat center 40%; background-size: auto !important; }
.en div#portfolio-screenshot-3 { background-image: url('../../img/casestudies/groupe-lafrance/screenshot-refonte-en.jpg'); }
div#portfolio-screenshot-4 { height:390px; background: url('../../img/casestudies/groupe-lafrance/screenshot-refonte2.jpg') no-repeat center 17%; background-size: auto !important; }
div#portfolio-screenshot-5 { height:460px; background: url('../../img/casestudies/groupe-lafrance/screenshot-truck.png') no-repeat center 17%; background-size: auto !important; }
.en div#portfolio-screenshot-5 { background-image: url('../../img/casestudies/groupe-lafrance/screenshot-truck-en.png'); }

#before-after { margin: auto; border: 5px solid #fff; -webkit-box-shadow:  0px 0px 20px 5px rgba(0, 0, 0, .25); box-shadow:  0px 0px 20px 5px rgba(0, 0, 0, .25); -moz-box-shadow:  0px 0px 20px 5px rgba(0, 0, 0, .25); }

div.site-link a { color: #e3701e; }
div.content-presentation h3 { text-align: center!important; width:100%; padding:40px 0; }

/*Tablet (Portait)*/
@media only screen and (min-width: 768px) and (max-width: 999px), (max-height: 768px) {	
	div.content-description div.column.right{ margin-left: 2% !important;/*50/960*/ }
	div.presentation-img { background-size: 800px !important; }
	div#portfolio-screenshot-1, div#portfolio-screenshot-2 { height: 532px; }
	div#portfolio-screenshot-1 { background-size: 90% !important; height: 620px; }
	div.content-presentation .bg-beige { max-height: 600px; }
	
}
/*Tablet (Landscape)*/
@media (min-width: 800px) and (max-width: 1024px) {
	div.content-description div.column.right{ margin-left: 4%;/*70/960*/ }	
	div#portfolio-screenshot-3 { background-size: 92% !important;}
}
/*Mobile (Portait)*/
@media only screen and (max-width: 479px) {
	div.container-presentation div.title.last { padding-top: 10%; }	
	div.content-description div.column { line-height: inherit; }
	div.content-description div.column.left h3 { font-size: 12px !important; line-height: 18px; }
	div.content-description div.column.left { font-size: 10px; padding: 5% 20px 10% 20px; }
	div.content-description div.column.right{ width: 35%; margin-left: 0;/*10/960*/ }
	div.content-description div.column.right img { width: 60% !important; margin-top: -5%; }
	div.more-img img{ width: 95% !important; }	
	div.presentation-img { background-size: 300px !important; }	
	div.content-presentation .bg-map { height: 250px; }
	div#portfolio-screenshot-1, div#portfolio-screenshot-2 { height: 232px; }
	div.container-description, div.content-description { padding-bottom: 25px; } 
	div.content-presentation .bg-beige { max-height: 280px; }
	div#portfolio-screenshot-3, div#portfolio-screenshot-4 { max-height: 125px; }
	div#portfolio-screenshot-5 { height: 200px; }
}
@media only screen and (max-width: 419px) {
	div.content-description div.column.left { font-size: 10px; padding: 5% 20px 0 20px; width: 85% !important; }
	div.container-description, div.content-description { height: 265px; }	
	div.content-description div.column img { margin-top: 0; }
}
/*Mobile (Landscape)*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	div.container-presentation div.title.last { padding-top: 10%; }	
	div.content-presentation .bg-flou { height:auto;}
	div.content-presentation .bg-map { height: auto; }
	div.content-presentation .bg-beige { height:auto;  }
	div.container-description, div.content-description { padding-bottom: 0px; }
	div.content-description div.column.left h3 { font-size: 17px !important; }
	div.content-description div.column.left { font-size: 14px; padding: 5% 0px 10% 20px; }
	div.content-description div.column.right{ margin-left: 0;/*30/960*/ }		
	div.presentation-img { background-size: 500px !important; }
	div#portfolio-screenshot-1, div#portfolio-screenshot-2 { height: auto; padding-bottom:50px; }
	div#portfolio-screenshot-1 { height: 456px; background-size: 90% !important; background-position: center 10px; }
	div#portfolio-screenshot-3, div#portfolio-screenshot-4 { height: 250px !important; }
}
@media only screen and (max-width: 999px) {
	div.more-img img{ width: 70%; }	
	div.content-presentation .bg-black { padding-bottom: 8%; }
	div#portfolio-screenshot-3, div#portfolio-screenshot-4 { height: 400px; background-size: 90% !important; }
	div#portfolio-screenshot-4 { background-size: 70% !important; }
	div#portfolio-screenshot-5  { background-size: 90% !important; }
}