/* -- -- CSS de los bontones -- -- */

/* -- -- btn de azul a gris -- -- */
/* -- id - btn_main / btn_form -- */
#btn_main, #btn_form
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-color: #005e8f;
    /* background-color: #0080a8; */
    border-color: transparent;
    color: white;
}
#btn_main:hover, #btn_form:hover
{
    transition: all 0.5s;
    background-color: #a4a9ad !important;
    color: #000000 !important;
}

#btn_main
{
    width: 50%;
}
#btn_form
{
    width: fit-content;
}

/* -- -- btn de gris oscuro a gris claro -- -- */
/* -- id - btn_conocenos -- */
#btn_conocenos
{
    background-color: #525252;
    color: white;
}
#btn_conocenos:hover
{
    transition: all 0.5s;
    background-color: #a4a9ad;
    color: #000000;
}

/* -- -- BTN - scroll top -- -- */
/* -- id - button -- */
#button
{
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    text-align: center;
    background-color: #0080a8;
    border-radius: 4px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

#button::after 
{
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}
#button:hover 
{
    cursor: pointer;
    background-color: #333;
}
#button:active 
{
    background-color: #555;
}
#button.show 
{
    opacity: 1;
    visibility: visible;
}

/* -- responsive / @media -- */
@media (min-width: 500px) 
{
    #button {
        margin: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}