.you-are-not-alone {
  padding: 85px 0px;
}
.fit-vs-avg-cal_res h3 span {
    display: block;
    font-size: 16px;
}
.top-copy__section h2 {
  font-size: calc(20px + (55 - 20) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom:40px;
}
.top-copy__section p {
  font-size: calc(16px + (27 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: calc(24px + (35 - 24) * ((100vw - 320px) / (1920 - 320)));
  margin-bottom:0;
  font-weight: 300;
}
.top-copy__section h4 {
  font-size: calc(18px + (28 - 18) * ((100vw - 320px) / (1920 - 320)));
  font-weight:500;
}
.fit-vs-avg-graph__wrapper img {
  width:100%;
}
.snapshot-range {
  padding-left:0;
  margin-bottom:calc(40px + (147 - 40) * ((100vw - 320px) / (1920 - 320)));
}
.snapshot-range li {
  list-style-type: none;
  font-size: calc(12px + (44 - 12) * ((100vw - 320px) / (1920 - 320)));
}
.fit-card {
  color: #0097E0
} 
.avg-card {
  color: #C70000
}
.fit-card, .avg-card {
  border-radius:calc(19px + (70 - 19) * ((100vw - 320px) / (1920 - 320)));
  background: #FFFFFF;
  box-shadow: -5.82084px 15.5222px 135.82px rgba(0, 0, 0, 0.15);
  width:calc(146px + (540 - 146) * ((100vw - 320px) / (1920 - 320)));
  height:calc(126px + (465 - 126) * ((100vw - 320px) / (1920 - 320)));
  margin-left:calc(18px + (68 - 18) * ((100vw - 320px) / (1920 - 320)));
  margin-right:calc(18px + (68 - 18) * ((100vw - 320px) / (1920 - 320)));
}
.fit-card h2, .avg-card h2 {
  font-size: calc(20px + (72 - 20) * ((100vw - 320px) / (1920 - 320)));
}


.chart_container {
    height: 580px;
    position: relative;
}

div#fitSystemComparisonChart:after {
    content: "Date";
    position: absolute;
    left: 0;
    bottom: 0;
    margin-bottom: -20px;
    text-align: center;
    width: 100%;
}

div#fitSystemComparisonChart {
    position: relative;
}

div#fitSystemComparisonChart:before {content: "Power(kW)";position: absolute;left: -30px;top: 50%;transform: rotate(-90deg);margin-top: -25px;}

.fit-vs-avg-cal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px auto 60px;
    flex-wrap: wrap;
    box-shadow: -5px 10px 50px 0 rgb(0 0 0 / 15%);
    padding: 23px 50px;
    width: 800px;
    max-width: 100%;
    border-radius: 30px;
}

.fit-vs-avg-cal_res {
    text-align: center;
}

.fit-vs-avg-cal_res h3 {
    font-size: 32px;
    font-weight: 300;
    margin: 0 0 25px;
    line-height: 32px;
    min-height: 64px;
}

.fit-vs-avg-cal_res p {
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    line-height: 32px;
}

.fit-vs-avg-cal_res.fit {
    color: #0097E0;
}

.fit-vs-avg-cal_res.avg {
    color: #C70000;
}

@keyframes rotate-loading {
   0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
   100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
}
.loading-container,
.loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}


.loading-container { margin: 40px auto }

.loading {
  border: 2px solid transparent;
  border-color: transparent #da0101 transparent #0197e0;
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}

.loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
}
.loading-container:hover .loading,
.loading-container .loading {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#loading-text {
  -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
  -o-animation: loading-text-opacity 2s linear 0s infinite normal;
  -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: #000;
  font-family: "Helvetica Neue, "Helvetica", ""arial";
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: 100px;
}

.chart_loader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Media queries */
@media (min-width:1024px) {
  .top-copy__section p { 
    width:75%;
  }
}
@media (max-width:767px) {

  .fit-vs-avg-cal {
    margin: 25px 0;
    padding: 15px;
    border-radius: 15px;
  }

  .you-are-not-alone {
      padding: 50px 0 50px;
  }

  .fit-vs-avg-cal_res h3 {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 16px;
    min-height: 32px;
  }

  .fit-vs-avg-cal_res p {
    font-size: 14px;
    line-height: 14px;
  }
  .fit-vs-avg-cal_res h3 span {
    font-size: 12px;
  }
  div#fitSystemComparisonChart:before {
    left: -36px;
    font-size: 14px;
  }
  .top-copy__section p {
    margin-bottom: 0;
  }
  .top-copy__section h2 {
    margin-bottom: 20px;
  }
}