/*
Theme Name: Master Design Theme
Description: Fukasawa Child Theme. the jquery masonry original from fukusawa is out. no absolute positioning, all inline and relative.
	Author: Anders Norén, Jan rodenburg
	Author URI: https://www.andersnoren.se
	Author URI: https://www.larka.nl
Template: Fukasawa
Text Domain: fukusawa-child
Version: 101
Notes: zie: my_custom_admin voor css voor de admin;
@import "testbox.css" screen and (max-width: 900px);
*/

/* c/    #19 38 66 /      #42 8B F4 /   */
/* c/    #aa aa aa /      #bb bb bb /   */
/* c/    #f5 f5 f5 /      #bb bb bb /   */
/* c/    #00 00 00 /      #1C 36 61 /   */
/* c/    #33 3  /      #1C 36 61 /   2x keer figcaption p excerpt*/
.testbox , .testbox pre{display:none}
.tiny {margin-top:0;}
/*testbox*/


/* -------------------------------------------------------------------------- */

/*	0. Styles for gutenberg front
/* ---------------------------------------------*---------------------------- */
figcaption {
    font-size: smaller;
    line-height: 14px;
    padding-bottom: 5px;
    border-bottom: 1px solid #193866;
    margin-left: 20%;
    font-family: 'Roboto';
    font-weight: 300;
}
.post-content{
    background-color: #fff;
    padding: 9px;
    padding-right: 0;
}
.post-date {color: #f5f5f5;}
/* -------------------------------------------------------------------------- */

/*	0a. html styles
/* ---------------------------------------------*---------------------------- */

html {
    background-color: #f5f5f5;
    background: #f5f5f5;
}
body {

    font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, sans-serif;

    font-size: 0.9rem;
    line-height: 18px;
    background-color: #f5f5f5;
    background: #f5f5f5;
    color: #193866;
}
body a {
    color: #193866;

}
.has-regular-font-size {
    font-size: 1.1em;
    /* color:blue; */
}

a:hover {text-decoration: underline;}

.featured-media:hover img {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.my-top-space-for-admin-bar {
    min-height: 32px;
}

/* grid bounding box
304*3 + 2*18 = 3column +2 gutter
*/
.wrapper {

    background: #f5f5f5;
    margin-left: 0;
    display: flex; /*wrapper: all columns wrap*/
    justify-content: flex-start;
    flex-direction: row;
}
.my-sidebar {
    width: 268px;
    min-width: 268px;
    background-color: #f5f5f5;
    background: #f5f5f5;
    min-height:100%;
    padding: 5px 10px;
    margin-top: 27px;
    margin-top: 0;
/* display: flex;  my-sidebar: all columns wrap; gedraagt zich als parent box. this one kills the inliner*/
    flex-direction: column;
    justify-content: center;
    align-self: flex-start;
}

    /* -------------------------------------------------------------------------- */
/*	3. Three column masonry absolute layout: content (archive.php , index.php)
/* ---------------------------------------------*---------------------------- */
.content, .post-content {
    margin: 0 0 0 0;

    max-width: 1121px; /*906*/
    width:  100%;
    display: flex; /*content*/
    flex-direction: column;
    justify-content: left;
}

/* grid item*/
.post-container{
    max-width: 300px; /*deze werkt */
}
.posts .post-container {
    padding: 5px;
    overflow: hidden;
}
.my-single {
    max-width: 1121px;
}
/*
.post-container-nojs{
    max-width: 300px;
}

*/
/* -------------------------------------------------------------------------- */
/*	4. Three column content-author(author.php , thumbnail.php)
/* ---------------------------------------------*---------------------------- */
.content-author {
    margin: 0 0 0 0;
    max-width: 1121px; /*906*/
    width:  100%;
    display: flex; /*content-author*/
    flex-direction: column;
    justify-content: left;
  }
.content-author div.posts {
    
        max-width: 1121px;
    width:  100%;
    margin-left: 0;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
	/* <--- flex-wrap: wrap; ------------------------------ wrap */
  }
.content-author div.posts div.grid-sizer {
	display:none;
}
.wp-block-column:not(:first-child) {
    margin-left: 0
}
/*OUT.wp-block-column*/
div.col13, div.col23, div.col33 {
	text-align: left;
    /* display: flex; col1 col2 col3, als deze aan dan child display: inline-flex not working*/
	flex-direction: column;
	align-self: flex-start;
	flex-grow: 1;
	flex-basis:  33.333%;
    padding: 0;
    padding-top: 5px;
    margin-right: 10px;

}
.wp-block-column {
    padding-top: 0;
    margin-right: 9px;

}
.wp-block-image {
    margin-bottom: 1em;
    margin: 0;
    padding: 0;
}/* css tbv de gutenberg editor*/
.has-background {}
.has-lightblue-background-color, .post-content p.has-lightblue-background-color{
    background-color: #428BF4;
    background: #428BF4; /*light blue*/
}
.has-green-background-color, .post-content p.has-green-background-color{
    background-color: #2FAC66;
    background: #2FAC66; /*green*/
}
.has-orange-background-color, .post-content p.has-orange-background-color{
    background-color: #D7790F;
    background: #D7790F; /*orange*/
}
.has-darkblue-background-color, .post-content p.has-darkblue-background-color{
    background-color: #193866;
    background: #193866;
}
.has-white-color, .post-content p.has-white-color{
    color: #ffffff;
}
p.has-background {
    padding: 3px 4px;
}

.post-content p {
    background: #ffffff;
    font-weight: 300;


}
hr .wp-block-separator {
    border: 1px solid #193866;
    border-width: 0.01rem 0 0 0;
    margin: 1rem 0;
}


div .single div .post-content{
    /* single means: dealing with gutenberg*/
    margin: 0;
    padding: 0;
    padding-left: 9px; /*added oct 10, 20*/
}
/* so gutenberg, will deal all margins paddings like this*/
.wp-block-column {
    padding-top: 9px;
    /*
    margin-right: 9px;
    margin-left: 9px;
    */

}
.wp-block-columns {
    margin-bottom: 9px;
}

.wp-block-columns .plat , .plat {
    margin-bottom: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
p.witblok    {    height:100px;}
p.witblok10 {    height:10px;}
p.witblok20 {    height:20px;}
p.witblok50 {    height:50px;}
p.witblok100 {    height:100px;}
p.witblok200 {    height:200px;}
p.witblok300 {    height:300px;}

/* end css tbv de gutenberg editor*/

.post-container-nojs img{
	/*
    transition-property: opacity, transform;
    transition-duration: 0.4s;
    transform: translate3d(41px, 0.688px, 0px);
*/
}
.post-container-nojs {
	width: 100%;
	padding: 9px;
	background: #fff;
    margin: 0 0 18px 0;
}
.correction {
    margin: 0 0;
}
.post-container-cat {
    width: 100%;
    padding: 0;
    background: #fff;
    
}
.mypost {
    width: 100%;
    padding: 16px;
    background: #fff;
}
/* base colors for art categorie, jaro 23*/

.artikel_categories-social-practices div.post-content a ,
.artikel_categories-social-practices div.post-content a:visited,
.artikel_categories-social-practices div.post-content h1,
.artikel_categories-social-practices div.post-content h2,
.artikel_categories-social-practices div.post-content h3 {
    color:#2FAC66;
}

.artikel_categories-design-practices div.post-content a ,
.artikel_categories-design-practices div.post-content a:visited,
.artikel_categories-design-practices div.post-content h1,
.artikel_categories-design-practices div.post-content h2,
.artikel_categories-design-practices div.post-content h3 {
    color: #D7790F;
}

.artikel_categories-master-design div.post-content a ,
.artikel_categories-master-design div.post-content a:visited,
.artikel_categories-master-design div.post-content h1,
.artikel_categories-master-design div.post-content h2,
.artikel_categories-master-design div.post-content h3 {
    color: #428BF4;
}

/* end base colors for art categorie, jaro 23*/

/* toevoegen lexicon en artikel */
.artikel, .lexicon {
  width: 100%;
  padding: 16px;
  background: #fff;
  position: relative;
}
.posts .post-container , .lexicon .post-container, .artikel .post-container{
    padding: 10px;
    overflow: hidden;
}

.posts .post,.posts .lexicon,.posts .artikel, .posts .author,
.posts .page, .post-catlist {
    width: 100%;
    /* padding: 9px; tijdelijk uit*/
    background: #fff;
    background: unset; /* voor cat pages: tijdelijk uit */
    position: relative;
}
body a:hover, a:hover {text-decoration:underline;}

.my-hidden, .hidden {display:none}
.valop {}
.valop1 {}

/* LOTS OF COLOR STUFF*/
.my-post-title inliner color2 .post-catlist, .posts.post-catlist , .post.post-catlist  {
  background: #f5f5f5;
}
.color10 {color: #999999;background: #ffffff;}

.has-darkblue-color, h1.has-darkblue-color a, h1.has-darkblue-color a:visited
{color: #193866;background: #ffffff;} /* darkblue base*/

.color1, .color36, body.color36 a, h2.color36 a, h6.color36 a, .has-lightblue-color, .has-lightblue-color a, .has-lightblue-color a:visited
{color: #428BF4;background: #ffffff;} /* lightblue*/
.color2, .color37, body.color37 a, h2.color37 a, h6.color37 a, .has-green-color, .has-green-color a, .has-green-color a:visited
{color: #2FAC66;background: #ffffff;} /* green*/
.color3, .color43, body.color43 a, h2.color43 a, h6.color43 a, .has-orange-color, .has-orange-color a, .has-orange-color a:visited
{color: #D7790F;background: #ffffff;} /* orange*/

h1.my-post-title ,h1.my-post-title .post-content.wp-block-column a {color: #193866;}
h1.my-post-title ,h1.my-post-title .post-content.wp-block-column a:visited {color: #193866;}
/*the title color*/
h1.my-post-title ,h2.my-post-title .post-content .wp-block-column h4{    color: #193866;background: #ffffff; /* color1 */ }

/*
div.artikel_categories-master-design h2.my-post-title ,div.artikel_categories-master-design .post-content  .wp-block-column h4{    color: #428BF4;background: #ffffff;  }
div.artikel_categories-social-practices h2.my-post-title ,div.artikel_categories-social-practices .post-content  .wp-block-column h4{    color: #2FAC66;background: #ffffff;  }
div.artikel_categories-design-practices h2.my-post-title, div.artikel_categories-design-practices .post-content  .wp-block-column h4 {    color: #D7790F;background: #ffffff;  }
*/
/* title is in category color UIT
div.artikel_categories-master-design h2.my-post-title ,div.artikel_categories-social-practices .post-content .wp-block-column a {color: #428BF4;}
div.artikel_categories-master-design h2.my-post-title ,div.artikel_categories-social-practices .post-content .wp-block-column a:visited {color: #428BF4;}
div.artikel_categories-social-practices h2.my-post-title ,div.artikel_categories-social-practices .post-content .wp-block-column a {color: #2FAC66;}
div.artikel_categories-social-practices h2.my-post-title ,div.artikel_categories-social-practices .post-content .wp-block-column a:visited {color: #2FAC66;}
div.artikel_categories-design-practices h2.my-post-title, div.artikel_categories-design-practices .post-content .wp-block-column a {color: #D7790F;}
div.artikel_categories-design-practices h2.my-post-title, div.artikel_categories-design-practices .post-content .wp-block-column a:visited {color: #D7790F;}
*/
/* END: LOTS OF COLOR STUFF*/

.admin_meta {
    padding-top: 0.6em;
    text-transform: lowercase;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
    font-size: 0.6rem;
    line-height: 0.8rem;
    color:#999;
}
.admin_meta a {
    font-size: 0.6rem;
    color: #999;
}
.author-meta{
    padding: 0.4rem 0.6rem 0.1rem 0.6rem;
    font-family: "AvenirNextLTPro-Cn";
    margin-bottom: 0.6rem;
    background: #ffffff;
}

/* -------------------------------------------------------------------------- */

/*	1. Fonts
/* ---------------------------------------------*---------------------------- */



/* roboto-regular - latin */
/* https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin */
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
    url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* -------------------------------------------------------------------------- */
/*	2. Element Base
/* ---------------------------------------------*---------------------------- */


main {
    display: block;
}
/* -------------------------------------------------------------------------- */
/*	2B. Font Base
/* ---------------------------------------------*---------------------------- */
/*
.example { font-family: AvenirNextLTPro-Cn; } // Axvenir Next Condensed Medium
.example { 	font-family: AvenirNextLTPro-MediumCn; } // AxvenirNextCondensed-DemiBold

font-family: 'Roboto Slab', serif;
*/
h1,
h2,.h2_level_class,
h3,
h4,
h5,
h6,
.faux-heading {
    font-family: "AvenirNextLTPro-Cn" ; /*default*/
    font-size: 1.6625rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    padding: 0.1rem 0.4rem 0.1rem 0.4rem;
    padding: 0.4rem 0.4rem 0.1rem 0.4rem;
    padding: 0.4rem 0.5rem 0.1rem 0.5rem;
    padding: 0.4rem 0.6rem 0.1rem 0.6rem;
    text-transform: uppercase;
    background: #ffffff;
    line-height: initial;
}
h2{font-family: 'AvenirNextLTPro-MediumCn' ;}
h3{font-family: 'AvenirNextLTPro-Cn' ;}
h4{font-family: 'AvenirNextLTPro-Cn' ;}
h5{font-family: 'AvenirNextLTPro-Cn' ;}

.summary, .design_question {
    font-family: "AvenirNextLTPro-Cn"; /*default*/
    font-size: 1.4rem;
    font-size: 1.6625rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    padding: 0.1rem 0.4rem 0.1rem 0.4rem;
    background: #ffffff;
    line-height: initial;
}
.logo-box{
    display: block;
    text-align: center;
    width: 2.2rem;
    height: 2.2rem;
    background: #ffffff;
}
.blog-logo-non-mobile img {
    margin-top: 5px;
    height: 1.8rem;
    border: 0px solid black;
}
.design_question {
font-size: 1.4rem;
line-height: 1.4rem;
}
.summary {

line-height: 0.75rem;
font-size: 1rem;
line-height: 1.2rem;
text-transform: initial;
font-family: 'Roboto';
font-size: 0.8rem;
font-weight: 300;
}
.quote {
font-size: 30px;
line-height: 1.1;
font-family: "DF-EtalageScript", Georgia;
}
.quoteklein {
font-size: 22px;
line-height: initial;
line-height: 1.1;
font-family: "DF-EtalageScript", Georgia;
}
.wp-block-quote{
font-size: 30px;
font-family: "DF-EtalageScript", Georgia;
}
.wp-block-quote p {
line-height: 1.1;
padding: 0 0 0 0;
}
.wp-block-quote cite{
font-size: 16px;
font-family: 'Roboto Slab';
}
h1,
h2,.h2_level_class,
h3{
font-size: 1.4rem;
}
/*H2 EN CFILED IN SIDEBAR, DELICATE LINING */
.sidebar p, .cfield {padding: 0.3rem 0.3rem 0.3rem 0;}


.sidebar { /*this is header sidebar on small screen */
    width: 100%;

    padding: 10px 5% 10px 0;
}


.post-excerpt p {
    line-height: 145%;
    font-style: normal;
    color: #193866;
    padding: 0;
    padding-bottom: 0;
}
div.together {background: #ffffff;}

h2.margintop, h1.margintop, h3.margintop {
    margin-top: 9px;
}
h2.h2_level_class {
    margin-top: 0;
}
/*END H2 EN CFILED IN SIDEBAR, DELICATE LINING */
h1,
.heading-size-1 {
    line-height: 2rem;
}
h3,
.heading-size-3 {

}
h4,
.heading-size-4 {
    font-size: 1rem;

}
.my-post-button {
	padding: 0.6rem 0.4rem 0.1rem 0;
    padding: 0.3rem 0.4rem 0.1rem 0;
}
.my-post-button a{
    margin-left: 0;
    padding-left: 0;
}	
h5,
.heading-size-5 {
    font-size: 0.9375rem;
	line-height: 1rem;
}

h6,
.heading-size-6 {
    margin-top: 8px;
    margin-right: 6px;
    padding: 0rem 0.3rem 0rem 0.3rem;
    padding: 0.3rem 0.3rem 0.1rem 0.3rem;
    font-size: 0.8rem;
}
h6.author {text-transform: capitalize;}

h2.my-blog-title,
h2.my-post-title,
h2.my-archive-title{
	margin-bottom:9px;
}

h2.entry-title , .site-title, h2.site-title,
.heading-size-2{

    font-size: 2.2rem;
    background-color: #fff;
    padding: 3px;
}
.h2_level_class {
    margin-top: 0;
}

/* -------------------------------------------------------------------------- */

/*	Showing cat walker, index, archive
/* ---------------------------------------------*---------------------------- */
/*need a reset*/
ul,
ul li,
ul ul li {
    margin:0;
    padding: 0;
    text-indent: 0;
    list-style-type: 0;
}
li{
    display:inline-block;
}
/*the children*/
body.archive main#site-content div#posts div#post-catlist1  span  ul  li  ul  li,
body.archive main#site-content div#posts div#post-catlist2  span  ul  li  ul  li,
body.archive main#site-content div#posts div#post-catlist3  span  ul  li  ul  li
{
    display:none;
    display:inline-block;
}
/*the parent is current, show all children*/
body.archive main#site-content div#posts div#post-catlist1  span  ul  li.current  ul  li,
body.archive main#site-content div#posts div#post-catlist2  span  ul  li.current  ul  li,
body.archive main#site-content div#posts div#post-catlist3  span  ul  li.current  ul  li
{
    display:inline-block;
}

body.archive main#site-content div#posts div#post-catlist1  span  ul  li  ul  li.current,
body.archive main#site-content div#posts div#post-catlist2  span  ul  li  ul  li.current,
body.archive main#site-content div#posts div#post-catlist3  span  ul  li  ul  li.current
{
    text-decoration: underline;
    display:inline-block;
}
body.home main#site-content div#posts div#post-catlist1  span  ul  li  ul  li
{
    /* border:1px solid red; */
}

/* end cat walker*/



H2.inliner, H3.inliner, H2.inliner div.cfield{

	display:inline-block;
}
my-postthumbnail h4 {
    border: 1px solid red;
}
/* content voor single and page, reset padding*/
.my-post-inner h1,
.my-post-inner h2, .my-post-inner .h2_level_class,
.my-post-inner h3,
.my-post-inner h4,
.my-post-inner h5,
.my-post-inner h6,
.my-post-inner .faux-heading {
    padding: 0;
}

/* content */




.entry-title, .inliner, .inlinerbg {
    display:inline-block;
}
div#post-catlist1, div#post-catlist2, div#post-catlist3 {

    padding: 0 0 0 0;
    margin: 0 0 9px 0;
}
#site-header, #site-content, body {
    background-color: #f5f5f5;
    background: #f5f5f5;
}
.my-ul {
    padding-top: 0;
}

.color10 {color: #999999;background: #ffffff;}

.color1, .Black, .black {color: #428BF4;background: #ffffff;}
.color1, .color36, .Lightblue, .lightblue {color: #428BF4;background: #ffffff;}
.color2, .color37, .Green, .green {color: #2FAC66;background: #ffffff;}
.color3, .color43, .Orange, .orange {color: #D7790F;background: #ffffff;}

#post-catlist1 > span > ul > li > div > p,
#post-catlist1 > span > ul > li > ul > li.artikel_categories-item > h3 > a,
#post-catlist1 > span > ul > li > h2,
#post-catlist1 > span > ul > li > h2 > a,
#post-catlist1 > span > ul > li > h2 > a:visited,
#post-catlist1 > span > ul > li > ul li h6,
#post-catlist1 > span > ul > li > ul li h6 > a,
#post-catlist1 > span > ul > li > ul li h6 > a:visited,
a.artikel_categories-master-design,
a.artikel_categories-master-design:visited,
h4.my-post-button span.artikel_categories-master-design,
#post-catlist1 div.catdescription
{
    color:#428BF4;
}

#post-catlist2 > span > ul > li > div > p,
#post-catlist2 > span > ul > li > ul > li.artikel_categories-item > h3 > a,
#post-catlist2 > span > ul > li > h2,
#post-catlist2 > span > ul > li > h2 > a,
#post-catlist2 > span > ul > li > h2 > a:visited,
#post-catlist2 > span > ul > li > ul li h6,
#post-catlist2 > span > ul > li > ul li h6 > a,
#post-catlist2 > span > ul > li > ul li h6 > a:visited,
a.artikel_categories-social-practices,
a.artikel_categories-social-practices:visited,
h4.my-post-button span.artikel_categories-social-practices,
#post-catlist2 div.catdescription
{
    color:#2FAC66;
}

#post-catlist3 > span > ul > li > ul > li.artikel_categories-item > h3 > a,
#post-catlist3 > span > ul > li > h2,
#post-catlist3 > span > ul > li > h2 > a,
#post-catlist3 > span > ul > li > h2 > a:visited,

#post-catlist3 > span > ul > li > ul li h6,
#post-catlist3 > span > ul > li > ul li h6 > a,
#post-catlist3 > span > ul > li > ul li h6 > a:visited,
#post-catlist3 > span > ul > li > div > p,
a.artikel_categories-design-practices,
a.artikel_categories-design-practices:visited,
h4.my-post-button span.artikel_categories-design-practices,
#post-catlist3 div.catdescription
{
    color: #D7790F;
}
.my-ul li h2 {
 padding: 0.4rem 0.6rem 0.1rem 0.4rem;
}
.catdescription-boxtop {
    padding: 0;
    padding: 0.1rem 0.4rem 0.1rem 0.4rem;
    background-color: #ffffff;
}
.catdescription {
    margin-top: 8px;
    padding: 0.1rem 0.4rem 0.1rem 0.4rem;
    background-color: #ffffff;
    line-height: 145%;
    font-style: normal;
	font-weight: 300;
    color: #193866;
    color: #f00;
    font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 100%;
}

h2.a, a {
    color: #193866;
    text-decoration: none;
}

.my-post-navigation, .my-post-navigation a{
font-size: 0.85em;
    color: #999;
}
h2.post-title.posts, h2.post-title.post, h2.post-title.posts, h2.post-title.page {
    padding: 0;
}
h2.my-post-title {
    line-height: 2rem;
    padding: 0.4rem 0.6rem 0.1rem 0.6rem;
    font-family: "AvenirNextLTPro-Cn" ;
    font-size: 1.6625rem;
    font-size: 1.4rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
}


div.post-header h2.post-title,
div.post-header h2.post-title a {padding: 0;}
.post-excerpt {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    margin-top: 8px;
    padding-left: 0;
    margin-left: 0;
}
div.post-header h2.post-title a.artikel_categories-master-design   {color: #428BF4;background: #ffffff;padding: 0;}
div.post-header h2.post-title a.artikel_categories-social-practices   {color: #2FAC66;background: #ffffff;padding: 0;}
div.post-header h2.post-title a.artikel_categories-design-practices {color: #D7790F;background: #ffffff;padding: 0;}


#post-186 > div.post-header > h2 > a {}
#post-186 > div.post-header > h2
.posts .post, .posts .page {
    width: 100%;
    padding: 16px;
    background: #fff;
    position: relative;
}
.artikel, .posts .post, .posts .page, .post.single  {
    width: 100%;
    padding: 5px 0 0 5px;
    padding: 5px 0 0 0;
    position: relative;
}
h4.my-post-button{
    background: unset;

}
/*
.my-single div.post-content, .my-single h4.my-post-button{
      margin-bottom: 1em;
    font-size:6em;
  }
*/
img.alignleft, .alignleft img, img.aligncenter, .aligncenter img, img.alignright, .alignright img, img.alignnone, .alignnone img {
    border: 0;
    box-sizing: initial;
    display: block;
    padding: 5px;
}
.site-title {
    margin: 0 0 2rem;
}

.primary-menu > li {
    text-transform: uppercase;
}
p {
    line-height: 1.5;
    padding: 0 0 1em 0;
    font-weight: 400;
    font-weight: 300;
}

em,
i,
q,
dfn {
    font-style: italic;
    font-weight: 300;


}

em em,
em i,
i em,
i i,
cite em,
cite i {
    font-weight: bolder;
}

big {
    font-size: 1.2em;
}

small {
    font-size: 0.75em;
}

b,
strong {
    font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/*	3. (Single) Content, including custom styles for MD
/* ---------------------------------------------*---------------------------- */


.robotoslab, #robotoslab {
    font-family: 'Roboto Slab';
    font-weight: 300;
}
strong .robotoslab, strong #robotoslab {
    font-family: 'Roboto Slab';
    font-weight: 400;
}
.roboto,  #roboto {
    font-family: 'Roboto';
    font-weight: 300;
}
strong .roboto, strong #roboto {
    font-family: 'Roboto';
    font-weight: 400;
}
.avenirmed, #avenirmed{
    font-family: 'AvenirNextLTPro-MediumCn';
    font-weight: 400;
}
strong .avenirmed, strong #avenirmed{
    font-family: 'AvenirNextLTPro-MediumCn';
    font-weight: 500;
}
.avenircon{
    font-family: 'AvenirNextLTPro-Cn';
    font-weight: 400;
}
strong .avenircon{
    font-family: 'AvenirNextLTPro-Cn';
    font-weight: 500;
}
p.inspring, .inspring{
    margin-left: 45px;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

abbr,
acronym {
    cursor: help;
}

address {
    line-height: 1.5;
    margin: 0 0 2rem 0;
}

hr {
    border-style: solid;
    border-width: 0.001rem 0 0 0;
    /* border-color: #193866; */
    margin: 0.8rem 0;
    /* border: 1px solid #193866; */
    color: #193866;
}

h6.author-in-card {
    display:inline;
    padding:0;
}

.post.single {
    background-color: #f5f5f5;
    background: #f5f5f5;
}

.content.thin {
    /*width: 973px; */
    width: 100%;
    margin-top: 0;
}
/* readmore button reset*/
button {
    display: inline-block;
    text-decoration: none;
}
button, button#id999 , button.thumbnailpost{
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;
    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;
    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none;
}
button:hover,
button:focus {
    background: transparent;
}

button:focus {
    outline: 0px solid #fff;
    outline-offset: 0;
}

button:active {
    transform: scale(1);
}
/*end button reset*/
button span {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    padding-left: 0;
    margin-left: 0;
    font-size: 10.8px;
    font-weight: 300;
}

.post-content-inline .wp-block-table .is-style-stripes {display: none;}
.post-content-inline .is-style-stripes {display: none;}

.mobile-navigation-600, .mobile-only {
    display: none;
}

/* tbv simple lightbox,  */
/* simple lightbox, re-introduced januari 2022 */
#slb_viewer_wrap .slb_theme_slb_default .slb_container {
    box-shadow: 0 0 64px -40px #fcfcfc;
    border-radius: 0px;
    border-radius: 0 !important;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_data_title, #slb_viewer_wrap .slb_theme_slb_default .slb_group_status {

    margin: 0;
    padding: 0;
    line-height: 1.4em;
    text-align: left;
    vertical-align: baseline;
    white-space: normal;
    outline: none;
    border: 0px;
    background: none;
    opacity: 1;
    width: auto;
    height: auto;
    position: static;
    float: none;
    clear: none;

    margin-left: 0;
    font-family: 'Roboto';
    font-weight: 300;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_data_desc {
    display: block;
    margin-top: 0.5em;
    margin-top: 0 !important;
}


/*groot, toon logo linksonder position relative in scherm*/
@media (min-width: 900px) {
    .sidebar:before {
        display:none;
        border:5px solid blue;
    }
    /* dit is sidebar van parent theme, dient uit     */
    .sidebar{
        display:none;
        border:5px solid yellow;
    }
    /*logos, klein scherm dan onderaan pagina*/
    .my-foot-sidebar div.logos {
        display: initial;
    }
    /*logos, groot scherm dan position in screen*/
    #footer{
        position: fixed;
        bottom: 0;
        left:0;
        margin-bottom: 95px;
    }
    .my-foot-sidebar {
        padding-left:10px;
    }
    .my-foot-sidebar div.logos {
        position:absolute;
        width: 210px;
        max-width: 210px;
    }
}
/*klein*/
@media (max-width: 900px) {
    /*logos, klein, toon in footer in page flow*/
    .my-foot-sidebar {
        display: block;
        padding: 0;
        max-width: 95%;
        margin: 5% auto 0 auto; /*footer laten aansluiten*/
        margin: 5px auto 0 10px;
    }
    /*logos in footer*/
    .my-foot-sidebar div.logos{
        width: 210px;
        max-width: 210px;
        padding: 0 5px 20px 12px; /*klein scherm*/
        padding: 0;
    }
    .my-foot-sidebar div.logos h6.inliner {
        margin-bottom: 0;
        margin-right: 6px;
        margin-top: 0; /*klein scherm*/
    }
    .my-foot-sidebar div.logos .wp-block-columns .wp-block-column-custom1,
.my-foot-sidebar div.logos .wp-block-columns .wp-block-column-custom2,
.my-foot-sidebar div.logos .wp-block-columns .wp-block-column-custom3 {
        margin-right: 0;
        flex-basis: 33%!important;
    }
.my-foot-sidebar div.logos .wp-block-columns .wp-block-column-custom3 {
 padding-left: 6px;
}
}

.my-foot-sidebar div.logos .wp-block-columns .wp-block-column-custom3 {
 padding-top: 0;
}
@media (max-width: 600px) {
    .my-foot-sidebar div.logos .wp-block-columns .wp-block-column-custom1,
.my-foot-sidebar div.logos .wp-block-columns .wp-block-column-custom2 {
 padding-top: 9px;
    }
}


@media (max-width: 1000px) {

    .content, .content.thin {
        max-width: 95%;
        max-width: 100%;
        margin: 5% auto 0 auto; /*footer laten aansluiten*/
    }

    .mobile-menu li {
        margin-top: 0;
    }
    .mobile-menu li a, .mobile-menu li a:visited {
        color: #193866;
    }
    .mobile-menu li#menu-item-1205 a,.mobile-menu li#menu-item-1202 a:visited,  /*social practives */
    .mobile-menu li#menu-item-1205 a,.mobile-menu li#menu-item-1205 a:visited { /*social practives remote*/
        color: #428BF4;
    }
    .mobile-menu li#menu-item-1202 a,.mobile-menu li#menu-item-1202 a:visited,  /*social practives */
    .mobile-menu li#menu-item-1839 a,.mobile-menu li#menu-item-1839 a:visited { /*social practives remote*/
        color: #2FAC66;
    }
    .mobile-menu li#menu-item-1203 a,.mobile-menu li#menu-item-1203 a:visited,  /* design practives */
    .mobile-menu li#menu-item-1840 a,.mobile-menu li#menu-item-1840 a:visited { /* design practives  remote*/
        color: #D7790F;
    }
    .mobile-menu {
        padding: 0 0;
    }
    .nav-toggle .bar {
        width: 18px;
        height: 2px;
        height: 1.99px;
        background: #193866;
        border-radius: 2px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .nav-toggle.active {
        background: #ffffff;
    }
    .nav-toggle, .nav-toggle.active bar { background: #ffffff; }
    .nav-toggle.active .bar {        background: #193866;    }
    button {
        color: #ff0000;
    }
    a.blog-logo img {
        height: 22px;
        margin-left: 9px;
    }
    /*==== end menu*/

}
/*geen sidebar meer, wel primary menu*/
@media (max-width: 900px) {
    .my-sidebar{
        display:none;
    }
    .mobile-only{
        display: block;
    }
    .wrapper {
        margin-left: 0;
        margin: auto 10px; /*xxxxxxx */
        border: 0 solid red;
    }
    .nopadding {padding:0; margin:0}

    /*new layout for tablet*/
    .blog-title {
        padding-left: 10px;
        margin-right: 40px;
    }
    .blog-title h2, .blog-title a {
        margin-left: 0;
        padding: 0;
        letter-spacing: initial;
    }
    div.col13 {
       /* margin-left: 4px; */
    }
}
@media (prefers-reduced-motion: reduce) {
* {
    animation-duration: 0.5s !important;
    transition-duration: 0.5s !important;
}
}
/*3 colunms stack down*/
@media (max-width: 600px) {
    .blog-title {
        margin-right: 40px;
    }
    .blog-title h2, .blog-title a {
        margin-left: 0;
        padding-left: 0;
        
    }
    div.col13 {
        margin: auto 10px;
    }
    h1, h2, .h2_level_class, h3 {
     /*   font-size: 1.4rem; */
        font-size: 16px;
    }
    p.witblok {    height:0; line-height: 1.5; padding: 0 0 0 0;} /*bij detail, goed*/
    p.witblok, p.witblok10,p.witblok20,p.witblok50,p.witblok100,p.witblok200,p.witblok300 {display:none} /*bij detail, goed*/

    p.inspring, .inspring{
        margin-left: 20px;
    }
    /*collapse down: 3 kolommen wordt 1 kolom */
    /*collapse down for gutenberg is automatic.*/
    /*collapse down for archive and index*/
    #posts {
        /* flex-wrap:no-wrap; */
        flex-wrap:wrap;
    }
    div.col13, div.col23, div.col33, .wp-block-column {
        /* flex-basis: 33.333%; */
        flex-basis: unset;
        padding: 0;
        padding-top: 0; /* of 9px, je weet niet waar redactie mee begint*/
        margin-right: 5px;
    }
    .mobile-navigation-600 {
        display: block;
        margin-bottom:2px;
    }
    .mobile-only{
        display: block;
    }

    /*for menu*/
    div.mobile-navigation-600 ul.mobile-menu > li:first-child {
        margin-top: -3px;
    }
    /*menu en pages allen zelfde margin*/
    .sidebar{
        width: auto;
        margin: auto 10px;
        border-bottom: 0px solid #ddd;
        top: 0;
    }
    a.blog-logo img {
        height: 22px;
        margin-left: 5px;
    }
    .mobile-navigation {
        background: #fff;
        /* margin-left: 9px; xxxxxxx */
        margin: auto 10px;
    }
    .mobile-navigation-600 {
        margin: auto 0;
    }
    div.col13 {
        margin: 0; /* xxxx */
    }
    .mobile-menu{
        margin-right: 5px;
        margin-left: 1px;
    }
    .mobile-menu .current-menu-item:before,
    .mobile-menu .current_page_item:before {
        content: '\f405';
        display: none; /*onzichtbar*/
        font: 16px/1 "Genericons";
        color: #fff; /*onzichtbar*/
        position: absolute;
        left: -19px;
        top: 2px;
    }
    /*voor menu items*/
    .mobile-menu li h2 {
    padding: 0.4rem 0.6rem 0.1rem 0.35rem;
    }
    .content-author div.posts {
        margin-left: 0;
    }
    .post-content hr { margin: 1em 0; }
    /* when  collapse down */
    /*     do show the current column cats do not show column2en3 catwalker */
    /*     index toont niet 2 en 3 catwalker */
    body.home main#site-content div#posts div#post-catlist2,
    body.home main#site-content div#posts div#post-catlist3 {
        display:none;
    }
    /*if body.home dan alle cat-list weg, blijft over homepage */
    body.archive main#site-content div#posts div#post-catlist1 {}

    body.home main#site-content div#posts div#post-catlist1{
        display:none;
    }


    /*     index toont niet 2 en 3 catwalker */
    .post-container-nojs {
        margin: 0 0 9px 0;
    }
    /*kolom overgang niet zichtbaar, dus geen xtra tussenruimte*/

    /* end collapse down */

/* bottom - use for positionering onderaan de pagina op mobile
    https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css
    https://stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-using-only-css
 */
}
/*
-de responsive sizes verasnderen omdat we de content width hebben veranderd.
-de max-width is van 9-20 naar 1-121 is vergroot, consequenties?
-mouseover descript is letter te groot
*/

@media (min-width: 601px) {
	/* change the overall letter size on site */

	/*first the columns - 1.14vergroot*/

	.my-sidebar {
		width: 268px;
		
		width: 305px;
		min-width: 305px;
	}
	.content-author div.posts, .content, .post-content {
		max-width: 1121px;
		width: 100%; /*keep the columns responsive*/
		max-width: 1048px;
	}
	/*font-sizes  */
	body {
		
		font-size: 0.9rem;
		font-size: 1rem;
		font-size: 1.015rem;
	}
	/* summary */
	.summary {
		font-size: 0.8rem;
			font-size: 0.91rem;
		font-weight: 300;
	}

	h1 {
		font-size: 1.5rem;
		font-size: 1.71rem;
	}
	h1, h2, .h2_level_class, h3 {
		font-size: 1.4rem;
			font-size: 1.6rem;
	}
	h2.my-post-title {
		font-size: 1.4rem;
			font-size: 1.6rem;
	}

	h4 {
		font-size: 1rem;
			font-size: 1.14rem;
	}
	h5 {
        font-size: 0.9375rem;
        line-height: 1rem;
	}
	h6, .heading-size-6 {
		font-size: 0.8rem;
			font-size: 0.91rem;
	}
	figcaption {
		font-size: smaller;
			font-size: 0.91rem;
			line-height:1.05rem;
	}
	.wp-block-quote {
		font-size: 30px;
		font-size: 1.9rem;
		font-size: 2.16rem;
	}
	.quoteklein {
		font-size: 22px;
		font-size: 1.4rem;
		font-size: 1.59rem;
	}
	.catdescription {
		font-weight: 300;
		font-size: 100%; /*todo*/
	}
}