.nav-fade {
	display: none;
}


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

	.nav-fade {
		position: fixed;
	    width: 100%;
	    left: 0;
	    height: 180px;
	    pointer-events: none;
	    top: 0;
	    background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
	    z-index: 20;
	    opacity: 0;
	    pointer-events: none;
	    display: block;
	}
	
	main.light .nav-fade {
		background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.738) 19%, rgba(255, 255, 255, 0.541) 34%, rgba(255, 255, 255, 0.382) 47%, rgba(255, 255, 255, 0.278) 56.5%, rgba(255, 255, 255, 0.194) 65%, rgba(255, 255, 255, 0.126) 73%, rgba(255, 255, 255, 0.075) 80.2%, rgba(255, 255, 255, 0.042) 86.1%, rgba(255, 255, 255, 0.021) 91%, rgba(255, 255, 255, 0.008) 95.2%, rgba(255, 255, 255, 0.002) 98.2%, transparent 100%);
	}
	
	main.scrolled.nav-scroll-up .nav-fade {
		opacity: .7;
	}

}


/* ------------------------- Logo -------------------------------------------------- */

.aboutbox {
	right: 60px;
	bottom: 200px;
	z-index: 0;
	height: 160px;
	position: absolute;
	width: 380px;
	text-align: left;
}
@media only screen and (max-width: 1026px) {
    .aboutbox {
        display: none;
    }
}
.logo {
	left: 60px;
	top: 40px;
	z-index: 22;
	height: 50px;
	position: fixed;
	width: 175px;
}

.logo:hover {
	cursor: pointer;
	transform: translate(0, -3px);
}

.logo svg {
	position: absolute;
}

main.light .logo svg path, main.light .logo svg circle {
	fill: #000;
}

main.dark .logo svg path, main.dark .logo svg circle, main.light.active .logo svg path, main.light.active .logo svg circle {
	fill: #fff;
}

main.scrolled .logo {
	width: 0px;
}

.logo svg:nth-child(1) {
	left: -25px;
	top: 30px;
	opacity: 0;
	transition: all .5s cubic-bezier(0.7, 0, 0.3, 1); 
}

main.scrolled .logo svg:nth-child(1), main.active .logo svg:nth-child(1) {
	left: 0px;
	top: 5px;
	opacity: 1;
}

.logo svg:nth-child(2) {
	left: 0;
	top: 13px;
	opacity: 1;
	transition: all .5s cubic-bezier(0.7, 0, 0.2, 1); 
}

main.scrolled .logo svg:nth-child(2), main.active .logo svg:nth-child(2) {
	left: 25px;
	top: 13px;
	opacity: 0;
}
main.active .logo svg:nth-child(1), main.active .logo svg:nth-child(2) {
	transition: all .5s cubic-bezier(0.8, 0, 0.2, 1);
	transition-delay: .3s;
}

@media screen and (max-width: 540px){
	.logo, .logo:hover {
		left: 30px;
		transform: translate(-10%, -10%) scale(.8);
	}
	
	main.nav-scroll-down .logo, main.nav-scroll-down .logo:hover {
		top: -50px;
	}
	
	main.nav-scroll-down.active .logo, main.nav-scroll-down.active .logo:hover {
		top: 30px;
	}
	
}

/* ------------------------- Call to action -------------------------------------------------- */

.nav-cta-btn {
	position: fixed !important;
	right: 120px;
	top: 40px;
	z-index: 22;
	-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); 
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}

.btn.nav-cta-btn:hover {
	-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0); 
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
}

main.light .nav-cta-btn {
	background: #000;
} 

main.light .nav-cta-btn span {
	color: #000;
}

main.light.active .nav-cta-btn {
	background: #fff;
}

main.light.active .nav-cta-btn span{
	color: #000;
}

main#contact .nav-cta-btn {
	display: none;
}


@media screen and (max-width: 540px){
	.nav-cta-btn {
		top: auto;
		bottom: 20px;
		right: 30px;
		width: calc(100% - 60px);
		opacity: 0;
		visibility: hidden;
		transition: all 1s cubic-bezier(0.8, 0, 0.2, 1);
		transition-delay: 0s;
	}

	main.active .nav-cta-btn {
		opacity: 1;
		visibility: visible;
		bottom: 50px;
		transition: all 1s cubic-bezier(0.8, 0, 0.2, 1);
		transition-delay: .4s;
	}

	main.active .nav-cta-btn .btn-bg {
		opacity: 1;
	}

	main.active .nav-cta-btn span, main.active.light .nav-cta-btn span {
		color: #fff;
	}

	main#contact .nav-cta-btn {
		display: block;
	}
}

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

nav {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 21;
	opacity: 0;
	visibility: hidden;
	transition: all .7s linear;
	transition-delay: .35s;
	background: #ede9e5;
}

main.active nav {
	opacity: 1;
	visibility: visible;
	transition: all .35s linear;
	transition-delay: 0s;
	z-index: 22;
	color: #000;
}

nav .wrap-block {
	display: flex;
}

nav ul {
	float: left;
}

nav ul li:first-child {
	display: none;
}

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

nav ul li a {
	float: left;
	text-decoration: none;
	font-weight: 400;
	color: #fff;
	position: relative;
	background: #000;
}

nav ul li a span {
	float: left;
	position: relative;
	overflow: hidden;
	transform: translate(0, 125%); 
	transition: transform .5s cubic-bezier(0.87, 0, 0.13, 1);
	background: #000;
}

main.active nav ul li a span {
	transform: translate(0, 0);
	transition: transform 1.25s cubic-bezier(0.87, 0, 0.13, 1);
}

nav ul li:nth-child(2) a span {transition-delay: .05s;}
nav ul li:nth-child(3) a span {transition-delay: .10s;}
nav ul li:nth-child(4) a span {transition-delay: .15s;}
nav ul li:nth-child(5) a span {transition-delay: .20s;}

main.active  nav ul li:nth-child(2) a span {transition-delay: .05s;}
main.active  nav ul li:nth-child(3) a span {transition-delay: .10s;}
main.active  nav ul li:nth-child(4) a span {transition-delay: .15s;}
main.active  nav ul li:nth-child(5) a span {transition-delay: .20s;}


nav ul li a h1 {
	position: relative;
	margin: 0;
	line-height: 1;
	color: #fff;
	margin-bottom: 0;
}

nav ul li a .btn-bg {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	mix-blend-mode: multiply;
	background: #FFC700 url("../img/gradient-2.jpg");
	background-size: 600%;
	opacity: 1;
}

nav ul li:nth-child(3) a .btn-bg {background: #ffc500 url("../img/gradient-2.jpg"); background-size: 600%;}
nav ul li:nth-child(4) a .btn-bg {background: #ffc500 url("../img/gradient-2.jpg"); background-size: 600%;}
nav ul li:nth-child(5) a .btn-bg {background: #ffc500 url("../img/gradient-2.jpg"); background-size: 600%;}

nav ul li a h1.row2 {
	position: absolute;
	top: 100%;
	z-index: 1;
	background: #000;
	transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
	transition-delay: 0s;
}

nav ul li a:hover h1.row2 {
	transform: translate(0, -100%);
}

nav ul li a h1.row1 {
	transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
	transition-delay: 0s;
}

nav ul li a:hover h1.row1 {
	transform: translate(0, -100%);
}

nav ul li.active a {
	opacity: .25;
}

nav ul li.active a:hover {
	opacity: .45;
}

nav ul li.active a:hover h1.row2 {
	transform: translate(0, 0);
}

nav ul li.active a:hover h1.row1 {
	transform: translate(0, 0%);
}

@media screen and (max-width: 1740px){
	nav .wrap-block {
		padding: 0 15vw 0 17vw;
	}
}

@media screen and (max-width: 740px){
	nav .wrap-block {
		padding: 0 12vw 0 12vw;
	}
}

@media screen and (max-width: 540px){
	nav .wrap-block {
		padding: 0 30px;
	}

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

}

/* ------------------------- Nav Info -------------------------------------------------- */

.nav-info {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-end;
	opacity: 0;
	color: #000;
	padding-left: 20px;
	position:fixed;
	margin-top:25vh;
	margin-right:25vh;
}

nav .nav-info {
	transition: opacity 1s cubic-bezier(0.7, 0, 0.3, 1);
	transition-delay: 0s;
}

.nav-info-row {
	float: left;
	width: 100%;
	margin-bottom: 30px;
	position: relative;
}

.nav-info-row:last-child {
	margin-bottom: 0;
}

.nav-info-row p {
	margin: 0;
	white-space: nowrap;
	font-size:30px;
}

.nav-info-row.social-hover p a {
	text-decoration: none;
}

main.active .nav-info {
	opacity: 1;
	transition: opacity 1s cubic-bezier(0.7, 0, 0.3, 1);
	transition-delay: .7s;
}


.social-sticker {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 130px;
	display: block;
	transform: translate(15%, -30%) rotate(5deg) scale(1.7);
	opacity: 0;
	pointer-events: none;
	transition: all .2s cubic-bezier(0.83, 0, 0.13, 1);
}

.social-hover:hover .social-sticker {
	opacity: 1;
	transform: translate(35%, -65%) rotate(15deg) scale(1);
}

@media screen and (max-width: 540px){
	.nav-info {
		text-align: center;
		padding-left:0;
		margin-top:4vh;
		    margin-right: auto;
    margin-left: auto;
    width: 100%;
	}

}
@media screen and (max-width: 540px){
	.menu__item {
		display: none;
	}

}

/* ------------------------- Nav Icon ------------------------------------------------------ */

.nav-icon {
	position: fixed;
	right: 60px;
	top: 40px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 22;
	border-radius: 25px;
 }

 .hamburger-bar {
	width: 18px;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0);
 }
 
 .hamburger-bar:before,
 .hamburger-bar:after
 {
	content: '';
	position: absolute;
	width: 18px;
	height: 2px;
	background: #000;
 }

 main.dark .hamburger-bar:before,
 main.dark .hamburger-bar:after,
 main.light.active .hamburger-bar:before,
 main.light.active .hamburger-bar:after
 {
	background: #c1c1c1;
 }
 
 .hamburger-bar:before {
	transform: rotate(0deg) translate(0px,-4px);
 }
 
 .hamburger-bar:after {
	 transform: rotate(0deg) translate(0px,4px);
 }
 .nav-icon.active .hamburger-bar {
	background: rgba(35, 36, 45, 0);
 }
 
 .nav-icon.active .hamburger-bar:before {
	transform: rotate(-45deg) translate(0px,0px);
 }
 
 .nav-icon.active .hamburger-bar:after {
	transform: rotate(45deg) translate(0px,0px);
 }
 
 .nav-icon:hover {
	background: rgba(180, 180, 180, 0.20);
	transform: translate(0, -3px);
 }
 

 @media screen and (max-width: 540px){
	.nav-icon {
		right: 20px;
		top: 25px;
	}
	
	main.nav-scroll-down .nav-icon {
		top: -50px;
	}
	
	main.nav-scroll-down.active .nav-icon {
		top: 25px;
	}
}
/* ------------------------- Animations -------------------------------------------------- */

.logo, .nav-icon, .hamburger-bar, .hamburger-bar:before, .hamburger-bar:after, .logo path, .logo circle, .nav-cta-btn, li.active a, .nav-fade {
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
  	-ms-transition: all .25s ease-in-out;
  	-o-transition: all .25s ease-in-out;
  	transition: all .25s ease-in-out;
 }

.whitetext {

	color:#fff !important;
}