@import url('/fileadmin/uploads/Shared/CSS/font-awesome/css/font-awesome.min.css');

#floatingEventBanner {
  position: fixed;
  left: -240px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(204,204,204,0.9);
  padding: 10px 10px 10px 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: row-reverse;
  transition-duration:0.8s;
  visibility:hidden;
  z-index: 1111;
}
#floatingEventBanner.open {
  left: -10px;
}
#floatingEventBannerTitle {
  width: 18px;
  padding: 10px 5px 10px 20px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}
#floatingEventBannerTitle h2 {
  font-family: Meiryo;
  font-weight: bold;
  display: inline-block;
  color: white;
  text-shadow:0px 0px 2px #000000;
  writing-mode: vertical-rl;
  line-height: 1em;
  font-size: 120%;
}
#floatingEventBannerTitle h2:before {
  font-size: 120%;
  display: inline-block;
  transition-duration:0.5s;
  /* font-family: FontAwesome;
  content: "\f04b"; */
  content: "▶";
  transform: rotate(0deg);
  margin-top: 8px;
  margin-bottom: 8px;
}
.open #floatingEventBannerTitle h2:before {
  transform: rotate(-180deg);
}
#floatingEventBannerContents {
  margin-top: 10px;
}
#floatingEventBannerContents .banner {
  margin-bottom: 10px;
}

#floatingEventBannerTitle:hover, 
#floatingEventBannerContents .banner a:hover {
  opacity: 0.6;
}