@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.btn--ui, .icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.btn[data-ui=down]:before, .icon-arrow-down:before {
    content: "\E903"
}

.btn[data-ui=up]:before, .icon-arrow-up:before {
    content: "\E901"
}

.btn[data-ui=email]:before, .icon-email:before {
    content: "\E902"
}

.btn[data-ui=close]:before, .icon-x:before {
    content: "\E900"
}

.btn[data-ui=next]:before, .btn[data-ui=right]:before, .icon-arrow-right:before {
    content: "\E904"
}

.btn[data-ui=back]:before, .btn[data-ui=left]:before, .icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.btn--ui:before, .gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.btn {
    background: transparent;
    border-radius: 4.5rem;
    border-style: solid;
    border-width: 2px;
    outline: none;
    vertical-align: middle;
    cursor: pointer;
    font-size: 2rem;
    letter-spacing: .5rem;
    font-family: Helvetica, Arial, sans-serif;
    color: #4d5363;
    text-transform: uppercase;
    padding: 2.25rem 5rem
}

@media only screen and (max-width: 767px) {
    .btn {
        font-size: 1.75rem;
        padding: 1.5rem 2.5rem
    }
}

.btn--sm {
    padding: 1.5rem !important
}

.btn--tiny {
    width: 2rem !important;
    height: 2rem !important;
    padding: 1rem !important
}

.btn--inline {
    display: inline-block
}

.btn--min {
    border: none;
    padding: 2.25rem
}

@media only screen and (max-width: 767px) {
    .btn--min {
        padding: 1.5rem
    }
}

.btn--outline--color {
    position: relative;
    background: #fff;
    border: none
}

.btn--outline--color:after {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    content: "";
    z-index: -1;
    border-radius: 100px;
    background-image: url(https://hyperloop-one.com/route-estimator/static/media/gradient.886d06d4.png);
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat
}

.btn--outline--color:active:after, .btn--outline--color:hover:after {
    background-image: none;
    background-color: #4d5363
}

.btn--circle {
    height: 6rem;
    width: 6rem;
    padding: 0;
    font-size: 0;
    border-radius: 100%;
    background-image: url(data:image/png;base64,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);
    background-size: cover;
    border: none
}

.btn--circle--alt {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAAAXNSR0IArs4c6QAACvpJREFUeAHlXH1sFMcVn5ndtaHg2Ditq+AzleIzF0BQ8B+hsggqSBQBEnL+sM23KIkAc4BJES1GqeSGqEAiomB8fIUiJ5SCz1KDkGrLiQQqpUhGqqEgIMfZqA1nKhnFwTUh+HZ3pr+37hkb+4w/8dkeyd7d2dmd9/vdmzdvPt5y9gLSzz8JucL8yRxb8ilSKI9UPEMKnoyqE2ymEiTnTDLerDhrVow1SsaCjLOArdhtbhiXale5QoMtJh+MCoqUEn89eneeLVSOUmy+zVkGwDGAZBI1ArRzdK6dPCIC9517T8s8LU/EiPNMY+XrVk66UMQ5FR/QNKBE/OJEbZoMKy+Ar5SKudqAMdGkBLuomLquuAjYjAV0jTdIYTT/ZGxqMyH69/f1CWFpJphCTzGl9CiuPLZSM0DcXKBObNUaFOQ8hLxTQtd995en3hsoNgaEiKXHa91PLLUTQNeAAENB1UFCnS3ESa5YRUrSqzXluRz4e59y/Er7R/heZlipxUqy1TZX6a3axU2lsU+5IfY9yE2r7f2bOz7RLyJy/A3jH3/TVCSVKoBwOhPcRrsuExr3fbHefbljVQNzNfHkv7JsJby2YHlKKQ2aYkHbDhj6mKIHuSmP+lpLn4nIPlSbbTNZAhJSmRDQYlaKX2hP5YaMur4K05vnUs58nS5NVmgJttYhhIl6JtTm5hWTzvbmPZGyvSZiS0UwPnRX7kc79bZaLF7NBc8/l59xNfLSF3lMOl0/S9rysGRqNtkkxbhv4gTX9trFvKU3cvSKiGW+2jRTWWdh9TNhtGx0gTvObnR/zDkswRAmaAQff6Z+G44fQkM1JUSNYDz7+14Y0x4TsfJIcGrYlFUwiC60y4dK57mfb5z85RDi71T1uD/VL7CY7YdWJOHHCgldWxjOfeVWp4JdZPSIiBXFgddhrSvxsydD/QKCGUvLNqff6eJ9Q54VfyY0Gb3LOciLLpg1akJfZOa+cuV5gonnFSBNgItTKRRLRq9YNcEwZscqCYSlZZnrzjj9B7Phs1XBgCebyq6M8/8HGLpP3WrEL8km2NZlag7wDaqyf+xZkttHf6B7MQb+Lvkf5er+X7iUCzmaSTzjWd3ZjKgasaU4GK9s86xQysUVD4yPM/KGCwlEKzlwE/jYPBjyANw7l8XUWXeFio9GeVQivlPWfgwAMmF9H47VjKXHNqQ3RXtJrOZ/m5vcZDC2FH3aQ6ZU5r2m0P5osnbZNNYfDGRbtv05mgMcJW1R6bbY6h2igYmWH4/ehHFZyQEGv/ybj7twujppxCZfw3hmyRK6gWaxY7iTQOS0rEj9Epq9o9Xb4SU/wtDgWdI6ESHNb4rgn6XiRvXxgikfP/vAcL1+vCyVHL9qaEXqEysMjB1TByI2+WrdQsoCgSYhhJE/1B5jR1H7d0VY4rjIh2ZgLkgWvOS/527/xg5EiJbwTtzUhVSlR7YOzdihvXADff5weepVwVQpmrwuTEVY21IbEb+Cz8C4WkPaoOnGnrYSI+wkHiNk+BU2l2rNxNP1aRF4bUSocNgrJDPAVtnBrS9mKB0R4kUeG5ZNqtMY5kwYM0zL8kbqdoigOUal5EqoDdM14YvcHKlHTdN8MJoEbyVhpxPn338/ujUP2uDCeKLuo4IpgzKzRJXFSmpYnnoZRrMOZLg+OfX1PJLLIQKqkkMnsA8nY0XYwZZDcHaSMEub5VBdDhGYHJ9Pzoau6RWDLUCsvN/gvIIwg4D5DhFFxUEXVhUyoCpNmRMn18SKoIMtx8/i0mo0rjB+khnuP4ZcItzSMofUApkXh9Posr9E0egUdvEi7CJGFOYcoSk2hS6E4tf7+/Lh9jz8ieuObZDgABceGoLi76vhBqS/8gpBcxXArpgHRMA+QCM0jcXkHGR/wXb3vKFEAA4UGcwMHX1pMrESz0VDdw+NxHtCWg2EHdqQDBvBE0gjlMGcxdiRCDgqJixCE3Y0jQSQgX8o6U6Ro44IDSvxhB1DiwSdVGM0JyLCaR4wFlAPxRoaRMJoI2Qc9mQ4gy/FmtGDgAgwYDazUUcEbUwh7BhrNQsueaNjLIVMGW0agcmHlFZjqRqxp0MFqY1gPmLyaCNCmKzVmVQ8CD+CvCusHdvytdFGBHB7SCNgLbGnS6nbredsxmgjAiPuGVjXBQ/qtuA6u+T0pVzN9WPhdLSQQYvEcKTmklnQxoy5JLb+5qchZAQxOZP4oO5m5mghov67u5noOhPhWQersaGVlIF87fNQDyakvXi0EIFJiCU0WY10nv45RGiMl5PREEqupszRkNACVjmYBSsnvA4RG3bNuAAyQiAo/cT7N7JGOhFzj9VmwTakoyWEFr716oU2IrAuKMHIKWJIqqeLHiOVENgGrzO+AObIvm5HIxxGuOYDQybaTV7p7hvpI5WE+UeD6eg28wDcHKPztsWsNiLWvTv9Hgp8hh5Ew2R/4UglAvgKsRquQSM+/WKd+14EZxsRlKHrxl40DwsDkLWn37s2K1JopBwXHQ/OAgFrCWO8xve1x9WBiNWF02o5EwdIK7Bn6DDtaG1feDifExbbUodhH7B9iB+oetvdYUd/ByII6JgfGkVAX8+VnH3mvZptwxl8e9mXHK19B13mbMKW9HJiUft7dN6JiFzvtEeG4JvpBlToQ//vri549qHhdr30yJ0F0IQPyIHShNhc3kU4QyciCGTeb2edxQ0fPYcX+P9cdG3YDtHfPFY3WdnMD79A44L5Kje4uwxj6JIIIiMh+aXtMK01mKhIwkbvc/69dYmUP5xSztG6RGlZ5zDbkgS7UJM+SWyPJn9UIhZvzWjR9bhsiqHClKZHPXlYNpxGpzS6tE2zDFuEPBhYYVAlsg8uzogaw/HcXsFfVDMVDuffEBhCO/Or9PikvNydsb0L19EEkAC5F0IDGjVde6N8Y0a34QrPJYJUyf/+tddtS1ZiX14ywg4DusGXLts1MyaXCPNKYBOYec7RYpDAdb6oPN9zJVqTiORHbRqRAnTMfXfmFS2OvYF+JATN8LSYqvpkDPYmq0ruLBDSrKbmgMXtEDegCT0ggTD2iAiHjF2ZtzRdp5FpDaa3kiyhKk/svvZOLDhdJMPqgwHIIivJMCKupEYILet5zYFwRVKPmkakMB0rEL7Q0PRoPzxPL832wZhWI9Ax/+3CmUMS3PZWcXCWrczDNuOzYRMo3tSX7Na3d2cY2+OJnPeaiMiDx3dfzQYRJdCOVFSOcE9eyuO0PRt+Pf2FhDuuLw6mW8osRL1rKaANtqse0YabS7d4uvQTInJHO/aZCHqh33dz/LeNZhHsRgHI0FsJEWU29moW7Jw+KNsUNx24nWUpCW0UeaiXJpstRBseGKu9XHTIOwQBsO2ZPb7npjtsmztBxBqoBkKioaLYx4itnCc50yompk+r6ev+LPJd/n7/Tqat5GLF5GqEXKcj5hRNACHRjH0mjbi9f/B2HEC1l62n5/3SiGcr8e2/kWY/sb0QEkHyFBaJGS9aNRCsCcGyF7HJ9brU2VdKijtanGigPRnh/29HiMMidNhkCaaSKZZik23GXoMdmgEbNBfddqLzHocAFsL7T3EjznfI+3Q+4VlZens9oEREKocVF8W/vz7P4jxHcjUfJGSQIcMRn0ug+XI6tl63ntNaW2teazlcE+hIHudBXJ/HWKE8eevU2P9sAuTuMhXv+6frsdLmSCangAgPDCx9TyIZzScBYJ0PaUADmqE5zdCkRnxaIYj8gBL8ttCNSx9szRj0D2n8D2URimkKInD6AAAAAElFTkSuQmCC)
}

@media only screen and (max-width: 767px) {
    .btn--circle {
        height: 4rem;
        width: 4rem
    }
}

.btn--ui {
    position: relative
}

.btn--ui:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 2.75rem
}

@media only screen and (max-width: 767px) {
    .btn--ui:before {
        font-size: 2.2rem
    }
}

.btn--ui.btn--sm:before {
    font-size: 2rem
}

@media only screen and (max-width: 767px) {
    .btn--ui.btn--sm:before {
        font-size: 1.75rem
    }
}

.btn--ui.btn--tiny:before {
    font-size: 1.25rem
}

@media only screen and (max-width: 767px) {
    .btn--ui.btn--tiny:before {
        font-size: 1rem
    }
}

.btn--ui.btn--ui--white:before {
    color: #d9dce2;
    background-image: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: #d9dce2
}

.btn--no-outline {
    border: none !important;
    background-image: none !important
}

@media only screen and (max-width: 767px) {
    .btn[data-ui=back]:before, .btn[data-ui=left]:before {
        padding-left: 5px
    }
}

.btn[data-ui=next]:before, .btn[data-ui=right]:before {
    padding-left: 10px
}

@media only screen and (max-width: 767px) {
    .btn[data-ui=next]:before, .btn[data-ui=right]:before {
        padding-left: 5px
    }
}

.btn[data-ui=close]:before, .btn[data-ui=down]:before, .btn[data-ui=email]:before, .btn[data-ui=up]:before {
    padding-left: 5px
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.svg-content-responsive {
    max-width: 100vw;
    max-height: calc(100vh - 25rem);
    width: 100%
}

.svg-container {
    display: inline-block;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100px;
    -webkit-tap-highlight-color: transparent;
    outline: none
}

@media only screen and (max-width: 767px) {
    .svg-container {
        padding-bottom: 60px
    }
}

.stop--purple {
    stop-color: #824eb0
}

.stop--blue {
    stop-color: #00aae5
}

.stop--magenta-0 {
    stop-color: #824eb0;
    stop-opacity: 0
}

.stop--magenta-50 {
    stop-opacity: .5
}

.stop--magenta-50, .stop--magenta-100 {
    stop-color: #824eb0
}

.stop--hlo-0 {
    stop-color: #74399d;
    stop-opacity: 0
}

.stop--hlo-50 {
    stop-color: #ad7fcd
}

.stop--hlo-100 {
    stop-color: #00a9e4
}

.stop--gray-0 {
    stop-color: #575c68;
    stop-opacity: .25
}

.stop--gray-25 {
    stop-opacity: .5
}

.stop--gray-25, .stop--gray-50 {
    stop-color: #f4f4f5
}

.stop--alt-gray-0 {
    stop-color: #d9dce2;
    stop-opacity: .2
}

.stop--white-0 {
    stop-color: #fff;
    stop-opacity: 0
}

.stop--white-50 {
    stop-color: #fff;
    stop-opacity: .48
}

.stop--white-100 {
    stop-color: #fff
}

@media screen and (min-width: 600px) {
    .graph--hide-lg, .svg-container--sm {
        display: none !important
    }
}

@media screen and (max-width: 599px) {
    .graph--hide-sm, .svg-container--lg {
        display: none !important
    }
}

.line-chart__icon {
    text-anchor: middle;
    color: #d9dce2;
    fill: #d9dce2;
    font-size: 30px
}

@media screen and (max-width: 599px) {
    .line-chart__icon {
        font-size: 25px
    }
}

.line-chart__icon--sm {
    font-size: 20px
}

@media screen and (max-width: 599px) {
    .line-chart__icon--sm {
        font-size: 15px;
        text-anchor: left
    }
}

.line-chart__text {
    fill: #fff;
    stroke: #fff;
    stroke-width: 0;
    font-size: 16px;
    letter-spacing: .5px;
    font-family: Helvetica, Arial, sans-serif;
    text-anchor: start
}

@media screen and (max-width: 599px) {
    .line-chart__text {
        font-size: 16px
    }
}

.line-chart__hyperloop-time, .line-chart__hyperloop-time-sub {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 42px;
    fill: #fff;
    letter-spacing: 1px;
    line-height: 60px;
    text-anchor: middle;
    text-transform: capitalize
}

@media screen and (max-width: 599px) {
    .line-chart__hyperloop-time, .line-chart__hyperloop-time-sub {
        font-size: 36px
    }
}

.line-chart__hyperloop-time-sub {
    font-size: 24px;
    letter-spacing: .4px
}

@media screen and (max-width: 599px) {
    .line-chart__hyperloop-time-sub {
        font-size: 18px
    }
}

#saved-time__chart svg {
    max-width: 550px;
    margin: 0 auto
}

.svg-button__container {
    display: inline-block
}

.svg-button, .svg-button__container {
    -webkit-tap-highlight-color: transparent;
    outline: none
}

.svg-button {
    opacity: 1;
    cursor: pointer
}

.svg-button:active, .svg-button:focus, .svg-button:hover {
    opacity: 1
}

.svg-button:active .svg-button__background, .svg-button:focus .svg-button__background, .svg-button:hover .svg-button__background {
    -webkit-tap-highlight-color: transparent;
    outline: none
}

@media only screen and (min-width: 480px) {
    .svg-button:active .svg-button__background, .svg-button:focus .svg-button__background, .svg-button:hover .svg-button__background {
        opacity: 1
    }
}

.svg-button:active .svg-button__background {
    opacity: 1
}

.svg-button__background {
    opacity: 0;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s
}

@media screen and (max-width: 767px) {
    .svg-button__background {
        -webkit-transition: 0ms;
        -o-transition: 0ms;
        transition: 0ms
    }
}

.svg-button__text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.svg-button__text.icon {
    font-weight: 700
}

@media only screen and (min-width: 480px) {
    .svg-button:focus .svg-button__text, .svg-button:hover .svg-button__text {
        fill: #fff
    }
}

.svg-button:active .svg-button__text {
    fill: #fff
}

.svg-button--text-only .svg-button__background, .svg-button--text-only .svg-button__border {
    display: none
}

.svg-button--dark-text .svg-button__text {
    fill: #4f4e57;
    -webkit-transition: fill .3s linear;
    -o-transition: fill .3s linear;
    transition: fill .3s linear
}

@media only screen and (min-width: 480px) {
    .svg-button--dark-text:active .svg-button__text, .svg-button--dark-text:focus .svg-button__text, .svg-button--dark-text:hover .svg-button__text {
        fill: #fff
    }
}

.svg-button--dark-text:active .svg-button__text {
    fill: #fff
}

.svg-button__container--disabled {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(30%);
    opacity: .6
}

.svg-button__container--disabled .svg-button {
    cursor: default
}

.svg-button__container--disabled .svg-button__background {
    opacity: 0 !important
}

.svg-button__container--disabled .svg-button--dark-text .svg-button__text {
    fill: #4f4e57 !important
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.path-gradient--color--outlined {
    fill: none;
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloColorGradient");
    stroke-width: 2
}

.path-gradient--color--outlined--animate {
    -webkit-animation: dash 5s linear forwards;
    animation: dash 5s linear forwards
}

.path-gradient--color--outlined--animate-opacity {
    opacity: 0;
    -webkit-animation: appear 5s linear 1 forwards;
    animation: appear 5s linear 1 forwards
}

.path--purple {
    stroke: #aa81ce;
    stroke-width: 1;
    fill: none
}

.path-gradient--purple {
    fill: none;
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloPurpleFadeGradient");
    stroke-width: 2
}

.circle-gradient--color--outlined {
    fill: none;
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloColorCircleGradient");
    stroke-width: 30
}

.circle-gradient--color--outlined--animate {
    -webkit-animation: dash 2s linear 1 forwards;
    animation: dash 2s linear 1 forwards
}

.circle-gradient--color--outlined--animate-opacity {
    opacity: 0;
    -webkit-animation: appear 2s linear 1 forwards;
    animation: appear 2s linear 1 forwards
}

.circle-gradient--color--outlined--static {
    fill: none;
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloColorCircleGradient");
    stroke-width: 2
}

.circle-gradient--saved-time {
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloSavedTimeGradientOne")
}

.circle-gradient--saved-time--two {
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloSavedTimeGradientTwo")
}

.circle-gradient--saved-time, .circle-gradient--saved-time--two {
    stroke-linecap: round;
    stroke-width: 20;
    fill: none
}

.circle-gradient--saved-time--animate, .circle-gradient--saved-time--two--animate {
    -webkit-animation: dash 2s linear 1 forwards;
    animation: dash 2s linear 1 forwards
}

.circle-gradient--saved-time--animate-opacity, .circle-gradient--saved-time--two--animate-opacity {
    opacity: 0;
    -webkit-animation: appear 2s linear 1 forwards;
    animation: appear 2s linear 1 forwards
}

@-webkit-keyframes appear {
    to {
        opacity: 1
    }
}

@keyframes appear {
    to {
        opacity: 1
    }
}

@-webkit-keyframes icon-appear {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        opacity: .5;
        -webkit-transform: scale(1.15);
        transform: scale(1.15)
    }
    67.5% {
        opacity: 1;
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    95% {
        opacity: 1;
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes icon-appear {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        opacity: .5;
        -webkit-transform: scale(1.15);
        transform: scale(1.15)
    }
    67.5% {
        opacity: 1;
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    95% {
        opacity: 1;
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes pop-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(1.15);
        transform: scale(1.15)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pop-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(1.15);
        transform: scale(1.15)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes wipe-to-right {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes wipe-to-right {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes wipe-to-top {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes wipe-to-top {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes wipe-to-bottom {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes wipe-to-bottom {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes wipe-mid-to-top {
    0% {
        -webkit-transform: translateY(51%);
        transform: translateY(51%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes wipe-mid-to-top {
    0% {
        -webkit-transform: translateY(51%);
        transform: translateY(51%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes wipe-mid-to-bottom {
    0% {
        -webkit-transform: translateY(-51%);
        transform: translateY(-51%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes wipe-mid-to-bottom {
    0% {
        -webkit-transform: translateY(-51%);
        transform: translateY(-51%)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes svg-appear {
    to {
        stroke: #d9dce2;
        opacity: 1
    }
}

@keyframes svg-appear {
    to {
        stroke: #d9dce2;
        opacity: 1
    }
}

@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0px
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0px
    }
}

#line-chart {
    width: 100%
}

.gradient--color__stop__start {
    stop-color: #824eb0
}

.gradient--color__stop__end {
    stop-color: #00aae5
}

.gradient--gray__stop__start {
    stop-color: #575c68;
    stop-opacity: .25
}

.gradient--gray__stop__quarter {
    stop-color: #f4f4f5;
    stop-opacity: .5
}

.gradient--gray__stop__middle {
    stop-color: #f4f4f5
}

.gradient--purple__stop__start {
    stop-color: #824eb0;
    stop-opacity: 0
}

.gradient--purple__stop__quarter {
    stop-color: #824eb0;
    stop-opacity: .25
}

.gradient--purple__stop__middle {
    stop-color: #824eb0
}

.gradient--line-graph__grid__stop__start {
    stop-color: #fff;
    stop-opacity: 0
}

.gradient--line-graph__grid__stop__middle {
    stop-color: #fff;
    stop-opacity: .48
}

.gradient--line-graph__transport--inactive__stop__start {
    stop-color: #d9dce2;
    stop-opacity: .2
}

.gradient--line-graph__transport--active__stop__start {
    stop-color: #fff;
    stop-opacity: 0
}

.gradient--line-graph__transport--active__stop__end {
    stop-color: #fff
}

.gradient--line-graph__hlo__stop__start {
    stop-color: #74399d;
    stop-opacity: 0
}

.gradient--line-graph__hlo__stop__middle {
    stop-color: #ad7fcd
}

.gradient--line-graph__hlo__stop__end {
    stop-color: #00a9e4
}

.path-gradient--in-out--outlined {
    fill: none;
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloGrayGradientInOut");
    stroke-width: 2
}

.path-gradient--in-out--outlined--animate {
    -webkit-animation: dash 5s linear 1 forwards;
    animation: dash 5s linear 1 forwards
}

.path-gradient--in-out--outlined--animate-opacity {
    opacity: 0;
    -webkit-animation: appear 5s linear 1 forwards;
    animation: appear 5s linear 1 forwards
}

.path-gradient--gray--outlined {
    fill: none;
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloGrayGradientLine");
    stroke-width: 2
}

.path-text {
    fill: #fff;
    stroke: #fff;
    stroke-width: 0;
    font-size: 14px;
    letter-spacing: .5px;
    font-family: Arial, sans-serif;
    text-anchor: end
}

.line-graph__text {
    font-size: 18px
}

.line-graph__text, .population-label-text {
    fill: #fff;
    stroke: #fff;
    stroke-width: 0;
    letter-spacing: .5px;
    font-family: Helvetica, Arial, sans-serif;
    text-anchor: start
}

.population-label-text {
    font-size: 16px
}

.distance-population__text, .saved-time__text {
    font-family: Helvetica, Arial, sans-serif;
    text-anchor: start;
    font-size: 16px;
    fill: #fff;
    stroke: #fff;
    stroke-width: 0;
    letter-spacing: 1px
}

.distance-population__text--total-population, .distance-population__text--total-time, .saved-time__text--total-population, .saved-time__text--total-time {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 42px;
    text-anchor: middle
}

.distance-population__text--total-population-label, .distance-population__text--total-time-label, .saved-time__text--total-population-label, .saved-time__text--total-time-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    text-anchor: middle
}

.saved-time__text {
    text-anchor: end
}

.saved-time__text--total-time, .saved-time__text--total-time-label {
    text-anchor: middle
}

.svg-container {
    display: inline-block;
    position: relative;
    vertical-align: top;
    overflow: hidden
}

#distance-population__chart, #loading, #saved-time__chart {
    width: 100%
}

.svg-content-responsive {
    display: inline-block
}

.hide {
    display: none
}

.fade {
    -webkit-transition: opacity .6s linear .6s;
    -o-transition: opacity .6s linear .6s;
    transition: opacity .6s linear .6s
}

.fade-out {
    opacity: 0
}

.clip--horizontal-wipe--to-right {
    -webkit-animation: wipe-to-right 2s 0s 1 linear forwards;
    animation: wipe-to-right 2s 0s 1 linear forwards
}

.clip--vertical-wipe--to-top {
    -webkit-animation: wipe-to-top 1s 0s 1 linear forwards;
    animation: wipe-to-top 1s 0s 1 linear forwards
}

.clip--vertical-wipe--to-bottom {
    -webkit-animation: wipe-to-bottom 1s 0s 1 linear forwards;
    animation: wipe-to-bottom 1s 0s 1 linear forwards
}

.clip--vertical-wipe--mid-to-top {
    -webkit-animation: wipe-mid-to-top 1s 0s 1 linear forwards;
    animation: wipe-mid-to-top 1s 0s 1 linear forwards
}

.clip--vertical-wipe--mid-to-bottom {
    -webkit-animation: wipe-mid-to-bottom 1s 0s 1 linear forwards;
    animation: wipe-mid-to-bottom 1s 0s 1 linear forwards
}

.svg__animation__pop-in {
    -webkit-transform-origin: 50%;
    -ms-transform-origin: 50%;
    transform-origin: 50%;
    opacity: 0;
    -webkit-animation: pop-in .4s 0s 1 linear forwards;
    animation: pop-in .4s 0s 1 linear forwards
}

.svg__animation__appear {
    opacity: 0;
    -webkit-animation: appear 0s 1s 1 linear forwards;
    animation: appear 0s 1s 1 linear forwards
}

#wave-chart, #wave-chart--sm {
    width: 100%
}

.wave-chart__icon {
    text-anchor: middle;
    color: #d9dce2;
    fill: #d9dce2;
    font-size: 30px;
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: wave-chart-icon-appear .6s 0s 1 linear forwards;
    animation: wave-chart-icon-appear .6s 0s 1 linear forwards
}

.wave-chart__axis, .wave-chart__text {
    opacity: 0;
    -webkit-animation: appear 2s 0s 1 linear forwards;
    animation: appear 2s 0s 1 linear forwards
}

.wave-chart__text, .wave-chart__text--endpoint {
    fill: #fff;
    stroke: #fff;
    stroke-width: 0;
    font-size: 16px;
    letter-spacing: .5px;
    font-family: Helvetica, Arial, sans-serif;
    text-anchor: end
}

.wave-chart__text--endpoint, .wave-chart__text--title {
    text-anchor: middle !important;
    opacity: 1 !important;
    -webkit-animation: none !important;
    animation: none !important
}

.wave-chart__text--title {
    font-size: 36px
}

.no-animate .wave-chart__axis, .no-animate .wave-chart__icon, .no-animate .wave-chart__text {
    opacity: 1 !important;
    -webkit-animation: none !important;
    animation: none !important
}

@-webkit-keyframes wave-chart-icon-appear {
    0% {
        opacity: 0;
        font-size: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }
    50% {
        opacity: .5;
        font-size: 34.5px;
        -webkit-transform: translateY(-2.25px);
        transform: translateY(-2.25px)
    }
    67.5% {
        opacity: 1;
        font-size: 22.5px;
        -webkit-transform: translateY(3.75px);
        transform: translateY(3.75px)
    }
    85% {
        opacity: 1;
        font-size: 31.5px;
        -webkit-transform: translateY(-.75px);
        transform: translateY(-.75px)
    }
    to {
        opacity: 1;
        font-size: 30px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes wave-chart-icon-appear {
    0% {
        opacity: 0;
        font-size: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }
    50% {
        opacity: .5;
        font-size: 34.5px;
        -webkit-transform: translateY(-2.25px);
        transform: translateY(-2.25px)
    }
    67.5% {
        opacity: 1;
        font-size: 22.5px;
        -webkit-transform: translateY(3.75px);
        transform: translateY(3.75px)
    }
    85% {
        opacity: 1;
        font-size: 31.5px;
        -webkit-transform: translateY(-.75px);
        transform: translateY(-.75px)
    }
    to {
        opacity: 1;
        font-size: 30px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

#line-chart, #line-chart--sm, #line-chart--sm svg, #line-chart svg, #population-chart, #population-chart--sm, #population-chart--sm svg, #population-chart svg, #saved-time__chart, #saved-time__chart--sm, #saved-time__chart--sm svg, #saved-time__chart svg, #wave-chart, #wave-chart--sm, #wave-chart--sm svg, #wave-chart svg {
    min-height: 300px;
    height: calc(100vh - 25rem)
}

#app_header__prev-btn, #app_header__restart-btn, #graphics-nav__back-btn, #graphics-nav__next-btn {
    min-height: 60px
}

@media only screen and (max-width: 767px) {
    #app_header__prev-btn, #app_header__restart-btn, #graphics-nav__back-btn, #graphics-nav__next-btn {
        min-height: 40px
    }
}

@media screen and (max-width: 350px) {
    #app_header__prev-btn, #app_header__restart-btn, #graphics-nav__back-btn, #graphics-nav__next-btn {
        width: 30px
    }
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.graphics-nav {
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    display: block;
    position: fixed;
    z-index: 1001;
    right: 30px;
    bottom: 0;
    left: 30px;
    list-style: none;
    text-align: right;
    color: transparent;
    background: rgba(55, 60, 74, .6)
}

@media only screen and (max-width: 767px) {
    .graphics-nav {
        position: fixed
    }
}

.graphics-nav--hide {
    display: none
}

.graphics-nav__inner {
    padding: 2rem 0;
    text-align: center
}

.graphics-nav__item {
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 41.35px;
    display: inline-block;
    padding: 0 20px;
    cursor: pointer;
    vertical-align: middle;
    letter-spacing: 0;
    opacity: .5
}

@media only screen and (max-width: 767px) {
    .graphics-nav__item {
        padding: 0 10px
    }
}

.graphics-nav__item:after {
    display: block;
    display: inline-block;
    width: 10px;
    height: 10px;
    content: " ";
    vertical-align: middle;
    border-radius: 10px;
    background-color: #fff
}

.graphics-nav__item--current, .graphics-nav__item:hover {
    opacity: 1
}

.graphics-nav .btn, .graphics-nav .svg-button__container {
    width: 60px;
    height: 60px;
    margin: 0 15px;
    opacity: .75;
    display: inline-block;
    vertical-align: middle
}

.graphics-nav .btn:hover, .graphics-nav .svg-button__container:hover {
    opacity: 1
}

@media only screen and (max-width: 767px) {
    .graphics-nav .btn, .graphics-nav .svg-button__container {
        width: 40px;
        height: 40px;
        margin: 0 5px;
        opacity: .9
    }
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.autocomplete-container {
    position: relative
}

.autocomplete, .autocomplete__input {
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s
}

.autocomplete__input {
    outline: none;
    border: none;
    font-size: 1.8rem;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: inherit;
    line-height: 2.4rem;
    padding: .9rem 1rem .7rem;
    height: 4rem;
    width: 100%;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    background-color: hsla(217, 8%, 56%, .8);
    color: #fff
}

@media only screen and (max-width: 767px) {
    .autocomplete__input {
        font-size: 2.25rem;
        line-height: 2.25rem;
        height: 4rem
    }
}

.autocomplete__label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 1rem;
    padding-left: 1rem;
    margin-bottom: .25rem;
    height: 1rem;
    line-height: 1rem
}

@media only screen and (max-width: 767px) {
    .autocomplete__label {
        position: absolute;
        top: 4px;
        -webkit-transition: opacity .3s linear;
        -o-transition: opacity .3s linear;
        transition: opacity .3s linear
    }
}

.autocomplete__menu {
    display: block;
    position: absolute;
    top: 5.85rem;
    left: 0;
    right: 0;
    background-color: hsla(175, 9%, 75%, .75);
    border-radius: 3px;
    font-size: 1.5rem;
    letter-spacing: inherit;
    line-height: 2rem;
    z-index: 1000
}

@media only screen and (max-width: 767px) {
    .autocomplete__menu {
        background-color: #bbc6c5;
        top: 4rem;
        font-size: 2rem
    }
}

.autocomplete__item {
    cursor: pointer;
    background: transparent;
    color: #4e5363;
    padding: 1rem .8rem;
    border-bottom: 1px solid #8c9496
}

.autocomplete__item mark {
    color: #383b46;
    background-color: transparent;
    background: transparent;
    font-weight: 700
}

.autocomplete__item:hover, .autocomplete__item[aria-selected=true] {
    background-color: hsla(0, 0%, 100%, .4)
}

.autocomplete__item:last-child {
    border-bottom: none
}

@media only screen and (max-width: 767px) {
    .autocomplete--active .autocomplete__label {
        opacity: 0
    }
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.screen {
    z-index: 100;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    -webkit-transition: opacity .6s linear;
    -o-transition: opacity .6s linear;
    transition: opacity .6s linear;
    opacity: 0
}

.screen, .screen__inner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.screen__inner {
    position: relative;
    width: 880px;
    max-width: 100%;
    min-height: calc(100vh - 15rem);
    margin: 0 auto;
    padding: 0 4rem
}

@media only screen and (max-width: 767px) {
    .screen__inner {
        min-height: calc(100vh - 8rem);
        padding: 4rem 2rem 0
    }
}

.screen__graph-title {
    font-size: 2.5rem;
    padding: 1rem 0;
    letter-spacing: 2px;
    display: none
}

@media only screen and (max-width: 767px) {
    .screen__graph-title {
        display: none
    }
}

.screen__graph-footer h1 {
    font-size: 3rem;
    line-height: 3rem;
    margin: 0
}

.screen__graph-footer h1 img {
    display: inline-block;
    vertical-align: middle;
    padding-left: 4px;
    cursor: pointer;
    margin-top: -4px
}

@media only screen and (max-width: 767px) {
    .screen__graph-footer h1 img {
        margin-top: -2px
    }
}

.screen__graph-footer h2 {
    font-size: 2rem;
    padding: 5px 0;
    margin: 0
}

.screen__graph-footer p {
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: #707a97;
    text-align: left
}

@media only screen and (max-width: 767px) {
    .screen__graph-footer p {
        display: none
    }
}

.screen__footer {
    position: absolute;
    bottom: 0;
    width: 100%
}

.screen__instructions {
    font-size: 3.5em;
    line-height: 6rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 4rem;
    letter-spacing: .2rem
}

@media only screen and (max-width: 767px) {
    .screen__instructions {
        font-size: 2.5rem;
        line-height: 3.5rem;
        margin-bottom: 2rem
    }
}

.screen--hide {
    opacity: 0
}

.screen--show {
    opacity: 1
}

.screen--modal-open {
    overflow-y: hidden;
    max-height: calc(100vh - 10rem)
}

@media screen and (min-height: 900px) and (min-width: 750px) {
    .screen__inner {
        position: static
    }

    .screen__main {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 915px;
        -webkit-transform: translateX(-50%) translateY(-40%);
        -ms-transform: translateX(-50%) translateY(-40%);
        transform: translateX(-50%) translateY(-40%)
    }
}

.helper-text {
    font-size: 2.4rem;
    line-height: 2.5;
    letter-spacing: .5px;
    color: #4d5363
}

@media only screen and (max-width: 767px) {
    .helper-text {
        font-size: 2rem
    }
}

.screen__menu__tab {
    position: fixed;
    z-index: 1000;
    top: 50%;
    right: 13px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.screen__menu__body {
    position: fixed;
    z-index: 900;
    top: 0;
    left: 200%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 400px;
    height: 100vh;
    padding: 4rem;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    text-align: left;
    color: #fff;
    background: #4d5363
}

.screen__menu__body--open {
    left: calc(100% - 400px)
}

@media only screen and (max-width: 767px) {
    .screen__menu__body--open {
        left: 0;
        width: 100%
    }
}

.screen__menu__options {
    position: absolute;
    top: 50%;
    left: 4rem;
    overflow-y: auto;
    width: calc(100% - 8rem);
    max-height: calc(100% - 8rem);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.screen__menu__option--temp {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2.2rem;
    line-height: 5rem;
    cursor: pointer;
    letter-spacing: .5rem;
    text-transform: uppercase;
    color: #90959f
}

.screen__menu__option--temp--active, .screen__menu__option--temp:active, .screen__menu__option--temp:hover {
    color: #fff
}

.screen__disclaimer-modal {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, .75);
    z-index: 99999
}

.screen__disclaimer-modal--open {
    display: block
}

.screen__disclaimer-modal__body {
    text-align: left;
    padding: 10rem 3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 600px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 1.6rem;
    line-height: 2.5rem;
    overflow-y: auto;
    max-height: 100vh
}

.screen__disclaimer-modal__header .btn {
    position: absolute;
    padding: 0;
    top: 20px;
    right: 20px;
    z-index: 9999
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.screen--select-route {
    height: 100%;
    width: 100%;
    max-height: none
}

.screen--select-route .screen__main {
    padding-bottom: 10rem;
    position: relative
}

.screen--select-route .screen__footer {
    margin-bottom: 4rem
}

@media only screen and (max-width: 767px) {
    .screen--select-route .screen__footer {
        margin-bottom: 2rem
    }
}

.select-route__overlay {
    display: block;
    position: absolute;
    color: #fff;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: rgba(24, 35, 45, .5);
    z-index: 1001;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: opacity .6s linear .4s, left .6s linear 0s;
    -o-transition: opacity .6s linear .4s, left .6s linear 0s;
    transition: opacity .6s linear .4s, left .6s linear 0s
}

@media only screen and (max-width: 767px) {
    .select-route__overlay {
        padding: 40px
    }
}

.select-route__overlay--hidden {
    opacity: 0;
    left: -100%;
    -webkit-transition: opacity .6s linear 0s, bottom .3s linear .3s;
    -o-transition: opacity .6s linear 0s, bottom .3s linear .3s;
    transition: opacity .6s linear 0s, bottom .3s linear .3s
}

.select-route__dialog {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 980px;
    max-width: 100%;
    z-index: 1000;
    margin: 0 auto
}

@media only screen and (max-width: 767px) {
    .select-route__dialog {
        max-width: calc(100% - 80px);
        margin: 0 auto
    }
}

.select-route__instructions {
    padding: 0 0 3rem;
    font-size: 3rem;
    line-height: 4.2rem;
    text-align: center;
    width: 60rem;
    max-width: 100%;
    margin: 0 auto
}

.select-route__form {
    font-size: 0
}

.select-route__form__clear-form-ui {
    text-align: right;
    display: none
}

.select-route__button-container, .select-route__input-container {
    vertical-align: middle;
    font-size: 1rem;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .8rem
}

.select-route__input-container {
    width: calc(50% - 122.5px)
}

@media only screen and (max-width: 767px) {
    .select-route__input-container {
        display: block;
        width: 100%
    }
}

.select-route__button-container {
    width: 245px;
    text-align: center;
    padding-top: 2.5rem
}

@media only screen and (max-width: 767px) {
    .select-route__button-container {
        display: block;
        width: 100%;
        padding-top: 1rem
    }
}

.select-route__button-container svg.svg-button {
    height: 4.35rem
}

@media only screen and (max-width: 767px) {
    .select-route__button-container svg.svg-button {
        height: 5rem
    }
}

.select-route__button-container svg.svg-button .svg-button__text {
    font-size: 16px
}

.autocomplete__confirm__button-container {
    margin-top: 20px;
    text-align: center
}

.select-route__autocomplete, .select-route__autocomplete__input {
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s
}

.select-route__autocomplete__input {
    outline: none;
    border: none;
    font-size: 1.5rem;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: .25rem;
    line-height: 1.5rem;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .8rem;
    border-radius: 3px;
    background-color: hsla(0, 0%, 100%, .35);
    color: #fff
}

.select-route__autocomplete__label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 1rem
}

.select-route__example-routes {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
    margin-bottom: 10rem;
    letter-spacing: .1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.select-route__example-routes p {
    margin-bottom: 3rem
}

@media only screen and (max-width: 767px) {
    .select-route__example-routes p {
        margin-bottom: 1rem
    }
}

@media only screen and (max-width: 767px) {
    .select-route__example-routes {
        padding: 0 25px;
        margin-bottom: 10rem
    }
}

@media screen and (max-width: 677px) {
    .select-route__example-routes {
        margin-bottom: 5rem
    }
}

@media screen and (max-height: 500px) {
    .select-route__example-routes {
        margin-bottom: 5rem
    }
}

@media screen and (max-height: 450px) {
    .select-route__example-routes {
        margin-bottom: 2rem
    }
}

@media screen and (max-height: 400px) {
    .select-route__example-routes {
        margin-bottom: 0
    }
}

@media screen and (max-height: 370px) {
    .select-route__example-routes {
        display: none
    }
}

.example-route {
    font-size: 1.5rem;
    letter-spacing: .2rem;
    background-color: hsla(0, 0%, 100%, .15);
    display: inline-block;
    padding: 1rem 3rem .7rem;
    border-radius: 30px;
    margin: 0 .75rem;
    -webkit-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition: background-color .3s
}

.example-route:hover {
    cursor: pointer;
    background-color: hsla(0, 0%, 100%, .35)
}

@media only screen and (max-width: 767px) {
    .example-route {
        font-size: 1.3rem;
        padding: .5rem 1.5rem .3rem;
        margin: .5rem
    }
}

.select-route__overlay.select-route__overlay--small {
    top: 30px;
    left: 45px;
    max-width: 400px;
    background-color: transparent;
    bottom: auto;
    right: auto
}

@media only screen and (max-width: 767px) {
    .select-route__overlay.select-route__overlay--small {
        top: 0;
        left: 0;
        max-width: 100%;
        padding: 15px 20px
    }
}

.select-route__overlay.select-route__overlay--small .select-route__dialog {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    width: auto
}

@media only screen and (max-width: 767px) {
    .select-route__overlay.select-route__overlay--small .select-route__dialog {
        max-width: none
    }
}

.select-route__overlay.select-route__overlay--small .select-route__button-container, .select-route__overlay.select-route__overlay--small .select-route__input-container {
    display: block;
    font-size: 1rem;
    padding: .8rem
}

.select-route__overlay.select-route__overlay--small .select-route__input-container {
    width: 100%
}

.select-route__overlay.select-route__overlay--small .select-route__form {
    padding-top: 0
}

@media only screen and (max-width: 767px) {
    .select-route__overlay.select-route__overlay--small .select-route__form {
        margin-top: 4rem
    }
}

.select-route__overlay.select-route__overlay--small .select-route__form__clear-form-ui {
    display: block;
    position: absolute;
    top: .25rem;
    right: .5rem;
    z-index: 1001
}

.select-route__overlay.select-route__overlay--small .select-route__form__clear-form-ui .btn {
    padding: 0 !important
}

.select-route__overlay.select-route__overlay--small .select-route__button-container, .select-route__overlay.select-route__overlay--small .select-route__example-routes, .select-route__overlay.select-route__overlay--small .select-route__instructions {
    display: none
}

.select-route__overlay.select-route__overlay--small #select-origin-autocomplete-container .autocomplete .autocomplete__menu {
    margin-top: 6.6rem
}

@media only screen and (max-width: 767px) {
    .select-route__overlay.select-route__overlay--small #select-origin-autocomplete-container .autocomplete .autocomplete__menu {
        margin-top: 0
    }
}

.map {
    position: absolute !important;
    opacity: 1;
    z-index: 900;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    -webkit-filter: blur(0);
    filter: blur(0)
}

.map .mapboxgl-canvas {
    position: absolute;
    top: 0;
    left: 0
}

.map--blurred {
    -webkit-filter: blur(5px);
    filter: blur(5px)
}

.map--invisible {
    opacity: 0
}

.map__confirm {
    z-index: 1001;
    color: #fff;
    font-size: 1.65rem;
    letter-spacing: .3rem;
    position: fixed;
    bottom: 3rem;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-transition: opacity .6s linear .4s, bottom .6s linear 0s;
    -o-transition: opacity .6s linear .4s, bottom .6s linear 0s;
    transition: opacity .6s linear .4s, bottom .6s linear 0s;
    padding: 0
}

@media only screen and (max-width: 767px) {
    .map__confirm {
        bottom: 1rem
    }
}

.map__confirm--hidden {
    opacity: 0;
    bottom: -100%;
    -webkit-transition: opacity .6s linear 0s, bottom .3s linear .3s;
    -o-transition: opacity .6s linear 0s, bottom .3s linear .3s;
    transition: opacity .6s linear 0s, bottom .3s linear .3s
}

.map__cancel {
    display: inline-block;
    font-size: 1.5rem;
    color: #fff;
    opacity: .75;
    cursor: pointer;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    margin: 1rem
}

.map__cancel:active, .map__cancel:focus, .map__cancel:hover {
    opacity: 1
}

.map__footer {
    z-index: 2000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 0 0;
    color: #fff;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) .6s, bottom 0s linear .6s, max-height .6s linear 0s;
    -o-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) .6s, bottom 0s linear .6s, max-height .6s linear 0s;
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1) .6s, bottom 0s linear .6s, max-height .6s linear 0s;
    overflow: hidden
}

.map__footer--hidden {
    opacity: 0;
    bottom: -100%;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, bottom 0s linear .6s, max-height .6s linear 0s;
    -o-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, bottom 0s linear .6s, max-height .6s linear 0s;
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, bottom 0s linear .6s, max-height .6s linear 0s
}

.map__footer__pull-out-btn {
    display: none;
    opacity: .5;
    height: 3rem;
    margin-top: .5rem
}

.map__footer__pull-out-btn:active, .map__footer__pull-out-btn:focus, .map__footer__pull-out-btn:hover {
    opacity: 1
}

.map__footer--open {
    max-height: 40rem
}

.map__footer--closed {
    max-height: 10.25rem
}

@media only screen and (max-width: 767px) {
    .map__footer--closed {
        max-height: 9rem
    }
}

.map__footer--closed .map__footer__pull-out-btn--open, .map__footer--open .map__footer__pull-out-btn--close {
    display: inline-block
}

.select-route__loading-overlay {
    position: fixed;
    top: 0;
    z-index: 4000;
    opacity: 0;
    left: -200%;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s;
    -o-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s;
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s;
    background: #373c4a;
    width: 100%;
    height: 100%
}

.select-route__loading-overlay--active {
    left: 0;
    opacity: 1
}

.select-route__loading-overlay__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

#map__confirm-btn__container {
    width: 270px;
    margin-bottom: 15px
}

@media only screen and (max-width: 767px) {
    #map__confirm-btn__container {
        width: 250px
    }
}

#map__confirm-button.svg-button .svg-button__background {
    opacity: 1
}

#map__confirm-button.svg-button:active .svg-button__border, #map__confirm-button.svg-button:focus .svg-button__border, #map__confirm-button.svg-button:hover .svg-button__border {
    stroke: #fff;
    opacity: .3
}

.mapboxgl-ctrl-attrib {
    color: hsla(0, 0%, 100%, .15);
    font-size: 9.6px !important;
    background-color: transparent !important
}

.mapboxgl-ctrl-attrib a {
    font-size: 9.6px !important;
    color: hsla(0, 0%, 100%, .15) !important
}

.mapboxgl-ctrl-attrib a:hover {
    color: #000 !important
}

a.mapboxgl-ctrl-logo {
    width: 60px !important;
    height: 15px !important;
    opacity: .3;
    display: block;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgODAuNDcgMjAuMDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgwLjQ3IDIwLjAyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe29wYWNpdHk6MC42O2ZpbGw6I0ZGRkZGRjtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30uc3Qxe29wYWNpdHk6MC42O2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fTwvc3R5bGU+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTc5LjI5LDEzLjYxYzAsMC4xMS0wLjA5LDAuMi0wLjIsMC4yaC0xLjUzYy0wLjEyLDAtMC4yMy0wLjA2LTAuMjktMC4xNmwtMS4zNy0yLjI4bC0xLjM3LDIuMjhjLTAuMDYsMC4xLTAuMTcsMC4xNi0wLjI5LDAuMTZoLTEuNTNjLTAuMDQsMC0wLjA4LTAuMDEtMC4xMS0wLjAzYy0wLjA5LTAuMDYtMC4xMi0wLjE4LTAuMDYtMC4yN2MwLDAsMCwwLDAsMGwyLjMxLTMuNWwtMi4yOC0zLjQ3Yy0wLjAyLTAuMDMtMC4wMy0wLjA3LTAuMDMtMC4xMWMwLTAuMTEsMC4wOS0wLjIsMC4yLTAuMmgxLjUzYzAuMTIsMCwwLjIzLDAuMDYsMC4yOSwwLjE2bDEuMzQsMi4yNWwxLjMzLTIuMjRjMC4wNi0wLjEsMC4xNy0wLjE2LDAuMjktMC4xNmgxLjUzYzAuMDQsMCwwLjA4LDAuMDEsMC4xMSwwLjAzYzAuMDksMC4wNiwwLjEyLDAuMTgsMC4wNiwwLjI3YzAsMCwwLDAsMCwwTDc2Ljk2LDEwbDIuMzEsMy41Qzc5LjI4LDEzLjUzLDc5LjI5LDEzLjU3LDc5LjI5LDEzLjYxeiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02My4wOSw5LjE2Yy0wLjM3LTEuNzktMS44Ny0zLjEyLTMuNjYtMy4xMmMtMC45OCwwLTEuOTMsMC40LTIuNiwxLjEyVjMuMzdjMC0wLjEyLTAuMS0wLjIyLTAuMjItMC4yMmgtMS4zM2MtMC4xMiwwLTAuMjIsMC4xLTAuMjIsMC4yMnYxMC4yMWMwLDAuMTIsMC4xLDAuMjIsMC4yMiwwLjIyaDEuMzNjMC4xMiwwLDAuMjItMC4xLDAuMjItMC4yMnYtMC43YzAuNjgsMC43MSwxLjYyLDEuMTIsMi42LDEuMTJjMS43OSwwLDMuMjktMS4zNCwzLjY2LTMuMTNDNjMuMjEsMTAuMyw2My4yMSw5LjcyLDYzLjA5LDkuMTZMNjMuMDksOS4xNnogTTU5LjEyLDEyLjQxYy0xLjI2LDAtMi4yOC0xLjA2LTIuMy0yLjM2VjkuOTljMC4wMi0xLjMxLDEuMDQtMi4zNiwyLjMtMi4zNnMyLjMsMS4wNywyLjMsMi4zOVM2MC4zOSwxMi40MSw1OS4xMiwxMi40MXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjguMjYsNi4wNGMtMS44OS0wLjAxLTMuNTQsMS4yOS0zLjk2LDMuMTNjLTAuMTIsMC41Ni0wLjEyLDEuMTMsMCwxLjY5YzAuNDIsMS44NSwyLjA3LDMuMTYsMy45NywzLjE0YzIuMjQsMCw0LjA2LTEuNzgsNC4wNi0zLjk5UzcwLjUxLDYuMDQsNjguMjYsNi4wNHogTTY4LjI0LDEyLjQyYy0xLjI3LDAtMi4zLTEuMDctMi4zLTIuMzlzMS4wMy0yLjQsMi4zLTIuNHMyLjMsMS4wNywyLjMsMi4zOVM2OS41MSwxMi40MSw2OC4yNCwxMi40Mkw2OC4yNCwxMi40MnoiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTkuMTIsNy42M2MtMS4yNiwwLTIuMjgsMS4wNi0yLjMsMi4zNnYwLjA2YzAuMDIsMS4zMSwxLjA0LDIuMzYsMi4zLDIuMzZzMi4zLTEuMDcsMi4zLTIuMzlTNjAuMzksNy42Myw1OS4xMiw3LjYzeiBNNTkuMTIsMTEuMjNjLTAuNiwwLTEuMDktMC41My0xLjExLTEuMTlWMTBjMC4wMS0wLjY2LDAuNTEtMS4xOSwxLjExLTEuMTlzMS4xMSwwLjU0LDEuMTEsMS4yMVM1OS43NCwxMS4yMyw1OS4xMiwxMS4yM3oiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNNjguMjQsNy42M2MtMS4yNywwLTIuMywxLjA3LTIuMywyLjM5czEuMDMsMi4zOSwyLjMsMi4zOXMyLjMtMS4wNywyLjMtMi4zOVM2OS41MSw3LjYzLDY4LjI0LDcuNjN6IE02OC4yNCwxMS4yM2MtMC42MSwwLTEuMTEtMC41NC0xLjExLTEuMjFzMC41LTEuMiwxLjExLTEuMnMxLjExLDAuNTQsMS4xMSwxLjIxUzY4Ljg1LDExLjIzLDY4LjI0LDExLjIzeiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00My41Niw2LjI0aC0xLjMzYy0wLjEyLDAtMC4yMiwwLjEtMC4yMiwwLjIydjAuN2MtMC42OC0wLjcxLTEuNjItMS4xMi0yLjYtMS4xMmMtMi4wNywwLTMuNzUsMS43OC0zLjc1LDMuOTlzMS42OSwzLjk5LDMuNzUsMy45OWMwLjk5LDAsMS45My0wLjQxLDIuNi0xLjEzdjAuN2MwLDAuMTIsMC4xLDAuMjIsMC4yMiwwLjIyaDEuMzNjMC4xMiwwLDAuMjItMC4xLDAuMjItMC4yMlY2LjQ0YzAtMC4xMS0wLjA5LTAuMjEtMC4yMS0wLjIxQzQzLjU3LDYuMjQsNDMuNTcsNi4yNCw0My41Niw2LjI0eiBNNDIuMDIsMTAuMDVjLTAuMDEsMS4zMS0xLjA0LDIuMzYtMi4zLDIuMzZzLTIuMy0xLjA3LTIuMy0yLjM5czEuMDMtMi40LDIuMjktMi40YzEuMjcsMCwyLjI4LDEuMDYsMi4zLDIuMzZMNDIuMDIsMTAuMDV6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTM5LjcyLDcuNjNjLTEuMjcsMC0yLjMsMS4wNy0yLjMsMi4zOXMxLjAzLDIuMzksMi4zLDIuMzlzMi4yOC0xLjA2LDIuMy0yLjM2VjkuOTlDNDIsOC42OCw0MC45OCw3LjYzLDM5LjcyLDcuNjN6IE0zOC42MiwxMC4wMmMwLTAuNjcsMC41LTEuMjEsMS4xMS0xLjIxYzAuNjEsMCwxLjA5LDAuNTMsMS4xMSwxLjE5djAuMDRjLTAuMDEsMC42NS0wLjUsMS4xOC0xLjExLDEuMThTMzguNjIsMTAuNjgsMzguNjIsMTAuMDJ6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTQ5LjkxLDYuMDRjLTAuOTgsMC0xLjkzLDAuNC0yLjYsMS4xMlY2LjQ1YzAtMC4xMi0wLjEtMC4yMi0wLjIyLTAuMjJoLTEuMzNjLTAuMTIsMC0wLjIyLDAuMS0wLjIyLDAuMjJ2MTAuMjFjMCwwLjEyLDAuMSwwLjIyLDAuMjIsMC4yMmgxLjMzYzAuMTIsMCwwLjIyLTAuMSwwLjIyLTAuMjJ2LTMuNzhjMC42OCwwLjcxLDEuNjIsMS4xMiwyLjYxLDEuMTJjMi4wNywwLDMuNzUtMS43OCwzLjc1LTMuOTlTNTEuOTgsNi4wNCw0OS45MSw2LjA0eiBNNDkuNiwxMi40MmMtMS4yNiwwLTIuMjgtMS4wNi0yLjMtMi4zNlY5Ljk5YzAuMDItMS4zMSwxLjA0LTIuMzcsMi4yOS0yLjM3YzEuMjYsMCwyLjMsMS4wNywyLjMsMi4zOVM1MC44NiwxMi40MSw0OS42LDEyLjQyTDQ5LjYsMTIuNDJ6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTQ5LjYsNy42M2MtMS4yNiwwLTIuMjgsMS4wNi0yLjMsMi4zNnYwLjA2YzAuMDIsMS4zMSwxLjA0LDIuMzYsMi4zLDIuMzZzMi4zLTEuMDcsMi4zLTIuMzlTNTAuODYsNy42Myw0OS42LDcuNjN6IE00OS42LDExLjIzYy0wLjYsMC0xLjA5LTAuNTMtMS4xMS0xLjE5VjEwQzQ4LjUsOS4zNCw0OSw4LjgxLDQ5LjYsOC44MWMwLjYsMCwxLjExLDAuNTUsMS4xMSwxLjIxUzUwLjIxLDExLjIzLDQ5LjYsMTEuMjN6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTM0LjM2LDEzLjU5YzAsMC4xMi0wLjEsMC4yMi0wLjIyLDAuMjJoLTEuMzRjLTAuMTIsMC0wLjIyLTAuMS0wLjIyLTAuMjJWOS4yNGMwLTAuOTMtMC43LTEuNjMtMS41NC0xLjYzYy0wLjc2LDAtMS4zOSwwLjY3LTEuNTEsMS41NGwwLjAxLDQuNDRjMCwwLjEyLTAuMSwwLjIyLTAuMjIsMC4yMmgtMS4zNGMtMC4xMiwwLTAuMjItMC4xLTAuMjItMC4yMlY5LjI0YzAtMC45My0wLjctMS42My0xLjU0LTEuNjNjLTAuODEsMC0xLjQ3LDAuNzUtMS41MiwxLjcxdjQuMjdjMCwwLjEyLTAuMSwwLjIyLTAuMjIsMC4yMmgtMS4zM2MtMC4xMiwwLTAuMjItMC4xLTAuMjItMC4yMlY2LjQ0YzAuMDEtMC4xMiwwLjEtMC4yMSwwLjIyLTAuMjFoMS4zM2MwLjEyLDAsMC4yMSwwLjEsMC4yMiwwLjIxdjAuNjNjMC40OC0wLjY1LDEuMjQtMS4wNCwyLjA2LTEuMDVoMC4wM2MxLjA0LDAsMS45OSwwLjU3LDIuNDgsMS40OGMwLjQzLTAuOSwxLjMzLTEuNDgsMi4zMi0xLjQ5YzEuNTQsMCwyLjc5LDEuMTksMi43NiwyLjY1TDM0LjM2LDEzLjU5eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04MC4zMiwxMi45N2wtMC4wNy0wLjEyTDc4LjM4LDEwbDEuODUtMi44MWMwLjQyLTAuNjQsMC4yNS0xLjQ5LTAuMzktMS45MmMtMC4wMS0wLjAxLTAuMDItMC4wMS0wLjAzLTAuMDJjLTAuMjItMC4xNC0wLjQ4LTAuMjEtMC43NC0wLjIxaC0xLjUzYy0wLjUzLDAtMS4wMywwLjI4LTEuMywwLjc0bC0wLjMyLDAuNTNsLTAuMzItMC41M2MtMC4yOC0wLjQ2LTAuNzctMC43NC0xLjMxLTAuNzRoLTEuNTNjLTAuNTcsMC0xLjA4LDAuMzUtMS4yOSwwLjg4Yy0yLjA5LTEuNTgtNS4wMy0xLjQtNi45MSwwLjQzYy0wLjMzLDAuMzItMC42MiwwLjY5LTAuODUsMS4wOWMtMC44NS0xLjU1LTIuNDUtMi42LTQuMjgtMi42Yy0wLjQ4LDAtMC45NiwwLjA3LTEuNDEsMC4yMlYzLjM3YzAtMC43OC0wLjYzLTEuNDEtMS40LTEuNDFoLTEuMzNjLTAuNzcsMC0xLjQsMC42My0xLjQsMS40djMuNTdjLTAuOS0xLjMtMi4zOC0yLjA4LTMuOTctMi4wOWMtMC43LDAtMS4zOSwwLjE1LTIuMDIsMC40NWMtMC4yMy0wLjE2LTAuNTEtMC4yNS0wLjgtMC4yNWgtMS4zM2MtMC40MywwLTAuODMsMC4yLTEuMSwwLjUzYy0wLjAyLTAuMDMtMC4wNC0wLjA1LTAuMDctMC4wOGMtMC4yNy0wLjI5LTAuNjUtMC40NS0xLjA0LTAuNDVoLTEuMzJjLTAuMjksMC0wLjU3LDAuMDktMC44LDAuMjVDNDAuOCw1LDQwLjEyLDQuODUsMzkuNDIsNC44NWMtMS43NCwwLTMuMjcsMC45NS00LjE2LDIuMzhjLTAuMTktMC40NC0wLjQ2LTAuODUtMC43OS0xLjE5Yy0wLjc2LTAuNzctMS44LTEuMTktMi44OC0xLjE5aC0wLjAxYy0wLjg1LDAuMDEtMS42NywwLjMxLTIuMzQsMC44NGMtMC43LTAuNTQtMS41Ni0wLjg0LTIuNDUtMC44NGgtMC4wM2MtMC4yOCwwLTAuNTUsMC4wMy0wLjgyLDAuMWMtMC4yNywwLjA2LTAuNTMsMC4xNS0wLjc4LDAuMjdjLTAuMi0wLjExLTAuNDMtMC4xNy0wLjY3LTAuMTdoLTEuMzNjLTAuNzgsMC0xLjQsMC42My0xLjQsMS40djcuMTRjMCwwLjc4LDAuNjMsMS40LDEuNCwxLjRoMS4zM2MwLjc4LDAsMS40MS0wLjYzLDEuNDEtMS40MWMwLDAsMCwwLDAsMFY5LjM1YzAuMDMtMC4zNCwwLjIyLTAuNTYsMC4zNC0wLjU2YzAuMTcsMCwwLjM2LDAuMTcsMC4zNiwwLjQ1djQuMzVjMCwwLjc4LDAuNjMsMS40LDEuNCwxLjRoMS4zNGMwLjc4LDAsMS40LTAuNjMsMS40LTEuNGwtMC4wMS00LjM1YzAuMDYtMC4zLDAuMjQtMC40NSwwLjMzLTAuNDVjMC4xNywwLDAuMzYsMC4xNywwLjM2LDAuNDV2NC4zNWMwLDAuNzgsMC42MywxLjQsMS40LDEuNGgxLjM0YzAuNzgsMCwxLjQtMC42MywxLjQtMS40di0wLjM2YzAuOTEsMS4yMywyLjM0LDEuOTYsMy44NywxLjk2YzAuNywwLDEuMzktMC4xNSwyLjAyLTAuNDVjMC4yMywwLjE2LDAuNTEsMC4yNSwwLjgsMC4yNWgxLjMyYzAuMjksMCwwLjU3LTAuMDksMC44LTAuMjV2MS45MWMwLDAuNzgsMC42MywxLjQsMS40LDEuNGgxLjMzYzAuNzgsMCwxLjQtMC42MywxLjQtMS40di0xLjY5YzAuNDYsMC4xNCwwLjk0LDAuMjIsMS40MiwwLjIxYzEuNjIsMCwzLjA3LTAuODMsMy45Ny0yLjF2MC41YzAsMC43OCwwLjYzLDEuNCwxLjQsMS40aDEuMzNjMC4yOSwwLDAuNTctMC4wOSwwLjgtMC4yNWMwLjYzLDAuMywxLjMyLDAuNDUsMi4wMiwwLjQ1YzEuODMsMCwzLjQzLTEuMDUsNC4yOC0yLjZjMS40NywyLjUyLDQuNzEsMy4zNiw3LjIyLDEuODljMC4xNy0wLjEsMC4zNC0wLjIxLDAuNS0wLjM0YzAuMjEsMC41MiwwLjcyLDAuODcsMS4yOSwwLjg2aDEuNTNjMC41MywwLDEuMDMtMC4yOCwxLjMtMC43NGwwLjM1LTAuNThsMC4zNSwwLjU4YzAuMjgsMC40NiwwLjc3LDAuNzQsMS4zMSwwLjc0aDEuNTJjMC43NywwLDEuMzktMC42MywxLjM4LTEuMzlDODAuNDcsMTMuMzgsODAuNDIsMTMuMTcsODAuMzIsMTIuOTdMODAuMzIsMTIuOTd6IE0zNC4xNSwxMy44MWgtMS4zNGMtMC4xMiwwLTAuMjItMC4xLTAuMjItMC4yMlY5LjI0YzAtMC45My0wLjctMS42My0xLjU0LTEuNjNjLTAuNzYsMC0xLjM5LDAuNjctMS41MSwxLjU0bDAuMDEsNC40NGMwLDAuMTItMC4xLDAuMjItMC4yMiwwLjIyaC0xLjM0Yy0wLjEyLDAtMC4yMi0wLjEtMC4yMi0wLjIyVjkuMjRjMC0wLjkzLTAuNy0xLjYzLTEuNTQtMS42M2MtMC44MSwwLTEuNDcsMC43NS0xLjUyLDEuNzF2NC4yN2MwLDAuMTItMC4xLDAuMjItMC4yMiwwLjIyaC0xLjMzYy0wLjEyLDAtMC4yMi0wLjEtMC4yMi0wLjIyVjYuNDRjMC4wMS0wLjEyLDAuMS0wLjIxLDAuMjItMC4yMWgxLjMzYzAuMTIsMCwwLjIxLDAuMSwwLjIyLDAuMjF2MC42M2MwLjQ4LTAuNjUsMS4yNC0xLjA0LDIuMDYtMS4wNWgwLjAzYzEuMDQsMCwxLjk5LDAuNTcsMi40OCwxLjQ4YzAuNDMtMC45LDEuMzMtMS40OCwyLjMyLTEuNDljMS41NCwwLDIuNzksMS4xOSwyLjc2LDIuNjVsMC4wMSw0LjkxQzM0LjM3LDEzLjcsMzQuMjcsMTMuOCwzNC4xNSwxMy44MUMzNC4xNSwxMy44MSwzNC4xNSwxMy44MSwzNC4xNSwxMy44MXogTTQzLjc4LDEzLjU5YzAsMC4xMi0wLjEsMC4yMi0wLjIyLDAuMjJoLTEuMzNjLTAuMTIsMC0wLjIyLTAuMS0wLjIyLTAuMjJ2LTAuNzFDNDEuMzQsMTMuNiw0MC40LDE0LDM5LjQyLDE0Yy0yLjA3LDAtMy43NS0xLjc4LTMuNzUtMy45OXMxLjY5LTMuOTksMy43NS0zLjk5YzAuOTgsMCwxLjkyLDAuNDEsMi42LDEuMTJ2LTAuN2MwLTAuMTIsMC4xLTAuMjIsMC4yMi0wLjIyaDEuMzNjMC4xMS0wLjAxLDAuMjEsMC4wOCwwLjIyLDAuMmMwLDAuMDEsMCwwLjAxLDAsMC4wMlYxMy41OXogTTQ5LjkxLDE0Yy0wLjk4LDAtMS45Mi0wLjQxLTIuNi0xLjEydjMuNzhjMCwwLjEyLTAuMSwwLjIyLTAuMjIsMC4yMmgtMS4zM2MtMC4xMiwwLTAuMjItMC4xLTAuMjItMC4yMlY2LjQ1YzAtMC4xMiwwLjEtMC4yMSwwLjIyLTAuMjFoMS4zM2MwLjEyLDAsMC4yMiwwLjEsMC4yMiwwLjIydjAuN2MwLjY4LTAuNzIsMS42Mi0xLjEyLDIuNi0xLjEyYzIuMDcsMCwzLjc1LDEuNzcsMy43NSwzLjk4UzUxLjk4LDE0LDQ5LjkxLDE0eiBNNjMuMDksMTAuODdDNjIuNzIsMTIuNjUsNjEuMjIsMTQsNTkuNDMsMTRjLTAuOTgsMC0xLjkyLTAuNDEtMi42LTEuMTJ2MC43YzAsMC4xMi0wLjEsMC4yMi0wLjIyLDAuMjJoLTEuMzNjLTAuMTIsMC0wLjIyLTAuMS0wLjIyLTAuMjJWMy4zN2MwLTAuMTIsMC4xLTAuMjIsMC4yMi0wLjIyaDEuMzNjMC4xMiwwLDAuMjIsMC4xLDAuMjIsMC4yMnYzLjc4YzAuNjgtMC43MSwxLjYyLTEuMTIsMi42LTEuMTFjMS43OSwwLDMuMjksMS4zMywzLjY2LDMuMTJDNjMuMjEsOS43Myw2My4yMSwxMC4zMSw2My4wOSwxMC44N0w2My4wOSwxMC44N0w2My4wOSwxMC44N3ogTTY4LjI2LDE0LjAxYy0xLjksMC4wMS0zLjU1LTEuMjktMy45Ny0zLjE0Yy0wLjEyLTAuNTYtMC4xMi0xLjEzLDAtMS42OWMwLjQyLTEuODUsMi4wNy0zLjE1LDMuOTctMy4xNGMyLjI1LDAsNC4wNiwxLjc4LDQuMDYsMy45OVM3MC41LDE0LjAxLDY4LjI2LDE0LjAxTDY4LjI2LDE0LjAxeiBNNzkuMDksMTMuODFoLTEuNTNjLTAuMTIsMC0wLjIzLTAuMDYtMC4yOS0wLjE2bC0xLjM3LTIuMjhsLTEuMzcsMi4yOGMtMC4wNiwwLjEtMC4xNywwLjE2LTAuMjksMC4xNmgtMS41M2MtMC4wNCwwLTAuMDgtMC4wMS0wLjExLTAuMDNjLTAuMDktMC4wNi0wLjEyLTAuMTgtMC4wNi0wLjI3YzAsMCwwLDAsMCwwbDIuMzEtMy41bC0yLjI4LTMuNDdjLTAuMDItMC4wMy0wLjAzLTAuMDctMC4wMy0wLjExYzAtMC4xMSwwLjA5LTAuMiwwLjItMC4yaDEuNTNjMC4xMiwwLDAuMjMsMC4wNiwwLjI5LDAuMTZsMS4zNCwyLjI1bDEuMzQtMi4yNWMwLjA2LTAuMSwwLjE3LTAuMTYsMC4yOS0wLjE2aDEuNTNjMC4wNCwwLDAuMDgsMC4wMSwwLjExLDAuMDNjMC4wOSwwLjA2LDAuMTIsMC4xOCwwLjA2LDAuMjdjMCwwLDAsMCwwLDBMNzYuOTYsMTBsMi4zMSwzLjVjMC4wMiwwLjAzLDAuMDMsMC4wNywwLjAzLDAuMTFDNzkuMjksMTMuNzIsNzkuMiwxMy44MSw3OS4wOSwxMy44MUM3OS4wOSwxMy44MSw3OS4wOSwxMy44MSw3OS4wOSwxMy44MUw3OS4wOSwxMy44MXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTAsMS4yMWMtNC44NywwLTguODEsMy45NS04LjgxLDguODFzMy45NSw4LjgxLDguODEsOC44MXM4LjgxLTMuOTUsOC44MS04LjgxQzE4LjgxLDUuMTUsMTQuODcsMS4yMSwxMCwxLjIxeiBNMTQuMTgsMTIuMTljLTEuODQsMS44NC00LjU1LDIuMi02LjM4LDIuMmMtMC42NywwLTEuMzQtMC4wNS0yLTAuMTVjMCwwLTAuOTctNS4zNywyLjA0LTguMzljMC43OS0wLjc5LDEuODYtMS4yMiwyLjk4LTEuMjJjMS4yMSwwLDIuMzcsMC40OSwzLjIzLDEuMzVDMTUuOCw3LjczLDE1Ljg1LDEwLjUsMTQuMTgsMTIuMTl6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTEwLDAuMDJjLTUuNTIsMC0xMCw0LjQ4LTEwLDEwczQuNDgsMTAsMTAsMTBzMTAtNC40OCwxMC0xMEMxOS45OSw0LjUsMTUuNTIsMC4wMiwxMCwwLjAyeiBNMTAsMTguODNjLTQuODcsMC04LjgxLTMuOTUtOC44MS04LjgxUzUuMTMsMS4yLDEwLDEuMnM4LjgxLDMuOTUsOC44MSw4LjgxQzE4LjgxLDE0Ljg5LDE0Ljg3LDE4LjgzLDEwLDE4LjgzeiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNC4wNCw1Ljk4Yy0xLjc1LTEuNzUtNC41My0xLjgxLTYuMi0wLjE0QzQuODMsOC44Niw1LjgsMTQuMjMsNS44LDE0LjIzczUuMzcsMC45Nyw4LjM5LTIuMDRDMTUuODUsMTAuNSwxNS44LDcuNzMsMTQuMDQsNS45OHogTTExLjg4LDkuODdsLTAuODcsMS43OGwtMC44Ni0xLjc4TDguMzgsOS4wMWwxLjc3LTAuODZsMC44Ni0xLjc4bDAuODcsMS43OGwxLjc3LDAuODZMMTEuODgsOS44N3oiLz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEzLjY1LDkuMDEgMTEuODgsOS44NyAxMS4wMSwxMS42NSAxMC4xNSw5Ljg3IDguMzgsOS4wMSAxMC4xNSw4LjE1IDExLjAxLDYuMzcgMTEuODgsOC4xNSAiLz48L2c+PC9zdmc+)
}

.mapboxgl-ctrl-attrib, .mapboxgl-ctrl-attrib a {
    color: hsla(0, 0%, 100%, .15);
    font-size: .8em
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    background-color: transparent
}

.mapboxgl-ctrl-top-right {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8)
}

.mapboxgl-ctrl.mapboxgl-ctrl-group {
    margin: 0 8px 0 0
}

.map-beacon {
    width: 0;
    margin: 0;
    opacity: 0;
    -webkit-animation: beacon-grow-in 1.2s .25s 1 ease forwards;
    animation: beacon-grow-in 1.2s .25s 1 ease forwards
}

@-webkit-keyframes beacon-grow-in {
    0% {
        opacity: 0;
        width: 0;
        margin: 0
    }
    90% {
        opacity: .6;
        width: 214px;
        margin: -107px
    }
    to {
        opacity: .6;
        width: 200px;
        margin: -100px
    }
}

@keyframes beacon-grow-in {
    0% {
        opacity: 0;
        width: 0;
        margin: 0
    }
    90% {
        opacity: .6;
        width: 214px;
        margin: -107px
    }
    to {
        opacity: .6;
        width: 200px;
        margin: -100px
    }
}

@media screen and (max-height: 370px) {
    .select-route__overlay {
        overflow-y: auto
    }

    .select-route__overlay--small {
        height: 100%
    }

    .select-route__dialog {
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        max-width: 100%
    }

    #map__confirm-btn__container, #select-route__create-route-btn__container--mobile {
        height: 5rem
    }

    #map__confirm-btn__container svg.svg-content-responsive, #select-route__create-route-btn__container--mobile svg.svg-content-responsive {
        max-height: none
    }

    .map__confirm {
        width: 250px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

#loading {
    position: fixed;
    left: 50%;
    top: 50%;
    display: block;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    padding-bottom: 0
}

.loading__icon {
    font-size: 35px;
    text-anchor: middle;
    fill: #90959f;
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: loading-icon-pop-in .4s 0s 1 linear forwards;
    animation: loading-icon-pop-in .4s 0s 1 linear forwards
}

.loading__circle {
    fill: none;
    stroke: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloLoadingCircleGradient");
    stroke-width: 30;
    -webkit-animation: dash 2s linear 1 forwards;
    animation: dash 2s linear 1 forwards;
    stroke-linecap: round
}

.loading__line {
    opacity: 0;
    fill: none;
    stroke: transparent;
    stroke-width: 1px;
    -webkit-animation: svg-appear 0s 0s 1 linear forwards;
    animation: svg-appear 0s 0s 1 linear forwards
}

.loading__text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 60px;
    fill: #4d5363;
    stroke: #4d5363;
    stroke-width: 0;
    letter-spacing: 3.5px;
    line-height: 90px;
    text-anchor: middle
}

.loading__icon--color, .loading__text--color {
    fill: url("https://hyperloop-one.com/route-estimator/static/css/main.320a79f0.css#hloLoadingLinearGradient");
    stroke: transparent
}

.loading__sub-text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    fill: #4d5363;
    stroke: #4d5363;
    stroke-width: 0;
    letter-spacing: .5px;
    line-height: 41.35px;
    text-anchor: middle
}

@-webkit-keyframes loading-icon-pop-in {
    0% {
        opacity: 0;
        font-size: 0;
        -webkit-transform: translateY(25px);
        transform: translateY(25px)
    }
    80% {
        opacity: 1;
        font-size: 46px;
        -webkit-transform: translateY(-3.5px);
        transform: translateY(-3.5px)
    }
    to {
        opacity: 1;
        font-size: 35px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes loading-icon-pop-in {
    0% {
        opacity: 0;
        font-size: 0;
        -webkit-transform: translateY(25px);
        transform: translateY(25px)
    }
    80% {
        opacity: 1;
        font-size: 46px;
        -webkit-transform: translateY(-3.5px);
        transform: translateY(-3.5px)
    }
    to {
        opacity: 1;
        font-size: 35px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0
    }
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.text-input {
    color: #373c4a;
    text-align: left;
    margin-bottom: 1.5rem
}

.text-input input {
    outline: none;
    border: none;
    font-size: 1.6rem;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: .25rem;
    line-height: 1.6rem;
    width: 100%;
    text-align: left;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .8rem;
    border-radius: 3px;
    padding: 1.2rem .8rem;
    border: 1px solid #d4d4d4
}

@media only screen and (max-width: 767px) {
    .text-input input {
        font-size: 16px;
        line-height: 16px
    }
}

.text-input label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 1.4rem;
    padding-left: 1rem;
    padding-bottom: .5rem
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.check-input {
    color: #373c4a;
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.screen--share__instructions {
    font-size: 3rem;
    line-height: 6rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3.5rem;
    letter-spacing: .2rem
}

@media only screen and (max-width: 767px) {
    .screen--share__instructions {
        font-size: 2.5rem;
        line-height: 3.5rem;
        margin-bottom: 2rem
    }
}

.screen--share__form {
    padding: 0 20px;
    width: 90%
}

.screen--share__form, .screen--share__form-actions {
    max-width: 500px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto
}

.screen--share__form-actions {
    width: 95%;
    padding: 25px 0 75px
}

.screen--share__form-actions .svg-button__container {
    width: 50%;
    padding: 0 12px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.screen--share__form-actions .svg-button__container .svg-button__text {
    font-size: 12px
}

.loading-overlay {
    position: fixed;
    top: 0;
    z-index: 4000;
    opacity: 0;
    left: -200vw;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s;
    -o-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s;
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s;
    background: hsla(0, 0%, 100%, .6);
    width: 100vw;
    height: 100vh
}

.loading-overlay--active {
    left: 0;
    opacity: 1
}

.loading-overlay__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.form-message {
    display: none;
    font-size: 1.5rem
}

.form-message--active {
    display: block
}

.form-message--failure {
    color: red
}

.form-message--success {
    color: #00aae5
}

.form-message--success a {
    color: #aa81ce !important;
    display: block
}

#graphics {
    background-color: #373c4a
}

@media screen and (max-height: 370px) {
    .screen--share__form-actions .svg-button__container svg.svg-content-responsive {
        max-height: none
    }
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.app__header:after, .clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

.app {
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    color: #4d5363;
    background-color: #fff;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s, backgroundColor .6s linear 0s;
    -o-transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s, backgroundColor .6s linear 0s;
    transition: opacity .6s cubic-bezier(.215, .61, .355, 1) 0s, left 0s linear .6s, backgroundColor .6s linear 0s;
    left: -200vw;
    opacity: 0
}

.app--loaded {
    left: 0;
    opacity: 1
}

.app a, .app a:link, .app a:visited {
    font-size: 1.5rem;
    color: #4d5363;
    letter-spacing: 0;
    line-height: 30px;
    text-decoration: none
}

@media only screen and (min-width: 480px) {
    .app a:active, .app a:focus, .app a:hover {
        text-decoration: underline
    }
}

.app__header {
    position: relative;
    text-align: center;
    background-color: hsla(0, 0%, 100%, .6);
    width: 100%;
    padding: 1.8rem 2.9rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media only screen and (max-width: 767px) {
    .app__header {
        padding: 1.7rem 2.5rem
    }
}

.app__header .svg-button__container {
    width: 60px;
    height: 60px;
    padding: 0 7.5px
}

@media only screen and (max-width: 767px) {
    .app__header .svg-button__container {
        width: 40px;
        height: 40px;
        padding: 0 5px
    }
}

@media screen and (max-width: 350px) {
    .app__header .svg-button__container {
        width: 30px
    }
}

.app__header .svg-button__container .svg-button__text {
    font-size: 24px;
    font-weight: 400
}

.app__header--white-button-inners .svg-button__container .svg-button__text {
    fill: #fff;
    opacity: .6
}

@media only screen and (min-width: 480px) {
    .app__header--white-button-inners .svg-button__container:active .svg-button__text, .app__header--white-button-inners .svg-button__container:focus .svg-button__text, .app__header--white-button-inners .svg-button__container:hover .svg-button__text {
        opacity: 1
    }
}

.app__close-ui {
    position: fixed;
    padding: 0;
    top: 20px;
    right: 20px;
    z-index: 9999;
    opacity: .5
}

@media only screen and (min-width: 480px) {
    .app__close-ui:active, .app__close-ui:focus, .app__close-ui:hover {
        opacity: 1
    }
}

.logo__container {
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.logo {
    height: 6.25rem;
    width: auto
}

@media only screen and (max-width: 767px) {
    .logo {
        height: 5.5rem
    }
}

.app__header__nav {
    float: left
}

.app__header__nav--right {
    float: right
}

@media only screen and (max-width: 767px) {
    .app__header__nav {
        margin-top: .4rem
    }
}

.app__header__nav__left {
    position: absolute;
    left: 4rem;
    top: 4rem
}

.app__header__nav__left button {
    margin-right: 1.5rem
}

@media only screen and (max-width: 767px) {
    .app__header__nav__left {
        left: 2rem;
        top: 2rem
    }

    .app__header__nav__left button {
        margin-right: 1rem
    }
}

.app__header__nav__right {
    position: absolute;
    right: 4rem;
    top: 4rem
}

.app__header__nav__right button {
    margin-left: 1.5rem
}

@media only screen and (max-width: 767px) {
    .app__header__nav__right {
        right: 2rem;
        top: 2rem
    }

    .app__header__nav__right button {
        margin-left: 1rem
    }
}

.app--light .logo--color {
    display: inline-block
}

.app--light .logo--white {
    display: none
}

.app--light .app__close-ui {
    opacity: 1
}

@media only screen and (min-width: 480px) {
    .app--light .app__close-ui:active, .app--light .app__close-ui:focus, .app--light .app__close-ui:hover {
        opacity: .5
    }
}

.app--light .app__close-ui .btn--ui.btn--ui--white:before, .app--light .app__close-ui .btn--ui:before {
    color: #4f4e57;
    -webkit-text-fill-color: #4f4e57
}

.app--dark {
    color: #fff;
    background-color: #373c4a
}

.app--dark .logo--white {
    display: inline-block
}

.app--dark .logo--color {
    display: none
}

.app--dark .app__header {
    background-color: rgba(55, 60, 74, .6)
}

.screen-transition--appear, .screen-transition--enter {
    opacity: 0
}

.screen-transition--appear-active, .screen-transition--enter-active {
    opacity: 1;
    -webkit-transition: opacity .6s ease-in;
    -o-transition: opacity .6s ease-in;
    transition: opacity .6s ease-in
}

.screen-transition--leave {
    opacity: 1
}

.screen-transition--leave-active {
    opacity: 0;
    -webkit-transition: opacity .6s ease-in;
    -o-transition: opacity .6s ease-in;
    transition: opacity .6s ease-in
}

.loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 56px
}

@font-face {
    font-family: hlo-glyphs;
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.4ebb0f50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.3a431db9.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.615f2fcf.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/hlo-glyphs.c2ab4934.svg#hlo-glyphs) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Avenir;
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot);
    src: url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.867dfa50.eot#iefix) format("embedded-opentype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.038e3058.ttf) format("truetype"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.bb389447.woff) format("woff"), url(https://hyperloop-one.com/route-estimator/static/media/AvenirLTStd-Book.1d08e18a.svg#Avenir) format("svg");
    font-weight: 400;
    font-style: normal
}

.icon {
    font-family: hlo-glyphs !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-arrow-down:before {
    content: "\E903"
}

.icon-arrow-up:before {
    content: "\E901"
}

.icon-email:before {
    content: "\E902"
}

.icon-x:before {
    content: "\E900"
}

.icon-arrow-right:before {
    content: "\E904"
}

.icon-arrow-left:before {
    content: "\E905"
}

.icon-road-break:before {
    content: "\E906"
}

.icon-road-active:before {
    content: "\E907"
}

.icon-air-baggage:before {
    content: "\E908"
}

.icon-air-active:before {
    content: "\E909"
}

.icon-air-landing:before {
    content: "\E90A"
}

.icon-air-takeoff:before {
    content: "\E90B"
}

.icon-taxi:before {
    content: "\E90C"
}

.icon-rail-active:before {
    content: "\E90D"
}

.icon-idle:before {
    content: "\E90E"
}

.icon-hsr-active:before {
    content: "\E90F"
}

.icon-security:before {
    content: "\E910"
}

.icon-hyperloop:before {
    content: "\E911"
}

.icon-air:before {
    content: "\E912"
}

.icon-hsr:before {
    content: "\E913"
}

.icon-rail:before {
    content: "\E914"
}

.icon-road:before {
    content: "\E915"
}

.icon-spinner:before {
    content: "\E916"
}

.icon-spinner2:before {
    content: "\E917"
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.gradient-text {
    color: #3576c4;
    background-image: -webkit-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: -o-linear-gradient(310deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    background-image: linear-gradient(140deg, #74399d, #74399d 15%, #00a9e4 75%, #00a9e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none !important
    }
}

@media only screen and (max-width: 766px) {
    .not-mobile {
        display: none !important
    }
}

body, html {
    margin: 0;
    padding: 0
}

html {
    font-size: 62.5%
}

@media only screen and (max-width: 1040px) {
    html {
        font-size: 51%
    }
}

@media only screen and (max-width: 767px) {
    html {
        font-size: 45%
    }
}

/*# sourceMappingURL=main.320a79f0.css.map*/