@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@font-face {
  font-family: Lato;
  src: url(fonts/Lato-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: Lato;
  src: url(fonts/Lato-Bold.ttf);
  font-weight: bold;
}
/*html {
    /min-height: 100%;
}*/

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
	margin:0;
	width:100%;
	font-family: lato, helvetica, arial, sans-serif;
	font-weight:normal;
    letter-spacing: 0.02em;
	background-color: rgb(255, 255, 255);
	/*background-image:url(images/background.jpg);*/
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,235,245,1) 88%);
	background-position:center;
	background-attachment:scroll;
}

h1{
    font-size: 0.93rem;
    margin-bottom: 0.6rem;
}

h1 + p {
    margin-top: 0rem;
}


#headback{
/*	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-repeat:repeat-x;
	background-image: url(images/background_top2.png);
	background-position:top;
	background-attachment:scroll;*/
}

#bottomback{
/*	position: absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:100%;
	background-repeat:repeat-x;
	background-image: url(images/background_bottom.png);
	background-position:bottom;
	background-attachment:scroll;*/
}

.blau{
	color:#00B4FF;
}


.schattierung{
-moz-box-shadow: 2px 3px 8px #999;
-webkit-box-shadow: 2px 3px 8px #999;
box-shadow: 2px 3px,8px #999;
}
	
#fw_icon{
	position:absolute;
	top:0px;
	right:0px;
	cursor:pointer;
}

.kontaktzeile{
	vertical-align:baseline;
	width:180px;
	height:15px;
	color:#666;
	font-size:10pt;
	font-style:bold;
	text-align:left;
	word-spacing:12px;
	font-weight: 400;
	line-height:12pt;
	overflow:visible;	/*border-top:#6FC solid 2px;*/
    padding-bottom: 30px;
}

.kontaktzeile > a{
    background-position: 0px 1.5px !important;
}

.kontaktzeile > a:hover{
    background-position: 0px 3px !important;
}

#kontaktzeile.kontaktzeile_film{
	position:relative;
	top:420px;
	left:45px;
	vertical-align:baseline;
	width:180px;
	height:15px;
	color:#666;
	/*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	text-align:left;
	word-spacing:12px;
	font-weight: 400;
	line-height:12pt;
	overflow:visible;	/*border-top:#6FC solid 2px;*/
}

a.kontaktzeile{
	position:relative;
	vertical-align:text-top;
	left:5px;
	height:15px;
	width:72px;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	font-weight: 400;
	overflow:visible;
	background-image:url(images/kontakt_hg.png);
	background-position:inherit;
	background-repeat:no-repeat;
	padding-left:15px;
	vertical-align:text-bottom;
}
a.kontaktzeile:hover{
	position:relative;
	padding-left:15px;
	left:5px;
	width:72px;
	height:15px;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	font-weight: 400;
	overflow:visible;
	background-image:url(images/kontakt_hg_cg.png);
	background-position:left;
	background-repeat:no-repeat;
	padding-left:15px;
	vertical-align:text-bottom;
}

a.kontaktzeile_gf{
	position:relative;
	vertical-align:text-top;
	left:5px;
	width:72px;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	font-weight: 400;
	overflow:visible;
	background-image:url(images/kontakt_hg.png);
	background-position:inherit;
	background-repeat:no-repeat;
	padding-left:15px;
	vertical-align:text-bottom;
}
a.kontaktzeile_gf:hover{
	position:relative;
	padding-left:15px;
	left:5px;
	width:72px;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	font-weight: 400;
	overflow:visible;
	background-image:url(images/imp_hg_over.png);
	background-position:left;
	background-repeat:no-repeat;
	padding-left:15px;
	vertical-align:text-bottom;
}

a.kontaktzeile_ft{
	position:relative;
	vertical-align:text-top;
	left:5px;
	width:72px;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	font-weight: 400;
	overflow:visible;
	background-image:url(images/kontakt_hg.png);
	background-position:inherit;
	background-repeat:no-repeat;
	padding-left:15px;
	vertical-align:text-bottom;
}
a.kontaktzeile_ft:hover{
	position:relative;
	padding-left:15px;
	left:5px;
	width:72px;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	font-weight: 400;
	overflow:visible;
	background-image:url(images/kontakt_hg_ft.png);
	background-position:left;
	background-repeat:no-repeat;
	padding-left:15px;
	vertical-align:text-bottom;
}

a.kontaktzeile_fm{
	position:relative;
	vertical-align:text-top;
	left:5px;
	width:72px;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	font-weight: 400;
	overflow:visible;
	background-image:url(images/kontakt_hg.png);
	background-position:inherit;
	background-repeat:no-repeat;
	padding-left:15px;
	vertical-align:text-bottom;
}
a.kontaktzeile_fm:hover{
	position:relative;
	padding-left:15px;
	left:5px;
	width:72px;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-style:bold;
	font-weight: 400;
	overflow:visible;
	background-image:url(images/kontakt_hg_fm.png);
	background-position:left;
	background-repeat:no-repeat;
	padding-left:15px;
	vertical-align:text-bottom;
}


#hauptframe {
	position: relative;
	display:block;
	height: 600px;
	/*background-image: url(images/background.jpg);
    padding-right:50px;
		margin-top: auto;
	margin-bottom: auto;*/
	overflow:visible;
	border: 2px solid #CCC;
	border-style:dotted;
    width:100%;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
    margin-top: -5vh;
}

	
#grafikfeld {
	border:0px none #990;
	overflow: visible;
	word-wrap:break-word;
	visibility: visible;
	display: table-cell;
	height: auto;
	width: auto;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 0px;
	vertical-align: middle;
    text-align: center;
    touch-action: none; 
}

.contrast-115{
    filter: contrast(1.15);
}

/*#grafikfeld{
	position:relative;
	padding:0px;
	visibility: visible;
	top: 0px;
}*/

flash{
	border: 2px solid #3FBFFD;
}

#grafiken {
    position: relative;
    width:auto;
    float:left;
	margin-top:auto;
	margin-bottom:auto;
	/*border: 2px solid #3FBFFD;*/
	/*padding:20px;*/
}


#steuerung {
	display:block;
	clear:both;
	position:relative;
	height:30px;
	width:150px;
	border-style: none;
	border-width: 0px;
	z-index:1;
	border-top-color:#00B4FF;
	border-top:1px;
	border-style:1px;
	left: 570px;
	bottom:-10px;
	font-weight:bold !important;
	line-height:15px !important;
}
#steuerung.film {
	bottom:-25px;
    margin-top: 1.5rem;
}

#foto_ {
    position: absolute;
    left: 151px;
    top: 124px;
    width: 109px;
    height: 72px;
}

#film_ {
    position: absolute;
    left: 260px;
    top: 124px;
    width: 95px;
    height: 72px;
}

#id3d-grafik_ {
    position: absolute;
    left: 355px;
    top: 124px;
    width: 223px;
    height: 72px;
}

/*#mainnavi {
    position: absolute;
    left: 45px;
    top: 40px;
    width: 200px;
    height: 68px;
}*/

/* Mainnavi */
#mainnavi {
    position: absolute;
    left: 45px;
    top: 40px;
    width: 200px;
    height: 68px;
}
.tabgroup{
    display: flex;
}
.portfolio-type{
    position: absolute;
    top: 0px;
    left: 0px;
    width:200px;
    height: 43px;
    background-image:url(images/portfolio-menu-mini.svg);
    background-position: 0 0;
    opacity: 0.65;
}
.colortab {
    position: relative;
    top: 43px;
    left:0;
    display: block;
    cursor: pointer;
    height: 25px;
    background-image:url(images/portfolio-menu-mini.svg);
    background-position-y: -43px;
    /*border: solid 1px red;*/
    /*mix-blend-mode: darken;*/
}
.tabsongrey .colortab{
    mix-blend-mode: normal;
}
.tabgroup a:nth-child(3):hover, .tabgroup a:nth-child(3).markcolored {
    mix-blend-mode: multiply;
}
.tabgroup.tabsongrey a:nth-child(3):hover, .tabgroup.tabsongrey a:nth-child(3).markcolored {
    mix-blend-mode: normal;
}
.colortab.grafiktab {
    width: 52px;
    background-position-x: 0px;
}
.colortab.fototab {
    width: 37px;
    background-position-x: -52px;
}
.colortab.filmtab {
    width: 34px;
    background-position-x: -89px;
}
.colortab.cgrafiktab {
    width: 76px;
    background-position-x: -123px;
}
.colortab:hover, .colortab:active, .colortab.markcolored{
    background-image:url(images/portfolio-menu-mini-colored.svg);
}
/* END Mainnavi */

#grafik-mini_ {
    position: absolute;
    left: 0px;
    top: 43px;
    width: 52px;
    height: 25px;
}

#foto-mini_ {
    position: absolute;
    left: 52px;
    top: 43px;
    width: 37px;
    height: 25px;
}

#film-mini_ {
    position: absolute;
    left: 89px;
    top: 43px;
    width: 33px;
    height: 25px;
}
#film_mini{
    filter: brightness(0.94) drop-shadow(0px 0px 4px #fff);
}

#id3d-grafik-mini_ {
    position: absolute;
    left: 122px;
    top: 43px;
    width: 78px;
    height: 25px;
}

#grafik_logo {
    margin-top:5px;
}

#grafiknavi {
	position: absolute;
	left: 44px;
	top: 180px;
	right: 1084px;
	width: 197px;
	bottom: 224px;
	height: 240px;
	font-size: 11 pt;
	font-weight:bold ;
	color: rgb(240, 240, 240);
	text-decoration: none;
	vertical-align:baseline;
    line-height: 13px;
/*	font-family: helvetica, arial, sans-serif;*/
}




.grafiklink {
	font-size: 10pt;
	margin-bottom: 5px;
	width: 190px;
	height: 14px;
	position: relative;
	background-color:black;
	background-color: rgb(0, 180, 255);/*Fallback*/
	/*background-color: rgba(0, 180, 255, 0.789062);*/
    visibility: visible;
	top: 3px;
	left: 0px;
	padding: 5px 8px;
	opacity: 0.8;
	filter:alpha(opacity=80);
	-moz-opacity:1;
	-khtml-opacity:1;
	cursor:pointer;
	background-image: url(images/link_verlauf.png);
}
/*
.grafiklink:hover {
	cursor: pointer;
    margin-bottom: 5px;
    width: 175px;
    height: 14px;
    position: relative;
    background-color: rgb(0, 180, 255);
    background-color: rgba(0, 180, 255, 0.796875);
    visibility: visible;
    top: 3px;
    left: 0px;
    padding: 5px;
}

.grafiklink:active {
    margin-bottom: 5px;
    width: 175px;
    height: 14px;
    position: relative;
    background-color: rgb(0, 180, 255);
    visibility: visible;
    top: 3px;
    left: 15px;
    padding: 5px;
    cursor: pointer;
}

.grafiklink:visited {
    margin-bottom: 5px;
    width: 180px;
    height: 14px;
    position: relative;
    background-color: rgb(0, 180, 255);
    visibility: visible;
    top: 241px;
    left: 30px;
    padding: 5px;
}
*/
a {
    font-size: 11pt;
    font-weight: 900;
    /*font-family: helvetica, arial, sans-serif;*/
    color: rgb(255, 255, 255);
    text-decoration: none;
    cursor:pointer;
}

    
a:hover {
    font-weight: 900;
    /*font-family: helvetica, arial, sans-serif;*/
    color: rgb(255, 255, 255);
}


/*Aktive Button  Marker*/
/*
.markCurrentSection:after{
    display: inline-block;
    position: absolute;
    font-family: fontAwesome;
    content: "";
    width:10px;
    height: 100%;
    background: white;
    opacity: 0.5;
    top:0px;
    right: 0px;
}
.markCurrentSection{
    text-align:  right;
    width:  89%;
    padding-right: 23px;
}
*/
.markCurrentSection{
    text-align:  right;
    left:6px !important;
    padding-right: 12px;
}
.filmlink:hover, .fotolink:hover, .grafiklink:hover, .cglink:hover{
    left:6px !important;
    cursor: pointer;
}

.durchsicht {
    opacity: 0.8;
        filter:alpha(opacity=80);
        -moz-opacity:0.8;
        -khtml-opacity:0.8;

}

#id3d_grafik_mini {
    width: 78px;
    margin-right: 0px;
    min-height: 0px;
    -webkit-margin-top-collapse: collapse;
    -webkit-margin-bottom-collapse: collapse;
    margin-top: 0px;
}

.linkliste {
}

#grafik_logo {
    top: 93px;
    left: 0px;;
    -webkit-margin-top-collapse: separate;
    -webkit-margin-bottom-collapse: separate;
    margin-left: 0px;
    margin-top: 18px;
    opacity: 0.85;
        filter:alpha(opacity=85);
        -moz-opacity:0.85;
        -khtml-opacity:0.85;
}

#DC_img {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 0px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

#vor_btn {
	font-size: 10pt; /* The Fallback */
	/*font-family: helvetica, arial, sans-serif;*/
	color: rgb(255, 255, 255);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	position: absolute;
	right:0px;
	bottom: 0px;
	opacity: 0.8;
	filter:alpha(opacity=85);
	-moz-opacity:0.85;
	-khtml-opacity:0.85;
	height: 24px;
	width: 61px;
	background-image: url(images/steuerung_verlauf.png);
    background-size: auto 24px;
	background-color: rgb(0, 180, 255);
    display: flex;
}


#vor_btn:active{
         background-color: rgb(0, 150, 230);
}




#zurueck_btn {
	font-size: 11pt;
    /*font-family: helvetica, arial, sans-serif;*/
/*	line-height:15px;
*/	color: rgb(255, 255, 255);
	background-color:rgb(0, 180, 255);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	position: absolute;
	left: -1px;
	right: auto;
	bottom: 0px;
	font-size: 10pt;
	height: 24px;
	width: 81px;
	text-shadow: none;
	opacity: 0.9;
	filter:alpha(opacity=90);
	-moz-opacity:0,9;
	-khtml-opacity:0,9;
	background-image: url(images/steuerung_verlauf.png);
    background-size: auto 24px;
    display: flex;

}

#zurueck_btn:active {
         background-color: rgb(0, 150, 230);

}



#info_txt{
	text-align:left;
	/*font-size: 10pt;*/
    font-size: 0.875rem;
	font-weight:normal;
	color:#666;
	letter-spacing:0.2pt;
    /*font-family: helvetica, arial, sans-serif;*/
	line-height:1.42;
	display: table-cell;
	height: auto;
	width: 140px;
	border: thin none #693;
	top: 0px;
	vertical-align: middle;
	position: relative;
	padding-left: 25px;
	overflow: visible;
	padding-right: 0px;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
}

#info_link{
    display:block;
    font-size: 10pt;
    font-weight: 500;
    /*font-family: helvetica, arial, sans-serif;*/
    position:relative;
    text-decoration:underline;
    cursor:pointer;
	color:#00B4FF;
}



#info_txt.br{
    /*float:right;*/
    color: rgb(0, 180, 255);
    font-size: 10pt;
    font-weight: 700;
    /*font-family: helvetica, arial, sans-serif;*/
    position:absolute;
    padding-top:auto;
    padding-bottom:auto;
    right:-200px;
    width:150px;
    line-height:1.2
}

.arbeitsmittel{
		color:#00B4FF;	
}

.arbeitsmittel_cg{
		color:#00E4B5;
}

.arbeitsmittel_film{
	font-size:10pt;
	font-weight:600;
	color:#eebe05;
    text-shadow: 1px 1px 10px white;
/*	background-color:rgba(255,255,255,0.2);*/
	padding-right:5px;
}

b{	
	display:inline-block;
	letter-spacing:0.3 pt;
	line-height:normal;
	white-space:nowrap;
	margin-bottom:8px;
}


.warnung{
         color:red;
         font-size:14pt;
		 font-weight:400;
		 margin-left:auto;
		 margin-right:auto;
}

.Vcenter{
    margin:auto;
}


/*Kategorieabhängige Stile*/
/*foto*/
.fotolink{
	font-size:10pt;
    margin-bottom: 5px;
    width: 190px;
    height: 14px;
    position: relative;
    background-color:black;
    background-color: #ff00ff;/*Fallback*/
    /*background-color: rgba(0, 180, 255, 0.789062);*/
    visibility: visible;
    top: 3px;
    left: 0px;
    padding: 5px;
    opacity: 0.78;
        filter:alpha(opacity=80);
        -moz-opacity:0.8;
        -khtml-opacity:0.8;
	background-image: url(images/link_verlauf.png);

}
/*
.fotolink:hover {
    margin-bottom: 5px;
    width: 175px;
    height: 14px;
    position: relative;
    background-color: #ff00ff;
    visibility: visible;
    top: 3px;
    left: 0px;
    padding: 5px;
    cursor: pointer;
	opacity:0.8;
}

.fotolink:active {
    margin-bottom: 5px;
    width: 175px;
    height: 14px;
    position: relative;
    background-color: #ff00ff;
    visibility: visible;
    top: 3px;
    left: 15px;
    padding: 5px;
    cursor: pointer;
}

.fotolink:visited {
    margin-bottom: 5px;
    width: 175px;
    height: 14px;
    position: relative;
    background-color: #ff00ff;
    visibility: visible;
    top: 241px;
    left: 30px;
    padding: 5px;
}
*/
	
#hauptframe.fotorahmen{
		border-color:#CCC;
}Frahmen

.fotoBt{
	background-color:ff00ff;
}


#vor_btn.fotoBt{
	background-color:#ff00ff;
}
#vor_btn.fotoBt:hover{
	background-color:#ff00ff;
}
#vor_btn.fotoBt:active{
	background-color:#F09;
}

#zurueck_btn.fotoBt{
	background-color:#ff00ff;
}
#zurueck_btn.fotoBt:hover{
	background-color:#ff00ff;
}
#zurueck_btn.fotoBt:active{
	background-color:#F09;
}

#info_txt.foto{
	color:#666;
}

/*film*/
.filmlink{
	color:#FFF;
	/*-webkit-text-stroke: 1px #000; stroke color and weight */
	font-size:10pt;
	text-shadow: 1px 1px 1px #CCC;
	text-decoration: none;
	margin-bottom: 5px;
	width: 190px;
	height: 14px;
	position: relative;
	background-color:black;
	background-color: #ffeb00;/*Fallback*/
	visibility: visible;
	top: 3px;
	left: 0px;
	padding: 5px;
	opacity: 0.8;
	filter:alpha(opacity=95);
	-moz-opacity:0.95;
	-khtml-opacity:0.95;
	background-image: url(images/link_verlauf.png);
	}
/*
.filmlink:hover {
    margin-bottom: 5px;
    width: 175px;
    height: 14px;
    position: relative;
    background-color: #FC0;
    visibility: visible;
    top: 3px;
    left: 0px;
    padding: 5px;
    cursor: pointer;
}

.filmlink:active {
    margin-bottom: 5px;
    width: 175px;
    height: 14px;
    position: relative;
    background-color: #FC0;
    visibility: visible;
    top: 3px;
    left: 15px;
    padding: 5px;
    cursor: pointer;
}

.filmlink:visited {
    margin-bottom: 5px;
    width: 175px;
    height: 14px;
    position: relative;
    background-color: #FC0;
    visibility: visible;
    top: 241px;
    left: 30px;
    padding: 5px;
}
*/	


#vor_btn.filmBt{
	background-color:#ffeb00;
	text-shadow: 1px 1px 1px #CCC;
	cursor:pointer;
}
#vor_btn.filmBt:hover{
	background-color:#FC0;
	cursor:pointer;

}
#vor_btn.filmBt:active{
	background-color:#FC0;
	cursor:pointer;
}

#zurueck_btn.filmBt{
	background-color:#ffeb00;
	text-shadow: 1px 1px 1px #CCC;
	cursor:pointer;
}

#zurueck_btn.filmBt:hover{
	background-color: #FC0;
}
#zurueck_btn.filmBt:active{
	background-color: #FC0;
}

#info_txt.film{
	vertical-align: top;
	width :145px;
}
#hauptframe.film{
	border-color: #CCC;
	height: 550px;
    margin-bottom: 32px;
}
#leinwand.film{
	left:290px;
	bottom: 50px;
	display: table-cell;
}
#grafikfeld.film{
	/*border: solid 4px #ffeb00;*/
	overflow: hidden;
	vertical-align: baseline;
	padding-bottom: 20px;
	
}

#grafiknavi.film{
	bottom:245px;
}


/*3d Grafik*/
/*film*/
.cglink{
	font-size:10pt;
	color: rgb(255, 255, 255);
	text-decoration: none;
	margin-bottom: 5px;
	width: 190px;
	height: 14px;
	position: relative;
	background-color:black;
	background-color: #00ffcc;/*Fallback*/
	visibility: visible;
	top: 3px;
	left: 0px;
	padding: 5px;
	opacity: 0.78;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	background-image: url(images/link_verlauf.png);

}
/*
.cglink:hover {
    margin-bottom: 5px;
    width: 170px;
    height: 14px;
    position: relative;
    background-color: #00ffcc;
    visibility: visible;
    top: 3px;
    left: 0px;
    padding: 5px;
    cursor: pointer;
}

.cglink:active {
    margin-bottom: 5px;
    width: 180px;
    height: 14px;
    position: relative;
    background-color: #00ffcc;
    visibility: visible;
    top: 3px;
    left: 15px;
    padding: 5px;
    cursor: pointer;
}

.cglink:visited {
    margin-bottom: 5px;
    width: 180px;
    height: 14px;
    position: relative;
    background-color: #00ffcc;
    visibility: visible;
    top: 241px;
    left: 30px;
    padding: 5px;
}
*/
	


#vor_btn.cg{
	background-color:#00ffcc;
}
#vor_btn.cg:hover{
	background-color:#00ffcc;
}
#vor_btn.cg:active{
	background-color:#00ffcc;
}

#zurueck_btn.cg{
	background-color:#00ffcc;
}

#zurueck_btn.cg:hover{
	background-color:#00ffcc;
}
#zurueck_btn.cg:active{
	background-color:#00ffcc;
}

#info_txt.cg{
	color:#666;
}
#hauptframe.cg{
	border-color:#CCC;
	height:610px;
}
/*#leinwand.cg{
	overflow:visible;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
*/
#grafikfeld.cg{
	/*border: solid 4px #00ffcc;*/
	overflow:hidden;
	background-color:#00ffcc;
	height:inherit;
}

#grafiknavi.cg{
	bottom:45px;
}

img[src="Inhalte/Grafikdesign/19.png"] {
    mix-blend-mode: darken;
}

div.kaestchen{
	heigth:20px;
	width:10px;
	background-color:#666;
	height: 10px;	
}

#hauptframe.imp{
	border:solid 2px #CCC;
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	
}

.imp{
	color:#666;
    /*font-family: helvetica, arial, sans-serif;*/
	font-size:10pt;
	font-weight:200;
	width:300px;
	word-spacing:normal;
}
a.imp:hover{
	color:#39F;
	font-weight:200;
}

#showcase{
	position:absolute;
	top:0px;
	margin-left:auto;
	margin-right:auto;
	padding-left:auto;
	padding-right:auto;
	visibility:hidden;
	z-index:3;
	width: auto;
}

#showcasePrgHeft{
	display:none;
	position:absolute;
	top:0px;
	margin-left:auto;
	margin-right:auto;
	padding-left:auto;
	padding-right:auto;
	padding-top:0px;
	visibility:hidden;
	z-index:3;
	width: 1200px;
	height:500px;
	background-image: url(images/background.jpg);

}

#schliessBt{
	position:relative;
	top:10px;
	font-size: 10pt;
	font-weight: 200;
    /*font-family: helvetica, arial, sans-serif;*/
	font-weight: 800;
	color:rgb(0, 180, 255);
	cursor:pointer;
	z-index:6;
}

.fahne {
	position:relative;
	padding: 5px;
	height: 50px;
	width: 200px;
	left: 0px;
	top: 200px;
	background-color:#0CF;
}
#varscreen {
	display: block;
	height: 510px;
/*	width: 950px;*/
    width: 100%;
    max-width: 950px;
	overflow: visible;
	position: relative;
	left: 250px;
	top: 20px;
	margin: 0px;
	padding-left: 5px;
	padding-right: 5px;
}

#varscreen.film{
	position:relative;
	vertical-align:top;
	top:35px;
	display:block;
	height:420px;
	border:none 0px black;
}

@media all and (min-width:960px){
    #varscreen.technik{
        top:-18px;
        height:420px;
        border:none 0px black;
    }
}

#varscreen.storyboard{
	top:60px;
	height:420px;
	border:none 0px black;
}

#varinhalt {
	border: none;
	position: relative;
	height: 510px;
	width:auto;
	clear: none;
	float: none;
	top: 0px;
	display:table;
	white-space: normal;
	overflow: auto;
	margin: auto;
}

footer{
    position: absolute;
    top:450px;
    left:44px;
}
footer.film{
    top:400px;
}
#wortmarke {
	position: relative;
	/*left: 49px;
	top: 510px;*/
}
#wortmarke_film {
	position: relative;
    margin-top: 0px;
}

/*Buttons*/
.stdBtn {
/*
    background: rgb(50,175,228);
    background: linear-gradient(0deg, rgba(40,155,210,1) 0%, rgba(0,182,255,1) 52%, rgba(86,205,255,1) 100%);
    opacity: 0.85;
*/
/*    height: 15px;
     line-height: 15px;*/
    font-size:10pt;
    font-weight: bold !important;
    margin: 1em;
    width: auto;
    padding-left: 1.5em;
    padding-right: 1.5em;
    line-height: 17px;
/*    color: white;*/
    text-align: center;
    cursor: pointer;
    display: inline-block;
    color: rgba(0,182,255,1);
    border: 0px solid rgba(0,182,255,1);
    height:17px;
    font-weight: 600 !important;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */  
}
.cg .stdBtn {
    color:#00ffcc;
}
.film .stdBtn {
   color:#F2DB1D;
   text-shadow: 1px 1px 10px white;
}
.stdShade{
    -webkit-box-shadow: 0px 3px 6px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 3px 6px 0px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 3px 6px 0px rgba(50, 50, 50, 0.5);
}

/*Video Back and forth*/
.videoscreen{
    max-width: 660px;
    text-align: center;
    overflow: hidden;
    margin:0px !important;
    padding: 0px;
}
.videoscreen video{
    width: 100%;
    border:none;
    background-color: transparent !important; 
    margin:-1px !important;
    margin-bottom: -4px !important;
}
.videoscreen.portrait{
    max-height: 410px;
    width: auto;
}
.videoscreen.portrait video{
    max-height: 410px;
    width: auto;
}
/* zentriere Mainnavi  unter 400px  */

@media all and (min-width:960px) and (max-width: 1204px){
    #hauptframe{
        /*transform: scale(calc(950 / 1204));
        transform-origin: 50% 50%;*/
          position: absolute;
          transform: translate(-50%, -50%) scale(calc(950 / 1204));
          transform-origin: center;
    }
    
}

/*@media all and (min-width:960px) and (max-width: 1024px){
    #hauptframe{
        border:none;
        top: 0px !important;
    }
}*/
/*.kontaktzeile.visible-xs{
    display: none;
}*/
/* zentriere Mainnavi  unter 400px  */
@media all and (max-width: 959px){
    body{
        display: block;
    }
    #hauptframe{
        box-sizing: border-box;
        top: 0px;
        width:100%;
        height: auto;
        margin: 0px;
        border:none;
        top: 0px !important;
    }
    #fw_icon{
        position: fixed;
        top:0;
        right:0;
    }
    #grafikfeld.film{
        overflow: visible;
    }
    #mainnavi {
        display: block;
        position: relative;
        left: auto;
        top: 0.09;
        width: 200px;
        height: 68px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8vw;
    }
    #varscreen, #varscreen.film, #varscreen.storyboard {
        box-sizing: border-box;
        max-width: 100%;
        left: auto;
        margin:0px;
        height:60vh;
        top:38px;
        margin: auto;
    }
    #varinhalt{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        top: auto;bottom: auto;
        left: auto;
        right: auto;
        margin: auto;
        max-width: 100%;
        height: auto;
        max-height: 58vh;
        padding: 5vw;
        padding-bottom:20px;
        overflow: hidden;
        overflow-y: scroll;
        text-align: center;
        height: 100%;
        -webkit-mask-image: linear-gradient(180deg, black 88%, transparent);  
    }
    
   #grafikfeld > *, #grafikfeld > div > *, #grafikfeld > div > video {
        max-height: 42vh;
    }
    
    #grafikfeld iframe{
        max-height:none;
    }
    /*
    #varinhalt:after{
        display: block;
        width:100%;
        height:10px;
        background: white;
        content: "";
        z-index: 33;
        position: sticky;
        bottom: -20px;
    }
*/
    #grafikfeld,  #grafikfeld img, #grafikfeld video {
/*        display: block;*/
        display:inline-block;
/*        width: 100%;*/
        margin: auto;
        padding-right: 0px;
    }


    .videoscreen video{
        max-width: 100%;
    }
    .videoscreen{
        display: inline-block;
    }
    
    #grafiken{
        max-width: 100%;
    }
    #info_txt, #info_txt.film{
        box-sizing: border-box;
        display: block;
        max-width: 90%;
        top:20px;
        width: 100%;
        max-width: 100%;
        padding-left: 0px;
        font-size: 0.8rem;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 2.2em;
    }
    #info_txt br:nth-last-child(-n+3) {
        display: none;
    }
    body.foto #info_txt br:nth-last-child(-n+3), body.cg #info_txt br:nth-last-child(-n) {
        display: inline;
    }
    /*#info_link{
        left:60px
    }*/

    #grafiknavi{
       display: none;   
    }
    footer.film{
        top: auto;
    }
    #wortmarke, #wortmarke_film{
        display: none;
    }
    #steuerung{
        left: auto;
        margin: 30px auto 10px auto;
    }
    #steuerung.film{
        bottom:15px;
    }
    .kontaktzeile, #kontaktzeile_film, .kontaktzeile.kontakt br{
        position: relative;
        width:80px;
        margin:auto;
        display: none;
    }
/*    .kontaktzeile.visible-xs{
        display: block;
        top:20px;
        left:auto;
        margin: auto;
    }*/
    iframe{
        width: 600px !important;
        transform: scale(0.5);
        overflow: visible;
        left:0px;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .stdBtn{
        display: block;
    }
    #hauptframe.imp{
	border:none;
    }
    footer{
        position: relative;
        top: auto;
        left: auto;
        margin-top: 40px;
    }
    .kontaktzeile > a{
        margin-bottom: 0.5rem;
    }
}

@media screen and (min-resolution: 120dpi), screen and (-webkit-min-device-pixel-ratio:2), screen and (min-resolution: 2dppx){
    body{ 
        /*background-size: 480px auto !important;*/
        //background-size: auto auto !important;
    }
}