@font-face{font-family:Tiempos;src:url(../fonts/TiemposTextWeb-Regular.woff2) format("woff2"),url(../fonts/TiemposTextWeb-Regular.woff) format("woff");font-style:normal;font-weight:400}
    @font-face{font-family:Tiempos;src:url(../fonts/TiemposTextWeb-RegularItalic.woff2) format("woff2"),url(../fonts/TiemposTextWeb-RegularItalic.woff) format("woff");font-style:italic;font-weight:400}
    @font-face{font-family:Tiempos;src:url(../fonts/TiemposTextWeb-Bold.woff2) format("woff2"),url(../fonts/TiemposTextWeb-Bold.woff) format("woff");font-style:normal;font-weight:700}
    @font-face{font-family:Tiempos;src:url(../fonts/TiemposTextWeb-BoldItalic.woff2) format("woff2"),url(../fonts/TiemposTextWeb-BoldItalic.woff) format("woff");font-style:italic;font-weight:700}
    @font-face{font-family:TradeGothic;src:url(../fonts/3A7407_0_0.woff2) format("woff2"),url(../fonts/3A7407_0_0.woff) format("woff");font-style:normal;font-weight:400}
    @font-face{font-family:TradeGothic;src:url(../fonts/trade-gothic-bold.woff2) format("woff2"),url(../fonts/trade-gothic-bold.woff) format("woff");font-style:normal;font-weight:700}

	@font-face {font-family:fontello;src:url(../fonts/fontello.eot?5557385);src:url(../fonts/fontello.eot?5557385#iefix) format('embedded-opentype'), url(../fonts/fontello.woff?5557385) format('woff'), url(../fonts/fontello.ttf?5557385) format('truetype'), url(../fonts/fontello.svg?5557385#fontello) format('svg');font-weight: normal;font-style: normal;}

/* Variables */	
	:root {
		--triangle: 5vW;
	}

	@media only screen and (min-width:1920px) { 
		:root {
			--triangle: 3vW;
		}
	}
	@media only screen and (min-width:2560px) { 
		:root {
			--triangle: 2vW;
		}
	}

	@keyframes anim-moema-1{60%{transform:scale3d(.8,.8,1);}85%{transform:scale3d(1.1,1.1,1);}to{transform:scaleX(1);}}
	@keyframes anim-moema-2{to{opacity:0;transform:scaleX(1)}}
/*************/

/* Allgemeines */
	body { font-family: Tiempos,serif; font-size:17px; background-color:#FAFAFA; text-align:center; margin:0; padding:0; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale }
	p {}
	td {}
	a:link { color:#000000; text-decoration:none; }
	a:visited { color:#000000; text-decoration:none; outline: none; }
	a:hover { color:#525252; text-decoration:none; outline: none; }
	a:active { text-decoration:none; outline: none; }
	a:focus { outline: none; }
	.master { position:relative; width:85%; max-width:1200px; margin:auto; overflow: hidden; } 
	.row:after { content:""; display:table; clear:both; }
	.orangertext { color:#FFA500; }
	.rotertext { color: darkred; }
	.fett { font-weight:bold; }
    .h1 { font-size:32px; }
    .h2 { font-size:26px; }
    .h3 { font-size:18px;}
	.headline { font-size:24px; }
	.headline2 { font-size:22px; }
	.center { text-align:center; }
	.left { text-align:left; }
	.vollebreite { width:100%; }
	.padding { padding:15px; }
	.anchor { display: block; position:absolute; transform: translateY(-20vh); visibility: hidden; }
/**************/

/* Schriften */
    .font_headline, .button, .headline, .headline2, .h1, .h2, .h3 { letter-spacing: -1px; }
    .font_headline, .button, .headline, .headline2, .h1, .h2, .h3, #footerText, .hint_keywords { font-family: TradeGothic,sans-serif; font-weight: 700; text-transform: uppercase; }
    .font_content { font-family: Tiempos,serif; }
/*************/

/* header */
    #header { position:relative; width:100%; height:600px; }
    #headerBackground { position: absolute; height:600px; width:100%; left:0; top:0; right:0; overflow: hidden; background-image:url('../design/HeaderBackground.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; }
    #headerVideoBackground { width:100%; height: auto; }
    #headerEdge { position: absolute; bottom:0; border-style: solid; border-width: 0 100vw var(--triangle) 0; border-color: transparent transparent #FAFAFA transparent; }
    #headerContent { text-align: left; height:100%; }
    #headerLogo { position:relative; margin-top:2%; width:50%; max-width:250px; height:100%; }
    #headerLangSelect { position: absolute; top:30px; right:0; }
    #headerLangActive { width:120px; height:50px; }
    .headerLangActiveFlagContainer { position:relative; float: right; width:40px; }
    #headerLangChoice { position: relative; display: none; width:120px; }
    .headerLangChoiceFlagContainer { position:relative; float: left; width:40px; margin-left: 20px; }
	.invisibleFlagButton { background-color: transparent; border:none; height:40px; margin:0; padding:0; cursor: pointer; }
	.invisibleFlagButton:focus { outline: none; }
	.invisibleSmallFlagButton { background-color: transparent; border:none; height:30px; margin:0; padding:0; cursor: pointer; }
	.invisibleSmallFlagButton:focus { outline: none; }

	@media (min-aspect-ratio: 16/9) {
		/* #headerVideoBackground { width:100%; height: auto; } */
	}

	@media (max-aspect-ratio: 16/9) {
		/* #headerVideoBackground { width: auto; height:100%; } */
	}

	@media only screen and (max-width:576px) { 
		#header { height:250px; }
		#headerBackground { height: 250px; }
		#headerVideoBackground { width: auto; height:100%; }
	}
	
	@media only screen and (max-width:768px) { 
		#header { height:300px; }
		#headerBackground { height: 300px; }
		#headerVideoBackground { width: auto; height:100%; }
		#headerLogo { margin-top:5%; }
	}
	
	@media only screen and (max-width:992px) { 
		#headerBackground { height:350px; background-image:url('../design/HeaderBackground_Mobile.jpg'); }
		#header { height:350px; }
	}
	
	@media only screen and (max-width:1200px) { 
		#headerBackground { height: 400px; }
		#header { height:400px; }
	}

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

	}
/**********/

/* main */
	#main { position:relative; width:100%; min-height:500px; background-color:#FAFAFA; overflow: hidden; }
/********/

/* footer */
	#footer { position:relative; width:100%; min-height:220px; padding-bottom:30px; color:#FFF; background-color:#000; z-index:200; }
	#footerEdge { position: absolute; top:0; left:0; border-style: solid; border-width: var(--triangle) 0 0 100vw; border-color: #FAFAFA transparent transparent transparent; }
	#footerContent { position: relative; padding-top:120px; }
	#footerLogo { background-image:url('../design/HiddenGamesLogo.png'); background-repeat:no-repeat; background-size:cover; width:157px; height:82px; }
	#footerText { width:100%; text-align: right; padding-top:28px; }

	#footer a:link { color:#FFF; text-decoration:none; }
	#footer a:visited { color:#FFF; text-decoration:none; }
	#footer a:hover { color:#FFF; text-decoration:none; }
	#footer a:active { text-decoration:none; }

	.footerTowColumn { float:left; width:50%; }

	@media only screen and (max-width:576px) { 
		#footer { min-height: 180px; }
		#footerContent { padding-top:60px; }
		.footerTowColumn { width:100%; }
		#footerLogo { width:105px; height:55px; }
	}
	
	@media only screen and (max-width:768px) { 

	}
	
	@media only screen and (max-width:992px) { 
		
	}
	
	@media only screen and (max-width:1200px) { 
	
	}
/**********/

/* contentcontainer */
	#welcome { position: relative; }
	#welcomeContent { padding-top:40px; padding-bottom:40px; }

	#home { position: relative; }
	#homeContent { padding-top:40px; padding-bottom:40px; }
	
	#welcomecontainer { position:relative; width:100%; background-color:#DEDEDE; color:#FFF; background-image:url('../design/Background2.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; }
	#welcomecontainerEdge { position: absolute; top:0; border-style: solid; border-width: 0 0 var(--triangle) 100vw; border-color: transparent transparent transparent #FAFAFA; }
	#welcomecontainerContent { padding-top:100px; padding-bottom:100px; }
	#welcomecontainerBottomEdge { position: absolute; bottom:0; border-style: solid; border-width: 0 100vw var(--triangle) 0; border-color: transparent transparent #FAFAFA transparent; }

	.WelcomeInfoBox { position: relative; max-width:85%; margin:auto; text-align:center; }
	.WelcomeIconBox { position: relative; margin:auto; border: 2px solid #000; border-radius: 40px; width:80px; height:80px; overflow: hidden; }
	.WelcomeIcon { width:90%; margin-top: 5px; margin-left: -4px; }
	.WelcomeInfoBoxColumn { position: relative; float: left; width:50%; }

	.twocolumn { float:left; width:50%; }

	#startcontainer { position:relative; width:100%; text-align:left; color:#000; background-color:#DEDEDE; }
	#startcontainerEdge { position: absolute; top:0; border-style: solid; border-width: 0 0 var(--triangle) 100vw; border-color: transparent transparent transparent #FAFAFA;	}
	#startcontainerBottomEdge { position: absolute; bottom:0; border-style: solid; border-width: 0 100vw var(--triangle) 0; border-color: transparent transparent #FAFAFA transparent; }
	#startcontainerContent { padding-top:100px; padding-bottom:100px; }

	#welcomeHome { position: relative; }
	#welcomeHomeContent { padding-top:40px; padding-bottom:40px; }

	.preview_image { width:200px; border:1px solid #000; border-radius: 10px; margin:10px; cursor: pointer; }
	#homeDownloadPopup { position:fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0, 0, 0, 0.8); display: none; z-index:500; }
	#homeDownloadPopupContent { background-color: rgba(255, 255, 255, 1); padding:15px; padding-top: 50px; padding-bottom: 50px; top:50%; transform: translateY(-50%); overflow-y: scroll; max-height: 100%; box-sizing: border-box; }

    #images_container { width:100%; box-sizing: border-box; }
    .images_row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; padding: 0 8px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
    .images_column { -ms-flex: 25%; /* IE10 */ flex: 25%; max-width: 25%; padding: 0 8px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
    .images_column img { margin-top: 15px; vertical-align: middle; width: 100%; border:1px solid #000; border-radius: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; cursor: pointer; }

    @media only screen and (max-width:1200px) { 
	
    }
    
    @media only screen and (max-width:992px) { 
		
	}

    @media only screen and (max-width:768px) { 
        .images_column { -ms-flex: 50%; flex: 50%; max-width: 50%; }
	}

	@media only screen and (max-width:576px) { 
		.threecolumn { width:100%; }
        .twocolumn { width:100%; }
        .WelcomeInfoBox {max-width:100%; }
		.WelcomeInfoBoxColumn { width:100%; }
	}

    @media only screen and (max-width:400px) { 
        .images_column { -ms-flex: 100%; flex: 100%; max-width: 100%; }
	}
	
/********/

/* Buttons */
	.button { display: inline-block; position: relative; margin-top:20px; min-width:160px; max-width:250px; height: 50px; padding: 0 30px;	border: 2px solid #FFA500; border-radius: 30px; outline: 0; background-color: #FFA500; color: #000; line-height: 50px; font-weight:bold; font-size:17px; font-weight: 700; text-transform: uppercase; text-align: center; -webkit-appearance: none; }
	.button:hover { transition: background-color .1s .3s,color .1s .3s;	animation: anim-moema-1 .3s forwards; }
	.button:hover:before { animation: anim-moema-2 .3s .3s forwards; }
	.button:before { box-sizing: border-box; content: ""; position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; z-index: -1; transform: scale3d(.8,.5,1); border-radius: 50px; opacity: .4;	background: inherit; }

	.button_white { background-color: #FAFAFA; }

	select { -moz-appearance: none;	-webkit-appearance: none; appearance: none; border: none; width: 100%; height: 40px; -moz-padding-start: calc(10px - 3px); padding-left: 10px; color: #000; font-size: 16px; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); border-radius: 3px; outline: none; cursor: pointer; }
	select::-ms-expand { display: none; }
	select option { color: #000; }
	select:focus::-ms-value { background-color: transparent; }
	.select-wrapper { width: 300px; position: relative; display: inline-block; }
	.select-wrapper::before { font-family: fontello; content: "\0056"; font-size: 20px;	position: absolute;	right: 15px; top: 10px;	color: #000; pointer-events: none; }

	
	.welcome_submit { -webkit-appearance: none; width:90%; max-width:270px; height:50px; margin-top:10px; font-weight:bold; font-size:18px; background-color:#FFA500; border:3px solid #FFA500; border-radius: 25px; text-align:center; text-decoration:none; display:inline-block; }
	.welcome_submit:hover { background-color: #FFA500; }
	.welcome_submit:focus { outline: none; }
	.textbox_welcome { width:90%; max-width:330px; height:50px; margin-top:10px; padding-left:15px; background-color:#FAFAFA; border:3px solid #FFA500;}
	.textbox_welcome:hover { background-color: #FFF; }
	.textbox_welcome:focus { outline: none; }

	.invisibleButton { background-color: transparent; border:none; height:30px; margin:0; padding:0; cursor: pointer; }
	.invisibleButton:focus { outline: none; }

	@media only screen and (max-width:576px) { 
		#fixedHomeButton { font-size: 12px; }
	}
/********/

/* Listen */
	ul { list-style-type: square; }
	ul li { padding-left: 25px; }

	ol li { padding-left: 25px; }
/********/

/* Login */
.login_field { width:100%; height:30px; }
.login_submit { width:100%; height:30px; font-weight:bold; font-size:18px; color:#FFF; background-color:#000; border:2px solid #FFF; text-align:center; text-decoration:none; display:inline-block; }
.login_submit:hover { background-color:#FFF; color:#000; }
.login_submit:focus { outline: none; }
/********/

/* Backstage */
	.result_part_submit_backstage { -webkit-appearance: none; width:100%; max-width:350px; height:35px; font-weight:bold; font-size:18px; background-color:#FAFAFA; border:1px solid #CCCCCC; text-align:center; text-decoration:none; display:inline-block; }
	.result_part_submit_backstage:hover { background-color:#CCCCCC; }
	.result_part_submit_backstage:focus { outline: none; }

	.result_part_submit_active_backstage { -webkit-appearance: none; width:100%; max-width:350px; height:35px; font-weight:bold; font-size:18px; color:#FFF; background-color:#FFA500; border:1px solid #FFA500; text-align:center; text-decoration:none; display:inline-block; }
	.result_part_submit_active_backstage:hover { background-color:#FAFAFA; color:#000; }
	.result_part_submit_active_backstage:focus { outline: none; }

	.backstage_table { width:100%; max-width:900px; margin:auto; }
	.backstage_table td { height:200px; text-align:center; vertical-align:top; }
	.backstage_table_2 { width:100%; max-width:900px; margin:auto; }
	.backstage_table_2 td { text-align:center; vertical-align:top; }
	.backstage_table_headline { width:100%; max-width:900px; margin:auto; }
	.backstage_table_headline td { height:50px; text-align:center; vertical-align:top; }
	.backstage_keyword_box { width:95%; height:30px; background-color:#FAFAFA; border:4px solid #CCCCCC; }
	.backstage_submit { width:100%; height:30px; background-color:#FAFAFA; border:4px solid #CCCCCC; text-align:center; text-decoration:none; display:inline-block; }
	.backstage_submit:hover { background-color:#CCCCCC; }
	.backstage_submit:focus { outline: none; }
	.backstage_textarea { width:95%; height:100%; background-color:#FAFAFA; border:4px solid #CCCCCC; }
    .backstage_textarea_2 { width:95%; resize: vertical; background-color:#FAFAFA; border:4px solid #CCCCCC; }

	#fixedBackstageMenu { position:fixed; right:20px; top:20px; bottom: 20px; text-align:right; overflow-y: auto; }
	#fixedBackstageMenu::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3); background-color: #F5F5F5; }
	#fixedBackstageMenu::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; }
	#fixedBackstageMenu::-webkit-scrollbar-thumb { background-color: #555; }
	.fixedBackstageContainer { position: relative; text-align: center; color:darkred; font-weight: bold; padding:10px; background-color:#FAFAFA; border:5px solid #CCCCCC; border-radius: 20px; margin-bottom: 10px;  }
	.fixedBackstageContainer:hover { background-color: #CCCCCC; }
	#fixedBackstageInfo { border:5px solid #FFA500; color:#000;  }

	.piechart { width:100%; height:500px; }
	.linechart { width:100%; height:700px; }

	@media only screen and (max-width:576px) { 
		#fixedBackstageMenu { right:0px; }
		.fixedBackstageContainer { font-size: 11px; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
	}
	
	@media only screen and (max-width:768px) { 

	}
	
	@media only screen and (max-width:992px) { 
		
	}
	
	@media only screen and (max-width:1200px) { 
	
	}
/*************/