/****************************** reset ******************************/
*{
    padding: 0; 
    margin: 0;
    box-sizing: bordex-box;
}

/***************************** Conversion universal para utilizar rem en decimal (1rem = 10px) *****************************/

html{
    font-size: 62.5%;
}

/***************************** header *****************************/ 

.container-header{
    background-color: #FCEFE4;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding-top: 3rem;  
    padding-left: 7rem; 
    padding-right: 1.5rem;
}

.navbar{
    display: flex;
    list-style: none;
    padding-top: 6rem;
    gap: 1rem;
    flex-direction: row;
}

.navbar li a{
    text-decoration: none;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
}

.header-icons{
    display: flex;
    list-style: none;
    justify-content: center;
    padding-right: 3rem;
    padding-left: 6rem;
    gap: 1rem;
}

.header-icons li a{
    text-decoration: none;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem; 
}

.header-icons a span{
    vertical-align: 5%;
}

/****************************** index.html ******************************/

.container-main-title{
    background-color: #FCEFE4;
    /* saco el width para que se adapte al width del header */
    height: 56rem;
    display: grid;
    justify-content: center;
    grid-template-rows: repeat(4,10rem); 
    grid-template-columns: 70rem 40rem;
    grid-template-areas: 
    "title    image"
    "title    image"
    "subtitle image"
    "subtitle image";
}

.main-title{
    grid-area: title;                                /* ordeno a cada item la posicion que ocupa en la matriz */
    justify-self: center;
    align-self: center;
}

.main-title h1{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 5rem;
    text-align: left;
}

.main-subtitle{
    grid-area: subtitle;                                         
}

.main-subtitle h2{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    text-align: left;
}

.main-image{
    grid-area: image;  
}

.main-image img{
    width: 40rem;
    height: 52rem;
}

.container-images{
    height: 31.6rem;                             
    background-color: #FCEFE4;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4,28rem);
    grid-template-rows: 29rem;
    padding-left: 3.5rem;
    padding-right: 4rem;
}

.presencial{
    width: 100%;
    height: 29rem; 
    background-image: url("../assets/img/index/body/subtitulo/presencial.jpg");
    background-position: center;  
    background-size: cover; 
    background-repeat: no-repeat;  
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    order: 1;                                 
}

.presencial p{
    width: 40%;
    background-color: #7AA7A7;
    color: #FCEFE4;
    font-family: 'Poppins', sans-serif;
    font-size: 2.1rem;
    font-weight: bolder;
}

.online{
    width: 100%;
    height: 29rem;
    background-image: url("../assets/img/index/body/subtitulo/online.jpg");
    background-position: center; 
    background-size: cover;                              
    background-repeat: no-repeat;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    order: 2;                                   
}

.online p{
    width: 28%;
    background-color: #7AA7A7;
    color: #FCEFE4;
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    font-weight: bolder;
}

.shop{
    width: 100%;
    height: 29rem;
    background-image: url("../assets/img/index/body/subtitulo/tienda.jpg");
    background-position: center;
    background-size: cover;                                                       
    background-repeat: no-repeat;           
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    order: 3;                                                        
}

.shop p{
    width: 30%;
    background-color: #7AA7A7;
    color: #FCEFE4;
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    font-weight: bolder;
}

.events{
    width: 100%;
    height: 29rem;
    background-image: url("../assets/img/index/body/subtitulo/eventos.jpg");
    background-position: center;
    background-size: cover;                                                       
    background-repeat: no-repeat;   
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    order: 4;                                                                
}

.events p{
    width: 34%;
    background-color: #7AA7A7;
    color: #FCEFE4;
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    font-weight: bolder;
}

.presencial a, .online a, .events a, .shop a{
    width: 100%;
    color: #FCEFE4;
    background-color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    text-decoration: none;
    text-align: center;
}

.container-sponsors {
    height: 10rem;
    background-color: #FCEFE4;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-right: 4rem;  
    column-gap: 9rem;
    margin-bottom: 0; 
}

.form input{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
}

.form button{
    color: #FCEFE4;
    background-color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}

.container-promos{
    height: 28.5rem;
    background-color: #FCEFE4;  
    justify-content: center;
    display: grid;
    grid-template-rows: 4rem 10rem repeat(2, 4rem) ; 
    grid-template-columns: 50rem 61.5rem;
    grid-template-areas: 
    "hasta         image"
    "veinticinco   image"
    "prodsel       image"
    "vermas        image";
}

.text-promo p{
    grid-area: hasta;                                 
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    text-align: start;
}

.text-promo h2{
    grid-area: veinticinco; 
    justify-self: center;
    align-self: center;
    font-style: bold;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 7.0rem;
}

.text-promo h3{
    grid-area: prodsel; 
    justify-self: center;
    align-self: center;
    font-style: bold;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}

.text-promo a{
    grid-area: vermas; 
    justify-self: center;
    align-self: center;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    text-decoration: none;
}

.image-promo{
    grid-area: image;
    height: 25rem;
    display: grid;
    justify-content: right;
}

/****************************** footer ******************************/

.container-newsletter{
    height: 16rem;
    background-color: #FCEFE4;  
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 56rem);
    grid-template-rows:    repeat(2, 5rem);
    grid-template-areas: 
    "recibi          form"
    "suscribite      form"; 
}

.container-newsletter p{
    grid-area: recibi;                               
    text-align: left;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
}

.container-newsletter h2{
    grid-area: suscribite;                                
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    text-align: left;
    font-weight: bolder;
}

.container-newsletter h3{
    grid-area: form;                                
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    justify-content: center;
}

.container-information{
    height: 17rem;                             
    background-color: #FCEFE4;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4, 28rem);
    grid-template-rows: 5rem repeat(3, 3rem);
}

.footer-taller{
    height: 17rem; 
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 5;     
    order: 1;                         
}

.footer-taller h2{
    width: 100%; 
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.footer-taller h3{
    width: 100%; 
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

.footer-taller h4{
    width: 100%; 
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

.footer-taller h5{
    width: 100%; 
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
}

.footer-sale{
    height: 17rem;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;     
    order: 2;                         
}

.footer-sale h2{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.footer-sale-contact{
    list-style: none;
    padding-left: 0.1rem;

}

.footer-sale-contact li a{
    text-decoration: none;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
}

.footer-sale-contact a span{
    vertical-align: 10%;
}

.footer-information{
    height: 17rem;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 5;     
    order: 3;                         
}

.footer-information h2{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

.footer-information h3{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem; 
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.footer-information h4{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}

.footer-information h5{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
}

.footer-social-networks{
    height: 17rem;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 5;     
    order: 4;                         
}

.footer-social-networks h2{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    text-align: center;
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
}

.footer-redes{
    display: flex;
    justify-content: center;
    gap: 1.2rem;
}

.footer-redes li{
    list-style: none; 
}

.copyright{
    background-color: #FCEFE4;
    height: 4vh;
}

.copyright h3{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

/****************************** taller.html ******************************/

.taller-title{
    height: 8rem;
    background-color: #FCEFE4;

}

.taller-title h1{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    padding-left: 8.5rem;
    padding-top: 1rem;
}

.container-main-images{
    height: 40.8rem;
    background-color: #FCEFE4;
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: center;
    padding-left: 4rem;
}

.container-dir{
    height: 12.5rem;
    background-color: #FCEFE4;
    padding-left: 8rem;
}

.container-dir h2{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 2.8rem;
}

.container-dir h3{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}

.container-maps{
    background-color: #FCEFE4;
    height: 37rem;
    display: grid;
    grid-template-columns: repeat(2, 34.5rem);
    grid-template-rows: repeat(5,5rem);
    /* grid-template: repeat(6,100px) / repeat(3,450px); */  /* rows / columns */
    grid-template-areas: 
    "map    location"
    "map    location"
    "map    location"
    "map    location"
    "map    location";
    padding-left: 8rem;
    padding-top: 2rem;
}

.map{
    grid-area: map;                                
}

.location{
    grid-area: location;
    display: grid;
    grid-template-columns: 34.5rem;
    grid-template-rows: repeat(5,3.5rem);
    grid-template-areas: 
    "gmaps"
    "h3"
    "h4"
    "h5"
    "whatsapp";
}

.gmaps{
    grid-area: gmaps;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}

.location h3{
    grid-area: h3;                                
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}

.location h4{
    grid-area: h4;                                
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}

.location h5{
    grid-area: h5;                                
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}

.whatsapp-ventas{
    grid-area: whatsapp;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}

/****************************** staff.html ******************************/

.staff-title{
    height: 7rem;
    background-color: #FCEFE4;
}

.staff-title h1{
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    font-size: 3.2rem;
    padding-left: 7.3rem;
    padding-top: 1rem;
}

.container-integrants{
    height: 68rem;
    background-color: #FCEFE4;
    display: grid;
    justify-content: center; 
    grid-template-rows: repeat(2,30rem); 
    grid-template-columns: repeat(3,30rem);
    grid-template-areas: 
    "enzo juliana magda"
    "nicolas antonella paula";
    column-gap: 2rem;
    row-gap: 3rem;
    padding-left: 4rem;
    padding-top: 2rem;
}

.integrant-enzo{
    grid-area: enzo;
    display: grid;
    width: 28rem;
    height: 29rem;
    padding-top: 1.6rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.integrant-enzo img, .integrant-juliana img, .integrant-magda img, .integrant-nicolas img, .integrant-antonella img, .integrant-paula img{
    justify-self: center;
    align-self: center;
}

.integrant-juliana{
    grid-area: juliana;
    display: grid;
    width: 28rem;
    height: 29rem;
    padding-top: 1.6rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.integrant-magda{
    grid-area: magda;
    display: grid;
    width: 28rem;
    height: 29rem;
    padding-top: 1.6rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.integrant-nicolas{
    grid-area: nicolas;
    display: grid;
    width: 28rem;
    height: 29rem;
    padding-top: 1.6rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.integrant-antonella{
    grid-area: antonella;
    display: grid;
    width: 28rem;
    height: 29rem;
    padding-top: 1.6rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.integrant-paula{
    grid-area: paula;
    display: grid;
    width: 28rem;
    height: 29rem;
    padding-top: 1.6rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.integrant-enzo div h2, .integrant-juliana div h2, .integrant-magda div h2, .integrant-nicolas div h2, .integrant-antonella div h2, .integrant-paula div h2{
    font-size: 2.1rem;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    text-align: center;  
}

.integrant-enzo div p, .integrant-juliana div p, .integrant-magda div p, .integrant-nicolas div p, .integrant-antonella div p, .integrant-paula div p{
    font-size: 1.7rem;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    text-align: center;  
}

.integrant-enzo div a, .integrant-juliana div a, .integrant-magda div a, .integrant-nicolas div a, .integrant-antonella div a, .integrant-paula div a{
    text-decoration: none;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
}

.integrant-enzo div a span, .integrant-juliana div a span, .integrant-magda div a span, .integrant-nicolas div a span, .integrant-antonella div a span, .integrant-paula div a span{
    font-size: 1.4rem;
    vertical-align: 5%;
}

/****************************** academia.html ******************************/

.academia-titles{
    width: 100%;
    height: 5rem;
    background-color: #FCEFE4;
}

.academia-titles h2{
    font-size: 2.8rem;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    padding-left: 7.1rem;
}

.container-courses-in-person{
    height: 40rem;
    background-color: #FCEFE4;
    display: grid;
    justify-content: center; 
    grid-template-rows: 30rem; 
    grid-template-columns: repeat(4,22rem);
    grid-template-areas: 
    "buttercream macarons faultline cupcakes";
    column-gap: 3.5rem;
    padding-left: 1rem;
    padding-top: 2rem;
}

.buttercream{
    grid-area: buttercream;
    display: grid;
    width: 20rem;
    height: 32rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.macarons{
    grid-area: macarons;
    display: grid;
    width: 20rem;
    height: 32rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.faultline{
    grid-area: faultline;
    display: grid;
    width: 20rem;
    height: 32rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.cupcakes{
    grid-area: cupcakes;
    display: grid;
    width: 20rem;
    height: 32rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.buttercream img, .macarons img, .faultline img, .cupcakes img{
    justify-self: center;
    align-self: center;
}

.details{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center;
    margin-top: 1rem;
}

.details h3{
    font-size: 1.6rem;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    text-align: center; 
}

.details p{
    font-size: 2rem;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.details button{
    background-color: #7AA7A7;
}

.details button a{
    text-decoration: none;
    color: #FCEFE4;
    font-family: 'Poppins', sans-serif;
}

.container-courses-online{
    height: 40rem;
    background-color: #FCEFE4;
    display: grid;
    justify-content: center; 
    grid-template-rows: 28rem; 
    grid-template-columns: repeat(4,22rem);
    grid-template-areas: 
    "cakedesigner butterfull bakery icepops";
    column-gap: 3.5rem;
    padding-left: 1rem;
    padding-top: 2rem;
}

.cake-designer{
    grid-area: cakedesigner;
    display: grid;
    width: 20rem;
    height: 28rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.butter-full{
    grid-area: butterfull;
    display: grid;
    width: 20rem;
    height: 28rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.bakery{
    grid-area: bakery;
    display: grid;
    width: 20rem;
    height: 28rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.icepops{
    grid-area: icepops;
    display: grid;
    width: 20rem;
    height: 28rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.cake-designer img, .butter-full img, .bakery img, .icepops img{
    justify-self: center;
    align-self: center;
}

/****************************** tienda.html ******************************/

.tienda-titles{
    width: 100%;
    height: 5rem;
    background-color: #FCEFE4;
}

.tienda-titles h2{
    font-size: 2.8rem;
    color: #7AA7A7;
    font-family: 'Poppins', sans-serif;
    padding-left: 7.1rem;
}

.container-products-molds{
    height: 40rem;
    background-color: #FCEFE4;
    display: grid;
    justify-content: center; 
    grid-template-rows: 30rem; 
    grid-template-columns: repeat(4,22rem);
    grid-template-areas: 
    "heartcake picos platos cucharas";
    column-gap: 3.5rem;
    padding-left: 1rem;
    padding-top: 2rem;
}

.heart-cake{
    grid-area: heartcake;
    display: grid;
    width: 22rem;
    height: 32rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.picos{
    grid-area: picos;
    display: grid;
    width: 22rem;
    height: 32rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.platos{
    grid-area: platos;
    display: grid;
    width: 22rem;
    height: 32rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.cucharas{
    grid-area: cucharas;
    display: grid;
    width: 22rem;
    height: 32rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.heart-cake img, .picos img, .platos img, .cucharas img{
    justify-self: center;
    align-self: center;
}

.container-products-courses{
    height: 40rem;
    background-color: #FCEFE4;
    display: grid;
    justify-content: center; 
    grid-template-rows: 28rem; 
    grid-template-columns: repeat(4,22rem);
    grid-template-areas: 
    "cdesigner bfull fline macarrons";
    column-gap: 3.5rem;
    padding-left: 1rem;
    padding-top: 2rem;
}

.cdesigner{
    grid-area: cdesigner;
    display: grid;
    width: 22rem;
    height: 31rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.bfull{
    grid-area: bfull;
    display: grid;
    width: 22rem;
    height: 31rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.fline{
    grid-area: fline;
    display: grid;
    width: 22rem;
    height: 31rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.macarrons{
    grid-area: macarrons;
    display: grid;
    width: 22rem;
    height: 31rem;
    padding-top: 1rem;
    border-style: solid; 
    border-color: #7AA7A7;
}

.cdesigner img, .bfull img, .fline img, .macarrons img{
    justify-self: center;
    align-self: center;
}


/****************************** Media queries ******************************/

@media(max-width:1202px){
    /* Rango de 1016px a 1202px */

    /******************************* header *******************************/

    .header-icons{
        gap: 2.4rem;
    }
    .header-icons li a span{
        display: none;
    }
    .navbar li a{
        font-size: 2.1rem;
    }

    /******************************* footer ********************************/

    .container-newsletter{
        height: 14rem;
        grid-template-columns: 55rem 40rem;
    }
    
    .container-information{
        height: 20rem;
        grid-template-columns: repeat(4, 23.5rem);
    }

    /******************************* index.html *******************************/

    .container-main-title{
        grid-template-rows: repeat(3,15rem); 
        grid-template-columns: 53rem 40rem;
        grid-template-areas: 
        "title    image"
        "title    image"
        "subtitle image"
        ;
    }

    .container-images{
        height: 28rem;              
        grid-template-columns: repeat(4,23.5rem);
    }

    .presencial, .online, .shop, .events{
        height: 25rem;
    }
    
    .presencial p{
        width: 45%;
    }

    .online p{
        width: 32%;
    }

    .shop p{
        width: 34%;
    }

    .events p{
        width: 38%;
    }

    .container-sponsors{
        gap: 4.2rem; 
    }

    .container-promos{
        grid-template-rows: 5rem 10rem repeat(2, 4.2rem);  
        grid-template-columns: 60.5rem 33rem;
    }

    .text-promo p{
        font-size: 4rem;
    }

    .text-promo h2{
        font-size: 8.0rem;
    }

    .text-promo h3{
        font-size: 1.9rem;
    }

    .text-promo a{
        font-size: 1.7rem;
    }

    /******************************* taller.html *******************************/
    
    .taller-title h1{
        color: #7AA7A7;
        font-family: 'Poppins', sans-serif;
        font-size: 3.5rem;
        padding-left: 8.5rem;
        padding-top: 1rem;
    }

    .container-main-images{
        height: 28.5rem;
        justify-content: center;
        padding-left: 1rem;
    }
    
    .container-main-images img{
        width: 27rem;
        height: 25rem;
    }
    
    .container-dir{
        height: 12.5rem;
        padding-left: 8.5rem;
    }
    
    .container-maps{
        background-color: #FCEFE4;
        height: 37rem;
        display: grid;
        grid-template-columns: repeat(2, 34.5rem);
        grid-template-rows: repeat(5,5rem);
        /* grid-template: repeat(6,100px) / repeat(3,450px); */  /* rows / columns */
        grid-template-areas: 
        "map    location"
        "map    location"
        "map    location"
        "map    location"
        "map    location";
        padding-left: 8rem;
        padding-top: 1rem;
    }
}

@media(max-width:1015px){
    /* Rango de 768px a 1015px */

    /******************************** header ********************************/
    
    .container-header{
        flex-direction: column;
        align-items: center;
        padding-left: 2rem;
    }

    .navbar{
        padding-top: 1rem;
    }

    .header-icons{
        justify-content: center;
        padding-top: 1.6rem;
    }

    /******************************* footer *******************************/

    .container-newsletter{
        height: 20rem;
        grid-template-columns: 66rem;
        grid-template-rows: 4rem 6rem 4rem 4rem;
        grid-template-areas: 
        "recibi"
        "suscribite"     
        "form"
        "form"; 
    }

    .container-newsletter p{
        text-align: center;
    }
    
    .container-newsletter h2{
        text-align: center;
    }
    
    .container-information{
        height: 27rem;                             
        grid-template-columns: repeat(2,33rem);
        grid-template-rows: 5rem repeat(3, 3rem) 5rem repeat(2, 3rem);
    }
    
    .footer-taller{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 5;     
        order: 1;                         
    }
    
    .footer-taller h2{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    
    .footer-taller h3{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    
    .footer-taller h4{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    
    .footer-taller h5{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;
    }

    .footer-sale{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 8;     
        order: 3;                         
    }
    
    .footer-sale h2{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 6;
    }
    
    .footer-information{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 5;     
        order: 2;  
        padding-left: 7.7rem;                       
    }
    
    .footer-information h2{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    
    .footer-information h3{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    
    .footer-information h4{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    
    .footer-information h5{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    
    .footer-social-networks{
        height: 17rem;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 8;     
        order: 4;                         
    }
    
    .footer-social-networks h2{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 6;
    }

    .copyright{
        height: 6vh;
    }

    /******************************** index.html ********************************/

    .container-main-title{
        height: 62rem;
        padding-top: 2rem;
        grid-template-rows: 15rem 44rem; 
        grid-template-columns: repeat(2,38rem);
        grid-template-areas: 
        "title    title"
        "subtitle image";
    }

    .main-title h1{
        color: #7AA7A7;
        font-family: 'Poppins', sans-serif;
        font-size: 3.9rem;
        text-align: center; 
    }

    .main-subtitle h2{
        padding-top: 7rem;
        text-align: center;
    }

    .main-image img{
        width: 37rem;
        height: 44rem;
    }

    .container-images{
        height: 52rem;              
        grid-template-columns: repeat(2,34rem);
        grid-template-rows: repeat(2,25rem);
    }

    .presencial{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        order: 1;                                 
    }

    .presencial p{
        width: 32%;
    }
    
    .online{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        order: 2;                                 
    }

    .online p{
        width: 24%;
    }

    .shop{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
        order: 3;                                 
    }

    .shop p{
        width: 26%;
    }

    .events{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        order: 4;                                 
    }

    .events p{
        width: 28%;
    }

    .container-sponsors{
        gap: 2.5rem; 
    }

    .container-promos{
        grid-template-rows: 5rem 10rem repeat(2, 4.2rem);  
        grid-template-columns: 36rem 33rem;
    }
    
    /****************************** taller.html ******************************/
    
    .taller-title h1{
        font-size: 3.3rem;
        padding-top: 2rem;
    }
    
    .container-main-images{
        height: 23rem;
        justify-content: center;
        padding-left: 1rem;
    }
    
    .container-main-images img{
        width: 20rem;
        height: 20rem;
    }

    .location{
        grid-template-columns: 32rem;
    }

    /****************************** staff.html ******************************/
    
    .container-integrants{
        height: 102rem;
        grid-template-rows: repeat(3,30rem); 
        grid-template-columns: repeat(2,30rem);
        grid-template-areas: 
        "enzo juliana" 
        "magda nicolas"
        "antonella paula";
    }

    /****************************** academia.html ******************************/
    
    .container-courses-in-person{
        height: 76rem;
        grid-template-rows: repeat(2,38rem); 
        grid-template-columns: repeat(2,28rem);
        grid-template-areas: 
        "buttercream macarons"
        "faultline cupcakes";
    }

    .buttercream, .macarons, .faultline, .cupcakes{
        width: 26rem;
    }
    
    .details h3{
        font-size: 2.3rem;
    }

    .details p{
        font-size: 2rem;
    }

    .container-courses-online{
        height: 76rem;
        grid-template-rows: repeat(2,38rem); 
        grid-template-columns: repeat(2,28rem);
        grid-template-areas: 
        "cakedesigner butterfull"
        "bakery icepops";
    }
    
    .cake-designer, .butter-full, .bakery , .icepops{
        width: 26rem;
    }

    /****************************** tienda.html ******************************/

    .tienda-titles h2{
        font-size: 2.6rem;
        padding-left: 6rem;
    }
    

    .container-products-molds{
        height: 76rem;
        grid-template-rows: repeat(2,38rem); 
        grid-template-columns: repeat(2,28rem);
        grid-template-areas: 
        "heartcake picos"
        "platos cucharas";
    }

     .heart-cake, .picos, .platos, .cucharas{
        width: 28rem;
    }
    
    .container-products-courses{
        height: 78rem;
        grid-template-rows: repeat(2,38rem); 
        grid-template-columns: repeat(2,28rem);
        grid-template-areas: 
        "cdesigner bfull"
        "fline macarrons";
    }

    .cdesigner, .bfull, .fline, .macarrons{
        width: 28rem;
        height: 32rem;
    }

    .fline h3{
        font-size: 2.1rem;
    }
}

@media(max-width:767px){
    /* Rango de 425px a 767px */

    /******************************* header *******************************/
    
    .container-header{
        padding-left: 1rem;
    }

    .navbar{
        padding-top: 0.2rem;
    }

    .header-icons{
        justify-content: center;
        padding-top: 1.6rem;
    }
    
    .navbar li a{
        font-size: 1.7rem;
    }
    
    /******************************* footer *******************************/

    .container-newsletter{
        height: 20rem;
        grid-template-columns: 40rem;
        grid-template-rows: 7rem 6rem 7rem;
        grid-template-areas: 
        "recibi"
        "suscribite"
        "form"; 
    }
    
    .container-newsletter p{
        font-size: 1.9rem;
    }
    
    .container-newsletter h2{
        font-size: 2.5rem;
    }
    
    .container-newsletter h3{
        font-size: 1.6rem;
        text-align: left;
        padding-left: 1.1rem;
    }
    
    .container-information{
        height: 54rem;
        grid-template-columns: 40rem;
        grid-template-rows: 5rem repeat(3, 3rem) 5rem repeat(3, 3rem) 5rem 3rem repeat(2, 5rem) repeat(2, 3rem);
    }

    .footer-taller h2{
        text-align: center;
    }
    
    .footer-taller h3{
        text-align: center;
    }
    
    .footer-taller h4{
        text-align: center;
    }
    
    .footer-taller h5{
        text-align: center;
    }
    
    .footer-information{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 9;     
        order: 2;  
        padding-left: 0.1rem;                       
    }
    
    .footer-information h2{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 6;
        text-align: center;
    }
    
    .footer-information h3{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 6;
        grid-row-end: 7;
        text-align: center;
    }
    
    .footer-information h4{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 7;
        grid-row-end: 8;
        text-align: center;
    }
    
    .footer-information h5{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 8;
        grid-row-end: 9;
        text-align: center;
    }
    
    .footer-sale{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 9;
        grid-row-end: 12;     
        order: 3;                         
    }

    .footer-sale-contact li a{
        padding-left: 10.5rem; 
    }
    
    .footer-sale h2{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 9;
        grid-row-end: 10;
        text-align: center;
    }
    
    .footer-social-networks{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 12;
        grid-row-end: 15;     
        order: 4;     
    }
    
    .footer-social-networks h2{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 12;
        grid-row-end: 13;
    }
    
    .copyright p{
        font-size: 2rem;
    }

    /******************************* index.html *******************************/

    .container-main-title{
        height: 90rem;
        grid-template-rows: 20rem 44rem 24rem; 
        grid-template-columns: 37rem;
        grid-template-areas: 
        "title"
        "image"
        "subtitle";
    }
    
    .main-title h1{
        font-size: 3.6rem;
    }
    
    .main-subtitle h2{
        padding-top: 1rem;
    }
    
    .container-images{
        height: 115rem;                             
        grid-template-columns: 28rem;
        grid-template-rows: repeat(4,29rem);
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
    
    .presencial{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        order: 1;                                 
    }
    
    .presencial p{
        width: 38%;
    }
    
    .online{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
        order: 2;                                   
    }
    
    .online p{
        width: 30%;
    }
    
    .shop{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
        order: 3;                                                        
    }
    
    .shop p{
        width: 31%;
    }

        
    .events{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;
        order: 4;                                                                
    }
    
    .events p{
        width: 36%;
    }

    .container-sponsors {
        height: 24rem;
        display: grid;
        grid-template-columns: repeat(2,15rem);
        grid-template-rows: repeat(2,5rem) 8rem;
        padding-right: 0.1rem;  
    }

    .callebaut{
        padding-left: 8.6rem;
    }

    .container-promos{
        height: 30rem;
        grid-template-rows: 4rem 10rem repeat(2,4rem); 
        grid-template-columns: 20rem 20rem;
    }
    
    .text-promo p{
        font-size: 2.8rem;
        
    }
    
    .text-promo h2{
        font-size: 8rem;
    }
    
    .text-promo h3{
        font-size: 1.6rem;
    }
    
    .text-promo a{
        font-size: 2rem;
    }
    
    .image-promo{
        height: 5rem;
    }
    
    /****************************** taller.html ******************************/
    
    .taller-title h1{
        font-size: 3.2rem;
        padding-left: 4rem;
    }
    
    .container-main-images{
        height: 104rem;
        background-color: #FCEFE4;
        display: grid;
        grid-template-columns: 30rem;
        grid-template-rows: repeat(3,34rem);
    }

    .container-main-images img{
        width: 30rem;
        height: 32rem;
    }

    .container-dir{
        display: grid;
        justify-content: center;
        padding-left: 2rem; 
    }
    
    .container-maps{
        height: 58rem;
        display: grid;
        justify-content: center;
        grid-template-columns: 32rem;
        grid-template-rows: 34.5rem repeat(5,5rem);
        grid-template-areas: 
        "map"
        "location"
        "location"
        "location"
        "location"
        "location";
        padding-left: 4rem;
        padding-top: 2rem;
    }

    .location{
        grid-template-columns: 32rem;
    }

    /****************************** staff.html ******************************/
    
    .staff-title h1{
        font-size: 3rem;
        padding-left: 3.5rem;
    }
    
    .container-integrants{
        height: 200rem;
        grid-template-rows: repeat(6,30rem); 
        grid-template-columns: 30rem;
        grid-template-areas: 
        "enzo" 
        "juliana" 
        "magda"
        "nicolas"
        "antonella"
        "paula";
    }

    /****************************** academia.html ******************************/

    .academia-titles{
        height: 4rem;
    }
    
    .academia-titles h2{
        font-size: 1.6rem;
        padding-left: 1.3rem;
        padding-top: 1.2rem;
    }
    
    .container-courses-in-person{
        height: 155rem;
        grid-template-rows: repeat(4,38rem); 
        grid-template-columns: 28rem;
        grid-template-areas: 
        "buttercream" 
        "macarons"
        "faultline" 
        "cupcakes";
    }
    
    .container-courses-online{
        background-color: #FCEFE4;
        height: 137rem;
        grid-template-rows: repeat(4,34rem); 
        grid-template-columns: 28rem;
        grid-template-areas: 
        "cakedesigner"
        "butterfull"
        "bakery" 
        "icepops";
    }

    /****************************** tienda.html ******************************/

    .tienda-titles{
        height: 8rem;
    }
    
    .tienda-titles h2{
        font-size: 2.4rem;
        padding-left: 1.4rem;
        padding-top: 1.4rem; 
    }
    
    .container-products-molds{
        height: 143rem;
        grid-template-rows: repeat(4,36rem); 
        grid-template-columns: 28rem;
        grid-template-areas: 
        "heartcake" 
        "picos"
        "platos" 
        "cucharas";
        padding-top: 0.1rem;
    }
    
    .container-products-courses{
        height: 146rem;
        grid-template-rows: repeat(4,36rem); 
        grid-template-columns: 28rem;
        grid-template-areas: 
        "cdesigner" 
        "bfull"
        "fline" 
        "macarrons";
    }
}

@media(max-width:424px){
    /* Rango de 375px a 424px */

    /****************************** header ******************************/
    
    .navbar{
        display: grid;
        grid-template-columns: repeat(2,10rem) 8rem;
        grid-template-rows: repeat(2,2rem);
    }

    .header-icons{
        justify-content: center;
        padding-left: 2rem;
    }

    /****************************** footer ******************************/

    .container-newsletter{
        height: 25rem;
        grid-template-columns: 35rem;
        grid-template-rows: 7rem 9rem 7rem;
    }

    .container-information{
        grid-template-columns: 30rem;
    }
    
    .footer-sale-contact li a{
        padding-left: 4.5rem; 
    }

    /****************************** index.html ******************************/
    
    .container-promos{
        grid-template-columns: repeat(2, 17.5rem);
    }
    
    /****************************** taller.html ******************************/

    .taller-title h1{
        font-size: 3.2rem;
    }

    /****************************** taller.html ******************************/

    .tienda-titles h2{
        font-size: 2.2rem;
    }
}

@media(max-width:374px){
    /* Rango de 320px a 374px */

    /****************************** footer ******************************/
    .container-newsletter{
        height: 28rem;
        grid-template-columns: 30rem;
        grid-template-rows: 7rem 9rem 7rem;
    }
    
    /****************************** index.html ******************************/
    .container-main-title{
        height: 107rem;
        grid-template-rows: 30rem 30rem 24rem; 
        grid-template-columns: 20rem;
    }

    .main-image img{
        width: 20rem;
        height: 30rem;
        padding-left: 0.1rem;
    }

    .container-sponsors{
        display: grid;
        grid-template-columns: repeat(2, 14rem);
        padding-left: 0.01rem;
    }
    
    .container-promos{
        grid-template-columns: repeat(2, 15rem);
    }

    .image-promo img{
        width: 13rem;
        height: 20rem;
    }

    /****************************** taller.html ******************************/

    .taller-title h1{
        font-size: 3rem;
        padding-left: 1.8rem;
    }

    .container-dir{
        padding-left: 1.5rem; 
    }

    .container-maps{
        grid-template-columns: 30rem;
        padding-left: 0.2rem;
    }

    .map iframe{
        width: 29rem; 
        height: 32rem;
    }

    .location{
        grid-template-columns: 30rem;
    }

    /****************************** academia.html ******************************/

    .academia-titles{
        height: 6rem;
    }
    
    .academia-titles h2{
        font-size: 2rem;
        padding-left: 2rem;
        padding-top: 1.6rem;
    }

    /****************************** tienda.html ******************************/

    .tienda-titles{
        height: 10rem;
    }

    .tienda-titles h2{
        font-size: 2rem;
    }
}