/*
colores de la pagina web
#37B34A
#024593
colores oficiales
#0055CD
#00BF78
*/
body:not(.bdp-enteractive) {
    background-color: #111d67;
    background-attachment: fixed;
    color: #ffffff;

    .bloque blockquote {
        background-color: #cfd8dc;
    }

    .bloque blockquote small {
        color: black;
    }

    & textarea {
        text-transform: uppercase;
    }

    & input {
        text-transform: uppercase;
    }

    .inputLogin {
        text-transform: none;
    }

    & p {
        color: #ffffff;
    }

    /* CSS link color */

    & h5 {
        color: #ffffff;
    }

    & small {
        color: #ffffff;
    }

    & strong {
        color: #ffffff;
    }

    .negro {
        color: #000000;
    }

    .negro div input {
        color: #2cd118;
    }

    .negro div {
        color: #2cd118;
    }

    .negro div strong {
        color: #000000;
    }

    .negro div p {
        color: #000000;
    }

    .negros div input {
        color: #000000;
    }

    .negros div {
        color: #000000;
    }


    /*a { color: #2cd118; } /* CSS link color */

    .caja {
        /*color:#000000;
  background-color: red;*/
    }

    .mapa {
        background-color: #111d67;
        color: #ffffff;
        height: 50px;
    }

    .tarjeta {
        background-color: #111d67;
        color: #ffffff;
    }

    .basecolor {
        background-color: #2cd118;
    }

    .basecolorboton {
        background-color: #08155f;
    }

    .basefondo {
        background-color: #f3f3f3;
    }

    .baseblanco {
        background-color: #ffffff;
        color: black;
    }

    .baseblanco p {
        color: black;
    }

    .baseblanco strong {
        color: black;
    }

    .verde {
        color: #2cd118;
    }

    .blanco {
        color: #ffffff;
    }

    .espacios {
        margin-left: 30px;
    }

    & footer {
        text-align: center;
        color: whitesmoke;
        font-family: 'Roboto Mono', Roboto, sans-serif;
        width: 100%;
        bottom: 0;
        position: fixed;
        margin-top: 50px;
        /*background-image: url('/assets/img/footer.png');*/
        background: url(/assets/img/footer.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    & #logo {
        font-family: 'Roboto Mono', Roboto, sans-serif;
        font-size: 1.5em;
        font-color: #ffffff!important;
    }

    .animated {
        animation-duration: 1s;
        animation-fill-mode: both;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .fadeInUp {
        animation-name: fadeInUp;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fadeIn {
        animation-name: fadeIn;
    }

    @keyframes bounceInRight {

        from,
        60%,
        75%,
        90%,
        to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        from {
            opacity: 0;
            transform: translate3d(3000px, 0, 0);
        }

        60% {
            opacity: 1;
            transform: translate3d(-25px, 0, 0);
        }

        75% {
            transform: translate3d(10px, 0, 0);
        }

        90% {
            transform: translate3d(-5px, 0, 0);
        }

        to {
            transform: none;
        }
    }

    .bounceInRight {
        animation-name: bounceInRight;
    }

    @keyframes pulses {
        from {
            transform: scale3d(1, 1, 1);
        }

        50% {
            transform: scale3d(1.05, 1.05, 1.05);
        }

        to {
            transform: scale3d(1, 1, 1);
        }
    }

    .pulses {
        animation-name: pulses;
    }

    @keyframes jackInTheBox {
        from {
            opacity: 0;
            transform: scale(0.1) rotate(30deg);
            transform-origin: center bottom;
        }

        50% {
            transform: rotate(-10deg);
        }

        70% {
            transform: rotate(3deg);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .jackInTheBox {
        animation-name: jackInTheBox;
    }

    @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale3d(.3, .3, .3);
        }

        50% {
            opacity: 1;
        }
    }

    .zoomIn {
        animation-name: zoomIn;
    }

    @keyframes zoomOut {
        from {
            opacity: 1;
        }

        50% {
            opacity: 0;
            transform: scale3d(.3, .3, .3);
        }

        to {
            opacity: 0;
        }
    }

    .zoomOut {
        animation-name: zoomOut;
    }

    @keyframes zoomInDown {
        from {
            opacity: 0;
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }

        60% {
            opacity: 1;
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        }
    }

    .zoomInDown {
        animation-name: zoomInDown;
    }

    .login {
        opacity: 0.7;
        filter: alpha(opacity=70);
        /* For IE8 and earlier */
    }

    .colorVal {
        color: red;
    }

    #contenedor {
        justify-content: center;
        margin: 10px auto;
        width: 290px;
        height: 50px;
    }

    .reloj {
        font-size: 20px;
        font-family: Courier, sans-serif;
        color: #2cd118;
    }
}