body {
  background: #000;
  font-family: 'Almarai', sans-serif;
  color: #FFF;
  /*overflow-x: hidden;*/
}

ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a, .navbar-light .navbar-nav .nav-link {
  color: #FFF;
}

a:hover {
  color: #000;
}

/*=====================preloader===================================*/
.no-js #loader {
  display: none;
}

.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
}

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_2.gif") center no-repeat #fff;
}

/*=====================Re-usable custom class===================================*/
.top-nav-dir {
  direction: rtl;
}

.mr-dir-rtl {
  direction: rtl;
}

.flex-btn-khan {
  border-radius: inherit;
  color: #fff;
  background: rgb(193, 39, 45);
  background: linear-gradient(90deg, rgba(193, 39, 45, 1) 0%, rgba(97, 20, 23, 1) 100%);
}

.flex-btn-khan:hover {
  color: rgba(255, 255, 255, 0.5);
}

.emarat-m-l-25 {
  margin-left: 25px;
}

.emarat-m-r-25 {
  margin-right: 25px;
}

.emarat-p-l-25 {
  padding-left: 25px;
}

.emarat-p-r-25 {
  padding-right: 25px;
}

.emarat-m-tb-90 {
  margin-top: 90px;
  margin-bottom: 90px;
}

.emarat-m-t-90 {
  margin-top: 90px;
}

.emarat-max-auto {
  width: 100%;
  max-width: 1713px;
  margin: auto;
}

.emarat-ta-center {
  text-align: center;
}

.emarat-ta-left {
  text-align: left;
}

.emarat-ta-right {
  text-align: right;
}

.ad-banner-leaderboard-container {
  /* max-width: 728px;
  margin: auto; */
}

.emarat-img-fluid img {
  width: 100%;
  height: auto;
}

ul.emarat-hover-thumb li span {
  position: absolute;
  z-index: 0;
  bottom: -250px;
  left: 0;
  background: rgba(201, 46, 53, .95) url(../images/carousel-thumb-watermark.png) no-repeat bottom right;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ul.emarat-hover-thumb li:hover span {
  bottom: 0;
  transition: .5s;
}

/*===================== header section ===================================*/
.emarat-container {
  width: 100%;
  margin: auto;
}

a.emarat-logo {
  margin-top: 20px;
  background: url("../images/logo.png");
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: top;
  width: 134px;
  height: 64px;
}

a.emarat-logo span {
  display: none;
  background: inherit;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  font-size: 18px;
  font-weight: 600;
}

.emarat-dropdown-menu .dropdown-item {
  font-size: 20px;
}

.emarat-linear-nav-back {
  padding-bottom: 20px;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.navbar.navbar-expand-lg.sticky {
  /*------------------------top nav bar sticky style----------------------*/
  background: #05120e;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
}

/*ul.navbar-nav > li:nth-child(6){
  margin-left: auto;

}
ul.navbar-nav > li:nth-child(1){
  margin-right: auto;
}*/
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
  color: #c1272c;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: #c1272c;
}

form.form-inline.my-2.my-lg-0.emarat-search-form {
  margin-left: auto;
}

/*===================================================Search form top start=======================================*/
.emarat-search-container {
  margin: auto;
}

.searchbar {
  margin-bottom: auto;
  margin-top: auto;
  height: 55px;
  background-color: inherit;
  border-radius: 30px;
  padding: 7px;
}

.search_input {
  color: white;
  border: 0;
  outline: 0;
  background: none;
  width: 0;
  caret-color: transparent;
  line-height: 40px;
  transition: width 0.4s linear;
}

.searchbar:hover>.search_input {
  padding: 0 10px;
  width: 14rem;
  caret-color: red;
  transition: width 0.4s linear;
}

.emarat-top-search-expand {
  /*------------Expanding from jquery-----------------*/
  padding: 0 10px;
  width: 300px;
  caret-color: red;
  transition: width 0.4s linear;
}

.searchbar:hover>.search_icon {
  background: #FFFFFF;
  text-decoration: none;
  color: #c1272c;
}

.search_icon {
  height: 40px;
  width: 40px;
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: white;
  text-decoration: none;
}

.emarat-search-container-full-width {
  margin: auto;
  position: absolute;
  width: 100%;
  top: 0%;
  left: 0;
  background: #bf5555;
  overflow: hidden;
  z-index: 1;
  transition: .5s;
}

.emarat-search-container-full-width-remove {
  /*    margin: inherit;
    position: inherit;
    width:inherit;
    background:inherit;
    overflow:inherit;
    z-index:inherit;
    transition: .5s;*/
}

/*=================================================== top social icons =======================================*/
.emarat-social-icons {
  display: flex;
  align-items: center;
  width: 10%;
  justify-content: space-around;
  margin-left: 20px;
}

.emarat-social-icons a {
  font-size: 18px;
  margin: .3rem;
  text-decoration: none;
}

.btn.btn-secondary.dropdown-toggle.emarat-dropdown {
  background-color: #515050;
  border-radius: inherit;
  border-color: inherit;
  border: none;
  padding: .5rem .8rem;
  font-size: 16px;
}

.dropdown-toggle.emarat-dropdown::after {
  margin-right: 1rem;
}

/*======================================== header flex image slider ====================================*/
.flexslider {
  overflow: hidden;
}

.waterwheel-carousel {
  overflow: hidden;
}

.flexslider {
  margin: 0px;
  /*background: #fff;*/
  background: none;
  border: none;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  /* border-radius: 4px; */
  -webkit-box-shadow: ''0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: ''0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: ''0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: ''0 1px 4px rgba(0, 0, 0, 0.2);
}

.flexslider-emarat .flex-control-nav {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
  ;
  bottom: 0% !important;
  display: block !important;
  opacity: 1 !important;
  padding: 1rem 5rem 0 5rem;
  position: absolute;
  text-align: center;
  top: auto !important;
  width: 100%;
  z-index: 999 !important;
}

.flex-direction-nav {
  display: block !important;
  opacity: 1 !important;
  top: 30% !important;
  width: 100%;
  z-index: 999 !important;
}

.flex-direction-nav a {
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  display: block;
  height: 55px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  /*padding-top: 8px;*/
  position: absolute;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  top: 35%;
  transition: all 0.3s ease 0s;
  width: 40px;
  z-index: 10;
}

.flex-control-thumbs img {
  padding: .5rem;
}

.flexslider-emarat .flex-control-thumbs .flex-active {
  border-bottom: 10px solid #C1272D;
  padding-left: 0;
  padding-right: 0;
}

ul.slides li {
  position: relative;
  /* this is must*/
}

.flexslider-emarat ul.slides li::before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /*background: rgba(0, 0, 0, .4 );*/
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%);
  position: absolute;
}

.flex-caption {
  height: 50px;
  line-height: 50px;
  margin: 0;
  text-align: right;
  font-size: 60px;
  font-weight: 700;
  color: #FFF;
  text-shadow: 0 0 4px rgba(0, 0, 0, .5);
  padding-right: 20px;
  top: 368px;
  right: 7%;
  width: 98%;
  position: absolute;
}

.flex-caption-discription {
  font-size: 18px;
  font-weight: 300;
}

.flex-caption-button {
  font-weight: 300;
}

.flex-direction-nav a:before, .flex-direction-nav a.flex-next:before {
  color: rgba(255, 255, 255, 0.8);
}

/*======================================== Latest episodes carousel #section2 ====================================*/
.emarat-carousel-title, .emarat-carousel-title h3 {
  /* text-align: right;
  font-weight: 700;
  margin: 3rem 0 1.5rem 0; */
}

.flexslider.carousel ul li span {
  position: absolute;
  z-index: 0;
  bottom: -250px;
  left: 0;
  background: rgba(201, 46, 53, .95) url("../images/carousel-thumb-watermark.png") no-repeat bottom right;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*opacity:0;*/
}

.flexslider.carousel ul li:hover span {
  /*opacity: 1;*/
  bottom: 0;
  transition: .5s;
}

/*======================================== waterwheel carousel ====================================*/
.emarat-container-carousel-waterwheel h3 {
  text-align: right;
  font-weight: 700;
  margin: 0 0 3rem 0
}

.waterwheel-carousel {
  margin: 0 auto;
  width: 1000px;
  height: 550px;
  display: relative;
}

.waterwheel-carousel img {
  box-shadow: 0 0 10px #000;
  display: hidden;
  /* hide images until carousel prepares them */
  cursor: pointer;
  /* not needed if you wrap carousel items in links */
  position: relative;
  left: 0;
  top: 0;
}

.waterwheel-carousel-wrapper {
  width: 100%;
  background: #c0262c url("../images/waterwheel-watermark.png")no-repeat right bottom;
  margin: auto;
  padding: 2rem 0 7rem 0;
}

.waterwheel-carousel img:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 1);
}

/*======================================== section call to action ====================================*/
#section4 {
  background: #1b1b1b url("../images/cta1-watermark.png")no-repeat left bottom;
  background-size: contain;

  position: relative;

  color: #FFF;
}

.cta-wrapper::before {
  content: "";
  width: 60%;
  height: 100%;
  background: #003B80;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  display: block;
  clip-path: polygon(21% 0, 100% 0, 100% 100%, 0% 100%);
}

.cta-img-box {
  /* padding-left: 16% */
}

.cta-text-box {
  /* text-align: right;
  padding-right: 10%; */
}

.cta-wrapper h3 {
  opacity: 60%;
  font-size: 1.6rem;
  font-weight: 700;
  padding-top: 30px;
}
.cta-playstore a{display: inline-block; text-align: center;}
.cta-playstore {
  /* padding-top: 30px;
  margin-right: 14px; */
}

ul.cta-playstore a i.fab.fa-google-play, ul.cta-playstore a i.fab.fa-apple {
  position: relative;
  font-size: 30px;
  color: #FFF;
}

ul.cta-playstore a i.fab.fa-google-play {
  /* margin-left: 90px; */
}

ul.cta-playstore a i.fab.fa-google-play span, ul.cta-playstore a i.fab.fa-apple span {
  position: absolute;
  width: 90px;
  top: 40px;
  left: -46px;
  font-size: 16px;
}

.cta-wrapper h3, .cta-wrapper p, .cta-wrapper ul a {
  color: #FFF;
  opacity: 60%;
}

.cta-wrapper h3:hover, .cta-wrapper p:hover, .cta-wrapper ul a:hover {
  opacity: 100%;
  transition: .5s;
}

/*======================================== section schedule ====================================*/
.section-4-wrapper {
  margin-top: 6.3rem;
}

.section-4-ad-wrapper, .section-4-artist-wrapper, .section-4-schedule-wrapper {
  width: 100%;
  height: 100%;
  background: #444;
}

.section-4-ad-wrapper {}

.section-4-ad-wrapper .section-4-ad {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-4-artist-wrapper {
  background: url("../images/schedule-artist.jpg");
  background-size: cover;
}

.section-4-artist-wrapper .section-4-artist-txt {
  height: 100%;
  padding: 2rem 3rem;
  text-align: right;
}

.section-4-artist-wrapper .section-4-artist-txt h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: .8rem;
}

.section-4-artist-wrapper .section-4-artist-txt h5 {
  color: #C1272D;
  font-size: 18px;
  font-weight: 700;
}

.section-4-artist-wrapper .section-4-artist-txt p {
  font-size: 18px;
  max-width: 625px;
}

.section-4-schedule-wrapper {
  padding: 8% 0;
  overflow: hidden;
  height: 100%;
}

.section-4-scroll {
  overflow-y: scroll;
  width: 100%;
  max-width: 500px;
  max-height: 352px;
  padding-left: 40px;
  margin: 1.5rem auto;
}

#scrollbar-style::-webkit-scrollbar-track {
  background-color: none;
}

#scrollbar-style::-webkit-scrollbar {
  width: 6px;
  background-color: none;
}

#scrollbar-style::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: #727272;
  height: 100px;
  padding-top: 200px;
  border-radius: 20px;
}

.section-4-schedule-wrapper .section-4-schedule-txt {
  text-align: right;
}

.section-4-schedule-txt h3 {
  font-size: 30px;
  font-weight: bold;
}

.section-4-schedule-txt ul {
  margin: 0;
  padding: 0;
}

.section-4-schedule-txt ul li {
  padding: 1.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid #747474;
}

.section-4-schedule-txt ul li:last-child {
  margin-bottom: 1.5rem;
}

.section-4-schedule-txt ul li span {
  background: #cd002b;
  padding: .3rem;
  margin-left: .3rem;
  font-weight: bold;
}

.section-4-schedule-txt a {
  text-decoration: underline;
  margin-right: 2.5rem;
}

.section-4-schedule-txt a:hover {
  color: rgba(255, 255, 255, 0.5);
}

/*======================================== call to action version two ====================================*/
.ctav2-container {
  /*  margin: 4rem auto;
  max-width: 1713px;*/
  background: #c2272d;
}

.ctav2-container>:first-child {
  background: url('../images/cta-v2-background-col.jpg') no-repeat;
  background-size: cover;
  padding: 4% 1.5%;
}

.ctav2-container .col-md-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #671518;
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0% 100%);
}

.ctav2-container ul, .ctav2-container ul li {
  margin: 0;
  padding: 0;
}

.ctav2-container ul li {
  position: relative;
  /*border-left: 1px solid #d57c7f;*/
  line-height: 14px;
  padding: 0 1rem;
}

.ctav2-container ul li:before {
  content: "|";
  color: #d57c7f;
  position: absolute;
  left: 0;
}

.ctav2-container ul li:last-child:before {
  content: "";
}

.ctav2-container ul li a:hover {
  color: #e1abac;
  text-decoration: none;
}

.ctav2-container ul li a.ctav2-nav-link.ctav2-active {
  background: #000;
  padding: .90rem 2rem;
}

.ctav2-container ul li a.ctav2-nav-link.ctav2-active:hover {
  color: #FFF;
}

.ctav2-container h3 {
  margin: 0;
  margin-right: 25px;
  text-align: right;
  font-size: 1.3rem;
}

/*======================================== footer ====================================*/
.emarat-footer {
  background: #515050;
  text-align: center;
  padding: 2rem;
  color: #a1a0a0;
}

.emarat-footer ul li, .emarat-footer ul li a {
  color: #a1a0a0;
}

.emarat-footer ul {
  display: flex;
  justify-content: space-around;
}

.emarat-footer ul li a.fab {
  color: #FFF;
}

/*=========================================================
                      @Media Queries
=========================================================*/
@media only screen and (max-width:1199.98px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
    font-size: 16px;
  }

  .emarat-social-icons a {
    font-size: 18px;
    margin: .3rem;
  }

  .cta-wrapper .cta-img-box {
    /*    padding-left: 8rem;
    padding-right: 2rem;*/
  }

  .section-4-ad-wrapper .section-4-ad {
    padding-top: 13.2%;
  }

  .section-4-schedule-wrapper {
    padding: .5rem;
  }

  .section-4-scroll {
    max-height: 178px;
  }

  .section-4-schedule-wrapper .section-4-schedule-txt {
    text-align: right;
    padding-top: 17px;
    padding-bottom: 17px;
  }

  .section-4-schedule-txt ul li {
    font-size: 14px;
  }

  .section-4-schedule-txt ul li {
    padding: 1rem 0;
  }

  .ctav2-container h3 {
    font-size: 1rem;
  }

  .emarat-footer {
    font-size: 12px;
  }
}

@media only screen and (max-width:991.98px) {
  .emarat-xs-m-tb-30 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .emarat-xs-m-t-30 {
    margin-top: 30px;
  }

  .emarat-xs-m-b-30 {
    margin-bottom: 30px;
  }

  .emarat-xs-m-t-0 {
    margin-top: 0;
  }

  .emarat-linear-nav-back {
    background: #000;
  }

  .navbar-nav {
    align-items: flex-end;
  }

  .navbar-nav.mr-auto.justify-content-end.w-100 {
    padding: 0;
  }

  .top-nav-dir {
    direction: ltr;
  }

  .navbar-light .navbar-toggler {
    background: #3a3a3a;
  }

  ul.navbar-nav>li:nth-child(5) {
    margin-left: inherit;
  }

  .h-100.emarat-search-container {
    margin: 0 !important;
  }

  .d-flex.justify-content-center.h-100 {
    justify-content: flex-start !important;
    padding-left: 0px;
  }

  .searchbar:hover>.search_input {
    max-width: 250px;
  }

  .emarat-social-icons {
    margin: 20px;
    width: 20%;
  }

  /*============== image carousel hover text style ====================*/
  .flexslider.carousel ul li span h5 {
    text-align: left;
    font-size: 13px;
    margin-bottom: 5px;
  }

  .flexslider.carousel ul li span a {
    font-size: 11px;
  }

  /*============== image slider hover text style ====================*/
  .flexslider.flexslider-emarat {
    padding-top: 100px;
  }

  .flex-direction-nav a:before {
    font-size: 18px;
  }

  .flex-prev,
  .flex-next {
    font-size: 0;
  }

  .flex-direction-nav .flex-next,
  .flex-direction-nav .flex-prev {
    top: 50%;
  }

  .flexslider-emarat .flex-control-thumbs .flex-active {
    border-bottom: 5px solid #C1272D;
  }

  .flexslider-emarat .flex-control-nav {
    padding: 0;
  }

  .flex-control-thumbs img {
    padding: .3rem;
  }

  .emarat-carousel-title, .emarat-carousel-title h3 {
    margin: 0rem 0 1rem 0;
  }

  .flexslider {
    margin: 0 0 20px;
  }

  .col-11.mx-auto {
    padding: 0;
  }

  .waterwheel-carousel-wrapper {
    padding: .2rem 0 1rem 0;
  }

  .section-4-ad-wrapper .section-4-ad {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .cta-wrapper {
    background: #003b80;
  }

  .cta-text-box {
    text-align: center;
    padding-right: 0;
    margin-top: 2rem;
  }

  .cta-wrapper {
    margin-top: 20px;
    padding: 1.5rem 1rem;
  }

  .emarat-schedule-box-left {
    text-align: center;
  }

  .emarat-schedule-box-right ul {
    margin: 0;
  }

  .ctav2-container>:first-child {
    background: inherit;
    padding: 4% 0%;
  }

  .ctav2-container {
    font-size: 10px;
  }

  .ctav2-container h3 {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .ctav2-container ul li a.ctav2-nav-link.ctav2-active {
    padding: .4rem .5rem;
  }

  .emarat-footer {
    padding: 2rem 0;
  }
}