body:not(.site-page-welcome) .banner {
    display: none;
}
/* This code is for the Freedom Theme*/

html {
  font-size: 16px; /* Base font size */
}

a {
/*no underline under links*/
text-decoration-line: none;
}

@media(max-width: 767px) {
    /*h1for smaller screens is 16 x 2=32 px*/
h1 {
        font-size: 2rem; 
        margin-bottom: 2rem;
    }
h2 {
        font-size: 1.875rem;
}
a {
font-size: 1rem;
}
}

@media(max-width: 499px) {
    h1 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
	

h2 {
        font-size: 1.25rem;
}
/* had to make link size smaller because same css applies to inline page text AND item links, problem with too wide line-spacing when links break to new lines--how to fix?*/
a {
font-size: 1rem;
}

.main-banner { 
position:relative;
background-color:#f3f3f3;
margin-bottom:1rem;
overflow-x:clip;
overflow-y:clip

}

@media(max-width: 699px) { 
.main-banner { 
display:none;
}
}

@media(min-width: 700px) { 
.main-banner { 
overflow-y:visible
}
}

.main-banner__image-wrapper { 
display:none;
position:absolute;
width:53%;
left:0;
border-radius:50%;
overflow:hidden;
transform:translateY(-50%);
z-index:1
}

@media(min-width: 700px) { 
.main-banner__image-wrapper { 
display:block
}
}

.main-banner__image-wrapper img { 
position:absolute;
object-fit:cover;
width:100%;
height:50%;
bottom:0;
left:0
}

.main-banner__image-shape { 
position:absolute;
width:90%;
right:-70px;
top:0;
z-index:2;
opacity:.3
}

@media(min-width: 700px) { 
.main-banner__image-shape { 
left:-70px;
right:auto;
width:58%;
opacity:1
}
}

.main-banner__image-shape svg { 
max-width:100%;
max-height:100%;
fill:var(--complementary)
}

.main-banner .height-controller { 
margin-top:100%
}

.main-banner__content { 
width:100%;
padding:40px 40px 40px 80px;
text-align:right;
z-index:3
}

@media(min-width: 700px) { 
.main-banner__content { 
width:47%;
margin-left:53%;
text-align:left
}
}

.main-banner__content>*:last-child { 
margin-bottom:0
}

.main-banner__container { 
display:flex;
height:100%
}

.main-banner__container--left .main-banner__image-wrapper { 
right:0;
left:auto
}

.main-banner__container--left .main-banner__image-shape { 
left:-70px
}

@media(min-width: 700px) { 
.main-banner__container--left .main-banner__image-shape { 
left:auto;
right:-70px
}
}

.main-banner__container--left .main-banner__content { 
padding:40px 80px 40px 40px;
margin-left:0;
text-align:left
}

.main-banner__heading { 
font-size:2.5rem;
line-height:1.16;
margin-bottom:1rem
}