@font-face {
  font-family: Google;
  src: url(font/ProductSans-Regular.woff);
}

body {
  font: 100%/1.6 "Google", "Trebuchet MS", Helvetica, sans-serif;
}

.header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.header-left {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  max-width: 700px;
  height: 100px;
  overflow: hidden;
}

.header-left img {
  height: 150px;
}

.header-right {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  width: 25%;
  max-width: 300px;
  height: 100px;
  margin-left: 10%;
}

@font-face {
  font-family: Google;
  src: url(font/ProductSans-Regular.woff);
}

/*color theme*/

.red {
  color: #cc0101;
}

.yellow {
  color: #ffd966;
}

.green {
 color: #6aa84f;
}

.blue {
  color: #6e9eeb;
}


/*content*/

body {
  font: 100%/1.6 "Google", "Trebuchet MS", Helvetica, sans-serif;
}

.header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.header-left {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  max-width: 700px;
  height: 100px;
  overflow: hidden;
}

.header-left img {
  height: 150px;
}

.header-right {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  width: 25%;
  max-width: 300px;
  height: 100px;
  margin-left: 10%;
}

.header a:link, a:visited {
  color: black;
  text-decoration: none;
}

.event-section {
  margin: 40px 20px 0 20px;
  font-weight: bold;
}

.event-section-header {
  margin: 0 0 10px 0;
  font-weight: bold;
}

.no-events {
  background-color: #6e9eeb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  width: 100%;
  height: 100px;
}
Set up layout for "no events" look
Set up layout for "no events" look
