/* handcrafted by tcr */


:root {
	--fg:rgb(75, 75, 75);
	--fg-inv:rgb(240,242,250);

	--topbar-bg:rgba(0,0,0,0.94);
	--topbar-fg:rgba(255,255,255,0.94);
	--topheader-bg:rgba(255,255,255.94);
	--topheader-fg:rgba(0,0,0,0.94);
	--footer-bg:#000000;
	--footer-fg:#999999;
	--doc-bg:#ffffff;
	--doc-fg:#000000;
	--doc-fg-secondary:#888888;
	--highlight:#007fff;
	--highlight-lit:#209fff;
	--highlight-lightcontent:#01DAFD;
	--highlight-lightcontent-lit:#21FAFF;
	
	--highlight-orange:#FB7F15;
	
	--medgray-bg-color:#26282f;
	--medgray-bg-color0:#31343D;
	--medgray-bg-color1:#1B1C21;
	
	--med0gray-bg-color:#36383f;
	--med0gray-bg-color0:#51545E;
	--med0gray-bg-color1:#2C2D33;
	
	--lightgray-bg-color:#f0f2f7;
	
	--lightcontent-0:#cccdcf;
	--darkcontent-0:#44464a;
	
	--lightcontent-1:#e3e4e8;
	--darkcontent-1:#111318;
	
	--lightcontent-2:#77787e;
	--darkcontent-2:#646569;
	
	--callout0:#173F94;
	--callout1:#B1FF1B;
	--callout2:#72A0FF;
	--callout3:#AA3E29;
	--callout4:#426105;
	
	--topbar-hide-top:-140px;
	--top-pad: 0px;
	--top-pad-index: 300px;
	--home-bg-netshade:rgba(30,30,30,0.8);
	
	--subnav-bg:#36383f;
}


.endlessspin {
	animation: spinning 1s linear infinite;
}
@keyframes spinning {
	0% { 
		transform: rotate(0); 
	}
	100% { 
		transform: rotate(360deg);
	}
}


body {
	margin: 0; padding: 0;
	background-color: var(--doc-bg);
	color:var(--doc-fg);
	font-family: source-sans-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
}

main {
	min-height:calc(100vh - 56px);
}

main>section:first-child{
	padding-top:120px;
}

dl {
	margin-block-start:0;
}
dl>dt {
	padding-top:40px;
	padding-bottom:4px;
	font-weight:600;
}

dl>dd {
	color: var(--fg);
	font-size: 16px;
	line-height: 24px;
}

input {
	font-family: source-sans-pro, sans-serif;
}
button {
	font-family: din-2014, sans-serif;
	font-size:14px;
}

#visualbeep {
	display:none;
	position:absolute;
	background-color:#ffffff;
	left:0px;
	top:0px;
	width:100vw;
	height:100vh;
	z-index:99999;
}

.caption {
	font-size:smaller;
	font-style:italic;
}


a {
	text-decoration: none;
	color: var(--highlight);
	cursor:pointer;
}

a:hover {
	text-decoration: underline;
}

.pill0 {
	padding:10px 22px 10px 22px;
	margin:12px;
	border:1px solid var(--darkcontent-0);
	border-radius: 80px;
	color:var(--darkcontent-0);
}

.lightpill0 {
	border:1px solid var(--lightcontent-0);
	color:var(--lightcontent-0);
}


.pill {
	font-size:13px;
/* 	line-height:40px; */
	font-weight:700;
	padding:6px 22px 6px 22px;
	margin:12px;
	border-radius: 4px;
	color:var(--darkcontent-0);
	cursor:pointer;
}
.pill:disabled {
	opacity:0.4;
}
.pillmini {
	font-size:13px;
	font-weight:700;
	padding:2px 12px 2px 12px;
	margin:12px;
	border-radius: 4px;
	color:var(--darkcontent-0);
	cursor:pointer;
}

.pillstroke {
	border:1px solid var(--fg);
	color:var(--lightcontent-0);
	color:black;
	background-color:white;
}

.pillstroke:hover {
	background-color:black;
	color:white;
}

.lightpillstroke {
	border:1px solid var(--lightcontent-0);
	color:var(--lightcontent-0);
}

.lightpillstroke:hover {
	border:1px solid white;
	color:white;
}

.darkpillnoborder {
	background-color: rgba(0,0,0,0);
	border:none;
	color:var(--lightcontent-0);
}

.darkpillstrokelit {
	background-color: rgba(0,0,0,0);
	border:1px solid var(--highlight-lightcontent);
	color:var(--highlight-lightcontent);
}

.darkpillstrokelit:hover {
	background-color: rgba(0,0,0,0);
	border:1px solid var(--highlight-lightcontent-lit);
	color:var(--highlight-lightcontent-lit);
}

.darkpillstroke {
	background-color: rgba(0,0,0,0);
	border:1px solid var(--lightcontent-0);
	color:var(--lightcontent-0);
}

.darkpillstroke:hover {
	border:1px solid white;
	color:white;
}

.lightpillfill {
	border:none;
	background-color:var(--lightcontent-0);
	color:var(--darkcontent-0);
}

.lightpillfill:hover {
	background-color:white;
}

button.btnplain {
	font-family: source-sans-pro, sans-serif;
	background-color:rgba(0,0,0,0);
	border:none;
	cursor: pointer;
	color: var(--highlight);
}

button.btnplain:hover {
	text-decoration: underline;
}

img.fill {
	display:block;
	margin: auto;
	max-width: 1073px;
	height: auto;
}




div.onion { /* onion skin */
	position:relative;
}

div.onion>div {
	position:absolute;
}






div.section {
	overflow: hidden;
}

div.bleedholder {
	width:100%;
}

div.article {
	text-align:left;
	padding-bottom:40px;
	max-width:1000px;
	margin:0 auto 0 auto;
	padding:80px 100px 120px 100px;
}



div.articlegrey {
	background-color: var(--lightgray-bg-color);
}

div.articlepop {
	color:var(--lightcontent-0);
	background-image:radial-gradient(
		circle at top center,
		var(--medgray-bg-color0),
		var(--medgray-bg-color1)
	);
}


div.articletwoup {

	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-evenly;
	text-align:left;
	width:calc(100% - 200px);
	padding-bottom:40px;

	padding: 50px 100px 50px 100px;
}



div.articletwoup>div {
	max-width:450px;
	min-width:200px;
	flex: 1 1 200px;
	padding:50px;
}



div.hero {
	top:0px;
	width:100%;
	text-align:center;
	display:block;
	margin:auto;
	margin-top:0px;
/* 	margin-top:120px; */
}




p {
	color: var(--fg);
	font-size: 16px;
	line-height: 24px;
}

ul {
	color: var(--fg);
}
ul.featurecards {
	color: white;
}
details>ul>li {
	color:var(--fg-inv);
}


h1,h2,h3,h4,h5,h6 {
	font-family: din-2014, sans-serif;
	margin:0px;
	padding:0px;
	letter-spacing: 0.6px;
}

h1 {
	line-height: 50px;
	font-size: 40px;
	font-weight: 400;
	margin-bottom:40px;
}

h2 {
	line-height: 60px;
	font-size: 40px;
	font-weight: 400;
}

h3 {
	line-height: 32px;
	font-size: 24px;
	font-weight: 400;
}

h3.dashbottom {
	width:100%;
	border-bottom:1px dashed #999999;
	padding-bottom:14px;
	margin-bottom:14px;
	margin-top:40px;
}

h4 {
	font-size: 18px;
	font-weight: 600;
}




::placeholder {
   color:    #5A5B5F;
}




div.topfloater {
	font-size:18px;
}

div#topleftfloater {
	position: absolute;
	text-align: left;
	left: 22px;
	top: 18px;
	width: 200px;
	height: 50px;
	z-index: 10;
}

div#toprightfloater {
	position: absolute;
	text-align: right;
	right: 22px;
	top: 18px;
	width: 200px;
	height: 50px;
	z-index: 10;
}

div#topheader {
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: var(--topheader-bg);
	color: var(--topheader-fg);
	display:flex;
	flex-direction:column;
	z-index: 8;
}

#topnavbar {
	font-family: source-sans-pro, sans-serif;
	position: absolute;
	top: 0px;
	width: 100%;
	background-color: var(--topbar-bg);
	color: var(--topbar-fg);
	font-weight:400;
	letter-spacing:0.05em;
	font-size: 13px;
	display:flex;
	flex-direction:column;
	z-index: 8;
}

@keyframes navup {
    from {top: 0px;} 
    to{top: var(--topbar-hide-top);} 
}

@keyframes navdown {
    from {top: var(--topbar-hide-top);} 
    to{top:0px;} 
}


div.navbar {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	text-align: center;
	padding: 0px 0px 0px 0px;
}

div.navbar>ul {
	display:block;
	flex-grow:1;
	padding:0px;
	margin:0.8em 0 0.8em 0;
}

div.navbar>ul>li {
	display: inline-block;
	padding: 0;
	margin:0 10px 0 10px;
}


div.navbar a:hover {
	text-decoration: none;
}

div.navbar>ul>li:hover {
	border-bottom: 2px solid white;
}

#topheader a {
	color: var(--topheader-fg);
}

div.navbar a {
	color: var(--topbar-fg);
}

div.subnav {
	background-color: var(--subnav-bg);
	color: var(--topbar-fg);
}
div.subnav>ul {
	margin:0.4em 0 0.4em 0;
	font-size:13px;
}

.whiteborderunderline {
	border-bottom: 2px solid white;
}

.noborderunderline {
	border-bottom: 2px solid rgba(0,0,0,0);
}

img.navlogo-img {
	display:inline-block;
	width: 28px;
	height: 28px;
	padding: 0px 0px 0px 14px;
	vertical-align: middle;
}

div.navlogo-counterweight {
	width: 28px;
	height: 28px;
	padding: 0px 14px 0px 0px;
	flex-grow:0;
}

#logotype-text-big {
	display:flex;
	flex-direction:column;
}
#logotype-text-big>div:nth-child(1) {
	padding-top:24px;
	font-size:31px;
	line-height:34px;
}
#logotype-text-big>div:nth-child(2) {
	color: var(--doc-fg-secondary);
	font-size: 20px;
}


#main-stack {
	padding: var(--top-pad) 0px 0px 0px;
	width:100%;
}

footer {
	text-align: center;
	position: relative;
	font-size:12px;
	background-color: var(--footer-bg);
	color: var(--footer-fg);
	z-index: 200;
	padding:12px 0 12px 0;
}

ul.inlineul {
	list-style-type: circle;
	color: var(--fg);
}

ul.inlineul>li {
/* 	display:inline-block; */
}




/* <legacy> */
.product {
	display:flex;
	flex-direction:row;
	align-items:center;
	font-size:12px;
	color:var(--lightcontent-0);
    background-image: linear-gradient(to top, rgba(30, 31, 36, 1.0), rgba(30, 31, 36, 0.0));
	width:230px;
	margin:20px 20px 20px 20px;
	padding:20px 20px 20px 20px;
}
.product>div:nth-child(1) {
	font-size:20px;
	min-width:50px;
	padding-left:10px;
	text-align:right;
}
.product>div:nth-child(2) {
	padding-left:20px;
	text-align:left;
}

.productbig {
	font-size:12px;
}
.productbig>div:nth-child(1) {
	font-size:28px;
}
.productbig a.buynow {
	padding: 5px 12px 5px 12px;
	font-size:1.1em;
	width:56px;
}
.productbig h6 {
	font-size:20px;
	font-weight:inherit;
}

.product h6 {
	font-size:15px;
	font-weight:inherit;
}
.product ul {
	list-style-type: circle;
	padding-left:1.4em;
}
.productcallout {
	color:var(--highlight-lightcontent);
	font-size:11px;
}
/* </legacy> */






a.buynow {
	display:block;
	color:var(--lightcontent-0);
	border:1px solid var(--lightcontent-0);
	border-radius:4px;
	margin:20px 0 10px 0;
	padding: 3px 10px 3px 10px;
	width:50px;
}


hr.hrdash {
	border-bottom-color: rgb(153, 153, 153);
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-top: none;
	border-left: none;
	border-right: none;
}

ul.faq {
	list-style-type: none;
	-webkit-padding-start: 0;
}
ul.faq>li { /* section titles */
	font-size:20px;
	padding:40px 0 8px 0;
	text-transform: uppercase;
}
ul.faq>li:first-child {
	padding:40px 0 20px 0;
}
ul.faq>ul {
	list-style-type: none;
}
ul.faq>ul>button { /* question */
 	background-color:white;
	margin:4px 0 4px 0;
	padding:4px 0px 4px 8px;
	font-weight:600;
	display:list-item;
	border:none;
	width:100%;
	text-align:left;
	font-size:15px;
	letter-spacing:0.75px;
	text-decoration:underline;
	color:var(--highlight);
}
ul.faq>ul>li { /* answer */
	color:var(--fg);
	padding:4px 0px 24px 8px;
}




@media only print {
	div.article {
		padding: 30px 30px 30px 30px;
	}
	div.articletwoup {
		padding: 30px 30px 30px 30px;
	}
}

@media only screen and (max-width: 999px) {
	div.article {
		padding: 30px 30px 30px 30px;
	}
	
	div.articletwoup {
		width:inherit;
		padding: 30px 30px 30px 30px;
	}
	
	div.articletwoup>div {
		padding:20px;
	}
	
	h1 {
		line-height: 40px;
		font-size: 32px;
	}

	h2 {
		line-height: 34px;
		font-size: 28px;
	}

	h3 {
		line-height: 26px;
		font-size: 19px;
	}

	h4 {
		font-size: 16px;
	}
	
	ul.faq>ul {
		-webkit-padding-start: 0;
	}
}

@media only screen and (max-width: 499px) { /* phone portrait */
	#topnavbar {
		font-size:13px;
	}
	
	div.navbar>ul>li {
		margin:0 6px 0 6px;
	}
	
	main>section:first-child {
		padding-top:110px;
	}
	
	div.navlogo-counterweight {
		display:none;
	}

}