/*
WGW-Gallery
Author: Christoph Letmaier
Version 1.0
Stylesheet
*/

.wgw-gallery-wrapper { width: 100%; margin-top: 0.20%; overflow: hidden; }

.wgw-gallery-row { width: 100%; float: left; }
.wgw-gallery-col100 { width: 100%; float: left; margin-bottom: 0.20%; }
.wgw-gallery-col50 { width: 49.9%; float: left; margin-right: 0.20%; margin-bottom: 0.20%; }
.wgw-gallery-col50:nth-child(2n+2) { margin-right: 0%; }
.wgw-gallery-col33 { width: 33.2%; float: left; margin-right: 0.20%; margin-bottom: 0.20%;  }
.wgw-gallery-col33:nth-child(3n+3) { margin-right: 0%;  }
.wgw-gallery-col25 { width: 24.85%; float: left; margin-right: 0.20%; margin-bottom: 0.20%;  }
.wgw-gallery-col25:nth-child(4n+4) { margin-right: 0%; }
.wgw-gallery-col20 { width: 19.84%; float: left; margin-right: 0.20%; margin-bottom: 0.20%; }
.wgw-gallery-col20:nth-child(5n+5) { margin-right: 0%; }
.wgw-gallery-col16 { width: 16.5%; float: left; margin-right: 0.20%; margin-bottom: 0.20%; }
.wgw-gallery-col16:nth-child(6n+6) { margin-right: 0%; }
.wgw-gallery-col14 { width: 14.11%; float: left; margin-right: 0.20%; margin-bottom: 0.20%; }
.wgw-gallery-col14:nth-child(7n+7) { margin-right: 0%; }
.wgw-gallery-col12 { width: 12.32%; float: left; margin-right: 0.20%; margin-bottom: 0.20%; }
.wgw-gallery-col12:nth-child(8n+8) { margin-right: 0%; }

.wgw-gallery-container { position: relative; float: left; width: 100%; }

.wgw-gallery-imagecontainer-small { overflow: hidden; cursor: pointer; position: relative; /* position: relative for elementwidth = elementheight */ }
.wgw-gallery-imagecontainer-small:before { content: ""; display: block; padding-top: 100%; } /* this before class for elementwidth = elementheight */
.wgw-gallery-imagecontainer-small img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; }

.wgw-standard-img { width: 100%; height: auto; }
.wgw-pointer { cursor: pointer; }

.wgw-body-scrollstop { overflow: hidden; }

.wgw-gallery-rp-title { width: 100%; font-family: FuturaLTPro-Bold, Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 1.3rem; padding: 0px 0 15px 0; }

#wgw-gallery-overlay { position: fixed; z-index: 200; display: none; opacity: 0; width: 100vw; height: 100vh; top: 0px; left: 0px; background-image: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.6)); }
#wgw-gallery-lightbox-title { width: 100%; display: block; margin: 15px auto; color: #fff; font-weight: bold; font-size: 2rem; margin-bottom: 0.5rem; }
#wgw-gallery-lightbox-img-0, #wgw-gallery-lightbox-img-1 { display: inline-block; width: 100%; height: auto; }
.wgw-gallery-lightbox-container { display: flex; position: absolute; z-index: 400; align-items: stretch; width: 80%; height: 65%; margin: calc(100vh / 2 - 60% / 1.333 / 1.8) calc(100vh / 2 - 60% / 1.333 / 1.8); background-color: rgba( 100, 100, 100, 0.5 ); overflow: hidden; }
/*#wgw-gallery-lightbox-container-0, #wgw-gallery-lightbox-container-1 { display: flex; position: absolute; z-index: 400; align-items: stretch; width: 80%; height: 65%; margin: calc(100vh / 2 - 60% / 1.333 / 1.8) auto; overflow: hidden; }*/
.wgw-gallery-lightbox-container img { width: 100%; height: auto; }
/* #wgw-gallery-lightbox-container-0 img, #wgw-gallery-lightbox-container-1 img { width: 100%; height: auto; } */
.wgw-gallery-lightbox-img { position: absolute; left:0; top: 0; }
/*wgw-gallery-lightbox-img-0-0, #wgw-gallery-lightbox-img-1-0, #wgw-gallery-lightbox-img-0-1, #wgw-gallery-lightbox-img-1-1 { position: absolute; left:0; top: 0; } */
.wgw-gallery-lightbox-container .wgw-gallery-thumbnail-image { display: inline; width: 15%; height: auto; margin-right: 1.5%; cursor: pointer; border-radius: 5px; }
/* #wgw-gallery-lightbox-container-0 .wgw-gallery-thumbnail-image, #wgw-gallery-lightbox-container-1 .wgw-gallery-thumbnail-image { display: inline; width: 15%; height: auto; margin-right: 1.5%; cursor: pointer; border-radius: 5px; } */
.wgw-gallery-lightbox-imgcontainer { opacity: 0; width: 70%; position: relative; overflow: hidden; }
/*#wgw-gallery-lightbox-imgcontainer-0, #wgw-gallery-lightbox-imgcontainer-1 { display: block; width: 70%; position: relative; background-color: rgba( 50, 50, 255, 0.5 ); overflow: hidden; }*/
.wgw-gallery-lightbox-textcontainer { display: block; width: 30%; background-color: #fff; padding: 30px; box-sizing: border-box; text-align: left; }
/*#wgw-gallery-lightbox-textcontainer-0, #wgw-gallery-lightbox-textcontainer-1 { display: block; width: 30%; background-color: #fff; padding: 30px; box-sizing: border-box; text-align: left; }*/
.wgw-gallery-lightbox-textcontainer .hlm-rp-title { padding-top: 0; font-size: 1.1rem; }
/* #wgw-gallery-lightbox-textcontainer-0 .hlm-rp-title, #wgw-gallery-lightbox-textcontainer-1 .hlm-rp-title { padding-top: 0; font-size: 1.1rem; } */
.wgw-gallery-thumbnails { display: inline-block; width: 100%; margin-bottom: 20px; }
/*#wgw-gallery-thumbnails-0, #wgw-gallery-thumbnails-1 { display: inline-block; width: 100%; margin-bottom: 20px; }*/
.www-imgcontainer-info { position: absolute; left: 15px; bottom: 15px; background-color: rgba(255, 255, 255, 0.9); padding: 5px 10px; opacity: 0; }
#wgw-gallery-lightbox-info { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; float: left; left: 0px; bottom: 84px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3)); margin: 1.5rem auto; box-sizing: border-box; color: #000; text-align: center; padding: 10px 20px; }
.wgw-gallery-lightbox-imgcaption { display: block; float: left; vertical-align: middle; }
/* #wgw-gallery-lightbox-imgcaption-0, #wgw-gallery-lightbox-imgcaption-1 { display: inline; float: left; vertical-align: middle; } */
#wgw-gallery-lightbox-imglink { display: inline; float: right; }
#wgw-gallery-lightbox-imglink a { margin: 0; }

.wgw-gallery-imgtext { display: inline-block; overflow-x: hidden; height: auto; padding-right: 15px; box-sizing: border-box; font-size: 1rem; scrollbar-width: thin; scrollbar-color: #d0d0d0 #eee; }
.wgw-gallery-imgtext::-webkit-scrollbar { width: 10px; background-color: #eee; border-radius: 5px; }
.wgw-gallery-imgtext::-webkit-scrollbar-thumb {
  background-color: #d0d0d0;
  outline: 1px solid slategrey;
  border-radius: 5px;
}


#wgw-gallery-prevbutton { position: absolute; width: 60px; height: 60px; top: calc(100vh / 2 - 30px ); left: 50px; z-index: 700; cursor: pointer; display: none; }
#wgw-gallery-nextbutton { position: absolute; width: 60px; height: 60px; top: calc(100vh / 2 - 30px ); right: 50px; z-index: 700; cursor: pointer; display: none; }
#wgw-gallery-closeicon { position: absolute; width: 30px; height: 30px; top: 30px; right: 30px; z-index: 700; cursor: pointer; }

.www-gallery-image-loader { position: absolute; z-index: 1000; left: 0rem; top: 0rem; width: 150px; height: 150px; opacity: 0.5; }

.wgw-fade-image-in { transition: opacity 1s ease; opacity: 1 !important; }

.wgw-zoom-image { transition: all .3s ease; } 
.wgw-fade-image { transition: all .1s ease-out; } 
.wgw-zoom-image:hover { transform: scale(1.1); opacity: 0.5; }
.wgw-fade-image:hover { opacity: 0.5; }

@keyframes fadeInImg { from { opacity: 0; } to { opacity: 1; } }
.fadeInImg { -webkit-animation-name: fadeInImg; animation-name: fadeInImg; animation-delay: 0s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-timing-function: cubic-bezier(0,.76,.2,1); animation-fill-mode: both; }

@keyframes fadeOutImg { from { opacity: 1; } to { opacity: 0; } }
.fadeOutImg { -webkit-animation-name: fadeOutImg; animation-name: fadeOutImg; animation-delay: 0s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-timing-function: cubic-bezier(0,.76,.2,1); animation-fill-mode: both; }

@-webkit-keyframes fadeInUp30 { from { opacity: 0; -webkit-transform: translate3d(0, 80%, 0); transform: translate3d(0, 80%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.fadeInUp30 { -webkit-animation-name: fadeInUp30; animation-name: fadeInUp30; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

@-webkit-keyframes fadeInDown30 { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0); } }
.fadeInDown30 { -webkit-animation-name: fadeInDown30; animation-name: fadeInDown30; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }




@media (max-width: 1024px) {
	.wgw-gallery-lightbox-container {
		width: 73%;
		height: 60%;
	}
	.wgw-gallery-lightbox-imgcontainer {
		width: 65%;
	}
	.wgw-gallery-lightbox-textcontainer {
		width: 35%;
	}
}

@media (max-width: 970px) and (orientation: portrait) {
	.wgw-gallery-lightbox-container {
		width: 70%;
		height: 90%;
		flex-direction: column;
	}
	.wgw-gallery-lightbox-imgcontainer {
		width: 100%;
		min-height: 35vh;
	}
	.wgw-gallery-lightbox-textcontainer {
		width: 100%;
	}
	.wgw-gallery-thumbnails {
		width: 100%;
		margin-bottom: 15px;
	}
}



@media (max-width: 550px) {
	.wgw-gallery-col12, .wgw-gallery-col14, .wgw-gallery-col16, .wgw-gallery-col20, .wgw-gallery-col25, .wgw-gallery-col33, .wgw-gallery-col50 { width: 100%; float: left; margin-right: 1.2vw; margin-bottom: 0.15%;  }
	.wgw-gallery-col12:nth-child(8n+8), .wgw-gallery-col14:nth-child(7n+7), .wgw-gallery-col16:nth-child(6n+6), .wgw-gallery-col20:nth-child(5n+5), .wgw-gallery-col25:nth-child(4n+4), .wgw-gallery-col33:nth-child(3n+3), .wgw-gallery-col50:nth-child(2n+2) { margin-right: 1.2vw; }
	#container { width: 90%; }
	.wgw-gallery-lightbox-container { width: 95%; border: 1px; }
	#wgw-gallery-lightbox-img-0, #wgw-gallery-lightbox-img-1 { display: block; }
	#wgw-gallery-imgandtext-container { flex-direction: column; justify-content: flex-start; align-items: stretch; }
	#wgw-gallery-imgtext-0, #wgw-gallery-imgtext-1 { height: 60%; }
	.wgw-gallery-container { width: 100%; height: 100vw; }
	.wgw-gallery-col20 { position: absolute; width: 100%; height: 100%; left: 101vw; }
	.wgw-gallery-col20:first-child { position: absolute; width: 100%; height: 100vw; left: 0px; }
}