/* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('/clips/fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */ src: local('Open Sans Light'), local('OpenSans-Light'), url('/clips/fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('/clips/fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/clips/fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-300italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('/clips/fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url('/clips/fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('/clips/fonts/open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/clips/fonts/open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('/clips/fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */ src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/clips/fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-600italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('/clips/fonts/open-sans-v15-latin-600italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'), url('/clips/fonts/open-sans-v15-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('/clips/fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */ src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('/clips/fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('/clips/fonts/open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('/clips/fonts/open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-800 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('/clips/fonts/open-sans-v15-latin-800.eot'); /* IE9 Compat Modes */ src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('/clips/fonts/open-sans-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-800.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } /* open-sans-800italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('/clips/fonts/open-sans-v15-latin-800italic.eot'); /* IE9 Compat Modes */ src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url('/clips/fonts/open-sans-v15-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/clips/fonts/open-sans-v15-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-800italic.woff') format('woff'), /* Modern Browsers */ url('/clips/fonts/open-sans-v15-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/clips/fonts/open-sans-v15-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */ font-display: swap; } body { background: #4C4C4C; color: #CECECE; font-family: 'Open Sans', arial, helvetica, sans-serif; font-size: 12pt; margin: 0px; padding: 0px; } * { font-family: 'Open Sans', arial, helvetica, sans-serif; font-size: 12pt; } /* Links */ a, a:link, a:visited, a:active { color: #CECECE; background: transparent; font-size: 12pt; text-decoration: none; } a:hover { color: #EEEEEE; } a.menu { color: #CECECE; background: black; font-size: 11pt; text-decoration: none; display:inline-block; padding:8px 8px 0 8px; } a.menu:hover { color: #EEEEEE; } /* Überschriften */ h1 { font-size: 14pt; font-weight: bold; } h1#startseiteaktuelles { background: #6C6C4C; padding: 10px; } h2 { font-size: 13pt; font-weight: bold; } h3 { font-size: 12pt; font-weight: bold; } /* Überschrift für Impressum (muss gesetzt werden!) */ h2.impressum { font-size: 11pt; font-weight: bold; } /* Normale Texte */ span.normal { font-size: 12pt; } span.normalbold { font-weight: bold; font-size: 12pt; } span.small { font-size: 10pt; } span.smallbold { font-weight: bold; font-size: 10pt; } span.impressum { font-size: 10pt; } img.normal{ border-bottom: 30px solid #6C6C4C; } img.baum{ border:0; } div#bottom_line2{ position: relative; width: 100%; height: 1px; background:white; margin-bottom: 20px; } div.maintitle {} @media (max-width: 600px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 900px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 1800px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 900px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 1800px) and (orientation:portrait) { div.maintitle { display: none; } } #lightbox{ position: absolute;left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #lightboximageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(/clips/lightboximages/prev.png) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/clips/lightboximages/next.png) right 15% no-repeat; } #imageDataContainer{ font:10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; } #imageData{padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #lightboxoverlay{ position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 100%; background-color: #000; } .imageDataAppear { animation: lightboxFlutsch 600ms 1; -webkit-animation: lightboxFlutsch 600ms 1; } @-webkit-keyframes lightboxFlutsch { from {opacity:0; } to {opacity:1;} } @keyframes lightboxFlutsch { from {opacity:0;} to {opacity:1;} } .imageDataOut { opacity:0;} a.magictel { pointer-events: none; cursor:text; text-decoration:none; } img.pic_right{ position: relative; float: right; margin: 0px 0px 20px 20px; } @media (max-width: 600px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 900px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 1800px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 900px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 1800px) and (orientation:portrait) { img.pic_right{ display: block; float: none; } } div.baum_info{ position: relative; width: 100%; background: #6C6C4C; display: flex; flex-wrap: wrap; } div.baum_pic{ position: relative; width: 200px; background: #5C5C3C; } div.baum_pic img{ vertical-align: bottom; width: 100%; height: auto; } div.baum_content{ position: relative; width: calc(100% - 200px); } @media (max-width: 600px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 900px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 1800px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 900px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 1800px) and (orientation:portrait) { div.baum_content{ width: 100%; } } div.baum_content_title{ padding:28px 10px 12px 30px;background:#5C5C3C;margin-bottom:20px;margin-top:0px;font-size:20pt; } div.baum_content_content{ padding: 0px 20px 20px 30px; } div#mymap { filter: saturate(0.3); } div#header_container{ position: relative; width: 100%; } div#header_top{ position: relative; width: 100%; z-index: 5; background: url('/clips/ruheberg-oberried.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 200px; } div#header_top img{ vertical-align: bottom; } div#top{ position: absolute; left: 0px; bottom: 0px; width: 100%; background: rgba(255, 255, 255, 0.6); } div#top img{ vertical-align: bottom; } div#top_title{ position: relative; width: 100%; max-width: 800px; margin: 0px auto 0px auto; text-align:left; color:#4d4d4d; font-size: 14pt; padding: 10px; box-sizing: border-box; } div#headmenu_container{ position: relative; width: 100%; background: black; } @media (max-width: 800px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1600px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 2000px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 2400px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1600px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 2000px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 2400px) and (orientation:portrait) { div#headmenu_container{ height: 40px; } } div#headmenu{ position: relative; width: 100%; max-width: 950px; text-align: right; padding: 8px 10px 8px 0px; margin: 0px auto 0px auto; box-sizing: border-box; } @media (max-width: 800px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1600px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 2000px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 2400px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1600px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 2000px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 2400px) and (orientation:portrait) { div#headmenu{ display: none; } } div#head_pic2_container{ position: relative; width: 100%; background: url('/clips/ruheberg-oberried-2.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100px; } div#letzte_ruhe_container{ position: relative; width: 100%; } div#letzte_ruhe{ position: relative; max-width: 800px; width: 100%; margin: 0px auto 0px auto; text-align: right; padding: 20px 20px 30px 20px; box-sizing: border-box; font-size:10pt; } div#berglinie{ position: absolute;bottom: 0px; } div#content_container{ position: relative; width: 100%; padding-top: 20px; } div#content{ position: relative; max-width: 800px; width: 100%; margin: 0px auto 0px auto; line-height: 1.5em; padding: 20px 30px 20px 60px; box-sizing: border-box; } @media (max-width: 600px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 900px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 1800px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 900px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 1800px) and (orientation:portrait) { div#content{ padding: 20px 40px 20px 40px; } } div#footer_container{ position: relative; width: 100%; padding-bottom: 30px; background: #6C6C4C; margin-top:50px; } div#footer_line{ position: relative; width: 100%; height: 20px; background: white; } div#footer_menu{ position: relative; width: 100%; max-width: 800px; margin: 0px auto 0px auto; line-height: 1.5em; display: flex; flex-wrap: wrap; padding: 20px 30px 20px 60px; box-sizing: border-box; } @media (max-width: 600px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 900px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 1800px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 900px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 1800px) and (orientation:portrait) { div#footer_menu{ padding: 20px 40px 20px 40px; } } div#footer_menu > div:first-child{ width: calc(100% - 300px); } @media (max-width: 600px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 900px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 1800px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 900px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 1800px) and (orientation:portrait) { div#footer_menu > div:first-child{ width: 100%; } } div#footer_menu > div:last-child{ text-align: right; width: 300px; } @media (max-width: 600px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 900px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 1800px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 900px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 1800px) and (orientation:portrait) { div#footer_menu > div:last-child{ width: 100%; margin-top: 20px; text-align: right; } } div.gedenk_left{ position: relative; width: 350px; float: left; } @media (max-width: 750px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1125px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1875px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 2250px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 1125px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1875px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 2250px) and (orientation:portrait) { div.gedenk_left{ width: 100%; float: none; } div.gedenk_left img { display:block; margin:20px auto 0 auto; } } div.gedenk_left table{ width: 100%; max-width: 400px; } div.gedenk_left table td{ border-bottom: 1px solid black; padding: 5px; } div.gedenk_right{ position: relative; float: right; width: calc(100% - 400px); min-height: 300px; } @media (max-width: 750px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1125px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1875px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 2250px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 1125px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1875px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 2250px) and (orientation:portrait) { div.gedenk_right{ width: 100%; float: none; margin-top: 40px; } } div.gedenk_nav{ position: relative; width: 100%; display: flex; flex-wrap: wrap; margin: 0px 0px 20px 0px; } div.gedenk_nav a{ display: block; width: calc(33% - 2px); text-align: center; padding: 5px; box-sizing: border-box; background: #333; border: 1px solid #4C4C4C; margin: 1px; font-size:9pt; } div.gedenk_nav a:hover{ background: black; } div.gedenk_nav a.active{ background: black; color: white; } div#lage_container{ position: relative; width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 20px; align-items: flex-start; } div#lage_container > img{ width: 350px; height: auto; } div#lage_content{ width: calc(100% - 350px); padding: 20px; box-sizing: border-box; } @media (max-width: 750px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1125px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1500px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 1875px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 2250px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 1125px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1500px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 1875px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 2250px) and (orientation:portrait) { div#lage_content{ width: 100%; padding: 20px 10px 20px 10px; } } div#mobile_nav{ display: none; } @media (max-width: 800px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1200px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1600px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 2000px) and (orientation:portrait), (-webkit-min-device-pixel-ratio: 3) and (max-width: 2400px) and (orientation:portrait), (min-resolution: 1.5dppx) and (max-width: 1200px) and (orientation:portrait), (min-resolution: 2.0dppx) and (max-width: 1600px) and (orientation:portrait), (min-resolution: 2.5dppx) and (max-width: 2000px) and (orientation:portrait), (min-resolution: 3.0dppx) and (max-width: 2400px) and (orientation:portrait) { div#mobile_nav{ position: fixed; display: block; top: 0px; left: 0px; width: 100%; background: #56667A; z-index: 95; text-align: left; box-shadow: 0px 6px 18px -3px rgba(0,0,0,0.3); padding:4px; } div#mobile_nav a{ position: relative; display: block; float: left; } div#mobile_nav a#mobile_m{ float: right !important; padding-right: 5px; } div#mobile_nav a#mobile_m img{ height: 20px; margin-top: 6px; } div#mobile_nav img{ border: 0; vertical-align: bottom; height: 22px; width: auto; margin: 5px 8px 5px 8px; } } a.mobile:link, a.mobile:visited, a.mobile:active, a.mobile:hover { color: white; background: transparent; border-bottom: 1px solid black; font-size: 12pt; text-decoration: none; display: block; padding: 6px; } a.mobile:hover { color:white; background-color: black; } a.mobile_lvl2{ padding-left: 30px !important; }