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

.navigation{
  display: block;
  width: 100%;
  position: fixed;
  z-index: 9999;
  background: rgba(38,61,96,0);
}

.navigation.actives{
  background: rgba(38,61,96,0.9);
}

.navigation > div{
	display: flex;
	max-width: 1440px;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	padding: 20px 0;
}

.navigation.actives > div{
	padding: 10px 0;
}

.navigation li{
  display: block;
  float: left;
}

.navigation li a{
  display: block;
  float: left;
  padding: 10px 20px;
  margin: 0 5px;
  color: white;
}

.navigation li a.btn-neutral{
	margin-left: 20px;
	padding:10px 30px 10px 50px;
}

.navigation li a.btn-neutral:hover{
  color:white;
}

.navigation.actives li.active a,
.navigation li.active a,
.navigation li a:hover{ color:var(--color-neutral); }

@media screen and (max-width: 1440px){
  .navigation > div{
    padding: 0 30px;
  }
}

@media screen and (max-width: 1280px){
  .navigation,
  .navigation.actives{
    padding: 0 20px;
  }


  .navigation > div,
  .navigation.actives > div{
    padding: 0;
  }

  .navigation li{
    width: 100%;
  }
  .navigation li a{
    font-size: 18px;
  }
  .navigation ul{
    position: fixed;
    max-width: 400px;
    width: 100%;
    position: absolute;
    top:0;
    padding: 80px 40px 20px 40px;
    right: -400px;
    height: 100vh;
    background: rgba(0,0,0,0.9);
  }

  .navigation ul.active{
    right: 0;
  }
}

/* ============================================== */
/* BODY */
/* ============================================== */

body.active{
  overflow-y:hidden;
  position: relative;
}

/* ============================================== */
/* LOGO */
/* ============================================== */

.info{
	position: relative;
	padding-left: 150px;
}

.info p:nth-child(2){
	font-size: 12px;
}

.info :is(p,a){
	margin: 0;
	color: white;
}

a.logo{
	overflow: hidden;
	display: block;
	position: absolute;
	top:0;
	left: 0;
}

a.logo img{
	width: 130px;
}

@media screen and (max-width: 1280px){
	.info{
		padding-left: 90px;
	}
	.info p:nth-child(2),
	.info p span{
		display: none;
	}
	a.logo img{
		width: 70px;
	}
	a.logo{
		top:-13px;
	}
	.info :is(p,a){
		font-size: 12px;
	}
}

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

.hamburguer{
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  z-index: 999;
}

.hamburguer:hover{
  cursor: pointer;
}

.hamburguer span{
  position: absolute;
  left: 15%;
  width: 70%;
  height: 3px;
  background: var(--color-neutral);
  display: block;
}

.hamburguer span:nth-child(1){top:17px;}
.hamburguer span:nth-child(2){top:24px;}
.hamburguer span:nth-child(3){top:31px;}

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

@media screen and (max-width: 1280px){
  .hamburguer{
    display: block;
  }
}

.navigation,
.hamburguer span,
.navigation ul,
.navigation li a,
.navigation > div{
  -webkit-transition:all 250ms ease;
  -moz-transition:all 250ms ease;
  -ms-transition:all 250ms ease;
  transition:all 250ms ease;
}