@font-face{
	font-family:'brands';
	src:url('../fonts/brands-webfont.eot');
	src:url('../fonts/brands-webfont.eot') format('embedded-opentype'),
	url('../fonts/brands-webfont.woff2') format('woff2'),
	url('../fonts/brands-webfont.woff') format('woff'),
	url('../fonts/brands-webfont.ttf') format('truetype'),
	url('../fonts/brands-webfont.svg') format('svg');
	font-weight:normal;
	font-style:normal;
}

:root {


	/* CONTENT WRAPPERS & BLOCKS */

	--wrapper-background: #444444;
	--body-background: #f0f3f9;
	--content-block-background: #ffffff;

	--primary-color: #66bb44;
	--secondary-color: #50555b;
	--highlight-color: #ff9900;

	/* BASE TYPOGRAPHY */

	--text-font: 'Montserrat', Arial, sans serif;
	--text-color: #333333;
	--text-size: 14px;
	--text-weight: 400;
	--text-spacing: 0.05em;

	--link-color: #0088cc;
	--link-color-hover: #22ccee;

	--heading-font: inherit;
	--heading-color: #666666;
	--heading-size: 16px;
	--heading-weight: 400;
	--heading-spacing: 0;
	--heading-transform: none;
	--heading-color-dark: #ffffff;

	--subheading-font: inherit;
	--subheading-color: #666666;
	--subheading-size: 16px;
	--subheading-weight: 400;
	--subheading-spacing: 0;
	--subheading-transform: none;

	--button-font: inherit;
	--button-color: #ffffff;
	--button-size: 16px;
	--button-weight: 700;
	--button-spacing: 1px;
	--button-transform: none;
	--button-background-color: #444444;
	--button-background-color-hover: #555555;

	--top-background-color: #ffffff;

	--top-menu-font: inherit;
	--top-menu-color: #444444;
	--top-menu-size: 18px;
	--top-menu-weight: 400;
	--top-menu-spacing: 0;
	--top-menu-transform: none;
	--top-menu-highlight-color: 0;


	/* OTHER VARIABLES */
	--column-gutter: 20px;
}


/* --------------------------------------------------------------
CSS RESET
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, 
footer, header, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
table { border-collapse:collapse; border-spacing:0; }

/* --------------------------------------------------------------
GENERAL ELEMENTS
-------------------------------------------------------------- */
html { background:#fff; }
body { font-family:var(--text-font); background:#fff; font-weight:var(--text-weight); font-size:var(--text-size); letter-spacing:var(--text-spacing); color:var(--text-color); line-height:1.6; }

a, a:link, a:visited { color:var(--link-color); text-decoration:none; }
a:hover { color:var(--link-color-hover); text-decoration:none; }
/*a[target=_blank]:after { font-family:'fontawesome'; margin-left:3px; content:'\f08e'; font-size:0.7em; color:#999; opacity:0.5; }*/

h1, h2, h3, h4, h5, h6 { margin:0 0 0.7em; color:#666; line-height:1.2em; }
h1  a:link, h2 a:link { color:inherit; }
h1  a:visited, h2 a:visited { color:inherit; }
h1 { font-size:36px; color:#999; margin:0 0 30px; line-height:1.5; font-weight:300; }
h2 { font-size:1.7em; color:#999; font-weight:300; }
h3 { font-size:1.3em; color:#666; font-weight:700; }
h4 { font-size:1.2em; color:#666; font-weight:700; margin-bottom:0.2em; }
h5 { font-size:1.1em; color:#666; font-weight:700; }
h6 { font-size:1.0em; color:#666; font-weight:700; }

/* COLORS */
.primary-color { color:#BB6600; }
.primary-color-bg { background-color:#BB6600; }
.secondary-color { color:#999; }
.secondary-color-bg { background-color:#999; }

div {  padding:0px;margin:0px;border-spacing:0px;border:0px #ffffff none;background-repeat:no-repeat;}
table {  border-width:0px; border-style:none;vertical-align:top; margin:0px 0 0 0; padding:0px 0 0 0;border-spacing:0px; }
img {  border:0px none;border-spacing:0px;padding:0px;margin:0px;  }
select { max-width:100%; padding-right:30px; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAFCAYAAACn39dKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD5JREFUeNpiYGBgmMmAG8z8//8/A7GYCaYJm0EMJAKQYelYNMPY6aQYxojHJWCDQM4nxWUMWFyRzkAGAAgwAGMTKhZAxxJyAAAAAElFTkSuQmCC'); background-color:#fff; background-repeat:no-repeat; background-position:right; }

hr { margin:20px 0; border:1px solid #ddd; border-width:1px 0 0; }

/* GENERAL TYPOGRAPHY */
p, address { margin-bottom:1.6em; }
p:last-child { margin-bottom:0; }
span, div, p, dl, td, th, ul, ol, blockquote { }

/* LISTS */
ul { margin:0 0 20px; }
ul li { list-style:disc inside none; padding:0; margin:0 0 0.5em 1.5em; }
ol li { list-style:decimal; margin:0 0 5px 20px; list-style-position:outside; }
ol ol li { list-style:upper-alpha; }
ol ol ol li { list-style:lower-roman; }
ol ol ol ol li { list-style:lower-alpha; }
ul ul, ol ol, ul ol, ol ul { margin-bottom:0; }
ul, ol, dd, pre, hr { margin-bottom:24px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom:0; }

dl { margin:0 0 24px 0; }
dt { font-weight:bold; }
dd { margin-bottom:18px; }
strong, b { font-weight:bold; }
cite, em, i { border:none; font-style:italic; }
big { font-size:131.25%; }
ins { background:#ffc; border:none; }
del { text-decoration:line-through; }

/* ADDRESSES */
address { font-size:0.9em; line-height:1.2em; }

/* CITATIONS */
blockquote { display:block; font-style:italic; padding:0 5%; margin:25px 0; }
blockquote cite, blockquote em, blockquote i { font-style:normal; }

/* PREDEFINED TEXT */
pre { font-family:Courier, monospace; background:#f5f5f5; border:1px solid #ccc; color:#222; line-height:18px; margin-bottom:18px; padding:1.5em; display:block; overflow:auto; margin:25px 0; }

abbr, acronym { border-bottom:1px dotted #666; cursor:help; }
ins { text-decoration:none; }
sup, sub { font-size:0.7em; height:0; line-height:1; position:relative; vertical-align:baseline; }
sup { bottom:1ex; }
sub { top:.5ex; }
pre, kbd, tt, var { line-height:21px; }
code { font-size:1.05em; }

/* CODE */
code, code var { font-family:Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }


/* INLINE IMAGES */
img { margin:0; max-width:100%; line-height:0em; }

/* TABLES */
table { border:0px solid #999; border-collapse:collapse; border-spacing:0; margin:0; text-align:left; width:100%; border-radius:3px; }
thead { padding:0 0 5px 0; }
thead td { font-weight:bold; }
tr th, thead th { border:none; font-weight:bold; font-size:1.1em; line-height:1.2em; padding:0 0 10px; }
tr { padding:10px 0; }
tr td { border:none; padding:10px 20px 10px 0; vertical-align:middle; }
tr td:first-child { padding-left:0; }
tr td:last-child { padding-right:0; }

tr .right { text-align:right; }
tfoot { padding:5px; border-top:1px solid #888; }
tfoot td { border:none; font-weight:bold; line-height:1.2em; padding:12px 0; }

/* FORMS */
label { display:block; width:100%; padding:2px 0; font-size:0.9em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
/* Standard Form Elements */
input[type=text], input[type=password], input[type=input], 
input[type=tel], input[type=url], input[type=email], 
input[type=number], input[type=range], input[type=search], input[type=color], 
input[type=time], input[type=week], input[type=month], input[type=date], input[type=datetime], 
select  { font-family:inherit; border:1px solid #ddd; border-radius:3px; font-size:1em; width:100%; padding:5px 5px 5px 5px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; -moz-transition:0.1s linear all; -webkit-transition:0.1s linear all; transition:0.1s linear all; }
select  { padding:5px 28px 5px 5px; }
textarea  { font-family:inherit; border:1px solid #ddd; border-radius:3px; font-size:1em; width:100%; padding:5px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; }
input:hover, textarea:hover, select:hover { border-color:#bbb; }
/*input:focus, textarea:focus, select:focus { border-color:#f16100; box-shadow:0 0 4px 1px #fb4; }*/
input:focus, textarea:focus, select:focus { border-color:#2ac; box-shadow:0 0 4px 1px #4cf; }
textarea { resize:vertical; min-height:44px; }
input[type=submit] { width:auto; -webkit-appearance:none; }
input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}

body .color-lightgrey { color:#bbb; }
body .color-grey { color:#777; }
body .color-black { color:#333; }
body .color-blue { color:#2ac; }
body .color-cyan { color:#7cb; }
body .color-green { color:#64c73c; }
body .color-yellow { color:#fc0; }
body .color-orange { color:#f90; }
body .color-red { color:#F66; }
body .color-violet { color:#db62c7; }
body .color-purple { color:#be44ff; }


body .subtle { color:#888; }


/* Icon fonts */
.fontawesome { font-family:'fontawesome'; }
.font-fontawesome { font-family:'fontawesome'; }
.font-brands { font-family:'brands'; }
.font-linearicons { font-family:'linearicons'; }


/* New lengths, with responsiveness */
body .micro { width:70px; max-width:100%; }
body .tiny { width:100px; max-width:100%; }
body .short { width:200px; max-width:100%; }
body .medium { width:320px; max-width:100%; }
body .long { width:400px; max-width:100%; }



/* POSITIONED ELEMENTS */
body img.align-left { display:block; float:left; margin-left:0; margin:4px 30px 20px 0; max-width:50%; }
body img.align-right { display:block; float:right; margin-right:0; margin:4px 0 20px 30px; max-width:50%; }
body img.align-full { display:block; float:none; margin:0 0 20px; max-width:100%; width:100%; }
body img.display-block { display:block; }
body img.display-inline { display:inline; }
body .align-left { text-align:left; }
body .align-center { text-align:center; }
body .align-right { text-align:right; }
body .align-full { text-align:justify; }


/* ELEMENT VISIBILITY */
.hidden { display:none; }
.invisible { visibility:hidden; opacity:0; }


/* LENGTHS */
body .field-short { width:150px; }
body .field-long { width:400px; }
body .half { width:50%; }
body .third { width:33%; }
body .quarter { width:25%; }
body .middle { padding:0 25%; }


/* SPECIAL FIELDS */
input.post-title { font-weight:300; font-size:24px; padding:10px; margin:0; }
input.post-url {  }


/* MESSAGES */
.messages { position:fixed; right:0; padding:20px; bottom:0; width:500px; visibility:hidden; opacity:0;  transition:0.6s ease all; transition-delay:0.3s; z-index:9999; pointer-events: none; }
.body-ready .messages { visibility:visible; opacity:1; }
.body-messages .messages { visibility:hidden; opacity:0; }
.message { display:block; position:relative; background:#888; margin:0 0 20px; font-weight:normal; padding:25px 20px; color:#fff; line-height:1.4; border-radius:2px; }
.content-block .message { border-radius:0; margin:0; }
.messages .message { margin:0; }
.message p { margin:0; }
.message .message-title { font-size:24px; margin:0 0 5px; line-height:1.2; }
.message-ok { background:#3d5; }
.message-error { background:#f76; }
.message-warn { background:#fc0; }
.message-info { background:#9ce; }
.message-small { padding:15px 20px; }
@media screen and (max-width:600px){
	.messages { width:auto; right:0; bottom:80px; }
	.messages .message { margin:0; padding:10px 15px; border-radius:0; }
}



/* COLUMNS */
.column { float:left; width:100%; margin-right:3%; }
.col2 { width:48.50%;  }
.col3 { width:31.33%; }
.col3x2 { width:65.67%; }
.col4 { width:22.75%; }
.col4x3 { width:74.25%; }
.col-last { margin-right:0; }
.row { float:left; width:100%; margin:0 0 30px; }
.half-left { float:left; width:48%; }
.half-right { float:right; width:48%; }


/* GENERAL LAYOUT ELEMENTS */
.outer { width:100%; overflow:hidden; overflow:clip; }
.container { width:95%; margin:0 auto; max-width:1300px; }
.clearfix { clear:both; width:100%; }



/* Tag colors */
body .color-white { color:#eee; }
body .color-lightgrey { color:#bbb; }
body .color-grey { color:#777; }
body .color-black { color:#333; }
body .color-orange { color:#f90; }
body .color-red { color:#F66; }
body .color-blue { color:#2ac; }
body .color-cyan { color:#7cb; }
body .color-green { color:#6d3; }
body .color-violet { color:#e8e; }
body .color-purple { color:#f4c; }
body .color-yellow { color:#fc0; }
/* Tag backgrounds */
body .background-white { background:#eee; }
body .background-lightgrey { background:#bbb; }
body .background-grey { background:#777; }
body .background-black { background:#333; }
body .background-orange { background:#f90; }
body .background-red { background:#F66; }
body .background-blue { background:#2ac; }
body .background-cyan { background:#7cb; }
body .background-green { background:#6d3; }
body .background-violet { background:#e8e; }
body .background-purple { background:#f4c; }
body .background-yellow { background:#fc0; }

/* Tag colors */
body .tag-color-white { background:#eee; color:#555; box-shadow:inset 0 0 0 1px #ddd; }
body .tag-color-lightgrey { background:#bbb; }
body .tag-color-grey { background:#777; }
body .tag-color-black { background:#333; }
body .tag-color-orange { background:#f90; }
body .tag-color-red { background:#F66; }
body .tag-color-blue { background:#2ac; }
body .tag-color-cyan { background:#7cb; }
body .tag-color-green { background:#6d3; }
body .tag-color-violet { background:#e8e; }
body .tag-color-purple { background:#f4c; }
body .tag-color-yellow { background:#fc0; }



.header { position:fixed; display:flex; align-items:center; background:#fff; height:90px; box-sizing:border-box; top:0; left:0; width:100%; padding:20px; border-bottom:1px solid #eee; }
.logo { display:block; width:150px;  }
.main { padding:90px 0 0 250px; }
.sidebar { position:fixed; top:90px; box-sizing: border-box; border-right:1px solid #eee; background:#fff; height:calc(100vh - 90px); padding:20px; width:250px; }
.menu,
.menu:link,
.menu:visited { display:block; padding:10px 15px; color:inherit; border-radius:5px; }
.menus .menu-active { background:#eee; }

.content { padding:0; background:#fff; min-height:90vh; }
.content-heading { padding:40px; margin:0; }
.content-title { font-size:22px; }
.content-description { margin:20px 0 0; }

.section { display:flex; align-items: stretch; flex-wrap: nowrap; margin:0; }
.section-left { background:#fff; width:55%; box-sizing:border-box; padding:40px; border-top:1px solid #eee; }
.section-title { display:flex; align-items:center; gap:10px; font-size:18px; margin:0 0 20px; }
.section-title-tag { display:inline-block; white-space:nowrap; font-weight: bold; padding:2px 8px; margin:0; font-size:12px; background:#a1a4a8; color:#fff; border-radius:3px; height:20px; line-height:20px; text-align:center; }

.section-description { margin:0 0 40px; }
.section-content { margin:0 0 20px; }

.parameters { margin:30px 0 30px; border-radius:5px; overflow: hidden; }
.parameter { display:flex; padding:15px 20px; background:#f5f7fb; }
.parameter:nth-child(odd) { display:flex; background:rgba(0,0,50,0.06);}
.parameter-title { flex-grow:0; flex-shrink:0; width:250px; }
.parameter-type { color:#777; }
.parameter-description { flex-grow:1; }
.parameter-content { font-size:0.9em; }

.parameter-choices { background:#fff; padding:5px 20px; border-radius:5px; overflow: hidden; margin:30px 0 0; }
.parameter-choice:first-child { border-top:none; }
.parameter-choice { display:flex; align-items: stretch; flex-wrap: nowrap; gap:20px; padding:15px 0; border-top:1px solid #eee; }
.parameter-choice-name { width:150px; text-align:left; font-family: monospace; }
.parameter-choice-value { }

.section-right { background:#45474A; width:45%; border-top:1px solid #555; box-sizing:border-box; padding:40px; }
.sample { background:#222; color:#fff; padding:30px; margin:0 0 30px; border-radius:5px; overflow: hidden; }
.sample-title { color:#888; margin:0 0 20px; }
.sample-content { font-family:monospace; }
.sample-var-name { color:#fff; }
.sample-var-value { color:#aaf; }

.footer { background:#fff; top:0; left:0; width:100%; padding:20px; border-top:1px solid #eee; }