/* ==========================================================================
   CSS for sharks case study
   ========================================================================== */
.bg-sharks { background: #FFF; }
.bg-blue { background: #0388d5 url('../../img/casestudies/sharks/bg-bubble.jpg') no-repeat center bottom; background-size: 100%; padding-bottom: 20%; }
.bg-inventaire { background: url('../../img/casestudies/sharks/bg-inventaire.jpg') no-repeat center center scroll; background-size: cover; height: 968px; }

.content-presentation h4 { padding:50px 0 85px; color:#fff; max-width:80%; margin:0 auto; }

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

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

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

.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;
}  

#intro-sharks{ background: #03c3d5 url('../../img/casestudies/sharks/bg-intro.png') no-repeat center bottom; background-size: 100%; padding-bottom: 38%; text-align: center; padding-top: 7%; }

#intro-sharks img{ position: relative; width: 50%; }

.title.inventaire { padding-top: 10%; }

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

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

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

/*Tablet (Portait)*/
@media only screen and (min-width: 768px) and (max-width: 999px), (max-height: 768px) {	
	.container.portfolio-cs h4 { padding:30px 0 85px; }
	.bg-inventaire { height: 547px !important; }
	div.content-description div.column.right{ margin-left: 5.208333333333333%;/*50/960*/ }
	div.presentation-img { background-size: 800px !important; }
	div#portfolio-screenshot-1 { height: 532px; }
	div.more-img img{ width: 50% !important; }
}
@media (max-height: 768px) {
	.bg-inventaire { height: 597px !important; }
	div.content-description div.column.right { padding-bottom: 0; }
}
/*Tablet (Landscape)*/
@media (min-width: 800px) and (max-width: 1024px) {
	div.content-description div.column.right{ margin-left: 7.291666666666667%;/*70/960*/ }	
}
/*Mobile (Portait)*/
@media only screen and (max-width: 479px) {
	.container.portfolio-cs h4 { padding:30px 0 20px; }
	.bg-inventaire { height: 267px !important; }
	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; box-sizing:border-box; }
	div.content-description div.column.right{ margin-left: 1.041666666666667%;/*10/960*/ }	
	div.more-img img{ width: 95% !important; }	
	div.presentation-img { background-size: 300px !important; }
	div.container-presentation div.title.last { margin: 5% auto 2%; }
	div#portfolio-screenshot-1 { height: 232px; }
}
@media only screen and (max-width: 419px) {
	#intro-sharks img { width: 80%; top: 25px; }
	div.container-description, div.content-description { height: 440px; }
}
/*Mobile (Landscape)*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.bg-inventaire { height: 351px !important; }
	#intro-sharks img { width: 70%; top: 25px; }
	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.more-img img{ width: 85% !important; }	
	div.container-presentation div.title.last { margin: 5% auto 2%; }
	div#portfolio-screenshot-1 { height: 332px; }
}
@media only screen and (max-width: 999px) {
	div.more-img img{ width: 70%; }	
}
@media only screen and (max-width: 480px) {
	div#site-arrow.sharks { background: -49px -111px url('../../img/casestudies/icons-arrows-mobile.png') no-repeat; }
}