@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

html{
  scroll-behavior:smooth;
}

body{
  margin: 0;
  padding:0;
  font-family: 'Raleway', sans-serif;
  align-items:center;
}
img {
  display: block;
  margin: 0 auto;
  max-width: 80%;
      }

h1{
  padding:5px;
  font-size:1.8em;
  color:darkblue;
  text-align:center;
  text-wrap:normal;
  margin-bottom:-10px;
}
	  
h2{
  padding:5px;
  font-size:1.4em;
  color:darkblue;
  text-align:center;
  text-wrap:normal;
  margin-bottom:-10px;
}

h4{
  margin-top: -20px;
  padding:10px;
  text-align:left;
  text-wrap:normal;
}

header{
  height:auto;
  background: whitesmoke;
  background-position: center;
  color: darkblue;
  text-align:center;
}

header nav{
  display:flex;
  flex-wrap:wrap;
  width:100%
  justify-content:space-between;
  background-color: rgba(255,255,255, 0.6);
  padding:5px;
  color: red;
  position:fixed;
  top: 2px;
}
header nav a{
  color: red;
  /*float: right;*/
margin-top: 5px;
font-size:1.2em;	
font-weight:600;font-family:'arial';text-transform:uppercase;
text-decoration:none;
color:red;
margin-right:15px;
	margin-left: 15px;

}


header nav a:hover {
  color:darkblue;
  border-bottom: #919191 solid 1px;
}

header .principal{
  margin-top: 33px;
  margin-left:3%;
  margin-right:3%;
  display:flex;
  flex-direction:column;
  /*justify-content:center;*/
}

header .principal h4{
  margin-top: -20px;
  padding:10px;
  text-align:left;
  text-wrap:normal;
}
.presentation{
 }
.animation{
  height:auto;
  background-color: whitesmoke;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.animation h2{
  padding:5px;
  color:darkred;
  text-align:center;
  text-wrap:normal;
  margin-bottom:-10px;
  }
  
/*.premieres-presentations{
  background-color: whitesmoke;
  color:darkblue;
  margin-left:5%;
  display:flex;
  flex-wrap:wrap;
}

.premieres-presentations .droite{
  /*width: 40%;*/
 /* margin-left:20px;*/
}

.montage{
  margin-top: 30px;
  margin-left:3%;
  margin-right:3%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-color:blue;
}
  
.histoire{
 background-color:lightblue;
 }
/*.offres{
  padding:10px;
  background: url('https://cutt.ly/TzaFkYJ');
  background-position:center;
  color:#fff;
}

.offres h1, .offres p{
  text-align:center;
}

.offres .offres-cartes{
  margin-top: 30px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.offres .carte{
  background-color:#fff;
  color:#000;
  padding:20px;
  margin-right: 30px;
  margin-bottom: 20px;
}

.offres .carte img{
  height: 60px;
}

.partenaires{
  padding-top: 20px;
  padding-bottom: 30px;
  background-color: #222f3e;
  color:#fff;
}

.partenaires h1{
  text-align:center;
}

.partenaires .partenaires-images{
  margin-top: -30px;
  padding:20px;
  display:flex;
  overflow-x: auto; 
}

.partenaires .partenaires-images p{
  margin-right: 30px;
}

.partenaires .partenaires-images p img{
  height:40px;
}*/
.tarifs{
background-color:lightblue;
}
.tarifs h4{
margin-left:15%;
}

.contact{
 background-color:whitesmoke;
}

.contact h4{
  padding:10px;
  font-size:1.1em;
  color:darkblue;
  text-align:center;
  text-wrap:normal;
}

footer {
  background-color: #18212b;
  height:auto;
  padding: 5px;
  color: #fff;
  display: flex;
  flex-wrap:wrap;
  text-align:center;
  /*justify-content: space-between;*/
}

footer .social-media{
  display: flex;
}

footer .social-media p{
  margin-right: 15px;
  border: 1px solid #fff;
  border-radius: 100%;
  padding: 5px;
  text-align:center;
  width: 20px;
  cursor:pointer;
}

@media screen and (max-width: 810px){
  .premieres-presentations .gauche{
    width: 100%;
    margin-right:10px;
  }
  .premieres-presentations .droite{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}