/* cmsms stylesheet: St. Luke Menu modified: 06/27/21 19:21:14 */
/* Navigation desktop, tablet */

ul.stlp-menu {
  list-style-type: none;
  margin: 0;
  padding: 0px 0px 0px 10px;
  overflow: hidden;
  background-color: #6F1C08;
 }
 
 li .stlp-menu {
  float: left;
/*  display: inline-block; */
  font-size: 1em;
 }
 
 li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 6px 10px 6px 10px;
  text-decoration: none;
 }
 
 li a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(242,217,192);
 }
 
 li .dropdown {
  display: inline-block;
 }
 
 .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  /*min-width: 160px;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
 }
 
 .dropdown-content a {
  color: black;
  padding: 6px 6px 6px 6px;
  text-decoration: none;
  display: block;
  text-align: left;
 }
 
 .dropdown-content a:hover {background-color: #f1f1f1; color: #FF0000}
 
 .dropdown:hover .dropdown-content {
  display: block;
 }

 /* Navigation mobile */

 ul.stlp-menu-mobile {
  display: none;
  /*position: absolute;
  top: 7em;
  width: 50%;*/
  list-style-type: none;
  margin: 0;
  padding: 10px 10px 10px 10px;
  /*overflow: hidden;*/
  background-color: #6F1C08;
  z-index: 10
 }

 li .stlp-menu-mobile {
  display: block;
  font-size: 1.4em;
  text-align: left;
 }

 li a, .dropbtn-mobile {
  display: block;
  color: white;
  text-align: left;
  padding: 6px 10px 6px 10px;
  text-decoration: none;
 }

 li a:hover, .dropdown-mobile:hover .dropbtn-mobile {
  background-color: rgb(242,217,192);
 }
 li .dropdown-mobile {
  display: inline-block;
 }
 
 .dropdown-content-mobile {
  display: none;
  position: absolute;
  margin-left: 40%;
  padding: 10px;
  background-color: #f9f9f9;
  /*min-width: 160px;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
 }
 
 .dropdown-content-mobile a {
  color: black;
  padding: 6px 6px 6px 6px;
  text-decoration: none;
  display: block;
  text-align: left;
 }
 
 .dropdown-content-mobile a:hover {background-color: #f1f1f1; color: #FF0000}
 
 .dropdown-mobile:hover .dropdown-content-mobile {
  display: block;
 }
/* cmsms stylesheet: St. Luke 2021 modified: 09/25/25 18:49:56 */
/*
html {
  font-size: 16px;
}
*/

div {
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

body {
 background-image: url(https://st-luke.ca/images/textured-white.jpg);
 background-repeat: repeat;
 text-align: left;
 font-family:
Verdana, 
Geneva, 
Arial, 
Helvetica, 
sans-serif;
 font-size: 0.8em;
 line-height: 1.4;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
}

img {
 max-width: 100%;
}

h2 {
 font-size: 1.4em;
 font-family: Arial, Helvetica, sans-serif;
}


a, a:link a:active {
 text-decoration: none;
 background-color: inherit;
 color: #0066FF;
 /* color: #18507C; */
}

a:hover {
 text-decoration: none;
 background-color: inherit;
 color: #FF0000;
}

strong, b {
 font-weight: bold;
}

em, i {
 font-style: italic;
}




.alert {
 grid-area: alert;
 margin: 0.4em 10px 1em 10px;
}

.banner {
 grid-area: banner;
}

.footer {
  grid-area: footer;
  background-color: #C0C0C0;
  text-align: center;
}

.nav {
  grid-area: nav;
  z-index: 10;
 }
 
.lcol {
 grid-area: lcol;
}

.rcol {
 grid-area: rcol;
}

.midcol {
 grid-area: midcol;
}

.priority1 {
 grid-area: priority1;
 font-size: 1em;
}

.mission-statement {
 grid-area: mission-statement;
 /*font-size: 1em;*/
}

.announcements {
 grid-area: announcements;
}

.container {
 display: grid;
 width: 1024px;
 /* max-width: 1024px; */
 font-size: 1em;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto;
 grid-template-areas: 
   "banner banner banner banner"
   "nav nav nav nav"
   "alert alert alert alert"
   "priority1 mission-statement mission-statement announcements"
   "lcol midcol midcol rcol"
   "footer footer footer footer";}

.container-ym {
 display: grid;
 width: 1024px;
 /* max-width: 1024px; */
 font-size: 1em;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto;
 grid-template-areas: 
   "banner banner banner banner"
   "nav nav nav nav"
   "alert alert alert alert"
   "priority1 mission-statement mission-statement announcements"
   "lcol midcol midcol rcol"
   "footer footer footer footer";}


/* Regular page */
.lcol-page {
 grid-area: lcol-page;
}

.maincol-page {
 grid-area: maincol-page;
}

.grid-page {
 display: grid;
 max-width: 1024px;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto;
 grid-template-areas: 
   "banner banner banner banner"
   "nav nav nav nav"
   "lcol-page maincol-page maincol-page maincol-page";
}


.gallery-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /*grid-template-rows: minmax(min-content, max-content);*/
  grid-template-rows: auto;
  grid-column-gap: 10%;
  grid-row-gap: 3em;
}

/* Gallery images */
.gallery-img {
  width: 100%;
  object-fit: contain;
  /*position: relative;*/
}

/* Gallery text for images */
.gallery-txt {
  word-wrap: break-word;
  font-size: 1em;
}



/*
.gallery-3col > img {
  width: 90%;
  object-fit: contain;
}
*/

/* Slide show css */

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1.5s;
  animation-name: fadeIn;
  animation-duration: 1.5s;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1.5s;
  animation-name: fadeOut;
  animation-duration: 1.5s;
}

@-webkit-keyframes fadeOut {
  from {opacity: 1} 
  to {opacity: 0}
}

@keyframes fadeOut {
  from {opacity: 1} 
  to {opacity: 0}
}

.stlpSlide {
 object-fit: contain;
 display: none;
}

.bannerSlide {
 object-fit: contain;
 display: none;
}

.slideshow-container {
    position: relative;
    width: 100%;
    /* max-width: 600px; Adjust the max-width as needed */
    margin: auto;
height: auto;
    /*overflow: auto; */
}

.slide {
    position: absolute; 
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Transition for fade effect */
    width: 100%;
    height: auto; 
}

.show {
    opacity: 1;
}

/* ------ */

.input-text {
 font-size: 1em;
}


.submit-button {
  color: #18507C;
  font-size: 1em;
  border: 1px solid #18507C;
  border-radius: 5px;
  /* background-color: #f2f2f2; */
  background-color: #FFFFFF;
  padding: 2px 2px 2px 2px;
  text-align: center;
}

.submit-button:hover {
  color: #FF0000;
}

.select-dropdown select option {
  font-size: 1em;
}

.radio-button {
  height: 1em;
  width: 1em;
}

.box {
 margin: 0px 10px 20px 10px;
 border: 1px solid #E6E6E6;
 padding: 10px 10px 10px 10px;
 /* border-top-width: 5px; */
 background-color: #FFFFFF;
 font-size: 1em;
}

.box-title {
 margin: 0.8em 10px 0px 10px;
 border-bottom: 0.1em solid #008C70;
 font-family: Arial, sans-serif, Verdana, Geneva, "Noto Color Emoji";
 color: #6F1C08;
 font-size: 1.4em;
 font-weight: bold;
 text-align: left;
 padding-left: 0.5em;
 /* padding-bottom: 1px; */
 /* background-color: #008C70; */
 line-height: 1.5em;
}

.mass-box {
 border: 1px solid #E6E6E6;
}

.mass-time {
 border: 2px solid #18507C;
 border-radius: 5px;
 background-color: #f2f2f2;
 padding: 2px 2px 2px 2px;
 font-size: 1em;
 /* line-height: 1.4em; */
 text-align: center;
 width: 8em;
}



table.mass-sched {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2em;
  vertical-align: top;
}


.iframe16x9-container {
 overflow: hidden;
 /* 16:9 aspect ratio */
 padding-top: 56.25%;
 position: relative;
}

.iframe16x9-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.iframe-square {
  overflow: hidden;
  padding-top: 100%;
  position: relative;
 
}

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

.iframe2x1 {
  overflow: hidden;
  padding-top: 50%;
  position: relative;
 
}

.iframe2x1 iframe{
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.youtube-container {
  position: relative; /* Needed for aspect ratio trick if you want to maintain height */
  width: 100%;
  height: auto; /* Adjust height as needed or use aspect ratio trick */
}

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

.pdf-letter-container {
  overflow: hidden;
  /* 8.5 x 11 aspect ratio */
  padding-top: 129.4118%;
  position: relative;
 
}

.pdf-letter-container iframe, .pdf-letter-container embed {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.img-fit {
  width: 100%; 
  object-fit: contain;
}

.stlp-menu-icon {
 float: right; 
 height: 2em; 
 width: 2em; 
 margin: auto; 
 margin-right: 1.5em;
 display: none;
}

/* News css */

.NewsSummary {
  border-bottom: 1px solid #ccc;
  margin-bottom: 12px;
}

/* Media queries */

@media screen and (max-device-width: 480px) {
 html {font-size: 16px}
 body {font-size: 1em}
 .container {
   font-size: 2em;
   grid-template-areas: 
     "banner banner banner banner"
     "nav nav nav nav"
     "alert alert alert alert"
     "mission-statement mission-statement mission-statement mission-statement"
     "priority1 priority1 priority1 priority1"
     "announcements announcements announcements announcements"
     "midcol midcol midcol midcol"
     "lcol lcol lcol lcol"
     "rcol rcol rcol rcol"
     "footer footer footer footer";
 }
  .container-ym {
   font-size: 2em;
   grid-template-areas: 
     "banner banner banner banner"
     "nav nav nav nav"
     "alert alert alert alert"
     "mission-statement mission-statement mission-statement mission-statement"
     "priority1 priority1 priority1 priority1"
     "announcements announcements announcements announcements"
     "lcol lcol lcol lcol"
     "midcol midcol midcol midcol"
     "rcol rcol rcol rcol"
     "footer footer footer footer";
 }
 .grid-page {
    font-size: 1.95em;
    grid-template-areas: 
      "banner banner banner banner"
      "nav nav nav nav"
      "lcol-page lcol-page lcol-page lcol-page"
      "maincol-page maincol-page maincol-page maincol-page";
 }
 .gallery-3col {
   grid-template-columns: 1fr 1fr;
 }
 #church_banner {display: none}
 div.stlpSideMenu {display: none}
 div.maincol-page { margin-top: 20px }
 .banner {font-size: 0.8em}
 .nav {font-size: 1.5em;} 
 .mass-time {font-size: 1em}
 .box-title {font-size: 1.3em}
 .box {font-size: 1em}
 .announcements {font-size: 1em}
 .mission-statement .box {font-size: 0.52em} 
 .stlp-menu {font-size: 1.1em}
 ul.stlp-menu {display: none}
 img.stlp-menu-icon {display: block}
/*#stlp-menu-mobile {display: none}*/
}