/* Gallery */

body.noscroll { overflow: hidden; }

@keyframes scalein {
  	0% {
		transform: scale(0.0);
  	}
  	100% {
	 	transform: scale(1.0);
  	}
}

@keyframes fadein {
  	0% {
		opacity: 0.0;
  	}
  	100% {
	 	opacity: 1.0;
  	}
}

#gallery-wrapper { 
					align-items: center; 
					background-color: var(--color2); 
					cursor: pointer;
					display: flex; 
					height: 100vh; 
					justify-content: center; 
					left: 0; 
					opacity: 0.0; 
					position: fixed; 
					top: 0; 
					transition: opacity 450ms ease-in;
					width: 100%; 
					z-index: 4500;
				}
				
#gallery-wrapper > * { cursor: default; }
				
#gallery-wrapper.active { opacity: 1.0; perspective: 100vh; }
				
#gallery-wrapper .close-button { 
									background-image: url(../img/gallery/close.svg); 
									background-position: right 18px center; 
									background-repeat: no-repeat; 
									background-size: 18px; 
									/* border: 1px solid rgb(93,93,93);  */
									cursor: pointer; 
									height: 54px; 
									position: absolute;
									right: 0;
									top: 0; 
									transition: transform 180ms ease-out;
									width: 54px; 
									z-index: 90;
								}
								
#gallery-wrapper.fullscreen .close-button { background-image: url(../img/gallery/close-white.svg); }
								
#gallery-wrapper .close-button:hover { transform: rotate(90deg); }

#gallery-wrapper.active .delete-button { 
										background-image: url(../img/icons/delete.svg); 
										background-position: center; 
										background-repeat: no-repeat; 
										background-size: 29px; 
										border-width: 1px;
										cursor: pointer; 
										height: 45px;
										left: 18px; 
										opacity: 0.7;
										padding: 0;
										position: absolute; 
										top: 18px; 
										width: 45px;
										z-index: 99; }
										
#gallery-wrapper.active .delete-button:hover { border-color: var(--color1); color: var(--color1); opacity: 1.0; }

#gallery-wrapper.active .hide-button { 
										background-image: url(../img/icons/hide.svg); 
										background-position: center; 
										background-repeat: no-repeat; 
										background-size: 45px; 
										border-width: 1px;
										cursor: pointer; 
										height: 45px;
										left: 67px; 
										opacity: 0.7;
										padding: 0;
										position: absolute; 
										top: 18px; 
										width: 45px;
										z-index: 99; }
										
#gallery-wrapper.active .hide-button:hover { border-color: var(--color1); color: var(--color1); opacity: 1.0; }

#gallery-wrapper .prev-next-wrapper { display: flex; position: relative; }

#gallery-wrapper .next-button, 
#gallery-wrapper .prev-button { 
								background: url(../img/gallery/arrow.svg); 
								background-position: 54% center;
								background-repeat: no-repeat; 
								background-size: 50%; 
								border: 2px solid rgba(255,255,255,0.0); 
								border-radius: 50%; 
								cursor: pointer; 
								height: 45px;
								transition: background-position 180ms ease-out, border-color 180ms linear; 
								width: 45px;
								z-index: 90;
								}
								
#gallery-wrapper.fullscreen .next-button, 
#gallery-wrapper.fullscreen .prev-button { background-image: url(../img/gallery/arrow-white.svg); }

#gallery-wrapper .next-button {  }
#gallery-wrapper .prev-button { transform: rotate(180deg); }

#gallery-wrapper .prev-button:hover, 
#gallery-wrapper .next-button:hover { background-position: 72% center; /*border: 2px solid rgba(255,255,255,0.5);*/ }

#gallery-wrapper .prev-next-wrapper .nav-circle {	background: url(../img/gallery/circle.svg); 
													background-position: center center;
													background-repeat: no-repeat; 
													background-size: 45px;
													height: 100%;
													left: 0;
													opacity: 0.0;
													position: absolute;
													top: 0;
													transition: background-position 270ms ease-out, opacity 270ms ease-out;
													width: 100%;
													z-index: 0;
												}
												
#gallery-wrapper.fullscreen .prev-next-wrapper .nav-circle { background-image: url(../img/gallery/circle-white.svg); }
												
#gallery-wrapper .prev-next-wrapper:hover .nav-circle { opacity: 1.0; }
												
#gallery-wrapper .prev-next-wrapper.prev-hover .nav-circle { background-position: left center; }
#gallery-wrapper .prev-next-wrapper.next-hover .nav-circle { background-position: right center; }

.gallery-nav { align-items: center; /*background: rgba(255,0,0,0.4);*/ bottom: 0; display: flex; justify-content: space-between; left: 0; margin: 0 auto; max-width: calc(1440px - 54px); position: absolute; right: 0; width: calc(90vw - 54px); z-index: 90; }
.gallery-item-count { align-items: center; color: rgb(255,255,255); display: flex; font-size: 14px; justify-content: flex-start; padding-left: 14px; }
.count-divider { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; height: 16px; margin: 0 9px; width: 1px; }
#gallery-wrapper.fullscreen .gallery-item-count { color: rgb(255,255,255); }
#gallery-wrapper.fullscreen .count-divider { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)); }

.gallery-thumb.active {  }
#gallery-wrapper .gallery-image { align-items: center; background-size: cover; box-shadow: 0 0 9px rgb(0,0,0,0.3); display: flex; height: auto; /*max-height: 81vh;*/ justify-content: center; /*max-width: 1440px;*/ overflow: hidden; position: absolute; opacity: 0; transform: translateY(-54vh); transition: opacity 900ms ease-out, width 450ms ease-out ; /*width: 0;*/ width: auto; z-index: 1; }
#gallery-wrapper.active .gallery-image { /*outline: 18px solid white; outline-offset: -18px;*/ transform: translateY(0); z-index: 0; }

#gallery-wrapper.active .gallery-image:after { bottom: 9px; color: rgb(255,255,255); content: "\00a9  Harald Freudemacher"; font-size: 14px; opacity: 0.0; position: absolute; right: 18px; transition: opacity 270ms ease; }
#gallery-wrapper.active .gallery-image[data-copyright]:after { content: "\00a9 " attr(data-copyright); }
#gallery-wrapper.active .gallery-image:hover:after { opacity: 0.7; }

#gallery-wrapper.active .gallery-image.active { opacity: 1; transition: opacity 900ms ease-out; z-index: 9; }
#gallery-wrapper.active .gallery-image.active.initial { transition: opacity 900ms ease-out, transform 720ms ease-out; }
#gallery-wrapper.active.close { opacity: 0; transition: opacity 900ms ease-out; }
/*#gallery-wrapper.active.close .gallery-image.active { transform: translateY(-100vh) *//*scale(0.5) rotateX(90deg)*//*; transition: transform 720ms ease-out; }*/

#gallery-wrapper.active .gallery-image.left { transform: translateX(-100vw) rotateY(-54deg); transform-style: preserve-3d; transition: opacity 900ms ease-out 900ms, transform 540ms ease-in; }
#gallery-wrapper.active .gallery-image.right { transform: translateX(100vw) rotateY(54deg); transform-style: preserve-3d; transition: opacity 900ms ease-out 900ms, transform 540ms ease-in; }

#gallery-wrapper.active.fullscreen .gallery-image.left { transform: translateX(-100vw); transition: opacity 900ms ease-out 900ms, transform 540ms ease-in; }
#gallery-wrapper.active.fullscreen .gallery-image.right { transform: translateX(100vw); transition: opacity 900ms ease-out 900ms, transform 540ms ease-in; }

/* overwrite */

#gallery-wrapper.active .gallery-image.active { opacity: 1; transition: opacity 540ms ease-out; }

#gallery-wrapper.active .gallery-image.left { transform: none; transform-style: initial; transition: opacity 290ms ease-out; }
#gallery-wrapper.active .gallery-image.right { transform: none; transform-style: initial; transition: opacity 290ms ease-out; }

#gallery-wrapper.active.fullscreen .gallery-image.left { transform: none; transition: opacity 290ms ease-out; }
#gallery-wrapper.active.fullscreen .gallery-image.right { transform: none; transition: opacity 290ms ease-out; }

/* .gallery-image:after { bottom: 9px; color: rgb(255,255,255); content: "\00a9  Harald Freudemacher"; font-size: 14px; opacity: 0.0; position: absolute; right: 18px; transition: opacity 270ms ease; } */
/* .gallery-image:hover:after { opacity: 0.7; } */
/* .gallery-image.active { width: 90vw; } */
#gallery-wrapper .gallery-image.active { opacity: 1; position: relative; width: auto; z-index: -1; }
#gallery-wrapper .gallery-image img { /*display: none;*/ height: auto; max-height: 81vh; transition: all 450ms ease-out; max-width: 90vw; width: auto; }
#gallery-wrapper.large .gallery-image img { height: auto; max-height: 100vh; transition: none; max-width: 100vw; width: auto; }
#gallery-wrapper.fullscreen .gallery-image { height: 100vh; width: 100vw; }
#gallery-wrapper.fullscreen .gallery-image img { min-height: 100%; min-width: 100%; object-fit: cover; transition: none; }
.gallery-image.active img { display: block; }

.gallery-image .gallery-caption { color: rgb(255,255,255); font-family: 'Prata', serif; font-size: 54px; font-weight: 400; line-height: 54px; margin-left: 90px; transform: translate(-270px, -120px); transition: transform 450ms ease-out; }
.gallery-image.active .gallery-caption { transform: translate(0, -120px); }

.quick-nav { display: flex; justify-content: center; left: 0; transform: translate(0, -40px); }

.quick-nav > div { 
					background-size: 50%; 
					background-repeat: no-repeat; 
					background-position: 0 -100px; 
					cursor: pointer; 
					/*filter: grayscale(100%);*/
					padding: 45px 3px; 
					/*transition: background-size 450ms ease-out;*/
					transform: translate(0, 40px);
					transition: transform 450ms ease-out;
				}
.quick-nav > div:hover { animation: fadein 450ms ease-in; background-position: center center; background-size: 100%; transform: translate(0, 0); }
.quick-nav > div:hover > div,
.quick-nav > div.current:hover > div { background: none; width: 90px; }

.quick-nav > div.hidden { display: none; }

.quick-nav > div > div { 
							background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5));
							background-position: center; 
							background-repeat: no-repeat; 
							background-size: 100% 2px;  
							height: 2px;
							width: 45px;
						}
						
#gallery-wrapper.large .quick-nav > div > div,
#gallery-wrapper.fullscreen .quick-nav > div > div { background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)); }
						
.quick-nav > div.current > div { background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0)); background-size: 100% 2px; border-radius: 1px; }
#gallery-wrapper.large .quick-nav > div.current > div,
#gallery-wrapper.fullscreen .quick-nav > div.current > div { background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0)); }
#gallery-wrapper.large .quick-nav > div:hover > div,
#gallery-wrapper.large .quick-nav > div.current:hover > div,
#gallery-wrapper.fullscreen .quick-nav > div:hover > div,
#gallery-wrapper.fullscreen .quick-nav > div.current:hover > div { background-image: none; }

#gallery-images { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.gallery { display: flex; flex-wrap: wrap; justify-content: flex-start; }

#gallery.inview .gallery-thumb { transform: scale(1.0); }
.gallery-thumb { align-items: center; background: rgb(93,93,93); cursor: pointer; display: flex; justify-content: center; overflow: hidden; position: relative; transform: scale(0.0); transition: transform 1000ms ease 450ms; }
.gallery-thumb:nth-child(1) { transition-delay: 45ms; }
.gallery-thumb:nth-child(2) { transition-delay: 90ms; }
.gallery-thumb:nth-child(3) { transition-delay: 135ms; }
.gallery-thumb:nth-child(4) { transition-delay: 180ms; }
.gallery-thumb:nth-child(5) { transition-delay: 225ms; }
.gallery-thumb:nth-child(6) { transition-delay: 450ms; }
.gallery-thumb:nth-child(7) { transition-delay: 405ms; }
.gallery-thumb:nth-child(8) { transition-delay: 360ms; }
.gallery-thumb:nth-child(9) { transition-delay: 315ms; }
.gallery-thumb:nth-child(10) { transition-delay: 270ms; }

.gallery-thumb .image-caption { align-items: center; background-size: 0 4px; color: rgb(255,255,255); display: flex; justify-content: center; left: 0; height: 100%; opacity: 0.0; position: absolute; top: 0; transition: background-size 270ms ease-out; width: 100%; z-index: 90; }
.gallery-thumb:hover .image-caption { background-image: linear-gradient(var(--color1),var(--color1)); background-position: left bottom; background-repeat: no-repeat; background-size: 100% 3px; opacity: 1.0; }
/*.gallery-thumb:hover .image-caption { background-image: linear-gradient(90deg, #F2CA50, #F2DC99, #BF7E04, #D99E30, #F2DC99, #BF6B04, #D99E30); }*/
.gallery-thumb .image-caption span { margin-top: -27px; opacity: 0.0; transition: margin 270ms ease-in, opacity 270ms ease-in; }
.gallery-thumb:hover .image-caption span { margin-top: 0; opacity: 1.0; }
.gallery-thumb:hover { background-color: #D1AF8C; box-shadow: 0 0 9px rgba(0,0,0,0.3); z-index: 180; }
.gallery-thumb img { /*filter: grayscale(100%);*/ min-height: 100%; min-width: 100%; object-fit: cover; transition: transform 450ms ease-out/*, filter 450ms ease-out 450ms*/; }
.gallery-thumb img.landscape { /*filter: grayscale(100%);*/ height: 100%; min-width: initial; object-fit: initial; transition: transform 450ms ease-out/*, filter 450ms ease-out 450ms*/; width: auto; }
.gallery-thumb:hover img { /*filter: grayscale(0%);*/ transform: scale(110%); }

.gallery-thumb.hidden-image { opacity: 0.5; }

.gallery-thumb.hidden { display: none; /* height: 0; overflow: hidden; */ } 
.gallery-thumb.hidden.active { display: flex; /* height: calc(90vw / 2); */ }

#gallery .show-more { border-color: var(--color1); color: var(--color1); margin-top: 45px; }
#gallery .show-more:hover { border-color: var(--color3); }
#gallery.bg2 .show-more { border-color: var(--color3); color: var(--color3); }
#gallery.bg2 .show-more:hover { border-color: var(--color3);  color: var(--color3); }

#context-menu { align-items: center; background: rgb(255,255,255); border-radius: 3px; box-shadow: 0 0 9px rgb(0,0,0,0.3); display: flex; flex-direction: column; font-size: 14px; justify-content: center; position: absolute; z-index: 9000; }
#context-menu > div { border-bottom: 1px solid var(--color3); cursor: pointer; height: 29px; line-height: 29px; min-width: 180px; padding: 2px 9px; text-align: center; white-space: nowrap; }
#context-menu > div:last-child { border-bottom: none; }
#context-edit:hover { color: royalblue; }
#context-delete:hover { color: rgb(209,0,0); }
.context-target { position: relative; }
.context-target:after { border: 3px solid rgb(255,255,255); content: ""; display: block; height: calc(100% - 6px); position: absolute; width: calc(100% - 6px); }

.edit-input { color: var(--text-color); border: 0; display: block; font-size: 16px; font-weight: normal; margin: 0; padding: 0; line-height: 29px; text-align: center; width: 100%; }

#message-overlay { align-items: center; background: rgba(0,0,0,0.72); display: flex; height: 100%; justify-content: center; left: 0; position: fixed; top: 0; width: 100%; z-index: 9000; }
#message-overlay .message-window { background: rgb(255,255,255); display: inline-block; padding: 18px; text-align: center; }
#message-overlay .message-window .button { background: rgb(255,255,255); border: 1px solid var(--color2); color: var(--text-color); cursor: pointer; display: inline-block; font-size: 14px; height: 27px; line-height: 27px; margin: 18px 2px 0 2px; text-align: center; width: 90px; }
#message-overlay .message-window .button:hover { background: var(--color2); color: rgb(255,255,255); }

/* < 450px */
@media screen and (max-width: 450px)
{
	#gallery .gallery-thumb { transform: scale(1.0); }
	#gallery.inview .gallery-thumb { opacity: 0.0; /*transform: scale(1.0);*/ transition: all 1800ms ease-out; }
	#gallery.inview .gallery-thumb.inview { opacity: 1.0; /*transform: scale(1.0);*/ }
	.gallery-thumb { height: calc(90vw / 2); width: calc(100% / 2); }
	/* .gallery-thumb { height: 90vw; width: 90vw; } */
}

/* > 450px */
@media screen and (min-width: 450px) and (max-width: 720px)
{
	.gallery-thumb { height: calc(90vw / 2); width: calc(100% / 2); }
	#gallery .gallery-thumb { transform: scale(1.0); }
	#gallery.inview .gallery-thumb { opacity: 0.0; /*transform: scale(1.0);*/ transition: all 1800ms ease-out; }
	#gallery.inview .gallery-thumb.inview { opacity: 1.0; /*transform: scale(1.0);*/ }
}

/* < 720px */
@media screen and (max-width: 720px)
{
	.gallery-image .gallery-caption { font-size: 38px; line-height: 38px; }
	
	/* .quick-nav { overflow: hidden; width: 0; } */
}

/* < 830px */
@media screen and (min-width: 720px) and (max-width: 900px)
{
	.gallery-image .gallery-caption { font-size: 45px; line-height: 45px; }
	
	.quick-nav > div:hover > div,
	.quick-nav > div.current:hover > div { width: 90px; }
	.quick-nav > div > div { width: 27px; }
}

/* > 720px */
@media screen and (min-width: 720px) and (max-width: 900px)
{
	.gallery-thumb { height: calc(90vw / 3); width: calc(100% / 3); }
	/*.gallery-thumb:nth-child(2), .gallery-thumb:nth-child(9) { height: calc(90vw / 3); width: calc(100% / 1.5); }
	.gallery-thumb:nth-child(2) img, .gallery-thumb:nth-child(9) img { height: auto; width: 100%; }*/
}

/* < 900px */
@media screen and (max-width: 900px)
{
	/* #gallery .show-more { display: block; } */
	
	.gallery-thumb.hidden { display: none; /* height: 0; overflow: hidden; */ } 
	.gallery-thumb.hidden.active { display: flex; /* height: calc(90vw / 2); */ }
	
	.gallery-thumb:nth-child(1), 
	.gallery-thumb:nth-child(2), 
	.gallery-thumb:nth-child(3), 
	.gallery-thumb:nth-child(4), 
	.gallery-thumb:nth-child(5), 
	.gallery-thumb:nth-child(6), 
	.gallery-thumb:nth-child(7), 
	.gallery-thumb:nth-child(8), 
	.gallery-thumb:nth-child(9), 
	.gallery-thumb:nth-child(10) { transition-delay: 45ms; }
}

/* > 900px */
@media screen and (min-width: 900px) and (max-width: 1280px)
{
	.gallery-thumb { height: calc(90vw / 4); width: calc(100% / 4); }
	/*.gallery-thumb:nth-child(3), .gallery-thumb:nth-child(8) { height: calc(90vw / 4); width: calc(100% / 2); }
	.gallery-thumb:nth-child(3) img, .gallery-thumb:nth-child(8) img { height: auto; width: 100%; }*/
}

/* > 900px */
@media screen and (min-width: 900px)
{
	/*#gallery .show-more { display: none; }*/
}

/* < 1440px */
@media screen and (max-width: 1440px)
{
	.quick-nav { overflow: hidden; width: 0; }
	
	/* .gallery-image { max-width: 93vw; } */
	/* .gallery-image.active { width: 93vw; } */
}

/* > 1280px */
@media screen and (min-width: 1280px)
{
	.gallery-thumb { max-height: calc(1280px / 5); max-width: calc(1280px / 5); height: calc(90vw / 5); width: calc(100% / 5); }
}

/* > 1525px */
@media screen and (min-width: 1525px)
{
	/* #gallery-wrapper .close-button { top: 5vh; } */
}

/*#gallery-images { filter:url('#goo'); }

.gallery-thumb {
  position:absolute;
  left:50%;
  top:50%;
  width:270px;
  height:270px;
  line-height:270px;
  text-align:center;
  color:white;
  font-size:40px;
  border-radius:100%;
  margin-top:-50px;
  margin-left:-50px;
animation:blob-left-top-anim cubic-bezier(0.770, 0.000, 0.175, 1.000) 4s infinite; }

.gallery-thumb:nth-child(2){ animation-name:blob-right-top-anim; }
.gallery-thumb:nth-child(3){ animation-name:blob-left-bottom-anim; }
.gallery-thumb:nth-child(4){ animation-name:blob-right-bottom-anim; }*/