123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              doctype html
head
  meta(charset='utf-8')
  title Mundito
  meta(name='generator' content='Google Web Designer 5.0.4.0226')
  link(href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet')
  style#gwd-text-style(type='text/css').
#title
  h1 Miguel Mendez
#globito1
  img(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/globe1.png')
#globito2
  img(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/globe2.png')
#solecito
  img(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/sun.png')
#boxesito
  template#gwd-group-definitions
    div(data-gwd-group-def='Grupo1' data-gwd-group-class='gwd-grp-k39e' style='display: none;')
      img.gwd-img-1h5f.gwd-grp-k39e(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/base-eli.png' data-gwd-grp-id='base-eli_1')
      img.gwd-img-k2lv.gwd-grp-k39e(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/helice.png' data-gwd-grp-id='helice_1')
    div(data-gwd-group-def='Grupo2' data-gwd-group-class='gwd-grp-1mjq' style='display: none;')
      img.gwd-img-141o.gwd-grp-1mjq(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/base-eli.png' data-gwd-grp-id='base-eli')
      img.gwd-img-xv8y.gwd-gen-b562gwdanimation.gwd-grp-1mjq(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/helice.png' data-gwd-grp-id='helice')
  .gwd-div-e3km
    img#base.gwd-img-1880.gwd-gen-b1hegwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/base.png')
    img#mountains2.gwd-img-16cy.gwd-gen-16ucgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/mountains2.png')
    img#mountain2.gwd-img-nmbs.gwd-gen-kal8gwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/mountain2.png')
    img#mountain2_1.gwd-img-15h5.gwd-gen-1r86gwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/mountain2.png')
    .gwd-div-nwa7.gwd-gen-9fw3gwdanimation(data-gwd-group='Grupo1')
    .gwd-div-kfti.gwd-gen-13o6gwdanimation
      img#base-eli_2.gwd-img-1ncl.gwd-gen-144vgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/base-eli.png')
      img#helice_2.gwd-img-ndpi.gwd-gen-q0lfgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/helice.png')
    .gwd-div-1wa7.gwd-gen-gt6hgwdanimation(data-gwd-group='Grupo2')
    img#base2.gwd-img-16pi.gwd-gen-11llgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/base2.png')
    img#base3.gwd-img-8xjq.gwd-gen-iy2qgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/base3.png')
    img#plantanuc.gwd-img-1cd0.gwd-gen-1p5jgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/plantanuc.png')
    img#house.gwd-img-9sdv.gwd-gen-10ipgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/house.png')
    img#gloge-pplants.gwd-img-1bx9.gwd-gen-hnpcgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/gloge-pplants.png')
    img#humo1.gwd-img-1qkx.gwd-gen-e6mmgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/humo1.png')
    img#tree1.gwd-img-5q2v.gwd-gen-t395gwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/tree1.png')
    img#tree2_1.gwd-img-2g5r.gwd-gen-2h2ggwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/tree2.png')
    img#tree1_2.gwd-img-1s3a.gwd-gen-wfwhgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/tree1.png')
    img#tree1_1.gwd-img-lm5u.gwd-gen-v64cgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/tree1.png')
    img#tree2.gwd-img-djew.gwd-gen-xubggwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/tree2.png')
    img#tree1_3.gwd-img-1gdl.gwd-gen-196ygwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/tree1.png')
    img#arbusto1.gwd-img-1uio.gwd-gen-u4eygwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/arbusto1.png')
    img#arbusto2.gwd-img-1hcf.gwd-gen-16mggwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/arbusto2.png')
    img#arbusto1_1.gwd-img-4pzq.gwd-gen-h7vmgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/arbusto1.png')
    img#arbusto2_1.gwd-img-1blt.gwd-gen-pcsdgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/arbusto2.png')
    img#celda.gwd-img-1apk.gwd-gen-1oragwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/celda.png')
    img#celda_1.gwd-img-1d98.gwd-gen-16jogwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/celda.png')
    img#celda_2.gwd-img-8la0.gwd-gen-11pggwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/celda.png')
    img#carrito.gwd-img-pbme.gwd-gen-y3w1gwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/carrito.png')
    img#carrito_1.gwd-img-1i4a.gwd-gen-bo0xgwdanimation(src='http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/carrito.png')
#nubes2
            
          
!
            
              html,body 
    width: 100%
    height: 100%
    margin: 0px
    overflow-x: hidden
    background-color: #90D1BB
    font-family: 'Open Sans', sans-serif
    font-size: 12px

body 
    transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform-style: preserve-3d
    background-image: none
    background-color: transparent
    background-image: url(http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/clouds1.png)
    background-position: -100% center
    background-repeat: no-repeat
    animation: animarfondo 9s linear infinite


#boxesito 
    height: 80%
    max-width: 360px
    animation: flotar 4s ease-in-out infinite
    margin-left: auto
    margin-right: auto
    display: block
    top: 0%
    position: relative


.gwd-img-1880 
    position: absolute
    width: 336px
    height: 357px
    top: 50%
    transform-style: preserve-3d
    left: 50%
    transform: translate3d(-168px, -158px, 0px)


.gwd-div-e3km 
    position: absolute
    width: 1843px
    height: 826px
    overflow: hidden
    transform-style: preserve-3d
    left: 50%
    top: 50%
    transform: translate3d(-921px, -413px, 0px)


.gwd-img-nmbs 
    position: absolute
    left: 1021px
    width: 24px
    height: 13px
    transform-origin: 10.3784px 13.9459px 0px
    top: 386px
    transform: translate3d(0px, 0px, 0px)
    transform-style: preserve-3d


.gwd-img-16cy 
    position: absolute
    width: 299px
    height: 76px
    left: 780px
    top: 306px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-15h5 
    position: absolute
    left: 824px
    top: 387px
    width: 30px
    height: 15px
    transform-origin: 14.3712px 15.526px 0px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)


.gwd-img-16pi 
    position: absolute
    width: 40px
    height: 64px
    left: 870px
    top: 338px
    transform-origin: 19px 63.5px 0px
    transform: translate3d(3px, 0px, 0px) scale3d(0.246094, 0.246094, 1)
    opacity: 0


.gwd-img-8xjq 
    position: absolute
    width: 31px
    height: 93px
    left: 904px
    top: 310px
    transform-origin: 15.5px 92.5px 0px
    transform: translate3d(2px, 0px, 0px) scale3d(0.25, 0.25, 1)
    opacity: 0


.gwd-img-1cd0 
    position: absolute
    width: 48px
    height: 40px
    left: 830px
    top: 363px
    transform-origin: 24px 38.5px 0px
    transform: translate3d(2px, 1px, 0px) scale3d(0.229167, 0.229167, 1)
    opacity: 0


.gwd-img-9sdv 
    position: absolute
    left: 959px
    width: 10px
    height: 9px
    transform-origin: 4.93902px 8.65854px 0px
    top: 389px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
    opacity: 0


.gwd-img-5q2v 
    position: absolute
    width: 29px
    height: 37px
    top: 364px
    left: 794px
    opacity: 0
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-djew 
    position: absolute
    width: 15px
    height: 35px
    top: 370px
    left: 1051px
    transform: translate3d(0px, 0px, 0px)
    transform-style: preserve-3d
    opacity: 0


.gwd-img-lm5u 
    position: absolute
    width: 23px
    height: 30px
    transform-origin: 11.5544px 14.7433px 0px
    top: 373px
    opacity: 0
    left: 782px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-1s3a 
    position: absolute
    width: 29px
    height: 37px
    top: 367px
    opacity: 0
    left: 999px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-2g5r 
    position: absolute
    width: 15px
    height: 35px
    top: 372px
    opacity: 0
    left: 1041px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-1gdl 
    position: absolute
    transform-origin: 10.3981px 13.2678px 0px
    width: 21px
    height: 27px
    top: 374px
    opacity: 0
    left: 1031px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-1bx9 
    position: absolute
    width: 34px
    height: 33px
    left: 873px
    top: 305px
    transform: translate3d(0px, 20px, 0px) scale3d(0.235294, 0.235294, 1)
    opacity: 0


.gwd-img-1qkx 
    position: absolute
    left: 923px
    top: 302px
    width: 11px
    height: 7px
    transform-origin: 0px 6.5px 0px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
    opacity: 0


.gwd-img-1ncl 
    position: absolute
    width: 6px
    height: 54px
    transform-origin: 2.84239px 27.0139px 0px
    left: 17px
    top: 16px


.gwd-img-ndpi 
    position: absolute
    width: 40px
    height: 30px
    transform-origin: center 20px 0px
    left: 0px
    top: 0px
    animation: spin .5s infinite linear


.gwd-img-1uio 
    position: absolute
    width: 19px
    height: 8px
    top: 393px
    opacity: 0
    left: 785px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-1hcf 
    position: absolute
    width: 29px
    height: 12px
    opacity: 0
    top: 391px
    left: 803px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-4pzq 
    position: absolute
    width: 19px
    height: 8px
    top: 390px
    opacity: 0
    left: 1035px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-1blt 
    position: absolute
    width: 29px
    height: 12px
    top: 390px
    opacity: 0
    left: 1035px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-sgzo 
    position: absolute
    width: 25px
    height: 31px
    transform-origin: 12.4964px 15.4428px 0px
    top: 247px
    left: 1054px
    transform-style: preserve-3d
    transform: translate3d(70px, 0px, 0px)
    opacity: 0


.gwd-img-1r1m 
    position: absolute
    width: 25px
    height: 32px
    transform-origin: 12.4964px 15.7663px 0px
    top: 275px
    left: 775px
    transform-style: preserve-3d
    transform: translate3d(-90px, 0px, 0px)
    opacity: 0


.gwd-img-1apk 
    position: absolute
    width: 30px
    height: 25px
    top: 388px
    opacity: 0
    left: 930px
    transform-style: preserve-3d
    transform: translate3d(40px, 0px, 0px)


.gwd-img-1d98 
    position: absolute
    width: 30px
    height: 25px
    top: 388px
    opacity: 0
    left: 966px
    transform-style: preserve-3d
    transform: translate3d(40px, 0px, 0px)


.gwd-img-8la0 
    position: absolute
    width: 30px
    height: 25px
    top: 388px
    opacity: 0
    left: 1001px
    transform-style: preserve-3d
    transform: translate3d(40px, 0px, 0px)


@keyframes flotar 
    0% 
        transform: translateY(0px)

    50% 
        transform: translateY(50px)

    100% 
        transform: translateY(0px)


@keyframes spin 
    from 
        transform: rotate(0deg)

    to 
        transform: rotate(360deg)


@keyframes gwd-gen-b1hegwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(-168px, -158px, 0px)
        left: 50%
        animation-timing-function: ease-in-out

    14.2857% 
        transform: translate3d(-168px, -178px, 0px)
        left: 50%
        animation-timing-function: linear

    100% 
        transform: translate3d(-168px, -178px, 0px)
        left: 50%
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-b1hegwdanimation 
    animation: gwd-gen-b1hegwdanimation_gwd-keyframes 3.5s linear 0.2s 1 normal forwards running


@keyframes gwd-gen-16ucgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    20.8333% 
        transform: translate3d(0px, 20px, 0px)
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, 14px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-16ucgwdanimation 
    animation: gwd-gen-16ucgwdanimation_gwd-keyframes 2.4s linear 0.2s 1 normal forwards running


@keyframes gwd-gen-1r86gwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(-2px, -4px, 0px) scale3d(4.06667, 4.06667, 1)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-1r86gwdanimation 
    animation: gwd-gen-1r86gwdanimation_gwd-keyframes 0.5s linear 0.5s 1 normal forwards running


@keyframes gwd-gen-kal8gwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
        animation-timing-function: ease-in-out

    22.7273% 
        transform: translate3d(-14px, 2px, 0px) scale3d(2.75, 2.75, 1)
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(-14px, -8px, 0px) scale3d(2.75, 2.75, 1)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-kal8gwdanimation 
    animation: gwd-gen-kal8gwdanimation_gwd-keyframes 2.2s linear 0.5s 1 normal forwards running


@keyframes gwd-gen-1p5jgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(2px, 1px, 0px) scale3d(0.229167, 0.229167, 1)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-1p5jgwdanimation 
    animation: gwd-gen-1p5jgwdanimation_gwd-keyframes 0.4s linear 1s 1 normal forwards running


@keyframes gwd-gen-iy2qgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(2px, 0px, 0px) scale3d(0.25, 0.25, 1)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-iy2qgwdanimation 
    animation: gwd-gen-iy2qgwdanimation_gwd-keyframes 0.4s linear 1.6s 1 normal forwards running


@keyframes gwd-gen-11llgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(3px, 0px, 0px) scale3d(0.246094, 0.246094, 1)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-11llgwdanimation 
    animation: gwd-gen-11llgwdanimation_gwd-keyframes 0.4s linear 1.3s 1 normal forwards running


@keyframes gwd-gen-10ipgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, 3px, 0px) scale3d(3.68875, 3.68875, 1)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-10ipgwdanimation 
    animation: gwd-gen-10ipgwdanimation_gwd-keyframes 0.4s linear 1.9s 1 normal forwards running


@keyframes gwd-gen-hnpcgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, 20px, 0px) scale3d(0.235294, 0.235294, 1)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-hnpcgwdanimation 
    animation: gwd-gen-hnpcgwdanimation_gwd-keyframes 0.4s linear 2.2s 1 normal forwards running


@keyframes gwd-gen-e6mmgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1)
        opacity: 0
        animation-timing-function: ease-in-out

    70% 
        transform: translate3d(0px, 0px, 0px) scale3d(5, 5, 1)
        opacity: 1
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(20px, -100px, 0px) scale3d(10, 10, 1)
        opacity: 0
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-e6mmgwdanimation 
    animation: gwd-gen-e6mmgwdanimation_gwd-keyframes 1.6s linear 2.6s infinite


@keyframes gwd-gen-qfqngwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(-90px, 0px, 0px)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(20px, 0px, 0px)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-qfqngwdanimation 
    animation: gwd-gen-qfqngwdanimation_gwd-keyframes 0.5s linear 2.3s 1 normal forwards running


@keyframes gwd-gen-cukhgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(70px, 0px, 0px)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(-30px, 0px, 0px)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-cukhgwdanimation 
    animation: gwd-gen-cukhgwdanimation_gwd-keyframes 0.5s linear 2.3s 1 normal forwards running


[data-gwd-group="Grupo1"] .gwd-grp-k39e.gwd-img-1h5f 
    position: absolute
    width: 7px
    height: 65px
    transform-origin: 3.42402px 32.5417px 0px
    left: 19px
    top: 25px


[data-gwd-group="Grupo1"] .gwd-grp-k39e.gwd-img-k2lv 
    position: absolute
    width: 45px
    height: 35px
    transform-origin: center 24px 0
    left: 0px
    top: 0px
    animation: spin .5s infinite linear


[data-gwd-group="Grupo1"] 
    width: 45px
    height: 90px


.gwd-div-nwa7 
    position: absolute
    width: 45px
    height: 90px
    transform-origin: 23.3333px 93.3333px 0px
    left: 977px
    top: 422px
    transform-style: preserve-3d
    opacity: 0
    transform: translate3d(0px, -100px, 0px)


.gwd-div-kfti 
    position: absolute
    top: 333px
    width: 38.9981px
    height: 70px
    transform-origin: 24px 68px 0px
    left: 1027px
    opacity: 0
    transform-style: preserve-3d
    transform: translate3d(0px, 20px, 0px)


[data-gwd-group="Grupo2"] .gwd-grp-1mjq.gwd-img-141o 
    position: absolute
    width: 8px
    height: 76px
    left: 30px
    top: 39px


[data-gwd-group="Grupo2"] .gwd-grp-1mjq.gwd-img-xv8y 
    position: absolute
    width: 67px
    height: 51px
    left: 0px
    top: 0px
    transform-origin: center 35.8px 0px
    animation: spin .45s infinite linear


[data-gwd-group="Grupo2"] 
    width: 67px
    height: 115px


.gwd-div-1wa7 
    position: absolute
    width: 67px
    height: 115px
    transform-origin: 31px 116px 0px
    left: 990px
    top: 391px
    transform-style: preserve-3d
    opacity: 0
    transform: translate3d(0px, -70px, 0px)


@keyframes gwd-gen-gt6hgwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, -70px, 0px)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, -110px, 0px)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-gt6hgwdanimation 
    animation: gwd-gen-gt6hgwdanimation_gwd-keyframes 0.5s linear 1.9s 1 normal forwards running


@keyframes gwd-gen-13o6gwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, 20px, 0px)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, -10px, 0px)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-13o6gwdanimation 
    animation: gwd-gen-13o6gwdanimation_gwd-keyframes 0.5s linear 1.6s 1 normal forwards running


@keyframes gwd-gen-9fw3gwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, -100px, 0px)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(0px, -120px, 0px)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-9fw3gwdanimation 
    animation: gwd-gen-9fw3gwdanimation_gwd-keyframes 0.5s linear 1.4s 1 normal forwards running


@keyframes gwd-gen-11pggwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(40px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-11pggwdanimation 
    animation: gwd-gen-11pggwdanimation_gwd-keyframes 0.4s linear 3.1s 1 normal forwards running


@keyframes gwd-gen-16jogwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(40px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(20px, 0px, 0px)
        animation-timing-function: linear


@keyframes animarfondo 
    0% 
        background-position: -100 center

    100% 
        background-position: 200% center


.gwd-div-e3km .gwd-gen-16jogwdanimation 
    animation: gwd-gen-16jogwdanimation_gwd-keyframes 0.4s linear 2.8s 1 normal forwards running


@keyframes gwd-gen-1oragwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(40px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-1oragwdanimation 
    animation: gwd-gen-1oragwdanimation_gwd-keyframes 0.4s linear 2.5s 1 normal forwards running


@keyframes gwd-gen-pcsdgwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-pcsdgwdanimation 
    animation: gwd-gen-pcsdgwdanimation_gwd-keyframes 0.5s linear 2.5s 1 normal forwards running


@keyframes gwd-gen-h7vmgwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-h7vmgwdanimation 
    animation: gwd-gen-h7vmgwdanimation_gwd-keyframes 0.5s linear 2.7s 1 normal forwards running


@keyframes gwd-gen-16mggwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(-20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-16mggwdanimation 
    animation: gwd-gen-16mggwdanimation_gwd-keyframes 0.5s linear 2.7s 1 normal forwards running


@keyframes gwd-gen-u4eygwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(-20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-u4eygwdanimation 
    animation: gwd-gen-u4eygwdanimation_gwd-keyframes 0.5s linear 2.5s 1 normal forwards running


@keyframes gwd-gen-196ygwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-196ygwdanimation 
    animation: gwd-gen-196ygwdanimation_gwd-keyframes 0.5s linear 2.5s 1 normal forwards running


@keyframes gwd-gen-xubggwdanimation_gwd-keyframes 
    0% 
        transform: translate3d(0px, 0px, 0px)
        opacity: 0
        animation-timing-function: ease-in-out

    100% 
        transform: translate3d(20px, 0px, 0px)
        opacity: 1
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-xubggwdanimation 
    animation: gwd-gen-xubggwdanimation_gwd-keyframes 0.5s linear 2.3s 1 normal forwards running


@keyframes gwd-gen-v64cgwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(-20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-v64cgwdanimation 
    animation: gwd-gen-v64cgwdanimation_gwd-keyframes 0.5s linear 2.3s 1 normal forwards running


@keyframes gwd-gen-wfwhgwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(-20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-wfwhgwdanimation 
    animation: gwd-gen-wfwhgwdanimation_gwd-keyframes 0.5s linear 2.5s 1 normal forwards running


@keyframes gwd-gen-2h2ggwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(-20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-2h2ggwdanimation 
    animation: gwd-gen-2h2ggwdanimation_gwd-keyframes 0.5s linear 2.5s 1 normal forwards running


@keyframes gwd-gen-t395gwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(-20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-t395gwdanimation 
    animation: gwd-gen-t395gwdanimation_gwd-keyframes 0.5s linear 2.5s 1 normal forwards running


.gwd-img-pbme 
    position: absolute
    width: 30px
    height: 14px
    top: 397px
    opacity: 0
    left: 872px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


.gwd-img-1i4a 
    position: absolute
    width: 30px
    height: 14px
    top: 397px
    opacity: 0
    left: 826px
    transform-style: preserve-3d
    transform: translate3d(0px, 0px, 0px)


@keyframes gwd-gen-y3w1gwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-y3w1gwdanimation 
    animation: gwd-gen-y3w1gwdanimation_gwd-keyframes 0.5s linear 3.1s 1 normal forwards running


@keyframes gwd-gen-bo0xgwdanimation_gwd-keyframes 
    0% 
        opacity: 0
        transform: translate3d(0px, 0px, 0px)
        animation-timing-function: ease-in-out

    100% 
        opacity: 1
        transform: translate3d(20px, 0px, 0px)
        animation-timing-function: linear


.gwd-div-e3km .gwd-gen-bo0xgwdanimation 
    animation: gwd-gen-bo0xgwdanimation_gwd-keyframes 0.5s linear 3.3s 1 normal forwards running


#title 
    text-align: center
    position: absolute
    left: 0
    top: 12%
    width: 100%
    color: white


#globito1,
#globito2 
    position: absolute
    animation: flotar 8s ease-in-out infinite reverse


#solecito 
    position: absolute
    top: 23%
    left: 48.5%


#globito1 
    left: 41%
    top: 28%


#globito2 
    right: 41%
    top: 24%


#nubes2 
    height: 20%
    position: absolute
    z-index: 100
    width: 100%
    left: 0
    bottom: 22%
    background-image: url(http://york-cdn.amazonaws.com.s3.amazonaws.com/cdn/anima1/clouds2.png)
    background-repeat: no-repeat
    animation: animarfondo 14s linear infinite

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console