/* Copyright �2012 Activo.nl  */
/* Basic CSS */
html { overflow: -moz-scrollbars-vertical; }
html { overflow: scroll;}
html { overflow-x: auto; }

body, table, tr, td, p, div {
 font: 12px Arial, Helvetica, sans-serif;
 color: #FFF;
}
body, table, tr, td, div, img, h1, h2, h3, h4, h5, ul, ol, li, p, form  {
 margin: 0; padding: 0; border: none;
 -webkit-text-size-adjust: none;
}
* {
 margin: 0;
}
html, body {
 height: 100%;
}

::selection          { background:#00aeac; color:#FFF; }
::-moz-selection     { background:#00aeac; color:#FFF; }
::-webkit-selection  { background:#00aeac; color:#FFF; }

ul, ol, li, p {
 margin-bottom: 20px;
}
li {
 margin-left: 20px;
}
.clear {
 clear: both;
}

/* content */
body { background: #1c1c27; }

#wrap {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -46px auto;
}
#container {
   width:100%;
 max-width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}
#header {
 height: 100%;
 border-top: 6px solid #FFF;
 overflow: hidden;
}
#header .head {
   width:100%;
 max-width: 1000px;
 margin: 0 auto;
  overflow: hidden;
}
#header .head div {
 padding: 45px 32px 32px 32px;
 overflow: hidden;
}

#student {
 position: absolute;
 right: 20px;
 top: 0px;
 border: 1px dashed rgba(255,255,255,0.3);
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
#student img {
 margin: 22px 20px 16px 20px;
}
.linkedin {
 float: left;
 display: inline-block;
 padding: 9px;
}
img.image {
 float: left;
 margin: 5px 17px 0px 0px;
}


/* pages */
div.intro {
 padding: 65px 30px;
}
div.intro h1 {
 margin: 0px;
}
div.diensten {}
ul.diensten, ul.diensten li {
 padding: 0px;
 margin: 0px;
 list-style-type: none;
 float: left;
}
ul.diensten li {
 width: 250px;
}
ul.diensten li .text {
 font-size: 15px;
 line-height: 24px;
 padding: 0px 30px 30px 30px;
}
ul.diensten li .text img {
 margin: 0px 0px 10px 0px;
}
div.page {
 padding: 65px 30px;
}
.text {
 font-size: 15px;
 line-height: 24px;
 overflow: hidden;
}
.text p {
 font-size: 15px;
 line-height: 24px;
 margin-bottom: 20px;
}
.text p.small {
 font-size: 15px;
 line-height: 24px;
 margin-bottom: 20px;
}

ul.klanten, ul.klanten li {
 padding: 0px;
 margin: 0px;
 list-style-type: none;
 float: left;
}
ul.klanten li {
 width: 310px;
}
ul.klanten li ul li {
 width: 280px;
}

ul.klanten li ul li a:link,
ul.klanten li ul li a:active,
ul.klanten li ul li a:visited,
ul.klanten li ul li a:hover {
 color: #FFF;
 text-decoration: none;
}
ul.klanten li ul li a:hover {
 text-decoration: underline;
}

@media only screen and (max-width: 600px) {
   #menu {
      display:none;
   }

}

/* menu */
#menu {
 width: 100%;
 overflow: hidden;
}
#menu div.menu {
   width:100%;
 max-width: 1000px;

 margin: 0px auto;
 overflow: hidden;
}
ul.menu, ul.menu li {
 padding: 0;
 margin: 0;
 float: left;
 list-style-type: none;
}
ul.menu {
 margin-left: 7px;
}
ul.menu li a:link,
ul.menu li a:visited,
ul.menu li a:active,
ul.menu li a:hover {
 display: inline;
 padding: 0px 25px;
 text-decoration: none;
 font-weight: bold;
 font-size: 20px;
 color: #FFF;
}
ul.menu li a:link span,
ul.menu li a:visited span,
ul.menu li a:active span,
ul.menu li a:hover span {
 display: inline-block;
 padding: 14px 0px;
 text-decoration: none;
 font-weight: bold;
 font-size: 20px;
 color: #FFF;
 background: none;
}
ul.menu li a:hover span {
 background: url('../images/layout/menu_active.gif') left bottom repeat-x;
}
ul.menu li a.active:link span,
ul.menu li a.active:visited span,
ul.menu li a.active:active span,
ul.menu li a.active:hover span {
 display: inline-block;
 padding: 14px 0px;
 text-decoration: none;
 font-weight: bold;
 font-size: 20px;
 color: #FFF;
 background: url('../images/layout/menu_active.gif') left bottom repeat-x;
}

/* footer */
.push {
 height: 45px;
}
#footer {
 width: 100%;
 height: 45px;
 background: #FFF;
 overflow: hidden;
}
#footer .footer {
 height: 45px;
 width:100%;
max-width: 1000px;
margin: 0 auto;
 overflow: hidden;
}
#footer .footer div {
 padding: 25px 30px 0px 30px;
 color: #9d9d9d;
 font-size: 12px;
}
#footer .footer ul, #footer .footer ul li {
 padding: 0px;
 margin: 0px;
 list-style-type: none;
 float: left;
}
#footer .footer ul {
   width:100%;
 max-width: 1000px;

}
#footer .footer ul li.webdesign {
 float: right;
}
#footer .footer ul li {
 padding: 15px 30px 0px 30px;
 color: #9d9d9d;
 font-size: 12px;
}
#footer .footer a:link,
#footer .footer a:visited,
#footer .footer a:active,
#footer .footer a:hover {
 color: #9d9d9d;
 font-size: 12px;
 text-decoration: none;
}
#footer .footer a:hover {
 text-decoration: underline;
}

/* buttons */
a.button:link,
a.button:visited,
a.button:active,
a.button:hover {
 display: inline-block;
 background: #080e58 url('../images/layout/button_left.gif') left top no-repeat;
 text-decoration: none;
 overflow: hidden;
}
a.button:link span,
a.button:visited span,
a.button:active span,
a.button:hover span {
 display: inline-block;
 background: url('../images/layout/button_right.gif') right top no-repeat;
 font-family: Georgia, Garamond, serif;
 font-size: 16px;
 color: #FFF;
 font-weight: normal;
 padding: 11px 45px 11px 13px;
}

/* headings */
.intro h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 40px;
 line-height: 55px;
 color: #FFF;
 font-weight: normal;
 margin: 0px 0px 14px 0px;
}
h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 32px;
 color: #FFF;
 font-weight: normal;
 margin: 0px 0px 25px 0px;
}
h2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 26px;
 color: #FFF;
 font-weight: normal;
 margin: 0px 0px 5px 0px;
}
h3 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 21px;
 line-height: 30px;
 color: #FFF;
 font-weight: normal;
 margin: 0px 0px 14px 0px;
}
h4 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 line-height: 27px;
 color: #FFF;
 font-weight: normal;
 margin: 0px 0px 5px 0px;
}
h1.bold, h2.bold, h3.bold, h4.bold, .main-menu a {
 font-weight: bold;
}
h1.blue, h2.blue, h3.blue, h4.blue {
 color: #00aeac;
}
h1.grey, h2.grey, h3.grey, h4.grey {
 color: #c5c5c5;
}
h4.block {
 width: 350px;
 float: right;
 text-align: right;
 margin-left: 30px;
}

/* forms */
label, .submit {
 cursor: pointer;
 cursor: hand;
}
select.textField {
  padding: 3px;
  font: 12px Arial, Helvetica, sans-serif;
  color: #000;
}
input.textField {
  padding: 3px 3px;
  height: 15px;
  width: 220px;
  font: 12px Arial, Helvetica, sans-serif;
  border: 1px solid #FFF;
  color: #000;
}

/* basic links */
a:link, a:visited, a:active, a:hover {
 text-decoration: underline;
 color: #FFF;
}
a:hover {
 text-decoration: none;
}


/* Portrait and Landscape */
/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
   .intro h1,h1{
      font-size: 30px;
      line-height: 40px;
   }

.text{
   /* text-align:center; */
}
   ul.diensten li{
      width: 100%;
      padding: 0;
   }
   #container{
      width: 100%;
   }
   #menu div.menu{
      width: 100%;
   }
   #student{
      position:static;
   }
   ul.diensten li .text{
      font-size: 16px;
   }



}




@media only screen and (min-width: 600px) {
   .menu2{
      display: none
   }
}

/* Menu */
.header {
		width: 100%;
		position: fixed;
		z-index: 10;
}
.menu2 {
		background: #fff;
		position: relative;
}
.menu2 ul {
		display: flex;
		justify-content: space-around;
		font-size: 1.4rem;
		padding: 0 20px;
}
.menu2 a {
		display: block;
		padding: 15px 10px;
		color: #fff;
		text-decoration: none;
		transition: color .35s;
}
.menu2 a:hover {
		color: crimson;
}

/* Shadow - just for the demo */
.menu2:before,
.menu2:after {
		position: absolute;
		content: "";
		top: 10px;
		bottom: 5px;
		left: 50px;
		right: 50px;
		z-index: -1;
		box-shadow: 0 0 15px 5px rgba(0, 0, 0, .3);
		border-radius: 100px/20px;
}


/* Hamburger Menu */
.menu2 input,
.menu2 label {
		display: none;
		width: 40px;
		height: 40px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		font-size: 1.6rem;
		border-radius: 5px;
}
.menu2 label {
   position: absolute;
   top: 22px;
   right: 20px;
   background: #fff;
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: center;
   background-image: url('../images/layout/bars-solid.svg');

}
.menu label:hover {
		cursor: pointer;
		transition: background .2s;
		background: crimson;
}
/* .menu2 label:before {
		font-family: FontAwesome;
		font-size: 24px;
		content: "\f0c9";
		text-align: center;
} */
.menu2 input[type="checkbox"]:checked + .main-menu + label:hover:before {
		/* content: "\f00d"; */
}


/* Media Queries */
@media only screen and (max-width: 600px) {
   #header .head img{
      width: 70%;
      height: auto;
   }


		/* Remove shadow - just for the demo */
	  .menu:before, .menu:after {display:none;}

		.menu2 ul {
				display: block;
				padding: 18px 0 0 0;
		}
      .menu2 a.active{
         text-decoration:underline;
      }

		.main-menu {
				transition: all .3s;
				position: absolute;
				z-index: 1000;
				top: 0;
            right:0;
				min-height: 100vh;
				left: 100%;
				background: #00aeac;
		}
		.main-menu ul{
         list-style:none;
      }
      .main-menu li {
				flex: none;
            list-style:none;
			width:100%;
		}
		.menu2 input[type="checkbox"]:checked + .main-menu {
				transform:translate(-100%);
				min-width: 50%;
            position:fixed;
		}
		.menu2 label {
				display: block;
				z-index: 2000;
				transition: .2s;
		}
}