@font-face {
  font-family: 'Gloria Hallelujah';
  font-style: normal;
  font-weight: 400;
  src: local('Gloria Hallelujah'), local('GloriaHallelujah'), url(police.woff) format('woff');
}

body{margin:0;padding:0;
font-family: 'Gloria Hallelujah', cursive;
text-align:justify;
font-size:1.1em;

}

#slideshow{position:absolute;width:100%;height:100%;top:0px;left:0px;z-index:20;}
#slider{display:flex;flex-direction:row;
position:relative;top:0;

width:300%;height:100%;animation:slideshow 25s infinite;}
#slider div{height:100%;flex:1;}

@keyframes slideshow {
  0% {left:0%;}
  28% {left:0%;}
  33% {left:-100%;}
  61% {left:-100%;}
  66% {left:-200%;}
  94% {left:-200%;}
  100% {left:0%;}
}


#slider1{background: url(image/IMG_2224.JPG) no-repeat center; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */}
#slider2{background: url(image/IMG_2228.JPG) no-repeat center; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */}
#slider3{background: url(image/IMG_2232.JPG) no-repeat center; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */}

h1{font-size:5em;text-shadow: 0px 0px 9px #777;
}
h2{font-size:2em;margin-top:0;padding:0;}

#open-menu{position:fixed;top:20px;right:20px;height:50px;width:70px;z-index:200;}
#open-menu div{position:absolute;
height:10px;width:100%;
border-radius:5px;
transform-origin:50% 50%;
background: url(fond2.png) no-repeat center; 
  -webkit-background-size: 100% 100%; /* pour anciens Chrome et Safari */
  background-size: 100% 100%; /* version standardisée */
}
#bar1, #bar4{transition:opacity .2s;}
#bar2, #bar3{transition:all .5s;}


.open #bar1{top:0%;}
.open #bar4{bottom:0%;}
.open #bar2{transform:translate(0%, -50%);top:50%;}
.open #bar3{transform:translate(0%, -50%);top:50%;}

.close #bar1{opacity:0;}
.close #bar4{opacity:0;}
.close #bar2{background-color:red;transform:translate(0%, -50%) rotate(45deg);top:50%;}
.close #bar3{background-color:red;transform:translate(0%, -50%) rotate(-45deg);top:50%;}

#menu{position:fixed;height:100%;width:300px;top:0px;right:-500px;z-index:150;
background: url(menu.png) no-repeat center; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
transition:all .7s .3s;
padding:20px;
display:flex;flex-direction:column;}
#menu div{flex:1;font-size:2em;transition:all .5s;text-align:center;}
#menu div:hover{color:gold;transform:scale(1.1);}
#menu div:hover a{color:gold;transform:scale(1.1);}
#menu a{text-decoration:none;color:white;transition:all .7s;}
#home{

}
#home-text{text-align:center;z-index:30;position:relative;color:white;
display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:100%;
}
#galery-title{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;
}


.slide-text {width:38%;padding:50px;text-align:center;opacity:0;transition:opacity .7s;}
.slide-image {width:62%;height:100%;}
.slide-image img{object-fit:cover;width:100%;height:100%;
transition:transform .5s;}
.slide-image img:hover{transform:scale(1.1);}
.image-title{font-size:1.2em;font-weight:bold;}

.container{display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:center;
		width:100%;height:100%;
}



#bio-picture{height:100%;width:38%;
transition:opacity 1s;
opacity:0;}
#bio-picture img{object-fit:cover;width:100%;height:100%;}

#bio-text{padding:50px;width:62%;
opacity:0;
transition:opacity 1s 1s;}




#about-picture{height:100%;width:38%;
transition:opacity 1s 1s;
opacity:0;}
#about-picture img{object-fit:cover;width:100%;height:100%;}

#about-text{padding:50px;width:62%;
opacity:0;
transition:opacity 1s;}

#contact-picture{height:100%;width:38%;
transition:opacity 1s 1s;
opacity:0;}
#contact-picture img{object-fit:cover;width:100%;height:100%;}

#contact-text{padding:50px;width:62%;
opacity:0;
transition:opacity 1s;}

form{width:100%;
}
form p{
margin:0px;
}
input{width:100%;border:none;
font-size:1.1em;color:black;
background: url(email.png) no-repeat;
background-size:100% 100%;}
input::placeholder{font-size:0.8em;color:black;font-family: 'Gloria Hallelujah', cursive;}

textarea{width:100%;background: url(email.png) no-repeat;
webkit-background-size: 100% 100%; /* pour anciens Chrome et Safari */
  background-size: 100% 100%; /* version standardisée */border:none;
font-size:1.1em;color:black;}
textarea::placeholder{font-size:0.8em;color:black;font-family: 'Gloria Hallelujah', cursive;}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: black;
font-family: 'Gloria Hallelujah', cursive;}
input:-moz-placeholder, textarea:-moz-placeholder {color: black;
font-family: 'Gloria Hallelujah', cursive;}

#last{width:100%;display:flex;flex-direction:row;justify-content:center;}
#submit{color:black;font-size:1.2em;
transform:all .7s;
font-family: 'Gloria Hallelujah', cursive;
width:50%;
background: url(fond2.png) no-repeat;
webkit-background-size: 100% 100%; /* pour anciens Chrome et Safari */
  background-size: 100% 100%; /* version standardisée */}
#submit:hover{transform:scale(1.1);}
#obligatoire{color:red;font-style:italic;}

footer{position:absolute;bottom:0px;left:0px;width:100%;
display:flex;flex-direction:row;justify-content:space-between;}
footer span{padding:10px;
}
footer span a{text-decoration:line;color:white;
}
#CW{color:white;}

#enter{position:relative;height:70px;width:170px;}
#enter div{position:absolute;

}
#c{width:100%;height:100%;top:0;left:0;line-height:70px;animation:enter 2s infinite;}
#c a{color:white;text-decoration:none;font-size:2em;
transition:all .5s;
}
#h{width:0%;height:100%;top:0;left:-5%;opacity:0;
background: url(fond2.png) no-repeat center; 
  -webkit-background-size: 100% 100%; /* pour anciens Chrome et Safari */
  background-size: 100% 100%; /* version standardisée */
transition:all .5s;}

#enter:hover #h{width:110%;opacity:.8;}
#enter:hover a{color:black;}
@keyframes enter {
  0% {transform:scale(1);}
  50% {transform:scale(1.1);}
  100% {transform:scale(1);}
}

@media screen and (max-width:750px){
body{font-size:1em;
}
	h1{font-size:3em;}
	h2{padding-top:0;}
  #about-picture{display:none;}
  #bio-picture{display:none;}
  #contact-picture{display:none;}
  
  #about-text{width:90%;padding-top:0;}
  #bio-text{width:90%;padding-top:0;}
  #contact-text{width:90%;padding-top:0;}
  
	.container{display:flex;
		flex-direction:column;}
	.slide-image{width:100%;height:62%;}
	.slide-text{width:100%;height:38%;}
	#CW, #CW a{color:black;}
	footer span{font-size:0.8em;}
	footer{justify-content:space-between;}
	
}
@media screen and (max-height:700px){

	

}