/* ============================================== */
/* NAVIGATION-FIXED */
/* ============================================== */

.navigation-fixed{
  display: block;
  width: 100%;
  position: fixed;
  z-index: 999;
}

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

.navigation-fixed .navigation{padding: 30px 0; background: rgba(2,8,20,0);}
.navigation-fixed.effect .navigation{padding: 0 0; background: rgba(2,8,20,0.8);}

/*-- transitions --*/

.navigation-fixed .navigation{
  -webkit-transition:all 350ms ease;
  -moz-transition:all 350ms ease;
  -ms-transition:all 350ms ease;
  transition:all 350ms ease;
}

@media screen and (max-width: 768px){
  .navigation-fixed .navigation,
  .navigation-fixed.effect .navigation{
    padding: 0;
    background: rgba(2,8,20,0.8);
  }
}

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

.navigation li.logo{
  width: 60px;
  height: 60px;
  display: block;
  float: left;
  padding: 0;
  margin: 0 20px;
  background: url('./../../images/body/logo.svg') no-repeat center center;
}

@media screen and (max-width: 768px){
  .navigation li.logo{
    display: none;
  }
  .navigation .logo{
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    padding: 0;
    margin-left: -20px;
    top:5px;
    left: 50%;
    background: url('./../../images/body/logo.svg') no-repeat center center;
  }
}

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

.hamburguer{
  display: none;
}

.hamburguer{
  position: relative;
  width:70px;
  float: right;
  height:50px;
  cursor:pointer;
  margin:0;
  display: none;
  overflow: hidden;
}

.hamburguer span{
  position:absolute;
  display:block;
  height:2px;
  opacity: 1;
  top:10px;
  right:17px;
  background: #ffae00;
  width:50%;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;

  -webkit-transition:all 350ms ease;
  -moz-transition:all 350ms ease;
  -ms-transition:all 350ms ease;
  transition:all 350ms ease;
}

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

.hamburguer.active span:nth-child(1){width:40%;}
.hamburguer.active span:nth-child(2){width:15%;}
.hamburguer.active span:nth-child(3){width:35%;}

.navigation-fixed,
.navigation,
.hamburguer{
  z-index: 99999;
}

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


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

.navigation{
  padding:0;
  margin:0;
  width: 100%;
  display: block;
  float: left;
  position: relative;
}

.navigation ul{
  list-style: none;
  display: block;
  padding: 10px;
  width: 100%;
  display: flex;
  margin: 0;
  justify-content:center;

  -webkit-transition:all 350ms ease;
  -moz-transition:all 350ms ease;
  -ms-transition:all 350ms ease;
  transition:all 350ms ease;
}

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

.navigation ul li a{
  padding: 16px 20px;
  margin: 0 20px;
  color:white;
  display: block;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
}

.navigation ul li a.active{
  color:#ffae00;
}

.navigation ul li a:hover{opacity: 0.8;cursor: pointer;}

@media screen and (max-width: 768px){
  .navigation ul{
    display: block;
    justify-content:none;
    background: rgb(18, 18, 25);
    position: fixed;
    width: 250px;
    height: 100vh;
    right: -250px;
    top:50px;
  }

  .navigation ul.active{
    right: 0;
  }
  .navigation ul li{
    width: 100%;
  }

}