/* header */

.header {

  position: absolute;
  width: 98%;
  z-index: 3;
  top: -50px;
  visibility: hidden;
}

.header-sub-pages {
  position: absolute;
  width: 98%;
  z-index: 3;
  visibility: visible;
}

.header ul {
  margin: 0;
  padding: 0;
  /* padding-top: 25px; */
  list-style: none;
  overflow: hidden;
  text-decoration: none;
  /* background-color: #fff; */
}

.header li a {
  display: block;
  
  /* padding: 10px 10px; */
  /* border-right: 1px solid #f4f4f4; */
  text-decoration: none;
  color: #ddd;
  margin-top: 9px;
}

.header li a:hover,
.header .menu-btn:hover {
    color: #f6ae2d;
  /* background-color: #f4f4f4; */
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 12px 20px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
  

}

.header .menu-icon .nav-icon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
  background: #FFF;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .nav-icon:before {
  top: 5px;
  color: #fff;
}

.header .menu-icon .nav-icon:after {
  top: -5px;
  color: #fff;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}


.header .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}


/* ____MENU SUBPAGES____ */


.header-sub-pages ul {
  margin: 0;
  padding: 0;
  /* padding-top: 25px; */
  list-style: none;
  overflow: hidden;
  text-decoration: none;
  /* background-color: #fff; */
}

.header-sub-pages ul li a {
  display: block;
  
  /* padding: 10px 10px; */
  /* border-right: 1px solid #f4f4f4; */
  text-decoration: none;
  color: rgb(54, 54, 54);
  margin-top: 9px;
}

.header-sub-pages li a:hover,
.header-sub-pages .menu-btn:hover {
    color: #f6ae2d;
  /* background-color: #f4f4f4; */
}

.header-sub-pages .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 12px 20px;
  text-decoration: none;
}

/* menu */

.header-sub-pages .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header-sub-pages .menu-icon {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
  

}

.header-sub-pages .menu-icon .nav-icon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header-sub-pages .menu-icon .nav-icon:before,
.header-sub-pages .menu-icon .nav-icon:after {
  background: #FFF;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header-sub-pages .menu-icon .nav-icon:before {
  top: 5px;
  color: rgb(129, 129, 129);
}

.header-sub-pages .menu-icon .nav-icon:after {
  top: -5px;
  color: rgb(129, 129, 129);
}

/* menu btn */

.header-sub-pages .menu-btn {
  display: none;
}

.header-sub-pages .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header-sub-pages .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}


.header-sub-pages .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}

.header-sub-pages .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}

/* ------- end Menu Sub Pages ----- */




.tengoLogoText {
    float: left;
    font-size: .9rem;
    color: #fff;

    padding-left: 15px;
  }

  .tengoLogoTextSub {
    float: left;
    font-size: .9rem;
    color: rgb(70, 70, 70);
    padding-left: 15px;
  }
  .tengoLogo {
      float: left;
     padding-left: 40px;

     
  }
  .logo-wrapper {
      display: inline-block;
      position: absolute;
  }


  .secondary-button {
    position: absolute;
    border: 1px solid #ffffff;
    border-radius: 8px;
    display: inline-block;
    padding-left:40px;
   
    /* padding-right:15px; */
    width:148px;
    height:36px;
    /* margin: -46px 20px -20px 0px; */
    cursor: pointer;
    margin-top: -48px;
  
   
    /* margin: -120px 50px 0px 0px; */
  
  }
  
  
 
  
  .secondary-button:hover {
    box-shadow: inset 0px 0px 0px 1px #e2a62f;
     color: #e2a62f;
     border: 1px solid #e2a62f;
  }
  .secondary-button li a{
  
    display: inline;
  }

/* larger screens */

@media (min-width: 980px) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 12px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  .tengoLogoText {
      font-size: 1.2rem;
  }

  

}

/* smaller screens */

@media (max-width: 979px) {
    /* .header li {
      float: left;
    } */
    .header {
      width:100%;
      z-index: 20;
    }
    .menu {
      position:absolute;
      /* top:0; */
      width:100%;

    }
    .menu-icon {
      z-index: 40;
    }
    .header li a {
      padding-left: 45px;
      padding-bottom: 10px;
    }
    .header .menu-btn:checked ~ .menu {
        /* max-height: 240px; */
        background: rgb(57, 57, 57);
        z-index: 30;
       
      }
      .menu-btn:checked ~ .menu {
        /* max-height: 240px; */
        padding-bottom: 45px;
        padding-top: 65px;
        z-index: 30;
       
      }
    
      .tengoLogoText {
        /* float: left; */
        font-size: .9rem;
        color: #fff;
        /* margin-top: 10px; */
        /* margin-left:15px; */
         /* padding-top: 22px; */
         top: -22px;
        padding-left: 15px;
      }
      .tengoLogo {
          
          width: 48px;
          height: 48px;
          /* padding: 14px 0; */
         padding-left: 20px;
         z-index: 30;
    
  }

  /* .secondary-button {
    position: absolute;
    border: 1px solid #e2a62f;
    color: #e2a62f;
    border-radius: 8px;
    padding-left:40px;
    padding-right:40px;
    width:118px;
    height:38px;
    cursor: pointer;
    text-decoration: none !important;
    font-weight: 600; */
    /* margin: -55px 0px 0px 28px */
    /* margin: -100px 50px 22px 0px; */
/*    
  } */
  
  .secondary-button{
    display: none;
  }
  
  /* .secondary-button:hover {
    box-shadow: inset 0px 0px 0px 1px #e2a62f;
  } */
  .header li a {
      margin-top: 14px;
      padding-bottom: 25px0;
  }
}