/* body {
        background: #007bff;
        background: linear-gradient(to right, #0062E6, #33AEFF);
    }*/
.btn-login {
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    padding: 0.75rem 1rem;
}
/*
    .btn-google {
        color: white !important;
        background-color: #ea4335;
    }

    .btn-facebook {
        color: white !important;
        background-color: #3b5998;
    }*/

.col-lg-2.imagenPie img {
    width: 122px;
}


@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

* {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: 'Exo', sans-serif;
    background: rgb(0,153,222);
    background: linear-gradient(180deg, rgb(238 238 238) 0%, rgba(255,255,255,1) 100%);
    /*background: linear-gradient(180deg, rgba(0,153,222,1) 0%, rgba(255,255,255,1) 100%);*/
    /*background: -prefix-linear-gradient(top, blue, white);*/
    /*animation: color 50s infinite linear;*/
}


.btn-calimod {
    color: #fff;
    background-color: #000;
    border-color: #000000;
}

.context {
    width: 100%;
    position: absolute;
    top: 50vh;
}

    .context h1 {
        text-align: center;
        color: #fff;
        font-size: 50px;
    }


.area {
    /* background: #4e54c8;
        background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);*/
    /* background: #fff; */
    width: 100%;
    height: 100vh;
}


.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        /*background: rgba(194, 35, 35, 0.2);*/
        animation: animate 25s linear infinite;
        bottom: -150px;
    }

        .circles li:nth-child(1) {
            bottom: -230px;
            left: 25%;
            width: 180px;
            height: 180px;
            animation-delay: 0s;
            animation-duration: 25s;
        }


        .circles li:nth-child(2) {
            bottom: -230px;
            left: 10%;
            width: 180px;
            height: 180px;
            animation-delay: 4s;
            animation-duration: 30s;
        }

        .circles li:nth-child(3) {
            bottom: -230px;
            left: 70%;
            width: 180px;
            height: 180px;
            animation-delay: 5s;
            animation-duration: 35s;
        }

        .circles li:nth-child(4) {
            bottom: -230px;
            left: 40%;
            width: 180px;
            height: 180px;
            animation-delay: 6s;
            animation-duration: 30s;
        }

        .circles li:nth-child(5) {
            bottom: -230px;
            left: 65%;
            width: 180px;
            height: 180px;
            animation-delay: 7s;
            animation-duration: 40s;
        }

        .circles li:nth-child(6) {
            bottom: -230px;
            left: 5%;
            width: 180px;
            height: 180px;
            animation-delay: 8s;
            animation-duration: 30s;
        }

        .circles li:nth-child(7) {
            bottom: -230px;
            left: 35%;
            width: 180px;
            height: 180px;
            animation-delay: 9s;
            animation-duration: 25s;
        }

        .circles li:nth-child(8) {
            bottom: -230px;
            left: 50%;
            width: 180px;
            height: 180px;
            animation-delay: 10s;
            animation-duration: 15s;
        }

        .circles li:nth-child(9) {
            bottom: -230px;
            left: 20%;
            width: 180px;
            height: 180px;
            animation-delay: 11s;
            animation-duration: 35s;
        }

        .circles li:nth-child(10) {
            bottom: -230px;
            left: 85%;
            width: 180px;
            height: 180px;
            animation-delay: 12s;
            animation-duration: 45s;
        }




        .circles li:nth-child(11) {
            bottom: -230px;
            left: 74%;
            width: 180px;
            height: 180px;
            animation-delay: 13s;
            animation-duration: 35s;
        }


        .circles li:nth-child(12) {
            bottom: -230px;
            left: 37%;
            width: 180px;
            height: 180px;
            animation-delay: 14s;
            animation-duration: 25s;
        }

        .circles li:nth-child(13) {
            bottom: -230px;
            left: 61%;
            width: 180px;
            height: 180px;
            animation-duration: 15s;
            animation-delay: 15s;
        }

        .circles li:nth-child(14) {
            bottom: -230px;
            left: 53%;
            width: 180px;
            height: 180px;
            animation-delay: 16s;
            animation-duration: 15s;
        }

        .circles li:nth-child(15) {
            bottom: -230px;
            left: 74%;
            width: 180px;
            height: 180px;
            animation-delay: 17s;
            animation-duration: 45s;
        }

        .circles li:nth-child(16) {
            bottom: -230px;
            left: 6%;
            width: 180px;
            height: 180px;
            animation-delay: 18s;
            animation-duration: 35s;
        }

        .circles li:nth-child(17) {
            bottom: -230px;
            left: 90%;
            width: 180px;
            height: 180px;
            animation-delay: 19s;
            animation-duration: 25s;
        }

        .circles li:nth-child(18) {
            bottom: -230px;
            left: 84%;
            width: 180px;
            height: 180px;
            animation-delay: 20s;
            animation-duration: 15s;
        }

        .circles li:nth-child(19) {
            bottom: -230px;
            left: 26%;
            width: 180px;
            height: 180px;
            animation-delay: 21s;
            animation-duration: 35s;
        }

        .circles li:nth-child(20) {
            bottom: -230px;
            left: 3%;
            width: 180px;
            height: 180px;
            animation-delay: 12s;
            animation-duration: 25s;
        }

        .circles li:nth-child(21) {
            bottom: -230px;
            left: 11%;
            width: 180px;
            height: 180px;
            animation-delay: 23s;
            animation-duration: 45s;
        }

        .circles li:nth-child(22) {
            bottom: -230px;
            left: 1%;
            width: 180px;
            height: 180px;
            animation-delay: 21s;
            animation-duration: 45s;
        }

        .circles li:nth-child(23) {
            bottom: -230px;
            left: 34%;
            width: 180px;
            height: 180px;
            animation-delay: 25s;
            animation-duration: 25s;
        }

        .circles li:nth-child(24) {
            bottom: -230px;
            left: 53%;
            width: 180px;
            height: 180px;
            animation-delay: 26s;
            animation-duration: 15s;
        }

        .circles li:nth-child(25) {
            bottom: -230px;
            left: 61%;
            width: 180px;
            height: 180px;
            animation-delay: 1s;
            animation-duration: 35s;
        }

.copyright {
    font-size: 0.7rem;
    text-align: center;
    margin-top: 17px;
    margin-bottom: -30px;
    font-weight: bold;
}

li img {
    width: 8rem;
}

.titulo {
    font-family: 'Signika Negative', sans-serif;
    font-size: 3rem;
    color: #004b8b;
}


label#IdMensaje {
    margin-top: 30px;
    color: red;
}

@keyframes animate {

    0% {
        /*transform: translateY(0) rotate(0deg);*/
        transform: translateY(-1000px) rotate(720deg);
        /*transform: translateY(0) rotate(0deg);*/
        opacity: 1;
        border-radius: 0;
        /*display: none*/
    }

    100% {
        transform: translateY(0) rotate(0deg);
        /*transform: translateY(-1000px) rotate(720deg);*/
        /*transform: translateY(-1000px) rotate(720deg);*/
        opacity: 0.2;
        border-radius: 50%;
        /*display: block*/
    }
}

@keyframes color {
    0% {
        background: #abafff;
    }

    20% {
        background: #cbff90;
    }

    40% {
        background: #8af4ff;
    }

    60% {
        background: #ffeda5;
    }

    80% {
        background: #8d8d8d;
    }

    100% {
        background: #7ebcff;
    }
}

/*body {
        background: #33CCCC;*/ /* Fallback */
/*animation: color 9s infinite linear;
        text-align: center;
        padding: 2em;
    }*/