@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

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

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

body, div, article, aside, details, figcaption, figure, footer, header, menu, nav, section, main, form, legend, fieldset, label, ul, ol, li, dl, dt, dd, p, span, a, blockquote, table, tr, th, td, thead, tbody, tfoot, h1, h2, h3, h4, h5, h6, button, input, address {
    padding: 0px;
    margin: 0px;
    border: 0;
    background: none;
    font-style: normal;
    font-weight: normal;
    outline: 0
}

button {
    -webkit-appearance: none
}

li {
    list-style: none
}

img, object {
    max-width: 100%
}

a img {
    border: 0
}

article, aside, details, figcaption, figure, footer, header, menu, nav, section, main {
    display: block
}

input::-moz-focus-inner, select::-moz-focus-inner, textarea::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0;
    border: 0
}

@font-face {
    font-family: "social";
    src: url("../assets/icons/social.eot?zgla75");
    src: url("../assets/icons/social.eot?zgla75#iefix") format("embedded-opentype"),url("../assets/icons/social.ttf?zgla75") format("truetype"),url("../assets/icons/social.woff?zgla75") format("woff"),url("../assets/icons/social.svg?zgla75#social") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Circular-Bold-S";
    src: url("../assets/fonts/circular/fonts_subsetted/lineto-circular-bold.eot");
    src: url("../assets/fonts/circular/fonts_subsetted/lineto-circular-bold.eot?#iefix") format("embedded-opentype"),url("../assets/fonts/circular/fonts_subsetted/lineto-circular-bold.woff2") format("woff2"),url("../assets/fonts/circular/fonts_subsetted/lineto-circular-bold.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Chap";
    src: url("https://www.scottdunn.com/static/96ce29f9fbaf5afbfa62.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Mallory Light";
    src: url("https://www.scottdunn.com/static/c39d1cad3908e8b3c37e.woff2") format("woff2");
    font-weight: 300;
    font-display: swap
}

@font-face {
    font-family: "Mallory Book";
    src: url("https://www.scottdunn.com/static/7fad3169d622de01b67a.woff2") format("woff2");
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: "Mallory Medium";
    font-weight: 500;
    src: url("https://www.scottdunn.com/static/255387030903e3fc66b8.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "Circular-Medium";
    src: url("../assets/fonts/circular/fonts/lineto-circular-medium.eot");
    src: url("../assets/fonts/circular/fonts/lineto-circular-medium.eot?#iefix") format("embedded-opentype"),url("../assets/fonts/circular/fonts/lineto-circular-medium.woff2") format("woff2"),url("../assets/fonts/circular/fonts/lineto-circular-medium.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Circular-Book-S";
    src: url("../assets/fonts/circular/fonts_subsetted/lineto-circular-book.eot");
    src: url("../assets/fonts/circular/fonts_subsetted/lineto-circular-book.eot?#iefix") format("embedded-opentype"),url("../assets/fonts/circular/fonts_subsetted/lineto-circular-book.woff2") format("woff2"),url("../assets/fonts/circular/fonts_subsetted/lineto-circular-book.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

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

.icon-facebook:before {
    content: ""
}

.icon-twitter:before {
    content: ""
}

.icon-linkedin:before {
    content: ""
}

.icon-pinterest:before {
    content: ""
}

.icon-instagram:before {
    content: ""
}

.icon-google:before {
    content: ""
}

h1, h2, h3, h4, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Chap";
    font-weight: 500;
    display: block;
    margin: 0 0 0 0;
    padding: 0;
    font-weight: normal
}

h1 {
    margin-top: 56px;
    transition: font-size 1s ease;
    font-family: "Chap";
    font-weight: 500;
    padding-bottom: 32px;
    font-size: 293.75%;
    font-size: 2.9375rem;
    line-height: 62px
}

@media(min-width: 768px) {
    h1 {
        font-size: 312.5%;
        font-size: 3.125rem
    }
}

@media(min-width: 1200px) {
    h1 {
        font-size: 468.75%;
        font-size: 4.6875rem;
        line-height: 88.95px;
        padding-bottom: 40px
    }
}

h1 span {
    display: none
}

@media(min-width: 384px) {
    h1 span {
        display: inline
    }
}

h2 {
    font-size: 30px;
    line-height: 39px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

    h2.narrow {
        max-width: 500px
    }

@media(min-width: 1200px) {
    h2.narrow {
        padding-bottom: 20%
    }
}

@media(min-width: 992px) {
    h2 {
        font-size: 250%;
        font-size: 2.5rem;
        line-height: 50px
    }
}

@media(min-width: 1200px) {
    h2 {
        font-size: 337.5%;
        font-size: 3.375rem;
        line-height: 62.7px
    }
}

h3 {
    font-size: 268.75%;
    font-size: 2.6875rem;
    line-height: 56px;
    padding-bottom: 32px
}

h4 {
    font-size: 156.25%;
    font-size: 1.5625rem;
    padding-bottom: 32px;
    line-height: 33px
}

@media(min-width: 1200px) {
    h4 {
        font-size: 200%;
        font-size: 2rem;
        line-height: 41.95px;
        padding-bottom: 40px
    }
}

h5 {
    font-size: 156.25%;
    font-size: 1.5625rem;
    line-height: 31.46px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-family: "Chap";
    font-weight: 500
}

    h5.counter {
        margin-bottom: 32px
    }

h6 {
    font-size: 100%;
    font-size: 1rem;
    font-family: "Mallory Medium";
    line-height: 100%
}

p {
    font-family: "Mallory Book";
    font-size: 100%;
    font-size: 1rem;
    line-height: 26px
}

    p.small {
        font-size: 62.5%;
        font-size: 0.625rem;
        line-height: 13.33px
    }

    p.bold {
        font-family: "Mallory Medium"
    }

    p.intro {
        padding-bottom: 50px
    }

a {
    text-decoration: none
}

    a:hover {
        text-decoration: none
    }

    a:focus {
        outline: none
    }

ul.standard {
    margin: 0 1em 1em 1.5em
}

    ul.standard li {
        padding-bottom: .5em;
        list-style: circle
    }

ol.standard {
    margin: 0 0 1em 1.5em
}

    ol.standard li {
        padding-bottom: .5em;
        list-style: decimal
    }

dl.standard {
    margin-bottom: .5em
}

    dl.standard dt {
        font-weight: bold
    }

    dl.standard dd {
        padding: 0 0 .5em 1em
    }

small, .small {
    font-size: 90%
}

hr {
    height: 1px;
    margin: 0 0 .5em 0;
    border: 0;
    border-top: solid 1px #e7e7e7;
    clear: both
}

code {
    padding: 0 .3em;
    font-size: 1.2em
}

.container {
    max-width: 1408px;
    margin: 0 auto
}

@media(min-width: 1200px) {
    .container.vertical-expand {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%
    }
}

.row {
    display: flex;
    flex-flow: row wrap;
    transition: all .3s ease;
    align-items: center
}

    .row.reverse {
        flex-flow: row-reverse wrap-reverse
    }

    .row.center {
        justify-content: center
    }

[class*=col] {
    position: relative;
    z-index: 10000;
    width: 100%;
    margin: 1em auto;
    padding-right: 16px;
    padding-left: 16px
}

@media(min-width: 992px) {
    [class*=col].no-desktop {
        display: none
    }
}

[class*=col].reverse {
    flex-flow: column-reverse wrap-reverse
}

[class*=col].center {
    align-self: center
}

[class*=col].full {
    padding-right: 2px;
    padding-left: 2px
}

@media(min-width: 992px) {
    [class*=col].full {
        padding-right: 16px;
        padding-left: 16px
    }
}

.col-xs-1 {
    flex: 8.3333333333%;
    max-width: 8.3333333333%
}

.offset-xs-1 {
    margin-left: 8.3333333333%
}

.col-xs-2 {
    flex: 16.6666666667%;
    max-width: 16.6666666667%
}

.offset-xs-2 {
    margin-left: 16.6666666667%
}

.col-xs-3 {
    flex: 25%;
    max-width: 25%
}

.offset-xs-3 {
    margin-left: 25%
}

.col-xs-4 {
    flex: 33.3333333333%;
    max-width: 33.3333333333%
}

.offset-xs-4 {
    margin-left: 33.3333333333%
}

.col-xs-5 {
    flex: 41.6666666667%;
    max-width: 41.6666666667%
}

.offset-xs-5 {
    margin-left: 41.6666666667%
}

.col-xs-6 {
    flex: 50%;
    max-width: 50%
}

.offset-xs-6 {
    margin-left: 50%
}

.col-xs-7 {
    flex: 58.3333333333%;
    max-width: 58.3333333333%
}

.offset-xs-7 {
    margin-left: 58.3333333333%
}

.col-xs-8 {
    flex: 66.6666666667%;
    max-width: 66.6666666667%
}

.offset-xs-8 {
    margin-left: 66.6666666667%
}

.col-xs-9 {
    flex: 75%;
    max-width: 75%
}

.offset-xs-9 {
    margin-left: 75%
}

.col-xs-10 {
    flex: 83.3333333333%;
    max-width: 83.3333333333%
}

.offset-xs-10 {
    margin-left: 83.3333333333%
}

.col-xs-11 {
    flex: 91.6666666667%;
    max-width: 91.6666666667%
}

.offset-xs-11 {
    margin-left: 91.6666666667%
}

.col-xs-12 {
    flex: 100%;
    max-width: 100%
}

.offset-xs-12 {
    margin-left: 100%
}

@media(min-width: 480px) {
    .row {
        padding-right: 20px;
        padding-left: 20px
    }

    [class*=col] {
        padding-right: 16px;
        padding-left: 16px
    }

    .row.full {
        padding-right: 0;
        padding-left: 0
    }

        .row.full [class*=col] {
            padding-right: 0;
            padding-left: 0
        }
}

@media(min-width: 768px) {
    .col-sm-1 {
        flex: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .offset-sm-1 {
        margin-left: 8.3333333333%
    }

    .col-sm-2 {
        flex: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .offset-sm-2 {
        margin-left: 16.6666666667%
    }

    .col-sm-3 {
        flex: 25%;
        max-width: 25%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .col-sm-4 {
        flex: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .offset-sm-4 {
        margin-left: 33.3333333333%
    }

    .col-sm-5 {
        flex: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .offset-sm-5 {
        margin-left: 41.6666666667%
    }

    .col-sm-6 {
        flex: 50%;
        max-width: 50%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .col-sm-7 {
        flex: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .offset-sm-7 {
        margin-left: 58.3333333333%
    }

    .col-sm-8 {
        flex: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .offset-sm-8 {
        margin-left: 66.6666666667%
    }

    .col-sm-9 {
        flex: 75%;
        max-width: 75%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .col-sm-10 {
        flex: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .offset-sm-10 {
        margin-left: 83.3333333333%
    }

    .col-sm-11 {
        flex: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .offset-sm-11 {
        margin-left: 91.6666666667%
    }

    .col-sm-12 {
        flex: 100%;
        max-width: 100%
    }

    .offset-sm-12 {
        margin-left: 100%
    }
}

@media(min-width: 992px) {
    .row {
        padding-right: 68px;
        padding-left: 68px
    }

    .col-md-1 {
        flex: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .offset-md-1 {
        margin-left: 8.3333333333%
    }

    .col-md-2 {
        flex: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .offset-md-2 {
        margin-left: 16.6666666667%
    }

    .col-md-3 {
        flex: 25%;
        max-width: 25%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .col-md-4 {
        flex: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .offset-md-4 {
        margin-left: 33.3333333333%
    }

    .col-md-5 {
        flex: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .offset-md-5 {
        margin-left: 41.6666666667%
    }

    .col-md-6 {
        flex: 50%;
        max-width: 50%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .col-md-7 {
        flex: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .offset-md-7 {
        margin-left: 58.3333333333%
    }

    .col-md-8 {
        flex: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .offset-md-8 {
        margin-left: 66.6666666667%
    }

    .col-md-9 {
        flex: 75%;
        max-width: 75%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .col-md-10 {
        flex: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .offset-md-10 {
        margin-left: 83.3333333333%
    }

    .col-md-11 {
        flex: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .offset-md-11 {
        margin-left: 91.6666666667%
    }

    .col-md-12 {
        flex: 100%;
        max-width: 100%
    }

    .offset-md-12 {
        margin-left: 100%
    }

    [class*=col] {
        padding-right: 16px;
        padding-left: 16px
    }
}

@media(min-width: 1200px) {
    .row {
        padding-right: 68px;
        padding-left: 68px
    }

    [class*=col] {
        padding-right: 16px;
        padding-left: 16px
    }

    .col-lg-1 {
        flex: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .offset-lg-1 {
        margin-left: 8.3333333333%
    }

    .col-lg-2 {
        flex: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .offset-lg-2 {
        margin-left: 16.6666666667%
    }

    .col-lg-3 {
        flex: 25%;
        max-width: 25%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .col-lg-4 {
        flex: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .offset-lg-4 {
        margin-left: 33.3333333333%
    }

    .col-lg-5 {
        flex: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .offset-lg-5 {
        margin-left: 41.6666666667%
    }

    .col-lg-6 {
        flex: 50%;
        max-width: 50%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .col-lg-7 {
        flex: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .offset-lg-7 {
        margin-left: 58.3333333333%
    }

    .col-lg-8 {
        flex: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .offset-lg-8 {
        margin-left: 66.6666666667%
    }

    .col-lg-9 {
        flex: 75%;
        max-width: 75%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .col-lg-10 {
        flex: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .offset-lg-10 {
        margin-left: 83.3333333333%
    }

    .col-lg-11 {
        flex: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .offset-lg-11 {
        margin-left: 91.6666666667%
    }

    .col-lg-12 {
        flex: 100%;
        max-width: 100%
    }

    .offset-lg-12 {
        margin-left: 100%
    }
}

.align-center {
    text-align: center
}

.align-left {
    text-align: left
}

.align-right {
    text-align: right
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0
}

body {
    background-color: #333;
    font-family: "Mallory Medium";
    font-size: 100%;
    color: #fff;
    line-height: 1.3;
    padding: 0;
    margin: 0
}

main {
    position: relative;
    height: 100%
}

.logo {
    background: url("../img/logo.svg") no-repeat center/auto 100%;
    width: 189px;
    height: 27px
}

.about-spacer {
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 0;
    display: none
}

@media(min-width: 1200px) {
    .about-spacer {
        display: block
    }
}

.progress {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: opacity .3s ease-in-out;
    opacity: 1
}

@media(min-width: 768px) {
    .progress {
        opacity: .25
    }

        .progress.active {
            opacity: 1
        }
}

.progress .flex-items {
    display: none;
    align-items: center
}

@media(min-width: 768px) {
    .progress .flex-items {
        display: flex
    }
}

.progress .flex-items .icon {
    width: 40px;
    height: 40px;
    background: no-repeat left/auto 100%
}

.progress .flex-items .progress-text {
    margin-left: 17px
}

    .progress .flex-items .progress-text h6 {
        padding-bottom: 8px
    }

.progress.physical .icon {
    background-image: url("../img/physical-icon.svg")
}

.progress.cultural .icon {
    background-image: url("../img/culture-icon.svg")
}

.progress.travel .icon {
    background-image: url("../img/travel-icon.svg")
}

.progress .bars {
    display: flex;
    gap: 4px;
    margin-top: 15px;
    align-items: center
}

    .progress .bars span {
        width: 100%;
        height: 2px;
        background: #fff;
        opacity: .25
    }

.progress.active .bars span.selected {
    opacity: 1;
    height: 6px
}

@keyframes introMove {
    from {
        transform: translateY(10px) scale(0.99)
    }

    to {
        transform: translateY(0) scale(1)
    }
}

@keyframes moveLeft {
    0% {
        transform: translateX(-50px) scale(0.97)
    }

    100% {
        transform: translateX(0) scale(1)
    }
}

@keyframes aproach {
    from {
        transform: translate(-20px, 30px) scale(0.95)
    }

    to {
        transform: translate(0, 0) scale(1)
    }
}

@keyframes aproachUp {
    from {
        transform: translateY(30px) scale(0.95)
    }

    to {
        transform: translateY(0) scale(1)
    }
}

@keyframes rotator {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(8deg)
    }
}

@keyframes shrink {
    0% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(-56px, 20px)
    }
}

@keyframes shrinkCenter {
    0% {
        transform: translateY(0) scale(1)
    }

    100% {
        transform: translateY(10%) scale(0.95)
    }
}

@keyframes aproachRight {
    from {
        transform: translate(80px, 30px) scale(0.95)
    }

    to {
        transform: translate(0, 0) scale(1)
    }
}

@keyframes balloon1 {
    from {
        top: 70%
    }

    to {
        top: 60%
    }
}

@keyframes balloon2 {
    from {
        top: 10%
    }

    to {
        top: -2%
    }
}

@keyframes balloon3 {
    from {
        top: 40%
    }

    to {
        top: 30%
    }
}

@keyframes swing {
    0%,100% {
        transform: rotate(0deg)
    }

    20% {
        transform: scale(0.98)
    }

    50% {
        transform: rotate(1deg)
    }

    80% {
        transform: scale(0.98)
    }
}

article {
    inset: 0;
    position: absolute;
    background: no-repeat fixed bottom/cover;
    z-index: 1;
    bottom: 0;
    left: 0;
    min-height: 100%;
    height: -moz-max-content;
    height: max-content;
    display: grid;
    place-items: center
}

@media(min-width: 992px) {
    article {
        transition: opacity .4s,visibility .4s
    }
}

article.top {
    place-items: flex-start
}

article:not(.active) {
    height: 0;
    overflow: hidden
}

article:not(.visible) {
    opacity: 0;
    visibility: hidden
}

article .gradient {
    height: 441px;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: -1;
    background-image: linear-gradient(180deg, rgba(0, 54, 70, 0) 6.47%, rgba(0, 54, 70, 0.612) 78.81%, rgba(0, 54, 70, 0.85) 93.84%)
}

article .image-wrapper {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden
}

@media(min-width: 768px) {
    article .image-wrapper {
        display: block
    }
}

article .image-wrapper .animation {
    width: 100%;
    height: 100%;
    background: no-repeat left bottom/auto 80%
}

article#intro {
    background-image: url("../img/airballoons_bg.jpg")
}

    article#intro .balloon-wrapper {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0
    }

@media(min-width: 992px) {
    article#intro .balloon-wrapper.animate .balloon-one {
        animation: balloon1 5s ease-in-out
    }

    article#intro .balloon-wrapper.animate .balloon-two {
        animation: balloon2 10s ease-in-out
    }

    article#intro .balloon-wrapper.animate .balloon-three {
        animation: balloon3 7s ease-in-out
    }
}

article#intro .balloon {
    position: absolute;
    background: no-repeat center/auto 75%;
    height: 100%;
    width: 100%
}

    article#intro .balloon.balloon-one {
        top: 60%;
        left: 50%;
        background-image: url("../img/airballoons1_front.png");
        width: 149px;
        height: 182px;
        display: none
    }

@media(min-width: 768px) {
    article#intro .balloon.balloon-one {
        display: block
    }
}

article#intro .balloon.balloon-two {
    top: -2%;
    left: 67%;
    background-image: url("../img/airballoons2_front.png");
    width: 244px;
    height: 249px
}

article#intro .balloon.balloon-three {
    top: 30%;
    left: 80%;
    background-image: url("../img/airballoons3_front.png");
    width: 180px;
    height: 158px;
    display: none
}

@media(min-width: 768px) {
    article#intro .balloon.balloon-three {
        display: block
    }
}

article#about {
    background: url("../img/flight_bg.jpg") no-repeat 0 0/cover;
    transition: background-position-x 15s ease
}

    article#about.active {
        background-position-x: 100px
    }

    article#about:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: url("../img/flight_front.png") no-repeat left/cover
    }

article#skydive {
    background-image: url("../img/skydive_bg.jpg")
}

    article#skydive .animation {
        background: url("../img/skydive_front.png") no-repeat 20px bottom/auto 43%
    }

@media(min-width: 992px) {
    article#skydive .animation.animate {
        animation: moveLeft 10s ease-in-out
    }
}

article#safari {
    background-image: url("../img/safari_bg.jpg")
}

    article#safari .animation {
        background-image: url("../img/safari_front.png");
        background-position: 350px bottom;
        background-size: 30%
    }

        article#safari .animation.animate {
            animation: aproach 5s ease-in
        }

article#mountain {
    background-image: url("../img/mountain_bg.jpg")
}

    article#mountain .animation {
        background-image: url("../img/mountain_front.png");
        background-position: 0 bottom;
        background-size: auto 44%
    }

        article#mountain .animation.animate {
            animation: swing 15s ease-in
        }

article#cuisine {
    background-image: url("../img/cuisine_bg.jpg")
}

    article#cuisine .animation {
        background-position-x: 24%;
        background-size: auto 64%;
        background-image: url("../img/cuisine_front.png")
    }

        article#cuisine .animation.animate {
            animation: aproach 5s ease-in-out
        }

article#foodplate {
    background-image: url("../img/foodplate_bg.jpg")
}

    article#foodplate .animation {
        background-size: 28%;
        background-position-x: 24%;
        background-image: url("../img/foodplate_front.png");
        transform: rotate(8deg)
    }

        article#foodplate .animation.animate {
            animation: rotator 5s ease-in
        }

article#gallery {
    background-image: url("../img/gallery_bg.jpg")
}

    article#gallery .animation {
        background: no-repeat 70px bottom/auto 63%;
        background-image: url("../img/gallery_front.png")
    }

        article#gallery .animation.animate {
            animation: aproach 5s ease-in
        }

article#rockman {
    background-image: url("../img/rockman_bg.jpg")
}

    article#rockman .animation {
        background: no-repeat center bottom/auto 55%;
        background-image: url("../img/rockman_front.png");
        transform: translate(-56px, 20px)
    }

        article#rockman .animation.animate {
            animation: shrink 5s ease-in
        }

article#airplane {
    background-image: url("../img/airplane_bg.jpg")
}

    article#airplane .animation {
        background: no-repeat 28% bottom/auto 43%;
        background-image: url("../img/airplane_front.png")
    }

        article#airplane .animation.animate {
            animation: aproachRight 5s ease-in
        }

article#camel {
    background-image: url("../img/camel_bg.jpg")
}

    article#camel .animation {
        background: no-repeat 42% bottom/auto 43%;
        background-image: url("../img/camel_front.png")
    }

        article#camel .animation.animate {
            animation: aproachUp 5s ease-in
        }

article#gate {
    background-image: url("../img/gate_bg.jpg")
}

    article#gate .animation {
        background: no-repeat 40% bottom/auto 55%;
        background-image: url("../img/gate_front.png");
        transform: translateY(10%) scale(0.95)
    }

        article#gate .animation.animate {
            animation: shrinkCenter 5s ease-in
        }

article#adventure {
    background-image: url("../img/results/adventure.jpg");
    transition: background-image 1.4s ease-in-out;
}

@media(max-width:768px) {
    article#adventure, article#budding, article#keen, article#intrepid {
        background: #003123 !important;
        background-image: none;
    }
}

article#budding {
    background-image: url("../img/results/budding.jpg");
    transition: background-image .4s ease-in-out;
}

article#keen {
    background-image: url("../img/results/keen.jpg");
    transition: background-image .4s ease-in-out;
}

article#intrepid {
    background-image: url("../img/results/intrepid.jpg");
    transition: background-image .4s ease-in-out;
}

@media(min-width: 992px) {
    .question-heading {
        min-height: 150px
    }
}

@media(min-width: 1200px) {
    .question-heading {
        min-height: 200px
    }
}

ul.questions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
    justify-content: space-between
}

    ul.questions li {
        flex-basis: 100%;
        max-width: 100%
    }

    ul.questions.flags {
        gap: 10px
    }

        ul.questions.flags li {
            flex-basis: 25%;
            min-width: 190px
        }

@media(min-width: 768px) {
    ul.questions.flags li {
        flex-basis: 48%;
        max-width: 282px
    }
}

@media(min-width: 768px) {
    ul.questions li {
        flex-basis: 48%;
        max-width: 282px
    }

    ul.questions.full li {
        flex-basis: 85%;
        max-width: 85%
    }
}

ul.questions label {
    cursor: pointer;
    position: relative;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: rgba(0,0,0,.1);
    border-radius: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0 32px;
    margin-bottom: 20px;
    font-family: "Mallory Book";
    font-size: 100%;
    font-size: 1rem
}

@media(min-width: 768px) {
    ul.questions label {
        font-size: 87.5%;
        font-size: 0.875rem
    }
}

@media(min-width: 1200px) {
    ul.questions label {
        font-size: 100%;
        font-size: 1rem
    }
}

ul.questions label:after {
    content: "";
    position: absolute;
    border: 2px solid #fff;
    background-color: rgba(0,0,0,0);
    transition: border-color .3s;
    height: 68px;
    width: calc(100% + 9px);
    border-radius: 60px;
    left: -4px;
    border-color: rgba(0,0,0,.1)
}

ul.questions label:hover:after {
    content: "";
    position: absolute;
    border: 2px solid #fff;
    background-color: rgba(0,0,0,0);
    transition: border-color .3s;
    height: 68px;
    width: calc(100% + 9px);
    border-radius: 60px;
    left: -4px
}

ul.questions input[type=checkbox]:checked + label, ul.questions input[type=radio]:checked + label {
    background-color: #fff;
    color: #000
}

    ul.questions input[type=checkbox]:checked + label:after, ul.questions input[type=radio]:checked + label:after {
        content: "";
        position: absolute;
        border: 2px solid #fff;
        background-color: rgba(0,0,0,0);
        transition: border-color .3s;
        height: 68px;
        width: calc(100% + 9px);
        border-radius: 60px;
        left: -4px;
        border-color: #ff9c9c
    }

ul.questions .image-flag {
    position: relative;
    left: -15px;
    height: 32px;
    width: 32px;
    background: no-repeat center/auto 100%
}

    ul.questions .image-flag[data-image=chinese] {
        background-image: url("../img/flags/chinese.svg")
    }

    ul.questions .image-flag[data-image=mexican] {
        background-image: url("../img/flags/mexican.svg")
    }

    ul.questions .image-flag[data-image=japanese] {
        background-image: url("../img/flags/japanese.svg")
    }

    ul.questions .image-flag[data-image=greek] {
        background-image: url("../img/flags/greek.svg")
    }

    ul.questions .image-flag[data-image=american] {
        background-image: url("../img/flags/american.svg")
    }

    ul.questions .image-flag[data-image=italian] {
        background-image: url("../img/flags/italian.svg")
    }

    ul.questions .image-flag[data-image=indian] {
        background-image: url("../img/flags/indian.svg")
    }

    ul.questions .image-flag[data-image=thai] {
        background-image: url("../img/flags/thai.svg")
    }

    ul.questions .image-flag[data-image=korean] {
        background-image: url("../img/flags/korean.svg")
    }

    ul.questions .image-flag[data-image=turkish] {
        background-image: url("../img/flags/turkish.svg")
    }

    ul.questions .image-flag[data-image="none of the above"] {
        display: none
    }

form#ranger {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 75px
}

.range-control {
    position: relative
}

input[type=range] {
    display: block;
    width: 100%;
    margin: 0;
    outline: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background: rgba(98,105,118,.15);
    border-radius: 24px;
    height: 11px;
    -webkit-appearance: none
}

    input[type=range]:focus {
        outline: none
    }

.output {
    position: absolute;
    top: -76px;
    border: 1px solid #e2e2e2;
    background-color: #fff;
    color: #777;
    font-size: .8em;
    line-height: 45px;
    text-align: center;
    border-radius: 100%;
    height: 45px;
    width: 45px;
    display: block;
    transform: translateX(-50%);
    left: 10px;
    font-family: "Mallory Medium";
    font-size: 87.5%;
    font-size: 0.875rem;
    padding: 0 10px;
    margin-left: 2px
}

    .output:before {
        transition: all .3s ease;
        content: "";
        position: absolute;
        border-radius: 60px;
        width: 53px;
        height: 53px;
        top: -5px;
        left: -5px;
        border: 2px solid #ff9c9c;
        background-color: rgba(0,0,0,0);
        display: none
    }

@media(min-width: 768px) {
    .output:before {
        display: block
    }
}

@media(min-width: 992px) {
    .output {
        padding: 0;
        height: 54px;
        width: 54px;
        line-height: 50px
    }

        .output:before {
            width: 62px;
            height: 62px
        }
}

input[type=range]::-webkit-slider-runnable-track {
    height: 11px;
    border-radius: 24px;
    -webkit-appearance: none
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid #fff;
    box-shadow: -2px 0px 4px rgba(98,105,118,.15);
    background-color: #ff9c9c;
    height: 25px;
    width: 25px;
    margin-top: -7px
}

input[type=range]:focus::-webkit-slider-thumb {
    border: 1px solid #fff;
    outline: 3px solid #fff;
    outline-offset: .125rem
}

input[type=range]::-moz-range-track {
    height: 11px;
    border-radius: 24px;
    -webkit-appearance: none
}

input[type=range]::-moz-range-thumb {
    border-radius: 24px;
    border: 1px solid #fff;
    box-shadow: -2px 0px 4px rgba(98,105,118,.15);
    background-color: #ff9c9c;
    height: 25px;
    width: 25px
}

input[type=range]:focus::-moz-range-thumb {
    border: 1px solid #fff;
    outline: 3px solid #fff;
    outline-offset: .125rem
}

input[type=range]::-moz-range-progress {
    height: 11px;
    border-radius: 24px
}

input[type=range]::-ms-fill-lower {
    height: 11px;
    border-radius: 24px
}

.btn_press {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    width: 100%;
    height: 60px;
    border-radius: 60px;
    background-color: #fff;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    transition: all .3s ease;
    color: #000
}

@media(min-width: 768px) {
    .btn_press {
        max-width: 276px
    }
}

@media(min-width: 1200px) {
    .btn_press {
        max-width: 176px
    }
}

.btn_press:before {
    transition: all .3s ease;
    content: "";
    position: absolute;
    border-radius: 60px;
    width: calc(100% + 9px);
    height: 68px;
    top: -4px;
    left: -4px;
    border: 2px solid #fff;
    background-color: rgba(0,0,0,0)
}

@media(min-width: 768px) {
    .btn_press:before {
        max-width: 284px
    }
}

@media(min-width: 1200px) {
    .btn_press:before {
        max-width: 184px
    }
}

.btn_press:hover:before {
    border-color: #ff9c9c
}

.btn_quiz {
    font-family: "Chap";
    font-weight: 500;
    font-size: 200%;
    font-size: 2rem;
    line-height: 42px;
    align-items: center;
    justify-content: space-between;
    max-width: 322px;
    margin-left: 21px;
    margin-top: 10vh;
    position: relative;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

    .btn_quiz:after {
        content: "";
        right: -5px;
        z-index: -1;
        position: absolute;
        background: url("../img/semi_circle.svg");
        width: 103px;
        height: 204px
    }

    .btn_quiz .btn_back, .btn_quiz .btn_next {
        cursor: pointer;
        position: relative
    }

        .btn_quiz .btn_back:before, .btn_quiz .btn_next:after {
            content: "";
            display: inline-block;
            position: relative;
            background: url("../img/arrow.svg") no-repeat center/auto 100%;
            height: 16px;
            top: 0
        }

        .btn_quiz .btn_back:before {
            width: 89px;
            left: -20px;
            background-position-x: 55px;
            transition: background-position-x .3s cubic-bezier(0, 0, 0.58, 1)
        }

        .btn_quiz .btn_back:hover:before {
            background-position-x: 5px
        }

    .btn_quiz .spacer {
        width: 2px;
        background-color: #fff;
        height: 87px
    }

    .btn_quiz.desktop {
        display: none
    }

@media(min-width: 992px) {
    .btn_quiz.desktop {
        display: flex;
        justify-content: flex-start
    }

        .btn_quiz.desktop .btn_next:before {
            content: "";
            top: 12px;
            right: -67px;
            width: 48px;
            height: 2px;
            background-color: #fff;
            position: absolute;
            margin: 7px auto;
            margin-left: 65px
        }

        .btn_quiz.desktop .btn_next:after {
            position: absolute;
            width: 41px;
            left: 117px;
            top: 12px;
            background-position-x: 0;
            transform: rotate(-180deg);
            transition: left .3s cubic-bezier(0, 0, 0.58, 1)
        }

        .btn_quiz.desktop .btn_next:hover:after {
            left: 132px
        }

        .btn_quiz.desktop .spacer {
            margin: 0 12px
        }
}

.btn_quiz.mobile {
    font-size: 156.25%;
    font-size: 1.5625rem;
    max-width: 300px;
    display: flex;
    margin: 0 auto;
    padding-bottom: 10px;
}

@media(min-width: 992px) {
    .btn_quiz.mobile {
        display: none
    }
}

.btn_quiz.mobile:after {
    display: none
}

.btn_quiz.mobile .spacer {
    height: 32px
}

.btn_quiz.mobile .btn_back:before {
    width: 70px;
    background-position-x: 0
}

.btn_quiz.mobile .btn_next:before {
    display: none
}

.btn_quiz.mobile .btn_next:after {
    width: 70px;
    left: 21px;
    transform: rotate(-180deg);
    background-position-x: 0
}

.btn_quiz.mobile .btn_back, .btn_quiz.mobile .btn_next {
    padding: 20px 0
}

.btn_quiz.disabled:after {
    opacity: .25
}

.btn_quiz.disabled .btn_next {
    opacity: .25;
    pointer-events: none
}

input[type=checkbox] {
    display: none
}

input[type=radio] {
    display: none
}

ul.family {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 53px;
    margin-top: 3em;
    max-width: 518px
}

    ul.family label {
        font-family: "Mallory Book";
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        text-align: center;
        width: 100px;
        height: 100px;
        transition: background .3s ease;
        font-size: 87.5%;
        font-size: 0.875rem
    }

@media(min-width: 768px) {
    ul.family label {
        font-size: 81.25%;
        font-size: 0.8125rem;
        width: 130px;
        height: 130px;
        padding: 20px;
        background-color: rgba(98,105,118,.15);
        border-radius: 50%
    }
}

ul.family label .icon {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    transition: background .3s ease;
    background: no-repeat center/auto 100%
}

    ul.family label .icon.no_kids {
        background-image: url("../img/icons/no_kids.svg")
    }

    ul.family label .icon.babies {
        background-image: url("../img/icons/babies.svg")
    }

    ul.family label .icon.kids {
        background-image: url("../img/icons/young-kids.svg")
    }

    ul.family label .icon.teenagers {
        background-image: url("../img/icons/teenagers.svg")
    }

    ul.family label .icon.adult {
        background-image: url("../img/icons/adult.svg")
    }

ul.family label:hover:after {
    content: "";
    position: absolute;
    width: 108px;
    height: 108px
}

@media(min-width: 768px) {
    ul.family label:hover:after {
        width: 138px;
        height: 138px;
        border-radius: 50%;
        top: -4px;
        left: -4px;
        border: 2px solid #fff;
        background-color: rgba(0,0,0,0);
        transition: border-color .3s
    }
}

ul.family label:hover .no_kids, ul.family input[type=checkbox]:checked + label .no_kids {
    background-image: url("../img/icons/mobile/no_kids_active.svg")
}

ul.family label:hover .babies, ul.family input[type=checkbox]:checked + label .babies {
    background-image: url("../img/icons/mobile/babies_active.svg")
}

ul.family label:hover .kids, ul.family input[type=checkbox]:checked + label .kids {
    background-image: url("../img/icons/mobile/young-kids_active.svg")
}

ul.family label:hover .teenagers, ul.family input[type=checkbox]:checked + label .teenagers {
    background-image: url("../img/icons/mobile/teenagers_active.svg")
}

ul.family label:hover .adult, ul.family input[type=checkbox]:checked + label .adult {
    background-image: url("../img/icons/mobile/adult_active.svg")
}

@media(min-width: 768px) {
    ul.family label:hover, ul.family input[type=checkbox]:checked + label {
        background-color: #fff;
        color: #111
    }

        ul.family label:hover .no_kids, ul.family input[type=checkbox]:checked + label .no_kids {
            background-image: url("../img/icons/no_kids_hover.svg")
        }

        ul.family label:hover .babies, ul.family input[type=checkbox]:checked + label .babies {
            background-image: url("../img/icons/babies_hover.svg")
        }

        ul.family label:hover .kids, ul.family input[type=checkbox]:checked + label .kids {
            background-image: url("../img/icons/young-kids_hover.svg")
        }

        ul.family label:hover .teenagers, ul.family input[type=checkbox]:checked + label .teenagers {
            background-image: url("../img/icons/teenagers_hover.svg")
        }

        ul.family label:hover .adult, ul.family input[type=checkbox]:checked + label .adult {
            background-image: url("../img/icons/adult_hover.svg")
        }
}

ul.family input[type=checkbox]:checked + label:after {
    content: "";
    position: absolute;
    width: 108px;
    height: 108px
}

@media(min-width: 768px) {
    ul.family input[type=checkbox]:checked + label:after {
        width: 138px;
        height: 138px;
        border-radius: 50%;
        top: -4px;
        left: -4px;
        border: 2px solid #ff9c9c;
        background-color: rgba(0,0,0,0);
        transition: border-color .3s
    }
}

.results .destination-image {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    border: 0;
    padding: 0;
    display: block;
    transition: opacity .5s ease,z-index .5s ease
}

@media(max-width: 1200px) {
    .results .destination-image {
        display: none;
    }
}

@media(min-width: 1200px) {
    .results .destination-image {
        opacity: 0;
        z-index: -1
    }

        .results .destination-image.currentImage {
            opacity: 1;
            z-index: 1
        }
}

.results .singup {
    margin-top: 1.5em;
    display: flex;
    flex-wrap: wrap
}

@media(min-width: 600px) {
    .results .singup {
        flex-wrap: nowrap;
        align-items: center;
        gap: 20px
    }
}

.results .singup p {
    margin-bottom: 2em
}

@media(min-width: 600px) {
    .results .singup p {
        max-width: 392px;
        margin-bottom: 0
    }
}

.results .cite {
    margin-top: 1.5em
}

.results .destinations a {
    position: relative;
    text-decoration: none;
    color: #fff;
    background: no-repeat center/cover;
    display: block;
    padding: 24px;
    min-height: 350px
}

@media(min-width: 992px) {
    .results .destinations a {
        padding: 32px
    }
}

.results .destinations a.italy {
    background-image: url("../img/results/italy.jpg")
}

.results .destinations a.greece {
    background-image: url("../img/results/greece.jpg")
}

.results .destinations a.japan {
    background-image: url("../img/results/japan.jpg")
}

.results .destinations a.sri {
    background-image: url("../img/results/sri.jpg")
}

.results .destinations a.iceland {
    background-image: url("../img/results/iceland.jpg")
}

.results .destinations a.south {
    background-image: url("../img/results/south.jpg")
}

.results .destinations a.peru {
    background-image: url("../img/results/peru.jpg")
}

.results .destinations a.india {
    background-image: url("../img/results/india.jpg")
}

.results .destinations a.canada {
    background-image: url("../img/results/canada.jpg")
}

.results .destinations a.brazil {
    background-image: url("../img/results/brazil.jpg")
}

.results .destinations a.antarctica {
    background-image: url("../img/results/antarctica.jpg")
}

.results .destinations a.new {
    background-image: url("../img/results/new.jpg")
}

.results .destinations a h4 {
    padding-bottom: .5em
}

.results .destinations a .copy {
    transition: opacity .5s ease,z-index .5s ease
}

@media(min-width: 1200px) {
    .results .destinations a .copy {
        opacity: 0;
        z-index: -1
    }
}

.results .destinations a .copy:after {
    content: "";
    position: absolute;
    background: url("../img/arrow-right.svg") no-repeat;
    height: 40px;
    width: 40px;
    right: 5%;
    bottom: 2%
}

.results .destinations a:hover .copy {
    opacity: 1;
    z-index: 1
}