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

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

.story-intro .scene-title-container {
  color: #ffffff;
  padding: 0 8.66%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  @media all and (max-width: 1023px) {
    .story-intro .scene-title-container {
      padding: 0 30px;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; } }
  .story-intro .scene-title-container .description {
    width: 85%;
    padding-right: 5%; }
    @media all and (min-width: 1024px) and (max-width: 1439px) {
      .story-intro .scene-title-container .description {
        width: 80%; } }
    @media all and (max-width: 1023px) {
      .story-intro .scene-title-container .description {
        width: 100%;
        padding: 0; } }
    .story-intro .scene-title-container .description .title {
      width: 50%; }
      @media all and (max-width: 1199.98px) {
        .story-intro .scene-title-container .description .title {
          width: 100%; } }
      @media all and (max-width: 1023px) {
        .story-intro .scene-title-container .description .title {
          width: 100%;
          padding-bottom: 10px; } }
  .story-intro .scene-title-container .year {
    width: 15%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: space-around;
    -moz-align-content: space-around;
    -ms-align-content: space-around;
    align-content: space-around; }
    @media all and (min-width: 1024px) and (max-width: 1439px) {
      .story-intro .scene-title-container .year {
        width: 20%; } }
    @media all and (max-width: 1023px) {
      .story-intro .scene-title-container .year {
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-flex-direction: row-reverse;
        -moz-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        width: 100%; } }
    .story-intro .scene-title-container .year h4 {
      width: 100%;
      color: #929495; }
      @media all and (max-width: 1023px) {
        .story-intro .scene-title-container .year h4 {
          width: auto; } }
    @media all and (max-width: 1023px) {
      .story-intro .scene-title-container .year .text-link {
        margin: 0;
        margin-right: auto;
        margin-top: 20px; } }

.story-intro .bg-img-cover {
  height: 800px; }
  @media all and (min-width: 1024px) and (max-width: 1439px) {
    .story-intro .bg-img-cover {
      height: 600px; } }
  @media (max-width: 1199.98px) {
    .story-intro .bg-img-cover {
      height: 600px; } }
  @media all and (min-width: 600px) and (max-width: 1023px) {
    .story-intro .bg-img-cover {
      height: 300px; } }
  @media all and (max-width: 599px) {
    .story-intro .bg-img-cover {
      height: 300px; } }

.story-description {
  color: #ffffff;
  padding: 0 8.66%; }
  @media all and (max-width: 1023px) {
    .story-description {
      padding: 0 30px; } }
  .story-description .details {
    padding-top: 20px; }
  @media all and (max-width: 599px) {
    .story-description .title {
      word-break: break-all; } }

.html:lang(ar) .story-intro .scene-title-container .description {
  padding: 0;
  padding-left: 5%; }
  @media all and (max-width: 1023px) {
    .html:lang(ar) .story-intro .scene-title-container .description {
      padding: 0; } }
  .html:lang(ar) .story-intro .scene-title-container .description .title {
    padding-bottom: 10px; }

.html:lang(ar) .story-intro .scene-title-container .year h4 {
  font-family: 'Orbitron';
  font-weight: bold; }

@media all and (max-width: 1023px) {
  .html:lang(ar) .story-intro .scene-title-container .year .text-link {
    margin: 0;
    margin-left: auto;
    padding-top: 20px; } }