/*======================================
Theme Name: Pinwheel Child Theme
Theme URI: https://pinwheelweb.dev/
Description: Child theme for Pinwheel Framework.
Version: 3.4.1
Author: Pinwheel Web Development
Author URI: https://pinwheelweb.dev/
Template: Divi
======================================*/

/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/*=============
|| Variables ||
=============*/
/* Ignore Syntax Error for Variables */

@font-face{font-display:swap;font-family:ETmodules;src:url(fonts/pinicons.eot);src:url(fonts/pinicons.eot?#iefix) format("embedded-opentype"),url(fonts/pinicons.woff2) format("woff2"),url(fonts/pinicons.woff) format("woff"),url(fonts/pinicons.svg#ETmodules) format("svg");font-weight:400;font-style:normal}

:root {
/*Variables below can be changed from Divi Attributes.*/

/* Site Fonts */
--site-head-font: var(--et_global_heading_font);
--site-body-font: var(--et_global_body_font);
	
/* Accent Color */
--accent-color: var(--gcid-primary-color);
--accent-color2: var(--gcid-secondary-color);
--accent-color3: var(--gcid-4gzmwmd96j);

/* Background Color */
--pin-bg1: var(--gcid-iv67x04i5y);
--pin-bg2: var(--gcid-fr6ospz7js);
--pin-dark-bg1: var(--gcid-2um10t765g);
--pin-dark-bg2: var(--gcid-l7m3pz4vx0);

/*Text Color*/
--pin-heading-txt: var(--gcid-heading-color);
--pin-body-txt: var(--gcid-body-color);
--pin-lt-heading-txt: var(--gcid-eujju6fpus);
--pin-lt-body-txt: var(--gcid-4027bc68-27fe-4ac9-a5b8-0838868ff2f0);
--pin-svg-color: brightness(0) saturate(100%) invert(43%) sepia(65%) saturate(383%) hue-rotate(144deg) brightness(102%) contrast(94%);

/*Text Sizing*/
--pin-h1:var(--gvid-bc29besbgp);
--pin-h2:var(--gvid-h2fw8nkrtv);
--pin-h3:var(--gvid-5oyh9jbjgz);	
--pin-h4:var(--gvid-9rkpe1bgk3);	
--pin-h5:var(--gvid-x8jxary11r);	
--pin-h6:var(--gvid-gwleil78v7);

--pin-p-large:var(--gvid-fze9p4p2bt);
--pin-p-small:var(--gvid-1u5xcy4bb7);	
--pin-p-tiny:var(--gvid-lvuj4wak7x);
	
--pin-head-weight:var(--et_global_heading_font_weight);
--pin-body-weight:var(--et_global_body_font_weight);

/*Other Variables*/
--pin-border-radius: var(--gvid-55wtqh1tpw);
--pin-btn-radius: var(--gvid-5absfnvhyc);
--pin-btn-min-width: var(--gvid-t64rgunawt);
--pin-spacing: var(--gvid-e0awrd7ok4);
--pin-small-spacing: var(--gvid-4700ht6770);
--pin-card-img: var(--gvid-kyy7yhq8fr);
}

/*==============
||  Page CSS  ||
==============*/

::selection {background: var(--accent-color); color: var(--pin-lt-heading-txt);}
::-moz-selection {background: var(--accent-color); color: var(--pin-lt-heading-txt);}

/* Vertical align for modules with background elements. */
.pin-vert-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity .5s linear 0.2s;
	-moz-transition: opacity .5s linear 0.2s;
	transition: opacity .5s linear 0.2s;
	opacity: 1;
}

.pin-branding {
	background: var(--pin-dark-bg2);
	text-align:center;
	color:var(--pin-lt-heading-txt);
	font-size:12px;
	font-weight:700;
	padding:15px;
}
.pin-branding a {color:var(--accent-color);}
/*=================
||  Mobile Menu  ||
=================*/
@media only screen and (max-width: 980px) {
	.et_fixed_nav #main-header, 
	.et_fixed_nav #top-header,
	.et_non_fixed_nav.et_transparent_nav #main-header,
	.et_non_fixed_nav.et_transparent_nav #top-header {
    	position: fixed;
	}
	#logo {
		display: none;
	}
	#main-header {
    	-webkit-box-shadow: 0 3px 50px rgba(0,0,0,.2);
    	-moz-box-shadow: 0 3px 50px rgba(0,0,0,.2);
    	box-shadow: 0 3px 50px rgba(0,0,0,.2);
	}
	.mobile_nav.opened .mobile_menu_bar:before {
 		content: '\4d';
	}
	#et-top-navigation span.mobile_menu_bar:before, 
	#et-top-navigation span.mobile_menu_bar:after {
		color: var(--accent-color, #444) !important;
	}


	/*adjust the position of the hamburger menu*/
	.mobile_menu_bar {bottom: 5px;}

	.et_mobile_menu {
	    overflow-x: hidden !important;
		overflow-y: scroll!important;
	    max-height: 70vh;
		border-top: 3px solid var(--accent-color, #444);
		background: #fff!important;
		max-width: 320px;
		right:0;
		left:auto;
	}

	.et_mobile_menu li a {
	    display: block;
	    padding: 5px 15px;
	    border-bottom: 1px solid rgba(0,0,0,.03);
	    text-align: left;
	    font-size: 24px;
		color: #000!important;
	}

	.et_pb_menu .et_mobile_menu {
		padding: 20px;
	}
	
	/*Mobile Nav CTA*/
	.et_mobile_menu .pin-nav-cta a {text-align: center!important;border-radius:60px!important;}
	li.pin-hide-mobile {display:none!important;}
	ul.et_mobile_menu .sub-menu li.menu-item{background:#e8e8e8;}
	ul.et_mobile_menu .sub-menu {box-shadow:none!important;}
	
	/*Center Mobile Nav*/
	.mobile_nav.opened ul.et_mobile_menu {
	    display:flex!important;
	    flex-flow: row wrap;
	    justify-content:center;
	    gap:15px;
	}
	.mobile_nav ul.et_mobile_menu li {width:100%;}

	
	/*CSS For Collapsing Menu*/
	/*adjust the new toggle element which is added via jQuery*/
	
	ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
	ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
	.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
	.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
		width: 44px;
		height: 100%;
		padding: 0px !important;
		max-height: 44px;
		border: none;
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 999;
		background-color: transparent;
	}
	
	
	/*some code to keep everyting positioned properly*/
	
	ul.et_mobile_menu>li.menu-item-has-children,
	ul.et_mobile_menu>li.page_item_has_children,
	ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
	.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
	.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
	.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
		position: relative;
	}
	
	
	/*remove default background color from menu items that have children*/
	
	.et_mobile_menu .menu-item-has-children>a,
	.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
		background-color: transparent;
	}
	
	
	/*hide the submenu by default*/
	
	ul.et_mobile_menu .menu-item-has-children .sub-menu,
	#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
	.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
	.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
		display: none !important;
		visibility: hidden !important;
	}
	
	
	/*show the submenu when toggled open*/
	
	ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
	#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
	.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
	.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
		display: block !important;
		visibility: visible !important;
	}
	
	
	/*adjust the toggle icon position and transparency*/
	
	ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
	.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
		text-align: center;
		opacity: 1;
	}
	
	
	/*submenu toggle icon when closed*/
	
	ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
	.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
		top: 0px;
		position: relative;
		font-family: "ETModules";
		content: '\33';
		color: var(--accent-color);
		padding: 3px;
		font-size: 36px;
	}
	
	
	/*submenu toggle icon when open*/
	
	ul.et_mobile_menu li.menu-item-has-children.pin-open>.mobile-toggle::after,
	.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.pin-open>.mobile-toggle::after {
		content: '\32';
	}
}

/*Mobile Nav CTA*/
.pin-nav-cta a {text-align: center;}
li.pin-hide-mobile {display:none;}
.et-menu.nav li.pin-hide-desktop {display:none;}
ul.et_mobile_menu .sub-menu li.menu-item{background:var(--pin-bg2);}


/*Center Mobile Nav*/
.mobile_nav.opened ul.et_mobile_menu {
    display:flex!important;
    flex-flow: row wrap;
    justify-content:center;
    gap:15px;
}
.mobile_nav ul.et_mobile_menu li {width:100%;}

.et_mobile_menu {
	border-radius: var(--pin-border-radius);
	border-top-width:15px;
}

/*===========
|| Nav CSS ||
===========*/

/*Nav CSS*/
/*Adds the CTA button to the nav bar*/
.et-db #et-boc .et-l .pin-nav .et_pb_menu_0_tb_header.et_pb_menu ul li.pin-nav-cta a{
	background: var(--accent-color);
	border-radius:var(--pin-btn-radius);
	color:var(--pin-lt-heading-txt)!important;
	padding: var(--pin-small-spacing) var(--pin-spacing);
	height: min-content!important;
	margin-top:auto;
	margin-bottom:auto;
	transition-duration:300ms;
	font-weight:var(--pin-head-weight);
}
.et-db #et-boc .et-l .pin-nav .et_pb_menu_0_tb_header.et_pb_menu ul li.pin-nav-cta a:hover {
	background:var(--accent-color2);
	color:var(--pin-heading-txt)!important;
	opacity:1!important;
}

/*Shift menu items right*/
.et_pb_menu__menu li.pin-menu-shift {
	flex-grow:1;
	justify-content:flex-end;
}


/*Nav Social*/
li.pin-icon :after {
	display:block;
	font-family: "ETmodules";
	font-weight: normal;
	font-size:var(--pin-p-large);
}



/*Sets the size of SVG icons*/
.pin-svg-icon span{
	display:block;
	width:var(--pin-p-large);
}

/*Icon Definitions*/
.pin-twitter:after{content:"\e094";} /*Twitter*/
.pin-facebook:after{content:"\e093";} /*Facebook*/
.pin-instagram:after{content:"\e09a";} /*Instagram*/
.pin-linkedin:after{content:"\e09d";} /*LinkedIn*/
.pin-calendar:after{content:"\e025";} /*Calendar*/

/*SVG Icons*/
.pin-bluesky:before{content:url(/wp-content/themes/Pinwheel/images/bluesky-w.svg);}/*Bluesky*/



.pin-nav .et_pb_menu__menu>nav>ul{align-items:center;}
.pin-nav .et_pb_menu__wrap, .pin-nav .et_pb_menu__menu, .pin-nav nav.et-menu-nav, .pin-nav ul.et-menu.nav{width:100%;}

.pin-icon a {text-align:center;border-bottom:0px!important;}
.et_pb_menu__menu .pin-icon {width:min-content!important;}

.et_pb_menu__menu .et-menu-nav li.menu-item {padding:0px var(--pin-small-spacing);}
.et_pb_menu__menu .et-menu-nav li.menu-item.pin-icon {padding:0px 10px;}

/*Mobile Icon Styles*/

.et_mobile_menu li.pin-icon {width: min-content!important;margin-right:10px;}

.et_mobile_menu li.pin-icon :after {
	font-size: var(--pin-h1);
	color: var(--accent-color);
}

/*Mobile SVG Icon Color*/
.mobile_nav .pin-svg-icon :before {
	filter: var(--pin-svg-color);
	width: var(--pin-h1)!important;
	display:block;
}

/*End Nav CSS*/

/*===========
|| Map CSS ||
===========*/

.leaflet-popup .leaflet-popup-content-wrapper {
	border-radius: 0px!important;
	background:var(--pin-bg1);
}
.leaflet-popup .leaflet-popup-tip {background:var(--pin-bg1);}

/*==============
|| Custom CSS ||
==============*/
/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */



/*Add the Bluesky icon to the icon list.*/
/*Hide existing icon*/
.et_pb_icon_list_item.pin-bluesky-list span.et-pb-icon {
	color: transparent;
}

/*Add SVG icon*/
.et_pb_icon_list_item.pin-bluesky-list span.et-pb-icon:before {
	content:url(/wp-content/themes/Pinwheel/images/bluesky-w.svg)!important;/*Bluesky*/
	filter: var(--pin-svg-color);
	width: var(--pin-p-large);
	position: absolute;
}