.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}


/*.filter-image {
  display: none;
}*/

img {
    image-rendering: crisp-edges;
}

#loadMore {
  width: 200px;
  color: #fff;
  display: block;
  text-align: center;
  margin: 20px auto;
  padding: 10px;
  border-radius: 30px;
  border: 2px solid transparent;
  background-color: #620A1A;
  transition: .3s;
}
#loadMore:hover {
  color: #620A1a;
  background-color: #fff;
  border: 2px solid #620A1A;
    border-radius: 30px;
  text-decoration: none;
}
.noContent {
  color: #000 !important;
  background-color: transparent !important;
  pointer-events: none;
}

.lightbox-gallery {
    width: 100%;
}

 .lightbox-gallery div {
     flex-basis: 250px !important;
     width: 250px;
     height: 225px;
     margin: 5px !important;
}

.lightbox-gallery div > img {
    height: 225px !important;
    width: 250px !important;
    object-fit: cover;
}


/*Container: strip of filter image buttons*/
#myBtnContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    flex-direction: row;
}

.info-hidden {
			   display: none;
               transition: all 0.25s ease;
		   }
		   
.toggle-word {
    border: 2px solid #620A1A;
    box-sizing: border-box;
	border-radius: 20px;
    cursor: pointer;
	display: inline-block;
	font-size: 14px;
	text-align: center;
	font-weight: 600;
	padding: 5px;
	height: 35px;
	width: 140px;
}
		   
#myBtnContainer hr {
    margin-bottom: 20px;
}
		   
#paragraph1, #paragraph2, #paragraph3, #paragraph4 {
    margin-bottom: 2em;
    text-align: center;
}

#paragraph1 a:hover,
#paragraph2 a:hover, 
#paragraph3 a:hover { text-decoration: none; }

/*The filter buttons themselves*/
.filter-btn {
    font-family: 'Open Sans', sans-serif;
    width: 140px;
    height: 35px;
    margin: 5px;
    background-color: white;
    border: 1px solid #620a1a;
    border-radius: 30px;
    padding: 3px;
}

.filter-btn:hover {
    cursor: zoom-in;
    text-decoration: none;
}

.filter-gal-nav {
    width: 100%;
    display: block;
    margin: 0 auto;
}

/*Rules to achieve flash effect on hover*/
.flash-slide {
  border: none;
  display: inline-block;
  color: #FFF;
    font-size: 14px;
  position: relative;
  overflow: hidden;
} 
 
.flash-slide::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -80px;
  height: 100px;
  width: 70px;
  background: rgba(255,255,255, 0.4);
  transform: rotate(20deg);
} 
 
.flash-slide:hover::before {
  left: 190px;
  transition: 0.5s;
} 

/*Flash effect different colours depending on filter options*/
.flash-slide--white { color: #222; background: #EEE; } 

.flash-slide--all { 
    border: 2px solid #620A1A;
    border-radius: 20px;
    color: #222;
	cursor: pointer;
    font-size: 14px;
	font-weight: 600;
	padding: 5px;
	height: 35px;
	width: 140px;
} 

.flash-slide--black { background: #222; } 
.flash-slide--greynat { background: #444; } 
.flash-slide--blue { background: #556782; } 
.flash-slide--green { background: #475644; } 
.flash-slide--redbrown { background: #5b3530; } 
.flash-slide--chequer { 
    background:url(images/galfilter/chequerpattern.png);
    background-size:250%;
    color: #FFF;
    font-weight: bold;
} 
.flash-slide--purple { background: #3b0D5f; width: 130px;} 
.flash-slide--simple { background: #32724f;} 
.flash-slide--complex { background: #a5492e; width: 130px;} 
.flash-slide--fave { background: #F1F1F1; color: #222; width: 130px;} 

.filter-btn:active {
    transform: translateY(5px);
    transition: linear 0.05s;
}
/* Center website */


.filter-gal-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  
    width: 100%;
    overflow: hidden;
    flex-wrap: wrap;
    flex-direction: row;
}

.filter-image {
    width: 250px;
    height: 250px;
    padding: 5px;
    margin: 5px;
    overflow: hidden;
    background: #FFEDF1;
}

.filter-gal-img {
    object-fit: contain;
    overflow: hidden;
    height: 300px;
    width: 250px;
}

.filter-gal-img img {
    image-resolution: 72dpi;
}

.filter-image:hover {
    cursor: zoom-in;
    scale: 1.03;
    transition: linear 0.2s;
}


/*.filter-gal-row {
    margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) 
.filter-gal-row,
.filter-gal-row > .filter-image {
    padding: 8px;
}

/* Create three equal columns that floats next to each other 
.filter-image {
    visibility: hidden; /* Hide columns by default 
    opacity: 0;
    transition: linear 0.2s;
    position: absolute;
    top: 0;
    left: 0;
}*/

.zoom {
    transform: scale(3);
}

.img-zoom {
    object-fit: cover;
}

#full-image {
    width: auto;
    max-height: 80%
}

/*.filter-image img:hover {
    transition: all 0.5s ease;
}*/

/*.column img::before {
                width: 1000px;
                height: 1000px;
                background: black;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                display: block;
            }

.second-in-row:hover {
    transform: scale(2);
}

.first-in-row:hover {
    transform: scale(2) translateX(140px);
}

.third-in-row:hover {
    transform: scale(2) translateX(-140px);
}

/* Clear floats after rows 
.filter-gal-row:after {
    content: "";
    display: table;
    clear: both;
}*/

/* Content */

/* The "show" class is added to the filtered elements */
.show {
    visibility: visible;
    opacity: 1;
    transition: linear 0.2s;
    position: relative;
}

/* The Modal (background) */
#image-viewer {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.9);
}
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 600px;
}
.modal-content { 
    animation-name: zoom;
    animation-duration: 0.2s;
}
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
#image-viewer .close {
    position: absolute;
    top: -25px;
    right: 10px;
    color: #f1f1f1;
    cursor: pointer;
    font-size: 80px;
    font-weight: bold;
    transition: 0.3s;

}

@media only screen and (max-width: 800px){
    .lightbox-gallery {
        width: 90% !important;
    }
    .lightbox-gallery div > img {
        max-width: 250px
    }
    .gal-nav {
        margin-top: 0;
        padding-right: 0;
    }
    
    ul {
        padding-left: 0;
    }
    
    .filter-gal-nav {
        padding-top: 0;
    }
    
    .filter-gal-row { 
        margin-top: 1em;
        justify-content: center; 
    }
    
    .filter-gal-img {
        width: 300px;
    }
    
    .filter-image {
        padding: 0;
        height: 300px;
        width: 300px;
    }
    
    .img-zoom {
        max-width: 100%;
        height: 300px;
    }
    
    .modal-content {
        width: 100%;
    }
    
    #full-image {
        max-width: 85%;
    }
}

@media only screen and (max-width: 599px) {
    .lightbox-gallery {
        width: 100% !important;
    }
    
    .lightbox-gallery div {
        flex-basis: 225px !important;
        height: 225px !important;
    }
    
    .lightbox-gallery div > img {
        width: 225px !important;
        height: 225px !important;
    }
}

@media only screen and (max-width: 439px) {
     .lightbox-gallery div {
        flex-basis: 275px !important;
        height: 275px !important;
    }
    
    .lightbox-gallery div > img {
        max-width: 275px;
        width: 275px !important;
        height: 275px !important;
    }
}