@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



* {
    margin : 0;
    padding: 0;
}

*:focus {
    outline: none;
}

button:focus {
    outline: 0;
}

body {
    -webkit-background-size: cover;
    background-position    : center;
    background-repeat      : no-repeat;
    color                  : #007473;
    font-family            : 'Montserrat', sans-serif;
}

/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index : 999;
    height  : 2em;
    width   : 2em;
    overflow: show;
    margin  : auto;
    top     : 0;
    left    : 0;
    bottom  : 0;
    right   : 0;
}

/* Transparent Overlay */
.loading:before {
    content   : '';
    display   : block;
    position  : fixed;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: radial-gradient(rgba(122, 122, 122, 0.4), rgba(122, 122, 122, 0.4));

    background: -webkit-radial-gradient(rgba(122, 122, 122, 0.4), rgba(122, 122, 122, 0.4));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
    /* hide "loading..." text */
    font            : 0/0 a;
    color           : transparent;
    text-shadow     : none;
    background-color: transparent;
    border          : 0;
}

.loading:not(:required):after {
    content           : '';
    display           : block;
    font-size         : 10px;
    width             : 1em;
    height            : 1em;
    margin-top        : -0.5em;
    -webkit-animation : spinner 150ms infinite linear;
    -moz-animation    : spinner 150ms infinite linear;
    -ms-animation     : spinner 150ms infinite linear;
    -o-animation      : spinner 150ms infinite linear;
    animation         : spinner 150ms infinite linear;
    border-radius     : 0.5em;
    -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
    box-shadow        : rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform   : rotate(0deg);
        -ms-transform    : rotate(0deg);
        -o-transform     : rotate(0deg);
        transform        : rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform   : rotate(360deg);
        -ms-transform    : rotate(360deg);
        -o-transform     : rotate(360deg);
        transform        : rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform   : rotate(0deg);
        -ms-transform    : rotate(0deg);
        -o-transform     : rotate(0deg);
        transform        : rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform   : rotate(360deg);
        -ms-transform    : rotate(360deg);
        -o-transform     : rotate(360deg);
        transform        : rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform   : rotate(0deg);
        -ms-transform    : rotate(0deg);
        -o-transform     : rotate(0deg);
        transform        : rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform   : rotate(360deg);
        -ms-transform    : rotate(360deg);
        -o-transform     : rotate(360deg);
        transform        : rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform   : rotate(0deg);
        -ms-transform    : rotate(0deg);
        -o-transform     : rotate(0deg);
        transform        : rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform   : rotate(360deg);
        -ms-transform    : rotate(360deg);
        -o-transform     : rotate(360deg);
        transform        : rotate(360deg);
    }
}

/*
* GLOBAL
*/
.w-700 {
    font-weight: 700;
}

.mt-10 {
    margin-top: 15px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-50 {
    margin-bottom: 50px;
}

.ml-0 {
    margin-left: 0px;
}

.mr-0 {
    margin-right: 0px;
}

.ml-20 {
    margin-left: 20px;
}

.mr-20 {
    margin-right: 20px;
}

.pt-15 {
    padding-top: 15px;
}

.t-left {
    text-align: left;
}

.t-center {
    text-align: center;
}

.t-justify {
    text-align: justify;
}

.t-right {
    text-align: right;
}

.no-bg {
    background: none !important;
}

.white-bg {
    background: #fff;
}

.blue-bg {
    background: url('../../assets/images/IMB_OnlineKviz_background_2.png') no-repeat center center fixed;
}

.main-container {
    min-height: 760px;
    padding   : 0px 30px 20px 30px;
}

.btn.main-btn {
    padding         : 20px;
    margin          : 10px 0 25px;
    background-image: linear-gradient(1deg, #007473, #00a3a0);
    border          : 2px solid #fff;
    border-radius   : 30px;
    width           : 440px;
    margin          : auto;
    display         : block;
}

.btn.main-btn span {
    font-size     : 26px;
    color         : #fff;
    text-transform: uppercase;
    font-weight   : 700;
}

.btn.main-btn:hover {
    background-image: linear-gradient(1deg, #00a3a0, #007473);
}

.btn.main-btn span:hover {
    text-shadow: 2px 3px 10px #0000006e;
}



.input-game {
    height       : 60px;
    font-size    : 22px;
    border-radius: 30px;
    padding-left : 20px;
}

.selected-answer {
    color: #00d800;
}

.selected-wrong-answer {
    color: #ff8888;
}

.form-error {
    border: 2px solid red;
}

.checkboxGdpr {
    display            : block;
    position           : relative;
    padding-left       : 35px;
    margin-bottom      : 12px;
    cursor             : pointer;
    font-size          : 22px;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    margin-left        : 6px;
}

.checkboxGdpr input {
    position: absolute;
    opacity : 0;
    cursor  : pointer;
    height  : 0;
    width   : 0;
}

.checkmark {
    position        : absolute;
    top             : 4px;
    left            : 0;
    height          : 25px;
    width           : 25px;
    background-color: #eee;
}

.checkboxGdpr:hover input~.checkmark {
    background-color: #ccc;
}

.checkboxGdpr input:checked~.checkmark {
    background-color: #00a3a0;
}

.checkmark:after {
    content : "";
    position: absolute;
    display : none;
}

.checkboxGdpr input:checked~.checkmark:after {
    display: block;
}

.checkboxGdpr .checkmark:after {
    left             : 8px;
    top              : 2px;
    width            : 9px;
    height           : 16px;
    border           : solid white;
    border-width     : 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform    : rotate(45deg);
    transform        : rotate(45deg);
}

/* FOOTER */
#footer {
    width   : 100%;
    position: fixed;
    right   : 0;
    bottom  : 0;
    margin  : 0;
    padding : 0;
    z-index : 9999999;
}

#footer #eu-logo {
    width     : 300px;
    position  : absolute;
    right     : -1px;
    bottom    : 0;
    text-align: right;
}

#footer .background-img img {
    width: 300px;
}



#loading .loading-row {
    text-align: center;
}

/* MAIN PAGE */
#main-page .main-container .main-row {
    min-height: 600px;
}

#main-page h3 {
    color: #007473;
}

#main-page label {
    color    : #545454;
    font-size: 20px;
}

#main-page a {
    color: #000000;
}

#main-page a.active {
    background             : linear-gradient(to right, rgba(0, 163, 160) 0%, rgb(0, 116, 115) 100%);
    background             : -webkit-linear-gradient(to right, rgba(20, 157, 191, 0) 0%, rgb(77, 95, 167, 0) 100%);
    background-clip        : text;
    -webkit-background-clip: text;
    -moz-background-clip   : text;
    -moz-text-fill-color   : transparent;
    -webkit-text-fill-color: rgb(78 93 166);
}

#main-page li {
    background   : #fff;
    border-radius: 30px;
    margin       : 0px 6px;
    width        : 46%;
    text-align   : center;
}

#main-page .RadioBtn {
    text-align: center;
}

#main-page .AgeGroupCheck {
    display: none;
}

#main-page .AgeGroupLabel {
    color        : #545454;
    font-size    : 20px;
    margin-bottom: 0px;
}

#main-page .AgeGroupCheck+label {
    background  : ghoswhite;
    padding     : 5px 8px;
    cursor      : pointer;
    font-weight : 500;
    font-size   : 25px;
    color       : #007473;
    margin-right: 30px;
}

#main-page .AgeGroupCheck:not(:checked)+label:hover {}

#main-page .AgeGroupCheck+label:active,
#main-page .AgeGroupCheck:checked+label {
    margin-right : 30px;
    border-bottom: 2px solid #b80036;
}

#main-page s.col-sm-6 {
    display        : grid;
    align-items    : center;
    justify-content: center;
}

#main-page .col-sm-12 {
    margin        : auto;
    padding       : 10px;
    text-align    : center;
    text-transform: uppercase;
}

#main-page .game-btn-row {
    display        : grid;
    align-items    : center;
    justify-content: center;
}

#main-page .player-area {
    justify-content: normal;
}

#main-page .left-logo {
    max-width: 470px;
}




/* QUESTION */
#QuizWizard {
    border: 0;
}

#question-page .header-row {
    min-height: 180px;
}

#question-page .header-row .logo {
    height : 110px;
    padding: 10px;
}

#question-page .counter-row {
    text-align: right;
}

#question-page .counter-row span {
    font-size  : 28px;
    font-weight: 700;
}

#question-page .question-col {
    min-height: 200px;
    text-align: center;
}

#question-page .topics-question {
    background             : linear-gradient(to right, #00a3a0 0%, #007473 100%);
    background-clip        : text;
    -webkit-background-clip: text;
    -moz-background-clip   : text;
    -moz-text-fill-color   : transparent;
    -webkit-text-fill-color: transparent;
    font-size              : 23px;
    font-weight            : 700;
    line-height            : 1.1;
}

#question-page .question {
    list-style-type: none;
    margin         : 25px 0 0 0;
    padding        : 0;
}

#question-page .question {
    width     : 80%;
    margin    : auto;
    text-align: center;
}

#question-page .question label {
    margin          : 4px 0 0px;
    background-image: linear-gradient(1deg, #007473, #00a3a0);
    border          : 2px solid #fff;
    border-radius   : 30px;
    font-size       : 18px;
    font-weight     : 600;
    cursor          : pointer;
    z-index         : 90;
    padding         : 18px 20px;
    width           : 100%;
}

#question-page .question input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
}

#question-page .question input[type="radio"]:hover {
    opacity: 0.01;
    z-index: 100;
}

#question-page .question input[type="radio"]:checked+label,
.Checked+label {
    background: white !important;
    border    : 4px solid #009794;
    box-shadow: 2px 5px 7px 0px #888888;
}

#question-page .question input[type="radio"]:checked+label span,
.Checked+label span {

    background             : linear-gradient(to right, #00a3a0 0%, #007473 100%);
    background-clip        : text;
    -webkit-background-clip: text;
    -moz-background-clip   : text;
    -moz-text-fill-color   : transparent;
    -webkit-text-fill-color: rgb(215 0 63);
    font-weight            : 700;
    line-height            : 1.2;

}

#question-page .answer-span {
    overflow-wrap: break-word;
    word-wrap    : break-word;
    hyphens      : auto;
    color        : #fff;
}

#question-page .question label:hover {
    background-image: linear-gradient(1deg, #00a3a0, #007473);
}

#question-page .timer-col {
    text-align: left;
}

#question-page .button-col {
    text-align: right;
}

#question-page .timer {
    background: url("../../assets/images/timer.png") no-repeat center;
    height    : 200px;
    width     : 200px;
}

#question-page .seconds {
    font-family: 'digital-7', sans-serif;
    margin-top : 36px;
    margin-left: 60px;
    font-size  : 84px;
    color      : whitesmoke;
}

#question-page .seconds span {
    margin-top : 34px;
    margin-left: 2px;
    display    : inline-block;
}

#question-page .next-btn {
    height: 120px;
}

#question-page .next-btn:hover {
    text-shadow: 2px 3px 10px #0000006e;
}

#customNextBtn {
    background    : #eb0045;
    border        : 0;
    color         : #fff;
    display       : inline-block;
    font-weight   : 600;
    letter-spacing: 0.02em;
    margin        : 0 20px 20px 20px;
    padding       : 15px 40px;
    transition    : 0.3s;
    text-transform: uppercase;
}

#customNextBtn:hover {
    background     : #d7003f;
    text-decoration: none;
}

#customNextBtn img:hover {
    text-shadow: 2px 3px 10px #0000006e;
}

#question-page a:hover {
    filter: drop-shadow(4px 2px 7px #333);
}


/* RESULT */

#result-page .profil-logo {
    max-width  : 260px;
    margin-left: -30px;
}

#result-page .profil-logo-figure {
    text-align: center;
}

#result-page .result-content {}

#result-page .result-content {
    font-size  : 16px;
    font-weight: 500;
}

#result-page .result-content span {
    font-size  : 20px;
    font-weight: 700;
}

#result-page ul {
    text-align     : center;
    list-style-type: none;
}

#result-page .li-inline {
    display: inline;
    padding: 0px 40px;
}

#result-page ul li {
    padding  : 0px 20px;
    font-size: 19px;
}

#result-page .result-div {
    text-align : center;
    font-size  : 26px;
    font-weight: 700;
}
#result-page .share{
    text-align: center;
    padding-top: 50px;
    margin: auto;
    display: block;
}
#result-page .share-div{
    max-width: 450px;
    margin: auto;
}

@media (max-width: 1000.98px) and (orientation: landscape) {
    #footer .background-img img {
        width: 160px;
    }

    #topics-page .topics-title {
        font-size: 18px;
    }
}

@media (max-width: 575.98px) {
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
        padding-right: 0 !important;
    }

    .main-container {
        min-height: 660px;
    }

    #loading img {
        width: 100%;
    }

    #main-page .left-logo {
        max-width: 340px;
    }

    #main-page .player-area {
        margin-bottom: 50px;
    }



    .btn.main-btn {
        padding   : 14px;
        width     : 100%;
        min-width : 300px;
        margin    : auto;
        display   : block;
        margin-top: 30px;
    }

    .btn.main-btn span {
        font-size     : 26px;
        color         : #fff;
        text-transform: uppercase;
        font-weight   : 700;
    }
   

    #main-page .nav-link {
        padding: 0px;
    }

    #main-page h3 {
        font-size  : 18px;
        font-weight: 700;
        margin-top : 12px;
    }

    #main-page .btn.main-btn span {
        font-size: 20px;
    }



    /* QUESTION PAGE */
    #question-page .topics-question {
        font-size: 20px;
    }

    #question-page .question {
        width: 100%;
    }

    #question-page .header-row .logo {
        max-height: 190px;
        padding   : 10px;
    }

    #question-page .timer-col {
        text-align: center;
    }

    #question-page .button-col {
        text-align: center;
    }

    #question-page .timer {
        background     : url(../../assets/images/timer.png) no-repeat center;
        height         : 170px;
        width          : 170px;
        margin         : auto;
        display        : block;
        background-size: 170px 170px;
    }

    #question-page .seconds {
        font-family: 'digital-7', sans-serif;
        margin-top : 34px;
        margin-left: 0px;
        font-size  : 74px;
        margin-top : 34px;
        display    : inline-block;
    }

    #question-page .seconds span {
        margin-top : -8px;
        margin-left: 0px;
        display    : block;
    }

    #footer .background-img img {
        width: 100px;
    }

    #footer #eu-logo {
        width: 100px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #main-page .btn.main-btn {
        width: 460px;
    }


    #footer .background-img img {
        width: 100px;
    }

    #footer #eu-logo {
        width: 100px;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {
    #main-page .btn.main-btn {
        width: 500px;
    }




    #footer .background-img img {
        width: 150px;
    }

    #footer #eu-logo {
        width: 150px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {

    #footer .background-img img {
        width: 200px;
    }

    #footer #eu-logo {
        width: 200px;
    }
}

@media (min-width: 1199.98px) and (max-width: 1480px) {
    #footer .background-img img {
        width: 220px;
    }

    #footer #eu-logo {
        width: 220px;
    }
}

@media (min-width: 1200px) {}