@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic,800italic,400,800&subset=latin,latin-ext);

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.clearfix {zoom: 1;}
.clearfix:before {content: '.'; display: block; height: 0; visibility: hidden;}
.clearfix:after {content: '.'; display: block; height: 0; visibility: hidden; clear: both; font-size: 0; line-height: 0;}

body {
	margin:0;
	padding:0;
    font-family: 'Open Sans', sans-serif; /*Arial, Helvetica, sans-serif;*/
	font-size:14px;
}

h2.notop {padding-top:0; margin-top:0;}
.fltlt {float:left;}
.fltrt {float:right;}
.clear {clear:both;}
.clrlt {clear:left;}
.clrrt {clear:right;}
.clearfix {
	zoom: 1;
}
.clearfix:before {
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix:after {
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
	font-size: 0;
	line-height: 0;
}
.half {
	width:48%;
    padding: 0 1%;
    float: left;
}
.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
a {
	text-decoration:none;
	color:#39F;
}
a:hover {
	text-decoration:none;
}
button, a.button {
	text-decoration:none;
	background:#39F;
	color:#FFF;
	padding:8px 15px;
	margin:0 5px 0 0;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	font-size:1em;
	line-height:1.5em;
	display:inline-block;
}
button.fltrt, a.button.fltrt {
	margin-right:0;
}
button:hover, a.button:hover {
	text-decoration:none;
	opacity: 0.90;
	filter: alpha(opacity=90);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
	padding:5px 8px;
	border:1px solid #cdcdcd;
	margin:0 10px 10px 0;
	font-size:1em;
	line-height:1.5em;
	width:200px;
}
input.red {
	border-color:#C00;
}
button, input[type="button"], input[type="submit"] {
	background:#39F;
	color:#FFF;
	padding:8px 15px;
	margin:0 10px 10px 0;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	font-size:1em;
	line-height:1.5em;
	border:none;
	cursor:pointer;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover {
	opacity: 0.90;
	filter: alpha(opacity=90);
}
textarea {
	padding:5px 8px;
	border:1px solid #cdcdcd;
	margin:0 10px 10px 0;
	font-size:1em;
	line-height:1.5em;
	width:200px;
	font-family:inherit;
}
select {
	padding:5px 4px 5px 8px;
	border:1px solid #cdcdcd;
	margin:0 10px 10px 0;
	font-size:1em;
	line-height:1.5em;
	width:200px;
}
option {
	padding:5px 4px 5px 8px;
	font-size:1em;
	line-height:1.5em;
}
form {
	position:relative;
}
form.padded {
	padding:20px 0 0 0;
}
label {
	margin-bottom:3px;
	color:#CCC;
}
input.short {
	width:100px;
}
select.long {
	width:318px;
}
input.long {
	width:300px;
}
textarea.long {
	width:300px;
	height:100px;
}
textarea.noresize {
	resize:none;
}
.errmsg {
	background:#C00;
	color:#FFF;
	display:none;
	position:absolute;
	left:240px;
	padding:10px;
	width:180px;
}
.errmsg.lt {
	left:-220px;
}

div.info {
    padding: 15px;
    color: #333;
    background: #DDD;
}
div.error {
    padding: 15px;
    color: #FFF;
    background: #FF0000;
}
div.warning {
    padding: 15px;
    color: #333;
    background: #ff8000;
}
.center {
    text-align: center;
}

.loading11 {height:40px; width:40px; border:3px solid #000; border-radius:40px; margin:5px auto; -webkit-animation:circling 3.0s infinite linear; animation:circling 3.0s infinite linear;}
.loading11:after {content:""; position:absolute; top:-5px; left:20px; width:11px; height:11px; border-radius:10px; background-color:#000;}
@-webkit-keyframes circling { from { -webkit-transform:rotate(0deg);} to { -webkit-transform:rotate( 360deg);} }
@keyframes circling { from { transform:rotate(0deg);} to { transform:rotate( 360deg);} }

#wrapper {
	width:100%;
	height:auto;
	padding-top:70px;
}
.wide {width:100%; background-size: cover;}
.center {text-align:center;}
.inside {width:960px; margin:0 auto;}
#header {
	height:auto;
	padding:10px 1%;
	width:98%;
	background:rgb(112, 128, 144);
	position:fixed;
	top:0;
	left:0;
	z-index:100;
}
#header a.button {
	margin-top:6px;
	height:40px;
	font-size:1.2em;
	line-height:40px;
	padding:0 15px;
	opacity: 0.95;
	filter: alpha(opacity=95);
}
#header a.button.yellow {
	background-color:red;
}
#header a.button:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

.big .mainmenu {
	padding:0;
	margin:0 1% 0 5px;
	float:right;
	list-style:none;
}
.big .mainmenu li {
	float:left;
	list-style:none;
}
.big .mainmenu li a {
	display:inline-block;
	color:#FFF;
	padding:0 10px;
	font-size:1.2em;
	line-height:52px;
}
.small {
    display: none;
    margin: 0 1%;
    line-height: 50px;
    float: right;
}
.opener.small {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 40px;
    float: right;
}
.mainmenu.small {
    padding:1%;
    margin:0 1%;
    float:right;
    list-style:none;
    width: 98%;
    display: none;
}
.mainmenu.small li {
    float:none;
    list-style:none;
    width: auto;
    height: 50px;
}
.mainmenu.small li a {
    display:inline-block;
    color:#FFF;
    padding:0 10px;
    font-size:1.2em;
    line-height: 50px;
}

#logo {
	background:url(../images/logo_167_50_dark.png) no-repeat;
	width:0;
	height:50px;
	display:block;
	padding-left:167px;
	font-size:18px;
	line-height:20px;
    float:left;
    overflow: hidden;
}
#logo strong {
	font-size:40px;
	line-height:30px;
	display:block;
}

#about {
	padding:2% 0;
	font-size:3em;
}
#promo1 {
	background:url(../images/21275747_m.jpg) center no-repeat;
	height:600px;
	width:100%;
	background-size:cover;
}
#promo1 ul {
	width:960px;
	height:600px;
	margin:0 auto;
	list-style:none;
	display:table;
}
#promo1 li {
	display:table-cell;
	vertical-align:bottom;
	text-align:center;
	float:left;
    margin: 10% 20px;
    height: calc(80% - 60px);
    width: 25%;
	list-style:none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
 	background:#7f7f7f;
  	background:rgba(0,0,0,0.5);
	color:#FFF;
    padding: 30px 10px;
	font-size:2em;
	line-height:34px;
}
#promo1 li i {
    display: block;
    margin-bottom: 20px;
}
#promo1 li span {
	font-size:0.6em;
	display:block;
	line-height:1.5em;
	padding:20px 5% 0 5%;
}
#howitworks {
	padding:2% 0;
	font-size:1.5em;
}
#howitworks img {
	float:right;
	margin-left:50px;
}
#promo2 {
	height:480px;
	position:relative;
	overflow:hidden;
	background:url(../images/keyboard.jpg) center;
	background-size:cover;
}
#graphpromo {
	width:800px;
	height:480px;
	margin:0 auto;
	background:url(../images/graph_over_video.png) no-repeat;
	z-index:5 !important;
	position:relative;
}
#smallslideshow {
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	left:422px;
	top:223px;
	width:367px;
	height:177px;
}
#smallslideshow li {
	position:absolute;
	left:0;
	top:0;
	width:367px;
	height:177px;
	list-style:none;
	background:no-repeat center center;
	background-size:cover;
}
#smallslideshow p {
	position:absolute;
	left:0;
	top:0;
	padding:10px;
	margin:30px 0 0 0;
	font-size:1.2em;
	color:#e6e6e6;
	/*text-shadow: -1px 2px 3px rgba(0, 0, 0, .8);*/
	background:rgba(0,0,0,.6);
	width:300px;
}
#smallslideshow li p.rt {
	position:absolute;
	left:auto;
	right:0;
	top:auto;
	bottom:0;
	padding:10px;
	margin:0 0 10px 0;
}
#promo2text {
	position:absolute;
	width:431px;
	height:118px;
	left:5px;
	top:50px;
	font-size:30px;
	line-height:40px;
	color:#f6f6f6;
	padding:15px 0;
	text-align:center;
	text-shadow: -1px 2px 3px rgba(0, 0, 0, 1);
}
#promotext {
	font-size:1.6em;
	padding:2% 0;
}
#promotext i {
	font-size:1.6em;
	padding-right:5px;
}
#promo3 {
	background:url(../images/keyboard.jpg) no-repeat center;
	background-size:cover;
	height:400px;
	position:relative;
}
#bubbletext {
	background:url(../images/bubble_over_image.png) center no-repeat;
	width:260px;
	height:183px;
	position:absolute;
	top:70px;
	left:45%;
	padding:40px 40px 0 108px;
	text-align:center;
	font-size:40px;
	font-weight:bold;
	opacity:.7;
}
#recommendations {
	font-size:1.9em;
	padding:2% 0;
}
#recommendations ul {
	list-style:none;
	margin:0 auto;
	width:800px;
	padding:0;
	height:100px;
	background:#FFF;
}
#recommendations li {
	list-style:none;
	margin:0;
	padding:15px 120px;
	position:relative;
	width:560px;
	height:70px;
	display:block;
}
#recommendations .inside {
	position:relative;
}
#recommendations .quoteleft {
	background:url(../images/quotes.jpg);
	width:120px;
	height:100px;
	position:absolute;
	left:0;
	top:0;
}
#recommendations .quoteright {
	background:url(../images/quotes.jpg) no-repeat -120px 0;
	width:120px;
	height:100px;
	position:absolute;
	right:0;
	bottom:0;
}
#promo4 {
	background:#73b2e1;
	height:380px;
}
#promo4head {
	background:#4d7898;
	height:auto;
	font-size:1.4em;
	padding:2% 0;
	color:#FFF;
}
#flatgraph {
	background:url(../images/flatgraph.jpg) no-repeat center;
	height:380px;
	width:860px;
	margin:0 50px;
}
#flatgraph p {
	padding:70px 0 0 31px;
	margin:0;
	width:50%;
	font-size:2.5em;
	font-weight:bold;
	color:#FFF;
	text-shadow: -1px 2px 3px rgba(0, 0, 0, .8);
}
#signshare .half {
    width: 46%;
    padding: 2%;
    float: left;
}
#signshare .half .fltrt h1 {
    text-align: right;
}
#signshare h1 span {
	font-weight:normal;
}
#signshare input {
	font-size:1.2em;
	line-height:1.7em;
	margin-right:0;
}
#signshare .loginbtns {
    margin-top: 75px;
}
#signshare a.button {
	padding:5px 10px;
	margin-bottom:5px;
	min-width:170px;
	text-align:center;
	color:#FFF !important;
}
#signshare .facebook {
	background-color:#214285;
}
#signshare .twitter {
	background-color:#7BCE7;
}
#signshare .linkedin {
	background-color:#026B98;
}
#signshare .gplus {
	background-color:#D3492D;
}
#signshare .email {
	background-color:#241E20;
}

#footer {
	background:#000;
	color:#d2d2d2;
	padding:50px 0;
}
#footer ul {
	list-style:none;
}

@media all and (max-width: 960px) {
    .inside {
        width: 800px;
    }
    #promo1 ul {
        width: 800px;
        margin: 0;
    }
    #promo1 li {
        height: 250px;
    }
}

@media all and (max-width: 799px) {
    .big {display: none;}
    .small {display: block;}
    .inside {
        width: auto;
        padding: 1% 2%;
    }
    #promo1 {
        height: auto;
        padding-bottom: 2%;
    }
    #promo1 ul {
        width: auto;
        height: auto;
        padding: 0;
    }
    #promo1 li {
        display: block;
        text-align: center;
        float: left;
        margin: 5% 10% 0;
        height: auto;
        width: auto;
        list-style: none;
        padding: 5% 5%;
    }
    #graphpromo {
        background: none;
        height: auto;
        width: auto;
        background-color: #DDD;
        padding-bottom: 5px;
    }
    #howitworks img {
        float:none;
        margin-left:0;
        width: 100%;
    }
    #promo2 {
        background: none;
        position: relative;
        height: auto;
    }
    #promo2text {
        position: relative;
        width: auto;
        height: auto;
        top: 0;
        background: url(../images/keyboard.jpg) center;
    }
    #smallslideshow {
        position: relative;
        left: 0;
        top: 0;
        margin: 20px auto;
        background-color: #fff;
        width: 100%;
        height: 240px;
    }
    #smallslideshow li {
        width: 100%;
        height: 240px;
    }
    #recommendations ul {
        height: 130px;
    }
    #recommendations li {
        height: auto;
        width: calc(100% - 120px);
        font-size: 0.8em;
    }
    #recommendations .quoteright {
        display: none;
    }

    #recommendations ul {
        width: auto;
    }
    #recommendations li {
        width: 65%;
    }
    #promo4 {
        height: auto;
    }
    #flatgraph {
        height: auto;
        margin: 0;
        width: auto;
        background: none;
    }
    #flatgraph p {
        padding: 1%;
        width: auto;
        text-align: center;
    }
}

@media all and (max-width: 499px) {
    #logo {
        content: "";
        /*width: 0;*/
        overflow: hidden;
        float: left;
    }
    #logo strong {
        display: none;
    }
    #signshare {
        padding-bottom: 20px;
    }
    #signshare .half {
        width: auto;
        padding: 2% 18%;
    }
    #signshare .half .fltrt {
        float: left;
    }
    #signshare .half .fltrt h1 {
        text-align: left;
    }
    #signshare .loginbtns {
        margin-top: 15px;
    }
}

@media all and (max-width: 299px) {
    #signshare .half {
        width: auto;
        padding: 2% 2%;
    }
}