@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape),
only screen and (max-width : 1005px) {

	/* ///////////////////////////////////////////// */
	/* // DISABLE HOVER //////////////////////////// */
	/* ///////////////////////////////////////////// */

	.btn:before { left: 0; width: 100%; height: 100%;}

	.social li a:hover {
		-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
				transform: translateY(0);
	}
    
    .team li:after {display: none;}
    .team li p {margin-top: 30px;}
    
	footer address a:before,
	.team li a:before,
	nav.details ul li a:hover:before {display: none;}

	.galerie:hover a {opacity: 1;}
	
	.realisations .galerie a:hover:before, 
	.realisations .galerie a:before { opacity: .9; height: 50%; bottom: 0; width: 96%; margin: 0 2% 2%;}
	.realisations .galerie a span,
	.realisations .galerie a:hover span {
		line-height: 300px;
	    -webkit-transform: translateY(0);
		    -ms-transform: translateY(0);
		    	transform: translateY(0);
	}

	.incCookies span:before {opacity: 0;}
	.incCookies span:after {opacity: 1;}
	
    
    
	/* ///////////////////////////////////////////// */
	/* // NAVBAR /////////////////////////////////// */
	/* ///////////////////////////////////////////// */

	a.navMobile { display: inline-block;}

	nav.main { text-align: center; padding: 30px 0; z-index: 300;}	
	nav.main > ul {
		position: absolute;
		top: 83px;
        left: 5%;
		width: 90%;
		margin: 10px 0 0;
		display: none;
	}
	nav.main > ul:after {
		bottom: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		-ms-pointer-events: none;
		pointer-events: none;
		border-color: rgba(243, 211, 172, 0);
		border-width: 10px;
		margin-left: -10px;
	}
	
	nav.main > ul > li,
	nav.main > ul > li.last {float: none;}
	
	nav.main > ul > li > a {
		display: block;
		font-size: 1.125em;
		font-weight: 600;
		text-transform: uppercase;
		text-align: center;
		padding: 20px;
		position: relative;
		z-index: 10;
	}
    
    nav.main > ul > li > a.external {padding-right: 20px;}
    nav.main > ul > li > a.external:before,
    nav.main > ul > li > a.external:hover:before {
        left: 50%;
        right: inherit;
        background-position: -12px top;
        -webkit-transform: translateX(65px);
            -ms-transform: translateX(65px);
                transform: translateX(65px);
    }
    
    
	nav.main > ul > li.hasSub > a {padding: 20px;}
	
	nav.main > ul > li.hasSub > a:before,
	nav.main > ul > li > a:after,
	.subnav li a:after {display: none;}
		
	nav.main > ul.active,
	nav.main > ul.active .subnav {display: block;}
	
	/* ///////////////////////////////////////////// */
	/* // SUBNAV /////////////////////////////////// */
	/* ///////////////////////////////////////////// */
	
	.subnav {
		position: relative;
		display: block;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
				transform: translateY(0);
		-webkit-transition: inherit;
				transition: inherit;

	}
	.subnav:after {
		bottom: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		-ms-pointer-events: none;
		pointer-events: none;
		border-color: rgba(219, 190, 155, 0);
		border-width: 7px;
		margin-left: -7px;
	}
	.subnav li { border-top: none;}
	
	/* ///////////////////////////////////////////// */
	/* // BADGE //////////////////////////////////// */
	/* ///////////////////////////////////////////// */

	.badge {
		-webkit-animation: none;
				animation: none;
	}
	
	.badge .logo {opacity: 1;}
	.badge .slogan {width: 135px;}


	/* ///////////////////////////////////////////// */
	/* // COULEURS ///////////////////////////////// */
	/* ///////////////////////////////////////////// */

	nav.main > ul {background-color: #272D34;}
    nav.main > ul:after {border-bottom-color: #272D34;}
	
    nav.langNav ul li a:hover {background: #fff; color: #38414A;}
	nav.main > ul > li.active > a:hover,
	nav.main > ul > li.active > a
	{background-color: #F7B679;}
    
    nav.main > ul > li > a,
	nav.main > ul > li > a:hover {color: #F7B679;}
    nav.main > ul > li.active > a:hover {color: #fff;}
    
    .btn:hover,
    footer .btn {color: #38414A;}
    
    p a:hover { color: #3E648A;}
	
    footer address a,
    footer address a:hover,
    .contact .infos a:hover{color: #38414A;}
    
    .submit,
    .submit:hover {background: #F7B679; color: #fff;}
				
}

@media only screen and (max-width : 1050px) {
	
	.tarifs .box h3 {margin: 0 0 10px;}
	.tarifs .box .prix {display: block; float: none; clear: both; margin: 0 0 30px;}	 
	
}

@media only screen and (max-width : 1000px) {

	.details article .leftCol,
	.details article .rightCol {float: none; width: auto;}

	.galerie.rightCol {margin-top: 30px;}
	
	.galerie {text-align: center;}
	.galerie a {display: inline-block; float: none;}
	
}

@media only screen and (max-width : 960px) {
	
	.promos .box h3,
	.promos .box .prix { float: none; text-align: center; display: block;}
	.promos .box h3 {margin: 0 0 10px;}
	.promos .box .prix {margin: 0 0 30px;}
	
	.promos del {position: relative; top: 0; right: 0; display: block;}
	
}


@media only screen and (max-width : 850px) {
    .team li {width: 100%; padding: 60px 10%;}
    .apercu_services li {width: 50%;}
}

@media only screen and (max-width : 800px) {

	.bx-wrapper .bx-controls-direction { top: 100%; height: auto;}
	
	.tarifs .box img {float: none; margin: 0 auto 30px; width: 50%; display: block;}
	.tarifs .box .inner {float: none; width: 100%;}
	.tarifs .box h3,
	.tarifs .box .prix {text-align: center; float: none;}
    
}


@media only screen and (max-width : 770px) {

	header .logo {margin: 20% 0 15% 5%;}
    h1.title {font-size: 1.5em;}
    h3, .index .box h2 {font-size: 1.45em;}

	.wrapRealisations {text-align: center;}
	.wrapRealisations h2 {margin-left: 0;}
	
	.comments p {width: auto; float: none;}
	.comments .btn {float: none; margin: 30px 0 0;}
	
	form,
	.contact .infos {width: 100%; float: none;}
	.contact .infos {margin: 60px 0 0;}
    
    .credits .inner, .badge {float: none;}
    .badge {margin: 30px 0 0 135px;}
}	

@media only screen and (max-width : 690px) {
    
	.about article img {width: 100%; margin: 0 0 30px; float: none; display: block;}
	
	.services article .slider,
	.services article .inner { float: none; width: 100%;}
	.services article .slider {margin: 0 auto 30px;}
	.services article .inner {padding: 30px 0 0;}
	
	footer address a:after {display: none;}
	
	.social { position: relative; width: 128px; right: inherit; bottom: inherit; margin: 30px auto 0;}
	
	nav.details ul li {width: 50%;}
	
	
	.wrapBox {display: block;}
	.box { width: 100%;}
	.box:nth-child(odd) {border-right: none;}
	.box:nth-child(n+3) {border-bottom: none;}
	.box:last-child {border-bottom: 2px solid #eee;}
    
    footer {padding: 30px;}
    footer address {
        float: none;
        width: 100%;
    }
    footer address:first-child {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #eee;
    }
    footer .btn {margin-top: 30px;}
	
	.page.about .col {
		float: none;
		width: auto;
	}
		
}

@media only screen and (max-width : 560px) {
    nav.langNav ul {text-align: left;}
	h2.subtitle {padding: 0 20px 60px;}

	.partners {padding: 40px 30px;}
	
	.team li {width: 100%; float: none;}
	
	.galerie a { width: 100px; height: 100px; }
	.realisations .galerie a:before,
	.realisations .galerie a span {display: none;}
    
    .apercu_services li:last-child,
    .apercu_services li:nth-last-child(2),
    .apercu_services li {width: 100%;}
	
}

@media only screen and (max-width : 480px) {
    
    body {background-position: 50px top, center bottom;}

	body.err404,
    body.index {background-image: url(../img/bg_index_top_mobile.jpg), url(../img/bg_bottom_mobile.jpg);}
    
	body.traitement_form,
	body.contact {background-image: url(../img/bg_contact_top_mobile.jpg), url(../img/bg_bottom_mobile.jpg);}
	

	body.about {background-image: url(../img/bg_page_top01_mobile.jpg), url(../img/bg_bottom_mobile.jpg);}
	body.details {background-image: url(../img/bg_page_top02_mobile.jpg), url(../img/bg_bottom_mobile.jpg);}	
	
	h3,
	.index .box h2,
	.btn {text-align: center;}
    
    .index .box h2:after {left: 0; right: 0; margin: 0 auto;}
	
	.wrapRealisations h2 {padding: 0 20px;}
	
	.btn {width: 100%;}
	.index .box {padding-bottom: 30px;}
	.index .box .btn {
		position: relative;
		bottom: 0;
		right: 0;
	}
	
	.partners ul li {margin: 10px;}
	
	nav.details ul li {width: 100%; float: none;}	
	
	.g-recaptcha {
			-webkit-transform: scale(.82);
				-ms-transform: scale(.82);
					transform: scale(.82);
	}
	
	.message h1,
	.message h2 { padding-left: 0; padding-right: 0;}
    
    .team li a { display: block; text-align: center; padding: 15px 0; margin: 0 0 5px;}
    .team li a.mail {margin-bottom: 0;}
    
    form li .inc_form {font-size: .7em;}
	form label { font-size: .875em; padding: 22px 20px 23px;}
    
    #map {height: 300px;}
	

	
}

@media only screen and (max-width : 410px) {

		.partners ul li {width: 62px; height: 62px;}
		
		.contact article {padding: 30px 15px;}

		.g-recaptcha {
			-webkit-transform-origin: left top;
				-ms-transform-origin: left top;
					transform-origin: left top;
		}

}

@media only screen and (max-width : 399px) {

	p.adresse span { display: block; visibility: hidden; height: 0; overflow: hidden;}
	
}
/* ///////////////////////////////////////////// */
/* // RETINA //////////////////////////////////// */
/* ///////////////////////////////////////////// */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){
	       
        nav.main > ul > li > a.external:before {   background-image: url(../img/site/external_link_icon_retina.png); background-size: 18px 6px;}
		
		a.navMobile {background-image: url(../img/site/navMobile_ico_retina.gif); background-size: 16px 16px; }
		.bx-wrapper .bx-controls-direction a:before { background-image: url(../img/site/slider_arrow_retina.gif); background-size: 22px 20px;}
		.badge span { background-image: url(../img/site/badge_retina.png); background-size: 135px 82px;}
		.social li a { background-image: url(../img/site/social_retina.png); background-size: 128px 32px;}
		
		.traitement_form .message.error-send h1:before {background-image: url(../img/site/traitement_error_retina.png); background-size: 30px;}
		.traitement_form .message.error-captcha h1:before {background-image: url(../img/site/traitement_captcha_retina.png); background-size: 64px;}
		.traitement_form .message.send h1:before {background-image: url(../img/site/traitement_send_retina.png); background-size: 29px 21px;}

		.incCookies span:before,
		.incCookies span:after {background-image: url(../img/site/cookies_retina.png); background-size: 14px 28px;}
		
 }