@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800,600|Open+Sans+Condensed:300,700);
@import url(font-awesome.min.css);
* {
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none
}
:focus {
	outline: 0
}
html {
	height: 100%;
	width: 100%
}
body {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	color: #333;
	font-family: Open Sans, sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 180%;
	overflow: auto;
	-webkit-overflow-scrolling: touch
}

p {
	padding:0px 0
}
a {
	color: #f15623;
	text-decoration: none
}
h1, h2, h3, h4, h5, h6, h7 {
	color: #333;
	font-family: Open Sans, sans-serif;
	margin: 0;
	padding: 0
}
h1 {
	font-size: 42px;
	font-weight: 300;
	line-height: 130%;
    color: #fff;
    text-align: center;
    font-family: 'Open Sans Condensed', sans-serif;
}
h2 {
	font-size: 32px;
	font-weight: 300;
	padding: 10px 0
}
h3 {
	font-size: 24px;
	font-weight: 400;
	line-height: 130%;
	padding: 10px 0
}
.main {
	display: block;
	height: auto;
	min-height: 100%;
	overflow: hidden;
	position: relative;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	z-index: 10;
	width: 100%
}
.content-wrapper {
	margin: 0 auto;
	padding: 100px 50px;
	position: relative;
	max-width: 1200px;
    z-index: 1
}
.content-2-devider {
	float: left;
	width: 45%
}
.content-devider {
	float: left;
	width: 10%;
	min-height: 100px
}
.clearfix {
	width: 100%;
	clear: both
}


h2.promo-text {
	color: #FFF;
	font-family: Open Sans, sans-serif;
	font-size: 100px;
	font-weight: 100;
	line-height: 90%;
	padding: 50px 0;
	position: relative;
	width: 100%
}

@media only screen and (max-width:1250px) {
.content-wrapper {
	padding: 75px 100px
}
}

@media only screen and (max-width:900px) {
.content-wrapper {
	padding: 50px 75px
}
.content-2-devider {
	float: none;
	width: 100%
}
.content-devider {
	display: none
}
}

@media only screen and (max-width:600px) {
body {
	font-size: 18px;
	line-height: 160%
}
.content-wrapper {
	padding: 50px 30px
}
h1 {
	font-size: 28px;
	width: 100%
}
h2 {
	font-weight: 300!important
}
}
.standard-button {
	color: #333;
	background-color: rgba(255, 255, 255, 1);
	display: block;
	font-family: Open Sans, sans-serif;
	font-size: 12px;
	font-weight: 600;
	height: 100px;
	line-height: 100px;
	margin: 20px auto;
	position: relative;
	z-index: 1;
	text-align: center;
	text-decoration: none;
	width: 100px;
	text-transform: uppercase;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-radius: 100%;
	word-wrap: break-word;
	border: 2px solid transparent;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 600ms ease-in-out;
	-moz-transition: all 600ms ease-in-out;
	-o-transition: all 600ms ease-in-out;
	-ms-transition: all 600ms ease-in-out;
	transition: all 600ms ease-in-out
}
.standard-button:after {
	color: #333;
	display: block;
	height: 80px;
	position: absolute;
	z-index: -1;
	width: 80px;
	border: 2px solid rgba(255,255,255,0);
	content: '';
	top: 10px;
	left: 10px;
	border-radius: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out
}
.standard-button:active:after, .standard-button:hover:after {
	height: 102px;
	width: 102px;
	top: -4px;
	left: -4px;
	opacity: 1;
	border-color: rgba(255,255,255,1);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out
}
.standard-button:active, .standard-button:hover {
	background-color: transparent;
	border-color: transparent;
	color: #fff;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out
}
video#bgvid {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-animation: fadein 3s;
	-moz-animation: fadein 3s;
	-ms-animation: fadein 3s;
	-o-animation: fadein 3s;
	animation: fadein 3s
}
@keyframes fadein {
from {
opacity:0
}
to {
opacity:1
}
}
@-moz-keyframes fadein {
from {
opacity:0
}
to {
opacity:1
}
}
@-webkit-keyframes fadein {
from {
opacity:0
}
to {
opacity:1
}
}
@-ms-keyframes fadein {
from {
opacity:0
}
to {
opacity:1
}
}
@-o-keyframes fadein {
from {
opacity:0
}
to {
opacity:1
}
}
.filter {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -10;
	background-size: cover
}

.bg-video-mobile {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background: url(../video/sitemovie.gif)no-repeat 0/cover
}
.menu-wrapper {
	height: 60px;
	overflow: visible;
	position: fixed;
	top: 25px;
	left: 25px;
	width: 60px;
	z-index: 1000
}
.menu-wrapper>div, .menu-wrapper>img {
	background-color: #f15623;
	display: block;
	float: left;
	border-radius: 100%;
	height: 70px;
	line-height: 70px;
	position: absolute;
	z-index: 999999;
	width: 70px;
	text-align: center;
	color: #FFF;
	font-size: 22px;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out
}
#menu-image {
	z-index: 100;
	display: none
}
#menu-button {
	cursor: pointer;
	z-index: 10;
	position: relative
}
#lightbox-close, #menu-close {
	position: fixed;
	display: none;
	cursor: pointer;
	z-index: 10
}
#menu-frame {
	background-color: rgba(0, 0, 0, 0.86);
	display: none;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 100;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

#menu-items {
	left: 0;
	position: relative;
	top: 110px
}
.menu-items li {
	clear: both;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	-webkit-transform: translate3d(-200px, 0, 0);
	-moz-transform: translate3d(-200px, 0, 0);
	-ms-transform: translate3d(-200px, 0, 0);
	-o-transform: translate3d(-200px, 0, 0);
	transform: translate3d(-200px, 0, 0);
	opacity: 0;
	width: 100%
}
.menu-items li a {
  background-color:rgba(255, 255, 255, 0);
  color:#FFFFFF;
  display:block;
  font-family:'Open Sans', sans-serif;
  font-size:28px;
  font-weight:300;
  height:80px;
  line-height:80px;
  padding:0;
  text-align:center;
  text-decoration:none;
}
.menu-items li a:active, .menu-items li a:hover {
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	background-color: rgba(255,255,255,1);
	color: #333
}
.menu-items li a.active {
	color: #f15623
}
.active-items li {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transition-duration: 100ms;
	-webkit-transition-duration: 100ms;
	-moz-transition-duration: 100ms;
	-o-transition-duration: 100ms;
	-ms-transition-duration: 100ms;
	transform: translateY(0);
	opacity: 1
}
.active-items li:nth-child(1) {
	transition-delay: 100ms;
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	-o-transition-delay: 100ms;
	-ms-transition-delay: 100ms
}
.active-items li:nth-child(2) {
	transition-delay: 150ms;
	-webkit-transition-delay: 150ms;
	-moz-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	-ms-transition-delay: 150ms
}
.active-items li:nth-child(3) {
	transition-delay: 200ms;
	-webkit-transition-delay: 200ms;
	-moz-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	-ms-transition-delay: 200ms
}
.active-items li:nth-child(4) {
	transition-delay: 250ms;
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	-ms-transition-delay: 250ms
}
.active-items li:nth-child(5) {
	transition-delay: 300ms;
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	-ms-transition-delay: 300ms
}
.active-items li:nth-child(6) {
	transition-delay: 350ms;
	-webkit-transition-delay: 350ms;
	-moz-transition-delay: 350ms;
	-o-transition-delay: 350ms;
	-ms-transition-delay: 350ms
}

@media only screen and (max-width:600px) {
.menu-wrapper {
	top: 10px;
	left: 10px
}
#menu-items {
	top: 90px
}
.menu-items li a {
	padding: 0 20px
}
}
.intro {
	display: block;
	height: 100%;
	width: 100%;
	z-index: 1;
	position: relative;
	overflow: hidden
}


.intro-fixed {
	height: 100%;
	position: fixed;
	width: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}
.intro-content {
	color: #fff;
	height: 100%;
	margin: 3% auto;
	width: 100%
}
.intro-content .one-liner {
	margin: -350px auto 0;
	max-width: 1000px;
	position: relative;
	text-align:center;
	top: 55%
}
.intro-content .one-liner h1 {
    color: #fff;
    font-family: Open Sans Condensed, sans-serif;
    font-size: 175px;
    font-weight: 600;
    line-height: 90%;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.intro-content .one-liner h2 {
	color: #FFF;
	font-size: 80px;
	text-transform: uppercase;
	font-family: Open Sans Condensed, sans-serif;
	font-weight: 300;
	line-height: 90%;
	padding: 0;
	margin: 0 0 50px 0
}
.move {
	opacity: 0;
	animation: move 1s 1s 1 forwards;
	-webkit-animation: move 1s 1s 1 forwards;
	-moz-animation: move 1s 1s 1 forwards;
	-ms-animation: move 1s 1s 1 forwards;
	-o-animation: move 1s 1s 1 forwards;
	position: relative
}
@keyframes move {
from {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
-moz-transform:translate3d(0, 30px, 0);
-ms-transform:translate3d(0, 30px, 0);
-o-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
to {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@-moz-keyframes move {
from {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
-moz-transform:translate3d(0, 30px, 0);
-ms-transform:translate3d(0, 30px, 0);
-o-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
to {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@-webkit-keyframes move {
from {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
-moz-transform:translate3d(0, 30px, 0);
-ms-transform:translate3d(0, 30px, 0);
-o-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
to {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@-ms-keyframes move {
from {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
-moz-transform:translate3d(0, 30px, 0);
-ms-transform:translate3d(0, 30px, 0);
-o-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
to {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@-o-keyframes move {
from {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
-moz-transform:translate3d(0, 30px, 0);
-ms-transform:translate3d(0, 30px, 0);
-o-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
to {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}

@media only screen and (max-width:1250px) {
.intro-content .one-liner {
	margin: -320px auto 0;
	width: 800px
}
.intro-content .one-liner h2 {
	font-size: 80px
}
.intro-content .one-liner h1 {
	font-size: 100px
}
}

@media only screen and (max-width:900px) {
.intro-content .one-liner {
	margin: -280px auto 0;
	max-width: 600px;
	width: 100%
}
.intro-content .one-liner h2 {
	font-size: 70px
}
.intro-content .one-liner h1 {
	font-size: 80px
}
}

@media only screen and (max-width:600px) {
.intro-content .one-liner {
	margin: -140px auto 0;
	width: 90%
}
.intro-content .one-liner h2 {
	font-size: 30px;
	margin: 0px 0;
	line-height: 100%
}
.intro-content .one-liner h1 {
	font-size: 40px
}
}

.parallax-image {
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
    opacity: 0.3;
    z-index: 0
}
.parallax-image img {
	width: 100%;
	position: relative;
	top: -300px;
	z-index: -1;
}
.statistics {
	text-align: center;
	width: 33.33%;
	float: left
}
.statistics h2 {
	color: #fff
}
.counter {
	border: 2px solid #fff;
	background-color: transparent;
	border-radius: 100%;
	color: #fff;
	font-size: 60px;
	font-weight: 100;
	height: 200px;
	line-height: 330%;
	margin: 0 0 25px;
	padding: 0;
	text-align: center;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 300ms ease-in-out 0s;
	-moz-transition: all 300ms ease-in-out 0s;
	-o-transition: all 300ms ease-in-out 0s;
	-ms-transition: all 300ms ease-in-out 0s;
	transition: all 300ms ease-in-out 0s;
	width: 200px;
}


@media only screen and (max-width:1600px) {
.parallax-image img {
	left: -5%;
	top: 0;
	width: 110%
}
}

@media only screen and (max-width:900px) {
.statistics {
	width: 100%;
	margin: 30px 0
}
.parallax-image img {
	left: -25%;
	top: 0;
	width: 150%
}
}

@media only screen and (max-width:600px) {
.parallax-image {
	height: 350px
}
.parallax-image img {
	left: -50%;
	top: 0;
	width: 200%
}
}

.services-items ul li {
	display: block;
	width: 33%;
	cursor: default;
	float: left
}
.services-items ul li>div {
	padding: 0 20px;
	text-align: center
}
.services-items ul li div h2 {
	text-align: center
}
.services-items ul li div i {
	border-radius: 100%;
	border: 2px solid #333;
	color: #333;
	font-size: 90px;
	height: 200px;
	line-height: 220%;
	margin: 0 50px 30px;
	padding: 0;
	text-align: center;
	width: 200px
}
.services-items ul li:hover div div {
	background-position: 0 -200px
}
.motion-graphics {
	width: 200px;
	height: 200px;
	display: block;
	border: 2px solid #333;
	border-radius: 100%;
	padding: 0;
	margin: 0 auto 30px;
	background-size: 100%;
	background-image: url(../img/rocket.gif)
}
.visual-design {
	width: 200px;
	height: 200px;
	display: block;
	border: 2px solid #333;
	border-radius: 100%;
	padding: 0;
	margin: 0 auto 30px;
	background-size: 100%;
	background-image: url(../img/pencil.gif)
}
.user-experience {
	width: 200px;
	height: 200px;
	display: block;
	border: 2px solid #333;
	border-radius: 100%;
	padding: 0;
	margin: 0 auto 30px;
	background-size: 100%;
	background-image: url(../img/user.gif)
}
.motion-graphics:focus, .motion-graphics:hover {
	background-position: 0 -200px
}

@media only screen and (max-width:900px) {
.services-items ul li {
	width: 100%
}
.services-items ul li:hover div div {
	background-position: none
}
.services-items ul li div div {
	background-position: 0 -200px
}
}

@media only screen and (max-width:600px) {
.services-items ul li>div {
	padding: 40px 0 0
}
}
.social {
	display: block;
	position: relative;
	width: 100%;
	height: auto
}
.social h1, .social h2, .social h3 {
	color: #fff
}
ul.twitter-feed {
	list-style: none;
	padding: 0;
	margin: 0
}
.twitter-feed li {
	background-color: rgba(255,255,255,.2);
	clear: both;
	margin: 60px 0;
	padding: 40px 0 0;
	width: 50%;
	word-wrap: break-word
}
.twitter-feed li:nth-child(odd) {
	float: left
}
.twitter-feed li:nth-child(odd):after {
	height: 0;
	border-style: solid;
	border-width: 0 50px 50px 0;
	border-color: transparent rgba(255,255,255,.2) transparent transparent;
	bottom: -50px;
	clear: both;
	content: "";
	float: left;
	left: 50px;
	position: relative
}
.twitter-feed li:nth-child(even) {
	float: right
}
.twitter-feed li:nth-child(even):after {
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 50px 50px 0 0;
	border-color: rgba(255,255,255,.2) transparent transparent;
	bottom: -50px;
	clear: both;
	content: "";
	float: right;
	right: 50px;
	position: relative
}
.twitter-feed li p {
	padding: 0 40px;
	color: #fff
}
.twitter-feed li .timePosted {
	font-size: 14px;
	font-weight: 400;
	color: #ccc
}
.twitter-feed li .user a:link {
	color: #f15623;
	display: block;
	font-size: 22px;
	font-weight: 400;
	margin: 0 0 20px;
	padding: 30px 30px 0;
	text-decoration: none
}
.twitter-feed li .user span {
	left: 5px;
	position: relative
}

@media only screen and (max-width:1250px) {
.twitter-feed li {
	line-height: 120%;
	margin: 20px auto 30px;
	width: 100%
}
.twitter-feed li:nth-child(odd) {
	float: left
}
.twitter-feed li:nth-child(odd):after {
	border-width: 0 30px 30px 0;
	bottom: -30px;
	float: left
}
.twitter-feed li:nth-child(even) {
	float: left
}
.twitter-feed li:nth-child(even):after {
	border-width: 0 30px 30px 0;
	border-color: transparent rgba(255,255,255,.2) transparent transparent;
	bottom: -30px;
	float: left;
	left: 50px
}
}
.contact {
	color: #fff;
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	padding: 0
}
.contact h1 {
	color: #fff
}

.contact-buttons {
    display: block;
    height: 105px;
    left: -260px;
    margin: 0 50%;
    position: relative;
    width: 520px;
} 

.contact-buttons a {
	float: left;
	margin: 0 13px
}

@media only screen and (max-width:600px) {
.contact-buttons a {
	margin: 25px auto;
	float: none
}

.contact-buttons {
    display: block;
    height: auto;
    left: auto;
    margin: 0;
    position: relative;
    width:auto;
}    
    
.contact {
	text-align: center
}
.contact .content-wrapper div {
	width: 100%!important
}
}
.footer {
	display: block;
	position: relative;
	width: 100%;
	z-index: 10
}
.footer .content-wrapper {
	padding: 20px;
	text-align: center;
	font-size: 13px
}
.logo-invert {
	background-image: url(../img/jasperaarts_logo_large.png);
	background-position: center center;
	background-repeat: repeat-x;
	background-color: rgba(0, 40, 50, 0.5);
	height: 300px;
	width: 100%
}

@media only screen and (max-width:600px) {
.logo-invert {
	background-size: 400%;
	height: 200px
}
}
.transparent, .transparent-blue-bg {
	background-color: rgba(0, 0, 0, 0.3)
}
.transparent h1, .transparent h2 {
	color: #fff
}
.bright {
	background-color: rgba(245, 245, 245, 0.9);
	color: #333;
	display: block;
	height: auto;
	padding: 0;
	position: relative;
	width: 100%;
	overflow: hidden
}

.filled {
	background-color: rgba(245, 245, 245, 1);
}

.bright h1 {
	color: #333;
	font-size: 46px;
	margin: 0;
	padding: 0;
	text-align: center
}
   
}
.transparent-blue-bg h1 {
	color: #fff;
	font-size: 46px;
	margin: 0;
	padding: 0;
	text-align: center
}

.dark {
    background-color: rgba(0, 0, 0, 1);
    color: #ccc
}

.dark h2 {
    color: #fff
}

.bright h2 {
    color: #333;
}

.button {
	background-color: transparent;
	border: 2px solid #333;
	border-radius: 100%;
	color: #333;
	display: inline-block;
	font-family: Open Sans;
	font-size: 30px;
	font-weight: 100;
	height: 70px;
	line-height: 100%;
	margin: 0 50px 30px;
	padding: 0;
	text-align: center;
	width: 70px;
	cursor: pointer;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	-moz-transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	-o-transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	-ms-transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s
}
.button:hover {
	color: #fff;
	background-color: #333
}
.button label, .button label:hover {
	font-size: 18px;
	height: 50px;
	line-height: 20px;
	color: #333;
	padding: 25px 0;
	font-weight: 300;
	width: 65px;
	display: block;
	position: absolute
}
.button.is-checked, .button:active {
	color: #fff;
	background-color: #333;
	border-color: #333
}

.button-group:after {
	content: '';
	display: block;
	clear: both
}

.button-group>form {
	display: block;
	margin: 0 auto;
	width: 475px
}
.button-group .button {
	margin: 0 10px
}
.sticky>.button-group>form {
	display: block;
	padding: 10px;
	width: 325px;
	margin: 0 auto
}
.sticky {
	background-color: #FFF;
	display: block;
	width: 100%;
	height: 80px;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
	max-width: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	animation: slidein 500ms;
	-webkit-animation: slidein 500ms;
	-moz-animation: slidein 500ms;
	-ms-animation: slidein 500ms;
	-o-animation: slidein 500ms
}
@keyframes slidein {
from {
-webkit-transform:translate3d(0, 100px, 0);
-moz-transform:translate3d(0, 100px, 0);
-ms-transform:translate3d(0, 100px, 0);
-o-transform:translate3d(0, 100px, 0);
transform:translate3d(0, 100px, 0)
}
to {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@-moz-keyframes slidein {
from {
-webkit-transform:translate3d(0, 100px, 0);
-moz-transform:translate3d(0, 100px, 0);
-ms-transform:translate3d(0, 100px, 0);
-o-transform:translate3d(0, 100px, 0);
transform:translate3d(0, 100px, 0)
}
to {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@-webkit-keyframes slidein {
from {
-webkit-transform:translate3d(0, 100px, 0);
-moz-transform:translate3d(0, 100px, 0);
-ms-transform:translate3d(0, 100px, 0);
-o-transform:translate3d(0, 100px, 0);
transform:translate3d(0, 100px, 0)
}
to {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@-ms-keyframes slidein {
from {
-webkit-transform:translate3d(0, 100px, 0);
-moz-transform:translate3d(0, 100px, 0);
-ms-transform:translate3d(0, 100px, 0);
-o-transform:translate3d(0, 100px, 0);
transform:translate3d(0, 100px, 0)
}
to {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@-o-keyframes slidein {
from {
-webkit-transform:translate3d(0, 100px, 0);
-moz-transform:translate3d(0, 100px, 0);
-ms-transform:translate3d(0, 100px, 0);
-o-transform:translate3d(0, 100px, 0);
transform:translate3d(0, 100px, 0)
}
to {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
.sticky>.button-group {
	position: relative;
	top: auto!important
}
.sticky>.button-group>form>.button {
	background-color: transparent;
	border: 2px solid #333;
	border-radius: 100%;
	color: #333;
	cursor: pointer;
	display: inline-block;
	font-family: Open Sans;
	font-size: 15px;
	font-weight: 100;
	height: 50px;
	line-height: 100%;
	margin: 5px;
	padding: 0;
	text-align: center;
	transform: translate3d(0, 0, 0);
	-webkit-transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	-moz-transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	-o-transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	-ms-transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	transition: background-color 300ms ease-in-out 0s, color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
	width: 50px
}
.sticky>.button-group>form>.button:hover {
	color: #fff;
	background-color: #333
}
.sticky>.button-group>form>.button.is-checked, .sticky>.button-group>form>.button:active {
	color: #fff;
	background-color: #333;
	border-color: #333
}
.work-item {
	position: relative;
	float: left;
	width: 20%;
	height: 300px;
	margin: 0;
	padding: 0;
	background: #2C3E4B;
	color: #262524;
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
.work-item:after {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0, rgba(0,0,0,.15) 100%);
	background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.15)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0, rgba(0,0,0,.15) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0, rgba(0,0,0,.15) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0, rgba(0,0,0,.15) 100%);
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0, rgba(0,0,0,.15) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#40000000', GradientType=1);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
	cursor: pointer
}
.work-link>div {
	display: none
}
.work-item>img {
	left: -150px;
	position: relative;
	top: 0;
	z-index: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 600ms ease-in-out 0s;
	-moz-transition: all 600ms ease-in-out 0s;
	-o-transition: all 600ms ease-in-out 0s;
	-ms-transition: all 600ms ease-in-out 0s;
	transition: all 600ms ease-in-out 0s
}
.work-item:hover>img {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-ms-transform: scale(1.03);
	-o-transform: scale(1.03);
	transform: scale(1.03)
}
.work-item>img.mob {
	left: 0;
	width: 110%;
	height: auto
}
.work-item .work-overlay {
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.75) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.75) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.75) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#bf000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	bottom: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 300ms ease-in-out 0s;
	-moz-transition: all 300ms ease-in-out 0s;
	-o-transition: all 300ms ease-in-out 0s;
	-ms-transition: all 300ms ease-in-out 0s;
	transition: all 300ms ease-in-out 0s;
	cursor: pointer
}
.work-item:hover .work-overlay {
	opacity: 1;
	-webkit-transition: all 600ms ease-in-out 0s;
	-moz-transition: all 600ms ease-in-out 0s;
	-o-transition: all 600ms ease-in-out 0s;
	-ms-transition: all 600ms ease-in-out 0s;
	transition: all 600ms ease-in-out 0s
}
.work-item:hover .work-info {
	opacity: 1;
	-webkit-transition: all 500ms ease-in-out 0s;
	-moz-transition: all 500ms ease-in-out 0s;
	-o-transition: all 500ms ease-in-out 0s;
	-ms-transition: all 500ms ease-in-out 0s;
	transition: all 500ms ease-in-out 0s
}
.work-item .work-info {
	cursor: pointer;
	opacity: 0;
	position: absolute;
	z-index: 999;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: all 500ms ease-in-out 0s;
	-moz-transition: all 500ms ease-in-out 0s;
	-o-transition: all 500ms ease-in-out 0s;
	-ms-transition: all 500ms ease-in-out 0s;
	transition: all 500ms ease-in-out 0s
}
.work-item > .work-info > div.text {
    background: #f15623 none repeat scroll 0 0;
    bottom: 0;
    height: 47px;
    padding: 25px 0;
    position: absolute;
    text-indent: 25px;
    width: 100%;
    z-index: 2;
}
.work-item>.work-info>div>h3 {
	color: #fff;
	font-family: Open Sans;
	font-size: 22px;
	font-weight: 300;
	text-align: left;
	padding: 0;
	margin: 0 0 5px;
	line-height: 100%
}
.work-item>.work-info>div>h4 {
	color: #fff;
	font-family: Open Sans;
	font-size: 14px;
	font-weight: 300;
	text-align: left;
	padding: 0;
	margin: 0;
	line-height: 100%
}
.work-item>.work-info>span {
	display: block;
	float: right;
	padding-right: 20px;
	position: relative;
	top: 20px;
	z-index: 2
}
.work-item > .work-info > span > i {
    border: 2px solid #fff;
    border-radius: 100%;
    color: #fff;
    display: block;
    float: right;
    font-size: 14px;
    font-weight: 100;
    height: 30px;
    line-height: 210%;
    margin: 0 5px 30px;
    padding: 0;
    text-align: center;
    width: 30px;
}
.work-link {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999
}
.work-item>* {
	margin: 0;
	padding: 0
}
.lightbox {
	background-color: rgba(0, 0, 0, 0.86);
	display: none;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	z-index: 999
}
.lightbox iframe {
	display: block;
	min-height: 100%;
	width: 100%
}
#iframe {
	height: 100%;
	overflow-y: auto;
	position: absolute;
	width: 100%;
	z-index: 99
}
.work-details {
	min-height: 100%;
	height: auto
}
.work-details ul {
	display: block;
	height: auto;
	list-style: none;
	overflow: auto;
	margin: 0;
	text-align: center;
	width: 100%
}
.work-details ul li {
	margin: 0 0 150px
}
.work-details ul li img {
	width: 100%;
	height: auto;
	max-width: 1000px;
	display: inline-block
}
.work-details ul li img.mob {
	max-width: 380px
}
.work-details h1 {
	color: #fff;
	margin: 100px 0;
	font-weight: 100;
	font-size: 46px
}

@media only screen and (max-width:1550px) {
.work-item {
	width: 25%
}
}

@media only screen and (max-width:1250px) {
.work-item {
	width: 33.33%
}
iframe {
	width: 800px;
	height: 449px
}
}

@media only screen and (max-width:900px) {
.work-item {
	width: 50%
}
iframe {
	width: 600px;
	height: 337px
}
}

@media only screen and (max-width:600px) {
.work-item .work-overlay {
	border-bottom: 1px solid rgba(34,34,34,.2);
	bottom: 0;
	opacity: 0.7
}
.work-item .work-info {
	opacity: 1
}
.work-item {
	width: 100%
}

.button-group {
	max-width: 225px;
	display: none
}
.button-group .button {
	margin: 20px
}
.button label {
	display: none
}
.work-details h1 {
	margin: 100px 0 50px
}
.work-details ul li {
	margin: 0 0 50px
}
iframe {
	width: 300px;
	height: 169px
}
}
.navicon-button {
	display: inline-block;
	position: relative;
	padding: 7px 15px;
	transition: .25s;
	cursor: pointer;
	user-select: none
}
.navicon-button .navicon:after, .navicon-button .navicon:before {
	transition: .25s
}
.navicon-button:hover {
	transition: .5s;
	opacity: 1
}
.navicon-button:hover .navicon:after, .navicon-button:hover .navicon:before {
	transition: .25s
}
.navicon-button:hover .navicon:before {
	top: .825rem
}
.navicon-button:hover .navicon:after {
	top: -.825rem
}
.navicon {
	position: relative;
	width: 30px;
	height: 2px;
	background: #fff;
	transition: .5s;
	border-radius: 0
}
.navicon:after, .navicon:before {
	display: block;
	content: "";
	height: 2px;
	width: 30px;
	background: #fff;
	position: absolute;
	z-index: -1;
	transition: .5s .25s;
	border-radius: 0
}
.navicon:before {
	top: 10px
}
.navicon:after {
	top: -10px
}
.open:not(.steps) .navicon:after, .open:not(.steps) .navicon:before {
	top: 0!important
}
.open .navicon:after, .open .navicon:before {
	transition: .5s
}
.open {
	transform: scale(.75)
}
.open.larr .navicon:after, .open.larr .navicon:before, .open.rarr .navicon:after, .open.rarr .navicon:before, .open.uarr .navicon:after, .open.uarr .navicon:before {
	width: 1.5rem
}
.open.larr .navicon:before, .open.rarr .navicon:before, .open.uarr .navicon:before {
	transform: rotate(35deg);
	transform-origin: left top
}
.open.larr .navicon:after, .open.rarr .navicon:after, .open.uarr .navicon:after {
	transform: rotate(-35deg);
	transform-origin: left bottom
}
.open.uarr {
	transform: scale(.75) rotate(90deg)
}
.open.rarr .navicon:before {
	transform: translate3d(1em, 0, 0) rotate(-35deg);
	transform-origin: right top
}
.open.rarr .navicon:after {
	transform: translate3d(1em, 0, 0) rotate(35deg);
	transform-origin: right bottom
}
.open.plus .navicon, .open.x .navicon {
	background: 0 0
}
.open.plus .navicon:before, .open.x .navicon:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg)
}
.open.plus .navicon:after, .open.x .navicon:after {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg)
}
.open.plus {
	transform: scale(.75) rotate(45deg)
}

/* Intro text */