@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Nova+Square&display=swap');
body,
html {
    height: 100%;
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    font-size: 14px;
    background: #18191a;
}
.center,
.container {
    margin-left: auto;
    margin-right: auto;
}
* {
    font-family: 'Inter', sans-serif;
    color: #fff;
    line-height: 1.5;
}
h1 {
    font-size: 2.5rem;
    margin-top: 50px;
    margin-bottom: 0;
    font-family: 'Nova Square', sans-serif;
}
h2 {
    font-size: 2rem;
    font-family: 'Nova Square', sans-serif;
}
h3 {
    font-size: 1.375rem;
}
h4 {
    font-size: 1.125rem;
}
h5 {
    font-size: 1rem;
}
h6 {
    font-size: 0.875rem;
}
p {
    font-size: 1.125rem;
    font-weight: 200;
    line-height: 1.8;
}
.font-light {
    font-weight: 300;
}
.font-regular {
    font-weight: 400;
}
.font-heavy {
    font-weight: 700;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
.justify {
    text-align: justify;
}
.container {
    width: 100%;
}
.row {
    position: relative;
    width: 100%;
}
.row [class^="col"] {
    float: left;
    margin: 0.5rem 2%;
    min-height: 0.125rem;
}
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
    width: 96%;
}
.col-1-sm {
    width: 4.33%;
}
.col-2-sm {
    width: 12.66%;
}
.col-3-sm {
    width: 21%;
}
.col-4-sm {
    width: 29.33%;
}
.col-5-sm {
    width: 37.66%;
}
.col-6-sm {
    width: 46%;
}
.col-7-sm {
    width: 54.33%;
}
.col-8-sm {
    width: 62.66%;
}
.col-9-sm {
    width: 71%;
}
.col-10-sm {
    width: 79.33%;
}
.col-11-sm {
    width: 87.66%;
}
.col-12-sm {
    width: 96%;
}
.row::after {
    content: "";
    display: table;
    clear: both;
}
.hidden-sm {
    display: none;
}
@media only screen and (min-width: 33.75em) {
    .container {
        width: 80%;
    }
}
@media only screen and (min-width: 45em) {
    .col-1 {
        width: 4.33%;
    }
    .col-2 {
        width: 12.66%;
    }
    .col-3 {
        width: 21%;
    }
    .col-4 {
        width: 29.33%;
    }
    .col-5 {
        width: 37.66%;
    }
    .col-6 {
        width: 46%;
    }
    .col-7 {
        width: 54.33%;
    }
    .col-8 {
        width: 62.66%;
    }
    .col-9 {
        width: 71%;
    }
    .col-10 {
        width: 79.33%;
    }
    .col-11 {
        width: 87.66%;
    }
    .col-12 {
        width: 96%;
    }
    .hidden-sm {
        display: block;
    }
}
@media only screen and (min-width: 60em) {
    .container {
        width: 75%;
        max-width: 70rem;
    }
}
#menu-toggle {
  display: none;
}
@media screen and (max-width: 768px) {
    .logo img {
        height: 50px;
        margin-left: 5px;
        margin-top: 5px;
    }
    .nav-links {
        display: none;
        }
        .hamburger {
        display: flex;
        width: 25px;
        height: 25px;
        margin-right: 15px;
        padding: 10px;
        cursor: pointer;
    }
    #menu-toggle:checked ~ .nav-links {
        display: flex;
        flex-direction: column;
        opacity: 1;
        left: 0;
    }
    .nav-links {
        position: absolute;
        z-index: 200;
        top: 70px;
        left: -100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        width: 100%;
        background: #000;
        height: calc(100% - 70px);
        opacity: 0;
    }
    .nav-links a {
        text-decoration: none;
        margin-right: 0!important;
        color: #b0b3b8;
        width: 100%;
        text-align: center;
        font-size: 24px;
        margin-bottom: 35px;
    }
}
.main {
    height: calc(100% - 70px);
    min-height: calc(100% - 70px);
}
.nav {
    background: #242526;
}
.logo img {
    height: 58px;
}
.navbar {
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
}
.navbar a {
    text-decoration: none;
    margin-right: 20px;
    color: #b0b3b8;
}
.navbar a:hover {
    color: #fff;
}
.navbar a:last-of-type {
    margin-right: 0;
}
.disclaimer {
    font-size: 13px;
    color: #b3b3b3;
    display: inline-block;
    text-align: center;
}
select {
  width: 100%;
  height: 40px;
  border: 1px solid #3a3b3c;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px;
  font-weight: 500;
  font-size: 14px;
  background: #3a3b3c;
  cursor: pointer;
  color: #7a7c7f;
}
input {
    width: 100%;
    height: 40px;
    border: 1px solid #3a3b3c;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: 500;
    font-size: 14px;
    background: #3a3b3c;
    color: #7a7c7f;
    box-sizing: border-box;
}
textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #3a3b3c;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: 500;
    font-size: 14px;
    background: #3a3b3c;
    color: #7a7c7f;
    box-sizing: border-box;
}
#tuning-values {
    margin-top: 25px;
    background: #18191a;
}
#tuning-values .label {
    color: #b0b3b8;
}
#tuning-values .result {
    font-size: 34px;
    font-weight: 600;
}
#tuning-values .difference {
    color: #e30e14;
}
#tuning-values .difference span {
    color: #e30e14;
}
#tuning-values .stage {
    color: #e30e14;
}
#tuning-values .stage span {
    color: #e30e14;
}
#tuning-values .result span {
    font-size: 20px;
  }
#tuning-values .chart {
    margin: 15px;
}
@media screen and (max-width: 768px) {
    #tuning-values .col-9 .col-4{
        width: 29%;
    }
    #tuning-values .result {
        font-size: 30px;
    }
    #tuning-values .chart {
        margin: 15px auto;
        display: block;
    }
}
.footer p{
    font-size: 13px;
    color: #b3b3b3;
}
@media screen and (max-width: 768px) {
    .footer p{
        font-size: 11px;
    }
}

 .chart *, .chart{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
 .chart{
   width:auto;
   display:inline-block;
   position:relative;
   font-family:sans-serif;
   font-size:14px;
   margin: 0 auto;
 }
 
 /* bar chart */
 
 .chart.bar{height:150px;}
 .bar-chart{
   display: table;
   table-layout: fixed;
   width: auto;
   height: 100%;
   margin: 0 auto;
   z-index:20;
   position:absolute;
   left:0px;
 }
 
 .bar-chart ul{
   margin-left: 34px;
   float: left;
   display: block;
   height:100%;
 }
 
 .bar-chart li{
   position: relative;
   display: table-cell;
   vertical-align: bottom;
   height: 100px;
 }
 
 .bar-chart span{
   margin: 0 6px;
   display: block;
   background: #e30e14;
   width: 34px;
   position:relative;
 
   -webkit-animation: drawBar 0.3s ease-in-out;
   -moz-animation: drawBar 0.3s ease-in-out;
   animation: drawBar 0.3s ease-in-out;
 
   -webkit-transition: all 100ms ease-in-out;
   -moz-transition: all 100ms ease-in-out;
   transition: all 100ms ease-in-out;
 }
 
 .bar-chart li:hover span{
   box-shadow:0 0 0 4px #e30e14;
   cursor:pointer;
 }
 
 .bar-chart li:nth-child(2n+1):hover span{
   box-shadow:0 0 0 4px #ffffff;
 }
 
 .bar-chart li:nth-child(2n+1) span{background-color:#ffffff;}
 .bar-chart ul:last-of-type li:last-child span{margin-right:0px;}
 .bar-chart ul:first-of-type li:first-child span{margin-left:0px;}
 .bar-chart ul:last-of-type {margin-right: 0px;}
 .bar-chart ul:first-of-type {margin-left: 0px;}
 .bar-chart.left-bar ul:last-of-type {margin-right: 0px;}
 .bar-chart.left-bar ul{margin-right: 34px;float:left;margin-left:0px;}
 
 .bar-chart span:before {
   position: absolute;
   bottom: 100%;
   margin-bottom: 10px;
   display: block;
   text-align: center;
   content: attr(title);
   word-wrap: break-word;
   font-size: 12px;
   width: auto;
 
   left: 50%;
 
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 
 .bar-chart li span:before {
   -webkit-transition: all 100ms ease-in-out;
   -moz-transition: all 100ms ease-in-out;
   transition: all 100ms ease-in-out;
 }
 
 @-webkit-keyframes drawBar {0% {height: 0;}}
 @-moz-keyframes drawBar {0% {height: 0;}}
 @keyframes drawBar {0% {height: 0;}}
 
 .charts-tip{
   display:block;
   position: absolute;
   font-size: 16px;
   color: #FFF;
   background: rgba(0,0,0,0.8);
   pointer-events: none;
   font-family:sans-serif;
   padding:6px 12px;
   z-index:100;
   width:auto;
 
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
 }
 
 .chart .grid{
   width:100%;
   height:100%;
   position:absolute;
   left:0px;
   bottom:0px;
 }
 .chart hr{
   position:absolute;
   left:0px;
   bottom:0px;
   width:100%;
   height:1px;
   outline:none;
   border:none;
   background:#38393a;
 }
 
 .chart hr:before{
   position:absolute;
   right:100%;
   top:0px;
   margin-right:20px;
   color:rgba(0,0,0,0.4);
   font-size:12px;
   content:attr(data-y);
   text-align:right;
 
   -webkit-transform:translateX(-50%) translateY(-50%);
   -moz-transform:translateX(-50%) translateY(-50%);
   transform:translateX(-50%) translateY(-50%);
 }
 /* line chart borders and grids */
 .contact-img img {
    max-width: 100%;
 }
 .main.contact label {
    margin-bottom: 5px;
    display: block;
    color: #7a7c7f;
 }
 .send-button {
    width: 150px;
    height: 40px;
    border: 1px solid #3a3b3c;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: 500;
    font-size: 14px;
    background: #3a3b3c;
    color: #7a7c7f;
    cursor: pointer;
    display: block;
    margin: 30px auto;
 }
 .sent-notification {
    text-align: center;
 }