body {
 background-color: rgb(0, 0, 0);
}

.logos {
    background-color: black;
    height: 10%;
    width: 101%;
    margin-left: -1%;
}

.BannerInicio {
    height: 10%;
    width: 100%;
    background-color:grey;
}

h1 {
    color: white;
}

h3 {
    color: white;
}


.logos img {

    height: 64px;
    width: 64px;

}

.logos h3 {

    color: white;
    display: inline-block;
    margin-left: 10%;
    margin-bottom: 3px;

}

#iniciosesion {
    margin-left: 40%;
}
.fondo {  
    
margin-left: -1%;
height: 30vmax;
width: 101%;
overflow: hidden;

}

.fotografías {
    
   
    position: relative;
    display: inline-block;
    margin-top: 3%;
    margin-left: 2%;
    width: 20%;
    height: 20%;
    border-radius: 5%;  
    }
.fotografías h2 {
    position: absolute;
    text-align: center;
    top:42%;
    width: 100%;
    color: white;
}

.fotografías img {
border-radius: 5%; 
width: 100%;
height: 100%;
object-fit: contain;
}

.sombreo {
    position: absolute;
    margin-top: 0%;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    bottom: 0; 
    background-color: rgb(0, 0, 0);  
}

.sombreo:hover {
    opacity: 0;
}

.título h3 {
    position:absolute;
    opacity: 1;
    text-align: center;
    color: white;
    font-size: 120%;
    left: 27%;
    top: 35%;   
}

.descripción p {
    position:absolute;
    top: 55%;
    left:20%;
    font-size: 80%;
    opacity:1;
    color: white;
    font-size: small;
    text-align: center;

}

#foto1 {
   margin-left: 8%;
}

.fotografíasfullscreen img {

    position: absolute;
    top: 7%;
    left: 18%;
    width: 65%;
    opacity: 0;
 
 }

 .contacto {
 
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);

 
 }

 .contacto img { 
    width: 10%;
    object-fit: cover;
    margin-left: 44%;
    margin-top: 5%;
    opacity: 1;
 }

 .contacto h3 {
    position: absolute;
    font-size: 100%;
    Margin-top: 1%;
    margin-left: 18%;
    color: white;
 }

 #p3 {
    left: 3%;
 }


     @media only screen and (max-width: 768px) {

.fotografías {
    margin-top: 8%;
    margin-left: 9%;
     width: 80%;
     height: 80%;
   }
.fotografías img {
 width: 100%;
 height: 100%; 
}

.título h3 {
    left: 30%;
}

.descripción p {
    
    left: 24%;
}

 }