.nav{
    width: 100vw;
    background-color: #323333;
    position: fixed;
    top: 0;
    z-index: 1;
}
ul{
    display: block;
    margin: 0;
    padding: 0;
    display: flex;  
}
li{
    list-style-type: none;
    margin: 2vw 0;   
    font-size: 2.5vh;
}

a{
    font-style: normal;
    font-size: 15px;
    text-decoration: none;
    color: white;
    font-family: monospace;
    padding: 2.5vw;
  }
a:hover{
    background-color: #ddd;
    color: black;

}
a.active{
    background-color: #2f4968;
    color: white;
}
.but{
    display: none;
}
b{
    
}

html,body{
    height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: #777;
    }
    
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9, .bgimg-10, .bgimg-11, .bgimg-12{
      position: relative;
      opacity: 0.65;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    
    }
    .bgimg-1 {
      background-image: url(img/IA-3.jpg);
      min-height: 100%;
    }
    
    .bgimg-2 {
      background-image: url(img/IA-13.jpg);
      min-height: 400px;
    }
    
    .bgimg-3 {
      background-image: url(img/IA-14.jpg);
      min-height: 400px;
    }

    .bgimg-4 {
        background-image: url(img/IA-11.jpg);
        min-height: 400px;
    }
    .bgimg-5 {
        background-image: url(img/IA-15.jpg);
        min-height: 400px;
    }
    .bgimg-6 {
        background-image: url(img/IA-9.jpg);
        min-height: 400px;
    }
    .bgimg-7 {
        background-image: url(img/IA-6.jpg);
        min-height: 400px;
    }
    .bgimg-8 {
        background-image: url(img/IA-7.jpg);
        min-height: 400px;
    }
    .bgimg-9 {
        background-image: url(img/IA-8.jpg);
        min-height: 400px;
    }
    .bgimg-10 {
        background-image: url(img/IA-5.png);
        min-height: 400px;
    }
    .bgimg-11 {
        background-image: url(img/IA-16.jpg);
        min-height: 400px;
    }
    .bgimg-12 {
        background-image: url(img/IA-18.jpg);
        min-height: 400px;
    }

    
    .caption {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      color: #000;
    }
    
    .caption span.border {
      background-color: #111;
      color: #fff;
      padding: 18px;
      font-size: 25px;
      letter-spacing: 10px;
    }
    
    /* Turn off parallax scrolling for tablets and phones */
    @media only screen and (max-device-width: 1024px) {
      .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
      }
    }
#logo{
    width: 30%;
    float: none;
    align-self: left;

}






@media only screen and (max-width: 1100px) {
ul{
    flex-direction: column;
}      
a{
    display: block;
}     
li{
    margin: 0;
} 
.but{
    display: block;
    color: white;
    padding: 2vw;
    font-size: 2vh;
    background-color: #323333;
    border: none;
    outline: none;
    cursor: pointer;
    align-self: flex-start;
}
}