@charset "utf-8";

@font-face {
  font-family: "ITC Avant Garde Gothic";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/itcavantgardegothic500.woff2") format("woff2");
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/itcavantgardegothic400.woff2") format("woff2");
}



*{ padding:0;margin:0;border:none; }

body {
	width:100%;
	height: 100vh;
	margin:0 auto;
	background-color:#fafafa;
	font-family: ITC Avant Garde Gothic, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 17px;
	margin: 0 auto;
	padding: 0px;
	min-height:300px;
	line-height:1.2em;
}


header { display:block; background-color:#fff; padding:20px 40px; max-width:100%; text-align:center; border-bottom:1px solid #dfdfdf; } 
content { display:block; padding:0px 0px 40px 0px; max-width:100%; vertical-align:top; }
footer { 
	display:block; 
	width:calc(100vw);
	max-width:100%;
	background-color:#fff;
	padding:10px 0px 10px 5px;
	text-align:center;
	position:fixed;
	bottom:0px;
	z-index:20;
	user-select: none;
}

aside {
	display:inline-block;
	vertical-align:top;
	width:300px;
	min-height:calc(100vh - 268px);
	padding:70px 0px 20px 0px;
	background-color:#f4f4f4;

	box-shadow: rgba(0, 0, 0, 0.016) 0px 1px 4px 0px inset;
}
aside ul{ margin-left:40px; margin-right:5px; }

main{
	display:inline-block;
	/*margin-left:-4px;*/
	width:calc(100% - 342px);
	padding:40px 0 40px 0;
	margin-left: 35px;
	/*overflow-x:hidden;*/
}


h1, h2{ font-size:2.2em; font-weight:bold; padding:0 40px 12px 0; line-height:1em; text-transform:uppercase; max-width:1200px; }
h1{ font-size:2.2em; margin-top:70px; margin-bottom:100px; font-weight:bold; }
h3{ font-size:1.2em; font-weight:bold; padding:0 40px 8px 0; }
h1 small{ position:relative;top:-2px;left:2px;  }

main h2{
	/*min-width:calc(100% - 80px);*/
	max-width: 1324px;
	background-color:#eee;
	padding:100px 40px 100px 40px; 
	margin-bottom:40px; 
	display:block;
	margin-bottom:40px;
	overflow:hidden;
	margin-right:80px;
	margin-left:0px;

}
main h3{ padding-top:14px; }
h3.switch_button{ font-size:1em; font-weight:normal; }

p{ display:block; margin-bottom:15px; padding-right:40px; line-height:1.3em; font-size:98%; max-width:1200px; }

a:link {
	text-decoration:none;
	color:#09d;
	padding:1px 4px 1px 4px;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
}
a:visited { color:#666; }
a:hover, a:active { color: #999; }

img { 
	border: none;
	max-width:100%;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
}








/* Navigation */
#nav_container{
	left:0px;
	top:0px;
	width: 90px;
	height: 90px;
	display: inline-block;
	position: absolute;
	z-index:99;
	overflow: hidden;
	transition-duration: .3s;
	cursor: pointer;
}
nav{
	opacity:0;
	min-width:440px;
	max-width:100%;
	position: relative;
	transition-duration: .4s; 
	z-index:99;
}
nav ul{
	text-align: left;
}

#nav_container.nav_open_touch{
	position: fixed;
	background: rgba(240,240,240,.98);
	width:440px;
	height: auto;
	min-height: calc(100vh - 2px);
	overflow: visible;
	overflow-x: hidden;
	display: block;
}

#nav_container.nav_open_touch nav{
	opacity: 1;
}
#nav_container.nav_open_touch ul{
	width: calc(100% - 1px);
}
#nav_container.nav_open_touch li{ margin:0px; }
#nav_container.nav_open_touch a{ color:#000; }
#nav_container.nav_open_touch a:hover{ color:#999; }
#nav_container.nav_open_touch a.current{ font-weight:bold; }

#nav_switch_button{
	margin-top:20px;
	margin-left: 20px;
	width:60px;
	height:60px;
	user-select: none;
	transform-origin: 45px 45px;
    animation-duration: .25s;
    animation-name: rot0;
    animation-fill-mode: forwards;
    border:none;
    display:block;
}


@keyframes rot45 {
    to { transform: rotate(45deg); stroke: rgb(50, 50, 50); transform-origin: 6px 2px; }
}
@keyframes rot-45 {
    to { transform: rotate(-45deg); stroke: rgb(50, 50, 50); transform-origin: 17px 18px; }
}
@keyframes rot0 {
    to { transform: rotate(0deg); stroke: rgb(0, 0, 0); }
}
@keyframes hide {
    to { stroke: rgb(0, 0, 0,0); }
}

#nav_container.nav_open_touch #nav_l1{
	transform-origin: 14px 8px;
    animation-duration: 0.25s;
    animation-name: rot45;
    animation-fill-mode: forwards;
}

#nav_container.nav_open_touch #nav_l2{
	transform-origin: 15px 11px;
    animation-duration: 0.25s;
    animation-name: rot-45;
    animation-fill-mode: forwards;
}

#nav_container.nav_open_touch #nav_l3{
	transform-origin: 15px 15px;
    animation-duration: 0.25s;
    animation-name: hide;
    animation-fill-mode: forwards;
}

nav li:last-of-type{
	margin-top:30px;
}
nav li hr{ color:#ccc; margin-bottom:10px; margin-top:10px; }
nav a:link,
nav a:visited { background:transparent; display: block; font-size: 24px; text-decoration:none; padding:10px 50px 10px 70px; transition-duration: .4s; }
nav a:active,
nav a:hover{ background: transparent;  display: block; color: rgba(125,125,125,.75); }











/* System Messages */
.info{ display:block; color:#093; }
.error{ display:block; color:#930; }

#messages { max-height:300px; overflow-y:auto; }
#messages div p{ margin-bottom:0px; }
#messages div:last-of-type{ margin-bottom:50px !important; display:block; }





/* Docs */
#docslinks{ display:block; margin-bottom:10px; }
main input[type=submit],
a.button, .button
{
	display: inline-block;
	position:relative;
	cursor: pointer;
	color:#111;
	background: linear-gradient(0deg, #eee 50%, #fff 50%);
	background-size: 100% 200%;
	background-position: 0% -200%;
	transition-duration:0.25s;
	padding:15px 20px 15px 20px !important;
	text-transform:uppercase;
	letter-spacing:2px;
	font-size:70%;
	font-weight:bold !important;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20);
}
main input[type=submit]:hover,
a.button:hover, .button:hover{
	background-position: 0% -100%;
}

#docslinks a{ margin-right: 5px; margin-bottom: 5px; }




/* Image List */

.imglist div.im{
	min-width:160px;
	max-width: 320px;
	position:relative;
	display:inline-block;
	margin:5px 2px 0px 0px;
	padding:0px;
	/*border:1px solid #efefef;*/
	background-color:rgba(240, 240, 240, 0.5) !important;
	background:#ccc url(../img/transparent.png);
	overflow:hidden;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px 0px;
	min-height: 160px;
	text-align: center;
	vertical-align: top;
}
.imglist div.im.hide{
	display:none;
	margin:0px;
}
.im>a>img{ display:block; }

.imglist div.im,
.imglist div.im a{
	opacity: 1;
	transition-duration: 1s;
}
.imglist div.im.fadeout{
	opacity: 0;
	min-width:1px;
	width: 1px !important;
	max-width: 1px !important;
	overflow-x:hidden !important;
 }
.imglist div.im.fadeout a{min-width:160px;}
.imglist div.im.fadeout div{ display:none; }

.imglist a{ 
	position:relative;
	line-height:1em;
	margin:0px;
	padding:0px;
	border:0px;
}

.imglist div.im .preview{
	position:absolute; 
	bottom:5px;
	text-align: center;
	width:80%;
	margin:10px;
	display: block;
	background-color: rgba(255,255,255,0.7);
	font-size:66%;
}
.imglist div.im div{ text-align:left; }
.imglist>div>div{
	opacity:0;
	height:1px;
	position:absolute;
	bottom:4px;
	left:0px;
	padding:15px;
	width:calc(100% - 30px);
	color:#fff;
	background-color:rgba(33, 33, 33, 0.7); 
	display:inline-block; 
	font-size:80%;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
	overflow:hidden;
	z-index:10;
}
@media (hover: hover) {
	.imglist>div:hover>div{ 
		opacity:1;
		height:auto;
		animation: fadeInFromNone 0.25s ease-out;
	}
}


.imglist .extra_info{ display:none; }

.imglist>div>div>a.infoL_button:link,
.imglist>div>div>a.infoL_button:visited{
	position:relative;
	display:inline-block;
	margin-top:4px;
	margin-bottom:4px;
	border-radius:0px;
	padding:13px;
	color:#333;
	background-color:#fff;
	transition-duration: 200ms;
}
.imglist>div>div>a.infoL_button:hover{
	background-color:#ddd;	
}

.imglist .taglist{ max-height:46px; overflow:auto; overflow-x:hidden; }
#infoL .taglist{ display:block; margin-top:12px; }

/* File Info Tag-Links */
.imglist .taglist a:link,
.imglist .taglist a:visited,
#infoL .taglist a:link,
#infoL .taglist a:visited
{
	display:inline-block;
	color:#fff;
	font-size:80%;
	background-color:#666;
	border-radius:12px;
	padding:3px 5px 3px 5px;
	margin:2px;
}
.imglist .taglist a:hover,
#infoL .taglist a:hover{
	color:#ddd;
	background-color:#444;
}

#infoL{
	width:100%;
	max-width:100%;
	height:1px;
	height: 100vh;
	overflow:auto;

	position:fixed;
	display:block;
	top:0px;
	left:0px;
	text-align:center;
	z-index:50;

	font-family: ITC Avant Garde Gothic, Helvetica, Arial, sans-serif;
	font-size: 17px;
}
video{ margin-bottom:10px; /*max-height:calc(76vh - 60px);*/ }

.shake{ 
	transition-duration: 250ms;
	animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%   { left:0px; }
    10%  { left:10px; }
    20%  { left:-15px; }
    30%  { left:15px; }
    40%  { left:-10px; }
    50%  { left:7px; }
    60%  { left:0px; }
}

#zip_link{
	position:absolute;
	border-bottom: 2px solid #000;
	color:#000;
	display:inline-block;
	cursor: pointer;
	margin-top:3px;
	right:20px;
	width:22px;
	height:24px;
	background:transparent url(/img/icon_download.svg) no-repeat center; /* /img/icon_zip_download.png */
	background-size:contain; 
	background-position: center -5px;
	transition-duration: 0.4s;
	color:rgba(255,255,255,0.01);
	/*overflow: hidden;*/
}
#zip_link:hover{
	animation: download 0.4s ease-in-out;
}
#zip_link.deactivated{
	opacity: 0.3 !important;
}
#zip_link strong{
	position: absolute;
	width:auto;
	min-width:240px;
	padding: 5px;
	margin-top:-4px;
	right:30px;
	text-transform:none;
	font-size: 14px;
	color:#999;
	text-align:right;
	transition-duration: 0.2s;
	opacity:0.01;
}

#zip_link:hover strong{
	display: block;
	opacity:1;
	min-width:260px;
	background-color:#fafafa;
}

@keyframes download {
    0%   { background-position: center -6px; }
    50%  { background-position: center  0px; }
    100% { background-position: center -6px; }
}

/*#infoL{max-height:calc(100vh - 100px);}*/
#infoL>div{
	position:relative;
	width:970px;
	max-width:98%;
	display:inline-block;
	text-align:left;
	vertical-align:top;
	margin:60px auto;
	background-color:rgba(33, 33, 33, 0.95);
	padding:80px;
	transition-duration: 200ms;
}

#infoL div div{
	color:#fff;
	display:inline-block;
	vertical-align:top;
	/*padding:20px;*/
}
#infoL img{ max-height:600px; max-width:100%; }

#infoL strong{ display:block; margin-bottom:10px; }

#infoL .download_links_cont{ background-color:#000; padding:20px; margin-bottom:10px; }
#infoL .download_links_cont a{ display:block; margin-top:10px; margin-bottom:10px; }

#infoL .close_button{
	position:absolute;
	cursor:pointer;
	top:20px;
	right:20px;
	padding:10px 13px 10px 13px;
	color:#333;
	background-color:#fff;
	transition-duration: 200ms;
	z-index:100;

	box-shadow: rgba(33, 33, 33, 0.5) 0px 5px 10px;
}

.close_button:hover{
	background-color:#ddd;	
}

#infoL #previewImgCont{     position:relative; display:inline-block; padding:0px !important; background:#ccc url(../img/transparent.png); max-width:740px; } 
#infoL #previewImgCont img{ 
	position:relative; display:inline-block; 
	margin-bottom:-5px !important;
}

#fileInfos{ 
	display: inline-block;
	width:200px;
	margin-right:30px;
}
#fileInfos .extra_info span{ min-width:40%; }
#fileInfos .product_number{ max-height:160px !important; overflow-y:auto !important;  } 
#fileInfos .material{ max-height:120px !important; overflow-y:auto !important;  }
#fileInfos .extra_info span.label{ color:#aaa; }


body #button_more_imgs{
	display:block;
	width:calc(100% - 40px);
	padding:15px 20px 15px 20px;
	color:#111;
	text-align:center; 
	margin-top:20px;
	margin-bottom:20px;
	background-color:#ddd;
	cursor:pointer;
	transition-duration: 400ms;
	transition-timing-function: ease-out;
	user-select:none;
}
body #button_more_imgs:hover{ background-color:#aaa !important; }


footer a:link, footer a:visited, footer a:active { font-size:14px; color:#111; text-decoration: none; margin-right:10px; }
footer a:hover { color:#999; background:transparent; }
footer .indexsize{ font-size:14px; color:#aab; }

img.fadeIn{
	display:block;
	opacity:1;
	transition-duration: 400ms;
	animation: fadeInFromNone 0.25s ease-out;
}


hr { border:none; border-bottom: 1px solid #ccc; height: 1px; }

li{ display:block; }

#logo{
	display:inline-block;
	background: url(../img/logos/gravity-sports-group-logo.jpg) left no-repeat;
	background-size: contain;
	background-position: center center;
	height:55px;
	min-width:300px;
	margin:auto;
	position: relative;
}

#logo.oneal{
	background: url(../img/logos/oneal-logo_390x.avif) left no-repeat; /* oneal_logo_2024.png */
	background-size: contain;
	background-position: center center;
	height:55px;
}
#logo.kini-red-bull{
	background: url(../img/logos/KiniRB-Logos-2022.avif) left no-repeat; /* kini_red_bull_logo.png */
	background-size: contain;
	height:55px;
	background-position: center center;
}
#logo.one-industries{
	background: url(../img/logos/oneindustries_logo.svg) left no-repeat;
	background-size: contain;
	background-position: center center;
	height:45px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#logo.azonic{
	background: url(../img/logos/azonic_logo.png) left no-repeat;
	background-size: contain;
	background-position: center center;
	height:45px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#logo.moveo{
	background: url(../img/logos/moveo_logo.png) left no-repeat;
	background-size: contain;
	background-position: center center;
	height:45px;
	margin-top: 5px;
	margin-bottom: 5px;
}


header.kini-red-bull{ background:#0A1C2B; } /* #DB0A40 #CA2C31 */



main .hide{ display:none; opacity:0; }
aside ul.hide li{ display:none; opacity:0; }
aside ul.hide li.current{ display:inline-block; opacity:1; }
aside ul li.current span{ display:inline-block; position:relative; top:-1px; opacity:0.65; margin-left:2px; font-size:70%; } /* X */


/* Suche Form */
#suche{ display:block;margin-bottom:20px; text-align:center; margin-left: 40px; margin-right:50px; user-select:none; }
#suche svg{ position:relative; top:4px; margin-right:4px; }
#suche form{ position:relative; display:inline-block; padding-right:0px; margin-right:0px;   }

#suche input[type=text]{
	display:inline-block;
	color:#666;
	width:129px;
	max-width:400px;
	padding:4px 40px 4px 4px; 
	font-size:20px;
	background-color:#fff;
	border:none;
	/*border:1px solid #aaa;*/
	/*border-radius:4px;*/
	margin:0px;
	user-select:auto;
}
#suche input[type=submit]{ 
	position:absolute;
	display:inline-block;
	top:0px;
	right:0px;
	line-height:18px;
	background:transparent url(/img/icon-lupe.svg) no-repeat center;
	background-size:56%; 
	width:38px;
	height:32px;
	font-size:4px;
	color:rgba(255, 255, 255, 0);
	/*border-radius: 4px;*/
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}
#suche input[type=submit]:hover{ background-color:#efefef; }
input:focus{
    outline: none;
}



/* Filter */
aside h2{ font-size:1.4em; }
aside ul{ padding-bottom:10px; animation: fadeInFromNone 0.28s ease-out; }


content #cat li{}
content .items li{ 
	font-size:85%;
	display:inline-block;
	background-color:#ddd;
	border-radius:14px;
	padding:3px 5px 3px 5px;
	margin:2px;
}
content .items li a:link,
content .items li a:visited{ color:#111; transition-duration: 10ms; word-break: break-all; }
content .items .current{ background-color:#111; padding:3px 5px 2px 5px; }
content .items .current a,
content .items .current a:visited{ color:#fff !important; font-weight:bold; }
content .items li:hover a{ color:#fff; }
content .items li:hover { background-color:#888; color:#fff; }
content #cat .current a:link{ font-weight:bold; text-decoration:underline; }

.switch_button{  
	cursor:pointer;
}
.switch_button:hover{
	color:#888;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
	/*pointer-events: none;*/
}
#filter{
	user-select: none;
	margin-top:40px;
	margin-left: 40px;
	margin-bottom:15px; 
	/*animation: fadeInFilter 0.8s ease;*/
	max-height:none;
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .3s .25s;
}

#filter.hide{
	overflow:hidden;
	max-height:1px;
	/*display:none;*/
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .3s .25s;
}
#filter ul{ margin-left:0px; padding-left:0px; }

#filter_switch{
	position:absolute;
	top:0px;
	left:0px;
	cursor:pointer;
	user-select: none;
}










/* Startseite / Pages */
main>#headerImage{
	position:relative;
	background-size:cover;
	background-position: center center;
	background-repeat:no-repeat;
	display:block;
	height:540px;
	max-height:33%;
	width: calc(100% + 34px);
	/*max-width: 100%;*/
	top:-40px;
	left:-40px;
	margin-bottom:40px;
	/*overflow:hidden;*/
}

.imglink{
	position:relative;
	left:-10px;
	display:inline-block;
	margin-bottom:40px;
	overflow:hidden;
	margin-right:10px;
	margin-left:10px;
	background-color: #efefef;
	background: linear-gradient(45deg, rgba(245, 245, 245, 1) 0%, rgba(230, 230, 230, 0.5) 100%);
}

.imglink a{
	position:relative;
	display:block;
	height:220px;
	min-width:calc(100% - 40px);
	max-width:400px;
	padding:20px;
	margin-right:10px;
	background-size:cover;
	background-position: center center;
	background-repeat:no-repeat;
}

.imglink span{
	position:absolute;
	left:40px;
	bottom:40px;
	background-color:#fff;
	background: linear-gradient(0deg, #eee 50%, #fff 50%);
	background-size: 100% 200%;
	background-position: 0% -200%;
	transition-duration:0.25s;
	padding:15px 20px 15px 20px;
	color:#111;
	text-transform:uppercase;
	letter-spacing:2px;
	font-size:70%;
	font-weight:bold !important;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

	max-width: 90% !important;
	margin-right:20px;
}
.imglink span:hover{
	background-position: 0% -100%;
}

.imglink a:hover {
    transform: scale(1.03,1.03);
    transition: all 0.25s ease;
}
.imglink a:hover span{
    transform: scale(0.97,0.97);
    transition: all 0.25s ease;
}

.half{ width:calc(48% - 32px); max-width:690px; }
.third{ width:calc(32% - 30px); max-width:452px; }
.full{ width:calc(99% - 82px); max-width:1400px; }
/*div.imglink.half:nth-child(2n-1){ margin-left:40px; }
div.imglink.third:nth-child(3n-4){ margin-left:40px; }*/


.center{ 
	display:block; 
	text-align:center; 
	width:calc(100% - 40px);
	/*width:100%; max-width:1300px;*/  
	padding-top:40px; 
	padding-bottom:40px; 
}
.button_black,
.button_black:link,
.button_black:visited{
	font-size:80%;
	text-transform:uppercase;
	display: inline-block;
	padding:15px 40px 15px 40px !important;
	color:#fff;
	background-color:#111;
	transition: all 0.3s ease-in-out;
}

.button_black:hover{
	background-color:#111;
	background-color:#333;
}

video{ max-width:100%; }







/* File-Infos einblenden */
@keyframes fadeInFromNone {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* Filter-Optionen einblenden */
@keyframes fadeInFilter {
    1% {
    	position:relative;
    	margin-bottom:-200px;
        opacity: 0;
        height:auto;
    }

    25% {height:200px;}


    60% {
        opacity:0;
        margin-bottom:0px;
    }

    100% {
        opacity: 1;
    }
}








	
/* Break Points */
@media screen and (max-width: 1199px) {
	#nav_switch_button{
		margin-top:0px;
		margin-left:0px;
	}

	h1, h2{ font-size:112%; margin:20px 0px 20px 0px; position: relative; max-width:100%; }
	h3{ font-size:94%; margin-bottom:4px; padding-bottom:0px; }

	h1, h2, h3, p { padding-left:0px; max-width:calc(100% - 15px); } /* Abstand links */

	main h2{ left:-40px; width:calc(100% - 40px); }

	header{
		text-align:center;
		padding:15px 10px 13px 10px;
		margin:0px;
	}
	content{
		max-width:none;
	}
	aside{
		overflow-x:hidden;
		display:block;
		min-height:auto;
		width:auto;
		padding:20px 10px 3px 10px;
		min-height:60px;
	}
	aside ul{ padding-bottom:5px; }
	main{
		display:block;
		width:calc(100% - 40px);
		padding:20px 0px 40px 0px;
	}
	main>#headerImage{
		width: calc(100% + 36px) !important;
	}

	#logo{
		height:30px !important;
		min-width:110px !important;
	}

/*#logo.oneal{
	height:55px;
	min-width:300px;
}*/

	#suche{
		text-align: center;
		min-width:calc(100% - 70px); 
		margin-right:70px;
	 	position:absolute;
	 	z-index:20;
	 }

	#filter{ position:relative; margin-top:1px; top:-12px; }
 
 	.imglist{ padding-left:0px; }
	.imglist img{  
		/*max-height:160px;*/
	}

	.imglist a>div{ 
		/*max-width:calc(100% - 20px);*/
	}

	.imglist div>div{ 
		font-size:90%;
		padding:10px;
		width:calc(100% - 20px);
	}

	.imglink{
	min-width:calc(100% - 30px);
	max-width:none;
	margin-right:0px;
	}

	/*.imglist img { max-width:90%; max-height:70%; }*/
	#infoL{ height:100%; overflow:auto; }

	#infoL>div{
		margin-top:40px;
		padding-left:10px;
		padding-right:10px;
	}
	#infoL>div>div{
		padding:10px 5px 10px 5px;
	}
	#fileInfos{
		font-size:94%;
	}
	#infoL #previewImgCont{ max-width:97%;  }
}









@media screen and (max-width: 900px) {
	#filter{ margin-left: 10px; }
	#filter ul{ margin-bottom:12px;}
	main{ text-align:center; 
		width:100%;
		padding-right:0px;
		margin-left: 0px;
	}
	main>#headerImage{
		width: calc(100% - 8px) !important;
		left:0px;
	}

	main h1, main h2, main h3{ text-align:left; width:calc(100vw - 15px) !important; max-width:none; padding-left:10px; word-break: break-all;}
	main h2{ left:0px; width:auto; }
	main p{ text-align:left; width:calc(100% - 15px); }
	
	h1, h2, h3, p{ padding-right:5px; }
	h1, h2, h3, p { margin-left:0px; padding-left:10px; } /* Abstand links */


	#filter_switch{ margin-right:20px !important; }
	#infoL>div{
		margin-top:0px;
	}

	.imglink{
		left:0px;
		display:block;
		margin-bottom:40px;
		margin-right:0px;
		margin-left:0px;
	}
	.half{ width:100%; max-width:100%; margin-left:0px; }
	.third{width:100%; max-width:100%; margin-left:0px; }
	.full{ width:100%; max-width:100%; margin-left:0px; display: block;}
	.full a{ background-position:right;  }
	/*div.imglink.half:nth-child(2n-1){ margin-left:0px; }
	div.imglink.third:nth-child(3n-4){ margin-left:0px; }*/


	#infoL div, #fileInfos{ padding-top:10px;width:auto; display:block; }
	#infoL .download_links_cont{ width:auto; padding:10px; }
	#infoL .download_links_cont a{ width:auto; display:inline-block; margin-right:10px; margin-bottom:5px; }
}




@media screen and (max-width: 640px) {
  .imglist div.im{ margin:0px; max-width:43% !important; }
  .imglist>div{ 
  	
  }
}




@media screen and (max-width: 420px) {
	#filter h2{ visibility:hidden; }
	/* #suche{ left:50px; } */
}




@media (hover: none) {
	.imglist>div{ 
		background-color:#ccc !important;
		padding-top:10px !important;
		padding-bottom:10px;
		margin-bottom:10px;
		max-width:300px;
		text-align:center; 
	}
	#docslinks{
		background-color:#fff !important;
		max-width:100%;
		text-align:left; 
	}

	.imglist div.im{ background:transparent; text-align:center; margin-right:auto; margin-left:auto; }
	.imglist>div>div{ position:relative; height:auto; opacity:1; margin:0px; color:#333; background-color:transparent; max-width:90%; }
	.imglist>div>div>a.infoL_button:link,
	.imglist>div>div>a.infoL_button:visited{
		color:#333;
		background-color:#ccc;
		transition-duration: 200ms;
	}
	.imglist div.im .preview{
		display: none;
	}

	h1{ margin-bottom:50px; }
	#zip_link strong{ display:inline-block; opacity:1; margin-top:24px; right:-5px }

	
	body main div.hide{ max-height:0px; display:none !important; }
}





/* Height < 800 */
@media screen and (max-height: 800px) {
	#infoL>div{ 
		padding-top:10px;
		margin-top:0;
		margin-bottom:0;
		height:calc(100vh);
		overflow-y:auto;
	} 
	#infoL img{ max-height:calc(100vh - 20px); margin-bottom:10px; }

	/*#infoL div, #fileInfos{ padding-top:10px; }*/
	#infoL .download_links_cont{ padding-top:10px; }
	#infoL .download_links_cont a{ margin-bottom:5px; }
}








@media (prefers-color-scheme: dark) {
}