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

* {
    margin: 0px;
    font-family: 'Raleway', sans-serif;
}

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

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

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

.logo{
	height: 23vh;
	text-align: center;
}

#logo{

	height: 100%;
}

.menuitems{
	border-top: solid 1px #FFFFFF;
	border-bottom: solid 1px #FFFFFF;
	height: 5vh;
	transition: all 1s ease;
	background-color: #AAE0FA;
	overflow: scroll;
}

.menuitems p{
	padding: 0 2% 2% 2%;
	color: #FFFFFF;
	font-family: 'Raleway', sans-serif;
	font-size: 0.5rem;
	margin: 0;
}

.menuitems.active{
	height: 59vh;
	background-color: #000000;
	transition: all 1s ease;
}

.menuitems.active h1{
	font-size: 4vh;
	transition: all 1s ease;
}



.footer{
	height: 3vh;
	background-color: #000000;
}

.footer p{
	font-family: 'Raleway', sans-serif;
	font-size: 1.3vh;
	color: #FFFFFF;
	font-weight: 400;
	text-align: center;
	margin: 0;
	width: 100%;
	line-height: 3vh;
}

h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 3vh;
	color: #FFFFFF;
	font-weight: 700;
	text-align: center;
}




#homefoto1 {
	position: relative;
	left: 65%;
	top: -45%;
	height: 25vw;
	width: 25vw;
	border: solid 3px #FFFFFF;
	border-radius: 50%;
	box-sizing: border-box;
}

.imagescircle {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	z-index: 1;
}

.imageoverlaycircle {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	z-index: 1;
	background-image: url(Afbeeldingen/achtergrond_pixel_WIT.png);
}

.images {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.imageoverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-image: url(Afbeeldingen/achtergrond_pixel_WIT.png);
}

#homefoto2 {
	position: relative;
	top: -40%;
	left: 65%;
	height: 25vw;
	width: 25vw;
	border: solid 3px #FFFFFF;
	border-radius: 50%;
	box-sizing: border-box;
	z-index: 2;
}

.driehoek{
	position: absolute;
	top: 1px;
	right: 10%;
	width: 12%;
	transform: translate(0,-100%);
	opacity: 0;
	transition: opacity 1s ease;
}

#driehoekoverons.active{
	opacity: 1;
	transition: opacity 1s ease;
}

#driehoekwerkwijze.active{
	opacity: 1;
	transition: opacity 1s ease;
}

#driehoekcompetenties.active{
	opacity: 1;
	transition: opacity 1s ease;
}

#driehoektarieven.active{
	opacity: 1;
	transition: opacity 1s ease;
}

#driehoekcontact.active{
	opacity: 1;
	transition: opacity 1s ease;
}

.row{
	position: relative;
}

#competenties ul {
 padding-left: 20px;
}

#competenties li {
	list-style: square;
}

#competenties li p{
	padding: 0;
}

.contacthoofd{
	width: 50%;
	float: right;
}

#contact p{
	float: left;
}