.header-container {
  width: 100%; }

.calendar-background {
  background-image: url("../img/event-bg5.jpg");
  background-size: 100% auto;
  height: 100vh;
  width: 100%;
  padding-top: 60px;
  position: absolute;
  left: 0;
  top: 0; }

@media screen and (max-width: 1225px) {
  .calendar-background {
    background-size: auto 100%; } }
@media screen and (max-width: 768px) {
  #background {
    background-size: auto 100vh; } }
.menu-months {
  font-size: 1.5em;
  color: #b4b4b4;
  display: inline-block;
  width: 100%; }

.calendar-button {
  border: 2px solid white;
  background-color: transparent;
  color: white;
  font-size: 1em;
  padding: 0.5em 1em;
  margin: 0.6em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Open Sans', sans-serif; }
  .calendar-button:hover {
    background-color: rgba(0, 0, 0, 0.2); }

.calendar-arrow {
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  padding-top: 20px;
  color: white; }

#background {
  background-size: 100vw auto; }

#right {
  color: white; }

#left {
  color: white; }

.event-info {
  height: 100vh; }

.event-date:hover, .event-title:hover {
  background-color: rgba(0, 0, 0, 0.7); }

.block {
  text-align: center; }

/*# sourceMappingURL=calendar.css.map */