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

.container {
  width: 10%;
  margin: 0 auto;
  overflow: hidden;
  font-family:ArialRD;
  font-size:120%;
  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: 0.5px solid #0070C0;
  display: block;
  height: 4rem;
  width: 4rem;
  position: relative;
}
label span {
  border-radius: 15%;
  height: 3px;
  width: 32px;
  background-color: #0070C0;
  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: #0070C0;
  top: 400%;
  transition: all 0.3s ease-out;
}
label span:after {
  border-radius: 15%;
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #0070C0;
  top: -400%;
  transition: all 0.3s ease-out;
}

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;
}
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;
}

nav {
  position:fixed;
  top:11%;
  left:0%;
  width: 50%;
  height: 80%;
  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.0;
  padding:2% 5% 2% 2%;
  border-left: 0px solid #1C6EA9;
  box-shadow: 20px 20px 50px black;
  overflow-y:scroll;

}
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;
}
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%;
}
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;
}

@media only screen and (min-device-width:100px) and (max-device-width:500px) and (orientation: portrait){
         .container {
           width: 20%;
           margin: 0 auto;
           overflow: hidden;
           font-family:ArialRD;
           font-size:200%;
           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: 0.5px solid #0070C0;
           display: block;
           height: 4rem;
           width: 4rem;
           position: relative;
         }
         label span {
           border-radius: 15%;
           height: 3px;
           width: 32px;
           background-color: #0070C0;
           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: #0070C0;
           top: 400%;
           transition: all 0.3s ease-out;
         }
         label span:after {
           border-radius: 15%;
           position: absolute;
           content: "";
           height: 100%;
           width: 100%;
           background-color: #0070C0;
           top: -400%;
           transition: all 0.3s ease-out;
         }

         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;
         }
         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;
         }

         nav {
           position:fixed;
           top:1%;
           left:10%;
           width: 80%;
           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:2% 1% 2% 1%;
           border-left: 10px solid #1C6EA9;
           border-bottom: 5px solid #1C6EA9;
           overflow-y:scroll;

         }
         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;
         }
         nav ul li a {
           transition: all 0.3s ease-out;
           line-height: 1rem;
           text-decoration: none;
           font-size:100%;
           color: black;
           text-decoration:bold;
           display: block;
           padding: 1rem;
           font-size:100%;
         }
         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:100%;
         }

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

         .imprint {
                  padding-top:30px;
         }
}

@media only screen and (min-device-width:501px) and (max-device-width:1024px) and (orientation: landscape){
         .container {
           width: 20%;
           margin: 0 auto;
           overflow: hidden;
           font-family:ArialRD;
           font-size:120%;
           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: 0.5px solid #0070C0;
           display: block;
           height: 4rem;
           width: 4rem;
           position: relative;
         }
         label span {
           border-radius: 15%;
           height: 3px;
           width: 32px;
           background-color: #0070C0;
           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: #0070C0;
           top: 400%;
           transition: all 0.3s ease-out;
         }
         label span:after {
           border-radius: 15%;
           position: absolute;
           content: "";
           height: 100%;
           width: 100%;
           background-color: #0070C0;
           top: -400%;
           transition: all 0.3s ease-out;
         }

         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;
         }
         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;
         }

         nav {
           position:fixed;
           top:1%;
           left:10%;
           width: 80%;
           height: 80%;
           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% 1% 2% 1%;
           border-left: 10px solid #1C6EA9;
           border-bottom: 5px solid #1C6EA9;
           overflow-y:scroll;

         }
         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;
         }
         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%;
         }
         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:100%;
         }

         .td_nav {
                  width:10%;
         }

         .imprint {
                  padding-top:30px;
         }
}