/* @font-face {font-family: "Rollerscript";
    src: url("../fonts/Rollerscript\ W03\ Rough.eot"); 
    src: url("../fonts/Rollerscript\ W03\ Rough.eot?#iefix") format("embedded-opentype"), 
    url("../fonts/Rollerscript\ W03\ Rough.woff2") format("woff2"), 
    url("../fonts/Rollerscript\ W03\ Rough.woff") format("woff"), 
    url("../fonts/Rollerscript\ W03\ Rough.ttf") format("truetype"), 
    url("../fonts/Rollerscript\ W03\ Rough.svg#Rollerscript") format("svg"); 
} */

@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/trade-gothic-bold.woff2) format("woff2"),url(../fonts/trade-gothic-bold.woff) format("woff");font-style:normal;font-weight:700}

/* 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:"Rollerscript"; font-size:18px; background-color:#000; text-align:center; margin:0; padding:0; } */
	body { font-family: Tiempos,serif; font-size:17px; background-color:#000; text-align:center; margin:0; padding:0; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale }
	p {}
	td {}
	img { display: block; }
	a:link { color:#000000; text-decoration:none; }
	a:visited { color:#000000; text-decoration:none; }
	a:hover { color:#45436d; text-decoration:none; }
	a:active { text-decoration:none; }
	.master { position:relative; width:100%; max-width:1200px; margin:auto; overflow: hidden; }
	.CR2Master { position:relative; width:100%; max-width:1400px; margin:auto; overflow: hidden; }
	.CR1Master { position:relative; width:100%; max-width:1400px; 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; }
	.center { text-align:center; }
	.left { text-align:left; }
	.vollebreite { width:100%; }
	.padding { padding:15px; }
	.hide { display: none; }
	/* .anchor { display: block; position:absolute; transform: translateY(-25vh); visibility: hidden; } */
	.anchor { display: block; position:absolute; transform: translate(0,-25vh); -webkit-transform: translate(0,-25vh); -moz-transform: translate(0,-25vh); -ms-transform: translate(0,-25vh); -o-transform: translate(0,-25vh); visibility: hidden; } 
	/* @-moz-document url-prefix() {
		.anchor { display: block; position:relative; transform: translateY(0); visibility: hidden; }
	} */
	.versteckt { display: none; }
/**************/

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

/* header */
	#header { padding:0; }
	#LoginLink { position:absolute; top:7%; left:4%; font-size:15px; }

	#welcomeHeader { 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; }
	#headerEdge { position: absolute; bottom:0; border-style: solid; border-width: 0 100vw var(--triangle) 0; border-color: transparent transparent #FAFAFA transparent; }
	#headerContent { text-align: center; color: #FFF; font-size: 40px; }
	#headerLogo { position:relative; margin-top:2%; width:50%; max-width:250px; }

	@media (min-aspect-ratio: 16/9) {

	}

	@media (max-aspect-ratio: 16/9) {

	}

	@media only screen and (max-width:1200px) { 
		#headerBackground { height: 400px; }
		#welcomeHeader { height:400px; }
	}

	@media only screen and (max-width:992px) { 
		#headerBackground { height:350px; background-image:url('../design/HeaderBackground_Mobile.jpg'); }
		#welcomeHeader { height:350px; }
	}

	@media only screen and (max-width:768px) { 
		#welcomeHeader { height:300px; }
		#headerBackground { height: 300px; }
		#headerLogo { margin-top:5%; }
	}

	@media only screen and (max-width:576px) { 
		#welcomeHeader { height:250px; }
		#headerBackground { height: 250px; }
	}

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

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

/* main */
	#main { position: relative; background-color: #FAFAFA; }

	#CR2Main { position: relative; background-color: #FAFAFA; color:#F4D2B0; background-image:url('../design/CR2_Background.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; }
	#CR2Header { width:40%; }
	#CR2HeaderHinweise { padding-left: 80%; width:20%; }
	#CR2MainContent { padding-top: 50px; min-height: 100vh; width:90%; margin: auto; padding-bottom: 250px; font-size: 20px; }
	.CR2MainContentH1 { font-size: 25px; font-weight: bold; }
	.CR2MainContentH1 a:link { color:#F4D2B0; text-decoration:none; }
	.CR2MainContentH1 a:visited { color:#F4D2B0; text-decoration:none; }
	.CR2MainContentH1 a:hover { color:#F4D2B0; text-decoration:none; }
	.CR2MainContentH1 a:active { text-decoration:none; }
	.CR2UmschlagButton { position: relative; width:15%; padding-top: 15%; margin:2.5%; float: left; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); background-repeat:no-repeat; background-size:cover; background-position: center; z-index: 100; }
	.CR2UmschlagButtonHover { position: absolute; top:0; left:0; right:0; bottom: 0; display: none; }
	.CR2UmschlagButtonHoverText { display:flex; height:100%; width:100%; justify-content: center; align-items: center; background-color: rgba(69,37,20,0.8); text-align: center; color: #FFF; font-size: 20px; font-weight: bold; line-height: 100%; }
	.CR2HintText { position:absolute; top:50px; left:10px; right:10px; background-image:url('../design/CR2_Background_Paper.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; z-index:300; }
	.CR2HintTextClose { position:absolute; right: -10px; top:-10px; width:60px; height:60px; font-weight: bold; font-size: 35px; background-image:url('../design/CR2_Background_Paper.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; border-radius: 50%; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); cursor: pointer; }
	.CR2HintTextCloseText { display:flex; height:100%; width:100%; justify-content: center; align-items: center; }
	.CR2HintTextContent { padding:30px; padding-top:50px; min-height: 80vh; font-size: 29px; }
	.CR2HintTextH1 { font-size: 30px; font-weight: bold; }
	.CR2HintButton { width:100%; max-width:350px; min-height:45px; padding:7px; border: 1px solid #F4D2B0; font-size: 20px; color: #F4D2B0; text-transform: uppercase; text-align: center; -webkit-appearance: none; background-color: transparent; transition: transform 0.5s; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); }
	.CR2HintButton:hover { background-color: #452514; }
	#CR2DarkerBackgroundMain { position: absolute; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,0.8); z-index: 200; display: none; }

	#CR1Main { position: relative; background-color: #FAFAFA; color:#000; background-image:url('../design/CR1_Background.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; }
	#CR1Header { width:40%; }
	#CR1HeaderHinweise { padding-left: 80%; width:20%; }
	#CR1MainContent { padding-top: 50px; min-height: 100vh; width:90%; margin: auto; padding-bottom: 250px; font-size: 20px; }
	.CR1MainContentH1 { font-size: 25px; font-weight: bold; }
	.CR1MainContentH1 a:link { color:#000; text-decoration:none; }
	.CR1MainContentH1 a:visited { color:#000; text-decoration:none; }
	.CR1MainContentH1 a:hover { color:#000; text-decoration:none; }
	.CR1MainContentH1 a:active { text-decoration:none; }
	.CR1UmschlagButton { position: relative; width:15%; padding-top: 15%; margin:2.5%; float: left; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); background-repeat:no-repeat; background-size:cover; background-position: center; z-index: 100; }
	.CR1UmschlagButtonHover { position: absolute; top:0; left:0; right:0; bottom: 0; display: none; }
	.CR1UmschlagButtonHoverText { display:flex; height:100%; width:100%; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.8); text-align: center; color: #FFF; font-size: 20px; font-weight: bold; line-height: 100%; }
	.CR1HintText { position:absolute; top:50px; left:10px; right:10px; background-image:url('../design/CR1_Background_Paper.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; z-index:300; }
	.CR1HintTextClose { position:absolute; right: -10px; top:-10px; width:60px; height:60px; font-weight: bold; font-size: 35px; background-image:url('../design/CR1_Background_Paper.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; border-radius: 50%; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); cursor: pointer; }
	.CR1HintTextCloseText { display:flex; height:100%; width:100%; justify-content: center; align-items: center; color:#C31D23; }
	.CR1HintTextContent { padding:30px; padding-top:50px; min-height: 80vh; font-size: 29px; }
	.CR1HintTextH1 { font-size: 30px; font-weight: bold; }
	.CR1HintButton { width:100%; max-width:350px; min-height:45px; padding:7px; border: 1px solid #000; font-size: 20px; color: #000; text-transform: uppercase; text-align: center; -webkit-appearance: none; background-color: transparent; transition: transform 0.5s; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3); box-sizing: border-box; }
	.CR1HintButton:hover { background-color: #FFF; border-width: 2px; }
	#CR1DarkerBackgroundMain { position: absolute; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,0.8); z-index: 200; display: none; }

	@media only screen and (max-width:1444px) { 
		#CR2Header { width:55%; }
		#CR2HeaderHinweise { padding-left: 75%; width:25%; }
		#CR1Header { width:55%; }
		#CR1HeaderHinweise { padding-left: 75%; width:25%; }
	}

	@media only screen and (max-width:1500px) { 
		.CR2UmschlagButton { width:20%; padding-top:20%; }
		.CR1UmschlagButton { width:20%; padding-top:20%; }
	}

	@media only screen and (max-width:1200px) { 
		#CR2Header { width:60%; }
		#CR2HeaderHinweise { padding-left: 70%; width:30%; }
		#CR1Header { width:60%; }
		#CR1HeaderHinweise { padding-left: 70%; width:30%; }
	}

	@media only screen and (max-width:992px) { 
		.CR2UmschlagButton { width:28%; padding-top: 28%; }
		.CR2MainContentH1 { font-size: 22px; }
		.CR2HintTextContent { font-size: 25px; }
		.CR1UmschlagButton { width:28%; padding-top: 28%; }
		.CR1MainContentH1 { font-size: 22px; }
		.CR1HintTextContent { font-size: 25px; }
	}

	@media only screen and (max-width:768px) { 
		#CR2Header { width:70%; }
		#CR2HeaderHinweise { padding-left: 60%; width:40%; }
		.CR2HintTextContent { font-size: 22px; }
		#CR1Header { width:70%; }
		#CR1HeaderHinweise { padding-left: 60%; width:40%; }
		.CR1HintTextContent { font-size: 22px; }
	}

	@media only screen and (max-width:576px) { 
		#CR2Header { width:80%; }
		#CR2HeaderHinweise { padding-left: 55%; width:45%; }
		.CR2UmschlagButton { width:45%; padding-top: 45%; }
		.CR2MainContentH1 { font-size: 20px; }
		.CR2HintTextContent { font-size: 20px; }
		#CR1Header { width:80%; }
		#CR1HeaderHinweise { padding-left: 55%; width:45%; }
		.CR1UmschlagButton { width:45%; padding-top: 45%; }
		.CR1MainContentH1 { font-size: 20px; }
		.CR1HintTextContent { font-size: 20px; }
	}

	@media only screen and (max-width:445px) { 
		#CR2Header { width:90%; }
		#CR1Header { width:90%; }
	}
/********/

/* footer */
	#footer { z-index: 500; }
	#footercontainer { position: absolute; bottom:0px; left:0px; padding-left:6%; padding-bottom: 4%; color:#000; font-size: 24px; }
	#tatortcover_button { position: absolute; top:7%; right:10%; width:25%; cursor:pointer; }
	#CR2footer { position: absolute; bottom: 0; left:5%; right:5%; width: 90%; color: #FFF; }
	#CR1footer { position: absolute; bottom: 0; left:5%; right:5%; width: 90%; color: #FFF; }

	#welcomeFooter { position:relative; width:100%; min-height:220px; padding-bottom:30px; color:#FFF; background-color:#000; }
	#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; }

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

	#CR1footer a:link { color:#000; text-decoration:none; }
	#CR1footer a:visited { color:#000; text-decoration:none; }
	#CR1footer a:hover { color:#000; text-decoration:none; }
	#CR1footer a:active { text-decoration:none; }

	.footerTowColumn { float:left; width:50%; }
	.CR2footerTowColumn { float:right; width:50%; }
	.CR1footerTowColumn { float:right; width:50%; }

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

/* contentcontainer */
	#welcome { position: relative; }
	#welcomeContent { 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%; }

	#WelcomeChoiceContainer { position: relative; background-color:#FAFAFA; width:100%; box-sizing:border-box; }
	#WelcomeChoiceContainerContent { padding-bottom: 60px; }
	.WelcomeChoice { position: relative; width:95%; margin: auto; margin-top: 20px; padding-bottom: 20px; color:#000; min-height:280px; }
	.WelcomeChoice:hover { color:#FFF; }

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

	.background_container { width:100%; background-image:url('../design/Background.jpg'); background-repeat:no-repeat; background-size:cover; }
	#anleitungscontainer { position: relative; }
	#anleitungsbutton_DE { position: absolute; top:40%; left:15%; width:39%; padding-top:18%; background-color: transparent; border: none; outline:none; overflow: hidden; background-image:url('../design/anleitungsbutton_DE.png'); background-repeat:no-repeat; background-size:cover; cursor:pointer; }
	#anleitungsbutton_DE:hover { background-image:url('../design/anleitungsbutton_hover_DE.png'); background-repeat:no-repeat; background-size:cover; }
	#spielinhaltbutton_DE { position: absolute; top:5%; left:45%; width:30%; padding-top:16.5%; background-color: transparent; border: none; outline:none; overflow: hidden; background-image:url('../design/materialienbutton_DE.png'); background-repeat:no-repeat; background-size:cover; cursor:pointer; }
	#spielinhaltbutton_DE:hover { background-image:url('../design/materialienbutton_hover_DE.png'); background-repeat:no-repeat; background-size:cover; }
    #anleitungsbutton_EN { position: absolute; top:40%; left:15%; width:39%; padding-top:18%; background-color: transparent; border: none; outline:none; overflow: hidden; background-image:url('../design/anleitungsbutton_EN.png'); background-repeat:no-repeat; background-size:cover; cursor:pointer; }
	#anleitungsbutton_EN:hover { background-image:url('../design/anleitungsbutton_hover_EN.png'); background-repeat:no-repeat; background-size:cover; }
	#spielinhaltbutton_EN { position: absolute; top:5%; left:45%; width:30%; padding-top:16.5%; background-color: transparent; border: none; outline:none; overflow: hidden; background-image:url('../design/materialienbutton_EN.png'); background-repeat:no-repeat; background-size:cover; cursor:pointer; }
	#spielinhaltbutton_EN:hover { background-image:url('../design/materialienbutton_hover_EN.png'); background-repeat:no-repeat; background-size:cover; }
	
	#hinweiscontainer { position: relative; }
	#starthinweis { position: absolute; top:23%; left:4%; width:80%; text-align:left; }
	.starthinweis { width:65%; border: none; background-color:transparent; outline:none; overflow: hidden; margin-left:7%; margin-bottom:4.7%; cursor:pointer; }
	.starthinweis:hover { background-image:url('../design/landbutton_hover.png'); background-repeat:no-repeat; background-size:cover; }
	#hinweise { position: absolute; top:40%; left:4%; width:80%; }
	/* .land { width:25%; padding:0; border:none; background-color:transparent; outline:none; overflow: hidden; margin-left:8%; margin-bottom:4.5%; cursor:pointer; border: 1px solid #FFA500; } */
	.land { width:25%; padding:0; padding-top:5%; border:none; background-color:transparent; outline:none; overflow: hidden; margin-left:8%; margin-bottom:4.8%; cursor:pointer; float: left; box-sizing: border-box; }
	.land:hover { background-image:url('../design/landbutton_hover.png'); background-repeat:no-repeat; background-size:cover; }
	
	#hint_container { position: fixed; overflow: auto; z-index:1000; top:5%; bottom:5%; left:50%; transform:translateX(-50%); width:90%; max-width:1200px; text-align:left; border:7px solid #45436d; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; min-height:250px; max-height: 90%; font-size:30px; display:none; background-image:url('../design/paper.png'); background-repeat:no-repeat; background-size:cover; }
	/* #more_hints_button { margin: 20px; min-width:35%; border:4px solid #45436d; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; cursor:pointer; font-family: "Rollerscript"; background-color: transparent; outline:none; font-size:33px; } */
	/* #close_hintcontainer_button { position: relative; float:right; margin: 20px; min-width:5%; border:4px solid #45436d; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; font-family: "Rollerscript"; cursor:pointer; background-color: transparent; outline:none; overflow: hidden; font-size:33px; font-weight: bold; } */
	#hinttext_container { padding: 30px; }
	.document_link { font-size: 20px; }

	#black_background { position:fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,0.8); z-index:900; display: none; }

	#impressumContent { padding-top:40px; padding-bottom:40px; }

	#login_content_container { padding-top: 100px; padding-bottom: 100px; }

	#AudioContainer { position: relative; }
	#AudioContent { padding-top: 100px; padding-bottom: 100px; color: #FFF; }

	@media only screen and (max-width:992px) { 
		#hint_container { font-size: 26px; }
		#more_hints_button { font-size: 26px; }
		#close_hintcontainer_button { font-size: 26px; }
		.document_link { font-size: 18px; }
		#footercontainer { font-size: 22px; }
	}

	@media only screen and (max-width:768px) { 
		#hint_container { font-size: 24px; }
		#more_hints_button { font-size: 24px; }
		#close_hintcontainer_button { font-size: 24px; }
		.document_link { font-size: 16px; }
		#footercontainer { font-size: 20px; }
		#impressum_content_container { font-size: 15px; }
		#login_content_container { font-size: 15px; }
	}

	@media only screen and (max-width:576px) { 
		.threecolumn { width:100%; }
        .twocolumn { width:100%; }
        .WelcomeInfoBox {max-width:100%; }
		.WelcomeInfoBoxColumn { width:100%; }
		#hint_container { font-size: 22px; top:1%; bottom:1%; width:98%; max-height: 98%;  }
		#more_hints_button { font-size: 22px; }
		#close_hintcontainer_button { font-size: 22px; }
		.document_link { font-size: 14px; }
		#close_hintcontainer_button { margin:10px; }
		#more_hints_button { margin: 10px; }
		#impressum_content_container { font-size: 14px; }
		#login_content_container { font-size: 14px; }
	}

	@media only screen and (max-width:400px) { 
		#hint_container { font-size: 18px; }
		#more_hints_button { font-size: 18px; }
		#close_hintcontainer_button { font-size: 18px; }
		#footercontainer { font-size: 15px; }
	}
/********/

/* 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; 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_black { background-color: #000; border-color: #000; }
	a.button_black { color: #FFF; }

	.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; }
/***********/

/* Login */
	.login_field { width:90%; max-width: 200px; height:40px; background-color:#FAFAFA; border:4px solid #45436d; box-sizing: border-box; }
	.login_field:focus { outline: none; }
	.login_submit { -webkit-appearance: none; width:90%; max-width: 200px; height:40px; font-weight:bold; background-color:#FAFAFA; border:4px solid #45436d; text-align:center; text-decoration:none; -webkit-appearance: none; box-sizing: border-box; }
	.login_submit:hover { background-color:#45436d; color:#FFF; }
	.login_submit:focus { outline: none; }
/********/

/* Backstage */
	#backstage_container { background-color:#FAFAFA; font-family: Arial, Helvetica, sans-serif; padding-bottom:100px; }

	.backstage_table { width:100%; max-width:1100px; margin:auto; }
	.backstage_table td { text-align:center; vertical-align:top; }
	.backstage_table_2 { width:100%; max-width:1100px; margin:auto; }
	.backstage_table_2 td { text-align:center; vertical-align:top; }
	.backstage_table_headline { width:100%; max-width:1100px; 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 { -webkit-appearance: none; width:100%; font-family: Arial, Helvetica, sans-serif; max-width:350px; 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_submit_active { -webkit-appearance: none; width:100%; max-width:350px; height:30px; background-color:#CCCCCC; border:4px solid #45436d; text-align:center; text-decoration:none; display:inline-block; }
	.backstage_submit_active:hover { background-color:#CCCCCC; }
	.backstage_submit_active: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; }

	.preview_image { width:200px; border:1px solid #000; border-radius: 10px; margin:10px; cursor: pointer; }

	#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;  }

	.backstage_select { width:95%; height:30px; background-color:#FAFAFA; border:4px solid #CCCCCC; }

	.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; }
	}
/*************/

/* SOCIALMEDIA */

.fa {
	padding: 15px;
	font-size: 40px;
	width: 40px;
	text-align: center;
	text-decoration: none;
	margin: 5px 2px;
	border-radius: 50%;
}
a.fa { color: #FFF; }

.fa:hover {
	opacity: 0.7;
}

.fa-facebook {
	background: #3B5998;
	color: white;
}

.fa-twitter {
	background: #55ACEE;
	color: white;
}

.fa-google {
	background: #dd4b39;
	color: white;
}

.fa-linkedin {
	background: #007bb5;
	color: white;
}

.fa-youtube {
	background: #bb0000;
	color: white;
}

.fa-instagram {
	/* background: #125688; */
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);  
	color: white;
}

.fa-pinterest {
	background: #cb2027;
	color: white;
}

.fa-snapchat-ghost {
	background: #fffc00;
	color: white;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
	background: #00aff0;
	color: white;
}

.fa-android {
	background: #a4c639;
	color: white;
}

.fa-dribbble {
	background: #ea4c89;
	color: white;
}

.fa-vimeo {
	background: #45bbff;
	color: white;
}

.fa-tumblr {
	background: #2c4762;
	color: white;
}

.fa-vine {
	background: #00b489;
	color: white;
}

.fa-foursquare {
	background: #45bbff;
	color: white;
}

.fa-stumbleupon {
	background: #eb4924;
	color: white;
}

.fa-flickr {
	background: #f40083;
	color: white;
}

.fa-yahoo {
	background: #430297;
	color: white;
}

.fa-soundcloud {
	background: #ff5500;
	color: white;
}

.fa-reddit {
	background: #ff5700;
	color: white;
}

.fa-rss {
	background: #ff6600;
	color: white;
}
/**********/