@charset "UTF-8";
/* CSS Document */


.banner__container {
font-size: 100%;
font-family: gill-sans-nova, sans-serif;
font-weight: 400;
background-color: #E3E3E2;
margin-top: 2.25em;
}
				
.banner__container * {
font-size: 1em;
margin:0;
padding:0;
line-height: 1;
list-style: none;
font-weight: 300;
text-decoration: none;
text-transform: uppercase;
}
		
.banner__banner {
margin-top:2em;
}
	
.banner__banner-text {
display: grid;
gap: 1em;
grid-area: 'bannertext';
padding-bottom: 2em;
text-align: center;
justify-content: center;
align-items: center;
align-content: center;
}
		
.banner__banner-figure {
display: grid;
align-items: center;
justify-content: center;
padding: .5em;
}

.banner__banner-image {
grid-area: bannerimage;
}

.banner__banner-img {
width: 100%;
max-width: 100%;
height: auto;
}
	
.banner__hgroup {
padding-top:2em;
max-height:144px;
color:#5C5355;

}

.banner__h1 { 
font-size:1.8em;	
font-family: gill-sans-nova, sans-serif;
line-height: 1.75;
letter-spacing: 2px;
}

.banner__h2 {
font-size:1.33em;
font-family: gill-sans-nova, sans-serif;
letter-spacing: 2px;
}

.banner__h4 {
font-size: .9em;
letter-spacing: 1px;
line-height: 1.5;
font-family: gill-sans-nova, sans-serif;
font-weight:500;
margin-inline:4em;
}

.banner__p {
font-size: .9em;
line-height: 1.5;
margin: 0;
letter-spacing: 1px;
}

.banner__p em {
	font-size:1em;
	color: #5C5355;
}

.banner__h4 .line-break {
	white-space:nowrap;
}
		


.banner__date {
font-size:2.125em;
display: block;
font-weight:inherit;
line-height: 1.5;
text-transform: none;
color:#5C5355;
}


.banner__cta {
display: grid;
justify-content: center;
align-items: center;
padding: .75em;
}

.banner__cta:link, .banner__cta:visited, .banner__cta:active, .banner__cta:focus {
	background-color: #35343D;
    border: none;
    color: #E3E3E2;
	margin-inline:4.5em;
    font-size: 1.5em;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 500ms;
}

.banner__cta:hover {
transition: background-color 500ms;
color:white;
background-color: #785339;
}
	
	
@media screen and (min-width:550px) {
		
.banner__container {
margin-top:3em;
}
	
.banner__banner-image {
padding-left:0em;
}

.banner__banner-text {
padding-left:0em;
}	
}
	
@media screen and (min-width:720px) {
.banner__banner-img {
width:100%;
}
}
		
@media screen and (min-width:800px) {
.banner__container {
margin-top:2em;
}

.banner__hgroup {
display: grid;
gap:0em;
max-height: 159px;
font-size:.8125em;
}
	
	
.banner__h1 {
line-height: 2;
}
	
.banner__h4 {
margin:0;

}

.banner__banner-img {
width:100%;
}

.banner__banner {
padding-right:2em;
display: grid;
grid-template-columns: 45% 55%;
grid-template-areas: 'bannerimage bannertext';
max-height: 580px;
gap:1em;
overflow: hidden;
}

.banner__banner-text {
max-height: 400px;
gap:0em;
padding-left:0em;
}
	
.banner__date {
padding-block:.5em .25em;
}
	
.banner__shrink-text {
font-size:.8em;
padding-block:.5em .25em;
}

.banner__banner-image {
padding-block:.5em;
padding-left: 1em;  
}
	
.banner__cta {
margin-block:.5em 1em;
}

.banner__cta:link, .banner__cta:active, .banner__cta:focus {
padding: .8em;
}
	
}

@media screen and (min-width:860px) {
	
.banner__container {
margin-top:5em;
}
		
.banner__banner {
padding-inline:2em;
}
	
}
		
@media screen and (min-width:960px) {
	
.banner__container {
margin-top:0em;
}
	
}
		

@media screen and (min-width:1024px) {	
	
.banner__banner {
padding-inline:8%;
}

.banner__container {
display: grid;
align-content: center;
}

}



@media screen and (min-width:1100px) {
		
.banner__banner-img {
width: 100%;
}
	
.banner__banner-image {
padding-top: 0em;
}
	


.banner__banner {
grid-template-columns: 45% 55%;
gap: 1em;
padding-inline: 6em;
margin-top: 1em;
}

.banner__hgroup {
font-size: 1em;
}
	
.banner__shrink-text {
font-size: 1em;
}
	
}



@media screen and (min-width:1240px) {
	
	
	    .banner__date {
        padding-block: .25em .25em;
    }
	
	
	    .banner__cta:link, .banner__cta:active, .banner__cta:focus {
        padding: .5em;
    }
	
	    .banner__h1 {
        line-height: 1.5;
    }
	
	
	
    .banner__banner {
        grid-template-columns: 45% 55%;
        gap: 3em;
        padding-inline: 12em;
    }

.banner__banner-text {
padding-top:.5em;
}

}


@media screen and (min-width:1400px) {
    .banner__hgroup {
        font-size: 1.25em;
    }
	
	.banner__shrink-text {
		font-size: 1.125em;
	}
	
	    .banner__banner-text {
        padding-top: 4em;
    }
}