/*===KEYFRAMES===*/
@keyframes st-t-o{
  0%{
    transform: translateY(0px);
  }
  85%{
    transform: translateY(-220px);
  }
  100%{
    transform: translateY(-200px);
  }
}
@keyframes st-b-o{
  0%{
    transform: translateY(0px);
  }
  85%{
    transform: translateY(-220px);
  }
  100%{
    transform: translateY(-200px);
  }
}
@keyframes st-m-o{
  0%{
    transform: translateY(0px);
  }
  85%{
    transform: translateY(220px);
  }
  100%{
    transform: translateY(200px);
  }
}
@keyframes st-t-c{
  0%{
    transform: translateY(-200px);
  }
  85%{
    transform: translateY(20px);
  }
  100%{
    transform: translateY(0px);
  }
}
@keyframes st-b-c{
  0%{
    transform: translateY(-200px);
  }
  85%{
    transform: translateY(20px);
  }
  100%{
    transform: translateY(0px);
  }
}
@keyframes st-m-c{
  0%{
    transform: translateY(200px);
  }
  85%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(0px);
  }
}
@keyframes top-down{
  0%{
    top: -210px;
  }
  70%{
    top: 55px;
  }
  100%{
    top: 60px;
  }
}
@keyframes show-text{
  0%{
    font-size: 1px;
    padding: 0px 0px 0px 0px;
  }
  100%{
    font-size: 20px;
    padding: 5px 15px 5px 15px/*0.25em 0.75em 0.5em 0.75em*/;
  }
}
@keyframes down-top{
  0%{
    top: 60px;
  }
  70%{
    top: -210px;
  }
  100%{
    top: -210px;
  }
}
@keyframes hide-text{
  0%{
    font-size: 20px;
    padding: 5px 15px 5px 15px/*0.25em 0.75em 0.5em 0.75em*/;
  }
  100%{
    font-size: 1px;
    padding: 0px 0px 0px 0px;
  }
}


/*===NAVBAR===*/
div.navigation-wrapper{
  z-index: 1000;
}

div.navigation-wrapper nav{
  z-index: 1100;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: aliceblue;
  border-bottom: solid 2px black;
  line-height: 50px;
  box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.75);
}

div.navigation-wrapper nav div.nav-elements{
  margin: 0px auto 0px 90px;
  vertical-align: middle;
  display: flex;
  flex-flow: row;
  height: 100%;
}
div.navigation-wrapper nav.nav-title-to-left div.nav-elements{
  margin: 0px auto 0px 45px;
}
div.navigation-wrapper nav div.nav-elements h2{
  cursor: auto;
  margin: 0px;
  font-size: 21px;
}
div.navigation-wrapper nav div.hidden-form:hover form{
  opacity: 1.0;
}
div.navigation-wrapper nav div.hidden-form form{
  opacity: 0.0;
  cursor: pointer;
}
div.navigation-wrapper nav div.nav-elements form input[type=text]{
  margin-top: 9px;
  font-size: 21px;
}
div.navigation-wrapper nav div.nav-elements form button.edit-button{
  height: 25px;
  width: 25px;
  position: absolute;
  top: 13px;
  margin-left: 5px;
}
div.navigation-wrapper nav div.nav-elements form  button.edit-button svg#edit-button{
  width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
}
div.navigation-wrapper nav div.nav-elements form  button.edit-button svg#confirm-edit-button{
  width: 80%;
  position: absolute;
  top: 10%;
  right: 10%;
}

/*===MENU_BUTTON===*/
div.navigation-wrapper div.menu div.button-wrapper{
  z-index: 1100;
  position: fixed;
  top: 5px;
  left: 15px;
  width: 50px;
  height: 40px;
  cursor: pointer;
}

div.navigation-wrapper div.menu div.button-wrapper svg#menu-button{
  position: absolute;
  width: 80%;
  top: 5%;
  left: 10%;
}

/*button animation*/
div.open svg#menu-button .st-t{
  animation: st-t-o 0.3s forwards cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
div.open svg#menu-button .st-b{
  animation: st-b-o 0.3s forwards cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
div.open svg#menu-button .st-m{
  animation: st-m-o 0.3s forwards cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
div.close svg#menu-button .st-t{
  animation: st-t-c 0.3s forwards cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
div.close svg#menu-button .st-b{
  animation: st-b-c 0.3s forwards cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
div.close svg#menu-button .st-m{
  animation: st-m-c 0.3s forwards cubic-bezier(0.175, 0.885, 0.320, 1.275);
}


/*===SIDE_MENU===*/
div.navigation-wrapper div.menu div.down{
  top: 60px;
}

div.navigation-wrapper div.menu div.up{
  top: -50px;
}

div.navigation-wrapper div.menu div.side-menu{
  top: -210px;
  z-index: 900;
  position: fixed;
  left: 15px;
  width: 300px;
  font-size: 1px;
  box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.75)
}


/*sidemenu animation*/
div.navigation-wrapper div.down{
  animation: top-down 0.6s forwards; 
}
div.navigation-wrapper div.down div.entry-holder a.menu-option, div.navigation-wrapper div.down div.entry-holder button.menu-option{
  animation: show-text 0.6s forwards;
}
div.navigation-wrapper div.up{
  animation: down-top 0.6s forwards;
}
div.navigation-wrapper div.up div.entry-holder a.menu-option, div.navigation-wrapper div.up div.entry-holder button.menu-option{
  animation: hide-text 0.6s forwards;
}

/*side menu elements*/
div.navigation-wrapper div.menu div.side-menu a.menu-option{
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0px;
  transition: all 0.11s;
}
div.navigation-wrapper div.menu div.side-menu button.menu-option{
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0px;
  transition: all 0.11s;
  text-align: left;
}
div.navigation-wrapper div.menu div.side-menu div.entry-holder:hover{
  background-color: #e3eef7;
}
div.navigation-wrapper div.menu div.side-menu div:last-child{
  border-radius: 0px 0px 12px 12px;
}
div.navigation-wrapper div.menu div.side-menu div.user{
  height: 150px;
  padding: 15px 15px 5px 15px;
  border-bottom: solid 1px black;
  display: flex;
  justify-content: space-between;
}
div.navigation-wrapper div.menu div.side-menu div.user img.face, div.navigation-wrapper div.menu div.side-menu div.user div.face{
  float: left;
  margin: 10px 15px 0px 5px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: solid 0.5px black;
}
div.navigation-wrapper div.menu div.side-menu div.user div.no-face{
  background-color: white;
}
div.navigation-wrapper div.menu div.side-menu div.user div.no-face svg#no-image{
  height: 103px;
  width: 103px;
}
div.navigation-wrapper div.menu div.side-menu div.user div.user-info{
  margin:36px 0px 0px 0px;
  padding: 0px;
  width: 135px;
  font-size: 19px;
  font-weight: 300;
  line-height: 20px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 50px;
}
div.navigation-wrapper div.menu div.side-menu div.user div.user-info span{
  width: 100%;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
  display: inline-block;
}
div.navigation-wrapper div.menu h3.not-logged{
  text-align: center;
  line-height: 35px;
  font-size: 24px;
  color: #677581;
}

/*===BREADCRUMBS & LOGIN_ELEMENTS===*/
div.relative-header{
  position: relative;
  margin: 60px 18px 5px 18px;
  display: flex;
  justify-content: space-between;
}
div.breadcrumbs a{
  display: inline-block;
}
div.breadcrumbs a:last-child{
  text-decoration: underline;
}

div.login-holder{
  margin: 0 auto;
  text-align: center;
}
div.logout-holder{
  border-bottom: 1px dotted #525252;
  color: #808080;
  transition: 0.3s all;
}
div.logout-holder:hover{
  border-bottom: 1px dotted #000;
  color: #000;
}

/*===SVG_ELEMENTS===*/
.st0, .st-t, .st-m, .st-b{stroke:#000000;stroke-width:200;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.ln{stroke:#808080;stroke-width:88;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}