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

.wgw-gallery-wrapper { width: 100%; }

.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; }
.wgw-gallery-imagecontainer-small img { display: block; }

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

#wgw-gallery-overlay { position: fixed; z-index: 2000; display: none; opacity: 0; width: 100vw; height: 100vh; top: 0px; left: 0px; background-image: linear-gradient(-20deg, rgba(21, 90, 154, 1), rgba(0, 59, 113, 0.8)); }
#wgw-gallery-lightbox-title { width: 100%; display: block; margin: 15px auto; color: #fff; font-weight: bold; font-size: 2rem; margin-bottom: 1.5rem; }
#wgw-gallery-lightbox-imgcontainer { width: 70%; height: 90%; margin: calc(100vh / 2 - 60% / 1.333 / 1.8) auto; background-color: rgba(255, 255, 255, 0); text-align: center; border: 10px solid rgba(255, 255, 255, 0); }
#wgw-gallery-lightbox-imgcontainer img { height: 100%; width: auto; }
#wgw-gallery-lightbox-imgcontainer-content { display: block;}
#wgw-gallery-lightbox-imgcaption { display: block; margin: 1.5rem auto; color: #fff; text-align: center; }

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

.zoom-image { transition: all .5s ease; }
.zoom-image:hover { transform: scale(1.1, 1.1); }

@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; }
.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; }


@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-imgcontainer { width: 95%; border: 1px; }
}