/*
 * Top navigation
 */
header{
	position:relative;
	left:0;
	right:0;
	//z-index:100;
	
	&::before{
		content:"";
		position:absolute;
		top:0;
		left:0;
		right:0;
		height:400px;
		background: url(/images/top-bg.svg) 50% 0 no-repeat;
		background-size:100% auto;
		z-index:-1;
		
	
	}
	
	.logo{
		//padding-left:0.75rem;
		font-weight:300;
		font-size:1.5rem;
		span{font-weight:700;}
		/*img{
			height:1.5rem;
			@include breakpoint(medium down){
				height:1.25rem;
			}
		}*/
		
		
	}
	
	a{text-transform:uppercase;font-weight:600;font-size:0.875rem;}
	
	
	.toggle-main-navigation{float:right;}
	
	// toggle navigation
	.toggle-menu{
	
		float:right;margin:0.5rem 0 0 0;position:relative;width:1.5rem;height:1.5rem;padding:0;transform:rotate(0deg);transition:.5s ease-in-out;cursor:pointer;

		span{display:block;position:absolute;height:0.125em;width:100%;background:$primary-color;opacity:1;left:0;transform:rotate(0deg);transition:.25s ease-in-out;}
		span:nth-child(1){top:0rem;}
		span:nth-child(2),
		span:nth-child(3){top:0.5rem;}
		span:nth-child(4){top:1rem;}

		&.open span:nth-child(1){top:18px;width:0%;left:50%;}
		&.open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
		&.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
		&.open span:nth-child(4){top:18px;width:0%;left:50%;}

	}

	
	
	@include breakpoint(medium down)
	{
		
		position:fixed;
		background:#fff;
		box-shadow:0 0 1.5rem rgba($black,0.25);
		z-index:100;
		&::before{
			height:100px;
			background-size:auto 7.5rem;
			background-position:100% -0.375rem;
		}
		
		.top-bar-right{
			ul{margin:4.5rem 0 1.5rem 0;}
			ul li{border-bottom:solid 1px $light-gray;text-align:center;}
			ul li:last-child{border:none;}
			a{font-size:1.25rem;padding:1.5rem 0;background:none;}			
		}
		

		
	}
		
}


html,body{}
h1,h2,h3,h4,h5,h6{
	text-transform:uppercase;
	@include font-for-header();
}

h1{color:$primary-color;}
h2{color:$primary-color;margin-top:2.25rem;}
h3{color:$secondary-color;}
h4{color:$secondary-color;}
h5{color:$primary-color;margin-bottom:0;}

a.header-font{
	font-size:1.125rem;
}



.large-padding-9{
	padding-top:9rem;
	
	@include breakpoint(medium down){
		padding-top:3rem;
	}
	
}


/*
 * Main sections
 */
.page-section{
	position:relative;
	padding:3rem 0 1.5rem 0;
	overflow:hidden;
	
	@include breakpoint(medium down)
	{
		padding-top:4.5rem;
	}
}

.page_section__hero{
	padding-top:12rem;
}

.page-section__section-home{
	
	position:relative;
	overflow:hidden;
	
	&::after{
		content:"";
		background: url(/images/home-bg.svg) no-repeat 0% 100%;
		background-size:auto 100%;
		width:75%;
		height:70%;
		position:absolute;
		right:-25%;
		bottom:-15%;
		z-index:-1;
	}
}


.page-section__section-interim{
	
	position:relative;
	overflow:hidden;
	
	&::after{
		content:"";
		background: url(/images/interim-bg.svg) no-repeat 0% 100%;
		background-size:auto 100%;
		width:75%;
		height:70%;
		position:absolute;
		right:0;
		bottom:-15%;
		z-index:-1;
	}
}

.page-section__section-projecten{
	
	position:relative;
	overflow:hidden;
	
	&::after{
		content:"";
		background: url(/images/projecten-bg.svg) no-repeat 0% 100%;
		background-size:100% auto;
		width:50%;
		height:100%;
		position:absolute;
		left:0;
		bottom:0;
		z-index:-1;
	}
}




.page_section__background-blue{
	background-color:$primary-color;//rgba($primary-color,0.15);
	color:$white;
	li{font-size:0.875rem;}
	a{color:$white;}
}

.page-section__not-found{
	padding-bottom:4.5rem;
}

.page-sidebar{
	
	h3{font-size:1rem;}
	h4{font-size:1.25rem;color:$primary-color;}
	
	img{margin-bottom:1.5rem;}
}


/*
 * Animate and fade in while scrolling 
 */
.page-section{
	
	.cell{
		opacity: 0;
		transition: opacity 250ms ease-out 0s,transform 250ms ease-out 0s;
		transform: translate3d(-3rem, 0px, 0px);
		backface-visibility: hidden;
		
	}
	
	.cell:nth-child(1){
		transform: translate3d(3rem, 0px, 0px);
		transition-delay: 200ms;
	}

	
	.cell.come-in{
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	
	.cell.already-visible{
		opacity:1;
		transition:none;
		transform: translate3d(0, 0, 0);
	}

	
}