:root {
  --White: #ffffff;
  --Black: #000000;
  --Blue: #0065a9;
  --DarkBlue: #004575;
  --LightBlue:#85c9f9;
  --LightGray: #e4e2e2;
  --Overlay: #0000002b;
  --DarkOverlay:#00000085;
  --LightOverlay:#d6d6d6ad;
  --BlueOverlay: #0adcf1ab;
}

html, body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: 26px;
}

p {
  font-size: 20px;
}

.hide {
  display: none;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
  height: 50px;
  background-color: transparent;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

@media (max-width: 1000px) {
  #header {
    height: 88px;
  }
}

#header.headerScroll {
  height: 88px;
  background-color: var(--White) !important;
  -webkit-box-shadow: 0 3px 45px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 45px rgba(0, 0, 0, 0.2);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#header .headerWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 95%;
}

#header .headerWrap .menuPop {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 43px;
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 300px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  border-radius: 40px;
  border: solid thin var(--LightGray);
  padding: 5px;
  position: absolute;
  top: 6px;
  right: 20px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#header .headerWrap .menuPop.adjustTopMenuText {
  top: 23px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

@media (max-width: 1000px) {
  #header .headerWrap .menuPop {
    top: 23px;
  }
}

#header .headerWrap .logo {
  position: relative;
  top: 6px;
  left: 25px;
}

@media (max-width: 1000px) {
  #header .headerWrap .logomain {
    display: block !important;
  }
}

@media (max-width: 1000px) {
  #header .headerWrap .logoicon {
    display: none !important;
  }
}

#header .headerWrap .topPhone {
  margin: 0;
  padding: 0 10px;
}

@media (max-width: 570px) {
  #header .headerWrap .topPhone {
    display: none;
  }
}

#header .headerWrap .menuIcon {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 9;
  width: 55px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#header .headerWrap svg {
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

#header .headerWrap .active svg {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

#header .headerWrap path {
  -webkit-transition: stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

#header .headerWrap path:nth-child(1) {
  -webkit-transform-origin: 36% 40%;
          transform-origin: 36% 40%;
}

#header .headerWrap path:nth-child(2) {
  stroke-dasharray: 29 299;
}

#header .headerWrap path:nth-child(3) {
  -webkit-transform-origin: 35% 63%;
          transform-origin: 35% 63%;
}

#header .headerWrap path:nth-child(4) {
  stroke-dasharray: 29 299;
}

#header .headerWrap path:nth-child(5) {
  -webkit-transform-origin: 61% 52%;
          transform-origin: 61% 52%;
}

#header .headerWrap path:nth-child(6) {
  -webkit-transform-origin: 62% 52%;
          transform-origin: 62% 52%;
}

#header .headerWrap .active path:nth-child(1) {
  -webkit-transform: translateX(9px) translateY(1px) rotate(45deg);
          transform: translateX(9px) translateY(1px) rotate(45deg);
}

#header .headerWrap .active path:nth-child(2) {
  stroke-dasharray: 225 299;
  stroke-dashoffset: -72px;
}

#header .headerWrap .active path:nth-child(3) {
  -webkit-transform: translateX(9px) translateY(1px) rotate(-45deg);
          transform: translateX(9px) translateY(1px) rotate(-45deg);
}

#header .headerWrap .active path:nth-child(4) {
  stroke-dasharray: 225 299;
  stroke-dashoffset: -72px;
}

#header .headerWrap .active path:nth-child(5) {
  -webkit-transform: translateX(9px) translateY(1px) rotate(-45deg);
          transform: translateX(9px) translateY(1px) rotate(-45deg);
}

#header .headerWrap .active path:nth-child(6) {
  -webkit-transform: translateX(9px) translateY(1px) rotate(45deg);
          transform: translateX(9px) translateY(1px) rotate(45deg);
}

#header .nav {
  position: fixed;
  z-index: 999;
  text-align: right;
  padding: 20px;
  max-width: 300px;
  top: 55px;
  right: 0;
  -webkit-transform: translateX(255px);
          transform: translateX(255px);
  background-color: var(--White);
  height: 100vh;
  -webkit-box-shadow: -7px 8px 9px rgba(0, 0, 0, 0.1);
          box-shadow: -7px 8px 9px rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1000px) {
  #header .nav {
    top: 87px;
  }
}

#header .nav.showMenu {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

#header .nav.adjustMenu {
  top: 87px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#header .nav .navWrap .nav-ul .nav-item {
  position: relative;
  z-index: 999;
  list-style: none;
  font-size: 20px;
  border-bottom: solid thin var(--LightGray);
}

#header .nav .navWrap .nav-ul .nav-item .nav-link {
  color: var(--Black);
  text-transform: uppercase;
}

#header .nav .navWrap .topPhone {
  margin-left: 30px;
}

#wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#wrapper #top {
  position: relative;
  top: 0;
  margin-top: 10px;
  width: 100%;
  height: 100vh;
  background: url(../img/church-bg.jpg) no-repeat fixed center center;
  background-size: cover;
}

@media (max-width: 1000px) {
  #wrapper #top {
    background: url(../img/church-front-modile-bg.jpg) no-repeat center center;
    background-size: cover;
  }
}

@media (max-width: 700px) {
  #wrapper #top {
    background: url(../img/church-front-modile-bg.jpg) no-repeat bottom center;
    background-size: cover;
    height: 500px;
  }
}

#wrapper #top #topText {
  color: var(--Blue);
  position: absolute;
  top: 43px;
  right: 24%;
  text-align: center;
  font-family: 'Lancelot', cursive;
}

@media (max-width: 1000px) {
  #wrapper #top #topText {
    right: auto;
    left: 50px;
  }
}

@media (max-width: 1000px) {
  #wrapper #top #topText {
    display: none;
  }
}

#wrapper #top #topText h1 {
  text-align: right;
  border-bottom: double 4px;
  font-weight: bolder;
}

#wrapper #top #topText h1 span {
  text-align: center;
  display: block;
}

#wrapper #top #topText h2 {
  text-align: center;
}

#wrapper #middle {
  width: 100%;
  min-height: 500px;
  position: relative;
  z-index: 9;
}

#wrapper #middle #Service {
  background: url(../img/church-front-modile-bg.jpg) no-repeat center 81%;
  background-size: cover;
  min-height: 300px;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  border-radius: 40px;
  overflow: hidden;
  padding: 0;
}

#wrapper #middle #Service .serviceInner {
  background-color: var(--DarkOverlay);
  color: var(--White);
  padding-top: 63px;
  min-height: 300px;
  text-align: center;
}

#wrapper #middle #Service .serviceInner h3 {
  line-height: 2;
  font-weight: bolder;
  position: relative;
  font-size: 33px;
  z-index: 1;
}

#wrapper #middle #Service .serviceInner h3:after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: -37px;
  right: 0;
  margin: auto;
  z-index: -1;
  border-bottom: solid 9px var(--LightBlue);
  width: 100px;
  z-index: -1;
}

#wrapper #middle #Service .serviceInner .services {
  max-width: 440px !important;
  margin: auto;
}

#wrapper #middle #Service .serviceInner .services .textstart {
  text-align: left;
}

#wrapper #middle #Service .serviceInner .services .textend {
  text-align: right;
}

@media (max-width: 768px) {
  #wrapper #middle #Service .serviceInner .services .textstart {
    text-align: center;
  }
  #wrapper #middle #Service .serviceInner .services .textend {
    text-align: center;
  }
}

#wrapper #middle #Kids {
  background-size: cover;
  min-height: 300px;
  margin: 10px;
  overflow: hidden;
  -webkit-transform: skewY(1deg);
          transform: skewY(1deg);
  border: solid 10px #00B9BC;
  background-color: #A5CD39;
}

#wrapper #middle #Kids .colorBg {
  background-color: #00B9BC;
  width: 100%;
  min-height: 300px;
  padding: 20px 0;
  z-index: 2;
  position: relative;
  -webkit-transform: skewY(-1deg);
          transform: skewY(-1deg);
  border: solid 4px #A5CD39;
}

#wrapper #middle #Kids .colorBg .swiper {
  border: solid 10px #02b8bb;
}

#wrapper #middle #Kids .colorBg .kidsInner {
  background-color: #E91C23;
}

#wrapper #middle #Kids .colorBg .kidsInner h3 {
  color: #F9A11B;
}

#wrapper #middle #Kids .colorBg .kidsInner p {
  color: var(--White);
}

#wrapper #middle .topMiddle {
  max-width: 100% !important;
  margin: auto;
  padding: 20px;
}

#wrapper #middle .topMiddle .topMiddleText {
  max-width: 900px;
  margin: 20px auto;
}

#wrapper #middle .topMiddle .topMiddleText h3 {
  position: relative;
  font-size: 33px;
}

#wrapper #middle .topMiddle .topMiddleText h3:after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: 0;
  border-bottom: solid 9px var(--LightBlue);
  width: 100px;
  z-index: -1;
}

#wrapper #middle .row {
  max-width: 100%;
  margin: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#wrapper #middle .row .swiper {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 600px;
  height: 400px;
  overflow: hidden;
  border: solid 10px var(--White);
  border-radius: 20px 40px;
}

#wrapper #middle .row .swiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
}

#wrapper #middle .row .swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#wrapper #middle .row .swiper .swiper-button-next, #wrapper #middle .row .swiper .swiper-button-prev {
  background-size: 16px;
  background-color: #ffffff8c;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

#wrapper #middle .row h3 {
  line-height: 2;
  font-weight: bolder;
  position: relative;
  font-size: 33px;
  z-index: 1;
}

#wrapper #middle .row h3:after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: 0;
  border-bottom: solid 9px var(--LightBlue);
  width: 100px;
  z-index: -1;
}

#wrapper #MultiSection .section {
  position: relative;
  min-height: 500px;
  border-radius: 40px;
  margin: 10px;
  overflow: hidden;
  background-color: var(--White);
  padding: 0px;
}

#wrapper #MultiSection .section .textOverlay {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 104px;
  min-height: 20px;
  background-color: var(--DarkOverlay);
  color: var(--White);
  z-index: 9;
  border-left: solid 14px transparent;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#wrapper #MultiSection .section .textOverlay .innerIcon {
  font-size: 26px;
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--LightBlue);
}

#wrapper #MultiSection .section .textOverlay .textOverlayInner {
  max-width: 70%;
  margin: auto;
}

#wrapper #MultiSection .section .textOverlay .textOverlayInner h3 {
  line-height: 2;
  font-weight: bolder;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 33px;
  z-index: 1;
}

#wrapper #MultiSection .section .textOverlay .textOverlayInner h3:after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: -71px;
  z-index: -1;
  border-bottom: solid 9px var(--LightBlue);
  width: 100px;
  z-index: -1;
}

#wrapper #MultiSection .section .textOverlay .textOverlayInner .list-group-item {
  color: var(--White);
  background-color: transparent;
  padding: 0 0 0 20px;
  font-size: 17px;
  text-transform: uppercase;
}

#wrapper #MultiSection .section .textOverlay .textOverlayInner p {
  text-align: left;
  font-size: 17px;
}

#wrapper #MultiSection .section .textOverlay.overlay {
  height: 100% !important;
  min-height: 500px !important;
  opacity: 1 !important;
  overflow: auto !important;
  border-left: solid 14px var(--LightBlue) !important;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

@media (max-width: 768px) {
  #wrapper #MultiSection .section {
    margin: 10px 0;
  }
}

#wrapper #MultiSection .section.ladiesAid {
  background: url(../img/ladies-aid.JPG) no-repeat center center;
  background-size: cover;
}

#wrapper #MultiSection .section.meals {
  background: url(../img/mmeals.jpg) no-repeat center center;
  background-size: cover;
}

#wrapper #MultiSection .section.events {
  text-align: center;
}

#wrapper #MultiSection .section.events h3 {
  line-height: 2;
  font-weight: bolder;
  position: relative;
  width: 100%;
  font-size: 33px;
  z-index: 1;
}

#wrapper #MultiSection .section.events h3:after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: -183px;
  z-index: -1;
  border-bottom: solid 9px var(--LightBlue);
  width: 100px;
  z-index: -1;
}

#wrapper #MultiSection .section.events .list-group-horizontal {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#wrapper #MultiSection .section h3:after {
  left: -68px;
  right: 0;
  margin: auto;
}

#wrapper #bottom {
  width: 100%;
  min-height: 500px;
}

#wrapper #bottom .row {
  max-width: 90%;
  margin: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#wrapper #bottom .row .card {
  margin: auto;
  width: 100% !important;
  max-width: 400px;
}

#wrapper #bottom .row h3 {
  line-height: 2;
  font-weight: bolder;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 33px;
  z-index: 1;
}

#wrapper #bottom .row h3:after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: -71px;
  z-index: -1;
  border-bottom: solid 9px var(--LightBlue);
  width: 100px;
  z-index: -1;
}

footer {
  position: relative;
  min-height: 400px;
  background-color: var(--Blue);
  text-align: center;
  padding: 20px;
}

footer .footer {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  margin-bottom: 50px;
}

@media (max-width: 991px) {
  footer .footer {
    position: relative;
    top: auto;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

footer .footer a {
  color: var(--White);
}

footer .footer .col-lg {
  padding: 10px;
  font-size: 20px;
  color: var(--White);
  text-align: left;
}

footer .footer .col-lg span {
  padding-bottom: 10px;
  display: block;
  font-weight: bolder;
}

footer .footer .col-lg span i {
  display: block;
  font-size: 43px;
  color: var(--DarkBlue);
  text-shadow: 0 1px 2px #ffffff80;
}

footer .footer .col-lg .list-group-item {
  color: var(--White);
  background-color: transparent;
  border: none;
  font-weight: lighter;
}

footer .copy {
  color: var(--White);
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}
/*# sourceMappingURL=styles.css.map */