*{

     margin:0;
     padding:0;
}
body{

    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(221, 221, 223);
}
/*   hedader y menú--------------------------------------*/

header{

    width:100%;
    background-color: rgb(221, 221, 223);
}
.whatssap{

    width:5%;
    height:40%;
    float: right;
    margin-right: 20px;
    
}


#btn-menu{

    display: none;
}

header label{

    display:none;
    padding: 10px;
    width: 30px;
    border-right: 1px solid #fff;
}

header label:hover{

      background-color: rgba(0,0,0,0.3);
}

.nemu{

     border-bottom:1px solid #fff; 
}

.menu ul{

    margin:0;
    padding: 0;
    list-style: none;
    display: flex;
    border-bottom:1px solid #fff; 

}
.menu li a{

     text-decoration: none;
     display:block;
     margin-top:5px;
    
     color:black;
     text-align: center;
    
}
.menu li{

    border-right: 1px solid white;
    width: 100px;
    height:30px;
    
   
}

.menu li:hover{

    background-color: rgb(93, 131, 243, 0.3);
}

.titulo{

     width:100%;
     height: 100px;
     border-bottom: 1px solid white;
     color:rgb(82, 82, 128);
     font-size:2vw;
     text-align: center;
     
}

.titulo h1{

   padding-top: 20px;

   
    
   }
/*    portada ---------------------------------------*/

   .portada{

        width: 90%;
        height: 380px;
        border-bottom:1px solid #fff; 
        
        
     
   }

   .portada img{

        width: 90%;
        height: 350px;
   }

   

    .fotoPortada{

         width: 80%;
         height: 260px;
        
         margin-top:20px;
         margin-left: 230px;
         
    }
   .prevencion{

     color:white;
     font-size:3vw;
     opacity:0.7;
     position: absolute;
    

     top:25%;
     left:70%;
     
   }



/* pie de la página   ----------------------------------------------- */
   .wrapper-footer{

      width:100%;
      height:120px;
      background-color:  rgb(221, 221, 223);
      display: flex;
      justify-content: space-between;
      font-family: Arial, Helvetica, sans-serif;
         
   }

   .pieContactoI li{

        font-size:20px;
        list-style: none;
        text-align: center;
        margin-left: 5px;
       
   }

   .pieContactoD li{

    font-size:20px;
    list-style: none;
    text-align: center;
   
}

   .pieContactoD a {

       text-decoration: none;
       font-family: Arial, Helvetica, sans-serif;
       color: black;
   }

   .pieContactoI a {

    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}

.pieContactoI a:hover {

    background-color:rgb(93, 131, 243, 0.3);
}

   .wrapper-footer ul {

       padding-top:30px;
       margin-right: 30px;
}

/* pie de la página ------------------------------------------- */

/*-------Media-----------------------------------*/

@media(max-width:500px){

    header label{

        display:block;
    }

     .menu{

        position: absolute;
        background-color:rgb(149, 149, 167); 
        width:20%;
        margin-left: -70%;
     }

     .menu ul{

        flex-direction: column;
       
     }
     
     .menu ul li{

         border-top: 1px solid white;
     }

     #btn-menu:checked ~ .menu{

        margin:0;


     }
     
     
     


     


}





/* Media  Fin     -------------------------------------------------------*/


/*  responsive  1920 x 1080 ------------------------*/


@media(min-width:1920px){


  .titulo{

     
      height:120px;
  }

  .titulo h1{

      margin-top: 10px;
  }

  .menu li{

         width: 150px;
         height: 40px;
  }

  .menu li a{

     font-size: 20px;
     margin-top: 8px;
  }

  .portada{

      margin-top: 70px;
      height: 620px;
      margin-left: 60px;
  }

  .fotoPortada img{

       height: 580px;
       
      
       
  }


  .prevencion{

   
    font-size:35px;
    
   

    top:25%;
    left:70%;
    
  }

  .wrapper-footer{

      
      margin-top: 40px;

  } 

  .pieContactoI li{

    font-size:30px;
    margin-left: 20px;
   
}

.pieContactoD li{

    font-size:30px;
    margin-right: 50px;
   
    
   
}


}

@media(max-width:1920px){

    
}

/*   responsive 500 X  640   -----------------------*/

@media(max-width:500px){

      .titulo{

            height: 60px;
      }

      .titulo h1{

           font-size: 30px;
    
            margin-left:10px;
      }

     

      .portada{

        width: 100%;
        height:350px;
        
        background-color: rgb(255, 251, 251);
        
     
   }

   .portada img{

        width:99%;
        height:330px;
        margin-top: 10px;
        margin-left:2px;
   }

   

    .fotoPortada{

         width:100%;
         height:340px;
         background-color: rgb(255, 251, 251);
         margin-left: 0px;
        
        
    }

    .prevencion{

        
        font-size:12px;
   
        top:30%;
        left:60%;
        
      }

      .pieContactoI li{

        font-size:11px;
        
        
       
   }

   .pieContactoD li{

    font-size:11px;
    
   
}

.pieContactoI{

       margin-top: 20px;
       margin-left: 5px;
}

.pieContactoD{

    margin-top: 20px;
    margin-right: 1px;
}






}

@media (min-width:501px){


      .fotoPortada{

         margin-left: auto;
         
        
      }

}