body {
  background-color: rgba(255, 255, 255, 0.373);
}

@font-face {
  font-family: "JustlefthandWeb W03 Regular";
  ;
  src: url("a.eot");
  src: url("a.eot?#iefix")format("embedded-opentype"),
    url("a.woff")format("woff"),
    url("static/a.woff2")format("woff2"),
    url("/static/a.ttf")format("truetype"),
    url("a.eot")format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     hallodry
     License: none (public domain)
  */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* end of reset */
/****************/
/****************/
/**start of nav**/

#nav.nav {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  height: 86px;
  width: 100%;
  background-color: #fff;
  opacity: 0.7;
  z-index: 9999;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: dimgray;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}

#nav.nav:hover {
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
}

.navlink {
  margin: 0.3em;
  font-family: 'Noto Sans', sans-serif;
  color: black;
}

.navlink:hover {

  color: rgb(62, 62, 63);
}

a,
a:visited,
a:hover {
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* toggle label */
.label {
  scale: .9;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
  display: flex;
  flex-direction: row;
}

.label-text {
  margin-left: 2px;
}

.toggle {
  scale: 0.75;
  position: absolute;
  align-items: 20px;
  nav-right: calc(100% - 20px);
  align-self: flex-end;
  margin-left: 5em;

  isolation: isolate;
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    -8px -4px 8px 0px #535151,
    8px 4px 12px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #7c7a7a inset;
}

.toggle-state {
  display: none;
}



.toggle-state:checked~.indicator {
  transform: translate3d(25%, 0, 0);
}

/****overlay******/
.overlay-content {
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  height: 105vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  z-index: 8888;
  font-size: 1.1em;
  line-height: 1.1;
}

/******hamburger*******/


#hamburg {
  scale: 0.4;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  display: none;
}

#hamburg:checked+.hamburg .line:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}

.line:nth-child(1) {
  top: 12px;
}

.line:nth-child(2) {
  top: 24px;
}

.line:nth-child(3) {
  top: 36px;
}

.sozial {
  width: 1.4em;
  margin: 0.5em;
}

a,
a:visited,
a:hover {
  color: inherit;
  text-decoration: none;
  outline: none;
}

input#hamburg {
  display: none;
}

label.hamburg {
  display: block;
  background: #ffffff00;
  width: 75px;
  height: 50px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  scale: 0.8;
  margin-top:-0.6em;
  display: none;
}

.line {
  position: absolute;
  left: 10px;
  height: 4px;
  width: 55px;
  background: #2f2e2e;
  border-radius: 2px;
  display: block;
  transition: 0.5s;
  transform-origin: center;
}

.line:nth-child(2) {
  top: 24px;
}

.line:nth-child(3) {
  top: 36px;
}

.label {
  scale: .9;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
  display: flex;
  flex-direction: row;
}

.toggle {
  scale: 0.75;
  position: absolute;
  align-items: 20px;
  nav-right: calc(100% - 20px);
  align-self: flex-end;
  margin-left: 5em;
  isolation: isolate;
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: -8px -4px 8px 0px #535151, 8px 4px 12px 0px #d1d9e6, 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #7c7a7a inset;
}

.toggle-state {
  display: none;
}

.indicator {
  height: 100%;
  width: 200%;
  background: #ecf0f3;
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
}

img {
  max-width: 100%;
  height: auto;
}

#hamburg:checked+.hamburg .line:nth-child(1) {
  transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked+.hamburg .line:nth-child(2) {
  opacity: 0;
}

#hamburg:checked+.hamburg .line:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}

.navlog {
  width: 250px;
}

a.navlink:hover {
  color: black;
}

.texto {
  position: absolute;
  top: 120px;
  left: 100px;
}

p.x {
  rotate: 270deg;
  margin-top: 50px;
  margin-right: 50px;
  position: relative;
  top: 110px;
  left: -90px;
  font-family: inherit;
  font-size: .8em;
}

.lang {
  font-family: monospace;
  color: rgb(121, 123, 132);
  font-size: 1em;
}

.label-text-de.lang {
  margin-right: -70px;
}


/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     hallodry
     License: none (public domain)
  */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
#nav.nav {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  height: 66px;
  width: 100vw;
  background-color: #fff;
  opacity: 0.99;
  z-index: 888;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: dimgray;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
#nav.nav:hover {
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
}

.navlink {
  margin: 0.3em;
  font-family: 'Noto Sans', sans-serif;
  color: black;
  font-size: 1em;
  font-style: unset;
  border-bottom: none;
}

.navlink:hover {

  color: rgb(62, 62, 63);
}

a,
a:visited,
a:hover {
  color: inherit;
  text-decoration: none;
  outline: none;
}


p.x {
  rotate: 270deg;
  margin-top: 50px;
  margin-right: 50px;
  position: relative;
  top: 110px;
  left: -90px;
  font-family: inherit;
  font-size: .8em;
}

.navlogo {
  width: 250px;
  margin-right: 10px;
  position: absolute;
  left: 30px;
}

.lang {
  font-family: monospace;
  color: rgb(121, 123, 132);
  font-size: 1em;
}

.language {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
  align-content: center;
  justify-content: center;
  position: absolute;
  right: 80px;
}

.label-text-de.lang {
  margin-right: -70px;
  font-weight: 600;
  color: black;
  font-family: monospace;
}

div#subheader {
  display: none;
}

input:checked .label-text-eng .lang {
  color: green;
}

.-text-title {
  margin-top: 0.5em;
  font-size: 3em;
  font-family: monospace;
}

@media screen and (min-width: 50px) and (max-width: 385px) {
  .navlogo {
    width: 230px;
    margin-right: 10px;
    position: absolute;
    left: 25px;
  }
}
input#hamburg {
  display: none;
}
@media screen and (min-width: 50px) and (max-width: 1075px) {
  .navlinkwrapper {
    display: none;
  }

  .navlogo {
    width: 200px;
  }
  label.hamburg{
    display: block !important;
    margin-bottom: 30px;
  }
}
label#hamburg.hamburg{
  display:none !important;
}