/* 2024-03-14 GvE
 * dkb specific definitions
 */

.dkb #header {
    background-color: #13242f;
}

.dkb #header a {
    color: #9bbcff;
}

.dkb .dropmenu ul:not(:first-child) > li {
    background-color: #13242f;
}

.dkb #footer {
    border: 1px solid #223344;
}

.dkb #body-wrapper .container {
    padding: 1.5rem 0 2rem;
}

.dkb #booknav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dkb #pagenum {
    margin-left: auto;
    margin-right: auto;
}

.dkb .browselink {
    width: 40%;
    text-align: center;
    margin: 1em 0 0 0;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 0.88em;
}

.dkb #prevpage {
    display: block;
    visibility: hidden;
    margin: 0;
}

.dkb  #nextpage {
    display: block;
    visibility: hidden;
    margin: 0;
}

.dkb #prevpage strong {
    float: left;
}

.dkb #nextpage strong {
    float: right;
}

.dkb #booknav:hover > a {
    visibility: visible;
}

.dkb .formcontainer {
    width:50%;
    float:left;
    clear:none;
    background: transparent;
}

.dkb .reviewform {
    display: block;
}
.dkb .reviewform input {
    background-color: #575757;
    color: #fff;
    opacity: 0.8;
}

.dkb .reviewform textarea {
    background-color: #575757;
    color: #fff;
    opacity: 0.8;
    height: 5em;
}

.dkb .reviewform button {
    background-color: #575757;
    border-color: #ec2a21;
    color: #fff;
    opacity: 0.8;
    padding: 5px 40px 8px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.dkb .form-input:not(:placeholder-shown):invalid:focus {
    background: #333;
}

.dkb .form-input::placeholder {
    color: #CCCCCC;
}

.dkb .review-table {
    border-spacing: .8em;
    margin: -.8em -.8em 0 -.8em;
}

.dkb .review-table td {
    padding: 1em 1em 2em 1em;
    border: 1px solid grey;
}

.dkb .review-table tr {
    position: relative;
}

/* anchor offset: default */
.dkb a.anchor {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

body.dkb {
    background-image: url('../images/katja efftin fable of a silver moon.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-color: #223344;
    color: #fff;
    font-family: opensans-regular;
}

.dkb .orderbutton {
    position: relative;
    display: block;
    margin: 1em 4em;
    text-align: center;
    font-family: 'adam_mediummedium';
    font-size: 2em;
    border: 1px solid #cf8247;
    padding: 0;
}

.dkb .orderbutton a {
    display: block;
    color: white;
    padding: 0.5em;
}

.dkb .onecol .orderbutton {
    margin: 1em 0;
}

.dkb .semitrans {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.dkb .semitrans.blur64 {
    -webkit-filter: blur(64px);
    -moz-filter: blur(64px);
    -ms-filter: blur(64px);
    -o-filter: blur(64px);
    filter: blur(64px);
}

.dkb .semitrans.grey {
    background-color: rgba(28, 45, 56, 0.4);
    right: 32px;
}

.dkb .semitrans.dark {
    background-color: rgba(10,20,25, 0.5);
}

.dkb #footer .semitrans.dark {
    background-color: rgba(10,20,25, 0);
}

.dkb .semitrans.paper {
    background-color: #f8f1e0;
    background-image: url('../images/paper.jpg');
    background-size: cover;
    opacity: 0.9;
    margin-bottom: 1em;
}

.dkb .content-container {
    position: relative;
    width: 48%;
    float: left;
    font-size: 1.07em;
    color: #353f44;
    background-color: #f9f6ee;
    padding: 3em;
    /*border: 1px solid #666;*/
    opacity: 1.0;
    /*overflow: hidden;*/
    /*pointer-events: none;*/
    font-family: junicoderegular;
}

.dkb .content-container a {
    pointer-events: auto;
}

.dkb .greyback {
    background: #223344;
    color: #efefef;
    text-align: justify;
    font-family: 'opensans-regular';
    font-family: junicoderegular;
    font-size: 1.3em;
    z-index: 2;
}
.dkb .greyback a {
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    text-decoration-color: #ddd;
}
.dkb .greyback a:hover {
    text-decoration: underline;
}

.dkb .transback {
    background: transparent;
    color: #efefef;
    text-align: justify;
    font-family: 'opensans-regular';
    font-family: junicoderegular;
    font-size: 1.3em;
    z-index: 2;
}
.dkb .transback a {
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    text-decoration-color: #ddd;
}
.dkb .transback a:hover {
    text-decoration: underline;
}

.dkb .content-container.list { padding: 0 1em 0 0; width:50%;}
.dkb .paperback {
    font-family: 'junicoderegular';
    font-size: 1.26em;
    /* depends on semitrans for background*/
    background: transparent;
    text-align: justify;
    border: none;
    container-type: inline-size;
}
.dkb .paperback a {
    color: #353f44;
    color: #4072d7;
    text-decoration: underline;
}
.dkb .paperback h3 {
    font-family: 'junicoderegular';
    width: 100%;
    text-align: center;
    color: #333;
}
.dkb .smallpad {
    padding: 0 0.5em;
    margin-top: -0.1em;
}

.dkb .book-title-block-container {
    width: 50%;
    max-width: 30em;
    display: block;
    position:relative;
    float: right;
    margin: 0 0 1em 0;
/*     border: 1px solid red; */
}

.dkb .book-title-block-container a {
    display: block;
    pointer-events: auto;
}

/* BOOK TITLE PUBLISHER */
.dkb .book-title-block-publisher {
    position: absolute;
    right: 6.5em;
    top: 6.85em;

    font-family: oranienbaumregular;
    font-size: 1.7em;
    letter-spacing: 2px;
    color: #000;
}

.dkb .book-title-block {
    font-family: 'adam_mediummedium';
    font-weight: 100;
    font-size: 2em;
    line-height: 2em;

    color: #cf8247;
/*     background-color: green; */

    position: relative;
    display: block;
    position: sticky;
    width: 100%;
    float: left;
    right: 0;

    padding: 0;
    margin: 3.5em 0 3.7em;
/*     border: 1px solid blue; */

    z-index: 2;
    pointer-events: auto;
}
.dkb .book-title-block:hover {
    color: #fff;
}
.dkb .book-title-block-line-1 {
    display: block;
    font-size: 1.3em;
    float: right;
    clear: both;
    margin-right: 2.8em;
}
.dkb .book-title-block-line-2 {
    display: block;
    font-size: 1.3em;
    float: right;
    clear: both;
    margin-right: 2em;
}
.dkb .book-title-block-line-3 {
    margin-right: 0;
    font-size: 1.3em;
    float: right;
    clear: both;
}

.dkb .book-title-block-line-3 {
    animation: 2.5s alternate line-3-slidein;
    animation-timing-function: cubic-bezier(0.175, 0.785, 0.22, 1.1);
}

@keyframes line-3-slidein {
  from {
    margin-right: 200%;
  }

  to {
    margin-right: 0;
  }
}

/* BOOK TITLE AUTHOR */

.dkb .book-title-block-author-1 {
    display: block;
    text-align: center;
    font-family: kionaregular;
    font-size: 2.3em;
    line-height: .9em;
    clear: left;
    margin: 0 auto;
    color: var(--c);
/*     border:1px solid yellow; */
}

.dkb .book-title-author-link {
    display: block;
    color: var(--c);
    --c: #eee;
}
.dkb .book-title-author-link:hover {
    text-decoration: none;
    --c: #cf8247;
}

.dkb .rotate {
    /* FF3.5+ */
    -moz-transform: rotate(90.0deg);
    /* Opera 10.5 */
    -o-transform: rotate(90.0deg);
    /* Saf3.1+, Chrome */
    -webkit-transform: rotate(90.0deg);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
    /* Standard */
    transform: rotate(90.0deg);
}

/* PREVIEWS */

.dkb .preview-block {
    position: relative;
    float: left;
    clear: both;
    border: 1px solid #445566;
    background: transparent;
    width: 16.48em;
    max-width: 16.48em;
    height: auto;

    padding: 5px 10px 5px 10px;
    margin: 0 0 1em 0;
    font-family: 'adam_mediummedium';
    font-size: 1.6em;
    /*line-height: 1.7em;*/
}

.dkb .preview-block .preview-head {
    display: block;
    font-family: kionaregular;
    color: #eee;
    text-decoration: none;
    text-decoration-color: #aaa;
    font-size: 1.3em;
    margin-bottom: 0.3em;
}

.dkb .preview-head:hover {
    text-decoration: underline;
}

.dkb .preview-block a {
    color: #cf8247;
    line-height: 1.2em;
}

.dkb .preview-block a:hover {
    text-decoration: underline;
}

.dkb .active-preview {
    color: #cf8247;
    float: right;
    text-align: end;
}

.dkb .orange-circle {
    font-family: freemonoregular;
    font-size: 0.62em;
    vertical-align: text-bottom;
    line-height: 1.65;
}

.dkb .fit-to-book-title-width {
    min-width: 0;
    width: 13em;
}
.dkb .motieven {
    float: right;
    clear: none;
}
.dkb .motieven.lefty {
    float: left;
    clear: none;
}
.dkb .motieven.lefty.both {
    float: left;
    clear: both;
}
.dkb .motieven img {
    border: 1px solid #555;
}
.dkb .motieven {
    float: right;
    clear: none;
}

.dkb .personages {
    clear: none;
}
.dkb .personages.lefty.both {
    float: left;
    clear: both;
}
.dkb .righty {
    float: right;
    clear: right;
}

.dkb .summary-item {
    display: block;
    position: relative;
    float: left;
    clear: right;
    color:#e3e3e3;
    font-size: 1.05em;
    margin: 0 0 1em 0;
    text-align: left;
    text-decoration: var(--c);
    --c: none;
}

.dkb .summary-item strong {
    position: relative;
    z-index: 2;
    opacity: 1.0;
    text-decoration: var(--c);
}

.dkb a.summary-item span {
    color: #eee;
    font-size: 0.95em;
    font-weight: normal;
    text-decoration: none !important;
}

.dkb .summary-item:hover {
    --c: underline;
}

.dkb .summary-item:hover > div img {
    outline: #cf8247 solid;
}

/* THE DANCER */
.dkb .danseuse {
    position: absolute;
    right: 190px;
    top: 2em;
    z-index: -1;
    opacity: 1.0;
    -webkit-filter: drop-shadow(-14px 16px 32px rgba(0,0,0,0.5));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=-12, OffY=12, Color='#444')";
    /*border: 1px solid red;*/
    pointer-events: auto;
}

.dkb #page-wrapper {
    min-height: 830px;
}

.dkb .container.grid-xl {
    position: relative;
}

/* OVERRIDES */

.dkb h3 {
    font-family: kionaregular;
    font-size: 1.6em;
    margin-top: 0;
    color: #eee;
}

.dkb .trans {
    background: #555;
    /*
    background-image: url('../images/back1.jpg');
    background-size: cover;
    background-position: center;
    opacity: 1;
    animation: 8.2s bgrandom infinite;
    */

    background: linear-gradient(-45deg, #FF0000, #EE2200, #DD5511, #BF8022, #88A166, #55AC88, #44BECC, #22CFFF);
	background-size: 400% 400%;
	-webkit-animation: Gradient 20s ease infinite;
	-moz-animation: Gradient 20s ease infinite;
	animation: Gradient 20s ease infinite;
}

.dkb .featherlight-close {
    position: absolute;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0px;
    border: 1px solid #fff;
    color: #fff;
    outline: black solid 1px;
    z-index: 100;
}

.dkb .shadowed img {
    -webkit-filter: drop-shadow(-10px 14px 16px rgba(0,0,0,0.6));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

.dkb .slider a {
    color: #fff;
}

/* MEDIA QUERIES */

@media (max-width: 1190px) {
    .dkb .book-title-block-container { width: 40%; }
    .dkb .danseuse { right: 40px;}
    .dkb .content-container { width: 60%; }
    .dkb .orderbutton { margin: 1em 3em; }
}

@media (max-width: 1049px) {
    .dkb .book-title-block-line-1 {
        margin-right: 2.6em;
    }
    .dkb .book-title-block-line-2 {
        margin-right: 1.8em;
    }
}

@media (max-width: 1024px) {
    .dkb .danseuse { right: 30px;}
}

@media (max-width: 970px) {
    .dkb .danseuse { right: 20px;}
}

@media (max-width: 827px) {
	.dkb .book-title-block-container { width: 38%; }
    .dkb .content-container { width: 60%; }

    .dkb .book-title-block-line-1 {
        margin-right: 2.2em;
    }
    .dkb .book-title-block-line-2 {
        margin-right: 1.6em;
    }
}

@media (max-width: 768px) {
	.dkb .book-title-block-container { width: 43%; }
    .dkb .content-container { width: 52%; }
    .dkb .paperback { padding: 2em 0.9em 2em 0.9em; }
    .dkb .danseuse { right: 10px;}
    .dkb .orderbutton { margin: 1em 0em; }
}

@media (max-width: 700px) {
	.dkb .greyback { padding: 0.2em; }
    .dkb .orderbutton { margin: 1em 0; }
    .dkb .book-title-block-line-1 {
        margin-right: 2.1em;
    }
    .dkb .book-title-block-line-2 {
        margin-right: 1.4em;
    }
}

@media (max-width: 640px) {
	.dkb .greyback { padding: 0.2em; }
}

@media (max-width: 626px) {
    .dkb .preview-block-container { width: 100%; max-width: 100%; }

    .dkb .book-title-block, .dkb .book-title-block-author-1, .dkb .book-title-block-author-2 {
/*         float: left; */
    }
    .dkb .book-title-block {
        position:static;
    }
    .dkb .book-title-block-container {
        margin-bottom: 0.5em;
    }
    .dkb .book-title-block-roman {
        left: 6.7em;
    }
	.dkb .content-container { width: 100%; }
    .dkb .book-title-block-container {
        clear: both;
        width: 100%;
        left: 0;
        font-size: 1.25em;
    }
    .dkb .book-title-block-publisher { right:auto; left:6.5em; margin-top: -2.35em;}
/*     .dkb .book-title-block { margin: 0 !important; } */
    .dkb .preview-block { width: 100%; max-width: 100%; font-size: 1.8em; /*line-height: 1.9em;*/}
    .dkb .content-container.list { width: 100%; }
    .dkb .paperback { padding: 2em; font-size: 1.38em; margin-top: 0.4em;}
    /* for now */
    .dkb .danseuse {
        display: none;
    }

    .dkb .semitrans.paper {
        opacity: .9;
    }

    /* jump to anchor: offset header, titleblock etc */
    .dkb a.anchor {
        top: 32.8em;
    }

    .dkb .slider.reviews.twocols {
        display: none;
    }
    .dkb .slider.reviews.onecol {
        display: block;
        float: right;
        clear: both;
        width: 100%;
    }
    .dkb .formcontainer {width: 100%;}

    .dkb .book-title-block-line-1 {
        margin-right: 2.2em;
    }
    .dkb .book-title-block-line-2 {
        margin-right: 1.65em;
    }
}

@media (max-width: 375px) {
    .dkb .paperback { padding: 1.5em 0.9em 1.5em 0.9em; }
}

@media (max-width: 360px) {
   .dkb .book-title-block-publisher {
       position: relative !important;
       top:0;
       left:0;
       margin-top: 17em;
       margin-bottom: -0.3em;
       /*pointer-events: none;*/
       filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
       background: none !important;
   }
   .dkb .rotate { transform: none !important; }
   .dkb a.anchor {
       top: 35.9em;
   }
}

@media (max-width: 330px) {
    .dkb a.anchor {
        top: 28em;
    }
}

@media (max-width: 325px) {
	.dkb .book-title-block-container {
        font-size: 1em;
    }
    .dkb .browselink {
        width: 30%;
    }
}

@media (max-width: 298px) {
    .dkb a.anchor {
        top: 28em;
    }
}

@media (max-width: 266px) {
	.dkb .book-title-block-container {
        font-size: .9em;
    }
    .dkb a.anchor {
        top: 24.8em;
    }
}

@media (max-width: 244px) {
	.dkb .book-title-block-container {
        font-size: .8em;
    }
    .dkb a.anchor {
        top: 21.7em;
    }
}

/* .shadowed corrections */

@media (max-height: 700px), (max-width: 700px) {
	.dkb .shadowed img {
        -webkit-filter: drop-shadow(-10px 12px 12px rgba(0,0,0,0.6));
        -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=-10, OffY=12, Color='#444')";
    }
}

@media (max-height: 500px), (max-width: 500px) {
	.dkb .shadowed img {
        -webkit-filter: drop-shadow(-8px 8px 8px rgba(0,0,0,0.5));
        -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=-8, OffY=10, Color='#444')";
    }
}