
@media print {

    @page {
        size: A4 landscape;
    }

    /*html {*/
    /*height: 100vh;*/
    /*width: 100vw;*/
    /*font-size: 30px;*/
    /*}*/
    #wordmapgrid {
        font-family: 'Albert Sans', Arial, Helvetica, sans-serif !important;
        width: 98%;
        height: 98%;
    }

    #wordmapgrid row {
        margin-bottom: 6vh;
        margin-bottom: calc(var(--vh, 1vh) * 6);
    }

    #wordmapgrid col {
        vertical-align: middle;
    }

    #wordmapgrid img {
        min-height: 23vh;
        min-height: calc(var(--vh, 1vh) * 23);
        max-height: 23vh;
        max-height: calc(var(--vh, 1vh) * 23);
        z-index: -1;
        border-style: solid;
    }

    /*#wordmapgrid label {*/
    /*font-size: large;*/
    /*}*/
    #wordmapgrid p {
        font-weight: bold;
        color: blue;
        /*font-size: large;*/
    }

    .is-table-row {
        display: table;
    }

    .is-table-row [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 22vh;
        height: calc(var(--vh, 1vh) * 22);
    }

    .oval-thought {
        position: relative;
        width: 23vw;
        padding: 1vh 1vw;
        padding: calc(var(--vh, 1vh) * 1) 1vw;
        margin: 1em auto 8vh;
        margin: 1em auto calc(var(--vh, 1vh) * 8);
        text-align: center;
        color: black;
        background: #075698;
        /* css3 */
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
        background: -moz-linear-gradient(#2e88c4, #075698);
        background: -o-linear-gradient(#2e88c4, #075698);
        background: #eac0b9;
        /*
        NOTES:
        -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
        -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
        Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
        */
        -webkit-border-top-left-radius: 220px 120px;
        -webkit-border-top-right-radius: 220px 120px;
        -webkit-border-bottom-right-radius: 220px 120px;
        -webkit-border-bottom-left-radius: 220px 120px;
        -moz-border-radius: 220px / 120px;
        border-radius: 220px / 120px;
        /* border: black; */
        /* border-width: 1px; */
    }

    /* creates the larger circle */
    .oval-thought:before {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50px;
        width: 30px;
        height: 30px;
        background: #eac0b9;
        /* css3 */
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
    }

    /* creates the smaller circle */
    .oval-thought:after {
        content: "";
        position: absolute;
        bottom: -30px;
        left: 30px;
        width: 15px;
        height: 15px;
        background: #eac0b9;
        /* css3 */
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }


    .navgrid_subcat_item {
        text-align: center;
    }
}
