/*
section: common
*/

/* add custom font */
@font-face{ 
	font-family: 'adonisz';
	src: url('fonts/adonisz.ttf');
	src: url('fonts/adonisz.eot?#iefix') format('embedded-opentype'),
	     url('fonts/adonisz.woff') format('woff'),
	     url('fonts/adonisz.ttf') format('truetype'),
	     url('fonts/adonisz.svg#webfont') format('svg');
}

/* body changes */
body {
	overflow: hidden;
	background-color: black;
	-webkit-animation: page-fade-in 1.5s linear;
	-moz-animation: page-fade-in 1.5s linear;
	-o-animation: page-fade-in 1.5s linear;
	animation: page-fade-in 1.5s linear;
}
/* exception for firefox */
@-moz-document url-prefix() {
	body {
		background-color: black;
		animation: none;
	}
}
/* body fade animation */
@-webkit-keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* fix img tag for old browsers */
img {
	border: 0;
}

/*
section: filters
*/

/* blur image effect */
.filter-blur {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); 
}
/* exception for firefox */
@-moz-document url-prefix() {
	.filter-blur {
		filter: url('filter-blur.svg#blur');
	}
}

/* black & white colors effect */
.filter-gray {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: gray;
    -webkit-filter: grayscale(60%);
	-o-filter: grayscale(60%);
	-ms-filter: grayscale(60%);
}
/* exception for firefox */
@-moz-document url-prefix() {
	.filter-gray { }
}

/*
section: decorations
*/

/* shadow frame */
.frame-shadow {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* extra fix for ios */
	-webkit-appearance: none;
	-webkit-box-shadow: inset 0px 0px 150px 50px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: inset 0px 0px 150px 50px rgba(0, 0, 0, 0.75);
	box-shadow: inset 0px 0px 150px 50px rgba(0, 0, 0, 0.75);
}

/* dotted cover */
.pattern-dotted {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
	background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
	background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
	background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
	-webkit-background-size: 3px 3px;
	-moz-background-size: 3px 3px;
	background-size: 3px 3px;
}

/*
section: blocks
*/

/* content */
#block-content {
	/* main */
	position: fixed;
    top: 90%;
    left: 54%;
    width: 470px;
	/* center position fix */
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

/* notice (inside content) */
#block-notice {
	width: 100%;
	height: 50px;
	margin-top: 30px;
	font-family: adonisz;
	font-size: 18pt;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
	color: white;
	transition: 1s;
}

/* select panel */

#select-panel {
	/* main */
	position: fixed;
    top: 50%;
    top: 50%;
    left: 40%;
    width: 470px;
	/* center position fix */
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

/* footer */
#block-footer {
	/* main */
	position: fixed; 
	display: block;
    bottom: 0;
    left: 50%;
	/* center position fix */
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	/* font */
	font-family: adonisz;
	color: white;
	font-size: 24pt;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

/*
section: containers
*/

/* background container */
#cover {
	/* main */
	background-repeat: no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* auto size */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;	
	/* for fix blurry edges */
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-moz-transform: scale(1.1);
}

/* logo */
.logo {
	background-image: url('../images/logo.png');
	background-repeat: no-repeat;
	width: 596px;
	height: 600px;
	display: block;
}
/* bloom effect for logo */
.logo-sprite-bloom {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../images/logo_sprite_bloom.png');
	background-repeat: no-repeat;
	width: 596px;
    height: 219px;
	animation-name: logo-shine-pattern;
	animation-duration: 3s;
	-webkit-animation: logo-shine-pattern 3s linear infinite;
	-moz-animation: logo-shine-pattern 3s linear 0s infinite;
	-ms-animation: logo-shine-pattern 3s linear infinite;
	animation: logo-shine-pattern 3s linear infinite;
	z-index: 9999;
}
/* shine effect for logo */
.logo-sprite-shine {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../images/logo_sprite_shine.png');
	background-repeat: no-repeat;
	width: 596px;
    height: 219px;
	animation-name: logo-shine-pattern;
	animation-duration: 3s;
	-webkit-animation: logo-shine-pattern 3s linear infinite;
	-moz-animation: logo-shine-pattern 3s linear 0s infinite;
	-ms-animation: logo-shine-pattern 3s linear infinite;
	animation: logo-shine-pattern 3s linear infinite;
	z-index: -1;
}
/* animation (modern) */
@keyframes logo-shine-pattern {
	0% { opacity: .0; }
	10% { opacity: .20; }
	20% { opacity: .40; }
	30% { opacity: .60; }
	40% { opacity: .80; }
	60% { opacity: 1.0; }
	80% { opacity: .80; }
	90% { opacity: .40; }
	95% { opacity: .20; }
	100% { opacity: .10; }
}
/* animation (webkit) */
@-webkit-keyframes logo-shine-pattern {
	0% { -webkit-opacity: .0; }
	10% { -webkit-opacity: .20; }
	20% { -webkit-opacity: .40; }
	30% { -webkit-opacity: .60; }
	40% { -webkit-opacity: .80; }
	60% { -webkit-opacity: 1.0; }
	80% { -webkit-opacity: .80; }
	90% { -webkit-opacity: .40; }
	95% { -webkit-opacity: .20; }
	100% { -webkit-opacity: .10; }
}
/* animation (firefox) */
@-moz-keyframes logo-shine-pattern {
	0% { -moz-opacity: 0.0; opacity: 0.0; }
	10% { -moz-opacity: 0.20; opacity: 0.20; }
	20% { -moz-opacity: 0.40; opacity: 0.40; }
	30% { -moz-opacity: 0.60; opacity: 0.60; }
	40% { -moz-opacity: 0.80; opacity: 0.80; }
	60% { -moz-opacity: 1.0; opacity: 1.0; }
	80% { -moz-opacity: 0.80; opacity: 0.80; }
	90% { -moz-opacity: 0.40; opacity: 0.40; }
	95% { -moz-opacity: 0.20; opacity: 0.20; }
	100% { -moz-opacity: 0.10; opacity: 0.10; }
}
/* animation (ie) */
@-ms-keyframes logo-shine-pattern {
	0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }
	10% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); }
	20% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); }
	30% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); }
	40% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); }
	60% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); }
	80% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); }
	90% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); }
	95% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); }
	100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); }
}

/* logo description */
.description {
	font-family: adonisz;
	/*font-size: 34pt;*/
	font-size: 40pt;
	text-shadow: 1px 1px 0px rgba(64, 0, 0, 1);
	color: white;
	display: block;
	width: 50%;
    margin-bottom: 50px;
}

/* logo description (span) */
.description span {
	color: #e7bd4c;
}


.notice {
	font-family: adonisz;
	font-size: 15pt;
	text-shadow: 1px 1px 0px rgba(64, 0, 0, 1);
	margin-left: 10px;
	margin-bottom: 2px;
	color: white;
	display: block;
	width: 100%;
}

.notice_error {
	font-family: adonisz;
	font-size: 15pt;
	text-shadow: 1px 1px 0px rgba(64, 0, 0, 1);
	margin-left: 10px;
	margin-bottom: 2px;
	color: red;
	display: block;
	width: 100%;
}

.notice_success {
	font-family: adonisz;
	font-size: 15pt;
	text-shadow: 1px 1px 0px rgba(64, 0, 0, 1);
	margin-left: 10px;
	margin-bottom: 2px;
	color: rgb(102, 204, 102);
	display: block;
	width: 100%;
}


/* social button */
.social-button {
	outline: none;
	width: 32px;
    height: 32px;
	display: block;
	opacity: .4;
	filter: alpha(opacity=40);
	float: left;
	margin: 5px;
	transition: 1s;
}
/* hover effect */
.social-button:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition: 1s;
}

/* press button */
.press-button {
	outline: none;
	width: 140px;
    height: 100px;
	display: block;
	opacity: .6;
	filter: alpha(opacity=60);
	float: left;
	margin: 8px;
	margin-top: 100px;
	margin-bottom: -50px;
	transition: 1s;
}

/* press button blocked */
.press-button-blocked {
	outline: none;
	width: 140px;
    height: 100px;
	display: block;
	opacity: .2;
	filter: alpha(opacity=20);
	float: left;
	margin: 5px;
}

/* hover effect */
.press-button:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition: 1s;
}

/* press2 button */
.press2-button {
	outline: none;
	width: 200px;
    height: 80px;
	display: block;
	opacity: .6;
	filter: alpha(opacity=60);
	float: left;
	margin-bottom: 150px;
	margin-left: 135px;
	/*margin: -60px;*/
	/*position: absolute;
    top: 60; bottom:0; left: 0; right:0;
    margin: auto;*/
	transition: 1s;
}

/* press2 button blocked */
.press2-button-blocked {
	outline: none;
	width: 200px;
    height: 80px;
	display: block;
	opacity: .2;
	filter: alpha(opacity=20);
	float: left;
	margin: 5px;
}

/* hover2 effect */
.press2-button:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition: 1s;
}


/* text input */
input[type="text"] {
	outline: none;
	width: 96%;
	background-color: black;
	padding: 10px;
    margin-bottom: 2px;
	color: white;
	font-family: adonisz;
	font-size: 13pt;
	border: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	opacity: 0.6;
	filter: alpha(opacity=60);
	transition: 1s;
}

input[type="text"]:focus {
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition: 1s;
}

/* password input */
input[type="password"] {
	outline: none;
	width: 96%;
	background-color: black;
	padding: 10px;
    margin-bottom: 2px;
	color: white;
	font-family: adonisz;
	font-size: 13pt;
	border: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	opacity: 0.6;
	filter: alpha(opacity=60);
	transition: 1s;
}

input[type="password"]:focus {
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition: 1s;
}

/* submit button */
input[type="submit"] {
	outline: none;
	width: 96%;
	height: 48px;
	padding-top: 6px;
    margin-top: 5px;
	background-color: rgb(102, 204, 102);
	color: white;
	font-family: Arial;
	font-size: 12pt;
	font-weight: bold;
	border: none;
    border-radius: 3px;
	-moz-border-radius: 3px;
	opacity: 0.8;
	filter: alpha(opacity=80);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
	transition: 1s;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
}

input[type="submit"]:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition: 1s;
	cursor: pointer;
}

.is_overlay{ display: block; width: 100%; height: 100%; }

#trailer {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}

#trailer > video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
#fixed {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: fixed;
top: 50%;
left: 50%;
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
z-index: -100;
}

@media (min-aspect-ratio: 16/9) {
     #trailer > video { height: 300%; top: -100%; }
 }
 @media (max-aspect-ratio: 16/9) {
     #trailer > video { width: 300%; left: -100%; }
 }
 /* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */
 @supports (object-fit: cover) {
     #trailer > video {
         top: 0; left: 0;
         width: 100%; height: 100%;
         object-fit: cover;
     }
 }