@font-face {
    font-family: "BatmanPro";
    src: url(../font/GothaProBol.otf) format("truetype");
}
/* Para 240 x 320 (small phone) */
@media screen and (min-width: 240px) {
    .meter {
        height: 25px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -11.55em;
        left: 2.7%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 10%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 13.5%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para 320 x 480 (iPhone) */
@media screen and (min-width: 300px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -11.65em;
        left: 17.79%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 10%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 12.8%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para 360px */
@media screen and (min-width: 330px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -11.78em;
        left: 0%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 10%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 12.6%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para iPhone 6 portrait · width: 375px */
@media screen and (min-width: 360px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -11.88em;
        left: 18.2%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 10%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 12.6%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para iPhone 6 Plump portrait · width: 414px */
@media screen and (min-width: 400px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -12.05em;
        left: 18.58%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 10%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 12.1%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para 480 x 640 (small tablet) */
@media screen and (min-width: 430px) {
    .meter {
        height: 18px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -12.2em;
        left: 18.9%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 15%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 11.8%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para iPhone 5 landscape · width: 568px */
@media screen and (min-width: 460px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -12.3em;
        left: 19.2%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 15%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 11.6%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para Android (Nexus 4) landscape · width: 600px */
@media screen and (min-width: 500px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -12.5em;
        left: 19.2%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 15%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 11.5%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para iPhone 6 landscape · width: 667px */
@media screen and (min-width: 560px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -12.7em;
        left: 19.4%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 15%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 11.3%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para iPhone 6 landscape · width: 700px */
@media screen and (min-width: 600px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -12.8em;
        left: 19.4%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 15%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 11.2%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }
    #rango{
        font-style: italic;
        position: absolute; top: 320px; left: 20%;
        font-size: 20px;
    }
    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para iPhone 6 Plump landscape · width: 736px */
@media screen and (min-width: 630px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -12.9em;
        left: 19.7%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 15%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 11%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }
    #rango{
        font-style: italic;
        position: absolute; top: 330px; left: 20%;
        font-size: 23px;
    }
    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para 768 x 1024 (iPad - Portrait) */
@media screen and (min-width: 700px) {
    .meter {
        height: 5px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -13.3em;
        left: 9.7%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 80%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.9%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }
    #rango{
        font-style: italic;
        position: absolute; top: 330px; left: 20%;
        font-size: 26px;
    }
    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para 768 x 1024 (iPad - Portrait) */
@media screen and (min-width: 780px) {
    .meter {
        height: 5px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -13.6em;
        left: 9.7%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 80%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.8%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }
    #rango{
        font-style: italic;
        position: absolute; top: 350px; left: 20%;
        font-size: 30px;
    }
    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* para 800px */
@media screen and (min-width: 870px) {
    .meter {
        height: 18px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -13.85em;
        left: 10.7%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 20%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.6%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }
    #rango{
        font-style: italic;
        position: absolute; top: 390px; left: 24%;
        font-size: 28px;
    }
    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* para 850px */
@media screen and (min-width: 950px) {
    .meter {
        height: 20px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -14.2em;
        left: 10.7%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 20%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.6%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 12%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #rango{
        font-style: italic;
        position: absolute; top: 420px; left: 28%;
        font-size: 28px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* para 900 */
@media screen and (min-width: 1000px) {
    .meter {
        height: 28px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -14.5em;
        left: 11%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 20%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.4%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #rango{
        font-style: italic;
        position: absolute; top: 450px; left: 24%;
        font-size: 30px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para 1000 x 768 (iPad - Landscape) */
@media screen and (min-width: 1100px) {
    .meter {
        height: 28px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -14.8em;
        left: 20%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 20%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.2%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #rango{
        font-style: italic;
        position: absolute; top: 450px; left: 20%;
        font-size: 30px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para Laptop 1100*/
@media screen and (min-width: 1200px) {
    .meter {
        height: 10px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -15.3em;
        left: 22%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 100%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.2%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #rango{
        font-style: italic;
        position: absolute; top: 470px; left: 25%;
        font-size: 30px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* para 1160 */
@media screen and (min-width: 1300px) {
    .meter {
        height: 10px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -16em;
        left: 22%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 100%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #rango{
        font-style: italic;
        position: absolute; top: 500px; left: 25%;
        font-size: 40px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para Laptop 1200 x 800 */
@media screen and (min-width: 1400px) {
    .meter {
        height: 12px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -16.3em;
        left: 22%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 100%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.1%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #rango{
        font-style: italic;
        position: absolute; top: 560px; left: 26%;
        font-size: 40px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}
/* Para Laptop 1500*/
@media screen and (min-width: 1500px) {
    .meter {
        height: 12px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        width: 65%;
        max-width: 63%;
        top: -16.6em;
        left: 22%;
        z-index: 1;
    }
    .meter > span {
        display: block;
        height: 100%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
        );
        background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
        );
        -webkit-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
        -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
        );
        background-image:
        -moz-linear-gradient(
                -45deg,
                rgba(255, 255, 255, .2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .2) 50%,
                rgba(255, 255, 255, .2) 75%,
                transparent 75%,
                transparent
        );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: move 2s linear infinite;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .animate > span:after {
        display: none;
    }

    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .yellow > span {
        background-color: #FBE603;
        background-image: -moz-linear-gradient(top, #FBE603, #AEB404);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FBE603),color-stop(1, #AEB404));
        background-image: -webkit-linear-gradient(#FBE603, #AEB404);
    }

    .orange > span {
        background-color: #FC9F00;
        background-image: -moz-linear-gradient(top, #FC9F00, #f36d0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FC9F00),color-stop(1, #f36d0a));
        background-image: -webkit-linear-gradient(#FC9F00, #f36d0a);
    }

    .red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

    .nostripes > span > span, .nostripes > span:after {
        -webkit-animation: none;
        background-image: none;
    }
    #termo {
        position: relative;
        top: -100px;
        left: 10.1%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #resultado {
        position: relative;
        top: -250px;
        left: 10%;
        right: 10%;
        vertical-align: middle;
        z-index: 0;
        margin: 100px auto 0 auto;
        width:100%;
        max-width:75%;
    }
    #mensaje {
        position: relative;
        top: -200px;
    }

    #rango{
        font-style: italic;
        position: absolute; top: 600px; left: 30%;
        font-size: 40px;
    }

    #btn_regresar {
        position: relative;
        top: -180px;
    }
}


.footer_t{
    width: 100%;
}

.caja{
    vertical-align: middle;
    display: inline-block;

}

.color{
    background: #424242;
}.color:hover{
    background: #0404B4;
 }

/* MODAL */
.glyphicon-modal-window:before {
    content: "\e237";
}
.modal-open {
    overflow: hidden;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition:      -o-transform .3s ease-out;
    transition:         transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}
.modal-header {
    min-height: 16.42857143px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
    margin-top: -2px;
}
.modal-title {
    margin: 0;
    line-height: 1.42857143;
}
.modal-body {
    position: relative;
    padding: 15px;
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
    margin-left: 0;
}
.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}
@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}
.modal-footer:before,
.modal-footer:after {
    display: table;
    content: " ";
}
.modal-footer:after {
    clear: both;
}
.btn > .caret,
.dropup > .btn > .caret {
    border-top-color: #000 !important;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
    color: #333;
    text-decoration: none;
}
.btn:active,
.btn.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:focus,
.btn-default.focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}
.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    background-color: #fff;
    border-color: #ccc;
}
.btn-default .badge {
    color: #fff;
    background-color: #333;
}
.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #286090;
    border-color: #122b40;
}
.btn-primary:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: #204d74;
    border-color: #122b40;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    background-color: #337ab7;
    border-color: #2e6da4;
}
.btn-primary .badge {
    color: #337ab7;
    background-color: #fff;
}
.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn-success:focus,
.btn-success.focus {
    color: #fff;
    background-color: #449d44;
    border-color: #255625;
}
.btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
    color: #fff;
    background-color: #398439;
    border-color: #255625;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn-success .badge {
    color: #5cb85c;
    background-color: #fff;
}
.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
.btn-info:focus,
.btn-info.focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85;
}
.btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
    background-color: #5bc0de;
    border-color: #46b8da;
}
.btn-info .badge {
    color: #5bc0de;
    background-color: #fff;
}
.btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
.btn-warning:focus,
.btn-warning.focus {
    color: #fff;
    background-color: #ec971f;
    border-color: #985f0d;
}
.btn-warning:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus {
    color: #fff;
    background-color: #d58512;
    border-color: #985f0d;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
    background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
    background-color: #f0ad4e;
    border-color: #eea236;
}
.btn-warning .badge {
    color: #f0ad4e;
    background-color: #fff;
}
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-danger:focus,
.btn-danger.focus {
    color: #fff;
    background-color: #c9302c;
    border-color: #761c19;
}
.btn-danger:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}
.btn-danger:active:hover,
.btn-danger.active:hover,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.open > .dropdown-toggle.btn-danger:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger.focus {
    color: #fff;
    background-color: #ac2925;
    border-color: #761c19;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-danger .badge {
    color: #d9534f;
    background-color: #fff;
}
.btn-link {
    font-weight: normal;
    color: #337ab7;
    border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
    color: #23527c;
    text-decoration: underline;
    background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
    color: #777;
    text-decoration: none;
}
.btn-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block {
    margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%;
}
.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
    position: relative;
    float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
    z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
    margin-left: -1px;
}
.btn-toolbar {
    margin-left: -5px;
}
.btn-toolbar .btn,
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
    float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
    margin-left: 5px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}
.btn-group > .btn:first-child {
    margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
    float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
    padding-right: 8px;
    padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
    padding-right: 12px;
    padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn .caret {
    margin-left: 0;
}
.btn-lg .caret {
    border-width: 5px 5px 0;
    border-bottom-width: 0;
}
.dropup .btn-lg .caret {
    border-width: 0 5px 5px;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
    float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}
.btn-group-justified > .btn-group .btn {
    width: 100%;
}
.btn-group-justified > .btn-group .dropdown-menu {
    left: auto;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.input-group-lg > .input-group-btn > .btn {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
select.input-group-lg > .input-group-btn > .btn {
    height: 46px;
    line-height: 46px;
}
textarea.input-group-lg > .input-group-btn > .btn,
select[multiple].input-group-lg > .input-group-btn > .btn {
    height: auto;
}
.input-group-sm > .input-group-btn > .btn {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
select.input-group-sm > .input-group-btn > .btn {
    height: 30px;
    line-height: 30px;
}
textarea.input-group-sm > .input-group-btn > .btn,
select[multiple].input-group-sm > .input-group-btn > .btn {
    height: auto;
}
.input-group-btn,
.input-group .form-control {
    display: table-cell;
}
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
}
.input-group-btn > .btn {
    position: relative;
}
.input-group-btn > .btn + .btn {
    margin-left: -1px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus,
.input-group-btn > .btn:active {
    z-index: 2;
}
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
    margin-right: -1px;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
    z-index: 2;
    margin-left: -1px;
}
.navbar-btn {
    margin-top: 8px;
    margin-bottom: 8px;
}
.navbar-btn.btn-sm {
    margin-top: 10px;
    margin-bottom: 10px;
}
.navbar-btn.btn-xs {
    margin-top: 14px;
    margin-bottom: 14px;
}
.navbar-default .btn-link {
    color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
    color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
    color: #ccc;
}
.navbar-inverse .btn-link {
    color: #9d9d9d;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
    color: #fff;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
    color: #444;
}
.btn .label {
    position: relative;
    top: -1px;
}
.btn .badge {
    position: relative;
    top: -1px;
}
.btn-xs .badge,
.btn-group-xs > .btn .badge {
    top: 0;
    padding: 1px 5px;
}
.modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
    margin-left: 0;
}
.carousel-caption .btn {
    text-shadow: none;
}
.glyphicon-eye-close:before {
    content: "\e106";
}
.glyphicon-folder-close:before {
    content: "\e117";
}
.alert-dismissable .close,
.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}
button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}
.modal-header .close {
    margin-top: -2px;
}
.glyphicon-alert:before {
    content: "\e209";
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert h4 {
    margin-top: 0;
    color: inherit;
}
.alert .alert-link {
    font-weight: bold;
}
.alert > p,
.alert > ul {
    margin-bottom: 0;
}
.alert > p + p {
    margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
    padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-success hr {
    border-top-color: #c9e2b3;
}
.alert-success .alert-link {
    color: #2b542c;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-info hr {
    border-top-color: #a6e1ec;
}
.alert-info .alert-link {
    color: #245269;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.alert-warning hr {
    border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
    color: #66512c;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-danger hr {
    border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
    color: #843534;
}
.info, .success, .warning, .error, .validation {
    border: 2px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    width:50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 1);

}
.info {
    color: #00529B;
    background-color: #BDE5F8;

}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;

}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;

}
.error {
    color: #D8000C;
    background-color: #FFBABA;

}
h2,
.h2 {
    font-size: 30px;
    color:#3a44bb;
    font-family:sans-serif;
}