/************************** 

* Import style

***************************/

/* MEdia */

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

@media (min-width: 1200px) {

  .container,

  .container-lg,

  .container-md,

  .container-sm,

  .container-xl {

    max-width: 980px; } }

/************************** 

* Media Queries

***************************/

/************************** 

* Import style

***************************/

body {

  height: 100%;

  width: 100%;

  font-family: 'Tajawal', sans-serif;

  direction: rtl;

  text-align: right;

  background: url(../../image/bg-color.png);

  background-size: cover; }

#page{
    padding-top: 70px;
    padding-bottom: 70px;
}

  samp{

    font-family: 'Tajawal', sans-serif;

  }



/************************** 

* Logo

***************************/

.myLogo {

  margin-bottom: 73px; }

  .myLogo .myLogo__img {

    margin-left: auto;

    margin-right: auto;

    width: 153px; }

    .myLogo .myLogo__img img {

      width: 100%;

      height: 100%; }



/************************** 

* Logo

***************************/

.myQuiz__carousel .myItem__carousel {

  display: inline-block;

  width: 100%; }

  .myQuiz__carousel .myItem__carousel .items {

    width: 100%; direction: rtl; }

    @media (max-width: 991px) {

      .myQuiz__carousel .myItem__carousel .items {

        text-align: center; } }

    @media (max-width: 480px) {

      .myQuiz__carousel .myItem__carousel .items {

        text-align: center; } }

    @media (max-width: 320px) {

      .myQuiz__carousel .myItem__carousel .items {

        text-align: center; } }

    .myQuiz__carousel .myItem__carousel .items:last-child {

      margin-right: 0; }

    .myQuiz__carousel .myItem__carousel .items a {

      display: inline-block;

      height: 222px;

      width: 222px;

      margin-left: 12px;

      margin-bottom: 30px; }

      @media (max-width: 1199px) {

        .myQuiz__carousel .myItem__carousel .items a {

          height: 217px;

          width: 217px; } }

      @media (max-width: 320px) {

        .myQuiz__carousel .myItem__carousel .items a {

          margin-left: 0px; } }

      .myQuiz__carousel .myItem__carousel .items a .quiz__quiz {

        background: linear-gradient(-180deg, #ffd400, #ffbb00);

        text-align: center;

        position: relative;

        height: 100%;

        width: 100%;

        border-radius: 164px;

        padding-top: 33px;

        float: right; }

        .myQuiz__carousel .myItem__carousel .items a .quiz__quiz:nth-child(4n+4) {

          margin-left: 0; }

        .myQuiz__carousel .myItem__carousel .items a .quiz__quiz img {
       width: auto;
       max-height: 50px;
       position: absolute;
       left: 20px;
       top: 0; 
     }

        .myQuiz__carousel .myItem__carousel .items a .quiz__quiz .qst {

          font-weight: 700;

          font-size: 26px;

          color: #0033a4;

          margin-bottom: 46px; }

        .myQuiz__carousel .myItem__carousel .items a .quiz__quiz .names {

          font-weight: 900;

          font-size: 36px;

          color: #0033a4;

          margin-top: 60px;

          margin-bottom: 0; }

        .myQuiz__carousel .myItem__carousel .items a .quiz__quiz .ville {

          font-weight: 500;

          font-size: 26px;

          color: #0033a4; }



/*

.slick-slider {

  direction: ltr; }

  */



.slick-prev.slick-arrow {

  position: absolute;

  top: 50%;

  left: -10%; }



.slick-next.slick-arrow {

  position: absolute;

  top: 50%;

  right: -10%; }



img.arrow__left.slick-arrow {

  position: absolute;

  top: 29%;

  cursor: pointer;

  left: -10%; }

  @media (max-width: 1199px) {

    img.arrow__left.slick-arrow {

      display: inline !important;

      left: -10%; } }

  @media (max-width: 480px) {

    img.arrow__left.slick-arrow {

      display: none !important; } }



img.arrow__right.slick-arrow {

  position: absolute;

  top: 29%;

  cursor: pointer;

  right: -11%; }

  @media (max-width: 1199px) {

    img.arrow__right.slick-arrow {

      display: inline !important;

      right: -10%; } }

  @media (max-width: 480px) {

    img.arrow__right.slick-arrow {

      display: none !important; } }



/************************** 

* Quiz page

***************************/

.questions {

  margin-bottom: 40px; }

  .questions .title__section {

    text-align: center;

    direction: ltr;

     }

    .questions .title__section .number__quiz {

     background: #0033a3;
    color: #fff;
    width: 102px;
    height: 78px;
    margin-bottom: 0;
    display: inline-block;
    border-radius: 20px;
    line-height: 78px;
    font-weight: 800;
    font-size: 33px;
    margin-right: 10px;
    border: 4px solid #ffd500; }

      @media (max-width: 1199px) {

        .questions .title__section .number__quiz {

          float: none;

          margin-left: auto;

          margin-right: auto;

          margin-bottom: 30px; } }

    .questions .title__section .prev {font-size: 35px;cursor: pointer;display: initial;float: left;color: #0033a4;margin-bottom: 0;padding-top: 12px; direction:rtl; }

      .questions .title__section .prev img {

        width: 22px; }

      @media (max-width: 1199px) {

        .questions .title__section .prev {

          float: none;

          margin-left: auto;

          margin-right: auto;

          margin-bottom: 30px;

          display: inherit; } }

    .questions .title__section h2 {

      display: inline-block;

      color: #0033a4;

      text-align: right;

      border-radius: 20px;

      padding: 19px 30px;

      padding-bottom: 0;

      padding-top: 0px;

      margin-bottom: 0;

      background: url(../../image/qst__title.png);

      background-position: initial;

      position: relative;

      top: -8px;

       }
   
      @media (max-width: 991px) {

        .questions .title__section h2 {

          background-size: cover; } }
  
      @media (max-width: 767px) {
        .arrangement .list__arrangement ul li h2{
            font-size: 26px !important;
        }
        .arrangement .list__arrangement ul li .number{
            font-size: 60px !important;
        }
        .questions .title__section h2 {

          background-size: cover; } }

      @media (max-width: 600px) {

        .questions .title__section h2 {

          background-size: cover; } }

      @media (max-width: 480px) {

        .questions .title__section h2 {

          background-size: cover; } }

      @media (max-width: 320px) {

        .questions .title__section h2 {

          background-size: cover; } }

      .questions .title__section h2 .qst {

        font-weight: 700;

        font-size: 33px; }

      .questions .title__section h2 .number {

        width: 42px;

        margin-top: -53px; }

        @media (max-width: 991px) {

          .questions .title__section h2 .number {

            margin-top: -79px; } }

        @media (max-width: 767px) {

          .questions .title__section h2 .number {

            margin-top: -18px; } }

        @media (max-width: 480px) {

          .questions .title__section h2 .number {

            margin-top: -18px; } }

        @media (max-width: 320px) {

          .questions .title__section h2 .number {

            margin-top: -18px; } }

      .questions .title__section h2 .names {

        font-weight: 900;

        font-size: 65px;

        position: relative;

        top: 10px;}

      .questions .title__section h2 .vilee {

        font-weight: 500;

        font-size: 52px; }



.quiz__select .content p {

  text-align: center;

  color: #0033a4;

  font-size: 29px;

  font-weight: 700;

  max-width: 1339px;

  margin-left: auto;

  margin-right: auto;

  direction: ltr;

  margin-bottom: 40px;

  padding-top: 30px; }

  @media (max-width: 991px) {

    .quiz__select .content p {

      padding-left: 15px;

      padding-right: 15px; } }

.quiz__select .item__quiz {

  margin-bottom: 70px; }

  @media (max-width: 991px) {

    .quiz__select .item__quiz {

      margin-bottom: 30px; } }

  @media (max-width: 767px) {

    .quiz__select .item__quiz {

      margin-bottom: 30px; } }

  @media (max-width: 480px) {

    .quiz__select .item__quiz {

      margin-bottom: 30px; } }

  @media (max-width: 320px) {

    .quiz__select .item__quiz {

      margin-bottom: 30px; } }

  .quiz__select .item__quiz a {

    text-decoration: none;

    color: #0033a4;

    background: #ffba00;

    border: 4px solid #ffe24e;

    border-radius: 20px;

    font-weight: 800;

    font-size: 27px;

    padding-right: 15px;

    line-height: 64px;

    height: 66px;

    margin-bottom: 0;
    overflow: hidden;

    display: inherit; }

    @media (max-width: 480px) {

      .quiz__select .item__quiz a {

        height: auto; } }

    .quiz__select .item__quiz a .numbers__qst {

      margin-left: 10px; }



.sendBtn {

  text-align: center;

  margin-top: 56px;

  position: relative; }

  @media (max-width: 991px) {

    .sendBtn {

      margin-top: 0px; } }

  @media (max-width: 767px) {

    .sendBtn {

      margin-top: 0px; } }

  @media (max-width: 480px) {

    .sendBtn {

      margin-top: 0px; } }

  @media (max-width: 320px) {

    .sendBtn {

      margin-top: 0px; } }

  .sendBtn .img__send {

    position: absolute;

    margin-left: auto;

    margin-right: auto;

    left: 50%;

    transform: translateX(-50%);

    top: -120%; }

    @media (max-width: 991px) {

      .sendBtn .img__send {

        position: relative;

        margin-left: auto;

        margin-right: auto;

        left: auto;

        transform: translateX(0%);

        top: 0; } }

    @media (max-width: 767px) {

      .sendBtn .img__send {

        position: relative;

        margin-left: auto;

        margin-right: auto;

        left: auto;

        transform: translateX(0%);

        top: 0; } }

    @media (max-width: 480px) {

      .sendBtn .img__send {

        position: relative;

        margin-left: auto;

        margin-right: auto;

        left: auto;

        transform: translateX(0%);

        top: 0; } }

    @media (max-width: 320px) {

      .sendBtn .img__send {

        position: relative;

        margin-left: auto;

        margin-right: auto;

        left: auto;

        transform: translateX(0%);

        top: 0; } }

  .sendBtn a {

    background: url(../../image/btnsend.png);

    background-size: contain;

    width: 100%;

    height: 100%;

    padding: 10px;

    background-position: center;

    background-repeat: no-repeat;

    display: inherit;

    text-decoration: none;

    font-size: 50px;

    font-weight: 800;

    color: #ffd70f; }

    @media (max-width: 991px) {

      .sendBtn a {

        font-size: 30px; } }

    @media (max-width: 767px) {

      .sendBtn a {

        font-size: 30px; } }

    @media (max-width: 480px) {

      .sendBtn a {

        font-size: 30px; } }

    @media (max-width: 320px) {

      .sendBtn a {

        font-size: 30px; } }

  .sendBtn.updating_answers .img__send {

    position: initial;

    left: auto;

    transform: translateX(0%);

    margin-top: 21px;

    width: 92px; }



.resultat {

  margin-bottom: 78px; }

  .resultat .btn__resultat {

    text-align: center; }

    .resultat .btn__resultat span {

      display: inline-block;

      margin-left: auto;

      margin-right: auto;

      background: #ffd500;

      border-radius: 10px;

      font-size: 65px;

      color: #0033a4;

      padding: 10px 30px;

      text-decoration: none;

      font-weight: 900; }

      @media (max-width: 320px) {

        .resultat .btn__resultat span {

          font-size: 37px; } }



.resultat__qst .item__resultat-qst {

  margin-bottom: 30px;

  background: #70bf7d;

  border-radius: 20px; }

  .resultat__qst .item__resultat-qst h2 {

    color: #fff;

    font-weight: 800;

    font-size: 27px;

    padding-right: 10px;

    margin-bottom: 0;

    padding: 10px;

    padding-left: 0; }

    .resultat__qst .item__resultat-qst h2 .names {

      font-weight: 900;

      font-size: 30px; }

  .resultat__qst .item__resultat-qst.false {

    background: #cf4c56; }



/************************** 

*arrangement

***************************/

.arrangement__title .title {

  display: inline-block;

  width: 100%;

  text-align: center;

  margin-bottom: 64px; }

  .arrangement__title .title h2 {

    font-size: 85px;

    font-weight: 800;

    color: #0033a4; }



.arrangement .list__arrangement {

  display: inline-block;

  width: 100%; }

  .arrangement .list__arrangement ul {

    padding-right: 0;

    margin-bottom: 0; }

    .arrangement .list__arrangement ul li {

      display: flex;

      align-items: center; }

      .arrangement .list__arrangement ul li .number {

        font-size: 85px;

        font-weight: 800;

        color: #0033a4;

        position: relative;

        top: 5px;

        width: 7%; }

        @media (max-width: 480px) {

          .arrangement .list__arrangement ul li .number {

            width: 12%; } }

      .arrangement .list__arrangement ul li h2 {

        margin-bottom: 0;

        font-size: 50px;

        font-weight: 800;

        color: #0033a4;

        padding-right: 30px;

        display: inline-block;

        position: relative;

        width: 93%;

        background: #ffba00;

        border: 4px solid #ffe876;

        border-radius: 100px;

        height: 76px;

        line-height: 76px; }

        @media (max-width: 991px) {

          .arrangement .list__arrangement ul li h2 {

            background: #ffba00;

            border: 4px solid #ffe24e;

            border-radius: 100px; } }

        .arrangement .list__arrangement ul li h2 .arrangement__number {
          float: left;
          color: #ffffff;
          background: #0033a4;
          border-radius: 50px;
          padding-left: 20px;
          padding-right: 20px;
          border: 6px solid #ffe876;
          margin-left: -8px;
          margin-top: -4px;
          height: 76px;
          line-height: 66px;
          font-family: 'arial'; 
         }

          @media (max-width: 991px) {

            .arrangement .list__arrangement ul li h2 .arrangement__number {

              margin-left: -11px;

              margin-top: -10px; } }



/************************** 

* Select

***************************/

.participants {

  text-align: center; }



.cont_select_center {

  display: inline-block; }



.icon_select_mate {

  position: absolute;

  top: 18px;

  left: 4%;

  font-size: 16px;

  width: 19px;

  transition: all 275ms; }

  @media (max-width: 375px) {

    .icon_select_mate {

      top: 10px; } }

  .icon_select_mate img {

    width: 100%;

    height: 100%; }



.select_mate {

  position: relative;

  float: left;

  min-width: 380px;

  width: 380px;

  color: #777;

  font-weight: 300;

  background-color: transparent;

  border-radius: 20px;

  transition: all 375ms ease-in-out; }

  @media (max-width: 600px) {

    .select_mate {

      min-width: 100%;

      width: 100%;

      display: inline-block; } }

  .select_mate select {

    position: absolute;

    overflow: hidden;

    height: 0px;

    opacity: 0;

    z-index: -1; }



.cont_list_select_mate {

  position: relative;

  float: left;

  width: 100%; }



.cont_select_int {

  position: initial;

  left: 0px;

  top: 0px;

  z-index: 999;

  overflow: hidden;

  height: 0px;

  width: 100%;

  background-color: #fff;

  padding: 0px;

  margin-bottom: 0px;

  transition: all 375ms ease-in-out;

  margin-top: 13px;

  border-radius: 20px; }

  .cont_select_int li {

    position: relative;

    float: left;

    width: 100%;

    border-bottom: 1px solid #ececec;

    background-color: #fff;

    list-style-type: none;

    padding: 10px 2%;

    margin: 0px;

    transition: all 275ms ease-in-out;

    display: block;

    cursor: pointer;

    font-size: 30px;

    font-weight: 900;

    color: #282828; }

    .cont_select_int li:first-child {

      display: none; }

    .cont_select_int li:last-child {

      border-radius: 3px;

      border-bottom: 0px; }

    .cont_select_int li:hover {

      background-color: #EEEEEE; }

  .cont_select_int .active {

    background-color: #EEEEEE; }



.selecionado_opcion {

  padding: 5px 20px 0 0;

  width: 100%;

  display: block;

  margin: 0px;

  cursor: pointer;

  background: #003ca3;

  color: #fff;

  font-size: 37px;

  text-align: right;

  border-radius: 20px; }

  @media (max-width: 600px) {

    .selecionado_opcion {

      display: inline-block; } }

  @media (max-width: 375px) {

    .selecionado_opcion {

      font-size: 27px; } }



.confirmation {

  width: 380px;

  margin-left: auto;

  margin-right: auto;

  border-radius: 20px;

  margin-top: 20px; }

  @media (max-width: 600px) {

    .confirmation {

      min-width: 100%;

      width: 100%; } }

  .confirmation a {

    text-decoration: none;

    font-weight: 900;

    font-size: 50px;

    background: #003ca3;

    color: #fff;

    border-radius: 20px;

    padding-top: 15px;

    padding-bottom: 5px;

    display: inherit; }

    @media (max-width: 375px) {

      .confirmation a {

        font-size: 27px; } }



/*# sourceMappingURL=style.css.map */



/* By Dev */

.lds-ring {

  display: inline-block;

  position: absolute;

  width: 80px;

  height: 80px;

  left: 50%;

  top: 40%;

  margin-left: -40px;

}

.lds-ring div {

  box-sizing: border-box;

  display: block;

  position: absolute;

  width: 64px;

  height: 64px;

  margin: 8px;

  border: 8px solid #ffd500;

  border-radius: 50%;

  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

  border-color: #ffd500 transparent transparent transparent;

}

.lds-ring div:nth-child(1) {

  animation-delay: -0.45s;

}

.lds-ring div:nth-child(2) {

  animation-delay: -0.3s;

}

.lds-ring div:nth-child(3) {

  animation-delay: -0.15s;

}

@keyframes lds-ring {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



.loader-show{

  position: fixed;

  left: 0;

  top: 0;

  bottom: 0;

  right: 0;

  z-index: 1000;

  background: rgba(0,0,0,0);

  height: 100%;

  width: 100%;

}

.question-section{

  display: none;

}



a{

  outline: none !important;

}

.flag-stop{

  position: absolute;

  background: rgba(255,255,255, 0);

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: 2000;

}

.contain-quest{

  position: relative;

}

.btn-suiv{

  display: none

}

.disable-question .item__quiz{

  opacity: .5;

}

.quiz__select .item__quiz a.active{

    color: #ffe24e;

    background: #0033a4;

}



.quiz__select .item__quiz a.active-rep {

    color: #fff !important;

    background: #70bf7d !important;

    border-color: #70bf7d !important;

}

.slick-disabled{

  opacity: .5;

}

.item__quiz samp{

  display: inline-block;

}

  
.selecionado_opcion {
    padding-top: 0;
    height: 55px;
    line-height: 55px;
}

.icon_select_mate {
    top: 16px;
}

.quiz_select .item_quiz a {
    line-height: 56px;
    height: 66px;
}

.questions .title__section h2 {
    display: inline-block;
    color: #0033a4;
    text-align: right;
    border-radius: 20px;
    padding: 0px 30px;
    padding-bottom: 0;
    padding-top: 0px;
    margin-bottom: 0;
    background: none;
    background-position: ;
    position: relative;
    top: 0px;
    height: 78px;
    line-height: 78px;
    padding-top: 0;
    background: #ffba00;
    border: 4px solid #ffe24e;
}

.questions .title__section h2 .names {
    font-weight: 900;
    font-size: 33px;
    position: relative;
    top: 0;
}   

.questions .title__section .number__quiz{
    background: #0033a3;
    color: #fff;
    width: 102px;
    height: 78px;
    margin-bottom: 0;
    display: inline-block;
    border-radius: 20px;
    line-height: 73px;
    font-weight: 800;
    font-size: 37px;
    margin-right: 10px;
    border: 4px solid #ffd500;
    font-family: 'arial';
}  

@media (max-width: 1280px) {

  .select_mate select {

    position: absolute;

    overflow: hidden;

    height: 60px;

    opacity: 0;

    z-index: 1000;  

    width: 100%; 

    left: 0;

  }



  .myItem__carousel .arrow__right,

  .myItem__carousel .arrow__left{

    display: none !important

  }

}
.name-question{
  direction: rtl !important
}