@charset "utf-8";
/*
Theme Name: lkoenen
Theme URI: http://wordpress.org/
Description: Wordpress Thema voor Liesbeth Koenen
Version: 1.0
Author: Alain Otjens | OTJENSA
*/

/* RESETS AND FIXES */
img {
    max-width: 100%;
    height: auto;
    border: none;
    outline: none;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 100%;
}

:focus {
    outline: 0;
}

* {
    box-sizing: border-box;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}


/* BASICS */
body {
    background: #f5f1c9;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
}

p {
    margin:0 0 1.65em 0;
    line-height:1.65em;
}

a {
    text-decoration: none;
    cursor: pointer;
    outline: none;
    color: #183dc4;
}
a:hover {
    text-decoration: underline;
}

.alignleft,
.alignright {
    max-width: 50%;
    margin-bottom: 2em;
    position: relative;
    top: 7px;
}
.alignleft img,
.alignright img {
    width: 100%;
}
.alignleft {
    float: left;
    margin-right: 2em;
}
.alignright {
    float: right;
    margin-left: 2em;
}

.wp-caption-text, .wp-caption-dd {
    text-align:right;
    font-size:14px;
    font-style: italic;
}

.highlight {
    background: #c5172b;
    color: #FFF;
}

.nowrap {
    white-space: nowrap;
}

/* LAYOUT */
.wrapper {
    width: 96%;
    max-width: 920px;
    margin: 0 auto;
}

#body {
    display: flex;
    flex-direction: row;
}

#navigation {
    flex-basis: 260px;
    flex-grow: 0;
    flex-shrink: 0;
}
#content {
    flex-basis: 550px;
    flex-grow: 1;
    flex-shrink: 1;
    margin-bottom: 3em;
}
#content .block {
    margin-bottom: 2em;
    padding: 2em;
    background-color: #fcfae3;
}

/* HEADER */
#header h1 {
    margin: 3vw 0;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -0.03em;
}
#header a {
    color: #c5172b;
    text-decoration: none;
}
#header a:hover {
    text-decoration: underline;
}


/* NAVIGATION */
#navigation #nav-toggle {
    display: none;
    margin-bottom: 1em;
    line-height: 1.7em;
    cursor: pointer;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
#navigation #nav-toggle .icon {
    display: inline-block;
    width: 11px;
    height: 11px;
    line-height: 11px;
    margin: -3px 5px 0 0;
    vertical-align: middle;
}
#navigation #nav-toggle .icon rect {
    fill: #000;
}
#navigation.nav-active #nav-toggle .icon {
    -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);
}

#navigation #nav-items {
    margin-bottom: 2em;
    transition: all 200ms ease;
}
#navigation.nav-active #nav-items {
    max-height: 600px;
}

#main-menu { margin:0 0 3em 0; }
#main-menu li { margin:0 0 16px 0; }
#main-menu li a { text-decoration:none; color:#000; }
#main-menu li a:hover { text-decoration:underline; }
#main-menu li.current-menu-item a { color:#c5172b; }

#contact-menu span { display:block; line-height:27px; margin:0 0 6px 0; }
#contact-menu a { color:#000; text-decoration:none; }
#contact-menu a:hover { text-decoration:underline; }
#contact-menu a svg { width:17px; margin-right: 7px; vertical-align:middle; }
#contact-menu #mail svg * { fill: #FFF; stroke: #CCC; }
#contact-menu #linkedin svg * { fill: #0077B5; }
#contact-menu #twitter svg * { fill: #4099FF; }


/* CONTENT */
#content h1 {
    margin-bottom: 1em;
}
#content h2 {
    font-size: 22px;
    margin-top: 2em;
    margin-bottom: 1em;
    color:#c5172b;
}
#content h2:first-child {
    margin-top: 0;
}
#content h3,
#content h3 a {
    font-size: 18px;
    margin-bottom: 0.5em;
    color: #c5172b;
}
#content h4 {
    margin-bottom: 0.5em;
}

#content ul {
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}
#content li {
    line-height: 1.65em;
}

/* ARCHIEF */
#archief .item .header {
    margin: 0 0 1em 0;
}
#archief .item .header .titles,
#archief .item .header .source {
    margin:0 0 0.5em 0;
}

#archief .item .header .date {
    float: right;
    margin: 0 0 0.5em 0.5em;
}

#archief .item h4 {
    font-weight: 400;
    font-style:italic;
}


#search {
    margin-top: 2em;
}

#search #searchform {
    margin-top: 2em;
}

#search .search-filter {
    display: flex;
    margin-bottom: 1em;
}
#search .search-filter-label {
    width: 30%;
}
#search .search-filter-fields {
    width: 70%;
}

#search input,
#search select {
    width: 48%;
    padding: 1px;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

#search select {
    margin:0 1% 2% 0;
}

#search #date select {
    width: auto;
}
#search #date span {
    margin:0 5px 0 0;
}

#search #searchsubmit {
    width: auto;
    padding: 1px 4px;
}
#search #searchreset {
    width:auto;
    margin:0 0 0 0px;
    background:none;
    border:none;
    text-decoration:underline;
    cursor:pointer;
}
#search #searchreset:hover {
    text-decoration:none;
}

#searchInfo {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px dashed #000;
}


.wp-paginate {
    display: flex;
    justify-content: center;
}

.wp-paginate li {
    margin: 0 0.5em;
}


.archiefitem .header { text-align:right; margin:0 0 20px 0; }
.archiefitem .author { float:left; }
.archiefitem .titles { margin:0 0 20px 0; }
#content .archiefitem h2 { font-weight:400; font-style:italic; color:#000; margin:0 0 2px 0; }


.intro { font-style:italic; }
.vraag { font-style:italic; }
.noot { font-size:85%; }



/* RESPONSIVENESS */
@media all and (max-width:820px) {
    #body {
        display: block;
    }
    #navigation #nav-toggle {
        display: block;
    }
    #navigation #nav-items {
        max-height: 0;
        overflow: hidden;
    }
    #content {
        width: auto;
    }
    #content .block {
        padding: 20px;
    }
}

@media all and (max-width:480px) {
    .alignleft {
        margin-right: 1em;
    }
    .alignright {
        margin-left: 1em;
    }
    .wrapper {
        width: 100%;
    }
    #header, #navigation {
        padding: 0 1em;
    }
    #content {
        padding: 0.5em;
    }
    #content .block {
        padding: 0.75em;
    }
}

@media all and (max-width:400px) {
    .alignleft,
    .alignright {
        float: none;
        width: 100%;
        max-width: none !important;
        margin-left: 0;
        margin-right: 0;
    }
}