@media print{
    @page {size: landscape}

    .container {
        width: 100%;
        max-width: 100%;
    }
}

#monster-image-dest, #treasure-image-dest {
    mix-blend-mode: darken;
    position: absolute;
    right: 8.4%;
    top: 50%;
    max-width: 46%;
    max-height: 50%;
}

#header {
    display: none;
}

#cardTab {
    display: none;
}

.print-hidden, div.btn-container, #CookiebotWidget, a.kofi-button, .floatingchat-container-wrap, .floatingchat-container-wrap-mobi {
    display: none !important;
}

.overlay {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: lightgray;
    font-family: arial, sans-serif;
    font-size: 13px;
    color: #000;
}

.whq-card {
        width: 59.2mm;
        height: 91.2mm;
        font-size: 6px;
        margin: 64px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.whq-card-back {

        margin-left: 88px;
}

.card-wrapper {
    background-image: url('images/crop-and-registration-marks.png') !important;
    background-repeat: no-repeat;
}

.dungeon {
    background-image: url('images/front/blank_dungeon_card.png') !important;
}

.dungeon-back {
    background-image: url('images/back/dungeon.png') !important;
}

#dungeon-image, #monster-image, #treasure-image {
    position: absolute;
    bottom: 20%;
    left: 50%;
    width: 100%;
    z-index: 1;
}

#treasure-image {
    bottom: 29%;
}

#dungeon-image img, #monster-image img, #treasure-image img {
    transform: translateX(-50%);
    width: 46%;
}

#image-control, #monster-image-control, #treasure-image-control {
    position: absolute;
    transform: translateX(-50%);
    background-color: lightgray;
    width: 50%;
    z-index: 3;
    padding: 0.5rem;


        display: none;

}

.title {
    position: absolute;
    height: 7%;
    display: flex;
    line-height: 1;
    padding-top: 2%;
    justify-content: center;
    flex-direction: column;
    top: 10%;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Caslon Antique Regular', serif;
    font-size: 2em;
}

.treasure-special {
    position: absolute;
    top: 90%;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.3em;
}

.body {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.9375em;
    color: rgb(0,0,0);
    top: 18.43%;
    left: 15.4%;
    width: 69.4%;
}

.event-description {
    font-size: 1.9375em;
    color: rgb(0,0,0);
    top: 18.43%;
    left: 15.4%;
    width: 69.4%;
    position: absolute;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style: italic;
}

.event-rules {
    font-weight: normal;
    font-style: normal;
}

.reference {
    position: absolute;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
}

.cardtype {
    position: relative;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    top: 84.4%;
    font-size: 1.3125em;
    text-align: center;
    text-transform: uppercase;
}

.tick {
    position: absolute;
    @media print {
        width: 4%;
    }
}

.treasure-row {
    top: 84%
}

.event-row {
    top: 89%;
}

.yes-column {
    left: 52%
}

.no-column {
    left: 65.5%;
}

.one-to-three-column {
    left: 80%;
}

.dungeon .title {
    color: rgb(236, 72, 21);
}

.dungeon .title:hover .overlay,
.dungeon .body:hover .overlay,
.dungeon .cardtype:hover .overlay,
.event .title:hover .overlay,
.event .event-description:hover .overlay,
.monster .title:hover .overlay,
.monster .rules:hover .overlay,
.nomonster .title:hover .overlay,
.nomonster .rules:hover .overlay,
.treasure .title:hover .overlay,
.treasure .body:hover .overlay,
.magic .title:hover .overlay,
.magic .body:hover .overlay,
.magic .rules:hover .overlay
{
    display: block;
}

.event .title {
    color: rgb(0,0,0);
    top: 7%;
}

.monster .title, .nomonster .title {
    text-align: left;
    top: 5%;
    left: 39%;
}

.num-monsters {
    font-family: 'Caslon Antique Regular', serif;
    font-size: 2em;
    top: 10.8%;
    left: 36%;
}

.stats {
    text-transform: uppercase;
    font-family: 'Caslon Antique Regular', serif;
    font-size: 1.8em;
}

.wounds {
    top: 17.4%;
    left: 54%
}
.move {
    top: 20.5%;
    left: 54%
}
.ws {
    top: 23.5%;
    left: 54%
}
.monster .bs {
    display: none;
}
.nomonster .bs {
    display: block;
    top: 26.6%;
    left: 54%
}
.monster .strength {
    top: 26.6%;
    left: 54%
}
.nomonster .strength {
    top: 29.7%;
    left: 54%
}
.monster .toughness {
    top: 29.7%;
    left: 54%
}
.nomonster .toughness {
    top: 32.8%;
    left: 54%
}
.monster .attacks {
    top: 32.8%;
    left: 54%
}
.nomonster .attacks {
    top: 39%;
    left: 54%
}
.monster .armour {
    display: none;
}
.nomonster .armour {
    display: block;
    top: 42.1%;
    left: 54%
}

.nomonster #monster-image {
    display: none;
}

.monster .initiative {
    display: none;
}

.nomonster .initiative {
    display: block;
    top: 35.9%;
    left: 54%
}

.tohit {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    top: 41.9%;
}

.nomonster .tohit {
    top: 51.9%;
}

#hit-0 {
    left: 38.2%;
}

#hit-1 {
    left: 43.4%;
}

#hit-2 {
    left: 48.8%;
}

#hit-3 {
    left: 54.2%;
}

#hit-4 {
    left: 59.6%;
}

#hit-5 {
    left: 65%;
}

#hit-6 {
    left: 70.3%;
}

#hit-7 {
    left: 75.7%;
}

#hit-8 {
    left: 81%;
}

#hit-9 {
    left: 86.4%;
}

.rules {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.9375em;
    color: rgb(0,0,0);
    top: 50%;
    left: 12.4%;
    width: 75.2%
}

.nomonster .rules {
    top: 61%;
    left: 10%;
    width: 80%;
}

.value {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: rgb(0,0,0);
    top: 86%;
    left: 7%;
    width: 20%;
    text-align: center;
}

.denomination {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: rgb(0,0,0);
    top: 89.5%;
    left: 13.5%;
    line-height: 1;
}

.treasure .value {
    top: 80%;
}

.treasure .denomination {
    top: 83.5%;
}

.event {
    background-image: url('images/front/event.png') !important;
}

.event-back {
    background-image: url('images/back/event.png') !important;
}

.monster {
    background-image: url('images/front/alt_monster_event.png') !important;
}

.nomonster {
    background-image: url('images/front/monster_event.png') !important;
}

.treasure {
    background-image: url('images/front/treasure.png') !important;
}

.treasure-back {
    background-image: url('images/back/treasure.png') !important;
}

.treasure .title {
    font-size: 3em;
    top: 8%;
}

.treasure.dungeon-room .title, .treasure.dungeon-room .subtitle, .treasure.dungeon-room .treasure-special {
    color: rgb(6, 157, 202);
}

.treasure.objective-room .title, .treasure.objective-room .subtitle, .treasure.objective-room .treasure-special {
    color: rgb(236, 72, 21);
}

.treasure .restriction {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    color: rgb(0,0,0);
    background-color: rgb(200, 234, 240);
    border: 1px solid rgb(0,0,0);
    position: absolute;
    top: 79.5%;
    left: 27%;
    width: 62%;
    padding: 2%;
}

.treasure .subtitle {
    font-size: 2em;
    position: absolute;
    top: 6%;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Caslon Antique Regular', serif;
}

.magic {

}

.magic-back {
    background-image: url('images/back/spell.png') !important;
}

.attack {
    background-image: url('images/front/attack.png') !important;
}

.defence {
    background-image: url('images/front/defence.png') !important;
}

.healing {
    background-image: url('images/front/healing.png') !important;
}

.special {
    background-image: url('images/front/special.png') !important;
}

.magic .title {
    top: 9.2%;
}

.power {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    position: absolute;
    top: 8.3%;
    color: rgb(255,255,255);
    left: 14.7%;
    font-size: 4em;
    width: 10%;
    text-align: center;
}

.magic .body {
    font-weight: normal;
    font-style: italic;
}

.magic .reference {
    font-style: normal;
}

.magic-type-text {
    position: absolute;
    top: 87.3%;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: "Caslon Antique Regular", serif;
    text-transform: uppercase;
    font-size: 1.3em;
    color: rgb(0,0,0);
}