@font-face {
    font-family: 'db_helvethaica_x75_bd';
    src: url('db_helvethaica_x_bd_v3.2-webfont.woff2') format('woff2'),
        url('db_helvethaica_x_bd_v3.2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'db_helvethaica_x53_ext';
    src: url('db_helvethaica_x_ext_v3.2-webfont.woff2') format('woff2'),
        url('db_helvethaica_x_ext_v3.2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'db_helvethaica_x53_ext';
}







section {
    height: 100vh;
    background: url(../image/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

}




html {
    background-color: #65A4DF;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.db_helvethaica_x75_bd {
    font-family: 'db_helvethaica_x75_bd';
    font-size: 5rem;
    color: #0A3E7F;
}

.db_helvethaica_x53_ext {
    font-family: 'db_helvethaica_x53_ext';
    font-size: 10rem;
    color: #0A3E7F;
}

.switch-field {
    display: flex;
    overflow: hidden;
    border-radius: 5px;

}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;


}

.switch-field label {
    background-color: #FAFCFE;

    color: rgba(0, 0, 0, 0.6);
    font-size: 1.8rem;
    line-height: 2;
    text-align: center;
    width: 100%;
    margin-right: -1px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 15px -12px inset, rgba(0, 0, 0, 0.25) 0px 18px 36px -18px inset;
    transition: all 0.1s ease-in-out;
    font-family: 'db_helvethaica_x53_ext';


}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked+label {
    color: #FAFCFE !important;
    background-color: #032744;
    box-shadow: none;

}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;

}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}

/* This is just for CodePen. */

.form {
    max-width: 600px;
    font-weight: normal;
    line-height: 1.625;
    margin: 8px auto;
    padding: 16px;
}

h2 {
    font-size: 18px;
    margin-bottom: 8px;
}




/* login */
.btn-login {
    width: 15rem !important;
}





@media screen and (min-width:320px) {

    /* smartphones, iPhone, portrait 480x320 phones */

    #login-logo {
        width: 70% !important;
    }

    #btn-login {
        width: 40%;
        margin-top: 20px;
        cursor: pointer;
    }

    #login-section {
        width: 80%;
    }

    /* home */

    #home-logo {
        width: 60% !important;
    }

    #home-text {
        width: 75% !important;
    }

    #btn-goto {
        width: 30% !important;
        cursor: pointer;
    }

    /* premission */

    #header-premission {
        width: 80%;
        margin-bottom: 0.5rem;

    }

    #text-premission {
        width: 90%;
        margin-bottom: 1rem;
    }

    #btn-consent {
        width: 25%;
        cursor: pointer;
    }

    /* form */

    #header-form-consent {
        width: 80%;
        margin-bottom: 0.5rem;
    }

    #text-form-consent {
        width: 75%;
        margin-bottom: 1rem;
    }

    #btn-next {
        width: 25%;
        cursor: pointer;
    }

    #text-form-provide {
        width: 75%;
        margin-top: 1.5rem;
    }

    #btn-start {
        width: 50%;
        margin-top: 1rem;
        cursor: pointer;
    }

    #section-form {
        width: 75%;
    }

    /* video */

    #video_q {
        width: 60%;
        position: absolute;
        top: -1%;
        margin-top: 17%;
        z-index: 8;
    }

    #frame_q {
        position: absolute;
        width: 90%;
        top: -1%;
        z-index: 9;
    }

    #line {

        position: absolute;
        width: 100%;
        z-index: 0;
        top: -1%;
        margin-top: 29%;

    }

    #btn-true {
        position: absolute;
        width: 18%;
        z-index: 10;
        top: -1%;
        margin-top: 48%;
        margin-right: 25%;
        cursor: pointer;
    }

    #btn-false {
        position: absolute;
        width: 18%;
        z-index: 10;
        top: -1%;
        margin-top: 48%;
        margin-left: 25%;
        cursor: pointer;
    }

    /* sum */
    #sum-logo {
        width: 90%;
    }


}

@media screen and (min-width:481px) {

    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    /* smartphones, iPhone, portrait 480x320 phones */
    #login-logo {
        width: 60% !important;
    }

    #btn-login {
        width: 30%;
        cursor: pointer;
    }

    #login-section {
        width: 80%;
    }

    /* home */


    #home-logo {
        width: 60% !important;
    }

    #home-text {
        width: 75% !important;
    }

    #btn-goto {
        width: 30% !important;
        cursor: pointer;
    }

    /* premission */

    #header-premission {
        width: 80%;
        margin-bottom: 0.5rem;

    }

    #text-premission {
        width: 90%;
        margin-bottom: 1rem;
    }

    #btn-consent {
        width: 25%;
        cursor: pointer;
    }

    /* form */

    #header-form-consent {
        width: 80%;
        margin-bottom: 0.5rem;
    }

    #text-form-consent {
        width: 75%;
        margin-bottom: 1rem;
    }

    #btn-next {
        width: 25%;
        cursor: pointer;
    }

    #text-form-provide {
        width: 75%;
        margin-top: 1.5rem;
    }

    #btn-start {
        width: 35%;
        margin-top: 1rem;
        cursor: pointer;
    }

    #section-form {
        width: 75%;
    }

    /* video */

    #video_q {
        width: 60%;
        position: absolute;
        top: -1%;
        margin-top: 17%;
        z-index: 8;
    }

    #frame_q {
        position: absolute;
        width: 90%;
        top: -1%;
        z-index: 9;
    }

    #line {

        position: absolute;
        width: 100%;
        z-index: 0;
        top: -1%;
        margin-top: 29%;

    }

    #btn-true {
        position: absolute;
        width: 18%;
        z-index: 10;
        top: -1%;
        margin-top: 48%;
        margin-right: 25%;
        cursor: pointer;
    }

    #btn-false {
        position: absolute;
        width: 18%;
        z-index: 10;
        top: -1%;
        margin-top: 48%;
        margin-left: 25%;
        cursor: pointer;
    }

    /* sum */
    #sum-logo {
        width: 90%;
    }





}

@media screen and (min-width:641px) {

    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    #login-logo {
        width: 40% !important;
    }

    #btn-login {
        width: 25%;
        cursor: pointer;
    }

    #login-section {
        width: 80%;
    }

    .footer-home-m {
        display: none;
    }


    /* home */

    #home-logo {
        width: 30% !important;
    }

    #home-text {
        width: 55% !important;

    }

    #btn-goto {
        width: 25% !important;
        cursor: pointer;
    }

    /* premission */

    #header-premission {
        width: 80%;
        margin-bottom: 0.5rem;

    }

    #text-premission {
        width: 90%;
        margin-bottom: 1.5rem;
    }

    #btn-consent {
        width: 20%;
        cursor: pointer;
    }

    /* form */

    #header-form-consent {
        width: 80%;
        margin-bottom: 0.5rem;
    }

    #text-form-consent {
        width: 75%;
        margin-bottom: 1rem;
    }

    #btn-next {
        width: 25%;
        cursor: pointer;
    }

    #text-form-provide {
        width: 50%;
        margin-top: 1.5rem;
    }

    #btn-start {
        width: 25%;
        margin-top: 1rem;
        cursor: pointer;
    }

    #section-form {
        width: 100%;
    }

    .switch-field label {

        line-height: 1.7;
        margin-top: 0.2rem;

    }

    /* q1 */

    #video_q {
        width: 45%;
        position: absolute;
        top: -1%;
        margin-top: 14%;
        z-index: 8;
    }

    #frame_q {
        position: absolute;
        width: 70%;
        top: -1%;
        z-index: 9;
    }

    #line {

        position: absolute;
        width: 100%;
        z-index: 0;
        top: -1%;
        margin-top: 21%;

    }

    #btn-true {
        position: absolute;
        width: 15%;
        z-index: 10;
        top: -1%;
        margin-top: 38%;
        margin-right: 20%;
        cursor: pointer;
    }

    #btn-false {
        position: absolute;
        width: 15%;
        z-index: 10;
        top: -1%;
        margin-top: 38%;
        margin-left: 20%;
        cursor: pointer;
    }

    /* sum */

    #sum-logo {
        width: 90%;
    }



}

@media screen and (min-width:961px) {

    /* tablet, landscape iPad, lo-res laptops ands desktops */
    #login-logo {
        width: 40% !important;
    }

    #btn-login {
        width: 25%;
        cursor: pointer;
    }

    #login-section {
        width: 60%;
    }

    .footer-home-m {
        display: none;
    }

    /* home */

    #home-logo {
        width: 30% !important;
    }

    #home-text {
        width: 55% !important;
        margin-bottom: 1rem;
    }

    #btn-goto {
        width: 25% !important;
        cursor: pointer;
    }

    /* premission */

    #header-premission {
        width: 80%;
        margin-bottom: 0.5rem;

    }

    #text-premission {
        width: 90%;
        margin-bottom: 1.5rem;
    }

    #btn-consent {
        width: 20%;
        cursor: pointer;
    }

    /* form */

    #header-form-consent {
        width: 80%;
        margin-bottom: 0.5rem;
    }

    #text-form-consent {
        width: 70%;
        margin-bottom: 1rem;
    }

    #btn-next {
        width: 20%;
        cursor: pointer;
    }

    #text-form-provide {
        width: 50%;
        margin-top: 3rem;
    }

    #btn-start {
        width: 25%;
        margin-top: 2rem;
        cursor: pointer;
    }

    #section-form {
        width: 50%;
    }

    /* q1 */

    #video_q {
        width: 45%;
        position: absolute;
        top: -1%;
        margin-top: 14%;
        z-index: 8;
    }

    #frame_q {
        position: absolute;
        width: 70%;
        top: -1%;
        z-index: 9;
    }

    #line {

        position: absolute;
        width: 100%;
        z-index: 0;
        top: -1%;
        margin-top: 21%;

    }

    #btn-true {
        position: absolute;
        width: 15%;
        z-index: 10;
        top: -1%;
        margin-top: 38%;
        margin-right: 20%;
        cursor: pointer;
    }

    #btn-false {
        position: absolute;
        width: 15%;
        z-index: 10;
        top: -1%;
        margin-top: 38%;
        margin-left: 20%;
        cursor: pointer;
    }

    /* sum */

    #sum-logo {
        width: 90%;
    }


}

@media screen and(min-width:1025px) {

    /* big landscape tablets, laptops, and desktops */
    #login-logo {
        width: 40% !important;
    }

    #btn-login {
        width: 25%;
        cursor: pointer;
    }

    .footer-home-m {
        display: none;
    }

    /* home */

    #login-section {
        width: 60%;
    }


    #home-logo {
        width: 30% !important;
    }

    #home-text {
        width: 55% !important;
        margin-bottom: 1rem;
    }

    #btn-goto {
        width: 25% !important;
        cursor: pointer;
    }

    /* premission */

    #header-premission {
        width: 80%;
        margin-bottom: 0.5rem;

    }

    #text-premission {
        width: 90%;
        margin-bottom: 1.5rem;
    }

    #btn-consent {
        width: 20%;
        cursor: pointer;
    }

    /* form */

    #header-form-consent {
        width: 80%;
        margin-bottom: 0.5rem;
    }

    #text-form-consent {
        width: 70%;
        margin-bottom: 1rem;
    }

    #btn-next {
        width: 20%;
        cursor: pointer;
    }

    #text-form-provide {
        width: 50%;
        margin-top: 3rem;
    }

    #btn-start {
        width: 25%;
        margin-top: 2rem;
        cursor: pointer;
    }

    #section-form {
        width: 50%;
    }

    .switch-field label {

        line-height: 1.7;
        margin-top: 0.2rem;

    }


    /* q1 */

    #video_q {
        width: 45%;
        position: absolute;
        top: -1%;
        margin-top: 14%;
        z-index: 8;
    }

    #frame_q {
        position: absolute;
        width: 70%;
        top: -1%;
        z-index: 9;
    }

    #line {

        position: absolute;
        width: 100%;
        z-index: 0;
        top: -1%;
        margin-top: 21%;

    }

    #btn-true {
        position: absolute;
        width: 15%;
        z-index: 10;
        top: -1%;
        margin-top: 38%;
        margin-right: 20%;
        cursor: pointer;
    }

    #btn-false {
        position: absolute;
        width: 15%;
        z-index: 10;
        top: -1%;
        margin-top: 38%;
        margin-left: 20%;
        cursor: pointer;
    }

    /* sum */

    #sum-logo {
        width: 90%;
    }


}

@media screen and (min-width:1281px) {

    /* hi-res laptops and desktops */
    #login-section {
        width: 60%;
    }



    #login-logo {
        width: 38% !important;
        margin-bottom: 2rem;
    }

    #btn-login {
        width: 18%
    }


    #labelusername {
        margin-left: 5rem;
    }

    #labelpass {
        margin-left: 5rem;
    }

    #username {
        margin-right: 5rem;
    }

    #password {
        margin-right: 5rem;
    }

    .footer-home-m {
        display: none;
    }

    /* home */

    #home-logo {
        width: 35% !important;
    }

    #home-text {
        width: 65% !important;
        margin-bottom: 1rem;
    }

    #btn-goto {
        width: 25% !important;
        cursor: pointer;
    }

    /* premission */

    #header-premission {
        width: 80%;
        margin-bottom: 1rem;

    }

    #text-premission {
        width: 90%;
        margin-bottom: 2rem;
    }

    #btn-consent {
        width: 20%;
        cursor: pointer;
    }

    /* form */

    #header-form-consent {
        width: 85%;
        margin-bottom: 1rem;
    }

    #text-form-consent {
        width: 70%;
        margin-bottom: 4rem;
    }


    #btn-next {
        width: 20%;
        cursor: pointer;

    }

    #text-form-provide {
        width: 40%;
        margin-top: 3rem;
    }

    #btn-start {
        width: 25%;
        margin-top: 2rem;
        cursor: pointer;
    }

    #section-form {
        width: 50%;
    }

    .switch-field label {

        line-height: 1.7;
        margin-top: 0.2rem;

    }

    /* q1 */

    #video_q {
        width: 45%;
        position: absolute;
        top: -1%;
        margin-top: 14%;
        z-index: 8;
    }

    #frame_q {
        position: absolute;
        width: 70%;
        top: -2%;
        z-index: 9;
    }

    #line {

        position: absolute;
        width: 100%;
        z-index: 0;
        top: -1%;
        margin-top: 21%;

    }

    #btn-true {
        position: absolute;
        width: 15%;
        z-index: 10;
        top: -1%;
        margin-top: 38%;
        margin-right: 20%;
        cursor: pointer;
    }

    #btn-false {
        position: absolute;
        width: 15%;
        z-index: 10;
        top: -1%;
        margin-top: 38%;
        margin-left: 20%;
        cursor: pointer;
    }

    /* sum */

    #sum-logo {
        width: 75%;
    }


}