/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {
  background: url(../img/streampro-background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center 0;
}

body {
  color: #012D51;
  font-family: 'opensans_regular';
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'fengardoneue_regular';
}

h2 {
  font-size: 2em;
  text-align: center;
}

a,
a:visited,
a:active,
a:hover {
  color: #AB162B;
}

#main {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.9) 400px, rgba(255,255,255,0.9) 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  margin: 2em auto;
  max-width: 800px;
}

#main section {
  padding: 2em;
}

#main section > h2 {
  margin-top: 0;
}

#main section > h2::before {
  content: '';
  background: url('../img/drop.svg') 0 0 no-repeat;
  transform: rotate(90deg);
  position: absolute;
  width: 15px;
  height: 20px;
  background-size: 15px;
  margin-left: -40px;
  margin-top: 12px;
}

#main section > h2::after {
  content: '';
  background: url('../img/drop.svg') 0 0 no-repeat;
  transform: rotate(-90deg);
  position: absolute;
  width: 15px;
  height: 20px;
  background-size: 15px;
  margin-left: 20px;
  margin-top: 12px;
}

#main section img {
  border: 10px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
  display: block;
  margin: 2em auto;
  max-width: calc(100% - 4em);
}

.branding {
  padding: 2em;
  text-align: center;
}

.branding img {
  max-width: 80%;
  width: 300px;
}

ul.contact-info {
  font-size: 1.25em;
  list-style: none;
  margin: 0 auto;
  padding-left: 2em;
}

ul.contact-info li {
  background-repeat: no-repeat;
  background-position: 0 center;
  padding-left: 1.25em;
  margin: .5em 0;
}

ul.contact-info li.email {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='35.068' height='34' viewBox='0, 0, 35.068, 34'%3E%3Cg id='Layer_1' transform='translate(-8.667, -7)'%3E%3Cpath d='M26.907,26.309 C26.678,26.767 26.182,27.186 25.533,27.186 C24.655,27.186 24.274,26.614 24.426,25.431 C24.617,23.943 24.77,22.989 25.152,21.501 C25.419,20.47 25.915,19.936 26.869,19.936 C27.25,19.936 27.67,20.051 28.013,20.279 z M34.882,34.208 C32.783,35.123 29.387,36.192 26.067,36.192 C18.932,36.192 14.543,32.147 14.543,25.507 C14.543,17.15 19.771,11.77 27.708,11.77 C34.31,11.77 38.049,15.738 38.049,21.73 C38.049,27.072 35.836,28.407 34.424,28.407 C33.089,28.407 32.783,27.492 33.012,26.118 L34.539,17.265 C32.822,15.662 30.456,14.785 27.365,14.785 C22.938,14.785 20,16.845 18.932,20.966 C18.474,22.76 18.283,23.714 18.13,25.393 C17.672,30.354 20.038,32.147 22.824,32.147 C24.999,32.147 26.602,31.002 27.632,29.667 C28.471,31.308 30.189,32.719 33.508,32.719 C39.995,32.719 43.735,27.911 43.735,21.348 C43.735,11.655 36.409,7 27.746,7 C16.604,7 8.667,14.785 8.667,26.003 C8.667,35.696 16.031,41 24.77,41 C28.662,41 33.318,40.046 36.37,37.642 z' fill='%23012D51'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 1em auto;
}

ul.contact-info li.phone {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='23.48' height='32.044' viewBox='0, 0, 23.48, 32.044'%3E%3Cg id='Layer_1' transform='translate(-61.412, -6.948)'%3E%3Cg%3E%3Cpath d='M63.6,9.291 C62.307,10.236 58.612,15.437 65.295,27.356 C72.339,39.915 79.183,39.464 80.559,38.633 L75.805,30.399 C74.655,31.063 73.7,29.945 71.944,27.512 C70.787,25.898 69.516,23.818 68.522,21.585 C67.835,20.016 67.272,18.419 68.478,17.723 L63.6,9.291 z' fill='%23012D51'/%3E%3Cpath d='M72.281,15.529 C72.813,15.221 72.946,14.567 72.665,14.08 L72.672,14.076 C72.672,14.076 68.853,7.477 68.849,7.47 C68.556,6.963 67.912,6.802 67.41,7.092 L65.076,8.439 L69.947,16.876 L72.279,15.539 L72.281,15.529 z' fill='%23012D51'/%3E%3Cpath d='M84.364,36.458 C84.897,36.15 85.029,35.496 84.748,35.01 L84.751,34.999 C84.751,34.999 81.041,28.589 81.037,28.582 C80.744,28.074 80.101,27.914 79.599,28.204 L77.265,29.551 L82.03,37.805 C82.03,37.805 84.362,36.468 84.358,36.461 L84.364,36.458 z' fill='%23012D51'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: .8em auto;
  background-position: 2px center;
}

ul.contact-info li.mail {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='35.068' height='34' viewBox='0, 0, 35.068, 34'%3E%3Cg id='Layer_1'%3E%3Cpath d='M31.347,4.25 C33.107,4.25 34.534,5.677 34.534,7.438 L34.534,26.562 C34.534,28.323 33.107,29.75 31.347,29.75 L3.721,29.75 C1.961,29.75 0.534,28.323 0.534,26.562 L0.534,7.438 C0.534,5.677 1.961,4.25 3.721,4.25 L31.347,4.25 z M4.221,15.273 L4.221,26.062 L30.847,26.062 L30.847,15.273 C28.799,16.896 26.743,18.508 24.687,20.119 C24.56,20.219 23.271,21.289 22.811,21.644 C20.923,23.098 19.277,23.884 17.537,23.875 C15.804,23.884 14.157,23.104 12.291,21.672 C11.809,21.302 10.486,20.201 10.382,20.119 C8.324,18.509 6.27,16.894 4.221,15.273 z M30.847,7.938 L4.221,7.938 L4.221,9.909 C7.113,12.245 10.042,14.533 12.968,16.826 C13.14,16.961 14.207,17.851 14.551,18.123 C15.026,18.498 15.447,18.802 15.842,19.047 C16.531,19.474 17.103,19.694 17.542,19.687 C17.965,19.694 18.537,19.474 19.226,19.047 C19.621,18.802 20.042,18.498 20.517,18.123 C20.861,17.851 21.927,16.962 22.101,16.825 C25.023,14.528 27.959,12.249 30.847,9.909 L30.847,7.938 z' fill='%23132C51'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 1em auto;
  background-position: 0 center;
}

dt {
  font-size: 1.2em;
  font-weight: 700;
}

dd {
  margin: .5em 1em;
}

dd + dt {
  margin-top: 1em;
}

@media screen and (min-width: 805px) {
  #services ul {
    column-count: 2;
    column-gap: 4em;
  }
}

#services ul li {
  break-inside: avoid-column;
  padding-bottom: 1em;
}

.service {
  background-position: 0 10px;
  background-repeat: no-repeat;
  background-size: 100px auto;
  margin-left: 1em;
  margin-right: 1em;
  min-height: 125px;
  padding-left: 125px;
}

.service h3 {
  font-size: 1.5em;
  margin-bottom: .25em;
  padding-top: .25em;
}

.service h3 + p {
  margin-top: 0;
}

.compass {
  background-image: url('../img/compass.svg');
}

@media screen and (max-width: 805px) {
  body {
    font-size: 1.1em;
  }

  #main {
    background: none;
    margin-bottom: 0;
    margin-top: 0;
  }

  #main section {
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    margin: 1em;
  }

  #main section > h2 {
    margin-bottom: 0;
  }

  #main section.branding {
    background: none;
    box-shadow: none;
    margin: 0;
  }

  #main > hr {
    display: none;
  }

  #main section img {
    border: none;
    box-shadow: none;
    max-width: calc(100% + 4em);
    margin-left: -2em;
    margin-right: -2em;
  }

  .service {
    background-position: center 1em;
    background-size: auto 100px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ccc;
    margin-top: 1em;
    min-height: 125px;
    padding-top: 125px;
    padding-left: 0;
    padding-bottom: 1em;
    text-align: center;
  }

  .service h3 {
    padding-top: 0;
  }

  .service:last-child {
    border-bottom: none;
  }

  .service p {
    text-align: left;
  }

  .compass {
    background-image: url('../img/compass.svg');
  }
  

  ul.contact-info {
    padding-left: 1em;
  }
}

@media screen and (max-width: 700px) and (max-aspect-ratio: 5/4) {
  .branding img {
    width: 200px;
  }
}

@media screen and (max-width: 400px) and (max-aspect-ratio: 5/4) {
  .branding img {
    width: 160px;
  }
}

@media screen and (min-width: 1600px) {
  #main section img.pull-left {
    margin-left: calc(-400px - 3em);
    position: absolute;
    transform: rotate(-6deg);
    width: 400px;
  }

  #main section img.pull-right {
    margin-left: calc(800px - 2em);
    position: absolute;
    transform: rotate(6deg);
    width: 400px;
  }

  #main section img.pull-left.shift-up,
  #main section img.pull-right.shift-up {
    margin-top: -1em;
  }

  #main section img.pull-left.shift-way-up,
  #main section img.pull-right.shift-way-up {
    margin-top: -15em;
  }

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}