header{

background-color: #f6f6f6;
  text-align:center;
  position:relative;
  z-index:1000;
  width:100%;
  display:block;
  height:20vh;
  padding-top:20vh;
  margin:0;
  overflow: hidden;
}

@media screen and (max-width:1100px){

  header{

    height:20vh;

  }

  }



@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) {
  header {
    height: 16vh;
    padding: 3vh 0;
  }
}



    @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: 9999;

  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;

z-index: 10000;

  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%) }

}