/*!
Theme Name: UPCFAAAI
Theme URI: http://underscores.me/
Author: Metapixel Inc.
Author URI: http://www.metapixel.com.ph
Description: Wordpress theme for UPCFAAAI
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: upcfaaai
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

UPCFAAAI is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
:root {
	--maroon: #9a1d3b;
	--green: #105840;
}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Playfair Display", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	color: #111;
	line-height: 1.1em;
	margin-bottom: 0.4em;
}

h1 {
	font-size: clamp( 2.2rem, 2.2rem + 2.5vw, 5.2rem);
}

h2 {
	font-size: clamp( 1.6rem, 1.6rem + 2.5vw, 3rem);
}

h3 {
	font-size: clamp( 1.4rem, 1.4rem + 2.5vw, 2.7rem);
}

h4 {
	font-size: clamp( 1.2rem, 1.2rem + 2.5vw, 2.4rem);
}

h5 {
	font-size: clamp( 1.1rem, 1.1rem + 2.5vw, 2.2rem);
}

h6 {
	font-size: clamp( 1rem, 1rem + 2.5vw, 2rem);
}

p {
	line-height: 2em;
}

/* Elements
--------------------------------------------- */
body {
	background-color: var(--green);
}

hr,
hr.wp-block-separator {
	background-color: #000;
	border: 0;
	height: 1px;
	opacity: 0.1;
	margin: 1em 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.wp-block-table thead {
	border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

/* Links
--------------------------------------------- */
a {
	color: var(--maroon);
	transition: all 0.2s ease;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: var(--green);
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
#masthead {
	display: flex;
	position: fixed;
	top: 0; left: 0; right: 0;
	padding: 20px 100px 0 100px;
	width: 100%;
	z-index: 99999;
	transition: all 0.4s ease;
	align-items: center;
}

#masthead:before {
	content: "";
	display: block;
	position: absolute;
	top: 20px; right: 100px; bottom: 0; left: 100px;
	border: 1px solid #fff;
	transition: all 0.4s ease;
	z-index: -1;
}

#masthead.scrolled {
	padding: 0 100px;
}

#masthead.scrolled:before {
	background: #fff;
	top: 0;
}

#masthead .site-branding img {
	height: 100px;
	width: auto;
	transition: all 0.4s ease;
}

#masthead.scrolled .site-branding img {
	height: 60px;
}

#masthead.scrolled .main-navigation > div > ul > li > a {
	color: var(--maroon);
}

.site-branding {
	display: flex;
	flex: 1 0 auto;
	width: auto;
	gap: 30px;
	transition: all 0.4s ease;
}

.site-branding h1,
.site-branding p  {
	position: relative;
	display: inline-block;
	font-size: 0;
	line-height: 0;
	margin: 0;
	vertical-align: top;
}

.site-branding h1 a,
.site-branding p a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	color: #fff;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 24px;
	line-height: 40px;
	font-weight: 600;
	vertical-align: top;
}

.site-title-none {
	font-size: 0;
	width: 1px;
	height: 1px;
	display: inline-block;
	overflow: hidden;
	position: absolute!important;
	border: 0!important;
	padding: 0!important;
	margin: 0!important;
	clip: rect(1px,1px,1px,1px);
}

#primary {
	background-color: #fff;
}

#primary .post-content {
	padding: 60px 100px 100px;
}

#colophon {
	color: #fff;
}

#colophon a {
	color: #ffd987;
}

.footer-container {
	display: flex;
	gap: 30px;
}

.footer-logo-container {
	flex: 2 1 50%;
	border-right: 1px solid var(--yelloworange);
}

.footer-logo {
	margin-bottom: 30px;
}

.footer-logo img {
	height: 80px;
	width: auto;
}

.site-info {
	flex: 1 1 25%;
}

.footer-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu ul li {
	font-size: 18px;
	margin-bottom: 15px;
}

.social-media li:before {
	color: #ffd987;
}

.footer-links {
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: right;
}

.footer-links li {
	margin-bottom: 20px;
}

.footer-links li a > * {
	vertical-align: middle;
}

.footer-links li a i {
	width: 24px;
	font-size: 22px;
}

/* Navigation
--------------------------------------------- */
.main-navigation {
	flex: 1 0 auto;
	display: flex;
	justify-content: flex-end;
	transition: all 0.4s ease;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation > div > ul {
	display: flex;
	gap: 30px;
	margin-right: 30px;
}

.main-navigation ul ul {
	float: left;
	position: absolute;
	top: 100%; left: 0;
	visibility: hidden;
	z-index: 99999;
	padding: 15px 0 10px;
	opacity: 0;
	transition: visibility 0s ease 0.4s, opacity 0.4s ease;
}

.main-navigation ul ul:before {
	content: "";
	display: block;
	position: absolute;
	top: 5px; right: 0; bottom: 0; left: 0;
	background: var(--maroon);
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	opacity: 1;
	visibility: visible;
	-webkit-transition: visibility 0s ease 0s, opacity 0.4s ease;
			transition: visibility 0s ease 0s, opacity 0.4s ease;
}

.main-navigation ul ul li {
	margin: 0;
}

.main-navigation ul ul a {
	display: block;
	width: 250px;
	padding: 10px 15px;
	color: #fff;	
	line-height: 1.2em;
	text-align: left;
}

.main-navigation ul ul li > a:hover,
.main-navigation ul ul li.focus > a,
.main-navigation ul ul li.current_page_item:hover > a,
.main-navigation ul ul li.current_page_item.focus > a,
.main-navigation ul ul li.current-menu-item:hover > a,
.main-navigation ul ul li.current-menu-item.focus > a,
.main-navigation ul ul li.current_page_ancestor:hover > a,
.main-navigation ul ul li.current_page_ancestor.focus > a,
.main-navigation ul ul li.current-menu-ancestor:hover > a,
.main-navigation ul ul li.current-menu-ancestor.focus > a,
.main-navigation ul ul li.current_page_item > a,
.main-navigation ul ul li.current_page_ancestor > a,
.main-navigation ul ul li.current-page-parent > a,
.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current-menu-ancestor > a,
.main-navigation ul ul li.current-menu-parent > a,
.main-navigation ul ul li.current-post-ancestor > a,
.main-navigation ul ul li.current-post-parent > a {
	background-color: #fff;
	color: var(--maroon);
}

.main-navigation ul ul ul {
	top: -10px; left: 100%;
	padding: 10px 0 10px 10px;
}

.main-navigation ul ul ul:before {
	top: 0; right: 0; bottom: 0; left: 10px;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
}

.main-navigation > div > ul > li {
	position: relative;
}

.main-navigation > div > ul > li > a {
	display: block;
	position: relative;
	z-index: 1;
	text-decoration: none;
}

.main-navigation > div > ul > li:before {
	content: "";
	display: block;
	position: absolute;
	right: 50%; bottom: 0; left: 50%;
	height: 2px;
	background-color: var(--maroon);
	transition: all 0.2s ease;
}

.main-navigation > div > ul > li:hover:before,
.main-navigation > div > ul > li.focus:before,
.main-navigation > div > ul > li.current_page_item.focus:before,
.main-navigation > div > ul > li.current-menu-item.focus:before,
.main-navigation > div > ul > li.current_page_ancestor.focus:before,
.main-navigation > div > ul > li.current-menu-ancestor.focus:before,
.main-navigation > div > ul > li.current_page_item:before,
.main-navigation > div > ul > li.current_page_ancestor:before,
.main-navigation > div > ul > li.current-page-parent:before,
.main-navigation > div > ul > li.current-menu-item:before,
.main-navigation > div > ul > li.current-menu-ancestor:before,
.main-navigation > div > ul > li.current-menu-paren:before,
.main-navigation > div > ul > li.current-post-ancestor:before,
.main-navigation > div > ul > li.current-post-parent:before {
	right: 0; left: 0;
}

/* Mobile navigation */
.mobile-navigation-button {
	display: none;
	margin-right: 30px;
	z-index: 99999;
	transition: all 0.5s ease;
}

.hamburger {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	z-index: 10;
	vertical-align: top;
}

.hamburger:hover {
	opacity: 1;
}

.hamburger:focus {
	outline: 0;
}

.hamburger-box {
	position: absolute;
	top: 50%; left: 50%;
	margin-top: -12px;
	margin-left: -17px;
	width: 34px;
	z-index: 10;
}

.hamburger .hamburger-inner, 
.hamburger .hamburger-inner::after, 
.hamburger .hamburger-inner::before {
	background-color: #fff;
	width: 34px;
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}

#masthead.scrolled .hamburger .hamburger-inner, 
#masthead.scrolled .hamburger .hamburger-inner::after, 
#masthead.scrolled .hamburger .hamburger-inner::before {
	background-color: var(--maroon);
}

.hamburger.is-active .hamburger-inner, 
.hamburger.is-active .hamburger-inner::after, 
.hamburger.is-active .hamburger-inner::before {
	width: 34px;
}

.hamburger-label {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translate(-20px,-50%);
	font-size: 16px;
	font-weight: 600;
	line-height: 50px;
	color: #fff;
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}

#masthead.scrolled .hamburger-label {
	color: var(--maroon);
}

#masthead .hamburger.is-active .hamburger-inner, 
#masthead .hamburger.is-active .hamburger-inner::after, 
#masthead .hamburger.is-active .hamburger-inner::before {
	background: #fff;
}

#masthead .hamburger.is-active .hamburger-label {
	color: #fff;
}

.mobile-navigation {
	position: fixed;
	top: 100%; left: 100%;
	width: 100%;
	height: 100%;
	z-index: 99998;
	padding: 100px 100px 0;
	text-align: left;
	background: rgba(153, 28, 58, 3.8);
	background: linear-gradient(135deg,rgba(153, 28, 58, 0.95) 0%, rgba(13, 89, 63, 0.95) 100%);
	transition: left 0.4s ease, opacity 0.4s ease, top 0s ease 0.4s;
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}

.mobile-navigation::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.mobile-navigation.open {
	top: 0; left: 0;
	transition: left 0.4s ease, opacity 0.4s ease, top 0s ease 0s;
}

.mobile-navigation ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.mobile-navigation ul ul {
	position: relative;
	padding: 0;
	margin: 0 30px;
}

.mobile-navigation ul li {
	display: block;
	position: relative;
	text-transform: uppercase;
	max-width: 50%;
}

.mobile-navigation ul#mobile-menu > li {
	border-bottom: 1px solid rgba(255,255,255,0.3);
}

.mobile-navigation ul li a {
	position: relative;
	display: inline-block;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	vertical-align: middle;
	text-decoration: none;
	color: #fff;
	-webkit-transition: all 0.4s ease 0s;
			transition: all 0.4s ease 0s;
}

.mobile-navigation ul#mobile-menu > li > a {
	margin-top: 10px;
}

.mobile-navigation ul li a:hover,
.mobile-navigation ul li a:focus {
	text-decoration: none;
}

.mobile-navigation ul.menu.slide-nav li i.drop-down-icon {
	position: absolute;
	box-sizing: border-box;
	display: block;
	top: 13px; right: 0;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 3px;
	color: #fff;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
}

.mobile-navigation ul.menu.slide-nav li i.drop-down-icon:hover {
	cursor: pointer;
}

.mobile-navigation ul.menu.slide-nav li i.drop-down-icon.open {
	transform: rotate(180deg);
}

.mobile-navigation ul li > a:hover,
.mobile-navigation ul li.focus > a,
.mobile-navigation ul li.current_page_item.focus > a,
.mobile-navigation ul li.current-menu-item.focus > a,
.mobile-navigation ul li.current_page_ancestor.focus > a,
.mobile-navigation ul li.current-menu-ancestor.focus > a,
.mobile-navigation ul li.current_page_item > a,
.mobile-navigation ul li.current_page_ancestor > a,
.mobile-navigation ul li.current-page-parent > a,
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-ancestor > a,
.mobile-navigation ul li.current-menu-parent > a,
.mobile-navigation ul li.current-post-ancestor > a,
.mobile-navigation ul li.current-post-parent > a {
	color: #ffe19f;
}

.mobile-navigation .search-form{
	margin: 20px 0 0 50px;
}

/* Post navigation */
.post-navigation {
	margin-top: 60px;
}

.post-navigation .blog-column-content h4 {
	font-size: 20px;
	margin-bottom: 0;
}

.blog-column {
	height: 100%;
	position: relative;
	color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.blog-column-content {
	padding: 30px;
}

.blog-column-content h3 {
	margin: 0;
}

.blog-column-content span {
	display: block;
	margin-bottom: 7px;
	color: #999;
}

.post-nav-label {
	padding: 15px 30px;
	text-transform: uppercase;
	background-color: var(--green);
}

.post-thumb {
	position: relative;
	display: block;
	height: 200px;
	background-size: cover;
	background-position: center;
}

.thumb-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: var(--maroon);
	opacity: 0;
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
}

.thumb-overlay i {
	position: absolute;
	top: 80%; left: 50%;
	transform: translate(-50%,-50%);
	font-size: 60px;
	color: #fff;
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
}

.thumb-overlay:hover,
.thumb-overlay:focus,
.thumb-overlay.focus {
	opacity: 0.8;
}

.thumb-overlay:hover i,
.thumb-overlay:focus i,
.thumb-overlay.focus i {
	top: 50%;
}

/* Posts and pages
--------------------------------------------- */
.header-banner {
	position: relative;
	height: 800px;	
	overflow: hidden;
}

.banner-slide {
	position: relative;
	height: 800px;
	background-size: cover;
	background-position: center;
}

.banner-slide:after {
	content: "";
	display: block;
	position: absolute;
	top: 0; right: 0; left: 0; bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 0;
}

.slide-container {
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: 0 100px 100px;
	z-index: 1;
	color: #fff;
}

.slide-container > div {
	display: flex;
	gap: 60px;
}

.slide-container .slide-left {
	flex: 1 1 66.66%;
}

.slide-container .slide-right {
	position: relative;
	flex: 1 1 33.33%;
}

.slide-container h2 {
	font-size: 60px;
	color: #fff;
}

.slide-container p {
	margin: 0;
}

.slider-bottom {
	position: absolute;
	display: flex;
	left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 80px;
	align-items: center;
}

.slider-dots {	
	flex-grow: 1;
	height: 100%;
	margin: 0 100px;
	border-top: 1px solid #fff;
}

.slick-dots {
    display: flex;
	gap: 20px;
	align-items: center;
	height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 6px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
	transition: all ease 0.4s;
}

.slick-dots li.slick-active button {
	padding: 6px 30px;
}

.slick-dots li.slick-active button::before {
    background-color: #fff;
}

.slick-dots li button::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius: 9px;
	background-color: #fff;
    content: '';
    text-align: center;
    color: black;
}

.link-box {
	display: flex;
	width: fit-content;
	position: relative;
	border: 1px solid var(--maroon);
	color: var(--maroon);
	text-decoration: none;
	font-size: 0;
	margin-top: 20px;
}

.link-box.white-link-box {
	border: 1px solid rgba(255,255,255, 1);
	color: #fff;
}

.link-box.red-link-box {
	background-color: var(--maroon);
	border: 1px solid rgba(255,255,255, 1);
	color: #fff;
	margin: 20px auto 0;
}

.link-box:hover,
.link-box:active,
.link-box:focus {
	text-decoration: none;
}

.link-box span {
	display: inline-block;
	position: relative;
	padding: 15px;
	font-size: 16px;
	line-height: 16px;
	z-index: 1;
	vertical-align: middle;
	transition: all 0.4s ease;
}

.link-box i {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 15px;
	border-left: 1px solid var(--maroon);
	color: var(--maroon);
	font-size: 16px;
	line-height: 16px;
	z-index: 1;
	vertical-align: middle;
	transition: all ease 0.4s;
}

.link-box.white-link-box i {
	border-left: 1px solid #fff;
	color: #fff;
}

.header-banner .link-box.white-link-box span {
	display: flex;
	align-items: center;
	padding: 20px 30px;
	font-size: 20px;
	line-height: 20px;
}

.header-banner .link-box.white-link-box i {
	padding: 20px;
	font-size: 30px;
	line-height: 30px;
}

.link-box.red-link-box i {
	border-left: 1px solid #fff;
	color: #fff;
}

.link-box:before {
	content: "";
	position: absolute;
	top: 0; right: 100%; bottom: 0; left: 0;
	background-color: var(--maroon);
	transition: all 0.4s ease;
}

.link-box.white-link-box:before {
	background-color: #fff;
}

.link-box.red-link-box:before {
	background-color: var(--green);
}

.link-box.slider-link-box {
	position: absolute;
	right: 0; bottom: 0;
}

.link-box:hover:before {
	right: 0;
}

.link-box:hover span,
.link-box:hover i {
	color: #fff;
}

.link-box.white-link-box:hover span,
.link-box.white-link-box:hover i {
	color: var(--maroon);
}

.content-section {
	padding: 100px;
}

.container-fluid {
	padding: 0;
}

.content-section#section-2 {
	background-color: #182b2d;
}

.about-us {
	display: flex;
	position: relative;
}

.about-us > * {
	flex: 1 0 50%;
}

.about-us img {
	height: 500px;
	min-height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.about-us-text {
	display: flex;
	align-items: center;
	padding: 60px;
	background: rgba(153, 28, 58, 3.8);
	background: linear-gradient(135deg,rgba(153, 28, 58, 1) 0%, rgba(13, 89, 63, 1) 100%);
	color: #fff;
}

.about-us-text h2 {
	color: #fff;
}

.content-section#section-3 {
	position: relative;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	color: #fff;
}

.content-section#section-3:after {
	content: "";
	display: block;
	position: absolute;
	top: 0; right: 0; left: 0; bottom: 0;
	background-color: rgba(0,0,0,0.2);
}

.content-section#section-3 > div {
	position: relative;
	z-index: 1;
}

.content-section#section-3 h2 {
	color: #fff;
}

.content-section#section-3 hr {
	background-color: #fff;
	opacity: 0.4;
}

.content-section#section-3,
.content-section#section-5,
.content-section#section-7 {
	background-color: #fafafa;
}

.section-box {
	padding: 60px;
	background-color: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	color: #404040;
}

.post-box {
	display: flex;
	margin-top: 30px;	
	background-color: #fafafa;
}

.content-section#section-5 {
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}

.content-section#section-5 .post-box {
	background-color: #fff;
}

.post-box > a {
	flex: 1 0 33.33%;
}

.post-box > div {
	flex: 2 0 66.66%;
}

.post-box img {
	height: 300px;
	min-height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.post-text {
	position: relative;
	padding: 60px;
}

.post-text h2 {
	font-size: 50px;
	line-height: 1em;
}

.post-text .post-date {
	display: block;
	color: var(--yelloworange);
}

.post-text p {
	font-size: 18px;
	line-height: 2em;
}

.post-box-border {
	margin: 60px 0;
}

.page-banner {
	position: relative;
	padding: 300px 100px 60px;
	background-size: cover;
	background-position: center;
}

.page-banner.no-image {
	padding: 200px 100px 60px;
	background: rgba(153, 28, 58, 3.8);
	background: linear-gradient(135deg,rgba(153, 28, 58, 1) 0%, rgba(13, 89, 63, 1) 100%);
}

.page-banner:before {
	content: "";
	display: block;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

.page-banner.no-image:before {
	content: none;
}

.page-banner .entry-header,
.page-banner .page-header {
	position: relative;
	z-index: 1;
}

.page-banner h1 {
	color: #fff;
}

.page-banner .entry-header > span {
	color: #fff;
	font-size: 20px;
}

.main-column {
	padding-right: 30px;
}

.main-column .post-box {
	flex-direction: column;
}

.main-column article:first-child .post-box {
	margin-top: 0;
}

.sub-column h2 {
	font-size: clamp( 1.2rem, 1.2rem + 2.5vw, 2rem);
}

.sub-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sub-column ul li {
	margin-top: 10px;
	border-bottom: 1px solid #ccc;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.8em;
}

.widget select {
	max-width: 100%;
}

.wp-pagenavi {
	margin-top: 40px;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* SearchWP
--------------------------------------------- */
.searchwp-modal-form-default .searchwp-modal-form__content .search-form label {
	padding: 0 !important;
}

.searchwp-modal-form-default .searchwp-modal-form__content .search-form label input {
	height: 50px;
	padding: 10px;
	border: 1px solid #ccc;
	border-right: none;
}

.searchwp-modal-form-default .searchwp-modal-form__content .search-form label input:focus {
	outline: none;
}

.searchwp-modal-form-default .searchwp-modal-form__content .search-form .search-submit {
	border: none;
	padding: 10px;
	height: 50px;
	width: 50px;
	background-color: var(--maroon);
	color: #fff;
}

.searchwp-modal-form-default .searchwp-modal-form__close {
	color: #fff;
	font-size: 20px;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/
@media only screen and (max-width : 1599px) {
	#masthead .site-branding img {
		height: 80px;
	}
	.main-navigation > div > ul {
		gap: 20px;
	}
}

@media only screen and (max-width : 1399px) {
	#primary-menu {
		display: none;
	}
	.mobile-navigation-button {
		display: block;
	}
}

@media only screen and (max-width : 1199px) {
	#masthead {
		padding: 20px 60px 0 60px;
	}
	#masthead:before {
		top: 20px; right: 60px; bottom: 0; left: 60px;
	}
	#masthead.scrolled {
		padding: 0 60px;
	}
	.mobile-navigation {
		padding: 100px 60px 0;
	}
	.page-banner {
		padding: 250px 60px 60px;
	}
	.page-banner.no-image {
		padding: 200px 60px 60px;
	}
	.slide-container {
		padding: 0 60px 100px;
	}
	.slider-dots {
		margin: 0 60px;
	}
	.content-section {
		padding: 100px 60px;
	}
	.header-banner,
	.banner-slide {
		height: 600px;
	}
	.slide-container h2 {
		font-size: clamp( 20px, 20px + 2.5vw, 40px);
		color: #fff;
	}
	.header-banner .link-box.white-link-box span {
		padding: 15px;
		font-size: 16px;
		line-height: 16px;
	}
	.header-banner .link-box.white-link-box i {
		font-size: 16px;
		line-height: 16px;
		padding: 15px;
	}
	.about-us {
		flex-direction: column;
	}
	.footer-container {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.footer-links {
		text-align: center;
	}
	.footer-menu ul li,
	.footer-links li {
		margin-bottom: 5px;
	}
	#primary .post-content {
		padding: 60px;
	}
	.main-column {
		padding-right: 0;
	}
}

@media only screen and (max-width : 991px) {
	.slide-container > div {
		flex-direction: column;
		gap: 10px;
	}
	.link-box.slider-link-box {
		position: relative;
	}
	.post-box {
		flex-direction: column;
	}
	.content-section#section-5 .post-box {
		flex-direction: column-reverse;
	}
	.hamburger-label {
		display: none;
	}
	.about-us img {
		height: 400px;
	}
}

@media only screen and (max-width : 767px) {
	#masthead {
		padding: 20px 30px 0 30px;
	}
	#masthead:before {
		top: 20px; right: 30px; bottom: 0; left: 30px;
	}
	#masthead.scrolled {
		padding: 0 30px;
	}
	.mobile-navigation {
		padding: 100px 30px 0;
	}
	.mobile-navigation ul li {
		max-width: 100%;
	}
	.page-banner {
		padding: 200px 30px 30px;
	}
	.page-banner.no-image {
		padding: 180px 30px 30px;
	}
	.slide-container {
		padding: 0 30px 100px;
	}
	.slider-dots {
		margin: 0 30px;
	}
	.content-section {
		padding: 60px 30px;
	}
	.header-banner,
	.banner-slide {
		height: 800px;
	}
	.post-text,
	.section-box,
	.about-us-text {
		padding: 40px;
	}
	.about-us img {
		height: 300px;
	}
	#primary .post-content {
		padding: 30px 30px 60px;
	}
}

@media only screen and (max-width : 575px) {
	#masthead .site-branding img {
		height: 60px;
	}
	.page-banner {
		padding: 200px 30px 30px;
	}
	.page-banner.no-image {
		padding: 150px 30px 30px;
	}
}

@media only screen and (max-width : 480px) {
	.post-text,
	.section-box,
	.about-us-text {
		padding: 30px;
	}
}

@media only screen and (max-width : 360px) {
}