* {
    box-sizing:        border-box;
}
.grid-container-index {
   display:            grid;
   font-family:        Verdana;
   grid-gap:           0px;
   background-color:  gray;
   padding:            2 px;
   grid-template-areas:
       'logo header header header header header'
       'menu main   main   main   main   main'
       'footer footer footer footer footer footer';
}
.grid-container-page {
   margin:            20;
   display:            grid;
   font-family:        Verdana;
   grid-gap:           5px;
   background-color:   gray;
   padding:            2 px;
   grid-template-areas:
       'logo menu   menu   menu   menu   menu'
       'main main   main   main   main   main'
       'footer footer footer footer footer footer';
}
.menu-horizontal a {
   width:              100%;
   color:              black;  
   text-decoration:    none;
   padding:            1px;             
   border:             0px;
   border-style:       solid; 
   border-color:       red; 
   border-radius:      3px;
   background-color:   gainsboro;
   font-size:          1.5vw;
}
.menu-horizontal a:hover {
   background-color:    yellow;
}
.menu-horizontal a.active {
   background-color:    grey;
   color:               white;
}
.menu-vertical a {
   display:            block;
   width:              100%;
   color:              black;  
   text-decoration:    none;
   padding:            1px;             
   border:             1px;
   border-style:       solid; 
   border-color:       red; 
   border-radius:      3px;
   background-color:   rgb(201, 199, 199);
   font-size:          1.5vw;
}
.menu-vertical a:hover {
   background-color:    yellow;
}
.menu-vertical a.active {
   background-color:    grey;
   color:               white;
}
.item1 { 
   grid-area:          logo;
   background-color:   gainsboro;
   font-size:          2vw;
   color:              black; 
   text-align:         center;
   display:            block;
   padding:            20px;
}
.item2 { 
   grid-area:          header;
   background-color:   grey;
   font-size:          2vw;
   color:              black; 
   text-align:         center;
}
.item3 { 
   grid-area:          menu;
   background-color:   gainsboro;
   font-size:          2vw;
   color:              black;
   text-align:         center;
   padding:            20px;
}
.item4 { 
   grid-area:          main;
   background-color:   gainsboro;
   font-size:          1.5vw;
   color:              black;
   text-align:         center;
   padding:            5px;
   text-decoration:    none;
   border:             5px;
   background-image:   none;
   background-repeat:  no-repeat;
   background-size:    cover;
   background-attachment: fixed;
}
.item5 { 
   grid-area:          footer; 
   background-color:   gainsboro;
   font-size:          1.5vw;
   color:              black;
   text-align:         center;
   padding:            1px;
   margin-top:         4px;  
}
.botonwasp {
   color:              black; 
   text-decoration:    none;
   font-size:          2vw;
   border:             5px;
   border-style:       solid; 
   border-color:       red; 
   border-radius:      10px;
   background-color:   gainsboro; 
}
li {
   color:              blue;      
   list-style:         square;
   text-decoration:    none;
   font:               2vw Verdana;
   display:            inline-block;
   width:              40%;
   padding:            5px 10px;
   background-color:   red;
   border:             5px solid red;
   text-align:         center;
   
}
li:hover {
   background-color:    gray;      
}