* {
    box-sizing: border-box;
}


.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

[class*="col-"] {
    float: left;
    
    border: 1px solid rgba(0,255,0,0);
}




.fcol-1 {
    width: 8.33%;
}

.fcol-2 {
    width: 16.66%;
}

.fcol-3 {
    width: 25%;
}

.fcol-4 {
    width: 33.33%;
}

.fcol-5 {
    width: 41.66%;
}

.fcol-6 {
    width: 50%;
}

.fcol-7 {
    width: 58.33%;
}

.fcol-8 {
    width: 66.66%;
}

.fcol-9 {
    width: 75%;
}

.fcol-10 {
    width: 83.33%;
}

.fcol-11 {
    width: 91.66%;
}

.fcol-12 {
    width: 100%;
}

[class*="fcol-"] {
    float: left;
    border: 1px solid rgba(255,0,0,0);
}


.row {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

    .row::after {
        content: "";
        clear: both;
        display: table;
    }




@media only screen and (max-width: 899px) {
    /* For mobile phones: */
    [class^="col-"] {
        width: 100%;
    }
}


@media only screen and (max-width: 899px) {
    .desktop-only {
        display: none;
    }

    .main-body {
        position: absolute;
        top: 55px;
        left: 0;
        right: 0;
        bottom: 70px;
        text-align: center;
        font-size: 23px;
        overflow: auto;
    }

    .main-survey-body {
    line-height:35px;
    font-size:35px;
    }

        .main-survey-body input[type="radio"] {
        scale:1.5;
        vertical-align:middle;
        
        }

        .main-survey-body .button {
       padding:20px;
            }


        .footer-panel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            min-height: 50px;
            background-color: #101010;
            color: #808080;
            overflow: auto;
        }

    .scroll-panel {
        min-height:700px;
        
    }

    .navbar {
        height: 55px;
        background-image: linear-gradient(to bottom, #222222, #111111);
        text-align: center;
        font-size: 0px;
        
    }


}


@media only screen and (min-width: 900px) {
    .mobile-only {
        display: none;
    }


    .main-body {
        position: absolute;
        top: 135px;
        left: 0;
        right: 0;
        bottom: 55px;
        text-align: center;
        font-size: 23px;
        overflow: auto;
    }

    .scroll-panel {
        position: absolute;
        bottom: 50px;
        top: 192px;
        left: 0;
        right: 0;
        overflow: auto;
        padding-left: calc(100vw - 100%);
    }

    .navbar {
        height: 55px;
        background-image: linear-gradient(to bottom, #222222, #111111);
        text-align: center;
        font-size: 0px;
        padding-left: calc(100vw - 100%);
    }



    .scroll-offset {
        display: block;
        width: calc(100vw - 34px);
        text-align: center;
        padding-left: 34px;
    }

    .footer-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: #101010;
        color: #808080;
        overflow: auto;
    }


    .top-panel {
        bottom: 50px;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;

    }

}