body{
	font-family: 'Noto Sans', sans-serif;
	background: #F8F6F2;
	padding-top: 88px; 
}

.wrapper{
	width: 648px;
	margin:0 auto;
}

.button{
	padding: 8px 16px;
	background: linear-gradient(180deg, #FF9933 0%, #EC702B 100%);
	border-radius: 4px;
	color: #fff;
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
}

.button-centered{
	margin: 24px auto;
	width: 100px;
	display: block;
	text-align: center;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.4px;
}

.button:hover{
	background: linear-gradient(180deg, #FF9933 0%, #EC702B 50%);

}

.header{
 	padding: 16px 0;
 	background: #FCFCFB;
 	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	z-index: 10;
}

.header-wrapper{
	display: flex;
 	justify-content: space-between;
 	align-items: center;	
}

.header-logo{
	height: 56px;
	image-rendering: -moz-crisp-edges;         /* Firefox */
	image-rendering:   -o-crisp-edges;         /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; 
}

.hero{
	background: linear-gradient(180deg, #FF9933 0%, #EC702B 100%);
	position: relative;
	overflow: hidden;
}

.hero-wrapper{
	position: relative;
}

.hero-texture{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(../img/hero-texture-new.png);
	background-repeat: no-repeat;
	/*background-size: contain;*/
	background-size: auto 100%;
	background-position: 50% 50%;
}

.hero-ui{
	height: 100%;
	position: absolute;
	top: 0%;
	left: 100%;
	margin-left: -320px;
	image-rendering: -moz-crisp-edges;         /* Firefox */
	image-rendering:   -o-crisp-edges;         /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; 
}

.hero-content{
	padding: 100px 0;
	width: 50%;
}

.hero-overline{
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 2.5px;
	color: rgba(255,255,255,0.6);
	text-transform: uppercase;
}

.hero-title{
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 500;
	font-size: 44px;
	line-height: 52px;
	color: #FFFFFF;
	margin-top: 4px;
	margin-bottom: 24px;
}

.hero-stats{
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-wrap: wrap;
 	gap: 24px;
}

.hero-stat{
	font-weight: 500;
	font-size: 9px;
	line-height: 12px;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
	text-align: center;
	/*border: 1px solid rgba(255,255,255, 0.4);*/
	border-radius: 4px 4px 4px 4px;
	flex:  1 0 35%;
	text-align: center;
	display: block;
	padding: 16px 8px;
	background: rgba(255,255,255,0.1);
	/*background-image: url(../img/texture-3.png),	linear-gradient(180deg, #58D6CE 0%, #47938E 100%);*/
	background-size: cover;
}


.hero-statNumber{
	display: block;
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: #FFFFFF;
	font-style: normal;
	text-transform: none;
	margin-bottom: 8px;

}

.video-frame{
	display: block;
	width: 100%;
	background: 50% 50% no-repeat;
	background-size: cover;
	border-radius: 4px;
	position: relative;
	margin-bottom: 24px;
}

.video-ratio{
	width: 100%;
	display: block;
}

.video-play{
	height: 32%;
	width: 18%;
	position: absolute;
	top: 34%;
	left: 41%;
	border-radius: 100%;
	background-image: url(../img/video-play.png), linear-gradient(180deg, #FF9933 0%, #EC702B 100%);
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.video-frame:hover .video-play{
	background-image: url(../img/video-play.png), linear-gradient(180deg, #FF9933 0%, #EC702B 50%);
}

.content-wrapper{
	padding: 40px 0 120px;
}

.content-section{
	margin-bottom: 60px;
}

.content-title{
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.6px;
	color: #4A4A4A;
	margin-bottom: 24px;
}

.content-subtitle{
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.4px;
	color: #767676;
	margin-top: 24px;
	margin-bottom: 16px;
}

.content-subsection-title{
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.4px;
	color: #4a4a4a;
	margin-top: 24px;
	margin-bottom: 16px;	
}

.content-paragraph{
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.4px;
	color: #4A4A4A;
	margin-top: 0;
	margin-bottom: 16px;
}

.content-link{
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.4px;
	color: #78C3FB;
	color: #4a4a4a;
	text-decoration: underline;
}

.content-image{
	width: 100%;
	display: block;
	border-radius: 4px;
}

.content-graphics{
	margin: 24px 0;
	display: flex;
	flex-wrap: wrap;
 	gap: 24px;
}

.content-graphic{
	background: rgba(0,0,0,0.1);
	flex: 1 0 30%;
	display: block;
	border-radius: 4px;
}

.content-graphic img{
	width: 100%;
	border-radius: 4px;
}

.content-logo{
	margin: 80px auto 0px;
	display: block;
}

.sign-off{
	text-align: center;
	margin-top: 8px;
}

.stories{
	display: flex;
	flex-wrap: wrap;
 	gap: 24px;
}

.stories-story{
	flex:1 0 30%;
}

.stories-image{
	width: 100%;
	border-radius: 4px;
}

.stories-title{
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.4px;
	color: #4a4a4a;
	margin-top: 8px;
	margin-bottom: 16px;
}

.stories-video{
	margin-bottom: 8px;
}

.values{
  	margin-top: 24px;
  	margin-bottom: 40px;
  	display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.values-value{
	width: 312px;
	border-radius: 4px;
	flex:1 0 45%;
	background: #ddf0ec;
	border-radius: 4px;
	overflow: hidden;
}

.values-title.content-subsection-title{
	margin-top: 0px;
	color: #6b978f;
	margin-bottom: 4px;
}

.values-paragraph{
	color: #767676;
	margin: 0px;
}

.values-content{
	padding: 16px;
}

.values-image{
	display: block;
	width: 100%;
}

.footer{
	background: linear-gradient(180deg, #FF9933 0%, #EC702B 100%);
	position: relative;
}

.footer-wrapper{
	padding: 80px 0;
}

.footer-texture{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(../img/footer-texture.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: 50% 50%;
	pointer-events: none;
}

.footer-columns{
  	display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-column{
	flex: 1 0 45%;
}

.footer-section{
	margin-bottom: 24px;
}

.footer-title{
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.6px;
	color: #fff;
	margin-bottom: 24px;
}

.footer-subtitle{
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: #fff;
	margin-bottom: 16px;
}

.footer p{
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: #fff;
}

.footer-list{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-listItem{
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: #fff;
	margin-bottom: 8px;
}

.footer-listItem a{
	color: #fff;
}

.footer-subtitle a {
	color: #fff;
}

.footer-list img{
	width: 135px;
	display: block;
}

.footer-legal{
	display: block;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	letter-spacing: -0.2px;
	color: rgba(255,255,255,0.8);
	margin-top: 40px;
}

@media screen and (max-width: 728px) {

    .wrapper {
    	width: 90%;
    }

    .hero-ui{
		margin-left: -280px;
    }

    .hero-content{
    	padding: 40px 0;
    }
    .hero-title{
		font-size: 36px;
		line-height: 40px;
    }
}

@media screen and (max-width: 600px) {

	.users, .values, .content-graphics, .stories, .hero-stats{
		gap: 16px;
	}

	.stories-story{
		flex:1 0 45%;
	}

    .content-graphic{
    	flex: 1 0 45%
    }

/*    #office .content-graphic:nth-of-type(n+5){
    	display: none;
    }*/

    .hero{
    	min-width: 380px;
    }

    .hero-content{
    	width: 60%;
    }

    .hero-ui{
		margin-left: -200px;
    }

	.content-title{
		font-size: 20px;
		margin-bottom: 16px;
	}

}

@media screen and (max-width: 500px) {

	body{
		padding-top: 68px; 
	}

	.header-logo{
		height: 36px;
	}

	.header-button{
		font-size: 12px;
	}

	.hero-ui{
		margin-left: -140px;
    }
	.hero-title{
		font-size: 28px;
		line-height: 32px;
	}
 	.hero-content{
    	width: 70%;
    }
}

@media screen and (max-width: 450px) {

	.hero-ui{
		margin-left: -160px;
    }

    .content-section {
	    margin-bottom: 40px;
	}

 	.hero-content{
    	width: 60%;
    }

	.content-subtitle{
		font-size: 16px;
		margin-bottom: 8px;
	}

	.stories-title, .content-subsection-title{
		font-size: 14px;
		margin-bottom: 8px;
	}

	.content-paragraph{
		font-size: 14px;
		margin: 8px 0;
	}

}

@media screen and (max-width: 340px) {

    .header-logo{
		height: 32px;
	}

}