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

body {
  background-color:rgb(112, 152,247);
  /*background-image: url("mi-imagen.jpg") */
  height: 100vh;
  text-align: center;

}

.contenedor {
  
  background-color:rgb(112, 152,247);
  display: grid;
  grid-template-columns: 26%  auto  26%;
  grid-template-rows: 5vh 28vh 28vh 28vh 5vh;
  justify-items:center;
  text-align: center;
  width: 100%;
}

.cabeza {
align-self: center;
  background-color: transparent;
  color: #b92e45;
  font-size: 2vh;
  font-weight: normal;
  grid-column: 1/6;
  grid-row: 1/2;
  margin: 0 auto;
  text-align: center;
}


.cfoto1 {
  align-self: center;
  
  background-color: transparent;
  grid-column: 1/2;
  grid-row: 2/3;
 
}


.cfoto2 {
  align-self: center;
 
  background-color: transparent;
  grid-column: 1/2;
  grid-row: 3/4;
  
}



.cfoto3 {
  align-self: center;
  background-color: transparent;
  grid-column: 1/2;
  grid-row: 4/5;
  
}

.cfoto4 {
  align-self: center;
  
  background-color: transparent;
  grid-column: 3/4;
  grid-row: 2/3;
  
}


.cfoto5 {
  align-self: center;
  
  background-color: transparent;
  grid-column: 3/4;
  grid-row: 3/4;
  
}

.cfoto6 {
  align-self: center;
  
  background-color: transparent;
  grid-column: 3/4;
  grid-row: 4/5;
 
}

.foto img {
  border-radius: 8px;
  height: auto;
  margin: 0px 0px 0px 0px;
  object-fit: contain;
  width: 80%;


}

#textofoto1,  #textofoto2, #textofoto3, #textofoto4, #textofoto5, #textofoto6{
  
  font-size: 1.0vh;
  margin: auto;

  max-width: 50%;
}




.malla img {
  border-radius:4px;
  height: 25px;
  margin: 0px 0px 0px 0px;
  object-fit: contain;
  width: 160px;
  
 
}


.malla {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-column: 2/3;
  grid-row: 2/5;
  justify-content:space-around;

}





.item {
  background-color: transparent;
  height: 30px;
  margin: 0px 2px 0px 2px;
  padding: 0px;
  text-align: center;
  width: 165px;
}

.item:hover {
  -moz-transform: scale(1.2) translate(4px, 1px) skew(-14deg, 0deg);
-webkit-transform: scale(1.2) translate(4px, 1px) skew(-14deg, 0deg);
-o-transform: scale(1.2) translate(4px, 1px) skew(-14deg, 0deg);
-ms-transform: scale(1.2) translate(4px, 1px) skew(-14deg, 0deg);
transform: scale(1.2) translate(4px, 1px) skew(-14deg, 0deg);
}


.pie {
align-self: center;
  background-color: transparent;
  color: #b92e45;
  font-size: 2vh;
  font-weight: normal;
  grid-column: 1/6;
  grid-row: 5/6;
  margin: 0 auto;
  text-align: center;
width: 100%;

}



@media screen and (max-width: 700px) {
 
  .contenedor {
    grid-template-columns: 0%  auto  0%;

  }

 


  .malla {
    max-width: 65%;
  }

 
  .pie {
  align-self: center;
    background-color: transparent;
    font-size: 0vh;
    font-weight: normal;
    grid-column: 1/6;
    grid-row: 5/6;
    margin: 0 auto;
    text-align: center;
} 

} 


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

  .pie {
    align-self: center;
    background-color: transparent;
    font-size: 0vh;
    font-weight: normal;
    grid-column: 1/6;
    grid-row: 5/6;
    margin: 0 auto;
    text-align: center;
  }



}

@media screen and (max-height: 700px) {

  .pie {
    align-self: center;
    background-color: transparent;
    font-size: 0vh;
    font-weight: normal;
    grid-column: 1/6;
    grid-row: 5/6;
    margin: 0 auto;
    text-align: center;
  }

}

@media screen and (min-width: 1200px) {

  .contenedor {

    grid-template-columns: auto 700px auto;
  }

  .foto img {
    border-radius: 8px;
    height: auto;
    margin: 0px 0px 0px 0px;
    object-fit: contain;
    width: 50%;

  }
}
  
@media screen and (max-width: 800px) {

  #textofoto1,  #textofoto2, #textofoto3, #textofoto4, #textofoto5, #textofoto6{
  
    font-size: 0vh;
 
  }
  
  .contenedor {
  
    background-color:rgb(112, 152,247);
    display: grid;
    grid-template-columns: 0%  auto  0%;
    grid-template-rows: 5vh 28vh 28vh 28vh 5vh;
    justify-items:center;
    text-align: center;
    width: 100%;
  }


.malla {
  
max-width: 100%;
}



}