@import url("https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Roboto");
@font-face {
  font-family: Roboto;
  src: url("../../src/global/fonts/Roboto/Roboto-Regular.ttf") format("truetype"); }

@font-face {
  font-family: Roboto-bold;
  src: url("../../src/global/fonts/Roboto/Roboto-Bold.ttf") format("truetype"); }

@font-face {
  font-family: Raleway;
  src: url("../../src/global/fonts/Raleway/Raleway-Regular.ttf") format("truetype"); }

@font-face {
  font-family: Open Sans;
  src: url("../../src/global/fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); }

@font-face {
  font-family: Karla;
  src: url("../../src/global/fonts/Karla/Karla-Regular.ttf") format("truetype"); }

@font-face {
  font-family: Karla-bold;
  src: url("../../src/global/fonts/Karla/Karla-Bold.ttf") format("truetype"); }

@font-face {
  font-family: Lato;
  src: url("../../src/global/fonts/Lato/Lato-Regular.ttf") format("truetype"); }

@font-face {
  font-family: Lato-bold;
  src: url("../../src/global/fonts/Lato/Lato-Bold.ttf") format("truetype"); }

b,
strong {
  font-family: "Lato-bold", "Arial", sans-serif;
  font-weight: 500; }

.h1,
.h2,
.h3,
h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 300; }

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 20px;
  text-transform: none;
  color: inherit;
  font-family: inherit;
  font-weight: bold;
  line-height: 1.1; }

.page-header,
.field--name-field-basic-page-title,
h1 {
  font-family: "Karla", sans-serif;
  font-size: 1.714rem;
  margin-bottom: 20px;
  color: #645d9b;
  border: 0;
  font-family: "Roboto", "Arial", sans-serif; }
  @media (min-width: 48em) {
    .page-header,
    .field--name-field-basic-page-title,
    h1 {
      font-size: 2.285rem; } }
  @media (min-width: 62em) {
    .page-header,
    .field--name-field-basic-page-title,
    h1 {
      font-size: 2.57rem; } }

.page-header {
  margin-bottom: 11px; }

h2 {
  font-family: "Karla", sans-serif;
  font-size: 1.5rem;
  color: #000; }
  @media (min-width: 48em) {
    h2 {
      font-size: 1.571rem; } }
  @media (min-width: 62em) {
    h2 {
      font-size: 1.714rem; } }

h3 {
  font-family: "Lato-Regular", "Arial", sans-serif;
  font-size: 1.142rem;
  color: #888b8d; }
  @media (min-width: 48em) {
    h3 {
      font-size: 1.5rem; } }

h4 {
  font-family: "Lato-Regular", "Arial", sans-serif;
  text-transform: uppercase;
  font-size: 1.071rem;
  color: #645d9b; }
  @media (min-width: 62em) {
    h4 {
      font-size: 1.285rem; } }

h5 {
  font-size: 18px; }

h6 {
  font-size: 16px; }

.about-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .about-wrapper .field--item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }

.field--name-field-heading {
  font-size: 2rem;
  margin: 0 0 -1rem; }

.about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  float: left;
  text-align: center;
  max-width: 300px; }
  .about h2 {
    font-size: 1.75rem;
    margin: 0 0 1rem; }
  .about h3 {
    margin: 0; }
  .about .img {
    border-radius: 100%;
    color: #fafafa;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 250px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 250px;
    border: 4px solid #c0c0c0;
    margin: 3rem auto 1rem; }
    .about .img img {
      height: 100%; }