/*
PALETA COLORES
Azul = #0164a6
Rojo = #e52528
*/
* {
    margin: 0px;
    padding: 0px;
}

hr {
    border: 6px solid white;
}

.primeraBarra {
    color: white;
}

    .primeraBarra .container-fluid {
        background-image: url('img/Recurso 3 5.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .primeraBarra .row {
        flex-wrap: wrap;
    }

    .primeraBarra .col {
        padding: 2% 0%;
    }

@media screen and (max-width: 1450px) { /*Todos estos media son para mantener bien acomodado el coso azul, con las letras de buen tamaño y las imagenes igual*/
    .primeraBarra h2 {
        font-size: 20px;
    }

    .primeraBarra img {
        height: 160px;
    }
}

@media screen and (max-width: 1050px) {
    .primeraBarra h2 {
        font-size: 15px;
    }

    .primeraBarra img {
        height: 120px;
    }
}

@media screen and (max-width: 800px) {
    .primeraBarra h2 {
        font-size: 10px;
    }

    .primeraBarra img {
        height: 100px;
    }
}

@media screen and (max-width: 600px) {
    .primeraBarra h2 {
        font-size: 7px;
    }

    .primeraBarra img {
        height: 50px;
    }

    hr {
        border: 3px solid white;
    }
}

@media screen and (max-width: 300px) {
    .primeraBarra h2 {
        font-size: 4px;
    }

    .primeraBarra img {
        height: 50px;
    }
}



.descripcion .container-fluid { /*Esta es la imagen de fondo de carreta*/
    background-image: url('img/YuntaTica_RuedaDeCarreta_Gris.png');
    background-size: 65%;
    background-position: 160%; /*esto es para mover el fondo*/
    background-repeat: no-repeat;
}

.descripcion .informacion { /*esta es la imagen roja detras de la informacion*/
    background-image: url('img/Recurso 6.png');
    background-size: 100%;
    background-repeat: no-repeat;
    color: white;
    /*margen para poner el cuadro rojo abajo, y el pading para se centre dentro de la imagen*/
    margin-top: 15%;
    margin-right: 40%;
    padding: 2%;
}

@media screen and (max-width:1200px) { /*mantener tamaño de fondo carreta en todo momento*/
    .descripcion .container-fluid { /*Esta es la imagen de fondo de carreta*/
        background-size: 80%;
        background-position: 300%; /*esto es para mover el fondo*/
    }
}

@media screen and (max-width:1000px) { /*mantener tamaño de fondo carreta en todo momento*/
    .descripcion .container-fluid { /*Esta es la imagen de fondo de carreta*/
        background-size: 100%;
        background-position: 450%; /*esto es para mover el fondo*/
    }

    .descripcion .informacion { /*esta es la imagen roja detras de la informacion*/
        background-size: 100%;
        /*margen para poner el cuadro rojo abajo, y el pading para se centre dentro de la imagen*/
        margin: 10% 0%;
        padding: 2%;
    }
}

@media screen and (max-width:600px) {
    .descripcion .informacion {
        font-size: 10px;
    }
}

@media screen and (max-width:400px) {
    .descripcion .informacion {
        font-size: 5px;
    }
}


hr {
    color: white;
}

.comidas .crepa {
    color: white;
    background-color: #e52528;
}

.comidas .pastel {
    color: white;
    background-color: #0164a6;
}

.comidas .container-fluid {
    padding: 3vh;
}

.pastel .queque img, .empanadas .empanada img, .crepa .crep img { /*adecuar el tamaño de las imagens de las comidas*/
    height: 350px;
    /* animation: flotar 3s ease-in-out infinite; */
}

.pastel .info img, .empanadas .info img, .crepa .info img { /*adecuar el tamañao de las imagenes que estab bajo las letras*/
    height: 150px;
}
/*ADAPTACION COMIDAS RESPONSIVE*/
@media screen and (max-width:600px) {
    .pastel .queque img, .empanadas .empanada img, .crepa .crep img { /*adecuar el tamaño de las imagens de las comidas*/
        height: 270px;
    }

    .pastel .info img, .empanadas .info img, .crepa .info img { /*adecuar el tamañao de las imagenes que estab bajo las letras*/
        height: 75px;
    }
}

@media screen and (max-width:400px) {
    .pastel .queque img, .empanadas .empanada img, .crepa .crep img { /*adecuar el tamaño de las imagens de las comidas*/
        height: 150px;
    }

    .pastel .info img, .empanadas .info img, .crepa .info img { /*adecuar el tamañao de las imagenes que estab bajo las letras*/
        height: 30px;
    }
}

@media screen and (max-width:300px) {
    .pastel .queque img, .empanadas .empanada img, .crepa .crep img { /*adecuar el tamaño de las imagens de las comidas*/
        height: 70px;
    }

    .comidas h1 {
        font-size: 10px;
    }
}



.ultimaParte {
    margin: 3vh 0vh;
}

    .ultimaParte input {
        color: white;
        background-color: #0164a6;
        border-radius: 10px;
        border: none;
        padding: 0.5vh 5vh;
    }

@media screen and (max-width:300px) {
    .ultimaParte input {
        padding: 0.5vh 0.5vh;
    }
}

@keyframes flotar { /*hacer que objetos floten*/
    0%, 100% {
        transform: translateY(0); /*empieza en posicion 0*/
    }

    50% {
        transform: translateY(-2%); /*se mueve a -2 de donde esta*/
    }
}


/*joseeeeee*/

/* CONTENEDOR DE LA IMAGEN - PASTEL-CHOCOLATE */
.container-img {
    width: 100%;
    height: 500px;
    background-image: url('img/Recurso 1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
}

    .container-img .container-texto p {
        font-size: 15px;
    }

    /* IMAGEN AZUL SUPERIOR */
    .container-img .img-top {
        position: absolute;
        top: -70px;
        left: 0;
        width: 100%;
        height: 100px;
    }

    /* IMAGEN ROJA INFERIOR */
    .container-img .img-button {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        height: 100px;
    }

    /*IMAGEN IZQUIERDA*/
    .container-img .img-left {
        position: absolute;
        top: -70px;
        left: 80px;
        width: 100px;
        height: 100px;
    }
    /*IMAGEN DERECHA*/
    .container-img .img-right {
        position: absolute;
        top: -70px;
        right: 80px;
        width: 100px;
        height: 100px;
    }

    /* CONTENDOR CON EL TEXTO */
    .container-img .container-texto,
    .container-img .container-titulo {
        color: white;
        text-align: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }

    .container-img .container-texto {
        width: 600px;
        height: 100px;
        margin-top: -50px;
    }

    .container-img .container-titulo {
        background-color: #e52528;
        width: 100%;
        height: 60px;
        margin-top: 410px;
        margin-bottom: -50px;
        padding: 10px;
    }

        .container-img .container-titulo h5 {
            margin-top: 5px;
        }

/* APARTADO DE INGREDIENTE Y PROCEDIMIENTOS */
.container-ingredientes, .container-procedimiento {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 500px;
}

.container-procedimiento {
    background-image: url('img/YuntaTica_Planta_Azu.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 500px;
    height: 500px;
}
/*IMAGEN EN LA PARTE BAJA DE L0S INGREDIENTES*/
.img-ingredientes {
    width: 300px;
    height: 300px;
}

/* RESPONSIVE */
@media screen and (max-width: 767px) {
    /* CONTENEDOR DE LA IMAGEN DE FONDO */
    .container-img {
        top: -70px;
        background-size: contain;
        height: 70vh;
    }

        /*IMG DEL TOP - BARRA AZUL*/
        .container-img .img-top {
            top: auto;
            left: 0;
            height: 15vw;
        }

        .container-img .container-texto p {
            margin-top: 11vw;
            font-size: 2vw;
        }

        /*IMAGEN IZQUIERDA*/
        .container-img .img-left {
            top: auto;
            left: 2vw;
            width: 15vw; /*Tamaños del img*/
            height: 15vw; /*Tamaños del img*/
        }
        /*IMAGEN DERECHA*/
        .container-img .img-right {
            top: auto;
            right: 2vw;
            width: 15vw; /*Tamaños del img*/
            height: 15vw; /*Tamaños del img*/
        }

        .container-img .container-titulo {
            top: auto;
            bottom: 0;
            width: 100%;
            height: 10vh;
            margin: 5vh 0;
        }


    .container-titulo h5 {
        font-size: 2vw;
        margin-top: auto;
        height: auto;
    }

    .container-img .container-texto {
        width: 100%;
        margin-top: -10%;
    }

    .container-img .container-titulo {
        width: 100%;
    }

    .container-ingredientes,
    .container-procedimiento {
        width: 90%;
        max-width: 400px;
    }

    /*PARTE DE LA RECETA*/
    .container-ingredientes,
    .container-procedimiento {
        margin-top: -40px;
        font-size: 2vw;
        background-size: contain;
        height: 50vh;
    }

    h4 {
        font-size: 3vw;
    }

    .img-ingredientes {
        width: 100%;
        height: auto;
    }
}

@media screen and (min-width:401px) and (max-width: 526px) {
    /* CONTENEDOR DE LA IMAGEN DE FONDO */
    .container-img {
        top: -70px; /*Mover el contenedor principal*/
        height: 45vh;
    }

        /*IMG DEL TOP - BARRA AZUL*/
        .container-img .img-top {
            top: auto;
            left: 0;
            height: 12vw;
        }

        /*TITULO COLOR ROJO*/
        .container-img .container-texto p {
            font-size: 1.8vw;
        }

        /*IMAGEN IZQUIERDA Y DERECHA*/
        .container-img .img-left,
        .container-img .img-right {
            top: auto;
            width: 10vw;
            height: 10vw;
            margin-top: 5px;
        }

        .container-img .container-titulo {
            height: 7vh;
        }

        /*CONTENEDOR ROJO - TITULO*/
        .container-img .container-titulo {
            top: 38vw;
        }

    .container-titulo h5 {
        font-size: 2vw;
        margin-top: -2px;
    }

    .container-img .container-titulo h5 {
        margin-top: -2px;
    }

    .container-ingredientes,
    .container-procedimiento {
        margin-top: -20px;
        width: 90%;
        font-size: 3vw;
    }

    /*PARTE DE LA RECETA*/
    h4 {
        font-size: 3vw;
    }
}

@media screen and (max-width: 400px) {
    /* CONTENEDOR DE LA IMAGEN DE FONDO */
    .container-img {
        top: -70px; /*Mover todo el contenedor principal*/
        height: 34vh;
    }

        /*IMG DEL TOP - BARRA AZUL*/
        .container-img .img-top {
            top: auto;
            left: 0;
            height: 13vw;
        }

        /*TITULO SUPERIOR*/
        .container-img .container-texto p {
            font-size: 1.9vw;
        }

        /*IMAGEN IZQUIERDA Y DERECHA*/
        .container-img .img-left,
        .container-img .img-right {
            top: auto;
            width: 10vw;
            height: 10vw;
            margin-top: 7px;
        }
        /*CONTENEDOR ROJO - TITULO*/
        .container-img .container-titulo {
            height: 5vh;
            top: 35vw;
        }

            .container-img .container-titulo h5 {
                margin-top: -2px;
            }

    .container-ingredientes,
    .container-procedimiento {
        margin-top: -35px;
        width: 90%;
        font-size: 3vw;
    }

    /*PARTE DE LA RECETA*/
    h4 {
        font-size: 3vw;
    }
}

@media screen and (max-width: 300px) {
    /* CONTENEDOR DE LA IMAGEN DE FONDO */
    .container-img {
        top: -70px;
        height: 33vh;
    }

        /*IMG DEL TOP - BARRA AZUL*/
        .container-img .img-top {
            top: auto;
            left: 0;
            height: 15vw;
        }

        /*IMAGEN IZQUIERDA*/
        .container-img .img-left {
            margin-top: 10px;
            left: 0.5vw;
        }
        /*IMAGEN DERECHA*/
        .container-img .img-right {
            margin-top: 10px;
            right: 0.5vw;
        }

        .container-img .container-texto p {
            font-size: 2.2vw;
        }

        .container-img .container-titulo h5 {
            font-size: 2.5vw;
        }

    .container-ingredientes,
    .container-procedimiento {
        margin-top: -70px;
    }
}




.hacerMargen {
    margin-bottom: 10%;
}