/*
Theme Name: Your Theme by Fusion Studios
Theme URI: http://html5blank.com
Description: Based on HTML5 Blank WordPress Theme by Todd Motto (@toddmotto)
Version: 1.4.3
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
*/


/* IMPORT FONTS BEGINS*/

@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* IMPORT FONTS ENDS*/

:root {
	--blue: #003d4b;
    --lighterBlue: #065584;
	--hoverColor: #308eaa;
 }

/*WORDPRESS CORE STYLES BEGIN*/

.alignnone {
    margin: 0;
}
.aligncenter, div.aligncenter {
    display:block;
    margin: 5px auto 5px auto;
}
.alignright, .wp-block-image .alignright {
    float:right;
    margin: 17px 0 20px 20px;
}
.alignleft, .wp-block-image .alignleft {
    float:left;
    margin: 17px 20px 20px 0;
}

@media (max-width: 750px){
    /*remove float and center all left and right aligned images at 750px for both classic and gutenberg editor.  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*/
    }
}

a img.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 0;
}
a img.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    background: #FFF;
    border: 1px solid #F0F0F0;
    max-width: 95%;
    padding: 5px;
    text-align: center;
}

@media screen and (max-width: 400px){
    .wp-caption.aligncenter {
        width: unset!important; /*this, coupled with positioning below, prevents wordpress from forcing a size on the caption and preventing a truly resposive AND centered image and caption*/
        position: relative;
        left: 50%;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
    }
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}
.wp-caption .wp-caption-text, .gallery-caption {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 7px 0px 7px 0px;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{
    padding-left: 0;
    /*remove wp default left padding on <p> on media&image blocks */
}
.wp-block-media-text.has-media-on-the-left .wp-block-media-text__content{
    padding-right: 0;
    /*remove wp default right padding on <p> on media&image blocks*/
}


@media (max-width: 1023px){
    /*override wordpress default breakpoint (600px) for image&media block*/
    .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;
    }
}

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

/* end make gutenberg insert youtube video truly responsive styles end*/

/*WORDPRESS CORE STYLES END*/

/* FLEXBOX PARENT ELEMENT STYLES BEGIN */

.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*/

/*BASIC 2, 3, 4 COLUMN GRID STYLES BEGIN*/

.displayGrid4Column {
    display: grid;
    /*grid-template-columns: 1fr 1 fr 1fr 1fr;
    grid-template-columns: repeat(4, 1fr) same as above line, just with "repeat" keyword;*/
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: auto;
}
.displayGrid3Column {
    display: grid;
    /*grid-template-columns: 1fr 1 fr 1fr 1fr;
    grid-template-columns: repeat(4, 1fr) same as above line, just with "repeat" keyword;*/
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: auto;
}
.displayGrid2Column {
    display: grid;
    /*grid-template-columns: 1fr 1 fr 1fr 1fr;
    grid-template-columns: repeat(4, 1fr) same as above line, just with "repeat" keyword;*/
    grid-template-columns: repeat(auto-fit, minmax(min(585px, 100%), 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: auto;
}

/*BASIC 2, 3, 4 COLUMN GRID STYLES END*/

/*GENERAL HTML STYLES BEGIN*/

*{
    word-wrap: normal;
    word-break: keep-all;
    /*prevent wordpress from breaking words*/
}
html{
    overflow-x: clip; /*use "clip" not "hidden" so any elements with "position: sticky" work */
    scroll-behavior: smooth;
    scroll-padding-top: 54px; 
}
body {
    font-family: "Averia Serif Libre", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    color: black;
    line-height: normal;
    overflow-x: clip; /*use "clip" not "hidden" so any elements with "position: sticky" work */
    position: relative; /*must be present to prevent mobile from having scrolling issues in certain circumstances*/
    margin: 0;
}

@media (max-width: 1280px){
	body{
		font-size: 18px;
	}
}

a {
    color: var(--blue);
    text-decoration: none;
    transition: color .4s;
}
a:hover {
    color: #444;
    transition: color .4s;
}
a:focus {
    outline: 0;
}
a:hover, a:active {
    outline: 0;
}
.myButton a, a.myButton{
    /*two selectors so button works inside guttenberg button (always asign class "myButton" to button elment) elmement and in classic mode (assing class "myButton" to the a tag, wrap in optional div element for alignment, if needed. Can override settings in gutenbergy button styler or, of course, in classic mode with css*/
    letter-spacing: 3px;
    opacity: 100%;
    transition: .5s opacity ease;
    padding: 15px;
    background: var(--blue);
    color: white;
    display: inline-block;
    border-radius: 5px;
    line-height: normal;
}
.myButton a:hover, a.myButton:hover{
    background: --var(hoverColor);
}
audio {
    outline: 0;
}
h1, h2, h3, h4, h5, h6, p{
    margin: 0px;
    padding: 15px 0;
    /*margins placed on elements at the top of other elements whose padding has not been set don't show up due to overflow issues in the box model. Because of this, we will ALWAYS use padding instead of margins*/
}
h1{
    font-size: clamp(30px, 4vw, 54px);
	color: #4b4b4d;
}
h2{
    font-size: 25px;
}
h3{
    font-size: 20px;
}
h4{
    font-size: 16px;
    font-weight: bold;
}
hr {
    box-sizing: content-box; 
    height: 0; 
    overflow: visible;
}
iframe, object, embed {
    max-width: 100%;
}
img{
    max-width: 100%;
    height: auto;
}
main{
    color: #313131;
    display: block;
}
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%;
    /*box size: boder box; uncomment as required*/
}
.paddingTopBottom{
    padding-top: 50px; /*don't use short forms here*/
    padding-bottom: 50px;
}
.noPaddingTop{
    padding-top: 0px;
}
.noPaddingBottom{
    padding-bottom: 0px;
}
.textAlignCenter{
    text-align: center;
}

/*GENERAL > form styles begin*/

form{
    max-width: 700px;
    border: 2px var(--blue) solid;
    padding: 10px;
    border-radius: 4px;
    background: var(--blue);
    color: white; /*to apply color to success/error messages*/
	margin: auto;
}
input[type="text"], input[type="email"], textarea{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
input[type="text"], input[type="email"]{
    margin-bottom: 30px;
}
input[type="file"]{
    color: #757575;
    padding: 10px 0 10px 0;
}
input[type="submit"], button[type="submit"]{
    background: var(--lighterBlue);
	font-family: inherit;
    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;
	border: none!important;
	margin-bottom: 25px;
}

input[type="submit"]:hover, button[type="submit"]:hover{
    background: var(--hoverColor);
    transition: .4s background;
}
textarea{
    padding: 10px 0 0 10px;
    box-sizing: border-box;
}
label {
    color: white;
    padding: 0;
}

/*GENERAL > form styles end*/

/*GENERAL HTML STYLES END*/

/*HEADER STYLES BEGIN*/

.header{
    position: sticky;
    width: 100%;
    top: 0px;
    z-index: 9;
	background: white;
	padding-top: 7px;
}
.header .displayFlex.headerContentWrapper{
    background: white;
}
.header .displayFlex.headerContentWrapper a.logo.flexItem {
    position: relative;
    color: #211e1d;
    flex: 1;
}
.header .displayFlex.headerContentWrapper a.logo.flexItem img{
    max-width: 16vw;
    transition: all .4s ease; /*we transition this so on header.scroll actually makes the scaled image smaller so that the header gets thinner. See header.scroll at end of css header section to adjust.*/
    padding: 12px 0 12px 2%;
    min-width: 170px;
    display: block; /*TO KEEP IMAGE THE SAME SIZE AS THE A TAG THAT WRAPS IT*/
}

/*HEADER > woo advanced search form style overrides begin*/

.displayFlex.searchAndCartInfo{
	gap: 30px;
	padding-right: 16px;
	font-size: 16px;
}
.searchAndCartInfo .aws-container .aws-search-form{
	height: 27px;
	padding: 0;
}
.aws-search-btn.aws-form-btn{
	background: var(--blue) !important;
	border: none!important;
}
.aws-search-btn_icon{
	color: whitesmoke !important;
}
.aws-container .aws-show-clear .aws-search-field{
	padding-right: 0px !important;
}
/*HEADER > woo advanced search form style overrides end*/

/*HEADER > NAV main menu item styles begin*/

.header .displayFlex.headerContentWrapper .flexItem.nav > ul li a[aria-current]{
    /*styles currrently active page using the aria-current attribute that wordpress inserts into the currently acitve menu item.*/
    color: var(--blue) !important;
    font-weight: bold;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul {
    display: flex; /*override default block behaviour of uppermost li items only, so they go across screen one after another.  */
    right: 0px; /*puts menu to the right of the screen.  Comment out to put menu to left*/
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul {
    margin: 0px; /*override default browser margin on ul elements.  Don't take this out!*/
    padding: 0px; /*override default browser padding on ul elements. Don't take this out!*/
    position: relative;
    z-index: 999;
    list-style: none; 
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul li{
    position: relative;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li a {
    display: block;
    background: white;
    color: black;
    transition: .4s color;
    text-transform: uppercase;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li::before{
    position: absolute;
    top: 12px;
    content: '';
    left: 50%;
    translate: -50% 0;
    width: 80%;
    height: 2px;
    background: var(--blue);
    scale: 0;
    transform-origin: right;
    transition: scale 250ms ease-in;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li:hover::before{
    scale: 1;
    transform-origin: left;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > a {
    padding: 16px 35px 16px 35px; 
    text-transform: uppercase;
    font-size: 18px;
}

/*HEADER > NAV main menu item styles END*/

/*HEADER > NAV > SUB-MENU Styles begin*/

.header .displayFlex.headerContentWrapper .flexItem.nav ul li.menu-item-has-children > a:after {
    content: '+';
    padding-left: 5px;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li ul.sub-menu  {
    display: none; /*set all subs not to display initially.  On hover function in js/scripts.js toggles display*/
    background: white;
    position: absolute;
	width: 100%;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu > li > a {
    margin-left: 18px;
    font-size: 90%;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu li a {
    padding: 10px 5px;
    color: black;
	text-transform: capitalize;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu li a:hover {
    color: #0099cc;
}
.header .displayFlex.headerContentWrapper .flexItem.nav ul li ul.sub-menu li{
    position: relative; 
}
.header .displayFlex.headerContentWrapper > .flexItem.nav > ul > li > ul.sub-menu > li > ul.sub-menu > li > a {
    font-size: 90%;
}
.header .displayFlex.headerContentWrapper > .flexItem.nav > ul > li > ul.sub-menu > li > ul.sub-menu {
    left: 100%; /*puts subs of subs directly to the RIGHT of their sub-parent.*/
    width: 100%;/*sets the width of subs--adjust as needed to your longest one so sub subs don't wrap*/
    top: 0px; /*so sub subs begin at the top of their li parent, which is set to position: relative;*/
}

/*HEADER > NAV > SUB-MENU Styles end*/

/* HEADER mobile navigation styles begin */

@media screen and (max-width: 1023px){
    /*don't display the desktop nav at and below 1023px.  Adjust pixel value as desired.*/
    .header .nav {
        display: none;
    }
}

@media screen and (min-width: 1024px) {
    /*don't display mobile menu button or the mobile menu iteself at 1024px and above.  Adjust the pixel value as desired.*/
    .header .mobileNavOpenClose, .header .mobileNavWrapper {
        display: none; 
    } 
}

@media (max-width: 767px){
	.displayFlex.headerContentWrapper .mobileNavOpenClose{
		order: 1;
	}
	.displayFlex.headerContentWrapper .displayFlex.searchAndCartAndNavWrapper {
		flex-basis: 100%;
		order: 2;
	}
	.displayFlex.headerContentWrapper .displayFlex.searchAndCartAndNavWrapper .displayFlex.searchAndCartInfo{
		padding-bottom: 15px;
		padding-left: 15px;
	}
}

@media (max-width: 424px){
	.displayFlex.headerContentWrapper .displayFlex.searchAndCartAndNavWrapper .displayFlex.searchAndCartInfo{
		flex-direction: column;
		gap: 15px;
	}
}

/* HEADER mobile navigation styles > MOBILE NAV OPEN CLOSE ("hamburger") styles BEGIN */

.header .mobileNavOpenClose {
    text-align: center; 
    position: sticky; 
    z-index: 9999999999;
    right: 14px;
    line-height: 45px; /*adjust to vary height of mobile menu icon bar*/
    background-color: white;
    text-transform: uppercase;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}
.header .mobileNavOpenClose a.mobileNavIcon {
    color: var(--blue);
}
.header .mobileNavOpenClose a.mobileNavIcon span.createsHamburger:before{
    content:'\2630';/*creates the hamburger*/
    padding-right: 5px;
    font-size: 29px;
    position: relative;
}
.header .mobileNavOpenClose a.mobileNavIcon.XoutOfMobileMenu span.createsHamburger:before {
    /*class "XoutOfMobileMenu" toggled through js/scripts.js JQuery, puts mobile menu-close "x" in place of hamburger when mobile menu is open*/
    content:'\00D7';/*creates the "x"*/
    font-size:40px;
    position:relative;
    display: inline-block; /*so inline span can recieve rotation (inline elements do not)*/
    transform: rotate(360deg);
    transition:transform 1s ease-out;
    animation: fadeinout 1s ease forwards;
    opacity: 0;
}

@keyframes fadeinout {
    0% { opacity: 0; }
    50% { opacity: .5; }
    100% { opacity: 1; }
}

/* HEADER mobile navigation styles > MOBILE NAV OPEN CLOSE ("hanburger") styles END */

/* HEADER mobile navigation styles > MOBILE NAV WRAPPER (mobile menu) styles BEGIN (note not actually inside header) */

.mobileNavWrapper{
    position: fixed;
	/*do NOT declare a top value or nav menu will cover header*/
    right: 0px; 
    overflow-y: scroll; 
    background: white;
    z-index: 999;
    width: 100%;
	translate: 200% 0;
	transition: translate .7s ease-in-out;
	max-height: 86vh;
}
.mobileNavWrapper.showMenu{
	/*showMenu class added by javascript in theme .js file*/
	translate: 0 0;
	transition: translate .7s ease-in-out;
}
.mobileNavWrapper .mobileNav ul {
    margin: 0px; /*override browser defaults for all mobile menu items*/
    padding: 0px; 
    list-style: none;
}
.mobileNavWrapper .mobileNav{
    position: relative;
}
.mobileNavWrapper .mobileNav ul li{
	border-top: 1px solid gray;
}
.mobileNavWrapper .mobileNav > ul > li:last-of-type{
	border-bottom: 1px solid gray;
}
.mobileNavWrapper .mobileNav ul li a {
    color: black;
	font-weight: 500;
    display: block;
    padding: 30px 20px; /*controls height of menu items*/
}
.mobileNavWrapper .mobileNav ul li.menu-item-has-children{
    position: relative;
}
.mobileNavWrapper .mobileNav ul li.menu-item-has-children > a:first-of-type{
	max-width: 74%; /* so menu items break to another line when screen is small enough without running into the dropdown arrow positioned absolutely. Putting borders on drop down arrow causes problems when screen gets small and menu items are long--try not to do it*/
	box-sizing: border-box;
}
a.dropDownActivator{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 30px !important;
    border-top: none !important;
	border-bottom: none !important;
	color: black !important;
}
.mobileNavWrapper .mobileNav ul li.menu-item-has-children a.dropDownActivator:after{
    /*"drop down activator" inserted by javascript in theme JS folder*/
    content: "▼";
    transform: rotate(0deg);
    display: block;
    transition: 500ms ease transform;
}
.mobileNavWrapper .mobileNav ul li.menu-item-has-children > a.OpenCloseToggle:after{
    /*"OpenCloseToggle class inserted by javascrip in theme JS folder*/
    transform: rotate(180deg);
}
.mobileNavWrapper .mobileNav > ul > li > a {
    transition: background 0.4s; 
}
.mobileNavWrapper .mobileNav > ul > li > a:hover {
    transition: background 0.4s; 
}
.mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li > a {
    padding-left: 45px;
    background-color: whitesmoke;
}
.mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li > a:hover {
    transition: background 0.4s; 
}
.mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children> ul.sub-menu li > a {
    padding-left: 40px;
    background-color: yellow;
}
.mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children> ul.sub-menu li > a:hover {
    background-color: blue;
    transition: background 0.4s; 
}
.mobileNavWrapper .mobileNav ul li.menu-item-has-children ul.sub-menu {
    /*don't display ANY subs until user clicks on them and js/script.js JQuery toggles their display*/
    display: none;
    flex-basis: 100%;
	position: relative;
}

/* HEADER mobile navigation styles > MOBILE NAV WRAPPER (mobile menu) styles END */

/*HEADER SCROLLED STYLES BEGIN --class "scroll added by scripts.js in theme file*/

.header.scrolled{
    box-sizing: border-box; 
    z-index: 999999; 
    border-bottom: 1px solid grey;
}
.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem img{
    padding: 0 0 0 2%;
    width: 100px;
}

/*HEADER SCROLLED STYLES end --class "scroll added by scripts.js in theme file*/

/*HEADER styles end*/

/*HOMEPAGE STYLES BEGIN*/

body.home .pageTitle{ 
    display: none;/*don't display page title on homepage*/
}

@media (max-width: 1280px){
	p.homepageWelcome{
		font-size: 24px !important;
		padding-bottom: 0px;
	}
}

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

.homepageCategories ul{
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	gap: 30px;
	justify-content: center;
}
.homepageCategories ul li{
	flex-basis: 300px;
	margin: 0 !important;
}
.homepageCategories ul li span.wc-block-product-categories-list-item__image{
	max-width: unset;
	margin: 0 !important;
}
.homepageCategories ul li span.wc-block-product-categories-list-item__name{
	display: block;
	text-align: center;
	background: var(--blue);
    padding: 10px;
    color: white;
    border-radius: 4px;
	transition: background .7s;
}
.homepageCategories ul li span.wc-block-product-categories-list-item__name:hover{
	background: var(--hoverColor);
}
.wp-block-contact-form-7-contact-form-selector{
	margin-top: 0;
}
.homepageContactForm form{
	padding: 10px 0;
}
.homepageContactForm p{
	padding-top: 8px;
	padding-bottom: 8px;
}
.homepageContactForm label{
	font-size: 14px;
	text-transform: uppercase;
}
.homepageContactForm .displayFlex{
	gap: 20px;
}
.homepageContactForm .displayFlex label.flexItem{
	flex: 1 1 47%;
}
.homepageContactForm .displayFlex input{
	margin-bottom: 10px;
	height: 30px;
}
.homepageContactForm .displayFlex input, .homepageContactForm textarea{
	color: white;
	border: 1px solid whitesmoke;
	background: transparent;
}
.homepageContactForm textarea{
	max-height: 75px;
}
.homepageContactForm input[type="submit"]{
	margin-bottom: 0px;
	padding-top: 5px;
    padding-bottom: 7px;
}
.homepageContactForm .wpcf7-spinner{
	display: none;
}
/*HOMEPAGE STYLES END*/

/*INSIDE PAGE STYLES BEGIN*/

/*INSIDE PAGE > User Registration plugin for login and registration form styles begin*/


form.user-registration-form label, form.register label{
	padding: unset;
}
form.user-registration-form input[type="submit"]{
	margin-bottom: 25px;
}
form.register select{
	background-color: white!important;
}
form.register button[type="submit"]{
	color: white;
	transition: background .5s;
	width: 100%;
	margin-bottom: 30px;
	font-size: 20px;
    text-transform: uppercase;
    font-family: inherit;
}
form.register button[type="submit"]:hover{
	background: var(--hoverColor);
}
.user-registration-profile-fields > p, .user-registration-EditAccountForm .ur-form-grid > p{
	float: none !important;
}
.user-registration-LostPassword.lost_password a{
	color: white!important;
}
.user-registration-LostPassword.lost_password a:hover{
	color: black !important;
}
.user-registration-ResetPassword.ur_lost_reset_password .ur-form-grid p{
	color: white!important;
}
.user-registration-message {
    border-top-color: white !important;
    color: white !important;
	background: var(--blue)!important;
}
/*INSIDE PAGE > User Registration plugin for login and registration form styles end*/

/*INSIDE PAGE > woocommerce styles begin*/

body.woocommerce aside{
	display: none;
}
body.woocommerce .content-area {
	padding: 5%;
}
body.woocommerce main{
	max-width: 1200px;
	margin: auto;
}
form.woocommerce-ordering{
	border: none;
	padding: 0;
	background: none;
}
ul.products li.product{
	text-align: center;
}
.woocommerce form.cart{
	background: none;
	border: none;
	display: flex;
	align-items: center;
}
.woocommerce .button{
	background: var(--blue) !important;
	transition: .7s background;
	color: whitesmoke !important;
}
.woocommerce .woocommerce-Price-amount.amount{
	color: var(--hoverColor);
}
.woocommerce .stock.in-stock{
	color: var(--hoverColor);!important;
}
.woocommerce .button:hover{
	background: var(--hoverColor); !important;
}
.woocommerce form.cart .quantity .text{
	height: 36px;
}
.woocommerce-message{
	border-top: 3px solid var(--blue);
}
.woocommerce-message::before{
	color: var(--blue);
}
.wp-element-button {
	background: var(--blue);
	transition: background .7s !important;
}
.wp-element-button:hover{
	background: var(--hoverColor); !important;
}
.wp-element-button:hover span.wc-block-components-button__text{
	color: whitesmoke !important;
	transition: .7s color !important;
}
form.wc-block-components-form.wc-block-checkout__form{
	background: var(--blue);
}
.wc-block-checkout__terms.wp-block-woocommerce-checkout-terms-block a{
	color: white;
}
.wc-block-checkout__actions_row button{
	background: var(--lighterBlue);
}
.wc-block-components-totals-coupon__form{
	max-width: 95%;
}
.wc-block-components-totals-coupon__form button[type="submit"]{
	width: unset;
	margin-bottom: unset;
	margin-top: unset;
	max-height: 64px;
}
/*INSIDE PAGE > woocommerce styles 	end	*/

/*INSIDE PAGE STYLES END*/

/*BLOG STYLES BEGIN*/

.blogWrapper article{
    border-bottom: 2px solid var(--blue);
    margin-bottom: 50px;
    padding-bottom: 30px;
}
.displayFlex.blogWrapper main.flexItem{
    flex: 1;
    padding-right: 40px;
}
.displayFlex.blogWrapper main.flexItem article.blogFixedWidth h2{
    padding-top: 0px;
}
.displayFlex.blogWrapper main.flexItem img{
    max-width: 100%;
    height: auto;
    margin-bottom: 30px;
}
.displayFlex.blogWrapper main.flexItem img.alignright, .displayFlex.blogWrapper main.flexItem img.alignleft{
    /*remove align left and right float styles for blog excerpts as it screws up the layout*/
    float: none;
    margin: auto;
    margin-bottom: 30px;
} 

@media (max-width: 767px){
    .displayFlex.blogWrapper{
        flex-direction: column;
    }
    .displayFlex.blogWrapper main.flexItem{
        padding-right: 0px;
    }
}

.displayFlex.mainBlog .flexItem.excerptTextContent{
    padding-left: 25px;
    flex: 1;
}
.displayFlex.mainBlog .flexItem.excerptTextContent h2{
    font-size: 28px;
    padding: 0px;
}
/*BLOG STYLES > styles for pagination at bottom of posts main page begin*/

nav.pagination{
    text-align: center;
    padding: 30px;
    font-size: 22px;
}
nav.pagination .page-numbers{
    padding: 3px 10px 3px 10px;
    border: 1px solid var(--blue);
    border-radius: 4px;
    display: inline-block;
    min-width: 20px;
}
nav.pagination .page-numbers.current{
    background: var(--blue);
    color: white;
}

/*BLOG STYLES > styles for pagination at bottom of posts main page end*/

/*BLOG STYLES > styles for previous/next post navigation NOT pagination begin*/

.displayFlex.nextPreviousPost{
    padding: 20px 0;
    border-top: 1px var(--blue);  solid;
    border-bottom: 1px var(--blue);  solid;
    margin-bottom: 20px;
    gap: 20px;
}
.displayFlex.nextPreviousPost .flexItem{
    flex: 1;
    background: var(--blue);
    border-radius: 5px;
    color: white;
    padding: 5px;
    font-size: 14px;
    text-transform: uppercase;
    min-width: 250px;
}
.displayFlex.nextPreviousPost .flexItem a {
    color: white;
    transition: color .4s ease;
}
.displayFlex.nextPreviousPost .flexItem a:hover{
    color: #e3e3e3;
}
.displayFlex.nextPreviousPost .flexItem.displayFlex{
    gap: 5px;
}
.displayFlex.nextPreviousPost .flexItem.displayFlex.nextPost{
    text-align: right;
}
.displayFlex.nextPreviousPost .flexItem.displayFlex .subFlexItem.arrow{
    font-size: 30px;
    padding: 0 10px;
    font-weight: 300;
}

/*BLOG STYLES > styles for previous/next post navigation NOT pagination end*/

/*BLOG STYLES > sidebar styles begin*/

.displayFlex.blogWrapper .flexItem.sidebar{
    flex: 0 1 313px;
}
.displayFlex.sidebarRecentPosts{
    margin-bottom: 25px;
}
.displayFlex.sidebarRecentPosts .flexItem.sidebarRecentPostsThumbnail img{
    min-width: 150px;
}
.displayFlex.sidebarRecentPosts .flexItem.sidebarRecentPostsTextContent{
    padding-left: 20px;
}

/*BLOG STYLES > sidebar styles end*/

.archive h2{
    /*fixes picture floating issues in posts*/
    clear: both;
    padding-top: 50px;
}
/*BLOG STYLES END*/


/*FOOTER STYLES BEGIN*/

.footer {
    background: white;
	border-top: 2px solid var(--hoverColor);
 }
.footer .fixedWidth.displayFlex .flexItem{
    flex: 1;
}
.footer .fixedWidth.displayFlex .flexItem a {
    color: var(--blue);
}
.footer .fixedWidth.displayFlex .flexItem a:hover {
    color:  var(--hoverColor);
}
.footer .fixedWidth.displayFlex .flexItem.footerSecondColumn{
    text-align: center;
}
.footer .fixedWidth.displayFlex .flexItem.footerSecondColumn img.footerLogoImage{
    width: 300px;
    max-width: 100%;
}
.footer .fixedWidth.displayFlex .flexItem.footerThirdColumn{
    text-align: right;
}
.footer .fixedWidth.displayFlex .flexItem.footerThirdColumn svg{
    height: 30px;
    width: 30px;
    padding: 0 10px;
    fill: var(--blue);
    transition: .4s fill;
}
.footer .fixedWidth.displayFlex .flexItem.footerThirdColumn svg:hover{
    fill:  var(--hoverColor);
    transition: .4s fill;
}
.footer .fixedWidth.copyright{
    font-size: 10px;
    padding-bottom: 10px;
}

@media screen and (max-width: 850px){
    .footer{
        text-align: center;
    }
    .footer .fixedWidth.displayFlex{
        flex-direction: column;
    }
    .footer .fixedWidth.displayFlex .flexItem.footerThirdColumn{
        text-align: unset;
    }
}

/*FOOTER STYLES END*/

/*WORDPRESS PASSWORD PROTECT PAGE STYLES BEGIN (USES DEFAULT TEMPLATE, WHICH HAS NO hard coded PADDINGS OR MARGINS AS PER OUR THEME)*/

.post-password-form{
    max-width: calc(200px + 24vw);
    padding: 0 5%;
}

/*WORDPRESS PASSWORD PROTECT PAGE STYLES end*/

.grecaptcha-badge { 
visibility: hidden; 
}