/*-------------------------------*/
/*    CSS ELEMENTS PRINCIPAUX    */
/*-------------------------------*/


/* RESET CSS + FONT DE BASE */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family: 'Josefin Slab', serif;
	font-size: 11px;
}

body#bgaccueil{
	background-image:url(../img/fond/imagesFond.jpg);

}
body#bghotel{
	background-image:url(../img/fond/hotelFond.jpg);
}
body#bgchambres{
	background-image:url(../img/fond/chambresFond.jpg);

}
body#bgresto{
	background-image:url(../img/fond/restoFond.jpg);
}
body#bgspa{
	background-image:url(../img/fond/spaFond.jpg);
}
body#bgbase{
	background:#ACACA2;	
}


body{
	background-position: center;
	background-size: cover; /* version standardisée */
	background-repeat: no-repeat;
	background-attachment: fixed;
}

html,body{
	overflow-x:hidden;
	display:-webkit-flex;
	display:flex;
	width:100vw;
	-webkit-flex-direction:column;
	flex-direction:column;
	align-content:center;
}

header, footer{
	position:relative;
	background:url(../img/vignettes/vignette_defaut.jpg);
	font-family: 'Arial', sans-serif;
}
header{
	z-index:20;
	height:150px;
}


.fixedTop{
	position: fixed;
	top:0;
	width: 100%;
	height:90px;
	margin-left: auto;
	margin-right: auto;
}

main{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:column;
	flex-direction:column;
	width:85vw;
	margin:70px auto;
}

/*---------------------------------------------*/
/*    ELEMENTS ENFANTS DU HEADER(SAUF LA NAV)  */
/*---------------------------------------------*/
/* header1 */
.header1{
	height:80px;
	line-height:80px;
	display:flex;
	text-align: center;
	width:100vw;
}
.langueShop{
	flex:1;
	color:white;
}
	.langueShop i{
		font-size: 30px;
		padding:0 10px;
		color:#BDA03C;
	}	
	.langueShop a{
		font-size:1.5em;
		color:white;
		opacity:0.5;
	}
	.langueShop a:hover {
		opacity:1;
	}	
.parimis{
	flex:2;
}
	.parimis h1{
		font-size:3.5vw;
		color:white;
		-moz-text-shadow: 1px 1px #BDA03C;
	    -webkit-text-shadow: 1px 1px #BDA03C;
	    -o-text-shadow: 1px 1px #BDA03C;
	    text-shadow: 1px 1px #BDA03C;		
	}
.socialIcon{
		flex:1;
		font-size: 2em;
		color:white;
	}
		.socialIcon a{
			display: inline-block;
			width: 45px;
			height: 45px;
			line-height: 45px;
			cursor: pointer;
			border-radius: 50px;
			font-size: 1.3em;
			color: white;
			text-align: center;
			margin-right: 3px;
		}
		.socialIcon a:hover{
			background-color: white;
			color: #bda03c;
		}	


/* header2 */
.header2{
		display:flex;
		height:20px;
		line-height:20px;
		text-align:center;
}
.hrb{
	flex:2;
	font-size: 2.6em;
	color:#787f85;
}
.adresse{
	flex:1;
	font-size:1.4em;
	color:#787f85;
	padding-bottom:50px;
}
.search{
	display:flex;
	flex:1;
}
	.form-search{
		margin:-10px auto;
	    text-align: center;
	    font: bold 13px sans-serif;
	    max-width: 325px;
	    position: relative;
	}

	.form-search input{
	    border-bottom-left-radius: 2px;
	    border-top-left-radius: 2px;
	    background-color:  #ffffff;
	    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
	    padding: 4px 7px 4px 25px;
	    border: 1px solid #b6c3cd;;
	    border-right: 0;
	    color:black;
	    outline: none;
	    -webkit-appearance: none;
	}

	.form-search button{
	    border-bottom-right-radius: 2px;
	    border-top-right-radius: 2px;
	    background-color: gray;
	    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
	    color: white;
	    padding: 5px 8px;
	    margin-left: -4px;
	    cursor: pointer;
	    border: none;
	    outline: none;
	}
	.form-search button:hover{
		background-color: #bda03c;
	}
	.form-search i{
	    position: absolute;
	    top: 2px;
	    left: 5px;
	    font-size: 1.5em;
	    color: #bda03c;
	}

	/* Couleur Placeholder */

	.form-search input::-webkit-input-placeholder {
	    color:  #879097;
	}
	.form-search input::-moz-placeholder {
	    color:  #879097;
	    opacity: 1;
	}
	.form-search input:-ms-input-placeholder {
	    color:  #879097;
	}


/*--------------------------------*/
/*    ELEMENTS ENFANTS DE LA NAV  */
/*--------------------------------*/
/*   NAV   */
#menu{
	background:url(../img/vignettes/vignette_defaut.jpg);
	text-align:center;
	width:100%;
}
/* burger Menu */
.mobile-icon {
	width: 100%;
	text-align: right;
	box-sizing: border-box;
	color: white;
	display: none;
	font-size: 35px;
	font-family: bold;
	margin: 2% 0%;
	position: relative;
	padding-right: 1.25em;
}
.mobile-icon i{
	cursor: pointer;	
}
.mobile-icon:hover{
	transition:2s;
	color:#BDA03C; 
}
.rotated-image {
	transform: rotate(90deg);
}

/* MENU */
.menu, .showing{
	font-weight:bold;
	height:80px;
	list-style: none;
	display:-webkit-flex;
	display: flex;
	position:relative;
	justify-content:center;
	align-items:center;
	margin-left: 30px;
}
	.menu> li:first-child+li+li {
		margin-right:10vw;
	}
	.menu> li:first-child+li+li+li {
		margin-left:8vw;
	}
	.menu>li>a, .showing>li>a {
		font-size:1.7em;
		line-height:100px;
	}

	.menu > li a, .showing > li a{
		color:white;
	}

	.menu li > a, .showing li > a{
		text-decoration: none;
		padding:.4em 1em;
	}
/*  LOGO  */
	.fixedLogo{
		position:relative;
	}
	.fixedTop>a, .fixedLogo>a {
		position: absolute;
		top: 0%;
		left: 46vw;
		padding:-100px;
		text-align: center;
		z-index: 99999;
	}
	
/* SURVOL DU MENU */
	.menu>li:hover > a, .showing>li:hover > a{
		background:white;
		font-weight:bold;	
		color:#BDA03C;
	}

/* LIENS RESERVATION */
	.menu .resa a,.showing .resa a{
		background:#bda03c;
		font-weight:bold;
	}
	.menu .resa:hover > a, .showing .resa:hover > a{
		background:white;
		border-radius:0;
	}
/* MENU ACTIF */
.menu .activate>a, .showing .activate>a{
		color:#BDA03C;
		font-weight:bold;
		background:white;
	}
.menu .activate .sousmenu{
	display:flex;
}

/*--------------------------------*/
/* ELEMENTS ENFANTS DU SOUS MENU  */
/*--------------------------------*/

/* CENTRAGE DU SOUS MENU */
.centerssm{
	display:flex;
	width:100%;
	justify-content:center;
	position:absolute;
	top:90px;
	left:0;
}

/* SOUS-MENU */
.sousmenu{
	list-style: none;
	padding:0.5vw 0;
	width:auto;
	align-items:center;
	background:url(../img/hrRuban.png) no-repeat center;
	background-position:contain;
	display:none;
}
	.sousmenu li > a{
		text-decoration: none;
		color:black;
		font-weight: bold;
		font-size:1.7em;
	}

/* Si un lien du sous menu est coché, le mettre en surbrillance */
	.sousmenu li > a:focus{
		background:black;
		color:white;
		padding:6px 19px 6px 19px;
		border:1px solid #BDA03C;
	}
	

/* SURVOL DU SOUS-MENU */
	.sousmenu>li:hover >a{
		background:black;
		color:white;
		font-weight:bold;
		padding:6px 19px;
	}


/*--------------------------------*/
/*		   		MAIN 		      */
/*--------------------------------*/
.full{
	display:flex;
	margin-top:45px;
	margin-bottom:45px;
	width:100%;
	background:url(../img/vignettes/vignette_defaut.jpg);
	overflow: hidden;
}
.full>img{
	width:50%;
}


/*Formulaire Contact+Map*/
iframe{
	flex:1;
	border:2px solid red;
}
.margeContact{
	margin-top:40px;
}
#formContact{
	flex:1;
	color:white;
}
.formulaire{
  width:100%;
  margin:0 auto;
  border-top:15px solid #BDA03C;
  background:url(../img/vignettes/vignette_defaut.jpg);
  padding:0 20px 60px;
  text-align:center;
  color:black;
}
	.formulaire div *{
		box-sizing:border-box;
	}
	.formulaire h3{
	  text-transform:uppercase;
	  font-size:2.5em;
	  line-height:60px;
	  color:white;
	}
	.formulaire div{
	  width:70%;
	  margin:10px auto;
	  height:50px;
	}
	.formulaire div input, .formulaire textarea{
	  width:100%;
	  height:100%;
	  opacity:0.9;
	  padding-left:22%;
	  background-color:#E8E9EA;
	  border:0;
	  outline:none;
	  margin:0;
	  font-size:1.6em;
	}
	input + label, textarea + label{
	  display:block;
	  position:relative;
	  top:-50px;
	  width:100%;
	  height:100%;
	  background-color:#BDA03C;
	  line-height:50px;
	  font-size:1vw;
	  transition: all 0.3s ease-in-out,width 0.5s ease-in-out;
	  text-transform:uppercase;
	}	
	.formulaire div:hover label,.formulaire div input:focus + label,.formulaire div textarea:focus + label, .labelOuvert{
	  width:20%;
	}
	.formulaire div input:focus + label,.formulaire div textarea:focus + label{
	  background-color:white;
	  color:black;
	}
	.formulaire input[type=submit]{
	  background-color:#BDA03C;
	  border:1px solid white;
	  height:50px;
	  padding:0 20px;
	  text-transform:uppercase;
	  color:white;
	  font-size:1.6em;
	  margin-top:55px;
	}
	.formulaire input[type=submit]:hover{
		background:transparent;
	}
	.formulaire textarea{
	  resize: none;
	  transition:all 0.3s ease-in-out;
	}
	.formulaire textarea + label{
	  top:-50px;
	}
	.formulaire textarea:focus, .messOuvert textarea{
	  height:150px;
	}

	.formulaire textarea:focus + label,.messOuvert input + label{
	  top:-150px;
	  height:150px;
	  line-height:150px;
	}
	.messOuvert{
	  margin-bottom:100px;
	}


/* Formulaire Réservation*/
.form-mini-resa{
		display:flex;
		flex-direction:column;
		align-items: center;
		flex:1;
		background:rgba(0, 0, 0, 0.2);
		text-align: center;
		color:black;
		border:2px groove gray;
	}
	.form-mini-resa>div{
	    margin-top:10px;
	}   	
	.form-mini-resa h2{
		color:gray;
		font-size:2.5vw;
		margin-bottom:5%;
	}

	.form-mini-resa .arrive, .form-mini-resa .depart{
		display:flex;
		position:relative;
		flex-direction:column;
		width:100%;
		align-items: center;
	}
	.form-mini-resa label{
		font-weight: bold;
		width:100%;
		font-size:1.5vw;
		color:white;
		margin-top: 2%;
	}
	.form-mini-resa input{
		align-align:center;
		width:40%;
		font-size: 1.5vw;
		padding-left:1.5em;
	}
	.form-mini-resa input:not(.datepicker){
		width:60%;
	}
	.form-mini-resa button{
		font-size:1.5vw;
		padding:0.1em 0.4em;
		background:#BDA03C;
		color:white;
		margin:20px 0;
		transition:0.4s;
	}
	.form-mini-resa button:hover{
		background:transparent;
		color:#BDA03C;
	}
	.depart i,.arrive i{
	    position: absolute;
	    bottom:2px;
	    left: 31%;
	    font-size: 1.4vw;
	    color: #bda03c;
	}
	.form-mini-resa .socialIcon{
		padding-top:1em;
	}

	.form-mini-resa .adresse i{
		font-size:1.2vw;
		color:#BDA03C;
	}
	.form-mini-resa strong{
		color:gray;
		font-size:1.1vw;
		padding-left:10px;
	}
	.form-mini-resa select{
		font-size:1.3vw;
		height:1.3em;
	}
	.form-mini-resa textarea{
		width:250px;
		height:100px;
	}

	 .form-mini-resa option{
		font-size:1.2vw;
		height:1.2em;
	}
	 .renseignement{
	 	position:relative;
	 	padding:2% 0;
	}
	 .renseignement i{
		    position: absolute;
		    top: 52%;
		    left: 21%;
		    font-size: 1.5vw;
		    font-weight:bold;
		    color: #bda03c;
	}
	.Type, .renseignement, .quantite, .adulte, .enfant{
		padding:0.1vw 0;
	}
	.reservTable, .reservChambre, .reservSoin{
		padding-bottom:10vh;
	}
	.reservTable h2, .reservChambre h2, .reservSoin h2{
		color:white;
		font-size:1.8vw;
		margin:2% 0;
	}
	.reservTable{
		background: url(../img/vignettes/vignette_resto.jpg) center;
	}
	.reservChambre{
		background: url(../img/vignettes/vignette_chambres.jpg) center;
	}
	.reservSoin{
		background: url(../img/vignettes/vignette_spa.jpg) center;
	}
	.soloDuo{
		color:white;
		font-size:1.5vw;
		padding:2% 0;
	}


/* slider */
.slider {
		order:1;
		flex:2;
		position: relative;
		margin: 0 auto;
		overflow: hidden;

}
.left, .right{
	position: absolute;
	cursor: pointer;
	top: 45%;
	transform: translateY(-45%);
	width: 0px;
	height: 0px;
	margin: 5px;
	opacity: 0.4;
	transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
}
.left{
	left: 0px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 27px solid #BDA03C;
}
.right{
	right: 0px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 27px solid #BDA03C;
}
.left:hover, .right:hover{
	opacity: 1;
}
.slider .slideContainer{
	white-space: nowrap;
}
.slider .slideContainer .slide{
	display: inline-block;
	margin-right: -4px;
	vertical-align: top;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 20%;
  	background:cover;
}

.slide h1,.slide h2{
	text-align:center;
	background:black;
	font-size:3.5vw;
	line-height:2em;
	opacity:0.8;
	color:white;
}
.slide h1{
	font-size:4vw;
}
.slideContainer h3{
	position:absolute;
	left:20%;
	bottom:0%;
	font-size:2vw;
	line-height:2.1em;
	color:black;
	background:#bda03c;
	opacity:0.8;
}


/* Section article */
article{
	display:-webkit-flex;
	display:flex;
	width:100%;
	margin:45px 0;
	justify-content:space-between;
}

article>div{
	width:45%;
}

	.section_base> iframe{
		width:100%;
		height:100%;
	}

	.section_base{
		text-align: center;
		-webkit-transition: width 0.7s ease-out;
  		transition: width 0.7s ease-out;
        position: relative;
        z-index : 1;
        -webkit-perspective: 1000;
        perspective: 1000;
	}
	
	.section_base h2{
		font-size:2vw;
		color:white;
	}
	
	.section_base h3{
		background:rgba(0,0,0,0.5);
		font-size:1.5vw;
		color:#bda03c;
	}
	.section_base h4{
		font-size:1.3vw;
	}
	.section_base h5{
		position:absolute;
		bottom:3px;
		text-align:center;
		font-size:1.3vw;
	}

	.section_base em{
		background:rgba(0,0,0,0.5);
		font-size:1.2vw;
		color:#bda03c;
	}
	.section_base p{
		background:rgba(0,0,0,0.5);
		text-align:left;
		font-size:1.2vw;
	}
	.section_base i{
		font-size:1.3vw;
		color:#BDA03C;
		padding-right:1vw;
	}
	
	.section_base button{
		position:absolute;
		padding:2px 3px 2px 3px;
		font-weight:bold;
		font-size:1.3vw;
		background:white;
		color:#555;
		border-radius:2px;
		border:1px solid #ccc;
		right:2%;
	}
	.section_base button.tourner{
		bottom:2%;
	}
	.section_base button.reserv{
		position:static;
	}
  	.section_base button.carte{
		bottom:12%;
		font-size:1.2vw;
    }
	button.tourner:hover, button.reserv:hover, button.carte:hover{
		background:#bda03c;
	}
	.section_base a{
		position:absolute;
		bottom:1%;
		right:1%;
		font-size:1.9vw;
		color:#BDA03C;
	}

      	.vignette {
        	width: 100%;
        	height: 100%;
        	-webkit-transform-style: preserve-3d;
        	-webkit-transition: all 1.0s linear;
        	transform-style: preserve-3d;
      		transition: all 1.0s linear;
      	}
      	.section_base.active .vignette {
         	-webkit-transform: rotateY(180deg);
         	transform: rotateY(180deg);
      	}
      	.face {
        	position: absolute;
        	width: 100%;
        	height: 100%;
        	backface-visibility: hidden;
        	-webkit-backface-visibility: hidden;
        	color: white;
        	font-weight: bold;
        	text-align: center;
        	background:url(../img/vignettes/vignette_defaut.jpg) center;
      		padding:1vw 2vw;
      	}
		.back {
			padding:1vw;
          	-webkit-transform: rotateY(180deg);
          	transform: rotateY(180deg);
          	box-sizing: border-box;
          	color: white;
          	text-align: center;
      	}

      	.bgvignette_chambres{
        	background:url(../img/vignettes/vignette_chambres.jpg);
        	background-size: cover;
      	}
      	.bgvignette_resto{
        	background:url(../img/vignettes/vignette_resto.jpg);
        	background-size: cover;
      	}
      	.bgvignette_spa{
        	background:url(../img/vignettes/vignette_spa.jpg);
        	background-size: cover;
      	}
      	.bgvignette_hotel{
        	background:url(../img/vignettes/vignette_defaut.jpg);
        	background-size: cover;
      	}


/*----- Images Article ------*/
	.imgSect{
		position:relative;
		overflow:hidden;
	}


	.imgSect img{
		width:100%;
		transition: all 4s;
	}
	.imgSect>img:hover{
		transform: scale(1.25);
	}
	.imgSect>h2{
		width:100%;
		color:white;
		background:rgba(0,0,0,0.8);
		font-size:2em;
		text-align:center;
	}


/* HR */
hr{
	margin:2px auto;
	width: 40%;
}
div.hruban{
	position:relative;
	text-align:center;
	background:url(../img/hrRuban.png) no-repeat center;
	background-size: contain;
	width: 40%;
	height:40px;
	line-height:40px;
	margin:20px auto;
	font-size:25px;
	color:black;
	font-weight:bold;
}


/*--------------------------------*/
/*	           FOOTER             */
/*--------------------------------*/
footer{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
}

footer>div{
	display:flex;
	flex:1;
	flex-direction:column;
	text-align: center;
	border-bottom:1px solid white;
	border-right:1px solid white;
	padding:20px 0;

}

footer div h2{
	color:#bda03c;
	font-size:2.5em;
}

footer div p{
	color:white;
	font-size:2em;
}
footer div img{
	align-self:center;
}
	footer>div h2{
	    text-shadow: 1px 1px gray;
	}

/* Footer Contact */
	.contact i{
		font-size: 1.6em;
		color: #bda03c;
	}
	.contact i span{
		padding-left:15px;
		color:gray;
		font-size:1em;
	}
	.contact i a{
		padding-left:15px;
		color:gray;
		text-decoration: none;
	}
	.contact i a:hover{
		color:#BDA03C;
	}
	.contact i em{
		font-size:1.6em;
	}

/* Newsletter et Réseaux sociaux */
		.form-newsletter{
			margin:auto;
		    text-align: center;
		    font: bold 10px sans-serif;
		    max-width: 325px;
		    position: relative;
		}

		.form-newsletter input{
		    border-bottom-left-radius: 2px;
		    border-top-left-radius: 2px;
		    background-color:  #ffffff;
		    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
		    padding: 4px 7px 4px 25px;
		    color:black;
		    outline: none;
		    -webkit-appearance: none;
		}

		.form-newsletter button{
		    border-bottom-right-radius: 2px;
		    border-top-right-radius: 2px;
		    background-color: gray;
		    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
		    color: white;
		    padding: 4px 8px;
		    margin-left: -4px;
		    cursor: pointer;
		    outline: none;
		}
		.form-newsletter button:hover{
			background-color: #bda03c;
		}
		.form-newsletter i{
		    position: absolute;
		    top: 5px;
		    left: 5px;
		    font-size: 1.6em;
		    color: #bda03c;
		}

	.newsletter h2,.newsletter p,.newsletter form,.newsletter div{
		padding-bottom:10px;
	}

/*  Menu Footer */
	.menuFooter{
		display:flex;
		flex-direction:row;
		flex-wrap: wrap;
		justify-content:center;
	}
	.menuFooter h2{
		width:100%;
	}
	.menuFooter ul{
		display:flex;
		flex-direction:column;
		padding-left:20px;
		width:50%;
	}

	.menuFooter ul li{
		list-style-type: circle;
		align-self:flex-start;
		color:#BDA03C;
		padding:3px 0;
	}
	.menuFooter ul li a{
		margin:0.2em;
		color:white;
		font-size:1.4em;
	}

	.menuFooter ul li a:hover{
		color:#BDA03C;
	}

/* Recrutement*/
	.recrutFooter h3{
		color:white;
		font-size:2.5em;
	}
	.recrutFooter a{
		color:gray;
		text-decoration: none;
		font-size:1.5em;
	}
	.recrutFooter a:hover{
		color:#BDA03C;
	}
	.recrutFooter em{
		font-size:1.6em;
	}


/* Copyright */
.copyright{
	background:#Bda03c;
	width:100%;
	line-height:12px;
	font-size:12px;
	font-weight:bold;
	text-align: center;
}


/* Mentions legales + CGV */
.mention{
  	width:960px;
  	padding:50px;
  	margin: 0px auto 50px auto;
  	background: rgba(255,255,255,0.8);
  	box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
  	border-radius: 6px;
  	display: flex;
  	flex-direction: column;
  	justify-content:space-around;
}
.mention p{
	font-size:1.5em;
}
.mention strong{
	font-size:1.2em;
}
.mention h2{
	font-size:2em;
}
.mention strong a{
	font-size:1.2em;
}
.mention a{
	font-size:1.3em;
}


/* PANIER DE COMMANDE */
.shopping-cart {
  	width:960px;
  	height: 630px;
  	margin: 0px auto 50px auto;
  	background: rgba(255,255,255,0.8);
  	box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
  	border-radius: 6px;
  	display: flex;
  	flex-direction: column;
}
.title {
  	height: 80px;
  	border-bottom: 2px solid #888888;
  	padding: 20px 30px;
  	color: black;
  	font-size: 35px;
  	font-weight: bold;
}
.title_footer{
  	border-top: 2px solid #888888;
  	height: 80px;
  	padding: 20px 30px;
  	color: black;
  	font-size: 35px;
  	font-weight: bold;
  	position:relative;
}
	.title_footer p{
	  	position:absolute;
	  	top:20px;
	  	right:90px;
	  	font-size:25px;
	}
	.title_footer i{
		position:absolute;
		top:20px;
		right:170px;
		font-size:29px;
	}
	.title_footer i:first-child{
	 	right:220px;
	 }
	.title_footer i:hover{
		color:#BDA03C;
	}
.item {
  	padding: 20px 20px;
  	height: 160px;
  	display: flex;
}
.item:nth-child(3) {
  	border-top:  1px solid #888888;
  	border-bottom:  1px solid #888888;
}
.image {
  	margin-right: 50px;
}
.description {
  	padding-right: 10px;
  	margin-right: 240px;
  	width: 115px;
}
	.description span {
	  	display: block;
	  	font-size: 18px;
	  	color: #43484D;
	}
	.description span:first-child {
  		margin-bottom: 5px;
	}
	.description span:last-child {
	  	font-weight: 300;
	  	margin-top: 8px;
	  	color: #86939E;
	}
.quantity {
  	padding-top: 20px;
  	margin-right: 80px;
}
	.quantity input {
	  	-webkit-appearance: none;
	  	border: none;
	  	text-align: center;
		  	width: 32px;
  		font-size: 18px;
  		color: #43484D;
  		font-weight: 300;
	}
button[class*=btn] {
  	width: 30px;
  	height: 30px;
  	background-color: #E1E8EE;
  	border-radius: 6px;
  	border: none;
  	cursor: pointer;
}
	.minus-btn img {
	  	margin-bottom: 3px;
	}
	.plus-btn img {
	  	margin-top: 2px;
	}
 
	button:focus,
	input:focus {
	  	outline:0;
	}
.total-price {
	width: 83px;
  	padding-top: 27px;
  	text-align: center;
  	font-size: 20px;
  	color: #43484D;
	font-weight: bold;
}



/* Plan du site */
/*.mapsite{
	padding:0;
}*/
.mapsite{
  	width:960px;
  	padding:50px;
  	margin: 0px auto 50px auto;
  	border-radius: 6px;
  	display: flex;
  	flex-direction: column;
  	justify-content:space-around;
}
.sitemap{
	border:1px solid #BDA03C;
	position:relative;
	width:100%;
	height:80px;
	margin:10px auto;
}
.solo{
	line-height:80px;
}
.sitemap h2 a{
	font-size:2em;
	font-weight:bold;
	color:#BDA03C;
}
.sitemap h2{
	position:absolute;
	width:100%;
	text-align: center;
}
.sitemap ul{
	position:absolute;
	width:100%;
	bottom:0;
	display:flex;
	justify-content:space-around;
	list-style:none;
	background:rgba(0,0,0,0.6);
}
.sitemap li:before{
	content: "\2022";
	margin-right: 10px;
	color: #BDA03C;
	font-size:2.5em;
}

.sitemap li>a{
	font-size:1.9em;
	color:white;
}
.bgdefault{
	background:url(../img/vignettes/vignette_defaut.jpg) center;
	background-size: stretch;
}
.bgchambres{
	background:url(../img/vignettes/vignette_chambres.jpg) center;
	background-size: cover;
}
.bgresto{
	background:url(../img/vignettes/vignette_resto.jpg) center;
	background-size: cover;
}
.bgspa{
	background:url(../img/vignettes/vignette_spa.jpg) center;
	background-size: cover;
}
.bgavis{
	background:url(../img/avis-client.jpg) center;
	background-size: cover;
}
.bgdefault2{
	background:url(../img/vignettes/vignette_defaut.jpg)	;
	background-size: stretch;
}









/*--------------------------------*/
/*	       RESPONSIVE DESIGN      */
/*--------------------------------*/




/*************************/
/* MODE TABLETTE < 960px */
/*************************/

@media screen and (max-width: 960px) {
	body#bgaccueil,body#bghotel,body#bgchambres,body#bgresto,body#bgspa{
		background-image:none;
		background:#acaca2;
	}
	main{
		width:100vw;
	}
	header{
		height:auto;
		display:flex;
		flex-direction:column;
		margin:0 auto;
	}
	
	/* header1 */
	.header1{
		height:auto;
		flex-direction:column;
		line-height: inherit;
	}
	.header1>.socialIcon{
		display:none;
	}
	/* header 2*/
	.header2{
		flex-direction:column;
		height:auto;
		line-height:inherit;
	}
	.langueShop{
		order:2;
	}
	.hrb{
		order:1;
		font-size:2.3em;
	}
	.adresse{
		font-size:1.5em;
		order:2;
		padding:0;
	}
	.search{
		display:none;
	}

	.parimis h1{
		font-size:6vw;
	}
	.parimis{
		text-align: center;
	}
	.parimis img{
		height:80px;
		width:480px;
	}

	/* NAV */
	.menu{
		justify-content:flex-start;
		width:100%;
		height:90px;
		line-height:90px;
		margin-left:0;
		background:url(../img/vignettes/vignette_defaut.jpg);
	}
	.menu>li>a{
		font-size:1.5em;
	}
	.menu>li:not(.activate){
		display:none;
	}
	.activate{
		width:100%;
	}	
	.menu .activate>a{
		margin:0 auto;
	}
	.menu li:first-child+li+li {
		margin-right:0;
	}
	.menu li:first-child+li+li+li {
		margin-left:0;
	}
	.menu li{
		height:50px;
	}
	.menu li a{
		width:100%;
		line-height:50px;
	}
	#menu{
		position:none;
	}
	.menu{
		position:absolute;
		top:0;
	}
	.sousmenu li > a:focus{
		padding:10px 11px 10px 11px;
		border:1px solid #BDA03C;
	}
	.sousmenu>li:hover >a{
		padding:10px 11px;
	}
	.showing>li{
		display:block;
		height:50px;
	}
	.showing .activate>a{
		margin-left:0;
	}
	.fixedTop>a, .fixedLogo>a {
		left:0;
	}
	.mobile-icon {
		display: block;
		z-index:999;
	}
	.showing{
		display:block;
		height: 100vh;
		margin:0 auto;
		font-size: 10px;
		background:url(../img/vignettes/vignette_defaut.jpg);
	}
	.sousmenu{
		padding:0;
		line-height:35px;
		height:35px;
	}
	.sousmenu>li>a{
		font-size:1.1em;
	}
	#menu .ssmsolo>a{
		font-size:1.4em;
	}
	.fixedTop .menu{
		position: absolute;
		top: 0%;
		left: 0;
		text-align: center;
	}



	/* HR */
	div.hruban{
		width: 40%;
		margin:40px auto 0 auto;
	}

	/* article + full */
	article,.full{
		flex-wrap:wrap;
		background:none;
		padding:0 10%;
		margin:20px auto;
	}	
	article>div,.reservTable,.reservChambre,.reservSoin{
		flex:0 1 auto;
		width:100%;
	}
	div.section_base{
		order:-1;
	}
	.full>div, .full>iframe{
		flex:0 1 auto;
		width:100%;
	}
	.full iframe{
		height:50vh;
	}
	.full>img{
		width:100%;
	}


	/*footer*/
	footer{
		flex-wrap:wrap;
	}
	footer>div{
		flex:0 1 auto;
		width:50%;
	}




	/* Formulaire Réservation*/
	.form-mini-resa label{
		font-size:4vw;
	}
	.form-mini-resa input{
		font-size: 3vw;
	}

	.form-mini-resa button{
		font-size:3vw;
	}

	.depart i,.arrive i{
	    font-size: 2.9vw;
	}
	.renseignement i{
		top:60%;
	    font-size: 2.6vw;
	}
	.form-mini-resa .adresse i{
		font-size:3vw;
	}
	.form-mini-resa strong{
		font-size:2.8vw;
	}
	.form-mini-resa select{
		font-size:2.8vw;
	}
	 .form-mini-resa option{
		font-size:2.5vw;
	}
	.reservTable h2, .reservChambre h2, .reservSoin h2{
		font-size:3vw;
	}
	.soloDuo{
		font-size:4vw;
	}
	.form-mini-resa h2{
		font-size:6vw;
	}
	.form-mini-resa{
		background:url(../img/vignettes/vignette_defaut.jpg);
		order:2;
	}
	.form-mini-resa img{
		flex:1;
		width:100px;
		height:100px;
	}
	.form-mini-resa .socialIcon{
		padding-top:0;
	}
	.reservTable{
		background: url(../img/vignettes/vignette_resto.jpg) center;
	}
	.reservChambre{
		background: url(../img/vignettes/vignette_chambres.jpg) center;
	}
	.reservSoin{
		background: url(../img/vignettes/vignette_spa.jpg) center;
	}



	/* slider */
	.slider{
		order:1;
	}
	.slide h1{
	font-size:6vw;
	}
	.slide h2{
	font-size:4vw;
	}
	.slideContainer h3{
		left:12%;
		font-size:3.5vw;
		line-height:1.7em;
	}


	/*Formulaire de Contact*/
	input + label, textarea + label{
		font-size:0.9em;
	}
	.formulaire div input, .formulaire textarea{
		font-size:1.3em;
	}
	.formulaire h3{
		font-size:2em;
	}
	.formulaire input[type="submit"]{
		font-size:1.3em;
	}


	/* article */
	.face{
	
		padding:5px 30px;
	}
	.section_base h2{
		font-size:4.3vw;
	}
	
	.section_base h3{
		font-size:3vw;
	}

	.section_base h4{
		font-size:2.6vw;
	}

	.section_base h5{
		font-size:2.6vw;
	}
	.section_base p,.section_base em{
		font-size:2.6vw;
	}
	.section_base a{
		font-size:4vw;
	}
	.section_base i{
		font-size:2.6vw;
	}
	.section_base button.tourner{
		font-size:2.7vw;
	}
	.section_base button.reserv{
		font-size:2.7vw;
	}
  	.section_base button.carte{
		font-size:2.4vw;
    }


	/*Mentions légales et CGV*/
	.mention{
  	width:100%
	}

	/* PANIER DE COMMANDE */
	 .shopping-cart {
    	width: 100%;
    	height: auto;
    	overflow: hidden;
  	}
  	.item {
    	height: auto;
    	flex-wrap: wrap;
    	justify-content: center;
  	}
  	.image img {
    	width: 50%;
    	height:100%;
  	}
  	.image,
  	.quantity,
  	.description {
    	width: 100%;
    	text-align: center;
    	margin: 6px 0;
  	}	
	.title {
	  	font-size: 30px;
	}

	.title_footer{
	  	font-size: 25px;
	}

	.title_footer p{
	  	top:20px;
	  	right:90px;
	  	font-size:25px;
	}
	.title_footer i{
		top:20px;
		right:170px;
		font-size:29px;
	}
	.title_footer i:first-child{
	 	right:220px;
	}


/* Plan du site */

.mapsite{
	width:100%;
	padding:50px 0;
}
.sitemap{
	height:180px;
}
.sitemap ul{
	flex-direction:column;
	align-content:center;
}
.sitemap h2 a{
	font-size:2.1em;
}

.sitemap li:before{
	font-size:2em;
}

.sitemap li>a{
	font-size:2em;
}




















/*************************/
/* MODE PORTABLE < 480x */
/*************************/
@media screen and (max-width: 480px) {
	/* HR */
	div.hruban{
		width: 60%;
	}

	
	/* header1 & header2*/
	.parimis img{
		height:50px;
		width:320px;
	}
	.hrb{
		font-size:1.9em;
	}
	.adresse{
		font-size:1.3em;
	}
	.parimis h1{
		font-size:8vw;
	}
	.langueShop img{
		width:20px;
		height:15px;
	}
	.langueShop a{
		font-size:1.3em;
	}
	.langueShop i{
		font-size: 20px;
	}

	/*nav*/
	.menu>li>a{
		font-size:1.3em;
	}
	.activate>a{
		margin-left:35vw;
	}

	.sousmenu li > a:focus{
		padding:12px 8px 11px 8px;
		border:1px solid #BDA03C;
	}
	.sousmenu>li:hover >a{
		padding:12px 8px;
	}
	.sousmenu>li>a{
		font-size:0.8em;
	}
	#menu .ssmsolo>a{
		font-size:1.1em;
	}
	



	/* slider */
	.slide h1{
	font-size:8vw;
	}
	.slide h2{
	font-size:6vw;
	}
	.slideContainer h3{
		left:9%;
		font-size:4.5vw;
		line-height:1.6em;
	}


	/* Article */
	article,.full{
		padding:0;
	}	
	.face{
		padding:2px 15px;
	}
	.section_base h2{
		font-size:4.9vw;
	}
	.section_base h3{
		font-size:4.1vw;
	}
	.section_base h4{
		font-size:3.6vw;
	}
	.section_base h5{
		font-size:3.6vw;
	}
	.section_base p,.section_base em{
		font-size:3.4vw;
	}
	.section_base a{
		font-size:5vw;
	}
	.section_base i{
		font-size:3.6vw;
	}
	.section_base button.tourner{
		font-size:3.6vw;
	}
	.section_base button.reserv{
		font-size:3.6vw;
	}
  	.section_base button.carte{
		font-size:3.1vw;
    }


	/* Formulaire de Contact */
	input + label, textarea + label{
		font-size:0.8em;
	}
	.formulaire div input, .formulaire textarea{
		font-size:1.1em;
	}
	.formulaire h3{
		font-size:1.5em;
	}
	input + label, textarea + label {
		font-size:0.9em;
	}
	.formulaire input[type="submit"]{
		font-size:1.1em;
	}


	/* Formulaire Réservation*/
	.form-mini-resa h2{
		font-size:8vw;
	}
	.form-mini-resa label{
		font-size:6vw;
	}
	.form-mini-resa input{
		font-size: 6vw;
	}
	.form-mini-resa button{
		font-size:4.5vw;
	}
	.depart i,.arrive i{
	    font-size: 5.5vw;
	}
	.renseignement i{
		top:60%;
	    font-size: 5vw;
	}
	.form-mini-resa .adresse i{
		font-size:5vw;
	}
	.form-mini-resa strong{
		font-size:4.5vw;
	}
	.form-mini-resa select{
		font-size:5vw;
	}
	 .form-mini-resa option{
		font-size:5vw;
	}
	.reservTable h2, .reservChambre h2, .reservSoin h2{
		font-size:6vw;
	}
	.soloDuo{
		font-size:5vw;
	}

	
	/*panier commande*/
	.title {
	  	font-size: 25px;
	}

	.title_footer{
	  	font-size: 20px;
	}

	.title_footer p{
	  	right:15px;
	  	font-size:19px;
	}
	.title_footer i{
		top:20px;
		right:70px;
		font-size:22px;
	}
	.title_footer i:first-child{
	 	right:105px;
	 }


	/* footer */
	footer>div{
		width:100%;
	}

	/* Plan du site */
	.mapsite{
	padding:0;
	}

}