* {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
}
 html, body {
	 overflow-x: hidden;
}
 .fa {
	 font-size: 2em;
	 color: #fff;
	 line-height: 40px;
}
 body {
	 font: 100% arial, verdana, tahoma, sans-serif;
	 color: #888;
	 background-color: #fff;
}
 header {
	 width: 100%;
	 background: #008f54;
	 padding: 4px 0 4px;
	 /* overflow: hidden; */
	 display: flex;
	 justify-content: space-around;
	 margin-bottom: 25px;
	 position: fixed;
	 z-index: 1;
}
 header h1 {
	 vertical-align: middle;
	 text-align: center;
	 font-size: 1.5em;
	 color: #fff;
}
 main {
	 padding: 30px;
}
 main p {
	 font-size: 0.9em;
	 line-height: 1.2em;
	 margin-bottom: 20px;
}
 .toggle-menu {
	 width: 40px;
	 height: 40px;
	 display: inline-block;
	 vertical-align: middle;
	 position: relative;
	 text-align: center;
	 overflow: hidden;
	 cursor: pointer;
	 /* position: fixed; */
	 z-index: 2;
	 left: 0px;
	 top: 16px;
}
 #menu {
	 position: fixed;
	 top: 0;
	 left: 0;
	 z-index: 2;
	 width: 314px;
	 height: 100%;
	 padding-top: 8px;
	 background: #008f54;
	 box-shadow: -10px 0 10px rgba(0, 0, 0, .2) inset;
}
 #menu .toggle-menu {
	 z-index: 3;
}
 .lnk-menu {
	 display: block;
	 border-bottom: 1px solid rgba(255, 255, 255, .2);
	 margin: 0 10px;
	 padding: 10px;
	 color: #fff;
	 text-decoration: none;
}
 .lnk-menu:hover {
	 color: #399;
}
 #menu {
	 -webkit-transform: translate3d(0, 0, 0) translateX(-314px);
	 -moz-transform: translate3d(0, 0, 0) translateX(-314px);
	 -ms-transform: translate3d(0, 0, 0) translateX(-314px);
	 transform: translate3d(0, 0, 0) translateX(-314px);
	 -webkit-transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98);
	 -moz-transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98);
	 -ms-transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98);
	 transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98);
}
 #menu:target {
	 -webkit-transform: translate3d(0, 0, 0) translateX(0);
	 -moz-transform: translate3d(0, 0, 0) translateX(0);
	 -ms-transform: translate3d(0, 0, 0) translateX(0);
	 transform: translate3d(0, 0, 0) translateX(0);
}
 




 .modmenu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1px 10px;
    background-color: #008f54;
    width: 100%;
    margin: 0 auto;
    height: 55px;
    margin-bottom: 24px;
    }
    

    
    
    
    
    .search {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
    }
    
    .search form {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      width: 450px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    
    .input#searchbar {
      flex-grow: 1;
      height: 100%;
      padding: 15px;
      border: none;
      border-radius: 30px;
      font-size: 16px;
    }
    
    .search button[type="submit"] {
      height: 100%;
      padding: 0 30px;
      margin-left: -5px;
      padding: 4px 18px;
      border-radius: 30px;
      background-color: #008f54;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }
    
    .search button[type="submit"]:hover {
      background-color: #006c3c;
    }
    
    
    
    
    button.searchsubmit {
        background: -webkit-repeating-linear-gradient(top,#015331,#00552b 100%);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 6px 20px;
    margin-left: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }
    
    button.searchsubmit:hover {
      background-color: #006f44;
    }
    
    
    
    input#searchbar {
    height: 36px;
    padding: 0px 0px 0px 9px;
    border: #ffffff;
    margin-left: 2px;
    border-radius: 8px;
}




    
    .add-article {
    margin-left: 20px;
    }
    
    .add-article a {
        display: inline-block;
    padding: 11px 10px;
    border: none;
    border-radius: 8px;
    background: -webkit-repeating-linear-gradient(top,#015331,#00552b 100%);
    color: #fff;
    text-decoration: none;
    }
     add-article.a:hover {
      background-color: #006f44;
    }
    .login {
    position: relative;
        
    }
    
    .login-link {
        display: inline-block;
        /* padding: 7.5px 22px; */
        border: none;
        border-radius: 50%;
        background: -webkit-repeating-linear-gradient(top,#008f54,#1e4632 100%);
        color: #fff;
        text-decoration: none;
        /* margin-left: -140px; */
        margin-top: 4.4px;
        height: 50px;
        width: 50px;
    }
    
    .login-form-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1;
    width: 200px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
    
    .login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    
    .login-form h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
    }
    
    .login-form label {
    margin: 10px 0 5px 0;
    font-size: 14px;
    font-weight: bold;
    }
    
    .login-form input[type="text"],
    .login-form input[type="password"] {
    width: 100%;
    padding: 5px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    
    .login-form button[type="submit"] {
    margin-top: 10px;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    background-color: #1E90FF;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    }
    
    .close-form {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
    }
    
    
    
    
   span.edu {font-size: 1.8rem; color: #fff; font-weight: bold;}
span.room {font-size: 1.8rem; background:-webkit-repeating-linear-gradient(top,#015331,#00552b 100%); color: #fff; border-radius: 3px; padding: 0px 10px 5px 10px; margin-left: 3px;}
 




@media screen and (max-width: 767px) {

.modmenu {
max-height: unset;
}



.input#searchbar {
font-size: 14px;
}


    .login {
    position: relative;
    margin-right: 2px;        
    }
    
.add-article a {
padding: 10px 8px;
font-size: 14px;
}

.login-link {/* padding: 10px 16px; */font-size: 14px;}

.login-form-wrapper {
width: 180px;
}

.login-form h2 {
font-size: 16px;
}

.login-form label {
font-size: 12px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
font-size: 12px;
}

.login-form button[type="submit"] {
font-size: 12px;
}
}

img.loginfoto {
    width: 50px !important;
    height: 50px;
    border-radius: 50%;
}
ul.catmobil {
    overflow: auto;
    height: 84%;
}




.bottom-nav {clear: both; padding-top: 60px;}
.nav-load {text-align: center;}
.nav-load a {padding: 0 60px; display: inline-block; height: 60px; line-height: 60px; border-radius: 30px;
font-weight: 700; font-size: 18px; background-color: #2980b9; color: #fff;}
.nav-load a:hover {background-color: #00a652; color: #fff;}
.nav-load span {display: none;}