html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

.grid-items::after {
  clear: both;
  content: "";
  display: table; }
.grid-items .grid-item {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border: 0;
  cursor: pointer;
  float: left;
  height: 14em;
  overflow: hidden;
  outline: none;
  text-align: center;
  text-decoration: none;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  @media screen and (min-width: 53.75em) {
    .grid-items .grid-item {
      width: 33.3333333333%; } }
  .grid-items .grid-item:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .grid-items .grid-item:hover .overlay-blue {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      background: #507885;
      /* The Fallback */
      background: rgba(80, 120, 133, 0);
      background: rgba(0, 65, 84, 0.95); }
      .grid-items .grid-item:hover .overlay-blue h1 {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background-clip: padding-box;
        /* stops bg color from leaking outside the border: */ }
.grid-items .grid-item img {
  display: block;
  height: 3em;
  margin-bottom: 1em;
  margin: auto; }
.grid-items .grid-item h1 {
  color: white;
  font-size: 1.3em;
  margin-bottom: 0.4em;
  height: 121px;
  display: table-cell;
  vertical-align: middle; }
.grid-items .grid-item h3 {
  color: white;
  font-size: 1.3em;
  margin-bottom: 0.4em;
  height: 121px;
  display: table-cell;
  vertical-align: middle; }
.grid-items .grid-item p {
  line-height: 1.5em;
  margin: auto;
  color: rgba(0, 29, 37, 0.7); }
  @media screen and (min-width: 40em) {
    .grid-items .grid-item p {
      max-width: 70%; } }
@media screen and (min-width: 53.75em) {
  .grid-items .grid-item-big {
    width: 66.6666666667%; } }
@media screen and (min-width: 40em) {
  .grid-items .grid-item-big p {
    max-width: 60%; } }
@media screen and (min-width: 53.75em) {
  .grid-items .grid-item-half {
    width: 50%; } }
@media screen and (min-width: 40em) {
  .grid-items .grid-item-half p {
    max-width: 60%; } }
@media screen and (min-width: 53.75em) {
  .grid-items .grid-item-two {
    width: 25%; } }
@media screen and (min-width: 40em) {
  .grid-items .grid-item-two p {
    max-width: 60%; } }
.grid-items .grid-item-image {
  background-color: #061a1f;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  display: table;
  border: 9px white solid;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */ }