/*clipped rectangle*/
/* Styles for screen sizes wider than 900px */
.box-clipped {
  clip-path: polygon(
    0 0, calc(100% - 8rem) 0, 100% calc(0% + 6rem), 100% 100%, calc(0% + 8rem) 100%, 0% calc(100% - 6rem)
  );
  border-radius: 1.25rem;
  min-height: auto;
  align-items: flex-end;
  padding: .1em;
  overflow:hidden;
  
}

/* Styles for screen sizes 900px and narrower */
@media screen and (max-width: 900px) {
  .box-clipped {
  clip-path: polygon(
    0 0, calc(100% - 4rem) 0, 100% calc(0% + 3rem), 100% 100%, calc(0% + 4rem) 100%, 0% calc(100% - 3rem)
  );
  border-radius: 1rem;
}

}


.copyright {font-family:"Libre Baskerville Italic;"; font-style:italic;font-size:2.0rem;font-weight:300;}
	

/*Transparent box for prayers*/
.box-trans {
  width: 100%;
  height: auto;
  background: rgba(133, 133, 133, 0.2);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  color: #fff;
}

.box-trans h4 {
  color:#fff;
 }
 
 .box-trans-bg  {
  position: relative;
  width: 100%;
  background: url(../img/sky.webp);
  background-repeat: no-repeat;
  background-size: cover;
  
}

/*End of Transparent box for prayers*/


/*Dark box for prayers*/

.box-dark  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #000;
  position: relative;
}

.terminal {
  position: relative;
  height: auto;
  width: 80%;
  overflow:hidden;
  border-radius: 2rem;
  /*border: 0.5rem solid #000;*/
  box-shadow: 0 0 10rem #4A8187, inset 0 0 5rem #4A8187;
  display: flex;
  flex-direction: row;
}

/*End of Dark box for prayers*/

.raised {
    box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.24), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.raised-more {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.raised-much-more {box-shadow:inset 0 1px 1px 0 hsla(0,0%,100%,.15),0 50px 100px -20px 
rgba(50,50,93,.3),0 30px 60px -30px rgba(0,0,0,.5),-10px 10px 60px -10px rgba(103,178,111,.3);
}

.raised-very-much-more  {box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
}

.raised-more-bordered {
	box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}


.bg-neu {
    background-color: #e6e7ee !important;
}
.shadow-soft {
    box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff !important;
}
.border-neu-light {
    border-color: #D1D9E6 !important;
}





/*My Table - blue head*/
table{border-collapse:collapse;border-spacing:0}

.mytable{width:100%;max-width:100%;margin-bottom:22px; margin-top:22px; text-align:center; box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);}

.mytable>tbody>tr>td,.mytable>tbody>tr>th,.mytable>tfoot>tr>td,.mytable>tfoot>tr>th,.mytable>thead>tr>td,.mytable>thead>tr>th{padding:8px;line-height:1.42857143;border-top:1px solid #006FBF}

.mytable>thead>tr>th{vertical-align:middle;border-bottom:2px solid #006FBF; text-align:center;}
.mytable{margin-bottom:0;border:4px solid #006FBF;border-collapse:separate;border-radius:15px}

.mytable td,.mytable th{vertical-align:middle}
.mytable td:not(:last-child),.mytable th:not(:last-child){border-right:1px solid #006FBF}
.mytable thead tr{height:70px;background: #00d2ff;
    background: -webkit-linear-gradient(to left, #00d2ff , #3a7bd5);
    background: linear-gradient(to left, #00d2ff , #3a7bd5);color:#FFF}
.mytable thead tr:first-child th:first-child{border-top-left-radius:11px}
.mytable thead tr:first-child th:last-child{border-top-right-radius:11px}
.mytable tbody tr{height:80px}
.mytable tbody tr:last-child td:first-child{border-bottom-left-radius:11px}
.mytable tbody tr:last-child td:last-child{border-bottom-right-radius:11px}

.wordwrap
{
/* wrap long text and urls */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
word-wrap: break-word; /* IE 5+ */
} 

.bo ul li{
  font-size:1.4rem;
  font-weight: 700;}


.tt_container{
  position: relative;
  padding: 20px;
  overflow: hidden;
  margin-top:30px;
  margin-bottom:30px;
  
  -webkit-box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2); 
  -moz-box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2); 
  box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2);
  border-radius: 10px;    
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
 background-image: linear-gradient(120deg, #66a6ff 0%, #89f7fe 100%);
 
}

.tt_container-tan{
  position: relative;
  padding: 20px;
  overflow: hidden;
  margin-top:30px;
  margin-bottom:30px;
  
  -webkit-box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2); 
  -moz-box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2); 
  box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2);
  border-radius: 10px;    
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
 background-color: #F3CF79;
}

.tt_container-whiteish{
  position: relative;
  padding: 20px;
  overflow: hidden;
  margin-top:30px;
  margin-bottom:30px;
  
  -webkit-box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2); 
  -moz-box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2); 
  box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2);
  border-radius: 10px;    
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
 background-color: #FFF;
}

.tt_container-bordered {
  background: radial-gradient(#fffbf3, #ffe19e);
  padding: 24px;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0px 0px 0px 6px #F0D555, 0px 0px 8px 6px #84222b, inset 0px 0px 15px 0px #614506, 6px 6px 1px 1px #785C1B, -6px 6px 1px 1px #785C1B;
  text-align: center;
}

.tt_container-bordered-blue {
  background: radial-gradient(#00d2ff, #3a7bd5);
  padding: 24px;
  box-sizing: border-box;
  border-radius: 20px 18px 20px 18px;
  box-shadow: 0px 0px 0px 6px #2098E8, 0px 0px 8px 6px #3762EF, inset 0px 0px 15px 0px #4261ED, 6px 6px 1px 1px #785C1B, -6px 6px 1px 1px #1809ED;
  text-align: center;
}

/*original CSS: .tt_container-bordered {
  background: radial-gradient(#fffbf3, #ffe19e);
  padding: 24px;
  box-sizing: border-box;
  border-radius: 20px 18px 20px 18px;
  box-shadow: 0px 0px 0px 6px #5e1e21, 0px 0px 8px 6px #84222b, inset 0px 0px 15px 0px #614506, 6px 6px 1px 1px #e66565, -6px 6px 1px 1px #e66565;
  text-align: center;
}*/

.txt1 {font-family: 'Georgia', serif; font-size:60px; font-style:italic; font-weight:bold;
 line-height:70px; color:#fff; text-decoration:none; text-shadow: 3px 3px #404040; margin-bottom:20px;}
 
.txt2 {font-family: 'Georgia', serif;font-size:20px; font-style:italic; line-height:20px; font-weight:bold;
color:#fff; text-decoration:none; text-shadow: 2px 2px #404040; padding-left:20px; 
padding-right:20px;}

.txt3 {font-family: 'Georgia', serif; font-size:40px; font-style:italic; font-weight:bold;
 line-height:45px; color:#fff; text-decoration:none; text-shadow: 2px 3px #404040; margin-bottom:20px;}


 .txt4 {font-family: 'Georgia', serif; font-size:40px; font-style:italic; font-weight:bold;
 line-height:50px; color:#fff; text-decoration:none; text-shadow: 2px 2px #404040; margin-bottom:20px; padding-top:10px; padding-bottom:10px;}
 
 .txtcustom {font-family: 'Georgia', serif; font-size:60px; font-style:italic; font-weight:bold;
 line-height:70px; color:#0ea5e9; text-decoration:none; text-shadow: 3px 3px #404040; margin-bottom:20px;}
 
 .txtcustomsm {font-family: 'Georgia', serif; font-size:40px; font-style:italic; font-weight:bold;
 line-height:45px; color:#0ea5e9; text-decoration:none; text-shadow: 2px 2px #404040; margin-bottom:20px;}
 
 .txteaster {font-family: 'Georgia', serif; font-size:60px; font-style:italic; font-weight:bold;
 line-height:70px; color:#FDA922; text-decoration:none; text-shadow: 3px 3px #8E7200; margin-bottom:20px;}
 
 .txtpoppies {font-family: 'Georgia', serif; font-size:60px; font-style:italic; font-weight:bold;
 line-height:70px; color:#d30000; text-decoration:none; text-shadow: 3px 3px #404040; margin-bottom:20px;} 
 
  .txtcustom-tan {font-family: 'Georgia', serif; font-size:46px; font-style:italic; font-weight:bold;
 line-height:70px; color:#896D29; text-decoration:none; text-shadow: 2px 2px #404040; margin-bottom:20px;}
 
/*header image */
 .headerwrap {
	background: url(../img/sjo_outside.webp);
	padding-top:290px;
	/*padding-top:290px;*/
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.headerwrap_christmas {
	background: url(../img/epiphany2.png);
	padding-top:290px;
	/*padding-top:290px;*/
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 1156px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.headerwrap_new-year {
	background: url(../img/header_new-year.jpg);
	padding-top:290px;
	/*padding-top:290px;*/
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.headerwrap_easter-sunday {
	background: url(../img/easter/easter_sunday.jpg);
	padding-top:290px;
	/*padding-top:290px;*/
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
/*end of header image */

.divider-christmas {
	content:'';
	background:url(../img/divider_christmas.png);
	background-repeat: repeat-x;
	width: 100%;
	height:183px;
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* box with shaddow. Select colour*/
.box-raised {padding:10px 5px; border-radius:5px;left:-5px;box-shadow:18px 18px 18px 0 rgba(0,0,0,.6);border:2px solid rgba(0,0,0,.6)}

.white{background:#fff;}
.brown-2 {background:#CD853F;}
.green{background:#B0CC99;}
.yellow{background:#F6E8B1;}
.dark-green{background:#677E52;}
.brown{background:linear-gradient(110.3deg, rgb(238, 179, 123) 8.7%, rgb(216, 103, 77) 47.5%, rgb(114, 43, 54) 89.1%);}
.lightblue {
	background: #00d2ff;
    background: -webkit-linear-gradient(to left, #00d2ff , #3a7bd5);
	background: linear-gradient(to left, #00d2ff , #3a7bd5);}
/* end of box with shaddow. Select colour*/



/* box with cut-away end, left bottom, lighblue gradient*/
.box {
  margin-top:20px; 
  margin-bottom:40px;
  padding-left:30px;
  padding-right:20px;
  padding-top:20px;
  padding-bottom:20px;
background-image: linear-gradient(120deg, #66a6ff 0%, #89f7fe 100%);
  border-radius:20px 20px 20px 100px;
   -webkit-box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2); 
  -moz-box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2); 
  box-shadow: 
      inset 0 0 25px  rgba(0,0,0,0.3),
            0 0 25px rgba(0,0,0,0.2);
}
  
  .box h1, .box h2, .box h3,  .box h4, .box h5, .box p {
	color:#000;
}
/* end of box with cut-away end, left bottom, lighblue gradient*/


/* special button dark blue*/
.btn.btn-mybutton-dark {
    background: #3b5998;
    background: -webkit-linear-gradient(to left, #3b5998 , #3a7bd5);
    background: linear-gradient(to left, #3b5998 , #3a7bd5);    
    background-color:3a7bd5;
    color: #fff;
	font-size:1.3em;
	font-weight:bold;
    box-shadow: 0 2px 2px 0 rgba(58, 123, 213, 0.14), 0 3px 1px -2px rgba(58, 123, 213, 0.2), 0 1px 5px 0 rgba(58, 123, 213, 0.12);
}
/* End special button dark blue*/


/* special button lent*/
.btn-lent {
  margin-top: 1.5rem;
  width: fit-content;
  border: 2px solid #EEC5F7;
  background-color: rgb(172, 75, 193);
  border-radius: 0.5rem;
  padding: 0.5rem 1.4rem;
  font-size: 1.2rem;
  line-height: 1.5rem;
  transition: all .3s ease;
  color: #fff;
}

.btn-lent:hover {
  background-color: rgb(185, 99, 255);
  color: #fff;
}
/* End special button lent*/

/* special button green*/
.btn-green {
  margin-top: 1.5rem;
  width: fit-content;
  border: 2px solid #858A17;
  background-color: rgb(49, 69, 15);
  border-radius: 0.5rem;
  padding: 0.5rem 1.4rem;
  font-size: 1.2rem;
  line-height: 1.5rem;
  transition: all .3s ease;
  color: #fff;
}

.btn-green:hover {
  background-color: rgb(81, 110, 59);
  color: #fff;
}
/* End special button lent*/

/* special font*/
.homily p{
  font-family:"Libre Baskerville Italic;"; 
  font-style:italic; 
  font-size:1.5rem!important;
  font-weight:600;
 }

.homily h4{
  font-family:"Libre Baskerville Italic;"; 
  font-style:italic; 
  font-size:1.5rem!important;
  font-weight:600;
  color:#fff!important;}

.homily ul li{
  font-size:30px;}
  
.homily span {text-decoration:underline;}
/* end of special font*/

/* new centre content CSS*/
.centered-content {
    align-content: center;  /* That's it! No flexbox or grid needed */
    block-size: 100vh;
}



/*special buttons*/
.btn-sjo {
  cursor: pointer;
  padding: 20px;
  width: auto;
  background-image: linear-gradient(
    0deg,
    hsl(189, 92%, 58%),
    hsl(189, 99%, 26%) 100%);
  font-size: 1.2rem;
  color: #fff;
  a {color: #fff!important;}
  a:hover {color: #C0C0C0 !important;}
  border: 0;
  border-radius: 9999px;
  box-shadow: inset 0 -2px 25px -4px var(--white);
}

.btn-white-text a {color:#fff ! important; font-size:1.5em; }



/* From Uiverse.io by Allyhere */
.btn-shiney {
  --clr-font-main: hsla(0 0% 20% / 100);
  --btn-bg-1: hsla(194 100% 69% / 1);
  --btn-bg-2: hsla(217 100% 56% / 1);
  --btn-bg-color: hsla(360 100% 100% / 1);
  --radii: 0.5em;
  cursor: pointer;
  padding: 0.9em 1.4em;
  width:auto;
  min-width: 120px;
  min-height: 44px;
  font-size: var(--size, 1rem);
  font-weight: 500;
  transition: 0.8s;
  background-size: 280% auto;
  background-image: linear-gradient(
    325deg,
    var(--btn-bg-2) 0%,
    var(--btn-bg-1) 55%,
    var(--btn-bg-2) 90%
  );
  border: none;
  border-radius: var(--radii);
  color: var(--btn-bg-color);
  box-shadow:
    0px 0px 20px rgba(71, 184, 255, 0.5),
    0px 5px 5px -1px rgba(58, 125, 233, 0.25),
    inset 4px 4px 8px rgba(175, 230, 255, 0.5),
    inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}

.btn-shiney:hover {
  background-position: right top;
}

.btn-shiney:is(:focus, :focus-visible, :active) {
  outline: none;
  box-shadow:
    0 0 0 3px var(--btn-bg-color),
    0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
  .btn-shiney {
    transition: linear;
  }
}





.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}