@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(../font/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(../font/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
	box-sizing: border-box;
	height: 100%;
}

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

html, body, header, main, footer, a {
	background-color: #333333;
	color: #eeeeee;
	line-height: 1.2;
	text-decoration: none;
}

body, input, textarea, select {
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial;
	font-size: 16px;
	font-weight: 300;
	text-align: center;
}

html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, img, svg, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, input, select, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0 solid;
	outline: 0;
	vertical-align: baseline;
	background-repeat: no-repeat;
	background-position: center;
}

body {
	max-width: 600px;
	margin: auto;	
}

li {
	list-style: none;
}

header, footer {
	height: 20px;
	line-height: 20px;
	text-align: center;
}

main {
	min-height: calc(100vh - 40px);
}

header, footer, main {
	max-width: 400px;
	margin: 0 auto;
}

.headline, .headline-20, .headline-16, .headline-14, .subheadline, .form label, .form input, .form select, .form textarea, .button {
	display: inline-block;
	width: calc(100% - 20px);
 	margin: 10px;
 	text-transform: uppercase;
 	text-align: center;
 	letter-spacing: 1px;
}

h1 {
	font-size: 40px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 16px;
}

.form-table, .form-table>tbody, .form-table>tbody>tr, .form-table>tbody>tr>th, .form-table>tbody>tr>td {
	display: block;
}

.form label, .form input, .form select, .form textarea, .button {
 	padding: 10px;
 	border: 1px solid #888888;
 	border-radius: 5px;
	color: #eeeeee;
	background-color: transparent;
}

.form input[type=checkbox] {
	height: 100px;
}

.form input[type=submit] {
	cursor: pointer;
}

.button {
	font-size: 24px;
	font-weight: 700;
	background-color: #888888;
}

.button-red {
	background-color: #883333;
}

.button-yellow {
	background-color: #998833;
}

.button-green {
	background-color: #338855;
}

.headline {
	overflow: hidden;
}

.article {
	width: calc(100% - 20px);
 	margin: 10px;
	text-align: left;
	line-height: 140%;
}

.quote {
	width: calc(100% - 20px);
 	margin: 10px;
 	font-style: italic;
}

.flag {
	display: inline-block;
	margin-right: 5px;
	height: 17px;
	vertical-align: middle;
}

.list {
	width: 100%;
}

.list>thead>tr>th {
	padding: 5px;
}

.list>tbody>tr>td {
	border-bottom: 1px solid #888888;
	padding: 5px;
}

.list>li {
	margin: 10px;
}

.list>li>a {
	overflow: hidden;
	display: block;
 	border: 1px solid #888888;
 	border-radius: 5px;
	padding: 10px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.list>li>a:hover, .button:hover {
	background-color: #555555;
}

.screens, .videoer {
	margin: auto;
}

.image-logo, .image-marquee {
	width: calc(100% - 40px);
 	margin: 10px;
 	max-width: 256px;
 	padding: 10px;
 	background-color: #ffffff;
 	border-radius: 5px;
}

.image-logo.transparent {
	width: calc(100% - 20px);
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	filter: drop-shadow(0px 0px 2px #fff);
}

.image-cover, .image-object-trans {
 	margin: 10px;
 	max-width: 100%;
 }

.image-object-trans {
	filter: drop-shadow(0px 0px 2px #fff);
}

.video-thumbnail-container, .video-thumbnail-container-youtube {
	display: block;
	border: 1px solid #3a4458;
	padding: 0;
	margin: auto;
	width: 256px;
	height: 192px;
	overflow: hidden;
}

.video-thumbnail-play {
	display: block;
	position: relative;
	height: 0;
	width: 256px;
	margin: auto;
	vertical-align: middle;
}

.video-thumbnail-play img {
    position: absolute;
    top: -125px;
    left: 103px;
}

.titelid__titelobjekt>table, .kabinet>table, .kabinetlogo>table {
	margin: auto;
}

.kabinetlogo img {
	filter: drop-shadow(0px 0px 2px #fff);
}

dl {
	margin: 10px 0;
}

dl dt {
	text-transform: uppercase;
	font-weight: 700;
}

dl dd {
	padding-bottom: 5px;
	border-bottom: 1px solid #888888;
	margin-bottom: 10px;
	font-weight: 300;
}

.pager-pages>a, .pager-pages>span {
	padding: 0 8px;
}

.pager-pages>span.pager-active {
	font-weight: bold;
}

.filters {
	margin-bottom: 10px;
}

.filters label, .filters input {
	margin-right: 10px;
}

.list-horizontal {
	width: 100%;
}

.styring>li {
	display: inline-block;
	margin-right: 8px;
	line-height: 24px;
	vertical-align: middle;
}

.styring>li[class^="styring-joystick"]>span, .styring>li[class^="styring-rotary"]>span, .styring>li[class^="styring-turntable"]>span, .styring>li[class^="styring-trackball"]>span, .styring>li[class^="styring-wheel"]>span, .styring>li[class^="styring-yoke"]>span {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #ffffff;
	border-radius: 50%;
	margin-right: 4px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 24px;
	color: #444444;
	text-indent: -9999px;
}

.styring>li[class^="styring-yoke"]>span {
	border-radius: 25%;
}

.styring>li.styring-joystick-analog>span, .styring>li.styring-trackball>span {
	background-image: url("../graphics/joystick-analog.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li.styring-joystick-8-way>span {
	background-image: url("../graphics/joystick-8way.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li.styring-joystick-4-way>span {
	background-image: url("../graphics/joystick-4way.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li.styring-joystick-2-way>span {
	background-image: url("../graphics/joystick-2way.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li.styring-rotary>span, .styring>li.styring-turntable>span, .styring>li.styring-wheel>span, .styring>li.styring-yoke>span {
	background-image: url("../graphics/rotary.png");
	background-repeat: no-repeat;
	background-size: 75% 75%;
	background-position: 50% 50%;
}

.styring>li[class^="styring-shifter"]>span, .styring>li[class^="styring-throttle"]>span, .styring>li[class^="styring-gun"]>span {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	margin-right: 4px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	color: #444444;
	text-indent: -9999px;
}

.styring>li[class^="styring-gun"]>span::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 10px;
	height: 14px;
	background-color: #333333;
}

.styring>li.styring-shifter-2-way>span {
	background-image: url("../graphics/shifter-2way.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li.styring-shifter-4-way>span {
	background-image: url("../graphics/shifter-4way.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li.styring-shifter-5-way>span {
	background-image: url("../graphics/shifter-5way.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li.styring-shifter-6-way>span {
	background-image: url("../graphics/shifter-6way.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li.styring-throttle-lever>span {
	background-image: url("../graphics/throttle-lever.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 50% 50%;
}

.styring>li[class^="styring-pedal"]>span {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 20px;
	background-color: #ffffff;
	margin-right: 4px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	color: #444444;
}

.styring>li[class^="styring-button"]>span, .styring>li[class^="styring-thumb-button"]>span, .styring>li[class^="styring-trigger"]>span {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: #ffffff;
	border-radius: 50%;
	margin-right: 4px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	line-height: 16px;
	color: #444444;
}

.styring>li[class^="styring-trigger"]>span {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.styring>li[class^="styring-thumb-button"]>span {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.list .titelid, .list .tekst, .list .titel, .list .tid, .list .navn {
	text-align: left;
}

.list .score, .list .point, .list .point2 {
	text-align: right;
}

.list .highlight {
	background-color: #ffffff;
	color: #444444;
}

.more {
	margin: 5px 0;
}

#qrhjem {
	position: fixed;
	top: 10px;
	left: 10px;
	display: inline-block;
	width: 25px;
	height: 25px;
}

#qrhjem>img {
	width: 100%;
	height: 100%;
}