input:not([type='range']) {
	/* remove ios styles */
	 -webkit-appearance: none;
}

.buy-block {
	background: #fff7c7;
	border-radius: 4px;
	padding: 8px 0 30px;
}

.compare-box {
	box-sizing: border-box;
	margin-top: 48px !important;
	position: relative;
}

.compare-box a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 36px 24px;
	box-sizing: border-box;
	border:  2px solid #eaecee;
	box-sizing: border-box;
	background: #eaecee;
	border-radius: 4px;
}

.compare-box a:hover {
	border-color: grey;
	text-decoration: none;
}

span.percent-off {
	background:  #f9e888;
	color: #917f1f;
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	text-transform: uppercase;
	margin-left: 8px;
}

span.menu-label {
	background: #f9e888;
	color: #917f1f;
	border-radius: 6px;
	padding: 0 8px;
	font-size: .8em;
	display: inline-block;
	vertical-align: middle;
}

span.label-beta {
	background: #f9e888;
	color: #917f1f;
	border-radius: 8px;
	padding: 0 8px;
	font-size: .8em;
	display: inline-block;
	vertical-align: middle;
}

.app-qty-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 18px;
}

#multi-app-qty,
#single-app-qty {
	margin-right: 12px;
}

#multi-app-old-price,
#single-app-old-price {
	height: 40px;
	line-height: 40px;
}

#multi-app-total-price,
#single-app-total-price {
	text-align: center;
}

#new-price {
	font-size: 1.2em;
}

.checkout-btn-wrapper {
	margin-top: 12px;
	text-align: center;
}

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

	Mobile First (!)
	override using media queries

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

body {
	font-family: sans-serif;
	font-size:  18px;
	line-height: 160%;
	margin:  0;
	padding:  0;
}
#header {}

#main {
	padding:  20px;
}

#mailinglist {
	padding:  20px;
	text-align: center;
}

#mailinglist .container {
	padding-bottom:  72px;
}

#footer {
	background:  #f6ecc1;
	border-radius:  4px;
	padding:  20px;
	font-size:  1em;
	line-height:  140%;
	background:  #eaecee;
}

#demo-container {
	margin-bottom: 42px;
}

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

	SUB NAVIGATION
	(Docs)

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

/* hide sidebar menu by default */
.sidebar-menu {
	display:  none;
}

/* show select menu */
.menu-select {
	display:  block;
}

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

	GENERAL STYLES

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

.sub-menu ul {
	list-style: none;
	margin:  0;
	padding:  0;
}

.sub-menu li {
	  white-space: pre;
/*   text-overflow: ellipsis; */
/*   overflow: hidden; */
}

pre {
/* 	border: 1px solid #eaeaea;
	padding: 20px; */
	background: #f8f8f8;
		font-size: 16px;
	line-height: 1.4;
	tab-size: 2;
	-moz-tab-size: 2;
	-webkit-tab-size: 2;

}

pre > code {
	display: block;
	padding: 0.5em;
}

h1, h2, h3 {
	font-weight:  normal;
	font-family: monospace;
}

h2 {
	font-size:  1.5em;
	margin-top:  0;
}

h2.huge {
	font-size:  1.8em;
	line-height:  110%;
}

p.still-huge {
	font-size:  1.3em;
	line-height:  1.4;
}

p.big {
	font-size:  1em;
	line-height:  1.4;
}

p.good-news {
	color:  #555;
	font-size:  .7em;
	line-height:  1.4;
	margin-top:  20px;
}

.payment-info {
	padding:  40px 0;
	font-size:  .8em;
	text-align:  center;
}

.payment-info {
	line-height: 130%;
}

.payment-info img {
	width:  300px;
}

.container {

	max-width:  1136px;
	margin:  0 auto;
	box-sizing:  border-box;
	position:  relative;

	font-family:  sans-serif;

}

a[href] {
	color:  #0078ff;
	font-weight:  bold;
}

a.modest-link {
	color: #000;
	font-weight:  normal;
	font-size: .8em;
}

/* features */

ol.ol_features {
	margin:  32px 0;
	list-style:  none;
	padding:  0;
}

ol.ol_features div {
	display:  flex;
	align-items:  center;
}

ol.ol_lineheight li,
ul.ul_lineheight li {
	padding-bottom: 12px;
}

ul.ul_features {
	margin:  32px 0;
	list-style:  none;
	padding:  0;
}

ul.ul_features > li {
	align-items:  center;
	text-align:center;
	margin-bottom: 72px;
}

ul.ul_features div img {
	margin: 24px auto;
	display:block;
	max-width:100%;
}

ul.ul_features ul {
	list-style:none;
	text-align:center;
	margin:0;
	padding:0;
	margin-top:64px;

}

ul.ul_features ul li {
	border-bottom:1px solid lightgrey;
	padding: 12px 0;
	font-style:italic;

}

ul.ul_features ul li:first-child {
	border-top:1px solid lightgrey;
}

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

	Features & Limits Table

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

td.yes {
	background:  #a1eba1;
	border-color:  #69cc69;
}

td.no {
	background:  #f1cbcb;
	border-color: #db9090;
}

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

	Edit Buttons
	(Codepen/JSFiddle)

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

.icon {
	width:  2em;
	height:  2em;
	display:  inline-block;
}

.icon.icon-codepen {

    background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyMCAxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkuMTg0IDYuMzg3bC0uMDE1LS4wNjctLjAxNC0uMDQtLjAyLS4wNmMtLjAwNy0uMDEyLS4wMTItLjAyNS0uMDItLjAzOGwtLjAyNy0uMDU0Yy0uMDEtLjAxMi0uMDE3LS4wMjQtLjAyNS0uMDM3LS4wMS0uMDE2LS4wMjMtLjAzLS4wMzQtLjA0N2wtLjAyOC0uMDM1LS4wNC0uMDQ0LS4wMzQtLjAzYy0uMDE0LS4wMTUtLjAzLS4wMjctLjA0Ni0uMDQtLjAxMi0uMDEtLjAyNS0uMDItLjAzNy0uMDI3bC0uMDE0LS4wMS04Ljc3My01LjcyYy0uMjc4LS4xODItLjYzOC0uMTgyLS45MTUgMEwuMzY3IDUuODU2bC0uMDE0LjAwOC0uMDM3LjAyOGMtLjAxNi4wMS0uMDMyLjAyNS0uMDQ3LjAzOC0uMDEyLjAxLS4wMjMuMDIyLS4wMzMuMDMyLS4wMTUuMDE0LS4wMjguMDMtLjA0Mi4wNDUtLjAxLjAxLS4wMi4wMjMtLjAyOC4wMzRsLS4wMzUuMDUtLjAyMy4wMzctLjAzLjA1M2MtLjAwNi4wMTQtLjAxLjAyNy0uMDE4LjA0LS4wMDguMDItLjAxNC4wNC0uMDIuMDYtLjAwNS4wMTItLjAxLjAyNi0uMDEzLjA0LS4wMDcuMDItLjAxLjA0NC0uMDE2LjA2NmwtLjAwNi4wMzVDLjAwMyA2LjQ1NyAwIDYuNDkgMCA2LjUyN3Y1LjcyMmMwIC4wMzQuMDAzLjA3LjAwOC4xMDUgMCAuMDEuMDA0LjAyMy4wMDYuMDM0bC4wMTUuMDY3Yy4wMDIuMDE0LjAwNy4wMjYuMDEuMDRsLjAyMi4wNi4wMi4wNC4wMjcuMDUzLjAyMi4wMzcuMDM1LjA1Yy4wMS4wMS4wMi4wMjIuMDI4LjAzM2wuMDQyLjA0NS4wMzIuMDNjLjAxNC4wMTQuMDMuMDI3LjA0Ni4wNGwuMDM3LjAyNi4wMTQuMDEgOC43NzQgNS43MmMuMTQuMDkyLjMuMTM3LjQ1OC4xMzcuMTYgMCAuMzItLjA0NS40NTgtLjEzNmw4Ljc3NC01LjcyMi4wMTQtLjAxYy4wMTItLjAxLjAyNS0uMDE4LjAzNy0uMDI3LjAxNy0uMDEuMDMzLS4wMjQuMDQ3LS4wMzdsLjAzNC0uMDNjLjAxNC0uMDE2LjAyOC0uMDMuMDQtLjA0NmwuMDMtLjAzNGMuMDEyLS4wMTcuMDI0LS4wMzIuMDM0LS4wNS4wMS0uMDEuMDE2LS4wMjQuMDI0LS4wMzYuMDEtLjAxOC4wMi0uMDM2LjAyOC0uMDU0bC4wMi0uMDQuMDItLjA2Yy4wMDQtLjAxMy4wMS0uMDI1LjAxMi0uMDQuMDA2LS4wMi4wMS0uMDQzLjAxNS0uMDY2bC4wMDctLjAzNGMuMDA0LS4wMzUuMDA3LS4wNy4wMDctLjEwNXYtNS43MmMwLS4wMzctLjAwMy0uMDcyLS4wMDctLjEwN2wtLjAwNi0uMDMzem0tOS41ODYgNC45MUw2LjY4IDkuMzkgOS42IDcuNDhsMi45MTggMS45MS0yLjkxOCAxLjkwN3ptLS44MjQtNS4yMmwtMy41NzcgMi4zNEwyLjMxIDYuNTNsNi40NjQtNC4yMTZ2My43NjR6TTMuNzE0IDkuMzlsLTIuMDY1IDEuMzQ4di0yLjdsMi4wNjMgMS4zNXptMS40ODMuOTdsMy41NzcgMi4zMzh2My43NjRMMi4zMSAxMi4yNDdsMi44ODctMS44ODh6bTUuMjI2IDIuMzM4TDE0IDEwLjM1OGwyLjg4NyAxLjg5LTYuNDY0IDQuMjE0di0zLjc2NHptNS4wNi0zLjMxbDIuMDY1LTEuMzV2Mi43bC0yLjA2NC0xLjM1ek0xNCA4LjQybC0zLjU3Ny0yLjM0VjIuMzE1bDYuNDY0IDQuMjE0TDE0IDguNDE2eiIgZmlsbD0iIzQ0NCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) center no-repeat,linear-gradient(transparent,transparent);
        background-size: auto, auto;
    background-size: contain;

}

.icon.icon-jsfiddle {

    background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyNCAxNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy4zNTIgMy42NWMuMTc1LS4yNy4zMy0uNTQ2LjUyLS44QzkuMDg4IDEuMjM3IDEwLjc0My4yOSAxMi44NC4wNWMzLjA3NC0uMzU0IDYuMDM3IDEuMjMgNy4yNTQgMy44NjIuNDA4Ljg4LjYgMS44MDIuNTQyIDIuNzYzLS4wMDcuMTEuMDMuMTU0LjEzNC4xOTggMS43Ny43MzggMi44NDcgMi40MiAyLjY5OCA0LjIwNi0uMTU0IDEuODQtMS42MyAzLjQxMi0zLjU4MiAzLjgxMi0uNDIuMDg2LS44NDYuMTMtMS4yNzguMDk3LS4wNjMtLjAwNi0uMTI2LS4wMDMtLjE5LS4wMDMtNC41MjQgMC05LjA1LS4wMDItMTMuNTc1IDAtLjgxNSAwLTEuNTktLjE1LTIuMzE1LS41Qy0uNjcgMTIuOTQtLjg3OCA4LjgwNCAyLjE1NiA2Ljk4OGMuMTIyLS4wNzQuMTUzLS4xMy4xMTUtLjI2NC0uNDctMS42NzIuNzgzLTMuNDEzIDIuNjE1LTMuNjQ3Ljg3NS0uMTEzIDEuNjc2LjA1NSAyLjQuNTMuMDIzLjAxNi4wNDguMDMuMDY3LjA0em0zLjA2NSA2LjY0M2MtLjExLjA4OC0uMjAyLjE2Ni0uMy4yNC0uNTE4LjM4LTEuMDk4LjUzNi0xLjc1LjQxLS41OS0uMTE0LTEuMDQzLS41NzgtMS4xMDQtMS4xMTQtLjA2My0uNTUyLjI1LTEuMDcyLjc5Ny0xLjMxLjM4LS4xNjMuNzc1LS4xNzMgMS4xNzMtLjA3LjY5LjE3NyAxLjIwNC41ODQgMS42NSAxLjA4Ny40ODQuNTQ1Ljk2IDEuMDk2IDEuNDcyIDEuNjE2IDEuMTMgMS4xNSAyLjUzIDEuNiA0LjE2MyAxLjIxOCAxLjE1My0uMjY4IDEuOTUtLjk1NiAyLjE5My0yLjA3LjI1LTEuMTMzLS4wOS0yLjEwNS0xLjExLTIuODItLjU3OC0uNDEtMS4yNDYtLjU3LTEuOTYtLjYtMS4wOTItLjA0Ny0yLjA1OC4yMjgtMi44Ni45NDUtLjAzNC4wMy0uMDg4LjA0LS4xMy4wNTdsLjU2LjYxNS41MTYuNTY2Yy4wMjMtLjAwNi4wMy0uMDA2LjAzMi0uMDA4bC4xODctLjE1Yy40OTItLjM4NSAxLjA1LS41NzUgMS43LS41LjY0NS4wNzQgMS4xNy41NjYgMS4yNDIgMS4xNzQuMDY4LjU3OC0uMzMyIDEuMTQtLjk1NCAxLjMzLS4zOTUuMTItLjc5LjEtMS4xNzgtLjAzMi0uNjQ4LS4yMi0xLjEyNi0uNjQtMS41NTYtMS4xMjgtLjQ5Ny0uNTY0LS45ODgtMS4xMzUtMS41MzQtMS42NTUtMS4wOC0xLjAyNy0yLjM5Mi0xLjQzMi0zLjkyLTEuMTItMS4xNi4yMzYtMi4zODIgMS4xNTUtMi4zOCAyLjY2MiAwIDEuMDUyLjQ2NCAxLjg1OCAxLjQyNyAyLjQwNi40Ny4yNjcuOTkuMzk0IDEuNTM2LjQzMi44MS4wNTcgMS41ODctLjA0MyAyLjI5OC0uNDQyLjMwMi0uMTcuNTc4LS4zNjcuODMtLjYwNWwtMS4wNC0xLjEzNXoiIGZpbGw9IiM0NDQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center no-repeat,linear-gradient(transparent,transparent);
        background-size: auto, auto;
    background-size: contain;

}

.edit-buttons {
	display:  flex;
	justify-content: flex-end;
	margin-top:  12px;
	align-items: center;
}

.edit-button {
	display:  flex;
	align-items:  center;
	padding: 0 8px;
	cursor:  pointer;

	font-size: .8em;
	height: 44px;
	line-height: 41px;

	color: #000;
	background: #eaecee;
	border: 1px solid rgba(0,0,0,.15);
	border-bottom-width: 3px;
	border-radius: 4px;
	cursor: pointer;
	font-family: monospace;

}

.button {
	padding:  0 12px;
	cursor:  pointer;

	font-size: 1em;
	height: 44px;
	line-height: 41px;

	color: #000;
	background: #eaecee;
	border: 1px solid rgba(0,0,0,.15);
	border-bottom-width: 3px;
	border-radius: 4px;
	cursor: pointer;
	font-family: monospace;
}

.edit-button:hover,
.button:hover {
	background:  #cad1d6;
}

.edit-button .icon {
	margin-right:  8px;
}

.edit-buttons > form {
	margin-left:  8px;
}

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

	Title Holder (Mobile)
	(when <select> is next to h2)

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

.title-holder {
	display:  flex;
	margin-bottom:  1.5em;
}

.title-holder h2 {
	margin:  0;
	margin-right:  24px;
}

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

	Demo Container
	(with aspect ratio)

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

/* #demo-container {
	width:  100%;
	padding-top:  50%; 
	position:  relative;
	overflow:  auto;
	box-sizing: border-box;
	border-bottom: 2px solid #eaecee;
}

#demo-container > div {
	position: absolute;
  	top: 0; bottom: 0; left: 0; right: 0;
} */

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

	Homepage
	Icon Divs

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

.icondiv {

	width:  64px;
	height:  64px;
	display:  inline-block;
	margin: 0;
	/* border:  4px solid #eaecee; */
	border-radius:  32px;
	box-sizing:  border-box;
	background-color:  #eaecee;
	margin-right:  24px;

	flex-shrink: 0;

	background-size:  contain;

}

.icon-reliable {
	background-image:  url('/site_files/img/icon_reliable.svg');
}

.icon-compatible {
	background-image:  url('/site_files/img/icon_compatible.svg');
}

.icon-familiar {
	background-image:  url('/site_files/img/icon_familiar.svg');
}

.icon-performant {
	background-image:  url('/site_files/img/icon_performant.svg');
}

.icon-lightweight {
	background-image:  url('/site_files/img/icon_lightweight.svg');
}

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

	"Standout Boxes"

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

.standouticon {
	width:  48px;
	height:  48px;
	margin-right:  12px;
	flex-shrink: 0;
}

.icon-lightbulb {
	background-image:  url('/site_files/img/light-bulb.svg');
}

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

	Big Button

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

.download-buttons a:not(:last-child) {
	margin-right: 8px;
	margin-bottom: 16px;
}

button.big-button,
a.big-button,
input.big-button,
a.buy-button {
	background:  #0078ff;
	border-radius:  4px;
	border:  none;
	padding:  12px 24px;
	border-bottom:  3px solid #005cc5;
	font-size:  1.2em;
	color:  white;
	cursor:  pointer;
	font-weight:  normal;
	text-decoration: none;
	font-family: monospace;
	/* text-transform: uppercase; */

	display: inline-block;
}

/* a.big-button {
	margin-bottom:  80px;
} */

button.big-button:hover,
a.big-button:hover,
input.big-button:hover,
a.buy-button:hover {
	background:  #ffa90b;
	border-color: #c37e00;
}

a.buy-button {
	display:  inline-block;
	text-transform: none;
}

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

	Small Button ("buy" page)

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

a.small-button {
	background: #eaecee;
	border-radius:  4px;
	border:  none;
	padding:  8px 16px;
	border-bottom:  2px solid #cad1d6;
	font-size:  1em;
	color:  black;
	cursor:  pointer;
	font-weight:  normal;
	text-decoration: none;
}

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

	Line

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

hr {
	border: 1px solid #eaecee;
	margin-top:  48px;
}

hr.seperator {
	margin-bottom:  80px;
}

h3 {
	margin:  36px 0 18px;
	color: #505457;
}

.features h3 {
	margin:  0;
	margin-top:  32px;
}

.featuretext {
	min-height:  120px;
}

.features hr {
	margin-bottom:  48px;
}






.codeblock,
.resultblock {
	margin: 32px 0 48px;
}

.result, .example {
	padding:  1em;
    border: 2px solid #eaecee;
    margin:  .5em 0;
}

.result {
	border-radius: 4px;
}

.lang {
	font-size:  .8em;
	font-weight: bold;
}

em {
/* 	background:  #eaecee;
	background: #f9e888; */
	display:  inline-block;
	font-style:  normal;
	padding:  0 4px;
	border-radius:  4px;
	font-weight:  normal;
	font-family: monospace;
	font-weight: bolder;
}

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

	FEATURES TABLE

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

table {
	width:  100%;
}

td, th {
	padding:  10px;
	text-align:  left;
	border:  1px solid #ccc;
}

td.group {
	background:  #eaecee;
}

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

	Standout
	"Did you know?"

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


.standout {
	background: #eaecee;
	border-radius:  4px;
	padding:  16px 20px;

	display:  flex;
	align-items:  center;
	margin-top:  36px;
}

.standout img {
	margin-right:  12px;
}

.standout p {
	margin:  0;
}

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

	Button Wrapper
	(Download Page)

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

.buttonwrapper {
	padding:  36px 0;
}






/* header */


/* header */



#header {
/*   background-color: #fff; */
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  /* position: fixed; */
  /* width: 100%; */
  z-index: 3;
  overflow:  hidden;
}

#header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
/*   background-color: #fff; */
}

#header li a {
  display: block;
  height:  50px;
  line-height:  50px;
  border-left: 1px solid #eaecee;
  text-decoration: none;
}



#header li:first-child a,
#header li:last-child a {
	border-left:  none;
}

#header li a {
	padding-left: 20px;
	font-family: monospace;
	text-transform: uppercase;
	font-weight:  normal;
}

#header li a:hover,
#header .menu-btn:hover {
  background-color: #eaecee;
}

#header li:last-child a {
	height: 58px;
}

#header .container > div:first-child {
  float: left;
  display: flex;
  align-items: center;
}

.version {
	background: #eaecee;
	border-radius: 4px;
	padding: 6px;
	margin-left: 16px;
	color: #505457; /*#444;*/
	display: flex;
	align-items: center;
	font-size: 16px;

	position: fixed;
	bottom: 12px;
	right: 12px;
	z-index: 99999;
}

.version select {
	margin-left: 4px;
}

#header .logo {
  display: block;

  font-size: 2em;
  /* padding: 18px 20px; */
  height:  58px;
  text-decoration: none;
  position: relative;

  background-image:  url(/site_files/img/dgxl-logo-2.svg);
	background-repeat: no-repeat;

	padding-left:  20px;
	background-position: 20px 50%;

	width:  160px;
	background-size:  160px;

}

#header img {
	max-width:  200px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* menu */

#header .nav {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

#header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

#header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

#header .menu-icon .navicon:before,
#header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

#header .menu-icon .navicon:before {
  top: 5px;
}

#header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

#header .menu-btn {
  display: none;
}

#header .menu-btn:checked ~ .nav {
  max-height: 308px; /* 50px per menu item+58px for last */
}

#header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

#header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

#header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

#header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
#header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

#header li.buyMenuOption a {
	padding: 0;
}

#header li.buyMenuOption a div {
	font-weight:  bold;
	background: yellow;
	border-radius: 4px;
	padding: 0 20px;
	height: 44px;
	line-height: 44px;
	top: 7px;
	position: relative;
	color: white;
	background: #0078ff;
}

#header li.buyMenuOption a div {
	margin: 0 10px;
	padding:  0 14px;
}

/* #header li.buyMenuOption a:hover {
	background: transparent;
}

#header li.buyMenuOption a:hover div {
	background: blue;
} */

#header li.currentPage a {
	background:  #f4f4f4;
}



.thumbs h3 {
	margin-bottom:  .2em;
}

.thumbs p {
	margin-top:  .2em;
}

/* sidebar */


.sidebar-wrapper a {
	font-weight:  normal;
	text-decoration: none;
	font-family: monospace;
}

.sidebar-wrapper a:hover {
	text-decoration: underline;
}

li.currentSub a {
	font-weight:  bold;
	color:  black;
}

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

	NEWSLETTER SIGNUP

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

#mc_embed_signup_scroll {}

#mc_embed_signup input.email {
	background:  #fff;
	border-radius:  4px;
	border:  none;
	padding:  12px;
	border:  3px solid #eaecee;
	font-size:  1em;

	margin-bottom:  8px;

	width:  320px;
	max-width:  75%;

}

#mc_embed_signup .clear {
	display:  block;
}

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

	PAGE SPECIFICS
	Homepage

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

.gridwrapper {
	padding:  0;
	margin-bottom:  48px;
	margin-top:  32px;
}

#home-grid {
	height:  360px;
	margin-bottom:  12px;

/* 	background:  white;

	box-shadow:  0 3px 10px rgba(0,0,0,.25);
	border:  2px solid white; */

}

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

	ONLINE STORE

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

ul.license-features {
	list-style:  none;
	margin:  0;
	padding:  0;
	text-align:  left;
	padding:  0;
	margin-bottom:  20px;
	margin-top:  32px;
}

ul.license-features li {
	padding: 12px 0;
	font-size: .8em;
	border-bottom:  1px solid #eee;
}

ul.license-features li:last-child {
	border-bottom:  none;
}

span.check {
	color:  #45b445;
	font-size:  1.2em;
}

span.cross {
	color:  #aaa;
	font-size:  1.2em;
}

li.not-included {
	color:  #aaa;
}



.prices > ul {
	list-style:  none;
	margin:  0;
	padding:  0;
}

.prices > ul > li {
	border:  2px solid #eee;
	padding:  32px 20px;
	margin-bottom:  20px;
	border-radius:  4px;
	position:  relative;
}


.prices > ul > li h3 {
	margin-top:  0;
	margin-bottom:  8px;
}

p.desc {
	font-size:  .7em;
	color:  #555;
	line-height:  130%;
	margin-bottom:  32px;
}

p.read a {
	color:  #555;
}

.priceblock a {
	display:  inline-block;
}

.priceblock del {
	text-decoration: line-through;
	font-size: 1em;
	color: #aaa;
}

.priceblock .discount {
	background:  #eee;
	font-size: .6em;
	border-radius: 4px;
	margin-left: 8px;
	padding: 0px 6px;
}

.priceblock h4 {
	display:  flex;
	align-items:  flex-start;
}

.priceblock h4,
.priceblock h5 {
	margin:  0;
}


/* DESKTOP OVERRIDES */

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

#header li.buyMenuOption a div {
	margin: 0;
	padding:  0 20px
}

	.version {
		/* debug: version picker*/
		display: block;
	}

	body {
		margin:  0;
	}

	.center {
		text-align:  center;
	}

	.centered-title {
		text-align:  center;
		padding-bottom:  8px;
	}

	.narrow {
		margin:  0 auto;
		width:  75%;
	}

	/* show sidebar */
	.sidebar-menu {
		display:  block;
	}

	/* hide select */
	.menu-select {
		display:  none;
	}

	#header,
	#main,
	#mailinglist,
	#footer {
		padding:  0;
	}

	#header .container,
	#main .container,
	#mailinglist .container,
	#footer .container {
		padding-left:  20px;
		padding-right:  20px;
	}

	#main .container,
	#mailinglist .container {
		padding-top:  32px;
		padding-bottom:  72px;
	}

	#footer .container {
		padding-top:  20px;
		padding-bottom:  20px;
	}

	h2.huge {
		font-size:  2.5em;
		line-height:  140%;
		margin-bottom:  12px;
	}

	/*
		Sidebar layout
		(Docs)
	*/	

	.sub-wrapper:after {

		  content: "";
  			display: table;
  		clear: both;
	}

	.sub-menu {
		float: left;
		width: 220px;
		padding-right: 80px;
	}

	.sub-content {
		overflow: hidden;
	}

	/* DEMO THUMBS: rows per 3 */

	.thumbs {
		overflow:  hidden;
	}

	.thumbs > div {
		float:  left;
		width:  32%;
		background:  #eaecee;
		box-sizing: border-box;
		padding:  20px;
		border-radius:  4px;
		margin-bottom:  2%;

		height:  260px;
	}

	.thumbs > div {
		margin-right:  2%;
	}

	.thumbs > div:nth-child(3n){
		margin-right:  0;
	}

	.thumbs > div.empty {
		border:  2px solid #eaecee;
		background:  none;
	}

	#header li {
		float: left;
	}

	#header li a {
		height:  58px;
		line-height:  58px;
		padding-left:  20px;
		padding-right:  20px;
	}

	#header .logo {
		padding:  0;
		background-position: 0 50%;
		width:  200px;
		background-size:  200px;
	}

	#header {
		box-shadow: none;
	}

	#header .nav {
		clear: none;
		float: right;
		max-height: none;

		display: flex;
		align-items: center;
	}

	#header .menu-icon {
		display: none;
	}

	#home-grid {
		height:  600px;
	}

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

		ONLINE STORE

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


	.prices {
		padding-top:  24px;
	}

	.prices > ul {
		list-style:  none;
		margin:  0;
		padding:  0;

		display:  flex;
		justify-content: space-between;
	}

	.prices i {
		font-style: normal;
		background:  #e50000;
		color:  white;
		font-weight:  bold;
		display:  inline-block;
		padding:  2px 8px;
		border-radius:  4px;
		font-size:  .8em;
		text-transform: uppercase;
	}

	.prices > ul > li {
		width:  48%;
		box-sizing: border-box;
		border:  none;
		padding:  40px;
		border:  2px solid #eee;
		box-sizing:  border-box;
		/* text-align: center; */

	}

	.priceblock {
		position: relative;
		padding:  20px 0 0 0;
		height:  72px;
	}

	.priceblock div {
		position:  absolute;
		top:  60px;
		left:  0;
		display:  flex;
	}

	.prices h3 {
		font-size:  1.9em;
		margin:  0;
		padding-bottom:  0;
		padding-top:  0;
		line-height:  1.2;
	}

	.priceblock h4 {
		font-size:  1.5em;
		font-weight: normal;
			padding:  0;
			margin:  0;
	}

	p.desc {
		height:  60px;

		padding:  0;
		color:  #777;
		margin:  0;
		padding-top:  0;
		padding-bottom:  0;
		font-size:  .8em;
		line-height:  130%;
	}

	p.read {
		height:  40px;
		padding:  0;
		border-bottom:  2px solid #eee;
	}

	p.read a {
		color:  #777;
	}

	.radio {
		display:  inline-block;
		width:  24px;
		height:  24px;
		border-radius:  12px;
		box-sizing: border-box;
		border:  2px solid #0078ff;
		vertical-align:  baseline;
		margin-right:  8px;
	}

	.read {
		font-size:  .8em;
		color:  #777;
	}

	.spacer {
		height:  220px;
		border-bottom:  2px solid #eee;
	}

	.firstCat {
		height:  200px;
		border-bottom:  2px solid #eee;
		text-align:  left;
		position:  relative;
	}

	.firstCat > img {
		width:  100%;
		height:  100%;
	}

	.secondCat {
		text-align:  left;
	}

	.volumeblock {
		border-top:  2px solid #eee;
	}


	.total {

		padding-left:  25%;

		margin-top:  24px;
		border-top:  2px solid #eee;

		display:  flex;
		align-items: center;
		justify-content: flex-end;
		padding-top:  32px;
	}

	.total > div {
		margin-right:  48px;
		font-size:  1.2em;
		display:  flex;
		align-items:  center;
	}

	.total span {
		font-size:  1.5em;
		margin-left:  12px;
	}

	.total i {
		font-style:  normal;
	}


}



 /* DEMOS */

.custom-file-input[type="file"] {
  height: 0;
  overflow: hidden;
  width: 0;
}

.custom-file-input[type="file"] + label {

	padding:  0 12px;
	cursor:  pointer;

	font-size: 1em;
	height: 44px;
	line-height: 41px;
	display: inline-block;
	margin: 0;

	color: #000;
	background: #eaecee;
	border: 1px solid rgba(0,0,0,.15);
	border-bottom-width: 3px;
	border-radius: 4px;
	cursor: pointer;
	font-family: monospace;

	box-sizing: border-box;

/* 	
  background: #f15d22;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
	font-size: inherit;
  font-weight: 600;
  margin-bottom: 1rem;
  outline: none;
  padding: 1rem 50px;
  position: relative;
  vertical-align: middle; */
}

.custom-file-input[type="file"] + label:hover {
	background: #cad1d6;
}

/* KEY CONTROLS */


    .controls {
      margin:  20px 0;
    }

    .controls-table {
      line-height: 1.4;
      width: 100%;
    }

    .controls-table {
    	margin-bottom: 64px;
    }

    .controls-table tr.header td {
      padding:0;
    }

    .controls-table td {
    	border: none;
      border-bottom: 1px solid #eaecee;
      padding: 8px 0;
      /* vertical-align: top; */
    }

    .controls-table td:first-child {
      min-width: 180px;
    }

    .controls-table div {
margin-top: 6px;
    }

    .controls i,
    .controls-table i {
      font-style: normal;
      background:  #ddd;
      padding:  2px 4px;
      border-radius:  2px;
            margin: 4px 0;
                  display:  inline-block;

          width: 20px;
          text-align: center;
          font-family: monospace;
          color: #505457;
    }



    .controls b,
    .controls-table b {
      background:  #ddd;
      padding:  2px 4px;
      border-radius:  2px;
      white-space: nowrap;
      margin: 4px 0;
            display:  inline-block;
            width: 20px;

            text-align: center;
            font-family: monospace;
            color: #505457;
    }

    .controls b.mod,
    .controls-table b.mod {
      width:  60px;

    }

    .controls b.act,
    .controls-table b.act {
      width:  60px;
    }

    .controls b.long,
    .controls-table b.long {
      width: 100px;
    }