/* ============================================== */
/* NAV */
/* ============================================== */

nav{
	position:fixed;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: transparent;
	z-index: 9;
}

/*nav.effect{
	padding: 0px 20px;
}*/


/* ============================================== */
/* NAVIGATION */
/* ============================================== */

.navigation{
  display:block;
  background: var(--color-majagua);
  position: fixed;
  z-index: 8;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.navigation:before{
  content: "";
  width: 10%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: url(./../../images/body/bg.svg) repeat;
}


.navigation:after{
  content: "";
  clear: both;
  display: block;
}

.language a{
  opacity: 0.5;
  color: white;
}

.language a.active{
  background: var(--color-grey);
  opacity: 1;
}

.navigation.active{
	opacity: 1;
	pointer-events: visible;
}

.navigation ul{
	position: absolute;
	max-width: 768px;
	width: 100%;
	left: 50%;
	top:50%;
	display: block;

	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.navigation ul li{
  display: block;
  width: 100%;
  position: relative;
}

.navigation ul li a{
  font-family: var(--f-family-h);
	font-size: 60px;
	font-weight: 400;
	line-height: 60px;
	width: 100%;
	display: block;
	float: left;
	padding: 10px;
  color: var(--color-cafe);
  opacity: 0.5;
}

.navigation ul li a.active,
.navigation ul li a:hover{
  opacity: 1;
}

.navigation.hamburguercerrado ul{ /* esto es lo que tarda en regresar */
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

.navigation.hamburguercerrado { /* esto es lo que tarda en regresar */
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.navigation.hamburguercerrado ul li{ /* esto es antes de empezar */
  opacity: 0 !important;
  left: 80px;
}

.navigation.hamburguerabierto ul li{ /* esto es cuando ya empezo */
  opacity: 1 !important;
  left: 0;
}

/* a partir de aqui es cuando se meten */

.navigation ul li:nth-child(1),
.navigation.hamburguerabierto ul li:nth-child(1){
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation ul li:nth-child(2),
.navigation.hamburguerabierto ul li:nth-child(2){
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.navigation ul li:nth-child(3),
.navigation.hamburguerabierto ul li:nth-child(3){
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.navigation ul li:nth-child(4),
.navigation.hamburguerabierto ul li:nth-child(4){
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.navigation ul li:nth-child(5),
.navigation.hamburguerabierto ul li:nth-child(5){
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.navigation ul li:nth-child(6),
.navigation.hamburguerabierto ul li:nth-child(6){
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}


@media screen and (max-width: 768px){
	.navigation ul li a{
		font-size: 22px;
		line-height: 32px;
	}
	.navigation.active ul{
		left: 70%;
	}
}

/* ============================================== */
/* HAMBURGUER */
/* ============================================== */

.hamburguer{
  position: relative;
  width:60px;
  height:60px;
  cursor:pointer;
  display: block;
  background: var(--color-cafe);
  z-index: 9;
  border-radius: 50%;
}

.hamburguer span{
  position:absolute;
  display:block;
  height:1px;
  opacity: 1;
  background: var(--color-black);
  width:40px;
  left: 50%;
  margin-left: -20px;
}

.hamburguer span:nth-child(1){top:32%;}
.hamburguer span:nth-child(2){top:48%;}
.hamburguer span:nth-child(3){top:64%;}

.hamburguer.active span:nth-child(1){transform: rotate(135deg);top:48%;}
.hamburguer.active span:nth-child(2){width:0;}
.hamburguer.active span:nth-child(3){transform: rotate(-135deg);top:48%;}

.hamburguer.active span{
	background: white;
}

/* ============================================== */
/* TRANSITIONS */
/* ============================================== */

nav,
.navigation,
.navigation ul,
.navigation ul li,
.navigation ul li a,
.hamburguer span{
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	transition:all 500ms ease;
}