/*======================================
Theme Name: Pinwheel Child Theme
Theme URI: https://pinwheelweb.dev/
Description: Child theme for Pinwheel Framework.
Version: 3.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 {
/* Site Fonts */
--site-head-font: 'Tenor Sans',Helvetica,Arial,Lucida,sans-serif;
--site-body-font: 'Raleway',Helvetica,Arial,Lucida,sans-serif;
	
/* Accent Color */
--accent-color: #0073aa;
--accent-color2: #000;

/* Background Color */
--pin-bg1: #F2F2F2;
--pin-bg2: #333;

/*Text Color*/
--pin-lt-txt: #333;
--pin-bk-txt2: #F2F2F2;
}

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

::selection {background: var(--accent-color); color: var(--pin-bk-txt2);}
::-moz-selection {background: var(--accent-color); color: var(--pin-bk-txt2);}

/* Vertical align for modules with background elements. */
.pin-vert-align,.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: #050910;
	text-align:center;
	color:var(--pin-bk-txt2);
	font-size:12px;
	font-weight:700;
	padding:30px;
}
.pin-branding a {color:var(--accent-color2);}
/*=================
||  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;
	}
}

.et_mobile_menu {
    overflow: scroll !important;
    max-height: 80vh;
}

.et_mobile_menu {
	border-top: 3px solid var(--accent-color, #444);
	background: #fff!important;
}

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

/*Mobile Nav CTA*/
.pin-nav-cta a {text-align: center;}
li.pin-hide-mobile {display:none;}
ul.et_mobile_menu .sub-menu li.menu-item{background:#e8e8e8;}


/*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%;}


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

/*Nav CSS*/
/*Adds the donate button to the nav bar*/
.et_pb_menu_0_tb_header.et_pb_menu ul li.pin-nav-cta a,.et_pb_menu_0_tb_header.et_pb_menu ul li.adm-nav-cta a{
	background: var(--accent-color);
	border-radius:15px;
	font-weight:700;
	color:#fff!important;
	padding: 20px 45px;
	height: min-content!important;
	margin-top:auto;
	margin-bottom:auto;
	transition-duration:300ms;
}
.et_pb_menu_0_tb_header.et_pb_menu ul li.pin-nav-cta a:hover,.et_pb_menu_0_tb_header.et_pb_menu ul li.adm-nav-cta a:hover {background:var(--accent-color2);}

/*Nav Social*/
.pin-twitter:after,.pin-facebook:after,.pin-instagram:after,.pin-linkedin:after {
	display:block;
	font-family: "ETmodules";
	font-weight: normal;
	font-size:32px;
}
.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-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 30px;}
.et_pb_menu__menu .et-menu-nav li.menu-item:first-of-type {padding-left:0px;}
.et_pb_menu__menu .et-menu-nav li.menu-item:last-of-type {padding-right:0px;}
.et_pb_menu__menu .et-menu-nav li.menu-item.pin-icon {padding:0px 10px;}

/*End Nav CSS*/


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


@media only screen and (max-width: 980px) {
	.cmm-mobile-menu .et_mobile_nav_menu{display: none;}
    .cmm-mobile-menu .et_pb_menu__menu, .cmm-mobile-menu .et_pb_menu__menu>nav>ul {display:block;}
}