@charset "UTF-8";
/*
  https://coolors.co/395269-f4f1de-e07a5f-81b29a-f2cc8f
 */
/* Core Stuff */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  line-height: 1.7;
  color: #606d6e;
  background-color: #c2cdd6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #454B4D;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-bottom: 0;
}

a {
  color: #0405F5;
}
a:active, a:visited {
  color: #18239F;
}

pre {
  background: #f0f0f0;
  margin: 1rem 0;
  border-radius: 2px;
}

blockquote {
  border-left: 10px solid #eeeeee;
  margin: 0;
  padding: 0 2rem;
}

iframe {
  width: 100%;
}

main {
  margin: 0 auto;
  max-width: 1040px;
  background-color: #FFFFFF;
  min-height: calc(100vh - 77px);
}

/* Utility Classes */
@media (min-width: 768px) {
  .wrapper {
    margin: 0;
  }
}

.padding {
  padding: 3rem 1rem;
}

.left {
  float: left;
}

.right {
  float: right;
}

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

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

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

img {
  width: 100%;
}

p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

.header .padding {
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .header .padding {
    padding: 1rem 0;
  }
}

.header .wrapper {
  height: 48px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1040px;
}
@media (min-width: 768px) {
  .header .wrapper {
    height: auto;
  }
}

.header {
  background-color: #395269;
  color: #eeeeee;
}

.header a {
  color: #FFFFFF;
}

.header .logo {
  margin: auto 0;
  font-size: 1.2rem;
  text-decoration: none;
}

.header .logo svg {
  width: 4rem;
  vertical-align: middle;
}

.footer {
  background-color: #eee;
}

#skip-navigation {
  position: absolute;
  left: -100%;
  top: 0;
  background-color: #FFFFFF;
  color: #000000;
  padding: 0.5rem 1rem;
}
#skip-navigation:focus {
  left: 0;
}

@media (max-width: 767px) {
  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    top: 48px;
    right: 0;
    bottom: 0;
    height: calc(100vh - 48px);
    z-index: 5;
    background-color: #2F4456;
    overflow-y: auto;
  }
  body.mobile-nav-active .main-nav {
    display: block;
  }
}

@media (max-width: 767px) {
  body.mobile-nav-active {
    max-height: 100vh;
    overflow: hidden;
  }
}
.mobile-menu {
  display: none;
}
@media (max-width: 767px) {
  .mobile-menu {
    display: block;
  }
}
.mobile-menu .button-container {
  display: block;
  background: transparent;
  border: none;
  position: relative;
  height: 32px;
  width: 32px;
  transition: opacity 0.25s ease, top 0.5s ease;
}
body.mobile-nav-active .mobile-menu .button-container .top {
  transform: translateY(10.6666666667px) translateX(0) rotate(45deg);
  background: #f0f0f0;
}
body.mobile-nav-active .mobile-menu .button-container .middle {
  opacity: 0;
  background: #f0f0f0;
}
body.mobile-nav-active .mobile-menu .button-container .bottom {
  transform: translateY(-10.6666666667px) translateX(0) rotate(-45deg);
  background: #f0f0f0;
}
.mobile-menu .button-container span {
  background: #FFFFFF;
  border: none;
  height: 4px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
}
.mobile-menu .button-container span:nth-of-type(2) {
  top: 10.6666666667px;
}
.mobile-menu .button-container span:nth-of-type(3) {
  top: 21.3333333333px;
}

.main-nav ul {
  text-align: center;
  letter-spacing: -1em;
  margin: 0;
  padding: 0;
}
@media (max-width: 767px) {
  .main-nav ul {
    text-align: left;
  }
}

.main-nav ul li {
  letter-spacing: normal;
}
@media (min-width: 768px) {
  .main-nav ul li {
    display: inline-block;
  }
}

.main-nav ul li .nav-item {
  position: relative;
  display: block;
  line-height: 45px;
  color: #FFFFFF;
  padding: 0 20px;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.main-nav > ul > li > .nav-item {
  border-radius: 2px;
}

/*Active dropdown nav item */
@media (min-width: 768px) {
  .main-nav ul li:hover > .nav-item,
.main-nav ul li:focus-within > .nav-item {
    background-color: #2F4456;
  }
}
/* Selected Dropdown nav item */
@media (min-width: 768px) {
  .main-nav ul li.selected > .nav-item {
    background-color: #B5BFC7;
    color: #2F4456;
  }
}
/* Dropdown CSS */
.main-nav ul li {
  position: relative;
}

.main-nav ul li ul {
  background-color: #2F4456;
  text-align: left;
  padding-left: 1rem;
}
@media (min-width: 768px) {
  .main-nav ul li ul {
    background-color: #395269;
    padding-left: 0;
    position: absolute;
    min-width: 100%;
    display: none;
  }
}

.main-nav ul li ul li {
  display: block;
}

/* Dropdown CSS */
.main-nav ul li ul ul {
  left: 100%;
  top: 0;
}

/* Active on Hover */
.main-nav li:hover > ul,
.main-nav li:focus-within > ul {
  display: block;
}

/* Child Indicator */
.main-nav .has-children > .nav-item {
  padding-right: 30px;
}

@media (min-width: 768px) {
  .main-nav .has-children > .nav-item:after {
    font-family: FontAwesome;
    content: "";
    position: absolute;
    display: inline-block;
    right: 8px;
    top: 0;
  }

  .main-nav .has-children .has-children > .nav-item:after {
    content: "";
  }
}
.sermon-list {
  padding: 0;
  list-style: none;
  border: 2px solid #606d6e;
  border-radius: 3px;
}

.sermon-item {
  display: block;
  background-color: #eeeeee;
  padding: 1rem;
}
.sermon-item:nth-child(odd) {
  background-color: #FFFFFF;
}

.sermon-title {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .sermon-title {
    flex-direction: column;
  }
}

.sermon-title__title {
  font-size: 1.25rem;
}

@media (max-width: 767px) {
  .sermon-title__passage {
    font-size: 1rem;
  }
}

.sermon-info {
  font-size: 0.9rem;
}

.sermon-recordings ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
}

.image-aside {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.image-aside * {
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .image-aside {
    flex-direction: row;
    padding: 1.5rem;
  }
}

.image-aside__content {
  width: 100%;
  order: 1;
}
@media (min-width: 768px) {
  .image-aside__content {
    width: 60%;
    order: 0;
  }
  .image-aside__content + .image-aside__image {
    margin-left: 1rem;
  }
  .image-aside__image + .image-aside__content {
    margin-left: 1rem;
  }
}

.image-aside__image {
  width: 100%;
}
@media (min-width: 768px) {
  .image-aside__image {
    width: 40%;
  }
}
.image-aside__image img {
  width: 100%;
  max-width: 100%;
}

.image-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem;
}
.image-panel * {
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .image-panel {
    flex-direction: row;
  }
}

.image-panel__image {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
}
@media (min-width: 768px) {
  .image-panel__image + .image-panel__image {
    margin-left: 1rem;
  }
}

.directions-map {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem;
}
@media (min-width: 768px) {
  .directions-map {
    flex-direction: row;
    padding: 1.5rem;
  }
}

.directions-map__info {
  margin: auto;
  font-size: 1.2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .directions-map__info {
    width: 40%;
  }
}

.directions-map__map {
  width: 100%;
}
@media (min-width: 768px) {
  .directions-map__info + .directions-map__map {
    width: 60%;
  }
}

.image-centered {
  width: 100%;
  display: flex;
  padding: 1rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .image-centered {
    padding: 1.5rem;
  }
}
.image-centered .image-centered__image {
  margin: auto;
  display: block;
  width: 50%;
}
.image-centered .image-centered__image.percent-eighty {
  width: 80%;
}
.image-centered .image-centered__image.percent-seventy {
  width: 70%;
}
.image-centered .image-centered__image.percent-sixty {
  width: 60%;
}
.image-centered .image-centered__image.percent-forty {
  width: 40%;
}
.image-centered .image-centered__image.percent-thirty {
  width: 30%;
}
.image-centered .image-centered__image.percent-twenty {
  width: 20%;
}
@media (max-width: 767px) {
  .image-centered .image-centered__image.mobile-eighty {
    width: 80%;
  }
  .image-centered .image-centered__image.mobile-seventy {
    width: 70%;
  }
  .image-centered .image-centered__image.mobile-sixty {
    width: 60%;
  }
  .image-centered .image-centered__image.mobile-forty {
    width: 40%;
  }
  .image-centered .image-centered__image.mobile-thirty {
    width: 30%;
  }
  .image-centered .image-centered__image.mobile-twenty {
    width: 20%;
  }
}

.text-columns {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem;
}
@media (min-width: 768px) {
  .text-columns {
    flex-direction: row;
    padding: 1.5rem;
  }
}

.text-column {
  width: 100%;
  box-sizing: border-box;
}
.text-column img {
  max-width: 100%;
  width: auto;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .text-column + .text-column {
    margin-top: 2rem;
  }
}
@media (min-width: 768px) {
  .text-column + .text-column {
    margin-left: 2rem;
  }
}

.quote-block {
  background-color: #FFFFFF;
  text-align: center;
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .quote-block {
    padding: 3rem;
  }
}
.quote-block.eggshell {
  background-color: #F4F1DE;
}
.quote-block.eggshell a {
  color: rgba(0, 0, 0, 0.65);
}
.quote-block.terra-cotta {
  background-color: #E07A5F;
  color: #FFFFFF;
}
.quote-block.terra-cotta a {
  color: rgba(255, 255, 255, 0.8);
}
.quote-block.green-sheen {
  background-color: #81B29A;
  color: #000000;
}
.quote-block.green-sheen a {
  color: rgba(0, 0, 0, 0.7);
}
.quote-block.dark {
  background-color: #2F4456;
  color: #FFFFFF;
}
.quote-block.dark a {
  color: rgba(255, 255, 255, 0.8);
}
.quote-block.quote-italic {
  font-style: italic;
}
.quote-block.quote-bold {
  font-weight: bold;
}
.quote-block.quote-italicbold {
  font-weight: bold;
  font-style: italic;
}

.quote-block__content {
  font-size: 1.35rem;
  width: 100%;
}
.quote-block__content p {
  margin: 0;
}
@media (min-width: 768px) {
  .quote-block__content {
    font-size: 2rem;
  }
  .quote-block__content.width-seventyfive {
    width: 75%;
  }
  .quote-block__content.width-fifty {
    width: 50%;
  }
}
.quote-block__content.content-centerjustified {
  text-align: justify;
  margin: 0 auto;
}
.quote-block__content.content-centerleft {
  text-align: left;
  margin: 0 auto;
}
.quote-block__content.content-center {
  text-align: center;
  margin: 0 auto;
}
.quote-block__content.content-leftjustified {
  text-align: justify;
}
.quote-block__content.content-left {
  text-align: left;
}

.quote-block__attribution {
  font-size: 1.15rem;
}
@media (min-width: 768px) {
  .quote-block__attribution {
    font-size: 1.5rem;
  }
  .quote-block__content.width-fifty + .quote-block__attribution {
    width: 50%;
  }
  .quote-block__content.width-seventyfive + .quote-block__attribution {
    width: 75%;
  }
}
.quote-block__attribution.attribution-center {
  margin: 0 auto;
  text-align: center;
}
.quote-block__attribution.attribution-left {
  margin: 0 auto;
  text-align: left;
}
.quote-block__attribution.attribution-right {
  margin: 0 auto;
  text-align: right;
}

.text-block {
  padding: 1rem;
}
@media (min-width: 768px) {
  .text-block {
    padding: 1.5rem;
  }
}

/* Modular */

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