.section-head h2{font:small-caps 20px/42px montserrat-bold, sans-serif;letter-spacing:0.17em;color:#dee1ec;margin-top:5px;}
.desc{font:14px/24px opensans-regular, sans-serif;}
.first{clear:left;}
.m-first{clear:none;}
header{height:54px;width:100%;z-index:99999;background:#585D85;position:fixed;top:0;}
.centreer{text-align:center;margin:0 auto;}
#nav-wrap ul, #nav-wrap li, #nav-wrap a{margin:0 auto;padding:0;border:none;outline:none;text-align:center;}
#nav-wrap{position:relative;font:13px opensans-regular, sans-serif;}
#nav-wrap > a{display:none;}
ul#nav{min-height:54px;width:auto;margin-top:10px;text-transform:uppercase;}
ul#nav li{position:relative;list-style:none;height:54px;display:inline-block;}
ul#nav li a{display:block;padding:0 14px;line-height:54px;text-decoration:none;text-align:left;color:#CDCCDA;background-color:#585D85;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;}
ul#nav li.active a{background:#505281;color:#fff !important;}
ul#nav li.hover a{background:#505281;color:#fff !important;}
ul#nav li:hover a, ul#nav li.active a{color:#fff;}
#intro{background:#585D85;padding-top:58px;margin-bottom:30px;}
#services, #services2{background:#505281 url(../images/achtergr-toetsenbord.jpg) repeat-y center 54px;padding-top:54px;padding-bottom:35px;color:#D7CBEE;}
#services a, #services a:visited{color:#e9e0fa;}
#services a:hover, #services a:focus{color:#fff;text-decoration:underline;}
#services .section-head h2{color:#dee1ec;}
.services-wrapper{margin-top:15px;}
.services-wrapper .col{width:33.33333%;margin-bottom:30px;}
.services-wrapper h2{font:13px/24px montserrat-bold, sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#dee1ec;margin-bottom:10px;padding-top:15px;}
.services-wrapper p{font-size:14px;}
#portfolio{background:#505281 url(../images/achtergr-toetsenbord.jpg) repeat-y center 54px;padding-top:54px;padding-bottom:35px;}
#portfolio .section-head h2{color:#dee1ec;}
#portfolio .section-head p.desc{color:#999999;}
#portfolio-wrapper{margin-top:0px;}
#portfolio-wrapper .col{width:25%;margin-bottom:0px;}
.portfolio-item .item-wrap{background:transparent;overflow:hidden;-webkit-box-shadow:0px 1px 1px rgba(50, 50, 50, 0.1);-moz-box-shadow:0px 1px 1px rgba(50, 50, 50, 0.1);box-shadow:0px 1px 1px rgba(50, 50, 50, 0.1);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.portfolio-item .item-wrap a{display:block;}
.portfolio-item .portfolio-item-meta{padding:12px 0;}
.portfolio-item .portfolio-item-meta h5 a{font:13px/24px montserrat, sans-serif;color:#999;margin-top:-14px;}
.portfolio-item:hover .item-wrap{background:transparent;}
.portfolio-item:hover h5 a{color:#fff !important;}
.reveal-modal{visibility:hidden;top:100px;left:50%;margin-left:-300px;width:600px;max-width:600px;background:#444;position:absolute;z-index:101;padding:0;-moz-box-shadow:0 0 10px rgba(0,0,0,.4);-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);-box-shadow:0 0 10px rgba(0,0,0,.4);}
.reveal-modal .description-box{padding:14px 36px 0px 36px;background:#fff;border-right:1px solid #000;border-left:1px solid #000;}
.reveal-modal .description-box h4{font:14px/20px opensans-regular,sans-serif;margin-bottom:4px;color:#505281;background:#fff;}
.reveal-modal .description-box p{font:12px/18px opensans-regular, sans-serif;color:#505281;margin-bottom:2px;background:#fff;text-align:left;}
.reveal-modal .link-box{padding:0px 9px 0px 36px;background:#fff;text-align:right;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;}
.reveal-modal .link-box a{color:#C5BCBC;font:12px/24px opensans-regular, sans-serif;text-transform:uppercase;letter-spacing:2px;cursor:pointer; font-weight: 600;}
.reveal-modal a:hover{color:#505281;}
.reveal-modal a.close-reveal-modal{margin-left:22px;}
#onderhoud .entry .post-meta time{font-family:montserrat-bold, sans-serif;text-transform:uppercase;letter-spacing:1px;}
#about{background:#505281 url(../images/achtergr-toetsenbord.jpg) repeat-y center 54px;padding-top:54px;padding-bottom:35px;color:#A3A3A3;}
#about .section-head h2{color:#dee1ec;}
#contact{background:#505281 url(../images/achtergr-toetsenbord.jpg) repeat-y center 54px;padding-top:54px;padding-bottom:35px;color:#D7CBEE;}
#contact a, #contact a:visited{color:#dee1ec;}
#contact a:hover, #contact a:focus{color:#fff;}
#contact .section-head{margin-bottom:5px;}
#contact .section-head h2{color:#dee1ec;}
#contact p{}
#contact form{margin-bottom:30px;}
#contact label{font:15px/24px opensans-semibold, sans-serif;margin:-4px 0 5px 0;color:#dee1ec;display:inline-block;float:left;width:22%;text-align:left;}
#contact input,
#contact textarea{padding:6px 8px;color:#dee1ec;background:#505281;margin-bottom:14px;border:0;outline:none;font-size:12px;line-height:24px;width:66%;overflow-y:hidden;font-size:76%;letter-spacing:0.2em;}
#contact input{-webkit-appearance:none;}
#contact input:focus,
#contact textarea:focus{color:#fff;background:#505281;}
#contact span.required{color:#fff;font-size:13px;}
#message-warning, #message-success{display:none;background:#151719;padding:24px 24px;margin-bottom:36px;width:88%;}
#message-warning{color:#D72828;}
#message-success{color:#11ABB0;}
#message-success i{margin-right:10px;}
#image-loader{display:none;position:relative;left:18px;top:12px;}
#contact aside h3{font:16px/30px montserrat-bold, sans-serif;margin-bottom:18px;color:#dee1ec;}
footer{margin-top:30px;color:#303030;font-size:14px;}
@media only screen and (max-width:836px){#services, #services2, #portfolio, #about, #contact{padding-top:54px;}
.intro{font-size:18px;}
#services .section-head .col{width:100%;}
#services2 .section-head .col{width:100%;}
#services .services-wrapper{margin-top:12px;}
#services .services-wrapper .col{width:50%;}
#services2 .services-wrapper .col{width:50%;}
#services .services-wrapper .col{margin-bottom:0;}
#portfolio #portfolio-wrapper{margin-top:12px;}
#portfolio #portfolio-wrapper .col{width:33.33333%;}
#about .section-head .col{width:100%;}
#contact label{width:25%;}
#contact input,
#contact textarea{width:70%;}
#message-warning, #message-success{width:95%;}
.first{clear:none;}
.m-first{clear:left;}
}
@media only screen and (max-width:768px){.section-head, .intro, #about h3,
#journal .entry-header{text-align:center;}
#services, #portfolio, #services2, #about, #contact{padding-top:50px;}
#intro h1{display:inline;}
#copyright h3{display:none;}
header.mobile{height:48px;}
header.mobile .logo a{top:22px;}
.mobile #nav-wrap{position:absolute;top:0;right:20px;width:auto;margin:0;}
.mobile #nav-wrap > a{width:48px;height:48px;text-align:left;background-color:#505281;position:relative;border:none;float:right;text-shadow:none;color:transparent;}
.mobile #nav-wrap > a:before,
.mobile #nav-wrap > a:after{position:absolute;border:2px solid #fff;top:35%;left:25%;right:25%;content:'';}
.mobile #nav-wrap > a:after{top:60%;}
.mobile #nav-wrap:not(:target) > a:first-of-type,
.mobile #nav-wrap:target > a:last-of-type{display:block;}
.mobile #nav-wrap ul#nav{height:auto;display:none;clear:both;}
.mobile #nav-wrap ul#nav li{display:block;width:100%;height:100%;text-align:left;}
.mobile #nav-wrap ul#nav > li.active a{color:#fff !important;background:none;}
.mobile #nav-wrap:target > ul#nav{display:block;padding:1px 8px 8px 8px;background:#505281;margin:0;clear:both;}
.mobile #nav-wrap ul#nav li{border-bottom:1px dotted #595B6A;}
.mobile #nav-wrap ul#nav li a{margin:0;padding:2px 6px 2px 8px;font-size:13px;margin:6px 0 0 0;line-height:14px;border:none;text-transform:none;}
h1{display:inline;z-index:1;font:.95em/1.8em "Century Gothic", "Trebuchet MS", Verdana;}
#kader{width:90%;height:auto;border:1px grey dotted;position:relative;margin:1% auto;padding:2% 3%;}
.reveal-modal{margin-left:-42%;width:84%;}
#contact label{display:block;float:none;width:auto;}
#contact input,
#contact textarea, #contact select{width:100%;margin-bottom:15px;}
#message-warning,
#message-success{width:100%;}
footer .social-links{margin-top:12px;}
}