header{
  background-color: #f6f6f6;
  text-align:center;
  position:relative;
  z-index:1;
  font-family: 'Sulphur Point', sans-serif;
  width:100%;
  display:block;
  height:20vh;
  padding-top:20vh;
  margin:0;
}
@media screen and (max-width:1100px){
  header{
    height:20vh;
  }
  }

  @media screen and (max-width:1024px){
    header{
      height:30vh;
    }
    }

    @media screen and (max-width:1000px){
      header{
        height:20vh;
      }
      }

      @media screen and (max-width:820px){
        header{
          height:20vh;
        }
        }

      @media screen and (max-width:600px){
        header{
          height:20vh;
        }
        }

  @media screen and (max-width:500px){
    header{
      height:20vh;
    }
    }
.Logo{
margin:0% auto;
  width:20%;
  padding:2%;
  transition: .2s filter linear, .2s -webkit-filter linear;
}
@media screen and (max-width:1100px){
  .Logo{
    width:40%;
  }
  }

  @media screen and (max-width:820px){
    .Logo{
      width:50%;
    }
    }

  @media screen and (max-width:600px){
    .Logo{
      width:60%;
    }
    }
.signLogo{
  margin:2% auto;
  width:20%;
}

@media screen and (max-width:1100px){
  .signLogo{
    height:7vh;
    top:4vw;
  }
}

@media screen and (max-width:600px){
  .signLogo{
    height:9vh;
    top:5vw;
  }
}
object {
  pointer-events: none;
}
.Logo:hover {
  filter: invert(32%) sepia(55%) saturate(2000%) hue-rotate(138deg) brightness(200%) contrast(90%);
}


/*/----BUTTON ANIM----/*/

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(233, 233, 233, 1);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding-bottom: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #2a2a2a;
  display: block;
  transition: 0.3s;
  text-align: center;
}

@media screen and (max-width:600px){
  .overlay a {
    font-size: 20px;
}
}

.overlay a:hover, .overlay a:focus {
  color: rgb(0, 218, 189);
}

.overlay .closebtn {
  position:absolute;
  top: 50px;
  left:50%;
  font-size: 60px;
}


.nav-button{
  height:5vw;
  width:5vw;
  background-color:white;
  position:fixed;
  top:50px;
  left:50px;

  display:flex;
  align-items:center;
  justify-content: center;

  cursor:pointer;
 overflow:hidden;

  transition:.4s .3s;
}

@media screen and (max-width:1100px){
  .nav-button{
    height:7vw;
    width:7vw;
    top:40px;
    left:40px;
  }
}

@media screen and (max-width:600px){
  .nav-button{
    height:12vw;
    width:12vw;
    top:20px;
    left:20px;
    
  }
}

/*----------------------------------*/
/*////////ANIM BUTTON DESIGN////////*/
/*---------------------------------*/
.nav-button-black{
  width:100%;
  height:100%;
  background-color:var(--background);
  position:absolute;
  z-index:-1;
  transform:translateX(-100%) 
}
/*----------------------------------*/
/*////////ANIM BUTTON //////////////*/
/*---------------------------------*/
.nav-button:hover > .nav-button-black,
.nav-button:focus > .nav-button-black,
.nav-button:active > .nav-button-black{
  animation:position .6s .2s;  
}
.nav-checkbox:hover
.nav-checkbox:focus{
  background-color:rgb(253, 253, 253);
}

@keyframes position{
from { transform:translateX(-100%)}
to{  transform:translateX(100%) }
}