/*Photo*/
#one {
  width: 100%;
 padding-top: 5%;
 width:1335px;
 height: 350px;
 }

#one {
  width:100%;
  height:500px;
  object-fit: cover;
}

#photo_logo{
    width: 300px;
    height: 300px;
}


#two{
width: 600px;
height: 350px;
padding-left: 30%;
}

#three{
    padding-top: 15%;
    width: 650px;
    height: 550px;
   margin-left: 65%;
}





/*Container */


#container1 {
  width:100%;
  max-height:500px;
  position:relative;
  }

#container2{
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 30%;

}




  /*Police */

  .text1{
    padding-top: 5%;
  padding-right: 40%;
  text-align: left;
  }
p{
    text-align: center;
    }

  .text2{
    text-align: left;
    padding-left: 30%;
    padding-right: 25%;
  }
    
  h1 {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(0, 0, 0);
    font-size: 40px;
    padding: 20px;
  }
 
 
/*Derniere image */
#container4 {
  position: relative;
  width: 100%;
  max-width: 600px;
  padding-top: 5%;
}

#container4 img {
  width: 100%;
  height: auto;
}

#container4 h4 {
  position: absolute;
  width: 100%;
  left: 0;
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 20px;
}

#container4 .h4 {
  top: 30%;
  left:40%;
}

#container4 .h42 {
  top: 50%;
  left:40%;
}

#container4 .h43 {
  top: 70%;
  left:40%;
}





@media (max-width: 768px) {
  #one {
      width: 100%;
      height: 250px;
  }
  
  #container1 h1 {
      font-size: 24px;
      padding-bottom: 200px;
      padding-right: 5%;
  }
  
  h1{
    padding-top: 45%;
  }
  
  #photo_logo {
      width: 200px;
      height: 200px;
  }
  
  #two {
      width: 90%;
      height: auto;
      padding-left: 5%;
      margin-left: 0;
  }
  #three{
    width: 90%;
      padding-right: 50%;
      margin-left: 0;

  }
  .text1, .text2 {
      padding-left: 10%;
      padding-right: 10%;
      font-size: 13px;
      text-align: left;
  }
  
  #container2, #container3 {
      flex-direction: column;
      align-items: center;
      padding-left: 0;
  }
  
  #container4 h4 {
      max-width: 100%;
      text-align: left;
      font-size: 15px;
  }
  
  
  
}











/* Ordinateurs (écrans larges) */
@media (min-width: 1025px) {
  #one {
      height: 500px;
  }
  
  #container1 h1 {
      font-size: 40px;
  }
  
  #photo_logo {
      width: 300px;
      height: 300px;
  }
  
  #two, #three {
      width: 600px;
      height: 350px;
  }
  
  
  
  .text2 {
      padding-left: 30%;
      padding-right: 25%;
  }
}




/*Police d'écriture*/

@font-face {
  font-family: 'Peristiwa';
  src: url('../Style/font/Peristiwa.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
h1 {
  font-family: 'Peristiwa', sans-serif;
}

@font-face {
  font-family: 'Open sans';
  src: url('../Style/font/OpenSans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.text1 {
  font-family: 'Open sans', sans-serif;
}
.text2 {
  font-family: 'Open sans', sans-serif;
}
h4{
  font-family: 'Open sans', sans-serif;
}
.p{
  font-family: 'Open sans', sans-serif;
}