* {
  box-sizing: border-box;
}

figure {
  padding: 0;
}

body {
  background-color: #f2f2f2;
  color: black;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 17px;
  font-weight: 400;
  font-family: Arial, Tahoma, sans-serif;
}

h1 {
  color: #666666;
  font-size: 32px;
  font-weight: 400;
  font-family: Arial, Tahoma, sans-serif;
}

h2 {
  margin-top: -10px;
  color: #8f8d89;
  font-weight: 400;
  font-family: Arial, Tahoma, sans-serif;
}

h3 {
  color: #666666;
  font-size: 25px;
  font-weight: 700;
  font-family: Arial, Tahoma, sans-serif;
}

h4 {
  margin-bottom: 1px;
  font-size: 20px;
  font-weight: 700;
  font-family: Arial, Tahoma, sans-serif;
}

.menu {
  background-color: #4f6d9e;
  color: white;
  padding: 11px 160px 12px 0;
  text-align: right;
  margin: 0;
  width: 100%;
}

.menu a:link,
a:visited {
  color: white;
  font-family: Arial, Tahoma, sans-serif;
  font-size: small;
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
}

.menu__floating_btn {
  z-index: 1100;
}

.menu__floating_btn:link {
  background-color: #85a3d5;
  width: 60px;
  height: 60px;
  position: fixed;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.25s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.menu__floating_btn_pos1:link {
  bottom: 20px;
}

.menu__floating_btn_pos2:link {
  bottom: 100px;
}

.menu__floating_btn:hover,
.menu__floating_btn:active {
  background-color: #4f6d9e;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
}

.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

header {
  background-color: #f2f2f2;
  height: 100px;
  width: 100%;
  margin-top: 0;
  text-align: center;
}

main {
  width: 94%;
  max-width: 1024px;
  margin: 15px auto 0 auto;
  padding: 10px 10px 10px 15px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.main__banner {
  float: left;
  margin-left: auto;
}

.main__subBanner img {
  max-width: 100%;
  max-height: 100%;
}

.main__subBanner {
  text-align: left;
  margin-left: 0;
  padding-left: 0;
  z-index: 10;
  max-width: 100%;
  height: auto;
}

.main__shadowBox {
  margin-left: 0;
  margin-bottom: 40px;
  font-family: Arial, Tahoma, sans-serif;
  background-color: white;
  padding: 10px 10px 10px 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.main__shadowBox a:link {
  color: blue;
}
.main__shadowBox a:visited {
  color: purple;
}
.main__shadowBox a:active {
  color: red;
}

.main__table {
  overflow-x: auto;
}
.main__table table,
.main__table th,
.main__table td {
  border: 1px solid;
}
.main__table table {
  border-collapse: collapse;
}
.main__table th,
.main__table td {
  padding: 7px;
  text-align: left;
}
.main__table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.main__container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.main__column--cell {
  margin-bottom: 30px;
}
.main__column--cell a:link {
  color: blue;
}
.main__column--cell a:visited {
  color: purple;
}
.main__column--cell a:active {
  color: red;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.imageCenter {
  display: flex;
  justify-content: center;
  z-index: 10;
  width: 100%;
}

.imagesCenter {
  display: flex;
  justify-content: center;
  z-index: 10;
  width: 100%;
}

img.responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

.imageCenter2 {
  margin-left: auto;
  margin-right: auto;
}

.imageLeft {
  float: left;
  margin-left: auto;
}

.imageRight {
  float: right;
}

.responsive img {
  max-width: 100%;
  height: auto;
}

.textCenter {
  text-align: center;
}

.textJustify {
  text-align: justify;
}

.textImportant {
  font-weight: 700;
  text-decoration: underline;
  color: black;
}

.textFancy {
  font-style: italic;
}

.greyOut {
  color: #666666;
}

.pagination a:link {
  color: blue;
}
.pagination a:visited {
  color: purple;
}
.pagination a:active {
  color: red;
}

footer {
  text-align: center;
  background-color: #f2f2f2;
}
footer p {
  margin: 2em 0 2.5em 0;
  padding: 0.1em 0 1em 0;
  height: 100px;
  font-size: 10.5;
  font-family: Arial, Tahoma, sans-serif;
  color: #8f8d89;
}
footer p a:link,
footer p :hover,
footer p :visited,
footer p :active {
  color: #8f8d89;
}

input {
  display: none;
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    width: 93%;
  }
  .main__column {
    width: 100%;
  }
  .main__column--cell {
    width: 90%;
    margin-left: 20px;
  }
  .menu {
    padding-right: 20px;
  }
  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 18px;
    margin-top: 3px;
  }
}
/* On screens that are 1085px wide or less */
@media screen and (max-width: 1084px) {
  .imagesCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .main__banner {
    display: none;
  }
  .menu {
    padding-right: 30px;
  }
  * {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
  }
  .mainNav {
    color: white;
    background-color: #008b8b;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 0;
    transition: 0;
  }
  .navbar-toggler {
    display: grid !important;
    position: absolute;
    top: 10px;
    left: 5px;
  }
  .mainNav .nav-list {
    display: grid;
    width: 700px;
    margin: 5px;
    box-shadow: 0 5px 10px rgba(51, 51, 51, 0.2666666667);
    transform: translateX(-150%);
  }
  .mainNav .nav-list .submenu,
  .mainNav .nav-list .submenu .details,
  .mainNav .nav-list .nosubmenu {
    background-color: #85a3d5;
    color: white;
    border-top: 1px solid #444;
    position: relative;
    list-style: none;
    outline: none;
    cursor: pointer;
    font-size: 20px;
  }
  .mainNav .nav-list .submenu,
  .mainNav .nav-list .nosubmenu {
    height: 40px;
    overflow: hidden;
    cursor: default;
    background-color: #85a3d5;
    color: white;
  }
  .mainNav .nav-list .submenu a:link,
  .mainNav .nav-list .nosubmenu a:link {
    text-decoration: none;
    background-color: #85a3d5;
    color: white;
  }
  .mainNav .nav-list .details li a,
  .mainNav .nav-list .details .details li a {
    font-size: 15px;
    padding: 0;
    margin: 0;
    background-color: #85a3d5;
    color: white;
    display: block;
  }
  .mainNav .nav-list li:hover,
  .mainNav .nav-list .details li a:hover,
  .mainNav .nav-list .details .details li a:hover {
    background-color: #668ccb;
  }
  .mainNav .nav-list .details,
  .mainNav .nav-list .details li a,
  .mainNav .nav-list .details .details li a,
  .mainNav .nav-list .submenu .submenu a {
    padding: 10px 0 10px 10px;
    margin: 0;
    background-color: #85a3d5;
    color: white;
  }
  .mainNav .nav-list label,
  .mainNav .nav-list .nosubmenu,
  .mainNav .nav-list .submenu .submenu label {
    display: block;
    padding: 10px 5px;
    cursor: pointer;
  }
  .mainNav .nav-list .mainNav__firstItem a,
  .mainNav .nav-list .nosubmenu a {
    display: block;
  }
  main {
    margin-top: 40px;
  }
  h2 {
    margin-top: 3px;
  }
}
/* On screens that are more than 1085px wide */
@media screen and (min-width: 1085px) {
  .main__banner {
    z-index: 10;
  }
  .main__column {
    margin-left: 10px;
    margin-right: 30px;
    float: left;
    width: 45%;
  }
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  .mainNav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94%;
    max-width: 1024px;
    margin: 60px auto 0 auto;
    border: 1px solid white;
    background-color: #85a3d5;
    padding: 0;
    border-radius: 5px;
    /* Safari */
    position: sticky;
    top: 0;
    z-index: 99;
  }
  .mainNav ul {
    margin: 0;
    padding: 0;
    background-color: #85a3d5;
  }
  .mainNav li {
    position: relative;
    list-style: none;
    margin: 0;
    float: left;
    border-right: 1px solid white;
    line-height: 2em;
  }
  .mainNav li:hover,
  .mainNav li.submenu:hover {
    background-color: #668ccb;
  }
  .mainNav li a {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.5em;
    text-decoration: none;
    color: white;
    font-family: Tahoma, Arial, sans-serif;
    width: 12em;
  }
  .mainNav ul a {
    width: auto;
  }
  .mainNav ul ul {
    position: absolute;
    width: 7em;
    display: none;
  }
  .mainNav ul ul li {
    border-bottom: 1px solid white;
  }
  .mainNav ul.level1 li.submenu:hover ul.level2,
  .mainNav ul.level2 li.submenu:hover ul.level3 {
    display: block;
  }
  .mainNav ul.level2 {
    top: 2.35em;
    width: 12em;
  }
  .mainNav ul.level3 {
    top: -1px;
    left: 12em;
    width: 12em;
    border-top: 1px solid white;
  }
  .mainNav ul.level2 a,
  .mainNav ul.level3 a {
    width: 12em;
  }
  .mainNav__firstItem {
    border-left: 1px solid white;
  }
}
/* Highlight corresponding page top menu and menu item (li and a) */
#index .mainNav .index,
#index .mainNav .index a,
#history .mainNav .about,
#history .mainNav .history,
#history .mainNav .history a,
#contact_us .mainNav .about,
#contact_us .mainNav .contact_us,
#contact_us .mainNav .contact_us a,
#facilities_campus .mainNav .about,
#facilities_campus .mainNav .facilities_campus,
#facilities_campus .mainNav .facilities_campus a,
#facilities_rectory .mainNav .about,
#facilities_rectory .mainNav .facilities_campus,
#facilities_rectory .mainNav .facilities_campus a,
#facilities_hall .mainNav .about,
#facilities_hall .mainNav .facilities_campus,
#facilities_hall .mainNav .facilities_campus a,
#facilities_church .mainNav .about,
#facilities_church .mainNav .facilities_campus,
#facilities_church .mainNav .facilities_campus a,
#facilities_family_life_center .mainNav .about,
#facilities_family_life_center .mainNav .facilities_campus,
#facilities_family_life_center .mainNav .facilities_campus a,
#facilities_administration .mainNav .about,
#facilities_administration .mainNav .facilities_campus,
#facilities_administration .mainNav .facilities_campus a,
#facilities_educationbldg .mainNav .about,
#facilities_educationbldg .mainNav .facilities_campus,
#facilities_educationbldg .mainNav .facilities_campus a,
#staff .mainNav .about,
#staff .mainNav .staff,
#staff .mainNav .staff a,
#pastoral_council .mainNav .about,
#pastoral_council .mainNav .pastoral_council,
#pastoral_council .mainNav .pastoral_council a,
#finance_council .mainNav .about,
#finance_council .mainNav .finance_council,
#finance_council .mainNav .finance_council a,
#past_priests .mainNav .about,
#past_priests .mainNav .past_priests,
#past_priests .mainNav .past_priests a,
#symbolism .mainNav .about,
#symbolism .mainNav .symbolism,
#symbolism .mainNav .symbolism a,
#mass_schedule .mainNav .services,
#mass_schedule .mainNav .mass_schedule,
#mass_schedule .mainNav .mass_schedule a,
#reconciliation .mainNav .services,
#reconciliation .mainNav .reconciliation,
#reconciliation .mainNav .reconciliation a,
#reconciliation .mainNav .sacraments,
#funerals .mainNav .services,
#funerals .mainNav .funerals,
#funerals .mainNav .funerals a,
#last_rites .mainNav .services,
#last_rites .mainNav .last_rites,
#last_rites .mainNav .last_rites a,
#ministries .mainNav .ministries,
#ministries .mainNav .ministry_list,
#ministries .mainNav .ministry_list a,
#mmg .mainNav .ministries,
#mmg .mainNav .ministry_list,
#mmg .mainNav .ministry_list a,
#acts .mainNav .ministries,
#acts .mainNav .ministry_list,
#acts .mainNav .ministry_list a,
#eim .mainNav .ministries,
#eim .mainNav .eim,
#eim .mainNav .eim a,
#baptism .mainNav .sacraments,
#baptism .mainNav .baptism,
#baptism .mainNav .baptism a,
#first_communion .mainNav .sacraments,
#first_communion .mainNav .first_communion,
#first_communion .mainNav .first_communion a,
#confirmation .mainNav .sacraments,
#confirmation .mainNav .confirmation,
#confirmation .mainNav .confirmation a,
#anointing_of_the_sick .mainNav .sacraments,
#anointing_of_the_sick .mainNav .anointing_of_the_sick,
#anointing_of_the_sick .mainNav .anointing_of_the_sick a,
#matrimony .mainNav .sacraments,
#matrimony .mainNav .matrimony,
#matrimony .mainNav .matrimony a,
#religious_education .mainNav .religious_education,
#religious_education .mainNav .re_programs,
#religious_education .mainNav .re_programs a,
#our_saints .mainNav .religious_education,
#our_saints .mainNav .our_saints,
#our_saints .mainNav .our_saints a,
#photo_gallery .mainNav .our_community,
#photo_gallery .mainNav .photos,
#photo_gallery .mainNav .photos a,
#lumen_gentium .mainNav .our_community,
#lumen_gentium .mainNav .lumen_gentium,
#lumen_gentium .mainNav .lumen_gentium a,
#links .mainNav .links,
#links .mainNav .links a,
#jamaica .mainNav .jamaica,
#jamaica .mainNav .jamaica a {
  background-color: #668ccb;
}

.navbar-toggler .bar {
  width: 25px;
  height: 4px;
  margin-bottom: 4px;
  background-color: white;
  border-radius: 10%;
  transition: 0.4s;
}

input:checked ~ .mainNav {
  min-height: 170vh;
}
input:checked ~ .mainNav .nav-list {
  transform: translateX(0);
  transition: 0.4s;
  z-index: 99;
}

.navbar-toggler {
  display: none;
  height: -moz-min-content;
  height: min-content;
  margin: 0 0 0 15px;
  cursor: pointer;
}

input:checked ~ .mainNav .navbar-toggler .bar:nth-child(1) {
  position: absolute;
  margin-top: 8px;
  transform: rotate(45deg);
}

input:checked ~ .mainNav .navbar-toggler .bar:nth-child(2) {
  display: none;
}

input:checked ~ .mainNav .navbar-toggler .bar:nth-child(3) {
  margin-top: 8px;
  transform: rotate(-45deg);
}

#toggleabout:checked ~ .nav-list .about,
#toggleservices:checked ~ .nav-list .services,
#toggleministries:checked ~ .nav-list .ministries,
#togglesacraments:checked ~ .nav-list .sacraments,
#togglereligiouseducation:checked ~ .nav-list .religious_education,
#toggleourcommunity:checked ~ .nav-list .our_community,
#togglememberregistration:checked ~ .nav-list .our_community .memberregistration {
  height: auto;
}/*# sourceMappingURL=main.css.map */