body, html {
  height: 100%;
  background:#0c0e1a;
  font-family: 'Montserrat', sans-serif;
}

.navigation{
	width:0px;
	position: absolute;
	top:0px;
	left:0px;
	transition: 0.5s all;
}
.navigation.active{
	left:0px;
}
.navigation ul{
	width:100%;
	position: absolute;
	top:0px;
	padding:0px;
	margin:41px 0px 0px 90px;
	box-sizing: border-box;
}
.navigation li{
	margin-right:20px;
	list-style: none;
	display:inline-block;
}
.navigation li a{
	text-decoration: none;
	color:#fff;
	display:block;
	 text-overflow: ellipsis;
  white-space: nowrap;
	font-size:14px;
	text-transform: uppercase;
	font-weight: 300;
	margin:0px 0px;
}

#main{
	background:url('./img/background.jpg') center center;
	background-size:cover;
	display:none;
	background-repeat: no-repeat;
	width:100%;
	height:100%;
}

.menu-toggle{
	font-size:18px;
	color:#fff;
	position: absolute;
	top:40px;
	left:40px;
	z-index:100;
	cursor:pointer;
}

div.random-glider {
 width:1px;
 height:1px;
position:fixed;
display:table-cell; vertical-align:middle; text-align:center
    
}

div.random-glider .gradient{
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 200vw;
	height: 200vh;
	transform: translate(-50%, -50%);
	 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,1+98 */
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(5,5,5,1) 98%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(5,5,5,1) 98%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(5,5,5,1) 98%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.title{
	z-index:99;
	top: 50%;
   left: 50%;
   width:70%;
   max-width:700px;
   position: absolute;
   text-align:center;
   transform: translate(-50%, -50%);
}

.title h1{
	color:#fff;
	font-family: 'ailerons', 'Montserrat', sans-serif;
	font-size:60px;
	opacity: 0;
	margin:-10px 0px 0px 0px;
	padding-bottom:10px;
	letter-spacing: -5.6px;
}
.title h2{
	color:#fff;
	font-size:22px;
	margin:-10px 0px 0px 0px;
	padding-bottom:10px;
	opacity: 0;
	font-weight:200;
}
.title .divider{
	width:100px;
	height:2px;
	opacity: 0;
	margin:25px auto;
	background:#fff;
}
.title p{
	color:#fff;
	opacity: 0;
	font-weight: 200;
	font-size:15px;
	max-width:550px;
	margin: -10px auto;
	padding-bottom:10px;
	line-height: 24px;
}
.title p a{
	color:#fff;
	font-weight:500;
	text-decoration: none;
}
.social{
	margin-top:30px;
}

.social i{
	border-radius:30px;
	background:#fff;
	width:25px;
	height:25px;
	cursor: pointer;
	margin:5px;
	transition: all 0.3s;
	font-size:13px;
	line-height:25px;
}
.social i:hover{
	background:rgba(49, 63, 148, .9);
	color:#fff;}
.social a{
	color:#0b0d18;
	opacity: 0;
}

.lightbox{
	display:none;
}
.lightbox h3{
	padding: 40px;
    font-size: 20px;
	background:#f1f1f1;
	border-bottom:1px solid #d4d4d4;
	margin:0px;
}
.lightbox p{
	font-family: 'Montserrat', sans-serif;
	font-weight:300;
	line-height:20px;
	font-size:14px;
}
.featherlight .featherlight-close-icon{
	margin: 38px;
    font-size: 20px;
	background:transparent;
	outline:none;
}
.lightbox p strong{
	font-weight:600;
}

.featherlight-content{
	max-width:800px;
	height:80%;
	width:calc(100% - 80px);
	border-radius: 5px;
}

.featherlight .featherlight-content{
	margin:0px;
	border-bottom:0px;
	padding:0px;
	overflow:hidden;
	
}
.scroll-content{
	position: absolute;
    overflow: auto;
    height: calc(100% - 184px);
    margin-top: 40px;
    box-sizing: border-box;
    width: calc(100% - 80px);
    margin-left: 40px;
    padding: 0px 40px 0px 0px;
}

.voorwaarden a{
	font-size:12px;
	color:#fff;
	position: absolute;
	bottom:40px;
	text-transform: uppercase;
	text-decoration: none;
	left:40px;
	cursor:pointer;
}
.voorwaarden a:hover{text-decoration: underline;}

.projects-arrow{
	position: absolute;
	right:0px;
	top:50%;
	height:200px;
	cursor: pointer;
	display: block;
	line-height: 200px;
	width:100px;
	text-align: center;
	font-size:20px;
	margin-top:-100px;
	color: #fff;
}

.copyright{
	font-size:12px;
	color:#fff;
	position: absolute;
	bottom:40px;
	text-transform: uppercase;
	text-decoration: none;
	right:40px;
	cursor:pointer;
}

@media only screen and (max-width: 420px) {
	
	.title{
		z-index:99;
		top: 50%;
	   left: 50%;
	   width:90%;
	   max-width:700px;
	   position: absolute;
	   text-align:center;
	   transform: translate(-50%, -50%);
	}
	
	.title h1{
		color:#fff;
		font-family: 'ailerons', 'Montserrat', sans-serif;
		font-size:48px;
	}
	.title h2{
		color:#fff;
		font-size:18px;
	}
	
	.featherlight-content{
		max-width:800px;
		height:calc(100% - 40px);
		width:calc(100% - 40px);
		border-radius: 5px;
	}
	.scroll-content{
		word-break: break-word;
		position: absolute;
		overflow: auto;
		height: calc(100% - 69px);
		margin-top: 0px;
		box-sizing: border-box;
		width:100%;
		margin-left:0px;
		padding: 20px;
	}
	.lightbox h3{
		padding: 20px;
		font-size: 16px;
		background:#f1f1f1;
		border-bottom:1px solid #d4d4d4;
		margin:0px;
	}

	.featherlight .featherlight-close-icon{
		margin: 16px;
		font-size: 16px;
		background:transparent;
		outline:none;
	}
}