#myTopnav{

    position: sticky;
    z-index: 4;
    transition: 2s;
    transform-origin: 2s;
    margin-top: -7vh;
    overflow-x: hidden;
    overflow-y: visible;

}

/*_______________________________________________________*/


.top a {
  color: hsla(291, 92%, 00%, 1.0);
}
.top a:before {
  background: rgba(40,40,40,1.0);
}


  /*_______________________________________________________*/

  .top {
    overflow: hidden;
    top: 0;
    width:100%;
    background-color: hsla(28, 98%, 62%, 1.0);
  }

.top .pages{

  max-width: 100vw;
  overflow: hidden;

}

  .top .pages a {
    float: left;
    font-weight: 700;
    font-family: alternate-gothic-atf, eckmannpsych-small, sans-serif;
    text-transform: uppercase;
    padding-top: 0.1vh;
    padding-bottom: 0;
    text-decoration: none;
    font-size: 3.5vw;    /*!*/
    letter-spacing: 1.1px;
    text-align: justify;
    padding-right: 10vw;
  }

  .top .pages .last a {

    padding-right: 0vw;
  }
  .top .first a{
    padding-left: 2vw;
  }

  .top .last a{
    padding-right: 2vw;
  }

  .top a.icon{
    display: none;
  }

  .pages a:hover{
    transition: .3s ease;
    color: hsla(40, 90%, 94%, 1);

  }





  /*_______________________________________________________*/
  /*_______________________________________________________*/



  .nav-toggle {
    position: relative;
    float: right;
    padding: 3vw;
    background: transparent;
  /*  transition: 1s ease; */
    z-index: 10;
    background-color: hsla(28, 98%, 62%,0.0);
    border-style: none;
  }


  .pages {
    background-color: hsla(28, 98%, 62%, 1.0);
  }

  .nav-toggle [class*='bar-'] {
    background: hsla(40, 90%, 94%,1);; /*LOGO COLOR*/
    display: block;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: .4s ease all;
            transition: .4s ease all;

      border-radius: 4px;
      height: 4px;
      width: 50px;
      margin-bottom: 8px;
  }

  .nav-toggle .bar-bot {
    margin-bottom: 0;
  }

  .opened .bar-top {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 15% 15%;
            transform-origin: 15% 15%;
  }
  .opened .bar-mid {
    opacity: 0;
  }
  .opened .bar-bot {
    -webkit-transform: rotate(45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 15% 95%;
            transform-origin: 15% 95%;
  }





  /*_______________________________________________________*/

  /*_______________________________________________________*/
  @media only screen and (max-width: 1000px) {

    .top .pages a{
      padding-right: 9vw;
    }
    .top .pages .last a{

      padding-right: 0vw;
    }
}


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

    .top a {
      display: none;
    }
    .top a.icon {
      float: right;
      display: block;
      position: sticky;
    }
    .top.responsive {
      position: absolute;
      z-index: 2;
    }
    .top.responsive .pages{
      height:200vh;
    }

    .top{
      background: hsla(28, 98%, 62%, 0.0);
      padding-bottom: 5%;
    }
    .top a{
      padding-top: 5%;
      margin-top: -4%;
    }
    .pages .last a{
      padding-top: 15%;
      padding-bottom: 55%;
    }

    /*
    .top .nav-toggle{
      padding-right: 5%;
    }
    */

    #myTopnav{
      margin-top: -11vh;

      }


    button{
      padding: 3px;
      border-radius: 100%;
    }


    .top.responsive .icon {
      font-size: 3em;
      z-index: 1;
      position: fixed;
      right: 0;
      top: 0;
      -webkit-animation-name: fadeInDown;
      -webkit-animation-duration: 0s;
      animation-name: fadeInDown;
      animation-duration: 0s;
      margin-right: -1vw;
    }
    .top.responsive a {
      padding-top: 5%;
      padding-bottom: 8%;
      margin-left: 20%;
      float: none;
      position: sticky;
      display: block;
      text-align: left;
      font-size: 12vw;
      background-color: rgba(230, 230, 230, 0.0);
      -webkit-animation-name: fadeInDown;
      -webkit-animation-duration: 0.8s;
      animation-name: fadeInDown;
      animation-duration: 1.8s;
    }

    #myTopnav .top .responsive{
      margin-top: 0;
    }

    .top .first a{
    padding-top: 15vh;
    padding-left: 0;
    }

    .top.responsive a .icon{
      padding: 0;
    }

    .top a:hover {
      filter: blur(0px);
    }

    .top .active{
      border-bottom: none;
    }

    .top  a:hover:before,
    .top  a:focus:before {
      visibility:hidden;
}
}
    /*_______________________________________________________*/