/* ==========================================================================

   CSS for Toiture Couture case study

   ========================================================================== */

.text-color-tc { color: #323232 !important; }
.text-color-blue { color: #121f2e !important; }
.text-color-black { color: #000 !important; }

div.intro { text-align: center; padding-bottom: 8% }
div.intro img { margin-top: -6%; width: 100%; max-width: 753px; }
.lt-ie9 div.intro img { margin-top: -6%; width: auto !important; max-width: 753px; }
 
div.more-img { text-align: center; }
div.more-img.pick-up { padding-top: 8%; }
div.info { max-width: 960px; width: 100%; margin: 0 auto; }
div.info p { color: #fff; font: 20px/28px 'gibsonregular' sans-serif; text-align: center; width: 88%; margin-left: auto; margin-right: auto; }
div.info.salon p { width: 85%; }

div.container-introduction { background-image: url('../../img/casestudies/m0851/slide-M0851.jpg'); }
div.container-description, div.content-description { background: #FFF; }
div.content-description div.column.left { width: 43.75%;/*420/960*/ padding: 12% 20px 9% 20px;/*144/960*/ }
div.content-description div.column.right { width: 42.70833333333333%;/*410/960*/ padding: 9.375% 0px 0px 0px;/*90/960*/ margin-left: 9.375%;/*90/960*/ }

div.container-presentation div.title { color:#fff; }
h3.title.map-monde {  padding: 12.25% 0 2.0833333333333%; }
.title.map-monde {position: absolute;width: 50%;top: 2%;color: #0b375c!important;font-size: 50px;line-height: 60px;}
.title.magento {position: absolute;top: 40%;font-size: 50px;}
.magento-description {color: #fff;font-family: gibsonregular, sans-serif;padding: 30% 50px 0;text-align: center;font-size: 23px;}
div.site-link a { color: #292d2e; }
div.container-presentation div.title.first { margin-top: 0px; }
div.container-presentation div.title.last   { margin-bottom: 0px; padding-top: 20px !important; }
div.container-presentation div.title.lettrage { padding-bottom: 1%; }

div.container-seance-photo { background:url('../../img/casestudies/m0851/site-web-m0851.jpg') no-repeat left; background-size: 51%; }
div.container-seance-photo .content, div.container-seance-photo .aside { width:50%;  }
div.container-seance-photo .content { float:left; }
div.container-seance-photo .aside { margin-left:50%;}
div.container-seance-photo .aside img { width:100%; }
div.container-seance-photo .content div.title { font-size:52px; text-align:left; padding:20% 0 0 22%; }
div.container-seance-photo .content div.info { font-size:20px; padding:0 0 0 22%; color:#fff; width:55%; margin:0;  }

div.super-panneau img { width:100%; }
div.super-panneau div.title { position:absolute; font-size:45px; }

div.meteomedia img { width:100%; }
div.meteomedia div.title { position:absolute; font-size:45px; }

div.container-radio { background:#31302b; background-size: 51%; overflow:hidden; }
div.container-radio .aside {float:left; width:50%;position: relative;}
div.container-radio .aside img { width:100%; }
div.container-radio .pub-radio { width:50%; margin-left:50%; position:relative;}
div.container-radio .pub-radio div.title { font-size:45px; }
div.container-radio .pub-radio img.logo985fm { display:block; position:absolute; left:11%; top:100%;  }
div.container-radio .pub-radio div.ecouter { width:93px; height: 85px;  top:0; position:absolute; right:24%; top:175%;}
div.container-radio .pub-radio div.ecouter i { display:block; width:200%; margin-left:-50%; margin-top:10px; font:15px 'gibsonitalic', sans-serif; text-align: center; color:#fff; }
 
.HYPE_scene { background-color:transparent!important; }
.HYPE_element { width:100%!important; height:100%!important; }

div.container-site { background:#292d2e; padding-bottom:90px; }
div.container-site div.title { font-size:45px; }
div.container-site img { margin:10px auto 0; width:90%; max-width:1480px; display:block; }

div.container-mobile img { width:100%; }

div.guide-marque { background:#fff; padding-bottom:90px; }
div.guide-marque div.title { font-size:45px; color:#292d2e; }
div.guide-marque div.title.last { font-size:27px; }
div.guide-marque img { margin:10px auto 0; width:90%; max-width:1340px; display:block; }


div#site-arrow.tc { background: -97px -144px url('../../img/casestudies/icons-arrows.png') no-repeat; }

div.magento-robuste h3 {  position: absolute; top: 50%; width: 100%; color: #fff;}
div.magento-description p { padding:30px 15px; }



/*Tablet (Portait)*/
@media only screen and (min-width: 768px) and (max-width: 999px), (max-height: 768px) {
	div.content-description div.column.right{ margin-left: 5.208333333333333%;/*50/960*/ }
	div.presentation-img { background-size: 800px !important; }
	div.info p{ font-size: 18px !important; }
}

/*Mobile (Portait)*/
@media only screen and (max-width: 479px) {
	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 0px 20px; }
	div.content-description div.column.right{ margin-left: 1.041666666666667%;/*10/960*/ }	
	div.presentation-img { background-size: 300px !important; }
	div.more-img img{ width: 95% !important; }
	div.info p{ font-size: 10px !important; line-height: 16px !important; }
	div.intro img { margin-top: -100px !important; }

}
@media only screen and (max-width: 419px) {	
	div.content-description div.column { 
		float: left !important;
		max-width: 42% !important; 
	}	
	div.content-description div.column.right{ padding-top: 10% !important; }
	div.container-description, div.content-description { height: 540px; }
}


/*Mobile (Landscape)*/
@media only screen and (max-width: 1500px) {
	div.container-radio .pub-radio img.logo985fm { width:280px;  left:12%; top:87%; }
	div.container-radio .pub-radio div.ecouter { width:88px; height:78px; right:24%; top:141%;  }	
	div.container-site { padding-bottom:70px; }

}
@media only screen and (max-width: 1450px) {
	.magento-description {padding: 25% 50px 0;font-size: 20px;}
    h3.title.map-monde {  padding: 13.25% 0 2.0833333333333%;  font-size: 40px;  line-height: 50px;}

}
@media only screen and (max-width: 1200px) {
	div.more-img.pick-up img{ width: 90%; }
	div.container-seance-photo .content div.title { font-size:34px; padding:18% 0 0 18%; }	
	div.container-seance-photo .content div.info { font-size:18px; padding:0 0 0 18%; width:62%; }
	div.super-panneau div.title { font-size:38px; }
	div.meteomedia div.title { font-size:38px; }
	div.container-radio .pub-radio div.title { font-size:38px; }
	div.container-radio .pub-radio img.logo985fm { width:250px; top:68%;}
	div.container-radio .pub-radio div.ecouter { width:74px; height:67px; top:135%; right:25%; }
	div.container-site div.title { font-size:38px; }
	div.guide-marque div.title { font-size:38px; }
	.magento-description {padding: 22% 50px 0;font-size: 19px;}
	.title.magento {font-size: 40px;}
    h3.title.map-monde {  font-size: 35px;  line-height: 45px;}
}

@media only screen and (max-width: 999px) {
	div.more-img img{ width: 95%; }	
	div.content-description div.column.left { padding-left:70px; }
	div.content-description div.column.right { width:30%; }
	div.container-seance-photo .content div.title { font-size:28px; padding-left:15%; }
	div.container-seance-photo .content div.info { font-size:15px; padding-left:15%; }
	div.super-panneau div.title { font-size:28px; }
	div.meteomedia div.title { font-size:28px; }
	div.container-radio .pub-radio div.title { font-size:28px; }
	div.container-radio .pub-radio div.ecouter { top:111%; right:22%; }
	div.container-radio .pub-radio div.ecouter i { font-size:13px; }
	div.container-radio .pub-radio img.logo985fm { top:17%; left:-4%; }
	div.container-site div.title { font-size:28px; }	
	div.container-site { padding-bottom:50px; }
	div.guide-marque div.title { font-size:28px; }
	.title.map-monde {font-size: 35px;line-height: 40px;top: 3%;}
	.magento-description {padding: 19% 20px 0;font-size: 16px;}
	.title.magento {font-size: 32px;}
    h3.title.map-monde {  padding: 8.25% 0 2.0833333333333%;  font-size: 28px;  line-height: 38px;}
}
@media only screen and (max-width: 767px) {
	div.content-description div.column.left h3 { font-size: 17px !important; }
	div.content-description div.column.left { font-size: 14px; padding: 5% 20px 0px 20px; }
	div.content-description div.column.right{ margin-left: 3.125%;/*30/960*/ }		
	div.content-description div.column.left { max-width:none; width:auto; padding:20px 10% 20px 10%; }
	div.presentation-img { background-size: 500px !important; }
	div.info p { font-size: 14px !important; line-height: 22px !important; }
	div.intro img { margin-top: -100px !important; }
	div.content-description div.column.left { padding-left:60px; width:50%; }
	div.content-description div.column.right { width:25%; }
	div.container-seance-photo .content div.title { padding-top:12%; }
	div.container-radio .pub-radio div.ecouter { top:114%; right:22%; width:59px; height:51px; }
	div.container-radio .pub-radio div.ecouter i { font-size:11px; }
	div.container-radio .pub-radio img.logo985fm { width:196px; top:31%; left:-1%; }
	div.container-introduction div.content-introduction h3.punch-line { display:none; }
	.title.map-monde {line-height: 30px;}
	.super-panneau.mobile-display {display: none;}
	.magento-description {padding: 9% 20px 0;font-size: 15px;}
    h3.title.map-monde {  font-size: 22px;  line-height: 32px;}	
	
}
@media only screen and (max-width:675px){
	div.content-description div.column.left { max-width:none; width:auto; padding:20px 10% 20px 10%; }
	div.content-description div.column.right { width:50%; margin-left:25%;}
	div.container-seance-photo .content { float:none; width:100%; }
	div.container-seance-photo .content div.title { padding:30px 10% 0 10%; }
	div.container-seance-photo .content div.info { padding:0 10% 30px 10%;  font-size:14px; width:auto; }
	div.container-radio .aside { width:100%; float:none; height:250px; background: url("../../img/casestudies/m0851/ecommerce-magento.jpg") center 33%; background-size:cover; }
	div.container-radio .aside img { display:none; }
	div.container-radio { background:none; }
	div.container-radio .pub-radio { width:100%; height:200px; margin:0;  background:#31302b; background-size:cover; }
	div.container-radio .pub-radio div.ecouter { top:39%; right:30%; }
	div.container-radio .pub-radio img.logo985fm { top:13%; left:17%; }
	div.container-site { padding-bottom:30px; }
	.magento-description {padding: 30px; }
	div.container-radio .pub-radio { height:auto; }
    h3.title.map-monde {  font-size: 18px;  line-height: 28px;}
}
@media only screen and (max-width: 480px) {	
	div#site-arrow.tc { background: -49px -71px url('../../img/casestudies/icons-arrows-mobile.png') no-repeat; }
	div.container-radio .pub-radio div.ecouter { right:25%; }
	div.container-radio .pub-radio img.logo985fm {  left:6%; }
	div.container-introduction div.content-introduction p.punch-line {font-size: 13px}
	div.container-site { padding-bottom:20px; }
	.magento-description {padding: 1px 20px 0;font-size: 14px;}
    h3.title.map-monde {  font-size: 13px;  line-height: 18px;}
}

@media only screen and (max-width:420px){
	div.content-description div.column.right {padding-top:10px!important; }
	div.content-description div.column.left { max-width:none; width:auto; padding:20px 5% 20px 5%; max-width:none!important; width:auto!important;}
	div.container-description, div.content-description { height:auto; }
	div.container-seance-photo .content div.title { padding:30px 5% 0 5%; }
	div.container-seance-photo .content div.info { padding:0 5% 30px 5%; font-size:10px; }
	div.container-radio .aside { height:180px; }
	div.container-radio .pub-radio div.ecouter { right:24%; }
	div.container-radio .pub-radio img.logo985fm {  left:3%; }
	div.container-introduction div.content-introduction p.punch-line {bottom: 15%;font-size: 11px}
	.title.map-monde {line-height: 20px;}
	.magento-description {padding: 25px 20px 20px;font-size: 11px;}
	
	div.title.map-monde{ top:0; }
	.title.magento { top:50%; font-size:20px; }
	div.container-radio .pub-radio { height:auto; }
}