* {
  box-sizing: border-box; }

html {
  height: 100%; }

body {
  margin: 0;
  min-height: 100%; }

body {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 16px;
  font-weight: 300;
  background-color: #bae9de; }

main {
  position: relative;
  min-height: 100vh; }
  @media (min-width: 1200px) {
    main {
      padding-right: 250px; } }
  main > div {
    padding: 10px;
    min-width: 300px;
    max-width: 800px;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto; }
    @media (min-width: 600px) {
      main > div {
        padding-top: 50px; } }
    @media (min-width: 1200px) {
      main > div {
        padding-top: 100px; } }

h1,
h2,
h3 {
  margin-top: 0;
  text-transform: uppercase;
  font-weight: inherit; }

.nav-menu {
  z-index: 10;
  color: #ccc;
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .nav-menu--collapsed {
    display: none; }
    @media (min-width: 1200px) {
      .nav-menu--collapsed {
        display: block; } }
  @media (min-width: 1200px) {
    .nav-menu {
      width: 250px;
      left: auto;
      right: 0; }
      .nav-menu__close-btn {
        display: none; } }
  .nav-menu__item-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    @media (min-width: 1200px) {
      .nav-menu__item-list {
        margin-left: 20px;
        height: 95%;
        justify-content: flex-end;
        align-items: stretch; } }
  .nav-menu__item {
    font-size: 25px;
    margin-bottom: 20px;
    text-transform: uppercase;
    cursor: pointer; }
    .nav-menu__item--selected {
      color: #bae9de; }
    .nav-menu__item:hover {
      color: white; }
    .nav-menu__item a {
      color: inherit;
      text-decoration: inherit;
      display: block;
      width: 100%; }
  .nav-menu__close-btn {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 30px;
    right: 10px;
    padding: 0;
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    color: #ccc; }
    .nav-menu__close-btn::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      content: "\2715";
      font-size: 40px; }
    .nav-menu__close-btn:hover {
      color: white; }

.fab {
  position: fixed;
  width: 60px;
  height: 60px;
  background-color: #000000;
  color: #ccc;
  border-radius: 100%;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer; }
  .fab__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .fab--navbar {
    z-index: 10;
    bottom: 30px;
    right: 30px; }
  .fab--booking {
    bottom: 30px;
    left: 30px; }
  .fab--hidden {
    display: none; }
  .fab:hover {
    color: white; }
  @media (min-width: 1200px) {
    .fab {
      display: none; }
      .fab--no-hide {
        display: block; } }

@media (min-width: 1200px) {
  .action-btns {
    position: fixed;
    top: 0;
    right: 350px;
    width: 100vh;
    display: flex;
    flex-direction: row-reverse;
    transform-origin: top right;
    transform: rotate(-90deg);
    overflow-x: scroll; } }

.action-btn {
  display: block;
  padding: 10px;
  width: 350px;
  margin: 10px auto;
  flex-shrink: 0;
  color: inherit;
  border: 10px solid black;
  border-radius: 50px;
  font-size: 1.25em;
  line-height: 2em;
  text-align: center;
  text-decoration: inherit;
  text-transform: uppercase; }
  .action-btn:hover {
    color: white;
    border-color: white; }
  @media (min-width: 1200px) {
    .action-btn {
      margin: 10px; } }

.icons a {
  width: 100px;
  overflow: hidden;
  display: inline-block;
  margin: 10px; }
  .icons a img {
    width: 100%; }
    .icons a img:hover {
      filter: invert(100%); }

.logo {
  width: 100%;
  text-align: center; }
  .logo img {
    max-width: 300px; }
  @media (min-width: 600px) {
    .logo {
      position: absolute;
      left: 0;
      bottom: 30px; } }
  @media (min-width: 1200px) {
    .logo.seal {
      position: absolute;
      left: 0;
      bottom: 30px;
      padding-right: calc(250px + 30px);
      text-align: right; } }

@media (min-width: 1200px) {
  .about {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start; }
    .about .logo {
      position: static;
      align-self: center;
      flex-grow: 1;
      margin-right: 30px; }
      .about .logo img {
        max-width: 350px; } }

@media (min-width: 1200px) {
  .text {
    width: 60%; } }

.text p {
  font-size: 1.5em; }

.text a {
  color: inherit;
  text-decoration: none;
  display: inline-block; }
  .text a:hover {
    color: white; }

footer {
  position: absolute;
  bottom: 30px;
  display: inline-block;
  text-align: center;
  left: 0;
  width: 100%; }
  @media (min-width: 1200px) {
    footer {
      text-align: left;
      left: auto;
      width: auto; } }

.event-info {
  margin-bottom: 100px;
  text-align: center; }
  .event-info__hero {
    width: 100%; }
  .event-info__when ul {
    list-style-type: none;
    padding: 0; }
  .event-info__about {
    text-align: center; }
  .event-info__map {
    border: 0;
    width: 100%;
    height: 300px; }

.event-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  @media (min-width: 600px) {
    .event-cards {
      justify-content: start; } }

.event-card {
  width: 225px;
  margin: 10px; }
  .event-card__preview {
    margin: 0 auto;
    height: 400px;
    max-width: 225px;
    background-position: center;
    background-size: cover; }
  .event-card__details {
    text-align: center;
    padding-top: 10px; }
    .event-card__details__section {
      padding-bottom: 0.5em; }
      .event-card__details__section p {
        margin: 0; }
  .event-card__link {
    display: block;
    text-align: center; }
  .event-card--heading {
    font-size: 1.5em; }