@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'Bilbo Swash Caps';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Bilbo Swash Caps Regular'), local('BilboSwashCaps-Regular'), url(https://fonts.gstatic.com/s/bilboswashcaps/v12/zrf-0GXbz-H3Wb4XBsGrTgq2PVmdmATipw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v29/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Oswald, Roboto, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	/* Commenting this out will get rid of the background effect*/
	background-image: url("images/background_resized.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* End of Background Styling */
	scroll-behavior: smooth;
}

/*max-width will prevent the body from expanding beyond 1280px*/
body {
	margin-left: auto;
	margin-right: auto;
	max-width: 1280px;
}


.style-logo {
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	display: block;
	border-radius: 15px;
}

/*A negative margin will allow the div to "float" off the assigned body area*/

#votd {
	text-align: center;
	padding-top: 8px;
}


#churchheaderinfo {
	color: white;
	font-style: italic;
	padding: 7px;
	text-align: center;
}

#churchheaderinfo p {
	margin: 0;
	font-size: large;
}

#headerdonationbutton {
	padding: 5px;
}


#headerdonationbutton a {
	color: #F2F2F2;
	font-weight: bold;
	text-decoration: none;
	border: solid thin #F2F2F2;
	background-color: #333;
	padding: 10px;
	border-radius: 10px;
	transition: all 0.3s linear;
	font-size: larger;
	
}


#headerdonationbutton a:hover {
	background-color: #DDD;
	opacity: 0.7;
	color: black;
}


.style-nav {
	overflow: hidden;
	background-color: #333;
	width: 100%;
	height: auto;
	list-style-type: none;
    font-size: 1.5rem;
}


.style-nav a {
	text-decoration: none;
	color: #F2F2F2;
	text-align: center;
	display: block;
	text-transform: uppercase;
	padding: 14px 16px;
	border-radius: 35px;
}


.style-nav a:hover {
	background-color: #DDD;
	color: black;
}


.style-nav a:active {
	background-color: #DDD;
}

/*Styling for dropdown menu*/

/* Dropdown Button */
.dropbtn {
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #DDD;
	color: black;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	max-width: 90%;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #f44336;
	color: white;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display:block;
}


/* End of Dropdown styling*/


#announcementBanner {
	background-color: #f44336;
	text-align: center;
	color: whitesmoke;
}


#announcementBanner h2 {
	padding: 10px;
	margin: 0;
	font-size: xx-large;
}


#signature {
    font-size: 2.25rem;
    margin: 0 auto;
}


.hideOnMobile {
	display: none;
}

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #333; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1.6rem;
  color: #F2F2F2;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  background-color: #ddd;
  color: black;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidenav-dropdown-content {
	text-indent: 20px;
	display: none;
}

a.icon {
    float: right;
}

/* Photo on Christian Education page */
.ce_photo {
	max-width: 90%;
}

/*Hero Image "displayed out" until media 768px is met*/
.registernow {
	border: medium solid black;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	color: black
}


.registernow:hover {
	background-color:#4D4DA0;
	color: whitesmoke;
}


#VBSpic {
	width: 100%;
}

.heroImageDiv {
  background-color: hsla(0,0%,100%,0.85);
}

.heroimage {
  width: 100%;
  height: auto;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
/* Alter heroimages to accomodate slant and then remove the unused classes. */
.heroImageOld {
    width: 100%;
    height: auto;
}


#proclaimslideshow {
	width: 100%;
	height: 576px;
}

#logobanner {
	background-color: white;
	text-align: center;
	margin-top: -5px;
}


#logobanner img {
	padding: 20px;
	max-height: 100px
}

/* Moving to semantic HTML */
article {
	background-color: hsla(0,0%,100%,0.85);
	padding: 3%;
	padding-top: 1.5%;
	text-align: center;
}


.articleTitle {
	font-size: 2.75rem;
	margin: 0 auto;
}


.divider {
	width: 90%;
	box-sizing: border-box;
	height: 5px;
	background-image: linear-gradient(to right, hsla(46, 39%, 57%, 1), hsla(46, 39%, 57%, 1));
	margin: 0 auto;
    display: block;
}

/*
section {
    padding-top: 1.75em;
}
*/

.sectionHeading {
	font-size: 2.0rem;
	margin-top: 2%;
	margin-bottom: 0.5%;
}


.sectionContent {
	margin: 0 auto;
	font-size: 1.5rem;
}


.sectionSubHeading {
	font-size: 1.75rem;
	margin-bottom: 0.5%;
}

/* Dropcap effect */
.sectionContent.dropcap:first-letter {
	color: maroon;
	font-size: 2.75rem;
}

/* Content Dark for Breaking up sections */
.sectionContentDark {
	margin: 0 auto;
	font-size: 1.5rem;
	background-color: hsla(206, 11%, 11%, 0.85);
	color: whitesmoke;
	padding: 15px;
    text-align: center;
}

.catechismQuestion {
    background-color: white;
    font-family: 'Bilbo Swash Caps', cursive;
    text-align: center;
    font-size: 1.5rem;
    padding: 2% 0;
    margin-top: -5px;
}

.catechismQuestion h2 {
    margin: 0;
}

.catechismImage {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

/* Accordion styling */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-bottom: thin solid;
}


.accordion h2:after {
	content: " (Click to Expand)";
}

.active h2:after {
  content: " (Click to Collapse)";
}


.activeAccordion, .accordion:hover {
  background-color: #ccc; 
}


.panel {
  padding: 0;
  display: none;
  background-color: white;
  overflow: hidden;
}


.panel .column-66 p {
	font-size: larger;
}

.col-container {
  display: flex;
  align-items: center;
}

.colWidth1 {
  flex: 2;
  padding: 2.5%;
}

.colWidth2 {
  flex: 3;
  padding: 2.5%;
}

/* Create full-width columns until media size changes */
.column-33 {
	width: 100%;
	text-align: center
}

	
.column-33 img {
    max-width: 80%;
	padding: 15px;
}


.column-33 a img {
	width: 341px;
	display: inline-block;
	padding: 5px;
}


.column-66 {
	width: 100%;
	text-align: center;
}


ol {
    text-align: left;
    list-style-type: upper-roman;
    font-size: 1.5rem;  
}

table {
	width: 100%;
    overflow-x: hidden;
}

#deaconSchedule {
    border: thin solid black;
    margin: auto;
    font-size: 1.4rem;
}


#deaconSchedule tr:nth-child(even) {
    background-color: #A3A3A3;
}


#specialcontributionbutton {
	text-align: justify;
	font-family: pulpo-rust-75, serif;
	font-style: normal;
	border: black 2px solid;
	border-radius: 10px;
	padding: 15px;
	background-color: #900003;
	color: white;
	margin: 20px;
	display: inline-block;
	text-decoration: none;
}


#specialcontributionbutton:hover {
	background-color: #009FAC;
	transition: 0.1s;
}


#featureimage:hover {
	-webkit-filter: grayscale(100%);
	transition: all 0.75s ease-in-out;
}

#divContactUsForm, input {
    font-size: 1.25rem;
}

#divContactUsForm textarea {
  width: 300px;
}

footer {
	background-color: #333;
	color: #F2F2F2;
	text-align: center;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	clear: both;
}


.facebookbutton {
	color: #F2F2F2;
	font-weight: bold;
	text-decoration: none;
	border: solid thin #F2F2F2;
	background-color: #3b5998;
	padding: 10px;
	border-radius: 10px;
	transition: all 0.3s linear;
	display: inline-block;
}


.facebookbutton:hover {
	background-color: #DDD;
	opacity: 0.7;
	color: black;
}


.mailtobutton {
	color: #F2F2F2;
	font-weight: bold;
	text-decoration: none;
	border: solid thin #F2F2F2;
	background-color: #930002;
	padding: 10px;
	border-radius: 10px;
	transition: all 0.3s linear;
	display: inline-block;
}


.mailtobutton:hover {
	background-color: #DDD;
	opacity: 0.7;
	color: black;
}


.sitemapcolumn h3 {
    margin: 0;
    padding-bottom: 7px;
	font-weight: normal;
	text-decoration: underline;
}


.sitemapcolumn ul {
    padding: 0;
    margin: 0;
}


.sitemapcolumn ul a {
    text-decoration: none;
    color: #F2F2F2;
    margin: 0;
    padding: 0;
	transition: padding .25s ease;
	-webkit-transition: padding .25s ease;
}


.sitemapcolumn ul a:hover {
    /* background-color: darkorange;
    padding-right: 5px;
	border-radius: 2px; */
	padding-left: 15px;
}

#myBtn {
  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 */
  background-color: crimson; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 50%; /* Rounded corners */
  font-size: 35px; /* Increase font size */
  width: 60px;
  height: 60px;
  box-shadow: 1px 1px 1px black;
}


#myBtn:hover {
  background-color: #009688; /* Add a background on hover */
}


.eventcard {
	display: inline-block;
	text-align: center;
	height: 200px;
	width: 200px;
	border: solid medium black;
	border-radius: 8px;
	transition: all 0.1s linear;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	margin: 20px;
}


.eventcard:hover {
	transition: all 0.1s linear;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 8px 25px 0 rgba(0,0,0,0.19);
	transform: scale(0.95);
}


.sermoncontainer {
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	border: solid medium black;
	padding: 10px;
	margin: 3px;
	display: inline-block;
}


.sermoncontainer:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.7);
	background-color: #009EA6;
}


.sermoncontainer li {
	list-style-type: none;
}


/* Styling for active URL/a tag */

.activeLink {
	background-color: red;
}

/*Tablet View*/

@media (min-width: 768px){
	
	.style-logo {
		float: left;
		margin-top: auto;
		border-radius: 0px;
	}
	
	#churchheaderinfo {
		text-align: right;
	}

	.column-33 {
		float: left;
		width: 32%;
	}

	.column-33 a img {
		width: 341px;
		display: inline-block;
		padding: 5px;
	}

	.column-66 {
		float: left;
		width: 68%;
	}
	
	.panel .column-66 p {
        text-align: left;
        text-indent: 40px;
    }
    
    .catechismQuestion {
        font-size: 2.0rem;
    }
    
	#votd {
		padding-top: 0px;
	}
	
	#VBSpic {
		width: 437px;
	}

    #sitemap {
        display: flex;
        width: 100%;
    }
	
    .sitemapcolumn {
    padding-top: 15px;
    }
	
    .sitemapcolumn {
        text-align: left;
        padding-left: 3%;
        flex: 1;
    }
}


/*Desktop View*/

@media (min-width:1024px){
	
	.style-nav {
		clear: both;
	}
    
	.style-nav a{
		display: inline-block;
	}
	
	.style-nav {
		text-align: center;
	}

	/*This controls the width of the content in the dropdown menu.*/
	
    a.icon {
        display: none;
    }
    
    #expandNav {
        display: inline-block;
    }
	    
	.showOnDesktop {
		display: flex;
	}
}