/*********** général **********/
body {
	font-family: 'open sans', sans-serif;
	font-weight: 400;
	font-size: 16px;	
	font-size: 15px;
	color: #717f86;
	line-height: 1.52;	
	overflow-x: hidden; 
}

#main {
    transition: margin-left .5s;
    padding: 20px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*********** typographie **********/
ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*********** Section banner **********/
#banner {
    background: url(../img/banner.jpg) no-repeat center top;
    background-size: cover;
	background-attachment: fixed;
    min-height: 630px;
}

.bg-color {
    background-color: rgba(0, 0, 0, 0.50);
    min-height: 630px;
}

.logo-name {
    font-family: 'satisfy', sans-serif;
    font-size: 65px;
	color: #ffb03b;
    margin-top: 140px;    
}

#banner h2 {
    font-family: 'satisfy', sans-serif;
    font-size: 45px;
    color: #ffb03b;
}

#banner p {
    font-family: 'pt sans', sans-serif;
    font-size: 34px;
	color: #fcfcfc;     
}

/*********** Section navigation **********/
.sidenav {
	position: fixed;	
	background-color: #111;
	width: 0;
    height: 100%;
	transition: 0.5s;	
    top: 0;
    right: 0;
	padding-top: 60px;
	overflow-x: hidden;
    z-index: 1;    
}

.sidenav a {
	display: block;
	font-size: 25px;
	text-decoration: none;
	color: #818181;
	transition: 0.3s;
	padding: 8px 8px 8px 32px;   
}

.sidenav a:hover, .offcanvas a:focus {
    color: #f1f1f1;
}

.closebtn {
	position: absolute;
	font-size: 36px !important;
	top: 0;
	right: 25px;    
	margin-left: 50px;
}

.menu-icon {
	font-size: 30px;
	color: #fff;	
	margin-top: 30px;
	cursor: pointer;
} 

/*********** Section a propos **********/
#about img {
    border: 5px solid #000; /*rgb(255, 176, 59)*/
    border-radius: 4px;
}

.section-padding {
    padding: 60px 0px;
}

.marb-35 {
    margin-bottom: 35px;
}

.header-h {
	font-size: 46px;
	font-family: 'satisfy', sans-serif;
	font-weight: 300;	
	color: #ffb03b;    
}

.header-p {
	font-size: 16px;
	color: #9699a6;   
}

.heading {
	font-size: 24px;
	font-family: 'satisfy', sans-serif;
	color: #ffb03b;   
}

.details-list {
    margin-top: 20px;
}

.details-list ul li {   
   margin-left: -20px;     
}

.details-list ul li i {
   color: #ffb03b;
   margin-right: 10px;     
}

/*********** Section c quoi **********/
#event {
    background: url('../img/res02.jpg') no-repeat;
    background-size: cover;
	background-attachment: fixed;	
}

.content-holder h2 {
    font-size: 24px;
	font-family: 'satisfy', sans-serif;
	color: #ffb03b;  
    padding-bottom: 15px;  
}

.content-holder p {
	font-size: 16px;
	font-weight: 300;
	color: #fff;      
}

.p {
	font-size: 18px;
	font-weight: 300;
	color: #fff;      
}

.details-text {
	background-color: rgba(14, 4, 4, 0.70);
	border-top: 2px solid #a87f41;
	border-right: 2px solid #a87f41;
	border-bottom: 2px solid #a87f41;
	border-left: 2px solid #a87f41;
	padding: 20px 20px 30px 30px;	
	overflow: auto;
}

.details-text-list ul li i {
   color: #ffb03b;
   margin-right: 10px;     
}

.details-text-list ul li {
	font-weight: 300;
	color: #fff;      
}

.margin {
margin-top: 50px;
}

/*********** Section menu **********/
#Container .mix {
    display: none;
}

.gallery-trigger ul li {
	display: inline-block;
	text-transform: capitalize;
	letter-spacing: 1px;
	color: #fff;
	margin-bottom: 40px;
}

.gallery-trigger ul li a {	
	border: 1px solid #bbb;
	border-radius: 0px;
	font-size: 14px;
	color: #565656;
	text-decoration: none;
	cursor: pointer;
	padding: 5px 10px;   	
}

.gallery-trigger ul li ul  {
	display: none; 
	padding-right:  10px;    	
}

.gallery-trigger ul li:hover ul {
	display: block;	
}

.gallery-trigger li ul {
	position: absolute;
	margin: 8px 0 0 -40px;
 }

.gallery-trigger ul li a.active, .gallery-trigger ul li a:hover {
	background: #ffb03b;
	border: 1px solid #ffb03b;
	color: #fff;   
}

.menu-restaurant {
	position: relative;
	float: left;
	width: 50%;	
	padding: 15px;   
}

.menu-restaurant .menu-title {
	float: left;
    font-family: 'montserrat', arial;
	font-size: 12px;
    color: #ffb03b;
	text-transform: uppercase;
    letter-spacing: 1px;   
}

.menu-restaurant .menu-line {
    position: absolute;
    bottom: 6px;
    border-bottom: 1px dotted rgba(0,0,0,.3);
	margin-left: 40px;  
    margin-right: .6rem;
}

.menu-restaurant .menu-linesm {
    position: absolute;
    bottom: 6px;
    border-bottom: 1px dotted rgba(0,0,0,.3);
	margin-left: 80px;  
    margin-right: .6rem;
}

.menu-restaurant .menu-price {
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 0;
}

.menu-restaurant .menu-subtitle {
    display: block;
    float: left;   
    font-family: 'montserrat', satisfy, arial;
    font-size: 12px;
	color: #b1b1b1;
}

.menu-restaurant span.clearfix {
    position: relative;
    display: block;
}

/*********** Section du bouton modal  **********/
.btn-read-more {	
	background: #ffb03b;
	border-radius: 3px;
	font-family: 'roboto', sans-serif;
	font-size: 12px;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	color: #000;
	line-height: 17px;   
	letter-spacing: 1px;	
	margin-top: 10px; 
	padding: 7px 19px;
}

.btn-read-more:hover {
	background: #ffd089;
	border-color: #ffd089;
    color: #000;
}

.btn-read-more-margin {
     margin-top: 40px;
}

/*********** Section plus option **********/
#choice {
    background: url('../img/res04.jpg') no-repeat;
    background-size: cover;
	background-attachment: fixed;		
}

.section-padding-choice {	
    padding: 60px 60px;
	margin-bottom: 35px;
}

.marb-35 {
    margin-bottom: 35px;
}

.header-choice-h {
	font-size: 46px;
	font-family: 'satisfy', sans-serif;
	font-weight: 300;	
	color: #fff;    
}

.header-choice-p {
	font-size: 18px;
	font-weight: 500;
	color: #fff;   
}

.heading-choice {
	font-size: 24px;
	font-family: 'satisfy', sans-serif;
	color: #fff;   
}

.details-choice-list {
	margin-top: 20px;
}

.details-choice-list ul li { 
	color: #fff;
	list-style-type: square;  
	margin-left: -20px;     
}

.details-choice-list ul li i {
	color: #ffb03b ;
	margin-right: 10px;   
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}


/*********** Section du formulaire de contact **********/
.form-control, .form-group .form-control {
	float: none;
	border: 0;
	border-radius: 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#009688), to(#009688)), -webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(#d2d2d2));
		background-image: -webkit-linear-gradient(#009688, #009688), -webkit-linear-gradient(#d2d2d2, #d2d2d2);
			background-image: -o-linear-gradient(#009688, #009688), -o-linear-gradient(#d2d2d2, #d2d2d2);
	background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
	-webkit-background-size: 0 2px, 100% 1px;
	background-size: 0 2px, 100% 1px;
	background-repeat: no-repeat;
	background-position: center bottom, center -webkit-calc(100% - 1px);
	background-position: center bottom, center calc(100% - 1px);
	background-color: rgba(0, 0, 0, 0);
	-webkit-transition: background 0s ease-out;
	-o-transition: background 0s ease-out;
	transition: background 0s ease-out;
	-webkit-box-shadow: none;
	box-shadow: none;	
}

.contact-form .form-control {
	font-size: 16px;
	font-weight: normal;	
	color: #000 !important;   
	height: 38px;
	line-height: 1.42857;
	padding: 7px 0;
}

.contact-form {
    margin: 8px 0 9px !important;
    padding-bottom: 10px;
}

.contact-form textarea.form-control {
    color: #000 !important;
    height: auto;
}

.contacts-btn {
	background-color: #ffb03b !important;
	width: 170px;
	height: 54px;
	border: 0px;
	border-radius: 3px;
	font-size: 16px;
	font-family: 'roboto', sans-serif;
	font-weight: normal;
	text-transform: capitalize;	    
	text-align: center !important;	    
	color: #000 !important;
}

.validation {
	display: none;
	font-size: 13px;
	font-weight: 400;
	color: #841025;    
	margin: 0 0 20px;    
}

.contact-icon {
    color: #fff;
    position: absolute;
    left: 34px;
    font-size: 32px;
    margin-top: 18px;
}

.msg-row {
    margin-top: 55px;
}

.media-body, .media-left, .media-right {
	display: table-cell;
	vertical-align: top;
}

.media-body {
	margin-left: 10px;
    padding-left: 13px;
}

.media-2 {
    margin-top: 30px;
}

.bg-1 {
    background-color: #fecc17; /* fecc17 */
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.bg-13 {
	background-color: #f04e4e;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.bg-14 {
    background-color: #869405;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.dark-blue {
	font-size: 24px;
	color: #31364c;   
    margin-top: 0;
}

.light-blue {
	font-size: 16px;
	color: #9699a6;
	margin-bottom: 1px;
}

.newinput .form-group {
    margin: 8px 0 9px !important;
    padding-bottom: 10px;
}

.phone-in-talk, .hour-icon {
	font-size: 30px;
	color: rgb(255, 255, 255);
	line-height: 70px;   
}

.text-danger {
	color: #841025;
	font-weight: 600;
}

/*********** Section du footer **********/
#contact{
    background-color: #fff;/*rgba(221, 221, 221, 0.33)*/
	margin-top: -20px;
}

.footer {
    width: 100%;
    background-color: #222;
    position: relative;
    z-index: 1;
}

.footer a {
    color: #fff;
}

.footer .footer-top {
    padding-top: 9rem;
    padding-bottom: 5rem;
}

.footer .widget-title, .footer .widget-title a {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    color: #999;
}

.footer .widget-title {	
	font-family: 'satisfy', sans-serif;
	font-size: 44px;
	color: #ffb03b;
	padding-bottom: 20px;
}

.footer .widget, .footer address {
    font-style: normal;
	text-transform: none;
	color: #999;    
    padding-bottom: 15px;
}

.footer address {
   font-size: 18px;
}

.footer .navigation, .footer .social-list {
    float: none;
    margin-bottom: 20px;
}

.footer .social-list a {
	font-size: 32px;
	font-weight: normal;
	text-transform: uppercase;
	color: #fff;
	margin: 0 5px;
}

.list-horizontal li {
    display: inline-block;
}

/* scroll To Top */
html {
  scroll-behavior: smooth;
}

#scrollToTopButton {
  display: block;
  position: fixed;
  background-color: #CC5500;
  border: none;
  border-radius: 4px;
  width: 50px;
  height: 50px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;  
  bottom: 20px;
  right: 30px; 
  outline: none; 
  padding: 8px;
  z-index: 99;
}

#scrollToTopButton i {
  color: #fff;
}

#scrollToTopButton:hover, #scrollToTopButton:focus, #scrollToTopButton:focus-within {
  cursor: pointer;
  background-color: #000;
}

/********** @media 768, 980 **********/
@media (min-width: 768px) and (max-width: 980px) {   
	.menu-restaurant .menu-title {	
		font-size: 12px !important;     
	}
	
   .content-holder h2 {
        font-size: 23px;
    }
    .details-text p {
        line-height: 16.6px;
    }
}

/********** @media 451, 767 **********/
@media (min-width: 451px) and (max-width: 767px) {<    
	.menu-restaurant .menu-title {	
		font-size: 12px !important;     
	}
		
	.details-text {
        border:0px;
        border-bottom: 2px solid #a87f41;
    }
}

/********** @media 20, 450 **********/
@media (min-width: 20px) and (max-width: 450px) {
    .menu-restaurant {
		width: 100%;
    }
	
	.menu-restaurant .menu-title {	
		font-size: 12px !important;     
	}
	
    .details-text {
        border:0px;
        border-bottom: 2px solid #a87f41;
    }
    .header-h {
        font-size: 35px;
    }
    .header-p, body {
        font-size: 14px;
    }
    .about-info, .mr-15 {
        margin-bottom: 15px;
    }
    #banner h2 {
        font-size: 25px;
    }
    #banner p {
        font-size: 25px;
    }
    .sidenav {
		padding-top: 15px;
	}
    .sidenav a {
		font-size: 18px;
	}
}