/* wb.css */

html {height:100%; width:100%;}
body {
	background: #124191;
	font-family: arial,'Open Sans', sans-serif;
	/*min-height: 100%; 
  height: auto !important;
  height:100%;*/
	width:100%;
	color:white;
  /*background: -webkit-linear-gradient(180deg, rgba(145,38,143,1) 0%, rgba(40,15,79,1) 100%);  For Safari 5.1 to 6.0 */
  /*background: -o-linear-gradient(180deg, rgba(145,38,143,1) 0%, rgba(40,15,79,1) 100%);  For Opera 11.1 to 12.0 */
  /*background: -moz-linear-gradient(180deg, rgba(145,38,143,1) 0%, rgba(40,15,79,1) 100%);  For Firefox 3.6 to 15 */
  /*background: linear-gradient(180deg, rgba(145,38,143,1) 0%, rgba(40,15,79,1) 100%);  Standard syntax */ 
  background-attachment: fixed;
}

header {width:100%; z-index: 1000; height: 70px; position: fixed; top:0px; left: 0px; background-color: #000; opacity: 0.0; z-index: 1000;}
.headerMiddle {width:100%; max-width: 1280px; margin:0 auto; position:fixed; top:0px; z-index: 1001;}
.show {opacity: 0.9;}
.mainHeader {font-size: 36px; padding-top:30px;}
.transition {-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#canvas {width:1280px; margin-left:auto; margin-right: auto; min-height: 100%; height: auto !important; height: 100%; margin:0 auto -150px;}
.wbLogo {position:absolute; top:16px; left:30px; width:258px; height:34px; background-image:url("../img/logo.png");}

/* Top Menu */
.topMenu {position: absolute; left:335px; top:15px; font-size:19px;}
.topMenu ul {text-align: center; /*width:550px;*/}
.topMenu li {display: inline-block; width:132px; cursor: pointer; margin-top:10px;}
.topMenu li:hover {font-weight: bold;}
.topMenu li:nth-child(4) {margin-left:20px;}
.topMenu li a {color:white; text-decoration: none; cursor: pointer;}
.topMenuLong {width:130px !important;}

/* Top Login */
.topLogin {position:absolute; top:19px; right:30px; width:100px; height: 34px; background-color: #55acee; text-align: center; border-radius: 5px;}
.topLogin h3 {display: block; padding-top: 8px; font-weight: 100; vertical-align: middle;}

/* COLORS TEXT STYLES */
.purple {color: #431461;}
.blue {color: #55acee;}
.orange {color: #f7941e;}
.pink {color: #ff426a;}
.darkgreen {color:#07313d;}
h1 {font-size: 60px; padding:10px;} 
h2 {font-size: 54px;}
h3 {font-size: 18px} /*Semibold & All Cap*/
p {font-size:20px;}
li {font-size:18px;}

.myBold {font-weight: 800;}
.myLight {font-weight:300;}
.mySemibol {}
.myitalic {}
.navMenu {font-size:16px;}
.footerText {font-size:12px;}
footer {font-size:12px; text-transform:uppercase;} /* Semibold & All Cap */ 
.quote {font-size:28px} /* Light & Italic / Semibold & Italic */
/*Canvas Stuff */
#canv {margin-top:80px; min-height:900px}

/* YOUR SOCIAL SCREEN */

.socialCont {width: 580px; margin-top: 310px; padding-top:70px; margin-bottom: 100px; background-color: #FFF; z-index: 10;}
.socialContFooter{width:750px; margin-top:0px; margin-left:auto; margin-right:auto; position: relative; top:-450px;}
.socialScreen {width:580px; height: 90px; z-index: 10; background-color:#022171; font-weight: lighter; text-align: center;}
.socialContFooter .socialScreen h1 {font-size: 60px; padding:10px;} 
.socialContFooter .socialScreen {width:768px; height: 90px; z-index: 10; background-color:#022171; font-weight: lighter; text-align: center;}
.twitterButton {width:325px; height: 65px; background-color: #55acee; text-align: left; cursor: pointer;}
.twitterButton h3 {font-size: 18px; height: 30px; width: 100%; display: block; padding-top: 22px;}
.twitterIcon {background-image: url('../img/icon-twitter.png'); background-repeat: no-repeat; width: 27px; height: 22px; display: block; float: left; margin-left: 35px; padding-right:15px;}
.socialContFooter .twitterButton {margin-left:auto; margin-right:auto; cursor: pointer;}

/* Wonderboard Screen */
.wonderboardMain {width: 700px; z-index: 0; top: -430px; left: 580px; background-color: #022171; position: relative;}
.wonderboardMain img {width:100%; height:550px}
.wonderboardBottom {width: 900px; z-index: 0; top: 200px; left: 320px; position: relative;}
.wonderboardBottom img {width:100%;}

.aboutText {background-color:#ff426b; width: 712px; margin-top:-200px; left: 0px; padding-top:10px; padding-bottom:10px;}
.aboutText p {font-weight:100; line-height: 1.75; margin-left:50px; margin-right: 40px; margin-bottom: 10px;}
.aboutText h1 {font-weight: 600; line-height: 1.25; margin-left: 36px; margin-right: 40px; margin-top: 10px;}
.aboutImage {position: relative; width: 568px; float: right; top:-615px;}
.aboutImage img, .solutionsImage img {width:100%;}

.solutionsImage {width: 530px; top:1400px; left:0px; z-index: 1;}
.solutionsImage img {max-height: 850px;}
.solutionsText {background-color: #01b7ef; width: 750px; top: -890px; margin-left: 530px; padding-top:10px; padding-bottom:40px; right: 0px; z-index: 58; position: relative;}
.solutionsText p {font-weight:100; line-height: 1.75; margin-left:50px; margin-right: 40px; margin-bottom: 40px;}
.solutionsText h1 {font-weight: 600; line-height: 1.25; margin-left: 36px; margin-right: 40px; margin-top: 10px;}
.solutionsText h2 {font-weight:lighter; font-size:20px; padding:15px; width:400px; background-color:#022171; line-height: 1.25; margin-left: 50px; margin-right: 40px; margin-top: 30px;}
.solutionsText h2 span {font-weight:600;}

.clientBox {background-color:#022171; position:relative; width: 100%;top:-970px; min-height: 1000px;z-index: 0;bottom:0px;}
.clientBox h1 {position:absolute; top:80px; left:40px; width:400px; font-weight: 600; font-size: 46px;}
.clientLogos {position:absolute;top:300px; left:60px; display:inline-block; width: 300px;}
.clientLogos img {position: relative; margin:20px;}
footer {background-color:#04313f; height:70px; position:absolute; width:100%; left:0px;}
footer .footerCenter {width:1280px; position: relative; margin-left:auto; margin-right: auto;}
footer .footerCenter .topMenu ul {text-align: center; width:650px;}
footer .footerCenter .topMenu li {display: inline-block; width:125px; cursor: pointer; margin-top:10px; font-size: 16px;}
footer .footerCenter .copyright {width:300px; right:0px; right:0px; position: absolute; top:26px; color:#606e73; font-size:16px;}
.legal-info-container p, .legal-info-container h2 {padding:15px;}
.legal-info-container p {line-height: 1.5; text-align: justify;}
.legal-info-container li {padding:10px; margin-left: 2em; } 
.legal-info-container h1 {font-size:38px; font-style: italic;}
.legal-info-container h2 {font-size:30px; color:silver;}
.legal-info-container h3 {font-size: 24px; color:silver; margin-left:.5em;}
.legal-info-container {padding-bottom:40px;}
.legal-info-container a{color:khaki; text-decoration: underline;}
.push {height: 150px; /* .push must be the same height as .footer */}

/* Testimonials */
.testimonials {width: 600px; height: 250px; top: 800px; position: absolute;background: #ff3e69;}
.testimonials p {font-weight: 100; font-size: 20px; text-align:center; padding:60px 80px 0;}
.testby {padding-top:40px; font-style: italic; font-weight: 600;}
/* SLIDER STUFF */
.slick-dots li button:before {color:white;}
.slick-dots li.slick-active button:before {color:white;}
.slick-prev {left: 20px;}
.slick-next {right: 20px;}
.slick-dots {bottom:15px; right:0px; width:200px;}
.slick-dots li {width:10px;}
/* END SLIDER STUFF */

/* Twitter Button */
.button {
  display: block;
  background-color: #55acee;
  width: 410px;
  height: 100px;
  line-height: 100px;
  margin: auto;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
          transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.primeButton {top:210px;}
.primeTopButton {top:400px; left:-710px;}
.button span,
.button .icon {display: block; height: 100%; text-align: center; position: absolute; top: 0;}
.button span {width: 72%; font-size: 22px; text-transform: uppercase; left: 0; -webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4); transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);}
.button span:after {content: ''; background-color: white; width: 2px; height: 70%; position: absolute; top: 15%; right: -1px;opacity: .5}
.button .icon {width: 28%; right: 0; -webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4); transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4); top:36px;}
.button .icon .fa {font-size: 30px; vertical-align: middle; -webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;}
.button .icon .fa-remove {height: 36px;}
.button .icon .fa-check {display: none;}
/* .button.success span, .button:hover span {left: -72%;opacity: 0;}
.button.success .icon, .button:hover .icon {width: 100%;} */
.button.success .icon .fa, .button:hover .icon .fa {font-size: 45px;}
.button.success {background-color: #27ae60;}
.button.success .icon .fa-remove {display: none;}
.button.success .icon .fa-check {display: inline-block;}
.button:hover {opacity: .9;}
.button:hover .icon .fa-remove {height: 46px;}
.button:active {opacity: 1;}

/* END Twitter Button */

/* RESPONSIVE STUFF */
/*
  @media only screen and (max-width: 1000px) {
	   .wonderboardMain {right: 0px; width: 100%; z-index: 0; position: absolute; top: 300px;}
	   .socialCont {width:100%; height:160px; top: 80px;}
  }
*/

@media only screen and (max-width: 1024px) {
  #canvas {width:1024px; margin-left:auto; margin-right: auto; min-height: 100%; height: auto !important; height: 100%; margin:0 auto -150px;}
  .socialCont {position:relative; width: 100%; margin-top: 0px; padding-top:10px; z-index: 10;}
  .socialContFooter{top:-130px; position: relative;}
  .socialScreen {width:100%; height: 90px; z-index: 10; background-color:#3b296a; font-weight: lighter; text-align: center;}
  .socialContFooter .socialScreen h1 {font-size: 60px; padding:10px;} 
  .socialContFooter .socialScreen {width:100%; height: 90px; z-index: 10; background-color:#3b296a; font-weight: lighter; text-align: center;}
  .twitterButton {width:100%; height: 65px; background-color: #55acee; text-align: left; cursor: pointer;}
  .twitterButton h3 {font-size: 18px; height: 30px; width: 100%; display: block; padding-top: 22px;}
  .twitterIcon {background-image: url('../img/icon-twitter.png'); background-repeat: no-repeat; width: 27px; height: 22px; display: block; float: left; margin-left: 35px; padding-right:15px;}
  .socialContFooter .twitterButton {margin-left:auto; margin-right:auto; cursor: pointer;}
  .wonderboardMain {width: 512px; z-index: 0; position:; left:512px; top:0px;}
  .wonderboardBottom {left:62px; top:250px;}
  .aboutText {background-color:#ff426b; width: 512px; padding-top:40px; padding-bottom:40px; position: relative; left:0px;top:-215px;}
  .aboutImage {display:none;}
  .solutionsImage {display:none;}
  .solutionsText {background-color: #01b7ef; width: 100%; position: relative; left:0px; margin-left:0px; top:-246px}
  .clientBox {background-color:#163e4e; position:relative; width: 100%;top:-245px; height:350px;}
  .clientBox h1 {position:absolute; top:30px; left:40px; width:800px; font-weight: 600; font-size: 46px;}
  .clientLogos {position:absolute;top:110px; left:140px; display:inline-block; width: 800px;}
  footer {background-color:#04313f; height:100px; position:absolute; width:100%; left:0px;}
  footer .footerCenter {width:100%; position: relative;}
  footer .footerCenter .copyright {top:75px;}
  .testimonials {display:none;}
}

@media only screen and (max-width: 1000px) {

	.topMenu {
		left: 250px;
	}

}

@media only screen and (max-width: 900px) {

	.topMenu {
		left: -65px;
		top: 38px;
	}
	
	.topLogin {
	  top: 10px;
	}

	.wbLogo {
			top: 5px;
			width: 180px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
	}

	.topMenu li {
		font-size: 16px;
	}
}


@media only screen and (max-width: 768px) {
	h1 {font-size: 40px;}
  #canvas {position: absolute; width:768px; margin-left:auto; margin-right: auto; min-height: 100%; height: auto !important; height: 100%; margin:0 auto -150px;}
  .socialCont {position:relative; width: 100%; margin-top: 0px; padding-top:10px; z-index: 10; background-color: transparent;}
  .socialContFooter{top:-130px; position: relative;}
  .socialScreen {width:100%; height: 90px; z-index: 10; background-color:#3b296a; font-weight: lighter; text-align: center;}
  .socialContFooter .socialScreen h1 {font-size: 60px; padding:10px;} 
  .socialContFooter .socialScreen {width:100%; height: 90px; z-index: 10; background-color:#3b296a; font-weight: lighter; text-align: center;}
  .twitterButton {width:100%; height: 65px; background-color: #55acee; text-align: left; cursor: pointer;}
  .twitterButton h3 {font-size: 18px; height: 30px; width: 100%; display: block; padding-top: 22px;}
  .twitterIcon {background-image: url('../img/icon-twitter.png'); background-repeat: no-repeat; width: 27px; height: 22px; display: block; float: left; margin-left: 35px; padding-right:15px;}
  .socialContFooter .twitterButton {margin-left:auto; margin-right:auto; cursor: pointer;}
  .wonderboardMain {width: 384px; z-index: 0; position:; left:384px; top:0px;}
  .wonderboardBottom {left:0px; width:98%; top:250px;}
  .aboutText {background-color:#ff426b; width: 384px; padding-top:40px; padding-bottom:40px; position: relative; left:0px;top:-135px;}
  .aboutText h1 {font-size:45px;}
  .aboutImage {display:none;}
  .solutionsImage {display:none;}
  .solutionsText {background-color: #01b7ef; width: 100%; position: relative; left:0px; margin-left:0px; top:-246px}
  .clientBox {background-color:#163e4e; position:relative; width: 100%;top:-245px; height:350px;}
  .clientBox h1 {position:absolute; top:30px; left:40px; width:768px; font-weight: 600; font-size: 46px;}
  .clientLogos {position:absolute;top:110px; left:15px; display:inline-block; width: 100%;}
  footer {background-color:#04313f; height:100px; position:absolute; width:100%; left:0px;}
  footer .footerCenter {width:100%; position: relative;}
  footer .footerCenter .copyright {top:75px;}
  .testimonials {display:none;}
}

@media only screen and (max-width: 768px) {
	.topMenu {left:10px;}
  .topMenu li {display: inline-block; width:75px; cursor: pointer; margin-top:10px;}
  .topMenu ul {width : 100%;}
  #canvas {position: absolute; width:100%; margin-left:auto; margin-right: auto; min-height: 100%; height: auto !important; height: 100%; margin:0 auto -150px;}
  .wonderboardMain img { width: 96%; height: 96%; }
  .socialCont {position:relative; width: 100%; margin-top: 0px; padding-top:30px; z-index: 10; background-color: transparent;}
  .socialContFooter{top:-50px; position: relative; width: 100%;}
  .socialScreen {width:100%; height: 60px; z-index: 10; background-color:#3b296a; font-weight: lighter; text-align: center;}
  .socialContFooter .socialScreen h1 {font-size: 60px; padding:10px;} 
  .socialContFooter .socialScreen {width:100%; height: 320px; z-index: 10; background-color:#3b296a; font-weight: lighter; text-align: center;}
  .twitterButton {width:100%; height: 65px; background-color: #55acee; text-align: left; cursor: pointer;}
  .twitterButton h3 {font-size: 18px; height: 30px; width: 100%; display: block; padding-top: 22px;}
  .twitterIcon {background-image: url('../img/icon-twitter.png'); background-repeat: no-repeat; width: 27px; height: 22px; display: block; float: left; margin-left: 35px; padding-right:15px;}
  .socialContFooter .twitterButton {margin-left:auto; margin-right:auto; cursor: pointer;}
  .wonderboardMain {width: 100%; z-index: 0; position:relative; left:0px; top:0px;}
  .wonderboardBottom {left:0px; width:98%; top:390px;}
  .aboutText {background-color:#ff426b; width: 100%; padding-top:0px; padding-bottom:40px; position: relative; left:0px;top:200px;}
  .aboutText h1 {font-size:35px;}
  .aboutImage {display:none;}
  .solutionsImage {display:none;}
  .solutionsText {background-color: #01b7ef; width: 100%; position: relative; left:0px; margin-left:0px; top:180px}
  .solutionsText h2 {width: calc(100% - 80px); }
  .clientBox {background-color:#163e4e; position:relative; width: 100%;top:180px; height:350px;}
  .clientBox h1 {position:absolute; top:15px; left:40px; width: calc(100% - 60px); font-weight: 600; font-size: 35px;}
  .clientLogos {position:absolute;top:110px; left:15px; display:inline-block; width: calc(100% - 30px); text-align: center;}
  footer {background-color:#04313f; height:100px; position:absolute; width:100%; left:0px;}
  footer .footerCenter {width:100%; position: relative;}
  footer .footerCenter .copyright {top:75px;}
  footer .footerCenter .topMenu ul { width: 100%;}
  footer .footerCenter .topMenu li { width: 75px; font-size: 11px; }
  .testimonials {display:none;}
  h1 {font-size:30px;}
  .legal-info-container p {font-size: 14px;}
  .legal-info-container h1 {font-size:30px; padding-top:20px;}
  .legal-info-container h2 {font-size:24px;}
  .legal-info-container h3 {font-size: 18px;}
  .mainHeader {font-size: 36px}
}
a {cursor: pointer; text-decoration: none; color:white;}