/* F1 - Hero Style 1
....................................................................... */
.block_hero.block_hero1 {
background-size: cover;
padding: 50px 0 0 0;
margin-bottom: 50px !important; /* Approx overflow of artwork */
}
.block_hero.block_hero1:before {
z-index: 12;
}
.block_hero.block_hero1 .text {
text-align: center;
margin: 0 0 50px 0;
}
.block_hero.block_hero1 .image {
position: relative;
width: 90%;
max-width: 500px;
margin: 0 auto;
z-index: 10;
padding: 0 0 35px 0; /* Gap to top of image */
z-index: 11;
}
.block_hero.block_hero1 .image .hero_image_wrapper {
position: relative;
aspect-ratio: 428/430; /* Same as mask */
overflow: hidden;
}
.block_hero.block_hero1 .image .hero_image_wrapper img {
display: block;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
mask-position: center;
-webkit-mask-position: center;
mask-image: url(../../img/hero1_mask.svg);
-webkit-mask-image: url(../../img/hero1_mask.svg);
}
.block_hero.block_hero1 .art {
position: absolute;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
z-index: 10;
overflow: visible;
}
.block_hero.block_hero1 .art1 {
top: 0;
left: 5%;
width: 40%;
height: 46.5%;
background-image: url(../../img/art6.svg);
transform: rotate(-20deg);
z-index: 0;
}
.block_hero.block_hero1 .art2 {
.block_herotop: -3%;
right: 3%;
width: 17%;
height: 17%;
background-image: url(../../img/art17.svg);
transform: rotate(25deg);
}
.block_hero.block_hero1 .art3 {
top: 40%;
right: -7%;
width: 12%;
height: 12%;
background-image: url(../../img/art11.svg);
transform: rotate(45deg);
}
.block_hero.block_hero1 .art4 {
top: 3%;
left: -3%;
width: 15%;
height: 15%;
background-image: url(../../img/art5.svg);
transform: rotate(45deg);
}
.block_hero.block_hero1 .art5 {
bottom: 23%;
left: -15%;
width: 15%;
height: 15%;
background-image: url(../../img/art18.svg);
}
.block_hero.block_hero1 .art6 {
bottom: -8%;
left: 15%;
width: 50%;
height: 50%;
background-image: url(../../img/art8.svg);
transform: rotate(135deg);
z-index: 0;
}

@media screen and (min-width: 1024px) {
	.block_hero.block_hero1 {
	background: #008f85 url(../../img/bg_hero.svg) 50% 50% no-repeat;
	background-size: cover;
	padding: 100px 0 0 0;
	margin-bottom: 50px !important; /* Approx overflow of artwork */
	}
	.block_hero.block_hero1 .hero_wrapper {
	display: flex;
	align-items: center;
	}
	.block_hero.block_hero1 .text {
	flex: 1 1 60%;
	text-align: left;
	padding: 0 0 130px 0;
	}
	.block_hero.block_hero1 .image {
	flex: 1 1 40%;
	margin-bottom: 0;
	}
	.block_hero.block_hero1 .text .text_inner {
	max-width: 500px;
	padding-right: 50px; /* Don't hit any overflowing-x art - adjust each time */
	}
}
@media screen and (min-width: 1650px) {
	.block_hero.block_hero1 .text {
	flex: 1;
	}
	.block_hero.block_hero1 .image {
	flex: none;
	}
}
@media screen and (max-width: 1023px) {
	.block_hero.block_hero.block_hero1:after {
	background-position: 75% 100%;
	}
	.block_hero.block_hero1 .art3,
	.block_hero.block_hero1 .art4,
	.block_hero.block_hero1 .art5 {
	display: none;
	}
}