/* @import url('font-awesome.css');
@font-face{font-family:'Novecentowide';src:url('../fonts/Novecentowide-Bold.otf');}
@font-face{font-family:'Lobster';src:url('../fonts/Lobster_1.3.otf');}
@font-face{font-family:'ABeeZee';src:url('../fonts/ABeeZee-Regular.otf');}
@font-face{font-family:'Michroma';src:url('../fonts/Michroma.ttf');}
@font-face{font-family:'Great Vibes';src:url('../fonts/GreatVibes-Regular.otf');}
@font-face{font-family:'Nautilus';src:url('../fonts/Nautilus.otf');}
@font-face{font-family:'Montserrat';src:url('../fonts/Nautilus.otf');}
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700|Pacifico"); */

/*  */
/*  */
/* GENERAL ELEMENTS */
/*  */
/*  */

html {
    /* font-size: 16px !important; */
}

body {
    font-family: 'Roboto', sans-serif;
    padding-top: 5rem;
    font-size: 1rem;
}

.display-1 {
  font-family: 'Roboto', sans-serif;
  font-size: 4rem;
  letter-spacing: 3px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: none;
}

.display-2 {
  font-family: 'Roboto', sans-serif;
  font-size: 3rem;
  letter-spacing: 1px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: none;
}

h1, .h1 {
  /* font-size: 2.125rem; */
  font-size: 212.5%;
  margin-bottom: 1.5rem;
  letter-spacing: 0.125rem;
  font-weight: 500;
  font-family: inherit;
  /* line-height: 1.2; */
  line-height: 120%;
  color: inherit;
}

h2, .h2{
  margin-bottom: 1.75rem;
  letter-spacing: 0.03125rem;
  /* font-size: 1.5rem; */
  font-size: 150%;
  font-weight: 500;
}

h3, .h3 {
  /* font-size: 1.25rem; */
  font-size: 125%;
  letter-spacing: 0.015625rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

h4, .h4 {
  /* font-size: 1rem; */
  font-size: 100%;
  letter-spacing: 0.015625rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

h5, .h5 {
  /* font-size: 1rem; */
  font-size: 100%;
  letter-spacing: 0.015625rem;
  font-weight: 400;
}

h6, .h6 {
  /* font-size: 0.8rem; */
  font-size: 87.5%;
  letter-spacing: 0.015625rem;
  /* line-height: 1.4; */
  line-height: 140%;
  font-weight: 500;
  text-transform: none;
}

p {
  line-height: 1.75;
  margin: 0;
}

/* Link styling */
a {
  color: #21294A;
  text-decoration: underline;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #21294A;
  text-decoration: none;
}

a.btn {
  text-decoration: none;
}

.row {
  padding: 0;
  margin: 0;
}

.ml-0p25rem { margin-left: 0.25rem; }
.mr-0p25rem { margin-right: 0.25rem; }
.mt-0p25rem { margin-top: 0.25rem; }
.mb-0p25rem { margin-bottom: 0.25rem; }

.ml-0p5rem { margin-left: 0.5rem; }
.mr-0p5rem { margin-right: 0.5rem; }
.mt-0p5rem { margin-top: 0.5rem; }
.mb-0p5rem { margin-bottom: 0.5rem; }

.ml-1rem { margin-left: 1rem; }
.mr-1rem { margin-right: 1rem; }
.mt-1rem { margin-top: 1rem; }
.mb-1rem { margin-bottom: 1rem; }

.ml-1p5rem { margin-left: 1.5rem; }
.mr-1p5rem { margin-right: 1.5rem; }
.mt-1p5rem { margin-top: 1.5rem; }
.mb-1p5rem { margin-bottom: 1.5rem; }

.ml-2rem { margin-left: 2rem; }
.mr-2rem { margin-right: 2rem; }
.mt-2rem { margin-top: 2rem; }
.mb-2rem { margin-bottom: 2rem; }

.ml-2p5rem { margin-left: 2.5rem; }
.mr-2p5rem { margin-right: 2.5rem; }
.mt-2p5rem { margin-top: 2.5rem; }
.mb-2p5rem { margin-bottom: 2.5rem; }

.ml-3rem { margin-left: 3rem; }
.mr-3rem { margin-right: 3rem; }
.mt-3rem { margin-top: 3rem; }
.mb-3rem { margin-bottom: 3rem; }

.ml-4rem { margin-left: 4rem; }
.mr-4rem { margin-right: 4rem; }
.mt-4rem { margin-top: 4rem; }
.mb-4rem { margin-bottom: 4rem; }

.pl-0rem { padding-left: 0rem; }
.pr-0rem { padding-right: 0rem; }
.pt-0rem { padding-top: 0rem; }
.pb-0rem { padding-bottom: 0rem; }

.pl-0p25rem { padding-left: 0.25rem; }
.pr-0p25rem { padding-right: 0.25rem; }
.pt-0p25rem { padding-top: 0.25rem; }
.pb-0p25rem { padding-bottom: 0.25rem; }

.pl-0p5rem { padding-left: 0.5rem; }
.pr-0p5rem { padding-right: 0.5rem; }
.pt-0p5rem { padding-top: 0.5rem; }
.pb-0p5rem { padding-bottom: 0.5rem; }

.pl-1rem { padding-left: 1rem; }
.pr-1rem { padding-right: 1rem; }
.pt-1rem { padding-top: 1rem; }
.pb-1rem { padding-bottom: 1rem; }
.p-1rem { padding: 1rem; }

.pl-1p5rem { padding-left: 1.5rem; }
.pr-1p5rem { padding-right: 1.5rem; }
.pt-1p5rem { padding-top: 1.5rem; }
.pb-1p5rem { padding-bottom: 1.5rem; }

.pl-1p75rem { padding-left: 1.75rem; }
.pr-1p75rem { padding-right: 1.75rem; }
.pt-1p75rem { padding-top: 1.75rem; }
.pb-1p75rem { padding-bottom: 1.75rem; }

.pl-2rem { padding-left: 2rem; }
.pr-2rem { padding-right: 2rem; }
.pt-2rem { padding-top: 2rem; }
.pb-2rem { padding-bottom: 2rem; }

.pl-2p5rem { padding-left: 2.5rem; }
.pr-2p5rem { padding-right: 2.5rem; }
.pt-2p5rem { padding-top: 2.5rem; }
.pb-2p5rem { padding-bottom: 2.5rem; }

.pl-3rem { padding-left: 3rem; }
.pr-3rem { padding-right: 3rem; }
.pt-3rem { padding-top: 3rem; }
.pb-3rem { padding-bottom: 3rem; }

.pl-4rem { padding-left: 4rem; }
.pr-4rem { padding-right: 4rem; }
.pt-4rem { padding-top: 4rem; }
.pb-4rem { padding-bottom: 4rem; }

/* Responsive padding utilities */
@media screen and (min-width: 768px) {
  .pr-0rem-md { padding-right: 0rem; }
  .pl-0rem-md { padding-left: 0rem; }

  .pl-3rem-md { padding-left: 3rem; }
}

.lh-100 { line-height: 100%; }
.lh-112p5 { line-height: 112.5%; }
.lh-125 { line-height: 125%; }
.lh-137p5 { line-height: 137.5%; }
.lh-150 { line-height: 150%; }

.lh-1rem { line-height: 1rem; }
.lh-1p25rem { line-height: 1.25rem; }
.lh-1p5rem { line-height: 1.5rem; }
.lh-1p75rem { line-height: 1.75rem; }
.lh-2rem { line-height: 2rem; }
.lh-2p25rem { line-height: 2.25rem; }
.lh-2p5rem { line-height: 2.5rem; }

.f-0p75 { font-size: 0.75rem; }
.f-0p875 { font-size: 0.875rem; }
.f-1 { font-size: 1rem; }
.f-1p125 { font-size: 1.125rem; }
.f-1p25 { font-size: 1.25rem; }

.bw-2px { border-width: 2px !important; }

.no-decoration {text-decoration: none;}

.text-wrap {  white-space: normal; }

/* Responsive text alignment utilities */
@media screen and (min-width: 768px) {
  .al-sm { text-align: left; }
}

@media screen and (min-width: 992px) {
  .ar-lg { text-align: right; }
  .ac-lg { text-align: center; }
}

.breadcrumb {
  margin: 0;
  background-color: transparent;
  border-radius: 0;
}

.img-thumbnail {
  max-height: 200px;
  border: none;
  border-radius: 0;
}

#childrenBanner {
  color: #ffffff;
  padding: 8rem 0 8rem 0;
  background-color: #0c0c0c;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 32%;
  text-align: left;
  position: relative;
}

#childrenBanner .display-1 {
  font-family: 'Roboto', sans-serif;
  font-size: 3rem;
  letter-spacing: 3px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
  font-style: italic;
  text-shadow: 2px 2px #555555;
}

#childrenBanner h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
  font-style: italic;
  text-shadow: 2px 2px #555555;
}

/* Adjust banner for smaller screen sizes */
/* Reduce font sizes & left align h6 */
@media screen and (max-width: 992px) {
  #childrenBanner {
    padding: 4rem 0 4rem 0;
  }

  #childrenBanner .display-1 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 768px) {
  #childrenBanner {
    padding: 4rem 0 4rem 0;
  }

  #childrenBanner .display-1 {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 576px) {
  #childrenBanner {
    padding: 4rem 0 4rem 0;
  }

  #childrenBanner .display-1 {
    font-size: 1.5rem;
  }

  #childrenBanner h3 {
    font-size: 1.25rem;
  }
}

/*  */
/*  */
/* END — GENERAL ELEMENTS */
/*  */
/*  */

.navbar {
  background: #21294A;
  padding: 1rem 15px 1rem 15px;
  position: relative;
}

/*
line-height here sets item element at
32px height. nav-link child has padding of
8px top and 8px bottom. This makes for a
total of 48px height. navbar adds
16px top and 16px bottom to give a total
height of 80px to the navbar on large screens.
*/
.nav-item {
  padding-right: 2rem;
  font-size: 1rem;
  line-height: 2rem;
  text-transform: uppercase;
}

.navbar-brand {
  padding: 0;
  margin: 0;
}

.nav-item:last-child {
  padding-right: 0;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.nav-link {
  color: white !important;
  text-decoration: none;
}

.nav-link:hover {
  color: #DBDEED !important;
}

.dropdown-menu {
  background-color: #202539;
  border: none;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  padding: 0;
}

.dropdown-divider {
  border-color: #b8b8b8;
  margin: 0;
}

.dropdown-item {
  padding: 0.5rem 1rem 0.5rem 1rem;
  text-decoration: none;
}

.dropdown-item:hover {
  background-color: #454D67;
  color: #ffffff;
  border-radius: inherit;
}

@media screen and (max-width: 992px) {
  .navbar {
    padding: 0.75rem 15px 0.75rem 15px;
  }

@media screen and (max-width: 1024px) {
  .dropdown-menu {
    background-color: #21294A;
    box-shadow: none;
  }

  .dropdown-divider {
    border: none;
  }

  .dropdown-item:hover {
    background-color: inherit;
    color: #DBDEED;
  }
}

  /*
  FIXED HEADER REQUIRES TOGGLER PADDING ADJUSTMENT
  Navbar toggler naturally has 4px top and 4px
  bottom padding and 30px height. In order to
  make the height 48px, need to make top and bottom
  padding each 9px.
  */
  .navbar-toggler {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /*
  FIXED HEADER REQUIRES ADJUSED BODY PADDING
  Navbar on smaller screens is 72px height.
  Because of this, the body needs to be pushed
  down 72px.
  */
  body {
    padding-top: 4.5rem;
  }
}

/* Reset jumbotron bootstrap class */
.jumbotron {
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* Banner is the main full with title and image section */
.banner {
  background-color: #F0F0F0;
  height: 70vh;
  overflow-y: hidden;
  min-height: 256px;
}

.banner .display-1 {
  text-shadow: 2px 2px #555555;
  margin-bottom: 2rem;
  color: #FFFFFF;
  line-height: 1;
}

.banner .welcomeText {
  font-family: 'Niconne', cursive;
  text-shadow: 2px 2px #555555;
  color: #FFFFFF;
  font-weight: 400;
  line-height: 1;
  font-size: 300%;
  /* padding-top: 6rem; */
  padding-top: 12vh;
}

.banner h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  text-shadow: 1px 1px #555555;
  color: #ffffff;
  margin: 0 0 0 0;
  padding: 0;
  letter-spacing: 2px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.banner h6 {
  font-size: 100%;
  padding-bottom: 5vh;
  font-family: 'Roboto', sans-serif;
  text-shadow: 1px 1px #333333;
  margin-bottom: 0;
  color: #ffffff;
  letter-spacing: 1px;
  font-weight: 400;
  line-height: 1.2;
  font-style: italic;
}

@media screen and (max-width: 992px) {
  .banner {
    /* padding: 4rem 0 1.5rem 0; */
    height: 50vh;
  }

  .banner .display-1 {
    font-size: 275%;
    /* margin: 0 0 6rem 0; */
    letter-spacing: 2px;
  }

  .banner .welcomeText {
    font-size: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .banner .display-1 {
    font-size: 250%;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 576px) {
  .banner .display-1 {
    font-size: 225%;
    letter-spacing: 2px;
  }

  .banner h6 {
    font-size: 87.5%;
    /* padding-bottom: 2rem; */
  }

  .banner .welcomeText {
    padding-top: 3rem;
  }
}

/* Service banner is the section right below the splash images
   that contains the service times and location */
.service-banner {
  color: #FFFFFF;
  padding: 1.4rem 0 1.1rem 0;
  /* background-color: #21294A; */
  background-color: #454D67;
  text-align: left;
  z-index: 9999;
}

.service-banner h5, .service-banner h6, .service-banner .h5, .service-banner .h6 {
  /* font-size: 1.125rem; */
  /* font-weight: 500; */
  text-transform: uppercase;
}

.service-banner a {
  color: #FFFFFF;
  text-decoration: underline;
  font-size: 1rem;
  text-transform: none;
}

.service-banner a:hover {
  color: #DBDEED;
  text-decoration: none;
}

/*
—————————————————————————————————
Footer
—————————————————————————————————
*/
.footer {
  background-color: #21294A;
  color: #ffffff;
  /* padding: 4em 0 2em 0; */
  background: #21294A;
}

.footer a {
  color: #ffffff;
  /* text-decoration: none; */
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a.darkBgLink:hover {
  color: #DBDEED;
}

a:hover svg #facebook,
a:hover svg #twitter {
  color: #DBDEED;
}


/*
—————————————————————————————————
Buttons
—————————————————————————————————
*/
.btn-primary {
  border: 2px solid #21294A;
  background-color: #21294A;
  color: #FFFFFF;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

.btn-outline-primary {
  border: 2px solid #21294A;
  /* background-color: white; */
  color: #21294A;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

.btn-outline-primary:hover {
  border: 2px solid #21294A;
  background-color: #21294A;
  color: #FFFFFF;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(33, 41, 74, 0.5);
}


/*

LIST GROUP STYLING

*/

.list-group-item.active {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-left: 4px solid #21294A;
  color: #21294A;
  padding-left: calc(1.25rem - 4px);
}

.list-group-item a, a.list-group-item {
  text-decoration: none;
}

.list-group-item a:hover, a:hover.list-group-item {
  text-decoration: underline;
}

/*

BADGE STYLING

*/
.badge-primary {
  background-color: #454D67;
}


/*
—————————————————————————————————
Back to Top button
—————————————————————————————————
*/
#backToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 6px; /* Some padding */
  border-radius: 50%;
  font-size: 18px; /* Increase font size */
  width:48px;
  height:48px;
  background-color: #576088;
  /* flex-grow:0;
  flex-shrink:0;
  flex-basis:48px */
}

#backToTopBtn:hover {
  background-color: #21294A; /* Add a dark-grey background on hover */
}

.jump-to-section {
  position: relative;
  -ms-transform: translate(0px, -80px); /* IE 9 */
  -webkit-transform: translate(0px, -80px); /* Safari */
  transform: translate(0px, -80px);
}


/*
—————————————————————————————————
Slider form element styling
—————————————————————————————————
*/

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 12px; /* Specified height */
  border-radius: 12px;
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 24px; /* Set a specific slider handle width */
  height: 24px; /* Slider handle height */
  border-radius: 16px;
  background: #21294A; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 24px; /* Set a specific slider handle width */
  height: 24px; /* Slider handle height */
  border-radius: 16px;
  background: #21294A; /* Green background */
  cursor: pointer; /* Cursor on hover */
}


/*
— — — — — — — — — — — — — — — — — —
HORIZONTAL CARD WITH IMAGE ON LEFT
— — — — — — — — — — — — — — — — — —
*/
.card-img-left {
  border-top-left-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

@media screen and (max-width: 768px) {
  .card-img-left {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: 0;
  }
}

.card-body-right {
  border-top-right-radius: calc(0.25rem - 1px);
  border-bottom-right-radius: calc(0.25rem - 1px);
}

@media screen and (max-width: 768px) {
  .card-body-right {
    border-top-right-radius: 0;
    border-bottom-left-radius: calc(0.25rem - 1px);
    border-bottom-right-radius: calc(0.25rem - 1px);
  }
}

.article-inline-img-container {
  width: 100%;
}

@media screen and (min-width: 992px) {
  .article-inline-img-container {
    width: 50%;
  }
}


/* Pagination */
.page-link {
  line-height: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  color: #21294A;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-link:hover {
  background-color: #21294A;
  color: #FFFFFF;
}