@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
  width: 400px;
  height: 400px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.box-galery {
  width: 100%;
  height: 100%;
  grid-gap: 5px;
  position: relative;
  z-index: 1;
}
.box-galery > [type=checkbox] {
  display: none;
}

.box-galery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.box-galery .imgs {
  --zi: calc(400px / 2 - 0px);
  width: var(--zi);
  height: var(--zi);
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.2s;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  background-position: center;
  background-size: cover;
  margin: auto;
  transition-timing-function: linear; 
 }



.box-galery .img1 {
  background-image: url("../imagenes/zeolita.jpg");
}
.box-galery .img2 {
  
  background-image: url("../imagenes/zeolita2.jpg");
  right: 0;
}
.box-galery .img3 {
  background-image: url("../imagenes/zeolita3.jpg");
  left: 0;
  bottom: 0;
}
.box-galery .img4 {
  background-image: url("../imagenes/zeolitamalla300.jpg");
  right: 0;
  bottom: 0;
  
}



.box-galery .img5 {
  background-image: url("../imagenes/roca fosforica 2.jpg");
}
.box-galery .img6 {
  
  background-image: url("../imagenes/roca fosforica 3.jpg");
  right: 0;
}
.box-galery .img7 {
  background-image: url("../imagenes/roca fosforica 6.jpg");
  left: 0;
  bottom: 0;
}
.box-galery .img8 {
  background-image: url("../imagenes/roca fosforica 7.jpg");
  right: 0;
  bottom: 0;
  
}




.box-galery .img9 {
  background-image: url("../imagenes/bentonita.jpeg");
}
.box-galery .img10 {
  
  background-image: url("../imagenes/bentonita2.jpeg");
  right: 0;
}
.box-galery .img11 {
  background-image: url("../imagenes/bentonita3.jpg");
  left: 0;
  bottom: 0;
}
.box-galery .img12 {
  background-image: url("../imagenes/bentonita4.webp");
  right: 0;
  bottom: 0;
  
}



.box-galery .img13 {
  background-image: url("../imagenes/caolin calcinado.jpeg");
}
.box-galery .img14 {
  
  background-image: url("../imagenes/caolincalcinado2.webp");
  right: 0;
}
.box-galery .img15 {
  background-image: url("../imagenes/caolincalcinado3.jpg");
  left: 0;
  bottom: 0;
}
.box-galery .img16 {
  background-image: url("../imagenes/caolincalcinado4.jpg");
  right: 0;
  bottom: 0;
  
}


.box-galery .img17 {
  background-image: url("../imagenes/caolin.jpeg");
}
.box-galery .img18 {
  
  background-image: url("../imagenes/caolin2.jpg");
  right: 0;
}
.box-galery .img19 {
  background-image: url("../imagenes/caolin3.jpg");
  left: 0;
  bottom: 0;
}
.box-galery .img20 {
  background-image: url("../imagenes/caolin4.webp");
  right: 0;
  bottom: 0;
  
}


#btn1:checked ~ .img1 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn2:checked ~ .img2 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn3:checked ~ .img3 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn4:checked ~ .img4 {
  width: 400px;
  height: 400px;
  z-index: 10;
}


#btn5:checked ~ .img5 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn6:checked ~ .img6 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn7:checked ~ .img7 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn8:checked ~ .img8 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn9:checked ~ .img9 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn10:checked ~ .img10 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn11:checked ~ .img11 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn12:checked ~ .img12 {
  width: 400px;
  height: 400px;
  z-index: 10;
}


#btn13:checked ~ .img13 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn14:checked ~ .img14{
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn15:checked ~ .img15 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn16:checked ~ .img16 {
  width: 400px;
  height: 400px;
  z-index: 10;
}


#btn17:checked ~ .img17 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn18:checked ~ .img18{
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn19:checked ~ .img19 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

#btn20:checked ~ .img20 {
  width: 400px;
  height: 400px;
  z-index: 10;
}

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


.frame{
  width: 300px;
  height: 300px;
}
.box-galery .imgs {
  --zi: calc(300px / 2 - 0px);
 }

#btn1:checked ~ .img1 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn2:checked ~ .img2 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn3:checked ~ .img3 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn4:checked ~ .img4 {
  width: 300px;
  height: 300px;
  z-index: 10;
}


#btn5:checked ~ .img5 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn6:checked ~ .img6 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn7:checked ~ .img7 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn8:checked ~ .img8 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn9:checked ~ .img9 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn10:checked ~ .img10 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn11:checked ~ .img11 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn12:checked ~ .img12 {
  width: 300px;
  height: 300px;
  z-index: 10;
}


#btn13:checked ~ .img13 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn14:checked ~ .img14{
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn15:checked ~ .img15 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn16:checked ~ .img16 {
  width: 300px;
  height: 300px;
  z-index: 10;
}


#btn17:checked ~ .img17 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn18:checked ~ .img18{
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn19:checked ~ .img19 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

#btn20:checked ~ .img20 {
  width: 300px;
  height: 300px;
  z-index: 10;
}

}