/* Gonzalo Gayo CONTACTO:gonzalogayo@gmail.com */

/*ESTRUCTURA- SOLO MEDIDAS DE LOS DIV MAS IMPORTANTES*/
*{
margin:0px;
padding:0px;
}


html{
width:100%;
height:100%;
font-size:15px;
}

body{
width:100%;
height:100%;
margin:5px 5px 5px 5px;
background-image: url("../imagenes/fondo3.jpg");
background-size: 100% 100%;
background-repeat: repeat;
}

#global{
width:1550px;
margin:15px auto 5px auto;
}
	
/* ETIQUETAS GENERALES AFECTA A TODAS*/
h1{
text-align:center;
color: white;
background: -webkit-linear-gradient(180deg,red, orange); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, orange); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, orange); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, orange); /* Standard syntax */
border-radius:10px;
font-family:'Special Elite',cursive;
font-size:22px;
position: relative;
border-radius: 10px;
font-family: 'Special Elite', cursive;
margin:auto 5px auto 5px;
}

/* CAPITULAR */
#capitular{
	color: red;
	font-size:400%;
	background: grey;
	margin:0px;
}



a{
text-decoration:none;
color:white;
}

ul, ol {
list-style:none;
}
p{
padding:0px 3px 3px 5px;
font-family: 'Special Elite', cursive;
font-size; 16px;
}

.typewrite{
color:black;
}
/* FIN ETIQUETAS GENERALES AFECTA A TODAS*/	
/*FIN ESTRUCTURA- SOLO MEDIDAS DE LOS DIV MAS IMPORTANTES*/
/* CABECERA */

#mainHeader {
border:1px solid grey;
height:15%;
width:95%;
box-shadow: 13px 13px 5px white;
min-width:900px;
border: 3px solid white;
background: -webkit-linear-gradient(180deg,red, orange); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, orange); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, orange); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, orange); /* Standard syntax */
border-radius:10px;;

}

/*TITULO HEADER*/
header h1 {
font-family: 'Special Elite', cursive;
font-size:80px;
color:white;
margin:10px 25px 0px 25px;
text-align:center;
background-color:#FF0000;
text-shadow: 7px 7px 7px #4169E1;
border:5px solid white;
background: rgb(191,210,85); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(191,210,85,1) 0%, rgba(122,168,38,1) 31%, rgba(114,170,0,1) 44%, rgba(210,224,51,1) 93%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(31%,rgba(122,168,38,1)), color-stop(44%,rgba(114,170,0,1)), color-stop(93%,rgba(210,224,51,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(122,168,38,1) 31%,rgba(114,170,0,1) 44%,rgba(210,224,51,1) 93%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(122,168,38,1) 31%,rgba(114,170,0,1) 44%,rgba(210,224,51,1) 93%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(122,168,38,1) 31%,rgba(114,170,0,1) 44%,rgba(210,224,51,1) 93%); /* IE10+ */
background: linear-gradient(135deg, rgba(191,210,85,1) 0%,rgba(122,168,38,1) 31%,rgba(114,170,0,1) 44%,rgba(210,224,51,1) 93%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#d2e033',GradientType=1 );
transform: rotateY(-10deg);
   animation: anim 70s linear infinite;
}

@keyframes anim {
   0% {transform: rotateY(-0deg) rotatex(10deg);}
   50% {transform: rotateY(-30deg) rotatex(50deg);}
  50% {transform: rotateY(-40deg) rotatex(60deg);}
  100% {transform: rotateY(-0deg) rotatex(0deg);}
}

header h2 {
font-size:26px;
text-align:center;
margin:5px 100px 5px 100px;
font-family: 'Special Elite', cursive;
color:white;
}

/*Elementos personalizados todo lo que no tenga que ver con estructura*/
header h1, header2{
display:block;
}

.typewrite{
color:black;
}
/*fin HEADER*/
/* NOTICIAS CABECERA-DESTACADOS.-DESPUES DEL MENU */
/* DENTRO LLEVA 4 DIV NOTICIAS1 CON FOTO */

.noticiasarriba{
font-family:'Special Elite',cursive;
width:98%;
float:left;
min-width:1200px;
}

article.noticias1{
height:150px;
width:24%;
float:left;
font-size:16px;
}

/* NOTICIAS DE ARRIBA.-DEBAJO DEL MENU*/

article.noticias1{
border:2px solid #888888;
border-top-right-radius:10px;
color:black;
background-color:#FFFACD;
overflow:hidden;
box-shadow: 10px 10px 10px #E8E8E8;
margin:5px 5px 5px 0px;
}

/* PRINCIPAL INCLUYE NAV,CONTENIDO Y ASIDE */
/*PRINCIPAL*/
.principal{
width:95%;
height:1300px;
margin:5px 5px 5px 5px;
float:left; 
min-width:1300px;
}

	
.principal{
border:2px solid black;
background-color:#C8C8C8;
border-radius:25px;
}	


/* NAV */
nav {
float:left;
height:95%;
width:20%;
}
	
nav {
color:black;
margin:5px 5px 5px 5px;
background-image: url(../imagenes/fancy_deboss.png);
background-repeat: repeat;
border-radius:25px;
box-shadow: 13px 13px 8px #888888;
overflow:scroll;
border:1px solid black;
}

#firma{
font-family: 'Special Elite', cursive;
margin-left:70px;
}

#normal {
font-size:30px;
font-family: 'Special Elite', cursive;
float:left;
display:block;
border:2px solid black;
text-align:center;
color:black;
margin:5px 5px 5px 5px;
width:95%;
background: rgb(205,235,142); /* Old browsers */
background: -moz-linear-gradient(left, rgba(205,235,142,1) 0%, rgba(129,188,81,1) 89%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(205,235,142,1)), color-stop(89%,rgba(129,188,81,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(205,235,142,1) 0%,rgba(129,188,81,1) 89%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(205,235,142,1) 0%,rgba(129,188,81,1) 89%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(205,235,142,1) 0%,rgba(129,188,81,1) 89%); /* IE10+ */
background: linear-gradient(to right, rgba(205,235,142,1) 0%,rgba(129,188,81,1) 89%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#81bc51',GradientType=1 );
}

#sube{
text-align:center;
color: white;
background-color: #808000;
font-family: 'Special Elite', cursive;
}

#baja{
text-align:center;
color: white;
background-color: blue;
font-family: 'Special Elite', cursive;
}
/* FIN NAV */

/*DIV CONTENIDO*/
.contenido{
float:left;
height:98%;
width:60%;
margin:5px,5px,5px,5px;
background-image: url("../imagenes/fondo8.jpg");
}

.contenido {
border:4px solid #787878;
border-top-right-radius:2em;
margin:7rem,0,5rem,3rem; /*MARGEN NO EXPLICITADO*/
overflow:scroll;
color:black;
box-shadow: 13px 13px 8px #888888;
}

.contenido2{
float:left;
height:98%;
width:98%;
margin:5px,5px,5px,5px;
background-image: url("../imagenes/fondo8.jpg");
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
overflow:scroll;
}

/* ARTICULOS EN CONTENIDO */
article.primeraParte{
height:auto;
width:100%;
padding:5px,5px,5px,0px;
}
/*SON LAS NOTICIAS DE PORTADA Y SE MUESTRAN EN SCROLL*/


/*ARTICULOS EN CONTENIDO*/
article.primeraParte{
border:3px solid #787878;
border-radius:25px;
width:98%;
box-shadow: 5px 5px 4px #888888;
column-count:2;
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
overflow:hidden;
margin:5px 0px 15px 5px;
}
/*TITULAR CONTENIDO*/

h1.titular1{
font-size:150%;
text-align:center;
border:5px solid white;
border-top-right-radius:2em;
}

/* FIN DIV CONTENIDO */


/*FIN PRINCIPAL*/


/* ASIDE */

aside {
float:right;
width:17%;
height:95%;
background-image: url("../imagenes/fancy_deboss.png");
background-repeat: repeat;
padding:28px 0 0 0;	
overflow:hidden;
}

aside{
font-family: 'Special Elite', cursive;
border-radius:25px;
box-shadow: 6px 12px 2px white;
margin:5px 5px 5px 0px;
border:1px solid black;
}
	
/* BANNERS EN EL ASIDE*/

#banners{
width:90%;
margin: 5px auto 5px 10px;
font-family: 'Special Elite', cursive;
}

#banners img{
width:90%;
border: 1px solid grey;
border-radius: 2px;
}

#banners img:hover{
border: 1px solid black;
width:95%;
box-shadow: 5px 15px 5px white;
}

#banners h2{
text-align:center;
color:#33331E;
background-color:#FFFF99;
font-family: 'Special Elite', cursive;
}
/*fin banner*/
/* FIN ASIDE */


/* FOOTER */
footer{
width:95%;
float:left;
min-width:1300px;
}

footer{
font-family: 'Special Elite', cursive;
font-size:25px;
height:90px;
float:left;
text-align:center;
text-decoration: none;
padding:10px 5px 10px 5px;
border-radius:30px;
border: 3px solid black;
box-shadow: 10px 10px 5px lightgray;
display:inline;
background: -webkit-linear-gradient(180deg,red, orange); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, orange); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, orange); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, orange); /* Standard syntax */
border-radius:10px;;

}

.botonFooter{
width:30px;
height:30px;
margin:5px;
border-radius:20px;
float:left;
display:inline;
}

.botonFooter:hover{
opacity: 0.7;
filter: alpha(opacity=100);
}

/* CIRCULOS GIRATORIOS */
.dot{
display:inline-block;
width:80px;
margin:25px;
height:80px;
background: rgb(191,210,85); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(191,210,85,1) 0%, rgba(122,168,38,1) 31%, rgba(114,170,0,1) 44%, rgba(210,224,51,1) 93%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(31%,rgba(122,168,38,1)), color-stop(44%,rgba(114,170,0,1)), color-stop(93%,rgba(210,224,51,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(122,168,38,1) 31%,rgba(114,170,0,1) 44%,rgba(210,224,51,1) 93%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(122,168,38,1) 31%,rgba(114,170,0,1) 44%,rgba(210,224,51,1) 93%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(191,210,85,1) 0%,rgba(122,168,38,1) 31%,rgba(114,170,0,1) 44%,rgba(210,224,51,1) 93%); /* IE10+ */
background: linear-gradient(135deg, rgba(191,210,85,1) 0%,rgba(122,168,38,1) 31%,rgba(114,170,0,1) 44%,rgba(210,224,51,1) 93%); /* W3C */
border:2px solid #09f;
border-radius:50%;
animation:dotanim 20s infinite alternate;
float:right;
}

@keyframes dotanim{
from{transform:rotateY(180deg)}
to{transform:rotateY(0deg)}
}

/* FIN CIRCULOS GIRATORIOS */
/* FIN FOOTER */
	
	
/* VIDEO YOUTUBE */
			
#video1{
width:95%;
border: 5px solid white;
border-radius:1rem;
text-align:center;
padding:10px;
box-shadow: 15px 15px 5px lightgray;
margin:3px;
background-image: url("../imagenes/fondo7.jpg");
}
/* FIN VIDEO YOUTUBE */	
		
/* slide indice noticias */
.wrap1:before{
background:linear-gradient(180deg, #fff 0%,rgba(255,255,255,0) 100%);
content:'';
width:100%;
height:10%;
top:0;
left:0;
z-index:9;
}

.wrap1:after{
background:linear-gradient(0deg, #fff 0%,rgba(255,255,255,0) 100%);
content:'';
width:100%;
height:10%;
bottom:0;
left:0;
}

.wrap1{
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
color:#666;
width:200px;
height:620px;
overflow:hidden;
padding:20px;
background:#fff;
border-radius:15px;
box-shadow:0 10px 30px #000;
}

.article1{
font-size:20px;	
animation:up 70s linear infinite;
height:100%;
}
@keyframes up{
  0%{transform:translateY(0);}
  99%{transform:translateY(-400%);}
  100%{transform:translateY(0%);}    
}
/* fin slide indice noticias */

/* slide indice noticias2 */
.wrap2:before{
background:linear-gradient(180deg, #fff 0%,rgba(255,255,255,0) 100%);
content:'';
width:100%;
height:10%;
top:0;
left:0;
z-index:9;
}

.wrap2:after{
background:linear-gradient(0deg, #fff 0%,rgba(255,255,255,0) 100%);
content:'';
width:100%;
height:10%;
bottom:0;
left:0;
}

.wrap2{
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
color:white;
width:90%;
height:620px;
overflow:hidden;
padding:0px;
background:green;
border-radius:15px;
box-shadow:0 10px 30px #000;
}

.article2{
font-size:20px;	
animation:up 70s linear infinite;
height:100%;
}
@keyframes up{
  0%{transform:translateY(0);}
  99%{transform:translateY(-200%);}
  100%{transform:translateY(0%);}    
}
/* fin slide indice noticias */




/* guerra galaxias */
p#start
{
position: relative;
width: 40em;
font-size: 80%;
font-weight: 200;
margin: 10% auto;
color: #4ee;
opacity: 0;
z-index: 1;
-webkit-animation: intro 5s ease-out;
-moz-animation: intro 5s ease-out;
-ms-animation: intro 5s ease-out;
-o-animation: intro 5s ease-out;
animation: intro 5s ease-out;
}

@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-ms-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

.galaxias
{
position: absolute;
width: 2.6em;
left: 50%;
top: 25%;
font-size: 20em;
text-align: left;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
opacity: 0;
z-index: 1;
-webkit-animation: logo 15s ease-out 10s;
-moz-animation: logo 15s ease-out 10s;
-ms-animation: logo 15s ease-out 10s;
-o-animation: logo 15s ease-out 10s;
animation: logo 15s ease-out 10s;
}

galaxias sub
{
display: block;
font-size: 0.3em;
letter-spacing: 0;
line-height: 0.8em;
}

@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
}

/* the interesting 3D scrolling stuff */
#titles
{
position: absolute;
width: 18em;
height: 50em;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 250%;
text-align: justify;
overflow: hidden;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(300px) rotateX(25deg);
-moz-transform: perspective(300px) rotateX(25deg);
-ms-transform: perspective(300px) rotateX(25deg);
-o-transform: perspective(300px) rotateX(25deg);
transform: perspective(300px) rotateX(25deg);
}

#titles:after
{
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}

#titles p
{
text-align: justify;
margin: 0.8em 0;
}

#titles p.center
{
text-align: center;
}

#titles a
{
color: #ff6;
text-decoration: underline;
}

#titlecontent
{
position: absolute;
top: 100%;
-webkit-animation: scroll 100s linear 8s infinite;
-moz-animation: scroll 100s linear 8s infinite;
-ms-animation: scroll 100s linear 8s infinite;
-o-animation: scroll 100s linear 8s infinite;
animation: scroll 100s linear 8s infinite;
}

/* animation */
@-webkit-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-moz-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-ms-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-o-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

/* CUBO QUE DESPLIEGA LADOS */
::-webkit-scrollbar{width: 8px;}::-webkit-scrollbar-track{background: #2BA0C7;}::-webkit-scrollbar-thumb{background: #2BA0C7;}::-webkit-scrollbar-thumb:hover{background: #fff;}
.box{
width: 73px;
height: 73px;
margin-top:15%;
position: relative;
background-color: #fff;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);

}

.cssload-thecube {
width: 73px;
height: 73px;
margin: 50 auto;
margin-top: -74px;
position: relative;
transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(43,160,199);
	animation: cssload-fold-thecube 2.76s infinite linear both;
		-o-animation: cssload-fold-thecube 2.76s infinite linear both;
		-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
		-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
		-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
	transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
	transform: scale(1.1) rotateZ(90deg);
		-o-transform: scale(1.1) rotateZ(90deg);
		-ms-transform: scale(1.1) rotateZ(90deg);
		-webkit-transform: scale(1.1) rotateZ(90deg);
		-moz-transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3 {
	transform: scale(1.1) rotateZ(180deg);
		-o-transform: scale(1.1) rotateZ(180deg);
		-ms-transform: scale(1.1) rotateZ(180deg);
		-webkit-transform: scale(1.1) rotateZ(180deg);
		-moz-transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4 {
	transform: scale(1.1) rotateZ(270deg);
		-o-transform: scale(1.1) rotateZ(270deg);
		-ms-transform: scale(1.1) rotateZ(270deg);
		-webkit-transform: scale(1.1) rotateZ(270deg);
		-moz-transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before {
	animation-delay: 0.35s;
		-o-animation-delay: 0.35s;
		-ms-animation-delay: 0.35s;
		-webkit-animation-delay: 0.35s;
		-moz-animation-delay: 0.35s;
}
.cssload-thecube .cssload-c3:before {
	animation-delay: 0.69s;
		-o-animation-delay: 0.69s;
		-ms-animation-delay: 0.69s;
		-webkit-animation-delay: 0.69s;
		-moz-animation-delay: 0.69s;
}
.cssload-thecube .cssload-c4:before {
	animation-delay: 1.04s;
		-o-animation-delay: 1.04s;
		-ms-animation-delay: 1.04s;
		-webkit-animation-delay: 1.04s;
		-moz-animation-delay: 1.04s;
}



@keyframes cssload-fold-thecube {
	0%, 10% {
		transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-o-keyframes cssload-fold-thecube {
	0%, 10% {
		-o-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-o-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-o-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-ms-keyframes cssload-fold-thecube {
	0%, 10% {
		-ms-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-ms-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-ms-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-webkit-keyframes cssload-fold-thecube {
	0%, 10% {
		-webkit-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-webkit-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-webkit-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-moz-keyframes cssload-fold-thecube {
	0%, 10% {
		-moz-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-moz-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-moz-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}