.ui-helper-hidden {
  display: none
}

.ui-helper-hidden-accessible {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0
}

.ui-helper-reset {
  font-size: 100%;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  border: 0;
  outline: 0
}

.ui-helper-clearfix:after,
.ui-helper-clearfix:before {
  display: table;
  border-collapse: collapse;
  content: ''
}

.ui-helper-clearfix:after {
  clear: both
}

.ui-helper-zfix {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: Alpha(Opacity=0)
}

.ui-front {
  z-index: 100
}

.ui-state-disabled {
  cursor: default !important;
  pointer-events: none
}

.ui-icon {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-top: -.25em;
  vertical-align: middle;
  text-indent: -99999px;
  background-repeat: no-repeat
}

.ui-widget-icon-block {
  left: 50%;
  display: block;
  margin-left: -8px
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.ui-slider {
  position: relative;
  text-align: left
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  touch-action: none
}

.ui-slider .ui-slider-range {
  font-size: .7em;
  position: absolute;
  z-index: 1;
  display: block;
  border: 0;
  background-position: 0 0
}

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit
}

.ui-slider-horizontal {
  height: .8em
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0
}

.ui-slider-vertical {
  width: .8em;
  height: 100px
}

.ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-bottom: -.6em;
  margin-left: 0
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0
}

.ui-widget,
.ui-widget button,
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em
}

.ui-widget .ui-widget {
  font-size: 1em
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5
}

.ui-widget-content {
  color: #333;
  border: 1px solid #ddd;
  background: #fff
}

.ui-widget-content a,
.ui-widget-header a {
  color: #333
}

.ui-widget-header {
  font-weight: 700;
  color: #333;
  border: 1px solid #ddd;
  background: #e9e9e9
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  font-weight: 400;
  color: #454545;
  border: 1px solid #c5c5c5;
  background: #f6f6f6
}

.ui-button {
  font-weight: 400;
  border: 1px solid #c5c5c5;
  background: #f6f6f6
}

html .ui-button.ui-state-disabled:active,
html .ui-button.ui-state-disabled:hover {
  font-weight: 400;
  color: #454545;
  border: 1px solid #c5c5c5;
  background: #f6f6f6
}

.ui-button,
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button {
  text-decoration: none;
  color: #454545
}

.ui-button:focus,
.ui-button:hover,
.ui-state-focus,
.ui-state-hover,
.ui-widget-content .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-focus,
.ui-widget-header .ui-state-hover {
  font-weight: 400;
  color: #2b2b2b;
  border: 1px solid #ccc;
  background: #ededed
}

.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
a.ui-button:focus,
a.ui-button:hover {
  text-decoration: none;
  color: #2b2b2b
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px #5e9ed6
}

.ui-button.ui-state-active:hover,
.ui-button:active,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active {
  font-weight: 400;
  color: #fff;
  border: 1px solid #003eff;
  background: #007fff
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #fff
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  text-decoration: none;
  color: #fff
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  color: #777620;
  border: 1px solid #dad55e;
  background: #fffa90
}

.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  color: #5f3f3f;
  border: 1px solid #f1a899;
  background: #fddfdf
}

.ui-state-error a,
.ui-state-error-text,
.ui-widget-content .ui-state-error a,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error a,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: 700
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  font-weight: 400;
  opacity: .7;
  filter: Alpha(Opacity=70)
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: .35;
  background-image: none;
  filter: Alpha(Opacity=35)
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35)
}

.ui-icon {
  width: 16px;
  height: 16px
}

.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
  background-image: url(images/ui-icons_444444_256x240.png)
}

.ui-button:focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-hover .ui-icon {
  background-image: url(images/ui-icons_555555_256x240.png)
}

.ui-button:active .ui-icon,
.ui-state-active .ui-icon {
  background-image: url(images/ui-icons_ffffff_256x240.png)
}

.ui-button .ui-state-highlight.ui-icon,
.ui-state-highlight .ui-icon {
  background-image: url(images/ui-icons_777620_256x240.png)
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url(images/ui-icons_cc0000_256x240.png)
}

.ui-button .ui-icon {
  background-image: url(images/ui-icons_777777_256x240.png)
}

.ui-icon-blank {
  background-position: 16px 16px
}

.ui-icon-caret-1-n {
  background-position: 0 0
}

.ui-icon-caret-1-ne {
  background-position: -16px 0
}

.ui-icon-caret-1-e {
  background-position: -32px 0
}

.ui-icon-caret-1-se {
  background-position: -48px 0
}

.ui-icon-caret-1-s {
  background-position: -65px 0
}

.ui-icon-caret-1-sw {
  background-position: -80px 0
}

.ui-icon-caret-1-w {
  background-position: -96px 0
}

.ui-icon-caret-1-nw {
  background-position: -112px 0
}

.ui-icon-caret-2-n-s {
  background-position: -128px 0
}

.ui-icon-caret-2-e-w {
  background-position: -144px 0
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px
}

.ui-icon-triangle-1-s {
  background-position: -65px -16px
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px
}

.ui-icon-arrow-1-s {
  background-position: -65px -32px
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px
}

.ui-icon-arrowthick-1-n {
  background-position: 1px -48px
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px
}

.ui-icon-arrow-4 {
  background-position: 0 -80px
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px
}

.ui-icon-extlink {
  background-position: -32px -80px
}

.ui-icon-newwin {
  background-position: -48px -80px
}

.ui-icon-refresh {
  background-position: -64px -80px
}

.ui-icon-shuffle {
  background-position: -80px -80px
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px
}

.ui-icon-folder-open {
  background-position: -16px -96px
}

.ui-icon-document {
  background-position: -32px -96px
}

.ui-icon-document-b {
  background-position: -48px -96px
}

.ui-icon-note {
  background-position: -64px -96px
}

.ui-icon-mail-closed {
  background-position: -80px -96px
}

.ui-icon-mail-open {
  background-position: -96px -96px
}

.ui-icon-suitcase {
  background-position: -112px -96px
}

.ui-icon-comment {
  background-position: -128px -96px
}

.ui-icon-person {
  background-position: -144px -96px
}

.ui-icon-print {
  background-position: -160px -96px
}

.ui-icon-trash {
  background-position: -176px -96px
}

.ui-icon-locked {
  background-position: -192px -96px
}

.ui-icon-unlocked {
  background-position: -208px -96px
}

.ui-icon-bookmark {
  background-position: -224px -96px
}

.ui-icon-tag {
  background-position: -240px -96px
}

.ui-icon-home {
  background-position: 0 -112px
}

.ui-icon-flag {
  background-position: -16px -112px
}

.ui-icon-calendar {
  background-position: -32px -112px
}

.ui-icon-cart {
  background-position: -48px -112px
}

.ui-icon-pencil {
  background-position: -64px -112px
}

.ui-icon-clock {
  background-position: -80px -112px
}

.ui-icon-disk {
  background-position: -96px -112px
}

.ui-icon-calculator {
  background-position: -112px -112px
}

.ui-icon-zoomin {
  background-position: -128px -112px
}

.ui-icon-zoomout {
  background-position: -144px -112px
}

.ui-icon-search {
  background-position: -160px -112px
}

.ui-icon-wrench {
  background-position: -176px -112px
}

.ui-icon-gear {
  background-position: -192px -112px
}

.ui-icon-heart {
  background-position: -208px -112px
}

.ui-icon-star {
  background-position: -224px -112px
}

.ui-icon-link {
  background-position: -240px -112px
}

.ui-icon-cancel {
  background-position: 0 -128px
}

.ui-icon-plus {
  background-position: -16px -128px
}

.ui-icon-plusthick {
  background-position: -32px -128px
}

.ui-icon-minus {
  background-position: -48px -128px
}

.ui-icon-minusthick {
  background-position: -64px -128px
}

.ui-icon-close {
  background-position: -80px -128px
}

.ui-icon-closethick {
  background-position: -96px -128px
}

.ui-icon-key {
  background-position: -112px -128px
}

.ui-icon-lightbulb {
  background-position: -128px -128px
}

.ui-icon-scissors {
  background-position: -144px -128px
}

.ui-icon-clipboard {
  background-position: -160px -128px
}

.ui-icon-copy {
  background-position: -176px -128px
}

.ui-icon-contact {
  background-position: -192px -128px
}

.ui-icon-image {
  background-position: -208px -128px
}

.ui-icon-video {
  background-position: -224px -128px
}

.ui-icon-script {
  background-position: -240px -128px
}

.ui-icon-alert {
  background-position: 0 -144px
}

.ui-icon-info {
  background-position: -16px -144px
}

.ui-icon-notice {
  background-position: -32px -144px
}

.ui-icon-help {
  background-position: -48px -144px
}

.ui-icon-check {
  background-position: -64px -144px
}

.ui-icon-bullet {
  background-position: -80px -144px
}

.ui-icon-radio-on {
  background-position: -96px -144px
}

.ui-icon-radio-off {
  background-position: -112px -144px
}

.ui-icon-pin-w {
  background-position: -128px -144px
}

.ui-icon-pin-s {
  background-position: -144px -144px
}

.ui-icon-play {
  background-position: 0 -160px
}

.ui-icon-pause {
  background-position: -16px -160px
}

.ui-icon-seek-next {
  background-position: -32px -160px
}

.ui-icon-seek-prev {
  background-position: -48px -160px
}

.ui-icon-seek-end {
  background-position: -64px -160px
}

.ui-icon-seek-first,
.ui-icon-seek-start {
  background-position: -80px -160px
}

.ui-icon-stop {
  background-position: -96px -160px
}

.ui-icon-eject {
  background-position: -112px -160px
}

.ui-icon-volume-off {
  background-position: -128px -160px
}

.ui-icon-volume-on {
  background-position: -144px -160px
}

.ui-icon-power {
  background-position: 0 -176px
}

.ui-icon-signal-diag {
  background-position: -16px -176px
}

.ui-icon-signal {
  background-position: -32px -176px
}

.ui-icon-battery-0 {
  background-position: -48px -176px
}

.ui-icon-battery-1 {
  background-position: -64px -176px
}

.ui-icon-battery-2 {
  background-position: -80px -176px
}

.ui-icon-battery-3 {
  background-position: -96px -176px
}

.ui-icon-circle-plus {
  background-position: 0 -192px
}

.ui-icon-circle-minus {
  background-position: -16px -192px
}

.ui-icon-circle-close {
  background-position: -32px -192px
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px
}

.ui-icon-circle-check {
  background-position: -208px -192px
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px
}

.ui-corner-all,
.ui-corner-left,
.ui-corner-tl,
.ui-corner-top {
  border-top-left-radius: 3px
}

.ui-corner-all,
.ui-corner-right,
.ui-corner-top,
.ui-corner-tr {
  border-top-right-radius: 3px
}

.ui-corner-all,
.ui-corner-bl,
.ui-corner-bottom,
.ui-corner-left {
  border-bottom-left-radius: 3px
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-br,
.ui-corner-right {
  border-bottom-right-radius: 3px
}

.ui-widget-overlay {
  opacity: .3;
  background: #aaa;
  filter: Alpha(Opacity=30)
}

.ui-widget-shadow {
  box-shadow: 0 0 5px #666
}

@font-face {
  font-family: 'Work Sans';
  font-weight: 400;
  font-style: normal;
  src: url(../fonts/WorkSans-Regular.ttf)
}

body,
html {
  position: relative
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

*,
html {
  box-sizing: border-box
}

html {
  height: 100%
}

* {
  font-family: 'Work Sans';
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  outline: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box
}

:after,
:before {
  box-sizing: inherit
}

input:not([type=checkbox]):not([type=radio]),
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none
}

input[type=number] {
  -moz-appearance: textfield
}

.btn-wrapper {
  display: flex;
  width: 100%;
  justify-content: center
}

#calculator-page h1 {
  font-size: 30px;
}

.btn-wrapper .btn,
h1 {
  font-weight: 700;
  text-align: center
}

.btn-wrapper .btn {
  display: inline-block;
  padding: 10px 70px;
  transition: all .5s;
  text-transform: uppercase;
  border: 2px solid #09bebb;
  border-radius: 5px;
  font-size: 16px;
  line-height: 21px;
  color: #09bebb
}

.btn-wrapper .btn:hover {
  color: #fff;
  background-color: #09bebb
}

@media (min-width:768px) {
  .btn-wrapper {
    padding: 50px 0
  }
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

main {
  overflow: hidden
}

p {
  font-size: 12px;
  width: 100%;
  margin: 15px 0
}

.calc_container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px
}

@media (min-width:768px) {
  .calc_container {
    width: 648px;
    padding: 0
  }
}

@media (min-width:1024px) {
  .calc_container {
    width: 850px
  }
}

@media (min-width:1280px) {
  .calc_container {
    width: 1200px
  }
}

h1 {
  font-size: 30px;
  line-height: 39px;
  margin: 35px 0 20px;
  color: #373737
}

h1 strong,
header nav a:hover {
  color: #09bebb
}

p {
    font-size: 16px;
    margin: 30px 0
  }

header {
  display: flex;
  padding: 14px;
  background: #ced0d1;
  justify-content: space-between;
  align-items: center;
}

header a{
  width: 30%;
}

header a img{
  object-fit: contain;
  width: 100%;
}

header nav {
  font-size: 16px;
  line-height: 23px;
  color: #373737
}

header nav span {
  margin: 0 10px
}

header nav a {
  transition: all .5s;
  color: inherit
}

@media (min-width:768px) {
  header {
    padding-right: 8.5%;
    padding-left: 8.5%;
  }

  header nav {
    font-size: 18px
  }

  header a {
    width: 20%;
  }
}

@media (min-width: 1280px){
  header a {
    width: 15%;
  }
}

.home {
  padding: 30px
}

.home .subtitle,
.home .title h2 {
  font-size: 25px;
  font-weight: 700;
  line-height: 33px;
  text-align: center;
  color: #909295
}

.home .title h1 {
  margin: 5px 0 15px
}

.home .subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  max-width: 415px;
  margin: 0 auto;
  color: #373737
}

.home .subtitle p {
  font-size: inherit
}

.home .items {
  display: flex;
  margin: 50px 0 0;
  justify-content: space-around;
  flex-wrap: wrap
}

.home .items .item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  margin-bottom: 30px;
  align-items: center
}

.home .items .item p {
  width: 125px;
  text-align: center
}

@media (min-width:768px) {
  .home .items .item {
    width: 30%;
    margin-bottom: 0
  }
}

@media (min-width:1024px) {
  .home {
    padding: 70px 0
  }

  .calculator h1 {
    font-size: 50px;
    line-height: 65px
  }
}

.steps-btn {
  display: flex;
  width: 100%;
  flex-wrap: wrap
}

.steps-btn .step {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  width: 33.3%;
  color: #ced0d1;
  border-bottom: 2px solid #ced0d1;
  text-align: left;
  text-transform: capitalize;
}

@media (min-width:1024px) {
  .steps-btn .step.step-2 {
    padding-right: 100px;
  }
}

#calculator-page .table .table-wrapper table tr td,
#calculator-page .table .table-wrapper table tr th {
    text-align: right;
}

#calculator-page .step-2 .table-wrapper table tr td:first-child,
#calculator-page .table .table-wrapper table tr th:first-child,
#calculator-page .step-3 .table-wrapper table tr td:first-child,
#calculator-page .steps-btn .step:first-child,
#calculator-page .table .table-wrapper table tr td:first-child {
  text-align: left
}

#calculator-page .table .table-wrapper table tr td:first-child {
  white-space: unset;
}

.step-2 .table .totals td{
  border-top: 1px solid #ced0d1;
}

.steps-btn .step.active {
  color: #09bebb;
  border-bottom: 2px solid #09bebb
}

.steps-btn .step-2 {
  padding-left: 10px
}

@media (min-width:1024px) {
  .steps-btn p {
    font-size: 16px
  }
}

.step-block {
  display: none
}

.step-block.active,
.table .table-wrapper table th .wrapper span {
  display: block
}

.step-1 .dropdowns-section {
  padding-bottom: 30px;
  color: #373737
}

.step-1 .dropdowns-section .dropdowns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}

.step-1 .dropdowns-section .dropdowns .select-wrapper {
  position: relative;
  width: 48%
}

.step-1 .dropdowns-section .dropdowns .select-wrapper select {
  width: 100%;
  padding: 10px 15px;
  border: 2px solid #d7d8da;
  border-radius: 5px;
  background-color: transparent;
  text-align: center;
  position: relative;
}

.step-1 .dropdowns-section .dropdowns .select-wrapper select:invalid {
  color: #909295
}

.step-1 .dropdowns-section .dropdowns .select-wrapper:before {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 6px;
  content: '';
  transform: translate(0, -50%) rotate(180deg);
  background: url(../img/sort.svg) no-repeat;
  background-size: contain;
  z-index: -1;
}

@media (min-width:768px) {
  .step-1 .dropdowns-section {
    padding-bottom: 50px
  }

  .step-1 .dropdowns-section .dropdowns {
    justify-content: center
  }

  .step-1 .dropdowns-section .dropdowns .select-wrapper {
    max-width: 30%;
    margin-right: 15px;
    margin-left: 15px
  }

  .step-1 .dropdowns-section .dropdowns .select-wrapper select {
    font-size: 16px
  }
}

.table {
  padding: 30px 0;
  color: #373737;
  background: #eeefef
}

.table h2 {
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
  margin-bottom: 20px;
  text-align: center;
  text-transform: capitalize
}

.table .table-wrapper {
        overflow: auto;
        width: 100%;
    }

.step-2 .table-wrapper table,
.step-3 .table-wrapper table,
.table .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  border: 0
}

.step-2 .table-wrapper table tr:nth-of-type(odd),
.step-3 .table-wrapper table tr:nth-of-type(odd),
.table .table-wrapper table tbody tr:nth-of-type(odd) {
  background-color: #fff
}

.btns,
.step-2 .table-wrapper table tr,
.step-3 .table-wrapper table tr,
.table .table-wrapper table tr {
  width: 100%
}

.table .table-wrapper table tr td,
.table .table-wrapper table tr th {
        max-width: 220px;
        padding: 16px 12px;
        font-size: 18px;
        border: 0;
        white-space: nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        text-transform: capitalize;
    }

.table .table-wrapper table tr td {
  text-align: center
}

.table .table-wrapper table tr .more,
.table .table-wrapper table tr .smaller {
  position: relative;
  padding-left: 30px
}

.table .table-wrapper table tr .more:before,
.table .table-wrapper table tr .smaller:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 21px;
  content: '';
  transform: translateY(-50%);
  background-size: contain
}

.table .table-wrapper table tr .smaller:before {
  background: url(../img/arrow_down.svg) no-repeat
}

.table .table-wrapper table tr .more:before {
  background: url(../img/arrow_up.svg) no-repeat
}

.table .table-wrapper table th {
  text-align: left;
  white-space: no-wrap
}

.table .table-wrapper table th .wrapper {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  float: right;
  font-size: 14px;
}

.table .table-wrapper table th .wrapper div:first-child {
        display: flex;
    max-width: 180px !important;
    overflow: hidden
    }

.table .table-wrapper table th .wrapper .sort {
  position: absolute;
  top: 50%;
  right: -13px;
  display: flex;
  flex-direction: column;
  transform: translateY(-50%)
}

.table .table-wrapper table th .wrapper .sort .down {
  margin-top: 4px;
  transform: rotate(180deg)
}

.table .table-wrapper table th .wrapper .sort img {
  cursor: pointer
}
.step-2 .table-wrapper .slider-wrapper{
  width: 80%;
  margin: 0 auto;
}

.step-2 .table-wrapper .slider-wrapper .percent-wrapper,
.step-2 h2,
.step-2 h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
  text-align: center;
  /*text-transform: capitalize*/
}

.step-2 h2 {
  margin-bottom: 5px
}

.step-2 h3, 
.step-2 h4 {
  margin: 20px 10px;
}

.step-2 .table-wrapper .slider-wrapper .percent-wrapper,
.step-2 h3 {
  margin: 20px 0 15px;
  color: #373737
}

.step-2 .wrap {
  display: flex;
  padding-bottom: 30px;
  border-bottom: 1px solid #ced0d1;
  flex-wrap: wrap
}

.step-2 .wrap p {
  margin: 5px 0
}

.step-2 .wrap .input-wrapper {
  display: flex;
  max-width: 350px;
  padding-left: 20px;
  border-radius: 5px;
  background: #fff;
  align-items: center
}

.step-2 .wrap input {
  width: 95%;
  padding: 15px 20px 15px 0;
  text-align: left;
  border: 0;
  background: #fff;
  font-size: 20px;
}

@media (min-width:768px) {
  .step-2 .wrap {
    flex-wrap: nowrap
  }

  .step-2 .wrap .input-wrapper {
    margin-left: 30px
  }
}

.step-2 .table-wrapper {
  overflow: auto;
  width: 100%
}

.step-2 .table-wrapper table thead tr,
.step-3 .table-wrapper table thead tr {
  background-color: transparent !important
}

.step-2 .table-wrapper table tr td,
.step-2 .table-wrapper table tr th {
  width: 25%;
  padding: 16px 10px;
  border: 0
}

.step-2 .table-wrapper table tr td {
  text-align: center
}

.step-2 .table-wrapper table tr .more,
.step-2 .table-wrapper table tr .smaller {
        position: relative;
        display: inline-block;
        /* margin-bottom: 25px; */
        padding-left: 30px;
        height: 52px;
        padding: ;
    }

.step-2 .table-wrapper table tr .more {
  color: #09bebb;
  margin: 8px 0;
}

.step-2 .table-wrapper table tr .smaller {
  color: #ef4334;
  font-weight: 600;
}

.step-2 .table-wrapper table tr .smaller:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 21px;
  content: '';
  transform: translateY(-50%);
  background: url(../img/arrow_down.svg) no-repeat;
  background-size: contain
}

.step-2 .table-wrapper table tr .more:before {
  background: url(../img/arrow_up.svg) no-repeat
}

.step-2 .table-wrapper .slider-wrapper .percent-wrapper {
  font-size: 16px;
  line-height: 21px;
  display: flex;
  width: 71px;
  margin: 0 auto;
  padding: 5px 0;
  color: #909295;
  border: 2px solid #ced0d1;
  border-radius: 5px;
  justify-content: center;
  align-items: center
}

.step-2 .table-wrapper .slider-wrapper .percent-wrapper input,
.step-3 .table-wrapper .slider-wrapper .percent-wrapper input {
  font-size: 16px;
  width: 45%;
  text-align: right;
  border: 0
}

.step-2 .table-wrapper .slider-wrapper .ui-widget.ui-widget-content {
  height: 2px;
  margin: 15px 0;
  background: #909295
}

.step-2 .table-wrapper .slider-wrapper .ui-slider-horizontal .ui-slider-range {
  position: relative;
  left: 0;
  height: 2px;
  margin: -1px;
  background: #09bebb
}

.step-2 .table-wrapper .slider-wrapper .ui-slider-handle {
  top: 0;
  width: 12px;
  height: 12px;
  cursor: pointer;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background-color: #09bebb
}

.step-2 .table-wrapper .slider-wrapper .amount {
  font-family: 'Work Sans';
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  position: absolute;
  bottom: -34px;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #fff;
  border: 0;
  background: 0 0
}

.step-2 .table-wrapper .population,
.step-3 .table-wrapper .population {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        display: block;
        margin-bottom: 15px;
        text-align: center;
        text-transform: capitalize;
        color: #373737;
    }

.step-2 .table-wrapper .population strong,
.step-3 .table-wrapper .population strong {
  font-size: inherit;
  font-weight: 400;
  color: inherit
}

.step-2 .table {
  padding: 40px 0
}

.step-2 .table .table-wrapper .more,
.step-2 .table .table-wrapper .smaller {
  margin: 0;
  padding: 0
}

.step-2 .table .table-wrapper .more:before,
.step-2 .table .table-wrapper .smaller:before,
.step-3 .table .table-wrapper .more:before,
.step-3 .table .table-wrapper .smaller:before {
  display: none
}

.step-2 .table .table-wrapper .totals {
  font-weight: 700;
  text-transform: uppercase
}

.ranges h2{
  margin: 20px 0;
}

.ranges p{
  margin: 10px 0;
}

@media (min-width:1024px) {
  .step-2 .table {
    padding: 60px 0
  }

  .step-2 .ranges h2 {
    font-size: 20px;
    line-height: 24px;
    text-align: left
  }

  .step-2 .ranges p {
    margin: 10px 0
  }
}

@media (min-width:768px) {
  .btns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .btns .btn-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-right: 10px;
    margin-left: 10px;
    padding: 15px 0
  }
}

.step-3 h2,
.step-3 h3 {
  font-weight: 700;
  text-transform: capitalize
}

.step-3 h2 {
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  text-align: left
}

.step-3 p {
  padding: 15px 0
}

.step-3 h3 {
  font-size: 18px;
  line-height: 23px;
  margin: 20px 0 15px;
  text-align: center;
  color: #373737
}

.step-3 .wrapper {
  display: flex;
  flex-wrap: wrap
}

.step-3 .wrapper p {
  margin: 5px 0
}

.step-3 .wrapper input {
  max-width: 175px;
  padding: 15px 20px;
  text-align: right;
  border: 0;
  border-radius: 5px;
  background: #fff
}

@media (min-width:768px) {
  .step-3 .wrapper {
    flex-wrap: nowrap
  }

  .step-3 .wrapper input {
    margin-left: 30px
  }
}

.step-3 .table-wrapper {
  overflow: auto;
  width: 100%
}


.step-3 .table-wrapper table tr td,
.step-3 .table-wrapper table tr th {
  padding: 16px 0px;
  border: 0
}
.step-3 .table-wrapper table tr td:first-child,
.step-3 .table-wrapper table tr td:last-child,
.step-3 .table-wrapper table tr th:first-child,
.step-3 .table-wrapper table tr th:last-child {
  padding: 0 15px;
}

.step-3 .table-wrapper table tr th:not(:first-child){
  text-align: center;
}

.step-3 .results h2,
.step-3 .table-wrapper table tr td {
  text-align: center
}

.step-3 .table-wrapper table tr .more,
.step-3 .table-wrapper table tr .smaller {
  position: relative;
  display: inline-block;
  padding-left: 30px
}

.step-3 .table-wrapper table tr .more {
  color: #09bebb
}

.step-3 .table-wrapper table tr .smaller {
  color: #ef4334;
  font-weight: 600;
}

.step-2 .table-wrapper table tr .more:before,
.step-3 .table-wrapper table tr .more:before,
.step-3 .table-wrapper table tr .smaller:before {
        position: absolute;
        top: 20%;
        left: 0;
        width: 18px;
        height: 21px;
        content: '';
        transform: translateY(-50%);
        background-size: contain;
    }

.step-3 .table-wrapper table tr .smaller:before {
  background: url(../img/arrow_down.svg) no-repeat
}

.step-3 .table-wrapper table tr .more:before {
  background: url(../img/arrow_up.svg) no-repeat
}

.step-3 .table-wrapper .slider-wrapper .percent-wrapper {
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  display: flex;
  width: 71px;
  margin: 0 auto;
  padding: 5px 0;
  text-align: center;
  text-transform: capitalize;
  color: #909295;
  border: 2px solid #ced0d1;
  border-radius: 5px;
  justify-content: center;
  align-items: center
}

.step-3 .table-wrapper .slider-wrapper .ui-widget.ui-widget-content {
  height: 2px;
  margin: 15px 0;
  background: #909295
}

.step-3 .table-wrapper .slider-wrapper .ui-slider-horizontal .ui-slider-range {
  position: relative;
  left: 0;
  height: 2px;
  margin: -1px;
  background: #09bebb
}

.step-3 .table-wrapper .slider-wrapper .ui-slider-handle {
  top: 0;
  width: 12px;
  height: 12px;
  cursor: pointer;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background-color: #09bebb
}

.step-3 .table-wrapper .slider-wrapper .amount {
  font-family: 'Work Sans';
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  position: absolute;
  bottom: -34px;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #fff;
  border: 0;
  background: 0 0
}

.step-3 .table {
  background: #fff
}

.step-3 .results th span,
.step-3 .table th span {
  white-space: nowrap
}

.step-3 .table tr:nth-child(even) {
  background: #eeefef
}

.step-3 .table .table-wrapper .more,
.step-3 .table .table-wrapper .smaller {
  margin: 0;
  padding: 0
}

.step-3 .table .table-wrapper .totals {
  font-weight: 700;
  text-transform: uppercase
}

.step-3 .results {
  padding: 60px 0;
  background: #eeefef
}

.step-3 .results .items-wrapper {
  display: flex;
  padding: 20px 0;
  justify-content: center
}

.step-3 .results .item:first-child {
  margin-right: 70px
}

.step-3 .results .item h3 {
  margin: 10px 0;
  text-align: left
}

.step-3 .results .item p {
  font-size: 18px;
  font-weight: 500;
  margin: 10px 0
}

.step-3 .results table {
  width: 100% !important;
  max-width: 100%;
  padding: 30px 0
}

.step-3 .results table th:first-child {
  width: 350px
}

.step-3 .results table .th-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center
}

.step-3 .results table td:not(:first-child) {
  text-align: center
}

.step-3 .results table tr {
  height: 50px;
  padding: 16px 0
}

.step-3 .results table tr:last-child td {
  border-top: 1px solid #ced0d1
}

.step-3 .results h2 {
  text-transform: inherit;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type='number'] {
    -moz-appearance: textfield!important;
}
input.percent{
    -moz-appearance: textfield;
}

.price {
  display: inline;
}