@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;700&display=swap');

html, body {padding: 0;margin: 0;height: 100%;width: 100%;}

body {font-size: 16px;line-height: 1.5;font-family: "Encode Sans";display: flex;flex-flow: column;}

a {color: inherit;text-decoration: none;}
img {max-width: 100%;height: auto;object-fit: cover;vertical-align: middle;height: inherit;width: inherit;}

p {margin: 0;}

.container {margin:0 auto;max-width: 90%;width: 864px;}
.flex {display: flex;}
.flex-row{flex-direction: row;}
.flex-row.reverse {flex-direction: row-reverse;}
.flex-col{flex-direction: column;}
.flex-col.reverse {flex-direction: column-reverse;}


.flex-1 {flex: 1;}


.flex-nowrap{flex-wrap: nowrap;}
.flex-wrap{flex-wrap: wrap;}

.justify-start{justify-content: flex-start;}
.justify-end{justify-content: flex-end;}
.justify-between{justify-content: space-between;}
.justify-center{justify-content: center;}

.align-i-center {align-items: center;}
.align-i-start {align-items: flex-start;}
.align-i-end {align-items: flex-end;}

.align-s-center {align-self: center;}
.align-s-start {align-self: flex-start;}
.align-s-end {align-self: flex-end;}

.flex-row-2 > * {flex-basis: 48%;}
.flex-row-3 > * {flex-basis: 31%;}

.fs-12 {font-size: 12px;}
.fs-18 {font-size: 18px;}
.fs-20 {font-size: 20px;}
.fs-24 {font-size: 24px;}

.bold {font-weight: 700;}

#header .container,
#footer .container {width: 90%;max-width: 90%;}

#header {padding: 24px 0;}
#header .title {text-transform: uppercase;color: #B44A56;}

#footer .top {padding: 36px 0;background-color: #F0F0F0;}
#footer .top .item {margin-right: 36px;}
#footer .top .item:last-child {margin-right: 0;}
#footer .top .item .title {margin-bottom: 18px;color: #B44A56;}

#footer .bottom {padding: 7px 0;background-color: #555555;color: white;}
#footer .bottom .social a {margin-right: 18px;font-size: 10px;display: flex;flex-flow: column;justify-content: center;align-items: center;border: 1px solid white;width: 16px;height: 16px;}
#footer .bottom .social a:last-child {margin-right: 0;}

.banner {position: relative;}
.banner::before {position: absolute;top:0;left: 0;right: 0;bottom:0;background: transparent;content:"";background: linear-gradient(90deg, rgba(200,76,84,1) 0%, rgba(80,64,96,1) 100%);opacity: 0.25;}
.banner .image img {width: 100%;object-fit: cover;max-height: 55vh;}
.banner .container {position: absolute;top:0;left: 0;right: 0;bottom: 0;}
/*.banner .shape img {width: 100%;}*/
.banner .shape {width: 100%;}
/*.banner .content {position: absolute;top: 20%;left: 18%;right: 28%;}*/
.banner .content {position: absolute;top: 44%;left: 18%;right: 28%;transform: translate(0%, -50%);}

@media only screen and (min-width: 1024px)
{
	#footer {height: 100%;}
	#footer .top {height: calc(100% - 113px);}
}

@media only screen and (max-width: 1023px)
{
	.container {width: 90%;max-width: 90%;}

	.flex-row.responsive {flex-direction: column;}
	.flex-row.responsive.responsive-reverse {flex-direction: column-reverse;}
	.flex-row.responsive > * {flex-basis: unset;}
	.flex-row.responsive.reverse {flex-direction: column-reverse;}

	#footer .top .item {margin-right: 0;margin-bottom: 36px;}
	#footer .top .item:last-child {margin-bottom: 0;}

	#footer .bottom {padding: 7px 0 7px;}
	#footer .copy {order: 3;}
	#footer .social {order: 2;}
	#footer .email {order: 1;flex-basis: 100%;margin-bottom: 7px;text-align: center;}
	.banner .image img {min-height: 481px;}
	.banner .content {position: static;background-image: url(images/shape.svg);background-size: 180vw auto;background-position-x: -30vw;background-position-y: 0;padding: 30px;background-repeat: no-repeat;}
	.banner .shape {display: none;}
	.banner .container {width: 100%;max-width: 100%;}
	#header .logo {max-width: 40%;margin-right: 36px;}

	.fs-24 {font-size: 16px;}
}

@media only screen and (max-width: 400px)
{
	.banner .content {background-image: none;background-color: rgba(255, 255, 255, 0.8);}
}

@media only screen and (max-width: 350px)
{
	.fs-24 {font-size: 14px;}
}