#title {
  background-position-x: center;
  background-position-y: center;
  background-size: cover;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-attachment: fixed;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: table;
  height: 400px;
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#title .centered_text {
  margin: 200px 100px 150px 100px;
  text-align: center;
}
#title .centered_text h1 {
  font-family: "Roboto-Light", sans-serif;
  font-weight: 100;
  font-size: 40pt;
}
#title .centered_text span.info {
  font-family: "Work Sans", sans-serif;
  font-weight: 100;
  color: #D6D6D6;
  font-size: 15pt;
  letter-spacing: 1px;
  line-height: 40px;
}

ol.breadcrumb {
  padding-left: 65px;
  padding-right: 65px;
}
ol.breadcrumb a {
  color: black;
}
ol.breadcrumb li.active {
  color: #c5a268;
}

#content {
  background-color: white;
  margin: 50px auto 0 auto;
  max-width: 1000px;
  min-width: 700px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
#content .container {
  width: 100%;
}
#content p {
  font-size: 16px;
}
#content .images .main-image {
  width: 100%;
  height: auto;
}
#content .images .additional-image {
  width: 50%;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
#content .images .additional-image:nth-child(even) {
  padding-right: 10px;
  float: left;
}
#content .images .additional-image:nth-child(odd) {
  padding-left: 10px;
  float: right;
}
#content .content {
  clear: both;
  width: 100%;
  margin-bottom: 100px;
}
#content .content h2 {
  font-family: "Work Sans", sans-serif;
  font-weight: 100;
  font-size: 50px;
  letter-spacing: 1px;
  text-align: left;
  color: black;
  margin-top: 50px;
  margin-bottom: 25px;
}
#content .content h3 {
  margin-top: 30px;
  margin-bottom: 10px;
}
#content .content h4 {
  margin-top: 20px;
  margin-bottom: 5px;
}
#content .content p {
  text-align: justify;
  color: #707070;
  line-height: 22px;
}
#content .content p a {
  color: black;
}

@media only screen and (max-width: 1024px) {
  #title {
    background-attachment: initial;
  }
}
@media only screen and (max-width: 736px) {
  #title .centered_text {
    margin: 200px 0 150px 0;
    width: 100%;
  }
  #title .centered_text h1 {
    font-size: 30pt;
    word-break: break-all;
    hyphens: auto;
  }
  #title .centered_text p {
    font-size: 14pt;
  }

  #content {
    background-color: white;
    margin: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  #content h2, #content h3, #content h4 {
    word-break: break-all;
    hyphens: auto;
  }

  ol.breadcrumb {
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}
/**
 * 1. The `reverse` animation direction plays the animation backwards
 *    which makes it start at the stroke offset 100 which means displaying
 *    no stroke at all and animating it to the value defined in the SVG
 *    via the inline `stroke-dashoffset` attribute.
 * 2. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
.circle-chart__circle {
  transform: rotate(-90deg);
  /* 2, 3 */
  transform-origin: center;
  /* 4 */
}

/**
 * 1. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 2. Scaling mirrors the circle to make the stroke move right
 *    to mark a positive chart value.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1, -1);
  /* 1, 2, 3 */
}

.circle-chart__info {
  opacity: 0;
  transform: translateY(0.3em);
  animation-timing-function: ease-out;
}

@keyframes circle-chart-fill {
  to {
    stroke-dasharray: 0 100;
  }
}
@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.svg-row .col-md-4 {
  margin-top: 50px;
  margin-bottom: 50px;
}
.svg-row svg {
  width: 100%;
}

/*# sourceMappingURL=single.css.map */