body.is-nonTouch *, body.is-nonTouch *:before, body.is-nonTouch *:after {
    -moz-touch-action: pan-y;
    -webkit-touch-action: pan-y;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
    font-weight: bold;
    font-family: Centurygothic,Futura,Avantgrade,Arial;
}

p, li {
    color: rgba(255, 255, 255, .75) !important;
}

body, input, select, textarea {
    color: rgba(255, 255, 255, .75);
    font-family: Centurygothic,Futura,Avantgrade,Arial;
}

div .is-touch #menu > .inner ul li a:hover {
    background: none
}

div#slider-wrapper.default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    text-align: left
}

    div#slider-wrapper.default:before {
        content: "";
        display: block
    }

    div#slider-wrapper.default > .inner {
        padding: 6em 0;
        width: 40em;
        max-width: calc(100% - 5em);
        margin-left: auto;
        margin-right: auto
    }

        div#slider-wrapper.default > .inner > :last-child {
            margin-bottom: 0 !important
        }

    div#slider-wrapper.default [data-anchor] {
        position: relative
    }

        div#slider-wrapper.default [data-anchor]:before {
            pointer-events: none;
            user-select: none;
            content: "";
            display: block;
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 5.25em;
            margin-top: -5.25em
        }

    div#slider-wrapper.default form#signup .field.url {
        display: none
    }

@media screen and (max-width: 1680px) {
    div#slider-wrapper.default > .inner {
        padding: 4em 0
    }
}

@media screen and (max-width: 736px) {
    div#slider-wrapper.default > .inner {
        padding: 2em 0;
        max-width: calc(100% - 3.5em)
    }
}

@media screen and (max-width: 480px) {
    div#slider-wrapper.default {
        justify-content: stretch
    }

        div#slider-wrapper.default > .inner {
            flex-grow: 1
        }
}

@media screen and (max-width: 360px) {
    div#slider-wrapper.default > .inner {
        max-width: calc(100% - 3em)
    }
}

div#slider-wrapper.index {
    text-align: center;
    cursor: default
}

    div#slider-wrapper.index:before, div#slider-wrapper.index:after {
        content: "";
        display: block;
        position: fixed;
        bottom: -5vh;
        left: -5vw;
        width: 110vw;
        height: 110vh;
        pointer-events: none;
        transform: scale(1);
        z-index: -1
    }

    div#slider-wrapper.index:before {
        /*background-image: url('../slider-images/overlay.png'),linear-gradient(45deg, #6E436C 25%, #2A4584 75%);
        background-size: 256px,cover;
        background-position: center,center;
        background-repeat: repeat,no-repeat;*/
    }

    div#slider-wrapper.index:after {
        /*background-image: url('../slider-images/bg.svg');
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        transition: filter .5s ease,opacity 1s ease*/
    }

    div#slider-wrapper.index[data-browser=firefox]:after {
        background-image: url('../slider-images/bg-static.svg');
    }

    div#slider-wrapper.index > .inner {
        width: calc(100% - 8em);
        max-width: 64em;
        margin: 0 auto
    }

        div#slider-wrapper.index > .inner > section {
            border-radius: 6px;
            margin-top: 10em;
            position: relative;
            margin-left: auto;
            margin-right: auto
        }

            div#slider-wrapper.index > .inner > section h1 {
                font-size: 3.5em;
                margin-bottom: .25em;
                letter-spacing: -0.025em
            }

            div#slider-wrapper.index > .inner > section h2 {
                font-size: 2.125em;
                line-height: 1.25;
                letter-spacing: -0.025em;
                margin: 0 0 .5em 0
            }

            div#slider-wrapper.index > .inner > section h3 {
                font-size: 1.5em;
                letter-spacing: -0.025em;
                margin: 0 0 .5em 0
            }

            div#slider-wrapper.index > .inner > section:after {
                content: "";
                display: block;
                position: absolute;
                bottom: -10em;
                left: calc(50% - 1px);
                width: 2px;
                height: 10em;
                background: rgba(255,255,255,.25)
            }

            div#slider-wrapper.index > .inner > section:first-child {
                margin-top: 0
            }

            div#slider-wrapper.index > .inner > section:last-child:after {
                display: none
            }

            div#slider-wrapper.index > .inner > section.style1 {
                background-color: rgba(36,37,45,.6)
            }

            div#slider-wrapper.index > .inner > section.style2 {
                box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
                padding: 60px 0;
            }

@media screen and (max-width: 980px) {
    div#slider-wrapper.index > .inner > section h1 {
        font-size: 3.5em
    }

    div#slider-wrapper.index > .inner > section h2 br {
        display: none
    }

    div#slider-wrapper.index > .inner > section h3 {
        font-size: 1.25em
    }
}

@media screen and (max-width: 736px) {
    div#slider-wrapper.index > .inner {
        width: calc(100% - 4em)
    }

        /*div#slider-wrapper.index > .inner > section {
            margin-top: 2.5em
        }*/

            div#slider-wrapper.index > .inner > section h1 {
                font-size: 3em
            }

            div#slider-wrapper.index > .inner > section h2 {
                font-size: 1.75em;
                line-height: 1.5
            }

            div#slider-wrapper.index > .inner > section h3 {
                font-size: 1em
            }

            /*div#slider-wrapper.index > .inner > section:after {
                bottom: -2.5em;
                height: 2.5em
            }*/
}

@media screen and (max-width: 480px) {
    div#slider-wrapper.index > .inner {
        width: calc(100% - 1.5em)
    }

        div#slider-wrapper.index > .inner > section {
            transition: transform .5s ease,opacity 1s ease
        }
}

@media screen and (max-width: 736px) {
    div#slider-wrapper.index[data-browser=safari] > .inner > section {
        transition: opacity 1s ease
    }
}

div#slider-wrapper.index #intro {
    margin-bottom: -4em;
    padding: 4em 0;
    transition: transform .5s ease,opacity 1s ease
}

    div#slider-wrapper.index #intro:before {
        display: block;
        content: ""
    }

    div#slider-wrapper.index #intro:after {
        display: none
    }

    div#slider-wrapper.index #intro a[href="#about"] {
        font-weight: bold;
        color: #fff;
        border-bottom: 0;
        box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
        border-radius: 6px;
        display: inline-block;
        height: 3.3em;
        line-height: 3.3em;
        padding: 0 1.5em;
        position: relative;
        outline: 0;
        font-size:1.0em;
        text-decoration: none;
        transition: background-color 0.2s ease-in-out,box-shadow 0.2s ease-in-out,transform .75s ease .5s,opacity .75s ease .5s
    }

        div#slider-wrapper.index #intro a[href="#about"]:hover {
            background-color: rgba(255,255,255,.075)
        }

        div#slider-wrapper.index #intro a[href="#about"]:focus, div#slider-wrapper.index #intro a[href="#about"]:active {
            outline: 0;
            box-shadow: inset 0 0 0 2px rgba(255,255,255,.75)
        }

        div#slider-wrapper.index #intro a[href="#about"]:after {
            content: "";
            display: block;
            position: absolute;
            bottom: -10em;
            left: calc(50% - 1px);
            width: 2px;
            height: 10em;
            background: rgba(255,255,255,.25)
        }

@media screen and (max-width: 736px) {
    div#slider-wrapper.index #intro {
        justify-content: center;
        padding: 2em 0 1em 0;
        margin-bottom: -2em;
        min-height: 0
    }

        /*div#slider-wrapper.index #intro:before {
            display: none
        }

        div#slider-wrapper.index #intro a[href="#about"] {
            display: none
        }*/
}

@media screen and (max-width: 480px) {
    div#slider-wrapper.index #intro {
        padding: 3em 2em 2em 2em
    }
}

div#slider-wrapper.index[data-browser=safari] #intro {
    transition: opacity 1s ease
}

div#slider-wrapper.index #about header {
    padding: 7em 4em 5em 4em
}

    div#slider-wrapper.index #about header h2 {
        font-size: 2.2em;
        line-height: 1.25;
        margin: .25em 0;
        letter-spacing: -0.025em
    }

    div#slider-wrapper.index #about header p {
        margin: 2em 0
    }

div#slider-wrapper.index #about .carousel {
    overflow: hidden;
    border-radius: 0 0 6px 6px;
    background-color: rgba(36,37,45,.6);
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0)
}

    div#slider-wrapper.index #about .carousel .reel {
        display: flex;
        transition: opacity 1s ease-in-out;
        opacity: 0;
        width: 400em
    }

@keyframes carousel-reel {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-200em)
    }
}

div#slider-wrapper.index #about .carousel.active .reel {
    animation: carousel-reel 45s linear 0s infinite;
    opacity: 1
}

div#slider-wrapper.index #about .carousel.active.paused .reel {
    animation-play-state: paused
}

div#slider-wrapper.index #about .carousel a {
    border: 0;
    display: block;
    position: relative;
    width: 100%
}

    div#slider-wrapper.index #about .carousel a:before {
        content: "";
        display: block;
        width: 100%;
        padding-top: 75%
    }

    div#slider-wrapper.index #about .carousel a img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

@media screen and (max-width: 980px) {
    div#slider-wrapper.index #about header {
        padding: 5em 4em 3em 4em
    }

        div#slider-wrapper.index #about header h2 {
            font-size: 2.75em
        }

        div#slider-wrapper.index #about header p br {
            display: none
        }

    div#slider-wrapper.index #about .carousel .reel {
        width: 300em
    }

    @keyframes carousel-reel {
        0% {
            transform: translateX(0)
        }

        100% {
            transform: translateX(-150em)
        }
    }
}

@media screen and (max-width: 736px) {
    div#slider-wrapper.index #about .carousel .reel {
        width: 250em
    }

    @keyframes carousel-reel {
        0% {
            transform: translateX(0)
        }

        100% {
            transform: translateX(-125em)
        }
    }
}

@media screen and (max-width: 480px) {
    div#slider-wrapper.index #about header {
        padding: 3em 2em 1em 2em
    }

        div#slider-wrapper.index #about header h2 {
            font-size: 1.75em;
            line-height: 1.5
        }

    div#slider-wrapper.index #about .carousel .reel {
        width: 200em
    }

    @keyframes carousel-reel {
        0% {
            transform: translateX(0)
        }

        100% {
            transform: translateX(-100em)
        }
    }
}

@media screen and (max-width: 360px) {
    div#slider-wrapper.index #about .carousel .reel {
        width: 150em
    }

    @keyframes

    (carousel-reel) {
        0%

{
    transform: translateX(0)
}

100% {
    transform: translateX(-75em)
}

}
}

div#slider-wrapper.index #highlights {
    background: none
}

    div#slider-wrapper.index #highlights > section {
        display: flex
    }

        div#slider-wrapper.index #highlights > section > * {
            flex-shrink: 0;
            width: 50%
        }

        div#slider-wrapper.index #highlights > section:first-child {
            border-radius: 6px 6px 0 0
        }

            div#slider-wrapper.index #highlights > section:first-child > :first-child {
                border-radius: 6px 0 0 0
            }

            div#slider-wrapper.index #highlights > section:first-child > :last-child {
                border-radius: 0 6px 0 0
            }

        div#slider-wrapper.index #highlights > section:last-child {
            border-radius: 0 0 6px 6px
        }

            div#slider-wrapper.index #highlights > section:last-child > :first-child {
                border-radius: 0 0 0 6px
            }

            div#slider-wrapper.index #highlights > section:last-child > :last-child {
                border-radius: 0 0 6px 0
            }

        div#slider-wrapper.index #highlights > section:nth-child(2n) {
            flex-direction: row-reverse
        }

        div#slider-wrapper.index #highlights > section .pic {
            transform: translate3d(0, 0, 0);
            -webkit-backface-visibility: hidden;
            position: relative;
            overflow: hidden;
            background-image: url('../slider-images/overlay.png'),linear-gradient(45deg, #415d9d 0%, #896387 100%);
            background-size: 256px,cover;
            background-position: center,center;
            background-repeat: repeat,no-repeat
        }

            div#slider-wrapper.index #highlights > section .pic:before {
                content: "";
                display: block;
                width: 100%;
                padding-top: 75%
            }

            div#slider-wrapper.index #highlights > section .pic .highlight {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                user-select: none
            }

                div#slider-wrapper.index #highlights > section .pic .highlight.played {
                    cursor: pointer
                }

        div#slider-wrapper.index #highlights > section .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgba(36,37,45,.6)
        }

            div#slider-wrapper.index #highlights > section .content > * {
                width: 100%
            }

@media screen and (max-width: 980px) {
    div#slider-wrapper.index #highlights {
        max-width: 32em;
        background: none
    }

        div#slider-wrapper.index #highlights > section {
            display: block;
            position: relative;
            margin-top: 2.5em
        }

            div#slider-wrapper.index #highlights > section > * {
                width: 100%
            }

            div#slider-wrapper.index #highlights > section:last-child:after {
                display: none
            }

            div#slider-wrapper.index #highlights > section:after {
                content: "";
                display: block;
                position: absolute;
                bottom: -2.5em;
                left: calc(50% - 1px);
                width: 2px;
                height: 2.5em;
                background: rgba(255,255,255,.25)
            }

            div#slider-wrapper.index #highlights > section .pic {
                border-radius: 6px 6px 0 0 !important
            }

            div#slider-wrapper.index #highlights > section .content {
                border-radius: 0 0 6px 6px !important
            }
}

@media screen and (max-width: 480px) {
    div#slider-wrapper.index #highlights > section .content {
        padding: 3em 2em 1em 2em
    }
}

@keyframes highlight-simple {
    20% {
        transform: translateX(-50%)
    }

    25% {
        transform: translateX(-50%)
    }

    45% {
        transform: translateX(-50%) translateY(-50%)
    }

    50% {
        transform: translateX(-50%) translateY(-50%)
    }

    70% {
        transform: translateX(0) translateY(-50%)
    }

    75% {
        transform: translateX(0) translateY(-50%)
    }
}

div#slider-wrapper.index .highlight.simple .templates {
    display: flex;
    flex-wrap: wrap;
    width: 200%
}

    div#slider-wrapper.index .highlight.simple .templates .template {
        display: block;
        width: 50%;
        background-size: cover
    }

        div#slider-wrapper.index .highlight.simple .templates .template:before {
            content: "";
            display: block;
            padding-top: 75%
        }

        div#slider-wrapper.index .highlight.simple .templates .template.n1 {
            background-image: url('../slider-images/template-1.png');
        }

        div#slider-wrapper.index .highlight.simple .templates .template.n2 {
            background-image: url('../slider-images/template-2.png');
        }

        div#slider-wrapper.index .highlight.simple .templates .template.n3 {
            background-image: url('../slider-images/template-3.png');
        }

        div#slider-wrapper.index .highlight.simple .templates .template.n4 {
            background-image: url('../slider-images/template-4.png');
        }

div#slider-wrapper.index .highlight.simple.active .templates {
    animation: highlight-simple 5s
}

@keyframes highlight-responsive-phone-screen-image {
    0% {
        opacity: 1;
        background-image: url('../slider-images/site-3-mobile.jpg');
    }

    10% {
        opacity: 0;
        background-image: url('../slider-images/site-3-mobile.jpg');
    }

    22% {
        opacity: 0;
        background-image: url('../slider-images/site-3.png');
    }

    32% {
        opacity: 1;
        background-image: url('../slider-images/site-3.png');
    }

    70% {
        opacity: 1;
        background-image: url('../slider-images/site-3.png');
    }

    80% {
        opacity: 0;
        background-image: url('../slider-images/site-3.png');
    }

    90% {
        opacity: 0;
        background-image: url('../slider-images/site-3-mobile.jpg');
    }

    100% {
        opacity: 1;
        background-image: url('../slider-images/site-3-mobile.jpg');
    }
}

@keyframes highlight-responsive-phone {
    10% {
        border-radius: 0;
        height: 70%;
        left: 35%;
        margin-top: -0.25em;
        top: 15%;
        width: 30%
    }

    20% {
        height: 100%;
        left: 0%;
        margin-top: 0;
        top: 0%;
        width: 100%
    }

    80% {
        border-radius: 0;
        height: 100%;
        left: 0%;
        margin-top: 0;
        top: 0%;
        width: 100%
    }

    90% {
        height: 70%;
        left: 35%;
        margin-top: -0.25em;
        top: 15%;
        width: 30%
    }
}

@keyframes highlight-responsive-phone-trim {
    10% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    80% {
        opacity: 0
    }

    90% {
        opacity: 1
    }
}

div#slider-wrapper.index .highlight.responsive .phone {
    background: #fff;
    border-radius: 1em;
    box-shadow: 0 .5em 1em 0 rgba(0,0,0,.1);
    height: 70%;
    left: 35%;
    margin-top: -0.25em;
    position: absolute;
    top: 15%;
    width: 30%
}

    div#slider-wrapper.index .highlight.responsive .phone:before, div#slider-wrapper.index .highlight.responsive .phone:after {
        content: "";
        display: block;
        position: absolute
    }

    div#slider-wrapper.index .highlight.responsive .phone:before {
        background: #fff;
        border-radius: 0 0 .325em .325em;
        height: .325em;
        left: calc(50% - 1.25em);
        top: 0;
        width: 2.5em;
        z-index: 1
    }

    div#slider-wrapper.index .highlight.responsive .phone:after {
        border-radius: inherit;
        box-shadow: 0 0 0 3px #fff;
        height: 100%;
        left: 0;
        top: 0;
        width: 100%
    }

    div#slider-wrapper.index .highlight.responsive .phone .screen {
        background-image: url('../slider-images/overlay.png'),linear-gradient(45deg, #718dcd 0%, #b993b7 100%);
        background-position: center,center;
        background-repeat: repeat,no-repeat;
        background-size: 256px,cover;
        border-radius: inherit;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

        div#slider-wrapper.index .highlight.responsive .phone .screen .image {
            background-image: url('../slider-images/site-3-mobile.jpg');
            background-position: center;
            background-size: cover;
            border-radius: inherit;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%
        }

div#slider-wrapper.index .highlight.responsive.active .phone {
    animation: highlight-responsive-phone 5s
}

    div#slider-wrapper.index .highlight.responsive.active .phone:before, div#slider-wrapper.index .highlight.responsive.active .phone:after {
        animation: highlight-responsive-phone-trim 5s
    }

    div#slider-wrapper.index .highlight.responsive.active .phone .screen .image {
        animation: highlight-responsive-phone-screen-image 5s
    }

@keyframes highlight-free-site-n1 {
    0% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-1.png');
    }

    10% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-1.png');
    }

    11% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-2.png');
    }

    21% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-2.png');
    }

    40% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-2.png');
    }

    50% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-2.png');
    }

    51% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-3.png');
    }

    61% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-3.png');
    }

    80% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-3.png');
    }

    90% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-3.png');
    }

    91% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-1.png');
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-1.png');
    }
}

@keyframes highlight-free-site-n2 {
    0% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-2.png');
    }

    10% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-2.png');
    }

    11% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-3.png');
    }

    21% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-3.png');
    }

    40% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-3.png');
    }

    50% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-3.png');
    }

    51% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-4.png');
    }

    61% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-4.png');
    }

    80% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-4.png');
    }

    90% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-4.png');
    }

    91% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-2.png');
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-2.png');
    }
}

@keyframes highlight-free-site-n3 {
    0% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-3.png');
    }

    10% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-3.png');
    }

    11% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-4.png');
    }

    21% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-4.png');
    }

    40% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-4.png');
    }

    50% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-4.png');
    }

    51% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-5.png');
    }

    61% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-5.png');
    }

    80% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-5.png');
    }

    90% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-5.png');
    }

    91% {
        transform: translateX(1em);
        opacity: 0;
        background-image: url('../slider-images/site-3.png');
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        background-image: url('../slider-images/site-3.png');
    }
}

div#slider-wrapper.index .highlight.free .site {
    display: block;
    width: 45%;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 .5em 1em 0 rgba(0,0,0,.1);
    background-size: cover
}

    div#slider-wrapper.index .highlight.free .site:before {
        content: "";
        display: block;
        padding-top: 75%
    }

    div#slider-wrapper.index .highlight.free .site.n1 {
        margin-top: 6%;
        margin-left: 6%;
        background-image: url('../slider-images/site-1.png');
    }

    div#slider-wrapper.index .highlight.free .site.n2 {
        margin-top: -19%;
        margin-left: 29%;
        background-image: url('../slider-images/site-2.png');
    }

    div#slider-wrapper.index .highlight.free .site.n3 {
        margin-top: -19%;
        margin-left: 49%;
        background-image: url('../slider-images/site-3.png');
    }

div#slider-wrapper.index .highlight.free.active .site.n1 {
    animation: highlight-free-site-n1 6s ease .15s forwards
}

div#slider-wrapper.index .highlight.free.active .site.n2 {
    animation: highlight-free-site-n2 6s ease .075s forwards
}

div#slider-wrapper.index .highlight.free.active .site.n3 {
    animation: highlight-free-site-n3 6s ease 0s forwards
}

div#slider-wrapper.index.is-blurred:after {
    filter: blur(1em)
}

div#slider-wrapper.index.is-loading:after {
    opacity: 0
}

div#slider-wrapper.index.is-loading #intro {
    transform: translateY(0.5em);
    opacity: 0
}

    div#slider-wrapper.index.is-loading #intro a[href="#about"] {
        transform: translateY(5em);
        opacity: 0
    }

@media screen and (max-width: 480px) {
    div#slider-wrapper.index.is-loading > .inner > section {
        transform: translateY(0.5em);
        opacity: 0
    }
}

div#slider-wrapper.pro {
    text-align: center;
    cursor: default
}

    div#slider-wrapper.pro > .inner {
        width: calc(100% - 8em);
        max-width: 64em;
        margin-left: auto;
        margin-right: auto;
        padding: 8em 0
    }

        div#slider-wrapper.pro > .inner > section {
            border-radius: 6px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 8em
        }

            div#slider-wrapper.pro > .inner > section > :last-child {
                margin-bottom: 0
            }

            div#slider-wrapper.pro > .inner > section > header {
                margin: 0 0 5em 0
            }

                div#slider-wrapper.pro > .inner > section > header > :last-child {
                    margin-bottom: 0
                }

            div#slider-wrapper.pro > .inner > section h1 {
                font-size: 3.5em;
                margin-bottom: .25em;
                letter-spacing: -0.025em
            }

            div#slider-wrapper.pro > .inner > section h2 {
                font-size: 2.125em;
                line-height: 1.25;
                letter-spacing: -0.025em;
                margin: 0 0 .5em 0
            }

            div#slider-wrapper.pro > .inner > section h3 {
                font-size: 1.5em;
                letter-spacing: -0.025em;
                margin: 0 0 .5em 0
            }

            div#slider-wrapper.pro > .inner > section:last-child {
                margin-bottom: 0
            }

            div#slider-wrapper.pro > .inner > section.alt {
                max-width: 40em;
                border: solid 2px rgba(255,255,255,.075);
                border-radius: 6px;
                padding: 4em
            }

            div#slider-wrapper.pro > .inner > section.or:before {
                content: "OR";
                position: absolute;
                top: -4.5em;
                left: calc(50% - 1.5em);
                width: 3em;
                height: 1em;
                line-height: 1em;
                color: rgba(255,255,255,.25);
                text-transform: uppercase;
                background: #24252d;
                z-index: 1
            }

            div#slider-wrapper.pro > .inner > section.or:after {
                content: "";
                position: absolute;
                top: calc(-4em - 1px);
                left: calc(50% - 4em);
                width: 8em;
                height: 2px;
                background: rgba(255,255,255,.075)
            }


/*.changelog.is-loading:before {
    display: block
}*/


@media screen and (max-width: 1680px) {
    div#slider-wrapper.pro > .inner {
        padding: 6em 0
    }

        div#slider-wrapper.pro > .inner > section {
            margin-bottom: 6em
        }

            div#slider-wrapper.pro > .inner > section > header {
                margin: 0 0 4em 0
            }

            div#slider-wrapper.pro > .inner > section.or:before {
                top: -3.5em
            }

            div#slider-wrapper.pro > .inner > section.or:after {
                top: calc(-3em - 1px)
            }
}

@media screen and (max-width: 980px) {
    div#slider-wrapper.pro > .inner > section > header {
        margin: 0 0 3em 0
    }

        div#slider-wrapper.pro > .inner > section > header br {
            display: none
        }

    div#slider-wrapper.pro > .inner > section h1 {
        font-size: 3.5em
    }

    div#slider-wrapper.pro > .inner > section h3 {
        font-size: 1.25em
    }

    div#slider-wrapper.pro > .inner > section.alt {
        max-width: 32em;
        padding: 4em 3em
    }
}

@media screen and (max-width: 736px) {
    div#slider-wrapper.pro > .inner {
        width: calc(100% - 4em);
        padding: 3em 0
    }

        div#slider-wrapper.pro > .inner > section {
            margin-bottom: 2.5em
        }

            div#slider-wrapper.pro > .inner > section > header {
                margin: 0 0 2em 0;
                padding: 0 2em
            }

                div#slider-wrapper.pro > .inner > section > header br {
                    display: none
                }

            div#slider-wrapper.pro > .inner > section h1 {
                font-size: 2.125em;
                line-height: 1.25
            }

            div#slider-wrapper.pro > .inner > section h2 {
                font-size: 1.75em;
                line-height: 1.5
            }

            div#slider-wrapper.pro > .inner > section h3 {
                font-size: 1em
            }

            div#slider-wrapper.pro > .inner > section:after {
                bottom: -2.5em;
                height: 2.5em
            }

            div#slider-wrapper.pro > .inner > section.or {
                margin-top: 4em
            }

                div#slider-wrapper.pro > .inner > section.or:before {
                    top: -2.5em
                }

                div#slider-wrapper.pro > .inner > section.or:after {
                    top: calc(-2em - 1px)
                }
}

@media screen and (max-width: 480px) {
    div#slider-wrapper.pro > .inner {
        width: calc(100% - 1.5em)
    }

        div#slider-wrapper.pro > .inner > section.alt {
            padding: 2.5em 2em 2em 2em;
            max-width: 20.8em
        }
}