﻿/*CONTENEDOR LINEA AZUL*/
.container-top {
    color: white;
    width: 100%;
    height: 18vw;
    background-image: url('img/Recurso 3 5.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

/* imagenes del top */
.img-top {
    width: 23vw;
    height: 15vw;
}

/*imagenes de las ruedas de carreta*/
.fondo1 {
    margin-top: -5%;
    width: 49.3vw;
    position: absolute;
    z-index: -1;
}

.fondo2 {
    margin-top: -36%;
    margin-left: -50%;
    width: 50vw;
    position: absolute;
    z-index: -1;
}

/* contenedores rojo y azul */
.container-harina, .container-alimentacion {
    margin-top: 2vw;
    text-align: right; /*etiqueta harina de yuca primera*/
    width: 100%;
    height: 30vw;
    position: relative;
}

/* contenedor de color rojo superior - HARINA DE YUCA */
.contenido-harina {
    border-radius: 25px;
    display: flex;
    margin: 0 5vw 0 5vw;
    height: 19vw;
    background-color: #e52528;
}
/* titulo harina de yuca */
.container-harina h1 {
    color: #e52528;
    width: 95%;
    margin-left: -2%; /*correr hacia la izquierda el titulo HARINA DE YUCA*/
}

/* imagen de harina de yuca */
.img-harina {
    width: 30vw;
    height: 30vw;
    background-image: url('img/elementos-09.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -7vw;
}

/* descripciones de la harina y alimentacion-gluten */
.container-harina .descripciones, .container-alimentacion .descripciones {
    color: white;
    font-size: 1.7vw;
    text-align: center;
    width: 50vw;
    height: 100%;
}

.container-harina .descripciones {
    margin-left: 10vw;
    padding: 3vw;
}

.container-alimentacion .descripciones {
    padding: 1vw;
}

/********************ALIMENTACION Y GLUTEN **********************/
/* para el contenedor principal */
.container-alimentacion {
    text-align: left;
}
/* contenedor de color azul segundo - ALIMENTACION Y GLUTEN */
.contenido-alimentacion {
    border-radius: 25px;
    display: flex;
    margin: 0 5vw 0 5vw;
    height: 20vw; /*tmn contenedor azul*/
    background-color: #0164a6;
}
/* titulo alimentacion y gluten */
.container-alimentacion h1 {
    color: #0164a6;
    width: 95%;
    margin-left: auto;
}

/* imagen de alimentacion y gluten - 1mer contendor azul */
.img-alimentacion {
    width: 29vw;
    height: 29vw;
    background-image: url('img/elementos-10.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: -4.5vw -5.8vw 0 15vw;
}

/* imagen segundo contenedor rojo - GLUTEN */
.img-gluten {
    width: 30vw;
    height: 30vw;
    background-image: url('img/elementos-11.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -7vw;
}

/* imagen de yucas - PRIMER CONTENEDOR SIN FONDO */
.img-yucas {
    width: 30vw;
    height: 30vw;
    background-image: url('img/elementos-12.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -5vw;
    margin-left: 20vw;
}

/* imagen del pan - SEGUNDO CONTENEDOR SIN FONDO */
.img-pan {
    width: 30vw;
    height: 30vw;
    background-image: url('img/elementos-13.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -5vw;
    margin-right: 13vw;
}

@media screen and (max-width: 768px) {
    /* titulos */
    .primeraBarra h2, .container-harina h1, .container-alimentacion h1 {
        font-size: 3.5vw;
    }

    .container-harina, .container-alimentacion {
        height: 30vw;
    }

    .img-harina {
        margin-top: -5vw;
    }

    .img-gluten {
        margin-top: -5vw;
    }

    .img-alimentacion {
        margin: -3.5vw -6.4vw 0 15vw;
    }

    .container-alimentacion .descripcion-alimentacion {
        width: 50%;
        margin-left: 5vw;
    }

    .fondo1 {
        width: 48.5vw;
    }
    /* contenedor de color rojo superior - HARINA DE YUCA */
    .contenido-harina {
        margin: 0 5vw 0 5vw;
        height: 22vw;
    }

    .contenido-alimentacion {
        height: 22vw;
    }
    /* descripciones de la harina y alimentacion-gluten */
    .container-harina .descripciones, .container-alimentacion .descripciones {
        font-size: 1.8vw;
    }
}

@media screen and (max-width: 429px) {
    /* descripciones de la harina y alimentacion-gluten */
    .container-harina .descripciones, .container-alimentacion .descripciones {
        margin: -1%;
        font-size: 1.9vw;
    }

    .container-harina .desc, .container-alimentacion .desc {
        font-size: 1.9vw;
    }

    .fondo1 {
        width: 47.8vw;
    }
}

@media screen and (max-width: 350px) {
    .fondo1 {
        width: 49.8vw;
    }
}
