@import url(https://fonts.googleapis.com/css?family=Raleway);

body {margin:0; padding-bottom:100vh; background:#000; color:#fff; font-family:arial; letter-spacing:1px; font-size:17px; background-size:100% auto; background-position:top center; background-repeat:no-repeat; background-attachment:fixed; min-height:100vh}

/*
@font-face {
    font-family: 'Raleway';
    src: url("/font/Raleway.otf") format("opentype");
}*/

[name="kissme"] { position: absolute; left: -200vw; }

img {border:0}
h1 {padding:0; margin:10px 0; float:left}
h1 a {font-family:'Raleway', sans-serif; color:#fff; text-decoration:none; font-weight:500}
h2 {font-family:'Raleway', sans-serif; font-weight:500; font-size:25px; letter-spacing:1px}

#topholder {overflow:hidden; background:#000; padding:20px 0}
#top {max-width:960px; margin:0 auto}

#menu {float:left; padding: 0; margin-top: 0; margin-left: 50px }
#menu li {display:inline; list-style:none; }
#menu li a {font-family: 'Raleway'; font-size:23px; letter-spacing:1px; text-decoration:none; color:#eee; display: inline-block; padding:20px 10px }
#menu li a:hover {color:#ccc}
#menu li .actief {color:#f00}
#menu .small a { font-size: 13px; }
#menu .small:first-child { margin-left: 30px; }

#topmenu {float:right; margin:10px 0; padding:0}
#topmenu li {display:inline; list-style:none; margin:0 10px 0 0; padding:0}
#topmenu li a {letter-spacing:1px; font-size:13px; color:#ddd; text-decoration:none}
#topmenu li a:hover {color:#ccc}

#holder {margin:20px auto; padding:5px 0; overflow:hidden}

#share {display:none}

#intro-video {text-align:center}
#intro-video iframe {max-width: 100%; width:1160px !important; height:650px !important; margin:100px auto !important}
#intro-video p {display:none}

#intro h2 {max-width: 700px; margin:0 auto 5px; font-size:20px; font-weight:500;}
#intro p {max-width: 700px; margin:0 auto}
#home h2 {display:none}


#contact #holder, #cv .item, #why #holder #intro, #pics .item, #video .item, #projects #intro .item, #home #intro {background:rgba(0, 0, 0, .2); margin:150px auto; padding:50px 0; overflow:hidden}

#pics .item, #video .item {text-align:center}
#pics .item .title, #video .item .title {margin-top:50px;}

#contact form {margin:0 auto; max-width:600px}
#audio #holder {text-align:center;}

#contact p, #why p, #pics .item p {max-width:700px; margin:0 auto}

p {line-height:150%; font-size:14px; letter-spacing:1.0px; padding:5px 0}
#contact h2, #cv h2 {max-width:700px; margin:20px auto}
#cv p {line-height:150%; font-size:14px; letter-spacing:0.5px; max-width:700px; margin:0 auto}

.home {clear:both; font-weight:700; font-size:14px}

.audio {float:left; width:250px; height:200px}

#mediaplayer {margin: 30px 0 20px 20px}

#player {margin:auto; width:480px}

#audio_player {height:20px; margin:0; padding:0px}


#box_holder {display:block; clear:both}
.box {float:left; width:24%; margin:20px 10px 0 0; background:#111}
.news {width:45% }
.box h3 {background:#000; margin:0px; height:18px}
 .box h3 img {padding:0px 5px; color:#999; margin:0; font-size:14px}
.box h3 .rss {padding:3px 3px 0; width:10px; border:0; float:right}
.box ul {margin:0; padding:0px}
.box li {margin:0; padding:2px 5px; list-style:none; font-size:12px}
.box li:hover {background:#222}
.box a {font-size:10px; color:#bbb; text-decoration:none}
.box a:hover {text-decoration:underline}

.item-container {background:rgba(0, 0, 0, .2); margin:150px auto; padding:50px 0; overflow:hidden}
.single-item {max-width:700px; margin:0 auto}
.single-item img {width:700px; height:438px; border:1px solid #000}
.single-item img:hover {border:1px solid #fff}
.single-item a:hover {color:#eee}
.single-item a h2 {color:#fff; text-decoration:none}
.single-item a {color:#fff; text-decoration:none; line-height:150%; font-size:14px; letter-spacing:1.0px; padding:5px 0}
.video-holder iframe {margin:0 -50px; width:800px; height:448px;}

.item {margin:20px}
.item h2 a {color:#fff; text-decoration:none}
.item h2 a img {border:1px solid #000; color:#000}
.item .h2, .item .h2:hover {border:0}
.item h2 a img:hover {border:1px solid #333}
.item p a {color:#fff; text-decoration:none; font-weight:700}
.item p a:hover {text-decoration:underline}
.item p a:visited {color:#f00}
.item p .pdf {background:url('img/pdf.gif') 100% 0% no-repeat; padding-right:20px}
.item .date {margin:-10px 0 10px 0; padding:0; font-size:10px}

.item .video-holder {width:800px; margin: 0 auto}
.item iframe {width:800px; height:448px}

.pic_thumb {border:1px solid #000}
.pic_thumb:hover {border:1px solid #fff}
#pic {position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; background:#222; text-align:center}
#pic img {position:absolute; top:50%; left:50%; border:0}
.pic_close {position:absolute; top:50%; left:50%; color:#000; background:#fff; font-size:14px; font-weight:700; padding:0px 4px; border:0; text-decoration:none; z-index:1}
.pic_info {position:absolute; top:50%; left:50%; background:#fff; padding:0px 4px; border:0; z-index:1}
.pic_info a {color:#000; font-size:14px; font-weight:700; text-decoration:none}
#pic_info_box {position:absolute; top:50%; left:50%; background:#fff; display:none; z-index:2; color:#000; text-align:left; padding:10px; overflow:auto}

.info_box_close {float:right}
.info_box_close a {color:#000; text-decoration:none; font-weight:700}

#subscribe {margin:10px; background:#111; border:1px solid #333; font-size:11px; padding:0 10px 7px}
#subscribe form {float:left}
#subscribe .newsletter {font-size:11px; background:#666; border:1px inset #999; color:#fff}
#subscribe .newsletter_submit {font-size:11px; background:#999; border:1px outset #bbb; margin-left:3px}
#subscribe .feed {background:url('img/rss.gif') 0 0 no-repeat; margin-left:10px; padding:0 20px; font-size:12px; color:#fff; text-decoration:none; font-weight:700}
#subscribe .feed:hover {text-decoration:underline}

#subscribe a {color:#fff; font-weight:700; text-decoration:none}
#subscribe a img {margin:0 5px -5px 10px}

#contact {border:0px}
#contact ol {padding: 0}
#contact ol li {list-style:none; overflow:hidden; margin: 5px 0}
#contact label {float:left; width:85px; margin-right:10px; margin-top:2px; text-align:right}
#contact .text {width:200px; padding:2px; border:1px inset #333}
#contact textarea {width:450px; height:200px; font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:150%; border:1px inset #333; margin:0px}
#contact .submit {padding:3px; font-weight:700; margin:10px 0 0 95px}

#paginate {margin:10px; font-size:16px; clear:both; text-align:center; color:#fff}
#paginate a {font-weight:700; color:#aaa; font-size:14px; text-decoration:none}
#paginate a:hover {text-decoration:underline; color:#fff}

#share {width:60px; float:right;}
#share a {margin:0px 5px}
.tweet {display:block; width:20px; height:20px; float:left; background: url(/img/bw-twitter.png) no-repeat}
.fb {display:block; width:20px; height:20px; float:left; background: url(/img/facebook.png) no-repeat}

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(/img/close.png);}
#sb-nav-next{background-image:url(/img/next.png);}
#sb-nav-previous{background-image:url(/img/previous.png);}
#sb-nav-play{background-image:url(/img/play.png);}
#sb-nav-pause{background-image:url(/img/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}


.audio-player {
 max-width: 480px;
 margin: 0 auto;
 background: black;
 font: 12px arial;
 text-align: left;
}
.audio-player audio {
 width: 100%;
}
.audio-player ul {
 width: 100%;
 padding: 0;
 margin: 0;
 list-style: none;
}
.audio-player li {
 background-image: linear-gradient(to bottom, #222, black);
 box-sizing: border-box;
 padding: 5px 10px;
}
.audio-player li:hover {
 background-image: linear-gradient(to bottom, #444, #222);
 cursor: pointer;
}
.audio-player li.playing {
 background-image: linear-gradient(to bottom, #666, #888);
}
.audio-player a {
 color: white;
 font-weight: 700;
 text-decoration: none;
 font-size: 12px;
}
.audio-player p {
 color: white;
 padding: 0;
 margin: 5px 0 5px;
 font-size: 12px;
}

 /*small screen*/

@media (max-width: 800px) {
    body {
        padding: 0;
    }
    #holder, #topholder {
        padding: .5rem;
    }
    .item-container {
        margin: 2rem auto;
    }
    .single-item img, .single-item img:hover {
        max-width: 100%;
        height: auto;
        border: 0;
    }
    #menu li, #topmenu li {
        display: none;
    }
    #menu.open li {
        display: block;
        clear: left;
    }
    #menu.open a {
        display: block;
    }
    #menu .small a {
        font-size: 23px;
    }
    #menu.open {
        float: none;
        margin: 0;
    }
    #menu:before {
        content: '☰';
        font-size: 25px;
        margin-top: 13px;
        display: block;
    }
    #menu.open:before {
        content: '×';
        float: right;
        margin-right: 20px;
        margin-top: 13px;
        font-size: 30px;
    }
    #menu {
        float: right;
        margin-right: 20px;
        margin-left: 0;
        cursor: pointer;
    }
    #intro-video iframe {
        margin-top: 0 !important;
    }
    .pic_thumb, .pic_thumb:hover {
        border: 0;
        max-width: 100%;
    }
}