@charset "UTF-8";

/* CSS Document */

@charset "UTF-8";

/* CSS Document */


/* Default style, feel free to remove if not needed. */

body, body * {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

button {
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}


/* Div layer for the entire banner. */

#container {

    width: 880px;
    height: 565px;
    overflow: hidden;
}

#collapse_content {
    position: absolute;
    width: 728px;
    height: 90px;
    top: 0px;
    left: 0px;
    z-index: 100;
    background-image: url(background_collasep.jpg);
    background-repeat: repeat-x;
    display: block;
    overflow: hidden;
}

#loading {
    width: 60px;
    height: 60px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#logo-1 {
    position: absolute;
    top: 0;
    left: 15px;
    width: 138px;
    height: 84px;
    background-image: url(logo_1.png);
    background-repeat: no-repeat;
    transform: translate3d(0px, -84px, 0px);
    -webkit-transform: translate3d(0px, -84px, 0px);
    -moz-transform: translate3d(0px, -84px, 0px);
    transition: transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    -moz-transition: -moz-transform 1s ease;
}

#logo-1.in {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: -webkit-translate3d(0px, 0px, 0px);
    -moz-transform: -moz-translate3d(0px, 0px, 0px);
}

#cl_text1 {
    width: 273px;
    height: 33px;
    position: absolute;
    top: 28px;
    left: 173px;
    background-image: url(cl_text1.png);
    background-repeat: no-repeat;
    transform: translate3d(-20px, 0px, 0px);
    -webkit-transform: translate3d(-20px, 0px, 0px);
    -moz-transform: translate3d(-20px, 0px, 0px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    -webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
    -moz-transition: -moz-transform 1s ease, opacity 1s ease;
}

#cl_text1.in {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: -webkit-translate3d(0px, 0px, 0px);
    -moz-transform: -moz-translate3d(0px, 0px, 0px);
}

#cl_text1.in.in2 {
    opacity: 1;
    transform: translate3d(0px, -10px, 0px);
    -webkit-transform: -webkit-translate3d(0px, -10px, 0px);
    -moz-transform: -moz-translate3d(0px, -10px, 0px);
}

#cl_text1.in.in2.in3 {
    opacity: 0;
    transform: translate3d(0px, -40px, 0px);
    -webkit-transform: -webkit-translate3d(0px, -40px, 0px);
    -moz-transform: -moz-translate3d(0px, -40px, 0px);
}

#cl_text2 {
    width: 158px;
    height: 20px;
    position: absolute;
    top: 55px;
    left: 235px;
    background-image: url(cl_text1.png);
    background-repeat: no-repeat;
    background-position: -56px -35px;
    transform: translate3d(0px, 30px, 0px);
    -webkit-transform: translate3d(0px, 30px, 0px);
    -moz-transform: translate3d(0px, 30px, 0px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    -webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
    -moz-transition: -moz-transform 1s ease, opacity 1s ease;
}

#cl_text2.in {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: -webkit-translate3d(0px, 0px, 0px);
    -moz-transform: -moz-translate3d(0px, 0px, 0px);
}

#cl_text3 {
    width: 375px;
    height: 34px;
    position: absolute;
    top: 30px;
    left: 155px;
    background-image: url(cl_text3.png);
    background-repeat: no-repeat;
    transform: translate3d(-20px, 0px, 0px);
    -webkit-transform: translate3d(-20px, 0px, 0px);
    -moz-transform: translate3d(-20px, 0px, 0px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    -webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
    -moz-transition: -moz-transform 1s ease, opacity 1s ease;
}

#cl_text3.in {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: -webkit-translate3d(0px, 0px, 0px);
    -moz-transform: -moz-translate3d(0px, 0px, 0px);
}

#cl_hand {
    width: 230px;
    height: 134px;
    position: absolute;
    top: -10px;
    right: 33px;
    background-image: url(cl_hand.png);
    background-repeat: no-repeat;
    transform: translate3d(0px, 100px, 0px);
    -webkit-transform: translate3d(0px, 100px, 0px);
    -moz-transform: translate3d(0px, 100px, 0px);
    transition: transform 1s ease, scale3d 1s ease;
    -webkit-transition: -webkit-transform 1s ease, -webkit-scale3d 1s ease;
    -moz-transition: -moz-transform 1s ease, -moz-scale3d 1s ease;
}

#cl_hand.in {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: -webkit-translate3d(0px, 0px, 0px);
    -moz-transform: -moz-translate3d(0px, 0px, 0px);
}

#cl_hand.in.in2 {
    transform: translate3d(0px, -15px, 0px) scale3d(.7, .7, 1);
    -webkit-transform: -webkit-translate3d(0px, -15px, 0px) -webkit-scale3d(.7, .7, 1);
    -moz-transform: -moz-translate3d(0px, -15px, 0px) -moz-scale3d(.7, .7, 1);
}

#fullscreen_btn {
    position: absolute;
    width: 158px;
    height: 27px;
    top: 34px;
    left: 549px;
    color: #000000;
    z-index: 100;
    border: 0;
    background-color: transparent;
    color: transparent;
    background-image: url(cl_btn.png);
    background-repeat: no-repeat;
    display: none;
    opacity: 0;
    /*animation: shake 0.82s 4s infinite backwards cubic-bezier(.36, .07, .19, .97) ;*/
    animation: shake 4s 4s infinite backwards cubic-bezier(.36, .07, .19, .97);
    transform: translate3d(0, 0, 0);
    transition: opacity 1s ease, transform 1s ease;
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    -moz-transition: opacity 1s ease, -moz-transform 1s ease;
}

#fullscreen_btn.in {
    opacity: 1;
}

#collapse_exit {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 98;
    background-color: transparent;
}

#fullscreen_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 880px;
    height: 565px;
    z-index: 100;
    background-image: url(ex_bg.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #4cb24f;
    display: none;
    overflow: hidden;
}

#back2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(ex_bg2.jpg);
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
}

#back2.in {
    opacity: 1;
    z-index: 999;
}

#findAll, #noFindAll {
    position: absolute;
    width: 522px;
    height: 282px;
    background-color: transparent;
    top: 100px;
    left: 180px;
    display: none;
}

#findAll.in, #noFindAll.in {
    display: block;
}

#excelente, #rapidez, #bien, #bien2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#excelente, #bien {
    margin-top: 45px;
}

#rapidez, #bien2 {
    margin-top: 20px;
}

#share {
    width: 130px;
    height: 27px;
    position: absolute;
    left: 196px;
    top: 180px;
    background-image: url(redes01.png);
    cursor: pointer;
}

#follow-fb {
    width: 70px;
    height: 23px;
    position: absolute;
    background-color: transparent;
    right: 105px;
    bottom: 68px;
    cursor: pointer;
}

#follow-tw {
    width: 62px;
    height: 23px;
    position: absolute;
    background-color: transparent;
    right: 36px;
    bottom: 68px;
    cursor: pointer;
}

#restart {
    width: 226px;
    height: 40px;
    position: absolute;
    left: 141px;
    top: 210px;
    background-image: url(btn_empezar.png);
    background-color: transparent;
    animation: shake 4s 4s infinite backwards cubic-bezier(.36, .07, .19, .97);
    transform: translate3d(0, 0, 0);
    transition: opacity 1s ease, transform 1s ease;
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    -moz-transition: opacity 1s ease, -moz-transform 1s ease;
    cursor: pointer;
}

#man-good {
    width: 363px;
    height: 384px;
    position: absolute;
    background-image: url(man-good.png);
    background-repeat: no-repeat;
    top: 179px;
    left: 0;
    transform: translate3d(-361px, 0px, 0px);
    -webkit-transform: translate3d(-361px, 0px, 0px);
    -moz-transform: translate3d(-361px, 0px, 0px);
    transition: transform 1s ease, scale3d 1s ease;
    -webkit-transition: -webkit-transform 1s ease, -webkit-scale3d 1s ease;
    -moz-transition: -moz-transform 1s ease, -moz-scale3d 1s ease;
}

#man-bien {
    width: 363px;
    height: 384px;
    position: absolute;
    background-image: url(bien-tick.png);
    background-repeat: no-repeat;
    top: 200px;
    left: 0;
    transform: translate3d(-361px, 0px, 0px);
    -webkit-transform: translate3d(-361px, 0px, 0px);
    -moz-transform: translate3d(-361px, 0px, 0px);
    transition: transform 1s ease, scale3d 1s ease;
    -webkit-transition: -webkit-transform 1s ease, -webkit-scale3d 1s ease;
    -moz-transition: -moz-transform 1s ease, -moz-scale3d 1s ease;
}

#man-good.in, #man-bien.in {
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
}

#fullscreen_exit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #000;
    z-index: 0;
    background-color: transparent;
}

#close_button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 19px;
    height: 19px;
    background-image: url(close.png);
    background-repeat: no-repeat;
    z-index: 999999;
    background-color: transparent;
}

#close_hotspot {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    background-color: transparent;
    opacity: 0;
    z-index: 9999999;
    background-repeat: no-repeat;
    cursor: pointer;
}

.modal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
}

.modal.in {
    opacity: 1;
    z-index: 999;
}

.retangle, .retangle1 {
    top: 50%;
    left: 50%;
    background-color: #9cca66;
    border-radius: 15px;
    position: absolute;
}

.retangle1 {
    width: 523px;
    height: 281px;
    margin-left: -261.5px;
    margin-top: -140.5px;
}

#ex-text1, #ex-text2, #start {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#ex-text1 {
    margin-top: 30px;
}

#ex-text2 {
    margin-top: 20px;
}

#start {
    width: 204px;
    height: 36px;
    margin-top: 34px;
    background-image: url(start.png);
    background-repeat: no-repeat;
    background-color: transparent;
    text-decoration: none;
    opacity: 1;
    animation: shake 4s 4s infinite backwards cubic-bezier(.36, .07, .19, .97);
    transform: translate3d(0, 0, 0);
    transition: opacity 1s ease, transform 1s ease;
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    -moz-transition: opacity 1s ease, -moz-transform 1s ease;
    cursor: pointer;
}

#start:hover {
    opacity: .7;
}

#car-1-trigger, #car-2-trigger, #calendar-trigger, #pc-trigger, #logo-trigger, #hand-trigger, #delevery-trigger {
    width: 67px;
    height: 67px;
    position: absolute;
    /*background-color: rgba(0, 0, 0, 0.45);*/
    background-color: transparent;
    z-index: 1;
    cursor: pointer;
}

#car-1-trigger span, #car-2-trigger span, #calendar-trigger span, #pc-trigger span, #logo-trigger span, #hand-trigger span, #delevery-trigger span {
    content: "";
    display: block;
    position: absolute;
    height: 72px;
    width: 100px;
    opacity: 0;
    background-repeat: no-repeat;
    transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
}

#car-1-trigger.hover span, #car-2-trigger.hover span, #calendar-trigger.hover span, #pc-trigger.hover span, #logo-trigger.hover span, #hand-trigger.hover span, #delevery-trigger.hover span {
    opacity: .2;
}

#car-1-trigger.in span, #car-2-trigger.in span, #calendar-trigger.in span, #pc-trigger.in span, #logo-trigger.in span, #hand-trigger.in span, #delevery-trigger.in span {
    opacity: 1;
}

#car-1-trigger {
    top: 152px;
    left: 88px;
}

#car-1-trigger span {
    top: -58px;
    left: 5px;
    background-image: url(cuadro.png);
    width: 315px;
}

#car-2-trigger {
    top: 152px;
    left: 164px;
}

#car-2-trigger span {
    top: 5px;
    left: 40px;
    background-image: url(cuadro2.png);
    width: 323px;
}

#calendar-trigger {
    width: 150px;
    height: 103px;
    top: 117px;
    left: 440px;
}

#calendar-trigger span {
    top: 5px;
    left: 114px;
    background-image: url(calendario.png);
    width: 281px;
}

#logo-trigger {
    width: 126px;
    height: 82px;
    top: 0px;
    left: 706px;
}

#logo-trigger span {
    top: 15px;
    left: -281px;
    background-image: url(dgii.png);
    width: 306px;
}

#pc-trigger {
    width: 150px;
    height: 88px;
    top: 253px;
    left: 326px;
}

#pc-trigger span {
    top: -15px;
    left: 127px;
    background-image: url(pc.png);
    width: 233px;
}

#hand-trigger {
    top: 207px;
    left: 42px;
    height: 56px;
    width: 54px;
}

#hand-trigger span {
    top: 40px;
    left: 20px;
    background-image: url(marbette.png);
    width: 291px;
}

#delevery-trigger {
    width: 32px;
    height: 74px;
    top: 324px;
    left: 782px;
}

#delevery-trigger span {
    top: 0px;
    left: -296px;
    background-image: url(door.png);
    width: 300px;
}

#clock {
    position: absolute;
    height: 99px;
    width: 88px;
    background-image: url(clock.png);
    top: 16px;
    left: 36px;
    font-family: 'Montserrat', sans-serif;
}

#renovar {
    position: absolute;
    width: 227px;
    height: 40px;
    top: 431px;
    left: 318px;
    z-index: 100;
    border: 0;
    background-color: transparent;
    color: transparent;
    background-image: url(renovar.png);
    background-repeat: no-repeat;
    /* animation: shake 0.82s 4s infinite backwards cubic-bezier(.36, .07, .19, .97); */
    animation: shake 4s 4s infinite backwards cubic-bezier(.36, .07, .19, .97);
    transform: translate3d(0, 0, 0);
    transition: opacity 1s ease, transform 1s ease;
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    -moz-transition: opacity 1s ease, -moz-transform 1s ease;
    cursor: pointer;
}

#clock span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -33%);
    font-size: 26px;
    color: white;
}


/*@keyframes shake {
  0%   { transform: translate3d(0px, 0px,0px); }
  25%   { transform: translate3d(10px, 0px,0px); }
  50%   { transform: translate3d(0px, 0px,0px); }
  75%   { transform: translate3d(10px, 0px,0px); }
  100% { transform: translate3d(0px, 0px,0px); }
}*/


/*@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}*/

@keyframes shake {
    2.50%, 22.5% {
        transform: translate3d(-1px, 0, 0);
    }
    5%, 20% {
        transform: translate3d(2px, 0, 0);
    }
    7.5%, 12.5%, 17.5% {
        transform: translate3d(-4px, 0, 0);
    }
    10%, 15% {
        transform: translate3d(4px, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

:focus {
    outline: none;
}

::-moz-focus-inner {
    border: 0;
}