/* RESET */

* {
   box-sizing: border-box;
}

body {
   background-color: #f8f8f8;
   font-family: 'hind', sans-serif;
}

div {
   margin: 0;
   padding: 0;
   display: inline-block;
}



/* ALIGNMENT */

.align-left {
   text-align: left;
   float: left;
}

.align-center {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

.align-right {
   text-align: right;
   float: right;
}



/* MAIN LAYOUT ELEMENTS */

.container,
.header,
.hero,
.nav,
.body,
.footer {
   display: block;
   clear: both;
}

.row:first-child {
   padding-bottom: 0;
}

.row {
   padding: 4em 0;
   width: 100%;
   float: left;
   clear: both;
}

.row + .row {
   padding: 0;
}

.row:last-of-type {
   padding-bottom: 4em;
}


[class*="columns-"] {
   float: left;
   padding: 1em;
   overflow: hidden;
}

.container::after,
.header::after,
.hero::after,
.nav::after,
.body::after,
.footer::after,
.row::after {
   content: "";
   clear: both;
   display: table;
}



/* MAIN TEXT ELEMENTS */

h1 + h2 {
   margin-top: -.75em;
}

h1,
h2,
h3,
h4,
h5 {
   font-family: 'Share Tech', sans-serif;
}

/* HYPERLINK ELEMENTS */
a {
   text-decoration: none;
   transition: all ease .25s;
}

a:link {
   color: inherit;
}

a:visited {
   color: inherit;
}

a:hover {
   color: inherit;
}

a:active {
   color: inherit;
}

.bg-white a,
.bg-white a:link,
.bg-white a:visited,
.bg-grey a,
.bg-grey a:link,
.bg-grey a:visited,
.bg-brand a.btn,
.bg-brand a:link.btn,
.bg-brand a:visited.btn,
.bg-white a:hover.btn,
.bg-white a:active.btn,
.bg-grey a:hover.btn,
.bg-grey a:active.btn {
   color: #382160;
}

.bg-white a:hover,
.bg-white a:active,
.bg-grey a:hover,
.bg-grey a:active {
   color: #382160;
   text-decoration: underline;
}

.bg-brand a,
.bg-brand a:link,
.bg-brand a:visited,
.bg-white a.btn,
.bg-white a:link.btn,
.bg-white a:visited.btn,
.bg-grey a.btn,
.bg-grey a:link.btn,
.bg-grey a:visited.btn,
.bg-brand a:hover.btn,
.bg-brand a:active.btn {
   color: #f8f8f8;
}

.bg-brand a:hover,
.bg-brand a:active {
   color: #f8f8f8;
   text-decoration: underline;
}



/* MENU ELEMENTS */

.nav img {
   width: 100%;
}

.header .nav img {
   max-height: 75px;
}

.nav ul {
   margin: 0;
   padding: 0;
   display: inline-block;
   list-style-type: none;
   text-align: left;
}

.nav ul + ul {
   float: right;
   font-family: 'Share Tech', sans-serif;
   font-size: larger;
}

.nav li {
   padding: 1em;
   display: inline-block;
   vertical-align: middle;
}

.footer ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

.footer li {
   font-size: smaller;
   margin-top: 0;
   margin-right: 0;
   margin-bottom: .25em;
   margin-left: .25em;
   padding: 0;
}

ul.icons {
   margin: 0;
   padding: 0;
   display: inline-block;
   list-style-type: none;
   text-align: left;
}

ul.icons li {
   margin-top: 0;
   margin-right: .5em;
   margin-bottom: .5em;
   margin-left: 0;
   padding: 0;
   display: inline-block;
   vertical-align: middle;
}

.legal ul.icons li {
   margin-top: 1.25em;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: .5em;
   padding: 0;
   display: inline-block;
   height: 3em;
}

/* HERO ELEMENTS */

.hero img {
   max-width: 100%;
   max-height: 100%;
}


/* INFOBOX ELEMENTS */

.infobox svg {
   margin-top: .25em;
}

.infobox {
   align-content: center;
   display: block;
   padding: 2em;
   background: #ffffff;
   border-radius: 10px;
   border: 1px solid #efefef;
   transition: all .5s ease;
}

a .infobox h2 {
   color: #000000;
}

.infobox p {
   vertical-align: middle;
}

.infobox ul li {
   text-align: left;
}

.infobox [class*="fa-"] {
   color: #495057;
}

.infobox:hover {
   border-color: #dfdfdf;
   color: #000000;
   transition: all .5s ease;
   box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, .1);
}

.infobox:hover [class*="fa-"] {
   transition: all .5s ease;
   color: #382160;
}

.infobox a [class*="fa-"]:hover {
   transition: all .5s ease;
   color: #000000;
}

.infobox img {
   max-width: 100%;
   max-height: 100%;
}



/* INDIVIDUAL COMPONENTS */

.hidden {
   visibility: hidden
}

.staff-photo {
   width: 100%;
   height: auto;
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
   border-bottom-left-radius: 50%;
   border: 1px solid #fff;
   border-bottom: 0;
   background: #ffffff;
}

h6 {
   margin-top: -1.5em;
   margin-bottom: 1.75em;
   font-family: 'Hind', sans-serif;
}

.staff-links [class*="fa-"] {
   margin: .1em;
}

.legal {
   margin-top: 1em;
   font-size: x-small;
   border-top: solid 1px rgba(255, 255, 255, .2);
}



/* BUTTONS */

.btn {
   margin: 1em 0;
   padding: 1em;
   display: inline-block;
   border-radius: 5px;
   font-weight: bold;
   text-transform: uppercase;
   transition: all ease .5s;
   color: #ffffff;
   font-family: 'hind', sans-serif;
   font-size: larger;
}



/* BACKGROUND & TEXT COLORS */

.bg-white,
.infobox {
   background: #ffffff;
   color: #382160;
}

.bg-white .btn,
.infobox .btn {
   background: #382160;
   color: #f8f8f8;
}

.bg-grey {
   background: #dfe0de;
   color: #382160;
}

.bg-grey .btn {
   background: #382160;
   color: #dfe0de;
}

.bg-black {
   background: #1e1a1c;
   color: #f8f8f8;
}

.bg-black .btn {
   background: #f8f8f8;
   color: #1e1a1c;
}

.bg-brand {
   background: #382160;
   color: #f8f8f8;
}

.bg-brand .btn,
.bg-white .btn:hover,
.bg-white .btn:active,
.bg-grey .btn:hover,
.bg-grey .btn:active .infobox .btn:hover,
.infobox .btn:active {
   background: #f8f8f8;
   color: #382160;
   text-decoration: none;
}

.bg-brand .btn:hover,
.bg-brand .btn:active {
   background: #1e1a1c;
   color: #f8f8f8;
   text-decoration: none;
}

.bg-black .btn:hover,
.bg-black .btn:active {
   background: #382160;
   color: #f8f8f8;
   text-decoration: none;
}

.txt-white {
   color: #ffffff;
}

.txt-brand {
   color: #382160;
}



/* SCREEN SIZE BREAKPOINT - MOBILE */

[class*="columns-"] {
   width: 100%;
}

@media only screen and (max-width: 735px) {
   .container {
      padding: 1em;
   }

   .nav ul {
      width: 100%;
      text-align: center;
   }

   .nav ul + ul {
      float: none;
   }

   .nav ul + ul li {
      width: 32%;
   }

   .nav .logo_flat {
      display: none;
   }

   .nav .logo_tall {
      display: inline-block;
   }
}



/* SCREEN SIZE BREAKPOINT - TABLET */

@media only screen and (min-width: 736px) {

   .header,
   .hero,
   .body,
   .footer {
      width: 80%;
      margin: auto;
   }

   .nav ul + ul li {
      line-height: 48px;
   }

   .nav .logo_flat {
      display: inline-block;
   }

   .nav .logo_tall {
      display: none;
   }

   .header .nav img {
      max-height: 45px;
   }

   .landing .nav img {
      width: 75%;
      max-height: 900px;
   }

   [class*="columns-"] {
      padding: 1em;
   }

   .columns-1 {
      width: 8.33%;
   }

   .columns-2 {
      width: 25%;
   }

   .columns-3 {
      width: 50%;
   }

   .columns-4 {
      width: 50%;
   }

   .columns-5 {
      width: 41.66%;
   }

   .columns-6 {
      width: 100%;
   }

   .columns-7 {
      width: 58.33%;
   }

   .columns-8 {
      width: 66.66%;
   }

   .columns-9 {
      width: 75%;
   }

   .columns-10 {
      width: 83.33%;
   }

   .columns-11 {
      width: 91.66%;
   }

   .columns-12 {
      width: 100%;
   }
}



/* SCREEN SIZE BREAKPOINT - REGULAR DESKTOP */

@media only screen and (min-width: 1024px) {

   .header,
   .hero,
   .body,
   .footer {
      width: 80%;
      margin: auto;
   }

   .nav ul + ul li {
      line-height: 48px;
   }

   .nav .logo_flat {
      display: inline-block;
   }

   .nav .logo_tall {
      display: none;
   }

   .header .nav img {
      max-height: 45px;
   }

   .landing .nav img {
      width: 75%;
      max-height: 900px;
   }

   [class*="columns-"] {
      padding: 1em;
   }

   .columns-1 {
      width: 8.33%;
   }

   .columns-2 {
      width: 16.66%;
   }

   .columns-3 {
      width: 25%;
   }

   .columns-4 {
      width: 33.33%;
   }

   .columns-5 {
      width: 41.66%;
   }

   .columns-6 {
      width: 50%;
   }

   .columns-7 {
      width: 58.33%;
   }

   .columns-8 {
      width: 66.66%;
   }

   .columns-9 {
      width: 75%;
   }

   .columns-10 {
      width: 83.33%;
   }

   .columns-11 {
      width: 91.66%;
   }

   .columns-12 {
      width: 100%;
   }
}



/* SCREEN SIZE BREAKPOINT - LARGE DESKTOP */

@media only screen and (min-width: 1200px) {
   .header .nav img {
      max-height: 200px;
   }

   .header,
   .hero,
   .body,
   .footer {
      width: 70%;
      margin: auto;
   }
}