/*
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: #5aae4d; /*green*/
    --secondaryColor:  #5aae4d; /*green*/
/*global variables end*/

/* begin set all desktop menu variables here (those that aren't here are in wp admin style template)*/
--desktopMainMenuItemTextHoverColor: #2a3485; /*dark purple*/
--desktopAllSubMenuTextTransform: capitalize;
--desktopParentMenuItemFontSize: 19px;
--desktopAllSubMenuItemFontSize: 16px;
--desktopHighLightCurentPageMenuTextAria: gray;
--desktopBorderAllAroundSubMenu: none; /*override wp default*/
--desktopBorderBottomSubMenu: 1px solid gray;
--desktopSubMenuPadding: 10px 20px;
--desktopSubMenuHoverBackgroundColor: #0b6cbd;
--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: white; /*dark blue*/
--mobileSizeOfHamburger: 50px;
--mobileSizeOfXClose: 24px;
--mobileMenuOpenOffsetSoHeaderLogoShowsAboveMobileMenu: 188px;
--mobileMenuCloseXpositionTop: 10px;
--mobileMenuCloseXpositionRight: 10px;
--mobileMenuCloseXColor: white;
--mobileMenuCloseXPaddingTop: 15px;
--mobileMenuOpenBackground: #102341; /*dark blue*/
--mobileMenuOpenALLsubmenusTextTransform: lowercase;
--mobileMenuOpenALLsubmenusBorderBottom: 1px solid gray;
--mobileMenuOpenALLsubmenusPadding: 16px 0px 16px 10px;
--mobileMenuOpenALLsubmenusLinkColor: white;
--mobileMenuOpenHighLightCurentPageMenuItemTextAria: gray;
--mobileMenuOpenPositionTopOfSubMenuArrowDownIcon: 16px; /*adjust as padding on a tag varies*/
--mobileMenuOpenPositionRightOfSubMenuArrowDownIcon: 10px;
--mobileMenuOpenFontSizeOfSubMenuArrowDownIcon: 30px;
--mobileMenuOpenColorOfSubMenuArrowDownIcon: white;
--mobileMenuOpenBackgroundColorOfFirstLevelSubs: #0b6cbd;
--mobileMenuOpenBackgroundColorOfSecondLevelSubs: #59a2cf;
--mobileMenuOpenBorderBottomColorOfFirstLevelSubs: 1px solid white;
--mobileMenuOpenBorderBottomColorOfSecondLevelSubs: 1px solid white;
    
/* end set all mobile menu variables here*/
     
}
/*end ::root set all css variables here*/

/*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;*/
	/*UNCOMMENT ABOVE LINE TO REMOVE HEADER FROM PAGE TRANSITIONS 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; 
}
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:hover{
    color: var(--secondaryColor);
}
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;
}
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*/
	background: var(--primaryColor);
}
hr {
    box-sizing: content-box; 
    height: 0; 
    overflow: visible;
}
iframe, object, embed {
    max-width: 100%;
}
img{
    max-width: 100%;
    height: auto;
}
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*/
}
sup{
	font-size: 60%;
}
.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*/

:where(.wp-site-blocks) > *{
	/*override WordPress inserting margins where we don't want them*/
	margin-block-start: 0 !important;
}
:root :where(.is-layout-flow) > *{
	/*stop wp from adding margins all over the place*/
	margin: 0;
}

@media (max-width: 781px){
    /*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 for sure) when they are set to stack on mobile at 1023px and less (gutenbery 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 natural Gutenberg break point of if think 781px*/

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

/*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/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;
}
.scoopableCatLitter{
	font-size: inherit;
	font-weight: bold;
	transition: .4s font-size, .4s font-weight;
}
.header.scrolled .scoopableCatLitter{
	font-size: 13px;
	font-weight: normal !important;
}
.header figure.logo img{
	width: 341px;
	transition: .5s width;
}
.header.scrolled figure.logo img{
	width: 100px;
	transition: .5s width;
}
.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;
}
.header.scrolled .forTranslation{
	display: none;
}

/*HEADER > styles end*/

/*NAVIGATION STYLES BEGIN*/

/*NAVIGATION STYLES > parent desktop menu (only) nav styles begin*/

@media (min-width: 1024px){
	/*NAVIGATION STYLES > desktop default wordpress mobile menu breakpoint override styles so mobile menu only appears below 1023px and desktop menu only appears above 1023px begin*/
	
	/*despite being set to "mobile only" in each template (such as index etc), the mobile hamburger seems only to have its visibility set to "hidden"--meaning you can't see it but the mouse can still find it's link. So, we must set the mobile hamburder to display none when it is NOT set to be shown at all screen sizes in the wp-admin nav block admin*/
   nav.wp-block-navigation button.wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
    nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		/* I guess because it thinks the mobile menu is always displayed (despite being set to display mobile only) the desktop menu does NOT display. So we force the desktop menu to display above 1023px unless its hiden by deafult in templates. This is weird.*/
      display: block !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;
    }
    .header .dontDisplayHomeForDesktop{
        /*[we must have "home" in mobile menu, but often not in desktop. This is only applied when "dontDisplayHomeForDesktop" class is applied to "Home" menu item in the HEADER template]*/
        display: none;
    }
	
	/*NAVIGATION STYLES > deisktop default wordpress mobile menu breakpoint override styles so mobile menu only appears below 1023px  and desktop menu only appears above 1023px end*/
	
	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{
		/*set font size on ALL menu items*/
		font-size: var(--desktopParentMenuItemFontSize);
	}
    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 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.dontShowForDestopMenu{
		/*don't show home menu item logo in desktop menu (we DO need it in mobile.*/
    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 ul.wp-block-navigation__submenu-container li.wp-block-navigation-item::before{
		/*don't do above parent menu items hover effect on ALL sub menus*/
		content: unset;
		position: unset;
	}
	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);
	}
	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;
	}
}

@media (min-width: 600px) {
	/*By default the wordpress mobile hamburger only begins to display at 600px or less, but we want it to display at anything below 1023px, so we force the mobile hamburger to display at anything over 600px, but then  force it NOT to display at over 1023px (see above), when want only the desktop menu to display. Again weird you can't set this in adim*/
    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) {
		/*By default the desktop menu displays all the way down to 600px. But we want only the hamburger menu to display below 1023px, so we force the desktop menu not to display above 600px and then (see above) force it to display when screen is above 1023 px. Weird that there is no way to control this in the admin.*/
      display: none;
    }
}

@media (min-width: 782px) {
	/*overide Wordpress rotating the menu open arrow icon only for subs of subs (very strange it does this!)*/
	   .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{
	transform: none !important
	}
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		/*overide wp default styles that puts subs of subs 1px down from their parent at 782 and higher only*/
       top: 0;
	}
}

/*NAVIGATION STYLES > parent desktop menu (only) nav styles 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 on open mobile menu button 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 add in scripts/js*/
		opacity: 0;
		rotate: 760deg;
	}
	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 hamburger*/
		height: var(--mobileSizeOfXClose);
		width: var(--mobileSizeOfXClose);
	}
	nav.wp-block-navigation .wp-block-navigation__responsive-container{
		/*set margin on top of mobile menu so site logo shows through at top--ADJUST AS PER LOGO SIZE*/
		margin-top: var(--mobileMenuOpenOffsetSoHeaderLogoShowsAboveMobileMenu);
		background: transparent !important;
	}
	@media (max-width: 760px){
		nav.wp-block-navigation .wp-block-navigation__responsive-container{
			/*try to reset margin top on mobile menu open so header logo shows without being cut off mobile menu as far as possible, especially when a pre header area gets taller as screen is smaller*/
			margin-top: 231px
		}
	}
	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);
		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;
		top: var(--mobileMenuOpenPositionTopOfSubMenuArrowDownIcon);
        right: var(--mobileMenuOpenPositionRightOfSubMenuArrowDownIcon);
        font-size: var(--mobileMenuOpenFontSizeOfSubMenuArrowDownIcon);
		display: block !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 button.wp-block-navigation__submenu-icon svg{
		/*styles for ALL mobile svg down arrows, including rotate 0deg so svg arrow icon goes back to closed state*/
		stroke: var(--mobileMenuOpenColorOfSubMenuArrowDownIcon);
		rotate: 0deg !important;
		transition: .4s rotate;
	}
	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.subMenuIconAnimate > svg {
		/*rotate ALL svg arrow icons 180deg on click, ".subMenuIconAnimate" class added by js in scripts file*/
		rotate: -180deg !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{
		/*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 override default wordpress styles so it looks good end*/

/*HOMEPAGE STYELS BEGIN*/

.home .pageTitleDontShowOnHome{
	display: none;
}

@media (max-width: 1200px){
.heroVariableFontSize{
	font-size: calc(10px + 1vw) !important;
}
}

.customBoxShadow{
	box-shadow: 4px 5px 20px 6px white;
}

@media (min-width: 1025px) and (max-width: 1181px){
	.page-template-wp-custom-template-homepage-french .goDownToTwoColumnsAt1024 h2{
		font-size: 20px!important;
	}
}

@media (max-width: 350px){
	.page-template-wp-custom-template-homepage-french .goDownToTwoColumnsAt1024 h2{
		font-size: 20px!important;
	}
}

/*HOMEPAGE STYLES END*/

/*INSIDE PAGES STYLES BEGIN*/

/*INSIDE PAGES STYLES END*/

/*FOOTER STYLES BEGIN*/

.footer a{
	color: whitesmoke;
	font-weight: normal;
}
.footer a:hover{
	color: var(--secondaryColor);
}
.footer .footerLogo{
	max-width: 200px;
}
.footer .copywrite{
	font-size: 12px;
	color: white;
	text-align: center;
}

@media (max-width: 781px){
	.wp-block-column.footerFirstColumn{
		text-align: center;
	}
}

/*FOOTER STYLES END*/