@charset "utf-8";
/*body{
	background:#000;
}*/

.blackCover{
	position:absolute;
	background: #000;
	width: 100%;
	height: 0%;
	z-index: 2000;
	transform: translateZ("10px");
	bottom: 0;
}
#loader_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    overflow: hidden;
    background: #c1010a;
}
#loader_wrapper.loaded #loader,
#loader_wrapper.loaded #loaderText {
    display: none;
}
#loaderText {
    text-align: center;
    top: 50%;
    position: relative;
    margin-top: -.55em;
    opacity: 1;
    font-weight: 700;
    letter-spacing: 0;
    font-size: 16px;
	color:#FFF;
    transition: opacity 1s ease-in-out;
	margin-left:0;
	left:0;
}
#loaderWrapper {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 200px;
    height: 200px;
    transform: translate3d(-50%,-50%,1px);
}
#loader {
    width: 60%;
    height: 60%;
    transform: rotate(-90deg) translate3d(-50%,-50%,1px);
    transform-origin: 0 0;
}
#eight,
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
}
#eight {
    width: 100%;
    height: 100%;
    transform: rotate(90deg) translate3d(-50%,-50%,1px);
    transition: transform 0.5s ease-in-out;
    transform-origin: 0 0;
    z-index: 1;
}
#eight .circle {
    border-radius: 100%;
}
#eight .bottom,
#eight .top {
    background: #000;
    position: absolute;
    left: 50%;
    transform-origin: 0 50%;
}
#eight .top {
    width: 86%;
    height: 86%;
    bottom: 50%;
    transform: scale(0) translate3d(-50%,-8%,1px);
}
#eight .top .hole {
    width: 52%;
    height: 52%;
}
#eight .bottom {
    width: 100%;
    height: 100%;
    top: 50%;
    transform: scale(0) translate3d(-50%,8%,1px);
}
#eight .hole {
    width: 54%;
    height: 54%;
    background: #c1010a;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    transform: scale(0) translate3d(-50%,-50%,1px);
    transition: transform 0.6s ease-in;
}
#eight.bringin {
    transform: rotate(0) translate3d(-50%,-50%,1px);
}
#eight.bringin .top {
    animation: eightTop;
}
#eight.bringin .bottom {
    animation: eightBottom;
}
#eight.bringin .bottom,
#eight.bringin .top {
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}
#eight.bringin .hole {
    transform: scale(1) translate3d(-50%,-50%,1px);
}
@keyframes eightTop {
    0% {
        transform: scale(0) translate3d(-50%,-8%,1px);
    }
    60% {
        transform: scale(1) translate3d(-50%,-8%,1px);
    }
    70% {
        transform: scale(1) translate3d(-50%,-8%,1px);
    }
    to {
        transform: scale(1) translate3d(-50%,8%,1px);
    }
}
@keyframes eightBottom {
    0% {
        transform: scale(0) translate3d(-50%,8%,1px);
    }
    60% {
        transform: scale(1) translate3d(-50%,8%,1px);
    }
    70% {
        transform: scale(1) translate3d(-50%,8%,1px);
    }
    to {
        transform: scale(1) translate3d(-50%,-8%,1px);
    }
}