.galery{
  float:left;
  width:78%;
  margin:1%;
  padding-bottom:10vw;
  font-family: 'Roboto';
}
h1{
  font-size:3vw;
  text-transform: uppercase;
  text-align:center;
  margin:2vw;
}
.galery-img {
  width:33%;
  height:25%;
  border:2px solid black;
  border-radius:0;
  margin:0;
  cursor:pointer;
  transition: 0.3s;
}
.images{width:100%;}
  
.galery-img:hover {opacity: 0.8;}
  
.modal {
  display:none; 
  position:fixed; 
  z-index:1;
  left:0;
  top:0;
  width:100%; 
  height:100%; 
  background-color: rgba(0, 0, 0, 0.7); 
}

/* Modal Content (image) */
.modal-content {
  display:block;
  width:70%;
  height:80%;
  border-radius:5px;
  margin:5% auto;
}
  
/* Add Animation */
.modal-content{  
  animation-name: zoom;
  animation-duration: 0.6s;
}
  
@keyframes zoom{
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}
  
/* The Close Button */
.close{
  position:absolute;
  top:1vw;
  right:2vw;
  color:#f1f1f1;
  font-size: 50px;
  font-weight: bold;
}
  
.close:hover, .close:focus {
  color:#bbb;
  text-decoration:none;
  cursor:pointer;
}
#next{
  display:none;
  position:absolute;
  top:40%;
  right:5%;
  background:rgba(66,66,66,0.4);
  font-size:2.4em;
  font-weight:bold;
  border-radius:50%;
  color:white;
  cursor:pointer;
  padding:1vw 1.5vw;
}
#previous{
  display:none;
  position:absolute;
  top:40%;
  left:5%;
  background:rgba(66,66,66,0.4);
  font-size:2.4em;
  font-weight:bold;
  border-radius:50%;
  color:white;
  cursor:pointer;
  padding:1vw 1.5vw;
}
#right-img{
  float:left;
  position:absolute;
  width:30%;
  height:80%;
  top:9%;
  right:0;
}
#left-img{
  float:left;
  position:absolute;
  width:30%;
  height:80%;
  top:9%;
  left:0;
}
  
  
@media screen and (max-width: 1050px){
  .galery-img{
    width:40%;
  }
  .images{
    padding-left:15%;
  }
  .modal-content{
    margin:15% auto;
    height:54%;
  }
}

@media screen and (max-width: 800px){
  .galery{
    margin-top:8vw;
    width:90%;
    margin-left:5%;
  }
  h1{
    font-size:6vw;
  }
  .galery-img{
    width:40%;
    border:2px solid black;
  }
  .modal-content{
    width:90%;
    height:40%;
    margin:35% auto;
    max-width:600px;
    max-height:400px;
  }
}