@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}

.plantilla{
    width: 95%;
    height: auto;
    margin: auto;
    display: grid;
    grid-gap:8px;
    grid-template-columns: 100%;
    grid-template-rows: 20em 5em auto auto 80em 65em 53em auto;
    grid-template-areas: "cab"
                         "post_head"
                         "principal"
                         "vestidos"
                         "servicios"
                         "musicales"
                         "pre_ft"
                         "pie_pag"; 
}

.cab{
    display: grid;
    grid-template-columns: 50% 20% auto;
    grid-template-rows: 15em auto;
    grid-template-areas: "id_site  id_site  logo"
                         "mn_prin  mn_prin  logo";
} 

.principal{
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: auto;
    grid-template-areas: "col_izq col_central";
}

    .col_central{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 40em auto;
        grid-template-areas: "prin_sup"
                             "prin_inf";
    }

.vestidos{
    display: grid;
    grid-template-columns: 45% 55%; 
    column-gap: 10px;
    grid-template-areas: "vest_izq vest_der";
}

.servicios{
    grid-template-columns: 31%, 31%, 31%;
    grid-template-rows: 2em, auto auto;
    column-gap: 15px;
    grid-template-areas: 
        "tit_rider tit_rider tit_rider"
        "elerid1   elerid2   elerid3"
        "elerid4   elerid5   elerid6";
}

.musicales{
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 3em 27em 30em;
    column-gap: 5px;
    row-gap: 10px;
    grid-template-areas: "cbgrupos     cbgrupos"
                         "imgprin_grup imgprin_grup"
                         "grupos       promogrup";
}

.pie_pag {
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    gap: 10px;
    grid-template-areas: "col1_ft col2_ft col3_ft col4_ft";
}     

@media only screen and (max-width: 480px) {
    .plantilla{
        font-size: 0.8em;
        width: 100%;
        max-width: 500px;
        margin: auto;
        display: grid;
        gap: 1px;
        grid-template-columns: 100%;
        grid-template-rows: 40em 7em 115em 150em 255em 152em 40em auto;
        grid-template-areas: "cab"
                             "post_head"
                             "principal"
                             "vestidos"
                             "servicios"
                             "musicales"
                             "pre_ft"
                             "pie_pag"; 
    }


    .cab{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 10em 15em 5em;
        grid-template-areas:"id_site"
                            "logo"
                            "mn_prin";
    } 
      
        .mn_prin ul{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            flex-wrap: wrap;
        }

    .post_head{
        width:100%;
        height: auto;
        margin-bottom: 1em;
    }

    .principal{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 105em 20em;
        grid-template-areas:"col_central"
                            "col_izq";
    } 
    
    .col_central{
        font-size: 2.0em;
        width: 100%;
        height: 100%;
    }

    .prin_inf{
        display: none;
    }
    .col_izq{
        font-size: 2.5em;
    }
  
    .vestidos{
        grid-template-columns: 100%;
        grid-template-rows: 7em 35em;
        grid-template-areas: "vest_izq"
                             "vest_der";
    }

    .card1{
        height: 1px;
        display: none;
    }

   .card{
    width: auto;
    height: 265px;
   }

    .servicios{
        grid-template-columns: 100%;
        grid-template-rows: 6em 50em 50em 50em 50em 50em;
        grid-template-areas: "tit_rider"
                                "elerid1"
                                "elerid2"
                                "elerid3"
                                "elerid4"
                                "elerid5";
        }

        .tit_rider{
            width: 100%;
            height: 2.5em;
            margin-bottom: 2em;
        }

    .musicales{
        grid-template-columns: 100%;
        grid-template-rows: 6em 310px 70em 50em;
        grid-template-areas: "cbgrupos"
                             "imgprin_grup"
                             "grupos"
                             "promogrup";
        }
        .cbgrupos{
            font-size: 1em;
            width: 100%;
            height: 5em;
        }

        .imgprin_grup{
            width: 100%;
            height: 300px;
        }

        .mn_sec ul{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 20px 20px;
            row-gap: 15px;
            flex-wrap: wrap;
        }

    .pie_pag {
        grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: 
                            "col_ft1"
                            "col_ft2"
                            "col_ft3"
                            "mn_inf";
    }

    .titulo{
        font-size: 1em;
    }

    .tit_rider{
        font-size: 1.5em;
    }
}


@media screen and (max-width: 600px) {
	header .logotipo {
		margin-bottom: 10px;
		font-size: 1px;
	}

	header .contenedor {
		flex-direction: column;
		text-align: center;
	}

    header .idsite{
        font-size: 0.8em;
    }

	.principal {
		font-size: 5px;
	}

	.principal .descripcion {
		max-width: 100%;
	}
}