/******************************************************************************************************
Structure
******************************************************************************************************/
.container { display: table; width: 100%; position:relative; z-index:888; min-height:100px; }
.row { display: table-row; height: 100%; }
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { display: table-cell; float: none; }


/******************************************************************************************************
General
******************************************************************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, amp, small, strike, strong, sub, sup, tt, var, b, strong, u, i, em, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video 
{ margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; -ms-word-wrap: break-word; word-wrap: break-word; word-spacing:1.5px; color:#008800; line-height:1.6em;}
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, code, del, dfn, em, img, ins, kbd, q, s, amp, small, strike, strong, sub, sup, tt, var, u, center, dl, dt, dd, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video 
{ font:normal 1em 'Arimo', sans-serif; }

body{ background-color:#ffffff;}

ul { text-transform:none; list-style: none; background-color:#ffffff; font:normal 1.1em 'Arimo', sans-serif; color:#da7700;}

ol { padding-left:10px; text-transform:none; list-style: none; background-color:#ffffff; font:normal 1em 'Arimo', sans-serif; color:#da7700;}

li {margin-top:4px;}

strong, b{ font-weight:bold; font-size:inherit; font-family:inherit; line-height:inherit;}

i, em, cite { font:italic 1em 'Arimo', sans-serif;} 

h1{ font:normal 1em 'Arimo', sans-serif; color:#da7700;  text-transform:none; margin:1em 21% 0px;}
h2{ font:normal 1em 'Arimo', sans-serif; color:#fca200;  text-transform:none; }
h3{ font:normal 1em 'Arimo', sans-serif; color:#fca200;  text-transform:none; }
h4{ font:normal 1em 'Arimo', sans-serif; color:#fca200;  text-transform:none; }
h5{ font:normal 1em 'Arimo', sans-serif; color:#fca200;  text-transform:none; }
h6{ font:normal 1em 'Arimo', sans-serif; color:#fc8b00;  text-transform:none; } 

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline:0; }

ins { text-decoration: none; }

del, strike, s { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

a { text-decoration: none; color:#fca200; }

a:visited { text-decoration: none; }

a:hover{ color:#571d01; text-decoration: none; }

a img { border: 0; }

sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }

sup { bottom: 1ex; }

sub { top: .5ex; }

.italic, .citation {font-style:italic;}
.bold{font-weight:bold;}
.orange{color:#fca200;}
.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center;}

.bouton1 { position:relative;left :50%;font: 20px Arial;background-color: rgba(0,128,0,0.18);height:44px; border: 1px solid green; border-radius :10px; text-transform:uppercase; font:normal 1.2em 'Arimo', sans-serif; color:#008000;}
.bouton1:hover { background-color: rgba(0,128,0,0.30);  color:#007000;}

/******************************************************************************************************
Ribbon menu : logo et menu
******************************************************************************************************/
#ribbon-menu1 {z-index:100; position:fixed; left:0px; top:0px; width:100%; height:80px; margin:0px; padding:0px 0px 0px; background:#ffffff; border-bottom:2px solid #008000;min-width: 1280px;}
#ribbon-menu2 {z-index:50; position:relative; left:0px; top:80px; width:100%; height:auto; margin:0px; padding:0px; background:transparent;min-width: 1024px;}


/*********************************************** LOGOS ************************************************/
div.logo-head{position:absolute; left:0px; top:0px; width:10%; height:100px; margin:0px; padding:0px;} /***LJ*/
div.logo-head img.logo250-head{position:absolute; top:0px; left:0px; width:60px; margin:10px 0px 10px 10%;}
#ribbon-menu1 ol{position:absolute; right:0px; top:0px; width:11%; height:100px; margin:0px 1% 0px 0px ; padding:0px; background:transparent;}
#ribbon-menu1 li{position:relative; float:right; padding: 26px 5% 0px;}
#ribbon-menu1 li img{height:60px; }


/****************************************** MENU 1 *******************************************/
#ribbon-menu1 ul{position:absolute; left:0px; bottom:0px; width:100%; height:50px; margin:0px 0px 0px 11%; padding:0px; list-style: none; line-height: 1.0;}
#ribbon-menu1 li{z-index:110; position: relative; float: left;}
#ribbon-menu1 li:first-child{display:block; margin:0px; padding:0px;}  
#ribbon-menu1 li:nth-child(n+2) {margin:0px 0px 0px 1%; padding:0px;}
#ribbon-menu1 ul.menu li a{display:block; position: relative; top:0px; left: 0px; height:40px; margin:0px; text-decoration:none; text-transform:uppercase; font:normal 1.2em 'Arimo', sans-serif; color:#008000; }
#ribbon-menu1 li:first-child a{padding:6px 10px 6px 18px;}
#ribbon-menu1 li:nth-child(n+2) a{padding:13px 10px;}
#ribbon-menu1 li a:hover{color:#3ebe00; text-decoration:none; font:normal 1.1em 'Arimo', sans-serif; -moz-border-radius: 5px 5px 0px 0px ; -webkit-border-radius:5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;}
#ribbon-menu1 li:first-child a:hover{padding:4px 10px 6px 18px;}
#ribbon-menu1 li:nth-child(n+2) a:hover{padding:11px 10px;}
#ribbon-menu1 li.menu-item-active a{color:#3ebe00; text-decoration:none; font:normal 1.2em 'Arimo', sans-serif;}
#ribbon-menu1 li.coordonnees{position:relative; bottom:0px; left:0px; margin:0px 0px 0px 1%; padding:8px 0px;}
#ribbon-menu1 li.coordonnees p{position:relative; top:0px; left:0px; margin:0px; padding:2px 0px 2px 16px ; border-left: 1px solid #008000; font:normal 0.9em 'Arimo', sans-serif; color:#008000; text-transform:none;}
#ribbon-menu1 li a img{z-index:100; margin:0px; width:50px; height:auto;}

#ribbon-menu1 ul.menu li.menu-item-resas a{display:block; position: relative; top:0px; left: 0px; height:40px; margin:0px; background-color: rgba(0,128,0,0.18); text-decoration:none; text-transform:uppercase; font:normal 1.2em 'Arimo', sans-serif; color:#008000; }
#ribbon-menu1 ul.menu li.menu-item-resas a:hover{display:block; position: relative; top:0px; left: 0px; height:40px; margin:0px; background-color: rgba(0,128,0,0.30); text-decoration:none; text-transform:uppercase; font:normal 1.2em 'Arimo', sans-serif; color:#008000; }

/****************************************** MENU 2 *******************************************/
#ribbon-menu2 ul.sub-menu {position:absolute; left:0px; top:0px; width:auto; height:36px; margin:0px 0px 0px 1%; padding:0px; background:transparent;  list-style: none; line-height: 1.0;}
#ribbon-menu2 ul.sub-menu li{ position: relative; float: left; margin:0px; padding:0px;}
#ribbon-menu2 ul.sub-menu li.menu-item-gauche{background:rgba(255,255,210,0.7);border:1px solid #007000; -webkit-border-radius:0px 0px 8px 8px; -moz-border-radius:0px 0px 8px 8px; border-radius:0px 0px 8px 8px;}
#ribbon-menu2 ul.sub-menu li.menu-item-center{background:rgba(255,255,210,0.7);border:1px solid #007000; -webkit-border-radius:0px 0px 8px 8px; -moz-border-radius:0px 0px 8px 8px; border-radius:0px 0px 8px 8px;}
#ribbon-menu2 ul.sub-menu li.menu-item-droite{background:rgba(255,100,100,0.7);border:1px solid #007000;  -webkit-border-radius:0px 0px 8px 8px; -moz-border-radius:0px 0px 8px 8px; border-radius:0px 0px 8px 8px;}

#ribbon-menu2 ul.sub-menu a{ display:block; position: relative;}
#ribbon-menu2 ul.sub-menu li a { position: relative; top:0px; left: 0px; height:30px; margin:0px; padding:5px 8px;  text-decoration:none; text-transform:uppercase; font:normal 1.2em 'Arimo', sans-serif; color:#008000;}
#ribbon-menu2 ul.sub-menu li a:hover{ color:#ffffff; background:rgba(0,118,0,0.7); text-decoration:none; font:normal 1.2em 'Arimo', sans-serif; -moz-border-radius: 0px 0px 8px 8px; -webkit-border-radius:0px 0px 8px 8px; border-radius: 0px 0px 8px 8px;}
#ribbon-menu2 ul.sub-menu li.menu-item-droite a{color:#ffffff; }

/* div.lien-accueil a {position:absolute; left:0px; top:0px; width:auto; height:36px; margin:0px 0px 0px 1%; padding:10px 18px; text-align:center; text-decoration:none; font:normal 1.2em 'Arimo', sans-serif; text-transform:uppercase;border:1px solid #008000;color:#008000; background:rgba(255,255,210,0.7); 
-webkit-border-radius:0px 0px 8px 8px;
-moz-border-radius:0px 0px 8px 8px;
border-radius:0px 0px 8px 8px;}
div.lien-accueil a:hover {color:#ffffff; background:rgba(0,118,0,0.7);}*/

/************************************************************************************************************************/
/*		WIDGET DES DISPOS POUR LES GITES		*/
/***************************************************************************************************************************/
div.widget-dispos{z-index:50; position:absolute; right:0px;  width:20%; height:15%; margin:0px 0% 0px 0px ; padding:2px; background:rgba(255,255,210,0.7); -webkit-border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; border-radius:0px 0px 4px 4px;}
div.widget-dispos a{width:100%; height:auto;  text-decoration:none; font:bold 1em 'Arimo', sans-serif; color: red; text-transform:uppercase;}

/*******************************************************************************************************/
/*		PIED DE PAGES			*/
/*******************************************************************************************************/
#footer {position:relative; bottom:0px; left:0px; margin:0px;}
#home div.footer-home, #content div.footer-pages{
z-index:100;
position:fixed;
 bottom:0px;
width:100%;
background:#ffffff;
}
#footer p, #home div.footer-home p, #content div.footer-pages p {
    display:block;
	padding-top:10px ;
    line-height:1.2em;
	text-align:center;
	font-size:0.9em;
	color:#008000;
}
#footer p a, #home div.footer-home p a, #content div.footer-pages p a{font-size:1em; color:#913002; text-decoration: none;}
#footer p a:hover, #home div.footer-home p a:hover, #content div.footer-pages p a:hover{color:#006600;}


/******************************************************************************************************/
/*	ACCUEIL */
/*****************************************************************************************************/
#home{
clear:both;
position:absolute;
top:80px;
left:0px;
height:100%;
width:100%;
min-width: 800px;
max-width: 1920px;
}
#home div.head-home h1{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
margin:0px;
padding:20% 2% 0px;
color:white;
font-size:2em;
}
#home div.head-home img{
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
}
/***************************** SECTION TEXTE ACCUEIL ********************************/

#intro-home {
position:relative;
margin-top:32%;
margin-bottom:0%;
margin-left:5%;
margin-right:5%;
padding-top:0%;
padding-bottom:0%;
padding-left:0%;
padding-right:0%; 
}
/***************************** SECTION TEXTE PROMO ********************************/

#intro-promo {
position:relative;
margin-top:10%;
margin-bottom:0%;
margin-left:5%;
margin-right:5%;
padding-top:0%;
padding-bottom:0%;
padding-left:0%;
padding-right:0%; 
}

/***************************** SECTION TEXTE GALERIE PHOTOS ********************************/
#intro-galerie {
position:relative;
margin-top:10%;
margin-bottom:0%;
margin-left:15%;
margin-right:0%;
padding-top:0%;
padding-bottom:0%;
padding-left:0%;
padding-right:0%; 
}

#annonce{
position:relative;
float:left;
margin-top:0%;
margin-bottom:0%;
margin-left:5%;
margin-right:0%;
padding-top:0%;
padding-bottom:0%;
padding-left:0%;
padding-right:0%;
}

/**************************** SECTION GITES BAS DE PAGE ********************************/
#gites-home{
position:relative;
float:left;
margin-top:35%;
margin-bottom:0%;
margin-left:0%;
margin-right:0%;
padding-top:0%;
padding-bottom:0%;
padding-left:2%;
padding-right:0%; 
}

#gites-pages{
position:relative;
float:left;
margin-top:0%;
margin-bottom:0%;
margin-left:0%;
margin-right:0%;
padding-top:0%;
padding-bottom:0%;
padding-left:2%;
padding-right:0%;
}

#gites-p-tarifs{
position:relative;
float:left;
margin:0px 0px;
width:100%;
height:100%;
padding:0px;
background:#ffffff;
}
#gites{
position:relative; 
top:0px;
float:left;
margin:0px 0px;
width:100%;
height:100%;
padding-top:80px;
padding-bottom: 0px;
background:#ffffff;
}
#sub-content #gites{padding-left:10%; padding-right:10%;}
#gites p.autres-gites{
position:relative;
top:0px;
float:left;
width:100%;
margin:0px 0px 0px;
padding:10px 0px;
border-bottom:1px solid #009900;
text-align:left;
font:normal 1.2em 'Arimo', sans-serif;
color:#009900;
}
#gites div.album ul{
margin:0px;
padding:20px 0px 0px;
height:100%;
list-style:none;
overflow:visible;
}
#gites div.album li.appart{
position:relative;
float:left;
margin:5px;
width:280px;
height:210px;
padding:0px;
list-style:none;
background:#ffde9c;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
 /*   -webkit-transform: rotateY(0deg);
    -webkit-transition: all 0.4s ease;
    -moz-transform: rotateY(0deg);
    -moz-transition: all 0.4s ease;
    -ms-transform: rotateY(0deg);
    -ms-transition: all 0.4s ease;
    -o-transform: rotateY(0deg);
    -o-transition: all 0.4s ease;
    transform: rotateY(0deg);
    transition: all 0.4s ease;*/
}
/* #gites div.album ul li.appart:nth-child{clear:left;} */
#gites div.album li.appart:hover{
z-index:90;
position:relative;
top:0px;
left:0px;
width:280px;
height:210px;
   -webkit-transform: rotateY(180deg);
   /*  -webkit-transition: all 1s ease;
    -moz-transform: rotateY(180deg);
    -moz-transition: all 1s ease;
    -ms-transform: rotateY(180deg);
    -ms-transition: all 1s ease;
    -o-transform: rotateY(180deg);
    -o-transition: all 1s ease;
    transform: rotateY(180deg);
    transition: all 1s ease;*/
}
#gites div.album li.appart a,
#gites div.album li.appart a p.resume-gite{
position:absolute;
bottom:0px;
left:0px;
margin:0px;
text-decoration:none;
background:transparent;
}
#gites div.album li.appart a{padding:0px; width:280px; height:210px;}
#gites div.album li.appart a p.resume-gite{
opacity:0; 
padding:4px 8px; 
color:#571d01; 
text-shadow:-1px 1px 1px #ffe8bb; 
text-align:justify;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
	}
#gites div.album li.appart a:hover p.resume-gite{opacity:1;}
#gites div.album li a img.couv-gite,
#gites div.album li a img.couv-gite-active, 
#gites div.album li a img.facade{
position:absolute;
top:0px;
left:0px;
width:auto ; 
height:auto ;
margin:0px;
padding:0px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#gites div.album li a img.couv-gite{opacity:1; -webkit-box-shadow:0px 0px 4px #ffc144; -moz-box-shadow:0px 0px 4px #ffc144; box-shadow:0px 0px 4px #ffc144;}
#gites div.album li a img.couv-gite-active{opacity:0.6; border:1px solid #ffcc66; }
#gites div.album li.appart:hover img.couv-gite, #gites div.album li.appart:hover img.couv-gite-active{opacity:0;}
#gites div.album li a img.facade{
opacity:0;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
	}
#gites div.album li.appart:hover img.facade{opacity:0.4;}
#gites div.album li.appart a p.nom-gite{
background:#ffcc66; 
opacity:0.7; 
position:absolute; 
bottom:0px; 
left:0px; 
width:100%;
margin:0px;
padding:4px 2px; 
text-align:center; 
font:bold 1.2em 'Arimo', sans-serif; 
color:#571d01;
text-shadow:-1px 1px 1px #ffe8bb;
line-height:1.2em;
-webkit-border-radius:0px 0px 4px 4px;
-moz-border-radius:0px 0px 4px 4px;
border-radius:0px 0px 4px 4px;
}
#gites div.album li.appart:hover a p.nom-gite{opacity:0;}
p.retour-haut{
position:relative;
top:0px;
left:0px;
margin:0px;
padding:0px;
}
p.retour-haut a{
position:relative;
top:0px;
float:right;
clear:both;
height:100px;
margin:10px 6%;
padding:5px 0px;
text-decoration: none;
font:normal 1em 'Arimo', sans-serif; 
color:#913002;
}

p.retour-haut a span{font:bold 1em 'Arimo', sans-serif; color:#913002;}
p.retour-haut a:hover, p.retour-haut a:hover span{color:#006600;}


/******************************************************************************************************
PAGE DE PRESENTATION POUR CHAQUE GITE
*****************************************************************************************************/
#content{
clear:both;
position:absolute;
top:76px;
left:0px;
height:100%;
width:100%;
margin:0px;
padding:0px;
}
/*wrapper*/
/*position+top+height: eviter scroll*/
#content div.head-pages{
position:absolute;
bottom:0px;
margin:0px;
padding:0px;
width:100%;
height:100%;
min-width: 800px;
max-width: 100%;
}
#content div.head-pages-gites{
position:absolute;
bottom:0px;
margin:0px;
padding:0px;
width:100%;
height:100%;
min-width: 800px;
max-width: 90%;
}
#content div.head-pages-accueil{
position:absolute;
bottom:0px;
margin:0px;
padding:0px;
width:100%;
height:100%;
min-width: 800px;
max-width:100%;

}
/******************************** DESCRIPTION PAGE ACCUEIL ********************************/
ul.description-head-accueil{
z-index:40;
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
margin:0px ;
padding:0px;
}
ul.description-head-accueil li {width:100%; height:100%;}

ul.description-head-accueil li img{
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
border-bottom:1px solid #008800;
}

ul.description-head-accueil li ul {position:absolute; bottom:5%; left:3%; margin:0px; padding:0px; width:97%;background:transparent; }
#description-head-accueil li p{
z-index:100;
position:relative; bottom:0px; left:0px;
margin:auto;
padding:8px 5%;
width:100%;
/*background:rgba(255,255,210,0.7);*/
font:normal 1em 'Arimo', sans-serif;
color:#571d01;
text-shadow:-1px 1px 1px #ffeecc;
text-transform:none; 
line-height:1.1em;
}
#description-head-accueil p span.h1{
margin:0px;
padding:0px;
font:normal 1em 'Arimo', sans-serif;
color:#571d01;
text-shadow:-1px 1px 1px #ffeecc;
text-transform:none; 
line-height:1.3em;
text-align:justify;
}
#description-head-accueil a{
margin:0px;
padding:0px;
font:normal 1em 'Arimo', sans-serif;
color:#ffeecc;
text-shadow:-1px 1px 1px #571d01;
text-transform:none; 
line-height:1.4em;
text-align:justify;
}

/******************************** DESCRIPTION DE CHAQUE GITE ********************************/
ul.description-head{
z-index:40;
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
margin:0px ;
padding:0px;
}
ul.description-head li {width:100%; height:100%;}
ul.description-head li img{
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
border-bottom:1px solid #008800;
}

ul.description-head li ul {position:absolute; bottom:0px; left:0px; margin:0px; padding:0px; width:100%; background:transparent;}
#description-head-pc li p{
z-index:100;
position:relative; bottom:0px; left:0px;
margin:auto;
padding:8px 15%;
width:100%;
background:rgba(255,255,210,0.7);
font:normal 1em 'Arimo', sans-serif;
color:#571d01;
text-shadow:-1px 1px 1px #ffeecc;
text-transform:none; 
line-height:1.1em;
}
#description-head-pc p span.h1{
margin:0px;
padding:0px;
font:normal 1em 'Arimo', sans-serif;
color:#571d01;
text-shadow:-1px 1px 1px #ffeecc;
text-transform:none; 
line-height:1.3em;
text-align:justify;
}
#description-head-pc a{
margin:0px;
padding:0px;
font:normal 1em 'Arimo', sans-serif;
color:#ffeecc;
text-shadow:-1px 1px 1px #571d01;
text-transform:none; 
line-height:1.4em;
text-align:justify;
}

/***************************** SECTION TEXTE GITES ********************************/

#intro-gites{
position:relative;
margin-top:25%;
margin-left:20%;
margin-right:20%;
}
#descriptif-gites{
position:relative;
margin-top:20px;
margin-left:20%;
margin-right:20%;
}

/***************************** SECTION TEXTE DIAPORAMA ********************************/

#intro-diaporama{
position:relative;
margin-top:0%;
margin-left:0%;
margin-right:0%;
}

/***************************** SECTION TEXTE AVIS ********************************/

#intro-avis{
position:relative;
margin-top:32%;
margin-left:20%;
margin-right:20%;
}

#sub-content-avis{
position:relative;
left:20%;
height:100%;
width:90%;
margin:0px;
padding:0px;
background:transparent;
}

/******************************** ALBUM PHOTOS POUR CHAQUE GITE ********************************/
#sub-content{
position:relative; 
background:transparent;
height:100%;
width:100%;
}
div.photos-gite{
position:relative; 
top:0px;
float:left;
width:100%;
height:100%;
padding-top:10px;
background:transparent;
}
div.photos-gite ul{
margin:0px 2%;
padding:10px 0px 0px;
height:100%;
list-style:none;
overflow:visible;
background:transparent;
}
div.photos-gite li.appart{
position:relative;
float:left;
margin:2px;
width:280px;
height:187px;
background:#ffde9c;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

div.photos-gite li.appart:hover{
position:relative;
width:280px;
height:187px;
}

div.photos-gite li.appart a{padding:0px;}
div.photos-gite li a img.photo{
position:absolute;
top:0px;
left:0px;
width:280px !important;
max-height:210px !important;
margin:0px;
padding:0px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0px 0px 4px #ffc144;
-moz-box-shadow:0px 0px 4px #ffc144;
box-shadow:0px 0px 4px #ffc144;
}
div.photos-gite li a img.photo{opacity:1;}
div.photos-gite li.appart:hover img.photo{opacity:0.7;}


/***************************** FENETRE POP UP GALERIE D'IMAGES *****************************/
.popup {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width:100%;
  background: rgba(0, 14, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;  /*parametre 'pointer events' non standard mais obligatoire*/
}
.popup:target {opacity:1; pointer-events: auto;} /*parametre 'pointer events' non standard mais obligatoire*/


/*Ajuster la position de la fenêtre en fonction de l'orientation de l'image*/
.popup:target > div.paysage {
  margin: 7% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
.popup:target > div.portrait {
  margin: 5% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
.popup > div.paysage , .popup > div.portrait {
  position: relative;
  margin: 1% auto;
  padding: 5px;
  border-radius: 5px;
  -webkit-border-radius:5px; 
  -moz-border-radius:5px;
  background: #ffffff;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  overflow:hidden;
}
/* dim affichage images des diaporamas */
.popup > div.paysage{max-width:960px; } 
.popup > div.portrait{max-width:600px;}
.popup > div > div.header{padding:0px; margin:0px; text-align:center;}
.popup > div.paysage img{width:100%; max-height:600px; margin:0px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;} 
.popup > div.portrait img{width:auto; max-height:960px; margin:0px; text-align:center; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}

/* Slide vers les photos précédentes et suivantes */
.preview{
opacity:0;
position:absolute; 
top:0px; 
left:0px;
height:100%;
width:40px;
margin:0px;
padding:0px;
background:transparent;
}
.next{
opacity:0;
position:absolute; 
bottom:0px; 
right:0px;
height:90%;
width:40px;
margin:0px;
padding:0px;
background:transparent;
}
.preview .back-round{
position:absolute; 
top:47%;
left:0px;
height:35px;
width:35px;
margin:0px;
padding:8px 10px 8px 8px;
background:rgba(255, 255, 255, 0.5);
-webkit-border-radius:0px 50% 50% 0px; 
-moz-border-radius:0px 50% 50% 0px;
border-radius:0px 50% 50% 0px;
}
.next .back-round{
position:absolute; 
top:41%; 
right:0px;
height:35px;
width:35px;
margin:0px;
padding:8px 5px 8px 10px;
background:rgba(255, 255, 255, 0.5);
-webkit-border-radius:50% 0px  0px 50%; 
-moz-border-radius:50% 0px  0px 50%;
border-radius:50% 0px  0px 50%;
}
.preview .fleche, .next .fleche{ 
height:0px; 
width:0px; 
margin:0px;
padding:0px;
}
.preview .fleche{
position:relative; 
top:0px; 
left:0px;
	border-bottom:10px solid transparent;
    border-top:10px solid transparent;
    border-right:16px solid rgba(0, 128, 0, 0.4);
}
.next .fleche{
position:relative; 
top:0px;  
right:0px;
	border-bottom:10px solid transparent;
    border-left:16px solid rgba(0, 128, 0, 0.4);
    border-top:10px solid transparent;
}
.preview:hover .back-round{padding:8px 12px 8px 5px;}
.next:hover .back-round{padding:8px 5px 8px 12px;}
.preview:hover .fleche{
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-right:17px solid rgba(0, 128, 0, 0.6);
}
.next:hover .fleche{ 
border-bottom:10px solid transparent;
border-left:17px solid rgba(0, 128, 0, 0.6);
border-top:10px solid transparent;
}
div.header:hover .preview , div.header:hover .next, div.header:hover .fermer{opacity:1;}
.fermer {
opacity:0;
position:absolute; 
top:0px; 
right:0px; 
margin:5px; 
padding:6px 8px;
font-size:1em;
color:rgba(0, 128, 0, 1); 
text-shadow:0px -1px 1px rgba(255, 255, 255, 1), -1px 1px 0px rgba(255, 255, 255, 1);
border-radius:50%; 
-webkit-border-radius:50%; 
-moz-border-radius:50%; 
background:rgba(255, 255, 255, 0.4);
border:#ffffff;
-webkit-box-shadow: inset 1px -1px 4px rgba(0, 128, 0, 0.6);
-moz-box-shadow:inset 1px -1px 4px rgba(0, 128, 0, 0.6);
box-shadow:inset 1px -1px 4px rgba(0, 128, 0, 0.6);
}
.fermer:hover{
color:rgba(0, 128, 0, 1); 
text-shadow:0px 0px 3px  rgba(255, 255, 255,1), -2px 1px 0px rgba(255, 255, 255, 1);
text-decoration: none; 
background:rgba(255, 255, 255, 0.6);
-webkit-box-shadow: inset 1px -1px 4px rgba(0, 128, 0, 0.8); 
-moz-box-shadow:inset 1px -1px 4px rgba(0, 128, 0, 0.8);
box-shadow:inset 1px -1px 4px rgba(0, 128, 0, 0.8);
}

/* Légende éventuelle*/
/*.popup .footer {border:none; border-top: 1px solid #e7e7e7; border-radius: 0 0 5px 5px;} 
.popup > div div.footer {border-bottom: 1px solid #e7e7e7; border-radius: 5px 5px 0 0;}
.popup > div > div.footer {padding:8px; margin:0px;}*/


/******************************************************************************************************
PAGE TARIFS ET RESERVATIONS
*****************************************************************************************************/
#intro-tarifs{
position:relative;
margin-top:32%;
margin-bottom:0%;
margin-left:20%;
margin-right:0%;
padding-top:0%;
padding-bottom:0%;
padding-left:0%;
padding-right:0%; 
}
#vertical-menu-left {z-index:50; position:fixed; left:0px; top:0px; width:10%; height:100%; margin:0px; padding:150px 0px 0px; background:transparent;}
#vertical-menu-left ul.tarifs-links{
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
margin:0px;
padding:0px;
list-style:none;
background:transparent;
}
#vertical-menu-left ul.tarifs-links li.links{
position:relative;
margin:0px;
width:128px;
height:40px;
padding:0px;
list-style:none;
border:1px solid #007000;
-webkit-border-radius:0px 8px 8px 0px;
-moz-border-radius:0px 8px 8px 0px;
border-radius:0px 8px 8px 0px;
}
/*#vertical-menu-left ul.tarifs-links li.links:hover{background:#ffffff; }*/
#vertical-menu-left ul.tarifs-links li a{
position:absolute;
top:0px;
left:0px;
margin:0px;
padding:4px 2px 0px;
width:100%;
height:100%;
font:normal 1em 'Arimo', sans-serif;
color:#007000;
text-decoration:none;
text-align:center;
line-height:0.9em;
background:rgba(255, 255, 210, 0.8);
-webkit-border-radius:0px 8px 8px 0px;
-moz-border-radius:0px 8px 8px 0px;
border-radius:0px 8px 8px 0px;
}
#vertical-menu-left ul.tarifs-links li a:hover{background:rgba(0, 120, 0, 0.8);color:#ffffff;}

#vertical-menu-left ul.tarifs-links li a span{font:italic 1em 'Arimo', sans-serif; color:#007000;}

/*Tableau des tarifs pour chaque gite*/
/*Lignes d'en-tête*/
#sub-content-tarifs{
position:relative; 

left:10%;
height:100%;
width:100%;
margin:0px;
padding:0px;
background:transparent;
}
#sub-content-tarifs div.tarifs-tables{
position:relative; 
top:0px;
left:10%;
margin:0px;
width:75%;
height:100%;
padding:0px 0px 0px 0px;
background:transparent;
}
div.tarifs-tables div.tarifs-par-gite{position:relative; top:0px; left:0px; margin:0px; padding:0px 0px 0px; clear:both;}
div.tarifs-tables #tarifs-crocus{position:relative; top:0px; left:0px; margin:0px; padding:10px 0px 0px; clear:both;}
div.tarifs-tables #tarifs-soldanelle{position:relative; top:0px; left:0px; margin:0px; padding:0px 0px 0px; clear:both;}
div.tarifs-tables div.gites-ul-bottom{position:relative; top:0px; left:0px; margin:0px; padding:0px; clear:both;}
div.tarifs-tables #gites div.album ul{margin:0px; padding:0px; height:100%; list-style:none; overflow:visible;}
div.tarifs-tables div ul.caption{
position:relative;
top:0px;
left:0px;
margin:0px;
width:auto;
height:auto;
padding:0px;
list-style:none;
background:transparent;
}
div.tarifs-tables ul.caption li:first-child{width:260px; background:#008C00; color:#ffffff; border:1px solid #007000; -webkit-border-radius:8px 8px 0px 0px; -moz-border-radius:8px 8px 0px 0px; border-radius:8px 8px 0px 0px;}
div.tarifs-tables ul.caption li{width:22%; height:auto; margin:0px; padding:6px 2px; text-align:center;}
div.tarifs-tables li{
position:relative;
float:left;
margin:2px 0px;
padding:0px;
list-style:none;
background:transparent;
}
/*Lignes périodes & prix*/
div.tarifs-tables ul.tarifs,
div.tarifs-tables ul.supplements{
position:relative;
top:0px;
left:0px;
clear:both; 
margin:0px;
width:100%;
height:auto;
padding:0px;
list-style:none;
background:transparent;
}
div.tarifs-tables ul.tarifs {border-bottom:1px solid #007000;}
div.tarifs-tables ul.tarifs li:first-child{width:260px;}
div.tarifs-tables ul.tarifs li{width:22%; height:100%; padding:5px 2px; text-align:center;}
div.tarifs-tables ul.tarifs li.links-resa{width:33%; height:100%; margin-top:10px; padding:10px 0px; text-align:center;}
div.tarifs-tables ul.tarifs li.links-resa a {position:relative; top:0px; left:0px; margin:0px; width:100%; height:100%; padding:8px 10px; color:#007000; border:1px solid #007000;
background:rgba(255,255,210,0.8); -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
div.tarifs-tables ul.tarifs li.links-resa a:hover {text-decoration:none; background:rgba(0,120,0,0.8); color:#ffffff;
-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
div.tarifs-tables ul.supplements li{clear:both; width:100%; height:100%; padding:5px 2px; text-align:left; border-bottom:1px solid #ffde9c;}


/******************************************************************************************************
PAGE NOUS TROUVER
*****************************************************************************************************/
#intro-acces{
position:relative;
margin-top:32%;
margin-bottom:0%;
margin-left:15%;
margin-right:0%;
padding-top:0%;
padding-bottom:0%;
padding-left:0%;
padding-right:0%; 
}

#sub-content-acces{

position:relative;
left:0px;
height:100%;
width:90%;
margin:0px;
padding:0px;
background:transparent;
}
#sub-content-acces div.page-acces{
position:relative;
left:15%;
margin:0px;
width:100%;
height:100%;
padding:20px 15% 0px 0px;
background:transparent;
}
div.page-acces div.acces-gites{position:relative; top:0px; left:0px; margin:0px; padding:50px 0px 0px; clear:both;}
div.page-acces div.gites-ul-bottom{position:relative; top:0px; left:0px; margin:0px; padding:0px; clear:both;}
div.page-acces #gites div.album ul{margin:0px; padding:0px; height:100%; list-style:none; overflow:visible;}
div.page-acces li{
position:relative;
float:left;
margin:2px 0px;
padding:0px;
list-style:none;
background:transparent;
}
div.page-acces ul.infos-acces{
position:relative;
top:0px;
left:0px;
clear:both; 
margin:0px;
width:100%;
height:auto;
padding:0px;
list-style:none;
background:transparent;
}
div.page-acces ul.infos-acces li.infos{width:44%; height:100%; padding:5px 0px; text-align:left; }
div.page-acces ul.infos-acces li.plan-acces{position:relative; float:right;}
div.page-acces ul.infos-acces li li{position:relative; top:0px; left:0px; float:left; width:100%; margin:0px; padding:0px 0px 15px 0px; clear:both; line-height:1.2em;}
div.page-acces ul.infos-acces li li:nth-child(2){text-align:center;}
div.page-acces ul.infos-acces a{color:#fca200; font-weight:bold; text-decoration: none;}
div.page-acces ul.infos-acces a:hover{color:#00be00;}

/******************************************************************************************************
PAGE VELO
*****************************************************************************************************/
#sub-content-velo{
position:relative;
margin-top:32%;
margin-bottom:0%;
margin-left:5%;
margin-right:0%;
background:transparent;
}

ul.infos-velo{
position:relative;
top:0px;
left:5%;
clear:both; 
margin:0px;
width:100%;
height:auto;
padding:0px;
list-style:none;
background:transparent;
}
ul.infos-velo li {
    list-style-type: circle;
}
ul.infos-velo-horaire{
position:relative;
top:0px;
left:3%;
clear:both; 
margin:0px;
width:100%;
height:auto;
padding:0px;
list-style:none;
background:transparent;
}

ul.infos-velo-horaire li {
    list-style-type: square;
}

div.photos-velo li img.photo{
position:relative;
top:0px;
left:5%;
width:280px !important;
max-height:210px !important;
margin:0px;
padding:0px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0px 0px 4px #ffc144;
-moz-box-shadow:0px 0px 4px #ffc144;
box-shadow:0px 0px 4px #ffc144;
}
img.velo-urgence {
width:150px;
height:150px;
}

div.urgence {
	position:relative;
left:5%;
}
/******************************************************************************************************
PAGE CONTACT
******************************************************************************************************/

#intro-contact{
position:relative;
margin-top:32%;
margin-bottom:0%;
margin-left:15%;
margin-right:15%;
padding-top:0%;
padding-bottom:0%;
padding-left:0%;
padding-right:0%; 
}


div.formulaire-contact form{
	margin: 5% 10% 4px;
height:100%;
width:80%;
padding:10px;
background:#ffffc8;

border:2px solid #008000;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
	
}



/******************************************************************************************************
PAGE LES PLUS
*****************************************************************************************************/
ul.description-head li.les-plus-1,
ul.description-head li.les-plus-2,
ul.description-head li.les-plus-3,
ul.description-head li.les-plus-4,
ul.description-head li.les-plus-5,
ul.description-head li.les-plus-6 {
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
margin:0px ;
padding:0px;
}

ul.description-head li.les-plus-1 img.panorama,
ul.description-head li.les-plus-2 img.panorama,
ul.description-head li.les-plus-3 img.panorama,
ul.description-head li.les-plus-4 img.panorama,
ul.description-head li.les-plus-5 img.panorama,
ul.description-head li.les-plus-6 img.panorama{
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
border-bottom:1px solid #008000;
}


ul.description-head li.les-plus-1{
animation-name:les-plus-1;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;
}

ul.description-head li.les-plus-2{
animation-name:les-plus-2;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;  
}

ul.description-head li.les-plus-3{
animation-name:les-plus-3;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;
}	

ul.description-head li.les-plus-4{
animation-name:les-plus-4;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;
}

ul.description-head li.les-plus-5{
animation-name:les-plus-5;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;
}

ul.description-head li.les-plus-6{
animation-name:les-plus-6;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;
}

@keyframes les-plus-1{
0%, 16% { opacity: 1; }
16%, 32%  { opacity: 0; }
32%, 48%  { opacity: 0; }
48%, 64%  { opacity: 0; }
64%, 80%  { opacity: 0; }
80%, 95% { opacity: 0; }
95%, 100% { opacity: 1; }
}
@keyframes les-plus-2{
0%, 16% { opacity: 0; }
16%, 32%  { opacity: 1; }
32%, 48%  { opacity: 0; }
48%, 64%  { opacity: 0; }
64%, 80%  { opacity: 0; }
80%, 100% { opacity: 0; }
}
@keyframes les-plus-3{
0%, 16% { opacity: 0; }
16%, 32%  { opacity: 0; }
32%, 48%  { opacity: 1; }
48%, 64%  { opacity: 0; }
64%, 80%  { opacity: 0; }
80%, 100% { opacity: 0; }
}
@keyframes les-plus-4{
0%, 16% { opacity: 0; }
16%, 32%  { opacity: 0; }
32%, 48%  { opacity: 0; }
48%, 64%  { opacity: 1; }
64%, 80%  { opacity: 0; }
80%, 100% { opacity: 0; }
}
@keyframes les-plus-5{
0%, 16% { opacity: 0; }
16%, 32%  { opacity: 0; }
32%, 48%  { opacity: 0; }
48%, 64%  { opacity: 0; }
64%, 80%  { opacity: 1; }
80%, 100% { opacity: 0; }
}

@keyframes les-plus-6{
0%, 16% { opacity: 0; }
16%, 32%  { opacity: 0; }
32%, 48%  { opacity: 0; }
48%, 64%  { opacity: 0; }
64%, 80%  { opacity: 0; }
80%, 95% { opacity: 1; }
95%, 100% { opacity: 0; }
}
div.infos-en-plus{position:relative; top:0px; left:0px; margin:0px; padding:10px 15%;}
div.infos-en-plus p {text-align:justify;}
div.infos-en-plus p:before{
content:"+ ";

font: bold 1em 'Arimo';
color:#fca200;
text-shadow:1px 1px 1px rgba(255,204,102,1);
}
div.infos-en-plus p a{
line-height:1.2em;
color:#fca200;
font-weight:bold;
text-decoration: none;}
div.infos-en-plus p a:hover{color:#00be00;}


/******************************************************************************************************
PAGE ACTIVITES
*****************************************************************************************************/
ul.description-head li.activ-1,
ul.description-head li.activ-2,
ul.description-head li.activ-3,
ul.description-head li.activ-4 {
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
margin:0px ;
padding:0px;
}

ul.description-head li.activ-1 img.panorama,
ul.description-head li.activ-2 img.panorama,
ul.description-head li.activ-3 img.panorama,
ul.description-head li.activ-4 img.panorama{
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
border-bottom:1px solid #008000;
}


ul.description-head li.activ-1{
animation-name:activ-1;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;
}

ul.description-head li.activ-2{
animation-name:activ-2;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;  
}

ul.description-head li.activ-3{
animation-name:activ-3;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;
}	

ul.description-head li.activ-4{
animation-name:activ-4;
animation-delay:0s;
animation-duration:60s;
animation-iteration-count:infinite;
}
@keyframes activ-1{
0%, 25% { opacity: 1; }
25%, 50%  { opacity: 0; }
50%, 75%  { opacity: 0; }
75%, 90% { opacity: 0; }
90%, 100% { opacity: 1; }
}
@keyframes activ-2{
0%, 25% { opacity: 0; }
25%, 50%  { opacity: 1; }
50%, 75%  { opacity: 0; }
75%, 90% { opacity: 0; }
90%, 100% { opacity: 0; }
}
@keyframes activ-3{
0%,25% { opacity: 0; }
25%, 50%  { opacity: 0; }
50%, 75%  { opacity: 1; }
75%, 90% { opacity: 0; }
90%, 100% { opacity: 0; }
}
@keyframes activ-4{
0%, 25% { opacity: 0; }
25%, 50%  { opacity: 0; }
50%, 75%  { opacity: 0; }
75%, 90% { opacity: 1; }
90%, 100% { opacity: 0; }
}


div.infos-en-plus{position:relative; top:0px; left:5%; margin:0px; padding:10px 0px;}
div.infos-en-plus p {text-align:justify;}
div.infos-en-plus p:before{
content:"+ ";
font: bold 1em 'Arimo';
color:#fca200;
text-shadow:1px 1px 1px rgba(255,204,102,1);
}
div.infos-en-plus p a{
line-height:1.2em;
color:#fca200;
font-weight:bold;
text-decoration: none;}
div.infos-en-plus p a:hover{color:#00be00;}



/******************************************************************************************************
MENTIONS LEGALES
******************************************************************************************************/
#intro-mentions{
position:relative;
margin-top:32%;
margin-bottom:0%;
margin-left:5%;
margin-right:5%;
padding-top:0%;
padding-bottom:0%;
padding-left:0%;
padding-right:0%; 
}

#textslide  div.mentions-legales p,
#textslide  div.mentions-legales ol{
    display: block;
	margin:10px 21% 0px;
	line-height:1.2em;
	text-align:justify;
}

#textslide  div.mentions-legales ol{padding-left:20px;}