body {margin: 0; padding: 0; background: url(images/foret.jpg) no-repeat fixed; font-family: "Hanken" }

@font-face{
    font-family : "Hanken";
    src : url('police/gothic.ttf');
}

p,a,li,ul,h1,h2,h3,h4,h5 {margin: 0; padding: 0; color:#fff; list-style: none; text-decoration: none;}



/*Antispam */ 
.remarque
	{
		display:none
	}
/*fin Antispam */ button



.ajust
{
	clear:both;
}

.mini_cadre
	{
		float:right; 
		width:35%; 
		padding:15px; 
		background:#5299C1;
		border-radius: 10px 0;
		color:#fff;
	}
	
.mini_cadre2
	{
		float:left; 
		width:57%; 
		padding:15px; 
		background:#5299C1;
		border-radius: 10px;
		color:#fff;
	}

.table_contact input[type="text"], input[type="password"], textarea
	{

		width:95%;
		border:1px solid #CCC;
		padding:10px;
		
	}
.table_contact select
	{
		border:1px solid #CCC;
		padding:5px;
	}
	
	
.table_contact
	{
		margin-top:15px;
		
		padding:15px;
		
		color:#fff;
	}
	
.table_contact td
{
		vertical-align:top;
		text-align:left;
}



.conteneur {width: 80%; float: left; margin: 0 0 0 10%; }

header {float: left; width: 100%; height: 100%; background: url(images/bg-header2.png) no-repeat 10% 100%; background-size: 100%; background-position: top; margin: 0; padding: 0; z-index: 3; position: relative;}
header#acc {float: left; width: 100%; height: 100%; background: url(images/bg-header-acc.png) no-repeat 10% 100%; background-size: 100%; background-position: top; margin: 0; padding: 0; z-index: 3; position: relative;}
header#loc {float: left; width: 100%; height: 100%; background: url(images/bg-header.png) no-repeat 10% 100%; background-size: 100%;  background-position: top;  margin: 0; padding: 0; z-index: 3; position: relative;}
header#ach {float: left; width: 100%; height: 100%; background: url(images/bg-header-ach.png) no-repeat 10% 100%; background-size: 100%;  background-position: top;  margin: 0; padding: 0; z-index: 3; position: relative;}
header#tar {float: left; width: 100%; height: 100%; background: url(images/bg-header-tar.png) no-repeat 10% 100%; background-size: 100%;  background-position: top;  margin: 0; padding: 0; z-index: 3; position: relative;}

header nav {background: rgba(255,255,255,0.9); float: left; width: 80%; margin: 0; padding: 0; position: fixed; z-index: 10;}
header nav ul {margin: 0 ; padding: 0; float: left;width: 100%;}
header nav ul li {float:left; margin: 0 ; padding: 0;  }
header nav ul li a {color: #5aacce; padding: 2em; float: left; }
header nav ul li a:hover {color: #006b93; 
	transition: 0.3s all ease;
	-webkit-transition : 0.3s all ease;
	-moz-transition : 0.3s all ease; }

.l-b { width: 100%; padding: 0; margin:  0 0 40% 0;}
.l-b div{float: left; padding:  10% 0; width: 50%; margin: 0; text-align: center; }
.l-b button {margin:15% 0 0 25%; background-color: #7cc242; color: #fff; border-radius: 10px; border: none; padding: 3% 1%; width: 40%; font-size: 20px; cursor: pointer; float: left;

-moz-box-shadow: 0px 5px 5px 0px #808080;
-webkit-box-shadow: 0px 5px 5px 0px #808080;
-o-box-shadow: 0px 5px 5px 0px #808080;
box-shadow: 0px 5px 5px 0px #808080;}







.content {float: left;width: 100%; height: 100%; margin: 0; padding: 0;}

/* Page d'accueil */ 

#first {background-color: #006b93; padding: 20% 8% 2% 8%; float: left; z-index: 1; margin:-20% 0 0 0; position: relative;}
#fisrt ul {margin: 0; padding: 0 0 0 10%; width: 100%; float: left;}
#first ul li {width: 55%; float: left; padding: 0 0 0 4%;}
#first ul li p {font-size: 20px;}
#first ul li p.atout {font-size: 15px;}
#first ul h1 { font-size: 48px; padding: 0 0 2% 0;}
#first ul h1 img {vertical-align: middle;}
#hist {background: url(images/bg-hist.png); float: left; width: 100%; background-size: 100% 100%; background-repeat: no-repeat;}
#hist h3 {text-align: center; padding: 2% 0; width: 100%; font-size: 35px; float: left; }
#first li.presa {text-align: center; width: 20%; float: left; padding: 0}
#first li.presa2{text-align: center; width: 20%; float: left;}
#first li.presa3{text-align: center; width: 45%; float: left;}

#first #atout1 {margin: 0; padding:0 0 5% 0;float: left;width: 100%;}
#first #atout1 h1 {font-size: 48px; padding: 0 0 2% 0; }
#first #atout h1 img {vertical-align: middle;}
#first #atout1 ul {width: 70%; padding: 0 0 0 3%; float: left;}
#first #atout1 ul li {padding: 1% 0; list-style-image: url(images/feuille-list.png); float: left; width: auto;}
#first #atout1 ul li .text-atout {margin: 0; padding:0;float: left;width: 100%; font-size: 20px; }
#first #atout1 ul li .text-atout img {vertical-align: middle;}
#first #atout1 .ph-ro {width: 25%; float: left;  padding: 0;}
#first #atout1 .ph-ro li {padding: 1% 0; float: left; width: auto;list-style: none;}

#first #atout2 {margin: 0; padding:5% 0 0 0;float: left;width: 100%; border-top: 1px solid #fff;}
#first #atout2 ul {width: 25%; float: left;padding: 0;}
#first #atout2 ul li {width: 100%; padding: 2%;}
#first #atout2 h3 {font-size: 25px; padding-bottom: 5%;}
#first #atout2 .droite {width: 70%; padding: 0; float: left;}
#first #atout2 li .text-atout {margin: 0; padding:0;float: left;width: 100%; font-size: 20px; }

#first #location {margin: 0; padding:0 0 5% 0;float: left;width: 100%;}
#first #location li {width: 80%; float: left; padding: 0 0 0 5%;}
#first #location li .text-atout {margin: 0; padding:0;float: left;width: 100%; font-size: 18px; }

/* End */



/* Page Location */

#first2:first-child {background-color: #006b93; padding: 18% 8% 2% 8%; float: left; z-index: 1; margin:-20% 0 0 0; position: relative;}
#first2 {background-color: #006b93; padding: 5% 8% 2% 8%; float: left; z-index: 1; margin:0; position: relative;width: 84% }
#first2 h1 {font-size: 48px; padding : 0 0 2% 0;}
#first2 h1 img {vertical-align: middle;}
#first2 ul {width: 40%; float: left;margin: 0; padding: 0;}
#first2 ul li {width: 100%; float: left;}
#first2 ul li img {width: 100%;}
#first2 div {width: 50%; float: left; padding:  0 2%}
#first2 div h3 {font-size: 30px; margin-bottom: 5%;}
#first2 div p {font-size: 20px;}

#white-content2 { float: left;background-color: #fff; padding: 5% 8% 2% 8%; position: relative; }
#white-content2 h1 {font-size: 50px; margin-bottom: 5%;}
#white-content2 ul {width: 40%; float: left;margin: 0; padding: 0;}
#white-content2 ul li {width: 100%; float: left;}
#white-content2 ul li img {width: 100%;}
#white-content2 div {width: 50%; float: left; padding:  0 2%}
#white-content2 div h3 {font-size: 30px; margin-bottom: 5%; color: #006b93;}
#white-content2 div p {font-size: 20px; color: #006b93;}

.title-condition {width: 100%; padding: 2% 0; background-color: #fff; float: left; }
.title-condition h2 {color: #7cc242; text-align: center;}
.title-condition h4 {color: #7cc242; text-align: center;}

#green-content2 {padding: 5% 8% 2% 8%; float: left; background-color: #7cc242; position: relative;}
#green-content2 p {width: 80%; padding: 2% 10%; border-bottom: 1px solid #7cc242; float: left; font-size: 20px;}

/* End */

/* Page achats */

#first3 {background-color: #006b93; padding: 23% 8% 2% 8%; float: left; z-index: 2; margin:-20% 0 0 0; position: relative;}
#first3 h1 {font-size: 48px; padding: 0 0 2% 0; }
#first3 h1 img {vertical-align: middle;}
#first3 .click {position: relative; float: left;}
#first3 .click ul {width: 16%; padding: 1%; float: left; cursor: pointer; background-color: #5299C1; margin: 0 1%; border-radius: 25px 0;}
#first3 .click ul li { width: 100%;}
#first3 .click h3 {text-align: center; padding: 10% 0; font-size: 18px}
#first3 .click ul li h3 img {vertical-align: middle; width: 20%;}
#first3 .click ul li img {width: 100%; float: left; height: auto; border-radius: 25px;}

#white-content3 { float: left;background-color: #fff; width: 100%; position: relative; margin: 0; padding: 0;}
#white-content3 a {float: left;}
#white-content3 .galerie {width: 50%; float: left;}
#white-content3 .galerie img {width: 100%;}
#white-content3 .caracteristique {width: 50%; float: left; padding: 5% 0 0 0;}
#white-content3 .caracteristique h3 {color: #7cc242; font-size: 30px; text-align: center; padding: 5% 0 ;}
#white-content3 .caracteristique p { color: #7cc242; padding: 5%; font-size: 20px;}

#white-content3-2 { float: left;background-color: #7cc242; width: 100%; position: relative;margin: 0; padding: 0; }
#white-content3-2 .galerie {width: 50%; float: left;}
#white-content3-2 .galerie img {width: 100%;}
#white-content3-2 .caracteristique {width: 50%; float: left; padding: 5% 0 0 0;}
#white-content3-2 .caracteristique h3 {color: #fff; font-size: 30px; text-align: center; padding: 5% 0 ;}
#white-content3-2 .caracteristique p { color: #fff; padding: 5%; font-size: 20px;}


.title-condition2 {width: 100%; padding: 2% 0; background-color: #7cc242; float: left;  border-bottom: 1px solid #fff;}
.title-condition2 h2 {color: #fff; text-align: center;}
.title-condition2 h4 {color: #fff; text-align: center;}

/* End */

/* Image ronde */

.cercle {border-radius: 125px; width: 250px; height: 250px; opacity: 0.8; 
	-moz-box-shadow: 6px 10px 5px 0px #006185;
-webkit-box-shadow: 6px 10px 5px 0px #006185;
-o-box-shadow: 6px 10px 5px 0px #006185;
box-shadow: 6px 10px 5px 0px #006185; }
.cercle2 {border-radius: 125px; width: 250px; height: 250px; opacity: 0.8; 
	-moz-box-shadow: 6px 10px 5px 0px #507e2a;
-webkit-box-shadow: 6px 10px 5px 0px #507e2a;
-o-box-shadow: 6px 10px 5px 0px #507e2a;
box-shadow: 6px 10px 5px 0px #507e2a; }

.cercle3 {border-radius: 100px; width: 200px; height: 200px; opacity: 0.8; 
	-moz-box-shadow: 6px 10px 5px 0px #006185;
-webkit-box-shadow: 6px 10px 5px 0px #006185;
-o-box-shadow: 6px 10px 5px 0px #006185;
box-shadow: 6px 10px 5px 0px #006185; }

.separateur {width: 100%; background-color: #006b93; border-bottom-right-radius : 80%; border-bottom-left-radius : 80%;}

/* End */

/* Page Tarifs */

#white-content .white-p2 {width: 80%; padding: 2% 10%;  float: left; text-align: center;}
#white-content .white-p2 a {color: #7cc242; border-bottom: 1px solid #7cc242;}

/* Tableau */

table {border: none; padding: 0; margin: 0;}
table td {text-align: center; padding: 2% 0; font-size: 15px; border: none;}
.green {background-color: #7cc242; border: none; padding: 0; width: 1%;}
.white {background-color: #fff; color: #7cc242; border: 1px solid #fff;}
.hidden {border: none;}
.mini {font-size: 12px;}
.empty {background-color: #5299C1;}
.grey {background-color: #004C74; color: #f5f5f5;}

.infos-tarif {text-align: center ; padding: 2% 0; }

/* End Tableau */

/* End */


#second {float: left;  width: 100% ; z-index: -2; height: 250px; position: relative;}
.parallax-window {height: 550px; margin: -12% 0 0 0; padding-top: 7%; width: 100%;}
#second .parallax-window p {font-size: 20px; width: 80%; margin: 2% 10%; text-align: center;}


#white-content { float: left;width: 100%; background-color: #fff; padding: 2% 0 ;}
#white-content h3 {text-align: center; color: #7cc242; padding: 0 0 0 0; font-size: 30px;}
#white-content #loisirs {text-align: center; margin: 0 0 0 0; border-top: 1px solid #7cc242; float: left; width: 100%; padding: 2% 0 0 0;}
#white-content .white-p {width: 80%; padding: 2% 10%;  float: left;}
#white-content .logement {color: #7cc242; font-size: 20px;}



#white-content button {margin:2% 0 0 30%; background-color: #7cc242; color: #fff; border-radius: 10px; border: none; padding: 1% 0; width: 40%; font-size: 20px; cursor: pointer; float: left;

-moz-box-shadow: 0px 5px 5px 0px #aaa;
-webkit-box-shadow: 0px 5px 5px 0px #aaa;
-o-box-shadow: 0px 5px 5px 0px #aaa;
box-shadow: 0px 5px 5px 0px #aaa;}

#third {background-color: #7cc242; width: 100%; float: left; padding: 0 0 5% 0;}
#atout {background: url(images/bg-atout.png); float: left; width: 100%; background-size: 100% 103%; background-repeat: no-repeat;}
#atout h3 {text-align: center; padding: 2% 0 0.9% 0; width: 100%; font-size: 35px; float: left; }
#third h4 {font-size: 25px; text-align: center; margin-bottom: 5%; border-bottom: 1px solid #fff;}
#third button {margin: 2% 40% ; background-color: #fff; color: #7cc242; border-radius: 10px; border: none; padding: 1% 0; width: 20%; font-size: 20px; cursor: pointer;

-moz-box-shadow: 0px 5px 5px 0px #aaa;
-webkit-box-shadow: 0px 5px 5px 0px #aaa;
-o-box-shadow: 0px 5px 5px 0px #aaa;
box-shadow: 0px 5px 5px 0px #aaa;}


/* Page Atouts */

#green-content {padding: 2% 0 2% 0%; float: left; background-color: #7cc242; width: 100%;}
#green-content #green-p {width: 80%; padding: 2% 10%; border-bottom: 1px solid #7cc242; float: left;}
#green-content #green-p li.presa2{text-align: center; width: 20%; float: left;} 
#green-content #green-p li {width: 65%; float: left; padding: 0 0 0 5%;}
#green-content #green-p li .text-atout2 {margin: 0; padding:0;float: left;width: 100%; font-size: 20px; }

/* End */


.bouton {width: 100%; float: left;margin: 0;}


.atouts {width: 40%; padding: 2% 4% 2% 6%; float: left; border-right: 1px solid #fff;}
.atouts2 {width: 40%; padding: 2% 4%; float: left;}
.atouts img {float: left; padding: 0 7.5%; width: 40%;}
.list {font-size: 20px; padding: 2% 0%; }
.list1 {font-size: 20px; padding: 2% 0%; display: inline-block; }





footer {float: left;width: 100%; height: 100%; background-color: #7cc242; border-top: 1px solid #fff; margin: 0; padding: 0;}
footer ul { margin: 0; padding: 1% 0 2% 37%;}
footer ul li {float: left; padding: 2%;}
footer p {float: left; width: 100%; text-align: center; padding-bottom: 2%;}


@media (max-width: 1500px) {

	#first {margin: -25% 0 0 0;}
	#first ul h1 { font-size: 40px;}
	#first ul li p {font-size: 18px;}

	#third h4 {font-size: 20px;}

	#first #atout1 li .text-atout {margin: 0; padding:0;float: left;width: 100%; font-size: 18px;}
	#first #atout2 li .text-atout {margin: 0; padding:0;float: left;width: 100%; font-size: 18px;}

	#green-content #green-p li {width: 45%; float: left; padding: 0 0 0 15%;}

	p {font-size: 18px;}

	#first #atout2 .droite {padding: 0 0 0 2%;}

	.atouts img {float: left; padding: 0 7.5%; width: 40%;}

	#third h3 {font-size: 25px;}
	#third button {font-size: 18px;}

	#second .parallax-window p {font-size: 18px; padding-top: 5%;}

	.l-b button {font-size: 18px;}

	header nav ul li a {padding: 1em;}

	footer ul {padding: 1% 0 2% 30%;}

	/* Page Location / Achats */

	#first2:first-child {margin:-25% 0 0 0; }

	/* End */

	#first3 {margin:-25% 0 0 0;}
	#first3 .click h3 {font-size: 15px}

	#first #atout1 ul li .text-atout {font-size: 18px;}

	#white-content .logement {font-size: 18px;}

	#green-content #green-p li .text-atout2 {font-size: 18px;}

	#first2 div p {font-size: 18px;}

	#white-content2 div p {font-size: 18px;}

	#green-content2 p {font-size: 18px;}

	#white-content3 .caracteristique p {font-size: 18px;}
	#white-content3-2 .caracteristique p {font-size: 18px;}

	#first #atout1 h1 {font-size: 40px;}

	#first3 h1 {font-size: 40px;}

	#first2 h1 {font-size: 40px;}

}

@media (max-width: 1200px) {

	.conteneur {width: 100%; margin: 0; float: left;}

	header nav {width: 100%;}

	#first {margin: -40% 0 0 0; padding-top: 35%;}
	#first ul h1 {font-size: 35px; }
	#first h1 img {width: 35px;}
	#first ul li p {font-size: 18px;}

	#green-content #green-p li {width: 80%; float: left; padding: 5% 0 0 5%;}

	#green-content #green-p li.presa2 {display: none;}

	p {font-size: 18px;}

	#third h3 {font-size: 24px; padding-bottom: 2%;}
	#third button {font-size: 18px;}

	#second .parallax-window p {font-size: 18px; padding-top: 5%;}

	#hist h3 {font-size: 30px; }

	.atouts {width: 80%; padding: 5% 10%; float: left; }
	.atouts li {width: 100%;}
	.atouts img {width: 20%;}
	.atouts2 {width: 80%; padding: 2% 10%; float: left;}
	#atout h3 {font-size: 30px;}

	.l-b button {font-size: 18px;}

	header nav ul li a {font-size: 15px}

	.cercle {border-radius: 125px; width: 175px; height: 175px;}
	.cercle2 {border-radius: 125px; width: 175px; height: 175px;}
	.cercle3 {border-radius: 125px; width: 175px; height: 175px;}

	footer ul {padding: 1% 0 2% 35%;}

	#first #atout1 h1 {font-size: 35px; }
	#first #atout1 h1 img {width: 35px;}

	#third h4 {font-size: 25px; }

	#first3  h1 {font-size: 35px; }
	#first3 h1 img {width: 35px;}


	/* Page Location / Achats */

	#first2:first-child {margin:-35% 0 0 0;}
	#first2 h1 {font-size: 35px; margin: 10% 0 5% 0;}
	#first2 h1 img {width: 35px;}
	#first2 div h3 {font-size: 25px;}
	#first2 div p {font-size: 20px;}

	#white-content2 h1 {font-size: 35px; text-align: center; margin: 5% 0  ;}
	#white-content2 div h3 {font-size: 25px;}
	#white-content2 div p {font-size: 20px;}

	#green-content2 p {font-size: 20px;}

	/* End */

	#first3 .click h3 {font-size: 15px;}

	#first3 .click ul {width: 40%; padding: 2% 2%; margin: 2% 2.5%;}
	#first3 .click h3 {font-size: 20px;}
	#first3 .click ul li img {width: 100%; margin: 0;}

	#white-content3 .caracteristique h3 {font-size: 25px;}
	#white-content3 .caracteristique h3 img {width: 25px;}
	#white-content3 .caracteristique p {font-size: 20px;}
	#white-content3-2 .caracteristique h3 {font-size: 25px;}
	#white-content3-2 .caracteristique h3 img {width: 25px;}
	#white-content3-2 .caracteristique p {font-size: 20px;}

	.green {font-size: 12px;}
	.white {font-size: 12px;}


}

@media (max-width: 980px) {

	#first #atout2 .droite {padding: 0 ; width: 100%;}
	.cercle { display: none;}
	.cercle2 { display: none;}
	.cercle3 {display: none;}
	#first #atout1 ul {width: auto;}
	#first #atout1 li {width: auto;}
	#first ul li {width: auto;}

@media (max-width: 600px) {

	header {background-color: #006b93}
	header#loc-ach {background-color: #006b93;}
	header nav {width: 100%; position: relative;}
	header nav ul li {}

	.title-condition h2 {font-size: 20px;}
	.title-condition2 h2 {font-size: 20px;}
	.l-b { width: 100%; padding: 0; margin:  0;}
	.l-b div{float: left; padding:   0; width: 100%; margin: 0; text-align: center; }
	.l-b button {margin:0 0 0 32%; background-color: #7cc242;}

	#first {margin: 0 0 0 0; padding: 5% 0 0 0;}
	#first ul h1 {font-size: 30px; text-align: center;}
	#first ul li {width: 95% ; padding: 0 2.5%;}
	#first ul li p { font-size: 15px; }

	#first #atout1 {padding: 2% 5%; width: 90%;}
	#first #atout1 h3 {text-align: center; padding: 5% 0;}

	#first #atout2 {padding: 2% 5%; width: 90%;}
	#first #atout2 h3 {text-align: center; padding: 5% 0;}

	#first #location h3 {text-align: center; padding: 5% 0;}
	#first #location li .text-atout {font-size: 14px;}

	#first ul li.droite {width: 90%; float: left; padding: 0 0 5% 2%; }

	#second .parallax-window p {font-size: 15px; padding-top: 5%;}
		#green-content #green-p li.presa2{display: none;} 

	.cercle {display: none;}

	#first #atout1 ul{padding: 0 0 0 5%; width: auto;}
	#first #atout1 ul li .text-atout {font-size: 15px;}
	#first #atout2 li .text-atout {font-size: 15px;}
	#green-content #green-p li .text-atout2 {font-size: 15px;}

	#third h4 {font-size: 18px;}
	#white-content .logement {font-size: 15px;}

	#first2 div h3 img {width: 30px;}
	#white-content2 div h3 img {width: 30px;}

	#hist h3 {font-size: 25px; }
	#hist h3 img {width: 35px;}
	#atout h3 {font-size:  25px;}
	#atout h3 img {width: 35px;}

	p {font-size: 15px;}

	#third h3 {font-size: 12px; padding-bottom: 2%;}

	#white-content h3 {font-size: 20px;}
	#white-content h3 img {width: 25px;}

	#third button {font-size: 12px;}
	.l-b button {font-size: 12px;}

	#first #atout1 h1 {font-size: 30px;}

	#white-content { padding: 5% 0 ;}
	#white-content button { width: 100%; margin: 5% 0; padding: 5%; font-size: 15px;}

	#green-content #green-p {width: 90%; padding: 5%; }


	footer ul {padding: 1% 0 10% 15%;}

	footer p {font-size: 12px}

	/* Page Location / Achats */

	#first2:first-child {margin:-15% 0 0 0; }
	#first2 h1 {font-size: 30px; text-align: center; margin: 5% 0  ;}
	#first2 div h3 {font-size: 20px;}
	#first2 div p {font-size: 15px;}

	#white-content2 h1 {font-size: 30px; text-align: center; margin: 5% 0  ;}
	#white-content2 div h3 {font-size: 20px;}
	#white-content2 div p {font-size: 15px;}

	#green-content2 p {font-size: 15px;}

	/* End */

	/* Page achats */

#first3 {margin:-75% 0 0 0; padding: 85% 0 0 0;}
#first3 h1 {text-align: center; font-size: 30px;}
#first3 .click ul {width: 40%; padding: 5% 2%;}
#first3 .click h3 {font-size: 20px; padding: 2% 0;}
#first3 .click ul li img {width: 90%; margin: 0 5%;}


#white-content3 .caracteristique {width: 50%; float: left;}
#white-content3 .caracteristique h3 {font-size: 15px;}
#white-content3 .caracteristique h3 img {width: 20px;}
#white-content3 .caracteristique p {font-size: 12px;}

#white-content3-2 .caracteristique {width: 50%; float: left;}
#white-content3-2 .caracteristique h3 {font-size: 15px;}
#white-content3-2 .caracteristique h3 img {width: 20px;}
#white-content3-2 .caracteristique p {font-size: 12px;}


/* End */

}