/*
 * Globals
 */
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritence from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  /*font-family: 'Open Sans', sans-serif;*/
  font-family: 'Quicksand', sans-serif;

}
body {
  color: #fff;
  text-align: center;
  /*text-shadow: 0 1px 3px rgba(0,0,0,.5);*/

}

h2{
  text-transform: none;
}

placeholder{
  colour: #232323;
}

.grey-filter{
  z-index: 1;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 0, 0, 0.5);
}

.cover-heading{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 40px;
}

#landing{
	background-image:url(images/background-new.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height:857px;
  width: 60%;
  float: left;
  display: inline-block;
}

.col-sm-5{
  background-color: #eeeeee;
  max-height:857px;
  min-height:857px;
}

.nav{
  max-height: 110px;
}

.nav-container{
	max-width: 1500px;
	display:inline-block;
	width:100%;
  margin-top: 25px;
}

.logo-left {
    float: left;
    padding: 10px;
}

.learnMoreIcon{
  height: 80px;
  width: auto;
}

.nav-list {
    float: left;
    padding: 10px;
}

.nav-list ul li{
	display:inline-block;
	padding-left:50px;
	padding-right:50px;
}

.nav-list ul li a{
	font-size: 46px;
	color: #232323;
	font-weight: 300;
}

.nav-list ul li a:hover{
	text-decoration:none;
	color:#23527c !important;
}

#email{
  color: #232323;
}

form#subForm{
	padding-top:10px;
}

.left-box{
	float: left;
    display: inline-block;
    max-width: 50%;
}
.left-box-1{
	float: left;
    display: inline-block;
    max-width: 50%;
	background-color: #eeeeee;
}
.left-text > h2, .center-text > h2{
	margin-top:60px;
}

.or{
	display: inline-block;
    margin-top: 190px;
    margin-left: -35px;
    position: absolute;
}
.right-img-box{
	display: inline-block;
    max-width: 50%;
}
.center-text {
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    float: right;
    max-width: 45%;
}
.center-text p{
	padding: 50px 50px 0px 50px;
    color: #232323;
    font-weight: 300;
    font-size: 24px;
    vertical-align: middle;
}

.center-text h2{
	text-align: center;
}

.left-text {
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}
.left-text p{
	padding: 50px;
    color: #232323;
    font-weight: 300;
    font-size: 24px;
    vertical-align: middle;
}

.left-text h2{
	text-align: center;;
}

section#about, section#about-a, section#about-b{
	height:100%;
	max-height:599px;
}

a.button{
	/*background-color:#3498db;*/
  background-color:#fff;
  color:#3498db;
	border:1px solid #3498db;
	border-radius:10px;
	padding:5px 15px;
}
a.button:hover{
	background-color:#fff;
	color:#3498db;
	text-decoration:none;
}

#googleButton{
  background-color:#3498db;
  color:#fff;
	border:1px solid #3498db;
	border-radius:10px;
	padding:5px 15px;
  transition: background-color 0.5s ease;
}

#googleButton:hover{
  background-color:#fff;
	color:#3498db;
	text-decoration:none;
}

#footer{
	background-color:#3498db;
	width:100%;
	text-align:center;
}
.footer-title{
	color:#fff;
	width:100%;
	text-align:center;
}
.footer-container{
	width:100%;
	text-align:center;
	max-width:1300px;
	display:inline-block;
}
.footer-left, .footer-right{
	max-width:50%;
	display:inline-block;
	text-align:left;
	font-size:24px;
	font-weight:300;
	color:#fff;
	vertical-align:top;
}

.left-box > img{
	width:100%;
	height:auto;
}
.right-img-box > img {
    width: 100%;
    height: auto;
}

/* ------- MEDIA QUERIES -------*/

@media(min-width:1660px) {

  section div#introduction{
    width:40%;
  }
  section#about div#downloadLinks div#ios{
    margin-right: 30%;
  }
  section#about div#downloadLinks div#google{
    margin-left: 30%;
  }
}

@media(max-width:1660px) {
  .learnMoreIcon {
    height: 80px;
    width:auto;
  }
  section div#introduction{
    width:40%;
  }
  section#about div#downloadLinks div#ios{
    margin-right: 30%;
  }
  section#about div#downloadLinks div#google{
    margin-left: 30%;
  }
}

@media(max-width:1512px) {
	.left-text p, .center-text p {
		font-size:20px;
	}
	.or {
		display:none;
	}
	section#about-a {
		/*margin-top:50px;*/
		max-height:auto;
	}
}

@media(max-width:1440px) {
  .learnMoreIcon {
    display: none;
  }
}

@media(max-width:1255px) {
  section#about div#downloadLinks div#ios{
    margin-right: 20%;
  }
  section#about div#downloadLinks div#google{
    margin-left: 20%;
  }
}

@media(max-width:1186px) {
	section#about-a {
		margin-top:100px;
	}
	section#about {
		margin-top:30px;
	}
}

@media(max-width:1154px) {
  div#introduction h1 {
    padding-top: 60px;
    font-size: 32px;
    font-weight: bold;
  }
  div.countdown.styled {
    margin: 0px 15px 0px 15px;
  }
  div.countdown.styled div {
    font-size: 25px;
  }
  div.countdown.styled div span{
    font-size: 15px;
  }
  hr{
    display: none;
  }
}

@media(max-width:1100px) {
	section#about, section#about-a, section#about-b {
		text-align:center;
		height:auto;
	}
	section#about-a {
		/*margin-top:800px;*/
	}
	section#about-b {
		/*margin-top:700px;*/
	}
	#footer {
		/*margin-top:600px;*/
	}
	.left-box, .left-box-1, .right-box, .right-img-box{
		float:right;
		text-align:center;
		width:100%;
		max-width:100%;
	}
	.center-text{
		max-width:100%;
	}
  section#about div#downloadLinks div#ios div i{
    color: white;
  }
  section#about div#downloadLinks div#google div i{
    color: white;
  }
}
@media(max-width:993px) {
  .learnMoreIcon {
    height: 80px;
    width:auto;
    display: block;
  }
  .nav-list ul li a {
		font-size:30px;
  }
  div.countdown.styled div {
    font-size: 20px;
  }
  div.countdown.styled div span{
    font-size: 10px;
  }
  p#intro{
    font-size: 14px;
  }
  #beta i.fa-android{
    font-size:50px;
  }
}
@media(max-width:845px) {
  section#about div#downloadLinks div#ios{
    margin-right: 5%;
  }
  section#about div#downloadLinks div#google{
    margin-left: 5%;
  }
}
@media(max-width:823px) {
	.nav-list ul li a {
		font-size:20px;
	}
	.nav-list ul li {
		padding-left:10px;
		padding-right:10px;
	}
  div.countdown.styled div {
    margin-left:20px;
  }
  p#beta{
    font-size: 14px;
  }
  p#intro{
    font-size: 14px;
  }
  form#subForm div.input-group{
    width:250px;
  }
}
@media(min-width:557px){
  #clientBox{
    height: 540px;
  }
}
@media(max-width:623px) {
  .learnMoreIcon {
    display: none;
  }
  .input-group-btn{
    display: inline;
  }
  .input-group-btn:last-child>.btn{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-top: 10px;
  }
}
@media(max-width:557px) {
	.nav-list ul li a {
		font-size:14px;
	}
  p#intro.lead{
    font-size: 16px;
  }
	section#about-b {
		/*margin-top:730px;*/
	}
	.logo {
		height:30px !important;
	}
	.footer-left, .footer-right {
		font-size:16px;
	}
	#footer {
		/*margin-top:650px;*/
	}
  section#about div#downloadLinks div#ios{
    margin-left: 30%;
    margin-right: 30%
  }
  section#about div#downloadLinks div#google{
    margin-right: 30%;
    margin-left: 30%;
  }
  section#footer div.footer-container div.footer-title h2{
    margin-left: 20%;
    margin-right: 20%;
  }
  section div#landing{
    width:100%;
  }
  section div#introduction{
    width:100%;
    float: left;
    display: inline-block;
  }
  .learnMoreIcon{
    display: inherit;
  }
  #clientInfo{
    padding-top: 25px;
  }
  .input-group-btn{
    display: table-cell;
  }
  .input-group-btn:last-child>.btn{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-top: 0px;
  }
}
/*@media(max-width:950px) {
	.nav-list ul li a {
		font-size:30px;
	}
}*/
/*@media(max-width:775px) {
	.nav-list ul li a {
		font-size:20px;
	}
	.nav-list ul li {
		padding-left:10px;
		padding-right:10px;
	}
}*/
/*@media(max-width:515px) {
	.nav-list ul li a {
		font-size:14px;
	}
	section#about-b {
		margin-top:730px;
	}
	.logo {
		height:30px !important;
	}
	.footer-left, .footer-right {
		font-size:16px;
	}
	#footer {
		margin-top:650px;
	}
}*/
@media(max-width:500px) {
	section#about-b {
		margin-top:880px;
	}
	section#about-a {
		margin-top:1000px;
	}
	#footer {
		margin-top:750px;
	}
	.footer-left, .footer-right {
		font-size:12px;
	}
	img.footer-img {
		height:20px !important;
	}
}
@media(max-width:430px) {
	section#about-b {
		margin-top:980px;
	}
}
@media(max-width:410px) {
	section#about-b {
		margin-top:1100px;
	}
	section#about-a {
		margin-top:1150px;
	}
}
@media(max-width:290px) {
  .learnMoreIcon{
    display: none;
  }
}

/* ------- END OF MEDIA QUERIES -------*/

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
          box-shadow: inset 0 0 100px rgba(0,0,0,.5);

}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding-bottom: 10px;
}

.text-primary{
  /*font-family: 'Open Sans', sans-serif;*/
  margin-bottom: 0;
  /*color: #3498db;*/
  color:#232323;
  font-weight: 300;
  font-size:46px;
  padding-top:100px;
}

.lead{
  /*font-family: 'Open Sans', sans-serif;*/
  font-weight: 300;
  font-size: 20px;
  display:inline-block;
  max-width:1000px;
  padding-top:40px;
  color:#232323;
  margin-left:20px;
  margin-right: 20px;
}

.btn-primary{
  font-family: 'Quicksand', sans-serif;
}


/*
 * Header
 */

.masthead {
  margin-top: 28px;
}

masthead-brand {
  margin-bottom: 10px;
  letter-spacing: 5px;
}

.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
  color: rgba(255,255,255,.75);
  border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

.logo{
    height: 60px;
  }

  .logoInText{
    height:40px;
    vertical-align:0px;
  }

.ying-yang{
  height: 200px;
  margin-bottom: 5%;
}

.phone{
  height: 500px;
  margin-bottom: 5%;
}

.big-logos{
  font-size:152px;
}

.banner-text{
  text-shadow: 1px 1px 1px #000000;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

.textbox{
  height: auto;
  width: 60%;
  margin: auto;
  padding:7px;
  border-radius: 10px;
  box-shadow: 2px 2px 2px #000000;
  border: 2px solid #FFFFFF;
}

/* --------- CREDIT CARD CSS --------- */

.fa-cc-visa, .fa-cc-mastercard, .fa-cc-amex, .fa-paypal{
  transition: .3s ease-in-out;
	text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.fa-cc-visa:hover{
  color:#16216A;
}

.fa-cc-mastercard:hover{
  color:#CC0000;
}

.fa-cc-amex:hover{
  color:#007CC3;
}

.fa-paypal:hover{
  color:#012069;
}

/* --------- END CREDIT CARD CSS --------- */

@media (min-width: 768px) {
  /*.masthead-brand {
    margin-top: 80px;
  }*/

}

@media screen and (max-width: 1800px), screen and (max-height: 930px){
/*  .masthead-brand {
    margin-top: 10px;
  }*/

  .logo{
    height:60px;

  }

  .ying-yang{
    height: 120px;
  }

  .audiojs{
    width:70%;
  }

  .styled div {
  font-size: 50px;

}

}

  @media screen and (max-width: 820px), screen and (max-height: 820px){
    .container{
      height: 20%;
    }
  }
/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}


/*
 * Footer
 */

.mastfoot {
  color: #999; /* IE8 proofing */
  color: rgba(255,255,255,.5);
}


/*
 * Affix and center
 */

 .input-group{
  padding-top: 20px;
  width:320px;
  margin: 0 auto;

 }

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    /*position: fixed;*/
    top: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */

  }

}


@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
  .input-group{

  }
}



/*------------------------------------------------------------------
                  RESET STYLES
-------------------------------------------------------------------*/

ul {
    list-style: none;
    padding: 0;
}

a {
  padding: 7px;
  color: white;
  position: relative;
  text-decoration: none;
  font-size: 20px;
  display: inline-block;
  text-decoration: none;
}

a:hover{
  color:white;
}

/*------------------------------------------------------------------
                  SECTION STYLES
-------------------------------------------------------------------*/

/*section {
    margin: 20px auto;
	text-align: center;
}

section ul {
  text-align: center;
}

section a:not(:first-child) {
	margin-left: 20px;
}*/

/*section a {
	padding: 7px;
    color: white;
    position: relative;
    text-decoration: none;
    font-size: 20px;
}*/

/*
section i {
	transition: color .3s ease-in-out;
	text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

section a:nth-child(1):hover i {
	color: #3b5998;
}

section a:nth-child(2):hover i {
	color: #4099FF;
}

section a:nth-child(3):hover i {
	color: #007bb6;
}
*/

.fa-apple {
  color: #3498db;
  font-size: 100px;
  float: right;
  padding-right: 5%;
}

.fa-android {
  color: #3498db;
  font-size: 100px;
  float: left;
  padding-left: 5%;
}

#beta .fa-android{
  font-size:80px;
}

/* ----------------- SECTION TWO CSS ----------------- */

$('body').css('overflow','visible');
$('body').css('position','fixed');