#viewport {
    height: 250px;
    overflow:hidden;
}
#inner-wrapper {

}

.inner h2 {
    font-size: 3.7em;
}

.inner p {
    color: var(--text-color-dark);
}

#calc-result{

}

.quest-headline {
    font-family: 'Oswald', sans-serif;
    font-weight: 200;
    margin: 10px 0 10px 0;
    border: none;
    color: var(--main-color);
}

#question-q1 {
    min-height:250px;
    /* padding: 25px 0 25px 0; */
}
#question-q2 {
    min-height:250px;
    /* padding: 25px 0 25px 0; */
}
#question-q3 {
    min-height:250px;
    /* padding: 25px 0 25px 0; */
}

#q1, #q2, #q3  {
    text-align:center;
    background:var(--light-color-sec);
    /* float:left;
    width:100%; */
}
#q1 p, #q2 p, #q3 p {
    margin: 10px 40px;
    font-size: 1.3em;
    line-height: 1.8em;
    color: var(--main-color);
}

.btn {
    margin: 5px 5px;
}

#img {
    /* background-color: rgb(88, 222, 255); */
}

#icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    background: var(--sec-color);
}



#icon img {
    width: 100%;
}

#calc-row {
    background: var(--light-color);
}



/*
Properties block
*/
#calc-results {
    font-size: .9em;
}

#calc-results .inner {
    height: 200px !important;
    margin: 30px 0 0px 0px;
    font-family: 'Oswald', sans-serif;
}

dl {
    display:flex;
    border-bottom: 2px dotted var(--main-color);
    justify-content:space-between;
    margin-bottom: 5px;
}
.properties {
    margin-bottom:25px;
}

dt, dd {
    background:var(--light-color);
    margin-bottom:-5px;
}
dt {
    font-weight:200;
    color:var(--main-color);
    padding-right:5px;
    font-weight:normal;
}
dd {
    /* font-weight:700; */
    padding-left:5px;
    float:left;
}

.propLine dt,  .propLine dd{
    /* background:rgb(247, 233, 217); */
    margin-bottom:0px;
}

/* Receipt */
#receipt {
    display:flex;
    /* width:100%; */
}

#receipt-body {
    font-family: 'Oswald', sans-serif;
    min-height:250px;
    width:auto;
    padding: 20px 50px;
    background: var(--light-color-sec);
}

#receipt-body h2 {
    font-size: 3em;
    /* margin: 20px 0 10px 0; */
    color: var(--text-color-dark);
    display: table;
}

#receipt-price {
    /* margin: -10px 0 10px 0; */
    font-family: 'Oswald', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#receipt-price .price-value{
    font-size: 2.2em;
    font-weight: 200;
    /* padding: 20px 0 10px 0; */
    line-height: 1em;
    background: -webkit-linear-gradient(var(--sec-color), var(--main-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#receipt-price .price-period{
    font-size:1em;
    line-height: 1.3em;
    font-weight: 200;
}

.final-description {
    font-weight: 200;
    /* margin: 5px 0 10px 0; */
    font-size: 1.3em;
}

.btn-order {
    margin-left: -5px;
    /* width: 100%; */
}

/* NAV */

#quiz-nav {

}

#quiz-nav .future,
#quiz-nav .current,
#quiz-nav .past {
    font-weight:normal;

}

#quiz-nav .future {
   background: none;
   border: var(--sec-color) 1px dotted;
   color: var(--sec-color);
}


#quiz-nav .current {
    background: var(--main-color);
    color: var(--text-color-light);
}

#quiz-nav .past {
    background: var(--sec-color);
    color: var(--text-color-light);
    cursor: pointer;
}

@media
only screen
and (max-width : 1200px) {
    .inner h2 {
        font-size: 3em;
    }
    #viewport {}
    #calc-results {}
    #inner-wrapper {}
    #calc-result {}
    .quest-headline {
        font-size: 2em;
    }
    #question-q1 {}
    #question-q2 {
        /* padding: 10px */
    }
    #question-q3 {
        /* padding-top: 30px; */
    }
    #q1, #q2, #q3 {}
    #q1 p, #q2 p, #q3 p {
        font-size: 1.1em;
        line-height: 1.2em;
    }
    .btn {
        font-size: .9em;
    }
    #img {}
    #icon {}
    #calc-results .inner {
        padding: 0 10px 0 0px;
    }


    /* Receipt */
    #receipt-body {
        padding: 30px 35px;
    }
    #receipt-body h2 {}
    #receipt-price {
    }
    #receipt-price .price-value {
        font-size: 2.3em;
    }
    #receipt-price .price-period{}
    .final-description {
        font-size: 1.3em;
        line-height: 1.3em;
    }
    .btn-order {}
    dt, dd {font-size: .8em;}
}

@media
only screen
and (max-width : 992px) {
    #viewport {}
    #calc-results {font-size: .6em;}
    #inner-wrapper {}
    #calc-result {}
    .quest-headline {}
    #question-q1 {
        margin: 0;
        padding-top: 0px;
    }
    #question-q2 {
        margin: 0;
        padding-top: 0px;
    }
    #question-q3 {
        margin: 0;
        padding-top: 0px;
    }
    #q1, #q2, #q3 {}
    #q1 p, #q2 p, #q3 p {
        font-size: .8em;
        line-height: 1.1em;
    }
    .btn {}
    #img {}
    #icon {}
    #calc-results .inner {}


    /* Receipt */
    #receipt-body {}
    #receipt-body h2 {font-size: 2.4em;}
    #receipt-price {}
    #receipt-price .price-value {    font-size: 1.4em;}
    #receipt-price .price-period{}
    .final-description {    font-size: 1.1em;}
    .btn-order {}
    dl {}
    .properties {}
    dt, dd {}
    dt {}
    dd {}
    .propLine dt,  .propLine dd{}


}

@media
only screen
and (max-width   : 768px)
and (orientation : portrait) {
    #viewport {}
    #calc-results {}
    #inner-wrapper {}
    #calc-result {}
    .quest-headline {}
    #question-q1 {}
    #question-q2 {}
    #question-q3 {}
    #q1, #q2, #q3 {}
    #q1 p, #q2 p, #q3 p {font-size: 1em;}
    .btn {    font-size: .5em;}
    #img {}
    #icon {}
    #calc-results .inner {}


    /* Receipt */
    #receipt-body {}
    #receipt-body h2 {}
    #receipt-price {}
    #receipt-price .price-value {}
    #receipt-price .price-period{}
    .final-description {    font-size: 1.1em;}
    .btn-order {}
    dl {}
    .properties {}
    dt, dd {}
    dt {}
    dd {}
    .propLine dt,  .propLine dd{}
    @media
    only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation      : portrait) {
        #viewport {}
        .inner h2 {
            font-size: 2.2em;
        }
        #calc-results {
            padding: 0;
            margin: 45px 0 0 0px;
        }
        #inner-wrapper {}
        #calc-result {}
        .quest-headline {
            font-size: 1.7em;
        }
        #question-q1 {
            padding: 20px;
        }
        #question-q2 {
            padding: 20px;
        }
        #question-q3 {
            padding: 20px;
        }
        #q1, #q2, #q3 {}
        #q1 p, #q2 p, #q3 p {
            font-size: 1em;
            padding: 0;
            margin: 4px;
        }
        .btn {}
        #img {}
        #icon {}
        #calc-results .inner {
            padding: 15px;

            margin: 0px 0px 0px 0px;
            font-size: 0.8em;
        }


        /* Receipt */
        #receipt-body {
            padding: 44px 26px;
        }
        #receipt-body h2 {font-size: 2.3em;}
        #receipt-price {}
        #receipt-price .price-value {    font-size: 1.7em;}
        #receipt-price .price-period{}
        .final-description {    font-size: 1.1em;}
        .btn-order {}
        dl {}
        .properties {}
        dt, dd {}
        dt {}
        dd {}
        .propLine dt,  .propLine dd{}
    }
}

/* iPad in Landscape */

@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation      : andscape) {
    #viewport {}
    #calc-results {}
    #inner-wrapper {}
    #calc-result {}
    .quest-headline {}
    #question-q1 {}
    #question-q2 {}
    #question-q3 {}
    #q1, #q2, #q3 {}
    #q1 p, #q2 p, #q3 p {}
    .btn {}
    #img {}
    #icon {}
    #calc-results .inner {}


    /* Receipt */
    #receipt-body {}
    #receipt-body h2 {}
    #receipt-price {}
    #receipt-price .price-value {}
    #receipt-price .price-period{}
    .final-description {}
    .btn-order {}
    dl {}
    .properties {}
    dt, dd {}
    dt {}
    dd {}
    .propLine dt,  .propLine dd{}
}

@media
only screen
and (max-width   : 768px)
and (orientation : landscape) {
    #viewport {}
    #calc-results {}
    #inner-wrapper {}
    #calc-result {}
    .quest-headline {}
    #question-q1 {padding: 30px 0;}
    #question-q2 {padding: 30px 0;}
    #question-q3 {padding: 30px 0;}
    #q1, #q2, #q3 {}
    #q1 p, #q2 p, #q3 p {}
    .btn {}
    #img {}
    #icon {}
    #calc-results .inner {}


    /* Receipt */
    #receipt-body {}
    #receipt-body h2 {}
    #receipt-price {}
    #receipt-price .price-value {}
    #receipt-price .price-period{}
    .final-description {}
    .btn-order {}
    dl {}
    .properties {}
    dt, dd {}
    dt {}
    dd {}
    .propLine dt,  .propLine dd{}
}

@media
only screen
and (max-width : 480px) {
    #viewport {}
    #calc-results {}
    #inner-wrapper {}
    #calc-result {}
    .quest-headline {}
    #question-q1 {
        margin: 0;
        /* padding-top: 12px; */
    }
    #question-q2 {
            margin: 0;
            /* padding-top: 12px; */
    }
    #question-q3 {
        margin: 0;
        /* padding-top: 12px; */
    }
    #q1, #q2, #q3 {
        padding: 0;
        /* margin: 0;} */
    #q1 p, #q2 p, #q3 p {
        font-size:.7em;
    }
    .btn {}
    #img {}
    #icon {}
    #calc-results .inner {}


    /* Receipt */
    #receipt-body {}
    #receipt-body h2 {
        font-size: 2.2em;
    }
    #receipt-price {}
    #receipt-price .price-value {
        font-size: 1.5em;
    }
    #receipt-price .price-period{}
    .final-description {
        font-size: 1.1em;
    }
    .btn-order {}
    dl {}
    .properties {}
    dt, dd {}
    dt {}
    dd {}
    .propLine dt,  .propLine dd{}
}

@media
only screen
and (max-width : 320px) {
    #viewport {}
    #calc-results {}
    #inner-wrapper {}
    #calc-result {}
    .quest-headline {font-size: 1em; font-weight:400;}
    #question-q1 {}
    #question-q2 {}
    #question-q3 {}
    #q1, #q2, #q3 {}
    #q1 p, #q2 p, #q3 p {color: var(--text-color-dark);}
    .btn {font-size: .7em;}
    #img {}
    #icon {}
    #calc-results .inner {}


    /* Receipt */
    #receipt-body {}
    #receipt-body h2 {}
    #receipt-price {}
    #receipt-price .price-value {    font-size: 1.3em;}
    #receipt-price .price-period{}
    .final-description {}
    .btn-order {}
    dl {}
    .properties {}
    dt, dd {}
    dt {}
    dd {}
    .propLine dt,  .propLine dd{}
}