/* A5 - TextMedia
....................................................................... */
.block_textmedia {
position: relative;
padding: 90px 0;
}
.block_textmedia > .center {
width: 90%;
max-width: 1200px;
}
.block_textmedia h2.section_heading {
text-align: center;
margin-bottom: 50px;
}
.textmedia_item {
display: flex;
align-items: center;
}
.textmedia_item .image_col {
flex: 0 0 45%;
}
.textmedia_item .text_col {
flex: 0 0 50%;
}

.block_textmedia.layout-imgright .textmedia_item {
flex-direction: row-reverse;
}
.block_textmedia.layout-imgright .textmedia_item .image_col {
margin: 0 0 0 auto;
}
.block_textmedia.layout-imgleft .textmedia_item .text_col {
margin: 0 0 0 auto;
}

.block_textmedia .image_square {
max-width: 500px;
aspect-ratio: 1/1;
position: relative;
}
.block_textmedia figure.image_col {
margin: 0;
}
.block_textmedia .image_col 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;
transition: all 0.2s;
}
.block_textmedia .image_col img {
mask-image: url(../../img/image-row-item1-mask.svg);
-webkit-mask-image: url(../../img/image-row-item1-mask.svg);
}
.block_textmedia .image_col .art {
position: absolute;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
z-index: 10;
}
.block_textmedia .image_col .art1 {
top: 4%;
right: 3%;
width: 20%;
height: 20%;
background-image: url(../../img/art5.svg);
}
.block_textmedia .image_col .art2 {
top: 6%;
left: 0;
width: 37%;
height: 41%;
background-image: url(../../img/art6.svg);
z-index: 0;
}
.block_textmedia.has-green-background-color,
.block_textmedia.has-green-background-color h1,
.block_textmedia.has-green-background-color h2,
.block_textmedia.has-green-background-color h3,
.block_textmedia.has-green-background-color h4,
.block_textmedia.has-green-background-color h5,
.block_textmedia.has-green-background-color p,
.block_textmedia.has-green-background-color li,
.block_textmedia.has-green-background-color a:not(.cta) {
color: #fff;
}
.block_textmedia.has-green-background-color a:not(.cta):hover {
color: #e6e6e6;
}
.block_textmedia.has-green-background-color a.more_link:after {
background-color: #00a99d;
}

.block_textmedia p {
font-size: 20px;
line-height: 30px;
}
.block_textmedia p:last-child {
margin: 0;
}

.swiper_textmedia {
overflow: hidden;
position: relative;
}
.swiper_textmedia_controls {
display: none;
position: relative;
width: 100%;
text-align: center;
margin: 40px auto 0 auto;
}
.swiper-button-prev.swiper-button-prev-textmedia,
.swiper-button-next.swiper-button-next-textmedia {
display: inline-block;
position: relative;
top: auto;
left: auto;
right: auto;
width: 38px;
height: 38px;
}
.block_textmedia.has-green-background-color .swiper-button-prev {
background: #fff url(../../img/icon_arrow_left.svg) 50% 50% no-repeat;
margin-right: 3px;
}
.block_textmedia.has-green-background-color .swiper-button-next {
background: #fff url(../../img/icon_arrow_right.svg) 50% 50% no-repeat;
margin-left: 3px;
}
.swiper-button-next-textmedia.swiper-button-lock,
.swiper-button-prev-textmedia.swiper-button-lock {
display: none !important;
}

@media screen and (min-width: 768px) {
  .block_textmedia a.more_link + a.more_link {
  margin-left: 20px;
  }
}
@media screen and (max-width: 767px) {
	.block_textmedia {
	padding: 60px 0;
	}
	.textmedia_item {
	flex-wrap: wrap;
	}
	.textmedia_item .image_col {
	flex: 0 0 100%;
	}
	.textmedia_item .text_col {
	flex: 0 0 100%;
	}
	
	.block_textmedia.layout-imgright .textmedia_item {
	flex-direction: column-reverse;
	}
	.block_textmedia.layout-imgright .textmedia_item .image_col {
	padding-top: 30px;
	}
	.block_textmedia.layout-imgleft .textmedia_item .image_col {
	padding-bottom: 30px;
	}

	.block_textmedia .image_square {
	margin: 0 auto;
	width: 90%;
	}
	
	.block_textmedia p.links {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-content: flex-start;
	margin: 0;
	}
	.block_textmedia a.more_link + a.more_link {
	margin-top: 20px;
	}
	
	/* Allow space for controls between img & text on els with multiple slides only */
	.block_textmedia.layout-imgright.has-multiple-slides .textmedia_item .image_col {
	padding-top: 90px;
	}
	.block_textmedia.layout-imgleft.has-multiple-slides .textmedia_item .image_col {
	padding-bottom: 90px;
	}
	.swiper_textmedia_controls {
	width: calc(100vw - 10%);
	}
}