html, body {
	height: 100%;
}
/*fixed the wobble width*/
section .row {
	margin-right:inherit;
	margin-left:inherit;
}
#wrap {
	min-height: 100%;
	margin: 0 auto 0;
}
.navbar-nav.toppage {
	border-radius:4px;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
	margin-top:14px;
}
.navbar-nav.toppage > li:hover{
	color:#000;
}
a {
	text-decoration: none;
	-webkit-transition-property: color;
	-moz-transition-property: color;
	-o-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	text-decoration: none;
}
.logoorange,.navbar-nav.navbar-brand li:hover .logoorange {color: #F7931E;}
.logogreen, .navbar-nav.navbar-brand li:hover .logogreen {color: #50b536;}
#wrap:after {
  content: "";
  display: block;
}

.p {
    color:#2a2a2a;
    margin-top:10px;
    font-weight:300;
}
#wrap:after {
  height: 140px;
}

::selection {
	color: #282d35;
	text-shadow: none;
	background: #cce7f5;
}
.camerasettingsappleappstore{
	margin-left:5px;
}
.altpanel{
	background:#f9f9f9;
}
.altpanel .btn-primary{
	margin: 10px 0;
}
h1,
.jumbotron h1 {
	color:#2a2a2a;
	font-weight: 100;
}
.jumbotron p {
	color: #656565;
}
.alert-success {
  color: #FFFFFF;
  background-color: #3AC15F;
  border-color: #3AC15F;
}
.alert-danger {
  color: #fff;
  background-color: #F22E46;
  border-color: #F22E46;
}

.camio-orange {
	color:#F7931E;
}
.camio-green{
	color:#50B536;
}
.btn-default,
.btn-primary {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  -webkit-transition: 0.1s all;
  -moz-transition: 0.1s all;
  -o-transition: 0.1s all;
  -transition: 0.1s all;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn-primary {
  color: #FFFFFF;
  background: #3ac162;
  border-color: #3ac162;
}
.jumbotron .btn-primary{
	background: rgba(255, 255, 255, 0.3);
	background:#3ac162;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.17);
	color: #2a2a2a;
	color:#fff;
	font-weight: 500;
	-webkit-transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	-transition: 0.2s all;
	border-color: #FFFFFF;
	border-color: #3ac162;
}
.jumbotron .btn-primary:hover{
	background: rgba(255, 255, 255, 0.9);
	background: #3ac162;
	background: rgba(58, 193, 98, 0.81);
	color: #2a2a2a;
	color: #fff;
	font-weight: 500;
	border-color: #FFFFFF;
	border-color: #3ac162;

}
.google {
	margin:100px 0 0 0;
	background-color:#4585f2;
	color:#fff;
	box-shadow:none;
	border: 3px solid #4585f2;
	font-size:30px
}
	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active,
	.btn-primary.active {
		color: #fff;
		background: #34C96A;
		border-color: #34C96A;
	}

	.google:hover {
		background-color:#4585f2;
		color:#fff;
		border: 3px solid #4585f2;
		font-size:30px
	}
.btn-primary.disabled,
.btn-primary[disabled] {
	background-color: #F1F1F1;
	border-color: #CCC;
	color: #999;
}
.btn-large {
	font-size: 20px;
	padding: 8px 28px;
}
.bg-gray-color {
background-color: #f8f8f8;
}
.container.vmid {
    display: table;
    height: 100%;
}
.vmid .row {
    display: table-cell;
    height: 100%;
    vertical-align:middle;
}
.toppage .selected{
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.22);
}
.startbutton{
	background-color: #f7931e;
	color:#fff;
	padding: 4% 32%;
}
.startbuttongrey{
	background-color: #CACACA;
	color:#fff;
	border: 4px solid #CACACA;
	padding: 4% 22%;
}
.startbuttongrey:hover {
	color:#fff;
}
.logo a {
  text-decoration: none;
  color:inherit;
}

#signindiv .logo, #signupdiv .logo {
  margin-bottom: 10px;
}

#signindiv .emaillogin .btn-default{
  background-color: #fff;
}

#signindiv .emaillogin .btn-default:hover{
  background-color: #fff;
  border-color:#fff;
}
#signindiv #login-form{
  margin-top: 5px;
  padding: 0 30px;
}
#signindiv #register-form{
  padding: 5px 30px;
}
footer {
	background-color: #313132;
	padding:1em 1em 4em 1em;
}
footer a {
	color: #fff;
	-webkit-font-smoothing:antialiased;
	font-weight: 800;
	text-shadow: none;
	-webkit-transition: all .01s ease-in-out;
	-moz-transition: all .01s ease-in-out;
	-o-transition: all .01s ease-in-out;
	transition: all .01s ease-in-out;
}

footer p {	
	color: #939393;
}
.footer-social {
	margin: 1em 0 1em 0;
}
.footer-social > a {
	display: inline-block;
	height: 30px;
	margin-right: 7px;
	opacity: 1;
	overflow: hidden;
	text-indent: 100%;
	width: 30px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;

}
.footer-social>a:hover, .footer-social>a:focus {
	opacity: 1;
}
.footer-social > a.twitter {
	background: url(/svg/socialshare-twitter.svg) no-repeat center;
	border-radius:30px;
	height: 40px;
	width: 40px;
	background-color:#939393;
}
.footer-social > a.facebook {
	background: url(/svg/socialshare-facebook.svg) no-repeat center;
	border-radius:30px;
	height: 40px;
	width: 40px;
	background-color:#939393;
}
.footer-social > a.twitter:hover{
		background-color:#00aced;
}
.footer-social > a.facebook:hover{
		background-color:#3b5998;
}
.footer-social > a.googleplus:hover{
	background-color:#dd4b39;
}
footer a:hover{
    text-decoration: none;
    color: #fff;
}
.page-header {
	padding: 15px 0 15px 0px;
	margin-top:75px;
}
.heroheader h1, .jumbotron h1 {
	color: #2a2a2a;
	text-align: center;
	font-weight: 100;
}
.heroheader h1{
	font-weight: 500;
}
.back-arrow {
	margin-top: -40px;
	float:left;
	-moz-transition: all 0.3s cubic-bezier(0.75, 0.01, 0.48, 2);
	-o-transition: all 0.3s cubic-bezier(0.75, 0.01, 0.48, 2);
	-webkit-transition: all 0.3s cubic-bezier(0.75, 0.01, 0.48, 2);
	transition: all 0.3s cubic-bezier(0.75, 0.01, 0.48, 2);
}
.back-arrow:hover {
	-webkit-transform: translateX(-2px);
	transform: translateX(-2px);
}
.navbar {
	margin-bottom:0px;
}
.jumbotron{
	background-color:#ffffff;
	color: #444444;
	margin-top:75px;
}

.orange{
	color:#F7931E;
}
.green{
	color:#50b536;
}
.navbar-default .navbar-nav.navbar-brand > li > a {
	margin-top: -30px;
	cursor: pointer;
	height: 30px;
}
.logo{
	font-size: 35px;
	font-weight: 300;
	color: #939393;
	letter-spacing: -2px;
	cursor: pointer;
	text-shadow: none;
}
header .navbar-nav {
	margin:10px 0px;
}
header .navbar-right {
	padding-right:10px;
}
.navbar-toggle {
	margin-top: 20px;
	margin-bottom: 20px;
}
.navbar-default {
	background:#fff;
	border-color: #ececec;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.navbar-default:hover {
	border-color: #E6E6E6;
	background:#fff;
	box-shadow: 0 1px 15px rgba(0, 0, 0, 0.12);
}
.navbar-default .navbar-brand {
    color: #424242;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #797979;
}
.navbar-default .navbar-nav > li > a {
    color: #939393;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #2a2a2a;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #797979;
    background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #797979;
    background-color: rgba(255, 255, 255, 0);
}
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #424242;
    border-bottom-color: #424242;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #797979;
    border-bottom-color: #797979;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #797979;
    border-bottom-color: #797979;
}
.navbar-default .navbar-toggle {
    border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #F5F5F5;
    outline:none;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #424242;
}
.dropdown-menu{
	padding: 15px 0px;
}
li.dropdown.open .dropdown-menu{
	min-width: 180px;
}
.navbar-nav > li > .dropdown-menu {
	border-top-right-radius: 0;
	min-width:180px;
	padding:10px 0px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border: none;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #fff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #797979;
    }
    .navbar-default .navbar-brand {
	    color: #424242;
	    margin: -2px 0px 0px 0px;
	}
	.navbar-default:hover {
		padding: 0px 0;
		box-shadow: none;
	}
}
.subnav {
    top: 60px;
    z-index: 1020; /* make z-index smaller than .mainnav*/
}
.panel-heading .accordion-toggle:after {
    content: "\e114";
    float: right;
    color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080";
}
.btn-outline-inverse{
  border: 1px solid#dadada;
  background: transparent;
  color: #2a2a2a;
  text-shadow: none;
  box-shadow: none;
}
.btn-outline-inverse:hover, .btn-outline-inverse:active, .btn-outline-inverse:focus{
  border-color:#2a2a2a;
  background: #2a2a2a;
  color: #fff;
  text-shadow: none;
  box-shadow: none;
}

/*
 * nav customizations
 */
.navbar-default .navbar-nav > li > a {
    padding-bottom:0px;
}
.navbar-default .navbar-nav.toppage > li > a{
    padding: 1.5rem;
	margin:0 2px 0 0;
    font-size: 19px;
}
.panel-default {
	border-color: #dadada;
}
.nav .open > a {
	border:none;
}
header .navbar-nav .logo a{
	font-size:inherit;
	font-weight:inherit;
}
.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 500;
	color: inherit;
}
header .navbar-nav a:hover{
  color:#000;
}
footer .navbar-nav a:hover{
  color:#333;
  background-color:transparent;
}

.toppage .selected{background: rgba(255, 255, 255, 0.22);}
header .navbar-nav li:hover a,
header .navbar-nav li a:hover,
header .navbar-nav li a:active,
header .navbar-nav li a:focus {
	background: rgba(255, 255, 255, 0.22);
}
/* dropdown menu mobile */

@media (min-width: 768px) {
	.navbar-nav li > span {
		background: #dadada;
	    position: relative;
	    top: 30px;
	    left: 0;
	    float: left;
	    width: 100%;
	   	height: 5px;
	    border-radius: 0px;
	    opacity: 0;
	    filter: alpha(opacity=0);
	    -webkit-transition: top 0.05s ease-in-out 0s, opacity 0.05s ease-in-out 0s;
	     -moz-transition: top 0.05s ease-in-out 0s, opacity 0.05s ease-in-out 0s;
	     -o-transition: top 0.05s ease-in-out 0s, opacity 0.05s ease-in-out 0s;
	        transition: top 0.05s ease-in-out 0s, opacity 0.05s ease-in-out 0s;
	}
	.navbar-nav.navbar-brand li span {
		float:none;
		top:0;
		background:none;
		opacity:1;

	}
	.navbar-nav.navbar-brand li:hover span {
			top:inherit;
			opacity:1;
	}
	.navbar-nav.navbar-brand li {
		margin:-13px 0px -10px 0px;
		height: 30px;
	}

/*	.navbar-nav li.selected > span,
	.navbar-nav li:hover > span {
		top: -55px;
	    opacity: 0;
	    color:#2a2a2a;
	    filter: alpha(opacity=100);
	}

*/	
	.navbar-default .navbar-nav.toppage > li:hover > a, .navbar-default .navbar-nav.toppage > li:focus > a{
		color: #2a2a2a;
	}
	.navbar-nav li .logo .green{
		color:#50b536;
	}
	.navbar-nav li .logo .orange{
		color:#f7931e;
	}
	.navbar-nav li.selected > span,
	.navbar-nav li:hover > span {
		top:26px;
	}

/*
	.navbar-nav li.dropdown:hover span {
		top:65px;
		opacity: 0;
	}
*/

	.navbar-nav.navbar-brand li.dropdown:hover span {
		top:0px;
	}
	.logo{
		background:transparent;
	}


/*	.navbar-nav li.selected > span,
	.navbar-nav li.selected:hover > span,
	.navbar-nav li.selected > span,
	.navbar-nav li.selected:hover > span {
	    background: #2a2a2a;
	    color:#939393;
	    opacity:0;
	    -webkit-animation: all .1s;
	}

*/
	
	.navbar-default .navbar-nav.toppage li.selected a{
		color: #2a2a2a;
		padding: 13px 10px;
		border-radius: 4px;
	}
}
.user-email {
	float: left;
	white-space: nowrap;
	overflow: hidden;
	color: #939393;
	font-weight:500;
	font-size: 14px;
	text-overflow: ellipsis;
	max-width: 120px;
}
.nav.navbar-nav.navbar-right .caret {
	float: left;
	margin-top: 9px;
}
.navbar-nav > li:hover a{
	color:#2a2a2a;
}
.text-primary {
    color: #1D82F7 !important;
}
.text-uppercase {
    text-transform: uppercase !important;
}
@media (max-width: 767px) {
	.navbar-default .navbar-nav .dropdown-menu > li > a,
	.navbar-default .navbar-nav .open .dropdown-menu > li > a,
	.navbar-default .navbar-nav > li > a,
	.user-email {
		padding: 10px;
        font-size: 19px
	}
	.navbar-collapse .navbar-default .navbar-nav > li > a,
	.navbar-collapse .user-email,
	.navbar-collapse .dropdown-menu >li > a,
	.navbar-collapse .navbar-nav li:hover a{
		color:#2a2a2a !important;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form{
		overflow: scroll;
	}
	.navbar.navbar-default.navbar-fixed-top .navbar-default .navbar-collapse .navbar-nav > .open > a .caret, .navbar.navbar-default.navbar-fixed-top .navbar-default .navbar-collapse .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-collapse .navbar-nav > .open > a:focus .caret, .navbar.navbar-default.navbar-fixed-top .navbar-collapse .navbar-nav > .dropdown > a .caret{
		border-top-color: #FFFFFF;
		border-bottom-color: #FFFFFF;
	}
	.navbar-collapse .dropdown-menu .divider{
		background-color: #D8D8D8;
	}
	.navbar-nav{
		margin-top:0px;
	}
	.navbar-collapse .dropdown-menu > li > a{
		border-left:none;
	}
	.navbar-collapse .dropdown-menu{
		background: #f5f5f5;
	}
	.navbar.navbar-default.navbar-fixed-top .navbar-collapse {
		min-height: 100vh;
		padding-right: 15px;
		padding-left: 15px;
		text-align: center;
		background: #f5f5f5;
		overflow-x: visible;
		border-top: 1px solid transparent;
		-webkit-overflow-scrolling: touch;
	}
	.navbar.navbar-default.navbar-fixed-top .navbar-nav.toppage:before{
		content: 'Menu';
		text-align: center;
		font-size: 1.5em;
		width: 100%;
		color: #2a2a2a;
		border-radius: 0;
		padding: 10px 0;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		background: #fff;
		margin: -15px 0 10px 0;
		box-shadow: 0 0 0 1px #E7E7E7;
	}
	
	.navbar.navbar-default.navbar-fixed-top .navbar-collapse .navbar-nav > li > a {
	    color: #2a2a2a;
	    padding: 20px 0;
	}
	.navbar.navbar-default.navbar-fixed-top .navbar-collapse .navbar-nav > li > a:hover,
	.navbar.navbar-default.navbar-fixed-top .navbar-collapse .navbar-nav > li > a:focus {
	    color: #2a2a2a;
	}
	.navbar-default .navbar-nav.toppage > li > a {
		margin: 0 2px 0 0;
	}
	.navbar.navbar-default.navbar-fixed-top .navbar-collapse > .dropdown-toggle {
		text-align:center;
	}
	.logo {
		margin-top: 3px;
		cursor: pointer;
	}
	.camerasettingsappleappstore{
		margin-left:0px;
	}
	.navbar-nav > li > .dropdown-menu {
		margin-top: 25px;
		min-width: 100%;
		border: none;
	}
}
#right-panel .help {
	padding:20px 0;
}
#right-panel .help a {
	color:#2a2a2a;
}
/*
 * top sub nav for web page
 */

#top-sub-nav h3 {
	font-size: 1.25em;
	margin: 5px 0 15px 0;
	font-weight: 300;
	color: #939393;
}
#top-sub-nav a {
	color:#000;
}
	#any-camera img:hover {
		border-radius: 3px;
	}

.container-full div[class*="col-"] {
	padding: 0;
}
.container-full {
	margin: 0 auto;
	width: 100%;
}
.center-row {
    display:table;
	padding-left:10px;
}
.center-row .middle {
    display:table-cell;
    vertical-align:middle;
    float:none;
}
.step h2 {
	font-size:16px;
	background-color: #F7931E;
	color: #fff;
	padding: 0.5em;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	-webkit-box-shadow: 0px 1px 5px 0px #000;
	-moz-box-shadow: 0px 1px 5px 0px #000;
	box-shadow: 0px 1px 5px 0px #000;
	margin-bottom: 1.5em;
}
#stepNavigation {
	margin-top:1em;
}
#camConfigStepsDiv .form-control {
	display:inline-block;
	width:auto;
}
.middle .img-responsive {
	margin: 0 auto;
}
.mtx {
/*	padding-top:50px;
	margin-top:-50px;
	padding-bottom:100px;*/
}
.camiobeta, .camioalpha {
	transform:rotate(-12deg);
	-ms-transform:rotate(-12deg); /* IE 9 */
	-webkit-transform:rotate(-12deg); /* Safari and Chrome */
	display:inline-block;
}
.navbar-brand .camiobeta {
	position: absolute;
	bottom: -9px;
	right:2.25em;
}
	.nav > li > a:hover,
	.nav > li > a:focus {
		text-decoration: none;
		background-color: rgba(192, 192, 192, 0);
		color: #2a2a2a;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	footer .nav > li > a:hover,
	footer .nav > li > a:focus {
		text-decoration: none;
		color: #fff;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
@media (min-width: 768px) and (max-width: 992px) {
	.navbar.navbar-default .container {
		padding: 0;
	}
	.user-email {
		font-size: 15px;
	}
	.dropdown-menu > li > a,
	header .navbar-nav a{
  		font-size: 17px;
  	}
}
@media (max-width: 320px){
	#login-modal .modal-dialog {
		width: 320px;
		transform: translate(-3.5%);
		-moz-transform: translate(-3.5%);
		-ms-transform: translate(-3.5%);
		-webkit-transform: translate(-3.5%);
	}
}
.easy-steps .stepNum {
	font-size: 330%;
	color: #FFFFFF;
	padding: 10px 0px 10px 30px;
	margin: 28px 0 0 0;
	width: 85px;
	background-color: #50b536;
	border-radius: 90px;
}
	.easy-steps .stepNum:hover {
		font-size: 330%;
		color: #FFFFFF;
		padding: 10px 0px 10px 30px;
		width: 85px;
		background-color: #35A019;
		border-radius: 90px;
	}

.easy-steps{
	margin-top: 45px;
}

/* welcome page styles */

.iossetup img{
	margin: 5% 0% 4% -58%;
	-webkit-animation-duration: .2s;
}
	.iossetup img:hover {
		-webkit-animation-name: shake;
		-moz-animation-name: shake;
		-ms-animation-name: shake;
		-o-animation-name: shake;
		animation-name: shake;
	}
.androidsetup img{
	-webkit-animation-duration: 1s;
	margin: 10px 0px 0px -17px;
}
.browsersetup img{
	-webkit-animation-duration: 1s;
	margin: 51% 0% 0% 60%;
}
.startinfo {
	color: #636363;
	text-decoration:none;
	text-align:center;
}
	.startinfo:hover {
		color:#000;
		text-decoration:none;
	}
.startinfo h3 {
	color: #4E4E4E;
	font-weight: 600;
	font-size: 36px;
	margin: 52px 20px 0px 20px;
}
.startinfo p {
	color: #B4B4B4;
	font-weight: 400;
	font-size: 20px;
	margin: 20px 20px 20px 20px;
}
.form-control {
	color: #555555;
	vertical-align: middle;
	background-color: #fff;
	background-image: none;
	border: 2px solid #dadada;
	border-radius: 6px;
	box-shadow: none;
	-webkit-transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s;
	transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s;
	-webkit-transition:  .2s ease-out;
	transition:  .2s ease-out;
}
.form-control:hover {
	background-color: #fff;
	border-color: #939393;
}
	.form-control:focus {
	box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.1em 0.1em -0.1em rgba(0, 0, 0, 0.08);
	border-color: #2a2a2a;
	background-color:#fff;
}
.deviceoverlay {
	background-color: #FFF;
	box-shadow: 0px -3px 1px rgba(141, 141, 141, 0.14);
	border-top: 1px solid #C9C9C9;
	height: 77px;
	position: relative;
	width: 100%;
	margin-bottom: 38px;
	top: 375px;
	z-index: 330;
}
	.androidsetup img:hover {
		-webkit-animation-name: bounce;
		-moz-animation-name: bounce;
		-ms-animation-name: bounce;
		-o-animation-name: bounce;
		animation-name: bounce;
	}
	.browsersetup img:hover {
		-webkit-animation-name: bounce;
		-moz-animation-name: bounce;
		-ms-animation-name: bounce;
		-o-animation-name: bounce;
		animation-name: bounce;
	}
.easy-steps .col-xs-8 h2 {
	margin-bottom: 15px;
}
.easy-steps .col-xs-8 p {
	margin-bottom: 20px;
}

.easy-steps .btn-primary {
	margin-top: 25px;
}

/* login modal */

#login-modal .modal-dialog {
	max-width: 400px;
	opacity: 0;
	-webkit-transform: scale(.5);
	-moz-transform: scale(.5);
	-ms-transform: scale(.5);
	transform: scale(.5);
	-webkit-transition: all .2s cubic-bezier(0.12,0.4,0.29,1.455);
	-moz-transition: all .2s cubic-bezier(0.12,0.4,0.29,1.455);
	-o-transition: all .2s cubic-bezier(0.12,0.4,0.29,1.455);
	transition: all .2s cubic-bezier(0.12,0.4,0.29,1.455);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#login-modal.modal.fade.in .modal-dialog {
	-webkit-transform: scale(1);
	opacity: 1;
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1)
}
.modal {
	background: #2a2a2a;
	background: rgba(30, 40, 55, 0.5);
}
#login-modal .modal-content {
	padding: 25px;
}
.modal-content .login-text{
	font-weight: 300;
	font-size: 22px;
	color: #2a2a2a;
	margin: 20px 0;
}
.google-signin-button {
	border: none;
	padding: 0;
	background-color: transparent;
}
.google-signin-button img {
	border: none;
	opacity: 0.0;
}
.google-signin-button {
	background-image: url(/images/btn_google_signin_light_normal_web%402x.png);
	background-size: cover;
	background-repeat: no-repeat;
	display:block;
}
.google-signin-button:focus,
.google-signin-button:hover {
	background-image: url(/images/btn_google_signin_light_focus_web%402x.png);
}
.google-signin-button:active {
	background-image: url(/images/btn_google_signin_light_pressed_web%402x.png);
}
.email-signin-button img{
	border: none;
	background-size: 100% 100%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.26);
}
.facebook-login-button img {
	border: none;
	background-size: 100% 100%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.26);
}
.facebook-login-button:hover, .email-signin-button img{
	opacity:.9;
}
div.login-alert {
	display: none;
}

/* Camio Dropdown */
.camio-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.camio-dropdown select {
  color: #333;
  font-size: inherit;
  padding: .4em;
  padding-right: 2.5em;
  margin: 0;
  border-radius: 6px;
  text-indent: 0.01px;
  border: 2px solid #dadada;
  background-color: #ffffff;
  text-overflow: '';
  -webkit-appearance: button;
}
.camio-dropdown select:focus,.camio-dropdown select:active{
  outline:0;
}
.camio-dropdown select[disabled] {
  color: rgba(0, 0, 0, 0.3);
}
.camio-dropdown select[disabled]::after {
  color: rgba(0, 0, 0, 0.1);
}
.camio-dropdown::before,
.camio-dropdown::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
	-webkit-user-select: initial;
	-moz-user-select: initial;
	-ms-user-select: initial;
	-o-user-select: initial;
}
.camio-dropdown::after {
  /*  camio dropdown arrow */
  content: "⌃";
  height: 1em;
  font-size: 1.625em;
  line-height: 1;
  right: 1em;
  top: 47%;
  margin-top: -0.6em;
  color: #2a2a2a;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.camio-dropdown select[size] {
  background-color: #f00;
}
.camio-dropdown select[size]::after {
  content: '';
}
.camio-dropdown select[size]::before {
  width: 0px;
}



/* Tooltips */
.info-icon{
   z-index:10000;
}
.info-icon.ne {
  position: relative;
}
.info-icon.ne:before, .info-icon.ne:after {
  opacity: 0;
  z-index: 98;
  -moz-transition: opacity 100ms, visibility 0ms linear 100ms;
  -o-transition: opacity 100ms, visibility 0ms linear 100ms;
  -webkit-transition: opacity 100ms, visibility 0ms linear;
  -webkit-transition-delay: 0s, 100ms;
  transition: opacity 100ms, visibility 0ms linear 100ms;
  pointer-events: none;
}
@media (max-width: 780px) {
  .info-icon.ne:before, .info-icon.ne:after {
    display: none;
  }
  #login-modal .modal-dialog{
  	margin-top:50px;
  }
  .topnavbtn.feed{
   margin-left: 0px;
  }
/*  .logo{
   display: none;
  }*/
}
.info-icon.ne:before {
  content: attr(data-tooltip);
  position: absolute;
  width: 200px;
  padding: 10px 15px;
  line-height: 18px;
  text-align: left;
  font-size: 13px;
  font-weight: normal;
  white-space: normal;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  background-color: #2a2a2a;
  color: white;
}
.info-icon.ne:after {
  content: '';
}
.info-icon.ne:before {
  top: -9px;
  bottom: auto;
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.info-icon.ne:after {
  content: '';
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid #2a2a2a;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: none;
  top: -9px;
  bottom: auto;
}
.info-icon.ne:before, .info-icon.ne:after {
  left: 50%;
  right: auto;
  margin-left: -6px;
}
.info-icon.ne:before {
  margin-left: -18px;
}
.info-icon.ne:hover {
  /* putting comment here so :hover is declared first by itself to fix ie10 bug with transitions on psuedo elements- http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ */
}
.info-icon.ne:hover:before, .info-icon.ne:hover:after {
  opacity: 1;
  pointer-events: all;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}
.info-icon.nw {
  position: relative;
}
.info-icon.nw:before, .info-icon.nw:after {
  opacity: 0;
  z-index: 98;
  -moz-transition: opacity 200ms, visibility 0ms linear 200ms;
  -o-transition: opacity 200ms, visibility 0ms linear 200ms;
  -webkit-transition: opacity 200ms, visibility 0ms linear;
  -webkit-transition-delay: 0s, 200ms;
  transition: opacity 200ms, visibility 0ms linear 200ms;
  pointer-events: none;
}
@media (max-width: 680px) {
/*  .mark-item, .hide-item, .save-item, .moretray, .share-item {
   padding:1% 9%;
}*/

.info-icon.nw:before, .info-icon.nw:after {
    display: none;
  }
}
.info-icon.nw:before {
  content: attr(data-tooltip);
  position: absolute;
  width: 200px;
  padding: 10px 15px;
  line-height: 18px;
  text-align: left;
  font-size: 13px;
  font-weight: normal;
  white-space: normal;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  background-color: #2a2a2a;
  color: white;
}
.info-icon.nw:after {
  content: '';
}
.info-icon.nw:before {
  top: -9px;
  bottom: auto;
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.info-icon.nw:after {
  content: '';
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid #2a2a2a;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: none;
  top: -9px;
  bottom: auto;
}
.info-icon.nw:before, .info-icon.nw:after {
  right: 50%;
  left: auto;
  margin-right: -6px;
}
.info-icon.nw:before {
  margin-right: -18px;
}
.info-icon.nw:hover {
  /* putting comment here so :hover is declared first by itself to fix ie10 bug with transitions on psuedo elements- http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ */
}
.info-icon.nw:hover:before, .info-icon.nw:hover:after {
  opacity: 1;
  pointer-events: all;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}
.info-icon.se {
  position: relative;
}
.info-icon.se:before, .info-icon.se:after {
  opacity: 0;
  z-index: 98;
  -moz-transition: opacity 300ms, visibility 0ms linear 300ms;
  -o-transition: opacity 300ms, visibility 0ms linear 300ms;
  -webkit-transition: opacity 300ms, visibility 0ms linear;
  -webkit-transition-delay: 0s, 500ms;
  transition: opacity 300ms, visibility 0ms linear 300ms;
  pointer-events: none;
}
@media (max-width: 680px) {
  .info-icon.se:before, .info-icon.se:after {
    display: none;
  }
}
.info-icon.se:before {
  content: attr(data-tooltip);
  position: absolute;
  width: 200px;
  padding: 10px 10px;
  line-height: 18px;
  text-align: left;
  font-size: 13px;
  font-weight: normal;
  white-space: normal;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  background-color: #2a2a2a;
  color: white;
}
.info-icon.se:after {
  content: '';
}
.info-icon.se:before {
  bottom: -9px;
  top: auto;
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.info-icon.se:after {
  content: '';
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 6px solid #2a2a2a;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: none;
  bottom: -9px;
  top: auto;
}
.info-icon.se:before, .info-icon.se:after {
  left: 50%;
  right: auto;
  margin-left: -6px;
}
.info-icon.se:before {
  margin-left: -18px;
}
.info-icon.se:hover {
  /* putting comment here so :hover is declared first by itself to fix ie10 bug with transitions on psuedo elements- http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ */
}
.info-icon.se:hover:before, .info-icon.se:hover:after {
  opacity: 1;
  pointer-events: all;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}
.info-icon.sw {
  position: relative;
}
.info-icon.sw:before, .info-icon.sw:after {
  opacity: 0;
  z-index: 98;
  -moz-transition: opacity 300ms, visibility 0ms linear 300ms;
  -o-transition: opacity 300ms, visibility 0ms linear 300ms;
  -webkit-transition: opacity 300ms, visibility 0ms linear;
  -webkit-transition-delay: 0s, 500ms;
  transition: opacity 300ms, visibility 0ms linear 300ms;
  pointer-events: none;
}




/* animations */

@-webkit-keyframes shake {
	0%, 100% {-webkit-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
	0%, 100% {-moz-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
	0%, 100% {-ms-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
	0%, 100% {-o-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
	40% {-webkit-transform: translateY(-15px);}
	60% {-webkit-transform: translateY(-9px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-15px);}
	60% {-moz-transform: translateY(-9px);}
}

@-ms-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
	40% {-ms-transform: translateY(-15px);}
	60% {-ms-transform: translateY(-9px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-15px);}
	60% {-o-transform: translateY(-9px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-15px);}
	60% {transform: translateY(-9px);}
}

.loadingWrapper * {
    margin: 0;
    padding: 0;
	list-style-type: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.loadingWrapper {
    height: 40px;
    width: 184px;
}
.loadingWrapper > ul {
	height: inherit;
	width: 100%;
	display: block;
}
.loadingContainer {
	width: 46px;
	height: inherit;
	float: left;
}
.loadingContainer .sphere {
    position: relative;
    height: 20px;
    width: 20px;
    border: 5px solid #939393;
    border-radius: 50%;
    background: #939393;
    margin-left: 3px;
    top: 0;
}

.loadingContainer:nth-of-type(1) .sphere {
	-webkit-animation: loadingBounce 2s infinite ease-in-out;
	-moz-animation:    loadingBounce 2s infinite ease-in-out;
	-o-animation:      loadingBounce 2s infinite ease-in-out;
	animation:         loadingBounce 2s infinite ease-in-out;
}

.loadingContainer:nth-of-type(2) .sphere {
	-webkit-animation:loadingBounce 2s infinite .2s ease-in-out;
	-moz-animation:loadingBounce 2s infinite .2s ease-in-out;
	-o-animation:loadingBounce 2s infinite .2s ease-in-out;
	animation:loadingBounce 2s infinite .2s ease-in-out;
}

.loadingContainer:nth-of-type(3) .sphere {
	-webkit-animation:loadingBounce 2s infinite .4s ease-in-out;
	-moz-animation:loadingBounce 2s infinite .4s ease-in-out;
	-o-animation:loadingBounce 2s infinite .4s ease-in-out;
	animation:loadingBounce 2s infinite .4s ease-in-out;
}

.loadingContainer:nth-of-type(4) .sphere {
	-webkit-animation:loadingBounce 2s infinite .6s ease-in-out;
	-moz-animation:loadingBounce 2s infinite .6s ease-in-out;
	-o-animation:loadingBounce 2s infinite .6s ease-in-out;
	animation:loadingBounce 2s infinite .6s ease-in-out;
}

@-webkit-keyframes loadingBounce {
	  0% { top: 0; }
	 25% { top: -40px; }
	 50% { top: 0; }
	100% { top: 0; }
}

@-moz-keyframes loadingBounce {
	  0% { top: 0; }
	 25% { top: -40px; }
	 50% { top: 0; }
	100% { top: 0; }
}

@-o-keyframes loadingBounce {
	  0% { top: 0; }
	 25% { top: -40px; }
	 50% { top: 0; }
	100% { top: 0; }
}

@keyframes loadingBounce {
	  0% { top: 0; }
	 25% { top: -40px; }
	 50% { top: 0; }
	100% { top: 0; }
}

@-webkit-keyframes topbarhover {
	  0% { top: -3px; }
	 25% { top: 3px; }
	 75% { top: -2px; }
	100% { top: 0; }
}

@-moz-keyframes topbarhover {
	  0% { top: -3px; }
	 25% { top: 3px; }
	 75% { top: -2px; }
	100% { top: 0; }
}

@-o-keyframes topbarhover {
	  0% { top: -3px; }
	 25% { top: 3px; }
	 75% { top: -2px; }
	100% { top: 0; }
}

@keyframes topbarhover {
	  0% { top: -3px; }
	 25% { top: 3px; }
	 75% { top: -2px; }
	100% { top: 0; }
}


@keyframes expand {
  0% {
      transform:scale(.9);
      opacity:0
  }
  100% {
      transform:scale(1);
      opacity:1
  }
}

@-webkit-keyframes expand {
  0% {
      -webkit-transform:scale(.9);
      opacity:0
  }
  100% {
      -webkit-transform:scale(1);
      opacity:1
  }
}

@-moz-keyframes expand {
  0% {
      -moz-transform:scale(.9);
      opacity:0
  }
  100% {
      -moz-transform:scale(1);
      opacity:1
  }
}
@-ms-keyframes expand {
  0% {
      -ms-transform:scale(.9);
      opacity:0
  }
  100% {
      -ms-transform:scale(1);
      opacity:1
  }
}

.navbar-default .progress { margin-bottom: 0; display: none }