body {
padding:0;
margin:0;
overflow-x:hidden;
background-color:#880000;
}
.text {
position: static;
width: 500px;
height: 500px;
text-transform: uppercase;
}
.base div {
position:absolute;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
svg {
position:absolute;
}
#wrapper {
width:100%;
height:100%;
position:fixed;
}
.centering {
left:50%;
top:50%;
margin-left:-96px;
margin-top:-96px;
width:192px;
height:192px;
position:absolute;
}
.base {
position:absolute;
width:inherit;
height:inherit;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translate3d(0.00px, 0.00px, 0.00px);
-moz-transform:translate3d(0.00px, 0.00px, 0.00px);
-o-transform:translate3d(0.00px, 0.00px, 0.00px);
-ms-transform:translate3d(0.00px, 0.00px, 0.00px);
transform:translate3d(0.00px, 0.00px, 0.00px);
background-image:-webkit-radial-gradient(rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
background-image:-moz-radial-gradient(rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
background-image:-o-radial-gradient(rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
background-image:-ms-radial-gradient(rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
background-image:radial-gradient(, rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
}
/*--Basic Setting--*/
#top {
-webkit-transform:translate3d(0.00px, 0.00px, 141.00px);
-moz-transform:translate3d(0.00px, 0.00px, 141.00px);
-o-transform:translate3d(0.00px, 0.00px, 141.00px);
-ms-transform:translate3d(0.00px, 0.00px, 141.00px);
transform:translate3d(0.00px, 0.00px, 141.00px);
}
.m {
-webkit-transform:translate3d(0.00px, 0.00px, 85px) rotate(0.00deg) rotateY(-45.00deg);
-moz-transform:translate3d(0.00px, 0.00px, 85px) rotate(0.00deg) rotateY(-45.00deg);
-o-transform:translate3d(0.00px, 0.00px, 85px) rotate(0.00deg) rotateY(-45.00deg);
-ms-transform:translate3d(0.00px, 0.00px, 85px) rotate(0.00deg) rotateY(-45.00deg);
transform:translate3d(0.00px, 0.00px, 85px) rotate(0.00deg) rotateY(-45.00deg);
}
.b {
-webkit-transform:translate3d(-17px, 0px, 16px) rotate(0.00deg) rotateY(-132deg);
-moz-transform:translate3d(-17px, 0px, 16px) rotate(0.00deg) rotateY(-132deg);
-o-transform:translate3d(-17px, 0px, 16px) rotate(0.00deg) rotateY(-132deg);
-ms-transform:translate3d(-17px, 0px, 16px) rotate(0.00deg) rotateY(-132deg);
transform:translate3d(-17px, 0px, 16px) rotate(0.00deg) rotateY(-132deg);
}
.s {
-webkit-transform:translate3d(84.00px, 0.00px, -39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
-moz-transform:translate3d(84.00px, 0.00px, -39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
-o-transform:translate3d(84.00px, 0.00px, -39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
-ms-transform:translate3d(84.00px, 0.00px, -39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
transform:translate3d(84.00px, 0.00px, -39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
-webkit-animation-name:shine;
-moz-animation-name:shine;
-o-animation-name:shine;
-ms-animation-name:shine;
animation-name:shine;
-webkit-animation-duration:14s;
-moz-animation-duration:14s;
-o-animation-duration:14s;
-ms-animation-duration:14s;
animation-duration:14s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity:0.6;
}
.faces {
-webkit-transform:translate3d(-6.00px, 67.00px, 40.00px) rotate(0.00deg);
-moz-transform:translate3d(-6.00px, 67.00px, 40.00px) rotate(0.00deg);
-o-transform:translate3d(-6.00px, 67.00px, 40.00px) rotate(0.00deg);
-ms-transform:translate3d(-6.00px, 67.00px, 40.00px) rotate(0.00deg);
transform:translate3d(-6.00px, 67.00px, 40.00px) rotate(0.00deg);
}
.face2 {
-webkit-transform:translate3d(204px, 58px, 0px) rotate(180.00deg);
-moz-transform:translate3d(204px, 58px, 0px) rotate(180.00deg);
-o-transform:translate3d(204px, 58px, 0px) rotate(180.00deg);
-ms-transform:translate3d(204px, 58px, 0px) rotate(180.00deg);
transform:translate3d(204px, 58px, 0px) rotate(180.00deg);
}
#a1, #a2, #a3, #a4, #a5, #a6 {
width:204px;
height:58px;
}
#a2 {
-webkit-transform:translate3d(0px, 0px, 0.00px) rotate(30.00deg);
-moz-transform:translate3d(0px, 0px, 0.00px) rotate(30.00deg);
-o-transform:translate3d(0px, 0px, 0.00px) rotate(30.00deg);
-ms-transform:translate3d(0px, 0px, 0.00px) rotate(30.00deg);
transform:translate3d(0px, 0px, 0.00px) rotate(30.00deg);
-webkit-animation-delay:0.5s;
-moz-animation-delay:0.5s;
-o-animation-delay:0.5s;
-ms-animation-delay:0.5s;
animation-delay:0.5s;
}
#a3 {
-webkit-transform:translate3d(0px, 0px, 0px) rotate(60.00deg);
-moz-transform:translate3d(0px, 0px, 0px) rotate(60.00deg);
-o-transform:translate3d(0px, 0px, 0px) rotate(60.00deg);
-ms-transform:translate3d(0px, 0px, 0px) rotate(60.00deg);
transform:translate3d(0px, 0px, 0px) rotate(60.00deg);
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-o-animation-delay:1s;
-ms-animation-delay:1s;
animation-delay:1s;
}
#a4 {
-webkit-transform:rotate(90.00deg);
-moz-transform:rotate(90.00deg);
-o-transform:rotate(90.00deg);
-ms-transform:rotate(90.00deg);
transform:rotate(90.00deg);
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
animation-delay:1.5s;
}
#a5 {
-webkit-transform:rotate(120.00deg);
-moz-transform:rotate(120.00deg);
-o-transform:rotate(120.00deg);
-ms-transform:rotate(120.00deg);
transform:rotate(120.00deg);
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;
-ms-animation-delay:2s;
animation-delay:2s;
}
#a6 {
-webkit-transform:rotate(150.00deg);
-moz-transform:rotate(150.00deg);
-o-transform:rotate(150.00deg);
-ms-transform:rotate(150.00deg);
transform:rotate(150.00deg);
-webkit-animation-delay:2.5s;
-moz-animation-delay:2.5s;
-o-animation-delay:2.5s;
-ms-animation-delay:2.5s;
animation-delay:2.5s;
}
.grad_top_1 {
stop-color:#ffffff;
stop-opacity:0.8;
}
.grad_top_2 {
stop-color:#ffffff;
stop-opacity:0.2;
}
.grad_b1 {
stop-color:#B3C0D2;
}
.grad_b2 {
stop-color:white;
stop-opacity:0;
}
.grad_b3 {
stop-color:#B3C0D2;
}
.grad_s1 {
stop-color:rgba(0, 0, 0, 1.00);
stop-opacity:0;
}
.grad_s2 {
stop-color:#ffffff;
stop-opacity:0.15;
}
.grad_s3 {
stop-color:rgba(255, 255, 255, 0.20);
stop-opacity:0;
}
.anim {
-webkit-animation-name:anim;
-moz-animation-name:anim;
-o-animation-name:anim;
-ms-animation-name:anim;
animation-name:anim;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-o-animation-duration:2s;
-ms-animation-duration:2s;
animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
-o-animation-timing-function:linear;
-ms-animation-timing-function:linear;
animation-timing-function:linear;
}
@-webkit-keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
@-moz-keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
@-o-keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
@-ms-keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
@keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
#outline {
-webkit-animation-name:outline;
-moz-animation-name:outline;
-o-animation-name:outline;
-ms-animation-name:outline;
animation-name:outline;
-webkit-animation-duration:14s;
-moz-animation-duration:14s;
-o-animation-duration:14s;
-ms-animation-duration:14s;
animation-duration:14s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transition-timing-function:linear;
-moz-transition-timing-function:linear;
-o-transition-timing-function:linear;
-ms-transition-timing-function:linear;
transition-timing-function:linear;
}
@-webkit-keyframes outline {
0% {
-webkit-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
-webkit-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@-moz-keyframes outline {
0% {
-moz-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
-moz-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@-o-keyframes outline {
0% {
-o-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
-o-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@-ms-keyframes outline {
0% {
-ms-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
-ms-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@keyframes outline {
0% {
transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@-webkit-keyframes shine {
0% {
-webkit-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
-webkit-transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
-webkit-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
@-moz-keyframes shine {
0% {
-moz-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
-moz-transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
-moz-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
@-o-keyframes shine {
0% {
-o-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
-o-transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
-o-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
@-ms-keyframes shine {
0% {
-ms-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
-ms-transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
-ms-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
@keyframes shine {
0% {
transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}