#maingaleria {max-width: 1000px;  width: 100%; margin: 1vh auto;}  
   .rowgallery {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  .columngallery {
    -ms-flex: 20%; /* IE10 */
    flex: 20%;
    max-width: 20%;
    padding: 0 4px;
  }

  .columngallery img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }


  @media screen and (max-width: 670px) {
    .columngallery {
      -ms-flex: 30%;
      flex: 30%;
      max-width: 30%;
    }
  }
  
   /* @media screen and (max-width: 1000px) {
    .columngallery {
      -ms-flex: 25%;
      flex: 25%;
      max-width: 25%;
    }
  }  */
    
          
          /* The Modal */
          .modal {
            display: none;
            position: fixed;
            z-index: 101;
   
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color:rgba(229, 239, 210, 0.6);
          }
          .modal-content {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            max-width: 500px;
            border: 40px solid rgba(255, 217, 179, 0.8);
          }

          @media screen and (max-width: 700px) {
            .modal-content{
              max-width: 330px;
            }
          } 
          
          /* The Close Button */
          .close {
            color: #4d331e;
            position: absolute;
            top: -35px;
            right: -25px;
            font-size: 35px;
            font-weight: bold;
          }
          
          .close:hover,
          .close:focus {
            color:  #4d3319;
            text-decoration: none;
            cursor: pointer;
            text-shadow: 2px 2px 4px #000000;
          }
          
          .mySlides {
            display: none;
          }
          
          .cursor {
            cursor: pointer;
          }
          
          /* Next & previous buttons */
          .prev,
          .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -50px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-user-select: none;
          }
          
          .next {
            right: 0;
            border-radius: 3px 0 0 3px;
          }
          
          .prev:hover,
          .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
          }
                    
         
          
        .active {opacity: 1;}
          
          img.hover-shadow {
            transition: 0.3s;
          }
          
          .hover-shadow:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          }