@charset "utf-8";

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* ---------------------------Hide Mobile HTML -----------------------------*/

#wrappermobile {
	display: none;
}

/* ---------------------------General adjustments-----------------------------*/

body	{
	font-family: "Roboto",cursive;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	background-color:#f9f9f9;
}

/* ---------------------------General Textformatting ---------------------------------------------*/

h1 {
	font-size: 1.75em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
}

h2 {
	font-size: 1.25em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
}
h3 {
	font-size: 1em;
	line-height: 1.75em;
	font-weight: bold;
	color: #000;
}

figcaption  {
	font-size: 16px;
	line-height: 48px;
	font-weight: normal;
	color: #000;
}

/* ---------------------------DIVs---------------------------------------------*/

#bgheader {
	width: 100%;
	height: 364px;
	float: left;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	background-image: url(img/bgheader_pattern.gif);
	/* background-color:#ff0000;*/
} 

#wrapper {
	width: 960px;
	height: auto;
	position: relative;
	top: 0px;
	left: 0px;
	margin: auto;
	z-index: 2;
	background-color:#f9f9f9;
	border-style: dotted;
    border-left-width: 1px;
	border-right-width: 1px;
	/* background-color:#00ff00;*/
}

#bighero {
	width: 960px;
	height: 412px;
	clear: both;
	position: relative;
	top: -4px;
	left: 0px;
	margin: auto;
	z-index: 3;
	/*background-image: url(img/lines.svg);*/
	background-repeat: no-repeat;
	background-position: -40px 10px;
	overflow: hidden;
	/* background-color:#0000ff;*/
} 

#bigheroelement {
	width: 133px;
	height: 205px;
	position: absolute;
	top: 400px;
	left: 12px;
	z-index: 4;
}

#bigheroelement img, #bigheroelement2 img, #bigheroelement3 img{
	width: 100%;
}

#bigheroelement2 {
	width: 102px;
	height: 144px;
	position: absolute;
	top: 65px;
	left: 28px;
	z-index: 4;
	opacity: 0;
}

#bigheroelement3 {
	width: 148px;
	height: 233px;
	position: absolute;
	top: -233px;
	left: 160px;
	z-index: 4;
}

#bigheroelement4 {
	width: 128px;
	height: 100px;
	position: absolute;
	top: -100px;
	left: 344px;
	z-index: 3;
}

#bigheroelement5 {
	width: 0px;
	height: 100px;
	position: absolute;
	top: 149px;
	left: 330px;
	z-index: 3;
	opacity: 0;
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
}

#bigheroelement6 {
	width: 128px;
	height: 100px;
	position: absolute;
	top: 412px;
	left: 340px;
	z-index: 2;
}

#bigheroelement7 { /* laptop */  
	width: 100px;
	height: 90px;
	position: absolute;
	top: 130px;
	left: 516px;
	z-index: 3;
	opacity: 0;
}

#bigheroelement8 {	/* Big S */  
	width: 184px;
	height: 138px;
	position: absolute;
	top: -138px;
	left: 550px;
	z-index: 3;
}

#bigheroelement9 {	/* mouse */
	width: 60px;
	height: 76px;
	position: absolute;
	top: 412px;
	left: 575px;
	z-index: 3;
}

#bigheroelement10 {
	width: 150px;
	height: 80px;
	position: absolute;
	top: 151px;
	left: 960px;
	z-index: 3;
}

#bigheroelement11 {
	width: 90px;
	height: 150px;
	position: absolute;
	top: 412px;
	left: 960px;
	z-index: 3;
}

#bigheroelement12 {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 266px;
	left: 73px;
	z-index: 3;
	opacity: 0;
}

#bigheroelement13 {
	width: 60px;
	height: 20px;
	position: absolute;
	top: 90px;
	left: 50px;
	z-index: 3;
	opacity: 0;
	overflow: hidden;
}

#bigheroelement14 {
	width: 60px;
	height: 20px;
	position: absolute;
	top: 110px;
	left: 50px;
	z-index: 3;
	opacity: 0;
	overflow: hidden;
}

#bigheroelement15 {
	width: 60px;
	height: 20px;
	position: absolute;
	top: 108px;
	left: 50px;
	z-index: 3;
	opacity: 0;
	overflow: hidden;
}

#bigheroelement16 {
	width: 60px;
	height: 20px;
	position: absolute;
	top: 155px;
	left: 50px;
	z-index: 3;
	opacity: 0;
	overflow: hidden;
}
#bigheroelement17 {
	width: 60px;
	height: 20px;
	position: absolute;
	top: 100px;
	left: 165px;
	z-index: 3;
	opacity: 0;
	overflow: hidden;
}
#bigheroelement18 {
	width: 40px;
	height: 20px;
	position: absolute;
	top: 182px;
	left: 215px;
	z-index: 3;
	opacity: 0;
	overflow: hidden;
}
#bigheroelement19 {
	width: 30px;
	height: 20px;
	position: absolute;
	top: 264px;
	left: 265px;
	z-index: 3;
	opacity: 0;
	overflow: hidden;
}
#bigheroelement20 {  /* arrow top emerging from draftpapers */
	width: 75px;
	height: 20px;
	position: absolute;
	top: 100px;  /* 140px  */
	left: 375px; /* soll nach 445px  */
	z-index: 2;
	opacity: 0;
	overflow: hidden;
}
#bigheroelement21 {  /* arrow middle emerging from draftpapers */
	width: 75px;
	height: 20px;
	position: absolute;
	top: 180px;
	left: 375px; /* soll nach 445px  */
	z-index: 2;
	opacity: 0;
	overflow: hidden;
}
#bigheroelement22 {  /* arrow bottom emerging from draftpapers */
	width: 75px;
	height: 20px;
	position: absolute;
	top: 260px;  /* 220px  */
	left: 375px; /* soll nach 445px  */
	z-index: 1;
	opacity: 0;
	overflow: hidden;
}

#bigheroelement23 {  /* arrow emerging from BigS */
	width: 30px;
	height: 20px;
	position: absolute;
	top: 70px;/* 100px */
	left: 593px;
	z-index: 2;
	opacity: 0;
	overflow: hidden;
}
#bigheroelement24 {  /* arrow emerging from mouse */
	width: 30px;
	height: 20px;
	position: absolute;
	top: 296px;  /* 266px */
	left: 591px; 
	z-index: 2;
	opacity: 0;
	overflow: hidden;
}
#bigheroelement25 {  /* arrow middle emerging from laptop */
	width: 75px;
	height: 20px;
	position: absolute;
	top: 180px;
	left: 595px; /* 655px;*/
	z-index: 2;
	opacity: 1;
	overflow: hidden;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#menu {
	width: 100%;
	height: 44px;
	position: absolute;
	top: 364px;
	left: 0px;
	z-index: 4;
	background-color:#999;
	text-align: center;
	border-style: dotted;
    border-top-width: 2px;
    border-bottom-width: 2px;
}
#menu a:hover, #menu a:active, #menu a:link, #menu a:visited {
	font-size: 16px;
	line-height: 44px;
	font-weight: normal;
	color: #fff;
	text-decoration: none;
	padding: 4px 12px 4px 12px;
	border-style: dotted;
    border-left-width: 2px;
}

#menu a:first-child {
    border-left-width: 0px;
}
#starttext {
	width: 288px;
	height: 144px;
	float: left;
	margin-left: 24px;
	margin-bottom: 24px;
	z-index: 4;
	/*background-color:#fff;*/
}

#starttext h1 {
	font-size: 1.75em;
	line-height: 64px;
	font-weight: normal;
	color: #000;
	padding-left: 48px;
}

.webdesign {	
	background-image:url(img/icon_webdesign.png);
	background-repeat: no-repeat;
	background-position: 0px 14px;
}

.illustration {	
	background-image:url(img/icon_illustration.png);
	background-repeat: no-repeat;
	background-position: 0px 14px;
}

.aboutme {	
	background-image:url(img/icon_aboutme.png);
	background-repeat: no-repeat;
	background-position: 0px 14px;
}

.dotted {
	background-image: url(img/dottedline.png);
	background-repeat: no-repeat;
	background-position: 0px 0px ;
}

#starttext p {
	font-size: 16px;
	line-height: 20px;
	font-weight: normal;
	color: #000;
}

.top9 {
	width: 288px;
	height: 240px;
	float: left;
	margin-left: 24px;
	z-index: 4;
	/*background-color:#00ff00;*/
}
.top9image {
	width: 288px;
	height: 192px;
	border-radius: 10px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.top9 figcaption {
	font-size: 16px;
	line-height: 48px;
	font-weight: normal;
	color: #000;
}
#navbox {
	width: 912px;
	height: 48px;
	clear: both;
	margin-left: 24px;
	z-index: 4;
	/*background-color:#f0f000;*/
}

#navbox a:hover, #navboxu a:active, #navbox a:link, #navbox a:visited {
	font-weight: normal;
	color: #000;
	text-decoration: none;
}

.arrow_up{
	line-height: 48px;
	padding: 4px 4px 4px 28px;
	background-image: url(img/arrow_up.svg);
	background-repeat: no-repeat;
}
.arrow_down{
	line-height: 48px;
	padding: 4px 0px 4px 28px;
	background-image: url(img/arrow_down.svg);
	background-repeat: no-repeat;
}
#projectbrief {
	width: 912px;
	height: 192px;
	clear: both;
	margin-left: 24px;
	z-index: 4;
}
#projectbrief h1 {
	font-size: 1.75em;
	line-height: 64px;
	font-weight: normal;
	color: #000;
	padding-left: 48px;
}

.hintergrundtext {
	background-color:#f9f9f9;
	padding-right: 20px;
}
#articletitle {
	width: 912px;
	height: 48px;
	clear: both;
	margin-left: 24px;
	z-index: 4;
}
#articletitle h1{
	font-size: 1.75em;
	line-height: 64px;
	font-weight: normal;
	color: #000;
	padding-left: 0px;
	position: relative;
	top: -8px;
}
/*#projectbrief p{
	font-size: 16px;
	line-height: 24px;
	font-weight: normal;
	color: #000;
}*/
.projectimage2rows2cols {
	width: 600px;
	height: 480px;
	float: left;
	margin-left: 24px;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage2rows2cols figure {
	width: 600px;
	height: 432px;
	border-radius: 10px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage1row1col {
	width: 288px;
	height: 240px;
	float: left;
	margin-left: 24px;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage1row1col figure {
	width: 288px;
	height: 192px;
	border-radius: 10px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage1row2cols {
	width: 600px;
	height: 240px;
	float: left;
	margin-left: 24px;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage1row2cols figure {
	width: 600px;
	height: 192px;
	border-radius: 10px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
}
.projectimage2rows1col {
	width: 288px;
	height: 480px;
	float: left;
	margin-left: 24px;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage2rows1col figure {
	width: 288px;
	height: 432px;
	border-radius: 10px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage2rows3cols {
	width: 912px;
	height: 480px;
	float: left;
	margin-left: 24px;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage2rows3cols figure {
	width: 912px;
	height: 432px;
	border-radius: 10px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage3rows3cols {
	width: 912px;
	height: 672px;
	float: left;
	margin-left: 24px;
	z-index: 4;
}
.projectimage3rows3cols figure {
	width: 912px;
	height: 624px;
	border-radius: 10px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage1row3cols {
	width: 912px;
	height: 240px;
	float: left;
	margin-left: 24px;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage1row3cols figure {
	width: 912px;
	height: 192px;
	border-radius: 10px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.mitpunkten{
	list-style: disc;
	margin-left: 20px;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   CSS For 480px < Screen > 960px : wrapper = 576px,   18| 168 |18| 168 |18| 168 |18|  height: 155px xxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */

@media screen and (min-width:480px) and (max-width: 959px) 
{ 

/* ---------------------------General adjustments-----------------------------*/

body	{
	font-family: "Roboto",cursive;
	font-size: 10px;  /*  16px * 0.6 = 9,6px  0,6 = */
	line-height: 14.4px; /*  24px * 0.6 = 9,6px  0,6 = */
	color: #000;
	background-color:#f9f9f9; /*  #f9f9f9 */
}

/* ---------------------------General Textformatting ---------------------------------------------*/

h1 {
	font-size: 1.5em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
}

h2 {
	font-size: 1.25em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
}
h3 {
	font-size: 1em;
	line-height: 1.75em;
	font-weight: bold;
	color: #000;
}

figcaption  {
	font-size: 1em;
	line-height: 3em;
	font-weight: normal;
	color: #000;
}

/* ---------------------------DIVs---------------------------------------------*/

#bgheader {
	width: 100%;
	height: 218px;  /* ~ 364px * 0,6 */
	float: left;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	background-image: url(img/bgheader_pattern.gif);
	/* background-color:#ff0000;*/
} 

#wrapper {
	width: 75%;
	height: auto;
	position: relative;
	top: 0px;
	left: 0px;
	margin: auto;
	z-index: 2;
	background-color:#f9f9f9;
	border-style: dotted;
    border-left-width: 1px;
	border-right-width: 1px;
}

#bighero {    /* !!!!!!!!!!!!!!!!!!!!!!!OPEN ISSUE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
	width: 576px; /* war 960px = alte Breite des Wrappers*/
	height: 247px; /* ~ 412px * 0,6 */
	clear: both;
	position: relative;
	top: -4px;
	left: 0px;
	margin: auto;
	z-index: 3;
	background-image: url(img/lines.svg);
	background-repeat: no-repeat;
	background-position: -24px 6px;
	background-size: 576px 247px;
	overflow: hidden;
	/*background-color:#0000ff; */
} 

#bigheroelement {
	width: 80px; /* ~ 133px * 0,6 */
	height: 123px; /* ~ 205px * 0,6 */
	position: absolute;
	top: 144px; /* ~ 240px * 0,6 */
	left: 7px; /* ~ 12px * 0,6 */
	z-index: 3;
}

#bigheroelement img, #bigheroelement2 img, #bigheroelement3 img, #bigheroelement4 img, #bigheroelement5 img, #bigheroelement6 img, #bigheroelement7 img, #bigheroelement8 img, #bigheroelement9 img, #bigheroelement10 img, #bigheroelement11 img, #bigheroelement12 img{
	width: 100%;
}

#bigheroelement2 {
	width: 61px; /* ~ 102px * 0,6 */
	height: 86px; /* ~ 144px * 0,6 */
	position: absolute;
	top: 39px; /* ~ 65px * 0,6 */
	left: 16px; /* ~ 28px * 0,6 */
	z-index: 4;
}

#bigheroelement3 {
	width: 88px; /* ~ 148px * 0,6 */
	height: 139px; /* ~ 233px * 0,6 */
	position: absolute;
	top: 48px; /* ~ 81px * 0,6 */
	left: 96px; /* ~ 160px * 0,6 */
	z-index: 4;
}

#bigheroelement4 {
	width: 76px; /* ~ 128px * 0,6 */
	height: 60px; /* ~ 100px * 0,6 */
	position: absolute;
	top: 42px; /* ~ 71px * 0,6 */
	left: 206px; /* ~ 344px * 0,6 */
	z-index: 3;
}

#bigheroelement5 {
	width: 76px; /* ~ 128px * 0,6 */
	height: 60px; /* ~ 100px * 0,6 */
	position: absolute;
	top: 89px; /* ~ 149px * 0,6 */
	left: 198px; /* ~ 330px * 0,6 */
	z-index: 3;
}

#bigheroelement6 {
	width: 76px; /* ~ 128px * 0,6 */
	height: 60px; /* ~ 100px * 0,6 */
	position: absolute;
	top: 134px; /* ~ 224px * 0,6 */
	left: 204px; /* ~ 340px * 0,6 */
	z-index: 2;
}

#bigheroelement7 {
	width: 97px; /* ~ 162px * 0,6 */
	height: 71px; /* ~ 119px * 0,6 */
	position: absolute;
	top: 78px;  /* ~ 130px * 0,6 */
	left: 319px; /* ~ 515px * 0,6 */
	z-index: 3;
}

#bigheroelement8 {
	width: 49px; /* ~ 83px * 0,6 */
	height: 45px; /* ~ 75px * 0,6 */
	position: absolute;
	top: 9px; /* ~ 15px * 0,6 */
	left: 341px; /* ~ 556px * 0,6 */
	z-index: 3;
}

#bigheroelement9 {
	width: 36px; /* ~ 60px * 0,6 */
	height: 45px; /* ~ 76px * 0,6 */
	position: absolute;
	top: 168px; /* ~ 280px * 0,6 */
	left: 348px; /* ~ 578px * 0,6 */
	z-index: 3;
}

#bigheroelement10 {
	width: 90px; /* ~ 150px * 0,6 */
	height: 48px; /* ~ 80px * 0,6 */
	position: absolute;
	top: 90px; /* ~ 151px * 0,6 */
	left: 436px; /* ~ 728px * 0,6 */
	z-index: 3;
}

#bigheroelement11 {
	width: 54px; /* ~ 90px * 0,6 */
	height: 90px; /* ~ 150px * 0,6 */
	position: absolute;
	top: 106px; /* ~ 178px * 0,6 */
	left: 474px; /* ~ 790px * 0,6 */
	z-index: 3;
}

#bigheroelement12 {
	width: 12px; /* ~ 20px * 0,6 */
	height: 12px; /* ~ 20px * 0,6 */
	position: absolute;
	top: 151px; /* ~ 253px * 0,6 */
	left: 45px; /* ~ 75px * 0,6 */
	z-index: 3;
	display: none;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#menu {   /* !!!!!!!!!!!!!!!!!!!!!!!OPEN ISSUE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
	width: 100%;
	height: 2.6em; /* 44px * 0,6 = 26px, in em ausgedrueckt */
	position: absolute;
	top: 218px; /* Hoehe des bgheaders */
	left: 0px;
	z-index: 4;
	background-color:#999;
	text-align: center;
	border-style: dotted;
    border-top-width: 2px;
    border-bottom-width: 2px;
}
#menu a:hover, #menu a:active, #menu a:link, #menu a:visited {
	font-size: 1.2em; /* 12px in em ausgedrueckt */
	line-height: 2.2em; /* entspricht height menu-bar */
	font-weight: normal;
	color: #fff;
	text-decoration: none;
	padding: 0.4em 0.5em 0.4em 0.5em;
	border-style: dotted;
    border-left-width: 2px;
}

#menu a:first-child {
    border-left-width: 0px;
}
#starttext {
	width: 30%; /* 288px geteilt durch 960px = Verhaeltnis Container zu Parentelement  */
	height: 7em; /* = 144px * 0,6 */
	float: left;
	margin-left: 2.5%; /* 24px geteilt durch 960px */
	margin-bottom: 2.5%; /* 24px geteilt durch 960px */
	z-index: 4;
}

#starttext h1 {
	font-size: 1.5em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
	padding-left: 1.5em;
}

.webdesign {	
	background-image:url(img/icon_webdesign.png);
	background-repeat: no-repeat;
	background-position: 0em 0.5em;
	background-size: 1em 1em;
}

.illustration {	
	background-image:url(img/icon_illustration.png);
	background-repeat: no-repeat;
	background-position: 0em 0.5em;
	background-size: 1em 1em;
}

.aboutme {	
	background-image:url(img/icon_aboutme.png);
	background-repeat: no-repeat;
	background-position: 0em 0.5em;
	background-size: 1em 1em;
}

.aboutmearticle {	
	background-image:url(img/icon_aboutme.png);
	background-repeat: no-repeat;
	background-position: 0em 1.5em;
	background-size: 1em 1em;
}

.dotted {
	background-image: url(img/dottedline.png);
	background-repeat: no-repeat;
	background-position: 1em 1em ;
}

#starttext p {
	font-size: 1em;
	line-height: 1.25em;
	font-weight: normal;
	color: #000;
}

.top9 {
	width: 30%; /* 288px geteilt durch 960px = Verhaeltnis Container zu Parentelement  */
	height: 144px;  /* = 240px * 0,6 */
	float: left;
	margin-left: 2.5%; /* 24px geteilt durch 960px */
	z-index: 4;
	/*background-color:#00ff00;*/
}
.top9image {
	width: 100%; /* 288px geteilt durch 960px = Verhaeltnis Container zu Parentelement  */
	height: 80.55555555555556%; /* ~ 192px * 0,6 */
	border-radius: 6px; /* = 10px * 0,6 */
	clear: both;
	z-index: 4;
	overflow: hidden;
}

.top9image  img{
	width: 100%; 
	height: 100%;
}
.top9 figcaption {
	font-size: 1em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
}
#navbox {
	width: 100%; /* war 912px */
	height: 2em;
	clear: both;
	margin-left: 2.5%;
	z-index: 4;
	/*background-color:#f0f000;*/
}

#navbox a:hover, #navboxu a:active, #navbox a:link, #navbox a:visited {
	font-weight: normal;
	color: #000;
	text-decoration: none;
}

.arrow_up{
	line-height: 2em;
	padding: 0.1666666666666667em 0.1666666666666667em 0.1666666666666667em 2em;
	background-image: url(img/arrow_up.svg);
	background-repeat: no-repeat;
}
.arrow_down{
	line-height: 2em;
	padding: 0.1666666666666667em 0.1666666666666667em 0.1666666666666667em 2em;
	background-image: url(img/arrow_down.svg);
	background-repeat: no-repeat;
}
#projectbrief {
	width: 100%; /* war 912px */
	height: auto;
	clear: both;
	margin-left: 2.5%;
	margin-bottom: 2.5%;
	z-index: 4;
}
#projectbrief h1 {
	font-size: 1.5em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
	padding-left: 5%;
}

.hintergrundtext {
	background-color:#f9f9f9;
	padding-right: 1em;
}
#articletitle {
	width: 95%px;
	height: 4em;
	clear: both;
	margin-left: 2.5%;
	z-index: 4;
}
#articletitle h1{
	font-size: 1.5em;
	line-height: 4em;
	font-weight: normal;
	color: #000;
	padding-left: 0em;
}
.aboutmeh1 {
	padding-left: 1.5em;
}
/*#projectbrief p{
	font-size: 16px;
	line-height: 24px;
	font-weight: normal;
	color: #000;
}*/
.projectimage2rows2cols {
	width: 62.5%; /* 600px geteilt durch 960px in Prozent */
	height: 288px; /* height top9 (= 240px * 0,6 )mal 2  */
	float: left;
	margin-left: 2.5%;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage2rows2cols figure {
	width: 100%; 
	height: 89%; /* height von #projectimage2rows2cols minus lineheight figcaption */
	border-radius: 5px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage2rows2cols figure  img{
	width: 100%; 
	height: 100%; 
}
.projectimage1row1col {
	width: 30%;
	height: 144px; /* height top9 (= 240px * 0,6 ) */
	float: left;
	margin-left: 2.5%;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage1row1col figure {
	width: 100%;
	height: 79%; /* height von #projectimage1row1col minus lineheight figcaption */
	border-radius: 5px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage1row1col figure  img{
	width: 100%; 
	height: 100%; 
}
.projectimage1row2cols {
	width: 62.5%; /* 600px geteilt durch 960px in Prozent */
	height: 144px; /* height top9 (= 240px * 0,6 ) */
	float: left;
	margin-left: 2.5%;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage1row2cols figure {
	width: 100%;
	height: 79%; /* height von #projectimage1row1col minus lineheight figcaption */
	border-radius: 5px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
}
.projectimage1row2cols figure  img{
	width: 100%; 
	height: 100%; 
}
.projectimage2rows1col {
	width: 30%; /* 288px geteilt durch 960px in Prozent */
	height: 288px; /* height top9 mal 2 */
	float: left;
	margin-left: 2.5%;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage2rows1col figure {
	width: 100%;
	height: 89.58333333333333%; /* height von #projectimage2rows1col minus lineheight figcaption */
	border-radius: 5px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage2rows1col figure  img{
	width: 100%; 
	height: 100%; 
}
.projectimage2rows3cols {
	width: 95%;
	height: 288px; /* height top9 mal 2 */
	float: left;
	margin-left: 2.5%;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage2rows3cols figure {
	width: 100%;
	height: 89.58333333333333%; /* Verhaeltnis von height parent element und height child */
	border-radius: 5px;
	clear: both;
	z-index: 4;
	background-color:#0000ff;
	overflow: hidden;
}
.projectimage2rows3cols figure  img{
	width: 100%; 
	height: 100%; 
}
.projectimage3rows3cols {
	width: 95%;
	height: 432px; /* height top9 mal 3 */
	float: left;
	margin-left: 2.5%;
	z-index: 4;
}
.projectimage3rows3cols figure {
	width: 100%;
	height: 93.05555555555556%; /* Verhaeltnis von height parent element und height child */
	border-radius: 5px;
	clear: both;
	z-index: 4;
	overflow: hidden;
}
.projectimage3rows3cols figure img{
	max-width: 100%; 
	max-height: 100%; 
}
.projectimage1row3cols {
	width: 95%;
	height: 144px;
	float: left;
	margin-left: 2.5%;
	z-index: 4;
	/*background-color:#fff;*/
}
.projectimage1row3cols figure {
	width: 100%;
	height: 79.16666666666667%; /* Verhaeltnis von height parent element und height child */
	border-radius: 5px;
	clear: both;
	z-index: 4;
	overflow: hidden;
}
.projectimage1row3cols figure img{
	max-width: 100%; 
	max-height: 100%; 
}
.mitpunkten{
	list-style: disc;
	margin-left: 2.5%;
	line-height: 1.25em;
}

}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   CSS For 320px < Screen > 480px : Mobile-Layout xxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */

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

/* ---------------------------Hide Desktop/ Tablet HTML -----------------------------*/

#wrappermobile {
	display: block;
}

#bgheader, #menu, #bighero, #wrapper {
	display: none;
}

/* ---------------------------General adjustments-----------------------------*/

body	{
	width: 100%;
	margin: auto;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	background-color: #fff;
}

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

/* -------------------------32--General Textformatting ---------------------------------------------*/

h1 {
	font-size: 1.75em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
}

h2 {
	font-size: 1.25em;
	line-height: 2em;
	font-weight: normal;
	color: #000;
}
h3 {
	font-size: 1em;
	line-height: 1.75em;
	font-weight: bold;
	color: #000;
}

figcaption  {
	font-size: 16px;
	line-height: 48px;
	font-weight: normal;
	color: #000;
}

/* ---------------------------DIVs---------------------------------------------*/

.header {
    width: 86.25%; /* = 276px geteilt durch 320px */
	height:48px;
    clear: both;
    margin: 0px auto 6px auto;
    z-index: 2;
	/*background-color: #ccc;*/
    } 
	
.header  img{
	float: left;
    margin: 0px auto 0px auto;
    z-index: 3;
    }
.header  p{
	font-size: 1em;
	clear: both;
    margin: 0px auto 0px auto;
	text-align:center;
    z-index: 3;
    }

.teaserpic {
    width: 86.25%; /* = 276px geteilt durch 320px */
	height:264px;
    clear: both;
    margin: 0px auto 12px auto;
    z-index: 2;
    } 
.teaserpic  img{
	display: block;
    margin: 0px auto 0px auto;
    z-index: 3;
    }
.teaserpic  p{
	clear: both;
	background-color: #666;
    z-index: 3;
    }
.teaserpic  p img{
	float: left;
	margin: 12px 12px 0px 0px;
    z-index: 4;
    }
.teaserpic  p img:first-child{
	float: left;
	margin: 12px 12px 0px 36px;
    z-index: 4;
    }
	
.headermenu {
    width: 86.25%; /* = 276px geteilt durch 320px */
	height:48px;
    clear: both;
    margin: 0px auto 0px auto;
    z-index: 2;
	border-bottom-style: dotted;
	border-color: #ccc;
	border-width: 3px;
    } 
.marginbottom24px {
	margin-bottom:24px;
    } 
.dottedtopborder {
	border-top: 3px dotted #ccc;
    } 
	
.headermenu img{
	float: left;
    margin: 4px 0px 0px 0px;
    z-index: 3;
    }
	
.headermenu  p{
	font-size: 1.125em;
	float: left;
    margin: 12px 0px 0px 16px;
    z-index: 3;
    }

.projectcontainer {
	width: 100%;
	height:auto;
    clear: both;
    margin: 0px auto 0px auto;
	padding-bottom: 24px;
    z-index: 2;
	background-color: #f1f1f1;
	border-top-style: dotted;
	border-color: #959595;
	border-width: 3px;
    }
.whitebg {
	background-color: #fff;
    }
	
.projectcontainerheader {
    width: 86.25%; /* = 276px geteilt durch 320px */
	height:48px;
    clear: both;
	position: relative;
    margin: 0px auto 0px auto;
    z-index: 3;
	/*background-color: #00ff00;*/
    }
.projectcontainerheader img{
	float: left;
	position: absolute;
	top: -44px;
	left: 0px;
    margin: 0px 0px 0px 0px;
    z-index: 3;
	/*background-color: #ff0000;*/
    }	
.projectcontainerheader  p{
	font-size: 1.125em;
	font-weight: bold;
	float: left;
	margin: 12px 0px 0px 60px;
    z-index: 4;
    } 
.projectcontainerinfo {
    width: 86.25%; /* = 276px geteilt durch 320px */
    clear: both;
	position: relative;
	top: 0px;
    margin: 0px auto 12px auto;
    z-index: 3;
	background-color: #999;
    }
.projectcontainerinfo  img{
    position:relative;
	top:2px;
    }
.projectcontainerinfo  p{
	font-size: 1em;
	font-weight: normal;
	float: left;
	margin: 0px 0px 12px 0px;
    z-index: 4;
    }
.projectcontainerpic {
    width: 86.25%; /* = 276px geteilt durch 320px */
	height:252px;
    clear: both;
    margin: 0px auto 0px auto;
    z-index: 2;
	/* background-color: #999;*/
    } 
.projectcontainerpic  img{
	overflow: hidden;
	display:block;
    margin: 0px auto 0px auto;
    z-index: 3;
    }
.projectcontainerpic  p{
	margin: 6px 0px 0px 0px;
	clear: both;
	font-size: 1em;
	text-align: center;
    z-index: 3;
    }
.projectcontainernavi {
    width: 86.25%; /* = 276px geteilt durch 320px */
	height:48px;
    clear: both;
    margin: 0px auto 0px auto;
    z-index: 2;
    }  
	
.projectcontainernavi img{
	float: left;
    margin: 0px 0px 0px 0px;
    z-index: 3;
    }
	
.projectcontainernavi  p{
	font-size: 1.125em;
	float: left;
    margin: 6px 12px 0px 12px;
    z-index: 3;
    }

}