/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*======================================
  this is your main grid stylesheet
======================================*/
*, *:after, *:before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*======================================
  using the selector class I have floated
  all elements to the left and used
  a pseudo to float the last element
  to the right
======================================*/
[class*='bit-'] {
 float: left;
 padding: 10px;
}
[class*='bit-']:last-of-type {
	padding-right: 10px;
	float: right;
}
/*======================================
  clearfix courtesy of @chriscoyier
======================================*/
.frame:after {
	content: "";
	display: table;
	clear: both;
}
/*======================================
  main grid widths
======================================*/
.bit-1 {
	width: 100%;
}
.bit-2 {
	width: 50%;
}
.bit-3 {
	width: 33.33%;
}
.bit-4 {
	width: 25%;
}
.bit-5 {
	width: 20%;
}
.bit-6 {
	width: 16.6666666667%;
}
.bit-7 {
	width: 14.2857142857%;
}
.bit-8 {
	width: 12.5%;
}
.bit-9 {
	width: 11.1111111111%;
}
.bit-10 {
	width: 10%;
}
.bit-11 {
	width: 9.09090909091%;
}
.bit-12 {
	width: 8.33%;
}

/* Landscape and down
===============================*/
@media (max-width: 480px) {
.bit-1 {
	width: 100%;
}
.bit-2 {
	width: 100%;
}
.bit-3 {
	width: 100%;
}
.bit-4 {
	width: 100%;
}
.bit-5 {
	width: 100%;
}
.bit-6 {
	width: 100%;
}
.bit-7 {
	width: 100%;
}
.bit-8 {
	width: 100%;
}
.bit-9 {
	width: 100%;
}
.bit-10 {
	width: 100%;
}
.bit-11 {
	width: 100%;
}
.bit-12 {
	width: 100%;
}
.frame .bit-4:nth-child(2) {
	float: right;
}
.frame .bit-4:nth-child(3) {
	clear: both;
	float: left;
}
.frame .bit-4:nth-child(4) {
	float: right;
}
}

/* Landscape to Tablet Portrait
===============================*/
@media (min-width: 481px) and (max-width: 800px) {
.bit-2 {
/*width:100%;*/
}
.bit-4 {
	width: 50%;
}
.bit-5 {
	width: 100%;
}
.bit-6 {
	width: 50%;
}
.bit-7 {
	width: 100%;
}
.bit-8 {
	width: 50%;
}
.bit-9 {
	width: 100%;
}
.bit-10 {
	width: 50%;
}
.bit-11 {
	width: 100%;
}
.bit-12 {
	width: 50%;
}
}

/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 801px) and (max-width: 1100px) {
.bit-2 {
/*width:100%;*/
}
.bit-4 {
	width: 50%;
}
.bit-7 {
	width: 100%;
}
.bit-8 {
	width: 50%;
}
.bit-10 {
	width: 50%;
}
.bit-12 {
	width: 50%;
}
}
@font-face {
	font-family: 'Benton Sans';
	src: url("fonts/BentonSans-Medium.eot");
	src: local("☺"), url("fonts/BentonSans-Medium.woff") format("woff"), url("fonts/BentonSans-Medium.ttf") format("truetype"), url("fonts/BentonSans-Medium.svg") format("svg");
	font-weight: bold;
	font-style: normal
}
@font-face {
	font-family: 'Benton Sans';
	src: url("fonts/BentonSans-Light.eot");
	src: local("☺"), url("fonts/BentonSans-Light.woff") format("woff"), url("fonts/BentonSans-Light.ttf") format("truetype"), url("fonts/BentonSans-Light.svg") format("svg");
	font-weight: 300;
	font-style: normal
}
@font-face {
	font-family: 'Proxima Nova';
	src: url("fonts/ProximaNova-Bold.eot");
	src: local("☺"), url("fonts/ProximaNova-Bold.woff") format("woff"), url("fonts/ProximaNova-Bold.ttf") format("truetype"), url("fonts/ProximaNova-Bold.svg") format("svg");
	font-weight: bold;
	font-style: normal
}
.i-awwwards, .awwwards {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -559px 0px;
	width: 70px;
	height: 105px
}
.i-feature-collections, .features .feature-icon.feature-collections {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -629px 0px;
	width: 170px;
	height: 170px
}
.i-feature-reader, .features .feature-icon.feature-reader {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -1139px 0px;
	width: 170px;
	height: 170px
}
.i-feature-reading, .features .feature-icon.feature-reading {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -969px 0px;
	width: 170px;
	height: 170px
}
.i-feature-social, .features .feature-icon.feature-social {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -799px 0px;
	width: 170px;
	height: 170px
}
.i-fold, .quotes .quote .fold {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -129px 0px;
	width: 30px;
	height: 60px
}
.i-hello-fold, .hello .banner .fold {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -467px 0px;
	width: 40px;
	height: 40px
}
.i-hello-mail, .hello .banner .mail {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -507px 0px;
	width: 52px;
	height: 48px
}
.i-menu-about-active, .mobile-carousel .mobile-menu ul li a:hover.about-us span, .mobile-carousel .mobile-menu ul li a:active.about-us span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -159px 0px;
	width: 30px;
	height: 22px
}
.i-menu-about, .mobile-carousel .mobile-menu ul li a.about-us span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -189px 0px;
	width: 30px;
	height: 22px
}
.i-menu-facebook-active, .mobile-carousel .mobile-menu ul li a:hover.like-us span, .mobile-carousel .mobile-menu ul li a:active.like-us span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -219px 0px;
	width: 30px;
	height: 22px
}
.i-menu-facebook, .mobile-carousel .mobile-menu ul li a.like-us span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -249px 0px;
	width: 30px;
	height: 22px
}
.i-menu-mail-active, .mobile-carousel .mobile-menu ul li a:hover.say-hello span, .mobile-carousel .mobile-menu ul li a:active.say-hello span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -99px 0px;
	width: 30px;
	height: 21px
}
.i-menu-mail, .mobile-carousel .mobile-menu ul li a.say-hello span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -309px 0px;
	width: 30px;
	height: 21px
}
.i-menu-twitter-active, .mobile-carousel .mobile-menu ul li a:hover.follow-us span, .mobile-carousel .mobile-menu ul li a:active.follow-us span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -339px 0px;
	width: 30px;
	height: 22px
}
.i-menu-twitter, .mobile-carousel .mobile-menu ul li a.follow-us span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -279px 0px;
	width: 30px;
	height: 22px
}
.i-menu-ui-active, header .mobile-menu-activator:hover, header .mobile-menu-activator.active {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -401px 0px;
	width: 33px;
	height: 21px
}
.i-menu-ui, header .mobile-menu-activator {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -434px 0px;
	width: 33px;
	height: 21px
}
.i-social-dribbble, .crew .person .socials a.dribbble {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -44px 0px;
	width: 16px;
	height: 16px
}
.i-social-github, .crew .person .socials a.github {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -28px 0px;
	width: 16px;
	height: 16px
}
.i-social-linkedin, .crew .person .socials a.linkedin {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: 0px 0px;
	width: 12px;
	height: 11px
}
.i-social-mail, .crew .person .socials a.mail {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -12px 0px;
	width: 16px;
	height: 12px
}
.i-social-twitter, .crew .person .socials a.twitter {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -60px 0px;
	width: 17px;
	height: 12px
}
.i-star-big, .quotes .quote.alt .stars span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -369px 0px;
	width: 32px;
	height: 30px
}
.i-star, .quotes .stars span {
	background-image: url(../img/sprite9a92.png?v=1376066142777);
	background-position: -77px 0px;
	width: 22px;
	height: 20px
}
.frame .frame [class*='bit-'], .mobile-carousel .mobile-menu ul li a .frame [class*='bit-'], .frame .mobile-carousel .mobile-menu ul li a [class*='bit-'], .mobile-carousel .mobile-menu ul li .frame a [class*='bit-'], .mobile-carousel .mobile-menu ul li a a [class*='bit-'] {
	float: left;
	padding: 0
}
.frame .frame [class*='bit-']:last-of-type, .mobile-carousel .mobile-menu ul li a .frame [class*='bit-']:last-of-type, .frame .mobile-carousel .mobile-menu ul li a [class*='bit-']:last-of-type, .mobile-carousel .mobile-menu ul li .frame a [class*='bit-']:last-of-type, .mobile-carousel .mobile-menu ul li a a [class*='bit-']:last-of-type {
	padding-right: 0
}
.frame .frame .pad-left, .mobile-carousel .mobile-menu ul li a .frame .pad-left, .frame .mobile-carousel .mobile-menu ul li a .pad-left, .mobile-carousel .mobile-menu ul li .frame a .pad-left, .mobile-carousel .mobile-menu ul li a a .pad-left {
	padding-left: 20px
}
.bit-25 {
	width: 40%
}
.bit-35 {
	width: 60%
}
.bit-23 {
	width: 66.6666666667%
}
@media (max-width: 480px) {
.bit-25 {
	width: 100%
}
.bit-35 {
	width: 100%
}
}
 @media (min-width: 481px) and (max-width: 800px) {
.bit-25 {
	width: 100%
}
.bit-35 {
	width: 100%
}
}
 @media (min-width: 801px) and (max-width: 1100px) {
.bit-25 {
	width: 40%
}
.bit-35 {
	width: 40%
}
}
::selection {
	background-color: #fb5a5a;
	color: #FFF
}
html {
	background: #FFF;
	font-family: 'BentonSans', Helvetica, sans-serif;
	font-weight: 300;
	height: 100%
}
body {
	background: #FFF;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden
}
input:focus, select:focus, textarea:focus, button:focus {
	outline: none
}
input, textarea {
	-webkit-appearance: none;
	border-radius: 0
}
.awwwards {
	display: block;
	position: absolute;
	top: 265px;
	left: 0;
	z-index: 1000
}
.container {
	margin: 0px auto;
	max-width: 1080px;
	width: 90%
}
.hide {
	display: none
}
.chromeframe {
	background: #000;
	color: #FFF;
	font-size: 15px;
	margin-bottom: 0;
	padding: 50px
}
.chromeframe a {
	color: #FFF;
	text-decoration: underline
}
#wrap {
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	min-height: 100%
}
header {
	background: #FFF;
	padding: 25px 0
}
header .top-menu {
	text-align: right;
	margin: 18px 0 0 0;
	padding: 0
}
header .top-menu li {
	display: inline-block;
	margin-right: 50px
}
header .top-menu li:last-child {
	margin-right: 0
}
header .top-menu li a {
	color: #323232;
	font: bold 25px 'Proxima Nova';
	text-decoration: none
}
header .top-menu li a:hover {
	color: #fb5a5a
}
header .mobile-menu-activator {
	position: absolute;
	right: 20px;
	top: 32px;
	cursor: pointer
}
.line {
	background: #df2727;
	height: 10px;
	position: relative
}
.line .arrow {
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-top: 13px solid #df2727;
	height: 0;
	left: 50%;
	margin-left: -13px;
	position: absolute;
	top: 9px;
	width: 0
}
.logo {
	background: url(../img/logo.png) no-repeat center center;
	background-size: cover;
	display: block;
	float: left;
	height: 60px;
	width: 220px
}
footer {
	background: #6A008C;
	color: #C27CF1;
	height: 80px;
	padding-top: 5px
}
footer .copy h3 {
	font: bold 28px 'Proxima Nova';
	margin-top: 1px
}
footer .copy p {
	font-size: 14px;
	font-weight: 400;
	margin-top: 2px
}
footer .copy:hover {
	cursor: default
}
footer .socials {
	text-align: right
}
footer .socials a {
	background-repeat: no-repeat;
	background-position: center right;
	color: #FFF;
	display: inline-block;
	font: bold 16px 'Proxima Nova';
	line-height: 28px;
	height: 28px;
	margin: 12px 0 0 25px;
	opacity: 0.3;
	padding-right: 35px;
	text-decoration: none
}
footer .socials a.facebook {
	background-image: url(../img/footer-facebook.png)
}
footer .socials a.twitter {
	background-image: url(../img/footer-twitter.png)
}
footer .socials a:hover {
	opacity: 1.0;
	-webkit-filter: none
}
input.styled, .crew .person .contact-form .margin input, .hello form input {
	background: white;
	color: #444;
	display: block;
	margin: 0;
	padding: 15px 10px;
	border: 3px solid white;
	font-size: 20px;
	font-family: 'Proxima Nova';
	font-weight: 300
}
input.styled:focus, .crew .person .contact-form .margin input:focus, .hello form input:focus {
	-webkit-transition: all .3s;
	transition: all .3s;
	background-color: #ffbcbc;
	border-color: #f03e3f
}
input.styled:focus::-webkit-input-placeholder, .crew .person .contact-form .margin input:focus::-webkit-input-placeholder, .hello form input:focus::-webkit-input-placeholder {
color:white
}
textarea {
	background: white;
	color: #444;
	height: 140px;
	width: 100%;
	display: block;
	font-family: 'Proxima Nova';
	font-size: 20px;
	font-weight: 300;
	padding: 15px 10px;
	border: 3px solid white
}
textarea:focus {
	-webkit-transition: all .3s;
	transition: all .3s;
	border-color: #BBB
}
textarea:focus::-webkit-input-placeholder {
color:#cbc5c5
}
div.flip {
	position: relative;
	z-index: 10;
	height: 170px;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-o-perspective: 600px;
	perspective: 600px
}
div.flip div.rotate {
	width: 100%;
	height: 100%;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-moz-transition: all 0.6s ease-in-out 0.3s;
	-webkit-transition: all 0.6s ease-in-out 0.3s;
	-o-transition: all 0.6s ease-in-out 0.3s;
	transition: all 0.6s ease-in-out 0.3s
}
div.flip div.rotate>* {
	position: absolute;
	width: 100%;
	height: 100%;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden
}
div.flip div.rotate>div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
div.rotate.x>*:nth-child(2) {
	-moz-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg)
}
div.flip.on>div.rotate.x {
	-moz-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg)
}
div.rotate.y>*:nth-child(2) {
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg)
}
div.flip.on>div.rotate.y {
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg)
}
.carousel {
	background-color: #000;
	margin-bottom: 0;
	position: relative
}
.carousel .movie {
	margin-bottom: -3px;
	text-align: center
}
.carousel .movie video {
	width: 100%;
	max-width: 1170px;
	max-height: 400px;
	margin: 0 auto
}
.carousel h2 {
	font-size: 54px;
	font-weight: 300;
	line-height: 67px;
	color: #FFF;
	top: 50px;
	position: absolute;
	z-index: 2;
	text-align: left
}
.carousel .download-button {
	background: url(../img/download-button.png) no-repeat;
	background-size: cover;
	display: block;
	height: 103px;
	top: 215px;
	width: 400px;
	position: absolute;
	z-index: 2
}
.carousel .download-button:active {
	top: 217px;
	-webkit-filter: brightness(90%)
}
.mobile-carousel {
	height: 400px;
	background: url(../img/teaser-mobile.gif) no-repeat center center #fff;
	position: relative
}
.mobile-carousel>a {
	display: block;
	height: 400px;
	width: 100%;
	position: absolute
}
.mobile-carousel .mobile-menu {
	position: absolute;
	display: none;
	width: 100%
}
.mobile-carousel .mobile-menu ul li {
	display: block
}
.mobile-carousel .mobile-menu ul li a {
	display: block;
	position: relative;
	background: #c5c5c5;
	height: 45px;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	line-height: 45px;
	padding-left: 36px;
	text-decoration: none
}
.mobile-carousel .mobile-menu ul li a.alt {
	background: #c5c5c5
}
.mobile-carousel .mobile-menu ul li a strong {
	display: block;
	float: left
}
.mobile-carousel .mobile-menu ul li a span {
	display: block;
	float: left;
	margin: 11px 10px 0 0
}
.mobile-carousel .mobile-menu ul li a:hover, .mobile-carousel .mobile-menu ul li a:active {
	background: #df2727
}
.features {
	background: #F3F3F3;
	padding: 50px 0 30px 0;
	text-align: center
}
.features .feature-icon {
	height: 170px;
	width: 170px;
	margin: 0 auto
}
.features h3 {
	font-size: 20px;
	font-family: 'Proxima Nova';
	font-weight: bold;
	margin: 18px 0 10px 0
}
.features p {
	font-family: sans-serif;
	font-weight: 300;
	font-size: 13px;
	line-height: 20px;
	padding: 0 20px
}
 @media (max-width: 480px) {
.features .feature-icon.feature-collections {
	background: url(../img/feature-collections-mobile.png) no-repeat center center;
	background-size: cover;
	width: 212px;
	height: 212px;
	margin-bottom: 0
}
.features .feature-icon.feature-social {
	background: url(../img/feature-social-mobile.png) no-repeat center center;
	background-size: cover;
	width: 212px;
	height: 212px;
	margin-bottom: 0
}
.features .feature-icon.feature-reader {
	background: url(../img/feature-reader-mobile.png) no-repeat center center;
	background-size: cover;
	width: 212px;
	height: 212px;
	margin-bottom: 0
}
.features .feature-icon.feature-reading {
	background: url(../img/feature-reading-mobile.png) no-repeat center center;
	background-size: cover;
	width: 212px;
	height: 212px;
	margin-bottom: 0
}
}
.quotes {
	margin: 60px auto 45px auto
}
.quotes .container {
	width: 1080px
}
.quotes .stars {
	margin-bottom: 7px
}
.quotes .stars span {
	display: inline-block
}
.quotes .quote-title {
	background: url(../img/quotes.png) no-repeat;
	background-size: contain;
	min-height: 170px
}
.quotes .top-margin {
	margin-top: 20px
}
.quotes .quote {
	background-color: #F4F4F4;
	color: #7B7B7B;
	font-size: 17px;
	height: 170px;
	line-height: 23px;
	margin-bottom: 20px;
	padding: 15px 12px 15px 15px;
	position: relative
}
.quotes .quote .fold {
	position: absolute;
	right: 0;
	top: 0
}
.quotes .quote.full {
	height: 360px
}
.quotes .quote.full p {
	margin-top: 50px
}
.quotes .quote>span {
	bottom: 15px;
	color: #323232;
	font-size: 13px;
	font-weight: 400;
	position: absolute
}
.quotes .quote.alt {
	background-color: #ab48d8;
	color: #FFF
}
.quotes .quote.alt p {
	font-size: 26px;
	font-weight: bold;
	margin-top: 15px
}
.quotes .quote.alt>span {
	color: #FFF
}
.crew {
	background: #F3F3F3;
	text-align: center;
	padding-bottom: 30px
}
.crew aside {
	display: block;

	height: 210px;
	background-size: cover;
	margin-bottom: -120px
}
.crew aside h2 {
	margin: 0;
	padding: 25px 0 0 0;
	font-weight: bold;
	font-family: 'Proxima Nova';
	font-size: 75px;
	color: #504A50
}
.crew .person {
	background: #FFF;
	position: relative;
	overflow: hidden;
	display: inline-block;
	margin: 40px 50px;
	width: 300px
}
.crew .person .img {
	height: 180px;
	width: inherit;
	position: relative;
	overflow: hidden
}
.crew .person .img li {
	width: 100%
}
.crew .person .img li img {
	width: 100%
}
.crew .person .texts {
	text-align: center;
	padding: 17px 25px 17px 25px
}
.crew .person .texts h3 {
	color: #504A50;
	font: bold 22px 'Proxima Nova';
	margin-bottom: 5px;
	text-transform: uppercase
}
.crew .person .texts span {
	color: #0099CC;
	display: block;
	font: bold 12px 'Benton Sans';
	margin-bottom: 15px
}
.crew .person .texts p {
	color: #A2A2A2;
	font: 14px 'Proxima Nova';
	font-weight: 400;
	line-height: 19px;
	margin-bottom: 30px
}
.crew .person .socials {
	background: #df2727;
	height: 30px;
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 100
}
.crew .person .socials a {
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
	height: 20px;
	margin: 5px 4px 0 4px;
	opacity: 0.3;
	width: 20px;
	-webkit-filter: brightness(0%) contrast(100%)
}
.crew .person .socials a:hover, .crew .person .socials a.active {
	opacity: 1;
	-webkit-filter: none
}
.crew .person .contact-form-image {
	width: 100%;
	height: 180px;
	position: absolute;
	top: 0;
	z-index: 49;
	display: none
}
.crew .person.nichan .contact-form-image {
	background-size: cover;
	background: url(../img/mail-nichan.jpg) no-repeat
}
.crew .person.michan .contact-form-image {
	background-size: cover;
	background: url(../img/mail-michan.jpg) no-repeat
}
.crew .person .contact-form {
	position: absolute;
	width: 100%;
	height: 340px;
	background: #FFF;
	z-index: 50;
	top: 120px;
	left: 0;
	-webkit-transition: top 0.4s;
	transition: top 0.4s
}
.crew .person .contact-form.hidden {
	top: 400px
}
.crew .person .contact-form .response {
	padding: 20px 30px;
	font-size: 16px;
	line-height: 23px;
	font-family: 'Proxima Nova', 'Benton Sans', sans-serif;
	color: #555;
	font-weight: 300
}
.crew .person .contact-form .response strong {
	font-weight: bold;
	color: #0099CC;
	font-size: 18px;
	line-height: 26px
}
.crew .person .contact-form .margin {
	padding: 17px 20px
}
.crew .person .contact-form .margin input {
	width: 100%;
	display: block;
	font-size: 15px;
	margin: 0;
	padding: 8px 10px;
	background-color: #f3f3f3;
	border-color: #f3f3f3
}
.crew .person .contact-form .margin textarea {
	margin: 18px 0;
	padding-top: 6px;
	height: 80px;
	font-size: 15px;
	line-height: 21px;
	background-color: #f3f3f3;
	border-color: #f3f3f3
}
.crew .person .contact-form .margin textarea:focus {
	-webkit-transition: all .3s;
	transition: all .3s;
	background-color: #00b2b2;
	border-color: #00B2B2
}
.crew .person .contact-form .margin textarea:focus::-webkit-input-placeholder {
color:white
}
.crew .person .contact-form .margin input.send {
	font: bold 15px 'Benton Sans';
	border: 0;
	background: #00b2b2;
	float: right;
	display: block;
	height: 35px;
	line-height: 35px;
	color: #FFF;
	width: 100px;
	margin: 0 0 0 15px;
	padding: 0;
	-webkit-appearance: none;
	border-radius: 0
}
.crew .person .contact-form .margin input.send:hover {
	cursor: pointer
}
.hello {
	background-color: #f3f3f3;
	padding-bottom: 50px
}
.hello .banner {
	background: url(../img/hello-bg.jpg) #00b2b2;
	background-size: cover;
	color: #fff;
	text-align: center;
	padding: 28px 0 34px 0;
	position: relative
}
.hello .banner .mail {
	margin: 0 auto 9px auto
}
.hello .banner .fold {
	position: absolute;
	right: 0;
	top: 0
}
.hello .banner h2 {
	display: block;
	font-family: 'Proxima Nova';
	font-size: 58px;
	font-weight: bold
}
.hello .banner p {
	font-family: 'Benton Sans';
	font-size: 28px;
	font-weight: 300;
	line-height: 33px;
	margin-top: 15px
}
.hello form {
	margin: 30px auto 0 auto;
	position: relative;
	width: 720px
}
.hello form input {
	width: 47%;
	float: left;
	margin: 0 0 30px 0
}
.hello form input:first-child {
	margin-right: 6%
}
.hello form textarea {
	background: white;
	color: #444;
	height: 140px;
	width: 100%;
	display: block;
	margin: 0 0 30px 0
}
.hello form .last {
	height: 50px
}
.hello form .last .counter {
	font: bold 20px 'Benton Sans';
	color: #A2A2A2;
	float: right;
	display: block;
	height: inherit;
	line-height: 50px
}
.hello form .last input.send {
	font: 400 20px 'Benton Sans';
	border: 0;
	background: #00b2b2;
	float: right;
	display: block;
	height: inherit;
	color: #FFF;
	width: 190px;
	margin: 0 0 0 15px;
	padding: 0;
	-webkit-appearance: none;
	border-radius: 0
}
.hello form .last input.send:hover {
	cursor: pointer
}
.mobile-only, .tablet-mobile-only {
	display: none
}
@media (max-width: 1100px) {
.quotes {
	display: none
}
}
@media (max-width: 1000px) {
header .top-menu {
	margin-top: 19px
}
header .top-menu li {
	margin-right: 35px
}
header .top-menu li a {
	font-size: 22px
}
.carousel h2 {
	font-size: 40px;
	line-height: 52px;
	top: 30px
}
.carousel .download-button {
	top: 158px
}
}
@media (max-width: 845px) {
header .top-menu {
	margin-top: 20px
}
header .top-menu li {
	margin-right: 29px
}
header .top-menu li a {
	font-size: 20px
}
.carousel h2 {
	font-size: 38px;
	line-height: 48px;
	top: 25px
}
.carousel .download-button {
	top: 140px
}
}
@media (max-width: 815px) {
.hello form {
	width: auto
}
}
@media (max-width: 767px) {
.tablet-mobile-only {
	display: block
}
.top-menu {
	display: none
}
.carousel {
	display: none
}
.hello form {
	width: auto
}
footer .bit-2 {
	width: 100%
}
footer .socials {
	display: none
}
.crew aside h2 {
	font-size: 50px;
	padding-top: 45px
}
}
@media (min-width: 481px) {
.mobile-menu {
	display: none !important
}
}
@media (max-width: 480px) {
.mobile-only, .tablet-mobile-only {
	display: block
}
.mobile-hidden {
	display: none
}
header {
	padding: 0;
	height: 90px
}
header .logo {
	width: 170px;
	height: 45px;
	margin-top: 11px
}
footer {
	background: #838383;
	color: #A2A2A2
}
.carousel {
	display: none
}
.features .bit-4 {
	margin-bottom: 20px
}
.crew aside h2 {
	font-size: 30px;
	padding-top: 35px
}
.crew .person {
	margin: 0 auto 30px auto;
	width: auto;
	overflow-x: hidden
}
.hello .banner {
	background: #00b2b2
}
.hello .banner .mail {
	display: none
}
.hello .banner h2 {
	font-size: 42px;
	padding: 0 20px
}
.hello .banner p {
	font-size: 26px;
	padding: 0 20px
}
.hello form {
	width: auto
}
.hello form input {
	width: 100%;
	margin: 0 0 20px 0;
	float: none
}
.hello form textarea {
	margin-bottom: 20px
}
.hello form .last input.send {
	float: none;
	width: 100%;
	margin: 0
}
.hello form .last .counter {
	display: none
}
}
html.ipad video {
	width: 768px;
	height: 262px
}
html.ipad.window-1024 video {
	width: 1024px;
	height: 350px
}