@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: "Brandon Text";
    font-style: light;
    src: url('font/brandontext-light.otf');
}
@font-face {
    font-family: "Brandon Text Medium";
    font-weight: medium;
    src: url('font/brandontext-medium.otf');
}

html, body {
	margin: 0;
    padding: 0;
    text-align: center;
}

body{
	margin: 0;
	width: 100%;
	padding: 0;
	background-color: #ffffff;
	text-align: center;

	font-family: "Helvetica Neue";
	color: #000000;
	font-size: 19px;
	font-weight: 300;
}

p{
	margin: 0 0 20px 0;
}

p, ul{
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:200;
	font-style:normal;
}

a{
	color: #000000;
	font-style:normal;
	text-decoration: none;
}

img{
	border: 0;
}

h1, #pixels{
	font-family:"Helvetica Neue", Verdana, serif;
	font-size: 30px;
	font-weight:200;
	font-style:normal;
	font-size: 55px;
	color: #000000;
}

h2{
	font-family:"Helvetica Neue", Verdana, sans-serif;
	font-size: 24px;
	font-weight:200;
	font-style:normal;
}

#header h1, #pixels{
	color: #48941A;
}

#nav{
	list-style: none;
	position: fixed;
	right: 20px;
	z-index: 400;
}

#nav li{
	margin: 0 0 15px 0;
}

#header, #intro, #second{
	width: 100%;
}

#tabbar {
	width: 100%;
	height: 63px;
	background-color: #25b8e9;
	position: fixed;
	z-index: 800;
}

#topbar {
	width: 100%;
	height: 63px;
	position: fixed;
	z-index: 1100;
}

#hiding_bar {
	width: 100%;
	height: 400px;
	background-color: #ffffff;
	position: absolute;
	z-index: 900;
	margin-top: -200px;
}

#container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 1020px;
}

	#logo, #navigation {
		display: inline-block;
	}

	#logo {
		float: left;
		margin-left: 20px;
		margin-top: 21px;
	}

	#navigation {
		float: right;
		margin-left: 20px;
		margin-top: 21px;

		font-family: "Helvetica Neue";
		font-size: 17px;
		color: #ffffff;
		font-weight: 300;
	}

	#navigation a {
		color: #ffffff;
		opacity: 1;
	}

	#navigation a:hover {
		opacity: 0.5;

		-webkit-transition: linear opacity 0.2s; /* Safari */
		transition:  linear opacity 0.2s;
	}

	.nav_button {
		padding: 7px 20px;
		border-radius: 3px;
		border: 1px solid #ffffff;
		color: #ffffff;
	}

  .nav_button + .nav_button {
    margin-left: 15px;
  }



#launch {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-top: 300px;
	width: 100%;
	height: 400px;
	background: url(images/background.png) 50% 0 no-repeat;
	background-size: cover;
	z-index: 1000;

	font-family: "Helvetica Neue";
	font-size: 24px;
	color: #ffffff;
	font-weight: 300;
}

#screenshot1 {
	position: relative;
	width: 100%;
	min-height: 800px;
	background-color: #ffffff;
	padding-top: 100px;
}

#screenshot2 {
	position: relative;
	width: 100%;
	min-height: 800px;
	background-color: #eef5f7;
	padding-top: 100px;
}

#screenshot3 {
	position: relative;
	width: 100%;
	min-height: 800px;
	background-color: #ffffff;
	padding-top: 100px;
}

#block_download {
	width: 100%;
	min-height: 800px;
	background-color: #ffffff;
	margin-bottom: 100px;
}

	#devices {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		width: 990px;
		height: 600px;
		background: url(images/devices.png) 50% 0 no-repeat;
		background-size: 990px auto;
		margin-bottom: -30px;
	}

	.downloadnow {
		font-family: "Helvetica Neue";
		color: #000000;
		font-size: 19px;
		font-weight: 300;

		padding: 14px 40px;
		border-radius: 3px;
		border: 1px solid #000000;
	}

	.downloadnow:hover {
		opacity: 0.3;

		-webkit-transition: linear opacity 0.1s; /* Safari */
		transition:  linear opacity 0.1s;
	}

	.small_text {
		font-family: "Helvetica Neue";
		color: #bdbdbd;
		font-size: 15px;
		font-weight: 300;
	}

#block_business {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	background-color: #f8f8f8;
	padding-top: 70px;
	padding-bottom: 100px;
}

	#step1, #step2, #step3 {
		display: inline-block;
		width: 300px;
		height: 300px;
		margin: 30px 40px;

		vertical-align: top;
		text-align: center;
	}

#block_recommendations {
	background: url(images/watchmovie.png) 50% 0 no-repeat;
	background-size: cover;
	width: 100%;
	height: 412px;
	background-color: #ffffff;
}

	#recommendations_content {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding-top: 140px;

		width: 800px;
		font-family: "Helvetica Neue";
		color: #ffffff;
		font-size: 26px;
		font-weight: 200;
	}

#intro{
	background: url(images/header.png) 50% 0 no-repeat fixed;
	background-size: 1280px auto;
	min-width: 1000px;
	height: 510px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

#stars {
    background: url(images/stars.png) 50% 0 no-repeat;
    background-size: 1200px auto;
    height: 100%;
    width: 100%;
    position:fixed;
    z-index: 100;

    -webkit-animation: slide1 20s linear infinite;
       -moz-animation: slide1 20s linear infinite;
            animation: slide1 20s linear infinite;
}

@-webkit-keyframes slide1
{
    0%   {background-position: 100% 0; opacity: 1;}
    50%  {background-position: 0 0; opacity: 0.4;}
    100% {background-position: 100% 0; opacity: 1;}
}

@-moz-keyframes slide1
{
    0%   {background-position: 100% 0;}
    50%  {background-position: 0 0;}
    100% {background-position: 100% 0;}
}

@keyframes slide1
{    0%   {background-position: 100% 0;}
    50%  {background-position: 0 0;}
    100% {background-position: 100% 0;}
}

#cloud
{
    background: url(images/cloud.png) 50% 0 no-repeat;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 100;

    -webkit-animation: slide 70s linear infinite;
       -moz-animation: slide 70s linear infinite;
            animation: slide 70s linear infinite;
}


@-webkit-keyframes slide
{
    0%   {background-position: 0 0;}
    50%  {background-position: 100% 0;}
    100% {background-position: 0 0;}
}

@-moz-keyframes slide
{
    0%   {background-position: 0 0;}
    50%  {background-position: 100% 0;}
    100% {background-position: 0 0;}
}

@keyframes slide
{
    0%   {background-position: 0 0;}
    50%  {background-position: 100% 0;}
    100% {background-position: 0 0;}
}

.contact {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2000;
	font-family: "Helvetica Neue", Verdana, sans-serif;
	font-size: 24px;
	font-weight: 200;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #25b8e9;
	color: #ffffff;


	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #b1ecff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #b1ecff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #b1ecff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #b1ecff;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #b1ecff;
}

.contact:target {
	opacity:1;
	pointer-events: auto;
}

.contact > div {
	position: relative;
	margin: 5% auto;
	border-radius: 10px;
}

.close {
	opacity: 0.5;
	transition: ease 0.5s opacity;
	transition-moz: ease 0.5s opacity;
}


textarea:focus, input:focus{
    outline: 0;
}

#box {
	width: 100%;
	text-align: left;
}

#box input {
	width: 400px;
	height: 46px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #ffffff;
	margin-top: 10px;
	text-align: left;
	text-decoration:none;

	color: #ffffff;
	font-size: 20px;
	font-family: "Helvetica Neue";
	font-weight: 200;
}

#box textarea {
	width: 400px;
	height: 200px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #ffffff;
	margin-top: 20px;
	text-align: left;
	resize: none;

	color: #ffffff;
	font-size: 20px;
	font-family: "Helvetica Neue";
	font-weight: 200;
}

#send {
	width: 100%;
	text-align: center;
}

#send input {
	width: 200px;
	height: 47px;
	border: 1px solid #ffffff;
	border-radius: 999px;
	text-align: center;
	padding-top: 2px;
	background-color: rgba(255,255,255,0.1);

	color: #ffffff;
	font-family: "Open Sans", "Helvetica Neue", Verdana;
	font-weight: 200;
	font-size: 16px;

	-webkit-transition: ease background-color 0.5s, color 0.5s; /* Safari */
    transition:  ease background-color 0.5s, color 0.5s;
}

#send input:hover{
	background-color: #ffffff;
	color: #000000;
}

.close:hover {
	opacity: 1;
}

#box {
	width: 430px;
	height: 400px;
	border-radius: 10px 10px 0px 0px;

	text-align: center;
	padding: 20px 20px;
}

#tagline {
	color: #ffffff;
	font-family: "Brandon Text", "Helvetica Neue", Verdana;
	font-weight: light;
	font-size: 30px;
	letter-spacing: 3px;
	text-transform: uppercase;


	top: 12%;
	width: 100%;
	min-width: 1000px;
	text-align: center;
	position: fixed;
	z-index: 200;
}

#button-contact {
	width: 250px;
	height: 38px;
	border-radius: 2px;
	text-align: center;
	padding-top: 15px;
	background-color: #ff3366;

	color: #ffffff;
	font-family: "Brandon Text Medium", "Helvetica Neue", Verdana;
	font-weight: medium;
	font-size: 16px;
	letter-spacing: 1px;

	-webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

#button-contact:hover{
	background-color: #e02d5f;
	color: #ffffff;
}

#box1 {
	padding-top: 300px;
	padding-left: 700px;
	position: absolute;
	z-index: 300;

	color: #353535;
	font-size: 36px;
	font-family: "Helvetica Neue";
	font-weight: 200;
}

#box1-paragraph {
	padding-top: 20px;
	line-height: 30px;

	color: #a4a4a4;
	font-size: 22px;
}

@media (max-width: 1000px) {
	#box1{
		display: none;
	}
}

#white_sep {
	width: 100%;
	height: 21px;
	background-color: #ffffff;
	z-index: 1000;
	position: relative;
	float: left;
}

#cta {
	width: 100%;
	background-color: #ffffff;
	z-index: 1000;
	position: relative;
	float: left;
}

#cta-content {
	width: 49.1%;
	position: absolute;
	float:left;
	text-align: center;
	padding-top: 100px;

	font-family: "Brandon Text Medium", "Helvetica Neue", Verdana;
	color: #ffffff;
	font-size: 32px;
	letter-spacing: 5px;
}

#cta-discover {
	position: relative;
	text-align: center;
	margin: auto;
	padding-top: 15px;
	margin-top: 100px;

	width: 200px;
	height: 35px;
	border-radius: 2px;
	text-align: center;
	border: 1px solid #ffffff;

	font-family: "Brandon Text Medium", "Helvetica Neue", Verdana;
	color: #ffffff;
	font-size: 14px;
	letter-spacing: 2px;

	-webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;
}

#cta-discover:hover {
	background-color: #000000;
}

#cta img, #whyus img {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}

#designdev, #digitalmarket {
	display: inline-block;
}

#designdev {
	width: 49.1%;
	z-index: 1000;
	float: left;
	left: 0;
}

#digitalmarket {
	width: 49.1%;
	z-index: 1000;
	float: right;
	right: 0;
}

#cta2 {
	width: 100%;
	background-color: #ffffff;
	z-index: 1000;
	position:relative;
	text-align: center;
	float: left;
}

#cta2-content {
	width: 100%;
	position: absolute;
	float:left;
	text-align: center;
	padding-top: 95px;

	font-family: "Brandon Text Medium", "Helvetica Neue", Verdana;
	color: #ffffff;
	font-size: 32px;
	letter-spacing: 5px;
}

.subhead {
	letter-spacing: 1px;
	font-family: "Brandon Text", "Helvetica Neue", Verdana;
	font-size: 26px;

}

#whyus {
	width: 100%;
	z-index: 1000;
	float: left;
}

#contact-us {
	width: 100%;
	background-color: #ffffff;
	z-index: 1000;
	position: relative;
	float: left;
	text-align: center;

	padding-top: 95px;
	padding-bottom: 95px;

	font-family: "Brandon Text Medium", "Helvetica Neue", Verdana;
	color: #000000;
	font-size: 32px;
	letter-spacing: 5px;
}

#footer {
	width: 100%;
	height: 200px;
	background-color: #f8f8f8;
	text-align: center;
	padding-top: 110px;
	position: relative;
	z-index: 300;
	float: left;

	color: #ababab;
	font-size: 16px;
	font-family: "Helvetica Neue";
	font-weight: 100;
	letter-spacing: 1px;
}

#footer img {
	position: relative;
	z-index: 500;
	opacity: 0.4;
	transition: ease 0.7s opacity;
	transition-moz: ease 0.7s opacity;
}

#footer img:hover {
	opacity: 1;
}

#sep {
	width: 1px;
	height: 300px;
	background-color: #e1e1e1;
	vertical-align: top;
	margin-top: 130px;
	z-index: 1000;
	position: relative;
}


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: #29d;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
  transform: translateX(100%) translateY(-100%) rotate(45deg);
  pointer-events: none;
}

.pace.pace-active .pace-activity {
  -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.pace .pace-activity::before,
.pace .pace-activity::after {
    position: absolute;
    bottom: 30px;
    left: 50%;
    display: block;
    border: 5px solid #fff;
    border-radius: 50%;
    content: '';
}

.pace .pace-activity::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: rgba(0, 0, 0, .2);
    border-left-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-rotation 3s linear infinite;
    animation: pace-rotation 3s linear infinite;
}

.pace .pace-activity::after {
    bottom: 50px;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    border-top-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-rotation 1s linear infinite;
    animation: pace-rotation 1s linear infinite;
}

@-webkit-keyframes pace-rotation {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}


.c-contact {

}


.swaychat-module {
  left: 0 !important;
}