html,body{
  width:100vW;
  height:100vH;
  overflow:auto;
  overflow: hidden;
}
svg,#spielmatz{
    display:none;
}
#m{
  display:block;
  width:100vW;
  min-width:100vW;
  min-height:100vH;
  position: absolute;
  top:0px;
  left:0px;
  background-image: url(../images/m/abend_p.jpg);
  background-image: url(../images/m/webp/abend_p.webp);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  overflow-x: auto;
}
#m header,#m footer{
  position: fixed;
  z-index:1001;
  height:90px;
  width:100vW;
  display:block;
    background-repeat: no-repeat;
    background-size: cover;
}
#m header{
    background-image:url(../images/topbg_m.svg);
    background-position: bottom;
}
#m footer{
    height:60px;
    background-image:url(../images/bottombg_m.svg);
    background-position: top;
    bottom:0;
}
#logo{
    position:fixed;
    right:auto;
    bottom:auto;
    top:15px;
    left:20px;
    z-index:1002;
    height:4vH;
    width:70vW;
    background-image:url(../images/wp_logo_h.png);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: left;
}
#m section{
    position: relative;
    height:calc(100vH - 200px);
    max-width:calc(100vW - 30px);
    padding: 95px 15px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    background-position: center center;
}
#dozentur_m{
    /*background-image:url(../images/m/dach_p.jpg);*/
    background-image:url(../images/m/webp/dach_p.webp);
}
#layout_m{
    /*background-image:url(../images/m/feuer_p.jpg);*/
    background-image:url(../images/m/webp/feuer_p.webp);
}
#hosting_m{
    /*background-image:url(../images/m/london_p.jpg);*/
    background-image:url(../images/m/webp/london_p.webp);
}
#fotografie_m{
    /*background-image:url(../images/m/blaues_wunder_p.jpg);*/
    background-image:url(../images/m/webp/blaues_wunder_p.webp);
}
#projekte_m{
    /*background-image:url(../images/m/londonnight_p.jpg);*/
    background-image:url(../images/m/webp/londonnight_p.webp);
}
#kontakt_m{
    /*background-image:url(../images/m/londonbridge_p.jpg);*/
    background-image:url(../images/m/webp/londonbridge_p.webp);
}
#support_m{
    /*background-image:url(../images/m/strand_p.jpg);*/
    background-image:url(../images/m/webp/strand_p.webp);
}
#agb_m{
    /*background-image:url(../images/m/maschine1_p.jpg);*/
    background-image:url(../images/m/webp/maschine1_p.webp);
}
#datenschutz_m{
    /*background-image:url(../images/m/maschine2_p.jpg);*/
    background-image:url(../images/m/webp/maschine2_p.webp);
}
#impressum_m{
    /*background-image:url(../images/m/mineral_p.jpg);*/
    background-image:url(../images/m/webp/mineral_p.webp);
}
#userlogin_m{
    /*background-image:url(../images/m/spinne_p.jpg);*/
    background-image:url(../images/m/webp/spinne_p.webp);
}
#m #hamburger{
    position:absolute;
    right:20px;
    top:10px;
    border:2px solid #fff;
    border-radius:5px;
    display:block;
    height: 30px;
    width:30px;
    cursor:pointer;
}
#m #hamburger::before{
    content: " ";
    display:inline-block;
    height:3px;
    width:20px;
    margin-top:6px;
    margin-left:5px;
    border-top:4px solid #fff;
    border-bottom:4px solid #fff;
    cursor:pointer;
}
#m #hamburger::after{
    content: " ";
    display:inline-block;
    height:0px;
    width:20px;
    position:relative;
    top:-12px;
    margin-left:5px;
    border-bottom:4px solid #fff;
    cursor:pointer;
}
#m menu{
    display:block;
    height:100vH;
    width:100vW;
    position:fixed;
    left:-100vW;
    top:0px;
    background-color:rgba(0,0,0,0.8);
    z-index:2000;
    transition:all 1s;
}
#m menu.aktiv{
    left:0px;
}
#m menu #closemenu{
    display:block;
    height:26px;
    width:26px;
    border-radius:15px;
    border:3px solid #fff;
    text-align:center;
    line-height:26px;
    position:absolute;
    right:20px;
    top:12px;
    font-weight: bold;
    cursor:pointer;
}
#m menu ul{
    margin-top:80px;
}
#m menu ul li{
    border-bottom: 1px solid #fff;
    line-height:2.5rem;
    transition:all 1s;
}
#m menu ul li a:hover{
    background-color:#000;
    cursor:pointer;
}
#m menu ul li a{
    height:2.5rem;
    line-height:2.5rem;
    font-size:1.6rem;
    padding-left:30px;
    display: block;
    text-transform: uppercase;
}
#m .content{
    max-height:calc(95vH - 180px);
    background-color: rgba(0,0,0,0.6);
    border-radius:10px;
    padding:15px;
}
#m #projekte_m .content{
    max-height:calc(95vH - 140px);
}

#m #projekte_m .projektlink img{
        filter: grayscale(10%);
        -webkit-filter: grayscale(10%);
        -moz-filter: grayscale(10%);
        -ms-filter: grayscale(10%);
        -o-filter: grayscale(10%);
        max-width:90px;
        max-height:70px;
}
.projektinfo{
  border-radius:20px;
  border:1px solid #C0C0C0;
  background:#000;
  position:fixed;
  padding:20px;
  display:none;
  z-index: 15000;
  max-width:98vW;
}
.projektinfo .close{
  top:10px;
  right:10px;
}
.projektinfo > p,.projektinfo a{
      font-size:1rem;
}

#m #kontakt_m label:last-of-type, #m #support_m label:last-of-type{
    display:none;
}
.fehler{
        color:#FF9900;
        font-weight:bold;
}
input,textarea{
    width:300px;
    max-width:90%;
}
input[type=reset],input[type=submit]{
    width:auto;
}