/* breakpoints */
.grid-position {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left; }

html:lang(ar) .grid-position {
  float: right; }

.stories {
  position: relative;
  height: 1080px;
  max-height: 1080px; }
  @media all and (min-width: 1024px) and (max-width: 1439px) {
    .stories {
      height: 900px;
      max-height: 900px; } }
  @media (max-width: 1199.98px) {
    .stories {
      height: 600px;
      max-height: 600px; } }
  @media all and (min-width: 600px) and (max-width: 1023px) {
    .stories {
      height: 500px;
      max-height: 500px; } }
  @media all and (max-width: 599px) {
    .stories {
      height: auto;
      max-height: 100%; } }
  .stories > .bg-img-cover {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0.6; }
    @media all and (max-width: 599px) {
      .stories > .bg-img-cover {
        height: 320px; } }
  .stories .story-wrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative; }
    .stories .story-wrapper .description,
    .stories .story-wrapper .story-list li {
      height: 780px; }
      @media all and (min-width: 1024px) and (max-width: 1439px) {
        .stories .story-wrapper .description,
        .stories .story-wrapper .story-list li {
          height: 580px; } }
      @media (max-width: 1199.98px) {
        .stories .story-wrapper .description,
        .stories .story-wrapper .story-list li {
          height: 400px; } }
      @media all and (min-width: 600px) and (max-width: 1023px) {
        .stories .story-wrapper .description,
        .stories .story-wrapper .story-list li {
          height: 360px; } }
      @media all and (max-width: 599px) {
        .stories .story-wrapper .description,
        .stories .story-wrapper .story-list li {
          height: 414px; } }
    .stories .story-wrapper .description {
      width: 33.33%;
      color: #ffffff;
      padding-left: 2.5%;
      padding-top: 3%; }
      @media all and (min-width: 600px) and (max-width: 1023px) {
        .stories .story-wrapper .description {
          padding-top: 0; } }
      @media all and (min-width: 600px) and (max-width: 1023px) {
        .stories .story-wrapper .description .title {
          font-size: 2.65rem;
          line-height: 3rem; } }
      .stories .story-wrapper .description .sub-title {
        color: #ff6a00;
        padding-left: 10%; }
      .stories .story-wrapper .description p {
        padding-top: 30px; }
      @media (max-width: 1199.98px) {
        .stories .story-wrapper .description {
          width: 40%; } }
      @media all and (max-width: 599px) {
        .stories .story-wrapper .description {
          width: 100%;
          padding: 45px 30px 0;
          height: 320px; } }
    .stories .story-wrapper .story-list {
      width: 66.66%; }
      @media (max-width: 1199.98px) {
        .stories .story-wrapper .story-list {
          width: 60%; } }
      @media all and (max-width: 599px) {
        .stories .story-wrapper .story-list {
          width: 100%; } }
      .stories .story-wrapper .story-list li {
        padding: 0 12px;
        width: 50%;
        height: 820px; }
        @media all and (min-width: 1024px) {
          .stories .story-wrapper .story-list li {
            height: 780px; } }
        @media all and (min-width: 1024px) and (max-width: 1439px) {
          .stories .story-wrapper .story-list li {
            height: 580px; } }
        @media (max-width: 1199.98px) {
          .stories .story-wrapper .story-list li {
            height: 400px; } }
        @media all and (min-width: 600px) and (max-width: 1023px) {
          .stories .story-wrapper .story-list li {
            height: 360px;
            width: 100%; } }
        @media all and (max-width: 599px) {
          .stories .story-wrapper .story-list li {
            width: 100%;
            height: 414px;
            padding: 0; } }
        .stories .story-wrapper .story-list li .bg-img-cover {
          height: 100%;
          width: 100%;
          position: relative; }
          .stories .story-wrapper .story-list li .bg-img-cover:after {
            content: "";
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000', GradientType=0 );
            /* IE6-9 */
            pointer-events: none; }
        .stories .story-wrapper .story-list li .story-description {
          position: absolute;
          bottom: 50px;
          color: #ffffff;
          padding: 0 40px;
          z-index: 2; }
          @media (max-width: 1199.98px) {
            .stories .story-wrapper .story-list li .story-description {
              padding: 0 20px; } }
          @media all and (max-width: 599px) {
            .stories .story-wrapper .story-list li .story-description {
              bottom: 30px;
              padding: 0 30px; } }
          .stories .story-wrapper .story-list li .story-description .title {
            font-family: 'Orbitron';
            font-weight: bold;
            text-transform: uppercase;
            word-break: break-word; }
          .stories .story-wrapper .story-list li .story-description span {
            padding: 15px 0; }
            @media all and (max-width: 599px) {
              .stories .story-wrapper .story-list li .story-description span {
                display: none; } }
    .stories .story-wrapper .story-slider {
      position: relative;
      height: 56px;
      margin-top: 20px; }
      .stories .story-wrapper .story-slider ul {
        height: 100%; }
      .stories .story-wrapper .story-slider .slick-prev {
        left: 0; }
      .stories .story-wrapper .story-slider .slick-next {
        right: 0;
        left: 75px; }
        @media all and (min-width: 1024px) and (max-width: 1439px) {
          .stories .story-wrapper .story-slider .slick-next {
            left: 60px; } }
        @media (max-width: 1199.98px) {
          .stories .story-wrapper .story-slider .slick-next {
            left: 60px; } }
        @media all and (min-width: 600px) and (max-width: 1023px) {
          .stories .story-wrapper .story-slider .slick-next {
            left: 50px; } }
      .stories .story-wrapper .story-slider .slick-prev,
      .stories .story-wrapper .story-slider .slick-next {
        background-image: url("../images/orange-slick-arrow.svg"); }

html:lang(ar) .stories .story-wrapper .description {
  padding: 0;
  padding-right: 2.5%; }
  @media all and (max-width: 599px) {
    html:lang(ar) .stories .story-wrapper .description {
      padding: 45px 30px 0; } }
  html:lang(ar) .stories .story-wrapper .description .sub-title {
    padding: 0;
    padding-right: 10%; }

html:lang(ar) .stories .story-wrapper .story-list li .bg-img-cover:after {
  left: auto;
  right: 0; }

html:lang(ar) .stories .story-wrapper .story-list li .story-description .title {
  font-family: 'Mada';
  font-weight: normal; }

html:lang(ar) .stories .story-wrapper .story-list li .story-description .text-link {
  direction: rtl; }

html:lang(ar) .stories .story-wrapper .story-slider .slick-prev {
  left: auto;
  right: 0; }

html:lang(ar) .stories .story-wrapper .story-slider .slick-next {
  right: 75px;
  left: 0; }
  @media all and (min-width: 1024px) and (max-width: 1439px) {
    html:lang(ar) .stories .story-wrapper .story-slider .slick-next {
      right: 60px; } }
  @media (max-width: 1199.98px) {
    html:lang(ar) .stories .story-wrapper .story-slider .slick-next {
      right: 60px; } }
  @media all and (min-width: 600px) and (max-width: 1023px) {
    html:lang(ar) .stories .story-wrapper .story-slider .slick-next {
      right: 50px; } }