@charset "utf-8";

/* CSS Document */
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; } /* End hide from IE-mac */

.clearfix:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

html, body
{
	padding: 0px;
	height: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('../fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}


body
{ background-color: #F3F3F3; font-family: 'Lato', Arial, sans-serif; color: #666666; font-size: 0.9em; line-height: 1.4; text-align: center; margin: 0px; padding: 0px; text-transform: lowercase; }

/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl
{
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p
{
	margin: 0;
	padding: 0px;
}

a img { border: none; }

a:link
{
	color: #4b5457;
	text-decoration: underline;
}

a:hover, a:active, a:focus
{
	text-decoration: underline;
	color: #4b5457;
	font-weight: normal;
}

.aktiv
{
	color: #4b5457;
	font-weight: normal;
	text-decoration: underline;
}

#wrapper { }

#container
{
	width: 917px;
	background-color: #F3F3F3;
	margin: 0 auto;
}

#nav
{
	padding: 10px 0 10px 5px;
	text-align: center;
}

#nav ul li
{
	list-style: none;
	display: inline;
	margin-right: 9px;
}

#nav a:link
{
	color: #4b5457;
	text-decoration: none;
}

#nav a:hover, a:active, a:focus
{
	text-decoration: none;
	color: #ED202C;
	font-weight: 600;
}

#nav .aktiv
{
	color: #ED202C;
	font-weight: 600;
	text-decoration: none;
}

#content
{
	width: 917px;
	min-height: 520px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	text-align: center;
}

#content-home
{
	width: 917px;
	min-height: 390px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	text-align: center;
}

#content-home a:link
{
	color: #4b5457;
	text-decoration: none;
}

#content-home a:hover, a:active, a:focus
{
	text-decoration: none;
	color: #ED202C;
	font-weight: 600;
}

#content-home .aktiv
{
	color: #ED202C;
	font-weight: 600;
	text-decoration: none;
}

#stefan
{
	width: 431px;
	float: left;
}

#bild-gr
{
	width: 917px;
	height: 512px;
}

.angif1 {padding: 3px; float: left;}
.angif2 {padding: 100px 3px 3px 3px; float: left;}
.angif3 {padding: 150px 3px 3px 3px; float: left;}

#textanimiertegrafik1{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#text_home
{ width: 500px; height: 180px; margin-left: auto; margin-right: auto; margin-top: 30px; 
}

.backgr { background: #fff; }

#text
{
	width: 917px;
	height: 52px;
}

#text a:link
{
	color: #4b5457;
	text-decoration: underline;
}

#text a:hover, #text a:active, #text a:focus
{
	text-decoration: underline;
	color: #4b5457;
}

#text .aktiv
{
	color: #4b5457;
	text-decoration: underline;
}

#adresse { text-align: right; }

#adresse a:link, #impressum a:link
{
	color: #4b5457;
	text-decoration: underline;
}

#adresse a:hover, #impressum a:hover, #adresse a:active, #impressum a:active, #adresse a:focus, #impressum a:focus
{
	text-decoration: underline;
	color: #4b5457;
	font-weight: normal;
}

#adresse .aktiv, #impressum .aktiv
{
	color: #4b5457;
	text-decoration: underline;
}

#impressum
{
	width: 430px;
	text-align: left;
	float: right;
	text-transform: lowercase;
	font-size: 0.8em;
}

#bild_kl
{
	width: 917px;
	height: 86px;
	padding-top: 58px;
}

.img_kl { margin-right: 4px; }

/* ~~ home-seite ~~ */
.home-img { margin-top: 109px; }

#box1
{
	height: 380px;
	width: 109px;
	margin-left: 80px;
	float: left;
}

#home-corpdesign
{
	height: 218px;
	width: 109px;
}

#home-expo
{
	height: 163px;
	width: 109px;
}

#box2
{
	height: 380px;
	width: 109px;
	float: left;
}

#box3
{
	height: 380px;
	width: 109px;
	float: left;
}

#home-print
{
	height: 218px;
	width: 109px;
}

#home-merchandising
{
	height: 163px;
	width: 109px;
}

#box4
{
	height: 380px;
	width: 109px;
	float: left;
}

#box5
{
	height: 218px;
	width: 109px;
	float: left;
}

#home-fotografie
{
	height: 163px;
	width: 109px;
}

#home-anzeigen
{
	height: 218px;
	width: 109px;
}

#box6
{
	height: 380px;
	width: 109px;
	float: left;
}

#box7
{
	height: 218px;
	width: 109px;
	float: left;
}

#home-webdesign
{
	height: 218px;
	width: 109px;
}

#home-kreativesallerlei
{
	height: 163px;
	width: 109px;
}

/* ~~ webdesign ~~ */
#feld_a1
{
	height: 123px;
	width: 150px;
	float: left;
	margin-left: 80px;
}

#feld_a2
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_a3
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_a4
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_a5
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_b1
{
	height: 123px;
	width: 150px;
	float: left;
	margin-left: 80px;
}

#feld_b2
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_b3
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_b4
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_b5
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_c1
{
	height: 123px;
	width: 150px;
	float: left;
	margin-left: 80px;
}

#feld_c2
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_c3
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_c4
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_c5
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_d1
{
	height: 123px;
	width: 150px;
	float: left;
	margin-left: 80px;
}

#feld_d2
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_d3
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_d4
{
	height: 123px;
	width: 150px;
	float: left;
}

#feld_d5
{
	height: 123px;
	width: 150px;
	float: left;
}

.webdesign-img { margin-top: 0px; }

/* ~~ corpdesign ~~ */
#mtklinik, #zaeflonheim, #hsf, #webstrategy, #lelefant, #stoffers, #epn, #compass, #mehr, #nochmehr { cursor: pointer; }

#textmtp, #textzaeflo, #texthsf, #textwebstrategy, #textlelefant, #textstoffers, #textepn, #textcompass, #textmehr, #textnochmehr
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textzaeflo, #texthsf, #textwebstrategy, #textlelefant, #textstoffers, #textepn, #textcompass, #textmehr, #textnochmehr { visibility: hidden; }

/* ~~ print ~~ */
#perspektiven, #bauorden, #hahner, #dvwg, #uniwh, #thomascook, #mehr { cursor: pointer; }

#textperspektiven, #textbauorden, #texthahner, #textdvwg, #textuniwh, #textthomascook, #textmehr
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textbauorden, #texthahner, #textdvwg, #textuniwh, #textthomascook, #textmehr { visibility: hidden; }

/* ~~ anzeigen ~~ */
#leedrittel, #leetitel, #leeganz, #leemikro, #teroson, #stoffers, #lelef, #medizin, #silberklang { cursor: pointer; }

#textleedrittel, #textleetitel, #textleeganz, #textleemikro, #textteroson, #textstoffers, #textlelef, #textmedizin, #textsilberklang
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textleetitel, #textleeganz, #textleemikro, #textteroson, #textstoffers, #textlelef, #textmedizin, #textsilberklang { visibility: hidden; }

/* ~~ illustration ~~ */
#olymp, #vortragfn, #mtv, #eventberlin, #maerchen, #krabbelstube, #airbrush { cursor: pointer; }

#textolymp, #textvortragfn, #textmtv, #texteventberlin, #textmaerchen, #textkrabbelstube, #textairbrush
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textvortragfn, #textmtv, #texteventberlin, #textmaerchen, #textkrabbelstube, #textairbrush { visibility: hidden; }

/* ~~ computergrafik ~~ */
#vssdigitale, #vsscompass, #mtprivat, #dvwgpfeile, #ui, #dav, #fahrradparkhaus, #compmehr{ cursor: pointer; }

#textvssdigitale, #textvsscompass, #textmtprivat, #textdvwgpfeile, #textui, #textdav, #textfahrradparkhaus, #textcompmehr
{
	width: 917px;
	height: 60px;
	position: absolute;
	line-height: 14px;
}

#textvsscompass, #textmtprivat, #textdvwgpfeile, #textui, #textdav, #textfahrradparkhaus, #textcompmehr { visibility: hidden; }

/* ~~ cartoon ~~ */
#atex, #atm, #stoffer, #computerlexikon, #cartoonmehr, #cartoonnochmehr, #fussball { cursor: pointer; }

#textatex, #textatm, #textstoffer, #textcomputerlexikon, #textcartoonmehr, #textcartoonnochmehr, #textfussball
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textatm, #textstoffer, #textcomputerlexikon, #textcartoonmehr, #textcartoonnochmehr, #textfussball { visibility: hidden; }

/* ~~ expo ~~ */
#messekojelee, #expodvwg, #verkehrsmuseum { cursor: pointer; }

#textmessekojelee, #textexpodvwg, #textverkehrsmuseum
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textexpodvwg, #textverkehrsmuseum { visibility: hidden; }

/* ~~ merchandising ~~ */
#autoclub, #japanauto, #likoer, #vw, #textnorilsk { cursor: pointer; }

#textautoclub, #textjapanauto, #textlikoer, #textvw, #textnorilsk
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textjapanauto, #textlikoer, #textvw, #textnorilsk { visibility: hidden; }

/* ~~ fotografie ~~ */
#siegel, #makrolee, #fisch, #schreiner, #skyline, #jaguar, #allerlei { cursor: pointer; }

#textsiegel, #textmakrolee, #textfisch, #textschreiner, #textskyline, #textjaguar, #textallerlei
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textmakrolee, #textfisch, #textschreiner, #textskyline, #textjaguar, #textallerlei { visibility: hidden; }

/* ~~ allerlei ~~ */
#taschendrachen, #alphabet, #spielzeug, #spielerei, #lenkrodel { cursor: pointer; }

#texttaschendrachen, #textalphabet, #textspielzeug, #textspielerei, #textlenkrodel
{
	width: 917px;
	height: 52px;
	position: absolute;
	line-height: 14px;
}

#textalphabet, #textspielzeug, #textspielerei, #textlenkrodel { visibility: hidden; }

/* ~~ Fußzeile ~~ */
#footer
{
	padding: 10px 0 10px 0px;
	background-color: #F3F3F3;
	clear: both;
	text-align: center;
}

#footer a:link
{
	color: #4b5457;
	text-decoration: none;
}

#footer a:hover, a:active, a:focus
{
	text-decoration: none;
	color: #ED202C;
	font-weight: 600;
}

#footer .aktiv
{
	color: #ED202C;
	font-weight: 600;
	text-decoration: none;
}

/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt
{
	float: right;
	margin-left: 8px;
}

.fltlft
{
	float: left;
	margin-right: 8px;
}

.clearfloat
{
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}