@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                             │ // */
/* // └──────────────────────────────────────────────────┘ // */
/* ////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////// */

	footer h2 a:before,
	nav.main > ul > li > a:before,
	nav.main .subnav li a:before,
	.btn:before,
    .carousel li a:after,
    .call_to_btn:before,
    .call_to_btn:after,
	nav.main > ul > li.hasSub > a:after,
	.social li a:before {display: none;}
	
	nav.lang > ul > li:not(.active) > a:hover {opacity: .5;}
	
	footer h2 a:hover {padding: 0;}
	
	.call_to_btn:hover {color: #fff;}
	
	.carousel li:hover:after {
		opacity: 1;
		-webkit-transform: none;
			-ms-transform: none;
				transform: none;
	}
    
	.btn:hover {padding: 10px 0;}
	
	.btn_avis:hover {
		box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .1);
		-webkit-transform: none;
			-ms-transform: none;
				transform: none;
	}
	
	.CorgiJS a.pager:not(.disabled):hover {color: #fff; background: #578aa5;}
	
	.galerie:hover a,
    .pagination a:not(.active):hover {box-shadow: none; opacity: 1;}
    
    .submit {background: #fff; box-shadow: inset 0 0 0 5px #083870;}
    
	p a,
	p a:hover,   	
	.mainList li a,
	.mainList li a:hover { color: #578aa5;}

	.review_inner a.little:hover {text-decoration: none;}
	
	.services article.box .CorgiJS nav {opacity: 1;}
    

/* ┌──────────────────────────────────────────────────┐ */
/* │ Navigation - main                                │ */
/* └──────────────────────────────────────────────────┘ */

	a.navMobile {display: block;}
	
	nav.main {position: relative; flex: none;}
	nav.main > ul {
		position: absolute;
		right: 0;
		overflow: hidden;
		top: 45px;
		display: none;
		z-index: 100;
        background: #fff;
        box-shadow: 0 10px 30px 0 rgba(0,0,0,.25);
	}
	
	nav.main.active > ul,
	nav.main.active > ul .subnav { display: block;}
	nav.main > ul > li {display: block;}
    
	nav.main > ul > li > a,
	nav.main > ul > li.hasSub > a,
	nav.main .subnav li a,
	nav.main .subnav li a:hover {
        color: #566577;
        font-size: .8em;
        letter-spacing: 0;
        display: block;
        text-shadow: none;
        padding: 15px 30px;
        font-weight: 800;
    }
    
    nav.main > ul > li.active > a {
        color: #1B9CFC;
        background-color: #fff;
    }
	
	nav.main > ul > li.hasSub:hover .subnav,
	nav.main .subnav {
		position: relative;
		opacity: 1;
		top: 0;
		left: 0;
		z-index: 10;
		border-radius: 0;
		visibility: visible;
        background: #ECEFF1;
		-webkit-transform: translateX(0) scaleX(1);
			-ms-transform: translateX(0) scaleX(1);
				transform: translateX(0) scaleX(1);
	}
    
	nav.main .subnav:after {
		bottom: 100%;
		left: 80%;
		border: solid transparent;
		content: "";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(219, 190, 155, 0);
		border-width: 7px;
        border-bottom-color: #ECEFF1;
		margin-left: -7px;
	}
    
    nav.main .subnav li a {background: none;}
    nav.main .subnav li.active a { color: #454851;}
    
	nav.main .subnav li a,
	nav.main .subnav li a:hover {padding: 15px 25px;}


/* ┌──────────────────────────────────────────────────┐ */
/* │ 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) {
    
    .page.contact .horaires tr {width: 100%; margin: 1% 0;}
    .carousel .inner {width: auto;}
    
    .tarifs article.box,
    .tarifs article.box:nth-child(4n+1),
    .tarifs article.box:nth-child(4n+4) {width: 50%;}
	
	footer .right_col {width: 50%;}
}

@media only screen and (max-width : 860px) {
	
	article.box,
    .page.contact .col { width: 100%;}
    
    article.box,
    article.box:nth-child(4n+1),
    article.box:nth-child(4n+4) { background: #fff;}
    article.box:nth-child(even) {background: #ECEFF1;}
    
    .tarifs article.box,
    .tarifs article.box:nth-child(4n+1),
    .tarifs article.box:nth-child(4n+4) {width: 50%;}
    
    .page.contact .horaires tr {width: 48%; margin: 1%;}
}

@media only screen and (max-width : 768px) {
    
    .index header {background-image: url(../img/header_index_bg_tablet.jpg);}
.promos header,
.contact header,
.traitement_form header,
.details header,
.page header {background-image: url(../img/header_page_bg01_tablet.jpg);}

	h1,
	header p.resume {width: 90%; margin-top: 60px;}
	
	.index .about,
	header .call_to_action {display: block;}
	
	header .call_to_action li,
	header .call_to_action li.tel {
		width: 100%;
		padding: 15px 0;
		text-align: center;
	}
	
	.index .about .inner,
	.index .about img {padding: 0; width: 100%;}
	.index .about img {margin: 0 0 40px;}
	
	.review_wrap {padding: 0;}
	.review_inner {width: 100%; padding: 15px;}
	.avis .head {margin-bottom: 70px;}
	#google-reviews .slide {padding: 78px 30px 30px;}
	
	footer > .inner {
		padding: 10% 7.5%;
		display: block;
		text-align: center;
	}

	address,
	footer .right_col { width: 100%; text-align: center;}
	
	footer .right_col { margin: 10% 0 0;}
	footer .social.mini {justify-content: center;}

	.credits { display: block; text-align: center;}
	.badge {margin: 40px auto 0;}

}

@media only screen and (max-width : 640px) {
	.galerie a { width: 33.3333%;}	
}

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

	.index header {background-image: url(../img/header_index_bg_mobile.jpg);}
	.page header,
	.promos header,
	.contact header,
	.traitement_form header,
	.details header {background-image: url(../img/header_page_bg01_mobile.jpg);}
    
    h1 {font-size: 1.6em;}  
    h2 {font-size: 1.5em;}
    h3 {font-size: 1.25em;}

	.navCarousel li a {width: 24px; height: 24px;}

    .tarifs .flex {display: block;}	
    .tarifs article.box,
    .tarifs article.box:nth-child(4n+1),
    .tarifs article.box:nth-child(4n+4) {width: 100%;}
	
	.call_to_wrap h2 {padding: 40px 5%;}
	
	form .wrap_input label {font-size: .8em;}
    
    .page.contact .horaires tr {width: 100%; margin: 1% 0;}
}


@media only screen and (max-width : 380px) {
	
	.g-recaptcha {
		-webkit-transform: scale(.85);
			-ms-transform: scale(.85);
				transform: scale(.85);
		-webkit-transform-origin: left center;
			-ms-transform-origin: left center;
				transform-origin: left center;
	}
		
}