/*--------------------------------------------------------------------------------------- */
/* David Mathieu - 29/03/16 */
/* L'Appartement */
/*
	
*/
/*--------------------------------------------------------------------------------------- */

body { background: #f0f2f6; color:#555555;}
body.acc { background: #fff;}

body.chambre { background: #000000 url(../gx/02/chambre3_320.jpg) no-repeat top center !important; background-size: cover!important;}
@media only screen and (min-width: 768px) {
	body.chambre { background: #000000 url(../gx/02/chambre3_768.jpg) no-repeat top center !important; background-size: cover!important;}
}
@media only screen and (min-width: 1000px) {
	body.chambre { background: #000000 url(../gx/02/chambre3.jpg) no-repeat top center !important;}
}

#rechercheChambre {
	background: #003551;
	background: -moz-linear-gradient(left,  #003551 0%, #00476c 100%);
	background: -webkit-linear-gradient(left,  #003551 0%,#00476c 100%);
	background: linear-gradient(to right,  #003551 0%,#00476c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003551', endColorstr='#00476c',GradientType=1 );
}

.rechercheChambreChoix p { color:#fff;}


/*--------------------------------------------------------------------------------------- */
/* Formulaires */
/*--------------------------------------------------------------------------------------- */
	label abbr, .note abbr{	color:#bf2c37;}
	.button { 
		font-family: 'Open Sans', sans-serif;
		color:#004367;
		border:3px solid #004367;
	}

	button.button:before, .button:before {
		width: 0;
		height: 100%;
		top: 50%;
		left: 50%;
		background: #003551;
	}
	button.button:hover, .button:hover,
	button.button:focus, .button:focus,
	button.button:active, .button:active { border-color:#003551; color:#fff;} 

	.button.gold {
		background:#ba2b35;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		color:#fff;
	}
	.button.gold:hover, .button.gold:focus, .button.gold:active { background: #a2262f;}

	.button.noir { background: #fff; color:#004366;}
	.button.noir:hover, .button.noir:focus, .button.noir:active { background: #004366; color:#fff;} 

	::-moz-selection { background-color: #ba2b35;}
	::selection { background-color: #ba2b35;}

	.csstransforms3d.vMenu-open #menuMobile, #menuMobile  { background: #222222;}
	#menuMobile li a { background: #222222;}
	#menuMobile li.mobile.premier a { border-top: 1px solid #444444;}

	span.customSelect:before { color:#ba2b35;}
	span.customSelectFocus { border:1px solid #ba2b35;}
	span.customSelectOpen { border:1px solid #ba2b35; width:100%!important;}


	.ui-datepicker .ui-datepicker-title { color:#ba2b35;}
	.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight, .ui-state-default.ui-state-highlight { background: #b1b1b1; color:#fff;}
	.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-active { background: #ba2b35;}

/* Textes et CMS
--------------------------------------------------------------------------------------- */
	h1, .h1 { margin-bottom:0.5em; font:700 26px/32px 'Open Sans', Arial, sans-serif; color:#004367; }
	h2, .h2 { margin:1em 0 0.5em 0; font:700 22px/26px 'Open Sans', Arial, sans-serif; color:#fff; text-transform: uppercase;}
	h3, .h3 { margin:1em 0 0.5em 0; font:20px/24px 'Open Sans', Arial, sans-serif; color:#004367;}
	h4, .h4 { margin:1em 0 0.5em 0; font:700 15px/20px 'Open Sans', Arial, sans-serif; color:#004367; text-transform: uppercase;}

	@media only screen and (min-width: 768px) {
		h1, .h1 { font-size:50px; line-height: 50px; }
		h2, .h2 { font-size:35px; line-height: 40px; }
		h3, .h3 { font-size:35px; line-height: 40px; }
	}

	#banniereInterne h1 { color:#fff;}

	a { color:#ba2b35;}
	.incTinyMce a { color:#ba2b35; }

	.incTinyMce h2, .incTinyMce .h2 { color:#004367;}

	#colPrincipale.texteGeneral h1, #colPrincipale.texteGeneral .h1 { border-bottom: 1px solid #ba2b35;}
	#colPrincipale.texteGeneral h2, #colPrincipale.texteGeneral .h2 { color:#004367; }

/* Entête
--------------------------------------------------------------------------------------- */
	#entete, #entete.scrolled, .acc #entete.scrolled {
		background: #003551;
		background: -moz-linear-gradient(left,  #003551 0%, #00476c 100%);
		background: -webkit-linear-gradient(left,  #003551 0%,#00476c 100%);
		background: linear-gradient(to right,  #003551 0%,#00476c 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003551', endColorstr='#00476c',GradientType=1 );
	}
	.acc #entete { background: transparent;}

	#logo {	width: 129px;}
	#logo img { width: 129px;}
	@media only screen and (min-width: 768px) {	
		#logo, .acc #entete.scrolled #logo, .acc #logo { top:24px;}	
		.acc #entete.scrolled #logo { top:24px; }	

		#logo, .acc #entete.scrolled #logo, .acc #logo  { width: 206px;}
		#logo img, .acc #entete.scrolled #logo img, .acc #logo img { width: 206px;}	
		#logo, .acc #entete.scrolled #logo, .acc #logo { width: 206px;}	
		#entete.scrolled #logo img, .acc #entete.scrolled #logo img { width:206px;}				
	}
	@media only screen and (min-width: 850px) {	
		#entete.scrolled #logo, .acc #entete.scrolled #logo { top:24px; left: 60px;}
		#logo, .acc #entete.scrolled #logo { top:24px;}	
		.acc #logo { left: 60px;}
		.acc #entete.scrolled #logo { top:24px; left:60px;}
	}
	@media only screen and (min-width: 1000px) {
		.acc #logo { }		
		html.drop .acc #logo { top:24px;}
	}

	@media only screen and (min-width: 1215px) {
		#entete.scrolled #logo, .acc #entete.scrolled #logo { left: 20px;}
		#logo { left:20px;}
		.acc #logo { left:20px; top:45px;}
		.acc #entete.scrolled #logo { left: 20px;}
	}

	@media only screen and (min-width: 1360px) {
		#logo { left:0;}
		.acc #entete #logo { left:0;}
		#entete.scrolled #logo, .acc #entete.scrolled #logo { left: 0px;}
		.acc #logo { left:0;}
		.acc #entete.scrolled #logo { left: 0;}
		.acc #logo img { width: 272px;}
		.acc #logo { width: 272px;}
	}

	/* banniere alerte
--------------------------------------------------------------------------------------- */
	.banniereAlerte{
	top: 0;
	background-color:#ba2b35;
	color:#fff;
    width: 100%;
    max-height:600px;
    z-index:999;
	overflow: auto;
    	
} 

@media only screen and (min-width: 1000px) {
	.banniereAlerte{
		/* height:200px;*/
	}
}

@media only screen and (min-width: 1360px) {
.banniereAlerte .divBlocContenu{

		max-width: 980px;
        width: 100%;  
        
	}
}

.banniereAlerte .divBlocContenu{
	padding-top:20px;
	padding-bottom:30px;
	padding-left: 20px;
	padding-right: 20px;
	min-height:auto;
	margin: 0 auto;
	position:relative;  
}

.banniereAlerte h4{
	font-size:28px;
	text-transform:uppercase;
	margin-bottom:15px;
	padding-bottom:9px;
    border-bottom:2px solid #fff;
	color: #fff;
	line-height: 1;
}

.banniereAlerte p{
	font-size:14px;
	line-height: 1.5;
}


.banniereAlerte .btnClose{
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
	right: 10px;
    top: 20px;
    cursor: pointer;
    -webkit-transform: rotate(0);
    transform: rotate(0)
 }

 .banniereAlerte .btnClose:before,
 .banniereAlerte .btnClose:after{
    content: ' ';
    position: absolute;
    left: 15px;
    height: 25px;
    width: 4px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
 }

 .banniereAlerte .btnClose:before{ 
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
 }

 .banniereAlerte .btnClose:after{
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
 }


/* Menu principal
--------------------------------------------------------------------------------------- */
	#menuBureau a { font: 14px/100px 'Open Sans', sans-serif;}
	#menuBureau a:hover { color:#bb2b36;}
	#menuBureau a.actif:before { background: #bb2b36;}
	#entete.scrolled #menuBureau a:hover { color:#bb2b36;}
	#entete.scrolled #menuBureau a.actif { color:#bb2b36;}

/* Menu mobile
--------------------------------------------------------------------------------------- */
	#menuMobile { background: #00476c;}
	.csstransforms3d.vMenu-open #menuMobile, #menuMobile { background: #00476c;}
	#iconeMenu > span span:before, #iconeMenu > span span:after, #iconeMenu > span span { background-color: #bb2b36; }
	#menuMobile li a {	background: #00476c;}
	#menuMobile li a:active, #menuMobile li a.actif:active{ background: #003652; color:#fff; }
	#menuMobile li a.actif  { color: #bb2b36; }
	#menuMobile li.mobile.premier a { border-top: 1px solid #008ed8;}


/* 01_100 : Accueil
--------------------------------------------------------------------------------------- */
	#banniereAccueil { background: url(../gx/01/banniereAccueil3_320.jpg) no-repeat top center; background-size: cover!important;}
	@media only screen and (min-width: 768px) {
		#banniereAccueil h1 { color: #004367;}
		#banniereAccueil h1 span { font-style: normal;color:#fff;}
		#banniereAccueil { background: url(../gx/01/banniereAccueil3_768.jpg) no-repeat top center; background-size: cover;}
	}
	@media only screen and (min-width: 1000px) {	
		#banniereAccueil { background: url(../gx/01/banniereAccueil3.jpg) no-repeat top center; background-size: cover;}
	}

	#aProposAccueil { background: #ffffff;}
	#aProposAccueil .h1.border { border-bottom: 1px solid #bf2c37;}
	#aProposAccueil .h1 { color:#004367;}
	#aProposAccueil .h1 span { color:#004367;}
	.aProposTexte { line-height: 24px; color:#666666;}
	@media only screen and (min-width: 768px) {
		#aProposAccueil { background:#fff;}
	}
	@media only screen and (min-width: 1000px) {
		#aProposAccueil { background: #fff url(../gx/01/aProposAccueil3.jpg) no-repeat top center; background-size:cover;}
	}


	#aProposHotelAccueil { background: #f5f5f5;}
	#aProposHotelAccueil .h1 { color:#004367;}
	#aProposHotelAccueil .h1.border { border-bottom: 1px solid #bf2c37;}
	#aProposHotelAccueil .h1 span { color:#004367;}
	@media only screen and (min-width: 768px) {
		#aProposHotelAccueil { background:#f5f5f5;}
	}
	@media only screen and (min-width: 1000px) {
		#aProposHotelAccueil { background: #fff url(../gx/01/aProposHotelAccueil3.jpg) no-repeat top center; background-size:cover;}
	}

	/* Forfait */
	.forfaitStrate { background: #fff;}
	.forfaitStrate:nth-child(odd) { background: #f0f2f6;}
	.forfaitStrate .h3 { color:#004367; margin: 0;}
	.forfaitStrate .forfaitIntro { text-shadow:0 1px 0px rgba(255,255,255,0.8);}
	.forfaitStrate.autreCouleur h2 { color:#fff;}
	.forfaitStrate.autreCouleur .h3 { color:#fff;}
	.forfaitStrate.autreCouleur .forfaitIntro { color:#fff; text-shadow:0 1px 0px rgba(0,0,0,0.3);}
	.forfaitStrate.autreCouleur .button {
		border:3px solid #fff;
		background: rgba(0,0,0,0.7);
		color:#fff;
	}
	.forfaitStrate.autreCouleur .button.gold { border:none; color:#fff; background: #ba2b35;}
	.forfaitStrate.autreCouleur .button:hover,
	.forfaitStrate.autreCouleur .button:focus,
	.forfaitStrate.autreCouleur .button:active { background: #fff; color:#004367;}
	.forfaitStrate.autreCouleur .button.gold:hover, .forfaitStrate.autreCouleur .button.gold:focus, .forfaitStrate.autreCouleur .button.gold:active { background: #a2262f; color:#fff;}
	.forfaitStrate.autreCouleur .button:before { background: #fff;}

/* 02_100 : Chambres
--------------------------------------------------------------------------------------- */
	.chambreCTA li a:before { background: rgba(0,31,58,0.5);}

/* 02_110 : Chambres Détail
--------------------------------------------------------------------------------------- */
	#texteChambre { background: #131313}
	#texteChambre h3 { margin-bottom: 5px;}
	#texteChambre p.h2 { border-bottom: 1px solid #bf2c37; color:#004367;}
	#texteChambre .incTinyMce { color:#555555;}

	@media only screen and (min-width: 768px) {
		#texteChambre { background: url(../gx/02/texteChambre3_768.jpg) no-repeat top center; background-size: cover;}
	}
	@media only screen and (min-width: 1000px) {
		#texteChambre {	background: url(../gx/02/texteChambre3.jpg) no-repeat top center; background-size: cover;}
	}

	#listeService {	background: url(../gx/02/listeService3.jpg) no-repeat top center; background-size: cover;}
	#listeService p.h2 { border-bottom: 1px solid #bf2c37; color:#004367;}
	#listeService ol li p { color:#555555;}

	#reserverChambre { background:#004367;}
	#reserverChambre h3 { color:#fff;}

/* 03_100 : Services
--------------------------------------------------------------------------------------- */
	#photoGallerie .slick-prev, #photoGallerie .slick-next { background: #bf2c37;}
	#photoGallerie .slick-prev:hover, #photoGallerie .slick-next:hover { background: #a2262f;}

/* 04_100 : Tarifications
--------------------------------------------------------------------------------------- */
	/* ONGLET */
	.cd-tabs-navigation li a { border-bottom: 0px; border-bottom-right-radius: 0px;	border-bottom-left-radius: 0px;}
	.cd-tabs-navigation li a.selected { 
		background: #f0f2f6; 
		border:3px solid #f0f2f6; 
		color:#004367;	
	}
	.cd-tabs-content { background: #f0f2f6;}
	#ongletMobile {	background:#f0f2f6;}


/* 04_110 : Forfait Détail
--------------------------------------------------------------------------------------- */
	/* Accordéon */
	button.accordeonTrigger { background:#f9fafb; border:1px solid #e4e7ea; border-radius: 3px; }
	button.accordeonTrigger h2 { background: #f9fafb; color:#004367;}
	button.accordeonTrigger h2:after {  background: url(../gx/m/icone-fleche-haut-bas3.png) no-repeat;}	
	.actif button.accordeonTrigger { border-color:#f9fafb;}
	.actif button.accordeonTrigger h2 { color:#bb2b36;}
	ol.accordeon > li .accordeonContenu { background: #f9fafb;}

/* 05_100 : Le Quartier
--------------------------------------------------------------------------------------- */
	#listeMap ol li { background: #fff;}
	#listeMap ol li:nth-child(even) { background: #fff; }

	@media only screen and (min-width: 768px) {
		#mapDetail { background: url(ajax-loader3.gif) no-repeat center center;}
		.googleMapInfoWindow p { color:#bf2c37;}
		.googleMapInfoWindow a.lienNom {			
			font:15px/44px 'Open Sans', sans-serif;			
			border:3px solid #fff;
			background: #bf2c37;			
		}
		.googleMapInfoWindow a.lienNom:hover, 
		.googleMapInfoWindow a.lienNom:focus, 
		.googleMapInfoWindow a.lienNom:active { background: #a2262f;} 
	}


/* 09_100 : Nous joindre
--------------------------------------------------------------------------------------- */
	#contactInfos { text-align: left;}
	#contactForm { width: 100%; margin:0 auto;}
	.titreContact { margin:50px 0;}
	#contactInfos address .h4 { margin:0;}
	#contactInfos address p { margin-bottom: 30px; line-height: 24px;}	
	#contactInfos address p.nomAdresse { margin-top: 43px; margin-bottom:0;}
	#contactInfos address a:hover { text-decoration: underline;}
	#contactInfos address p.noTel a { display: inline-block; color:#555555;}
	#contactInfos address p.noTel a:hover { text-decoration: none;}


/*--------------------------------------------------------------------------------------- */
/* Pied de page */
/*--------------------------------------------------------------------------------------- */
	.copyrights a:hover { color: #bf2c37;}

	@media only screen and (min-width: 768px) {	
		#menuPied a.actif { color:#bf2c37;}	
		#menuPied a:hover { color:#bf2c37;}
	}

	.fancybox-skin { background: #f0f2f6;}
	.fancybox-title-float-wrap { background: #f0f2f6;}
	.fancybox-title-float-wrap .child {	color: #555555; text-shadow:none; font-weight: 700;}
	.fancybox-title-float-wrap .child .count { background: url(../js/fancybox/fancybox_count3.png) no-repeat left top;}
	.fancybox-title-outside-wrap { color: #555555;}
	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { border-radius: 100%;}
	.fancybox-close { -webkit-transition: background 0.15s linear 0s; -moz-transition: background 0.15s linear 0s; transition: background 0.15s linear 0s; background-color: #ba2b35; }
	.fancybox-close:hover { background-color: #a2262f; }

	li .conteneur h2.onglet{color: #004367;font-size:18px;margin-top:0px;}

	.codeEtablissement{
		color:#fff;
		margin: 0;
	}