/*
0 - 600px:          Phone
600 - 900px:        Tablet Portrait
900 - 1200px:       Tablet Landscape
[1200 - 1800px]:    This is where normal styles apply
1800px + :          Big Desktop


$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px

*/
/*-----------------------------------------------------*/
/*GENERAL PAGE FORMATTING*/
/*-----------------------------------------------------*/
@import url("reset.css");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }
  @media (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 50%; } }
  @media (min-width: 112.5em) {
    html {
      font-size: 75%; } }

body {
  background: #37034e;
  color: #fff;
  font-family: 'PT Sans Narrow', Arial, sans-serif;
  text-transform: uppercase; }

a {
  color: #fff;
  text-decoration: none; }

.u-center-text {
  text-align: center !important; }

.u-margin-bottom-small {
  margin-bottom: 1rem !important; }

.u-margin-bottom-medium {
  margin-bottom: 2rem !important; }

.u-margin-bottom-large {
  margin-bottom: 3rem !important; }

.u-margin-bottom-big {
  margin-bottom: 4rem !important; }

.u-margin-bottom-huge {
  margin-bottom: 6rem !important; }

::selection {
  background-color: #601880;
  color: #fff; }

a.is-demo { pointer-events: none; cursor: default; }

/* .cov__container {
  position: absolute;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  border: 6px red solid;
  width: 50%;
  height: 180px;
  padding: 1rem 3rem;
  margin: 2rem;
  z-index: 10000;
  overflow: hidden; } */
  /* @media screen and (max-width: 790px) {
    .cov__container {
      width: 90%;
      bottom: 0;
      margin: 0;
      right: 50%;
      transform: translateX(50%); } }
  @media screen and (max-width: 550px) {
    .cov__container {
      top: 6.5rem;
      padding: .25rem .25rem;
      height: 130px;
      border: 3px red solid;
      width: 95%; } }
  @media screen and (max-width: 445px) {
    .cov__container {
      background: rgba(255, 255, 255, 0.9); } }
  @media screen and (max-width: 360px) {
    .cov__container {
      height: 170px;
      top: 1rem; } } */

/* .cov-heading {
  color: #37034e;
  font-size: 2.5rem;
  margin-bottom: .75rem; } */
  /* @media screen and (max-width: 550px) {
    .cov-heading {
      margin-bottom: 0; } }
  @media screen and (max-width: 445px) {
    .cov-heading {
      font-size: 2rem; } } */

/* .cov__paragraph {
  color: darkred;
  font-size: 1.6rem;
  text-transform: none;
  margin-bottom: 1rem; } */
  /* @media screen and (max-width: 550px) {
    .cov__paragraph {
      margin-bottom: 1rem;
      padding: 0 2rem; } }
  @media screen and (max-width: 360px) {
    .cov__paragraph {
      padding: 0; } } */

/* .cov-schedule {
  color: #37034e;
  font-size: 2rem;
  text-transform: none;
  margin-bottom: 1rem; } */
  /* @media screen and (max-width: 550px) {
    .cov-schedule {
      font-size: 2rem;
      margin-bottom: .5rem;
      line-height: .8; } } */

/* .cov-link {
  font-size: 2rem;
  text-transform: none;
  line-height: 1.5; } */
  /* @media screen and (max-width: 550px) {
    .cov-link {
      font-size: 2rem; } } */

/* .cov__link {
  text-decoration: none;
  color: #601880; } */

.svg__container {
  position: relative;
  display: block;
  width: 100vw;
  height: 100vh; }

.svg__container--top {
  position: absolute;
  top: 12vh;
  left: 15px; }

svg {
  overflow: visible;
  width: auto;
  height: 11rem; }

#f, #o1, #l1, #l2, #o2, #w, #i, #n, #g,
#j, #e, #s1, #u, #s2,
#t1-2, #o-2, #g-2, #e1-2, #t2-2, #h-2, #e2-2, #r-2 {
  stroke: #fff;
  opacity: .4;
  stroke-width: .5px;
  fill: transparent; }

#f {
  stroke-dasharray: 201px;
  stroke-dashoffset: -201px;
  animation: f-anim 3.75s linear 0s forwards; }

#o1 {
  stroke-dasharray: 68px;
  stroke-dashoffset: -68px;
  animation: o1-anim 3.75s linear 0s forwards; }

#l1 {
  stroke-dasharray: 145px;
  stroke-dashoffset: -145px;
  animation: l1-anim 3.75s linear 0s forwards; }

#l2 {
  stroke-dasharray: 145px;
  stroke-dashoffset: -145px;
  animation: l2-anim 3.75s linear 0s forwards; }

#o2 {
  stroke-dasharray: 68px;
  stroke-dashoffset: -68px;
  animation: o2-anim 3.75s linear 0s forwards; }

#w {
  stroke-dasharray: 210px;
  stroke-dashoffset: -210px;
  animation: w-anim 3.75s linear 0s forwards; }

#i {
  stroke-dasharray: 101px;
  stroke-dashoffset: -101px;
  animation: i-anim 3.75s linear 0s forwards; }

#n {
  stroke-dasharray: 190px;
  stroke-dashoffset: -190px;
  animation: n-anim 3.75s linear 0s forwards; }

#g {
  stroke-dasharray: 144px;
  stroke-dashoffset: -144px;
  animation: g-anim 3.75s linear 0s forwards; }

#j {
  stroke-dasharray: 142px;
  stroke-dashoffset: -142px;
  animation: j-anim 3.75s linear 0s forwards; }

#e {
  stroke-dasharray: 81px;
  stroke-dashoffset: -81px;
  animation: g-anim 3.75s linear 0s forwards; }

#s1 {
  stroke-dasharray: 73px;
  stroke-dashoffset: -73px;
  animation: g-anim 3.75s linear 0s forwards; }

#u {
  stroke-dasharray: 147px;
  stroke-dashoffset: -147px;
  animation: g-anim 3.75s linear 0s forwards; }

#s2 {
  stroke-dasharray: 73px;
  stroke-dashoffset: -73px;
  animation: g-anim 3.75s linear 0s forwards; }

#t1-2 {
  stroke-dasharray: 149px;
  stroke-dashoffset: -149px;
  animation: t1-2-anim 3.75s linear 0s forwards; }

#o-2 {
  stroke-dasharray: 52px;
  stroke-dashoffset: -52px;
  animation: o-2-anim 3.75s linear 0s forwards; }

#g-2 {
  stroke-dasharray: 109px;
  stroke-dashoffset: -109px;
  animation: g-2-anim 3.75s linear 0s forwards; }

#e1-2 {
  stroke-dasharray: 81px;
  stroke-dashoffset: -81px;
  animation: e1-2-anim 3.75s linear 0s forwards; }

#t2-2 {
  stroke-dasharray: 95px;
  stroke-dashoffset: -95px;
  animation: t2-2-anim 3.75s linear 0s forwards; }

#h-2 {
  stroke-dasharray: 175px;
  stroke-dashoffset: -175px;
  animation: h-2-anim 3.75s linear 0s forwards; }

#e2-2 {
  stroke-dasharray: 81px;
  stroke-dashoffset: -81px;
  animation: e2-2-anim 3.75s linear 0s forwards; }

#r-2 {
  stroke-dasharray: 83px;
  stroke-dashoffset: -83px;
  animation: r-2-anim 3.75s linear 0s forwards; }

@keyframes f-anim {
  from {
    stroke-dashoffset: 201px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes o1-anim {
  from {
    stroke-dashoffset: 68px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes l1-anim {
  from {
    stroke-dashoffset: 145px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes l2-anim {
  from {
    stroke-dashoffset: 145px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes o2-anim {
  from {
    stroke-dashoffset: 68px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes w-anim {
  from {
    stroke-dashoffset: 210px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes i-anim {
  from {
    stroke-dashoffset: 101px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes n-anim {
  from {
    stroke-dashoffset: 190px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes g-anim {
  from {
    stroke-dashoffset: 144px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes j-anim {
  from {
    stroke-dashoffset: 142px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes e-anim {
  from {
    stroke-dashoffset: 81px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes s1-anim {
  from {
    stroke-dashoffset: 73px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes u-anim {
  from {
    stroke-dashoffset: 147px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes s2-anim {
  from {
    stroke-dashoffset: 73px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes t1-2-anim {
  from {
    stroke-dashoffset: 149px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes o-2-anim {
  from {
    stroke-dashoffset: 52px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes g-2-anim {
  from {
    stroke-dashoffset: 109px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes e1-2-anim {
  from {
    stroke-dashoffset: 81px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes t2-2-anim {
  from {
    stroke-dashoffset: 95px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes h-2-anim {
  from {
    stroke-dashoffset: 175px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes e2-2-anim {
  from {
    stroke-dashoffset: 81px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes r-2-anim {
  from {
    stroke-dashoffset: 83px; }
  to {
    stroke-dashoffset: 0px; } }

/* ********************************************* */
/* ********* RESPONSIVE STYLES ***************** */
/* ********************************************* */
/*-----------------------------------------------------*/
/*MENU FORMATTING*/
/*-----------------------------------------------------*/
/*BACKGROUND IMAGE FORMATTING*/
img.nav__bgimage {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  opacity: 0.8;
  display: none; }

.nav__overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background: transparent url(../img/pattern.png) repeat top left;
  opacity: .9; }

.nav__loading {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #000 url(../img/loader.gif) no-repeat center center;
  width: 50px;
  height: 50px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px 10px 10px 10px;
  z-index: 999;
  opacity: 0.7;
  display: none; }

.nav__content {
  position: fixed;
  height: 90px;
  width: 100%;
  /*menu bar position*/
  top: 35%;
  left: 0px; }

/*FLEXBOX CSS*/
.nav__container {
  display: flex; }

.nav__menu--list {
  display: flex;
  justify-content: flex-end;
  /* flex-direction: column; */ }

/*left menu box*/
/*.nav__content h1*/
.nav__heading {
  background: transparent url(../img/bg_menu-purple.png) repeat top left;
  /*1px image for background:*/
  display: inline-block;
  width: 230px;
  height: 50px;
  padding: 20px;
  font-size: 18px;
  line-height: 15px;
  margin-right: 1px; }

.nav__heading span {
  font-weight: normal;
  font-size: 32px;
  font-weight: bold;
  line-height: 25px; }

/*right menu box*/
.nav__menu {
  background: transparent url(../img/bg_menu-purple.png) repeat top left;
  /*1px image for background:*/
  position: relative;
  height: 90px;
  width: 0px; }

.nav__menu > ul > li {
  position: relative;
  height: 90px;
  overflow: hidden; }

.subitem__condensed {
  line-height: 1; }

.subitem__link {
  text-decoration: none; }

.nav__menu > ul > li > a {
  margin-top: 60px;
  opacity: 0;
  display: block;
  height: 90px;
  padding: 0 2rem;
  text-align: center;
  line-height: 90px;
  outline: none;
  font-size: 1.8rem;
  font-weight: bold; }

.nav__menu--link:hover {
  color: #e0c040; }

.subitem__small {
  font-size: 12px; }

.nav__subitem {
  width: 400px;
  height: 0px;
  /* animate to 400px */
  /*submenu position*/
  top: 45%;
  right: 0px;
  margin-top: 0px;
  /* animate to -200px */
  position: fixed;
  z-index: 99;
  overflow: hidden;
  background: transparent url(../img/bg_menu-purple-dark.png) repeat top left; }

/*.nav__subitem h2*/
.nav__subheading {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  padding: 40px 0px 0px 40px;
  text-shadow: 0px 0px 1px #000; }

.nav__subheading--sub {
  font-size: 18px;
  font-weight: bold;
  color: #e0c040;
  text-transform: uppercase;
  border-bottom: 1px solid #ccc;
  display: inline-block; }

.subitem__list {
  padding: 0px 40px; }

.subitem__item {
  margin: 15px 0px;
  font-size: 16px; }

.subitem__item--narrow {
  margin: 10px 0px;
  font-size: 16px; }

.subitem2__list {
  padding: 0 4rem; }

.subitem2__item {
  margin: .5rem 0; }

/*submenu designated title listing*/
.subitem__border {
  font-size: 14px;
  text-transform: none;
  border-bottom: 1px dotted rgba(224, 192, 64, 0.8);
  padding-bottom: 15px;
  margin-bottom: 15px; }

.nav__close--text {
  float: right;
  margin: 10px 10px 0 0;
  cursor: pointer;
  opacity: .6;
  font-size: 16px; }

.nav__close--text:hover {
  opacity: 1.0; }

/* ******************************************************** */
/* MOBILE NAVIGATION STYLING - INITIAL DISPLAY STATE 'NONE' */
/* ******************************************************** */
.mob__nav {
  display: none;
  box-sizing: border-box; }

.intro, .schedule-xmas, .schedule-summer, .schedule, .visit, .about,
.bethel, .neighborhood, .belc, .vbs, .giving, .content {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden; }

.intro {
  background-image: url("../img/bethel-header-bible.jpg");
  background-size: cover;
  background-repeat: no-repeat; }

.schedule-xmas {
  background-color: lightblue;
  background-image: url("../img/bethel-header-mob-bethel-xmas.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.schedule-summer {
  background-color: lightblue;
  background-image: url("../img/bethel-header-mob-summer.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.schedule {
  background-color: lightblue;
  background-image: url("../img/bethel-header-mob-bethel.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.visit {
  background-color: lightblue;
  background-image: url("../img/bethel-header-mob-candles.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.about {
  background-color: lightblue;
  background-image: url("../img/bethel-header-mob-bible.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.bethel {
  background-color: lightblue;
  background-image: url("../img/bethel-header-mob-hand.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.neighborhood {
  background-image: url("../img/bethel-header-mob-reading-bible.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.belc {
  background-image: url("../img/bethel-header-mob-belc.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.vbs {
  background-image: url("../img/bethel-header-mob-vbs.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.giving {
  background-image: url("../img/bethel-header-mob-give.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative; }

.banner__brand {
  width: 100%;
  padding: 2rem;
  background: transparent url(../img/bg_menu-purple.png) repeat top left;
  position: fixed;
  top: 30vh;
  left: 0;
  z-index: 100; }

.banner__heading {
  color: white;
  font-size: 1.8rem;
  line-height: 1.5rem;
  text-transform: uppercase; }

.banner__heading span {
  font-weight: normal;
  font-size: 3rem;
  font-weight: bold;
  line-height: 2.5rem; }

.hero__title {
  padding: 2rem 3rem;
  color: white;
  font-family: "Felipa", serif;
  font-size: 3.5rem;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8); }

.banner__schedule {
  line-height: 1;
  font-size: 1.9rem;
  text-transform: uppercase; }

.banner__schedule span {
  font-size: 1.6rem;
  color: #d1abe1; }

.banner__content {
  color: white;
  width: 45vw;
  background: transparent url(../img/bg_menu-purple-dark.png) repeat top left;
  padding: 2rem;
  position: absolute;
  top: 20vh;
  right: 2rem;
  z-index: 200;
  box-shadow: 1rem 1rem 2rem 0.25rem rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.25s 0.4s ease-in;
  will-change: transform, opacity; }

.banner__content.is-visible {
  opacity: 1; }

.banner__content--light {
  background: #8b4da6; }

.contact__link:link,
.contact__link:visited {
  color: #d1abe1;
  text-decoration: none;
  font-weight: bold;
  transition: all .4s; }

.paragraph {
  font-size: 1.8rem;
  border-bottom: 1px dotted #e0c040;
  padding-bottom: 2rem; }

.banner__subheading {
  color: white;
  font-size: 2.5rem;
  text-transform: uppercase; }

.banner__sublink {
  color: white;
  font-size: 2rem;
  text-transform: uppercase; }

.banner__subtitle {
  color: #e0c040;
  font-weight: bold;
  border-bottom: 1px dotted white;
  font-size: 2.5rem;
  text-transform: uppercase; }

.banner__link {
  text-decoration: none;
  color: white; }

.content {
  position: relative;
  padding: 2rem;
  height: 100vh; }

.content__title {
  font-size: 3rem;
  text-align: center;
  color: white;
  margin-bottom: 2rem; }

.content__paragraph {
  font-size: 1.8rem;
  color: white;
  margin-bottom: 2rem; }

/* ********************************************* */
/* ********* RESPONSIVE STYLES ***************** */
/* ********************************************* */
/* @media screen and (max-width: 790px) {
  body {
    background: #37034e; }
  .nav__content {
    display: none; }
  .nav__background {
    display: none; }
  .svg__container {
    display: none; }
  .subnav__container {
    display: none; }
  .mob__nav {
    display: inline-block; } }

@media (max-device-width: 750px) and (orientation: landscape) {
  .hero__title {
    font-size: 2.25rem; }
  .banner__content {
    top: 5vh;
    height: 95vh;
    transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.4s 0.4s ease-in; } }

@media screen and (max-width: 550px) {
  .banner__brand {
    top: 25vh; }
  .banner__content {
    width: 80vw;
    height: auto;
    position: absolute;
    top: 45vh;
    left: 50%;
    transform: translateX(-50%); }
  .hero__title {
    top: 5rem; } } */

.subnav__container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(51, 51, 51, 0.9);
  opacity: .7;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center; }

.subnav__list {
  list-style: none; }

.subnav__item {
  display: inline-block;
  font-size: 1.6rem; }
  .subnav__item:not(:last-child) {
    margin-right: 3rem; }

/* @media screen and (max-width: 790px) {
  .subnav__container {
    display: none; } } */