@import './reset.css';
html {
    font-family: "Roboto", sans-serif;
}

body {
    margin: 0;
}

h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.5px;
    text-align: left;
    color: #FFF;
    margin: 15px 0;
    font-family: "Roboto", sans-serif;
}

h2, h3 {
    font-family: Roboto, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.2px;
    margin-bottom: 15px;
    color: #FFF;
}

h1.dark, h2.dark, h3.dark {
    color: #22075A;
}

h4 {
    margin-bottom: 15px;
    font-weight: bold;
}

.icon {
    width: 52px;
    height: 52px;
    background: #FFF;
    border-radius: 26px;
    box-shadow: 0px 3px 23px 0px rgba(74, 6, 160, 0.0784313725);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.icon img {
    width: 20px;
    height: 20px;
}

.hidden {
    display: none;
}

p {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.2px;
    text-align: left;
    margin-bottom: 15px;
}

p.light {
    color: #7B738C;
}

.lightText p {
    color: #7B738C;
}
.lightText ol {
    color: #7B738C;
}
b, strong {
    font-weight: bold;
    color: black;
}

a {
    text-decoration: none;
}

figure.seoHiddenImage {
    display: none;
}

section {
    position: relative;
    margin: 20px;
    padding: 20px;
}
section p:last-child {
    margin-bottom: 0;
}
section.light {
    border: 1px solid #F2EBFF;
    border-radius: 16px;
    /*border-color: #C0C0C0;*/
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.margin {
    margin: 20px;
}

.padding {
    padding: 20px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

#gblFaderDark {
    position: fixed;
    top: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #3E3E3E;
    opacity: 0.8;
    z-index: 1000;
}

/************************************************************************
* Buttons.
************************************************************************/
    .btn-login {
        position: absolute;
        display: inline-block;
        top: 6px;
        right: 10px;
        padding: 2px 12px;
        font-size: 14px;
        font-weight: 500;
        color: #D8963A;
    }
    .btn {
        border-radius: 25px;
        height: 50px;
        min-height: 50px;
    }
    .btn-block {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        text-align: center;
        border: 1px solid;
    }
    .btn-purple {
        color: #FFF;
        background: linear-gradient(212.49deg, #5230AE -17.95%, #411C91 96.05%);
        border-image-source: linear-gradient(217.88deg, #7057B3 6.61%, #3F3650 94.91%);
    }
    .btn-lavender {
        border: 1px solid #776598;
        background: #69568C;
        color: #FFF;
    }
    .btn-appstore {
        padding: 0;
        background-color: #69568C;
        border: 1px solid #776598;
        border-radius: 35px;
        height: 70px;
        margin: 20px 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
/***********************************************************************/

/************************************************************************
* div.breadcrumbs
************************************************************************/
    div.breadcrumbs {
        position: relative;
        width: 100%;
        height: auto;
        padding: 10px;
        background: #F1EFEF;
        border-bottom: 1px solid #A8A7B3;
        box-sizing: border-box;
    }
    div.breadcrumbs p {
        margin: 0;
        font-size: 20px;
        font-weight: 400;
        color: #47405B;
    }
    div.breadcrumbs a {
        color: #D8963A;
    }
/***********************************************************************/

/************************************************************************
* The video player.
************************************************************************/
    div.video-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        padding: 0;
        width: 100vw;
        height: 100vh;
        text-align: center;
        z-index: 1001;
    }
    div.trailer-player-wrap {
        position: relative;
        top: 60px;
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }
    .trailer-player {
        aspect-ratio: 16 / 9;
        width: 100%;
    }
    div.trailer-join {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        aspect-ratio: 16 / 9;
        width: 100%;
        background: black;
    }
    div.btnPlayer {
        z-index: 1;
    }

    button.btnTrailerJoin {
        padding: 20px 36px;
        font-weight: bold;
        color: #FFFFFF;
        font-size: 20px;
        background-color: #955EDB;
        border-radius: 48px;
        border: 0;
        cursor: pointer;
    }
    #btnPlayTrailer {
        padding: 10px 26px;
        font-weight: 500;
        color: #FFF;
        background-color: rgba(0, 0, 0, .54);
        border-radius: 48px;
        border: 0;
        cursor: pointer;
    }
    div.underTrailer {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        top: 20px;
    }
    button.btnTrailerJoin.underneath {
    }
    #btnTrailerPlayerClose {
        position: absolute;
        display: inline-block;
        top: 0px;
        right: 0px;
        padding: 10px 30px;
        font-size: 14px;
        font-weight: 500;
        color: #FFF;
        background-color: #505050;
        border-radius: 48px;
        z-index: 1002;
        cursor: pointer;
    }
/***********************************************************************/

/************************************************************************
* The signup form.
************************************************************************/
    div.signup_form     { position: relative; width: 100%; max-width: 360px; margin: 0; padding: 0 30px 10px 30px; z-index: 10; }

    div.signup_form div.not-in-usa                  { position: absolute; bottom: 124px; right: 30px; }
    div.signup_form span.not-in-usa                 { display: block; margin: 0px 10px 0px 0; font-size: 12px; text-align: right; color: black; cursor: pointer; z-index: 5; }
    div.signup_form div.elementBlock                { position: relative; margin: 20px auto; padding: 0; background: rgba(255, 255, 255, 0.1); border: 1px solid #5A5568; border-radius: 10px 0 0 10px; }
    div.signup_form div.elementBlock.plain          { display: flex; gap: 10px; margin-bottom: 10px; text-align: center; background: transparent; border: none; }
    div.signup_form span.chatButton                 { display: inline-block; flex-grow: 1; flex-basis: 50%; height: 40px; line-height: 40px; margin: 3px 1px; padding: 10px 10px; font-size: 14px; font-weight: 700; color: #FFFFFF; text-align: center; border-radius: 10px; border: 2px solid white; box-sizing: content-box; cursor: pointer; }
    div.signup_form span.chatButton i               { margin-right: 5px; vertical-align: middle; }
    div.signup_form span.chatButton.selected        { background-color: #9D56AB; border-color: #9D56AB; }
    div.signup_form div.elementBlock.countryBlock   { margin-bottom: 20px; }
    div.signup_form .formLabel                      { position: relative; display: inline-block; left: 15px; padding-right: 5px; color: #CAC9D7; line-height: 40px; font-size: 14px; font-weight: 300; }
    div.signup_form .formElement                    { position: relative; width: 100%; box-sizing: border-box; right: 0; height: 55px; line-height: 55px; padding: 0 10px; background: #FFFFFF; border-radius: 12px; }
    div.signup_form select                          { border: 0px solid; }
    div.signup_form div.elementSubmit               { margin: 10px auto; }
    div.signup_form div.termsLink                   { font-size: 12px; color: #C0C0C0; text-align: center; }
    div.signup_form div.termsLink a                 { color: #C0C0C0; text-decoration: underline; }
    div.signup_form div.signup-error                { padding: 15px; margin-bottom: 25px; border: 1px solid #F7674B; background: rgba(255,0,0,0.5); }
    div.signup_form div.signup-error, div.div.signup_form signup-error p { color: white; }
    ::placeholder { color: #808080; }
/***********************************************************************/

/************************************************************************
* section.img-box
************************************************************************/
    section.img-box {
        padding: 0;
        overflow: hidden;
    }
    section.img-box > img {
        width: 100%;
        object-fit: contain;
    }
    section.img-box div {
        padding: 20px;
    }
/***********************************************************************/

/************************************************************************
* section.main
************************************************************************/
    section.main {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 560px;
        background: #362A38;
        background: linear-gradient(180deg, rgba(20, 7, 56, 0) 20%, rgba(10, 3, 28, 0.85) 78%), url('https://aws-cf.onlinebootycall.com/browse-location/images/browse-location-default-hero-2.jpg') no-repeat left center;
        background-size: cover;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        box-sizing: border-box;
    }
    section.main img.logo-icon {
        margin-bottom: 10px;
    }
    section.main .logo-icon-container {
        text-align: left;
        width: 100%;
    }
    section.main div.main-top {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    section.main div.main-top p {
        margin-top: 20px;
        font-size: 16px;
        line-height: 20px;
        font-weight: 300;
        color: #FFF;
    }
    section.main div.main-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 20px;
    }
    section.main h1 {
        margin: 0 0 10px;
        line-height: normal;
    }

    section.main .stats {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 16px;
        gap: 10px;
    }
    section.main .stats .item {
        background: rgba(105, 86, 140, 0.4705882353);
        border: 1px solid rgba(119, 101, 152, 0.6);
        width: 48%;
        color: #FFF;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    section.main .stats .item div {
        font-size: 14px;
        font-weight: 300;
        line-height: 18px;
        letter-spacing: 0.2px;
        text-align: center;
    }
    section.main .stats .item div:first-child {
        font-size: 32px;
        font-weight: 700;
        line-height: 36px;
        text-align: center;
    }

    div.as-seen-on { margin: 25px auto 5px; }
    div.as-seen-on span.text { margin-right: 10px; color: #D8963A; }
    div.as-seen-on img { margin-right: 10px; height: 24px; opacity:0.5; vertical-align: middle; }
/***********************************************************************/

/************************************************************************
* section.tag-line
************************************************************************/
    section.tag-line .flex-container {
        display: flex;
        flex-direction: column;
    }
/***********************************************************************/

/************************************************************************
* section.big-list
************************************************************************/
    section.big-list {
        border-radius: 16px;
        overflow: hidden;
    }
    div.big-list {
        display: flex;
        gap: 0;
        flex-wrap: wrap;
    }
    div.big-list-item {
        flex-basis: 100%;
    }
    div.big-list-item a {
        display: inline-block;
        width: 90%;
        padding: 8px 10px;
        font-size: 14px;
        color: #47405B;
        font-weight: 300;
        line-height: 14px;
    }
    div.big-list div.big-list-item:hover a {
        background: #3D374E;
        color: #D8963A;
    }
/***********************************************************************/

/************************************************************************
* section.cheers
************************************************************************/
    section.cheers ul {
        margin-bottom: 15px;
        padding-left: 20px;
        list-style: disc;
    }
    section.cheers ul li {
        font-size: 14px;
    }
    section.cheers ol {
        margin-bottom: 15px;
        padding-left: 20px;
        list-style: auto;
    }
    section.cheers ol li {
        font-size: 14px;
    }
/***********************************************************************/

/************************************************************************
* section.featured
************************************************************************/
    section.featured {
    }

    div.miniprofile-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        align-content: space-between;
        width: 100%;
        margin: 0 auto;
    }
    div.miniprofile-wrapper div.miniprofile {
        position: relative;
        flex-basis: 110px;
        flex-grow: 1;
        max-width: calc((100% - 20px) / 2);
        margin: 0;
        padding: 0;
        text-align: left;
        border: 1px solid #F2EBFF;
        background-color: #FFF;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0px 4px 16px 0px rgba(74, 6, 160, 0.0588235294);
        container-type: inline-size;
    }
    div.miniprofile-wrapper div.miniprofile div.mp-photo {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        border: 1px solid #DCDBDF;
        overflow: hidden;
        cursor: pointer;
        z-index: 2;
    }
    div.miniprofile-wrapper div.miniprofile div.mp-photo img {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        aspect-ratio: 1;
        visibility: hidden;
        border: 0;
    }
    div.miniprofile-wrapper div.miniprofile div.mp-details {
        position: relative;
        padding: 10px;
        text-align: left;
        font-size: 9cqw;
        line-height: 13cqw;
    }
    div.miniprofile-wrapper div.miniprofile div.mp-details h3 {
        margin-bottom: 0;
        color: #8C4C99;
        font-size: inherit;
        line-height: inherit;
    }
    div.miniprofile-wrapper div.miniprofile div.mp-details div.mp-desc {
        color: #606060;
        font-size: inherit;
        line-height: inherit;
    }
/***********************************************************************/

/************************************************************************
* section.sneak-peek
************************************************************************/
    section.sneak-peek {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        background: linear-gradient(212.49deg, #6F54B5 -17.95%, #3B2A5E 96.05%);
        margin: 0;
        padding: 0 0 40px;
        border-radius: 16px;
        overflow: hidden;
    }
    section.sneak-peek .content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        z-index: 1;
    }
    section.sneak-peek .content .icon {
        margin-top: -45px;
    }
    section.sneak-peek h2 {
        margin-bottom: 8px;
        text-align: center;
    }

    section.sneak-peek div.photo-block {
        display: flex;
        position: relative;
        margin: 0;
        padding: 10px;
        background: rgb(0 0 0 / .2);
        border-radius: 16px;
    }
    section.sneak-peek div.photo-block div.flex-wrap {
        height: 80px;
    }
    section.sneak-peek div.photo-block div.flex-wrap + div {
        width: 220px;
    }
    section.sneak-peek div.photo-block img {
        position: relative;
        width: 80px;
        height: 80px;
        object-fit: cover;
        object-position: center center;
        border-radius: 12px;
    }
    section.sneak-peek div.sneak-flex {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    section.sneak-peek div.photo-block div.contact {
        font-size: 12px;
        color: white;
        font-weight: 400;
        text-align: center;
    }
/***********************************************************************/

/************************************************************************
* section.cityBlock
************************************************************************/
    section.cityBlock {
    }
    div.cityIdeas {
        margin-top: 10px;
    }
    div.cityIdeas div.cityIdea {
        padding: 10px;
        box-sizing: border-box;
    }
    div.cityIdeas div.cityIdea p.title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
    }
    div.cityIdeas div.cityIdea p.text {
        margin-bottom: 10px;
    }
    div.ideaTitleFrame p {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
    }

    div.ideaImageFrame {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 10px;
        border: 1px solid #A0A0A0;
        overflow: hidden;
    }
    div.ideaImageFrame img.cityImage {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        visibility: hidden;
    }
    div.ideaTextFrame p.text {
        margin-bottom: 10px;
    }
/***********************************************************************/

/************************************************************************
* section.review
************************************************************************/
    div.review {
        overflow: hidden;
        border-radius: 16px;
        border: 1px solid #F2EBFF;
        background-color: #FFF;
        box-shadow: 0px 4px 16px 0px rgba(74, 6, 160, 0.0588235294);
    }
    div.review .details {
        padding: 20px;
    }
    div.review .hero-image {
        width: 100%;
        height: 220px;
        overflow: hidden;
    }

    section.review .controls {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    section.review .controls h2 {
        flex-grow: 1;
        margin: 15px 0;
    }
    section.review .controls button {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        margin-left: 10px;
        height: 40px;
        width: 40px;
        background-color: #FFF;
        box-shadow: 0px 3px 23px 0px rgba(74, 6, 160, 0.0784313725);
        font-size: 24px;
        border: 0;
    }
    section.review .controls button.inactive {
        color: #E8E3F2;
    }
/***********************************************************************/

/************************************************************************
* section.location
************************************************************************/
/***********************************************************************/

/************************************************************************
* section.profiles
************************************************************************/
    section.profiles {
        margin: 0;
        padding: 0;
        height: 250px;
        overflow: hidden;
    }
    section.profiles .flex-container {
        width: 100%;
        display: flex;
        justify-items: center;
        flex-direction: column;
    }
    section.profiles .flex-container img {
        min-width: 375px;
        max-width: 425px;
        max-inline-size: none;
        max-block-size: none;
    }
/***********************************************************************/

/************************************************************************
* section.join
************************************************************************/
    section.join {
        margin: -105px 0 0 0;
        padding: 0;
        position: relative;
        z-index: 2;
        border-top-left-radius: 50px;
        background: #EEEBF7;
        text-align: center;
        overflow: hidden;
    }
    section.join .content {
        padding: 40px 20px 40px 20px;
    }
    section.join .content h2 {
        color: #22075A;
    }
    section.join .content p {
        text-align: center;
    }
/***********************************************************************/

/************************************************************************
* section.word-cloud
************************************************************************/
    section.word-cloud {
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 2;
        background: #EEEBF7;
        text-align: center;
        overflow: hidden;
    }
    section.word-cloud .cloud {
        position: relative;
        padding: 20px 20px 20px 20px;
        z-index: 2;
    }
    div.word-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        margin: 0;
        padding-bottom: 20px;
    }
    div.word-cloud a {
        display: inline-block;
        padding: 4px 12px;
        font-size: 14px;
        color: #47405B;
        box-sizing: border-box;
        border: 2px solid #47405B;
        background: white;
    }
/***********************************************************************/

/************************************************************************
* Random stuff
************************************************************************/
    .scroll-window::-webkit-scrollbar {
        display: none;
    }

    .scroll-window {
        padding: 0px 20px;
        width: 100%;
        overflow: scroll;
    }
    .scroll-window .scroll-container {
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 1500px;
        height: 400px;
        margin: 0 auto;
    }
    .scroll-window .scroll-container .scroll-item {
        width: 340px;
        height: 380px;
    }

    .screens::-webkit-scrollbar {
        display: none;
    }

    .screens {
        padding-bottom: 20px;
        overflow: scroll;
    }
    .screens > div {
        display: flex;
    }
    .screens > div > img {
        margin: 0 40px;
    }

    .big, .big-flex {
        visibility: hidden;
        display: none;
    }

    .small {
        visibility: visible;
        display: block;
    }

    .small-flex {
        visibility: visible;
        display: flex;
    }
/***********************************************************************/

/************************************************************************
* footer
************************************************************************/
    footer {
        position: relative;
        margin: 0;
        background-color: #EEEBF7;
        overflow: hidden;
    }
    footer div.footer-background {
        padding: 30px 20px 20px;
        background: linear-gradient(212.49deg, #6F54B5 -17.95%, #3B2A5E 96.05%);
        border-top-left-radius: 50px;
        overflow: hidden;
    }
    footer span.footer-h1 {
        text-align: center;
    }
    footer .get-app .flex-container p {
        text-align: center;
        color: #FFF;
    }
    footer .get-app .terms {
        position: relative;
        border-top: 1px solid rgba(123, 115, 140, 0.48);
        padding: 20px;
        z-index: 3;
    }
    footer .get-app .terms a {
        color: #7B738C;
    }
    footer .get-app .terms p {
        text-align: center;
    }
/***********************************************************************/

@media only screen and (min-width: 460px) {
    div.miniprofile-wrapper div.miniprofile {
        min-width: 126px;
        flex-basis: calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}

/************************************************************************
* MEDIA QUERY: min-width: 800px
************************************************************************/
@media only screen and (min-width: 800px) {
    /************************************************************************
    * Random stuff
    ************************************************************************/
        .small, .small-flex {
            visibility: hidden;
            display: none;
        }
        .big {
            display: block;
            visibility: visible;
        }
        .big-flex {
            display: flex;
            visibility: visible;
        }

        p {
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 26px;
            letter-spacing: -0.2px;
            font-feature-settings: "ss04" on;
            color: #7B738C;
        }

        .icon {
            width: 80px;
            height: 80px;
            background: #FFF;
            border-radius: 40px;
            box-shadow: 0px 3px 23px 0px rgba(74, 6, 160, 0.0784313725);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        .icon img {
            width: 35px;
            height: 35px;
        }
    /***********************************************************************/

    /************************************************************************
    * The video player.
    ************************************************************************/
        div.btnPlayer {
        }

    /************************************************************************
    * section.main
    ************************************************************************/
        section.main {
            background-position: center 25%;
        }
        section.main .logo-icon-container {
            text-align: left;
        }
        section.main img.logo-icon {
            margin: 0;
        }
        section.main div.stats {
            width: 400px;
        }
        section.main a.btn {
            width: 400px;
        }
        section.main h1 {
            font-size: 60px;
        }
    /***********************************************************************/

    /************************************************************************
    * section.tag-line
    ************************************************************************/
        section.tag-line {
            max-width: 1200px;
            margin: 40px auto;
            padding: 40px;
        }
        section.tag-line .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        section.tag-line .flex-container > div {
            width: 45%;
        }
        section.tag-line .flex-container a.btn.big-flex {
            width: 320px;
            margin-top: 30px;
        }
        section.tag-line .flex-container h2 {
            font-style: normal;
            font-weight: 700;
            font-size: 54px;
            line-height: 60px;
            letter-spacing: -0.02em;
            color: #22075A;
            margin-bottom: 10px;
        }
    /***********************************************************************/

    /************************************************************************
    * section.big-list
    ************************************************************************/
        section.big-list {
            max-width: 1200px;
            margin: 40px auto;
            padding: 40px;
        }
        div.big-list-item {
            flex-basis: 25%;
        }
    /***********************************************************************/

    /************************************************************************
    * section.cheers
    ************************************************************************/
        section.cheers {
            display: flex;
            flex-direction: row;
            max-width: 1200px;
            margin: 40px auto;
        }
        section.cheers > img {
            width: 50%;
            height: auto;
        }
        section.cheers h2 {
            font-style: normal;
            font-weight: 700;
            font-size: 54px;
            line-height: 60px;
            letter-spacing: -0.02em;
            color: #22075A;
        }
        section.cheers > div {
            padding: 40px;
        }
        section.cheers ol li {
            font-weight: 400;
            font-size: 18px;
            line-height: 26px;
            letter-spacing: -0.2px;
            color: #7B738C;
        }
    /***********************************************************************/

    /************************************************************************
    * section.featured
    ************************************************************************/
        section.featured {
            max-width: 1200px;
            margin: 40px auto;
            padding: 40px;
        }
        div.miniprofile-wrapper div.miniprofile {
            flex-basis: calc((100% - 60px) / 4);
            max-width: calc((100% - 60px) / 4);
        }
        div.miniprofile-wrapper div.miniprofile div.mp-details {
            font-size: 8cqw;
            line-height: 13cqw;
        }
    /***********************************************************************/

    /************************************************************************
    * section.sneak-peek
    ************************************************************************/
        section.sneak-peek {
            position: relative;
            background: linear-gradient(212.49deg, #6F54B5 -17.95%, #3B2A5E 96.05%);
            margin: 0;
            padding: 0 0 30px;
            border-radius: 16px;
            overflow: hidden;
        }
        section.sneak-peek .content {
            padding: 20px;
        }
        section.sneak-peek .content .icon {
            margin-top: -75px;
        }
        section.sneak-peek .content a {
            margin-bottom: 40px;
        }
        section.sneak-peek h2 {
            font-style: normal;
            font-weight: 700;
            text-align: center;
            letter-spacing: -0.02em;
            color: #FFFFFF;
        }
        section.sneak-peek .screens {
            padding-bottom: 0;
        }
        section.sneak-peek .screens > div {
            display: flex;
            justify-content: center;
        }
        section.sneak-peek .screens > div > img {
            width: 360px;
            margin: 0 40px;
        }
        section.sneak-peek .screens > div > img:last-child {
            margin: 0;
        }
    /***********************************************************************/

    /************************************************************************
    * section.cityBlock
    ************************************************************************/
        section.cityBlock {
            max-width: 1200px;
            margin: 40px auto;
            padding: 40px;
        }
        div.cityIdeas {
            max-width: 620px;
            margin-left: auto;
            margin-right: auto;
        }
        div.cityIdeas div.cityIdea {
            margin-bottom: 20px;
        }
        div.cityIdeas div.cityIdea p.title {
            margin-bottom: 10px;
            font-size: 18px;
        }
        div.ideaTitleFrame {
            float: right;
            width: 47%;
        }
        div.ideaTitleFrame p {
            margin-bottom: 10px;
            font-size: 18px;
        }

        div.ideaImageFrame {
            float: left;
            width: 50%;
            aspect-ratio: 4/3;
        }
        div.ideaImageFrame img.cityImage {
            aspect-ratio: 4/3;
        }
        div.ideaTextFrame {
            float: right;
            width: 47%;
        }
    /***********************************************************************/

    /************************************************************************
    * section.review
    ************************************************************************/
        section.review {
            max-width: 1200px;
            margin: 40px auto;
            padding: 20px;
        }
        section.review p {
            font-size: 16px;
        }
        section.review .scroll-container {
            height: auto;
            margin-bottom: 20px;
        }
        section.review .scroll-container .scroll-item {
            height: auto;
        }
        section.review .scroll-container .scroll-item .details {
            padding: 40px;
        }
    /***********************************************************************/

    /************************************************************************
    * section.location
    ************************************************************************/
        section.location {
            max-width: 1200px;
            margin: 40px auto;
            padding: 40px;
        }
        section.location .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        section.location .flex-container > div {
            width: 48%;
        }
        section.location .flex-container h2 {
            font-style: normal;
            font-weight: 700;
            font-size: 54px;
            line-height: 60px;
            letter-spacing: -0.02em;
            color: #22075A;
            margin-bottom: 40px;
        }
    /***********************************************************************/

    /************************************************************************
    * section.relax
    ************************************************************************/
        section.relax {
            display: flex;
            flex-direction: row;
            max-width: 1200px;
            margin: 40px auto;
        }
        section.relax > img {
            width: 50%;
            height: auto;
        }
        section.relax h2 {
            font-style: normal;
            font-weight: 700;
            font-size: 54px;
            line-height: 60px;
            letter-spacing: -0.02em;
            color: #22075A;
        }
        section.relax > div {
            padding: 40px;
        }
    /***********************************************************************/

    /************************************************************************
    * section.profiles
    ************************************************************************/
        section.profiles {
            margin: 0;
            padding: 0;
            height: 550px;
            overflow: hidden;
        }
        section.profiles .flex-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        section.profiles .flex-container img {
            height: 700px;
            width: 1580px;
            max-inline-size: none;
            max-block-size: none;
        }
    /***********************************************************************/

    /************************************************************************
    * section.join
    ************************************************************************/
        section.join .content {
            padding-top: 100px;
            padding-bottom: 90px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        section.join .content p {
            font-size: 24px;
            margin: 40px 0;
        }
        section.join .content a.btn {
            width: 320px;
        }
        section.join .content h2 {
            font-style: normal;
            font-weight: 700;
            font-size: 120px;
            line-height: 132px;
            text-align: center;
            letter-spacing: -0.5px;
            color: #22075A;
        }
    /***********************************************************************/

    /************************************************************************
    * section.word-cloud
    ************************************************************************/
        div.word-cloud {
            max-width: 780px;
            margin: 0 auto;
            padding-bottom: 30px;
        }
    /***********************************************************************/

    /************************************************************************
    * footer
    ************************************************************************/
        footer > .flex-container {
            padding: 100px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        footer .get-app > .flex-container .text {
            width: 68%;
        }
        footer span.footer-h1 {
            font-style: normal;
            font-weight: 700;
            font-size: 54px;
            line-height: 60px;
            letter-spacing: -0.5px;
            color: #FFFFFF;
            text-shadow: 0px 1px 4px rgba(110, 1, 188, 0.04);
        }
        footer .get-app > .flex-container .text p {
            font-style: normal;
            font-weight: 400;
            font-size: 24px;
            line-height: 36px;
            color: #FFFFFF;
        }
        footer .get-app > .flex-container .buttons {
            width: 30%;
        }
        footer .get-app .terms.big {
            display: flex;
            justify-content: space-between;
            padding: 40px;
        }
        footer .get-app .terms.big p, footer .get-app .terms.big a {
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            letter-spacing: -0.2px;
            font-feature-settings: "ss04" on;
            color: rgba(255, 255, 255, 0.4);
        }
    /***********************************************************************/
}

/*# sourceMappingURL=index.css.map */