@font-face {
    font-family: 'Arapey';
    src: url('./fnt/arapey-italic-webfont.eot');
    src: url('./fnt/arapey-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fnt/arapey-italic-webfont.woff') format('woff'),
         url('./fnt/arapey-italic-webfont.ttf') format('truetype'),
         url('./fnt/arapey-italic-webfont.svg#arapeyitalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Arapey';
    src: url('./fnt/arapey-regular-webfont.eot');
    src: url('./fnt/arapey-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fnt/arapey-regular-webfont.woff') format('woff'),
         url('./fnt/arapey-regular-webfont.ttf') format('truetype'),
         url('./fnt/arapey-regular-webfont.svg#arapeyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {}
body { font-size: 16px; line-height: 1.4; font-family: 'Arapey', Sans-serif;}
section { padding: 2em 1em;
overflow: hidden;}
p{ text-align: justify; }
a {text-decoration: none;}
#navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #991A37;
text-align: center;
}
nav menu li { display: inline-block; vertical-align: middle; margin-top: 2.4em; }
nav menu li:first-child { margin-top: 0; }

nav menu li a { color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;}
nav menu li a span { padding: 0 0 0 2em;
background-image: url('../img/fleur.svg');
background-size: 1em;
background-repeat: no-repeat;
background-position: .6em 1em;
transition: background-position .3s ease;
-webkit-transition: background-position .3s ease;
 }
nav menu li:hover a span { background-position: .6em; }
nav menu li.active a span { background-position: .6em; }
.mobile { display: none }
footer a { color: #fff;}
footer img {
width: 2em;
vertical-align: middle;}
footer {
position: fixed;
bottom: 0;
background: #991A37;
width: 100%;
font-size: .8em;
text-align: center;
color: #fff;
z-index: 5;
padding: .6em;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 1px;
line-height: .7em;
}
footer small { font-size: .8em;
color: #bbb; }
nav {
position: fixed;
top: 0;
background: #991A37;
width: 100%;
font-size: .8em;
height: 1.75em;}
#index { }
#head {text-align: center; height: 60%;
padding-top: 1em;
  position: relative;}
#head img{
height: 19em;
width: 20em;
}
#head .down img { width: 5em; height: 5em;}
#head .down p { line-height: 1em; text-align:center; margin: 1em auto; padding: 0 2em; text-shadow: 0px 1px 1px #fff;}
#head .down a  {
font-size: 1.3em;
padding: .4em 1em;
border: 3px solid #991A37;
letter-spacing: 1px;
transition: all .3s ease;
-webkit-transition: all .3s ease;
background: #991A37;
color: #fff;
text-shadow: 0 0 0 #fff;
}
#head .down a:hover {
background: #fff;
color: #991A37;
border: 3px solid #fff;
}
strong, b { font-weight: bold; font-size: 1.2em;}
#head div{
font-weight: bold;
line-height: 3em;
font-size: 1em;
bottom:2em;
right: 0;
left: 0;
}
#head div b { font-size: 1.6em; }
#head + article { display: none;
}
.center {text-align:center;}
#screen.vertical {height: 100%;}
#screen.vertical section#a-propos {
background-position: 50% 100%;}
#a-propos article{
font-weight: 900;
letter-spacing: 0.15em;
text-align: justify;
max-width: 57em;
margin-left: 37%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);}
#a-propos article p {margin-bottom: 1.6em;
max-width: 57em;}
#a-propos article strong {font-weight: 900; font-size: 1.6em; }

section h2 {

color: #fff;
font-size: 1.6em;}
section h3 {

color: #991A37;
font-size: 1.4em;
margin: 0 .4em;}
section h4 {

color: #000;
font-size: 1.6em;}
section article {max-width: 47em; margin: 0 auto; }
section p{max-width: 47em; }
#les-hotels article {
position: relative;
height: 100%;
width: 100%;
max-width: 100%;}
#map-hotels {
-webkit-pointer-events:none;
width: 100%;
height: 100%;}
#controls-hotels {
width: 20em;
height: 100%;
position: absolute;
left: 0;
z-index: 3;
background: #f8f8f8;
padding: 2.5em 3em;
}
.controls input { display:none;}
.controls label { width: 100%;
font-size: 16px;
display: block;
padding: .6em 1em;
margin: .17em 0em;
}
.controls input[type=checkbox] + label {
background-color: #cccccc;
}
.controls input[type=checkbox]:checked + label {
background-color: #93846B;
}
#galerie article {
max-width: 100%;
height: 100%;}
#galerie .img {
display: inline-block;
vertical-align: top;
background-size: cover;
background-position: 50%;
}
#galerie .img a,
#galerie .img img
{ width: 100%; height: 100%; display: block;}

#actualites { padding: 6em 0 0 0; }
#actualites article { padding-top: .6em; }
.actualite + .actualite { opacity: 0; visibility: hidden;}
.actualite-head {background-position: 50%; height: 20em;}
.date {

color: #ccc;
font-size: 1em;
letter-spacing: .1em;
line-height: 2.2em;
float: right;
max-width: 7em;}

#nous-contacter {
text-align: center;}

#contact input, #contact textarea {
padding: .6em 1em;
}
#contact input {font-family: 'Gotham';
font-size: 16px;
width: 24em;}
textarea {font-family: 'Gotham';
font-size: 16px;
width: 30em;	}

#screen.vertical section#gamme  {padding: 2em 0; background-position: 0 50%; display: none;}
#screen.vertical section#gamme.active  { }
#screen.vertical section#index  {padding: 2em 0; background-position: 0 0%; transition: background-position 1s ease, height 1s ease; -webkit-transition: background-position, height 1s ease 1s ease; }
#screen.vertical section#index.active  { background-position: 0 50%;}
.cuvee { display: inline-block;vertical-align:top;z-index: 4; position: relative;  }
.cuvee:hover .desc { opacity: 1;
}
.cuvee .desc {
display: none;
position: absolute;
background: #991A37;
padding: 1em;
color: #fff;
font-size: .8em;
text-align: justify;
margin: auto;
top: 14em;
transition: opacity .3s ease;
-webkit-transition: opacity .3s ease;
}

a h3 { color: #991A37;
transition: color .3s ease;
-webkit-transition: color .3s ease; }
a:hover h3 { color: #991A37; }
.cuvee a {
   outline: 0;
}
.desc {
max-width: 47em;
background: #fff;
padding: 2em;
margin: 0 auto;
position: relative;
min-height: 18em;
}
.desc p {margin-bottom: 1em;	}
.desc h4 {color: #991A37; font-weight: bold; }
.desc img {
max-height: 230px;
float: right;}
section {
transition: opacity .9s ease;
-webkit-transition: opacity .9s ease;}
.cuvee img{
height: 28em;}
.cuvee h3 {margin-top: -1em; color: #777; }
.cuvee p {text-align:center; font-style: italic;}
#gamme .slides{
text-align:center;
  position: relative;
  top: 20vw;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  white-space : nowrap;
  }
#masque-cuvee {
width: 100%;
background: #fff;
position: absolute;
left: 0;
right: 0;
height: 106em;
z-index: 3;
top: auto;
margin-top: -5em;
}
#map-canvas { width:22em; height:22em; }
#contact h3{color: #fff;
font-size: 1.1em;text-align:left;text-transform:uppercase;}
#contact {text-align:center;
color: #fff;padding:1em 0;}
.colonne {
padding: 0 2em;
margin: 2em 0;
position: relative;
display: inline-block;
vertical-align: top; max-width: 26em;}
.colonne input[type=submit] { font-size: 1em; font-family: 'Gotham';  background: transparent; border: 4px solid #fff; color: #fff;  }
.colonne input[type=text] { font-size: 1em; font-family: 'Gotham'; padding: 1em; background: #444; color: #fff;  border: 0;}
.colonne textarea { font-family: 'Gotham';  padding: 1em; background: #fff; color: #444; border: 0;
width: 24em;
 }
 .cadre-contact { padding: 2em 1em; background: #991A37;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
 #mentions-legales { color: #fff;}
 #agelegal input { width: auto;}
#gamme .down {
z-index: 6;
margin: 2em;
position: relative;
}


section article {
margin: 3em auto 10em auto;
position: relative;
padding: 0px 1em;
}
.center img {
width: 100%;
}
#gamme { overflow: visible;}
@media only screen and (min-width: 727px) and (max-width: 1320px) {
	html, body{
	height: auto;
	}
	.cadre-contact { font-size: 12px; }
	#contact input, #contact textarea { font-size: 12px; }
	#gamme { height: auto !important;}
	#gamme .slides { top: auto;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);}
	.cuvee img {height: 33vw;}
}

@media only screen and (min-width: 727px) and (max-width: 1060px) {

	.cuvee img {height: 22em;}
	#gamme .slides { white-space : normal;
width: 41em;
margin: 0 auto;}
	 #gamme { background-image: none!important;}
}
@media only screen and (max-width: 727px) {

	html, body, #screen.vertical {
	height: auto;
	}
	#screen.vertical section#index { background: transparent;}
	#screen.vertical section#gamme { height: auto !important; background-image: none !important;}
	#screen.vertical section#gamme .slides {
	 top: auto;
	 -webkit-transform: translateY(-0%);
	-ms-transform: translateY(-0%);
	transform: translateY(-0%);
	}
	#gamme .slides {
	  white-space : normal;}
	.cuvee { margin: 2.5em auto;}
	.pagedown { display: none; }
	.mobile { display: block;}
	.web { display: none;}
	.cta {
	display: block;
	width: 17em; margin: 0 auto;
	background: transparent; border: 4px solid #fff;
	text-align: center;
	padding: 1em;
	margin: 2em 0;
	color: #fff;}
	.cuvee img {
	height: 30em;
	}
	#map-canvas {width: 17em;}
	.colonne { margin: 1em 0; text-align:center;}
	#contact input{width: 17em !important;}
	#contact textarea {width: 17em !important;}
	#contact { margin-bottom: 10em;height: 95em!important; }
	footer { position: relative;
	letter-spacing: 1px;
	line-height: 1.6em;}
}