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

/* ////////////////////////////////////////////////////////// */
/* // ┌──────────────────────────────────────────────────┐ // */
/* // │ Disable hover states                             │ // */
/* // └──────────────────────────────────────────────────┘ // */
/* ////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////// */

	.call_to_action h2 a:after,
	.infos address a:before,
	nav > ul > li.hasSub > a:before,
	nav > ul > li.hasSub > a:after,
	.social li a:before,
	nav.main > ul > li > a:after,
	nav.main > ul > li.hasSub > a:hover:after,
	.btn:before,
	.galerie a:before {display: none;}
	
	.btn:hover,
	.CorgiJS a.pager:not(.disabled):hover {color: #fff; background: #004996;}
	
	footer .btn:hover { background: #009ee3;}
	.infos address a:hover,
	.galerie a:hover{ box-shadow: none;}

    main a:hover {color: #666;}
	.infos address a:hover {color: #fff;}
	
	.review_inner a.little:hover {text-decoration: none;}
	
	.galerie a:hover {
		-webkit-transform: none;
			-ms-transform: none;
				transform: none;
	}
	
	.btn_avis:hover {
		box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .1);
		-webkit-transform: none;
			-ms-transform: none;
				transform: none;
	}
	
	.infos .btn_avis:hover {
		-webkit-transform: translate(-50%, 50%);
			-ms-transform: translate(-50%, 50%);
				transform: translate(-50%, 50%);
	}
	
	nav.pagination a.nbr:hover {box-shadow: inset 0 0 0 2px #ECEFF1;}
	
	.btn.submit:hover { color: #fff; background: #009ee3;}

/* ┌──────────────────────────────────────────────────┐ */
/* │ Navigation - main                                │ */
/* └──────────────────────────────────────────────────┘ */
	
	a.navMobile {display: block;}
	nav {z-index: 9999; position: relative;}		
	
	nav .f-level {
		position: absolute;
		right: 0;
		width: 300px;
		display: none;
		border-radius: 3px 0 3px 3px;
		overflow: hidden;
	}
	
	nav.active .f-level,
	nav.active .subnav {display: block;}
	
    nav.main > ul {background-color: #009ee3	;}
	nav.main > ul > li, .subnav {display: block; text-align: left;}
	nav.main > ul > li:last-child {border-bottom: 0;}
	nav.main > ul > li > a, .subnav li a {padding: 17px 20px; display: block; border-radius: 0;}
	
	nav.main > ul > li > a:after,
	nav.main > ul > li.hasSub > a:before {display: none;}	
	
    nav.main > ul > li > a,
	nav.main > ul > li > a:hover,
	nav.main > ul > li:hover > a,
	.subnav li a:hover,
	.subnav li.active a {color: #fff;} 
    
    nav.main > ul > li.active > a:hover,
	nav.main > ul > li.active > a {color: #009ee3; background: #fff;}
	
	nav > ul > li.contact.active > a, nav > ul > li.contact > a { border: none; box-shadow: none;}
	
	nav.main svg.icon {
		position: absolute;
		right: 20px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	nav > ul > li > a .icon, nav > ul > li > a:hover .icon { fill: #004996;}
		
	.subnav {
        background: #18212A;
		position: relative;
		display: block;
		left: 0;
		top: 0;
		opacity: 1;
		visibility: visible;
		width: inherit;
		margin: 0;
		border-radius: 0;
		padding: 10px 0 0;
		-webkit-transition: none;
				transition: none;
	}
    
    .subnav,
    .hasSub:hover .subnav {
        -webkit-transform: none;
			-ms-transform: none;
				transform: none;
    }

	.subnav:before {
		top: -1px;
		left: 30px;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-width: 10px;
		margin-left: -10px;
		border-color: rgba(244, 212, 173, 0);
        border-top-color: #24313E;
	}
	
    nav > ul > li.active .subnav:before {border-top-color: #FFDEB5;}
    
    .subnav li a,
    .subnav li a:hover {color: #CFD8DC;}
    
    .subnav li.active a:hover,
    .subnav li.active a {color: #24313E; background: #F4D4AD;}
    
/* ┌──────────────────────────────────────────────────┐ */
/* │ Navigation - Lang                                │ */
/* └──────────────────────────────────────────────────┘ */
	
	nav.lang > ul > li:not(.active) > a:hover {opacity: .5;}
	
/* ┌──────────────────────────────────────────────────┐ */
/* │ Common                                           │ */
/* └──────────────────────────────────────────────────┘ */
    .promotions .illu span,
    div.tarifs .illu span {font-size: 1.75em;}
    .promotions .illu del {font-size: 1em;}
	
	.illu:hover .prix,
	.illu:hover:after {opacity: 1;}
	.illu:hover del {opacity: .5;}

/* ┌──────────────────────────────────────────────────┐ */
/* │ Page - About                                     │ */
/* └──────────────────────────────────────────────────┘ */
	.team .leftCol a span {display: none;}
	
/* ┌──────────────────────────────────────────────────┐ */
/* │ Badge                                            │ */
/* └──────────────────────────────────────────────────┘ */
	.badge:after {display: none;}
    .badge:hover:before,
    .badge:before {
        opacity: 1;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
	
}

@media only screen and (max-width : 1000px) {
	
	.index .about {display: block;}
	.index .about img:first-child {display: none;}
	.index .about .wrap_img {
		width: 100%;
		max-width: 200px;
		margin: 40px auto 0;
	}
	
	.index .about .inner,
	.index .service .inner {width: auto;}
	
	.tarif {width: 50%;}

}

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

	.team .leftCol a,
	.team .leftCol a.mail { float: none; top: 0; margin: 5px auto 0;}
		
	form {width: 45%;}
}

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

	form,
	.page.contact .infos {width: 100%;}
	
	.page.contact .infos {margin: 10% 0 0; padding: 15% 20px;}  
	
	form h2 {text-align: center;}
	
	.page.contact .infos,
	.page.contact .infos > * {
		-webkit-transform: skewY(0);
    		-ms-transform: skewY(0);
    			transform: skewY(0);
	}
}

@media only screen and (max-width : 768px) {
    .index .service {
        background-image: url(../img/index/service_bg_tablet.jpg);
        background-size: contain;
        background-position: left top; 
		text-align: center;
    }
	
	.index .service p {
		margin: 0 0 60px;
	}
	
/*	.index .service {padding-top: 30%;}*/
/*
	.index .service .bg {
		width: 100%;
		background-image: url(../img/index/service_bg_tablet.jpg);
	}
*/
	
	.social span { display: block; position: absolute; text-indent: -9999px;}
	.social svg {margin: 0;}
	
	.review_wrap {padding: 0;}
	.review_inner {width: 100%; padding: 15px;}
	.avis .head {margin-bottom: 70px;}
	#google-reviews .slide {padding: 78px 30px 30px;}
	
	.index .partners ul li {width: 20%;}
	
	.blog article .inner,
	.services article .inner {width: auto;}
	
    .services article h2,
    .details article h2,
    .blog article header {text-align: center;}
    
    span.date:before {margin: 0 auto 10px;}
		
	article .slider,
	.blog article img,
	.details article img {margin: 0 auto 10%; float: none;}
    
	.promo,
    .tarif { width: 100%; margin: 0;}
    
    .team li { width: 100%; margin: 30px 0 0;}
	.team .leftCol a,
	.team .leftCol a.mail {float: left; top: -30px; margin: 0;}
	.team .leftCol a.mail { float: right;}
	
	footer .infos,
    footer #map { max-width: inherit; width: 100%; flex: auto;}
    
    footer .infos {padding: 40px 20px;}
    footer #map {height: 50vh;}
	
	.galerie a,
	.gal_rea a { width: 33%;}
}

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

	header h1 {font-size: 1.7em;}
    header p.resume,
    form .field { font-size: 1em;} 
    h2 {font-size: 1.5em;}
    h3 {font-size: 1.35em;}
	
	.credits {text-align: center;}
	.credits > div {display: block;}
	.credits .inner p:last-child {margin: 20px 0 0;}
	
    .badge { margin: 40px auto 0;}
    
}

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

	h2 .return {display: none;}

	.index .service .btn { display: block; text-align: center; width: 100%;}

	.team .leftCol a,
	.team .leftCol a.mail { float: none; top: 0; margin: 5px auto 0;}

	.galerie a { width: 50%;}

}

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

	header.main {background-image: url(../img/head_index_bg_mobile.jpg);}
    
    .illu {max-width: 200px;}
    .promotions .illu span,
    div.tarifs .illu span {font-size: 1.5em;}
    .promotions .illu del {font-size: .875em;}

}

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

	nav .f-level {width: 280px;}
	
	.g-recaptcha {
		-webkit-transform-origin: left top;
			-ms-transform-origin: left top;
				transform-origin: left top;
		-webkit-transform: scale(.9);
			-ms-transform: scale(.9);
				transform: scale(.9);
	}
	
}