@font-face {
	font-family: 'Roboto'; font-style: normal; font-weight: 100; font-display: swap;
	src: url('/webfonts/roboto/roboto-100.woff2') format('woff2'), url('/webfonts/roboto/roboto-100.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: italic; font-weight: 100; font-display: swap;
	src: url('/webfonts/roboto/roboto-100-italic.woff2') format('woff2'), url('/webfonts/roboto/roboto-100-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap;
	src: url('/webfonts/roboto/roboto-300.woff2') format('woff2'), url('/webfonts/roboto/roboto-300.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: italic; font-weight: 300; font-display: swap;
	src: url('/webfonts/roboto/roboto-300-italic.woff2') format('woff2'), url('/webfonts/roboto/roboto-300-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/webfonts/roboto/roboto-400.woff2') format('woff2'), url('/webfonts/roboto/roboto-400.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap;
	src: url('/webfonts/roboto/roboto-400-italic.woff2') format('woff2'), url('/webfonts/roboto/roboto-400-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('/webfonts/roboto/roboto-500.woff2') format('woff2'), url('/webfonts/roboto/roboto-500.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: italic; font-weight: 500; font-display: swap;
	src: url('/webfonts/roboto/roboto-500-italic.woff2') format('woff2'), url('/webfonts/roboto/roboto-500-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/webfonts/roboto/roboto-700.woff2') format('woff2'), url('/webfonts/roboto/roboto-700.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: italic; font-weight: 700; font-display: swap;
	src: url('/webfonts/roboto/roboto-700-italic.woff2') format('woff2'), url('/webfonts/roboto/roboto-700-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap;
	src: url('/webfonts/roboto/roboto-900.woff2') format('woff2'), url('/webfonts/roboto/roboto-900.woff') format('woff');
}
@font-face {
	font-family: 'Roboto'; font-style: italic; font-weight: 900; font-display: swap;
	src: url('/webfonts/roboto/roboto-900-italic.woff2') format('woff2'), url('/webfonts/roboto/roboto-900-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; font-display: swap;
	src: url('/webfonts/roboto-condensed/roboto-condensed-300.woff2') format('woff2'), url('/webfonts/roboto-condensed/roboto-condensed-300.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Condensed'; font-style: italic; font-weight: 300; font-display: swap;
	src: url('/webfonts/roboto-condensed/roboto-condensed-300-italic.woff2') format('woff2'), url('/webfonts/roboto-condensed/roboto-condensed-300-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/webfonts/roboto-condensed/roboto-condensed-400.woff2') format('woff2'), url('/webfonts/roboto-condensed/roboto-condensed-400.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Condensed'; font-style: italic; font-weight: 400; font-display: swap;
	src: url('/webfonts/roboto-condensed/roboto-condensed-400-italic.woff2') format('woff2'), url('/webfonts/roboto-condensed/roboto-condensed-400-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/webfonts/roboto-condensed/roboto-condensed-700.woff2') format('woff2'), url('/webfonts/roboto-condensed/roboto-condensed-700.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Condensed'; font-style: italic; font-weight: 700; font-display: swap;
	src: url('/webfonts/roboto-condensed/roboto-condensed-700-italic.woff2') format('woff2'), url('/webfonts/roboto-condensed/roboto-condensed-700-italic.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 100; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-100.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-100.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 200; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-200.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-200.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 300; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-300.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-300.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-400.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-400.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-500.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-500.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-600.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-600.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-700.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-700.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 800; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-800.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-800.woff') format('woff');
}
@font-face {
	font-family: 'Roboto Slab'; font-style: normal; font-weight: 900; font-display: swap;
	src: url('/webfonts/roboto-slab/roboto-slab-900.woff2') format('woff2'), url('/webfonts/roboto-slab/roboto-slab-900.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-300.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-300.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: italic; font-weight: 300; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-300-italic.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-300-italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-400.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-400.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-400-italic.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-400-italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-600.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-600.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: italic; font-weight: 600; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-600-italic.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-600-italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-700.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-700.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: italic; font-weight: 700; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-700-italic.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-700-italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-800.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-800.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans'; font-style: italic; font-weight: 800; font-display: swap;
	src: url('/webfonts/open-sans/open-sans-800-italic.woff2') format('woff2'), url('/webfonts/open-sans/open-sans-800-italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 300; font-display: swap;
	src: url('/webfonts/open-sans-condensed/open-sans-condensed-300.woff2') format('woff2'), url('/webfonts/open-sans-condensed/open-sans-condensed-300.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans Condensed'; font-style: italic; font-weight: 300; font-display: swap;
	src: url('/webfonts/open-sans-condensed/open-sans-condensed-300-italic.woff2') format('woff2'), url('/webfonts/open-sans-condensed/open-sans-condensed-300-italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/webfonts/open-sans-condensed/open-sans-condensed-700.woff2') format('woff2'), url('/webfonts/open-sans-condensed/open-sans-condensed-700.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: swap;
	src: url('/webfonts/lato/lato-100.woff2') format('woff2'), url('/webfonts/lato/lato-100.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: swap;
	src: url('/webfonts/lato/lato-100-italic.woff2') format('woff2'), url('/webfonts/lato/lato-100-italic.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap;
	src: url('/webfonts/lato/lato-300.woff2') format('woff2'), url('/webfonts/lato/lato-300.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap;
	src: url('/webfonts/lato/lato-300-italic.woff2') format('woff2'), url('/webfonts/lato/lato-300-italic.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/webfonts/lato/lato-400.woff2') format('woff2'), url('/webfonts/lato/lato-400.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap;
	src: url('/webfonts/lato/lato-400-italic.woff2') format('woff2'), url('/webfonts/lato/lato-400-italic.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('/webfonts/lato/lato-700.woff2') format('woff2'), url('/webfonts/lato/lato-700.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap;
	src: url('/webfonts/lato/lato-700-italic.woff2') format('woff2'), url('/webfonts/lato/lato-700-italic.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
	src: url('/webfonts/lato/lato-900.woff2') format('woff2'), url('/webfonts/lato/lato-900.woff') format('woff');
}
@font-face {
	font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: swap;
	src: url('/webfonts/lato/lato-900-italic.woff2') format('woff2'), url('/webfonts/lato/lato-900-italic.woff') format('woff');
}

/* ---------------------------------------------------------- */
/* A                                                          */
/* ---------------------------------------------------------- */

a:link, a:visited, a:hover, a:active {
	color: #fff;
	text-decoration: underline;
}

#logo {
	background-image: url('/images/logo-1200x120.jpg');
	background-size: cover;
	display: block;
	font-size: 0;
	height: 40px;
	width: 400px;
}
@media only screen and (max-width: 980px) {
	#logo {
		background-image: url('/images/logo-250x120.jpg');
		height: 40px;
		width: 83px;

	}
}



#nav-toggle {
	background-color: #000;
	position: absolute;
	cursor: pointer;
	margin: 1rem;
	width: 2rem;
	height: 2rem;
}

/*
div.brand a,
div.brand a:visited {
	color: #ccc;
	text-decoration: none;
}
*/

ul.nav-list li a,
ul.nav-list li a:visited {
	display: block;
	color: #ccc;
	font-size: .75rem; /* 12px */
	font-weight: bold;
	line-height: 1rem;
	padding: 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
}

ul.nav-list li a:hover,
ul.nav-list li a:visited:hover {
	color: #fff;
}

ul.nav-list li a:not(:only-child):after,
ul.nav-list li a:visited:not(:only-child):after {
	padding-left: 4px;
	content: ' ▾';
}
ul.nav-list li ul li a,
ul.nav-list li ul li a:visited {
	background-color: rgb(16,16,16);
	color: #ccc;
	margin: 0;
	padding: 1rem;
	text-transform: none;
}
ul.nav-list li ul li a:hover,
ul.nav-list li ul li a:visited:hover {
	background-color: rgb(32,32,32);
	text-decoration: underline;
}

@media only screen and (max-width: 980px) {
	ul.nav-list li a,
	ul.nav-list li a:visited {
		border-top: 1px solid rgb(32,32,32);
		padding: 1rem;
	}

	ul.nav-list li a:hover,
	ul.nav-list li a:visited:hover {
		background-color: rgb(32,32,32);
	}

	ul.nav-list li ul li a {
		border: none;
	}
}

/* ---------------------------------------------------------- */
/* BODY                                                       */
/* ---------------------------------------------------------- */
body {
	background-color: rgb(16,16,16);
	color: #ccc;
	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
	font-family: Roboto, sans-serif;
	line-height: 1.6;
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}


/* ---------------------------------------------------------- */
/* CANVAS                                                     */
/* ---------------------------------------------------------- */
canvas {
	display: block;
	user-select: none;
	width: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ---------------------------------------------------------- */
/* CODE                                                       */
/* ---------------------------------------------------------- */

/* ---------------------------------------------------------- */
/* DIV                                                        */
/* ---------------------------------------------------------- */

/*
div.nav-container {
	height: 5rem;
	margin: 0 auto;
	width: 80%;
}
@media all and (max-width: 980px) { div.nav-container { height: 4rem; } }

div.page-container {
	margin: 0 auto;
	width: 80%;
}
div.footer-container {
	margin: 0 auto;
	width: 80%;
}
@media all and (max-width: 1690px) { div.nav-container, div.page-container, div.footer-container { width: 85%; } }
@media all and (max-width: 1280px) { div.nav-container, div.page-container, div.footer-container { width: 90%; } }
@media all and (max-width: 980px) { div.nav-container, div.page-container, div.footer-container { width: 95%; } }
@media all and (max-width: 768px) { div.nav-container, div.page-container, div.footer-container { background-color: #fff; width: 100%; } }

div.page-content {
	padding: 2.5rem 5rem;
}
@media all and (max-width: 1690px) { div.page-content { padding: 2rem 4rem; } }
@media all and (max-width: 1280px) { div.page-content { padding: 1.5rem 3rem; } }
@media all and (max-width: 980px) { div.page-content { padding: 1rem 2rem; } }
@media all and (max-width: 768px) { div.page-content { padding: .5rem 1rem; } }
*/

div.brand {
	padding: 0.75rem 0;
	float: left;
	/*
	line-height: 1em;
	font-size: 1rem;
	font-weight: bold;
	*/
}
/*
@media all and (max-width: 980px) { div.brand { font-size: 1rem; padding: 1.5rem 0; } }
*/

div.nav-mobile {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	height: 5rem;
	width: 5rem;
}
@media only screen and (max-width: 980px) {
	div.nav-mobile {
		display: block;
		height: 4rem;
		width: 4rem;
	}
}

.chart-wrapper {
	border: 1px solid #cccccc;
	margin: 2rem 0;
}


/* ---------------------------------------------------------- */
/* H1 -> H6                                                   */
/* ---------------------------------------------------------- */
h1 {
	color: #fff;
}
h2, h3, h4, h5, h6 {
	color: #9ACD32;
	line-height: normal;
	padding: 0;
}

h1 { font-family: 'Open Sans', sans-serif; font-size: 3rem; /* 48px */ font-weight: 100; margin: 0 0 1em 0; }
h2 { font-family: 'Open Sans Condensed', sans-serif; font-size: 1.5rem; /* 24px */ font-weight: 700; margin: 2em 0 1em 0; }
h3 { border-bottom: 2px solid #ffcc33; font-size: 1.125rem; /* 18px */ font-weight: 600; margin: 2em 0 0 0; }
h4 { font-size: 1rem; /* 16px */ font-weight: 600; margin: 1em 0 0 0; }

/* ---------------------------------------------------------- */
/* HTML                                                       */
/* ---------------------------------------------------------- */
html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------- */
/* IMG                                                        */
/* ---------------------------------------------------------- */
img.banner {
	height: auto;
	max-width: 960px;
	width: 100%;
} 

/* ---------------------------------------------------------- */
/* INPUT                                                      */
/* ---------------------------------------------------------- */
input {
	font-size: .8125rem; /* 13px */
	margin: .25rem;
	padding: .25rem;
}

/* ---------------------------------------------------------- */
/* LI                                                         */
/* ---------------------------------------------------------- */
ul.nav-list li {
	display: inline-block;
	margin-left: 1rem;
	position: relative;
}
ul.nav-list li:last-child {
	margin-right: 0;
}
ul.nav-list li ul li {
	margin: 0;
	min-width: 190px;
}
@media only screen and (max-width: 980px) {
	ul.nav-list li {
		display: block;
		margin: 0;
	}
	ul.nav-list li ul li {
	}
}

ul.shows li {
	border-bottom: 1px solid #333;
	display: block;
	padding: .5rem 0;
}

ul.flags li {
	margin: 0 0 .25em 2.1em;
}
ul.flags li::before {
	content: '';
	display: block;
	float: left;
	width: 1.6em;
	height: 1.6em; /* same as line-height in use */
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	left: -2.1em;
	margin-right: -1.6em;
}
li.flag-au::before { background-image: url('/images/svg/flag_AU.svg') }
li.flag-be::before { background-image: url('/images/svg/flag_BE.svg') }
li.flag-br::before { background-image: url('/images/svg/flag_BR.svg') }
li.flag-ca::before { background-image: url('/images/svg/flag_CA.svg') }
li.flag-cn::before { background-image: url('/images/svg/flag_CN.svg') }
li.flag-de::before { background-image: url('/images/svg/flag_DE.svg') }
li.flag-dk::before { background-image: url('/images/svg/flag_DK.svg') }
li.flag-es::before { background-image: url('/images/svg/flag_ES.svg') }
li.flag-eu::before { background-image: url('/images/svg/flag_EU.svg') }
li.flag-fi::before { background-image: url('/images/svg/flag_FI.svg') }
li.flag-fr::before { background-image: url('/images/svg/flag_FR.svg') }
li.flag-gb::before { background-image: url('/images/svg/flag_GB.svg') }
li.flag-hk::before { background-image: url('/images/svg/flag_HK.svg') }
li.flag-in::before { background-image: url('/images/svg/flag_IN.svg') }
li.flag-it::before { background-image: url('/images/svg/flag_IT.svg') }
li.flag-jp::before { background-image: url('/images/svg/flag_JP.svg') }
li.flag-nl::before { background-image: url('/images/svg/flag_NL.svg') }
li.flag-no::before { background-image: url('/images/svg/flag_NO.svg') }
li.flag-pt::before { background-image: url('/images/svg/flag_PT.svg') }
li.flag-ru::before { background-image: url('/images/svg/flag_RU.svg') }
li.flag-se::before { background-image: url('/images/svg/flag_SE.svg') }
li.flag-sz::before { background-image: url('/images/svg/flag_SZ.svg') }
li.flag-us::before { background-image: url('/images/svg/flag_US.svg') }
li.flag-za::before { background-image: url('/images/svg/flag_ZA.svg') }

#menu li {
	background: linear-gradient(180deg, #fbfbfb 75%, #f4f4f4 100%);
	border-top-left-radius: .5em;
	border-top-right-radius: .5em;
	display: inline-block;
	font-size: 1rem;
	margin-right: 1em;
	padding: .5em 1em;
}
#menu li.active {
	background: none;
	background-color: white;
}

/* ---------------------------------------------------------- */
/* NAV                                                        */
/* ---------------------------------------------------------- */
nav#main {
	float: right;
}
@media only screen and (max-width: 980px) {
	nav#main {
		width: 100%;
	}
}

/* ---------------------------------------------------------- */
/* P                                                          */
/* ---------------------------------------------------------- */
p {
	margin: 0 0 1em 0;
}
/* ---------------------------------------------------------- */
/* SECTION                                                    */
/* ---------------------------------------------------------- */
section.navigation {
	background-color: rgb(16,16,16);
	box-shadow: 0 1px 12px 0 rgba(255,255,255,0.2), 0 1px 0 0 rgba(128,128,128,0.12), 0 1px 1px 1px rgba(255,255,255,0.03);
	overflow: visible;
	padding: 0 calc(10vw + 1rem); width: calc(100vw - calc(20vw + 2rem));
	position: fixed;
	top: 0;
	z-index: 20;
}
section.fullsize {
	background-color: #000;
	overflow: auto;
	padding: 1.5rem 1rem;
}
section.wide {
	background-color: #000;
	overflow: auto;
	padding: 1.5rem calc(10vw + 1rem); width: calc(100vw - calc(20vw + 2rem));
}
section.normal {
	background-color: #000;
	overflow: auto;
	padding: 1.5rem calc(20vw + 1rem); width: calc(100vw - calc(40vw + 2rem));
}
section.narrow {
	background-color: #000;
	overflow: auto;
	padding: 1.5rem calc(30vw + 1rem); width: calc(100vw - calc(60vw + 2rem));
}
body > section:nth-child(2) {
	margin-top: 4rem; /* add 4rem space for fixed navigation overlap */
}
section#footer {
	background-color: transparent;
	box-shadow: 0 -8px 8px 0 rgba(255,255,255,0.05), 0 -1px 0 0 rgb(32,32,32);
}

@media all and (max-width: 1690px) {
	section.fullsize { padding: 1.25rem 1rem; }
	section.navigation { padding: 0 calc(7.5vw + 1rem); width: calc(100vw - calc(15vw + 2rem)); }
	section.wide { padding: 1.25rem calc(7.5vw + 1rem); width: calc(100vw - calc(15vw + 2rem)); }
	section.normal { padding: 1.25rem calc(15vw + 1rem); width: calc(100vw - calc(30vw + 2rem)); }
	section.narrow { padding: 1.25rem calc(22.5vw + 1rem); width: calc(100vw - calc(45vw + 2rem)); }
}
@media all and (max-width: 1280px) {
	section.fullsize { padding: 1.25rem 1rem; }
	section.navigation { padding: 0 calc(5vw + 1rem); width: calc(100vw - calc(10vw + 2rem)); }
	section.wide { padding: 1.25rem calc(5vw + 1rem); width: calc(100vw - calc(10vw + 2rem)); }
	section.normal { padding: 1.25rem calc(10vw + 1rem); width: calc(100vw - calc(20vw + 2rem)); }
	section.narrow { padding: 1.25rem calc(15vw + 1rem); width: calc(100vw - calc(30vw + 2rem)); }
}
@media all and (max-width: 980px) {
	section.fullsize { padding: 1.25rem 1rem; }
	section.navigation { padding: 0 calc(2.5vw + 1rem); position: absolute; width: calc(100vw - calc(5vw + 2rem)); }
	section.wide { padding: 1.25rem calc(2.5vw + 1rem); width: calc(100vw - calc(5vw + 2rem)); }
	section.normal { padding: 1.25rem calc(5vw + 1rem); width: calc(100vw - calc(10vw + 2rem)); }
	section.narrow { padding: 1.25rem calc(7.5vw + 1rem); width: calc(100vw - calc(15vw + 2rem)); }
	body > section:nth-child(2) {
		/* margin-top: 4rem; add space for fixed navigation */
	}
}
@media all and (max-width: 768px) {
	section.fullsize { padding: 1.25rem 1rem; }
	section.navigation { padding: 0 1rem; width: calc(100vw - 2rem); }
	section.wide { padding: .5rem 1rem; width: calc(100vw - 2rem); }
	section.normal { padding: .5rem 1rem; width: calc(100vw - 2rem); }
	section.narrow { padding: .5rem 1rem; width: calc(100vw - 2rem); }
}


/* ---------------------------------------------------------- */
/* SPAN                                                       */
/* ---------------------------------------------------------- */
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
	cursor: pointer;
	height: 3px;
	width: 2rem;
	background: #ccc;
	position: absolute;
	display: block;
	content: '';
	transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
	top: -8px;
}
#nav-toggle span {
	top: 16px;
}
#nav-toggle span:after {
	bottom: -8px;
}

#nav-toggle.active span {
	background-color: transparent;
}

#nav-toggle.active span:before,
#nav-toggle.active span:after {
	top: 0;
}

#nav-toggle.active span:before {
	transform: rotate(45deg);
}
#nav-toggle.active span:after {
	transform: rotate(-45deg);
}

span.date {
	color: #999;
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
}

/* ---------------------------------------------------------- */
/* SELECT                                                     */
/* ---------------------------------------------------------- */
select {
	font-size: large; /* = 13px */
}

/* ---------------------------------------------------------- */
/* TABLE                                                      */
/* ---------------------------------------------------------- */
table {
	border-collapse: collapse;
	margin: 2rem 0;
	text-align: left;
	word-wrap: break-word;
}
.clocks table {
	margin: 0;
	width: calc(50% - 1rem);
}
.clocks table:nth-child(odd) {
	clear: both;
	float: left;
	margin: 2rem 1rem 2rem 0;
}
.clocks table:nth-child(even) {
	float: right;
	margin: 2rem 0 2rem 1rem;
}
@media all and (max-width: 768px) {
	.clocks table:nth-child(even),
	.clocks table:nth-child(odd) {
		float: none;
		margin: 2rem 0;
		width: 100%;
	}
}

table.breadcalc {
	background-color: #f8f8f8;
	width: auto;
}

/* ---------------------------------------------------------- */
/* TD                                                         */
/* ---------------------------------------------------------- */
td {
	border: 1px solid #d9d9d9;
	color: #333;
	font-size: .8125rem; /* 13px */
	padding: .5rem 1rem;
	vertical-align: middle;
}
td.clockpic {
	width: 60%;
	padding: 1rem 5%;
}
@media all and (max-width: 980px) {
	td.clockpic {
		width: 70%;
	}
}
@media all and (max-width: 768px) {
	td.clockpic {
		width: 60%;
	}
}

/* ---------------------------------------------------------- */
/* TH                                                         */
/* ---------------------------------------------------------- */
th {
	border: 1px solid #d9d9d9;
	color: #333;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.125rem; /* 18px */
	padding: .5rem 1rem;
	vertical-align: middle;
}
thead tr:nth-child(1) th {
	background-color: #f8f8f8;
}
thead tr:nth-child(2) th {
	font-size: .8125rem; /* 13px */
}

/* ---------------------------------------------------------- */
/* TEXTAREA                                                   */
/* ---------------------------------------------------------- */
textarea#pw {
	background-color: #fffed1;
	border: none;
	border: 1px solid #cccccc;
	display: block;
	font-family: Menlo,Monaco,monospace;
	font-size: 5rem;
	line-height: 1;
	margin: 1rem 0;
	outline: none;
	padding: .25em 0;
	text-align: center;
	width: 100%;
}
@media all and (max-width: 1280px) { textarea#pw { font-size: 4rem; } }
@media all and (max-width: 980px) { textarea#pw { font-size: 3rem; } }
@media all and (max-width: 768px) { textarea#pw { font-size: 1.5rem; } }


/* ---------------------------------------------------------- */
/* UL                                                         */
/* ---------------------------------------------------------- */

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media only screen and (max-width: 980px) {
	ul.nav-list {
		display: none;
	}
}


@media screen and (min-width: 981px) {
	ul.nav-list {
		display: block !important;
	}
}

ul.nav-dropdown {
	border: 1px solid #333;
	display: none;
	margin-top: -.5rem;
	position: absolute;
	/* box-shadow: 0 1px 12px 0 rgba(0,0,0,0.2), 0 1px 1px 1px rgba(0,0,0,0.03); */
	box-shadow: 0 1px 12px 0 rgba(255,255,255,0.2), 0 1px 0 0 rgba(128,128,128,0.12), 0 1px 1px 1px rgba(255,255,255,0.03);

}

@media only screen and (max-width: 980px) {
	ul.nav-dropdown {
		border: none;
		box-shadow: none;
		margin: 0;
		position: static;
	}
}

ul.shows {
	list-style-type: none;
	padding: 0;
}

ul.flags,
ul.nobull {
	list-style-type: none;
	padding: 0;
}

/* ---------------------------------------------------------- */
/* MISC                                                       */
/* ---------------------------------------------------------- */

.bg-sand {
	background-color: #f8f4f0;
}

.border {
	border: 1px solid #333333;
}
.center {
	text-align: center;
}
.clearfix {
	clear: both;
}
.inline {
	display: inline-block;
}
.p1 {
	padding: 1rem;
}
.screen-reader-text {
	display: none;
}