*{color:#ddd;font-size:20px;font-family:"Nunito", sans-serif;font-optical-sizing:auto;font-size:;font-weight:400;margin:0;padding:0;border:0;vertical-align:baseline;box-sizing:border-box;outline:0;transition:.3s;}
html{height:100%;}
button{user-select:none;}
body{font-family:'Nunito',sans-serif;width:100%;min-width:300px;min-height:100%;font-size:100%;background: linear-gradient(90deg,#1b121d 0,#120f2f 50%,#1b121d 100%);color:#9ba0b8;}
body:after {
    content: '';
    top: 42.8%;
    right: 25%;
    background-color:#7000ff;
    -webkit-filter: blur(150px);
    -o-filter: blur(150px);
    filter: blur(150px)
}

body:before {
    content: '';
    top: 27.5%;
    left: 23.9%;
    background-color:#cc00ff;
    -webkit-filter: blur(150px);
    -o-filter: blur(150px);
    filter: blur(150px)
}
body:after, body:before {
    width: 270px;
    height: 270px;
    border-radius: 100%;
    position: fixed;
}
.wrapper,header{padding:0 20px;max-width:1640px;width:100%;margin:0 auto;position:relative;z-index:10;}
.wrapper{max-width:1140px;}
.clr{display:block;clear:both;}

nav{width:100%;display:block;text-align:center;position:fixed;top:0;left:0;padding:20px 0;z-index:10;border-bottom: 1px solid transparent;}
.scl100 nav{
    border-bottom-color: rgba(255, 255, 255, .08);
}
.scl100 nav:after{
    transform: translateY(0);
}
nav:after{
    transform: translateY(-105%);
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    z-index:-1;
    background:#1b121d;
    background:-moz-linear-gradient(90deg, #1b121d 0, #120f2f 50%, #1b121d 100%);
    background:-webkit-linear-gradient(90deg, #1b121d 0, #120f2f 50%, #1b121d 100%);
    background:linear-gradient(90deg, #1b121d 0, #120f2f 50%, #1b121d 100%);
	top: 0;
    transition: .3s;
    left: 0;
	display: flex;flex-direction: row;justify-content:center;
}
nav a{padding:10px 5px;height:44px;line-height:44px;margin:0 15px;text-decoration:none;font-size:18px;position: relative;}
nav a.text:before {
    content: "";
    background: #cc00ff;
    display: block;
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 0;
    height: 2px;
    transition: .3s ease-in-out;
}
nav a:hover{
	color:#cc00ff;
}
nav a.text:hover:before{
    width: 100%;
}
nav a.img{color:transparent;text-indent:100px;width:50px;background-position:center center;background-repeat:no-repeat;background-size:30px 30px;overflow:hidden;}
nav a.img.en{background-image:url(/static/image/lang/en.png);}
nav a.img.ru{background-image:url(/static/image/lang/ru.png);}


header{display:block;padding-top:150px;z-index:100;}
section{display:block;margin:70px auto;position:relative;z-index:10;}
h1,h2{text-align:center;text-transform: uppercase;font-weight:500;position:relative;line-height:1.2;}
h1{font-size:34px;margin-bottom:50px;}
h2{font-size:30px;margin-bottom:20px;}
p{line-height:1.4;}
p.desc{margin:20px 0 30px 0;position:relative;padding-top:15px;text-align:center;}
p.desc:before{display:block;content:'';position:absolute;width:40px;height:1px;top:0;left:50%;margin-left:-20px;background-color: rgba(255, 255, 255, .5);}



#slider{width:100%;height:500px;}
#slider .swiper-slide{border-radius:20px;overflow:hidden;}
.slider-nav{margin:20px auto;height:54px;width:256px;}
.slider-nav button{width:78px;height:54px;cursor:pointer;background:transparent;display:block;float:left;position:relative;}
.slider-nav button span{background-color: rgba(255, 255, 255, .05);display:block;border:2px solid rgba(255, 255, 255, .5);position:absolute;border-radius:50%;}
.slider-nav .circle{top:21px;width:12px;height:12px;}
.slider-nav .circle.c1{left:0;}
.slider-nav .circle.c2{right:0;}
.slider-nav .arrow{top:10px;left:22px;width:34px;height:34px;}
.slider-nav .arrow:before{top:9px;position:absolute;content:'';display:block;width:9px;height:9px;transform: rotate(45deg);}
.slider-nav button.prev .arrow:before{left:11px;border-bottom:2px solid rgba(255, 255, 255, .5);border-left:2px solid rgba(255, 255, 255, .5);}
.slider-nav button.next .arrow:before{right:12px;border-top:2px solid rgba(255, 255, 255, .5);border-right:2px solid rgba(255, 255, 255, .5);}
.slider-nav .arrow:after{
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color:#cc00ff;
    opacity: .15;
    border-radius: 100%;
    box-shadow: 0 5px 20px;
    transition: .3s
}
.slider-nav button:hover .arrow:after{opacity:.5;}
.slider-nav .line{width:100px;height:54px;display:block;float:left;position:relative;}
.slider-nav .line:after{left:30px;top:26px;background:rgba(255, 255, 255, .5);height:1px;width:40px;display:block;position:absolute;content:'';}

#slider .item{
	user-select:none;
	display:block;
	text-decoration:none;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .5);
    transition: 1s;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#slider .img {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#slider .text{
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	background:rgba(0,0,0,.5);
	color:#fff;
	width:100%;
	text-align:center;
	padding:20px;
}
#slider .text h3{line-height:1.2;font-size:20px;}
#slider .text p{margin-top:10px;line-height:1.3;}

footer {
	text-align:center;
	display:block;
    padding: 34px 0 32px;
	border-top: 1px solid rgba(255, 255, 255, .08);
    background-color: rgba(10, 10, 10, .15);
}

#about,
#store{text-align:center;border-top: 1px solid rgba(255, 255, 255, .08);border-bottom: 1px solid rgba(255, 255, 255, .08);background-color: rgba(0, 0, 0, .15);padding:50px 0;}
.store_link{display:inline-block;text-decoration:none;width:300px;margin:10px;}
.store_link img{display:block;width:100%;}

.form{margin:0 auto;width:100%;max-width:600px;}
.form input,.form textarea{font-size:16px;margin-bottom:20px;height:60px;padding: 0 25px;display: block;width: 100%;border: 2px solid rgba(255, 255, 255, .15);border-radius: 5px;background-color: transparent;color: #fff;}
.form textarea{padding: 15px 25px;height: 200px;line-height:1.4;}
.form input:focus,.form textarea:focus{border:2px solid #cc00ff;}
.form p.error{color:#cc00ff;margin:-15px 0 20px 0;font-size:14px;text-align:left;font-weight:bold;text-shadow:none;display:none;}
.form p.error.contact_form_error{color:#cc00ff;margin:5px 0 0 0;font-size:16px;text-align:center;}
.btn{
	display: block;
    max-width: 100%;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    padding: 0 34px;
    position: relative;
    color: #ddd;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
	cursor:pointer;
    background: transparent;
}
.btn:before {
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    position: absolute;
    color:#cc00ff;
    content: '';
    opacity: .15;
    border-radius: 6px;
    box-shadow: 0 5px 20px;
}
.btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    border: 3px solid transparent;
    background: -moz-linear-gradient(45deg, #cc00ff, #7000ff, #cc00ff, #7000ff) border-box;
    background: -webkit-linear-gradient(45deg, #cc00ff, #7000ff, #cc00ff, #7000ff) border-box;
    background: linear-gradient(45deg, #cc00ff, #7000ff, #cc00ff, #7000ff) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    -webkit-mask-composite: source-out;
    mask-composite: exclude;
    background-size: 300% 300%;
    -webkit-animation: 2s infinite alternate animatedgradient;
    animation: 2s infinite alternate animatedgradient;
}
@keyframes animatedgradient {
    0%,100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}
button.btn{width:200px;}
button:disabled,
button[disabled]{opacity:.6;cursor:not-allowed;}

.success{text-align:center;opacity:0;z-index:-1;max-width:100%;width:450px;position:fixed;background:#1b121d;padding:30px;left:50%;top:50%;transform:translate(-50%,-50%);}
.success.show{opacity:1;z-index:20;}


.poster{border-radius: 10px;padding: 20px;border: 1px solid rgba(255, 255, 255, .5);background-color: rgba(255, 255, 255, .05);position: relative;}
.poster .img{width:100%;height:100%;border-radius: 10px;background-size: cover;background-position: center center;background-repeat: no-repeat;}
.overlay{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);}
.content{position:relative;z-index:3;padding:60px 0;}

#our_games p.desc{margin-bottom:50px;}
#our_games p.bottom{margin-top:50px;text-align:center;}

#zombie{width:100%;min-height:500px;position:relative;overflow:hidden;}
#zombie video{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.3}
.poster{width:30%;float:left;aspect-ratio:4/5;}
.poster .img{background-image:url(/static/image/main/slider/zombie.png);}
#zombie .text{width:70%;float:left;padding-left:50px;}
#zombie .text .btn{width:200px;}
#zombie h3{font-size:28px;}
#zombie p{margin:20px 0;}



.totop{z-index:-1;opacity:0;visibility:hidden;text-decoration:none;display:block;position:fixed;z-index:300;transform: rotate(-90deg);}
.totop .icon{float:left;display:block;width:40px;height:40px;border-radius:50%;background:#000;position:relative;}
.totop .icon:after{display:block;content:'';position:absolute;border-top:2px solid #ddd;border-right:2px solid #ddd;width:8px;height:8px;transform: rotate(45deg);left:13px;top:15px;}
.totop .icon:before{
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #cc00ff;
    opacity: .15;
    border-radius: 100%;
    box-shadow: 0 5px 20px;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: .3s;
}
.totop:hover .icon:before{opacity:.5;}
.totop .text{float:left;display:block;left:-20px;bottom:20px;height:40px;line-height:40px;padding-left:15px;}
.scl100 .totop{z-index:99;opacity:1;visibility:visible;}
.ru .totop{right:-15px;bottom:70px;}
.en .totop{right:-40px;bottom:90px;}

@media not screen, screen and (max-width:1400px){
	#slider{height:450px;}
}
@media not screen, screen and (max-width:1300px){
	#slider{height:400px;}
}
@media not screen, screen and (max-width:1200px){
	#slider{height:350px;}
}
@media not screen, screen and (max-width:1100px){
	#slider{height:300px;}
	#slider .text{padding:10px;}
	#slider .text p{display:none;}
	#slider .text h3{font-size:16px;}
}
@media not screen, screen and (max-width:1000px){
	*{font-size:16px;}
	h1 {font-size: 24px;}
	h2 {font-size: 20px;}
	h3 {font-size: 18px;}
	.store_link{width:240px;}
}
@media not screen, screen and (max-width:900px){
	#slider{height:250px;}
}
@media not screen, screen and (max-width:600px){
	#slider{height:350px;}
}