* {
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}
body {
	font-size: 16px;
	font-family: 'HelveticaNeueRegular', Helvetica, sans-serif, arial;
}
a {
	text-decoration: none;
	color: inherit;
}
ul,ol {
	list-style: none;
}
@font-face {
	font-family: 'HelveticaNeueRegular';
	src: url('../fonts/Helvetica-Regular.eot');
	src: url('../fonts/Helvetica-Regular.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Helvetica-Regular.woff') format('woff'),
		 url('../fonts/Helvetica-Regular.ttf') format('truetype'),
		 url('../fonts/Helvetica-Regular.svg#HelveticaNeueRegular') format('svg');
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: 'HelveticaNeueBold';
	src: url('../fonts/Helvetica-Bold.eot');
	src: url('../fonts/Helvetica-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Helvetica-Bold.woff') format('woff'),
		 url('../fonts/Helvetica-Bold.ttf') format('truetype'),
		 url('../fonts/Helvetica-Bold.svg#HelveticaNeueBold') format('svg');
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: 'HelveticaNeueLight';
	src: url('../fonts/Helvetica-Light.eot');
	src: url('../fonts/Helvetica-Light.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Helvetica-Light.woff') format('woff'),
		 url('../fonts/Helvetica-Light.ttf') format('truetype'),
		 url('../fonts/Helvetica-Light.svg#HelveticaNeueLight') format('svg');
	font-style: normal;
	font-weight: normal;
}
.container{
	margin: 0 auto;
	max-width: 1024px;
	width: 100%;
	padding: 0 10px;
}
.section{
	padding: 60px 0;
}
header{
	padding: 20px;
	background: #fff;
}
.inner-header{
	overflow: hidden;
	position: relative;
}
.logo{
	float: left;
}
.logo a{
	display: block;
}
.logo a img{
	display: block;
}
.nav{
	float: right;
	margin-top: 21px;
}
nav ul{
	font-size: 0;
}
nav ul li{
	display: inline-block;
	margin-left: 40px;
}
nav ul li a{
	font-size: 16px;
	font-weight: bolder;
	line-height: 20px;
}
.nav-button {
	width: 32px;
	height: 24px;
	position: absolute;
	right: 0;
	top: 18px;
	-webkit-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	cursor: pointer;
	display: none;
}
.nav-button span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: #000;
	border-radius: 9px;
	opacity: 1;
	-ms-filter: none;
	-webkit-filter: none;
	filter: none;
	left: 0;
	-webkit-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.25s ease-in-out;
	-webkit-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out; 
}
.nav-button span:nth-child(1) {
	top: 0px;
	-webkit-transform-origin: left center;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center; 
}
.nav-button span:nth-child(2) {
	top: 10px;
	-webkit-transform-origin: left center;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center; 
}
.nav-button span:nth-child(3) {
	top: 20px;
	-webkit-transform-origin: left center;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center; 
}
.nav-button.open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -1px;
	left: 5px;
}
.nav-button.open span:nth-child(2) {
	width: 0%;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
}
.nav-button.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 22px;
	left: 5px; 
}
.main-video{
	/*background: url(../img/bg-main.jpg) no-repeat;*/
	background-size: cover;
	background-position: center center;
	min-height: 500px;
	position: relative;
	display: table;
	width: 100%;
	overflow: hidden;
	height: 500px;
}
.main-video video{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	z-index: -1;
}
.inner-main{
	position: relative;
}	
.text-main{
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	text-align: right;
	color: #fff;
}
.text-main h1{
	display: inline-block;
	text-align: left;
	font-size: 40px;
	font-weight: normal;
}
.text-main h1 span{
	font-family: 'HelveticaNeueBold';
}
.slogan{
	color: #636262;
	font-size: 28px;
	padding: 40px 0;
	text-align: center;
	background: #fff;
}
.what-we-do{
	background: #E9E9EA;
}
.subtitle{
	text-align: center;
	font-size: 36px;
	margin-bottom: 30px;
	font-weight: normal;
	font-family: 'HelveticaNeueBold';
}
.subtitle.white{
	color: #fff;
	margin-bottom: 60px;
}
.text-subtitle{
	font-size: 24px;
	text-align: center;
	max-width: 600px;
	margin: 0 auto 40px;
}
.content-what ul {
	font-size: 0;
	text-align: center;
}
.content-what ul li{
	display: inline-block;
	padding: 0 20px;
	margin-bottom: 30px;
	width: 420px;
	vertical-align: top;
}
.item-what{
	text-align: left;
	padding: 10px 0 10px 100px;
}
.item-what.design{
	background: url(../img/bg-design.png) no-repeat 21px 21px;
}
.item-what.digital{
	background: url(../img/bg-digital.png) no-repeat 21px 21px;
}
.item-what.video{
	background: url(../img/bg-video.png) no-repeat 21px 21px;
}
.item-what.word{
	background: url(../img/bg-word.png) no-repeat 21px 21px;
}
.item-what .text p{
	font-size: 16px;
}
.item-what .text p:first-child{
	font-size: 30px;
	margin-bottom: 10px;
}
.who-we-are{
	background-size: cover;
	color: #fff;
	padding: 100px 0;
	position: relative;
}
.who-we-are .who-video{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: -1;
}
.who-video video{
	width: 100%;
}
.who-we-are p{
	margin-bottom: 40px;
	font-size: 24px;
	text-align: center;
}
.who-we-are p:last-child{
	font-size: 24px;
	font-family: 'HelveticaNeueBold';
}
.img-contact-mobile{
	display: none;
	margin-bottom: 20px;
}
.content-contact{
	overflow: hidden;
}
.content-contact .left{
	float: left;
	width: 50%;
	padding: 0 20px;
	text-align: center;
}
.content-contact .right{
	float: right;
	width: 50%;
	padding: 0 20px;
	text-align: center;
}
.content-contact .right p, .content-contact .left p{
	margin-bottom: 30px;
	font-size: 18px;
}
.content-contact .right span{
	display: block;
	text-align: center;
	font-size: 24px;
	margin-bottom: 20px;
	font-family: 'HelveticaNeueBold';
}
.content-contact .right p span{
	display: inline-block;
	text-align: center;
	font-size: 18px;
	margin-bottom: 0px;
	font-family: 'HelveticaNeueRegular';
}
form{
	padding: 0 60px;
}
form .row{
	margin-bottom: 10px;
	text-align: left;
}
form .row:last-child{
	text-align: left;
}
form span{
	display: block;
	text-align: left;
	font-size: 14px;
	margin-bottom: 10px;
}
form .submit{
	display: inline-block;
	font-size: 18px;
	color: #fff;
	background: #0E6A9F;
	padding: 8px 40px 8px 40px;
	border-radius: 10px;
	cursor: pointer;
	outline: none;
	font-family: 'HelveticaNeueBold';
}
.box{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #bfbfbf;
	border: 2px solid #bfbfbf;
	padding: 8px 20px;
	font-size: 15px;
	width: 100%;
	font-family: helvetica;
	resize: none;
	outline: none;
}
.box.error{
	border-color: red;
}
.social{
	float: right;
	margin-top: -50px;
	text-align: right;
	padding: 0;
	font-size: 0;
}
.social a{
	display: inline-block;
	margin: 0 5px;
}
.social a img{
	display: block;
	width: 40px;
}
footer{
	background: #2F2F30;
	padding: 20px 20px 80px 20px;
}
footer p {
	color: #BABABA;
}
footer a{
	display: none;
	margin-bottom: 20px;
	font-family: 'HelveticaNeueBold';
	color: #fff;
}
@media screen and (max-width: 960px) {
	.main-video{
		min-height: 450px;
		height: 450px;
	}
}
@media screen and (max-width: 880px) {
	.content-what ul li{
		width: 50%;
		padding: 0;
	}
	.img-contact img{
		width: 100%;
	}
	form{
		padding: 0 10px;
	}
}
@media screen and (max-width: 768px) {
	.content-contact .left{
		float: none;
	}
	.content-contact .right{
		padding: 0;
	}
	.main-video{
		min-height: auto;
	}
	.nav-button{
		display: block;
	}
	.nav{
		display: none;
		float: none;
		clear: both;
		text-align: right;
		padding-top: 20px;
	}
	nav ul li{
		margin-left: 0;
		display: block;
		padding: 10px;
	}
	.main-video{
		background: url(../img/bg-main.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
		min-height: 400px;
		height: 400px;
	}
	.who-we-are{
		padding: 0 0 100px;
	}
	.main-video video{
		display: none;
	}
	.who-we-are h2:first-child{
		background: url(../img/bg-who.jpg) no-repeat;
		background-position: 100% 100%;
		background-size: cover;
		padding: 80px 0;
		margin-bottom: 30px;
		line-height: 42px;
		margin-left: -10px;
		margin-right: -10px;
	}
	.who-we-are p{
		color: #000;
	}
	.who-we-are .who-video{
		display: none;
	}
}
@media screen and (max-width: 675px){
	.social{
		float: none;
		text-align: left;
		margin-top: 0;
	}
}
@media screen and (max-width: 480px){
	header{
		padding: 10px 0;
	}
	.logo img{
		width: 180px;
	}
	.nav-button{
		top: 15px;
	}
	.content-what ul li{
		width: 100%;
	}
	.content-contact .left{
		float: none;
		width: 100%;
		padding: 0;
	}
	.content-contact .right{
		padding: 0;
		float: none;
		width: 100%;
	}

	.subtitle{
		font-size: 28px;
	}
	.text-subtitle{
		font-size: 16px;
		line-height: 22px;
	}
	.slogan{
		display: none;
	}
	.item-what .text p:first-child{
		font-size: 28px;
	}
	.text-main{
		position: static;
		padding: 20px 0;
		color: #000;
		text-align: center;
	}
	.text-main h1 {
		font-size: 28px;
		text-align: center;
	}
	.main-video{
		min-height: 230px;
		height: 230px;
	}
	.who-we-are{
		padding: 0 0 60px;
	}
	.who-we-are h2{
		margin-bottom: 30px !important;
	}
	.who-we-are p{
		font-size: 16px;
		margin-bottom: 20px;
	}
	.who-we-are p:last-child{
		font-size: 20px;
		font-family: 'HelveticaNeueBold';
		color: #727272
	}
	.content-contact .right p, .content-contact .left p{
		font-size: 16px;
	}
	.img-contact{
		display: none;
	}
	.img-contact-mobile{
		display: block;
	}
	.img-contact-mobile img{
		width: 100%;
	}
	.content-contact .right p span{
		display: block;
		font-size: 16px;
	}
	.social{
		float: right;
		margin-top:-45px;
		padding: 0;
		text-align: right;
	}
	.social a img {
		width: 35px;
	}
	footer{
		padding: 20px;
	}
	footer a{
		display: block;
	}
}