@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;600;700&display=swap');

/*  -----
    base stuff
    ------------------------ */

* {
  margin: 0; padding: 0;
  box-sizing: border-box;
  }

html {
  scroll-behavior: smooth;
  --brand-ultralightgray: #f7f8f9;
  --brand-lightgray: #e6ebed;
  --brand-mediumgray: #8b969c;
  --brand-darkgray: #596e79;
  --brand-deepestgray: hsl(205deg 28% 17%);
  --brand-green: #8ac640;
  --brand-blue: #75ccd0;
  --brand-red: #c1451a;
  --brand-brown: #664f37;
  --brand-beige: #d8d0bb;
  --header-height: 80px;
  --border-radius: .3em;
  --column-gap: 60px;
  --margin-unit: 1.5rem;
  }

body {
  color: #555;
  font-size: 1.1em;
  line-height: 1.6;
  font-family: 'Kumbh Sans', sans-serif;
  }


/*  -----
    typography
    ------------------------ */

h1 {
  line-height: 1.1;
  }

h2, .h2 {
  font-weight: 400;
  font-size: 2rem;
  color: var(--brand-darkgray);
  line-height: 1.2;
  margin-top: calc(var(--margin-unit) * 2);
  margin-bottom: var(--margin-unit);
  }

h3, .h3 {
  color: var(--brand-darkgray);
  font-weight: 300;
  font-size: 1.35rem;
  margin: calc(var(--margin-unit) * 2) 0 var(--margin-unit) 0;
  }

  @media only screen and (min-width: 600px) { h3, .h3 { font-size: 1.7rem; } }

h4, .h4 {
  font-size: 1.2rem;
  line-height: 1.3;
  }

  @media only screen and (min-width: 600px) { h3, .h3 { font-size: 1.4rem; } }

h5, .h5 {
  font-size: 1rem;
  color: var(--brand-darkgray);
  font-weight: 600;
  }

h2:first-of-type, 
.h2:first-of-type, 
h3:first-of-type, 
.h3:first-of-type, 
h4:first-of-type, 
.h4:first-of-type, 
h5:first-of-type, 
.h5:first-of-type {
  margin-top: 0;
  }

p, dl, dd, ul, ol, table, figure { margin-bottom: calc( var(--margin-unit) * .5 ); }

ol, ul { padding-left: 0 } /* undoes reboot.css */  

main li { margin-left: 1.2rem; }

* > :last-child { margin-bottom: 0 }


.category_label {
  text-transform: uppercase;
  letter-spacing: .2rem;
  font-size: .9rem;
  color: var(--brand-mediumgray);
  }

.caption {
  font-size: smaller;
  margin-top: calc(var(--margin-unit) / 2);
  font-weight: 300;
  }

.text-white,
.text-white h3,
.text-white .h3 { color: #fff }
.color-blue { color: var(--brand-blue); }
.color-green { color: var(--brand-green); }


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



/*  -----
    Color Utilities
    ------------------------ */

.bg-ultralightgray { background-color: var(--brand-ultralightgray); }
.bg-lightgray { background-color: var(--brand-lightgray); }
.bg-blue { background-color: var(--brand-blue); }
.bg-deepestgray { background-color: var(--brand-deepestgray); }

.bg-charcoal-tint {
  background-color: rgba(0,0,0,.75);
  background-blend-mode: multiply;
  }



/*  -----
    Header and Nav
    ------------------------ */


/* --- wide screens --- */
@media only screen and (min-width: 600px) { 

  .header {
    height: var(--header-height);
    transition: all .5s ease;
    background: #fff;
    border-bottom: 1px solid transparent;
    }

    .header.scrolldown { 
      height: calc( var(--header-height) * .75 ); 
      border-bottom: 1px solid var(--brand-lightgray);
      background-color: var(--brand-ultralightgray);
      }

}

.identity {

  background: var(--brand-red);

  transition: all .5s ease;

  }


/* --- wide screens; 992 is boostrap "lg" --- */
@media only screen and (min-width: 992px) { 

  .identity {
    width: 180px;
    padding: 35px 25px;
    margin: 0;
    }

    .scrolldown .identity {
      width: 130px;
      padding: 15px 25px;
      }

}

  /* --- width tweaking --- */
  @media only screen and (min-width: 992px) { 

    .identity { width:200px; padding: 35px; } 
    .scrolldown .identity { width: 150px; padding: 25px; }

  }





/*  -----
    Marquee banner
    ------------------------ */

.marquee-banner {
  }

.section-title {
  background-color: var(--brand-lightgray);
  padding: var(--margin-unit) 0;
  text-align: center;
  }

  .section-title h1 {
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.1;
    color: var(--brand-mediumgray);
    }

.article-title {
  padding: calc(var(--margin-unit) * 2) 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  }

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

    .article-title {
      padding: calc(var(--margin-unit) * 4) 0;
      }

  }


/* Generic image marquee; combine with .image-shell and bootstrap styles.
   Used in portfolio pages, blog posts. */

@media only screen and (min-width: 992px) { .image-banner { min-height: 450px; } }
@media only screen and (min-width: 1200px) { .image-banner { min-height: 600px; } }



  .article-title h1 {
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.1;
    color: var(--brand-mediumgray);
    position: relative;
    color: #fff;
    }




/*  -----
    Extending Bootstrap
    ------------------------ */

.mb-6, .mb-sm-6, .mb-md-6, .mb-lg-6, .mb-xl-6, .mb-xxl-6 { margin-bottom: 6rem !important; }
.py-6, .py-sm-6, .py-md-6, .py-lg-6, .py-xl-6, .py-xxl-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

/* widths */

.w-32 { width: 32% }





/*  -----
    structure and grid
    ------------------------ */




  @media only screen and (min-width: 600px)  { main { padding-top: var(--header-height); } }

  /*
  header { background:red; }
  main { background:yellow; }
  footer { background:blue; }
  */







.flex { display: flex; flex-direction: column; }
.flex.mobile-columns { flex-direction: row; }
@media only screen and (max-width: 600px) {  .mobile-flip { display: flex; flex-direction: column-reverse; } }

.frame { 
  margin-left: var(--margin-unit); 
  margin-right: var(--margin-unit);
  }

.vertical-center { align-items: center; }


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

  .flex { flex-direction: row; }

  .flex.layout { gap: var(--column-gap); }
  .c5 .flex.layout, .flex.layout-interior { gap: calc( var(--column-gap) / 2 ); }

  .c2 { width: 20% }
  .c3 { width: 30% }
  .c32 { width: 32% }
  .c33 { width: 33% }
  .c4 { width: 40% }
  .c45 { width: 45% }
  .c5 { width: 50% }
  .c6 { width: 60% }
  .c65 { width: 65% }
  .c66 { width: 66% }
  .c7 { width: 70% }
  .c8 { width: 80% }
  .c9 { width: 90% }
  .m1 { margin-right: 10%; }

}

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

  .frame { width: 1200px; margin: 0 auto; }

  .break-column-left {
    margin-top: var(--margin-unit);
    margin-bottom: var(--margin-unit);
    margin-left: calc( var(--margin-unit) * -2 );
  }

}


/* vertical dividing lines, used in portfolio section */

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

.dividing-lines {
  border-top: 1px solid var(--brand-lightgray);
  }

  .dividing-lines.layout { gap: calc( var(--column-gap) / 2 ); }

  /* pick up any column div that's a child of .dividing-lines */
  .dividing-lines > [class*="c"] {
    padding: var(--margin-unit) 0;
    border-right: 1px solid var(--brand-lightgray);
    padding-right: calc(var(--column-gap) / 2);
    }

  .dividing-lines > [class*="c"]:last-of-type {
    border-right: none;
    padding-right: 0;
    }

}





.margin-top-0 {
  margin-top: 0;
  }

.m-b-0 { margin-bottom: 0 }
.m-b-x1 { margin-bottom: var(--margin-unit) }
.m-b-x2 { margin-bottom: calc( var(--margin-unit) * 2 ) }
.m-b-x3 { margin-bottom: calc( var(--margin-unit) * 3 ) }
.m-b-x4 { margin-bottom: calc( var(--margin-unit) * 4 ) }
.m-b-x5 { margin-bottom: calc( var(--margin-unit) * 5 ) }
.m-x05 { margin-bottom: calc( var(--margin-unit) / 2 ); margin-top: calc( var(--margin-unit) / 2 ) }
.m-x1 { margin-bottom: var(--margin-unit); margin-top: var(--margin-unit) }
.m-x2 { margin-bottom: calc( var(--margin-unit) * 2 ); margin-top: calc( var(--margin-unit) * 2 ) }
.m-x3 { margin-bottom: calc( var(--margin-unit) * 3 ); margin-top: calc( var(--margin-unit) * 3 ) }
.m-x4 { margin-bottom: calc( var(--margin-unit) * 4 ); margin-top: calc( var(--margin-unit) * 4 ) }
.m-x5 { margin-bottom: calc( var(--margin-unit) * 5 ); margin-top: calc( var(--margin-unit) * 5 ) }

/* negative top margins */
.m-t--x4 { margin-top: calc( var(--margin-unit) * -4); }
.m-t--x5 { margin-top: calc( var(--margin-unit) * -5); }
.m-t--x6 { margin-top: calc( var(--margin-unit) * -6); }

@media only screen and (max-width: 600px) { 

  .mb-m-b-0 { margin-bottom: 0 }
  .mb-m-b-x05 { margin-bottom: calc( var(--margin-unit) / 2 ) }
  .mb-m-b-x1 { margin-bottom: var(--margin-unit) }
  .mb-m-b-x2 { margin-bottom: calc( var(--margin-unit) * 2 ) }
  .mb-m-b-x3 { margin-bottom: calc( var(--margin-unit) * 3 ) }
  .mb-m-b-x4 { margin-bottom: calc( var(--margin-unit) * 4 ) }
  .mb-m-b-x5 { margin-bottom: calc( var(--margin-unit) * 5 ) }
  .m-m-x1 { margin-bottom: var(--margin-unit); margin-top: var(--margin-unit) }
  .m-m-x2 { margin-bottom: calc( var(--margin-unit) * 2 ); margin-top: calc( var(--margin-unit) * 2 ) }
  .m-m-x3 { margin-bottom: calc( var(--margin-unit) * 3 ); margin-top: calc( var(--margin-unit) * 3 ) }
  .m-m-x4 { margin-bottom: calc( var(--margin-unit) * 4 ); margin-top: calc( var(--margin-unit) * 4 ) }
  .m-m-x5 { margin-bottom: calc( var(--margin-unit) * 5 ); margin-top: calc( var(--margin-unit) * 5 ) }

  /* negate negative top margin rules */
  .m-t--x4, .m-t--x5, .m-t--x6 { margin-top: 0; }

}

/* .columns applies columns directly to an element;
   .child-columns applies columns to the child of an element  */
.columns,
.child-columns > * {
  columns: 200px 2;
  column-gap: var(--column-gap);
  }



.separator {
  padding-bottom: var(--margin-unit);
  border-bottom: 1px solid var(--brand-lightgray);
  margin-bottom: var(--margin-unit);
  }





/*  ------------------------
    ------------------------

    Content Modules

    ------------------------
    ------------------------ */



/*  -----
    In-Page Subnav
    ------------------------ */

/* --- show/hide controller for mobile --- */

.page-subnav__trigger { display:none; }

/* only do this show/hide stuff if it's within mobile space */
@media only screen and (max-width: 600px) { 

.subnav-wrapper {
  overflow: hidden;
  transform: translate(0, -1.5rem);
  }

label.page-subnav__trigger {
  display: block;
  font-weight: 600;
  background: var(--brand-blue);
  position: relative;
  z-index: 2;
  padding: 0 15px;
  line-height: 40px;
  border-radius: var(--border-radius);
  color: #fff;
  }

  label.page-subnav__trigger::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 14px;
    margin-right: 5px;
    transition: all .3s ease;
    background: 0 50% no-repeat url(/assets/images/BrandCarrot.svg);
    }

.page-subnav {
  height: auto;
  max-height: 0;
  overflow: hidden;
  transition: all .5s ease;
  transform: translate(0,-500px);
  transform-origin: top left;
  background-color: var(--brand-lightgray);
  margin: 0;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  }

/* checked effects */

input.page-subnav__trigger:checked ~ .page-subnav {
  transform: translate(0,0);
  max-height: 1000px;
  padding: calc(var(--margin-unit) / 2) 0;
  }

input.page-subnav__trigger:checked ~ label.page-subnav__trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  }

input.page-subnav__trigger:checked ~ label.page-subnav__trigger::before {
  transform: rotate(180deg);
  }



}


.page-subnav {
  list-style: none;
  }

  .navlinks li {
    margin-left: 0;
    }

  .navlinks li a {
    display: block;
    text-decoration: none;
    padding: 5px 20px 5px 15px;
    color: var(--brand-mediumgray);
    position: relative;
    transition: all .3s ease;
    }

    .navlinks li a:hover {
      color: var(--brand-darkgray);
      background-color: var(--brand-lightgray);
      padding-left: 25px;
      }

    .navlinks li a::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 8px;
      height: 100%;
      background: var(--brand-blue);
      transform: scale(0,1);
      transform-origin: center;
      transition: all .6s ease;
      }

      .navlinks li a:hover::before {
        transform: scale(1.0);
        }


/*  -----
    In-line Video Player (Youtube, etc)
    (for use in content blocks)
    ------------------------ */

figure .video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  }



/*  -----
    Staff Quote
    ------------------------ */

.staff-quote {
  background-color: var(--brand-ultralightgray);
  padding: var(--margin-unit);
  border: 3px double var(--brand-mediumgray);
  border-left: 0;
  border-right: 0;
  }


/*  -----
    Staff Link on Team Overview Page
    ------------------------ */

.staff-link-wrapper {
  column-gap: 2%;
  row-gap: 20px;
  }

.staff-link {
  padding: calc(var(--margin-unit) / 4);
  text-align: center;
  text-decoration: none;
  }

  .staff-link, .staff-link * { transition: all .25s ease; }

  .staff-link:nth-child(1) { background-color: var(--brand-blue); }
  .staff-link:nth-child(2) { background-color: var(--brand-green); }
  .staff-link:nth-child(3) { background-color: var(--brand-darkgray); }
  .staff-link:nth-child(4) { background-color: var(--brand-red); }
  .staff-link:nth-child(5) { background-color: var(--brand-mediumgray); }

  .staff-link .h3::after {
    content: "";
    display: block;
    height: 1px;
    width: 60%;
    background: #fff;
    margin: 0 auto 2px auto;
    transform: scaleX(0);
    transform-origin: center;
    transition: all .25s ease;
    }

    .staff-link:hover .h3::after { 
      transform: scaleX(1);
      margin: 5px auto 7px auto;
      }

.staff-link__name {
  padding-top: 20px;
  }

  .staff-link:hover .staff-link__name {
    padding-top: 15px;
    }

.staff-link__jobtitle {
  padding-bottom: 20px;
  }

  .staff-link:hover .staff-link__jobtitle {
    padding-bottom: 15px;
    }

   

/*  -----
    Timeline on About Page
    ------------------------ */

.timeline {
  }

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

    .timeline {
      background: linear-gradient(90deg, 
        var(--brand-lightgray) 0%, 
        var(--brand-lightgray) 49.89%, 
        #fff 49.9%, 
        #fff 50.1%, 
        var(--brand-lightgray) 50.11%, 
        var(--brand-lightgray) 100%);
      }

  }

  .timeline h2 span {
    display: inline-block;
    outline: 3px solid #fff;
    padding: 1rem;
    background-color: var(--brand-lightgray);
    }

.timeline-entry { gap: 3%; }

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

  .timeline-entry {
    width: calc(50% - 30px);
    }

  .timeline-entry.d-flex:nth-child(odd) {
    margin-left: calc(50% + 30px);
    }

  .timeline-entry.d-flex:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
    }

}

.timeline-entry__image {
  background-color: #c4cdd2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: flex-end;
  align-items: flex-start;
  }

  .timeline-entry.flex:nth-child(odd) .timeline-entry__image { justify-content:flex-start; }

  .timeline-entry__year {
    font-size: 2rem;
    color: #fff;
    border: 1px solid #fff;
    padding: 1rem;
    background: rgba(0 0 0 / 20%);
    }

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

      .timeline-entry__year {
        margin-top: -0.5rem;
        margin-right: -0.5rem;
        }

      .timeline-entry.flex:nth-child(odd) .timeline-entry__year {
        margin-right: 0;
        margin-left: -.5rem;
        }    

    }

.timeline-entry__text {
  padding: var(--margin-unit) 0;
  }

  .timeline-entry__headline {
    line-height: 1.3;
    }



/*  -----
    Blog Landing Page
    ------------------------ */

.blog-list__wrapper {
  transition: all .3s ease;
  text-decoration: none;
  color: #555;
  }

  .blog-list__wrapper:hover {
    background-color: var(--brand-ultralightgray);
    }

  .blog-list__wrapper h3::after {
    content: "";
    display: block;
    height: 1px;
    width: 30%;
    background: var(--brand-mediumgray);
    margin: calc(var(--margin-unit) / 4) 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all .4s ease;
    }

    .blog-list__wrapper:hover h3::after { 
      transform: scaleX(1);
      margin: calc(var(--margin-unit) / 2) 0;
      }

.blog-list__date {
  color: var(--brand-blue);
  }


/*  -----
    Related Blog Post Link
    ------------------------ */


.related-blog-post {
  height: 200px;
  aspect-ratio: auto; /* overrides .image-shell */
  text-decoration: none;
  padding: var(--margin-unit);
  justify-content: flex-end;
  align-items: flex-start;
  }

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

    .portfolio-link {
      height: 300px;
      align-items: flex-end;
      justify-content: flex-start;
      }

  }

  .portfolio-link h2 {
    color: #fff;
    margin-bottom: 0;
    line-height: 1;
    }




/*  -----
    Forms, Buttons, CTAs
    ------------------------ */


.btn-major,
.btn-minor {
  display: inline-block;
  text-decoration: none;
  border-radius: .3rem;
  border: none;
  cursor: pointer;
  }

.btn-major {
  background: var(--brand-blue);
  color: #1f2d37;
  padding: .4rem 1.8rem;
  }

  .btn-major.outline {
    color: #fff;
    border: 1px solid #fff;
    background: transparent;
    }

.btn-minor {
  background: var(--brand-lightgray);
  color: var(--brand-darkgray);
  font-size: .9rem;
  font-weight: 400;
  padding: 0.3rem 1.2rem;
  }


/*  -----
    Image Shell
    ------------------------ */

.image-shell {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  }


/*  -----
    Quote and Video
    ------------------------ */


.module_quote-and-video .quote {
  color: var(--brand-red);
  }

  .module_quote-and-video .quote::before,
  .quote-text::before {
    content: "\201C";
    display: inline-block;
    margin-left: -.43em;
    }

  .module_quote-and-video .quote::after,
  .quote-text::after {
    content: "\201D";
    }

.module_quote-and-video .attribution {
  color: var(--brand-beige);
  font-weight: 600;
  }

  .module_quote-and-video.feature .attribution { font-size: 1.2rem; }

.module_quote-and-video_video iframe {
  height: 100%;
  aspect-ratio: 16 / 9;
  width: 100%;
  }



/*  -----
    Portfolio Landing Page
    ------------------------ */

/* use in combo with .image-shell for proper background image sizing */
.portfolio-link {
  height: 200px;
  text-decoration: none;
  }

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

    .portfolio-link {
      height: 300px;
      }

  }

  .portfolio-link h2 {
    color: #fff;
    margin-bottom: 0;
    line-height: 1;
    }



/*  -----
    Portfolio Individual Page
    ------------------------ */

.property-details dt {
  margin-bottom: calc(var(--margin-unit) / 4);
  }

.property-details dt::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--brand-lightgray);
  margin: var(--margin-unit) 0;
  }

  .property-details dt:first-of-type::before { display:none; }


/*  -----
    Gallery
    ------------------------ */


.module_gallery {
  gap: 2%;
  }

.module_gallery .image-link {
  min-height: 50px;
  width: 32%;
  aspect-ratio: 3 / 2;
  }


/*  -----
    Four Philosophy Links
    ------------------------ */



.module_bottom-links {
  background-color: #f0efed;
  }

.module_bottom-links h3 {
  color: #614f36;
  }


.module_bottom-links__links {
  flex-wrap: wrap;
  }

  .module_bottom-links__links a {
    color: #908b83;
    font-size: 1.2rem;
    background-color: #ddd8c1;
    border-radius: var(--border-radius);
    text-align: center;
    text-decoration: none;
    width: 46%;
    height: 8rem;
    line-height: 8rem;
    transition: all .3s ease;
    position: relative;
    box-shadow: 
      0 0 0 0px #f0efed,
      0 0 0 0px #e2dedb;
    margin-bottom: var(--margin-unit);
    }

    .module_bottom-links__links a:hover {
      color: #0a364c;
      box-shadow: 
        0 0 0 5px #f0efed,
        0 0 0 6px #e2dedb;
      }

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

      .module_bottom-links__links a {
        width: 22%;
        margin-bottom: 0;
        }

    }



/*  -----
    Form Design
    ------------------------ */

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  padding: calc(var(--margin-unit) / 2);
  background-color: var(--brand-ultralightgray);
  border: 1px solid var(--brand-mediumgray);
  }

.honeypot {
  position: absolute;
  left: -9999px;
  }

.alert {
  color: var(--brand-red);
  }

.form textarea {
  width: 100%;
  }


/*  ------------------------
    ------------------------

    Footer

    ------------------------
    ------------------------ */


footer {
  background-image: linear-gradient(
    180deg,
    hsl(205deg 28% 17%) 0%,
    hsl(205deg 27% 18%) 11%,
    hsl(204deg 26% 18%) 22%,
    hsl(204deg 25% 19%) 33%,
    hsl(204deg 24% 20%) 44%,
    hsl(203deg 23% 21%) 56%,
    hsl(203deg 22% 22%) 67%,
    hsl(202deg 22% 22%) 78%,
    hsl(202deg 21% 23%) 89%,
    hsl(202deg 20% 24%) 100%
  );
  }

footer.fixed {
  position: fixed;
  z-index: 2;
  bottom: 0;
  }

footer p {
  color: rgb(255 255 255 / .5);
  }

.footer-content__address span {
  display: block;
  }

.footer-content__socials a {
  width: 38px;
  height: 38px;
  padding: 5px;
  margin-right: 5%;
  opacity: .5;
  transition: all .3s ease;
  }

  .footer-content__socials a:hover,
  .footer-content__socials a:focus {
    opacity: 1;
    }

  .footer-content__socials img {
    min-width: 20px;
    }

.footer-content__logos img {
  width: 130px;
  height: 100%;
  margin-right: 30px;
  }



/*  ---------------------
    z-index reference

    1 - intro link image
    2 - intro link <p>
    3 - intro-link <h2>
    9 - nav dropdowns




    --------------------- */



















/*
 * 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
   ========================================================================== */

/* ==========================================================================
   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;
}


/* ==========================================================================
   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;
  }
}