/*
	Theme Name: school.stjosephlnk.org
	Theme URI: https://sandhills.com
	Author: Sandhills
	Author URI: https://sandhills.com
	Description: Sandhills default template.
	Version: 1.0
	Text Domain: sandhills
	Tags: Sandhills default
*/

/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0; list-style: none;} img{max-width: 100%; image-rendering: -webkit-optimize-contrast;}
.cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *, *:before, *:after{box-sizing: border-box;}

html, body{font-family: "Lato", sans-serif; line-height: 1.65; height: 100%; width: 100%;}

.wrap{margin: auto; padding: 0 5%;}

[class*="prevButton-container"], [class*="nextButton-container"]{display: none !important;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{font-family: "Roboto Slab", serif; font-weight: 700; line-height: 1.25;}
a{color: inherit; cursor: pointer; transition: all .2s ease-in-out;} a:hover{color: inherit;}
strong{font-weight: 700;}

.btn-container{display: flex; gap: 5px; flex-wrap: wrap;}

.btn{display: flex; align-items: center; justify-content: center; background: #610000; padding: 15px 35px 12px; font-family: "Josefin Sans", sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; text-align: center; color: #fff; border-radius: 5px;}
.btn:hover{background: #4B0000; color: #fff;}

.btn.btn-inline{display: inline-flex; margin: 5px;}

.btn.btn-yellow{background: #C5960C;}
.btn.btn-yellow:hover{background: #B68B09;}

.bullet-list li{list-style: disc; margin: 5px 15px; font-size: 14px;}
ol.bullet-list li{list-style: decimal;}
.number-list li{list-style: decimal; margin: 5px 15px; font-size: 14px;}
.number-list h3, .bullet-list h3{font-family: "Lato", sans-serif; font-size: 16px !important;}

.caption{display: block; margin: 5px 0; font-size: 12px; font-weight: 700; font-style: italic; text-align: center;}

.sub-page hr{display: block; margin: 0; border: none; border-top: 1px #eee solid; opacity: 1;}
.sub-page h2{margin-bottom: 8px; font-size: 24px;}
.sub-page h3{margin-bottom: 5px; font-size: 20px; font-weight: 400;}
.sub-page h4{margin-bottom: 5px; font-size: 16px; font-weight: 500;}

/* HEADER */

.header{display: flex; align-items: center; gap: 15px; position: fixed; top: 25px; left: 25px; background: #fff; width: 100%; max-width: calc(100% - 50px); margin: auto; padding: 10px 35px; border-radius: 10px; transition: all .2s ease-in-out; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05); z-index: 999;}
.header .navigation{flex: 1;}

.header.scroll{top: 0; left: 0; max-width: 100%; border-radius: 0 0 10px 10px;}

.highlightSidebars .header{position: relative; top: 0; left: 0; width: 100%;}

/* HOME */

.hero{position: relative; background: url("images/hero.jpg") center center no-repeat; background-size: cover; padding: 300px 5% 200px;}
.hero:after{background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0) 100%); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;}
.hero-inner{position: relative; max-width: 700px; z-index: 9;}
.hero-inner h1{margin-bottom: 10px; color: #610000;}
.hero-inner h2{font-size: 20px; font-weight: 400; line-height: 1.5; color: #610000;}
.hero-inner p{display: block; margin: 20px 0; font-size: 18px; color: #555;}

.hero-links{background: #610000; padding: 25px 5%; text-align: center; color: #fff;}
.hero-links strong{display: block; font-family: "Roboto Slab", serif; font-size: 20px; font-weight: 700; line-height: 1.25;}
.hero-links ul{display: flex; justify-content: center; gap: 2px 10px; flex-wrap: wrap; margin: 5px 0;}
.hero-links ul li a{text-decoration: underline;}
.hero-links ul li a:hover{text-decoration: none;}

.values-section{padding: 75px 0 75px 5%;}
.values-section h3{font-family: "Josefin Sans", sans-serif; font-size: 28px; text-transform: uppercase;}
.values-section .schedule-section{background: #610000; margin-top: 25px; padding: 50px !important; color: #fff;}
.values-section .schedule-section img{display: block; margin: 5px auto !important;}
.values-section .schedule-section a{font-weight: 700; text-decoration: underline; color: #FFBE00;}
.values-section .schedule-section a:hover{text-decoration: none;}

.slider-section .slider-bar{display: block; position: relative; top: -1px; background:#F6EFDB; height: 20px; width: 90%; margin: 0 auto;}

.announcements-section{padding: 75px 5%; overflow-x: hidden;}
.announcements-section h2{font-family: "Josefin Sans", sans-serif; font-size: 28px; text-transform: uppercase;}
.announcements-section .slick-dots{display: none !important;}
.announcements-section [class*="advancedresults"] .slick-arrow i{font-size: 32px !important;}
.announcements-section [class*="advancedresults"] .slick-prev{right: 60px !important; bottom: -50px !important;}
.announcements-section [class*="advancedresults"] .slick-next{right: 15px !important; bottom: -50px !important;}

.activity-slide{padding: 10px;}
.activity-slide .activity-image img{display: block; max-height: 200px; margin: auto;}
.activity-slide .activity-title{display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; margin-top: 15px; font-family: "Roboto Slab", serif; font-size: 20px; font-weight: 700; text-decoration: underline; line-height: 1.25; text-overflow: ellipsis; overflow: hidden;}
.activity-slide:hover .activity-title{text-decoration: none;}

/* SUB PAGES */

.main{padding: 35px 0 100px;}

.title-container{background: #610000; padding: 165px 0 50px; box-shadow: inset 0px -25px 25px 0px rgba(255, 255, 255, 0.15);}
.title-container h1{font-family: "Josefin Sans", sans-serif; font-size: 32px; text-transform: uppercase; text-align: center; color: #fff;}
.title-container .activity-date{text-align: center; color: #fff;}

.breadcrumbs{display: flex; justify-content: center; position: relative; top: -18px;}
#tsh_breadcrumbs{display: inline-flex; justify-content: center; flex-wrap: wrap; background: #fff; padding: 8px 20px 10px; font-size: 12px; border-radius: 10px;}
#tsh_breadcrumbs li{margin: 0; vertical-align: middle;}
#tsh_breadcrumbs li a{font-weight: 600; color: #610000;}
#tsh_breadcrumbs li a:hover{color: #610000;}
#tsh_breadcrumbs strong{font-weight: 400; opacity: .75;}
#tsh_breadcrumbs .separator{padding: 0 6px; opacity: .5;}

.side-navigation{display: block; margin-left: 50px; background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.side-navigation strong{display: block; margin-bottom: 10px; font-family: "Josefin Sans", sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 1.25; color: #610000;}
.side-navigation li{display: block; margin: 3px 0; font-size: 14px;}
.side-navigation li a{display: inline-block; font-size: 14px; text-decoration: underline; line-height: 1.25;}
.side-navigation li a:hover{text-decoration: none;}

.litany-table{display: block; width: 100%; max-width: 600px; margin: auto;}
.litany-table tr{border: 1px #ddd solid;}
.litany-table td{width: 50%; padding: 5px 8px; border-right: 1px #ddd solid;}
.litany-table td:last-child{text-align: right;}

.sub-page .main table{width: 100% !important;}
.sub-page .main table tr{background: none !important;}
.sub-page .main table td{border: 1px #eee solid !important;}

/* FACULTY AND STAFF */

.post-container-staff-members{display: flex; flex-wrap: wrap; gap: 5px; padding: 20px 5px;}
.column-padding-staff-members{flex: 0 0 calc(25% - 5px);}
.column-padding-staff-members [class*="post-column-staff-members"]{height: 100%;}

.staff-heading{margin: 20px 0; color: #610000;}
.staff-box{display: block; background: #fff; height: 100%; padding: 12px 15px; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.staff-image{margin: 10px 0;}
.staff-image img{display: block; max-height: 150px; margin: auto; border-radius: 5px;}
.staff-name{font-weight: 700; line-height: 1.25;}
.staff-title{font-style: italic;}
.staff-description{font-size: 14px;}
.staff-description a{font-weight: 700; text-decoration: underline; color: #610000;}
.staff-description a:hover{text-decoration: none;}

/* CALENDAR EVENT LIST */

.calendar-event{display: block; padding: 35px 0; border-bottom: 1px #eee solid;}
.calendar-event .calendar-title h3{font-size: 22px;}
.calendar-event .calendar-details a{font-weight: 700; text-decoration: underline; color: #610000;}
.calendar-event .calendar-details a:hover{text-decoration: none;}
.calendar-event .calendar-details img{display: inline-block; width: 100%; max-width: 800px; margin: auto; height: auto; transition: all .2s ease-in-out;}
.calendar-event .calendar-details img:hover{opacity: .75;}

/* CHURCH ACTIVITY LIST */

.sub-page .post-container-stay-connected{display: flex; flex-wrap: wrap; gap: 10px; overflow: visible !important;}
.column-padding-stay-connected{width: calc(50% - 10px);}
.column-padding-stay-connected [class*="post-column-stay-connected"]{height: 100%;}

.activity-box{display: flex; flex-direction: column; background: #fff; height: 100%; padding: 20px 30px; text-align: left; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.activity-box .activity-tag{margin-bottom: 8px; font-family: "Josefin Sans", sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #555;}
.activity-box .activity-title a{display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; font-family: "Roboto Slab", serif; font-size: 20px; font-weight: 700; text-decoration: underline; line-height: 1.25; text-overflow: ellipsis; overflow: hidden;}
.activity-box .activity-title a:hover{text-decoration: none;}
.activity-box .activity-date{font-size: 14px; font-weight: 700; color: #555;}
.activity-box .activity-content{margin: 8px 0 16px;}
.activity-box .activity-content p{display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; line-height: 1.5; overflow: hidden;}
.activity-box .btn{width: fit-content; margin-top: auto;}
.activity-box .stay-connected-readmoreTag{display: none;}

.announcements-section .post-container-stay-connected{display: flex; flex-wrap: wrap; gap: 10px; overflow: visible !important;}
.announcements-section .column-padding-stay-connected{width: calc(33.3333% - 10px);}

/* CHURCH ACTIVITY POST */

.activity-details img, .activity-details figure{display: block; margin: auto; max-width: 100% !important; height: auto !important;}
.activity-details .wrap{max-width: 1000px;}

.activity-details .activity-post-single a{font-weight: 700; text-decoration: underline; color: #610000;}
.activity-details .activity-post-single a:hover{text-decoration: none;}

.posts-navigation, .post-navigation{background: #fafafa; margin: 25px auto; padding: 20px;}
.posts-navigation h2, .post-navigation h2{display: none;}
.posts-navigation .nav-links, .post-navigation .nav-links{display: flex; justify-content: space-between;}
.posts-navigation .nav-links a, .post-navigation .nav-links a{display: inline-block; padding: 0 10px; font-size: 14px; font-weight: 600; text-decoration: none;}

.posts-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-previous, .posts-navigation .nav-links .nav-next, .post-navigation .nav-links .nav-next{display: flex; align-items: center; line-height: 1; text-align: center;}
.posts-navigation .nav-links .nav-previous:before, .post-navigation .nav-links .nav-previous:before, .posts-navigation .nav-links .nav-next:after, .post-navigation .nav-links .nav-next:after{font-family: "Font Awesome 5 Free"; font-weight: 900; color: #610000;}
.posts-navigation .nav-links .nav-previous:before, .post-navigation .nav-links .nav-previous:before{content: "\f100";}
.posts-navigation .nav-links .nav-next:after, .post-navigation .nav-links .nav-next:after{content: "\f101";}

/* ACCORDION */

.accordion{margin-bottom: 35px; padding: 0 5% 0 10px;}
.accordion .accordion-item{border: none !important;}
.accordion .accordion-item:first-child > .accordion-header{border-radius: 10px 10px 0 0;}
.accordion .accordion-item:last-of-type > .accordion-header{border-radius: 0 0 10px 10px;}

.accordion-button{display: flex; align-items: center; position: relative; top: 22px; gap: 10px; padding: 10px 0 10px 35px; font-size: 18px; color: #C5960C;}
.accordion-button{box-shadow: none !important;}
.accordion-button:before, .accordion-button:after{content: ""; position: absolute; background: #C5960C; margin: 0; transform: none !important; order: -1;}
.accordion-button:before{left: -9px; width: 20px; height: 2px;}
.accordion-button:after{left: 0; height: 20px; width: 2px;}
.accordion-button:not(.collapsed){background: none; color: #610000;}
.accordion-button:not(.collapsed):before, .accordion-button:not(.collapsed):after{background: #610000;}

.accordion-body{margin: 0; padding: 20px 33px 10px; color: #555; border-left: 2px #610000 solid;}
.accordion-body a{text-decoration: underline;}
.accordion-body a:hover{text-decoration: none;}

/* FOOTER */

.footer{display: flex; font-weight: 300;}
.footer a:hover{text-decoration: underline;}
.footer .footer-heading{margin-bottom: 10px; font-family: "Roboto Slab", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25;}
.footer .footer-left{display: flex; gap: 15px 25px; background: #610000 url("images/footer.jpg") center center no-repeat; background-size: cover; width: 33.3333%; padding: 5% 5% 5% 2%; color: #fff;}
.footer .footer-logo{width: 70px;}
.footer .footer-content{flex: 1;}
.footer .footer-right{flex: 1; background: #fafafa; padding: 5%;}
.footer .footer-right ul{display: block; margin-bottom: 25px;}
.footer .footer-right ul li{margin-bottom: 8px; line-height: 1.25;}
.footer .footer-right .row{gap: 0 25px;}
.footer .footer-right .col-md-4{flex: 1;}
.footer .footer-right .footer-heading{color: #610000;}

/* RESPONSIVE */

@media screen and (max-width: 1500px){
	.header .cta .btn{padding: 15px 20px 12px; font-size: 12px;}
}
@media screen and (max-width: 1200px){
	.footer .footer-left{flex-direction: column; width: 50%;}
	.footer .footer-right .col-md-4{flex: none; width: 100%;}
}
@media screen and (max-width: 1024px){
	.header{top: 0; left: 0; max-width: 100%; padding: 10px 20px; border-radius: 0 0 10px 10px;}
	.header .cta{margin-left: auto;}
	.header .navigation{flex: none; order: 2;}

	.hero{padding: 175px 5% 100px;}
	.hero:after{background: rgba(255, 255, 255, 0.95);}
	.values-section h3{font-size: 24px;}
	
	.main{padding: 15px 0 50px;}
	.main [class*="col-"]{width: 100% !important;}
	
	.title-container{padding: 115px 0 35px;}
	.title-container h1{font-size: 20px;}
	.breadcrumbs{justify-content: center;}
	.side-navigation{margin-left: 0; margin-top: 25px;}
	
	.column-padding-list-of-ministries{width: calc(50% - 10px);}
}
@media screen and (max-width: 768px){
	.outerEditableArea{width: 100% !important;}
	.header .logo{max-width: 50px;}
	.header .cta .btn{flex-shrink: 0; width: fit-content; padding: 12px 18px 8px; font-size: 11px;}

	.values-section{padding: 0;}
	.values-section .statement-section{padding: 35px 5% !important;}
	.values-section .schedule-section{margin-top: 0;}
	.values-section .schedule-section{padding: 35px 5% !important;}
	.values-section .accordion{padding-right: 0;}
	.slider-section .slider-bar{display: none;}
	.slider-section .col-md-6{width: 100%; margin: 0;}
	.announcements-section{padding: 50px 5%;}
	.announcements-section .column-padding-stay-connected{width: 100%;}
	.column-padding-stay-connected{width: 100%;}
	.activity-box{padding: 15px;}
	.column-padding-staff-members{flex: 0 0 calc(33% - 5px);}

	.footer{flex-direction: column;}
	.footer .footer-left{width: 100%; padding: 35px 5%;}
	.footer .footer-right{padding: 35px 5%;}
	.footer .footer-right .col-md-4{width: 100%;}
}
@media screen and (max-width: 480px){
	.btn{width: 100%;}
	
	.hero{padding: 135px 5% 75px;}
	.hero-inner h2{font-size: 18px;}
	.hero-inner p{font-size: 16px;}
	.hero .btn{padding: 15px 12px 12px;}

	.column-padding-staff-members{flex: 0 0 calc(50% - 5px);}
}