/* Primary styling for the site: */

@font-face {
	font-family: 'Lato Light';
	src: url('/fonts/latolight.woff') format('woff');
}

@font-face {
	font-family: 'Sono ExtraLight';
	src: url('/fonts/sonoextralight.woff') format('woff');
}

html {
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	text-size-adjust: none;
}

body {
	margin: 0;
	background-color: #ebf0f1;
	font-family: 'Lato Light', 'Open Sans', Verdana, Arial;
	font-size: 1em; /*16px*/
	letter-spacing: 0.025em;
	line-height: 1em;
	text-align: center;
	color: #47443e;
	position: relative;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	margin-top: 0.78em;
	margin-bottom: 0.46em;
	padding: 0;
	font-size: 1.389em;
	line-height: 1.2em;
	outline: none;
	font-weight: 500;
}

p.expanded-title {
	margin: 0;
	margin-top: 0.78em;
	margin-bottom: 0.96em;
	padding: 0;
	font-size: 1.2em;
	line-height: 1.2em;
	outline: none;
	font-weight: 500;
}

h3 a {
	text-decoration: none !important;
}

h3 a:hover, h3 a:focus {
	text-decoration: none !important;
	border-bottom: 1px dotted #8594a4;
}

img {
	border: 0;
}

article img {
	max-width: 100%;
	height: auto;
}

figure {
	padding: 0;
	margin: 0.5em 0;
	margin-bottom: 1em;
	text-align: center;
}

figcaption {
	margin: 1em 0;
	margin-top: -0.8em;
	padding: 1.3em 1.3em;
	background-color: rgba(255,255,255,0.7);
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);
	border-radius: 4px;
	font-family: 'Lato Light', 'Open Sans', Verdana, Arial;
	font-size: 0.92em;
	line-height: 1.29em;
	text-align: center;
}

ul, ol {
	margin: 1em 2em;
	padding: 0;
	text-align: left;
	font-size: 0.926em;
	line-height: 1.29em;
}

li {
	margin-bottom: 1em;
}

blockquote, div.notice {
	margin: 1em 0;
	padding: 0.3em 1.3em;
	background-color: rgba(255,255,255,0.7);
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);
	border-radius: 4px;
}

pre {
	margin: 1em 0;
	padding: 1em;
	background-color: rgba(255,255,255,0.7);
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);
	border-radius: 4px;
	text-align: left;
	overflow: auto;
}

hr, div.cut {
	margin: 1.5em;
	border: 0;
	border-top: 0.1em dashed #c6ced7;
}

iframe, object, embed, audio, video {
	max-width: 100%;
	margin: 0.5em 0em;
	border: 0;
	vertical-align: middle;
}

video {
	height: auto;
	background-color: #282828;
	border-radius: 4px;
}

textarea {
	display: block;
	max-width: 27.3em;
	width: 92%;
	height: 10em;
	margin: auto;
	margin-top: 1em;
	margin-bottom: 0.5em;
	padding: 0.5em;
	background-color: white;
	box-shadow: inset 0px 1px 2px #cccccc;
	border: 1px solid #bbbdc0;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	color: #3f464c;
	resize: vertical;
}

input[type="text"], input[type="email"] {
	display: block;
	max-width: 27.3em;
	width: 92%;
	height: 2em;
	margin: auto;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.2em 0.5em;
	background-color: white;
	box-shadow: inset 0px 1px 2px #cccccc;
	border: 1px solid #bbbdc0;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	color: #3f464c;
}

.applied {
	background-color: #eaeaea !important;
	-webkit-transition: background-color 0.2s ease;
	-moz-transition: background-color 0.2s ease;
	-o-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease;
}

select {
	font-family: inherit;
	font-size: 1rem;
	margin: 0.8em 0;
}

label {
	display: inline-block;
	margin: 0.8em 0;
	margin-bottom: 0.5em;
	margin-right: 0.1em;
	font-size: 0.926em;
}

button {
	background-image: none;
	border: 0;
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: inherit;
	line-height: 1rem;
	cursor: pointer;
	outline: none;
}

main, section, aside, figure {
	display: block;
}

header {
	display: block;
	position: relative;
	padding: 0.1em 2em;
	margin: 0;
	margin-bottom: 1.2em;
	background-color: rgba(255,255,255,0.8);
	border-bottom: 1px solid #dee2e6;
	min-height: 62px;
}

nav {
	display: block;
	margin: 1.2em 1.2em;
	line-height: 1.4em;
	text-align: right;
	white-space: nowrap;
	outline: none;
	-webkit-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;
}

nav a {
	text-decoration: none;
	font-size: 0.9em;
	padding: 0 0.5em;
	color: rgba(0,0,0,0.5);
	text-transform: uppercase;
}

nav a:hover, nav a:focus {
	color: rgba(0,0,0,0.8);
}

#sitelogo {
	position: absolute;
	margin-left: 1em;
	margin-top: -0.3em;
	white-space: nowrap;
}

#sitelogo a {
	outline: none;
}

#language-btn {
	margin-left: 0.5em;
}

.flag-icon {
	width: 22px;
	height: 17px;
	vertical-align: middle;
	margin-bottom: 3px;
	border-radius: 2px;
	cursor: pointer;
}

div.banner {
	display: inline-block;
	max-width: 1012px;
	width: 100%;
	height: 280px;
	padding: 0;
	background-color: #ffffff;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	border-radius: 4px;
	margin-bottom: 1.3em;
}

div.pageheading {
	display: inline-block;
	width: inherit;
	height: inherit;
	padding: 0;
	/* background-color: rgba(255,255,255,0.3); */
	border-radius: 4px;
	text-align: center;
	line-height: 280px;
	font-size: 1.35em;
}

div.pageheading h1 {
	display: inline-block;
	margin-top: 0.18em;
	vertical-align: bottom;
	padding: 0.8em 1em;
	background: white;
	background: rgba(255,255,255,0.98);
	border-radius: 4px 30px 4px 30px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
}

section {
	max-width: 1024px;
	margin: auto;
}

article {
	display: block;
	position: relative;
	max-width: 62.25em;
	margin: auto;
	margin-bottom: 1em;
	padding: 0.5em;
	background: white;
	/* background: rgba(255,255,255,0.9); */
	border-radius: 4px 30px 4px 30px;
	text-align: center;
	/* text-shadow: 0px -1px 0px rgba(255,255,255,0.5); */
	word-wrap: break-word;
	font-size: 1.35em;
	line-height: 1.46em;
}

article p {
	font-size: 0.926em;
	line-height: 1.29em;
}

article .column, div .column {
	display: inline-block;
	position: relative;
	max-width: 28.5em;
	width: 89%;
	margin: 0em 1em;
	text-align: left;
	vertical-align: top;
}

article .alignmiddle {
	vertical-align: middle;
}

article .col-20 {
	max-width: 19.5%;
	min-width: 7em;
	/* text-align: left;
	vertical-align: middle; */
}

article .col-80 {
	max-width: 69.5%;
	/* text-align: left;
	vertical-align: middle; */
}

article .col-30 {
	max-width: 29.5%;
	min-width: 7em;
	/* text-align: left;
	vertical-align: middle; */
}

article .col-70 {
	max-width: 59.5%;
	/* text-align: left;
	vertical-align: middle; */
}

article .col-40 {
	max-width: 39.5%;
	min-width: 7em;
	/* text-align: left;
	vertical-align: middle; */
}

article .col-60 {
	max-width: 49.5%;
	/* text-align: left;
	vertical-align: middle; */
}

article .col-50 {
	max-width: 44.5%;
	/* text-align: left;
	vertical-align: middle; */
}

article .col-100 {
	max-width: 100%;
	/* text-align: left;
	vertical-align: middle; */
}

article .heading {
	display: inline-block;
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0 1.3em;
	text-align: left;
	vertical-align: top;
	max-width: 94.3%;
}

article .blurb {
	margin: 0em 1em;
	text-align: center;
}

article.journal {
	font-family: 'Sono ExtraLight', Courier New, monospace;
	background-color: #fffcf4;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}

article.journal blockquote {
	font-family: 'Lato Light', 'Open Sans', Verdana, Arial;
}

article.square {
	border-radius: 4px;
}

article.overnote {
	max-width: 54.25em;
	padding-right: 8em;
	border: solid #a9a5a3 1px;
	background-color: #f2ede9;
	background-image: url('/images/notes/ink.png');
	background-position: 95% center;
	background-size: 140px 100px;
	background-repeat: no-repeat;
	color: #292929;
	text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);
}

article.note {
	max-width: 54.25em;
	padding-right: 8em;
	background: white;
	background: rgba(255,255,255,0.7);
	background-image: url('/images/notes/ink.png');
	background-position: 95% center;
	background-size: 140px 100px;
	background-repeat: no-repeat;
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);
	color: #292929;
	text-shadow: 0px -1px 0px rgba(255,255,255,0.3);
}

article.prince {
	background-image: url('/images/notes/prince.png');
}

article.book {
	background-image: url('/images/notes/book.png');
}

article.library {
	background-image: url('/images/notes/books.png');
}

article.program {
	background-image: url('/images/notes/computer.png');
}

article.code {
	background-image: url('/images/notes/disk.png');
}

article.game {
	background-image: url('/images/notes/gamepad.png');
}

article.noimage {
	background-image: none;
	padding-right: 0.5em;
}

article a, section.reviews a {
	text-decoration: underline;
	color: #3a3a3a;
}

article a:hover, section.reviews a:hover {
	color: #666666;
}

div.note {
	padding: 0 1em;
	margin: 1em 0;
	border: solid #a9a5a3 1px;
	border-radius: 4px;
	background-color: #f2ede9;
	color: #292929;
	text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);
	text-align: center;
}

a.content {
	font-weight: bold;
}

a.external {
	padding-right: 1em;
	background: url('/images/external.svg') center right no-repeat;
	background-size: 0.7em;
	background-position: 99.8% center;
}

a.bookmark {
	border-bottom: 1px dotted #8594a4;
	text-decoration: none;
}

a.file {
	padding-right: 1em;
	background: url('/images/file.svg') center right no-repeat;
	background-size: 0.7em;
	background-position: 99.8% center;
}

img.illustration {
	background-color: rgba(255,255,255,0.7);
	background-image: url('/images/loading.gif');
	background-position: center center;
	background-repeat: no-repeat;
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);
	border-radius: 4px;
	margin: 0.5em 0;
	vertical-align: middle;
}

img.cover {
	padding: 0.3em;
	width: 95%;
	max-width: 380px;
}

img.avatar {
	background-color: #f5f5f5;
	border: 1px solid #dddddd;
	border-radius: 50%;
	padding: 4px;
	width: 2.5em;
	margin-right: auto;
	margin-left: auto;
	display: block;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 2.5rem;
	min-width: 2.5em;
}

img.speaker {
	position: absolute;
	left: 1em;
	top: -1.2em;
	width: 2em;
	min-width: 2em;
	height: auto;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075);
}

/*
.pinneditem {
	position: absolute;
	left: -1.3em;
	top: -1.5em;
	width: 2em;
	min-width: 2em;
	height: auto;
}
*/

div.inwords {
	margin: 0;
	padding: 0;
}

div.inwords img, img.speaker {
	float: left;
	margin-right: 0.3em;
	margin-top: 0.13em;
	margin-bottom 0;
	width: 2.2em;
	min-width: 2.2em;
	background-color: #f5f5f5;
	border: 1px solid #dddddd;
	border-radius: 50%;
	padding: 4px;
	display: block;
	font-size: 2.2rem;
}

div.inwords h2 {
	margin-top: 1em;
	display: inline-block;
	clear: left;
}

section.reviews {
	font-size: 1.35em;
	line-height: 1.46em;
	margin-bottom: 0.7em;
}

div.review {
	display: inline-block;
	position: relative;
	max-width: 40%;
	width: 89%;
	margin: 2em 0.5em 1.1em 0.5em;
	text-align: left;
	vertical-align: top;
	padding: 0.5em 1.5em;
	padding-top: 2em;
	background-color: white;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
	border-radius: 4px;
	text-align: left;
	font-style: italic;
}

section.reviews p {
	font-size: 0.826em;
	line-height: 1.29em;
}

section.reviews hr {
	border: 0;
	border-top: 1px solid #ebebeb;
	margin: 0;
	margin-top: 1em;
	padding: 0;
}

section.reviews .signature {
	margin-top: 1em;
	margin-right: 0.5em;
	text-align: right;
	font-style: normal;
}

button, a.button {
	display: inline-block;
	background-color: #5d6872;
	background: linear-gradient(#75808a 0%, #5d6872 80%);
	border-top: 1px solid #a1aab1;
	border-bottom: 1px solid #3f464c;
	font-size: 1rem;
	line-height: 1rem;
	text-decoration: none;
	color: white;
	text-shadow: 0px -1px 1px #323b44;
	opacity: 0.8;
	margin: 1em 0.25em;
	padding: 0.8em 1em 0.7em 1em;
	border-radius: 13px;
}

/*
a.blue {
	background: linear-gradient(#81a7b6 0%, #567784 80%);
	border-top: 1px solid #9cbcc9;
	border-bottom: 1px solid #404f60;
}
*/

button:hover, button:focus, a.button:hover, a.button:focus {
	/*
	background-color: #7b858f;
	background: linear-gradient(#8f99a3 0%, #7b858f 80%);
	border-top: 1px solid #b8bfc4;
	border-bottom: 1px solid #3f464c;
	*/
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: opacity 0.2s;
}

button:active, a.button:active {
	background-color: #4d5660;
	background: linear-gradient(#656f79 0%, #4d5660 80%);
	border-top: 1px solid #7e8990;
	border-bottom: 1px solid #3f464c;
	opacity: 0.8;
}

div.buybuttons {
	margin-top: 1.3em;
	margin-bottom: 1em;
}

div.buybuttons p {
	font-size: 0.8em;
	color: #aaa9a9;
	margin-top: 1.5em;
}

a.buybutton {
	background-color: #fdfdfd;
	border: 1px solid #aaa9a9;
	border-radius: 4px;
	display: inline-block;
	padding: 0.7em;
	font-size: 0.8em;
	text-decoration: none;
	color: black;
	margin: 0.5em 0.25em;
}

a.gold {
	background-color: #f8e6b8;
	background: -moz-linear-gradient(top, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f8e6b8), color-stop(6%, #f3d686), color-stop(100%, #ebb62c));
	background: -webkit-linear-gradient(top, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
	background: -o-linear-gradient(top, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
	background: -ms-linear-gradient(top, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
	background: linear-gradient(to bottom, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
	border: 1px solid #aaa9a9;
	color: #00000f;
}

a.buybutton:hover {
	text-decoration: none;
	border: 1px solid black;
	color: black;
}

span.price {
	color: #85bb65;
}

a.disabled, button.disabled {
	cursor: not-allowed;
	pointer-events: none;
	color: black;
	border: 1px solid black;
	background-color: #f6f6f6;
	text-transform: uppercase;
}

a.buybutton img {
	height: 15px;
	width: 15px;
	margin-right: 0.5em;
	vertical-align: -0.06em;
}

.kicker {
	font-family: 'Quicksand', Verdana, Arial;
	font-size: 2em;
	font-weight: normal;
	letter-spacing: 0.011em;
	line-height: 1.1em;
}

.quote {
	padding: 2em 1em;
	background: url('/images/quotea.png') top left no-repeat, url('/images/quoteb.png') bottom right no-repeat;
	text-align: left;
}

.signature {
	margin-top: 0em;
	text-align: center;
}

.metacontent {
	margin: 1em;
	padding-top: 1.2em;
	border-top: 1px dashed #c6ced7;
}

.metamain {
	margin: 1.6em;
	color: #4d5965;
}

.meta {
	margin-top: 0em;
	padding-bottom: 1.2em;
	border-bottom: 1px dashed #c6ced7;
	color: #4d5965;
}

.highlight {
	background-color: #ffffec !important;
}

.question, .bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

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

.align-left {
	text-align: left;
}

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

footer {
	display: block;
	padding: 0.4em 1.5em;
	padding-bottom: 1.8em;
	background-color: #ffffff;
	border-top: 1px solid #dee2e6;
	/* border-bottom: 1px solid #dee2e6; */
	font-size: 1.1em;
	line-height: 1.4em;
	text-align: right;
	color: #47443e;
	/* text-shadow: 0px -1px 1px #323b44; */
}

.footercontent, .headercontent {
	max-width: 1024px;
	margin: auto;
}

#footerlogo {
	float: left;
	margin: 0.9em;
}

#social {
	display: inline-block;
}

#social a {
	display: inline-block;
	padding: 0.5em;
}

#social a:hover, #social a:focus {
	opacity: 0.8;
}

.copyrightnote {
	margin-right: 0.5em;
}

#underlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.1;
	z-index: -1;
}

#skipnav {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: -10em;
	padding: 0.95em 0em;
	background-color: #5d6872;
	background: linear-gradient(#75808a 0%, #5d6872 80%);
	box-shadow: 0px 1px 2px #31363c;
	font-size: 1em;
	line-height: 1.4em;
	text-decoration: none;
	color: white;
	text-shadow: 0px -1px 1px #323b44;
	opacity: 0.9;
	outline: none;
	z-index: 2;
	transition: margin 0.2s;
}

#skipnav:focus {
	margin-top: 0em;
	transition: margin 0.2s;
}

#skipnav:hover {
	background-color: #7b858f;
	background: linear-gradient(#8f99a3 0%, #7b858f 80%);
}

#skipnav:active {
	margin-top: 0em;
	background-color: #4d5660;
	background: linear-gradient(#656f79 0%, #4d5660 80%);
}

#errorbubble {
	max-width: 19em;
	margin: 2em auto;
	padding: 1.4em;
	padding-top: 0.2em;
	border-radius: 4px;
}

/* Main landing (magazine) page elements styling: */

#magazine, section.magazine-like {
	display: block;
	position: relative;
	max-width: 1024px;
	margin: auto;
	margin-bottom: 0.1em;
	font-size: 2.9em;
	line-height: 1.5em;
}

#spread, div.spread-like {
	display: inline-block;
	position: relative;
	max-width: 1012px;
	width: 100%;
	height: 320px;
	background-color: #ffffff;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0px 1px 2px #31363c;
	border-radius: 4px;
}

#spreadlogo, .spreadlogo {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	max-width: 420px;
	width: 100%;
	height: 420px;
	background-position: top left;
	background-repeat: no-repeat;
}

#spread .promotext, div.spread-like .promotext {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 60%;
	max-height: 254px;
	padding: 33px 22px;
	background: linear-gradient(-90deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
	font-size: 0.431em;
	line-height: 1.29em;
	color: white;
	text-shadow: 0em 0em 0.4em black;
	overflow: auto;
}

.promotext {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 91.2%;
	max-height: 254px;
	padding: 33px 22px;
	background-color: rgba(0,0,0,0.7);
	font-size: 0.431em;
	line-height: 1.29em;
	color: white;
	text-shadow: 0em 0em 0.4em black;
	overflow: auto;
}

.fullwidth {
	width: 92%;
	max-height: 298px;
	padding: 11px 4%;
}

.promo, .promo-like {
	display: inline-block;
	position: relative;
	max-width: 500px;
	width: 100%;
	height: 320px;
	background-color: #ffffff;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0px 1px 2px #31363c;
	border-radius: 4px;
	margin: 1px;
}

#magazine a, section.magazine-like a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	text-decoration: none;
}

#magazine a:focus, section.magazine-like a:focus {
	/* outline: 0.1em solid #586068; */
}

div.spread-like, .promo-like {
	background-position: center center;
}

/* Projects landing page elements styling: */

#projects, section.projects-like {
	display: block;
	position: relative;
	max-width: 1024px;
	margin: auto;
	font-size: 2.9em;
	line-height: 1.5em;
}

#projects div, section.projects-like div {
	display: inline-block;
	position: relative;
	max-width: 500px;
	width: 100%;
	background-color: #495460;
	background-position: top left;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0px 1px 2px #31363c;
	border-radius: 4px;
}

#projects a, section.projects-like a {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 30%;
	border-radius: 4px;
	text-decoration: none;
}

#projects a:focus, section.projects-like a:focus {
	outline: 0.1em solid #586068;
}

#projects span, section.projects-like span {
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0.4em 0em;
	background-color: black;
	border-radius: 0px 0px 4px 4px;
	font-size: 0.4em;
	line-height: 1.2em;
	color: white;
	opacity: 0.6;
	transition: opacity 0.5s;
}

/* Project page elements styling: */

#products {
	display: inline-block;
	min-width: 100px;
	min-height: 100px;
	margin: auto;
	margin-bottom: 1em;
	background-color: #37404a;
	border: 1px solid #37404a;
	border-top: 1px solid #363f49;
	border-bottom: 1px solid #3a424d;
	border-radius: 13px;
	cursor: pointer;
}

#products a {
	display: inline-block;
	min-height: inherit;
	border-radius: 13px;
	text-decoration: none;
}

#productinfo {
	display: inline-block;
	margin: auto;
	margin-bottom: 1em;
	background-color: #37404a;
	box-shadow: inset 0em 0em 1.25em 0.1em #171c20;
	border: 1px solid #37404a;
	border-top: 1px solid #363f49;
	border-bottom: 1px solid #3a424d;
	border-radius: 13px;
	line-height: 1.4em;
	overflow: hidden;
	-webkit-transition: max-height 0.3s;
	-moz-transition: max-height 0.3s;
	-o-transition: max-height 0.3s;
	transition: max-height 0.3s;
}

#productinfo .info {
	display: inline-block;
	max-width: 19em;
	width: 89%;
	margin: 0em 0.5em 0.5em 0.5em;
	vertical-align: top;
}

#productinfo .title {
	font-weight: bold;
	color: white;
}

#productinfo .desc {
	margin-left: 0.4em;
	margin-right: 0.4em;
	color: white;
}

#productinfo .link {
	display: block;
	margin: 0.5em;
	padding: 0.6em 0em;
	background-color: #89929a;
	border-radius: 13px;
	font-weight: bold;
	color: #181f24;
	text-shadow: 0px 1px 0px #98a1aa;
}

#productinfo .link:hover, #productinfo .link:focus {
	background-color: #a2aab0;
}

/* Articles page elements styling: */

#index, aside.index {
	position: relative;
	max-width: 62em;
	margin: auto;
	/* margin-top: 0.5em; */
	margin-bottom: 1.2em;
	padding: 1em;
	background: white;
	background: rgba(255,255,255,0.7);
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);
	border-radius: 30px 4px 30px 4px;
	line-height: 2em;
	text-align: center;
	color: #292929;
	text-shadow: 0px -1px 0px rgba(255,255,255,0.3);
	overflow: hidden;
	-webkit-transition: max-height 0.8s;
	-moz-transition: max-height 0.8s;
	-o-transition: max-height 0.8s;
	transition: max-height 0.8s;
}

#index a, aside.index a {
	margin: 0em 0.4em;
	border-bottom: 1px dotted #8594a4;
	text-decoration: none;
	color: #3d4a56;
	white-space: nowrap;
}

#indexbutton {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1em;
	padding: 0.2em 0em;
	background-color: #5d6872;
	background: linear-gradient(#75808a 0%, #5d6872 80%);
	border-top: 1px solid #a1aab1;
	border-radius: 0px 0px 30px 4px;
	font-size: 2em;
	line-height: 1em;
	color: white;
	text-shadow: 0px -1px 1px #323b44;
	opacity: 0.8;
	cursor: pointer;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

#gototop {
	display: none;
	position: fixed;
	top: 1em;
	right: 1em;
	width: 2em;
	height: 2em;
	background-color: white;
	border-radius: 4em;
	font-size: 2em;
	line-height: 2em;
	opacity: 0.7;
	color: #3a3a3a;
	cursor: pointer;
	transition: opacity 0.5s;
	user-select: none;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
}

div.articlenav {
	display: inline-block;
	width: 48%;
	margin: 0;
	font-size: 1.5em;
	text-align: right;
}

div.articlenav a {
	text-decoration: none;
	opacity: 0.4;
}

.postdate {
	display: block;
	margin-top: -0.2em;
	margin-bottom: 0.3em;
	color: #4d5965;
}

/*
article.pageheading {
	background-color: rgba(255,255,255,0.7);
	box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
}

article.pageheading h1 {
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	text-shadow: 0px -1px 0px rgba(255,255,255,0.3);
}
*/

/* Styling for supplemental page elements: */

div.socialinvite {
	display: table;
	width: inherit;
	margin: 1em 0em;
	background-color: rgba(255,255,255,0.7);
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);
	border-radius: 4px;
}

div.socialinvite a {
	display: block;
	width: 100%;
	text-decoration: none;
}

span.facebooklogo, span.twitterlogo, span.instagramlogo, span.youtubelogo {
	display: table-cell;
	width: 7em;
	height: 5em;
	background-color: rgba(215,215,215,0.3);
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 4px 0px 0px 4px;
}

span.facebooklogo {
	background-image: url('/images/social/facebook.png');
}

span.twitterlogo {
	background-image: url('/images/social/twitter.png');
}

span.instagramlogo {
	background-image: url('/images/social/instagram.png');
}

span.youtubelogo {
	background-image: url('/images/social/youtube.png');
}

span.invitetext {
	display: table-cell;
	width: auto;
	height: 5em;
	padding: 1em;
	border-left: 2px dashed rgba(200,200,200,0.3);
}

/*
#scrollup {
	display: block;
	position: fixed;
	bottom: 1.7em;
	right: 1em;
	width: 50px;
	height: 50px;
	background: #687889;
	background: rgba(105,121,138,0.4);
	background-image: url('/images/up.png');
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 8px;
	cursor: pointer;
}
*/

/* Store element styling: */

div.store {
	margin-top: 1.3rem;
	padding: 0 0.99rem;
}

div.product {
	display: inline-block;
	margin: 0.5rem 0.6rem;
	max-width: 220px;
}

div.pcover {
	position: relative;
	display: block;
}

div.pcover img {
	width: 220px;
	height: auto;
	max-height: 300px;
	margin: 0;
	border-radius: 4px;
	box-shadow: 0px 5px 9px rgba(0, 0, 0, 0.3);
	vertical-align: middle;
	opacity: 1;
	transition: opacity 0.2s ease-in;
}

div.pcover img:hover {
	opacity: 0.8;
}

p.price {
	color: #85bb65;
	margin-top: -0.5em;
	font-size: 0.85em;
}

.badge-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 100;
}

.badge.corner {
	position: absolute;
	top: 0;
	left: 0;
	-ms-transform: translateX(-30%) translateY(0%) rotate(-45deg);
	-webkit-transform: translateX(-30%) translateY(0%) rotate(-45deg);
	transform: translateX(-30%) translateY(0%) rotate(-45deg);
	-ms-transform-origin: top right;
	-webkit-transform-origin: top right;
	transform-origin: top right;
}

.badge.middle {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	-ms-transform: translateX(0%) translateY(-50%) rotate(0deg);
	-webkit-transform: translateX(0%) translateY(-50%) rotate(0deg);
	transform: translateX(0%) translateY(-50%) rotate(0deg);
}

.badge {
	margin: 0;
	padding: 10px 0;
	color: white;
	font-size: 0.94rem;
	text-align: center;
	line-height: normal;
	text-transform: uppercase;
	background: #9e8c6e;
}

.badge::before, .badge::after {
	content: '';
	position: absolute;
	top: 0;
	margin: 0 -1px;
	width: 100%;
	height: 100%;
	background: inherit;
	min-width: 55px;
}

.badge::before {
	right: 100%;
}

.badge::after {
	left: 100%;
}

.badge.red {
	background: #ed1b24;
}

/* Gallery styling: */

ul.slides {
	text-align: center;
}

ul.slides li {
	display: inline;
}

ul.slides a {
	text-decoration: none;
}

ul.slides img {
	width: 300px; /* 220px for 4 in a row */
	margin: 0.5rem 0;
}

.image-popup {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

/*
div.mfp-figure figcaption {
	display: none;
}
*/

/* Email subscription box/form element styling: */

#subscribebox article {
	background-color: #9e8c6e;
	color: #ffffff;
	padding: 0;
	padding-top: 1px;
	padding-bottom: 0.8em;
}

#subscribebox p {
	text-align: left;
	margin: 1em 3.4em;
	margin-bottom: 0.5em;
}

#subscribebox div.column {
	max-width: 28%;
	line-height: 0.8em;
	text-align: center;
}

#subscribebox input {
	margin-left: 2.2em;
	position: static;
}

#subscribebox button, #subscribebox a.button {
	margin: 0.5em;
	background-color: #8c7e66;
	background: linear-gradient(#ab946a 0%, #8c7c61 80%);
	border-top: 1px solid #d9c196;
	border-bottom: 1px solid #534938;
	outline: none;
}

#subscribebox button.actionbutton {
	background: linear-gradient(#947d53 0%, #6f5830 80%);
	border-top: 1px solid #ceb78d;
	border-bottom: 1px solid #3c2b13;
}

.mce_inline_error {
	position: absolute;
	top: 2.8em;
	left: 5em;
	width: 11.8em;
	border-radius: 0px 0px 4px 4px;
	font-family: 'Lato Light', 'Open Sans', Verdana, Arial;
	font-size: 0.8em;
	font-weight: normal !important;
	line-height: 1.2em;
	color: #ffffff;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}

#subscribebox div.response {
	padding: 0.5em;
}

/* Conditional (site-scaling) style adjustments: */

@media (min-width: 1245px) {
	#gototop {
		display: block !important;
		opacity: 0.7 !important;
	}
}

@media (max-width: 1023px) {
	article .column, div .column, div.review {
		max-width: 70%;
	}
	.closegap {
		margin-top: 0;
	}
	div.articlenav {
		width: 96%;
		display: none;
	}
	div.twocolnav {
		display: none;
	}
	article .heading {
		max-width: 89%;
		margin: 0;
	}
	div.review {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 1013px) {
	#language-btn {
		display: block !important;
		position: absolute;
		top: 1.32em;
		right: 7em;
		z-index: 9;
		margin-left: 0;
	}
	.flag-icon {
		width: 26px;
		height: 19px;
	}
	#sitelogo {
		margin-left: 0;
		margin-top: 0.49em;
	}
	#menubutton {
		display: inline-block;
		width: 42px;
		height: 32px;
		padding: 0.2em;
		background: url('/images/menubutton.svg') center center no-repeat;
		background-size: 55%;
		border: 1px solid rgba(0,0,0,0.1);
		border-radius: 4px;
		margin-top: 0.32em;
	}
	nav {
		margin-top: 0.4em;
		margin-bottom: 0.1em;
		margin-right: 0;
	}
	nav a {
		display: none;
		margin: 1.3em 0;
	}
	.promo, .promo-like {
		margin: 0;
	}
	#subscribebox div.column {
		max-width: 100% !important;
		width: 100%;
		display: block;
		margin: 0;
	}
	#subscribebox input {
		margin-left: auto !important;
	}
	#subscribebox p {
		margin-bottom: 1em !important;
		margin: 1em 1.4em;
	}
	#subscribebox button, #subscribebox a.button {
		margin-top: 1em !important;
	}
	.mce_inline_error {
		top: 2.3em;
		left: 50%;
		margin-left: -6.5em !important;
	}
	#gototop {
		top: 2em;
		right: 0.77em;
	}
}

@media (max-width: 780px) {
	article .column, div .column {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.promotext {
		width: 92%;
		max-height: 298px;
		padding: 1em 4%;
		padding-bottom: 1em;
	}
	#spread .promotext, div.spread-like .promotext {
		width: 92%;
		max-height: 298px;
		padding: 1em 4%;
		background-color: rgba(0,0,0,0.7);
	}
	div.articlenav {
		width: 86%;
	}
	h1, h2, h3, h4, h5, h6 {
		font-size: 1.2em;
	}
	p.expanded-title {
		font-size: 1.06em;
	}
	ul.slides img {
		width: 100%;
	}
}

@media (max-width: 500px) {
	div.product {
		max-width: none;
	}
	div.pcover img {
		width: 100%;
		max-height: none;
	}
}

@media (max-width: 400px) {
	#spreadlogo, .spreadlogo {
		display: none;
	}
	article.note, article.overnote {
		max-width: 62.25em;
		padding-right: 0.5em;
		background-image: none;
	}
	article .col-80, article .col-20, article .col-70, article .col-30, article .col-60, article .col-40, article .col-50, article .col-100 {
		margin-left: 0;
		margin-right: 0;
	}
}