@font-face {
	font-family: 'Museo';
	src: url('../fonts/Museo500-Regular.eot');
	src: url('../fonts/Museo500-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Museo500-Regular.woff') format('woff'),
		url('../fonts/Museo500-Regular.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Museo';
	src: url('../fonts/Museo300-Regular.eot');
	src: url('../fonts/Museo300-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Museo300-Regular.woff') format('woff'),
		url('../fonts/Museo300-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


* { margin:0; padding:0; }
ul, li{list-style-type:none}
body {
	font-family: 'Museo', sans-serif;
	font-size:15px;
	font-weight:normal;
	color:#000;
	text-align:center;
}
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}
.clearfix {display: block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
.clear{clear:both;}

p{text-align:left; line-height:24px; font-family: 'Museo', sans-serif; font-weight: 500; font-size:16px; letter-spacing:0.5px;}
img { border:none; vertical-align:top; max-width:100%; }
a  { color:#197B7A;outline: none; text-decoration:none;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;}


a.plus {display:inline-block; color:#AFCBB4; font-weight:500; font-family: 'Museo', sans-serif; font-size:17px; border-bottom:2px dotted #AFCBB4; }
a.plus:hover{color:#25ACA6; border-color:#25ACA6;}

a.max {display:inline-block; color:#fff; background:#25ACA6; font-weight:500; font-family: 'Museo', sans-serif; font-size:20px; padding:10px 15px; border-radius:4px; line-height:34px; margin-top:15px;}
a.max:hover{color:#AFCBB4;}


h1{ font-family: 'Museo', sans-serif; font-size:25px; font-weight:normal; text-transform:uppercase; margin-bottom:20px; color:#25ACA6;}
h2{ background: url(../images/bg-h2.png) bottom center no-repeat;font-family: 'Museo', sans-serif; font-size:30px; font-weight:normal; text-transform:uppercase; margin-bottom:20px; color:#25ACA6; padding-bottom:10px;}
h3{ font-family: 'Museo', sans-serif; font-size:20px; font-weight:500; text-transform:uppercase; margin-bottom:10px; color:#23ACA5;}
h4{ font-family: 'Museo', sans-serif; font-size:18px; font-weight:normal; text-transform:uppercase; margin-bottom:10px; color:#333; text-align:left;}
h5{ font-size:30px; font-weight:normal;margin-bottom:10px; color:#A4D4AC; text-align:left;}

@media screen and (min-width: 768px) {
	h1{font-size:35px;}
	h2{font-size:40px;}
	h3{font-size:30px;}
	h4{font-size:22px;}
	h5{font-size:40px;}
}
.bl{color:#fff;}
.left{text-align:left;}

.responsive-img{
	border-radius:5px ;
}

header{
	width:100%;
	max-width:1375px;
	text-align:center;
	margin:0 auto;
	background: url(../images/bg-header.png) left bottom repeat-x;
	padding-bottom:40px;
}

header .social{
	display:block;
}

header a.tel{
	display:inline-block;
	text-align:left;
}
header a.tel span{
	background: url(../images/phone-header.png) left center no-repeat;
	display:block;
	font-size:25px;
	padding:10px 0 10px 40px;
}

header a.fb{
	background:#fff;
	border:4px solid #21ACA5;
	width:40px;
	height:40px;
	line-height:36px;
	border-radius:40px;
	display:inline-block;
	vertical-align:top;
	margin-left:20px;
	  -webkit-transition : border 500ms ease-out;
	  -moz-transition : border 500ms ease-out;
	  -o-transition : border 500ms ease-out;
	  transition : border 500ms ease-out;
}

header a.fb img{
	vertical-align:middle;
}

header a.fb:hover{
	border-color:#206268;
}


header a#logo{
	width:90%;
	display:inline-block;
	text-align:center;
	margin:20px auto;
}

header a#logo img{
	width:100%;
	max-width:373px;
}

header .tools{	display:none;}


@media screen and (min-width: 768px) {
	header{
		padding-bottom:0;
	}

	header a#logo{
		max-width:33%;
	}

	header .social{
		display:inline-block;
		float:left;
		margin-top:50px;
		max-width:33%;
	}

	header .tools{
		display:inline-block;
		float:right;
		margin-top:15px;
		text-align:right;
		max-width:	33%;
	}

	header .flag{
		display:inline-block;
	}

	header .flag.en{
		margin-right:60px;
	}

	header a.reserver{
	background: url(../images/reserver-btn.png) 0 0 no-repeat;
	display:inline-block;
	width:257px;
	height:51px;
	padding-left:10px;
	margin-top:20px;
	}
	header a.reserver:hover{
		text-decoration:underline;
		color:#fff;
	}

	header .tools a.reserver span{
		background: url(../images/contact-ico.png) center left no-repeat;
		padding-left:45px;
		display:block;
		color:#fff;
		font-size:20px;
		height:51px;
		line-height:51px;
		text-align:left;
	}


}

@media screen and (max-width: 900px) {
	header a.reserver{
	display:none;
	}

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



#menuToggle{
  z-index: 1000;
  -webkit-user-select: none;
  user-select: none;
  width:100%;
  position:absolute;
  margin-top:-30px;
}
@media screen and (min-width: 768px) {
	#menuToggle{
	   margin-top:0px;
	}
}


#menuToggle input[type="checkbox"]{
  display: block;
  width: 68px;
  height: 68px;
  position: absolute;
  top: 0;
  left: 43%;
  cursor: pointer;
  opacity: 0; /* hide this */
  -webkit-touch-callout: none;
   z-index:101;
}

#menuToggle input[type="checkbox"] + label {
	width: 68px;
	height: 25px;
	display:block;
	margin:0 auto;
	position:relative;
	cursor:pointer;
}

 #menuToggle input[type="checkbox"] + label:before {
      content: " ";
      display: inline-block;
	  width: 60px;
	  height: 60px;
      position: absolute;
	  top: 0;
	  left: 0;
      background: #3FC3D0;
	  border-radius:60px;
	  border:4px solid #fff;
	  z-index:99;
 }


#menuToggle input[type="checkbox"]:checked + label:before {
      background-position: -30px -30px;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin: 0 auto 5px auto;
  position: relative;
  background: #fff;
  border-radius: 3px;
  z-index: 100;
  transform-origin:5px 10px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}


#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 5px 80%;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-4px, -1px);
  background: #fff;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(5px, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu{
  display:block;
  position: relative;
  width: 100%;
  margin: -110px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
   z-index:50;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li{
  padding: 10px 0;
  font-size: 22px;
  display:block;
}

#menu li strong{
  font-weight:normal;
  color: #197B7A;
}

#menu li ul li a{
  font-size: 20px;
  color:#666;
}

#menu li ul li {
  padding:0 0 7px 0;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}


@media screen and (min-width: 768px) {
	#menuToggle{
		width:100%;
		background: url(../images/nav-bg.jpg) left center repeat-x #fff;
	}
	#menuToggle input[type="checkbox"]{ display: none}
	#menuToggle input[type="checkbox"] + label {display: none}

	#menuToggle span{  display: none }

	#menu{
	  display:inline-block;
	  margin:0 auto;
	  background: url(../images/circle-bg.jpg) right center no-repeat #fff;
	  text-align:center;
	  transform-origin: none;
	  transform: none;
	  transition: none;
	  max-width:1200px;
	  width:auto;
	  padding:0;
	}

	#menu li{
	  display:block;
	  display:inline-block;
	  background: url(../images/li-bg.jpg) left center no-repeat;
	}

	#menu li:first-child{
		display:inline-block;
		background: url(../images/circle-bg.jpg) left center no-repeat;
	}

	#menu li a, #menu li strong{
		color:#7B7B7B;
		font-size:18px;
		padding:5px 15px 5px 20px;
		font-weight:500;
	}

	#menu li:last-child a{
		padding-right:30px
	}

	#menu li a:hover, #menu li strong:hover{
		color:#24ADA6;
	}

	#menu li ul{
		display:none;
		position:relative;
	}
	#menu li:hover > ul{
		display:block;
		position:absolute;
		left:20px;
		top:38px;
		background: url(../images/bg-ss-nav.png) center top no-repeat;
		min-width:207px;
		padding:20px 20px 0 20px;
	}

	#menu li:hover > ul > li{
		display:block;
		border-bottom:1px solid #666666;
		background:none;
	}

	#menu li:hover > ul > li:last-child{
		border-bottom:none;
		padding-bottom:20px;
	}

	#menu li > ul > li > a{
		color:#fff;
	}
}

@media screen and (min-width: 1000px) {
	nav{height:47px;}
	#menu li a, #menu li strong{
		font-size:21px;
		padding:5px 35px 5px 40px;
	}

	#menu li:last-child a{
		padding-right:40px
	}
}

/**DIAPO HOMEPAGE**/
.diapo{display:none;}

@media screen and (min-width: 768px) {
	.diapo{position:relative; display:block;}
	.border{position:absolute; top:0; left:0; background:#fff; opacity:0.5; width:100%; height:6px;}
	.slider {
	  width: 100%;
	  max-width: 2000px;
	  height: 500px;
	  margin: 0 auto;
	  position: relative;
	}
	.slide1,.slide2,.slide3,.slide4,.slide5 {
	  position: absolute;
	  width: 100%;
	  height: 100%;

	}
	.slide1 {
		background: url(../images/diapo01.jpg) center center no-repeat;
		background-size: cover;
		animation:fade 8s infinite;
		-webkit-animation:fade 8s infinite;

	}
	.slide2 {
		background: url(../images/diapo02.jpg) center center no-repeat;
		background-size: cover;
		animation:fade2 8s infinite;
		-webkit-animation:fade2 8s infinite;
	}
	.slide3 {
		background: url(../images/diapo03.jpg) center center no-repeat;
		background-size: cover;
		animation:fade3 8s infinite;
		-webkit-animation:fade3 8s infinite;
	}

	@keyframes fade
	{
	  0%   {opacity:1}
	  33.333% { opacity: 0}
	  66.666% { opacity: 0}
	  100% { opacity: 1}
	}

	@keyframes fade2
	{
	  0%   {opacity:0}
	  33.333% { opacity: 1}
	  66.666% { opacity: 0 }
	  100% { opacity: 0}
	}

	@keyframes fade3
	{
	  0%   {opacity:0}
	  33.333% { opacity: 0}
	  66.666% { opacity: 1}
	  100% { opacity: 0}
	}
}



.wrap{
	width:96%;
	padding:10px 2%;
	position:relative;
}

.wrap.p-0{
	width:100%;
	padding:0;

}
.page{
	width:96%;
	padding:10px 2%;
	max-width:1320px;
	margin:0 auto;
}
.col-2{
	margin:20px 0;
}

.bg-bleu{
	background: url(../images/bg-bleu.jpg) 0 0 repeat;
	color:#fff;
}
.wrap.bg-gris{
	background: url(../images/bg-gris.jpg) 0 0 repeat;
	color:#fff;
	padding-top:50px;
}
.bg-gris:before{
	display:block;
	width:184px;
	height:67px;
	background: url(../images/masque-gris.png) center top no-repeat;
	content: " ";
	position:absolute;
	top:-40px;
	left:30%;
}

.bg-gris.no-motif:before{
	display:none !important;
}

@media screen and (min-width: 768px) {
	.bg-gris:before{
		left:45%;
	}
}


.bg-bleu a{
	color:#fff;
	border-bottom:2px dotted #fff;
}

.bg-bleu a:hover{
	color:#fff;
	border-bottom:2px solid #fff;
}

@media screen and (min-width: 768px) {
	.col-2{
		width:46%;
		margin:10px 1%;
		display:inline-block;
		vertical-align:top;
	}
}


@media screen and (min-width: 768px) {
	.presentation:before{
		display:block;
		width:184px;
		height:67px;
		background: url(../images/masque-bleu.png) center top no-repeat;
		content: " ";
		position:absolute;
		top:-40px;
		left:45%;
	}
}

#home .presentation{
	padding-top:50px;
}

#home .chambres{
	background: url(../images/lit-ico.jpg) center 20px no-repeat #f6f6f6;
	padding-top:50px;
}

#home .chambres img.responsive-img{
	margin-bottom:20px;
}

#home .chambres p{
	text-align:center;
	font-size:18px;
	color:#717171;
}

#home .chambres a.plus{
	float:right;
}

.image.crop{
	max-height:280px;
	overflow:hidden;
	border-radius:4px;
}

p.date{
	background: url(../images/calendar-ico.jpg) left center no-repeat;
	color:#24ABA4;
	font-size:18px;
	padding-left:30px;
	margin-bottom:10px;
	padding-bottom:3px;
}

.actualites a.plus{
	float:left;
	margin-top:30px;
}

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

.flexslider{
	text-align:left;
}



.flex-control-nav li{
	display:inline-block !important;
	margin:10px !important;
	line-height:18px;
	border-radius:24px;
	text-align:center;
	border:2px solid #ddd !important;
}

.flex-control-paging li a.flex-active{
	background: #9FD3AC !important;
	border:2px solid #fff !important;
	margin:3px;
}

.flex-control-paging li a{
	display:block !important;
	background:none !important;
	box-shadow:none !important;
	border:2px solid #fff !important;
	padding:2px;
}

.flex-active-slide{
	background:#fff;
}

.flex-direction-nav{
	display:none
}
@media screen and (min-width: 768px) {
	.flexslider .slides{
		width:95%;
		display:inline-block;
	}

	.flex-control-paging{
		display:inline-block;
		background:#fff;
		width:8% !important;
		top:50px !important;
		max-width:30px;
	}

	.flex-control-nav li{
		margin:10px auto!important;
	}

}

.fancybox{
	position:relative;
	display:block;
}

.fancybox:before{
	display:block;
	width:56px;
	height:56px;
	background: url(../images/zoom.png) center top no-repeat;
	content: " ";
	position:absolute;
	bottom:25px;
	right:30px;
	z-index:120;
}




/***Contact Bottom **/
.contact.bg-gris{
	text-align:left;
}

.bg-gris h4{
	color:#fff;
	text-align:center;
	background: url(../images/bg-h2.png) bottom center no-repeat;
	font-size:20px;
	text-transform:uppercase;
	margin-bottom:30px;
	padding-bottom:10px;

}

.bg-gris address{
	color:#fff;
	text-align:left;
	background: url(../images/map-ico.png) 12px center no-repeat;
	font-size:16px;
	text-transform:uppercase;
	margin-bottom:20px;
	padding-left:50px;
	font-style:normal
}

.bg-gris .tel{
	display:inline-block;
	color:#fff;
	text-align:left;
	background: url(../images/smartphone-ico.png) 16px center no-repeat;
	font-size:22px;
	text-transform:uppercase;
	margin-bottom:20px;
	padding-left:50px;
	font-style:normal
}

.bg-gris .mail{
	display:inline-block;
	color:#24ADA6;
	text-align:left;
	background: url(../images/mail-ico.png) left center no-repeat;
	font-size:16px;
	margin-bottom:20px;
	padding-left:50px;
	font-style:normal;
	border-bottom:3px dotted #24ADA6;
}
@media screen and (min-width: 768px) {
	.bg-gris h4{
		font-size:30px;
		margin-bottom:60px;
	}

	.bg-gris address{
		font-size:22px;
	}

	.bg-gris .tel{
		font-size:32px;
	}

	.bg-gris .mail{
		font-size:22px;
	}
}


.contact form{
	width:100%;
	font-size:20px;
	font-weight:500;
}

.contact form table{
	width:100%;
}

.contact form table tr td{
	width:100%;
	display:block;
}

.contact form tr{
	padding-bottom:30px;
	display:block
}

.contact form input{
	display:inline-block;
	background:none;
	border:none;
	border-bottom:1px solid #fff;
	font-size:16px;
	color:#fff;
	font-family: 'Museo', sans-serif;
	padding-bottom:5px;
	margin-bottom:10px;
	font-weight:500;
}

.contact form .col-1{
	display:inline-block;
	width:94%;
}

.contact form .col-2{
	display:inline-block;
	width:46%;
	margin:0 2% 0 0;
}

.contact form .col-3{
	display:inline-block;
	width:30%;
	margin:0 1% 0 1%;
}

.contact form strong{
	font-size:16px;
	color:#25ACA6;
	text-transform:uppercase;
	font-weight:500
}

.contact form .col-3 label{
	display:inlien-block;
	font-size:18px;
	float:left;
	margin-right:5px;
}

.contact form .col-3 .quantity{
	display:inlien-block;
	float:left;
}

.contact form .col-3.quant label{
	line-height:40px;
}

.quantity {
  position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]{
  -moz-appearance: textfield;  background:#fff !important; color:#000 !important;
}

.contact form  .quantity input {
  width: 50px;
  height: 41px;
  line-height: 1.6;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 10px;
  padding-bottom: 0px;
  border: none;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 40px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #25ACA6;
  width: 20px;
  text-align: center;
  color: #25ACA6;
  font-size: 13px;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
}

.contact form input.calendar{
	background: url(../images/calendar2-ico.jpg) right center #fff no-repeat;
	width:100%;
	padding:10px 5px;
	color:#000;
	font-size:16px;
}

.contact form input[type=submit]{
	background: #25ACA6;
	border:none;
	padding:10px 10px 11px 10px;
	width:100%;
	cursor:pointer;
	font-size:18px;
}

.contact form input[type=submit]:hover{
	background:#1A7D7A;
}


@media screen and (max-width: 768px) {
	.contact form .col-3.col-100{
		width:98%;
		margin-left:0;
	}

	.contact form .col-3.col-50{
		width:46%;
		margin:0 2% 0 0;
	}
}

@media screen and (min-width: 768px) {
	.contact form strong{
		font-size:20px;
	}

	.contact form input{
		font-size:20px;
	}
}


footer{
	text-align:center;
	color: #25ACA6;
	padding:30px 0;
}

footer p{
	text-align:center;
	margin:10px 0;
}

footer a:hover{
	text-decoration:underline
}



/**PAge de COTNENU**/
p.chapeau{
	color:#fff;
	text-align:center;
	font-size:22px;
	font-weight:300;
	margin-bottom:30px;
}

p.no{
	color:#666;
}


.flex-chambre .slides li img {
	border-radius:8px
}

.flex-chambre .flex-control-nav {
	max-height:614px
}


@media screen and (min-width: 768px) {
	.flex-chambre .slides  {
		width:70%;
		float:left;
		margin-bottom:70px;
	}

	.flex-chambre .flex-control-nav {
		float:right;
		width:25%;
		margin-left:5%;
		max-height:614px
	}
}


.flex-active-slide{
	background:none;
}

.flex-chambre .flex-control-thumbs  {
	margin-top:0;
}

.flex-chambre .flex-control-thumbs li {
	border:none !important;
}

@media screen and (min-width: 768px) {
	.flex-chambre .flex-control-thumbs li {
		float:none;
		display:block !important;
		margin:0 0 20px 0 !important;
		border:none !important;
		width:100%;
		max-height:165px;
		overflow:hidden;
		border-radius:4px;
	}
}
.services h5{
	margin-left:5%
}
.services p{
	font-size:20px;
	line-height:40px;
	font-style:italic;
	margin:20px 0;
}

.services .picnic {
	line-height: 20px;
}

.exterieurs{
	background: url(../images/ext-ico.jpg) center 20px no-repeat #fff;
	padding-top:70px;
	padding-bottom:50px;
}

.exterieurs p{
	font-size:18px;
	line-height:26px;
	font-weight:300;
	font-style:italic;
}

.exterieurs p strong{
	font-weight:500;
}

.avis .col-2{
	margin:40px 1%;

}
.avis p strong{
	font-size:28px;
	font-weight:300;
	padding:5px 0 0 40px;
	color:#25ACA6;
	background: url(../images/guillemet.png) 0 0 no-repeat;

}

.float-right{display:block;}
@media screen and (min-width: 768px) {
   .float-right{float:right; display:inline-block;}
}

/* Messages d'alerte */
.fielderror { background:#FFC!important; }
.warning {
	color: #000;
	background-color: #FF9;
	padding: 10px;
	border: 2px dashed #FC0;
	margin:0;
}
.ok {
	color: #000;
	background-color: #6F6;
	text-align: left;
	padding: 10px;
	border: 2px dashed #3C0;
	margin:0;
}
.erreur {
	color: #000;
	background-color: #F99;
	text-align: left;
	padding: 10px;
	border: 2px dashed #F00;
	margin:0;
}

#ui-datepicker-div .highlight { background:red; }
#ui-datepicker-div .highlight a { color:#fff; }