.st--screenshots-slider .owl-item {
    opacity: 1
}

.site-header {
    background-color: rgba(0,0,0,.85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px)
}

    .site-header a {
        color: #999;
        transition: color .15s ease-in-out
    }

        .site-header a:hover {
            color: #fff;
            text-decoration: none
        }

.product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

    .product-device:before {
        position: absolute;
        top: 10%;
        right: 10px;
        bottom: 10%;
        left: 10px;
        content: "";
        background-color: hsla(0,0%,100%,.1);
        border-radius: 5px
    }

.product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5
}

.flex-equal > * {
    -ms-flex: 1;
    flex: 1
}

@media (min-width:768px) {
    .flex-md-equal > * {
        -ms-flex: 1;
        flex: 1
    }
}

.overflow-hidden {
    overflow: hidden
}

.box-preview {
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
    height: 450px;
    min-height: 50vh;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    -webkit-transition: transform .4s,background-position 5s ease-in-out;
    transition: transform .4s,background-position 5s ease-in-out;
    background-position: 0 0;
    display: block;
    position: relative;
    background-color: rgba(0,0,0,.2)
}

    .box-preview img {
        display: block;
        position: relative;
        transition: all 5s ease-in-out;
        width: 100%;
        height: auto;
        display: none
    }

    .box-preview:hover {
        background-position: 0 100%;
        -webkit-transform: translateY(-13px);
        transform: translateY(-13px)
    }

@media only screen and (max-width:1199.98px) {
    .box-preview {
        height: 410px
    }
}

@media only screen and (max-width:991.98px) {
    .box-preview {
        height: 400px;
        min-height: 400px
    }
}

@media only screen and (max-width:767.98px) {
    .box-preview {
        height: 460px;
        min-height: 460px
    }

    .isolayer--deco4 {
        opacity: .1
    }

    .height-100vh-full-screen {
        min-height: 700px !important
    }
}

.box-preview.b-lazy:before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background-color: #fff;
    -webkit-animation: rotateplane 1.2s ease-in-out infinite;
    animation: rotateplane 1.2s ease-in-out infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    visibility: visible;
    opacity: 1;
    margin: -30px auto 0 -30px;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.box-preview.b-lazy.b-loaded:before {
    visibility: hidden;
    opacity: 0
}

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }

    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }

    to {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }

    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }

    to {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}

.awwwards {
    left: 0;
    position: fixed;
    top: 150px;
    z-index: 99999
}

    .awwwards a {
        background: transparent url(../images/awwwards_nominee_w_left.png) no-repeat scroll 0 0;
        display: block;
        width: 70px;
        text-indent: -999999px;
        height: 105px;
        background-size: 100%
    }