* {
margin: 0;
padding: 0;
}
    
    html{
          scroll-behavior: smooth;

    }    
body {
    font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    margin: 0; padding: 0; 
    background:#000;
}

    
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
    color:white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.5s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding:0;
}

 #headerbox-menu{
     display: inline-block;
     position:relative;
     background:#000; 
     width:100%;
     
     float: left;
    box-sizing: border-box;
  }
 #headerbox-1{
     display: inline-block;
     position:relative;
     width:100%;
     max-height:50px;
     float: left;
    box-sizing: border-box;
  }
   
 .headerbox-1-about{
     display: inline-block;
     position:relative;
     width:100%;
     float: center;
    box-sizing: border-box;
     background:#000; color: white;
           
  }
    #headerbox-2{
    display: inline-block;
     position:relative;
     width:50%;
     float: left;
     box-sizing: border-box;
  padding-bottom: 10em;
  margin-bottom: -10em;
    
  }



 #headerbox-3{
     display: inline-block;
     position:relative;
     background:blue; 
     width:33.33%;
     float: left;
    vertical-align:middle;
    box-sizing: border-box;
  }  
    
    
 #headerbox-4{
     display: inline-block;
     position:relative;
     background:#eee; 
     width:25%;
     height:25vw;
     float: left;
     box-sizing: border-box;
     text-align: center;
  }

        
 .headerbox-5{
     display: inline-block;
     position:relative;
     background:#eee; 
     width:20%;
     float: left;
     box-sizing: border-box;
     text-align: center;
     transition: 0.5s;
  }


    
 #headerbox-6{
     display: inline-block;
     position:relative;
     background:#eee; 
     width:16.66%;
     height:16.6vw;
     float: left;
    box-sizing: border-box;
     text-align: center;
  }
    
    
 .headerbox-7{
     display: inline-block;
     position:relative;
     background:#eee; 
     width:14.28%;
     float: left;
     box-sizing: border-box;
     text-align: center;
     background-size:14.28vw;
  }
    
     #headerbox-8{
     display: inline-block;
     position:relative;
     background:#eee; 
     width:12.5%;
    height:12.5vw;
     float: left;
    box-sizing: border-box;
     text-align: center;
  }
    
    #headerbox-header{
        position: relative;
        display: table-cell;
        vertical-align:middle;
        display: inline-block;
        box-sizing: border-box;     
        
    }
    
    #headerbox-vc{

    }

 #headerbox-img{
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        text-align: center;
        vertical-align:middle;
        line-height: 0;
    

    }
    
    #headerbox-img img{
        width: 100%;
        object-fit: cover;
        transition: .5s ease;
        backface-visibility: hidden;
}
    
    
#headerbox-img img:hover {
  opacity: 0.5;
}

        #headerbox-header-h1{
        font-size:40px;
        font-weight:800;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        vertical-align:middle;
    }
        #headerbox-header-menu{
        max-height:24px;
        font-size:20px;
        font-weight:800;
        color:#fff;
        padding:2px 5px  0 5px;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        vertical-align:middle;
    }
    
    a {text-decoration: none; color:#fff}
    a:hover {background:#888; color:#fff; transition: .5s ease;}

    
    h1 {
        font-size:5vw;
       font-family: "Newsreader", serif;
        font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
    }
    
    .about5-header{font-size:2vw; font-family:Newsreader; font-weight:600; color:white; transition: .2s ease;}
    
    .about7-header{font-size:2vw; font-family:Newsreader; font-weight:600; color:white; transition: .2s ease;}
   
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.clearfix {
  overflow: auto;
    clear: both;
}
 .clearfix::after {
  content: "";
  clear: both;
  display: table;
}