* {
  margin: 10;
  padding: 0;
  box-sizing: border-box;
}

header, footer, section, nav, article { display: block;}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* abel-regular - latin */
@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/abel-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Abel Regular'), local('Abel-Regular'),
       url('../fonts/abel-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/abel-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/abel-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/abel-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/abel-v8-latin-regular.svg#Abel') format('svg'); /* Legacy iOS */
}


body {
  font-size: 1.25em;
  font-family: 'Roboto', sans-serif;
  color: #331a00;
  background: #fff url(hintergrund.png) no-repeat  center center fixed;
  background-size: cover;
  hyphens: auto;
}

.button {
    margin: 4px 2px;
    color: black;
	padding: 10px 22px;	
	border-radius: 4px;
	text-decoration: none;
    border: 2px solid #331a00;
	white-space: nowrap;
}
.button:hover {
    background-color: #331a00;
    color: white;
}

a {color: #331a00;text-decoration: none;}
a:visited {color: #331a00;text-decoration: none;}
a:hover {color: #e68a00;text-decoration: none;}
a:active {color: #331a00;text-decoration: none;}

* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

quadrat {
	text-align: justify;
}

h1 {
  font-size: 2em;
  font-weight: normal;
  color: #4d2600;
  margin: 0 0 10px;
  font-family: 'Abel', sans-serif;
}

h2 {
  font-size: 1.5em;
  font-weight: normal;
  color: #4d2600;
  margin: 0 0 10px;
  font-family: 'Abel', sans-serif;
}


ul.a {
    list-style-type: circle;
	margin-left: 20px;
}


#container, footer .innen {
  max-width: 990px;
  min-width: 320px;
  margin:auto;
  hyphens: auto;
}
 /* normale Bilder*/
img.a {
    width: 100%;
	display: block;
    margin: auto;
	max-width: 300px;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* große Bilder*/
img.aa {
    width: 100%;
	display: block;
    margin: auto;
	max-width: 800px;
	height: auto;
	border-radius: 30px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
 /* lego resize */
img.displayed {
	display: block;
	max-width: 830px;
	width: 95%;
	height:auto;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 10px;
	margin-top: 10px;
}
 
 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
	font-family: 'Roboto', sans-serif;
	max-width: 1200px;
    margin:auto;
    overflow: hidden;
    background-color: rgba(255,255,255,0.9);
	margin-bottom: 20px;
	border-radius: 20px;
	
}


.back-to-top {
 background:rgba(255, 165, 0,0.2);
 position: fixed;
 bottom:15px;
 right:10px;
 padding:3px;
 font-size: 1.5em;
 font-weight: bold;
 border-radius: 5px;
 border: 1px solid orange;
}



/* Float the list items side by side */
ul.topnav li {float: left;
color: black;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: block;
    color: #331a00;
    text-align: center;
    padding: 10px 16px;
	font-size: 1.3em;
    text-decoration: none;
    transition: 0.4s;
    
}
.active {
    background-color: rgba(255,255,255,0.9);
}

/* Change background color of links on hover */
ul.topnav li a:hover {
	background-color: rgba(200,200,200,0.9);
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


/* ----------------- content--------------------- */
section:before {
  height: 0;
  content: ".";
  display: block;
  clear: both;
  visibility:hidden;
}

section#content {
  float: left;
  width: 100%;
  padding-top: 40px;
  padding-right: 40px;
  padding-bottom: 10px;
  padding-left: 40px;
  background-color:rgba(255,255,255,0.9) ;
  min-height:500px;
  box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 0 0 20px;
  border-radius:20px;
  -webkit-border-radius:20px;
}
p, pre{
  padding:  0 0 20px;
  line-height:1.5em;
  hyphenate-limit-chars: auto 5;
  hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   -ms-hyphenate-limit-chars: auto 5;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -webkit-hyphenate-limit-chars: auto 5;
    word-wrap: Break-Word;
}
ul{
  list-style-type:none;
  line-height:1.5em;
}
article header{
  padding:0;
  }
  


/* -----------footer---------------------- */
footer.footer {
  max-width: 850px;
  min-width:320px;
  margin:10px  auto;
  border-radius:20px;
  -webkit-border-radius:20px;
  clear:both;
  background-color:rgba(255,255,255,0.9) ;
  color: #331a00;
  padding: 20px;
  font-size: 0.8em;
  hyphens: auto;
}


/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 95%;
    }
}

 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:721px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:721px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}