/* Custom CSS by Gage Sorrell @ Sorrell Web Design. */

/** The block which on the landing page which contains the email sign-up form. */
.landing-page-email-sign-up
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: no-wrap;
    margin-top: 1rem;

    transition: background-color 0.5s ease-in-out;
}

.text-span.sign-up-focused-title
{
    background: white !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
}

.landing-page-email-sign-up input[type="email"]
{
    margin: 0.25rem;
    margin-left: 0;
    height: 2.75rem;
    padding: 0.5em;
    border: 0.1em solid #DFDFDF;
    border-radius: 0.25em;
}

.landing-page-email-sign-up input[type="submit"]
{
    margin: 0.25rem;
    font-weight: 600;
    border: 0.1em solid cyan;
    border-radius: 0.25em !important;
    height: 2.75rem;
    background-color: #FFFFFFFF;
    color: #00EEEE;
    text-transform: uppercase;
    letter-spacing: 0.125em;
}

.landing-page-email-sign-up input[type="submit"]
{
    box-shadow: none;
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.landing-page-email-sign-up.sign-up-focused input[type="submit"]
{
    border-color: #00EEEE;
}

.landing-page-email-sign-up input[type="submit"]:hover
{
    box-shadow: 0 0  1em 0 #00000044;
    background-color: #00000009;
}

.landing-page-email-sign-up input[type="submit"]:active
{
    box-shadow: 0 0  1em 0 #00000044;
    background-color: #00000009;
} 

.top-form.sign-up-focused .landing-page-email-sign-up input[type="submit"]:hover
{
    color: white !important;
}

.top-form.sign-up-focused .landing-page-email-sign-up input[type="submit"]:active
{
    color: white !important;
} 

@media screen and (max-width: 768px)
{
    .landing-page-email-sign-up input[type="email"]
    {
        max-width: 12rem;
    }
}

.top-form
{
    transition-property: background-color, color, box-shadow;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
    padding: 1rem;
}


.sign-up-focused
{
    background-color: #00EEEE;
    color: white;
    box-shadow: 0 0 1rem 0.5rem #00000022;
    border-radius: 0.5rem;
}

.sign-up-focused-title
{
    color: white;
}


html, body
{
    overflow: hidden;
    scroll-behavior: smooth;
}

*
{
    box-sizing: border-box;
}

/** The class which the same div. */
.plax-viewport
{
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    background-color: white;
}

.parallax
{
    box-sizing: border-box;
    /* max-width: 100%; */
    height: 50rem;
    width: 100%;
    /* Since the parallax elements still consume space, we set the margin to undo
       the height of this parallax element making it essentially consume 0 space.
    */
    margin-bottom: -50rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(/images/ParallaxBackgroundSquare.png);

    box-shadow: inset 0 0 0 0 #00000000, inset 0 0 1rem 1rem white;
    transition: box-shadow 0.5s ease-in-out;
}

@media screen and (max-width: 768px)
{
    .parallax
    {
        height: 100vh;
        margin-bottom: -100vh;
    }
}

.plax-foreground
{
    background-color: white !important;
    transition-property: background-color, color !important;
    transition-duration: 0.333s !important;
    transition-timing-function: ease-in-out !important;

    position: relative;
    z-index: 9999;
}

.plax-foreground.footer-2
{
    background-color: #00EEEE !important;
}

.section-dark-theme
{
    background-color: #121212 !important;
    color: white !important;
}

.section-dark-theme.parallax
{
    box-shadow: inset 0 0 1rem 1rem black !important;
}

.navigation.section-dark-theme
{
    background-color: #202020 !important;
    box-shadow: 0 0 0.5rem 0.5rem #00000044;
}

.section-dark-theme .nav-menu-mobile
{
    background-color: black !important;
    border-radius: 0 !important;
}

.section-dark-theme #StubbornButton
{
    background-color: black;
    border-radius: 0;
}

.section-dark-theme *:not(.subtitle,.footer-2)
{
    color: white !important;
    opacity: 1;
}

.section-dark-theme .slide-base
{
    background-color: #121212;
    transition: background-color 0.333s ease-in-out;
    border: solid #FFFFFFAA 1px;
}

.section-dark-theme .feature-left
{
    border: solid #FFFFFF77 1px;
    border-radius: 0.25rem;
}

.section-dark-theme .arrow-right-2
{
    background-color: black;
    transition: background-color 0.333s ease-in-out;
    border: solid #FFFFFFAA 1px;
}

.section-dark-theme .arrow-left-2
{
    background-color: black;
    transition: background-color 0.333s ease-in-out;
    border: solid #FFFFFFAA 1px;
}

.section-dark-theme .dark-themeable-picture
{
    filter: invert(1) !important;
    transition: filter 0.333s ease-in-out;
    opacity: 0.8;
}

.arrow-left-2 img
{
    transform: scaleX(-1);
}

body
{
    background-color: white;
}

.pricing-top
{
    min-height: 5rem;
}

.pricing-table-cell
{
    background-color: #161616;
    border-left: solid 1px #FFFFFF55;
    border-bottom: solid 1px #FFFFFF55;
}

.pricing-table-cell:hover
{
    background-color: #202020;
}


@media screen and (max-width: 576px)
{
    .quote-text
    {
        font-size: 1rem !important;
    }
}

.parallax-focus
{
    opacity: 1 !important;
}

.parallax-gradient
{
    position: relative;
    height: 30rem;
    z-index: -5;
    margin-bottom: -30rem;
    pointer-events: none;
    opacity: 0.5;
    background: linear-gradient(150deg, #004444, #009999) !important;
    transition: opacity 0.25s ease-in-out;
}

@media screen and (max-width: 768px)
{
    .parallax-gradient
    {
        height: 50vh;
        margin-bottom: -50vh;
    }
}

.parallax-cover
{
    z-index: 5;
}
    
.stubborn-text-fix
{
    display: none;
}

@media screen and (max-width: 768px)
{
    .stubborn-text-fix
    {
        display: block;
    }
}

.logo-cell
{
    width: 8rem;
}

.logo-cell-hinge
{
    filter: invert(1);
}

.text-span, .text-span-2
{
    color: #00DDDD !important;
    font-weight: 500 !important;
}

/* @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent)
{
    .text-span, .text-span-2
    {
        color: transparent;
        background-image: -webkit-linear-gradient(to right, #11FFECFF, #00F0F9FF);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
} */


.medium-heading
{
    max-width: 90vw;
}

/** The "Lack of Matches" displays content horizontally occasionally on mobile. */
.feature-left-copy
{
    flex-wrap: nowrap !important;
    /* This property is currently not being used because the scroll functionality doesn't always work on desktop, so it has been disabled. */
    /* cursor: pointer; */
}

.content-image-wrap
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.sticky-video
{
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    width: 80%;
}

.section-dark-theme.sticky-video
{
    opacity: 1;
}

.top-video
{
    width: 100%;
    height: 100%;
}

.top-video-container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 576px)
{
    .top-video
    {
        width: 150vw;
        margin-left: -32vw;
    }
}

.sticky-video-container
{
    position: sticky !important;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* Prevent user from selecting and dragging images; app-like behavior. */
img
{
    pointer-events: none;
}

@media screen and (max-width: 768px)
{
    .pricing-top
    {
        font-size: 1rem;
    }
}

.comparison-wrapper
{
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.comparison-wrapper::-webkit-scrollbar
{
    width: 0;
    height: 0;
}

.table-section
{
    width: 100vw;
}

@media screen and (max-width: 768px)
{
    .table-section
    {
        width: 200vw;
    }
}

.scroll-notification
{
    color: #CCCCCC;
    display: none;
    opacity: 0.5;
    margin-top: 2rem;
    animation-name: ScrollNotificationAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate-reverse;
}

@media screen and (max-width: 768px)
{
    .scroll-notification
    {
        display: block;
    }
}

@keyframes ScrollNotificationAnimation
{
    from
    {
        opacity: 1;
    }

    to
    {
        opacity: 0.5;
    }
}

@media screen and (max-width: 768px)
{
    .mockup-image
    {
        position: block !important;
        width: 120vw;
        margin-left: -20vw;
        overflow-x: hidden;
        height: auto;
    }

    .mockup-image-0
    {
        margin-left: -16vw;
    }
    .mockup-image-1
    {
        margin-left: -20vw;
    }
    .mockup-image-2
    {
        margin-left: -16vw;
    }

    .mockup-image-3
    {
        margin-left: 0vw;
    }

    .mockup-image-4
    {
        margin-left: -18vw;
    }

    .mockup-image img
    {
        width: 120vw;
    }
}

/** Gets rid of vertical margin between text and corresponding pictures in "Get to Know Us" section. */
@media screen and (max-width: 576px)
{
    .gettoknowus .grid---content
    {
        grid-row-gap: 0;
    }
}

@media screen and (max-width: 576px)
{
    .middle-content-width-fix
    {
        margin-right: 15vw;
    }
}

.d-sorrell-tablet
{
    display: block;
}

@media screen and (max-width: 576px)
{
    .d-sorrell-tablet
    {
        display: none;
    }
}

.mobile-video-slug
{
    display: none;
}

@media screen and (max-width: 576px)
{
    .mobile-video-slug
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        font-weight: 500;
        color: #222222;
        opacity: 0.8;
        margin-top: -2rem;
        margin-bottom: 1rem;
    }
}

.nav-link-override-bootstrap
{
    color: black !important;
}

.nav-link-get-notified-override-bootstrap
{
    color: black !important;
}

.section-dark-theme.navbar-collapse
{
    background-color: #000000 !important;
}

.section-dark-theme nav, .section-dark-theme.container-fluid
{
    background-color: #000000 !important;
}

@media screen and (max-width: 768px)
{
    .navbar-collapse
    {
        margin: -.5rem;
        margin-top: .5rem;
        width: 100vw !important;
    }
}

.navbar-brand
{
    margin-left: 10vw;
}

@media screen and (max-width: 768px)
{
    .navbar-brand
    {
        margin-left: 0;
    }
}

.navbar-nav
{
    margin-right: 10vw;
}

@media screen and (max-width: 768px)
{
    .navbar-nav
    {
        margin-right: 0;
    }
}

.nav-item-get-notified
{
    text-align: center;
    background-color: #00EEEE;
    border-radius: 0.333em;
}

.nav-item
{
    margin: 1rem;
}

@media screen and (max-width: 768px)
{
    .nav-item
    {
        margin: 0.25em;
    }
}

.nav-link
{
    color: #000000 !important;
}

@media screen and (min-width: 769px)
{
    .navbar-collapse, .container-fluid
    {
        height: 5rem !important;
    }
}

.section-dark-theme.navbar
{
    border-bottom: 1px solid #111111 !important;
}