body {
    overflow: hidden;
    line-height: 1.5;
    background-color: rgb(0, 0, 0);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    font-family: sans-serif;
    font-family: 'Tajawal' !important;
    width: 100% !important;
    height: 100% !important;
  }

  section {
    padding: 80px 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    background-color: #000000 !important;
    color: white !important;
    min-height: 100vh;
  }
  .at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg>span {
    background-color: #a20014 !important;
  }
  .modal-body img{
    width: 100%;
  }
  .p-b-0{
    padding-bottom: 0 !important;
  }
  .m-h-a{
    min-height: auto !important;
  }
  #mobile{
    display: none;
  }
  #desktop{
    display: block;
  }
  #btn-back{
    display: none;
    z-index: 9999999999999999999999999;
  }
  #btn-next{
    display: none;
    z-index: 9999999999999999999999999;
  }


  .loader{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: black;
    z-index: 99;
  }

  /* LOADER 4 */
      .loader-container{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      #loader-4 span{
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background-color: #a20014;
        margin: 35px 5px;
        opacity: 0;
      }

      #loader-4 span:nth-child(1){
        animation: opacitychange 1s ease-in-out infinite;
      }

      #loader-4 span:nth-child(2){
        animation: opacitychange 1s ease-in-out 0.33s infinite;
      }

      #loader-4 span:nth-child(3){
        animation: opacitychange 1s ease-in-out 0.66s infinite;
      }

      @keyframes opacitychange{
        0%, 100%{
          opacity: 0;
        }

        60%{
          opacity: 1;
        }
      }


  .btn-arrow-right {
    fill: var(--grey-light); }

   .arrow-right {
    right: -3px;
    position: absolute;
    margin: 0 auto;
    top: 47%;
    width: 50px;
    height: 50px;
    padding: 14px 14px 0 0;
    z-index: 100;
    cursor: pointer;
    /* background-color: #564c4c;
    border-radius: 100%; */
    box-sizing: border-box;
    transition: 0.3s;
  }

  /* .arrow-right:hover {
    background-color: #020a0d;
    transition: 0.3s;} */


  .btn-arrow-left {
    fill: var(--red-main);  }

  .arrow-left {
    position: absolute;
    margin: 0 auto;
    left: 2px;
    top: 47%;
    width: 50px;
    height: 50px;
    padding: 14px 14px 0 0;
    z-index: 100;
    cursor: pointer;
    /* background-color: #fff;
    border-radius: 100%; */
    box-sizing: border-box;
    transition: 0.3s;  }

/* .arrow-left:hover {
  background-color: #020a0d;
  transition: 0.3s;} */


    .arrow-right svg, .arrow-left svg {
      width: 16px;
      height: 13px; }

    .arrow-right, .arrow-left {
      width: 35px;
      height: 35px;
      padding: 11px 10px 0 0;  }


    .scrolldown-animation2 {
      animation: 1s ease-in-out 0s normal none infinite running scrolldown-keyframes;
      bottom: -21px;
      height: 50px;
      left: 50%;
      position: absolute;
      margin-left: -20px;
      width: 60px;
      z-index: 60;
    }
    .modal-content{
      background-color: #fff0 !important;
      background-clip: padding-box !important;
      border: 1px solid rgba(0, 0, 0, 0) !important;
    }
    .close{
      color: white !important;
      font-size: 35px;
      padding-bottom: 0 !important;
      padding-right: 4px !important;
    }
    .modal-header{
      border-bottom: 1px solid #e9ecef00 !important;
    }
    #logo{
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 9;
    }
    #logo img{
      width: 85px;
    }
    #logoD{
      position: absolute;
      top: 20px;
      right: 125px;

      z-index: 9;
    }
    #logoD img{
      width: 115px;
    }
    .typed-cursor {
      display: none;
    }
    .fixed{
      opacity: 1 !important;
    }
    .sidenav {
      position: fixed;
      height: 0;
      width: 100%;
      z-index: 9999999999;
      top: 0;
      left: 0;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 0px;
      background-color: #000000e6;
      background-image: url('../img/ergot.png');
      background-position: center;
      background-size: cover;
    }
    .sidenav-close{
      font-size: 34px;
      font-weight: 800;
      color: #000000b0;
      position: absolute;
      top: 5px;
      left: 12px;
      cursor: pointer;
    }
    .weahtText{
      width: 45px;
      line-height: 15px;
      font-size: 12px;
      font-weight: 700;
      color: white;
      position: fixed;
      /* padding: 6px; */
      bottom: 64px;
      right: 15px !important;
      z-index: 99999;
      opacity: 0;
      transition: all .5s;
    }
    .ergotdefinition {
      position: absolute;
      top: 50%;
      transform: translatey(-50%);
      left: 22px;
      width: 40%;
      padding: 18px;
      box-shadow: 0 10px 20px 0 #20130f;
      background-color: rgba(28, 26, 26, 0.70);
    }
    .white-bk-p2 {
      font-family: Tajawal;
      font-size: 18px;
      line-height: 28px;
      text-align: right;
      color: #ffffff;
    }
  .WheatFixed-container {
    opacity: 0;
    position: fixed;
    padding: 6px;
    border-radius: 100%;
    bottom: 10px;
    right: 12px !important;
    background-color: #c3972e;
    z-index: 99999;
    cursor: pointer;
    transition: all .5s;
  }
  .WheatFixed-container img{
    width: 35px;
    height: 35px;
  }
/* section1 */
    #section01{
      position: relative;
      height: 100vh;
    }
    #section01 .text-middle{
      display: flex;
      flex-direction: column;
      align-items: right;
      margin-top: 0;
      margin-right: 62%;
    }
    #section01 h1{
      font-size: 63px !important;
      margin-bottom: 10px !important;
      color: #b10419;
    }
    #section01 h2{
      font-size: 41px!important;
    }
    #section01 h3{
      font-size: 18px;
      margin-top: 0px;
    }
    .lyar{
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      z-index: -1;
      background-image: linear-gradient(#06060600,#060606ad, #020202fc);
    }
/* section1 */


/* section2 */
    .head-sect2 {
      font-size: 19px;
      font-weight: 800;
      line-height: 31px;
      letter-spacing: normal;
      text-align: right;
      color: #ffffff;
    }
    .head-sect3 {
      font-size: 23px;
      font-weight: 800;
      line-height: 31px;
      letter-spacing: normal;
      text-align: right;
      color: #ffffff;
      margin-top: 8px;
    }
    .argot-container{
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .argot-img img{
      width: 50px;
      height: 50px;
    }
    .argot-nums{
      margin-right: 16px;
    }
    .argot-num{
        font-size: 30px;
        font-weight: 800;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.64;
        letter-spacing: normal;
        text-align: right;
        color: #ffffff;
    }
    .argot-num-text{
        font-family: Tajawal;
        font-size: 15px;
        font-weight: 800;
        line-height: 29px;
        text-align: right;
        color: #ffffff;
        margin-top: -13px;
    }
/* section2 */

/* section3 */
    #section03{
      position: relative;
    }
    .lyar2{
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      z-index: -1;
      background-image: linear-gradient(#000000, #0000003d,#060606a6, #020202fc);
    }
    .lyar2B {
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      z-index: -1;
      background-image: linear-gradient(#000000,#000000cf, #00000030,#00000030,#060606c7, #020202);
  }
    .progress--circle {
      position: relative;
      display: inline-block;
      margin: 1rem;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: #ddd;
    }
    .progress--circle:before {
      content: '';
      position: absolute;
      top: 15px;
      left: 15px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background-color: white;
    }
    .progress--circle:after {
      content: '';
      display: inline-block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #63B8FF;
    }

    .progress__number {
      position: absolute;
      top: 50%;
      width: 100%;
      line-height: 1;
      margin-top: -0.75rem;
      text-align: center;
      font-size: 1.5rem;
      color: #777;
    }
    th img{
      width: 60px;
    }
    table{
      width: 60% !important
    }
/* section3 */

/* <!-- section-Map --> */
    #sectionMap {
      width: 100vw;
      height: 100vh !important;
      padding: 0 0 !important;
      position: relative;
    }
    .start-map{
      background-color: rgba(0, 0, 0, 0.88);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99999999999999999999999999;
      transition: all .5s;
      display: none;
    }
    .start-map-btn{
      background-color: #c3972d;
      padding: 5px 15px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 24px;
      position: absolute;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 99999999999999999999999999;
      display: none;
      transition: all .5s;
    }
    .start-map-btn:hover {
      background-color: #a07c27;
    }
    .start-map-btn:focus {
      background-color: #a07c27;
    }
    #sectionMap p{
      font-size: 16px;
    }
    .main-container{
      transform: scale(1.1,.95);
      /* background-image: url('../img/mapbk.jpg'); */
      position: relative;
      min-height: 100%;
      min-width: 1024px;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .Map-bk{
      position: absolute;
      /* transform: scale(0.7); */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(.7);
      min-height: 800px !important;
    }
    .path1-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -368px;
      margin-left: 183px;
      z-index: 9999999 !important;
      /* transform: scale(1.7); */

    }
    #wordFirst{
      /* transform: scale(1.7); */
    }
    .path2-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -383px;
      margin-left: 245px;
      z-index: 9999999 !important;
      /* transform: scale(1.7); */
    }
    .path4-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -98px;
      margin-left: 155px;
      z-index: 9999999 !important;
      opacity: 0;
    }
    .path5-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 180px;
      margin-left: 160px;
      z-index: 9999999 !important;
      opacity: 0;
    }
    .group1 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -120px;
      margin-left: 359px;
      z-index: 9999999 !important;
      /* transform: scale(1.7); */
    }
    .group2 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -391px;
      margin-left: 193px;
      width: 45px;
      z-index: 9999999 !important;
      /* transform: scale(1.7); */
    }
    .pulseClass{
      animation: pulse 1.5s infinite;
      animation-direction: alternate;
      -webkit-animation-name: pulse;
      animation-name: pulse;
    }
    @-webkit-keyframes pulse {
      0% {
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 0 0 rgba(172, 23, 23, 0.337);
      }
      50% {
        -webkit-transform: scale(1.2);
        -webkit-box-shadow: 0 0 0 10px rgba(204, 44, 44, 0);
      }
      100% {
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(172, 23, 23, 0.4);
        border-radius: 50%;
      }
      50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 10px rgba(204, 44, 44, 0);
        border-radius: 50%;
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
        border-radius: 50%;
      }
    }


    .pulseClass2{
      animation: pulse02 1.5s infinite;
      animation-direction: alternate;
      -webkit-animation-name: pulse02;
      animation-name: pulse02;
    }
    @-webkit-keyframes pulse02 {
      0% {
        -webkit-transform: scale(1);
      }
      50% {
        -webkit-transform: scale(1.2);
      }
      100% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes pulse02 {
      0% {
        transform: scale(1);
        border-radius: 50%;
      }
      50% {
        transform: scale(1.2);
        border-radius: 50%;
      }
      100% {
        transform: scale(1);
        border-radius: 50%;
      }
    }
    .city01{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -401px;
      margin-left: 276px;
      width: 45px;
      z-index: 9999999 !important;
    }
    .city02{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -403px;
      margin-left: 148px;
      width: 45px;
      z-index: 9999999 !important;
    }
    .city03{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -372px;
      margin-left: 130px;
      width: 45px;
      z-index: 9999999 !important;
    }

    .city04{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -108px;
      margin-left: 308px;
      width: 45px;
      z-index: 9999999 !important;
    }
    .city05{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 399px;
      margin-left: 434px;
      width: 45px;
      z-index: 9999999 !important;
    }
    .city06{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 390px;
      margin-left: 351px;
      width: 45px;
      z-index: 9999999 !important;
    }
    .nameCity{
      font-size: 14px;
      font-weight: bold;
    }
    .ship6cover{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 312px;
      margin-left: 380px;
      z-index: 9999999 !important;
    }
    #ship6{
      width: 70px;
      height: 70px;
      transform: rotatey(149deg) scale(1.15);
      opacity: 0;
    }

    .map-elemnts-pragraph-mobile{
        padding: 15px;
        width: 80%;
        top: 64px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(0, 0, 0, 0.81);
        color: white;
        position: absolute;
        z-index: 999999;
      }
      .map-mobile-p02{
        transform: translate(0,1200px)
      }
      .map-mobile-p03{
        transform: translate(0,1200px)
      }
      .map-mobile-p04{
        transform: translate(0,1200px)
      }
      .map-mobile-p05{
        transform: translate(0,1200px)
      }
      .map-mobile-p06{
        transform: translate(0,1200px)
      }
      .map-mobile-p07{
        transform: translate(0,1200px)
      }
      .map-mobile-p08{
        transform: translate(0,1200px)
      }
      .map-mobile-p09{
        transform: translate(0,1200px)
      }
      .map-mobile-p10{
        transform: translate(0,1200px);
        padding: 15px;
        width: 80%;
        top: 64px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(74, 70, 70, 0.88);
        color: white;
        position: absolute;
        z-index: 999999;
      }
      .map-mobile-p11{
        transform: translate(0,1200px)
      }
      .map-elemnts-pragraphFirst{
        padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
        background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
      }
    .map-elemnts-pragraphSecound{
        padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
        background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
        transform: translate(0,1200px)
    }
    .map-elemnts-pragraphThird{
        padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
        background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
        transform: translate(0,1200px)
    }
    .map-elemnts-boxRed01{
      color: white;
      position: absolute;
      width: 40%;
      top: 50%;
      left: 50%;
      margin-top: -290px;
      margin-left: -627px;
      z-index: 999999;
      transform: translate(0,1200px)
    }
    .map-elemnts-boxRed02{
      width: 40%;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -290px;
      margin-left: -627px;
      z-index: 999999;
      transform: translate(0,1200px)
    }
    .map-elemnts-boxRed03{
      width: 40%;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -290px;
      margin-left: -627px;
      z-index: 999999;
      transform: translate(0,1200px)
    }
    .map-elemnts-boxRed04{
      width: 40%;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -290px;
      margin-left: -627px;
      z-index: 999999;
      transform: translate(0,1200px)
    }
    .map-elemnts-boxRed04 .red-bk{
      font-size: 16px;
      line-height: 26px;
      text-align: right;
    }
    .red-bk span{
      font-size: 19px;
    }
    .map-elemnts-boxRed05{
      width: 40%;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -290px;
      margin-left: -627px;
      z-index: 999999;
      transform: translate(0,1200px)
    }
    .map-elemnts-pragraphThird2{
      padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
    background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
        transform: translate(0,1200px)
    }
    .map-elemnts-pragraphThird003{
      padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
    background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
        transform: translate(0,1200px)
    }
    .map-elemnts-pragraphFourth{
      padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
    background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
        transform: translate(0,1200px)
    }
    .map-elemnts-pragraphFifth{
      padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
    background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
        transform: translate(0,1200px)
    }
    .map-elemnts-pragraphSixth{
      padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
    background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
        transform: translate(0,1200px)
    }
    .map-elemnts-pragraphSeventh{
        padding: 20px;
        width: 40%;
        box-shadow: 0 11px 22px 0 #1c1e2acf;
    background-color: rgba(0, 0, 0, 0.72);
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -290px;
        margin-left: -627px;
        z-index: 999999;
        transform: translate(0,1200px)
    }
    #hero22{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -406px;
      margin-left: 148px;
      z-index: 999999999;
      opacity: 0;
    }
    #hero222{
      width: 44px;
      height: 44px;
      opacity: 0;
      /* transform: scale(1.7); */
    }
    #hero33{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -417px;
      margin-left: 225px;
      z-index: 999999999;
      opacity: 0;
    }
    #hero333{
      width: 44px;
      height: 44px;
      opacity: 0;
      /* transform: scale(1.7); */
    }
    #hero22Num{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -136px;
      margin-left: 109px;
      z-index: 999999999;
      opacity: 0;
    }
    #hero222Num{
      width: 70px;
      height: 70px;
      transform: scale(1);
      opacity: 0;
    }
    #hero225Num{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 140px;
      margin-left: 129px;
      z-index: 999999999;
      opacity: 0;
    }
    #hero2225Num{
      width: 70px;
      height: 70px;
      transform: rotatey(149deg) scale(1.15);
      opacity: 0;
    }

/* <!-- section-Map --> */

/* <!-- section3 --> */
    .sec3Head{
        font-family: Tajawal;
        font-size: 50px;
        font-weight: 300 !important;
        line-height: 1.64;
        text-align: center;
        color: #ffffff;
        margin-top: 90px;
    }
    .row-flex{
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-top: 35px;
    }
    .row-flex img{
      width: 150px;
      margin-left: 30px;
    }
    .rowChart-num{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
        margin-bottom: 10px;
    }
    .sec3P{
        font-size: 22px;
        font-weight: 300;
        line-height: 34px;
        color: #ffffff;
    }
/* <!-- section3 --> */

.white-bk-p{
    font-family: Tajawal;
    font-size: 20px;
    line-height: 31px;
    text-align: right;
    color: #ffffff;
}

    .chartRowContainer{
      /* display: flex; */
      /* width: 100%; */
      margin-top: 30px;
    }
    #myChart03{
      margin: 0 auto;
    }
    #myChart02{
      margin: 0 auto;
    }
    #myChart01{
      margin: 0 auto;
    }
    #myChart04{
      margin: 0 auto;
    }

    /* .pielist{
      width: 25%;
    } */
    .pielistCharttext{
      font-size: 17px;
      font-weight: 700;
      margin-top: 20px;
    }
    .legendChart{
      display: flex;
      justify-content: center;
      margin-top: 60px;
    }
    .legendChart-bk{
      width: 60px;
      height: 16px;
      border: 1px solid white;
    }
    .legendChart-list{
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .legendChart-text{
      margin-top: 15px;
      font-size: 15px;
      font-weight: 600;
    }
    .chartRow-head{
      margin-top: 54px;
      margin-bottom: 25px;
      font-size: 25px;
      font-weight: 800;
    }
    .col01{
      background-color: #ffe1a891;
    }
    .col00{
      background-color: #2e2d28;
    }
    .col02{
      background-color: #ffffff78;
    }
    .col03{
      background-color: #1e152ab5;
    }
    .col04{
      background-color: #a20014cf;
    }
/* <!-- section4 --> */
    .text-td{
        font-size: 19px;
        font-weight: 600;
        line-height: 1.79;
        color: #ffffff;
        text-align: right;
    }
    .num-td{
        font-size: 19px;
        font-weight: 800;
        text-align: right;
        color: #7b010f;
        padding-right: 14px;
    }
    .tableHead{
        font-size: 19px;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 20px;
    }
    .Russian-elemn{
      width: 100px;
    }
    .F-row{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 10px;
    }
    .S-row{
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      margin-bottom: 10px;
    }
    .T-row{
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      margin-bottom: 10px;
    }
    .sec04-info{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-bottom: 25px;
      margin-top: 25px;
    }
    .RE-f{
        font-size: 24px !important;
        line-height: 1.21;
        text-align: center;
        color: #ffffff !important;
        font-weight: 400 !important;
    }
    .RE-s{
        font-size: 19px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
    }
    .RE-t{
        font-size: 19px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
    }
    .Russian-elemn{
        font-size: 24px;
        font-weight: 600;
        color: #ffffff;
    }
    .infoA-table{
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      margin-bottom: 40px;
    }
    .infoA-table-row{
      display: flex;
      flex-direction: row;
        font-family: Tajawal;
        font-size: 22px;
        line-height: 31px;
        letter-spacing: normal;
        text-align: right;
        color: #ffffff;
    }
    .infoA-table-row div {
      margin-right: 15px;
    }
    .infoA-table-row span{
      font-weight: 800;
    }
    .tab-info-head{
      text-align: right;
      margin-right: 15px;
      font-size: 22px;
    }
    .table th{
      border-top: none;
    }
    .table thead th{
      width: 16.5% !important;
    }
    .bk-gray{
      background-color: #32383e;
    }
    .table td, .table th {
      border-top: none;
    }
    .section04-bbmarrgin{
      margin-top: 291px;
    }
    #section04-bb{
      padding-bottom: 0px;
    }
    #section04-aa{
      padding-top: 20px !important;
    }
/* <!-- section4 --> */

/* <!-- section5 --> */
    #section05  h3{
      color: #ffffff;
    }
    .sec05-row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 30px;
    }
    .sec05-row-desc{
      font-size: 20px;
      text-align: center !important;
      text-align: right;
      color: #ffffff;
      margin-top: 12px;
      margin-bottom: 9px;
    }
    .sec05-row-num {
      text-align: center !important;
      font-size: 25px;
      font-weight: 800;
      color: #ffffff;
    }
    .sections-row05{
      text-align: center;
    }
    .sections-row05 img{
      width: 60px;
    }
/* <!-- section5 --> */

/* <!-- section6 --> */

  #section06 p{
    font-size: 22px;
    line-height: 35px;
    text-align: right;
  }
  #section06{
    min-height: 1000px;
    position: relative;
  }
  .text-bottom2{
    position: absolute !important;
    bottom: 0;
    right: 15px;
    left: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  #section06 .text-middle{
    padding-top: 40%;
    text-align: right;
  }
  #section06 h2{
      font-size: 69px;
      font-weight: 800;
  }
  .lyar6{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(#000000,#060606bd, #02020240, #020202fc);
  }
  .lyar6{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(#000000,#060606bd, #02020240, #020202fc);
  }
  .lyar6{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(#000000,#060606bd, #02020240, #020202fc);
  }
  .lyar10{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(#000000,#00000059,#06060633, #02020285, #020202fc);
  }
  .lyar4-bb{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(#000000,#06060661, #02020266 ,#020202fc, #020202fc);
  }
/* <!-- section6 --> */
  #section08 p{
    font-size: 19px;
    line-height: 29px;
    text-align: right;
    font-weight: 600;
    /* height: 100vh; */
  }
  .lyar8{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(#000000,#0606060d, #0202029e, #020202fc);
  }
  .playVideoStory{
    width: 53px;
    margin-left: 15px;
  }
  .audiotext{
    font-size: 20px;
    margin-top: -20px;
    margin-bottom: 43px;
    /* color: #a20014 !important; */
    cursor: pointer;
  }
  .red-bk{
    border-radius: 15px;
    background-color: rgba(74, 70, 70, 0.6);
    padding: 20px;
    font-size: 19px;
  }
  .center-red-bk{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .bold{
    font-weight: 600;
  }
  /* footer */
    #section08{
      background-color: black;
      text-align: right;
      min-height: auto !important;
    }
    #section08 ul {
      list-style: none;
      padding-right: 0px;
    }
    #section08 .first{
      font-size: 20px;
      font-weight: 700;
      color: #a20014 !important;
      margin-top: 15px;
    }
    #section08 .secound{
      font-size: 18px;
      font-weight: 500;
      color: white;
    }
    #section08 .team{
      font-size: 31px;
      margin-top: 50px;
      font-weight: 500;
      color: white;
    }
    .teamFooter{
      position: relative;
    }
    #logo2{
      position: absolute;
      left: 5px;
      bottom: 0;
    }
    #logo2 img {
      width: 100px;
    }
    #logo2D{
      position: absolute;
      left: 125px;
      bottom: 0;
    }
    #logo2D img {
      width: 164px;
    }
/********************************************* section Timeline ***********************************/


      .timeline {
        position: relative;
      }
      .timeline::before {
        content: '';
        background: #564C4C;
        width: 5px;
        height: 95%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .timeline-item {
        width: 100%;
        margin-bottom: 0px;
      }
      .rightT {
        float: left;
        text-align: right;
        padding: 40px 30px 10px 30px;
      }
      .leftT{
        text-align:left;
      }
      .rightT .date {
        right: auto;
        left: 0;
      }
      .rightT::after {
        display: none;
        content: '';
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 30px;
        right: -15px !important;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent #f5f5f5;
      }
      .timeline-item::after {
        content: '';
        display: block;
        clear: both;
      }
      .leftT::after {
        display: none;
        content: '';
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 30px !important;
        left: -15px !important;
        border-width: 10px 15px 10px 0 !important;
        border-color: transparent #f5f5f5 transparent transparent !important;
      }
      .timeline-content {
        position: relative;
        width: 47%;
        padding: 10px 1px;
        border-radius: 4px;
        background: #000000;
      }
      .timeline-content h2 {
        font-size: 25px;
        margin-bottom: 0px !important;
      }
      .timeline-content p {
        font-size: 15px;
      }

      /* .timeline-content::after {
        content: '';
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 30px;
        right: -15px;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent #f5f5f5;
      } */

      .timeline-img {
        width: 24px;
        height: 24px;
        background: #a20014;
        border: 4px solid black;
        /* box-sizing: content-box; */
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin-top: 25px;
        margin-left: -12px;
      }

      #timelineID  a {
        background: #a20014;
        color: #FFFFFF;
        padding: 8px 20px;
        text-transform: uppercase;
        font-size: 14px;
        margin-bottom: 20px;
        margin-top: 10px;
        display: inline-block;
        border-radius: 2px;
        box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
      }
      a {
        transition: all .6s;
      }
      a:hover, a:active, a:focus {
        color: #a20014 !important;
        text-decoration: none;
      }

      .timeline-card {
        padding: 0 !important;
      }
      .timeline-card p {
        padding: 0 20px;
      }
      .timeline-card a {
        margin-left: 20px;
      }
      .timeline-item h2 {
        color: white;
      }

      .timeline-item .timeline-img-header {
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("https://picsum.photos/1000/800/?random") center center no-repeat;
        background-size: cover;
      }

      .timeline-img-header {
        height: 200px;
        position: relative;
        margin-bottom: 20px;
      }
      .timeline-img-header h2 {
        color: #FFFFFF;
        position: absolute;
        bottom: 5px;
        left: 20px;
      }

      blockquote {
        margin-top: 30px;
        color: #ffffff;
        border-left-color: #a20014;
        padding: 0 20px;
      }

      .date {
        background: #FF4081;
        display: inline-block;
        color: #FFFFFF;
        padding: 10px;
        position: absolute;
        top: 0;
        right: 0;
      }

      @media screen and (max-width: 768px) {
        .timeline::before {
          left: 50px;
        }
        .timeline .timeline-img {
          left: 50px;
        }
        .timeline .timeline-content {
          max-width: 100%;
          width: auto;
          margin-left: 70px;
        }
        .timeline .timeline-item:nth-child(even) .timeline-content {
          float: none;
        }
        .timeline .timeline-item:nth-child(odd) .timeline-content::after {
          content: '';
          position: absolute;
          border-style: solid;
          width: 0;
          height: 0;
          top: 30px;
          left: -15px;
          border-width: 10px 15px 10px 0;
          border-color: transparent #f5f5f5 transparent transparent;
        }
      }


/********************************************* section Timeline ***********************************/
    @media (max-width:1600)   and  (min-width:1460px){
      .main-container {
        transform: scale(1.19,.78);
      }
    }
    @media only screen and (max-width: 1440px) {
      #larg-screens{
        display: none;
      }
      #medium-screens{
        display: block;
      }
    }

    @media only screen and (min-width: 1800px) {
      .main-container {
        transform: scale(1.4);
        /* background-image: url(../img/mapbk.jpg); */
        position: relative;
        min-height: 100%;
        min-width: 1024px;
        top: 0;
        left: 10%;
        width: 90%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    }

    @media (min-height:550px)  and (max-height:700px) {
      .main-container {
        transform: scale(.7);
        width: 90%;
        left: 10%;
      }
    }
    @media (min-height:700px)  and (max-height:735px) {
      .main-container {
        transform: scale(.85);
        width: 90%;
      }
    }
    @media only screen and (max-height:800px) {
      .map-elemnts-pragraphThird2{
        transform: translate(0,680px);
      }
      .map-elemnts-pragraphFifth{
        transform: translate(0,680px);
      }
      .map-elemnts-pragraphSixth{
        transform: translate(0,680px);
      }
      .map-elemnts-boxRed04{
        transform: translate(0,680px);
      }
      .map-elemnts-pragraphSeventh{
        transform: translate(0,680px);
      }
    }
    @media (min-width:480px)  and (max-width:768px) {
      .close {
        color: white !important;
        font-size: 35px;
        margin-right: -8% !important;
        margin-top: -11% !important;
    }
      #section01 .text-middle {
        margin-top: 0;
        margin-right: 0 !important;
    }
      .map-elemnts-pragraphFirst{
        margin-left: -247px;
        width: 74%;
      }
      .map-elemnts-pragraphThird2 {
        margin-left: -247px;
        width: 74%;
      }
      .map-elemnts-pragraphFifth{
        margin-left: -247px;
        width: 74%;
      }
      .map-elemnts-pragraphSixth{
        margin-left: -247px;
        width: 74%;
      }
      .map-elemnts-boxRed04{
        margin-left: -247px;
        width: 74%;
      }
      .map-elemnts-pragraphSeventh{
        margin-left: -247px;
        width: 74%;
      }
      .chartRowContainer {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
      }
      .sec3P {
        font-size: 17px;
        margin-top: 0 !important;
      }
      .sec3Head {
        text-align: center;
      }
      #section02 .row {
        display: flex;
        flex-direction: row;
      }
      #section02 .col-md-6 {
        width: 50%;
      }
    }
    @media (min-width:768px)  and (max-width:1280px) {
      .map-elemnts-pragraphThird2 {
        margin-left: -427px;
        width: 58%;
      }
      .map-elemnts-pragraphFirst{
        margin-left: -427px;
        width: 58%;
      }
      .map-elemnts-pragraphFifth{
        margin-left: -427px;
        width: 58%;
      }
      .map-elemnts-pragraphSixth{
        margin-left: -427px;
        width: 58%;
      }
      .map-elemnts-boxRed04{
        margin-left: -427px;
        width: 58%;
      }
      .map-elemnts-pragraphSeventh{
        margin-left: -427px;
        width: 58%;
      }
    }
    @media only screen and (min-width: 1460px) {
      #larg-screens{
        display: block;
      }
      #medium-screens{
        display: none;
      }

      .Map-bk {
        position: absolute;
        /* transform: scale(0.7); */
        top: 50%;
        left: 50%;
        min-height: 800px;
        transform: translate(-50%, -50%) scale(.7);
        min-height: 800px;
      }
    }
    @media only screen and (max-width: 480px) {
      #scroll-down2{
        display: none;
      }
      .col-mob{
        display: flex;
        flex-direction: column-reverse;
      }
      .start-map{
        display: block;
      }
      #mobile{
        display: block;
      }
      #desktop{
        display: none;
      }
      #logo2{
        position: relative;
      }
      #logo2D {
        position: absolute;
        left: 107px;
       bottom: 0;
     }
      #btn-back{
        display: block;
      }
      #btn-next{
        display: block;
      }
      .start-map-btn{
        display: block;
      }
      .teamFooter{
        bottom: 0;
      }
      #section04{
        padding-top: 0;
      }
      #section02 .row {
        display: flex;
        flex-direction: row;
      }
      #section02 .col-md-6 {
        width: 50%;
      }
      .WheatFixed-container{
        right: 10px !important;
      }
      .WheatFixed-container img {
        width: 30px;
        height: 30px;
      }
      .ergotdefinition{
        top: 0;
        transform: none;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .pielist{
        width: 100%;
        margin-bottom: 15px;
      }
      .main-container{
        transform: scale(1,.8);
      }
      #section08{
        height: 100vh;
      }
      #section06 h2 {
        font-size: 40px;
        text-align: right;
    }
      .white-bk-p{
        font-size: 15px;
        line-height: 21px;
      }
      #section06 p {
        font-size: 15px;
        line-height: 21px;
    }
      #section06 h2 {
        font-size: 50px;
      }
      #section06 p {
        font-size: 17px;
      }
      .audiotext {
        font-size: 15px;
      }
      .playVideoStory {
        width: 35px;
      }
      .white-bk-p {
        font-size: 15px;
      }
      .red-bk {
        font-size: 17px;
      }
        .sec05-row{
          flex-direction: column;
        }
        .gfx-group{
          width: 100%;
          margin-bottom: 50px;
        }
        .sections-row05 {
          margin-bottom: 20px;
        }
        .sections-row05 img {
          width: 45px;
        }
        .sec05-row-num{
          font-size: 21px;
        }
        #section01 .text-middle{
          margin-right: 0;
        }
        #section01 h1 {
          font-weight: 600 !important;
          font-size: 40px !important;
          color: #ffffff;
        }
        #section01 h3 {
          width: 100%;
          font-size: 15px;
        }
        #section01 h2 {
          font-size: 31px!important;
        }
        .scrolldown-animation{
          margin-top: 30px !important;
        }
        .container {
          padding: 0 15px !important;
        }
        .head-sect2{
          margin-bottom: 10px;
          font-size: 17px;
        }
        .argot-container {
          margin-bottom: 15px;
        }
        .head-sect3{
          margin-bottom: -12px;
        }
        .row-flex{
          flex-direction: column !important;
        }
        .sec3Head{
          text-align: center;
        }
        .sec3P {
          font-size: 17px;
          margin-top: 0 !important;
        }
        .row-flex img {
          width: 150px;
          margin-bottom: 20px;
          margin-left: 0;
        }
        .sec04-info{
          flex-direction: column;
        }
        .sec04-info {
          flex-direction: column;
        }
        .tableHead {
          font-size: 17px;
          text-align: right;
      }
      .Russian-wheat{
        margin-top: 30px;
      }
      .num-td{
        font-size: 16px;
      }
      .text-td{
        font-size: 16px;
      }
      .F-row {
        flex-direction: column;
      }
      .S-row {
        flex-direction: column;
      }
      .T-row {
        flex-direction: column;
      }
      .Russian-elemn{
        margin-top: 10px;
      }
      .chartRowContainer {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
      }
      .legendChart-bk {
        width: 45px;
        height: 12px;
        border: .5px solid white;
      }
      .legendChart-text{
        font-size: 11px;
      }
      #section03 .container{
        padding: 0 !important;
      }
      .chartRow-head{
        font-size: 19px;
      }
      .map-elemnts-pragraphFirst{
        padding: 15px;
        width: 90%;
        top: 64px;
        left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphFirst{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphFirst{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphSecound{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphThird{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphThird2{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
        background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphFourth{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphFifth{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphSixth{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
      .map-elemnts-pragraphSeventh{
        padding: 15px;
        width: 90%;
        top: 64px;
         left: 5%;
        right: 5%;
        margin-top: 0;
        margin-left: 0;
            background-color: rgba(0, 0, 0, 0.81);
      }
    }

    .pulse2{
      animation: pulse2 1.5s infinite;
      animation-direction: alternate;
      -webkit-animation-name: pulse2;
      animation-name: pulse2;
    }
    @-webkit-keyframes pulse2 {
      0% {
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 0 0 #dbc48e9a ;
      }
      50% {
        -webkit-transform: scale(1.2);
        -webkit-box-shadow: 0 0 0 10px rgba(204, 44, 44, 0);
      }
      100% {
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
      }
    }

    @keyframes pulse2 {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #dbc48e9a;
        border-radius: 50%;
      }
      50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(204, 44, 44, 0);
        border-radius: 50%;
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(204, 44, 44, 0);
        border-radius: 50%;
      }
    }



    /*-------------- AUDIO PLAYER --------------*/
    .nextStory{
      text-decoration: none;
      color: #ffffff;
  }
  .nextStory-btn{
      color: white;
      padding: 10px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 30px;
  }
  .audio-player {
      /* position: fixed;
      bottom: 0;
      left: 0;
      right: 0; */
  }

  .no-flexbox .audio-player {
      display: none;
  }

  .flex-wrap {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
  }


  .flex-item {}

  .jp-controls.flex-item {
      flex-basis: 150px;
  }

  .jp-progress-container.flex-item {
      flex-basis: 200px;
      flex-grow: 2;
      flex-shrink: 2;
  }

  .jp-now-playing.flex-item {
      flex-basis: 145px;
  }

  .jp-toggles.flex-item {
      flex-basis: 55px;
  }

  .jp-volume-controls.flex-item {
      flex-basis: 29px;
  }

  .jp-audio,
  .jp-audio-stream,
  .jp-video {
      background: rgba(0, 0, 0, 0.8);
      padding: 15px;
      position: relative;
      margin-bottom: 20px;
  }
      .modalStripBottom .container{
          margin-right: 0px !important;
          margin-left: 0px !important;
          max-width: 100% !important;
      }
  /*Controls*/

  .jp-playlist {
      display: none;
  }

  .jp-interface .jp-controls button,
  .jp-interface .jp-toggles button,
  .jp-interface .jp-volume-controls button {
      background: none;
      border: none;
      outline: none;
      color: white;
      line-height: 24px;
      font-weight: 600;
      -webkit-transition-delay: 0;
      transition-delay: 0;
      -webkit-transition-property: all;
      -webkit-transition-duration: 0.2s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: all;
      transition-duration: 0.2s;
      transition-timing-function: ease-in-out;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear;
      font-size: 20px;
      padding: 0 5px;
  }

  .jp-interface .jp-controls .jp-play i,
  .jp-interface .jp-controls .jp-previous i,
  .jp-interface .jp-controls .jp-next i {
      font-size: 20px;
      color: #eeeeee;
  }

  .jp-interface .jp-controls .jp-play {
      border: solid 2px #eeeeee;
      border-radius: 50%;
      width: 52px;
      height: 52px;
      margin: 0 10px;
  }

  .jp-interface .jp-controls .jp-play i {
      padding-left: 5px;
      padding-top: 5px;
  }

  .jp-audio.jp-state-playing .jp-play i {
      padding-left: 0px;
  }

  .jp-audio.jp-state-playing .jp-play i:before {
      content: "\f04c" !important;
  }
    /*Progress bars*/

    .jp-progress-container,
    .jp-volume-bar-container {
        height: 30px;
        padding: 10px;
        padding-right: 50px;
    }

    .jp-progress,
    .jp-seek-bar,
    .jp-play-bar,
    .jp-volume-bar,
    .jp-volume-bar-value {
        height: 8px;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
    }

    .jp-progress {
        margin: 0 50px;
        background-color: #ffffff;
        border-radius: 5px;
    }

    .jp-seek-bar,
    .jp-volume-bar {
        cursor: pointer;
        background-color: #ffffff;
        border-radius: 5px;
    }

    .jp-play-bar {
        float: left;
        position: relative;
        background-color: #ffffff;
        border-radius: 5px;
        overflow: visible!important;
    }

    .jp-volume-bar-value {
        float: left;
        position: relative;
        background-color: #aaaaaa;
    }

    .jp-progress .bullet,
    .jp-volume-bar .bullet {
        position: absolute;
        content: "";
        top: -5px;
        right: -7px;
        height: 18px;
        width: 18px;
        background: #ffffff;
        border-radius: 50%;
    }

    .jp-time-holder {
        position: relative;
        top: 0;
        color: #ffffff;
        font-size: 12px;
    }

    .jp-time-holder .jp-current-time {
        position: absolute;
        left: 0;
        top: -3px;
    }

    .jp-time-holder .jp-duration {
        position: absolute;
        right: 0;
        top: -3px;
    }


    /* Track & Artist */

    .jp-now-playing {
        padding: 0 37px;
    }

    .jp-track-name {
        color: #c9c9c9;
        font-size: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 145px;
    }

    .jp-artist-name {
        color: #6d6d6d;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 140px;
    }


    /* Toggles */

    .jp-toggles button {
        margin: 0 3px;
    }

    .jp-toggles button:hover {
        color: #FFF;
    }

    .jp-state-looped .jp-toggles .jp-repeat,
    .jp-state-shuffled .jp-toggles .jp-shuffle,
    .jp-interface .jp-toggles .playlist-is-visible.jp-show-playlist {
        color: #00c85f;
    }


    /* Volume Controls */

    .jp-volume-controls button {
        float: left;
    }

    .jp-volume-controls .jp-volume-bar {
        margin-left: 40px;
        margin-top: 8px;
    }

    .jp-state-muted .jp-mute i:before {
        content: "\f026" !important;
    }

    .jp-volume-bar,
    .jp-volume-bar-value {
        border-radius: 5px;
    }

    .jp-state-no-volume .jp-volume-controls {
        display: none;
    }
    .jp-audio, .jp-audio-stream, .jp-video {
      /* background: rgb(113, 1, 15) !important; */
      padding: 15px;
      position: relative;
      margin-bottom: 20px;
      border-radius: 5px;
  }

    /* Playlist  */

    .jp-playlist {
        position: absolute;
        right: 65px;
        bottom: 100%;
        background: rgba(0, 0, 0, 0.8);
        padding: 20px 25px;
        width: 400px;
    }

    .jp-playlist ul {
        padding: 0;
        margin: 0;
        max-height: 200px;
        overflow: auto;
    }

    .jp-playlist li {
        list-style: none;
    }

    .jp-playlist li a {
        color: #c9c9c9;
        display: block;
        padding: 10px 0;
        outline: none;
        border-bottom: 1px solid #1F1F1F;
    }

    .jp-playlist li:last-child a {
        border-bottom: 0;
    }

    .jp-playlist li a:hover,
    .jp-playlist li a:focus,
    .jp-playlist li a:active {
        color: #00c85f;
        text-decoration: none;
    }

    .jp-playlist li a span {
        color: #6d6d6d;
    }

      /* #jp_container_2 .jp-audio, .jp-audio-stream, .jp-video {
          background: rgb(113, 1, 15) !important;
      } */
    /* ==================== Media Query ==================== */

    @media (max-width:992px) {
        .jp-now-playing {
        display: none;
        }
    }

    @media (max-width:767px) {
        .jp-volume-bar,
        .jp-volume-bar .bullet,
        .jp-time-holder {
        display: none!important;
        }
        .jp-progress-container.flex-item {
        flex-basis: 140px;
        padding: 12px 15px;
        }
        .jp-progress .bullet {
        right: -10px;
        }
        .jp-volume-controls.flex-item {
          flex-basis: 33px;
          display: none !important;
        }
        .jp-progress {
        margin: 0;
        }
        .jp-interface .jp-controls .jp-play {
        margin: 0 3px;
        }
        .jp-interface .jp-controls .jp-play i,
        .jp-interface .jp-controls .jp-previous i,
        .jp-interface .jp-controls .jp-next i {
        font-size: 16px;
        }
        .jp-interface .jp-controls .jp-play {
        width: 42px;
        height: 42px;
        }
        .jp-interface .jp-controls .jp-play i {
        padding-left: 3px;
        padding-top: 0;
        }
        .jp-state-playing .jp-interface .jp-controls .jp-play i {
        padding-left: 0;
        }
        .jp-controls.flex-item {
        flex-basis: 100px;
        }
    }