/* ====================== about-banner ====================== */

.about-banner{
	min-height: 300px;
	background-color: #051d31;
	/*background-image: url(../../images/pages/about-us/banner.jpg);*/
	background-position: center bottom;
	text-align: left;
}
.about-banner .container{
	position: relative;
}
.about-banner .text{
	max-width: 750px;
}
.about-banner p{
	text-align: left;
	font-size: 20px;
}
.about-banner .video-container{
	position: absolute;
	top: calc(50% - 90px);
	left: calc(50% + 400px);
}
.about-banner a.video{
	display: inline-block;
	background: url(../../images/pages/general/icons/play-borders.svg?v=4) no-repeat center top;
	background-size: 136px auto;
	min-width: 136px;
	padding-top: 134px;
	text-decoration: none;
	text-transform: uppercase;
}
.about-banner .video .video-title{
	position: relative;
	display: block;
	margin-top: 8px;
	background: #3279F6;
	border-radius: 5px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	text-decoration: none;
	padding: 4px 13px;
	text-align: center;
}
.about-banner .video:hover .video-title{
	background-color: #0a60f5;
}
.about-banner .video .video-title:before{
	position: absolute;
	content: '';
	margin-top: -14px;
	left: calc(50% - 8px);
	border-bottom: 10px solid #3279F6;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}
@media screen and (max-width: 1230px) {
	.about-banner .text{
		max-width: none;
	}
	.about-banner .video-container{
		position: relative;
		top: unset;
		left: 0;
		text-align: center;
	}
}
@media screen and (max-width: 500px) {
	.about-banner p {
		font-size: 18px;
	}
	.about-banner .video-container{
		transform: scale(0.8);
		transform-origin: top;
	}
	.about-banner .container{
		padding-bottom: 0;
	}
}

/* ====================== about-text ====================== */

.about-text{
	overflow: auto;
	font-size: 20px;
}
.about-text.who{
	background-color: white;
}
.about-text.what{
	background-color: #F5F8FD;
}
.about-text.how{
	background-color: white;
}

.about-text .container{
	padding-top: 50px;
	padding-bottom: 30px;
}
.about-text h2{
	margin: 15px 0;
	clear: none;
	font-size: 50px;
	font-size: clamp(40px, 4vw, 50px);
	color: #2256B1;
}
.about-text.who h2{
	text-align: center;
}
.about-text.what h2{
	margin-top: 70px;
}
.about-text.how h2{
	text-align: center;
}
.about-text h3{
	margin: 10px 0;
	clear: none;
	color: #3279F6;
	font-size: 30px;
	font-weight: normal;
}
.about-text.who h3{
	text-align: center;
}
.about-text.how h3{
	text-align: center;
}
.about-text .button{
	border-radius: 5px;
	font-size: 24px;
}
.about-text .clouds{
	position: relative;
	background: url(../../images/pages/about-us/icons-cloud.svg) no-repeat center center;
	background-size: cover;
	min-height: 355px;
	margin: 35px 0 0 0;
	padding-top: 54px;
}
.about-text .clouds:before{
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	top: 0;
	height: 20px;
	background: linear-gradient(0deg, transparent, white 100%);
}
.about-text .clouds:after{
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	bottom: 0;
	height: 20px;
	background: linear-gradient(0deg, white, transparent 100%);
}
.about-text.who .media{
	float: right;
	margin: 24px 0 20px 20px;
}
.about-text.what .media{
	float: left;
	margin: 0 50px 40px 0;
}
.about-text.how .media {
	float: right;
	margin: 20px 0 50px 100px;
}
.about-text ul{
	margin: 20px 0;
}
.about-text.how li{
	margin: 30px 0;
}
.about-text.how h4{
	color: #2256B1;
	font-size: 24px;
}

figure.alignleft{
	float: left;
	margin: 0 30px 20px 0;
}
figure.alignright{
	float: right;
	margin: 0 0 20px 30px;
}
figure.alignleft figure,
figure.alignright figure{
	overflow: hidden;
	border: 1px solid #ccc;
	margin: 10px 0;
}
figure.alignleft a,
figure.alignright a{
	margin: -64px -1px;
}
@media screen and (max-width: 1230px) {
	.about-text.who .media{
		display: none;
	}
	.about-text.what h2{
		margin-top: 0;
	}
	.about-text.how .media{
		display: none;
	}
}
@media screen and (max-width: 500px) {
	.about-text{
		font-size: 18px;
	}
	.about-text .container{
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

/* ====================== about-affiliate ====================== */

.about-affiliate {
	min-height: 441px;
}
.about-affiliate .text{
	max-width: 700px;
	margin-left: auto;
	text-align: left;
}
.about-affiliate .container:after{
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(../../images/pages/about-us/affiliate.svg?v=2) no-repeat right center;
	background-position: calc(50% - 400px) 95%;
	z-index: -1;
}
.about-affiliate .button{
	background-color: #4dae1d !important;
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 24px;
}
.about-affiliate .button.more:after {
	filter: brightness(0) grayscale(1) invert(1);
}
@media screen and (max-width: 1230px) {
	.about-affiliate .text{
		max-width: 500px;
	}
}
@media screen and (max-width: 910px) {
	.about-affiliate {
		min-height: 260px;
	}
	.about-affiliate .text{
		max-width: none;
	}
	.about-affiliate .container:after{
		display: none;
	}
}
@media screen and (max-width: 500px) {
	.about-affiliate .button{
		padding: 15px 15px;
		font-size: 20px;
	}
	.about-affiliate .button.more:after {

	}
}

/* ====================== about-map ====================== */

.about-map{
	background-color: white;
}
.about-map h2{
	font-size: 42px;
	text-align: center;
	margin-top: 30px;
}
.about-map .iframe-container{
	position: relative;
	border-top: 3px solid #dfe7f6;
}