/**
 * Set up a decent box model on the root element
 */
html {
  box-sizing: border-box; }

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*::before,
*::after {
  box-sizing: inherit; }

/**
 * Basic styles for links
 */
a {
  color: #003d4c;
  text-decoration: none; }
  a:hover, a:active, a:focus {
    color: #222222;
    text-decoration: none; }

/**
 * Basic typography style for copy text
 */
body {
  color: #222222; }

/**
 * Clear inner floats
 */
.clearfix::after {
  clear: both;
  content: '';
  display: table; }

/**
 * Main content containers
 * 1. Make the container full-width with a maximum width
 * 2. Center it in the viewport
 * 3. Leave some space on the edges, especially valuable on small screens
 */
/**
 * Hide text while making it readable for screen readers
 * 1. Needed in WebKit-based browsers because of an implementation bug;
 *    See: https://code.google.com/p/chromium/issues/detail?id=457146
 */
.hide-text {
  overflow: hidden;
  padding: 0;
  /* 1 */
  text-indent: 101%;
  white-space: nowrap; }

/**
 * Hide element while making it readable for screen readers
 * Shamelessly borrowed from HTML5Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.event-content-holder {
  margin: 0;
  padding: 15px 25px 68px; }
  .event-content-holder h3 {
    margin: 0;
    font-size: 18px;
    color: #003d4c;
    line-height: 1.2;
    font-weight: bold;
    letter-spacing: 1px;}
  .event-content-holder .date-time-place {
    font-size: 13px;
    font-style: italic; }
  .event-content-holder h4 {
    margin: 0;
    font-size: 16px;
    color: #003d4c;
    line-height: 1.2;
    font-weight: bold; }
  .event-content-holder h5 {
    font-size: 14px;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-weight: 400;
    color: #666666; }

.more-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  position: absolute;
  bottom: 35px; }
  .more-info a {
    text-decoration: none;
    border: solid 1px #003d4c !important;
    border-radius: 3px;
    margin: 10px 10px 0 0;
    transition: all .5s ease-in-out; }
    .more-info a h6 {
      margin: 0;
      padding: 5px 10px;
        color: #003d4c;}
    .more-info a:hover {
      background-color: #003d4c; }
      .more-info a:hover h6 {
        color: #fff; }

body {
  background-color: #f8f8f8;
  margin: 0;
  padding: 0; }
  body .event-calendar .event-card {
    background-color: #fff;
    border-radius: 8px;
    transition: all .5s ease-in-out; }
    body .event-calendar .event-card:hover {
      box-shadow: 0 5px 30px #000000; }