/* --------------------------- TYPOGRAPHY --------------------------- */

html, body {
    padding: 0;
    margin: 0;
    height:100%;
    width:100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
} 

body, p, .parra, .paragraph {
    font-family: 'HKGrotesk-regular', 'Helvetica', 'Arial', sans-serif;
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.25;
    /* equivalent to 20px */
    font-weight: 400;
}

.parra {
  font-size: 0.875;
  /* equivalent to 16px */
  line-height: 1.5;
  /* looser leading on small screens; tightens to 1.25 at >=768px below */
    font-weight: 400;
}

@media (min-width: 768px) {
  body, p, .paragraph {
    font-size: 1.25em;
    /* equivalent to 25px */
    line-height: 1.375;
    /* equivalent to 22px */
      
  }
    
    .parra {
      font-size: 1em;
      /* equivalent to 16px */
      line-height: 1.25;
      /* equivalent to 20px */
      font-weight: 400;
}   
}


/*p {
  padding-top: 0;
  margin: 0 auto 1em auto;
}
@media (min-width: 43.75em) {
  p {
    max-width: 36em;
  }
}
@media (min-width: 56.25em) {
  p {
    max-width: 38em;
  }
}*/

@media (min-width: 768px) {

}*/

@media (min-width: 992px) {
 .container{
      padding-right: 30px;
      padding-left: 30px;
    
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
    
}

h1, h2, h3, h4, h5, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5 {
    font-family: 'HKGrotesk-bold', 'Helvetica', 'Arial', sans-serif;
   color:#111;
    letter-spacing: normal;
}

h1, .heading-1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  letter-spacing: 0.01em;
   /*tighten up 'display type' headers on smaller displays */
  line-height: 1.25;
  /* 45px / 36px */
  margin-top: 0.9375em;
  /* (20px / 32px) * 1.5 */
  margin-bottom: 0.3125em;
  /* (20px / 32px) * .5 */
}
@media (min-width: 768px) {
  h1, .heading-1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    letter-spacing: normal;
    line-height: 1.125;
    /* 45px / 40px */
    margin-top: 0px;
    /* (22px / 45px) * 1.5 */
    margin-bottom: 0.24444445em;
    /* (22px / 45px) * .5 */
    /*max-width: 14.4em;*/
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 992px) {
  h1, .heading-1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    letter-spacing: normal;
    line-height: 1.563;
    /* keep to a multiple of the 20px line height and something more appropriate for display headings */
    margin-top: 0px;
    /* (22px / 48px) * 1.5 */
    margin-bottom: 0.22916667em;
    /* (22px / 48px) * .5 */
    /*max-width: 12.66667em;*/
    margin-left: auto;
    margin-right: auto;
  }
}
#page > header h1 {
  max-width: 100%;
}
.font-scale-inactive h1 {
  font-size: 3em;
}

h2, .heading-2 {
  font-size: 1.625em;
  /* 1.625x body copy size = 26px */
  line-height: 30px;
  /* 30px / 26px */
  margin-top: 0px;
  /* (20px / 26px) * 1.5 */
  margin-bottom: 20px
  /* (20px / 26px) * .5 */
}
@media (min-width: 768px) {
  h2, .heading-2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25;
    margin-top: 0px;
    /* (22px / 32px) * 1.5 */
    margin-bottom: 22px;
    /* (22px / 32px) * .5 */
   /* max-width: 18em;*/
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 992px) {
  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
    margin-top: 0px;
    /* (22px / 32px) * 1.5 */
    margin-bottom: 22px;
    /* (22px / 32px) * .5 */
    /*max-width: 16.88889em;*/
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 992px) {
.heading-2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
    margin-top: 0px;
    /* (22px / 32px) * 1.5 */
    margin-bottom: 22px;
    /* (22px / 32px) * .5 */
    /*max-width: 16.88889em;*/
    margin-left: auto;
    margin-right: auto;
  }
}
.font-scale-inactive h2 {
  font-size: 2.25em;
}

h3, .heading-3 {
  font-size: 1.375em;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364;
  /* 25px / 22px */
  margin-top: 0px;
  /* (20px / 22px) * 1.5 */
  margin-bottom: 0.45454546em;
  /* (20px / 22px) * .5 */
}
@media (min-width: 768px) {
  h3, .heading-3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25;
    margin-top: 0px;
    /* (22px / 24px) * 1.5 */
    margin-bottom: 0.45833334em;
    /* (22px / 24px) * .5 */
   /* max-width: 26.18182em;*/
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 992px) {
  h3, .heading-3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25;
    margin-top: 0px;
    /* (22px / 24px) * 1.5 */
    margin-bottom: 0.45833334em;
    /* (22px / 24px) * .5 */
   /* max-width: 21.71429em;*/
    margin-left: auto;
    margin-right: auto;
  }
}
.font-scale-inactive h3 {
  font-size: 1.75em;
}

h4, .heading-4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
  margin-top: 0px;
  /* (20px / 18px) * 1.5 */
  margin-bottom: 0.55555556em;
  /* (20px / 18px) * .5 */
}
@media (min-width: 768px) {
  h4, .heading-4 {
    line-height: 1.22222222;
    /* (22px / 18px */
    margin-top: 0px;
    /* (22px / 18px) * 1.5 */
    margin-bottom: 0.61111111em;
    /* (22px / 18px) * .5 */
    /*max-width: 32em;*/
    margin-left: auto;
    margin-right: auto;
  }
}
/*@media (min-width: 992px) {
  h4 {
    max-width: 33.77778em;
  }
}*/
.font-scale-inactive h4 {
  font-size: 1.125em;
}

/* comments */
#comments h3 {
  margin-bottom: 0;
}
#comments .source {
  font-size: .75em;
  /* 12px / 16px */
  line-height: 1.33333333em;
  /* 16px / 12px - set the line height back to body copy size */
  color: #a1a1a1;
  display: block;
  margin-bottom: 0.83333334em;
  /* (20px / 12px) / 2: bring the title, comment closer together */
}

/* Blockquote styles */
blockquote {
  width: 85%;
  margin-top: 1em;
  /* (20px / 20px) */
  margin-bottom: 1em;
  /* (20px / 20px) * .5 */
  margin-right: auto;
  margin-left: auto;
  font-size: 1.25em;
  /* 20px / 16px */
  line-height: 1.25;
  /* 25px / 20px */
  font-family: "PT Serif", Georgia, "Times New Roman";
  font-weight: 300;
  font-style: normal;
  position: relative;
}
@media (min-width: 768px) {
  blockquote {
    font-size: 1.5em;
    /* 24px / 16px = */
    line-height: 1.45833333;
    /* 35px / 24px */
    width: 50%;
    max-width: 11.6666667em;
    /* 17.5em (or half the max paragraph width) / 1.5 = 11.6666667 */
  }
}
.font-scale-inactive blockquote {
  font-size: 1.5em;
}

@media (min-width: 768px) {
  blockquote.left {
    float: left;
    margin-top: 0.68750001em;
    /* ((22px / 24px) * 1.5): 1.37500001 - ((22px / 24px) * .75): 0.6875 - compensate for no margin collapse */
    margin-bottom: 0.45833334em;
    /* (22px / 24px) * .5 */
    margin-right: .5em;
    margin-left: -1em;
    padding-left: .5em;
  }
}

@media (min-width: 768px) {
  blockquote.right {
    float: right;
    margin-top: 0.68750001em;
    /* ((22px / 24px) * 1.5) / 2 - compensate for no margin collapse with paragraphy above */
    margin-bottom: 0.45833334em;
    /* (22px / 24px) * .5 */
    margin-left: .5em;
    margin-right: -1em;
    padding-right: 1em;
  }
}





/* ************************** Work pages specifically ************************* */

/*.intro-text {
    text-align: center;
    padding: 50px 15px;
}*/

.w-intro, .h-intro, .p-intro {
  margin-top: 0px;
  /* (20px / 26px) * 1.5 */
  margin-bottom: 20px;
  /* (20px / 26px) * .5 */
}
@media (min-width: 768px) {
    .w-intro {
    margin-bottom: 22px;
    /* (22px / 32px) * .5 */
   /* max-width: 18em;*/
  }
    
}
@media (min-width: 992px) {
 .w-intro, .h-intro {
     margin-bottom: 35px;
  }
    .h-intro {
        margin-top: 13px;
    }
    .p-intro {
        margin-top: 8px;
    }
}



/*.w-copy {
    padding: 20px 0;
}*/

.underliner {
    border-bottom: 5px solid #000;
    margin: 20px -0;
}
    
    
.next-up, .previous-up {
    height: 75px;
    padding-right: 30px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    
}

.next-up {
     justify-content: flex-end;
}

.footer-address a {
    color:#fff;
    
}

.footer-address a:hover {
    color:red;
    cursor: pointer;
    
}

.previous-up a, .next-up a{
    color: #330047
}
.previous-up a:hover, .next-up a:hover{
    color: red
}

.img-caption {
    margin-top: 10px;
    text-align: right;
    font-size: 14px;
    margin: 10px 10px 20px;
}

@media (min-width: 768px) {
    .img-caption {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
}
/*@media (min-width: 992px) {
    .img-caption {
        margin-bottom: 30px;
    }
}*/
.home-caption {
    margin-top: 10px;
    text-align: left;
    font-size: 1rem;
    margin: 10px 10px 20px;
}

@media (min-width: 768px) {
    .home-caption {
        font-size: 1.25rem;
        margin-bottom: 30px;
    }
    
}
/*@media (min-width: 992px) {
    .home-caption {
        margin-bottom: 30px;
    }
}*/