@import url(http://fonts.googleapis.com/css?family=Montserrat:700);

@keyframes animate_color {
	0% { color: #08f8c4; }
	50% { color: #f8d007; }
	100% { color: #08f8c4; }
}
@-webkit-keyframes animate_color {
	0% { color: #08f8c4; }
	50% { color: #f8d007; }
	100% { color: #08f8c4; }
}
body {
	background-color: #232727;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
#container {
	border: 20px solid #f5f5f5;
	box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
}
.frame {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-perspective: 1000;
}
#soon {
    height: 100%;
    width: 100%;
    -webkit-transform-style: preserve-3d;
}
.mi {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 201px;
	height: 132px;
	margin-left: -120px;
	margin-top: -200px;
    background: url(../img/mi.png) no-repeat;
    -webkit-transform: translateZ(-50px);
}
.bee {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 400px;
	height: 400px;
	margin-left: -200px;
	margin-top: -240px;
	color: #08f8c4;
	-webkit-animation: animate_color 60s;
    animation: animate_color 60s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    text-align: center;
	font: 700 400px/400px "Montserrat";
	-webkit-transform: translateZ(0px);
}
.n1 {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 179px;
	height: 188px;
	margin-left: 70px;
	margin-top: -220px;
	background: url(../img/n1.png) no-repeat;
	-webkit-transform: translateZ(25px);
}
.co {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 493px;
	height: 311px;
	margin-left: -550px;
	margin-top: -290px;
	background: url(../img/co.png) no-repeat;
	-webkit-transform: translateZ(50px);
}
.g {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 325px;
	height: 341px;
	margin-left: 160px;
	margin-top: -310px;
	background: url(../img/g.png) no-repeat;
	-webkit-transform: translateZ(100px);
}
.o1 {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 142px;
	height: 137px;
	margin-left: -180px;
	margin-top: 30px;
	background: url(../img/o1.png) no-repeat;
	-webkit-transform: translateZ(-25px);
}
.o2 {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 220px;
	height: 214px;
	margin-left: -50px;
	margin-top: -10px;
	background: url(../img/o2.png) no-repeat;
	-webkit-transform: translateZ(50px);
}
.n2 {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 234px;
	height: 245px;
	margin-left: 120px;
	margin-top: -30px;
	background: url(../img/n2.png) no-repeat;
	-webkit-transform: translateZ(75px);
}
.s {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 138px;
	height: 163px;
	margin-left: -320px;
	margin-top: 10px;
	background: url(../img/s.png) no-repeat;
	-webkit-transform: translateZ(25px);
}
#footer {
	position: absolute;
	bottom: 40px;
	width: 100%;
	color: #fff;
	font: 700 12px/12px "Montserrat";
}
#footer .left {
	float: left;
	margin-left: 20px;
}
#footer .right {
	float: right;
	margin-right: 60px;
}
#footer .right a {
	color: #fff;
}
#footer .right a:hover {
	color: #08f8c4;
}