/* Modificamos el margin de las redes para que queden centradas en la página */
.redes {
    margin-left: -3em;
}

/* /ponemos estilo al menú */
.carta-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../Img/carta.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 100em;    
}

.text-menu {
    height:90em;
    padding: 10em;
    margin-top: 2em;
    font-size: 1.1em;
    font-family: pirate;
    font-weight: bold;
}

.titulo2 {
    text-align: right;
}
/* Estilo a las imágenes del menú */
.cafe {
    position: absolute;
    width: 20em;
    height: 20em;
    margin-top: 40em;
    margin-left: 23em;
}
.coffe {
    width: 20em;
    opacity: 0.78;
}
.chocolate {
    position: absolute;
    width: 20em;
    height: 20em;
    margin-top: 15em;
    margin-left: -2em;
}

.churro {
    position: absolute;
    margin-left: 32em;
    margin-top: 0em;
    width: 10em;
    opacity: 0.68;
}
.croasan {
    position: absolute;
    width: 16em;
    margin-top: 57em;
    margin-left: 2em;
    opacity: 0.75;
}


/* ponemos el estilo al footer para que entre otras cosas siempre quede centrado */
.footer {
      
    margin-top: 10em;
   
}
/* Aqui tenemos los @media para que la página sea lo mas responsive posible */
@media(max-width: 1240px) {

    .carta-menu {
        background-image: none;
        height: 50em;
    }
    .text-menu {        
        height:80em;
        padding: 5em;
        font-size: 0.7em;            
    }
     h1 {
        font-size: medium;
    }
     .titulo2 {
        text-align: left;
    }
    .col-6 {
        width: 2em;
    }
    .col-4 {
        width: 25em;
    }
    .churros {
        margin-left: 37em;
    }
    .churro {
        width: 8em;
    }
    .chocolate {
        margin-left: 35em;
    }
    .cafe {
        margin-left: 35em;
        margin-top: 35em;
    }
    .coffe {
        width: 15em;
    }
    .croasan {
        margin-left: 35em;
        margin-top: 52em;
    }
    .croissant {
        width: 15em;
    }
    .red{
        margin-left: 2em;
    }
}
@media(max-width: 991px){

    #home:hover{
    height: 2.55em;
    }
    .croasan{
        display: none;
    }
    .cafe {
        display: none;
    }
    .churros {
        display: none;
    }
    .chocolate {
        display: none;
    }
    .visitanos {
        text-align: center;
        margin-top: 0em;
    }
    h2 {
        font-size: x-large;
    }
    .red {
        height: 4em;
        margin-left: 4.5em;
    }
    .footer {
        margin-left: 0em;
        margin-top: 5em;
    } 
}

@media(max-width: 615px) {

    .cabecera {
        justify-content: center;
        margin-left: -4.5em;
    }
}