/* ====================================
Navigation 
==================================== */

.overlay-navigation {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.8);
  transform: translateY(-100%);
}

.overlay-slide-down {
  transition: all .4s ease-in-out;
  transform: translateY(0)
}

.overlay-slide-up {
  transition: all .8s ease-in-out;
  transform: translateY(-100%)
}

nav,
nav ul.principal {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

nav ul.principal {
  display: flex;
  list-style: none;
}

nav ul.principal li.menu {
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    transform: translateY(-100%);
    padding: 50px 0 0 5%;
}

nav li.menu:nth-of-type(1){background-color: #a46256}
nav li.menu:nth-of-type(2){background-color: #eab8a7}
nav li.menu:nth-of-type(3){background-color: #deac9b}

.menu_opciones li{
	transition: all .4s ease;
}

.menu_opciones li a, .menu_opciones2 li a{
	color:#fff;
}

.menu_opciones2 li{
	transition: all .4s ease;
}
.menu_opciones li:hover, .menu_opciones li a:hover{
	color: rgb(216, 153, 136);	
}

.menu_opciones2 li:hover, .menu_opciones2 li a:hover{
	color:rgb(164, 98, 86);
}

.slide-in-nav-item {
  animation: slide-in-nav-item 0.4s linear 1 .2s both;
}

.slide-in-nav-item-delay-1 {
  animation: slide-in-nav-item 0.4s linear 1 .4s both;
}

.slide-in-nav-item-delay-2 {
  animation: slide-in-nav-item 0.4s linear 1 .6s both;
}

.slide-in-nav-item-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .5s both;
}

.slide-in-nav-item-delay-1-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .4s both;
}

.slide-in-nav-item-delay-2-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .3s both;
}

/* ====================================
Burger king
==================================== */

.open-overlay {
  /*position: absolute;
  right: 5rem;
  top: 3.2rem;*/
  z-index: 100;
  width: 34px;
  display: block;
  cursor: pointer;
  margin-left: 100px;
}

.open-overlay span {
  display: block;
  height: 3px;
  background-color: #fff;
  cursor: pointer;
  margin-top: 8px;
}

.animate-top-bar {
  animation: animate-top-bar .6s linear 1 both
}

.animate-bottom-bar {
  animation: animate-bottom-bar .6s linear 1 both
}

.animate-middle-bar {
  animation: animate-middle-bar .6s linear 1 both
}

.animate-out-top-bar {
  animation: animate-out-top-bar .6s linear 1 both
}

.animate-out-bottom-bar {
  animation: animate-out-bottom-bar .6s linear 1 both
}

.animate-out-middle-bar {
  animation: animate-out-middle-bar .6s linear 1 both
}

/* ====================================
Animation keyframes
==================================== */

@keyframes slide-in-nav-item {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes slide-in-nav-item-reverse {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

@keyframes animate-top-bar {
  0% {
    background-color: #fff;
  }
  50% {
    -webkit-transform: translateY(9px);
    transform: translateY(9px)
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: #fff
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #a46256;
  }
}

@keyframes animate-bottom-bar {
  0% {
    background-color: #fff;
  }
  50% {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px)
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: #fff;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #a46256;
  }
}

@keyframes animate-middle-bar {
  0% {
    background-color: #fff;
  }
  80% {
    background-color: #fff;
  }
  100% {
    background-color: #a46256;
  }
}

@keyframes animate-out-top-bar {
  0% {
    background-color: #a46256
  }
  50% {
    -webkit-transform: translateY(9px);
    transform: translateY(9px)
  }
  80% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    background-color: #a46256
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #FFF;
  }
}

@keyframes animate-out-bottom-bar {
  0% {
    background-color: #a46256
  }
  50% {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px)
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background-color: #a46256;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #FFF;
  }
}

@keyframes animate-out-middle-bar {
  0% {
    background-color: #a46256
  }
  80% {
    background-color: #a46256;
  }
  100% {
    background-color: #fff;
  }
}

@media (max-width: 640px) {  
  .open-overlay {
    right: 1rem;
  }
}
.oculto{
	display:none;
}
ul li{
	list-style-type: none;
	cursor:pointer;
	color: #fff;
	font-family:"Poppins";
	font-size:28px;
	line-height:48px;
	
}

.dona_menu{
	float:none;
	padding: 0;
	width: 170px;
	height: 40px;
}