@font-face{
    font-family: 'Alata';
    src: url(./fuentes/Alata-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{
    padding: 0px;
    margin: 0%;
}


@media screen and (max-width: 547px){
    .intro {
        margin: 0%;
        padding: 0%;
        max-width: 100%;
        height: 350px;
        background: linear-gradient(325deg, rgba(35, 147, 169, 0.8), rgba(35, 147, 169, 0.5)), url(imagenes/fondo.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;

    }
    .topbar {
        height: 50px;
        display: flex;
        align-items: center;
        padding: 2px 10px 0 10px;
        width: 100%;
        position: fixed;
        background: rgba(120, 120, 120, .1);
        border-bottom: 1px solid rgba(225, 225, 225, .5);
        backdrop-filter: blur(8px);
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    }
    .toplogo {
        max-width: 100px;
    }
    .logo {
        width: 100%;
        height: auto;
    }
    .bloque {
        width: 70%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: right;
        padding: 0 25px 0 25px;
    }
    .bloque h1 {
        margin: 0;
        width: 75%;
        font-family: 'Alata', sans-serif;
        color: white;
        font-size: 2em;
    }
    .bloque h2 {
        margin: 0;
        width: 100%;
        font-family: 'Alata', sans-serif;
        color: white;
        font-size: 1.5em;
    }
    
    .bloque p {
        margin: 15px 0 0 0;
        font-family: Helvetica, sans-serif;
        font-size: 1em;
        color: white;
    }
    .info {
        margin: 0%;
        padding: 0%;
        max-width: 100%;
        height: 300px;
        background-color: rgb(179, 157, 91);
        display: flex;
        align-items: center;
    }
}