html, body, div, span, applet, object, blockquote, pre,
			a, abbr, acronym, address, big, cite, code,
			del, dfn, em, img, ins, kbd, q, s, samp,
			small, strike, strong, sub, sup, tt, var,
			b, u, i, center,
			dl, dt, dd, ol, ul, li,
			fieldset, form, label, legend,
			table, caption, tbody, tfoot, thead, tr, th, td
			article, aside, canvas, details, embed,
			figure, figcaption, footer, header, hgroup,
			menu, nav, output, ruby, section, summary,
			time, mark, audio, video {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 1em;
				vertical-align: baseline;
			}
			/* HTML5 display-role reset for older browsers */
			article, aside, details, figcaption, figure,
			footer, header, hgroup, menu, nav, section {
				display: block;
			}

		* {
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			}


/* ----------------------  MEDIA QUERIES ----------------------------------------------*/

/* ------------------------ Full Screen OUT (Index)----------------------------------*/


		@media screen and (min-width: 700px) {	
			
			.HideOnMobile {
				display: initial;
			}
			
			.ShowOnMobile {
				display: none;
			}
			}


/* ------------------------ ONE Column Layout ----------------------------------*/


		@media screen and (max-width: 999px) {
			
			
		.filtr-item {
			width: 100%;
		  }
			
		.item {
			width: 100%;
		  }
			
		.filters {
				visibility: hidden;
			    display: none;
				}
			
			
		}

/* ------------------------ TWO Column Layout ----------------------------------*/

		@media screen and (min-width: 1000px) {

			
		 .filtr-item {
			width: 50%;
		  	}
			
		.item {
			width: 50%;
		  }	
			

		}

/* ------------------------ THREE Column Layout ----------------------------------*/

		@media screen and (min-width: 1400px) {
		
			
		 .filtr-item {
			width: 33.33%;
		  	}
		}

/* ------------------------ FiVE Column Layout ----------------------------------*/

		@media screen and (min-width: 1600px) {
		
			
		 .filtr-item {
			width: 20%;
		  	}
		}



/* ------------------------ MAX PICTURE SIZE - ON dif. SCREENS ----------------------------------*/


		 @media screen and (max-height: 900px) {

		.swiper, .container {
			max-width: 900px;
				  }
		}

/* ------------------------ MAX PICTURE SIZE - ON dif. SCREENS ----------------------------------*/


		 @media screen and (min-height: 901px) {

		.swiper, .container {
			max-width: 1200px;
				  }
}

/* -----------------------------------------------  MOBILE DEVICES HANDYS ----------------------------------------------*/

			
/* ------------------------ SWIPER ----------------------------------*/

.swiper {
	margin: 50px 0 0 5px;
	animation: fadeInAnimation ease 2s;
	animation: fadeOutAnimation ease 1s;
	animation-iteration-count: initial;
	animation-fill-mode: forwards;
}
 @keyframes fadeInAnimation {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
 @keyframes fadeOutAnimation {
 100% {
 opacity: 1;
}
 0% {
 opacity: 0;
}
}

.swiper-pagination {
	position: relative;
	color: #a1a1a1;
	z-index: 1;
	font-size: 0.82em;
	bottom: auto;
	text-align: left;
    padding: 0 0 0 5px;
}
			


					
.swiper-button-prev {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35' height='25' viewBox='0 0 44.72 33.16'><g fill='none' stroke='white' stroke-width='2' style='mix-blend-mode:exclusion;isolation:isolate'><path d='M44.72 16.08H2.05'/><path d='M17.07 1.06 2.05 16.08l14.02 16.1'/></g></svg>") 22 16, auto;
	left: 0;
}
			
.swiper-button-next {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35' height='25' viewBox='0 0 44.72 33.16'><g fill='none' stroke='coral' stroke-width='2' style='mix-blend-mode:exclusion;isolation:isolate'><path d='M0 17.08h42.67'/><path d='m27.65 32.1 15.02-15.02L28.65.98'/></g></svg>") 22 16, auto;
	right: 0;
}
			
.swiper-button-next {
	height: 100%;
	position: absolute;
	top: 10px;
	width: 65%;
	z-index: 10;
}
			
.swiper-button-prev {
	height: 100%;
	position: absolute;
	top: 10px;
	width: 35%;
	z-index: 10;
}
			
.swiper-button-next:after, .swiper-button-prev:after {
	visibility: hidden;
	display: none;
	font-style: normal;
	position: absolute;
	margin-bottom: 0px;
	color: black;
 --swiper-navigation-size: 20px;
 --swiper-navigation-top-offset: 0;
 --swiper-navigation-sides-offset: 0;
 --swiper-navigation-color: var(--swiper-theme-color);
}


/* ________ BODY GENERAL ______________________________*/

			
		body {
			margin: 0 auto;
			background: #FFFDFB;
			color: black;
			font-size: 1em;
			font-style: italic;
			line-height: 1.3em;
			font-family: Helvetica;
			height: auto;
        }
	
		strong {
			font-weight: normal;
			color: #a1a1a1;
			padding-right: 5px;
			text-transform: lowercase;
		}

		u {
  text-underline-offset: 0.2em;
  -webkit-text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-thickness: 2px;
			}


		.text,
		.credits,
        .outlinks,
		.filters, 
		.tabcontent {
			text-transform: none;
		}

		.text, .credits, .tabcontent{
			line-height: 1.3em;
			font-size: ;
			margin: 22px 0 10px 0px;
			padding: 0 0 0 5px;
			border-bottom: none;
			max-width: 500px;
		}

		.tabcontent {
			min-height: 1000px;
		}

	
		.outlinks a {
			color: #8c8cd7;
		}

		.outlinks a:hover {
			color: #4949ce;
		}

		.outlinks  {
			font-size: 1em;
			line-height: 1.3em;
			padding: 20px 0 10px 0;
		}




/* ________ NEXT BUTTON __________________*/
	
		.next {
			float: right;
			margin: 22px 10px 100px 5px;
			font-size: 0.82em;
			line-height: 1.3em;
			text-align: right;
		}

		.next a {
			color: coral;
			opacity: 0.5;

		}
		.next a:hover {
			cursor: pointer;
			opacity: 1;
			text-decoration: none;
		}


		a {
			text-decoration: none;
			color: black;
		}

			

/* ________ CONTAINER  (MOBILE FIRST) __________________*/


		.container {
			margin: 0;
			padding: 0 10px 10px 10px;
			overflow: hidden;
			width: 100%;
		}
	
		header  {
			width: 100%;
			max-width: 1800px;
			height: 50px;
			background-color: #fffdfb;
			z-index: 99;
			padding: 0 0 0 5px;
			position: fixed;
		}	

		header a {
			color: black;
			text-decoration: none;
		}

		header h1 a {
			transition: opacity 0.25s ease;
			text-transform: lowercase;
		}

		header h1 a:hover {
			opacity: 0.7;
		}
	

		.red {
			color: black ;
			font-weight: bold;
		}

		.menu_fix {
			margin-right: 20px;

		}

		.menu_fix h1 {
			font-size: 1.2em;
			font-weight: normal;
		}

		.menu_fix a {
			padding-right: 10px;
		}


/* ________ LAYOUT GRID (MOBILE FIRST) __________________*/
			
		.FILTER-layout, .AOS-layout {
			margin-top: 50px;
			padding: 5px;
		}

		.FILTER-layout, .AOS-layout{
			animation: fadeInAnimation ease 2s;
			animation: fadeOutAnimation ease 1s;
			animation-iteration-count: initial;
			animation-fill-mode: forwards;
		}

        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
		}
			
		 @keyframes fadeOutAnimation {
			100% {
                opacity: 1;
            }
            0% {
                opacity: 0;
            }
		}


/* ________ GRID ITEMS / FOTOS (MOBILE FIRST) __________________*/

		img {
			width: 100%;
			height: auto;
		}	



		.box {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}	

		.box img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			-webkit-transition: .2s ease-in-out;
			transition: .2s ease-in-out;
		}

		.box:hover img {
			-webkit-transform: scale(1.01);
			transform: scale(1.01);
		}


/*  ________ PHOTOSWIPE BACKGROUND _________________*/	
					
			div.pswp__bg {
				background: black;
			}			
					
						
			/* CAPTIONS */	
		
			div.pswp__dynamic-caption {
				color: white;
				font-size: 0.62em;
				text-align: center;
				text-transform: none;
			}	


/* ________ STückTITEL - OVERLAY - TITEL __________________*/
		


		.marker {
			height: 100%;
			padding: 5px;
		}

		.marker:hover .item-desc {
			 opacity: 1;	
		}

		.box:hover .item-desc {
			 opacity: 1;	
		}

		.item-desc {
			  background: transparent;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  text-align: center;
			  opacity: 0;
			  transition: .3s ease;
			  -webkit-transition: .3s ease;
		}

 		a .item-desc p {
			  color: #FFFDFB;
			  font-size: 0.82em;
			  text-decoration: none;
			  padding: 10px;
			  text-transform: lowercase;
			  -webkit-transform: translate(-50%, -50%);
			  -ms-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%);
		}

 		a .item-desc p:hover {
			  color: #FFFDFB;
		}

/* ________ ON Touch DEVICES ! __________________*/


        @media (pointer: coarse) {
		.item-desc {
			  background: transparent;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  text-align: center;
			  transition: .8s ease;
			  -webkit-transition: .8s ease;
			  opacity: 1;
			}
			
		.filtr-item a {
				text-decoration: none;
			}
			
 		a .item-desc p {
			  color: #FFFDFB;
			  font-size: 0.82em;
			  text-decoration: none;
			  padding: 10px;
			  text-transform: lowercase;
			  -webkit-transform: translate(-50%, -50%);
			  -ms-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%);
		}			
        }


/* ________ FILTERS - BUTTONS __________________*/

		.filters {
			animation: fadeInAnimation ease 2s;
			animation-iteration-count: initial;
			animation-fill-mode: forwards;
			}

		button  {
		    font-size: 0.82em;
			display: inline-block;
			cursor: pointer;
			border: none;
			padding: 0 5px 0 0;
			-webkit-appearance: none;
			-webkit-font-family: inherit;
			line-height: 1.3em;
			font-family: Helvetica;
			color: #575757;
			background-color: transparent;

			}
		
/* ________Filter controls __________________ */






			.simplefilter {
			  line-height: 1.3em;
			  float: right;
				padding-left: 200px;
				margin-top: -3px;
				}


			.sortandshuffle {
			  line-height: 1.3em;
				 margin-top: 0;
				float: right;
				visibility: hidden;
				display: none;
			}



/* simple filters controls */

				.simplefilter button.fltr-controls {
							padding: 0 5px;
							text-decoration: none;
					 -webkit-text-decoration-line: none;
							text-decoration-color: #575757;
					 -webkit-text-decoration-color: #575757;
							text-underline-offset: 0.4em;
					 -webkit-text-underline-offset: 0.4em;
							text-decoration-thickness: 1px;
							line-height: 2em;
					 -webkit-line-height: 2em;
							 font-style: italic;
					 -webkit-font-style: italic;
				}

				.simplefilter button.fltr-controls:hover {
							text-decoration-thickness: 2px;
				}

				.simplefilter button.fltr-controls.active {
										color: #eeeee;
				}


/* ------------------------ CREDITS AND INFO TABS ----------------------------------*/
			
 /* Style the tab */
.tab {
  overflow: hidden;
 padding: 10px 0 200px 5px;
  background-color: none;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  float: left;
  font-size: 0.82em;
  font-style: italic;
  color: black;
  cursor: pointer;
  padding: 0 10px 0 0;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  opacity: 0.7;
}

/* Create an active/current tablink class */
.tab button.active {
  text-decoration: underline;
						 -webkit-text-decoration: underline;
							text-decoration-color: #575757;
					 -webkit-text-decoration-color: #575757;
							text-underline-offset: 0.4em;
					 -webkit-text-underline-offset: 0.4em;
							text-decoration-thickness: 1px;
					-webkit-text-decoration-thickness: 1px;
}

/* Style the tab content */
.tabcontent {
  display: none;  
  font-size: 0.82em;	
  margin: -200px 0 0 0;
  min-height: 180px;
} 

.tabcontent.show {
	display: block;
}
			
.tabcontent {
  animation: fadeEffect 0.5s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
} 



/* ________ F O O T E R ______________________________*/

				footer {
					text-align: left; 
					height: 120px; 
					padding: 0 0 0 15px;
					font-size: 0.82em;
				}