.top_banners_outer{
    position: relative;
    top: 0px;
    width: 100%;
    height: 480px;
    margin: 0 auto;
}
.top_banners_outer:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 480px;
    pointer-events: none;
    z-index: 12;
    box-shadow: inset 1px 1px 5px #001a1a, inset -1px -1px 1px #001a1a, 1px 1px 1px #001a1a;
    box-shadow: inset 1px 1px 5px #001a1a, inset -2px -2px 3px #001a1a, 0px 0px 0px #001a1a;
}

.top_banners {
    position: absolute;
    top: 0px;
    left: -9999px;
    right: -9999px;
    margin: 0 auto;
    width: 1920px;
    height: 480px;
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box;
}


.top_banners .main-image{
    position: relative;
    width: 100%;
    height: 480px;
    -o-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    -ms-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    -moz-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    filter: blur(0px);
}
.top_banners .main-image.effs{
    -o-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    -ms-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    -moz-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    transition: all 0.2s cubic-bezier(0, 0, 0.58, 1.0);
    opacity: 0.4;
    filter: blur(8px);

    -webkit-animation: shake-horizontal 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
            animation: shake-horizontal 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}


@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}



.top_banners .main-image img {

}

.top_banners .thumbnails {
  display: block;
  justify-content: center;
  margin-top: 10px;
}

.top_banners .thumbnail {
    background-image: url(https://welcome.espritgames.com/wp-content/themes/espritgames-promo/promo/lp-main/img_mob/2/air/1.png);
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: auto;
    width: 195px;
    height: 195px;
    cursor: pointer;
    display: inline-block;
    margin: 0px -48px;
}
.top_banners .thumbnail:nth-child(odd){
    position: relative;
    top: 108px;
}

.top_banners_outer button {
    background: transparent;
    position: absolute;
    top: 38%;
    color: transparent;
    border: none;
    padding: 0px;
    cursor: pointer;
    font-size: 0.01px;
    z-index: 12;
    width: 120px;
    height: 126px;
}


.top_banners_outer button:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 38px;
    right: 0px;
    bottom: 0px;
    width: 160px;
    height: 116px;
    background: linear-gradient(270deg, #00b8b8, rgba(153, 0, 255, 0));
    z-index: 0;
    filter: blur(10px);
    opacity: 0.5;
    border-radius: 50px 46% 64% 0px;
    transform: rotate(180deg);
    z-index: 1;
    -o-transition: all 0.8s cubic-bezier(0, 0, 0.58, 1.0);
    -ms-transition: all 0.8s cubic-bezier(0, 0, 0.58, 1.0);
    -moz-transition: all 0.8s cubic-bezier(0, 0, 0.58, 1.0);
    -webkit-transition: all 0.8s cubic-bezier(0, 0, 0.58, 1.0);
    transition: all 0.8s cubic-bezier(0, 0, 0.58, 1.0);
}
.top_banners_outer button:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 120px;
    height: 126px;
    background: url(https://p-cdn.espritgames.ru/wp-content/themes/espritgames/img/top_banners/ar_l.png);
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: transparent;
    z-index: 2;
    opacity: 0.7;
    -o-transition: all 0.4s cubic-bezier(0, 0, 0.58, 1.0);
    -ms-transition: all 0.4s cubic-bezier(0, 0, 0.58, 1.0);
    -moz-transition: all 0.4s cubic-bezier(0, 0, 0.58, 1.0);
    -webkit-transition: all 0.4s cubic-bezier(0, 0, 0.58, 1.0);
    transition: all 0.4s cubic-bezier(0, 0, 0.58, 1.0);
}

.top_banners_outer .top_banners_prev {
  left: 10px;
}

.top_banners_outer .top_banners_next {
    right: 10px;
}
.top_banners_outer .top_banners_next:before {
    content: '';
    position: absolute;
    top: 2px;
    left: -78px;
    right: 0px;
    bottom: 0px;
    width: 160px;
    height: 116px;
    background: linear-gradient(270deg, #00b8b8, rgba(153, 0, 255, 0));
    z-index: 0;
    filter: blur(10px);
    opacity: 0.5;
    border-radius: 0px 64% 46% 50px;
    transform: rotate(0deg);
    z-index: 1;
}
.top_banners_outer button.top_banners_next:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 120px;
    height: 126px;
    background: url(https://p-cdn.espritgames.ru/wp-content/themes/espritgames/img/top_banners/ar_r.png);
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: transparent;
    z-index: 2;
}
.top_banners_outer button:hover:before{
    opacity: 0.9;
}
.top_banners_outer button:hover:after{
    opacity: 1;
}

/*
.top_banners_outer button:after {
  content: '';
  position: absolute;
  bottom: -8px; 
  left: 0;
  width: 100%;
  height: 5px; 
  background: linear-gradient(120deg, #7fff00, #ffea00, #8a2be2, #00ced1); 
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  0% {
    filter: blur(0px);
    opacity: 0.8;
  }
  100% {
    filter: blur(5px);
    opacity: 1;
  }
}


.top_banners_outer button::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, #aaff00, #ffcc00, #9900ff, #00b8b8);
  z-index: -1;
  filter: blur(10px);
  opacity: 0.7;
}


.top_banners_outer button::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: linear-gradient(45deg, #aaff00, #ffcc00, #9900ff, #00b8b8);
  z-index: -2;
  filter: blur(5px);
  opacity: 0.5;
}
*/

.top_banners_outer .top_banner_url{
    display: block;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 4;
}



.top_banners_outer .main-image .top_banner_logo{
    position: absolute;
    top: 108px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 432px;
    z-index: 1;
}
.top_banners_outer #pathofdoom_sld .top_banner_logo{
    width: 390px;
}
.top_banners_outer #demonslayer_sld .top_banner_logo{
    width: 296px;
    top: 22px;
}
.top_banners_outer #dragonegg_sld .top_banner_logo{
    width: 293px;
    right: -745px;
}
.top_banners_outer #primonlegion_sld .top_banner_logo{
    width: 346px;
    top: 98px;
}
.top_banners_outer #figurestory_sld .top_banner_logo{
    width: 304px;
    top: 20px;
}
.top_banners_outer #swordsman_sld .top_banner_logo{
    width: 818px;
    top: 150px;
}
.top_banners_outer #jadekingdom_sld .top_banner_logo{
    width: 220px;
    top: 50px;
}
.top_banners_outer #ndreams_sld .top_banner_logo{
    width: 316px;
    top: -36px;
    right: -521px;
}
.top_banners_outer #lostcrown_sld .top_banner_logo{
    width: 398px;
    top: 70px;
}
.top_banners_outer #divineark_sld .top_banner_logo{
    width: 580px;
    top: 80px;
    right: -360px;
}
.top_banners_outer #foxlegends_sld .top_banner_logo{
    width: 388px;
    top: 30px;
}


.top_banners_outer .main-image .top_banner_logo img{
    display: block;
    position: relative;
    width: 100%;
    height: auto;
}


.top_banners_outer .main-image .top_banner_btn1{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 0px;
    position: absolute;
    top: 378px;
    left: -212px;
    right: 0px;
    margin: 0 auto;
    width: 187px;
    height: 56px;
    z-index: 3;
}
.top_banners_outer #pathofdoom_sld .top_banner_btn1{
    width: 200px;
    height: 68px;
}
.top_banners_outer #primonlegion_sld .top_banner_btn1{
    width: 200px;
    height: 68px;
    top: 268px;
}
.top_banners_outer #figurestory_sld .top_banner_btn1{
    width: 200px;
    height: 68px;
    top: 318px;
}
.top_banners_outer #waifusquad_sld .top_banner_btn1{
    top: 258px;
    left: 0px;
    right: 0px;
    width: 128px;
    height: 44px;
}
.top_banners_outer #ndreams_sld .top_banner_btn1{
    width: 185px;
    height: 61px;
    top: 246px;
    right: -521px;
}
.top_banners_outer #lostcrown_sld .top_banner_btn1{
    width: 214px;
    height: 64px;
    top: 298px;
    left: -227px;
}
.top_banners_outer #divineark_sld .top_banner_btn1{
    width: 168px;
    height: 53px;
    top: 318px;
    right: -402px;
}
.top_banners_outer #godofnight_sld .top_banner_btn1{
    width: 180px;
    height: 54px;
    top: 318px;
    left: -361px;
}
.top_banners_outer #foxlegends_sld .top_banner_btn1{
    width: 164px;
    height: 50px;
    top: 318px;
}


.top_banners_outer .main-image .top_banner_btn2{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 0px;
    position: absolute;
    top: 378px;
    left: 0px;
    right: -212px;
    margin: 0 auto;
    width: 187px;
    height: 56px;
    z-index: 3;
}
.top_banners_outer #pathofdoom_sld .top_banner_btn2{
    width: 215px;
    height: 68px;
    background-position: center -7px;
}
.top_banners_outer #primonlegion_sld .top_banner_btn2{
    width: 200px;
    height: 68px;
    top: 268px;
}
.top_banners_outer #figurestory_sld .top_banner_btn2{
    width: 200px;
    height: 68px;
    top: 318px;
}
.top_banners_outer #waifusquad_sld .top_banner_btn2{
    top: 316px;
    left: 0px;
    right: 0px;
    width: 128px;
    height: 44px;
}
.top_banners_outer #ndreams_sld .top_banner_btn2{
    width: 185px;
    height: 61px;
    top: 246px;
    right: -730px;
}
.top_banners_outer #lostcrown_sld .top_banner_btn2{
    width: 214px;
    height: 64px;
    top: 298px;
    background-position: center -64px;
    right: -227px;
}
.top_banners_outer #divineark_sld .top_banner_btn2{
    width: 168px;
    height: 53px;
    top: 318px;
    right: -551px;
}
.top_banners_outer #godofnight_sld .top_banner_btn2{
    width: 180px;
    height: 54px;
    top: 318px;
    right: -361px;
}
.top_banners_outer #foxlegends_sld .top_banner_btn2{
    width: 147px;
    height: 50px;
    top: 318px;
}

.top_banners_outer .main-image .top_banner_btn3{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 0px;
    position: absolute;
    top: 378px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 187px;
    height: 56px;
    z-index: 3;
}
.top_banners_outer #demonslayer_sld .top_banner_btn3{
    top: 305px;
}
.top_banners_outer #dragonegg_sld .top_banner_btn3{
    width: 336px;
    height: 104px;
    left: 0px;
    right: -745px;
}
.top_banners_outer #figurestory_sld .top_banner_btn3{
    width: 200px;
    height: 68px;
    top: 400px;
    left: -212px;
}
.top_banners_outer #swordsman_sld .top_banner_btn3{
    width: 284px;
    height: 74px;
    top: 360px;
}
.top_banners_outer #waifusquad_sld .top_banner_btn3{
    width: 237px;
    height: 58px;
    top: 380px;
    left: 0px;
    right: -11px;
}
.top_banners_outer #jadekingdom_sld .top_banner_btn3{
    width: 308px;
    height: 146px;
    top: 212px;
}
.top_banners_outer #ndreams_sld .top_banner_btn3{
    width: 185px;
    height: 61px;
    top: 312px;
    right: -310px;
}
.top_banners_outer #godofnight_sld .top_banner_btn3{
    width: 158px;
    height: 54px;
    top: 318px;
    left: 0px;
}
.top_banners_outer #foxlegends_sld .top_banner_btn3{
    width: 162px;
    height: 50px;
    top: 379px;
    left: -211px;
}
.top_banners_outer #divineark_sld .top_banner_btn3{
    width: 168px;
    height: 51px;
    top: 377px;
    right: -191px;
}
.top_banners_outer #lostcrown_sld .top_banner_btn3{
    background-position: 0px center;
    width: 174px;
    height: 64px;
    margin: 12px auto;
    display: block;
    cursor: pointer;
    position: absolute;
    top: 376px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    border-radius: 23px;
    overflow: hidden;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    pointer-events: hover;
}
.top_banners_outer #lostcrown_sld .top_banner_btn3:before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto;
    left: 137px;
    width: 174px;
    height: 64px;
    background-color: #28ff97;
    background-image: url(https://welcome.espritgames.com/wp-content/themes/espritgames-promo/promo/lc-main/img/rls/APK-btn-2.png);
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: auto 54px;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    z-index: 1;
}
.top_banners_outer #lostcrown_sld .top_banner_btn3:after{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 1px;
    margin: auto;
    width: 174px;
    height: 64px;
    background: url(https://welcome.espritgames.com/wp-content/themes/espritgames-promo/promo/lc-main/img/rls/APK-btn-2-eft-incline-glow.png);
    background-repeat: no-repeat;
    background-position: 114px center;
    background-size: auto 64px;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    z-index: 2;
}
.top_banners_outer #lostcrown_sld .top_banner_btn3:hover{
    background-position: -172px center;
}
.top_banners_outer #lostcrown_sld .top_banner_btn3:hover:before{
    left: 0px;
    background-size: auto 84px;
}
.top_banners_outer #lostcrown_sld .top_banner_btn3:hover:after{
    left: -137px;
}



.top_banners_outer .main-image .top_banner_btn4{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 0px;
    position: absolute;
    top: 378px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 187px;
    height: 56px;
    z-index: 3;
}
.top_banners_outer #figurestory_sld .top_banner_btn4{
    width: 200px;
    height: 68px;
    top: 400px;
    right: -212px;
}
.top_banners_outer #ndreams_sld .top_banner_btn4{
    width: 185px;
    height: 61px;
    top: 310px;
    right: -730px;
}
.top_banners_outer #divineark_sld .top_banner_btn4{
    width: 160px;
    height: 51px;
    top: 377px;
    right: -551px;
}
.top_banners_outer #godofnight_sld .top_banner_btn4{
    width: 180px;
    left: -190px;
}
.top_banners_outer #foxlegends_sld .top_banner_btn4{
    width: 162px;
    height: 50px;
    top: 379px;
    right: -216px;
}

.top_banners_outer .main-image .top_banner_btn5{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 0px;
    position: absolute;
    top: 378px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 187px;
    height: 56px;
    z-index: 3;
}
.top_banners_outer #ndreams_sld .top_banner_btn5{
    width: 185px;
    height: 61px;
    top: 381px;
    right: -521px;
}
.top_banners_outer #godofnight_sld .top_banner_btn5{
    width: 180px;
    right: -190px;
}

.top_banners_outer .main-image .top_banner_txt{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 0px;
    position: absolute;
    top: 378px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 187px;
    height: 56px;
    z-index: 3;
}
.top_banners_outer #foxlegends_sld .top_banner_txt{
    width: 468px;
    height: 93px;
    top: 235px;
    right: 0px;
    text-align: center;
    background-size: 100% auto;
}
.top_banners_outer #divineark_sld .top_banner_txt{
    width: 580px;
    height: 54px;
    top: 260px;
    right: -360px;
    text-align: center;
}
.top_banners_outer #divineark_sld .top_banner_txt:before{
    content: 'Разгадай тайны Небесного ковчега!';
    background: none;
    width: 580px;
    height: 240px;
    display: block;
    position: relative;
    margin: 0 auto;
    font-family: "Philosopher-Regular";
    font-size: 30px;
    text-shadow: -1px 1px 2px #000, 1px -1px 2px #000000, -1px -1px 2px #000, 1px 1px 2px #000000;
}