#menuToggle {
  width: 29px;
  height: 29px;
  margin: 25px 0 0 25px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#menuToggle input
{
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  opacity: 0;
  z-index: 2;
}
#menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #fff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}
#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #fff;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
  position: absolute;
  width: 180px;
  height: 100vh;
  box-shadow: 0 0 10px #4d4d4d;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background-color: #4d4d4d;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
  padding: 10px 0;
  transition-delay: 2s;
  list-style-type: none !important;
}
#menuToggle input:checked ~ ul
{
  transform: none;
}


footer{
  width: 100%;
  bottom: 0;
  z-index: 2;
  background: #1b1b1b;
}
.footer{
  width: 60% !important;
  margin: 0 20%;
  padding: 5% 0 !important;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 0.2fr;
  grid-template-areas: 
    "f_1 f_2 f_3"
    "f_4 f_4 f_4";
  gap: 10%;

}
footer button{
  padding: 0.8vw 1vw;
  margin: 0;
  border-radius: 10px;
  background: #4caf50;
  color: #fff;
  display: inline-block;
  border: none;
  text-align: center;
}
.f_input, select{
  width: 90%;
  height: 20%;
  border: none;
  padding: 5%;
  border-radius: 10px;
  resize: none;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: bold;
}
.f_4{
  border-top: 1px solid #f4f4f4;
  margin: 0;
  padding: 50px 0 0 0;
}
.cc{
    float: right;
    text-align: right;
  }


/** ====== Media Querries ====== **/

@media only screen and (max-width: 600px){  
  header{
    display: none !important;
    visibility: hidden;
    z-index: 1;
  }
  nav{
    height: 18vw;
    background-color: #000;
    visibility: visible;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
      "menu logo .";
  }
  nav a img{
    height: 7%;
    margin: 3% 0; 
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  ul {
    padding: 0;
    list-style-type: none;
  }
  .footer{
    width: 80% !important;
    margin: 0 10%;
    padding: 5% 0 60% 0 !important;
    grid-template-columns: 1fr;
    grid-template-rows: 0.8fr 1fr 1fr auto;
    grid-template-areas: 
      "f_1" 
      "f_2" 
      "f_3"
      "f_4";
    gap: 7.5%;
  }
  footer button{
    width: 100%;
    padding: 2vw; 
    font-size: 1.5vw !important;
  }
  .f_4{
    margin: 0;
    padding: 4vw 0;
  }
}
@media only screen and (min-width: 600px){
  header{
    width: 100%;
    height: 4vw;
    padding: 1% 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    position: fixed;
    display: grid;
    grid-template-columns: 1fr 6fr auto;
    grid-template-rows: 100%;
    grid-template-areas: 
        "logo . ht";
    transition: .5s;
    z-index: 1;
  }
  header table{
    height: 100% !important;
  }
  header td{
    width: 20%; 
    padding: 0 1.4vw; 
  }
  header td:hover{
    color: #4caf50;
    transition: .5s;
  }
  .logo{
    width: 80% !important;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  header button{
    padding: 10px 15px;
    border-radius: 10px;
    font-size: inherit;
    background: #4caf50;
    color: #fff;
    display: inline-block;
    border: none;
    text-align: center;
  }
  nav{
    display: none !important;
    visibility: hidden;
  }
}
@media only screen and (min-width: 1400px){
  header{
    padding: 0;
  }
}

/** ===== GRID ===== **/
#menuToggle{grid-area: menu}
nav a{grid-area: logo;}
.logo{grid-area: logo;}
.ht{grid-area: ht;}
.f_1{grid-area: f_1;}
.f_2{grid-area: f_2;}
.f_3{grid-area: f_3;}
.f_4{grid-area: f_4;}
.f_5{grid-area: f_5;}
.f_6{grid-area: f_6;}



.reveal{
  transform: translateY(10vw);
  opacity: 0;
  transition: all 2s ease;
}
.reveal.active{
  transform: translateY(0px);
  opacity: 1;
}