/* latin-ext */
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('ubuntu-v15-latin-regular.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('ubuntu-v15-latin-regular.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*::selected {
	background-color:transparent;
}

.note{
	background-color:white;
	border:1px solid lightgrey;
	padding: 1em;
	border-radius: 6px;
	/* box-shadow: 0 0 4px #00000038; */
	margin-left: -0.3em;
	margin-right:  -0.3em;
}

p span.note{
	display:inline-block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;

}

.header-navigation{
	background-color: #579657;
	/* visibility:  hidden; */
}

header {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	background-color: rgb(69 130 69);
	/*background-image: url(../../images/headers/windows.jpg);*/
}

.header-inner{
	width:  100%;
	max-width: 960px;
	margin-left:auto;
	margin-right:auto;
	/* display:  table; */
}

a.brand{
	/* display: table-cell; */
	margin-left: 1em;
}

.site-logo {
	display:block;
	float:left;
}

.site-title {
	color: hsla(0, 0%, 100%, 0.8);
	/* display:block; */
	float:left;
	margin-left: 0.48em;
	letter-spacing: 0.7pt;
}

.site-title:hover {
	color:white;
}


/*------------------------------------------*/
#content{
	margin-top:1em;
}

.page-header {
	border-bottom:  none;
	margin:0;
}

h1{
	margin-top:1em;
	color: #5d5d5d;
	letter-spacing: 1.2pt;
}

h2 {
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px dotted lightgrey;
	margin-bottom: 0.4em;
	color: #5d5d5d;
	font-size:1.35em;
	letter-spacing: 0.3pt;
	line-height: 1.4em;
}

h2 a{
	text-decoration: none;
}

h3 {
	margin-top: 1em;
	color:#636363;
	font-size:1.15em;
	letter-spacing: 0.3pt;
	line-height: 1.4em;
}

li {
	margin: 0.4em 0;
	line-height:1.4em;
}

table {
	border: 1px solid gray;
	/* 	box-shadow: 0px 0px 2px lightgrey; */
	border-collapse: collapse;
	margin-top: 1em;
	margin-bottom: 1em;
}

th {
	color: grey;
	font-weight:normal;
	text-align:left;
	background-color:#f0f0f0;
	/* font-size:0.95em; */
}

td, th {
	border: 1px solid hsla(0, 0%, 89%, 1);
	padding: 0.4em 0.6em;
	vertical-align:top;
}

th{
	border: 1px solid hsla(0, 0%, 87%, 1);
}

table.no-table-border,
table.no-border,
table.no-border td,
table.no-border th{
	border:none;
	box-shadow:none;
}

tr.center-row-vertical > td,
tr.center-row-vertical > th{
	vertical-align: middle;
}

tr.baseline-row > td,
tr.baseline-row > th{
	vertical-align: baseline;
}


p {
	line-height:1.5em;
	text-align:  justify;
}
kbd {
	display: inline-block;
	margin: 1px .1em;
	padding: 0 .5em;
	border: 1px solid lightgray;
	border-radius: 3px;
	white-space: nowrap;
	background-color:white;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.94em;
	letter-spacing:-0.2pt;
}

a {
	color:#579657;
	/* 	text-shadow: 0px 0px 2px #1a72a945; */
}

a:hover {
	color:#000000;
}


/*------------------------------------------*/
.header table{
	max-width:960px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.header table td{
	vertical-align:middle;
}
ul.nav.menu.top{
	margin:0;
	transform: translateY(40px);
	overflow: hidden;
	/* display:  table-cell; */
	vertical-align:  middle;
}

.nav.menu.top li{
	margin:0;
	float: right;
	font-size: 1.3em;
	background-color:transparent;
	/* 	width: 18.7%; */
	text-align: left;
	margin-left:6%;
}
.nav.menu.top li:first-child{
/* 	margin-left: 14%; */
	margin-right: 1em;
}

.nav.menu.top li:last-child{
/* 	margin-left: 14%; */
	margin-right: 3.8em;
}

.nav.menu.top li.active a{
	color:white;
	/* text-shadow: 0px 0px 1px white; */
}


.nav.menu.top li a{
	color: rgba(255, 255, 255, 0.8);
	text-decoration:none;
	background-color:transparent;
}
.nav.menu.top li a:hover{
	background-color:transparent;
	color:white;
}

/*  see https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing */
.navigation {
	padding-top:0px;
	padding-bottom:0;
	/* margin-bottom: 2em; */
	font-size:1.3em;
	margin-bottom: 0;
	/* box-shadow: 0 3px 8px #0000003d; */
}


.navigation li{
	float:left;
	margin:0;
}

.navigation #main-menu li:first-child{
	border-left: 1px solid rgb(87 150 87);
}
.navigation #main-menu li{
	border-right: 1px solid white;
}

.navigation #main-menu li{
	padding: 0.3em 0;
	border-right: 1px solid rgb(87 150 87);
	width: 25%;
	text-align: left;
	font-size:1.1em;
}

.navigation #main-menu li a:hover{
	background-color:transparent;
}


.navigation #sub-menu li:first-child{
	border-left: 1px solid rgba(255,255,255,0.2);
}
.navigation #sub-menu li{
	border-right: 1px solid rgba(255,255,255,0.2);
}


.navigation #main-menu li.active,
.navigation #main-menu li:hover
{
	background-color: #468244;
}


/*----- Collapsed Menu --------------*/

.nav-collapse.in.collapse .menu-image {
	display:none;
}


/*----- Main Menu --------------*/
.navigation .nav-collapse::before
{
	content:'';
}

#main-menu{
}

.navigation #main-menu a{
	color: rgb(255 255 255 / 80%);
	text-decoration:  none;
	border-radius:0;
	background-color:transparent;
	font-style: normal;
	letter-spacing: 1.3pt;
	font-size: 1.05em;
	vertical-align: baseline;
	margin-left: 0.5em;
}
.navigation #main-menu a:hover{
	color:white;
}


.navigation #main-menu .active a{

	color: #ffffff;

	background-color:transparent;
}



.navigation #main-menu.nav img.menu-image {
	display:block;
	margin:auto;
	margin-bottom: 0.75em;
	display:none;
}

.navigation.home #main-menu.nav img.menu-image {
	display:none;
}

.navigation{
	background-color: rgb(18 90 18);
	width:100%;
}

.navigation ul#main-menu{
	margin: 0 auto;
	width: 100%;
	max-width:  960px;
	/* display: table-row; */
}

.navigation #main-menu .active .image-title {
	color:white;
}


/*----- Sub Menu --------------*/
.navigation #sub-menu img.menu-image{
	margin-right: 6px;
}
.navigation #sub-menu img.menu-image.faqs{
	margin-bottom: 2px;
}
.navigation #sub-menu img.menu-image.contact{
	margin-bottom: 4px;
}

.navigation .sub-menu{
	width:100%;
}

.navigation ul#sub-menu{
	margin: 0 auto;
	width: 100%;
	max-width:  960px;
	font-size:0.9em;
	/* background-color: #eee; */
	min-height: 2.2em;
	overflow: hidden;
	/* height: 100%; */
}

.navigation #sub-menu li{
	padding: 0;
	margin: 0;
	/* 	width: 25%; */
	width: 33.33333%;
	text-align:center;
	vertical-align:  middle;
	line-height: 2.25em;
	font-size:  1.1em;
}

.navigation #sub-menu li.active,
.navigation #sub-menu li:hover
{
	background-color: #fafafa;
}

.navigation #sub-menu li a:hover{
	background-color:transparent;
}

.navigation #sub-menu li a{
	/* padding-top: 0.4em; */
	/* padding-bottom: 0.4em; */
	/* margin-top: 0.4em; */
	/* margin-bottom: 0.4em; */
	color: white;
	height:  100%;
	vertical-align:  middle;
	text-decoration:  none;
}


.nav.menu .active{
	/* 	font-weight: bold; */
	/* 	text-shadow: 0 0 1px rgba(0,0,0,0.3); */
}

.navigation #sub-menu li.active a,
.navigation #sub-menu li a:hover
{
	color: #116391;
	/* padding-bottom: 8px; */
	/* padding-top: 0.16em; */
}

.navigation #sub-menu li a.faqs{
	letter-spacing:1pt;
}


.navigation #sub-menu li.active a.help
{
	/* background-color:hsla(0, 0%, 94%, 1); */
	/* font-weight:  bold; */
}



.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
	background-color:transparent;
	border-radius:0;
	/* font-weight:  bold; */
}

/*--- Side menu ---*/

.well ul.nav.menu li{
	padding-left:0.8em;
}

.well ul.nav.menu li a:hover{
	background-color:transparent;
}


.well ul.nav.menu li a{
	text-decoration:none;
}

.well li.divider{
	margin-top:1.1em;
	margin-bottom:0.6em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	border-top: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey;
	background-color: hsla(0, 0%, 94%, 1);
	color: hsla(0, 0%, 51%, 1);
}

/*------------------------------------------*/
html{
	background: #fafafa;
	height: 100%;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body{
	min-height:100%;
	position: relative;
}

body.site
{
	padding: 0;
	font-size: 0.95em;
	line-height: 1.2em;
	border: none;
}

body.site.fluid {
}

.body .container{
	background-color: transparent;
	border: none;
	border-radius:0;
	/* padding:0; */
	box-shadow: none;
	padding-bottom: 5em;
	/* margin-top:  1em; */
}

/*------------------------------------------*/


.small-text{
	font-size: 0.88em;
	color:hsl(0, 0%, 55%);
	/* padding:  0; */
	/* margin:  0; */
}

.footer{
	margin-top:1.5em;
	padding-top: 1em;
	padding-bottom: 1.1em;
	font-size: 1.1em;
	background-color: white;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-top:1px solid #0000001f;
}

.footer hr{
	display:none;
}

.footer .footer1 {
	text-align:center;
	font-size: 0.75em;
	color: darkgray;
}

.footer .footer1 a{
	color: darkgray;
}

.footer .footer2 {
	display:none;
}

/*--- contact form ---------------------------------------*/

#contactform table{
	border:none;
	box-shadow: none;
}

#contactform td{
	border:none;
	padding:0.3em 0;
}

#contactform .error{
	color:red;
}

#contactform table{
	/* 	width:80%; */
}

#contactform td.col1 {
	color:gray;
	text-align:right;
	padding-right:1em;
	vertical-align:middle;
	white-space:nowrap;
}

#contactform select{
	/* width: 12em; */
	margin-top: 3px;
	margin-bottom: 3px;
}

input[type="text"],
input[type="phone"],
input[type="email"]
{
	height:auto;
	width:auto;
	margin:0;
}

input.small-text{
	font-size:0.75em;
}

#contactform input.code{
	width:4.2em;
}

#contactform input.email{
	width: 80%;
}

#contactform input.phone{
	width: 80%;
}

#contactform textarea {
	width:80%;
}

#contactform label{
	font-size:1em;
	display:inline;
}

#contactform tr.privacy td{
	padding-top:0.7em;
	padding-bottom:0.7em;
}

#contactform .privacy input{
	font-size:1em;
	margin-right: 0.3em;
	margin-top: -3px;
}

#contactform .privacy{
	vertical-align:middle;
}

/*------------------------------------------*/
#aside .well{
	padding: 0;
}

.well ul.nav.menu li{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding-left:0.4em;
	margin-bottom:0.6em;
}

.well .active{
	font-weight: bold;
}


#login-form {
	margin: 0;
}
#form-login-submit {
	margin-bottom:0;
}

/*------------------------------------------*/
/*  Home */
.home h1, .home .slogan{
	/* 	text-align:center; */
}

.home h1{
	margin-top:0.9em;
	margin-bottom: 0.35em;
	letter-spacing: 1pt;
	font-size:2em;
}
.home .slogan a{
	color:hsla(203, 0%, 55%, 1);
	text-decoration:none;
	margin-bottom:1.6em;
	letter-spacing: -0.1pt;
}

.home .home-devices{
	margin-top: 0.75em;
	margin-bottom: 0em;
	position: relative;
	height: 179px;
}
.home img.home-devices-silver,
.home img.home-devices-dark
{
	position:absolute;
}

.home img.home-devices-dark{
	display:none;
}

.home .color-selector-outer {
	margin-bottom:1.5em;
	width:100%;
}

.home .color-selector {
	margin-right: auto;
	margin-left: auto;
	text-align:center;
}

.home .color-selector img{
	width:16px;
	margin: 0 0.2em;
}



/* ------------------------------------------ */

.blog.features h2{
	margin-bottom: 0.4em;
}

.blog .leading-0 h2,
.blog-featured .leading-0 h2
{
	margin-top: 0.85em;
}

.feature-item{
	display:table;
	border-top: 1px dotted lightgrey;
	padding-top: 1em;
	margin-bottom: 0.3em;
	width:100%;
}

.feature-image {
	display:table-cell;
	min-width:48px;
	width:48px;
	max-width:48px;
	height: auto;
	margin-right:1em;
}

.feature-text{
	display:table-cell;
	vertical-align:top;
	padding-bottom: 0.75em;
	width: 100%;
}

.feature-text a[href*="#"] {
	/* font-size:small; */
	margin-top: -1.1em;
	text-align:right;
	color: #a9a4a4;
}

.feature-text h2{
	border:none;
	margin-top:0;
	padding-top:0;
	/* float:  left; */
}


/*  Flex Slider */

.flexslider{
	background-color:transparent;
	border:none;
	margin-top:1em;
}

.flexslider .slides img {
	width: auto;
	margin: 0 auto;
}

.flexslider img,
img.screenshot {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 2.5em;
	box-shadow: 1px 1px 8px #00000026;
	display: block;
	border:  1px solid lightgray;
}

img.screenshot-blur {
	box-shadow: 1px 1px 8px #00000026;
	display: block;
}

.flex-direction-nav a{
	color: #298bc6;
}

.flex-active{
	background-color: #298bc6;
}


/* Read more */

.readmore{
	display: inline;
}
.readmore .btn {
	display: inline;
	border:none;
	background:none;
	box-shadow:none;
	margin:0;
	padding:0;
}

.readmore [class^="icon-"],
.readmore [class*=" icon-"] {
	display:none;
}

.h1-icon {
	float:left;
	width:28px;
	height: auto;
	margin-top: 1.2em;
	margin-right:1em;
	fill: rgb(15, 105, 156);
}

div.icon{
	display:inline;
}

.fancypantsaccordionholder .accordion .accordion-item{
	overflow: visible;
}

.faqs h2{
	border:none;
	border-top: 1px dotted lightgrey;
	margin-top:0;
	margin-bottom:0;
}

.faqs ul{
	margin: 0;
	margin-bottom:2em;
}

.faqs ul.accordion li{
	margin-left:1.5em !important;
	margin-bottom:0.3em !important;
}

.faqs .acc-content{
	margin-left: 2em;
}

.faqs p{
	text-align:left;
}

/* clicks table */

.clicks table.no-table-border td[colspan="5"],
.clicks table.no-table-border td[rowspan="3"],
.clicks table.no-table-border td[rowspan="4"]
{
	border:none;
	box-shadow:none;
}

.clicks table.no-table-border td[colspan="4"] h3{
	margin:0;
	margin-top:2em;
}

.clicks img{
	margin-right:1em;
}





th{
	font-size: 0.9em;
}

td.no-border-right{
	border-right: none;
	padding-right: 0;
}
td.no-border-left{
	border-left: none;
	padding-left: 0.4em;
}

td.no-border{
	border:none;
}


/* nicer formatting */
strong,
.bold{
	/*text-shadow: 0 0 0.01pt;*/
	font-weight: bold;
	color:#0a354e;
}

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

.middle {
	vertical-align: middle;
}
.baseline {
	vertical-align: baseline;
}

.no-underline {
	text-decoration-line: none;
}

/* ------------------------------------------ */
/* font awsome */
i[class*='fab']{
	font-weight:normal;
}

i[class*='fa']:after,
.svg-inline--fa:after
{
	content:' ';
	white-space: pre;
}

.well i[class*='fa']{
	width: 1.6em;
	text-align:left;
}
.well i[class*='fa']:after{
	content:'';
}

h1 i[class*='fa']:after,
h2 i[class*='fa']:after{
	margin-right:0.2em;
}

.faqs li i[class*='fa']:after{
	margin-right: 0.34em;
}

.faqs li kbd i[class*='fa']:after{
	margin-right:0;
	content: '';
}

.faqs a{
	text-decoration:none;
}

.faqs a i[class*='fa-fw'],
.faqs a i[class*='fa-fw']:after,
.faqs .acc-content i[class*='fa-fw'],
.faqs .acc-content i[class*='fa-fw']:after
{
	/* 	content:''; */
	width:initial;
	margin-right:0;
}

/* pagination */

.pagination {
	border-top: 1px dotted lightgrey;
	padding-top: 1.5em;
}

.pagination .counter{
	color: #999;
}

.alert{
	border: 1px dotted lightgrey;
}

th.alert-warning {
	color:#c09853;
	background-color:#fcf8e3;
}

td.small-text{
	padding-right: 0.5em;
}

.navigation #main-menu a.keyboards:before,
.navigation #main-menu a.mouse:before,
.navigation #main-menu a.trackpads:before{
	content:"Magic ";
}


dl.article-info {
    float: right;
    margin: 0;
    margin-top: -2.25em;
}
/*---------------------------------------------------------------------------------*/
/* help */
.under-construction{
	background: linear-gradient(rgb(250, 250, 250), rgba(40, 139, 197, 0.1));
	border:1px solid lightgrey;
	border-top: none;
	padding: 1em;
	padding-top: 1.5em;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 0 4px #00000038;
	text-align:center;
	color:#1877ad;
}


.banner-warning{
	background: linear-gradient(rgb(250, 250, 250), #ffa5004a);
	border:1px solid lightgrey;
	border-top: none;
	padding: 1em;
	padding-top: 1.5em;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 0 4px #00000038;
	text-align:center;
	color:#1877ad;
}


.win-button {
	background-color: #eee;
	border: 1px solid #c9c9c9;
	border-radius: 2px;

	display: inline-block;
	margin: 1px .1em;
	padding: 0 .5em;
	white-space: nowrap;
	font-size: 0.94em;
	letter-spacing:-0.2pt;
}

.edge{
	display: none;
}

@supports (-ms-ime-align:auto){
	.edge{
		display: block;
	}

}


/*---------------------------------------------------------------------------------*/
/* Media queries */


@media (max-width: 680px) {

   .navigation #main-menu a {
   	    margin-left: 0;
   	    margin-right:0;
   	    padding-left: 0.5em;
   	    padding-right:0;
    }

	.navigation #main-menu a{
		letter-spacing: 0.3pt;
		font-size:calc(4px + 3vw);
	}

	p {
		text-align:left;
	}
}

@media (max-width: 420px) {

	.navigation #main-menu a{
		letter-spacing:0.1pt;
		font-size:calc(3px + 3vw);
	}
}

@media (max-width: 360px) {

	.navigation #main-menu a{
		font-size:calc(7px + 2vw);
	}
}

@media (max-width: 280px) {

	ul.nav.menu li i{
		display : none;
	}
}