@charset "UTF-8";
/* CSS Document */

/* Applies to all screen sizes */

html,
html * {
	margin: 0;
	padding: 0;
	}

body {
	display: flex;
	position: relative;
	font-family: bebas-neue-pro, sans-serif;
	font-style: normal;
	text-transform: uppercase;
	text-align: left;
	}

a:link {
	text-decoration: none;
	color: #000000;
	}

a:hover {
	text-decoration: none;
	color: #cccccc;
	}
	
a:visited {
	text-decoration: none;
	color: #000000;
	}
	
img {
	height: auto;
	}

.centre {
	background-color: #ffffff;
	height: auto;
	}

.tableheaderleft {
	background-color: #3399ff;
	}

.main {
	position: relative;
	}

.photoinforeground {
	overflow: hidden;
	}	

.horizontallist {
	}	
	
.horizontallist ul li {
	margin-right: 1.2vw;
	display: inline-block;
	}	  
	
.horizontallist a {
	position: relative;
	font-weight: 500;
	z-index: 3;
	background-color: #33ffff;
	text-shadow: 0.2vw 0.2vw 0 #cccccc;
	}

.horizontallist a:hover {
	color: #ffffff;
	background-color: #33ffff;
	text-shadow: 0.2vw 0.2vw 0 #cccccc;
	}

#socials {
	padding-top: 3vw;
	}

#socials a {
	background: none;
	}

.upcomingshowsleft a {
	background-color: #33ffff;
	text-shadow: 0.2vw 0.2vw 0 #cccccc;
	}
	
.upcomingshowsleft a:hover {
	color: #ffffff;
	background-color: #33ffff;
	text-shadow: 0.2vw 0.2vw 0 #cccccc;
	}

.arrowinbackground {
	display: none;
	}

.upcomingshows {
	width: 100%;
	display: block;
	}

.upcomingshowsleft {
	height: 100%;
	}	
	
.upcomingshowsleft a {
	font-weight: 500;
	color: #000000;
	background-color: #33ffff;
	z-index: 3;
	}
	
.upcomingshowsright ul {
	list-style: none;
	}
		
.upcomingshowsright a {
	font-weight: 500;
	line-height: 85%;
	text-transform: none;
	z-index: 3;
	}

.upcomingshowsright a:hover {
	color: #cccccc;
	}

.upcomingshowsrightsmaller ul {
	list-style: none;
	}
		
.upcomingshowsrightsmaller a {
	font-weight: 500;
	line-height: 85%;
	text-transform: none;
	z-index: 3;
	}

.upcomingshowsrightsmaller a:hover {
	color: #cccccc;
	}

#completeinfo {
	line-height: 150%;
	text-transform: uppercase;
	}	
	
.thumbnails {
	width: 100%;
	float: left;
	padding-top: 0.8vw;
	}
	
.thumbnails li {
	margin-right: 2.5vw;
	z-index: 3;
	float: left;
	list-style: none;
	}

.thumbnails iframe {
	height: 20vh;
	}

.thumbnails div {
	height: 20vh;
	}
	
#bioetc {
	margin-bottom: 2vw;
	}

#bioetc a {
	color: #000000;
	}
	
#bioetc a:hover {
	color: #ffffff;
	}	
	
.contactimpressumsmallerscreen  {
	z-index: 3;
	}

.flags img {
	display: block;
	padding: 0.5vw;
	z-index: 3;
	}

.language {
	padding-left: 7px;
	}

/* For smartphones (portrait) */

@media only screen and (max-width: 699px) {

body {
	background: rgb(255,255,255);
	background: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(255,255,255,1) 37%, rgba(204,204,204,1) 61%, rgba(204,204,204,1) 100%);
	}
	
.grid {
	width: 100%;
	display: grid;
	grid-template-columns: 0 100% 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
	overflow-y: scroll;
	}
	
.centre {
	border: none;
	}
	
.main {
	background-color: none;
	padding-left: 4vw;	
	}
	
.photoinforeground {
	position: absolute;
	width: 60%;
	height: 115%;
	top: -3vh;
	right: 0;
	z-index: 2;
	}

.photoinforeground img {
	width: 200%;
	z-index: 2;
	}
	
.tableheaderleft {
	text-align: center;
	height: 19.9vw;
	}
		
.tableheaderleft a {
	font-weight: 600;
	font-size: 16.9vw;
	color: #ffffff;
	z-index: 3;
	vertical-align: middle;
	}
		
#dotcom {
	font-weight: 500;
	font-size: 16.9vw;
	color: #cccccc;
	}
	
.tableheaderright {
	display: none;
	}
	
.horizontallist {
	position: relative;
	margin-top: 3vw;
	margin-bottom: 1vw;
	display: block;
	}	
	
.horizontallist a {
	position: relative;
	font-weight: 500;
	font-size: 10vw;
	background-color: #33ffff;
	z-index: 3;
	}
	
.horizontallist img {
	position: relative;
	height: 9.5vw;
	}
	
#socials {
	margin-top: 0.8vw;
	}
	
.nobreak {
	display: inherit;
	}

.arrowinbackground {
	display: none;
	}
	
.upcomingshows {
	margin-top: 3vw;
	}
	
.upcomingshowsleft {
	padding-bottom: 2vw;
	}

.upcomingshowsleft a {
	position: relative;
	color: #000000;
	font-size: 10vw;
	background-color: #33ffff;
	}
	
.upcomingshowsleft a:hover {
	position: relative;
	color: #ffffff;
	}
	
.upcomingshowsright a {
	position: relative;
	font-size: 7vw;
	font-weight: 200;
	}
	
.upcomingshowsrightsmaller a {
	position: relative;
	font-size: 6.5vw;
	font-weight: 200;
	}
	
#completeinfo {
	font-size: 4.5vw;
	font-weight: 200;
	}
	
.thumbnails {
	position: relative;
	width: 100%;
	margin-top: -0.1vw;
	margin-bottom: 3vw;
	}
	
.thumbnails iframe {
	position: relative;
	width: 27.9vw;
	z-index: 3;
	}
	
.thumbnaillabel {
	display: none;
	}
	
#bioetc {
	margin-top: 5vw;
	}
	
.contactimpressumsmallerscreen {
	margin-top: 4vw;
	}
	
.contactimpressumsmallerscreen a:link {
	position: relative;
	font-weight: 200;
	font-size: 7vw;
	text-shadow: 0.2vw 0.2vw 0 #ffffff;
	line-height: 5vw;
	z-index: 3;
	}
	
.contactimpressumsmallerscreen a:hover {
	position: relative;
	font-weight: 200;
	font-size: 7vw;
	color: #ffffff;
	text-shadow: 0.2vw 0.2vw 0 #cccccc;
	z-index: 3;
	}
	
#impressumsmallerscreen {
	font-size: 5vw;
	z-index: 3;
	}
	
.flags {
	position: absolute;
	display: inline;
	padding-top: 3vw;
	padding-left: 4vw;
	z-index: 3;
	}
	
.flags br {
	display: none;
	}
	
.flags img {
	display: inline-block;
	height: 4vw;
	}
	
.language {
	height: 5.5vw;
	}
	
}

/* For tablets (portrait) */

@media only screen and (min-width: 700px) {

body {
	background-color: #003366;
	}
	
.grid {
	display: grid;
	grid-template-columns: auto 94vw auto;
	margin-top: 0;
	padding-top: 3vw;
	overflow-x: hidden;
	}
	
.centre {
	max-width: 100%;
	display: grid;
	grid-template-columns: 94vw auto;
	overflow: hidden;
	margin-bottom: 3vw;
	border-radius: 1.2vw;
	background: rgb(255,255,255);
	background: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(255,255,255,1) 37%, rgba(204,204,204,1) 61%, rgba(204,204,204,1) 100%);
	}
	
.photoinforeground {
	position: absolute;
	width: 100%;
	top: -3vw;
	right: -38vw;
	}
	
.photoinforeground img {
	width: 77%;
	z-index: 2;
	} 

.tableheaderleft {
	text-align: center;
	vertical-align: middle;
	width: 100%;
	}
	
.tableheaderleft a {
	font-weight: 600;
	font-size: 16.25vw;
	color: #ffffff;
	z-index: 3;
	line-height: 16.9vw;
	}
		
#dotcom {
	font-weight: 500;
	font-size: 16.25vw;
	color: #cccccc;
	}
	
.tableheaderright {
	display: none;
	}
	
.main {
	padding-left: 2.8vw;
	}
	
.horizontallist {
	margin-bottom: 0.2vw;
	margin-top: 2vw;
	}	
	
.horizontallist a {
	font-weight: 500;
	font-size: 5.8vw;
	text-shadow: none;
	z-index: 3;
	}
	
.horizontallist a:hover {
	text-shadow: none;
	z-index: 3;
	}
	
.horizontallist img {
	height: 6.5vw;
	}
	
#socials {
	margin-top: 0.1vw;
	}	

.arrowinbackground {
	display: none;
	}
	
.upcomingshows {
	margin-bottom: 0.5vw;
	margin-top: 1.8vw;
	}
	
.upcomingshowsleft {
	padding-bottom: 1vw;
	}

.upcomingshowsleft a {
	color: #000000;
	font-size: 5.8vw;
	text-shadow: none;
	}
	
.upcomingshowsleft a:hover {
	color: #ffffff;
	text-shadow: none;
	}
	
	
.upcomingshowsright a {
	font-size: 4vw;
	font-weight: 200;
	}
	
.upcomingshowsrightsmaller a {
	font-size: 5vw;
	font-weight: 200;
	}
	
#completeinfo {
	font-size: 3vw;
	font-weight: 300;
	}
	
.thumbnails {
	position: relative;
	width: 100%;
	margin-top: 0.3vw;
	margin-bottom: 2vw;
	}
	
.thumbnails iframe {
	position: relative;
	top: -0.75vw;
	width: 27.9vw;
	height: 35vh;
	z-index: 3;
	}
	
.thumbnaillabel {
	position: relative;
	font-size: 2.5vw;
	background-color: #a9a9a9;
	color: #ffffff;
	text-transform: none;
	top: 0vw;
	border-radius: 1.1vw;
	padding-left: 1vw;
	width: 90%;
	z-index: 4;
	}
	
.contactimpressumsmallerscreen {
	margin-bottom: 2vw;
	margin-top: 1.5vw;
	}
	
.contactimpressumsmallerscreen a:link {
	font-weight: 200;
	font-size: 4vw;
	line-height: 3vw;
	}
	
.contactimpressumsmallerscreen a:hover {
	font-weight: 200;
	font-size: 4vw;
	color: #ffffff;
	z-index: 3;
	text-shadow: 0.2vw 0.2vw 0 #cccccc;
	}
	
#impressumsmallerscreen {
	font-size: 3vw;
	}
	
.flags {
	position: absolute;
	right: 4.9vw;
	top: 22.8vw;
	}
	
.flags br {
	display: none;
	}
	
.flags img {
	width: 6vw;
	padding-bottom: 0.5vw;
	}
	
.language {
	height: 4vw;
	}
	
}

/* For desktop screens */

@media only screen and (min-width: 1008px) {

body {
	background-color: #003366;
	}
	
.nobreak {
	display: none;
	}
	
.grid {
	display: grid;
	grid-template-columns: auto 1008px auto;
	margin-top: 0;
	padding-top: 3.5vh;
	}
	
.centre {
	display: grid;
	grid-template-columns: 1008px auto;
	overflow: hidden;
	border-radius: 8px;
	background: rgb(255,255,255);
	background: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 13%, rgba(255,255,255,1) 37%, rgba(204,204,204,1) 61%, rgba(204,204,204,1) 100%);
	}
	
.main {
	padding-left: 25px;
	width: 100%;
	}
	
.photoinforeground {
	position: absolute;
	width: 100%;
	top: -110px;
	right: -530px;
	}
	
.photoinforeground img {
	position: relative;
	width: 50%;
	z-index: 3;
	} 

.tableheaderleft {
	position: relative;
	text-align: left;
	padding-left: 25px;
	vertical-align: middle;
	width: 100%;
	height: 130px;
	}
	
.tableheaderleft a {
	position: relative;
	font-weight: 600;
	font-size: 110px;
	color: #ffffff;
	z-index: 4;
	line-height: 130px;
	}
		
#dotcom {
	positiom: relative;
	z-index: 4;
	font-weight: 500;
	font-size: 110px;
	color: #cccccc;
	}
	
.tableheaderright {
	display: inherit;
	position: relative;
	height: 130px;
	text-align: right;
	right: 50px;
	top: -7px;
	z-index: 4;
	}
	
.tableheaderright a:link {
	position: relative;
	top: 35px;
	right: 150px;
	font-weight: 200;
	font-size: 30px;
	line-height: 25px;
	color: #ffffff;
	}
	
.tableheaderright a:hover {
	font-weight: 200;
	font-size: 30px;
	color: #cccccc;
	}
	
#impressum a:link {
	font-size: 20px;
	color: #ffffff;
	}
	
#impressum a:hover {
	font-size: 20px;
	color: #cccccc;
	}
	
#impressum a:visited {
	font-size: 20px;
	color: #ffffff;
	}
	
.horizontallist {
	display: inherit;
	margin-bottom: 10px;
	margin-top: 5px;
	}	
	
.horizontallist ul li {
	margin-right: 12px;
	}	
	
.horizontallist a {
	font-weight: 500;
	font-size: 40px;
	letter-spacing: 1px;
	z-index: 3;
	}
	
.horizontallist img {
	height: 50px;
	}
	
#socials {
	margin-top: -20px;
	}

.arrowinbackground {
	display: none;
	}
	
.upcomingshows {
	margin-bottom: 15px;
	margin-top: 15px;
	}
	
.upcomingshowsleft {
	padding-bottom: 10px;
	}

.upcomingshowsleft a {
	color: #000000;
	font-size: 40px;
	letter-spacing: 1px;
	}
	
.upcomingshowsleft a:hover {
	color: #ffffff;
	}
	
.upcomingshowsright {
	position: relative;
	top: -2px;
	}
	
.upcomingshowsright a {
	font-size: 30px;
	font-weight: 200;
	}
	
.upcomingshowsrightsmaller {
	position: relative;
	top: -2px;
	}
	
.upcomingshowsrightsmaller a {
	font-size: 38px;
	font-weight: 200;
	}
	
#completeinfo {
	font-size: 25px;
	font-weight: 300;
	}
	
.thumbnails {
	position: relative;
	width: 100%;
	margin-top: -17px;
	margin-bottom: 10px;
	}
	
.thumbnails li {
	margin-right: 10px;
	z-index: 3;
	float: left;
	list-style: none;
	}
	
.thumbnails iframe {
	position: relative;
	width: 317px;
	height: 125px;
	z-index: 3;
	overflow: hidden;
	}
	
.thumbnaillabel {
	position: relative;
	font-size: 22px;
	background-color: #a9a9a9;
	color: #ffffff;
	text-transform: none;
	top: 0;
	border-radius: 8px;
	padding-left: 10px;
	width: 90%;
	z-index: 4;
	}
	
#bioetc {
	margin-bottom: 25px;
	}
	
.contactimpressumsmallerscreen {
	display: none;
	}
	
.flags {
	position: relative;
	right:65px;
	top: 20px;
	z-index: 3;	
	}
	
.flags br {
	display: contents;
	}
	
.flags img {
	width: 40px;
	padding: 2px;
	opacity: 1;
	}
	
.language {
	height: 30px;
	}
	
	
}