@charset "utf-8";
/* CSS Document */
* {
	box-sizing: border-box;
}
h1 {
	font-weight: bold;
	font-size: 32px;
	line-height: 40px;
}
h2 {
	font-weight: bold;
	font-size: 24px;
	line-height: 32px;
}
p, li {
	color: #45464D;
	font-size: 18px;
	line-height: 28px;
	margin: 10px 0;
}
a {
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	color: #0F172A;
}
body {
	margin: 0;
	font-size: 0;
	background-color: #F8FAFC;
	color: #0F172A;
	font-family: "Inter", sans-serif;
}
.wrapper {
	padding: 0 5%;
	margin: auto;
	max-width: 1360px;
}
.container {
	display: inline-block;
	width: 50%;
	align-content: center;
	vertical-align: middle;
}
.container:nth-of-type(1) {
	padding-right: 1%;
}
.container:nth-of-type(2) {
	padding-left: 1%;
}
.mobile-show-1, .mobile-show-2 {
	display: none;
}
.blue-background {
	background-color: #0058BE;
	color: #F8FAFC;
}
.grey-background {
	color: #45464D;
	background-color: #ECEEF0;
}
.white-background {
	background-color: #F8FAFC;
	color: #45464D; 
	border: 1px solid #45464D;
}
.black-background {
	color: #F8FAFC;
	background-color: #0F172A;
}
header {
	position: fixed;
	display: flex;  
	justify-content: space-between;
	align-items: center;  
	top: 0;
	width: 100%;
	border-bottom: 1px solid #C6C6CD;
	background-color: #F8FAFC;
	z-index: 1;
}
.logo {
	font-size: 28px;
	line-height: 28px;
	margin: 20px 40px;
	letter-spacing: 1%;
}
.logo span {
	font-weight: bold;
}
.header-link {
	font-size: 16px;
	line-height: 22px;
	color: #45464D;
	font-weight: 300;
	margin: 0 24px;
	white-space: nowrap;
}
.black-button {
	color: #F8FAFC;
	background-color: #0F172A;
	padding: 14px 24px;
	border-radius: 4px;
	margin-right: 40px;
}
#intro {
	padding-top: 196px;
	padding-bottom: 128px;
}
.intro-badge {
	background-color: #D8E2FF;
	font-size: 16px;
	line-height: 24px;
	padding: 4px 12px;
	border-radius: 12px;
	display: inline-block;
}
.intro-badge span {
	vertical-align: middle;
}
.badge-icon {  
	height: 14px;
    vertical-align: middle;
}
.big-badge-icon {  
	height: 20px;
    vertical-align: middle;
}
#intro h1 {
	font-size: 56px;
	line-height: 64px;
	letter-spacing: -1%;
}
#intro h1 span {
	color: #0058BE;
}
.blue-text {
	color: #0058BE;
	font-size: 16px;
	font-style: italic;
	margin: 48px 0;
}
.button-row {
	white-space: nowrap;
	margin-top: 40px;
}
.large-image {
	filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.25)); 
	width: 100%;
}
#intro a{
	margin-right: 16px;
}
#intro a, #learn-more a{
	font-size: 16px;
	border-radius: 8px;
	padding: 16px 48px;
}
#intro a span, #intro a img { 
	vertical-align: middle;
}
#audience {
	/* color: #76777D; */
	background-color: #FEFCFF;
	border-bottom: 1px solid #C6C6CD;
	border-top: 1px solid #C6C6CD;
	text-align: center;
	padding: 24px 0;
}
.button-icon {
	height: 1em;
	width: 1em;
	margin: 0 .2em;
}
#audience h1 {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 10%;
}
.audience-group {
	display: inline-block;
	margin: 0 32px;
}
.audience-group span {
	font-size: 16px;
	font-weight: bold;
}
.audience-group span, .audience-group img {
	vertical-align: middle;
}
.audience-icon {
	height: 25px;
	width: 25px;
	margin-right: 8px;
}
.heading-container {
	text-align: center;
	max-width: 680px;
	margin: 60px auto;
}
.heading-container p {
	font-size: 16px;
	line-height: 24px;
}
#research .large-image {
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25)); 
}
.research-badge {
	padding: 2px 8px;
	border-radius: 2px;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 10%;
	display: inline-block;
	text-transform: uppercase;
	font-weight: bold;
}
.research-topic, .contact-section {
	border-radius: 8px;
	border: 1px solid #C6C6CD;
	overflow: hidden;
	margin-bottom: 60px;
	display: flex;
	align-items: stretch;
}
.research-topic:nth-child(odd) {
	direction: rtl;
}
.research-topic .container {
	direction: ltr;
}
#research .container {
	padding: 4%;
}
#research .container:nth-of-type(1) {
	background-color: #FEFCFF;
	width: 52%;
}
#research .container:nth-of-type(2) {
	width: 48%;
}
#research p, #research span {
	font-size: 16px;
	line-height: 24px;
}
.research-row span {
	vertical-align: middle;
}
#research .badge-icon, #research .big-badge-icon {
	margin-right: 10px;
}
#research p:last-of-type {
	margin-bottom: 32px;
}
#callout {
	background-color: #131B2E;
	text-align: center;
}
.callout-container {
	display: flex;
    justify-content: space-evenly;
	padding: 48px 0;
}
.callout-group {
	margin: 0 1%;
}
.callout-group:first-of-type {
	margin-left: 0;
}
.callout-group:last-of-type {
	margin-right: 0;
}
.callout-data {
	color: #0058BE;
	font-size: 48px;
	line-height: 60px;
}
.callout-label {
	color: #76777D;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
}
#contact {
	padding-top: 60px;
}
.contact-section {
	width: 100%;
	max-width: 680px;
	margin: 60px auto;
	background-color: #FEFCFF;
}
form{
	display: inline-block;
	padding: 3%;
	width: 100%;
}
form div {
	position: relative;
	overflow: hidden;
	margin: 20px 0;
}
label{ 
	transition: font-size 0.2s;
	position: absolute;
	top: 10px;
	left: 12px;
	color: #45464D;
	font-size: 16px;
	letter-spacing:1px;
}
input[type="text"], input[type="email"], textarea{
	color: #45464D;
	background-color: #ECEEF0;
	width: 100%;
	border: 1px solid #C6C6CD;
	border-radius: 4px;
	font-size: 16px;
	line-height: 28px;
	padding: 22px 0 0 10px;
	font-family: "Inter", sans-serif;;
}
input:focus, textarea:focus {
	border-bottom: 2px solid #8B8B8B;
	outline: none;
}
input:focus + label, textarea:focus + label {
	font-size: 12px;
}
input:valid + label, textarea:valid + label {
	font-size: 12px;
}
input[type="text"], input[type="email"] {
	height: 64px;
}
textarea {
	height: 150px;
	resize: none;
}
#contact-form button {
	color: #F8FAFC;
	font-size: 16px;
	padding: 15px 30px;
	background-color: #0058BE;;
	border: 1px solid #0058BE;
	border-radius: 8px;
	font-family: 'Open Sans', sans-serif;  
	width: 100%;
	cursor: pointer;
}
#thank-you-message {
	font-size: 32px;
	text-align: center;
	margin-bottom: 48px;
	display: none;
}
#learn-more {
	background-color: #FEFCFF;
	border-bottom: 1px solid #C6C6CD;
	border-top: 1px solid #C6C6CD;
	padding: 60px 0;
}
#learn-more h1 {
	font-size: 40px;
	line-height: 50px;
	font-weight: 400;
}
#learn-more span {
	color: #0058BE;
}
#learn-more .heading-container {
	margin: auto;
}
footer {
	display: flex;  
	justify-content: space-between;
	align-items: center;  
	border-top: 1px solid #C6C6CD;
	background-color: #F8FAFC;
}
.footer-container {
	margin: 20px 40px;
}
footer .logo {
	margin: auto;
}
.footer-link {
	font-size: 14px;
	color: #45464D;
	font-weight: 300;
	margin: 0 24px;
    white-space: nowrap;
}
.footer-text {
	font-size: 14px;
	margin-top: 12px;
}
@media (max-width: 880px) {
	.mobile-show-1 {
		display: block;
	}
	.mobile-hide-1 {
		display: none;
	}
	.research-topic {
		display: inline-flex;
		flex-direction: column-reverse;
	}
	.container {
		width: 100%;
	}
	.header-link {
		display: none;
	}
	.header-link:last-of-type {
		display: inline-block;
		margin: 0 20px 0 0;
	}
	.logo {
		margin: 20px;
	}
	#intro {
		padding-top: 96px;
		padding-bottom: 96px;
	}
	#audience h1 {
		font-size: 14px;
		line-height: 22px;
	}
	.audience-icon {
		height: 14px;
		margin-right: 0;
	}
	.audience-group {
		margin: 12px 16px;
	}
	.audience-group span {
		font-size: 14px;
	}
	#research .container:nth-of-type(n) {
		width: 100%;
	}
	.large-image {
		margin-bottom: 48px;
	}
	.button-row {
		white-space: normal;
	}
	.button-row a {
		white-space: nowrap;
	}
	.callout-container {
		padding: 32px 0;
	}
	.callout-data {
		font-size: 32px;
	}
	.callout-label { 
		font-size: 12px;
		line-height: 18px;
	}
	#contact {
		padding-top: 0;
	}
	.footer-link {
		display: block;
	}
	.black-button {
		margin-right: 0;
	}
	#intro a, #learn-more a {
		margin-bottom: 24px;
	}
}
@media(max-width: 680px) {
	.mobile-show-2 {
		display: block;
	}
	.mobile-hide-2 {
		display: none;
	}
	.intro-badge {
		font-size: 12px;
	}
	.badge-icon {
		height: 12px;
	} 
	#intro h1 {
		font-size: 40px;
		line-height: 48px;
	}
	p, li { 
		font-size: 16px;
	}
	.blue-text {
		margin: 24px 0;
	}
	#intro {
		padding-bottom: 36px;
	}
	#audience h1 {
		font-size: 12px;
		line-height: 20px;
	}
	.audience-icon {
		height: 12px;
		margin-right: 0;
	}
	.audience-group {
		margin: 12px 16px;
	}
	.audience-group span {
		font-size: 12px;
	}
	.callout-data {
		font-size: 24px;
	}
	.callout-label { 
		font-size: 10px;
		line-height: 14px;
	}
}