/*Nav */
@media (max-width:768px) {

    .nav > .nav-header > .nav-title > img{/*Logo*/
      margin-left: 0px;
    }

    .nav > .nav-btn {   /*Hamburger btn*/
      display: inline-block;
      position: absolute;
      right: 0px;
      top: 0px;
    }
    .nav > .nav-btn > label {/*Hamburger btn box*/
      display: inline-block;
      width: 70px;
      height: 70px;
    }
    .nav > .nav-btn > label:hover,.nav  #nav-check~ .nav-btn > label {
      /* background-color: rgba(176, 8, 8, 0.3); */
      padding-top: 19px;
      cursor: pointer;
    }
    .nav > .nav-btn > label > span {/*Hamburger btn layers*/
      display: block;
      width: 40px;/*Hamburger slides width*/
      height: 13px;/*Hamburger slides gap*/
      border-top: 3px solid #eeeeee;/*Hamburger slides hight*/
      margin: auto;
    }
    .nav > .nav-links {
      position: absolute;
      display: block;
      width: 100%;
      background-color: #333;
      height: 0px;
      /*Soitnotdisplay*/transition: all 0.3s ease-in;
      overflow-y: hidden;
      top: 70px;/*Position of dropdown*/
      left: 0px;
      -webkit-transition: all 0.3s ease-in;
      -moz-transition: all 0.3s ease-in;
      -ms-transition: all 0.3s ease-in;
      -o-transition: all 0.3s ease-in;
      z-index: 100;
    }
    
    #exposition_btn{
      width: 50%;
      margin-top: 10px;
    }
    .nav > .nav-links > a {
      display: block;
      width: 100%;
      margin: auto;
      text-align: center;
    }
    .nav > #nav-check:not(:checked) ~ .nav-links {
      height: 0px;
    }
    .nav > #nav-check:checked ~ .nav-links {
      height: calc(100vh - 70px);/*Calculate the width of the height*/
      overflow-y: auto;
    }
}

/*Intro section*/
@media (max-width:992px){
    .intro-box{
      margin-right: 15px;/*this move the intro paragraph*/
    }
    .intro-img{
      top: -130px;
      left: 70px;
    }
  }
  
  @media (max-width:900px){
      .intro-box{
        margin-right: 0px;/*this move the intro paragraph*/
      }
      .intro-img{
        left: 60px;
      }
  }
  
  @media (max-width:768px) {
    .intro-content{
      width: 100%;
    }
    .intro-img{
      left: 50%;
      left: 50%;
      transform: translate(-50%, 0%);
      -webkit-transform: translate(-50%, 0%);
      -moz-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      -o-transform: translate(-50%, 0%);
  }
    .intro-content > h2{
      text-align: center;
    }
    .intro-box{
      /* background-color: #ad2222; */
      margin-top: 140px;
      width: 100%;
      justify-content: center;/* Horizontal alignment */
    }
  }

  /*Hero section*/
  @media (max-width:768px){
    #hero-img-div{
        max-width: 450px;
      }
    #hero-img{
        max-width: 450px;
    }
    #hero > h1{
        font-size: 50px;
      }
      #hero > p{
        margin: 25px 15px 0 15px;
      }
  }
  @media (max-width:560px){
    #hero-img-div{
        max-width: 350px;
      }
    #hero-img{
        max-width: 350px;
        margin-top: 60%;
    }
    #hero > h1{
        margin-top: 5%;
        font-size: 40px;
    }
    #hero > p{
        font-size: 15px;
      }
  }

  @media (max-width:400px){
    #hero-img-div{
        max-width: 300px;
      }
    #hero-img{
        max-width: 300px;
        margin-top: 40%;
    }
    #hero > h1{
        margin-top: 5%;
        font-size: 36px;
    }
    #hero > p{
        font-size: 13px;
      }
  }


  /*Section 3*/
  @media (max-width:1090px){
    .col-d-1 {width: 8.33%;}
  .col-d-2 {width: 16.66%;}
  .col-d-3 {width: 25%;}
  .col-d-4 {width: 33.33%;}
  .col-d-5 {width: 41.66%;}
  .col-d-6 {width: 50%;}
  .col-d-7 {width: 58.33%;}
  .col-d-8 {width: 66.66%;}
  .col-d-9 {width: 75%;}
  .col-d-10 {width: 83.33%;}
  .col-d-11 {width: 91.66%;}
  .col-d-12 {width: 100%;}

  #points{
      max-width: 760px;
    }

    #points > .cell-3, #points > .cell-4{
      border-top: 2px solid #BD7010;
    }
    #points > .cell-3{
      border-left: 0;
    }

  }
  @media (max-width:768px){
    #section-3{
      height: auto;
      padding-bottom: 50px;
    }
    #points{
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  @media (max-width:560px){
    .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}

  #points{
    max-width: 350px;
    margin: auto;
    
  }
  #timeline {
    margin: auto 15px;
  }
  #points > .cell-2,#points > .cell-4{
    border-left: 0;
  }
  #points > .cell-1{
    border-bottom: 2px solid #BD7010;
  }
  #timeline .line-1>.cell{
    border-left: 0;
  }
  #timeline .line-2>.cell{
    border-left: 0;
    border-top: 2px solid #BD7010;
  }
  #timeline .line-2 .udiv{
    padding: 0;
  }
  #timeline > .line-1{
    border-bottom: 0;
  }
  #timeline > .line-2{
    border-top: 0;
  }
  

}
  @media (max-width:360px){
    #points{
      max-width: 300px;
    }
    #hero-img-div{
      max-width: 200px;
    }
    #hero-img{
      max-width: 200px;
    }
  }

  @media (max-width:1024px){
    #timeline{
      margin: auto 20px;
    }
  }
  @media (max-width:768px){

  }