.narrative {
    &__content-title {
    margin-bottom: @item-title-margin;    
    .item-title;
    font-size: 1.5rem;
  }

  &__controls {
    background-color: transparent;
    color: @item-color-inverted;

    .no-touch &:hover {
      background-color: transparent;
      color: @item-color-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }
  }

  &__progress {
    background-color: #fff;
    border-radius: 0;
    border: 2px solid #9D3418;

    .no-touch &:not(.is-selected):hover {
      // background-color: @item-color-hover;
      // .transition(background-color @duration ease-in);
    }
  }

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

  &__strapline-btn {
    text-align: left;
    background-color: @item-color;
    color: @item-color-inverted;

    .no-touch &:hover {
      background-color: @item-color-hover;
      color: @item-color-inverted-hover;
    }

    .dir-rtl & {
      text-align: right;
    }
  }

  &__strapline-btn.is-visited {
    background-color: @visited;
    color: @visited-inverted;
  }

  &__slider-image-container {
    // .img-zoom();
  }
}


.mr_wrapper_container_narrative{ 
  padding: 1rem 0rem 4rem;
  width: 100%;
  min-height: 100%;
  // background-color: #58009c;
  .narrative_main_container{
    width: 100%;    
    height: auto;
  
    .narrative-container-title{
      color: #000;
      height: 100%;
      width: 100%;
     .inner_container{
       position: relative;
     }
      .narrative_heading{
        color: #d74520;
        padding: 0px 100px 0px 100px;       
        font-weight: 100;       
        font-size: 1.5rem;
        margin-top: 0;
        margin-bottom: 10px;
        @media screen and (max-width: 896px) {
          font-size: 1.3rem;
          padding: 0px 15px 0px 15px; 
        }
        @media only screen and (min-device-width: 320px) and (max-device-width: 896px) 
        {
          padding: 0px 15px 0px 15px;
        }
      }
      .clicked_container{             
        max-width: 450px;        
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: relative;
      }
      .instruction_text{
        font-size: 1.2rem;       
        padding: 0 55px;
        // margin-left: 74px;
        padding: 0px 100px 0px 100px;
        @media screen and (max-width: 896px) {
          padding: 0px 15px 0px 15px;
          font-size: 1rem;
        }
        @media only screen and (min-device-width: 320px) and (max-device-width: 896px) 
        {
          padding: 0px 15px 0px 15px;
        }
       
      }
    }
  }

}
.disabledbtn{
  background-color: #A5A19D !important;
    cursor: default;
    pointer-events: none;
}
.disabledoption{
  cursor: default;
  pointer-events: none;
}
.correctAns{
background-color: #78DF2F !important;
color: #000 !important;
}
.incorrectAns{
background-color: #c50a00 !important;
color: #fff !important;
}     

.feedback-container
{
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  z-index: 99;
  display: none;
  background: rgba(0,0,0,0.5);
  .closeBtn_CYU:before {
    content: "\e634";
  }

  .closeBtn_CYU:before {
    display: block;
    background-color: white;
    font-family: "vanilla";        
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 896px) {
  width: 100% !important; 
}

  @media only screen and (min-device-width: 320px) and (max-device-width: 767px) and (orientation:portrait)
  {
    // position: absolute;
    // width: 100% !important; 
    // background-color: white;
    // top:20px; 
   
  } 

  @media only screen and (min-device-width: 768px) and (max-device-width: 896px) and (orientation:portrait)
  {
    // position: absolute;
    // width: 100% !important; 
    // background-color: white;
    // top:20px;  
  } 

  
}

.correct{
  padding: 32px 70px 30px;
  background-color: white;
  width: 100%;
  min-height: 330px;
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: 72%;
  position: absolute;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  @media screen and (max-width: 896px) {
    font-size: 1rem;
    padding: 10px 10px 3px 10px;
    padding-top: 70px;
    // min-height: auto; 
    width: 90% !important;
  }
  @media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:portrait)
  {
    width: 90% !important;
    padding: 10px 25px 3px 25px ;
    min-height: 350px; 
    position: absolute;
    padding-top: 70px;

    
  .feedbackIcon{  
      left: 18px !important;
      top: 15px;

  }
  
  } 

  @media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:landscape)
  {
    width: 90% !important;
    padding: 25px 66px 30px;
    max-height: 400px;
    position: absolute;
    min-height: auto; 

    .feedbackIcon{ 
 
      left: 18px;
      top: 15px;

  }
   
  } 

  .feedbackIcon{
    max-width: 38px;
    position: absolute;
    left: 19px;
    top: 24px;
    @media screen and (max-width: 896px) {
      left: 10px;
      top: 15px;
    }
  }
}
.partial{
  padding: 32px 70px 30px;
  background-color: white;
  width: 100%;
  min-height: 330px;
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: 72%;
  position: absolute;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  @media screen and (max-width: 896px) {
    font-size: 1rem;
    padding: 10px 10px 3px 10px;
    padding-top: 70px;
    // min-height: auto; 
    width: 90% !important;
  }
  @media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:portrait)
  {
    width: 90% !important;
    padding: 10px 25px 3px 25px ;
    min-height: 350px; 
    position: absolute;
    padding-top: 70px;

    
  .feedbackIcon{  
      left: 18px !important;
      top: 15px;

  }
  
  } 

  @media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:landscape)
  {
    width: 90% !important;
    padding: 25px 66px 30px;
    max-height: 400px;
    position: absolute;
    min-height: auto; 

    .feedbackIcon{ 
 
      left: 18px;
      top: 15px;

  }
   
  } 

  .feedbackIcon{
    max-width: 38px;
    position: absolute;
    left: 19px;
    top: 24px;
    @media screen and (max-width: 896px) {
      left: 10px;
      top: 15px;
    }
  }
}
.incorrect_firstAttempt
{
  padding: 32px 70px 30px;
  background-color: white;
  width: 100%;
  min-height: 330px;
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: 72%;
  position: absolute;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  @media screen and (max-width: 896px) {
    font-size: 1rem;
    padding: 10px 10px 3px 10px;
    padding-top: 70px;
    // min-height: auto; 
    width: 90% !important;
  }
  @media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:portrait)
  {
    width: 90% !important;
    padding: 10px 25px 3px 25px ;
    min-height: 350px; 
    position: absolute;
    padding-top: 70px;

    
  .feedbackIcon{  
      left: 18px !important;
      top: 15px;

  }
  
  } 

  @media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:landscape)
  {
    width: 90% !important;
    padding: 25px 66px 30px;
    max-height: 400px;
    position: absolute;
    min-height: auto; 

    .feedbackIcon{ 
 
      left: 18px;
      top: 15px;

  }
   
  } 

  .feedbackIcon{
    max-width: 38px;
    position: absolute;
    left: 19px;
    top: 24px;
    @media screen and (max-width: 896px) {
      left: 10px;
      top: 15px;
    }
  }
}
.incorrect{
  padding: 32px 70px 30px;
  background-color: white;
  width: 100%;
  min-height: 330px;
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: 72%;
  position: absolute;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  @media screen and (max-width: 896px) {
    font-size: 1rem;
    padding: 10px 10px 3px 10px;
    padding-top: 70px;
    // min-height: auto; 
    width: 90% !important;
  }
  @media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:portrait)
  {
    width: 90% !important;
    padding: 10px 25px 3px 25px ;
    min-height: 350px; 
    position: absolute;
    padding-top: 70px;

    
  .feedbackIcon{  
      left: 18px !important;
      top: 15px;

  }
  
  } 

  @media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:landscape)
  {
    width: 90% !important;
    padding: 25px 66px 30px;
    max-height: 400px;
    position: absolute;
    min-height: auto; 

    .feedbackIcon{ 
 
      left: 18px;
      top: 15px;

  }
   
  } 

  .feedbackIcon{
    max-width: 38px;
    position: absolute;
    left: 19px;
    top: 24px;
    @media screen and (max-width: 896px) {
      left: 10px;
      top: 15px;
    }
  }
}
.nextDisabled{
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:portrait){
  .hotgraphic__tile{
   margin-left: 0px;
  }
}