﻿/******************************************************************/
header{
	background-color:transparent;
	box-shadow:none;
}

.scroll header{
	height:80px;
	padding:14px 0 0 0;
	background:rgba(255, 255, 255, 1);
	box-shadow:0 6px 6px rgba(0, 0, 0, 0.2);
}

/**************************************************************/
.banner{
	position:relative;
	height:650px;
	height:100vh;
	width:100%;
	overflow:hidden;
	background:#fff no-repeat center top;
	background-size:cover;
}

#banner-video-overlay{
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	overflow:hidden;
	z-index:2;
}

#banner-video-box{
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	min-height:100vh;
	padding-top:56%;
	overflow:hidden;
	z-index:1;
}

#banner-video-player{
	position:absolute;
	left:-50px;
	top:-50px;
	width:calc(100% + 100px);
	height:calc(100% + 100px);

	z-index:1;
	opacity:0;
	transition:opacity 0.3s ease;
}

#banner-video-player.visible{
	opacity:1;
}

.banner .grid{
	height:100vh;
}

.banner .grid:before{
	display:none;
}

.banner .shape{
	position:absolute;
	top:0;
	right:550px;
	z-index:2;
	width:830px;
	height:2000px;

	background-color:#30a3fa;
	opacity:0.7;
	transform:skewX(-29deg);
}

.we-empower{
	position:absolute;
	left:250px;
	top:241px;
	width:650px;
	z-index:3;
}

.we-empower:before{
	content:"";
	display:block;
	width:62px;
	height:5px;
	margin:0 0 49px 60px;
	background-color:#fff;
}

.we-empower h2{
	color:#fff;
	font-size:40px;
	line-height:40px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.4px;
	padding:0 0 30px 30px;
}

.rw-words{
	color:#10253f;
	font-size:40px;
	line-height:40px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.4px;
	white-space:nowrap;

	display:inline;
}

.rw-words span{
	position:absolute;
	opacity:0;
	overflow:hidden;
	width:100%;
	color:#10253f;
}

.banner.playing .rw-words-1 span{
	animation:rotateWordsSecond 20s linear infinite 0s;
}

.banner.playing .rw-words span:nth-child(2){
	animation-delay:4s;
}

.banner.playing .rw-words span:nth-child(3){
	animation-delay:8s;
}

.banner.playing .rw-words span:nth-child(4){
	animation-delay:12s;
}

.banner.playing .rw-words span:nth-child(5){
	animation-delay:16s;
}

/*.rw-words span:nth-child(6){*/
	/*animation-delay:15s;*/
/*}*/

/*@keyframes rotateWordsFirst{*/
	/*0%{ opacity:1; animation-timing-function:ease-in; height:0px; }*/
	/*8%{ opacity:1; height:60px; }*/
	/*19%{ opacity:1; height:60px; }*/
	/*25%{ opacity:0; height:60px; }*/
	/*100%{ opacity:0; }*/
/*}*/

@keyframes rotateWordsSecond{
	0%{ opacity:0; animation-timing-function:ease-in; width:0px; }
	3%{ opacity:1; width:650px; }
	18%{ opacity:1; width:650px; }
	20%{ opacity:0; width:650px; }
	100%{ opacity:0; }
}


.banner .scroll-down{
	position:absolute;
	right:0;
	bottom:0;
	z-index:3;
	width:47px;
	height:47px;
	cursor:pointer;
	background:#10253f url(../images/arrow2.png) no-repeat center center;
	transition:all 0.2s ease;
	transform:rotate(180deg);
}

.no-touch .banner .scroll-down:focus,
.no-touch .banner .scroll-down:hover{
	background-color:#4ebdfc;
}


/**************************************************************/
.about{
	font-size:0;
	line-height:0;
	padding:70px 0 65px 0;
	background-color:#fff;
}

/**************************************************************/
.portfolio{
	font-size:0;
	line-height:0;

	position:relative;
	height:793px;
	overflow:hidden;
	padding:52px 0 102px 0;
	background-color:#fafafa;
}

.portfolio:before{
	content:"";
	position:absolute;
	top:0;
	z-index:1;
	left:calc(50vw + 250px);
	width:100%;
	height:100%;
	background-color:#eaeaea;
	transform:skewX(-30deg);
}

.portfolio .grid{
	z-index:2;
}

.portfolio .companies{
	position:relative;
	padding:55px 0 41px 0;
	border-bottom:2px solid #e2e1e1;
}

.portfolio .companies .owl-item:last-of-type .item{
	margin:0;
}

.portfolio .owl-nav{
	position:absolute;
	top:-60px;
	right:0;
}

.portfolio .owl-nav .owl-prev,
.portfolio .owl-nav .owl-next{
	display:inline-block;
	vertical-align:top;
	width:47px;
	height:47px;
	margin:0 0 0 10px;
	background:#172c49 url(../images/arrow1.png) no-repeat center;

	transition:all 0.2s ease;
}

.portfolio .owl-nav .owl-prev{
	transform:rotate(180deg);
}

.no-touch.portfolio .owl-nav .owl-prev:hover,
.no-touch.portfolio .owl-nav .owl-next:hover{
	background-color:#4ebdfc;
}

/**************************************************************/
.portfolio .stats{
	padding:29px 0 0 0;
}

.portfolio .stats h2{
	font-size:30px;
	line-height:40px;
	font-weight:400;
	margin:0 0 27px 0;
}

.portfolio .stats .boxes{
	padding:0;
	margin:0;
}

.portfolio .stats .boxes .box{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:292px;
	height:160px;
	padding:0;
	margin:0 10px 0 0;
	overflow:hidden;

	-webkit-perspective:600px;
	-moz-perspective:600px;
}

.portfolio .stats .boxes .box:nth-of-type(4n){
	margin:0;
}

/*************/
.portfolio .stats .curr{
	height:inherit;
	position:absolute;
	top:0;
	z-index:900;
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	-moz-transform:rotateX(0deg) rotateY(0deg);
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-ms-transition:all 1s ease-in-out;
	-o-transition:all 1s ease-in-out;
	transition:all 1s ease-in-out;
}

.portfolio .stats .new{
	height:inherit;
	position:absolute;
	top:0;
	z-index:1000;
	-webkit-transform:rotateX(-180deg);
	-moz-transform:rotateX(-180deg);
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-ms-transition:all 1s ease-in-out;
	-o-transition:all 1s ease-in-out;
	transition:all 1s ease-in-out;
}

.portfolio .stats .flip .curr{
	-webkit-transform:rotateX(180deg);
	-moz-transform:rotateX(180deg);
}

.portfolio .stats .flip .new{
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	-moz-transform:rotateX(0deg) rotateY(0deg);
}

/*************/
.portfolio .stats .item{
	display:inline-block;
	vertical-align:top;
	width:292px;
	height:160px;
	padding:20px 20px 0 26px;
	margin:0;
	background-color:#172c49;
}

.portfolio .stats .item .number{
	color:#fff;
	font-size:72px;
	line-height:60px;
	font-weight:400;
	text-transform:uppercase;
	margin:0 0 10px 0;
	opacity:0.92;
}

.portfolio .stats .item .label{
	color:#00baff;
	font-size:21px;
	line-height:28px;
	font-weight:400;
	text-transform:uppercase;
}

.portfolio .stats .store{
	display:none;
}

.portfolio .read-all{
	text-align:right;
	padding:25px 0 0 0;
}

.portfolio .read-all a{
	color:#121a55;
	font-size:16px;
	line-height:18px;
	font-weight:400;
	text-transform:uppercase;
	text-decoration:none;
}

/**************************************************************/
.people{
	font-size:0;
	line-height:0;
	position:relative;
	height:694px;
	overflow:hidden;
	padding:78px 0 0 0;
	background-size:auto 100%;
}

.people h2{
	color:#e0e3e6;
}

.people h2.line:after{
	background-color:#e0e3e6;
}

.people .bolded-text{
	color:#00baff;
	font-size:40px;
}

.people .full-text{
	color:#f1f1f1;
	margin:14px 0 55px 0;
}

.people .slider{
	height:50vw;
}

/****************/
.people .owl-item:last-of-type .people-item{
	margin:0;
}

/****************/
.people .owl-nav{
}

.people .owl-nav .owl-prev,
.people .owl-nav .owl-next{
	position:absolute;
	top:123px;
	right:0;
	display:inline-block;
	vertical-align:top;
	width:47px;
	height:47px;
	margin:0;
	background:#172c49 url(../images/arrow1.png) no-repeat center;
	transition:all 0.2s ease;
}

.people .owl-nav .owl-prev{
	left:0;
	transform:rotate(180deg);
}

.no-touch .people .owl-nav .owl-prev:hover,
.no-touch .people .owl-nav .owl-next:hover{
	background-color:#4ebdfc;
}

/****************/
.people .read-all{
	text-align:right;
	padding:25px 0 0 0;
}

.people .read-all a{
	color:#fff;
	font-size:18px;
	line-height:18px;
	font-weight:400;
	text-transform:uppercase;
	text-decoration:none;
}

/**************************************************************/
.insights{
	font-size:0;
	line-height:0;
	position:relative;
	padding:68px 0 70px 0;
	background-color:#ededed;
}

.insights h2{
	margin:0 0 58px 0;
}

/*************************************************************/
.thoughts-item{
	margin-bottom:55px;
}

/*************************************************************/
.news-item{
	display:inline-block;
	vertical-align:top;
	width:595px;
	margin:0 10px 77px 0;
}

.news-item:nth-of-type(2n){
	margin:0 0 77px 0;
}

.news-item .date{
	display:inline-block;
	vertical-align:top;
	height:104px;
	width:104px;
	text-align:center;
	padding:18px 0 0 0;
	margin:0 25px 0 0;
	overflow:hidden;
	background-color:#4ebdfc;
}

.news-item:nth-of-type(2n) .date{
	background-color:#172e4c;
}

.news-item .date .day{
	color:#f1faff;
	font-size:60px;
	line-height:45px;
	font-weight:400;
}

.news-item .date .month{
	color:#fff;
	font-size:21px;
	line-height:20px;
	font-weight:bold;
	text-transform:uppercase;
	margin:12px 0 0 0;
}

.news-item .body{
	color:#000;
	font-size:21px;
	line-height:36px;
	font-weight:400;

	position:relative;
	display:inline-block;
	vertical-align:top;
	width:466px;
}

.news-item .body h3{
	color:#000;
	font-size:30px;
	line-height:36px;
	font-weight:400;
	text-transform:uppercase;

	position:relative;
	top:-5px;
	min-height:58px;
	margin:0 0 15px 0;
}

.news-item .body h3 a{
	color:#000;
	text-decoration:none;
}

.news-item .body .publisher{
	color:#00baff;
	font-size:18px;
	line-height:18px;
	font-weight:700;
	text-transform:uppercase;

	margin:0 0 25px 0;
}

.news-item:nth-of-type(2n) .publisher{
	color:#242b5f;
 }

.news-item .body .desc{
	color:#000;
	font-size:21px;
	line-height:32px;
	font-weight:400;
}

/******************************************************************/
@media only screen and (max-width:768px){

	header,
	.scroll header{
		height:50px;
		padding:9px 0 0 10px;
	}

	@keyframes rotateWordsSecond{
		0%{ opacity:0; animation-timing-function:ease-in; width:100%; }
		3%{ opacity:1; width:100%; }
		18%{ opacity:1; width:100%; }
		20%{ opacity:0; width:100%; }
		100%{ opacity:0; width:100%;}
	}

	/**************************************************************/
	.banner{
		height:370px;
		background-size:auto 370px;
	}

	#banner-video{
		display:none;
	}

	.banner .grid{
		height:417px;
		padding:76px 22px 0 22px;
	}

	.banner .shape{
		left:auto;
		right:10px;
		width:830px;
		height:417px;
	}

	.we-empower{
		position:relative;
		left:auto;
		top:auto;
		width:auto;
		z-index:3;
	}

	.we-empower:before{
		width:32px;
		height:3px;
		margin:0 0 12px 0;
	}

	.we-empower h2{
		font-size:25px;
		line-height:35px;
		letter-spacing:0.5px;
		padding:0 0 2px 0;
	}

	.rw-words{
		font-size:25px;
		line-height:35px;
		letter-spacing:0.5px;
		white-space:normal;
	}

	@keyframes rotateWordsFirst{
		0%{ opacity:1; animation-timing-function:ease-in; height:0px; }
		8%{ opacity:1; height:100px; }
		19%{ opacity:1; height:100px; }
		25%{ opacity:0; height:100px; }
		100%{ opacity:0; }
	}

	.banner .scroll-down{
		display:none;
	}

	/**************************************************************/
	.about{
		padding:20px 10px 30px 10px;
	}

	/**************************************************************/
	.portfolio{
		height:auto;
		padding:20px 10px 20px 10px;
	}

	.portfolio:before{
		display:none;
	}

	.portfolio .companies{
		padding:20px 0 20px 0;
		border-bottom:2px solid #e2e1e1;
	}

	.portfolio .companies .owl-item:last-of-type .item{
		margin:0;
	}

	.portfolio .owl-nav{
		position:absolute;
		top:-40px;
		right:0;
	}

	.portfolio .owl-nav .owl-prev,
	.portfolio .owl-nav .owl-next{
		width:24px;
		height:24px;
		margin:0 0 0 5px;
		background-size:7px auto;
	}

	/**************************************************************/
	.portfolio .stats{
		padding:20px 0 0 0;
	}

	.portfolio .stats h2{
		font-size:21px;
		line-height:20px;
		margin:0 0 20px 0;
	}

	.portfolio .stats .boxes .box{
		width:calc(50vw - 15px);
		height:80px;
		margin:0 7px 6px 0;
		-webkit-perspective:600px;
		-moz-perspective:600px;
	}

	.portfolio .stats .boxes .box:nth-of-type(4n){
		margin:0 7px 6px 0;
	}

	.portfolio .stats .boxes .box:nth-of-type(2n){
		margin:0;
	}


	/*************/
	.portfolio .stats .item{
		width:calc(50vw - 15px);
		height:80px;
		padding:25px 0 0 13px;
		margin:0 7px 6px 0;
	}

	.portfolio .stats .item .number{
		font-size:36px;
		line-height:30px;
		margin:0 0 3px 0;
	}

	.portfolio .stats .item .label{
		font-size:10px;
		line-height:20px;
	}

	.portfolio .read-all{
		text-align:left;
		padding:10px 0 0 0;
	}

	.portfolio .read-all a{
		font-size:9px;
		line-height:18px;
	}

	/**************************************************************/
	.people{
		height:auto;
		padding:20px 0 20px 0;
		background-size:cover;
	}

	.people h2{
		padding:0 10px 0 10px;
	}

	.people .bolded-text{
		font-size:21px;
		padding:0 10px 0 10px;
	}

	.people .full-text{
		padding:0 10px 0 10px;
		margin:14px 0 25px 0;
	}

	/****************/
	.people .owl-nav .owl-prev,
	.people .owl-nav .owl-next{
		top:63px;
		width:24px;
		height:24px;
		background-size:auto 13px;
	}

	.people .owl-nav .owl-prev{
		left:10px;
	}

	.people .owl-nav .owl-next{
		right:10px;
	}

	/****************/
	.people .read-all{
		text-align:center;
		padding:10px 0 0 0;
	}

	.people .read-all a{
		font-size:9px;
		line-height:18px;
	}

	/**************************************************************/
	.insights{
		padding:20px 10px 20px 10px;
	}

	.insights h2{
		margin:0 0 20px 0;
	}

	/*************************************************************/
	.thoughts-item{
		margin-bottom:10px;
	}

	.thoughts-item:nth-of-type(2n){
		margin-bottom:25px;
	}

	/*************************************************************/
	.news-item,
	.news-item:nth-of-type(2n){
		display:block;
		width:auto;
		margin:0 0 25px 0;
	}

	.news-item .date{
		height:52px;
		width:52px;
		padding:8px 0 0 0;
		margin:0 13px 0 0;
	}

	.news-item .date .day{
		font-size:30px;
		line-height:20px;
	}

	.news-item .date .month{
		font-size:10px;
		line-height:10px;
		margin:7px 0 0 0;
	}

	.news-item .body{
		width:calc(100vw - 95px);
	}

	.news-item .body h3{
		font-size:15px;
		line-height:18px;
		top:-3px;
		min-height:38px;
		margin:0 0 2px 0;
	}

	.news-item .body h3 a{
		color:#000;
		text-decoration:none;
	}

	.news-item .body .publisher{
		font-size:9px;
		margin:0 0 3px 0;
	}

	.news-item .body .desc{
		font-size:12px;
		line-height:18px;
	}
}