@import url(https://fonts.googleapis.com/css?family=Open + Sans:300, 300i, 400, 400i, 600, 600i, 700, 700i, 800, 800i&subset=cyrillic, cyrillic-ext);
img,
legend {
    border: 0;
}

legend,
td,
th {
    padding: 0;
}

.fxRollX,
.fxRollX .image {
    transform: translateX(100%);
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.62, 0.12, 0.52, 0.94);
}


a:active,
a:hover,
button,
button:focus,
input,
input:focus,
select,
select:focus,
textarea,
textarea:focus {
    outline: 0;
}

.container,
.grid {
    max-width: 1600px;
}


/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-y: scroll;
    font-size: 1rem;
}

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

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
optgroup,
strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 2px 0 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

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

.fxRollX {
    overflow: hidden;
}

.fxRollX.active,
.fxRollX.active .image {
    transform: translateX(0);
}

.fxRollX.navInNext {
    z-index: 10;
    animation-name: rollInXNext;
}

.fxRollX.navInNext .image {
    animation-name: rollInXPrev;
}

.fxRollX.navOutNext {
    z-index: 9;
    animation-name: rollOutXNext;
}

.fxRollX.navOutNext .image {
    animation-name: rollOutXPrev;
}

.fxRollX.navInPrev {
    z-index: 10;
    animation-name: rollInXPrev;
}

.fxRollX.navInPrev .image {
    animation-name: rollInXNext;
}

.fxRollX.navOutPrev {
    z-index: 9;
    animation-name: rollOutXPrev;
}

.fxRollX.navOutPrev .image {
    animation-name: rollOutXNext;
}

.fxRollX.flyNext {
    transform: translateX(100%);
}

.fxRollX.flyNext .image,
.fxRollX.flyPrev {
    transform: translateX(-100%);
}

.fxRollX.flyPrev .image {
    transform: translateX(100%);
}

.fxRollX.flyInNext,
.fxRollX.flyInNext .image {
    transform: translateX(0);
    transition: transform 1.2s cubic-bezier(0.62, 0.12, 0.52, 0.94);
}

.fxRollX.flyOutNext {
    transition: transform 1.2s cubic-bezier(0.62, 0.12, 0.52, 0.94);
    transform: translateX(-100%);
}

.fxRollX.flyOutNext .image {
    transform: translateX(100%);
    transition: transform 1.2s cubic-bezier(0.62, 0.12, 0.52, 0.94);
}

.fxRollX.flyInPrev,
.fxRollX.flyInPrev .image {
    transform: translateX(0);
    transition: transform 1.2s cubic-bezier(0.62, 0.12, 0.52, 0.94);
}

.fxRollX.flyOutPrev {
    transition: transform 1.2s cubic-bezier(0.62, 0.12, 0.52, 0.94);
    transform: translateX(100%);
}

.fxRollX.flyOutPrev .image {
    transform: translateX(-100%);
    transition: transform 1.2s cubic-bezier(0.62, 0.12, 0.52, 0.94);
}

@keyframes rollInXNext {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes rollOutXNext {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes rollInXPrev {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes rollOutXPrev {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.with-animation .s-a .sa-cl1,
.with-animation .s-a .sa-cl1-r,
.with-animation .s-a .sa-cl2,
.with-animation .s-a .sa-cl2-r,
.with-animation .s-a .sa-cl3,
.with-animation .s-a .sa-cl3-r,
.with-animation .s-a .sa-o1,
.with-animation .s-a .sa-o2,
.with-animation .s-a .sa-o3,
.with-animation .s-a .sa-o4 {
    opacity: 0;
    transition: left 1.2s ease, opacity 1.2s ease;
}

.with-animation .s-a .sa-cl1,
.with-animation .s-a .sa-cl2,
.with-animation .s-a .sa-cl3 {
    left: -200px;
}

.with-animation .s-a .sa-cl1-r,
.with-animation .s-a .sa-cl2-r,
.with-animation .s-a .sa-cl3-r {
    left: 200px;
}

.with-animation .s-a .sa-cl2,
.with-animation .s-a .sa-cl2-r,
.with-animation .s-a .sa-o2 {
    transition-delay: 0.4s;
}

.with-animation .s-a .sa-cl3,
.with-animation .s-a .sa-cl3-r,
.with-animation .s-a .sa-o3 {
    transition-delay: 0.8s;
}

.with-animation .s-a .sa-cl4,
.with-animation .s-a .sa-cl4-r,
.with-animation .s-a .sa-o4 {
    transition-delay: 1.2s;
}

.with-animation .s-a .sa-ct1,
.with-animation .s-a .sa-ct2,
.with-animation .s-a .sa-ct3,
.with-animation .s-a .sa-ct4 {
    top: 50px;
    opacity: 0;
    transition: top 1.2s ease, opacity 1.2s ease;
}

.with-animation .s-a .sa-ct2 {
    transition-delay: 0.4s;
}

.with-animation .s-a .sa-ct3 {
    transition-delay: 0.8s;
}

.with-animation .s-a .sa-ct4 {
    transition-delay: 1.2s;
}

.with-animation .s-a.s-a-a .sa-o1,
.with-animation .s-a.s-a-a .sa-o2,
.with-animation .s-a.s-a-a .sa-o3,
.with-animation .s-a.s-a-a .sa-o4 {
    opacity: 1;
}

.with-animation .s-a.s-a-a .sa-cl1,
.with-animation .s-a.s-a-a .sa-cl1-r,
.with-animation .s-a.s-a-a .sa-cl2,
.with-animation .s-a.s-a-a .sa-cl2-r,
.with-animation .s-a.s-a-a .sa-cl3,
.with-animation .s-a.s-a-a .sa-cl3-r {
    left: 0;
    opacity: 1;
}

.with-animation .s-a.s-a-a .sa-ct1,
.with-animation .s-a.s-a-a .sa-ct2,
.with-animation .s-a.s-a-a .sa-ct3,
.with-animation .s-a.s-a-a .sa-ct4 {
    top: 0;
    opacity: 1;
}

#email-form .right-panel,
.cards .card .arrow,
.cards .card .arrow svg.arr,
.cards .card .arrow svg.play,
.loader,
.position-center,
a.arr svg.circle,
a.arr svg.circle-border,
a.arr svg.icon,
div.arr svg.circle,
div.arr svg.circle-border,
div.arr svg.icon,
input[type="checkbox"]:checked:after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
}

.positionX {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#request-form .right-panel form {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#main-menu {
    position: fixed;
    top: -9999px;
    left: -9999px;
    height: 100%;
    width: 100%;
    background-color: #041E42;
    z-index: 6;
}

#main-menu .menu-box,
#main-menu .site-box,
#main-menu .site-box .site {
    position: absolute;
    box-sizing: border-box;
}

#main-menu:before {
    content: '';
    position: absolute;
    left: -30px;
    bottom: -5px;
    width: 250px;
    height: 380px;
    background: url(../images/menu-icon.svg) no-repeat;
    background-size: contain;
    z-index: 999;
}

#main-menu .site-box {
    border: 1px solid rgb(255 255 255 / 50%);
    top: 72px;
    width: 45%;
    right: 4.16667%;
    height: 600px;
    padding: 48px;
}

#main-menu .site-box .site {
    top: 48px;
    left: 48px;
    width: calc(100% - 96px);
    height: calc(100% - 96px);
    background-color: #000;
    opacity: 0;
}

#main-menu .menu-box {
    display: block;
    left: 16.666666%;
    width: 34.16667%;
    top: 72px;
    opacity: 0;
    transition: opacity 1s ease;
}

#main-menu .menu-box .menu {
    position: relative;
    display: block;
    margin-top: 75px;
    box-sizing: border-box;
}

#main-menu .menu-box .menu ul {
    position: relative;
    display: block;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#main-menu .menu-box .menu ul li {
    position: relative;
    display: block;
    /*font-family: History;*/
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 1.2px;
    transition: color 0.3s ease;
    color: #4b575c;
    cursor: pointer;
    margin-bottom: 30px;
    white-space: nowrap;
    width: 100%
}

#main-menu .menu-box .menu ul li a:hover,
#main-menu .menu-box .menu ul li span:hover {
    color: #fff;
}

@media all and (min-height: 680px) {
    #main-menu .menu-box .menu ul li {
        margin-bottom: 28px;
    }
}

@media all and (min-height: 720px) {
    #main-menu .menu-box .menu ul li {
        margin-bottom: 35px;
    }
}

@media all and (min-height: 760px) {
    #main-menu .menu-box .menu ul li {
        margin-bottom: 40px;
    }
}

#main-menu .menu-box .menu ul li a,
#main-menu .menu-box .menu ul li span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: rgb(255 255 255 / 50%);
    transition: 0.3s;
    background-color: #041e42;
    padding-right: 16px;
    z-index: 2;
    font-size: 27px;
    line-height: normal;
    white-space: normal;
    font-family: 'Surveyor Fine Book';
}

#main-menu .menu-box .menu ul li:after {
    /*content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 0%;
    height: 1px;*/
    /*background-color: rgb(255 255 255 / 50%);*/
    /*transition: width 1s ease;
    z-index: 1;*/
}

#main-menu .menu-box .menu ul li.active:after {
    width: 100%;
    top: 15px;
}

#main-menu .menu-box .menu ul li:before {
    content: none;
    position: absolute;
    top: 62%;
    left: -16px;
    height: 4px;
    width: 4px;
    transform: translateY(-50%);
    background-color: #4b575c;
    opacity: 0;
    border-radius: 50%;
    transition: opacity 0.3s ease;
}

#main-menu .menu-box .menu ul li.active {
    /*font-family: History;*/
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 1.7px;
    color: #fff;
    cursor: default;
}

#main-menu .menu-box .menu ul li.active:before {
    opacity: 1;
}

#main-menu .menu-box .menu ul li.active a:after {
    display: block;
    top: 10px;
}

#main-menu .sub-menu {
    position: absolute;
    left: 0;
    bottom: 70px;
}

#main-menu .sub-menu a.presentation span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    line-height: 10px;
    letter-spacing: 0.8px;
    color: #4b575c;
}

#main-menu .sub-menu a.presentation span:first-child {
    font-weight: 600;
    transition: 0.3s;
    text-transform: uppercase;
}

#main-menu .sub-menu a.presentation span:last-child {
    font-weight: 400;
    font-style: italic;
}

#main-menu .sub-menu a.presentation span.sep {
    width: 40px;
    margin: 0 8px;
}

#main-menu .sub-menu a.presentation span.sep:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(75, 87, 92, 0.2);
}

#main-menu .sub-menu form.search-box {
    position: relative;
    display: block;
    width: 300px;
    margin-top: 18px;
}

#main-menu .sub-menu form.search-box .search-trigger,
#main-menu .sub-menu form.search-box input[name="text"] {
    font-family: "Open Sans";
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.8px;
    font-weight: 600;
    color: #4b575c;
    border: 0;
}

#main-menu .sub-menu form.search-box input[name="text"] {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 13px;
    line-height: 16px;
    padding: 0 0 6px;
    border-bottom: 1px rgba(75, 87, 92, 0.2) solid;
    width: 300px;
    opacity: 0;
}

#main-menu .sub-menu form.search-box .search-trigger {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    opacity: 0.6;
    padding-top: 4px;
}

#main-menu .sub-menu form.search-box .search-trigger:after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: rgba(75, 87, 92, 0.2);
}

#main-menu .sub-menu form.search-box button.search {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    background: 0 0;
    font-weight: 600;
    font-size: 12px;
    color: #4b575c;
    -webkit-appearance: none;
    display: none;
}

body,
h2 {
    font-weight: 400;
}

#main-menu .sub-menu form.search-box.active .search-trigger {
    display: none;
}

#main-menu .sub-menu form.search-box.active button.search {
    display: block;
}

#main-menu .sub-menu form.search-box.active input[name="text"] {
    opacity: 1;
}

#main-menu .language {
    position: absolute;
    left: 40px;
    bottom: 40px;
    /*font-family: History;*/
    font-size: 12px;
    line-height: 10px;
    letter-spacing: 1px;
}

#main-menu .language a,
#main-menu .language span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: #353f3e;
    transition: color 0.3s ease;
}

.is-desktop #main-menu .language a:hover,
.is-desktop #main-menu .menu-box .menu ul li:hover a,
.is-desktop #main-menu .sub-menu a.presentation:hover span:first-child {
    color: #ffffff;
}

#main-menu .language span {
    opacity: 0.4;
}

#main-menu.open .menu-box,
.is-desktop #main-menu .sub-menu form.search-box .search-trigger:hover {
    opacity: 1;
}

#main-menu .language .sep {
    width: 40px;
    margin: 0 8px;
}

.is-desktop #main-menu .menu-box .menu ul li:hover:after,
.is-desktop #main-menu .sub-menu form.search-box .search-trigger:hover:after {
    width: 100%;
}

#main-menu .language .sep:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(75, 87, 92, 0.2);
}

#main-menu.open {
    top: 0;
    left: 0;
}

@keyframes rotateLoader {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dashLoader {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes dashLoaderBig {
    0% {
        stroke-dasharray: 1, 300;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 300;
        stroke-dashoffset: -70;
    }
    100% {
        stroke-dasharray: 89, 300;
        stroke-dashoffset: -200;
    }
}

.vimeo-player .loader {
    background-color: transparent !important;
}

.loader {
    height: 50px;
    width: 50px;
    display: block;
    z-index: 1000;
    transition: all 2s linear;
}

.on-screen .loader {
    display: none;
    transition: all 2s linear;
}

.loader.dis,
.loader.show,
fieldset {
    display: block;
}

.loader .caption {
    position: absolute;
    white-space: nowrap;
    text-align: center;
    left: 50%;
    transform: translate(-50%);
    /*font-family: History;*/
    font-size: 18px;
    letter-spacing: 2px;
    color: #fff;
    padding-top: 35px;
}

.loader svg.circular {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    animation: rotateLoader 2s linear infinite;
    transform-origin: center center;
    position: absolute;
    margin: auto;
}

.loader svg.circular .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dashLoader 2s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #f46244;
}

.loader.white .caption {
    color: #30383b;
}

.loader.fixed {
    position: fixed;
}

.loader:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.loader.big {
    height: 70px;
    width: 70px;
}

body,
html {
    margin: 0;
    height: 100%;
    padding: 0;
}

#screen,
#screen #content,
body,
html,
section {
    width: 100%;
}

.loader.big svg.circular .path {
    stroke-dasharray: 1, 300;
    animation: dashLoaderBig 2s ease-in-out infinite;
}

@font-face {
    src: url(/assets/public/font/History.otf);
    /*font-family: History;*/
}

@font-face {
    src: url(../fonts/AktivGroteskCorp-Light.otf);
    src: url(../fonts/AktivGroteskCorp-Light.ttf);
    src: url(../fonts/AktivGroteskCorp-Light.woff);
    font-family: AktivGrotesk;
}

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100%;
    font-family: AktivGrotesk;
    color: #041E42;
    background-color: #fff !important;
}


/*h1,
h2 {
    text-transform: uppercase;
    font-family: History, sans-serif;
}*/

.reset-transitions {
    transition-delay: 0s !important;
    transition: none !important;
}

#screen {
    position: relative;
    height: auto;
    z-index: 7;
    background-color: #fff;
    transform-origin: 100% 0;
    transform: scale(1) translate(0, 0);
    transition: transform 0.5s ease-in-out;
    overflow: hidden;
}

#screen.scale-down:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0);
}

#screen.contentFixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}

#screen.contentFixed:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0);
}

#screen #content {
    position: relative;
    z-index: 8;
    background-color: #fff;
    margin-left: 0px;
}

.contentFixed #screen #content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.other-pages#screen #content {
    margin-top: 90px;
}

fieldset,
section {
    position: relative;
}

.loading #screen #content section {
    opacity: 0;
}

.floating-title,
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::selection {
    background-color: #e3f1f6;
    color: #333;
}

::-moz-selection {
    background-color: #e3f1f6;
    color: #333;
}

textarea {
    resize: none;
    overflow: auto;
}

textarea:focus::placeholder {
    color: transparent;
}

input:focus::placeholder {
    color: transparent;
}

input:focus::input-placeholder,
textarea:focus::input-placeholder {
    color: transparent;
}

textarea:focus::-moz-input-placeholder {
    color: transparent;
}

input:focus::-moz-input-placeholder {
    color: transparent;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea:focus::-ms-input-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder {
    color: transparent;
}

input,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="checkbox"] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    border: 1px solid #dbddde;
    background-color: #fff;
    border-radius: 3px;
    box-sizing: border-box;
    transition: 0.15s;
}

input[type="checkbox"]:checked:after {
    content: "";
    height: 24px;
    width: 24px;
    background: url(/assets/public/images/chek.svg) center no-repeat #a1d2e0;
    border-radius: 2px;
}

fieldset {
    border: 0;
}

section {
    box-sizing: border-box;
}

#LZ,
.LZ {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}

.BarkliLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 60;
    background-color: #fff;
}

.BarkliLoader.BarkliIndexLoader {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    background-color: #fff;
}

.other-pages .BarkliLoader.BarkliIndexLoader {
    height: 0px !important;
}

.BarkliLoader .loader-line {
    position: absolute;
    top: 0;
    left: 0;
    transition: width 1s ease;
    width: 0;
    height: 2px;
    background-color: #f46244;
}

.BarkliLoader .b,
.BarkliLoader .l,
.BarkliLoader .r,
.BarkliLoader .t {
    position: absolute;
    background-color: #fff;
    transition: width 2.3s cubic-bezier(0.25, 0.1, 0.25, 1), height 2.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.BarkliLoader .l {
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
}

.BarkliLoader .r {
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
}

.BarkliLoader .t {
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
}

.BarkliLoader .b {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
}

.BarkliLoader .joker-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #041E42;
    transition: background-color 0.5s ease;
    overflow: hidden;
}

.BarkliLoader .joker-container .awards {
    position: absolute;
    top: 24px;
    right: 24px;
    opacity: 0;
    transition: opacity 2.3s cubic-bezier(0.25, 0.1, 0.25, 1), top 2.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 2.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    font-size: 0;
}

.BarkliLoader .joker-container .awards .award {
    position: relative;
    display: inline-block;
    text-decoration: none;
    width: 80px;
    height: 80px;
    z-index: 1;
    margin-left: 8px;
}

.BarkliLoader .joker-container .joker .initial-size,
.BarkliLoader.loaded .joker-container .joker .color,
.BarkliLoader.loaded .joker-container .joker .gray {
    display: none;
}

.BarkliLoader .joker-container .awards .award .award-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: #fff;
    border-radius: 50%;
}

.BarkliLoader .joker-container .awards .award .award-logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease;
    width: 40px;
    height: 40px;
    opacity: 1;
    z-index: 1;
}

.BarkliLoader .joker-container .awards .award .award-logo img.colored {
    z-index: 2;
    opacity: 0;
}

.BarkliLoader .joker-container .awards .award:hover {
    z-index: 2;
}

.BarkliLoader .joker-container .awards .award:hover .award-logo img {
    opacity: 0;
}

.BarkliLoader .joker-container .awards .award:hover .award-logo img.colored {
    opacity: 1;
}

.BarkliLoader .joker-container .joker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 325px;
    height: 500px;
    overflow: hidden;
}

.BarkliLoader .joker-container .joker.animated {
    transition: transform 3s cubic-bezier(0.25, 0.1, 0.25, 1);
    width: 100%!important;
    height: 100%!important;
    transform: translate(-50%, -50%) scale(1)!important;
}

.BarkliLoader .joker-container .joker.animated-fast {
    transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1s ease;
}

.BarkliLoader .joker-container .joker .color,
.BarkliLoader .joker-container .joker .gray,
.BarkliLoader .joker-container .joker .initial-size {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s linear;
    overflow: hidden;
}

.BarkliLoader .joker-container .joker .color,
.BarkliLoader .joker-container .joker .gray {
    right: 0;
    max-width: 200px!important;
    margin: 0 auto;
}

.BarkliLoader .joker-container .joker .color .image,
.BarkliLoader .joker-container .joker .gray .image,
.BarkliLoader .joker-container .joker .initial-size .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s linear;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.BarkliLoader .joker-container .joker .initial-size .image {
    background-size: cover;
}

.container,
.description-text,
.title-block,
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
}

.BarkliLoader .joker-container .joker .color {
    z-index: 2;
    transform: translateY(100%);
}

.BarkliLoader .joker-container .joker .color .image {
    transform: translateY(-100%);
    background-image: url(../images/logo-gold.png);
}

.BarkliLoader .joker-container .joker .gray {
    z-index: 1;
}

.BarkliLoader .joker-container .joker .gray .image {
    background-image: url(../images/logo-gold.png);
}

.BarkliLoader .index-joker-text-block {
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-delay: 5s;
}

.BarkliLoader .index-joker-text-block .text,
.BarkliLoader .index-joker-text-block h1 {
    transform: translateY(30px);
    transition: transform 1.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.BarkliLoader .index-joker-next-page {
    opacity: 0;
    bottom: 78px;
    transition: opacity 1.6s cubic-bezier(0.25, 0.1, 0.25, 1), bottom 1.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media all and (min-width: 1440px) {
    .BarkliLoader .index-joker-next-page {
        bottom: 94px;
    }
}

.BarkliLoader .index-joker-line-pos .px-line {
    height: 0;
    transition: height 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.BarkliLoader.loaded .index-joker-text-block {
    transition-delay: 4s;
    opacity: 1;
}

.BarkliLoader.loaded .index-joker-text-block .text,
.BarkliLoader.loaded .index-joker-text-block h1 {
    transition-delay: 1s;
    transform: translateY(0);
}

.BarkliLoader.loaded .index-joker-next-page {
    bottom: 108px;
    opacity: 1;
    transition-delay: 1.3s;
    z-index: 999;
}

.BarkliLoader.loaded .index-joker-line-pos .px-line {
    transition-delay: 2.6s;
    height: 66px;
}

.BarkliLoader.loaded .joker-container .awards {
    top: 96px;
    right: 96px;
    opacity: 1;
}

.BarkliLoader.loaded .joker-container .joker .initial-size,
.container {
    display: block;
}

.BarkliLoader.loaded .joker-container .joker .initial-size .image {
    background-image: url(../images/home-banner.jpg);
}

.BarkliLoader.loaded .l,
.BarkliLoader.loaded .r {
    width: 72px;
}

.BarkliLoader.loaded .b,
.BarkliLoader.loaded .t {
    height: 72px;
}

@media all and (min-width: 1440px) {
    .BarkliLoader.loaded .index-joker-next-page {
        bottom: 60px;
    }
    .BarkliLoader.loaded .joker-container .awards {
        top: 112px;
        right: 112px;
    }
    .BarkliLoader.loaded .l,
    .BarkliLoader.loaded .r {
        width: 88px;
    }
    .BarkliLoader.loaded .b,
    .BarkliLoader.loaded .t {
        height: 80px;
    }
}

.imperavi-redactor {
    position: relative;
    padding: 0;
    margin: 0;
}

.container {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0 8.333333%;
}

.container.dbl-pad {
    padding: 0 0 0 16.666666%;
}

.container.tri-pad {
    padding: 0 25%;
}

@media all and (min-width: 1600px) {
    .container {
        padding: 0 133.33px;
    }
    .container.dbl-pad {
        padding: 0 0 0 266.67px;
    }
    .container.tri-pad {
        padding: 0 400px;
    }
}

@media all and (min-width: 1880px) {
    .container.dbl-pad {
        padding: 0 0 0 133.33px;
    }
    .container.tri-pad {
        padding: 0 266.67px;
    }
}

.clearfix:after,
.clearfix:before {
    display: table;
    content: "";
}

.link,
.link:after {
    display: inline-block;
}

.clearfix:after {
    clear: both;
}

.left-side {
    float: left;
}

.right-side {
    float: right;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

h1 {
    font-size: 50px;
    line-height: 68px;
    color: #fff;
}

h2 {
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 2.4px;
    color: #4b575c;
    text-transform: uppercase;
}


@media only screen and (min-width: 1440px) {
    h2 {
        font-size: 34px;
        line-height: 52px;
        letter-spacing: 3px;
    }
}

@media only screen and (min-width: 1880px) {
    h2 {
        font-size: 36px;
    }
}

.opacity-on {
    opacity: 0 !important;
}

.description-text {
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0.1px;
    color: #4b575c;
    font-weight: 300;
    margin: 0px;
    width: 400px;
    clear: both;
    height: 100%;
}

.link,
.title-block .sub-title {
    font-size: 12px;
    text-transform: uppercase;
}

.description-text.small-text {
    line-height: 10px;
}

.description-text.middle-text {
    line-height: 24px;
}

.description-text.dbl-top-pad {
    margin-top: 80px;
}

.description-text p {
    margin-top: 48px;
}

@media all and (min-width: 1440px) {
    .description-text {
        width: 360px;
    }
}

@media all and (min-width: 1600px) {
    .description-text {
        width: 525px;
    }
}

.description-text.col4 {
    width: 426.67px;
}

@media all and (min-width: 1440px) {
    .description-text.col4 {
        width: 480px;
    }
}

@media all and (min-width: 1600px) {
    .description-text.col4 {
        width: 533.33px;
    }
}

.description-text.shift-right {
    top: -100px;
    padding-left: 320px;
    width: 320px;
}

@media all and (min-width: 1440px) {
    .description-text.shift-right {
        width: 360px;
        padding-left: 360px;
    }
}

@media all and (min-width: 1600px) {
    .description-text.shift-right {
        width: 333.33px;
        padding-left: 400px;
    }
}

.title-block .sub-title {
    position: absolute;
    top: 10px;
    left: -50px;
    line-height: 8px;
    letter-spacing: 2px;
    color: rgba(75, 87, 92, 0.3);
    transform-origin: 0 0;
    transform: rotate(-90deg) translate(-100%, 0);
}

.link {
    line-height: 10px;
    letter-spacing: 0.8px;
    font-weight: 600;
    color: #4b575c;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.is-desktop .main-menu-toggler:hover,
.link:hover {
    color: #f46244;
}

svg.circle-border,
svg.circle-timer {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
}

.link:after {
    content: "";
    width: 100px;
    vertical-align: top;
    height: 1px;
    opacity: 0.2;
    background-color: #4b575c;
    margin-left: 15px;
    margin-top: 4px;
    transition: width 1s ease;
}

.link:hover:after {
    width: 150px;
}

svg.circle-border {
    height: 60px;
    width: 60px;
    stroke-width: 1px;
    stroke: rgba(86, 128, 141, 0.2);
    transform: translate(-50%, -50%);
    transition: stroke-width 0.3s ease, stroke 0.3s ease;
}

svg.circle-timer {
    height: 60px;
    width: 60px;
    stroke-width: 2px;
    stroke-dasharray: 190px;
    stroke-dashoffset: 190px;
    stroke: #4b575c;
    transform: translate(-50%, -50%) rotate(-90deg);
}

svg.circle-timer.white {
    stroke: #fff;
}

svg.circle-timer.timer10 {
    transition: stroke-dashoffset 10s linear;
    stroke-dashoffset: 0;
}

svg.circle-timer.timer5 {
    transition: stroke-dashoffset 5s linear;
    stroke-dashoffset: 0;
}

svg.circle-timer.timer2 {
    transition: stroke-dashoffset 2s linear;
    stroke-dashoffset: 0;
}

svg.circle-timer.timer1 {
    transition: stroke-dashoffset 1s linear;
    stroke-dashoffset: 0;
}

a.arr,
div.arr {
    position: relative;
    display: block;
    height: 60px;
    width: 60px;
    cursor: pointer;
}

a.arr svg.circle,
a.arr svg.circle-border,
div.arr svg.circle,
div.arr svg.circle-border {
    height: 60px;
    width: 60px;
    stroke-width: 1px;
    stroke: rgba(51, 51, 51, 0.2);
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

a.arr svg.icon,
div.arr svg.icon {
    height: 24px;
    width: 24px;
    fill: #4b575c;
}

a.arr.close svg.icon,
div.arr.close svg.icon {
    transition: transform 0.3s ease;
}

a.arr.close:hover svg.circle,
div.arr.close:hover svg.circle {
    stroke-width: 1.5px;
    stroke: #4b575c;
}

a.arr.north,
div.arr.north {
    cursor: default;
}

a.arr:hover .circle-border,
div.arr:hover .circle-border {
    stroke-width: 1.5px;
    stroke: #4b575c;
}

.main-menu-toggler {
    position: fixed;
    right: auto;
    top: 0px;
    cursor: pointer;
    z-index: 70;
    height: 80px;
    width: 100%;
    background: transparent;
    /* transition: all 1s ease; */
    transform: translateY(-100px);
}

.main-menu-toggler .hamburger, .menu-back {
    position: absolute;
    top: 30px;
    right: 25px;
    width: 24px;
    height: 24px;
    font-size: 0px;
    z-index: 9;
}
.menu-back{z-index: 9999;}

.main-menu-toggler .hamburger i {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    background-color:#fff;
    margin-bottom: 5px;
    border-radius: 2px;
    transition: background-color 0.3s ease, transform 1s ease, opacity 1s ease;
}


/*.main-menu-toggler.menu-open .hamburger i {
    background-color: #fff
}*/

.barkli-gallery-floater .title,
.main-menu-toggler .caption {
    position: absolute;
    /*font-family: History;*/
    letter-spacing: 3px;
    text-transform: uppercase;
}

.main-menu-toggler .hamburger i:nth-child(2),
.main-menu-toggler .hamburger i:nth-child(3) {
    transform: translateX(-48px);
}

.main-menu-toggler .caption {
    top: 36px;
    left: 43%;
    transform-origin: 0 50%;
    transform: rotate(-90deg) translate(-100%, 0);
    font-size: 12px;
    line-height: 0;
    display: none;
}

@media all and (min-width: 1440px) {
    .main-menu-toggler {
        right: 0px;
        top: 0px;
    }
    .main-menu-toggler .hamburger i:nth-child(2),
    .main-menu-toggler .hamburger i:nth-child(3) {
        transform: translateX(-56px);
    }
}

.main-menu-toggler.on-screen {
    right: 0px;
    transform: translateY(0);
}

@media all and (min-width: 1440px) {
    .main-menu-toggler.on-screen {
        right: 0px;
    }
}

.main-menu-toggler.on-screen .hamburger i:nth-child(2) {
    transition-delay: 0.2s;
    transform: translateX(0);
}

.main-menu-toggler.on-screen .hamburger i:nth-child(3) {
    transition-delay: 0.4s;
    transform: translateX(0);
}

.main-menu-toggler.on-screen.ready .hamburger i {
    transition: background-color 0.3s ease, transform 0.5s ease, opacity 0.5s ease;
}

.main-menu-toggler.on-screen.ready .hamburger i:nth-child(2),
.main-menu-toggler.on-screen.ready .hamburger i:nth-child(3) {
    transition-delay: 0s;
}

.main-menu-toggler.menu-open .hamburger i:nth-child(1) {
    transition-delay: 0s;
    transform: translate(0, 7px) rotate(-45deg);
}

.main-menu-toggler.menu-open .hamburger i:nth-child(2) {
    transition-delay: 0s;
    opacity: 0;
}

.main-menu-toggler.menu-open .hamburger i:nth-child(3) {
    transition-delay: 0s;
    transform: translate(0, -7px) rotate(45deg);
}

.is-desktop .main-menu-toggler:hover .hamburger i {
    background-color: #041E42;
}

.is-desktop .main-menu-toggler.menu-open .hamburger i {
    background-color: #fff;
}

#main-menu .menu-box .menu ul li.active a {
    color: #fff;
}

.barkli-gallery-floater {
    position: fixed;
    top: 50%;
    left: 0;
    width: 72px;
    z-index: 70;
    opacity: 0;
    transform: translate(-100%);
    transition: opacity 0.5s ease, transform 1s ease;
}

.barkli-gallery-floater .title {
    top: 50%;
    left: 50%;
    font-size: 14px;
    line-height: 14px;
    color: #f46244;
    white-space: nowrap;
    transform-origin: 0 50%;
    transform: rotate(-90deg) translate(-50%, 0);
    transition: color 0.5s ease;
}

header.top .phone,
header.top .request-form-toggler {
    line-height: 24px;
    /*font-family: History;*/
    position: absolute;
    cursor: pointer;
}

.barkli-gallery-floater.on-screen {
    transform: translate(0);
}

.barkli-gallery-floater.active {
    opacity: 1;
}

.barkli-gallery-floater.hidden,
.floating-title .transparent {
    opacity: 0;
}

.is-desktop .barkli-gallery-floater .title:hover {
    color: #333;
}

.site-logo {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;
    width: 100%;
    height: 80px;
    /* border-bottom: 1px solid #A28D58; */
    padding: 15px 35px;
}

header.top .request-form-toggler-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 240px;
    overflow: hidden;
}

header.top .request-form-toggler {
    top: 27px;
    right: -24px;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 3px;
    transform-origin: 100% 0;
    transform: rotate(-90deg) translate(0, -100%);
    transition: right 1s ease, color 0.3s ease;
}

@media all and (min-width: 1440px) {
    header.top .request-form-toggler-box {
        width: 88px;
    }
    header.top .request-form-toggler {
        top: 34px;
        right: -24px;
    }
}

header.top .request-form-toggler.on-screen {
    right: 24px;
}

@media all and (min-width: 1440px) {
    header.top .request-form-toggler.on-screen {
        right: 32px;
    }
}

header.top .phone {
    top: -24px;
    right: 72px;
    font-size: 14px;
    letter-spacing: 0.9px;
    text-decoration: none;
    transition: top 1s ease;
    color: #333;
}

@media all and (min-width: 1440px) {
    header.top .phone {
        top: -24px;
        right: 88px;
    }
}

header.top .phone.on-screen {
    top: 24px;
}

@media all and (min-width: 1440px) {
    header.top .phone.on-screen {
        top: 32px;
    }
}

.is-desktop .request-form-toggler:hover {
    color: #f46244;
}

.floating-title {
    position: absolute;
    font-size: 88px;
    font-family: History, sans-serif;
    line-height: 1.5em;
    letter-spacing: 13.2px;
    text-align: right;
    text-transform: uppercase;
    right: 20px;
    color: #e3f1f6;
}

.floating-title .blue,
.floating-title .white {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.floating-title .blue span,
.floating-title .white span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.floating-title .blue {
    color: #e3f1f6;
}

.floating-title .white {
    color: #fff;
    height: 10%;
    top: 90%;
}

.floating-title .white span {
    transform: translateY(-90%);
}

.cards {
    position: absolute;
    top: 145px;
    right: 0;
    width: 100%;
    height: 340px;
    font-size: 0;
    overflow: hidden;
}

.cards div.arr.back2first {
    position: absolute;
    top: 50%;
    right: 48px;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50%;
    display: none;
    z-index: 1;
}

.cards .card,
.cards .card .visual {
    z-index: 5;
    left: 0;
    position: absolute;
    top: 0;
    height: 100%;
}

.cards .card {
    display: inline-block;
    width: 320px;
}

.cards .card.animated {
    transition: transform 1s ease;
}

.cards .card .visual {
    width: 100%;
    background-color: #4c5f66;
    transition: width 1s ease;
    cursor: pointer;
}

.cards .card .visual .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    transition: opacity 1s ease;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    text-align: center;
}

.cards .card .visual .name,
.cards .card .visual .time {
    font-size: 14px;
    line-height: 0.71;
    text-align: left;
    color: #fff;
    position: absolute;
    bottom: 32px;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease;
}

.cards .card .visual .name {
    left: 32px;
}

.cards .card .visual .time {
    right: 32px;
}

.cards .card .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    transform: translateX(0);
    transition: transform 1s ease;
}

.cards .card .content .content-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 48px 32px 48px 48px;
    box-sizing: border-box;
    background-color: #fff;
}

.cards .card .content .content-box .title {
    position: relative;
    display: block;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 2px;
    font-family: AktivGrotesk;
    color: #041E42;
    font-weight: 800;
    padding-bottom: 15px;
}

.cards .card .content .content-box .title:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: #A28D58;
}

.cards .card .content .content-box ul {
    position: absolute;
    display: block;
    padding: 0;
    margin: 60px 0 0;
    left: 48px;
    bottom: 56px;
}

.cards .card .content .content-box ul li {
    position: relative;
    display: block;
    font-size: 14px;
    font-weight: 300;
    line-height: 10px;
    padding-bottom: 24px;
}

.cards .card .content .content-box ul li span {
    display: inline;
    font-weight: 600;
    font-size: 12px;
    line-height: 10px;
    margin-right: 5px;
}

.cards .card .content .content-box ul li:last-child {
    padding-bottom: 0;
}

.cards .card .content .content-box .text {
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 30px;
    padding: 25px 0;
    width: 100%;
    box-sizing: border-box;
}

.cards .card .arrow {
    border-radius: 50%;
    background-color: #fff;
    height: 60px;
    width: 60px;
    cursor: pointer;
    left: 0;
    right: auto;
    opacity: 1;
    transition: left 1s ease, opacity 1s ease, width 1s ease, height 1s ease;
}

.cards .card .arrow svg.circle-border {
    opacity: 0;
    transition: opacity 1s ease, stroke 0.3s ease, stroke-width 0.3s ease;
}

.cards .card .arrow svg.play {
    height: 24px;
    width: 24px;
    fill: #333;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cards .card .arrow svg.arr {
    height: 24px;
    width: 24px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.cards .card .arrow.small {
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center
}

.cards .card .arrow.small img {
    width: 25px;
}

.cards .card.right .arrow {
    left: 116%;
    top:41%;
    transform: rotateZ(180deg);
}

.cards .card.right .arrow .arr {
    transform: translate(-50%, -50%) rotate(180deg);
}

.cards .card.open .content {
    transform: translateX(100%);
}

.cards .card.active.bigger .arrow {
    opacity: 0;
}

.cards .card.active.smaller .arrow {
    left: 50%;
    width: 88px;
    height: 88px;
}

.cards .card.active.smaller .arrow:hover {
    width: 88px;
    height: 88px;
}

.cards .card.active.smaller .arrow:hover svg.circle-border {
    stroke: #333;
    stroke-width: 2px;
}

.cards .card.active.smaller .arrow svg.circle-border,
.cards .card.active.smaller .arrow svg.play {
    opacity: 1;
}

.cards .card.active.smaller .arrow svg.arr {
    opacity: 0;
}

.cards .card.active .visual {
    cursor: default;
}

.cards .card.active .visual .img,
.cards .card.active .visual .name,
.cards .card.active .visual .time {
    opacity: 1;
}

.cards .card.active.with-video {
    cursor: pointer;
}

ul.dots {
    position: absolute;
    right: 3.75%;
    bottom: 20px;
    font-size: 0;
    white-space: nowrap;
    height: 60px;
    z-index: 20;
}

ul.dots li.dot {
    position: relative;
    vertical-align: top;
    display: inline-block;
    cursor: pointer;
    transform: translateY(-50%);
    height: 24px;
    width: 24px;
    transition: width 0.3s ease, height 0.3s ease;
}

ul.dots li.dot .bullet {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #000;
    height: 4px;
    width: 4px;
    opacity: 1;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

ul.dots li.dot .circle-border,
ul.dots li.dot .number {
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease;
}

ul.dots li.dot .number {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 12px;
    text-align: center;
}

.grid,
.grid div {
    top: 0;
    height: 100%;
}

ul.dots li.dot .circle-timer {
    transform: translate(-50%, -50%) scale(0) rotate(-90deg);
}

ul.dots li.dot:hover .bullet {
    background-color: #b4cad4;
}

ul.dots li.dot.active {
    height: 60px;
    width: 60px;
}

ul.dots li.dot.active .bullet {
    opacity: 0;
}

ul.dots li.dot.active .circle-border {
    transform: translate(-50%, -50%) scale(1);
}

ul.dots li.dot.active .circle-timer {
    transform: translate(-50%, -50%) scale(1) rotate(-90deg);
}

ul.dots li.dot.active .number {
    transform: translate(-50%, -50%) scale(1);
}

.shsiv .cards,
.shsiv .dots {
    opacity: 0;
    transition: opacity 1s ease;
}

.shsiv.scrolled_into_viewport .cards,
.shsiv.scrolled_into_viewport .dots {
    opacity: 1;
}

.grid {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 100000;
    display: none;
    box-sizing: border-box;
    border-left: 1px rgba(0, 0, 0, 0.1) solid;
    border-right: 1px rgba(0, 0, 0, 0.1) solid;
}

.grid div {
    position: absolute;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

.grid div:nth-child(1) {
    left: 8.33333%;
}

.grid div:nth-child(2) {
    left: 16.66667%;
}

.grid div:nth-child(3) {
    left: 25%;
}

.grid div:nth-child(4) {
    left: 33.33333%;
}

.grid div:nth-child(5) {
    left: 41.66666%;
}

.grid div:nth-child(6) {
    left: 50%;
}

.grid div:nth-child(7) {
    left: 58.33333%;
}

.grid div:nth-child(8) {
    left: 66.66666%;
}

.grid div:nth-child(9) {
    left: 75%;
}

.grid div:nth-child(10) {
    left: 83.33333%;
}

.grid div:nth-child(11) {
    left: 91.66666%;
}

.vimeo-player {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 100%;
    height: 100%;
    z-index: 200;
    background-color: #000;
}

.vimeo-player.open {
    top: 0;
    left: 0;
}

.vimeo-player .arr.close {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10000;
    transition: 0.3s;
    opacity: 0;
}

.vimeo-player .arr.close.black svg.circle {
    stroke-width: 1px;
    stroke: rgba(255, 255, 255, 0.2);
}

.vimeo-player .arr.close.black svg.x {
    fill: #fff;
}

.vimeo-player .arr.close.black:hover svg.circle {
    stroke-width: 1.5px;
    stroke: #fff;
}

.vimeo-player.popper {
    background-color: transparent;
}

.vimeo-player .player-box {
    position: absolute;
    top: -9999px;
    left: -9999px;
    font-size: 0;
    z-index: 2;
}

.vimeo-player.loading .close,
.vimeo-player.show .close {
    opacity: 1;
}

.vimeo-player.show {
    background-color: #000;
}

.vimeo-player.show .player-box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.vimeo-player .scalable-circle {
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    z-index: 1;
}

.vimeo-player .scalable-circle.black {
    background-color: #1f252c;
}

section.footer-compensator {
    position: absolute;
    width: 100%;
    height: 320px;
    z-index: 0;
}

section.index-footer {
  
    bottom: 0;
    left: 0;
    width: 100%;
    height: 320px;
    z-index: 1;
    background-color: #041E42;
    overflow: hidden;
    color: #FDFDFD;
}

section.index-footer .language {
    position: absolute;
    left: 8.33333%;
    bottom: -240px;
    /*font-family: History;*/
    font-size: 12px;
    line-height: 10px;
    letter-spacing: 1px;
    z-index: 5;
}

section.index-footer .language a,
section.index-footer .language span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: #353f3e;
    transition: color 0.3s ease;
}

section.index-footer .language span {
    opacity: 0.4;
}

section.index-footer .language .sep {
    width: 40px;
    margin: 0 8px;
}

section.index-footer .language .sep:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(75, 87, 92, 0.2);
}

section.index-footer .translator {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 320px;
    width: 100%;
}

section.index-footer .container {
    padding-top: 60px;
}

section.index-footer .container ul.footer-menu {
    position: relative;
    font-size: 0;
    padding: 20px 0;
}

section.index-footer .container ul.footer-menu li {
    font-size: 12px;
    display: inline-block;
    margin-right: 24px;
    text-transform: uppercase;
    font-weight: 600;
}

section.index-footer .container ul.footer-menu li a {
    color: #4b575c;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

section.index-footer .container ul.footer-menu li a:hover {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

section.index-footer .container ul.footer-menu li:last-child {
    margin-right: 0;
}

section.index-footer .container p.copyright {
    position: relative;
    margin: 0 0 24px;
    padding: 0;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 0.3px;
    color: #4b575c;
    font-family: "Open Sans";
    font-weight: 300;
}

section.index-footer .footer-logo-box {
    position: absolute;
    top: 70px;
    right: 8.333333%;
    text-align: right;
}

section.index-footer .footer-logo-box svg.logo-barkli {
    position: relative;
    width: 86px;
    height: 24px;
    left: 14px;
    fill: #187ab9 !important;
}

section.index-footer .footer-logo-box p.developer {
    position: relative;
    display: block;
    white-space: nowrap;
    color: #4b575c;
    font-size: 12px;
}

section.index-footer .footer-logo-box p.developer a {
    color: #187ab9;
    text-decoration: none;
    transition: 0.3s;
    border-bottom: 1px solid transparent;
    font-weight: 600;
}

section.index-footer .footer-logo-box p.developer a:hover {
    border-bottom: 1px solid rgba(24, 122, 185, 0.2);
}

section.index-footer .joker {
    position: absolute;
    width: 83.333333333%;
    max-width: 1080px;
    left: 50%;
    transform: translateX(-46%);
    bottom: 0;
    height: 350px;
    overflow: hidden;
}

section.index-footer .joker .joker-box {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
}

section.index-footer .joker .joker-box img {
    width: 100%;
    height: auto;
}

section.index-footer.clone {
    position: relative;
    height: 0;
    overflow: hidden;
}

section.index-footer h4 {
    font-size: 26px;
    margin-bottom: 30px;
    font-weight: 800;
    letter-spacing: 3px;
}

section.index-footer p {
    margin-bottom: 20px;
    text-transform: uppercase;
}

section.index-footer a {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    color: #FDFDFD;
}

section.index-footer .foot-right {
    text-align: right;
}

section.index-footer .foot-right ul {
    margin-bottom: 40px;
}

section.index-footer .foot-right ul li {
    display: inline-block;
    padding: 0 20px;
}

section.index-footer .foot-right ul li:last-child {
    padding-right: 0;
}

section.index-footer .foot-right ul li i {
    font-size: 28px;
}

form .checkbox.has-error input {
    border: 2px solid #ff616a;
}

form div.input {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

form div.input.brd:after,
form div.input.brd:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 5;
    box-sizing: border-box;
}

form div.input.brd:after {
    width: 100%;
    height: 1px;
    background-color: rgba(75, 87, 92, 0.2);
}

form div.input.brd:before {
    width: 0;
    height: 2px;
    background-color: #fa9152;
    transition: 0.5s linear;
}

form div.input input[type="phone"],
form div.input input[type="tel"],
form div.input input[type="mail"],
form div.input input[type="password"],
form div.input input[type="text"],
form div.input textarea {
    position: relative;
    display: block;
    width: 100%;
    padding: 28px 15px 6px 0;
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 18px;
    -webkit-appearance: none;
}

form div.input label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    box-sizing: border-box;
    font-size: 13px;
    color: #4b575c;
    cursor: pointer;
}

form div.input label a {
    color: #7ea8b9;
    text-decoration: none;
    padding-bottom: 1px;
    transition: 0.3s;
    border-bottom: 1px solid transparent;
}

form div.input label a:hover {
    border-bottom: 1px solid rgba(152, 188, 201, 0.5);
}

form div.input span.placeholder {
    position: absolute;
    top: 30px;
    left: 0;
    font-size: 15px;
    transform: scale(1);
    transform-origin: 0 0;
    transition: top 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
    box-sizing: border-box;
    color: #4b575c;
    opacity: 0.4;
}

#popup-policy .button-accept span,
form button.submit .caption span,
form button.submit .check .done {
    font-family: "Open Sans";
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}

form div.input.focus.brd:after {
    background-color: #fa9152;
    height: 2px;
}

form div.input.focus .placeholder {
    opacity: 0.4 !important;
}

form div.input.full.brd:hover:after {
    background-color: #c0dfeb;
}

form div.input.full.brd:after {
    background-color: #92c8dc;
    transition: 0.5s;
    height: 2px;
}

form div.input.full.brd:before {
    opacity: 0;
}

form div.input.focused span.placeholder {
    transform: scale(0.75) translateY(-23px);
}

form div.input.focused .placeholder {
    opacity: 0.4 !important;
}

form div.input.has-error input:not([type="checkbox"]) {
    background: url(/assets/public/images/triangle.svg) right 32px no-repeat;
}

form div.input.has-error.brd:after,
form div.input.has-error.brd:hover:after {
    background-color: #ff616a;
    height: 2px;
}

form div.input.has-error textarea {
    border-bottom-color: #f46244;
}

form button.submit {
    position: relative;
    height: 56px;
    width: 280px;
    background-color: #f46244;
    border-radius: 2px;
    text-align: left;
    border: 0;
    box-sizing: border-box;
}

form button.submit .caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
}

form button.submit .caption span {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    line-height: 56px;
    font-weight: 700;
    background-color: #f46244;
    padding: 0 30px;
    z-index: 2;
    transform: translateX(0);
}

form button.submit .caption.animated span {
    transition: transform 1s ease, background-color 0.3s ease;
}

form button.submit:after,
form button.submit:before {
    height: 1px;
    top: 28px;
    transition: width 1s ease;
    z-index: 4;
    position: absolute;
    content: "";
}

form button.submit .caption.hide span {
    transform: translateX(280px);
}

form button.submit .caption.on-the-left span {
    transform: translateX(-100%);
}

form button.submit:before {
    right: 0;
    width: 70%;
    background-color: rgba(255, 255, 255, 0.36);
}

form button.submit:after {
    left: 100%;
    width: 80px;
    background-color: rgba(62, 62, 62, 0.2);
}

form button.submit .check {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-color: #f46244;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5 ease;
}

form button.submit .check svg {
    position: absolute;
    left: -12px;
    top: 16px;
    height: 24px;
    width: 24px;
    stroke-width: 2px;
    stroke: #fff;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    transition: stroke-dashoffset 1s ease;
    opacity: 1;
    z-index: 3;
}

form button.submit .check .done {
    position: relative;
    height: 56px;
    line-height: 56px;
    font-weight: 700;
    padding: 0 15px;
    z-index: 2;
    background-color: #f46244;
    transform: translateX(-5px);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}

form button.submit .check:before {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: -8px;
    width: 20px;
    height: 100%;
    background-color: #f46244;
}

form button.submit .check.show {
    opacity: 1;
}

form button.submit .check.show svg {
    stroke-dashoffset: 0;
}

form button.submit .check.show .done {
    opacity: 1;
    transform: translateX(0);
}

form button.submit .line-box {
    position: absolute;
    top: 28px;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 2;
}

form button.submit .line-box .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.36);
    transform: translateX(-100%);
}

form button.submit .line-box.cycle-line .line {
    transition: transform 2s ease;
    transform: translateX(100%);
}

form button.submit.idle {
    transition: 0.3s;
}

form button.submit.idle:hover {
    background-color: #ff724b;
}

form button.submit.idle:hover .caption span {
    transform: translateX(20px);
    background-color: #ff724b;
}

form button.submit.idle:hover:after {
    width: 160px;
}

form button.submit.hide-lines:after,
form button.submit.hide-lines:before {
    width: 0;
}

form fieldset {
    transition: opacity 0.5s ease;
}

.show-sending-form form fieldset,
form.show-sending-form fieldset {
    opacity: 0.3;
}

.is-desktop form .checkbox:hover input {
    border: 2px solid #a1d2e0;
}

.is-desktop form div.input.brd:hover:before {
    width: 100%;
}

.is-desktop form div.input.brd:hover .placeholder {
    opacity: 1;
}

#popup-policy {
    position: fixed;
    top: -9999px;
    left: -9999px;
    background-color: #fff;
    z-index: 100000;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#popup-policy .scroll-box {
    padding: 104px 0 120px;
    overflow-y: scroll;
    height: 100%;
    box-sizing: border-box;
}

#popup-policy .container {
    height: 100%;
    overflow: hidden;
}

#popup-policy.open {
    top: 0;
    left: 0;
    opacity: 1;
}

#popup-policy .policy-text .description-text {
    width: 640px;
    margin: 56px 0 48px;
}

#popup-policy .policy-text .description-text p {
    margin: 28px 0;
}

#popup-policy .arr {
    position: absolute;
    right: 56px;
    top: 56px;
    z-index: 1;
}

#popup-policy .button-accept {
    background-color: #f46244;
    height: 56px;
    width: 236px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    margin-bottom: 96px;
}

#popup-policy .button-accept:hover {
    background-color: #f86e48;
}

#popup-policy .button-accept span {
    display: inline-block;
    white-space: nowrap;
    font-weight: 600;
    padding: 23px 30px;
    line-height: 10px;
    z-index: 2;
}

.show-form-success fieldset {
    opacity: 0;
}

.show-form-success .thank-box {
    visibility: visible;
    opacity: 1;
}

#request-form {
    position: fixed;
    top: -9999px;
    left: -9999px;
    background-color: #fff;
    z-index: 10000;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#request-form.open {
    top: 0;
    left: 0;
    opacity: 1;
}

#request-form .thank-box {
    left: 82px;
    top: 59px;
}

#request-form .left-panel,
#request-form .right-panel {
    position: absolute;
    top: 72px;
    min-height: 576px;
    box-sizing: border-box;
}

#request-form .left-panel {
    left: 16.66667%;
    width: 25%;
    height: 75%;
    max-height: 724px;
}

@media only screen and (min-width: 1440px) {
    #request-form .left-panel .sep {
        height: 46.5% !important;
    }
}

#request-form .left-panel .come {
    font-size: 12px;
    line-height: 8px;
    letter-spacing: 1px;
    color: rgba(75, 87, 92, 0.4);
    text-transform: uppercase;
    display: block;
    margin-top: 32px;
}

#request-form .left-panel .sep {
    height: 28.5%;
    max-height: 336px;
    width: 1px;
    margin: 11px 0 24px 23px;
    display: block;
    background-color: rgba(51, 51, 51, 0.1);
}

#request-form .left-panel .address {
    margin: 32px 0 24px;
}

#request-form .left-panel .address,
#request-form .left-panel .phone {
    font-size: 15px;
    line-height: 10px;
    letter-spacing: 0.3px;
    color: #4b575c;
    font-weight: 600;
}

#request-form .right-panel {
    left: 45.83333%;
    width: 47.65%;
    bottom: 72px;
    border: 1px solid rgba(51, 51, 51, 0.2);
    padding: 48px;
    max-width: 672px;
    min-width: 608px;
}

@media only screen and (min-width: 1440px) {
    #request-form .right-panel form {
        padding: 12px 26px 88px 102px !important;
    }
    #request-form .right-panel form div.input input[type="text"] {
        padding: 66px 15px 10px 0 !important;
    }
    #request-form .right-panel form div.input span.placeholder {
        top: 64px !important;
    }
    #request-form .right-panel form .checkbox {
        padding: 4.713em 0 2.25em !important;
    }
}

#request-form .right-panel .form-wrap {
    background-color: rgba(208, 232, 243, 0.2);
    height: 100%;
    position: relative;
}

#request-form .right-panel form {
    left: 0;
    box-sizing: border-box;
    padding: 16px 26px 64px 70px;
}

#request-form .right-panel form div.input {
    width: 90%;
    max-width: 352px;
}

#request-form .right-panel form div.input input[type="text"] {
    padding: 48px 15px 8px 0;
}

#request-form .right-panel form div.input span.placeholder {
    top: 49px;
}

#request-form .right-panel form div.input.has-error input:not([type="checkbox"]) {
    background: url(/assets/public/images/triangle.svg) right 32px no-repeat;
}

#request-form .right-panel form .checkbox {
    padding: 2.15em 0 1.688em;
}

#request-form .right-panel form .input input[type="checkbox"] {
    border-color: #dbddde;
}

#request-form .right-panel form .input input,
#request-form .right-panel form .input textarea {
    background-color: transparent;
    border-color: transparent;
}

#request-form .right-panel .close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    transform: translate(50%, -50%);
}

.thank-box {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}

#email-form,
.building-hint {
    transition: opacity 0.3s ease;
}

.thank-box .thank-title {
    font-family: History, sans-serif;
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: 2.4px;
    text-align: left;
    color: #4b575c;
    margin-bottom: 8px;
}

.thank-box .thank-note {
    opacity: 0.5;
    font-size: 15px;
    letter-spacing: 0.2px;
    text-align: left;
    color: #30383b;
}

#email-form {
    position: fixed;
    top: -9999px;
    left: -9999px;
    background-color: #fff;
    z-index: 10000;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
}

#email-form .thank-box {
    left: 72px;
    top: 52px;
}

#email-form.open {
    top: 0;
    left: 0;
    opacity: 1;
}

#email-form .right-panel {
    position: absolute;
    border: 1px solid rgba(51, 51, 51, 0.2);
    padding: 56px;
}

#email-form .right-panel .form-wrap {
    background-color: rgba(208, 232, 243, 0.2);
    height: 100%;
    position: relative;
}

#email-form .right-panel form {
    position: relative;
    padding: 20px 72px 72px;
}

#email-form .close,
.building-hint {
    position: absolute;
    background-color: #fff;
}

#email-form .right-panel form fieldset {
    padding: 0;
    margin: 0;
}

#email-form .right-panel form button {
    width: 310px;
}

#email-form .right-panel form button:after,
#email-form .right-panel form button:before {
    display: none;
}

#email-form .right-panel form button.idle:hover span {
    transform: translateX(0);
}

#email-form .right-panel form div.input {
    width: 342px;
}

#email-form .right-panel form div.input input[type="text"] {
    padding: 48px 15px 8px 0;
}

#email-form .right-panel form div.input span.placeholder {
    top: 49px;
}

#email-form .right-panel form div.input.has-error input:not([type="checkbox"]) {
    background: url(/assets/public/images/triangle.svg) right 32px no-repeat;
}

#email-form .right-panel form .checkbox {
    padding: 32px 0 56px;
}

#email-form .right-panel form .input input[type="checkbox"] {
    border-color: #dbddde;
}

#email-form .right-panel form .input input,
#email-form .right-panel form .input textarea {
    background-color: transparent;
    border-color: transparent;
}

#email-form .close {
    top: 56px;
    right: 56px;
    transform: translate(50%, -50%);
}

.building-hint {
    top: 0;
    left: 0;
    padding: 20px 16px;
    border-radius: 5px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.25);
    font-size: 12px;
    line-height: 10px;
    color: #4b575c;
    transform: translate(-50%, -100%);
    opacity: 0;
    z-index: 100;
}

.building-hint.active {
    opacity: 1;
}

.building-hint .text-floor {
    position: relative;
    /*font-family: History;*/
    font-size: 12px;
    line-height: 10px;
    letter-spacing: 0.7px;
    padding-bottom: 8px;
}

.building-hint .text-floor span {
    font-size: 18px;
    letter-spacing: 1.6px;
    color: #333;
}

.building-hint.floor-hint {
    line-height: 1.2em;
}

.building svg.hover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    fill: rgba(74, 175, 211, 0);
    z-index: 2;
    transition: fill 0.3s ease;
}

.building svg.hover.active {
    fill: rgba(74, 175, 211, 0.4);
}

.building .zone {
    position: absolute;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #fff;
    opacity: 0;
    z-index: 5;
}

.building .zone.f2.f2-1 {
    left: 0;
    top: 77.2058%;
    width: 31.7647%;
    height: 10.4411%;
}

.building .zone.f2.f2-2 {
    left: 31.7647%;
    top: 71.1764%;
    width: 68.2353%;
    height: 12.0588%;
}

.building .zone.f3.f3-1 {
    left: 0;
    top: 66.9117%;
    width: 31.88%;
    height: 10.2941%;
}

.building .zone.f3.f3-2 {
    left: 31.7647%;
    top: 59.5588%;
    width: 68.2353%;
    height: 11.6176%;
}

.building .zone.f3-a {
    left: 0;
    top: 54.4117%;
    width: 31.7647%;
    height: 12.5%;
    z-index: 3;
}

.building .zone.f4.f4-1 {
    left: 0;
    top: 47.9411%;
    height: 6.4705%;
    width: 31.7647%;
}

.building .zone.f4.f4-2 {
    left: 31.7647%;
    top: 47.9411%;
    height: 11.6176%;
    width: 68.2353%;
}

.building .zone.f5 {
    left: 0;
    top: 35.4411%;
    height: 12.5%;
    width: 100%;
}

.building .zone.f6 {
    left: 0;
    top: 24.4117%;
    height: 13.9705%;
    width: 100%;
}

.building .zone.f7 {
    left: 0;
    top: 4.8529%;
    height: 19.5588%;
    width: 100%;
}

.BarkliLoader .joker-container .awards .award .award-logo.urban img.bw {
    width: 50px;
    height: 50px;
    top: 55%;
}

.BarkliLoader .joker-container .awards .award .award-logo.urban img.colored {
    width: 50px;
    height: 50px;
    top: 55%;
}

.callback-button {
    position: fixed;
    right: 25px;
    bottom: 25px;
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9;
    animation: callback_opacity 3.5s linear;
}

.callback-button__svg-wrapper {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(75, 87, 92, 0.2);
    animation: callback_animation 1.5s infinite linear;
}

.callback-button__svg-wrapper:hover {
    width: 105px;
    height: 105px;
}

.callback-button__svg-wrapper:hover svg circle {
    fill: #f77950;
    transition: fill 0.5s ease;
}

@keyframes callback_animation {
    0%,
    100% {
        width: 83px;
        height: 85px;
    }
    50% {
        width: 105px;
        height: 105px;
    }
}

@keyframes callback_opacity {
    0%,
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hlf-panel{position:relative;padding:0px;margin:0px;z-index:0;}
.hlf-panel .container{min-height:100vh;display:table;position: static;}
.hlf-panel .container .row{display:table-cell; vertical-align:middle;}



/*.hlf-panel .container{display:-webkit-box; display:flex;align-items:flex-end;justify-content:center;min-height:500px;flex-direction:column;}*/
.hlf-bg{position:absolute;width:50%;height:100%;top:0;display:table-cell;vertical-align:middle;}
.hlf-panel .section-heading{margin:0;}
.hlf-panel-rht{background-repeat:no-repeat;background-size:50% auto;background:#f2f2f2;background-position:right top;}
.hlf-panel-rht .hlf-bg{right:0;min-height:100vh;}
.hlf-panel-rht .col-lg-6{float:left;padding:6% 6% 6% 0px;display:table-cell;vertical-align:middle;flex-direction:column;align-self:stretch;}
.hlf-panel-lft{background-repeat:no-repeat;background-size:50% auto;background-position:left top;min-height: 550px;}
.hlf-panel-lft .hlf-bg{left:0;top:0; min-height:550px;}
.hlf-panel-lft .col-lg-6{display:table-cell;vertical-align:middle;float:right;padding:4% 0px 4% 4%;height:100%;}
.purpose-visual{
    background: url(../images/about-us.jpg) no-repeat 13% 89%;
    background-size: cover;
}


@media (max-width:1199px){
    .hlf-panel-lft .container .row:after{max-width:465px;}
}
@media (max-width:991px){.hlf-panel{padding-top:315px;padding-bottom:40px;border-bottom:#fff solid 1px;}

.hlf-panel-lft .container .row:after, .hlf-panel-rht .container .row:after{max-width:100%;}
.hlf-panel-lft .container .row:after{left:0;}
.hlf-panel-rht .container .row:after{right:0;}
.hlf-bg{width:100%;height:490px;top:20px;left:0;right:0;margin:0 auto;}
.hlf-panel .container{padding: 0;}
.hlf-panel .container .col-lg-6{width:100% !important;padding:250px 0 0px;}
.hlf-panel h2, .hlf-panel h1{margin-top:15px;}
}
@media (max-width:768px){.hlf-panel .container{min-height:100%;position: static;}
}
@media (max-width:640px){.hlf-panel .container .col-lg-6{padding:0 15px;}
.hlf-bg{height:255px !important;}
.hlf-panel-rht .hlf-bg, .hlf-panel-lft .hlf-bg{min-height:300px !important;}
.hlf-panel-rht .col-lg-6, .hlf-panel-lft .col-lg-6{min-height:100%;}
}

@media (max-width: 600px) {
#screen {

    z-index: 2 !important;

}
}



  @media only screen and (min-width: 1366px) and (max-width: 1450px){
     .kf2 .cards .card {
    display: inline-block;
    width: 65% !important;
    height: 100% !important;
}   
    }
    
     @media only screen and (min-width: 976px) and (max-width: 1120px){
     .kf2 .cards .card {
    display: inline-block;
    width: 69% !important;
    height: 100% !important;
}  

}
 @media only screen and (min-width: 1120px) and (max-width: 1366px){
     .kf2 .cards .card {
    display: inline-block;
    width: 72% !important;
    height: 100% !important;
}     }

 @media only screen and (min-width: 700px) and (max-width: 769px){
         
             .kf2 .cards .card {
    display: inline-block;
    width: 72% !important;
    height: 100% !important;
}   
}

    @media only screen and (min-width: 770px) and (max-width: 783px){
         
             .kf2 .cards .card {
    display: inline-block;
    width: 72% !important;
    height: 100% !important;
}   }