/* roboto-regular - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/roboto-v30-latin-ext_latin-regular.woff2") format("woff2"), url("../fonts/roboto-v30-latin-ext_latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

body {
  background: #eee;
  color: #222;
  font-size: 1em;
  font-family: Roboto, Times, Helvetica, Arial, sans-serif;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr minmax(150px, auto);
  grid-gap: 10px;
  grid-auto-rows: minmax(20px, auto);
  justify-content: center; }

div {
  text-align: left; }

.header {
  background: #eee;
  grid-column: 1 / span 3;
  grid-row: 1; }

.nav {
  grid-column: 1;
  grid-row: 2; }

.container {
  grid-column: 2;
  grid-row: 2;
  text-align: left; }

.right {
  display: flex;
  align-content: start;
  grid-column: 4;
  grid-row: 2;
  max-height: 10em; }

.footer {
  background: #eee;
  color: #444;
  font-size: 1em;
  text-align: center;
  grid-column: 1 / span 3;
  grid-row: 3;
  text-align: right; }

/* #title { color: #222; text-shadow: 0.1em 0.1em 0.1em #888; background: transparent; } */
#title {
  color: #222;
  background: transparent;
  text-align: center; }

h1 {
  font-size: 4em;
  margin: 0px;
  padding: 0px;
  color: #222; }

h2, h3, h4 {
  font-size: 2em;
  margin: 0px;
  padding-left: 10px;
  font-weight: inherit;
  text-align: left;
  color: #666; }

td {
  font-size: 1.0em;
  margin: 0px;
  padding: 10px;
  text-align: left;
  color: #666; }

pre {
  padding-left: 10px;
  font-size: 1.2em; }

p {
  padding-left: 10px; }

/* stellar fire auf colourlovers.com
#FEB60A
#FF740A
#D62B00
#A30000
#640100
*/
#nav_index * {
  background: #FEB60A;
  width: 200px; }

#nav_kontakt * {
  background: #FF740A;
  width: 200px; }

#nav_impressum * {
  background: #D62B00;
  width: 200px; }

#nav_4 * {
  background: #A30000;
  width: 200px; }

#nav_5 * {
  background: #640100;
  width: 200px; }

#datenschutz {
  font-size: 0.7em; }

#impressum {
  font-size: 0.7em; }

#kontakt {
  font-size: 0.7em; }

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  float: left;
  vertical-align: middle;
  padding: 16px; }

/* Style The Dropdown Button */
.dropbtn {
  border: none;
  cursor: pointer;
  min-width: 50px; }

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ddd;
  min-width: 160px;
  box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.25);
  z-index: 1; }

/* Links inside the dropdown */
.dropdown-content a {
  text-align: left;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block; }

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #fff; }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block; }

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #ddd; }

hr {
  width: 100%;
  color: #FF740A;
  background-color: #FF740A; }

@keyframes erscheinen {
  from {
    display: none; }
  to {
    display: block; } }

.menu {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 200px; }

.menu > li > a {
  background: #000;
  color: #fff;
  display: block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none; }

.menu ul {
  background: #ddd;
  height: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all .5s ease;
  top: 35px;
  width: 100%; }

.menu li:hover ul {
  height: 200px;
  opacity: 1;
  transform: translateY(0); }

.menu ul a {
  color: #000;
  display: block;
  padding: 5px 20px; }

/* 
<ul class="menu">
  <li>
    <a href="#">Parent Link</a>
    
    <ul>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
      <li><a href="#">Child Link</a></li>
    </ul>
  </li>
</ul>
*/