.contenty {
    width: 100%;
    height: 100%;
    margin: 0px;
    background: transparent;
}

.cx {
    cursor: pointer;
}

.cx2 {
    cursor: pointer;
}

.nav_tag {
    width: 100%;
    height: 50px;
    position: fixed;
    margin: auto;
    bottom: 0px;
}

.thanks {
    width: 100%;
    margin-top: 10%;
    color: #000;
    text-align: left;
    font-size: 25px;
}

.tag_middle {
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
}

.tag {
    width: 32%;
    float: left;
    text-align: center;
    line-height: 50px;
    background-color: #000;
    color: white;
}

.tag:active {
    background-color: #2196F3;
}

.slides_holder {
    width: 100%;
    margin-top: 12%;
    /* background-color: #BDBDBD; */
    margin-left: auto;
    margin-right: auto;
}

.pg1 {
    width: 100%;
    height: 100%;
    margin: 0;
}

.image_slide {
    width: 95%;
    border-radius: 1px;
    margin-left: auto;
    margin-right: auto;
    background-color: aliceblue;
    background-size: contain;
    background-repeat: no-repeat;
    border: 0.5px solid grey;
}

.content_slides {
    width: 100%;
    height: 100%;
    margin: 0;
}

.games {
    width: 100%;
    height: 100%;
    margin: 0;
}

.game_row {
    width: 100%;
    margin: 2%;
    height: 90px;
}

.row_container {
    width: 100%;
    height: 100%;
    margin-top: 12%;
}

.left_circle {
    height: 100%;
    width: 30%;
    float: left;
    /* background-color: red; */
    /* line-height: 90px; */
}

.play_game {
    margin: 2;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    background-color: black;
    color: white;
    border: 0px solid;
    cursor: pointer;
}

.play_game:active {
    background-color: #2196F3;
}

.play_btn {
    height: 100%;
    width: 65%;
    color: white;
    float: left;
    background-color: yellow;
    /* line-height: 90px; */
    /* margin: auto; */
    display: flex;
    /* justify-content: center; */
    padding-left: 8px;
    align-items: center;
}

.pg2 {
    width: 100%;
    height: 100%;
    margin: auto;
}

.fs_bg1 {
    background-color: #4CAF50;
}

.fs_bg2 {
    background-color: #009688;
}

.fs_bg3 {
    background-color: #D81B60;
}

.fs_bg6 {
    background-color: #D81B60;
}

.fs_bg5 {
    background-color: #607D8B;
}

.fs_bt1 {
    background-color: #2ab24b;
}

.fs_bt2 {
    background-color: #2ab24b;
}

.fs_bt3 {
    background-color: #43A047;
}

.fs_bt6 {
    background-color: #4CAF50;
}

.fs_bt5 {
    background-color: #2E7D32;
}

.pg_fs {
    width: 100%;
    height: 100%;
    margin: auto;
}

.pg_ebu {
    width: 100%;
    height: 100%;
    margin: auto;
}

.main_panel {
    width: 100%;
    height: 100%;
    margin: 0px;
}

.level_quiz {
    width: 100%;
    height: 100%;
    margin: 0px;
}

.level_menu {
    width: 100%;
    height: 15%;
    margin-bottom: 20px;
}

.level_label {
    text-align: center;
    height: 40%;
    background-color: #4CAF50;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 1.5em;
    color: black;
    font-weight: bold;
}

.level_content {
    text-align: center;
    height: 60%;
    background-color: #2ab24b;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 1.5em;
    font-weight: bold;
    color: black;
}

.level_tab {
    width: 32%;
    height: 100%;
    float: left;
    background-color: red;
    border: 2px solid white;
}

.label_text {
    width: 100%;
    text-align: center;
    font-size: 16px;
    float: left;
    color: white;
    font-weight: bold;
}

.label_value {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.c1 {
    background-color: #4CAF50;
    color: #fff;
}

.c2 {
    background-color: #78909C;
    color: #fff;
}

.c3 {
    background-color: #4CAF50;
}

.c4 {
    background-color: #FF5722;
}

.quiz_container {
    width: 100%;
    height: 100%;
    background-color: white;
    float: left;
    position: relative;
}

.circle_holders {
    height: 100%;
    margin: 0 auto;
    /* background-color: blue; */
}

.score_display {
    width: 100%;
    height: 100%;
    background-color: white;
}

.q_top {
    height: 15%;
    width: 100%;
    margin: 0;
    padding: 0;
    float: left;
}

.q_bottom {
    height: 75%;
    width: 100%;
    background-color: transparent;
    margin: 0;
    padding-top: 2%;
    float: left;
}

.middle {
    height: 100%;
    width: 100%;
    background-color: transparent;
    margin: 0;
    padding: 0;
}

.box {
    margin-left: 5%;
    margin-top: 5%;
    border-radius: 2px;
    /* min-height: 70px; */
}

.inside_box_container {
    width: 100%;
    height: 100%;
    /* float: left; */
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    display: flex;
    /* justify-content: center; */
    align-content: start;
}

.box_letter {
    width: 10%;
    height: 100%;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    min-height: 60px;
    background-color: #4CAF50;
    color: black;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    align-content: start;
}

.box_answer {
    width: 89%;
    height: 100%;
    min-height: 60px;
    background-color: transparent;
    color: black;
    padding-left: 8px;
    text-align: left;
    cursor: pointer;
    display: flex;
    /* float: left; */
    align-items: center;
    /* justify-content: center; */
    align-content: start;
}

.hidden {
    display: none;
}

.boxes {
    width: 100%;
    height: 100%;
}

.clue_bullets {
    height: 0%;
    background-color: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question {
    /* height: 27%; */
    background-color: white;
    width: 94%;
    margin: 2%;
    position: relative;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    box-shadow: inset 0 0 10px #2ab24b;
}

ol {
    padding-left: 25px;
}

.lili {
    width: 100%;
    height: 100%;
    /* color: red; */
    /* font-family: system-ui; */
}


/*==================================================
 * Effect 7
 * ===============================================*/

.shadow {
    position: relative;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.shadow:before,
.shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px;
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
}

.shadow:after {
    right: 10px;
    left: auto;
    -webkit-transform: skew(8deg) rotate(3deg);
    -moz-transform: skew(8deg) rotate(3deg);
    -ms-transform: skew(8deg) rotate(3deg);
    -o-transform: skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
}

.choices {
    height: 60%;
    width: 100%;
    background-color: transparent;
}

.clue {
    display: none;
}

.lie {
    font-family: 'Poiret One', cursive;
    list-style-type: none;
    position: relative;
    padding: 5px;
    background: black;
    color: #000;
}

.ule {
    list-style-type: none;
    padding-left: 8px;
    padding-right: 8px;
}

.current_question {
    display: none;
}

.scores {
    width: 50%;
    background-color: #2ab24b;
    height: 100%;
    float: left;
    /* border-right: 1px solid  #fff; */
}

.logo_stuff {
    width: 50%;
    /* border-left: 1px solid green; */
    background-color: #2ab24b;
    height: 100%;
    float: left;
}

.selected_option_correct {
    /* background-color:#A5D6A7;*/
    border: 1px solid #A5D6A7;
    background-image: url(correct.png);
    background-size: 50% 50%;
    background-position: center;
    background-repeat: no-repeat;
    color: black;
}

.selected_option_wrong {
    /* background-color:#e53935; */
    border: 1px solid #e53935;
    background-image: url(wrong.png);
    background-size: 50% 50%;
    background-position: center;
    background-repeat: no-repeat;
    color: black;
}

.selected_option_correct_cb {
    border-color: #4CAF50 !important;
    box-shadow: inset 0 -12px 0 0 #4CAF50 !important;
}

.selected_option_wrong_cb {
    border-color: #e53935 !important;
    box-shadow: inset 0 -12px 0 0 #e53935 !important;
}

text {
    transform: rotate(90deg);
}

svg {
    align-self: center;
    height: 70%;
    width: 70%;
    transform: rotate(-90deg);
}

.circle {
    animation: spin 30s linear forwards;
}

@keyframes spin {
    0% {
        stroke-dashoffset: 126;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

#bb {
    margin-top: 40px;
    background-color: rgb(255, 240, 245);
    color: black;
    align-self: center;
    border-radius: 90px;
    padding: 10px;
    font-family: 'Kirang Haerang';
    font-size: 20px;
}

.content {
    background: black;
    width: 100%;
    height: 100%;
    color: #292929;
}

.ribbon {
    padding: 0 0.5em;
    margin: 0 0 0 -0.625em;
    /* line-height: 1.875em; */
    color: #000000;
    border-radius: 0 0.156em 0.156em 0;
    width: 90%;
    text-align: center;
    /* float: left; */
}

.extras {
    width: 100%;
    /* height: 20%; */
    position: absolute;
    top: 0px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    min-height: 30px;
    background-color: #2ab24b;
}

.ribbon:before,
.ribbon:after {
    /* position:absolute; */
    /* content: ''; */
    /* display: block; */
}

.ribbon:before {
    /* width: 0.469em; */
    /* height: 100%; */
    /* padding: 0 0 0.438em; */
    /* top:0; */
    /* left: -0.469em; */
    /* background:inherit; */
    /* border-radius: 0.313em 0 0 0.313em; */
}

.ribbon:after {
    width: 0.313em;
    height: 0.313em;
    bottom: -0.313em;
    left: -0.313em;
    border-radius: 0.313em 0 0 0.313em;
}

@media (max-width: 600px) {
    .ribbon {
        /* line-height: 1.143em; */
        padding: 0.5em;
    }
    .ribbon:before,
    .ribbon:after {
        font-size: 0.714em;
    }
}

.counter {
    float: left;
    height: 70%;
    color: #fff;
    /* margin-left: 2%; */
    width: 100%;
    line-height: 60px;
    align-items: center;
    text-align: center;
    /* min-height: 60px; */
    /* border-radius: 8px; */
    /* background-color: #4CAF50; */
    font-size: 60px;
    line-height: 60px;
    display: flex;
    /* color: black; */
    /* font-family: 'Orbitron', sans-serif; */
    justify-content: center;
}

.green {
    background-color: #4CAF50;
}

.amber {
    background-color: #FFA000;
}

.red {
    background-color: #d32f2f;
}

.show_score {
    width: 100%;
    height: 100%;
    /* border-radius: 5px; */
    background-color: transparent;
    min-height: 60px;
    line-height: 100%;
    text-align: center;
}

.points {
    width: 100%;
    display: flex;
    height: 30%;
    /* font-size: 10px; */
    /* left: 0; */
    justify-content: center;
    align-items: center;
    /* bottom: 0; */
    color: #fff;
    text-align: center;
    /* display: flex; */
}

.display_points {
    color: #fff;
    width: 100%;
    height: 70%;
    /* line-height: 40px; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 8px; */
}

.conty {
    width: 100%;
    height: 100%;
    background-color: yellow;
}

.black {
    background-color: black;
    border: 2px solid black;
}

.button_color {
    background-color: #FF5252;
    border: 2px solid #FF5252;
}

.skewed_button {
    background-color: silver;
    transform: skewX(-40deg);
    width: 30%;
    height: 30px;
}

.form_middle {
    text-align: center;
    padding-top: 40%;
}

.skewed_input {
    width: 60%;
    height: 40px;
    display: inline-block;
    border: 2px solid silver;
    border-radius: 0;
    background-color: silver;
    padding: 3px 10px;
    -moz-transform: skewX(-40deg);
    -webkit-transform: skewX(-40deg);
    -o-transform: skewX(-40deg);
    -ms-transform: skewX(-40deg);
    transform: skewX(-40deg);
}

.ordinary {
    width: 80%;
    height: 40px;
    border: 0;
    font-size: 24px;
    box-shadow: none;
    -moz-transform: skewX(40deg);
    -webkit-transform: skewX(40deg);
    -o-transform: skewX(40deg);
    -ms-transform: skewX(40deg);
    transform: skewX(40deg);
    background-color: silver;
}

.ordinary:focus {
    border: 0;
}

.eskew {
    display: inline-block;
    transform: skewX(40deg);
    font-size: 18PX;
}

.final_result {
    width: 100%;
    height: 100%;
}

.results_head {
    width: 100%;
    height: 25%;
    text-align: center;
    font-size: 24px;
    font-family: "Times New Roman", Times, serif;
}

.results_tail {
    width: 100%;
    height: 25%;
    text-align: center;
}

.points_achieved {
    width: 100%;
    height: 50%;
    font-size: 80px;
    text-align: center;
}

.skew_ting {
    width: 70%;
    height: 40%;
    background-color: silver;
    transform: skewX(-40deg);
}

.lolo {
    display: flex;
    /* equal height of the children */
}

.colo {
    flex: 1;
    /* additionally, equal width */
    padding: 1em;
    border: solid;
}

.middle_circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: #E91E63;
    color: black;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.ready {
    background-color: #E91E63;
}

.set {
    background-color: #FFC107;
}

.go {
    background-color: #4CAF50;
}

.err {
    background-color: #EF9A9A;
}

.succ {
    background-color: #A5D6A7;
}

.amby {
    background-color: #FFE082;
}

.tech {
    background-color: #CE93D8;
}

.hint_top {
    width: 100%;
    /* height: 20px; */
    /* margin-left: 5%; */
    /* margin-right: 20%; */
    background-color: transparent;
    float: left;
    color: #fff;
    height: 30px;
    /* border-style: dashed; */
    text-align: center;
    line-height: 30px;
    /* padding-bottom: 6px; */
    border-top: 0px;
    /* border-bottom: 0.5px green; */
    /* border-right: 0px green; */
    /* border-left: 0 green; */
    /* border-style: dotted; */
    /* border-radius:5px; */
}

.white {
    background-color: white;
}

.next {
    background-color: #E91E63;
    width: 30%;
    border: 0px solid transparent;
    height: 30px;
    /* height: 20px; */
    /* margin-left: 20%; */
    /* margin-right: 25%; */
    /* background-color: red;
   margin-right: 20%; */
    float: left;
    color: white;
    /* border-style: dashed; */
    text-align: center;
    line-height: 30px;
    /* padding-bottom: 6px; */
    /* border-top:0px; */
    /* border-bottom: 0.5px green; */
    /* border-right: 0px green; */
    /* border-left: 0 green; */
    /* border-style: dotted; */
    /* border-radius:5px; */
}

.next:active {
    background-color: #C51162;
}

.nxt_img {
    width: 30px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
    color: #fff;
    background: #007aff;
}

.float {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 12px;
    /* right: auto; */
    background-color: #E91E63;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
}

.my-float {
    margin-top: 8px;
    font-weight: bold;
    display: inline-block;
}

.float:active {
    background-color: #2196F3;
}

.middle_text {
    margin-top: 25%;
    display: inline-block;
}

.fs_game {
    background-color: #50b72c;
}

.cbu_game {
    background-color: #f30a8e;
}

.ebu_game {
    background-color: #a72cca;
}

.general_game {
    background-color: #607D8B;
}

.m_a {
    font-style: italic;
    font-size: 11px;
}

.level_q_bottom {
    width: 100%;
    height: 85%;
}

.display_level {
    width: 200px;
    height: 200px;
    border: 2px solid white;
    margin: 0 auto;
    display: flex;
    font-size: 40px;
    align-items: center;
    /* text-align: center; */
    justify-content: center;
    background-color: #2ab24b;
    border-radius: 100px;
}

.level_circle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* background-color: red; */
}

.title_text {
    font-size: 24px;
}

.hash {
    font-size: 18px;
    color: green;
    /* text-decoration: underline; */
    font-style: italic;
}