/*
Theme Name: S&EE Website by Yoko Co
Theme URI: http://www.yokoco.com
Version: 1.0
Description: A custom child theme by Yoko Co. 
Author: Yoko Co
Author URI: https://www.yokoco.com
template: bb-theme
*/

/*
 * 1. Master Colors & Type
 * 2. Headers & Nav
 * 3. Banners
 * 4. Feeds & Grids
 * 5. CPTs
 * 6. Footer
 * 7. General Styles
 * X. General Media Queries (Put most media queries in their respective sections)
*/

/* BEFORE YOU DO ANYTHING: 
 * If this site is on Kinsta, add the Kinsta MU plugin! 
 * By default, a handful of Beaver Builder modules are disabled. You can reactivate the ones you need.
 * /

/******************************************************************************************/
/******************************** 1 MASTER COLORS & TYPE **********************************/
/******************************************************************************************/

/* TEXT STYLES */
.home h1.fl-heading {
	font-weight: 400;
}
@media screen and (min-width: 993px) {
	.home h1.fl-heading span {
		font-size: 33px;
		line-height: 1;
	}
	.home h1.fl-heading span > span {
		font-size: 110px;
	}
}

@media screen and (min-width: 769px) {
	.xlarger p {
		font-size: 26px;
		line-height: 1.5;
	}
	.larger p {
		font-size: 22px;
		line-height: 1.5;
	}
	.smaller p {
		font-size: 15px;
		line-height: 1.5;
	}
}

.leadin p,
.leadin a,
.leadin,
.leadin h1,
.leadin h2,
.leadin h3,
.leadin h4,
.leadin h5,
.leadin h6,
.leadin h1 a,
.leadin h2 a,
.leadin h3 a, 
.leadin h4 a,
.leadin h5 a,
.leadin h6 a,
.leadin .fl-heading-text {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 2.25px;
	text-transform: uppercase;
}
/****/

/* BACKGROUND */
.bg-main > .fl-row-content-wrap,
.bg-main > .fl-col-content,
.bg-main.fl-module {
	background-color: #FFF; 
}

.bg-light > .fl-row-content-wrap,
.bg-light > .fl-col-content,
.bg-light.fl-module {
	background-color: #FBFBFB; 
}

.bg-dark > .fl-row-content-wrap,
.bg-dark > .fl-col-content,
.bg-dark.fl-module {
	background-color: #000; 
}

.bg-main > .fl-col-content,
.bg-dark > .fl-col-content,
.bg-light > .fl-col-content {
	margin-right: 20px;
	margin-left: 20px;
}
/****/

/******************************************************************************************/
/************************************ 2 HEADERS & NAV *************************************/
/******************************************************************************************/

/* HEADER */
header {
	background-color: #FFF;
	position: relative;
}
.header::after {
	content: '';
	height: 1px;
	width: calc(100% - 1248px);
	background-color: #CCC;
	position: absolute;
	bottom: 70px;
	right: 0;
}
@media screen and (min-width: 993px) {
	.header {
		position: relative;
		border-bottom: 1px solid #CCC;
	}
	.header .main-col {
		border-top: 1px solid #CCC;
	}
	
	.header .logo-col {
		width: 240px;
		max-width: 240px;
		min-width: 240px;
	}
	.header .nav-col {
		width: auto;
	}
	.header .nav-col .fl-col-group {
		height: 100%;
	}
	
	.header .logo-col > .fl-col-content {
		background-color: #FFF;
		border-right: 1px solid #CCC;
		z-index: 1;
	}
	
	.topbar-col,
	.topbar-col > .fl-col-content,
	.fl-module-menu,
	.fl-module-menu > .fl-module-content,
	.fl-menu,
	.fl-menu nav,
	ul.menu,
	ul.menu > li,
	ul.menu > li > div > a,
	ul.menu > li > a {
		height: 100% !important;
	}
}
@media screen and (max-width: 992px) {
	.header::after {
		top: 93px;
		bottom: unset;
		width: 100%;
	}
	.header ul.menu {
		height: 85vh;
		overflow-y: scroll;
		scrollbar-width: none;
	}
}
/****/

/* NAVIGATION */
.topbar-navigation ul.menu > li:not(.button) > div > a,
.topbar-navigation ul.menu > li:not(.button) > a {
	padding: 16px !important;
	margin-right: 20px;
}
.topbar-navigation ul.menu > li.last-item {
	border-right: 1px solid #CCC !important;
}

.main-navigation ul.menu {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 28px;
	width: 100%;
}
@media screen and (max-width: 992px) {
	.main-navigation.fl-menu-mobile-clone ul.menu {
		margin-top: 20px;
		padding-top: 4px;
	}
}
/****/

/* MENU */
.fl-menu .menu:before,
.fl-menu .menu:after {
	display: none;
}

ul.menu li.button {
	padding: 0;
	border: 0;
}
ul.menu li.button a {
	padding: 14px 25px !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
ul.menu li.btn-gray {
	background-color: transparent !important;
}
ul.menu li.btn-gray a {
	color: #474747;
	background-color: rgba(71, 71, 71, 0.10) !important;
}
ul.menu li.btn-gray:hover a {
	color: #FFF;
	background-color: #010101 !important;
}

ul.menu {
	align-items: stretch;
}
ul.menu > li > div > a,
ul.menu > li > a {
	display: flex;
	align-items: center;
}
ul.menu > li:not(.button) > div > a,
ul.menu > li:not(.button) > a {
	padding: 16px 0 !important;
}
ul.menu > li:not(.button):hover > div > a,
ul.menu > li:not(.button):hover > a,
ul.menu > li:not(.button).current-menu-ancestor > a,
ul.menu > li:not(.button).current-menu-ancestor > div > a,
ul.menu > li:not(.button).current-menu-item > div > a,
ul.menu > li:not(.button).current-menu-item > a,
ul.menu > li:not(.button).current-page-parent > div > a,
ul.menu > li:not(.button).current-page-parent > a {
	text-decoration: underline;
}

ul.sub-menu {
	background-color: #FFF;
	box-shadow: 0px 8px 20px 10px rgba(0, 0, 0, 0.08);
}
ul.sub-menu > li:not(.button) > div > a,
ul.sub-menu > li:not(.button) > a {
	padding: 16px !important;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.16px;
	text-align: left;
}
@media screen and (min-width: 993px) {
	ul.sub-menu > li:not(.button):hover,
	ul.sub-menu > li:not(.button).current-menu-ancestor,
	ul.sub-menu > li:not(.button).current-menu-item,
	ul.sub-menu > li:not(.button).current-page-parent {
		background-color: #474747;
	}
	ul.sub-menu > li:not(.button):hover > div > a,
	ul.sub-menu > li:not(.button):hover > a,
	ul.sub-menu > li:not(.button).current-menu-ancestor > a,
	ul.sub-menu > li:not(.button).current-menu-ancestor > div > a,
	ul.sub-menu > li:not(.button).current-menu-item > a,
	ul.sub-menu > li:not(.button).current-page-parent > div > a,
	ul.sub-menu > li:not(.button).current-page-parent > a {
		color: #FFF;
	}
}
@media screen and (max-width: 992px) {
	ul.sub-menu > li:not(.button) > div > a,
	ul.sub-menu > li:not(.button) > a {
		padding: 10px 0 !important;
	}
	
	ul.sub-menu > li:not(.button).current-menu-ancestor > a,
	ul.sub-menu > li:not(.button).current-menu-ancestor > div > a,
	ul.sub-menu > li:not(.button).current-menu-item > div > a,
	ul.sub-menu > li:not(.button).current-menu-item > a,
	ul.sub-menu > li:not(.button).current-page-parent > div > a,
	ul.sub-menu > li:not(.button).current-page-parent > a {
		text-decoration: underline;
	}
}
/****/

/* MENU - SEARCH */
ul.menu > li.fl-menu-search-item {
	height: 16px !important;
	width: 16px;
}
ul.menu > li.fl-menu-search-item a {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}
ul.menu > li.fl-menu-search-item a::before {
	content: '';
	display: block !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.79297' cy='6.5' r='5.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6465 10.6465L15 15' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 16px;
	height: 16px;
	width: 16px;
}
ul.menu > li.fl-menu-search-item.focus a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.79297' cy='6.5' r='5.5' stroke='%2377736F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6465 10.6465L15 15' stroke='%2377736F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
ul.menu > li.fl-menu-search-item a > i,
ul.menu > li.fl-menu-search-item a > span {
	display: none;
}
ul.menu > li.fl-menu-search-item input[type=search] {
	border: 1px solid rgba(0, 0, 0, 0.20);
	border-radius: 0;
	background-color: #FFF;
	padding: 11px 12px;
}
@media screen and (max-width: 992px) {
	ul.menu > li.search-menu-item {
		margin-top: 20px;
	}
	ul.menu > li.search-menu-item input[type=search] {
		border-radius: 0;
		border: 1px solid rgba(0, 0, 0, 0.20);
		background-color: #FFF;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.79297' cy='6.5' r='5.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6465 10.6465L15 15' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-size: 16px;
		background-position: right 12px center;
		padding: 11px 12px;
	}
	ul.menu > li.search-menu-item input[type=search],
	ul.menu > li.search-menu-item input[type=search]::placeholder {
		color: #474747;
		font-size: 16px;
		font-weight: 400;
		line-height: 1;
	}
}
/****/

/* HAMBURGER MENU */
@media screen and (min-width: 993px) {
	ul.menu .fl-menu-toggle {
		display: none;
	}
}
@media screen and (max-width: 992px) {
	ul.menu .fl-menu-toggle {
		right: -2px;
	}
	ul.menu .fl-menu-toggle:before {
		border-color: #000 !important;
	}
	
	div.fl-menu > button.fl-menu-mobile-toggle {
		background: transparent !important;
		border: 0;
		padding: 0;
	}
	div.fl-menu > button.fl-menu-mobile-toggle::after {
		content: '';
		display: block;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 6H20M4 12H20M4 18H20' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		width: 24px;
		height: 24px;
		margin-bottom: -5px;
	}
	div.fl-menu > button.fl-menu-mobile-toggle.fl-active::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 18L18 6M6 6L18 18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
	div.fl-menu > button.fl-menu-mobile-toggle > span {
		display: none !important;
	}
}
/****/

/******************************************************************************************/
/*************************************** 3 BANNERS ****************************************/
/******************************************************************************************/




/******************************************************************************************/
/************************************ 4 FEEDS & GRIDS *************************************/
/******************************************************************************************/

/******************************************************************************************/
/**************************************** 5 CPTS ******************************************/
/******************************************************************************************/



/******************************************************************************************/
/*************************************** 5 FOOTER *****************************************/
/******************************************************************************************/

/* FOOTER */
.footer-cta .cta-text {
	letter-spacing: 0.18px;
}
@media screen and (min-width: 993px) {
	.footer-cta .cta-title .fl-heading {
		color: #FFF;
		font-size: 82px;
		font-weight: 400;
		line-height: 1.2;
	}
}

.footer-main a,
.footer-main p {
	color: #FCFCFC;
	line-height: 1.8;
	font-weight: 400;
}
.footer-main ul.menu > li > div > a,
.footer-main ul.menu > li > a {
	padding: 10px 0 !important;
	font-size: 18px;
}
.footer-main ul.menu > li:first-child > div > a,
.footer-main ul.menu > li:first-child > a {
	padding-top: 0 !important;
}
.footer-main ul.menu > li:last-child > div > a,
.footer-main ul.menu > li:last-child > a {
	padding-bottom: 0 !important;
}
@media screen and (max-width: 992px) {
	.footer-main ul.menu > li > div > a,
	.footer-main ul.menu > li > a {
		justify-content: center;
	}
}

.footer-sub a,
.footer-sub p {
	font-size: 16px;
	color: #E3E5E8;
	line-height: 1.8;
	font-weight: 400;
}
/****/

/******************************************************************************************/
/************************************ 6 GENERAL STYLES ************************************/
/******************************************************************************************/




/******************************************************************************************/
/******************************** X GENERAL MEDIA QUERIES *********************************/
/******************************************************************************************/