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

.logo {
	left: 60px;
	top: 36px;
	z-index: 25;
	height: 55px;
	position: fixed;
	width: 155px;
	mix-blend-mode: difference;
}

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

.logo svg {
	position: absolute;
	pointer-events: none;
}

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: 50px;
	left: 40px;
}

.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: 20px !important;
		top: 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;
	}
	
}
 /* ------------------------- Language -------------------------------------------------- */

.language {
	position: fixed;
	right: 60px;
	top: 12px;
	padding: 19px;
	z-index: 20;
	mix-blend-mode: difference;
	height: 60px;
}

.language .lang{
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	margin: 0 3px;
	float: left;
	text-transform: uppercase;
	opacity: .5;
	font-family: 'Silka-Medium', sans-serif;
	
}

.language .active {
	opacity: 1;
	font-family: 'Silka-SemiBold', sans-serif;
}

.language .lang:hover {
	opacity: 1;
}


 /* ------------------------- Progress  -------------------------------------------------- */



.progressScroll {
	position: fixed;
	top: calc(50% - 95px);
	right: 14px;
	z-index: 5;
    transform: translate(0, -50%) rotate(90deg);
    color: #fff;
    mix-blend-mode: difference;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 20px;
}

@media screen and (max-width: 1000px){
	.progressContainer, .progressScroll {
		display: none;	
	}

}


 .progressContainer {
	position: fixed;
	top: 50%;
	right: 40px;
	z-index: 5;
	height: 100px;
	width: 2px;
	background: rgba(152, 152, 158, 0.3);
	overflow: hidden;
	transform: translate(0, -50%);
	
}

.progressFill {
	width: 2px;
	background: red;
	height: 0%;
}

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

/* ------------------------- Socials -------------------------------------------------- */

.socials {
	width: 40px;
	position: fixed;
	bottom: 50px;
	transform: translate(0, -50%);
	right: 20px;
	border-radius: 20px;
	mix-blend-mode: difference;
	z-index: 20;
}

.social-btn {
	width: 40px;
	height: 40px;
	float: left;
}

.ig { background: url("../img/ico-ig-light.svg") center center no-repeat;}
.li { background: url("../img/ico-li-light.svg") center center no-repeat;}
.dr { background: url("../img/ico-dr-light.svg") center center no-repeat;}
.art { background: url("../img/ico-art-light.svg") center center no-repeat;     width: 40px;
    height: 22px;
    margin-top: 12px}

.social-btn:hover {
	opacity: .5;
}

@media screen and (max-width: 760px){
	.socials {
		opacity: 0;
		visibility: hidden;
	}

	body.active .socials {
		opacity: 1;
		visibility: visible;
	}
}

/* ------------------------- Contact (right bottom) -------------------------------------------------- */

.contact-btn {
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 15px;
	right: 15px;
	mix-blend-mode: difference;
	z-index: 20;
	background: url("../img/ico-plane-light.svg") -36px 18px no-repeat;
	border-radius: 25px;
}

.contact-btn:hover {
	background: rgba(230, 229, 225, 0.07) url("../img/ico-plane-light.svg") 14px -32px no-repeat;
}


/* ------------------------- 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: #000;
}

main.active nav {
	opacity: 1;
	visibility: visible;
	transition: all .35s linear;
	transition-delay: 0s;
}

nav .wrap-block {
	display: flex;
}

nav ul {
	float: left;
}

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;
	font-family: 'IsidoraSans-Bold', sans-serif;
	transition: 0.3s;
}

nav ul li a:hover{color: pink; transition: 0.3s;}

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

nav ul li.current-menu-item a{color: #5d5c5c;}

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

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

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


nav ul li a{
	position: relative;
	margin: 0;
	color: #fff;
	margin-bottom: 0;
	font-size: 70px;
    line-height: 90px;
    font-weight: bold;
}

@media screen and (min-width: 1400px){
	nav ul li a{
		font-size: 90px; line-height: 100px;
	}
}

@media screen and (min-width: 1700px){
	nav ul li a{
		font-size: 100px; line-height: 120px;
	}
}


nav ul li a .btn-bg {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	mix-blend-mode: multiply;
	background: #FFC700;
	background-size: 600%;
	opacity: 1;
}

nav ul li a.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 .row2 {
	transform: translate(0, -100%);
}

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

nav ul li a:hover .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(0h1, 0);
}

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

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


@media screen and (max-width: 1200px){
	nav .wrap-block {
		width: 100%;
	}
}



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

	nav ul li a{font-size: 57px !important; line-height: 69px !important;}

	nav ul li a{font-size: 3.3rem; line-height: 3.8rem;}
	.nav-info-row{display: none;}
	main.active .nav-info{display: none;}
	main.active .nav-cta-btn{display: block;}

}


@media screen and (max-width: 650px){
	.content-left .menu-main-menu-container{
		top: 45%;
    	left: 40%;
	}
}


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

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

	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;
	min-width: 180px;
	opacity: 0;
	color: #fff;
	padding-left: 20px;
}

nav .nav-info {
	transition: opacity 1s cubic-bezier(0.7, 0, 0.3, 1);
	transition-delay: 0s;
	background-color: #ffffff14;
    padding: 40px;
    max-width: 400px;
}

p.contact_menu_intro {
    font-size: 26px;
    font-weight: bold;
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.contact_menu_p{white-space:normal !important; line-height: 20px; font-size: 15px; margin-top: 10px !important;}

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

.nav-info-row a{color: #fff; font-size: 15px;     
	float: left;
    display: block;
    width: 100%;}

.nav-info-row a span {
    line-height: 10px;
    float: left;
    margin-top: -6px;
}

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

.nav-info-row p {
	margin: 0;
	white-space: nowrap;
}

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

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 {
		display: none;
	}

}


@keyframes btnHover {
    0% {background-position-x: 0;}
    100% {background-position-x: 600%;}
}

.nav-cta-btn {
    position: fixed !important;
    right: 120px;
    padding: 8px 26px;
    top: 40px;
    height: auto;
    z-index: 22;
    -webkit-box-shadow: 0px 0px 0px 1px rgb(0 0 0 / 10%);
    box-shadow: 0px 0px 0px 1px rgb(0 0 0 / 10%);
    background: #fff;
    display: inline-block;
    line-height: 30px;
    text-decoration: none;
    overflow: hidden;
    border-radius: 25px;
    text-align: center;
}

.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);
	cursor: pointer;
    transform: translate(0, -4px);
}

.nav-cta-btn:hover span{color: #fff; position: relative; z-index: 25;}

.btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    animation: btnHover 10s linear;
    animation-iteration-count: infinite;
    background: #FFC700 url(../img/grad-btn.jpg);
    background-size: 600%;
    opacity: 0;
}

.btn:hover .btn-bg {
    opacity: 1;
}

.btn-bg, .btn span, .nav-cta-btn span{
	-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;  
}


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

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

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;
	}
}



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

 .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: #fff;
	    mix-blend-mode: difference;
 }

 main.dark .hamburger-bar:before,
 main.dark .hamburger-bar:after,
 main.light.active .hamburger-bar:before,
 main.light.active .hamburger-bar:after
 {
	background: #fff;
 }
 
 .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);
 }
 


 main.active .hamburger-bar:before {
	transform: rotate(-45deg) translate(0px,0px);
 }
 
 main.active .hamburger-bar:after {
	transform: rotate(45deg) translate(0px,0px);
 }
 
 .nav-icon:hover {
	background: rgba(180, 180, 180, 0.20);
	transform: translate(0, -3px);
 }
 
 main#home.scrolled .nav-icon,  main#home.scrolled .nav-icon:hover {
	 background: rgba(0, 0, 0, 0.25);
 }
 

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


.nav-icon, .hamburger-bar, .hamburger-bar:before, .hamburger-bar:after, a, span, .number{
	-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;
 }

#menu, .navigation, .overlayclick.loaded, .socials  {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;  
}