/*-------------*/
/*-- HEADER -- */
/*-------------*/
header {
  height:110px;
}

/*-- MOB MENU BUTTON -- */
#mob-menu {
  width: 28px;
  display: none;
}


/*-- LOGO -- */
header .logo {
  float: left;
  width:365px;
}

header .logo image {
  width:100%;
}

/*-- NAVIGATION -- */
header nav {
  float: right;
}

header nav ul li {
  float:left;
}

header nav ul li a {
  display: block;
  padding-left: 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 0.72em;
  color: #9da3ac;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

header nav ul li a:hover {
  color: black;
}

header nav ul li a.active {
  color: black;
}

header nav ul li:last-child a {
  padding-left: 5px;
  padding-right: 0; 
}

header nav ul li:nth-child(6) a {
  padding-left: 45px;
}

header nav ul li ul {
  position: absolute;
}

header nav ul li ul li {
  float:none;
}

header nav ul li ul li a {
  padding-top: 6px;
}

header nav ul li ul li:last-child a {
  padding-left: 25px;
}

header nav ul li ul li:nth-child(1) a {
  opacity: 0;
  -webkit-transition: opacity 0.1s 0.2s;
  transition: opacity 0.1s 0.2s;
}

header nav ul li:hover ul li:nth-child(1) a {
  opacity: 1;
  -webkit-transition: opacity 0.3s 0s;
  transition: opacity 0.3s 0s;
}

header nav ul li ul li:nth-child(2) a {
  opacity: 0;
  -webkit-transition: opacity 0.1s 0.1s;
  transition: opacity 0.1s 0.1s;
}

header nav ul li:hover ul li:nth-child(2) a {
  opacity: 1;
  -webkit-transition: opacity 0.3s 0.05s;
  transition: opacity 0.3s 0.05s;
}

header nav ul li ul li:nth-child(3) a {
  opacity: 0;
  -webkit-transition: opacity 0.1s 0s;
  transition: opacity 0.1s 0s;
}

header nav ul li:hover ul li:nth-child(3) a {
  opacity: 1;
  -webkit-transition: opacity 0.3s 0.1s;
  transition: opacity 0.3s 0.1s;
}




/*********************************************/
/*********************************************/
/*             810px  -   1000px
/*********************************************/
/*********************************************/



@media (min-width:850px) and (max-width:1000px) {
  body {
  }
  
  /*-- HEADER --*/
  header .logo {
    width:40%;
  }

  /*-- MENU --*/
  header nav ul li a {
    padding-left: 15px;
  }
  
  header nav ul li:nth-child(6) a {
    padding-left: 20px;
  }
  
  header nav ul li ul li:last-child a {
    padding-left: 15px;
  }
}


/*********************************************/
/*********************************************/
/*             < 850 px
/*********************************************/
/*********************************************/



@media (min-width:0px) and (max-width:850px) {
  .wraper {
    padding:0;
  }
  
  /*-- HEADER -- */
  header {
    padding: 15px 25px 0 25px;
    //height: 18%;
    height: 150px;
  }

  /*-- MOB MENU BUTTON -- */
  #mob-menu {
    display: block;
  }

  header .logo {
    width:100%;
    max-width: 400px;
    padding: 1.5em 0 0 0;
  }

  /*-- NAVIGATION -- */
  header nav {
    float: none;
    background-color: #9da3ac;
    opacity: .75;
    width:70%;
    position: absolute;
    top:17.9%;
    height: 82.1%;
    min-height: 400px;
    padding: 50px 0 0 100px;
    margin: 0 0 0 -650px;
    -webkit-transition: margin 0.5s cubic-bezier(1, -0.41, .58, 1);
    transition: margin 0.5s cubic-bezier(1, -0.41, .58, 1);
    z-index: 1000;
  }
  
  header nav.active {
    margin: 0 0 0 -100px;
    -webkit-transition: margin 0.5s cubic-bezier(0, 0, 0, 1.29);
    transition: margin 0.5s cubic-bezier(0, 0, 0, 1.29); 
  }

  header nav > ul > li {
    float:none;
    padding-top: 20px;
  }

  header nav ul li a {
    display: block;
    padding-left: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.78em;
    color: white;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
  }

  header nav ul li a:hover {
    color: black;
  }

  header nav ul li a.active {
    color: black;
  }

  header nav ul li:last-child a {
    padding-left: 5px;
    padding-right: 0; 
  }

  header nav ul li:nth-child(6) a {
    padding-left: 0;
    float:left;
    position: absolute;
    top: 20px;
  }
  
  header nav > ul > li:last-child a {
    padding-left: 5px;
    padding-right: 0;
    position: absolute;
    top: 20px;
    left: 125px;
  }

  header nav ul li ul {
    position: relative;
  }

  header nav ul li ul li {
    float:none;
    padding-top: 2px;
    padding-left: 10px
  }

  header nav ul li ul li a {
    padding-top: 6px;
  }

  header nav ul li ul li:last-child a {
    padding-left: 0;
  }

  header nav ul li ul li:nth-child(1) a {
    opacity: 1;
  }

  header nav ul li ul li:nth-child(1) a {
    opacity: 1;
  }

  header nav ul li ul li:nth-child(2) a {
    opacity: 1;
  }

  header nav ul li:hover ul li:nth-child(2) a {
    opacity: 1;
  }

  header nav ul li ul li:nth-child(3) a {
    opacity: 1;
  }

  header nav ul li:hover ul li:nth-child(3) a {
    opacity: 1;
  }
}