body {
  font-family:'Helvetica Neue', sans-serif;
  font-weight:400;
}

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

nav.menuresponsivo {
  padding:30px;
  display:none;
}

nav.menuresponsivo ul {
  float:right;
}

nav.menuresponsivo ul li {
  display:inline-block;
  float:left;
}

nav.menuresponsivo ul li:not(:first-child) {
  margin-left:25px;
}

nav.menuresponsivo ul li a {
  display:inline-block;
  outline:none;
  color:#1F2227;
  font-size:16px;
  text-decoration:none;
  letter-spacing:.04em;
}

nav.menuresponsivo ul li a:hover {
  color:gray;
  text-decoration:none;
}

@media screen and (max-width: 768px) {
  nav.menuresponsivo {
    display:block;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:-1;
    background:#000;
    opacity:0;
    -webkit-transition:all .2s ease;
    -o-transition:all .2s ease;
    -moz-transition:all .2s ease;
    transition:all .2s ease;
    overflow-y:scroll;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo ul {
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
    width:100%;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo ul li {
    display:block;
    float:none;
    width:100%;
    text-align:left;
    margin-bottom:10px;
    position:relative;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo ul li:nth-child(1) a {
    -webkit-transition-delay:.2s;
    -moz-transition-delay:.2s;
    -o-transition-delay:.2s;
    transition-delay:.2s;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo ul li:nth-child(2) a {
    -webkit-transition-delay:.3s;
    -moz-transition-delay:.3s;
    -o-transition-delay:.3s;
    transition-delay:.3s;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo ul li:nth-child(3) a {
    -webkit-transition-delay:.4s;
    -moz-transition-delay:.4s;
    -o-transition-delay:.4s;
    transition-delay:.4s;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo ul li:nth-child(4) a {
    -webkit-transition-delay:.2s;
    -moz-transition-delay:.2s;
    -o-transition-delay:.2s;
    transition-delay:.2s;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo ul li:not(:first-child) {
    margin-left:0;
  }
}

@media screen and (max-width: 768px) {
  .nav-container.menu-responsivo ul li a {
    padding:10px 25px;
    opacity:0;
    color:white;
    font-size:24px;
    font-weight:600;
    -webkit-transform:translateY(-20px);
    -moz-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    -o-transform:translateY(-20px);
    transform:translateY(-20px);
    -webkit-transition:all .2s ease;
    -o-transition:all .2s ease;
    -moz-transition:all .2s ease;
    transition:all .2s ease;
  }
}

@media screen and (max-width: 768px) {
  .nav-open {
    position:fixed;
    right:10px;
    top:10px;
    display:block;
    width:48px;
    height:48px;
    cursor:pointer;
    z-index:9999;
    border-radius:50%;
  }
}

@media screen and (max-width: 768px) {
  .nav-open i {
    display:block;
    width:20px;
    height:2px;
    background:#fff;
    border-radius:2px;
    margin-left:14px;
  }
}

@media screen and (max-width: 768px) {
  .nav-open i:nth-child(1) {
    margin-top:16px;
  }
}

@media screen and (max-width: 768px) {
  .nav-open i:nth-child(2) {
    margin-top:4px;
    opacity:1;
  }
}

@media screen and (max-width: 768px) {
  .nav-open i:nth-child(3) {
    margin-top:4px;
  }
}

@media screen and (max-width: 768px) {
  #nav:checked + .nav-open {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
  }
}

@media screen and (max-width: 768px) {
  #nav:checked + .nav-open i {
    background:white;
    -webkit-transition:-webkit-transform .2s ease;
    transition:-webkit-transform .2s ease;
    -o-transition:-o-transform .2s ease;
    -moz-transition:transform .2s ease, -moz-transform .2s ease;
    transition:transform .2s ease;
    transition:transform .2s ease, -webkit-transform .2s ease, -moz-transform .2s ease, -o-transform .2s ease;
  }
}

@media screen and (max-width: 768px) {
  #nav:checked + .nav-open i:nth-child(1) {
    -webkit-transform:translateY(6px) rotate(180deg);
    -moz-transform:translateY(6px) rotate(180deg);
    -ms-transform:translateY(6px) rotate(180deg);
    -o-transform:translateY(6px) rotate(180deg);
    transform:translateY(6px) rotate(180deg);
  }
}

@media screen and (max-width: 768px) {
  #nav:checked + .nav-open i:nth-child(2) {
    opacity:0;
  }
}

@media screen and (max-width: 768px) {
  #nav:checked + .nav-open i:nth-child(3) {
    -webkit-transform:translateY(-6px) rotate(90deg);
    -moz-transform:translateY(-6px) rotate(90deg);
    -ms-transform:translateY(-6px) rotate(90deg);
    -o-transform:translateY(-6px) rotate(90deg);
    transform:translateY(-6px) rotate(90deg);
  }
}

@media screen and (max-width: 768px) {
  #nav:checked ~ .nav-container {
    z-index:9990;
    opacity:1;
  }
}

@media screen and (max-width: 768px) {
  #nav:checked ~ .nav-container ul li a {
    opacity:1;
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
  }
}

.hidden {
  display:none;
}