.narrative {
  &__content {
    // display: none;

    @media (min-width: @device-width-medium) {
      // display: block;
      // float: left;
      // width: 48%;
      position: relative;
      width: 100%;
      top: -482px;

      .dir-rtl & {
        margin-left: inherit;
        margin-right: 2%;
      }
    }

    @media screen and (max-width: 850px) {
      top: -482px;
      position: relative;
      width: 100%;
    }

    @media screen and (max-width: 896px) {
      top: -482px;
      position: relative;
      width: 100%;
    }
  }

  // --------------------------------------------------
  // Strapline
  // Clickable element on mobile, opens notify
  // --------------------------------------------------
  &__strapline {
    position: relative;

    @media (min-width: @device-width-medium) {
      display: none;
    }
  }

  &__strapline-header {
    position: relative;
    overflow: hidden;
  }

  &__strapline-btn {
    position: relative;
    .u-float-left;
    padding: 0;
    outline-offset: -5px;
  }

  .ie &__strapline-btn:focus .focus-rect {
    position: absolute;
    right: 5px;
    bottom: 5px;
    top: 5px;
    left: 5px;
    outline-color: highlight;
    outline-style: solid;
    outline-width: 3px;
  }

  &__strapline-title {
    margin-right: @icon-size + (@item-padding * 2);
    padding: @item-padding;
    // Override button line height to match icon size
    line-height: @icon-size;

    .dir-rtl & {
      margin-right: inherit;
      margin-left: @icon-size + (@item-padding * 2);
    }
  }

  &__strapline-title-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__strapline-icon {
    position: absolute;
    top: 0;
    right: 0;

    .dir-rtl & {
      right: inherit;
      left: 0;
    }
  }

  &__strapline-icon .icon {
    .icon-plus;
  }

  // --------------------------------------------------

  // --------------------------------------------------
  // Graphic
  // --------------------------------------------------
  &__slide-container {
    // position: relative;
    width: 100%;
    overflow-x: hidden;
    // float: left;
    padding-bottom: 20px;

    @media (min-width: @device-width-medium) {
      width: auto;
      max-width: 100%;
      // margin-right: 4%;
    }
  }

  &__slider-image-container {
    .u-float-left;
    display: block;
    // height: 540px;
  }

  // --------------------------------------------------
  // Button controls
  // --------------------------------------------------
  &__controls-container {
    position: relative;
  }

  &__controls {
    position: absolute;
    top: 15%;
    z-index: 10;
    .transform(translateY(360%));

    img {
      width: 35px;
      height: auto;
    }
  }

  &__controls-left {
    left: 6px;

    @media screen and (max-width: 896px) {
      left: -5px;
    }

    .dir-rtl & {
      left: inherit;
      right: 0;
    }
  }

  &__controls-left .icon {
    .icon-controls-left;
  }

  &__controls-right {
    right: 6px;

    @media screen and (max-width: 896px) {
      right: -5px;
    }

    .dir-rtl & {
      right: inherit;
      left: 0;
    }
  }

  &__controls-right .icon {
    .icon-controls-right;
  }

  // --------------------------------------------------
  // Progress indicators
  // --------------------------------------------------
  &__indicators {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    // pointer-events: none;
    // cursor: default;
    // margin-top: 25px;

    @media (min-width: @device-width-medium) {
      width: 100%;
    }
  }

  &__progress {
    height: 0.5rem;
    width: 3rem;
    margin: 0.25rem;
    cursor: pointer;
    background-color: #9D3418;

  }

  &__progress.is-selected {
    background-color: #9D3418;
  }

  // --------------------------------------------------

  // --------------------------------------------------
  // When the disable animation class is not present add a transition effect
  // to the narrative graphic on desktop and strapline on mobile
  // --------------------------------------------------
  html:not(.disable-animation) & {

    &__slider,
    &__strapline-header-inner {
      .transition(transform 400ms ease-in-out);
    }
  }

  // --------------------------------------------------

  // --------------------------------------------------
  // Controls located in text content area
  // Could we refactor this better?
  // --------------------------------------------------
  &__content {

    .narrative__controls,
    .narrative__indicators {
      display: none;
    }
  }

  &__text-controls {
    .narrative__content {
      position: relative;
      padding-top: @icon-size + (@icon-padding * 2);

      .narrative__indicators {
        display: flex;
        display: -ms-flexbox;
      }

      .narrative__controls-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        display: -ms-flexbox;
        align-items: center;
        justify-content: space-evenly;
      }

      .narrative__controls {
        position: relative;
        top: 0;
        display: block;
        transform: none;
      }
    }

    // Hide slide controls and indicators until single column view
    // --------------------------------------------------
    @media (min-width: @device-width-medium) {

      .narrative__slide-container .narrative__controls,
      .narrative__slide-indicators {
        display: none;
      }
    }
  }

  // --------------------------------------------------
}

.narrative__content-body-inner,
.content_container {
  font-size: 1.5rem;
}

.content_container {
  p {
    margin-top: 5px;
  }
}

.narrative__content-body-inner ul>li {
  margin-left: -20px !important;
}

.narrative__content-body-inner ul>li:before {
  content: "";
  position: absolute;
  left: -18px !important;
  top: 7px;
  width: 8px !important;
  height: 8px !important;
  background-color: currentColor;
  border-radius: 50%;
}

.full_layout {
  width: 100% !important;
}

.full-layout-container {
  min-height: 549px;

  .image-container {
    width: 100%;
    height: auto;
    display: inline-block;

    .image-inner-container {
      height: auto;
      padding: 10px;
      background: #0063ff;
      color: #fff;
      text-decoration: none;
      margin-left: 8px;
      width: 24%;
      float: left;
      padding-bottom: 15px;

      .title {
        font-weight: 600;
        height: 55px;

        p {
          margin-top: 0px;
          margin-bottom: 10px;
          font-family: 'RRPioneer';
          font-size: 1.2rem;
        }
      }
    }
  }
}


@media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {
  .mr_wrapper_container_narrative .narrative_main_container .narrative-container-title {
    width: 100% !important;
    padding-bottom: 25px !important;
  }

  .full-layout-container .image-container .image-inner-container {
    width: 100% !important;
    margin-bottom: 15px;
    margin-left: 0px !important;
    height: auto;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:landscape) {
  .mr_wrapper_container_narrative .narrative_main_container .narrative-container-title {
    width: 100% !important;
  }

  .full-layout-container .image-container .image-inner-container {
    width: 23%;
    height: auto !important;
  }

  .full-layout-container .image-container .image-inner-container .title {
    height: 55px;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .mr_wrapper_container_narrative .narrative_main_container .narrative-container-title {
    width: 100% !important;
  }

  .full-layout-container .image-container .image-inner-container {
    width: 23% !important;
    margin-left: 15px !important;
  }

  .full-layout-container .image-container .image-inner-container .title {
    height: 55px;
  }
}

.main_narrative_wrapper {
  position: relative;

}

.main_slider_container {
  position: relative;
  height: 100%;
  padding: 0px 100px 10px 80px;
  width: 100%;
  background-color: #eacbb5;
  min-height: 450px;

  @media screen and (max-width: 896px) {
    padding: 0px 25px 10px 25px;
  }

  @media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {
    width: 100% !important;
    padding: 0px 25px 10px 25px;
    height: auto;
  }
}

.cyuScroll {
  margin: auto;
  position: relative;
  background: #fff;
  padding: 40px 50px 3px 50px;
  width: 100%;
  min-height: 410px;
  top: 11px;
  max-width: 550px;

  @media screen and (max-width: 896px) {
    width: 100% !important;
    padding: 10px 10px 3px 10px;
    height: auto;
  }

  @media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {
    width: 100% !important;
    padding: 10px 10px 3px 10px;
    height: auto;
  }

  @media only screen and (min-device-width: 320px) and (max-device-width: 920px) and (orientation:landscape) {
    width: 70% !important;
    padding: 10px 10px 3px 10px;
    height: auto;
  }

  .cyu-title {
    .qNo {
      display: inline-block;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
      color: #000;
      font-size: 1.2rem;
      font-weight: 600;
      outline: 0px;
      font-family: sans-serif;
    }

    #qText {
      display: inline-block;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
      color: #000;
      font-size: 1.2rem;
      font-weight: 500;
      outline: 0px;

      @media screen and (max-width: 896px) {
        font-size: 1rem;
      }
    }

    #instruction_text {
      color: #000;
      font-size: 1.1rem;
      line-height: 20px;
      font-weight: normal;
      font-style: italic;
      margin: 0;

      @media screen and (max-width: 896px) {
        font-size: 1rem;
      }
    }
  }

  .cyu-options {
    overflow-y: auto;
    line-height: 1.2;
    width: auto;
    padding: 0px;
    margin: 0px;


    ._item {
      position: relative;
      padding: 0;
      display: block;
      color: #000;
      background: none;
      border-radius: 0px;
      font-size: 1.2rem;
      min-height: auto;
      margin-bottom: 15px;
      font-weight: 300;
      cursor: pointer;
      background-color: #fde2c7;
      margin-top: 15px;
      width: 295px;

      @media screen and (max-width: 896px) {
        font-size: 1rem;
      }

      .lab_container {
        display: inline-block;
        cursor: pointer;
        position: relative;
        width: 100%;
        padding: 10px 55px;

        input {
          position: absolute;
          opacity: 0;
          width: 100%;
          top: 0px;
          height: 100%;
          cursor: pointer;
          display: block !important;
          left: 0px !important;
          z-index: 1;
        }
      }
    }
  }
}

.cyuScroll .lab_container .radioassessment {
  position: absolute;
  left: 20px;
  height: 20px;
  width: 20px;
  top: calc(50% - 10px);
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(117, 120, 123);
  border-radius: 50%;
  z-index: 0;
}

.cyuScroll .lab_container .correctIncorrectIcon {
  position: absolute;
  right: 0px;
  min-height: 44px;
  max-width: 47px;
  top: calc(50% - 22px);
  background: transparent;
  width: 100%;

  @media screen and (max-width: 896px) {
    position: absolute;
    right: 0px;
    min-height: 40px;
    max-width: 47px;
    top: calc(50% - 20px);
    background: transparent;
    width: 100%;
  }

}

.correctIcon {
  background-image: url(course/en/images/tick.png) !important;
  background-repeat: no-repeat !important;
  background-color: #dfedc3 !important;
  background-position: center !important;
}

.IncorrectIcon {
  background-image: url(course/en/images/cross.png) !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff69 !important;
  background-position: center !important;
}

.cyuScroll .lab_container input:checked+.radioassessment {
  transform: none;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(117, 120, 123);
}

.cyuScroll .lab_container input:checked+.radioassessment,
.cyuScroll .lab_container input:checked+.radioassessment:after {
  display: block;
}

.cyuScroll .lab_container .radioassessment:after {
  content: "";
  position: absolute;
  display: none;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  transform: none;
  background: rgb(0, 0, 0);
  border-radius: 50%;
}

.abc .radioassessment {
  display: block !important;
}

.abc .radioassessment:after {
  display: block !important;
}


._item:hover {
  background-color: #9D3418 !important;
  color: #fff !important;
}

.submitBtn {
  outline: none;
  border: none;
  padding: 10px 30px;
  background-color: #fde2c7;
  margin-left: 0px;
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #000 !important;

  @media screen and (max-width: 896px) {
    font-size: 1rem;
  }
}

.submitBtn:hover {
  background-color: #9D3418;
  color: #fff !important;
}

.showAnswer {
  outline: none;
  border: none;
  padding: 10px 20px;
  background-color: #fde2c7;
  margin-left: 0px;
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #000 !important;

  @media screen and (max-width: 896px) {
    font-size: 1rem;
  }
}

.showAnswer:hover {
  background-color: #9D3418;
  color: #fff !important;
}