.menu {
  flex-direction: row;
  display: none;
}
.menu-element {
  cursor: pointer;
  height: 70px;
  width: 88px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.navBigScreens {
  display: none;
}
.mobileMenu {
  padding-bottom: 40px;

  padding-left:15px;
  padding-right:15px;
}
.mobileMenuItem {
  background-color: #720009;
  padding: 10px;
  height: 34px;
  margin-bottom: 2px;
}
.mobileMenuItemLogout {
  background-color: #52666E;
}
.mobileMenuItem:hover,
.mobileMenuItem.active {
  background-color: #E63023;
}
.mobileMenuItemLogout:hover {
  background-color: #52666E;
}

.circleMobile {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Upload */
#menuUpload {
  background-image: url('../../images/pictures/menu_upload.png');
}
#menuUpload:hover,
#menuUpload.active {
  background-image: url('../../images/pictures/menu_upload_110x90_over.png');
}

/* Platform */
#menuPlatform {
  background-image: url('../../images/pictures/menu_meineplattform_110x90.png');
}
#menuPlatform:hover,
#menuPlatform.active {
  background-image: url('../../images/pictures/menu_meineplattform_110x90_over.png');
}

/* Documents */
#menuDocuments {
  background-image: url('../../images/pictures/menu_dokumente_110x90.png');
}
#menuDocuments:hover,
#menuDocuments.active {
  background-image: url('../../images/pictures/menu_dokumente_110x90_over.png');
}

/* News */
#menuNews {
  background-image: url('../../images/pictures/menu_news_110x90.png');
}
#menuNews:hover,
#menuNews.active {
  background-image: url('../../images/pictures/menu_news_110x90_over.png');
}

/* Calendar */
#menuCalendar {
  background-image: url('../../images/pictures/menu_kalender_110x90.png');
}
#menuCalendar:hover,
#menuCalendar.active {
  background-image: url('../../images/pictures/menu_kalender_110x90_over.png');
}

/* Contact */
#menuContact {
  background-image: url('../../images/pictures/menu_contact.png');
}
#menuContact:hover,
#menuContact.active {
  background-image: url('../../images/pictures/menu_kontakte_110x90_over.png');
}

/* help */
#menuHelp {
  background-image: url('../../images/pictures/menu_help.png');
}
#menuHelp:hover,
#menuHelp.active {
  background-image: url('../../images/pictures/menu_hilfe_110x90_over.png');
}

/* logout */
#menuLogout {
  position: relative;
  background-image: url('../../images/pictures/menu_logout.png');
}
#menuLogout:hover {
  background-image: url('../../images/pictures/menu_logout_110x90_over.png');
}

/* Preload images (especially hover) */
.menu::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1; opacity:0;
  content: url('../../images/pictures/menu_upload.png') url('../../images/pictures/menu_upload_110x90_over.png') url('../../images/pictures/menu_meineplattform_110x90.png') url('../../images/pictures/menu_meineplattform_110x90_over.png') url('../../images/pictures/menu_dokumente_110x90.png') url('../../images/pictures/menu_dokumente_110x90_over.png') url('../../images/pictures/menu_news_110x90.png') url('../../images/pictures/menu_news_110x90_over.png') url('../../images/pictures/menu_kalender_110x90.png') url('../../images/pictures/menu_kalender_110x90_over.png') url('../../images/pictures/menu_contact.png') url('../../images/pictures/menu_kontakte_110x90_over.png') url('../../images/pictures/menu_help.png') url('../../images/pictures/menu_hilfe_110x90_over.png') url('../../images/pictures/menu_logout.png') url('../../images/pictures/menu_logout_110x90_over.png');
}

.menu #menuLogout img{
  object-fit: cover;
}

@media (min-width: 780px /* was 768px*/){

  .menu {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 21px;
  }

  .mobileMenu-toggler {
    display: none;
  }

  .circle {
    position: absolute;
    top: 31px;
    left: 15px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 1200px){

  .circle {
    top: 37px;
    left: 14px;
    height: 40px;
    width: 40px;
  }
  .menu-element {
    margin-left: 20px;
    margin-bottom: 10px;
    height: 90px;
    width: 111px;
  }
  .menu {
    width: 200px;
    max-width: 200px !important;
    min-width: 140px !important;
    background-color: #FFFFFF;
    flex-direction: column;
    /*height: 811px;*/
    justify-content: start;
  }
  .navSmallScreens {
    display: none;
  }
  .navBigScreens {
    display: block;
  }

}