/* Rendered: 13:49:26 GMT+0100 (British Summer Time) */
.Test {
  background: #f6f6f6; }

body.ImageModalLock {
  overflow: hidden; }

.ImageModal {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0; }
  .ImageModal .Dialog {
    background: #ffffff;
    padding: 15px;
    position: relative; }
    @media (max-width: 950px) {
      .ImageModal .Dialog {
        max-width: 90%; } }
    .ImageModal .Dialog img {
      max-height: calc(90vh - 30px);
      max-width: calc(90vw - 30px); }
    .ImageModal .Dialog .Close {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      color: #ffffff;
      font-family: Arial,Baskerville,monospace;
      font-weight: bold;
      font-size: 25px;
      position: absolute;
      top: -30px;
      right: 0;
      left: 0;
      text-align: right;
      z-index: 600;
      text-decoration: none; }
      .ImageModal .Dialog .Close:hover {
        opacity: 0.5; }
  .ImageModal.Open {
    visibility: visible;
    opacity: 1; }

@keyframes decrease {
  from {
    transform: scale(1);
    opacity: 0; }
  to {
    transform: scale(0);
    opacity: 1; } }

.IndicatorCircle {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  display: none; }
  .IndicatorCircle.Show {
    display: block; }
  .IndicatorCircle span {
    border: 2px solid #ff0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation-name: decrease;
    animation-duration: 4s;
    animation-iteration-count: infinite; }
    .IndicatorCircle span.Circ1 {
      animation-delay: 0s; }
    .IndicatorCircle span.Circ2 {
      animation-delay: 1s; }
    .IndicatorCircle span.Circ3 {
      animation-delay: 2s; }
    .IndicatorCircle span.Circ4 {
      animation-delay: 3s; }

@keyframes ArrowOscillate {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(15px); } }

@keyframes SlotPulse {
  from {
    opacity: 0.25; }
  to {
    opacity: 1; } }

@media (max-width: 650px) {
  @keyframes SlotPulse {
    from {
      opacity: 0.25;
      transform: scaleY(1);
      transform: scaleX(1); }
    to {
      transform: scaleY(2);
      transform: scaleX(4);
      opacity: 1; } } }

#ShowroomLibrary {
  margin-bottom: 20px;
  position: relative;
  overflow: hidden; }
  #ShowroomLibrary .InfoBox {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    width: 200px;
    background: #fff;
    border-radius: 10px;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    visibility: hidden; }
    #ShowroomLibrary .InfoBox.Active {
      opacity: 1;
      visibility: visible; }
  #ShowroomLibrary .ImOuter {
    overflow: auto;
    position: relative; }
  #ShowroomLibrary .ImStage {
    position: relative;
    overflow: hidden; }
  #ShowroomLibrary .Im {
    position: relative; }
  #ShowroomLibrary .Overlays {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; }
  #ShowroomLibrary .BlockOverlays {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; }
    #ShowroomLibrary .BlockOverlays > div {
      position: absolute;
      background: rgba(255, 255, 0, 0.5);
      height: 100%;
      width: 18.6%;
      opacity: 0; }
      #ShowroomLibrary .BlockOverlays > div.Selected {
        background: rgba(0, 0, 0, 0.5); }
      #ShowroomLibrary .BlockOverlays > div#B1 {
        left: 2.4%; }
      #ShowroomLibrary .BlockOverlays > div#B2 {
        left: 21.5%; }
      #ShowroomLibrary .BlockOverlays > div#B3 {
        left: 40.7%; }
      #ShowroomLibrary .BlockOverlays > div#B4 {
        left: 59.9%; }
      #ShowroomLibrary .BlockOverlays > div#B5 {
        left: 79%; }
  #ShowroomLibrary .RowOverlays {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none; }
    #ShowroomLibrary .RowOverlays > div {
      background: rgba(255, 255, 0, 0.5);
      position: absolute;
      width: 100%;
      opacity: 0; }
      #ShowroomLibrary .RowOverlays > div#RowA {
        height: 12.5%;
        top: 7%; }
      #ShowroomLibrary .RowOverlays > div#RowB {
        height: 12.5%;
        top: 21%; }
      #ShowroomLibrary .RowOverlays > div#RowC {
        height: 28%;
        top: 35%; }
      #ShowroomLibrary .RowOverlays > div#RowD {
        height: 28%;
        top: 64.5%; }
  #ShowroomLibrary .Map {
    position: absolute;
    left: 2.4%;
    right: 2.4%;
    top: 7%;
    bottom: 7%; }
    #ShowroomLibrary .Map .Row {
      position: absolute;
      width: 100%; }
      #ShowroomLibrary .Map .Row.RowA {
        top: 0;
        height: 14.5%; }
      #ShowroomLibrary .Map .Row.RowB {
        top: 16%;
        height: 14.5%; }
      #ShowroomLibrary .Map .Row.RowC {
        top: 32.5%;
        height: 33%; }
      #ShowroomLibrary .Map .Row.RowD {
        top: 67%;
        height: 33%; }
      #ShowroomLibrary .Map .Row .Block {
        position: absolute;
        left: -1000px;
        height: 100%;
        width: 16.5%;
        display: flex;
        align-items: stretch;
        justify-content: stretch; }
        #ShowroomLibrary .Map .Row .Block.BlockB1 {
          left: 1.6%; }
        #ShowroomLibrary .Map .Row .Block.BlockB2 {
          left: 21.6%; }
        #ShowroomLibrary .Map .Row .Block.BlockB3 {
          left: 41.8%; }
        #ShowroomLibrary .Map .Row .Block.BlockB4 {
          left: 62%; }
        #ShowroomLibrary .Map .Row .Block.BlockB5 {
          left: 82%; }
        #ShowroomLibrary .Map .Row .Block .Slot {
          background: #e31937;
          flex-grow: 1;
          flex-basis: 0;
          opacity: 0; }
          #ShowroomLibrary .Map .Row .Block .Slot.Anim {
            animation-name: SlotPulse;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-duration: 1s; }
          #ShowroomLibrary .Map .Row .Block .Slot.Selected {
            /*
            animation-name: SlotPulse;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-duration: 1s;

             */ }
  #ShowroomLibrary .BlockHeaders {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20; }
    #ShowroomLibrary .BlockHeaders > div {
      position: absolute;
      height: 100%;
      width: 18.6%;
      text-align: center;
      font-size: 16px;
      color: #ffffff;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center; }
      @media (max-width: 650px) {
        #ShowroomLibrary .BlockHeaders > div {
          font-size: 12px; } }
      #ShowroomLibrary .BlockHeaders > div > div {
        display: flex;
        align-items: center;
        justify-content: center; }
        #ShowroomLibrary .BlockHeaders > div > div span {
          background: #e31937;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          margin: 3px;
          mix-blend-mode: multiply; }
          @media (max-width: 650px) {
            #ShowroomLibrary .BlockHeaders > div > div span {
              width: 15px;
              height: 15px; } }
        @media (max-width: 1439px) {
          #ShowroomLibrary .BlockHeaders > div > div {
            width: 100%; } }
      #ShowroomLibrary .BlockHeaders > div.BH1 {
        left: 2.4%; }
      #ShowroomLibrary .BlockHeaders > div.BH2 {
        left: 21.5%; }
      #ShowroomLibrary .BlockHeaders > div.BH3 {
        left: 40.7%; }
      #ShowroomLibrary .BlockHeaders > div.BH4 {
        left: 59.9%; }
      #ShowroomLibrary .BlockHeaders > div.BH5 {
        left: 79%; }
  #ShowroomLibrary .RowHeaders {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    z-index: 20; }
    #ShowroomLibrary .RowHeaders > div {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      font-weight: 500;
      font-size: 14px; }
      @media (max-width: 650px) {
        #ShowroomLibrary .RowHeaders > div {
          font-size: 12px; } }
      #ShowroomLibrary .RowHeaders > div > div {
        display: flex;
        align-items: center;
        justify-content: center; }
        #ShowroomLibrary .RowHeaders > div > div span {
          background: #e31937;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          line-height: 1; }
          @media (max-width: 650px) {
            #ShowroomLibrary .RowHeaders > div > div span {
              width: 15px;
              height: 15px; } }
        @media (max-width: 1439px) {
          #ShowroomLibrary .RowHeaders > div > div {
            height: 100%; } }
      #ShowroomLibrary .RowHeaders > div.RH_A {
        height: 12.5%;
        top: 7%; }
      #ShowroomLibrary .RowHeaders > div.RH_B {
        height: 12.5%;
        top: 21%; }
      #ShowroomLibrary .RowHeaders > div.RH_C {
        height: 28%;
        top: 35%; }
      #ShowroomLibrary .RowHeaders > div.RH_D {
        height: 28%;
        top: 64.5%; }
  #ShowroomLibrary .IndicatorArrow {
    top: -100px;
    left: -100px;
    position: absolute;
    width: 40px; }
    @media (max-width: 650px) {
      #ShowroomLibrary .IndicatorArrow {
        width: 20px; } }
    #ShowroomLibrary .IndicatorArrow.Anim {
      animation-name: ArrowOscillate;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-duration: 1s; }

.SearchResultsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; }
  @media (max-width: 767px) {
    .SearchResultsGrid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px; } }
  @media (max-width: 400px) {
    .SearchResultsGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px; } }
  .SearchResultsGrid .Cell {
    background: #f6f6f6;
    padding: 10px;
    display: flex;
    flex-direction: column; }
    .SearchResultsGrid .Cell.Active {
      background: #ff0; }
    .SearchResultsGrid .Cell .Thumbnail {
      margin-bottom: 10px; }
    .SearchResultsGrid .Cell .CellBody {
      flex: 1;
      padding-bottom: 10px; }

#ShowroomSearch .SearchForm {
  background: #f6f6f6;
  padding: 10px;
  margin-bottom: 10px;
  display: flex; }
  #ShowroomSearch .SearchForm > div:first-child {
    flex: 1; }
  #ShowroomSearch .SearchForm input[type=text] {
    width: 100%; }

#ShowroomSearch .ClearSearch {
  font-style: italic;
  display: none;
  margin-bottom: 10px; }
  #ShowroomSearch .ClearSearch a {
    display: inline-block;
    border-bottom: 1px dashed #e31937; }

#ShowroomSearch .SearchResults {
  margin-bottom: 50px;
  /*
    table {

      display: none;
      width: 100%;

      td, th {
        padding: 10px;
        vertical-align: center;
      }

      td {
        //cursor: pointer;

        &.Thumbnail {
          a {
            img {
              width: 100px;
            }
          }
        }
      }


      tr {
        &:nth-child(even) {
          background: $gray-background;
        }
      }

      thead {
        tr {
          background-color: #000000;
          color: #ffffff;
          font-weight: 500;
          text-align: left;
        }
      }

      tbody {
        tr {
          @include Transition;

          &:hover {
            //background: #fad4da;
          }

          &.Selected {
            background: $red;
            color: #ffffff;
          }
        }
      }

    }
    */ }
  #ShowroomSearch .SearchResults .NoResults {
    display: none; }
  #ShowroomSearch .SearchResults .ResultsGrid {
    display: none; }
  #ShowroomSearch .SearchResults .View {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: url("../i/icons/Icon-Eye.svg?v=1.01") no-repeat right 10px center;
    background-size: auto 50%;
    background-color: #e31937;
    border-radius: 4px;
    box-sizing: border-box;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    padding: 10px 15px;
    padding-right: 45px;
    width: 100%; }
    #ShowroomSearch .SearchResults .View:hover {
      background-color: #870f21; }

#ShowroomSearch #SelectedDecorInfo {
  background: #f6f6f6;
  border: 1px solid #c3c3c3;
  margin-bottom: 20px;
  padding: 15px;
  display: none; }
  #ShowroomSearch #SelectedDecorInfo > div:first-child {
    font-weight: bold; }