
.sp-sticky-logo {
	display:none!important; /* hide it from start */
}
.sticky__wrapper {
	//top: 0;
	left: 0;
	right: 0;
}
.sticky {
	
	.sticky__wrapper {
		top:0;
		position:fixed;
		-webkit-transform: translate3d(0,0,0);
		z-index:111;
		-webkit-animation-name:fade-in-down;
		animation-name:fade-in-down;
		-webkit-animation-duration:1s;
		animation-duration:1s;
		-webkit-animation-fill-mode:forwards;
		animation-fill-mode:forwards;
		background-color: rgba(39,39,39,0.75); /* starting color */
		
		/* Backdrop filter added in Flex 3.9.3 */
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		
		.sp-sticky-logo {
			display:block!important;
			position:absolute;
			top:0;
			max-height:100%;
			padding:5px 0;
			width:auto;
			
		}
		.has-sticky-logo {
			display:none!important;
		}

	}
	.transparent-wrapper {
		position:absolute;
		z-index:9;
		left:0;
		right:0;
		margin:0 auto;
	}
	
	#cd-lateral-nav {
		min-height:100vh;
	}
	
	
	&.white,
	&.onepage {
		.sticky__wrapper {
			background-color: fade(white, 80%); /* starting color */
			box-shadow:0 2px 6px fade(black, 10%);
		}
	}
	&.transparent {
		.sticky__wrapper {
			background: rgba(40,40,40,.8); /* starting color */
			box-shadow:0 2px 6px fade(black, 10%);
		}
	}
}


// Header-In (3D) Effect
@-webkit-keyframes header-in {
	0%{
		opacity:0;
        -webkit-transform:translate3d(0,-20px,0) scale(0.9) perspective(1200px) rotateX(-60deg);
        transform:translate3d(0,-20px,0) scale(0.9) perspective(1200px) rotateX(-60deg);
	}
	
	100%{
		opacity:1;
        -webkit-transform:translate3d(0,0,0) scale(1) perspective(800px) rotateX(0deg);
        transform:translate3d(0,0,0) scale(1) perspective(800px) rotateX(0deg);
	}
}

@keyframes header-in {
  0%{
		opacity:0;
        -webkit-transform:translate3d(0,-20px,0) scale(0.9) perspective(1200px) rotateX(-60deg);
        transform:translate3d(0,-20px,0) scale(0.9) perspective(1200px) rotateX(-60deg);
	}
	
	100%{
		opacity:1;
        -webkit-transform:translate3d(0,0,0) scale(1) perspective(800px) rotateX(0deg);
        transform:translate3d(0,0,0) scale(1) perspective(800px) rotateX(0deg);
	}
}
.header-in {
    -webkit-animation-name:header-in;
    animation-name:header-in;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	//-webkit-backface-visibility: hidden;
	-webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
