header {
  height: 100px;
  cursor: auto;
}

.logo{
      width: 118px;
      height: 43px;
      text-align: center;
      top:2.6rem;
      left: 5.6rem;
      position: fixed;
      z-index: 0;
}


.hamburguer {
  position: absolute;
  top: 2.7rem;
  right: 5.7rem;
  margin: 0;
  border: 0;
  z-index: 8;
  cursor: pointer;
  outline: none;
}
.hamburguer .bread {
  width: 40px;
  height: 5px;
  background-color: gold;
  margin: 10px 0;
  transition: .2s;
}

nav {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100vh;
  z-index: 2;
  background: black;
  transition-duration: .5s;
  backface-visibility: none;
  background: url(../assets/bg/light-grading-3.jpg) no-repeat 0% 0%;
  background-size: cover;
}
nav ul {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  box-sizing: border-box;
  padding-top: 5.3%;
  text-align: left;
  list-style: none;
  opacity: 0.93;
}
nav ul li a {
  display: block;
  padding: 9px 0 9px 63px;
  transition-duration: .6s;

  color: white;
  text-decoration: none;
}
nav ul li a:hover {
  cursor: pointer;
  color: #000;
}

.open {
  visibility: visible;
  opacity: 0.93;
  z-index: 4;
}


/*Estilos del otro nav*/

nav ul li {
  width: 100%;
}
nav ul li a {
      display: inline-block;
      outline: none;
      color: #FFF;
      text-decoration: none;
      font-family:var(--jo);
      font-size: 7.4rem;
      line-height: 6.8rem;
      font-weight: 500;
      letter-spacing: 1.2px;
      display: block;
}
nav ul li:hover{
  display: block;
  background: #99d6e4b0;
}

nav ul li:nth-child(3) a {
      padding-bottom: 18px;
}
.ro {
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

@media screen  and (min-device-width: 640px) 
  and (max-device-width: 800px){
nav ul {
    padding-top: 25%;
    padding-left: 5%
}
    nav ul li a {
    font-size: 3.4rem;
    line-height: 3.8rem;
  }
}

@media screen and (max-width: 480px) {
  .logo{
    left: 2.6rem;
  }
  .hamburguer{
    right: 2.7rem;
  }

  nav ul {
    padding-top: 32.3%;
  }
  nav ul li a {
    font-size: 4rem;
    line-height: 4rem;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 560px) 
  and (max-device-width: 780px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

    .hamburger{
    right: 12.7rem;
  }

  nav ul li a {
    font-size: 3.8rem;
    line-height: 3.8rem;
  }
}




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

  .logo{
    left: 2.6rem;
}

  .hamburger{
    top:2.7rem;
    right:2.7rem;
  }

  nav ul{
    padding-top: 26%;
  }
  nav ul li a {
    font-size: 3.4rem;
    line-height: 3.8rem;
  }
}


@media screen and (max-width: 380px){
  .hamburguer{
    right: 2.7rem;
  }
  nav ul {
      padding-top: 34%;
  }
  nav ul li a {
    padding: 9px 0 9px 40px;
  }
}