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

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

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

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

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

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

.tekstlink {
	font-weight: 700;
	text-decoration: none;
	transition: all 1s ease;
}

.tekstlink:link {
    color : #AAE0FA ;
}

.tekstlink:visited {
    color : #AAE0FA ;
}

.tekstlink:hover {
	transition: all 1s ease;
    color : #000000 ;
}

.imgtext {
	text-indent: -999999px;
}

#logo {
	position: fixed;
	width: 190px;
	left: 70px;
	top: 50px;
	cursor: pointer;
	animation: fadein 3s ease;
}

#sidebar {
	position: fixed;
	width: 400px;
	height: 100%;
	right: 0px;
	top: 0px;
	background-image: url(Afbeeldingen/kasboek_22px_180pr.png);
	background-repeat: no-repeat;
	background-position: left top;
	z-index: -1;
	overflow: hidden;
	animation: fadein3 3s ease;
}

#hoofd {
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 2;
	width: 420px;
	animation: fadein3 3s ease;
}

#content {
	position: fixed;
	height: 50%;
	width: 40%;
	top: 150px;
	left: 25%;
	animation: fadein4 3s ease;
}

h1 {
	font-size: 27px;
	color: #00ADEE;
	font-weight: 800;
}

#content p {
	font-size: 16px;
}

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

#content li {
	list-style: square;
}

#payoff {
	position: fixed;
	bottom: 160px;
	font-size: 33px;
	font-weight: 200;
	width: 40%;
	left: 25%;
	animation: fadein4 3s ease;
}

#footer {
	position: fixed;
	bottom: 0px;
	height: 90px;
	width: 100%;
	text-indent: 70px;
	animation: fadein2 3s ease;
}

#footertop {
	height: 65px;
	background-color: #000000;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 15px;
	line-height: 65px;
}

#footerbottom {
	height: 25px;
	background-color: #FFFFFF;
	color: #4D4D4D;
	font-weight: 400;
	font-size: 12px;
	line-height: 25px;
}

#email {
	text-decoration: none;
	transition: all 1s ease;
}

#email:link {
    color : #FFFFFF ;
}

#email:visited {
    color : #FFFFFF ;
}

#email:hover {
    color : #AAE0FA ;
	transition: all 1s ease;
}

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

							  Menu  
							  
===============================================================*/

#menu {
	position: fixed;
	left: 70px;
	bottom: 160px;
	animation: fadein 3s ease;
}

#menu a {
	background-color: #AAE0FA;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 27px;
	font-weight: 800;
	margin-bottom: 5px;
	width: 190px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	transition: all 1s ease;
}

#main_nav { list-style: none; margin: 0; padding: 0; }


#main_nav li a { /*text-indent: -999999px;*/ overflow: hidden; display: block;} 

#menu a:hover {
	transition: all 1s ease !important;
	width: 230px !important;
	transform: translate(-40px,0px) !important;
}

#menu a.active {
	transition: all 1s ease;
	width: 210px;
	transform: translate(20px,0px);
	background-color: #000000;
	font-weight: 600;
}

#linkedin {
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 30px;
	height: 30px;
	transition: background-image 1s ease;
	background-image: url(Afbeeldingen/LinkedIn.png);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 10;
	animation: fadein3 3s ease;
}

#linkedin:hover {
	background-image: url(Afbeeldingen/LinkedInMouseOver.png);
	transition: background-image 1s ease;
}

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

							  Contactformulier  
							  
===============================================================*/



#contactformulier {
	margin: 0px;
	padding: 0px;
	border: 0px;
	border-spacing: 0px;
}

#contactformulier label {
	font-size: 20px;
	font-weight: 500;
	text-align: left;
	margin-bottom: 7px;
	height: 33px;
	line-height: 33px;
}

#berichtlabel {
	vertical-align:top !important;
}

#buttonv {
	cursor: pointer;
    width: 190px;
	height: 50px;
	margin-right: 224px; 
	font-size: 27px;
	text-decoration: none;
	line-height: 50px;
	background-color: #000000;
	font-weight: 600;
	color: #FFFFFF;
	text-align: center;
	transition: all 1s ease;
	border: none;
	padding: 0px;	
}

#buttonv:hover {
	background-color: #AAE0FA;
	font-weight: 800;
	transition: all 1s ease;
	outline: none;
}

input {   
    width:400px;
    border:2px solid #AAE0FA;
    font-size:16px;
	padding: 5px;
	float: right; 
	margin-bottom: 7px;  
}

input:focus {
    outline: 2px solid #231F20;
}

textarea {
    width:400px;
	height: 220px;
    border:2px solid #AAE0FA;
    font-size:16px;
	padding: 5px; 
	border-spacing: 0px; 
	float: right;
	margin-bottom: 17px;  
}

textarea:focus { 
    outline: 2px solid #231F20;
}

input:required:invalid, input:focus:invalid {
    background-image: url(Afbeeldingen/uitroepteken.png);
    background-position: right center;
    background-repeat: no-repeat;
	background-size: 32px;
  }
  
input:required:valid {
    background-image: url(Afbeeldingen/punt.png);
    background-position: right center;
    background-repeat: no-repeat;
	background-size: 32px;
  }
  
@keyframes fadein {
    0% { opacity: 0; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 1; }
	80% { opacity: 1; }
    100%   { opacity: 1; }
}

@keyframes fadein2 {
    0% { opacity: 0; }
	20% { opacity: 0; }
	40% { opacity: 1; }
	60% { opacity: 1; }
	80% { opacity: 1; }
    100%   { opacity: 1; }
}

@keyframes fadein3 {
    0% { opacity: 0; }
	20% { opacity: 0; }
	40% { opacity: 0; }
	60% { opacity: 1; }
	80% { opacity: 1; }
    100%   { opacity: 1; }
}

@keyframes fadein4 {
    0% { opacity: 0; }
	20% { opacity: 0; }
	40% { opacity: 0; }
	60% { opacity: 0; }
	80% { opacity: 1; }
    100%   { opacity: 1; }
}