/*  
URL: https://muda.co/
Author: Etter Studio Ltd. Pfingstweid St 101, 8005 Zurich, Switzerland, December 2018
*/
/* 
@font-face {
    font-family: 'serifo';
    src: url('./font/subset-ArnoPro-Regular.woff2') format('woff2'),
        url('./font/subset-ArnoPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'serifo';
    src: url('./font/subset-ArnoPro-SmbdDisplay.woff2') format('woff2'),
        url('./font/subset-ArnoPro-SmbdDisplay.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
*/
@font-face {
    font-family: 'sanso';
    src: url('./font/subset-CircularStd-Book.woff2') format('woff2'),
        url('./font/subset-CircularStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 
@font-face {
    font-family: 'sanso';
    src: url('./font/subset-CircularStd-Medium.woff2') format('woff2'),
        url('./font/subset-CircularStd-Medium.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
*/
body {
	margin: 0;
	padding: 0px 0px 0px 20px;
	font-size: 0px;
	font-family: sanso, sans-serif;
	animation-timing-function: ease-in-out;
	/*background-color:#ebebeb;*/
	background-color:hsl(0, 0%, 98%);
	color: #333;
}

#prompt {
	position: fixed;
	padding: 20px;
	z-index: 200000;
	top: 10px;
	left: 10px;
	background-color: hsl(0, 0%, 100%);
	height: calc(100% - 60px);
	width: calc(100% - 60px);
	border: 2px solid #000;
}

idler {
	z-index: 100000;
	position: fixed;
	left: 40px; 
	top: 40px;
	width: 4px;
	height: 40px;
	background-color: hsl(0, 0%, 100%);
	animation: Rotate 1.0s infinite linear;
}
idlerBG {
	z-index: 9999;
	position: fixed;
	left: 0px; 
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgb(0, 0, 0, 0.6);
}

@keyframes Rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}

#bar1 {
	position: fixed;
	top: 20px;
	left: 16px;
	width: 24px;
	height: 2px;
	background-color: #000;
}
.bar1Open {
	animation: bar1Opener 0.25s ease-in both;
}
@keyframes bar1Opener {
	0% { top: 20px; left: 16px; transform: rotate(0deg); width: 24px; height: 2px; opacity: 1; }
	50% { top: 26px; left: 16px; transform: rotate(180deg); width: 24px; height: 2px; opacity: 1; }
	100% { top: -20px; left: -20px; transform: rotate(180deg); width: calc(100% + 40px); height: calc(100% + 40px); opacity: 0.9; }
}
.bar1Close {
	animation: bar1Closer 0.25s 0.25s ease both;
}
@keyframes bar1Closer {
	0% { top: 30px; left: 16px; transform: rotate(-135deg); background-color: hsl(0, 0%, 70%); }
	100%   { top: 20px; left: 16px; transform: rotate(0deg); background-color: #000; }
}

#bar2 {
	position: fixed;
	top: 26px;
	left: 16px;
	width: 24px;
	height: 2px;
	background-color: #000;
}
.bar2Open {
	animation: bar2Opener 0.5s ease-out both;
}
@keyframes bar2Opener {
	0%   { top: 26px; left: 16px; transform: rotate(0deg); background-color: #000; }
	100% { top: 26px; left: 16px; transform: rotate(135deg); background-color: hsl(0, 0%, 70%); }
}
.bar2Close {
	animation: bar2Closer 0.25s ease both;
}
@keyframes bar2Closer {
	0% { top: 26px; left: 16px; transform: rotate(135deg); background-color: hsl(0, 0%, 70%); }
	100%   { top: 26px; left: 16px; transform: rotate(0deg); background-color: #000; }
}

#bar3 {
	position: fixed;
	top: 32px;
	left: 16px;
	width: 24px;
	height: 2px;
	background-color: #000;
}
.bar3Open {
	animation: bar3Opener 0.5s ease-out both;
}
@keyframes bar3Opener {
	0%   { top: 32px; left: 16px; transform: rotate(0deg); background-color: #000; }
	100% { top: 26px; left: 16px; transform: rotate(225deg); background-color: hsl(0, 0%, 70%); }
}
.bar3Close {
	animation: bar3Closer 0.25s ease both;
}
@keyframes bar3Closer {
	0% { top: 0px; left: 16px; width: calc(100% - 20px); height: calc(100% - 20px); opacity: 0.9; }
	100%   { top: 32px; left: 16px; width: 24px; height: 2px; opacity: 1.0; }
}


/* overlay */

.overlay {
	position: fixed;
	user-select: none;
	z-index: 40;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	text-align: center;
	background-color: #000;
	opacity: 0.8;
	height: 100%;
	width: 100%;
}

centro {
	top: 50%;
    position: absolute;
	transform: translate(-50%, -50%);
}

.overlay item {
	width: 100%;
	display: inline-block;
	font-size: 32px;
	color: #fff;
	padding: 12px;
}

.overlay item img {
	width: 120px !important;
}

#mobileNavigation {
	position: fixed;
	user-select: none;
	z-index: 40;
	padding: 60px;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	opacity: 0.8;
	height: 100%;
	width: 100%;
}

#mobileLogo {
	padding-top: 90px; 
}

#mobileLogo img {
	width: 150px;
	height: 60px;
}

#logo {
	position: fixed;
	user-select: none;
	display: inline-block;
	z-index: 30;
	top: 10px;
	right: 0;
	left: 0;
	text-align: center;
}

#logo img {
	width: 160px;
	height: 100%;
}

.logoIn {
	animation: logo_in 0.4s 0.75s ease both;
}
@keyframes logo_in {
	0%   { top: -50px; opacity: 0; }
	100% { top: 10px; opacity: 1; }
}

.logoOut {
	animation: logo_out 0.5s 0s ease both;
}
@keyframes logo_out {
	0%   { top: 10px; opacity: 1; }
	50%   { top: 10px; opacity: 0; }
	100% { top: -50px; opacity: 0; }
}

/* breaking */

@keyframes shake {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(2px, 1px) rotate(0deg); }
}

breaking {
	position: fixed; 
	top: 60px; 
	right: 50px; 
	padding: 16px; 
	z-index: 40;
	color: #fff;
	font-size: 18px;
	text-align: center;
	width: 130px;
	height: 130px;
	background-color: #000;
	border-radius: 50%;
	display: inline-block;
	animation-name: shake;
	animation-duration:0.8s;
	transform-origin:50% 50%;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}




/* hero */

#hero {
	position: relative;
	display: inline-block;
	width: calc(100% + 20px);
	height: 20px;
	z-index: 20;
	margin-left: -20px;
	margin-top: 70px;
}

#hero img {
	object-fit: cover;
	width: 100%;
	height:100%;
	padding-bottom: 16px;
}

#hero canvas {
	width: 100%;
	height:100%;
	padding-bottom: 16px;
}

#hero stream {
	width: 100%;
	height:100%;
	background-color: #0000ff;
	padding-bottom: 16px;
}

/* navigation */

#navigation {
	position: fixed;
	user-select: none;
	background-color:hsl(0, 0%, 100%);
	display: inline-block;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	height: 69px;
	box-shadow: 0px 0px 1px;
}

hamburger {
	z-index: 15;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 60px;
	height: 60px;
	display: none;
}

#navigation nav {
	position: absolute;
	top: 0px;
}

nav item {
	float: left;
	display: block;
	padding: 22px 5px 0px 24px;
	font-size: 20px;
}

#navigation a {
	text-decoration: none;
	transition: 0.6s;
	color: hsl(0, 0%, 20%);
}

#navigation a:hover {
	color: hsl(0, 0%, 0%);
}

#navigation things {
	position: absolute;
	right: 0px;
	left: auto;
}

things item {
	float: left;
	padding: 24px 16px 0px 8px;
	font-size: 16px;
    cursor: pointer; 
}

things img {
	height: 30px;
	width: 50px;
	margin-left: -16px;
	margin-top: -6px;
    cursor: pointer; 
}

.footer {
	background-color: #010840; 
	position:relative; 
	display:inline-block; 
	width: calc(100% + 10px);
	padding-left: 10px;
	margin-left: -20px;
	color: hsl(0, 0%, 90%) !important;
}

.negative a {
	text-decoration: none;
	padding: 0px !important;
	background-color: transparent !important;
	transition: 0.6s;
	color: hsl(0, 0%, 90%) !important;
}

.negative a:hover {
	color: hsl(0, 0%, 100%) !important;
}


/* grid */

.grid {
	margin-left: auto;
	margin-right: auto;
	max-width: 920px;
}

.spacer {
	float:left;
	width: 100%;
}
.spacer.large {
	height: 120px;
}
.spacer.medium {
	height: 40px;
}
.spacer.small {
	height: 20px;
}

oo, yo, ho {
	width: 100%;
	display: block;
}

.small ho {
	padding-top: 12px;
}

.medium ho {
	padding-top: 20px;
}

.small yo {
	padding-bottom: 12px;
}

.medium yo {
	padding-bottom: 20px;
}

.large yo {
	padding-bottom: 32px;
}

.grid iframe {
	height: 529px;
	padding-bottom: 72px;
}

.c0, .c11, .c12, .c13, .c14, .c15, .c34, .c18 {
	float:left;
	padding-bottom: 72px;
}

.c0 {
	width: calc(100% + 20px) !important;
	margin-left: -20px !important;
}

.c11 img, .c12 img, .c13 img, .c14 img, .c15 img, .c34 img, .c18 img {
	object-fit: cover;
	width: calc(100% - 20px);
	height: 100%;
}

.c0 img {
	width: 100% !important;
}

.c0, .grid iframe {
	width: 100%;
	width: calc(100% + 20px);
	margin-left: -20px;
}
.c11 {
	width: 100%;
}
.c12 {
	width: 50%;
}
.c13 {
	width: 33.3%;
}
.c14 {
	width: 25%;
}
.c15 {
	width: 20%;
}
.c34 {
	width: 75%;
}
.c18 {
	width: 12.5%;
}

.c12.portrait img {
	height: 640px;
}

.c13.portrait img {
	height: 480px;
}

.c14.portrait img {
	height: 360px;
}

arw {
	position:absolute;
	transform: translate(-18px, 3px);
}

arw img {
	width: 16px !important;
	height: 16px !important;
}


/* BUTTONS */

.button {
	font-size: 18px;
	padding: 18px 20px;
    margin-right: 24px;
	cursor: pointer; 
	float: left;
	transition: 0.6s;
	user-select: none;
	color: #000;
	margin-bottom: 24px;
}

.button_blue  {
	background: #0000EE;
}

.button_yellow  {
	background: #f7e334;
}

.button_red  {
	background: #dc180e;
}

.button_gray {
	background: #777;
}

.button_blue:hover, .button_gray:hover, .button_red:hover {
	color:#fff;
}

.button_yellow:hover {
	background: #ccc;
}

.framed {
	font-size: 13px;
	padding: 2px 3px 1px 3px;
	border-style:solid;
	border-color:hsl(0, 0%, 40%);
	color: hsl(0, 0%, 60%);
	border-width: 2px;
}

/* INFO */

.large tit {
	width: 100%;
	font-size: 35px;
	padding-bottom: 32px;
	letter-spacing: -0.5px;
	display: inline-block;
}

.large tat {
	width: 100%;
	color: hsl(0, 0%, 50%);
	letter-spacing: -0.5px;
	font-size: 34.5px;
	line-height: 38px;
	margin-top: -36px;
	display: inline-block;
}

.large txt {
	width: calc(100% - 20px);
	font-size: 35px;
	line-height: 40px;
	letter-spacing: -0.25px;
	display: inline-block;
}

.medium top {
	/*font-weight: bold;*/
	width: 100%;
	font-size: 24px;
	margin-bottom: 0px;
	display: inline-block;
}

.medium tit {
	width: 100%;
	font-size: 24px;
	padding-bottom: 12px;
	display: inline-block;
}

.medium tat {
	width: 100%;
	color: hsl(0, 0%, 50%);
	font-size: 24px;
	margin-top: -8px;
	display: inline-block;
}

.medium txt {
	font-size: 24px;
	width: 90%;
	line-height: 30px;
	display: inline-block;
}

zum {
	width: 100%;
	font-size: 17px;
	padding-bottom: 0px;
	display: inline-block;
	position: relative;
	top: -54px;
	padding-top: 8px;
	background-color: hsl(0, 0%, 98%)
} 

bas {
	width: 100%;
	font-size: 17px;
	padding-bottom: 20px;
	display: inline-block;
	position: relative;
	top: -54px;
	color: hsl(0, 0%, 50%);
	background-color: hsl(0, 0%, 98%)
}

qwt {
	width: 90%;
	font-family: serif;
	font-size: 20px;
	line-height: 22px;
	display: inline-block;
	padding-top: 8px;
	padding-bottom: 8px;
}

.small top {
	width: 90%;
	padding-bottom: 8px;
	font-size: 16.5px;
	letter-spacing: 0px;
	display: inline-block;
	color: hsl(254, 100%, 50%);
}

.small tit {
	width: 100%;
	font-size: 16.5px;
	letter-spacing: 0px;
	display: inline-block;
	padding-bottom: 8px;
}

.small tat {
	width: 100%;
	color: hsl(0, 0%, 50%);
	font-size: 16px;
	margin-top: -8px;
	display: inline-block;
}

.small txt {
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0px;
	width: calc(100% - 40px);
	display: inline-block;
}


icn {
	font-size: 32px;
	display: inline-block;
	letter-spacing: 0.5px;
	width: 100%;
	padding-bottom: 24px;
}

txt a {
	background-color: #bdfdad;
	color: #333;
	text-decoration: none;
	padding: 0px 2px 1px 2px;
	transition: 0.8s;
}

txt a:hover {
	background-color: #ccc;
	color: #000;
}

cpt {
	font-size: 13px;
	line-height: 15px;
	display: inline-block;
	color:hsl(0, 0%, 40%);
	letter-spacing: 0.25px;
	width: calc(100% - 20px);
	max-width: 420px;
	padding-top: 8px;
}

cpt a {
	color:hsl(0, 0%, 40%);
}

tag {
	letter-spacing: 0px;
	padding: 6px 0px 0px 6px;
	font-size: 16px;
	position: absolute;
	color: hsl(0, 0%, 97%);
}

keyword {
	line-height: 36px;
	border-radius: 2px;
	letter-spacing: 0px;
	padding: 8px;
	margin-right: 4px;
	font-size: 16px;
	color: hsl(0, 0%, 97%);
	cursor: pointer;
	white-space: nowrap;
}

.off {
	background-color: #999;
}

.on {
	background-color: #3825da;
}

/* LIST */

lister {
	width: calc(100% - 20px);
	display: inline-block;
	transition: 0.4s;
}

lister:hover {
	width: calc(100% - 52px);
	padding: 16px 16px 16px 16px;
	color: hsl(0, 0%, 100%);
	background-color: hsl(0, 0%, 10%);
}

lister line {
	padding-top:16px;
	font-size: 18px;
	position: relative;
	top:16px;
}

lister img {
	float: right;
	height: 80px !important;
	width: 130px !important;
	padding-bottom: 0px !important;
}

/* TABLE */

table {
	width: 100%;
	border-collapse: collapse;
	margin-left: -20px;
	width: calc(100% + 20px);
}

td {
	border: 4px solid hsl(0, 0%, 98%);
	padding: 0px;
	vertical-align: top;
}

timetable {
	margin-bottom: 1px;
	padding: 10px;
	font-size: 16px;
	letter-spacing: 0px;
	width: calc(100% - 20px);
	display: inline-block;
	color: #fff;
}


/* COLORS */

.white {
    color: hsl(0, 0%, 100%) !important;
}

.gray {
    color: hsl(0, 0%, 60%);
}

.green {
    color: #04855c;
}

.black {
    color: #1a1a1a;
}

.red {
    color: #e53939;
}

.blue {
    color: hsl(234, 100%, 55%);
}


/* OTHER */

.hidden {
	display: none; 
}
.show {
	display: block; 
}

.active {
    cursor: pointer;	
}

.centered {
    text-align: center;	
}

.delay_0 {
	transition-delay: 0.25s;
}
.delay_1 {
	transition-delay: 0.5s;
}
.delay_2 {
	transition-delay: 0.75s;
}
.delay_3 {
	transition-delay: 1.0s;
}
.delay_4 {
	transition-delay: 1.25s;
}
.delay_5 {
	transition-delay: 1.5s;
}
.delay_6 {
	transition-delay: 1.75s;
}
.delay_7 {
	transition-delay: 2.0s;
}
.delay_8 {
	transition-delay: 2.25s;
}

.fadeIn {
	animation: fade_in 1s ease both;
}
@keyframes fade_in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

.fadeOut {
	animation: fade_out 0.5s ease both;
}
@keyframes fade_out {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}

.blink {
	animation: blinker 2s infinite ease both;
}
@keyframes blinker {
	0%   { opacity: 1; }
	50% { opacity: 0.5; }
	100%   { opacity: 1; }
}

.fadeOutSemi {
	animation: fadeOutSemer 2.0s ease both;
}

@keyframes fadeOutSemer {
	0%   { opacity: 1; }
	100%   { opacity: 0.25; }
}

/*mobile*/

@media only screen and (max-width:850px) {
	
	breaking {
		top: 40px; 
		right: 20px; 
		font-size: 14px;
		width: 100px;
		height: 100px;
	}

	.footer {
		width: calc(100% + 0px);
		padding-left: 20px;
	}

	timetable {
		font-size: 10px;
	}

	keyword {
		line-height: 28px;
		letter-spacing: 0px;
		padding: 6px;
		margin-right: 2px;
		font-size: 12px;
	}

	.c18 {
		width: 25%;
	}

	.c14 {
		width: 50%;
	}

	.c14 img {
		height: 240px;
	}

	.c13 {
		width: 50%;
	}
	
	.c34 {
		width: 100%;
	}
	
	.c12 {
		width: 100%;
	}

	.c11.portrait img, .c12.portrait img {
		height: 540px;
	}
	
	.c13.portrait img {
		height: 320px;
	}
	
	.c14.portrait img {
		height: 280px;
	}

	.spacer.small {
		height: 0px;
	}
	
	.spacer.medium {
		height: 20px;
	}

	.spacer.large {
		height: 80px;
	}

	#logo img {
		width: 100px;
		height: 40px;
	}
	
	hamburger {
		display: block;
	}
	
	.c12, .c13, .c14, .c15, .c18, .c34, .c11, .c0 {
		padding-bottom: 32px;
	}

	.grid iframe {
		padding-bottom: 32px;
	}

	#hero {
		margin-top: 54px;
	}

	#hero img, #hero canvas {
		padding-bottom: 16px;
	}

	#navigation {
		height: 54px;
	}
	
	nav item {
		display: none;
	}

	things item {
		font-size:12px;
		padding: 20px 4px 0px 12px;
	}

	things img {
		height: 24px;
		width: 40px;
		margin-left: -12px;
		margin-top: -6px;
	}

	.large tit {
		font-size: 24px; 
		letter-spacing: 0px;
	}

	.large tat {
		font-size: 24px; 
		letter-spacing: 0px;
		vertical-align: text-top;
	}

	.large txt {
		width: calc(100% - 20px);
		font-size: 24px;
		letter-spacing: 0px;
		line-height: 28px;
	}

	.large subtit {
		font-size: 24px;
		letter-spacing: 0px;
	}

	.medium tit {
		font-size: 18px;
		padding-bottom: 8px;
	}

	.medium tat {
		font-size: 18px;
		margin-top: -8px;
	}
	
	.medium txt {
		font-size: 18px;
		line-height: 22px;
	}

	.small top {
		font-size: 15px;
	}
	
	.small tit {
		font-size: 15px;
		padding-bottom: 6px;
	}

	.small tat {
		font-size: 15px;
		margin-top: -6px;
	}

	.small txt {
		font-size: 15px;
		line-height: 18px;
	}
	
	.small list {
		font-size: 13px;
		line-height: 24px;
	}

	zum, bas, qwt {
		font-size: 16px;
	}

}