body, html, header{
  margin: 0px;
  padding: 0px;
}
body{
  font-family: Helvetica;
  background-color: orange;
}
header, body, html{
  width: 100%;
  height: 100%;
}

header{
  background: url("../image/photo.jpg") no-repeat center center  ;
  background-attachment: scroll;
 
  background-size:cover ;
  color: rgb(255, 255, 255);
 
}

.wrapper{

  display: table;
  width: 100%;
  height: 100%;

}
.content{
display: table-cell;
text-align: center;
vertical-align: middle;
text-shadow: 1px 1px 10px black;
}
h1{
  margin-top: -300px;
  font-size: 80px;
}
h2{
 
  font-size: 40px;
}

h6{
  color: black;
  font-size: 20px;
}
.content img{
  margin-right: 40px;
  text-align: center;
  text-shadow: 3px 3px 30px black;
}

main{
 
  max-width: 2000px;
  margin: 80px auto;
}
.menu{
  background-color: red;
   width: 100%;
   height: 120px;
   line-height: 120px;
}

.m-left{
   float: left;
   margin-left: 30px;
  margin-top: 10px;
  }
.m-left img{
   width: 200px;
   border-radius: 20px;
   margin: 0;
   padding: 0;
}

.m-right{
  padding: 10px 10px;
  display: flex;
  border-radius: 10px;
  font-size: 20px;
  margin-top: 50px;
  background-color: #fff;
  border: solid black 2px;
  float: right;
   margin-right: 20px;
}

.m-link{
   
  text-decoration: none;
   color: black;
   text-transform: uppercase ;
   font-weight: 700;
   padding: 0;margin: 0 10px ;
}

.m-link:hover{
  text-decoration: none;
  color: white;
  border-bottom: 2px solid black;
}
 .m-right:hover{
  color: #fff;
  background-color: black;
 }
  .texte_centrer {
    display: table-cell;
    
   
    max-width: 3000px;
 
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size: 100px;
  }
  .background {
  
    background: blue;
    }
    
    p{
      color: orange;
      font-size: 25px;
      text-shadow: 4px 4px 20px black;
    }
   
    @media screen and (max-width: 850px) {
      h1{
        font-size: 40px;
      margin-top: -80px;
      }

      h2{
          font-size: 20px;
        }
      P{
        font-size: 15px;
      }
        .m-left img{
          width: 100px;
          border-radius: 20px;
          margin: 0;
          padding: 0;
       }
}

.scroll-container{
max-width: 600px;
  padding: 30px 80px;
  background-color: #fff;
  border-radius: 10px;
 margin: 80px auto;
    text-align: center;
    border: solid black 3px;

  }








@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.scroll-element img{
margin: 80px auto;
  width: 400px;
}



.scroll-element .grid-item2 p{
 font-family: Trebuchet MS, sans-serif;
 font-size: 25px;
color: black;

}



@media screen and ((max-width: 650px)) {
  .scroll-container{
    padding: 20px 10px;
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 300px;
        text-align: center;
        border: solid black 3px;
    
      }
  .scroll-element img{
 
      width: 40px;
    }
    
  .scroll-element .grid-item2 p{
    font-family: Trebuchet MS, sans-serif;
    font-size: 20px;
   color: black;
   
   }

   .scroll-element p{
    font-family: Trebuchet MS, sans-serif;
    font-size: 20px;
   color: black;
   }
   .scroll-container{
  margin: 80px auto;
    text-align: center;
    border: solid black 3px;
   width: 200px;
  }


  .scroll-element .grid-item2 p{
    font-family: Trebuchet MS, sans-serif;
    font-size: 10px;
   color: black;
   
   }
   
}



.container {
  max-width: 1000px;
  margin: auto;
  position: relative;
}

.slides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  color: white;
  top: 50%;
  transform: translate(0, -50%);
  padding: 16px;
  border-radius: 0 3px 3px 0;
  background: rgba(0, 0, 0, .5);
  transition: all .3s;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background: rgba(0, 0, 0, .8);
}



.active,
.dot:hover {
  background: #717171;
}


#image{
  border-radius: 10px;
  padding: 10px 20px;
  background-color: #fff;
  border: solid black 3px;
  max-width: 1000px;
  margin: 200px auto;
  
}

#image .group img{
 
  border-radius: 10px;
  border: solid black 6px;
  width: 420px;
 
  
 
}


#image .group2 img{
  margin-top: -557px;
  margin-left: 530px;
  position: absolute;
  border-radius: 10px;
  border: solid black 6px;
  width: 420px;
 
  
}

.info{
  margin: 40px auto;
  text-align: center;
  font-size: 25px;
}
 
@media screen and (max-width: 1065px){

  #image{
    padding: 10px 20px;
      background-color: #fff;
      border: solid black 3px;
      max-width: 700px;
      margin: 200px auto;
      
    }
    
    #image .group img{
     
      border-radius: 10px;
      border: solid black 3px;
      width: 300px;
     
      
     
    }
    
    
    #image .group2 img{
      margin-top: -395px;
      margin-left: 350px;
      position: absolute;
      border-radius: 10px;
      border: solid black 3px;
      width: 300px;
     
      
    }
    
    .info{
      margin: 40px auto;
      text-align: center;
      font-size: 20px;
    }
}

@media screen and (max-width: 760px){
  #image{
    padding: 10px 20px;
      background-color: #fff;
      border: solid black 3px;
      max-width: 500px;
      margin: 200px auto;
      
    }
    #image .group img{
     
      border-radius: 10px;
      border: solid black 2px;
      width: 200px;
     
      
     
    }
    #image .group2 img{
      margin-top: -265px;
      margin-left: 255px;
      position: absolute;
      border-radius: 10px;
      border: solid black 2px;
      width: 200px;
     
      
    }
    
    .info{
      margin: 40px auto;
      text-align: center;
      font-size: 20px;
    }
  }

  @media screen and (max-width: 550px){
    #image{
      padding: 10px 20px;
        background-color: #fff;
        border: solid black 3px;
        max-width: 300px;
        margin: 200px auto;
        
      }
      #image .group img{
       
        border-radius: 10px;
        border: solid black 2px;
        width: 120px;
       
        
       
      }
      #image .group2 img{
        margin-top: -155px;
        margin-left: 140px;
        position: absolute;
        border-radius: 10px;
        border: solid black 2px;
        width: 120px;
       
        
      }
      
      .info{
        margin: 40px auto;
        text-align: center;
        font-size: 15px;
      }
    }


    .image-grid {
  
      margin: 150px auto;
      max-height: 900px;
      max-width: 900px;
      background-color: #fff;
      border: solid black 2px;
      --gap: 16px;
      --num-cols: 4;
      --row-height: 300px;
    
      box-sizing: border-box;
      padding: var(--gap);
    
      display: grid;
      grid-template-columns: repeat(var(--num-cols), 1fr);
      grid-auto-rows: var(--row-height);
      gap: var(--gap);
    }
    
    .image-grid > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .image-grid-col-2 {
      grid-column: span 2;
    }
    
    .image-grid-row-2 {
      grid-row: span 2;
    }
    
    
    @media screen and (max-width: 1024px) {
      .image-grid {
        --num-cols: 2;
        --row-height: 200px;
      }
    }
    

    .info2{
    margin-top: 100px;
      grid-column-start: 2;
      grid-column-end: 5;
      font-size: 20px;
    }