@font-face {
    font-family: 'BSBook';
    src: url(fonts/BentonSans-Book.woff) format("woff"),
         url(fonts/BentonSans-Book.ttf) format("opentype");
}
@font-face {
    font-family: 'BSBold';
    src: url(fonts/BentonSans-Bold.woff) format("woff"),
         url(fonts/BentonSans-Bold.ttf) format("opentype");
}

html{
    margin: 0px;
    padding: 0px;
}
a{
    text-decoration: none;
    color: #FFFFFF;
}
.bold{
    font-family: 'BSBold';
}
.right{
    text-align: right;
}
.clear{
    clear: both;
}
.float{
    float: left;
}
body{
    margin: 0px;
    padding: 0px;
    font-size: 12pt;
    font-family: 'BSBook';
}
#footer{
    margin: 20px 0;
    width: 100%;
    text-align: center;
    color: #8BE1E9;
    font-size: 0.8em;
    position: absolute;
    bottom: 0%;
}
@media only screen and (min-width:320px) and (max-width:767px){
    .boton{
        border-radius: 10px;
        background-color: #FFE761;
        color: #001391;
        padding: 8px 60px;
        cursor: pointer;
        text-align: center;
        font-family: 'BSBold';
        width: fit-content;
        margin: 10px auto;
        font-size: 3.5vw;
    }
    #login{
        top: 35%;
        width: 70%;
        left: 15%;
        text-align: center;
        z-index: 2;
        position: absolute;
    }
    #login img{
        width: 65%;
    }
    #box-login{
        background-color: #FFFFFF;
        border-radius: 12px;
        margin: 8% 0;
        padding: 8vw 0;
        color: #1464A5;
    }
    #recoveries-logo{
        width: 35%;
        padding: 4vw;
    }
    #recoveries-logo img{
        width: 100%;
    }
    #alert{
        width: 80%;
        margin: 0 auto;
        color:#ffa63b;
        font-size: 0.9em;
        display: none;
    }
}
@media only screen and (min-width: 768px){
    .circulo{
        border-radius: 50%;
        background-color: #85C8FF;
        position: relative;
        
    }
    #circulo1{
        width: 200px; 
        height: 200px;
        left: 5%;
        filter: blur(70px);
    }
    #circulo2{
        position: absolute;
        width: 70px;
        height: 70px;
        left: 25%;
        bottom: -30px;
        filter: blur(30px);
    }
    #circulo3{
        position: absolute;
        width: 120px;
        height: 120px;
        left: 70%;
        filter: blur(45px);
    }
    #circulo4{
        position: absolute;
        width: 70px;
        height: 70px;
        left: 85%;
        top: 0px;
        filter: blur(30px);
    }
    #pelota1{
        position: absolute;
        left: 74%;
        width: 9vw;
        top: 25%;
        animation: bounce1 2s ease-in-out infinite;
    }
    @keyframes bounce1{
        0%, 100%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-70px);
        }
    }
    #pelota2{
        position: absolute;
        left: 18%;
        width: 5vw;
        top: 75%;
        animation: bounce 1.4s ease-in-out infinite;
    }
    @keyframes bounce{
        0%, 100%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-15px);
        }
    }
    #pelota3{
        position: absolute;
        left: 33%;
        width: 7vw;
        top: -2%;
        animation: bounce3 1.8s ease-in-out infinite;
    }
    @keyframes bounce3{
        0%, 100%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-30px);
        }
    }
    .boton{
        border-radius: 10px;
        background-color: #FFE761;
        color: #001391;
        padding: 5px 35px;
        cursor: pointer;
        text-align: center;
        font-family: 'BSBold';
        width: fit-content;
        margin: 10px auto;
        font-size: 1.3vw;
    }
    #login{
        top: 35%;
        width: 30%;
        left: 35%;
        text-align: center;
        z-index: 2;
        position: absolute;
    }
    #login img{
        width: 75%;
    }
    #box-login{
        background-color: #FFFFFF;
        border-radius: 12px;
        padding: 10px 0;
        margin: 8% 0;
        color: #1464A5;
    }
    #recoveries-logo{
        width: 18%;
        padding: 4vw;
    }
    #recoveries-logo img{
        width: 100%;
    }
    #alert{
        width: 80%;
        margin: 0 auto;
        color:#ffa63b;
        font-size: 0.9em;
        display: none;
    }
}