@charset"utf-8";
/*CSSDocument*/
/* a:link {  color: #17BCCF} */
#page {
	position:absolute;
	width:100%;
	z-index:52;
	background-color: #FFFFFF;
	overflow: visible;
	visibility: visible;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#cadre {
	position:relative;
	/* width:1148px; */
	z-index:3;
	background-color: #ffffff;
	text-align: center;
	margin-left: auto;
	margin-right: auto;

}
#header {
	position:relative;
	width:1148px;
	height:246px;
	z-index:2;
	margin-left: auto;
 margin-right: auto;
}
#slide {
background-image: url(grafiq/home-2010/fond-degrade-bleu.jpg);
}
.logo_cote
{
	position: absolute;
	left: 52px;
	width: 1000px;
	height: 54px;
	top: 79px;
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	font-size:90px;
	color:#FFFFFF;
	text-decoration:none;
	text-align:center;
	letter-spacing: 5px;
	text-shadow: 2px 2px #222;
	z-index: 3;
}

#clavier
	{
	display:inline-block;
	position: absolute;
    left: 700px;
    width: 400px;
    height: 60px;
    float: left;
    padding-right: 30px;
    text-align: right;
    margin-top: 20px;
    z-index: 100;
	}
	
	#corps_page1 {
	width: 100%;
    /* background-color: #F60; */
    max-width: 1146px;
    margin-left: auto;
    margin-right: auto;
	}
#left {
	position:relative;
	display:block;
	float:left; 
	width: 800px;
	padding-top: 20px;
	text-align:left;
	background-color:#ffffff;
}
#left_village {
	position:relative;
	display:block;
	float:left; 
	width: 800px;
	text-align:left;
	background-color:#ffffff;
}

#right {
    display: inline-block;
    width: 300px;
	height:1920px;
    text-align: left;
    overflow: visible;
    visibility: visible;
    /* background-color: #C96; */
    margin-left: 30px;

}
.pubs_droite {
	width:300px;
}
#droite_responsive {
	visibility:hidden;
	display:none;
	
}

#menu {
	position:relative;
	width:1146px;
	margin-left:auto;
	margin-right:auto;
	padding-top:20px;
	z-index:52;
	height: 140px;
	visibility: visible;
	overflow: visible;
}


.menutd {
text-align: left;
	border-right: 2px;
	border-left: 2px;
	border-top: 0px;
	border-bottom: 0px;
	border-style:solid;
 	border-color: #FFC20E;
	background-color:#FFFFFF;
	opacity: 0.85;
}
.topmenu {
 font-size: 0 ;
 line-height: 0 ;
} 

#menu_small {
	display: none;
}
#bas_small {
	position:relative;
	width:100%;
	height:260px;
	z-index:28;
	top: 28px;
	display : none;
	background-color: #FFFDEB;
	left: -10px;
	display: none;
}

.visuel_banniere
{
	width:300px;
	height:180px;
}
.visuel_banniere_youtube
{
	width:300px;
	height:180px;
}
 
.spacer_home
{
	width:560px;
	height:20px;
}

#corps_page2{
	margin-left:auto;
	margin-right:auto;
	    max-width: 1146px;
}
#menuhoriz {
	position:absolute;
	width:1149px;
	height:40px;
	z-index:2;
	top: 420px;
	visibility: visible;
}
#menuhoriz2 {
	position:absolute;
	width:800px;
	height:40px;
	z-index:2;
	top: 1230px;
	visibility: visible;
}
#menuhoriz3 {
	position:relative;
	width:1149px;
	height:40px;
	z-index:2;
	visibility: visible;
}
.newmenu {
	font-family: "Open Sans", Monaco, monospace;
	font-size: 30px;
	text-align:center;
	color: #FFF;
	line-height: 40px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	text-decoration: none;
}

.titres {
	font-family: "Cabin", Geneva, sans-serif;
	font-size: 36px;
	font-weight: 200;
}
.soustitre {
	font-family: "Cabin", Geneva, sans-serif;
	font-size: 24px;
	font-weight: 200;
	text-decoration: none;
	color: #0e0e0e;
}
.textban {
	font-family: "Open Sans", Geneva, sans-serif;
	font-size: 18px;
	font-weight: 400;
}
.baner_1 {
    position: absolute;
    width: 800px;
    height: 355px;
    text-align: left;
    margin-top: -230px;
    padding-left: 10px;
    top: 451px;
}
.baner_2 {
    width: 800px;
    height: 183px;
    text-align: left;
    margin-top: -30px;
    padding-left: 5px;
}
.baner_3 {
    width: 800px;
    height: 183px;
    text-align: left;
    margin-top: 20px;
    padding-left: 5px;
}
.baner_4 {
    width: 800px;
    height: 183px;
    text-align: left;
    margin-top: 20px;
    padding-left: 5px;
}
.baner_5 {
    width: 800px;
    height: 183px;
    text-align: left;
    margin-top: 20px;
    padding-left: 5px;
}
.baner_6 {
    width: 800px;
    height: 183px;
    text-align: left;
    margin-top: 20px;
    padding-left: 5px;
}
.baner_7 {
    width: 800px;
    height: 183px;
    text-align: left;
    margin-top: 20px;
    padding-left: 5px;
}
.baner_8 {
    width: 800px;
    height: 183px;
    text-align: left;
    margin-top: 20px;
    padding-left: 5px;
}
#photo_banniere {
	display:inline-block;
}
#texte_banniere {
	display:inline-block;
}
#hyeres {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 2px;
}
#dormir {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 2px;
}
#lalonde {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 164px;
}
#manger {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 164px;
}
#bormes {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 326px;
}
#voir {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 326px;
}
#lavandou {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 492px;
	letter-spacing: -1px;
}
#sortir {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 492px;
	letter-spacing: -1px;
}
#rayol {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 656px;
	letter-spacing: -1px;
}
#marine {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 656px;
}
#cavalaire {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 820px;
	letter-spacing: -1px;
}
#utile {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 820px;
	letter-spacing: -1px;
}
#tropez {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 984px;
	top: -1px;
}
#annuaire {
	position:absolute;
	width:158px;
	height:40px;
	z-index:53;
	background-color: #16bcd2;
	left: 984px;
	letter-spacing: -1px;
}

#plages {
	position:relative;
	width:140px;
	height:36px;
	z-index:53;
	background-color: #16bcd2;

}
#agenda {
	position:relative;
	width:140px;
	height:36px;
	z-index:53;
	background-color: #16bcd2;
}
#meteo {
	position:relative;
	width:140px;
	height:36px;
	z-index:53;
	background-color: #0099CC;
}
.Style5 {
	font-family: "Open Sans", Geneva, sans-serif;
	font-size: 18px;
	font-weight: 400;
}
.Style9 {
	font-family: "Cabin", Geneva, sans-serif;
	font-size: 24px;
	font-weight: 200;
	color: #FF0000;
}
.lien_banniere_home {
	font-family: "Open Sans", Geneva, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #09D;
	text-decoration: none;
}
.texte_banniere_home {
	font-family: "Open Sans", Geneva, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
}
.Style90 {
	font-family: "Open Sans", Geneva, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}
.titre_banniere_home {
	font-family: "Cabin", Geneva, sans-serif;
	font-size: 30px;
	font-weight: 200;
	text-decoration: none;
	color: #0e0e0e;
	text-align: left;
}
.Style95 {
	font-family: "Cabin", Geneva, sans-serif;
	font-size: 30px;
	font-weight: 200;
	text-decoration: none;
	color: #09F;
}
.Style96 {
	font-family: "Cabin", Geneva, sans-serif;
	font-size: 18px;
	font-weight: 200;
	color: #FF0000;
}
.Style98 {
	font-family: "Open Sans", Geneva, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #0099CC;
	text-decoration: none;
}
#logo
{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width:1140px;
	top: 70px;
}



#webcams {
	 position: absolute;
	height: 36px;
    z-index: 53;
    top: 200px;
    letter-spacing: -1px;
	font-family: "Open Sans", Monaco, monospace;
	font-size: 30px;
	text-align:center;
	color: #FFF;
	line-height: 40px;
	text-decoration: none;
	padding-left:30px;
}

#date {
	 position: absolute;
	height: 36px;
    z-index: 50;
    top: 200px;
    letter-spacing: -1px;
	font-family: "Open Sans", Monaco, monospace;
	font-size: 30px;
	text-align:center;
	color: #FFF;
	line-height: 40px;
	text-decoration: none;
	padding-left:860px;
	text-transform:uppercase;
}
.majuscule {
	text-transform:uppercase;
}

.boutons_OK
	{
	height:40px;
	width:40px;
	background-color:#FFFFFF;
	border-radius:50%;
	display: inline-block;
	font-size:24px;
	z-index:100;
	}
	
	.newmenu_affiche {
	font-family: "Open Sans", Monaco, monospace;
	font-size: 28px;
	text-align:left;
	color: #FFF;
	line-height: 30px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	text-decoration: none;
	background-color: #16bcd2;
	width:800px;
	margin-left:8px;
}
	
		#actualite {
	width:800px;
	
		}
	#photo_fond {
	position: relative;
	width:800px;
	margin-left:8px;
	
		}
	.taille_photo_fond {
		z-index:50;
	width:800px;
		}
		
		#cache_photo_fond {
position: relative;
    top: -150px;
    background-color: #000;
    width: 640px;
    opacity: 0.4;
    display: block;
    height: 130px;
    margin-left: 80px;
		-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	
}
		
	#texte_actu {
	position: relative;
	top: -280px;
    text-align: center;
	font-family: "Open Sans", Monaco, monospace;
	font-size:30px;
	color:#FFFFFF;
	text-decoration:none;
	text-align:center;
	letter-spacing: 3px;
	text-shadow: 2px 2px #222;
	/* font-style:italic; */
	}
	
	#texte_actu a:link
	{
		color:#FFFFcc;
	}
	#texte_actu a:visited
	{
		color:#FFFFcc;
	}
	

.drapeaux {
	width:40px;
	height:40px;
	
}

	.drapeaux:hover{
    filter: grayscale(60%);
    -webkit-filter: grayscale(60%);
    -moz-filter: grayscale(50%);
    -ms-filter: grayscale(60%);
    -o-filter: grayscale(60%);
}

		#picto_village
	{
		height:120px;
		margin-top: -80px;
			margin-left:auto;
	margin-right:auto;
	width:500px;
	}
	
#villages
{
	display:inline;
	border-top:10px;
		    margin-left: auto;
    margin-right: auto;
}
.villages_top
{
	display:inline;
}
.carte {
	width:1148px;
}
#credits_small {
	visibility: hidden;
}


}


@media all and (max-device-width: 1020px) {}

@media all and (max-device-width: 1020px) {
	
	#clavier
	{
display:none;
	}
	
	#menu
		{
display:none;
	}
	#right {
display:none;
}
#droite_responsive {
	width:112%;
	position:relative;
	visibility:visible;
	top:2400px;
		    display: block;
	
}
.pubs_droite {
	width:45%;
	margin-top:20px;
	display: block;
}
.pubs_droite_large {
    width: 98%;
    top: 70px;
    display: block;
    padding-left: 2.7%;
    position: relative;
	visibility:visible;

}
#left {
	width:110%;
	height:500px;
}
#left_village {
	width:110%;
	height:500px;
	padding-top: 30px;
}

#clavier2
	{
	display:inline-block;
	position: relative;
    width: 1000px;
    height: 80px;
    float: left;
    padding-right: 30px;
    text-align: left;
    margin-top: 20px;
	margin-bottom:10px;
    z-index: 100;
	}
	.drapeaux {
	width:80px;
	height:80px;
}
	
#menu_small {
	display: flex;
    width: 100%;
    background-color: #FFFFFF;
	height: 100px;
	visibility:visible;
	margin-top:-12px;
}
		#menu_small_in {
	display: flex;
	
	align-items: center;
	z-index:52;
	height: 120px;
	text-align:right;
	color: #03C;
	font-size:3em;
	visibility:visible;
}
.boite {
	width: 100px;
	height: 80px;
	/* background: #000; */
	cursor: pointer;
	position:relative;
}
.hamburger {
    width: 80px;
    height: 5px;
    background: #17BCCF;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: 0.5s;
}
.hamburger:before, .hamburger:after {
	content: '';
    width: 80px;
    height: 5px;
    background: #17BCCF;
    position: absolute;
    transition: 0.5s;
}
.hamburger:before {
	top: -16px;
    left: 0;
}
.hamburger:after {
	top: 16px;
    left: 0;
}
.boite.active .hamburger {
	background: rgba(0,0,0,0);
}
.boite.active .hamburger:before {
	top:0;
	transform: rotate(45deg);
}
.boite.active .hamburger:after {
	top:0;
	transform: rotate(135deg);
}

.deroule
{
	background-color:#369;
	color:#036;
	visibility:hidden;
	/* margin-right: -300px; */
    position: absolute;
   margin-top: 80px;
    width: 116%;
	top: 248px;
	opacity: 0.8;
    z-index: 1000;
}
.deroule.active  {
	visibility:visible;
}
.item
{

	font-family:Verdana, Geneva, sans-serif;
	font-size:4em;
	height: 2.4em;
    line-height: 3em;
	border-bottom:#000;
	border-style:solid;
	background-color:font-size;
	color:#eeeeee;
	padding-left:30px;
}
.item a {
	color:#dddddd;
    text-decoration: none;
}
	
	.newmenu_affiche {
    font-family: "Open Sans", Monaco, monospace;
    font-size: 2.7em;
    text-align: left;
    color: #FFF;
    line-height: 1.4em;
    text-decoration: none;
    background-color: #16bcd2;
    width: 100%;
    margin-left: 30px;
}

		#actualite {
	position: absolute;
	width:100%;
	
		}
	#photo_fond {
	position: relative;
	width:90%;
	margin-left:30px;
	
		}
		#cache_photo_fond {
    position: absolute;
    top: 28px;
    background-color: #000;
    width: 88%;
    opacity: 0.4;
    display: block;
    height: 36%; 
    margin-left: 80px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
	
}
	.taille_photo_fond {
	    width: 111%;
		}
		
	#texte_actu {
	    position: relative;
       top: -210px;
    text-align: center;
    font-family: "Open Sans", Monaco, monospace;
    font-size: 2.7em;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    letter-spacing: 3px;
    text-shadow: 2px 2px #222;
	}
	
	#texte_actu a:link
	{
		color:#FFFFcc;
	}
	#texte_actu a:visited
	{
		color:#FFFFcc;
	}
	
	.baner_1 {
position: absolute;
    width: 100%;
    height: 183px;
    text-align: left;
    margin-top: 260px;
	margin-left:30px;
}
	.baner_2 {
position: absolute;
    width: 100%;
    height: 183px;
    text-align: left;
    margin-top: 590px;
	margin-left:30px;
}
	.baner_3 {
position: absolute;
    width: 100%;
    height: 183px;
    text-align: left;
    margin-top: 920px;
	margin-left:30px;
}
	.baner_4 {
position: absolute;
    width: 100%;
    height: 183px;
    text-align: left;
    margin-top: 1250px;
	margin-left:30px;
}
	.baner_5 {
position: absolute;
    width: 100%;
    height: 183px;
    text-align: left;
    margin-top: 1580px;
	margin-left:30px;
}
	.baner_6 {
position: absolute;
    width: 100%;
    height: 183px;
    text-align: left;
    margin-top: 1910px;
	margin-left:30px;
}
	.baner_7 {
position: absolute;
    width: 100%;
    height: 183px;
    text-align: left;
    margin-top: 2240px;
	padding-left: 32px;
}
	.baner_8 {
position: absolute;
    width: 100%;
    height: 183px;
    text-align: left;
    margin-top: 2570px;
	padding-left: 32px;
}
#photo_banniere {
	display:inline-block;
	width: 50%;
}
.visuel_banniere
{
	width:95%;
	height:auto;
}
.visuel_banniere_youtube
{
	width:95%;
	height:300px;
}

#texte_banniere {
	position: absolute;
}
.titre_banniere_home {
    font-family: "Cabin", Geneva, sans-serif;
    font-size: 3em;
    font-weight: 200;
    text-decoration: none;
    color: #0e0e0e;
    text-align: left;
}
.lien_banniere_home {
	font-family: "Open Sans", Geneva, sans-serif;
	font-size: 2em;
	font-weight: bold;
	color: #09D;
	text-decoration: none;
}
.texte_banniere_home {
	font-family: "Open Sans", Geneva, sans-serif;
	font-size: 2em;
	font-weight: bold;
	color: #000;
	text-decoration: none;
}
#grande_carte {
	position:relative;
	width:100%;
	top:2500px;
}
.carte {
	width:110%;
	margin-left:30px;
}
#menuhoriz3 {
	visibility: hidden;
}
#pubs_bas{
	visibility: hidden;
}
#credits {
		visibility: hidden;
}
#credits_small {
	visibility: visible;
    position: relative;
    top: 2350px;
    margin-left: 18%;
}
.Style5 {
	font-size:2em;
}
}