@charset "utf-8";
@font-face {
	font-family: deadkansas;
	src: url('deadkansas.ttf');
}
@font-face {
	font-family: warz;
	src: url('warz.otf');
}

body, html {
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	min-width:1280px;
	min-height:720px;
	background-color:#222;
}

#loading {
	position:absolute;
	width:400px;
	height:400px;
	top:calc(50% - 200px);
	left:calc(50% - 200px);
	background:url(../images/loading.gif) no-repeat center center;
	background-size:contain;
	
}
#mist {
	position:absolute;
	top:0%;
	left:0%;
	width:200%;
	height:100%;
	background:url(../images/cloud-sbg.png);
	overflow:hidden;
	z-index:1;
    -webkit-animation: slideMist 30s linear infinite;
    animation: slideMist 30s linear infinite;
}

@-webkit-keyframes slideMist {
    from{	left: 0%; 		}
    to	{	left: -100%;	}
}

@keyframes slideMist {
    from{	left: 0%; 		}
    to	{	left: -100%;	}
}

@-webkit-keyframes load_big {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes load_mid {
    from{
        -webkit-transform: rotate(360deg);
    }
    to{
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes load_small {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

#loading_big {
	position:absolute;
	width:400px;
	height:400px;
	top:calc(50% - 200px);
	left:calc(50% - 200px);
	background:url(../images/loading_big.png) no-repeat;
	-webkit-transform-origin:50% 50%;
    -webkit-animation: load_big 2s linear infinite;
}

#loading_mid {
	position:absolute;
	width:400px;
	height:400px;
	top:calc(50% - 200px);
	left:calc(50% - 200px);
	background:url(../images/loading_mid.png) no-repeat;
	-webkit-transform-origin:50% 50%;
    -webkit-animation: load_mid 4s linear infinite;
}

#loading_small {
	position:absolute;
	width:200px;
	height:200px;
	top:calc(50% - 100px);
	left:calc(50% - 100px);
	background:url(../images/loading_small.png) no-repeat;
	-webkit-transform-origin:50% 50%;
    -webkit-animation: load_small 1s linear infinite;
}

#container {
	position:relative;
	width:1280px;
	height:720px;
	overflow:hidden;
	margin:auto;
	background:url(../images/bg.jpg) no-repeat center center;
	z-index:0;
}
#content { 
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:20;
	color:#FFF;
}

.main-button {
	font-family:deadkansas;
	font-size:30px;
	line-height:30px;
	text-transform:uppercase;
}

.btn-begin {
	border-top: 35px solid #000;
	border-bottom: 35px solid #000;
	border-left: 35px solid transparent;
	float: left;
}

.btn-main {
	width: 325px;
	float: left;
	background-color: #000;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

.btn-end {
	border-top: 35px solid transparent;
	border-bottom: 35px solid transparent;
	border-left: 35px solid #000;
	float: left;
}

#mm-buttons {
	position:absolute;
	width:420px;
	top:220px;
	left:15px;
}

.mm-button {
	height:70px;
	margin-bottom:15px;
	margin-left:0px;
	-webkit-transition: margin-left 0.1s ease-in-out 0s;
	cursor:pointer;
}

.mm-button:hover {
	margin-left:15px;
}