/* or local google fonts (so no google cookies)
   goto https://gwfh.mranftl.com/fonts/lato?subsets=latin to get woff2 & ttf files choose [legacy browsers] - add to fonts folder in theme */
/* lato-100 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: url('/wp-content/themes/source4b/fonts/lato-v25-latin-100.woff2') format('woff2'), 
       url('/wp-content/themes/source4b/fonts/lato-v25-latin-100.ttf') format('truetype'); 
}
/* lato-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('/wp-content/themes/source4b/fonts/lato-v25-latin-300.woff2') format('woff2'), 
       url('/wp-content/themes/source4b/fonts/lato-v25-latin-300.ttf') format('truetype'); 
}
/* lato-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/source4b/fonts/lato-v25-latin-regular.woff2') format('woff2'), 
       url('/wp-content/themes/source4b/fonts/lato-v25-latin-regular.ttf') format('truetype'); 
}
/* lato-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/source4b/fonts/lato-v25-latin-700.woff2') format('woff2'),
       url('/wp-content/themes/source4b/fonts/lato-v25-latin-700.ttf') format('truetype'); 
}
/* lato-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('/wp-content/themes/source4b/fonts/lato-v25-latin-900.woff2') format('woff2'),
       url('/wp-content/themes/source4b/fonts/lato-v25-latin-900.ttf') format('truetype'); 
}


/*--------------------------------------------------------------
Above the fold CSS only, including:
 - headers
 - page layout containers
 - main fonts
--------------------------------------------------------------*/
:root {
	--brand-color-orange: #FFA700;   
    --brand-color-green: #12AE4D;  
    --brand-color-purple: #67246F;  
    --brand-color-lblue: #00B8F1;  
    --brand-color-mblue: #00A0D2;  
    --brand-color-dblue: #0257A0;  
    --brand-color-lgray: #F2F2F2;  
    --brand-color-dgray: #343434; 
    --brand-color-lbluegray: #406377;
    --brand-color-bluegray: #355365;
    --brand-color-dbluegray: #334957;
	--brand-color-pink: #CE0097;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  font-size: 56.3%; /* adjust global font size base */
  /*
  font-size:50.0% gives 1.0rem = 8px
  font-size:56.3% gives 1.0rem = 9px - better corolation with XD sizes
  font-size:62.5% gives 1.0rem = 10px - (62.5/100) * 16px = 10px
  */
};

body {margin: 0;background: #fff;}
#page{background:var(--brand-color-lgray);}
main {display: block;}

/* Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 {font-size: 2em;margin: 0.67em 0;}

/* Remove the gray background on active links in IE 10. */
a {background-color: transparent;}

/* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
button,input,optgroup,select,textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}
/* Show the overflow in IE. 1. Show the overflow in Edge. */
button,input {overflow: visible;}
/* Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button,select {	text-transform: none;}
/* Correct the inability to style clickable types in iOS and Safari. */
button,[type="button"],[type="reset"],[type="submit"] {	-webkit-appearance: button;}
/* Remove the inner border and padding in Firefox. */
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {	border-style: none;	padding: 0;}
/* Restore the focus styles unset by the previous rule. */
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
/* Correct the padding in Firefox. */
fieldset {padding: 0.35em 0.75em 0.625em;}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {box-sizing: border-box;	color: inherit;	display: table;	max-width: 100%;padding: 0;	white-space: normal;}
/* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress {vertical-align: baseline;}
/* Remove the default vertical scrollbar in IE 10+. */
textarea {overflow: auto;}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],[type="radio"] {box-sizing: border-box;padding: 0;}
/* Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto;}
/* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] {-webkit-appearance: textfield;	outline-offset: -2px;}
/* Remove the inner padding in Chrome and Safari on macOS.*/
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
/* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
/* Inherit box-sizing to more easily change it's value on a component level. */
*,*::before,*::after {box-sizing: inherit;}
html {box-sizing: border-box;}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #000;
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 1.88rem;
	line-height: 1.4;
}
h1,h2,h3,h4,h5,h6 {
	clear: both; margin:1.2rem 0;
	font-size: 4.0rem; 	line-height: 1.2; 
}
p,.wp-block-buttons {	/*margin-bottom: 1.5em;*/margin:1em 0;}
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,p:first-child,.wp-block-buttons:first-child {margin-top:0;}
p:last-child,.wp-block-buttons:last-child,ul:last-child {margin-bottom:0;}
ul,ol {
    margin: 0 0 1.5em 0;
	width: calc(100% - 2em);
}
ul {list-style: disc;}
ol {list-style: decimal;}
li > ul,li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}
img {height: auto;max-width: 100%;}
figure {margin: 0;}
body {margin: 0;}

/* Links
--------------------------------------------- */
a {
	color: var(--brand-color-bluegray);
	
}
a:hover,
a:focus,
a:active {
	color: var(--brand-color-green);
	
}
a:focus {outline: thin dotted;}
a:hover,a:active {outline: 0;}

.main-navigation li {position: relative;height: 65px; display: flex; align-items: center;}
.main-navigation a {/* display: block; */ display: flex;align-items: center;height: 100%;text-decoration: none;}
.main-navigation #primary-menu > li > a {white-space: nowrap}
.main-navigation a:hover, 
.main-navigation a:active, 
.main-navigation a:focus {color: red;}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {display: block;}
.menu-main-menu-container {/*position: absolute;right: 0;top: 85px*/}
.nav-button-bg {display: flex; align-items: center; gap: 30px; height: 45px; padding: 3px 30px 0 30px; border-radius: 150px;background-color: rgba(20,20,20,0.5);backdrop-filter: blur(10px);}
.menu-toggle {width:30px;height: 30px;border:none;background: transparent;position: relative;padding:0;border-radius: 0;z-index: 30;cursor:pointer;color: transparent;}
.menu-toggle span {position: absolute;top:1px;left:0;width:30px;height:2px;background: #fff;
	-webkit-transition: transform 0.5s ease;
	-moz-transition: transform 0.5s ease;
	-o-transition: transform 0.5s ease;
	transition: transform 0.5s ease;
}
.menu-toggle span.bar1 {transform-origin:top right;}
.menu-toggle span.bar2 {top:12px;background: #fff;left:auto;right:0;
	-webkit-transition: width 0.5s ease;
	-moz-transition: width 0.5s ease;
	-o-transition: width 0.5s ease;
	transition: width 0.5s ease;
}
.menu-toggle span.bar3 {top:23px;background: #fff;transform-origin:bottom right;}
.toggled .menu-toggle span.bar1 {transform: rotate(-45deg);}
.toggled .menu-toggle span.bar2 {width:0;}
.toggled .menu-toggle span.bar3 {transform: rotate(45deg);}
.sub-menu-blur {border:1px solid red;position: absolute;opacity: 1;}
.sub-menu-blur:hover {border:1px solid green;opacity:1;}

/* Large screen menu (set width as appropriate) */
@media screen and (min-width:992px ) { 

	.menu-toggle, .nav-button-bg {display: none;}

	.main-navigation ul,
	.main-navigation.toggled ul {
		display: flex; align-items: center; gap: 20px; height: 65px; padding: 0 ;
		/* background-color: rgba(20,20,20,0.5);backdrop-filter: blur(10px);isolation: isolate; */
	}

	.menu-main-menu-container {
		position: relative;
		right: 0;
		top: 0;
	}

}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.page-content,.entry-content,.entry-summary {margin:0;}
/* Make sure logo link wraps around logo image. */
.custom-logo-link {display: inline-block;margin-right:20px;}
/* Text meant only for screen readers. */
.screen-reader-text {border: 0;clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute !important;width: 1px;word-wrap: normal !important;}
.screen-reader-text:focus {background-color: #f1f1f1;border-radius: 3px;box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);clip: auto !important;clip-path: none;color: #21759b;display: block;font-size: 0.875rem;font-weight: 700;height: auto;left: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;z-index: 100000;}
#primary[tabindex="-1"]:focus {outline: 0;}

/* ================================================================================================================
   ______           __                  ________________
  / ____/_  _______/ /_____  ____ ___  / ____/ ___/ ___/
 / /   / / / / ___/ __/ __ \/ __ `__ \/ /    \__ \\__ \ 
/ /___/ /_/ (__  ) /_/ /_/ / / / / / / /___ ___/ /__/ / 
\____/\__,_/____/\__/\____/_/ /_/ /_/\____//____/____/  
                                                                                                        
-------------------------------------------------------------------------------------------------------------------
	--brand-color-orange: #FFA700;   
    --brand-color-green: #12AE4D;  
    --brand-color-purple: #67246F;  
    --brand-color-lblue: #00B8F1;  
    --brand-color-mblue: #00A0D2;  
    --brand-color-dblue: #0257A0;  
    --brand-color-lgray: #F2F2F2;  
    --brand-color-dgray: #343434; 
    --brand-color-bluegray: #355365;

Image references in critical.css need full path as styles appear relative to page url not css file url 
================================================================================================================ */

:where(.wp-block-columns) {margin-bottom:0!important;}

/* Structure */
.contentmaxwidth, 		/* max-size of website - restrict max screen width for super wide screens - applied to page div */
.contentinnerfull, 		/* full content width images need this without the padding */
.contentinner, 			/* the standard inner width */
.entry-content > .wp-block-group > .wp-block-group__inner-container,  /* the standard inner width applied to top-level group block */
.contentinner-xl,
.contentinner-lg,
.contentinner-md,
.contentinner-sm,
.contentinner-xs
{
	/* default width (also of group block contents) */
	width:1740px; padding: 0px 40px 0 40px; margin: 0 auto; max-width: 100%; position: relative;
}
.entry-content > .wp-block-group.contentinnerfull > .wp-block-group__inner-container {width: 100%;padding: 0;}
.contentinner-xl {width:calc(1474px  + 80px);} /* 1474px padding included at start so spacing ready for mobile. width = actual require width + padding. */
.contentinner-lg {width:calc(1346px + 80px);} /* 1346px padding included at start so spacing ready for mobile. width = actual require width + padding. */
.contentinner-md {width:calc(1298px  + 80px);} /* 1298px padding included at start so spacing ready for mobile. width = actual require width + padding. */
.contentinner-sm {width:calc(1178px + 80px);} /* 1178px padding included at start so spacing ready for mobile. width = actual require width + padding. */
.contentinner-xs {width:calc(1074px + 80px);} /* 1074px padding included at start so spacing ready for mobile. width = actual require width + padding. */
@media only screen and (max-width:1100px) { 
	.contentinner, 	
	.entry-content > .wp-block-group > .wp-block-group__inner-container, 
	.contentinner-xl,
	.contentinner-lg,
	.contentinner-md,
	.contentinner-sm,
	.contentinner-xs {padding:0px 20px 0 20px;}
}
.contentmaxwidth {width:1880px;padding:0;} /* no padding required */
.contentinnerfull {width:1880px;padding:0;} /* (if different from above) no padding as its full width, even on mobile */

a.btn, p.btn a, .wp-block-button .wp-block-button__link {
  padding: 19px 50px; text-decoration: none; color: #fff;  font-size: 2.3rem;line-height: 1; font-weight: 700;
  background-color:var(--brand-color-mblue);display: inline-flex;  align-items: center; border:none;border-radius: 50px;justify-content: center;min-width: 240px;
  border:1px solid transparent;
}
.wp-block-button .wp-block-button__link {padding-bottom: 21px;} /* adjust to make text central */
a.btn.btn-green, p.btn.btn-green a, .wp-block-button.btn-green .wp-block-button__link {
  background-color: var(--brand-color-green);
}
a.btn.btn-dark, p.btn.btn-dark a, .wp-block-button.btn-dark .wp-block-button__link {
  background-color: var(--brand-color-bluegray);
}
a.btn.btn-large, p.btn.btn-large a, .wp-block-button.btn-large .wp-block-button__link {
    padding: 25px 80px;  font-size: 3.3rem; min-width: 340px;
}
a.btn.btn-small, p.btn.btn-small a, .wp-block-button.btn-small .wp-block-button__link {
    padding: 10px 40px;  font-size: 1.6rem; min-width: 140px;
}
a.btn:hover, a.btn:focus,
p.btn a:hover, p.btn a:focus,
.wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus {
  background-color:var(--brand-color-bluegray);
}
a.btn.btn-green:hover, a.btn.btn-green:focus,
p.btn.btn-green a:hover, p.btn.btn-green a:focus,
.wp-block-button.btn-green .wp-block-button__link:hover, .wp-block-button.btn-green .wp-block-button__link:focus {
  background-color:var(--brand-color-bluegray);
}
a.btn.btn-dark:hover, a.btn.btn-dark:focus,
p.btn.btn-dark a:hover, p.btn.btn-dark a:focus,
.wp-block-button.btn-dark .wp-block-button__link:hover, .wp-block-button.btn-dark .wp-block-button__link:focus {
  background-color:var(--brand-color-dblue);
}
.wp-block-button.btn.play-icon .wp-block-button__link {background-image: url(/wp-content/themes/source4b/images/icon-play-button.svg); background-position: right 10px center; background-repeat: no-repeat; padding-right:80px;}

.bg-bluegray a.btn:hover, .bg-bluegray a.btn:focus,
.bg-bluegray p.btn a:hover, .bg-bluegray p.btn a:focus,
.bg-bluegray .wp-block-button .wp-block-button__link:hover, .bg-bluegray .wp-block-button .wp-block-button__link:focus {
	border:1px solid #fff;
}

/* header - common stuff */
#hero-basic h1,
#hero-image-small h1,
#hero-image-large h1 {
	font-size:6rem;line-height: 1.17; font-weight: bold;
	padding-top:130px;padding-bottom:40px;margin: 0;
	padding-top:clamp(40px ,7vw,130px)/* three parameters: a minimum value, a preferred value, and a maximum allowed value */;
}
#hero-basic p,
#hero-image-small p {font-size:2rem;line-height: 3rem; font-weight: 400;width:800px;max-width:100%}
#hero-image-basic p:last-of-type, #hero-image-small p:last-of-type {margin-bottom:1em}

#hero-basic p a, #hero-image-small p a {color: #FFF; font-weight: bold}


h1 {font-size: 6.0rem;margin-bottom:50px;}
.fw-bold{font-weight:700}

.fs-15 {font-size:1.5rem;line-height: 1.4;}
.fs-17 {font-size:1.7rem !important; line-height: 1.4;}
.fs-18 {font-size:1.8rem;line-height: 1.4;}
.fs-20 {font-size:2.0rem;line-height: 1.4;}
.fs-22 {font-size:2.2rem;line-height: 1.4;}
.fs-24 {font-size:2.4rem;line-height: 1.4;} 
.fs-25 {font-size:2.5rem;line-height: 1.4;}
.fs-30 {font-size:3.0rem!important;line-height: 1.4;}
.fs-33 {font-size:3.3rem;line-height: 1.4;}
.fs-35 {font-size:3.5rem;line-height: 1.4;}
.fs-40 {font-size:4.0rem;line-height: 1.1;}
.fs-45 {font-size:4.5rem;line-height: 1.1;}
.fs-50 {font-size:5.0rem;line-height:1.1}
.fs-60 {font-size:6.0rem;line-height:1.1}
.fs-70 {font-size:7.0rem;line-height:1.07 /*7.5rem*/;}

.lh-18 {line-height: 1.8!important;}
.lh-20 {line-height: 2!important;}
.lh-30 {line-height: 3!important;}

.mw-400 {width:400px;max-width: 100%;}
.mw-900 {width:900px;max-width: 100%;}
.mw-1010 {width:1010px;max-width: 100%;}
.mw-1200 {width:1200px;max-width: 100%;}
.mw-90 {padding-right: 10%}
.mw-90c {padding: 0 5%}
.mw-75 {padding-right: 25%}
.mw-75c {padding: 0 12.5%}

.mw-100-vw {max-width:100vw;}
.of-h {overflow:hidden;}

/* header - basic */
#hero-basic .wp-block-cover, #hero-basic .wp-block-cover-image {min-height:475px;padding:0}
#hero-basic .wp-block-columns .wp-block-column:last-child {min-width:475px;}
#hero-basic .wp-block-cover .wp-block-cover__inner-container {max-width: 20vw;min-width: 250px}

/* header - image small */
#hero-image-small .wp-block-buttons {margin:1em 0;}
#hero-image-small .wp-block-cover, #hero-image-small .wp-block-cover-image {min-height: 100%; padding:0}
#hero-image-small .wp-block-cover.mask::after {display: block; height: 100%; width: 100%; position: absolute;  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTQiIGhlaWdodD0iNjc5IiB2aWV3Qm94PSIwIDAgMTk0IDY3OSI+PHBhdGggZD0iTTAsNjc5VjBoNDcuNEMyOS45LDE1LjksMTYuNywzNS45LDkuMiw1OC4yLDEuNCw4MS4zLDAsMTA2LjEsNS4xLDEyOS45bDExNi43LDU0OS4ySDBaIiBmaWxsPSIjMDI1N2EwIi8+PC9zdmc+");}
#hero-image-small > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:first-child {padding-left:clamp(40px, calc((100vw - 1660px) / 2), 110px); min-height: 620px; padding-bottom: 40px} /* was 680 */

/* header - image large */
#hero-image-large {padding:0}
#hero-image-large .wp-block-columns.maincols  {min-height:710px;}
#hero-image-large .col1 {display: flex; flex-direction: column; justify-content: space-between;padding-bottom: 40px;}
#hero-image-large p {font-size:3.5rem;line-height: 4.5rem; font-weight: 400;width:800px;max-width:100%}

#alert {display:none;}
#alert.show {display:flex; gap:40px; position: absolute/*fixed*/;color:#fff;top: 140px;left: 20px;width: calc(100% - 40px);z-index: 9;background: var(--brand-color-pink);padding:20px 20px 30px;max-width: calc(100vw - 40px);}
#alert div {flex-grow:0;}
#alert div:nth-child(2) {flex-grow:1;}
#alert button {border: none; color: transparent; overflow: hidden; width: 27px; height: 27px;
  background: var(--brand-color-pink) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIyNyIgdmlld0JveD0iMCAwIDI3IDI3Ij4KICA8cGF0aCBkPSJNMyAzTDI0IDI0TTI0IDNMMyAyNCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4=) center no-repeat;
}
/* .site-header {display: flex;border-bottom: 1px solid #ADADAD;position: sticky;top:0;height: 127px;background: #fff;z-index: 10;}
.site-branding {padding:6px 30px;display: flex;  align-items: flex-end;} */
/* .site-header {display:flex;background-color: #fff;height: 120px;position: fixed;
  z-index: 10;
  width: 1880px;
  max-width: 100%;} */
.site-main {padding-top:120px;}
/* .site-header-left {display: flex; align-items: center; padding: 15px 20px 15px 40px;} */
/* .site-header-center {flex-grow:1;display: flex;flex-direction: column;} */
.site-header-center-top {height: 60px;display: flex;justify-content: flex-end;align-items: flex-end;padding: 10px 40px 10px 0;}
.site-header-center-top a {font-size:1.5rem;font-weight: bold;text-transform: uppercase; color: var(--brand-color-dblue);text-decoration: none;}
.menu-super-menu-container {}
#menu-super-menu {display: flex;justify-content: flex-end;list-style: none;gap: 40px;margin: 0;line-height: 1;}
.site-header-center-bot {align-items: flex-start;height: 60px;padding-right: 30px;}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {line-height:40px !important}
/* .site-header-right { padding: 0 0 6px 0;} */
.site-header-right-inner {border-left: 1px solid #00B8F1;
  display: flex;  align-items: center;  padding: 15px 35px 9px 35px;  height: 100%;  line-height: 1;  gap: 15px;}
/* .site-header-right a.btn, */ .site-header-action a.btn {font-size: 1.5rem;height:52px;min-width: 180px;}
.wp-block-cover.has-parallax > .wp-block-cover__image-background {background-position-y: 120px !important;background-position-x:100%!important;}
.wp-block-cover.has-parallax.fixed-left > .wp-block-cover__image-background {background-position-x:0!important;}


#mega-menu-136-0 .mega-sub-menu {/*justify-content:space-evenly!important; display:flex!important;*/}
#mega-menu-136-0-0 {}
#mega-menu-136-0-1 {}

.parallax-scroll-outer {overflow: hidden;}

.switch-icon svg {position: absolute;translate: -60px;transition: translate 0.5s ease;}
.switch-icon:hover svg {translate: 60px;}


.home-slider, .swiper.mySwiper3 {height: calc(100vh - 120px);max-height: 53vw;min-height: 570px; /* or clamp(570px,calc(100vh - 120px),53vw) */}
.home-slider .icon {position: absolute;z-index:10; top: 3%;
  left: 54%;
  /*background: rgba(0,255,0,0.5);*/
  width: 36%;
  aspect-ratio: 1;
  height: 82%;}
.home-slider .icon svg {object-fit: contain;  width: 100%;  height: auto;transition: transform 2s;}
.home-slider .icon.rotate svg {transform:rotate(-120deg);}
.swiper-slide {height:calc(100vh - 120px);}
.swiper-slide .slide-mask {position: absolute;top:0;left:0;height: 100%;width: 60%;overflow: hidden;/*background: rgba(255,0,0,0.5);*/
	/* will-change: width; */
}
.swiper-slide .slide-mask svg {height: 100%;width:auto;position: absolute; right: 0;}
.swiper-slide img {object-fit: cover;object-position: 70% 40%;height:100%;width:100%;}

.swiper-slide-content {position: absolute;top:0;left:0;height: 100%;width: 50%;padding: 80px 0 70px 0;box-sizing: border-box;
	display:flex;}
.swiper-slide-content {opacity:0;transition: opacity 2s;z-index: 11;}
.swiper-slide-content.show {opacity:1;z-index: 12;}

.swiper-slide-inner {font-size:2.2rem;line-height: 3.0rem;color: #fff;width: 870px;box-sizing: border-box;max-width: 100%; padding-left: 40px;float: right; max-height: 480px; align-self: center;padding-left: calc(50vw - 830px);}
.swiper-slide-inner p {max-width: 560px;}
.swiper-slide-inner h2 {font-size:6rem;line-height: 7rem;margin-top:0;}
.swiper-slide-inner strong {font-size:3rem;line-height: 4rem;font-weight: 400!important;}
.swiper-slide-inner > div:last-child {padding-top: 20px;}
.swiper-slide-inner > div:last-child p {margin-bottom: 20px;}

.tp-home {background: #355365; padding: 15px; border: 1px solid #FFF; border-radius: 50px; width: 500px; max-width: 100%}
/* set hero styles  */
/* #hero1 = basic header */
#hero1 {}

/* #hero2 = full height bg img + content on left */
#hero2 .wp-block-cover {min-height: calc(100vh - 120px);padding: 20px;} /* standard fits to page height */
#hero2.shorter .wp-block-cover {min-height: calc(100vh - 120px - 220px);} /* with boxes below (read your meter page) */
#hero2.longer .wp-block-cover {min-height: calc(100vh);padding: 20px 0;} /* overflows page height */
#hero2.longer .wp-block-cover .wp-block-cover__inner-container {padding: 0 20px;}


@media only screen and (min-width:1881px) {
	#alert.show {left:calc(50% - 940px + 20px); width:1840px}
}

@media only screen and (min-width:1880px) {
	.swiper-slide-inner {padding-left: 110px;}
}

@media only screen and (max-width:1740px) {
	.swiper-slide-inner {padding-left: 40px;}
}

@media only screen and (max-width:1460px) { /*1330px*/
    .site-header-right-inner {flex-direction: column;align-items: flex-start; justify-content: center;}
	/* .site-header-right a.btn, */ .site-header-action a.btn {font-size: 1.5rem;height:auto;padding: 10px 30px;}
}

@media only screen and (max-width:1400px) {
	.swiper-slide-content {padding: 60px 0 50px 0;}
	.swiper-slide-inner {font-size:2.0rem;line-height: 2.8rem; max-height: 440px;}
	.swiper-slide-inner h2 {font-size:5rem;line-height: 6rem;}
	.swiper-slide-inner strong {font-size:2.5rem;line-height: 3.5rem;}
}

@media only screen and (max-width:1366px) { /* (XL) laptop tweaks */
	.fs-15 {font-size:1.25rem;line-height: 1.4;}
	.fs-17 {font-size:1.45rem !important; line-height: 1.4;}
	.fs-18 {font-size:1.65rem;line-height: 1.4;}
	.fs-20 {font-size:1.75rem;line-height: 1.4;}
	.fs-22 {font-size:2rem;line-height: 1.4;}
	.fs-24 {font-size:2.1rem;line-height: 1.4;} 
	.fs-25 {font-size:2.5rem;line-height: 1.4;}
	.fs-30 {font-size:2.4rem!important; line-height: 1.2;}
	.fs-33 {font-size:3rem;line-height: 1.4;}
	.fs-35 {font-size:2.8rem;line-height: 1.4;}
	.fs-40 {font-size:3.4rem;line-height: 1.1;}
	.fs-45 {font-size:4rem;line-height: 1.1;}
	.fs-50 {font-size:3.5rem;line-height:1.1}
	.fs-60 {font-size:4.0rem;line-height:1.1}
	.fs-70 {font-size:5.0rem;line-height:1.07 /*7.5rem*/;}
	a.btn, p.btn a, .wp-block-button .wp-block-button__link {padding: 12px 35px; min-width: inherit}
	a.btn, p.btn a, .wp-block-button .wp-block-button__link {font-size: 2rem}
	#hero-image-large .wp-block-columns.maincols {min-height: 450px}
	#hero-image-large p {font-size: 2.8rem; line-height: 3.5rem}
	#hero-image-small > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:first-child {min-height: 450px}
	#hero-basic .wp-block-cover, #hero-basic .wp-block-cover-image {min-height: 265px}
}

@media only screen and (max-width: 1220px) {
	#alert.show {top: 180px;}
}

@media only screen /*and (min-width:761px)*/ and (max-width:1220px) { /*1100px*/
	.site-main {padding-top:160px;}
	/* .site-header {flex-wrap: wrap;height: 160px;} */
	/* .site-header-right {order: 1; width:100%;height: 40px;z-index: 2;} */
	/* .site-header-left {order: 2;padding: 15px 20px;} */
	/* .site-header-center {order: 3;} */
	.site-header-right-inner {flex-direction: row; align-items: flex-start; justify-content: flex-end; border:none}
	.wp-block-cover.has-parallax > .wp-block-cover__image-background {background-position-y: 160px !important;}
}

@media only screen and (max-width:1100px) {
	.swiper-slide-content {padding: 40px 0 30px 0;}
	.swiper-slide-inner {padding-left:20px;  max-height: 420px;}
	.swiper-slide-inner h2 {font-size:4.5rem;line-height: 5.5rem;}
	.swiper-slide-inner a.btn {padding: 10px 40px;  font-size: 1.6rem; min-width: 140px;margin-top:10px}
	#hero-image-small > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:first-child {padding-left:20px;}
	.forcestack {display: block !important}
	.forcestack .xinfocols {margin-bottom: 20px !important; gap: 50px}
	.xinfocols p {font-size: 1.6rem !important}
	
}

@media only screen and (max-width:991px) { /* (MD) bootstrap breakpoint (good for a single breakpoint between tablet landscape & portrait) */
	.swiper-slide-inner {font-size: 1.8rem;line-height: 2.4rem; max-height: 350px; }
	.swiper-slide-inner h2 {font-size: 3.5rem;line-height: 4rem;}
    .swiper-slide-inner strong {font-size: 2.2rem;line-height: 2.5rem;}
	.fs-70 {font-size: 4.8rem;}
	#hero-basic .wp-block-columns {flex-direction: column;padding: 0}
	#hero-basic .wp-block-columns .wp-block-column {width: 100%}
	#hero-basic .wp-block-columns .wp-block-column:first-child {padding: 0 20px}
	#hero-basic .wp-block-columns .wp-block-column:last-child {min-width: 100%;  max-height: 300px;  overflow: hidden}
	#hero-basic .wp-block-cover {min-height: 300px;height:300px;}
	#hero-basic .wp-block-cover .wp-block-cover__image-background {object-position: 50% 0%!important;}
}

@media only screen and (max-width: 834px) {
	body, button, input, select, optgroup, textarea {font-size: 1.7rem}
	.fs-20 {font-size: 1.7rem}
	.fs-24 {font-size: 1.9rem}
	.fs-25 {font-size: 2rem}
	.fs-30 {font-size:2.2rem!important}
	.fs-35 {font-size: 2.4rem}
	.fs-40 {font-size: 2.8rem}
	.fs-45 {font-size:2.9rem}
	.fs-50 {font-size: 3rem}
	.fs-60 {font-size: 3.3rem}
	.fs-70 {font-size: 4.5rem}
	#hero2.shorter .wp-block-cover {min-height: calc(60vh - 120px - 220px)}
	a.btn.btn-small, p.btn.btn-small a, .wp-block-button.btn-small .wp-block-button__link {padding: 10px 20px}
}

@media only screen and (max-width:800px) { 
	.site-header-center-top a {font-size: 1.4rem;}
}

@media only screen and (max-width:781px) { /* wp columns inline at this point */
	#hero2 .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0 {background-color: #000!important;opacity: 0.5;}
	/* added cdk */
	#hero-image-small .wp-block-cover.mask::after {display: none}
	#hero-image-small > .wp-block-group__inner-container > .wp-block-columns {flex-direction: column-reverse;}
	#hero-image-small .wp-block-column {width: 100%}
	#hero-image-small .wp-block-cover.mask {min-height: 40vh}
	#hero-image-small .wp-block-cover.mask img {object-position: right top}
	/*.site-header-center-bot {padding-right: 5px}*/
	#hero-image-small > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:first-child {padding-right: 20px}
	/* end added cdk */
}

@media only screen and (max-width: 765px) { 
	.site-main {padding-top: 110px;}
	/* .site-header {height: 110px; position: fixed; max-width: 100vw ;} */
	/* .site-header-left {width: 120px;padding: 0 0 0 20px; height: 70px;} */
	/* .site-header-center {padding: 0px 10px 0 0; align-items: flex-end; justify-content: center; height: 70px;} */
	.site-header-center-top {display:none;}
	.site-header-center-bot {height: auto;}
	/* .site-header-right {order: 4;height: 45px;padding: 0;} */
	.site-header-right-inner {justify-content: center;padding: 0;}
	/* .site-header-right a.btn, */ .site-header-action a.btn {min-width: 160px;}
	.wp-block-cover.has-parallax > .wp-block-cover__image-background {background-position-y: 120px !important;}
	#alert.show {top: 150px;}
}

@media only screen and (max-width:760px) { /*710px*/
	.home-slider, .swiper.mySwiper3 { max-height: 200vw;height: 200vw;background: var(--brand-color-dblue); max-height: calc(75vw + 450px);height:calc(75vw + 450px) } 
	.swiper-wrapper { max-height: 75vw;height: 75vw; }
	.swiper-slide .slide-mask {display:none;}
	.home-slider .icon { top: 4%;}
	.swiper-slide-content {width:100%;margin-top:75vw;height: 125vw;height:450px; max-height: none;}
	.swiper-slide-inner {padding: 0 20px;}
	.swiper-slide-content {padding: 20px 0 20px 0;}
}

/* #hero3 = full height bg img + content on left */

@media only screen and (max-width:575px) { /* (XS) phone */
	.fs-20 {font-size: 1.7rem}
	.fs-22 {font-size: 1.8rem}
	.fs-25 {font-size: 1.9rem}
	.fs-30 {font-size: 2rem !important}
	.fs-35 {font-size: 2.2rem}
	.fs-40 {font-size: 2.4rem}
	.fs-60 {font-size: 3rem}
	.fs-70 {font-size: 3rem}
	#alert.show {flex-wrap: wrap;gap:20px;}
	#alert div:first-child {order:1;width:calc(100% - 40px - 27px);}
	#alert div:nth-child(2) {order:3;}
	#alert div:last-child {order:2;width:27px;}
	#alert div svg { width: 60px; height: auto; }
	#hero-image-large .wp-block-columns.maincols { min-height: 107vw;} /* was 130*/
	#hero-basic .wp-block-columns .wp-block-column:last-child {max-height: 200px}
	#hero-basic .wp-block-cover {min-height: 200px;height:200px}
	#hero-basic h1 {font-size:5rem;}
	a.btn, p.btn a, .wp-block-button .wp-block-button__link {min-width: auto;}
	#hero-image-small .wp-block-cover.mask::after {display: none}
	#hero-image-small > .wp-block-group__inner-container > .wp-block-columns {flex-direction: column-reverse;}
	#hero-image-small .wp-block-column {width: 100%}
	#hero-image-small .wp-block-cover.mask {min-height: 40vh}
	#hero-image-small .wp-block-cover.mask img {object-position: right top}
	.site-header-center-bot {padding-right: 5px}
	#hero-image-small > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:first-child {padding-right: 20px}
}

.site-header-grid {  
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	background: #fff;
	height: 120px;
	position: fixed;
	z-index: 10;
	width: 1880px!important;
}
.site-header-logo {
	grid-column: 1;
	padding: 15px 20px 15px 40px;
	background: #fff;
}
.site-header-nav {  
	grid-column: 2;
  	min-width: 0;
	background: #fff;
}
.site-header-action {  
	grid-column: 3;
	padding: 0 0 6px 0;
	height: 100%;
	background: #fff;
}
@media only screen and (max-width:1880px) {
	.site-header-grid {  width:100%!important;max-width:100vw!important;}
}
@media only screen and (max-width:1220px) {
	.site-header-grid {  
		grid-template-columns: auto 1fr ;
		grid-template-areas: 	
			"logo action"
			"logo nav";
	}
	.site-header-logo {
		grid-area: logo;
		display: flex;
		height: 100%;
		align-items: flex-end;
		padding: 15px 20px;
	}
	.site-header-nav {  
		grid-area: nav;
	}
	.site-header-action {  
		grid-area: action;
		width: 100%;
    	height: 40px;
    	z-index: 2;
	}
}
@media only screen and (max-width: 765px) { 
	.site-header-grid {  
		grid-template-areas: 	
			"logo   nav"
			"action action";
	}
	.site-header-logo {
		width: 120px;
		padding: 0 0 0 20px;
		height: 70px;
	}
	.site-header-nav {
    	padding: 0px 10px 0 0;
	}
}
/* phone landscape */
@media only screen and (orientation: landscape) and (max-height: 415px) and (max-width: 992px) {
	#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.d-none {display: block!important;}
	.site-header-center-top {display: none;}
	.site-header-grid {  
		height: 70px;
		grid-template-columns: auto 1fr auto;
		grid-template-areas: 	
			"logo action nav";
	}
	.site-header-logo {
		padding: 0 20px;
		height: 60px;
		align-items: center;
	}
	.site-header-logo a {display: flex;}
	.site-header-logo img {height: 50px;}
	.site-header-center-bot {height: 50px;}
	.site-header-right-inner {align-items: center;justify-content: center;}
	.site-main {padding-top: 60px;}
	#hero-image-small .wp-block-cover, #hero-image-small .wp-block-cover-image {min-height: 100vw;}
}