:root {

    /* widths for rows and containers
     */
    --width-full     : 100%;
    --width-max      : 1200px;
    --width-wide     : 1400px;
    --width-wider    : 1600px;
    --width-widest   : 1800px;
    --width-narrow   : 1000px;
    --width-narrower : 800px;
    --width-grid-max : var(--width-max);

    /* gutter
     */
    --gutter         : 2.2rem;
}

/* on medium screen devices
 */
@media screen and (max-width: 1200px) {
    :root {
        --gutter : 2rem;
    }
}

/* on mobile devices
 */
@media screen and (max-width: 600px) {
    :root {
        --gutter : 1rem;
    }
}

/* ===================================================================
 * # INTRO
 *
 *
 * ------------------------------------------------------------------- */
.s-intro {
    z-index          : 3;
    background-color : black;
    width            : 100%;
    height           : 100vh;
    min-height       : calc(25.5 * var(--space));
    overflow         : hidden;
    position         : relative;
}

/* --------------------------------------------------------------------
 * ## intro background
 * -------------------------------------------------------------------- */
.s-intro__bg {
    display             : block;
    position            : absolute;
    top                 : 0;
    left                : 0;
    right               : 0;
    bottom              : 0;
    width               : 100%;
    height              : 100%;
    background-image    : url(../assets/hero-bg-3000.jpg);
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
}

.s-intro__bg::before {
    display        : block;
    content        : "";
    position       : absolute;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    width          : 100%;
    height         : 100%;
    background     : black;
    pointer-events : none;
    opacity        : 0.2;
}

.s-intro__bg::after {
    display        : block;
    content        : "";
    position       : absolute;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    width          : 100%;
    height         : 100%;
    background     : linear-gradient(0deg, black 15%, rgba(0, 0, 0, 0) 100%);
    pointer-events : none;
    opacity        : 0.3;
}

/* --------------------------------------------------------------------
 * ## intro content
 * -------------------------------------------------------------------- */
.s-intro__content {
    --right-block-width : 360px;
    z-index             : 2;
    align-items         : flex-end;
    justify-content     : space-between;
    max-width           : 1400px;
    height              : 100%;
    font-weight         : 300;
    color               : white;
    padding-top         : 20vh;
    padding-bottom      : 9.2rem;
    position            : relative;
}

.s-intro__content-inner {
    display         : flex;
    align-items     : flex-start;
    justify-content : space-between;
}

.s-intro__content-left,
.s-intro__content-right {
    flex : none;
}

.s-intro__content-left {
    width         : calc(100% - var(--right-block-width) - var(--gutter));
    padding-right : calc(var(--gutter) * 2);
}

.s-intro__content-right {
    width       : var(--right-block-width);
    padding-top : var(--vspace-1);
}

.s-intro__content-desc {
	padding-bottom : 15px;
    margin-bottom : var(--vspace-0_625);
}

.s-intro__content-title {
    --text-title-size : 8.8rem;
    --text-multiplier : 1;
    font-weight       : 1000;
    font-size         : xxx-large;
    line-height       : 1.227;
    color             : white;
    margin-top        : 0;
}

.s-intro__content-buttons {
    #display : flex;
}

.s-row {
	width: 92%;
    max-width: var(--width-grid-max);
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
}

.s-column {
    display: block;
    flex: 1 1 0%;
    padding: 0 var(--gutter);
}

.s-lg-12 {
    flex: none;
    width: 100%;
}

.s-intro__content-btn {
    --btn-height     : calc(var(--vspace-btn) - 1rem);
    font-size        : calc(var(--text-size) * 0.8889);
    background-color : white;
    border-color     : white;
    margin-right     : var(--vspace-1);
    margin-bottom    : 0;
}

.s-intro__content-video-btn {
    height           : calc(1.6875 * var(--space));
    width            : calc(1.6875 * var(--space));
    background-color : white;
    border-radius    : 50%;
    display          : flex;
    align-items      : center;
    justify-content  : center;
}

.s-intro__content-video-btn svg {
    height    : var(--vspace-1);
    width     : var(--vspace-1);
    transform : translate(2px, 0);
}

.s-intro__content-video-btn svg path {
    fill : var(--color-text-dark);
}

.s-intro__content-video-btn:focus,
.s-intro__content-video-btn:hover {
    background-color : var(--color-1);
}

.s-intro__content-video-btn:focus svg path,
.s-intro__content-video-btn:hover svg path {
    fill : white;
}

/* --------------------------------------------------------------------
 * ## intro social
 * -------------------------------------------------------------------- */
.s-intro__social {
    z-index    : 2;
    list-style : none;
    margin     : 0;
    position   : absolute;
    right      : 4.4rem;
    bottom     : calc(9.6rem + var(--vspace-1));
}

.s-intro__social li {
    padding-left  : 0;
    line-height   : 1;
    margin-bottom : 1rem;
}

.s-intro__social svg {
    height : var(--vspace-0_75);
    width  : var(--vspace-0_75);
}

.s-intro__social svg path {
    fill : white;
}

/* --------------------------------------------------------------------
 * ## intro scroll
 * -------------------------------------------------------------------- */
.s-intro__scroll {
    z-index  : 2;
    position : absolute;
    right    : 4.2rem;
    bottom   : var(--vspace-1);
}

.s-intro__scroll svg {
    height : var(--vspace-0_875);
    width  : var(--vspace-0_875);
}

.s-intro__scroll svg path {
    fill : white;
}

/* --------------------------------------------------------------------
 * ## intro transitions
 * -------------------------------------------------------------------- */
.s-header__inner,
.s-intro__content-left,
.s-intro__content-right,
.s-intro__social,
.s-intro__scroll {
    transition-timing-function : cubic-bezier(0.28, 0.12, 0.22, 1);
    transition-duration        : 0.6s;
    transition-delay           : 0s;
    #opacity                    : 0;
}

.s-header__inner {
    transition-property : opacity;
}

.s-intro__content-left,
.s-intro__content-right {
    transition-property : opacity, transform;
    # transform           : translate(0, 100%);
}

.s-intro__social,
.s-intro__scroll {
    transition-property : opacity, transform;
    transform           : translate(0, 100%);
}

.no-js .s-header__inner,
.no-js .s-intro__content-left,
.no-js .s-intro__content-right,
.no-js .s-intro__social,
.no-js .s-intro__scroll,
.ss-show .s-header__inner,
.ss-show .s-intro__content-left,
.ss-show .s-intro__content-right,
.ss-show .s-intro__social,
.ss-show .s-intro__scroll {
    opacity   : 1;
    transform : translate(0, 0);
}

.no-js .s-intro__content-left,
.ss-show .s-intro__content-left {
    transition-delay : 0.3s;
}

.no-js .s-intro__content-right,
.ss-show .s-intro__content-right {
    transition-delay : 0.6s;
}

.no-js .s-intro__social,
.no-js .s-intro__scroll,
.ss-show .s-intro__social,
.ss-show .s-intro__scroll {
    transition-delay : 0.9s;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * intro
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {
    .s-intro__content {
        max-width : 1160px;
    }

    .s-intro__content-title {
        --text-multiplier : 0.95;
    }
}

@media screen and (max-width: 1400px) {
    .s-intro__content {
        max-width : 1040px;
    }

    .s-intro__content-right {
        padding-top : var(--vspace-0_625);
    }

    .s-intro__content-title {
        --text-multiplier : 0.82;
    }

    .s-intro__content-title br {
        display : none;
    }
}

@media screen and (max-width: 1200px) {
    .s-intro__content {
        max-width : 960px;
    }

    .s-intro__content-title {
        --text-multiplier : 0.76;
    }
}

@media screen and (max-width: 1100px) {
    .s-intro__content {
        max-width : 900px;
    }

    .s-intro__content-inner {
        flex-direction  : column;
        justify-content : flex-start;
        max-width       : 640px;
        padding-right   : 8rem;
    }

    .s-intro__content-left,
    .s-intro__content-right {
        width : 100%;
    }

    .s-intro__content-right {
        padding-top : 0;
        max-width   : var(--right-block-width);
    }
}

@media screen and (max-width: 700px) {
    .s-intro__content-title {
        --text-multiplier : 0.65;
    }
}

@media screen and (max-width: 600px) {
    .s-intro__content-inner {
        padding-right : 4rem;
    }

    .s-intro__content-title {
        --text-multiplier : 0.56;
    }

    .s-intro__social {
        right : 4rem;
    }

    .s-intro__scroll {
        right : 3.8rem;
    }
}

@media screen and (max-width: 500px) {
    .s-intro__content-inner {
        padding-right : var(--gutter);
    }

    .s-intro__social {
        display : none;
    }
}

@media screen and (max-width: 400px) {
    .s-intro__content-inner {
        padding-right : 0;
    }

    .s-intro__content-title {
        font-size : var(--text-xxxl);
    }

    .s-intro__content-btn {
        margin-right : var(--vspace-0_75);
    }

    .s-intro__scroll {
        right : 2.4rem;
    }

    .s-intro__scroll svg {
        height : var(--vspace-0_75);
        width  : var(--vspace-0_75);
    }
}