.clear{
clear: both;
}
/*---------------------------------------- ACCUEIL ---------------------------------------------------------------*/


#background{
background: url(images/background5.jpg);
background-repeat : no-repeat;
margin-top:auto;
margin-left: auto;
margin-bottom: -108px;
/*position: relative;*/
/*width: 1500px;*/
/*height: 900px;*/
}

#forme_drapeaux{
background-image: url(images/forme_drapeaux.png);
width: 520px;
height:98px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#forme_drapeaux ul {
position: absolute;
top: 11px;
left: 159px;
}

#forme_drapeaux ul li{
float: left;
padding-right: 10px;
padding-left: 10px;
}

#forme_drapeaux ul li a img{
width: 17px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#forme_drapeaux ul li a:hover img{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}


#logo{
background-image: url(images/logo.png);
width: 318px;
height:150px;
margin-right: auto;
margin-left: auto;
margin-top: -20px;
margin-bottom :20px;
}

/*ul.pictos li img{
margin:0px;
padding: 0px;
}

ul.pictos{
margin-left: 1020px;
margin-top: -25px;
position: relative;
left: 1020px;
top: 218px;
height:30px;
}
*/

#boite{
width: 851px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#boite #pictos{
 left: 42.4em;
  position: absolute;
 top: -30px;
/*width: 850px;*/
}

#boite #pictos ul li{
float: left;
padding-left: 20px;
position:relative;
z-index: 10001;
}


#menu_deroulant{
background: url(images/rectangle_menu.png);
width: 951px;
height: 60px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 10000;
}

#menu_deroulant span{
position: absolute;
top: 18px;
left: 50px;
}

/*#menu span{
margin-top: 20px;
margin-left: 10px;
}*/

#ombre_menu{
/*background: url(images/ombre_menu.png);*/
width: 857px;
height: 24px;
margin-right: auto;
margin-left: auto;
position:absolute;
left: 45px;
top:10px;
z-index: 1000;
}


#cadre{
background: url(images/cadre.jpg);
/*background-repeat: repeat-y;*/
width: 951px;
height: 700px;
margin-right: auto;
margin-left: auto;
margin-top: -10px;
position:relative;
}

#cadre h1{
color:#006fb7;
font-size: 3em;
font-family: 'Cookie', cursive;
text-align: center;
}


#cadre span{
/*width: 857px;*/
height: 342px;
margin-right: auto;
margin-left: auto;
margin-top: -20px;
}

#cadre ul.videos{
width: 857px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

#cadre ul.videos li{
float: left;
padding-left: 10px;
margin-top: 50px;
}

#ombre_cadre{
background: url(images/ombre_menu.png);
width: 857px;
height: 24px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#tv{
position: absolute;
left: 905px;
top:356px;
z-index: 10000;
}

#pied{
background-image: url(images/pied.jpg);
background-repeat: repeat-x;
height: 150px;
margin-top: 15px;
margin-left: -41px;
padding-top: 10px;
/*width:100%;*/
}

#pied ul.pied{
margin-right: auto;
margin-left: auto;
text-align: center;
width: 1500px;
}

#pied ul.pied li{
text-align:left;
font-family: arial;
color: white;
padding-top: 10px;
line-height: 19px;
float: left;
padding-left: 20em;
padding-right: 13em;
}

#pied ul.pied li a img{
padding-top: 30px;
}

/*#pied p{
text-align:left;
font-family: arial;
color: white;
padding-top: 10px;
line-height: 19px;
margin-left: 361px;
}

#france{
margin-left: 1163px;
margin-top: -99px;
width: 129px;
height: 84px;
}*/

/*--------------------------------------------------------- CONCEPT ---------------------------------------------------------------------*/

#cadre_concept{
background: url(images/cadre.jpg);
background-repeat: repeat-y;
width: 951px;
height: 1350px;
margin-right: auto;
margin-left: auto;
margin-top: -10px;
position: relative;
}

#cadre_concept #concept{
width: 850px;
/*height: 1178px;*/
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-left: 119px;
}

#ombre_cadre_concept{
background: url(images/ombre_menu.png);
width: 857px;
height: 24px;
margin-right: auto;
margin-left: auto;
position: relative;
}


/* --------------------------------------------------------------- CONTACT ---------------------------------------------------------*/


		#span_email{
		display: none;
		margin-left: 242px;
		color: red;
		font-weight: bold;
		font-family: arial;
		font-style: italic;
		font-size: 13px;
		}

#cadre_contact{
background: url(images/cadre.jpg);
width: 951px;
height: 700px;
margin-right: auto;
margin-left: auto;
margin-top: -10px;
position:relative;
}

#cadre_contact ul {
left:20px;
top:37px;
position: absolute;
}

#cadre_contact ul li{
float: left;
padding-left: 150px;
font-size: 14px;
font-family: arial;
color: #2c2c2c;
}

#cadre_contact p{
font-size: 14px;
font-family: arial;
color: #2c2c2c;
line-height: 16px;
}

#cadre_contact a{
color: #77ad1c;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#cadre_contact a:hover{
color: #006fb7;
font-size: 16px;
}

#cadre_contact h1{
color: #006fb7;
font-family: 'Cookie', cursive;
font-size: 32px;
line-height: 28px;
padding-bottom: 10px;
}

#cadre_contact #separation{
position: absolute;
background: url(images/separation_contact.png);
top:10px;
left:400px;
width:1px;
height:130px;
}



#cadre_contact #formulaire ul.ligne1{
position: absolute;
top: 227px;
left:181px;
}

#cadre_contact #formulaire ul.ligne1 li{
float: left;
padding-left:35px;
}

#cadre_contact #formulaire ul.ligne2{
position: absolute;
top: 275px;
left:181px;
}

#cadre_contact #formulaire ul.ligne2 li{
float: left;
padding-left:35px;
}

#cadre_contact #formulaire ul.ligne3{
position: absolute;
top: 322px;
left:181px;
}

#cadre_contact #formulaire ul.ligne3 li{
float: left;
padding-left:35px;
}


#cadre_contact #formulaire ul.ligne4{
position: absolute;
top: 371px;
left:181px;
}

#cadre_contact #formulaire ul.ligne4 li{
float: left;
padding-left:35px;
}

#cadre_contact #formulaire ul li input{
line-height: 20px;
height: 25px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: solid 1px #77ad1c;
opacity: 0.5;
}

#cadre_contact #formulaire ul li input:hover{
-webkit-box-shadow: 0px 0px 5px #77ad1c;
-moz-box-shadow: 0px 0px 5px #77ad1c;
-o-box-shadow: 0px 0px 5px #77ad1c;
-ms-box-shadow: 0px 0px 5px #77ad1c;
box-shadow: 0px 0px 5px #77ad1c;
opacity: 1;
}

#cadre_contact #formulaire ul li textarea{
line-height: 20px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: solid 1px #77ad1c;
opacity: 0.5;
}

#cadre_contact #formulaire ul li textarea:hover{
-webkit-box-shadow: 0px 0px 5px #77ad1c;
opacity: 1;
}

input.bt{
position: absolute;
top: 611px;
left:517px;
height: 35px;
width: 150px;
padding-left: 5px;
font-size: 16px;
line-height: 20px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: solid 1px #77ad1c;
opacity: 0.5;
background-color: white;
}

input.bt:hover{
-webkit-box-shadow: 0px 0px 5px #77ad1c;
-moz-box-shadow: 0px 0px 5px #77ad1c;
-o-box-shadow: 0px 0px 5px #77ad1c;
box-shadow: 0px 0px 5px #77ad1c;
opacity: 1;
}

.g-recaptcha{
float: left;
margin-left: 30px;
margin-top: 18px;
}

/*--------------------------------------------- UNIVERSAL SYSTEMS ----------------------------------------------------------------*/

#cadre_universal{
background: url(images/cadre.jpg);
width: 951px;
height: 1183px;
margin-right: auto;
margin-left: auto;
margin-top: -10px;
position:relative;
}

#cadre_universal #universal_logo{
background: url(images/logo_universal.png);
position:absolute;
top: 41px;
left:50px;
width: 274px;
height: 126px;
}

#cadre_universal ul.texte{
position: absolute;
left: 47px;
top:167px;
width: 300px;
}

#cadre_universal ul.texte li{
text-align: left;
font-size: 18px;
font-family: arial;
color: #006fb7;
line-height: 22px;
  background-image: url('images/goute.png');
  background-repeat: no-repeat;
  background-position: 0 1.2em;
  padding-left: 1.6em;
 padding-top: 21px;
}


#cadre_universal #video{
position: absolute;
top:42px;
left:410px;
}

#cadre_universal #logos{
position: absolute;
left: 840px;
top: 372px;
}

#cadre_universal #schema{
position: absolute;
top: 457px;
left: 219px;
}

#cadre_universal p a{
position:absolute;
left: 253px;
top: 728px;
text-align: left;
font-size: 18px;
font-family: arial;
color: #006fb7;
line-height: 22px;
font-weight: bold;
font-style: italic;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#cadre_universal p a:hover{
color: #77ad1c;
}


#cadre_universal #barre{
width: 888px;
height: 3px;
background: url(images/barre.png);
position:absolute;
left:40px;
top:805px;
}

#cadre_universal #images{
position: absolute;
left: -2px;
top: 865px;
z-index: 1000;
}

#cadre_universal #images ul li{
float: left;
padding-left: 50px;
}

#cadre_universal #images ul li img{
height: 273px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}

#cadre_universal #images ul li img:hover{
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
z-index: 1000;
}


/*-------------------------------------------------------- RESERVE --------------------------------------------------------------*/



#cadre_reserve{
background: url(images/cadre.jpg);
width: 951px;
height: 1237px;
margin-right: auto;
margin-left: auto;
margin-top: -10px;
position:relative;
}

#cadre_reserve #reserve_logo{
background: url(images/logo_reserve.png);
position:absolute;
top: 41px;
left:50px;
width: 274px;
height: 126px;
}

#cadre_reserve p{
text-align: justify;
font-size: 17px;
font-family: arial;
color: #006fb7;
line-height: 22px;
position: absolute;
left: 49px;
top:174px;
width: 300px;
}

#cadre_reserve #video{
position: absolute;
top:120px;
left:410px;
}

#cadre_reserve #pot_reserve{
position: absolute;
left: 774px;
top: 452px;
}

#cadre_reserve #correspondance{
position: absolute;
left: 244px;
top: 555px
}

#cadre_reserve #texte{
position: absolute;
left: 48px;
top:182px;
width: 300px;
}

#cadre_reserve #texte ul li{
text-align: left;
font-size: 16px;
font-family: arial;
color: #006fb7;
line-height: 22px;
 background-image: url('images/goute.png');
  background-repeat: no-repeat;
  background-position: 0 1.2em;
  padding-left: 1.6em;
 padding-top: 21px;
}

#cadre_reserve #texte h1{
font-size: 20px;
font-family: arial;
font-style: italic;
font-weight: bold;
color: #006fb7;
margin-top: 61px;
margin-left: 181px;
width: 700px;
padding-top: 11px;
}

#cadre_reserve #titre_reserve {
font-size: 20px;
font-family: arial;
font-style: italic;
font-weight: bold;
line-height: 26px;
color: #006fb7;
text-align: center;
position: absolute;
left: 472px;
top: 44px;
}

#cadre_reserve #barre{
width: 888px;
height: 3px;
background: url(images/barre.png);
position:absolute;
left:40px;
top:838px;
}

#cadre_reserve #images{
position: absolute;
left: 28px;
top: 911px;
z-index: 1000;
}

#cadre_reserve #images ul li{
float: left;
padding-left: 30px;
}

#cadre_reserve #images ul li img{
height: 273px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}

#cadre_reserve #images ul li img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 1000;
}


/* ------------------------------------------------------------------------- RESEAU -----------------------------------------------------------------------*/


#cadre_reseau{
background: url(images/cadre.jpg);
width: 951px;
height: 1160px;
margin-right: auto;
margin-left: auto;
margin-top: -10px;
position:relative;
}

#cadre_reseau #reseau_logo{
background: url(images/reseau_logo.png);
position:absolute;
top: 41px;
left:50px;
width: 274px;
height: 126px;
}

#cadre_reseau #etapes{
position: absolute;
left: 48px;
top:167px;
width: 400px;
margin-top: 20px;
padding: 5px 5px 5px 10px;
border: solid #77ad1c 1px;
border-radius: 10px 10px 10px 10px;
}

#cadre_reseau #etapes h1{
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: arial;
color: #77ad1c;
line-height: 22px;
}

#cadre_reseau #etapes ul li{
text-align: left;
font-size: 15px;
font-family: arial;
color: #77ad1c;
line-height: 22px;
font-style: italic;
}

#cadre_reseau #texte{
position: absolute;
left: 48px;
top:342px;
width: 300px;
}

#cadre_reseau #texte ul li{
text-align: left;
font-size: 16px;
font-family: arial;
color: #006fb7;
line-height: 22px;
 background-image: url('images/goute.png');
  background-repeat: no-repeat;
  background-position: 0 1.2em;
  padding-left: 1.6em;
 padding-top: 21px;
}

#cadre_reseau #texte h1{
font-size: 20px;
font-family: arial;
font-style: italic;
font-weight: bold;
color: #006fb7;
margin-top: 35px;
margin-left: 89px;
width: 700px;
}



#cadre_reseau #logos{
position: absolute;
left: 818px;
top: 466px;
}

#cadre_reseau  #titre_reseau{
position: absolute;
top:3em;
left: 33em
}

#cadre_reseau #titre_reseau h1{
font-size: 20px;
font-family: arial;
font-style: italic;
font-weight: bold;
line-height: 26px;
color: #006fb7;
text-align: center;
}

#cadre_reseau #schema{
margin-left: 144px;
margin-top: 10px;
}

#cadre_reseau #image1{
background: url(images/image_reseau1.png);
position: absolute;
top:165px;
left:490px;
width:418px;
height:326px;
}

#cadre_reseau #barre{
width: 888px;
height: 3px;
background: url(images/barre.png);
position:absolute;
left:40px;
top:813px;
}

/*#cadre_reseau #image2{
background: url(images/image_reseau2.png);
position: absolute;
top:419px;
left:453px;
width:295px;
}*/

#cadre_reseau #images {
position: absolute;
left: 28px;
top: 854px;
z-index: 1000;
}

#cadre_reseau #images ul li{
float: left;
padding-left: 100px;
}

#cadre_reseau #images ul li img{
height: 273px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}

#cadre_reseau #images ul li img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 1000;
}


/*------------------------------------------------------------- CONSEILS & ASTUCES ---------------------------------------------------------*/


#cadre_conseils{
background: url(images/cadre.jpg);
width: 951px;
height: 2400px;
margin-right: auto;
margin-left: auto;
margin-top: -10px;
position:relative;
}

#cadre_conseils #texte{
position: absolute;
width: 750px;
left: 51px;
top: 20px;
}

#cadre_conseils #texte h1{
color:#77ad1c;
font-size: 30px;
font-family: 'Open Sans', sans-serif;
padding-top: 25px;
padding-bottom: 20px;
}

#cadre_conseils #texte h1.concept{
margin-top: 25px;
margin-bottom: 25px;
width: 833px;
background:url(images/titre_aquasolo.png);
/*font-size: 30px;
font-family: 'Open Sans', sans-serif;*/
padding-top: 24px;
padding-bottom: 20px;
}

#cadre_conseils #texte h1.reseau{
margin-top: 25px;
margin-bottom: 25px;
width: 833px;
background:url(images/titre_reseau.png);
/*font-size: 30px;
font-family: 'Open Sans', sans-serif;*/
padding-top: 24px;
padding-bottom: 20px;
}

#cadre_conseils #texte h1.eco{
margin-top: 25px;
margin-bottom: 25px;
width: 833px;
background:url(images/titre_eco.png);
/*font-size: 30px;
font-family: 'Open Sans', sans-serif;*/
padding-top: 24px;
padding-bottom: 20px;
}

#cadre_conseils #texte h1 a{
color:#2c2c2c;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
padding-top: 38px;
padding-bottom: 20px;
}

#cadre_conseils #texte h2{
color:#006fb7;
font-size: 28px;
font-family: 'Cookie', cursive;
padding-top: 5px;
padding-bottom: 5px;
}

#cadre_conseils #texte p{
color:#2c2c2c;
font-size: 15px;
font-family: arial;
padding-bottom: 10px;
line-height: 20px;
}

#cadre_conseils #texte ul li{
color:#006fb7;
font-size: 16px;
font-family: arial;
padding-bottom: 10px;
line-height: 20px;
 background-image: url('images/goute.png');
  background-repeat: no-repeat;
  background-position: 0 0.7em;
  padding-left: 1.6em;
 padding-top: 13px;
}


/*-------------------------------------------------------------- PIERRE DU JARDIN --------------------------------------------------------*/


#cadre_pierre{
background: url(images/cadre.jpg);
width: 951px;
height: 1078px;
margin-right: auto;
margin-left: auto;
margin-top: -10px;
position:relative;
}

#cadre_pierre #pierre_logo{
background: url(images/pierre_logo.png);
position:absolute;
top: 41px;
left:50px;
width: 274px;
height: 126px;
}

#cadre_pierre p{
text-align: justify;
font-size: 17px;
font-family: arial;
color: #006fb7;
line-height: 22px;
position: absolute;
left: 49px;
top:174px;
width: 327px;
}

#cadre_pierre #texte{
position: absolute;
left: 48px;
top:182px;
width: 300px;
}

#cadre_pierre #texte ul li{
text-align: left;
font-size: 16px;
font-family: arial;
color: #006fb7;
line-height: 22px;
 background-image: url('images/goute.png');
  background-repeat: no-repeat;
  background-position: 0 1.2em;
  padding-left: 1.6em;
 padding-top: 21px;
}

#cadre_pierre #texte h1{
font-size: 20px;
font-family: arial;
font-style: italic;
font-weight: bold;
color: #006fb7;
margin-top: 23px;
margin-left: 66px;
width: 700px;
padding-top: 40px;
text-align: center;
}

#cadre_pierre #titre_pierre {
font-size: 20px;
font-family: arial;
font-style: italic;
font-weight: bold;
line-height: 26px;
color: #006fb7;
text-align: right;
position: absolute;
left: 411px;
top: 44px;
}

#cadre_pierre #video{
position: absolute;
top:120px;
left:410px;
}

#cadre_pierre #logos{
position: absolute;
left: 704px;
top: 442px;
}

#cadre_pierre #logos img{
padding-left: 1em;
}

#cadre_pierre #barre{
width: 888px;
height: 3px;
background: url(images/barre.png);
position:absolute;
left:40px;
top:663px;
}

#cadre_pierre #images{
position: absolute;
left: -24px;
top: 737px;
z-index: 1000;
}

#cadre_pierre #images ul li{
float: left;
padding-left: 100px;
}

#cadre_pierre #images ul li img{
height: 273px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
-moz-transition: -moz-transform 0.6s ease-in-out;
-o-transition: -o-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}

#cadre_pierre #images ul li img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 1000;
}


/*------------------------------------------------------------------------ TRADUCTION ---------------------------------------------------------*/


#background #trad{
padding-top: 50px;
padding-bottom: 50px;
}

#background ul.trad{
width: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 0.8em;
padding-left:2em;
padding-right:2em;
padding-bottom:2em;
color: #292929;
font-style: italic;
font-weight: bold;
font-family: arial;
font-size: 20px;
border: solid 2px #77ad1c;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background-color: rgb(255,255,255);
}

#background ul.trad li{
padding-top: 1em;
}

#background #trad p a{
margin-right: auto;
margin-left: 695px;
color: #292929;
font-weight: bold;
font-family: arial;
font-size: 16px;
text-decoration: underline;
}


#background #trad p {
margin-top: 64px;
}