*{
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
}
.icon{
    width : 10px;
    height : 10px;
}


#logo {
  position: absolute;
  top: 0.5vh;
  left: 0vw;
  width: 12vw;
  height: 9vh;
}
#logoMobile{
  display:none;
}
#main{
    display:none;
    border-radius: 4px;
    -webkit-box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.7); 
  box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.7);
  z-index : 2;
  }

.ulnavbar {
   width: auto;
   height: 10vh;
   vertical-align: middle;
}

.ulnavbar a {
   color: #333333;
   text-decoration: none;
   font-size: 0.9em;
   display: inline-block;
}

.ulnavbar > li {
   position: relative;
   left: 20vw;
   line-height: 10vh;
   display: inline;
   margin: 0 0.5em;
}
.dropdown {
   position: relative;
}
.dropdown-content {
   display: none;
   position: relative;
   right:0;
   background-color: #f1f1f1;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .dropdown:hover .dropdown-content {display: block;}
  .dropdown-content>a:hover {background-color: #b40a35;}


  @media (max-device-width: 767px)  {
  .topnav{
    width: 100%;
    height :10vh;
    }
    .ulnavbar{
        display: none;
        z-index: 100;
        top: 8vh;
        max-width: 100%;
        margin: auto;
        padding-left: 0vw;
        width: 100vw;
        background-color: #2a2a2a;
        height: auto;
        border-radius: 2px;
        position: absolute;
        left: 0vh;
        transition: ease-in-out all .5s;
    }
    .ulnavbar > li {
        position: relative;
        display: block;
        margin: 0% 0%;
        left : 0;
        /* line-height: 10vh; */
    }

    .topnav ul li a{
    color: #ccc;
      font-size: 20px;
      line-height: 7em;
      display: block;
      position: relative;
      padding: 12px 30px;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -ms-transition: all 0.2s ease-out;
      -o-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
      list-style-type: none;
      background: #222;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }
    #logoMobile {
      display: block;
      width: 24vw;
      height: 13.5vw;
      position: absolute;
      top: 2vh;
      left: 10vw;
  }
    .bloc {
      display:block;
      clear:both;
    }
    .container {
        float :right;
        cursor: pointer;
        width: 34px;
        height: 34px;
        margin-right: 8vw;
        margin-top: 50px;
        
      }
      .bar1, .bar2, .bar3 {
        z-index: 999;
        width: 25px;
        height: 2px;
        background-color: #444;
        margin: 6px 0;
        transition: 0.4s;
        cursor: pointer;
      }
      
      .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-4px, 4px);
        transform: rotate(-45deg) translate(-4px, 4px);
      }
      
      .change .bar2 {opacity: 0;}
      
      .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
      }
      .dropdown-content {
  
        background-color: #f1f1f1;
        width: 100%;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 100;
        right : 0vw;
     }

  }