h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
    color: #557B83;
    font-family: 'Roboto', sans-serif;
    font-weight: bold; 
  }




/* color de botones .menu1,.menu2,.menu3,.menu4,.menu5 con  gradiente */
.menu1,.menu2,.menu3,.menu4,.menu5 {
    background-image: linear-gradient(#E5EFC1, #557B83);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-style: black 3px double;
    font-family: 'Roboto', sans-serif;
}
/* cambio de botones cuando esta sobre ellos*/
.menu1:hover,.menu2:hover,.menu3:hover,.menu4:hover,.menu5:hover {
    background-image: linear-gradient(#557B83, #E5EFC1);
}
.art1 {grid-area: a1;}
.art2 {grid-area: a2;
        text-align: center;}
.art3 {grid-area: a3;}
.art4 {grid-area: a4;}

.vid1 {grid-area: v1;
       width: fr;}
.vid2 {grid-area: v2;
       width: fr;}
.nada {grid-area: nd;
      background-color:  #557B83;}

.art1,.art2,.art3,.art4,.vid1,.vid2,.titu3{
    border: 4px solid #39AEA9;
    background-color: #A2D5AB;
    padding: 10px;
    border-top-left-radius: 17px;
    font-family: 'Roboto', sans-serif;
}
.foo1 {grid-area: c1;}
.foo2 {grid-area: c2;}
.foo3 {grid-area: c3;}
.foo4 {grid-area: c4;}
.foo5 {grid-area: c5;}
.foo6 {grid-area: c6;}

.menu, article,.concur,footer,.parc,.columna,.form{
    display: grid;
    width: 90%;
    max-width: 1000px;
    margin: auto;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    grid-gap: 10px;
    background-color: #A2D5AB;
    padding: 10px;    
}

/* elementos del menu inicial en todas las paguinas*/
.foto1 {grid-area: f1;
    height: 260px;}
.titu1 {grid-area: t1;}
.titu2 {grid-area: t2;}
.titu3 {grid-area: t3;}
.menu1 {grid-area: m1;}
.menu2 {grid-area: m2;}
.menu3 {grid-area: m3;}
.menu4 {grid-area: m4;}
.menu5 {grid-area: m5;}

.menu {
    border: 4px solid #39AEA9;
    grid-template-columns: repeat(6, 1fr);                      /* es grilla */
    grid-template-areas:
        'f1 f1 f1 t1 t1 t1'
        'f1 f1 f1 t2 t2 t2'
        'f1 f1 f1 co co co'
        'nd m1 m2 m3 m4 m5';
}
article {
    grid-template-columns: repeat(4, 1fr);                      /* es grilla */
    border: 4px solid #557B83;
    grid-template-areas:
        'a1 a1 nd nd '
        'a2 a2 v1 v1 '
        'a2 a2 v1 v1';
    background-color: #557B83;
}
.concur {
    grid-template-columns: repeat(4, 1fr);                      /* es grilla */
    border: 4px solid #557B83;
    background-color: #557B83;
    grid-template-areas:
        'a1 a1 nd nd '
        'a2 a2 a2 a2 '
        'a2 a2 a2 a2';
}
footer {
    grid-template-columns: repeat(3, 1fr);                      /*  para todos los medios es igual*/
    border: 4px solid #39AEA9;
    margin: auto;
    grid-template-areas:
        'c1 c1 c1'
        'c2 c3 c4'
        'c5 c5 c5';
    background-color: #A2D5AB;
    justify-content:space-around;
    border-top-left-radius: 17px;
    max-width:400px;
}
.parc {
    grid-template-columns: repeat(4, 1fr);                      /* es grilla */
    border: 4px solid #557B83;
    text-align: center;
    
    grid-template-areas:
        'nd t3 t3 co'
        'v2 v2 a1 a1'
        'a4 a4 a4 a4'
        'a2 a2 v1 v1'
        'a2 a2 v1 v1'
        'a3 a3 a3 a3';
    background-color: #557B83;
    
}
.columna {
    grid-template-columns: repeat(4, 1fr);                      /* es grilla */
    border: 4px solid #557B83;
    grid-template-areas:
        'nd a1 a1 a2'
        'nd a1 a1 a2';
    background-color: #557B83;
}
.form {
    grid-template-columns: repeat(3, 1fr);                      /* es grilla */
    border: 4px solid #39AEA9;
    grid-template-areas:
        'c1 c1 c1'
        'c2 c3 c4'
        'c5 c5 c5'
        'na c6 co';
    background-color: #A2D5AB;
    border-top-left-radius: 17px;
    max-width: 800px;
}



/* DISPOSITIVO INTERMEDIO -------------------------------------------------------------------------*/

@media only screen and (max-width: 800px) {
    .carousel-item {
        height: 50vh;}
    h1 {
        font-size: 2em; 
        }
    
    /* For mobile phones: */
    .cabeza,article,.footer,.form,.parc,.concur.form {
        grid-gap: 8px;
        padding: 8px;
        display: grid;
        font-size: 15px;
        line-height: 20px;
        margin: auto;
    }
    .concur {
        grid-template-columns: repeat(2, 1fr);                      /* es grilla */
        grid-template-areas:
            'a1 a1  '
            'a2 a2  '
            'a2 a2 ';
    }
    .menu {
        grid-template-columns: repeat(4, 1fr);                      /* es grilla */
        width: 97%;
        max-width: 600px;
        text-align: center;
        grid-template-areas:
            't1 t1 t1 t2'
            'f1 f1 f1 f1'
            'f1 f1 f1 f1'
            'm1 m1 m2 m2'
            'm3 m4 m4 m5';
    }
    .foto1{
        height: 200px;
    }
    article{
        grid-template-columns: repeat(2, 1fr);                      /* es grilla */
        width: 97%;
        max-width: 600px;
        text-align: center;
        grid-template-areas:
            'a1 a1  '
            'a2 a2  '
            'a2 a2 '
            'v1 v1'
            'v1 v1';
        background-color: #557B83;
    }
    
    
    .parc {
        grid-template-columns: repeat(2, 1fr);                      /* es grilla */
        width: 90%;
        max-width: 600px;
        border: 4px solid #557B83;
        text-align: center;
        grid-template-areas:
                't3 t3'
                'a1 a1 '
                'v2 v2 '
                'a4 a4'
                'a2 a2 '
                'v1 v1 '
                'a3 a3 ';
        background-color: #557B83;
    }
    .form {
            grid-template-columns: repeat(2, 1fr);                      /* es grilla */
            border: 4px solid #39AEA9;
            text-align: right;
            grid-template-areas:
                'c1 c1'
                'c2 c3'
                'c4 c5'
                'c6 c6';
            background-color: #A2D5AB;
            border-top-left-radius: 17px;
            max-width: 600px;
        }
    .columna {
        grid-template-columns: repeat(2, 1fr);                      /* es grilla */
        border: 4px solid #557B83;
        grid-template-areas:
            'a1 a1 ';
        background-color: #557B83;
  }
}
/* para dispositivos pequeños---------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
    .carousel-item {
        height: 30vh;}
    h1 {
        font-size: 1.5em; 
        }
    /* For mobile phones: */
    .cabeza,article,.footer,.form,.parc,.concur.form {
        grid-gap: 5px;
        padding: 5px;
        display: grid;
        font-size: 15px;
        line-height: 15px;
        margin: auto;
    }
    .concur {
        grid-template-columns: repeat(2, 1fr);                      /* es grilla */
        grid-template-areas:
            'a1 a1  '
            'a2 a2  '
            'a2 a2 ';
    }
    .menu {
        grid-template-columns: repeat(4, 1fr);                      /* es grilla */
        width: 97%;
        max-width: 480px;
        text-align: center;
        grid-template-areas:
            't1 t1 t1 t1'
            't2 t2 t2 t2'
            'f1 f1 f1 f1'
            'f1 f1 f1 f1'
            'm1 m1 m2 m2'
            'm3 m4 m4 m5';
    }
    .foto1{
        height: 200px;
    }
    article{
        grid-template-columns: repeat(2, 1fr);                      /* es grilla */
        width: 97%;
        max-width: 480px;
        text-align: center;
        grid-template-areas:
            'a1 a1  '
            'a2 a2  '
            'a2 a2 '
            'v1 v1'
            'v1 v1';
        background-color: #557B83;
    }
    
    
    .parc {
        grid-template-columns: repeat(2, 1fr);                      /* es grilla */
        width: 90%;
        max-width: 480px;
        border: 2px solid #557B83;
        text-align: center;
        grid-template-areas:
                't3 t3'
                'a1 a1 '
                'v2 v2 '
                'a4 a4'
                'a2 a2 '
                'v1 v1 '
                'a3 a3 ';
        background-color: #557B83;
    }
    .form {
            grid-template-columns: repeat(2, 1fr);                      /* es grilla */
            border: 2px solid #39AEA9;
            text-align: right;
            grid-template-areas:
                'c1 c1'
                'c2 c2'
                'c3 c3'
                'c4 c4'
                'c5 c5'
                'c6 c6';
            background-color: #A2D5AB;
            border-top-left-radius: 17px;
            max-width: 480px;
        }
    .columna {
        grid-template-columns: repeat(2, 1fr);                      /* es grilla */
        border: 2px solid #557B83;
        grid-template-areas:
            'a1 a1 ';
        background-color: #557B83;
  }
}