@font-face{
    font-family: Lato;
    font-style: normal;
    font-weight: 300;
    src: url(//fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPHw.woff) format("woff");
}
@font-face{
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    src: local("Lato Regular"),local(Lato-Regular),url(//fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wWg.eot?#) format("eot"),url(//fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format("woff2"),url(//fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wWA.woff) format("woff");
}
@font-face{
    font-family: Lato;
    font-style: normal;
    font-weight: 700;
    src: local("Lato Bold"),local(Lato-Bold),url(//fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPHQ.eot?#) format("eot"),url(//fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format("woff2"),url(//fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPHw.woff) format("woff");
}
@font-face{
    font-family: Lato;
    font-style: normal;
    font-weight: 900;
    src: local("Lato Black"),local(Lato-Black),url(//fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh50XSwiPHQ.eot?#) format("eot"),url(//fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh50XSwiPGQ.woff2) format("woff2"),url(//fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh50XSwiPHw.woff) format("woff");
}
/* body para rotacion */
body{
    background: url("../../vectores/fondo-gris.svg") no-repeat center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-wrap: wrap; */
    height: 100vh;
    color: white;
    font-family: "Lato";
    font-size: 14px;
    font-weight: 400;
    -webkit-perspective: 200px;
    perspective: 200px;
    /* perspective-origin: left; */
    /* perspective-origin: top right; */
}
.container{
    -webkit-animation-name: estrellas;
    animation-name: estrellas;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    background: url("../../vectores/particulas1.svg") no-repeat 50% 23%;
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
@-webkit-keyframes estrellas{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes estrellas{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.textos{
    /* border: red 1px solid; */
    height: 100%;
    width: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 3em
}
.textos .titulo{
    font-family: "Lato";
    font-size: 3em;
    font-weight: 900;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    opacity: 0;
}
.textos .mensaje{
    font-size: 1.2em;
    margin: 15px 0px;
    opacity: 0;
}
.textos .botones{
    opacity: 0;
}
.textos ul{
    list-style-image: url(../../vectores/check-ico.svg);
    font-size: 2.5em;
    line-height: 0.7em;
    -webkit-margin-before: 15px;
    margin-block-start: 15px;
}
.textos ul li a{
    font-size: 0.5em;
    margin: 15px 0px;
    color: white;
    text-decoration: none;
}
.textos li a:hover{
    color: #FD4101;
}
@-webkit-keyframes gracias{
    0%{
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
    100%{
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}
@keyframes gracias{
    0%{
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
    100%{
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}
.mascara {
    height: 600px;
    width: 600px;
    border-radius:50%;
    /* border: solid #1DC2DA 1px; */
    -webkit-mask-image: -webkit-radial-gradient(circle, white, white); /*This is a frivolous workaround to have the border-radius viewable on Safari. More info here: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera*/
    position: absolute;
    top: 15%;
    -webkit-transform-origin: 100px 100px;
    transform-origin: 100px 100px;
    overflow: hidden;
}
.cubo1{
    position: absolute;
    left: 93px;
    -webkit-animation-name: cubo1;
    animation-name: cubo1;
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
.cubo1 .ladoA {
    width: 110px;
    height: 110px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#0079FF), to(#17B2E2));
    background-image: linear-gradient(0deg, #0079FF, #17B2E2);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* background: url(../../vectores/check-ico.svg) no-repeat; */
    /* background-size: cover; */
}
.cubo1 .ladoB {
    width: 77px;
    height: 110px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#1DC2DA), to(#0079FF));
    background-image: linear-gradient(0deg, #1DC2DA, #0079FF);
    position: absolute;
    left: 90px;
    top: 0px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* background: url(../../vectores/check-ico.svg) no-repeat; */
    /* background-size: cover; */
}
@-webkit-keyframes cubo1{
    0%{
        /* opacity: 1; */
        top:581px;
    }
    100%{
        /* opacity: 0; */
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
        top:481px;
    }
}
@keyframes cubo1{
    0%{
        /* opacity: 1; */
        top:581px;
    }
    100%{
        /* opacity: 0; */
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
        top:481px;
    }
}
.cubo2{
    position: relative;
    left: 0px;
    top: -609px;
    -webkit-animation-name: cubo2;
    animation-name: cubo2;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
.cubo2 .ladoA {
    width: 94px;
    height: 310px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#0079FF), to(#17B2E2));
    background-image: linear-gradient(0deg, #0079FF, #17B2E2);
    position: absolute;
    left: 210px;
    top: 300px;
    -webkit-animation: zoom 6s linear infinite alternate;
    animation:         zoom 6s linear infinite alternate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* background: url(../../vectores/check-ico.svg) no-repeat; */
    /* background-size: cover; */
}
.cubo2 .ladoB {
    width: 94px;
    height: 310px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#1DC2DA), to(#0079FF));
    background-image: linear-gradient(0deg, #1DC2DA, #0079FF);
    position: absolute;
    left: 300px;
    top: 300px;
    -webkit-animation: zoom 6s linear infinite alternate;
    animation:         zoom 6s linear infinite alternate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* background: url(../../vectores/check-ico.svg) no-repeat; */
    /* background-size: cover; */
}
@-webkit-keyframes cubo2{
    0%{
        top:0px;
    }
    100%{
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
        top:-609px;
    }
}
@keyframes cubo2{
    0%{
        top:0px;
    }
    100%{
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
        top:-609px;
    }
}
.cubo3{
    position: absolute;
    left: 133px;
    top: 128px;
    -webkit-animation-name: cubo3;
    animation-name: cubo3;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
.cubo3 .ladoA {
    width: 90px;
    height: 160px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#0079FF), to(#17B2E2));
    background-image: linear-gradient(0deg, #0079FF, #17B2E2);
    position: absolute;
    left: 210px;
    top: 300px;
    -webkit-animation: zoom 6s linear infinite alternate;
    animation:         zoom 6s linear infinite alternate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* background: url(../../vectores/check-ico.svg) no-repeat; */
    /* background-size: cover; */
}
.cubo3 .ladoB {
    width: 90px;
    height: 160px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#1DC2DA), to(#0079FF));
    background-image: linear-gradient(0deg, #1DC2DA, #0079FF);
    position: absolute;
    left: 300px;
    top: 300px;
    -webkit-animation: zoom 6s linear infinite alternate;
    animation:         zoom 6s linear infinite alternate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* background: url(../../vectores/check-ico.svg) no-repeat; */
    /* background-size: cover; */
}
@-webkit-keyframes cubo3{
    0%{
        top: 650px;
    }
    100%{
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
        top: 128px;
    }
}
@keyframes cubo3{
    0%{
        top: 650px;
    }
    100%{
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
        top: 128px;
    }
}
.circulos .circulo1{
    position: relative;
    top:325px;
    left:75px;
    height: 200px;
    width: 200px;
    border-radius:50%;
    background-image: linear-gradient(160deg, #1DC2DA -30%, transparent 55%);
    -webkit-animation-name: circulos;
    animation-name: circulos;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.circulos .circulo2{
    position: relative;
    top:8px;
    left:333px;
    height: 200px;
    width: 200px;
    border-radius:50%;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-30%, #1DC2DA), color-stop(55%, transparent));
    background-image: linear-gradient(180deg, #1DC2DA -30%, transparent 55%);
    -webkit-animation-name: circulos;
    animation-name: circulos;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.circulos .circulo3{
    position: relative;
    top:-29px;
    left:406px;
    height: 200px;
    width: 200px;
    border-radius:50%;
    background-image: linear-gradient(190deg, #1DC2DA -30%, transparent 55%);
    -webkit-animation-name: circulos;
    animation-name: circulos;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
@-webkit-keyframes circulos{
    0%{opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
    100%{opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
@keyframes circulos{
    0%{opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
    100%{opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
.mujer{
    position: relative;
    width: 134px;
    height: 204px;
    top:-296px;
    left: 411px;
    -webkit-animation: mujer 1s ease-in-out 0.5s forwards;
    animation: mujer 1s ease-in-out 0.5s forwards;
    opacity: 0;
}
@-webkit-keyframes mujer{
    0%{opacity: 0; top:-320px}
    100%{opacity: 1; top:-296px;}
}
@keyframes mujer{
    0%{opacity: 0; top:-320px}
    100%{opacity: 1; top:-296px;}
}
.hombre1{
    position: relative;
    width: 110px;
    height: 200px;
    top:-631px;
    left: 294px;
    -webkit-animation: hombre1 1s ease-in-out 1.2s forwards;
    animation: hombre1 1s ease-in-out 1.2s forwards;
    opacity: 0;
}
@-webkit-keyframes hombre1{
    0%{opacity: 0; top:-631px}
    100%{opacity: 1; top:-631px;}
}
@keyframes hombre1{
    0%{opacity: 0; top:-631px}
    100%{opacity: 1; top:-631px;}
}
.hombre2{
    position: relative;
    width: 95px;
    height: 200px;
    top:-643px;
    left: 78px;
    -webkit-animation: hombre2 1s ease-in-out 0.8s forwards;
    animation: hombre2 1s ease-in-out 0.8s forwards;
    opacity: 0;
}
@-webkit-keyframes hombre2{
    0%{opacity: 0; top:-603px}
    50%{top:-680px}
    100%{opacity: 1; top:-643px;}
}
@keyframes hombre2{
    0%{opacity: 0; top:-603px}
    50%{top:-680px}
    100%{opacity: 1; top:-643px;}
}
.movil{
    position: absolute;
    bottom: -5px;
    left: 240px;
    height: 138px;
    width: 85px;
    -webkit-animation: movil 1.5s ease-in-out 0s forwards;
    animation: movil 1.5s ease-in-out 0s forwards;
    opacity: 0

}
.movil .carcasa{
    position: absolute;
    top: 0px;
    width: 80px;
    height: 138px;
    border-radius:10px;
    background-image: -webkit-gradient(linear, left top, right top, from(#1DC2DA), to(#9DEBF4));
    background-image: linear-gradient(90deg, #1DC2DA, #9DEBF4);
}
.movil .fondo{
    position: absolute;
    left:55px;
    top: 0px;
    width: 80px;
    height: 138px;
    background-image: -webkit-gradient(linear, left top, right top, from(#1DC2DA), to(#0079FF));
    background-image: linear-gradient(90deg, #1DC2DA, #0079FF);
    border-radius:10px;
    -webkit-transform: translate(-50px);
    transform: translate(-50px);
}
.movil .sombra{
    position: absolute;
    left:127px;
    top: 0px;
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-top: 50px solid transparent;
    border-left: 34px solid #333333;
    border-bottom: 81px solid #333333;
    -webkit-transform: translate(-50px);
    transform: translate(-50px);
    opacity: 0.05;
}
.movil .camara{
    position: relative;
    margin: 7px auto;
    height: 4px;
    width: 17px;
    border-radius: 10px;
    background: #15192a;
    background-image: -webkit-gradient(linear, left top, right top, from(#1DC2DA), to(#0079FF));
    background-image: linear-gradient(90deg, #1DC2DA, #0079FF);
    -webkit-animation: camara 1s ease-in-out 1.2s forwards;
    animation: camara 1s ease-in-out 1.2s forwards;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.movil .pantalla{
    position: relative;
    margin: 0 auto;
    width: 70px;
    height: 97px;
    background: white;
    -webkit-animation: pantalla 0.7s ease-in-out 1s forwards;
    animation: pantalla 0.7s ease-in-out 1s forwards;
    opacity: 0;
}
.movil .pantalla .iconoPantalla{
    position: relative;
    top: 30%;
    height: 30px;
    width: 50px;
    margin: 0 auto;
    -webkit-animation: icono 1s ease-in-out 1.3s forwards;
    animation: icono 1s ease-in-out 1.3s forwards;
    opacity: 0;
}
.movil .botonMovil{
    position: relative;
    height: 10px;
    width: 10px;
    background-image: -webkit-gradient(linear, left top, right top, from(#1DC2DA), to(#0079FF));
    background-image: linear-gradient(90deg, #1DC2DA, #0079FF);
    border-radius: 50%;
    margin: 7px auto;
    -webkit-animation: boton 1s ease-in-out 1.3s forwards;
    animation: boton 1s ease-in-out 1.3s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
@-webkit-keyframes movil{
    0%{opacity: 0; bottom: -305px; -webkit-transform: rotate(180deg); transform: rotate(180deg)}
    100%{opacity: 1; bottom: -5px; -webkit-transform: rotate(0deg); transform: rotate(0deg)}
}
@keyframes movil{
    0%{opacity: 0; bottom: -305px; -webkit-transform: rotate(180deg); transform: rotate(180deg)}
    100%{opacity: 1; bottom: -5px; -webkit-transform: rotate(0deg); transform: rotate(0deg)}
}
@-webkit-keyframes camara{
    0%{opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
    100%{opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
@keyframes camara{
    0%{opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
    100%{opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
@-webkit-keyframes boton{
    0%{ -webkit-transform: scale(0); transform: scale(0);}
    50%{-webkit-transform: scale(1.2);transform: scale(1.2);}
    100%{-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes boton{
    0%{ -webkit-transform: scale(0); transform: scale(0);}
    50%{-webkit-transform: scale(1.2);transform: scale(1.2);}
    100%{-webkit-transform: scale(1);transform: scale(1);}
}
@-webkit-keyframes icono{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes icono{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@-webkit-keyframes pantalla{
    0%{opacity: 0; -webkit-transform: scale(1,0); transform: scale(1,0);}
    100%{opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1);}
}
@keyframes pantalla{
    0%{opacity: 0; -webkit-transform: scale(1,0); transform: scale(1,0);}
    100%{opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1);}
}
.nube{
    position: absolute;
    top: 200px;
    left: 170px;
    height: 32px;
    width: 100px;
    border-radius: 50px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#74E9F8), color-stop(50%, #AEEBF3));
    background-image: linear-gradient(bottom, #74E9F8, #AEEBF3 50%)
}
.nube:after{
    content: "";
    position: absolute;
    height: 35px;
    width: 35px;
    background: #AEEBF3;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(10%, #AEEBF3), color-stop(80%, #CEF1F4));
    background-image: linear-gradient(bottom, #AEEBF3 10%, #CEF1F4 80%);
    border-radius: 50%;
    top:-18px;
    left: 14px;
}
.nube:before{
    content: "";
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: #AEEBF3;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(10%, #AEEBF3), color-stop(80%, #CEF1F4));
    background-image: linear-gradient(bottom, #AEEBF3 10%, #CEF1F4 80%);
    top:-31px;
    left: 33px;
}
.nube .nube2{
    position: relative;
    left: 295px;
    top: 40px;
    -webkit-transform: scale(.5);
    transform: scale(.5);
}
.cuadrados{
    position: absolute;
    left: 0px;
    top: 0px
}
.cuadrados  .cuadrado1{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 185px;
    top: 300px;
    -webkit-animation: cuadrado 1s ease-in-out 1.3s forwards;
    animation: cuadrado 1s ease-in-out 1.3s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado2{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 106px;
    top: 310px;
    -webkit-animation: cuadrado 1s ease-in-out 1.3s forwards;
    animation: cuadrado 1s ease-in-out 1.3s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado3{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 366px;
    top: 206px;
    -webkit-animation: cuadrado 1s ease-in-out 1.3s forwards;
    animation: cuadrado 1s ease-in-out 1.3s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado4{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 548px;
    top: 402px;
    -webkit-animation: cuadrado 1s ease-in-out 1.3s forwards;
    animation: cuadrado 1s ease-in-out 1.3s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado5{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 510px;
    top: 258px;
    -webkit-animation: cuadrado 1s ease-in-out 1.3s forwards;
    animation: cuadrado 1s ease-in-out 1.3s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado6{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 495px;
    top: 260px;
    -webkit-animation: cuadradoEsc 1s ease-in-out 1.3s forwards;
    animation: cuadradoEsc 1s ease-in-out 1.3s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado7{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 545px;
    top: 252px;
    -webkit-animation: cuadradoEsc 1s ease-in-out 0.8s forwards;
    animation: cuadradoEsc 1s ease-in-out 0.8s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado8{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 587px;
    top: 271px;
    -webkit-animation: cuadradoEsc 1s ease-in-out 0.5s forwards;
    animation: cuadradoEsc 1s ease-in-out 0.5s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado9{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 395px;
    top: 200px;
    -webkit-animation: cuadradoEsc 1s ease-in-out 1s forwards;
    animation: cuadradoEsc 1s ease-in-out 1s forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado10{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 350px;
    top: 160px;
    animation: cuadradoEsc 5s ease-in-out 1.3s reverse infinite;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado11{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 265px;
    top: 185px;
    animation: cuadradoEsc 10s ease-in-out 0.2s reverse infinite;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado12{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 125px;
    top: 255px;
    animation: cuadradoEsc 5s ease-in-out 1.3s reverse infinite;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado13{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 60px;
    top: 260px;
    animation: cuadradoEsc 7s ease-in-out 1.5s reverse infinite;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.cuadrados  .cuadrado14{
    width: 8px;
    height: 8px;
    background:#9DEBF4;
    position: relative;
    left: 40px;
    top: 335px;
    animation: cuadradoEsc 8s ease-in-out 1.8s reverse infinite;
    -webkit-transform: scale(0);
    transform: scale(0);
}
@-webkit-keyframes cuadrado{
    0%{opacity: 0; -webkit-transform: scale(0); transform: scale(0)}
    100%{opacity: 1;  -webkit-transform: scale(1);  transform: scale(1)}
}
@keyframes cuadrado{
    0%{opacity: 0; -webkit-transform: scale(0); transform: scale(0)}
    100%{opacity: 1;  -webkit-transform: scale(1);  transform: scale(1)}
}
@-webkit-keyframes cuadradoEsc{
    0%{opacity: 0; -webkit-transform: scale(0); transform: scale(0)}
    20%{opacity: 1;  -webkit-transform: scale(0.5);  transform: scale(0.5)}
    80%{opacity: 1;  -webkit-transform: scale(0.5);  transform: scale(0.5)}
    100%{opacity: 0;  -webkit-transform: scale(0);  transform: scale(0)}
}
@keyframes cuadradoEsc{
    0%{opacity: 0; -webkit-transform: scale(0); transform: scale(0)}
    20%{opacity: 1;  -webkit-transform: scale(0.5);  transform: scale(0.5)}
    80%{opacity: 1;  -webkit-transform: scale(0.5);  transform: scale(0.5)}
    100%{opacity: 0;  -webkit-transform: scale(0);  transform: scale(0)}
}
.fichas{
    position: absolute;
    left: 0px;
    top: 0px
}
.fichas  .ficha1{
    width: 70px;
    height: 48px;
    background-image: linear-gradient(33deg, black -58%, #1DC2DA 43%);
    opacity: 0.69;
    position: relative;
    left: 40px;
    top: 335px;
    border-radius:3px;
    -webkit-animation: mensajes 5s ease-in-out 5s forwards;
    animation: mensajes 5s ease-in-out 5s forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0;
}
.fichas  .ficha1 .barra{
    position: relative;
    width: 55px;
    height: 10px;
    background-color:#00ebff;
    opacity: 1;
    left: 7px;
    top: 10px;
    border-radius:3px;
}
.fichas  .ficha2{
    width: 70px;
    height: 48px;
    background-image: linear-gradient(33deg, black -58%, #1DC2DA 43%);
    opacity: 0.69;
    position: relative;
    left: 111px;
    top: 165px;
    border-radius:3px;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8;
    -webkit-animation: mensaje2 6s ease-in-out 3s forwards;
    animation: mensaje2 6s ease-in-out 3s forwards;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0;
}
.fichas  .ficha2 .barra{
    position: relative;
    width: 55px;
    height: 10px;
    background-color:#00ebff;
    opacity: 1;
    left: 7px;
    top: 10px;
    border-radius:3px;
}
.fichas  .ficha3{
    width: 70px;
    height: 48px;
    background-image: linear-gradient(33deg, black -58%, #1DC2DA 43%);
    opacity: 0.69;
    position: relative;
    left: 70px;
    top: 140px;
    border-radius:3px;
    -webkit-animation: mensajes 4s ease-in-out 5s forwards;
    animation: mensajes 4s ease-in-out 5s forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0;
}
.fichas  .ficha3 .barra{
    position: relative;
    width: 55px;
    height: 10px;
    background-color:#00ebff;
    opacity: 1;
    left: 7px;
    top: 10px;
    border-radius:3px;
}
.fichas  .ficha4{
    width: 70px;
    height: 48px;
    background-image: linear-gradient(33deg, black -58%, #1DC2DA 43%);
    opacity: 0.69;
    position: relative;
    left: 500px;
    top: 174px;
    border-radius:3px;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0.9;
    -webkit-animation: mensajes 6s ease-in-out 3s forwards;
    animation: mensajes 6s ease-in-out 3s forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0;
}
.fichas  .ficha4 .barra{
    position: relative;
    width: 55px;
    height: 10px;
    background-color:#00ebff;
    opacity: 1;
    left: 7px;
    top: 10px;
    border-radius:3px;
}
.fichas  .ficha5{
    width: 70px;
    height: 48px;
    background-image: linear-gradient(33deg, black -58%, #1DC2DA 43%);
    opacity: 0.69;
    position: relative;
    left: 530px;
    top: 150px;
    border-radius:3px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation: mensajes 4s ease-in-out 8s forwards;
    animation: mensajes 4s ease-in-out 8s forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0;
}
.fichas  .ficha5 .barra{
    position: relative;
    width: 55px;
    height: 10px;
    background-color:#00ebff;
    opacity: 1;
    left: 7px;
    top: 10px;
    border-radius:3px;
}
.fichas  .ficha6{
    position: relative;
    top: 144px;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
.fichas  .ficha6 .barra{
    position: relative;
    width: 55px;
    height: 10px;
    background-color:#00ebff;
    opacity: 1;
    top: 10px;
    border-radius:3px;
    background-image: linear-gradient(33deg, black -58%, #1DC2DA 43%);
    opacity: 0.7;
    -webkit-animation: fichas 2.7s ease-in-out forwards;
    animation: fichas 2.7s ease-in-out forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    left: -600px;
}
.fichas  .ficha7{
    position: relative;
    top: 68px;
}
.fichas  .ficha7 .barra{
    position: relative;
    width: 55px;
    height: 10px;
    background-color:#00ebff;
    opacity: 1;
    top: 10px;
    border-radius:3px;
    background-image: linear-gradient(33deg, black -58%, #1DC2DA 43%);
    opacity: 0.7;
    -webkit-animation: fichas 4s ease-in-out  forwards;
    animation: fichas 4s ease-in-out  forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    left: -600px;
}
.fichas  .ficha8{
    position: relative;
    top: 10px;
}
.fichas  .ficha8 .barra{
    position: relative;
    width: 55px;
    height: 10px;
    background-color:#00ebff;
    opacity: 1;
    top: 10px;
    border-radius:3px;
    opacity: 0.7;
    background-image: linear-gradient(33deg, black -58%, #1DC2DA 43%);
    -webkit-animation: fichas 3s ease-in-out forwards;
    animation: fichas 3s ease-in-out forwards;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    left: -600px;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
@-webkit-keyframes fichas{
    0%{left: -666px;}
    100%{left: 666px;}
}
@keyframes fichas{
    0%{left: -666px;}
    100%{left: 666px;}
}
@-webkit-keyframes mensajes{
    0%{opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px)}
    20%{opacity: 1;  -webkit-transform: translateY(0px);  transform: translateY(0px)}
    40%{opacity: 0;  -webkit-transform: translateY(-40px);  transform: translateY(-40px)}
    100%{opacity: 0;  -webkit-transform: translateY(-40px);  transform: translateY(-40px)}
}
@keyframes mensajes{
    0%{opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px)}
    20%{opacity: 1;  -webkit-transform: translateY(0px);  transform: translateY(0px)}
    40%{opacity: 0;  -webkit-transform: translateY(-40px);  transform: translateY(-40px)}
    100%{opacity: 0;  -webkit-transform: translateY(-40px);  transform: translateY(-40px)}
}
@-webkit-keyframes mensaje2{
    0%{opacity: 0; -webkit-transform: translateY(20px) scale(1.3); transform: translateY(20px) scale(1.3)}
    20%{opacity: 1;  -webkit-transform: translateY(0px) scale(1.5);  transform: translateY(0px) scale(1.5)}
    40%{opacity: 0;  -webkit-transform: translateY(-40px) scale(1.5);  transform: translateY(-40px) scale(1.5)}
    100%{opacity: 0;  -webkit-transform: translateY(-40px) scale(1.5);  transform: translateY(-40px) scale(1.5)}
}
@keyframes mensaje2{
    0%{opacity: 0; -webkit-transform: translateY(20px) scale(1.3); transform: translateY(20px) scale(1.3)}
    20%{opacity: 1;  -webkit-transform: translateY(0px) scale(1.5);  transform: translateY(0px) scale(1.5)}
    40%{opacity: 0;  -webkit-transform: translateY(-40px) scale(1.5);  transform: translateY(-40px) scale(1.5)}
    100%{opacity: 0;  -webkit-transform: translateY(-40px) scale(1.5);  transform: translateY(-40px) scale(1.5)}
}
.wifi{
    height: 60px;
    width: 45px;
    position: absolute;
    top: 140px;
    left: 245px;
}