/*@import url(https://fonts.googleapis.com/css?family=Ubuntu:100,300,400,500,600,700,900&display=swap);*/
/*@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');*/


@font-face {
    font-display: swap;
}

/*!* define the property *!*/
/*:root {*/
/*    --main-color: black;*/
/*}*/
/*!* use the property *!*/
/*p {*/
/*    color: var(--main-color);*/
/*}*/


@media (prefers-color-scheme: dark) {
    html,body{
        margin: 0;
        padding: 0;
        /*height: 100%;*/
        font-family: Ubuntu,Lato, Helvetica, Arial, sans-serif !important;
        /*color:white!important;*/
        color: #1C1F22!important;
        /*background-image: url('../desc/backgr.jpg');*/
        background-color: #242F41;
        overflow-x: hidden;
        /*bgcolor:"#000000";*/

        display:flex;
        flex-direction:column;

    }

    .main-class {
        background-size: 100%;
        background-color: white;
        background-repeat: no-repeat;
        max-width: 600px;
        margin: 0 auto;
        width: 600px;
        margin-top: 100px!important;
        border-radius: 9px;
        background-color: #2F3C51;
        -webkit-box-shadow: 0 4px 11px -2px hsl(217, 29%, 10%);;
        box-shadow: 0 4px 11px -2px hsl(217, 29%, 10%);;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }



    .main-text{
        font-size: 30px;
        margin-bottom: 5px;
        margin-top: 5px;
        margin-left: 5%;
        /*text-align: left !important;*/
        margin-right: 5%;
        color: hsl(210, 1%, 90%)!important;
        /*color: #4C4D4E!important;*/
        font-weight: 500;
    }

}

@media (prefers-color-scheme: light) {
    html,body{
        margin: 0;
        padding: 0;
        /*height: 100%;*/
        font-family: Ubuntu,Lato, Helvetica, Arial, sans-serif !important;
        /*color:white!important;*/
        color: #1C1F22!important;
        /*background-image: url('../desc/backgr.jpg');*/
        background-color: #F8F8F8;
        overflow-x: hidden;
        /*bgcolor:"#000000";*/

        display:flex;
        flex-direction:column;

    }

    .main-class {
        background-size: 100%;
        background-color: white;
        background-repeat: no-repeat;
        max-width: 600px;
        margin: 0 auto;
        width: 600px;
        margin-top: 100px!important;
        border-radius: 9px;
        background-color: #fff;
        -webkit-box-shadow: 0 4px 11px -2px rgba(86,70,143,.3);
        box-shadow: 0 4px 11px -2px rgba(86,70,143,.3);
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .main-text{
        font-size: 30px;
        margin-bottom: 5px;
        margin-top: 5px;
        margin-left: 5%;
        /*text-align: left !important;*/
        margin-right: 5%;
        color: #4C4D4E!important;
        font-weight: 500;
    }
}

body.desktop-bg {
    background: url(../mobile/desktop.png) no-repeat!important;
    background-size: contain!important;
    width: 100%;
    margin: 0!important;
    padding: 0!important;
    background-position: 100% 0!important;


}

.logo{
    font-family:"Andale Mono";
    color: black;
    font-size: 1.1rem!important;
    margin-right: 20px;
    float: right;
    padding-top: 20px;
}

.container-padding {
    padding-top: 80px;
}

.quiz-button {
    background: -webkit-gradient(linear, left top, left bottom, from(hsl(44, 97%, 81%)), to(hsl(44, 97%, 61%)));
    background: linear-gradient(hsl(44, 97%, 81%), hsl(44, 97%, 61%));
    border: none;
    border-radius: 5px!important;
    /* color: #FCC939!important; */
    /* color: hsl(210, 1%, 40%);*/
    color: hsl(0, 0%, 20%);
    /*color: #fff;*/
    font-size: 14px;
    /*font-weight: 500!important;*/
    width: 50%;
    /* border: 1px solid hsl(210, 1%, 90%)!important; */
    border-style: solid;
    border-width: 1px;
    border-color: hsl(0, 0%, 50%);
    /* box-shadow: 4px 2px 4px -2px #FCC939; */
    /* -webkit-box-shadow: 0 1px 8px -2px #FCC939; */
    /* box-shadow: 0 1px 8px -2px #FCC939; */
    padding: 0.9rem;
    outline: none!important;
    margin-bottom: 1.5rem;
}
/*.quiz-button:visited{*/
/*    border-color: red;*/
/*}*/

.quiz-button:focus{
    border-color: black;
}


/*Email*/




/*hr {*/
/*    border: none;*/
/*    height: 1px!important;*/
/*    !* Set the hr color *!*/
/*    color: #333!important; !* old IE *!*/
/*    background-color: #333!important; !* Modern Browsers *!*/
/*}*/

/*styles during the fixes*/

.footer {
    margin-top: 70px;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: darkgray;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: darkgray;
}



/*.round_box {*/
/*    padding: 20px 0;*/
/*    background: white;*/
/*    border-radius: 8px;*/
/*    margin: 0px;*/
/*}*/

/*#woman1{*/
/*    width: 10%;*/
/*}*/
/*#woman2{*/
/*    width: 10.6%;*/
/*}*/
/*#woman3{*/
/*    width: 13.3%;*/
/*}*/
/*#woman4{*/
/*    width: 15%;*/
/*}*/
/*#woman5{*/
/*    width: 17%;*/
/*}*/

/*.loader .image {*/
/*    !*width: 100px;*!*/
/*    !*height: 160px;*!*/
/*    font-size: 40px;*/
/*    text-align: center;*/
/*    transform-origin: bottom center;*/
/*    animation: 3s rotate infinite;*/
/*    opacity: 0;*/
/*}*/

button.btn1 {
    background-position: right bottom;
}
/*button.btn1:hover {*/
/*    -webkit-transition: all 0.17s ease-in-out;*/
/*    -moz-transition: all 0.17s ease-in-out;*/
/*    -o-transition: all 0.17s ease-in-out;*/
/*    transition: all 0.17s ease-in-out;*/
/*    background: linear-gradient(to left, white 50%, #FCC939 60%);*/
/*    background-size: 200% 100%;*/
/*    background-position: left bottom;*/
/*    color: white!important;*/
/*}*/

button.btn1:hover {

    background: -webkit-gradient(linear, left top, left bottom, from(hsl(44, 97%, 75%)), to(hsl(44, 97%, 51%)));
    background: linear-gradient(hsl(44, 97%, 75%), hsl(44, 97%, 51%));

    /*background: white!important;*/
    /*color: hsl(210, 1%, 40%)!important;*/
}

a {
    color: #FCC939 !important;
    -webkit-transition: color .2s;
    transition: color .2s;
}


@media screen and (max-width: 1000px) {

    /*.mockup {*/
    /*    width: 120px;*/
    /*}*/

}

/*@media screen and (max-width: 800px) {*/
/*    .mockup {*/
/*        width: 110px;*/
/*    }*/

/*}*/


@media screen and (max-width: 575px) {

    /*.form-field{*/
    /*    font-size: small;*/
    /*    font-weight: 620;*/
    /*    width: 15rem;*/
    /*    padding: 0.7rem;*/
    /*    margin-bottom: 6%;*/
    /*    !*padding-left: 15%!important;*!*/
    /*}*/

    @media (prefers-color-scheme: light) {
        html, body {
            padding-bottom: 70px;
            background-color: white!important;
        }
    }
    /*@import url(https://fonts.googleapis.com/css?family=Ubuntu:100,300,400,500,600,700,900&display=swap);*/
    /*@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');*/


    @font-face {
        font-display: swap;
    }

    /*!* define the property *!*/
    /*:root {*/
    /*    --main-color: black;*/
    /*}*/
    /*!* use the property *!*/
    /*p {*/
    /*    color: var(--main-color);*/
    /*}*/


    @media (prefers-color-scheme: dark) {
        html,body{
            margin: 0;
            padding: 0;
            /*height: 100%;*/
            font-family: Ubuntu,Lato, Helvetica, Arial, sans-serif !important;
            /*color:white!important;*/
            color: #1C1F22!important;
            /*background-image: url('../desc/backgr.jpg');*/
            background-color: #242F41;
            overflow-x: hidden;
            /*bgcolor:"#000000";*/

            display:flex;
            flex-direction:column;

        }

        .main-class {
            background-size: 100%;
            background-color: white;
            background-repeat: no-repeat;
            max-width: 600px;
            margin: 0 auto;
            width: 600px;
            margin-top: 100px!important;
            border-radius: 9px;
            background-color: #2F3C51;
            -webkit-box-shadow: 0 4px 11px -2px hsl(217, 29%, 10%);;
            box-shadow: 0 4px 11px -2px hsl(217, 29%, 10%);;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }



        .main-text{
            font-size: 30px;
            margin-bottom: 5px;
            margin-top: 5px;
            margin-left: 5%;
            /*text-align: left !important;*/
            margin-right: 5%;
            color: hsl(210, 1%, 90%)!important;
            /*color: #4C4D4E!important;*/
            font-weight: 500;
        }

    }

    @media (prefers-color-scheme: light) {
        html,body{
            margin: 0;
            padding: 0;
            /*height: 100%;*/
            font-family: Ubuntu,Lato, Helvetica, Arial, sans-serif !important;
            /*color:white!important;*/
            color: #1C1F22!important;
            /*background-image: url('../desc/backgr.jpg');*/
            background-color: #F8F8F8;
            overflow-x: hidden;
            /*bgcolor:"#000000";*/

            display:flex;
            flex-direction:column;

        }

        .main-class {
            background-size: 100%;
            background-color: white;
            background-repeat: no-repeat;
            max-width: 600px;
            margin: 0 auto;
            width: 600px;
            margin-top: 100px!important;
            border-radius: 9px;
            background-color: #fff;
            -webkit-box-shadow: 0 4px 11px -2px rgba(86,70,143,.3);
            box-shadow: 0 4px 11px -2px rgba(86,70,143,.3);
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

        .main-text{
            font-size: 30px;
            margin-bottom: 5px;
            margin-top: 5px;
            margin-left: 5%;
            /*text-align: left !important;*/
            margin-right: 5%;
            color: #4C4D4E!important;
            font-weight: 500;
        }
    }

    body.desktop-bg {
        background: url(../mobile/desktop.png) no-repeat!important;
        background-size: contain!important;
        width: 100%;
        margin: 0!important;
        padding: 0!important;
        background-position: 100% 0!important;


    }

    .logo{
        font-family:"Andale Mono";
        color: black;
        font-size: 1.1rem!important;
        margin-right: 20px;
        float: right;
        padding-top: 20px;
    }

    .container-padding {
        padding-top: 80px;
    }

    .quiz-button {
        background: -webkit-gradient(linear, left top, left bottom, from(hsl(44, 97%, 81%)), to(hsl(44, 97%, 61%)));
        background: linear-gradient(hsl(44, 97%, 81%), hsl(44, 97%, 61%));
        border: none;
        border-radius: 5px!important;
        /* color: #FCC939!important; */
        /* color: hsl(210, 1%, 40%);*/
        color: hsl(0, 0%, 20%);
        /*color: #fff;*/
        font-size: 14px;
        /*font-weight: 500!important;*/
        width: 50%;
        /* border: 1px solid hsl(210, 1%, 90%)!important; */
        border-style: solid;
        border-width: 1px;
        border-color: hsl(0, 0%, 50%);
        /* box-shadow: 4px 2px 4px -2px #FCC939; */
        /* -webkit-box-shadow: 0 1px 8px -2px #FCC939; */
        /* box-shadow: 0 1px 8px -2px #FCC939; */
        padding: 0.9rem;
        outline: none!important;
        margin-bottom: 1.5rem;
    }
    /*.quiz-button:visited{*/
    /*    border-color: red;*/
    /*}*/

    .quiz-button:focus{
        border-color: black;
    }


    /*Email*/




    /*hr {*/
    /*    border: none;*/
    /*    height: 1px!important;*/
    /*    !* Set the hr color *!*/
    /*    color: #333!important; !* old IE *!*/
    /*    background-color: #333!important; !* Modern Browsers *!*/
    /*}*/

    /*styles during the fixes*/

    .footer {
        margin-top: 70px;
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: darkgray;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
        color: darkgray;
    }



    /*.round_box {*/
    /*    padding: 20px 0;*/
    /*    background: white;*/
    /*    border-radius: 8px;*/
    /*    margin: 0px;*/
    /*}*/

    /*#woman1{*/
    /*    width: 10%;*/
    /*}*/
    /*#woman2{*/
    /*    width: 10.6%;*/
    /*}*/
    /*#woman3{*/
    /*    width: 13.3%;*/
    /*}*/
    /*#woman4{*/
    /*    width: 15%;*/
    /*}*/
    /*#woman5{*/
    /*    width: 17%;*/
    /*}*/

    /*.loader .image {*/
    /*    !*width: 100px;*!*/
    /*    !*height: 160px;*!*/
    /*    font-size: 40px;*/
    /*    text-align: center;*/
    /*    transform-origin: bottom center;*/
    /*    animation: 3s rotate infinite;*/
    /*    opacity: 0;*/
    /*}*/

    button.btn1 {
        background-position: right bottom;
    }
    /*button.btn1:hover {*/
    /*    -webkit-transition: all 0.17s ease-in-out;*/
    /*    -moz-transition: all 0.17s ease-in-out;*/
    /*    -o-transition: all 0.17s ease-in-out;*/
    /*    transition: all 0.17s ease-in-out;*/
    /*    background: linear-gradient(to left, white 50%, #FCC939 60%);*/
    /*    background-size: 200% 100%;*/
    /*    background-position: left bottom;*/
    /*    color: white!important;*/
    /*}*/

    button.btn1:hover {

        background: -webkit-gradient(linear, left top, left bottom, from(hsl(44, 97%, 75%)), to(hsl(44, 97%, 51%)));
        background: linear-gradient(hsl(44, 97%, 75%), hsl(44, 97%, 51%));

        /*background: white!important;*/
        /*color: hsl(210, 1%, 40%)!important;*/
    }

    a {
        color: #FCC939 !important;
        -webkit-transition: color .2s;
        transition: color .2s;
    }


    @media screen and (max-width: 1000px) {

        /*.mockup {*/
        /*    width: 120px;*/
        /*}*/

    }

    /*@media screen and (max-width: 800px) {*/
    /*    .mockup {*/
    /*        width: 110px;*/
    /*    }*/

    /*}*/


    @media screen and (max-width: 575px) {

        /*.form-field{*/
        /*    font-size: small;*/
        /*    font-weight: 620;*/
        /*    width: 15rem;*/
        /*    padding: 0.7rem;*/
        /*    margin-bottom: 6%;*/
        /*    !*padding-left: 15%!important;*!*/
        /*}*/

        @media (prefers-color-scheme: light) {
            html, body {
                padding-bottom: 70px;
                background-color: white!important;
            }
        }

        @media (prefers-color-scheme: dark) {
            html,body {
                padding-bottom: 70px;
                background-color: #2F3C51!important;
            }
        }




        body.desktop-bg {
            background-image: url('../mobile/mobiex.webp')!important;
            background-size: 100%!important;
        }

        .main-class {
            max-width: 600px;
            margin: 0 auto;
            width: 100%;
            background-color: transparent;
            margin-top: 0!important;
            border-radius: 0;
            margin-bottom: 10px;
            box-shadow: none;
            padding-bottom: 0;
            margin-bottom: 0;

        }

        .main-text{
            font-size: 25px!important;
            margin-left: 8%;
            /*text-align: left !important;*/
            margin-right: 8%;
            /*color: #4C4D4E!important;*/
            font-weight: 500;
        }

        .quiz-button {
            width: 70%!important;
        }

        /*.footer {*/
        /*    position: absolute!important;*/
        /*    bottom: 10px!important;*/
        /*    width: 100%!important;*/
        /*    height: 50px!important;*/
        /*    line-height: 10px!important;*/
        /*    !*background-color: #f5f5f5;*!*/
        /*}*/

        .footer-link {
            font-size: 0.7rem;
            color: #7C7E81!important;
        }

        /*.quiz-button {*/
        /*    background: RGB(300, 300, 300, 0.1);*/
        /*    border:none;*/

        /*    border-radius: 10px!important;*/
        /*    !*color: hsl(210, 1%, 40%)!important;*!*/
        /*    !*color: hsl(210, 1%, 50%);*!*/
        /*    color: white;*/
        /*    font-size: 0.95rem;*/
        /*    font-weight: 400;*/
        /*    width: 70%;*/
        /*    -webkit-box-shadow: 0 1px 8px -2px #FCC939;*/
        /*    box-shadow: 0 1px 8px -2px #FCC939;*/
        /*    padding: 0.9rem;*/
        /*    margin-bottom: 1.5rem;*/
        /*}*/

        /*button.btn1 {*/
        /*    background: white!important;*/

        /*}*/
        /*button.btn1:hover {*/
        /*    background: white!important;*/
        /*    color: hsl(210, 1%, 40%)!important;*/
        /*}*/
    }

    /*@media (max-height:600px) and (max-width: 575px){*/
    /*    footer{*/
    /*        display:none!important;*/
    /*    }*/
    /*}*/

    /*@media (max-height:800px) and (max-width: 1500px){*/
    /*    footer{*/
    /*        display:none!important;*/
    /*    }*/
    /*}*/


    @media (prefers-color-scheme: light) {

        .light-text {
            color: hsl(210, 1%, 50%)!important;
        }
        .footer-link {
            font-weight: 500;
            font-size: 0.7rem;
            color: #7C7E81!important;
        }

        .logo-img {
            content:url("/img/logo.webp");
            height: 50px;
            width: 132px;
        }

        .media-icon{
            filter: invert(60%);
            height: 2.5rem;
            margin-bottom: 2rem;
        }

    }


    @media (prefers-color-scheme: dark) {

        .light-text {
            color: hsl(210, 1%, 70%)!important;
        }

        .footer-link {
            font-weight: 500;
            font-size: 0.7rem;
            color: hsl(210, 1%, 90%)!important;
        }
        .logo-img {
            content:url("/img/logo-dark.webp");
            height: 50px;
            width: auto;
        }

        .media-icon{
            filter: invert(30%);
            height: 2.5rem;
            margin-bottom: 2rem;
        }

    }

    .cookie-button{
        background: -webkit-gradient(linear, left top, left bottom, from(hsl(44, 97%, 81%)), to(hsl(44, 97%, 61%)));
        background: linear-gradient(hsl(44, 97%, 81%), hsl(44, 97%, 61%));
        border-radius: 5px!important;
        color: hsl(0, 0%, 20%)!important;
        border-color: hsl(0, 0%, 30%)!important;
        border-style: solid;
        border-width: 1px;
        color: hsl(0, 0%, 20%);
        font-size: 14px;
        width: 50px;
    }
    .normal-text {
        font-weight: 400!important;
    }
    .text-size-16 {
        font-size: 16px!important;
    }
    .text-size-15 {
        font-size: 15px!important;
    }
    .text-size-18 {
        font-size: 18px!important;
    }




    @media (prefers-color-scheme: dark) {
        html,body {
            padding-bottom: 70px;
            background-color: #2F3C51!important;
        }
    }




    body.desktop-bg {
        background-image: url('../mobile/mobiex.webp')!important;
        background-size: 100%!important;
    }

    .main-class {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
        background-color: transparent;
        margin-top: 0!important;
        border-radius: 0;
        margin-bottom: 10px;
        box-shadow: none;
        padding-bottom: 0;
        margin-bottom: 0;

    }

    .main-text{
        font-size: 25px!important;
        margin-left: 8%;
        /*text-align: left !important;*/
        margin-right: 8%;
        /*color: #4C4D4E!important;*/
        font-weight: 500;
    }

    .quiz-button {
        width: 70%!important;
    }

    /*.footer {*/
    /*    position: absolute!important;*/
    /*    bottom: 10px!important;*/
    /*    width: 100%!important;*/
    /*    height: 50px!important;*/
    /*    line-height: 10px!important;*/
    /*    !*background-color: #f5f5f5;*!*/
    /*}*/

    .footer-link {
        font-size: 0.7rem;
        color: #7C7E81!important;
    }

    /*.quiz-button {*/
    /*    background: RGB(300, 300, 300, 0.1);*/
    /*    border:none;*/

    /*    border-radius: 10px!important;*/
    /*    !*color: hsl(210, 1%, 40%)!important;*!*/
    /*    !*color: hsl(210, 1%, 50%);*!*/
    /*    color: white;*/
    /*    font-size: 0.95rem;*/
    /*    font-weight: 400;*/
    /*    width: 70%;*/
    /*    -webkit-box-shadow: 0 1px 8px -2px #FCC939;*/
    /*    box-shadow: 0 1px 8px -2px #FCC939;*/
    /*    padding: 0.9rem;*/
    /*    margin-bottom: 1.5rem;*/
    /*}*/

    /*button.btn1 {*/
    /*    background: white!important;*/

    /*}*/
    /*button.btn1:hover {*/
    /*    background: white!important;*/
    /*    color: hsl(210, 1%, 40%)!important;*/
    /*}*/
}

/*@media (max-height:600px) and (max-width: 575px){*/
/*    footer{*/
/*        display:none!important;*/
/*    }*/
/*}*/

/*@media (max-height:800px) and (max-width: 1500px){*/
/*    footer{*/
/*        display:none!important;*/
/*    }*/
/*}*/


@media (prefers-color-scheme: light) {

    .light-text {
        color: hsl(210, 1%, 50%)!important;
    }
    .footer-link {
        font-weight: 500;
        font-size: 0.7rem;
        color: #7C7E81!important;
    }

    .logo-img {
        content:url("/img/logo.webp");
        height: 50px;
        width: 132px;
    }

    .media-icon{
        filter: invert(60%);
        height: 2.5rem;
        margin-bottom: 2rem;
    }

}


@media (prefers-color-scheme: dark) {

    .light-text {
        color: hsl(210, 1%, 70%)!important;
    }

    .footer-link {
        font-weight: 500;
        font-size: 0.7rem;
        color: hsl(210, 1%, 90%)!important;
    }
    .logo-img {
        content:url("/img/logo-dark.webp");
        height: 50px;
        width: auto;
    }

    .media-icon{
        filter: invert(30%);
        height: 2.5rem;
        margin-bottom: 2rem;
    }

}

.cookie-button{
    background: -webkit-gradient(linear, left top, left bottom, from(hsl(44, 97%, 81%)), to(hsl(44, 97%, 61%)));
    background: linear-gradient(hsl(44, 97%, 81%), hsl(44, 97%, 61%));
    border-radius: 5px!important;
    color: hsl(0, 0%, 20%)!important;
    border-color: hsl(0, 0%, 30%)!important;
    border-style: solid;
    border-width: 1px;
    color: hsl(0, 0%, 20%);
    font-size: 14px;
    width: 50px;
}
.normal-text {
    font-weight: 400!important;
}
.text-size-16 {
    font-size: 16px!important;
}
.text-size-15 {
    font-size: 15px!important;
}
.text-size-18 {
    font-size: 18px!important;
}