:root {
    --gris: #302e2f;
    --verde: #6d8280;
    --crema: #e4cfc1;
    --rojo: #e03f41;
}

.menuContainer{
    background-image: url(../img/bk_verde.jpg);
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    position: fixed;
    z-index: 1000;
    top: 0;
    left:0;
    width: 100%;
    margin: 0;
    z-index: 3;
}
#franja{
    margin-top:65px;
}
#franja img{
    width:100vw;
}
section.contenidoSomos{
    margin: 2em 1em 1em 1em;
    display:flex;
}
div.imgLogo{
    flex:1;
    display:flex;
    justify-content: flex-end;
}
div.imgLogo img{
    width:100%;
    max-width:40px;
    height: fit-content;
    margin-top:1em;
    height:-moz-available;
}
.textoSomos{
    font-family: 'fivo_sansmedium', sans-serif;
    margin:1em;
    flex:6;
}
.textoSomos p{
    font-size:0.9em;
}
section.productores{
    max-width:100%;
}
div.prodBox{
    background-color:var(--verde);
    display:flex;
    align-items: center;
    justify-content: center;
}
div.prodBox .prodFoto{
    flex:1;
    align-self: flex-start;
    cursor: pointer;
}
.alinea-start{
    align-self: flex-start;
    margin-top:1.5em !important;
}
div.prodBox .prodFoto img{
    width:90%;
    margin:1em;
    border-radius: 50%;
}
div.prodBox .prodTexto{
    flex:3;
    margin:1em;
}
p.nombreProd{
    font-weight:bold;
    color: #e4cfc1;
    margin-bottom:0em;
    letter-spacing: 1px;
    font-size:1.1em;
    cursor: pointer;
}
p.tituloProd{
    color: #e4cfc1;
    font-weight:bold;
    font-size:.9em;
    margin-bottom:0.5em;
    cursor: pointer;
}
p.textoProd{
    color: black;
    padding-right: .9em;
}
div.textoProdOff{
    display:none;
}
section.contacto{
    margin: 3em 1em;
    display:flex;
}
div.cont{
    flex:1;
}
div.contContenido{
    flex:2.5;
}
div.contContenido p.contactoTexto{
    margin-bottom:0;
}
footer {
    background:none;
    /* Do not repeat the image */
    width:100%;
    margin-top: 70px;
    padding:0;
}
footer img{
    margin-top:5px;
    height:15px;
    width:100%;
}
.auxBkColor{
    background-color: var(--crema) !important;
}
.auxBkColor div.prodTexto p{
    color:black !important;
}


@media screen and (min-width:576px) {
    div.contContenido{
        flex:3;
    }
    .alinea-start{
        margin-top:50px !important;
    }
}
@media screen and (min-width:768px) {
    p.textoProd{
        padding-right: 2.5em;
    }
    div.cont p{
        font-size:1.4em;
    }
    div.contContenido p.contactoTexto{
        font-size:1.2em;
    }
    div.prodBox:hover{
        background-color:var(--crema);
    }
    div.prodBox:hover div.prodTexto p{
        color:black;
    }
    div.imgLogo img{
        max-width:60px;
    }
    p.nombreProd{
        font-size:1.2em;
    }
    p.tituloProd{
        font-size:1em;
    }
    #franja{
        margin-top:70px;
    }
    .textoSomos{
        margin:1em;
        flex:5;
    }
    .textoSomos p{
        font-size:1em;
    }
    section.productores{
        margin-left:15%;
    }
    div.prodBox .prodFoto img{
        max-width: 200px;
    }
    section.contacto{
        width:80%;
        margin-left:20%;
        margin-top:70px;
    }
    div.logosRedesCont p.firmaFooter {
        display: flex;
        justify-content: flex-start;
    }
    div.contContenido{
        flex:3.5;
    }
    .alinea-start{
        margin-top:55px !important;
    }
}
@media screen and (min-width:992px) {
    div.contContenido{
        flex:5;
    }
    div.textoSomos p{
        font-size:1.1em;
        margin:0 1.5em;
    }
    div.imgLogo img{
        max-width:80px;
    }
    .alinea-start{
        margin-top:75px !important;
    }


}
@media screen and (min-width:1200px) {
    div.prodBox .prodTexto{
        flex:4;
        margin:1em;
    }
    div.contContenido{
        flex:7;
    }
    section.productores{
        max-width:100%;
        margin-left:15%;
        margin-right:15%
    }

    section.contenidoSomos{
        width:80%;
        margin: 70px auto;
        max-width: 1000px;
    }
    p.nombreProd{
        font-size:1.3em;
    }
    p.tituloProd{
        font-size:1.1em;
    }
    p.textoProd{
        font-size:1.1em;
        padding-right: 10%;
        max-width:1100px;
    }
    div.imgLogo img{
        max-width:100px;
    }
    div.cont p{
        font-size:1.6em;
    }
    div.contContenido p.contactoTexto{
        font-size:1.3em;
    }
    p.firmaFooter img {
        max-width: 35px;
    }
    .alinea-start{
        margin-top:75px !important;
    }

}