@charset "UTF-8";

/* Magnific Popup CSS */

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

.mfp-preloader a {
    color: #CCC;
}

.mfp-preloader a:hover {
    color: #FFF;
}

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
    opacity: 1;
}

.mfp-close:active {
    top: 1px;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
    margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent;
}

.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px;
}

.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7;
}

.mfp-arrow-left {
    left: 0;
}

.mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px;
}

.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
    right: 0;
}

.mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px;
}

.mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}


/* Main image in popup */

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
}


/* The shadow behind the image */

.mfp-figure {
    line-height: 0;
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444;
}

.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {
    /**
       * Remove all paddings around the image on small screen
       */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }
    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box;
    }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0;
    }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }
    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}


/* Slider */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}


/*!
 * Hover.css (http://ianlunn.github.io/Hover/)
 * Version: 2.3.2
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Hover.css Copyright Ian Lunn 2017. Generated with Sass.
 */

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-grow:active,
.hvr-grow:focus,
.hvr-grow:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.hvr-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-shrink:active,
.hvr-shrink:focus,
.hvr-shrink:hover {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

@-webkit-keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

.hvr-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-pulse:active,
.hvr-pulse:focus,
.hvr-pulse:hover {
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes hvr-pulse-grow {
    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes hvr-pulse-grow {
    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.hvr-pulse-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-pulse-grow:active,
.hvr-pulse-grow:focus,
.hvr-pulse-grow:hover {
    -webkit-animation-name: hvr-pulse-grow;
    animation-name: hvr-pulse-grow;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes hvr-pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes hvr-pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

.hvr-pulse-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-pulse-shrink:active,
.hvr-pulse-shrink:focus,
.hvr-pulse-shrink:hover {
    -webkit-animation-name: hvr-pulse-shrink;
    animation-name: hvr-pulse-shrink;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes hvr-push {
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes hvr-push {
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.hvr-push {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-push:active,
.hvr-push:focus,
.hvr-push:hover {
    -webkit-animation-name: hvr-push;
    animation-name: hvr-push;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

.hvr-pop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-pop:active,
.hvr-pop:focus,
.hvr-pop:hover {
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.hvr-bounce-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

.hvr-bounce-in:active,
.hvr-bounce-in:focus,
.hvr-bounce-in:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.hvr-bounce-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

.hvr-bounce-out:active,
.hvr-bounce-out:focus,
.hvr-bounce-out:hover {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.hvr-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-rotate:active,
.hvr-rotate:focus,
.hvr-rotate:hover {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
}

.hvr-grow-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-grow-rotate:active,
.hvr-grow-rotate:focus,
.hvr-grow-rotate:hover {
    -webkit-transform: scale(1.1) rotate(4deg);
    transform: scale(1.1) rotate(4deg);
}

.hvr-float {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-float:active,
.hvr-float:focus,
.hvr-float:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

.hvr-sink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-sink:active,
.hvr-sink:focus,
.hvr-sink:hover {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
}

@-webkit-keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@-webkit-keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

.hvr-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-bob:active,
.hvr-bob:focus,
.hvr-bob:hover {
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

@-webkit-keyframes hvr-hang {
    0% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    50% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
}

@keyframes hvr-hang {
    0% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    50% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
}

@-webkit-keyframes hvr-hang-sink {
    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
}

@keyframes hvr-hang-sink {
    100% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
}

.hvr-hang {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-hang:active,
.hvr-hang:focus,
.hvr-hang:hover {
    -webkit-animation-name: hvr-hang-sink, hvr-hang;
    animation-name: hvr-hang-sink, hvr-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

.hvr-skew {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-skew:active,
.hvr-skew:focus,
.hvr-skew:hover {
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg);
}

.hvr-skew-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.hvr-skew-forward:active,
.hvr-skew-forward:focus,
.hvr-skew-forward:hover {
    -webkit-transform: skew(-10deg);
    transform: skew(-10deg);
}

.hvr-skew-backward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.hvr-skew-backward:active,
.hvr-skew-backward:focus,
.hvr-skew-backward:hover {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
}

@-webkit-keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.hvr-wobble-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-vertical:active,
.hvr-wobble-vertical:focus,
.hvr-wobble-vertical:hover {
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.hvr-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-horizontal:active,
.hvr-wobble-horizontal:focus,
.hvr-wobble-horizontal:hover {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-wobble-to-bottom-right {
    16.65% {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px);
    }
    33.3% {
        -webkit-transform: translate(-6px, -6px);
        transform: translate(-6px, -6px);
    }
    49.95% {
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px);
    }
    66.6% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }
    83.25% {
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes hvr-wobble-to-bottom-right {
    16.65% {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px);
    }
    33.3% {
        -webkit-transform: translate(-6px, -6px);
        transform: translate(-6px, -6px);
    }
    49.95% {
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px);
    }
    66.6% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }
    83.25% {
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.hvr-wobble-to-bottom-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-to-bottom-right:active,
.hvr-wobble-to-bottom-right:focus,
.hvr-wobble-to-bottom-right:hover {
    -webkit-animation-name: hvr-wobble-to-bottom-right;
    animation-name: hvr-wobble-to-bottom-right;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-wobble-to-top-right {
    16.65% {
        -webkit-transform: translate(8px, -8px);
        transform: translate(8px, -8px);
    }
    33.3% {
        -webkit-transform: translate(-6px, 6px);
        transform: translate(-6px, 6px);
    }
    49.95% {
        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px);
    }
    66.6% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }
    83.25% {
        -webkit-transform: translate(1px, -1px);
        transform: translate(1px, -1px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes hvr-wobble-to-top-right {
    16.65% {
        -webkit-transform: translate(8px, -8px);
        transform: translate(8px, -8px);
    }
    33.3% {
        -webkit-transform: translate(-6px, 6px);
        transform: translate(-6px, 6px);
    }
    49.95% {
        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px);
    }
    66.6% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }
    83.25% {
        -webkit-transform: translate(1px, -1px);
        transform: translate(1px, -1px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.hvr-wobble-to-top-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-to-top-right:active,
.hvr-wobble-to-top-right:focus,
.hvr-wobble-to-top-right:hover {
    -webkit-animation-name: hvr-wobble-to-top-right;
    animation-name: hvr-wobble-to-top-right;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-wobble-top {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

@keyframes hvr-wobble-top {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

.hvr-wobble-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

.hvr-wobble-top:active,
.hvr-wobble-top:focus,
.hvr-wobble-top:hover {
    -webkit-animation-name: hvr-wobble-top;
    animation-name: hvr-wobble-top;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

@keyframes hvr-wobble-bottom {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

.hvr-wobble-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.hvr-wobble-bottom:active,
.hvr-wobble-bottom:focus,
.hvr-wobble-bottom:hover {
    -webkit-animation-name: hvr-wobble-bottom;
    animation-name: hvr-wobble-bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-wobble-skew {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

@keyframes hvr-wobble-skew {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

.hvr-wobble-skew {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-skew:active,
.hvr-wobble-skew:focus,
.hvr-wobble-skew:hover {
    -webkit-animation-name: hvr-wobble-skew;
    animation-name: hvr-wobble-skew;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

@keyframes hvr-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

.hvr-buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-buzz:active,
.hvr-buzz:focus,
.hvr-buzz:hover {
    -webkit-animation-name: hvr-buzz;
    animation-name: hvr-buzz;
    -webkit-animation-duration: .15s;
    animation-duration: .15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes hvr-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }
    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

@keyframes hvr-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }
    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

.hvr-buzz-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-buzz-out:active,
.hvr-buzz-out:focus,
.hvr-buzz-out:hover {
    -webkit-animation-name: hvr-buzz-out;
    animation-name: hvr-buzz-out;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.hvr-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-forward:active,
.hvr-forward:focus,
.hvr-forward:hover {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
}

.hvr-backward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-backward:active,
.hvr-backward:focus,
.hvr-backward:hover {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
}

.hvr-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

.hvr-fade:active,
.hvr-fade:focus,
.hvr-fade:hover {
    background-color: #2098D1;
    color: #fff;
}

@-webkit-keyframes hvr-back-pulse {
    50% {
        background-color: rgba(32, 152, 209, 0.75);
    }
}

@keyframes hvr-back-pulse {
    50% {
        background-color: rgba(32, 152, 209, 0.75);
    }
}

.hvr-back-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

.hvr-back-pulse:active,
.hvr-back-pulse:focus,
.hvr-back-pulse:hover {
    -webkit-animation-name: hvr-back-pulse;
    animation-name: hvr-back-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background-color: #2098D1;
    background-color: #2098d1;
    color: #fff;
}

.hvr-sweep-to-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-sweep-to-right:active,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:hover {
    color: #fff;
}

.hvr-sweep-to-right:active:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.hvr-sweep-to-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-sweep-to-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-sweep-to-left:active,
.hvr-sweep-to-left:focus,
.hvr-sweep-to-left:hover {
    color: #fff;
}

.hvr-sweep-to-left:active:before,
.hvr-sweep-to-left:focus:before,
.hvr-sweep-to-left:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.hvr-sweep-to-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-sweep-to-bottom:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-sweep-to-bottom:active,
.hvr-sweep-to-bottom:focus,
.hvr-sweep-to-bottom:hover {
    color: #fff;
}

.hvr-sweep-to-bottom:active:before,
.hvr-sweep-to-bottom:focus:before,
.hvr-sweep-to-bottom:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.hvr-sweep-to-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-sweep-to-top:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-sweep-to-top:active,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:hover {
    color: #fff;
}

.hvr-sweep-to-top:active:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.hvr-bounce-to-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

.hvr-bounce-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-bounce-to-right:active,
.hvr-bounce-to-right:focus,
.hvr-bounce-to-right:hover {
    color: #fff;
}

.hvr-bounce-to-right:active:before,
.hvr-bounce-to-right:focus:before,
.hvr-bounce-to-right:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.hvr-bounce-to-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

.hvr-bounce-to-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-bounce-to-left:active,
.hvr-bounce-to-left:focus,
.hvr-bounce-to-left:hover {
    color: #fff;
}

.hvr-bounce-to-left:active:before,
.hvr-bounce-to-left:focus:before,
.hvr-bounce-to-left:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.hvr-bounce-to-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

.hvr-bounce-to-bottom:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-bounce-to-bottom:active,
.hvr-bounce-to-bottom:focus,
.hvr-bounce-to-bottom:hover {
    color: #fff;
}

.hvr-bounce-to-bottom:active:before,
.hvr-bounce-to-bottom:focus:before,
.hvr-bounce-to-bottom:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.hvr-bounce-to-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

.hvr-bounce-to-top:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-bounce-to-top:active,
.hvr-bounce-to-top:focus,
.hvr-bounce-to-top:hover {
    color: #fff;
}

.hvr-bounce-to-top:active:before,
.hvr-bounce-to-top:focus:before,
.hvr-bounce-to-top:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.hvr-radial-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-radial-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-radial-out:active,
.hvr-radial-out:focus,
.hvr-radial-out:hover {
    color: #fff;
}

.hvr-radial-out:active:before,
.hvr-radial-out:focus:before,
.hvr-radial-out:hover:before {
    -webkit-transform: scale(2);
    transform: scale(2);
}

.hvr-radial-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-radial-in:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e1e1e1;
    border-radius: 100%;
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-radial-in:active,
.hvr-radial-in:focus,
.hvr-radial-in:hover {
    color: #fff;
}

.hvr-radial-in:active:before,
.hvr-radial-in:focus:before,
.hvr-radial-in:hover:before {
    -webkit-transform: scale(0);
    transform: scale(0);
}

.hvr-rectangle-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-rectangle-in:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e1e1e1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-rectangle-in:active,
.hvr-rectangle-in:focus,
.hvr-rectangle-in:hover {
    color: #fff;
}

.hvr-rectangle-in:active:before,
.hvr-rectangle-in:focus:before,
.hvr-rectangle-in:hover:before {
    -webkit-transform: scale(0);
    transform: scale(0);
}

.hvr-rectangle-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-rectangle-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-rectangle-out:active,
.hvr-rectangle-out:focus,
.hvr-rectangle-out:hover {
    color: #fff;
}

.hvr-rectangle-out:active:before,
.hvr-rectangle-out:focus:before,
.hvr-rectangle-out:hover:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.hvr-shutter-in-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-shutter-in-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e1e1e1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-shutter-in-horizontal:active,
.hvr-shutter-in-horizontal:focus,
.hvr-shutter-in-horizontal:hover {
    color: #fff;
}

.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}

.hvr-shutter-out-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-shutter-out-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-shutter-out-horizontal:active,
.hvr-shutter-out-horizontal:focus,
.hvr-shutter-out-horizontal:hover {
    color: #fff;
}

.hvr-shutter-out-horizontal:active:before,
.hvr-shutter-out-horizontal:focus:before,
.hvr-shutter-out-horizontal:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.hvr-shutter-in-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #2098D1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-shutter-in-vertical:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e1e1e1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-shutter-in-vertical:active,
.hvr-shutter-in-vertical:focus,
.hvr-shutter-in-vertical:hover {
    color: #fff;
}

.hvr-shutter-in-vertical:active:before,
.hvr-shutter-in-vertical:focus:before,
.hvr-shutter-in-vertical:hover:before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}

.hvr-shutter-out-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: #e1e1e1;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-shutter-out-vertical:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2098D1;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-shutter-out-vertical:active,
.hvr-shutter-out-vertical:focus,
.hvr-shutter-out-vertical:hover {
    color: #fff;
}

.hvr-shutter-out-vertical:active:before,
.hvr-shutter-out-vertical:focus:before,
.hvr-shutter-out-vertical:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.hvr-border-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-border-fade:active,
.hvr-border-fade:focus,
.hvr-border-fade:hover {
    box-shadow: inset 0 0 0 4px #2098D1, 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-hollow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: background;
    transition-property: background;
    box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-hollow:active,
.hvr-hollow:focus,
.hvr-hollow:hover {
    background: 0 0;
}

.hvr-trim {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-trim:before {
    content: '';
    position: absolute;
    border: #fff solid 4px;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.hvr-trim:active:before,
.hvr-trim:focus:before,
.hvr-trim:hover:before {
    opacity: 1;
}

@-webkit-keyframes hvr-ripple-out {
    100% {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0;
    }
}

@keyframes hvr-ripple-out {
    100% {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0;
    }
}

.hvr-ripple-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-ripple-out:before {
    content: '';
    position: absolute;
    border: #e1e1e1 solid 6px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.hvr-ripple-out:active:before,
.hvr-ripple-out:focus:before,
.hvr-ripple-out:hover:before {
    -webkit-animation-name: hvr-ripple-out;
    animation-name: hvr-ripple-out;
}

@-webkit-keyframes hvr-ripple-in {
    100% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1;
    }
}

@keyframes hvr-ripple-in {
    100% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1;
    }
}

.hvr-ripple-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-ripple-in:before {
    content: '';
    position: absolute;
    border: #e1e1e1 solid 4px;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.hvr-ripple-in:active:before,
.hvr-ripple-in:focus:before,
.hvr-ripple-in:hover:before {
    -webkit-animation-name: hvr-ripple-in;
    animation-name: hvr-ripple-in;
}

.hvr-outline-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-outline-out:before {
    content: '';
    position: absolute;
    border: #e1e1e1 solid 4px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left;
}

.hvr-outline-out:active:before,
.hvr-outline-out:focus:before,
.hvr-outline-out:hover:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}

.hvr-outline-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-outline-in:before {
    pointer-events: none;
    content: '';
    position: absolute;
    border: #e1e1e1 solid 4px;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left;
}

.hvr-outline-in:active:before,
.hvr-outline-in:focus:before,
.hvr-outline-in:hover:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    opacity: 1;
}

.hvr-round-corners {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: border-radius;
    transition-property: border-radius;
}

.hvr-round-corners:active,
.hvr-round-corners:focus,
.hvr-round-corners:hover {
    border-radius: 1em;
}

.hvr-underline-from-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-underline-from-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-underline-from-left:active:before,
.hvr-underline-from-left:focus:before,
.hvr-underline-from-left:hover:before {
    right: 0;
}

.hvr-underline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-underline-from-center:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-underline-from-center:active:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:hover:before {
    left: 0;
    right: 0;
}

.hvr-underline-from-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-underline-from-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 100%;
    right: 0;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: left;
    transition-property: left;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-underline-from-right:active:before,
.hvr-underline-from-right:focus:before,
.hvr-underline-from-right:hover:before {
    left: 0;
}

.hvr-overline-from-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-overline-from-left:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    top: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-overline-from-left:active:before,
.hvr-overline-from-left:focus:before,
.hvr-overline-from-left:hover:before {
    right: 0;
}

.hvr-overline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-overline-from-center:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    top: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-overline-from-center:active:before,
.hvr-overline-from-center:focus:before,
.hvr-overline-from-center:hover:before {
    left: 0;
    right: 0;
}

.hvr-overline-from-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-overline-from-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 100%;
    right: 0;
    top: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transition-property: left;
    transition-property: left;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-overline-from-right:active:before,
.hvr-overline-from-right:focus:before,
.hvr-overline-from-right:hover:before {
    left: 0;
}

.hvr-reveal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-color: #2098D1;
    border-style: solid;
    border-width: 0;
    -webkit-transition-property: border-width;
    transition-property: border-width;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-reveal:active:before,
.hvr-reveal:focus:before,
.hvr-reveal:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-width: 4px;
}

.hvr-underline-reveal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-underline-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-underline-reveal:active:before,
.hvr-underline-reveal:focus:before,
.hvr-underline-reveal:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.hvr-overline-reveal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.hvr-overline-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    background: #2098D1;
    height: 4px;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-overline-reveal:active:before,
.hvr-overline-reveal:focus:before,
.hvr-overline-reveal:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.hvr-glow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

.hvr-glow:active,
.hvr-glow:focus,
.hvr-glow:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.hvr-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

.hvr-shadow:active,
.hvr-shadow:focus,
.hvr-shadow:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

.hvr-grow-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
}

.hvr-grow-shadow:active,
.hvr-grow-shadow:focus,
.hvr-grow-shadow:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.hvr-box-shadow-outset {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}

.hvr-box-shadow-outset:active,
.hvr-box-shadow-outset:focus,
.hvr-box-shadow-outset:hover {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

.hvr-box-shadow-inset {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-box-shadow-inset:active,
.hvr-box-shadow-inset:focus,
.hvr-box-shadow-inset:hover {
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-float-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-float-shadow:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 80%);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}

.hvr-float-shadow:active,
.hvr-float-shadow:focus,
.hvr-float-shadow:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.hvr-float-shadow:active:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:hover:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

.hvr-shadow-radial {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-shadow-radial:after,
.hvr-shadow-radial:before {
    pointer-events: none;
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 5px;
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.hvr-shadow-radial:before {
    bottom: 100%;
    background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%);
}

.hvr-shadow-radial:after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 80%);
}

.hvr-shadow-radial:active:after,
.hvr-shadow-radial:active:before,
.hvr-shadow-radial:focus:after,
.hvr-shadow-radial:focus:before,
.hvr-shadow-radial:hover:after,
.hvr-shadow-radial:hover:before {
    opacity: 1;
}

.hvr-bubble-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-bubble-top:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    border-style: solid;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    left: calc(50% - 10px);
    top: 0;
    border-width: 0 10px 10px;
    border-color: transparent transparent #e1e1e1;
}

.hvr-bubble-top:active:before,
.hvr-bubble-top:focus:before,
.hvr-bubble-top:hover:before {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.hvr-bubble-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-bubble-right:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    border-style: solid;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    top: calc(50% - 10px);
    right: 0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #e1e1e1;
}

.hvr-bubble-right:active:before,
.hvr-bubble-right:focus:before,
.hvr-bubble-right:hover:before {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}

.hvr-bubble-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-bubble-bottom:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    border-style: solid;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    left: calc(50% - 10px);
    bottom: 0;
    border-width: 10px 10px 0;
    border-color: #e1e1e1 transparent transparent;
}

.hvr-bubble-bottom:active:before,
.hvr-bubble-bottom:focus:before,
.hvr-bubble-bottom:hover:before {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.hvr-bubble-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-bubble-left:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    border-style: solid;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    top: calc(50% - 10px);
    left: 0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #e1e1e1 transparent transparent;
}

.hvr-bubble-left:active:before,
.hvr-bubble-left:focus:before,
.hvr-bubble-left:hover:before {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
}

.hvr-bubble-float-top {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-bubble-float-top:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: calc(50% - 10px);
    top: 0;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: transparent transparent #e1e1e1;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-bubble-float-top:active,
.hvr-bubble-float-top:focus,
.hvr-bubble-float-top:hover {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.hvr-bubble-float-top:active:before,
.hvr-bubble-float-top:focus:before,
.hvr-bubble-float-top:hover:before {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.hvr-bubble-float-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-bubble-float-right:before {
    position: absolute;
    z-index: -1;
    top: calc(50% - 10px);
    right: 0;
    content: '';
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #e1e1e1;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-bubble-float-right:active,
.hvr-bubble-float-right:focus,
.hvr-bubble-float-right:hover {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
}

.hvr-bubble-float-right:active:before,
.hvr-bubble-float-right:focus:before,
.hvr-bubble-float-right:hover:before {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}

.hvr-bubble-float-bottom {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-bubble-float-bottom:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: calc(50% - 10px);
    bottom: 0;
    border-style: solid;
    border-width: 10px 10px 0;
    border-color: #e1e1e1 transparent transparent;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-bubble-float-bottom:active,
.hvr-bubble-float-bottom:focus,
.hvr-bubble-float-bottom:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.hvr-bubble-float-bottom:active:before,
.hvr-bubble-float-bottom:focus:before,
.hvr-bubble-float-bottom:hover:before {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.hvr-bubble-float-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-bubble-float-left:before {
    position: absolute;
    z-index: -1;
    content: '';
    top: calc(50% - 10px);
    left: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #e1e1e1 transparent transparent;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-bubble-float-left:active,
.hvr-bubble-float-left:focus,
.hvr-bubble-float-left:hover {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}

.hvr-bubble-float-left:active:before,
.hvr-bubble-float-left:focus:before,
.hvr-bubble-float-left:hover:before {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
}

.hvr-icon-back {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
}

.hvr-icon-back .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-back:active .hvr-icon,
.hvr-icon-back:focus .hvr-icon,
.hvr-icon-back:hover .hvr-icon {
    -webkit-transform: translateX(-4px);
    transform: translateX(-4px);
}

.hvr-icon-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
}

.hvr-icon-forward .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-forward:active .hvr-icon,
.hvr-icon-forward:focus .hvr-icon,
.hvr-icon-forward:hover .hvr-icon {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}

@-webkit-keyframes hvr-icon-down {
    0%,
    100%,
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@keyframes hvr-icon-down {
    0%,
    100%,
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
}

.hvr-icon-down {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-down .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-down:active .hvr-icon,
.hvr-icon-down:focus .hvr-icon,
.hvr-icon-down:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-down;
    animation-name: hvr-icon-down;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes hvr-icon-up {
    0%,
    100%,
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes hvr-icon-up {
    0%,
    100%,
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

.hvr-icon-up {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-up .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-up:active .hvr-icon,
.hvr-icon-up:focus .hvr-icon,
.hvr-icon-up:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-up;
    animation-name: hvr-icon-up;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.hvr-icon-spin {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-spin .hvr-icon {
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.hvr-icon-spin:active .hvr-icon,
.hvr-icon-spin:focus .hvr-icon,
.hvr-icon-spin:hover .hvr-icon {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

@-webkit-keyframes hvr-icon-drop {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%,
    51% {
        opacity: 1;
    }
}

@keyframes hvr-icon-drop {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%,
    51% {
        opacity: 1;
    }
}

.hvr-icon-drop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-drop .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-drop:active .hvr-icon,
.hvr-icon-drop:focus .hvr-icon,
.hvr-icon-drop:hover .hvr-icon {
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-animation-name: hvr-icon-drop;
    animation-name: hvr-icon-drop;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.hvr-icon-fade {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-fade .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-property: color;
    transition-property: color;
}

.hvr-icon-fade:active .hvr-icon,
.hvr-icon-fade:focus .hvr-icon,
.hvr-icon-fade:hover .hvr-icon {
    color: #0F9E5E;
}

@-webkit-keyframes hvr-icon-float-away {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-1em);
        transform: translateY(-1em);
    }
}

@keyframes hvr-icon-float-away {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-1em);
        transform: translateY(-1em);
    }
}

.hvr-icon-float-away {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-float-away .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hvr-icon-float-away:active .hvr-icon,
.hvr-icon-float-away:focus .hvr-icon,
.hvr-icon-float-away:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-float-away;
    animation-name: hvr-icon-float-away;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes hvr-icon-sink-away {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(1em);
        transform: translateY(1em);
    }
}

@keyframes hvr-icon-sink-away {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(1em);
        transform: translateY(1em);
    }
}

.hvr-icon-sink-away {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-sink-away .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hvr-icon-sink-away:active .hvr-icon,
.hvr-icon-sink-away:focus .hvr-icon,
.hvr-icon-sink-away:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-sink-away;
    animation-name: hvr-icon-sink-away;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.hvr-icon-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-grow .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-grow:active .hvr-icon,
.hvr-icon-grow:focus .hvr-icon,
.hvr-icon-grow:hover .hvr-icon {
    -webkit-transform: scale(1.3) translateZ(0);
    transform: scale(1.3) translateZ(0);
}

.hvr-icon-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-shrink .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-shrink:active .hvr-icon,
.hvr-icon-shrink:focus .hvr-icon,
.hvr-icon-shrink:hover .hvr-icon {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

@-webkit-keyframes hvr-icon-pulse {
    25% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    75% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@keyframes hvr-icon-pulse {
    25% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    75% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

.hvr-icon-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-pulse .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-pulse:active .hvr-icon,
.hvr-icon-pulse:focus .hvr-icon,
.hvr-icon-pulse:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-pulse;
    animation-name: hvr-icon-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes hvr-icon-pulse-grow {
    to {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

@keyframes hvr-icon-pulse-grow {
    to {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

.hvr-icon-pulse-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-pulse-grow .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-pulse-grow:active .hvr-icon,
.hvr-icon-pulse-grow:focus .hvr-icon,
.hvr-icon-pulse-grow:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-pulse-grow;
    animation-name: hvr-icon-pulse-grow;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes hvr-icon-pulse-shrink {
    to {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@keyframes hvr-icon-pulse-shrink {
    to {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

.hvr-icon-pulse-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-pulse-shrink .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-pulse-shrink:active .hvr-icon,
.hvr-icon-pulse-shrink:focus .hvr-icon,
.hvr-icon-pulse-shrink:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-pulse-shrink;
    animation-name: hvr-icon-pulse-shrink;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes hvr-icon-push {
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}

@keyframes hvr-icon-push {
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}

.hvr-icon-push {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-push .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-push:active .hvr-icon,
.hvr-icon-push:focus .hvr-icon,
.hvr-icon-push:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-push;
    animation-name: hvr-icon-push;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-icon-pop {
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}

@keyframes hvr-icon-pop {
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}

.hvr-icon-pop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-pop .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-pop:active .hvr-icon,
.hvr-icon-pop:focus .hvr-icon,
.hvr-icon-pop:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-pop;
    animation-name: hvr-icon-pop;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.hvr-icon-bounce {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-bounce .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-bounce:active .hvr-icon,
.hvr-icon-bounce:focus .hvr-icon,
.hvr-icon-bounce:hover .hvr-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.hvr-icon-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-rotate .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-rotate:active .hvr-icon,
.hvr-icon-rotate:focus .hvr-icon,
.hvr-icon-rotate:hover .hvr-icon {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

.hvr-icon-grow-rotate {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-grow-rotate .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-grow-rotate:active .hvr-icon,
.hvr-icon-grow-rotate:focus .hvr-icon,
.hvr-icon-grow-rotate:hover .hvr-icon {
    -webkit-transform: scale(1.5) rotate(12deg);
    transform: scale(1.5) rotate(12deg);
}

.hvr-icon-float {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-float .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-float:active .hvr-icon,
.hvr-icon-float:focus .hvr-icon,
.hvr-icon-float:hover .hvr-icon {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.hvr-icon-sink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-sink .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-sink:active .hvr-icon,
.hvr-icon-sink:focus .hvr-icon,
.hvr-icon-sink:hover .hvr-icon {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
}

@-webkit-keyframes hvr-icon-bob {
    0% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    50% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes hvr-icon-bob {
    0% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    50% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@-webkit-keyframes hvr-icon-bob-float {
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes hvr-icon-bob-float {
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

.hvr-icon-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-bob .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-bob:active .hvr-icon,
.hvr-icon-bob:focus .hvr-icon,
.hvr-icon-bob:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
    animation-name: hvr-icon-bob-float, hvr-icon-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

@-webkit-keyframes hvr-icon-hang {
    0% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
    50% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@keyframes hvr-icon-hang {
    0% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
    50% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@-webkit-keyframes hvr-icon-hang-sink {
    100% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@keyframes hvr-icon-hang-sink {
    100% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
}

.hvr-icon-hang {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-hang .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-hang:active .hvr-icon,
.hvr-icon-hang:focus .hvr-icon,
.hvr-icon-hang:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
    animation-name: hvr-icon-hang-sink, hvr-icon-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

@-webkit-keyframes hvr-icon-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    33.3% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes hvr-icon-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    33.3% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.hvr-icon-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-wobble-horizontal .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-wobble-horizontal:active .hvr-icon,
.hvr-icon-wobble-horizontal:focus .hvr-icon,
.hvr-icon-wobble-horizontal:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-wobble-horizontal;
    animation-name: hvr-icon-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-icon-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes hvr-icon-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.hvr-icon-wobble-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-wobble-vertical .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-wobble-vertical:active .hvr-icon,
.hvr-icon-wobble-vertical:focus .hvr-icon,
.hvr-icon-wobble-vertical:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-wobble-vertical;
    animation-name: hvr-icon-wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes hvr-icon-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

@keyframes hvr-icon-buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

.hvr-icon-buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-buzz .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-buzz:active .hvr-icon,
.hvr-icon-buzz:focus .hvr-icon,
.hvr-icon-buzz:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-buzz;
    animation-name: hvr-icon-buzz;
    -webkit-animation-duration: .15s;
    animation-duration: .15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes hvr-icon-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }
    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

@keyframes hvr-icon-buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }
    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

.hvr-icon-buzz-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.hvr-icon-buzz-out .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-buzz-out:active .hvr-icon,
.hvr-icon-buzz-out:focus .hvr-icon,
.hvr-icon-buzz-out:hover .hvr-icon {
    -webkit-animation-name: hvr-icon-buzz-out;
    animation-name: hvr-icon-buzz-out;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.hvr-curl-top-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-curl-top-left:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    top: 0;
    left: 0;
    background: #fff;
    background: linear-gradient(135deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
    filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
    z-index: 1000;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.hvr-curl-top-left:active:before,
.hvr-curl-top-left:focus:before,
.hvr-curl-top-left:hover:before {
    width: 25px;
    height: 25px;
}

.hvr-curl-top-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-curl-top-right:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    top: 0;
    right: 0;
    background: #fff;
    background: linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.hvr-curl-top-right:active:before,
.hvr-curl-top-right:focus:before,
.hvr-curl-top-right:hover:before {
    width: 25px;
    height: 25px;
}

.hvr-curl-bottom-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-curl-bottom-right:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    background: linear-gradient(315deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.hvr-curl-bottom-right:active:before,
.hvr-curl-bottom-right:focus:before,
.hvr-curl-bottom-right:hover:before {
    width: 25px;
    height: 25px;
}

.hvr-curl-bottom-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
}

.hvr-curl-bottom-left:before {
    pointer-events: none;
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    background: linear-gradient(45deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}

.hvr-curl-bottom-left:active:before,
.hvr-curl-bottom-left:focus:before,
.hvr-curl-bottom-left:hover:before {
    width: 25px;
    height: 25px;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-Light.eot");
    src: local("Cera Pro Light"), local("CeraPro-Light"), url("../fonts/CeraPro/CeraPro-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-Light.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-Light.woff") format("woff"), url("../fonts/CeraPro/CeraPro-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-MediumItalic.eot");
    src: local("Cera Pro Medium Italic"), local("CeraPro-MediumItalic"), url("../fonts/CeraPro/CeraPro-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-MediumItalic.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-MediumItalic.woff") format("woff"), url("../fonts/CeraPro/CeraPro-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-RegularItalic.eot");
    src: local("Cera Pro Regular Italic"), local("CeraPro-RegularItalic"), url("../fonts/CeraPro/CeraPro-RegularItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-RegularItalic.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-RegularItalic.woff") format("woff"), url("../fonts/CeraPro/CeraPro-RegularItalic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-BlackItalic.eot");
    src: local("Cera Pro Black Italic"), local("CeraPro-BlackItalic"), url("../fonts/CeraPro/CeraPro-BlackItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-BlackItalic.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-BlackItalic.woff") format("woff"), url("../fonts/CeraPro/CeraPro-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-Medium.eot");
    src: local("Cera Pro Medium"), local("CeraPro-Medium"), url("../fonts/CeraPro/CeraPro-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-Medium.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-Medium.woff") format("woff"), url("../fonts/CeraPro/CeraPro-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-BoldItalic.eot");
    src: local("Cera Pro Bold Italic"), local("CeraPro-BoldItalic"), url("../fonts/CeraPro/CeraPro-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-BoldItalic.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-BoldItalic.woff") format("woff"), url("../fonts/CeraPro/CeraPro-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-ThinItalic.eot");
    src: local("Cera Pro Thin Italic"), local("CeraPro-ThinItalic"), url("../fonts/CeraPro/CeraPro-ThinItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-ThinItalic.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-ThinItalic.woff") format("woff"), url("../fonts/CeraPro/CeraPro-ThinItalic.ttf") format("truetype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-LightItalic.eot");
    src: local("Cera Pro Light Italic"), local("CeraPro-LightItalic"), url("../fonts/CeraPro/CeraPro-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-LightItalic.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-LightItalic.woff") format("woff"), url("../fonts/CeraPro/CeraPro-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-Black.eot");
    src: local("Cera Pro Black"), local("CeraPro-Black"), url("../fonts/CeraPro/CeraPro-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-Black.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-Black.woff") format("woff"), url("../fonts/CeraPro/CeraPro-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-Bold.eot");
    src: local("Cera Pro Bold"), local("CeraPro-Bold"), url("../fonts/CeraPro/CeraPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-Bold.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-Bold.woff") format("woff"), url("../fonts/CeraPro/CeraPro-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-Regular.eot");
    src: local("Cera Pro Regular"), local("CeraPro-Regular"), url("../fonts/CeraPro/CeraPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-Regular.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-Regular.woff") format("woff"), url("../fonts/CeraPro/CeraPro-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';
    src: url("../fonts/CeraPro/CeraPro-Thin.eot");
    src: local("Cera Pro Thin"), local("CeraPro-Thin"), url("../fonts/CeraPro/CeraPro-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/CeraPro/CeraPro-Thin.woff2") format("woff2"), url("../fonts/CeraPro/CeraPro-Thin.woff") format("woff"), url("../fonts/CeraPro/CeraPro-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

*::after,
*::before {
    box-sizing: border-box;
}

body,
div,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img,
abbr {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ul li {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

legend {
    color: #000;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}

.debug {
    z-index: 999999;
    height: 100vh;
    position: fixed;
    width: 100%;
}

.debug>div {
    height: inherit;
    max-width: 1360px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

@media screen and (max-width: 768px) {
    .debug>div {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 480px) {
    .debug>div {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.debug>div>div {
    height: inherit;
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.debug>div>div>div {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 10px;
    margin-right: 10px;
    width: calc(8.33333% - 20px);
    height: inherit;
    outline: 1px solid #ff0;
    background: rgba(0, 0, 0, 0.5);
}

.container {
    max-width: 1360px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

@media screen and (max-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

html {
    font-size: 12px;
    --text-size: 16px;
    --text-size: 16px;
}

@media screen and (min-width: 1720px) {
    html {
        --text-size: 24px;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media screen and (max-width: 576px) {
    html {
        font-size: 8.5px;
    }
}

@media screen and (max-width: 480px) {
    html {
        --text-size: 16px;
    }
}

body {
    position: relative;
    margin: 0;
    min-width: 320px;
    line-height: 1.5em;
    font-family: "Cera Pro", sans-serif;
    overflow-x: hidden;
    font-size: var(--text-size);
    color: #728596;
    font-weight: 300;
    background: #ffffff;
    background-size: contain;
}

@media screen and (max-width: 1200px) {
    body {
        background: #ffffff;
    }
}

body input,
body textarea {
    border: #666 1px solid;
    outline: none;
}

::-webkit-scrollbar {
    width: 8px;
}


/* Track */

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #0085ff;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #c1c1c1;
}

::selection {
    background-color: #111010;
    color: #fff;
}

::placeholder {
    color: #111010;
}

:-moz-placeholder {
    color: #111010;
}

::-webkit-input-placeholder {
    color: #111010;
}

:-ms-input-placeholder {
    color: #111010;
}

::-ms-input-placeholder {
    color: #111010;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

body input:focus:required:invalid,
body textarea:focus:required:invalid {
    border-color: red;
}

body input:required:valid,
body textarea:required:valid {
    border-color: green;
}

img {
    width: 100%;
    display: block;
}

body *:focus {
    outline: none;
}

body.focus-tab--enable *:focus {
    outline-color: #4d90fe;
    outline-offset: -2px;
    outline-style: auto;
    outline-width: 7px;
}

button:hover,
a:hover,
select:hover {
    cursor: pointer;
}

@media screen and (max-width: 1200px) {
    .intl-tel-input.allow-dropdown .flag-container,
    .intl-tel-input.separate-dial-code .flag-container {
        left: 5%;
    }
}

@media screen and (max-width: 1200px) {
    .intl-tel-input.allow-dropdown input,
    .intl-tel-input.allow-dropdown input[type=tel],
    .intl-tel-input.allow-dropdown input[type=text],
    .intl-tel-input.separate-dial-code input,
    .intl-tel-input.separate-dial-code input[type=tel],
    .intl-tel-input.separate-dial-code input[type=text] {
        padding-left: 95px;
    }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.custom-scroll::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.custom-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #111010;
}

.custom-scroll::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.bounce-infinite {
    animation-name: bounce;
    animation-duration: 3s;
    transform-origin: center bottom;
    animation-iteration-count: infinite;
}

@keyframes stagger {
    0% {
        opacity: 0.7;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
    }
}

.stagger {
    animation-name: stagger;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.rotate {
    animation-name: rotate-inf;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes scaleIn {
    0% {
        opacity: 1;
        transform: scale(1.25);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.scaleIn {
    animation-name: scaleIn;
    animation-duration: 7s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes trftr-y {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    33% {
        opacity: 1;
        transform: translateX(50%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

.btn-animation {
    animation-name: trftr-y;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes size-block {
    0% {
        opacity: 0;
        width: 1%;
        height: 1%;
    }
    33% {
        opacity: 1;
        width: 1%;
        height: 100%;
    }
    100% {
        opacity: 1;
        width: 100%;
        height: 100%;
    }
}

.decor-block-animation {
    animation-name: size-block;
    animation-duration: 2s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
    animation-timing-function: cubic-bezier(0.29, 1.11, 0.61, 0.96);
}

@keyframes font-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.font-opacity {
    animation-name: font-opacity;
    animation-duration: 0.25s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

.bg-color-animate {
    animation-name: bg-amimate;
    animation-duration: 1s;
    animation-delay: .1s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
    transform-origin: 100% 50%;
}

@keyframes bg-amimate {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes shake {
    0%,
    to {
        transform: translateZ(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }
    30%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    animation-name: shake;
    animation-duration: 1s;
}

@keyframes shake-focus {
    0%,
    to {
        transform: translateZ(0) translateY(-110%);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, -110%, 0);
    }
    30%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, -110%, 0);
    }
}

.shake-focus {
    animation-name: shake-focus;
    animation-duration: 1s;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    animation-name: fadeInRight;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px);
    }
}

.flipInY:not(#some) {
    z-index: 1;
    animation-duration: .4s;
    animation-name: flipInY;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.mfp-3d-unfold .mfp-content {
    perspective: 2000px;
}

.mfp-3d-unfold .mfp-with-anim {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform-style: preserve-3d;
    transform: rotateY(-60deg);
}

.mfp-3d-unfold .mfp-bg {
    opacity: 0;
    transition: all 0.5s;
}

.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: rotateY(0deg);
}

.mfp-ready .mfp-bg {
    opacity: 0.8;
}

.mfp-removing .mfp-with-anim {
    transform: rotateY(60deg);
    opacity: 0;
}

.mfp-removing .mfp-bg {
    opacity: 0;
}

@keyframes clipOpen {
    from {
        clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

.clipOpen {
    z-index: 1;
    animation-duration: 1s;
    animation-name: clipOpen;
    animation-fill-mode: forwards;
    backface-visibility: visible;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes pulseSlow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}

.pulseSlow {
    animation-name: pulseSlow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.wow:not(#some) {
    opacity: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.js-input-focus:not(#some) .main-form__text {
    transform: translateY(-110%);
}

.js-no-valid:not(#some)+.main-form-content svg {
    fill: red;
}

.js-no-valid:not(#some) {
    border-bottom: 1px solid red;
}

.overflow--hidden:not(#some) {
    overflow: hidden;
    margin-right: 10px;
}

.color--wc {
    color: #fff;
}

.color--bc {
    color: #000;
}

.color--mc {
    color: #111010;
}

.fill--mc svg {
    fill: #111010;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.page__inner {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.page__inner .page__content {
    flex-grow: 1;
}

.page__inner .page__footer-wrapper {
    flex-shrink: 0;
}

.section-pading--top {
    padding-top: 60px;
}

.pagination {
    margin: auto auto 0;
}

.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .dots {
    margin: 0 5px;
    color: #111010;
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
}

.pagination .page-numbers.current:not(.dots) {
    margin: 0 5px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #111010;
    border-radius: 50%;
    text-decoration: none;
}

.pagination .page-numbers.current:not(.dots):hover {
    transform: translateY(0);
}

.pagination .page-numbers:not(.dots) {
    margin: 0 5px;
    display: flex;
    width: 34px;
    height: 34px;
    justify-content: center;
    align-items: center;
    color: #111010;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
}

.pagination .page-numbers:not(.dots):hover {
    transform: translateY(-5px);
}

.pagination .prev,
.pagination .next {
    display: flex;
    transition: all 0.3s;
}

.pagination .prev svg,
.pagination .next svg {
    width: 20px;
    height: 10px;
    fill: #22223E;
}

.pagination .prev {
    margin-right: 25px;
}

.pagination .prev svg {
    margin-left: -12px;
    transform: rotate(90deg);
}

.pagination .prev:hover {
    transform: translateX(-5px);
}

.pagination .next {
    margin-left: 25px;
    transform: translateX(0px) rotate(180deg);
}

.pagination .next svg {
    margin-right: -12px;
    transform: rotate(90deg);
}

.pagination .next:hover {
    transform: translateX(5px) rotate(180deg);
}

.breadcrumb {
    z-index: 6;
    margin-left: -25px;
    padding: 16px 0;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    letter-spacing: 0.32px;
}

.breadcrumb li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: #111010;
    list-style: none;
}

.breadcrumb li a {
    position: relative;
    padding: 0 25px;
    font-family: "Cera Pro", sans-serif;
    font-size: 18px;
    color: #111010;
}

.breadcrumb li a::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 3px;
    height: 3px;
    background-color: #000;
    transform: translate(50%, -50%);
    content: '';
}

.breadcrumb li:last-child {
    padding: 0 25px;
    font-family: "Cera Pro", sans-serif;
    font-size: 18px;
    color: #000;
}

.button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-transform: uppercase;
    color: #22223E;
    background: transparent;
    border: none;
}

.button:hover .button__text {
    margin-left: -45px;
    letter-spacing: 0.2em;
    color: #111010;
}

.button:hover .button__sircle,
.button:hover svg {
    stroke: #111010;
}

.button__sircle,
.button svg {
    width: 80px;
    height: 80px;
    fill: transparent;
    stroke: #22223E;
    transform: rotate(45deg);
    transition: all 0.3s;
}

.button__text {
    margin-left: -40px;
    letter-spacing: 0.8em;
    text-transform: uppercase;
    transition: all 0.3s;
}

.section__title {
    z-index: 5;
    margin: 0 auto 5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 30px;
    line-height: 1.3em;
}

.hover-underline {
    position: relative;
}

.hover-underline::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    display: block;
    height: 1px;
    width: 100%;
    content: '';
    transform: scale(0);
}

.hover-underline:hover::after {
    transition: 0.4s;
    transform: scale(1);
}

.underline-color--white::after {
    background-color: #fff;
}

.underline-color--dark::after {
    background-color: #111010;
}

.main-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 100%;
}

.main-form-block {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 200px;
    height: 36px;
}

.main-form-content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.main-form__text {
    display: flex;
    align-items: center;
    color: #fff;
    font-family: "Cera Pro", sans-serif;
    pointer-events: none;
    transform: translateY(0%);
    transition: all 0.4s;
}

.main-form__input {
    width: 100%;
    height: 36px;
    color: #fff;
    background: transparent;
    border: none;
    font-family: "Cera Pro", sans-serif;
    border-bottom: 1px solid #848484;
}

.filter__checkbox {
    display: none;
    visibility: hidden;
    opacity: 0;
}

.filter__checkbox+label {
    margin: 0 10px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #4F90B6;
    transition: all 0.4s;
}

.filter__checkbox+label:hover {
    cursor: pointer;
    background-color: #2b2929;
}

.filter__checkbox:checked+label {
    background-color: #111010;
    color: #fff;
    cursor: pointer;
    border: 1px solid transparent;
}

.filter__checkbox:checked+label:hover {
    cursor: pointer;
    background-color: #111010;
}

.irs--flat .irs-line {
    height: 2px;
    background-color: #000;
}

.irs--flat .irs-bar {
    height: 2px;
    background-color: #4F90B6;
}

.irs--flat .irs-handle {
    width: 10px;
    height: 10px;
    background-color: #111010;
}

.irs--flat .irs-handle>i:first-child {
    background-color: #111010;
}

.irs--flat .irs-handle.state_hover>i:first-child,
.irs--flat .irs-handle:hover>i:first-child {
    background: #111010;
    cursor: pointer;
}

.irs--flat .irs-handle.state_hover>i:first-child,
.irs--flat .irs-handle:hover>i {
    background: #111010;
    cursor: pointer;
}

.range-item input[type=number] {
    font-size: 14px;
    background-color: transparent;
    border: none;
    font-family: "Cera Pro", sans-serif;
}

.filter-results-item {
    position: relative;
    margin-bottom: 20px;
    width: 25%;
    padding: 0 20px;
    transition: all .4s;
}

@media screen and (max-width: 880px) {
    .filter-results-item {
        width: 33%;
    }
}

@media screen and (max-width: 640px) {
    .filter-results-item {
        width: 48%;
    }
}

@media screen and (max-width: 576px) {
    .filter-results-item {
        width: 80%;
    }
}

@media screen and (max-width: 425px) {
    .filter-results-item {
        width: 100%;
    }
}

.filter-results-item__link {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.filter-results-item__img {
    margin-bottom: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-results-item__img img {
    height: auto;
    max-height: 100%;
    max-width: 85%;
}

.filter-results-item__table {
    margin-top: auto;
    margin-bottom: 20px;
    width: 100%;
    color: #000;
    font-family: "Cera Pro", sans-serif;
}

.filter-results-item__button {
    display: flex;
    width: 100%;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    align-items: center;
    color: #111010;
    border: 1px solid #E5DF06;
}

.progress-list {
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px);
    display: flex;
    flex-wrap: wrap;
}

.progress-item {
    margin: 0 20px 30px;
    min-width: 300px;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1024px) {
    .progress-item {
        margin: 0 5px 30px;
    }
}

@media screen and (max-width: 576px) {
    .progress-item {
        flex-direction: column;
    }
}

.progress-item__title {
    min-width: 120px;
    margin-right: 10px;
    font-family: "Cera Pro", sans-serif;
}

@media screen and (max-width: 1024px) {
    .progress-item__title {
        min-width: 95px;
    }
}

@media screen and (max-width: 576px) {
    .progress-item__title {
        margin-right: 0px;
        margin-bottom: 15px;
        min-width: 95px;
        text-align: center;
    }
}

.progress-item .wrapper {
    display: inline-block;
    position: relative;
    background-color: #E5DF06;
    width: 300px;
    height: 40px;
}

.progress-item .wrapper .line--white {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 300px;
    background-color: #fff;
    border: 1px solid #afafaf;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .7px;
    text-align: center;
    line-height: 40px;
    transition: all 5s;
}

.progress-item .wrapper .line--accent {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 300px;
    background-color: #111010;
    color: #fff;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .7px;
    text-align: center;
    line-height: 40px;
    transition: all 5s;
}

.language {
    position: relative;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.language a {
    font-size: 14px;
    color: #000;
}

.lang--active {
    display: block;
    line-height: 1em;
}

.language-btn {
    position: relative;
    background-color: transparent;
    display: block;
    transition: all 0.3s;
}

.language-btn svg {
    width: 14px;
    height: 8px;
    transition: all 0.3s;
}

.svg--active .language-btn {
    transform: rotate(-180deg);
}

.language-btn:hover {
    transform: rotate(-180deg);
}

.language:hover .lang--active {
    transition: all 0.4s;
    transform: translateY(-140%);
}

@media screen and (max-width: 425px) {
    .language:hover .lang--active {
        transform: translateY(-120%);
    }
}

.lang__item {
    line-height: 1.5em;
}

@media screen and (max-width: 425px) {
    .lang__item {
        line-height: 1.2em;
    }
}

.lang_dropdown {
    position: absolute;
    top: -2px;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 46.33px;
    max-height: 0;
    overflow: hidden;
    list-style: none;
    transition: .35s;
}

.lang-dropdown--active {
    max-height: 60px;
    opacity: 1;
}

.preload-num::after {
    content: '%';
}

header.header {
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--white);
    padding-top: 32px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    padding: 20px var(--side-fields) 20px var(--side-fields);
    background-color: var(--blue);
    font-weight: bold;
    font-size: 18px;
    line-height: 1em;
    text-transform: uppercase;
    justify-content: space-between;
    transition: background-color .5s;
}

header.header .close-svg {
    display: none;
}

@media screen and (min-width: 1720px) {
    header.header {
        font-size: 24px;
        padding: 20px 30px 20px 30px;
    }
}

@media screen and (max-width: 768px) {
    header.header {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    header.header {
        padding: 10px var(--side-fields) 10px var(--side-fields);
        flex-wrap: wrap;
        width: 100vw;
        background-color: var(--blue);
    }
}

.header-telephone {
    color: var(--white);
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 1.1em;
}

.header-telephone .button {
    margin-right: 20px;
}

@media screen and (min-width: 1720px) {
    .header-telephone {
        font-size: 24px;
    }
}

@media screen and (min-width: 769px) {
    .header-telephone:before {
        content: '';
        width: 19px;
        height: 18px;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5097 14.3514L16.5163 14.3449L16.5227 14.3383C17.2812 13.5576 17.1163 12.3024 16.1733 11.7114L16.1621 11.7043L16.1506 11.6975L13.2863 10.0065L13.0511 9.86765H12.9722C12.2568 9.61754 11.5351 9.91584 11.1351 10.219L11.0771 10.263L11.026 10.3149L10.4866 10.8635C10.2582 10.7732 10.0144 10.6192 9.7403 10.3961C9.4877 10.1906 9.27526 9.9862 9.04104 9.76082C8.90563 9.63051 8.76295 9.4932 8.60101 9.34463L8.601 9.34462C8.01927 8.81091 7.46176 8.14997 7.16988 7.48853L7.56335 7.09526L7.5634 7.0953L7.57126 7.08727C8.07938 6.56786 8.30329 5.74509 7.94007 4.96985L7.93007 4.9485L7.91907 4.92765L6.33111 1.91646L6.31053 1.87743L6.28659 1.84037C6.0643 1.4962 5.6988 1.13935 5.16733 1.03104C4.60735 0.91692 4.10302 1.12602 3.73012 1.44321L3.69952 1.46924L3.6711 1.49764L1.71029 3.45746C1.15904 3.97459 1.01313 4.67749 1.00383 5.21549C0.943911 6.58549 1.61961 8.03892 2.06774 8.96642L2.07555 8.98259L2.08394 8.99847C3.3996 11.489 5.47091 13.5079 7.6632 15.1028L7.68449 15.1183L7.70656 15.1326C9.03134 15.9936 10.7979 16.9411 12.748 16.9996L12.7636 17L12.7791 17C13.3221 16.9993 14.0028 16.8519 14.5409 16.3044L16.5097 14.3514Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
        margin-right: 15px;
    }
}

@media screen and (max-width: 768px) {
    .header-telephone {
        font-size: 16px;
    }
    .header-telephone:before {
        content: url("data:image/svg+xml,%3Csvg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5653 11.0253L12.5719 11.0188L12.5783 11.0121C13.2507 10.32 13.0984 9.21038 12.2756 8.69459L12.2643 8.68753L12.2528 8.68076L10.2069 7.4729L9.97168 7.33403H9.88483C9.26939 7.14054 8.67132 7.40135 8.35246 7.64302L8.29447 7.68698L8.24345 7.73886L8.00254 7.98387C7.9158 7.93299 7.81886 7.86491 7.7091 7.77561C7.53663 7.6353 7.39873 7.50244 7.23853 7.34809C7.14096 7.25408 7.03512 7.15211 6.90817 7.03563L6.90815 7.03562C6.557 6.71346 6.23841 6.34126 6.03958 5.9777L6.1758 5.84155L6.17585 5.8416L6.18371 5.83356C6.62058 5.38698 6.8171 4.67342 6.50163 4.0001L6.49163 3.97875L6.48063 3.9579L5.34637 1.80705L5.32579 1.76802L5.30185 1.73096C5.11703 1.44481 4.79859 1.12557 4.31943 1.02793C3.81177 0.924468 3.36503 1.11727 3.05068 1.38466L3.02008 1.41069L2.99166 1.43909L1.59419 2.83586C1.12612 3.27717 1.01081 3.86487 1.00285 4.28804C0.957826 5.34889 1.47651 6.44916 1.79113 7.10031L1.79894 7.11648L1.80733 7.13236C2.77435 8.96293 4.29017 10.4357 5.87706 11.5902L5.89835 11.6057L5.92042 11.62C6.87638 12.2413 8.19374 12.9554 9.66858 12.9996L9.68416 13L9.69974 13C10.1353 12.9995 10.7054 12.8809 11.1603 12.419L12.5653 11.0253Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
        margin-right: 20px;
    }
}

@media screen and (max-width: 480px) {
    .header-telephone:before {
        content: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5653 11.0253L12.5719 11.0188L12.5783 11.0121C13.2507 10.32 13.0984 9.21038 12.2756 8.69459L12.2643 8.68753L12.2528 8.68076L10.2069 7.4729L9.97168 7.33403H9.88483C9.26939 7.14054 8.67132 7.40135 8.35246 7.64302L8.29447 7.68698L8.24345 7.73886L8.00254 7.98387C7.9158 7.93299 7.81886 7.86491 7.7091 7.77561C7.53663 7.6353 7.39873 7.50244 7.23853 7.34809C7.14096 7.25408 7.03512 7.15211 6.90817 7.03563L6.90815 7.03562C6.557 6.71346 6.23841 6.34126 6.03958 5.9777L6.1758 5.84155L6.17585 5.8416L6.18371 5.83356C6.62058 5.38698 6.8171 4.67342 6.50163 4.0001L6.49163 3.97875L6.48063 3.9579L5.34637 1.80705L5.32579 1.76802L5.30185 1.73096C5.11703 1.44481 4.79859 1.12557 4.31943 1.02793C3.81177 0.924468 3.36503 1.11727 3.05068 1.38466L3.02008 1.41069L2.99166 1.43909L1.59419 2.83586C1.12612 3.27717 1.01081 3.86487 1.00285 4.28804C0.957826 5.34889 1.47651 6.44916 1.79113 7.10031L1.79894 7.11648L1.80733 7.13236C2.77435 8.96293 4.29017 10.4357 5.87706 11.5902L5.89835 11.6057L5.92042 11.62C6.87638 12.2413 8.19374 12.9554 9.66858 12.9996L9.68416 13L9.69974 13C10.1353 12.9995 10.7054 12.8809 11.1603 12.419L12.5653 11.0253Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
        width: 15px;
        height: 15px;
        margin-right: 0;
    }
    .header-telephone>span {
        display: none;
    }
}

.form-call-button {
    position: relative;
    --pseudo-width: 36px;
    padding-right: calc(var(--pseudo-width) + 10px);
    cursor: pointer;
}

@media screen and (min-width: 769px) and (max-width: 1719px) {
    .form-call-button {
        font-size: 18px;
    }
}

.form-call-button:after {
    content: '';
    transition: .5s;
    width: var(--pseudo-width);
    position: absolute;
    right: 0;
    top: calc(50% - 1px);
    height: 2px;
    background-color: var(--white);
    transform-origin: left;
}

@media screen and (min-width: 769px) {
    .form-call-button:hover:after {
        transform: scaleX(1.2);
    }
}

.menu-button {
    order: 2;
    margin-right: 0;
    cursor: pointer;
    align-self: center;
}

.menu-button>span {
    margin-right: 20px;
    display: inline-block;
    font-size: 18px;
    line-height: 1.1em;
    position: relative;
    bottom: 3px;
}

@media screen and (min-width: 1720px) {
    .menu-button {
        align-self: center;
    }
    .menu-button .open-svg {
        position: relative;
        top: 2px;
        width: 45px;
        height: 19px;
    }
    .menu-button>span {
        font-size: 24px;
        margin-right: 10px;
        position: relative;
        bottom: 1px;
    }
}

.menu-button rect {
    transition: .5s;
}

@media screen and (min-width: 576px) {
    .menu-button {
        margin-left: 60px;
    }
}

@media screen and (max-width: 768px) {
    .menu-button {
        order: 2;
    }
    .menu-button>span {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .menu-button {
        display: flex;
    }
    .menu-button>span {
        font-size: 14px;
        margin-right: 5px;
    }
    .menu-button>svg {
        width: 26px;
        height: 9px;
        transform: translateY(3px);
    }
}

.slide-wrapper {
    display: none;
}

.menu-button {
    cursor: pointer;
}

.menu-button path {
    transition: .5s;
}

.menu-button:hover .open-svg path {
    transform: matrix(1, -0.2, 0, 1, 0, 2);
}

@media screen and (max-width: 768px) {
    .menu-button {
        align-self: center;
    }
}

.lang-block {
    width: 58px;
    max-height: 1.6em;
    height: 1.6em;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-right: 15px;
    cursor: pointer;
}

.lang-block:hover:after {
    transform: rotate(-90deg);
}

.lang-block:after {
    transition: .5s;
    position: absolute;
    margin-left: 25px;
    transform-origin: center;
    right: 0cm;
    content: '';
    background-image: url(../images/common/language-birdy.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 19px;
    height: 11px;
    display: inline-block;
    top: 0.8em;
    transform: translateY(-50%);
    left: 10px;
    transform-box: fill-box;
}

.lang-block:hover:after {
    transform: rotate(180deg) translateY(50%);
}

.lang-block a {
    color: #fff;
    line-height: 1.5em;
    display: flex;
    align-items: center;
}

.lang-block:hover {
    overflow: visible;
}

.lang-block:hover .innactive-langs {
    animation: fadeInDown var(--transition) 1 ease-in-out;
    left: -10px;
    padding: 0 10px;
}

.lang-block:hover>a:not(.active) {
    position: absolute;
    top: 100%;
}

.lang-block .innactive-langs {
    position: absolute;
    top: 100%;
    background-color: var(--blue);
    transition: .5s;
}

@media screen and (min-width: 1720px) {
    .lang-block:after {
        width: 23px;
        height: 16px;
    }
}

@media screen and (max-width: 768px) {
    .lang-block {
        order: 1;
        margin-right: 20px;
    }
}

@media screen and (max-width: 480px) {
    .lang-block {
        font-size: 14px;
        width: 36px;
    }
    .lang-block:after {
        content: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
        top: 0;
    }
}

.header-telephone,
.form-call-button,
.menu-button {
    margin-right: 60px;
}

@media screen and (min-width: 576px) {
    .menu-button {
        margin-right: 0;
    }
}

@media screen and (max-width: 1100px) {
    .header-telephone,
    .form-call-button,
    .menu-button {
        margin-right: 30px;
    }
}

@media screen and (max-width: 980px) {
    .header-telephone,
    .form-call-button,
    .menu-button {
        margin-right: 15px;
    }
    .form-call-button {
        padding-right: 0;
    }
    .form-call-button:after {
        display: none;
    }
}

@media screen and (max-width: 980px) {
    .form-call-button {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .header-telephone,
    .form-call-button,
    .menu-button {
        margin-right: 40px;
    }
    .menu-button {
        margin-right: 0;
    }
}

@media screen and (max-width: 480px) {
    .header-telephone,
    .form-call-button,
    .menu-button {
        margin-right: auto;
    }
    .menu-button {
        margin-right: 0;
    }
    .header-telephone,
    .form-call-button {
        margin-left: auto;
    }
    .menu-button {
        margin-right: 0;
    }
}

.smarto-logo {
    white-space: nowrap;
    display: flex;
    padding-top: 54px;
    padding-bottom: 42px;
}

.smarto-logo>img {
    width: 70px;
    margin-left: 10px;
    height: 28px;
}

@media screen and (max-width: 768px) {
    .smarto-logo {
        padding-top: 20px;
        padding-bottom: 20px;
        margin: 0 auto;
    }
}

.footer {
    background-color: var(--blue);
    width: 100%;
    font-family: Cera Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 29px;
    /* identical to box height, or 160% */
    text-align: right;
    color: #A3D3FF;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
}

.footer .social-links {
    padding-top: 34px;
    padding-bottom: 34px;
    border-top: 1px solid #2195FF;
    border-bottom: 1px solid #2195FF;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media screen and (max-width: 768px) {
    .footer .copyright-span {
        margin-right: auto;
    }
    .footer .social-links {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .footer .social-links>a:nth-child(-n+2) {
        margin-bottom: 0px;
    }
    .footer .social-links>a {
        font-size: 14px;
        line-height: 16px;
        text-align: left;
        width: 70%;
        align-self: center;
    }
    .footer .smarto-logo {
        margin-right: 0;
        margin-left: auto;
    }
}

@media screen and (max-width: 575px) {
    .footer .social-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 480px) {
    .footer .copyright-span,
    .footer .smarto-logo {
        margin-left: auto;
        margin-right: auto;
    }
}

.footer-adress {
    color: var(--gray);
    font-size: 14px;
    line-height: 20px;
    max-width: 174px;
}

.footer-adress .button {
    margin-top: 12px;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 0;
}

.callback-form {
    width: 490px;
    height: 430px;
    background: url(../images/common/callback-form-bg.png) bottom no-repeat, linear-gradient(0deg, #0085ff 100%, #0085ff 100%);
    background-size: 100%, cover;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 85px 85px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    opacity: 0;
}

.callback-form .close-button {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 38px;
    top: 38px;
    transition: .5s;
}

.callback-form legend {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--white);
    max-width: 75%;
    margin: 0 auto;
    text-align: center;
}

.callback-form button[type=submit] {
    margin-left: auto;
    padding-right: 0;
}

.callback-form .input-group {
    border-bottom: 2px solid #fff;
    width: 100%;
    padding-bottom: 0;
    margin: 0 auto;
}

.callback-form .input-group input,
.callback-form .input-group input::placeholder {
    background: none;
    color: var(--white);
}

@media screen and (max-width: 480px) {
    .callback-form {
        width: 100%;
        padding: 85px 40px;
    }
    .callback-form .input-group {
        width: 100%;
    }
}


/* overlay at start */

.mfp-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfp-fade.mfp-bg {
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}


/* overlay animate in */

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}


/* overlay animate out */

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}


/* content at start */

.mfp-fade.mfp-wrap .mfp-content {
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}


/* content animate it */

.mfp-bg {
    z-index: 10;
}

.mfp-container::before,
.mfp-fade.mfp-wrap .mfp-content::before {
    display: none !important;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    animation-delay: 0.15s;
    animation: fadeInDown 0.75s 1 ease-in;
}


/* content animate out */

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    animation: fadeOutDown .5s 1 ease-in;
    opacity: 1;
}

.wave-callback {
    position: absolute;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    top: 20px;
    left: 20px;
    padding: 20px;
    pointer-events: none;
}

.wave-callback .top-line,
.wave-callback .left-line,
.wave-callback .right-line,
.wave-callback .bottom-line {
    background-color: #60B3FF;
    position: absolute;
}

.wave-callback .river-small-logo {
    width: 52px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

.wave-callback .callback-wave {
    width: 153px;
    height: 29px;
    position: absolute;
    left: 0;
    top: 0;
}

.wave-callback .top-line {
    top: 0;
    height: 2px;
    width: calc(100% - 147px);
    right: 0;
}

.wave-callback .bottom-line {
    bottom: 0;
    height: 2px;
    width: 100%;
    left: 0px;
}

.wave-callback .left-line {
    width: 2px;
    height: calc(100% - 27px);
    bottom: 0;
    left: 0;
}

.wave-callback .right-line {
    width: 2px;
    height: 100%;
    top: 0;
    right: 0;
}

.footer-menu {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 60px;
    margin-bottom: 40px;
    width: 100%;
    --footer-links-color: #A3D3FF;
}

.footer-menu__group {
    width: 25%;
}

.footer-menu__group-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.footer-menu__group-links {
    margin-top: 1em;
    font-size: 12px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--footer-links-color);
}

.footer-menu__group-links-last {
    text-transform: none;
    line-height: 1.6em;
}

.footer-menu__group-links a {
    color: inherit;
    transition: .5s;
    position: relative;
}

.footer-menu__group-links a:after {
    content: url("data:image/svg+xml,%3Csvg width='36' height='2' viewBox='0 0 36 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='1' x2='36' y2='1' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
    opacity: 0;
    transform-origin: left;
    transition: transform .5s;
    margin-left: 10px;
    position: relative;
    bottom: 0.2em;
    display: inline-block;
}

.footer-menu__group-links li {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 1720px) {
    .footer-menu__group-title {
        font-size: 24px;
        line-height: 30px;
    }
    .footer-menu__group-links {
        font-size: 18px;
        line-height: 2em;
    }
}

@media screen and (min-width: 769px) {
    .footer-menu__group-links a:hover {
        color: var(--white);
    }
    .footer-menu__group-links a:hover:after {
        transform: scaleX(1.2);
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    .footer-menu {
        margin-top: 60px;
        margin-bottom: 20px;
    }
    .footer-menu__group {
        width: calc(25% - 20px);
    }
    .footer-menu__group-title {
        font-size: 16px;
    }
}

@media screen and (max-width: 575px) {
    .footer-menu__group {
        width: 50%;
    }
    .footer-menu__group:nth-last-child(-n+2) {
        margin-top: 20px;
    }
    .footer-menu__group-title {
        font-size: 14px;
    }
    .footer-menu__group-links a:after {
        display: none;
    }
}

.page404-wrap {
    height: 100vh;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blue);
}

.page404__title {
    margin-bottom: 50px;
    font-weight: 700;
    line-height: normal;
    font-size: 150px;
    text-align: center;
    animation: tada 3s infinite;
}

@media screen and (max-width: 578px) {
    .page404__title {
        font-size: 70px;
        margin-bottom: 30px;
    }
}

.page404__title-small {
    display: block;
    font-size: 50px;
}

@media screen and (max-width: 578px) {
    .page404__title-small {
        font-size: 30px;
    }
}

.page404__subtitle {
    padding: 0 10px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
}

.page404 .link-wrap {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 578px) {
    .page404 .link-wrap {
        flex-direction: column;
    }
}

.page404 .link-wrap a {
    margin: 0 15px;
    padding: 10px 0;
    display: flex;
    min-width: 220px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: 1px solid var(--blue);
}

.page404 .link-wrap a span {
    z-index: 1;
}

.page404 .link-wrap a::before {
    z-index: 0;
}

@media screen and (max-width: 578px) {
    .page404 .link-wrap a {
        margin: 20px auto;
        width: 70%;
        min-width: 200px;
    }
}

* {
    --side-fields: 30px;
    --transition: .5s;
}

@media screen and (max-width: 768px) {
    * {
        --side-fields: 22px;
    }
}

@media screen and (max-width: 480px) {
    * {
        --side-fields: 14px;
    }
}

#home .main-screen .title,
#gallery .main-screen .title {
    max-width: 350px;
    padding-left: var(--side-padding);
    padding-bottom: var(--side-padding);
}

a[href] {
    text-decoration: none;
}

.page__inner {
    overflow-x: hidden;
    min-height: -webkit-fill-available;
}

.logo {
    --logo-width: 160px;
    width: var(--logo-width);
    height: calc(var(--logo-width * 0.39));
    margin-right: auto;
}

@media screen and (min-width: 1720px) {
    .logo {
        --logo-width: 236px;
    }
}

@media screen and (max-width: 480px) {
    .logo {
        --logo-width: 100px;
        margin-right: 15px;
    }
}

.main-screen {
    min-height: 100vh;
    background: url(../images/main8.webp) center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.main-screen:after {
    content: '';
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 80%, rgba(33, 31, 47, 0.468225) 100%), linear-gradient(-180deg, rgba(0, 0, 0, 0) 53%, rgba(33, 31, 47, 0.85) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
}

.main-screen .title {
    pointer-events: none;
}

.main-screen .scroll-element {
    pointer-events: none;
    margin-top: auto;
    margin-bottom: -70px;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    width: 54%;
    padding: 0 calc(var(--side-fields) + 60px) 0 var(--side-fields);
}

.main-screen .scroll-element svg {
    pointer-events: initial;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.main-screen .slider-counter {
    margin-left: auto;
    position: relative;
    z-index: 2;
}

.main-screen .slider-counter .delimiter {
    height: 0.6em;
}

.main-screen .wave {
    height: calc(100%);
    z-index: 1;
}

.main-screen .arrows,
.main-screen .title {
    position: relative;
    z-index: 1;
}

.main-screen .arrows {
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--side-fields);
}

.main-screen .arrow-prev,
.main-screen .arrow-next {
    pointer-events: initial;
}

@media screen and (min-width: 1720px) {
    .main-screen .scroll-element {
        margin-bottom: -120px;
    }
    .main-screen .slider-counter {
        font-size: 24px;
        width: 65px;
    }
    .main-screen .slider-counter .delimiter svg {
        width: 3px;
        height: 16px;
    }
}

@media screen and (min-width: 481px) {
    .main-screen .scroll-element {
        margin-bottom: -90px;
    }
}

@media screen and (max-width: 768px) {
    .main-screen {
        min-height: -webkit-fill-available;
    }
}

@media screen and (max-width: 480px) {
    .main-screen {
        min-height: calc(100vh - 42px);
    }
}

@media screen and (min-width: 481px) {
    .main-screen .wave {
        height: calc(100%);
        z-index: 1;
    }
}

@media screen and (max-width: 950px) {
    .main-screen .title {
        font-size: 36px;
    }
}

@media screen and (max-width: 768px) {
    .main-screen .scroll-element>svg {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .main-screen .title {
        font-size: 24px;
    }
    .main-screen .scroll-element {
        margin-bottom: 0px;
    }
}

@media screen and (orientation: landscape) and (max-width: 575px) {
    .main-screen {
        height: 200vh !important;
    }
}

.safari-wrap {
    position: absolute;
    z-index: 10;
    width: 100%;
    top: 0;
    left: 0;
}

@media screen and (min-width: 481px) {
    .safari-wrap header {
        width: calc(100% - var(--side-fields) * 2);
        margin: 0 auto;
        margin-top: 40px;
        position: static;
    }
    .safari-wrap header.fixed {
        width: 100%;
        margin-top: 0px;
        position: fixed !important;
    }
}

.main-screen-layout {
    position: relative;
    z-index: 4;
}

.main-screen-layout canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: initial;
    cursor: url("../images/common/cursor-gray.png"), auto !important;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .main-screen-layout canvas {
        pointer-events: none;
    }
}

.video-block {
    position: relative;
    padding-top: 45%;
    width: 100%;
    min-height: auto !important;
}

.video-block .wave {
    top: 0;
    left: 0;
    transform: scaleX(-1);
}

.video-block .title {
    position: relative;
    margin: var(--side-padding);
    margin-left: auto;
}

.video-block .title span {
    justify-content: flex-end;
}

.video-block .wave .desktop {
    width: 598px;
    height: 113px;
}

.video-block .wave .desktop path {
    stroke-width: 3;
}

@media screen and (min-width: 768px) and (max-width: 1720px) {
    .video-block .wave .bottom-line {
        width: calc(100% - 658px);
    }
    .video-block .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 111.7px);
    }
}

@media screen and (min-width: 768px) and (max-width: 768px) {
    .video-block .wave .bottom-line {
        width: calc(100% - 642px);
    }
}

@media screen and (min-width: 1720px) {
    .video-block .wave .three-rows-wave {
        width: 880px;
        height: 166px;
    }
    .video-block .wave .three-rows-wave path {
        stroke-width: 3.5;
    }
    .video-block .wave .bottom-line {
        width: calc(100% - 940px);
    }
    .video-block .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 164px);
    }
}

.video-block video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-block:after {
    content: '';
    transition: .5s;
    pointer-events: none;
    width: calc(160px * 0.65);
    height: calc(108px * 0.65);
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/home/video-play-button2.png);
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 480px) {
    .video-block:after {
        content: '';
        transition: .5s;
        pointer-events: none;
        width: 80px;
        height: 54px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-35%, -50%);
        background: url(../images/home/video-play-button2.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .video-block .wave .mobile {
        width: 200px;
        height: 66px;
    }
    .video-block .wave .mobile path {
        stroke-width: 2.6;
    }
    .video-block .wave .bottom-line {
        width: calc(100% - 228px);
    }
    .video-block .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 65px);
        width: 2px;
        background-color: rgba(255, 255, 255, 0.5);
    }
}

.genplan {
    background-size: cover;
    position: relative;
    --svg-side-coeficient: 0.3912;
    height: calc(100vw * var(--svg-side-coeficient));
}

@media screen and (min-width: 1720px) {
    .genplan .wave svg {
        width: 986px;
        height: 185px;
    }
    .genplan .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 185px);
    }
    .genplan .wave .bottom-line {
        width: calc(100% - 1046px);
    }
    .genplan .link {
        line-height: 1em;
    }
}

@media screen and (min-width: 951px) and (max-width: 1719px) {
    .genplan .wave svg {
        width: 740px;
        left: var(--side-padding);
        bottom: calc(var(--side-padding));
        height: 140px;
    }
    .genplan .wave .bottom-line {
        width: calc(100% - 800px);
    }
    .genplan .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 139px);
    }
}

.genplan.layout {
    min-height: initial;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.25) 80%);
}

.genplan .title {
    align-self: flex-end;
}

.genplan__content {
    padding: var(--side-fields);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: calc(100vw * var(--svg-side-coeficient));
    background: var(--blue);
}

.genplan__content .title {
    padding-left: 0;
    padding-bottom: 0;
    width: 100%;
    margin-top: auto;
    margin-right: auto;
    max-width: 320px;
    position: absolute;
    bottom: var(--side-fields);
    left: var(--side-fields);
}

.genplan .genplan-list li:not(.page-link-group) {
    text-transform: uppercase;
    color: var(--white);
    font-family: Cera Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 1em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 26px;
}

.genplan .genplan-list li:not(.page-link-group):before {
    transition: .5s;
    position: absolute;
    left: 0;
    content: '◼';
    margin-right: 5px;
    color: var(--white);
    font-size: 9px;
    line-height: 1.1vw;
    max-height: 1vw;
    padding-right: 10px;
}

.genplan .genplan-list li:not(.page-link-group):hover:before {
    content: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='20' y='11' width='20' height='2' transform='rotate(-180 20 11)' fill='white'/%3E%3Cpath d='M11 19L20 10L11 0.999998' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
    max-width: 20px;
}

.genplan .genplan-list li span {
    transition: .5s;
}

.genplan .genplan-list li:hover span {
    transform: translateX(10px);
}

.genplan .page-link-group {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
}

.genplan .page-link-group .link {
    margin-bottom: 20px;
}

.genplan .genplan-svg {
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    z-index: -1;
    background: var(--blue);
}

.genplan .genplan-svg svg {
    width: 100%;
    height: 100%;
    transition: .5s;
}

.genplan .genplan-svg path,
.genplan .genplan-svg polygon {
    fill: none;
    stroke: transparent;
    transition: .5s;
    stroke-width: 1;
}

@media screen and (min-width: 1720px) {
    .genplan .genplan-list {
        margin-top: auto;
        margin-bottom: auto;
        margin-right: 66px;
    }
    .genplan .genplan-list li:not(.page-link-group) {
        font-size: 18px;
        line-height: 18px;
    }
}

@media screen and (max-width: 1320px) {
    .genplan .page-link-group {
        margin-top: 3em;
    }
    .genplan .genplan-list li:not(.page-link-group) {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 1220px) {
    .genplan__content {
        width: calc(29.9% + 100px);
        margin-left: -100px;
    }
    .genplan .page-link-group {
        margin-top: 2em;
    }
    .genplan .genplan-list {
        width: 100%;
        column-count: 2;
        break-inside: avoid;
    }
    .genplan .genplan-list li:not(.page-link-group) {
        margin-bottom: 15px;
    }
    .genplan .page-link-group .link {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 1050px) {
    .genplan .page-link-group {
        margin-top: 1.5em;
    }
    .genplan .genplan-list li:not(.page-link-group) {
        margin-bottom: 10px;
    }
    .genplan .genplan-list {
        padding-right: 30px;
    }
}

@media screen and (max-width: 768px) {
    .genplan .genplan-svg {
        width: 100%;
        height: auto;
    }
    .genplan__content {
        background: transparent;
    }
    .genplan .genplan-list {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .genplan {
        --svg-side-coeficient: 0.564;
    }
    .genplan .wave,
    .genplan .title {
        display: none;
    }
}

.genplan-legend-mobile {
    background: url(../images/common/wave-pattern-bg.png) center no-repeat, linear-gradient(0deg, #2f80ed 0%, #2f80ed 100%);
    background-size: cover;
    line-height: 1em;
}

.genplan-legend-mobile .genplan-list {
    padding: 70px;
    display: flex;
    flex-direction: column;
    max-height: calc(1.6em * 17);
    flex-wrap: wrap;
}

.genplan-legend-mobile .title {
    padding-top: 20px;
    line-height: 1.2em;
    padding-left: var(--side-padding);
    padding-bottom: var(--side-padding);
}

.genplan-legend-mobile .genplan-list li {
    width: 32%;
}

.genplan-legend-mobile .genplan-list li:not(.page-link-group) {
    text-transform: uppercase;
    color: var(--white);
    font-family: Cera Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 1em;
    margin-bottom: 1.6em;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 26px;
}

.genplan-legend-mobile .genplan-list li:not(.page-link-group):before {
    transition: .5s;
    position: absolute;
    left: 0;
    content: '◼';
    content: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='1' x2='2' y2='2' stroke='%23ffffff' fill='%23ffffff' stroke-width='0'/%3E%3C/svg%3E%0A");
    margin-right: 5px;
    color: #fff;
    font-size: 9px;
    line-height: 1.1vw;
    max-height: 1vw;
    padding-right: 10px;
}

.genplan-legend-mobile .genplan-list li:not(.page-link-group):hover:before {
    content: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='20' y='11' width='20' height='2' transform='rotate(-180 20 11)' fill='white'/%3E%3Cpath d='M11 19L20 10L11 0.999998' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
    max-width: 20px;
}

.genplan-legend-mobile .genplan-list li span {
    transition: .5s;
}

.genplan-legend-mobile .genplan-list li:hover span {
    transform: translateX(10px);
}

.genplan-legend-mobile .page-link-group {
    display: flex;
    flex-direction: column;
}

.genplan-legend-mobile .page-link-group>a {
    margin-bottom: 25px;
}

@media screen and (min-width: 769px) {
    .genplan-legend-mobile {
        display: none;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .genplan-legend-mobile .title {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .genplan-legend-mobile .genplan-list {
        padding: 20px var(--side-fields);
        padding-top: 0;
        max-height: none;
        flex-direction: row;
    }
    .genplan-legend-mobile .genplan-list li:not(.page-link-group),
    .genplan-legend-mobile .link {
        font-size: 12px;
    }
    .genplan-legend-mobile .genplan-list li {
        width: 50%;
    }
    .genplan-legend-mobile li.page-link-group {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        font-size: 14px;
        padding-top: 0;
    }
    .genplan-legend-mobile li.page-link-group .link {
        width: 45%;
        display: flex;
        align-items: flex-end;
        margin-right: 20%;
    }
    .genplan-legend-mobile .genplan-list li:not(.page-link-group)::before {
        content: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='1' x2='2' y2='2' stroke='%23ffffff' fill='%23ffffff' stroke-width='0'/%3E%3C/svg%3E%0A");
    }
    .genplan-legend-mobile .genplan-list li:not(.page-link-group):hover::before {
        content: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='20' y='11' width='20' height='2' transform='rotate(-180 20 11)' fill='white'/%3E%3Cpath d='M11 19L20 10L11 0.999998' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E%0A");
        max-width: 20px;
    }
}

.about {
    display: flex;
}

.about .left,
.about .right {
    width: 50%;
    position: relative;
}

.about .left {
    position: relative;
}

.about .left__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-left: calc(var(--side-fields) + 42px);
    padding-top: calc(var(--side-fields) + 81px);
    padding-bottom: calc(var(--side-fields) + 81px);
    padding-right: calc(calc(var(--side-fields) + 42px));
}

.about .left .title {
    padding-left: 0;
    margin-top: 20px;
}

.about .left .text {
    max-width: 50%;
    margin-top: auto;
}

.about .left .link {
    margin-top: 40px;
}

.about .left .text,
.about .left .link {
    opacity: 0;
    transform: translateX(100%);
    transition: .5s;
    pointer-events: none;
}

.about .left .link {
    margin-right: 45%;
}

.about .left .text.visible,
.about .left .link.visible {
    opacity: 1;
    transform: translateX(0%);
    pointer-events: initial;
    width: max-content;
}

.about .left .link.visible::after {
    bottom: calc(1em - 10px);
}

.about .right {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 110px;
    padding-bottom: 80px;
    padding-left: calc(100% / 12);
    padding-right: calc(100% / 12);
}

.about .right .bg-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover;
    left: 0;
    object-position: right bottom;
    z-index: -1;
}

.about .right .title {
    padding: 0;
    width: 100%;
    align-self: flex-start;
}

.about .right .subtitle {
    width: 100%;
    margin-bottom: 20px;
}

.about .right .text {
    margin-top: auto;
    padding-right: 30%;
    margin-bottom: 2em;
    margin-top: 2em;
}

.about .right .text-group {
    margin-top: auto;
}

.about .right .link {
    width: max-content;
}

@media screen and (min-width: 1720px) {
    .about .right {
        padding-left: calc(var(--side-fields) + 55px);
        padding-top: calc(var(--side-fields) + 81px);
        padding-bottom: calc(var(--side-fields) + 81px);
        padding-right: calc(calc(var(--side-fields) + 55px));
    }
    .about .left__content {
        padding-left: calc(var(--side-fields) + 55px);
        padding-top: calc(var(--side-fields) + 81px);
        padding-bottom: calc(var(--side-fields) + 81px);
        padding-right: calc(calc(var(--side-fields) + 55px));
    }
    .about .right .text {
        padding-right: 50%;
    }
    .about .right .bg-image {
        object-position: 40% bottom;
    }
}

@media (orientation: landscape) and (max-height: 750px) {
    .about .left .text {
        max-width: 75%;
        margin-top: 25px;
    }
}

@media screen and (min-width: 575px) and (max-width: 768px) {
    .about .left .text {
        max-width: 100%;
        margin-top: auto;
    }
    .about .right .bg-image {
        object-position: right 41%;
    }
}

@media screen and (max-width: 768px) {
    .about .left__content {
        padding-top: calc(var(--side-fields) + 42px);
        padding-bottom: calc(var(--side-fields) + 42px);
    }
    .about .right .text {
        padding-right: 50%;
    }
    .about .left,
    .about .right {
        width: 100%;
    }
    .about .left__content {
        height: 50vh;
    }
}

@media screen and (max-width: 480px) {
    .about .left {
        position: relative;
    }
    .about .left__content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        padding-left: calc(var(--side-fields) + 21px);
        padding-top: calc(var(--side-fields) + 32px);
        padding-bottom: calc(var(--side-fields) + 32px);
        padding-right: calc(calc(var(--side-fields) + 21px));
    }
    .about .left__content {
        height: 100vh;
    }
    .about .left .text {
        max-width: 75%;
    }
    .about .right {
        height: 100vh;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: var(--side-fields);
        padding-right: var(--side-fields);
    }
    .about .right .bg-image {
        object-position: 70%;
    }
}

@media screen and (min-height: 600px) and (orientation: portrait) {
    .about .title {
        font-size: 32px;
    }
}

.distortion-hover__item-img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.distortion-hover__item-img img {
    display: none;
}

.reasons-to-choose {
    display: flex;
    padding: 60px var(--side-fields);
    flex-wrap: wrap;
    justify-content: space-between;
}

.reasons-to-choose .title {
    padding: 0;
    margin-bottom: 1.2em;
}

.reasons-to-choose__block {
    position: relative;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}

.reasons-to-choose__block>video {
    object-fit: cover;
    width: 100%;
    margin-top: auto;
}

.reasons-to-choose__block:nth-child(1) {
    width: calc(41.66667% - 20px);
}

.reasons-to-choose__block:nth-child(2) {
    width: calc(58.33333% - 20px);
}

.reasons-to-choose__block:nth-child(3) {
    width: 100%;
}

.reasons-to-choose__block:nth-child(4) {
    width: calc(58.33333% - 20px);
}

.reasons-to-choose__block:nth-child(5) {
    width: calc(41.66667% - 20px);
}

.reasons-to-choose__block:nth-child(n+2)>video {
    height: 100%;
}

@media screen and (min-width: 1720px) {
    .reasons-to-choose {
        padding-left: 150px;
        padding-right: 150px;
    }
    .reasons-to-choose .title {
        max-width: none;
    }
    .reasons-to-choose__block {
        margin-bottom: 75px;
    }
    .reasons-to-choose__block:nth-child(1) {
        width: calc(100% / 12 * 5 - 32.5px);
    }
    .reasons-to-choose__block:nth-child(2) {
        width: calc(100% / 12 * 7 - 32.5px);
    }
    .reasons-to-choose__block:nth-child(4) {
        width: calc(100% / 12 * 7 - 32.5px);
    }
    .reasons-to-choose__block:nth-child(5) {
        width: calc(100% / 12 * 5 - 32.5px);
    }
}

@media screen and (min-width: 769px) {
    .reasons-to-choose__block:after {
        content: '';
        background-image: url(../images/home/video-block-hover-element.svg);
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 75px;
        transform: translate(-50%, -50%);
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0;
        transition: .5s;
    }
    .reasons-to-choose__block:first-child:after {
        top: calc(50% + 50px);
    }
    .reasons-to-choose__block:hover:after {
        opacity: 1;
        animation: fadeIn .5s 1 ease-in;
    }
    .reasons-to-choose__block:hover video {
        filter: brightness(0.75);
        transition: .5s;
    }
}

@media screen and (min-width: 575px) and (max-width: 768px) {
    .reasons-to-choose {
        padding-bottom: 0px;
    }
}

@media screen and (max-width: 480px) {
    .reasons-to-choose {
        padding: 20px var(--side-fields);
    }
    .reasons-to-choose__block:nth-child(n) {
        width: 100%;
    }
    .reasons-to-choose__block>video {
        height: 220px;
    }
}

.gallery {
    background-color: var(--pink);
    position: relative;
    overflow: hidden;
}

.gallery:after {
    content: '';
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 80%, rgba(33, 31, 47, 0.468225) 100%), linear-gradient(-180deg, rgba(0, 0, 0, 0) 53%, rgba(33, 31, 47, 0.85) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
}

@media screen and (min-width: 951px) and (max-width: 1719px) {
    .gallery .wave svg {
        width: 740px;
        left: var(--side-padding);
        bottom: calc(var(--side-padding));
        height: 140px;
    }
    .gallery .wave .bottom-line {
        width: calc(100% - 800px);
    }
    .gallery .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 139px);
    }
    .gallery .slider-counter {
        margin-left: auto;
        position: absolute;
        bottom: calc(var(--side-fields) + 50px);
        right: calc(var(--side-fields) + 50px);
    }
}

.gallery .wave {
    z-index: 3;
}

.gallery__content {
    padding: var(--side-fields);
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.gallery .title {
    padding: 0;
    margin-bottom: 0;
    margin-top: auto;
}

.gallery .arrows {
    margin-bottom: auto;
    width: 100%;
    position: absolute;
    top: 50%;
    left: var(--side-fields);
    width: calc(100% - (var( --side-fields) * 2) - 2px);
    transform: translateY(-50%);
}

.gallery .scene-nav {
    pointer-events: auto;
}

.gallery canvas {
    position: absolute;
    width: 100%;
    z-index: 0;
    height: calc(100vh);
}

.gallery .preload-block {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    z-index: 10;
}

.gallery .preload-block svg {
    width: 10%;
}

@media screen and (min-width: 1720px) {
    .gallery .wave svg {
        width: 984px;
        height: 185px;
    }
    .gallery .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 185px);
    }
    .gallery .wave .bottom-line {
        width: calc(100% - 1046px);
    }
    .gallery .slider-counter {
        margin-left: auto;
        margin-right: 90px;
        margin-top: auto;
        margin-bottom: -80vh;
    }
}

@media screen and (min-width: 575px) and (max-width: 768px) {
    .gallery .slider-counter {
        position: absolute;
        bottom: 10vh;
        right: 50px;
    }
}

@media screen and (max-width: 768px) {
    .gallery canvas {
        transform: translate(-50%, -50%) scale(1.15) !important;
    }
    .gallery .slider-counter {
        margin-left: auto;
        margin-right: 0px;
        position: absolute;
        bottom: calc(var(--side-fields) + 50px);
        right: calc(var(--side-fields) + 20px);
    }
}

.choose-flat {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%), url(../images/choose-appartment-bg.jpg) center no-repeat;
    background-size: cover;
}

@media screen and (min-width: 1720px) {
    .choose-flat .wave svg {
        width: 986px;
        height: 185px;
    }
    .choose-flat .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 185px);
    }
    .choose-flat .wave .bottom-line {
        width: calc(100% - 1046px);
    }
}

@media screen and (min-width: 951px) and (max-width: 1719px) {
    .choose-flat .wave svg {
        width: 740px;
        left: var(--side-padding);
        bottom: calc(var(--side-padding));
        height: 140px;
    }
    .choose-flat .wave .bottom-line {
        width: calc(100% - 800px);
    }
    .choose-flat .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 139px);
    }
}

.choose-flat__content {
    padding: var(--side-fields);
    display: flex;
    flex-wrap: wrap;
}

.choose-flat__content-text {
    width: calc(23.33333% - 20px);
    margin-right: calc(8.33333% + 10px);
    margin-left: auto;
    margin-top: auto;
    line-height: 1.6em;
    margin-bottom: auto;
}

@media screen and (max-width: 768px) {
    .choose-flat__content-text {
        width: calc(41.66667% - 20px);
    }
}

.choose-flat .title {
    margin-top: auto;
    margin-right: auto;
    padding: 0;
    width: 100%;
    padding-right: 80%;
}

.choose-flat .river-logo {
    width: 164px;
    height: 29px;
    margin-bottom: 30px;
}

.choose-flat .text {
    margin-bottom: 40px;
}

.choose-flat .text p {
    color: #BAC8D5;
}

@media screen and (min-width: 1720px) {
    .choose-flat__content-text {
        width: calc(20.83333% - 20px);
        margin-right: calc(8.33333% + 10px);
        margin-left: calc(77.5% + 10px);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: var(--side-fields);
    }
    .choose-flat .river-logo {
        width: 211px;
        height: 40px;
        margin-bottom: 30px;
    }
}

@media screen and (min-width: 769px) {
    .choose-flat .title {
        align-self: flex-end;
        position: absolute;
        left: var(--side-fields);
        bottom: var(--side-fields);
    }
}

@media screen and (max-width: 768px) {
    .choose-flat__content-text {
        margin-right: 8%;
        margin-left: auto;
    }
}

@media screen and (max-width: 480px) {
    .choose-flat__content {
        flex-direction: column;
    }
    .choose-flat__content-text {
        margin: 0;
        width: calc(100vw - var(--side-fields) * 2);
        padding-right: var(--side-fields);
        padding-left: 8%;
        margin-left: 0;
        margin-right: 0;
        margin-top: auto;
        margin-bottom: auto;
    }
    .choose-flat .title {
        margin-bottom: 0px;
    }
}

.contact-developer {
    display: flex;
    flex-wrap: wrap;
}

.contact-developer .left,
.contact-developer .right {
    width: 50%;
}

.contact-developer .left {
    position: relative;
}

.contact-developer .left canvas {
    z-index: 0;
}

.contact-developer .left__content {
    position: relative;
    z-index: 1;
    padding: calc(60px + var(--side-fields)) var(--side-fields) var(--side-fields) var(--side-fields);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-left: calc(4.16667% + 10px);
    max-width: 50%;
    height: 100%;
}

.contact-developer .left .text,
.contact-developer .left .link {
    opacity: 0;
    transform: translateX(100%);
    transition: .5s;
}

.contact-developer .left .text.visible,
.contact-developer .left .link.visible {
    opacity: 1;
    transform: translateX(0%);
}

.contact-developer .right {
    position: relative;
    padding-top: 95px;
    padding-bottom: 95px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-left: calc(4% + var(--side-fields));
    padding-right: calc(12.5% + 10px);
}

.contact-developer .right .bg-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover;
    left: 0;
    object-position: right bottom;
    z-index: -1;
}

.contact-developer .right .text {
    margin-top: auto;
}

.contact-developer .right .title {
    margin-top: 0;
    margin-bottom: 40px;
}

.contact-developer .right .subtitle {
    height: max-content;
}

.contact-developer .title {
    padding: 0;
    width: 100%;
}

.contact-developer .subtitle {
    margin-bottom: 20px;
    width: 100%;
}

.contact-developer .text {
    margin-top: auto;
}

.contact-developer .link {
    margin-bottom: auto;
    margin-top: 40px;
    width: min-content;
}

.contact-developer .comfort-life-logo {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 90px;
    height: 60px;
}

@media screen and (min-width: 1720px) {
    .contact-developer .text {
        margin-top: auto;
    }
    .contact-developer .right .text {
        max-width: 66%;
    }
    .contact-developer .right .title {
        max-width: none;
        margin-bottom: 2em;
    }
    .contact-developer .comfort-life-logo {
        width: 136px;
        height: 93px;
    }
}

@media screen and (max-width: 1024px) {
    .contact-developer .left__content {
        max-width: 75%;
    }
}

@media (orientation: landscape) and (max-height: 750px) {
    .contact-developer .left__content {
        max-width: 75%;
    }
}

@media screen and (max-width: 768px) {
    .contact-developer .right {
        padding-top: 65px;
        padding-bottom: 65px;
    }
    .contact-developer .right .bg-image {
        height: 108%;
    }
    .contact-developer .left,
    .contact-developer .right {
        width: 100%;
        height: 50vh;
    }
    .contact-developer .left__content {
        padding-top: calc(25px + var(--side-fields));
        max-width: 50%;
    }
    .contact-developer .right {
        padding-right: calc(41.66667% + 10px);
    }
    .contact-developer .right .title {
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 575px) and (max-width: 768px) {
    .contact-developer .left__content {
        max-width: 75%;
    }
}

@media screen and (max-width: 480px) {
    .contact-developer .left__content {
        position: relative;
        z-index: 1;
        padding: calc(30px + var(--side-fields)) var(--side-fields) var(--side-fields) var(--side-fields);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        margin-left: calc(4.16667% + 10px);
        max-width: 75%;
        height: 100%;
    }
    .contact-developer .left .link {
        margin-bottom: 25px;
    }
    .contact-developer .title {
        margin-bottom: 55px;
    }
    .contact-developer .right {
        padding-top: 65px;
        padding-bottom: 65px;
        padding-right: calc(16.66667% + 10px);
        padding-left: var(--side-fields);
    }
    .contact-developer .right .bg-image {
        height: 100%;
        object-position: 67%;
    }
    .contact-developer .left,
    .contact-developer .right {
        height: 100vh;
    }
}

@media screen and (min-height: 600px) and (orientation: portrait) {
    .contact-developer .title {
        font-size: 32px;
    }
}

.contacts {
    position: relative;
    padding: var(--side-fields);
    background: linear-gradient(0deg, #F7F5FB, #F7F5FB);
}

.contacts .title {
    padding: 0;
    margin-bottom: 1em;
}

.contacts__content {
    width: 100%;
}

.contacts__info-blocks-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 55px;
}

.contacts__info-block-column-title {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    /* identical to box height, or 100% */
    text-transform: uppercase;
    /* Text colour */
    color: var(--gray);
    padding-left: 25px;
    margin-bottom: 1.6em;
}

.contacts__info-block-column {
    width: calc(25% - 20px);
    margin-top: 35px;
}

@media screen and (max-width: 768px) {
    .contacts__info-block-column {
        width: calc(100% - 20px);
    }
}

.contacts__info-block-column.double {
    width: calc(50% - 20px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3fr 1fr;
}

.contacts .map-link-block {
    grid-area: 2/3/2/1;
}

.contacts__info-block-column.double .col-1 {
    grid-area: 1/1/1/1;
}

.contacts__info-block-column.double .col-2 {
    grid-area: 1/2/1/2;
}

.contacts__mini-group {
    padding-left: calc(25px + 40px + 20px);
    position: relative;
    color: var(--gray-light);
    min-height: 40px;
    font-size: 18px;
    line-height: 1em;
    font-weight: 300;
    margin-bottom: 30px;
}

.contacts__mini-group-title {
    font-weight: 500;
    margin-bottom: 1em;
    line-height: 1.6em;
}

.contacts__mini-group-text {
    line-height: 1.5em;
    color: var(--light-gray);
    display: flex;
    flex-direction: column;
}

.contacts__mini-group-text a {
    color: var(--light-gray);
}

.contacts .decor-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 25px;
    top: 0;
}

.contacts .link {
    padding-left: 25px;
}

@media screen and (min-width: 1720px) {
    .contacts__info-block-column-title {
        font-size: 24px;
        line-height: 30px;
    }
    .contacts__mini-group {
        font-size: 24px;
        line-height: 1em;
    }
    .contacts__mini-group-text {
        font-size: 18px;
    }
    .contacts__mini-group-title {
        margin-bottom: 0.5em;
    }
    .contacts__info-blocks-wrapper {
        margin-left: calc(5.41667% + 10px);
        margin-right: calc(5.41667% + 10px);
        margin-bottom: 120px;
    }
    .contacts__info-block-column {
        margin-bottom: -0.3em;
        padding-right: calc(4.16667% + 10px);
    }
    .contacts__info-block-column.double {
        column-gap: 8%;
    }
    .contacts .decor-icon {
        top: 0.3em;
    }
}

@media screen and (max-width: 1100px) {
    .contacts__mini-group {
        padding-left: calc(25px + 25px + 0px);
    }
    .contacts .decor-icon {
        left: 5px;
    }
}

@media screen and (min-width: 769px) {
    .contacts .mobile-shown {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .contacts .desktop-shown {
        display: none;
    }
    .contacts__info-blocks-wrapper {
        padding-left: calc(4.16667% + 10px);
        padding-top: 40px;
    }
    .contacts__mini-group {
        width: calc(35.83333% - 20px);
        margin-bottom: 15px;
    }
    .contacts__mini-group-title {
        margin-bottom: 0.5em;
    }
    .contacts__info-block-column {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .contacts__info-block-column.half-mobile {
        width: calc(50% - 20px);
    }
    .contacts__info-block-column.half-mobile .contacts__mini-group {
        width: calc(100% - 20px);
    }
    .contacts__info-block-column-title {
        width: 100%;
        padding-left: 0;
        margin-bottom: 0.9em;
    }
    .contacts .decor-icon {
        width: 26px;
        height: 26px;
        left: 0;
    }
    .contacts__mini-group {
        padding-left: calc(20px + 15px + 0px);
    }
    .contacts__info-block-column.double {
        width: calc(100% - 20px);
        display: flex;
        flex-wrap: wrap;
    }
    .contacts__info-block-column.double .contacts__mini-group {
        width: calc(100% - 20px);
    }
    .contacts .link.mobile {
        padding-left: 0;
        margin-left: calc(-20px - 15px + 0px);
        margin-top: 50px;
        display: inline-block;
    }
    .contacts .col-2,
    .contacts .map-link-block {
        width: calc(50% - 20px);
    }
    .contacts .map-link-block {
        align-self: center;
    }
    .contacts .map-link-block .link {
        max-width: 195px;
    }
}

@media screen and (min-width: 575px) and (max-width: 769px) {
    .contacts .map-link-block {
        position: relative;
    }
    .contacts .map-link-block:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, #f7f5fbc4 100%), linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #f7f5fbc4 100%);
    }
}

@media screen and (max-width: 480px) {
    .contacts__mini-group {
        font-size: 14px;
    }
    .contacts__info-block-column {
        width: 100%;
        margin-top: 0;
    }
    .contacts__mini-group {
        width: 100%;
    }
    .contacts__info-block-column.half-mobile {
        width: 100%;
    }
    .contacts .col-2,
    .contacts .map-link-block {
        width: 100%;
    }
}

.map-link-block {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110px;
}

.map-link-block__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}

.map-link-block .link,
.map-link-block .decor-pin-icon {
    position: relative;
    z-index: 1;
}

.map-link-block .decor-pin-icon {
    margin-right: 30px;
}

.map-link-block .link {
    max-width: 240px;
}

@media screen and (min-width: 1720px) {
    .map-link-block .link {
        max-width: 280px;
    }
}

.forms .tab-head {
    margin-bottom: 70px;
}

.input-group {
    border-bottom: 2px solid #C1D7EB;
    padding-bottom: 22px;
    display: flex;
    align-items: center;
}

.input-group .decor-icon {
    margin-right: 20px;
}

.input-group input {
    border: none;
    color: var(--blue);
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    width: calc(100% - 40px);
}

.input-group input::placeholder {
    color: var(--blue);
}

@media screen and (min-width: 1720px) {
    .input-group {
        padding-bottom: 32px;
    }
    .input-group input {
        font-size: 24px;
        line-height: 24px;
    }
}

@media screen and (max-width: 480px) {
    .input-group {
        margin-bottom: 18px;
    }
    .input-group input {
        font-size: 14px;
    }
}

form.callback {
    display: flex;
}

form.callback .input-group {
    width: calc(66.66667% - 20px);
}

form.callback button {
    margin-left: auto;
    margin-left: 5%;
}

form.message,
form.promotions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

form.message .input-group:nth-child(-n+3),
form.promotions .input-group:nth-child(-n+3) {
    width: calc(33.33333% - 20px);
    margin-bottom: 30px;
}

form.message .input-group:nth-child(4),
form.promotions .input-group:nth-child(4) {
    width: calc(66.66667% - 20px);
}

form.message .link,
form.promotions .link {
    display: flex;
    align-items: center;
    height: 1em;
    align-self: flex-end;
    margin-right: auto;
    margin-left: 3%;
}

@media screen and (min-width: 1720px) {
    form.message .link,
    form.promotions .link {
        margin-bottom: -0.4em;
        margin-left: 5.5%;
    }
    form.message .input-group:nth-child(-n+3),
    form.promotions .input-group:nth-child(-n+3) {
        width: calc(30% - 20px);
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 768px) {
    form.message .link,
    form.promotions .link {
        margin-right: 0;
        margin-left: auto;
    }
}

@media screen and (max-width: 480px) {
    form.message .input-group:nth-child(n),
    form.promotions .input-group:nth-child(n) {
        width: 100%;
    }
}

form.promotions .link {
    margin-bottom: 30px;
}

form.promotions .input-group {
    margin-right: auto;
}

@media screen and (min-width: 1720px) {
    form.promotions .link {
        margin-bottom: 0;
        margin-left: 0%;
    }
}

@media screen and (min-width: 1720px) {
    #home form.promotions .link {
        margin-bottom: 50px;
    }
}

button[type=submit] {
    background: none;
    border: none;
}

.sales-link {
    position: absolute;
    right: calc(var(--side-fields) + 20px);
    top: calc(var(--side-fields) + var(--header-height) + 15px);
    z-index: 3;
    width: 113px;
    height: 113px;
}

.sales-link svg {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 575px) {
    .sales-link {
        width: 45px;
        height: 45px;
    }
}

.infinite-rotation {
    animation: rotation 15s infinite;
}

@keyframes rotation {
    to {
        transform: rotate(360deg);
    }
}


/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-webkit-keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

@keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}


/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes shake {
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake {
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}


/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes jello {
    from,
    11.1%,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
        transform: skewX(0.39063deg) skewY(0.39063deg);
    }
    88.8% {
        -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
        transform: skewX(-0.19531deg) skewY(-0.19531deg);
    }
}

@keyframes jello {
    from,
    11.1%,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
        transform: skewX(0.39063deg) skewY(0.39063deg);
    }
    88.8% {
        -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
        transform: skewX(-0.19531deg) skewY(-0.19531deg);
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center;
}

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInLeft {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInRight {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

.bounceOut {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    from {
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    from {
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    20%,
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    40%,
    80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    20%,
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    40%,
    80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox;
}


/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}


/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

@keyframes rollOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
}

.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

@media (print),
(prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}

@-webkit-keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

@keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

.layout {
    min-height: calc(100vh - 70px);
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 480px) {
    .layout {
        min-height: calc(100vh - 42px);
    }
}

* {
    --blue: #0085FF;
    --white: #ffffff;
    --gray: #40484E;
    --gray-light: #728596;
    --side-padding: 30px;
    --title-size: 48px;
    --header-height: 71px;
    cursor: url("../images/cursor.png"), auto;
}

@media screen and (min-width: 1720px) {
    * {
        --title-size: 64px;
        --header-height: 85px;
    }
}

@media screen and (max-width: 768px) {
    * {
        --side-padding: 22px;
        --title-size: 36px;
    }
}

@media screen and (max-width: 480px) {
    * {
        --side-padding: 14px;
        --title-size: 24px;
        --header-height: 42px;
    }
}

.wrapper {
    position: relative;
}

.wave {
    position: absolute;
    height: 100%;
    width: 100%;
    pointer-events: none;
    overflow: hidden;
    padding: var(--side-padding);
}

.wave .bottom-line {
    display: block;
    position: absolute;
    bottom: calc(var(--side-padding));
    right: var(--side-padding);
    width: calc(100% - 940px);
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.wave .top-line {
    position: absolute;
    top: var(--side-padding);
    left: calc(var(--side-padding) + 2px);
    width: calc(100% - (var(--side-padding) * 2) - 2px);
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.wave:after {
    content: '';
    position: absolute;
    top: var(--side-padding);
    left: var(--side-padding);
    height: calc(100% - (var(--side-padding) * 2) - 165px);
    width: 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.wave:before {
    content: '';
    position: absolute;
    top: calc(var(--side-padding) + 2px);
    right: var(--side-padding);
    height: calc(100% - (var(--side-padding) * 2) - 3px);
    width: 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.wave svg {
    position: absolute;
    bottom: var(--side-padding);
    width: 880px;
    left: var(--side-padding);
    bottom: calc(var(--side-padding));
    height: 166px;
}

.wave svg path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
}

.wave .mobile {
    width: 283px;
    height: 93px;
}

@media screen and (max-width: 1719px) {
    .wave .three-rows-wave {
        display: none;
    }
}

@media screen and (min-width: 1720px) {
    .wave .three-rows-wave {
        width: 1161px;
        height: 218px;
    }
    .wave .bottom-line {
        width: calc(100% - 1221px);
    }
    .wave svg:not(.three-rows-wave) {
        display: none;
    }
    .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 214px);
    }
}

@media screen and (max-width: 950px) {
    .wave svg {
        width: 650px;
        height: 124px;
    }
    .wave svg.desktop path {
        stroke-width: 3.5;
        transform: translateY(1px);
    }
    .wave .bottom-line {
        width: calc(100% - 694px);
    }
    .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 119px);
    }
}

@media screen and (min-width: 768px) {
    .wave .mobile {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .wave .desktop {
        display: none;
    }
    .wave svg {
        height: 123.2px;
    }
    .wave .bottom-line {
        width: calc(100% - 694px);
    }
}

@media screen and (max-width: 480px) {
    .wave:after {
        height: calc(100% - (var(--side-padding) * 2) - 93px);
        width: 2px;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .wave .bottom-line {
        width: calc(100% - 311px);
    }
}

.title {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: 900;
    font-size: 48px;
    line-height: 1em;
    color: var(--white);
    text-transform: uppercase;
}

.title.blue {
    color: var(--blue);
}

.title .blue.with-waves:after {
    content: '';
    background-image: url(../images/common/wave-for-title.svg);
    margin-left: 30px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    width: 87px;
    height: 36px;
    transform: translateY(10px);
}

.title .blue {
    color: var(--blue);
    display: flex;
    justify-content: flex-start;
}

.title .gray {
    color: var(--gray);
}

@media screen and (min-width: 1720px) {
    .title {
        font-size: 64px;
    }
    .title .blue.with-waves:after {
        width: 113px;
        height: 47px;
        transform: translateY(12px);
    }
}

@media screen and (max-width: 1024px) {
    .title .blue.with-waves:after {
        transform: scale(0.7) translateX(-30%);
    }
}

@media screen and (max-width: 768px) {
    .title {
        font-size: 36px;
    }
}

@media screen and (max-width: 480px) {
    .title {
        font-size: 24px;
    }
    .title .blue.with-waves:after {
        content: '';
        background-image: url(../images/common/wave-for-title.svg);
        margin-left: 10px;
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        width: 60px;
        height: 20px;
        position: relative;
        top: 3px;
    }
}

.arrows {
    align-self: center;
    margin-top: auto;
    width: calc(100% - var(--side-padding) - var(--side-padding));
    display: flex;
    justify-content: space-between;
}

.arrows.blue .arrow-prev,
.arrows.blue .arrow-next {
    border: 2px solid var(--blue);
}

.arrows.blue path {
    stroke: var(--blue) !important;
}

.arrows.blue rect {
    fill: var(--blue);
}

.arrows .arrow-prev,
.arrows .arrow-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-right-color: transparent;
    transition: .7s;
}

@media screen and (min-width: 769px) {
    .arrows .arrow-prev:hover svg,
    .arrows .arrow-next:hover svg {
        transform-origin: center;
        transition: .7s;
    }
    .arrows.blue .arrow-prev:hover svg path,
    .arrows.blue .arrow-next:hover svg path {
        stroke: var(--white) !important;
    }
    .arrows.blue .arrow-next:hover svg rect,
    .arrows.blue .arrow-prev:hover svg rect {
        fill: var(--white);
    }
    .arrows .arrow-prev:hover,
    .arrows .arrow-next:hover {
        background-color: var(--blue);
        border-color: var(--blue);
    }
}

.arrows svg {
    cursor: pointer;
    transition: .5s;
}

.arrows svg path,
.arrows svg rect {
    cursor: pointer;
}

.arrows .arrow-prev {
    transform: rotate(-180deg);
}

@media screen and (max-width: 768px) {
    .arrows {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 480px) {
    .arrows .arrow-prev,
    .arrows .arrow-next {
        width: 40px;
        height: 40px;
    }
    .arrows .arrow-prev>svg,
    .arrows .arrow-next>svg {
        width: 14px;
        height: 11px;
    }
}

.slider-counter {
    width: 50px;
    color: var(--white);
    font-family: Cera Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider-counter.blue {
    color: var(--blue);
}

.slider-counter.blue rect {
    fill: var(--blue) !important;
}

.slider-counter .delimiter {
    margin: 0 auto;
}

@media screen and (min-width: 1720px) {
    .slider-counter {
        width: 70px;
        font-size: 24px;
    }
}

.link {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 1em;
    text-transform: uppercase;
    color: var(--white);
    position: relative;
    padding-right: 46px;
    display: flex;
    align-items: flex-end;
}

.link.blue {
    color: var(--blue);
}

.link::after {
    content: url("data:image/svg+xml,%3Csvg width='36' height='2' viewBox='0 0 36 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='1' x2='36' y2='1' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
    margin-left: 10px;
    position: relative;
    transition: .5s;
    top: -5px;
    transform-origin: left;
}

.link:hover::after {
    transform: scaleX(1.5);
}

.link.blue::after {
    content: url("data:image/svg+xml,%3Csvg width='36' height='2' viewBox='0 0 36 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='1' x2='36' y2='1' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E%0A");
    margin-left: 10px;
    position: relative;
    transition: .5s;
    top: -5px;
}

@media screen and (min-width: 1720px) {
    .link {
        font-size: 24px;
        line-height: 30px;
    }
}

@media screen and (min-width: 769px) {
    .link.mobile {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .link {
        font-size: 16px;
    }
    .link.desktop {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .link {
        padding-right: 30px;
    }
    .link::after {
        width: 20px;
    }
}

@media screen and (min-height: 600px) and (orientation: portrait) {
    .link {
        font-size: 20px;
    }
}

.subtitle {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 1em;
    text-transform: uppercase;
    color: var(--white);
}

.subtitle.gray {
    color: var(--gray);
}

.subtitle.color-standart {
    color: var(--gray-light);
    font-weight: 500;
}

.subtitle.no-transform {
    text-transform: none;
}

.subtitle.variable-line-height {
    line-height: 1.67em;
}

@media screen and (min-width: 1720px) {
    .subtitle {
        font-size: 24px;
    }
    .subtitle.variable-line-height {
        line-height: 1.5em;
    }
}

@media screen and (max-width: 768px) {
    .subtitle {
        font-size: 16px;
    }
}

@media screen and (max-width: 575px) {
    .subtitle.variable-line-height {
        line-height: 1.57em;
    }
}

.wave-top {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.wave-top svg:not(.wave-logo) {
    position: absolute;
    right: var(--side-padding);
    top: var(--side-padding);
    stroke: white;
}

.wave-top .wave-logo {
    position: absolute;
    right: var(--side-padding);
    top: var(--side-padding);
}

.wave-top .bottom-line {
    position: absolute;
    height: 2px;
    width: calc(100% - (var(--side-padding) * 2));
    background: rgba(255, 255, 255, 0.5);
    bottom: var(--side-padding);
    left: var(--side-padding);
}

.wave-top .left-line {
    position: absolute;
    width: 2px;
    height: calc(100% - (var(--side-padding) * 2));
    background: rgba(255, 255, 255, 0.5);
    bottom: var(--side-padding);
    left: var(--side-padding);
}

.wave-top .right-line {
    position: absolute;
    width: 2px;
    height: calc(100% - (var(--side-padding) * 2) - 30px);
    background: rgba(255, 255, 255, 0.5);
    bottom: var(--side-padding);
    right: var(--side-padding);
}

.wave-top .top-line {
    position: absolute;
    left: var(--side-padding);
    top: var(--side-padding);
    height: 2px;
    width: calc(100% - 217px);
    background-color: rgba(255, 255, 255, 0.5);
}

@media screen and (min-width: 1720px) {
    .wave-top .wave-logo {
        width: 66px;
        height: 13px;
    }
}

@media screen and (min-width: 768px) {
    .wave-top .top-line {
        width: calc(100% - 218px);
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .wave-top .top-line {
        width: calc(100% - 202px);
    }
}

@media screen and (max-width: 480px) {
    .wave-top .top-line {
        width: calc(100% - 185px);
    }
}

.text {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6em;
    color: var(--white);
}

.text.gray {
    color: #728596;
}

.text.gray>p {
    color: #728596;
}

.text>p {
    color: var(--white);
}

.text>p:nth-child(n+2) {
    margin-top: 1.6em;
}

@media screen and (min-width: 1720px) {
    .text {
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    .text {
        font-size: 12px;
    }
}

.wave-bottom-white {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 800px;
    height: 89px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    overflow: hidden;
}

.wave-bottom-white>svg {
    position: absolute;
    fill: var(--white);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.wave-bottom-white__title,
.wave-bottom-white__subtitle {
    position: relative;
    z-index: 2;
}

.wave-bottom-white__title {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 1em;
    text-transform: uppercase;
    color: #40484E;
    max-width: 160px;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.wave-bottom-white__title::before {
    content: url("data:image/svg+xml,%3Csvg width='9' height='36' viewBox='0 0 9 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 36C0.999999 18 8 18 8 1.24374e-06' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E ");
    position: absolute;
    left: 0;
    top: 0;
}

.wave-bottom-white__subtitle {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--gray-light);
}

@media screen and (min-width: 1720px) {
    .wave-bottom-white {
        width: 1150px;
        height: 128px;
    }
    .wave-bottom-white__title {
        font-size: 30px;
        max-width: 270px;
        margin-bottom: 15px;
        padding-left: 25px;
    }
    .wave-bottom-white__title::before {
        content: url("data:image/svg+xml,%3Csvg width='18' height='50' viewBox='0 0 9 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 36C0.999999 18 8 18 8 1.24374e-06' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E ");
        position: absolute;
        left: 0;
        top: 8px;
    }
    .wave-bottom-white__subtitle {
        font-size: 24px;
        line-height: 1em;
    }
}

@media screen and (min-width: 769px) {
    .wave-bottom-white .white-wave-mobile {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .wave-bottom-white__title {
        font-size: 16px;
    }
    .wave-bottom-white .desktop-wave {
        display: none;
    }
    .wave-bottom-white .white-wave-mobile {
        width: 43%;
        height: 101%;
    }
}

@media screen and (max-width: 480px) {
    .wave-bottom-white bottom-white .white-wave-mobile {
        width: 37%;
        height: 85%;
    }
}

.wave-top-blue {
    position: absolute;
    width: calc(100% - var(--side-padding) * 2);
    height: calc(100% - var(--side-padding) * 2);
    pointer-events: none;
    overflow: hidden;
}

.wave-top-blue>svg {
    width: 973px;
    height: 145px;
    position: absolute;
    top: 0;
    left: 0;
}

.wave-top-blue .left-line {
    position: absolute;
    left: 0;
    top: 144px;
    background-color: #60B3FF;
    width: 2px;
    height: calc(100% - 145px);
}

.wave-top-blue .bottom-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #60B3FF;
    bottom: 0;
    left: 0;
}

.wave-top-blue .right-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: #60B3FF;
    right: 0;
    top: 0;
}

.wave-top-blue .top-line {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(100% - 972px);
    height: 2px;
    background-color: #60B3FF;
}

.wave-top-blue .mobile-320 {
    width: 292px;
    height: 66px;
}

@media screen and (min-width: 1720px) {
    .wave-top-blue .blue-line-desktop {
        display: none;
    }
    .wave-top-blue svg {
        width: 1110px;
        height: 165px;
    }
    .wave-top-blue .top-line {
        width: calc(100% - 1110px);
    }
    .wave-top-blue .left-line {
        top: 164px;
        height: calc(100% - 164px);
    }
}

@media screen and (max-width: 1719px) {
    .wave-top-blue .full-hd-svg {
        display: none;
    }
}

@media screen and (min-width: 769px) {
    .wave-top-blue .blue-top-top-line-mobile {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .wave-top-blue .blue-line-desktop {
        display: none;
    }
    .wave-top-blue svg {
        width: 728px;
        height: 139px;
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
    }
    .wave-top-blue .left-line {
        position: absolute;
        left: 0;
        top: 137px;
        background-color: #60B3FF;
        width: 2px;
        height: calc(100% - 138px);
    }
}

@media screen and (min-width: 575px) and (max-width: 768px) {
    .wave-top-blue svg {
        width: 556px;
        height: 105px;
        left: 0;
        right: auto;
    }
    .wave-top-blue .left-line {
        position: absolute;
        left: 0;
        top: 103px;
        background-color: #60B3FF;
        width: 2px;
        height: calc(100% - 103px);
    }
    .wave-top-blue .top-line {
        width: calc(100% - 553px);
    }
}

@media screen and (min-width: 480px) {
    .wave-top-blue .mobile-320 {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .wave-top-blue .blue-top-top-line-mobile {
        display: none;
    }
    .wave-top-blue .left-line {
        top: 65px;
        height: calc(100% - 65px);
    }
    .wave-top-blue .top-line {
        right: auto;
        left: 0;
        top: 64px;
        width: calc(100% - 292px);
    }
}

.decor-pin-icon {
    width: 54px;
    height: 67px;
}

section.forms {
    padding-top: 53px;
    padding-bottom: 77px;
    padding-left: calc(8.33333% + 10px);
    padding-right: calc(8.33333% + 10px);
}

@media screen and (max-width: 1250px) {
    section.forms {
        padding-left: 0;
        padding-left: calc(1.66667% + 10px);
        padding-right: calc(1.66667% + 10px);
    }
}

@media screen and (max-width: 1024px) {
    section.forms {
        padding: var(--side-padding);
    }
}

@media screen and (min-width: 575px) and (max-width: 768px) {
    section.forms {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.tabs .tab-head {
    display: flex;
    justify-content: space-between;
}

.tabs .tab-head-item.active {
    color: var(--blue);
}

.tabs .tab-head-item {
    min-height: 36px;
    display: flex;
    align-items: center;
    font-family: Cera Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    color: var(--gray);
    text-transform: uppercase;
}

.tabs .tab-head-item:before {
    transition: .5s;
    opacity: 0;
    margin-right: 10px;
    content: url("data:image/svg+xml,%3Csvg width='9' height='36' viewBox='0 0 9 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C8 18 0.999999 18 0.999998 36' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.tabs .tab-head-item.active:after,
.tabs .tab-head-item.active:before {
    opacity: 1;
}

.tabs .tab-head-item:after {
    transition: .5s;
    opacity: 0;
    margin-left: 10px;
    content: url("data:image/svg+xml,%3Csvg width='9' height='36' viewBox='0 0 9 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C8 18 0.999999 18 0.999998 36' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.tabs .tab {
    display: none;
}

.tabs .tab.active {
    display: block;
}

@media screen and (min-width: 769px) {
    .tabs .tab-head-item:hover {
        color: var(--blue);
    }
    .tabs .tab-head-item:hover:after,
    .tabs .tab-head-item:hover:before {
        opacity: 1;
    }
}

@media screen and (min-width: 1720px) {
    .tabs .tab-head-item {
        font-size: 24px;
        line-height: 30px;
        width: calc(33.33333% - 20px);
        display: flex;
        justify-content: space-between;
    }
}

@media screen and (max-width: 768px) {
    .tabs .tab-head-item {
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .tabs {
        padding: 0;
    }
    .tabs .tab-head {
        margin-bottom: 25px;
        flex-direction: column;
        align-items: center;
    }
    .tabs .tab-head-item {
        font-size: 14px;
    }
}

.decor-icon {
    width: 40px;
    height: 40px;
}

@media screen and (max-width: 480px) {
    .decor-icon {
        width: 26px;
        height: 26px;
    }
}

.input-group {
    transition: .5s;
}

.input-group.unfilled {
    border-color: red;
}

.mouse-popup {
    font-family: Cera Pro;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 10px;
    position: fixed;
    width: 13ch;
    color: var(--white);
    height: 30px;
    display: flex;
    align-items: center;
    opacity: 0;
}

.mouse-popup.visible {
    opacity: 1;
}

@media screen and (min-width: 1720px) {
    .mouse-popup {
        font-size: 24px;
        line-height: 14px;
    }
}

@media screen and (max-width: 769px) {
    .mouse-popup {
        display: none;
    }
}

.unvisible-block {
    display: none;
}

.wave-for-menu {
    position: absolute;
    width: calc(100% - var(--side-fields) * 2);
    height: calc(100% - var(--side-fields) * 2);
    --border-width: 2px;
    margin: var(--side-fields);
    pointer-events: none;
    z-index: 2;
}

.wave-for-menu>div {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
}

.wave-for-menu .top-line {
    top: 0;
    left: 0;
    height: var(--border-width);
    width: 100%;
}

.wave-for-menu .bottom-line {
    width: calc(100% - 591px);
    height: var(--border-width);
    right: 0;
    bottom: 0;
}

.wave-for-menu .left-line {
    height: calc(100% - 86px);
    width: var(--border-width);
    left: 0;
    top: 1px;
}

.wave-for-menu .right-line {
    width: var(--border-width);
    height: calc(100% - 2px);
    top: 1px;
    right: 0;
}

.wave-for-menu .line-mobile {
    position: absolute;
    left: 0;
    bottom: 0;
    stroke-width: 2;
}

.wave-for-menu svg {
    position: absolute;
    bottom: 0;
    left: 0;
}

.wave-for-menu svg path {
    stroke: rgba(255, 255, 255, 0.5);
}

@media screen and (min-width: 1720px) {
    .wave-for-menu .bottom-line {
        width: calc(100% - 591px);
    }
    .wave-for-menu .left-line {
        height: calc(100% - 112px);
    }
    .wave-for-menu .line-desktop {
        display: none;
    }
}

@media screen and (max-width: 1719px) {
    .wave-for-menu .bottom-line {
        width: calc(100% - 448px);
    }
    .wave-for-menu svg {
        bottom: -1px;
    }
    .wave-for-menu .line1920 {
        display: none;
    }
}

@media screen and (min-width: 576px) {
    .wave-for-menu .line-mobile {
        display: none;
    }
}

@media screen and (max-width: 575px) {
    .wave-for-menu .line-desktop {
        display: none;
    }
}

@media screen and (max-width: 575px) {
    .wave-for-menu .bottom-line {
        width: calc(100% - 233px);
        right: 1px;
    }
    .wave-for-menu .left-line {
        height: calc(100% - 46px);
    }
}

.breadcrumbs-block {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    --underline-gap: 4px;
    min-height: var(--title-size);
    box-sizing: content-box;
    position: relative;
    margin-top: 25px;
}

.breadcrumbs-block__item {
    color: var(--blue);
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    margin-bottom: var(--underline-gap);
}

.breadcrumbs-block__item span {
    position: relative;
}

.breadcrumbs-block__item span:before {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
    left: 0;
    background: var(--blue);
    content: '';
}

.breadcrumbs-block__item--white span:before {
    background: var(--white);
}

.breadcrumbs-block__item-current {
    color: var(--gray-light);
}

.breadcrumbs-block__item--white {
    color: var(--white);
}

.breadcrumbs-block__item[href]:not(.breadcrumbs-block__item-current):after {
    content: '•';
    margin: 0 10px;
    text-decoration: none;
}

.breadcrumbs-block .title {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
}

@media screen and (min-width: 1720px) {
    .breadcrumbs-block {
        margin-top: 30px;
    }
    .breadcrumbs-block__item {
        font-size: 18px;
    }
}

@media screen and (max-width: 768px) {
    .breadcrumbs-block {
        margin-top: 20px;
    }
}

@media screen and (max-width: 575px) {
    .breadcrumbs-block .breadcrumbs-block__item {
        font-size: 12px;
        line-height: 12px;
    }
    .breadcrumbs-block__item {
        font-size: 12px;
        line-height: 12px;
    }
}

@media screen and (max-width: 480px) {
    .breadcrumbs-block .title {
        position: static;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        transform: none;
        margin-top: 20px;
    }
}

.contact-form-wave {
    position: absolute;
    width: calc(100% - var(--side-padding) * 2);
    height: calc(100% - var(--side-padding) * 2);
    pointer-events: none;
    overflow: hidden;
    left: var(--side-padding);
    top: var(--side-padding);
}

.contact-form-wave .river-wave-logo {
    width: 52px;
    height: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.contact-form-wave .desktop {
    stroke-width: 2;
    stroke: #60B3FF;
    position: absolute;
    width: 158px;
    height: 32px;
    right: 0;
    top: 0;
}

.contact-form-wave .left-line {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #60B3FF;
    width: 2px;
    height: 100%;
}

.contact-form-wave .bottom-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #60B3FF;
    bottom: 0;
    left: 0;
}

.contact-form-wave .right-line {
    position: absolute;
    width: 2px;
    height: calc(100% - 31px);
    background-color: #60B3FF;
    right: 0;
    top: 31px;
}

.contact-form-wave .top-line {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 157px);
    height: 2px;
    background-color: #60B3FF;
}

.contact-form-wave .mobile-320 {
    width: 292px;
    height: 66px;
}

@media screen and (min-width: 1720px) {
    .contact-form-wave {
        width: calc(100% - 107px * 2);
        left: 107px;
        height: calc(100% - 60px * 2);
        top: 60px;
    }
    .contact-form-wave .top-line {
        width: calc(100% - 157px);
    }
}

@media screen and (min-width: 769px) {
    .contact-form-wave .blue-top-top-line-mobile {
        display: none;
    }
}

@media screen and (min-width: 480px) {
    .contact-form-wave .mobile-320 {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .contact-form-wave {
        display: none;
    }
}

.vert-wave-blue-line {
    stroke: var(--blue);
    fill: transparent;
    width: 13px;
    height: 50px;
    stroke-width: 3;
}

@media screen and (max-width: 575px) {
    .vert-wave-blue-line {
        width: 7px;
        height: 36px;
    }
}

.news-article-wave {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 260px;
    height: 48px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

@media screen and (min-width: 1720px) {
    .news-article-wave {
        width: 360px;
        height: 67px;
    }
}

.news-article-wave .link {
    position: relative;
    z-index: 1;
    padding-right: 0;
}

.news-article-wave svg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    fill: var(--white);
}

@media screen and (max-width: 575px) {
    .news-article-wave {
        width: 172px;
        height: 33px;
    }
    .news-article-wave svg {
        bottom: 1.6em;
    }
}

.select-box {
    position: relative;
    display: block;
    width: 100%;
    height: 30px;
    color: var(--white);
    max-width: 170px;
    font-size: 18px;
    font-weight: 500;
}

.select-box__current {
    position: relative;
    cursor: pointer;
    outline: none;
    border: 1px solid var(--blue);
    color: var(--white);
    background-color: var(--blue);
    min-height: 1.5em;
    z-index: 3;
    transition: .5s;
}

.select-box__current:focus {
    background-color: var(--blue);
    border-color: transparent;
}

.select-box__current:focus+.select-box__list {
    opacity: 1;
    padding-top: 20px;
    margin-top: -15px;
    z-index: 2;
    position: relative;
    background-color: var(--blue);
    animation-name: none;
    transition: .5s;
}

.select-box__current:focus+.select-box__list .select-box__option {
    cursor: pointer;
}

.select-box__current:focus .select-box__icon {
    transform: translateY(-50%) rotate(180deg);
    fill: var(--white);
    opacity: 1;
}

.select-box .select-box__list {
    box-shadow: 0px 30px 50px rgba(0, 57, 90, 0.15);
}

.select-box .select-box__option {
    transition: .5s;
}

.select-box .select-box__option:hover {
    color: var(--red);
}

.select-box__icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 12px;
    transition: 0.2s ease;
    width: 18px;
    height: 9px;
    stroke: #fff;
    fill: none;
    stroke-width: 2px;
}

.select-box__value {
    display: flex;
}

.select-box__input {
    display: none;
}

.select-box__input:checked+.select-box__input-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.select-box__input-text {
    display: none;
    width: 100%;
    margin: 0;
    height: 30px;
    text-align: center;
    margin-right: 12px;
}

.select-box__list {
    position: absolute;
    width: 100%;
    padding: 0;
    list-style: none;
    opacity: 0;
    animation-name: HideList;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}

.select-box__option {
    display: block;
    height: 30px;
    text-align: center;
    background-color: var(--blue);
}

.select-box__option:hover,
.select-box__option:focus {
    color: #546c84;
    background-color: var(--blue);
    color: var(--white);
}

@media screen and (min-width: 1680px) {
    .select-box {
        max-width: 240px;
        height: 44px;
        font-size: 25px;
    }
    .select-box__current {
        height: 100%;
    }
    .select-box__input-text {
        height: 40px;
    }
    .select-box__option {
        height: 40px;
        margin-top: -1px;
    }
    .select-box__list {
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
    }
}

.select-box:hover .select-box__current {
    background-color: var(--blue);
    border-color: transparent;
    color: var(--white);
}

.select-box:hover .select-box__current+.select-box__list {
    opacity: 1;
    padding-top: 20px;
    margin-top: -20px;
    z-index: 2;
    position: relative;
    background-color: var(--white);
    animation-name: none;
    transition: .5s;
}

.select-box:hover .select-box__current+.select-box__list .select-box__option {
    cursor: pointer;
}

.select-box:hover .select-box__icon {
    transform: translateY(-50%) rotate(180deg);
    fill: transparent;
    opacity: 1;
}

@media screen and (max-width: 575px) {
    .select-box {
        max-width: none;
    }
    .select-box__option,
    .select-box__input-text {
        text-align: left;
        padding-left: 15px;
    }
}

@keyframes HideList {
    from {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0);
    }
}

.icon--double-blue-wave {
    stroke: var(--blue);
    fill: none;
    stroke-width: 3;
    width: 24px;
    height: 9px;
}

@media screen and (min-width: 1720px) {
    .icon--double-blue-wave {
        width: 60px;
        height: 24px;
    }
}

.square-metres {
    display: inline-block;
    margin-top: -0.3em;
}

@media screen and (min-width: 769px) {
    a:hover {
        cursor: url(../images/cursor-big.png), auto !important;
    }
}

menu {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    position: fixed;
    margin-top: 0;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--blue);
    background: url(../images/menu/menu-bg.png) left bottom no-repeat;
    background-size: cover;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    transform: translateY(-100vh);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    flex-direction: column;
    transition: transform 1.5s cubic-bezier(0, 0.76, 0.35, 1.01);
}

menu header.header {
    padding: calc(var(--side-fields) + 40px) calc(var(--side-fields) + 40px) 0 calc(var(--side-fields) + 40px);
    position: static;
    --blue: transparent;
}

menu.opened {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

menu.opened .close-svg {
    display: initial;
    animation: none;
    position: relative;
    top: auto;
}

menu.opened .open-svg {
    display: none;
}

menu .menu__content {
    padding: 0 0;
    margin-right: 2px;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-self: center;
    width: calc(100% - var(--side-fields) * 2);
    position: relative;
    /*new scroll menu */
    width: calc(100% + var(--side-fields) * 2);
    position: relative;
    position: relative;
    margin-left: calc(var(--side-fields) - (var(--side-fields) * 2));
    /*new scroll menu end */
    position: relative;
}

menu .menu__content:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 20px;
    background-color: #148af6;
    bottom: calc(67px + 26px);
    right: 0;
}

menu .menu__scroll {
    display: flex;
}

@media screen and (min-width: 576px) and (max-width: 769px) {
    menu {
        margin-left: 0;
    }
    menu header.header {
        margin-left: -35px;
        padding: calc(var(--side-fields) + 15px) calc(var(--side-fields) + 15px) 0 calc(var(--side-fields) + 15px);
        width: 100vw;
    }
    menu .wave-for-menu {
        left: 0;
    }
    menu .title {
        left: 0;
    }
    menu .menu__scroll {
        max-width: 100%;
        padding-left: 50px;
        padding-right: 50px;
        overflow-x: scroll;
    }
    menu menu .menu__content:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 24px;
        background-color: #168cf8;
        bottom: calc(70px + 20px);
        right: 1px;
    }
}

@media screen and (max-width: 575px) {
    menu .menu__scroll {
        flex-direction: column;
        padding-left: var(--side-fields);
        padding-right: var(--side-fields);
    }
}

@media screen and (min-width: 769px) {
    menu {
        width: calc(100% + var(--side-fields));
        margin-left: auto;
    }
    menu header.header {
        padding: calc(var(--side-fields) + 40px) calc((var(--side-fields) * 2) + 40px) 0 calc(var(--side-fields) + 40px);
    }
    menu .wave-for-menu {
        width: calc(100% - var(--side-fields) * 3);
    }
}

menu .menu-scroll-element {
    width: 100%;
    margin-top: 67px;
}

menu .menu-content-image-links {
    height: 500px;
    width: calc(69.16667% - 20px);
    width: auto;
    margin-left: auto;
    display: grid;
    grid-template-rows: 225px 225px;
    column-gap: 10px;
    row-gap: 10px;
    grid-template-columns: repeat(19, 85px);
}

menu .menu-content-image-links::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

menu .menu-content-image-links::-webkit-scrollbar-button {
    width: 10px;
    height: 10px;
    background-color: transparent;
    display: none;
    pointer-events: none;
}

menu .menu-content-image-links::-webkit-scrollbar-thumb {
    background: var(--white);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

menu .menu__content-text-links {
    width: calc(31.66667% - 20px);
    width: 35vw;
    padding-left: calc(8.33333% + 10px);
    padding-top: 2em;
}

menu .menu__content-text-links .link {
    margin-top: 20px;
    line-height: 1em;
    font-weight: 500;
    padding-right: 0;
}

menu .menu__content-text-links .link:after {
    display: none;
}

menu .title {
    position: absolute;
    border: var(--side-fields);
    padding-bottom: var(--side-fields);
    padding-left: var(--side-fields);
    bottom: 0;
}

menu .wave {
    padding: 0;
}

menu .menu-button {
    order: 2;
    margin-left: 50px;
    margin-right: 0;
    display: flex;
    align-items: flex-start;
}

@media screen and (min-width: 1680px) {
    menu .logo {
        --logo-width: 336px;
    }
    menu .menu-content-image-links {
        height: 600px;
        grid-template-rows: 280px 280px;
        column-gap: 12px;
        row-gap: 12px;
        grid-template-columns: repeat(19, 125px);
    }
    menu .menu__content-text-links .link {
        margin-top: 24px;
        line-height: 1.25em;
    }
}

menu .mobile-gradient {
    background: linear-gradient(0deg, #0085FF 0%, rgba(0, 133, 255, 0) 25%);
    position: absolute;
    height: 20%;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
}

@media (orientation: landscape) and (max-height: 767px) {
    menu .menu-scroll-element {
        width: 100%;
        margin-top: 20px;
    }
    menu .menu__content:after {
        background-color: #178df9;
        bottom: calc(10px + 26px);
    }
}

@media (orientation: landscape) and (max-height: 720px) {
    menu .menu-scroll-element {
        opacity: 0;
    }
}

@media screen and (min-width: 769px) {
    menu .menu__content-text-links {
        margin-right: 70px;
    }
}

@media screen and (min-width: 576px) {
    menu .mobile-gradient {
        display: none;
    }
}

@media (orientation: landscape) and (max-height: 690px) {
    menu header.header {
        padding-top: 40px;
    }
    menu .menu-scroll-element {
        opacity: 0;
    }
    menu .menu-content-image-links {
        height: 360px;
        grid-template-rows: 170px 170px;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    menu .menu-content-image-links {
        margin-left: auto;
        height: 651px;
        grid-template-rows: 318px 318px;
        grid-template-columns: repeat(19, 105px);
        width: calc(66.66667% - 20px);
        margin-right: 1px;
    }
    menu .menu__content-text-links {
        padding-left: 30px;
        width: calc(37.5% - 20px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    menu .menu__content-text-links .link {
        font-size: 16px;
        line-height: 1em;
        margin-bottom: 30px;
        margin-top: 0;
    }
    menu .menu__content:after {
        position: absolute;
        content: '';
        width: 90%;
        height: 19px;
        background-color: #168cf8;
        bottom: calc(67px + 20px);
        right: 1px;
        width: 100%;
        height: 24px;
        background-color: #168cf8;
        bottom: calc(70px + 20px);
        right: 1px;
    }
}

@media screen and (max-width: 575px) {
    menu {
        overflow: hidden;
        flex-direction: row;
        align-content: flex-start;
        background: linear-gradient(0deg, #0085FF 0%, rgba(0, 133, 255, 0) 25%), #0085FF;
        height: -webkit-fill-available;
    }
    menu header.header {
        padding: calc(var(--side-fields) + 16px) calc(var(--side-fields) + 16px) 0 calc(var(--side-fields) + 16px);
        height: 50px;
        margin-bottom: 35px;
    }
    menu .menu-scroll-element {
        display: none;
    }
    menu .menu-button {
        margin-left: 0;
    }
    menu.opened .close-svg {
        width: 15px;
        height: 12px;
        transform: translateY(1px);
        top: 0;
    }
    menu .wave-for-menu {
        z-index: 2;
    }
    menu .menu__content {
        margin-top: 0;
        flex-direction: row;
        margin: 0 auto;
        padding: 0 16px;
        display: block;
        height: calc(100vh - 52px - 32px);
        overflow-y: scroll;
        overflow-x: hidden;
        align-self: flex-start;
    }
    menu .menu__content:after {
        display: none;
    }
    menu .menu__content-text-links {
        width: 100%;
        padding-left: 0;
        padding-top: 0em;
        columns: 2;
    }
    menu .menu__content-text-links .link {
        line-height: 1em;
        font-size: 14px;
        line-height: 16px;
        margin-top: 0;
        margin-bottom: 19px;
        padding-right: 0;
        white-space: nowrap;
    }
    menu .menu__content-text-links .link:after {
        display: none;
    }
    menu .menu-content-image-links {
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    menu .menu-content-image-links::-webkit-scrollbar {
        display: none;
    }
    menu .menu__content-image-link {
        margin-top: 15px;
        height: 150px;
    }
    menu .menu__content-image-link:last-child {
        margin-bottom: 70px;
    }
    menu .title {
        z-index: 2;
    }
}

.menu__content-image-link {
    position: relative;
    display: block;
    overflow: hidden;
}

.menu__content-image-link>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

@media screen and (min-width: 769px) {
    .menu__content-image-link:hover img {
        transition: 10s;
        transform: scale(1.2);
    }
}

.menu__content-image-link .img-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: .5s;
    opacity: 1;
}

.menu__content-image-link .img-gradient.color1 {
    background: linear-gradient(180deg, #000028 0%, rgba(0, 0, 40, 0) 100%);
    mix-blend-mode: color;
    transform: rotate(-180deg);
}

.menu__content-image-link .img-gradient.color2 {
    background: #001F3C;
    mix-blend-mode: soft-light;
}

.menu__content-image-link .img-gradient.color3 {
    background: #0085FF;
    mix-blend-mode: color;
}

.menu__content-image-link .link {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-family: Cera Pro;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    line-height: 1.25em;
    text-transform: none;
}

.menu__content-image-link .link:after {
    display: none;
}

@media screen and (min-width: 769px) {
    .menu__content-image-link:hover .img-gradient {
        opacity: 0;
    }
}

@media screen and (min-width: 1680px) {
    .menu__content-image-link .link {
        font-size: 24px;
        line-height: 24px;
        left: 25px;
        bottom: 25px;
    }
}

.gallery-layout header.header {
    background-color: transparent;
}

.gallery-layout .breadcrumbs-block {
    margin-top: 150px;
    position: relative;
    z-index: 5;
    width: calc(100% - var(--side-fields) * 2);
    margin: 120px auto 30px auto;
    padding: 0 var(--side-fields);
    padding: 0 calc(var(--side-fields) * 2);
}

.gallery-layout .title {
    margin-top: auto;
    margin-right: auto;
}

.gallery-layout .arrows {
    width: calc(100% - calc(var(--side-fields) * 2));
    display: flex;
    justify-content: space-between;
}

.gallery-layout .slider-counter {
    position: absolute;
    right: 80px;
    bottom: 10vh;
}

@media screen and (max-width: 575px) {
    .gallery-layout header.header {
        background-color: var(--blue);
    }
    .gallery-layout .breadcrumbs-block {
        margin: calc(25px + var(--header-height)) auto 30px auto;
    }
    .gallery-layout .slider-counter {
        right: 30px;
    }
    .gallery-layout .main-screen {
        height: calc(100vh - var(--header-height) - 60px);
        height: -webkit-fill-available;
        min-height: auto;
    }
}

#contact {
    padding-top: 71px;
}

#contact section.contacts {
    background: url(../images/common/wave-pattern1.png) right no-repeat, #F7F5FB;
    background-size: contain;
}

#contact .title {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media screen and (min-width: 1720px) {
    #contact {
        padding-top: var(--header-height);
    }
}

@media screen and (max-width: 480px) {
    #contact {
        padding-top: 42px;
    }
}

#contact .forms {
    position: relative;
    padding: var(--side-fields);
}

#contact .tabs {
    padding-left: calc(8.33333% + 10px);
    padding-right: calc(8.33333% + 10px);
    padding-top: 50px;
    padding-bottom: 50px;
}

#contact .map-link-block .link {
    padding-left: 0;
}

@media screen and (min-width: 1720px) {
    #contact .forms .tab-head {
        margin-bottom: 80px;
    }
    #contact .input-group {
        margin-bottom: 0;
        margin-top: 0px;
    }
    #contact .input-group:last-of-type {
        margin-top: 50px;
    }
    #contact .callback .input-group,
    #contact .promotions .input-group {
        margin-top: 0px;
    }
    #contact .forms {
        padding: 60px 107px;
    }
    #contact .tabs {
        padding-right: 80px;
        padding-left: 80px;
    }
    #contact .contacts__info-blocks-wrapper {
        margin-top: 40px;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    #contact .forms {
        margin-top: 20px;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 768px) {
    #contact section.contacts {
        background-size: auto 100vh;
        background-position-x: 35vh;
        background-position-y: 0;
    }
    #contact .contacts__info-blocks-wrapper {
        padding-left: 0;
        padding-top: 0;
    }
    #contact .tabs {
        padding: 30px 20px;
    }
    #contact .tab-head-item {
        font-size: 16px;
        line-height: 16px;
    }
}

@media screen and (max-width: 480px) {
    #contact section.contacts {
        background-size: auto 100vh;
        background-position-y: top;
        background-position-x: 34vw;
    }
    #contact .tabs {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }
    #contact .tab-head-item {
        width: 100%;
        text-align: center;
    }
    #contact .tab-head-item:after {
        margin-left: auto;
    }
    #contact .tab-head-item:before {
        margin-right: auto;
    }
    #contact form.callback {
        flex-wrap: wrap;
    }
    #contact form.callback .input-group {
        width: 100%;
    }
    #contact .contacts__info-block-column-title {
        margin-top: 20px;
    }
    #contact .contacts__mini-group {
        margin-bottom: 20px;
    }
    #contact .link.mobile {
        margin-top: 20px;
    }
    #contact .map-link-block {
        padding: 0 25px;
    }
    #contact .map-link-block .link {
        padding-left: 0;
        padding-right: 0;
    }
    #contact .contacts__info-block-column.double {
        width: 100%;
    }
}

#web-camera {
    padding-top: var(--header-height);
}

#web-camera section.web-camera {
    background: url(../images/common/wave-pattern1.png) right no-repeat, #F7F5FB;
    padding: 0 var(--side-padding);
    background-size: 35vw 100vh;
}

#web-camera .breadcrumbs-block {
    padding-top: 25px;
    margin-top: 0;
}

#web-camera .breadcrumbs-block__item {
    margin-bottom: 0;
}

#web-camera .breadcrumbs-block .title {
    padding-bottom: 0;
}

#web-camera .cameras-wrapper {
    padding-top: 28px;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media screen and (min-width: 1720px) {
    #web-camera .title {
        max-width: none;
    }
}

.sngl-camera {
    padding-bottom: 20px;
    width: calc(50% - 20px);
}

.sngl-camera iframe {
    width: 100%;
    height: calc((100vw - (var(--side-padding) * 2) - 20px) / 2 * 0.5);
}

.sngl-camera__title {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    color: var(--gray-light);
    margin-top: 10px;
}

@media screen and (min-width: 1720px) {
    .sngl-camera {
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 768px) {
    .sngl-camera {
        width: 100%;
        padding-left: calc(8.33333% + 10px);
        padding-right: calc(8.33333% + 10px);
    }
    .sngl-camera iframe {
        width: 100%;
        height: calc((100vw - (var(--side-padding) * 2)) * 0.4);
    }
}

@media screen and (max-width: 575px) {
    .sngl-camera {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .sngl-camera iframe {
        height: calc((100vw - (var(--side-padding) * 2)) * 0.5);
    }
    .sngl-camera .title {
        margin-left: auto;
        margin-right: auto;
    }
}

#news .page__content,
#promotions .page__content {
    background-size: 35vw 100vh;
    background-repeat-y: repeat;
    padding-top: var(--header-height);
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
}

#news .page-bg,
#promotions .page-bg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: url(../images/common/wave-pattern1.png) top right no-repeat, #F7F5FB;
    background-size: auto 100vh;
    z-index: -1;
    pointer-events: none;
}

#news .title,
#promotions .title {
    padding-left: 0;
    padding-bottom: 0;
}

@media screen and (max-width: 575px) {
    #news .page__content,
    #promotions .page__content {
        background: url(../images/common/wave-pattern1.png) top right no-repeat, #F7F5FB;
        background-size: 100vw 100vh;
        background-repeat-y: no-repeat;
    }
}

.articles-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
}

@media screen and (min-width: 1720px) {
    .articles-wrapper {
        margin-top: 46px;
    }
}

@media screen and (max-width: 768px) {
    .articles-wrapper {
        justify-content: center;
    }
}

@media screen and (max-width: 575px) {
    .articles-wrapper {
        margin-top: 20px;
    }
}

.article {
    width: calc(50% - 10px);
    margin-bottom: 20px;
    padding: 40px;
    background-color: var(--white);
}

.article__title-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.article__title {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    /* or 125% */
    text-transform: uppercase;
    color: var(--gray);
    max-width: 75%;
}

.article__date {
    font-weight: 500;
    font-size: 12px;
    line-height: 1em;
    /* or 100% */
    text-align: right;
    text-transform: uppercase;
    color: var(--gray-light);
    height: 2em;
    max-width: 4.5ch;
    display: inline-block;
    word-wrap: break-word;
}

.article .vert-wave-blue-line {
    margin-left: 17px;
    margin-right: 17px;
}

.article .article__img-wrap {
    position: relative;
    overflow: hidden;
}

.article .article__img {
    transition: 1s;
}

.article .article__img-wrap:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #000028 0%, rgba(0, 0, 40, 0) 100%), #0085FF;
    mix-blend-mode: color;
    transform: rotate(-180deg);
    transition: .6s;
}

.article .article__img-wrap:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #001F3C;
    mix-blend-mode: soft-light;
    transition: .6s;
}

@media screen and (min-width: 1720px) {
    .article {
        padding: 40px 57px 57px 57px;
    }
    .article__title-wrap {
        margin-bottom: 30px;
    }
    .article__title {
        font-size: 24px;
        line-height: 30px;
    }
    .article__date {
        font-size: 18px;
    }
}

@media screen and (min-width: 769px) {
    .article:hover .article__title {
        color: var(--blue);
    }
    .article:hover .article__img {
        transform: scale(1.5);
        transition: 15s;
    }
    .article:hover .article__img-wrap:after,
    .article:hover .article__img-wrap:before {
        opacity: 0;
    }
}

@media screen and (max-width: 768px) {
    .article {
        width: calc(100% - (100% / 12 * 2));
    }
    .article__title {
        max-width: none;
        font-size: 16px;
        line-height: 22px;
    }
}

@media screen and (max-width: 575px) {
    .article {
        width: 100%;
        padding: 17px 17px 23px 17px;
        margin-bottom: 10px;
    }
    .article .vert-wave-blue-line {
        margin-left: 10px;
        margin-right: 10px;
        align-self: flex-start;
    }
    .article__img-wrap {
        padding-bottom: 1.6em;
    }
    .article__title-wrap {
        margin-bottom: 10px;
    }
    .article__title {
        font-size: 14px;
        line-height: 1.43em;
    }
    .article__date {
        font-size: 10px;
        padding-top: 9px;
        align-self: flex-start;
    }
}

.news-pagination {
    margin-top: 40px;
    margin-bottom: 50px;
    font-weight: bold;
    font-size: 18px;
    line-height: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.news-pagination .news-pagination {
    margin-top: 0;
    margin-bottom: 0;
}

.news-pagination__item {
    position: relative;
    padding-bottom: 15px;
    padding-right: 7px;
    padding-left: 7px;
    margin-right: 10px;
    color: var(--blue);
}

.news-pagination__item.active:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='15' viewBox='0 0 28 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 8C14 8 14 2 1.00137e-06 2' stroke='%230085FF' stroke-width='3'/%3E%3Cpath d='M28 13C14 13 14 7 5.24536e-07 7' stroke='%230085FF' stroke-width='3'/%3E%3C/svg%3E%0A");
    width: 24px;
    height: 11px;
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
}

@media screen and (min-width: 1720px) {
    .news-pagination {
        font-size: 24px;
        line-height: 30px;
    }
    .news-pagination__item {
        margin-right: 20px;
    }
    .news-pagination__item.active:after {
        width: 28px;
        height: 13px;
    }
}

@media screen and (max-width: 575px) {
    .news-pagination {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 16px;
    }
}

#single-news .page__content,
#single-promotions .page__content {
    background: url(../images/common/wave-pattern1.png) top right no-repeat, #F7F5FB;
    background-size: 35vw 100vh;
    background-repeat-y: repeat;
    padding-top: var(--header-height);
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
}

#single-news .title,
#single-promotions .title {
    padding-left: 0;
    padding-bottom: 0;
    max-width: none;
}

#single-news .breadcrumbs-block .title,
#single-promotions .breadcrumbs-block .title {
    display: none;
}

@media screen and (max-width: 480px) {
    #single-news .breadcrumbs-block,
    #single-promotions .breadcrumbs-block {
        max-inline-size: calc(100vw - 20px);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex-wrap: nowrap;
    }
    #single-news .breadcrumbs-block__item-current,
    #single-promotions .breadcrumbs-block__item-current {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.news-article {
    background-color: var(--white);
    margin-left: calc(16.66667% + 10px);
    margin-right: calc(16.66667% + 10px);
    padding-left: calc(8.33333% + 10px);
    padding-right: calc(8.33333% + 10px);
    padding-top: 40px;
    padding-bottom: 50px;
    margin-top: 20px;
}

.news-article .article__title-wrap {
    align-items: flex-start;
    flex-wrap: wrap;
}

.news-article .article {
    width: 100%;
    padding: 0;
}

.news-article .article__title {
    font-size: 30px;
    line-height: 1em;
    max-width: calc(100% - 53px - 30px);
}

.news-article__image {
    margin-top: 30px;
}

.news-article iframe {
    width: 100%;
    height: calc((100vw - (var(--side-padding) * 2) - 20px) / 4);
    margin-bottom: 30px;
}

.news-article__text {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    margin-top: 30px;
    color: var(--gray-light);
}

.news-article__text p {
    margin-bottom: 1.5em;
}

.news-article__subtitle {
    font-weight: bold;
    font-size: 18px;
    line-height: 30px;
    color: var(--gray);
    text-transform: uppercase;
}

.news-article__list {
    color: var(--gray-light);
    font-size: 18px;
    line-height: 30px;
    margin-top: 10px;
}

.news-article__list-item:before {
    content: '·';
    margin-left: 24px;
    margin-right: 24px;
}

.news-article .news-article__list li:before {
    content: '·';
    margin-left: 24px;
    margin-right: 24px;
}

.news-article .link {
    display: inline-flex;
    width: calc(50% - 5px);
    white-space: nowrap;
    padding-right: 0;
    margin-top: 50px;
}

@media screen and (min-width: 1720px) {
    .news-article {
        font-size: 18px;
        line-height: 30px;
    }
    .news-article .article__title {
        font-size: 36px;
        line-height: 1em;
        max-width: calc(100% - 53px - 55px);
    }
    .news-article__list {
        margin-top: 20px;
    }
}

@media screen and (max-width: 1200px) {
    .news-article .link {
        display: inline-block;
    }
    .news-article .link:last-of-type {
        padding-left: 15%;
        margin-left: auto;
    }
}

@media screen and (max-width: 1100px) {
    .news-article {
        margin-left: calc(8.33333% + 10px);
        margin-right: calc(8.33333% + 10px);
    }
}

@media screen and (min-width: 769px) and (max-width: 861px) {
    .news-article .link {
        width: auto;
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .news-article {
        margin-left: 0;
        margin-right: 0;
        width: calc(100% - 20px);
        padding-left: calc(8.33333% + 10px);
        padding-right: calc(8.33333% + 10px);
        margin-top: 30px;
    }
    .news-article .article__title {
        max-width: calc(100% - 53px - 30px);
    }
    .news-article .article__title {
        font-size: 24px;
        line-height: 1em;
    }
    .news-article__image {
        margin-top: 20px;
    }
}

@media screen and (max-width: 575px) {
    .news-article {
        margin-top: 20px;
        padding: 20px 17px;
        width: 100%;
    }
    .news-article__text {
        font-size: 14px;
        line-height: 22px;
        margin-top: 10px;
    }
    .news-article .article__title {
        font-size: 14px;
        line-height: 20px;
        max-width: calc(100% - 40px - 30px);
    }
    .news-article__subtitle {
        font-size: 14px;
        line-height: 20px;
    }
    .news-article__list {
        font-size: 14px;
        line-height: 30px;
    }
    .news-article__image {
        margin-top: 10px;
    }
    .news-article .link {
        width: 100%;
        margin-top: 10px;
        font-size: 14px;
        line-height: 20px;
    }
    .news-article .link:last-of-type {
        margin-top: 20px;
    }
    .news-article iframe {
        height: calc((100vw - (var(--side-padding) * 2) - 20px) / 2);
    }
}

.similar-news-article {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 30px;
}

.similar-news-article .title {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
}

.similar-news-article .article {
    width: calc(50% - 10px);
}

@media screen and (min-width: 1720px) {
    .similar-news-article {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .similar-news-article .title {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 768px) {
    .similar-news-article {
        margin-bottom: 64px;
    }
    .similar-news-article .article {
        width: calc(100% - (100% / 12 * 2));
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 575px) {
    .similar-news-article {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .similar-news-article .article {
        width: 100%;
    }
    .similar-news-article .title {
        margin-bottom: 20px;
    }
}

#about {
    --breadcrumbs-height: 73px;
}

#about .page__content {
    margin-top: var(--header-height);
}

#about .title {
    padding-left: 0;
    padding-bottom: 0;
    max-width: none;
}

#about .breadcrumbs-block {
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
}

@media screen and (min-width: 1720px) {
    #about {
        --breadcrumbs-height: 94px;
    }
}

@media screen and (max-width: 768px) {
    #about .breadcrumbs-block {
        margin-top: 0;
        padding-top: 20px;
    }
}

@media screen and (max-width: 575px) {
    #about .breadcrumbs-block {
        position: relative;
        z-index: 1;
    }
}

.about-section-with-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    background: none !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}

.about-section-with-bg .about-section-with-bg-image {
    position: absolute;
    left: 0;
    top: -30%;
    width: 100%;
    height: 120%;
    object-fit: cover;
    z-index: -1;
}

@media screen and (min-width: 576px) {
    .about-section-with-bg {
        min-height: calc(100vh - var(--header-height));
    }
}

.about-section-with-bg.first {
    margin-top: calc(var(--breadcrumbs-height) - (var(--breadcrumbs-height) * 2));
    padding-top: var(--breadcrumbs-height);
}

@media screen and (max-width: 768px) {
    .about-section-with-bg {
        background-position: top center;
    }
}

@media screen and (max-width: 575px) {
    .about-section-with-bg {
        background-size: auto 100vh;
        background-position: center top;
    }
    .about-section-with-bg.first {
        position: relative;
        margin-top: calc(var(--breadcrumbs-height) - (var(--breadcrumbs-height) * 2 + 20px));
        padding-top: calc(var(--breadcrumbs-height) + 20px);
    }
    .about-section-with-bg.first:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 35%);
        background-size: auto, auto 100vh;
    }
}

.about-text-block {
    --blue-logo-width: 100px;
    --about-text-block-padding-top: 135px;
    width: 560px;
    background: url(../images/about/text-bg.png) left top no-repeat;
    background-size: 100% auto;
    padding-left: 108px;
    padding-right: 100px;
    padding-top: var(--about-text-block-padding-top);
    padding-bottom: 70px;
    position: relative;
    margin-bottom: -1px;
}

.about-text-block-right {
    background: url(../images/about/text-bg-r.png) left top no-repeat;
    margin-left: auto;
    margin-right: 0;
}

.about-text-block-right .blue-logo {
    right: auto;
    left: 0;
    transform: translate(-50%, -50%);
}

.about-text-block .text {
    color: var(--gray-light);
}

.about-text-block__main-subtitle {
    position: relative;
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 30px;
    padding-top: 30px;
}

.about-text-block__main-subtitle-wave {
    width: 60px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 0;
}

.about-text-block__main-subtitle-wave path {
    stroke-width: 3 !important;
}

.about-text-block__main-subtitle-small {
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    color: var(--gray-light);
    text-transform: none;
    margin-bottom: 10px;
    margin-top: 50px;
}

.about-text-block__main-subtitle-small-wave {
    left: auto;
    right: 0;
}

.about-text-block .blue-logo {
    background-color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: var(--blue-logo-width);
    height: var(--blue-logo-width);
    position: absolute;
    right: 0;
    top: var(--about-text-block-padding-top);
    transform: translate(50%, -50%);
}

.about-text-block .blue-logo svg {
    width: calc(var(--blue-logo-width) * 0.8);
    height: calc(var(--blue-logo-width) * 0.8);
}

.about-text-block-right {
    background: url(../images/about/text-bg-r.png) left top no-repeat;
    background-size: cover;
    margin-left: auto;
    margin-right: 0;
}

.about-text-block-right .blue-logo {
    right: auto;
    left: 0;
    transform: translate(-50%, -50%);
}

@media screen and (min-width: 1720px) {
    .about-text-block {
        --blue-logo-width: 114px;
        padding-right: 114px;
        --about-text-block-padding-top: 165px;
        padding-bottom: 93px;
        width: 645px;
    }
    .about-text-block__main-subtitle {
        font-size: 36px;
        line-height: 36px;
        margin-bottom: 20px;
    }
    .about-text-block__main-subtitle-small {
        font-size: 24px;
        line-height: 36px;
    }
    .about-text-block-wave path {
        stroke-width: 4 !important;
    }
}

@media screen and (max-width: 768px) {
    .about-text-block {
        padding-left: 78px;
        padding-bottom: 70px;
        padding-right: 73px;
        width: 437px;
        background: url(../images/about/text-bg-tablet.png) left top no-repeat;
        background-size: cover;
    }
    .about-text-block__main-subtitle {
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 20px;
    }
    .about-text-block__main-subtitle-small {
        font-size: 18px;
        line-height: 30px;
    }
    .about-text-block-right {
        background: url(../images/about/text-bg-tablet-r.png) left top no-repeat;
        background-size: cover;
    }
}

@media screen and (max-width: 575px) {
    .about-text-block {
        padding-left: var(--side-fields);
        padding-right: var(--side-fields);
        padding-bottom: 30px;
        width: 100%;
        margin-top: 50vh;
        --about-text-block-padding-top: 20%;
    }
    .about-text-block .blue-logo {
        display: none;
    }
    .about-text-block__main-subtitle {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 10px;
        position: relative;
    }
    .about-text-block__main-subtitle-wave {
        width: 42px;
        height: 16px;
    }
    .about-text-block__main-subtitle-wave path {
        stroke-width: 2 !important;
    }
    .about-text-block__main-subtitle-small {
        font-size: 14px;
        line-height: 22px;
        margin-top: 0;
        padding-top: 20px;
    }
    .about-text-block-right {
        background: url(../images/about/text-bg.png) left top no-repeat;
        background-size: cover;
    }
}

.blue-logo {
    --blue-logo-width: 100px;
    background-color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: var(--blue-logo-width);
    height: var(--blue-logo-width);
}

.blue-logo svg {
    width: calc(var(--blue-logo-width) * 0.8);
    height: calc(var(--blue-logo-width) * 0.8);
}

@media screen and (min-width: 1720px) {
    .blue-logo {
        --blue-logo-width: 114px;
    }
}

.about-separator-block {
    padding: 80px 0;
    background: url(../images/about/separator-bg.png) center no-repeat, linear-gradient(180deg, rgba(253, 241, 211, 0) 0%, #FDF1D3 100%), linear-gradient(90deg, #F7F5FB 0%, rgba(255, 255, 255, 0) 100%), url(../images/about/separator-wave.png) right no-repeat;
    background-size: cover, auto, cover, auto;
    --vertical-padding: 45px;
    overflow: hidden;
}

.about-separator-block__text {
    background-color: var(--white);
    padding-top: var(--vertical-padding);
    padding-bottom: var(--vertical-padding);
    width: calc(66.66667% - 20px);
    margin-left: calc(16.66667% + 10px);
    margin-right: calc(16.66667% + 10px);
    padding-left: calc(8.33333% + 10px);
    padding-right: calc(8.33333% + 10px);
    overflow: hidden;
}

.about-separator-block__text p {
    --text-left-padding: 27px;
    padding-left: var(--text-left-padding);
    position: relative;
}

.about-separator-block__text p:before {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='36' viewBox='0 0 9 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C8 18 0.999999 18 0.999998 36' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    width: 7px;
    height: 36px;
}

@media screen and (min-width: 1720px) {
    .about-separator-block {
        --vertical-padding: 60px;
        padding: 46px 0 85px 0;
    }
    .about-separator-block__text p {
        --text-left-padding: 33px;
    }
    .about-separator-block__text p:before {
        width: 13px;
        height: 60px;
    }
}

@media screen and (max-width: 768px) {
    .about-separator-block {
        --vertical-padding: 40px;
        padding: 55px 0;
    }
    .about-separator-block__text {
        width: calc(83.33333% - 20px);
        margin-left: calc(8.33333% + 10px);
        margin-right: calc(8.33333% + 10px);
        padding-left: calc(8.33333% + 10px);
        padding-right: calc(8.33333% + 10px);
    }
}

@media screen and (max-width: 575px) {
    .about-separator-block {
        --vertical-padding: 30px;
        padding: 30px 0;
    }
    .about-separator-block__text p {
        --text-left-padding: 25px;
    }
    .about-separator-block__text {
        width: calc(100% - 20px);
        margin-left: calc(0% + 10px);
        margin-right: calc(0% + 10px);
        padding-left: calc(0% + 10px);
        padding-right: calc(0% + 10px);
    }
}

@keyframes aboutRiverLogoRotating {
    from {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(0deg);
    }
}

#developers .page__content {
    margin-top: var(--header-height);
}

#developers .title {
    padding-left: 0;
    padding-bottom: 0;
    max-width: none;
}

#developers .breadcrumbs-block {
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 1720px) {
    #developers .page__content {
        padding-top: 20px;
    }
    #developers .breadcrumbs-block {
        margin-top: 0px;
    }
}

.developers-first-block {
    margin-top: calc(var(--header-height) - (var(--header-height) * 2));
    padding-top: calc(var(--header-height) + 60px);
    background-image: url(../images/developers/bg.png);
    background-color: #F7F5FB;
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 55vw auto;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 77px;
}

.developers-first-block-sector {
    width: calc(41.66667% - 20px);
    padding-left: calc(8.33333% + 10px);
    padding-right: calc(8.33333% + 10px);
}

.developers-first-block .text-standart {
    margin-top: 1.5em;
}

.developers-first-block .subtitle {
    line-height: 1.67em;
}

@media screen and (min-width: 1720px) {
    .developers-first-block {
        line-height: 1.5em;
    }
}

@media screen and (max-width: 1024px) {
    .developers-first-block {
        background-size: 55vw 100%;
    }
    .developers-first-block-sector {
        width: calc(41.66667% - 20px);
        padding-left: calc(4.16667% + 10px);
        padding-right: calc(4.16667% + 10px);
    }
}

@media screen and (max-width: 768px) {
    .developers-first-block {
        background-image: url(../images/developers/bg-tablet.png);
        background-color: #F7F5FB;
        background-position: top left;
        background-size: cover;
        background-repeat: no-repeat;
        background-size: 100vw auto;
        flex-direction: column;
        align-items: center;
    }
    .developers-first-block-sector {
        width: calc(83.33333% - 20px);
        padding-left: calc(0% + 10px);
        padding-right: calc(0% + 10px);
    }
    .developers-first-block .developer-logo {
        margin: 30px auto;
    }
}

@media screen and (max-width: 575px) {
    .developers-first-block {
        line-height: 1.57em;
        padding-top: calc(var(--header-height) + 20px);
        background-image: url(../images/developers/bg-mob.png);
        background-size: 140vw calc(50vh - 50px);
        background-size: auto 50%;
        background-position-x: center;
        padding-bottom: 25px;
    }
    .developers-first-block-sector {
        width: 100%;
    }
}

.developer-logo {
    background-color: var(--blue);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.developer-logo svg {
    width: 53%;
    height: 118%;
    margin-top: -30%;
    margin-left: 5%;
    pointer-events: none;
}

@media screen and (min-width: 1720px) {
    .developer-logo {
        width: 294px;
        height: 294px;
    }
}

@media screen and (max-width: 575px) {
    .developer-logo {
        width: 120px;
        height: 120px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

.developers-separator-block {
    padding: 80px 0;
    background: url(../images/about/separator-bg.png) center no-repeat, linear-gradient(180deg, rgba(253, 241, 211, 0) 0%, #FDF1D3 100%), linear-gradient(90deg, #F7F5FB 0%, rgba(255, 255, 255, 0) 100%), url(../images/about/separator-wave.png) right no-repeat;
    background-size: cover, auto, cover, auto;
    display: flex;
    justify-content: space-around;
    --vertical-padding: 80px;
}

.developers-separator-block__text {
    position: relative;
    background-color: var(--white);
    padding-top: var(--vertical-padding);
    padding-bottom: var(--vertical-padding);
    width: calc(66.66667% - 20px);
    margin-left: calc(16.66667% + 10px);
    margin-right: calc(16.66667% + 10px);
    padding-left: 100px;
    padding-right: 100px;
    column-count: 2;
    column-gap: 10%;
    line-break: auto;
}

.developers-separator-block__text div,
.developers-separator-block__text span {
    break-inside: avoid;
    display: inline-block;
}

.developers-separator-block__text {
    --text-left-padding: 27px;
    padding-left: calc(100px + var(--text-left-padding));
    position: relative;
}

.developers-separator-block__text:before {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='36' viewBox='0 0 9 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C8 18 0.999999 18 0.999998 36' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    left: 100px;
    top: var(--vertical-padding);
    width: 7px;
    height: 36px;
}

.developers-separator-block .subtitle {
    margin-bottom: 1.3em;
    line-height: 1.5em;
}

.developers-separator-block__text.no-wave:before {
    display: none;
    padding-left: 0;
}

@media screen and (min-width: 1720px) {
    .developers-separator-block {
        --vertical-padding: 60px;
        padding: 75px 0 75px 0;
    }
    .developers-separator-block__text {
        --text-left-padding: 33px;
    }
    .developers-separator-block__text:before {
        width: 13px;
        height: 60px;
    }
}

@media screen and (max-width: 1024px) {
    .developers-separator-block__text {
        width: calc(91.66667% - 20px);
        margin-left: calc(4.16667% + 10px);
        margin-right: calc(4.16667% + 10px);
        column-gap: 5%;
    }
}

@media screen and (max-width: 768px) {
    .developers-separator-block {
        --vertical-padding: 55px;
        padding: var(--vertical-padding) 0;
    }
    .developers-separator-block__text {
        width: calc(83.33333% - 20px);
        margin-left: calc(8.33333% + 10px);
        margin-right: calc(8.33333% + 10px);
        padding-left: calc(8.33333% + 10px);
        padding-right: calc(8.33333% + 10px);
        column-count: 1;
    }
    .developers-separator-block__text:before {
        left: 50px;
    }
    .developers-separator-block .subtitle.second {
        margin-top: 1.5em;
    }
}

@media screen and (max-width: 575px) {
    .developers-separator-block {
        --vertical-padding: 30px;
        padding: 30px 0;
    }
    .developers-separator-block__text {
        --text-left-padding: 25px;
    }
    .developers-separator-block__text {
        width: calc(100% - 20px);
        margin-left: 0;
        margin-right: 0;
        padding-left: calc(10.41667% + 10px);
        padding-right: calc(8.33333% + 10px);
    }
    .developers-separator-block__text:before {
        left: calc(16.66% / 2);
    }
}

#location {
    --breadcrumbs-height: 73px;
}

#location .page__content {
    margin-top: var(--header-height);
}

#location .title {
    padding-left: 0;
    padding-bottom: 0;
    max-width: none;
}

#location .breadcrumbs-block {
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
    margin-top: 23px;
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 1720px) {
    #location {
        --breadcrumbs-height: 94px;
    }
}

@media screen and (max-width: 768px) {
    #location .breadcrumbs-block {
        margin-top: 0;
        padding-top: 20px;
    }
}

@media screen and (max-width: 575px) {
    #location .breadcrumbs-block {
        position: relative;
        z-index: 1;
    }
}

.location-first-section {
    --padding-for-icons: 80px;
    background: url(../images/developers/bg.png) left no-repeat, url(../images/location/bg-image.jpg) right no-repeat;
    background-size: 55vw, auto 100%;
    min-height: 560px;
    margin-top: calc(var(--header-height) - (var(--header-height) * 2) - 1px);
    padding-top: var(--header-height);
    padding-right: calc(66.66667% + 10px);
    padding-left: calc(8.33333% + 10px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.location-first-section .subtitle {
    margin-bottom: 25px;
}

.location-first-section .subtitle:before,
.location-first-section .text-standart:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.location-first-section .subtitle:before {
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='63' viewBox='0 0 50 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 0C11.2158 0 0.000254512 11.1477 0.000254512 24.833C-0.0903696 44.8515 24.05 61.4503 25 62.1212C25 62.1212 50.0904 44.8515 49.9998 24.8485C49.9998 11.1477 38.7842 0 25 0Z' fill='%230085FF'/%3E%3Cpath d='M20.6293 15.2073C21.7672 15.3747 22.3661 15.7095 20.0305 15.9327C19.4915 15.9885 15.4191 16.4348 14.5807 16.5464C13.2632 16.7138 14.2214 16.9928 15.5389 17.3834C16.557 17.7181 19.4316 18.3877 22.7254 19.1688V15.7653C22.7254 15.0957 20.3299 15.1515 20.3299 15.1515C20.4497 15.1515 20.5695 15.2073 20.6293 15.2073ZM37.6973 22.6281C39.3741 22.9629 39.5538 23.8556 36.6792 24.86C30.8701 26.9244 28.3548 27.7613 23.5638 29.2678C22.3661 29.6584 22.4859 30.1605 23.6237 30.5511C30.391 32.8387 38.895 34.5684 40.1526 34.8474V23.7998C40.1526 22.6839 37.6374 22.5723 37.3379 22.5723C37.4577 22.5723 37.5775 22.6281 37.6973 22.6281ZM13.0835 28.2077C15.4191 27.4823 23.0847 25.6411 28.9537 24.302C31.1096 23.7998 30.5108 23.4093 29.2531 23.0745C21.7672 21.4006 13.3231 18.8898 10.2089 17.7181C10.0892 17.7181 9.96938 17.6623 9.84961 17.6065V29.3794C9.84961 30.6069 12.4847 31.1091 12.4847 31.1091C9.78972 29.8816 11.3468 28.7656 13.0835 28.2077Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 49px;
    height: 62px;
    display: inline-block;
}

.location-first-section .text-standart:before {
    background-image: url("data:image/svg+xml,%3Csvg width='42' height='16' viewBox='0 0 42 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42 10C21 10 21 1 1.5154e-06 1' stroke='%230085FF' stroke-width='2'/%3E%3Cpath d='M42 15C21 15 21 6 1.5154e-06 6' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E%0A");
    width: 60px;
    height: 20px;
}

.location-first-section .subtitle,
.location-first-section .text-standart {
    position: relative;
    padding-left: var(--padding-for-icons);
}

@media screen and (min-width: 1720px) {
    .location-first-section {
        min-height: 703px;
    }
    .location-first-section .subtitle {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 1100px) {
    .location-first-section {
        padding-right: calc(58.33333% + 10px);
        padding-left: calc(8.33333% + 10px);
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .location-first-section {
        min-height: 100vh;
        background: url(../images/location/bg-image-tablet.jpg) bottom no-repeat;
        background-size: auto 70vh;
        background-position: center bottom;
        padding-left: calc(16.66667% + 10px);
        padding-right: calc(16.66667% + 10px);
        padding-top: calc(var(--breadcrumbs-height) + 50px);
        justify-content: flex-start;
    }
}

@media screen and (max-width: 575px) {
    .location-first-section {
        --padding-for-icons: 60px;
        width: 100%;
        background: url(../images/location/bg-image-tablet.jpg) bottom no-repeat;
        background-size: auto 45vh;
        background-position: center bottom;
        min-height: 85vh;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
        /*Пиксели - отступ блока по макету*/
        padding-top: calc(var(--breadcrumbs-height) + 20px);
        justify-content: flex-start;
    }
    .location-first-section .subtitle {
        margin-bottom: 10px;
    }
    .location-first-section .subtitle:before {
        width: 42px;
        height: 52px;
    }
    .location-first-section .text-standart:before {
        width: 42px;
        height: 14px;
    }
}

@media screen and (max-width: 360px) {
    .location-first-section {
        min-height: 100vh;
    }
}

.location-separator-block {
    padding: 80px 0;
    background: url(../images/about/separator-bg.png) center no-repeat, linear-gradient(180deg, rgba(253, 241, 211, 0) 0%, #FDF1D3 100%), linear-gradient(90deg, #F7F5FB 0%, rgba(255, 255, 255, 0) 100%), url(../images/about/separator-wave.png) right no-repeat;
    background-size: cover, auto, cover, auto;
    display: flex;
    justify-content: space-around;
    --vertical-padding: 80px;
}

.location-separator-block__text {
    position: relative;
    background-color: var(--white);
    padding-top: var(--vertical-padding);
    padding-bottom: var(--vertical-padding);
    width: calc(66.66667% - 20px);
    margin-left: calc(16.66667% + 10px);
    margin-right: calc(16.66667% + 10px);
    padding-left: calc(8.33333% + 10px);
    padding-right: calc(8.33333% + 10px);
}

.location-separator-block__text {
    --text-left-padding: 27px;
    padding-left: calc(100px + var(--text-left-padding));
    position: relative;
}

.location-separator-block__text:before {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='36' viewBox='0 0 9 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C8 18 0.999999 18 0.999998 36' stroke='%230085FF' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    left: 100px;
    top: var(--vertical-padding);
    width: 7px;
    height: 36px;
}

.location-separator-block .subtitle {
    margin-bottom: 1.3em;
    line-height: 1.5em;
}

.location-separator-block__text.no-wave:before {
    display: none;
    padding-left: 0;
}

@media screen and (min-width: 1720px) {
    .location-separator-block {
        --vertical-padding: 60px;
        padding: 75px 0 75px 0;
    }
    .location-separator-block__text {
        --text-left-padding: 33px;
    }
    .location-separator-block__text:before {
        width: 13px;
        height: 60px;
    }
}

@media screen and (max-width: 1024px) {
    .location-separator-block__text {
        width: calc(75% - 20px);
        margin-left: calc(12.5% + 10px);
        margin-right: calc(12.5% + 10px);
    }
}

@media screen and (max-width: 768px) {
    .location-separator-block {
        --vertical-padding: 55px;
        padding: var(--vertical-padding) 0;
    }
    .location-separator-block__text {
        width: calc(83.33333% - 20px);
        margin-left: calc(8.33333% + 10px);
        margin-right: calc(8.33333% + 10px);
        padding-left: calc(8.33333% + 10px);
        padding-right: calc(8.33333% + 10px);
    }
    .location-separator-block__text:before {
        left: 50px;
    }
    .location-separator-block .subtitle.second {
        margin-top: 1.5em;
    }
}

@media screen and (max-width: 575px) {
    .location-separator-block {
        --vertical-padding: 30px;
        padding: 30px 0;
    }
    .location-separator-block__text {
        --text-left-padding: 25px;
    }
    .location-separator-block__text {
        width: calc(100% - 20px);
        margin-left: 0;
        margin-right: 0;
        padding-left: calc(10.41667% + 10px);
        padding-right: calc(8.33333% + 10px);
    }
    .location-separator-block__text:before {
        left: calc(16.66% / 2);
    }
}

.location-last-section {
    min-height: 500px;
    background: url(../images/location/second-bg-image.jpg) center no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, max-content);
    row-gap: 20px;
    align-content: center;
    padding-left: calc(66.66667% + 10px);
    padding-right: calc(8.33333% + 10px);
}

.location-last-section .subtitle {
    position: relative;
}

.location-last-section .subtitle:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='60' viewBox='0 0 17 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 60C2 30 15 30 15 -5.30044e-07' stroke='%230085FF' stroke-width='4'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    width: 13px;
    height: 60px;
    position: absolute;
    right: calc(100% + 15px);
    top: 0;
}

@media screen and (min-width: 1720px) {
    .location-last-section {
        min-height: 703px;
    }
}

@media screen and (max-width: 1100px) {
    .location-last-section {
        padding-left: calc(58.33333% + 10px);
        padding-right: calc(4.16667% + 10px);
    }
}

@media screen and (max-width: 768px) {
    .location-last-section {
        background: url(../images/location/second-bg-image-tablet.jpg) center no-repeat;
        background-size: cover;
        min-height: 100vh;
        row-gap: 10px;
        padding-top: 60vh;
        width: 100%;
        padding-left: calc(8.33333% + 10px);
        padding-right: calc(8.33333% + 10px);
    }
    .location-last-section .subtitle:before {
        display: none;
    }
}

@media screen and (max-width: 575px) {
    .location-last-section {
        min-height: 100vh;
        padding-top: calc(60vh + 10px);
        padding-bottom: 35px;
        background: url(../images/location/bg-image-mob.jpg) center no-repeat;
        background-size: 100vw 60vh;
        background-position: top left;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
    }
}

.navigator-link {
    background: url(../images/location/navigator-link-bg.jpg) center no-repeat;
    background-size: cover;
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 10%;
    box-shadow: -4px 30px 50px -46px rgba(0, 0, 0, 0.75);
}

.navigator-link .link {
    line-height: 1.25em;
    padding-right: 0;
}

.navigator-link svg {
    width: 54px;
    height: 67px;
    margin-right: 30px;
}

#advantages {
    --breadcrumbs-height: 73px;
}

#advantages .page__content {
    margin-top: var(--header-height);
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
}

#advantages .title {
    padding-left: 0;
    padding-bottom: 0;
    max-width: none;
}

#advantages .breadcrumbs-block {
    margin-top: 23px;
    margin-bottom: 36px;
}

@media screen and (min-width: 1720px) {
    #advantages {
        --breadcrumbs-height: 94px;
        margin-bottom: 36px;
        --adv-row-height: calc((100vw - (var(--side-padding) * 2) - 20px) / 2 * 0.38);
    }
}

@media screen and (min-width: 769px) and (max-width: 1719px) {
    #advantages {
        --adv-row-height: calc((100vw - (var(--side-padding) * 2) - 20px) / 2 * 0.5);
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    #advantages {
        --adv-row-height: calc((100vw - (var(--side-padding) * 2) - 20px) / 2 * 0.55);
    }
}

@media screen and (max-width: 768px) {
    #advantages {
        --adv-row-height: calc((100vw - (var(--side-padding) * 2)) * 0.4);
    }
    #advantages .breadcrumbs-block {
        margin-top: 0;
        padding-top: 20px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 575px) {
    #advantages {
        --adv-row-height: 75vh;
    }
    #advantages .breadcrumbs-block {
        position: relative;
        z-index: 1;
        margin-bottom: 20px;
    }
}

.advantages-subtitle {
    --this-fz: 24px;
    font-weight: bold;
    font-size: var(--this-fz);
    line-height: 1em;
    color: var(--gray);
    text-transform: uppercase;
    margin-bottom: 32px;
}

.advantages-subtitle:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='24' viewBox='0 0 60 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 15C30 15 30 2 1.15576e-06 2' stroke='%230085FF' stroke-width='3'/%3E%3Cpath d='M60 22C30 22 30 9 -6.32381e-07 9' stroke='%230085FF' stroke-width='3'/%3E%3C/svg%3E%0A");
    width: 52px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 20px;
}

@media screen and (min-width: 1720px) {
    .advantages-subtitle {
        --this-fz: 30px;
        margin-bottom: 25px;
    }
    .advantages-subtitle:after {
        margin-left: 10px;
    }
}

@media screen and (max-width: 768px) {
    .advantages-subtitle {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 575px) {
    .advantages-subtitle {
        --this-fz: 18px;
        line-height: 0.89em;
        margin-bottom: 10px;
    }
    .advantages-subtitle:after {
        margin-left: 6px;
        width: 36px;
        height: 12px;
    }
}

.adv-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 50%);
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .adv-grid {
        grid-template-columns: 100%;
        grid-template-rows: repeat(auto-fit, var(--adv-row-height));
    }
}

@media screen and (max-width: 575px) {
    .adv-grid {
        margin-bottom: 15px;
        display: block;
        flex-direction: column;
        height: auto;
    }
}

.adv-block1 {
    grid-template-rows: repeat(2, var(--adv-row-height));
}

@media screen and (max-width: 768px) {
    .adv-block1 {
        grid-auto-rows: var(--adv-row-height);
    }
}

.adv-block2 {
    grid-template-rows: repeat(3, var(--adv-row-height));
}

@media screen and (min-width: 769px) {
    .adv-block2 {
        grid-template-columns: repeat(6, calc(100% / 12 * 2 - 14px));
    }
}

@media screen and (max-width: 768px) {
    .adv-block2 {
        grid-auto-rows: var(--adv-row-height);
    }
}

.adv-block3 {
    grid-template-rows: repeat(3, var(--adv-row-height));
}

@media screen and (min-width: 769px) {
    .adv-block3 {
        grid-template-columns: repeat(3, calc(100% / 12 * 4 - 14px));
    }
}

@media screen and (max-width: 768px) {
    .adv-block3 {
        grid-auto-rows: var(--adv-row-height);
        grid-template-columns: repeat(2, calc(100% / 12 * 6 - 14px));
    }
}

.adv-block4 {
    grid-template-rows: repeat(3, var(--adv-row-height));
}

@media screen and (min-width: 769px) {
    .adv-block4 {
        grid-template-columns: repeat(4, calc(100% / 12 * 3 - 14px));
    }
}

@media screen and (max-width: 768px) {
    .adv-block4 {
        grid-auto-rows: var(--adv-row-height);
    }
}

.adv-block5 {
    grid-template-rows: repeat(3, var(--adv-row-height));
}

@media screen and (min-width: 769px) {
    .adv-block5 {
        grid-template-columns: repeat(3, calc(100% / 12 * 4 - 14px));
    }
}

@media screen and (max-width: 768px) {
    .adv-block5 {
        grid-auto-rows: var(--adv-row-height);
    }
}

@media screen and (max-width: 768px) {
    .promenades {
        order: 1;
    }
}

@media screen and (max-width: 768px) {
    .channel {
        order: 2;
    }
}

@media screen and (max-width: 768px) {
    .fontans {
        order: 4;
    }
}

@media screen and (max-width: 768px) {
    .cafe {
        order: 3;
    }
}

@media screen and (min-width: 769px) {
    .veloroads {
        grid-area: 1/1/3/3;
    }
}

@media screen and (max-width: 768px) {
    .veloroads {
        grid-area: 1/1/3/1;
    }
}

@media screen and (min-width: 769px) {
    .tennis {
        grid-area: 1/3/1/7;
    }
}

@media screen and (min-width: 769px) {
    .skatepark {
        grid-area: 2/3/2/7;
    }
}

@media screen and (min-width: 769px) {
    .football-academy {
        grid-area: 3/1/3/4;
    }
}

@media screen and (max-width: 768px) {
    .football-academy {
        order: 2;
    }
}

@media screen and (min-width: 769px) {
    .stadium {
        grid-area: 3/4/3/7;
    }
}

@media screen and (max-width: 768px) {
    .stadium {
        order: 1;
    }
}

@media screen and (min-width: 769px) {
    .closed-territory {
        grid-area: 1/1/3/1;
    }
}

@media screen and (max-width: 768px) {
    .closed-territory {
        grid-area: 1/1/3/1;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .closed-territory .sngl-adv__image-wave {
        width: 75% !important;
        height: 45px !important;
        margin-right: auto;
        margin-left: 0 !important;
    }
}

@media screen and (min-width: 769px) {
    .kindergardens {
        grid-area: 1/2/3/2;
    }
}

@media screen and (max-width: 768px) {
    .kindergardens {
        grid-area: 1/2/3/2;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .kindergardens .sngl-adv__image-wave {
        width: 75% !important;
        height: 50px !important;
        margin-right: auto;
        margin-left: 0 !important;
    }
}

@media screen and (min-width: 769px) {
    .playgrounds {
        grid-area: 1/3/3/3;
    }
}

@media screen and (max-width: 768px) {
    .playgrounds {
        grid-area: 3/1/5/3;
    }
}

@media screen and (min-width: 769px) {
    .playground-complex {
        grid-area: 3/1/4/4;
    }
}

@media screen and (max-width: 768px) {
    .playground-complex {
        grid-column-end: 3;
        grid-column-start: 1;
    }
}

@media screen and (min-width: 769px) {
    .lake {
        grid-area: 1/1/1/6;
    }
}

@media screen and (min-width: 769px) {
    .beach {
        grid-area: 2/1/2/3;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .beach {
        order: 2;
    }
}

@media screen and (min-width: 769px) {
    .kayakas {
        grid-area: 2/3/2/6;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .kayakas {
        order: 1;
    }
}

@media screen and (min-width: 769px) {
    .surfing {
        grid-area: 3/1/3/6;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .surfing {
        order: 3;
    }
}

@media screen and (min-width: 769px) {
    .elevators {
        grid-area: 1/1/1/3;
    }
}

@media screen and (min-width: 769px) {
    .entry-groups {
        grid-area: 1/3/3/3;
    }
}

@media screen and (max-width: 768px) {
    .entry-groups {
        grid-area: 1/1/3/1;
    }
}

@media screen and (min-width: 769px) {
    .panorama-windows {
        grid-area: 2/1/2/3;
    }
}

@media screen and (min-width: 769px) {
    .terrace-apparts {
        grid-area: 3/1/3/4;
    }
}

.sngl-adv {
    position: relative;
    --full-width-increase-coef: 1.3;
    overflow: hidden;
}

.sngl-adv__image-wave {
    height: 100%;
    width: auto;
    display: flex;
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--adv-row-height);
    object-fit: cover;
    overflow: hidden;
}

.sngl-adv__image-wave.right {
    left: auto;
    right: var(--adv-row-height);
    transform: scaleX(-1) translateX(-2px);
}

.sngl-adv.vertical .sngl-adv__image-wave {
    width: 100%;
    height: auto;
    top: auto;
    left: 0;
}

.sngl-adv.vertical-reverse .sngl-adv__image-wave.reverse {
    transform: scale(-1);
}

.sngl-adv.full-width .sngl-adv__image-wave {
    left: calc(var(--adv-row-height) * var(--full-width-increase-coef));
}

.sngl-adv.full-width .sngl-adv__image-wave.right {
    left: auto;
    right: calc(var(--adv-row-height) * var(--full-width-increase-coef));
}

.sngl-adv__image-background {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.sngl-adv__text-block {
    background-color: #F7F5FB;
    height: 100%;
    width: var(--adv-row-height);
    padding: 0 50px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.sngl-adv__text-block.left {
    margin-right: auto;
}

.sngl-adv__text-block.right {
    margin-left: auto;
}

.sngl-adv.full-width .sngl-adv__text-block {
    width: calc(var(--adv-row-height) * var(--full-width-increase-coef));
}

.sngl-adv.vertical {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.sngl-adv.vertical.top {
    justify-content: flex-start;
}

.sngl-adv.vertical-reverse {
    flex-direction: column-reverse;
}

.sngl-adv.vertical .sngl-adv__text-block {
    height: auto;
    width: 100%;
    padding-bottom: 60px;
}

.sngl-adv.vertical-reverse .sngl-adv__text-block {
    padding-bottom: 0;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
}

.sngl-adv.vertical .sngl-adv__image-wave {
    position: static;
}

.sngl-adv.vertical-reverse .sngl-adv__image-wave {
    position: static;
    transform: scaleY(-1);
    margin-top: -1px;
}

.sngl-adv__subtitle {
    height: 36px;
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--gray);
    margin-bottom: 10px;
}

.sngl-adv__subtitle:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='36' viewBox='0 0 11 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0C9 18 2 18 2 36' stroke='%230085FF' stroke-width='3'/%3E%3C/svg%3E%0A");
    display: inline-block;
    width: 11px;
    height: 36px;
    margin-right: 13px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media screen and (min-width: 1720px) {
    .sngl-adv {
        --full-width-increase-coef: 1.718;
    }
    .sngl-adv__subtitle {
        font-size: 24px;
        line-height: 1.25em;
    }
    .sngl-adv.vertical-reverse .sngl-adv__text-block {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .sngl-adv__text-block {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1300px) {
    .sngl-adv__text-block {
        padding: 0 30px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
    .sngl-adv__text-block {
        padding: 0 15px;
    }
}

@media screen and (max-width: 768px) {
    .sngl-adv {
        --full-width-increase-coef: 1;
    }
    .sngl-adv.vertical .sngl-adv__text-block {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .sngl-adv.vertical .sngl-adv__image-wave {
        width: 54%;
        height: 76px;
        margin-bottom: -5px;
    }
    .sngl-adv.vertical-reverse .sngl-adv__image-wave {
        width: 54%;
        height: 72px;
        margin-left: auto;
        margin-top: -5px;
        margin-right: 0;
    }
}

@media screen and (max-width: 575px) {
    .sngl-adv {
        display: flex;
        position: relative;
        flex-direction: column;
        align-content: flex-end;
        margin-bottom: 15px;
        min-height: var(--adv-row-height);
    }
    .sngl-adv.vertical-reverse {
        flex-direction: column;
    }
    .sngl-adv__text-block,
    .sngl-adv.full-width .sngl-adv__text-block {
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 25px;
        padding-right: 10px;
        width: 100%;
        order: 2;
    }
    .sngl-adv__image-wave {
        position: static;
        transform-origin: center;
        margin-left: auto;
        margin-top: auto;
    }
    .sngl-adv.vertical .sngl-adv__image-wave {
        width: auto;
        height: 100%;
    }
    .sngl-adv__image-wave.right {
        transform: scaleX(-1);
        margin-left: 0;
        margin-right: auto;
    }
    .sngl-adv.vertical .sngl-adv__image-wave {
        order: 1;
    }
    .sngl-adv__image-background {
        order: 0;
    }
    .sngl-adv.vertical-reverse .sngl-adv__image-wave.reverse,
    .sngl-adv.vertical .sngl-adv__image-wave {
        margin-right: 0;
        margin-left: 0;
    }
    .sngl-adv__subtitle:before {
        width: 8px;
        height: 22px;
    }
}

@media screen and (max-width: 575px) {
    .sngl-adv:nth-child(even) .sngl-adv__image-wave {
        transform: scaleX(-1);
        margin-left: 0;
        margin-right: auto;
    }
    .sngl-adv:nth-child(odd) .sngl-adv__image-wave {
        transform: scaleX(1);
        margin-left: auto;
        margin-right: 0;
    }
    .sngl-adv.vertical-reverse .sngl-adv__image-wave {
        transform: scaleX(1) !important;
    }
}

#build-progress {
    --breadcrumbs-height: 73px;
}

#build-progress .page__content {
    background: url(../images/build-progress/bg.png) right top no-repeat;
    background-size: calc(100vw / 12 * 9.5) 100%;
    margin-top: var(--header-height);
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
}

#build-progress .title {
    padding-left: 0;
    padding-bottom: 0;
    max-width: none;
    white-space: nowrap;
}

#build-progress .breadcrumbs-block {
    margin-top: 23px;
    margin-bottom: 36px;
}

@media screen and (min-width: 1720px) {
    #build-progress {
        --breadcrumbs-height: 94px;
        margin-bottom: 36px;
        --adv-row-height: calc((100vw - (var(--side-padding) * 2) - 20px) / 2 * 0.38);
    }
}

@media screen and (min-width: 769px) and (max-width: 1719px) {
    #build-progress {
        --adv-row-height: calc((100vw - (var(--side-padding) * 2) - 20px) / 2 * 0.5);
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    #build-progress {
        --adv-row-height: calc((100vw - (var(--side-padding) * 2) - 20px) / 2 * 0.55);
    }
}

@media screen and (max-width: 768px) {
    #build-progress {
        --adv-row-height: calc((100vw - (var(--side-padding) * 2)) * 0.4);
    }
    #build-progress .page__content {
        background: url(../images/build-progress/bg-tablet.jpg) right bottom no-repeat;
        background-size: auto calc(60vh + 50px);
    }
    #build-progress .breadcrumbs-block {
        margin-top: 0;
        padding-top: 20px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 575px) {
    #build-progress {
        --adv-row-height: 75vh;
    }
    #build-progress .breadcrumbs-block {
        position: relative;
        z-index: 1;
        margin-bottom: 20px;
    }
}

.monthes,
.years {
    font-weight: 400;
}

.monthes li,
.years li {
    color: #DDE6EE;
    pointer-events: none;
    transition: .5s;
}

.monthes li.active,
.monthes li.current,
.years li.active,
.years li.current {
    pointer-events: auto;
}

.monthes li.active,
.years li.active {
    color: var(--gray-light);
}

.monthes li.current,
.years li.current {
    color: var(--blue);
}

@media screen and (min-width: 769px) {
    .monthes li:hover,
    .years li:hover {
        color: var(--blue);
    }
}

.monthes {
    --this-fz: 18px;
    font-size: var(--this-fz);
    line-height: 1em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: calc(((var(--this-fz) + 30px) * 6) + 40px);
    position: relative;
    padding-top: 40px;
}

@media screen and (min-width: 769px) {
    .monthes {
        margin-bottom: 47px;
    }
}

.monthes:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='24' viewBox='0 0 60 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 15C30 15 30 2 1.15576e-06 2' stroke='%230085FF' stroke-width='3'/%3E%3Cpath d='M60 22C30 22 30 9 -6.32381e-07 9' stroke='%230085FF' stroke-width='3'/%3E%3C/svg%3E%0A");
    width: 52px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.monthes li {
    margin-bottom: 24px;
    width: 50%;
}

@media screen and (min-width: 1720px) {
    .monthes {
        max-height: calc(((var(--this-fz) + 30px) * 6) + 40px);
        --this-fz: 24px;
    }
    .monthes li {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 768px) {
    .monthes {
        /*ограничение по рядам*/
        max-height: calc(((var(--this-fz) + 30px) * 3));
        padding-top: 0;
        padding-left: 83px;
    }
    .monthes li {
        width: auto;
    }
}

@media screen and (max-width: 575px) {
    .monthes {
        display: none;
    }
}

.years {
    display: flex;
    width: 100%;
}

.years li:not(:last-child) {
    margin-right: 20px;
}

@media screen and (min-width: 769px) {
    .years {
        margin-bottom: 47px;
    }
}

@media screen and (max-width: 768px) {
    .years {
        width: max-content;
        margin-bottom: 30px;
    }
    .years li:not(:last-child) {
        margin-right: 20px;
    }
}

@media screen and (max-width: 575px) {
    .years {
        display: none;
    }
}

.current-month {
    text-transform: uppercase;
    max-width: 8ch;
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    color: var(--blue);
}

.build-progress-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 45px auto;
}

@media screen and (max-width: 768px) {
    .build-progress-wrapper {
        margin: 30px auto 60px auto;
    }
}

.slider-wrapper {
    position: relative;
    width: calc(66.66667% - 20px);
    margin-right: calc(3.33333% + 10px);
    margin-right: 5px;
    align-self: flex-start;
    margin-left: auto;
    padding: 0 60px;
}

.slider-wrapper .arrows {
    position: absolute;
    top: calc(50% - 38px);
    transform: translateY(-25%);
    left: 0;
    width: 100%;
}

.slider-wrapper .arrows .scene-nav {
    border-left: none;
}

.slider-wrapper .slider-counter {
    margin: 20px auto 0px auto;
}

.slider-wrapper .slider {
    position: relative;
}

.slider-wrapper .slider:after {
    content: attr(data-error_mes);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.5vw;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
    transition: .5s;
    transform-origin: top;
    transform: scaleY(0);
}

@media screen and (max-width: 768px) {
    .slider-wrapper {
        width: 100%;
    }
    .slider-wrapper .slider img {
        height: 40vh;
        object-fit: contain;
    }
}

@media screen and (max-width: 575px) {
    .slider-wrapper {
        padding: 0 30px;
        margin-top: 42px;
    }
    .slider-wrapper .arrow {
        top: calc(50% - 26px);
    }
    .slider-wrapper .arrows .arrow-next,
    .slider-wrapper .arrows .arrow-prev {
        width: 30px;
        height: 30px;
    }
}

.navigation-wrapper {
    width: calc(20.83333% - 20px);
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    .navigation-wrapper {
        width: 100%;
    }
}

.current-month-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: max-content;
}

.current-month-wrapper .blue-logo {
    margin-right: 20px;
}

@media screen and (max-width: 768px) {
    .current-month-wrapper {
        margin: 35px auto;
    }
}

@media screen and (max-width: 575px) {
    .current-month-wrapper {
        display: none;
    }
}

.mobile-monthes {
    display: flex;
    justify-content: space-between;
}

.mobile-monthes .mobile-year {
    width: calc(41.66667% - 20px);
}

.mobile-monthes .mobile-month {
    width: calc(58.33333% - 20px);
}

@media screen and (min-width: 576px) {
    .mobile-monthes {
        display: none;
    }
}

#documents {
    --breadcrumbs-height: 73px;
}

#documents .page__content {
    margin-top: var(--header-height);
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
    background: url(../images/documents/doc-bg.jpg) center no-repeat;
}

#documents .breadcrumbs-block {
    margin-top: 23px;
    margin-bottom: 36px;
}

@media screen and (min-width: 1720px) {
    #documents {
        --breadcrumbs-height: 94px;
        margin-bottom: 36px;
    }
}

@media screen and (max-width: 768px) {
    #documents .breadcrumbs-block {
        margin-top: 0;
        padding-top: 20px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 575px) {
    #documents .breadcrumbs-block {
        position: relative;
        z-index: 1;
        margin-bottom: 20px;
    }
}

.documents-page-wrapper {
    position: relative;
    padding-bottom: 103px;
}

.documents-page-wrapper .scene-nav {
    border-left: none;
}

.documents-page-wrapper .arrows.blue .arrow-prev,
.documents-page-wrapper .arrows.blue .arrow-next {
    border-left-color: transparent;
}

@media screen and (min-width: 769px) {
    .documents-page-wrapper .slider-counter {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .documents-page-wrapper {
        padding-bottom: 55px;
    }
    .documents-page-wrapper .slider-counter {
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }
}

@media screen and (max-width: 575px) {
    .documents-page-wrapper {
        padding-bottom: 35px;
    }
}

.docs-slider {
    background-color: var(--white);
    position: relative;
    margin: 0 60px;
    padding: calc(var(--side-padding) + 93px) calc(var(--side-padding) + 56px);
    display: flex;
    flex-wrap: wrap;
}

.docs-slider .wave-top div[class*='line'] {
    background-color: rgba(114, 133, 150, 0.2);
}

.docs-slider .arrows {
    position: absolute;
    width: calc(100% + 120px);
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
}

.docs-slider .wave-logo path {
    stroke: var(--blue);
}

.docs-slider .wave-top svg:not(.wave-logo) path {
    stroke: rgba(114, 133, 150, 0.5);
}

@media screen and (max-width: 1100px) {
    .docs-slider {
        padding: calc(var(--side-padding) + 45px) calc(var(--side-padding) + 28px);
    }
}

@media screen and (max-width: 575px) {
    .docs-slider {
        margin: 0 30px;
        padding: calc(var(--side-padding) + 20px) calc(var(--side-padding) + 10px);
    }
    .docs-slider .arrows {
        position: absolute;
        width: calc(100% + 80px);
        left: -40px;
        top: 50%;
        transform: translateY(-50%);
    }
}

.doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: Max(293px, 25%);
    position: relative;
    padding-bottom: 1.6em;
}

.doc.slick-slide {
    display: flex;
}

.doc .icon--double-blue-wave {
    margin: 20px auto;
}

.doc .icon--doc-icon {
    width: 90px;
    height: 106px;
    position: relative;
}

.doc:after {
    content: attr(data-hover);
    position: absolute;
    transition: .5s;
    color: var(--blue);
    bottom: 0;
    left: 50%;
    transform-origin: top;
    opacity: 0;
    transform: translate(-50%, -100%) scaleY(1);
}

.doc .doc-name {
    padding-left: Min(5%, 50px);
    padding-right: Min(5%, 50px);
}

@media screen and (min-width: 1720px) {
    .doc .icon--double-blue-wave {
        margin: 30px auto;
    }
    .doc .icon--doc-icon {
        width: 136px;
        height: 161px;
    }
}

@media screen and (min-width: 769px) {
    .doc:hover:after {
        opacity: 1;
        transform: translate(-50%, 0%) scaleY(1);
    }
}

@media screen and (max-width: 575px) {
    .doc {
        width: 100%;
    }
    .doc .icon--double-blue-wave {
        display: none;
    }
    .doc .doc-name {
        margin-top: 10px;
        padding-left: 0;
        padding-right: 0;
    }
}

#choose-flat {
    --breadcrumbs-height: 73px;
}

#choose-flat .page__content {
    margin-top: var(--header-height);
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
}

#choose-flat .breadcrumbs-block {
    margin-top: 23px;
    margin-bottom: 36px;
}

@media screen and (min-width: 1720px) {
    #choose-flat {
        --breadcrumbs-height: 94px;
        margin-bottom: 36px;
    }
}

@media screen and (max-width: 768px) {
    #choose-flat .breadcrumbs-block {
        margin-top: 0;
        padding-top: 20px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 575px) {
    #choose-flat .breadcrumbs-block {
        position: relative;
        z-index: 1;
        margin-bottom: 20px;
    }
}

#choose-flat .tabs {
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}

#choose-flat .tabs>.tab {
    width: calc(20% - 20px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    /* max-inline-size: 70%; */
    display: inline-block;
}

@media screen and (max-width: 575px) {
    #choose-flat .tabs {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #choose-flat .tabs>.tab {
        width: calc(50% - 4px);
        margin-bottom: 8px;
    }
    #choose-flat .tabs>.tab:last-child {
        width: 100%;
        margin-bottom: 0;
    }
}

#choose-flat .build-number-title {
    text-align: center;
}

@media screen and (min-width: 769px) and (max-width: 1240px) {
    #choose-flat .breadcrumbs-block .title {
        position: static;
        transform: none;
        width: 100%;
        text-align: center;
    }
}

.choose-flat-tab {
    background: #FFFFFF;
    border: 1px solid #F7F5FB;
    transition: .5s;
    align-items: center;
    justify-content: center;
    height: 36px;
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    padding: 7px 15px;
    color: var(--blue);
}

.choose-flat-tab.tab,
.choose-flat-tab.tab.active {
    display: flex;
}

.choose-flat-tab.active {
    background: var(--blue);
    color: var(--white);
}

@media screen and (min-width: 1720px) {
    .choose-flat-tab {
        height: 50px;
        font-size: 24px;
        line-height: 36px;
    }
}

@media screen and (min-width: 769px) {
    .choose-flat-tab:hover {
        background-color: var(--gray-light);
        color: var(--white);
    }
}

@media screen and (max-width: 768px) {
    .choose-flat-tab {
        height: 50px;
        text-align: center;
        font-size: 16px;
        line-height: 18px;
    }
}

@media screen and (max-width: 575px) {
    .choose-flat-tab {
        height: calc(1.4em + 14px);
    }
}

.card {
    border: 1px solid #F7F5FB;
    transition: .5s;
    padding: 30px;
    padding-top: 20px;
}

.card .flat-img {
    font-size: 18px;
    line-height: 18px;
    mix-blend-mode: darken;
    margin-bottom: 18px;
    height: 220px;
    object-fit: contain;
}

.card .flat-name {
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    margin-bottom: 18px;
    font-weight: 500;
    color: var(--gray);
}

.card .link {
    margin-top: 20px;
}

.card .card-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 1.6em;
    color: var(--gray-light);
}

.card .card-row span:first-child {
    width: Min(75%, 15ch);
}

.card .card-row span:last-child {
    text-align: left;
    display: inline-block;
    margin-right: auto;
    white-space: nowrap;
}

@media screen and (min-width: 1720px) {
    .card .card-row {
        font-size: 18px;
    }
    .card .flat-name {
        font-size: 24px;
        line-height: 36px;
    }
}

@media screen and (max-width: 1200px) {
    .card {
        padding: 15px;
    }
}

@media screen and (min-width: 769px) {
    .card:hover {
        background: #F7F5FB;
    }
}

@media screen and (max-width: 768px) {
    .card {
        padding: 20px;
        padding-top: 15px;
        font-size: 14px;
    }
    .card .link {
        font-size: 16px;
    }
}

@media screen and (max-width: 575px) {
    .card .link {
        font-size: 14px;
        line-height: 16px;
    }
}

.flat-container {
    display: grid;
    grid-template-rows: auto;
    margin: var(--this-gap) auto;
    --this-gap: 20px;
    gap: var(--this-gap);
    justify-content: space-between;
    grid-template-columns: repeat(4, calc(25% - var( --this-gap)));
    transition: .5s;
}

.flat-container .title {
    grid-area: 1/1/1/5;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .flat-container {
        grid-template-columns: repeat(3, calc(33% - var( --this-gap)));
    }
}

@media screen and (max-width: 650px) {
    .flat-container {
        --this-gap: 10px;
        grid-template-columns: repeat(2, calc(50% - var( --this-gap)));
    }
}

@media screen and (max-width: 575px) {
    .flat-container {
        grid-template-columns: repeat(1, 100%);
    }
}

#flat {
    --breadcrumbs-height: 73px;
}

#flat .page__content {
    margin-top: var(--header-height);
    padding-left: var(--side-fields);
    padding-right: var(--side-fields);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#flat .breadcrumbs-block {
    margin-top: 23px;
    margin-bottom: 36px;
    width: 100%;
}

@media screen and (min-width: 1720px) {
    #flat {
        --breadcrumbs-height: 94px;
    }
}

@media screen and (max-width: 768px) {
    #flat .breadcrumbs-block {
        margin-top: 0;
        padding-top: 20px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 950px) {
    #flat .breadcrumbs-block .title {
        transform: none;
        position: static;
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 575px) {
    #flat .breadcrumbs-block {
        position: relative;
        z-index: 1;
        margin-bottom: 20px;
    }
    #flat .breadcrumbs-block__item {
        font-size: 12px;
        line-height: 12px;
    }
}

#flat .flat-img {
    width: calc(41.66667% - 20px);
    padding-left: calc(4.16667% + 10px);
    padding-right: calc(4.16667% + 10px);
    object-fit: contain;
    object-position: top;
    cursor: zoom-in;
}

@media screen and (max-width: 1200px) {
    #flat .flat-img {
        padding-left: calc(0% + 10px);
        padding-right: calc(0% + 10px);
    }
}

@media screen and (max-width: 950px) {
    #flat .flat-img {
        order: 1;
        width: calc(58.33333% - 20px);
    }
}

@media screen and (max-width: 575px) {
    #flat .flat-img {
        width: 100%;
    }
}

#flat .flat-img {
    width: calc(41.66667% - 20px);
    padding-left: calc(6.25% + 10px);
    padding-right: calc(6.25% + 10px);
    object-fit: contain;
    object-position: top;
    cursor: zoom-in;
    max-height: 100vh;
}

@media screen and (max-width: 1200px) {
    #flat .flat-img {
        padding-left: calc(0% + 10px);
        padding-right: calc(0% + 10px);
    }
}

@media screen and (max-width: 950px) {
    #flat .flat-img {
        order: 1;
        width: calc(58.33333% - 20px);
    }
}

@media screen and (max-width: 575px) {
    #flat .flat-img {
        width: 100%;
    }
}

.flat-page-left-block {
    background: url(../images/flat/left-bock-bg.jpg) right no-repeat;
    background-size: cover;
    margin-left: calc(var(--side-fields) - (var(--side-fields) * 2));
    padding: 73px calc(var(--side-fields) + 4%) 73px var(--side-fields);
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 0;
    align-content: flex-start;
    width: calc(29.16667% - 20px);
}

.flat-page-left-block .contacts__mini-group-title {
    color: var(--gray);
}

.flat-page-left-block .contacts__mini-group {
    padding-left: calc(40px + 20px);
}

.flat-page-left-block .decor-icon {
    left: 0em;
}

@media screen and (min-width: 1720px) {
    .flat-page-left-block {
        padding: 73px calc(var(--side-fields) + 6%) 73px var(--side-fields);
    }
    .flat-page-left-block .contacts__mini-group {
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 1200px) {
    .flat-page-left-block {
        width: calc(33.33333% - 20px);
        padding: 73px var(--side-fields) 73px var(--side-fields);
    }
}

@media screen and (max-width: 950px) {
    .flat-page-left-block {
        width: calc(100% + var(--side-fields) * 2);
        margin-right: calc(var(--side-fields) - (var(--side-fields) * 2));
        order: 3;
        padding-top: 35px;
        padding-bottom: 35px;
        justify-content: space-between;
    }
    .flat-page-left-block .contacts__mini-group {
        width: 33%;
    }
    .flat-page-left-block .decor-icon {
        width: 26px;
        height: 26px;
    }
    .flat-page-left-block .contacts__mini-group {
        padding-left: calc(26px + 20px);
    }
}

@media screen and (max-width: 575px) {
    .flat-page-left-block .contacts__mini-group {
        width: 100%;
    }
}

.flat-page-right-block {
    width: calc(29.16667% - 20px);
    padding-bottom: 70px;
}

.flat-page-right-block .link {
    padding-left: calc(16.66667% + 10px);
    padding-right: calc(33.33333% + 10px);
    margin-top: 40px;
    line-height: 1.25em;
}

@media screen and (min-width: 1720px) {
    .flat-page-right-block {
        width: calc(25% - 20px);
    }
}

@media screen and (max-width: 1200px) {
    .flat-page-right-block {
        width: calc(29.16667% - 20px);
    }
    .flat-page-right-block .link {
        padding-left: calc(8.33333% + 10px);
    }
}

@media screen and (max-width: 950px) {
    .flat-page-right-block {
        order: 2;
        width: calc(41.66667% - 20px);
    }
    .flat-page-right-block .link {
        margin-top: 25px;
    }
}

@media screen and (max-width: 575px) {
    .flat-page-right-block {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 0;
    }
    .flat-page-right-block .link {
        padding-right: calc(8.33333% + 10px);
        font-size: 14px;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
}

.flat-info-wrapper {
    position: relative;
    /* Отспут от рамки + высота рамки*/
    padding-top: calc(40px + 20px);
    padding-left: calc(16.66667% + 10px);
    padding-right: calc(16.66667% + 10px);
    padding-bottom: 70px;
}

@media screen and (min-width: 1720px) {
    .flat-info-wrapper {
        padding-top: calc(40px + 30px);
    }
}

@media screen and (max-width: 1200px) {
    .flat-info-wrapper {
        padding-left: calc(8.33333% + 10px);
        padding-right: calc(8.33333% + 10px);
        padding-right: calc(4.16667% + 10px);
    }
}

@media screen and (max-width: 575px) {
    .flat-info-wrapper {
        padding-bottom: 35px;
    }
}

.flat-block-wave {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
}

.flat-block-wave .river-small-logo {
    fill: var(--blue);
    stroke: var(--blue);
    position: absolute;
    left: 0;
    top: 0;
    width: 75px;
    height: 14px;
}

.flat-block-wave__line {
    stroke: var(--blue);
    stroke-width: 2;
    width: 229px;
    height: 44px;
}

.flat-block-wave div[class*=-line] {
    position: absolute;
    background-color: var(--blue);
}

.flat-block-wave .left-line {
    top: 44px;
    left: 0;
    height: calc(100% - 44px);
    width: 2px;
}

.flat-block-wave .top-line {
    top: 0;
    left: 228px;
    width: calc(100% - 228px);
    height: 2px;
}

.flat-block-wave .right-line {
    width: 2px;
    right: 0;
    top: 0;
    height: 100%;
}

.flat-block-wave .bottom-line {
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 0;
}

@media screen and (max-width: 575px) {
    .flat-block-wave .river-small-logo {
        width: 52px;
        height: 9px;
    }
    .flat-block-wave__line {
        stroke-width: 3;
        width: 142px;
        height: 28px;
    }
    .flat-block-wave .left-line {
        top: 28px;
        left: 0;
        height: calc(100% - 28px);
        width: 2px;
    }
    .flat-block-wave .top-line {
        top: 0;
        left: 142px;
        width: calc(100% - 142px);
        height: 2px;
    }
}

.main-flat-info {
    font-weight: bold;
    color: var(--gray);
}

.flat-info-list {
    font-size: 14px;
    line-height: 1.6em;
}

.flat-info-list li {
    display: grid;
    line-height: 1.6em;
    grid-template-columns: 65% 30%;
}

.flat-info-list li span:first-child {
    white-space: nowrap;
}

@media screen and (min-width: 1720px) {
    .flat-info-list {
        font-size: 18px;
        line-height: 32px;
    }
}

.mfp-figure figure {
    background-color: var(--white);
}