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


/*-------------STRUCTURE-------------*/

body {font-size: 13px; color: #030101; background-color: #718f82}
h1, h2, h3, h4, h5, h6 { color: #000}

.vert { color: #718f82 !important}

.page-transition-wrap { background-color:#718f82 }

/*-------------HEADER-------------*/

/*Navigation*/
#header.sticky-header #header-wrap { border: none !important}



/*-------------CONTENT-------------*/
#content{ background-color:#718f82 }

/*Accueil*/
.slider-caption { top: auto !important;bottom: 150px; position: absolute !important;}
.slider-caption h2 {
    font-size: 40px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 30px;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.40) !important;
}
.slider-caption p { font-weight: bold; text-transform: uppercase; color: #c9d8d1; text-shadow: none !important}


/*Section*/

.content-section { max-width: 600px; margin: auto; padding: 0 20px 0 40px;}
.bg-content {background-repeat: no-repeat; background-position: center center; background-size: contain}

#restaurant .bg-content { background-color:#f7e9da; background-image: url("../images/section-restaurant/bg-section.png")}
#menu .bg-content { background-color:#e1e9e6; background-image: url("../images/section-menu/bg-section.png")}
#cave .bg-content { background-color:#f7e9da; background-image: url("../images/section-cave/bg-section.png")}
#reserver .bg-content { background-color:#e1e9e6; background-image: url("../images/section-reserver/bg-section.png")}

#restaurant .adresse, #reserver .adresse { padding-left: 50px; background: url("../images/adresse.png") no-repeat top left}
#restaurant .adresse p, #reserver .adresse p {line-height: 16px !important; margin-bottom: 20px}

#menu h4 {line-height: 20px;font-size: 16px;}
#menu .menu { width: 300px}
#menu .menu h3 { text-transform: uppercase;font-size: 18px; margin-bottom: 10px; color:#718f82; padding-left: 15px; border-bottom: 1px solid #718f82}
#menu .menu p {width: 300px;position: relative; margin: 0 auto 30px auto;font-weight: bold;line-height: 18px;}
#menu .message {color: #555; text-align: center}

#reserver .divider, #menu .divider {color:#718f82;}
#reserver .divider::before, #reserver .divider::after,
#menu .divider::before, #menu .divider::after{ border-color: #c9d8d1;}

/*Slider flex*/
.flex-control-nav { right: auto; top: auto; left: 0; bottom: 20px; width: 100%; text-align: center}
.flex-control-nav li { float: none; display: inline-block}
.flex-control-nav li a { border-radius: 0}

/*Titre*/
.heading-block h2 { font-weight: 700;  color: #718f82; font-size: 40px !important; letter-spacing: 2px;}

/*Boutons*/
.button.button-border {border: 1px solid #718f82; color:#718f82; font-weight: 700; background-color: transparent !important}
.button.button-border:hover {background-color: #718f82 !important; color: #fff !important;}

.button { background-color: #718f82 !important}
.button:hover { background-color: #000 !important}

.button.button-small { padding: 0 15px; font-size: 10px; height: 20px; line-height: 20px;}

/*Formulaire*/
label {
    text-transform: none;
    margin-bottom: 0;
}
.sm-form-control { border-width: 1px; padding: 3px 10px}
.form-widget .col_one_third { margin-bottom: 10px !important}
.form-widget .rgpd {
    font-size: 8px;
    color: #999;
    line-height: 9px !important;
    letter-spacing: 0px;
    margin-top: 10px;
    margin-bottom: 5px;
    max-width: none;
	text-align: justify
}
.form-widget .rgpd a {color: #ccc;}
.form-widget .mention { font-size: 11px;color: #333;margin-bottom: 10px;}

.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] { background-color: #718f82; background-image: none; border-radius: 0;}



/*Transitions*/
.duree-2 {
	-webkit-animation-duration: 2s !important;
    animation-duration: 2s !important;
	}
.duree-2-5 {
	-webkit-animation-duration: 2.5s !important;
    animation-duration: 2.5s !important;
	}
.duree-3 {
	-webkit-animation-duration: 3s !important;
    animation-duration: 3s !important;
	}

/*pop/up*/
.mfp-fade.mfp-bg.mfp-ready {opacity: 0.8;}
.mfp-arrow { background-color: #000 !important}
.mfp-arrow-left::before, .mfp-arrow-right::before { content: normal}
.mfp-bottom-bar { display: none}
.mfp-close { background-color: #718f82 !important}

.mention-ajax-modal { position: relative; width:  1000px !important; margin: 0 auto;}
.mention-ajax-modal .modal-padding {background-color: #fff;}


.ajax-modal-title {padding: 5px 20px;;background-color: #718f82 !important;}
.ajax-modal-title h2 {font-size: 20px; font-weight: normal; letter-spacing: 2px; color: #fff;}

.mention-ajax-modal p { color: #000 !important}
.mention-ajax-modal a { color: #718f82 !important}
.mention-ajax-modal a:hover { border-bottom: 1px dotted}


/*-------------FOOTER-------------*/
#footer { background-color: #fff; position: fixed; bottom: 0; z-index: 500; width: 100%; text-align: center}
#copyrights { padding: 0; background-color: #fff}
#copyrights, #copyrights a { font-size: 11px; color: #999}
#copyrights a:hover { border-bottom: 1px dotted}



/* ----------------------------------------------------------------
	Contenu Responsive 
-----------------------------------------------------------------*/
@media (min-width: 1600px) {
	/*HEADER*/
	#header:not(.sticky-header) #logo {height: 270px;}
	#header:not(.sticky-header) #logo img {height: 270px;}
	#header:not(.sticky-header) #logo {margin-left: 30px}
	/*CONTENT*/
	.box-framed .frame-top, .box-framed .frame-bottom {height: 30px;}
	.box-framed .frame-left, .box-framed .frame-right {width: 40px;}
	.box-framed #wrapper { bottom: 30px; }
	.box-framed #header #header-wrap, .box-framed #header.sticky-header #header-wrap, .box-framed #side-panel .side-panel-wrap { top: 30px; }
	body.box-framed.side-panel-open #side-panel { right: 40px; }
	body.box-framed.side-panel-open .body-overlay { left: 40px; }
	body.stretched.box-framed #header.full-header .container { padding-right: 40px}
	.box-framed .one-page-arrow { bottom: 85px; }
	#content { padding: 0 40px}
	.stretched #gotoTop { bottom: 30px;right: 40px;}	
	
	.slider-arrow-left {left: 40px;top: auto;bottom: 60px;margin: 0;}
	.slider-arrow-right {right: 40px;top: auto;bottom: 60px;margin: 0;}
	/*FOOTER*/
}


@media (min-width: 1200px) and (max-width: 1599.98px) {
	
	/*HEADER*/
	#header:not(.sticky-header) #logo {height: 240px;}
	#header:not(.sticky-header) #logo img {height: 240px;}
	#header:not(.sticky-header) #logo {margin-left: 15px}
	/*CONTENT*/
	.box-framed .frame-top, .box-framed .frame-bottom {height: 30px;}
	.box-framed .frame-left, .box-framed .frame-right {width: 30px;}
	.box-framed #wrapper { bottom: 30px; }
	.box-framed #header #header-wrap, .box-framed #header.sticky-header #header-wrap, .box-framed #side-panel .side-panel-wrap { top: 30px; }
	body.box-framed.side-panel-open #side-panel { right: 30px; }
	body.box-framed.side-panel-open .body-overlay { left: 30px; }
	body.stretched.box-framed #header.full-header .container { padding-right: 30px}
	.box-framed .one-page-arrow { bottom: 75px; }
	#content { padding: 0 30px}
	.stretched #gotoTop { bottom: 30px;right: 30px;}
	
	.slider-arrow-left {left: 30px;top: auto;bottom: 60px;margin: 0;}
	.slider-arrow-right {right: 30px;top: auto;bottom: 60px;margin: 0;}	
	
	/*FOOTER*/
}
@media (max-width: 1599.98px) {
	h1, h2, h3, h4, h5, h6 { margin-bottom: 20px}
	.heading-block h2 { font-size: 30px !important; line-height: 30px}
	h4 { font-size: 16px; line-height: 20px }
	body p {font-size: 13px !important;line-height: 18px !important;margin-bottom: 15px;}
	#menu .menu p { margin-bottom: 20px; font-size: 12px !important; line-height: 16px !important}
	
	#reserver .divider { display: none}
}
	

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

@media (max-width: 1199.98px) {
	/*HEADER*/
	/*CONTENT*/
	#menu h4 {line-height: 18px;font-size: 14px; margin-bottom: 10px;}
	#menu .menu p {margin-bottom: 10px; font-size: 12px !important; line-height: 14px !important;}
	.form-widget .col_full { margin-bottom: 0}
	.form-widget .col_one_third { margin-bottom: 0 !important;}
	.sm-form-control {padding: 0 10px;}
	#restaurant .adresse p, #reserver .adresse p {line-height: 14px !important; margin-bottom: 10px;}
	
	/*FOOTER*/
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	/*HEADER*/
	#header:not(.sticky-header) #logo {height: 200px;}
	#header:not(.sticky-header) #logo img {height: 200px;}
	#header:not(.sticky-header) #logo {margin-left: 0}
	/*CONTENT*/
	.box-framed .frame-top, .box-framed .frame-bottom {height: 30px;}
	.box-framed .frame-left, .box-framed .frame-right {width: 20px;}
	body.stretched.box-framed #header.full-header .container { padding-right: 20px}
	.box-framed #wrapper { bottom: 20px; }
	.box-framed #header #header-wrap, .box-framed #header.sticky-header #header-wrap, .box-framed #side-panel .side-panel-wrap { top: 30px; }
	body.box-framed.side-panel-open #side-panel { right: 20px; }
	body.box-framed.side-panel-open .body-overlay { left: 20px; }
	.box-framed .one-page-arrow { bottom: 65px; }
	#content { padding: 0 20px}
	
	.slider-arrow-left {left: 20px;top: auto;bottom: 50px;margin: 0;}
	.slider-arrow-right {right: 20px;top: auto;bottom: 50px;margin: 0;}
	
	.mention-ajax-modal {width:  800px !important;}
	/*FOOTER*/
}

@media (min-width: 992px) {
	/*HEADER*/
	#primary-menu { background-color: #000}
	#primary-menu ul li a { padding-top: 15px; padding-bottom: 15px; border-bottom: 2px solid #000}
	#primary-menu ul li a:hover { border-bottom: 2px dotted}
	#primary-menu ul li.reserver a { padding-top: 10px; padding-bottom: 10px}
	#primary-menu ul li.reserver a:hover { border-bottom: 2px solid #000}
	#primary-menu ul li.reserver a:hover div { border: 1px solid #222; background-color: #333}
	#primary-menu ul li.lang a { padding: 10px 10px 10px 0; }
	#primary-menu ul li.lang a:hover { border-bottom: 2px solid #000}
	#primary-menu ul li.lang a:hover div { background-color: #555} 
	#primary-menu ul li.reserver div { padding: 4px 15px; border: 1px solid #999 }
	#primary-menu ul li.lang div { padding: 4px 4px; border: 1px solid #222 ;background-color: #333}
	#primary-menu ul li.facebook a, #primary-menu ul li.instagram a  { padding: 10px 5px;}
	#primary-menu ul li.facebook a:hover, #primary-menu ul li.instagram a:hover { border-bottom: 2px solid #000} 
	#primary-menu ul li.facebook div, #primary-menu ul li.instagram div { display: none}
	
	#header.sticky-header #logo { margin-top: 15px}
	#header:not(.sticky-header) #logo {position: absolute;margin-top: 30px;}
	
	/*CONTENT*/	
	.box-framed .frame-top,	.box-framed .frame-bottom, .box-framed .frame-left,	.box-framed .frame-right {position: fixed;top: 0;left: 0;background: #FFF;z-index: 400;}
	.box-framed .dark.frame-top, .box-framed .dark.frame-bottom, .box-framed .dark.frame-left, .box-framed .dark.frame-right { background: #000;}
	.box-framed .frame-left, .box-framed .frame-right {bottom: 0;}
	.box-framed .frame-right {left: auto;right: 0;}
	.box-framed .frame-top, .box-framed .frame-bottom {	right: 0;}
	.box-framed .frame-bottom {	top:  auto;	bottom: 0;}
	body.stretched.box-framed #header.full-header .container {padding-left: 50px;}

	
	
	/*FOOTER*/
}

@media (max-width: 991.98px) {
	/*HEADER*/	
	#header-wrap { background-color: #000 !important}
	#primary-menu { background-color:rgba(0,0,0,0.8)}
	#primary-menu ul li a:hover {color:#718f82 !important}
	#primary-menu ul li.lang > a span {display: inline;}
	#primary-menu ul li.facebook img, #primary-menu ul li.instagram img {margin-right: 10px}
	#primary-menu ul li.facebook div, #primary-menu ul li.instagram div { display: inline-block} 
	
	/*CONTENT*/
	#content .full-screen,
	#content .row.full-screen,
	#content .content-page.full-screen { height: auto !important}
	
	#content .content-page .vertical-middle { position: relative !important; top: 0 !important; margin-top: 0 !important; padding: 40px 0 !important;}
	
	.mention-ajax-modal {width:  90% !important;}
	
	/*FOOTER*/
	#footer { position: absolute}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	/*HEADER*/
	#header, #header-wrap, #logo { height: 100px !important}
	#logo img { height: 90px !important; margin-top: 5px;}
	#primary-menu-trigger {top: 25px !important;}
	/*CONTENT*/
	#content .slider-page.full-screen, #content .slider-page.full-screen .flexslider, #content .slider-page.full-screen .slide { height: 600px !important}
	/*FOOTER*/
}

@media (max-width: 767.98px) {
	/*HEADER*/	
	/*CONTENT*/
	.heading-block h2 { font-size: 30px !important;}
	/*FOOTER*/	
}

@media (min-width: 576px) and (max-width: 767.98px) {
	/*HEADER*/
	#header, #header-wrap, #logo  { height: 80px !important}
	#logo img { height: 70px !important; margin-top: 5px;}
	#primary-menu-trigger {top: 15px !important;}
	/*CONTENT*/
	.swiper_wrapper:not(.force-full-screen), .swiper_wrapper:not(.force-full-screen):not(.canvas-slider-grid) .swiper-slide {height: 450px !important;}
	.slider-caption { bottom: 70px}
	
	#content .slider-page.full-screen, #content .slider-page.full-screen .flexslider, #content .slider-page.full-screen .slide { height: 400px !important}
	/*FOOTER*/
}
@media (min-width: 576px) {
	#primary-menu > ul { padding: 0 20px !important}
}

@media (max-width: 575.98px) {
	/*HEADER*/
	#logo img { height: 60px !important; margin-top: 5px;}
	/*CONTENT*/
	.swiper_wrapper:not(.force-full-screen), .swiper_wrapper:not(.force-full-screen):not(.canvas-slider-grid) .swiper-slide {height: 300px !important;}
	.slider-caption { bottom: 40px}
	.slider-caption h2 {font-size: 24px !important;letter-spacing: 2px;}
	
	#content .slider-page.full-screen, #content .slider-page.full-screen .flexslider, #content .slider-page.full-screen .slide { height: 300px !important}
	/*FOOTER*/	
}