@font-face {
    font-family : Berthold;
    src: url(font/blockberthold.otf);
}
@font-face {
    font-family : Alegreya;
    font-style: bold;
    src: url(font/Alegreya-Bold.otf);
}
@font-face {
    font-family : Alegreya;
    font-style: italic;
    src: url(font/Alegreya-Italic.otf);
}
@font-face {
    font-family : Alegreya;
    src: url(font/Alegreya-Regular.otf);
}
*{
    margin:0;
    outline: none;
    border: 0;
}

body{
  background-image: url("img/fond2.jpg");
  background-attachment: fixed;

}

p, .p, label, ul li {
  font-family: "Alegreya", Arial, Helvetica, sans-serif;
  font-style:normal;
  /* margin: 20px 0; */
  font-size: 24px;
  color:cornsilk;
}
#newsletter .p{
  color:#fede57;
}
p b, p strong  {
  font-family: "Alegreya", serif;
  font-style: bold;
}
p i{
  font-family: "Alegreya", serif;
  font-style: italic;
}
.part ul{
  margin-left:10% ;
  margin-right:10% ;
  padding:0;
}
li{
  list-style-type: none;
}
 h2, h3, h4, #menu,  .date{
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 20px;
  color:#fede57;

}
h1{
   font-family: "Berthold", "Bebas Neue", "Impact", sans-serif;
  font-size:150px;
  position:relative;
  top:-100px;
    font-weight: 400;
  font-style: normal;
  margin-top: 20px;
  color:#fede57;
}

h2{
  font-size:50px;
    letter-spacing: 15px;
}
span.p{
  font-size:18px;
}


main{
    margin:0 10%;
}

.part{
/* text-align:center; */
  margin:60px ;

}
.espace{
  width:10px;
  height:20px;
}
p{
  margin-left:10%;
  margin-right:10%;
}
.part h2{
  margin:50px 10% 30px;
}

header{
    text-align: center;
}
#logo{
  padding:100px;
  padding-right:180px;
  width:30%;
  margin:0 auto;
}

#logo img{
  width:100%;
  /* mix-blend-mode:luminosity; */

}



#menu{
  /* position:sticky; */
    top:0px;
    margin:30px 21%;
     z-index: 0;
       letter-spacing: 2px;


}
#menu li{
  margin:0;
}
#menu path{
  fill:cornsilk;
}
#presentation .center{
  text-align: center;
}
#presentation .center img{
  width:100%;
}
#medias{
  text-align: center;
}
#medias h2{
  text-align:left;
}
footer{
  text-align: center;
  padding:20px 0;
  margin-top:30px;

}
#contact p, #contact h2{
  text-align : center;
}
#menu ul{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
    min-height:30px;
    padding:0;
  
}

#contact a, #menu a, .blocEP a, #valeurs a{
  border: 1px solid cornsilk;
  padding:10px;
  display:inline-block;
  color:cornsilk;
  font-size: 18px;
}
#contact a:hover, #menu a:hover, .blocEP a:hover, #valeurs a:hover{
  border-color:#fede57;
  color:#fede57;
  fill : #fede57;
}
#menu a:hover path{
  fill : #fede57;
}



.list-medias{
  display: flex;
flex-wrap: wrap;
}
.list-medias img{
  max-height: 200px;
  width: auto;
  margin:5px;
}
.list-medias .video{
  margin:5px;
}
#stars{
  width:100%;
  height:2000px;
  position:absolute;
  z-index:0;
  display:flex;
  flex-wrap: wrap;
  pointer-events: none;
}
content{
  position:absolute;
  z-index:50;
  background-image:url("img/fond3.png");
  background-repeat: no-repeat;
  background-position: bottom;
}

#couche1{
  background-image: url("img/lune3.png");
background-repeat: no-repeat;
background-size: 550px;

background-position-x:115%;
background-position-y: 500px;
  top:0;
  position:fixed;
  width:100%;
  z-index: 2;
  pointer-events: none;
}
#couche2{
  background-image: url("img/lune2.png");
background-repeat: no-repeat;
background-size: 450px;
background-position-x:105%;
background-position-y: 500px;
  top:0;
  position:fixed;
  width:100%;
  z-index: 2;
  pointer-events: none;
}
#couche3{
  background-image: url("img/lune1.png");
background-repeat: no-repeat;
background-size: 300px;
background-position-y: 500px;
background-position-x:95%;
  top:0;
  position:fixed;
  width:100%;
  z-index: 2;
  pointer-events: none;
}


#statue{
  background-image: url("img/statue.png");
  width:100%;
  position:fixed;
  background-position: left bottom;
  background-repeat: no-repeat;
background-size: 25%;
z-index:100;
pointer-events: none;
}
#etoiles{
    background-image: url("img/etoiles.png");
    width:100%;
    z-index: 2;
    position:fixed;
}
.partenaires{
  display:flex;
  justify-content: space-around;
  padding-left:10%;
}
.partenaires img{
height:50px;
}
.blocEP{
  display:flex;
  padding:0 10%;
  text-align:left;
  margin:40px 0;
}
.blocEP h2{
  margin-left:10%;
}



@media (max-width: 810px) {
  body{
    background-image: url("img/fond4.jpg");
    background-attachment: scroll;
  }
  main{
    margin:0;
  }
  header{
    margin-top:160px;
  }
  content{
    width:100%;
  }
  h1{
    font-size:80px;
    margin-top:90px;
  }
  .part h2, footer h2{
    font-size: 40px;
    margin-left:20px ;
  }
  p, .p, label, ul li{
    font-size:18px;
  }
  #logo{
    padding:20px;
    width:70%;
  }
  #menu{
    margin:30px;
  }
  #menu a{
    background-image: none;
    padding-top:5px;
    padding-bottom:5px;
  }
  .part {
  width: 100%;
  margin: 30px 0;
}
.part img{
  width:100%;
}
#distinctions ul, #concerts ul{
  padding-left: 0;
}
.blocEP{
  display: block;
}
#medias .blocEP h2{
  font-size:25px;
  margin:20px 0 0 0;
}
#medias .blocEP p{
  margin:0 0 30px 0;
}
#medias iframe{
  width: 90%;
  margin:10px 0;
}
 #valeurs a{
  margin-top:30px;
 }
 #statue, #couche1, #couche2, #couche3{
  display: none;
 }
 .partenaires img{
  height:30px;
 }
 .partenaires{
  flex-wrap: wrap;
 }


}