@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:22px;
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;
}
#overlay
{
position:fixed;
width:100vw;
height:100vh;
text-align:center;
top:0;
left:0;
z-index:999999999;
background-color:rgba(0, 0, 0, 0.75);
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;
}
.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;
}
.top-menu a, .top-menu a:active, .top-menu a:visited
{
color:white;
text-decoration:none;
opacity:0.5;
transition:opacity 1s;
}
.top-menu 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;
}
#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
{
display:block;
position:relative;
width:1000px;
max-width:100%;
aspect-ratio:1000/125;
box-sizing:border-box;
overflow:hidden;
border-radius:3px;
}
#slider .slider
{
position: absolute;
}
.social-media
{
display:block;
width:calc(100vw - 40px);
position:relative;
margin:-50px auto 20px auto;
text-align:center;
z-index:99999999;
}
.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:1040px)
{
#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;
}
.social-media img
{
width:35px;
margin:0 15px 15px 15px;
}
.headline
{
font-size:32pt;
line-height:125%;
font-style:italic;
}
.content-wrapper
{
position:relative; width:1000px; max-width:calc(100vw - 40px); margin:150px auto 0 auto; color:white; text-align:left;
}
.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);
}
.content_columns
{
width:100%;
max-width:1000px;
column-count:3;
column-gap:40px;
column-rule:1px dotted silver;
}
.content_columns p:first-child
{
margin-top:0;
}
.columns
{
width:100%;
max-width:1000px;
column-count:3;
column-gap:40px;
column-rule:1px dotted silver;
}
.columns p:first-child
{
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 (max-width:1039px)
{
#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;
}
.social-media img
{
width:35px;
margin:0 15px 15px 15px;
}
.headline
{
font-size:18pt;
line-height:125%;
font-style:italic;
}
.content-wrapper
{
position:relative; width:calc(100vw - 40px);
margin:150px 0 0 -40px;
color:white;
text-align:left;
}
.content_columns
{
width:calc(100% + 80px);
margin-left:-40px !important;
}
.columns
{
width:100%;
}
.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);
}
.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;
}
}