/*
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=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

/* IMPORT FONTS ENDS*/

:root{
	--green: #389239;
}

/*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: "Montserrat", sans-serif;
    font-size: 16px;
    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;
	/*background-image: url("https://advantaform.com/wp-content/uploads/headerBackground.webp");
	background-attachment: fixed;
	background-size: cover;*/
}
a {
    color: #0079c2;
    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*/
    font-size: 16px;
    letter-spacing: 3px;
    opacity: 100%;
    transition: .5s opacity ease;
    padding: 15px;
    background: #308eaa;
    color: white;
    display: inline-block;
    border-radius: 5px;
    line-height: normal;
}
.myButton a:hover, a.myButton:hover{
    opacity: 70%;
    color: white;
}
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(25px, 4vw, 40px);
	font-weight: 400;
}
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;
    padding: 10px;
    border-radius: 7px;
    background: transparent;
    color: white; /*to apply color to success/error messages*/
}
input[type="text"], input[type="email"], textarea{
    width: 100%;
    padding: 7px;
    box-sizing: border-box;
}
input[type="text"], input[type="email"]{
    margin-bottom: 30px;
    padding: 10px;
	border: none;
    font-size: 16px;
}
input[type="file"]{
    color: #757575;
    padding: 10px 0 10px 0;
}
input[type="submit"]{
    background: var(--green);
    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;
}

    @media screen and (max-width: 380px){
        input[type="submit"]{
            width: 100%;
        }
    }

input[type="submit"]:hover{
    background: grey;
    transition: .4s background;
}
textarea{
    padding: 10px 0 0 10px;
    box-sizing: border-box;
}
label {
   padding: 0;
	text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
	border-bottom: 8px solid var(--green);
	display:block;
}

/*GENERAL > form styles end*/

/*GENERAL HTML STYLES END*/

/*HEADER STYLES BEGIN*/

.header{
    position: relative;
    width: 100%;
    top: 0px;
    z-index: 9;
}
.header .displayFlex.headerContentWrapper{
    background: transparent;
	
}
.header .displayFlex.headerContentWrapper a.logo.flexItem {
    position: relative;
    transform: scale(1);
    color: #211e1d;
    transition: padding .4s, transform .4s;
	text-align: center;
	padding-top: 15px;
 }
.header .displayFlex.headerContentWrapper a.logo.flexItem img{
    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%;
	border-bottom: 13px solid var(--green);
	filter: drop-shadow(2px 2px 17px white);
 }
.logoLine{
	font-family: "Oswald", sans-serif;
	font-size: clamp(20px, 4vw, 40px);
    font-weight: bold;
    line-height: 44px;
}

/*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: #094a85 !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: 5px;
	content: '';
	left: 50%;
	translate: -50% 0;
	width: 80%;
	height: 2px;
	background: #1f4f23;
	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 1.5vw 16px 1.5vw; 
    text-transform: uppercase;
    font-size: 18px;
}

    @media screen and (max-width: 1200px){
        .header .displayFlex.headerContentWrapper .flexItem.nav ul li a{
            font-size: 16px;
        }
        .header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > a{
            padding: 16px 1.28vw 16px 1.28vw;
        }
    }

/*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;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu > li > a {
    margin-left: 25px;
    font-size: 90%;
}
.header .displayFlex.headerContentWrapper .flexItem.nav > ul > li > ul.sub-menu li a {
    padding: 10px 5px;
    color: black;
}
.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; 
        } 
    }

/* 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: grey; 
}
.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 */

.header .mobileNavWrapper{
    position: sticky;
    height: 0px; /*hide mobile menu until js/scripts.js toggles the height to 100% (menu open) and back to 0px (menu close) on click*/
    right: 0px; 
    overflow-y: scroll; 
    top: 44px; /*so mobile logo and nav go directly beneath the (expanded) hamburger menu button*/
    background: white;
    z-index: 999;
}
.header .mobileNavWrapper .mobileLogo{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background: #1b2653;
}
.header .mobileNavWrapper .mobileLogo img {
    width: 200px;/*adjust if mobile logo is too large for screen*/
    display: block;
    margin: auto;
}
.header .mobileNavWrapper .mobileNav ul {
    margin: 0px; /*override browser defaults for all mobile menu items*/
    padding: 0px; 
    list-style: none;
}
.header .mobileNavWrapper .mobileNav{
    height: 339vh;/*fixed width must have a height so all menu items appear. Large value is to accomodate orientation change*/
}
.header .mobileNavWrapper .mobileNav ul li a {
    color: grey;
    display: block;
    padding: 30px 20px; /*controls height of menu items*/
    border-top: rgba(164, 156, 156, 0.4) 1px solid;
}
.header .mobileNavWrapper .mobileNav > ul > li a:last-of-type{
    border-bottom: rgba(164, 156, 156, 0.4) 1px solid; 
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children{
    position: relative;
}
a.dropDownActivator{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 30px !important;
    border: 1px solid grey;
}
.header .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;
}
.header .mobileNavWrapper .mobileNav ul li.menu-item-has-children > a.OpenCloseToggle:after{
    /*"OpenCloseToggle class inserted by javascrip in theme JS folder*/
    transform: rotate(180deg);
}
.header .mobileNavWrapper .mobileNav > ul > li > a {
    transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav > ul > li > a:hover {
    background-color:rgba(0, 0, 0, 0.1); 
    transition: background 0.4s; 
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li > a {
    padding-left: 45px;
    background-color: #b8bcbe; /*grey is default*/
}
.header .mobileNavWrapper .mobileNav > ul > li.menu-item-has-children > ul.sub-menu > li > a:hover {
    transition: background 0.4s; 
}
.header .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;
}
.header .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; 
}
.header .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%;
}

/* 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; 
 }
.header.scrolled .displayFlex.headerContentWrapper a.logo.flexItem img{
    transform: scale(.6);
    padding: 0 0 0 2%;
    min-width: 175px;
}

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

/*HEADER styles end*/

/*HOMEPAGE STYLES BEGIN*/

@keyframes bounceInDown {
            0%, 60%, 75%, 90%, to {
                    animation-timing-function:cubic-bezier(.215, .61, .355, 1);
                }
            0% {
                    opacity:0; transform:translate3d(0, -3000px, 0);
                }
            60% {
                    opacity:1; transform:translate3d(0, 25px, 0);
                }
            75% {
                    transform:translate3d(0, -10px, 0);
                }
            90% {
                    transform:translate3d(0, 5px, 0);
                }
            to {
                    transform:none;
                    opacity: 1;
                }
        }
    
     .bounceInDown{
        opacity: 0;
    }
    .bounceInDown{
        animation-name: bounceInDown;
        animation-duration: 1s;
        animation-fill-mode: both;
        position: relative;
    }

 @keyframes bounceInLeft {
            0%, 60%, 75%, 90%, to {
                 animation-timing-function:cubic-bezier(.215, .61, .355, 1);
                }
            0% {opacity:0; transform:translate3d(-3000px, 0, 0);
                }
            60% {opacity:1; transform:translate3d(25px, 0, 0);
                }
            75% {transform:translate3d(-10px, 0, 0);
                }
            90% {transform:translate3d(5px, 0, 0);
                }
            to {transform:none;
                opacity: 1;
                }
        }

    .bounceInLeft{
        opacity: 0;
    }
    .bounceInLeft{
        animation-name: bounceInLeft;
        animation-duration: 1s;
        animation-fill-mode: both;
        position: relative;
    }

@keyframes bounceInRight {
            0%, 60%, 75%, 90%, to {
                animation-timing-function:cubic-bezier(.215, .61, .355, 1);
                }
            0% {
                opacity:0; transform:translate3d(3000px, 0, 0);
                }
            60% {opacity:1; transform:translate3d(-25px, 0, 0);
                }
            75% {transform:translate3d(10px, 0, 0);
                }
            90% {transform:translate3d(-5px, 0, 0);
                }
            to {transform:none;
                opacity: 1;
                }
        }

       .bounceInRight{
        opacity: 0;
    }
    .bounceInRight{
        animation-name: bounceInRight;
        animation-duration: 1s;
        animation-fill-mode: both;
        position: relative;
    }
body.home .pageTitle{ 
    display: none;/*don't display page title on homepage*/
}
.adjustBackgroundImage{
	padding-top: 0;
	padding-bottom: 7%;
	background-position: center;
	background-size: unset !important;
}

@media (max-width: 781px){
	.adjustBackgroundImage{
		background-position: center calc(-639px + 11vw);
	}
	.marginBottom{
	    margin-bottom: 50px !important;
	}
}

.marginTopNegative img{
	margin-top: -50px;
}
.borderRadius7px{
	border-radius: 7px;
}
.boxShadow{
	box-shadow: 0px 0px 14px 2px #f3f1f166;
}
.rotate90degrees{
	transform: rotate(90deg);
}
.backgroundGradientGreen{
	background: linear-gradient(91deg, rgba(57, 146, 57, 1) 68%, rgba(60, 127, 60, 0.01) 100%);
}

@media (max-width: 1024px){
	.changeAspectRatioGreenHatsOnMobile img{
		aspect-ratio: 16/9 !important;
		object-fit: cover;
		object-position: 0 -19vw;
		width: 100%;
	}
	.stackGreenHatsOnIpad{
		flex-direction: column;
	}
}

/*HOMEPAGE STYLES END*/

/*INSIDE PAGE STYLES BEGIN*/

/*INSIDE PAGE STYLES END*/

/*BLOG STYLES BEGIN*/

.blogWrapper article{
    border-bottom: 2px solid #959191;
    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 #959393;
    border-radius: 4px;
    display: inline-block;
    min-width: 20px;
}
nav.pagination .page-numbers.current{
    background: #a7a6a6;
    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 #d1cece  solid;
    border-bottom: 1px #d1cece  solid;
    margin-bottom: 20px;
    gap: 20px;
}
.displayFlex.nextPreviousPost .flexItem{
    flex: 1;
    background: #308eaa;
    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: #389239;
    color: white;
	padding-top: 20px;
	padding-bottom: 20px;
}
.footer .fixedWidth.displayFlex .flexItem.footerLogo{
    margin: 0 auto;
}
.footer .fixedWidth.displayFlex .flexItem a {
    color: white;
}
.footer .fixedWidth.displayFlex .flexItem a:hover {
    color:  #cccece;
}

.footer .fixedWidth.displayFlex .flexItem.footerLogo img.footerLogoImage{
    max-width: 300px;
}
.footer .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.footerLogo{
            margin: 15px auto;
        }
    }

/*FOOTER STYLES END*/