*{box-sizing: border-box; margin: 0; padding: 0;}
html {
      height: 100%;
    }
    body {
      background: #f1f1f2;
      padding: 0;
      text-align: center;
      font-family: 'open sans';
      position: relative;
      margin: 0;
      height: 100%;
    }
a{text-decoration: none;}
ul{list-style-type: none;}
.colorwhite{color: #fff;}
.test-border{border: 1px solid #fff;}
.texttoupper{text-transform: uppercase;}
.fontsize-small{font-size: 0.8em;}

.bg{height: 100vh;
     background-attachment: fixed;
     background-position: bottom;
     background-repeat: no-repeat;
    background-size: cover;}
.headerbg{background-image: url(../images/headerbg.jpg);}
 .overlay {
     height: 100%;
     width: 100%;
     background-color: rgb(0, 0, 0);
     background-color: rgba(0, 0, 0, 0.55);
     overflow-x: hidden;
 }
.logo-nav-content{display: grid; grid: 1fr/ auto auto; margin-top: 25px;}
.nav{align-self: center;}

.logo{display: grid; grid: 1fr auto/1fr; /*justify-items: start;*/ width: 200px; place-items: center; grid-gap: 10px; margin-left: 10px;}

.nav-bar{display: grid; grid: 1fr/1fr 1fr 1fr 1fr; width: 900px; margin: 0 auto; justify-items: center;}
/*.nav-li4{margin-right: 25px;}*/
/*.headerh1{position: relative; top: 300px; text-align: center; font-size: 60px; font-family: 'open sans';}*/
.headerh1 {
     color: #fff;
     position: relative;
     top: 230px;
     text-transform: capitalize;
     font-family: 'Open Sans';
     font-size: 50px;
     font-weight: 100;
 }
@media screen and (max-width: 1112px) {
    .logo-nav-content{grid: auto auto/1fr; grid-gap: 40px;}    
}
@media screen and (max-width: 1112px) {
    .logo-nav-content{grid: auto auto/1fr; grid-gap: 40px;}
    /*.nav-li4{margin: 0;}*/
}