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

.plantilla{
    width: 100%;
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-gap:5px;
    grid-template-columns: auto;
    grid-template-rows: 350px 400px 1200px 5350px 1fr 1fr auto;    
    grid-template-areas: "cab"
                        "prox_event"
                        "principal"
                        "boton_prin"
                        "central_inf"
                        "pre_ft"
                        "pie_pag"; 
}

.cab{
    grid-template-columns: 1fr auto;
    grid-template-rows: 230px auto ;
    grid-template-areas: "hd_col1 hd_col2"
                         "mn_prin mn_prin";
} 

.prox_event{
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr ;
    grid-template-areas: "col1_pe col2_pe";
}

.principal{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
                        "cabecera"
                        "eventos"
                        "anos";
}
.eventos{
    display: grid;
    grid-template-columns: 100px, 40px, 30px, 10px;
    grid-template-rows: auto;
    row-gap: 1em;
}

.central_inf{
    grid-template-columns: 1fr 1fr ;
    grid-template-rows: 100%;
    column-gap: 1em;
    grid-template-areas: "inf_izq inf_der";
}

.pie_pag {
    grid-template-columns: 25% 25% 25% auto;
    grid-template-rows: 1fr;
    grid-template-areas: "col1_ft col2_ft col3_ft col4_ft";
}

@media screen and (max-width: 480px){
    
.plantilla{
    width: 100%;
    max-width: 500px;
    margin: auto;
    display: grid;
    grid-gap:5px;
    grid-template-columns: 1fr;
    grid-template-rows: 600px 910px 2100px auto 1fr auto;    
    grid-template-areas: "cab"
                        "prox_event"
                        "principal"
                        "boton_prin"
                        "central_inf"
                        "pre_ft"
                        "pie_pag"; 
    }

.cab{
    grid-template-columns: 1fr;
    grid-template-rows: 150px 300px auto ;
    grid-template-areas: "hd_col1"
                         "hd_col2"
                         "mn_prin";
} 
#hd_col1{
    margin-left: 1em;
    margin-bottom: 5em;
}

#hd_col2{
    margin-left: 3em;
    margin-top: 5em;
}

.mn_prin {
	width:100%;
    height:auto;
    margin: auto;
    font-weight: 600;
    padding-top: 5px;
    color: #fff;
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    background-color: white;
    grid-area: mn_prin;
}

.boton_prin{
    font-size: 1.5rem;
}

.mn_btn{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.principal{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, fr);
    grid-gap:2em;
    grid-template-areas: 
                        "cabecera"
                        "eventos"
                        "anos";
}

#eventos{
    width: 100%;
    height: auto;
    margin: 5px 5px;
    font-size: 0.8em;
}

.eventos{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 1em;
}

#evento{
    display: grid;
    font-size: 1.5em;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr auto;
    grid-template-areas: "grupo"
                         "lugar"
                         "tipoeven"
                         "fecha";
    background-color: floralwhite;
}

.grupo{
    width: 100%;
    height: auto;
    padding-left: 5px;
    color:rgb(0, 0, 0);
    font-weight: 600;
    text-align: left;
    background-color: lightgray;
    grid-area: grupo;
}

.lugar{
    width: 100%;
    height: auto;
    padding-left: 5px;
    color:rgb(55, 0, 0);
    font-weight: 550;
    text-align: left;
    grid-area: lugar;
}

.tipoeven{
    width: 100%;
    height: auto;
    padding-left: 5px;
    text-align: left;
    align-items: center;
    color: rgb(250, 13, 110);
    grid-area: tipoeven;
}

.fecha{
    width: 100%;
    height: auto;
    padding-left: 5px;
    text-align: left;
    align-items: center;
    color: blue;
    grid-area: fecha;
}

.prox_event{
    text-align: center;
    align-items: center;
    justify-content: center;
    grid-template-columns: auto;
    grid-template-rows: 10em 1fr;
    grid-template-areas: "col1_pe"
                         "col2_pe";
}

    .central_inf{
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "inf_izq"
                             "inf_der";
    }


.pie_pag {
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:  "col1_ft"
                          "col2_ft"
                          "col3_ft"
                          "col4_ft";
}


@media (min-width: 420px) {
    breakpoint{
    max-width: 100%;
    display: inline-block;
}
}


@media (min-width: 420px) {
    breakpoint {
        max-width: 48%;
    }
}
@media (min-width: 760px) {
    breakpoint {
        max-width: 44%;
    }
}