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

html, body, .viewport {
  height:100%;
	 width: 100%;
	font-family: 'Roboto', sans-serif;
	margin: 0;
	font: #21264C;
	font-size:0.8vw;
	}



img
{max-width: 100%;
 height: auto;
}

a:link
{color: #337BA3;
text-decoration: none;}

a:hover{color: #93DBA9;}

#contact a:hover{color: #FFF;}

.sticky {
	position: fixed;
	top: 0;
	width: 97%;
	z-index: 100;
	background-color: #EFF1F7;
	
}

.sticky + .content {
  padding-top: 325px;
}

#content{float: left;
width: 97%;}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

aside

{width: 3%;
background: #337BA3;
height:3065px;
float: left;
text-align: center;
justify-content: center;

	


}


header{
	width: 100%;
	height: 325px;
	color: #337BA3;

	text-align: center;
	background: url( ../img/header-09.jpg);
	background-repeat: no-repeat;
    background-size: cover;
	
	
}


#contact
{
	padding: 0.5%;
	margin-left: 2%;
	width: 10%;
	background-color: white;
	z-index: 120;
	position: absolute;
	font-size: 2em;
	height: 50px;
}

#contact li{line-height: 24px;}

#contact > ul {
display: block;
width: 95.5%;
list-style-type:none;
left: -0.5%;
margin:0px;
position:absolute;
top:0px;
background-color:#7AD3D3;
opacity:0;
transition:opacity 0.5s linear;
font-size: 16px;
height: 80px;
color: #FFFFFF;
padding: 3%;
	
}


#contact:hover > ul {
  visibility:visible;
  opacity:1;
}



#section1{
	
	width: 100%;
	visibility: hidden;
	position: relative;
	top:-350px;
}

#section2{
	
	width: 100%;
	clear: both;
	visibility: hidden;
	position: relative;
	top:-220px;
}


#section3{
	
	width: 100%;
	clear: both;
	visibility: hidden;
	position: relative;
	top:-360px;
}

#section4{
	
	width: 100%;
	clear: both;
	visibility: hidden;
	position: relative;
	top:-320px;
}



main

{width: 100%;
float: left;
}


nav{
width: 100%;
float: left;
padding-top: 40px;
background: #FFFFFF;
}




#lijn_projecten 
{height: 30px;
border-left:1px solid #337BA3;
width: 9.6%;
float: left;
margin-left: 3%;
	clear: both;

}



#lijn_watis 
{height: 40px;
border-left:1px solid #337BA3;
width: 25.5%;
float: left;



}



nav ul
{ list-style-type: none;
    margin: 0;
    padding: 0;}

nav li
{width: 9%;
float: left;
margin-left: 1.4%;
}

#footernav a{color: white}

#footernav{clear: both;

height: 125px;
position: relative;
width: 100%;
background:#21264C;
color: #FFFFFF;}


 #footernav ul
{ list-style-type: none;
    margin: 0;
    padding: 0 0 0 4%;
color: #FDFDFD;
 }

 #footernav li
{width: 9%;
float: left;
margin-left: 1.4%;
}



section{min-height: 100%;}

/*-------------------------- Wat is --------------------------------*/
#wat_is{
	width: 78%;
	background: url(../img/bg_groen-03.jpg);
	height:100vh;
	padding-left: 22%;
}

.wat_is_icon{
	background: #FFFFFF;
	height:100vh;
	float: left;
	width: 10%;
}
#wat_is li{
	list-style-image: url(../img/bol_1-10.jpg);
	color:#337BA3;
margin-bottom: 1.1em;}


#wat_is_tekst{
	background: #FFFFFF;
	color: #21264C;
	float: left;
	width: 40%;
	
}

#wat_is_tekst_2{
	width:15%;
	background: #FFFFFF;
	height: 500px;
	float: left;
	color: #21264C;
	padding-left: 10%;
	
}
	



/*-------------------------- projecten --------------------------------*/

#projecten{
	width: 95%;
	height:100vh;
	padding-left: 5%;
	position: relative;
	top: 100px;
	color: #337BA3;
}

#projecten_icon{width: 7%;
	float: left;
	
}


#projecten article{
	margin: 2%;
	float: left;
	width: 25%;
}

.licht_blauw{
	color:#337BA4; 
}

#projecten h2{
	color: #21264C;
font-size: 1em;}

/*-------------------------- MS office_pc --------------------------------*/

#ms-office
{
	width: 100%;
	background-image:url(../img/bg_office.jpg);
	color: #518987;
	height:520px;
	clear: both;
}

#ms-office h1 {
	color: #7AD3D3;}
	


#text_office{
	width: 60%;
	background-color: #FFFFFF;
	float: right;
	padding: 5%;
}

/*-------------------------- wie_is_pc --------------------------------*/
#wie_is
{
	width: 100%;
	background-image: url(../img/bg_Wieis.jpg);
	color: #456599;
	height:578px;

}

#wie_is h1 {
	color: #5D86D3;}
	


#text_wie_is{
	width: 50%;
	background-color: #FFFFFF;
	float: left;
	padding: 2%;
	border-left: none;
	margin-left: 3%;
}

h2{
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 0.8vw;
}


#social_media
	{display: none;
	 visibility: hidden;
	
	}



/*---------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 480px) {
	*{font-size: 14px;}
	
	.computer_nav
	{display: none;}
	
	#social_media
	{
		widows: 100%;
		visibility: inherit;
		height: 50px;
		display: inherit;
		float: right;
		width: 100%;
		background-color: #21264C;
		
		
	}
	
	#social_media img{
	height: auto;}
	
	
	
	#weg
	{display: none;
	 visibility: hidden;
	
	}
	
	
	.weg
	{display: none;
	 visibility: hidden;
	
	}
	
	
	aside{display: none;}
	
	
	
	header{
	height: 220px;
	float:none;
	}

	main{
		width: 100%;
		float:none;
		
	}
	
#wat_is{
	width:100%;
	float: none;	
	padding: 0.5%;
	height: 100%;
	
	
}

.wat_is_icon{
	display: none;
}
	


#wat_is_tekst  {
	width:92%;
	float: none;	
	padding: 2%;
	height: 100%;
	margin: 0 auto;
	
}
	
#wat_is_tekst_2{
	width:92%;
	float: none;
	padding: 2%;
	height: 100%;
		margin: 0 auto;
	
}
	
	
#projecten{
	width: 96%;
	padding: 2%;
	position: relative;
	color: #337BA3;
	height: auto;
	background-image:url(../img/bg_office.jpg);
	top:auto;
}

#projecten_icon
	{display: none;
	
}


#projecten article{
	margin: 2%;
	float: none;
	width: 90%;
	height: auto;
	background: #FFF;
	padding: 2% 4% 2% 2%;
}

	
/*-------------------------- MS office --------------------------------*/

#ms-office
{
	width: 100%;
	background-image: url(../img/bg_Wieis.jpg);
	height: auto;
	float: none;
	position: relative;
	top:auto;
}

#ms-office h1 {
	color: #7AD3D3;}
	


#text_office{
	width: 92%;
	background-color: #FFFFFF;
	float: none;
	padding: 2%;
	margin: auto;
}

/*-------------------------- MS office --------------------------------*/
#wie_is
{
	width: 100%;
	background-image:url(../img/bg_wieis.jpg);
	color: #456599;
	height: 100%;
	float: none;
}

#wie_is h1 {
	color: #5D86D3;}
	


#text_wie_is{
	width: 92%;
	background-color: #FFFFFF;
	float: none;
	padding: 2%;
	border-left: none;
	margin: 50px auto 0 auto;
}

footer{background-color: #21264C;
height: 200px;
	color: white;
}

	
	#footernav img {
		
		width: 10%;
	height: auto;
	
	float: right;}
	
nav{
width: 100%;
/*float: none;*/
padding-top: 20px;
	background-color: #21264C;
height: 70px;
}

	a{display: block;}
	
	a{color:#FFFFFF;}
	
	#content {width: 100%;
	position: relative;}
	
nav li
{width: 47%;
float: left;

}
		
	.sticky + .content {
  padding-top: 300px;
}



	.sticky {

width:100%;
left: 0%;

	
}
	
	#section1 {
    top: -240px;
	
	}
	
	
	#section4 {
    top: -240px;
	
	}
	
	
	#contact
{
	padding: 0.5%;
	margin-left: 2%;
	width: 40%;
	background-color: white;
	z-index: 120;
	position: absolute;
	font-size: 1em;
	height: 20px;
}

#contact li{line-height: 24px;}

#contact > ul {
display: block;
width: 95.5%;
list-style-type:none;
left: -0.5%;
margin:0px;
position:absolute;
top:0px;
background-color:#7AD3D3;
opacity:0;
transition:opacity 0.5s linear;
font-size: 16px;
height: 80px;
color: #FFFFFF;
padding: 3%;
	
}


#contact:hover > ul {
  visibility:visible;
  opacity:1;

}



	
	
}