@font-face { font-family: 'Roboto'; src: url('fonts/roboto/Roboto-Regular.ttf'); }
@font-face { font-family: 'Roboto-Light'; src: url('fonts/roboto/Roboto-Light.ttf'); }
@font-face { font-family: 'Roboto-Bold'; src: url('fonts/roboto/Roboto-Bold.ttf'); }
@font-face { font-family: 'Roboto-Italic'; src: url('fonts/roboto/Roboto-Italic.ttf'); }
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,400italic);

html, body { margin: 0; padding: 0; color: #333; }

body { font-family: "Roboto", Helvetica, sans-serif; background: #e1ecf2; }

h3 { text-transform: uppercase; font-size: 30px; }

section { padding: 30px 100px; }

p { line-height: 24px; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }

/*Rode kleur*/
h4, .menu, .menu a, .banner h1, #over span, #vaardigheden span, #contact a { color: #d53b3b; }
.linkedin img, .a_v a { -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; }

.grid { width: 100%; }
.column { width: 49%; float: left; }

.clearfix:after, .grid:after, .i-block:after { content: ""; display: table; clear: both; } /*fix height on float*/

.wrap { max-width: 1033px; width: 100%; margin: auto; }
.page { background: #fff; border: 1pz solid #bbbbbb; }

.menu { position: fixed; width: 100%; background: rgba(255, 255, 255, .95); z-index: 2; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); }
.menu ul { list-style: none; display: inline-block; margin: 0; padding: 0 20px 0 0; }
.menu li { display: inline-block; }
.menu, .menu a { text-transform: uppercase; }
.main-title { margin: 0; padding: 0; font-family: "Roboto-Light", Helvetica, sans-serif; font-weight: 300; font-size: 30px; }
.main-title, .menu img { float: left; }
.menu img { width: 150px; }
.main-title, .menu-item { line-height: 100px; margin-left: 10px; }
.menu nav { float: right; }
.anchor-link { float: right; padding: 0 10px; display: none; line-height: 92px; }
.anchor-link:hover { background: #f6f6f6; cursor: pointer; }
.anchor-link:focus { background: #e3e3e3; }

.slide { margin-bottom: 60px; padding-top: 100px; overflow: hidden; background-image: url('images/head-1.jpg'); background-position: center; background-size: 100% 100%; height: 500px; }
.quote { color: white; background: rgba(213, 59, 59, 0.5); margin: auto; margin-top: 50px; max-width: 700px; padding: 3px 10px; text-align: center; font-family: 'Roboto-Italic', Helvetica, sans-serif; font-size: 28px; }
.slide img { display: block; margin: auto; width: 100%; }

.banner { background: #525252; margin: auto; margin-top: -150px; padding: 20px 30px; max-width: 700px; border-bottom: 8px solid #d53b3b; }
.banner h2 { color: white; }
.banner h1, .banner h2 { margin: 0; padding: 0; font-family: 'Roboto-Light', Helvetica, sans-serif; font-weight: 300; font-size: 26px; text-transform: uppercase; }

iframe { display: block; margin: 30px auto; width: 100%;}

/*#vaardigheden ul { list-style: none; padding: 0; }*/

.linkedin { background: #444444; padding: 10px 0; }
.linkedin a, .linkedin img { display: block; margin: auto; }
.linkedin img:hover {
	-ms-transform: scale(0.95,0.95);
    -webkit-transform: scale(0.95,0.95);
    transform: scale(0.95,0.95);
}

#aanbestedingen h4 { font-size: 22px; }
#aanbestedingen h5 { font-size: 20px; }

#interviews { background: #f2f2f2; }
#interviews small { text-align: center; margin: 0 auto 30px auto; display: block; }
#interviews a { text-decoration: none; }
#interviews a:hover .i-block { border: 1px solid #888; text-decoration: none; }
.i-block { background: #fff; border: 1px solid #e1e0e0; padding: 5px 10px; display: block; margin: auto; margin-bottom: 15px; max-width: 370px; }
.i-block img { float: left; max-height: 92px; }
.i-block p { color: #333; text-align: center; line-height: 60px; }

.a_v { background-image: url('images/a_v-bg1.jpg'); background-repeat: no-repeat; background-size: 100%; height: 200px; }
.a_v .button { display: block;margin: auto; text-align: center; line-height: 200px; }
.a_v a { color: white; border: 2px solid white; border-radius: 4px; padding: 10px 30px; background: rgba(0,0,0,0.2); }
.a_v a:hover { background: rgba(0,0,0,0.4); text-decoration: none; }

#contact p { text-align: center; display: block; font-size: 22px; line-height: 34px; }

footer { text-align: right; font-size: 12px; padding: 5px 10px; }
footer, footer a { color: #888888; }

@media screen and (max-width: 1033px) {
	ul.simple-toggle { display: none; }
      .anchor-link, #mobile-ul { display: block; }

      ul.open {
        background-color: #fafafa;
        /*box-shadow: 1px 1px 5px #888;*/
        border: 1px solid #e3e3e3;
        display: block;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 0;
        top: 77px;
        z-index: 500;
      }
      ul.open li { margin: 0; border: 0; padding: 0 20px; display: block; list-style: none; text-align: center; border-bottom: 1px solid #eee; }
      ul.open li a { display: block; text-decoration: none; line-height: 55px; }
      ul.open li:hover { background-color: #f2f2f2; color: #fff; border-bottom: 1px solid #eee; }
     .menu { padding: 0; position: fixed; background: #fff; width: 100%; top:0; border-bottom: 1px solid #f2f2f2;}
     .menu img { width: 138px; }
     .main-title { font-size: 24px; line-height: 92px; }
     .slide { margin-top: 77px; }
    #interviews .column { float: none; width: 100%; }
}

@media screen and (max-width: 740px) {
	section { padding: 20px 50px; }
	h3, ul, .banner { text-align: center; }
	.quote { font-size: 22px; }
	.column { float: none; width: 100%; }
	#aanbestedingen ul { margin: 0; }
}
@media screen and (max-width: 520px) {
	section { padding: 20px 20px; }
	.main-title { display: none; }
	.i-block { max-width: 170px; }
	.i-block img { float: none; margin: auto; }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }
    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }