@charset "UTF-8";

header {
  height: 90px;
  width: 100%;

  position: fixed;
  top: 0;left: 0;right: 0;

  background-color: #4ba3c7;
  z-index: 998;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

header.position {
  align-items: flex-end;
}

header span.mdi {
  color: #fff;
  font-size: 35px;
  cursor: pointer;

  position: relative;

  margin-left: 25px;
  margin-right: 25px;
}

header span.mdi.colored { color: #C0E0ED;}

header span.mdi:hover { color: #C0E0ED;}
header span.mdi:active { color: #ccc;}

.zu { top: -90px !important;}

aside {
  position: fixed;
  top: 0;
  left: -100%;
  z-index: 999;
  overflow: scroll;

  height: 100vh;
  width: 40%;
  box-shadow: rgb(0, 0, 0) 4px 0px 60px -10px;

  background-color: #bbb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ad { position: fixed;}

aside.fade { left: 0;}

aside ul {
  height: 70%;
  width: 100%;

  padding-top: 25px;
  padding-bottom: 25px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

aside ul li a {
  font-size: 25px;
  padding-left: 15px;
}

aside ul li a:hover { color: #4ba3c7;}

@media screen and (max-width:1000px) {
  aside { width: 70%;}
}