@charset "UTF-8";
/* test this and this and this 
    christianscienceduxbury.org
    Author: Luke Hatfield
    URL:    http://christianscienceduxbury.org
    Created: Fall 2017
*/
/* Imports
-------------------------------------------------- */
/* Reset
 * from Kirby @ https://github.com/getkirby/starterkit/blob/master/assets/css/main.css
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

* {
  outline: none;
}

a, a:focus {
  text-decoration: none;
  color: inherit;
}

a {
  outline: none;
}

a[href^=tel] {
  border: none;
}

img {
  display: block;
  max-width: 100%;
  width: 100%;
}

li {
  list-style-type: none;
}

input {
  border-radius: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.iframe-wrapper iframe {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

@-moz-document url-prefix() {
  fieldset {
    display: table-cell;
  }
}
html {
  font-size: 10px;
}

/*


  __|              |
 |     _ \   __ \   __|   __|
 __|  (   |  |   |  |   \__ \
_|   \___/  _|  _| \__| ____/


*/
/*
    Dimensions for easier responsive styling
*/
/* Gutters
-------------------------------------------------- */
/* Sizes
-------------------------------------------------- */
/* Margins
-------------------------------------------------- */
/* Breakpoints
* mainly from http://callmenick.com/post/maintainable-responsive-web-design-with-sass    
* usage: 
    @include break(sm) { // use this for min width declarations
    @include break(sm, lg) { // use this for min and max-width declarations
-------------------------------------------------- */
/* 


      ___|         |                   
     |       _ \   |   _ \    __|  __| 
     |      (   |  |  (   |  |   \__ \ 
    \____| \___/  _| \___/  _|   ____/ 



*/
/* Grays
-------------------------------------------------- */
/* General
-------------------------------------------------- */
/* Color Application
-------------------------------------------------- */
/* Helper classes
-------------------------------------------------- */
.black {
  color: #000;
}

/* Fonts
* mainly from https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/
-------------------------------------------------- */
/* General
-------------------------------------------------- */
p {
  margin-bottom: 1rem;
}
@media (min-width: 48em) {
  p {
    margin-bottom: 2rem;
  }
}

/* Type helper classes
-------------------------------------------------- */
h1 {
  font-size: 3.2rem;
}
@media screen and (min-width: 48em) {
  h1 {
    font-size: 5rem;
  }
}
@media screen and (min-width: 72em) {
  h1 {
    font-size: 5.8rem;
  }
}
@media screen and (min-width: 97.5em) {
  h1 {
    font-size: 6.8rem;
  }
}
h1 {
  font-family: "Requiem Display A", "Requiem Display B", Georgia, Cambria, "Times New Roman", Times, serif;
}

.site-title {
  font-size: 2.8rem;
}
@media screen and (min-width: 48em) {
  .site-title {
    font-size: 3rem;
  }
}
@media screen and (min-width: 72em) {
  .site-title {
    font-size: 3rem;
  }
}
@media screen and (min-width: 97.5em) {
  .site-title {
    font-size: 3.6rem;
  }
}
.site-title {
  font-family: "Requiem Display A", "Requiem Display B", Georgia, Cambria, "Times New Roman", Times, serif;
  line-height: 1.1;
}

body {
  font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.6rem;
}
@media screen and (min-width: 72em) {
  body {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 97.5em) {
  body {
    font-size: 2rem;
  }
}
body {
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

/* Sans
-------------------------------------------------- */
.info-column, .hero-column-text {
  font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.8rem;
}
@media screen and (min-width: 48em) {
  .info-column, .hero-column-text {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 72em) {
  .info-column, .hero-column-text {
    font-size: 2rem;
  }
}
@media screen and (min-width: 97.5em) {
  .info-column, .hero-column-text {
    font-size: 2rem;
  }
}
.info-column, .hero-column-text {
  font-weight: 300;
  line-height: 1.25;
}

h2 {
  font-family: "Verlag A", "Verlag B", Arial, sans-serif;
  font-size: 2.6rem;
}
@media screen and (min-width: 48em) {
  h2 {
    font-size: 2.6rem;
  }
}
@media screen and (min-width: 72em) {
  h2 {
    font-size: 3.2rem;
  }
}
@media screen and (min-width: 97.5em) {
  h2 {
    font-size: 3.2rem;
  }
}
h2 {
  line-height: 1.1;
}

.cta-wrapper, .hero-column-title, h3, .hero-announcement-details, .hero-announcement {
  font-family: "Verlag A", "Verlag B", Arial, sans-serif;
  font-size: 2rem;
}
@media screen and (min-width: 48em) {
  .cta-wrapper, .hero-column-title, h3, .hero-announcement-details, .hero-announcement {
    font-size: 2rem;
  }
}
@media screen and (min-width: 72em) {
  .cta-wrapper, .hero-column-title, h3, .hero-announcement-details, .hero-announcement {
    font-size: 2.2rem;
  }
}
@media screen and (min-width: 97.5em) {
  .cta-wrapper, .hero-column-title, h3, .hero-announcement-details, .hero-announcement {
    font-size: 2.6rem;
  }
}

/* Mixins
-------------------------------------------------- */
.vertically-align-grandparent {
  display: table;
  width: 100%;
  height: 100%;
}

.vertically-align-uncle {
  display: table-row;
}

.vertically-align-parent {
  position: relative;
  transform-style: preserve-3d;
  display: table-cell;
  width: 100%;
  height: 100%;
}

.vertically-align {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Horizontal Align
 -------------------------------------------------- */
/* Clear left for correct alignment of cards in rows
-------------------------------------------------- */
/*
* Font Awesome by Dave Gandy - http://fontawesome.io
* Entypo pictograms by Daniel Bruce — www.entypo.com
*/
/* Icons
-------------------------------------------------- */
svg {
  pointer-events: none;
}

a svg {
  pointer-events: auto;
}

[class^=icon-]:before, [class*=" icon-"]:before {
  vertical-align: middle;
}

.icon-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.icon-stack div {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.slick-arrow {
  width: 6rem;
}
@media (min-width: 48em) {
  .slick-arrow {
    width: 12rem;
  }
}
.slick-arrow {
  height: 6rem;
}
@media (min-width: 48em) {
  .slick-arrow {
    height: 12rem;
  }
}

/* Fontastic
-------------------------------------------------- */
[class^=icon-], [class*=" icon-"] {
  display: inline-block;
  fill: currentColor;
}

/* Links
-------------------------------------------------- */
a {
  color: #EB984E;
}

a:hover {
  text-decoration: none;
}
@media (min-width: ) {
  a:hover {
    color: #EB984E;
  }
}
a:hover {
  color: #000;
}

.footer-title:hover, .logo-mask:hover, .site-toggle-link:hover {
  background-color: transparent;
}

/* inspired by links on medium.com */
.content a, .remodal-description a {
  color: hsl(0, 0%, 15%);
  border-bottom: 3px solid #000;
  box-shadow: inset 0 -4px 0 #000;
  transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.content a:hover, .remodal-description a:hover {
  background: #000;
  color: hsl(0, 0%, 15%);
}

.remodal-description a, figcaption a, .thin-links, .thin-links-wrapper a {
  border-bottom: 1px solid #000;
  color: hsl(0, 0%, 70%);
}
.remodal-description a:hover, figcaption a:hover, .thin-links:hover, .thin-links-wrapper a:hover {
  background: transparent;
}

@media (min-width: ) {
  a.high, .high, .video {
    transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
    cursor: pointer;
  }
  a.high:hover .light, .high:hover .light, .video:hover .light {
    background: #000;
    color: hsl(0, 0%, 15%);
  }
  a.high:hover .light .er, .high:hover .light .er, .video:hover .light .er {
    position: relative;
  }
}

.anchor-link {
  display: block;
  position: relative;
  visibility: hidden;
}
@media (min-width: ) {
  .anchor-link {
    top: -28vw;
  }
}
@media (min-width: ) {
  .anchor-link {
    top: -10vw;
  }
}
@media (min-width: ) {
  .anchor-link {
    top: -17rem;
  }
}

.first-anchor-link {
  top: -20rem;
}

/* Susy
-------------------------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
}

.span-1 {
  max-width: 8.3333333333%;
  flex: 0 0 8.3333333333%;
}
@media (min-width: 48em) {
  .span-1 {
    padding: 0 1.3888888889%;
  }
}

.span-2 {
  max-width: 16.6666666667%;
  flex: 0 0 16.6666666667%;
}
@media (min-width: 48em) {
  .span-2 {
    padding: 0 1.3888888889%;
  }
}

.span-3 {
  max-width: 25%;
  flex: 0 0 25%;
}
@media (min-width: 48em) {
  .span-3 {
    padding: 0 1.3888888889%;
  }
}

.span-4 {
  max-width: 33.3333333333%;
  flex: 0 0 33.3333333333%;
}
@media (min-width: 48em) {
  .span-4 {
    padding: 0 1.3888888889%;
  }
}

.span-5 {
  max-width: 41.6666666667%;
  flex: 0 0 41.6666666667%;
}
@media (min-width: 48em) {
  .span-5 {
    padding: 0 1.3888888889%;
  }
}

.span-6 {
  max-width: 50%;
  flex: 0 0 50%;
}
@media (min-width: 48em) {
  .span-6 {
    padding: 0 1.3888888889%;
  }
}

.span-7 {
  max-width: 58.3333333333%;
  flex: 0 0 58.3333333333%;
}
@media (min-width: 48em) {
  .span-7 {
    padding: 0 1.3888888889%;
  }
}

.span-8 {
  max-width: 66.6666666667%;
  flex: 0 0 66.6666666667%;
}
@media (min-width: 48em) {
  .span-8 {
    padding: 0 1.3888888889%;
  }
}

.span-9 {
  max-width: 75%;
  flex: 0 0 75%;
}
@media (min-width: 48em) {
  .span-9 {
    padding: 0 1.3888888889%;
  }
}

.span-10 {
  max-width: 83.3333333333%;
  flex: 0 0 83.3333333333%;
}
@media (min-width: 48em) {
  .span-10 {
    padding: 0 1.3888888889%;
  }
}

.span-11 {
  max-width: 91.6666666667%;
  flex: 0 0 91.6666666667%;
}
@media (min-width: 48em) {
  .span-11 {
    padding: 0 1.3888888889%;
  }
}

.span-12 {
  max-width: 100%;
  flex: 0 0 100%;
}
@media (min-width: 48em) {
  .span-12 {
    padding: 0 1.3888888889%;
  }
}

.span-xs {
  max-width: 100%;
  flex: 0 0 100%;
}
@media (min-width: 48em) {
  .span-xs {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs {
    padding: 0 1.3888888889%;
  }
}

.span-xs-1 {
  max-width: 8.3333333333%;
  flex: 0 0 8.3333333333%;
}
@media (min-width: 48em) {
  .span-xs-1 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-1 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-2 {
  max-width: 16.6666666667%;
  flex: 0 0 16.6666666667%;
}
@media (min-width: 48em) {
  .span-xs-2 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-2 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-3 {
  max-width: 25%;
  flex: 0 0 25%;
}
@media (min-width: 48em) {
  .span-xs-3 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-3 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-4 {
  max-width: 33.3333333333%;
  flex: 0 0 33.3333333333%;
}
@media (min-width: 48em) {
  .span-xs-4 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-4 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-5 {
  max-width: 41.6666666667%;
  flex: 0 0 41.6666666667%;
}
@media (min-width: 48em) {
  .span-xs-5 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-5 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-6 {
  max-width: 50%;
  flex: 0 0 50%;
}
@media (min-width: 48em) {
  .span-xs-6 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-6 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-7 {
  max-width: 58.3333333333%;
  flex: 0 0 58.3333333333%;
}
@media (min-width: 48em) {
  .span-xs-7 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-7 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-8 {
  max-width: 66.6666666667%;
  flex: 0 0 66.6666666667%;
}
@media (min-width: 48em) {
  .span-xs-8 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-8 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-9 {
  max-width: 75%;
  flex: 0 0 75%;
}
@media (min-width: 48em) {
  .span-xs-9 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-9 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-10 {
  max-width: 83.3333333333%;
  flex: 0 0 83.3333333333%;
}
@media (min-width: 48em) {
  .span-xs-10 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-10 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-11 {
  max-width: 91.6666666667%;
  flex: 0 0 91.6666666667%;
}
@media (min-width: 48em) {
  .span-xs-11 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-11 {
    padding: 0 1.3888888889%;
  }
}

.span-xs-12 {
  max-width: 100%;
  flex: 0 0 100%;
}
@media (min-width: 48em) {
  .span-xs-12 {
    padding: 0 1.3888888889%;
  }
}
@media (min-width: 97.5em) {
  .span-xs-12 {
    padding: 0 1.3888888889%;
  }
}

@media only screen and (min-width: 48em) {
  .span-sm-1 {
    max-width: 8.3333333333%;
    flex: 0 0 8.3333333333%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-1 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-1 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-2 {
    max-width: 16.6666666667%;
    flex: 0 0 16.6666666667%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-2 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-2 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-3 {
    max-width: 25%;
    flex: 0 0 25%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-3 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-3 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-4 {
    max-width: 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-4 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-4 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-5 {
    max-width: 41.6666666667%;
    flex: 0 0 41.6666666667%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-5 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-5 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-6 {
    max-width: 50%;
    flex: 0 0 50%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-6 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-6 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-7 {
    max-width: 58.3333333333%;
    flex: 0 0 58.3333333333%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-7 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-7 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-8 {
    max-width: 66.6666666667%;
    flex: 0 0 66.6666666667%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-8 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-8 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-9 {
    max-width: 75%;
    flex: 0 0 75%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-9 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-9 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-10 {
    max-width: 83.3333333333%;
    flex: 0 0 83.3333333333%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-10 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-10 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-11 {
    max-width: 91.6666666667%;
    flex: 0 0 91.6666666667%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-11 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-11 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) {
  .span-sm-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 48em) {
  .span-sm-12 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 48em) and (min-width: 97.5em) {
  .span-sm-12 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-1 {
    max-width: 8.3333333333%;
    flex: 0 0 8.3333333333%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-1 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-1 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-2 {
    max-width: 16.6666666667%;
    flex: 0 0 16.6666666667%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-2 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-2 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-3 {
    max-width: 25%;
    flex: 0 0 25%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-3 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-3 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-4 {
    max-width: 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-4 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-4 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-5 {
    max-width: 41.6666666667%;
    flex: 0 0 41.6666666667%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-5 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-5 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-6 {
    max-width: 50%;
    flex: 0 0 50%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-6 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-6 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-7 {
    max-width: 58.3333333333%;
    flex: 0 0 58.3333333333%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-7 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-7 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-8 {
    max-width: 66.6666666667%;
    flex: 0 0 66.6666666667%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-8 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-8 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-9 {
    max-width: 75%;
    flex: 0 0 75%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-9 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-9 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-10 {
    max-width: 83.3333333333%;
    flex: 0 0 83.3333333333%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-10 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-10 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-11 {
    max-width: 91.6666666667%;
    flex: 0 0 91.6666666667%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-11 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-11 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) {
  .span-md-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 48em) {
  .span-md-12 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 72em) and (min-width: 97.5em) {
  .span-md-12 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-1 {
    max-width: 8.3333333333%;
    flex: 0 0 8.3333333333%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-1 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-1 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-2 {
    max-width: 16.6666666667%;
    flex: 0 0 16.6666666667%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-2 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-2 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-3 {
    max-width: 25%;
    flex: 0 0 25%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-3 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-3 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-4 {
    max-width: 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-4 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-4 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-5 {
    max-width: 41.6666666667%;
    flex: 0 0 41.6666666667%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-5 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-5 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-6 {
    max-width: 50%;
    flex: 0 0 50%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-6 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-6 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-7 {
    max-width: 58.3333333333%;
    flex: 0 0 58.3333333333%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-7 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-7 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-8 {
    max-width: 66.6666666667%;
    flex: 0 0 66.6666666667%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-8 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-8 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-9 {
    max-width: 75%;
    flex: 0 0 75%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-9 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-9 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-10 {
    max-width: 83.3333333333%;
    flex: 0 0 83.3333333333%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-10 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-10 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-11 {
    max-width: 91.6666666667%;
    flex: 0 0 91.6666666667%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-11 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-11 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) {
  .span-lg-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 48em) {
  .span-lg-12 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 92.5em) and (min-width: 97.5em) {
  .span-lg-12 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-1 {
    max-width: 8.3333333333%;
    flex: 0 0 8.3333333333%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-1 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-1 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-2 {
    max-width: 16.6666666667%;
    flex: 0 0 16.6666666667%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-2 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-2 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-3 {
    max-width: 25%;
    flex: 0 0 25%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-3 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-3 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-4 {
    max-width: 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-4 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-4 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-5 {
    max-width: 41.6666666667%;
    flex: 0 0 41.6666666667%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-5 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-5 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-6 {
    max-width: 50%;
    flex: 0 0 50%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-6 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-6 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-7 {
    max-width: 58.3333333333%;
    flex: 0 0 58.3333333333%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-7 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-7 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-8 {
    max-width: 66.6666666667%;
    flex: 0 0 66.6666666667%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-8 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-8 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-9 {
    max-width: 75%;
    flex: 0 0 75%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-9 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-9 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-10 {
    max-width: 83.3333333333%;
    flex: 0 0 83.3333333333%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-10 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-10 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-11 {
    max-width: 91.6666666667%;
    flex: 0 0 91.6666666667%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-11 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-11 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) {
  .span-xl-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 48em) {
  .span-xl-12 {
    padding: 0 1.3888888889%;
  }
}
@media only screen and (min-width: 118.75em) and (min-width: 97.5em) {
  .span-xl-12 {
    padding: 0 1.3888888889%;
  }
}
/* Accessibility, from https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/
--------------------------

/* 
-------------------------------------------------*/
.anchor-link {
  display: block;
  position: relative;
  top: -5rem;
  visibility: hidden;
}
@media (min-width: 48em) {
  .anchor-link {
    top: -8rem;
  }
}
@media (min-width: 97.5em) {
  .anchor-link {
    top: -4.8rem;
  }
}
@media (min-width: 48em) {
  .anchor-link.with-announcement-bar {
    top: -8rem;
  }
}
@media (min-width: 97.5em) {
  .anchor-link.with-announcement-bar {
    top: -9.8rem;
  }
}

/* Logo
-------------------------------------------------- */
/* The Clearfix™: A classic …, from Kirby */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

/* footer
-------------------------------------------------- */
/* Utilities
-------------------------------------------------- */
/* General
-------------------------------------------------- */
:root {
  --gutter: 1rem;
}

body {
  color: hsl(0, 0%, 15%);
}
body.is-frozen {
  overflow: hidden;
}

.body-wrap {
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 48em) {
  .body-wrap {
    padding: 0 1.3513513514%;
  }
}
@media (min-width: 97.5em) {
  .body-wrap {
    padding: 0 2rem;
  }
}

.row {
  display: flex;
}

h1 {
  text-align: center;
  font-weight: 300;
  font-size: 5rem;
  color: white;
  line-height: 0.85;
  margin-top: 2.5rem;
}
@media (min-width: 48em) {
  h1 {
    margin-top: 5rem;
  }
}

.hero-location {
  font-size: 2.4rem;
}
@media screen and (min-width: 48em) {
  .hero-location {
    font-size: 3.6rem;
  }
}
@media screen and (min-width: 72em) {
  .hero-location {
    font-size: 4rem;
  }
}
@media screen and (min-width: 97.5em) {
  .hero-location {
    font-size: 4.2rem;
  }
}

.hero-announcement {
  color: white;
  text-align: center;
  margin-bottom: 2rem;
}
@media (min-width: 48em) {
  .hero-announcement {
    margin-bottom: 4rem;
  }
}

.hero-announcement-details {
  color: white;
  justify-content: center;
  text-align: center;
  padding-top: 1rem;
}
@media (min-width: 48em) {
  .hero-announcement-details {
    padding-top: 1.5384615385rem;
  }
}
@media (min-width: 97.5em) {
  .hero-announcement-details {
    padding-top: 2rem;
  }
}
.hero-announcement-details {
  margin-top: 1rem;
}
@media (min-width: 48em) {
  .hero-announcement-details {
    margin-top: 2rem;
  }
}
.hero-announcement-details ol {
  max-width: 65%;
  margin: 0 auto;
}
.hero-announcement-details ol li {
  list-style-position: inside;
  list-style-type: decimal;
}

h2 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
@media (min-width: 48em) {
  h2 {
    margin-bottom: 1rem;
  }
}

@media (min-width: 48em) {
  main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.sunday-school-section {
  padding: 2rem 0;
}
@media (min-width: 48em) {
  .sunday-school-section {
    padding: 8rem 0 0 0;
  }
}

section {
  padding: 2rem 0;
}
@media (min-width: 48em) {
  section {
    padding: 8rem 0;
  }
}
section:nth-of-type(even) .row {
  flex-direction: row-reverse;
}

/* Header
-------------------------------------------------- */
/* Hero
-------------------------------------------------- */
.hero-section {
  background-color: #EB984E;
}

.church-image {
  max-width: 120px;
  margin: 0 auto 2rem;
}
@media (min-width: 48em) {
  .church-image {
    margin: 0 auto 4rem;
    max-width: 250px;
    max-width: 200px;
  }
}

.cross-crown-image {
  max-width: 240px;
  margin: 0 auto 4rem;
}

/* Nav
-------------------------------------------------- */
.nav-items {
  display: flex;
  justify-content: center;
  margin-top: 2vh;
  margin-bottom: 8vh;
}

.nav-item {
  padding: 0 1.5rem;
}

.nav-link {
  color: hsl(0, 0%, 15%);
}
.nav-link:hover {
  color: white;
}

.mobile-header {
  display: none;
}
.visible-header .mobile-header {
  display: flex;
  align-items: center;
}

.mobile-nav-logo {
  padding: 5px;
  width: 95px;
  height: 95px;
}

.site-title {
  margin-left: 0.5rem;
}
@media (min-width: 48em) {
  .site-title {
    margin-left: 1rem;
  }
}

/* Visit
-------------------------------------------------- */
.visit-section {
  background-color: #87B5BF;
  padding: 2rem 0;
}
@media (min-width: 48em) {
  .visit-section {
    padding: 6rem 0;
  }
}
.visit-section a {
  color: white;
  box-shadow: inset 0 -1px 0 white;
}

.hero-column-title {
  font-weight: 800;
  line-height: 1.15;
}

.hero-column-text {
  font-weight: 300;
}

.hero-columns {
  text-align: center;
}
@media (min-width: 48em) {
  .hero-columns {
    display: flex;
    justify-content: center;
  }
}

.title-adjustments {
  margin-top: 0rem;
}
@media (min-width: 48em) {
  .title-adjustments {
    margin-top: 4rem;
  }
}

.hero-column {
  color: white;
  margin: 2rem 0;
}
@media (min-width: 48em) {
  .hero-column {
    margin: 0 4rem;
  }
}

.paypal-button-container {
  max-width: 400px;
  margin: 20px auto;
}

.cta-section {
  margin: 4rem;
  display: flex;
  justify-content: center;
}

.cta-wrapper {
  margin: 0 20px;
  color: white;
  font-weight: 400;
}

a.cta-button {
  display: block;
  background-color: white;
  color: #EB984E;
  padding: 5px 10px;
  margin: 0 0 7px;
  box-shadow: none;
  border: 2px solid #EB984E;
}
a.cta-button:hover {
  background-color: #EB984E;
  color: white;
}

a.make-donation-link {
  display: inline-block;
  margin-top: 10px;
}

/* Reading Room
-------------------------------------------------- */
.radio-wrapper {
  margin-top: 2.5rem;
}
@media (min-width: 48em) {
  .radio-wrapper {
    margin-top: 5rem;
  }
}

/* Lecture
-------------------------------------------------- */
/* Camps
-------------------------------------------------- */
.resources {
  border-radius: 40px;
  padding: 0.5rem;
  border: 5px solid #eb984e;
  padding-top: 27px;
  margin-top: 4rem;
}
@media (min-width: 48em) {
  .resources {
    padding: 30px;
    border: 10px solid #eb984e;
    margin: 3rem 12rem 0rem;
  }
}

.resources-title {
  padding: 4rem 0 2rem 0;
  text-align: center;
}

.camps-title {
  text-align: center;
  padding: 2rem 0 4rem 0;
}

.grid-camps {
  display: grid;
  gap: 2rem;
  place-items: center;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  font-weight: bold;
}
@media (min-width: 48em) {
  .grid-camps {
    grid-template-columns: repeat(3, min-content);
    justify-content: center;
    padding: 0rem 0;
  }
}

.blocks-camps {
  width: 13rem;
}
@media (min-width: 48em) {
  .blocks-camps {
    width: 15rem;
  }
}

.schools-title {
  text-align: center;
  padding: 4rem 0 4rem 0;
}

.grid-schools {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  font-weight: bold;
}
@media (min-width: 48em) {
  .grid-schools {
    display: flex;
    justify-content: center;
    padding: 0rem 0;
  }
}

.blocks-schools {
  width: 13rem;
}
@media (min-width: 48em) {
  .blocks-schools {
    width: 15rem;
  }
}

.captions {
  padding: 2rem;
}

/* Slideshow
-------------------------------------------------- */
swiper-container {
  padding: 0 calc(var(--gutter) * 4);
}

swiper-slide {
  padding: calc(var(--gutter) * 2);
}

.slideshow-image {
  border-radius: calc(var(--gutter) / 2);
}

.slidecaption {
  text-align: center;
  padding-top: 2rem;
  font-weight: bold;
}

/* Statement
-------------------------------------------------- */
.statement-title {
  text-align: center;
}

/* Info
-------------------------------------------------- */
.info-section {
  background-color: #87B5BF;
}

.info-column {
  text-align: center;
  font-weight: 300;
  color: white;
}
.info-column a {
  color: white;
}
.info-column a:hover {
  color: hsl(0, 0%, 15%);
}

.address {
  display: block;
  margin-top: 1rem;
}
@media (min-width: 48em) {
  .address {
    margin-top: 2rem;
  }
}
.address {
  margin-bottom: 1rem;
}
@media (min-width: 48em) {
  .address {
    margin-bottom: 2rem;
  }
}
@media (min-width: 48em) {
  .address {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .address {
    margin-right: 2rem;
  }
}
@media (min-width: 48em) and (min-width: 48em) {
  .address {
    margin-left: 2rem;
  }
}

@media (min-width: 48em) {
  .address-inner {
    display: flex;
    justify-content: center;
  }
}

/* Helpers at end of cascade
-------------------------------------------------- */
/* Accessibility, from https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/
--------------------------

/* Helpers
-------------------------------------------------*/
.is-hidden {
  display: none;
}

.is-hidden-important {
  display: none !important;
}

.is-visible {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 0;
}

@media (min-width: 48em) {
  .mobile-only {
    display: none;
  }
}

.no-mobile {
  display: none;
}
@media (min-width: 48em) {
  .no-mobile {
    display: inline-block;
  }
}

.no-mobile-block {
  display: none !important;
}
@media (min-width: 48em) {
  .no-mobile-block {
    display: block !important;
  }
}

.no-tablet-block {
  display: none;
}
@media (min-width: 97.5em) {
  .no-tablet-block {
    display: block;
  }
}

.is-frozen {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
}

.social-media-links {
  display: flex;
  margin: 2rem 0;
  justify-content: center;
}

.phone {
  margin-bottom: 2rem;
}

.social-media-link {
  cursor: pointer;
  background-color: transparent;
}
.social-media-link img {
  border: none;
}
.social-media-link:hover img {
  opacity: 0.5;
}