/*
Theme Name: Heartland Lutheran High School
Author:     Provident Pro
Author URI: https://www.providentpro.com/
Version:    0.1.3
*/

html { box-sizing:border-box; }
*, *::before, *::after { box-sizing:inherit; }

body { background-color:#051a2e; }

#page { background-color:#fff; overflow:hidden; }

.container { margin:0 auto; padding:0 30px; max-width:100%; width:1740px; }

.push-left { padding-right:calc(50% - 840px); }
.push-right { padding-left:calc(50% - 840px); }

#overlay { background-color:rgba(0, 0, 0, 0.5); display:none; height:100%; left:0; position:fixed; top:0; width:100%; z-index:11; }

.with_frm_style .frm_message p, .frm_message p, .frm_error_style p { margin-bottom:0; }

.fc .fc-toolbar-title { font-size:2.2em !important; }
.fc .fc-toolbar { flex-wrap:wrap; gap:30px; }
.fc .fc-toolbar .fc-toolbar-chunk:last-chidl { white-space:nowrap; }
.fc table { margin-bottom:0; }
.fc a { text-decoration:none; }
.fc-day a, .fc-daygrid-day-number, .fc-event { color:#07233d; }
.fc-event-title { font-weight:400 !important; }
.fc-daygrid-day-number { font-weight:700; }

/* Mobile Menu */
#mobile-menu { background-color:#07233d; overflow-x:hidden; padding-top:72px; position:fixed; top:0; bottom:0; left:0; transition:width 0.3s; width:0; z-index:12; }
.admin-bar #mobile-menu { top:32px; }

#mobile-menu .close { border-radius:50%; color:#fff; display:block; font-size:24px; position:absolute; top:15px; right:15px; width:42px; height:42px; line-height:42px; text-align:center; text-decoration:none; transition:background-color 0.3s; }
#mobile-menu .close:hover { background-color:#aa1111; }

#mobile-menu .menu ul { list-style-type:none; margin-bottom:0; padding-left:0; }
#mobile-menu .menu ul li { border-top:1px solid rgba(255, 255, 255, 0.1); font-size:15px; font-weight:500; line-height:60px; text-transform:uppercase; white-space:nowrap; }
#mobile-menu .menu ul li a { color:#fff; display:block; overflow:hidden; padding:0 15px; text-overflow:ellipsis; text-decoration:none; transition:background-color 0.3s, color 0.3s; }
#mobile-menu .menu ul li a:hover, #mobile-menu .menu ul li.active > a { background-color:#aa1111; color:#fff; }

#mobile-menu .menu ul li.menu-item-has-children > a { padding-right:0; }

#mobile-menu .menu ul li a .sub-menu-toggle { display:block; float:right; height:60px; margin-left:15px; text-align:center; transition:background-color 0.3s; width:60px; }
#mobile-menu .menu ul li a .sub-menu-toggle::before { content:'\f105'; font-family:'Font Awesome 6 Pro'; font-weight:400; }
#mobile-menu .menu ul li.active > a .sub-menu-toggle::before { content:'\f107'; }
#mobile-menu .menu ul li a .sub-menu-toggle:hover { background-color:rgba(0, 0, 0, 0.15); }

#mobile-menu .menu .sub-menu { background-color:#fff; display:none; }
#mobile-menu .menu .sub-menu li { border-top-width:0; font-weight:400; text-transform:none; }
#mobile-menu .menu .sub-menu li a { color:#333; transition:background-color 0.3s, color 0.3s; }
#mobile-menu .menu .sub-menu li a:hover, #mobile-menu .menu .sub-menu li.active > a { color:#fff; }

#mobile-menu .social-links { padding:15px; }
#mobile-menu .social-links ul { font-size:0; list-style-type:none; margin-bottom:0; padding-left:0; }
#mobile-menu .social-links ul li { display:inline-block; font-size:16px; margin-right:6px; }
#mobile-menu .social-links ul li:last-child { margin-right:0; }
#mobile-menu .social-links ul li a { background-color:#aa1111; border-radius:50%; color:#fff; display:block; width:36px; height:36px; line-height:36px; text-align:center; transition:transform 0.6s; }
#mobile-menu .social-links ul li a:hover { transform:scale(1.05); }

/* Announcements */
#announcements { background-color:#07233d; border-bottom:1px solid #0b355c; color:#fff; padding:9px 0; text-align:center; }

#announcements .announcements { position:relative; }

#announcements ul { list-style-type:none; margin-bottom:0; overflow:hidden; padding-left:0; white-space:nowrap; }
#announcements ul li { display:none; font-size:13px; }
#announcements ul li:first-child { display:inline; }
#announcements ul li::before { content:'\f0f3'; font-family:'Font Awesome 6 Pro'; margin-right:6px; }

/* Header */
#header { background:#07233d url('img/header-overlay.svg') scroll no-repeat calc(50% - 300px) 50%; background-size:auto 95%; position:relative; }

#header .stripe { background-color:#aa1111; box-sizing:content-box; position:absolute; top:0; right:0; width:calc(50% - 840px); height:100%; }

#header .columns { display:flex; align-items:center; justify-content:space-between; }

/* Navigation */
#navigation .columns { gap:18px; }

#navigation .logo { padding:15px 0; }
#navigation .logo img { transition:transform 0.6s; vertical-align:bottom; width:300px; }
#navigation .logo a:hover img { transform:scale(1.025); }

#navigation .menu ul { font-size:0; list-style-type:none; padding-left:0; margin-bottom:0; white-space:nowrap; }
#navigation .menu ul li { display:inline-block; font-size:15px; font-weight:500; line-height:1; margin-right:12px; position:relative; text-transform:uppercase; }
#navigation .menu ul li a { color:#fff; display:block; padding:9px 6px; text-decoration:none; }

#navigation .menu ul li > a::before { background-color:#aa1111; content:''; display:block; height:4px; opacity:0; position:absolute; bottom:0; left:6px; right:6px; transition:opacity 0.3s; }
#navigation .menu ul li > a:hover::before, #navigation .menu ul li.hover > a::before, #navigation .menu li.current-menu-item > a::before, #navigation .menu li.current-menu-ancestor > a::before { opacity:1; }

#navigation .menu ul li.menu-item-has-children > a::after { content:'\f107'; font-family:'Font Awesome 6 Pro'; font-size:12px; font-weight:900; margin-left:6px; }

#navigation .menu ul .highlight > a { background-color:#1eba29; border-radius:21px; height:42px; line-height:42px; padding:0 18px; transition:transform 0.3s; }
#navigation .menu ul .highlight > a:hover { transform:scale(1.05); }
#navigation .menu ul .highlight > a::before { content:none; }

#navigation .menu .sub-menu { background-color:#fff; display:none; min-width:100%; position:absolute; top:100%; left:6px; z-index:1; }
#navigation .menu .sub-menu li { display:block; font-size:14px; font-weight:400; margin-right:0; text-transform:none; white-space:nowrap; }
#navigation .menu .sub-menu li a { color:#333; padding:15px; transition:background-color 0.3s, color 0.3s; }
#navigation .menu .sub-menu li a:hover, #navigation .menu .sub-menu li.hover > a, #navigation .menu .sub-menu li.current-menu-item > a, #navigation .menu .sub-menu li.current-menu-ancestor > a { background-color:#aa1111; color:#fff; }

#navigation .menu .sub-menu li > a::before { content:none; }

#navigation .menu .sub-menu li.menu-item-has-children > a { padding-right:45px; }
#navigation .menu .sub-menu li.menu-item-has-children > a::after { content:'\f105'; display:block; position:absolute; top:50%; right:0; text-align:center; transform:translateY(-50%); transition:color 0.3s; width:45px; }

#navigation .menu .sub-menu .sub-menu { top:0; left:100%; }

#navigation .social-links { padding-left:12px; }
#navigation .social-links ul li { font-size:14px; margin-right:0; }
#navigation .social-links ul li a { border-radius:50%; width:36px; height:36px; line-height:36px; padding:0; text-align:center; transition:background-color 0.3s, transform 0.3s; }
#navigation .social-links ul li a:hover { background-color:#07233d; transform:scale(1.1); }

#navigation .social-links ul li > a::before { content:none; }

#mobile-menu-toggle { background-color:#aa1111; border-radius:50%; color:#fff; display:none; font-size:30px; text-align:center; text-decoration:none; transition:transform 0.3s; width:60px; height:60px; line-height:60px; }
#mobile-menu-toggle:hover { transform:scale(1.05); }

/* Home Header */
#home-header { color:#fff; position:relative; }

#home-header .columns { justify-content:space-between; }

#home-header .content { align-self:center; padding:60px 0 135px; width:50%; }

#home-header .preheading { font-size:0.7em; font-weight:500; letter-spacing:0.3em; margin-bottom:2em; text-transform:uppercase; }

#home-header .heading { font-size:4.4em; font-family:'Oswald', sans-serif; font-weight:700; line-height:1; margin-bottom:0.4em; text-transform:uppercase; }
#home-header .heading strong { color:#aa1111; display:block; font-size:1.4em; }

#home-header .image { align-self:flex-end; width:50%; }
#home-header .image img { display:block; }

/* Interior Header */
#interior-header { position:relative; }

#interior-header .columns { justify-content:space-between; }

#interior-header .content { align-self:center; padding:60px 0; width:50%; }
#interior-header .content h1 { color:#fff; margin-bottom:0; }

#interior-header .image { align-self:flex-end; width:50%; }
#interior-header .image img { display:block; margin-bottom:-150px; }

/* Upcoming Event */
#upcoming-event { background-color:#aa1111; color:#fff; display:flex; align-items:center; gap:30px; height:150px; padding-right:30px; position:relative; margin-top:-75px; width:calc(50% + 75px); }

#upcoming-event .date { background-color:#07233d; border-radius:3px; font-size:15px; font-weight:700; line-height:1; padding:18px 21px; text-align:center; }
#upcoming-event .month { text-transform:uppercase; }
#upcoming-event .day { font-size:30px; }

#upcoming-event .content { flex-grow:1; }

#upcoming-event .title { font-size:30px; font-weight:700; line-height:1; }

#upcoming-event .button a { border:1px solid #fff; border-radius:24px; color:#fff; display:inline-block; font-size:16px; font-style:italic; height:48px; line-height:46px; padding:0 24px; text-decoration:none; transition:background-color 0.3s, border-color 0.3s, transform 0.3s; white-space:nowrap; }
#upcoming-event .button a:hover { background-color:#07233d; border-color:#07233d; transform:scale(1.025); }

/* Slogan */
#slogan { background-color:#aa1111; color:#fff; font-size:14px; font-weight:500; letter-spacing:0.3em; margin-bottom:75px; padding-top:30px; padding-bottom:30px; text-transform:uppercase; }

/* Body */
#body { padding:90px 0; }

#content::after { content:''; clear:both; display:table; }

#content > *:last-child, .siteorigin-widget-tinymce > *:last-child { margin-bottom:0; }

/* Quotes */
#quotes { background-color:#f8f8f8; padding:75px 0; text-align:center; }

#quotes .quote { font-family:'Crimson Pro', serif; font-size:24px; line-height:1.2; }

#quotes .title { color:#07233d; font-size:16px; font-weight:700; letter-spacing:0.1em; margin-top:30px; text-transform:uppercase; }

#quotes .quotes { padding:0 120px; position:relative; }

#quotes .swiper-wrapper { align-items:center; }

#quotes .arrows { font-size:0; }

#quotes .arrow { background-color:#07233d; color:#fff; display:block; font-size:24px; margin-top:-30px; position:absolute; top:50%; width:60px; height:60px; line-height:60px; transition:transform 0.3s; }
#quotes .arrow:hover { transform:scale(1.05); }
#quotes .arrow.swiper-button-disabled { cursor:default; opacity:0.15; }
#quotes .arrow.swiper-button-disabled:hover { transform:none; }
#quotes .prev { left:0; }
#quotes .next { right:0; }

/* Footer Callout */
#footer-callout { background-color:#aa1111; }

#footer-callout .container { background:url('img/footer-callout-overlay.svg') scroll no-repeat left center; background-size:auto 100%; }

#footer-callout .columns { display:flex; justify-content:space-between; align-items:center; padding:60px 0; }

#footer-callout .heading { color:#fff; font-size:36px; font-weight:700; line-height:1; text-transform:uppercase; }
#footer-callout .heading em { color:#aa1111; font-family:'Jost Static', sans-serif; font-style:normal; -webkit-text-stroke-width:2px; -webkit-text-stroke-color:#fff; }

#footer-callout .buttons { display:flex; }

#footer-callout .button { margin-right:45px; }
#footer-callout .button:last-child { margin-right:0; }

#footer-callout .underline-btn.light { border-bottom-color:#07233d; }

/* Footer */
#footer { color:#fff; text-align:center; }

#footer .top { background-color:#07233d; padding:75px 0; }

#footer .logo img { vertical-align:bottom; width:360px; }

#footer .columns { display:flex; margin-top:45px; }

#footer .columns > div { flex-basis:0; flex-grow:1; }

#footer .heading { font-size:14px; font-weight:500; letter-spacing:0.3em; margin-bottom:15px; text-transform:uppercase; }

#footer .social-links ul { font-size:0; list-style-type:none; margin-bottom:0; padding-left:0; }
#footer .social-links ul li { display:inline-block; font-size:18px; }
#footer .social-links ul li a { border-radius:50%; color:#fff; display:block; width:36px; height:36px; line-height:36px; transition:background-color 0.3s, transform 0.3s; }
#footer .social-links ul li a:hover { background-color:#aa1111; transform:scale(1.1); }

#footer .contact div { margin-bottom:15px; }
#footer .contact div:last-child { margin-bottom:0; }

#footer .phone { font-size:24px; font-weight:700; line-height:1.2; }
#footer .phone a { color:#fff; text-decoration:none; }
#footer .phone a:hover { color:#aa1111; }

#footer .address { font-size:15px; }

#footer .compliance img { vertical-align:bottom; }

#footer .partner-school img { transition:transform 0.6s; width:200px; }
#footer .partner-school a:hover img { transform:scale(1.05); }

#footer .bottom { background-color:#051a2e; }

#footer .bottom ul { font-size:0; list-style-type:none; margin-bottom:0; padding:15px 0; }
#footer .bottom ul li { display:inline-block; font-size:11px; line-height:1; margin:0 6px; }

#provident-pro-badge { vertical-align:middle; width:100px; }

/* Media Queries */
@media (max-width:1739px) {
	.push-left { padding-right:30px; }
	.push-right { padding-left:30px; }

	/* Header */
	#header .stripe { box-sizing:border-box; padding-right:30px; }
}

@media (max-width:1439px) {
	/* Navigation */
	#navigation .menu ul li { font-size:14px; }

	/* Home Header */
	#home-header { font-size:16px; }
}

@media (max-width:1199px) {
	.show-mobile-menu #page { position:fixed; width:100%; }

	.show-mobile-menu #overlay { display:block; }

	/* Mobile Menu */
	.show-mobile-menu #mobile-menu { width:360px; }

	/* Header */
	#header .stripe { display:none; }

	/* Navigation */
	#navigation .menu ul, #navigation .social-links { display:none; }

	#mobile-menu-toggle { display:block; }

	/* Home Header */
	#home-header { font-size:14px; }
}

@media (max-width:991px) {
	.container { padding:0 15px; }

	.push-left, .push-right { padding-left:15px; padding-right:15px; }

	.panel-grid:last-child { margin-bottom:0 !important; }

	/* Header */
	#header { background-position:center; }

	/* Home Header */
	#home-header { font-size:13px; }

	#home-header .columns { flex-wrap:wrap; }

	#home-header .content { padding:30px 0 45px; width:100%; }

	#home-header .image { padding-bottom:45px; width:100%; }

	/* Interior Header */
	#interior-header .columns { flex-wrap:wrap; }

	#interior-header .content { padding:30px 0 45px; width:100%; }

	#interior-header .image { padding-bottom:45px; width:100%; }
	#interior-header .image img { margin-bottom:0; }

	/* Upcoming Event */
	#upcoming-event { flex-wrap:wrap; gap:15px; height:auto; margin-top:0; padding-top:15px; padding-bottom:15px; width:100%; }

	/* Slogan */
	#slogan { margin-bottom:0; }

	/* Body */
	#body { padding:60px 0; }

	/* Quotes */
	#quotes .arrow { margin-top:-24px; width:48px; height:48px; line-height:48px; }

	#quotes .quotes { padding:0 108px; }

	/* Footer Callout */
	#footer-callout .columns { flex-wrap:wrap; }

	#footer-callout .heading { margin-bottom:30px; text-align:center; width:100%; }

	#footer-callout .buttons { flex-wrap:wrap; text-align:center; width:100%; }
	#footer-callout .button { margin:0 0 15px 0; width:100%; }
	#footer-callout .button:last-child { margin-bottom:0; }
}

@media (max-width:782px) {
	/* Mobile Menu */
	.admin-bar #mobile-menu { top:46px; }
}

@media (max-width:767px) {
	/* Home Header */
	#home-header { font-size:12px; }

	/* Quotes */
	#quotes { padding:60px 0; }

	#quotes .quotes { padding:0; }

	#quotes .arrows { margin-top:30px; }

	#quotes .arrow { display:inline-block; margin-top:0; position:static; margin:0 6px; }

	/* Footer */
	#footer .columns { flex-wrap:wrap; }

	#footer .columns > div { flex-basis:100%; margin-bottom:45px; }
	#footer .columns > div:last-child { margin-bottom:0; }
}

@media (max-width:575px) {
	h1 { font-size:3em; }

	.alignleft, .alignright { display:block; float:none; margin:0 0 30px; }

	/* Mobile Menu */
	.show-mobile-menu #mobile-menu { width:100%; }
}