@font-face
	{
		font-family:"Rockybilly";
		src:url("rockybilly.ttf") format("truetype");
	}

@font-face
	{
		font-family:"Myriad Pro Black";
		src:url("Myriad_Pro_Black.otf") format("opentype");
	}

html, body
	{
		width:100vw;
		height:100vh;
		border:0;
		margin:0;
		font-family:Garamond, serif;
		font-size:18px;
		line-height:125%;
		hyphens:auto;
		-webkit-hyphens:auto;
		background-image:url(/media/street.jpg);
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
		background-attachment:fixed;
		background-color:rgb(25, 28, 36);
		overflow-x:hidden;
	}

p
	{
		margin:22px 0 0 0;
	}

.header
	{
		display:block;
		position:relative;
		width:calc(100vw - 40px);
		margin:125px auto 60px auto;
		text-align:center;
		color:white;
		hyphens:none;
		line-height:200%;
		z-index:99999999 !important;
	}

.top_box
	{
		display:block;
		top:0;
		left:0;
		width:100vw;
		background-color:darkred;
		padding:8px 20px 5px 20px;
		margin:0;
		text-align:right;
		color:white;
		box-sizing:border-box;
		font-size:14px;
		line-height:150%;
		hyphens:none;
		z-index:9999999999;
	}

#footer a
	{
		margin:0 10px;
	}

#overlay
	{
		position:fixed;
		width:100vw;
		height:100vh;
		text-align:center;
		top:0;
		left:0;
		z-index:999999999;
		background-color:rgba(0, 0, 0, 0.85);
		display:none;
	}

#query
	{
		width:500px;
		max-width:calc(100vw - 40px);
		border-radius:2px;
		border:0;
		outline:0;
		font-family:inherit;
		font-size:inherit;
		padding:20px;
		box-sizing:border-box;
	}

#hamburgermenu img
	{
		width:35px;
		margin:0 15px 15px 0;
		border:1px solid black;
		border-radius:20px;
	}

.top-gallery img
	{
		width:100%;
		aspect-ratio:1/1;
		border:0;
		outline:none;
	}

.top-gallery p
	{
		width:100%;
		height:30px;
		color:white;
		margin:5px 0 10px 0;
		text-align:center;
		font-size:12px;
		line-height:14px;
	}

.bottom-menu
	{
		position:relative;
		width:calc(100vw - 40px);
		margin:200px 0 0 0;
		padding:0 20px 125px 20px;
		text-align:center;
		letter-spacing:5px;
		font-size:14px;
		line-height:200%;
		hyphens:none;
	}

.top-menu
	{
		position:relative;
		width:calc(100vw - 40px);
		margin:0 0 0 0;
		padding:0 20px;
		text-align:center;
		letter-spacing:5px;
		font-size:14px;
		line-height:300%;
		hyphens:none;
	}

.top-menu div
	{
		display:inline-block;
		width:110px;
		text-align:center;
		line-height:125%;
		transform:translateY(7px);
		margin:0 5px;
	}

.checkbox input
	{
		position:relative;
		z-index:-9999;
	}

.checkbox span
	{
		margin-top:-25px;
		width:35px;
		height:35px;
		display:block;
		background:url("https://www.guetsel.de/pics/checkbox.png");
	}

.checkbox input:checked + span
	{
		background:url("https://www.guetsel.de/pics/checkbox-checked.png");
	}

.event
	{
		position:relative;
		display:inline-block;
		width:250px;
		height:250px;
		margin:0 0 50px 0;
		cursor:pointer;
		background-size:cover;
		background-position:center;
		box-shadow:5px 5px 15px 5px rgba(0, 0, 0, 0.75);
		transition:all 1s;
	}

.event:first-child
	{
    	z-index:1;
	}

.event:hover
	{
		transform:scale(150%) !important;
		z-index:9999999 !important;
	}

a, a:active, a:visited
	{
		color:white;
		text-decoration:none;
		opacity:1;
		transition:opacity 1s;
	}

a:hover
	{
		opacity:1;
		z-index:9999999 !important;
	}

#hamburgermenu a, a:visited, a:active
	{
		color:black;
		text-decoration:none;
		transition:color 1s;
	}

#hamburgermenu a:hover
	{
		color:darkred;
	}

#hamburgermenu p
	{
		margin:0 0 0 10px;
	}

#hamburgermenu
	{
		-ms-overflow-style:none;
		scrollbar-width:none;
	}

.hamburgermenu::-webkit-scrollbar
	{
		display: none;
	}

#filer
	{
		width:100%;
		height:150px;
		background-image:url(https://www.guetsel.de/pics/cloud.png);
		background-position:center; background-repeat:no-repeat;
		background-size:100px;
		padding:20px;
		font-size:0;
		text-align:center;
		margin-top:5px;
		cursor:pointer;
		display:inline-block;
		border-radius:3px;
		box-sizing:border-box;
		background-color:white;
		outline:none;
		-webkit-appearance:none;
	}

#filer:hover
	{
		background-color:lightgrey;
	}

::file-selector-button
	{
		display:none;
		visibility:hidden;
		position:absolute;
		-webkit-appearance:none;
		appearance:none;
	}

::file-upload-button
	{
		visibility:hidden;
		display:none;
	}

input[type=submit], input[type=reset], input[type=button]
	{
		line-height:100%;
		font-size:16px;
		color:#666666;
		width:120px;
		padding:10px;
		margin-right:20px;
		border:1px solid #9c9e9f;
		outline:0;
		background:transparent;
		border-radius:3px;
		background-color:white;
		transition:all 1s;
	}

input[type=submit]:hover, input[type=button]:hover
	{
		background-color:darkred;
		color:white;
	}

.bottom-menu a, a:active, a:visited
	{
		color:white;
		text-decoration:none;
		opacity:0.5;
		transition:opacity 1s;
	}

.bottom-menu a:hover
	{
		opacity:1;
	}

.header a, a:active, a:visited
	{
		color:white;
		text-decoration:none;
		opacity:1;
		transition:opacity 1s;
	}

.header a:hover
	{
		text-decoration:none;
		opacity:0.5;
	}

.content_columns h1, h2, h3
	{
		font-size:inherit;
		line-height:100%;
	}

.content_columns a, a:active, a:visited
	{
		color:white;
		text-decoration:underline;
		transition:color 1s;
	}

.content_columns a:hover
	{
		color:lightgray;
	}

.columns h1, h2, h3
	{
		font-size:inherit;
		line-height:100% !important;
	}

.columns a, a:active, a:visited
	{
		color:white;
		text-decoration:underline;
		transition:color 1s;
	}

.columns a:hover
	{
		color:lightgray;
	}

.wrapper
	{
		color:white;
	}

.dropdown
	{
		position:absolute;
		display:none;
		width:calc(100vw - 40px);
		margin:20px 20px 20px 20px !important;
		background-color:rgba(0, 0, 0, 0.75);
		padding:0 20px;
		box-sizing:border-box;
		border-radius:3px;
		color:white;
		z-index:9999999;
	}

.dropdown a, a:active, a:visited
	{
		color:white;
		text-decoration:none;
		opacity:1;
		transition:opacity 1s;
	}

.dropdown a:hover
	{
		text-decoration:none;
		opacity:0.5;
	}

.postit_wrapper table
	{
		border:0;
		border-collapse:collapse;
		font-family:Arial, sans-serif;
		font-size:7px;
		margin-left:-5px;
		margin-top:-5px;
		transform:rotate(6deg);
		line-height:100%;
		color:black;
	}

.postit_wrapper th
	{
		color:black;
		height:18px;
	}

.postit_wrapper td
	{
		width:12px;
		height:10px;
		text-align:center;
	}

.postit_wrapper td.marked
	{
		background-image:url(/pics/marker.webp);
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center;
		transition:0.5s;
	}

.postit_wrapper td.unmarked
	{
		background-color:transparent;
	}

.postit_wrapper td a
	{
		color:black;
		text-decoration:none;
		cursor:pointer;
	}

.postit_wrapper td.marked:hover
	{
		transform:scale(250%);
	}

.postit
	{
		transition:1s;
	}

.postit:first-child
	{
    	z-index:1;
	}

.postit_wrapper a, .postit_wrapper a:active, .postit_wrapper a:visited
	{
		color:black !important;
	}

#slider
	{
		width:1000px;
		max-width:100%;
		aspect-ratio:1000/125;
		box-sizing:border-box;
		overflow:hidden;
		border-radius:3px;
	}

#slider .slider
	{
		position: absolute;
	}

#slider .slider:nth-of-type(1)
	{
		animation-name:fader;
		animation-delay:2s;
		animation-duration:0.5s;
		z-index:20;
	}

#slider .slider:nth-of-type(2)
	{
		z-index:10;
	}

#slider .slider:nth-of-type(n + 3)
	{
		opacity:0;
	}

@keyframes fader
	{
		from
			{
				opacity:1;
			}
		to
			{
				opacity:0;
			}
	}

.social-media img
	{
		width:35px;
		cursor:pointer;
	}

.social-media img:hover
	{
		opacity:0.5;
	}

.social-media #termine
	{
		animation:icons 7s infinite linear;
	}

.social-media #cities
	{
		animation:icons 2s infinite linear;
	}

.social-media #culture
	{
		animation:icons 3s infinite linear;
	}

.social-media #facebook
	{
		animation:icons 5s infinite linear;
	}

.social-media #instagram
	{
		animation:icons 3s infinite linear;
	}

.social-media #linkedin
	{
		animation:icons 7s infinite linear;
	}

.social-media #post
	{
		animation:icons 3s infinite linear;
	}

.social-media #search
	{
		animation:icons 5s infinite linear;
	}

@keyframes icons
	{
		0%
			{
				transform:scale(1);
			}
		50%
			{
				transform:scale(0.9);
			}
		100%
			{
				transform:scale(1);
			}
	}

@media screen and (min-width:1290px)
	{
		#wrapper
			{
				width:calc(100vw - 290px);
				max-width:1000px;
				margin:20px 20px 0 270px;
			}

		#hamburgermenu h2
			{
				font-size:24pt;
				font-style:italic;
				margin-bottom:0;
				letter-spacing:3px;
			}

		#hamburgermenu h3
			{
				font-size:18pt;
				font-style:italic;
				margin-bottom:20px;
				letter-spacing:3px;
			}

		#logo-narrow
			{
				display:none;
			}

		#claim
			{
				display:block;
				width:100%;
				font-family:inherit;
				text-align:center;
				color:black;
				z-index:999;
				box-sizing:border-box;
			}

		#postits
			{
				width:100%;
				display:block;
				margin:50px 0 175px -25px;
			}

		.left-box
			{
				position:fixed;
				width:250px;
				background-color:rgba(255, 255, 255, 0.85);
				top:0;
				left:0;
				height:100vh;
				text-align:left;
				overflow-y:scroll;
				overflow-x:hidden;
				-ms-overflow-style:none;
				scrollbar-width:none;
			}

		.left-box::-webkit-scrollbar
			{
				display: none;
			}

		.bottom-box
			{
				display: none;
			}

		.social-media-text
			{
				display:inline-block;
				color:black;
				transform:translateY(-12px);
			}

		.social-media p
			{
				margin:10px 0;
			}

		.social-media img
			{
				width:35px;
				margin:0 15px 0 15px;
			}

		.headline
			{
				font-size:32pt;
				font-style:italic;
				font-family:inherit;
				letter-spacing:3px;
				font-weight:normal;
			}

		.postit_wrapper
			{
				display:flex;
				justify-content:left;
				flex-wrap:wrap;
				width:1100px;
				margin-left:-30px;
				padding-bottom:60px;
				overflow:hidden;
				margin-top:-80px;
				margin-bottom:-170px;
				position:relative;
				padding:50px 20px;
				box-sizing:border-box;
				z-index:9;
			}

		.postit:hover
			{
				position:relative;
				transform:scale(150%) !important;
				cursor:pointer;
				margin:-20px -30px 0 30px;
				display:block;
				z-index:9999999 !important;
				opacity:1 !important;
			}

		.blog-box
			{
				position:relative;
				display:block;
				width:calc((100% - 60px) / 3);
				height:300px;
				background-color:rgba(0, 0, 0, 0.5);
				margin-right:20px;
				margin-bottom:20px;
				float:left;
				border-radius:3px;
			}

		.gallery
			{
				width:calc((100% - 120px) / 6);
				float:left;
				margin-right:20px;
			}

		.top-gallery
			{
				width:calc((100% - 200px) / 10);
				float:left;
				margin-right:20px;
			}

		.columns
			{
				width:100%;
				max-width:1000px;
				column-count:3;
				column-gap:40px;
				column-rule:1px dotted silver;
				text-align:left;
				color:white;
			}

		div.columns > :first-child:is(p)
			{
				margin-top:0;
			}

		.content_headline
			{
				font-family:Garamond, serif;
				font-size:32pt;
				line-height:100%;
				font-weight:normal;
				font-style:italic !important;
			}

		.content_preview
			{
				width:100%;
				margin:0 0 25px 0;
				font-size:24px;
				line-height:125%;
				letter-spacing:5px;
			}

		.splash_preview_box, .splash_preview_box_gt
			{
				position:relative;
				min-width:calc((100% - 80px) / 5);
				aspect-ratio:1/2;
				margin-top:20px;
				border-radius:5px;
				cursor:pointer;
				transition:opacity 1s;
			}

		.splash_preview_box:hover
			{
				opacity:0.5;
			}

		.splash_preview_box_gt:hover
			{
				opacity:0.5;
			}

		.splash_preview_text
			{
				position:absolute;
				display:flex;
				margin-top:20px;
				aspect-ratio:1/1;
				padding:0;
				border-radius:5px;
				opacity:0.75;
				overflow:hidden;
				min-height:0;
				letter-spacing:3px;
			}

		.wrapper
			{
				width:1000px;
				margin:50px auto;
			}
	}

@media screen and (min-width:1001px) and (max-width:1289px)
	{
		#wrapper
			{
				width:calc(100vw - 105px);
				max-width:1000px;
				margin:20px 20px 0 85px;
			}

		#postits
			{
				width:100%;
				display:block;
				margin:50px 0 175px -25px;
			}

		.left-box
			{
				position:fixed;
				width:65px;
				background-color:rgba(255, 255, 255, 0.85);
				top:0;
				left:0;
				height:100vh;
				text-align:left;
				overflow-y:scroll;
				overflow-x:hidden;
				-ms-overflow-style:none;
				scrollbar-width:none;
			}

		.left-box::-webkit-scrollbar
			{
				display: none;
			}

		.bottom-box
			{
				display: none;
			}

		.social-media-text
			{
				display:none;
			}

		.social-media p
			{
				margin:0 0;
			}

		#hamburgermenu h2
			{
				font-size:18pt;
				font-style:italic;
				margin-bottom:0;
				letter-spacing:3px;
			}

		#hamburgermenu h3
			{
				font-size:14pt;
				font-style:italic;
				margin-bottom:20px;
				letter-spacing:3px;
			}

		#logo-wide
			{
				display:none;
			}

		#claim
			{
				display:none;
			}

		.social-media img
			{
				width:35px;
				margin:0 15px 15px 15px;
			}

		.content_headline
			{
				font-family:Garamond, serif;
				font-size:32pt;
				line-height:100%;
				font-weight:normal;
				font-style:italic !important;
			}

		.headline
			{
				font-size:32pt;
				font-style:italic;
				font-family:inherit;
				letter-spacing:3px;
				font-weight:normal;
			}

		.columns
			{
				width:100%;
				column-count:3;
				column-gap:40px;
				column-rule:1px dotted silver;
				text-align:left;
				color:white;
			}

		div.columns > :first-child:is(p)
			{
				margin-top:0;
			}

		.postit_wrapper
			{
				width:calc(100% + 40px);
				padding-bottom:60px;
				overflow:visible;
				margin-left:-40px;
				margin-bottom:0;
				padding:50px 20px;
				margin-top:-75px;
				text-align:center;
				box-sizing:border-box;
			}

		.postit:hover
			{
				position:relative;
				transform:scale(150%) !important;
				cursor:pointer;
				margin:-20px -100px 20px 0;
				display:block;
				z-index:9999999 !important;
				opacity:1 !important;
			}

		.blog-box
			{
				position:relative;
				display:block;
				width:calc(100% - 20px);
				height:auto;
				background-color:rgba(0, 0, 0, 0.5);
				margin-bottom:20px;
				border-radius:3px;
			}

		.content_headline
			{
				font-family:Garamond, serif;
				font-size:24pt;
				line-height:100%;
				font-weight:normal;
				font-style:italic;
			}

		.gallery
			{
				width:calc((100% - 120px) / 6);
				float:left;
				margin-right:20px;
			}

		.top-gallery
			{
				width:calc((100% - 200px) / 10);
				float:left;
				margin-right:20px;
			}

		.content_preview
			{
				width:calc(100vw - 40px);
				box-sizing:border-box;
				margin:0 0 25px 0;
				font-size:18px;
				line-height:125%;
				letter-spacing:5px;
			}

		.splash_preview_box, .splash_preview_box_gt
			{
				position:relative;
				min-width:calc((100% - 20px) / 2);
				aspect-ratio:1/2;
				margin-top:20px;
				border-radius:5px;
				cursor:pointer;
				transition:opacity 1s;
			}

		.splash_preview_box:hover
			{
				opacity:0.5;
			}

		.splash_preview_box_gt:hover
			{
				opacity:0.5;
			}

		.splash_preview_box_gt:last-child
			{
				display:none;
			}

		.splash_preview_text
			{
				position:absolute;
				font-size:12px;
				display:flex;
				margin-top:20px;
				aspect-ratio:1/1;
				padding:0;
				border-radius:5px;
				opacity:0.75;
				overflow:hidden;
				min-height:0;
				letter-spacing:3px;
			}

		.wrapper
			{
				width:calc(100vw - 80px);
				margin:50px 40px;
			}
	}

@media screen and (max-width:1000px)
	{
		#postits
			{
				width:120%;
				display:block;
				margin:50px 0 175px -10px;
			}

		#wrapper
			{
				width:calc(100vw - 40px);
				margin:20px 20px 0 20px;
			}

		#hamburgermenu h2
			{
				font-size:18pt;
				font-style:italic;
				margin-bottom:0;
				letter-spacing:3px;
			}

		#hamburgermenu h3
			{
				font-size:14pt;
				font-style:italic;
				margin-bottom:20px;
				letter-spacing:3px;
			}

		.left-box
			{
				display:none;
			}

		.bottom-box
			{
				position:fixed;
				width:100vw;
				background-color:rgba(255, 255, 255, 0.85);
				bottom:0;
				left:0;
				height:60px;
				display:flex;
				justify-content:space-between;
				padding:12px 40px 0 40px;
				box-sizing:border-box;
			}

		.bottom-box img
			{
				width:35px;
				margin:0 0 15px 0;
			}

		.social-media img
			{
				width:35px;
				margin:0 0 15px 0;
			}

		.headline
			{
				font-size:24pt;
				font-style:italic;
				font-family:inherit;
				letter-spacing:3px;
				font-weight:normal;
			}

		.columns
			{
				width:100%;
				max-width:1000px;
				text-align:left;
				color:white;
			}

		.postit_wrapper
			{
				width:calc(100% + 40px);
				padding-bottom:60px;
				overflow:visible;
				margin-left:-40px;
				margin-bottom:0;
				padding:50px 20px;
				margin-top:-75px;
				text-align:center;
				box-sizing:border-box;
			}

		.postit:hover
			{
				position:relative;
				transform:scale(150%) !important;
				cursor:pointer;
				margin:-20px -100px 20px 0;
				display:block;
				z-index:9999999 !important;
				opacity:1 !important;
			}

		.blog-box
			{
				position:relative;
				display:block;
				width:calc(100% - 20px);
				height:auto;
				background-color:rgba(0, 0, 0, 0.5);
				margin-bottom:20px;
				border-radius:3px;
			}

		.content_headline
			{
				font-family:Garamond, serif;
				font-size:24pt;
				line-height:100%;
				font-weight:normal;
				font-style:italic;
			}

		.gallery
			{
				width:calc((100% - 60px) / 3);
				float:left;
				margin-right:20px;
			}

		.top-gallery:nth-child(odd)
			{
				width:calc((100% - 100px) / 5);
				float:left;
				margin-right:20px;
			}

		.top-gallery:nth-child(even)
			{
				display:none;
			}

		.content_preview
			{
				width:calc(100vw - 40px);
				box-sizing:border-box;
				margin:0 0 25px 0;
				font-size:18px;
				line-height:125%;
				letter-spacing:5px;
			}

		.splash_preview_box, .splash_preview_box_gt
			{
				position:relative;
				min-width:calc((100% - 20px) / 2);
				aspect-ratio:1/2;
				margin-top:20px;
				border-radius:5px;
				cursor:pointer;
				transition:opacity 1s;
			}

		.splash_preview_box:hover
			{
				opacity:0.5;
			}

		.splash_preview_box_gt:hover
			{
				opacity:0.5;
			}

		.splash_preview_box_gt:last-child
			{
				display:none;
			}

		.splash_preview_text
			{
				position:absolute;
				font-size:12px;
				display:flex;
				margin-top:20px;
				aspect-ratio:1/1;
				padding:0;
				border-radius:5px;
				opacity:0.75;
				overflow:hidden;
				min-height:0;
				letter-spacing:3px;
			}

		.wrapper
			{
				width:calc(100vw - 80px);
				margin:50px 40px;
			}
	}