/* ==========================================================================
   CSS for trekfit case study
   ========================================================================== */

/*#iphone-frame { display: none!important; }
.inscription { display:none!important; }*/

.bg-trekfit { background-color: #fff; }
.bg_red { background-color: #a60101; }
.bg_intro { background: url('../../img/casestudies/trekfit/bg_accueil.jpg') no-repeat center center; background-size: cover; -webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, 0.75); height:400px;
-moz-box-shadow:    0px 3px 15px rgba(50, 50, 50, 0.75);
box-shadow:         0px 3px 15px rgba(50, 50, 50, 0.75); }
.bg_codeQR { background: url('../../img/casestudies/trekfit/bg_QR.jpg') no-repeat center center; background-size: cover; }
.text-color-trekfit { color: #a60101 !important; }

.content-presentation h3 { padding:50px 0 0; max-width:80%; margin:0 auto; margin-bottom:30px; }
.content-presentation h4 { margin:20px auto 30px; max-width:80%; }
.content-presentation .bg_red,
.content-presentation .bg_codeQR { color:#fff; }

div#portfolio-screenshot-2 { background:url('../../img/casestudies/trekfit/screenshot-page-inscription.png') no-repeat center; height:732px; }
.en div#portfolio-screenshot-2 {  background-image: url('../../img/casestudies/trekfit/screenshot-page-inscription-en.png');}

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

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

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

.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.sub-title{ color: #4b4b4b; padding-bottom: 5%; }
div.sub-title.less-pad-bottom { padding-bottom: 2%; }
div.sub-title.pad-top { padding-top: 3%; }

div.more-img { text-align: center; }
div.more-img.grey-line { padding: 8% 0 0; }
div.more-img.outil-suggestion { padding-top: 2%; }
div.info { max-width: 960px; width: 100%; margin: 0 auto; overflow: hidden; position: relative; }
div.info p { width: 50%; float: left; position: absolute; top: 70%; color: #fff;  }
div.info img.affiche { float: right; margin-top: 8%;  }
#iphone-frame {
background:url('../../img/casestudies/trekfit/iphone5.png') no-repeat;
width: 1050px;
height: 538px;
margin: -12% auto 0;
position: relative;
z-index: 5;
}
#iphone-video-container{
position: relative;
top: 4%;
left: 27%;
height: 320px;
width: 550px;
overflow: hidden;
}	
#start-video-token { position: absolute; bottom: 0; }


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 {
	padding: 80px 0px 0px 0px;
}

div.content-description img{ max-width: 386px; }

div.content-presentation div.pad-bottom { padding-bottom: 8%; }








/*Tablet (Portait)*/
@media only screen and (min-width: 768px) and (max-width: 999px), (max-height: 768px) {	
	div.title, div.sub-title { width: 95%; margin: 0 auto; }
	div.content-description div.column.right{ margin-left: 5.208333333333333%;/*50/960*/ }
	div.presentation-img { background-size: 800px !important; }
	div.info p{ margin-left: 5%; font-size: 18px !important; }
	#iphone-video-container video, #iphone-video-container img{ height: 100% !important; top: 5.5% !important; }
	div#portfolio-screenshot-1 { height: 832px; }
	div#portfolio-screenshot-2 { height: 532px; }
	
}
@media only screen and (max-height: 768px){
	#iphone-video-container video, #iphone-video-container img{ height: inherit !important; }	
}
@media (min-width: 980px) and (max-width: 1024px) {
	#video-trekfit.hidden-tablet { display: inline-block !important; }
	#video-layer {
  width: 100%;
  position: relative;
  top: 3.5%;
}
}
/*Tablet (Landscape)*/
@media (min-width: 800px) and (max-width: 1024px) {
	div.content-description div.column.right{ margin-left: 7.291666666666667%;/*70/960*/ }
	div.info p{ margin-left: 5%; }	
	#iphone-video-container video, #iphone-video-container img{ height: % !important; top: 1.5% !important; }
	#iphone-video-container { left:18%; }
}
/*Mobile (Portait)*/
@media only screen and (max-width: 479px) {
	div.title, div.sub-title { width: 95%; margin: 0 auto; }
	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{ margin-left: 5%; font-size: 10px !important; line-height: 16px !important; margin-top: -7%; }
	div.inscription { margin-top: -45%; }	
	#iphone-frame { margin-top: -5%; }
	#iphone-video-container { top: 1.5% !important; }	
	#iphone-video-container video, #iphone-video-container img{ top: 2.5% !important; }
	#video-layer { top: 3% !important; }
	div#portfolio-screenshot-1 { height: 332px; } 
	div#portfolio-screenshot-2 { height: 232px; }
}
@media only screen and (max-width: 419px) {
	div.content-presentation div.pad-bottom { padding-bottom: 7%; }
	div.content-description div.column.left { width: 85% !important; }
	div.container-description, div.content-description { height: 525px; }
	div.content-description div.column.left h3 { margin-bottom: 0; }
	div.content-description img { width: 50% !important; }
	#iphone-video-container { top: 1% !important; }
	#iphone-video-container video, #iphone-video-container img{ top: 2% !important; }
	#video-layer { top: 2.5% !important; }
}
/*Mobile (Landscape)*/
@media only screen and (min-width: 480px) 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.presentation-img { background-size: 500px !important; }
	div.info p { margin-left: 5%; font-size: 14px !important; line-height: 22px !important; margin-top: -5%; }
	div.inscription { margin-top: -20%; }	
	div.more-img.outil-suggestion img { width: 95%; }
	#iphone-frame { margin-top: -9%; }
	#iphone-video-container { top: 2% !important; }	
	#iphone-video-container video, #iphone-video-container img{ top: 3% !important; }
	#video-layer { top: 4.5% !important; }
	div#portfolio-screenshot-1 { height: 532px; }
	div#portfolio-screenshot-2 { height: 332px; }
}
@media only screen and (max-width: 1024px) {	
	#iphone-frame { width: 75%; height: 75%; background-size: 100% }
	#iphone-video-container { width: 70%; }
	#iphone-video-container video, #iphone-video-container img{ width: 100%; height: 71%; position: relative; top: 5%; margin-top:8px; }	
	#video-layer { width: 74%; position: relative; top: 3.5%; }
	div.content-presentation {
	padding: 80px 0px 10% 0px;
}
}
@media only screen and (max-width: 999px) {
	#iphone-frame { width: 100% !important; height: 100% !important; background-size: 100% }
	#iphone-video-container { top: 3%; }
	#iphone-video-container video, #iphone-video-container img{ top: 4%; }	
	div.more-img img, div.info img{ width: 70%; }	
}
@media only screen and (max-width: 480px) {
	
}