.hero-banner {
    width:100%;
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center top;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-banner .grid-container.content {
    width:1400px;
}

.hero-banner.small {
    height:350px;
}

.hero-banner.medium {
    height:650px;
}

.hero-banner.large {
    height:950px;
}

.hero-message {
    position:relative;
    padding:20px 60px;
}

.hero-message.left {
    width:700px;
}


.hero-message h1 {
    padding:0;
    margin:0;
    font-family: "Inria Serif", serif;
    font-size: clamp(30px, calc(100vw * (60 / 1920)), 60px);
    font-weight: 400;
    color:#322d29;
    position: relative;
    z-index: 10;
    
}

.hero-message.dark h2 {
    padding:0 0 20px;
    margin:0;
    font-family: "Inria Serif", serif;
    font-size: clamp(30px, calc(100vw * (50 / 1920)), 50px);
    font-weight: 400;
    color:white;
    position: relative;
    z-index: 10;
}

.hero-message.dark h2,
.hero-message.dark h3 {
    color:white !important;
}

.hero-message.dark h3 {
	z-index: 10;
	position: relative;
	font-weight: normal;
	margin-bottom: clamp(10px, calc(100vw * (20/1440)), 20px);
}

.hero-message.dark p, 
.hero-message.dark strong {
    color:white;
    position: relative;
    z-index: 10;
    line-height: 2;
}

.hero-message strong {
	color: var(--theme-color-primary);
}

.hero-message.dark strong {
    margin-bottom: 20px;
}

.hero-message h1 strong {
    font-weight: 400;
}

.hero-message::before {
    content:"";
    width:100%;
    height: 100%;
    background-color: rgba(255,255,255,.8);
    position:absolute;
    top:0;
    left:0;
    z-index: 1;
}

.hero-message.dark::before {
     background-color: rgba(15, 41, 47, .8);
}

/*= Responsive Styles
-------------------------------------------------------------- */
@media only screen and (max-width: 1440px) { /* Template Width */
	
}
@media only screen and (max-width: 1023px) { /* Medium Breakpoint */

    .hero-banner.medium {
        height:450px;
    }

    .hero-banner.large {
        height:550px;
    }

}
@media only screen and (max-width: 639px) { /* Small Breakpoint */
	.hero-banner.small {
        height:auto;
        padding:30px 50px;
    }

    .hero-banner.medium {
       height:auto;
        padding:30px 50px;
    }

    .hero-banner.large {
        height:auto;
        padding:50px 50px;
    }

    .hero-message {
        padding:10px;
    }

    .hero-message.dark {
        padding:40px;
    }

}