﻿
.fill {
    min-height: 700px;
    height: 700px;
}


.bg-white {
    background-color: white;
}

.bg-gray {
    background-color: #808080;
}

.div-body {
    min-height: 720px;
    max-height: inherit;
}

.margin-top-05 {
    margin-top: 0.5em;
}

.margin-top-10 {
    margin-top: 1.0em;
}

.margin-top-15 {
    margin-top: 1.5em;
}

.margin-top-20 {
    margin-top: 2.0em;
}

.margin-top-25 {
    margin-top: 2.5em;
}

.margin-top-30 {
    margin-top: 3.0em;
}

.icon-table {
    width:30px;
    height:30px;
}

.table-inverse {
    background-color:#333;
    color:white;
}


#circularG {
    position: relative;
    width: 128px;
    height: 128px;
    margin: auto;
}

.circularG {
    position: absolute;
    background-color: #eee;
    
    width: 30px;
    height: 30px;
    border-radius: 19px;
    -o-border-radius: 19px;
    -ms-border-radius: 19px;
    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;
    animation-name: bounce_circularG;
    -o-animation-name: bounce_circularG;
    -ms-animation-name: bounce_circularG;
    -webkit-animation-name: bounce_circularG;
    -moz-animation-name: bounce_circularG;
    animation-duration: 0.718s;
    -o-animation-duration: 0.718s;
    -ms-animation-duration: 0.718s;
    -webkit-animation-duration: 0.718s;
    -moz-animation-duration: 0.718s;
    animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-direction: normal;
    -o-animation-direction: normal;
    -ms-animation-direction: normal;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
}

#circularG_1 {
    left: 0;
    top: 51px;
    animation-delay: 0.268s;
    -o-animation-delay: 0.268s;
    -ms-animation-delay: 0.268s;
    -webkit-animation-delay: 0.268s;
    -moz-animation-delay: 0.268s;
}

#circularG_2 {
    left: 13px;
    top: 13px;
    animation-delay: 0.364s;
    -o-animation-delay: 0.364s;
    -ms-animation-delay: 0.364s;
    -webkit-animation-delay: 0.364s;
    -moz-animation-delay: 0.364s;
}

#circularG_3 {
    top: 0;
    left: 51px;
    animation-delay: 0.45s;
    -o-animation-delay: 0.45s;
    -ms-animation-delay: 0.45s;
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
}

#circularG_4 {
    right: 13px;
    top: 13px;
    animation-delay: 0.536s;
    -o-animation-delay: 0.536s;
    -ms-animation-delay: 0.536s;
    -webkit-animation-delay: 0.536s;
    -moz-animation-delay: 0.536s;
}

#circularG_5 {
    right: 0;
    top: 51px;
    animation-delay: 0.632s;
    -o-animation-delay: 0.632s;
    -ms-animation-delay: 0.632s;
    -webkit-animation-delay: 0.632s;
    -moz-animation-delay: 0.632s;
}

#circularG_6 {
    right: 13px;
    bottom: 13px;
    animation-delay: 0.718s;
    -o-animation-delay: 0.718s;
    -ms-animation-delay: 0.718s;
    -webkit-animation-delay: 0.718s;
    -moz-animation-delay: 0.718s;
}

#circularG_7 {
    left: 51px;
    bottom: 0;
    animation-delay: 0.814s;
    -o-animation-delay: 0.814s;
    -ms-animation-delay: 0.814s;
    -webkit-animation-delay: 0.814s;
    -moz-animation-delay: 0.814s;
}

#circularG_8 {
    left: 13px;
    bottom: 13px;
    animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
}



@keyframes bounce_circularG {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(.3);
    }
}

@-o-keyframes bounce_circularG {
    0% {
        -o-transform: scale(1);
    }

    100% {
        -o-transform: scale(.3);
    }
}

@-ms-keyframes bounce_circularG {
    0% {
        -ms-transform: scale(1);
    }

    100% {
        -ms-transform: scale(.3);
    }
}

@-webkit-keyframes bounce_circularG {
    0% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(.3);
    }
}

@-moz-keyframes bounce_circularG {
    0% {
        -moz-transform: scale(1);
    }

    100% {
        -moz-transform: scale(.3);
    }
}


/*swal mostrar el frente de todo*/
.my-swal {
    z-index: 100000 !important;
}
/* tombola  */
.container_tombola {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    z-index: 10000;
    /*   overflow: hidden; */
}

.wrapper {
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

.tombola0 {
    position: static;
    width: 100%;
    height: 200px;
    margin: 50% auto;
    transform-style: preserve-3d;
    transform-origin: center center -480px;
    transform: rotateX(0deg) translateZ(-480px);
    transition: 11s ease all;
}

.tombola1 {
    position: static;
    width: 100%;
    height: 200px;
    margin: 50% auto;
    transform-style: preserve-3d;
    transform-origin: center center -480px;
    transform: rotateX(0deg) translateZ(-480px);
    transition: 11s ease all;
}

.tombola2 {
    position: static;
    width: 100%;
    height: 200px;
    margin: 50% auto;
    transform-style: preserve-3d;
    transform-origin: center center -480px;
    transform: rotateX(0deg) translateZ(-480px);
    transition: 11s ease all;
}

.tombola3 {
    position: static;
    width: 100%;
    height: 200px;
    margin: 50% auto;
    transform-style: preserve-3d;
    transform-origin: center center -480px;
    transform: rotateX(0deg) translateZ(-480px);
    transition: 11s ease all;
}

.panel_tombola {
    top: 25px;
    padding: 35px;
    font-size: 40px;
    font-weight: bold;
    /* text-transform: uppercase; */
    position: fixed;
    width: 100%;
    height: 156px;
    color: white;
    text-align: center;
    line-height: 2em;
    /* background: #1f30b1; */
    box-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 6px #ffffff, 0 0 12px #ffffff, inset 0 0 1px #ffffff, inset 0 0 2px #ffffff, inset 0 0 6px #ffffff, inset 0 0 12px #ffffff;
}

.p0 {
    transform: rotateX(0deg) translateZ(240px);
    background: #356CB5;
    /* 	 border: 1px solid #297a48; */
}

.p1 {
    transform: rotateX(-36deg) translateZ(240px);
    background: #1B51A1;
    /* 	 border: 1px solid #29767a; */
}

.p2 {
    transform: rotateX(-72deg) translateZ(240px);
    background: #0F3C8B;
    /* 	 border: 1px solid #29767a; */
}

.p3 {
    transform: rotateX(-108deg) translateZ(240px);
    background: #980001;
    /* 	 border: 1px solid #29407a; */
}

.p4 {
    transform: rotateX(-144deg) translateZ(240px);
    background: #CC0000;
    /* 	 border: 1px solid #48297a; */
}

.p5 {
    transform: rotateX(-180deg) translateZ(240px);
    background: #E82734;
    /* 	 border: 1px solid #7a2976; */
}

.p6 {
    transform: rotateX(-216deg) translateZ(240px);
    background: #356CB5;
    /* 	 border: 1px solid #7a2940; */
}

.p7 {
    transform: rotateX(-252deg) translateZ(240px);
    background: #1B51A1;
    /* 	 border: 1px solid #7a4829; */
}

.p8 {
    transform: rotateX(-288deg) translateZ(240px);
    background: #0F3C8B;
    /* 	 border: 1px solid #767a29; */
}

.p9 {
    transform: rotateX(-324deg) translateZ(240px);
    background: #CC0000;
    /* 	 border: 1px solid #407a29; */
}

.p0_auto {
    transform: rotateX(0deg) translateZ(240px);
    background: #CD1F28;
}
.p1_auto {
    transform: rotateX(-36deg) translateZ(240px);
    background: #E36704;
}
.p2_auto {
    transform: rotateX(-72deg) translateZ(240px);
    background: #FD982A;
}
.p3_auto {
    transform: rotateX(-108deg) translateZ(240px);
    background: #FDF346;
}
.p4_auto {
    transform: rotateX(-144deg) translateZ(240px);
    background: #FDE121;
}
.p5_auto {
    transform: rotateX(-180deg) translateZ(240px);
    background: #FDCC0D;
}
.p6_auto {
    transform: rotateX(-216deg) translateZ(240px);
    background: #CD1F28;
}
.p7_auto {
    transform: rotateX(-252deg) translateZ(240px);
    background: #E36704;
}
.p8_auto {
    transform: rotateX(-288deg) translateZ(240px);
    background: #FD982A;
}
.p9_auto {
    transform: rotateX(-324deg) translateZ(240px);
    background: #FDF346;
}
/* fin tombola */
/* confeti para el ganador */
.pyro > .before, .pyro > .after {
    z-index: 1000;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-moz-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-o-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-ms-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
/* fin confeti */
/* globos */
#background-wrap {
    position: absolute;
    left: 20%;
    top: 0px;
    width: 200px;
    height: 550px;
    overflow: hidden;
    z-index: 10002;
}

#background-wrap2 {
    position: absolute;
    left: 70%;
    top: 0px;
    width: 200px;
    height: 550px;
    overflow: hidden;
    z-index: 10002;
}

.balloon {
    position: absolute;
    top: 100%;
}
/* KEYFRAMES */
@-webkit-keyframes animateBubble {
    0% {
        top: 100%;
    }

    100% {
        top: -200px;
    }
}

@-moz-keyframes animateBubble {
    0% {
        top: 100%;
    }

    100% {
        top: -200px;
    }
}

@keyframes animateBubble {
    0% {
        top: 100%;
    }

    100% {
        top: -200px;
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: 50px;
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: 50px;
    }
}

@keyframes sideWays {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: 50px;
    }
}
/* ANIMATIONS */
.bal1 {
    -webkit-animation: animateBubble 3s ease-in 0.6s infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 3s ease-in 0.6s infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 3s ease-in 0.6s infinite, sideWays 2s ease-in-out infinite alternate;
    left: 0;
}

.bal2 {
    -webkit-animation: animateBubble 5s ease-in 0.1s infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 5s ease-in 0.1s infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 5s ease-in 0.1s infinite, sideWays 4s ease-in-out infinite alternate;
    left: 3%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.bal3 {
    -webkit-animation: animateBubble 6s ease-in 0.3s infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 6s ease-in 0.3s infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 6s ease-in 0.3s infinite, sideWays 2s ease-in-out infinite alternate;
    left: 7%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.7;
}

.bal4 {
    -webkit-animation: animateBubble 4s ease-in 0.1s infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 4s ease-in 0.1s infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 4s ease-in 0.1s infinite, sideWays 2s ease-in-out infinite alternate;
    left: 10%;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0.7;
}

.bal5 {
    -webkit-animation: animateBubble 3s ease-in 0.3s infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 3s ease-in 0.3s infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 3s ease-in 0.3s infinite, sideWays 2s ease-in-out infinite alternate;
    left: 8%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.5;
}

.bal1 path {
    fill: #5974c0;
}

.bal2 path {
    fill: #823a90;
}

.bal3 path {
    fill: #ff9501;
}

.bal4 path {
    fill: #7dc04f;
}

.bal5 path {
    fill: #c72b20;
}
/* fin globos */


/*titulo bendision*/
@import url(https://fonts.googleapis.com/css?family=Signika:700,300,600);
.container_bensision {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*background: rgb(0,94,252);*/
    /*background: linear-gradient(90deg, rgba(0,94,252,1) 0%, rgba(225,0,0,1) 50%, rgba(0,0,0,1) 96%);*/
    overflow: hidden;
}

.text_bendision {
    font-size: 5em;
    font: bold 7.5vw/1.6 'Signika', sans-serif;
    user-select: none;
}

    .text_bendision .letra_bendision {
        display: inline-block;
        animation: float .2s ease-in-out infinite;
    }

@keyframes float {
    0%,100% {
        transform: none;
    }

    33% {
        transform: translateY(-1px) rotate(-2deg);
    }

    66% {
        transform: translateY(1px) rotate(2deg);
    }
}

.container_bensision:hover .letra_bendision {
    animation: bounce .6s;
}

@keyframes bounce {
    0%,100% {
        transform: translate(0);
    }

    25% {
        transform: rotateX(20deg) translateY(2px) rotate(-3deg);
    }

    50% {
        transform: translateY(-20px) rotate(3deg) scale(1.1);
    }
}

.letra_bendision:nth-child(4n) {
    color: hsl(0, 0%, 100%);
    text-shadow: 1px 1px hsl(234, 100%, 39%), 2px 2px hsl(234, 45%, 45%), 3px 3px hsl(234, 45%, 45%), 4px 4px hsl(234, 75%, 45%);
}

.letra_bendision:nth-child(4n-1) {
    color: hsl(0, 0%, 100%);
    text-shadow: 1px 1px hsl(357, 100%, 50%), 2px 2px hsl(353, 35%, 45%), 3px 3px hsl(353, 35%, 45%), 4px 4px hsl(353, 35%, 45%);
}

.letra_bendision:nth-child(4n-2) {
    color: hsl(0, 0%, 100%);
    text-shadow: 1px 1px hsl(42, 100%, 98%), 2px 2px hsl(348, 25%, 50%), 3px 3px hsl(348, 25%, 50%), 4px 4px hsl(348, 25%, 50%);
}

.letra_bendision:nth-child(4n-3) {
    color: hsl(0, 0%, 100%);
    text-shadow: 1px 1px hsl(183, 100%, 50%), 2px 2px hsl(198, 45%, 50%), 3px 3px hsl(198, 45%, 50%), 4px 4px hsl(198, 45%, 50%);
}

.text_bendision .letra_bendision:nth-child(2) {
    animation-delay: .05s;
}

.text_bendision .letra_bendision:nth-child(3) {
    animation-delay: .1s;
}

.text_bendision .letra_bendision:nth-child(4) {
    animation-delay: .15s;
}

.text_bendision .letra_bendision:nth-child(5) {
    animation-delay: .2s;
}

.text_bendision .letra_bendision:nth-child(6) {
    animation-delay: .25s;
}

.text_bendision .letra_bendision:nth-child(7) {
    animation-delay: .3s;
}

.text_bendision .letra_bendision:nth-child(8) {
    animation-delay: .35s;
}

.text_bendision .letra_bendision:nth-child(9) {
    animation-delay: .4s;
}

.text_bendision .letra_bendision:nth-child(10) {
    animation-delay: .45s;
}

.text_bendision .letra_bendision:nth-child(11) {
    animation-delay: .5s;
}

.text_bendision .letra_bendision:nth-child(12) {
    animation-delay: .55s;
}

.text_bendision .letra_bendision:nth-child(13) {
    animation-delay: .6s;
}

.text_bendision .letra_bendision:nth-child(14) {
    animation-delay: .65s;
}
/*fin titulo bendision*/

/*animation para sorte bendision*/
#border {
    /* width: 62vw; */
    /* min-height: 100vh; */
    width: 1095px; 
    height: 125px;
    /*max-width: 1095px;*/
    margin-left: 38px;
    margin-right: 23%;
    background-color: #2220;
    border: 3px solid #ff0000;
    -webkit-animation: myanim 3s infinite;
    animation: myanim 3s infinite;
    position: absolute;
    top: 169px;
    border-radius: 10px;
    /* left: 38%; */
    /* margin-left: -327px; */
    box-shadow: 0 0 1px #ff0000, 0 0 2px #ff0000, 0 0 6px #ff0000, 0 0 12px #ff0000, inset 0 0 1px #ff0000, inset 0 0 2px #ff0000, inset 0 0 6px #ff0000, inset 0 0 12px #ff0000;
    z-index: 900;
}

@keyframes myanim {
    0% {
        border: 3px solid #0300FF;
        box-shadow: 0 0 1px #0300FF, 0 0 2px #0300FF, 0 0 6px #0300FF, 0 0 12px #0300FF, inset 0 0 1px #0300FF, inset 0 0 2px #0300FF, inset 0 0 6px #0300FF, inset 0 0 12px #0300FF;
    }
    25% {
        border: 3px solid #AFA8BA;
        box-shadow: 0 0 1px #AFA8BA, 0 0 2px #AFA8BA, 0 0 6px #AFA8BA, 0 0 12px #AFA8BA, inset 0 0 1px #AFA8BA, inset 0 0 2px #AFA8BA, inset 0 0 6px #AFA8BA, inset 0 0 12px #AFA8BA;
    }

    50% {
        border: 3px solid #7B7485;
        box-shadow: 0 0 1px #7B7485, 0 0 2px #7B7485, 0 0 6px #7B7485, 0 0 12px #7B7485, inset 0 0 1px #7B7485, inset 0 0 2px #7B7485, inset 0 0 6px #7B7485, inset 0 0 12px #7B7485;
    }

    75% {
        border: 3px solid #FF0000;
        box-shadow: 0 0 1px #FF0000, 0 0 2px #FF0000, 0 0 6px #FF0000, 0 0 12px #FF0000, inset 0 0 1px #FF0000, inset 0 0 2px #FF0000, inset 0 0 6px #FF0000, inset 0 0 12px #FF0000;
    }

    100% {
        border: 3px solid #0300FF;
        box-shadow: 0 0 1px #0300FF, 0 0 2px #0300FF, 0 0 6px #0300FF, 0 0 12px #0300FF, inset 0 0 1px #0300FF, inset 0 0 2px #0300FF, inset 0 0 6px #0300FF, inset 0 0 12px #0300FF;
    }
}
/*fin animation sorteo bendision*/

/*background bendision*/
.background_sorteo_auto {
    /*
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../Content/Imagenes/suziki_alto.jpg);
        */
    background-image: linear-gradient(to left bottom, #ffe900, #efaa20, #c97432, #944935, #56292a, #4c2024, #41171e, #370e18, #5d0a1e, #83001e, #a80017, #cb0000);
    /*background-image: linear-gradient(to bottom, #ffe900, #efaa20, #c97432, #944935, #56292a, #4c2024, #41171e, #370e18, #5d0a1e, #83001e, #a80017, #cb0000);*/
}
.background_sorteo {
    background: #0f0c29;
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
    background-image: radial-gradient(circle, #01c8ff, #00a2fb, #007af1, #004ddb, #1800b5);
}
    /*fin background bendision*/
    /*Style for checkbox*/
.form-group .hidden_checkbox {
    display: none;
}

.form-group .hidden_checkbox + .btn-group > label span {
    width: 20px;
}

.form-group .hidden_checkbox + .btn-group > label span:first-child {
    display: none;
}

.form-group .hidden_checkbox + .btn-group > label span:last-child {
    display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
    display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
    display: none;
}
/*fin de Style for checkbox*/

/*tittle bendision*/
.preloader {
    position: relative;
    width: 315px;
    margin: 50px auto 0;
}

.taxi-category {
    width: 138%;
}

.taxi-category:after {
    content: "";
    display: block;
    clear: both;
}

.static-left {
    float: left;
}

.static-right {
    float: right;
}

.cube {
    height: 46px;
    position: absolute;
    top: 0;
    right: 60px;
    transform-origin: 50% 50% 0;
    -webkit-transform-origin: 50% 50% 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: letter 1.5s infinite ease-out;
    -webkit-animation: letter 1.5s infinite ease-out;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}
.cube2 {
    height: 46px;
    position: absolute;
    top: 0;
    right: 60px;
    transform-origin: 50% 50% 0;
    -webkit-transform-origin: 50% 50% 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: letter 2.0s infinite ease-out;
    -webkit-animation: letter 2.0s infinite ease-out;
    animation-delay: .9s;
    -webkit-animation-delay: .9s;
}

.top {
    transform: rotateX(90deg) translateY(0) translateZ(48px);
    -webkit-transform: rotateX(90deg) translateY(0) translateZ(48px);
}

.front {
    transform: rotateX(0deg) translateZ(24px);
    -webkit-transform: rotateX(0deg) translateZ(24px);
}

.letter {
    display: inline-block;
    width: 50px;
    text-align: center;
    position: relative;
    padding: 0 0px;
    top: -17px;
    font-size: 55px;
    font-weight: bold;
    color: #fff;
    /* border: 1px solid; */
    /* background-color: #0092f7; */
    /* border-top: 1px solid #ffffff; */
    /* border-bottom: 1px solid #ffffff; */
    box-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 6px #ffffff, 0 0 12px #ffffff, inset 0 0 1px #ffffff, inset 0 0 2px #ffffff, inset 0 0 5px #ffffff, inset 0 0 0px #ffffff;
}

.letter-blue {
    background-color: #1a2f64;
}

.letter-black {
    background-color: #000;
}

.letter-red {
    background-color: #e02329;
}

.letter-move-b {
    position: absolute;
    left: 0%;
    margin-left: -313px;
    top: -14px;
}

.letter-move {
    position: absolute;
    left: 50%;
    margin-left: -36px;
}

.taxi-name {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 4px;
}

@keyframes letter {
    0% {
        transform: rotateX(0);
        -webkit-transform: rotateX(0);
    }

    70% {
        transform: rotateX(-90deg);
        -webkit-transform: rotateX(-90deg);
    }

    100% {
        transform: rotateX(-90deg);
        -webkit-transform: rotateX(-90deg);
    }
}
/*end tittle bendision*/

/*accelerating car*/
.envelope {
    background: #0F0F0F;
    position: relative;
    box-shadow: inset 0 0 5px 5px #000;
    -webkit-box-shadow: inset 0 0 5px 5px #000;
    -o-box-shadow: inset 0 0 5px 5px #000;
    -moz-box-shadow: inset 0 0 5px 5px #000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
}

.speedNobe {
    position: absolute;
    width: 100%;
    z-index: 10;
    transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -moz-transition: all 1s;
}

.speedPosition {
    position: absolute;
    color: #FFF;
    text-align: center;
    line-height: 80PX;
    font-family: arial;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    background: #191919;
    box-shadow: 0 0 3px 3px black;
    -webkit-box-shadow: 0 0 3px 3px black;
    -moz-box-shadow: 0 0 3px 3px black;
    -o-box-shadow: 0 0 3px 3px black;
}

.fonts {
    font-family: arial;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.speedNobe div {
    background: #48a3cb;
    position: absolute;
    height: 100%;
    top: 0;
}

.numb, .nob {
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
    position: absolute;
    opacity: 0.5;
}

.nob {
    background: #eee;
    box-shadow: 0 0 2px 1px #eee;
    -webkit-box-shadow: 0 0 2px 1px #eee;
    -moz-box-shadow: 0 0 2px 1px #eee;
    -o-box-shadow: 0 0 2px 1px #eee;
}

.numb {
    color: #eee;
    text-align: left;
    overflow: hidden;
    opacity: 0.5;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
}

.nob.bright {
    opacity: 1;
}

.nob.danger {
    background: #FF113A;
    box-shadow: 0 0 2px 1px #FF113A;
    -webkit-box-shadow: 0 0 2px 1px #FF113A;
    -moz-box-shadow: 0 0 2px 1px #FF113A;
    -o-box-shadow: 0 0 2px 1px #FF113A;
}

.numb.bright {
    opacity: 1;
}

.numb.danger {
    color: #FF113A;
}

/*end accelerating*/