/* ==========================================================================
   Responsive: house chart figure positioning
   ========================================================================== */

/* --------------------------------------------------------------------------
   Standart
   -------------------------------------------------------------------------- */
figure {
  margin: 0 0 15px;
}

.figure {
  font-size: 22px;
  margin-top: 18px;
}

.houseChart .diamond + .diamond,
.shieldChart .diamond + .diamond {
  margin-left: 9px !important;
}

:root{
  --diamond-size: 10px;
}

.diamond {
  font-size: 16px !important;
  height: 16px !important;
  width: 16px !important;
  margin-bottom: 9px !important;
  display: inline-block;
  width: var(--diamond-size);
  height: var(--diamond-size);
  vertical-align: middle;
  background-color: #fff;
  -webkit-mask-repeat :no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8,0 16,8 8,16 0,8' fill='%23000'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8,0 16,8 8,16 0,8' fill='%23000'/%3E%3C/svg%3E");
}

.houseChart .figure {
  z-index: 1;
  position: absolute;
  transform: rotate(-45deg);
  height: 128px;
  width: 128px;
  padding-top: 18px;
  transition: none !important;
  cursor: default !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
  transform-origin: center center !important;
  margin: 0 !important;
}

.houseChart [data-index="1"]  .figure,
.houseChart [data-index="4"]  .figure,
.houseChart [data-index="7"]  .figure,
.houseChart [data-index="10"] .figure {
  transform: translate(-60%, -60%) rotate(-45deg) !important;
}

.houseChart [data-index="2"]  .figure,
.houseChart [data-index="12"] .figure {
  transform: translate(-5%, -115%) rotate(-45deg) !important;
}

.houseChart [data-index="3"] .figure,
.houseChart [data-index="5"] .figure {
  transform: translate(-120%, -120%) rotate(-45deg) !important;
}

.houseChart [data-index="6"] .figure,
.houseChart [data-index="8"] .figure {
  transform: translate(-115%, -5%) rotate(-45deg) !important;
 }

.houseChart [data-index="9"]  .figure,
.houseChart [data-index="11"] .figure {
  transform: translate(0%, 0%) rotate(-45deg) !important;
}

/* --------------------------------------------------------------------------
   ≤ 1030px
   -------------------------------------------------------------------------- */
@media (max-width: 1030px) {
    
  figure {
    margin: 0 0 15px;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-60%, -61%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(-11%, -110%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-115%, -115%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-110%, -11%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(-5%, -5%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 980px
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    
  figure {
    margin: 0 0 8px;
  }
    
  .figure {
    font-size: 20px;
    margin-top: 14px;
  }
  
  .houseChart .diamond + .diamond,
  .shieldChart .diamond + .diamond {
    margin-left: 8px !important;
  }

  .diamond {
    font-size: 14px !important;
    height: 14px !important;
    width: 14px !important;
  }
  
  .houseChart .figure {
    height: 112px !important;
    width: 112px !important;
    padding-top: 0 !important;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-50%, -49%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(0%, -100%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-109%, -109%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-100%, 0%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(7%, 7%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 930px
   -------------------------------------------------------------------------- */
@media (max-width: 930px) {
    
  figure {
    margin: 0 0 8px;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-51%, -50%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(-3%, -99%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-104%, -104%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-99%, -3%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(7%, 7%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 880px
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
    
  figure {
    margin: 0 0 9px;
  }
    
  .figure {
    font-size: 18px;
    margin-top: 14px;
  }
  
  .houseChart .diamond + .diamond,
  .shieldChart .diamond + .diamond {
    margin-left: 7px !important;
  }

  .diamond {
    font-size: 12px !important;
    height: 12px !important;
    width: 12px !important;
  }
  
  .houseChart .figure {
    height: 96px !important;
    width: 96px !important;
    padding-top: 0 !important;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-52%, -53%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(0%, -105%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-115%, -115%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-105%, 0%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(12%, 14%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 830px
   -------------------------------------------------------------------------- */
@media (max-width: 830px) {
    
  figure {
    margin: 0 0 9px;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-53%, -53%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(-2%, -103%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-110%, -110%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-103%, -2%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(5%, 5%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 780px
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
    
  figure {
    margin: 0 0 10px;
  }
    
  .figure {
    font-size: 16px;
    margin-top: 14px;
  }
  
  .houseChart .diamond + .diamond,
  .shieldChart .diamond + .diamond {
    margin-left: 6px !important;
  }

  .diamond {
    font-size: 10px !important;
    height: 10px !important;
    width: 10px !important;
  }
  
  .houseChart .figure {
    height: 80px !important;
    width: 80px !important;
    padding-top: 0 !important;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-55%, -53%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(2%, -110%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-122%, -120%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-110%, 2%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(12%, 14%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 730px
   -------------------------------------------------------------------------- */
@media (max-width: 730px) {
    
  figure {
    margin: 0 0 8px;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-54%, -54%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(-1%, -108%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-115%, -115%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-108%, -1%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(7%, 7%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 680px
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {

  figure {
    margin: 0 0 9px;
  }
    
  .figure {
    font-size: 14px;
    margin-top: 16px;
  }
  
  .houseChart .diamond + .diamond,
  .shieldChart .diamond + .diamond {
    margin-left: 5px !important;
  }

  .diamond {
    font-size: 8px !important;
    height: 8px !important;
    width: 8px !important;
  }
  
  .houseChart .figure {
    height: 64px !important;
    width: 64px !important;
    padding-top: 0 !important;
  }
  
  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-62%, -60%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(0%, -122%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-132%, -132%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-122%, 0%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(19%, 19%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 630px
   -------------------------------------------------------------------------- */
@media (max-width: 630px) {

  figure {
    margin: 0 0 9px;
  }
  
  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-57%, -57%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(-3%, -113%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-122%, -122%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-113%, -3%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(7%, 7%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 580px
   -------------------------------------------------------------------------- */
@media (max-width: 580px) {
    
  figure {
    margin: 0 0 10px;
  }

  .figure {
    font-size: 12px;
    margin-top: 18px;
  }
  
  .houseChart .diamond + .diamond,
  .shieldChart .diamond + .diamond {
    margin-left: 4px !important;
  }

  .diamond {
    font-size: 6px !important;
    height: 6px !important;
    width: 6px !important;
  }
  
  .houseChart .figure {
    height: 48px !important;
    width: 48px !important;
    padding-top: 0 !important;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-62%, -60%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(10%, -133%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-147%, -147%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-133%, 10%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(22%, 22%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 530px
   -------------------------------------------------------------------------- */
@media (max-width: 530px) {
    
  figure {
    margin: 0 0 10px;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-62%, -60%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(5%, -130%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-137%, -137%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-130%, 5%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(13%, 15%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    
  figure {
    margin: 0 0 13px;
  }

  .figure {
    font-size: 10px;
    margin-top: 20px;
  }

  .houseChart .diamond + .diamond,
  .shieldChart .diamond + .diamond {
    margin-left: 1px !important;
  }

  .diamond {
    font-size: 4px !important;
    height: 4px !important;
    width: 4px !important;
  }

  .houseChart .figure {
    height: 32px !important;
    width: 32px !important;
    padding-top: 0 !important;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-74%, -74%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(10%, -158%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-180%, -180%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-158%, 10%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(30%, 30%) rotate(-45deg) !important;
  }
}

/* --------------------------------------------------------------------------
   ≤ 400px
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    
  figure {
    margin: 0 0 13px;
  }

  .houseChart [data-index="1"]  .figure,
  .houseChart [data-index="4"]  .figure,
  .houseChart [data-index="7"]  .figure,
  .houseChart [data-index="10"] .figure {
    transform: translate(-74%, -70%) rotate(-45deg) !important;
  }

  .houseChart [data-index="2"]  .figure,
  .houseChart [data-index="12"] .figure {
    transform: translate(0%, -146%) rotate(-45deg) !important;
  }

  .houseChart [data-index="3"] .figure,
  .houseChart [data-index="5"] .figure {
    transform: translate(-160%, -158%) rotate(-45deg) !important;
  }

  .houseChart [data-index="6"] .figure,
  .houseChart [data-index="8"] .figure {
    transform: translate(-146%, 0%) rotate(-45deg) !important;
  }

  .houseChart [data-index="9"]  .figure,
  .houseChart [data-index="11"] .figure {
    transform: translate(15%, 18%) rotate(-45deg) !important;
  }
}