/*
Theme Name: Dirk Jan
Theme URI: http://underscores.me/
Author: Daco de la Bretoniere | Lazzo.nl
Author URI: http://lazzo.nl
Description: DirkJan is a comic, the creation of Dutch author and artist Mark Retera. It is also the name of its main character.
Version: 1.0-wpcom
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dirk-jan
*/

html body { background: rgb(255, 128, 0); font-family: "corbelregular"; }
#page { background: none repeat scroll 0 0 #fff; padding: 0; }

div#primary {
    min-height: 40vw;
}

article { min-height: 35vw; }

/*.site-header { background: url("img/top-dirk-jan-text.png") no-repeat scroll center center black; height: 118px; overflow: hidden; }*/
.site-header { text-align: center; position: relative; background: #000; }
.site-branding {
    bottom: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: url(img/dirkjan.svg);
    background-repeat: no-repeat;
    background-size: auto 125%;
}
.site-header img { margin: 10px 0; width: 37%; position: relative; z-index: 1; }
/*.site-title { background: url(img/top-dirk-jan-image.png); color: transparent; font-size: 0; height: 117px; margin: 0; padding: 0; width: 174px; display: none; }*/
.site-title { display: none; }
.site-description { font-size: 0; display: none; margin: 0; }

article.cartoon { position: relative; white-space: nowrap; top: -13px; margin: 0 0 12px 0; min-height: 0; }

.post-navigation { text-align: justify; margin: 8px 0 0; padding: 0 15% 0 5%; }

.post-navigation a {
    display: inline-block;
    /*background: url("img/weekdays.png") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0);*/
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
    font-size: 0;
    width: 15%;
    padding-bottom: 10%;
}

/*post-navigation__day*/

a.post-navigation__day.post-navigation__day--mon {
    background-image: url("img/week/mon.svg");
}
a.post-navigation__day.post-navigation__day--mon:hover, a.post-navigation__day.post-navigation__day--mon.active {
    background-image: url("img/week/mon-over.svg");
}
a.post-navigation__day.post-navigation__day--tue {
    background-image: url("img/week/tue.svg");
}
a.post-navigation__day.post-navigation__day--tue:hover, a.post-navigation__day.post-navigation__day--tue.active {
    background-image: url("img/week/tue-over.svg");
}
a.post-navigation__day.post-navigation__day--wed {
    background-image: url("img/week/wed.svg");
}
a.post-navigation__day.post-navigation__day--wed:hover, a.post-navigation__day.post-navigation__day--wed.active {
    background-image: url("img/week/wed-over.svg");
}
a.post-navigation__day.post-navigation__day--thu {
    background-image: url("img/week/thu.svg");
}
a.post-navigation__day.post-navigation__day--thu:hover, a.post-navigation__day.post-navigation__day--thu.active {
    background-image: url("img/week/thu-over.svg");
}
a.post-navigation__day.post-navigation__day--fri {
    background-image: url("img/week/fri.svg");
}
a.post-navigation__day.post-navigation__day--fri:hover, a.post-navigation__day.post-navigation__day--fri.active {
    background-image: url("img/week/fri-over.svg");
}
a.post-navigation__day.post-navigation__day--sat {
    background-image: url("img/week/sat.svg");
}
a.post-navigation__day.post-navigation__day--sat:hover, a.post-navigation__day.post-navigation__day--sat.active {
    background-image: url("img/week/sat-over.svg");
}


/*.post-navigation a:first-child { background-image: url("img/week-ma.png"); }*/
/*.post-navigation a:first-child:hover, .post-navigation a:first-child.active { background-image: url("img/week-ma-over.png"); }*/

/*.post-navigation a:first-child + a { background-image: url(img/week-di.png); }*/
/*.post-navigation a:first-child + a:hover, .post-navigation a:first-child + a.active { background-image: url("img/week-di-over.png"); }*/

/*.post-navigation a:first-child + a + a { background-image: url(img/week-wo.png); }*/
/*.post-navigation a:first-child + a + a:hover, .post-navigation a:first-child + a + a.active { background-image: url("img/week-wo-over.png"); }*/

/*.post-navigation a:first-child + a + a + a { background-image: url("img/week-do.png"); }*/
/*.post-navigation a:first-child + a + a + a:hover, .post-navigation a:first-child + a + a + a.active { background-image: url("img/week-do-over.png"); }*/

/*.post-navigation a:first-child + a + a + a + a { background-image: url("img/week-vr.png"); }*/
/*.post-navigation a:first-child + a + a + a + a:hover, .post-navigation a:first-child + a + a + a + a.active { background-image: url("img/week-vr-over.png"); }*/

/*.post-navigation a:first-child + a + a + a + a + a { background-image: url("img/week-za.png"); }*/
/*.post-navigation a:first-child + a + a + a + a + a:hover, .post-navigation a:first-child + a + a + a + a + a.active { background-image: url("img/week-za-over.png"); }*/


.post-navigation a:hover, .post-navigation a.active {  }
.post-navigation:after { content: ""; display: inline-block; width: 100%; margin: 0 0 0 0; }

a.day-navigation:hover { color: #ff8000; }
article.cartoon { display: flex; }
/*article.cartoon img { width: 90%; }*/
article.cartoon img { height: 27vw; }
@media (min-width: 768px) {
    article.cartoon img { height: 22vw; }
}

.social-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0 15px;
}

.social-links__icon {
    width: auto;
    height: 30px;
}
@media (min-width: 813px) {
    .social-links__icon {
        cursor: pointer;
        transition: fill 200ms linear;
    }
    .social-links__icon--facebook:hover {
        fill: rgb(66,103,178);
    }
    .social-links__icon--twitter:hover {
        fill: rgb(29, 161, 242);
    }
    .social-links__icon--pinterest:hover {
        fill: rgb(201,34,40);
    }
    .social-links__icon--email:hover {
        fill: rgb(0,154,78);
    }
}


.navbar-default ul { margin: 0; list-style: none; padding: 0; background: transparent; }
.navbar-default .collapse.in ul, .navbar-default .collapsing ul { background: none repeat scroll 0 0 #fff; }

.navbar-default ul li { position: relative; white-space: nowrap; }
.navbar-default ul li a { display: block; width: 100%; background-size: contain !important; padding: 0 0 26%; }

.navbar-default ul li:first-child a {
    background: url("img/nav/strips.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child.current-menu-item a, .navbar-default ul li:first-child:hover a {
    background: url("img/nav/strips-over.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li a {
    background: url("img/nav/shop.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li.current-menu-item a, .navbar-default ul li:first-child + li:hover a {
    background: url("img/nav/shop-over.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li a {
    background: url("img/nav/boeken.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li.current-menu-item a, .navbar-default ul li:first-child + li + li:hover a {
    background: url("img/nav/boeken-over.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li + li a {
    background: url("img/nav/animatie.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li + li.current-menu-item a, .navbar-default ul li:first-child + li + li + li:hover a {
    background: url("img/nav/animatie-over.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li + li + li a {
    background: url("img/nav/auteur.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li + li + li.current-menu-item a, .navbar-default ul li:first-child + li + li + li + li:hover a {
    background: url("img/nav/auteur-over.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li + li + li + li a {
    background: url("img/nav/contact.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li + li + li + li.current-menu-item a, .navbar-default ul li:first-child + li + li + li + li + li:hover a {
    background: url("img/nav/contact-over.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.navbar-default ul li:first-child + li + li + li + li + li + li a {
    background: url("img/nav/faq.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}

.navbar-default ul li:first-child + li + li + li + li + li + li.current-menu-item a, .navbar-default ul li:first-child + li + li + li + li + li + li:hover a {
    background: url("img/nav/faq-over.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
}

.navbar-default ul li.current-menu-item:after, .navbar-default ul li:hover:after {
    /*content: "";*/
    /*background: #000;*/
    /*bottom: 0;*/
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 0;*/
    /*width: 15%;*/
}

body .navbar-toggle {
    background-image: url(img/mobile-menu.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}
body .navbar-toggle .icon-bar {
    visibility: hidden;
}
body .navbar-default .navbar-toggle:hover, body .navbar-default .navbar-toggle:focus {
    background-color: transparent !important;
}

.shop-navigation { display: none; }
/*.shop-navigation:after { content: ""; display: inline-block; width: 100%; }*/
/*.shop-navigation a { text-transform: uppercase; color: rgb(255, 128, 0) !important; font-size: 18px; font-weight: bold; font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif; margin: 0 20px 0 0; }*/
/*.shop-navigation a.active { text-decoration: underline; }*/

body .navbar-collapse { padding: 0; }

body .navbar-default {
	content: "Mobile first";
	position: absolute; right: 0;
	top: 0; z-index: 10;
	font-size: 0;
	color: transparent;
	padding: 0; border: none; left: 81%; background: transparent; }
@media (min-width: 768px) {
	body .navbar-default {
		content: "Desktop only";
		top: auto; background: transparent; border: medium none !important; color: transparent; margin: 27px 0 0 0; left: 81%; right: 0;
	}
}

#shop {
    background: none repeat scroll 0 0 rgb(255, 128, 0);
    list-style: none;
    margin: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
}
#shop li {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    background: none;
    margin: 1%;
    position: relative;
    min-width: 36px;
}
#shop li img:first-child {
    width: 35%;
    float: left;
    margin: 3%;
}
#shop li img:first-child + img {
    width: 54%;
}

#shop li p {
    display: inline-block;
    width: 54%;
    color: #fff;
    text-align: center;
    font-size: 1.4vw;
    margin: 0;
    height: 4vw;
    font-weight: normal;
    overflow: hidden;
}

#shop li p + a img {
    width: 56% !important;
    left: 11vw;
    position: absolute;
    top: 10vw;
}

#shop li h3 {
    color: rgb(254, 254, 71);
    font-size: 5vw;
    font-weight: bold;
    margin: 0;
    text-shadow: 3px 3px 1px rgb(185, 91, 0);
}

.left-bar { height: 100%; position: absolute; }


body.post-type-archive-shop iframe, body.single-shop iframe {
    /*border: medium none;*/
    /*height: 755px;*/
    /*margin: 10px;*/
    /*overflow-x: hidden;*/
    /*width: 100%;*/
}
body.post-type-archive-shop #page, body.single-shop #page, body.post-boeken #page { background: rgb(250, 250, 212); }

.bol_pml_box { border: none !important; margin: 0 auto !important; width: auto !important; }

.bol-widget {
    display: block !important;
    font-size: 0 !important;
    color: transparent !important;
}
.bol-widget * {
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: transparent !important;
}
.bol-widget img {
    display: none !important;
}
.bol-widget a {
    font-size: 0 !important;
    display: block !important;
    position: absolute !important;
    background: transparent !important;
    width: 60% !important;
    padding-bottom: 22% !important;
}


body.post-type-archive-animation #main iframe { display: none; }
body.post-type-archive-animation #main iframe.active { display: block; }

body.post-type-archive-animation #main ul { list-style: none; margin: 20px 0 0 26px; padding: 0; }
body.post-type-archive-animation #main ul li { margin: 0 0 5px 0; }
body.post-type-archive-animation #main ul li div:first-child { display: inline-block; width: 49%; vertical-align: top; margin: 0 12px 0 1px; overflow: hidden; padding-bottom: 30%; position: relative; }
body.post-type-archive-animation #main ul li div:first-child img { width: 100%; position: absolute; cursor: pointer; }
body.post-type-archive-animation #main ul li div:first-child iframe { position: absolute; height: 100%; width: 100%; }
body.post-type-archive-animation #main ul li div:first-child + div { display: inline-block; width: 47%; vertical-align: top; }
body.post-type-archive-animation #main ul li div:first-child + div h2 { color: rgb(255, 128, 0); text-transform: uppercase; font-size: 22px; font-weight: bold; }
body.post-type-archive-animation #main ul li div:first-child + div p {  }




body.error404 .site-content {background: none repeat scroll 0 0 rgb(250, 250, 212);}
.page-not-found { background: url("img/404.png") no-repeat scroll center center / contain rgba(0, 0, 0, 0); color: transparent; font-size: 0; height: calc(50vh); margin: 20px 0 0 0; }


#copyright-link { color: rgb(161, 160, 161); display: block; font-size: 11px; outline: medium none !important; padding: 5px 16px; text-align: right; }

body.page-auteur #page { background: rgba(248, 251, 212, 1); }
body.page-auteur article:before { content:"Mark Retera"; background: url(img/mark-retera.png); color: transparent; display: block; font-size: 0; height: 36px; margin: -70px 0 0; position: absolute; width: 183px; }
body.page-auteur article { margin: 153px 48% 40px 83px; font-size: 12px; }
body.page-auteur article:after { content:"Mark Retera"; background: url("img/mark-retera.jpg") repeat scroll 0 0 / contain rgba(0, 0, 0, 0); color: transparent; font-size: 0; height: 209px; margin: -222px 0 0 50%; position: absolute; width: 232px; }

body.page-faq article { margin: 52px 48% 40px 83px; font-size: 12px; }
/*body.post-boeken article { margin: 0 auto; padding: 0; width: 640px; }*/

body.page-contact #page { background: none repeat scroll 0 0 rgba(248, 251, 212, 1); }

/* Shop */
div#sprd-main {
    max-width: unset;
    width: 80%;
    margin: unset;
    font-size: 1.6rem;
}
div#sprd-container {
    background-color: unset;
}
div.sprd-header {
    background-color: unset;
}
div.sprd-bg-m1 {
    background-color: rgb(250, 250, 212);
}
div.sprd-bg-m3 {
    background-color: rgb(250, 250, 212);
}
a.sprd-header__image img {
    opacity: 0;
}
@media screen and (min-width: 1000px) {
    .SprdMain a.sprd-header__image > img {
        max-height: 35px;
    }
}
span#sprd-basket-count {
    box-sizing: content-box;
}
a#buttonSpreadshirt {
    display: none !important;
}
/* \ Shop */

body span.wpcf7-form-control-wrap {
    display: block;
    position: relative;
}
body div.wpcf7 {
	background: url("img/contact-page.png") no-repeat scroll calc(50vw - 4px) 196px / 373px auto rgba(248, 251, 212, 1); padding: 100px 0 170px 110px;
}

body div.wpcf7 + p { margin: 0; }

body div.wpcf7 + p a {
	background: url("img/banner.gif") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0); color: transparent; display: block; font-size: 0; height: 104px; margin: -139px 0 0 104px; position: absolute; width: 340px;
}
@media (max-width: 768px) {
body div.wpcf7 {
	background: rgba(248, 251, 212, 1);
}
}

body .wpcf7-form-control.wpcf7-text {
    border: 2px solid #000;
    height: 35px;
    width: 340px; border-bottom: none;
}
body .wpcf7-form-control.wpcf7-textarea {    border: 2px solid #000;
    width: 340px;}


body .wpcf7-form-control.wpcf7-submit { background: url("img/versturen.png") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0); border: none; color: transparent; font-size: 0; height: 57px; margin: 0 0 0 194px; width: 160px; }

div.wpcf7-response-output {
    background: none repeat scroll 0 0 rgb(255, 128, 0);
    border-radius: 8px;
    margin: 0;
    padding: 0.2em 1em;
    width: 340px;
}
div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng, div.wpcf7-spam-blocked, div.wpcf7-validation-errors { display: inline-block; }

body.page-bedank-voor-het-delen article, body.page-bedank-voor-het-delen article p { font-size: 20px; font-weight: bold; margin: 30px 0 0 10px; }


@media all and (orientation: portrait) {

body{
content:"Mobile portrait first";
left:100vw;
position:relative;
top:0;
/*transform*/
-webkit-transform:rotate(90deg);
   -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
     -o-transform:rotate(90deg);
        transform:rotate(90deg);
/*transform-origin*/
-webkit-transform-origin:0 0 0;
   -moz-transform-origin:0 0 0;
    -ms-transform-origin:0 0 0;
     -o-transform-origin:0 0 0;
        transform-origin:0 0 0;
width:100vh;
}

body:after{ content: ""; background: url("img/turn.png") no-repeat scroll center -60px / contain  rgba(255, 255, 255, 0.7); bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 10; }


	}
@media all and (min-width: 768px) {
	* body {
		content: "Desktop only";
position:static;



-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
transform-origin: 0px 0px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);

top: 0px;
width:100%;

	}

* body:after { content: none; }


}


.grecaptcha-badge {
    display: none !important;
}