CSS
body{
background:#f9b44a;
}
h1{
font-family:Verdana;
font-size:3em;
}
section{
position:relative;
width:100%;
min-height:500px;
margin:231px auto;
text-align:center;
}
.icono {
text-align:center;
vertical-align: center;
}
article{
width: 26%;
height:300px;
margin:90px auto;
display:inline-block;
}
.compu{
position:relative;
width:281px;
height:213px;
overflow:hidden;
background:#333;
border:12px solid black;
border-radius:12px;
margin:65px auto;
}
.template5{
position:absolute;
width:271px;
height: 428px;
margin:0px 0px;
-moz-animation: textmoveup9 3s alternate infinite;
-webkit-animation:textmoveup9 3s alternate infinite;
animation: textmoveup9 3s alternate infinite;
border-right:9px solid gray;
}
.arrow{
position:absolute;
display:block;
width:9px;
height:9px;
border-radius:100%;
background:white;
margin: 0px 271px;
-moz-animation: textmoveup 3s alternate infinite;
-webkit-animation:textmoveup 3s alternate infinite;
animation: textmoveup 3s alternate infinite;
}
.arrow::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 21px solid black;
margin: 3px -4px;
}
.arrow::after{
content:"";
display:block;
width:3px;
height:17px;
background:black;
margin:-3px 3px;
}
.one{
position:absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 6em;
height: 4em;
background: white;
margin:5px 21px;
}
.one::before{
content:"";
display:block;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(-90deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(249,214,124) 66%, rgb(249,214,124) 99%, rgb(249,214,124) 100%), -webkit-linear-gradient(-90deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,219,136) 66%, rgb(252,219,136) 100%), -webkit-linear-gradient(-90deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,214,126) 66%, rgb(252,214,126) 99%, rgb(252,214,126) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgba(1,96,82,1);
background: -moz-linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(249,214,124) 66%, rgb(249,214,124) 99%, rgb(249,214,124) 100%), -moz-linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,219,136) 66%, rgb(252,219,136) 100%), -moz-linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,214,126) 66%, rgb(252,214,126) 99%, rgb(252,214,126) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgba(1,96,82,1);
background: linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(249,214,124) 66%, rgb(249,214,124) 99%, rgb(249,214,124) 100%), linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,219,136) 66%, rgb(252,219,136) 100%), linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,214,126) 66%, rgb(252,214,126) 99%, rgb(252,214,126) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgba(1,96,82,1);
background-repeat: no-repeat;
background-position: 95% 333%, 5% 333%, 50% 333%, -21% 7%, -32% 7%, -43% 7%, -75% 7%, -49% 28%, -49% 81%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 25px 70px, 25px 70px, 25px 70px, 271px 6px, 271px 6px, 271px 6px, 102px 17px, 97px 9px, 97px 9px;
background-size: 25px 70px, 25px 70px, 25px 70px, 271px 6px, 271px 6px, 271px 6px, 102px 17px, 97px 9px, 97px 9px;
margin:0px 132px
}
.two{
position:absolute;
box-sizing: content-box;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(0deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -webkit-linear-gradient(0deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -webkit-linear-gradient(0deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -webkit-linear-gradient(-90deg, rgba(219,89,8,1) 0, rgba(219,89,8,1) 31%, rgba(249,251,252,1) 32%, rgba(249,251,252,1) 67%, rgba(219,89,8,1) 67%, rgba(219,89,8,1) 100%), rgba(255,255,255,1);
background: -moz-linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -moz-linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -moz-linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -moz-linear-gradient(180deg, rgba(219,89,8,1) 0, rgba(219,89,8,1) 31%, rgba(249,251,252,1) 32%, rgba(249,251,252,1) 67%, rgba(219,89,8,1) 67%, rgba(219,89,8,1) 100%), rgba(255,255,255,1);
background: linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), linear-gradient(180deg, rgba(219,89,8,1) 0, rgba(219,89,8,1) 31%, rgba(249,251,252,1) 32%, rgba(249,251,252,1) 67%, rgba(219,89,8,1) 67%, rgba(219,89,8,1) 100%), rgba(255,255,255,1);
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
background-position: 1155% 49%, 626% 49%, 112% 49%, 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 90px 21px, 90px 21px, 90px 21px, auto auto;
background-size: 90px 21px, 90px 21px, 90px 21px, auto auto;
margin:74px 21px;
}
.two::before{
content:"";
display:block;
box-sizing: content-box;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(0deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background: -moz-linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background-repeat: no-repeat;
background-position: -90% 86%, -49% 86%, -7% 86%, -6% 12%, -90% 12%, -47% 12%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 172px 21px;
background-size: 172px 21px;
margin:0px 132px
}
.tres{
position:absolute;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(0deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background: -moz-linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background-repeat: no-repeat;
background-position: -89% 50%, -49% 50%, -8% 50%, -8% 7%, -49% 7%, -89% 7%, -89% 95%, -49% 95%, -8% 95%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 172px 33px, 172px 33px, 172px 33px, 172px 7px, 172px 7px, 172px 7px, 172px 7px, 172px 7px, 172px 7px;
background-size: 172px 33px, 172px 33px, 172px 33px, 172px 7px, 172px 7px, 172px 7px, 172px 7px, 172px 7px, 172px 7px;
margin:144px 21px;
}
.tres::before{
content:"";
display:block;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(0deg, rgba(249,135,34,1) 0, rgba(249,135,34,1) 27%, rgba(252,234,187,0) 28%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), -webkit-linear-gradient(0deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), -webkit-linear-gradient(0deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), rgb(255, 255, 255);
background: -moz-linear-gradient(90deg, rgba(249,135,34,1) 0, rgba(249,135,34,1) 27%, rgba(252,234,187,0) 28%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), -moz-linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), -moz-linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(249,135,34,1) 0, rgba(249,135,34,1) 27%, rgba(252,234,187,0) 28%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), rgb(255, 255, 255);
background-repeat: no-repeat;
background-position: -12% 12%, -65% 90%, -8% 90%, -121% 90%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 231px 30px, 152px 23px, 152px 23px, 152px 23px;
background-size: 231px 30px, 152px 23px, 152px 23px, 152px 23px;
margin:0px 132px
}
.cuatro{
position:absolute;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(0deg, rgb(158,156,156) 0, rgb(158,156,156) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(224,71,71,1) 0, rgba(224,71,71,1) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(3,128,191,1) 0, rgba(3,128,191,1) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background: -moz-linear-gradient(90deg, rgb(158,156,156) 0, rgb(158,156,156) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(224,71,71,1) 0, rgba(224,71,71,1) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(3,128,191,1) 0, rgba(3,128,191,1) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background: linear-gradient(90deg, rgb(158,156,156) 0, rgb(158,156,156) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(224,71,71,1) 0, rgba(224,71,71,1) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(3,128,191,1) 0, rgba(3,128,191,1) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background-repeat: no-repeat;
background-position: -88% 86%, -88% 21%, -5% 47%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 162px 17px, 162px 30px, 231px 50px;
background-size: 162px 17px, 162px 30px, 231px 50px;
margin:216px 21px;
}
.cuatro::before{
content:"";
display:block;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(101,201,247,1) 0, rgba(101,201,247,1) 25%, rgba(183,222,237,0) 26%, rgba(183,222,237,0) 100%), rgba(255,142,50,1);
background: -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(101,201,247,1) 0, rgba(101,201,247,1) 25%, rgba(183,222,237,0) 26%, rgba(183,222,237,0) 100%), rgba(255,142,50,1);
background: linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(101,201,247,1) 0, rgba(101,201,247,1) 25%, rgba(183,222,237,0) 26%, rgba(183,222,237,0) 100%), rgba(255,142,50,1);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-position: 85% 93%, -13% 93%, -112% 93%, 86% 50%, -13% 50%, -114% 50%, 89% 8%, -13% 8%, -114% 9%, 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, auto auto;
background-size: 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, auto auto;
margin:0px 132px;
}
.cinco{
position:absolute;
width: 6em;
height: 4em;
border: none;
font: normal 100%/normal "Times New Roman", Times, serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(249,159,162) 74%, rgb(249,159,162) 100%), -webkit-linear-gradient(-90deg, rgb(249,144,144) 0, rgb(249,144,144) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), -webkit-linear-gradient(-90deg, rgb(249,159,162) 0, rgb(249,159,162) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), -webkit-linear-gradient(-90deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), -webkit-linear-gradient(-90deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), rgb(107, 178, 219);
background: -moz-linear-gradient(180deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(249,159,162) 74%, rgb(249,159,162) 100%), -moz-linear-gradient(180deg, rgb(249,144,144) 0, rgb(249,144,144) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), -moz-linear-gradient(180deg, rgb(249,159,162) 0, rgb(249,159,162) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), -moz-linear-gradient(180deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), -moz-linear-gradient(180deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), rgb(107, 178, 219);
background: linear-gradient(180deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(249,159,162) 74%, rgb(249,159,162) 100%), linear-gradient(180deg, rgb(249,144,144) 0, rgb(249,144,144) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), linear-gradient(180deg, rgb(249,159,162) 0, rgb(249,159,162) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), linear-gradient(180deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), linear-gradient(180deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), rgb(107, 178, 219);
background-repeat: repeat, repeat, repeat, no-repeat, no-repeat;
background-position: 57% 49%, 50% 14%, 50% 50%, 55px 172%, 4px 172%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto, auto auto, auto auto, 37px 50px, 37px 50px;
background-size: auto auto, auto auto, auto auto, 37px 50px, 37px 50px;
margin:287px 21px;
}
.cinco::before{
content:"";
display:block;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -webkit-linear-gradient(-90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 84%, rgba(183,222,237,0) 84%, rgb(95,182,244) 84%, rgb(95,182,244) 100%), -webkit-linear-gradient(-90deg, rgb(102,196,255) 0, rgb(102,196,255) 30%, rgba(183,222,237,0) 31%, rgba(183,222,237,0) 100%), rgb(249, 122, 122);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -moz-linear-gradient(180deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 84%, rgba(183,222,237,0) 84%, rgb(95,182,244) 84%, rgb(95,182,244) 100%), -moz-linear-gradient(180deg, rgb(102,196,255) 0, rgb(102,196,255) 30%, rgba(183,222,237,0) 31%, rgba(183,222,237,0) 100%), rgb(249, 122, 122);
background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 84%, rgba(183,222,237,0) 84%, rgb(95,182,244) 84%, rgb(95,182,244) 100%), linear-gradient(180deg, rgb(102,196,255) 0, rgb(102,196,255) 30%, rgba(183,222,237,0) 31%, rgba(183,222,237,0) 100%), rgb(249, 122, 122);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-position: 93% 231%, 50% 231%, 6% 231%, -3% 73%, 36% 95%, 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 21px 80px, 30px 80px, 21px 80px, 96px 21px, 97px 109px, auto auto;
background-size: 21px 80px, 30px 80px, 21px 80px, 96px 21px, 97px 109px, auto auto;
margin:0px 132px
}
.seis{
position:absolute;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(0deg, rgba(119,208,249,1) 0, rgba(119,208,249,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(206,202,202) 0, rgb(206,202,202) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,129,129,1) 0, rgba(249,129,129,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(252,129,58,1) 0, rgba(252,129,58,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(165,162,162) 0, rgb(165,162,162) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(2,102,75,1) 0, rgba(2,102,75,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background: -moz-linear-gradient(90deg, rgba(119,208,249,1) 0, rgba(119,208,249,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(206,202,202) 0, rgb(206,202,202) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,129,129,1) 0, rgba(249,129,129,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(252,129,58,1) 0, rgba(252,129,58,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(165,162,162) 0, rgb(165,162,162) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(2,102,75,1) 0, rgba(2,102,75,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(119,208,249,1) 0, rgba(119,208,249,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(206,202,202) 0, rgb(206,202,202) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,129,129,1) 0, rgba(249,129,129,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(252,129,58,1) 0, rgba(252,129,58,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(165,162,162) 0, rgb(165,162,162) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(2,102,75,1) 0, rgba(2,102,75,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), rgb(255, 255, 255);
background-repeat: no-repeat;
background-position: -421% 12%, -230% 12%, -45% 12%, -45% 88%, -230% 88%, -416% 88%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 112px 21px;
background-size: 112px 21px;
margin:357px 21px;
}
.seis::before{
content:"";
display:block;
width: 6em;
height: 4em;
background: -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,157,172,1) 0, rgba(249,157,172,1) 25%, rgba(252,234,187,0) 27%, rgba(252,234,187,0) 100%), rgba(148,196,247,1);
background: -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,157,172,1) 0, rgba(249,157,172,1) 25%, rgba(252,234,187,0) 27%, rgba(252,234,187,0) 100%), rgba(148,196,247,1);
background: linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,157,172,1) 0, rgba(249,157,172,1) 25%, rgba(252,234,187,0) 27%, rgba(252,234,187,0) 100%), rgba(148,196,247,1);
background-repeat: no-repeat;
background-position: -3% 95%, -3% 51%, -3% 5%, -422% 88%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 271px 18px, 271px 18px, 271px 18px, 112px 74px;
background-size: 271px 18px, 271px 18px, 271px 18px, 112px 74px;
margin:0px 132px
}
@-webkit-keyframes textmoveup{
0%{margin-top: 0px;}
25%{margin-top: 0px;}
50%{margin-top:403px;}
100%{margin-top:403px;}
}
@-moz-keyframes textmoveup{
0%{margin-top: 0px;}
25%{margin-top: 0px;}
50%{margin-top:403px;}
100%{margin-top:403px;}
}
@keyframes textmoveup{
0%{margin-top: 0px;}
25%{margin-top: 0px;}
50%{margin-top:403px;}
100%{margin-top:403px;}
}
@-webkit-keyframes textmoveup3{
0%{margin-top: -214px;}
25%{margin-top: -214px;}
50%{margin-top: -428px;}
100%{margin-top:-428px;}
}
@-moz-keyframes textmoveup3{
0%{margin-top: -214px;}
25%{margin-top: -214px;}
50%{margin-top: -428px;}
100%{margin-top:-428px;}
}
@keyframes textmoveup3{
0%{margin-top: -214px;}
25%{margin-top: -214px;}
50%{margin-top: -428px;}
100%{margin-top:-428px;} }
.template{
position:absolute;
width:231px;
height:214px;
background:#333;
margin:0 25px;
}
.h{
position:absolute;
display:block;
width:201px;
height:70px;
opacity:1;
font-size:12px;
margin: 0px -23px;
background:#fc6621;
-moz-animation: colores 3s alternate infinite;
-ms-animation: colores 3s alternate infinite;
-webkit-animation:colores 3s alternate infinite;
-o-animation:colores 3s alternate infinite;
animation: colores 3s alternate infinite;
}
.h::before{
content:"LOGO";
position:absolute;
display:block;
font-family:Verdana;
font-size:16px;
color:white;
font-weight:700;
margin:40px 9px;
-moz-animation: drag6 3s alternate infinite;
-ms-animation: drag6 3s alternate infinite;
-webkit-animation: drag6 3s alternate infinite;
-o-animation:drag6 3s alternate infinite;
animation: drag6 3s alternate infinite;
}
.n{
position:absolute;
width:35px;
height:12px;
background:white;
margin:12px 60px;
}
.n::before{
content:"";
display:block;
width:35px;
height:12px;
background:white;
margin:0px 50px;
}
.n::after{
content:"";
display:block;
width:35px;
height:12px;
background:white;
margin:-12px 100px;
}
.sli{
position:absolute;
width:201px;
height:162px;
background:white;
margin:70px -23px;
}
.sli5{
position:absolute;
width:152px;
height:90px;
opacity:1;
background:lightgray;
margin: 95px 3px;
-moz-animation: drag3 3s alternate infinite;
-ms-animation: drag3 3s alternate infinite;
-webkit-animation:drag3 3s alternate infinite;
-o-animation:drag3 3s alternate infinite;
animation: drag3 3s alternate infinite;
}
.b{
position:absolute;
display:block;
width:271px;
height:162px;
opacity:1;
font-size:12px;
margin: 212px auto;
background:#eee;
}
ul.dragable{
position:absolute;
width:50px;
height:55px;
list-style:none;
margin:80px 182px;
}
ul.dragable li{
display:inline-block;
width:12px;
height:12px;
background: white;
margin:2px 1px;
}
ul.dragableli:nth-child(1){
background:white;
}
ul.dragable li:nth-child(2){
background:gray;
}
ul.dragable li:nth-child(3){
background:black;
}
ul.dragable li:nth-child(4){
background:#fabbc3;
}
ul.dragable li:nth-child(5){
background:#0380bf;
}
ul.dragable li:nth-child(6){
background:#f46534;;
}
ul.dragable li:nth-child(7){
background:#0abf9b;
}
ul.dragable li:nth-child(8){
background:#a566ed;
}
ul.dragable li:nth-child(9){
background:yellow;
}
.cont{
position:absolute;
opacity:1;
width:50px;
height:30px;
margin:152px 221px;
background:lightgray;
-moz-animation:drag 3s alternate infinite;
-webkit-animation: drag 3s alternate infinite;
animation: drag 3s alternate infinite;
}
.compu3{
position:relative;
width:281px;
height:213px;
overflow:hidden;
background:#333;
border:12px solid black;
border-radius:12px;
margin:65px auto;
}
.arrow3{
position:absolute;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 12px solid black;
margin: 132px 267px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-animation:sube 3s alternate infinite;
-ms-animation: sube 3s alternate infinite;
-webkit-animation:sube 3s alternate infinite;
-o-animation:sube 3s alternate infinite;
animation: sube 3s alternate infinite;
}
.arrow3::before{
content:"";
display:block;
width:3px;
height:12px;
background:black;
margin:12px -2px;
}
@-webkit-keyframes colores{
0%{background:#f46534;}
25%{background:#f46534;}
50%{ background:#0380bf; }
100%{ background:#0389bf; }
}
@keyframes colores{
0%{background:#f46534;}
25%{background:#f46534;}
50%{ background:#0380bf; }
100%{ background:#0389bf; }
}
@-moz-keyframes colores{
0%{background:#f46534;}
25%{background:#f46534;}
50%{ background:#0380bf; }
100%{ background:#0389bf; }
}
@-webkit-keyframes drag {
0%,25%,35%{opacity:1; }
50%,100%{ opacity:0;}
}
@-moz-keyframes drag {
0%,25%,35%{opacity:1; }
50%,100%{ opacity:0;}
}
@keyframes drag {
0%,25%,35%{opacity:1; }
50%,100%{ opacity:0;}
}
@-webkit-keyframes drag3 {
0%{opacity:0;}
25%{opacity:0;}
50%{opacity: 1;}
100%{opacity: 1;}
}
@-moz-keyframes drag3 {
0%{opacity:0;}
25%{opacity:0;}
50%{opacity: 1;
}
100%{opacity: 1;
}
}
@keyframes drag3 {
0%{opacity:0;}
25%{opacity:0;}
50%{opacity: 1;}
100%{opacity: 1;}
}
@-webkit-keyframes drag6 {
0%{margin:30px 217px}
25%{margin:30px 217px}
50%{ margin:40px 9px;}
100%{ margin:40px 9px;}
}
@-moz-keyframes drag6 {
0%{margin:30px 217px}
25%{margin:30px 217px}
50%{ margin:40px 9px;}
100%{ margin:40px 9px;}
}
@keyframes drag6 {
0%{margin:30px 217px}
25%{margin:30px 217px}
50%{ margin:40px 9px;}
100%{ margin:40px 9px;}
}
@-moz-keyframes drag7 {
0%{-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);}
25%{-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);}
50%{-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
100%{-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
}
@keyframes drag7 {
0%{-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);}
25%{-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);}
50%{-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
100%{-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
}
@-webkit-keyframes drag7 {
0%{-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);}
25%{-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);}
50%{-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
100%{-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
}
@-webkit-keyframes sube {
0%{margin: 102px 267px;}
25%{margin: 102px 267px;}
50%{ margin: 102px 243px;}
100%{ margin: 102px 243px;}
}
@-moz-keyframes sube {
0%{margin: 102px 267px;}
25%{margin: 102px 267px;}
50%{ margin: 102px 243px;}
100%{ margin: 102px 243px;}
}
@keyframes sube {
0%{margin: 102px 267px;}
25%{margin: 102px 267px;}
50%{ margin: 102px 243px;}
100%{ margin: 102px 243px;}
}
.template3{
position:absolute;
width:271px;
height:393px;
background:#333;
margin:0 auto;
-moz-animation: textmoveup9 3s alternate infinite;
-webkit-animation:textmoveup9 3s alternate infinite;
animation: textmoveup9 3s alternate infinite;
}
.hj{
position:absolute;
display:block;
width:291px;
height:70px;
opacity:1;
font-size:12px;
margin: 0px -23px;
background:#0380bf;
}
.hj::before{
content:"LOGO";
position:absolute;
display:block;
font-family:Verdana;
font-size:16px;
color:white;
font-weight:700;
margin:25px 35px;
}
.nj{
position:absolute;
width:40px;
height:12px;
background:white;
margin:12px 121px;
}
.nj::before{
content:"";
display:block;
width:40px;
height:12px;
background:white;
margin:0px 50px;
}
.nj::after{
content:"";
display:block;
width:40px;
height:12px;
background:white;
margin:-12px 100px;
}
.sli3{
position:absolute;
width:291px;
height:162px;
background:white;
margin:70px -23px;
}
.sli3::before{
content:"";
display:block;
width:172px;
height:90px;
background: rgba(226,226,226,1);
background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(226,226,226,1)), color-stop(50%, rgba(226,226,226,1)), color-stop(50%, rgba(209,209,209,1)), color-stop(100%, rgba(209,209,209,1)));
background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%);
background: -o-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%);
background: -ms-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%);
background: linear-gradient(to right, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1', GradientType=1 );
margin: 25px 71px;
}
.b3{
position:absolute;
display:block;
width:291px;
height:162px;
opacity:1;
font-size:12px;
margin: 212px -23px;
background:#eee;
}
ul.website{
position:absolute;
width:271px;
height:112px;
text-align:center;
list-style:none;
margin:0 -18px;
}
ul.website li{
display:inline-block;
width:35px;
height:35px;
background: #e04747;
margin:12px 9px;
}
ul.website li:nth-child(9){
width:70px;
height:30px;
background:#0380bf;
border-radius:9px;
margin-top:0px;
}
ul.website li:nth-child(9)::before{
content:"BUY";
display:block;
width:70px;
height:30px;
font-family:Verdana;
font-weight:700;
color:white;
text-align:center;
margin-top:9px;
}
.foo{
position:absolute;
width:270px;
height:58px;
background:#0380bf;
margin:162px 21px;
}
.foo::before{
content:"Copyright - 2015";
display:block;
font-family:Verdana;
font-size:1.2em;
color:white;
text-align:center;
margin-top:21px;
}
.compu5{
position:relative;
width:281px;
height:213px;
overflow:hidden;
background:#333;
border:12px solid black;
border-radius:12px;
margin:65px auto;
}
.barra3{
position:absolute;
width:9px;
height:450px;
background:gray;
margin:0px 271px;
}
.barra3::before{
content:"";
display:block;
width:9px;
height:9px;
border-radius:100%;
background:white;
margin: 0 0;
-moz-animation: textmoveup7 3s alternate infinite;
-ms-animation:textmoveup7 3s alternate infinite;
-webkit-animation: textmoveup 3s alternate infinite;
-o-animation:textmoveup7 3s alternate infinite;
animation: textmoveup7 3s alternate infinite;
}
@-webkit-keyframes textmoveup7{
0%{margin-top: 3px;}
25%{margin-top: 3px;}
50%{margin-top:192px;}
100%{margin-top:192px;}
}
@-moz-keyframes textmoveup7{
0%{margin-top: 3px;}
25%{margin-top: 3px;}
50%{margin-top:192px;}
100%{margin-top:192px;}
}
@keyframes textmoveup7{
0%{margin-top: 3px;}
25%{margin-top: 3px;}
50%{margin-top:192px;}
100%{margin-top:192px;}
}
@-webkit-keyframes textmoveup9{
0%{margin-top: 0px;}
25%{margin-top: 0px;}
50%{margin-top: -212px;}
100%{margin-top:-212px;}
}
@-moz-keyframes textmoveup9{
0%{margin-top: 0px;}
25%{margin-top: 0px;}
50%{margin-top: -212px;}
100%{margin-top:-212px;}
}
@keyframes textmoveup9{
0%{margin-top: 0px;}
25%{margin-top: 0px;}
50%{margin-top: -212px;}
100%{margin-top:-212px;}
}
