@charset "UTF-8";
	html {
	overflow:-moz-scrollbars-vertical;
	overflow-y:scroll;
	overflow-x:hidden
}
*{
	font-family: 'latingxi';	
	
}
.fonts{
		font-family: 'Gotham-BoldRegular','lantinghei'; 
}

.comintro{
	box-sizing:border-box;
}
.comintro img{
	width:100%;
	height: auto;
}

.gopro{
	display: none;
}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	-webkit-font-smoothing:antialiased;
	
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block
}
body {
	line-height:1;
	-webkit-font-smoothing:antialiased
}
ol,ul {
	list-style:none
}
blockquote,q {
	quotes:none
}
blockquote:after,blockquote:before,q:after,q:before {
	content:"";
	content:none
}
table {
	border-collapse:collapse;
	border-spacing:0
}
html {
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%
}
body {
	margin:0
}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
	display:block
}
audio,canvas,progress,video {
	display:inline-block
}
audio:not([controls]) {
	display:none;
	height:0
}
progress {
	vertical-align:baseline
}
[hidden],template {
	display:none
}
a {
	background-color:transparent
}
a:active,a:hover {
	outline-width:0
}
abbr[title] {
	border-bottom:none;
	text-decoration:underline;
	text-decoration:underline dotted
}
b,strong {
	font-weight:inherit;
	font-weight:bolder
}
dfn {
	font-style:italic
}
h1 {
	font-size:2em;
	margin:.67em 0
}
mark {
	background-color:#ff0;
	color:#000
}
small {
	font-size:80%
}
sub,sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}
sub {
	bottom:-.25em
}
sup {
	top:-.5em
}
img {
	border-style:none
}
svg:not(:root) {
	overflow:hidden
}
code,kbd,pre,samp {
	font-family:monospace,monospace;
	font-size:1em
}
figure {
	margin:1em 40px
}
hr {
	box-sizing:content-box;
	height:0;
	overflow:visible
}
button,input,select,textarea {
	font:inherit
}
optgroup {
	font-weight:700
}
button,input,select {
	overflow:visible
}
button,input,select,textarea {
	margin:0
}
button,select {
	text-transform:none
}
[type=button],[type=reset],[type=submit],button {
	cursor:pointer
}
[disabled] {
	cursor:default
}
[type=reset],[type=submit],button,html [type=button] {
	-webkit-appearance:button
}
button::-moz-focus-inner,input::-moz-focus-inner {
	border:0;
	padding:0
}
button:-moz-focusring,input:-moz-focusring {
	outline:1px dotted ButtonText
}
fieldset {
	border:1px solid silver;
	margin:0 2px;
	padding:.35em .625em .75em
}
legend {
	box-sizing:border-box;
	color:inherit;
	display:table;
	max-width:100%;
	padding:0;
	white-space:normal
}
textarea {
	overflow:auto
}
[type=checkbox],[type=radio] {
	box-sizing:border-box;
	padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
	height:auto
}
[type=search] {
	-webkit-appearance:textfield
}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
	-webkit-appearance:none
}
img::-moz-selection {
	background:transparent
}
img::selection {
	background:transparent
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
	font-family:inherit;
	color:inherit;
	line-height:1.25;
	margin:0;
	padding:0;
	font-weight:400
}
.h1,h1 {
	font-size:3.6em
}
.h2,h2 {
	font-size:3.1em
}
.h3,h3 {
	font-size:2.6em
}
.h4,h4 {
	font-size:2.35em
}
.h5,h5 {
	font-size:1.85em
}
.h6,h6 {
	font-size:1em
}
.small,small {
	font-size:.7em
}
a.link {
	text-decoration:none
}
a.link:hover {
	text-decoration:underline
}
p {
	margin:0
}
hr {
	border-bottom:1px solid #333;
	border-left:none;
	border-right:none;
	border-top:none;
	margin:1.5em 0;
	clear:both
}
ol.list-inline,ul.list-inline {
	list-style:none;
	margin:0;
	padding:0
}
ol.list-inline li,ul.list-inline li {
	display:inline-block
}
em {
	font-style:italic
}
strong {
	font-weight:700
}
abbr[title] {
	border-bottom:1px dotted
}
abbr,acronym {
	cursor:help
}
code,tt {
	font-size:.75em
}
code,pre,tt {
	font-family:Consolas,Monaco,Bitstream Vera Sans Mono,Courier,monospace
}
pre {
	-moz-tab-size:2;
	tab-size:2;
	margin-bottom:12px;
	white-space:nowrap;
	border:1px solid #e1e1e1;
	border-radius:4px
}
pre>code {
	display:block;
	padding:1rem 1.5rem;
	white-space:pre
}
audio,embed,iframe,img,input,object,picture,video {
	max-width:100%;
	margin:0
}
img {
	display:inline-block;
	vertical-align:middle;
	border:0;
	-ms-interpolation-mode:bicubic
}
img[src*=".svg"] {
	width:100%\9
}
a:hover img {
	border:none;
	background:none
}
img[src*=".svg"],x::-ms-reveal {
	width:100%
}
a img {
	border:none
}
.button,button {
	cursor:pointer;
	text-decoration:none;
	background-color:transparent;
	padding:0;
	border:0;
	-ms-touch-action:manipulation;
	touch-action:manipulation;
	white-space:nowrap
}
.button {
	display:inline-block;
	text-align:center;
	vertical-align:middle
}
button {
	background-image:none
}
button:active,button:focus {
	outline:none;
	box-shadow:none;
	border:none
}
button.button-disabled,button[disabled] {
	cursor:not-allowed;
	opacity:.65
}
fieldset {
	border:0;
	margin:0;
	padding:0
}
select,textarea {
	padding:6px 10px;
	box-shadow:none
}
input,textarea {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none
}
textarea {
	resize:none;
	height:auto;
	min-height:50px
}
.table {
	width:100%;
	margin-bottom:15px
}
.table td,.table th {
	border-bottom:.1rem solid #e1e1e1;
	padding:10px 20px;
	text-align:left
}
.table td:first-child,.table th:first-child {
	padding-left:0
}
.table td:last-child,.table th:last-child {
	padding-right:0
}
section {
	width:100%;
	display:block;
	position:relative
}
section:after,section:before {
	content:" ";
	display:table
}
section:after {
	clear:both
}
.inner-container {
	width:100%
}
.inner-container:after,.inner-container:before {
	content:" ";
	display:table
}
.inner-container:after {
	clear:both
}
.text-center {
	text-align:center
}
.text-left {
	text-align:left
}
.text-right {
	text-align:right
}
.text-uppercase {
	text-transform:uppercase
}
.full-width {
	width:100%
}
.spacing {
	padding:15px 0
}
.slick-slider {
	box-sizing:border-box;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-ms-touch-action:pan-y;
	touch-action:pan-y;
	-webkit-tap-highlight-color:transparent
}
.slick-list,.slick-slider {
	position:relative;
	display:block
}
.slick-list {
	overflow:hidden;
	margin:0;
	padding:0
}
.slick-list:focus {
	outline:none
}
.slick-list.dragging {
	cursor:pointer;
	cursor:hand
}
.slick-slider .slick-list,.slick-slider .slick-track {
	-webkit-transform:translateZ(0);
	transform:translateZ(0)
}
.slick-track {
	position:relative;
	left:0;
	top:0;
	display:block
}
.slick-track:after,.slick-track:before {
	content:"";
	display:table
}
.slick-track:after {
	clear:both
}
.slick-loading .slick-track {
	visibility:hidden
}
.slick-slide {
	float:left;
	height:100%;
	min-height:1px;
	display:none
}
[dir=rtl] .slick-slide {
	float:right
}
.slick-slide img {
	display:block
}
.slick-slide.slick-loading img {
	display:none
}
.slick-slide.dragging img {
	pointer-events:none
	
}
.slick-initialized .slick-slide {
	display:block;
	width: 700px !important;
}
.slick-loading .slick-slide {
	visibility:hidden
}
.slick-vertical .slick-slide {
	display:block;
	height:auto;
	border:1px solid transparent
}
.slick-arrow.slick-hidden {
	display:none
}
.slick-loading .slick-list {
	background:#fff url(../images/ajax-loader.gif) 50% no-repeat
}
.slick-next,.slick-prev {
	position:absolute;
	display:block;
	height:20px;
	width:20px;

	line-height:0;
	font-size:0;
	cursor:pointer;
	top:50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	padding:0;
	border:none
}
.slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover {
	background:transparent;
	color:transparent;
	outline:none
}
.slick-next.slick-disabled:before,.slick-next:focus:before,.slick-next:hover:before,.slick-prev.slick-disabled:before,.slick-prev:focus:before,.slick-prev:hover:before {
	opacity:1
}
.slick-next:before,.slick-prev:before {
	font-size:20px;
	line-height:1;
	color:#fff;
	opacity:1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
.slick-prev {
	left:-25px
}
[dir=rtl] .slick-prev {
	left:auto;
	right:-25px
}
.slick-prev:before {
	content:"←"
}
[dir=rtl] .slick-prev:before {
	content:"→"
}
.slick-next {
	right:-25px
}
[dir=rtl] .slick-next {
	left:-25px;
	right:auto
}
.slick-next:before {
	content:"→"
}
[dir=rtl] .slick-next:before {
	content:"←"
}
.slick-dotted.slick-slider {
	margin-bottom:30px
}
.slick-dots {
	position:absolute;
	list-style:none;
	display:block;
	text-align:center;
	padding:0;
	margin:0;
	width:100%
}
.slick-dots li {
	position:relative;
	display:inline-block;
	height:15px;
	width:15px;
	margin:0 2.5px;
	padding:5px;
	cursor:pointer;
	vertical-align:top
}
.slick-dots li button {
	border:0;
	background:#f5f5f5;
	z-index:6;
	display:block;
	height:5px;
	width:5px;
	outline:none;
	line-height:0;
	font-size:0;
	color:transparent;
	padding:0;
	cursor:pointer
}
.slick-dots li button:focus,.slick-dots li button:hover {
	outline:none
}
.slick-dots li.slick-active button {
	background:#014bb8
}
/*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers*/
	.hamburger {
	
	padding:2px 0;
	display:inline-block;
	cursor:pointer;
	transition-property:opacity,-webkit-filter;
	transition-property:opacity,filter;
	transition-property:opacity,filter,-webkit-filter;
	transition-duration:.15s;
	transition-timing-function:linear;
	font:inherit;
	color:inherit;
	text-transform:none;
	background-color:transparent;
	border:0;
	margin:0;
	overflow:visible
}
.hamburger:hover {
	opacity:.7
}
.hamburger-box {
	width:23px;
	height:23px;
	display:inline-block;
	position:relative
}
.hamburger-inner {
	display:block;
	top:50%;
	margin-top:-.5px
}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before {
	width:25px;
	height:3px;
	background-color:#fff;
	border-radius:0;
	position:absolute;
	transition-property:-webkit-transform;
	transition-property:transform;
	transition-property:transform,-webkit-transform;
	transition-duration:.15s;
	transition-timing-function:ease
}
.hamburger-inner:after,.hamburger-inner:before {
	content:"";
	display:block
}
.hamburger-inner:before {
	top:-6px
}
.hamburger-inner:after {
	bottom:-6px
}
.hamburger--spin .hamburger-inner {
	transition-duration:.3s;
	transition-timing-function:cubic-bezier(.55,.055,.675,.19)
}
.hamburger--spin .hamburger-inner:before {
	transition:top .1s ease-in .34s,opacity .1s ease-in
}
.hamburger--spin .hamburger-inner:after {
	transition:bottom .1s ease-in .34s,-webkit-transform .3s cubic-bezier(.55,.055,.675,.19);
	transition:bottom .1s ease-in .34s,transform .3s cubic-bezier(.55,.055,.675,.19);
	transition:bottom .1s ease-in .34s,transform .3s cubic-bezier(.55,.055,.675,.19),-webkit-transform .3s cubic-bezier(.55,.055,.675,.19)
}
.hamburger--spin.is-active .hamburger-inner {
	-webkit-transform:rotate(225deg);
	transform:rotate(225deg);
	transition-delay:.14s;
	transition-timing-function:cubic-bezier(.215,.61,.355,1)
}
.hamburger--spin.is-active .hamburger-inner:before {
	top:0;
	opacity:0;
	transition:top .1s ease-out,opacity .1s ease-out .14s
}
.hamburger--spin.is-active .hamburger-inner:after {
	bottom:0;
	-webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
	transition:bottom .1s ease-out,-webkit-transform .3s cubic-bezier(.215,.61,.355,1) .14s;
	transition:bottom .1s ease-out,transform .3s cubic-bezier(.215,.61,.355,1) .14s;
	transition:bottom .1s ease-out,transform .3s cubic-bezier(.215,.61,.355,1) .14s,-webkit-transform .3s cubic-bezier(.215,.61,.355,1) .14s
}
body,html {
	background:transparent;
	margin:0;
	padding:0;
	font-size:16px;
	line-height:1.75
}
body {
	line-height:1;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased
}
::-webkit-scrollbar {
	overflow:visible
}
::-webkit-scrollbar,::-webkit-scrollbar-track {
	background:transparent
}
::-webkit-scrollbar-track-piece:end,::-webkit-scrollbar-track-piece:start {
	background:transparent
}
::-webkit-scrollbar-thumb {
	background:#014bb8
}
::-webkit-scrollbar-thumb:window-inactive {
	background:rgba(0,0,255,.8)
}
::-webkit-scrollbar {
	width:7px
}
*,:after,:before {
	box-sizing:border-box
}
::-moz-selection {
	background-color:#000;
	color:#fff;
	text-shadow:none
}
::selection {
	background-color:#000;
	color:#fff;
	text-shadow:none
}
::-webkit-selection {
	background-color:#000;
	color:#fff;
	text-shadow:none
}
.wrap {
	width:100%;
	margin-left:auto;
	margin-right:auto;

}
.wrap:after {
	content:" ";
	display:block;
	clear:both
}
.row {
	clear:both;
	width:100%;
	float:left;
	padding-left:8.33333%;
	padding-right:8.33333%
}
h1,h2,h3,h4,h5 {
	font-family:Gotham-BoldRegular;
	font-weight:400;
	font-style:normal
}
.clients p,.p {
	font-size:1.375rem;
	line-height:1.5;
	font-family:Gotham-BoldRegular
}
#case .case-intro-header p,#contact dd,.contact-company .contact-company-text p,.small-p {
	font-size:.75rem;
	line-height:1.83333;
	letter-spacing:-.01em;
	font-family: Gotham-Book;

}
#case .case-intro-text p,.home .work .recent-work-title p,.text {
	font-size:14pt;
	line-height:1.305;
	font-family:latinghei;
	letter-spacing:.024em
}
.clients h2,.title {
	font-size:4.0625rem;
	line-height:1.07692;
	letter-spacing:-.01em
}
#contact dt,.capabilities h3,.contact-company .contact-company-header h2,.fourofour .fourofour-text h1,.subtitle {
	font-size:1.75rem;
	line-height:1.25;
	font-family:Gotham-BoldRegular
}
a {

}
a,a:hover {
	cursor:pointer;
	text-decoration:underline;
	color:#fff;
}
a:hover {
	color:#014bb8
}
.site-container {
	position:relative;
	min-height:100vh
}
.overlay {
	position:fixed;
	top:50%;
	left:0;
	width:100%;
	height:0;
	background:#014bb8
}
.overlay.is-animate {
	top:0;
	height:100%
}



.top-bar {
	position: fixed;
	top:0;
	right:0;
	width:40%;
	height:100vh;
	opacity:0;
	color:#fff;
	padding:35px 0 18px;
	background-color:rgba(0,0,0,0.8);
	z-index:6;
	visibility: hidden;
	transition:opacity .4s ease,padding .4s ease,-webkit-transform .4s ease;
	transition:opacity .4s ease,transform .4s ease,padding .4s ease;
	transition:opacity .4s ease,transform .4s ease,padding .4s ease,-webkit-transform .4s ease
}
.top-bar.scrinked {
	padding:25px 0
}
.top-bar--empty {
	display:none;
	position:relative;
	height:79px;
	width:100%;
	background:#014bb8
}
.top-bar .row {
	padding-left:15.16667%;
	padding-right:4.16667%
}

.top-bar nav {
	float:right;
	padding:2px 0
}
.top-bar nav a {
	color:#fff;
	text-decoration:none;
	font-size:.75rem;
	line-height:1.86667;
	letter-spacing:.04em;
	margin-left:35px;
	position:relative;
	display:inline-block
}

.mobile-menu-active .hamburger,.mobile-menu-active .logo {
	position:fixed
}
.mobile-menu-active header {
	opacity:1;
	visibility:visible
}
.mobile-menu-active header nav {
	display:block;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	top:20%;
	position:absolute;
	right:20%;
}
.mobile-menu-active header nav a {
	float:none;
	border:0;
	font-size:3.5rem;
	line-height:1.5;
	letter-spacing:0;
	font-family:Gotham-BoldRegular;
	margin:0;
	display:block;
	width:380px;
}







.logo {
	position:absolute;
	left:8.6%;
	top:35px;
	height:26px;
	padding:8px 0;
	z-index:7
}
.logo,.logo svg {
	width:161px;
	display:inline-block;
	vertical-align:top
}
.logo svg {
	height:10px
}
.logo svg path {
	fill:#fff
}
.hamburger {
	right:8.33333%;
	top:20px;
	position:absolute;
	margin-top:25px;
	display:block;
	outline:0;
	z-index:7
}
.header {
	
	background-size:cover;
	color:#fff;
	font-family:Gotham-BoldRegular;
	font-size:1.75rem;
	line-height:1.25;
	padding:calc(20vh + 20px) 0 calc(30vh - 20px);
	overflow:hidden
}
.header h2 {
	word-spacing:-.08em;
	margin-top: 4px;
}
.header p {
	letter-spacing:-.025em;
	margin-top:15px;
	font-weight:400;
	font-size:1.75rem;
	line-height:1.25
}

.bgchange{
	background: url(../images/nbmd.gif);
	background-size: cover;
}
 
.header.case,.header.contact,.header.home,.header.work {
	position:relative;
	background:;
	height:calc(50vh + 79px);
	padding:0;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-direction:column;
	flex-direction:column;
	overflow:hidden
}
.header.case .wrap,.header.contact .wrap,.header.home .wrap,.header.work .wrap {
	margin-top:auto;
	-webkit-align-self:flex-start;
	-ms-flex-item-align:start;
	align-self:flex-start;
	margin-bottom:88px
}
.header.case .row,.header.contact .row,.header.home .row,.header.work .row {
	padding-left:16.67%;
	padding-right:16.67%;
}
.header.case h2,.header.contact h2,.header.home h2,.header.work h2 {
	width:100%;
	float:left
}
.header.case h2 a,.header.contact h2 a,.header.home h2 a,.header.work h2 a {
	text-decoration:none;
	color:#fff
}
.header.case h2 a:hover,.header.contact h2 a:hover,.header.home h2 a:hover,.header.work h2 a:hover {
	text-decoration:underline
}
.header.case p,.header.contact p,.header.home p,.header.work p {
	width:50%;
	float:left;
	
}
.header.home {
	
}
.header.home .wrap {
	margin-bottom:3.33333%
}
.header.case .case-bg {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	background-color:#014bb8;
	background-position:top;
	background-repeat:no-repeat;
	background-size:auto 100%;
	z-index: -1;
}
.header.contact h2 {
	width:50%;
	float:left
}
[data-namespace=case] .header {
	display:block
}
[data-namespace=case] .header h2 {
	position:absolute;
	top:72%;
	font-family:微软雅黑;
}
.footer {
	background:#004bb7;
	color:#5f5f5f;
	padding:40px 0;
	font-size:.75rem;
	line-height:2.33333
}
.footer .row {
	padding-left:4.16667%;
	padding-right:4.16667%
}
.footer .logo,.footer .wrap {
	position:relative
}
.footer .logo {
	left:auto;
	top:auto;
	width:161px;
	margin-left: 4%;
	padding:7px 0;
	display:block;
	float:left
}
.footer .logo svg {
	display:inline-block;
	vertical-align:top;
	width:46px;
	height:10px
}
.footer .logo svg path {
	fill:#fff
}
.footer em {
	display:inline-block;
	font-size:.75rem;
	line-height:2;
	color:#fff;
	font-style:normal;
	float:right;
	margin-top:-15px;
	position:absolute;
	top:50%;
	right:5%
}
.footer span {
	clear:both;
	display:block
}
.btn {
	height:38px;
	line-height:38px;
	cursor:pointer;
	text-transform:uppercase;
	text-decoration:none;
	transition:all .3s ease-in-out;
	color:#014bb8;
	padding:0 18px;
	font-size:.8125rem
}
.btn span {
	display:inline-block;
	vertical-align:top;
	text-decoration:underline;
	will-change:color;
	transition:color .3s ease-in-out
}
.btn:hover {
	background:#014bb8;
	color:#fff;
	text-decoration:none
}
.btn:hover span {
	text-decoration:underline
}
.btn:focus {
	background:#eee;
	color:#000;
	text-decoration:none
}
.btn:focus span {
	text-decoration:underline
}
.btn--more {
	background:transparent;
	display:inline-block;
	border:1px solid #26cad3
}
.btn--more span {
	text-decoration:none
}
.btn--play {
	background:transparent;
	will-change:background,color,opacity,visibility
}
.btn--play svg path {
	fill:#fff;
	transition:all .3s ease-in-out;
	will-change:fill
}
.btn--play:hover {
	background:#111;
	color:#fff
}
.btn--play:hover svg path {
	fill:#fff
}
.reel {
	background:#fff;
	display:table;
	width:100%
}
.reel .wrap {
	min-height:100%;
	height:auto
}
.reel .row {
	padding:8.33333%
}
.reel .video-poster {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	background:50% url(../images/video-poster.jpg);
	background-size:cover;
	z-index:1
}
.reel .video {
	background-size:cover;
	padding-bottom:56.25%;
	margin:0 auto;
	display:block;
	position:relative;
	overflow:hidden
}
.reel .video iframe {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0
}
.reel .video .btn {
	white-space:nowrap;
	z-index:1;
	width:80px;
	height:80px;
	background:#000;
	border:1px solid #014bb8
}
.reel .video .btn,.reel .video .btn svg {
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	position:absolute
}
.reel .video .btn svg {
	width:15px;
	height:15px;
	margin-left:3px
}
.reel .video .btn:hover {
	background:#014bb8
}
.capabilities {
	background:#000;
	color:#fff;
	padding-bottom:150px
}
.capabilities h2 {
	width:50%;
	float:left;
	padding-right:5%;
	margin-top:3px
}
.capabilities h3 {
	width:25%;
	float:left;
	margin-top:-8px
}
.capabilities ul {
	width:75%;
	float:left;
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;
	list-style:none;
	font-size:.75rem;
	line-height:1.83333
}
.capabilities dl {
	width:50%;
	float:left;
	margin-top:15px
}
.capabilities dt {
	clear:both;
	width:45%;
	float:left;
	font-size:1.75rem;
	line-height:1.25;
	font-family:Gotham-BoldRegular;
	margin-top:-6px
}
.capabilities dd {
	width:55%;
	float:left;
	font-size:.75rem;
	line-height:1.83333;
	letter-spacing:.05em;
	margin-bottom:80px
}
.capabilities .spacer hr {
	display:block;
	border-bottom:1px solid #1a1a1a;
	height:0;
	width:100%;
	margin-top:0;
	margin-bottom:100px
}
.capabilities .capabillities {
	padding-top:8.33333%;
	padding-bottom:45px
}
.clients {
	background:linear-gradient(180deg,#000 0,#000 50%,#000 0,#fff 0,#fff);
	color:#fff
}
.clients .clients-inner {
	background:#dedddd;
	padding:110px 90px;
	margin-bottom:140px
}
.clients .clients-inner:after {
	content:" ";
	display:block;
	clear:both
}
.clients .clients-list {
	width:100%;
	float:right;
	padding:0
}
.clients h2 {
	padding-bottom:35px
}
.clients ul {
	list-style:none
}
.clients ul a,.clients ul span {
	display:block;
	max-width:178px;
	width:100%;
	opacity:1;
	margin:0 auto;
	-webkit-transform:scale(.95);
	transform:scale(.95);
	transition:all .3s ease-in-out;
	text-align:center
}
.clients ul a img,.clients ul a svg,.clients ul span img,.clients ul span svg {
	display:inline-block;
	width:80%;
	height:80%;
	margin:0;
	max-width:140px
}
.clients ul a svg path,.clients ul span svg path {
	fill:#454545
}
.clients ul a:hover,.clients ul span:hover {
	opacity:.9;
	-webkit-transform:scale(1);
	transform:scale(1)
}
.clients li {
	margin-bottom:10%
}
.clients li:nth-of-type(3) span,.clients li:nth-of-type(4) span,.clients li:nth-of-type(7) span,.clients li:nth-of-type(8) span {
	-webkit-transform:scale(.75);
	transform:scale(.75)
}
.clients li:nth-child(7),.clients li:nth-child(8),.clients li:nth-child(9) {
	margin-bottom:0
}
.gridblock-client-list {
	width:100%;
	font-size:0
}
.gridblock-client-list>* {
	vertical-align:top;
	display:inline-block;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	content:"three";
	font-size:12px
}
.gridblock-client-list.three>* {
	position:relative;
	width:28%;
	margin-right:8%
}
.gridblock-client-list.three>:nth-child(3n) {
	margin-right:8%;
	margin-right:0
}
.gridblock-client-list.three>:last-child {
	margin-right:0
}
.layer--overlay {
	width:100%;
	height:100%;
	background:#fff;
	top:0;
	z-index:4
}
.layer--cover,.layer--overlay {
	position:fixed;
	left:0;
	right:0;
	margin:0 auto;
	visibility:hidden;
	opacity:0
}
.layer--cover {
	background:#014bb8;
	width:0;
	height:0;
	z-index:5
}
.home .work {
	background:#fff
}
.home .work .view-work {
	position:relative
}
.home .work .recent-work-title {
	*zoom:1
}
.home .work .recent-work-title:after,.home .work .recent-work-title:before {
	content:" ";
	display:table
}
.home .work .recent-work-title:after {
	clear:both
}
.home .work .recent-work-title {
	padding-bottom:100px
}
.home .work .recent-work-title h2 {
	width:100%
}
.home .work .recent-work-title p {
	margin:10px 0 0
}
.work .work-more {
	clear:both;
	width:100%;
	float:left;
	display:block;
	text-align:center;
	padding-top:110px;
	padding-bottom:110px
}
.work .btn--more {
	width:265px;
	max-width:100%;
	height:57px;
	line-height:55px;
	text-align:center;
	text-decoration:none;
	background:#fff
}
.work .btn--more span {
	text-decoration:none;
	color:#26cad3;
}



.works .work-more {
	clear:both;
	width:100%;
	float:left;
	display:block;
	text-align:center;
	padding-top:110px;
	padding-bottom:110px
}
.works .btn--more {
	width:265px;
	max-width:100%;
	height:57px;
	line-height:55px;
	text-align:center;
	text-decoration:none;
	background:#fff
}
.works .btn--more span {
	text-decoration:none;
	color:#26cad3;
}

.works .btn--more:active,.works .btn--more:focus,.works .btn--more:hover {
	background:#26cad3
}

.works .btn--more:active span,.works .btn--more:focus span,.works .btn--more:hover span {
	color:#fff
}


.work .btn--more:active,.work .btn--more:focus,.work .btn--more:hover {
	background:#26cad3
}
.work .btn--more:active span,.work .btn--more:focus span,.work .btn--more:hover span {
	color:#fff
}
.work .btn--more.is-animate {
	background:#014bb8
}
.works {
	position:relative;
	padding-top:105px;
	padding-bottom:55px
}
.works .layer--overlay {
	z-index:2
}


.works article .layer--#014bb8 {
	background:#014bb8;
	position:absolute;
	left:0;
	right:0;
	height:100%;
	opacity:0;
	width:83.33333%;
	float:left;
	margin-right:auto;
	margin-left:auto;
	float:none
}

.works article.is-animate {
	overflow:hidden
}
.works article.animate-width {
	z-index:3
}
.works article.animate-width .works-text {
	transition:none
}
.works article.animate-width .works-image-origin-bg {
	display:none
}
.works article.animate-width .layer--#014bb8 {
	opacity:1
}
.works article a {
	transition:background .28s 0s;
	-o-transition:background .28s 0s;
	-moz-transition:background .28s 0s;
	-webkit-transition:background .28s 0s;
	width:100%;
	float:left;
	margin-right:auto;
	margin-left:auto;
	float:none;
	position:relative;
	text-decoration:none;
	overflow:visible;
	display:block;
	padding-top:62%;
	
}
.works article a .works-image {
	position:relative;
	top:0;
	left:auto;
	bottom:0;
	right:0;
	display:block;
	width:10%;
	padding-bottom:39.375%;
	float:left
}
.works article a .works-image-hover-bg,.works article a .works-image-origin-bg {
	position:absolute;
	right:0;
	top:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:100%;
}
.works article a .works-image-hover-bg {
	transition:opacity .5s 0s;
	transition:opacity .5s 0s,visibility .5s 0s;
	opacity:0;
	visibility:hidden
}
.works article a .works-text {
	top:0;
	left:0;
	position:absolute;
	display:block;
	vertical-align:top;
	width:auto;
	padding-right:30px;
	transition:all .3s ease-in-out;
	will-change:left,top;
	z-index:1;
	float:left;
	opacity:0;
	
}
.works article a h3 {
	font-size:1.75rem;
	line-height:1.13043;
	font-family:Gotham-BoldRegular;
	padding-bottom:5px;
	word-spacing:-.08em
}
.works article a h3,.works article a p {
	transition:color .3s ease-in-out;
	will-change:color;
	color:#000;
	font-size:20pt;
	font-family: "微软雅黑";
}
.works article a p {
	
	font-size:14pt;
	line-height:1.66667;
	font-family: Gotham-Book;

}
.works article a.is-animate:before {
	background:#014bb8
}
.works article a .icon-big-arrow-right {
	height:6px;
	width:30px;
	position:absolute;
	left:35px;
	bottom:30px;
	transition:all .3s ease-in-out;
	will-change:opacity,visibility
}
.works article a .icon-big-arrow-right path {
	fill:#fff
}
.works article a.is-animate .icon-big-arrow-right {
	opacity:0;
	visibility:hidden
}
.works .more {
	position:relative;
	display:block;
	text-align:center;
	padding:50px 0 100px;
	color:#014bb8
}
.works .more a {
	display:inline-block;
	color:#014bb8;
	text-decoration:none;
	text-transform:uppercase;
	height:34px;
	line-height:34px;
	padding:0 18px 0 8px;
	transition:all .6s .2s 0s;
	-o-transition:all .6s .2s 0s;
	-moz-transition:all .6s .2s 0s;
	-webkit-transition:all .6s .2s 0s
}
.works .more a span {
	text-decoration:underline
}
.works .more a:hover {
	background:#014bb8;
	color:#fff;
	transition:all .6s ease-in-out
}
#contact {
	padding:0px 0 0px;
	font-family:Gotham-BoldRegular
}
#contact dl {
	width:50%;
	float:left
}
#contact dt {
	float:left;
	width:165px;
	clear:both
}
#contact dd {
	margin-top:8px;
	margin-left:165px;
	font-family:gt-pressura-mono-light
}
#contact dd a {
	color:#000;
	display:inline-block;
	padding:0 8px;
	margin-left:-8px;
	transition:all .6s ease-in-out;
	text-decoration:none
}
#contact dd a:hover {
	background:#014bb8;
	color:#fff;
	text-decoration:none
}
.contact-info {
	padding-bottom:110px
}
.contact-company:after,.contact-info:after {
	content:" ";
	display:block;
	clear:both
}
.contact-company .contact-company-header,.contact-company .contact-company-text {
	width:50%;
	float:left
}
.contact-company .contact-company-text:after {
	content:" ";
	display:block;
	clear:both
}
.contact-company .contact-company-text p {
	float:left;
	font-family:gt-pressura-mono-light
}
.contact-company .contact-company-text p:first-child {
	width:42%;
	margin-right:14%
}
.contact-company .contact-company-text p:nth-child(2) {
	width:42%
}
.contact-mosaic {
	padding-bottom:110px
}
.contact-mosaic figure {
	padding:0;
	margin:0;
	max-width:100%
}
.contact-mosaic .img-grid,.contact-mosaic figure {
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:justify;
	justify-content:space-between
}
.contact-mosaic .img-grid {
	-ms-flex-direction:column;
	flex-direction:column
}
.contact-mosaic .img-grid.double {
	-ms-flex:0 50%;
	flex:0 50%;
	min-width:0
}
.contact-mosaic .img-grid.single {
	-ms-flex:0 46.7%;
	flex:0 46.7%;
	min-width:0
}
.contact-mosaic img {
	max-width:100%;
	width:100%;
	height:auto
}
#case {
	padding-top:90px;
	overflow:hidden
}
#case .layer--overlay {
	z-index:2
}
#case .case-intro {
	padding-bottom:160px
}
#case .case-intro:after {
	content:" ";
	display:block;
	clear:both
}
#case .case-intro-header {
	width:50%;
	float:left;
	padding-right:5%
}
#case .case-intro-text {
	width:50%;
	float:left
}
#case .gallery {
	padding-bottom:45px
}
#case .gallery figure {
	margin:0;
	width:100%;
	height:auto;
	margin-bottom:9.999%
}

#case .gallery iframe,#case .gallery img {
	position:relative;
	display:block;
	max-width:100%;
	height:auto!important;
}
#case .gallery .is-video {
	padding-bottom:56.25%;
	position:relative
}
#case .gallery figure img {
	width:auto;
	display:inline-block;
}
#case .gallery .is-video iframe {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%
}
#case .slider {
	overflow:hidden
}
#case .slider header {
	opacity:1!important;
	display:block;
	padding-bottom:50px
}
#case .slider header:after {
	content:" ";
	display:block;
	clear:both
}
#case .slider header h3 {
	font-size:1.75rem;
	line-height:1.25;
	font-family:Gotham-BoldRegular;
	float:left
}
#case .slider .row,#case .slider .slick-list,#case .slider .wrap {
	overflow:visible
}
#case .slider .row:nth-child(2) {
	padding-bottom:8.33%
}
#case .slider .slick-dotted.slick-slider {
	margin-bottom:0
}
#case .slider .nav {
	float:right;
	color:#a6a6a6;
	text-transform:uppercase;
	line-height:20px;
	margin-top:10px;
	margin-right:10%;
}
#case .slider .nav a {
	display:inline-block;
	width:35px;
	padding:5px 0;
	height:20px;
	float:right;
	margin-left:40px
}
#case .slider .nav a svg {
	display:inline-block;
	vertical-align:top;
	width:35px;
	height:10px
}
#case .slider .nav a svg path {
	fill:#a6a6a6;
	will-change:fill;
	transition:fill .3s ease-in-out
}
#case .slider .nav a.prev svg {
	-webkit-transform:scale(-1);
	transform:scale(-1)
}
#case .slider .nav a:hover svg path {
	fill:#014bb8
}
#case .slider .nav a.next {
	margin-left:18px
}
#case .slider .slick-dots {
	display:none!important;
	padding:5px 0
}
.case-slider {
	position:relative;
	margin-bottom:120px;
	width:calc(100% + 50px);
	margin-left:-25px
}
.case-slider:before {
	position:absolute;
	top:0;
	right:100%;
	height:100%;
	width:1000%;
	background:#fff;
	z-index:1;
	content:""
}
.case-slider a,.recent-work a {
	position:relative;
	display:block;
	overflow:hidden;
	margin:0 25px;
	outline:0;
	text-decoration:none;
	transition:box-shadow .3s ease-in-out;
	will-change:box-shadow;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden
}
.case-slider a .figure-wrapper,.recent-work a .figure-wrapper {
	width:100%;
	overflow:hidden
}
.case-slider a .figure,.recent-work a .figure {
	display:block;
	width:100%;
	padding-bottom:62%;
	transition:-webkit-transform .6s ease-in-out;
	transition:transform .6s ease-in-out;
	transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
	background-size:cover
}
.case-slider a .figure-caption,.recent-work a .figure-caption {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:20px 35px;
	transition:all .3s ease-in-out;
	color:#000;
}

.case-slider a:hover .figure-caption,.recent-work a:hover .figure-caption {

	top:25px;
	left:0;
}

.case-slider a .figure-caption>*,.recent-work a .figure-caption>* {
	transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;
	transition:opacity .3s ease-in-out,transform .3s ease-in-out;
	transition:opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
	opacity:0
}
.case-slider a .icon-big-arrow-right,.recent-work a .icon-big-arrow-right {
	height:6px;
	width:30px;
	position:absolute;
	left:35px;
	bottom:30px;
	image-rendering:optimizeSpeed;
	image-rendering:-moz-crisp-edges;
	image-rendering:-o-crisp-edges;
	image-rendering:-webkit-optimize-contrast;
	image-rendering:optimize-contrast;
	-ms-interpolation-mode:nearest-neighbor
}
.case-slider a .icon-big-arrow-right path,.recent-work a .icon-big-arrow-right path {
	fill:#fff
}
.case-slider a h3,.recent-work a h3 {
	font-size:1.4rem;
	line-height:1.13043;
	font-family:Gotham-BoldRegular;
	padding-bottom:5px;
	transition: all ease-in-out 0.3;
	color:#000;
	text-align:center;
}
.case-slider a p,.recent-work a p {
	font-family:gt-pressura-mono-light;
	font-size:.75rem;
	line-height:1.66667;
	transition: all ease-in-out 0.3;
	color:#000;
	text-align:center;
}
.recent-work:after {
	content:" ";
	display:block;
	clear:both
}
.recent-work a {
	float:left;
	width:calc(33.33333333% - 15px);
	margin:0;	
	margin-bottom:30px
}
.recent-work a:nth-child(2n) {
	margin-right:0
}
.case-slider .figure,.recent-work .figure {
	position:relative
}
.case-slider .works-image,.recent-work .works-image {
	position:relative;
	top:0;
	left:auto;
	bottom:0;
	right:0;
	display:block;
	width:10%;
	padding-bottom:39.375%;
	float:left
}
.case-slider .works-image-hover-bg,.case-slider .works-image-origin-bg,.recent-work .works-image-hover-bg,.recent-work .works-image-origin-bg {
	position:absolute;
	right:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:50%
}
.case-slider .works-image-hover-bg,.recent-work .works-image-hover-bg {
	transition:opacity .3s 0s;
	transition:opacity .3s 0s,visibility .3s 0s;
	opacity:0;
	visibility:hidden
}
.case-slider a:hover .works-image-hover-bg,.recent-work a:hover .works-image-hover-bg {
	opacity:1;
	visibility:visible
}
.loader {
	position:fixed;
	z-index:10
}
.loader,.loader .loader-bg {
	width:100%;
	height:100%;
	top:0;
	left:0
}
.loader .loader-bg {
	position:absolute;
	background:#fff
}
.loader .loader-logo-wrapper {
	position: absolute;
	top: 40%;
	left: 50%;
	overflow: hidden;
	width: 100px;
	height: 178px;
	margin-left: -50px;
}
.loader .loader-logo {
	position:relative;
	float:right;
	display:inline-block;
	vertical-align:top;
	width:100%;
	height:100%;
	background-image:url(../images/loading3.gif);
	background-repeat:no-repeat;
}
.loader .loader-logo-overlay {
	position:absolute;
	-webkit-transform:translateY(-100%);
	transform:translateY(-100%)
}
.layer--transition,.loader .loader-logo-overlay {
	top:0;
	left:0;
	background:#014bb8;
	width:100%;
	height:100%
}
.layer--transition {
	position:fixed;
	z-index:8;
	opacity:0;
	visibility:hidden
}
.layer--white {
	background:#fff;
	position:fixed;
	height:100%;
	-webkit-transform:translateY(100%);
	transform:translateY(100%);
	width:100%;
	bottom:0;
	left:0;
	z-index:9
}
.cookie-message-wrapper {
	padding-left:4.16667%;
	padding-right:4.16667%;
	background-color:#000;
	position:fixed;
	padding:15px;
	left:50%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	top:35px;
	opacity:0;
	display:none;
	z-index:7;
	text-align:center
}
.cookie-message {
	line-height:1
}
.cookie-message small {
	display:inline-block;
	vertical-align:middle;
	color:#fff;
	font-family:Gotham-BoldRegular
}
.cookie-message small a {
	color:#fff
}
.cookie-message .cookie-close {
	display:inline-block;
	vertical-align:middle;
	font-size:11px;
	text-transform:uppercase;
	width:70px;
	height:22px;
	line-height:20px;
	border:1px solid #014bb8;
	margin-left:15px;
	cursor:pointer;
	color:#fff;
	text-align:center;
	font-family:National-Semibold;
	will-change:background,color,opacity,visibility;
	transition:all .3s ease-in-out
}
.cookie-message .cookie-close:hover,.fourofour {
	background:#014bb8
}
.fourofour {
	width:100%;
	min-height:650px;
	height:100vh;
	padding:0;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-direction:column;
	flex-direction:column;
	-ms-flex-align:center;
	align-items:center;
	-ms-flex-pack:center;
	justify-content:center
}
.fourofour .row {
	display:table
}
.fourofour .fourofour-inner {
	padding-top:20px;
	padding-bottom:20px;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:center;
	justify-content:center;
	-ms-flex-align:center;
	align-items:center;
	-ms-flex-line-pack:center;
	align-content:center;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap;
	-ms-flex-direction:row;
	flex-direction:row
}
.fourofour .fourofour-inner:after {
	content:" ";
	display:block;
	clear:both
}
.fourofour .fourofour-text {
	margin:0;
	color:#fff;
	padding-right:10%
}
.fourofour .fourofour-text h1 {
	padding-bottom:10px;
	white-space:nowrap
}
.fourofour .fourofour-text p {
	font-size:.8125rem;
	line-height:1.69231;
	letter-spacing:-.01em;
	white-space:nowrap
}
.fourofour .fourofour-snake {
	padding-left:10%
}
.fourofour .fourofour-snake .canvas-wrapper {
	float:right;
	position:relative
}

@media only screen and (min-device-width:0) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape) {
	.mobile-menu-active header nav a {
	font-size:2.25rem
}

} @media only screen and (-o-min-device-pixel-ratio:2/1),only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2) {
	
} @media only screen and (min-width:0) and (max-width:667px) {
.row {
	padding-left:6.48148%;
	padding-right:6.48148%
}
.logo,.logo svg {
	width:100px;
	display:inline-block;
	vertical-align:top
}

.clients h2,.title {
	font-size:2.8125rem
}
.capabilities h2,.header-title,.header h2,.home .work .recent-work-title h2 {

	font-family:latingix,"微软雅黑";
}
#contact dt,.capabilities h3,.contact-company .contact-company-header h2,.fourofour .fourofour-text h1,.subtitle {
	font-size:1.25rem
}
.top-bar {
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	transition:all .3s ease-in-out;
	opacity:0;
	visibility:hidden;
	padding:10px 0
}
.top-bar .row {
	padding-left:6.48148%;
	padding-right:6.48148%
}
.top-bar nav {
	display:none
}
.mobile-menu-active header nav {
	-webkit-transform:translateY(0);
	transform:translateY(0);
	top:15%;
}
.top-bar nav a.active:after, .top-bar nav a:hover:after {
    width: 100%;
}

.logo {
	top:20px;
	left:6.481481481%
}
.hamburger {
	display:block
}
.header {
	padding:20vh 0 15vh;
	
}
.header,.header p {
	font-size:1.25rem
}
.header.case,.header.contact,.header.home,.header.work {
	height:50vh;
	
	padding:0
}
.header.case .row,.header.contact .row,.header.home .row,.header.work .row {
	padding-left:6.48148%;
	padding-right:6.48148%
}
.header.case h2,.header.contact h2,.header.home h2,.header.work h2 {
	clear:both;
	width:100%;
	float:left
}
.header.case p,.header.contact p,.header.home p,.header.work p {
	clear:both;
	width:100%;
	float:left;
	padding-left:0;
	padding-right:0
}
.header.home {
	
}
.is-iphone-portrait .header.home {
	height:calc(100vh - 69px)
}
.header.home .wrap {
	margin-bottom:12.5%
}
.header.contact h2 {
	clear:both;
	width:100%;
	float:left
}
.footer .row {
	padding-left:6.48148%;
	padding-right:6.48148%
}
.footer em {
	display:block;
	margin-top:0;
	position:relative;
	top:auto;
	right:auto
}
.footer span {
	letter-spacing:-1px
}
.reel {
	background:#000;
	height:auto;
	display:block
}
.reel .row {
	padding:130px 6.48148% 0
}
.capabilities {
	padding-bottom:105px
}
.capabilities ul {
	letter-spacing:0;
	line-height:1.4
}
.capabilities dt {
	font-size:1.25rem;
	padding-bottom:10px;
	margin-top:0;
	width:50%
}
.capabilities dd {
	margin-bottom:55px;
	letter-spacing:0;
	width:50%;
	line-height:1.4
}
.capabilities .capabillities {
	padding-top:75px;
	padding-bottom:45px;
	margin-bottom:0
}
.capabilities .all-services h3,.capabilities .all-services ul {
	clear:both;
	width:100%;
	float:left;
	padding-left:0;
	padding-right:0
}
.clients {
	background:#dedddd
}
.clients .clients-inner {
	background:transparent;
	padding:55px 0;
	margin-bottom:20px
}
.clients .clients-list {
	clear:both;
	width:100%;
	float:left;
	padding-left:0;
	padding-right:0
}
.clients h2 {
	padding-bottom:17px
}
.clients p {
	padding-bottom:40px
}
.clients ul a,.clients ul span {
	zoom:.6;
	-webkit-transform:scale(1);
	transform:scale(1)
}
.clients li {
	margin-bottom:22%
}
.clients li:nth-child(9) {
	display:none
}
.gridblock-client-list {
	width:100%;
	font-size:0
}
.gridblock-client-list>* {
	vertical-align:top;
	display:inline-block;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	content:"three";
	font-size:12px
}
.gridblock-client-list.three>* {
	position:relative;
	width:46%;
	margin-right:8%
}
.gridblock-client-list.three>:nth-child(3n) {
	margin-right:8%
}
.gridblock-client-list.three>:last-child,.gridblock-client-list.three>:nth-child(2n) {
	margin-right:0
}
.home .work .recent-work-title {
	padding-top:50px;
	padding-bottom:50px
}
.home .work .work-more {
	padding:0 6.48148% 30px
}
.home .work .btn--more {
	width:100%
}
.works {
	padding-top:52px;
	padding-bottom:27px
}
.works article .layer--#014bb8,.works article a {
	width:86%;
	float:none
}
.works article a h3 {
	font-size:1.25rem
}
.works article a .works-text {
	padding:10px 55px 10px 0
}
#contact {
	padding:40px 0 50px
}
#contact dl {
	clear:both;
	width:100%;
	float:left;
	padding-left:0
}
#contact dl:first-child {
	padding-bottom:33px
}
#contact dd {
	margin-top:2px;
	letter-spacing:0;
	line-height:1.4
}
.contact-info {
	padding-bottom:40px
}
.contact-company .contact-company-header {
	clear:both;
	width:100%;
	float:left;
	padding-bottom:20px
}
.contact-company .contact-company-text {
	clear:both;
	width:100%;
	float:left
}
.contact-company .contact-company-text p {
	margin-bottom:20px;
	letter-spacing:0;
	line-height:1.4
}
.contact-company .contact-company-text p:first-child,.contact-company .contact-company-text p:nth-child(2) {
	width:100%;
	margin-right:0
}
.contact-mosaic {
	padding-bottom:55px
}
.contact-mosaic figure {
	display:block
}
.contact-mosaic figure>div img {
	margin-bottom:7.444%
}
.contact-mosaic figure>div:last-child {
	padding-bottom:0
}
.contact-mosaic figure>div:last-child img:last-child {
	margin-bottom:0
}
.contact-mosaic .img-grid {
	display:block
}
#case {
	padding-top:45px
}
#case .case-intro {
	padding-bottom:80px
}
#case .case-intro-header {
	clear:both;
	width:100%;
	float:left;
	padding-right:0;
	padding-bottom:20px
}
#case .case-intro-header p {
	letter-spacing:0;
	line-height:1.4
}
#case .case-intro-text {
	clear:both;
	width:100%;
	float:left
}
#case .gallery {
	padding-bottom:22px
}
#case .gallery figure {
	margin-bottom:7.444%
}
#case .slider header {
	padding-bottom:25px
}
.case-slider {
	margin-bottom:60px
}
.case-slider a .icon-big-arrow-right,.recent-work a .icon-big-arrow-right {
	display:none
}
.case-slider a h3,.recent-work a h3 {
	font-size:1.25rem
}
.case-slider a h3,.case-slider a p,.recent-work a h3,.recent-work a p {
	color:#000
}
.recent-work a {
	width:100%;
	margin-right:0;
	margin-bottom:30px
}
.cookie-message-wrapper {
	width:100%;
	float:left;
	margin-left:0;
	padding-left:6.48148%;
	padding-right:6.48148%;
	padding:25px 20px;
	top:auto;
	bottom:0
}
.fourofour .fourofour-snake,.fourofour .fourofour-text p {
	display:none
}





}


 @media only screen and (min-width:0) and (max-width:1024px) {
	.clients p,.p {
	font-size:1.0625rem
}
.top-bar nav a.active:after, .top-bar nav a:hover:after {
    width: 100%;
}
.top-bar{
	width:100%;
	
}
.top-bar--empty {
	display:block
}
.footer .logo {
	margin-right:10px
}
.reel .video .btn {
	width:70px;
	height:70px
}
.capabilities h2 {
	padding-bottom:50px;
	padding-left:0;
	padding-right:0
}
.capabilities dl,.capabilities h2 {
	clear:both;
	width:100%;
	float:left
}
.works article {
	height:auto
}
.works article .works-text h3,.works article .works-text p {
	color:#000
}
.works article.animate-width .works-image-hover-bg {
	opacity:1;
	display:block;
	visibility:visible;
	width:100%
}
.works article a .works-image {
	display:none
}
.works article a .works-image-origin-bg {
	top:auto;
	left:auto;
	-webkit-transform:translateY(0);
	transform:translateY(0);
	width:100%;
	position:relative;
	padding-bottom:56.25%
}
.works article a .works-image-hover-bg {
	display:none
}
.works article a .works-text {
	width:100%;
	display:block;
	float:none
}
.works article a h3 {
	padding-bottom:2px
}
.works article a .icon-big-arrow-right,.works article a p:nth-of-type(2) {
	display:none
}
.works article {
	margin-bottom:25px
}
.works article a .works-text {
	display:none;
	width:100%;
	padding:20px 55px 20px 0;
	position:relative;
	box-sizing:border-box
}

.gopro{
	display:block;
}
.gopro h3{
	text-align: center;
	font-size:1.1rem;
	padding:0.3rem 0 0.1rem;
}
.gopro p{
	text-align: center;
	font-size:0.9rem;
	padding: 0.2rem 0;
}

.works article a p {
	padding:0
}
.works article a p:after {
	display:none
}
#case .slider .row:nth-child(2) {
	padding-bottom:6.48148%
}
.case-slider a .figure-caption,.recent-work a .figure-caption {
	position:relative;
	left:auto;
	top:auto;
	padding:10px 0 0;
	color:#000
}
.case-slider a .figure-caption>*,.recent-work a .figure-caption>* {
	opacity:1;
	color:#000
}
.case-slider a .figure-caption svg,.recent-work a .figure-caption svg {
	display:none
}
.case-slider a h3,.recent-work a h3 {
	padding-bottom:2px
}
.case-slider .works-image,.case-slider .works-image-hover-bg,.case-slider a p:nth-of-type(2),.recent-work .works-image,.recent-work .works-image-hover-bg,.recent-work a p:nth-of-type(2) {
	display:none
}
.fourofour .row {
	padding-right:4.16667%
}
.fourofour .fourofour-inner {
	-ms-flex-direction:column;
	flex-direction:column
}
.fourofour .fourofour-text {
	margin-bottom:40px;
	padding-right:0
}
.fourofour .fourofour-snake {
	padding-left:0
}
} @media only screen and (min-width:0) and (max-width:767px) {
.clients h2,.title {
	line-height:1.11111
}
.header h2 {
	text-align:left
}
.header.case .wrap,.header.contact .wrap,.header.home .wrap,.header.work .wrap {
	margin-bottom:22px;

}
.footer {
	padding:20px 0
}
.capabilities h3 {
	padding-bottom:20px
}
.capabilities ul {
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2
}
.capabilities .spacer hr {
	margin-bottom:50px
}
.home .work {
	background:#fff;
	padding-bottom:0
}
#case .slider .nav {
	display:none
}
#case .slider .slick-dots {
	display:block!important;
	position:absolute;
	bottom:calc(100% + 25px);
	right:25px;
	width:auto
}
#case {
	padding-top:40px
}
#case .gallery {
	padding-bottom:20px
}
#case .slider .nav {
	float:left;
	width:100%
}
} @media only screen and (min-width:0) and (max-width:479px) {

.works article {
	position:relative;
	margin-bottom:30px;
	width: 100%;
	overflow:visible;
	float: left;
	box-sizing: border-box;
	padding-left:15px;
	padding-right:15px;
}
	
	.clients ul a img,.clients ul a svg,.clients ul span img,.clients ul span svg {
	width:70%
}
} @media only screen and (min-width:480px) and (max-width:667px) {
	.top-bar.nav-up {
	-webkit-transform:translateY(-124px);
	transform:translateY(-124px)
}

.works article {
	position:relative;
	margin-bottom:30px;
	width: 100%;
	overflow:visible;
	float: left;
	box-sizing: border-box;
	padding-left:15px;
	padding-right:15px;
}

} @media only screen and (min-width:668px) and (max-width:1024px) {
	.row {
	padding-left:4.16667%;
	padding-right:4.16667%
}





.works article {
	position:relative;
	margin-bottom:30px;
	width: 50%;
	overflow:visible;
	float: left;
	box-sizing: border-box;
	padding-left:15px;
	padding-right:15px;
}

.clients h2,.title {
	font-size:3.4375rem
}
.capabilities h2,.header-title,.header h2,.home .work .recent-work-title h2 {


}
#contact dt,.capabilities h3,.contact-company .contact-company-header h2,.fourofour .fourofour-text h1,.subtitle {
	font-size:1.5rem
}
.top-bar.nav-up {
	-webkit-transform:translateY(-124px);
	transform:translateY(-124px)
}
.header,.header p {
	font-size:1.5rem
}
.header.home .wrap {
	margin-bottom:6.25%
}
.reel .row {
	padding:6.25%
}
.capabilities {
	padding-bottom:127px
}
.capabilities ul {
	letter-spacing:0;
	line-height:1.66667
}
.capabilities dt {
	font-size:1.5rem;
	padding-bottom:10px;
	margin-top:-3px
}
.capabilities dd {
	margin-bottom:67px;
	letter-spacing:0;
	line-height:1.66667
}
.capabilities .capabillities {
	padding-top:95px
}
.clients .clients-inner {
	padding:82px 67px;
	margin-bottom:80px
}
.clients .clients-list {
	width:100%;
	float:right
}
.clients h2 {
	padding-bottom:25px
}
.clients p {
	padding-bottom:60px
}
.home .work .recent-work-title {
	padding-bottom:75px
}
.home .work .recent-work-title h2 {
	width:50%;
	float:left;
	padding-right:5%;
	text-align:right
}
.home .work .recent-work-title p {
	width:50%;
	float:left;
	padding-right:0;

	padding-left:15px
}
.home .work .work-more {
	padding-top:62px;
	padding-bottom:62px
}
.works {
	padding-top:78px;
	padding-bottom:40px
}
.works article .layer--#014bb8,.works article a {
	width:91.66667%;
	float:left;
	float:none;
	margin-bottom:78px
}
.works article a h3 {
	font-size:1.5rem
}
#contact {
	padding:60px 0 75px
}
#contact dd {
	margin-top:6px;
	letter-spacing:0;
	line-height:1.66667
}
.contact-info {
	padding-bottom:80px
}
.contact-company .contact-company-text p {
	margin-bottom:20px;
	letter-spacing:0;
	line-height:1.66667
}
.contact-company .contact-company-text p:first-child,.contact-company .contact-company-text p:nth-child(2) {
	width:100%;
	margin-right:0
}
.contact-mosaic {
	padding-bottom:83px
}
#case {
	padding-top:67px
}
#case .case-intro {
	padding-bottom:120px
}
#case .case-intro-header p {
	letter-spacing:0;
	line-height:1.66667
}
#case .gallery {
	padding-bottom:33px
}
#case .gallery figure {
	margin-bottom:4.544%
}
#case .slider header {
	padding-bottom:37px
}
.case-slider {
	margin-bottom:90px
}
.case-slider a h3,.recent-work a h3 {
	font-size:1.5rem
}
.cookie-message-wrapper {
	width:83.33333%;
	float:left
}
} @media only screen and (min-width:668px) and (max-width:767px) {
	.row {
	padding-left:4.16667%;
	padding-right:4.16667%
}
.header.home .wrap {
	margin-bottom:4.16667%
}
.reel .row {
	padding:4.16667%
}
.works article .layer--#014bb8,.works article a {
	width:91.66667%;
	float:left;
	float:none
}
#contact dl {
	clear:both;
	width:100%;
	float:left;
	padding-left:0
}
#contact dl:first-child {
	padding-bottom:33px
}
#case .case-intro-header {
	padding-right:0;
	padding-bottom:40px
}
#case .case-intro-header,#case .case-intro-text {
	clear:both;
	width:100%;
	float:left
}
.case-slider a .figure-caption,.recent-work a .figure-caption {
	position:relative;
	left:auto;
	top:auto;
	padding:20px 0 0;
	color:#000
}
.case-slider a .icon-big-arrow-right,.recent-work a .icon-big-arrow-right {
	display:none
}
.case-slider a h3,.case-slider a p,.recent-work a h3,.recent-work a p {
	color:#000
}
.recent-work a {
	width:100%;
	margin-right:0;
	margin-bottom:30px
}
} @media only screen and (min-width:768px) {
	.case-slider a:hover .figure-caption>*,.recent-work a:hover .figure-caption>* {
	transition:opacity .4s ease-in-out,-webkit-transform .4s ease-in-out;
	transition:opacity .4s ease-in-out,transform .4s ease-in-out;
	transition:opacity .4s ease-in-out,transform .4s ease-in-out,-webkit-transform .4s ease-in-out;
	opacity:1
}
} @media only screen and (min-width:1025px) {
	body {
	width:calc(100% + 7px)
}
.works article {
	position:relative;
	margin-bottom:30px;
	width: 33.33333333%;
	overflow:visible;
	float: left;
	box-sizing: border-box;
	padding-left:15px;
	padding-right:15px;
}
::-webkit-scrollbar {
	width:7px;
	height:7px
}
.top-bar.nav-up {
	-webkit-transform:translateY(-124px);
	transform:translateY(-124px)
}
.top-bar nav a:hover {
	color:#fff;
	text-decoration:none
}
.top-bar nav a.active:after,.top-bar nav a:hover:after {
	width:100%
}
.home .work .recent-work-title h2 {
	width:50%;
	float:left;
	padding-right:10%;
	text-align:right
}
.home .work .recent-work-title p {
	width:50%;
	float:left;
	padding-right:11%;
	padding-left:15px
}
.works article a.is-animate,.works article a:hover {
	background:#fff;
	
}
.works article a.is-animate .works-image-hover-bg,.works article a:hover .works-image-hover-bg {
	opacity:1;
	visibility:visible
}
.works article a.is-animate .works-text,.works article a:hover .works-text {
	top:25px;
	left:30px;
	opacity:1;
}
.works article a.is-animate h3,.works article a.is-animate p,.works article a:hover h3,.works article a:hover p {
	color:#000;
}
.case-slider a:hover,.recent-work a:hover {
	
}
} @media only screen and (min-width:1025px) and (max-width:1219px) {
	.fourofour .row {
	padding-right:4.16667%
}
.fourofour .fourofour-text {
	padding-right:5%
}
.fourofour .fourofour-snake {
	padding-left:5%
}
} @media screen and (max-width:1218px) and (min-width:769px) {
	.header.case p,.header.contact p,.header.home p,.header.work p {
	margin-top:-12px
}
	.fonts{
			font-size:2.5rem;
			padding-top:4rem;
	}
	#nav>.fonts:first-child{
			padding-top:10rem;
	}
	
}

@media screen and (min-width:1442px){
	
.fonts{
		font-size:2.5rem;
		padding-top: 2.5rem;
	}	
	
}


@media screen and (max-width:1441px) and (min-width:1218px) {
	.header.case p,.header.contact p,.header.home p,.header.work p {
	margin-top:-12px
}

.fonts{
		font-size:2.5rem;
		padding-top: 2.5rem;
	}

} @media only screen and (min-width:1440px) and (max-width:1599px) {
	#case {
	padding-top:6.25%
	}
	.fonts{
		font-size: 1.8rem;
		padding-bottom: 3rem;
	}

} @media only screen and (min-width:1600px) {
	body,html {
	font-size:20px;
	}
	.fonts{
		font-size: 1.8rem;
	}
	
.clients ul a img,.clients ul a svg,.clients ul span img,.clients ul span svg {
	width:100%
}
#case {
	padding-top:6.25%
}
} @media only screen and (min-width:1921px) {
	body,html {
	font-size:24px
}
}
@media only screen and (min-width: 375px) and (max-width: 768px)  {
	
.fonts{
	font-weight:bold;
	text-decoration:none;
	color: #fff;
	font-size: 1.8rem;
	padding-top: 3rem;
	width: 400px;
	float: left;
}
#nav>.fonts:first-child{
		padding-top:5rem;
}
.works .more {
	padding:25px 0 50px;
	
}



}



@media print {
	*,:after,:before,:first-letter,:first-line {
	background:transparent!important;
	color:#000!important;
	box-shadow:none!important;
	text-shadow:none!important
}
a,a:visited {
	text-decoration:underline
}
a[href]:after {
	content:" (" attr(href) ")"
}
abbr[title]:after {
	content:" (" attr(title) ")"
}
a[href^="#"]:after,a[href^="javascript:"]:after {
	content:""
}
blockquote,pre {
	border:1px solid #999
}
blockquote,img,pre {
	page-break-inside:avoid
}
img {
	max-width:100%!important
}
h2,h3,p {
	orphans:3;
	widows:3
}
h2,h3 {
	page-break-after:avoid
}
}

@media only screen and (min-width:1025px) and (max-width:1278px) {
.top-bar{
	width:50%;	
	
}
	
	
}