@font-face {
    font-family: 'Bowler';
    src: url('../fonts/Bowler/src/BOWLER-Regular.woff2') format('woff2'),
    url('../fonts/Bowler/src/BOWLER-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* CodeNext */
@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_black-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_black-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_black-webfont.svg#code_nextblack') format('svg');
    font-weight: 900;
    font-style: normal;
}
/*@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_black_italic-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_black_italic-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_black_italic-webfont.svg#code_nextblack_italic') format('svg');
    font-weight: 900;
    font-style: italic;
}*/

@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_extrabold-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_extrabold-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_extrabold-webfont.svg#code_nextextrabold') format('svg');
    font-weight: 800;
    font-style: normal;
}
/*@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_extrabold_italic-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_extrabold_italic-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_extrabold_italic-webfont.svg#code_nextextrabold_italic') format('svg');
    font-weight: 800;
    font-style: italic;
}*/

@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_bold-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_bold-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_bold-webfont.svg#code_nextbold') format('svg');
    font-weight: 700;
    font-style: normal;
}
/*@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_bold_italic-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_bold_italic-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_bold_italic-webfont.svg#code_nextbold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
}*/

@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_semibold-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_semibold-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_semibold-webfont.svg#code_nextsemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}
/*@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_semibold_italic-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_semibold_italic-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_semibold_italic-webfont.svg#code_nextsemibold_italic') format('svg');
    font-weight: 600;
    font-style: italic;
}*/

@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_regular-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_regular-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_regular-webfont.svg#code_nextregular') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_regular_italic-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_regular_italic-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_regular_italic-webfont.svg#code_nextregular_italic') format('svg');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_light-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_light-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_light-webfont.svg#code_nextlight') format('svg');
    font-weight: 300;
    font-style: normal;
}
/*@font-face {
    font-family: 'CodeNext';
    src: url('../fonts/CodeNext/src/code-next_light_italic-webfont.woff2') format('woff2'),
    url('../fonts/CodeNext/src/code-next_light_italic-webfont.woff') format('woff'),
    url('../fonts/CodeNext/src/code-next_light_italic-webfont.svg#code_nextlight_italic') format('svg');
    font-weight: 300;
    font-style: italic;
}*/
/* CodeNext - END */

/* bootstrap media query steps */
@media only screen and (max-width: 1199px) /* md */ {}
@media only screen and (max-width: 991px) /* sm */ {}
@media only screen and (max-width: 767px) /*xs */ {}

:root{
    --title-font-family: "Bowler", sans-serif;
    --base-font-family: "CodeNext", sans-serif;
    --base-dark: #141414;
    --base-light: #f6f6f6;

    --color-yellow: #FFED00;
    --color-pink: #FF0D8F;
    --color-lightgreen: #1aff0d;
    --color-sky: #00BCF7;
    --color-blue: #170E3D;
    --color-purple: #974EFF;

    --purple-gradient: linear-gradient(135deg, var(--color-purple) 20%, var(--color-blue));
    --purple-gradient2: linear-gradient(135deg, var(--color-blue), var(--color-purple) 80%);

    --color-red: #FF000A;
    --color-orange: #FF5D17;

    --base-padding: 30px;
    --minus-base-padding: calc(-1 * var(--base-padding));

    --base-border-radius: var(--base-padding);

    --base-margin: min(100px, 8vw);

    --btn-bg: var(--base-dark);
    --btn-text: var(--base-light);

    --link-color: var(--color-blue);

    --form-bg: var(--base-light);
    --form-color: var(--base-dark);
    --success-color: #18a318;
    --error-color: #f72d2d;
}
@media only screen and (max-width: 767px) /*xs */ {
    :root{
        --base-padding: 15px;
        --base-border-radius: 30px;
        --base-margin: 50px;
    }
}

body{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    font-family: var(--base-font-family);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    background: var(--base-dark);
    color: var(--base-light);
    min-height: 100%;
}
body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-track { background: #101010; }
body::-webkit-scrollbar-thumb { background-color: #333; border-radius: 3px; border: none; }

.compensate-for-scrollbar{
    margin-right: var(--fancybox-scrollbar-compensate, 0px); /* var from fancybox */
}
body.menu-opened{
    overflow: hidden;
}

@media only screen and (max-width: 767px) { .hidden-xs{ display: none!important; } }
@media only screen and (min-width: 768px) { .visible-xs{ display: none!important; } }

footer{
    margin-bottom: 0;
    margin-top: auto;
    padding-top: var(--base-margin);
}

.no-margin-top{
    margin-top: 0;
}
.container-big{
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--base-padding);
    padding-right: var(--base-padding);
}
.container{
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--base-padding);
    padding-right: var(--base-padding);
}
.center-container{
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--base-padding);
    padding-right: var(--base-padding);
}

.base-margin-top     { margin-top:      var(--base-margin); }
.base-margin-bottom  { margin-bottom:   var(--base-margin); }
.base-padding-top    { padding-top:     var(--base-margin); }
.base-padding-bottom { padding-bottom:  var(--base-margin); }

/* for scroll with fixed header */
*[id]{ scroll-margin-top: var(--header-height, 100px); }
@media only screen and (max-width: 767px) /*xs */ {
    /**[id]{ scroll-margin-top: 70px; }*/
}

.fancybox__slide.has-iframe .fancybox__content{
    padding: 0;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--title-font-family);
    margin: 1.5em 0 0.5em;
    font-weight: 500;
}
h1, .h1, .fontsize-xxl { font-size: 2rem;     /* 32px */ line-height: 110%; }
h2, .h2, .fontsize-xl { font-size: 1.5rem;    /* 24px */ line-height: 120%; }
h3, .h3, .fontsize-l { font-size: 1.1875rem;  /* 19px */ line-height: 140%; }
h4, .h4, .fontsize-m { font-size: 1rem;       /* 16px */ line-height: 150%; }
h5, .h5, .fontsize-s { font-size: 0.875rem;   /* 14px */ line-height: 150%; }
h6, .h6, .fontsize-xs { font-size: 0.75rem;   /* 12px */ line-height: 150%; }
@media only screen and (max-width: 1100px) {
    h1, .h1, .fontsize-xxl { font-size: 1.175rem; /* 28px */ }
    h2, .h2, .fontsize-xl { font-size: 1.375rem;  /* 22px */ }
    h3, .h3, .fontsize-l { font-size: 1.125rem;   /* 18px */ }
    h4, .h4, .fontsize-m { font-size: 1rem;       /* 16px */ }
    h5, .h5, .fontsize-s { font-size: 0.875rem;   /* 14px */ }
    h6, .h6, .fontsize-xs { font-size: 0.75rem;   /* 12px */ }
}
@media only screen and (max-width: 767px) {
    h1, .h1, .fontsize-xxl { font-size: 1.5rem;   /* 24px */ }
    h2, .h2, .fontsize-xl { font-size: 1.25rem;   /* 20px */ }
    h3, .h3, .fontsize-l { font-size: 1.125rem;   /* 18px */ }
    h4, .h4, .fontsize-m { font-size: 1rem;       /* 16px */ }
    h5, .h5, .fontsize-s { font-size: 0.875rem;   /* 14px */ }
    h6, .h6, .fontsize-xs { font-size: 0.75rem;   /* 12px */ }
}

p{
    margin: 0 0 1em;
}

.phone, .email{
    white-space: nowrap;
    display: inline-block;
}

/* links */
a{
    color: var(--link-color);
    transition: all 200ms ease;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
a.dotted-link, span.dotted-link{
    border-bottom: 1px dotted;
    text-decoration: none!important;
    white-space: nowrap;
    display: inline-block;
    font-style: italic;
}
a.dotted-link:hover{
    border-bottom: 1px solid;
}
/* links - END */


/* fancybox */
a.fancybox.zoom{
    display: block;
    position: relative;
}
a.fancybox.zoom:before, a.fancybox.zoom:after{
    content: "";
    position: absolute;
    display: block;
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: 1;
}
a.fancybox.zoom:before{
    inset: 0;
    background: var(--base-dark);
}
a.fancybox.zoom:after{
    content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23fff' d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    width: 3rem;
}
a.fancybox.zoom:hover:before{
    opacity: 0.25;
}
a.fancybox.zoom:hover:after{
    opacity: 0.5;
}
/* fancybox - END */


/* svg */
svg:not(svg.origin, .fancybox__container svg){
    fill: currentColor;
}
svg.svg--inline{
    display: inline-block;
    vertical-align: middle;
    height: 1.2em;
    width: auto;
}
/* svg - END */



/* btn */
.btn{
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    padding: .7em 1em .5em 1em;
    line-height: 100%;
    background: var(--btn-bg);
    color: var(--btn-text);
    border-radius: .8em;
    text-decoration: none!important;
    position: relative;
    border: none!important;
    outline: none!important;
    font-weight: 900;
    text-transform: uppercase;
}
.btn:before{
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity 200ms ease;
}
.btn:hover:before{ opacity: 0.1; }
.btn:active:before{ opacity: 0.2; }
.btn__icon{
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    margin-top: -0.15em;
    width: auto;
    fill: currentColor;
    transform: translateX(0.2em);
    transition: transform 200ms ease;
}
.btn:hover .btn__icon, .btn:active .btn__icon{
    transform: translateX(0.4em);
}
.btn--white{
    --btn-bg: #fff;
    --btn-text: var(--base-dark);
}
/* btn - END */


/* forms defs */
input[type="text"],
input[type="datetime-local"],
input[type="tel"],
input[type="email"],
textarea{
    display: inline-block;
    vertical-align: middle;
    padding: 1em;
    line-height: 100%;
    background: #fff;
    color: #666;
    border-radius: 0.7em;
    position: relative;
    border: none!important;
    outline: none;
    transition: all 200ms ease;
}
input:focus{
    color: var(--base-dark);
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
}
input[type="text"][valid="false"],
input[type="datetime-local"][valid="false"],
input[type="tel"][valid="false"],
input[type="email"][valid="false"],
textarea[valid="false"]{
    outline: 1px solid var(--error-color);
}
input[type="text"][valid="true"],
input[type="datetime-local"][valid="true"],
input[type="tel"][valid="true"],
input[type="email"][valid="true"],
textarea[valid="true"]{
    outline: 1px solid var(--success-color);
}
.form-field{
    position: relative;
    margin-bottom: 0;
}
.form-field[show-message][message]:before{
    content: attr(message);
    position: absolute;
    z-index: 10;
    left: 1em;
    bottom: 100%;
    font-size: max(9px, 0.8em);
    font-weight: 500;
    color: var(--error-color);
}
.form-field-icon input + svg{
    position: absolute;
    z-index: 10;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
    height: 1.5em;
    width: auto;
    fill: var(--color-purple);
    transition: opacity 200ms ease;
}
.form-field-icon input:focus + svg{
    opacity: 1;
}
.form-field-icon input{
    padding-left: 3em;
}
.form-field input[type="text"],
.form-field input[type="datetime-local"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field textarea{
    width: 100%;
}
input.custom-checkbox{
    display: none;
}
input.custom-checkbox + label{
    display: block;
    position: relative;
    padding: 0.2em 0 0.2em 1.7em;
    line-height: 100%;
    opacity: 0.7;
}
input.custom-checkbox + label:before{
    content: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4em;
    height: 1.4em;
}
input.custom-checkbox:checked + label{
    opacity: 1;
}
input.custom-checkbox:checked + label:before{
    content: url("data:image/svg+xml,%3Csvg fill='%23FFED00' xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-280q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
}
/* forms defs - END */


/* popup form */
.popup-form-wrap{
    width: min(700px, 95vw);
    padding: 0;
    --border-radius: 1rem;
    background: var(--purple-gradient);
    color: var(--base-light);
    --link-color: #fff;
    --btn-bg: var(--color-yellow);
    --btn-text: #332f02;

    --loader-bg: rgba(0,0,0,0.6);
    --loader-color: #fff;
}
.popup-form__section--head{
    padding-bottom: var(--base-padding);
}
.popup-form__section--form .form--min{
    padding: 0;
}
.popup-form__title{
    background: var(--color-yellow);
    color: var(--color-purple);
    font-size: min(6vw, 3rem);
    padding: 0.3em 0.2em;
    text-align: center;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    font-family: var(--title-font-family);
    transform: rotate(-2deg) translateY(-0.3em);
}
@media only screen and (orientation: landscape){
    .popup-form__title{
        transform: rotate(0deg);
    }
}
.popup-form__title + .popup-form__desc{
    margin-top: -0.5em;
}
.form__desc{
	padding: 0 1em;
}
.popup-form__phone-wrap{
    font-size: min(8vw, 3rem);
    text-align: center;
    font-weight: 700;
    padding-bottom: 0.5em;
}
.popup-form__phone-wrap .phone svg{
    display: none!important;
}
.social-links{
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: min(3.5vw, 1.5rem);
}
.social-links__item{
    display: block;
    flex: 0 0 auto;
    text-align: center;
    font-family: var(--title-font-family);
    font-weight: 400;
}
.popup-form__social-wrap{
    margin-bottom: 1em;
    --link-color: var(--color-pink);
}
.popup-form__email{
    display: none!important;
    margin: 1em 0;
    text-align: center;
    font-size: 0.875em;
    --link-color: currentColor;
}
.popup-form__section--form{
    --form-bg: #fff;
    --form-color: var(--base-light);
    position: relative;
    background: none;
    color: var(--form-color);
}
.popup-form__section--form .form__title{
    font-size: min(5vw, 2rem);
    text-align: center;
    text-transform: uppercase;
    background: var(--color-lightgreen);
    color: var(--color-blue);
    font-family: var(--title-font-family);
    transform: rotate(2deg);
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    padding: 0.3em 0.1em;
}
@media only screen and (orientation: landscape){
    .popup-form__section--form .form__title{
        transform: rotate(0deg);
    }
}
.popup-form__section--form .form__desc{
    font-size: min(3vw, 1rem);
    text-align: center;
    margin-bottom: .5em;
    font-weight: 500;
}
.popup-form__section--form .form__main{
    padding: 0 var(--base-padding) var(--base-padding);
}
.popup-form__section--form .form__text-fields{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
@media only screen and (orientation: landscape){
    .popup-form__section--form .form__text-fields{
        flex-direction: row;
    }
}
.popup-form__section--form .form__text-fields .form-field{
    flex: 1 1 30%;
}
.popup-form__section--form .form__text-fields .form-field + .form-field{
    margin-top: 0.5rem;
}
@media only screen and (orientation: landscape){
    .popup-form__section--form .form__text-fields .form-field + .form-field{
        margin: 0 0 0 1rem;
    }
}
.popup-form__section--form .form-connect-types{
    font-size: 0.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.popup-form__section--form .form-submit{
    font-size: 1.1875rem;
    text-align: center;
}
.popup-form-wrap .loader-wrapper .form--min-wrapper{
    transition: transform 200ms ease;
}
.popup-form-wrap .loader-wrapper[loading="loading"] .form--min-wrapper{
    transform: scale(0.98);
}
.form-response{
    display: none;
    --response-color: var(--form-bg);
    position: absolute;
    inset: 0;
    background: var(--response-color);
    color: #fff;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.form-response[active]{ display: flex; }
.form-response[status="success"]{ --response-color: var(--success-color); }
.form-response[status="error"]{ --response-color: var(--error-color); }
.form-response__closer{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 1em;
    color: inherit;
    opacity: 0.5;
}
.form-response__closer:hover{
    opacity: 1;
}
.form-response__closer svg{
    width: 2em;
    height: auto;
    fill: currentColor;
}
.form-response[status="success"] .form-response__closer{
    display: none!important;
}
.form-response__content{
     display: none;
     align-items: center;
     justify-content: center;
     padding: 0 var(--base-padding);
 }
.form-response[status="success"] .form-response__content--success{ display: flex; }
.form-response[status="error"] .form-response__content--error{ display: flex; }
.form-response__icon svg{
    display: block;
    width: 5em;
    height: auto;
    margin-right: 1em;
}
.form-response__title{
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    margin-bottom: 0.2em;
}
.form-response__text{

}
/* popup form - END */


/* menu-opener icon */
.menu-opener-icon,
.menu-opener-icon:before, .menu-opener-icon:after{
    /*transition: transform 400ms cubic-bezier(.37,-0.84,.55,1.83);*/
    /*transition: transform 400ms cubic-bezier(0,.43,.37,1);*/
    transition-duration: 200ms, 200ms, 400ms;
    transition-timing-function: cubic-bezier(0,.43,.37,1), cubic-bezier(0,.43,.37,1);
    transition-delay: 0ms, 210ms, 0ms;
}
.menu-opener-icon{
    display: block;
    width: 1.2em;
    height: 0.8em;
    position: relative;
    vertical-align: middle;
}
.menu-opener-icon:before, .menu-opener-icon:after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
.menu-opener-icon:before{
    transition-property: transform, top, opacity;
    top: calc(50% - 5px);
    transform: rotate(0deg);
}
.menu-opener-icon:after{
    transition-property: transform, bottom, opacity;
    bottom: calc(50% - 5px);
    transform: rotate(0deg);
}
body.menu-opened .menu-opener-icon{
    /*transform: translateX(20%);*/
}
body.menu-opened .menu-opener-icon:before{
    opacity: 0.6;
    top: calc(50% - 1px);
    transform: rotate(45deg);
    transition-delay: 200ms, 0ms, 0ms;
}
body.menu-opened .menu-opener-icon:after{
    opacity: 0.6;
    bottom: calc(50% - 1px);
    transform: rotate(-45deg);
    transition-delay: 200ms, 0ms, 0ms;
}
/* menu-opener icon - END */


/* runline */
.runline-wrap{
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.runline{
    position: relative;
    animation: runline var(--speed) infinite linear;
    width: auto;
    display: inline-block;
    top: 0;
    left: 0;
}
.runline:after{
    content: var(--text);
    position: absolute;
    left: 100%;
    top: 0;
}
@keyframes runline {
    from { transform: translateX(0%); }
    to { transform: translateX(-100%); }
}
/* runline - END */



/* xs-img-with-text */
/*
<div class="xs-img-with-text" xs-text="Заголовок справа от картинки на мобильных">
    <img data-src="<?= $img_url ?>" width="1000" height="1000" />
</div>
 */
@media only screen and (max-width: 767px) {
    .xs-img-with-text{
        font-size: 1.125rem;
        margin: 0 0 2rem;
        flex-basis: 20vw;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        border: none;
        background: #fff;
        box-shadow: none;
        border-radius: 10vw;
        overflow: hidden;
        max-width: 100%;
        width: 20em;
    }
    .xs-img-with-text img{
        height: 4em!important;
        width: auto;
        margin-right: 1em;
        border-radius: inherit;
    }
    .xs-img-with-text:after{
        content: attr(xs-text);
        display: block;
        font-weight: 500;
        line-height: 130%;
        padding-right: 1em;
    }
}
/* xs-img-with-text - END */


/* block-title */
.block-title{

}
.trans-title{
    transform: scaleY(0.8);
}
.block-title span{
}
.block-title .desc{
}
@media only screen and (max-width: 1100px) {

}
@media only screen and (max-width: 767px) {

}
/* block-title - END */


/* Svg outer border-radius (right-bottom)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<defs>
		<mask id="outer-circle" x="0" y="0" width="100" height="100">
			<rect height="100" width="100" style="fill: white"></rect>
			<circle cx="0" cy="0" r="100" style="fill: black"/>
		</mask>
	</defs>
	<rect height="100" width="100" mask="url(#outer-circle)"></rect>
</svg>
*/
/* Svg outer border-radius - END */



/* scroll-animation */
.scroll-fade-in{
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0,.43,.5,1);
}
.scroll-fade-in:not(.scroll-fade-in[scrolling], [scrolling] .scroll-fade-in){
    transition-delay: 0ms!important;
}
[scroll="0"] .scroll-fade-in{
    transform: translateY(100px) scale(0.9);
    opacity: 0;
}
[scroll="0.5"]  .scroll-fade-in{
    transform: translateY(0) scale(1);
    opacity: 1;
}
[scroll="1"] .scroll-fade-in{
    transform: translateY(-100px) scale(0.9);
    opacity: 0;
}
[scroll="0"].scroll-fade-in{
    transform: translateY(100px) scale(0.9);
    opacity: 0;
}
[scroll="0.5"].scroll-fade-in{
    transform: translateY(0) scale(1);
    opacity: 1;
}
[scroll="1"].scroll-fade-in{
    transform: translateY(-100px) scale(0.9);
    opacity: 0;
}
/* scroll-animation - END */


/* bg-animation */
.bg-animation{
    position: absolute;
    inset: 0;
    z-index: -1;
}
.bg-animation > div{
    position: absolute;
    inset: 0;
    z-index: -1;
    will-change: opacity;
}
.bg-1{
    background: linear-gradient(180deg, #f9dea1 60%, #9bdaff 100%);
}
.bg-2{
    background: linear-gradient(300deg, #f9c3f5 60%, #9bdaff 100%);
    animation: bg-fade-1 6s linear infinite;
}
.bg-3{
    background: linear-gradient(10deg, #bab2fc 60%, #9bdaff 100%);
    animation: bg-fade-2 6s linear infinite;
}
@keyframes bg-fade-1 {
    0% {
        opacity: 1; }
    33% {
        opacity: 1; }
    66% {
        opacity: 0; }
    100% {
        opacity: 0; }
}

@keyframes bg-fade-2 {
    0% {
        opacity: 1; }
    33% {
        opacity: 0; }
    66% {
        opacity: 0; }
    100% {
        opacity: 1; }
}
/* bg-animation - END */


/* v-gallery */
.v-gallery{
    --speed: 25s;
    perspective: 800px;
    max-height: 500px;
}
.v-gallery__cols{
    margin: -20% 0;
    display: flex;
    align-items: flex-start;

    transform-style: preserve-3d;
    transform-origin: center -6%;
    transform: translateZ(0) rotateZ(10deg) rotateY(-15deg) rotateX(14deg);
}
.v-gallery__col{
    width: 12vw;
    animation: v-gallery var(--speed) infinite linear;
    position: relative;
    left: 50px;
    margin-top: 100px;
}
.v-gallery__col:hover{
    z-index: 10;
}
.v-gallery__col + .v-gallery__col{
    margin-left: 1rem;
}
.v-gallery__col:nth-child(1){ animation-duration: calc(var(--speed) * 1); animation-direction: reverse; }
.v-gallery__col:nth-child(2){ animation-duration: calc(var(--speed) * 1.5); }
.v-gallery__col:nth-child(3){ animation-duration: calc(var(--speed) * 0.8); }
.v-gallery__images > div{
    /*padding-top: 5rem;*/
    padding-bottom: 1rem;
    perspective: 800px;
    position: relative;
    z-index: 1;
    transition-property: z-index;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(.5,.1,.5,1.01);
}
.v-gallery__images > div:hover{
    z-index: 10;
}
.v-gallery__images a{
    display: block;
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    border-radius: 1rem;
    box-shadow: 0 0 .5rem rgba(0,0,0,.2);
    overflow: hidden;
    transition: transform 300ms cubic-bezier(.5,.1,.5,1.01);
}
.v-gallery__images a:hover{
    z-index: 2;
    transform: translateZ(200px) ;
}

.v-gallery__images img{
    filter: grayscale(10%);
    display: block;
    width: 100%;
    height: auto;
    transition: filter 300ms cubic-bezier(.5,.1,.5,1.01);
}
.v-gallery__images a:hover img{
    filter: grayscale(0%);
}
.v-gallery__images--repeat{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
}
@keyframes v-gallery {
    from { transform: translateY(0%); }
    to { transform: translateY(-100%); }
}
@media only screen and (max-width: 767px) {
    .v-gallery{
        position: absolute;
        right: -15vw;
        left: -40vw;
    }
    .v-gallery__col + .v-gallery__col{
        margin-left: 0.5rem;
    }
    .v-gallery__col{
        width: auto;
    }
    .v-gallery__images > div{
        padding-bottom: 0.5rem;
    }
}
/* v-gallery - END */