/*L2Banners.ru - Верстка сайтов на заказ
Email: l2banners@mail.ru
*/

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Sans:400,700|Philosopher:400,700&subset=cyrillic');

/* @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700|Philosopher:400,700&subset=cyrillic'); */


/* 
Используемые шрифты

font-family: 'Segoe UI', Arial, sans-serif;
font-family: "Minion Pro", 'Times New Roman', Times, serif;
font-family: 'Philosopher', 'Times New Roman', Times, serif;
font-family: 'PT Sans', Tahoma, Arial, sans-serif;
font-family: 'PT Sans Narrow', 'PT Sans', Tahoma, Arial, sans-serif;
font-family: 'Ice kingdom Cyrillic Bold', 'Times New Roman', Times, serif;
*/

@import url(reset.css);
body {
    background: rgb(12, 15, 22) url(../images/bg-clear.jpg) no-repeat center top;
    color: #fff;
    font-family: 'Philosopher', 'Times New Roman', Times, serif;
    font-size: 14px;
}

.main {
    height: 945px;
    overflow: hidden;
    min-width: 1200px;
    max-width: 100%;
}

a {
    color: rgba(181, 210, 255, 0.66);
    transition-duration: 0.4s;
    transition-property: opacity, color, background-color, background;
	cursor: pointer;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
}

input,
select {
    width: 100%;
    min-height: 20px;
    border: 1px solid rgb(48, 53, 84);
    background-color: rgba(49, 56, 66, 0.39);
    padding: 10px;
    box-sizing: border-box;
    transition: .3s all;
    color: #fff;
}

input:focus {
    box-shadow: 0px 0px 0px transparent;
}

.input_wrapper {
    position: relative;
    min-height: 20px;
    width: 100%;
    max-width: 250px;
    margin-bottom: 20px;
}

.input_wrapper span {
    margin-bottom: 10px;
    display: inline-block;
}


/* Дополнительно */

.hidden {
    opacity: 0;
    transition: .3s all;
}

.visible {
    opacity: 1;
    transition: .3s all;
}

.l2b_animation {
    opacity: 0;
}

.l2b_animation.animated {
    opacity: 1;
}

.old_ie {
    background-color: #000;
    font-size: 30px;
    padding: 120px 0 20px 0;
    text-align: center;
    z-index: 999999;
    width: 100%;
    color: #fff;
}

.old_ie a {
    color: #D53939;
}


/* dwarf */

.dwarf {
    background: url(../images/scene__dwarf.png) no-repeat;
    width: 204px;
    height: 270px;
    position: absolute;
    left: -123px;
    bottom: -41px;
    pointer-events: none;
    animation: dwarf 25s linear infinite;
    transform-origin: left bottom;
}

@keyframes dwarf {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(-3deg) scale(1);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}


/* orc */

.orc {
    background: url(../images/scene__orc.png) no-repeat;
    width: 305px;
    height: 363px;
    position: absolute;
    right: -185px;
    bottom: -65px;
    pointer-events: none;
    animation: orc 20s linear infinite;
    transform-origin: left bottom;
}

@keyframes orc {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(2deg) scale(1.03);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}


/* Кнопки */

.btn {
    box-sizing: border-box;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    font-size: 17px;
    text-shadow: 0 0 5px rgba(36, 59, 87, .4);
    text-align: center;
    height: 56px;
    width: 231px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
    transition: .3s all;
    margin: 0 10px 25px 10px;
    position: relative;
}

.btn span {
    pointer-events: none;
}

.btn:after,
.btn:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: -20px;
    height: 83px;
    width: 231px;
    background: url(../images/btn/btn-def.png) no-repeat center center;
    z-index: 0;
    transition: .3s all;
    pointer-events: none;
}

.btn:hover:after {
    /* opacity: 0; */
}

.btn:before {
    background: url(../images/btn/btn-red.png) no-repeat center center;
    z-index: 1;
    transform: scale(1);
    opacity: 0;
}

.btn_green:after {
    background: url(../images/btn/btn-green.png) no-repeat center center;
}

.btn_green:before {
    background: url(../images/btn/btn-green_hover.png) no-repeat center center;
}

.btn:hover:before,
.btn__active:before,
.btn_active:before {
    transform: scale(1);
    opacity: 1;
}

.btn span,
.btn__img {
    transition: .3s all;
    position: relative;
    z-index: 5;
}

.big-btn {
    width: 270px;
    height: 55px;
    color: #fff;
    font-family: 'Ice kingdom Cyrillic Bold', 'Times New Roman', Times, serif;
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
}

.big-btn:after,
.big-btn:before {
    background: url(../images/btn/btn-big.png) no-repeat;
    width: 298px;
    height: 75px;
    left: -11px;
    top: -12px;
}

.big-btn:before {
    background: url(../images/btn/btn-big_hover.png) no-repeat;
    transform: scale(1.05);
}

.big-btn:hover:after {
    transform: scaleX(1.1);
    opacity: 0;
}


/* button */

.button {
    box-sizing: border-box;
    text-decoration: none;
    color: rgb(172, 215, 229);
    font-family: 'PT Sans', Tahoma, Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    height: 20px;
    width: 68px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
    transition: .3s all;
    position: relative;
    background: url(../images/btn/btn-small.png) no-repeat;
}

.button:hover {
    filter: brightness(140%);
}

.button_long {
    background: url(../images/btn/btn-long.png) no-repeat;
    width: 207px;
    height: 20px;
    padding-bottom: 2px;
}

.button_q {
    background: url(../images/btn/button-purple.png) no-repeat;
    width: 174px;
    height: 28px;
    padding-bottom: 2px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    border: 0;
}

.button_s {
    background: url(../images/btn/button-brown.png) no-repeat;
    width: 138px;
    height: 32px;
    padding-bottom: 2px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    border: 0;
}


/* button-article */

.button-article {
    background: url(../images/btn/btn-n.png) no-repeat;
    width: 135px;
    height: 27px;
    text-transform: uppercase;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    color: #fff;
    padding-bottom: 2px;
}

.button-article:hover {
    /* filter: brightness(130%) contrast(120%); */
}

.button-article span {
    position: relative;
    z-index: 4;
}


/* .button-article:before {
    content: "";
    background: url(../images/btn/btn-n_hover.png) no-repeat;
    width: 135px;
    height: 27px;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
} */


/* .big-btn:before {
    background: url(../images/btn/btn-big_hover.png) no-repeat;
    transform: scale(1.05);
}

.big-btn:hover:after {
    transform: scaleX(1.1);
    opacity: 0;
} */


/* Навигация */

.nav {
    background: url(../images/nav__bg.jpg) no-repeat;
    height: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.nav-container {
    width: 320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.nav-container_pos {
    margin: 0 35px;
}

.nav__link {
    text-decoration: none;
    text-transform: uppercase;
    color: #f1f1f1;
    font-size: 15px;
    text-shadow: 0 1px 1px rgba(1, 3, 5, .75);
    position: relative;
    cursor: pointer;
}

.nav__link:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.14);
    position: absolute;
    top: 50%;
    transition: .3s all;
}

.nav__link:before {
    content: attr(data-title);
    position: absolute;
    left: 0;
    text-decoration: none;
    text-transform: uppercase;
    color: #f1f1f1;
    font-size: 15px;
    text-shadow: 0 1px 1px rgba(1, 3, 5, .75);
    transition: .3s all;
    pointer-events: none;
    opacity: 1;
    top: 0;
    transform: scale(1);
}

.nav__link:hover:before {
    opacity: 0;
    /* transform: rotateY(0deg); */
    transform: scale(1.5);
}


/* lang */

.lang__link {
    text-decoration: none;
    position: relative;
    display: inline-block;

}

.lang__link img {
    transition: .3s all;
    opacity: .5;
}

.lang__link:hover img {
    opacity: 1;
    transform: rotate(360deg);
}

.lang__link_active {
	pointer-events: none;
	cursor: pointer;
}

.lang__link_active img {
	opacity: 1;
}

@keyframes hoverRotate {
    from {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(-60deg) scale(1.5);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}


/* servers */

.servers {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 190px;
    cursor: default;
}

.server {
    width: 109px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
    transform-style: preserve-3d;
    perspective: 700px;
    margin: 0 50px;
	cursor: pointer;
}

.server_off {
    filter: saturate(0);
}	

.server:nth-child(3) {
    margin-left: auto;
}

.server:nth-child(3) {
    margin-left: auto;
}

.server:after {
    content: '';
    display: block;
    width: 109px;
    height: 110px;
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s all;
    background: url(../images/server/server-red__circle.png) no-repeat;
    z-index: 0;
    animation: serverRotate 26s infinite linear;
}

@keyframes serverRotate {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}

.server:nth-child(1):after {
    background: url(../images/server/server__green-circle.png) no-repeat;
}

.server:nth-child(2):after {
    background: url(../images/server/server__aqua-circle.png) no-repeat;
}

.server:nth-child(3):after {
    background: url(../images/server/server__red-circle.png) no-repeat;
}

.server:nth-child(4):after {
    background: url(../images/server/server__blue-circle.png) no-repeat;
}

.server_off:after {
    /* animation: none !important; */
}

.server__txt {
    position: relative;
    z-index: 5;
    background: url(../images/server/server__title-bg.png) no-repeat;
    width: 70px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: #fff;
    font-size: 17px;
    text-shadow: 0 0 3px #1b2705;
}

.server_off .server__txt span {
    display: none;
}

.server_off .server__txt:after {
    content: "Offline";
}

.server__txt-content_first {
    transform: scale(1);
	position: absolute;
	transition: .3s;
}

.server__txt-content_second {
    transform: scale(0);
	position: absolute;
	transition: .3s;
	font-size: 12px;
}

.server:hover .server__txt-content_first {
    transform: scale(0);
}

.server:hover .server__txt-content_second {
    transform: scale(1);
}

.server__info {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 100%;
    z-index: 3;
}

.server__info-content {
    display: inline-block;
    transition: .3s all;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
}

.server__info-content_first {
    transform: scale(1);
}

.server__info-content_second {
    transform: scale(0);
}

.server:hover .server__info-content_first {
    transform: scale(0);
}

.server:hover .server__info-content_second {
    transform: scale(1);
}

.startcolor {
	color: #9ef9f9;
}
.obtcolor {
	color: #b6ffa0;
}

.server__load {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    background: url(../images/server/server__load-info-bg.png) no-repeat;
    width: 127px;
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    pointer-events: none;
    transform-origin: right center;
    transform: translateX(-120px) scaleX(0);
    transition: .3s all;
    opacity: 0;
    transform-style: preserve-3d;
    box-sizing: border-box;
    padding-left: 20px;
}

.server:hover .server__load {
    transform: translateX(0px) scaleX(1);
    opacity: 1;
}

.server__load-content {
    display: inline-block;
	position: relative;
    top: -1px;
}

.server__animation {
    background: url(../images/server/server-off.png) no-repeat;
    pointer-events: none;
    width: 135px;
    height: 132px;
    position: absolute;
    top: -16px;
    left: -12px;
    z-index: 3;
}

.server:nth-child(1).server_on .server__animation {
    background: url(../images/server/server-green__light.png) no-repeat;
}

.server:nth-child(2).server_on .server__animation {
    background: url(../images/server/server-aqua__light.png) no-repeat;
}

.server:nth-child(3).server_on .server__animation {
    background: url(../images/server/server-red__light.png) no-repeat;
}

.server:nth-child(4).server_on .server__animation {
    background: url(../images/server/server-blue__light.png) no-repeat;
}

.server_off .part-container {
    filter: saturate(0);
}

.status__zbt {
    color: rgb(255, 121, 121);
    font-weight: bold;
    text-shadow: 0 1px 1px #000;
    display: inline-block;
    padding-left: 5px;
}

.status__obt {
    color: rgb(255, 246, 100);
    font-weight: bold;
    text-shadow: 0 1px 1px #000;
    display: inline-block;
    padding-left: 5px;
}


/* Точки */

.dots {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    z-index: 11;
}

.dots__item {
    width: 50px;
    height: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 12;
    transform-origin: left center;
}

.dots__item_1 {
    animation: dotRot1 45s infinite linear;
}

@keyframes dotRot1 {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}

.dots__item_2 {
    animation: dotRot2 40s infinite linear;
    transform: rotate(150deg) scale(1);
    width: 60px;
}

@keyframes dotRot2 {
    from {
        transform: rotate(150deg) scale(1);
    }
    to {
        transform: rotate(510deg) scale(1);
    }
}

.dots__item_3 {
    animation: dotRot3 30s infinite linear;
    width: 55px;
}

@keyframes dotRot3 {
    from {
        transform: rotate(90deg);
    }
    to {
        transform: rotate(470deg);
    }
}

.dots__item_4 {
    animation: dotRot4 26s infinite linear;
    width: 48px;
}

@keyframes dotRot4 {
    from {
        transform: rotate(290deg);
    }
    to {
        transform: rotate(650deg);
    }
}

.dots__item_5 {
    animation: dotRot5 33s infinite linear;
    width: 63px;
}

@keyframes dotRot5 {
    from {
        transform: rotate(40deg);
    }
    to {
        transform: rotate(400deg);
    }
}

.dots__item_6 {
    animation: dotRot6 38s infinite linear;
    width: 30px;
    opacity: .9;
}

@keyframes dotRot6 {
    from {
        transform: rotate(140deg);
    }
    to {
        transform: rotate(500deg);
    }
}

.dots__item_7 {
    animation: dotRot7 48s infinite linear;
    width: 35px;
    opacity: .9;
}

@keyframes dotRot7 {
    from {
        transform: rotate(240deg);
    }
    to {
        transform: rotate(600deg);
    }
}

.dots__item_9 {
    animation: dotRot9 30s infinite linear;
    width: 37px;
    opacity: .9;
}

@keyframes dotRot9 {
    from {
        transform: rotate(2800deg);
    }
    to {
        transform: rotate(6400deg);
    }
}

.dots__item_8 {
    animation: dotRot8 36s infinite linear;
    width: 32px;
    opacity: .7;
}

@keyframes dotRot8 {
    from {
        transform: rotate(30deg);
    }
    to {
        transform: rotate(390deg);
    }
}

.dots__item_9 {
    animation: dotRot9 41s infinite linear;
    width: 64px;
}

@keyframes dotRot9 {
    from {
        transform: rotate(30deg);
    }
    to {
        transform: rotate(390deg);
    }
}

.dots__item_10 {
    animation: dotRot10 37s infinite linear;
    width: 64px;
    opacity: .7;
}

@keyframes dotRot10 {
    from {
        transform: rotate(120deg);
    }
    to {
        transform: rotate(480deg);
    }
}

.dots__item_11 {
    animation: dotRot11 52s infinite linear;
    width: 59px;
    opacity: .7;
}

@keyframes dotRot11 {
    from {
        transform: rotate(220deg);
    }
    to {
        transform: rotate(580deg);
    }
}

.dots__item_12 {
    animation: dotRot12 32s infinite linear;
    width: 64px;
    opacity: .7;
}

@keyframes dotRot12 {
    from {
        transform: rotate(300deg);
    }
    to {
        transform: rotate(660deg);
    }
}

.dots__el {
    display: block;
    width: 2px;
    height: 2px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);
    /* filter: blur(1); */
}

.dots_green .dots__el {
    background-color: rgba(188, 255, 162, 0.8);
}

.dots_aqua {
    transform: rotate(120deg);
}

.dots_aqua .dots__el {
    background-color: rgba(162, 255, 243, 0.8);
}

.dots_red {
    transform: rotate(80deg);
    /* top: calc(50% - 20px); */
}

.dots_red .dots__el {
    background-color: rgba(255, 162, 162, 0.8);
}

.dots_blue {
    transform: rotate(240deg);
}

.dots_blue .dots__el {
    background-color: rgba(162, 191, 255, 0.7);
}


/* mid */

.mid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.block {
    width: 400px;
    height: 480px;
    position: relative;
    box-sizing: border-box;
    z-index: 10;
}

.mid__block {
    padding-top: 73px;
}

.block_left:after {
    content: '';
    display: block;
    width: 418px;
    height: 657px;
    position: absolute;
    top: -125px;
    left: -11px;
    z-index: -1;
    transition: .3s all;
    background: url(../images/column__left.png) no-repeat;
    pointer-events: none;
}

.block_right:after {
    content: '';
    display: block;
    width: 418px;
    height: 657px;
    position: absolute;
    top: -125px;
    left: -5px;
    z-index: -1;
    transition: .3s all;
    background: url(../images/column__right.png) no-repeat;
    pointer-events: none;
}

.block-title {
    color: #7f8fa7;
    font-family: 'Ice kingdom Cyrillic Bold', 'Times New Roman', Times, serif;
    font-size: 17px;
    font-weight: bold;
    text-shadow: 0 0 9px rgba(0, 0, 0, .23);
    text-transform: uppercase;
    text-align: center;
}

.block-title_left-pos {
    padding: 30px 0 8px 0;
}

.block-title_right-pos {
    padding: 30px 0 8px 20px;
}


/* scl */

.scl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.scl_left {
    box-sizing: border-box;
    padding: 0 19px 0 8px;
}

.scl_right {
    box-sizing: border-box;
    padding: 0 10px 0 16px;
}

.scl__link {
    position: relative;
    width: 38px;
    height: 38px;
    background-image: url(../images/);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.scl__link:after {
    content: '';
    display: block;
    width: 38px;
    height: 38px;
    position: absolute;
    left: 0;
    top: 0;
    transition: .3s all;
    transform: scale(1.5);
    opacity: 0;
    pointer-events: none;
}

.scl__link:hover:after {
    transform: scale(1);
    opacity: 1;
}


/* Ссылка вк */

.scl__link_vk {
    background-image: url(../images/scl__vk.png);
}

.scl__link:after {
    background-image: url(../images/scl__vk.png);
}


/* Ссылка youtube */

.scl__link_youtube {
    background-image: url(../images/scl__youtube.png);
}

.scl__link_youtube:after {
    background-image: url(../images/scl__youtube.png);
}


/* Ссылка facebook */

.scl__link_facebook {
    background-image: url(../images/scl__facebook.png);
}

.scl__link_facebook:after {
    background-image: url(../images/scl__facebook.png);
}


/* Ссылка telegram */

.scl__link_telegram {
    background-image: url(../images/scl__telegram.png);
}

.scl__link_telegram:after {
    background-image: url(../images/scl__telegram.png);
}


/* .scl__link:hover {
    animation: hoverRotate .6s;
} */


/* top */

.title__top {
    text-align: center;
    margin-bottom: 30px;
}

.top {
    width: 200px;
    height: 240px;
    box-sizing: border-box;
    box-sizing: border-box;
}

.top_pos {
    position: relative;
    left: 100px;
}

table.top_block {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
}

table.top_block tr {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    height: 18px;
    line-height: 18px;
}

table.top_block tr th,
table.top_block tr td {
    position: relative;
    height: 18px;
    line-height: 18px;
}

table.top_block tr td {
    color: rgba(240, 227, 200, 0.7);
    font-family: 'PT Sans', Tahoma, Arial, sans-serif;
    font-size: 13px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .75);
    height: 18px;
    line-height: 18px;
    padding: 0;
}

table.top_block tr td.td-header {
    color: #c7a369;
    font-size: 13px;
}

table.top_block tr td:nth-child(1) {
    opacity: .3;
    color: #bd9d90;
    font-family: "Arial";
    font-size: 10px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .75);
    width: 30px;
    text-align: left;
}

table.top_block tr td:nth-child(2) {
    width: 150px;
    text-align: left;
}

table.top_block tr td:nth-last-child(1) {
    width: 40px;
    text-align: right;
}

table.top_block tr td span {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 12px;
    background: #36361f;
    top: 1px;
}

table.top_pvp {
    top: 0px;
    right: 0px;
}

table.top_pk {
    top: 0px;
    right: 0px;
}

#top_player {
    position: relative;
    display: block;
    width: 100%;
    height: 295px;
}

.top_player_block_server_1,
.top_player_block_server_2,
.top_player_block_server_3,
.top_player_block_server_4 {
    position: absolute;
    display: block;
    width: 100%;
    height: 238px;
    top: 12px;
    left: 0px;
    right: 0px;
    margin: auto;
    transform: scaleX(0.0);
    transition: all 0.3s ease;
    opacity: 0;
}

.top_active_block {
    transform: scaleX(1.0) !important;
    opacity: 1 !important;
}

ul#top_tabs_server1,
ul#top_tabs_server2,
ul#top_tabs_server3,
ul#top_tabs_server4 {
    position: absolute;
    display: block;
    left: -10px;
    right: -12px;
    bottom: -35px;
    list-style: none;
    text-align: center;
    margin: auto;
    z-index: 1;
    display: flex;
    justify-content: center;
}

ul#top_tabs_server1 li,
ul#top_tabs_server2 li,
ul#top_tabs_server3 li,
ul#top_tabs_server4 li {
    position: relative;
    display: inline-block;
    margin: 0 2px;
}

ul#top_tabs_server1 li a,
ul#top_tabs_server2 li a,
ul#top_tabs_server3 li a,
ul#top_tabs_server4 li a {
    position: relative;
    display: block;
    width: 68px;
    height: 20px;
    line-height: 20px;
    background: url(../images/btn/btn-small.png) no-repeat;
    color: rgb(172, 215, 229);
    font-family: 'PT Sans', Tahoma, Arial, sans-serif;
    font-size: 12px;
    text-decoration: none;
    margin: 0;
    transition: .3s all;
}

.top_content_server {
    position: absolute;
    display: block;
    width: 100%;
    height: 238px;
    top: 30px;
    left: 0px;
    right: 0px;
    margin: auto;
    transform: scaleX(0.0);
    transition: all 0.3s ease;
    z-index: 1;
    opacity: 0;
}

ul#top_tabs_server {
    position: absolute;
    display: flex;
    justify-content: space-around;
    top: 0;
    left: -14px;
    right: -14px;
    height: 25px;
    text-align: center;
    list-style: none;
    z-index: 0;
}

ul#top_tabs_server li {
    position: relative;
    display: inline-block;
}

ul#top_tabs_server li a {
    position: relative;
    display: block;
    text-align: center;
    color: rgb(172, 215, 229);
    font-family: 'PT Sans', Tahoma, Arial, sans-serif;
    font-size: 12px;
    text-decoration: none;
    transition: .3s all;
    background: url(../images/btn/btn-small_min.png) no-repeat;
    width: 55px;
    height: 20px;
    line-height: 20px;
}

ul#top_tabs_server1 li.active a,
ul#top_tabs_server2 li.active a,
ul#top_tabs_server3 li.active a,
ul#top_tabs_server4 li.active a,
ul#top_tabs_server1 li a:hover,
ul#top_tabs_server2 li a:hover,
ul#top_tabs_server3 li a:hover,
ul#top_tabs_server4 li a:hover {
    filter: brightness(140%);
}

ul#top_tabs_server li.active a,
ul#top_tabs_server li a:hover {
    filter: sepia(.9);
}


/* форум */

.forum {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.forum_pos {
    position: relative;
    left: 5px;
}

.theme {
    width: 210px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    text-decoration: none;
    color: #e5faff;
    font-family: "Arial";
    font-size: 12px;
    box-sizing: border-box;
    padding: 8px 10px 0 40px;
    position: relative;
    margin-bottom: 2px;
}

.theme:after {
    content: '';
    display: block;
    background: url(../images/forum__theme-bg.png) no-repeat;
    width: 210px;
    height: 45px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    transition: .3s all;
    transform: scaleX(1);
}

.theme:hover:after {
    filter: brightness(150%);
    transform: scaleX(1.2) translateX(-8px);
}

.theme:before {
    content: '';
    display: block;
    background: url(../images/forum__theme-bg.png) no-repeat;
    width: 210px;
    height: 45px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    transition: .3s all;
    transform: scale(1.3);
    opacity: 0;
}

.theme:hover:before {
    opacity: 1;
    transform: scale(1);
}

.theme__img {
    width: 28px;
    height: 28px;
    border: 1px solid #b9d8e2;
    background-image: url(../images/forum__ava-def.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    top: 9px;
    transition: .3s all;
    transform-origin: center center;
    z-index: 4;
}

.theme:hover .theme__img {
    transform: rotate(-360deg) scale(1.2) translateX(0px);
    border-radius: 50%;
}

.theme__title {
    min-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    position: relative;
    z-index: 4;
}

.theme__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    color: #788dac;
    font-size: 11px;
    width: 100%;
    position: relative;
    z-index: 4;
}

.theme__author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #ffcc7c;
}

.theme__author_pos {
    position: relative;
    left: -5px;
}

.forum__button {
    margin-top: 4px;
}


/* Центральный блок */

.container-present {
    width: 300px;
    position: relative;
}

.mid__container-present {
    position: relative;
    top: -172px;
}


/* logo */

.logo {
    /* background: url(../images/logo__orbis.png) no-repeat; */
    width: 278px;
    height: 126px;
    position: absolute;
    left: 10px;
    top: 0;
    transform-style: preserve-3d;
}

.container-present__logo {
    margin-bottom: 20px;
}

.logo__about {
    background: url(../images/logo__about.png) no-repeat;
    width: 269px;
    height: 16px;
    position: absolute;
    left: 10px;
    top: 130px;
}

.logo:hover .logo__about {
    transform: translateZ(20px);
}

.logo__crystal {
    background: url(../images/logo__crystal.png) no-repeat;
    width: 90px;
    height: 100px;
    position: absolute;
    left: 89px;
    top: 30px;
    z-index: 7;
    animation: crystal 2s linear infinite;
}

.logo:hover .logo__crystal {
    animation: crystal .4s linear infinite;
}

@keyframes crystal {
    0% {
        /* transform: rotateX(0deg); */
        filter: brightness(100%);
    }
    50% {
        /* transform: rotateX(40deg); */
        filter: brightness(140%);
    }
    100% {
        /* transform: rotateX(0deg); */
        filter: brightness(100%);
    }
}

.logo:hover .logo__crystal {
    transform: translateZ(-20px);
}

.logo__o {
    background: url(../images/logo__o.png) no-repeat;
    width: 77px;
    height: 95px;
    position: absolute;
    left: 0px;
    top: 31px;
    pointer-events: none;
    z-index: 5;
    transition: .3s all
}

.logo:hover .logo__o {
    transform: translateZ(20px) translateX(-30px);
}

.logo__r {
    background: url(../images/logo__r.png) no-repeat;
    width: 40px;
    height: 86px;
    position: absolute;
    left: 69px;
    top: 39px;
    pointer-events: none;
    z-index: 5;
    transition: .3s all
}

.logo:hover .logo__r {
    transform: translateZ(-40px) translateX(-20px);
}

.logo__b {
    background: url(../images/logo__b.png) no-repeat;
    width: 78px;
    height: 126px;
    position: absolute;
    left: 96px;
    top: 0px;
    pointer-events: none;
    z-index: 6;
    transition: .3s all
}

.logo:hover .logo__b {
    transform: translateZ(60px);
}

.logo__i {
    background: url(../images/logo__i.png) no-repeat;
    width: 38px;
    height: 89px;
    position: absolute;
    left: 174px;
    top: 34px;
    pointer-events: none;
    z-index: 5;
    transition: .3s all
}

.logo:hover .logo__i {
    transform: translateZ(-40px) translateX(20px);
}

.logo__s {
    background: url(../images/logo__s.png) no-repeat;
    width: 75px;
    height: 119px;
    position: absolute;
    left: 203px;
    top: 4px;
    pointer-events: none;
    z-index: 4;
    transition: .3s all
}

.logo:hover .logo__s {
    transform: translateZ(20px) translateX(30px);
}


/* timer */


/* jQuery Countdown styles 2.0.0. */

.is-countdown {}

.countdown-rtl {
    direction: rtl;
}

.countdown-holding span {}

.countdown-row {
    clear: both;
    width: 100%;
    padding: 0px 2px;
    text-align: center;
}

.countdown-show1 .countdown-section {
    width: 98%;
}

.countdown-show2 .countdown-section {
    width: 48%;
}

.countdown-show3 .countdown-section {
    width: 32.5%;
}

.countdown-show4 .countdown-section {
    width: 24.5%;
}

.countdown-show5 .countdown-section {
    width: 19.5%;
}

.countdown-show6 .countdown-section {
    width: 16.25%;
}

.countdown-show7 .countdown-section {
    width: 14%;
}

.countdown-section {
    display: block;
    float: left;
    font-size: 11px;
    text-align: center;
    background: url(../images/timer__border.png) no-repeat right center;
}

.countdown-section:nth-last-child(1) {
    background-image: none;
}

.countdown-amount {
    font-size: 35px;
    display: block;
    text-align: center;
    font-weight: bold;
}

.countdown-period {
    display: inline-block;
}

.countdown-descr {
    display: inline-block;
    width: 100%;
}

.count_wrap {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 200px;
}

.is-countdown {
    margin-top: 8px;
}

.counter {
    color: rgb(208, 237, 255);
    font-family: "PT Sans", sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0 0 9px rgba(31, 173, 255, .75), 0 0 9px rgba(31, 173, 255, .75), 0 0 9px rgba(31, 173, 255, .75);
    cursor: default;
}

.counter__title {
    text-transform: uppercase;
    letter-spacing: 0px;
}


/* scene */

.scene-cat {
    width: 523px;
    height: 197px;
    overflow: hidden;
    position: absolute;
    top: 391px;
    left: -95px;
    z-index: 0;
}

.scene-cat:after {
    content: "";
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    width: 523px;
    height: 197px;
    background: url(../images/scene.png) no-repeat;
    z-index: 2;
}

.fire-stat {
    display: block;
    top: 57px;
    left: 19px;
    position: absolute;
    width: 452px;
    height: 186px;
    background: url(../images/fire-stat.png) no-repeat;
    z-index: 3;
    animation: fireStat 14s infinite;
}

@keyframes fireStat {
    0% {
        filter: brightness(100%);
    }
    20% {
        filter: brightness(100%);
    }
    25% {
        filter: brightness(106%);
    }
    32% {
        filter: brightness(100%);
    }
    60% {
        filter: brightness(100%);
    }
    65% {
        filter: brightness(107%);
    }
    68% {
        filter: brightness(100%);
    }
    75% {
        filter: brightness(100%);
    }
    80% {
        filter: brightness(106%);
    }
    88% {
        filter: brightness(100%);
    }
    100% {
        filter: brightness(100%);
    }
}

.fire-blue {
    display: block;
    top: 12px;
    left: 130px;
    position: absolute;
    width: 218px;
    height: 59px;
    background: url(../images/fire-blue.png) no-repeat;
    z-index: 3;
    animation: fireBlue 6s infinite;
}

@keyframes fireBlue {
    0% {
        filter: brightness(100%);
    }
    20% {
        filter: brightness(110%);
    }
    25% {
        filter: brightness(130%);
    }
    38% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(100%);
    }
    65% {
        filter: brightness(117%);
    }
    85% {
        filter: brightness(100%);
    }
    80% {
        filter: brightness(110%);
    }
    90% {
        filter: brightness(100%);
    }
    100% {
        filter: brightness(100%);
    }
}

.fire {
    background: url(../images/fire_min.png) no-repeat 0px 0px;
    width: 47px;
    height: 50px;
    animation: fire 1.5s steps(48) infinite;
    pointer-events: none;
    z-index: 6;
}

.fire_left {
    position: absolute;
    left: 92px;
    bottom: 61px;
}

.fire_right {
    position: absolute;
    left: 372px;
    bottom: 61px;
    animation-delay: .7s;
    transform: rotateY(180deg);
}

@keyframes fire {
    0% {
        background-position: 0px 0;
    }
    100% {
        background-position: -2242px 0;
    }
}


/* Персонажи */

#human-run_r {
    background: url(../images/L2B-humanR__wotermark_min.png) no-repeat 0px 0px;
    width: 85px;
    height: 80px;
    position: absolute;
    left: 0;
    bottom: 25px;
    animation: human-run_r 1s steps(50) infinite;
    transition: left 5s linear;
    z-index: 1;
    pointer-events: none;
}

@keyframes human-run_r {
    0% {
        background-position: 0px 0;
    }
    100% {
        background-position: -4254px 0;
    }
}

#human-run_r:after {
    content: "Gatsby";
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    text-align: center;
    font-family: arial;
    font-weight: 300;
    color: rgb(216, 216, 216);
    font-size: 8px;
}

#human-run_l {
    /* background: url(../images/human-run_r-full-min.png) no-repeat 0px 0px; */
    background: url(../images/L2B-humanL__wotermark_min.png) no-repeat 0px 0px;
    /* background-size: cover; */
    width: 85px;
    height: 80px;
    position: absolute;
    right: 0;
    bottom: 25px;
    animation: human-run_l 1s steps(50) infinite;
    transition: right 5s linear;
    z-index: 1;
    pointer-events: none;
}

@keyframes human-run_l {
    0% {
        background-position: 0px 0;
    }
    100% {
        background-position: -4254px 0;
    }
}

#human-run_l:after {
    content: "Gatsby";
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    text-align: center;
    font-family: arial;
    font-weight: 300;
    color: rgb(216, 216, 216);
    font-size: 8px;
}

.human__title {
    position: absolute;
    left: -20px;
    right: -20px;
    text-align: center;
    bottom: calc(100% + 5px);
    font-family: arial;
    font-weight: 300;
    color: rgb(216, 216, 216);
    font-size: 10px;
}

.human__txt {
    background-color: rgba(0, 0, 0, 0.8);
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0;
}

.human_animate .human__txt {
    animation: texHuman 4s;
    animation-duration: both;
}

@keyframes texHuman {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    42% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}


/* Темная эльфийка */

.dark-elf-female {
    background: url(../images/dark-elf-female_min.png) no-repeat 0px 0px;
    width: 213px;
    height: 100px;
    position: absolute;
    left: 100px;
    bottom: 5px;
    transition: right 5s linear;
    z-index: 1;
    pointer-events: none;
    display: none;
}

.dark-elf-female_animate {
    animation: dark-elf-female 5s steps(311), run 5s;
    animation-duration: forwards;
    display: block;
}

@keyframes dark-elf-female {
    0% {
        background-position: 0px 0;
    }
    100% {
        background-position: -66320px 0;
    }
}

@keyframes run {
    0% {
        transform: translateX(0px);
    }
    10% {
        transform: translateX(50px);
    }
    80% {
        transform: translateX(50px);
    }
    95% {
        transform: translateX(-25px);
    }
    100% {
        transform: translateX(-30px);
    }
}

.dark-elf-female:after {
    content: "Nagibator2000";
    position: absolute;
    left: 0px;
    width: 70px;
    text-align: center;
    top: 0px;
    font-family: arial;
    font-weight: 300;
    color: rgb(216, 216, 216);
    text-shadow: 0 1px 1px #000;
    font-size: 8px;
}

.dark-elf-female_animate:after {
    /* opacity: 1; */
    animation: pvpColor 5s;
    animation-duration: both;
}

@keyframes pvpColor {
    0% {
        color: rgb(216, 216, 216);
    }
    77% {
        color: rgb(216, 216, 216);
    }
    78% {
        color: rgb(253, 0, 253);
    }
    100% {
        color: rgb(253, 0, 253);
    }
}

.dark-elf-female__title {
    position: absolute;
    left: -20px;
    width: 110px;
    text-align: center;
    bottom: calc(100% + 5px);
    font-family: arial;
    font-weight: 300;
    color: rgb(216, 216, 216);
    font-size: 10px;
}

.dark-elf-female__txt {
    background-color: rgba(0, 0, 0, 0.8);
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    /* transition: all 3.5s; */
    opacity: 0;
}

.dark-elf-female_animate .dark-elf-female__txt {
    /* opacity: 1; */
    animation: texeOp 4s;
    animation-duration: both;
}

@keyframes texeOp {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}


/* footer */

.main__footer {
    background-size: cover;
    padding-bottom: 20px;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
}

.footer__bnr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.footer__bnr a {
    opacity: 0.5;
    transition: .3s all;
}

.footer__bnr a:hover {
    opacity: 1;
}

.footer__bnr img {
    margin: 5px;
}

.footer__copy {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #797777;
    font-family: "Minion Pro", 'Times New Roman', Times, serif;
    font-size: 13px;
    text-transform: uppercase;
    margin-top: 20px;
    text-align: center;
}

.footer-nav {
    width: 430px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap;
}

.footer-nav a {
    opacity: 0.2;
    transition: .3s all;
}

.footer-nav a:hover {
    opacity: 1;
}

.footer-nav__link {
    color: #797777;
    font-family: "Minion Pro", 'Times New Roman', Times, serif;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    margin: 10px;
    position: relative;
    transition: .3s all;
}

.footer-nav__link:hover {
    color: #fff;
}

.footer-nav__link:after {
    content: '';
    display: block;
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: -3px;
    right: 100%;
    transition: .3s all
}

.footer-nav__link:hover:after {
    right: 0;
}

.footer__copy-desc {
    color: #797777;
    font-family: "Minion Pro", 'Times New Roman', Times, serif;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 20px;
}

.copy-about {
    font-size: 10px;
    text-transform: none;
    line-height: 11px;
}


/* контент */


/* Кнопки контента */

.content-btn-wrp {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    position: relative;
    z-index: 10;
}

.content-btn-wrp_pos {
    margin: 34px auto 20px auto;
}

.content-btn-wrp__btn {
    margin: 10px 4px;
}


/* .btn_animate:after {
    transform: scale(1.2);
    opacity: 0;
} */

.btn_animate:after {
    transform: scale(1.2);
    opacity: 0;
    animation: btnClick .3s backwards;
}

@keyframes btnClick {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}


/* tabs */

.content-container {
    height: 0;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 10;
    top: 20px;
}

.tab-block {
    background: url(../images/block.jpg) no-repeat;
    width: 1152px;
    height: 358px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -575px;
}

.corner_left-top {
    background: url(../images/block-corner__left-top.png) no-repeat;
    width: 27px;
    height: 28px;
    position: absolute;
    left: -9px;
    top: -7px;
    pointer-events: none;
}

.corner_left-top {
    background: url(../images/block-corner__left-top.png) no-repeat;
    width: 27px;
    height: 28px;
    position: absolute;
    left: -9px;
    top: -7px;
    pointer-events: none;
}

.corner_right-top {
    background: url(../images/block-corner__right-top.png) no-repeat;
    width: 27px;
    height: 28px;
    position: absolute;
    right: -9px;
    top: -7px;
    pointer-events: none;
}

.corner_left-bottom {
    background: url(../images/block-corner__left-bottom.png) no-repeat;
    width: 27px;
    height: 33px;
    position: absolute;
    left: -11px;
    bottom: -9px;
    pointer-events: none;
}

.corner_right-bottom {
    background: url(../images/block-corner__right-bottom.png) no-repeat;
    width: 27px;
    height: 33px;
    position: absolute;
    right: -11px;
    bottom: -9px;
    pointer-events: none;
}


/* header-title */

.header-title {
    text-align: center;
    color: rgb(236, 223, 255);
    font-family: 'Ice kingdom Cyrillic Bold', 'Times New Roman', Times, serif;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0 0 9px rgba(151, 51, 253, .75), 0 0 9px rgba(151, 51, 253, .75), 0 0 9px rgba(151, 51, 253, .75);
    box-sizing: border-box;
    text-transform: uppercase;
}


/* Новости */

.header-title_news {
    padding: 14px 0;
}

.article {
    width: 225px;
    height: 290px;
    box-sizing: border-box;
    padding: 0 20px;
}

.article_border-left {
    background: url(../images/line-vertical.png) no-repeat right -4px;
}

.article__border-non {
    background-image: none;
}

.article__img {
    height: 107px;
    background-image: url(../images/news__img-def.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.article__content {
    height: 124px;
    color: rgb(126, 142, 157);
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    line-height: 17px;
    box-sizing: border-box;
    padding-top: 8px;
    overflow: hidden;
    text-align: center;
	margin-bottom: 3px;
}

.article__title {
    color: rgb(255, 203, 184);
    font-family: "PT Sans", sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 0 9px rgb(215, 140, 111), 0 0 9px rgb(182, 113, 86), 0 0 9px rgb(101, 55, 37);
}

.article__content p{
    text-align: center;
	padding-top: 10px;
}

.article__info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: #788dac;
    font-size: 11px;
    width: 100%;
    position: relative;
    z-index: 4;
}

.article__author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #ffcc7c;
}

.article__btn {
    text-align: center;
    box-sizing: border-box;
    padding-top: 0px;
}


/* Кнопки слайдера */

.news-container .slick-next {
    right: -35px;
    z-index: 5;
}

.news-container .slick-prev {
    left: -35px;
    z-index: 5;
}

.news-container .slick-prev,
.news-container .slick-next {
    width: 65px;
    height: 87px;
}

.news-container .slick-prev::before {
    content: '';
    display: block;
    width: 65px;
    height: 87px;
    background: url(../images/arrow__left.png) no-repeat;
    transition: .3s all;
}

.news-container .slick-next::before {
    content: '';
    display: block;
    width: 65px;
    height: 87px;
    background: url(../images/arrow__right.png) no-repeat;
    transition: .3s all;
}


/* О серверах */

.about-container {
    text-align: center;
}

.about-container__article-wrp {
    display: inline-block;
    margin: 0 5px;
}

.article_about {
    width: 270px;
    padding: 25px 25px 0 25px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(75, 98, 126, 0.36);
}

.artice_header-big {
    font-size: 30px;
}

.artice__header {
    color: rgb(208, 237, 255);
    text-shadow: 0 0 9px rgba(31, 173, 255, .75), 0 0 9px rgba(31, 173, 255, .75), 0 0 9px rgba(31, 173, 255, .75);
    font-family: "Philosopher";
    font-size: 25px;
    font-weight: bold;
    height: 70px;
    text-align: center;
}

.article__content_about {
    color: #9aabc0;
    padding-top: 0;
    height: 140px;
}


/* stream */

.stream-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 0;
    position: relative;
    width: 1130px;
}

.stream-container_pos {
    margin-top: 30px;
    position: relative;
    left: 12px;
	min-height: 177px;
}

.stream-container:before {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    transition: .3s all;
    background: url(../images/stream__border.png) no-repeat center center;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
}

.stream-container:after {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    transition: .3s all;
    background: url(../images/stream__border.png) no-repeat center center;
    height: 1px;
    left: 0;
    right: 0;
    top: 0;
}

.stream {
    width: 185px;
    height: 115px;
    display: block;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(75, 98, 126, 0.36);
    position: relative;
    background-image: url(../images/stream__img-def.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.stream__title {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 1px 2px #000;
}
.stream__title_foot {
    position: absolute;
    right: 10px;
	text-align: center;
    width: 90%;
    bottom: 10px;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 1px 2px #000;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stream:after {
    content: '';
    display: block;
    position: absolute;
    transition: .3s all;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background: url(../images/play-icon.png) no-repeat center center;
    opacity: 0;
    transform: scale(1.3);
}

.stream:hover:after {
    opacity: 1;
    transform: scale(1);
}


/* Кнопки слайдера */

.stream-container .slick-next {
    right: -45px;
    z-index: 5;
}

.stream-container .slick-prev {
    left: -45px;
    z-index: 5;
}

.stream-container .slick-prev,
.stream-container .slick-next {
    width: 65px;
    height: 87px;
}

.stream-container .slick-prev::before {
    content: '';
    display: block;
    width: 65px;
    height: 87px;
    background: url(../images/arrow__left.png) no-repeat;
    transition: .3s all;
}

.stream-container .slick-next::before {
    content: '';
    display: block;
    width: 65px;
    height: 87px;
    background: url(../images/arrow__right.png) no-repeat;
    transition: .3s all;
}


/* step-header */

.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.step-header_pos {
    margin-bottom: 10px;
}

.step-header_donate {
    justify-content: space-around
}

.step-header__num {
    background-image: url(../images/num__one.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
}

.step-header__num_1 {
    background-image: url(../images/num__one.png);
}

.step-header__num_2 {
    background-image: url(../images/num__two.png);
}

.step-header__num_3 {
    background-image: url(../images/num__three.png);
}

.step-header__title {
    color: #afc4de;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
}

.step-header__title_donate {
    color: #fff;
    font-family: 'PT Sans', Tahoma, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.step-header__img {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
    background-image: url(../images/icon__chek-ball.png);
}

.step-header__img_chek-ball {
    width: 42px;
    height: 42px;
    background-image: url(../images/icon__chek-ball.png);
}

.step-header__img_download {
    width: 42px;
    height: 42px;
    background-image: url(../images/icon__download.png);
}

.step-header__img_question {
    width: 42px;
    height: 42px;
    background-image: url(../images/icon__question.png);
}

.step-header__img_chek {
    width: 57px;
    height: 39px;
    background-image: url(../images/icon__chek.png);
}

.step-header__img_purse {
    width: 53px;
    height: 45px;
    background-image: url(../images/icon__purse.png);
}

.step-header__img_coins {
    width: 46px;
    height: 44px;
    background-image: url(../images/icon__coins.png);
}


/* Файлы */

.files-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.files-block {
    width: 278px;
}

.files-block_center {
    margin: 0 80px;
}

.files-info {
    color: #e0609c;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    margin-top: 22px;
}

.files-info_stream {
    color: rgb(142, 175, 224);
	position: relative;
    top: 15px;
}


/* кнопка файлов */

.btn-files {
    box-sizing: border-box;
    text-decoration: none;
    color: #bccfd7;
    font-family: 'Ice kingdom Cyrillic Bold', 'Times New Roman', Times, serif;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    height: 27px;
    width: 278px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: .3s all;
    position: relative;
    margin-bottom: 2px;
}

.btn-files:hover {
    color: #fff;
}

.btn-files:before {
    content: '';
    display: block;
    height: 27px;
    width: 278px;
    position: absolute;
    transition: .3s all;
    background: url(../images/btn/btn-f.png) no-repeat;
    top: 0;
    left: 0;
    z-index: 0;
}

.btn-files:after {
    content: '';
    display: block;
    height: 27px;
    width: 278px;
    position: absolute;
    transition: .3s all;
    background: url(../images/btn/btn-f_hover.png) no-repeat;
    top: 0;
    left: 0;
    z-index: 0;
    transition: .3s all;
    opacity: 0;
}

.btn-files:hover:after {
    opacity: 1;
}


/* Активная кнопка */

.btn-files_active {
    color: #fff;
}

.btn-files_active:before {
    background: url(../images/btn/btn-f_active.png) no-repeat;
}

.btn-files_active:after {
    background: url(../images/btn/btn-f_active.png) no-repeat;
}

.btn-files_active:hover:after {
    filter: brightness(120%);
}


/* содержимое кнопки */

.square {
    display: inline-block;
    width: 34px;
    background: url(../images/icon__square.png) no-repeat center center;
    flex-shrink: 0;
    height: 22px;
    position: relative;
    z-index: 4;
    transition: .3s all;
}

.square_mr {
    margin-right: 5px;
}

.btn-files:hover .square {
    filter: brightness(140%);
}

.btn-files__txt {
    position: relative;
    top: -2px;
    z-index: 4;
    white-space: nowrap;
}

.btn-files__txt_faq {
    color: #afc4de;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Пожертвования */


/* Файлы */

.donate-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.donate-block {
    width: 278px;
}

.donate-block_center {
    margin: 0 80px;
}


/* кнопки пожертвовния */

.btn-donate {
    box-sizing: border-box;
    text-decoration: none;
    color: #bccfd7;
    font-family: 'Ice kingdom Cyrillic Bold', 'Times New Roman', Times, serif;
    font-size: 25px;
    font-weight: bold;
    text-align: left;
    height: 51px;
    width: 278px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: .3s all;
    position: relative;
    margin-bottom: 2px;
}

.btn-donate_active,
.btn-donate:hover {
    color: #fff;
}

.btn-donate_off {
    box-sizing: border-box;
    text-decoration: none;
    color: #bccfd7;
    font-family: 'Ice kingdom Cyrillic Bold', 'Times New Roman', Times, serif;
    font-size: 25px;
    font-weight: bold;
    text-align: left;
    height: 51px;
    width: 278px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: .3s all;
    position: relative;
    margin-bottom: 2px;
    background: url(../images/btn/btn-d__bg.png) no-repeat;
	cursor: not-allowed;
    filter: opacity(50%);
}

.btn-donate:before {
    content: '';
    display: block;
    height: 51px;
    width: 278px;
    position: absolute;
    transition: .3s all;
    background: url(../images/btn/btn-d__bg.png) no-repeat;
    top: 0;
    left: 0;
    z-index: 0;
}

.btn-donate_active:after,
.btn-donate:after {
    content: '';
    display: block;
    height: 51px;
    width: 278px;
    position: absolute;
    transition: .3s all;
    background: url(../images/btn/btn-d__bg_active.png) no-repeat;
    top: 0;
    left: 0;
    z-index: 0;
    transition: .3s all;
    opacity: 0;
}

.btn-donate_active:after,
.btn-donate:hover:after {
    opacity: 1;
}

.btn-donate__txt {
    position: relative;
    top: -2px;
    z-index: 4;
    white-space: nowrap;
}

.pay-icon {
    width: 60px;
    height: 50px;
    display: inline-block;
    z-index: 4;
    margin-left: auto;
}

.pay-icon_free-kassa {
    background: url(../images/icon__logo-free-kassa.png) no-repeat center center;
}

.pay-icon_unitpay {
    background: url(../images/icon__logo-unitpay.png) no-repeat center center;
}

.pay-icon_nextpay {
    background: url(../images/icon__logo-nextpay.png) no-repeat center center;
}

.block-list_donate {
    width: 272px;
    margin: 0 auto;
    position: relative;
    top: -6px;
}


/* остались вопросы */

.button_question-wrp {
    text-align: center;
    box-sizing: border-box;
    padding-top: 20px;
}

.questions-modal {
    width: 412px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50px;
    right: 25px;
    box-sizing: border-box;
    border: 1px solid rgba(75, 98, 126, 0.36);
    color: #9f9f9f;
    font-size: 12px;
    font-weight: bold;
    font-family: 'PT Sans', Tahoma, Arial, sans-serif;
    line-height: 20px;
    text-align: center;
    padding: 15px;
    overflow: hidden;
    transition: .3s all;
    cursor: default;
}

.questions-modal_hidden {
    opacity: 0;
    height: 0;
    top: 300px;
    right: 200px;
    pointer-events: none;
}

.questions-modal_visible {
    opacity: 1;
    height: 300px;
    top: 50px;
    right: 25px;
    pointer-events: auto;
}

.text-white {
    color: #fff;
}

.text-red {
    color: #ff6a6a;
}

.text-green {
    color: #a5b539;
}

.link-orange {
    color: #ff8f34;
    text-decoration: none;
    position: relative;
}

.link-orange:after {
    content: '';
    display: block;
    height: 1px;
    background-color: #ff8f34;
    position: absolute;
    left: 0;
    bottom: -3px;
    right: 100%;
    transition: .3s all
}

.link-orange:hover:after {
    right: 0;
}


/* Форма */

.form-item_mb {
    margin-bottom: 9px;
}

.form-item__txt {
    color: #a9b8cb;
    font-family: "PT Sans", sans-serif;
    font-size: 14px;
}

.form-item__txt_mb {
    margin-bottom: 4px;
}

.form-item__input {
    background: url(../images/input__bg.png) no-repeat;
    width: 272px;
    height: 29px;
    color: #5e728d;
    font-family: "PT Sans", sans-serif;
    font-size: 13px;
}

.form-item__input:focus {
    box-shadow: 0 0 0 transparent;
}

input.form-item__input::placeholder {
    color: #5e728d;
    transition: .3s all;
}

input.form-item__input:focus::placeholder {
    color: transparent;
    transform: scale(1.2)
}

.form-item__input-wrp {
    position: relative;
    display: inline-block;
}


/* Бонусы подсказка */

.bonus-mark {
    background: url(../images/icon__question-mark.png) no-repeat;
    width: 23px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: help;
}

.bonus-tip {
    background: url(../images/tolltip__bg.png) no-repeat;
    width: 254px;
    height: 135px;
    position: absolute;
    right: -34px;
    bottom: 17px;
    color: #b4bcc6;
    font-family: "PT Sans", sans-serif;
    font-size: 11px;
    box-sizing: border-box;
    padding: 10px;
    transition: .3s all;
}

.bonus-tip_open {
    opacity: 0;
    /* height: 0; */
    right: -124px;
    bottom: 17px;
    pointer-events: none;
    transform: scale(0);
    transform-origin: center bottom;
}

.bonus-mark:hover .bonus-tip_open {
    opacity: 1;
    /* height: 135px; */
    right: -34px;
    bottom: 17px;
    transform: scale(1);
}

.bonus-tip__title {
    color: #d8f0ff;
    font-family: "PT Sans", sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 0 9px rgba(31, 173, 255, .75), 0 0 9px rgba(31, 173, 255, .75);
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    padding: 5px 0;
}

.bonus-tip__item {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(48, 53, 84, 0.6);
    box-sizing: border-box;
    padding: 3px 20px;
}

.bonus-tip__item:nth-last-child(1) {
    border-bottom: 0;
}


/* Сумма */

.total-wrp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a9b8cb;
    font-family: "PT Sans", sans-serif;
    font-size: 14px;
    padding: 5px 0;
}

.total-item {
    text-transform: uppercase;
    font-family: "PT Sans", sans-serif;
    font-size: 11px;
    text-align: center;
}

.total-item_rub {
    color: #bbed4e;
}

.total-item_usd {
    color: #14ffe0;
}

.total-item_uah {
    color: #e1b743;
}

.icon-dot {
    background: url(../images/icon__dot.png) no-repeat;
    width: 20px;
    height: 20px;
}


/* Условия */

.conditions-wrp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.conditions-link {
    color: #a9b8cb;
    font-family: "PT Sans", sans-serif;
    font-size: 14px;
    display: inline-block;
    margin-right: 8px;
    text-decoration: none;
    position: relative;
}

.conditions-link:after {
    content: '';
    display: block;
    height: 1px;
    background-color: #a9b8cb;
    position: absolute;
    left: 0;
    bottom: -2px;
    right: 100%;
    transition: .3s all
}

.conditions-link:hover:after {
    right: 0;
}


/* checkbox */

.checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 20px;
}

.checkbox+label {
    position: relative;
    padding: 0 0 0 60px;
    cursor: pointer;
}

.checkbox+label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2);
    transition: .2s;
}

.checkbox+label:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    transition: .2s;
}

.checkbox:checked+label:before {
    background: #9FD468;
}

.checkbox:checked+label:after {
    left: 26px;
}


/* Табы */


/*Стилизуем кнопки*/

#l2b_tabs_toggle_btn {
    text-align: center;
}


/* .l2b_toggle_btn {}

.l2b_toggle_btn.toggle_btn_active {
    color: #C4A087;
    background-color: #46322D;
} */


/*Контент табов*/

#l2b_tabs_content {
    position: relative;
}

.l2b_tabs_block {
    display: none;
    opacity: 0;
    position: absolute;
    /* left: 0;
	top: 0; */
    /* width: 100%; */
}

.l2b_tabs_block.tab_active {
    display: block;
}


/* popup-window */

.popup-window-wrp {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.popup-window {
    width: 570px;
    min-height: 270px;
    position: relative;
    background: url(../images/block.jpg) no-repeat center center;
    border: 1px solid rgb(36, 46, 61);
    font-family: "PT Sans", sans-serif;
}

.popup-window a {
    color: rgb(216, 240, 255);
    font-size: 15px;
    text-shadow: 0 0 9px rgba(31, 173, 255, .75);
    text-transform: none;
}

.popup-window__header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px 0 16px;
    border-bottom: 1px solid rgb(36, 46, 61);
    box-sizing: border-box;
}

.popup-window__title {
    color: #d8f0ff;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 0 9px rgba(31, 173, 255, .75), 0 0 9px rgba(31, 173, 255, .75);
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    padding: 5px 0;
}

.popup-window__desc {
    text-shadow: 0 0 9px rgba(31, 173, 255, .75), 0 0 9px rgba(31, 173, 255, .75);
}

.popup-window__content {
    padding: 5px 0 5px 0;
}

.step-header_pop {
    justify-content: flex-start;
    height: 40px;
    /* align-items: flex-end; */
}

.step-header__title_pop {
    width: 100%;
    /* padding-bottom: 10px; */
    box-sizing: border-box;
    padding-left: 10px;
}

.wsubscribe_name {
    color: #fff !important;
}

.popup-window__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    box-sizing: border-box;
    padding: 15px 0 7px;
    border-top: 1px solid rgb(36, 46, 61);
    box-sizing: border-box;
}

a.perfect-link {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 9px rgba(255, 252, 29, 0.75), 0 0 9px rgba(255, 224, 31, 0.75);
    color: rgb(255, 246, 133);
    text-decoration: none;
    position: relative;
}

a.perfect-link:after {
    content: '';
    display: block;
    height: 1px;
    background-color: rgb(255, 246, 133);
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -3px;
    right: 100%;
    transition: .3s all
}

a.perfect-link:hover:after {
    right: 0;
    left: 0;
}

a.perfect-link-blue {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 9px rgba(31, 173, 255, .75), 0 0 9px rgba(31, 173, 255, .75);
    color: #d8f0ff;
    text-decoration: none;
    position: relative;
}

a.perfect-link-blue:after {
    content: '';
    display: block;
    height: 1px;
    background-color: #91d5ff;
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -3px;
    right: 100%;
    transition: .3s all
}

a.perfect-link-blue:hover:after {
    right: 0;
    left: 0;
}

.popup-window_hidden {
    display: none;
    opacity: 0;
}

.popup-window_active {
    display: flex;
    opacity: 1;
}

.pop-close {
    position: absolute;
    right: 6px;
    top: 4px;
    cursor: pointer;
    opacity: .5;
    transition: .3s all;
}

.pop-close:hover {
    opacity: 1;
    transform: rotate(180deg) scale(1.2);
}

.l2b_hidden {
    transition: .3s;
    visibility: hidden;
    opacity: 0;
}

.l2b_visible {
    visibility: visible;
    opacity: 1;
}


/* частицы */

.part-green__container {
    display: block;
    width: 60px;
    position: absolute;
    left: 25px;
    top: 50px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.part-green {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}

.part-green:after {
    content: "";
    display: block;
    background: url(../images/part-green.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-green-1:after {
    animation: part-green 4s linear infinite;
}

.part-green-2:after {
    animation: part-green 6s linear infinite;
    animation-delay: .5s;
}

.part-green-3:after {
    animation: part-green 3.5s linear infinite;
    animation-delay: .2s;
}

.part-green-4:after {
    animation: part-green 4.6s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-green {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}

.part-aqua__container {
    display: block;
    width: 60px;
    position: absolute;
    left: 25px;
    top: 50px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.part-aqua {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}

.part-aqua:after {
    content: "";
    display: block;
    background: url(../images/part-aqua.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-aqua-1:after {
    animation: part-green 6s linear infinite;
}

.part-aqua-2:after {
    animation: part-green 3.5s linear infinite;
    animation-delay: .5s;
}

.part-aqua-3:after {
    animation: part-green 4s linear infinite;
    animation-delay: .2s;
}

.part-aqua-4:after {
    animation: part-green 5s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-aqua {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}

.part-red__container {
    display: block;
    width: 60px;
    position: absolute;
    left: 25px;
    top: 50px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.part-red {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}

.part-red:after {
    content: "";
    display: block;
    background: url(../images/part-red.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-red-1:after {
    animation: part-green 5s linear infinite;
}

.part-red-2:after {
    animation: part-green 4.5s linear infinite;
    animation-delay: .5s;
}

.part-red-3:after {
    animation: part-green 3s linear infinite;
    animation-delay: .2s;
}

.part-red-4:after {
    animation: part-green 6s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-red {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}

.part-blue__container {
    display: block;
    width: 60px;
    position: absolute;
    left: 25px;
    top: 50px;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.part-blue {
    display: block;
    width: 5px;
    height: 5px;
    position: relative;
    pointer-events: none;
}

.part-blue:after {
    content: "";
    display: block;
    background: url(../images/part-blue.png) no-repeat center;
    width: 34px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

.part-blue-1:after {
    animation: part-green 5s linear infinite;
}

.part-blue-2:after {
    animation: part-green 6s linear infinite;
    animation-delay: .5s;
}

.part-blue-3:after {
    animation: part-green 3.7s linear infinite;
    animation-delay: .2s;
}

.part-blue-4:after {
    animation: part-green 4s linear infinite;
    animation-delay: 2.2s;
}

@keyframes part-blue {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-35px);
        opacity: 1;
    }
    100% {
        transform: translateY(-70px) scale(0.7);
    }
}