/*
Theme Name: Your FSE Theme by Fusion Studios
Author: Kevin (kevin@fusionstudiosinc.com)
Author URI: http://fusionstudiosinc.com
Tags: Blank, HTML5, CSS3

License: MIT
License URI: http://opensource.org/licenses/mit-license.php
*/

/* GENERAL STYLES BEGIN*/

/*begin ::root set all css variables here. !importants dont work here*/

:root{

/*global variables begin*/
	--primaryColor: #3780b1; /*blue*/
    --secondaryColor: black; 
/*global variables end*/

/* begin set all desktop menu variables here (those that aren't here are in wp admin style template)*/
--desktopMainMenuItemTextHoverColor: #3780b1; /*blue*/
/*--desktopAllSubMenuTextTransform: capitalize;*/
--desktopAllSubMenuItemFontSize: 16px;
--desktopHighLightCurentPageMenuTextAria: gray;
--desktopBorderAllAroundSubMenu: none; /*override wp default*/
--desktopBorderBottomSubMenu: 1px solid gray;
--desktopSubMenuPadding: 10px 20px;
--desktopSubMenuHoverBackgroundColor: #ba8748; /*light brown*/
--desktopSubMenuHoverTextColor: inherit;
/* begin set all desktop menu variables here (those that aren't here are in wp admin style template)*/
	
/* begin set all mobile menu variables here*/
--mobileColorOfHamburger: #3780b1; /*blue*/
--mobileSizeOfHamburger: 50px;
--mobileSizeOfXClose: 24px;
--mobileMenuCloseXpositionTop: 10px;
--mobileMenuCloseXpositionRight: 10px;
--mobileMenuCloseXColor: white;
--mobileMenuCloseXPaddingTop: 15px;
--mobileMenuOpenBackground: black;
--mobileMenuOpenALLsubmenusTextTransform: lowercase;
--mobileMenuOpenALLsubmenusBorderColor: gray;
--mobileMenuOpenALLsubmenusBorderSize: 1px;
--mobileMenuOpenALLsubmenusPadding: 16px 0px 16px 10px;
--mobileMenuOpenALLsubmenusLinkColor: white;
--mobileMenuOpenHighLightCurentPageMenuItemTextAria: gray;
--mobileMenuOpenColorOfSubMenuArrowDownIcon: white;
--mobileMenuOpenBackgroundColorOfFirstLevelSubs: #0b6cbd;
--mobileMenuOpenBackgroundColorOfSecondLevelSubs: #59a2cf;
--mobileMenuOpenBorderBottomColorOfFirstLevelSubs: 1px solid white;
--mobileMenuOpenBorderBottomColorOfSecondLevelSubs: 1px solid white;
    
/* end set all mobile menu variables here*/
	
interpolate-size: allow-keywords; /*allows us to animate height: auto to add transitions on WP details block. This is a progressive enhancement for newest browsers, but details block will still work in old browsers, just without smooth accordion transitions*/
     
} /*end ::root set all css variables here. DON'T DELETE THAT CURLY BRACKET*/

/*ADD PAGE TRANSITIONS BEGINS*/

@view-transition {
	/*this rule is correct depite phoenix marking it as unknown. It is too new for it to know it*/
  navigation: auto;
	/*declare that we want page transitions*/
}

::view-transition-group(root) {
	/*set the duration for the page transition (default is too short)*/
	animation-duration: 1.5s;
}
::view-transition-old(root){
	animation-name: slide-out;
	/*what to do with the "old" (current) page on transtion to new page*/
}
::view-transition(root){
	/*what to do with the "new" page we navigate to. See Kevin Powell https://www.youtube.com/watch?v=quvE1uu1f_I for tutorial*/
	animation-name: slide-in;
}

@keyframes slide-in{
	from{
		translate: 100vw;
		}
}

@keyframes slide-out{
	to{
		translate: -100vw;
	}
}

.header{
	view-transition-name: header;
	/*remove header from view transtion by just giving it another name so it's not included in root transition, but can give this its own animation if desired*/
}

/*ADD PAGE TRANSITIONS ENDS*/

*{
    word-wrap: normal;
    word-break: keep-all;
    /*prevent wordpress from breaking words*/
	box-sizing: border-box;
}
html{
    overflow-x: clip; /*use "clip" not "hidden" so any elements with "position: sticky" work */
    scroll-behavior: smooth;
    scroll-padding-top: 54px; 
	scrollbar-gutter: stable; /*prevent layout changes if scrollbars aren't present*/
}
body{
	overflow-x: clip; /*use "clip" not "hidden" so any elements with "position: sticky" work */
}
a{
	/*don't use wp style template links (global) to set links, its too confusing*/
	color: var(--primaryColor);
	transition: all .4s;
	text-decoration: none;
}
a:focus, audio {
    outline: 0;
}
a:hover, a:active {
    outline: 0;
}
a:active{
	color: inhert;
}
a.wp-block-button__link.wp-element-button, a.wp-block-read-more{
	/*WP styles template ofers no hover styles for buttons. We create transition here. We also make blog read more block look the same*/
	transition: background .4s, opacity .4s;
	 white-space: nowrap;
}
a.wp-block-button__link.wp-element-button:hover, a.wp-block-read-more:hover{
	/*WP styles template ofers no hover styles for buttons. We create transition here. We also make blog read more block look the same*/
	opacity: .75;
}
hr {
    box-sizing: content-box; 
    height: 0; 
    overflow: visible;
}
iframe, object, embed {
    max-width: 100%;
}
img{
    max-width: 100%;
    height: auto;
}

h1, h2, h3{
	text-wrap: balance;
}

@media (max-width: 1023px){
	h2{
		font-size: 25px !important;
	}
}

p:empty{
    display: none;
    /*prevents empty paragraph tags WordPress sometimes puts in from screwing up layout.  We used to do this with jquery inscripts, but caused problems with Google captcha*/
}
.fixedWidth {
    max-width: 1200px;
    margin: 0 auto;
}
.paddingSides{
    padding-left: 5%; /*don't use short forms here*/
    padding-right: 5%;
 }
.paddingTopBottom{
    padding-top: 50px; /*don't use short forms here*/
    padding-bottom: 50px;
}
.noPaddingTop{
    padding-top: 0;
}
.noPaddingBottom{
    padding-bottom: 0;
}

/*WORDPRESS CORE/OVERRIDE STYLES BEGIN*/

.wp-block-template-part{
	margin: 0 !important;
}
.entry-content{
	margin-top: 0 !important;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
	background: transparent !important;
	/*don't have white background going over website when mobile menu open*/
}

@media (max-width: 750px){
    /*remove float and center all left and right aligned images at 750px for both classic and gutenberg editor.  If you are having float "issues", put the image and paragraph into a group and add "display: flow-root" to the new group and you won't need to clear floats to have a proper layout. Adjust as needed*/
    .alignleft, .wp-block-image .alignleft, .alignright, .wp-block-image .alignright {
        float: none !important;
        display: block !important;
        height: auto;
        margin: 20px auto;
        margin-inline-end: 0 !important;/*override wordpress style*/
        margin-inline-start: 0 !important;/*override wordpress style*/
        text-align: center;/* center image on screen when in mobile*/
    }
}

@media (max-width: 1023px){
    /*override wordpress default breakpoint (600px) for image & media block. Adjust as needed*/
    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 100%!important;
    }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 2;
    }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 1;
    }
}

/*How to override the default wordpress gutenberg break point for columns (two) when they are set to stack on mobile at 1023px and less (gutenberg default is 780px, which is often too small). Put a class like "overrideWordPressBreakpoint1023pixels" on the outermost "ColumnS" wrapper gutenberg block (under the "advanced tab," where classes can go). Then add this to css:*/

@media (max-width: 1023px){
	.overrideWordPressBreakpoint1023pixels.wp-block-columns{
		flex-wrap: wrap!important;
	}
	.overrideWordPressBreakpoint1023pixels .wp-block-column{
		flex-basis: 100% !important;
	}
	.overrideWordPressBreakpoint1023pixels img{
		width: 100%;
		/*if you have an image you want to insure is 100% of the width of the container*/
	}
}

/* OR, if you have say, four columns across and need them to go down to two columns at a certain point, then incljude the following in your css and put the class "goDownToTwoColumnsAt1024" [or whatever your break point is] on the parent columns element in WordPress admin: (Note that the columnms will still go down to one column at the default Gutenberg break point of 780px*/

@media (max-width: 1024px){
	.goDownToTwoColumnsAt1024.wp-block-columns{
		flex-wrap: wrap !important;
	}
	.goDownToTwoColumnsAt1024 .wp-block-column{
		flex-basis: 48% !important
	}
	.goDownToTwoColumnsAt1024 .wp-block-column img{
		width: 100%;
	}
}

/*overide break point for GRID in QUERY BLOCK. Put class "goDownToTwoColumnsAt1024" on "Post Template" block in Query. Note that WP grid ONLY goes down to one column by default at 600px*/

@media (max-width: 1024px) and (min-width: 768px) {
	/*go down from 3 col to 2 columns*/
	.wp-block-post-template.is-layout-grid.goDownToTwoColumnsAt1024{
	    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) and (min-width: 601px){
	/*go down to one column a bit sooner*/
	.wp-block-post-template.is-layout-grid.goDownToTwoColumnsAt1024{
	    grid-template-columns: 1fr !important;
	}
}

/*FOR QUERY BLOCK: make TITLE INTO BUTTON (for when you don't want a button to just say "read more", but read more [post title] for SEO [purposes]). In Query block use "Title" instead of Read More, and be sure to check "title is a link" in WP admin. Put class "makeTitleIntoButton" on the Title block. Add all styles EXCEPT padding and width to the Title block in the page editor. Then these styles below turn the Title into a Button (adjust as needed):*/

.makeTitleIntoButton a{
	/*make title (that inlcudes link) into a button so we don't have to use "read more". all other styles are on the Title block in WP admin for page, but following 2 styles must be here*/
	padding: 14px;
	width: 100%;
}
.makeTitleIntoButton a:hover{
	background: var(--primaryColor);
    color: white !important;
}
.makeTitleIntoButton a:before{
	content: 'More on '; /*adjust as needed*/
}

/*WORDPRESS CORE/OVERRIDE > begin make gutenberg insert youtube video truly responsive styles begin*/

/*WORDPRESS CORE/OVERRIDE > begin make gutenberg insert youtube video truly responsive styles begin*/

figure.is-type-video.is-provider-youtube .wp-block-embed__wrapper{
    position: relative;
    padding-bottom: calc(var(--aspect-ratio, 0.5625) * 100%);
    height: 0;
    width: 100%;
    /*we can now pass any custom aspect ratio and it will be calculated and converted to the correct percentage. If no aspect ratio is provided it will fall back to our standard 16x9 aspect ratio.*/
}
figure.is-type-video.is-provider-youtube .wp-block-embed__wrapper iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*WORDPRESS CORE/OVERRIDE > end make gutenberg insert youtube video truly responsive styles end*/

/*WORDPRESS CORE/OVERRIDE > fix and add transition to details/summary block so accordion is fluid begin needs "interpolate-size: allow-keywords" on :root, html or body to work (i.e. transition height auto).*/

.wp-block-details summary{
	list-style-position: inside; /*also ensure padding-left on parent container is a pixel, not percentage value*/
	background: var(--primaryColor);
	padding: 10px;
}
details::details-content{
	/* don't add margin/padding to this, add it to the actual stuff inside the details content. Also do not use prefix a class to selector (like .wp-block-details)  as shadow root will prevent it from working*/
  height: 0;
  transition: height 1s, content-visibility 1s; /*browser toggles content visibility without transition automatically, we add trans here*/
  transition-behavior: allow-discrete; /*allows transition of usually not transitionable things like height auto (or display)*/
	overflow: hidden;
}
details[open]::details-content {
  height: auto;
}

/*make details arrow have a nice smooth transition*/

/* must first remove the deafault ::marker wordpress uses as this does not accept many styles */
.wp-block-details summary {
    list-style: none; /* For modern browsers */
}
.wp-block-details summary::-webkit-details-marker {
    display: none; /* For older WebKit browsers */
}

/* create a new custom arrow using ::before */
.wp-block-details summary::before {
    content: "▶"; /* Or use an SVG icon */
    display: inline-block;
    margin-right: 10px;
    /* set the smooth transition (0.3 seconds) */
    transition: transform 0.4s ease-in-out;
    transform: rotate(0deg);
	/* to create a round background behind icon add:
    background: #F8A80C;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center; */
}

/* Rotate the arrow 90 degrees when the block is open */
.wp-block-details[open] summary::before {
    transform: rotate(90deg);
}

/*WORDPRESS CORE/OVERRIDE > fix and add transition to details/summary block so accordion is fluid end*/

/*WORDPRESS CORE/OVERIDE STYLES END*/

/* FLEXBOX PARENT ELEMENT STYLES BEGIN only used in full site editing inside a html block, kept these style just in case to make things easier*/

.displayFlex {
    display: flex;
}
.flexDirectionColumn {
    flex-direction: column;
}
.justifyContentCenter{
    justify-content: center;
}
.justifyContentSpaceBetween{
    justify-content: space-between;
}
.justifyContentSpaceAround{
    justify-content: space-around;
}
.justifyContentFlexEnd {
    justify-content: flex-end;
}
.alignItemsCenter {
    align-items: center;
}
.alignItemsFlexEnd{
    align-items: flex-end;
}
.alignItemsStretch {
    align-items: stretch;
}
.flexWrapWrap {
    flex-wrap: wrap;
}

/* FLEXBOX PARENT ELEMENT STYLES END*/

/*GENERAL > form styles begin*/

form{
    max-width: 700px;
    padding: 10px;
    background: gray;
    color: white; /*to apply color to success/error messages*/
}
label {
    color: #757575;
    padding: 0 0 15px 0;
    text-transform: uppercase;
}
input[type="text"], input[type="email"], textarea{
    width: 100%;
    padding: 10px;
}
input[type="file"]{
    color: #757575;
    padding: 10px 0 10px 0;
}
input:focus{
	border: 1px solid black;
	outline: none;
}
textarea{
    padding: 10px 0 0 10px;
    font-family: inherit;
}
textarea:focus{
	border: 1px solid black;
	outline: none;
}
input[type="submit"]{
    background: #be8035;
    padding: 14px 0 10px 0;
    border: none;
    color: white;
    display: block;
    font-size: 20px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: .4s background;
    width: 100%;
    margin: auto;
}
input[type="submit"]:hover{
    background: grey;
    transition: .4s background;
}

/*GENERAL > form styles end*/


/* GENERAL STYLES END*/

/*HEADER > styles begin*/
.header{
	position: sticky;
	top: 0;
	z-index: 999;
}
.header.scrolled{
    z-index: 999999; 
    border-bottom: 1px solid grey;
}
.header figure.logo img{
	width: 275px;
	transition: .5s width;
}
.header.scrolled figure.logo img{
	width: 140px;
	transition: .5s width;
}

/*HEADER > styles end*/

/*NAVIGATION STYLES BEGIN*/
.header{
	box-shadow: rgba(0, 0, 0, 0.22) 0px 0px 1px 0px;
}

.header nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  li.wp-block-navigation-item .dontShowForMobileMenu.wp-block-site-logo img{
	/*[only used when desktop logo is centered in menu] set up transition for logo in desktop menu. Note that non-scrolled width of menu centered desktop logo is applied in navigaion template style settings for "site logo"*/
	transition: .5s width;
}
.header.scrolled  nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  li.wp-block-navigation-item .dontShowForMobileMenu.wp-block-site-logo img{
	/*[only used when desktop logo centered in menu] make logo smaller on scroll*/
	width: 100px;
}

/*NAVIGATION STYLES > desktop PARENT menu nav styles (when screen is 1024px or GREATER) BEGIN*/

@media (min-width: 1024px){
	
	.dontDisplayHomeOnDestop{
		display: none !important;
	}
	.header .mobileLogoContainer {
       /*[only used when logo is centered in menu for desktop, seem theme instructions] don't show mobile logo for desktops*/
        display: none;
    }
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container  li.wp-block-navigation-item::before{
	/*set up add line over menu items on hover desktop part 1*/
		position: absolute;
		top: -10px;
		content: '';
		left: 50%;
		translate: -50% 0;
		width: 100%;
		height: 2px;
		background: var(--primaryColor);
		scale: 0;
		transform-origin: right;
		transition: scale 250ms ease-in;
	}
    nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container >  li.wp-block-navigation-item:hover::before{
        /*set up add line over menu items on hover desktop part 2*/
        scale: 1;
        transform-origin: left;
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container >  li.wp-block-navigation-item > a.wp-block-navigation-item__content:hover{
		/*set hover color on main menu items only*/
		color: var(--desktopMainMenuItemTextHoverColor);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  li.wp-block-navigation-item a[aria-current].wp-block-navigation-item__content{
		/*set color of currently highlighted desktop (only) menu item*/
		color: var(--desktopHighLightCurentPageMenuTextAria) !important;
	}
	
/*NAVIGATION STYLES > desktop PARENT menu nav styles (when screen is 1024px or GREATER) END*/
	
/* NAVIGATION STYLES > desktop SUBMENU styles BEGIN (when screen is 1024px side or GREATER)*/
	
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  li.wp-block-navigation-item ul.wp-block-navigation__submenu-container{
		/*override wp default of putting a border all around submenu for desktop*/
		border: var(--desktopBorderAllAroundSubMenu);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item{
		/*put border on ALL subs as there seems to be no place in wp admin to do this*/
		border-bottom: var(--desktopBorderBottomSubMenu);
		transition: all .5s; /*for hover effects on menu sub list items*/
	}
	
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item:hover{
	/*hover background for ALL subs also set on the a tag*/
		background: var(--desktopSubMenuHoverBackgroundColor);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item a.wp-block-navigation-item__content{
		/*put padding on ALL sub-menu items as there doesn't seem to be anywhere to do this in wp admin*/
		padding: var(--desktopSubMenuPadding);
		text-transform: var(--desktopAllSubMenuTextTransform);
		font-size: var(--desktopAllSubMenuItemFontSize);
		transition: .4s all;
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item a.wp-block-navigation-item__content:hover{
		/*hover background for ALL subs also set on the li tag*/
		background: var(--desktopSubMenuHoverBackgroundColor);
		color: var(--desktopSubMenuHoverTextColor);
	}
	
/*NAVIGATION STYLES > desktop SUBMENU styles BEGIN (when screen is 1024px side or GREATER) > Submenu Open/Close Transition styles BEGIN */

.wp-block-navigation .wp-block-navigation__submenu-container {
	/* Target the submenu container */
    transition: all 0.3s ease-in-out !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px);
    display: block !important;/* Required for transition to work */
}
.wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container {
	/* On hover, show the submenu with transition */
    opacity: 1 !important ;
    visibility: visible !important;
    transform: translateY(0);
}
.wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon svg {
	/*Submenu arrow rotation - target the SVG icon within the submenu toggle */
    transition: transform 0.3s ease-in-out;
}
.wp-block-navigation-submenu:hover > .wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon svg {
	/*Submenu arrow rotation - rotate the arrow 180deg when the submenu is opened/hovered */
    transform: rotate(180deg);
}
	
/*NAVIGATION STYLES > desktop SUBMENU styles BEGIN (when screen is 1024px side or GREATER) > Submenu Open/Close Transition styles BEGIN */
	
/* NAVIGATION STYLES > desktop SUBMENU styles END (when screen is 1024px side or greater)*/
	
} /*DON'T DELETE THIS CURLY BRACKET: IT ENDS THE 1024PX AND GREATER MEDIA QUERY!*/

/* NAVIGATION STYLES > override wordpress breakpoints for when mobile and desktop menus appear and disappear (when screen is 1023px wide or LESS) begin*/

@media (max-width: 1023px) {
	/*By default the wordpress mobile hamburger begins to display at 600px or less, we force it to display at anything above 1023px. By default the desktop menu continues to display down to 600px, we force it not to display below 1023px instead. Change as reequred. Weird you can't set this in admin, BUT DO ENSURE MOBILE MENU IS SET TO DISPLAY FOR MOBILE IN HEADER NAVIGATION SETTINGS*/
    nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex; 
    }
	nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
		display: none;
	}
 }

/* NAVIGATION STYLES > override wordpress breakpoints for when mobile and desktop menus appear and disappear (when screen is 1023px wide or LESS) end*/

/*NAVIGATION STYLES > mobile menu styles begin*/

@media (max-width: 1023px){
	nav.wp-block-navigation{
		/*override wp desktop alignment for hamburger*/
		justify-content: flex-end !important;
	}
	nav.wp-block-navigation button.wp-block-navigation__responsive-container-open{
		/*set opacity and rotate hamburger so it comes back to this after being faded out and rotated when open*/
		opacity: 1;
		rotate: 0deg;
		transition: .7s opacity, .7s rotate;
		color: var(--mobileColorOfHamburger); /*sets color of hamburger, overides text color color set in wp admin*/
	}
	nav.wp-block-navigation button.wp-block-navigation__responsive-container-open.fadeOutHamburger{
		/*"fadeOutHamburger" class added in scripts/js*/
		opacity: 0;
		rotate: 760deg;
	}
	.wp-block-navigation__responsive-container{
		/*when hamburger is not yet clicked, OR if "X" close mobile menu is clicked, transtion the "scale" property of moible menu container to 0 (so it disappears)*/
		display: flex !important; /*transition won't work without this as WP changes the display propery on menu open*/
		position: fixed !important;/*keep menu at very top of window, but don't expand header*/
		scale: 0;
		/*do not use transform: scale(x,y) above as it conflicts and does not work*/
		transform-origin: top left;
		transition: scale .4s ease-in-out;
	}
	.wp-block-navigation__responsive-container.is-menu-open{
		/*when hamburger is clicked (WP adds ""is-menu-open" class), transition the "scale" property of mobile menu container to its full size so mobile menu appears */
		scale: 1;
		/*do not use transform: scale(x,y) above as it conflicts and does not work*/
	}
	nav.wp-block-navigation button.wp-block-navigation__responsive-container-open > svg{
		/*size of hamburger*/
		height: var(--mobileSizeOfHamburger);
		width: var(--mobileSizeOfHamburger);
	}
	nav.wp-block-navigation button.wp-block-navigation__responsive-container-close > svg{
		/*size of "X" to close mobile memu*/
		height: var(--mobileSizeOfXClose);
		width: var(--mobileSizeOfXClose);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container button.wp-block-navigation__responsive-container-close{
		/*position "X" for mobile menu close, color of "X*/
		right: var(--mobileMenuCloseXpositionTop);
		top: var(--mobileMenuCloseXpositionRight);
		color: var(--mobileMenuCloseXColor);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content {
		/*put padding on top of mobile menu so "X" has breathing room/, set background color for mobile menu when expanded*/
		padding-top: var(--mobileMenuCloseXPaddingTop);
		background: var(--mobileMenuOpenBackground);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container{
		/*must set width on mobile menu ul wrapper, remove default wp gap*/
	    width: 100%;
		gap: 0 !important;
	}	
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item {
		/*make ALL mobile menu items go all the way across the parent for mobile, add other styles for ALL menu items*/
		width: 100%;
		border-bottom: var(--mobileMenuOpenALLsubmenusBorderBottom);
		align-items: flex-start;/*unsure why we need this to keep all menu items to left*/
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item a.wp-block-navigation-item__content {
		/*set styles for ALL menu items (set on a tag)*/
		padding: var(--mobileMenuOpenALLsubmenusPadding);
        border-bottom-width: var(--mobileMenuOpenALLsubmenusBorderSize);
        border-bottom-color: var(--mobileMenuOpenALLsubmenusBorderColor);
        border-bottom-style: solid; 
		color: var(--mobileMenuOpenALLsubmenusLinkColor);
		display: block;
		width: 100%;
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item:has(.dontShowForMobileMenu){
		/*[ this code only used if you have a logo in main menu (see theme instructions] don't show desktop logo in mbobile menu. We cannot put a class on the list item (which has padding) in wp admin, so empty list item still shows. So, we use has to see what item has "dontShowFor MobileMenu" and then target it's parent to display none.*/
    display: none;
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item a[aria-current].wp-block-navigation-item__content{
		/*set color of currently highlighted mobile menu item for ALL menu levels*/
		color: var(--mobileMenuOpenHighLightCurentPageMenuItemTextAria);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item button.wp-block-navigation__submenu-icon {
		/*control position and size of ALL sub menu icon arrows for mobile, must be display block important*/
		position: absolute;
		right: 0;
        font-size: 60px;
		display: block !important;
		z-index: 99999999;
		border-left-width: var(--mobileMenuOpenALLsubmenusBorderSize);
		border-left-color: var(--mobileMenuOpenALLsubmenusBorderColor);
		border-left-style: solid; 
        padding-left: 10px;
		padding-right: 49px;
        height: 55px;
    }
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item button.wp-block-navigation__submenu-icon svg{
		/*styles for ALL mobile svg down arrows, WordPress provides a default transform: rotate, all we need to do is give it a transition (and an optional stroke color)*/
		stroke: var(--mobileMenuOpenColorOfSubMenuArrowDownIcon);
		transition: .4s transform;
		margin-top: 0;
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container{
		/*make mobile sub menu items accordian show/hide on click on their parent (wordpress does not do this by default--all sub menus are open). "Display: none" css toggled on/off by javascript. Also must set width of subs to 100%. Also remove default padding wordpress puts on mobile submenu menu li items as it screws up the mobile layout: we put padding on the a tag instead*/
		display: none;
		width: 100% !important;
		padding: 0 !important
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item{
		/*set styles on ONLY first level subs list item here*/
		background-color: var(--mobileMenuOpenBackgroundColorOfFirstLevelSubs) !important; /*must be important here, not in variable definition*/
		border-bottom: var(--mobileMenuOpenBorderBottomColorOfFirstLevelSubs) !important;
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item a.wp-block-navigation-item__content{
		/*set styles on ONLY first level subs a tag here*/
		padding-left: 20px !important;
		text-transform: var(--mobileMenuOpenALLsubmenusTextTransform);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item{
		/*set styles on ONLY second level subs here*/
		background-color: var(--mobileMenuOpenBackgroundColorOfSecondLevelSubs) !important; /*must be important here, not in variable definition*/
		border-bottom: var(--mobileMenuOpenBorderBottomColorOfSecondLevelSubs) !important;
	}
 nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item ul.wp-block-navigation__submenu-container li.wp-block-navigation-item a.wp-block-navigation-item__content{
		/*pad mobile subs of subs text*/
		padding-left: 30px !important; 
		text-transform: var(--mobileMenuOpenALLsubmenusTextTransform);
	}
}

/*NAVIGATION STYLES > mobile menu styles end*/

/*HOMEPAGE STYLES BEGIN*/

@media (max-width: 1023px){
	.correctHeightForMobile img {
		position: relative !important;
		padding-bottom: 30px;
	}
}

@media (max-width: 1300px){
	h2.specialh2{
		font-size: 25px;
	}
}

.marginTopAuto{
	margin-top: auto !important;
}

@media (max-width: 780px){
	.paddingForMobile{
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* HOMEPAGE STYLES END*/


/*FOOTER STYLES BEGIN*/

@media ( max-width: 780px){
	.footerColumn{
		justify-content: center !important;
	}
	.footerColumn p{
		text-align: center !important;
	}
}

@media (max-width:780px){
	.noPaddingLeftForMobile{
		padding-left: 0 !important;
	}
}

.footer .wp-block-social-links svg{
	fill: inherit;
	transition: .4s fill;
}
.footer .wp-block-social-links svg:hover{
	fill: var(--primaryColor) !important;
}

/*FOOTER STYLES END*/