/* ----------------------------------------------------------------
	Custom CSS
-----------------------------------------------------------------*/
@import url("colors-custom.css");
@import url("dark-custom.css");
@import url("fonts-custom.css");

body { color: #5693bb; font-size: 16px;} 

#wrapper { border-top: 10px solid #5693bb;}
	  
/*-------------TITRE-------------*/
h1,.h1 {color: #5693bb; font-size: 34px; font-weight: 400}
h1 span { line-height: 0; font-size: 0; width: 0; display: inline-block}
h2,.h2 {color: #5693bb; font-family: 'Dancing Script', cursive !important; font-size: 30px }

/*-------------FOND et COULEUR-------------*/
.bg-bleu {background-color: #5693bb !important}
#content, .bg-texture { background-image: url("../images/bg-site.png"); background-repeat: repeat; background-color: transparent}
#content .section { background-color: transparent}
#content .section.alternate { background-color: #dfeffa }
.bg-overlay-bg { background-color: rgba(86, 147, 187, 0.5) !important;}


/*-------------DIVERS-------------*/
.button { text-transform: none}
.button { background-color: #5693bb ; text-shadow: none; font-weight: 400}
.button:hover { background-color: #dfeffa !important;color: #5693bb}

.vertical-bottom { z-index: 3; position: relative; display: -ms-flexbox; display: flex; width: 100%; min-height: 100%; justify-content: end; flex-flow: column;}


/*-------------HEADER-------------*/
#primary-menu-trigger {width: 50px !important; height: 50px !important; line-height: 50px !important;border-radius: 5px;}
#primary-menu-trigger .svg-trigger { width: 50px; height: 50px; border-radius: 5px}
#primary-menu-trigger .svg-trigger path {stroke: #5693bb;}
body:not(.primary-menu-open) #primary-menu-trigger:hover .svg-trigger {background-color: #5693bb}
#primary-menu-trigger:hover .svg-trigger path {stroke: #fff;}

.primary-menu-open #primary-menu-trigger { background-color:#5693bb}
.primary-menu-open #primary-menu-trigger .svg-trigger path {stroke: #fff;}

.menu-item .menu-link { font-weight: 600;}
body:not(#accueil) .menu-item .menu-link { color:#5693bb}
#header.sticky-header .menu-item .menu-link { color:#5693bb !important}
.menu-item.current .menu-link { font-weight: 700;}


#top-bar .top-links { list-style: none; margin-bottom: 0; text-align: right; border-bottom: none}
#top-bar .top-links .top-links-item { display: inline-block; border: none}
#top-bar .top-links .top-links-item a { padding: 8px; line-height: 14px; background-color:#dfeffa; color: #5693bb; font-weight: 700; letter-spacing: 1px}
#top-bar .top-links .top-links-item a:hover {background-color: #5693bb; color: #fff;}
#top-bar .top-links .top-links-item.galerie-images a { padding-left: 15px; padding-right: 15px; font-weight: 400}
#top-bar .top-links .top-links-item.galerie-images a:hover {}

/*-------------CONTENT-------------*/
#content p { line-height: 28px;margin-bottom: 20px;}

/*Accueil*/
#slider #titre h1 { margin-bottom: 0; font-size: 40px; line-height: 40px;}
#slider #titre h1 span { line-height: 0; font-size: 0; width: 0; display: block}
#slider #titre p {}

/*Grille accueil + chambres*/
.grille-4 .portfolio-item .portfolio-image { border-radius: 4px}
.grille-4 .portfolio-item h3 { position: absolute; display: block; top: 0; left: 0; width: 100%; text-align: center; }
.grille-4 .portfolio-item h3 span { color: #fff; background: #5693bb; font-weight: 400; display: inline-block;min-width:260px; font-family: 'Dancing Script', cursive !important; }

/*Diaporama*/
.flex-control-nav li a { border-radius: 0;}
.flex-prev, .flex-next { background-color: rgba(86, 147, 187, 0.5);}
.flex-prev:hover, .flex-next:hover { background-color: rgba(86, 147, 187, 0.8) !important;}

/*Détail des chambres*/
#chambre .mfp-bg {background-image: url("../images/bg-site.png"); background-repeat: repeat; background-color: transparent;opacity: 1;}
#detail-chambre.content-ajax-modal { width: 100% !important; border: none}
#detail-chambre.content-ajax-modal .modal-padding { background-color: transparent !important; max-width: 1400px; margin: auto}
#detail-chambre .ajax-modal-title { background-color: transparent !important; text-align: center}
#detail-chambre .ajax-modal-title h2 { font-size: 34px; color: #5693bb}
#detail-chambre h2 span { display: block; font-family: 'Source Serif Pro', serif !important; font-size: 18px;color: #65b2e4}
#detail-chambre p {}
#detail-chambre ul.caracteristique { list-style: square; padding-left: 15px;}
#detail-chambre ul.caracteristique li {color: #65b2e4}
#detail-chambre .images-chambre {}

/*Galerie + chambres*/
.galerie a i, .portfolio-item a i {opacity: 0;	position: absolute;	display: block;	top: 50%;left: 50%;	color: rgba(255, 255, 255, 0.7);z-index: 99;background-color: rgba(86,147,187, 0.5);padding: 5px;font-size: 14px;width: 40px;height: 40px;margin-top: -20px;margin-left: -20px;line-height: 30px;text-align: center;border-radius: 50%;-webkit-transform: scale(0.8); -o-transform: scale(0.8);transform: scale(0.8);-webkit-transition: transform .4s ease; -o-transition: transform .4s ease; transition: transform .4s ease;-webkit-backface-visibility: hidden;}
.galerie a:hover i, .portfolio-item a:hover i{ opacity: 1; -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1);background-color: rgba(86,147,187, 0.8);}

/*Visage*/
img.visage { border-radius: 50%; border: 5px solid #dfeffa; max-width: 300px; box-shadow: 0px 5px 5px rgba(0,0,0,0.2); margin-bottom: 30px}

/*Les services*/
.service {border: 1px solid #dfeffa; background-color: rgba(255,255,255,0.5); border-radius: 2px; padding: 20px 15px; width: 100%;}
.alternate .service { border-color: #fff; background-color: rgba(255,255,255,0.6);}
.service h3 {color: #5693bb; font-weight: 400}
.service p { font-size: 15px; line-height: 20px !important}
.service span.prix { display: block; font-weight: 700; margin-top: 15px}

/*Réserver*/
.lien-email-contact, .lien-tel-contact  { display: inline-block; border-bottom: 1px dashed;}
.lien-email-contact:hover, .lien-tel-contact:hover {border-bottom: 1px solid; color: #5693bb !important}

.module-resa { margin: auto }
#ConstellationWidget { background-color: #dfeffa}
#ConstellationWidgetLinks { display: none}

/*Animations*/
.animated { -webkit-animation-duration: 2s; animation-duration: 2s;}

/*Carte*/
#carte { z-index: 10;}

.leaflet-popup-content-wrapper { border-radius: 7px; background-color: #fff}
.leaflet-popup-content { margin: 13px 30px;}
.leaflet-popup-content h4 { margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; color: #333}
.leaflet-popup-content img { margin-bottom: 10px; width: 260px; height: auto; max-width: none}
.leaflet-popup-content p { margin: 0 0 10px 0 !important; font-size: 14px !important; line-height: 18px !important}
.leaflet-popup-content a.btn { padding: 0 20px; background-color: #5693bb; color: #fff; border: none; border-radius: 5px; font-size: 13px; letter-spacing: 0.5px; padding: 5px 15px;}
.leaflet-popup-content a.btn:hover { background-color: #dfeffa; color: #5693bb;}

.leaflet-touch .leaflet-bar { border: 2px solid #fff;}
.leaflet-bar a { background-color: #5693bb; border-bottom: 1px solid #fff; color: #fff}
.leaflet-bar a:hover { background-color: #dfeffa; color: #5693bb}
.leaflet-touch .leaflet-control-attribution { display: none}


/*pop/up*/
button.mfp-close { background-color: #5693bb !important; border: 2px solid #fff;right: 0; top: 0; opacity: 1}
button.mfp-close:hover { opacity: 0.8}
  
.mfp-bg { background-color: #5693bb}
.mfp-bg.mfp-ready {opacity: 0.2;}
.mfp-bottom-bar { display: none}
.mfp-arrow-left::before { border-right: 27px solid #4a5a78;}
.mfp-arrow-right::before { border-left: 27px solid #4a5a78;}
.mfp-arrow::before { opacity: 1;}


.content-ajax-modal { position: relative; width:  1000px !important; margin: 0 auto; border: 10px solid #fff;}
.content-ajax-modal .modal-padding { background-color: #fff; border-bottom-left-radius: 0; border-bottom-right-radius: 0  }

.ajax-modal-title {padding: 5px 20px;background-color: #5693bb !important; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom: none;}
.ajax-modal-title h2 {font-size: 20px; font-weight: normal; letter-spacing: 2px; color: #fff; text-transform: none}

.content-ajax-modal p { color: #5693bb !important}
.content-ajax-modal a { color: #5693bb !important; border-bottom: 1px dashed}
.content-ajax-modal a:hover { border-bottom: 1px solid}


/*Pop/up sur accueil*/
#evenement > div { background-image: url("../images/bg-site.png"); background-repeat: repeat; background-color: transparent}
#evenement > div h3 { color: #a0b8d0 !important;}
#evenement > div p { color: #a0b8d0}
#evenement .section { background-color: #dfeffa}



/*-------------FOOTER-------------*/
#gotoTop {}
#copyrights {color: #fff !important; font-size: 14px; background-color: transparent !important}


#footer .lien-email, #footer .lien-tel { color: #fff; border-bottom: 1px dashed;display: inline-block;}
#footer .lien-email:hover, #footer .lien-tel:hover  {border-bottom: 1px solid; color: #fff}

.copyright-links { font-size: 13px;color: #ddd !important;}
.copyright-links a { border-bottom: none !important;color: #ddd !important;}
.copyright-links a:hover {color: #fff !important;}




/* ----------------------------------------------------------------
	Contenu Responsive 
-----------------------------------------------------------------*/
@media (min-width: 1600px) {
	/*HEADER*/
	.menu-link { padding-left: 15px; padding-right: 15px; font-size: 13px;letter-spacing: 2px;}
	/*CONTENT*/
	/*FOOTER*/
}


@media (min-width: 1400px) and (max-width: 1599.98px) {
	/*HEADER*/
	.menu-link { padding-left: 12px; padding-right: 12px; font-size: 13px;letter-spacing: 1px;}
	/*CONTENT*/
	/*FOOTER*/
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	/*HEADER*/
	.menu-link { padding-left: 10px; padding-right: 10px; font-size: 11px;letter-spacing: 1px;}
	/*CONTENT*/
	/*FOOTER*/
}

@media (min-width: 1200px) {
	/*HEADER*/
	/*CONTENT*/	
	/*FOOTER*/
}

@media (max-width: 1199.98px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	/*HEADER*/
	#header.sticky-header #logo { display: none}
	#logo { margin: auto}
	#header:not(.sticky-header) .menu-link { padding-top: 10px !important; padding-bottom: 10px !important}
	/*CONTENT*/
	.content-ajax-modal {width:  800px !important;}
	/*FOOTER*/
}

@media (min-width: 992px) {
	/*HEADER*/
	body:not(#accueil) .header-wrap-clone {height: 110px !important;}
	body#accueil .header-wrap-clone { height: 100px !important;}
	.stretched #header.full-header #header-wrap > .container { padding: 0 20px;}
	
	body:not(#accueil) #header + .include-header.include-topbar {margin-top: -145px !important;}
	body#accueil  #header + .include-header.include-topbar {margin-top: -135px !important;}
	#top-bar.transparent-topbar { background: transparent;z-index: 399;}
	#accueil #top-bar .top-links .top-links-item a { background-color:rgba(0,0,0,0.4); color: #fff;}
	#accueil #top-bar .top-links .top-links-item a:hover { background-color: #5693bb; color: #fff; }
	
	#accueil #wrapper { border-top:none}
	
	.menu-item.reserver .menu-link div { padding: 5px 15px; background-color: #5693bb; color: #fff}
	.menu-item.reserver .menu-link:hover div { background-color: #dfeffa !important;color: #5693bb}
	.menu-item.current:not(.reserver) .menu-link > div {border-bottom: 1px dashed;}

	/*CONTENT*/
	#carte { height: 600px}
	
	.bloc-texte { max-width: 450px; margin-left: auto; margin-right: auto; text-align: justify}
	/*FOOTER*/
}

@media (max-width: 991.98px) {
	/*HEADER*/
	 .menu-item .menu-link { color:#5693bb}
	/*CONTENT*/
	#carte { height: 450px}
	
	.vertical-bottom {position: absolute;}
	
	/*FOOTER*/
}

@media (min-width: 768px) and (max-width: 991.98px) {
	/*HEADER*/
	/*CONTENT*/
	.content-ajax-modal {width:  600px !important;}
	/*FOOTER*/
}
@media (min-width: 768px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}
@media (max-width: 767.98px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (min-width: 576px) and (max-width: 767.98px) {
	/*HEADER*/
	/*CONTENT*/
	.content-ajax-modal {width:  500px !important;}
	/*FOOTER*/
}

@media (min-width: 576px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (max-width: 575.98px) {
	/*HEADER*/
	/*CONTENT*/
	.content-ajax-modal {width:  430px !important;}
	.modal-padding { padding: 10px;}
	/*FOOTER*/
}