/* Navigation */


@font-face {
    font-family: 'GROCHES';
    src: url('font/GROCHES.otf');
  }
  
    *{transition:all 0.3s ease-in-out;}
  * {
    margin:0 ;
    padding:0 ;
  }
  nav{float:right;}
  
  .logo img{float:left;}
  
  .nav-container{
    clear:both;
  background-color: #333;
  height: 125px;
  margin-bottom: 1px;
  
  }
  .nav{
    margin-right: 15px;
  }
  
  .nav .navli{
    display: inline-block; 
    padding:2px; 
    margin-top: 25px; 
    
  font-size:24px; 
  font-family:'GROCHES';
  }
  
  .navli{
    list-style-type: none;
  padding: 0px;
  
  display: inline;
  }
  
  .navli a {
    cursor: pointer;
    display: block;
  color: white;
  text-align: center;
  padding: 10px 5px;
  text-decoration: none;
  }
  
  
  .navli a:hover:not(.active){
  background-color: rgba(17, 17, 17, 0.281);
  }
  
  
  .navli:last-child {
  border-right: none;
  }
  
  
  .btn-group button {
  margin-left: 2px;
  margin-bottom: 2px;
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
  }
  
  .btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
  }
  
  /* Clear floats (clearfix hack) */
  .btn-group:after {
  content: "";
  clear: both;
  display: table;
  }
  
  /* Add a background color on hover */
  .btn-group button:hover {
  background-color: #3e8e41;
  }
  .soplogo{
  margin-top: 15px ;
  margin-left: 20px;
  width: 350px; 
  height: auto; 
  float: left;
  
  
  }
  @media screen and (max-width: 430px) {
  .soplogo{
    
    width: 87px; 
    height: auto; 
    float: left;
    
    }
  }
  
  @media screen and (min-width: 1060px) {
  .icon {
    display: none;
  }
  }
  
  @media screen and (max-width: 1060px) {
    #browsernav {
      display: none;
    }
    #mobilenav{
      display: inline;
    }
  
  
  
    }
  
  
  .mobilenav{
    display: none;
  }
    .mobile-container {
      max-width: 480px;
      margin: auto;
      background-color: #555;
      height: 500px;
      color: white;
      border-radius: 10px;
    }
    
    .topnav {
      overflow: hidden;
      background-color: #333;
      position: relative;
    }
    
    .topnav #mobileLinks {
      font-family: "GROCHES";
      
      display: none;
    }
    
    .topnav a {
      color: white;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 20px;
      display: block;
    }
    
  .mobilemenuicon:hover {
    background-color: rgba(0, 0, 0, 0.363);
  
  }
    
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    .active {
      background-color: #4CAF50;
      color: white;
    }