#page {
    background: #3ea7e1;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 320px;
    max-width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Page Containers */
    #page-container { position: relative; }
    #site-content { margin-top: -5rem; min-height: calc( 100vh - 2.6rem ); }

    /* Responsive Page Container Elements */
      @media (max-width: 600px) {
        #site-content { margin-top: 0; }
      }

/* Header Elements */
    #header { top: 0; z-index: 500; overflow: initial; position: sticky; transition: all 0.5s ease; }

    #header { height: 4rem; margin-bottom: 0; }

    #header.scrolled { height: 3rem; margin-bottom: 1rem; }

    .site-logo { display: inline-block; margin-left: 3rem; color: inherit; height: inherit; }

    .site-logo a{ display: inline-block; position: relative; top: -.09em; margin: 0; letter-spacing: .09em; text-transform: uppercase; vertical-align: middle; height: inherit; padding-top: 0.1rem; }

    .site-logo img { height: 100% }

    /* Hamburger */
    #hamburger a { display: block; width: 50px; margin: 2px; position: absolute; top: 0; left: 0; padding: 1.25rem 10px 10px 10px; transition: all 0.5s ease; }

    #header.scrolled #hamburger a { padding: .5rem 10px 10px 10px; }

    #hamburger a:before, #hamburger a:after
        { content: ''; display: block; background: #fff; height: 2px; }

    #hamburger a span { background: #fff; display: block; height: 2px; margin: 6px 0; }

    @media (min-width: 1440px) {
      #hamburger a { display: none; }
    }

    /* Modular Nav Menu */
      #navigation-modular {
        overflow-x: auto;
        font-size: 115%;
        z-index: 50;
        /*margin-top: 5rem;*/
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex: 1 0 0;
        flex: 1 0 0;
        width: 100%;
        background-color: inherit;
      }

      #navigation-modular>ul>li { display: inline-block; }

      #navigation-modular ul {
          display: -ms-flexbox;
          display: flex;
          white-space: nowrap;
          padding-left: 2rem;
          margin: auto;
      }

      #navigation-modular ul li { position: relative; margin: 0; }

      #navigation-modular ul li a {
          display: block;
          padding: 7px 30px 7px 20px;
          text-decoration: none;
          -webkit-transition: .4s;
                  transition: .4s;
      }

      #navigation-modular ul li a.active { background: #007f0b9e; }

/* Jumbotron Elements */
    .jumbotron { padding-top: 7.5rem; padding-bottom: 5rem; background-size: cover; background-position: center; min-height: 400px; }

    .jumbotron h1 { color: #242931; font-size: 4rem; }

    .jumbotron h2 { color: rgba(36, 41, 49, 0.8); font-size: 2.5rem; }

    .jumbotron p { font-size: .9rem; font-weight: 300; margin-bottom: 0; }

    .jumbotron.text-light h1 { color: #fff; }

    .jumbotron.text-light h2 { color: rgba(255, 255, 255, 0.8); }

    #to-start { bottom: 2rem; font-size: 4rem; cursor: pointer; }

      /* Jumbotron Elements Responsive */
        @media (max-width: 840px) {
          .jumbotron h1 { font-size: 3rem; }
          .jumbotron h2 { font-size: 1.75rem; }
        }

        @media (max-width: 600px) {
          .jumbotron h1 { font-size: 2rem; }
          .jumbotron h2 { font-size: 1.25rem; }
        }

    /* Jumbotron Sizes */
        .jumbotron.jumbotron-tiny { min-height: 8rem !important; }

        .jumbotron.jumbotron-small { min-height: 110px !important; }

        .jumbotron.jumbotron-medium { min-height: 400px !important; }

        .jumbotron.jumbotron-large { min-height: 500px !important; }

        .jumbotron.jumbotron-fullscreen { min-height: 100vh; }

          /* Jumbotron Elements Responsive */
            /*TODO: Elements other than 'medium' need to have proper values*/
            @media (max-width: 840px) {
              .jumbotron.jumbotron-tiny { min-height: 8rem !important; }
              .jumbotron.jumbotron-small { min-height: 110px !important; }
              .jumbotron.jumbotron-medium { min-height: 300px !important; }
              .jumbotron.jumbotron-large { min-height: 400px !important; }
            }

            @media (max-width: 600px) {
              .jumbotron.jumbotron-tiny { min-height: 6rem !important; }
              .jumbotron.jumbotron-small { min-height: 90px !important; }
              .jumbotron.jumbotron-medium { min-height: 200px !important; }
              .jumbotron.jumbotron-large { min-height: 300px !important; }
            }

    /* Jumbotron Overlays */
        .jumbotron .image-overlay,
        .jumbotron .jumbotron-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }

        .jumbotron .jumbotron-image { background-size: cover; background-position: center; }

        .overlay-light, .overlay-dark, .overlay-light-gradient, .overlay-dark-gradient { z-index: 0; }

        .overlay-light .image-overlay { background: rgba(255, 255, 255, 0.4); }

        .overlay-light-gradient .image-overlay { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)); }

        .overlay-dark .image-overlay { background: rgba(0, 0, 0, 0.4); }

        .overlay-dark-gradient .image-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); }

/* Carousel Elements */
    .carousel-item { background-size: cover; background-position: center; }

    .site-name, .site-slogan { display:block; width:100%; background-color: #0000008f }

    /* Bootstrap Override */
    .carousel-caption {
      position: absolute;
      right: 0;
      bottom: 20px;
      left: 0;
      z-index: 10;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #fff;
      text-align: center;
      width: 100% !important;
    }

    /* Carousel Sizes */
      .carousel-item.carousel-tiny { min-height: 8rem; }

      .carousel-item.carousel-small { min-height: 110px; }

      .carousel-item.carousel-medium { min-height: 250px; }

      .carousel-item.carousel-large { min-height: 500px; }

      .carousel-item.carousel-fullscreen { min-height: 100vh; }

      /* Responsive Carousel Elements */
        /*TODO: Elements other than 'medium' need to have proper values*/
        @media (max-width: 576px) {
          .carousel-item.carousel-tiny { min-height: 8rem; }

          .carousel-item.carousel-small { min-height: 110px; }

          .carousel-item.carousel-medium { min-height: 150px; }

          .carousel-item.carousel-large { min-height: 500px; }

          .carousel-indicators { display: none; }
        }

        @media (min-width: 768px) {
          .carousel-item.carousel-tiny { min-height: 8rem; }

          .carousel-item.carousel-small { min-height: 110px; }

          .carousel-item.carousel-medium { min-height: 250px; }

          .carousel-item.carousel-large { min-height: 500px; }
        }

        @media (min-width: 992px) {
          .carousel-item.carousel-tiny { min-height: 8rem; }

          .carousel-item.carousel-small { min-height: 110px; }

          .carousel-item.carousel-medium { min-height: 300px; }

          .carousel-item.carousel-large { min-height: 500px; }
        }

        @media (min-width: 1200px) {
          .carousel-item.carousel-tiny { min-height: 8rem; }

          .carousel-item.carousel-small { min-height: 110px; }

          .carousel-item.carousel-medium { min-height: 400px; }

          .carousel-item.carousel-large { min-height: 500px; }
        }

/* Typography */
    .paragraph-header { margin: 0; font-size: 135%; text-decoration: underline; font-weight: bold; }

    .paragraph-subheader { margin: 0; font-size: 125%; text-decoration: underline; font-weight: bold; padding-left: 1rem }

    .site-name { font-size: 3.25rem; }

    .site-slogan { font-size: 1.5rem; color:green; }

    .caresheet-disclaimer { font-size: 80%; text-align: center; color: #9f9f9f; }

    i.fad.fa-code { color: #2497c4 }

    i.far.fa-heart.pulse { color: #920 }

/*MMenu Elements*/
  :root { --mm-sidebar-expanded-size: 350px; }
  .mm-menu { --mm-listitem-size: 50px; --mm-navbar-size: 50px; }

/* Blog List Elements */
    .blog-post-date { font-size: 13px }

    @media (max-width: 1200px) {
        .blog-sidebar.offset-sm-1 { margin-left: 0; }
      }

/* Bootstrap Modifiers */
    .column-count-1 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
    .column-count-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

    @media (max-width: 780px) {
        .card-columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
    }

/* Unsorted Elements */
    #footer { background: #333333; padding: 13px 0;
      -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
            box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
    /*Placeholder to allow collapse in ST3*/

/* Features Hover Effect */
    .hovereffect {
      width: 100%;
      height: 100%;
      float: left;
      overflow: hidden;
      position: relative;
      text-align: center;
      cursor: default;
      background: #009a4b;
    }

    .hovereffect .overlay {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      padding: 50px 20px;
    }

    .hovereffect img {
      display: block;
      position: relative;
      max-width: none;
      width: calc(100% + 20px);
      -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
      transition: opacity 0.35s, transform 0.35s;
      -webkit-transform: translate3d(-10px,0,0);
      transform: translate3d(-10px,0,0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .hovereffect:hover img {
      opacity: 0.4;
      filter: alpha(opacity=40);
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }

    .hovereffect h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 17px;
      overflow: hidden;
      padding: 0.5em 0;
      background-color: transparent;
      text-shadow: 0 0 2px #000000, 0 0 5px #000000;
    }

    .hovereffect h2:after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #fff;
      content: '';
      -webkit-transition: -webkit-transform 0.35s;
      transition: transform 0.35s;
      -webkit-transform: translate3d(-100%,0,0);
      transform: translate3d(-100%,0,0);
    }

    .hovereffect:hover h2:after {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }

    .hovereffect p {
      color: #FFF;
      opacity: 0;
      filter: alpha(opacity=0);
      -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
      transition: opacity 0.35s, transform 0.35s;
      -webkit-transform: translate3d(100%,0,0);
      transform: translate3d(100%,0,0);
    }

    .hovereffect:hover p {
      opacity: 1;
      filter: alpha(opacity=100);
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }


/* Animations */
  .pulse {
    transform-origin: 70% 70%;
    animation-name: pulse_animation;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  @keyframes pulse_animation {
    0% {
      transform: scale(1)
    }
    30% {
      transform: scale(1)
    }
    40% {
      transform: scale(1.08)
    }
    50% {
      transform: scale(1)
    }
    60% {
      transform: scale(1)
    }
    70% {
      transform: scale(1.05)
    }
    80% {
      transform: scale(1)
    }
    100% {
      transform: scale(1)
    }
  }
