@charset "utf-8";
/* CSS Document */

* {
    margin: 0px;
	padding: 0px;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #6d6e70 !important;
}

h1{
	color: #acb8de !important;
}

p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: #6d6e70 !important;
}

::-webkit-scrollbar {
    width: 0px;
    height: 10px;
    }

/*===============================================================

							  Main  
							  
===============================================================*/

.footer {
	position: fixed;
	bottom: 0px;
	height: 7%;
	color: #4A2F1F;
}

.footer p{
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: 5px;
	color: #4A2F1F;
	font-size: 0.6vw;
}

.alternatefooter{
	width: 100%;
	text-align: center;
	color: #FFFFFF !important;
	font-size: 0.7vw;
}

.white{
	background-color: #FFFFFF;
}

#logooverlay {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.vingerafdruklogo {
	transition: all 1s ease;
}

.logocontrol:hover .vingerafdruklogo {
	fill: #FFFFFF;
	transition: all 1s ease;
}

.vast{
	position: fixed;
}

.boven{
	margin-top: 20% !important;
}

.mtop5{
	padding-top: 3% !important;
}

.pbot7{
	padding-bottom: 7vh !important;
}

.mh100{
	min-height: 100%;
}

.bottom{
	position: absolute;
	bottom: 0;
}

#strookje{
	background-image: url(img/houten_strook.png);
	background-size: cover;
}

#duimafdruk{
	max-width: 10000%;
}

.side-nav li {
	font-size: 1.9vw;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	padding-left: 2%;
	color: #6d6e70 !important;
	width: 100%;
}

.side-nav li a{
	width: 100%;
}

.side-nav li.active {
	color: #acb8de !important;
	font-weight: 700;
}

.side-nav li:hover {
	font-size: 1.9vw;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #6d6e70 !important;
}

.test{
	position: absolute;
	bottom: 5%;
}

.mwauto{
	max-width: 10000%;
}

.a00{
	position: absolute;
	top: 0;
	left: 0;
}

.relative {
	position: relative;
	height: 50px !important;
	width: 50px !important;
	margin-left: 20px;
}

.divider{
	border-color: #acb8de !important;
}

.holder{
	position: relative;
}

.projectimage {
	position: relative;
	vertical-align: bottom;
	border: 1px solid white;
}

.projecttitle{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 10%;
	background-color: #acb8de;
	color: #FFFFFF;
	transition: all 1s ease;
	text-align: center;
}

.projecttitle h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #FFFFFF !important;
	text-align: center;
	font-size: 1.2vw;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	margin: 0;
	transition: all 1s ease;
}

.projecten{
	position: absolute;
	height: 100%;
	width: 100%;
}

.holder{
	cursor: pointer;
	transform: translateZ(0);
}

.projectinfo{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #acb8de;
	color: #FFFFFF;
	transition: all 1s ease;
	border: 1px solid white;
	padding: 3%;
	font-size: 1vw;
}

.holder:hover .projecttitle{
	background-color: #FFFFFF;
	transition: all 1s ease;
}

.holder:hover .projecttitle h1{
	color: #6d6e70 !important;
	transition: all 1s ease;
}

.projecttitle.active{
	background-color: #FFFFFF;
	transition: all 1s ease;
}

.projecttitle.active h1{
	color: #6d6e70 !important;
	transition: all 1s ease;
}

.holder:hover .projectinfo{
	transform: translate(0,100%);
	transition: all 1s ease;
}

.background{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,0);
	padding-right: 1%;
}

.projectengrid{
	padding-left: 4%;
	padding-right: 5%;
}

.projectduimafdruk{
	position: absolute;
	left: 1px;
	top: 45%;
	transform: translate(0,-50%);
	height: 80%;
	opacity: 0;
	transition: all 1s ease;
}

.holder:hover .projectduimafdruk{
	opacity: 1;
	transition: all 1s ease;
}

.facebook{
	position: absolute;
	left:0;
	width: 45%;
	cursor: pointer;
}

.facebook img{
	position: absolute;
	top: 0;
}

.facebookhover{
	opacity: 0;
	transition: opacity 1s ease;
}

.facebookhover:hover{
	opacity: 1;
	transition: opacity 1s ease;
}

.linkedin{
	position: absolute;
	right:0;
	width: 45%;
	cursor: pointer;
}

.linkedin img{
	position: absolute;
	top: 0;
}

.linkedinhover{
	opacity: 0;
	transition: opacity 1s ease;
}

.linkedinhover:hover{
	opacity: 1;
	transition: opacity 1s ease;
}

.links{
	color: #acb8de;
	transition: color 1s ease;
}

.links:hover{
	color: #6d6e70 !important;
	transition: color 1s ease;
}

.links:visited{
	color: #acb8de;
	transition: color 1s ease;
}