/* CSEE*/










html:before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    padding-top: 70px;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    background: url(/assets/ncase/img/cases/fon.png) no-repeat;
    background-position: top center;
    /* background: #080a11 url(/assets/new/images/bg.png) no-repeat; */
    background-position: top center;
    background-size: 100%;
    font-weight: 400;
    width: 100%;
    background-blend-mode: difference;
    /* background: #1e2d3a; */
    background: -moz-radial-gradient(top, ellipse cover, rgba(179, 229, 255, 0.9) -160%, #1c2b36 90%);
    /* background: -webkit-radial-gradient(top, ellipse cover, rgba(179, 229, 255, 0.9) -160%, #1c2b36 90%); */
    background: -o-radial-gradient(top, ellipse cover, rgba(179, 229, 255, 0.9) -160%, #1c2b36 90%);
    background: -ms-radial-gradient(top, ellipse cover, rgba(179, 229, 255, 0.9) -160%, #1c2b36 90%);
    /* background: radial-gradient(ellipse at top, rgba(179, 229, 255, 0.9) -160%, #223340 90%); */
    z-index: -2;
}













address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
q:before, q:after {
	content: '';
}
abbr, acronym {
	border: 0;
}
input::-ms-clear {
   display: none;
}

img[src=''] {
    opacity: 0;
}

/* * { box-sizing: border-box; }*/

input, textarea, select, button { outline: none; }

.clear {
	clear: both;
}


body {
	/*height: 100%;
	/*background: url(/assets/ncase/img/csfon.png) no-repeat fixed;
	/* background-size: cover; */
	/* font-size: 16px; */
}








.clock {
	width: 249px;
	height: 148px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	background: url(/assets/ncase/img/clock-day.png);
	text-align: center;
	padding-top: 62px;
	font-size: 24px;
	color: #fff;
	text-shadow: 2px 2px 1px #000;
	font-family: FrizQuadrataCTT;
}

.clock.night {
	background: url(/assets/ncase/img/clock-night.png);
}

#timer-symbol {
	opacity: 0;
	animation: timer_dots 1s ease infinite;
}

.clock-overlay-hover {
	position: absolute;   
	width: 165px;
    height: 87px;
    top: 53px;
    left: 39px;
    border-radius: 0px 0px 70px 80px;
}

.clock-tip {    
	position: absolute;
    width: 250px;
    height: 90px;
    background: rgba(0,0,0,0.7);
    border: 1px solid #e2cb8a;
    left: 0px;
    top: 164px;
    z-index: 1;
    font-size: 14px;
    color: #fff;
    font-family: SFUIDisplay;
    padding: 10px 15px;
    text-align: center;
    transition: .3s ease;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
}

.clock-overlay-hover:hover + .clock-tip {
	visibility: visible;
	opacity: 1;
    transform: translateY(0px);
}









.btn-steam {
	width: 180px;
	height: 45px;
	border: 2px solid #fff;
	border-radius: 50px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	margin-top: 43px;
	cursor: pointer;
}





.live {
	display: block;
	width: 100%;
	height: 150px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.live:before {    
	content: "";
    position: absolute;
    background: url(/assets/ncase/img/live-bg.png) center;
    max-width: 1920px;
    height: 150px;
    left: 0;
    right: 0;
    margin: auto;
}

.live-blocks-wrap {
	padding-top: 36px;
	font-size: 0;
	white-space: nowrap;
}


.live-block-hover-layer-back {
	position: absolute;
	background: url(/assets/ncase/img/live-hover-layer-back.png);
	width: 116px;
	height: 81px;
	opacity: 0;
	transition: .5s ease;
}
.live-block-hover-layer {
	position: absolute;
	background: url(/assets/ncase/img/live-hover-layer.png);
	width: 108px;
	height: 43px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
	transition: .5s ease;
}

.live-block-info {
	position: absolute;
	bottom: 10px;
	left: 10px;
	opacity: 0;
	transition: .5s ease;
}

.live-block-ava {
	width: 18px;
	border-radius: 50px;
	vertical-align: middle;
}

.live-block-nick {
	display: inline-block;
	color: #fff;
	font-size: 12px;
	font-family: SFUIDisplay;
	vertical-align: middle;
	margin-left: 5px;
}

.live-block-case-img {
	display: block;
	position: absolute;
	width: 65px;
	left: 0;
	right: 0;
	top: 10px;
	margin: auto;
	opacity: 0;
	transition: .5s ease;
}

.live-block:hover .live-block-hover-layer-back { opacity: 1; }
.live-block:hover .live-block-hover-layer { opacity: 1; }
.live-block:hover .live-block-info { opacity: 1; }
.live-block:hover .live-block-case-img { opacity: 1; }
.live-block:hover .live-block-q-line { opacity: 0; }
.live-block:hover .live-item-img { opacity: 0; }




.live-block-wrap {
	width: 0px;
	display: inline-block;
	animation: liveshowSpace .3s ease forwards;
}

.live-block-ani-1 {
	animation: liveshowWiggle .5s linear .3s forwards;
}

.live-block-ani-2 {
	opacity: 0;
	animation: liveshowScaleOpacity .5s ease-in .3s forwards;
}

@keyframes liveshowSpace {
	0% { width: 0; }
	100% { width: 152px; } /* margin: 0 18px; */
}

@keyframes liveshowWiggle {
	0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { transform: translateX(1px) rotate(3deg); }
	5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { transform: translateX(-1px) rotate(-3deg); }
	100% { transform: translateX(0px) rotate(0deg); }
}

@keyframes liveshowScaleOpacity {
	0% { transform: scale(1.5);opacity: 0; }
	100% { transform: scale(1);opacity: 1; }
}




.live-block-wrap.noani {
	width: 152px;
	animation: liveshowStatic 1s ease-out .5s forwards;
	opacity: 0;
}

@keyframes liveshowStatic {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.live-block-wrap.noani .live-block-ani-1 {
	animation: none;
}

.live-block-wrap.noani .live-block-ani-2 {
	animation: none;
	opacity: 1;
}




.live-block-q-line {
	position: absolute;
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
	animation: q_line 2s ease infinite;
	transition: .5s ease;
}

.live-item-img {
	position: absolute;
    width: 111px;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    transition: .5s ease;
}

.live-block {
	width: 116px;
	height: 81px;
	position: relative;
	margin: 0 auto;
	cursor: pointer;
}


.live-block:before {
	content: "";
	position: absolute;
	/* background: url(/assets/ncase/img/live-border.png); */
	margin-left: -57px;
	width: 116px;
	height: 81px;
}

.live-block:after {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/live-border-2.png);
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
}


@keyframes q_line {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-3px); }
	100% { transform: translateY(0px); }
}

.live-block-wrap.level-1 .live-block-q-line { background: url(/assets/ncase/img/live/live-q-line-1.png); }
.live-block-wrap.level-2 .live-block-q-line { background: url(/assets/ncase/img/live/live-q-line-2.png); }
.live-block-wrap.level-3 .live-block-q-line { background: url(/assets/ncase/img/live/live-q-line-3.png); }
.live-block-wrap.level-4 .live-block-q-line { background: url(/assets/ncase/img/live/live-q-line-4.png); }
.live-block-wrap.level-5 .live-block-q-line { background: url(/assets/ncase/img/live/live-q-line-5.png); }
.live-block-wrap.level-6 .live-block-q-line { background: url(/assets/ncase/img/live/live-q-line-6.png); }
.live-block-wrap.level-7 .live-block-q-line { background: url(/assets/ncase/img/live/live-q-line-7.png); }
.live-block-wrap.level-8 .live-block-q-line { background: url(/assets/ncase/img/live/live-q-line-8.png); }

.live-block-q-glare {
	position: absolute;
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
	z-index: 1;
	animation: q_glare 4s linear infinite;
}

.live-block-wrap.level-1 .live-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-1.png); }
.live-block-wrap.level-2 .live-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-2.png); }
.live-block-wrap.level-3 .live-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-3.png); }
.live-block-wrap.level-4 .live-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-4.png); }
.live-block-wrap.level-5 .live-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-5.png); }
.live-block-wrap.level-6 .live-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-6.png); }
.live-block-wrap.level-7 .live-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-7.png); }
.live-block-wrap.level-8 .live-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-8.png); }

@keyframes q_glare {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

.live-item-img {
	position: absolute;
    width: 111px;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}







.bslide {
	display: block;
	position: relative;
	height: 310px;
}

.bslide:after {
	position: absolute;
	content: "";
	background: url(/assets/ncase/img/bslide-decor-bot.png) center;
	width: 100%;
	height: 20px;
	bottom: -10px;
	margin-left: -50%;
}

.bslide-bg {
	position: absolute;
	left: 0;
	right: 0;
	height: 330px;
	margin: auto;
	top: -20px;
	visibility: visible;
	opacity: 1;
	transition: all .5s ease;
}

.bslide-bg.hide {
	visibility: hidden;
	opacity: 0;
}

.bslide-bg.n0 { background: url(/assets/ncase/img/bslide-0.jpg) no-repeat center; }
.bslide-bg.n1 { background: url(/assets/ncase/img/bslide-1.jpg) no-repeat center; }
.bslide-bg.n2 { background: url(/assets/ncase/img/bslide-2.jpg) no-repeat center; }
.bslide-bg.n3 { background: url(/assets/ncase/img/bslide-3.jpg) no-repeat center; }
.bslide-bg.n4 { background: url(/assets/ncase/img/bslide-4.jpg) no-repeat center; }
.bslide-bg.n5 { background: url(/assets/ncase/img/bslide-5.jpg) no-repeat center; }
.bslide-bg.n6 { background: url(/assets/ncase/img/bslide-6.jpg) no-repeat center; }

.bslide-nav {
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 16px;
}

.bslide-nav-btn {
	width: 10px;
	height: 10px;
	display: inline-block;
	margin: 0 7px;
	border: 1px solid white;
	border-radius: 50px;
	cursor: pointer;
	transition: all .3s ease;
}

.bslide-nav-btn.click {
	background: #fff;
}

/* Баннер - Выбери свою сторону */
.btn-bslide-more {
	color: #fff;
	border-radius: 50px;
	background: linear-gradient(45deg, #009cff, #ff315b);
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	margin: auto;
	top: 189px;
	width: 180px;
	height: 45px;
	font-family: SFUIDisplay;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.5s ease;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
}

.btn-bslide-more-hover {
	opacity: 0;
	background: linear-gradient(45deg, #ff315b, #009cff);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.8s ease;
}

.btn-bslide-more:hover .btn-bslide-more-hover {
	opacity: 1;
}

.btn-bslide-more span {
	position: relative;
	z-index: 1;
	display: table-cell;
	vertical-align: middle;
	width: 180px;
	height: 45px;
}

/* Баннер - День костяного дракона */
.bs-dragon {
	width: 1020px;
	margin: 0 auto;
}

.bs-dragon-textwrap {
	float: right;
}

.bs-dragon-title {
	font-family: FrizQuadrataCTT;
	font-size: 48px;
	color: #fff;
	text-align: center;
	margin-top: 50px;
}

.bs-dragon-text {
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #fff;
	text-align: center;
	margin-top: 25px;
}

/* Баннер - Бесплатные кейсы */

.bs-free-title {
	font-family: FrizQuadrataCTT;
	font-size: 48px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	margin-top: 90px;
}

.bs-free-text {
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #fff;
	text-align: center;
	margin-top: 22px;
}

/* Баннер - Пополняй баланс скинами */

.bs-refill {
	width: 1044px;
	margin: 0 auto;
}

.bs-refill-wrap {
	float: left;
}

.bs-refill-title {
	font-family: FrizQuadrataCTT;
	font-size: 48px;
	color: #fff;
	text-transform: uppercase;
	margin-top: 68px;
	line-height: 48px;
}

.btn-bslide-refill {
	border: none;
	color: #fff;
	border-radius: 50px;
	background: linear-gradient(45deg, #fc9d57, #dcab34);
	display: block;
	width: 180px;
	height: 45px;
	font-family: SFUIDisplay;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.5s ease;
	overflow: hidden;
	position: relative;
	margin-top: 43px;
}

.btn-bslide-refill-hover {
	opacity: 0;
	background: linear-gradient(45deg, #dcab34, #fc9d57);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.8s ease;
}

.btn-bslide-refill:hover .btn-bslide-refill-hover {
	opacity: 1;
}

.btn-bslide-refill span {
	position: relative;
	z-index: 1;
}

/* Баннер - Адская кухня */

.bs-hell {
	width: 1044px;
	margin: 0 auto;
	display: none;
}

.bs-hell-wrap {
	float: left;
}

.bs-hell-title {
	font-family: FrizQuadrataCTT;
	font-size: 48px;
	color: #fff;
	text-transform: uppercase;
	margin-top: 61px;
	line-height: 48px;
}

.bs-hell-text {
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #fff;
	margin-top: 18px;
}

.btn-bslide-hell {
	color: #fff;
	border-radius: 50px;
	background: linear-gradient(45deg, #fc9957, #dc3448);
	display: block;
	width: 180px;
	height: 45px;
	font-family: SFUIDisplay;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.5s ease;
	overflow: hidden;
	position: absolute;
	top: 220px;
    left: 272px;
    text-decoration: none;
    text-align: center;
}

.btn-bslide-hell-hover {
	opacity: 0;
	background: linear-gradient(45deg, #dc3448, #fc9957);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.8s ease;
}

.btn-bslide-hell:hover .btn-bslide-hell-hover {
	opacity: 1;
}

.btn-bslide-hell span {
	position: relative;
	z-index: 1;
	display: table-cell;
	vertical-align: middle;
	width: 180px;
	height: 45px;

}


/* Баннер - Хватит платить Гейбу */

.bs-steam-wrap {
	width: 1420px;
	margin: 0 auto;
	position: relative;
}

.bs-steam-title {
	position: absolute;
	top: 30px;
	font-family: FrizQuadrataCTT;
    font-size: 48px;
    color: #fff;
    text-transform: uppercase;
}

.bs-steam-text {
	font-family: SFUIDisplay;
	font-size: 20px;
	color: #fff;
	text-align: center;
	position: absolute;
	left: 110px;
	top: 265px;
}

/* Баннер - двигай указатель */
.bs-dragroulette {
	width: 1020px;
	margin: 0 auto;
}

.bs-dragroulette-textwrap {
	float: right;
}

.bs-dragroulette-title {
	font-family: FrizQuadrataCTT;
	font-size: 48px;
	color: #fff;
	text-align: center;
	margin-top: 30px;
}

.bs-dragroulette-text {
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #fff;
	text-align: center;
	margin-top: 5px;
}




.event {
	display: block;
	position: relative;
	height: 520px;
}

.progress {
	cursor: pointer;
	display: block;
	width: 694px;
	height: 39px;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}

.progress-red {
	background: url(/assets/ncase/img/progress-red.png);
	width: 694px;
	height: 39px;
	position: absolute;
}

.progress-blue-wrap {
	width: 567px;
	margin-left: 65px;
	position: relative;
}

.progress-blue {
	background: url(/assets/ncase/img/progress-blue.png);
	/*width: 694px;*/
	height: 39px;
	position: absolute;
	width: 50%;
	transition: all 2s ease;
}

.progress-popup {
	position: absolute;
    width: 600px;
    background: rgba(0,0,0,0.7);
    border: 1px solid #ff0000;
    left: 0px;
    right: 0;
    margin: auto;
    top: 60px;
    z-index: 1;
    font-size: 14px;
    color: #fff;
    font-family: SFUIDisplay;
    padding: 10px 15px;
    text-align: center;
    border-radius: 6px;
    transition: .3s ease;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
}
.progress-popup:before {
    content: "";
    position: absolute;
    width: 21px;
    height: 21px;
    background: #000;
    border-bottom: 1px solid #ff0000;
    border-left: 1px solid #ff0000;
    transform: rotate(135deg);
    top: -12px;
    left: 0;
    right: 0;
    margin: auto;
}
.progress:hover .progress-popup {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}

.event-decor {
	position: absolute;
	background: url(/assets/ncase/img/bslide-decor.png) center no-repeat;
	width: 100%;
	height: 520px;
	left: 0;
	right: 0;
	margin: auto;
}

.event-cases {
	position: absolute;
	max-width: 940px;
	left: 0;
	right: 0;
	margin: auto;
	top: 116px;
}

.e-case {
	display: block;
	width: 205px;
	float: left;
	margin: 0px 15px;
	text-decoration: none;
}

.e-case-name {
	text-align: center;
	font-family: FrizQuadrataCTT;
	color: #fff;
	font-size: 18px;
}

.e-case-content {
	width: 205px;
	height: 204px;
	margin-top: 15px;
	position: relative;
	cursor: pointer;
}

.e-case-content { animation: e_case_content 3s ease infinite; }
.e-case-content.ani-delay { animation: e_case_content 3s ease 1.5s infinite; }

@keyframes e_case_content {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0px); }
}

.e-case.middle {
	margin-top: 40px;
}

.e-case-glare {
	border-radius: 50px;
	width: 100px;
	height: 100px;
	box-shadow: 0px 0px 200px orange;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	transition: all 0.5s ease;
}

.e-case:hover .e-case-glare {
	opacity: 1;
}

.e-case-bg {
	position: absolute;
	width: 205px;
	height: 204px;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
}

.e-case-bg.n1 { background: url(/assets/ncase/img/cases/1-bg.png); }
.e-case-bg.n1.dawn {background: url(/assets/ncase/img/cases/1-bg-dawn.png);background-position: top center;background-size: 204px;}
.e-case-bg.n2 { background: url(/assets/ncase/img/cases/2-bg.png); }
.e-case-bg.n2.dawn {background: url(/assets/ncase/img/cases/2-bg-dawn.png) no-repeat;background-position: top center;background-size: 204px;}
.e-case-bg.n3 { background: url(/assets/ncase/img/cases/3-bg.png); }
.e-case-bg.n3.dawn {background: url(/assets/ncase/img/cases/3-bg-dawn.png);background-position: top center;background-size: 204px;}
.e-case-bg.n4 { background: url(/assets/ncase/img/cases/4-bg.png); }
.e-case-bg.n4.dawn {background: url(/assets/ncase/img/cases/4-bg-dawn.png);background-position: top center;background-size: 204px;}

.e-case-model {
	position: absolute;
	width: 205px;
	height: 204px;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
}

.e-case-model.n1 { background: url(/assets/ncase/img/cases/1-m.png);animation: e_case_model1 3s ease infinite; }
.e-case-model.n1.dawn {background: url(/assets/ncase/img/cases/1-m-dawn.png);background-position: top center;background-size: 204px;}
.e-case-model.n2 { background: url(/assets/ncase/img/cases/2-m.png);animation: e_case_model2 2s ease infinite;transform-origin: 70px 80px; }
.e-case-model.n2.dawn {background: url(/assets/ncase/img/cases/2-m-dawn.png);background-position: top center;background-size: 204px;}
.e-case-model.n3 { background: url(/assets/ncase/img/cases/3-m.png);animation: e_case_model3 4s ease infinite;transform-origin: 129px 97px; }
.e-case-model.n3.dawn {background: url(/assets/ncase/img/cases/3-m-dawn.png) no-repeat;background-position: top center;background-size: 204px;}
.e-case-model.n4 { background: url(/assets/ncase/img/cases/4-m.png);animation: e_case_model4 2s ease infinite;}
.e-case-model.n4.dawn {background: url(/assets/ncase/img/cases/4-m-dawn.png);background-position: top center;background-size: 204px;}

@keyframes e_case_model1 {
	0% { transform: translateY(0px); }
	45% { transform: translateY(-20px); }
	50% { transform: translateY(0px); }
	55% { transform: translateY(-10px); }
	60% { transform: translateY(0px); }
	65% { transform: translateY(-5px); }
	70% { transform: translateY(0px); }
	100% { transform: translateY(0px); }
}

@keyframes e_case_model2 {
	0% { transform: translate(0px, 0px); }
	15% { transform: translate(0px, -20px) rotate(-40deg); }
	30% { transform: translate(0px, 0px) rotate(0deg); }
	100% { transform: translate(0px, 0px); }
}

@keyframes e_case_model3 {
	0% { transform: rotate(0deg);  }
	15% { transform: rotate(-360deg); }
	100% { transform: rotate(-360deg); }
}

@keyframes e_case_model4 {
	0% { transform: scale(1) translate(0px, 0px);  }
	50% { transform: scale(1.1) translate(-10px, 5px);  }
	100% { transform: scale(1) translate(0px, 0px);  }
}

.e-case-price {
	text-align: center;
	color: #fff;
	position: absolute;
	width: 100%;
	bottom: 20px;
	font-family: FrizQuadrataCTT;
	font-size: 20px;
}








.event-cases-small {
	position: absolute;
	max-width: 944px;
	left: 0;
	right: 0;
	top: 378px;
	margin: auto;
}

.e-s-case {
	width: 116px;
	height: 115px;
	float: left;
	margin: 0px 60px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-family: SFUIDisplay;
	position: relative;
}

.e-s-case.middle {
	margin-top: 40px;
}

.e-s-case:before {
	position: absolute;
	content: "";
	width: 116px;
	height: 115px;
	left: 0;
	opacity: .5;
	transition: all .5s ease;
}

.e-s-case:hover:before {
	opacity: 1;
}

.e-s-case.n1:before { background: url(/assets/ncase/img/cases/small/1-bg.png); }
.e-s-case.n2:before { background: url(/assets/ncase/img/cases/small/2-bg.png); }
.e-s-case.n3:before { background: url(/assets/ncase/img/cases/small/3-bg.png); }
.e-s-case.n4:before { background: url(/assets/ncase/img/cases/small/4-bg.png); }

.e-s-case.n1.dawn:before { background: url(/assets/ncase/img/cases/small/1-bg-dawn.png); }
.e-s-case.n2.dawn:before { background: url(/assets/ncase/img/cases/small/2-bg-dawn.png); }
.e-s-case.n3.dawn:before { background: url(/assets/ncase/img/cases/small/3-bg-dawn.png); }
.e-s-case.n4.dawn:before { background: url(/assets/ncase/img/cases/small/4-bg-dawn.png); }

.e-s-case-a {
	display: table-cell;
	vertical-align: middle;
	width: 116px;
	height: 115px;
	text-decoration: none;
	color: #fff;
	position: relative;
	z-index: 1;
}

.e-s-case-a > img {
	vertical-align: middle;
}

.timer_dots { 
	opacity: 0;
	animation: timer_dots 1s ease infinite;
}

@keyframes timer_dots {
	0% { opacity: 0;  }
	50% { opacity: 1;  }
	100% { opacity: 0;  }
}




.title {
	display: block;
	background: url(/assets/ncase/img/title-bg.png);
	width: 647px;
	height: 48px;
	margin: 0 auto;
	margin-top: 50px;
	color: #fff;
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	text-align: center;
	text-transform: uppercase;
	padding-top: 15px;
}








.cases {
	display: block;
	max-width: 1175px;
	font-size: 0;
	margin: 0 auto;
	margin-top: 36px;
	text-align: center;
}

.case {
	width: 205px;
	display: inline-block;
	margin: 0 15px;
	text-decoration: none;
}

.case-title {
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #fff;
	text-align: center;
	padding-bottom: 17px;
	transition: all 0.5s ease;
	position: relative;
	z-index: 1;
}

.case-content {
	width: 205px;
	height: 204px;
	position: relative;
}

.case-content-img {
	position: absolute;
	transition: all 0.5s ease;
	display: block;
	width:100%;
}

.case-price {
	font-family: FrizQuadrataCTT;
	font-size: 20px;
	color: #fff;
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 11px;
}

.case-btn {
	border: 2px solid #ffd601;
	display: block;
	position: absolute;
	width: 150px;
	height: 45px;
	background: #000;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 50px;
	font-family: SFUIDisplay;
	font-size: 14px;
	color: #fff;
	opacity: 0;
	transform: scale(.7);
	transition: all .5s ease;
}

.case.hover .case-btn {
	opacity: 1;
	transform: scale(1);
}

.case-content-hover-bg {
	position: absolute;
	background: url(/assets/ncase/img/case-hover-bg.png);
	width: 500px;
	height: 500px;
	top: -148px;
	left: -147px;
	opacity: 0;
	transition: all 0.5s ease;
	transform: scale(.7);
}

.case-hover-layer {
	position: absolute;
	width: 205px;
	height: 244px;
	z-index: 1;
}

.case.hover .case-content-hover-bg {
	opacity: 1;
	transform: scale(1);
}

.case.hover .case-content-img {
	transform: scale(1.1);
}

.case.hover .case-title {
	transform: translateY(-14px);
}





.promo-dusk {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	margin-top: 30px;
}

.promo-dusk:before {
	position: absolute;
	content: "";
	background: url(/assets/ncase/img/promo/traxer.png);
	width: 903px;
	height: 340px;
	left: 0;
	z-index: -1;
}

.promo-dusk-desc {
	text-align: right;
	padding-top: 111px;
	padding-right: 30px;
}

.promo-dusk-title {
	font-family: FrizQuadrataCTT;
	font-size: 30px;
	color: #fff;
}

.promo-dusk-text {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	line-height: 25px;
	margin-top: 17px;
}

.promo-dusk-btn {
	width: 170px;
	height: 45px;
	border: 2px solid #0083ff;
	border-radius: 50px;
	color: #fff;
	font-size: 14px;
	font-family: SFUIDisplay;
	background: transparent;
	margin-top: 34px;
	cursor: pointer;
	transition: all .5s ease;
}

.promo-dusk-btn:hover {
	background: #0083ff;
}

.promo-dusk-items {
	background: url(/assets/ncase/img/promo/items-dusk.png) left;
	max-width: 1024px;
	height: 146px;
	margin-top: 11px;
	margin-left: 51px;
	padding-top: 48px;
	padding-left: 66px;
}

.promo-dusk-items-ico {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 2px solid white;
	border-radius: 50px;
	vertical-align: middle;
	position: relative;
	cursor: pointer;
}

.promo-dusk-items-ico:before {
	content: "";
	position: absolute;
	background-image: url(/assets/ncase/img/promo/ico-quest.png);
	width: 32px;
	height: 32px;
	top: -2px;
	left: -2px;
	animation: quest-ani 3s infinite ease;
	transform-origin: 50% 100%;
}
.promo-dusk-items-ico.main:before{
	    content: "";
    position: absolute;
    background-image: url(/assets/ncase/img/promo/ico-quest.png);
    width: 20px;
    background-size: 100%;
    height: 20px;
    top: -1.6px;
    left: -2px;
    animation: quest-ani 3s infinite ease;
    transform-origin: 50% 100%;
}

@keyframes quest-ani {
	0% { transform: translateY(0px); }
	10% { transform: translateY(-6px); }
	15% { transform: translateY(0px) scale(1.3, .9); }
	20% { transform: translateY(-7px); }
	25% { transform: translateY(0px) scale(1.2, .92); }
	30% { transform: translateY(-5px); }
	35% { transform: translateY(0px) scale(1.1, .95); }
	40% { transform: translateY(-3px); }
	45% { transform: translateY(0px); }
	100% { transform: translateY(0px); }
}

.promo-dusk-items-ico-text {
	position: absolute;
	width: 300px;
	background: #000;
    border: 2px solid #0083ff;
	color: #fff;    
	font-family: FrizQuadrataCTT;
    font-size: 14px;
	left: 60px;
    top: -35px;
	transition: .3s ease;
	opacity: 0;
	visibility: hidden;
	transform: translateX(20px);
}

.promo-dusk-items-ico-text > div {
	display: table-cell;
	height: inherit;
	vertical-align: middle;
	padding: 12px;
}

.promo-dusk-items-ico-text:before {
	content: "";
	position: absolute;
	width: 21px;
	height: 21px;
	background: #000;
	border-bottom: 2px solid #0083ff;
    border-left: 2px solid #0083ff;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	margin: auto;
	left: -13px;
}

.promo-dusk-items-ico:hover .promo-dusk-items-ico-text {
	visibility: visible;
	opacity: 1;
	transform: translateX(0px);
}



.promo-dusk-items-ico-text.red {
    border: 2px solid #f82f58;
	transform: translateX(-20px);
	left: -330px;
    top: -35px;
}
.promo-dusk-items-ico-text.red:before {
	border-bottom: 2px solid #f82f58;
    border-left: 2px solid #f82f58;    
    right: -13px;
    left: auto;
    transform: rotate(225deg);
}
.promo-dusk-items-ico-text.yellow {
    border: 1px solid #0083ff;
    transform: translateX(-20px);
    left: -202px;
    top: 39px;
}
.promo-dusk-items-ico-text.yellow:before {
	border-bottom: 1px solid #0083ff;
    border-left: 1px solid #0083ff;
    top: -116px;
    right: -133px;
    transform: rotate(134deg);
}
.promo-dusk-items-ico-text.red > div {
	text-align: left;
}












.promo-dusk-items-text {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	line-height: 23px;
}

.promo-or {
	background: url(/assets/ncase/img/promo/or-bg.png);
	width: 183px;
	height: 86px;
	margin: 0 auto;
	font-family: FrizQuadrataCTT;
	color: #fff;
	font-size: 30px;
	text-align: center;
	margin-top: 40px;
}

.promo-or > div {
	display: table-cell;
	vertical-align: middle;
	width: 183px;
	height: 86px;
}







.promo-dawn {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	margin-top: 32px;
	height: 500px;
}

.promo-dawn:before {
	position: absolute;
	content: "";
	background: url(/assets/ncase/img/promo/spectre.png);
	width: 951px;
	height: 327px;
	right: 0;
	z-index: -1;
}

.promo-dawn-desc {
	padding-top: 100px;
	padding-left: 30px;
}

.promo-dawn-title {
	font-family: FrizQuadrataCTT;
	font-size: 30px;
	color: #fff;
}

.promo-dawn-text {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	line-height: 25px;
	margin-top: 17px;
}

.promo-dawn-btn {
	width: 170px;
	height: 45px;
	border: 2px solid #f82f58;
	border-radius: 50px;
	color: #fff;
	font-size: 14px;
	font-family: SFUIDisplay;
	background: transparent;
	margin-top: 34px;
	cursor: pointer;
	transition: all .5s ease;
}

.promo-dawn-btn:hover {
	background: #f82f58;
}

.promo-dawn-items {
	background: url(/assets/ncase/img/promo/items-dawn.png) right;
	max-width: 1024px;
	height: 146px;
	margin-top: 11px;
	margin-left: 51px;
	text-align: right;
	padding-right: 35px;
	padding-top: 48px;
}

.promo-dawn-items-ico {
	vertical-align: middle;
}

.promo-dawn-items-text {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
	line-height: 23px;
}










.invt-btns {
	text-align: center;
	margin-top: 30px;
	font-size: 0;
}

.invt-section-btn {
	background-image: url(/assets/ncase/img/btn-timber.png);
	width: 196px;
	height: 50px;
	border: none;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	font-family: FrizQuadrataCTT;
	font-size: 14px;
	color: rgba(255,255,255,.3);
}

.invt-section-btn.active {
	background-image: url(/assets/ncase/img/btn-timber-active.png);
	color: #fff;
}

.invt-section-btn > div {
	display: table-cell;
	width: 196px;
	height: 50px;
	vertical-align: middle;
}








.invt-content {
	max-width: 1064px;
	margin: 0 auto;
	margin-top: 30px;
	text-align: center;
	font-size: 0;
}

.invt-block-wrap {
	position: relative;
	display: inline-block;
	width: 152px;
	margin-bottom: 35px;
}

.invt-block {
	width: 116px;
	height: 81px;
	position: relative;
	margin: 0 auto;
}
.invt-block-layer-click-js {
  position: absolute;
  width: 130px;
  height: 100px;
  opacity: .5;
  left: 0;
  right: 0;
  top: -10px;
  margin: auto;
  z-index: 2;
  cursor: pointer;
  border-radius: 10px;
}
.invt-block:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/live-border.png);
	width: 116px;
	height: 81px;
	left: 0;
}

.invt-block:after {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/live-border-2.png);
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
}

.invt-block-q-line {
	position: absolute;
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
}

.invt-block-wrap.level-1 .invt-block-q-line { background: url(/assets/ncase/img/live/live-q-line-1.png); }
.invt-block-wrap.level-2 .invt-block-q-line { background: url(/assets/ncase/img/live/live-q-line-2.png); }
.invt-block-wrap.level-3 .invt-block-q-line { background: url(/assets/ncase/img/live/live-q-line-3.png); }
.invt-block-wrap.level-4 .invt-block-q-line { background: url(/assets/ncase/img/live/live-q-line-4.png); }
.invt-block-wrap.level-5 .invt-block-q-line { background: url(/assets/ncase/img/live/live-q-line-5.png); }
.invt-block-wrap.level-6 .invt-block-q-line { background: url(/assets/ncase/img/live/live-q-line-6.png); }
.invt-block-wrap.level-7 .invt-block-q-line { background: url(/assets/ncase/img/live/live-q-line-7.png); }
.invt-block-wrap.level-8 .invt-block-q-line { background: url(/assets/ncase/img/live/live-q-line-8.png); }

.invt-block-q-glare {
	position: absolute;
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
	z-index: 1;
}

.invt-block-wrap.level-1 .invt-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-1.png); }
.invt-block-wrap.level-2 .invt-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-2.png); }
.invt-block-wrap.level-3 .invt-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-3.png); }
.invt-block-wrap.level-4 .invt-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-4.png); }
.invt-block-wrap.level-5 .invt-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-5.png); }
.invt-block-wrap.level-6 .invt-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-6.png); }
.invt-block-wrap.level-7 .invt-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-7.png); }
.invt-block-wrap.level-8 .invt-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-8.png); }

.invt-item-img {
	position: absolute;
    width: 111px;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}

.invt-block-price {
	position: absolute;
	border-radius: 50px;
	height: 20px;
	background: #000;
	color: #fff;
	font-size: 12px;
	font-family: SFUIDisplay;
	padding: 0px 8px;
	z-index: 1;
	top: -4px;
}

.invt-block-price > div {
	display: table-cell;
	height: 20px;
	vertical-align: middle;
}

.invt-block-rub {
	position: absolute;
	background: url(/assets/ncase/img/rub.png);
	width: 34px;
	height: 20px;
	background-size: cover;
	right: 0;
	top: -4px;
	z-index: 1;
	cursor: pointer;
}

/*.invt-block-get {
	position: absolute;
	display: block;
	border: none;
	width: 108px;
	height: 20px;
	border-radius: 10px 10px 0px 0px;
	background: rgba(0,0,0,.7);
	font-family: SFUIDisplay;
	font-size: 12px;
	color: #fff;
	bottom: 11px;
	left: 4px;
	cursor: pointer;
}

.invt-block-get > img {
	vertical-align: middle;
    margin-right: 6px;
    height: 11px;
    display: inline-block;
}

.invt-block-get > span {
	vertical-align: middle;
}

.invt-block-get-click-layer {
	position: absolute;
	width: 108px;
	height: 20px;
	border-radius: 10px 10px 0px 0px;
	bottom: 11px;
	left: 4px;
	cursor: pointer;
	z-index: 1;
}*/



.invt-btn-sell {
	border: none;
	position: absolute;
	background: url(/assets/ncase/img/btn-reward-sell.png);
	width: 116px;
	height: 27px;
	background-size: cover;
	top: -10px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	cursor: pointer;
	font-family: SFUIDisplay;
	font-size: 9px;
	color: #fff;
	text-transform: uppercase;
	padding-left: 10px;
	text-align: left;
}

.invt-btn-sell > span {
	font-size: 10px;
	text-transform: none;
}

.invt-btn-sell:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/btn-reward-sell-hover.png);
	width: 116px;
	height: 27px;
	background-size: cover;
	top: 0;
	left: 0;
	opacity: 0;
	transition: .3s ease;
	z-index: -1;
}

.invt-btn-sell:hover:before {
	opacity: 1;
}


.invt-btn-get-steam {
	border: none;
	position: absolute;
	background: url(/assets/ncase/img/btn-invt-send-steam.png);
	width: 116px;
	height: 29px;
	background-size: cover;
	bottom: -10px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	cursor: pointer;
	font-family: SFUIDisplay;
	font-size: 9px;
	color: #fff;
	text-transform: uppercase;
	padding-left: 10px;
	text-align: left;
}

.invt-btn-get-steam > span {
	font-size: 10px;
	text-transform: none;
}

.invt-block-status {
	position: absolute;
    top: -4px;
    right: 0;
    background: #000;
    width: 40px;
    height: 20px;
    z-index: 1;
    border-radius: 45px;
}

.invt-block-status:before {
	content: "";
    position: absolute;
    background: url(/assets/ncase/img/btn-down.png);
    height: 13px;
    width: 13px;
    background-size: cover;
    background-repeat: no-repeat;
    right: 0;
    left:0;
    top: 0px;
    bottom: 0;
    margin: auto;
}

.invt-block-status.sell:before {
	background-image: url(/assets/ncase/img/ico-rub.png);
	width: 7px;
	height: 10px;
}

.invt-block-status.process:before {
	background-image: url(/assets/ncase/img/ico-refresh.png);
	width: 13px;
	height: 13px;
}

.invt-block-status.warning:before {
	background-image: url(/assets/ncase/img/ico-warning.png);
	width: 12px;
	height: 10px;
}

.status-warning-window {
	position: absolute;
    width: 150px;
    background: #000;
    border: 1px solid #ffb200;
    color: #fff;
    font-family: SFUIDisplay;
    font-size: 12px;
    line-height: 16px;
	right: 7px;
    top: 35px;
    transition: .3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.status-warning-window > div {
    display: table-cell;
    height: inherit;
    vertical-align: middle;
    padding: 10px 15px;
    z-index: 1;
    position: relative;
}

.status-warning-window:before {
	content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: #000;
    border-bottom: 1px solid #ffb200;
    border-left: 1px solid #ffb200;
    transform: rotate(135deg);
    top: -9px;
    margin: auto;
    right: 3px;
}

.invt-block-status.warning:hover .status-warning-window {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}




.casenav-wrap {
	max-width: 100%;
	overflow: hidden;
}

.casenav {
	width: 755px;
	height: 204px;
	margin: 0 auto;
	margin-top: 23px;
	position: relative;
}

.casenav-curr {
	float: left;
}

.casenav-desc {
	float: left;
	width: 334px;
	margin-left: 30px;
}

.b-video-wrap {
	width: 100%;
    height: 330px;
    overflow: hidden;
    position: relative;
}

.b-video-wrap-2 {
	width: 1920px;
    height: 330px;
    position: absolute;
    left: -1920px;
    right: -1920px;
    margin: auto;
}

.casenav-desc-title {
	font-family: FrizQuadrataCTT;
	font-size: 30px;
	color: #fff;
	margin-top: 29px;
}

.casenav-desc-text {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	margin-top: 16px;
    line-height: 23px;
}

.casenav-info {
	/* float: left; */
	text-align: center;
	margin-left:20px;
}

.casenav-info-title {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	margin-top: 42px;
}

.casenav-info-title.second {
	margin-top: 21px;
}

.casenav-info-cost {
	font-family: FrizQuadrataCTT;
	font-size: 24px;
	color: #ffd800;
	margin-top: 4px;
}

.casenav-stars {
	background: url(/assets/ncase/img/rating-star-0.png);
	width: 119px;
	height: 18px;
	position: relative;
	margin-top: 8px;
}

.casenav-stars-fill {
	background: url(/assets/ncase/img/rating-star-1.png);
	position: absolute;
	content: "";
	height: 18px;
	left: 0;
	top: 0;
}

.casenav-prev {
	position: absolute;
	opacity: .5;
	width: 127px;
	height: 126px;
	left: -237px;
	top: 39px;
	transition: all .5s ease;
}

.casenav-prev:hover {
	opacity: 1;
}

.casenav-prev > img {
	width: 127px;
}

.casenav-next {
	position: absolute;
	opacity: .5;
	width: 127px;
	right: -237px;
	top: 39px;
	transition: all .5s ease;
}

.casenav-next:hover {
	opacity: 1;
}

.casenav-next > img {
	width: 127px;
}



.opencase-btn-wrap {
	width: 170px;
	margin: 0 auto;
	margin-top: 7px;
	position: relative;
}

.opencase-btn-open {
	width: 170px;
	height: 45px;
	border: 2px solid #ffd601;
	background: transparent;
	border-radius: 50px;
	font-family: SFUIDisplay;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: all .5s ease;
}

.opencase-btn-open:hover {
	background: #ffd601;
	color: #000;
}

.opencase-btn-open.border-red {
	border-color: red;
}

.opencase-btn-demo {
	position: absolute;
	width: 80px;
	height: 35px;
	border: 2px solid #4d4d4d;
	background: transparent;
	border-radius: 50px;
	font-family: SFUIDisplay;
	color: #4d4d4d;
	font-size: 14px;
	top: 5px;
	right: -98px;
	cursor: pointer;
	transition: all .5s ease;
}

.opencase-btn-demo:hover {
	background: #4d4d4d;
	color: #fff;
}



.op {
	width: 100%;
	height: 203px;
	position: relative;
	margin-top: 74px;
}

.op-bg {
	position: absolute;
	content: "";
	background: url(/assets/ncase/img/open-case-bg.png) center;
	width: 100%;
	height: 346px;
	top: -76px;
}

.op:before {
	position: absolute;
	content: "";
	background-image: url(/assets/ncase/img/opencase-frame-left.png);
	width: 83px;
	height: 199px;
	left: 0;
	top: 2px;
	z-index: 1;
}

.op:after {
	position: absolute;
	content: "";
	background-image: url(/assets/ncase/img/opencase-frame-right.png);
	width: 83px;
	height: 199px;
	right: 0;
	top: 2px;
	z-index: 1;
}

.op-frame-shadow {
	position: absolute;
	background: url(/assets/ncase/img/opencase-shadow.png) center;
	width: 100%;
	height: 106px;
	z-index: 1;
}

.op-frame-top {
	position: absolute;
	background: url(/assets/ncase/img/opencase-frame-top.png) center;
	width: 100%;
	height: 20px;
	top: -9px;
	z-index: 1;
}

.op-frame-bottom {
	position: absolute;
	background: url(/assets/ncase/img/opencase-frame-bottom.png) center;
	width: 100%;
	height: 20px;
	bottom: -8px;
	z-index: 1;
}

.op-middle-wrap {
	width: 100%;
	overflow: hidden;
    height: 313px;
    position: relative;
    top: -57px;
}

.op-middle {
	width: 302px;
	height: 202px;
	font-size: 0;
	/*border: 1px solid red;*/
	white-space: nowrap;
	margin: 0 auto;
	position: relative;
    margin-top: 57px;
}

.op-middle-drag-arrow {
	position: absolute;
	width: 320px;
	height: 253px;
	top: -27px;
	left: -10px;
	z-index: 1;
	transform: translateX(0px);
	cursor: pointer;
}

.op-middle-drag-arrow-bg {
	width: 320px;
	height: 253px;
	position: absolute;
	z-index: 1;
}

.op-middle-drag-arrow-bg-top {
	background-image: url(/assets/ncase/img/opencase-frame.png);
	width: 320px;
	height: 140px;
	position: absolute;
	transition: all 1.5s ease;
	top: 0;
}

.op-middle-drag-arrow-bg-bot {
	background: url(/assets/ncase/img/opencase-frame.png) 0px 71px;
    width: 320px;
    height: 70px;
    position: absolute;
    bottom: 0;
	transition: all 1.5s ease;
}

.op-middle-drag-arrow-bg.open .op-middle-drag-arrow-bg-top { top: -30px; }
.op-middle-drag-arrow-bg.open .op-middle-drag-arrow-bg-bot { bottom: -30px; }



.op-sparks {
	position: absolute;
}

.op-spark {
	width: 300px;
	height: 300px;
	position: absolute;
	top: -100px;
	opacity: 0;
}

.op-spark.n1 { background: url(/assets/ncase/img/sparks/1.png); }
.op-spark.n2 { background: url(/assets/ncase/img/sparks/2.png); }
.op-spark.n3 { background: url(/assets/ncase/img/sparks/3.png); }

.op-spark.show {
	opacity: 1;
}




.op-ani > img {
	width: 300px;
	margin: 0px 1px;
}

.op-ani {
	transform: translateX(-3020px);
	/*transition: all 12s cubic-bezier(0.45, 0.01, 0.15, 1);*/
}
.op-ani.go {
	transform: translateX(-19630px);
}

.op-noreward {
	position: absolute;
	transition: all .5s ease;
}

.op.reward .op-noreward {
	opacity: 0;
}

.op-reward {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease;
}

.op.reward .op-reward {
	opacity: 1;
	visibility: visible;
}

.op-reward > img {
	width: 300px;
	margin: 0px 1px;
	position: absolute;
}
.game-trade-out:before {
    position: absolute;
    content: "";
    z-index: 1;
    background: url(/assets/ncase/img/game-item-bg-border.png);
    width: 292px;
    height: 206px;
}

.opencase-title {
	margin-top: 55px;
	margin-bottom: 10px;	
}





.reward-panel-left {
	position: absolute;
	width: 312px;
	left: -314px;
    z-index: 1;
}

.btn-reward-retry {
	border: none;
	background: url(/assets/ncase/img/btn-reward-retry.png);
	width: 177px;
	height: 38px;
	font-family: SFUIDisplay;
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50px;
    cursor: pointer;
}

.op.isBonus .btn-reward-retry { display: none; }

.btn-reward-retry > div {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	text-align: center;
	line-height: 38px;
}

.btn-reward-retry:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/btn-reward-retry-hover.png);
	width: 177px;
	height: 38px;
	left: 0;
	top: 0;
	opacity: 0;
    transition: .3s ease;
}

.btn-reward-retry:hover:before {
	opacity: 1;
}

.btn-reward-retry-text {
	position: absolute;
	width: 100%;
	top: 92px;
	font-family: SFUIDisplay;
    color: #afafaf;
    font-size: 10px;
    text-align: center;
}

.op.isBonus .btn-reward-retry-text { display: none; }

.reward-btns-bott-wrap {
	position: absolute;
	top: 120px;
	right: 30px;
	width: 274px;
}

.op.isBonus .reward-btns-bott-wrap { display: none; }

.btn-reward-sell {
	border: none;
	background: url(/assets/ncase/img/btn-reward-sell.png);
	width: 172px;
	height: 40px;
	font-family: SFUIDisplay;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
	position: absolute;
	left: 0;
    z-index: 2;
}

.btn-reward-sell > div {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
    padding-left: 20px;
	line-height: 40px;
}

.btn-reward-sell:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/btn-reward-sell-hover.png);
	width: 172px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
    transition: .3s ease;
}

.btn-reward-sell:hover:before {
	opacity: 1;
}

.btn-reward-steam {
	display: inline-block;
	text-decoration: none;
	background: url(/assets/ncase/img/btn-reward-steam.png);
	width: 162px;
	height: 40px;
	font-family: SFUIDisplay;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
	position: absolute;
	right: 0;
	transition: .3s ease;
}

.btn-reward-steam:hover {
	right: -15px;
}

.btn-reward-steam > div {
	position: absolute;
	z-index: 1;
	left: -50px;
	top: 0;
	width: 100%;
	text-align: right;
	padding-right: 38px;
	line-height: 40px;
}

.btn-reward-steam:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/btn-reward-steam-hover.png);
	width: 162px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
    transition: .3s ease;
}

.btn-reward-steam:hover:before {
	opacity: 1;
}

.btn-reward-retry-text-2 {
	position: absolute;
	width: 100%;
	top: 167px;
	font-family: SFUIDisplay;
    color: #afafaf;
    font-size: 10px;
    text-align: center;
}

.op.isBonus .btn-reward-retry-text-2 { display: none; }




.reward-panel-right {
	position: absolute;
	width: 320px;
    left: 327px;
    z-index: 1;
}

.op.isBonus .reward-panel-right {
	display: none;
}

.reward-panel-title {
	font-family: FrizQuadrataCTT;
	font-size: 14px;
	color: #ffd800;
	text-align: center;
	position: absolute;
	width: 100%;
	top: 20px;
}

.reward-panel-itemname {
	font-family: FrizQuadrataCTT;
	font-size: 30px;
	color: #fff;
	text-align: center;
	width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
	width: 100%;
	top: 35px;
}

.reward-panel-itemname.fz-16 {
	font-size: 16px;
}

.reward-panel-title.left { display: none; }
.reward-panel-itemname.left { display: none; }
.op.isBonus .reward-panel-title.left { display: block; }
.op.isBonus .reward-panel-itemname.left { display: block; }


.reward-btn-hell {
	color: #fff;
	border-radius: 50px;
	background: linear-gradient(45deg, #fc9957, #dc3448);
	display: block;
	width: 180px;
	height: 45px;
	font-family: SFUIDisplay;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.5s ease;
	overflow: hidden;
    text-decoration: none;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 120px;
}

.reward-btn-hell-hover {
	opacity: 0;
	background: linear-gradient(45deg, #dc3448, #fc9957);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.8s ease;
}

.reward-btn-hell:hover .reward-btn-hell-hover {
	opacity: 1;
}

.reward-btn-hell span {
	position: relative;
	z-index: 1;
	display: table-cell;
	vertical-align: middle;
	width: 180px;
	height: 45px;

}


.reward-bonus-btn-wrap {
	display: none;
	position: absolute;
	width: 100%;
	text-align: center;
	top: 98px;
}

.op.isBonus .reward-bonus-btn-wrap {
	display: block;
}

.reward-bonus-btn {
	padding: 0px 15px;
    height: 45px;
    border: 2px solid #ffd601;
    background: transparent;
    border-radius: 50px;
    font-family: SFUIDisplay;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all .5s ease;
}

.reward-bonus-btn:hover {
    background: #ffd601;
    color: #000;
}


/*.reward-panel-title {
	font-family: FrizQuadrataCTT;
	font-size: 14px;
	color: #ffd800;
	margin-top: 39px;
}

.reward-panel-itemname {
	font-family: FrizQuadrataCTT;
	font-size: 30px;
	color: #fff;
}

.reward-panel-itemname.fz-16 {
	font-size: 16px;
}

.reward-panel-btns {
	margin-top: 18px;
}

.reward-panel-btn {
	width: 100px;
	height: 45px;
	border-radius: 50px;
	font-family: SFUIDisplay;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	transition: all .5s ease;
	background: transparent;
}

.reward-panel-btn.get { border: 2px solid #06cbff; }
.reward-panel-btn.get:hover { background: #06cbff; }

.reward-panel-btn.sell { border: 2px solid #ffcb09;margin-left: 10px;width: 165px; }
.reward-panel-btn.sell:hover { background: #ffcb09;color: #000; }

*/



.op-block-wrap {
	display: inline-block;
	width: 152px;
	margin-bottom: 35px;
}

.op-block {
	width: 116px;
	height: 81px;
	position: relative;
	background-color: #ffffffd6;
	margin: 0 auto;
}

.op-block:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/live-border.png);
	width: 116px;
	height: 81px;
	left: 0;
}

.op-block:after {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/live-border-2.png);
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
}

.op-block-q-line {
	position: absolute;
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
}

.op-block-wrap.level-1 .op-block-q-line { background: url(/assets/ncase/img/live/live-q-line-1.png); }
.op-block-wrap.level-2 .op-block-q-line { background: url(/assets/ncase/img/live/live-q-line-2.png); }
.op-block-wrap.level-3 .op-block-q-line { background: url(/assets/ncase/img/live/live-q-line-3.png); }
.op-block-wrap.level-4 .op-block-q-line { background: url(/assets/ncase/img/live/live-q-line-4.png); }
.op-block-wrap.level-5 .op-block-q-line { background: url(/assets/ncase/img/live/live-q-line-5.png); }
.op-block-wrap.level-6 .op-block-q-line { background: url(/assets/ncase/img/live/live-q-line-6.png); }
.op-block-wrap.level-7 .op-block-q-line { background: url(/assets/ncase/img/live/live-q-line-7.png); }
.op-block-wrap.level-8 .op-block-q-line { background: url(/assets/ncase/img/live/live-q-line-8.png); }

.op-block-q-glare {
	position: absolute;
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
	z-index: 1;
}

.op-block-wrap.level-1 .op-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-1.png); }
.op-block-wrap.level-2 .op-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-2.png); }
.op-block-wrap.level-3 .op-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-3.png); }
.op-block-wrap.level-4 .op-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-4.png); }
.op-block-wrap.level-5 .op-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-5.png); }
.op-block-wrap.level-6 .op-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-6.png); }
.op-block-wrap.level-7 .op-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-7.png); }
.op-block-wrap.level-8 .op-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-8.png); }

.op-item-img {
	position: absolute;
    width: 111px;
    left: 4px;
    right: 0;
    margin: auto;
    top: -6px;
    bottom: 0;
}








.game-bg {
	background: url(/assets/ncase/img/game-bg.jpg) center no-repeat;
	width: 100%;
	height: 330px;
}

.game-bg-content {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	padding: 0 30px;
}

.game-bg-left {
	position: absolute;
}
.game-trade-in:before {
    position: absolute;
    content: "";
    background: url(/assets/ncase/img/game-item-bg-border.png);
    width: 292px;
    height: 206px;
    z-index: 1;
}
.game-bg-title {
	font-family: FrizQuadrataCTT;
	font-size: 48px;
	color: #fff;
	margin-top: 100px;
}
.game-bg-text {
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #fff;
	margin-top: 13px;
}
.game-trade-img {
    position: absolute;
    display: block;
    width: 285px;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
}

.game-trade-img.show {
    opacity: 1;
}
.game-bg-right {
	position: absolute;
	right: 173px;
	top: 64px;
	background: url(/assets/ncase/img/trade-img.png);
	width: 437px;
	height: 200px;
}

.game-bg-right-text {
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #fff;
	position: absolute;
	white-space: nowrap;
}

.game-bg-right-text.n1 { left: 99px;top: 22px; }
.game-bg-right-text.n2 { left: 246px;top: 132px; }
.game-bg-right-text.n3 { left: 447px;top: 52px; }




.game {
	max-width: 1140px;
	margin: 0 auto;
	margin-top: 20px;
}
/*
.game-history {
	width: 293px;
	float: left;
}

.game-hist-block {
	border: 1px solid rgba(255,255,255,.15);
	width: 263px;
	height: 148px;
	border-radius: 10px;
	position: relative;
	margin-bottom: 6px;
}
*/
.game-history {
  width: 293px;
  float: left;
}

.game-hist-block-wrap {
  height: 0;
  animation: .3s fadeInGameHistBlockWrap forwards;
}

@keyframes fadeInGameHistBlockWrap {
  0% { height: 0; }
  100% { height: 154px; }
}

.game-hist-block {
  border: 1px solid rgba(255,255,255,.15);
  width: 263px;
  height: 148px;
  border-radius: 10px;
  position: relative;
  opacity: 0;
  animation: .3s fadeInGameHistBlock .3s forwards;
}

@keyframes fadeInGameHistBlock {
  0% { opacity: 0;  }
  100% { opacity: 1;  }
}


.game-hist-block-wrap.hide .game-hist-block {
  animation: .3s fadeOutGameHistBlock forwards;
}

@keyframes fadeOutGameHistBlock {
  0% { opacity: 1;  }
  100% { opacity: 0;  }
}





.gh-block-wrap {
	display: inline-block;
}

.gh-block {
	width: 116px;
	height: 81px;
	position: relative;
	margin: 0 auto;
}

.gh-block:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/live-border.png);
	width: 116px;
	height: 81px;
	left: 0;
}

.gh-block:after {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/live-border-2.png);
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
}

.gh-block-q-line {
	position: absolute;
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
}

.gh-block-wrap.level-1 .gh-block-q-line { background: url(/assets/ncase/img/live/live-q-line-1.png); }
.gh-block-wrap.level-2 .gh-block-q-line { background: url(/assets/ncase/img/live/live-q-line-2.png); }
.gh-block-wrap.level-3 .gh-block-q-line { background: url(/assets/ncase/img/live/live-q-line-3.png); }
.gh-block-wrap.level-4 .gh-block-q-line { background: url(/assets/ncase/img/live/live-q-line-4.png); }
.gh-block-wrap.level-5 .gh-block-q-line { background: url(/assets/ncase/img/live/live-q-line-5.png); }
.gh-block-wrap.level-6 .gh-block-q-line { background: url(/assets/ncase/img/live/live-q-line-6.png); }
.gh-block-wrap.level-7 .gh-block-q-line { background: url(/assets/ncase/img/live/live-q-line-7.png); }
.gh-block-wrap.level-8 .gh-block-q-line { background: url(/assets/ncase/img/live/live-q-line-8.png); }

.gh-block-q-glare {
	position: absolute;
	width: 160px;
	height: 120px;
	top: -20px;
	left: -22px;
	z-index: 1;
}

.gh-block-wrap.level-1 .gh-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-1.png); }
.gh-block-wrap.level-2 .gh-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-2.png); }
.gh-block-wrap.level-3 .gh-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-3.png); }
.gh-block-wrap.level-4 .gh-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-4.png); }
.gh-block-wrap.level-5 .gh-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-5.png); }
.gh-block-wrap.level-6 .gh-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-6.png); }
.gh-block-wrap.level-7 .gh-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-7.png); }
.gh-block-wrap.level-8 .gh-block-q-glare { background: url(/assets/ncase/img/live/live-q-glare-8.png); }

.gh-item-img {
	position: absolute;
    width: 111px;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}

.gh-block-wrap.back {
	position: absolute;
	top: 19px;
	left: 18px;
	opacity: .5;
}

.gh-block-wrap.front {
	position: absolute;
	bottom: 18px;
	right: 18px;
}

.gh-glare {
	position: absolute;
	width: 263px;
	height: 148px;
}

.gh-glare.level-1 { background-image: url(/assets/ncase/img/hist-item-glare/1.png); }
.gh-glare.level-2 { background-image: url(/assets/ncase/img/hist-item-glare/2.png); }
.gh-glare.level-3 { background-image: url(/assets/ncase/img/hist-item-glare/3.png); }
.gh-glare.level-4 { background-image: url(/assets/ncase/img/hist-item-glare/4.png); }
.gh-glare.level-5 { background-image: url(/assets/ncase/img/hist-item-glare/5.png); }
.gh-glare.level-6 { background-image: url(/assets/ncase/img/hist-item-glare/6.png); }
.gh-glare.level-7 { background-image: url(/assets/ncase/img/hist-item-glare/7.png); }
.gh-glare.level-8 { background-image: url(/assets/ncase/img/hist-item-glare/8.png); }

.gh-galre {
	position: absolute;
	background-image: url(/assets/ncase/img/trade-arrow.png);
	width: 263px;
	height: 148px;
}

.gh-info {
	position: absolute;
	left: 12px;
	bottom: 12px;
	font-size: 0;
}

.gh-ava {
	width: 20px;
	border-radius: 100%;
	vertical-align: middle;
}

.gh-nick {
	display: inline-block;
	font-family: SFUIDisplay;
	font-size: 12px;
	color: #fff;
	vertical-align: middle;
	margin-left: 10px;
}





.game-trade-r-wrap {
  transform: rotate(0deg);
  position: relative;
  width: 129px;
  height: 129px;
  top: -16px;
  left: -16px;
}

.game-trade-r {
  width: 129px;
  height: 129px;
  position: absolute;
  transition: 1.5s ease;
}

.game-trade-r > div {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50px;
  transition: .5s ease;
  transform: scale(0);
  opacity: 0;
}

.game-trade-r:nth-child(1) > div { background: linear-gradient(0deg, #31a5ff, #003cff); }
.game-trade-r:nth-child(2) > div { background: linear-gradient(0deg, #31d6ff, #006cff); }
.game-trade-r:nth-child(3) > div { background: linear-gradient(0deg, #31ffb4, #00baff); }
.game-trade-r:nth-child(4) > div { background: linear-gradient(0deg, #36ff31, #00ffa2); }
.game-trade-r:nth-child(5) > div { background: linear-gradient(0deg, #44ff31, #00ff5a); }
.game-trade-r:nth-child(6) > div { background: linear-gradient(0deg, #a5ff31, #00ff0c); }
.game-trade-r:nth-child(7) > div { background: linear-gradient(0deg, #a5ff31, #00ff0c); }
.game-trade-r:nth-child(8) > div { background: linear-gradient(0deg, #d6ff31, #c6ff00); }
.game-trade-r:nth-child(9) > div { background: linear-gradient(0deg, #ffee31, #8aff00); }
.game-trade-r:nth-child(10) > div { background: linear-gradient(0deg, #d6ff31, #c6ff00); }




.game-trade-r:nth-child(1) { transform: rotate(0deg); }
.game-trade-r:nth-child(2) { transform: rotate(30deg); }
.game-trade-r:nth-child(3) { transform: rotate(60deg); }
.game-trade-r:nth-child(4) { transform: rotate(90deg); }
.game-trade-r:nth-child(5) { transform: rotate(120deg); }
.game-trade-r:nth-child(6) { transform: rotate(150deg); }
.game-trade-r:nth-child(7) { transform: rotate(180deg); }
.game-trade-r:nth-child(8) { transform: rotate(210deg); }
.game-trade-r:nth-child(9) { transform: rotate(240deg); }
.game-trade-r:nth-child(10) { transform: rotate(270deg); }

.game-trade-r.show:nth-child(1) { transform: rotate(100deg); }
.game-trade-r.show:nth-child(2) { transform: rotate(130deg); }
.game-trade-r.show:nth-child(3) { transform: rotate(160deg); }
.game-trade-r.show:nth-child(4) { transform: rotate(190deg);}
.game-trade-r.show:nth-child(5) { transform: rotate(220deg); }
.game-trade-r.show:nth-child(6) { transform: rotate(250deg); }
.game-trade-r.show:nth-child(7) { transform: rotate(280deg); }
.game-trade-r.show:nth-child(8) { transform: rotate(310deg); }
.game-trade-r.show:nth-child(9) { transform: rotate(340deg); }
.game-trade-r.show:nth-child(10) { transform: rotate(370deg); }

.game-trade-r.hide:nth-child(1) { transform: rotate(100deg); }
.game-trade-r.hide:nth-child(2) { transform: rotate(130deg); }
.game-trade-r.hide:nth-child(3) { transform: rotate(160deg); }
.game-trade-r.hide:nth-child(4) { transform: rotate(190deg); }
.game-trade-r.hide:nth-child(5) { transform: rotate(220deg); }
.game-trade-r.hide:nth-child(6) { transform: rotate(250deg); }
.game-trade-r.hide:nth-child(7) { transform: rotate(280deg); }
.game-trade-r.hide:nth-child(8) { transform: rotate(310deg); }
.game-trade-r.hide:nth-child(9) { transform: rotate(340deg); }
.game-trade-r.hide:nth-child(10) { transform: rotate(370deg); }

.game-trade-r.show:nth-child(1) > div { transform: scale(.15);opacity: 1; }
.game-trade-r.show:nth-child(2) > div { transform: scale(.25);opacity: 1; }
.game-trade-r.show:nth-child(3) > div { transform: scale(.35);opacity: 1; }
.game-trade-r.show:nth-child(4) > div { transform: scale(.45);opacity: 1; }
.game-trade-r.show:nth-child(5) > div { transform: scale(.55);opacity: 1; }
.game-trade-r.show:nth-child(6) > div { transform: scale(.65);opacity: 1; }
.game-trade-r.show:nth-child(7) > div { transform: scale(.75);opacity: 1; }
.game-trade-r.show:nth-child(8) > div { transform: scale(.85);opacity: 1; }
.game-trade-r.show:nth-child(9) > div { transform: scale(.95);opacity: 1; }
.game-trade-r.show:nth-child(10) > div { transform: scale(1);opacity: 1; }
.game-content {
	width: 843px;
	float: left;
}

.game-content-trade {
  position: relative;
  height: 206px;
}

.game-trade-in {
  background-image: url(/assets/ncase/img/game-item-bg-0.png);
  width: 292px;
  height: 206px;
  position: absolute;
  left: 0;
}

.game-trade-in:before {
  position: absolute;
  content: "";
  background: url(/assets/ncase/img/game-item-bg-border.png);
  width: 292px;
  height: 206px;
  z-index: 1;
}

.game-trade-img {
  position: absolute;
  display: block;
  width: 285px;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
}

.game-trade-img.show {
  opacity: 1;
}

.game-trade-in > div {
  width: 292px;
  height: 206px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: FrizQuadrataCTT;
  font-size: 16px;
  color: #fff;
}

.game-trade-out {
  background-image: url(/assets/ncase/img/game-item-bg-1.png);
  width: 292px;
  height: 206px;
  position: absolute;
  right: 0;
}

.game-trade-out:before {
  position: absolute;
  content: "";
  background: url(/assets/ncase/img/game-item-bg-border.png);
  width: 292px;
  height: 206px;
  z-index: 1;
}

.game-trade-out:before {
  position: absolute;
  content: "";
  background: url(/assets/ncase/img/game-item-bg-border.png);
  width: 292px;
  height: 206px;
}

.game-trade-out > div {
  width: 292px;
  height: 206px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: FrizQuadrataCTT;
  font-size: 16px;
  color: #fff;
}

.game-trade-rotate {
  height: 97px;
  width: 97px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 51px;
  z-index: -1;
  opacity: 0;
  transform: scale(0);
  transition: .5s ease;
}

.game-trade-rotate.show {
  opacity: 1;
  transform: scale(1);
}

.game-trade-rotate:before {
  position: absolute;
  content: "";
  background-image: url(/assets/ncase/img/game-rotate-layer.png);
  width: 113px;
  height: 115px;
  top: 0;
  left: -8px;
}

.game-trade-success {
  background: url(/assets/ncase/img/game-ico-success.png);
  width: 30px;
  height: 30px;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0);
  transition: .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.game-trade-fail {
  background: url(/assets/ncase/img/game-ico-fail.png);
  width: 30px;
  height: 30px;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0);
  transition: .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.game-trade-success.show, .game-trade-fail.show {
  opacity: 1;
  transform: scale(1);
}

.game-trade-rotate-arrow-wrap {
  position: absolute;
  width: 30px;
  height: 32px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0);
  transition: 1s ease-out;
}

.game-trade-rotate-arrow-wrap.show {
  opacity: 1;
  transform: scale(1);
}

.game-trade-rotate-arrow {
  position: absolute;
  background-image: url(/assets/ncase/img/game-rotate-arrow.png);
  width: 30px;
  height: 32px;
  animation: game-trade-rotate-arrow-ani 1s linear infinite;
}

@keyframes game-trade-rotate-arrow-ani {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.game-ui {
    margin-top: 31px;
}
.game-ui-chance {
	float: left;
	font-family: SFUIDisplay;
	font-size: 14px;
	color: #7e7e7e;
	text-transform: uppercase;
}

.game-ui-chance-text {
}

.game-ui-chance-text span {
	color: #ffc80b;
	font-weight: bold;
}

.game-ui-chance-text.second {
	margin-top: 13px;
}

.game-ui-btns {
	float: right;
	font-size: 0;
}

.game-ui-btn-big {
	font-family: SFUIDisplay;
	font-size: 14px;
	color: #fff;
	width: 170px;
	height: 45px;
	border: 2px solid #ffd800;
	border-radius: 50px;
	background: transparent;
	transition: all .5s ease;
	cursor: pointer;
}

.game-ui-btn-big:hover {
	background: #ffd800;
	color: #000;
}

.game-ui-btn-small {
	width: 80px;
	height: 30px;
	font-family: SFUIDisplay;
	font-size: 14px;
	color: rgba(255,255,255,.3);
	border: 2px solid rgba(255,255,255,.3);
	border-radius: 50px;
	background: transparent;
	transition: all .5s ease;
	cursor: pointer;
	margin-right: 10px;
}

.game-ui-btn-small:hover {
	background: rgba(255,255,255,.3);
	color: #fff;
}

.game-ui-btn-small.active {
	color: #fff;
	border: 2px solid #fff;
}

.game-title-invt {
	background-image: url(/assets/ncase/img/game-title-invt.png);
	width: 707px;
	height: 78px;
	margin: 0 auto;
	text-align: center;
	cursor:pointer;
	font-family: FrizQuadrataCTT;
	font-size: 24px;
	color: #000;
	margin-top: 31px;
}
.game-title-invt:hover{
	color:#fff;
}
.game-title-invt > div {
	width: 707px;
	height: 60px;
	display: table-cell;
	vertical-align: middle;
}

.game-subtitle {
	font-family: SFUIDisplay;
	font-size: 14px;
	color: #fff;
	text-align: center;
	line-height: 20px;
}

.game-invt {
	max-width: 760px;
	margin: 0 auto;
	font-size: 0;
	margin-top: 24px;
	text-align: center;
}



body.noscroll {
	overflow: hidden;
}

.blur {
	transition: all 0.5s ease;
	/* background: url(/assets/ncase/img/csfon.png) no-repeat top center; */
}

.blur.on {
    -webkit-filter: blur(10px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(10px);
}

.window-layer {
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,.8);
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	overflow: scroll;
}

.window-layer.show {
	visibility: visible;
	opacity: 1;
}

.window {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	visibility: hidden;
	opacity: 0;
	transform: scale(.5);
	transition: all .5s ease;
}

.window.show {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

.window-close {
	position: absolute;
	top: 0;
	right: -54px;
	width: 34px;
	height: 34px;
	border-radius: 50px;
	background: #fff;
	cursor: pointer;
	background: url(/assets/ncase/img/ico-win-close.png) center no-repeat #fff;
}

.pop {
	width: 600px;
	height: 584px;
	border-radius: 10px;
	background: url(/assets/ncase/img/pop.png) no-repeat #fff;
	padding: 50px 0px;
	top: 60px;
	bottom: auto;
	margin-bottom: 200px;
}

.pop .clickbutton{
	border: none;
	background: #ffd800;
	height: 42px;
	padding: 8px 15px;
	font-weight:bold;
	font-size: 14px;
	text-align:center;
	border-radius: 50px;
	margin-top: 5px;
	font-family: SFUIDisplay;
	cursor: pointer;
	font-size:20px;
	width:70%;
	position: absolute;
	left:0;
	right:0;
	margin:0 auto;
	bottom:15px;
}

.refill {
	width: 555px;
	height: 765px;
	border-radius: 10px;
	background: url(/assets/ncase/img/refill-bg.png) 0px -120px no-repeat #fff;
	padding: 50px 0px;
	top: 60px;
	bottom: auto;
	margin-bottom: 200px;
}

.refill-title {
	font-family: Gotham Pro;
	font-weight: bold;
	font-size: 24px;
	width: 360px;
	margin: 0 auto;
	margin-top: 50px;
}

.refill-title.mt-cancel {
	margin-top: 0;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

.refill-input {
	width: 360px;
	height: 40px;
	border-radius: 5px;
	border: 2px solid #000;
	display: block;
	margin: 0 auto;
	font-family: SFUIDisplay;
	font-size: 14px;
	padding: 0px 13px;
	margin-top: 15px;
}

.refill-input::placeholder {
	font-family: SFUIDisplay;
	font-size: 14px;
}

.refill-btn {
	width: 360px;
	height: 60px;
	display: block;
	margin: 0 auto;
	margin-top: 50px;
	font-family: SFUIDisplay;
	font-size: 24px;
	background: linear-gradient(90deg, #ffd800, #ffa200);
	border: none;
	border-radius: 5px;
}

.refill-method {
	position: relative;
	width: 360px;
	margin: 0 auto;
}

.refill-btn-select {
	background: url(/assets/ncase/img/refill-btn-select.png);
	width: 14px;
	height: 9px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	cursor: pointer;
	position: relative;
}

.refill-btn-select-options {
	border-radius: 5px;
	box-shadow: 5px 0px 10px rgba(0,0,0,.15);
	width: 220px;
	overflow: hidden;
	position: absolute;
	left: 0px;
	top: 20px;
	visibility: hidden;
	opacity: 0;
	transition: all .3s ease;
}

.refill-btn-select.show .refill-btn-select-options {
	visibility: visible;
	opacity: 1;
}

.refill-btn-select-option {
	width: 220px;
	height: 21px;
	box-shadow: content-box;
	text-align: center;
	border-bottom: 1px solid #dfdfdf;
	background: #fff;
	font-family: SFUIDisplay;
	font-size: 14px;
	transition: all .5s ease;
}

.refill-btn-select-option:last-child {
	border-bottom: none;
}

.refill-btn-select-option > div {
	display: table-cell;
	width: 220px;
	height: 21px;
	vertical-align: middle;
}

.refill-btn-select-option:hover {
	background: #dfdfdf;
}

.refill-btn-select-option.selected {
	background: linear-gradient(90deg, #ffd800, #ffa200);
}

.refill-title-howmuch {
	font-family: Gotham Pro;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
	margin-top: 47px;
}

.refill-title-howmuch-d {
	font-family: SFUIDisplay;
	font-size: 30px;
	text-align: center;
	margin-top: 9px;
}

.refill-bonus-title {
	font-family: Gotham Pro;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
	color: #6600ff;
	margin-top: 50px;
}

.refill-bonus {
	font-family: SFUIDisplay;
	font-size: 14px;
	text-align: center;
	color: #000;
	margin-top: 13px;
}

.refill-bonus span {
	color: #6600ff;	
}




.bonus-win {
	width: 420px;
	height: 321px;
	border-radius: 10px;
}

.bonus-win-bg-glare {
	position: absolute;
	background: url(/assets/ncase/img/bonus-win-bg-glare.png);
	width: 840px;
	height: 642px;
	top: -160px;
	left: -210px;
}

.bonus-win-bg {
	position: absolute;
	background: url(/assets/ncase/img/bonus-win-bg.png);
	width: 420px;
	height: 321px;
}

.bonus-win-text {
	text-align: center;
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #000;
	position: absolute;
	padding: 25px 18px 0px;
}

.bonus-win-btn {
	border: none;
	width: 195px;
	height: 45px;
	border-radius: 50px;
	background: linear-gradient(-90deg, #ffd800, #ffb431);
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 217px;
	font-family: SFUIDisplay;
	font-size: 14px;
	color: #000;
	cursor: pointer;
}

.bonus-win-accept {
	text-align: center;
	position: absolute;
	width: 100%;
	top: 273px;
}

.bonus-win-accept-check {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,.70);
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	margin-right: 7px;
	position: relative;
}

.bonus-win-accept-check:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/bonus-galka.png);
	width: 22px;
	height: 22px;
	top: -3px;
	left: 0;
	opacity: 0;

}

.bonus-win-accept-check.on:before {
	opacity: 1;
}

.bonus-win-accept-text {
	display: inline-block;
	vertical-align: middle;
	font-family: SFUIDisplay;
	font-size: 14px;
	color: rgba(0,0,0,.70);
}

.bonus-win-footnote {
	position: absolute;
	font-family: SFUIDisplay;
	font-size: 10px;
	color: rgba(0,0,0,.70);
	bottom: 5px;
	width: 100%;
	text-align: center;
}


.popup {
	position: fixed;
	width: 300px;
	min-height: 100px;
	background: rgba(0,0,0,0.6);
	font-family: SFUIDisplay;
	font-size: 14px;
	color: #fff;
	bottom: 50px;
	right: 50px;
	border-radius: 2px;
	border: 1px solid #ffd800;
	z-index: 99990;
	display: table;
	transform: scale(.5) translateY(100px);
	transform-origin: 50% 50%;
	opacity: 0;
	transition: all .5s ease;
}

.popup > div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 20px;
}

.popup.show {
	transform: scale(1) translateX(0);
	opacity: 1;
}


.faq_wrap {
	margin-top: 45px;
}

.faq {
	width: 1024px;
	margin: 0 auto;
}

.faq-title {
	width: 1024px;
	height: 58px;
	font-family: FrizQuadrataCTT;
	font-size: 18px;
	color: #fff;
	cursor: pointer;
	position: relative;
	z-index: 1;
}

.faq-title:before {
	content: "";
	position: absolute;
	background: url(/assets/ncase/img/faq-title.png);
	width: 1024px;
	height: 58px;
	transition: .5s ease;

}

.faq-title > div {
	display: table-cell;
	height: 58px;
	vertical-align: middle;
	padding-left: 30px;
	position: relative;
}

.faq-content-wrap {
	margin-bottom: 22px;
	transition: .5s ease;
	height: 0;
}

.faq-content {
	background: url(/assets/ncase/img/faq-content-bg.png);
	width: 972px;
	height: 219px;
	margin: 0 auto;
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	padding: 34px 15px 0px;
	line-height: 18px;
	margin-top: -10px;
	transition: .5s ease;
	opacity: 0;
}

.faq.show .faq-title:before { opacity: .37; }
.faq.show .faq-content-wrap { height: 219px; }
.faq.show .faq-content { opacity: 1; }






.rating-title {
	font-family: FrizQuadrataCTT;
	color: #fff;
	font-size: 48px;
	text-align: center;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding-top: 70px;
}

.rating-progress {
	margin-top: 20px;
}

.rating {
	width: 1141px;
	margin: 0 auto;
	margin-top: 117px;
}

.rarting-info {
	position: relative;
	height: 270px;
}

.rating-btns {
	width: 178px;
	position: absolute;
	left: 0;
	top: 52px;
}

.rating-btn {
	display: block;
	width: 151px;
	height: 45px;
	border: none;
	background: transparent;
	border: 2px solid #868a8c;
	border-radius: 50px;
	cursor: pointer;
	color: #868a8c;
	font-family: SFUIDisplay;
	font-size: 14px;
	margin: 0 auto;
	margin-bottom: 10px;
}

.rating-btn.active {
	width: 178px;
	border-color: #ffd800;
	color: #fff;
}

.rating-profile {
	width: 200px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.rating-profile-ava {
	width: 112px;
	display: block;
	margin: 0 auto;
	border-radius: 100px;
}

.rating-text-place {
	font-family: FrizQuadrataCTT;
	font-size: 24px;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	margin-top: 28px;
}

.rating-text-place-sub {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	text-align: center;
	margin-top: 16px;
}

.rating-text-need-cases {
	font-family: FrizQuadrataCTT;
	font-size: 24px;
	color: #ffd800;
	text-align: center;
	letter-spacing: 1px;
	margin-top: 15px;
}

.rating-timer {
	width: 250px;
	position: absolute;
	right: 0;
	top: 57px;
}

.rating-timer-title {
	font-family: FrizQuadrataCTT;
	font-size: 24px;
	color: #fff;
	text-align: center;
}

.rating-timer-d {
	font-family: FrizQuadrataCTT;
	font-size: 48px;
	color: #ffd800;
	text-align: center;
}

.rating-timer-text {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	position: relative;
}

.rating-timer-text-day {
	position: absolute;
	left: 15px;
}

.rating-timer-text-hour {
	position: absolute;
	left: 104px;
}

.rating-timer-text-min {
	position: absolute;
	left: 202px;
}

.rating-timer-delimiter {
	opacity: 0;
    animation: timer_dots 1s ease infinite;
}

.rating-cols {
	width: 1141px;
	margin: 0 auto;
	margin-top: 33px;
}

.rating-col {
	width: 570px;
	float: left;
}

.rating-col.right {
	margin-left: 1px;
}

.rating-col-title {
	font-family: FrizQuadrataCTT;
	font-size: 48px;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	padding-bottom: 16px;
}

.rating-col-block {
	width: 570px;
	height: 62px;
	margin-bottom: 2px;
	background: rgba(0,0,0,.4);
}

.rating-col-block:nth-child(even) {
	background: rgba(0,0,0,.6);
}

.rating-col-block-n {
	float: left;
	margin-left: 18px;
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	height: 62px;
	line-height: 57px;
}

.rating-col-block-ava {
	float: left;
	line-height: 62px;
	margin-left: 10px;
}

.rating-col-block-ava img {
	width: 42px;
	border-radius: 50px;
	vertical-align: middle;
}

.rating-col-block-nick {
	float: left;
	width: 194px;
	padding: 0px 31px;
	font-family: FrizQuadrataCTT;
	font-size: 24px;
	color: #fff;
	line-height: 62px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rating-col-block-opened {
	float: left;
}

.rating-col-block-opened-title {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	margin-top: 7px;
}

.rating-col-block-opened-d {
	font-family: FrizQuadrataCTT;
	font-size: 24px;
	color: #ffd800;
	margin-top: 4px;
}

.rating-col-block-payback {
	float: left;
	margin-left: 28px;
}

.rating-col-block-payback-title {
	font-family: FrizQuadrataCTT;
	font-size: 16px;
	color: #fff;
	margin-top: 7px;
}

.rating-col-block-payback-d {
	font-family: FrizQuadrataCTT;
	font-size: 24px;
	color: #ffd800;
	margin-top: 4px;
}

.rating-btn-more {
	border: none;
	display: block;
	width: 236px;
	height: 45px;
	border: 2px solid white;
	background: transparent;
	border-radius: 50px;
	font-family: SFUIDisplay;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	margin: 0 auto;
	margin-top: 30px;
	transition: .3s ease;
}

.rating-btn-more:hover {
	background: #fff;
	color: #000;
}



.pagination {
	text-align: center;
    font-family: FrizQuadrataCTT;
}

.pagination li {
	display: inline-block;
}

.pagination .active > span {
    color: #ffd800;
    margin: 0px 2px;
    border: 1px solid #ffd800;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: default;
    font-weight: bold;
}

.pagination li a {
    color: #fff;
    text-decoration: none;
    margin: 0px 2px;
    border: 1px solid #989898;
    padding: 2px 7px;
    border-radius: 4px;
    transition: .3s ease;
}

.pagination .disabled > span {
    color: #fff;
    margin: 0px 2px;
    border: 1px solid #989898;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: default;
}

.pagination li a:hover {
	background: #fff;
	color: #000;
}

.pagination .active {

}

.pagination .disable {

}






/* animation isTopItem */

.op-ani-super {
	position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 280px;
    height: 210px;
    z-index: -1;
    opacity: 0;
    transform: scale(.5);
    transition: 2s ease;
}

.op-ani-super.show {
	opacity: 1;
    transform: scale(1);
}

.op-ani-super-bg {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 280px;
    height: 210px;
    box-shadow: 0px 0px 250px #ffff00;
    border-radius: 500px;
    animation: anisuper_bg 9s infinite;
}



.content-game{
	display: block;
    max-width: 1175px;
    font-size: 0;
    margin: 0 auto;
    margin-top: 36px;
    text-align: center;
}


@keyframes anisuper_bg {
	0% { opacity: 0.7;box-shadow: 0px 0px 250px #ffff00; }
	25% { opacity: 1;box-shadow: 0px 0px 250px #ffff00; }
	50% { opacity: 1;box-shadow: 0px 0px 250px #00ff0a; }
	75% { opacity: 1;box-shadow: 0px 0px 250px #00e6ff; }
	100% { opacity: 0.7;box-shadow: 0px 0px 250px #ffff00; }/*
	0% { opacity: 0.7;box-shadow: 0px 0px 250px #00ff00; }
	25% { opacity: 1;box-shadow: 0px 0px 250px #00ff00; }
	50% { opacity: 1;box-shadow: 0px 0px 250px #ffff00; }
	75% { opacity: 1;box-shadow: 0px 0px 250px #00e6ff; }
	100% { opacity: 0.7;box-shadow: 0px 0px 250px #00ff00; }*/
}

.op-ani-super-ray {
	display: block;
    position: absolute;
    width: 300px;
    *border: 1px solid red;
    top: -195px;
    opacity: 0;
    *opacity: 1;
    animation: anisuper_0 2s infinite ease-in-out;
}

@keyframes anisuper_0 {
	0% { opacity: 0; }
	35% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes anisuper_1 {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes anisuper_2 {
	0% { opacity: 0; }
	70% { opacity: 1; }
	100% { opacity: 0; }
}

.op-ani-super-ray.n2 {
	animation-name: anisuper_1;
	animation-delay: .3s;
	left: -90px;
    top: -175px;
    transform: rotate(-45deg);
}

.op-ani-super-ray.n3 {
	animation-name: anisuper_2;
	animation-delay: .6s;
	right: -90px;
    top: -175px;
    transform: rotate(45deg);
}

.op-ani-super-ray.n4 {
	top: auto;
	bottom: -195px;
	transform: rotate(180deg);
	animation-delay: 0s;
}

.op-ani-super-ray.n5 {
	animation-name: anisuper_1;
	top: auto;
	bottom: -175px;
	left: -90px;
	transform: rotate(225deg);
	animation-delay: .6s;
}

.op-ani-super-ray.n6 {
	animation-name: anisuper_2;
	top: auto;
	bottom: -175px;
	right: -90px;
	transform: rotate(225deg);
	animation-delay: .3s;
}

.op-ani-super-smoke {
	position: absolute;
    display: block;
    width: 400px;
    top: -45px;
    left: -70px;
    opacity: .2;
    animation: anisuper_fog_0 4s infinite;
}

@keyframes anisuper_fog_0 {
	0% { top: -45px;opacity: .2; }
	80% { top: -87px;opacity: .2; }
	99% { top: -87px;opacity: 0; }
	100% { top: -45px; }
}

.op-ani-super-smoke.n2 {
	animation-delay: 2s;
}

.op-ani-super-smoke.n3 {
	top: auto;
	bottom: -45px;
	left: -50px;
	transform: rotate(180deg);
    animation: anisuper_fog_1 4s 1s infinite;
}

.op-ani-super-smoke.n4 {
	top: auto;
	bottom: -45px;
	left: -50px;
	animation-delay: 2s;
	transform: rotate(180deg);
    animation: anisuper_fog_1 2s 2s infinite;
}

@keyframes anisuper_fog_1 {
	0% { bottom: -45px;opacity: .2; }
	80% { bottom: -67px;opacity: .2; }
	99% { bottom: -67px;opacity: 0; }
	100% { bottom: -45px; }
}

.op-ani-super-parts {
	position: absolute;
    top: -100px;
    left: -100px;
    animation: anisuper_parts 4s infinite linear;
    opacity: 0;
}

@keyframes anisuper_parts {
	0% { transform: scale(.5);opacity: 1; }
	99% { transform: scale(1.4);opacity: 0; }
	100% { transform: scale(.5);opacity: 0; }
}

.op-ani-super-parts.n2 {
	animation-delay: 2s;
}

.op-ani-super-parts.n3 {
	animation-delay: 1s;
}

.op-ani-super-parts-stars {
	position: absolute;
    top: -100px;
    left: -100px;
    animation: anisuper_parts 4s infinite linear;
    opacity: 0;
}

.op-ani-super-parts-stars.n2 {
	animation-delay: 2s;
}



@media (max-width: 1600px) {
	.b-video-wrap-2 { left: -200px;right: auto; }
}
@media (max-width: 1420px) {
	.bs-steam-wrap {
		width: 980px;
	}

	.bs-steam-title {
		left: 30px;
	}

	.bs-steam-text {
		top: 186px;
		left: 0;
		right: 0;
		margin: auto;
		transform: rotate(-3deg);
	}

	.bs-steam-text > br {
		content: "";
	}
}
@media (max-width: 1300px) {
	/* footer */
	.footer-menu-col.col-1 { width: 300px;  }
	.footer-menu-col.col-2 { padding-left: 20px;width: 125px; }
	.footer-menu-col.col-3 { width: 140px; }
	.footer-menu-col.col-4 { width: 170px; }
	.footer-menu-col.col-5 { width: 60px; }
	.footer-menu { text-align: center;  }
	.footer-menu > div { display: inline-block;float: none;  }
}

@media (max-width: 1200px) {
	/*profile*/
	.profile-trade { width: 100%; }
	.profile-trade-window { float: none;margin: 0 auto; }
	.profile-trade-img-wrap { float: none;margin: 0 auto;margin-top: 40px; }
	.profile-trade-img { margin-left: -60px; }

	.profile-favorite-case { width: 245px; }
	.profile-favorite-case-img { margin-left: 0; }
	.profile-favorite-case-text-wrap { margin-left: 0; }
	.profile-refill-btn { margin-left: 0; cursor: pointer; }
	.profile-col3 { width: 105px; }
	.profile-counter { margin-left: 10px; }

	.game-content { width: 690px; }
	.game-ui-btns { margin-top: 20px; }
	.game-history { width: 283px; }
}
@media (max-width: 1120px) {
	/*.reward-panel-title { text-align: right; }
	.reward-panel-itemname { text-align: right; }
	.reward-panel-btns { text-align: right; }*/
}
@media (max-width: 1160px) {
	.casenav-prev {
	    left: -145px;
	}
	.casenav-next {
	    right: -145px;
	}
}
@media(max-width: 1020px){
	.bs-dragroulette {
		width: auto;
		padding-right: 30px;
	}
}
@media(max-width: 980px){

	.bs-hell {
		display: block;
	}
	.b-video-wrap {
		display: none;
	}

}

@media(max-width: 760px){

	/*.reward-panel {
		left: -254px;
	}*/

}










/* RUNES  */




.Container {
    background-position:top center;
    background-repeat:no-repeat;
    margin-right:auto;
    margin-left:auto;
    position:relative;
}


.Content {
    background-position:top center;
    background-repeat:no-repeat;
    margin-right:auto;
    margin-left:auto;
    position:relative;
    width:938px;
}

.Container_01_Base {
    height:1000px;
}

.Content_01_Base {
	height:1000px;
	position: relative;
	margin: 0 auto;
}

.Content_01_Base .ImageContainer {
	position: relative;
	width: 100%;
	left: -100px;
	top: 209px;
}

.Content_01_Base .ImageContainer .Hidden {
	opacity: 0;
}

#StormContainer {
	cursor: pointer;
	position: absolute;
	top: 27px;
	left: 54px;
	width: 314px;
	height: 475px;
	z-index: 10000;
}

#EarthContainer {
	cursor: pointer;
	position: absolute;
	top: 28px;
	left: 410px;
	width: 310px;
	height: 471px;
	z-index: 10000;
}

#EmberContainer {
	cursor: pointer;
	position: absolute;
	top: 22px;
	left: 765px;
	width: 321px;
	height: 477px;
	z-index: 10000;
}

#Glow {
	width: 1138px;
	height: 530px;
	position: absolute;
}

#Storm {
	width: 1138px;
	height: 530px;
	position: absolute;
	z-index: 1;
}

#Earth {
	width: 1138px;
	height: 530px;
	position: absolute;
	z-index: 1;
}

#Ember {
	width: 1138px;
	height: 530px;
	position: absolute;
	z-index: 1;
}

.Content_01_Base .ImageContainer img {
	position: absolute;
}

#HeroNamesContainer {
	width: 100%;
	height: 83px;
	position: absolute;
	bottom: 210px;
}

#HeroNamesContainer .Container {
	position: relative;
	margin: 0 auto;
	width: 1052px;
	top: 11px;
	left: 15px;
}

.HeroName {
	cursor: pointer;
	position:relative;
	width:348px;
	height:83px;
	margin:0 auto;
	z-index: 1;
	display: inline-block;
}

.HeroName img {
	position:absolute;
	left:0;
	-webkit-transition: opacity .1s ease-in-out;
	-moz-transition: opacity .1s ease-in-out;
	-o-transition: opacity .1s ease-in-out;
	transition: opacity .1s ease-in-out;
}

.HeroName img.Top:hover {
	opacity: 0;
}




#storm_copy_01 {
    top:50px;
}




.copy {
   position:absolute;
   font-size:13px;
   line-height:20px;
   font-family:Arial,helvetica,sans-serif;
   color:#cccccc;
}

.spirit_copy {
    font-family: 'Balthazar', serif;
    font-size:18px;
    line-height:20px;
}

.spirit_copy strong {
    font-family: 'Balthazar', serif;
    font-size:18px;
}

.center_copy {
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width:692px;
    text-align:center;
}



.void-small {
    background-image: url(/assets/ncase/img/threespirits/hero_2.png);
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    position: absolute;
    right: 30px;
    bottom: 100px;
    width: 702px;
    height: 738px;
}
.wrapper {
    max-width: 5000px;

}

.cases {
    max-width: 5000px;

}



/* END RUNES  */