body {
  padding: 0;
  margin: 0;
  font-family: "Roboto Condensed", sans-serif; }

h1, h2, h3, h4, h5 {
  font-family: "Oswald", sans-serif; }

#tv-display {
  width: 100vw;
  height: 100vh;
  background-color: #f9f9fa;
  position: relative; }
  #tv-display h1 {
    margin: 0;
    position: absolute;
    top: 2.8vh;
    left: 4vw;
    width: 92vw;
    text-transform: uppercase;
    font-size: 1.8vw;
    letter-spacing: .01em; }
    #tv-display h1 span {
      font-weight: 400; }
    #tv-display h1 em {
      color: #e91d2d;
      font-style: normal;
      margin-left: .4vw; }

.card-1 {
  width: 22vw;
  height: 24vh;
  left: 4vw;
  top: 10vh; }

.card-2 {
  width: 22vw;
  height: 24vh;
  left: 27vw;
  top: 10vh; }

.card-3 {
  width: 22vw;
  height: 24vh;
  left: 50vw;
  top: 10vh; }

.card-4 {
  width: 22vw;
  height: 41.5vh;
  left: 74vw;
  top: 10vh; }

.card-5 {
  width: 68vw;
  height: 59vh;
  left: 4vw;
  top: 37vh; }

.card-6 {
  width: 22vw;
  height: 41.5vh;
  left: 74vw;
  bottom: 4vh; }

.card {
  border-radius: .4vw;
  box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  margin: 0;
  padding: 1vw;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden; }
  .card-title-underline {
    font-size: 1.05vw;
    font-family: var(--roboto);
    text-align: center;
    display: block;
    margin: 0;
    padding: 0; }
    .card-title-underline:after {
      content: "";
      width: 100%;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.3);
      display: block;
      margin: .6vh 0 0; }
  .card-title-small {
    font-size: .7vw;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    margin: -.5vh 0 0;
    padding: 0;
    font-weight: 400; }

.card-flex {
  position: relative; }
  .card-flex .card-content {
    display: flex;
    height: 9vw;
    margin-top: 1vw; }
  .card-flex .left {
    flex: 6 0;
    padding-right: 1vw;
    box-sizing: border-box; }
    .card-flex .left h3 {
      font-family: "Roboto Condensed", sans-serif;
      font-size: 1.3vw;
      line-height: 1;
      margin: 0; }
    .card-flex .left p {
      font-size: .8vw;
      color: rgba(0, 0, 0, 0.7);
      margin-bottom: 0;
      height: 6vw;
      overflow: hidden; }
      .card-flex .left p b {
        color: #e91d2d;
        font-weight: 600; }
  .card-flex .right {
    flex: 4 0;
    display: flex;
    justify-content: center;
    align-items: center; }
    .card-flex .right img {
      width: 100%;
      height: auto; }
  .card-flex .label {
    position: absolute;
    left: 1vw;
    bottom: .6vw;
    font-size: .6vw;
    display: block;
    white-space: nowrap;
    width: calc(100% - 2vw); }
    .card-flex .label em {
      color: #e91d2d;
      font-style: normal; }

.card-vs-last-month {
  display: flex;
  flex-direction: column; }
  .card-vs-last-month .card-content {
    position: relative;
    height: 100%;
    margin-top: 1vw; }
  .card-vs-last-month .this-month, .card-vs-last-month .last-month, .card-vs-last-month .change {
    position: absolute;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; }
    .card-vs-last-month .this-month .val, .card-vs-last-month .last-month .val, .card-vs-last-month .change .val {
      font-weight: 600;
      line-height: 1;
      letter-spacing: -.05em; }
    .card-vs-last-month .this-month .label, .card-vs-last-month .last-month .label, .card-vs-last-month .change .label {
      font-size: .75vw;
      line-height: 1.4; }
  .card-vs-last-month .this-month {
    height: 90%;
    left: 0;
    top: 5%;
    border-right: 1px solid rgba(0, 0, 0, 0.1); }
    .card-vs-last-month .this-month .val {
      font-size: 5vw;
      margin-top: .3vw;
      color: #3ab54a; }
    .card-vs-last-month .this-month .label b {
      display: block; }
  .card-vs-last-month .last-month {
    width: calc(50% - 1vw);
    margin: 0 0 0 1vw;
    height: 45%;
    left: 50%;
    top: 5%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: flex-start; }
    .card-vs-last-month .last-month .val {
      font-size: 1.8vw;
      margin-top: .3vw; }
  .card-vs-last-month .change {
    width: calc(50% - 1vw);
    margin: 0 0 0 1vw;
    height: 45%;
    left: 50%;
    top: 50%;
    justify-content: flex-end; }
    .card-vs-last-month .change .val {
      font-size: 1.8vw; }
      .card-vs-last-month .change .val:before {
        content: "";
        height: 1.6vw;
        width: 1vw;
        display: inline-block;
        margin-right: .2vw;
        background-image: url("../images/green-arrow.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: -.2vw; }
    .card-vs-last-month .change .label {
      margin-bottom: .3vw; }
  .card-vs-last-month.red .this-month .val {
    color: #e91d2d; }
  .card-vs-last-month.red .change .val:before {
    background-image: url("../images/red-arrow.svg"); }

.card-2 {
  display: flex;
  flex-direction: column; }
  .card-2 .card-content {
    position: relative;
    height: 100%;
    margin-top: 1.8vw; }
  .card-2 .review-count {
    width: 2.4vw;
    height: 2.4vw;
    background-color: #ffffff;
    border: 0.2vw solid #faae1a;
    text-align: center;
    text-transform: uppercase;
    font-size: .4vw;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(-2.5vw, -4.9vw);
    z-index: 3;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.2); }
    .card-2 .review-count span {
      color: #e91d2d;
      font-size: 1.2vw;
      font-weight: 600;
      line-height: 1;
      display: block;
      margin-bottom: -.1vw; }
    .card-2 .review-count:after {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      top: -38%;
      transform: translateX(-50%);
      width: 1.3vw;
      height: 1.4vw;
      background-image: url("../images/trophy.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center; }
  .card-2 .technician, .card-2 .location {
    text-align: center; }
    .card-2 .technician .image, .card-2 .location .image {
      position: relative;
      z-index: 1; }
      .card-2 .technician .image img, .card-2 .location .image img {
        display: block;
        margin: .4vw auto 0;
        width: 4.7vw;
        height: 4.7vw;
        overflow: hidden;
        border-radius: 50%;
        border: 0.3vw solid #ffffff;
        box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 2;
        box-sizing: border-box; }
      .card-2 .technician .image:after, .card-2 .location .image:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7.5vw;
        height: 7.5vw;
        transform: translate(-50%, -50%);
        display: block;
        border-radius: 50%;
        z-index: 1;
        background-color: #ffffff;
        background: linear-gradient(180deg, #e91d2d 0%, #e91d2d 50%, white 50%, white 100%); }
    .card-2 .technician .name, .card-2 .location .name {
      position: relative;
      z-index: 2;
      display: block;
      font-family: "Oswald", sans-serif;
      color: #e91d2d;
      text-transform: uppercase;
      margin: .3vw 0 0;
      font-size: 1.5vw;
      line-height: 1.1; }
      .card-2 .technician .name em, .card-2 .location .name em {
        font-style: normal;
        color: #000000; }
    .card-2 .technician .location, .card-2 .location .location {
      position: relative;
      z-index: 2;
      display: block;
      font-family: "Oswald", sans-serif;
      font-size: .7vw;
      text-transform: uppercase;
      letter-spacing: .01em; }
  .card-2 .label {
    position: absolute;
    left: 50%;
    bottom: .6vw;
    transform: translateX(-50%);
    font-size: .6vw;
    display: block;
    white-space: nowrap; }
    .card-2 .label em {
      color: #e91d2d;
      font-style: normal; }

.card-flex {
  position: relative; }
  .card-flex .card-content {
    display: flex;
    height: 9vw;
    margin-top: 1vw; }
  .card-flex .left {
    flex: 6 0;
    padding-right: 1vw;
    box-sizing: border-box; }
    .card-flex .left h3 {
      font-family: "Roboto Condensed", sans-serif;
      font-size: 1.3vw;
      line-height: 1;
      margin: 0; }
    .card-flex .left p {
      font-size: .8vw;
      color: rgba(0, 0, 0, 0.7);
      margin-bottom: 0;
      height: 6vw;
      overflow: hidden; }
      .card-flex .left p b {
        color: #e91d2d;
        font-weight: 600; }
  .card-flex .right {
    flex: 4 0;
    display: flex;
    justify-content: center;
    align-items: center; }
    .card-flex .right img {
      width: 100%;
      height: auto; }
  .card-flex .label {
    position: absolute;
    left: 1vw;
    bottom: .6vw;
    font-size: .6vw;
    display: block;
    white-space: nowrap;
    width: calc(100% - 2vw); }
    .card-flex .label em {
      color: #e91d2d;
      font-style: normal; }

.card-location-ratings .card-content {
  height: 10vw;
  margin-top: .7vw; }

.card-location-ratings .table-header {
  height: 11%;
  width: 100%;
  display: flex;
  justify-content: space-between; }
  .card-location-ratings .table-header p {
    margin: 0;
    font-size: .8vw;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600; }
    .card-location-ratings .table-header p:first-child {
      margin-left: .6vw; }

.card-location-ratings .table-rows {
  height: 89%;
  width: 100%; }
  .card-location-ratings .table-rows .table-row {
    height: 12.5%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 .6vw;
    box-sizing: border-box; }
    .card-location-ratings .table-rows .table-row .location {
      margin-right: auto;
      font-size: .8vw; }
    .card-location-ratings .table-rows .table-row .stars {
      position: relative;
      width: 5vw; }
      .card-location-ratings .table-rows .table-row .stars-container {
        width: 100%;
        overflow: hidden; }
        .card-location-ratings .table-rows .table-row .stars-container img {
          width: 5vw;
          height: auto;
          display: block; }
      .card-location-ratings .table-rows .table-row .stars-under {
        position: absolute;
        top: 0;
        left: 0; }
        .card-location-ratings .table-rows .table-row .stars-under img {
          width: 5vw;
          height: auto;
          opacity: .3;
          display: block; }
    .card-location-ratings .table-rows .table-row .rating {
      width: 1.8vw;
      text-align: right;
      font-size: .8vw; }
  .card-location-ratings .table-rows .table-row:first-child {
    background-color: #e91d2d; }
    .card-location-ratings .table-rows .table-row:first-child .location,
    .card-location-ratings .table-rows .table-row:first-child .rating {
      color: #ffffff; }

.card-4, .card-tech-last-winner {
  display: flex;
  flex-direction: column; }
  .card-4 .card-content, .card-tech-last-winner .card-content {
    position: relative;
    height: 100%;
    margin-top: 1.8vw; }
  .card-4 .review-count, .card-tech-last-winner .review-count {
    width: 2.4vw;
    height: 2.4vw;
    background-color: #ffffff;
    border: 0.2vw solid #faae1a;
    text-align: center;
    text-transform: uppercase;
    font-size: .4vw;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(-4.7vw, -8.5vw) scale(1.4);
    z-index: 3;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.2); }
    .card-4 .review-count span, .card-tech-last-winner .review-count span {
      color: #e91d2d;
      font-size: 1.2vw;
      font-weight: 600;
      line-height: 1;
      display: block;
      margin-bottom: -.1vw; }
    .card-4 .review-count:after, .card-tech-last-winner .review-count:after {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      top: -38%;
      transform: translateX(-50%);
      width: 1.3vw;
      height: 1.4vw;
      background-image: url("../images/trophy.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center; }
  .card-4 .technician, .card-4 .location, .card-tech-last-winner .technician, .card-tech-last-winner .location {
    text-align: center; }
    .card-4 .technician .image, .card-4 .location .image, .card-tech-last-winner .technician .image, .card-tech-last-winner .location .image {
      position: relative;
      z-index: 1; }
      .card-4 .technician .image img, .card-4 .location .image img, .card-tech-last-winner .technician .image img, .card-tech-last-winner .location .image img {
        display: block;
        margin: 1.1vw auto 0;
        width: 8vw;
        height: 8vw;
        overflow: hidden;
        border-radius: 50%;
        border: 0.4vw solid #ffffff;
        box-shadow: 0 0 0.8vw rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 2;
        box-sizing: border-box; }
      .card-4 .technician .image:after, .card-4 .location .image:after, .card-tech-last-winner .technician .image:after, .card-tech-last-winner .location .image:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12vw;
        height: 12vw;
        transform: translate(-50%, -50%);
        display: block;
        border-radius: 50%;
        z-index: 1;
        background-color: #ffffff;
        background: linear-gradient(180deg, #e91d2d 0%, #e91d2d 50%, #c01320 50%, #c01320 100%); }
    .card-4 .technician .name, .card-4 .location .name, .card-tech-last-winner .technician .name, .card-tech-last-winner .location .name {
      position: relative;
      z-index: 2;
      display: block;
      font-family: "Oswald", sans-serif;
      color: #e91d2d;
      text-transform: uppercase;
      margin: 3vw 0 0;
      font-size: 1.9vw;
      line-height: 1.1; }
      .card-4 .technician .name em, .card-4 .location .name em, .card-tech-last-winner .technician .name em, .card-tech-last-winner .location .name em {
        font-style: normal;
        color: #000000; }
    .card-4 .technician .location, .card-4 .location .location, .card-tech-last-winner .technician .location, .card-tech-last-winner .location .location {
      position: relative;
      z-index: 2;
      display: block;
      font-family: "Oswald", sans-serif;
      font-size: .9vw;
      text-transform: uppercase;
      letter-spacing: .01em; }
  .card-4 .label, .card-tech-last-winner .label {
    position: absolute;
    left: 50%;
    bottom: 1vw;
    transform: translateX(-50%);
    font-size: .6vw;
    display: block;
    white-space: nowrap; }
    .card-4 .label em, .card-tech-last-winner .label em {
      color: #e91d2d;
      font-style: normal; }

.card-5 h2 {
  text-align: left; }
  .card-5 h2 .legend {
    font-size: .8vw;
    float: right;
    font-weight: 400;
    font-family: "Roboto Condensed", sans-serif; }
    .card-5 h2 .legend:before {
      content: "";
      display: inline-block;
      width: 1.5vw;
      height: .8vw;
      background-color: #e91d2d;
      margin-right: .5vw;
      vertical-align: -.1vw; }

.card-5 .x-axis {
  font-family: "Oswald", sans-serif;
  font-size: .5em;
  color: #b3b4b4; }

.card-5 .x-axis .tick line, .card-5 .x-axis .domain {
  stroke: #eeeeee; }

.card-5 .y-axis .domain {
  stroke: #eeeeee; }

.card-d3-technicians #d3-techs {
  position: absolute;
  left: 1vw;
  right: 1vw;
  bottom: 1vw;
  top: 3.5vw; }

.card-d3-locations #d3-locations {
  position: absolute;
  left: 1vw;
  right: 1vw;
  bottom: 1vw;
  top: 3.5vw; }

.card-6 .card-content, .card-latest-review .card-content {
  width: 50%;
  height: 50%;
  position: relative;
  margin-top: 0; }

.card-6.card-tech-last-winner, .card-latest-review.card-tech-last-winner {
  flex-wrap: wrap;
  flex-direction: unset;
  padding: 1.5vw 1.5vw 0; }
  .card-6.card-tech-last-winner .place-count, .card-latest-review.card-tech-last-winner .place-count {
    position: absolute;
    width: 3vw; }
    .card-6.card-tech-last-winner .place-count em, .card-latest-review.card-tech-last-winner .place-count em {
      color: #e91d2d;
      font-size: 2vw;
      font-weight: 600;
      margin: -.5vw .15vw 0 0;
      font-style: normal;
      float: left;
      display: inline-block; }
    .card-6.card-tech-last-winner .place-count sup, .card-latest-review.card-tech-last-winner .place-count sup {
      font-size: .8vw;
      font-weight: 600;
      float: left;
      line-height: 1; }
    .card-6.card-tech-last-winner .place-count span, .card-latest-review.card-tech-last-winner .place-count span {
      font-size: .6vw;
      font-weight: 600;
      float: left;
      line-height: 1; }
  .card-6.card-tech-last-winner .review-count, .card-latest-review.card-tech-last-winner .review-count {
    transform: translate(50%, 0);
    top: 0;
    border: 0.3vw solid rgba(0, 0, 0, 0.25); }
    .card-6.card-tech-last-winner .review-count:after, .card-latest-review.card-tech-last-winner .review-count:after {
      filter: grayscale(100%); }
  .card-6.card-tech-last-winner .technician, .card-latest-review.card-tech-last-winner .technician {
    position: relative;
    top: 1vh;
    margin: 0; }
    .card-6.card-tech-last-winner .technician .image:after, .card-latest-review.card-tech-last-winner .technician .image:after {
      width: 6.5vw;
      height: 6.5vw;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 50%, #ffffff 50%, #ffffff 100%); }
    .card-6.card-tech-last-winner .technician .image img, .card-latest-review.card-tech-last-winner .technician .image img {
      margin-top: 2vw;
      width: 4.5vw;
      height: 4.5vw;
      filter: grayscale(100%); }
    .card-6.card-tech-last-winner .technician .name, .card-latest-review.card-tech-last-winner .technician .name {
      margin: .5vw 0 0;
      font-size: 1vw;
      line-height: 1; }
    .card-6.card-tech-last-winner .technician .location, .card-latest-review.card-tech-last-winner .technician .location {
      font-size: .7vw; }
  .card-6.card-tech-last-winner .tech-4 .review-count, .card-6.card-tech-last-winner .tech-5 .review-count, .card-latest-review.card-tech-last-winner .tech-4 .review-count, .card-latest-review.card-tech-last-winner .tech-5 .review-count {
    border-color: #dc9305; }
    .card-6.card-tech-last-winner .tech-4 .review-count:after, .card-6.card-tech-last-winner .tech-5 .review-count:after, .card-latest-review.card-tech-last-winner .tech-4 .review-count:after, .card-latest-review.card-tech-last-winner .tech-5 .review-count:after {
      filter: brightness(80%); }

.card-6 .rating, .card-latest-review .rating {
  display: flex;
  align-items: center;
  margin-top: .8vw; }
  .card-6 .rating .stars, .card-latest-review .rating .stars {
    position: relative;
    width: 9vw; }
    .card-6 .rating .stars-container, .card-latest-review .rating .stars-container {
      width: 100%;
      overflow: hidden; }
      .card-6 .rating .stars-container img, .card-latest-review .rating .stars-container img {
        width: 9vw;
        height: auto; }
    .card-6 .rating .stars-under, .card-latest-review .rating .stars-under {
      position: absolute;
      top: 0;
      left: 0; }
      .card-6 .rating .stars-under img, .card-latest-review .rating .stars-under img {
        width: 9vw;
        height: auto;
        opacity: .3; }
  .card-6 .rating .rating-num, .card-latest-review .rating .rating-num {
    font-size: 2.2vw;
    font-weight: 600;
    margin: 0 .4vw 0 1vw; }
  .card-6 .rating .rating-descriptor, .card-latest-review .rating .rating-descriptor {
    font-size: .8vw;
    opacity: .7;
    line-height: 1; }

.card-6 .reviewer, .card-latest-review .reviewer {
  margin-bottom: .7vw; }
  .card-6 .reviewer h4, .card-latest-review .reviewer h4 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.3vw;
    line-height: 1;
    margin: .5vw 0 0; }
  .card-6 .reviewer span, .card-latest-review .reviewer span {
    font-size: .8vw;
    opacity: .7; }

.card-6 .review, .card-latest-review .review {
  overflow: hidden;
  height: 10.2vw; }
  .card-6 .review p, .card-latest-review .review p {
    font-size: .9vw;
    line-height: 1.6;
    margin: 0;
    transition: transform 5s; }
    .card-6 .review p.initial, .card-latest-review .review p.initial {
      transform: translateY(0) !important;
      transition: transform .5s !important; }

.card-6 .footer, .card-latest-review .footer {
  position: absolute;
  left: 1vw;
  bottom: .3vw;
  display: flex;
  align-items: center; }
  .card-6 .footer p, .card-latest-review .footer p {
    font-size: .8vw;
    opacity: .6; }
  .card-6 .footer img, .card-latest-review .footer img {
    display: block;
    width: 4.4vw;
    height: auto;
    margin-left: .5vw; }