HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/EvLuik/vanluiktegelwerken.nl/wwwroot/templates/richu172_2/stylesheet.css
/* fonts */
/* tenor-sans-regular - latin */
/* tenor-sans-regular - latin */
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Tenor Sans'), local('TenorSans'),
       url('fonts/tenor-sans/tenor-sans-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/tenor-sans/tenor-sans-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('fonts/roboto-condensed/roboto-condensed-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed/roboto-condensed-v18-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('fonts/roboto-condensed/roboto-condensed-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed/roboto-condensed-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
       url('fonts/roboto-condensed/roboto-condensed-v18-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed/roboto-condensed-v18-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
       url('fonts/roboto-condensed/roboto-condensed-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed/roboto-condensed-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* fonts */
* {padding: 0; margin: 0;
}  
#body{  
padding-left: 0; 
padding-right: 0; 
background-color: #808080;
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: 100% 100%;
overflow-x: hidden;
}
body {
line-height: 1.5;
font-size: 1rem;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
color: #000;
}
a:link {
color: #00F;
text-decoration: none;
}
a:visited {
color: #00F;
text-decoration: none;
}
a:focus {
color: #00F;
text-decoration: none;
}
a:hover {
color: #F00;
text-decoration: none;
}
a:active {
color: #00F;
text-decoration: none;
}
/* Überschriften von h1 bis h6 Start */
h1, h2, h3, h4 , h5, h6 {
font-family: 'Tenor Sans';
font-weight: 400;
margin: 0 0 10px;
}
h1 {
font-size: 2rem;
color: #00F;/* Überschrift-Farbe */
text-transform: uppercase;/* Wendet die Grossschreibung auf alle Zeichen an. */
text-shadow: 4px 4px 0px rgba(255,  255,  255,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
h2 {
font-size: 2rem;
color: #00F;/* Überschrift-Farbe */
}
h3 {
font-size: 1.8rem;
color: #F00;/* Überschrift-Farbe */
text-shadow: 4px 4px 0px rgba(255,  255,  255,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
h4 {
font-size: 1.6rem;
color: #090;
}
h5 {
font-size: 1.4rem;
color: #000;/* Überschrift-Farbe */
text-shadow: 4px 4px 0px rgba(255,  255,  255,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
h6 {
font-size: 1.2rem;
color: #060;/* Überschrift-Farbe */
text-shadow: 4px 4px 0px rgba(255,  255,  255,  0.9),7px 7px 5px rgba(0, 0, 0, 0.1);
}
/* Überschriften von h1 bis h6 Start */
body.print {
margin-top: 20px;
margin-left: 20px;
background-color: #FFF;
background-image: none;
text-align: left;
overflow-x: hidden;  /* Fehler Drucken, Scrollbalken horizontal erscheint, Firefox, Chrome, Edge, Opera. */ 
}
/* Button Sichern Start */
input[type=submit] {
width: auto;
font-size: 1rem;
color: #FFF;
font-weight: 600;
cursor: pointer;
background: #F00;
margin: 30px 10px;
padding: 5px 20px ;
border: 1px solid #000;
}
/* Button Sichern Start */
/* Important */
p, pre {
padding:  0 0 20px;
line-height: 1.5em;
}
#tinymce {
margin: 0;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
margin-bottom: 20px;
}
#tinymce img {
max-width: 100%;
height: auto;
}
/* Important */
/* Sitemap Start  */
ul.sitemaplevel1, ul.sitemaplevel1 ul {
list-style: none;
text-decoration: none;
font-size: 1.25rem;
}
.sitemaplevel1 a:hover {
font-size: 1.25rem;
color: #F00;
}
.sitemaplevel1 li:before {
list-style-type: none;
color: #000;
content: "\00bb"; /* Sonderzeichen » */ 
font-family: inherit;
font-size: 1rem;
font-weight: 800;
}
/* Sitemap End  */
/* Code-Text Begin */
span.code {
background-color: #CFF;
line-height: 1.5;
display: block;
font-size: 14px;
font-family: Consolas, monospace;
font-weight:400;
padding: 5px 5px;
letter-spacing: .05em;
word-wrap: break-word;
}
/* Code-Text End */
/* Bilder mii Text links oder rechts mit TinyMCE for CMSimple_XH einfügen Start */
.img_left {
clear: left;
float: left;
margin-right: 1em;
margin-top: 3em;
margin-bottom: 1em;
}
.img_right {
clear: right;
float: right;
margin-left: 1em;
margin-top: 3em;
margin-bottom: 1em;
}
/* Bilder mii Text links oder rechts mit TinyMCE for CMSimple_XH einfügen End */
/* Videos mit CMSimple_XH Editor Multimedia einfügen, responsive */
video {
max-width: 100%;
height: auto;
}
/* End Multimedia einfügen, responsive */
.video iframe,.video object,.video embed {
position: absolute;
top:0;left:0;
width: 100%;
height: 100%;
}
/* Login */
.xh_login {
height: 20em;
margin: 5em 0 0;
text-align: center;
color: #00F;
}
#login #submit {
padding: 0 20px;
}
/* Login */
.clear {
clear: both;
}
/* Blockquote Zitat Start */
blockquote {
background: rgba(0, 0, 0, 0.4);
border-left: 8px solid #00F;
border-right: 8px solid #00F;
margin-top: 15px;
margin-left: 0; /* bündig mit Seiten Rand = Schrift  */
padding: 0.8em 10px;
font-size: 1.25rem;
color: #FFF; /* Überschrift-Farbe */
font-weight: 500;
quotes: "\201C""\201D";
}
blockquote::before {
margin-left: 5px;
color: #F00; /* Zitat-Zeichen-Farbe */
content: open-quote;
font-size: 2rem;
line-height: 0.1em;
margin-right: 0.2em; /* Abstand Sonderzeichen Schrift */
vertical-align: -.2em; /* Zitat-Zeichen-höhe*/
}
blockquote p {
display: inline;
margin: 0;
}
/* Blockquote Zitat End */
/* Navigation Hamburger Grünenbergpass_color2/icons/ Start by Richard Kircher (c)2020 /www.richukunst.ch */
/* Navigation fährt von links nach rechts über die ganze Seite */
/* Hamburger ABSCHNITT  Start */
.hamburger-toggleable-menu {
background-color: rgba(0, 0, 0, 0.4);/* Background Farbe */
box-shadow: 3px 3px 11px #333;/* Farbe Einschub rechts*/
display: block;
padding: 0;/* Background Farbe abstand rechts */
display: table-cell;
vertical-align: middle;
text-align:center;
}
.hamburger-toggleable-menu li {
display: inline-block;
padding: 0;/* Abstand Text nach unten */
margin: 0;
height: 40px;
line-height: 40px;
}
.hamburger-toggleable-menu li a:hover {
background: radial-gradient(ellipse farthest-corner at center, #0F1FFA 0%, #7EA0CC 100%);
transition-property: background;
transition-duration: 1s;
transition-timing-function: ease-out;
color: #0F3;/* Textfarbe Hover */
}
/* Hamburger close Element Button links */ 
.hamburger-menu-toggle-button:checked ~ .hammenu-toggle {
background: rgba(0, 0, 0, 0.4) url(images/close.png)no-repeat;/* Farbe + Bild background links zu */
font-size: 0;               
transform: rotate(-180deg);
}
.hamburger-menu-toggle {
left: -9999px;/* position close icon */
position: absolute;
top: -9999px;
}
.hamburger-toggleable-menu {
margin: 0;/* abstand zum Rand links */ 
width: 310px;
height: 100%;
max-height: 100%;/* abstand nach unten auf Handy korrigieren? */ 
min-height: 100%;/* abstand nach unten auf Handy korrigieren? */
z-index: 998;
overflow-x: auto;/* vertikaler scrollbalken für Geräte mit zuwenig Höhe */
overflow-x: hidden;
}
.hamburger-toggleable-menu.hamburger-left {
right: 105%;/* weg ganze naviseite fährt von rechts nach links */
}
.hamburger-toggleable-menu.hamburger-right {
right: 105%;/* weg ganze naviseite fährt nicht mehr von rechts nach links */ 
}
.hamburger-menu-toggle-button:checked ~ .hammenu-toggle.hamburger-left {
right: auto; 
left: 0;/* icon close kann nach links verschoben werden */
}
.hamburger-menu-toggle-button:checked + .hamburger-toggleable-menu.hamburger-left {
width: 310px !important;/* Breite navi */
right: 0;
}
/* Hamburger öffnen Menü Button rechts */
.hammenu-toggle {
background-color: rgba(0, 0, 0, 0.4);/* Background Farbe */
color: #FF0;/* Farbe Hamburger*/
font-size: 4rem; 
text-decoration: none;
text-align: center;
font-weight: 500;
height: auto;
line-height: 50px;
}
.hammenu-toggle:hover {
background-color: #F00;/* background hover Farbe links */
}
.hammenu-toggle {
display: none;
}
.hammenu-toggle, .hamburger-menu-toggle-button, .hamburger-toggleable-menu {
top: 0;
position: fixed;
transition: all 0.7s;/* schneligkeit einschub */ 
}
.hammenu-toggle {
right: 0;
margin: 0;
display: inline-block;
width: 50px;/* Breite bouton links und rechts */
z-index: 999;
}
.hammenu-toggle:hover {
cursor: pointer;/* sonst keine Hand anzeige bei icon */
}
/* Hamburger ABSCHNITT  End */
.clear {
clear: both;
}
/* 9 Menü-Ebenen Start */
nav li > a:after { 
content: ' +'; /* Sonderzeichen + Menü*/ 
color: #FFF;
font-size: 1.375rem;
}
nav li > a:only-child:after { 
content: ''; 
}
nav li span {
padding: 10px;
border-left: 5px solid #F00;
color: #FFF;/* Angeklickte Seite Farbe */
font-size: 1.125rem;
font-weight: 700;
}
.menulevel1 li a, .menulevel2 li a, .menulevel3 li a, .menulevel4 li a, .menulevel5 li a, .menulevel6 li a, .menulevel7 li a, .menulevel8 li a, .menulevel9 li a {
font-size: 1.125rem;
font-weight: 700;
text-decoration: none;
height: 100%;
width: 310px;
display: inline-block;
padding: 0 8px;/* Abstand Rand rechts Text links */
}
.menulevel1 li a {
background-color: #000;/* menulevel1: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
.menulevel2 li a {
background-color: #000;/* menulevel2: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
.menulevel3 li a {
background-color: #000;/* menulevel3: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
.menulevel4 li a {
background-color: #000;/* menulevel3: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
.menulevel5 li a {
background-color: #000;/* menulevel3: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
.menulevel6 li a {
background-color: #000;/* menulevel3: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
.menulevel7 li a {
background-color: #000;/* menulevel3: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
.menulevel8 li a {
background-color: #000;/* menulevel3: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
.menulevel9 li a {
background-color: #000;/* menulevel3: Farbe background */ 
border-left: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
}
/* 9 Menü-Ebenen End */
.clear {
clear: both;
}
/* Navigation Hamburger Grünenbergpass_color2/icons/ End by Richard Kircher (c)2020 /www.richukunst.ch */
/* Navigation fährt von links nach rechts über die ganze Seite */
/* search Start  */
/* Angabe submit, search Button anklicken Suchfunktion wird ausgelöst */
#searchbox input[type="submit"] {
font: normal 1em 'Open Sans', sans-serif !important;
padding: .1em .25em !important;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.4);/* Background Farbe */
color: #FFF;
font-weight: 800;
width: auto;
}
/* Searchbox Fenster Text einschreiben */
#searchbox input.text {
background-color: rgba(0, 0, 0, 0.4);/* Background Farbe */
width: auto;
border: 1px solid #000;
display: inline-block;
font: normal 1em 'Open Sans', sans-serif !important;
color: #000;
}
#searchbox input:focus {
background-color: #FFF;
}
/* search End  */
/* buttontop Statt  */
#buttontop {
margin-left: 15px;
margin-right: auto ;
margin-top: 10px;
}
#buttontop a:hover {
background: #F00;
}
/* buttontop End  */
/* content Start  */
#content{
width: 50%;
min-height: 500px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
background-color: rgba(255,255,255,0.9);
border: 1px solid rgba(0, 0, 0, 0.4);
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
box-shadow: 2px 2px 5px 2px #000;
clear: both;
}
#content img {
max-width: 100%;
height: auto;
width: auto;
box-shadow: none;
}
/* content End  */
.clear {
clear: both;
}
/* Newsbox Start */
#newscontainer {
position: relative;
max-width: 100%;
background-color: rgba(0, 0, 0, 0.4);/* Background Farbe */
padding-top: 10px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
word-spacing: normal;/* Durch word-spacing kann man den Abstand zwischen den einzelnen Worten einer Zeile beeinflussen. */
vertical-align: top;/* Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile. */
}
#newsbox1 img, #newsbox2 img, #newsbox3 img, #newsbox4 img {
max-width: 100%;
height: auto;
box-shadow: 2px 2px 5px 2px #000; 
}
#newsbox1 a:link {
color: #6F0;/* Schrift Farbe link */
}
#newsbox2 a:link { 
color: #6F0;/* Schrift Farbe link */
}
#newsbox3 a:link {
color: #6F0;/* Schrift Farbe link */
}
#newsbox4 a:link {
color: #6F0;/* Schrift Farbe link */
}
/*newsbox1-4 Start */
#newsbox1, #newsbox2, #newsbox3, #newsbox4 {
min-width: 420px;
max-width: 420px;
max-height: 500px;/* Newsbox max-height kann beliebig angepasst werden. Alle 4 Boxen sollten gleiche Grösse haben.*/
min-height: 500px;
font-size: 1rem;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
margin-top: 1em;
margin-left: 1em;
float: left;
order: 1;
}
/*newsbox1-4 Start */
#newsbox1 {
color: #FFF;/* Schrift-Farbe-Text-Newsbox */
background-color: hsla(0, 0%, 0%, 0.6);/* background-Farbe-newsbox */
}
/*newsbox1 End */
/*newsbox2 Start */
#newsbox2 {
color: #FFF;/* Schrift-Farbe-Text-Newsbox */
background-color: hsla(0, 0%, 0%, 0.6);/* background-Farbe-newsbox */
}
/*newsbox2 End */
/*newsbox3 Start */
#newsbox3 {
color: #FFF;/* Schrift-Farbe-Text-Newsbox */
background-color: hsla(0, 0%, 0%, 0.6);/* background-Farbe-newsbox */
}
/*newsbox3 End */
/*newsbox4 Start */
#newsbox4 {
color: #FFF;/* Schrift-Farbe-Text-Newsbox */
background-color: hsla(0, 0%, 0%, 0.6);/* background-Farbe-newsbox */
}
/* newsbox4 End */
/* Überschriften Newsboxen von h1 bis h6 Start */
#newsbox1 h1, #newsbox2 h1, #newsbox3 h1, #newsbox4 h1 {
width: 100%;
background-color: #00F;/* Überschrift-Farbe-background */
opacity: 1;
font-size: 1.8rem;
font-weight: 600;
color: #FFF;/* Überschrift-Farbe */
text-align: center;
text-shadow: 4px 4px 0px rgba(0,  0,  0,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
#newsbox1 h2, #newsbox2 h2, #newsbox3 h2, #newsbox4 h2 {
width: 100%;
background-color: #F00;/* Überschrift-Farbe-background */
opacity: 1;
font-size: 1.8rem;
font-weight: 600;
color: #FFF;/* Überschrift-Farbe */
text-align: center;
text-shadow: 4px 4px 0px rgba(0,  0,  0,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
#newsbox1 h3, #newsbox2 h3, #newsbox3 h3, #newsbox4 h3 {
width: 100%;
background-color: #090;/* Überschrift-Farbe-background */
opacity: 1;
font-size: 1.8rem;
font-weight: 600;
color: #FFF;/* Überschrift-Farbe */
text-align: center;
text-shadow: 4px 4px 0px rgba(0,  0,  0,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
#newsbox1 h4, #newsbox2 h4, #newsbox3 h4, #newsbox4 h4 {
width: 100%;
background-color: #930;/* Überschrift-Farbe-background */
opacity: 1;
font-size: 1.8rem;
font-weight: 600;
color: #FFF;/* Überschrift-Farbe */
text-align: center;
text-shadow: 4px 4px 0px rgba(0,  0,  0,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
#newsbox1 h5, #newsbox2 h5, #newsbox3 h5, #newsbox4 h5 {
width: 100%;
font-size: 1.8rem;
font-weight: 600;
color: #FFF;/* Überschrift-Farbe */
text-align: center;
text-shadow: 4px 4px 0px rgba(0,  0,  0,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
#newsbox1 h6, #newsbox2 h6, #newsbox3 h6, #newsbox4 h6 {
width: 100%;
font-size: 1.8rem;
font-weight: 600;
color: #F00;/* Überschrift-Farbe */
text-align: center;
text-shadow: 4px 4px 0px rgba(0,  0,  0,  0.9),7px 7px 5px rgba(0, 0, 0, 0.2);
}
/* Überschriften Newsboxen von h1 bis h6 End */
/* Newsbox End */
/* Previous Top Next Start */
.previous_top_next {
text-align: center;
width: 50%;
margin: 0 auto;
padding: 1em;
padding-top: 20px;
}
.previous_top_next td a {
text-decoration: none;
font-size: 1rem;
color: #FF0;
font-weight: 600;
white-space: nowrap;
padding: 0 0.5em;
}
.previous {
width: 10%;
text-align: left;
}
.top {
width: 10%;
text-align: center;
}
.next  {
width: 10%;
text-align: right
}
.previous_top_next td {
display: inline-block;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 5px;
height: auto;
width: auto;
margin: 0 40px;
transition: transform 1s ease-in-out;
}
.previous_top_next a {
color: #FF0;
text-decoration: none;
display: inline-block;
position: relative;
}
.previous_top_next a:hover:after {
width: 100%;
right: 0;
}
.previous_top_next a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 3px;
right: 0;
position: absolute;
background: #F00;
transition: width 1s ease 0s, right 0.9s ease 0s;
width: 0;
}
/* Previous Top Next Start */
/* Footer Start */
.footer-center{
background-color: rgba(0, 0, 0, 0.4);/* Background Farbe */
margin: 0;
max-width: 100%;
text-align: center;
padding: 5px;/* abstand überschrit footer start */
margin-top: 20px;/* abstand Seite top*/
padding-bottom: 10px;/* abstand Überschrift Login unten */
font-size: 1rem;
}
div#footer {
text-align: center;
font-size: 1rem;
color: #FFF; 
padding-top: 8px;
padding-bottom: 8px;
margin-top: 5px;
margin-bottom: 20px;
margin-left: 0;
margin-right: 11px;
}
#footer a:link, #footer a:visited {
font-size: 1rem;
text-decoration: none; 
color: #FF0;
}
#footer a:hover {
font-size: 1rem;
text-decoration: none; 
color: #F00;
}
#footer a img:hover {
border-bottom: 3px solid #F00; 
}
#footer img {
max-width: 100%;
height: auto;
width: auto;
box-shadow:none;
}
/* footer-links Start */
.footer-center .footer-links a:hover{
color: #FFF; /* Link Text Farb hover */
}
.footer-center .footer-links a{
list-style: none;
font-weight: bold;
color:  #0FF; /* Link Text Farb Login */
padding: 15px 0 23px;/* abstand Überschrift*/
}
/* footer-links End*/
/* Footer End*/
/* -------------------- Media Queries -------------------- */
@media screen and (max-width: 1900px){
#newscontainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 990px){
#body {  
background: url(images/bg_s.jpg) no-repeat center center fixed;
background-size: 100% 100%;
}	
#content {
width: 80%;
}	
#newsbox1 {
position: relative;  
max-width: 100%;    
min-width: 100%;
max-height: 700px;
margin-left: auto;
margin-right: auto;
}
#newsbox2 {
position: relative;  
max-width: 100%;    
min-width: 100%;
max-height: 700px;
margin-left: auto;
margin-right: auto;
}
#newsbox3 {
position: relative;  
max-width: 100%;    
min-width: 100%;
max-height: 700px;
margin-left: auto;
margin-right: auto;
}
#newsbox4 {
position: relative;  
max-width: 100%;    
min-width: 100%;
max-height: 700px;
margin-left: auto;
margin-right: auto;
}  
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.3rem;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 1.1rem;
}
h6 {
font-size: 1rem;
}   
body {
font-size: 0.875rem;
}  
} 
@media screen and (max-width: 500px){
.hamburger-toggleable-menu {
background-color: #808080;/* Background Farbe */
}
} 
@media screen and (max-width: 400px){
#buttontop img {
width: 30px;
height: 30px;
}
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.2rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 1rem;
}  
} 
@media screen and (max-width: 370px){
div#footer {
font-size: 0.75rem;
} 
#footer a:link, #footer a:visited {
font-size: 0.75rem;
}   
}