@charset 'utf-8';

@import 'https://wf.cdn.gmru.net/static/general/fonts/Quantico/font.css';
@import 'https://wf.cdn.gmru.net/static/general/fonts/Plumb/font.css';

html {
	height: 100%;
	}
body {
  font: 15px/1.4 Plumb, Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	color: #fff;
	background: #121212 url(../img/bg.jpg) center top no-repeat;
	}
main {
	position: relative;
	width: 100%;
	min-width: 943px;
	min-height: 100%;
	margin: 0px auto;
	padding-bottom: 60px;

	}
.layout {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 943px;
	height: inherit;
	margin: 0px auto;
	}
main p {
	margin: 0;
}
/*--- header ---*/
header .js_navigation_ph {
	display: none;
}

/*--- content ---*/

.button {
	text-transform: uppercase;
  display: inline-block;
    font: 19px/58px Quantico, Arial, Helvetica, sans-serif;
	height: 58px;
	width: 370px;
	text-align: center;
	background: #ff4400;
	color: #fff;
	margin: auto;
	cursor: pointer;
}
.button:hover {
	background: #fff;
	color: #000;
}

.button.play {
	display: block;
	margin: 0px auto 40px;
}

.lang {
	position: absolute;
	top: 0;
	right: 0;
	text-transform: uppercase;
	cursor: pointer;
	font-size: 13px;
	z-index: 2;
	}
	.lang__current {
		position: relative;
		background: #191e23;
		color: #fff;
		padding: 20px 25px;;
		box-sizing: border-box;
		width: 195px;
	}
	.lang__current:after {
	    position: relative;
	    top: -3px;
	    display: inline-block;
	    width: 0;
	    height: 0;
	    margin-left: 10px;
	    content: '';
	    transition: transform 300ms cubic-bezier(0.5, -0.5, 0.5, 1.5) 0s, -webkit-transform 300ms cubic-bezier(0.5, -0.5, 0.5, 1.5) 0s;
	    border-width: 4px 4px 0 4px;
	    border-style: solid;
	    border-color: #777a7e transparent transparent transparent;
	}
	.lang:hover .lang__current:after {
		transform: rotate(180deg);
	}
	.lang__list {
	    position: absolute;
	    top: 58px;
	    left: 0px;
	    padding: 15px 15px 0;
	    transition: transform 300ms ease 0s, -webkit-transform 300ms ease 0s;
	    transform: scaleY(0);
	    transform-origin: left top 0;
	    text-align: left;
	    opacity: 0;
	    background: #fff;
	    will-change: transform;
	    width: 160px;
	}
	.lang:hover .lang__list {
	    transform: scaleY(1);
	    opacity: 1;
	}
		.lang__item {
			line-height: 15px;
			margin-bottom: 15px;
    		transition: all 0.3s ease;
			color: #282c2b;
			display: block;
			text-decoration: none;
			font-weight: bold;
		}
		.lang__item:before {
			content: '';
			display: inline-block;
			vertical-align: middle;
			width: 24px;
			height: 16px;
			background-image: url(../img/flag.png);
			margin-right: 10px;
			position: relative;
			top: -2px;
		}
		.lang__item.item_en:before { background-position: center 0; }
		.lang__item.item_de:before { background-position: center -16px; }
		.lang__item.item_fr:before { background-position: center -32px; }
		.lang__item.item_tu:before { background-position: center -48px; }
		.lang__item.item_po:before { background-position: center -64px; }
		.lang__item.item_cn:before { background-position: center -80px; }

		.lang__item:hover {
			color: #ff4400;
		}

.logo {
	padding: 30px 0;
	text-align: center;
}
	.logo img {
		margin-bottom: 30px;
	}

.menu {
	margin: 35px 0 0;
	padding: 0;
	font-size: 0;
}
	.menu li {
		list-style: none;
		display: inline-block;
		font: bold 17px/58px Quantico, Arial, Helvetica, sans-serif;
		background: #191e23;
		width: 232px;
		text-align: center;
		margin-right: 3px;
		cursor: pointer;
    text-transform: uppercase;
	}
	.menu li:first-if-type {
		margin-right: 0;
	}
	.menu li:hover {
		background: #fff;
		color: #191e23;
	}

main h2 {
    font: bold 35px/40px Quantico, Arial, Helvetica, sans-serif;
	margin: 0;
    text-align: center;
    text-transform: uppercase;
    color: #ff4400;
}
main h3 {
	font-size: 29px;
	color: #fff;
	text-align: center;
    margin: 0px 0 45px;
	font-weight: normal;
}

/* --- Trailer --- */

.trailer {
	}
	.trailer .video {
		width: 943px;
		height: 526px;
		margin: 0px auto;
		cursor: pointer;
		}
		.video_main {
			background: url(../img/game_video.jpg) center top no-repeat;
		}
		.video_reg {
			background: url(../img/game_video_reg.jpg) center top no-repeat;
		}
		.trailer .video > .cover {
			width: 942px;
			height: 527px;
			position: absolute;
			background: url(../img/game_video.png) center center no-repeat;
			opacity: 1;
			z-index: 1;
			}

/* --- Game --- */

.game {
	text-align: center;
	margin-top: 45px;
	}
	.game > div {
		position: relative;
		}

		.game_layout {
			width: 942px;
			height: 628px;
			margin: 0px auto;
			}

			.game_layout > div {
				width: 314px;
				height: 314px;
				float: left;
				background-color: #191e23;
				background-repeat: no-repeat;
				background-position: 0 0;
				}
			.game_layout > div:nth-child(1) {background-image: url(../img/game1.jpg)}
			.game_layout > div:nth-child(3) {background-image: url(../img/game2.jpg)}
			.game_layout > div:nth-child(5) {background-image: url(../img/game3.jpg)}

			.game_layout h4 {
				margin: 20px 0px 15px;
				padding: 0px 32px;
				color: #ff4400;
				font-size: 24px;
				text-transform: uppercase;
				text-align: left;
				font-family: Quantico;
				}

			.game .game_layout p {
				padding: 0px 32px;
				font-size: 16px;
				text-align: left;
				text-transform: none;
				color: #d2d2d2;
				}

/* --- Classes --- */

.classes {
	text-align: center;
	margin-top: 45px;
	}
	.classes h3 {
		margin-bottom: 5px;
	}
	.classes_layout {
		width: 942px;
		height: 600px;
		position: relative;
		margin: 0px auto;
		background: url(../img/classes.png) left top no-repeat;
		overflow: hidden;
		}

		.classes_layout .area {
			height: inherit;
			position: absolute;
			cursor: pointer;
			z-index: 2;
			}
		.classes_layout .area.type1 {width: 210px; left: 0px;}
		.classes_layout .area.type2 {width: 195px; left: 210px;}
		.classes_layout .area.type3 {width: 208px; left: 405px;}
		.classes_layout .area.type4 {width: 328px; left: 613px;}

		.classes_layout .unit {
			height: inherit;
			position: absolute;
			background-position: left bottom;
			background-repeat: no-repeat;
			opacity: 0;
			transition: opacity 0.05s linear;
			z-index: 1;
			}

		.classes_layout .unit.type1 {width: 232px; left: 0px; background-image: url(../img/classes_type1.png);}
		.classes_layout .unit.type2 {width: 297px; left: 140px; background-image: url(../img/classes_type2.png);}
		.classes_layout .unit.type3 {width: 302px; left: 400px; background-image: url(../img/classes_type3.png);}
		.classes_layout .unit.type4 {width: 346px; left: 595px; background-image: url(../img/classes_type4.png);}

		.classes_layout .unit__name {
			color: #fff;
			font-size: 0px;
			font-weight: bold;
			text-transform: uppercase;
			position: absolute;
		}
		.classes_layout .unit.type1 .unit__name { top: 40px; left: 46px; }
		.classes_layout .unit.type2 .unit__name { top: 26px; left: 51px; }
		.classes_layout .unit.type3 .unit__name { top: 16px; right: 75px; }
		.classes_layout .unit.type4 .unit__name { top: 26px; right: 156px; }

		.classes_layout .area.type1:hover ~ .unit.type1,
		.classes_layout .area.type2:hover ~ .unit.type2,
		.classes_layout .area.type3:hover ~ .unit.type3,
		.classes_layout .area.type4:hover ~ .unit.type4 {
			opacity: 1;
			}

		.classes .desc {
			width: inherit;
			height: inherit;
			display: none;
			position: absolute;
			background: rgba(40, 41, 43, 0.9);
			transition: opacity 0.2s linear;
			overflow: hidden;
			z-index: 10;
			}
		.classes .desc.active {
			display: block;
			opacity: 1;
			z-index: 11;
			}

			.classes .desc .close {
				width: 50px;
				height: 50px;
				position: absolute;
				top: 0px;
				right: 0px;
				background: url(../img/classes_close.png) center center no-repeat;
				cursor: pointer;
				opacity: 0.9;
				z-index: 12;
				}
			.classes .desc .close:hover {
				opacity: 1;
				}
			.classes .desc .close:active {
				opacity: 0.5;
				}

			.classes .desc .arr {
				width: 50px;
				height: inherit;
				position: absolute;
				top: 0px;
				background-image: url(../img/classes_arr.png);
				background-repeat: no-repeat;
				opacity: 0.3;
				cursor: pointer;
				z-index: 11;
				}
			.classes .desc .arr:hover {
				opacity: 1;
				}
			.classes .desc .arr:active {
				opacity: 0.7;
				}
			.classes .desc .arr.left {
				left: 0px;
				background-position: left center;
				}
			.classes .desc .arr.right {
				right: 0px;
				background-position: right center;
				}

			.classes .desc .img {
				width: 340px;
				height: 500px;
				position: absolute;
			    top: 30px;
			    left: 50px;
				background-position: left bottom;
				background-repeat: no-repeat;
				z-index: 1;
				}
			.classes .desc.type1 .img {background-image: url(../img/classes_desc1.png)}
			.classes .desc.type2 .img {background-image: url(../img/classes_desc2.png)}
			.classes .desc.type3 .img {background-image: url(../img/classes_desc3.png)}
			.classes .desc.type4 .img {background-image: url(../img/classes_desc4.png)}

			.classes .desc .text {
				width: 490px;
				height: 458px;
				position: absolute;
				top: 90px;
				left: 368px;
				z-index: 2;
				}

				.classes .desc .text h4 {
					margin: 0px;
					padding: 16px 0px 16px 50px;
					color: #ff4400;
					font-size: 24px;
					text-align: left;
					text-transform: uppercase;
					background: url(../img/classes_ico.png) left 64px no-repeat;
					}
				.classes .desc.type1 .text h4 {background-position: left -6px}
				.classes .desc.type2 .text h4 {background-position: left -76px}
				.classes .desc.type3 .text h4 {background-position: left -146px}
				.classes .desc.type4 .text h4 {background-position: left -216px}

				.classes .desc .text p {
					color: #d2d2d2;
					font-size: 17px;
					text-align: left;
					cursor: default;
					margin: 21px 0;
					}

/* --- Media --- */

.media {
	min-width: 942px;
	overflow: hidden;
	text-align: center;
	margin-top: 45px;
	}
	.media__text {
		margin: 35px 0;
	}
	.media > div {
		position: static;
		overflow: visible;
		background: #000;
		}

		.jcarousel-skin {
			width: 942px;
			margin: 0 auto;
			z-index: 1;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			}
			.jcarousel-skin .jcarousel-container-horizontal,
			.jcarousel-skin .jcarousel-clip-horizontal {
				width: 942px;
				}

			.jcarousel-skin .jcarousel-container-horizontal,
			.jcarousel-skin .jcarousel-clip-horizontal,
			.jcarousel-skin .jcarousel-item {
				height: 178px;
				}

			.jcarousel-skin .jcarousel-container-horizontal {
				margin: 0px;
			    padding: 0px;
				}

			.jcarousel-skin .jcarousel-clip {
			    overflow: hidden;
				}

			.jcarousel-skin .jcarousel-item {
			    width: 314px;
				}

			.jcarousel-skin .jcarousel-item-horizontal {
				margin-left: 0;
			    margin-right: 0px;
				}

			.jcarousel-skin .jcarousel-item-placeholder {
			    background: #fff;
			    color: #000;
				}

			.jcarousel-skin .jcarousel-direction-rtl {
				direction: rtl;
				}

			.jcarousel-skin .jcarousel-direction-rtl .jcarousel-item-horizontal {
				margin-left: 10px;
			    margin-right: 0;
				}

			/* ----------------------------------------------------------------- */
			/* Buttons */
			/* ----------------------------------------------------------------- */

			.jcarousel-skin .jcarousel-next-horizontal,
			.jcarousel-skin .jcarousel-prev-horizontal {
				width: 50px;
				height: inherit;
				position: absolute;
				top: 0px;
				background: transparent url(../img/screens_arr.png) no-repeat;
				cursor: pointer;
				opacity: 0.8;
				filter: alpha(opacity=80);
				z-index: 10;
				}

			.jcarousel-skin .jcarousel-next-horizontal {
				right: 0px;
				background-position: -50px center;
				}
			.jcarousel-skin .jcarousel-prev-horizontal {
				left: 0px;
				background-position: 0px center;
				}

			.jcarousel-skin .jcarousel-next-horizontal:hover,
			.jcarousel-skin .jcarousel-prev-horizontal:hover {
				opacity: 1;
				}
			.jcarousel-skin .jcarousel-next-horizontal:active,
			.jcarousel-skin .jcarousel-prev-horizontal:active {
				opacity: 0.8;
				}

		#screens_carousel.jcarousel-skin {
			height: 178px;
			overflow: hidden;
			}
			#screens_carousel.jcarousel-skin > li {
				float: left;
				list-style: none;
				}
			#screens_carousel.jcarousel-skin > li:first-child {
				margin-left: 12px;
				}

			.jcarousel-item > a {
				width: 314px;
				height: 178px;
				display: block;
				position: absolute;
				background: url(../img/blank.png) repeat;
				outline: none;
				z-index: 1;
				}

			.jcarousel-item > img {
				opacity: 0.75;
				}
			.jcarousel-item > a:hover + img {
				opacity: 1;
				}

	.lb-data .lb-details .lb-number {
		color: #777;
		font: 14px/18px Plumb, Tahoma, Geneva, sans-serif;
		opacity: 0;
		}

/* --- Gift --- */

.gift {
	margin-top: 45px;
	text-align: center;
}
	.gift__img {
		width: 308px;
		height: 178px;
		background: url(../img/gift.jpg);
		position: relative;
		margin: auto;
	}
	.gift__duration {
	    position: absolute;
	    top: 19px;
	    right: 8px;
	    transform: rotate(46deg);
	    text-transform: uppercase;
	    font-size: 14px;
	}
		.gift__duration_fr {
			right: -2px;
		}
  		.gift__duration--cn {
        right: 14px;
        top: 19px;
  		}
	.gift__text {
		margin: 20px 0;
	}

/*--- registration ---*/

.regwf {
	margin-top: 20px;
	display: none;
}
	.regwf p {
		margin-bottom: 5px;
	}
	.regwf__link {
		color: currentColor;
		text-decoration: underline;
	}
	.regwf__link:hover {
		text-decoration: none;
	}

/*--- Footer ---*/

footer {
    background: #191e23;
    }