nav.less

.header{
    padding: 20px 0 0;
    position: fixed;
    width: 100%;
    height: 68px;
    // height: 5rem;
    -webkit-transform: translateZ(0);
    top: 0;
    left: 0;
    z-index: 11;
    // background: red;
  // text-align: left;
  transition: background-color 1s ease-in-out;
  & a{display: inline-block;}
  .logo,
  .main-nav{
    position: relative;
    top: 0;
    transition: all 0.25s ease-in-out;
  }
}
.header.fixed{
  background: #000;
  transition: background-color 0.5s ease-in-out;
  .logo,
  .main-nav{
    position: relative;
    top: -10px;
    transition: all 0.5s ease-in-out;
  }
}
.logo{
  .linef(4);
  text-align: left;
  padding: 10px 0 0 30px;
}
.main-nav{
// .linef(5);
// .push(3);
float: right;
padding: 8px 0;
padding-right: 30px;
// padding: .8rem 0;
}
.main-nav__item{
 // font-size: 14px;
 font-size: 1.4rem;
// padding: 6px 10px;
padding: .6rem 1rem;
// margin-left: 30px;
margin-left: 3rem;
border: 2px solid transparent;
}

.main-nav__item.active{border: 2px solid #dd1036; border-radius: 18px;}
.main-nav__item:hover {
  // border: 1px solid #dd1036;
  // border-radius: 18px;
  text-shadow: 1px 1px 4px #fff, -1px -1px 4px #fff;
  // text-shadow: 0 0 10px #fff;
  // background: #dd1036;
  transition: .2s;
}
  .main-nav__item.main-nav__item__special{
       border: 1px solid red;
       border-radius: 18px;
       background: #dd1036 url(images/buttons-overlay-lred-small.png) -300px 0 no-repeat;
       transition: background-position linear 0.75s;
       &:hover{
         transition: background-position linear 0.75s;

         background-position: 0px 0;
       }

       &:hover,
       &:focus{
         text-shadow: none;
       }



    &:active,
    &.active{
      top: 2px;
    }
  }



  .mob-menu{
    display: none;
  }