.front-hero {
    position: relative
}

.front-hero__jumbotron {
    background-attachment: fixed;
    padding-top: 6rem;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    background-color: transparent
}

.front-hero__jumbotron.show-slide-1 .slide-1-background, .front-hero__jumbotron.show-slide-1 .slide-2-background, .front-hero__jumbotron.show-slide-1 .slide-3-background {
    opacity: 1
}

.front-hero__jumbotron.show-slide-1 .slide-2-background {
    transition-delay: 1s
}

.front-hero__jumbotron.show-slide-2 .slide-1-background, .front-hero__jumbotron.show-slide-3 .slide-1-background, .front-hero__jumbotron.show-slide-3 .slide-2-background, .front-hero__jumbotron.show-slide-4 .slide-1-background, .front-hero__jumbotron.show-slide-4 .slide-2-background, .front-hero__jumbotron.show-slide-4 .slide-3-background, .front-hero__jumbotron.show-slide-5 .slide-1-background, .front-hero__jumbotron.show-slide-5 .slide-2-background, .front-hero__jumbotron.show-slide-5 .slide-3-background, .front-hero__jumbotron.show-slide-5 .slide-4-background, .front-hero__jumbotron.show-slide-6 .slide-1-background, .front-hero__jumbotron.show-slide-6 .slide-2-background, .front-hero__jumbotron.show-slide-6 .slide-3-background, .front-hero__jumbotron.show-slide-6 .slide-4-background, .front-hero__jumbotron.show-slide-6 .slide-5-background {
    opacity: 0
}

.front-hero__jumbotron .slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110vh;
    transition: opacity 1s;
    opacity: 1
}

@media (min-width: 992px) {
    .front-hero__jumbotron {
        padding-top: 8rem
    }
}

@media (min-width: 1200px) {
    .front-hero__jumbotron {
        padding-top: 12rem
    }
}

.front-hero__progress {
    display: none;
    width: 3.75rem;
    height: 5px;
    background-color: transparent;
    position: relative;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ccc
}

@media (min-width: 992px) {
    .front-hero__progress {
        display: block
    }
}

.front-hero__progress-bar {
    height: 5px;
    background-color: #118ff1;
    -webkit-animation: fillBar 4s infinite;
    animation: fillBar 4s infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

.front-hero__top-text {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    letter-spacing: .1rem;
    text-align: center
}

@media (min-width: 992px) {
    .front-hero__top-text {
        font-size: 1.75rem;
        text-align: left
    }
}

@media (min-width: 1200px) {
    .front-hero__top-text {
        font-size: 2.125rem
    }
}

.front-hero__main-text {
    color: #fff;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 1rem
}

@media (min-width: 576px) {
    .front-hero__main-text {
        font-size: 3rem
    }
}

@media (min-width: 992px) {
    .front-hero__main-text {
        text-align: left;
        font-size: 2.5rem;
        line-height: 3.2rem;
        margin-bottom: 2rem;
        letter-spacing: .1rem
    }
}

.front-hero__main-text span {
    display: inline-block;
    transition: transform .4s, opacity .4s;
    transition-timing-function: ease-out;
    opacity: 0
}

.front-hero__main-text span:first-child {
    transform: translateY(7rem) translateX(1rem)
}

.front-hero__main-text span:nth-child(2) {
    transform: translateY(2rem) translateX(7rem)
}

.front-hero__main-text span:nth-child(3) {
    transform: translateY(3rem) translateX(1rem)
}

.front-hero__main-text span:nth-child(4) {
    transform: translateY(6rem) translateX(3rem)
}

.front-hero__main-text span:nth-child(5) {
    transform: translateY(2rem) translateX(6rem)
}

.front-hero__main-text span:nth-child(6) {
    transform: translateY(4rem) translateX(3rem)
}

.front-hero__main-text span:nth-child(7) {
    transform: translateY(7rem) translateX(4rem)
}

.front-hero__main-text span:nth-child(8) {
    transform: translateY(1rem) translateX(5rem)
}

.front-hero__main-text span:nth-child(9) {
    transform: translateY(6rem) translateX(7rem)
}

.front-hero__main-text span:nth-child(10) {
    transform: translateY(2rem) translateX(2rem)
}

.front-hero__main-text span:nth-child(11) {
    transform: translateY(5rem) translateX(1rem)
}

.front-hero__main-text span:nth-child(12) {
    transform: translateY(2rem) translateX(5rem)
}

.front-hero__main-text span:nth-child(13) {
    transform: translateY(2rem) translateX(4rem)
}

.front-hero__main-text span:nth-child(14) {
    transform: translateY(7rem) translateX(5rem)
}

.front-hero__main-text span:nth-child(15) {
    transform: translateY(3rem) translateX(1rem)
}

.front-hero__main-text span:nth-child(16) {
    transform: translateY(4rem) translateX(5rem)
}

.front-hero__main-text span:nth-child(17) {
    transform: translateY(2rem) translateX(6rem)
}

.front-hero__main-text span:nth-child(18) {
    transform: translateY(3rem) translateX(7rem)
}

.front-hero__main-text span:nth-child(19) {
    transform: translateY(3rem) translateX(3rem)
}

.front-hero__main-text span:nth-child(20) {
    transform: translateY(4rem) translateX(4rem)
}

.front-hero__main-text span:nth-child(21) {
    transform: translateY(3rem) translateX(5rem)
}

.front-hero__main-text span:nth-child(22) {
    transform: translateY(5rem) translateX(2rem)
}

.front-hero__main-text span:nth-child(23) {
    transform: translateY(6rem) translateX(1rem)
}

.front-hero__main-text span:nth-child(24) {
    transform: translateY(1rem) translateX(3rem)
}

.front-hero__main-text span:nth-child(25) {
    transform: translateY(6rem) translateX(7rem)
}

.front-hero__main-text span:nth-child(26) {
    transform: translateY(6rem) translateX(4rem)
}

.front-hero__main-text span:nth-child(27) {
    transform: translateY(5rem) translateX(4rem)
}

.front-hero__main-text span:nth-child(28) {
    transform: translateY(4rem) translateX(1rem)
}

.front-hero__main-text span:nth-child(29) {
    transform: translateY(7rem) translateX(6rem)
}

.front-hero__main-text span:nth-child(30) {
    transform: translateY(1rem) translateX(4rem)
}

.front-hero__main-text span:nth-child(31) {
    transform: translateY(5rem) translateX(2rem)
}

.front-hero__main-text.loaded span {
    opacity: 1
}

.front-hero__main-text.loaded span:first-child {
    transform: translateY(0) translateX(0);
    transition-delay: .02s
}

.front-hero__main-text.loaded span:nth-child(2) {
    transform: translateY(0) translateX(0);
    transition-delay: .04s
}

.front-hero__main-text.loaded span:nth-child(3) {
    transform: translateY(0) translateX(0);
    transition-delay: .06s
}

.front-hero__main-text.loaded span:nth-child(4) {
    transform: translateY(0) translateX(0);
    transition-delay: .08s
}

.front-hero__main-text.loaded span:nth-child(5) {
    transform: translateY(0) translateX(0);
    transition-delay: .1s
}

.front-hero__main-text.loaded span:nth-child(6) {
    transform: translateY(0) translateX(0);
    transition-delay: .12s
}

.front-hero__main-text.loaded span:nth-child(7) {
    transform: translateY(0) translateX(0);
    transition-delay: .14s
}

.front-hero__main-text.loaded span:nth-child(8) {
    transform: translateY(0) translateX(0);
    transition-delay: .16s
}

.front-hero__main-text.loaded span:nth-child(9) {
    transform: translateY(0) translateX(0);
    transition-delay: .18s
}

.front-hero__main-text.loaded span:nth-child(10) {
    transform: translateY(0) translateX(0);
    transition-delay: .2s
}

.front-hero__main-text.loaded span:nth-child(11) {
    transform: translateY(0) translateX(0);
    transition-delay: .22s
}

.front-hero__main-text.loaded span:nth-child(12) {
    transform: translateY(0) translateX(0);
    transition-delay: .24s
}

.front-hero__main-text.loaded span:nth-child(13) {
    transform: translateY(0) translateX(0);
    transition-delay: .26s
}

.front-hero__main-text.loaded span:nth-child(14) {
    transform: translateY(0) translateX(0);
    transition-delay: .28s
}

.front-hero__main-text.loaded span:nth-child(15) {
    transform: translateY(0) translateX(0);
    transition-delay: .3s
}

.front-hero__main-text.loaded span:nth-child(16) {
    transform: translateY(0) translateX(0);
    transition-delay: .32s
}

.front-hero__main-text.loaded span:nth-child(17) {
    transform: translateY(0) translateX(0);
    transition-delay: .34s
}

.front-hero__main-text.loaded span:nth-child(18) {
    transform: translateY(0) translateX(0);
    transition-delay: .36s
}

.front-hero__main-text.loaded span:nth-child(19) {
    transform: translateY(0) translateX(0);
    transition-delay: .38s
}

.front-hero__main-text.loaded span:nth-child(20) {
    transform: translateY(0) translateX(0);
    transition-delay: .4s
}

.front-hero__main-text.loaded span:nth-child(21) {
    transform: translateY(0) translateX(0);
    transition-delay: .42s
}

.front-hero__main-text.loaded span:nth-child(22) {
    transform: translateY(0) translateX(0);
    transition-delay: .44s
}

.front-hero__main-text.loaded span:nth-child(23) {
    transform: translateY(0) translateX(0);
    transition-delay: .46s
}

.front-hero__main-text.loaded span:nth-child(24) {
    transform: translateY(0) translateX(0);
    transition-delay: .48s
}

.front-hero__main-text.loaded span:nth-child(25) {
    transform: translateY(0) translateX(0);
    transition-delay: .5s
}

.front-hero__main-text.loaded span:nth-child(26) {
    transform: translateY(0) translateX(0);
    transition-delay: .52s
}

.front-hero__main-text.loaded span:nth-child(27) {
    transform: translateY(0) translateX(0);
    transition-delay: .54s
}

.front-hero__main-text.loaded span:nth-child(28) {
    transform: translateY(0) translateX(0);
    transition-delay: .56s
}

.front-hero__main-text.loaded span:nth-child(29) {
    transform: translateY(0) translateX(0);
    transition-delay: .58s
}

.front-hero__main-text.loaded span:nth-child(30) {
    transform: translateY(0) translateX(0);
    transition-delay: .6s
}

.front-hero__main-text.loaded span:nth-child(31) {
    transform: translateY(0) translateX(0);
    transition-delay: .62s
}

.front-hero__h1 {
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 26px;
}

@media (min-width: 992px) {
    .front-hero__h1 {
        width: 75%;
        text-align: left
    }
}

.front-hero__btn {
    position: relative;
    z-index: 100
}

.front-hero__angle-white {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
    bottom: -2px
}

@media (min-width: 992px) {
    .front-hero__angle-white {
        bottom: -20vw
    }
}

.front-hero__slider {
    position: relative;
    z-index: 800;
    min-height: 435px
}

@media (min-width: 576px) {
    .front-hero__slider {
        min-height: 600px
    }
}

@media (min-width: 992px) {
    .front-hero__slider {
        min-height: 435px
    }
}

@media (min-width: 1200px) {
    .front-hero__slider {
        min-height: 600px;
        margin-top: -6rem
    }
}

.front-hero__slider .slide {
    pointer-events: none
}

.front-hero__slider .slide-iphone {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.front-hero__slider .slide-iphone .layer-1 {
    opacity: 0;
    transform: translateY(-4rem) rotateX(-30deg) rotateY(30deg);
    transform-origin: center center;
    transition: transform .7s, opacity .7s;
    position: relative;
    height: 27.1875rem;
    overflow-y: hidden
}

@media (min-width: 576px) {
    .front-hero__slider .slide-iphone .layer-1 {
        height: 40.625rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-iphone .layer-1 {
        height: 38.75rem
    }
}

.front-hero__slider .slide-iphone .layer-1 .device-wrapper, .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper {
    position: absolute;
    top: 0;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%)
}

.front-hero__slider .slide-iphone .layer-1 .device-wrapper img, .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img {
    width: 12.5rem;
    display: block;
    margin: 0 auto
}

@media (min-width: 576px) {
    .front-hero__slider .slide-iphone .layer-1 .device-wrapper img, .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img {
        width: 18.75rem;
        margin: 0 0 auto
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-iphone .layer-1 .device-wrapper img, .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img {
        width: 13.125rem;
        margin: 0 0 auto
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-iphone .layer-1 .device-wrapper img, .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img {
        width: 18.75rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-iphone .layer-1 .device-wrapper, .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper {
        width: 100%
    }
}

.front-hero__slider .slide-iphone .layer-1 .device-wrapper {
    z-index: 1200
}

.front-hero__slider .slide-iphone .layer-1 .scroll-wrapper {
    padding: 0 1rem;
    top: .8rem;
    z-index: -1;
    height: 23.4375rem
}

@media (min-width: 576px) {
    .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper {
        height: 35.5rem
    }
}

.front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img {
    width: 10.9375rem;
    height: auto !important;
    position: relative;
    top: 1rem
}

.front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img.animating {
    -webkit-animation: scrollMobile 6s infinite;
    animation: scrollMobile 6s infinite;
    -webkit-animation-timing-function: cubic-bezier(1, .005, .305, 1);
    animation-timing-function: cubic-bezier(1, .005, .305, 1)
}

@media (min-width: 576px) {
    .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img {
        top: 1.7rem;
        width: 16.875rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img {
        top: 1.1rem;
        width: 11.375rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-iphone .layer-1 .scroll-wrapper img {
        top: 1rem;
        width: 16.875rem
    }
}

.front-hero__slider .slide-iphone .layer-2 {
    position: relative;
    transform: translateY(1rem) scale(.5);
    transition: all .5s;
    transition-delay: 0s;
    opacity: 0
}

.front-hero__slider .slide-iphone .layer-2 .name {
    position: absolute;
    right: 0;
    bottom: 10rem;
    color: #fff;
    padding-top: .7rem;
    padding-right: 1rem;
    border-top: 1px solid #fff;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    display: none
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-iphone .layer-2 .name {
        display: block;
        border-top: 2px solid #fff;
        bottom: 19rem;
        right: 5.2rem;
        padding-right: 3rem
    }
}

.front-hero__slider .slide-iphone .layer-2 .description {
    position: absolute;
    bottom: 17.2rem;
    right: 1.1rem;
    color: #fff;
    width: 12.5rem;
    display: none
}

.front-hero__slider .slide-iphone .layer-2 .description:after {
    content: "\F178";
    font-family: Font Awesome\ 5 Pro;
    margin-left: .25rem
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-iphone .layer-2 .description {
        display: inline-block
    }
}

@media (min-width: 768px) {
    .front-hero__slider .slide-iphone .slide-4.slide-tablet .layer-2 .name {
        margin-bottom: .5rem
    }
}

.front-hero__slider .slide-browser {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-left: -15px;
    margin-right: -15px
}

.front-hero__slider .slide-browser .layer-1 {
    opacity: 0;
    transform: translateY(-4rem) rotateX(-30deg) rotateY(30deg);
    transform-origin: center center;
    transition: transform .7s, opacity .7s;
    position: relative;
    height: 31.25rem;
    width: 15.625rem;
    overflow: hidden;
    margin: 0 auto
}

@media (min-width: 576px) {
    .front-hero__slider .slide-browser .layer-1 {
        height: 40.625rem;
        width: 25rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-browser .layer-1 {
        height: 31.25rem;
        width: 25rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-browser .layer-1 {
        height: 38.75rem;
        width: 40.625rem
    }
}

.front-hero__slider .slide-browser .layer-1 .device-wrapper, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper {
    position: absolute;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
    width: 15.625rem
}

@media (min-width: 576px) {
    .front-hero__slider .slide-browser .layer-1 .device-wrapper, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper {
        width: 25rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-browser .layer-1 .device-wrapper, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper {
        width: 25rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-browser .layer-1 .device-wrapper, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper {
        width: 25rem;
        left: 17.25rem
    }
}

.front-hero__slider .slide-browser .layer-1 .device-wrapper img, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper img {
    width: 15.625rem;
    display: block;
    margin: 0 auto
}

.front-hero__slider .slide-browser .layer-1 .device-wrapper img.animating, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper img.animating {
    -webkit-animation: scrollMobile-browser 6s infinite;
    animation: scrollMobile-browser 6s infinite
}

@media (min-width: 576px) {
    .front-hero__slider .slide-browser .layer-1 .device-wrapper img, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper img {
        width: 25rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-browser .layer-1 .device-wrapper img, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper img {
        width: 25rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-browser .layer-1 .device-wrapper img, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper img {
        width: 37.5rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-browser .layer-1 .device-wrapper, .front-hero__slider .slide-browser .layer-1 .scroll-wrapper {
        top: 10%;
        width: 100%
    }
}

.front-hero__slider .slide-browser .layer-1 .device-wrapper {
    z-index: 1500;
    width: 34.375rem;
    height: 34.375rem
}

.front-hero__slider .slide-browser .layer-1 .scroll-wrapper {
    top: -.2rem;
    z-index: -1;
    height: 23.4375rem
}

@media (min-width: 576px) {
    .front-hero__slider .slide-browser .layer-1 .scroll-wrapper {
        height: 35.5rem
    }
}

.front-hero__slider .slide-browser .layer-1 .scroll-wrapper img {
    width: 15.625rem;
    height: auto !important;
    position: relative;
    top: .9rem
}

@media (min-width: 576px) {
    .front-hero__slider .slide-browser .layer-1 .scroll-wrapper img {
        top: 1.3rem;
        left: -1.4rem;
        width: 25.625rem
    }
}

@media (min-width: 768px) {
    .front-hero__slider .slide-browser .layer-1 .scroll-wrapper img {
        width: 100%;
        left: 0
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-browser .layer-1 .scroll-wrapper img {
        top: 1.9rem
    }
}

.front-hero__slider .slide-browser .layer-2 {
    position: relative;
    transform: translateY(1rem) scale(.5);
    transition: all .5s;
    transition-delay: 0s;
    opacity: 0
}

.front-hero__slider .slide-browser .layer-2 .name {
    position: absolute;
    right: 0;
    bottom: 10rem;
    color: #fff;
    padding-top: .7rem;
    border-top: 1px solid #fff;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: right;
    width: 8.9375rem;
    display: none
}

@media (min-width: 576px) {
    .front-hero__slider .slide-browser .layer-2 .name {
        border-top: 2px solid #fff;
        bottom: 20rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-browser .layer-2 .name {
        border-top: 2px solid #fff;
        bottom: 9rem;
        left: -10.5rem;
        display: block
    }
}

.front-hero__slider .slide-browser .layer-2 .description {
    position: absolute;
    bottom: 7rem;
    left: -14rem;
    color: #fff;
    width: 12.5rem;
    display: none;
    text-align: right
}

.front-hero__slider .slide-browser .layer-2 .description:after {
    content: "\F178";
    font-family: Font Awesome\ 5 Pro;
    margin-left: .25rem
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-browser .layer-2 .description {
        display: inline-block
    }
}

.front-hero__slider .slide-laptop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.front-hero__slider .slide-laptop .layer-1 {
    opacity: 0;
    transform: translateY(-4rem) rotateX(-30deg) rotateY(30deg);
    transform-origin: center center;
    transition: transform .7s, opacity .7s;
    position: relative;
    height: 27.1875rem
}

@media (min-width: 576px) {
    .front-hero__slider .slide-laptop .layer-1 {
        height: 40.625rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-1 {
        height: 38.75rem
    }
}

.front-hero__slider .slide-laptop .layer-1 .device-wrapper, .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper {
    position: absolute;
    top: 15%;
    overflow-y: hidden;
    left: 50%;
    transform: translateX(-50%)
}

.front-hero__slider .slide-laptop .layer-1 .device-wrapper img, .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img {
    width: 25rem;
    display: block;
    margin: 0 auto
}

@media (min-width: 576px) {
    .front-hero__slider .slide-laptop .layer-1 .device-wrapper img, .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img {
        width: 31.25rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-laptop .layer-1 .device-wrapper img, .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img {
        width: 37.5rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-1 .device-wrapper img, .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img {
        width: 50rem;
        margin: 0 0 auto
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-1 .device-wrapper, .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper {
        width: 100%
    }
}

.front-hero__slider .slide-laptop .layer-1 .device-wrapper {
    z-index: 1500;
    overflow: visible;
    top: 0
}

@media (min-width: 576px) {
    .front-hero__slider .slide-laptop .layer-1 .device-wrapper {
        width: 34.375rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-laptop .layer-1 .device-wrapper {
        width: 37.5rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-1 .device-wrapper {
        top: 3rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-1 .device-wrapper img {
        position: relative;
        left: -7rem
    }
}

.front-hero__slider .slide-laptop .layer-1 .scroll-wrapper {
    padding: 0 .8rem;
    top: 2.75rem;
    z-index: -1;
    height: 11.75rem;
    left: 12.5rem
}

@media (min-width: 576px) {
    .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper {
        height: 15.625rem;
        width: 37.75rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper {
        left: 21.8125rem;
        height: 20rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper {
        height: 23.75rem;
        left: 18rem;
        top: 5.5625rem;
        width: 37.8125rem
    }
}

.front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img {
    width: 18.875rem;
    height: auto !important;
    position: relative;
    top: 0
}

.front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img.animating {
    -webkit-animation: scrollMobile-browser 6s infinite;
    animation: scrollMobile-browser 6s infinite;
    -webkit-animation-timing-function: cubic-bezier(1, .005, .305, 1);
    animation-timing-function: cubic-bezier(1, .005, .305, 1)
}

@media (min-width: 576px) {
    .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img {
        top: .7rem;
        left: 4.7rem;
        width: 25rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img {
        top: 1.4rem;
        left: -3.2rem;
        width: 28.5625rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-1 .scroll-wrapper img {
        top: 0;
        left: -1.4rem;
        width: 39.25rem
    }
}

.front-hero__slider .slide-laptop .layer-2 {
    position: relative;
    transform: translateY(1rem) scale(.5);
    transition: all .5s;
    transition-delay: 0s;
    opacity: 0;
    display: none
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-2 {
        display: block
    }
}

.front-hero__slider .slide-laptop .layer-2 .name {
    position: absolute;
    right: 0;
    bottom: 10rem;
    color: #fff;
    padding-top: .7rem;
    border-top: 1px solid #fff;
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: right;
    width: 9.5625rem;
    display: none
}

@media (min-width: 576px) {
    .front-hero__slider .slide-laptop .layer-2 .name {
        border-top: 2px solid #fff;
        bottom: 20rem;
        display: block
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-2 .name {
        border-top: 2px solid #fff;
        bottom: 10rem;
        left: -15.5rem
    }
}

.front-hero__slider .slide-laptop .layer-2 .description {
    position: absolute;
    bottom: 8.5rem;
    left: -18.3rem;
    color: #fff;
    width: 12.5rem;
    display: none;
    text-align: right
}

.front-hero__slider .slide-laptop .layer-2 .description:after {
    content: "\F178";
    font-family: Font Awesome\ 5 Pro;
    margin-left: .25rem
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-laptop .layer-2 .description {
        display: inline-block
    }
}

.front-hero__slider .slide-tablet {
    /*position: absolute;*/
    /*top: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*left: 0*/
}

.front-hero__slider .slide-tablet .layer-1 {
    opacity: 0;
    transform: translateY(-4rem) rotateX(-30deg) rotateY(30deg);
    transform-origin: center center;
    transition: transform .7s, opacity .7s;
    position: relative;
    height: 27.1875rem;
    overflow-y: hidden
}

@media (min-width: 576px) {
    .front-hero__slider .slide-tablet .layer-1 {
        height: 40.625rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-tablet .layer-1 {
        height: 42.75rem
    }
}

.front-hero__slider .slide-tablet .layer-1 .device-wrapper, .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper {
    position: absolute;
    top: 6rem;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%)
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-tablet .layer-1 .device-wrapper, .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper {
        width: 66%
    }
}

.front-hero__slider .slide-tablet .layer-1 .device-wrapper img, .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
    width: 15.625rem;
    display: block;
    margin: 0 auto
}

@media (min-width: 576px) {
    .front-hero__slider .slide-tablet .layer-1 .device-wrapper img, .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
        width: 25rem;
        margin: 0 0 auto
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-tablet .layer-1 .device-wrapper img, .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
        width: 17.625rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-tablet .layer-1 .device-wrapper img, .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
        width: 25rem
    }
}

.front-hero__slider .slide-tablet .layer-1 .device-wrapper {
    z-index: 1200
}

.front-hero__slider .slide-tablet .layer-1 .scroll-wrapper {
    padding: 0 .8rem;
    top: 1.5rem;
    z-index: -1;
    height: 23.4375rem
}

@media (min-width: 576px) {
    .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper {
        height: 35.5rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper {
        width: 18.75rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper {
        height: 35.5rem;
        width: 26.25rem;
        left: 13rem
    }
}

.front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
    width: 13.5625rem;
    height: auto !important;
    position: relative;
    top: .5rem
}

.front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img.animating {
    -webkit-animation: scrollMobile-tablet 6s infinite;
    animation: scrollMobile-tablet 6s infinite;
    -webkit-animation-timing-function: cubic-bezier(1, .005, .305, 1);
    animation-timing-function: cubic-bezier(1, .005, .305, 1)
}

@media (min-width: 576px) {
    .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
        top: 1.7rem;
        left: 0;
        width: 21.6875rem
    }
}

@media (min-width: 992px) {
    .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
        width: 15.3125rem;
        left: .9rem;
        top: .7rem
    }
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
        top: 1.7rem;
        width: 21.6875rem
    }
}

.front-hero__slider .slide-tablet .layer-2 {
    position: absolute;
    left: -14rem;
    top: 26rem;
    transform: translateY(1rem) scale(.5);
    transition: all .5s;
    transition-delay: 0s;
    opacity: 0;
    display: none;
    width: 12.5rem;
    text-align: right
}

@media (min-width: 992px) {
    .front-hero__slider .slide-tablet .layer-2 {
        display: block
    }
}

.front-hero__slider .slide-tablet .layer-2 .name {
    color: #fff;
    padding-top: .7rem;
    border-top: 1px solid #fff;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: right;
    display: inline-block;
    margin-bottom: .2rem
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-tablet .layer-2 .name {
        border-top: 2px solid #fff
    }
}

.front-hero__slider .slide-tablet .layer-2 .description {
    color: #fff;
    width: 12.5rem;
    display: none;
    text-align: right
}

.front-hero__slider .slide-tablet .layer-2 .description:after {
    content: "\F178";
    font-family: Font Awesome\ 5 Pro;
    margin-left: .25rem
}

@media (min-width: 1200px) {
    .front-hero__slider .slide-tablet .layer-2 .description {
        display: inline-block
    }
}

.front-hero__slider .slide.active {
    pointer-events: all
}

.front-hero__slider .slide.active .layer-1, .front-hero__slider .slide.active .layer-2 {
    opacity: 1;
    transform: translateY(0) rotateX(0) rotateY(0) rotate(0)
}

.front-hero__slider .slide.active .layer-2 {
    transition-delay: .2s
}

.front-hero__toggle-next, .front-hero__toggle-prev {
    background-color: #000;
    border-color: #000;
    padding: 0;
    width: 3.125rem;
    height: 3.125rem;
    line-height: 2.9375rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000
}

.front-hero__toggle-next:hover, .front-hero__toggle-prev:hover {
    cursor: pointer
}

.front-hero__toggle-prev {
    right: inherit;
    left: 0
}

@media (min-width: 992px) {
    .front-hero__toggle-prev {
        display: none
    }
}

.front-hero.lp-fitness .front-hero__main-text {
    font-size: 1.8rem
}

@media (min-width: 576px) {
    .front-hero.lp-fitness .front-hero__main-text {
        font-size: 2.5rem;
        line-height: 2.5rem
    }
}

.front-about {
    overflow: hidden;
    padding: 2rem 0
}

@media (min-width: 992px) {
    .front-about {
        padding: 4rem 0
    }
}

.front-about__header {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    display: inline-block;
    letter-spacing: .1rem;
    text-align: left;
    width: 100%;
    position: relative;
    overflow: hidden
}

@media (min-width: 992px) {
    .front-about__header {
        padding: 2rem 0
    }
}

.front-about__header span {
    display: inline-block;
    padding: .5rem 1rem .5rem 0;
    background-color: #fff;
    position: relative;
    top: -.5rem
}

.front-about__header:before {
    content: "";
    position: absolute;
    height: 3px;
    left: 0;
    top: .5rem;
    transform: translateY(-50%);
    background-color: #000;
    z-index: -1;
    width: 100%
}

@media (min-width: 992px) {
    .front-about__header:before {
        top: 2.5rem
    }
}

.front-about__content {
    color: #6c757d
}

@media (min-width: 992px) {
    .front-about__content {
        font-size: 2rem;
        font-weight: 300;
        line-height: 2.5rem
    }
}

.front-slider {
    position: relative
}

.front-slider__header {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    display: inline-block;
    letter-spacing: .1rem;
    text-align: left;
    width: 100%;
    position: relative;
    overflow: hidden
}

@media (min-width: 992px) {
    .front-slider__header {
        padding: 2rem 0
    }
}

.front-slider__header span {
    display: inline-block;
    padding: .5rem 1rem .5rem 0;
    background-color: #fff;
    position: relative;
    top: -.5rem
}

.front-slider__header:before {
    content: "";
    position: absolute;
    height: 3px;
    left: 0;
    top: .5rem;
    transform: translateY(-50%);
    background-color: #000;
    z-index: -1;
    width: 100%
}

@media (min-width: 992px) {
    .front-slider__header:before {
        top: 2.5rem
    }
}

.front-slider__slider-wrapper {
    position: relative;
    height: 55vw;
    overflow: hidden
}

.front-slider__slider-wrapper.show-slide-2 .slide-1, .front-slider__slider-wrapper.show-slide-3 .slide-1, .front-slider__slider-wrapper.show-slide-3 .slide-2, .front-slider__slider-wrapper.show-slide-4 .slide-1, .front-slider__slider-wrapper.show-slide-4 .slide-2, .front-slider__slider-wrapper.show-slide-4 .slide-3, .front-slider__slider-wrapper.show-slide-5 .slide-1, .front-slider__slider-wrapper.show-slide-5 .slide-2, .front-slider__slider-wrapper.show-slide-5 .slide-3, .front-slider__slider-wrapper.show-slide-5 .slide-4, .front-slider__slider-wrapper.show-slide-6 .slide-1, .front-slider__slider-wrapper.show-slide-6 .slide-2, .front-slider__slider-wrapper.show-slide-6 .slide-3, .front-slider__slider-wrapper.show-slide-6 .slide-4, .front-slider__slider-wrapper.show-slide-6 .slide-5, .front-slider__slider-wrapper.show-slide-7 .slide-1, .front-slider__slider-wrapper.show-slide-7 .slide-2, .front-slider__slider-wrapper.show-slide-7 .slide-3, .front-slider__slider-wrapper.show-slide-7 .slide-4, .front-slider__slider-wrapper.show-slide-7 .slide-5, .front-slider__slider-wrapper.show-slide-7 .slide-6 {
    transform: translateX(-100%)
}

.front-slider__slider-wrapper .slide {
    position: absolute;
    top: 0;
    display: inline-block;
    width: 90vw;
    transition: all .7s;
    transform: translateX(10vw)
}

@media (min-width: 992px) {
    .front-slider__slider-wrapper .slide:hover img {
        transform: scale(1.1)
    }
}

.front-slider__slider-wrapper .slide.active {
    transform: translateX(0)
}

@media (min-width: 992px) {
    .front-slider__slider-wrapper .slide.active:hover img {
        transform: scale(1)
    }
}

.front-slider__slider-wrapper .slide.active .content {
    opacity: 1;
    transform: translateY(-50%)
}

.front-slider__slider-wrapper .slide img {
    transition: transform .5s;
    max-width: 100%;
    display: inline-block
}

.front-slider__slider-wrapper .slide .content {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-45%);
    width: 21.875rem;
    height: 21.875rem;
    background-color: #fff;
    opacity: 0;
    transition: opacity .4s, transform .4s;
    transition-delay: .5s;
    padding: 2rem
}

.front-slider__slider-wrapper .slide .content .logo {
    display: block
}

.front-slider__slider-wrapper .slide .content .project {
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 2rem;
    letter-spacing: .1rem
}

.front-slider__slider-wrapper .slide .content .info {
    color: #6c757d
}

.front-slider__slider-wrapper .slide-1 {
    z-index: 1000
}

.front-slider__slider-wrapper .slide-2 {
    z-index: 900
}

.front-slider__slider-wrapper .slide-3 {
    z-index: 800
}

.front-slider__slider-wrapper .slide-4 {
    z-index: 700
}

.front-slider__slider-wrapper .slide-5 {
    z-index: 600
}

.front-slider__slider-wrapper .slide-6 {
    z-index: 500
}

.front-slider__slider-wrapper .slide-7 {
    z-index: 400
}

.front-slider__slider-wrapper:hover .active {
    transform: translateX(-4rem)
}

.front-slider__toggle-next {
    background-color: #000;
    border-color: #000;
    padding: 0;
    width: 3.125rem;
    height: 3.125rem;
    line-height: 2.9375rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000
}

@-webkit-keyframes fillBar {
    0% {
        width: 0
    }
    to {
        width: 100%
    }
}

@keyframes fillBar {
    0% {
        width: 0
    }
    to {
        width: 100%
    }
}

@-webkit-keyframes scrollMobile {
    10% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-15%)
    }
    70% {
        transform: translateY(-30%)
    }
    85% {
        transform: translateY(-45%)
    }
    95% {
        transform: translateY(-60%)
    }
    to {
        transform: translateY(0)
    }
}

@keyframes scrollMobile {
    10% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-15%)
    }
    70% {
        transform: translateY(-30%)
    }
    85% {
        transform: translateY(-45%)
    }
    95% {
        transform: translateY(-60%)
    }
    to {
        transform: translateY(0)
    }
}

@-webkit-keyframes scrollMobile-tablet {
    10% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-10%)
    }
    70% {
        transform: translateY(-20%)
    }
    85% {
        transform: translateY(-30%)
    }
    95% {
        transform: translateY(-40%)
    }
    to {
        transform: translateY(0)
    }
}

@keyframes scrollMobile-tablet {
    10% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-10%)
    }
    70% {
        transform: translateY(-20%)
    }
    85% {
        transform: translateY(-30%)
    }
    95% {
        transform: translateY(-40%)
    }
    to {
        transform: translateY(0)
    }
}

@-webkit-keyframes scrollMobile-browser {
    10% {
        transform: translateY(0)
    }
    22% {
        transform: translateY(-12%)
    }
    42% {
        transform: translateY(-30%)
    }
    75% {
        transform: translateY(-42%)
    }
    80% {
        transform: translateY(-58%)
    }
    to {
        transform: translateY(0)
    }
}

@keyframes scrollMobile-browser {
    10% {
        transform: translateY(0)
    }
    22% {
        transform: translateY(-12%)
    }
    42% {
        transform: translateY(-30%)
    }
    75% {
        transform: translateY(-42%)
    }
    80% {
        transform: translateY(-58%)
    }
    to {
        transform: translateY(0)
    }
}



@media screen and (max-width: 768px){
    .front-hero__slider .slide-tablet .layer-1 .device-wrapper{
        width: 100%;
    }
    .front-hero__slider .slide-tablet .layer-1 .scroll-wrapper{
        padding: 0;
    }
    .front-hero__slider .slide-tablet .layer-1{
        height: 30rem;
    }
}