@media all and (max-width: 1440px) and (min-width: 250px) {

    body, .qType, .txtfld {
        font-size: 10pt;
        font-family: 'Open Sans', sans-serif;
    }

    .wrap {
        background-image: linear-gradient(white, rgba(99,189,238));
        border: 1px solid black;
        padding: 10px;
        margin: 0 auto;
        min-width: 250px;
        max-width: 320px;
    }


    .imgHdr {
        padding-bottom: 20px;
    }

    div.calc {
        background-color: white;
        padding: 10px;
        border: 1px solid #878787;
        border-radius: 4px; /* future proofing */
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -khtml-border-radius: 4px; /* for old Konqueror browsers */
    }

    div.calc > div {
        display: block;
        padding-top: 10px;
    }

    .qType {
        border: 0px;
        width: 100%;
        height: 25px;
        background-color: #f0f0f0;
    }

    div.inputfields > div {
        display: inline-block;
        width: 49%;
    }

        div.inputfields > div:last-child {
            text-align: right;
        }

    .txtfld {
        border: 1px solid #666;
        width: 100%;
        height: 25px;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        text-align: right;
        background-color: #f0f0f0;
    }

    .result {
        padding: 20px 0;
        text-align: center;
        margin: 0 auto;
    }

    .sumflds > div {
        display: inline-block;
        line-height: 1.25;
    }

    .btnPrint {
        width: 100px;
        margin: 0 auto;
        color: white;
        padding: 5px;
        font-size: 9pt;
        text-align: center;
        cursor: pointer;
        border: 1px solid navy;
        background-color: #104183;
        border-radius: 4px; /* future proofing */
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -khtml-border-radius: 4px; /* for old Konqueror browsers */
    }

/*********** INDICATIVE FIGURES BEGIN **********/

.collapse {
    cursor: pointer;
    display: block;
    background: #cdf;
}

.collapse + input {
    display: none; /* hide the checkboxes */
}

.collapse + input + div {
    display: none;
}

.collapse + input:checked + div {
    display: block;
}
/*********** INDICATIVE FIGURES END **********/


input#show, input#hide {
    display: none;
}

div#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
}

input#show:checked ~ .show:before {
    content: ""
}

input#show:checked ~ .hide:before {
    content: "Other indicative figures (Hide):";
    
}
}