*, *:before, *:after {
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	line-height: 1.5em;
	height: 100vh;
}

iframe {display: block; border: none;}

html, button, input, select, textarea { font-family: Helvetica, Arial, sans-serif; color: #333;  }

/* Links */
a,
a:visited { color: #000; }
body:not(.nohover, .edit) a:hover { color: #000; }
body #container #articleBrowser .area-section > a,
body #container #articleBrowser .area-section > .h5scroll-wrap > a,
body #container #articleBrowser .area-section > .editable > a {
    text-decoration: none;
}

body > .passepartout {
	position: absolute;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

body.ipad > .passepartout {
	position: fixed;
}

body.small-portrait {
	bottom: env(safe-area-inset-bottom);
}

/***   Magazine default   ***/

/* p, ul, ol { margin-bottom: 18px; } */
ul, ol { padding-left: 1em; }
.example-for-stylist ul, .example-for-stylist ol { padding-left: 0; }

/* Header styles */
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 2rem; line-height: 1.1em; }
h2 { font-size: 1.6rem; line-height: 1.2em; } /* 28/21 */
h3 { font-size: 1.4rem; line-height: 1.2em; }
h4, h5, h6 { font-size: 1rem; line-height: 1.3846em; font-weight: bold; }

/* Definition lists */
dt { font-weight: bold; }
dd { margin-bottom: 10px; }

/***   Helper   ***/
.fullwidthheight {
	width:100%;
	height:100%;
}

/* Convenience classes */
.clear {
	clear: both;
}

/* Active/inactive display */
.hidden,
.meta,
.nestedtocitem,
.nestedtocitem.active,
.pageDetails,
time.latest-update,
time.published {
	display: none;
}

.active,
.visible {
	display: block;
}

figure {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}

figure.vrimage {
	height: 300px;
}

.IE8 figure a,
.IE9 figure a {
	display: inline-block;
}

figure.image img {
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* In some projects, in print, figure whitespace has a height? Let's disable this dirty for now */
body.print article section figure {
	font-size: 0;
}

body.print article section, body.print article img {
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
}:root {
	--studio-sprite: url(/static/img/shared/studio/studio-sprite24.svg);
}/***   Magazine default   ***/
html {
	--navigation-height: 45px;
}

@viewport {
  width: extend-to-zoom 500px;
  height: extend-to-zoom 600px;
}

html {
	min-height: 100%;
	/* Filter out pan-x scrolling to prevent IEMobile from swiping to the previous (or next) page in history */
	touch-action: pan-y pinch-zoom double-tap-zoom;
	background-color: rgb(216,216,216);
}

html * {
	touch-action: pan-y pinch-zoom double-tap-zoom;
}

/*keep mobile in its place, make sure you can scroll the main container 'away'*/
html.mobile {
/*	height: 100%;
	width: 100%; */
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

}

.area-section, #articleIndex, #articleSearchIndex { /* BEWARE: This selector is currently being used to test if the CSS has been loaded! Make sure it keeps matching! */
	-webkit-overflow-scrolling: touch;
}

.has-href {
	cursor: pointer;
}

/* We need this to prevent -webkit-overflow-scrolling: touch; from not rendering offscreen elements */
body.iphone .area-root > *,
body.iphone #articleIndex > *,
body.iphone #articleSearchIndex > * {
    -webkit-transform: translate3d(0, 0, 0);
}

body {
	background-color: rgb(216,216,216);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	overflow-x: hidden;
	overflow-y: hidden;
}

iframe { width: 100%; max-width: 100%; }
figure iframe { max-height: 100%; }
a.protolink {
	text-decoration: none;
}

.navArticles *:focus {
	outline: none;
}

body.active-keyboard-navigation *:focus {
	outline: Highlight auto 1px;
	outline: -webkit-focus-ring-color auto 1px;
}

body.active-keyboard-navigation figure:focus-within {
	outline: Highlight auto 1px;
	outline: -webkit-focus-ring-color auto 1px;
}

	#container {
		z-index:0;
		position: absolute;
		overflow: hidden;
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	body.hide_scrollbars_while_loading #container {
		opacity: 0;
	}

	.mobile #container {
		max-height: 100%;
	}

	#container.bigzoom {
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		-ms-font-smoothing: antialiased;
		font-smoothing: antialiased;
	}

	#articleBrowser {
		position: absolute;
		top: 0;
		bottom: var(--navigation-height);
		width: 100%;
		overflow: hidden;
	}

	.top-navigation #articleBrowser {
		top: var(--navigation-height);
		bottom: 0;
	}

	#articles {
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		overflow: hidden;
		-webkit-transition-property: -webkit-transform;
		-webkit-transition-duration: 0.5s;
		-webkit-transition-timing-function: ease-out;
		/* apply a transform to kick in the hardware acceleration.  Without this, the first time we add the transform you get odd rendering of the divs (half missing) */
		/* Chrome and Safri have a 1px offset in certain situations, fix by ussing an opposite offset */
		-webkit-transform: translate3d('1px',0,0);
	}

		article {
			/* apply a transform to kick in the hardware acceleration.  Without this, the first time we add the transform you get odd rendering of the divs (half missing) */
			/* Chrome and Safri have a 1px offset in certain situations, fix by ussing an opposite offset */
			-webkit-transform: translate3d('1px',0,0);
			position: absolute;
			height: 100%;
			background: #fff;
			overflow: hidden;
			/* this keeps translated elements sharp (vertical center using translateY) */
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}

			article > .wrapper {
				width: 100%;
			}

			article .area {
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
			}

			/* FS#1283 - Force .append-here to be 100% high on iphone devices, for some reason it does not render correcly
			   otherwise when using bottom positioning on mobile */
			body.mobile.iphone .append-here {
				height: 100%;
			}

			article .area > .append-here,
			article .area > .protolink,
			article .area > .protolink > .append-here,
			article .area > .h5scroll-wrap > .append-here,
			article .area > .h5scroll-wrap > .protolink,
			article .area > .h5scroll-wrap > .protolink > .append-here {
				display: flow-root;
				height: 100%;
			}
			body.no-flow-root article .area > .append-here,
			body.no-flow-root article .area > .protolink,
			body.no-flow-root article .area > .protolink > .append-here,
			body.no-flow-root article .area > .h5scroll-wrap > .append-here,
			body.no-flow-root article .area > .h5scroll-wrap > .protolink,
			body.no-flow-root article .area > .h5scroll-wrap > .protolink > .append-here {
				display: block;
				height: 100%;
				margin-top: -1px; /* Needed to collapse top margins/paddings */
				padding-top: 1px; /* Needed to collapse top margins/paddings */
			}

			/* We can't use the trick in IE8/9, because we get a scrollbar extravaganza */
			body.IE .area > .protolink,
			body.IE .area > .protolink > .append-here {
				margin-top: 0;
				padding-top: 0;
			}

	.area-root img {
		max-width: 100%;
		height: auto;
		width: auto;
		display:inline-block;
	}

	.area.aftereffect img {
		width: 100%;
		height: 100%;
	}

	.area.aftereffect .append-here,
	.area.aftereffect .append-here .h5-ae-animation-container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.area.aftereffect > img {
		display: none;
	}

	.link {cursor: pointer;}

/***   Inset block   ***/

 .inset,
 .textbox.inset {
 	width: 240px;
	padding: 15px;
	background-color: #ddd;
}
	.inset h2,
	.inset h3,
	.inset h4,
	.inset h5,
	.inset h6 {
		margin: 0 0 10px 0;
	}

/***   Helper   ***/

	/* Active/inactive display */

	.chapter,
	.article-mobile-title {
		display: none;
	}

	/* Positioning */

	.topleft { left: 0; top: 0; }
	.topcenter { top: 0; }
	.topright { right: 0; top: 0; }
	.middleleft { left: 0; }
	.middlecenter { }
	.middleright { right: 0; }
	.bottomleft { left: 0; bottom: 0; }
	.bottomcenter { bottom: 0; }
	.bottomright { right: 0; bottom: 0; }

	/* Area positioning */
	.area-root { height: 100%; position: relative; overflow-y: auto; overflow-x: hidden; }

	/* Floating styles */

	.floatLeft { float: left; margin: 0 20px 20px 0; }
	.floatRight { float: right; margin: 0 0 20px 20px; }
	.clear { clear:both; }
	.clearLeft { clear: left; }
	.clearRight { clear: right; }

	/* Frame */
body {
	 background-color: rgb(216,216,216);
}

#galleryContainer {
	position: absolute;
	top: 0;
	z-index: 100;
	width: 85%;
	height: 85%;
	max-width: 1152px;
	max-height: 744px;
	opacity: 0;
	overflow: hidden;
}

#articles {
	overflow:hidden;
}

article {
	display: block;
	position: relative;
}

/* this is ESSENTIAL for tablets to get the iscroll content scrolling properly */

.body {
	overflow: auto;
}

.cover .body {
	position:absolute;
}

.cover .body.top {
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
}

body.small-portrait div#container {
	height: 100%;
}

body.small-landscape-pseudo div#container {
	width:100%;
}

/* for small portrait */

body.small-portrait {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	text-align: left;
	display: block;
	text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: none;
	font-size: 1em;
}

.article-mobile-title {
		background-color: #fff;
		border-bottom: 1px solid #ddd;
		padding: 4px 4%;
		min-height: 40px;
		overflow: hidden;
}

	.article-mobile-title .toc {
		text-indent: -9999em;
		display: block;
		-webkit-mask-box-image: url(/static/img/mobile/icon-toc.png);
		mask-box-image: url(/static/img/mobile/icon-toc.png);
		background-color: rgba(0,0,0,0.6);
		width: 21px;
		height: 21px;
		margin-top: 4px;
		margin-left: 10px;
		background-size: 100%;
		float: right;
	}

	.article-mobile-title .toc.disabled {
		background-color: #e5e3e1;
	}

	.article-mobile-title .title {
		text-decoration: none;
	}

	.article-mobile-title .title .editionTitle {
		display: inline-block;
		line-height: 32px;
	}

	.article-mobile-title .icon {
		height: 32px;
		width: auto;
		margin: 4px 10px 4px 0;
		vertical-align: top;
	}

.ie_basic_image_width_test {
	width: 6px;
}

.block_scroll {
	overflow: hidden !important;
	overflow-x: hidden !important;
	overflow-y: hidden !important;
}

body #container #articleBrowser .area.textbox > section > p:last-child,
body #container #articleBrowser .area.textbox > a > section > p:last-child {
	margin-bottom: 0;
}

.spinner-node.overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: black;
	background-color: rgba(0,0,0,0.3);
}/* Instagram Area */
article .area.instagram iframe {
    width: 100%;
    height: 100%;
}

body.print  article  .area.instagram {
	display: none;
}

/* Iframe */
article .area.iframe {
	height: 300px;
	height: 300px;
}

article .area.iframe .blockwrapper > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 100%;
	background-color: white;
	outline: 3px #c9c9c9 dashed;
	outline-offset: -15px;
	padding: 30px;
	text-decoration: none;
}

article .area.iframe .blockwrapper > a p.link {
	text-decoration: underline;
	margin: 0;
}

article .area.iframe .blockwrapper > a span.warning {
	display: inline-block;
	color: #c9c9c9;
	text-decoration: none !important;
	font-size: 12px;
	margin-top: 10px;
	background-color: white;
}

body.print article .area.iframe {
	display: none;
}

/* Facebook */
body.print article .area.facebook {
	display: none;
}

/* Soundcloudwidget */
body.print article .area.soundcloudwidget {
	display: none;
}

/* Twitterwidget */
body.print article .area.twitterwidget {
	display: none;
}/***   Table Of Contents (TOC)   ***/

html {
	--toc-font: "Helvetica","Arial",sans-serif;
	--toc-font-weight: normal;
	--toc-font-size: 16px;

	--toc-font-color: #000;
	--toc-hover-font-color: #000;
	--toc-active-font-color: #fff;

	--toc-background-color: #eee;
	--toc-hover-background-color: #ccc;
	--toc-active-background-color: #333;

	--toc-line-color: #ccc;
}

.articleIndex,
.articleSearchIndex {
	display: none;
}

.articleListing {
	display: block;
	position: absolute;
	top: -1000px;
	max-height: 800px;
	overflow: scroll;
}

#articleIndex,
#articleSearchIndex {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
	overflow-y: auto;
	overflow-x: hidden;
	display: none;
	width: 300px;
	background-color: var(--toc-background-color);
}

#articleSearchIndex {
	z-index: 25;
}

	#articleIndex li:not(.hidden),
	#articleSearchIndex li:not(.hidden) {
		display: block;
		height: 70px;
		list-style-type: none;
		font-weight: var(--toc-font-weight);
		font-size: var(--toc-font-size);
	}

	/*override potential default text overrides*/
	#container #articleIndex ul li,
	#container #articleSearchIndex ul li {
		font-family: var(--toc-font);
	}

	#articleIndex li.nesting-level-2,
	#articleSearchIndex li.nesting-level-2 {
		display:none;
	}

		#articleIndex li a,
		#articleSearchIndex li a {
			display: block;
			height: 100%;
			color: var(--toc-font-color);
			/* default link color, overide as desired! */
			border-bottom: solid 1px var(--toc-line-color);
		}

		body:not(.nohover) #articleIndex li:not(.active) a:hover,
		body:not(.nohover) #articleSearchIndex li:not(.active) a:hover {
			background-color: var(--toc-hover-background-color);
			color:  var(--toc-hover-font-color);
		}

		#articleIndex li.active a,
		#articleSearchIndex li.active a {
			background-color: var(--toc-active-background-color);
			color: var(--toc-active-font-color);
			cursor: default;
		}

			#articleIndex li a .imagecontainer,
			#articleSearchIndex li a .imagecontainer {
				display: inline-block;
				width: 30%;
				height: 100%;
				overflow: hidden;
				vertical-align: middle;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			#articleIndex li a .text,
			#articleSearchIndex li a .text {
				display: inline-block;
				width: 70%;
				padding: 0 15px;
				vertical-align: middle;
				overflow:hidden;
				max-height:100%;
				text-overflow:ellipsis;
			}

/***   Overlay shown on top of article when TOC is opened   ***/

#articleOverlay {
	position: absolute;
	bottom: 45px;
	top: 0;
	left: 0;
	right: 0;
	display: none;
	opacity: 0;
	z-index: 5;
	background-color: #000;
}

.top-navigation #articleOverlay {
	top: 45px;
	bottom: 0;
}

.overlay-navigation #articleOverlay,
.hidden-navigation #articleOverlay {
	top: 0;
	bottom: 0;
}
/***   Video embed   ***/
body:not(.edge) video {
	transform: translateZ(0);
}

.videoEmbed {
	position: absolute;
	top: 20%;
	width: 70%;
	z-index: 100;
	margin-left: 50%;
	display: none;
}
	.videoEmbed iframe,
	.videoFrame .outer,
	.videoFrame > video  {
		display: none;
	}

/***   Video embed posterframe   ***/
.videoEmbedPosterframe	{
	margin-bottom: 0;
	padding: 20px;
	background: #f5f5f5;
	height: auto;
	cursor: pointer;
}
	.videoEmbedPosterframe.uploaded {
		cursor: default;
		z-index: 0;
	}
	.videoEmbedPosterframe img {
		margin: 0;
		display: block;
	}
	.videoEmbedPosterframe .posterframe {
		display: grid;
		grid-template-areas: "video";
		width: 110px;
        height: auto;
		position: relative;
		overflow: hidden;
		float: left;
		margin-right: 10px;
		text-align:center;
	}

	.videoEmbedPosterframe .posterframe > * {
		grid-area: video;
	}

		.videoEmbedPosterframe .buttonPlay { /* Keep for backwards compatibility */
			position: absolute;
			left: 0;
			top: 35%;
		}
		.videoEmbedPosterFrame .buttonContainer {
			position: absolute;
			height: 30%;
			width: 100%;
			top: 35%;
			text-align: center;
		}
		.videoEmbedPosterFrame .buttonContainer button {
			background: none;
			border: none;
			height: 100%;
		}
		.videoEmbedPosterFrame .buttonContainer img.buttonPlay {
			max-height: 100%;
			height: 100%;
			width: auto;
			display: inline;
			position: static;
		}

		.videoEmbedPosterframe .posterframe > .video-js {
			position: absolute;
			padding-top: initial;
		}

        .videoEmbedPosterframe .mp4video {
            width: 100%;
            height: auto;
            display: none;
        }

/***   Stretch posterframe   ***/
.stretchPosterframe {
	padding: 0;
	background: transparent;
}
	.stretchPosterframe .posterframe {
		float: none;
		margin-right: 0;
        width: 100%;
        height: 100%;
	}

	.stretchPosterframe .posterframe.disabled::after {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: '';
		background-color: rgba(212,212,212,0.7);
		cursor: default;
	}
	.stretchPosterframe .buttonPlay { /* Keep for backwards compatibility */
		width: 100%;
	}
	.stretchPosterframe .posterframe.disabled .buttonContainer {
		display: none;
	}
	.stretchPosterframe .buttonContainer {
		position: absolute;
		height: 30%;
		width: 100%;
		top: 35%;
		text-align: center;
	}
	.stretchPosterframe .buttonContainer button {
		background: none;
		border: none;
		height: 100%;
		aspect-ratio: 1/1;
	}
	.stretchPosterframe .buttonContainer img.buttonPlay {
		max-height: 100%;
		height: 100%;
		width: 100%;
		display: inline;
		position: static;
		background-image: url('/static/img/shared/video-playbutton.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	.stretchPosterframe .posterFrame {
		width: 100%;
		height: auto;
	}

	.videoEmbedPosterframe .posterframe img {
		width: 100%;
	}

	.h5-vertical-video {
		/* aspect-ratio: 0.5625; - Not needed, we use the correctly scaled posterframe */
	}

	.h5-vertical-video .scaler {
		height: 100%;
	}

	.h5-vertical-video .scaler .posterFrame {
		height: 100%;
		object-fit: cover;
	}

	body.medium-landscape .videoEmbedPosterframe.uploaded.autoplay .posterframe img,
	body.medium-portrait .videoEmbedPosterframe.uploaded.mp-autoplay .posterframe img,
	body.small-portrait .videoEmbedPosterframe.uploaded.sp-autoplay .posterframe img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	body.medium-landscape.take-screenshot .videoEmbedPosterframe.uploaded.autoplay .posterframe img,
	body.medium-portrait.take-screenshot .videoEmbedPosterframe.uploaded.mp-autoplay .posterframe img,
	body.small-portrait.take-screenshot .videoEmbedPosterframe.uploaded.sp-autoplay .posterframe img {
		z-index: 0;
	}

.videoEmbedPosterframe .posterframe table td img {
	width: auto;
}

.h5-plays-in-view.no-spinner .spinner-node.overlay{
	display: none;
}.area.audio {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: lightgray;
	overflow: hidden;
}

.area.audio .editable,
.area.audio .append-here,
.area.audio .editable .append-here {
	width: 100%;
}

.area.audio audio {
	width: 100%;
	height: 100%;
	background-color: blue;
}

.area.audio .audio-button {
	width: 100%;
	height: 100%;
	padding: 0;
	position: relative;
	cursor: pointer;
	-webkit-appearance: none;
	background: transparent;
	border: none;
}

.area.audio.unavailable .audio-button {
	cursor: not-allowed;
	opacity: 0.3;
}

.area.audio .audio-button .play-triangle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.area.audio .audio-button .audio-button-color {
	fill: black;
}

.area.audio .audio-button .play-triangle-polygon {
	display: initial;
}

.area.audio .audio-button .pause-rectangle {
	display: none;
}

.area.audio .audio-button.playing .play-triangle-polygon {
	display: none;
}

.area.audio .audio-button.playing .pause-rectangle {
	display: initial;
}[data-awake="Chart"] {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
}

[data-awake="Chart"] canvas {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}body > #console_overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 400px;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.8);
	pointer-events: all;
	z-index: 999999;
}
body > #console_overlay > .console_output {
	display: block;
	height: 370px;
	padding: 5px 5px;
	overflow: auto;
	color: white;
}
body > #console_overlay > .console_output .console_counter {
	float: right;
	color: blue;
	border-radius: 50%;
	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255,0.8);
	width: 20px;
	height: 20px;
	text-align: center;
}
body:not(.nohover) > #console_overlay > .console_output p:hover {
	background-color: rgb(100,100,100);
}
body > #console_overlay > .close {
	position: absolute;
	top: -22px;
	right: 5px;
	width: 45px;
	height: 45px;
	cursor: pointer;
	background-image: url(/static/img/full/btn_close.png);
}
body > #console_overlay > .console_switch {
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 30px;
	background-color: green;
	vertical-align: top;
}

body > #console_overlay > .console_emulator {
	background-color: rgb(255,255,255);
	display: inline-block;
	left: 50px;
	position: relative;
	bottom: 0;
	min-width: 50%;
	width: calc(100% - 50px);
	height: 30px;
	vertical-align: top;
}
/* Inactive state */
body > #console_overlay.inactive {
	background-color: transparent;
	background-color: rgba(0,0,0,0.1);
	pointer-events: none;
}
body > #console_overlay.inactive > .close,
body > #console_overlay.inactive > .console_output,
body > #console_overlay.inactive > .console_emulator {
	opacity: 0.3;
}
body > #console_overlay.inactive > .console_switch {
	pointer-events: all;
	background-color: red;
}
/* IE8 styles */
body.IE8 > #console_overlay {
	background-color: rgb(0,0,0);
}
body.IE8 > #console_overlay.inactive {
	z-index: 0;
	background-color: rgb(196,196,196);
}/* master articles balloon */

.modal-dialog-overlay {
	position: fixed;
	background-color: rgba(0,0,0,0.25);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 16900; /* needed to go over popups which have a z-index of 6000 */
}

.modal-dialog-container {
	position: absolute;
	top: 0;
	left: 0;

	right: 0;
	bottom: 0;
	z-index: 17000; /* needed to go over popups which have a z-index of 6000 */
	overflow: auto;
}

.modal-dialog {
	font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
	position: absolute;
	min-width:300px;
	min-height:80px;
	margin-bottom: 20px;
	border-radius: 5px;
	background-color: #f3f3f3;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
	font-size: 13px;
}

.balloon .top,
.modal-dialog .top {
	background-color: #f2f2f2;
	text-align: center;
	height: 36px;
	cursor: default;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-image: linear-gradient(#F3F3F3, #C8C8C8);
}
.modal-dialog.empty-title .top {
	height: 10px;
}

.balloon .top .title,
.modal-dialog .top .title {
	font-size: 16px;
	font-weight: normal;
	line-height: 36px;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	color: #545454;
	text-align: center;
}
.modal-dialog .close {
	position: absolute;
	top: 0;
	right: 0;
	width: 38px;
	height: 38px;
	background-image: url('/static/img/shared/close_x2.png');
	background-repeat: no-repeat;
	background-size: 14px 14px;
	background-position: center center;
	border: none;
	background-color: transparent;
	border-radius: 10px;
	cursor: pointer;
	z-index: 8;
	opacity: 0.5;
}
	body:not(.nohover) .modal-dialog .close:hover {
		opacity: 0.8;
	}

	.modal-dialog.hide-close .close {
		display: none;
	}

.modal-dialog.left-content .middle {
	text-align: left;
}

.modal-dialog.center-content .middle {
	text-align: center;
}

.modal-dialog.right-content .middle {
	text-align: right;
}

.modal-dialog .middle {
	padding: 15px;
}

.modal-dialog .bottom {
	height: 36px;
	padding: 15px;
	padding-top: 0;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
	.modal-dialog .bottom:after {
		content: '';
		display: block;
		clear: both;
	}

.modal-dialog button {
	display: inline-block;
	width: auto;
	color: #545454;
	text-align: left;
	font-size: 12px;
	line-height: 22px;
	height: 22px;
	vertical-align: top;
	background-image: linear-gradient(#f3f3f3, #c8c8c8);
	padding: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	border-radius: 3px;
	border: 1px solid #ACACAC;
	text-align: center;
}
	body:not(.nohover) .modal-dialog button:hover {
		background: linear-gradient(#e7e7e7, #f3f3f3);
	}

	.modal-dialog button:active {
		background: #c8c8c8;
	}

.modal-dialog.alert .bottom button,
.modal-dialog.confirm .bottom button,
.modal-dialog.prompt .bottom button {
	float: right;
	margin-left: 10px;
	min-width: 40px;
}

.modal-dialog input[type="text"] {
	font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
	color: #545454;
	border: solid 1px #acacac;
	box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
	font-size: 12px;
	padding: 7px;
	padding-top: 2px;
	padding-bottom: 2px;
	height: 22px;
	-moz-transition: all 0.15s ease-in-out;
	-webkit-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

	.modal-dialog input[type="text"]:focus {
		box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0 0 5px rgba(58, 86, 127, 0.35);
	}

.modal-dialog.prompt input {
	display: block;
	margin: 5px 0;
	width: 100%;
}

.modal-dialog .bottom button.update {
	background-color: #e85d43;
}

.modal-dialog .bottom button.delete {
	background-color: #ef4d43;
}.area-gallery {
	width: 300px;
	height: 300px;
}

.gallery-wrapper {
	height: 100%;
	width: 100%;
}

.area-gallery .gallery-container,
.popup-window .content > .gallery-swipe .gallery-container {
	overflow: hidden;
	height: 100%;
}

.area-gallery .gallery-swipe,
.popup-window .content > .gallery-swipe {
	position: relative;
	height: 100%;
}

.theme-dark .popup-window.fullscreen.gallery { background-color: #000; }
.theme-medium .popup-window.fullscreen.gallery { background-color: rgb(216,216,216); }
.theme-light .popup-window.fullscreen.gallery { background-color: #FFF; }

.popup-window.fullscreen.gallery .popup-window-bar {
	height: 0;
}
.popup-window.fullscreen.gallery .content {
	top: 0;
	bottom: 0;
	height: auto;
}

.area-gallery .gallery-wrap,
.popup-window .content > .gallery-swipe .gallery-wrap {
	height: 100%;
	max-height: 100%;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	overflow-y: hidden;
}

.area-gallery .gallery-swipe > .append-here,
.popup-window .content > .gallery-swipe > .append-here,
.area-gallery .gallery-wrap > .append-here,
.popup-window .content > .gallery-swipe .gallery-wrap > .append-here {
	width: 100%;
	height: 100%;
}

.area-gallery .gallery-swipe > .append-here:empty,
.area-gallery .gallery-wrap > .append-here:empty {
	outline: 3px #c9c9c9 dashed;
	outline-offset: -15px;
	background-color: white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(/static/img/shared/placeholder/gallery.svg);
}

.area-gallery .gallery-wrap > .append-here > .area,
.popup-window .content > .gallery-swipe .gallery-wrap > .append-here > .area {
	position: relative;
	vertical-align: middle;
	display: inline-block !important;
	overflow: hidden;
}

.gallery-wrap > .append-here > .area > a {
	display: block;
	width: 100%;
	height: 100%;
}

.gallery-swipe .arrow {
	position: absolute;
	width: 45px;
	height: 45px;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	user-select: none;
	-webkit-user-select: none;
}

.gallery-swipe .arrow.disabled {
	cursor: default;
}

.gallery-swipe .arrow.left {
	background-image: url(/static/img/shared/gallery/arrow_left.svg);
}
.area-gallery .arrow.left.disabled {
	background-image: url(/static/img/shared/gallery/arrow_left_disabled.svg);
}

.gallery-swipe .arrow.left,
.gallery-swipe .arrow.left.outside.top,
.gallery-swipe .arrow.left.outside.bottom {
	left: 0;
}

.gallery-swipe .arrow.left.outside {
	left: -45px;
}

.gallery-swipe .arrow.right {
	background-image: url(/static/img/shared/gallery/arrow_right.svg);
}
.area-gallery .arrow.right.disabled {
	background-image: url(/static/img/shared/gallery/arrow_right_disabled.svg);
}

.gallery-swipe .arrow.right,
.gallery-swipe .arrow.right.outside.top,
.gallery-swipe .arrow.right.outside.bottom {
	right: 0;
}

.gallery-swipe .arrow.right.outside {
	right: -45px;
}

.gallery-swipe .arrow.top,
.popup-window.fullscreen.gallery  .gallery-swipe .arrow.outside.top {
	top: 0;
}

.gallery-swipe .arrow.outside.top {
	top: -45px;
}

.gallery-swipe .arrow.middle {
	top: 50%;
	transform: translate3d(0,-50%,1px);
	-webkit-transform: translate3d(0,-50%,1px);
}

.gallery-swipe .arrow.bottom,
.popup-window.fullscreen.gallery  .gallery-swipe .arrow.outside.bottom {
	bottom: 0;
}

.gallery-swipe .arrow.outside.bottom {
	bottom: -45px;
}

.gallery-swipe .arrow.center.left,
.gallery-swipe .arrow.center.left.outside {
	left: 50%;
	transform: translate3d(-100%,0,1px);
	-webkit-transform: translate3d(-100%,0,1px);
}

.gallery-swipe .arrow.center.right {
	left: 50%;
}

.gallery-swipe .navigation.bullets {
	position: absolute;
	bottom: 0px;
	left: 50%;
	height: auto;
	margin: 0;
	padding: 2px 3px;
	line-height: 0;
	white-space: nowrap;
	max-width: 100%;
}

.gallery-swipe .navigation.bullets.inside,
.popup-window.gallery .gallery-swipe .navigation.bullets.outside  {
	transform: translate(-50%, -15%);
	-webkit-transform: translate(-50%, -15%);
}

.gallery-swipe .navigation.bullets.outside {
	transform: translate(-50%, 115%);
	-webkit-transform: translate(-50%, 115%);
}

.gallery-swipe .navigation.bullet {
	border-radius: 50%;
	width: 10px;
	height: 10px;
	background-color: rgba(0,0,0,0.7);
	display: inline-block;
	margin: 0px 2px;
	cursor: pointer;
}

.gallery-swipe .navigation.bullet:last-child {
    margin-right: 0 !important;
}

.gallery-swipe .navigation.bullet.selected,
body:not(.nohover) .gallery-swipe .navigation.bullet:hover {
	background-color: rgba(255,255,255,0.7);;
}

.gallery > .append-here > .area,
.scriptable.button > * > .append-here > .area,
[data-role*="gallery"] > * > * > .append-here > .area {
	display:none;
}

.gallery > .append-here > .area:first-child,
.scriptable.button > * > .append-here > .area:first-child,
[data-role*="gallery"] > * > * > .append-here > .area:first-child {
	display:block;
}

.gallery > .append-here {
	height:100%;
}

.scriptable.button > * > .append-here {
	height:100%;
}

.popup-window .content .gallery {
	overflow-x:hidden !important;
	overflow-y:hidden !important;
}

.gallery .shown .spinner-node {
	display: none;
}

.gallery-swipe.fading .gallery-wrap {
	transition: display 0.01s !important;
	width: 100%  !important;
	transform: translateX(0) !important;
}

.gallery-swipe.fading .gallery-wrap > .append-here > * {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	display: block !important;
	opacity: 0;
	transition: opacity 0s;
	transition-timing-function: ease-in !important;
	-webkit-transition: opacity 0s;
	-webkit-transition-timing-function: ease-in !important;
	pointer-events: none;
}

.gallery-swipe.fading .gallery-wrap > .append-here > *.h5-gallery-active {
	-webkit-transition: opacity 0s;
	-webkit-transition-timing-function: ease-out !important;
	opacity: 1;
	pointer-events: all;
}.template-slider .grid {
	width: 100%;
}

	.template-slider .grid .row {
		height: 100px;
	}

	.template-slider .grid .cell {
		height: 100%;
		display: inline-block;
		padding: 3%;
	}

	.template-slider .grid .cell img {
		margin: auto;
		max-height: 100%;
		max-width: 100%;
		width: auto;
		height: auto;
	}

.hover .append-here > .area {
	display:none;
}

body:not(.nohover) .hover:hover .append-here > .area {
	display:block;
}

.hover .append-here > .area:first-child {
	display:block;
}

.hover .append-here {
	height:100%;
}
/* transition used for the TOC */
.transition {
	transition: 0.2s left;
}
.transition.bottom {
	transition: 0.3s top;
}

/***   Navigation   ***/
p.aria-status {
	overflow: hidden;
	width: 0;
	height: 0;
}

#navArticles {
	bottom: 0;
	height: 45px;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 6051;
	transform: translate3d(0,0,0); /* #3771 - Needed for Safari 9, otherwise dropshadows disappear from navbar when navigating */
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#navArticles,
#navArticles #navArticle .goto-article {
	background-color: var(--navigation-background-color);
	color: var(--navigation-icon-color);
}

body.small-portrait #navArticles {
	position: fixed;
	bottom: env(safe-area-inset-bottom);
}

#navArticles button {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    background: transparent;
}

#navArticles button.
#navArticles button:active {
    outline: 0;
}

.top-navigation #navArticles {
	bottom: auto;
	top: 0;
	height: 45px;
}

.top-navigation #navArticles .navArticles {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
}

.overlay-navigation #navArticles,
.overlay-navigation #navArticles .navArticles {
	height: 0;
}

.hidden-navigation #navArticles {
	display: none;
}

#container #navArticles ul {
	margin: 0;
}

#navMain {
	float: left;
	margin-left: 20px;
}

.overlay-navigation #navMain {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 45px;
	height: auto;
}

#navCenter {
	position: absolute;
	left: 50%;
	margin-left: -27px;
}

.overlay-navigation #navCenter {
	display: none;
}

#navArticle {
	float: right;
	margin-right: 20px;
	position: relative;
}

.overlay-navigation #navArticle {
	position: static;
	bottom: 0;
	left: 0;
	height: auto;
	width: 45px;
	margin: 0;
}

#navArticles li {								/* improvement: why didn't we use an <a /> here? */
	list-style-position: outside;
	list-style-type: none;
	width: 45px;
	height: 45px;
	float: left;
	outline: 0;
	opacity: 1;
	transition: visibility 0s ease-out, opacity 0.2s ease-out;
	background-image: var(--navigation-background-image);
}

.overlay-navigation #navArticles li {
	display: block;
	float: none;
	margin: 0;
	background-color: var(--navigation-background-color);
}

.overlay-navigation #navArticles li.pagenumbers {
	display: none;
}

#navArticles.activation-decoration .disabled {
	cursor: default;
}

#container #navArticles .navArticles ul > li.hidden {
	visibility: hidden;
	opacity: 0;
}

#navArticles li { cursor: pointer; }
#navArticles li.disabled { cursor: default; }

#navMain li {
	margin-left: 10px;
}
#navMain li:first-child {
	margin-left: 0;
}
.overlay-navigation #navMain li {
	margin: 0;
}
#navCenter li {
	margin: 0 5px;
}
#navArticle li {
	margin-right: 10px;
}
#navArticle li:last-child {
	margin-right: 0;
}

#navArticles li > a {
	display: block;
	width: 100%;
	height: 100%;
}

.overlay-navigation #navArticle li.prev {
	position: absolute;
	left: 0;
}
.overlay-navigation #navArticle li.next {
	position: absolute;
	right: 0;
}

#navArticles #shoppingCart[data-product-count]:after {
	content: attr(data-product-count);
	background-color: #E12011;
	color: #fff;
	min-width: 16px;
	height: 16px;
	display: block;
	font-size: 10px;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	padding: 0 3px;
	overflow: hidden;
	line-height: 16px;
	text-shadow: 0 0 4px #200;
	left: 30px;
	top: 6px;
	position: absolute;
	border-radius: 16px;
}

#navArticles #navArticle.pagenumbering li.pagenumbers { /* be very precise to override custom style */
	width: 65px;
	right: 55px;
	margin: 0 0 0 -10px;
	background-image: none; /* we need to override background here to make page numbers readable */
	font-size: 14px;
	line-height: 45px;
	vertical-align: middle;
	text-align: center;
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-weight: 600;
	cursor: default;
}

#navArticles #navArticle.pagenumbering li.pagenumbers [data-count="current"][contenteditable] {
	display: inline-block;
	width: 25px;
	-webkit-user-select: auto;
}

li.pagenumbers span[data-count="current"]:hover {
	cursor: pointer;
	text-decoration: underline;
}

/* Jump to article popup */
#navArticles #navArticle .goto-article {
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-weight: 600;
	position: absolute;
	top: -35px;
	right: 0px;
	padding: 3px 5px;
	border-radius: 2px;
	white-space: nowrap;
}

#navArticles #navArticle .goto-article > p {
	color: #C8C8C8;
	display: inline-block;
	margin-right: 5px;
}

#navArticles #navArticle .goto-article > input {
	width: 40px;
	text-align: center;
}

#navArticles #navArticle .goto-article .close {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #E1E1E1;
	background-image: var(--studio-sprite);
	background-repeat: no-repeat;
	background-position: -9px -484px;
	cursor: pointer;
	background-size: 350px auto;
}

form.theme #navArticles {
	z-index: 0;
}

#navArticles .home 				{ background-position: 0px 0; }
#navArticles .index				{ background-position: -45px 0px; }
#navArticles #shoppingCart		{ background-position: -90px 0px; }
#navArticles .info				{ background-position: -135px 0px; }
#navArticles .prev 				{ background-position: -180px 0px; }
#navArticles .next				{ background-position: -225px 0px; }
#navArticles .h5mag				{ background-position: -270px 0px; }
#navArticles .fullscreen		{ background-position: -315px 0px; }
#navArticles .fullscreen.active	{ background-position: -360px 0px; }
#navArticles .pdf-icon			{ background-position: -405px 0px; }
#navArticles .email				{ background-position: -450px 0px; }
#navArticles .search-button		{ background-position: -500px 0px; }

#navArticles .home.disabled					{ background-position: 0 45px; }
#navArticles .index.disabled				{ background-position: -45px 45px; }
#navArticles #shoppingCart.disabled			{ background-position: -90px 45px; }
#navArticles .info.disabled					{ background-position: -135px 45px; }
#navArticles .prev.disabled 				{ background-position: -180px 45px; }
#navArticles .next.disabled					{ background-position: -225px 45px; }
#navArticles .h5mag.disabled				{ background-position: -270px 45px; }
#navArticles .fullscreen.disabled			{ background-position: -315px 45px; }
#navArticles .fullscreen.active.disabled	{ background-position: -360px 45px; }
#navArticles .pdf-icon.disabled				{ background-position: -405px 45px; }
#navArticles .email.disabled				{ background-position: -450px 45px; }
#navArticles .search-button.disabled		{ background-position: -500px 45px; }

#navArticles .home.disabled:active				{ background-position: 0px 45px }
#navArticles .index.disabled:active				{ background-position: -45px 45px }
#navArticles #shoppingCart.disabled:active		{ background-position: -90px 45px }
#navArticles .info.disabled:active				{ background-position: -135px 45px }
#navArticles .prev.disabled:active 				{ background-position: -180px 45px }
#navArticles .next.disabled:active				{ background-position: -225px 45px }
#navArticles .h5mag.disabled:active				{ background-position: -270px 45px }
#navArticles .fullscreen.disabled:active		{ background-position: -315px 45px }
#navArticles .fullscreen.active.disabled:active	{ background-position: -360px 45px }
#navArticles .pdf-icon.disabled:active			{ background-position: -405px 45px; }
#navArticles .email.disabled:active				{ background-position: -450px 45px; }
#navArticles .search-button.disabled:active		{ background-position: -500px 45px; }

#navArticles .home:active				{ background-position:  0px 90px; }
#navArticles .index:active				{ background-position: -45px 90px; }
#navArticles #shoppingCart:active		{ background-position: -90px 90px; }
#navArticles .info:active				{ background-position: -135px 90px; }
#navArticles .prev:active 				{ background-position: -180px 90px; }
#navArticles .next:active				{ background-position: -225px 90px; }
#navArticles .h5mag:active				{ background-position: -270px 90px; }
#navArticles .fullscreen:active			{ background-position: -315px 90px; }
#navArticles .fullscreen.active:active	{ background-position: -360px 90px; }
#navArticles .pdf-icon:active			{ background-position: -405px 45px; }
#navArticles .email:active				{ background-position: -450px 45px; }
#navArticles .search-button:active		{ background-position: -500px 45px; }

body:not(.nohover) #navArticles .home.disabled:hover				{ background-position: 0px 45px }
body:not(.nohover) #navArticles .index.disabled:hover				{ background-position: -45px 45px }
body:not(.nohover) #navArticles #shoppingCart.disabled:hover		{ background-position: -90px 45px }
body:not(.nohover) #navArticles .info.disabled:hover				{ background-position: -135px 45px }
body:not(.nohover) #navArticles .prev.disabled:hover 				{ background-position: -180px 45px }
body:not(.nohover) #navArticles .next.disabled:hover				{ background-position: -225px 45px }
body:not(.nohover) #navArticles .h5mag.disabled:hover				{ background-position: -270px 45px }
body:not(.nohover) #navArticles .fullscreen.disabled:hover			{ background-position: -315px 45px }
body:not(.nohover) #navArticles .fullscreen.active.disabled:hover	{ background-position: -360px 45px }
body:not(.nohover) #navArticles .pdf-icon.disabled					{ background-position: -405px 45px; }
body:not(.nohover) #navArticles .email.disabled:hover				{ background-position: -450px 45px; }
body:not(.nohover) #navArticles .search-button.disabled:hover		{ background-position: -500px 45px; }

body:not(.nohover) #navArticles .home:hover					{ background-position: 0px 90px }
body:not(.nohover) #navArticles .index:hover				{ background-position: -45px 90px }
body:not(.nohover) #navArticles #shoppingCart:hover			{ background-position: -90px 90px }
body:not(.nohover) #navArticles .info:hover					{ background-position: -135px 90px }
body:not(.nohover) #navArticles .prev:hover 				{ background-position: -180px 90px }
body:not(.nohover) #navArticles .next:hover					{ background-position: -225px 90px }
body:not(.nohover) #navArticles .h5mag:hover				{ background-position: -270px 90px }
body:not(.nohover) #navArticles .fullscreen:hover			{ background-position: -315px 90px }
body:not(.nohover) #navArticles .fullscreen.active:hover	{ background-position: -360px 90px }
body:not(.nohover) #navArticles .pdf-icon:hover				{ background-position: -405px 90px }
body:not(.nohover) #navArticles .email:hover				{ background-position: -450px 90px; }
body:not(.nohover) #navArticles .search-button:hover		{ background-position: -500px 90px; }
.pageprogressbar {
	position: absolute;
	bottom: 0;
	height: 4px;
	left: 0;
	right: 0;
	z-index: 2999520;
}

.pageprogressbar.top-left, .pageprogressbar.top-right {
	bottom: auto;
	top: 0;
}

.pageprogressbar.left-top, .pageprogressbar.left-bottom {
	bottom: auto;
	height: 100%;
	width: 5px;
	top: 0;
}

.pageprogressbar.right-top, .pageprogressbar.right-bottom {
	bottom: auto;
	height: 100%;
	width: 5px;
	top: 0;
	right: 0;
	left: auto;
}

.pageprogressbar > .percentage {
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	transition: width 0.3s ease-out, height 0.3s ease-out;
}

.pageprogressbar.top-left > .percentage,
.pageprogressbar.bottom-left > .percentage {
	height: 100%;
	left: 0px;
	top: 0px;
}

.pageprogressbar.top-right > .percentage,
.pageprogressbar.bottom-right > .percentage {
	height: 100%;
	right: 0px;
	top: 0px;
}

.pageprogressbar.left-top > .percentage,
.pageprogressbar.right-top > .percentage {
	width: 100%;
	left: 0px;
	top: 0px;
}

.pageprogressbar.left-bottom > .percentage,
.pageprogressbar.right-bottom > .percentage {
	width: 100%;
	left: 0px;
	bottom: 0px;
}.widget-placeholder,
figure.image img[src="/static/img/shared/placeholder/image.svg"],
figure.image img[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"], /* image placeholder */
.videoEmbedPosterframe img.posterFrame[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"], /* video placeholder */
.widget-placeholder-if-empty:not([src]) {
	width: 100%;
	height: 100%;
	min-height: 75px;
	min-width: 75px;
	text-align:center;
	overflow: hidden;
	display: block !important;
	opacity: 1 !important;

	outline: 3px #c9c9c9 dashed;
	outline-offset: -15px;

	background-color: white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

figure.image img[src="/static/img/shared/placeholder/image.svg"],
figure.image img[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"], /* image placeholder */
.videoEmbedPosterframe img.posterFrame[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"] /* video placeholder */ {
	width: 300px;
	max-width: 100%;
	min-width: 100%;
}

.area.facebook,
.area.twitterwidget { width: 300px; height: auto; }
.area.iframe { width: 300px; height: 300px; }
.area.soundcloudwidget { width: 300px; height: 166px; }
.area.instagram { width: 300px; height: 380px; }

.fbwidget, .scwidget { height: 100%; }

.area.twitterwidget .widget-placeholder-twitter > img[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"] { width: 100%; height: auto; background-image: url(/static/img/shared/placeholder/twitter.svg); background-size: contain; background-repeat: no-repeat; }
.area.facebook .widget-placeholder-facebook > img[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"] { width: 100%; height: auto; background-image: url(/static/img/shared/placeholder/facebook.svg); background-size: contain; background-repeat: no-repeat; }
.widget-placeholder-soundcloud {background-image: url(/static/img/shared/placeholder/soundcloud.svg); }
.widget-placeholder-instagram {background-image: url(/static/img/shared/placeholder/instagram.svg); }
.widget-placeholder-iframe {background-image: url(/static/img/shared/placeholder/iframe.svg); }
figure.image img[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"] {background-image: url(/static/img/shared/placeholder/image.svg);}
.videoEmbedPosterframe img.posterFrame[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"] {background-image: url(/static/img/shared/placeholder/video.svg);}

/* Workaround which prevent loss of events due to flash */
.edit .area.iframe .editable,
.edit .area.instagram .editable,
.edit .area.twitterwidget .editable,
.edit .area.facebook .editable {
	position: relative;
}.overlay {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQIHWNgaAAAAIMAgXAq3GgAAAAASUVORK5CYII=); /* 50% transparent black */
	z-index:5000;
}

.overlay.parent {
    z-index: 0;
}

.popup-window {
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
	position:relative;
	z-index: 6000;
	transform: translateZ(0);
}

.popup-window.video-popup {
	padding: 0;
	border-radius: 0 !important;
	background-color: black !important;
	box-shadow: none;
}
body.IE8 #container .popup-window {
	border-radius: 0;
	-ms-behavior: none;
}

/* Yes, this works with height: 1px. Needed to overlay close div on top of video */
.popup-window .video-hidden-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border: 0;
}

.popup-window.transparent {
	background: transparent;
	box-shadow: none;
}

	.popup-window .area {
		max-width: 860px;
	}

	.popup-window.fullscreen .area,
	.popup-window.parent .area {
		max-width: 100%;
	}

	.popup-window .close {
		background-image: url('/static/img/shared/btn_close.svg');
		width: 45px;
		height: 45px;
		background-size: 45px 45px;
		position: absolute;
		cursor: pointer;
		z-index: 6050;
		right: -22px;
		top: -22px;
		transform: translateZ(0);
		background-repeat: no-repeat;
		border: none;
		background-color: transparent;
	}

	.IE .popup-window .close {
		background-image: url('/static/img/shared/btn_close_2x.png');
	}

	.popup-window .close.disabled {
		opacity: .4;
		cursor: not-allowed;
	}

	.popup-window.transparent .close {
		display: none;
	}

.lock-dialog {
	padding: 30px;
	text-align: center;
	width: 500px;
	height: 300px;
}

.popup-window .content {
	height: 100%;
	overflow: auto;
	overflow-x:hidden;
}
.popup-window.video-popup .content {
	overflow: hidden;
}

.popup-window .content > .area > .append-here {
	height: 100%;
}

.popup-window .content.loading {
	background-image: url(/static/img/shared/loading.gif);
	background-position: center center;
	background-repeat: no-repeat;
}

@keyframes h5mag-popup-animation {
	0%		{ opacity: 0; transform: scale3d(.3, .3, .3); }
	50% { opacity: 1.0; }
	100%		{ transform: scale3d(1.0, 1.0, 1.0); }
}

.popup-window {
	-webkit-animation-name: h5mag-popup-animation;
	-webkit-animation-duration: 0.3s;
	animation-name: h5mag-popup-animation;
	animation-duration: 0.3s;
}

.popup-window .twwidget {
	min-height:600px;
}

.popup-window > .vscroll {
	height:  100%;
	clear: both;
	margin:0px;
	overflow:hidden;
}

/* Fullscreen popup (a.k.a. mobile popup) */

.popup-window.fullscreen {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6000;
	overflow: auto;
	width:100%;
	overflow:hidden;
	-webkit-animation: pop-slide-in 500ms ease-out;
	-moz-animation: pop-slide-in 500ms ease-out;
	-ms-animation: pop-slide-in 500ms ease-out;
	animation: pop-slide-in 500ms ease-out;
}

.popup-window.balloon, popup-window.expandable {
	position:absolute;
}

.popup-window {
	pointer-events:all;
}

.popup-window.fullscreen .popup-window-title {
	font-size: 18px;
	color: #fff;
	font-weight: bold;
	padding-left: 50px;
	padding-right: 50px;
	line-height: 40px;
	height: 40px;
	max-height: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	white-space: nowrap;
	text-align:center;
}

/* FS#1080 - Give the window-bar a basic position and z-index to allow the close button to overlay video's */
.popup-window .popup-window-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}

.small-portrait .popup-window .popup-window-bar {
	position: static;
}

.popup-window.fullscreen .popup-window-bar {
	height:40px;
	background-color:black;
	width:100%;
}

.popup-window.fullscreen .close {
		width: 45px;
		height: 45px;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		z-index: 5;
		background-image: url('/static/img/full/btn_close.png');
		background-repeat: no-repeat;
		border: none;
		background-color: transparent;
	}

	.popup-window.fullscreen .content {
		overflow: hidden;
		position:absolute;
		top:40px;
		left:0px;
		width:100%;
		margin: 0px;
		padding: 0px;
		height: 100%;
		height: calc(100% - 40px);
	}

	.popup-window.fullscreen.video-popup .content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.popup-window.fullscreen .content > section {
		height: 100%;
		max-height: 100%;
		transform: translate3d(0,0,0);
		overflow-y: auto;
	}

	.popup-window.fullscreen .content img {
		max-width: 100%;
	}

		.popup-window.fullscreen .content .scrollable-content {
			height:  100%;
			clear: both;
			overflow: auto;
			overflow-x: visible;
			margin:0px;
		}

@keyframes pop-slide-in{
0%   {transform: translateY(-100%);}
100%  {transform: translateY(0%);}
}
.area.product {
	width: 800px;
	height: 400px;
}

.area.product .blockwrapper {
	height: 100%;
}

.area.product .product-image {
	position: absolute;
	display: inline-block;
	width: 50%;
	height: 100%;
	text-align: center;
	line-height: 400px;
	top: 0;
	left: 0;
}

.area.product .product-image img {
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

.area.product .main {
	position: absolute;
	display: inline-block;
	width: 50%;
	height: 100%;
	padding: 20px;
	overflow: auto;
	top: 0;
	left: 50%;
}

.area.product .buy {
	background: #000 url(/static/img/shared/cart.png) 14px center no-repeat;
	padding-left: 48px;
	color: #FFF;
	padding: 10px 20px 10px 48px;
	margin: 10px 0;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}
body:not(.nohover) .area.product .buy:hover {
	background-color: #333;
	color: #FFF;
}.h5scroll-area {
	overflow: hidden !important;
	z-index: 0;
	position: relative;
}

.h5scroll-area ~ * {
	transform: translate3d(0,0,0);
}

.h5scroll-contents {
	height: 100%;
	overflow-y: scroll;
	position: relative;
}

.h5scroll-wrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

body:not(.IE) .h5scroll-wrap {
	transform: translate3d(0,0,0);
}

.h5scroll-wrap.unselectable {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.h5scroll-track {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 8px;
	cursor: pointer;
	overflow: hidden;
	transform: translate3d(0,0,0);
}

.h5scroll-drag {
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	cursor: pointer;
	border-radius: 4px;
	transition: opacity 0.3s ease-in;
	-webkit-transition: opacity 0.3s ease-in;
}

.area.scrollable > .append-here.h5-stickybit-parent {
	height: auto;
	min-height: 100%;
}

body #container .h5scroll-drag.auto-hide {
	opacity: 0;
}

.h5scroll-drag.visible,
body #container .h5scroll-drag.auto-hide.visible,
.h5scroll-drag.always-visible  {
	opacity: 1;
}

body.theme-light .h5scroll-drag {
	background: #FFFFFF;
	border: 1px solid rgb(151,151,151);
	border-color: rgba(151,151,151,0.3);
}

body.theme-dark .h5scroll-drag,
body.theme-custom .h5scroll-drag {
	background: #000000;
	border: 1px solid rgb(151,151,151);
	border-color: rgba(151,151,151,0.3);
}

body.theme-medium .h5scroll-drag {
	background: #EEEEEE;
	border: 1px solid rgb(80,80,80);
	border-color: rgba(80,80,80,0.3);
}.search {
	width: 100%;
	padding: 10px;
}

.search .search-container {
	position: relative;
	margin-bottom: 5px;
}

.search .next-result,
.search .prev-result {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 2px;
	opacity: 0.6;
	background-image: url(/static/img/shared/studio/dropdown-outline.svg);
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

body:not(.nohover) .search .next-result:hover,
body:not(.nohover) .search .prev-result:hover {
	opacity: 1;
}

.search .prev-result {
	right: 22px;
	transform: rotate(180deg);
}

.search .next-result {
	right: 0px;
}

.search .input-block {
	position: relative;
	display: inline-block;
	width: 235px;
}

.search .input-block .clear-search {
	display: none;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 15px;
	height: 15px;
	opacity: 0.4;
	background-image: url(/static/img/shared/close_x2.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 10px 10px;
}

body:not(.nohover) .search .input-block .clear-search:hover {
	opacity: 0.9;
	cursor: pointer;
}

.search .input-block .show-clear ~ .clear-search {
	display: block;
}

.search .input-block .result-counter {
	display: block;
	position: absolute;
	top: 5px;
	right: 25px;
	width: 35px;
	height: 15px;
	color: #ccc;
	pointer-events: none;
	text-align: right;
	line-height: 16px;
	font-size: 12px;
}

.search .input-block input {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 2px 60px 2px 5px;
}

.search .no-result {
	display: none;
}

.search > p {
	display: block;
	font-size: 12px;
	padding: 0px 2px;
	margin-top: 10px;
	font-style: italic;
}

#articleIndex li a .text .counter,
#articleSearchIndex li a .text .counter {
	float: right;
	color: #ccc;
}

body:not(.nohover) #articleIndex li:hover a .text .counter,
body:not(.nohover) #articleSearchIndex li:hover a .text .counter {
	color: #eee;
}

article mark[data-markjs="true"] {
	background: rgba(255, 255, 0, 0.75) !important;
	color: #000 !important;
	font-style: inherit;
	font-weight: inherit;
}.selector {
	display: inline-block;
	position: relative;
	padding: 5px 30px 5px 5px;
	cursor: pointer;
	border: 1px solid #CCC;
	height: 35px;
}
.selector::after {
	content: '';
	display: block;
	height: 22px;
	width: 30px;
	position: absolute;
	right: 5px;
	top: 5px;
	background-image: url('/static/img/full/arrow-down.svg');
	background-repeat: no-repeat;
	background-position: 13px 7px;
}
.selector .thumbnail {
	width: 42px;
	height: 22px;
	margin-right: 10px;
	vertical-align: top;
}
.selector .title {
	line-height: 22px;
	vertical-align: middle;
}

.modal-dialog.selector {
	display: block;
	position: absolute;
	padding: 0;
	height: auto;
	border: none;
}
.modal-dialog.selector::after {
	display: none;
}

.modal-dialog.selector .middle {
	padding: 0;
	background-color: #FFF;
	max-height: 230px;
	overflow-y: auto;
}
.modal-dialog.selector .bottom {
	height: 1px;
}
.modal-dialog.selector .thumbnail {
	vertical-align: middle;
	margin-top: 2px;
}
.modal-dialog.selector .option {
	height: 32px;
	padding: 2px 10px;
	line-height: 22px;
	vertical-align: middle;
	border-bottom: 1px solid #c8c8c8;
}
.modal-dialog.selector .option:last-child {
	border: none;
}
body:not(.nohover) .modal-dialog.selector .option:hover {
	background-color: #e7e7e7;
}
.modal-dialog.selector .option.selected {
	background-color: #e7e7e7;
	background-image: url('/static/img/full/checkmark.svg');
	background-position: right 5px center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
}
.modal-dialog.selector .option .title {
	line-height: 26px;
}
.modal-dialog.selector .title {
	line-height: 38px;
}
.modal-dialog.selector .top .title {
	text-transform: uppercase;
}/** Shopping Cart **/
#shoppingCartContent {
	display: none;
	width: 400px;
	height: auto;
	position: absolute;
	left: 0px;
	bottom: 40px;
	padding-bottom: 20px;
	cursor:default;

	font-family: "Source Sans Pro", "Sans serif";
	font-size: 12px;
	color: #000000;
	line-height: 15px;

}
#shoppingCartContent .cart-empty-message {
	padding: 20px;
	text-align: center;
	line-height: 25px;
}

#shoppingCartContent .checkout button[disabled] {
	display: none;
}

#shoppingCartContent .cart-empty-message b {
	color: #bfbfbf;
	font-size: 22px;
	font-weight: normal;
}

#shoppingCartContent:after {
	content: "";
	display:block;
	position: absolute;
	bottom: 7px;
	left: 4px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 14px 14px 0 14px;
	border-color: #FFFFFF transparent transparent transparent;
}

#shoppingCartContent table {
	width: 100%;
}

#shoppingCartContent .cart-item {
	border-bottom: 1px solid #F2F2F2;
}

#shoppingCartContent table tbody td,
#shoppingCartContent table tfoot td {
	color: #000;
	vertical-align: middle;
	height:36px; /* works as min-height in all major browsers */
}

#shoppingCartContent table td.image img {
	max-width:70px;
	max-height:70px;
	padding:0;
}

#shoppingCartContent table td.image {
	width:70px;

}

#shoppingCartContent table td.name {
	padding-left:10px;
	font-weight: 600;
}

#shoppingCartContent table td.quantity {
	width:10px;
}

#shoppingCartContent table td.totalQuantity,
#shoppingCartContent table td.quantity,
#shoppingCartContent table td.remove {
	text-align: right;
	cursor: pointer;
	z-index: 8;
	opacity: 0.5;
}

#shoppingCartContent table td.remove {
	background-image: url('/static/img/shared/remove-from-cart.png');
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-position: center center;
	width: 18px;
}

	#shoppingCartContent .background {
		z-index: -1;
		background-color: #fff;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding-bottom:10px;
		padding-right:10px;
	}

	#shoppingCartContent .products {
		overflow-y:auto;
		max-height:600px;
	}

	#shoppingCartContent .products .delete {
		width: 100%;
		height: 100%;
	}

	body:not(.nohover) #shoppingCartContent .products .delete:hover {
		opacity: 1;
	}

	#shoppingCartContent input.quantity {
		width:35px;
		text-align: right;
		background: #FFFFFF;
		border: 1px solid #D5D5D5;
		color: #000;
		padding:2px;
		padding-right:4px;
		margin-right:3px;
		height:20px;
	}

		#shoppingCartContent input.quantity:focus {
			background-color: #fff;
		}

	#shoppingCartContent .products table .totalPrice {
		font-weight:bold;
	}

	#shoppingCartContent td.price, shoppingCartContent td.pricing {
		white-space:nowrap;
	}

	#shoppingCartContent table tr.cart-line-shipping-and-handling,
	#shoppingCartContent table tr.cart-line-shipping-and-handling td.name {
		font-weight:normal;
	}

	#shoppingCartContent table tr.cart-line-total {
		font-weight:bold;
	}

	#shoppingCartContent .checkout {
		/*position: absolute;
		background-color: #8fc742;
		color: #fff;
		width: 117px;
		right: 0px;*/
	}

	#shoppingCartContent .checkout button {
		background-color: #8fc742;
		color:#FFF;
		border-width:0;
		border-radius:2px;
		padding-left:18px;
		padding-right:18px;
		padding-top:5px;
		padding-bottom:5px;
		float:right;

	}

.swipeview-loading article, .swipeview-loading * {
	visibility: hidden;
}

body.IE8 .swipeview-loading,
body.IE9 .swipeview-loading {
	background-position: center,center;
	background-image: url(/static/img/shared/spinner.gif);
	background-repeat: no-repeat;
}

.swipeview-loading::before {
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	position: absolute;
	margin: -25px 0 0 -25px;
	animation: h5-rotate-fully 1.0s infinite linear;
	background-image: url(/static/img/shared/spinner.svg);
	background-position: center;
	background-repeat: no-repeat;
}

body.IE8 .swipeview-loading::before,
body.IE9 .swipeview-loading::before {
	display: none;
}

@keyframes h5-swipe-bounce { 0% { transform: translate3d(0, 0, 0); } 65% { transform: translate3d(50px, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes h5-swipe-bounce-right { 0% { transform: translate3d(0, 0, 0); } 65% { transform: translate3d(-50px, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }

.hiddenmaster, .hiddenmaster * {
	visibility: hidden;
}

.swipeview-active.bounce-left {
	animation: h5-swipe-bounce 0.25s;
}

.swipeview-active.bounce-right {
	animation: h5-swipe-bounce-right 0.25s;
}.area-gallery > .gallery-swipe > .append-here > .area {
	display: none !important;
}

.area-gallery > .gallery-swipe > .append-here > .area:first-child {
	display: inline-block !important;
	width: 100%;
    height: 100%;
}

[data-role*="gallery"] > * > * > .append-here > .area:first-child {
	display:block;
	height: 100%;
}body>#loader {
	position: static !important;
	display: none !important;
}.hide_in_pdf {
	display: none;
}

.show_in_pdf {
	display: block;
}body, html {
    overflow-x: initial !important;
    overflow-y: initial !important;
    background-color: white !important;
    line-height: 1.4;
}

body {
	font-size: 0;
}

#container > .cssNavigator,
#container > #navArticles {
	display: none !important;
}

body.print.full-edition article {
	height: auto;
	page-break-after: always;
}

body.print.full-edition article .area-root {
	height: auto;
}

article,
article .area-root,
#articleBrowser,
#articles,
#container {
	position: static !important;
	overflow-y: initial !important;
	overflow-x: clip !important;
}

article .area-root > .append-here {
	display: flow-root;
}

article .area-root > .append-here > .area-section {
	overflow: initial !important;
}

body.no-flow-root  article .area-root > .append-here {
	display: block;
	margin-top: -1px;
	padding-top: 1px;
}

::-webkit-scrollbar {
	width: 0;
}

a, a:visited {
	border: 0;
    text-decoration: none;
}

article > time {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

#container {
	margin: 0;
	transform: none !important;
	top: 0 !important;
	left: 0 !important;
}

article .area {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

section.area-root {
	display: block;
	height: 100%;
	width: 100%;
	max-width: 100%;
	page-break-after: always;
	font-size: 16px;
	padding-top: 1px;
	margin-left: -1px;
}

section.area-root > .h5scroll-wrap {
	overflow-y: initial !important;
	overflow-x: clip !important;
    position: static !important;
}

section.area-root:last-child,
section.area-root:last-of-type {
	page-break-after: avoid;
}

section, img {
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
}

p, h1, h2, h3, td, blockquote {
	page-break-inside: avoid;
}

img {
	width: 100%;
}

.area.facebook,
.area.iframe,
.area.instagram,
.area.soundcloudwidget,
.area.twitterwidget {
	display: none;
}

.append-here {
	height: 100%;
}
/* Un-position swipeview DIVs */
#swipeview-slider {
	position: static !important;
	transform: scale(1) !important;
	-webkit-transform: scale(1) !important;
	height: auto !important;
}

#swipeview-masterpage-0,
#swipeview-masterpage-1,
#swipeview-masterpage-2 {
	display: none !important;
	transform: scale(1) !important;
	-webkit-transform: scale(1) !important;
	position: static !important;
}

#swipeview-masterpage-0.swipeview-active,
#swipeview-masterpage-1.swipeview-active,
#swipeview-masterpage-2.swipeview-active {
	display: block !important;
	min-height: 75% !important;
	height: 100% !important;
	overflow: visible !important;
}a.pdf-video-link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.posterframe {
	position: relative;
}
.buttonContainer {
	position: absolute;
	height: 60px;
	width: 100%;
	top: 35%;
	text-align: center;
	display: inline-block;
}
.buttonContainer button {
	background: none;
	border: none;
	height: 100%;
}
.buttonContainer .buttonPlay {
	max-height: 100%;
	width: auto;
	position: static;
}