body{
font-family: 'Lato', sans-serif;
font-weight: 300; 
font-size:120%;
padding-top: 1px;
}

nav{
width:100%;
z-index:9999;
text-align:center;
position:absolute;
font-family: 'Raleway', sans-serif;
font-weight: 200; 
}

ul{
width:100%;
margin-top:10px;
}

li{
display: inline;
list-style:none;
margin:20px;
}

a {
text-decoration:none;
}
.keyword_hidden
{
visibility:hidden;
width:10px;
height:10px;
}


#load_screen1{

	background-color:#fff;
	z-index:99999;
	position:fixed;
	width:100%;
	height:100%;

	  border: 1px #aaa solid;
	  text-align: center;
	  display: table-cell;
	  vertical-align: middle;	
}

#load_screen1.anim{
display:none;
}

#loading1{
margin-top:20%;
}

a:link, a:visited {
color: #111111;
transition:0.2s;
}

a:hover, a:active {
color: #E03643;
}

a.act{
color: #000;
}

a.act:hover{
color: #fff;
}

#sec-home{
text-align:justify;
width:90%;
padding:5%;
background-image: url('../img/pattern.jpg');
}

#sec-home p{
margin-bottom: 10px;

}

#gal, #gal1, #gal2 {
width:100%;
overflow:hidden;
background-image: url('../img/pattern2.png');
}

 #gal2 {
height:0;
margin-top:-5px;
}

#gal2.anim{
height:100%;
}


#more-pic{
width:96%;
text-align:center;
padding:2%;
cursor:pointer;
color:#F7F7F7;
transition:.5s;
margin-top:-5px;
font-family: 'Lato', sans-serif;
font-weight: 400; 
background-image: url('../img/pattern1.jpg');

}

.more-pic{
width:96%;
text-align:center;
padding:2%;
cursor:pointer;
color:#F7F7F7;
transition:.5s;
margin-top:-5px;
font-family: 'Lato', sans-serif;
font-weight: 400; 
background-image: url('../img/pattern1.jpg');

}

#more-pic h2:hover{
color:#E03643;
}

#album{
width:96%;
text-align:center;
padding:2%;
cursor:pointer;
color:#F7F7F7;
transition:.5s;
margin-top:-5px;
font-family: 'Lato', sans-serif;
font-weight: 400; 
background-image: url('../img/pattern1.jpg');

}

#album h2:hover{
color:#E03643;
}
#gal-pic1,#gal-pic2,#gal-pic3,#gal-pic4{
opacity:0;
width:25%;
float:left;
transform:translate(-20px);
}

#gal-pic1{
z-index:9999;
transition:0.5s ease 0.1s;
}

#gal-pic2{
z-index:9;
transition:0.5s ease 0.2s;
}

#gal-pic3{
z-index:8;
transition:0.5s ease 0.3s;
}

#gal-pic4{
z-index:7;
transition:0.5s ease 0.4s;
}

#gal-pic1.anim,#gal-pic2.anim,#gal-pic3.anim,#gal-pic4.anim{
transform:translate(0);
opacity:1;
}


#gal-pic1 img,#gal-pic2 img,#gal-pic3 img,#gal-pic4 img{
width:100%;
transition:0.5s ease;
}

#gal-pic1:hover img, #gal-pic2:hover img,#gal-pic3:hover img,#gal-pic4:hover img{
transform:scale(1.01);
}

.camping{
text-align:center;
background-image: url('../img/pattern1.jpg');
width:90%;
padding:5%;
margin-top:-5px;

}

#camp-logo embed{
margin-top:1%;
}

#camp-title{
padding-top:2%;
color:#E03643;
margin-bottom:5%;
}

.camp-services{
display: flex;
margin-bottom:3%;
width:93%;
padding:3%;
background-color:#c6c6c6;
opacity:0.7;
}

#camp-ser-logo{
text-align:center;
padding:4%;
width:93%;
}


#camp-ser-logo embed{
width:70%;
}

.camp-ser{
cursor:pointer;
}

.camp-ser p{
transition:.5s ease;
}

.camp-ser:hover p{
color:#E03643;
}


.clear-fix{
clear:both;
}

.camp-ser{
vertical-align:top;
width:5%;
font-size:80%;
display: inline-block;
padding:2.5%;
}

#gal{
width:100%;
background-image: url('../img/pattern2.png');

}

#main-entrance.black-class, #auberge.black-class, #charity.black-class, #charity1.black-class, #charity2.black-class, #charity3.black-class, #mobile-home.black-class, #mobile-home1.black-class, #mobile-home2.black-class, #mobile-home3.black-class, #mobile-home4.black-class, #mobile-home12.black-class, #wc.black-class, #wc1.black-class, #swiming-pool.black-class, #grey-water.black-class{
fill:#3F3F3F;
transition:0.5s;
}


#main-entrance.white-class, #auberge.white-class, #charity.white-class, #charity1.white-class, #charity2.white-class, #charity3.white-class, #mobile-home.white-class, #mobile-home1.white-class, #mobile-home2.white-class, #mobile-home3.white-class, #mobile-home4.white-class, #mobile-home12.white-class, #wc.white-class, #wc1.white-class, #swiming-pool.white-class, #grey-water.white-class{

fill:#E03643;

}

#moro-marche.black-class, #mobile-home5.black-class, #mobile-home6.black-class, #mobile-home7.black-class, #mobile-home8.black-class, #mobile-home9.black-class, #mobile-home10.black-class, #bed.black-class{
stroke:#3F3F3F;
transition:0.5s;
}

#moro-marche.white-class, #mobile-home5.white-class, #mobile-home6.white-class, #mobile-home7.white-class, #mobile-home8.white-class, #mobile-home9.white-class, #mobile-home10.white-class, #bed.white-class{
stroke:#E03643;
}

.fbf{

margin-top:-5px;
overflow:hidden;
width:25%;
float:left;
position:relative;

}

strong{
color:#E03643;
}

.tbf{
margin-top:-5px;
overflow:hidden;
width:50%;
float:left;
position:relative;
}

.too{
width:100%;}




#about{
background-image: url('../img/pattern2.png');
padding:5%;
width:90%;
text-align:center;
display:flex;
}



.about_{
font-family: 'Raleway', sans-serif;
font-weight: 200; 
margin:0.5%;
}

#about p{
font-family: 'Raleway', sans-serif;
font-weight: 400; 
}
.about_us{
    width: 70%;
}
.about_google{
    width: 30%;
}
#footer{
width:98%;
text-align:center;
background-color:#232323;
padding:1%;
color:#DDDDDD
}

#test1{
transform:translate(-20%);
transition:0.5s ease 0.1s;
opacity:0;
}

#test2{
transform:translate(-20%);
transition:0.5s ease 0.2s;
opacity:0;
}

#test3{
transform:translate(-20%);
transition:0.5s ease 0.3s;
opacity:0;
}

#test4{
transform:translate(-20%);
transition:0.5s ease 0.4s;
opacity:0;
}

#test5{
transform:translate(-20%);
transition:0.5s ease 0.5s;
opacity:0;
}

#test6{
transform:translate(-20%);
transition:0.5s ease 0.6s;
opacity:0;
}

#test1.anim, #test2.anim, #test3.anim, #test4.anim, #test5.anim, #test6.anim{
transform:translate(0);
opacity:1;
}

@media only screen and (min-width: 768px) and (max-width: 1150px) {
#camp-ser{
width:10%;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
li{
display: block;
margin:5px;
background-color:rgba(61, 61, 61, 0.2);
}

#sec-home{
font-size:70%;
}

#camp-ser{
width:10%;
}

#camp-ser p{
display:none;
}

#camp-ser embed{
width:80%;
}

#camp-ser{
cursor:pointer;
}

#camp-ser p{
transition:.5s ease;
}

#fbf{
width:50%;
}

#tbf{
width:100%;
}
}
@media only screen and (max-width: 480px) {


li{
display: block;
margin:5px;
background-color:rgba(61, 61, 61, 0.2);
}

#sec-home{
font-size:70%;
}

#camp-logo embed{
width:15%;
}

#camp-services{
display:none;
}

#fbf{
width:50%;
}

#tbf{
width:100%;
}
}


#diapo{
  position:relative;
  height:30em;
  margin:auto;
  text-align:center;
  margin: 2em 2em;
}
#diapo div{
  display:inline-block;
}
#diapo > * + *{
  margin-left:5px;
}
.big_image{
  position:absolute;
  display:block;
  width:600px;
  top:100px;
  left:0;
  right:0;
  margin:0 auto;
  opacity:0;
  border:10px solid #FFF;
  box-shadow: 0 2px 8px 2px #666;

  -webkit-transform:scale(0.25);
     -moz-transform:scale(0.25);
      -ms-transform:scale(0.25);
       -o-transform:scale(0.25);
          transform:scale(0.25);

  -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
       -o-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
}
.r_check, .on_check{
  cursor: pointer;
}
.r_check:checked ~ label img{
  opacity:0.25;
  border:2px solid #006699;
}
.r_check:checked ~ .big_image {
  opacity:1;

  -webkit-transform:scale(1);
     -moz-transform:scale(1);
      -ms-transform:scale(1);
       -o-transform:scale(1);
          transform:scale(1);
}
.r_check{
/*  display:none;/* si masquer pas acces avec touche */
  opacity:0;
  position:absolute;
}
label img.vignette{
  width:100px;
  height:75px;
  border:2px solid #FFF;
}
.retour{
  color:#909090;
  font-size:1em;
  left:1em;
  bottom:1em;
  position:fixed;
  text-decoration:none;
  font-style:italic;
  text-shadow:1px 1px 0px #FFF;
}
.retour:hover{
  font-style:normal;
  color:#706040;
}