/* ------------------------- Navigation -------------------------------------------------- */

nav {
   width: 100%;
   height: 100vh;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 0;
   position: fixed;
   z-index: 20;
   background: #fff;
   opacity: 0;
   visibility: hidden;
   transition: all .15s linear;
   transition-delay: 0s;
}

nav.active {
   opacity: 1;
   visibility: visible;
}

nav ul {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translate(0, -50%) scale(1.5) rotate(0deg);
	left: 0;
	text-align: center;
	transition: all .75s cubic-bezier(0.87, 0, 0.13, 1);
	opacity: 0;
}

nav.active ul {
	transform: translate(0, -50%) scale(1) rotate(0deg);
	opacity: 1;
}

nav ul li {
	display: inline-block;
}

nav ul li a {
	color: #000;
	padding: 0 30px;
	line-height: 60px;
	font-size: 30px;
   font-family: 'Magnolia-Bold', serif;
}

nav ul li a:hover, nav ul .active a {
	color: var(--color-gold);
}

@media screen and (max-width: 840px){
	
	nav ul {
		top: 45%;
	}

	nav ul li {
		width: 100%;
		float: left;
	}

	nav ul li a {
		font-size: 20px;
	}

}

.logo-home {
   position: absolute;
   width: 1000px;
   z-index: 21;
   top: 20px;
   left: 50%;
   transform: translate(-50% ,0);
}

.logo-home h3{
   color: #000;
   /* letter-spacing: 2px; */
   font-size: clamp(50px, 4vw, 60px);
   font-weight: 400;
   text-transform: uppercase;
   font-family: 'Magnolia-Regular', sans-serif;
   text-align: center;
   width: 100%;
   z-index: 21;
   padding: 15px 0;
}

span.logo-subtag {
   color: var(--color-gold);
}
 
 @media screen and (max-width: 540px){
    nav.light .logo, nav.dark .logo {
       top: 50%;
    }
 
    .logo-home {
      width:200px;
    }

    .logo-home h3 {
      padding: 0;
    }

    span.logo-subtag {
      font-size: 50%;
      display: block;
   }
 }

/* ------------------------- Hamburger -------------------------------------------------- */

.nav-icon {
	position: absolute;
	right: 40px;
	top: 40px;
	width: 50px;
	height: 50px;
	cursor: pointer;
   background: var(--color-white);
   border-radius: 50%;
   transition: background-color .3s cubic-bezier(0.7, 0, 0.3, 1);
   display: block;
   z-index: 25;
}

.main.active .nav-icon, .main.active .logo-home h3 {
   position: fixed;
}

.main.active  {
   overflow: hidden;   
   position: fixed;
}

.hamburger-bar {
   width: 38%;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: transparent;
}
 
.hamburger-bar:before, .hamburger-bar:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background: var(--color-black);
   transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
}

main.active .hamburger-bar:before, main.nav-active .hamburger-bar:after {
   background: var(--color-black);
} 

main.nav-active .hamburger-bar {
	background: rgba(0, 0, 0, 0);
}
 
.hamburger-bar:before {
	transform: rotate(0deg) translate(0px,-4px);
 }
 
 .hamburger-bar:after {
	 transform: rotate(0deg) translate(0px,4px);
 }

/* Animation - Close  */

main.active .hamburger-bar:before {
   background: var(--color-black);
	transform: rotate(-45deg) translate(0, 0em);
}
 
main.active .hamburger-bar:after {
   background: var(--color-black);
	transform: rotate(45deg) translate(0, 0em);

}

@media screen and (max-width: 540px){

   .nav-icon {
      right: 10px;
   }
}