/*
Theme Name: TechNet Website by Yoko Co
Theme URI: http://www.yokoco.com
Version: 1.0
Description: A custom child theme for TechNet 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)
*/

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

/* Proxima Nova Font */

h1, h2, h3, h4, h5, h6, body, a, .fl-page-nav .navbar-nav, .fl-page-nav .navbar-nav a {font-family: 'Proxima Nova', sans-serif;}

/* Other Text Styles */

.larger p {
	font-size: 1.25em;
}

.xlarger p {
	font-size: 1.5em; 
}

.smaller p {
	font-size: 0.75em; 
}

.lightblue-caps,
.lightblue-caps .fl-heading-text,
.lightblue-caps h1, .lightblue-caps h2, .lightblue-caps h3, .lightblue-caps h4, .lightblue-caps h5, .lightblue-caps h6,
h1.lightblue-caps, h2.lightblue-caps, h3.lightblue-caps, h4.lightblue-caps, h5.lightblue-caps, h6.lightblue-caps {
	font-weight: 700;
	font-size: 28px;
	color: #A6CAFF;
	text-transform: uppercase;
}

.blue-caps,
.blue-caps .fl-heading-text,
.blue-caps h1, .blue-caps h2, .blue-caps h3, .blue-caps h4, .blue-caps h5, .blue-caps h6,
h1.blue-caps, h2.blue-caps, h3.blue-caps, h4.blue-caps, h5.blue-caps, h6.blue-caps {
	font-weight: 700;
	font-size: 12px;
	color: #0060B9;
	text-transform: uppercase;
}

.thin-heading,
.thin-heading .fl-heading-text,
.thin-heading h1, .thin-heading h2, .thin-heading h3, .thin-heading h4, .thin-heading h5, .thin-heading h6 {font-weight: 400;}

.all-caps,
.all-caps .fl-heading-text,
.all-caps h1, .all-caps h2, .all-caps h3, .all-caps h4, .all-caps h5, .all-caps h6 {text-transform: uppercase;}


.bg-main > .fl-row-content-wrap, .bg-main > .fl-col-content, .bg-main.fl-module {
	background-color: #0060B9; 
}

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

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

@media screen and (max-width: 767px) {
	.lightblue-caps,
	.lightblue-caps .fl-heading-text,
	.lightblue-caps h1, .lightblue-caps h2, .lightblue-caps h3, .lightblue-caps h4, .lightblue-caps h5, .lightblue-caps h6,
	h1.lightblue-caps, h2.lightblue-caps, h3.lightblue-caps, h4.lightblue-caps, h5.lightblue-caps, h6.lightblue-caps {
		font-size: 22px;
	}
}

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

a.fa-search {
	font-family: 'Linearicons';
	padding-top: 7px;
}

a.fa-search:before {
	content: "\e922";
	font-size: 15px;
}

.fl-page-nav ul.sub-menu {
	border-top: 0px; 
	border-radius: 6px; 
}

@media screen and (min-width: 768px) {
	.fl-page-header, .fl-page-header-wrap {
		border-bottom-style: none; /* Removes the 1px border below the menu */
		width: 100%;
		
		/* Used for transparent headers. If you're using the default theme header, uncomment the section below to enable a transparent header. */
		/* background: rgb(0,0,0);
		background: -moz-linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
		background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
		background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
		position: absolute;
		z-index: 10;
		top: 0px; */ /*Height of top bar*/
	}
	.fl-page-header-fixed .fl-page-header-wrap {
		background: #fff; 
	}
}

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

/* Home Banner 1 */

.home-banner.dark-overlay .fl-row-content-wrap::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(279.82deg, #033F76 31.78%, rgba(23, 90, 152, 0) 81.48%), linear-gradient(262.83deg, rgba(3, 78, 145, 0.99) 42.28%, #3682C6 88.63%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(76.92deg, rgba(32, 216, 150, 0.2) 3.61%, rgba(0, 0, 0, 0) 55.05%), linear-gradient(0deg, #0161BA, #0161BA), rgba(255, 255, 255, 0.71);
	mix-blend-mode: multiply;
	transform: matrix(-1, 0, 0, 1, 0, 0);
}

.home-banner.light-overlay .fl-row-content-wrap::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(13, 118, 215, 0.152) 0%, rgba(255, 255, 255, 0.2) 100%), rgba(255, 255, 255, 0.71);
	mix-blend-mode: normal;
	transform: matrix(-1, 0, 0, 1, 0, 0);
}

.home-banner .fl-row-content {
	z-index: 99;
	position: relative;
}

/* Home Banner 2 */

.home-banner-2 .fl-row-content-wrap::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(76.92deg, rgba(32, 216, 150, 0.2) 3.61%, rgba(0, 0, 0, 0) 55.05%), linear-gradient(282.45deg, rgba(9, 77, 140, 0.532) 51.22%, rgba(9, 77, 140, 0) 51.22%, rgba(9, 77, 140, 0) 57.07%), radial-gradient(85% 354.64% at 87.64% 80.82%, #0464BD 0%, rgba(5, 100, 189, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
	transform: matrix(-1, 0, 0, 1, 0, 0);
}

.home-banner-2 .fl-row-content {
	z-index: 99;
	position: relative;
}

/* Home Banner 3 */

.home-banner-3 .fl-row-content-wrap::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(76.92deg, rgba(32, 216, 150, 0.2) 3.61%, rgba(0, 0, 0, 0) 55.05%), linear-gradient(282.45deg, rgba(255, 255, 255, 0.7) 51.22%, rgba(9, 77, 140, 0) 51.22%, rgba(9, 77, 140, 0) 57.07%), radial-gradient(85% 354.64% at 87.64% 80.82%, #0464BD 0%, rgba(5, 100, 189, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, linear-gradient(0deg, rgba(255, 255, 255, 0.71), rgba(255, 255, 255, 0.71));
	transform: matrix(-1, 0, 0, 1, 0, 0);
}

.home-banner-3 .fl-row-content {
	z-index: 99;
	position: relative;
}

/* Banner Main */

.banner-main .fl-row-content-wrap::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(60.31deg, rgba(32, 216, 150, 0.3) 0.27%, rgba(0, 0, 0, 0) 108.44%), linear-gradient(0deg, rgba(4, 100, 189, 0.81), rgba(4, 100, 189, 0.81)), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.banner-main .fl-row-content {
	z-index: 99;
	position: relative;
}

.banner-main-title .fl-module-content {
	margin-bottom: 0px; 
}

.banner-main-subtitle .fl-module-content {
	margin-top: 0px; 
}

.banner-main-breadcrumbs {
	opacity: 0.75;
	font-size: 0.8em; 
}

.banner-main-breadcrumbs ol {
	padding: 0px; 
}

/* Share Buttons */

.share-buttons {
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.share-buttons .a2a_kit {margin-left: 10px;}

.share-buttons .a2a_svg {
	height: 20px !important;
	width: 20px !important;
	line-height: 20px !important;
	background-color: transparent !important;
}

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

/* This is the default container for a grid item in the posts module. */
.fl-post-grid .fl-post-grid-post {
	
}

.feed-item-complex hr, .feed-item-simple hr {color: #ECE9EC;}

@media screen and (max-width: 767px) {
	h2.fl-post-title {font-size: 24px !important;}
}

.feed-meta-block {margin-bottom: 15px;}

/* Complex Feeds */

.fl-post-grid-post {border: none;}

.feed-item-complex, .feed-item-simple {
	padding: 20px; 
}

.fri-feed-item .row {
	margin: 0px; 
}

.feed-meta-block {
	font-size: 0.9em; 
}

.feed-meta-block + .feed-meta-block {
	margin-top: 10px; 
}

.feed-meta-label {
	font-size: 0.75em; 
}

.feed-meta-block ul.fl-category {
	list-style-type: none; 
	padding: 0px; 
}

/* People */

.member-grid-item .fl-post-text, .person-grid-item .fl-post-text {padding-top: 0;}

/* Members */

.member-carousel .fl-post-carousel-post {border: none;}

.member-carousel .fl-post-carousel-text {display: none;}

.member-carousel .fl-post-carousel-image img,
.member-grid-item img {
	height: 150px !important;
	object-fit: contain;
}

.member-grid-item .ar-photo {
	text-align: center;
	padding: 10px;
}

/* People/Staff Accordion */

.fl-accordion-button-icon-left, .fl-accordion-button-icon-right {
	color: #000;
	opacity: 1;
}

.staff-grid-item {
	background-color: #F0F8FD;
	border: 1px solid #ECE9EC;
}

.staff-grid-item .fri-flex-row {align-items: center;}

.staff-grid-item .feed-item-left {
	padding: 20px 0px 20px 20px;
}

.staff-grid-item .fl-post-text {padding-left: 0px !important;}

.staff-grid-item h2.fl-post-title {margin: 0px !important;}

.staff-grid-item .staff-title-company {
	line-height: 1.2;
	padding-bottom: 5px !important;
}

.staff-grid-item .staff-name {font-size: 28px !important;}

.staff-grid-item .staff-location {
	font-size: 18px;
	font-weight: 700;
	color: #1D4075;
}

/* Search Results */

.search-result-item {
	padding: 20px 40px 40px 40px;
	background-color: #fff;
}

.search-result-item h3.fl-post-feed-title {font-size: 28px;}

/******************************************************************************************/
/*************************************** 5 CPTs *******************************************/
/******************************************************************************************/

/* Public Policy */

#relevanssi_related_grid {
	display: flex !important;
	gap: 40px !important;
}

.relevanssi_related_post {
	width: 32%;
	background-color: #fff;
	padding: 40px;
}

/* Media */

.banner-main h1.fl-heading {
	font-size: 50px;
	line-height: 1.2;
}

/******************************************************************************************/
/*************************************** 6 FOOTER *****************************************/
/******************************************************************************************/

.footer a {opacity: 70%;}

.footer a.fl-button {opacity: 100%;}

.footer .fl-icon {transition: all .2s ease;}

.footer .fl-icon:hover {transform: translateY(-5px);}

.footer .icon-no-animation .fl-icon:hover {transform: none;}

.footer .fl-icon:hover i::before {color: #fff;}

.footer-contact-icon .fl-module-content {
	margin-top: 0px; 
}

.footer .menu li ul {
	display: none; 
}

.footer .menu li a {
	padding: 0px 0px 18px; 
	display: flex;
}

.footer .menu li a::before {
	content: url(/wp-content/themes/yoko-technet-child/images/chevron-right.svg);
	margin-right: 5px;
	height: 16px;
	width: 16px;
}

.footer .menu li a:hover {
	color: #fff !important;
	text-decoration: underline;
}

.footer-sub {
	font-size: 0.75em; 
}

.footer-sub-right {
	text-align: right; 
}

@media screen and (max-width: 767px) {
	.footer-sub, .footer-sub-right, .footer-sub-left {
		text-align: center; 
	}
	.footer-sub-left .fl-module-content {
		margin-bottom: 5px; 
	}
	.footer-sub-right .fl-module-content {
		margin-top: 5px; 
	}
}

/******************************************************************************************/
/************************************ 7 GENERAL STYLES ************************************/
/******************************************************************************************/

.fl-icon, .fl-icon a {color: #28D99A !important;}

/* Page - Sidebar */

.dark-cta, .light-cta, .main-cta {padding: 20px 40px;}

.dark-cta, .main-cta {
	color: #fff;
}

.dark-cta h4, .main-cta h4 {
	color: #fff;
}

.dark-cta h4, .main-cta h4, .light-cta h4 {
	font-weight: 400;
}

.dark-cta {
	background: url('/wp-content/themes/yoko-technet-child/images/dark-cta-bg.jpg') no-repeat;
}

.light-cta {
	background-color: #fff;
	border: 1px solid #ECE9EC;
}

.main-cta {
	background: url('/wp-content/themes/yoko-technet-child/images/main-cta-bg.jpg') no-repeat;
}

.sidebar-posts .fl-post-feed {
	border: 1px solid #ECE9EC;
	background-color: #fff;
	padding: 40px;
}

.sidebar-posts .fl-post-feed-post:not(:last-of-type) {
	border-bottom: 1px solid #ECE9EC;
	padding-bottom: 30px;
}

/* Sidebars */

.box-style {
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ECE9EC;
	margin-bottom: 40px;
}

/* Pagination */

.fl-builder-pagination li a.page-numbers, .fl-builder-pagination li span.page-numbers {
	border: 1px solid #ECE9EC;
	color: #0060b9;
	padding: 8px 16px;
	background-color: #fff;
}

.fl-builder-pagination li a.page-numbers:hover, .fl-builder-pagination li span.current {
	background-color: #0060b9;
	color: #fff;
	border: 1px solid #0060b9;
}

/* Search Results */

.search-result-item {border: 1px solid #ECE9EC;}

/* Gravity FOrms */

.gform_wrapper {padding: 10px 30px !important;}

h2.gform_title {font-size: 32px;}

legend.gfield_label {border-bottom: none;}

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

@media screen and (max-width: 767px) {
	h4 {font-size: 22px;}
	h6 {font-size: 16px;}
}