/* --------- Général ---------- */
body {
  	background-color: #fff;  	
}

a {
    color: #000;
    word-wrap: break-word;
	-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
		-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
			-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
				-o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover, a:focus {
    color: #a1a1a1;
    text-decoration: none;
    outline: 0;
}

a:before, a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
		-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
			-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
				-o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}


/* ===== Section du header ===== */
header {
	background: url("../images/bg/bg.jpg") no-repeat 0% 0% / 100% auto;			
} 

/* ===== Background ===== */
.fullbg {
	background-color: rgba(31, 20, 20, 0.8);
}

.logo {
	display: block;
	width: 400px;
	border: 2px solid #fff;
	border-top-left-radius: 25px;
	border-bottom-right-radius: 25px;
	font-family: "oxygen", sans-serif;
	font-size: 24px;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 5px;
	margin: 40px 0px;
	margin-left: -60px;
	padding: 10px;
}

/* ===== Typographie ===== */
p {
	line-height: 1.5;
}

/* ===== Les class ===== */
.row {
	margin: 0px;	
}

.border {
	border: 1px solid #fff;
	border-radius: 6px;
	margin-right: 6px;	
}

.alerte {
	font-size: 16px;
	font-weight: 700;
	color: #843025;
}

.box {
	text-align: center;
	align-content: center;
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid #fff;
	border-radius: 6px;
	/*display: block;
	width: 350px;
	border: 0px solid #fff;*/	
	margin: 0;
	padding: 10px;
}

.font {
	color: #000;
}

.fontbtn {
	border: 1px solid #000;
	font-size: 18px;
	font-weight: 700;
	color: #000;
}

/* ===== Section menu navigation ===== */
.navb {

}

.navbar-default {
	background-color: rgba(255, 255, 255, 0);
	border-color: rgba(255, 255, 255, 0.4);
	border-left: none;
	border-right: none;
	margin-top: 60px !important;
}

.navi {
	border-bottom: 2px solid rgba(255, 255, 255, 0.4);
	border-top: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 0px;	
	margin-bottom: 0px;		
}

.menubox {
	text-align: center;	
}

.menu {
	display: inline-block;
	float: none;
	list-style: none;	
	margin: 0px !important;	
	padding-left: 0px !important;
}

.menu li {
	float: left;
}

.menu li a {
	display: inline-block;
	font-family: "lato", sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #ccc !important;
	letter-spacing: 3px;
	padding: 20px;
	margin-top: 5px;
}

a:focus {
	outline: none;
}

.menu li a:hover, .menu li a:focus {
	background-color: rgba(255, 255, 255, 0.2) !important;	
	text-decoration: none;
	color: #f8bd08 !important;
	margin-top: 5px;
}

.menu li:after {
	display: inline-block;
	color: #f8bd08;
	content: '~';
}

.menu li:last-child:after {
	content: "";
}

/* ===== Section text banner ===== */
.text-banner {
	padding-top: 40px;
	padding-bottom: 80px;
	/*padding: 120px 0px 200px; */
}

.text-banner h2 {
	font-family: 'niconne', cursive;
	font-size: 65px;
	text-align: center;
	color: #f8bd08; /*  #f8bd08; */	
}

.text-banner p {
	font-family: "lato", sans-serif;
	font-family: "lato", sans-serif;
	font-size: 24px;
	text-align: center;
	color: #ccc;
}

/* ===== Section welcome ===== */
.header-text {
	display: block;
	font-family: "oxygen", sans-serif;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 5px;
	text-transform: uppercase;	
	padding-top: 5px;
	margin-bottom: 0;	
}

.welcome {
	padding: 100px 0px;
}

.welcome-text p {
	font-family: "lato", sans-serif;
	font-size: 16px;	
	color: #888;
	line-height: 28px;
	margin-top: 15px;
}

.welcome-image img {
	width: 100%;
	border-radius: 6px;
	-webkit-box-shadow: -2px -2px 11px 0px rgba(0,0,0,0.45);
		-moz-box-shadow: -2px -2px 11px 0px rgba(0,0,0,0.45);
	box-shadow: -2px -2px 11px 0px rgba(0,0,0,0.45);
}

.section-container h3 {
	font-family: 'niconne', cursive;
	font-size: 55px;
	color: #f8bd08;
	line-height: 1.5;
	margin: 0px 0px -10px;
}

.section-container h4 {	
	font-size: 16px;
	color: #312502;
	line-height: 1.5;	
}

/* ===== Section des évènements ===== */ 
.upevent {
	background-attachment: fixed;
	background-color: #645862;
	background-image: url("../images/bg/bg2.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	color: #fff;
	cursor: default;
	padding: 0px;
}

.upevent-effect {
	background-color: rgba(31, 20, 20, 0.7);
	padding: 80px 0px;
}

.upsalon {
	background-attachment: fixed;
	background-color: #645862;
	background-image: url("../images/bg/bg3.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	color: #fff;
	cursor: default;
	padding: 0px;
}

.uphead {
	padding: 10px 0px 40px;
}

.upbox {
	background-color: #f8bd08;
	border-radius: 6px;
	padding: 20px;
}

.upimg {
	padding-bottom: 10px;		
}

.upbox img {
	width: 100%;
	border-radius: 50px;	
}

.special-note .h4 {
	font-family: "lato", sans-serif;
	font-size: 24px;
	line-height: 1.5;
	margin-top: 10px;
	padding: 10px 0px;
}

.special-note p {
	font-family: "lato", sans-serif;
	font-size: 20px;
	line-height: 1.5;
	margin: 0px;
	margin-bottom: 10px;
	padding: 10px 0px;	
}

/* ===== Section du menu ===== */ 
.menu-section {
	padding: 100px 0px;
}

.tab-content ul {
	list-style: outside none none;
	padding: 0px;
	margin-bottom: 0px;
}

.tab-content ul li {
	display: block;
	float: left;
	width: 100%;
	border-bottom: 1px dotted rgb(248, 189, 8);
	padding: 20px 0px 8px;
}

.tab-content ul li:last-child {	
	border-bottom: 0px dotted rgb(248, 189, 8);
}

.tab-content ul li p {
	
}

.menuname h3 {
	font-size: 16px;
}
.menuname {
	float: left;
}

.price {
	float: right;
}

.nav-tabs {
	border-bottom: 1px solid rgb(248, 189, 8);
}

.nav-tabs > li {
	float: left;
	background-color: rgb(248, 189, 8);
	margin-bottom: -1px;
}

.nav-tabs > li > a {	
	border: 1px solid transparent;
	border-radius: 0px;
	color: rgb(255, 255, 255);
	line-height: 1.42857;
	margin-right: 2px;
	margin-right: 0px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
	background-color: #fff;
	border-color: rgb(248, 189, 8) rgb(248, 189, 8) transparent;
	border-width: 1px;
	border-style: solid;	
	border-image: none;
	border: none;	
	color: rgb(248, 189, 8);
	-moz-border-left-colors: none;
	-moz-border-bottom-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	cursor: default;
}

.nav-tabs > li > a:hover {
	background-color: #fff;
	border-color: rgb(248, 189, 8) rgb(248, 189, 8) rgb(248, 189, 8);
	color: rgb(248, 189, 8);
}

.menuhead {
}

.menuhead h3 {
	font-size: 36px;
	text-align: right;
}

.menuhead p {
	font-family: "lato", sans-serif;
	font-size: 16px;
	color: #888;
	line-height: 28px;
	margin-top: 15px;
}

.menuhead span {
	display: block;
	text-align: right;
}

.menuhead img {
	float: right;
	width: 95%;
	margin-top: 20px;
}

/* ===== Section des reservations ===== */ 
.book {
	background-color: #fbfcfa;
	padding: 100px 0px;
}

.bookhead {
	text-align: center;
}

.opening {
	font-family: "lato", sans-serif;
	text-align: center;
	color: #888;
	padding: 40px 0px;
}

.opening h4 {
	font-size: 22px;
}

.opening p {
	font-size: 16px;
}

.opening .call {
	font-size: 20px;
	color: #333;
	letter-spacing: 2px;
}

/* ===== Section des formulaires ===== */ 
.forming input {
	border-color: #5a5e6b;
	border: 1px solid #5a5e6b;
	font-family: "lato", sans-serif;
}

.forming textarea {
	border-color: #5a5e6b;
	border: 1px solid #5a5e6b;
	font-family: "lato", sans-serif;
}

.forming select {
	border-color: #5a5e6b;
	border: 1px solid #5a5e6b;
	font-family: "lato", sans-serif;
}

.forming input:focus, .forming textarea:focus {
	border-color: #333;
	border: 1px solid #333;
	box-shadow: none;
}

.forming button {
	background-color: #f8bd08;
	border: 2px solid #f8bd08;
	font-size: 18px;
	text-align: center;
	color: #fff;
	padding: 7px 35px;
}

.forming button:focus, .forming button:hover {
	background-color: #f8bd08 !important;
	border: 2px solid #333 !important;
	font-size: 18px;
	text-align: center;
	color: #333;
	padding: 7px 35px;
}

.form-control {
	height: auto !important;
	padding: 14px 12px;	
}

.close {
	background-color: transparent !important;
	border: none !important;
	color: #000 !important;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 24px !important;
	margin-top: -10px  !important;
	margin: 4px 2px;
	cursor: pointer;
}

/* ===== Section du footer ===== */
.footer {
	background-color: #111;
	padding: 20px 0px;
}

.footer {
	text-align: center;	
}

.footer h3 {
	font-size: 55px;
}

.footer .header-text {
	color: #fff;
	padding-bottom: 30px;
}

.address {	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 0px;			
}

.address p {
	font-family: "lato", sans-serif;
	font-size: 16px;
	color: #fff;	
}

/* ===== Section du footer info ===== */
.footerinfo {
	background-color: #5a5e6b;
	text-align: center;
	padding: 0px 0px;
}

.footerinfo h4 {
	font-family: "lato", sans-serif;
	font-size: 18px;
	color: #ccc;
	letter-spacing: 1px;
	margin: 0px;
	padding: 10px 0px;
}

.footerinfo p {
	font-family: "lato", sans-serif;
	color: #ccc;
	letter-spacing: 1px;
	margin: 0px;
	padding: 10px 0px;
}

.footerinfo p a {
	color: #f8bd08;
}

.footerinfo a:hover {
	color: #fff;
}

.social {
	padding: 20px 0px;
}

.social ul {
	list-style: none;
}

.social ul li {
	display: inline-block;
	margin: 0px 10px 0px 0px;
}

.social ul li a {
	font-size: 30px;
	text-align: center;
	color: #f8bd08;
}

.social ul li a:hover {
	color: #fff;
}

/* ===== Google map ===== */
.container-full { 
	width: 100%; 
	margin: 0 auto; 	
}

.top-space { 
	margin-top: 60px; 
}

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

/* google maps */
.google-maps {	
  position: relative;
  height: 0;
  padding-bottom: 25%; /* This is the aspect ratio */     
  overflow: hidden;
}

.google-maps iframe {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 0;
  left: 0;      
}

/* ===== haut de page ===== */ 
.back-to-top {
	display: none;
	position: fixed;
	color: #000;
	cursor: pointer;   
    bottom: 6px;
    right: 20px;    
}


/* ========== @media min-width, max-width ========== */ 
 @media (min-width: 768px) and (max-width: 1420px) {
	.logo {
		font-size: 16px;
	}
}

@media (min-width: 768px) and (max-width: 990px) {
	.navbar {
		min-height: 30px;
}

	.menu li a {
		padding: 8px !important;
}

	.text-banner {
		margin-top: 80px;
		padding: 0px 0px 100px;
}

	.text-banner h2 {
		font-size: 45px;
}

	.text-banner p {
		font-size: 20px;
}

	.section-container h3 {
		font-size: 40px;
}

	.header-text {
		font-size: 18px;
}

	.welcome2 {
		display: none;
	}

}

 @media (min-width: 120px) and (max-width: 768px) {
	.logo {
		position: absolute;
		font-size: 15px;		
		margin: 15px 0px;
}

	.fullbg {
		height: 210px;
}

	header {
		height: 210px;
}

	.header-text {
		font-size: 16px;
		text-align: center;

}

	.navb {
		position: absolute;	
		margin-top: 17px;
		right: 0px;
		margin-right: 0px;
}

	.navb {
		margin-top: 17px;
}

	.navi {
		border: none;
		z-index: 2;
}

	.nav > li > a {
		padding: 7px 8px;
}

	.menu {
		width: 100%;
}

	.menu li a {
		width: 100%;
		padding: 10px;
}

	.menu li {
		float: none;
		width: 100%;
}

	.menu li:after {
		content: '';
}

	.menubox {
		background-color: #333;
}

	.menubox {
		margin-top: 73px;
}
	
	.menu-list {
		float: right;
}

	.menuhead {
		float: right;
}	
	
	.menu-section {
		padding: 30px 0px;

}	

	.text-banner {
		position: absolute;
		margin-top: 60px;
		padding: 3px 0px 25px;
}

	.text-banner h2 {
		font-size: 31px;
		z-index: 1;
}

	.text-banner p {
		font-size: 14px;
}

	.section-container h3 {
		font-size: 40px;
		text-align: center;
}

	.welcome {
		padding: 30px 0px;
}

	.welcome-text p {
		font-size: 14px;
		line-height: 24px;
}

	.upevent-effect {
		padding: 30px 0px;
}

	.book {
		padding: 30px 0px;
}

	.address p {
		text-align: center;
}

	.social {
		text-align: center;
}

	.footer {
		padding: 30px 0px;
	}

}