/* li {
  list-style-type: none;
  color: black;
}
li:nth-child(1):hover {
  cursor: pointer;
}
li:nth-child(1):hover .test {
  background-image: url("https://68.media.tumblr.com/0effaf0edb5309d6fce242055c327321/tumblr_okc11r9Q491ta0hnbo1_1280.jpg");
  background-size: cover;
  opacity: 1;
  background-position: 0% 50%;
}
li:nth-child(2):hover {
  cursor: pointer;
}
li:nth-child(2):hover .test {
  background-image: url("https://68.media.tumblr.com/df59ffd5623b0007be8754d964b4c690/tumblr_oebrxahoZD1ta0hnbo1_1280.jpg");
  opacity: 1;
  background-size: cover;
  background-position: 0% 50%;
}
li:nth-child(3):hover {
  cursor: pointer;
}
li:nth-child(3):hover .test {
  background-image: url("https://68.media.tumblr.com/01447d87075179651691f97eafc16c95/tumblr_oebrsf3ZHh1ta0hnbo1_1280.jpg");
  opacity: 1;
  background-size: cover;
  background-position: 0% 50%;
}
li:nth-child(4):hover {
  cursor: pointer;
}
li:nth-child(4):hover .test {
  background-image: url("https://68.media.tumblr.com/931734c1b6a59b717166e1e47830ccaa/tumblr_oebqotH4BK1ta0hnbo1_1280.jpg");
  opacity: 1;
  background-size: cover;
  background-position: 0% 50%;
}

.test {
  width: 80vw;
  height: 100vh;
  background-color: red;
  position: absolute;
  top: 0vh;
}

span {
  display: block;
  position: absolute;
  height: 1px;
  width: 5vw;
  left: 5.5vw;
  background: #000;
  border-radius: 9px;
  transition: 0.25s;
  opacity: 0;
}

li:hover span:nth-child(1) {
  margin-top: 20px;
  opacity: 1;
}

li:hover span:nth-child(2) {
  margin-top: -20px;
  opacity: 1;
}


.test {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 20vw;
  z-index: 999999999;
  top: 0vh;
  cursor: auto;
  z-index: 0;
  transition: 0.25s;
  opacity: 0;
  background-color: white;
}

.test2 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 20vw;
  z-index: 999999999;
  top: 0vh;
  cursor: auto;
  z-index: 1;
  opacity: 0;
  background-color: white;
} */

/************ ICON HAMBURGER *************/
#nav-icon {
  width: 60px;
  height: 45px;
  position: absolute;
  top: 35px;
  right: 0;
  z-index: 9999999;
  /*margin: 50px auto;*/
  -webkit-transform: rotate(0deg) translateX(-50%);
  -moz-transform: rotate(0deg) translateX(-50%);
  -o-transform: rotate(0deg) translateX(-50%);
  transform: rotate(0deg) translateX(-50%);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 1.3px;
  width: 60px;
  background: #be8958;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.125s ease-in-out;
  -moz-transition: 0.125s ease-in-out;
  -o-transition: 0.125s ease-in-out;
  transition: 0.125s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2) {
  top: 16px;
  width: 40px;
  margin-left: 1.1rem;
}

#nav-icon span:nth-child(3) {
  top: 32px;
}
#nav-icon.open{
  position: fixed;
}
#nav-icon.open span:nth-child(1) {
  top: 16px;
  opacity: 1;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  background: #fff;
}

#nav-icon.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon.open span:nth-child(3) {
  top: 16px;
  opacity: 1;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  background: #fff;
}

#containIcon {
  position: relative;
  z-index: 12;
  top: 0;
}

/************ SIDE MENU*************/
.sidenav {
  height: 100vh;
  width: 100vw;
  margin-left: -100vh;
  position: fixed;
  z-index: 11;
  top: 0vh;
  left: 0;
  background-image: url('../img/bg-menu.jpg');
  background-size: cover;
  overflow: hidden;
  transition: 0.35s;
  padding-top: 60px;
  opacity: 0;
  z-index: -1;
}
.sidenav .linea{
  display: block;
  width: 100%;
  height: 1px;
  margin: 4rem auto;
  background-color: #fff;
}

.sidenav a {
	color: #18272F;
  position: relative;
  text-decoration: none;
}

.sidenav a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #343434;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.sidenav a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
.sidenav a.logo-m:hover::before{
  transform: scale(0);
}
.sidenav a{
  text-decoration: none;
}
.sidenav .title-section{
  font-family: 'Cinzel', serif;
  color: #fff;
  font-size: 1.4rem;
}
.sidenav h3{
  text-align: center;
  font-family: 'Cinzel', serif;
  color: #343434;
  font-weight: 500;
  margin: 2rem auto 1rem auto;
}
.sidenav ul{
  padding: 0;
}
.sidenav li{
  list-style: none;
  text-align: center;
}
.sidenav li a{
  color: #fff;
  font-family: 'Helvetica 45 Light', sans-serif;
  font-weight: 300;
  font-size: .9rem;
}
.sidenav.full {
  margin-left: 0vh;
  opacity: 1;
  z-index: 11;
}

.menuItems {
  margin-top: 0vh;
  color: #000;
  font-size: 18px;
  position: absolute;
  line-height: 80px;
  text-align: center;
  top: 30%;
  width: 10vw;
  margin-left: 20px;
  font-family: "Raleway", sans-serif;
  font-weight: lighter;
}


/*
.body {
  height: 100vh;
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
  background-color: #1D1D2F;
  overflow: hidden;
} */

.noise {
  height: 100vh;
  width: 100vw;
  position: fixed;
  background-image: url("https://andreivictor.ro/codepen/background-grain-effect/noise.gif");
  background-repeat: repeat;
  opacity: 0.03;
  z-index: -1;
}

/* h1 {
  font-family: "Arial black", sans-serif;
  font-size: 100px;
  position: absolute;
  margin: auto 0;
  color: white;
  line-height: 90%;
  text-transform: uppercase;
  z-index: 1;
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  text-align: center;
  font-weight: bolder;
} */

.titre {
  font-family: "Arial black", sans-serif;
  font-size: 14px;
  color: #FFF;
  z-index: 9;
  position: absolute;
  right: -30px;
  bottom: 0;
}

.moon-container {
  position: absolute;
  height: 250px;
  width: 250px;
  top: 200px;
  left: 50%;
  transform: translateX(-50%) scale(1.6);
}

.moon {
  animation: fly 5s linear infinite;
}

@keyframes fly {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(0px, -2px);
  }
  66% {
    transform: translate(0px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.circle {
  height: 250px;
  width: 250px;
  background-color: #FF6E61;
  border-radius: 50%;
  position: absolute;
}

.img-moon {
  width: 250px;
  position: absolute;
  opacity: 0.2;
}

.titre {
  animation: glitch-anim-text 0.5s 2s linear;
  animation-iteration-count: 2;
}

@keyframes glitch-anim-text {
  0% {
    opacity: 1;
    transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  10% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  20% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  35% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  50% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  60% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  70% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  80% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  90% {
    transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}