/* ==========================================================================
layout
========================================================================== */

.container {
  width: 10%;
  margin: 0 auto;
  overflow: hidden;
  font-family:Caviar;
  font-size:100%;
  text-decoration:bold;
}

@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         .container {
           width: 100%;
           margin: 0 auto;
           overflow: hidden;
           font-family:ArialRD;
           font-size:90%;
           text-decoration:bold;
         }
}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         .container {
           width: 70%;
           margin: 0 auto;
           overflow: hidden;
           font-family:ArialRD;
           font-size:100%;
           text-decoration:bold;
         }
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.posAbs {
  position: fixed;
}

.third {
  width: 33.3333%;
}

.half {
  width: 50%;
}

.twoThird {
  width: 66.6666%;
}

.quarter {
  width: 25%;
}

label {
  cursor: pointer;
  border: 2px solid #fff;
  display: block;
  height: 3rem;
  width: 3rem;
  margin-top:0%;
  position: relative;
}
@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         label {
           cursor: pointer;
           border: 1px solid #fff;
           display: block;
           height: 2rem;
           width: 2rem;
           padding: 5px;
           position: relative;
         }
}

@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         label {
           cursor: pointer;
           border: 1px solid #fff;
           display: block;
           height: 2rem;
           width: 2rem;
           padding: 5px;
           position: relative;
         }
}

label span {
  border-radius: 15%;
  height: 3px;
  width: 32px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  transition: all 0.3s ease-out;
}
@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         label span {
           border-radius: 15%;
           height: 3px;
           width: 25px;
           background-color: #fff;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translateY(-50%) translateX(-50%);
           transition: all 0.3s ease-out;
         }
}

@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         label span {
           border-radius: 15%;
           height: 3px;
           width: 32px;
           background-color: #fff;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translateY(-50%) translateX(-50%);
           transition: all 0.3s ease-out;
         }
}

label span:before {
  border-radius: 15%;
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #fff;
  border:0px solid #fff;
  top: 400%;
  transition: all 0.3s ease-out;
}
@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         label span:before {
           border-radius: 15%;
           position: absolute;
           content: "";
           height: 100%;
           width: 100%;
           background-color: #fff;
           top: 400%;
           transition: all 0.3s ease-out;
         }
}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         label span:before {
           border-radius: 15%;
           position: absolute;
           content: "";
           height: 100%;
           width: 100%;
           background-color: #fff;
           top: 400%;
           transition: all 0.3s ease-out;
         }

}

label span:after {
  border-radius: 15%;
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #fff;
  border:0px solid #fff;
  top: -400%;
  transition: all 0.3s ease-out;
}
@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         label span:after {
           border-radius: 15%;
           position: absolute;
           content: "";
           height: 100%;
           width: 100%;
           background-color: #fff;
           top: -400%;
           transition: all 0.3s ease-out;
         }

}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         label span:after {
           border-radius: 15%;
           position: absolute;
           content: "";
           height: 100%;
           width: 100%;
           background-color: #fff;
           top: -400%;
           transition: all 0.3s ease-out;
         }
}


label:hover span {
  height: 0;
  transition: all 0.3s ease-out;
}
@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         label:hover span {
           height: 0;
           transition: all 0.3s ease-out;
         }
}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         label:hover span {
           height: 0;
           transition: all 0.3s ease-out;
         }
}

label:hover span:before {
  height: 3px;
  transform: rotate(-45deg);
  transition: all 0.3s ease-out;
}
@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         label:hover span:before {
           height: 3px;
           transform: rotate(-45deg);
           transition: all 0.3s ease-out;
         }
}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         label:hover span:before {
           height: 3px;
           transform: rotate(-45deg);
           transition: all 0.3s ease-out;
         }
}


label:hover span:after {
  height: 3px;
  transform: rotate(45deg);
  transition: all 0.3s ease-out;
}
@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         label:hover span:after {
           height: 3px;
           transform: rotate(45deg);
           transition: all 0.3s ease-out;
         }
}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         label:hover span:after {
           height: 3px;
           transform: rotate(45deg);
           transition: all 0.3s ease-out;
         }
}


.bar {
  Position:fixed;
  color: black;
  line-height: 4rem;
  border: 0px solid grey;
}

@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         .bar {
           Position:fixed;
           color: black;
           line-height: 1rem;
           border: 0px solid grey;
         }
}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         .bar {
           Position:fixed;
           color: black;
           line-height: 2rem;
           border: 0px solid grey;
         }
}



nav {
  position:fixed;
  top:15%;
  left:0%;
  width: 40%;
  height: auto;
  font-size:120%;
  background-color: white;
  transform: translateX(-123%) scale(0.85, 0.1);
  transform-origin: top left;
  transition: all 0.3s ease-out;
  opacity:1;
  padding:2% 5% 2% 2%;
  border-left: 0px solid #1C6EA9;
  box-shadow: 20px 20px 50px black;
  overflow-y:scroll;

}
@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         nav {
           position:fixed;
           top:12%;
           left:0%;
           width: 95%;
           height: 85%;
           background-color: white;
           transform: translateX(-123%) scale(0.85, 0.1);
           transform-origin: top left;
           transition: all 0.3s ease-out;
           opacity:1;
           padding:0% 2% 0% 0%;
           overflow-y:scroll;
           line-height:90%;
         }
}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         nav {
           position:fixed;
           top:15%;
           left:0%;
           width: 70%;
           height: 85%;
           background-color: white;
           transform: translateX(-123%) scale(0.85, 0.1);
           transform-origin: top left;
           transition: all 0.3s ease-out;
           opacity:1;
           padding:0% 2% 0% 0%;
           overflow-y:scroll;
           line-height:90%;
         }
}


nav ul {
  margin: 0;
  padding-top: 0;
  list-style: none;
}
nav ul li {
  border-top: 1px solid #CFCFCF;
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.6s ease-out;
}

/* Listeneinträge */
nav ul li a {
  transition: all 0.3s ease-out;
  line-height: 1rem;
  text-decoration: none;
  color: black;
  text-decoration:bold;
  display: block;
  padding: 1rem;
  font-size:100%;
}

@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         nav ul li a {
           padding: 5px;
         }
}
@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         nav ul li a {
           padding: 1%;
         }
}

nav ul li:first-child {
  border-top: none;
}
nav ul li:hover a {
  color: white;
  background-color: #6d747e;
  transition: all 0.3s ease-out;
}
nav ul li:hover a i {
  color: white;
}

.navBtn:checked ~ nav {
  transform: translateX(0);
  transition: all 0.3s ease-out;
}

.navBtn:checked ~ nav ul li {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.6s ease-out;
}

.navBtn {
  display: none;

}

.table_nav {
         width:80%;
}

.td_nav {
         width:10%;
         font-size:100%;
}

.imprint {
         padding-top:30px;
}


/* Scrollbar */
/* width */
::-webkit-scrollbar {
    width: 0.6%;
}

@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
::-webkit-scrollbar {
    width: 2%;
}

}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #EFEFEF;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #CFCFCF;
    border-radius: 10px;
    opacity:0.7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #A02000;
    opacity:0.7;
}


/* end Scrollbar */