/* ==========================================================================
   CSS for hardy-normand case study
   ========================================================================== */
.bg-hardy-normand { background-color: #FFF; }
.bg_intro { background: url('../../img/casestudies/hardy-normand/bg_intro.jpg') no-repeat center center scroll; background-size: cover; padding-bottom: 50%;}
.en .bg_intro { background-image: url('../../img/casestudies/hardy-normand/bg_intro-en.jpg'); }
.bg_special { background: #8f8e93 url('../../img/casestudies/hardy-normand/bg_blueprint.jpg') no-repeat top; background-size: 100%; }
.bg_special .second_bg { background: url('../../img/casestudies/hardy-normand/bg_mountain.jpg') no-repeat bottom center; background-size: 100%; padding-bottom: 8%; }
.bg_purple { background: #3e2c54 url('../../img/casestudies/hardy-normand/bg_purple.jpg') no-repeat center top; background-size: 100%; }
.bg_light_purple { background-color: #eceef6; }
.bg_blue { background-color: #002a5d; }
.bg_purple, .bg_light_purple, .bg_blue { padding-bottom: 5%; }
.text-color-hardy-normand { color: #000 !important; margin-bottom: 25px; }
.text-color-grey { color: #747474 !important; }
h3.title {  color: #fff;  padding-top: 80px;}

div.container-introduction { background-image: url('../../img/casestudies/hardy-normand/slide-HN.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: 3.375%;/*90/960*/ padding: 15% 20px 0px 20px;/*144/960*/ }

.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.more-img { text-align: center; }
div.more-img.logo-30ans { padding: 4% 0 10%; }
div.info { max-width: 960px; width: 100%; margin: 0 auto; }
div.info p { color: #fff; text-align: center; width: 85%; margin-left: auto; margin-right: auto; }
.bg_special .second_bg div.title { padding-bottom: 0; }
.bg_special .second_bg div.info p { margin: 5% auto; width: 90%; }
div.info.microsite { float: right; }
div.info.microsite p { width: 38% !important; font-size: 18px; line-height: 26px; text-align: left; padding-left: 55%; }

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:850px; background: url('../../img/casestudies/hardy-normand/microsite-carriere.png') no-repeat center; background-size: 100%; margin-top: 5%; }
.en div#portfolio-screenshot-1 { background-image: url('../../img/casestudies/hardy-normand/microsite-carriere-en.png'); }
div#portfolio-screenshot-2 { height:1100px; background: url('../../img/casestudies/hardy-normand/microsite.png') no-repeat center; }
.en div#portfolio-screenshot-2 { background-image: url('../../img/casestudies/hardy-normand/microsite-en.png'); }
div#portfolio-screenshot-3 { height:700px; background: url('../../img/casestudies/hardy-normand/document-corpo.png') no-repeat center; }

div#site-arrow.hardy-normand { background: -187px -304px url('../../img/casestudies/icons-arrows.png') no-repeat; }

/* IE 8 Style */
.lt-ie9 div.presentation-img { max-width: inherit; }
.lt-ie9 div#portfolio-screenshot-1{ height: 1200px; }

/*Tablet (Portait)*/
@media only screen and (min-width: 768px) and (max-width: 999px), (max-height: 768px) {	
	div.content-description div.column.right{ margin-left: 3.208333333333333%;/*50/960*/ }
	div.presentation-img { background-size: 800px !important; }
	div.info p{ font-size: 18px !important; }
	div.info.microsite p { font-size: 16px !important; }	
	div.more-img.maquette img{ width: 90%; }
	div#portfolio-screenshot-1 { height: 650px !important; }
	div#portfolio-screenshot-2 { height: 800px; }
	div#portfolio-screenshot-3 { height: 532px; }
}
@media (max-height: 768px){
	div#portfolio-screenshot-1 { height: 850px !important; background-size: 100% !important; }
}
/*Tablet (Landscape)*/
@media (min-width: 800px) and (max-width: 1024px) {
	div.content-description div.column.right{ margin-left: 4.291666666666667%;/*70/960*/ }	
}
/*Mobile (Portait)*/
@media only screen and (max-width: 479px) {
	div.container-presentation div.title.last { margin-top: 5%; }	
	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: 0; padding-right: 0; }	
	div.presentation-img { background-size: 300px !important; }
	div.more-img img{ width: 95% !important; }	
	div.more-img.logo-30ans img{ width: 65% !important; }
	div.info p{ font-size: 10px !important; line-height: 16px !important; }
	div.info.microsite p { font-size: 8px !important; line-height: 14px !important; }
	div#portfolio-screenshot-1 { height: 285px !important; margin-top: 10%; }
	div#portfolio-screenshot-2 { height: 300px; }
	div#portfolio-screenshot-3 { height: 232px; }
}
@media only screen and (max-width: 419px) {
	div.container-description, div.content-description { height: 580px; }	
	div.content-description div.column.left { width: 85% !important; }
	div.content-description div.column.right { padding-top: 0 !important; }
	div#portfolio-screenshot-1 { margin-top: 10%; }
}
/*Mobile (Landscape)*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	div.container-presentation div.title.last { margin-top: 5%; }
	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: 0; padding-right: 0; }		
	div.presentation-img { background-size: 500px !important; }
	div.info p { font-size: 14px !important; line-height: 22px !important; }
	div.info.microsite p { font-size: 12px !important; line-height: 20px !important; }
	div#portfolio-screenshot-1 { height: 450px !important; margin-top: 10%; }
	div#portfolio-screenshot-2 { height: 600px; }
	div#portfolio-screenshot-3 { height: 332px; }
	div.more-img.maquette img{ width: 90%; }
    h3.title {  color: #fff;  padding-top: 55px;}
}
@media only screen and (max-width: 999px) {
	div.more-img img{ width: 60%; }	
}
@media only screen and (max-width: 1024px) {
	div.info.microsite p { margin: 0 auto !important; }
}
@media only screen and (max-width: 480px) {
	div#site-arrow.hardy-normand { background: -93.5px -151px url('../../img/casestudies/icons-arrows-mobile.png') no-repeat; }
    h3.title {  color: #fff;  padding-top: 55px;}
}