@charset "UTF-8";

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html
{
	font-family: sans-serif; /* 1 */
	-ms-text-size-adjust: 100%; /* 2 */
	-webkit-text-size-adjust: 100%; /* 2 */ 
}
body { margin: 0; }  /* Remove the margin in all browsers (opinionated) */

/* HTML5 display definitions */

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }  /* Add the correct display in Edge, IE, and Firefox. */
audio, canvas, progress, video { display: inline-block; }  /* Add the correct display in IE 9 */
audio:not([controls]) { display: none; height: 0; }  /* Add the correct display in iOS 4-7 */
progress { vertical-align: baseline; }  /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
template, [hidden] { display: none; }  /* Add the correct display in IE */

/* Text-level semantics */

a { background-color: transparent; } /* Remove the gray background on active links in IE 10 */	
a { -webkit-text-decoration-skip: objects; } /* Remove gaps in links underline in iOS 8+ and Safari 8+ */
a:active, a:hover { outline-width: 0; }  /* Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
abbr[title]
{
	border-bottom: none; /* Remove the bottom border in Firefox 39- */
	text-decoration: underline; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
	text-decoration: underline dotted; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
}
b, strong { font-weight: inherit; } /* Prevent the duplicate application of `bolder` by the next rule in Safari 6 */
b, strong { font-weight: bolder; letter-spacing: -0.04em; } /* Add the correct font weight in Chrome, Edge, and Safari */
dfn { font-style: italic; } /* Add the correct font style in Android 4.3- */
h1 { font-size: 2em; margin: 0.67em 0; } /* Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
mark { background-color: #ff0; color: #000; } /* Add the correct background and color in IE 9- */
small { font-size: 80%; } /* Add the correct font size in all browsers */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }  /* Prevent `sub` and `sup` elements from affecting the line height in all browsers */
sub { bottom: -0.25em; }
sup { top: -0.5em; }
del { position: relative; text-decoration: none; opacity: 0.5; }
del::after { content: ''; position: absolute; top: 50%; left: -0.5rem; right: -0.5rem; border-bottom: 1px solid rgba(255, 0, 0, 0.8) }

/* Embedded content */

img { border-style: none; } /* Remove the border on images inside links in IE 10- */
svg:not(:root) { overflow: hidden; } /* Hide the overflow in IE */

/* Grouping content */

code, kbd, pre, samp
{
	font-family: monospace, monospace;   /* Correct the inheritance and scaling of font size in all browsers */
	font-size: 95%;
	/* font-size: 1.1em; */  /* Correct the odd `em` font sizing in all browsers */ 
	-webkit-hyphens: none;
	color: #333;  /* The monospaced fonts look a bit too bold */
}
pre code { font-size: 1.0em }
code { display: inline-block; white-space: pre-wrap; }
figure { margin: 1em 40px; } /* Add the correct margin in IE 8 */
hr { box-sizing: content-box; height: 0; overflow: visible; border: 0px; border-bottom: 1px solid #999; margin: 1em 0em; } /* Add the correct box sizing in Firefox. Show the overflow in Edge and IE. */

/* Forms */

button, input, select, textarea
{
	font: inherit; /* Change font properties to `inherit` in all browsers (opinionated) */
	margin: 0; /* Remove the margin in Firefox and Safari */ 
}
optgroup { font-weight: bold; } /* Restore the font weight unset by the previous rule */
button, input { overflow: visible; } /* Show the overflow in Edge */
button, select { text-transform: none; } /* Remove the inheritance of text transform in Firefox */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /* Correct the inability to style clickable types in iOS and Safari */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /* Remove the inner border and padding */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /* Restore the focus styles unset by the previous rule */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* Change the border, margin, and padding in all browsers (opinionated) */
legend
{
	box-sizing: border-box; /* Correct the text wrapping in Edge and IE */
	color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
	display: table; /* Correct the text wrapping in Edge and IE */
	max-width: 100%; /* Correct the text wrapping in Edge and IE */
	padding: 0; /* Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers */
	white-space: normal; /* Correct the text wrapping in Edge and IE */
}
textarea { overflow: auto; } /* Remove the default vertical scrollbar in IE */
[type="checkbox"], [type="radio"]
{
	box-sizing: border-box; /* Add the correct box sizing in IE 10- */
	padding: 0; /* Remove the padding in IE 10- */
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /* Correct the cursor style of increment and decrement buttons in Chrome */
[type="search"]
{
	-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
	outline-offset: -2px; /* Correct the outline style in Safari */
}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* Remove the inner padding and cancel buttons in Chrome and Safari on OS X */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; line-height: normal; } /* Correct the text style of placeholders in Chrome, Edge, and Safari */
::-webkit-file-upload-button
{
	-webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
	font: inherit; /* Change font properties to `inherit` in Safari */
}

/* Font Definitions */

@font-face
{
	font-family: 'Foro-ExtraLight';
	font-display: fallback;
	src: url("../fonts/359138_0_0.eot");
	src: url("../fonts/359138_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/359138_0_0.woff2") format("woff2"), url("../fonts/359138_0_0.woff") format("woff"), url("../fonts/359138_0_0.ttf") format("truetype");
}

@font-face
{
	font-family: 'ForoLig';
	font-display: fallback;
	src: url("../fonts/ForoLig-webfont.woff2") format("woff2"), url("../fonts/ForoLig-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'typoldlight';
	font-display: fallback;
	src: url("../fonts/typold-light-webfont.woff2") format("woff2"), url("../fonts/typold-light-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'fontspring_demo_-_typold_liIt';
	font-display: fallback;
	src: url("../fonts/typold-lightitalic-webfont.woff2") format("woff2"), url("../fonts/typold-lightitalic-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'typoldbook';
	font-display: fallback;
	src: url("../fonts/typold-book500-webfont.woff2") format("woff2"), url("../fonts/typold-book500-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'typoldbook';
	font-display: fallback;
	src: url("../fonts/typold-bookitalic-webfont.woff2") format("woff2"), url("../fonts/typold-bookitalic-webfont.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}

/* Main Styles */

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

html { box-sizing: border-box; height: 100%; font-size: 62.5%; background-color: #fcfcfc; }
body
{
	height: 100%;
	color: black;
	padding: 0 4px;
	font-family: 'typoldlight', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1.5rem;
	line-height: 2.6rem;
	text-align: center;
	text-rendering: optimizeLegibility;
}
.container { display: flex; flex-direction: column; height: auto; background-color: #fcfcfc; text-align: left; }
.main { margin-top: 0; flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
p { margin: 0 0 3rem; padding: 0; word-wrap: break-word; word-break: break-word; }
p { hyphens: auto; -webkit-hyphens: auto;  -ms-hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; }
a:link, a:visited, a:hover, a:active { color: inherit; /* color: #eb4600; */ text-decoration: none; hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; -moz-hyphens: none; -o-hyphens: none; }
a:target { display: block; position: relative; top: -100px; visibility: hidden; }  /* Correction for navigation bar */
ul { list-style-type: none; margin: 0; padding: 0; }
i, em { font-family: 'fontspring_demo_-_typold_liIt', sans-serif; font-style: normal; }
figure { margin: 0; }

form { margin: 0; padding: 0; }
input[type=text],
input[type=search],
input[type=url],
input[type=email],
input[type=tel],
input[type=number],
textarea
{
	width: 100%;
	border: 0;
	/* border-top: 0; border-right: 0.5em solid #6bc7ae; border-bottom: 0; border-left: 0; */
	margin: 0;
	padding: 0;
	resize: vertical;
	background: transparent; 
	outline: none;
}
::-webkit-input-placeholder { padding-top: 0.2rem; }
::-moz-placeholder { padding-top: 0.2rem; }
:-ms-input-placeholder { padding-top: 0.2rem; }
input[type=number] { text-align: right; }
input[type=number]::-webkit-outer-spin-button { padding-left: 1rem; }
input[type=text]:disabled, input[type=url]:disabled, input[type=email]:disabled, input[type=tel]:disabled, textarea:disabled { border-right: 0; }
input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; width: 0px;}
input:disabled, textarea:disabled { 	color: #6e8780; -webkit-text-fill-color: #6e8780; -webkit-opacity: 1; cursor: default; }
input:invalid { color: #ff0000; }  /* rgb(4, 85, 206); */
input.underlined { border-bottom: dotted #bbb 1px; }
.number-input { display: inline-flex; width: 70%; margin-top: -0.2em; }
.number-input.tooltip { display: inline-flex; }
.number-input, .number-input * { box-sizing: border-box; }
.number-input input[type=number] { padding-right: 0.5rem; }
.number-input div { display: inline-block; margin-top: 0.2em; }
.number-input button
{
	outline:none;
	-webkit-appearance: none;
	background-color: transparent;
	border: none;
	width: 0.8em;
	height: 0.8em;
	cursor: pointer;
	margin: 0px;
	display: block;
	padding: 0px;
	font-size: inherit;
	background-color: transparent;
}
.number-input button.decrease { background-image: url('/assets/images/buttons/decrease.png'); background-size: 0.8em 0.8em; }
.number-input button.decrease:hover:not([disabled]) { background-image: url('/assets/images/buttons/decrease-active.png'); }
.number-input button.decrease[disabled], .number-input button.increase[disabled] { cursor: default; opacity: 0.35; background-color: transparent; }
.number-input button.increase { background-image: url('/assets/images/buttons/increase.png'); background-size: 0.8em 0.8em; }
.number-input button.increase:hover:not([disabled]) { background-image: url('/assets/images/buttons/increase-active.png'); }

select
{
	-webkit-appearance: none;
	-moz-appearance:none;
	background: #fff;
	border: 1px solid #389f83;
	border-radius: 4px;
	padding: 0.2em 1.5em 0.3em 0.7em;
	line-height: 140%;
	font-size: 90%;
	font-size: inherit;
	color: black;
	background-image: url('/assets/images/buttons/select.png');
	background-position: right 50%;
	background-size: 1.25em 1em;
	background-repeat: no-repeat;
	max-width: 100%;
}
select:invalid { border-color: #ff0000; }  /*rgb(111, 166, 255)*/
select:disabled
{
	-webkit-text-fill-color: #6e8780;
	-webkit-opacity: 1;
	background: transparent;
	border-color: transparent;
	color: #6e8780;
	padding-left: 0px;
	border-left: 0px;
}
td select { margin-bottom: 0.3rem; }  /* Otherwise it wouldn't look vertically centered in table cells */

.checkbox { width: 3rem; height: 3rem; margin: 0px; position: relative; display: inline-block; }
.checkbox input[type="checkbox"] { width: auto; opacity: 0.00000001; position: absolute; left: 0; margin-left: -20px; }
.checkbox label { position: relative; }
.checkbox label:before
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	margin: 3px 3px 3px 0px;
	width: 20px;
	height: 20px;
	transition: transform 0.28s ease;
	border-radius: 4px;
	border: 1px solid #389f83;
}
.checkbox label:after
{
	content: '';
	display: block;
	width: 10px;
	height: 5px;
	border-bottom: 2px solid #389f83;
	border-left: 2px solid #389f83;
	-webkit-transform: rotate(-45deg) scale(0);
	-moz-transform: rotate(-45deg) scale(0);
	-ms-transform: rotate(-45deg) scale(0);
	transform: rotate(-45deg) scale(0);
	position: absolute;
	top: 10px;
	left: 5px;
}
.checkbox input[type="checkbox"]:checked ~ label::before { color: #389f83; }
.checkbox input[type="checkbox"] ~ label:active::before { background-color: #389f83; }
.checkbox input[type="checkbox"] ~ label:active::after { border-color: #fff; }
.checkbox input[type="checkbox"]:checked ~ label::after
{
	-webkit-transform: rotate(-45deg) scale(1);
	-moz-transform: rotate(-45deg) scale(1);
	-ms-transform: rotate(-45deg) scale(1);
	transform: rotate(-45deg) scale(1);
}
.checkbox label
{
	min-height: 20px;
	display: block;
	padding-left: 40px;
	margin-bottom: 0;
	font-weight: normal;
	cursor: pointer;
	vertical-align: sub;
}
.checkbox label span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.checkbox input[type="checkbox"]:focus + label::before { outline: 0; }

.nohighlight { user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -o-user-select: none; -moz-user-select: none; }

table { width: 100%; border-spacing: 0px; margin-bottom: 2rem; table-layout: fixed; }
tr { 	vertical-align: top; }
th { font-size: 1.1rem; color: #666; }
td, th { padding: 0.4em 0.0 0.4em 0.0; border-bottom: 1px #eee solid; margin-left: 0px; margin-right: 0px; word-wrap: break-word; }
td:first-child, th:first-child { padding-left: 0px; }
tr:first-child td { border-top: 1px #aaa solid; }
tr.strikethrough { text-decoration: line-through; color: red; }
td.red { color: red; }

tr.nodivider td, tr.nodivider th { border-bottom: none; }
table.hoverable tr:hover td { background-color: #eee; }

table.download.collapsed-header { margin-top: -2rem; }
table.download tr { vertical-align: middle; }
table.download tr td a { cursor: pointer; }
table.download td:nth-child(1), table.download th:nth-child(1) { width: 44px; }
table.download td:nth-child(2), table.download th:nth-child(2) { width: 50%; }
table.download td:nth-child(3), table.download th:nth-child(3) { width: 20%; }
table.download td:nth-child(4), table.download th:nth-child(4) { width: 30%; }
@media (max-width: 640px)
{
	table.download th:nth-child(2), table.download td:nth-child(2) { width: 60%; }
	table.download th:nth-child(3), table.download td:nth-child(3) { width: 40%; }
	table.download th:nth-child(4), table.download td:nth-child(4) { display: none; }
}

table.download.extras { margin-top: -2rem; }
table.download.extras tr td { cursor: default; }
table.download.extras td:nth-child(3), table.download.extras th:nth-child(3) { width: 20%; }
table.download.extras td:nth-child(4) {width: 10%; }
table.download.extras th:nth-child(4) { width: 30%; }
table.download.extras td:nth-child(5), table.download.extras th:nth-child(5) { width: 10%; }
table.download.extras td:nth-child(6), table.download.extras th:nth-child(6) { width: 10%; }
table.download.extras td:nth-child(7), table.download.extras th:nth-child(7) { display: none; text-align: right; }
table.download tr:not([onclick]) a { color: #eb4600; }
@media (max-width: 980px)
{
	table.download.extras { margin-top: 0px; }
	table.download.extras td:nth-child(2), table.download.extras th:nth-child(2) { width: 70%; }
	table.download.extras td:nth-child(3), table.download.extras th:nth-child(3) { display: none; }
	table.download.extras td:nth-child(4), table.download.extras th:nth-child(4) { display: none; }
	table.download.extras td:nth-child(5), table.download.extras th:nth-child(5) { display: none; }
	table.download.extras td:nth-child(6), table.download.extras th:nth-child(6) { display: none; }
	table.download.extras td:nth-child(7), table.download.extras th:nth-child(7) { display: table-cell; }
}

table.download.thirdparties td:nth-child(3), table.download.thirdparties th:nth-child(3) { width: 50%; }

table.download.ebooks td:nth-child(2) { width: 70%; }
table.download.ebooks th:nth-child(2) { width: 30%; }
table.download.ebooks td:nth-child(3), table.download.ebooks th:nth-child(3) { width: 10%; }
table.download.ebooks td.buy:nth-child(3) { width: 30%; text-align: center; }
table.download.ebooks td.buy:nth-child(4), table.download.ebooks td.buy:nth-child(5) { width: 0%; }
table.download.ebooks td:nth-child(4) { width: 10%; }
table.download.ebooks td:nth-child(5) { width: 10%; }
table.download.ebooks th:nth-child(4), table.download.ebooks th:nth-child(5) { width: 0% }
table.download.ebooks td:nth-child(6), table.download.ebooks th:nth-child(6) { display: none; text-align: right; }
@media (max-width: 980px)
{
	table.download.ebooks td:nth-child(3), table.download.ebooks th:nth-child(3) { display: none; }
	table.download.ebooks td:nth-child(4), table.download.ebooks th:nth-child(4) { display: none; }
	table.download.ebooks td:nth-child(5), table.download.ebooks th:nth-child(5) { display: none; }
	table.download.ebooks td:nth-child(6), table.download.ebooks th:nth-child(6) { display: table-cell; }
}

table.download.extensions tr td { cursor: default; }
table.download.extensions td:nth-child(4) { text-align: center; }
@media (max-width: 640px)
{
	table.download td:nth-child(3), table.download th:nth-child(3) { display: none; }
	table.download th:nth-child(4), table.download td:nth-child(4) { display: table-cell; }
	table.download.extensions td:nth-child(4) { text-align: right; }
}

table.download td img { height: 3rem; vertical-align: middle; margin: 0.5rem 0px; }
table.download.bookmarklets a.bubble
{
	background-color: #389f83;
	opacity: 0.6;
	padding: 0.1em 1em 0.1em 1em;
	border-radius: 2em;
	color: white;
	font-size: 1.1rem;
	width: 13em;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
table.download.bookmarklets img.bubble { width: auto; height: 2.5rem; }
table.download.bookmarklets td:nth-child(4) { text-align: center; }
table.log, table.comments { margin-bottom: inherit; }

/* Navigation */

nav { position: fixed; width: 100vw; margin-left: -4px; border-top: 4px solid #fcfcfc; z-index: 10000; }
nav > div.wrapper
{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 4px;
	padding: 2rem 3rem;
	transition: 0.3s;
	z-index: 10000;
	border-bottom: 2px solid #6bc7ae;
	color: black;
	background-color: #fcfcfc;
}
@media (max-width: 640px)
{
	nav > div.wrapper { font-size: 1.3rem; padding: 2rem 1.5rem; }
}
nav .wrapper .nav__list-svg { fill: black; }
nav .wrapper .nav__logo-placeholder, .nav__wrapper .nav__logo-placeholder:hover { content: url(../images/devontech-logo-green.svg); }
nav .wrapper.top { border-bottom: none; color: #fff; background-color: transparent; }
nav > div.wrapper.top .nav__list-svg { fill: #fff; }
nav > div.wrapper.top .nav__logo-placeholder, nav > div.wrapper.top .nav__logo-placeholder:hover { content: url(../images/devontech-logo-white.svg); }
nav > div.wrapper.top #cart_icon+span { background-color: #fff; color: #509381; }
nav > div.wrapper.scrolled { border-bottom: 2px solid #94a8a3; color: black; background-color: #fcfcfc; }
nav > div.wrapper.scrolled .nav__list-svg { fill: black; }
nav > div.wrapper.scrolled .nav__logo-placeholder, nav > div.wrapper.scrolled .nav__logo-placeholder:hover { content: url(../images/devontech-logo-grey.svg); }

.nav__list { display: flex; align-items: center; white-space: nowrap; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
@media (max-width: 640px)
{
	.nav__list-item:nth-child(3) { display: none; }  /* Even on the iPhone X the navigation is too wide, especially in German laguage, so we're hiding the Users segment altogether */
	#main-navigation li:not(:first-child) { opacity: 0.0; width: 0px; transition: none; }
	#main-navigation.visible li:not(:first-child) { opacity: 1.0;  width: inherit; transition: opacity 0.15s linear 0.15s; }
}
.nav__list-item { position: relative; margin-left: 1rem; cursor: default; }
.nav__list-item a:visited, .nav__list-item a:hover, .nav__list-item a:active { color: inherit; }
nav > div.wrapper li.search { margin-left: 0.5rem; }
nav > div.wrapper li.cart #cart_icon { display: inline-block; background-image: url(/assets/images/cart-black.svg); background-repeat: no-repeat; width: 17px; height: 12px; }
nav > div.wrapper li.cart div.cart span
{
	width: 1.8rem;
	height: 1.8rem;
	background-color: #6bc7ae;
	border-radius: 50%;
	padding: 0.37rem 0.4rem 0.4rem 0.42rem;
	vertical-align: middle;
	display: inline-block;
	top: -0.2rem;
	position: relative;
	font-size: 1rem;
	line-height: 1rem;
	text-align: center;
	color: white;
}
nav > div.wrapper.top li.cart #cart_icon { background-image: url(/assets/images/cart-white.svg); }
nav > div.wrapper .searchfield { display:inline-block; width: 0px; margin-right: 0.5em; transition: 0.5s ease-in-out; }
nav > div.wrapper .searchfield.visible { width: 150px; margin-left: 1rem; }
nav > div.wrapper .searchfield input
{
	width: 25px;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid transparent;
	padding-right: 25px;
	background: transparent;
	outline: none;
	color: black;
	line-height: 1.2em;
	transition: 0.5s ease-in-out;
	-webkit-appearance: none;
	border-radius: 0px /* iOS */;
}
nav > div.wrapper .searchfield input::placeholder { padding-left: 0.1em; text-align: right; }
nav > div.wrapper .searchfield.visible input { width: 175px; border-bottom-color: rgba(0, 0, 0, 0.2); }
nav > div.wrapper.top .searchfield input { color: white; }
nav > div.wrapper.top .searchfield.visible input { border-bottom-color: white;}
nav > div.wrapper .search .loupe
{
	display: inline-block;
	background-image: url(/assets/images/loupe-black.svg);
	width: 12px;
	height: 12px;
	margin-left: -20px;
}
nav > div.wrapper.top .search .loupe { background-image: url(/assets/images/loupe-white.svg); }

nav > div.wrapper li .account-icon
{
	display: inline-block;
	width: 15px;
	height: 21px;
	background-image: url(/assets/images/account-black.svg);
	background-repeat: no-repeat;
	background-size: 15px 15px;
	background-position: 0 6px;
}
nav > div.wrapper.top li .account-icon { background-image: url(/assets/images/account-white.svg); }
#logout_icon { background-image: url(/assets/images/logout-black.svg); }
nav > div.wrapper.top #logout_icon { background-image: url(/assets/images/logout-white.svg); }

.nav__list-item:first-child { flex-grow: 1; margin-left: 0; }
.nav__list-item--current a { color: inherit; cursor: default; text-decoration: none; }
.nav__logo-placeholder { width: 40px; height: 40px; border-radius: 50%; content: url(../images/devontech-logo-green.svg); }
.nav__logo-placeholder:hover { cursor: pointer; }
.nav__list-vector { width: 1.4rem; height: 1.4rem; vertical-align: text-bottom; }
.nav__list-svg { fill: #fff; }
.nav__sub-list
{
	position: absolute;
	display: block;
	padding: 1.4rem 0 1.4rem 0;
	outline: 1px solid rgba(174, 183, 180, 0.4);
	background-color: rgba(252, 252, 252, 0.90);
	color: black;
	text-align: left;
	visibility: hidden;
	line-height: 0;
	opacity: 0;
	transition: line-height 0.1s ease, opacity 0.25s ease;
	-webkit-backdrop-filter: blur(10px);
}
.nav__sub-list--right { left: auto; right: -2rem; }
.nav__list-item:hover .nav__sub-list { visibility: visible; line-height: 2rem; opacity: 1; }
.nav__sub-list-item a { display: block; padding: 0 2rem; line-height: 180%; }
.nav__sub-list-item a:hover { color: #6bc7ae; }
.nav__sub-list-item--with-icon { background-size: 24px 24px; background-repeat: no-repeat; background-position: 1.8rem 0.5rem; }
.nav__sub-list-item--with-icon a { padding: 0.5rem 2rem 0.5rem 5.5rem; }
.nav__sub-list-item--with-padding a { padding-left: 4.9rem; }
.nav__sub-list-divider { display: block; width: 84%; margin: 0.6rem 8% 1rem; border-top: 1px solid #999; }
.nav__search { padding: 0 1.6rem; color: black; font-size: 1.3rem; }
.nav__search input[type=search] { width: 15rem; height: 2.4rem; border-radius: 1.2rem; border: 1px solid #999; margin-bottom: 1rem; }
.nav__search-options { margin-left: 0.8rem; }
.nav__sub-list-footnote { color: gray; font-size: 1.3rem; line-height: 1.4rem; }

nav.pagination { position: relative; width: auto; margin: 0px; border: none; z-index: auto; text-align: center; }
nav.pagination a { display: inline-block; padding-left: 1rem; padding-right: 1rem; }

.mosaic { display: flex; flex-direction: column; align-content: flex-start; align-items: center; margin: 0 auto 8rem; text-align: center; line-height: 0; }
.mosaic a:link, .mosaic a:visited, .mosaic a:hover, .mosaic a:active { color: #00a383; }
.mosaic__tile { padding: 18rem 8vw 0; display: block; margin: 0; background-image: radial-gradient(circle at bottom center, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 75%); }
.mosaic__row { display: flex; padding: 0 8rem; max-width: 142rem; }
@media (max-width: 1280px) { .mosaic__row { padding: 0 4rem; } }
@media (max-width: 1000px) {	.mosaic__row { flex-flow: column; padding: 0; } }
.mosaic__row:before { content: ""; position: absolute; left: 0; width: 100vw; border-top: 1px solid #fff; }
@media (max-width: 1000px) { .mosaic__row:before { border-top: none; } }
.mosaic__tile--secondary { padding: 4rem 5rem; text-align: left; width: 50%; line-height: 1.3em; display: flex; align-items: flex-start; background-image: none; }
@media (max-width: 1000px) { .mosaic__tile--secondary { border-top: 1px solid #fff; width: 100%; padding: 4rem 12vw; } }
@media (max-width: 840px) { .mosaic__tile--secondary { padding: 3rem 10vw; } }
.mosaic__tile--secondary:nth-child(odd) { border-right: 1px solid #fff; }
@media (max-width: 1000px) { .mosaic__tile--secondary:nth-child(odd) { width: 100%; border-right: none; } }
.mosaic__img { position: relative; width: 54vw; max-width: 1080px; height: auto; }
.mosaic__icon { float: left; padding: 3rem 1.2rem 0 0; }
.mosaic__h1 { margin-bottom: 2.2rem; font-family: Foro-ExtraLight, serif; font-size: 5.2rem; line-height: 5.5rem; font-weight: 100; }
@media (max-width: 1280px) { .mosaic__h1 { margin-bottom: 1.8rem; font-size: 4.5rem; line-height: 4.8rem; } }
@media (max-width: 1000px) { .mosaic__h1 { font-size: 4.1rem; line-height: 4.4rem; } }
@media (max-width: 840px) { .mosaic__h1 { font-size: 3.6rem; line-height: 3.9rem; } }
@media (max-width: 640px) { .mosaic__h1 { font-size: 3.3rem; line-height: 3.4rem; } }
.mosaic__h2 { position: relative; font-weight: 100; font-family: ForoLig, serif; font-size: 2.1rem; line-height: 2.6rem; margin-bottom: 0.4em; }
.mosaic__h2 a:link, .mosaic__h2 a:visited, .mosaic__h2 a:active { color: inherit; text-decoration: none; }
.mosaic__h2 a:hover { border-bottom: 1px solid gray; }
.mosaic__h3 { position: relative; margin-bottom: 2rem; font-size: 1.7rem; font-weight: normal; }
@media (max-width: 1280px) { .mosaic__h3 { margin-bottom: 2.8rem; } }
@media (max-width: 840px) { .mosaic__h3 { font-size: 1.5rem; } }
.mosaic__h4 { position: relative; color: gray; margin-bottom: 0.8rem; font-size: 1.3rem; font-weight: normal; }
.mosaic__p { font-size: 1.5rem; line-height: 2.2rem; margin: 0; }
.mosaic-widget { font-size: 0; margin: 0 0 4rem; }

.split-button-container { display: inline-grid !important; grid-template-columns: auto; }
.split-button-container.equal-columns2 { grid-template-columns: 1fr 1fr; }
.split-button-container.equal-columns3 { grid-template-columns: 1fr 1fr 1fr; }
.split-button-container.equal-columns4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.split-button-container.equal-columns5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.split-button-container.auto-columns2 { grid-template-columns: auto auto; }
.split-button-container.auto-columns3 { grid-template-columns: auto auto auto; }
.split-button-container.auto-columns4 { grid-template-columns: auto auto auto auto; }
.split-button-container.auto-columns5 { grid-template-columns: auto auto auto auto auto; }
.split-button
{
	color: #fff;
	display: inline;
	margin: 0;
	line-height: 1.3em;
	font-size: 1.5rem;
	background: linear-gradient(#00c29b 20%, #08a082 100%);
	padding: 0.4em 0.5em 0.5em 0.5em;
	margin-right: 1px;
	border-radius: 4px;
	cursor: pointer;
}
.split-button a:link, .split-button a:visited, .split-button a:hover, .split-button a:active,
a.split-button:link, a.split-button:visited, a.split-button:hover, a.split-button:active { color: #fff; }
a.split-button > div.price { display: block; border-top: 0.5px solid rgba(255, 255, 255, 0.5); padding-top: 0.3em; margin-top: 0.5em; }
.split-button > a > span.price, .split-button > div.price > span.secondary { color: rgba(255, 255, 255, 0.5) }
.split-button.left { border-radius: 4px 0 0 4px; padding-right: 0.7em; padding-left: 1em; }
.split-button.right { border-radius: 0 4px 4px 0; padding-right: 1em; padding-left: 0.7em; margin-right: 0px; }
.split-button.middle { border-radius: 0; }

.main-intro { margin: 0 auto 8rem; text-align: center; line-height: 0; }
@media (max-width: 720px) { .main-intro { margin-bottom: 4rem; } }
.main-intro:after { content: ""; display: block; height: 30px; border-top: 1px solid #e0e0e0; background: linear-gradient(rgba(255, 255, 255, 0) 100%, white 0%); }
.main-intro > figure { padding: 14rem 8vw 0; color: #fff; text-align: center; }
.main-intro > figure.devonthink
{
	background: linear-gradient(356deg, rgba(253, 251, 246, 0.8) 16%, rgba(111, 215, 235, 0) 68%), url("../images/noise.png"), linear-gradient(356deg, rgba(253, 251, 246, 0) 16%, #6fd7eb 68%);
}
.main-intro > figure.devonthink.ios
{
	background: linear-gradient(356deg, rgba(253, 251, 246, 0.8) 16%, #52d1eb 68%), url("../images/noise.png"), linear-gradient(356deg, rgba(253, 251, 246, 0) 16%, #52d1eb 68%);
}
.main-intro > figure.devonagent
{
	background: linear-gradient(356deg, #fefbfc 16%, rgba(143, 214, 173, 0) 68%), url("../images/noise.png"), linear-gradient(356deg, rgba(254, 251, 252, 0) 16%, #8fd6ad 68%);
}
.main-intro > figure.devonsphere
{
	background: linear-gradient(356deg, #fafffa 16%, rgba(200, 157, 166, 0) 68%), url("../images/noise.png"), linear-gradient(356deg, rgba(250, 255, 250, 0) 16%, #c89da6 68%);
}
@media (max-width: 1280px) { .main-intro > figure { padding: 11rem 5vw 0; } }
@media (max-width: 840px) { .main-intro > figure { padding: 9rem 3vw 0; } }
.main-intro > figure > img { position: relative; bottom: -40px; width: 72vw; max-width: 1340px; height: auto; }
@media (max-width: 1600px) { .main-intro > figure > img { bottom: -2.6vw; } }
@media (max-width: 1280px) { .main-intro > figure > img { width: 82vw; } }
@media (max-width: 1000px) { .main-intro > figure > img { width: 85vw; } }
@media (max-width: 840px) { .main-intro > figure > img { width: 88vw; } }
.main-intro h1 { margin-bottom: 3rem; font-family: Foro-ExtraLight, serif; font-size: 6.6rem; line-height: 6.7rem; font-weight: 100; padding-left: 15%; padding-right: 15%; }
.main-intro > figure.devonthink h1 { text-shadow: 0 0 14px rgba(0, 149, 179, 0.7); }
.main-intro > figure.devonagent h1 { text-shadow: 0 0 14px rgba(62, 163, 104, 0.7); }
.main-intro > figure.devonsphere h1 { text-shadow: 0 0 14px rgba(140, 115, 120, 0.7); }
@media (max-width: 1280px) { .main-intro > figure h1 { font-size: 6rem; line-height: 6.1rem; } }
@media (max-width: 1000px) { .main-intro > figure h1 { margin-bottom: 2.4rem; font-size: 5.2rem; line-height: 5.3rem; } }
@media (max-width: 840px) { .main-intro > figure h1 { margin-bottom: 2rem; font-size: 4.2rem; line-height: 4.3rem; } }
@media (max-width: 640px) { .main-intro > figure h1 { margin-bottom: 1.4rem; font-size: 3.3rem; line-height: 3.4rem; padding-left: inherit; padding-right: inherit; } }
.main-intro > figure h3 { position: relative; display: inline-block; margin-bottom: 4rem; font-size: 1.7rem; font-weight: normal; }
.main-intro > figure.devonthink h3 { text-shadow: 0 0 5px rgba(0, 136, 163, 0.85); }
.main-intro > figure.devonagent h3 { text-shadow: 0 0 5px rgba(64, 150, 100, 0.85); }
.main-intro > figure.devonsphere h3 { text-shadow: 0 0 5px rgba(112, 92, 96, 0.85); }
@media (max-width: 1280px) { .main-intro > figure h3 { margin-bottom: 2.8rem; } }
@media (max-width: 840px) { .main-intro > figure h3 { font-size: 1.5rem; } }
.main-intro p { position: relative; width: 100%; max-width: 94rem; top: -1.4rem; margin: 3rem auto -3rem; padding: 0 4rem; font-size: 1.7rem; text-align: left; }
@media (max-width: 1280px) { .main-intro p { margin: 1.8rem auto -6rem; } }
@media (max-width: 1000px) { .main-intro p { font-size: 1.5rem; margin: 1.4rem auto -6rem; } }

.product-widget { position: relative; top: -0.2rem; display: inline-block; margin-left: 1.5rem; font-size: 1.5rem; font-size: 0; }
.product-widget.devonthink .split-button { background: linear-gradient(#00bbe0 20%, #04abcd 100%); }
.product-widget.devonthink .split-button:active { background: linear-gradient(#009ebd 20%, #0893ae 100%); }
.product-widget.devonagent .split-button { background: linear-gradient(#0ac257 20%, #0daf51 100%); }
.product-widget.devonagent .split-button:active { background: linear-gradient(#14ae54 20%, #0daf51 100%); }
.product-widget.devonsphere .split-button { background: linear-gradient(#d24b66 20%, #c9405b 100%); }
.product-widget.devonsphere .split-button:active { background: linear-gradient(#b5475d 100%, #bc445c 20%); }

.main-body { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 auto 0; /* 0 auto 8rem */ padding: 16rem 10rem 0; max-width: 106rem; min-width: 30rem; }
@media (max-width: 720px) { .main-body { padding-left: 3rem; padding-right: 3rem; } }
.main-body.productpage { padding: 0 10rem; }
@media (max-width: 720px) { .main-body.productpage { padding: 0 3rem; } }
.main-body.productpage em { font-family: typoldlight, sans-serif; }
.main-body.productpage.devonthink em { color: #00b3d6; }
.main-body.productpage.devonagent em { color: #00c251; }
.main-body.productpage.devonsphere em { color: #d6002b; }
.main-body.lead-centered p.lead { text-align: center; }
.main-body h1 { text-align: center; width: 100%; margin-bottom: 2.2rem; font-family: Foro-ExtraLight, serif; font-size: 5.2rem; line-height: 5.5rem; font-weight: 100; letter-spacing: 0.014em; }
@media (max-width: 1280px) { .main-body h1 { margin-bottom: 1.8rem; font-size: 4.5rem; line-height: 4.8rem; } }
@media (max-width: 1000px) { .main-body h1 { font-size: 4.1rem; line-height: 4.4rem; } }
@media (max-width: 840px) { .main-body h1 { font-size: 3.6rem; line-height: 3.9rem; } }
@media (max-width: 640px) { .main-body h1 { font-size: 3.3rem; line-height: 3.4rem; } }
.main-body .lead { font-size: 1.7rem; font-weight: bold; letter-spacing: -0.035em; line-height: 3.2rem; color: #333; }
.main-body .logo { width: 100%; margin-bottom: 5rem; text-align: center;}
.main-body .logo div { width: 30%; min-width: 200px; min-height: 200px; padding-bottom: 30%; height: 0px; margin-left: auto; margin-right: auto; }
.main-body .logo div img { width: 100%; min-width: 200px; }
.main-body > .login { width: 70%; margin-left: 15%; margin-right: 15%; }
@media (max-width: 640px) { .main-body > .login { width: 90%; margin-left: 5%; margin-right: 5%; } }
.main-body .login form { margin-bottom: 5rem; }
.main-body .login form input[type="text"], .main-body .login form input[type="password"]
{
	width: 100%;
	border: none;
	border-bottom: 1px solid #bbb;	
	background: transparent;
	text-align: left;
	padding: 1rem 0rem 0.25em 0rem;
	outline: none;
	font-size: 2rem;
	line-height: 2.5rem;
	margin-bottom: 1rem;
}
.main-body .login form p:last-of-type { margin-top: 3rem; }
.main-body .login p { width: 100%; text-align: center; }
.main-body .login div.footnote p  { text-align: inherit; margin: 0; }
@media (max-width: 640px)
{
	.main-body .login form input[type="text"], .main-body .login form input[type="password"] { font-size: 1.5rem; }
}

.story { flex: 1 1 40rem; padding-right: 3rem; }
@media (max-width: 840px) { .story { padding-right: 0; } }
.story.no-sidebar { padding-right: 0; }
.story h1 { font-family: Foro-ExtraLight, serif; font-weight: 100; font-size: 2.8rem; letter-spacing: 0.014em; line-height: 3.4rem; margin-bottom: 0.5em; color: black; margin-top: 1em; text-align: left; }
.story h1:first-child { margin-top: 0.8rem; }
.story h3+h1 { margin-top: 0px; }
.story > div:first-child > h2:first-child,
.story > div:first-child >h2:first-child + input[type=button] { margin-top: 0.8rem; }
.story h2 { font-size: 130%; font-weight: normal; margin-bottom: 0.5em; color: #389f83; margin-top: 3rem; text-align: left; }
.story .fragment h2 { font-size: 100%; margin-top: 1rem; }
.story h2 a:link, .story h2 a:visited, .story h2 a:active { color: inherit; text-decoration: none; }
.story h2 a:hover { border-bottom: 1px solid gray; }
.story h2 img.icon { padding: 0rem 0.5rem 1rem 0; width: 4rem; vertical-align: -2rem; } /*{ padding: 0 0 0 0.5em; width: 2em; vertical-align: bottom; } */

.story h3 { position: relative; color: #389f83; font-size: 1.5rem; font-weight: normal; text-align: left; }
.story h3 a:hover { text-decoration: underline; }
.story h3 img.icon { padding: 0rem 0.5rem 1rem 0; width: 4rem; vertical-align: -2.5rem; }

.story ul { list-style: none; margin-bottom: 0.5em; }
.story ul li::before { content: "•"; color: #6e8780; display: inline-block; width: 2.5rem; font-size: 200%; line-height: 50%; vertical-align: -0.3rem; margin-left: -2.5rem; }
.story ul.searchresults li::before { content: none; }
.story ul li { padding-left: 2.5rem; }

.story > p+div.fragment { margin-top: 3rem; }
.story div.fragment, .story article.fragment { display: flex; align-items: flex-start; margin-bottom: 3rem; }
.story div.fragment a { color: #eb4600; }
.story .fragment > img.icon+div { width: 100%; }

.story .fragment div.faq-body { max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease-in; padding-left: 1.25em; }
.story .fragment div.faq-body > *:first-child { margin-top:0.5rem; }
.story .fragment div.faq-body > *:last-child { margin-bottom:2rem; }
.story .fragment div.faq-body.hidden { max-height: 0px; transition-timing-function: ease-out; }
.story .fragment h1 p, .story .fragment h3 p { word-break: normal; hyphens: none; -webkit-hyphens: none; }
.story .fragment h2[onclick] { cursor: pointer; user-select: none; color: black; margin-top: 0; margin-left: 1.25em; margin-bottom: 0; transition: color 0.1s ease-in; }
.story .fragment h2[onclick].open { color: #389f83; }
.story .fragment h2[onclick]:before
{
	display: inline-block;
	content: " ";
	width: 1em;
	height: 1em;
	margin-right: 0.25em;
	vertical-align: -0.2em;
	background-image: url(/assets/images/buttons/caret.png);
	background-size: 1em;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.3;
	transform: rotate(-90deg);
	transition: transform 0.1s ease-in;
	margin-left: -1.25em;
}
.story .fragment h2[onclick].open:before { transform: rotate(0deg); transition-timing-function: ease-out; }
@media(max-width:720px)
{
	.story .fragment h2[onclick] { margin-left: calc(-5rem + 1.25em); }
	.story .fragment div.faq-body { margin-left: -5rem; padding-left: 0; }
}

.story .icon { padding: 2.2rem 1.5rem 0 0; width: 5rem; min-width: 5rem; min-height: 5.5rem;}
.story p > .icon { display: inline-block; padding: 0 0; width: 1em; height: 1em; min-width: 1em; min-height: 1em; vertical-align: -0.1em; }
.story figure { margin-top: 2.0rem; margin-bottom: 1.4rem; text-align: center; }
.story figure.right { float: right; }
.story figure img { max-width: 100%; }
.story figure a img { opacity: 0.8; transition: opacity 0.2s; }
.story figure a img:hover { opacity: 1.0; }
.story figure.inline-image { display: inline-block; padding-right: 1rem;}
.story figure:not(.inline-image) img { height: auto; }
.story img[data-lightbox-src] { cursor: pointer; }
.story.blog article.fragment figure, .story article.pressrelease figure { text-align: left; }
.story.blog article.fragment figure img, .story article.pressrelease figure img { max-width: 300px; }
.main-body.productpage .story figure:not(.inline) img { max-width: 60%; margin-left: 20%; margin-right: 20%; }
.main-body.productpage .story figure { margin-top: 3rem; margin-bottom: 3rem; }
.story figure.cropped img { max-width: 60%; padding: 0 8px; border-bottom: 1px dotted #94a8a3; }
.story figure.bordered img { padding: 4px; border: 1px solid #bbb; }
.story figcaption { display: inline-block; width: 78%; font-size: 1.3rem; line-height: 1.6em; color: #6e8780; }
.story figcaption a:link, .story figcaption a:visited, .story figcaption a:hover, .story figcaption a:active { color: #eb4600; }
.story.blog article.fragment figcaption { display: block; }
.story.blog code { color: #AB2295; }
.story > table { table-layout: auto; }
.story > table th:not(:last-child), .story > table td:not(:last-child) { padding-right: 1rem; }

.story .gallery { margin-top: 3rem; margin-bottom: 3rem; }
.story .gallery:first-child { margin-top: 0.8rem; }
.story .gallery img { display: inline-block; margin-right: 2%; width: 32%; }
.story .gallery img:nth-of-type(3), .story .gallery img:nth-of-type(6), .story .gallery img:nth-of-type(9), .story .gallery img:nth-of-type(12) { margin-right: 0; }
/*
	.story figure.inline { display: inline-block; margin-right: 2%; }
.story figure.inline:nth-of-type(3), .story figure.inline:nth-of-type(6), .story figure.inline:nth-of-type(9) { margin-right: 0; }
*/

p.lead { width: 100%; hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; -moz-hyphens: none; -o-hyphens: none; }
.story.pressrelease p.lead { font-size: inherit; line-height: inherit; }  /* .main-body .lead { font-size: 1.7rem; font-weight: bold; letter-spacing: -0.035em; line-height: 3.2rem; color: #333; } */

.story p { margin-bottom: 0.8rem; }
.story p a:link, .story p a:visited, .story p a:hover, .story p a:active, .story td a, .story li a { color: #eb4600; }
.story table.download td a, .story .crew.listrequests td a, .story .crew.manageusers td a { color: inherit; }
.story p span:not(.nohyphens) { cursor: pointer; }
section:not(.productpage) .story blockquote { border-left: 1px solid rgba(110, 135, 128, 0.5); /* #6e8780 */ margin-left: 0px; padding-left: 2rem; padding-right: 2rem; margin-right: 0px; }

a.button
{
	float: right;
	margin-top: -4.2rem;
	background-color: #6bc7ae;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 0.2em 0.7em 0.3em 0.7em;
	color: white;
	-webkit-text-fill-color: white;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
p.button { text-align: center; margin-top: 2rem; margin-bottom: 2rem;}
p.button a.button { float: inherit; }

a.button:active { background-color: #549c89; }
.story p.footnote, .story div.footnote, .login div.footnote { font-size: 1.3rem; color: #6e8780; }
td div.footnote p { margin-top: 1em; }
.main-body.productpage .story p { line-height: 3.2rem; margin-bottom: 3rem; }

.story p.download { margin-bottom: 0; }
.story p.download a:link, .story p.download a:visited, .story p.download a:hover, .story p.download a:active { color: #eb4600; }
.story p.download::before { content: url(../images/icons/download.svg); margin-right: 8px; }

p.versioninfo::before { margin-right: 8px; background-size: 1.2em 1.2em; display: inline-block; width: 1.2em; height: 1.2em; content: " "; background-position-y: 0.2em; background-repeat: no-repeat; }
p.versioninfo.mac::before { background-image: url(../images/icons/icon-mac.svg); }
p.versioninfo.ios::before { background-image: url(../images/icons/icon-iosdevice.svg); }
.story p.versioninfo { font-size: 1.3rem; color: #6e8780; }

section.searchfield { width: 100%; text-align: center; margin-top: 2rem; margin-bottom: 4rem; }
section.searchfield input[name="q"]
{
	width: 70%;
	border-top: none;
	border-right: none;
	border-bottom: 2px solid #aaa;
	border-left: none;
	padding-bottom: 0.3em;
	background: transparent;
	font-size: 3rem;
	text-align: center;
	outline: none;
	transition: 0.3s;
}
section.searchfield input[name="q"]:focus { border-bottom-color: black; }
section.searchfield p { margin: 1rem 0rem 0rem 0rem; }
section.searchfield a { color: #eb4600; }
.story .searchresults li { list-style-type: none; text-indent: 0px; margin-bottom: 3rem; padding-left: 0; }
@media (max-width: 720px) { section.searchfield input[name="q"] { width: 100%; } }
@media (max-width: 640px) { section.searchfield input[name="q"] { font-size: 2rem; } }

.blog-masthead { width: 100%; text-align: center; max-width: 106rem; margin: 1rem 0 6rem; }
.blog-masthead h2 img { width: 32rem; max-width: 100%; }
.blog-masthead h3
{
	margin: 1rem auto 0;
	padding-top: 1rem;
	width: 56rem;
	max-width: 100%;
	font-family: ForoLig, serif;
	font-size: 2.15rem;
	font-weight: normal;
	letter-spacing: 0.05em;
	border-top: 1px solid black;
}
@media (max-width: 640px)
{
	.blog-masthead h2 img { width: 26rem}
	.blog-masthead h3 { font-size: 1.8rem; }
}
@media (max-width: 375px)
{
	.blog-masthead h3 { font-size: 1.5rem; }
}

.story.blog h1 { margin-bottom: 0.2em; }
.scope { margin-left: 5rem; padding-bottom: 2rem; margin-top: 0.5rem; }
.scope span.tag,
.scope span.category,
.scope span.search { background-color: #eb4600; padding: 0.2em 0.8em 0.3em 0.8em; margin-left: 0.3em; border-radius: 1em; color: #fff; }

.scope div.closebox
{
	content: " ";
	width: 0.4em;
	height: 0.4em;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0.2em 0.5rem;
	background-image: url(/assets/images/buttons/tag-delete-white.png);
	background-size: 0.4em 0.4em;
	background-repeat: no-repeat;
	cursor: pointer;
}
.scope div.closebox:active { background-image: url(/assets/images/buttons/tag-delete-white-active.png); }

.scope span.category { background-color: #389f83; }
.scope span.search { background-color: #73baff; }
.story.blog li a { color: #eb4600; }
.story.faq h1 { font-size: 1.8rem; font-family: typoldlight, sans-serif; color: #6bc7ae; }
.story.faq article.fragment { margin-bottom: 0; }
 .story.faq .fragment img.icon { padding-top: 0; }

.story > figure.pageicon { margin-bottom: 2em; }
.story.error404 > section.searchfield { margin-top: 2em; }

.aside span.tag, .meta span.tag
{
	display: inline-block;
	background-color: transparent;
	padding: 0.0em 0.6em 0.2em 0.6em;
	margin-left: 0.3em;
	border-radius: 1em;
	border-width: 1px;
	border-style: solid;
	border-color: #eb4600;
	line-height: 1.3em;
}
.aside p.tags { line-height: 2.2em; }
.aside figure.center { text-align: center; }
.meta span.tag:first-of-type { margin-left: -0.1em; }

.meta { margin-bottom: 1.2rem; display: flex; flex-wrap: wrap; font-size: 1.3rem; color: #6e8780; }
.meta a:link, .meta a:visited, .meta a:hover, .meta a:active { color: #eb4600; }
.meta a:hover { text-decoration: underline; }
.meta .date { margin-right: 0.5rem; }
.meta .tags { display: flex; flex-wrap: wrap; margin-top: 0.8rem; }
/* .meta .tags a:link, .meta .tags a:visited, .meta .tags a:hover, .meta .tags a:active { margin-left: 1.4rem; } */

.meta__related { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 0.4em; }
.meta__related div { width: 31%; margin: -0.4em 2% 0 0; padding: 0; }
.meta__related a:link, .meta__related a:visited, .meta__related a:hover, .meta__related a:active
{
	display: inline-block;
	margin-top: 0.3em;
	font-family: Foro-ExtraLight, serif;
	font-weight: 100;
	font-size: 1.7rem;
	line-height: 1.28em;
	letter-spacing: 0.014em;
	color: black;
}

.share-icon { width: 16px; height: auto; margin: 0.3rem 0 0 0.7rem; }
.share-icon path { fill: #aeb7b5; }
.share-icon:hover { cursor: pointer; }
.share-icon:hover path { fill: black; }

.forum__table { font-size: 1.3rem; border: 1px solid gray; border-collapse: collapse; line-height: 1.4em; }
.forum__table thead { border: 1px solid gray; }
.forum__table thead th { margin-bottom: 0.5rem; font-family: typoldbook, sans-serif;  font-size: 1.3rem; font-weight: normal; color: #000; border: 1px solid gray; }
.forum__table tbody { border: 1px solid gray; }
.forum__table td { border: 1px solid gray; }

.testimonial { position: relative; margin: 4rem 0 1rem 0; }
section .story blockquote.testimonial { border-left: inherit; margin: 4rem 0 1rem 0; padding-left: 0; padding-right: 0; color: #389f83; }
section .story.blog blockquote.testimonial { margin-top: 1.5rem; margin-bottom: 1.5rem; }
section .story.pressrelease .testimonial { margin-top: 2rem; margin-bottom: 2rem; }
.main-body.devonthink .testimonial { color: #ff6600; }
.main-body.devonagent .testimonial { color: #e61a5e; }
.main-body.devonsphere .testimonial { color: #08915d; }

.testimonial p.quote { position: relative; display: inline; font-family: 'fontspring_demo_-_typold_liIt', sans-serif; font-size: 1.7rem; line-height: 1.3em; }
.story.pressrelease .testimonial p.quote { font-size: inherit; line-height: inherit; }
.testimonial p.quote:before { position: absolute; left: -0.55em; content: "“"; font-family: Baskerville, sans-serif; font-size: 3.2rem; }
.testimonial p.quote:after { position: relative; padding-left: 0.1em; top: 0.1em; line-height: 0%; display: inline; content: "”"; font-family: Baskerville, sans-serif; font-size: 3.2rem; }
.testimonial p.source { text-align: right; }
.testimonial p.source:before { content: "— "; }
.testimonial p.source a { color: inherit; }
@media (max-width: 840px) { .testimonial p.source { right: 3rem; } }

span.error { color: red; }
div.error { text-align: center; width: 100%; }
div.error h1 { color: red; }
div.error a { border-bottom: 1px solid red; }
div.error a:active { color: red; }

aside {
	align-self: flex-start;
	order: 3;
	width: 26rem;
	margin-top: 0.8rem;
	padding: 1.8rem 2rem 0.8rem;
	padding: 1.8rem 1.8rem 0.8rem 2.2rem;
	background-color: #f6f6f4;
	background-color: rgba(174, 183, 180, 0.1);
	font-size: 1.3rem;
	line-height: 2.4rem;
}
aside a:link, aside a:visited, aside a:hover, aside a:active { color: #eb4600; }
aside form { margin-bottom: 2rem; }
aside form select { width: 100%; }
aside form input[type=text] { width: 100%; padding: 0 0.4em; line-height: 1.4em; }
@media (max-width: 1000px) { aside { width: 23rem; } }
@media (max-width: 840px) { aside { order: 5; width: 100%; } }
.aside h1
{
	margin-bottom: 0.6rem;
	margin-top: 1.8rem;
	font-family: 'typoldbook', sans-serif;
	font-size: 1.3rem;
	font-weight: normal;
	color: #389f83;
	text-align: left;
	line-height: 2.4rem;
}
.aside h1:first-child { margin-top: 0px; }
.aside h2 { margin-top: 1.8rem; margin-bottom: 0.6rem; font-family: 'typoldbook', sans-serif; font-size: 1.3rem; font-weight: normal; color: #000; }
.aside h2 a, .aside li a { color: inherit; border-bottom: 1px dotted #999; }
.aside p, .aside ul { margin-bottom: 0.6rem; }
.aside p:last-child { margin-bottom: 1rem; }
.aside p span { cursor: pointer; }
.aside a.rss { display: inline-block; }
.aside a.rss::before { content: url(../images/blog/rss.svg); margin: 0 0.2em 0 0.1em; }
.aside ul { list-style-type: disc; list-style-position: inside; margin-bottom: 1.4rem; padding-left: 0.4em; }
.aside ul span { cursor: pointer; }
.aside ul a:link, .aside ul a:visited, .aside ul a:hover, .aside ul a:active { color: black; }
.aside img { max-width: 100%; }
.aside__form--inline { margin-top: -1.4rem; }
.aside .newsletter form input[name=email] { width: calc(100% - 2.5rem); display: inline; border-bottom: dotted #bbb 1px; }
.aside .newsletter form input[name=subscribe] { height: 2rem; margin-top: 0.5rem; float: right; }
.aside .newsletter form input[name=subscribe]:disabled { opacity: 0.5; }
.aside .search form input[type=search] { border-bottom: 1px dotted rgba(0, 0, 0, 0.2); }

/* Cover */

#cover
{
	background-color: rgba(0, 0, 0, 0);
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: 20000;
	transition: background-color 0.5s, -webkit-backdrop-filter 0.5s;
}
#cover.visible
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.75);
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-backdrop-filter: blur(15px);
}
#cover .close-button { position: fixed; top: 1.4rem; left: 1.6rem; color: #fff; font-size: 2rem; padding: 0.4rem; cursor: pointer; display: none; font: 3rem "Helvetica", sans-serif; z-index: 20001;  /* The button must overlay e.g. the gallery */ }
#cover .close-button:before { content: "✕"; }
#cover.visible .close-button { display: block; }

/* Modals */

.modal { background-color: #fcfcfc; border-radius: 2px; padding: 2.4rem 2rem 1.2rem; display: none; margin-top: -10vh; text-align: center; }
.modal p { line-height: 1.2em; margin: 0 0 0.4rem; }
.modal p.footnote { font-size: 1.3rem; line-height: 1.8rem; color: #6e8780; padding-bottom: 1rem; margin: 0 0 1.4rem; border-bottom: 1px solid #6e8780; }
.modal a { color: #00b3d6; }
.modal .product-widget { margin: 1.4rem 5rem 0.8rem; }
.modal.visible { display: inline-block; }

/* Gallery */

#gallery { display: none; flex-direction: column; justify-content: center; align-items: center; width: 80vw; height: 100%; padding-bottom: 20vh; margin: 0 auto; z-index: 1100; }
#gallery.visible { display: block; }
#gallery section { width: 100%; height: 95vh; margin: 5vh 0 0 0; padding: 0; display: none; }
#gallery section.visible { display: block; }
#gallery figure { max-width: 100%; }
#gallery figure div.ratio-fixer { position: relative; text-align: center; width: 100%; height: 80vh; max-height: calc(100vh - 150px); display: flex; margin: 0 auto; justify-content: center; align-items: center; }
#gallery figure div.ratio-fixer span { display: inline-block; height: 100%; vertical-align: middle;}
#gallery figure img { flex-shrink: 0; /* min-width: 100%; */ max-height: 100%; max-width: 100%; /* min-height: 100%; */ object-fit: scale-down; }
#gallery figure iframe { flex-shrink: 0; max-height: 80vh; max-width: 100%; }
#gallery figcaption { padding: 0 8vw; color: #ebebeb; height: 0; }
#gallery figcaption div { height: calc(15vh - 6rem); min-height: 50px; overflow: hidden; text-align: center; display: flex; }  /* Make the caption a block with bottom-aligned, centered text*/
#gallery figcaption div span { align-self: flex-end; display: inline-block; margin-left: auto; margin-right: auto;}
#gallery .gallery-nav { position: relative; top: -5rem; }
#gallery .gallery-nav ul { display: flex; justify-content: center; }
#gallery .gallery-nav li { width: 0.7em; height: 0.7em; margin: 1rem 1rem; background-color: gray; border-radius: 50%; cursor: pointer; }
#gallery .gallery-nav li:only-child { display: none; }
#gallery .gallery-nav li.current { background-color: #fff; }
@media (max-width: 720px)
{
	#gallery figure div.ratio-fixer { height: 70vh; }
	#gallery figcaption div { height: calc(25vh - 6rem); }
}

div.vimeo { position: relative; }
div.vimeo > .darken
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 6px);  /* Don't ask me why; it's just is 6 px off in Safari and Firefox alike */
	background-image: url(/assets/images/buttons/play.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 6rem;
	filter: drop-shadow(0px 0px 0.5rem #999);
}
div.vimeo > .darken:before { content: ""; background: url(/assets/images/buttons/play-active.svg) no-repeat -9999px -9999px; opacity: 0.0; }
div.vimeo > .darken:active { background-image: url(/assets/images/buttons/play-active.svg); }

/* Footer */

/* border-top: 1px solid #6bc7ae; */
footer { margin-top: 8rem; padding: 1.8rem 0.0 1.8rem; border-top: 1px solid #6bc7ae; letter-spacing: 0.02em; text-align: center; font-size: 1.3rem; position: relative; }
footer a:link, footer a:visited, footer a:hover, footer a:active { color: inherit; }
footer li { display: inline; margin: 0 1rem; }
footer div.language { display: inline-block; vertical-align: -0.35em; }
footer div.language img { height: 1.5em; }
@media (max-width: 720px) { footer { margin-top: 3rem; } }

/* Cookie Disclaimer */

#cookie_disclaimer
{
	display: table;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	padding: 1rem;
	min-height: 7rem;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	text-align: center;
	z-index: 99999;
}
#cookie_disclaimer.hidden { display: none; }
#cookie_disclaimer a { border-bottom: 1px dotted #999; }
#cookie_disclaimer > div { display: table-cell; vertical-align: middle; }
#cookie_stop { height: 2rem; display: inline-block; vertical-align: -0.4rem; margin-left: 0.5rem; cursor: pointer; }
#cookie_stop svg { width: 2rem; height: 2rem; }
#cookie_stop svg path { fill: #fff; }

/* Buttons */

input.button, label.button, button { background: #6bc7ae; border: 1px solid transparent; border-radius: 4px; padding: 0.2em 0.7em 0.3em 0.7em; font-size: 2.0rem; color: white; -webkit-text-fill-color: white; }
input.button:disabled, button:disabled { background-color: #999; color: white; -webkit-text-fill-color: white; }
input.button:active:enabled, button:active:enabled { background: #68b6a1; }
input.button.small, button.small { font-size: 1.5rem; padding: 0.2em 0.7em 0.2em 0.7em; }
input.headlinebutton, a.headlinebutton, select.headlinebutton { display: inline-block; float: right; margin-left: 0.5rem; margin-top: 25px; font-size: 1.3rem; padding: 0.0rem 0.9rem 0.2rem 0.9rem; }
a.headlinebutton { margin-top: 0.5em; }
input.headlinebutton.left { float: left; }
input.dangerous { background-color: #eb4600; }
input.dangerous:active:enabled { background-color: #ad1e1e; }

img.button { height: 1em; opacity: 0.7; vertical-align: middle; }
img.button:hover { opacity: 1.0; }

/* Tooltips */

.tooltip { position: relative; cursor: default; }
div.tooltip, p.tooltip, span.tooltip { display: inline-block; border-bottom: 1px dotted #aaa; hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; -moz-hyphens: none; -o-hyphens: none; }
.tooltip .tooltip-text
{ 
	visibility: hidden;
	width: 20rem;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 1rem;
	border-radius: 6px;
	position: absolute; /* Position the tooltip text */
	z-index: 1;
	top: 135%;
	left: 50%;
	margin-left: -10rem;
	opacity: 0; /* Fade in tooltip */
	transition: opacity 0.3s;
}
.tooltip .tooltip-text::after  /* Tooltip arrow */
{
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #555 transparent;
}
.tooltip:hover .tooltip-text { visibility: visible; opacity: 0.8; }  /* Show the tooltip text when you mouse over the tooltip container */

/* AJAX */

td.ajaxdots { text-align: center; }
img.ajaxdots { height: 1em; vertical-align: middle; }

.spinner { margin: 0.5em auto 0.5em auto; width: 70px; text-align: center; display: inline-block; line-height: 0.75em; }
.spinner > div
{
	width: 0.75em;
	height: 0.75em;
	margin-right: 0.2em;
	margin-left: 0.2em;
	background-color: #666;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.white > div { background-color: #fff; }
.spinner.small { line-height: 0.5em; }
.spinner.small > div { width: 0.5em; height: 0.5em; }
.spinner.hidden { display: none; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes sk-bouncedelay
{
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay
{
	0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
	40% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}

/* Various */

@media  (max-width: 640px)
{
	.hide-when-narrow { display: none; }
}

p.backlink { text-align: center; margin-top: 6rem;}
.footnotes { font-size: 1.2rem; line-height: 2rem; }
.footnotes ol { padding-left: 2rem; margin-left: 1rem; }
.aside p.footnotes { font-size: inherit; line-height: inherit; color: #555; }
.alert { border-radius: 0.5em; padding: 0.3em 1em 0.5em 1em; background: rgb(255, 102, 111); color: white; margin-bottom: 3rem; width: 100%; }
.alert a { border-bottom: 1px dotted #fff; }
p.alert { margin-bottom: 3rem; }
.red { color: #eb4600; }
span.warning { color: #ee001d; font-weight: bolder; }
.nohyphens { hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; -moz-hyphens: none; -o-hyphens: none; }
p.center { text-align: center; }
figure.centered { text-align: center !important; }
a.vimeo:before { content: "🍿"; margin-right: 0.3em; }
tr.disabled td { color: #999; cursor: default !important; }

.iconrow { padding-left: 5rem; width: 100%; }
.iconrow > figure { display: inline-block; width: 48px; margin: 0 1rem 0 0; }
.iconrow > figure a img, figure.inline-image a img { opacity: 0.75; transition: opacity 0.15s; }
.iconrow > figure a:hover img, figure.inline-image a:hover img { opacity: 1.0; }

aside .iconrow { padding-left: 0; }
aside .iconrow > figure { width: calc(25% - 1.01rem); }
aside .iconrow > figure:last-of-type { margin-right: 0; }

.story h2.large { text-align: center; font-size: 250%; font-weight: 700; line-height: 100%; margin-bottom: 3rem; }
.story h2.large .headlinelabel
{
	display: inline-block;
	border: 1px solid #389f83;
	border-radius: 7px;
	padding: 0.25rem 0.6rem 0.55rem 0.65rem;
	font-size: 2rem;
	font-weight: 400;
	line-height: 2rem;
	vertical-align: 0.7rem;
	color: #389f83;
}
.story h2.large a:hover { border-bottom: none; }
.story h2.large a:hover .headlinelabel { background-color: #389f83; color: #fff; }

/* For Markdown table styling */

.table-container.cols-1-3 th:nth-child(1) { width: 25%; }
.table-container.cols-1-3 th:nth-child(2) { width: 75%; }
.table-container.cols-1-1 th { width: 50%; }
.table-container.simple td, .table-container.simple th { border:none !important; }
.table-container.whatsnew img.icon { padding: 0; margin: 0 0.5rem 0 0; width: 2rem; min-width: inherit; min-height: inherit; vertical-align: -0.33rem; }

/* Printing */

@media print
{
	header { display: none; }
}