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

.logo-home {
	position: fixed;
	height: 50px;
	width: 200px;
	z-index: 21;
	top: 40px;
	left: 50%;
	transform: translate(-50% ,0);
}

.logo-home h3 {
	color: #fff;
	letter-spacing: 2px;
	text-align: center;
	position: absolute;
	height: 50px;
	line-height: 20px;
	padding: 15px 0;
	width: 100%;
	top: 0;
	letter-spacing: 6px;
}

.logo-home img {
	top: 125%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	opacity: 0;
}

main.scrolled .logo-home h3, main.scrolled.active .logo-home h3, main.active .logo-home h3 {
	top: -25px;
	opacity: 0;
}

main.scrolled .logo-home img, main.scrolled.active .logo-home img, main.active .logo-home img {
	top: 50%;
	opacity: 1;
}


@media screen and (max-width: 640px){
	.logo-home {
		top: 20px;
	}

	.logo-home h3 {
		letter-spacing: 4px;
	}
}

/* ------------------------- Logo All Pages -------------------------------------------------- */

main#home .logo {
	display: none;
}

.logo {
	position: fixed;
	height: 50px;
	width: 200px;
	z-index: 21;
	top: 40px;
	left: 50%;
	transform: translate(-50%, 0);
}

.logo img {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	opacity: 1;
}

@media screen and (max-width: 640px){
	.logo {
		top: 20px;
	}
}

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

.navigation-fade {
	position: fixed;
	width: 100%;
	left: 0;
	height: 150px;
	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: 16;
	opacity: .3;
}

main.scrolled .navigation-fade{
	opacity: .5;
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

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

.nav-cta-btn {
	position: fixed !important;
	right: 40px;
	top: 40px;
	z-index: 25;
}

.nav-cta-btn:hover {
	background: #252525;
	color: #fff;
}

@media screen and (max-width: 640px){
	.btn.nav-cta-btn {
		display: none;
	}
}


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

nav {
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 0;
	position: fixed;
	z-index: 20;
	background: #000;
	opacity: 0;
	visibility: hidden;
	transition: all .75s cubic-bezier(0.87, 0, 0.13, 1);
}

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

nav .background-image, nav .left-fade, nav .top-fade {
	width: 60vw;
	position: absolute;
	height: 100%;
	right: 0;
	top: 0;
}

nav .left-fade {
	background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

nav .top-fade {
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

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 .big-li {
	display: inline-block;
}

nav ul .big-li a {
	color: rgba(255, 255, 255, 0.5);
	padding: 0 30px;
	line-height: 60px;
	font-size: 42px;
	font-family: 'Silka-SemiBold', sans-serif;
}

nav ul .big-li a:hover, nav ul .active a {
	color: #fff;
}

nav .external-links {
	width: 100%;
	float: left;
	margin-top: 60px;
	text-align: center;
}

nav .external-links a {
	height: 30px;
	display: inline-block;
	padding: 0 25px;
}

nav .external-links a h3 {
	font-size: 12px;
	display: inline-block;
	margin-right: 5px;
	letter-spacing: 1px;
}

nav .external-links a:hover h3 {
	color: #fff;
}


nav .external-links a svg {
	display: inline-block;
	left: auto;
	transform: translate(0, 2px);
	opacity: .6;
}

nav .external-links a:hover svg {
	transform: translate(3px, -1px);
	opacity: 1;
}


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

	nav .background-image, nav .left-fade, nav .top-fade {
		 width: 100vw;
	}
	
	nav ul {
		top: 45%;
	}

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

	nav ul .big-li a {
		font-size: 32px;
	}

	nav .external-links {
		margin-top: 40px;
	}

	nav .external-links a {
		width: 100%;
		float: left;
		margin: 2px 0;
	}
}

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

.nav-icon {
	position: fixed;
	left: 40px;
	top: 40px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 25;
	background: #fff;
	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: 1px;
	background: rgba(0, 0, 0, 1);
 }
 
 .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);
	background: rgb(170, 0, 0);
 }
 
 .nav-icon.active .hamburger-bar:after {
	transform: rotate(-45deg) translate(0px,0px);
	background: rgb(170, 0, 0);
 }

 .nav-icon:hover {
	background: #252525;
}

.nav-icon:hover .hamburger-bar:before,  .nav-icon:hover .hamburger-bar:after {
	background: #fff;
}

@media screen and (max-width: 640px){
	.nav-icon {
		left: 20px;
		top: 20px;
	}
}

/* ------------------------- Animations -------------------------------------------------- */

.navigation-bar, nav a, nav a:after, .nav-icon, .hamburger-bar, .hamburger-bar:before, .hamburger-bar:after, .black-overlay, .logo, #logo-svg, .nav-cta-btn, .blog-count, .logo-home h3, .logo-home img, .navigation-fade, .external-links a h3, .external-links a svg  {
	-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;
 }