/* -------------------------*/
/* VARIABLES */
/* -------------------------*/
:root {
    --neutral100: #111827;
    --neutral80: #1F2937;
    --neutral50: #6B7280;
    --neutral40: #9CA3AF;
    --neutral20: #E5E7EB;
    --neutral05: #F9FAFB;

    --primary50: #2D5BFF;
}

/*.introContent {*/
/*    display: flex;*/
/*    height: 100vh;*/
/*    width: 80vw;*/
/*    margin: auto;*/
/*    gap: 7vw;*/

/*}*/
/*.introLeftContainer {*/

/*}*/

/* -------------------------*/
/* Navigation */
/* -------------------------*/

#bx-toolbar {
    display: block!important;
}

/* -------------------------*/
/* INTRO */
/* -------------------------*/
.introContainerOutter {
    position: relative;
    /*padding-bottom: 40px;*/
    /*height: 100vh;*/
}
.introContainer {
    /*position: absolute;*/
    /*height: 100%;*/
    width: 100%;
    display: table;
}
.introContent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.introContentInner {
    display: flex;
    margin: auto;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 0px 100px;
}
.introLeftContainer {
    margin-bottom: 30px;
    width: 45%;
}
.newFeaturesButton {
    color: white;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    border-radius: 50px;
    background: var(--primary50);
    padding: 0.125rem 0.625rem;
    width: fit-content;
    display: none;
}
.introHeadline {
    font-size: 64px;
    font-weight: 500;
    line-height: 98px;
    color: var(--neutral100);
    margin: 0.625rem 0;
    text-align: left;
}
.introSubhead {
    color: var(--neutral100);
    font-size: 36px;
    line-height: 40px;
    font-weight: 400;
    text-align: left;
}
.getStartedButton {
    margin-top: 3.75rem;
}
.getStartedButton.mobile {
    display: none;
}
.introRightContainer video {
    height: auto;
    max-width: 99%;
}
.introRightContainer {
    padding: 10px 10px;
}

/* -------------------------*/
/* TESTIMONIALS */
/* -------------------------*/
.testimonialsContainer {
    background-color: #111827;
    color: var(--neutral05);
    padding: 4vw 8vw 5vw 8vw;
}
.testimonialHeading {
    font-weight: 500;
    font-size: 2.778vw;
    line-height: 3.333vw;
    border-bottom: 1px solid var(--neutral05);
    padding-bottom: 0.75vw;
}
.testimonialContent {
    display: flex;
    justify-content: space-around;
}
.begQuote {
    font-size: 8.889vw;
    line-height: 9.444vw;
    float: left;
    height: 100%;
}
.testimonialText {
    font-size: 1.667vw;
    line-height: 2.222vw;
    font-weight: 400;
    width: 31.667vw;
    height: auto;
    margin-top: 4vw;
}
.testimonialUser {
    font-weight: 500;
    font-size: 1.389vw;
    line-height: 1.944vw;
    margin: 1.389vw 0 0.694vw 0;
}
.testimonialLoc {
    color: var(--neutral40);
    font-weight: 400;
    font-size: 1.250vw;
    line-height: 1.944vw;
}


/* -------------------------*/
/* FEATURES */
/* -------------------------*/
.featuresContainer {
    height: 100%;
    padding-top: 20px;
}
.featuresHeading {
    border-bottom: 1px solid var(--neutral20);
    font-size: 2.782vw;
    line-height: 3.333vw;
    margin: auto 8vw;
    padding-bottom: 0.75vw;
}
.featuresMainContent {
    margin: 4.514vw 0;
}
.featuresMacbookImageContainer {
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.featuresMacbookImageContainer img {
    width: 35vw;
}
.featuresMacbookImageContainer.mobile {
    display: none;
}
.featuresGrid {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 21.528vw 21.528vw;
    justify-content: center;
    width: 100%;
    row-gap: 2.778vw;
    column-gap: 1.806vw;
}
.icons {
    height: 2.778vw;
}
.featuresDescriptions {
    font-size: 1.667vw;
    line-height: 2.222vw;
    font-weight: 500;
    color: var(--neutral100);
    margin: 0.903vw 0;
}
.featuresText {
    font-size: 1.389vw;
    line-height: 1.944vw;
    font-weight: 400;
    color: var(--neutral50);
}
.featuresGetStartedButton {
    margin-top: 30px;
    margin-bottom: 40px;
}

/* -------------------------*/
/* GO PRO */
/* -------------------------*/
.goProContainer {
    background: #111827;
    color: var(--neutral05);
    padding: 4vw 8vw 1vw 8vw;
}
.goProHeading {
    font-weight: 500;
    font-size: 2.778vw;
    line-height: 3.333vw;
    border-bottom: 1px solid var(--neutral05);
    padding-bottom: 0.75vw;
}
.goProGrid {
    display: flex;
    margin: 40px 0;
}
.goProGridMobile {
    display: none;
}
.goProGrid > div {
    /*width: 10.417vw;*/
    text-align: center;
    flex: 1;
    padding: 0 7.361vw;
}
.goProGrid > div + div {
    border-left: 1px solid var(--neutral50);
    height: 6.944vw;
}
.goProIcons {
    height: 2.500vw;
}
.goProText {
    font-weight: 400;
    font-size: 0.972vw;
    line-height: 1.389vw;
    margin-top: 0.5vw;
}
.goProGetStartedButton {
    display: flex;
    justify-content: center;
}
.goProGetStartedButton a.bx-btn {
    color: var(--neutral100) !important;
    background: white;
    float: unset;
    width: fit-content;
}
/* -------------------------*/
/* UPGRADE */
/* -------------------------*/
.upgradeContainer {
    padding: 4vw 11vw 1vw 8vw;
    height: 35.6vw;
}
.upgradeContainer.mobile {
    display: none;
}
.upgradeHeading {
    font-weight: 500;
    font-size: 2.778vw;
    line-height: 3.333vw;
    border-bottom: 1px solid var(--neutral20);
    padding-bottom: 0.75vw;
    color: var(--neutral100);
}
.upgradeMainContent {
    display: flex;
}
.upgradeListContainer ul {
    display: flex;
    flex-direction: column;
    height: 25vw;
    justify-content: space-evenly;
}
.upgradeListContainer li {
    display: flex;
}
.upgradeStar {
    font-weight: 400;
    font-size: 2.500vw;
    line-height: 3.056vw;
    color: var(--neutral80);
    padding-right: 1vw;
    border-right: 1px solid var(--neutral20);

}
.upgradeText {
    font-weight: 300;
    font-size: 0.972vw;
    line-height: 1.389vw;
    color: var(--neutral80);
    margin: auto 0;
    padding-left: 1vw;
}
.upgradeText span {
    font-weight: 500;
    font-size: 1.111vw;
    line-height: 1.667vw;
}
.upgradeTextHeaderMobile {
    display: none;
}
.upgradeiPadContainer {
    position: relative;
}
.upgradeiPadContainer img {
    position: absolute;
    width: 55.556vw;
    top: -9.444vw;
    left: -7.778vw;
}

/* -------------------------*/
/* PLATFORM */
/* -------------------------*/
.platformContainer {
    background: #111827;
    padding: 1.25vw 0;
}
.platformText {
    text-align: center;
    color: var(--neutral05);
    font-weight: 500;
    font-size: 1.944vw;
    line-height: 2.500vw;
    padding-bottom: 1.25vw;
}
.platformButton {
    display: flex;
    justify-content: center;
}
.platformButton a.bx-btn {
    color: var(--neutral100) !important;
    background: white;
    float: unset;
    width: fit-content;
}

/* -------------------------*/
/* Artscapy video */
/* -------------------------*/

.introVideo {
    padding: 40px 174px;
    text-align: center;
}

.introVideo video {
    width: 80%;
    height: auto;
}

/* -------------------------*/
/* MOBILE */
/* -------------------------*/
@media only screen and (max-device-width: 480px) {
    .introContainerOutter {
        padding-bottom: 0px;
    }
    .introContent {
        display: unset;
    }
    .introContentInner {
        flex-direction: column;
        gap: unset;
        padding: 0px 20px;
        align-items: flex-start;
        max-width: 100vw;
        box-sizing: border-box;
    }
    .introLeftContainer {
        width: unset;
    }
    .newFeaturesButton {
        display: none;
    }
    .introHeadline {
        font-size: 8.411vw;
        line-height: 10.280vw;
    }
    .introSubhead {
        font-size: 4.673vw;
        line-height: 6.542vw;
        width: 83vw;
    }
    .getStartedButton.desktop {
        display: none;
    }
    .getStartedButton.mobile {
        display: block;
    }
    .introRightContainer {
        padding: 10px 0 10px;
    }
    .introRightContainer img {
        max-width: 95vw;
    }
    .getStartedButton.mobile {
        margin: auto;
    }

    /* -------------------------*/
    /* TESTIMONIALS */
    /* -------------------------*/
    .testimonialHeading {
        font-size: 6.542vw;
        line-height: 8.411vw;
        padding: 6vw 0;
    }
    .testimonialContent {
        overflow-x: scroll;
        overflow-y: hidden;
        justify-content: unset;
        padding: 5.607vw 0;
    }
    .begQuote {
        font-size: 14.953vw;
        line-height: 15.888vw;
    }
    .testimonialText {
        font-size: 3.271vw;
        line-height: 4.673vw;
        width: 69vw;
        padding-top: 1.168vw;
    }
    .testimonialUser, .testimonialLoc {
        font-size: 3.738vw;
        line-height: 5.607vw;
    }

    /* -------------------------*/
    /* FEATURES */
    /* -------------------------*/
    .featuresContainer {
        margin-top: 10px;
    }
    .featuresHeading {
        font-size: 6.542vw;
        line-height: 8.411vw;
        padding-bottom: 3vw;
    }
    .featuresMacbookImageContainer.desktop {
        display: none;
    }
    .featuresGrid {
        grid-template-columns: 38vw 38vw;
        row-gap: 12vw;
        padding: 5vw 0;
    }
    .icons {
        height: 8vw;
    }
    .featuresDescriptions {
        font-size: 4.206vw;
        line-height: 5.607vw;
        margin: 3.2vw 0;
    }
    .featuresText {
        font-size: 3.738vw;
        line-height: 5.607vw;
    }
    .featuresGetStartedButton a {
        font-size: 4.673vw;
    }
    .featuresGetStartedButton .bx-btn {
        height: unset !important;
        padding: 1vw 5vw;
    }
    .featuresMacbookImageContainer.mobile {
        display: block;
        text-align: center;
        padding: 7vw 0;
    }
    .featuresMacbookImageContainer img {
        width: 77.907vw;
    }

    /* -------------------------*/
    /* GO PRO */
    /* -------------------------*/
    .goProContainer {
        padding: 5vw 8vw 10vw 8vw;
    }
    .goProHeading {
        font-size: 6.542vw;
        line-height: 8.411vw;
        padding: 6vw 0;
    }
    .goProGrid {
        display: none;
    }
    .goProGridMobile {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 14.019vw 0;
        gap: 6.542vw;
    }
    .goProGridMobile > div {
        width: 38.5vw;
        text-align: center;
    }
    .goProIconsMobile {
        height: 8.411vw;
        margin-bottom: 3.271vw;
    }
    .goProTextMobile {
        font-weight: 500;
        font-size: 4.206vw;
        line-height: 5.607vw;
    }
    .goProGetStartedButton a {
        font-weight: 300;
        font-size: 4.673vw;
        line-height: 6.542vw;
    }
    .goProGetStartedButton .bx-btn {
        height: unset !important;
        padding: 1vw 5vw;
    }


    /* -------------------------*/
    /* UPGRADE */
    /* -------------------------*/
    .upgradeContainer.desktop {
        display: none;
    }
    .upgradeContainer.mobile {
        display: block;
        height: fit-content;
    }
    .upgradeHeading {
        font-size: 6.542vw;
        line-height: 8.411vw;
        padding: 6vw 0;
    }
    .upgradeMainContent {
        flex-direction: column;
    }
    .upgradeListContainer {
        display: block;
        text-align: center;
    }
    .upgradeListContainer > div {
        border-bottom: 1px solid var(--neutral20);
        padding: 8.178vw 0;
    }
    .upgradeStar {
        border-right: unset;
        font-size: 7.477vw;
        line-height: 9.346vw;
    }
    .upgradeTextHeaderMobile {
        display: block;
        font-weight: 500;
        font-size: 4.206vw;
        line-height: 5.607vw;
        color: var(--neutral100);
        padding: 1.402vw 0;
    }
    .upgradeTextMobile {
        font-weight: 300;
        font-size: 3.738vw;
        line-height: 5.607vw;
    }
    .upgradeiPadContainerMobile img {
        width: 92vw;
        margin-left: -4vw;
    }

    /* -------------------------*/
    /* PLATFORM */
    /* -------------------------*/
    .platformContainer {
        padding: 9vw;
    }
    .platformText {
        font-size: 4.206vw;
        line-height: 5.607vw;
        padding-bottom: 4vw;
    }
    .platformButton a {
        font-weight: 300;
        font-size: 4.673vw;
        line-height: 6.542vw;
    }
    .platformButton .bx-btn {
        height: unset !important;
        padding: 1vw 6vw;
    }

    /* -------------------------*/
    /* Artscapy video */
    /* -------------------------*/
    .introVideo {
        padding: 40px 35px;
    }

    .introVideo video {
        width: 100%;
        height: auto;
    }
}
@media only screen and (max-device-width: 380px) {
    .introHeadline {
        font-size: 8vw;
        line-height: 9.28vw;
    }
    .introSubhead {
        font-size: 4vw;
        line-height: 5.542vw;
    }
    .introRightContainer {
        padding: 8vw 0;
    }
    .introRightContainer img {
        /*max-width: 57vw;*/
    }
}