﻿/*body.fp-viewing-values header, body.fp-viewing-ceo header {
	opacity: 0;
	z-index: 0;
}*/
/*body.white-header .site-header {
	background-color: #fff !important;
}*/
.cols {
	display: flex;
	position: relative;
	width: 100%;
	gap: 180rem;
}

.col {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 15rem;
}
.intro {
	background-image: url(../images/about/intro.png);
	background-position:right bottom;
	background-size: cover;
	color: #fff;
}

.mission {
	/*background-image: url(../images/about/mission.jpg);*/
	background-position: left bottom;
	background-size: cover;
	color: #fff;
	justify-content: flex-start;
	padding: 260rem 0 50rem 0;
}

	.mission .text h3 {
		color: #FFF;
		font-size: 40rem;
		font-style: normal;
		font-weight: 300;
		line-height: 125%; /* 50px */
		letter-spacing: -0.8rem;
	}
	.mission .title {
		cursor: pointer;
		transition: height 0.5s ease-in-out;
		color: #979797;
		font-size: 40rem;
		font-style: normal;
		font-weight: 300;
		line-height: 128%;
		letter-spacing: -0.8rem;
		position: relative;
		display: flex;
		align-items: center;
	}
		.mission .title:hover {
	
			filter: brightness(0) saturate(100%) invert(18%) sepia(97%) saturate(5177%) hue-rotate(234deg) brightness(98%) contrast(91%);
		}
		.mission .title.active {
			color: #fff;
		}

	.mission .title::before {
		content: "";
		width: 34rem;
		height: 34rem;
		left: -44rem;
		background-image: url(../images/home/plus-alt.svg);
		background-position: center;
		background-size: cover;
		display: block;
		position: absolute;
	}
		.mission .title.active::before {
			background-image: url(../images/home/minus-alt.svg);
		}

	.mission .right-text {
		font-size: 22rem;
		font-style: normal;
		font-weight: 300;
		line-height: 125%;
		letter-spacing: -0.44rem;
		position:relative;
		margin-left:-44rem;
	}
		.mission .right-text strong {
		
			font-weight: 600;
		}
		.mission a {
			text-decoration: none;
			color: #2348EE;
			font-weight: 600;
		}
	.mission h2 {
		margin: 0;
	}

.mission .fp-overflow{
	position: relative;
	height: 100%;
}
	.mission	.cols{
		height:100%;
	}
.mission .items {
	height: 100%;
	flex: 1;
}
	.mission .txt{
		display:none;
		margin-top:20rem;
		margin-bottom:20rem;
	}
	.mission .txt p {
		font-size: 20rem;
		font-style: normal;
		font-weight: 300;
		line-height: 110%;
		letter-spacing: -0.4rem;

	}
.mission .txt a {
	text-decoration: none;
	color: #2348EE;
	font-weight: 600;
}
.values{
	padding-top:70rem;
	/*background-image:url(../images/about/CoreValues2.png);*/
}

.values .intro-text{
	text-align:center;
	max-width:690rem;
}

.values .image img{
	display:block;
	width:100%;
	height:auto;
	object-fit:cover;
}
	.values .item .title {
		color: #979797;
		font-size: 40rem;
		font-style: normal;
		font-weight: 300;
		line-height: 128%; /* 51.2px */
		letter-spacing: -0.8rem;
		position:relative;
		display:flex;
		align-items:center;
		cursor:pointer;
	}
		.values .item .title:hover{
			filter:brightness(0.25);
		}
		
		.values h2 {
			margin-bottom: 20rem;
		}

	.values .item .title.active {
		color: #2348EE;
	}
		.values .item .title::before {
			content: "";
			width: 34rem;
			height: 34rem;
			left: -44rem;
			background-image: url(../images/home/plus-alt.svg);
			background-position: center;
			background-size: cover;
			display: block;
			position: absolute;
		}

		.values .item .title.active::before {
			background-image: url(../images/minus.svg);
		}

	.values .items .text {
		position: relative;
		display: none;
		
	}
		.values .items .text p,
		.values .items .text li {
			color: #0D1641;
			font-size: 20rem;
			font-style: normal;
			font-weight: 200;
			line-height: 100%; /* 20px */
			margin:	10rem 0;

		}
		.values .items .text ul {
			margin: 0;
			padding: 0;
			padding-left: 0px;
			padding-left: 22rem;
		}
		.values .items {
			gap: 20rem;
		}
		.values .image {
			min-width:552rem;
			width:40%;
		}
.ceo {
	position: relative;
/*	background-image: url(../images/about/MessageFromCeo2.png);*/
}
.values::after,.ceo::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(/wp-content/themes/metis/images/about/M.png);
	top: 0;
	left: 0;
	z-index: 1;
	background-position: 47vw 120rem;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
	opacity:0.5;
}
	.ceo::after {
		background-position: left 150rem;
	}
	.ceo .image {
		padding-top: 80rem;
	}
		.ceo .image img {
			display: block;
			width: auto;
			height: calc(100% - 100rem);
			object-fit: contain;
			position: absolute;
			bottom: 0;
		}
.ceo .col.text{
	min-width:770rem;
	justify-content:center;
	gap:0;
	padding-top:150rem;
}

	.ceo  .fp-overflow {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.ceo .cols{
		height:100%;
	}
	.ceo h2{
		margin:0 0 20rem 0;
	}
	.ceo p{
		margin:20rem 0;
	}
	.ceo h5 {
		margin: 10rem 0;
		color: #2348EE;
		font-size:25rem;
	}
	.ceo h6 {
		margin: 0;
		font-size: 20rem;
		font-weight:400;
	}



@media screen and (orientation: portrait) {
	body {
		font-size: max(36rem,13px);
	}
	p {
		font-size: 50rem;
	}
	.cols {
		flex-direction: column;
		gap: 80rem;
	}

	.col {
		width: 100%;
	}
	.intro {
		background-image: url(../images/about/intro-mobile.png);
		background-position: center bottom;
		justify-content: flex-start;
		padding-top: 25vh;
	}
	.mission {
		background-image: url(../images/about/mission-mobile.jpg);
		background-position: center bottom;
		padding-top:150rem;
	}
	
	.mission .text h3 {
		font-size: 62rem;
	}
	.mission .items{
		padding-left:44rem;
	}
	.mission .title {
		font-size: 54rem;
		margin-bottom:10px;
		margin-top:10px;
	}
		.mission .txt {
			margin-bottom: 10px;
			margin-top: 10px;
		}
		.mission .txt p {
			font-size: 48rem;
		}
		.mission .col{
			gap:0;
		}

	.values::after, .ceo::after {
		display:none;
	}
	.values {
		padding-top: 150rem;
		background-image: url(../images/about/CoreValuesMob.png);
		background-position: center bottom;
	}
	.values .image {
		order: 1;
		height: 60vw;
		overflow:hidden;
		width:100%;
	}
	.values .items {
		padding-left: 44rem;
		gap:0;
	}
	.values .item .title {
		font-size: 60rem;
		margin-top:10px;
		margin-bottom:10px;
	}
			.values .items .text p, .values .items .text li {

				font-size: max(36rem,13px);
			}
		
			.ceo p {
				font-size: max(34rem,13px);
			}
	.ceo {
		padding-top: 150rem;
		background-image: url(../images/about/MessageFromCeoMob.png);
		background-position: center bottom;
	}
		.ceo .cols {
			gap: 0;
		}
		.ceo .image {
			padding-top: 0;
			padding-left: 0;
			position: relative;
			height: 100%;
			order:1;
		/*	z-index: -1;
			opacity: 0.25;*/
		}

		.ceo .col.text{
			padding-top:0;
			order:0;
		}
			.ceo .image img {
				width: auto;
				height: 100%;
				margin-right: 0;
				right: 0;
			}
	.ceo h5 {

		font-size: 42rem;
	}
	.ceo h6 {
		font-size: 34rem;
	}
	

}