p{
    line-height: 200%;
}

.fw-500{
    font-weight: 500;
}

nav{
    font-family: 'Poppins', sans-serif;
    font-weight:600;
    font-size: 16px;
}

.pop{
    font-family: 'Poppins', sans-serif;
}


.abr{
    font-family: 'Abril Fatface', cursive;
}

.semi-bold{
    font-weight:600;
}

.table-y{
    padding-top:18px;
    padding-bottom:18px;
}

.bg-iq {
    background-color: #27747A;
}
.text-iq{
    color: #27747A;
}
.text-orange{
    color: #E18A54;
}
.text-green{
    color: #28A779
}


@media (max-height:630px){
    .question-text{
        height:160px!important;
    }
    .question-container > svg{
        max-height:calc(25.4vh)!important;
    }
    .question-container{
        margin-top:0px!important;
        
    }
    .general-question-text{
        margin-top: 0.2rem!important;
    }
    .answer-letters{
        display:none!important;
    }
    .my-input{
        display: block!important;
        height:5px!important;
    }

    #submit_button.btn{
        margin-top:10px!important;
    }

}

@media (min-height:630px) and (max-height:680px){
    .question-text{
        height:160px!important;
    }
    .question-container{
        margin-top:0px!important;
    }
    .general-question-text{
        margin-top: 0.2rem!important;
    }
    .answer-letters{
        display:none!important;
    }
    .answer-option{
        aspect-ratio: 1 / 1;
    }
    .my-input{
        display: block!important;
        height:5px!important;
    }

    #submit_button.btn{
        margin-top:10px!important;
    }
}
@media (max-width: 991px) and (max-height:680px){
    .answer-option {
        max-height: 108px;
        aspect-ratio: 1 / 1;
    }
    .question-text{
        height:160px!important;
    }
}

@media (min-height:681px) and (max-height:750px){
    .question-container{
        margin-top:5px!important;
    }
    .general-question-text{
        margin-top: 0.5rem!important;
    }
    .answer-letters{
        display:none!important;
    }
    .my-input{
        display: block!important;
        height:10px!important;
    }
    .answer-option {
        max-height: 108px;
        aspect-ratio: 1 / 1;
    }
    #submit_button.btn{
        margin-top:15px!important;
    }
}

@media (max-width:391px){
    h1{
        font-size:30px!important;
    }
    .h-block{
        height:600px;
    }
    #timer.small{
        font-size:14px!important;
    }
    .dropdown-toggle-list{
        width:300px;
    }

}

@media (max-width:991px){
    .dropdown-toggle-list{
        width: 350px;
    }
    .btn-facebook{
        margin-top: 20px;
    }
    .btn-facebook > svg{
        width:20px;
    }
    .or_line{
        height: 12px; 
        margin-top: 20px;
    }
    .or_line > span{
        font-size:16px;
        padding-left: 30px;
        padding-right:30px;
    }
    #timer.small{
        margin-left:10px;
        font-size:14px;
        margin-top:9px;
        float:left;
        font-family: 'Abril Fatface', cursive;
        color:#27747A;
    }
    #test_right_upper_small{
        position:relative;
        margin-right:10px;
        font-size:14px;
        margin-top:9px;
        float:right;
        font-family: 'Abril Fatface', cursive;
        color:#27747A;
    }
    .test_right_upper_small_container{
        height:35px;
        width:100%;
    }
    .progress-bar{
        border-radius:25px!important;
    }
    .qp-unit{
        height: 4px;
        width: 3%!important;
        margin-left:0.1667%;
        margin-right:0.1667%;
        border-radius: 5px;
    }
    #timer.small{
        font-size:14px!important;
    }
    .general-question-text{
        font-size:14px;
    }
    .question-container > svg, .mw-600 > svg{
        height:270px!important;
        max-width:100%!important;
    }
    .question-text{
        height:270px!important;
        max-width:100%!important;
    }
    .h-block{
        height:700px;
    }
    .h-pad{
        padding-top:155px;
    }
    
    .c-home{
        padding-top:40px;
    }
    .fs-36-20{
        font-size:20px!important;

    }
    .text-regular{
        font-size: 14px;
    }
    .text-second{
        font-size:14px;
    }
    .s2030{
        font-size:20px;

    }
    h1{
        font-size:36px;
    }
    h2{
        font-size:24px;
    }
    h3{
        font-size:16px!important;
    }
    .h2_secondary{
        font-size:16px;
    }
    .bg-image{
        background-image: url("bg-small.71d9fff37455.svg")
    }
    .answer-option{
        max-height:110px;
    }
    .text-option{
        font-size:16px;
    }
    .text-alphabet{
        color: #E18A54;
        opacity: 0.15;
        font-size: 16px;
    }
    .text-correct{
        color: #00B81D;
        font-size: 16px;
    }
    .text-incorrect{
        color: #FF0000;
        font-size: 16px;
    }
    .question-container{
        margin-top:16px;
    }

    #timer{
        margin-left:16px;
        margin-top: 10px;
        float:left;
    }

    #progress-bar-container{
        margin-bottom:6px;
    }

    #question-progress{
        margin-top: 5px;
    }
    #test_right_upper{
        margin-top: 10px;
        margin-right:16px;
        float:right;
    }
    .progress{
        height:6px;
    }

}

@media (min-width: 992px) {
    
    .dropdown-toggle-list{
        width:350px;   
    }
    .answer-option{
        height:12.4vw!important;
        aspect-ratio: 1 / 1;
    }
    .btn-facebook{
        margin-top: 20px;
    }
    .btn-facebook > svg{
        width:20px;
    }

    .or_line{
        height: 20px; 
        margin-top: 50px;
    }
    .or_line > span{
        font-size:24px;
        padding-left: 60px;
        padding-right:60px;
    }
    .move-up{
        margin-top: -17px!important;
        margin-left:50px;
        margin-right:50px;
    }
    #timer.small{
        margin-left:56px;
        font-size:20px;
        margin-top: 24px;
        float:left;
        font-family: 'Abril Fatface', cursive;
        color:#27747A;
    }
    #test_right_upper_small{
        margin-top: 24px;
        margin-right:56px;
        margin-left:10px;
        float:right;
        font-family: 'Abril Fatface', cursive;
        font-size: 20px;
        color:#27747A;
    }
    .test_right_upper_small_container{
        height:24px;
        width:100%;
    }
    .progress-bar{
        border-radius:25px!important;
    }
    .qp-unit{
        height: 10px;
        width: 3%!important;
        margin-left:0.1667%;
        margin-right:0.1667%;
        border-radius: 25px;
    }
    .general-question-text{
        font-size:24px;
    }
    .question-text{
        height:350px;
        max-height:30vh;
    }

    .question-container > svg, .mw-600 > svg{
        height:350px;
        max-width:600px;
        max-height:30vh;


    }
    .h-block{
        height:758px;
    }
    .h-pad{
        padding-top:215px;
    }
    
    .c-home{
        padding-top:140px;
    }
    .fs-36-20{
        font-size:36px!important;
    }
    .text-regular{
        font-size: 18px;
    }
    .text-second{
        font-size:16px;
    }
    li::marker{
        height: 100%;
        line-height: 40px;
        vertical-align: center;
        font-size:20px;
    }
    footer{
        height: 122px;
        background-color: #27747A;
    }
    .s2030{
        font-size:30px;

    }
    h1{
        font-size:50px;
    }
    h2{
        font-size:40px;
        font-weight:400;
    }
    h3{
        font-size:24px!important;
    }
    .h2_secondary{
        font-size:20px;
    }
    .navbar {
        height: 110px;
    }

    .navbar-brand {
        padding-left: 178px;
    }

    .nav-link {
        margin-left: 77px;
    }

    .navbar-nav {
        padding-right: 178px;
    }
    .bg-image{
        background-image: url("bg.7524b7852074.svg")
    }
    .answer-option{
        min-height:140px!important;
        max-height:195px!important;
    }
    .text-option{
        font-size:36px;
    }
    .text-alphabet{
        color: #E18A54;
        opacity: 0.15;
        font-size: 27.55px;
    }    
    .text-correct{
        color: #00B81D;
        font-size: 27.55px;
    }
    .text-incorrect{
        color: #FF0000;
        font-size: 27.55px;
    }

    .question-container{
        margin-top:21px;
    }
    #timer{
        margin-left:56px;
        margin-top: 48px;
        float:left;
    }
    #progress-bar-container{
        margin-top:14px;
    }
    #question-progress{
        margin-top: 11px;
    }
    #test_right_upper{
        margin-top: 48px;
        margin-right:56px;
        float:right;
    }
    .progress{
        height:10px;
    }
}

p{
    font-size:18px;
}
.text-second{
    color: #898989;
    max-width: 346px;
    margin-left:auto!important;
    margin-right:auto!important;

}
.bg-orange{
    background-color: #E18A54!important;
}

.bg-empty{
    background-color: #FDF6F0;
}
.btn{
    min-width:260px;
    padding-top:19px;
    padding-bottom:19px;
   
}
.bg-without-image{
    background-color: #FDF6F0;
}
.bg-without-image-lighter{
    background-color: #FFFCF8;
}


svg text tspan{
    fill: #E18A54;
}

#submit_button:disabled{
    background-color: transparent;
    color: #E1E1E1;
    border-color: #E1E1E1;
    background-color: #FDF6F0;

}

.bg-option{
    background-color: #FDF6F0;
}


#submit_button{
    background-color: transparent;
    color: #E18A54;
    border-color: #E18A54;

}
#submit_button svg{
    fill: #E18A54;
    stroke: #E18A54;
}

#submit_button:disabled svg{
    fill: #E1E1E1;
    stroke: #E1E1E1;
}



.my-label{
    cursor:pointer;
}

.answer-option:hover {
    -webkit-box-shadow: 0px 3px 5px 0px #e8e8e8;
    box-shadow: 0px 3px 5px 0px #e8e8e8;
  }

  
input[type="radio"]:checked + .text-alphabet + .answer-option {
    border: 2px solid #E18A54!important;
  }

input[type="radio"]:checked + .text-alphabet {
    color: #E18A54;
    opacity:1;
}

.mw-600{
    max-width:600px;
}
#timer, #test_right_upper{
 color:#27747A;
 font-size: 24px;
}



.border-correct{
    border: 1px #00B81D solid ;
}
.border-incorrect{
    border: 1px #FF0000 solid ;
}
.lnc-if tspan, .lnc-then tspan{
    fill:#303030!important;
}
.lnc-qd0 tspan,.lnc-qd1 tspan {
    fill:#E18A54!important;
}

.lnc-qd2 tspan, .lnc-qd3 tspan{
    fill:#27747A!important;
}
.lnc-equals tspan{
    fill: #303030!important;
}
tspan.math_puzzle {
    fill: #303030!important;
}
tspan.math_puzzle_question_mark{
    fill:#E18A54!important;
}
.ws_text tspan{
    font-size: 40px;
}

svg text tspan {
    font-family: 'Poppins', sans-serif!important;
}
.answer-option{
    font-family: 'Poppins', sans-serif!important;
}

.answer-option svg {
    max-height: 100%;
}
.answer-option:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}
@media (min-width: 420px){
.col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}
}

.btn-facebook {
    color: #fff!important;
    background-color: #3b5998!important;
    border-color: rgba(0,0,0,0.2);

}
.btn-facebook:hover {
    color: rgb(238, 238, 238)!important;
    background-color: #28427a!important;
    border-color: rgba(0,0,0,0.2);
 
}

.flex-row{
   /* display: flex;
   display: -webkit-flex;  */
   flex-wrap:wrap;
   -webkit-flex-wrap: wrap;
   -webkit-justify-content: center;
           justify-content: center;
}
.flex-row:before, .flex-row:after{
  display: none;
}
.answer-option{
    aspect-ratio: 1 / 1;
}
.geometric_figure_svg{
    max-height:80%!important;
    overflow: visible;
}

.title-font {
    font-family: "Abril Fatface", sans-serif;
    font-weight: 400;
    color: #303030; 
    text-align:left;
    }
  .title_size-l {
    font-size: 2rem;
    line-height: calc(30 / 20); }
  .title_size-m {
    font-size: 1.8rem;
    line-height: calc(27 / 18); }
  .title_size-s {
    font-size: 1.6rem;
    line-height: calc(24 / 16);
    color: rgba(51, 0, 51, 0.75); }
  .title_size-xs {
    font-size: 1.2rem;
    line-height: calc(18 / 12); }

@media screen and (max-width: 991px) {
  .title_size-l {
    font-size: 1.6rem;
    line-height: calc(24 / 16); }
  .title_size-m {
    font-size: 1.6rem;
    line-height: calc(24 / 16); }
  .title_size-s {
    font-size: 1.1rem;
    line-height: calc(16 / 11); } }

.ranking {
    background: #fffcf8; }
    .ranking-container {
      max-width: 1179px;
      width: 100%;
      margin: 0 auto; }
    .ranking-wrapper {
      padding: 140px 0; }
    .ranking-title {
      margin-bottom: 70px;
      font-size: 2.5rem;
      line-height: calc(54 / 40);
      text-align: center; }
      .ranking-col-title {
        margin-bottom: 40px;
        font-size: 2.8rem;
        line-height: calc(38 / 28); }
      .ranking-list {
        display: grid;
        grid-gap: 36px;
        padding: 0;
        margin: 0;
        margin-bottom: 26px; }
        .ranking-list-link {
          display: inline-block;
          color: #303030;
          font-size: 1.8rem;
          line-height: calc(27 / 18);
          text-decoration: underline; }
          .ranking-list-link:hover {
            color: #303030;
            opacity: 0.75; }
      .ranking-item-link {
        text-align:left;
        display: inline-block;
        color: #303030;
        font-size: 1.2rem;
        line-height: calc(36 / 24);
        text-decoration: underline;
        margin-bottom: 2px;
        font-weight: 500; }
        .ranking-item-link:hover {
          color: #303030;
          opacity: 0.75; }
      .ranking-item-iq {
        font-size: 1rem;
        line-height: calc(27 / 18);
        text-align:left;
        color: #303030;
        margin: 0; }
      .ranking-item-img {
        margin-right: 16px;
        width: 62px;
        height: 62px;
        aspect-ratio: 1 / 1;
     }
        .ranking-item-img img {
          max-width: 100%;
          max-height: 100%;
          -o-object-fit: contain;
             object-fit: contain; }
          .ranking-item-img img.country-img {
            border: 2px solid;
            border-image-source: linear-gradient(135.76deg, #ffffff 38%, #e2e2e2 74.21%);
            -webkit-box-shadow: 0px 2.69px 6.06px 0px #00000040;
                    box-shadow: 0px 2.69px 6.06px 0px #00000040;
            border-radius: 50%; }
        .ranking-item-img span {
          width: 100%;
          height: 100%;
          display: grid;
          place-items: center;
          background: #d9d9d9;
          outline: 2px solid #303030;
          border-radius: 50%;
          font-size: 1.4rem;
          line-height: calc(33 / 22); }
    
    @media screen and (max-width: 991px) {
      .ranking-container {
        max-width: calc(100% - 30px); }
      .ranking-wrapper {
        padding: 70px 0; }
      .ranking-title {
        margin-bottom: 40px;
        font-size: 2.4rem;
        line-height: calc(32 / 24); }
      .ranking-list {
        grid-gap: 24px;
        margin-bottom: 20px; }
        .ranking-list-link {
          font-size: 1.4rem;
          line-height: calc(21 / 14); }
      .ranking-col {
        margin-bottom: 36px; }
        .ranking-col:last-child {
          margin-bottom: 0; }
        .ranking-col-title {
          margin-bottom: 30px;
          font-size: 2rem;
          line-height: calc(27 / 20); }
      .ranking-item-img {
        width: 52px;
        height: 52px; }
        .ranking-item-img span {
          font-size: 1.8rem;
          line-height: calc(27 / 18); }
      .ranking-item-link {
        
        font-size: 1.2rem;
        line-height: calc(26 / 20); }
      .ranking-item-iq {
        font-size: 1.4rem;
        line-height: calc(21 / 14); } }
    
    @media screen and (max-width: 991px) {
      .table-item-desktop {
        display: none; } }
    
.image-container svg{
    max-width:600px;
    width:100%;
}
    .graph img{
        max-width:100%;
    }
    figure{
        max-width:700px;
    }
.whatis{
    padding-left:15px;
    font-size:12px;
    
}