/* ---- RESETEO: SELECTOR UNIVERSAL */

* {
    padding:0 ; margin: 0;border: 0;
    box-sizing: border-box;
}

head {
    display: none;
}

body {
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    margin: 0%;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
}

/* TITULOS COLOR TIPOGRAFIA Y COLOR DE LA MISMA */

h1, h2, h3, h4 { 
    padding: auto;
    margin: 1em;
    display: block;
    font-family: Arial, sans-serif;
    color: #000000;
    border-radius: .2em;
} 

.p {
    color: #ffffff;
}

/* -----------------SUBRAYADO DE LOS TITULOS----------------------- */

h1, h2 {border-block-end:4px solid #6ca76e;}
            
div {display:block}
nav{display: block;}
li{margin: 1em;}


header {    width: 100%;
            margin:0%;
            padding: .2em;
            justify-content: space-between;
            align-items: center;
            box-sizing:border-box ;
            background-color: #1e8026;
            box-shadow: 0 3px 22px rgb(87, 90, 89);}

         header, .contenedora { display: flex;
                                justify-content: space-between;
                                align-items: center;}          
                        
.contenedora {width: min(100%, 75rem)
                }            
          
/* ------------PARTE UNO ES LA CLASS DEL HEADER------------- */ 
header , .contenedora {display: flex;
                   
                    flex-wrap: wrap;
                    
                    justify-content: space-between;
                    align-items: center;}
/* --------------------------------LOGO DGPC------------------------ */




.menulinks {background: #9dcc9e;}
/* ESTO ES LA FORMA DEL BOTON Y EL COLOR */

.menulinks ,.btn.linea { width: 1.5em;
    height: 3px;
    margin-block: 0.25em;
    background: rgb(255, 255, 255);
    transition: all 0.3s ease-out;} 

.fondoboton{background-color: #74a6a8;}

.menulinks  .fondoboton {border-radius:50%;
                         padding: 0.75rem;
                         width: 3rem;
                         height: 3rem;
                         cursor: pointer; }




  

@media (min-width: 30em){ 

    .menulinks {display: none;}
    header nav , header nav ul {display:contents};

    header nav ul li:first-of-type {margin-inline-start: auto;}

    header nav ul li:nth-of-type(-n + 2) {order: -1;}

    header nav ul li:last-of-type{margin-inline-end: auto;}

    header , .contenedora {gap: .5em;}

    .article img {gap: 5em;
                 width: 10em;
                 float: 10em;
                margin-inline-end: 1em;}

 }

 @media (min-width: 40em){

 }




.accesosrapidos {display:flex;
    margin: auto;
                 align-items: center;}



.sinpuntos{ list-style: none;}



header {gap: .5em;}

@media (min-width: 40em){



            

header nav a {   color: white;
                 background-color: aqua;
                 display: block;
                 width: 5em;
                 margin: .25em;
                 padding-block: .25em;
                 text-align: center;
                 border-radius: .25em;}

header nav a:hover {
                        background-color: rgb(242, 250, 253);
                        color: rgb(103, 189, 129);
}
}

/* --------HASTA ACA ES LO DEL HEADER--------------- */


/* ---------------NOMBRES PROPIOS DEL GRUPO--------------------- */
.dalmiro {  color: #ffffff;   
            border-block-end:none;
            margin: 2em;
            font-size: 2em;}


        
/* -----------ESTE ES EL PRIMER TITULO---------- */
.titulodistinto {text-align: center;
                 border-block-end: 4px solid #6ca76e;}








     /* ESTOS SON LA CLASS DE WEBAPP MAPA Y PLAN */           
.menu{
             text-align: center;
             text-decoration: none;
             color: rgb(255, 255, 255);
             background-color: #80a192;
             padding: 1em;
             width: 10em;
             height: auto;
             margin: auto;
             display: flex;
             font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            
             box-shadow: 0px 0px 2px 0px rgb(0, 0, 0);
             
            }
   
.mapa {
    display: flex;
}

.mapa img {
    width: 100%;
    margin: auto;
}


      /* -------------------SECCION DE CADA UNO---------------- */
article{display: block;
        background-color: #5b905f;
        border-radius: .5em;
        border: solid #40b06d ;
        box-shadow: 2px 6px 10px 0px rgb(90, 90, 90);
        align-items: center;}

.vm04{      text-decoration: none;
            padding: 1em;
            width: 7em;
            color: rgb(255, 255, 255);
            margin: .1em;
           display: block;
           background-color: rgb(121, 198, 123);
           border-radius: .2em;
           box-shadow:1px 3px 2px rgb(87, 87, 87);
           margin-block: .9em;
            }

img{       
         margin: .1em;
         padding:.3em;
      
        border-radius: 3em;}




/* ------------MAIN------------- */
main{         
                width: 98%;
                padding: .5em;
                margin: 1em;
                box-sizing: border-box;
                flex-grow: 2;
                align-items: center;
               }


p{              width: 98%;
                margin: 1em;
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
                                color: #000000;
                box-sizing: border-box;}

.fotogrupal{display: block;
            border-radius: 1em;
            width: 20%;
            height: auto;
           }

.grupo {align-items: center;
        margin: 1em;
        padding: 3em;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        
   }

   .grupo img{
    max-width: 15em;
    
}
              
footer{background-color: #1e8026;
       width: 100%;
        margin: 0em;
        padding: .2em;
        display: block;
        box-sizing:border-box ;
        background-color: #4c8851;
        box-shadow: 0 3px 3px rgb(128, 128, 122);
         }
    .footer {font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}