/*
Theme Name: Skol White
Theme URI: http://skol-hotel.com
Author: SPIRINOVUM | THIRRIARD Paul
Author URI: http://www.spirinovum.com
Description: Thème crée pour l'hôtel | restaurant Skol
Version: 1.0
*/

@font-face{ font-family: PetitaLight; font-weight: normal; src: url('fonts/PetitaLight.ttf'); }
body{ font-family: 'PetitaLight', Arial, Verdana, sans-serif; width: 100%; height: 100%; font-size: 12px; margin: 0; padding: 0; color: #000; /*background: #f3f4f1;*/ background: url('img/femme2.jpg') center no-repeat fixed; background-size: cover; }
ul, ol, dl, h1, h2, h3, h4, h5 { padding: 0; margin: 0; font-weight: normal; }
ul, li { list-style: none; }
a{ text-decoration: none; cursor: pointer; }
p{ margin: 0; line-height: 18px; font-family: Arial; color: #818181;}
header, section, footer, aside, nav, article, figure{ display: block; margin: 0;}
/* Clearfix */
.clear:before, .clear:after{content: '.';display: block;overflow: hidden;visibility: hidden;font-size: 0;line-height: 0;width: 0;height: 0;}
.clear:after{clear: both;}
.pink{ color: #db2d77; }
input, select, button{ outline: none; }

/* Annonce */
#annonce{ height: 120px; padding-bottom: 20px; position: absolute; top: 0px; right: 0px; left: 0px; z-index: 500; font-size: 14px; text-align: center; color: #fff; background: rgba(0,0,0,0.5); }
#annonce h3{ font-size: 18px; line-height: 50px; }
#annonce p{ color: #fff; }
#annonce a{ color: #db2d77; }
#annonce a:hover{ color: #fff; }

#confirm{ display: none; width: 100%; height: 100%; position: fixed; z-index: 500; background: rgba(0,0,0,0.5); }
#confirm .confirm{ width: 400px; height: 200px; margin-top: -150px; margin-left: -200px; position: absolute; top: 50%; left: 50%; background: #fff;
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.7);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.7);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.7);}

#btnScroll{ display: none; width: 50px; height: 50px; position: fixed; bottom: 20px; right: 6%; z-index: 50; background-color: #db2d77; background-image: url('img/scrollTop_white.png'); background-position: center; background-repeat: no-repeat; }
#btnScroll:hover{ background-color: #000; }
#wrapper{ width: 100%; height: 100%; }
#wrapper .borderTop{ position: fixed; display: block; top: 0px; left: 0px; height: 2px; width: 100%; z-index: 60; background-color: #db2d77; }
#wrapper a.reservation, #wrapper p a.reservation{ font-family: 'PetitaLight'; display: block; width: 80px; margin: 0 auto; padding: 5px 8px; font-size: 18px; text-transform: uppercase; color: #fff; background-color: #db2d77; text-align: center; }
#wrapper a:hover.reservation, #wrapper p a:hover.reservation{ background-color: #000; }

/* FRONTPAGE SLIDER */
#slider{ width: 100%; height: 100%; overflow: hidden; position: relative; }
#slider .caroufredsel_wrapper{ width: 100% !important; height: 100% !important; }
#slide{ width: 100% !important; height: 100% !important; }
#slide .slide{ width: 100% !important; height: 100% !important; }
#pattern-slider{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; background: url('img/pattern.png') top left repeat; }
#paginSlider{ position: absolute; right: 50px; bottom: 25px; z-index: 300; }
#paginSlider a{ float: left; display: block; margin-left: 2.5px; width: 12px; height: 12px; text-indent: 9999px; border-radius: 6px; background-color: #fff; }
#paginSlider a.selected{ background-color: #db2d77 }

/* SIDEBAR */
#sidebar{ position: fixed; z-index: 50; top: 0px; left: 0px; width: 255px; height: 100%; background-color: #fff;
-moz-box-shadow: -2px -2px 10px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: -2px -2px 10px 0px rgba(0,0,0,0.5);
box-shadow: -2px -2px 10px 0px rgba(0,0,0,0.5);}
#logo h1{ display: block; margin: 15px auto 15px; width: 200px; height: 73px; text-indent: -99999px; background-image: url('img/logo.png'); background-position: 0px 0px; background-repeat: no-repeat; }
#menu{ text-align: center; font-size: 20px; text-transform: uppercase; }
#menu li a, #menu li.current_page_item ul.sub-menu a, #menu li.current-menu-parent ul.sub-menu a{ line-height: 32px; color: #000; }
#menu li a:hover,
#menu li.current_page_item ul.sub-menu a:hover,
#menu li.current-menu-parent ul.sub-menu a:hover,
#menu li.current-menu-parent ul.sub-menu li.current_page_item  a,
#menu li.current-menu-parent a, #menu li.current_page_item a{ color: #db2d77; }

#menu li .sub-menu{ display: none; padding-top: 5px; padding-bottom: 5px;}
#menu li .sub-menu li a{ font-size: 16px; line-height: 25px; }
/*#menu li:hover .submenu{ display: block; }*/
/* Infos bottom */
#openInfo{ width: 100%; position: absolute; bottom: 3%; left: 0px; text-align: center; text-transform: uppercase; line-height: 20px; background: #fff; }
#openInfo h3{ font-size: 16px; }
#openInfo p{ font-size: 11px; color: #818181; }
#openInfo p.adress{ font-size: 11px;  }
#openInfo ul.nav{ margin-top: 30px; }
#openInfo ul.nav li{ display: inline-block; font-size: 16px; }
#openInfo ul.nav li a{ color: #000; }
#openInfo ul.nav li a:hover{ color: #db2d77; }
#openInfo ul.sociaux{ text-align: center; margin-top: 5px; }
#openInfo ul.sociaux li{ display: inline-block; }
#openInfo ul.sociaux a.fb{ display: block; width: 17px; height: 16px; text-indent: -9999px; background-image: url('img/fb.png'); background-position: center; background-repeat: no-repeat; }
/* CONTENT */
#wrap{ margin-left: 255px; position: relative; overflow: hidden; }
#content .topImg{ height: 30%; overflow: hidden; }
#content .topImg img{ width: 100%; height: auto; }
#content .content{ margin: 0 15%; padding-bottom: 20px; text-align: center; background: #fff;
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);min-height: 100%;}
#content .content header.title{ margin-bottom: 40px; }
#content .content h2, #content .content h3{ text-transform: uppercase; }
#content .content h2{ margin: 40px 0; font-size: 28px; text-align: center; color: #db2d77; }
#content .content h3{ text-align: center; font-size: 20px; color: #db2d77; }
#content .content .title ul{ display: block; margin-bottom: 20px; padding: 0 20px; font-size: 18px; text-transform: uppercase; text-align: center; }
#content .content .title ul li{ display: inline-block; border-right: 1px solid #a7a7a7; }
#content .content .title ul li:last-child{ border-right: none; }
#content .content .title ul li a{ display: inline-block; padding: 0 7px 0 3px; color: #000; }
#content .content .title ul li a:hover{ color: #db2d77; }
#content .content article{ padding: 0 30px 30px 30px; }
#content .content article .table{ margin-bottom: 20px; }
#content .content article table{ width: 100%; margin: 0 auto; padding: 0px; font-size: 14px; font-family: 'Arial'; color: #818181; }
#content .content article table thead tr td{ padding-bottom: 10px; font-family: 'PetitaLight'; text-transform: uppercase; font-size: 16px; }
#content .content article table thead tr td:first-child{ font-size: 18px; color: #db2d77; }
#content .content article table tr td:first-child{ padding-right: 30px; }
#content .content article table tr td:nth-child(2){ width: 11%; text-align: right; }
#content .content article table tr td:last-child{ width: 11%; text-align: right; }
#content .content article table tbody tr{ line-height: 21px; padding-bottom: 15px; }
#content .content article table tbody tr td{ padding-bottom: 5px; }
#content .content article table tbody tr td span.sugg{ display: block; text-align: left; font-weight: bold; }
/* INDEX */
#content .index{ margin: 0; background: #000; padding: 0; position: relative; }
/* Page restaurant Menu */
#content div.restaurant, #content div.hotel{ margin: 0; padding: 30px 0 0 0; background-color: #fff; }
#content div.restaurant article, #content div.hotel article{ padding: 0px; }
/* Page Hotel */
#content div.hotel .title h3{ font-size: 25px; margin-bottom: 10px; }
#content div.hotel ul{ display: block; text-align: center; }
#content div.hotel ul li{ margin-bottom: 10px; border-right: none !important; display: block !important; }
#content div.hotel ul li h4{ font-size: 20px; }
#content div.hotel ul li h4 span{ margin-left: 15px; }
#content .imgResto img{ width: 100%; height: auto; }
/* Carte du soir */
#content .carteSoir{ margin: 0 15%; padding-bottom: 20px; text-align: center; background: #fff;
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);}
#content .carteSoir .title h2{ margin-bottom: 20px; }
/* SALADES */
#salades table tbody tr td span{ text-transform: uppercase; font-weight: bold; }
/* LUNCH MIDI */
#content .lunchMidi{ margin: 0 15%; padding-bottom: 30px; background: #fff;
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);}
#content .lunchMidi h2{ margin: 0px; padding-top: 20px; color: #db2d77; /*color: #fff;*/ }
#content .lunchMidi h3{ text-align: center; color: #db2d77; font-size: 20px; }
#content .lunchMidi section.lunch article{ padding-right: 20%; padding-left: 20%; margin-bottom: 20px; text-align: center;}
#content .lunchMidi section.lunch article h3{ line-height: 50px; }
#content .lunchMidi section.lunch article p{ color: #818181; font-size: 14px; line-height: 21px; }
#content .lunchMidi section.lunch article span.price{ display: block; font-style: italic; }
/* COMPTOIR */
#content .comptoir{ margin: 0 15%; padding-bottom: 20px; text-align: center; background: #fff;
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);}
/* LE SKOL */
#content .skol h4{ margin-bottom: 10px; margin-top: 20px; color: #db2d77; text-transform: uppercase; font-size: 16px; text-align: left; }
#content .skol p{ text-align: justify; font-size: 14px; line-height: 21px; margin-bottom: 10px; }
/* RESERVATION */
#flashEmail{ cursor: default; font-size: 18px; line-height: 30px; color: #fff; background-color: #db2d77; }
#content .reserv article{text-align: left; }
#content .reserv article h3{ margin-bottom: 20px; }
#content .reserv article form{ padding: 0 20%; margin: 0; }
#content .reserv article p{ margin-bottom: 5px; display: block; }
#content .reserv label{ display: inline-block; width: auto; float: left; line-height: 24px; text-transform: uppercase; text-align: left; color: #818181; }
#content .reserv label span{ color: #db2d77; }
#content .reserv label.nbpers{ width: auto; }
#content .reserv label.rooms{ width: auto; }
#content .reserv input{ width: 150px; float: right; line-height: 22px; padding-left: 5px; color: #818181; border: 1px solid #c1c1c1; }
#content .reserv input:focus, #content .reserv input:hover,#content .reserv select:focus, #content .reserv select:hover{ border-color: #db2d77; }
#content .reserv .times{ text-align: center; margin: 25px 0; }
#content .reserv .times h4{ font-size: 12px; }
#content .reserv .times p{ font-size: 10px; }
/* date */
#content .reserv .date label{ font-family: 'Arial'; text-transform: none; float: none; margin-right: 10px; }
#content .reserv .date input{ width: 110px; float: none; }
#content .reserv select{ width: 120px; float: right; height: 25px; }
#content .reserv input.error{ color: #ed1c24; border-color: #ed1c24; }
#content .reserv select.error{border-color: #ed1c24; }
button.reservation{ margin-top: 20px; margin-left: 39%; padding: 5px 10px; cursor: pointer; font-family: 'PetitaLight'; font-size: 16px; color: #fff; text-transform: uppercase; border: none; background-color: #db2d77; }
button:hover.reservation{ background-color: #000; }
#reservHotel{ margin-bottom: 25px; border-bottom: 1px solid #dadada; }
#content .reserv span.error{ font-family: 'Arial'; color: #ed1c24; display: none; text-align: right; }
#reservResto label.date{ display: inline-block; width: 163px !important; text-transform: uppercase !important; }
#reservResto input.date{ width: 165px !important; }
#reservResto .hours h4{ margin-bottom: 8px; font-size: 18px; text-transform: uppercase; color: #db2d77; }
#reservResto .hours select, #reservResto .hours label{ float: none !important; }
#reservResto .hours select{ margin-left: 5px; width: 80px; }
#reservResto .times{ margin-bottom: 0 !important; }
/* PAGE ACTUALITES */
#content section.actu .news{ height: 278px; padding: 0px; margin: 0 30px 30px 30px; overflow: hidden; position: relative;
-webkit-transition: 300ms all ease-in;
-moz-transition: 300ms all ease-in;
-ms-transition: 300ms all ease-in;
transition: 300ms all ease-in;}
#content section.actu .news h3{ width: 100%; position: absolute; padding-left: 10px; bottom: 0px; left: 0px; z-index: 50; text-align: left; line-height: 35px; color: #000; border-bottom: 1px solid #db2d77; background: #fff; }
#content section.actu .news h3 a{ float: right; font-family: 'Arial'; font-size: 12px; text-transform: none; font-style: italic; line-height: 35px; color: #db2d77; }
#content section.actu .news h3 a.pdf{ margin-right: 10px; padding-right: 35px; background: url('img/pdfl.png') center right no-repeat; }
#content section.actu .news .date{ display: block; width: 55px; height: 56px; padding-top: 10px; position: absolute; top: 0px; left: 0px; z-index: 50; color: #fff; background: #db2d77; }
#content section.actu .news .date span{ display: block; text-align: center; }
#content section.actu .news .date .day{ font-size: 35px; font-weight: bold; line-height: 30px; }
#content section.actu .news .date .month{ font-size: 18px; line-height: 16px; text-transform: uppercase; }
#content section.actu .news .contentNews{ width: 100%; height: 241px; position: relative; overflow: hidden; background: url('img/bg-news.jpg') center no-repeat; background-size: cover; }
#content section.actu .news div.text{ position: absolute; width: 100%; height: 211px; padding-top: 30px; bottom: -350px; left: 0px; z-index: 1; color: #fff; background: rgba(0,0,0,0.7);
overflow-y: auto;
-webkit-transition: 400ms all ease-in;
-moz-transition: 400ms all ease-in;
-ms-transition: 400ms all ease-in;
transition: 400ms all ease-in;}
#content section.actu .news div.text h1,
#content section.actu .news div.text h2,
#content section.actu .news div.text h3,
#content section.actu .news div.text h4,
#content section.actu .news div.text p{ padding: 0px; margin: 0px; position: relative; color: #fff; text-align: center; border: none; background: none;  }
#content section.actu .news .contentNews:hover div.text{ bottom: 0px; }

#content .lunch p, #content .lunch h4 {padding: 0px 20px 0px 20px;}

#tarifs {border-collapse: collapse;margin: 20px 30px;width:calc(100% - 60px);}
#tarifs td {padding: 5px 10px;border: 1px solid #000;}
#tarifs .mid {text-align: center;}
#tarifs .right {text-align: right;}
#tarifs .colored {background: rgba(219, 45, 119, 0.15)}
#tarifs .noBorder {border: none;}

#gallery {width: 100%;height: auto;overflow: hidden;margin-top: -100px;}
#gallery img {width: 100%;height: auto;}

@media screen and (max-height: 635px){
    /*#logo h1{ margin: 8% auto 10% auto; }
    #openInfo{ position: relative; bottom: auto; }*/
    #openInfo .open{ display: none; }
}
@media screen and (max-height: 555px){
    #sidebar{ overflow-y: auto; }
    /*#logo h1{ margin: 8% auto 10% auto; }*/
    #openInfo{ position: relative; bottom: auto; }
}

@media screen and (max-width: 1175px){
    /* PAGE RESERVATION */
    #content .reserv input{ width: 100%; }
    #content .reserv label.nbpers{ width: 50%; float: left; line-height: 24px; }
    #content .reserv label.rooms{ width: 50%; float: left; line-height: 24px; }
    #content .reserv select{ width: 48%; float: right; }
    #content .reserv .date{ display: block; }
    #content .reserv .date_one{ float: none; }
    #content .reserv .date_two{ float: none; }
    #content .reserv .date label{ display: block; margin-right: 0px; }
    #content .reserv .date input{ width: 100%; }
    #content .reserv label.rooms, #content .reserv label.nbpers{ display: block; width: 100%; }
    #content .reserv select.rooms, #content .reserv select.nbpers{ width: 100%; float: none; }
    #reservResto input.date { width: 100% !important;}
    #reservResto select { width: 100% !important; float: none !important; }