@charset "utf-8";
* {
	padding:0;
	margin:0;
	font-family: 'Raleway', "sans-serif;";
}
a img {
	border:0;  /* reset cause of Internet Explorer  */
}

a:active, a:focus {
	outline: none; /*Gepunkteten Rahmen um Links entfernen*/
}

#wrapper {
padding-top:0;
}

h1 {
	position:absolute;
	left:-99999px;	
}

#fsbutton {
	display:none;
}


/* ---------------------- NAVIGATION ---------------------- */
#header{
	width:100%;	
	height:5.625em;
	background-color:#fff;
	position:relative;
	z-index:2000;
}

#header #red-line {
	background: transparent;
	width: 96%;
	margin:0 auto;
	border-top:0.3125em solid #bf1c00;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
}

#header img {
	display:block;
	width:40%;
	max-width:110px;
	position:absolute;
	left:5%;
	bottom:1.375em;	
	z-index:1000;
}

#header #menu-icon{
	font-size:0.875em;
	text-align:center;
	color:#fff;
	width: 5em;
	height:1.7em;
	background: #bf1c00;
	padding:0.7em 0.4em 0.25em;
	cursor:pointer;
	position:absolute;
	right:5%;
	top:2.3em;
	-webkit-touch-callout: none;	
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;	
}

#header #nav {
	width:100%;
	clear:both;
	z-index:1000;
	padding:0.25em 0;
	background:#bf1c00;
	position:absolute;
	right:0;
	display:none;
	top:4.5em;
	list-style-type:none;
	box-shadow:0 0.3125em 0.25em rgba(0,0,0,0.7);
}

#header #nav li a{
	font-size:1em;
	font-weight:500;
	display:block;
	padding:0.9375em 1.25em;
	color:#fff;
	text-decoration:none;
}

#header #nav li a:hover{
	color:#fff;
	background-color:#c91d00;
	box-shadow:inset 0 0.125em 0.125em rgba(0,0,0,0.2), 0 0 0 0.0625em rgba(255,255,255,0.2);
}

.clearfloat {
	clear:both;
}

/* ---------------------- ABOUT ME ---------------------- */
#about-me {
	background: url(../bilder/bg-about-me.jpg) no-repeat center bottom;
	background-size:cover;
	padding-top:3.5em;
	padding-bottom:4.5em;
	position:relative;
	z-index:0;
}

#about-me p{
	font-size:0.875em;
	color: #cfcfcf;
	background: #0076ef;
	padding:0.75em;
	margin:0 0.5em 1em;
	position:relative;
}

#about-me p span{
	color: #fff;
	font-weight:500;
}


#about-me p#text1{
	padding-left:5.7em;
}

#about-me #nader-big{
	position:absolute;
	bottom:0;
	left:-99999px;
}

#about-me p #nader-small{
	position:absolute;
	bottom:0;
	left:0;
}

.wrap-btn-next {
	width:100%;
	position:absolute;
	bottom:1.25em;
	z-index:1;
}

a.btn-next {
	background: url(../bilder/btn-next.png) center center no-repeat;
	width:100%;
	display:block;
	width:3em;
	height:47px;
	margin:0 auto;
	
}



/* ---------------------- 01 SHOWREEL ---------------------- */
#showreel {
	background-image:url(../bilder/dreiecke_bg.png), url(../bilder/bg-punched-metal-white.png);
	background-repeat:no-repeat, repeat;
	background-position:center center, top left;
	padding: 3.125em 0 4.375em;
	border-top: 0.125em solid #fff;
	border-bottom: 0.125em solid #fff;
	box-shadow:0 0 0.625em 0.1875em rgba(0,0,0,0.7);
	position:relative;
	z-index:20;
}

#content01till04 h2 {
	background: url(../bilder/section-title.png) no-repeat;
	height: 2.3em;
	padding:0.5em 0 0 0.76em;
	color:#fff;
	font-weight:400;
	font-size:1.25em;
	margin-bottom:1.4em;
	margin-left:1.5%;
}

#content01till04 h2 span {
	font-weight:600;
	font-size:1.25em;
	text-shadow: -0.05em 0 #444;
	margin-right:1.4em;
}

#showreel a.jackbox {
	width:93%;
	max-width:768px;
	border:0.3em solid white;
	box-shadow: 0 0 0 1px #c8c8c8, 0 0 0 2px #fff;
	position:relative;
	z-index:2;
	display:block;
	margin:0 auto;
}
#showreel #showreel-pic {
	width: 100%;	
}

#showreel #showreel-shadow {
	width:92%;
	max-width:768px;
	margin:0 auto;
	position:relative;	
	z-index:1;	
	display:block;
	margin:0 auto;
}


/* ---------------------- 02 SELECTED ANIMATIONS ---------------------- */
#selected-animations {
	background: url(../bilder/bg-rectangle.png) center center repeat;	
	padding: 3.125em 0 4.375em;
	position:relative;
	z-index:10;
	overflow:hidden;
}

#wrap01, #wrap03, #wrap05, #wrap07, #wrap09 {
	width:55%;
	max-width:404px;
	float:left;
	margin-left:2%;
}
#allclips-wrap {
	margin:0;
}


#wrap02, #wrap04, #wrap06, #wrap08 {
	width:55%;
	max-width:404px;
	float:left;
	margin-left:-14%;
}


#clip01 a {
	background: url(../bilder/clip01.png) left top no-repeat;

}
#clip02 a{
	background: url(../bilder/clip02.png) left top no-repeat;
}
#clip03 a{
	background: url(../bilder/clip03.png) left top no-repeat;
}
#clip04 a{
	background: url(../bilder/clip04.png) left top no-repeat;
}
#clip05 a{
	background: url(../bilder/clip05.png) left top no-repeat;
}
#clip06 a{
	background: url(../bilder/clip06.png) left top no-repeat;
}
#clip07 a{
	background: url(../bilder/clip07.png) left top no-repeat;
}
#clip08 a{
	background: url(../bilder/clip08.png) left top no-repeat;
}
#clip09 a{
	background: url(../bilder/clip09.png) left top no-repeat;
}

#clip01, #clip02, #clip03, #clip04, #clip05, #clip06, #clip07, #clip08, #clip09 {
	background-size:cover;
}

#clip01 a, #clip02 a, #clip03 a, #clip04 a, #clip05 a, #clip06 a, #clip07 a, #clip08 a, #clip09 a {
	display:block;
	padding-top:56.1881188%;
	background-size:cover;
	z-index:3;
	opacity:1;
	cursor:pointer;
}

#shadow01, #shadow03, #shadow05, #shadow07, #shadow09 {
	padding-top:12.871287%;
	background: url(../bilder/clip-shadow-left.png);
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	z-index:2;
}

#shadow02, #shadow04, #shadow06, #shadow08 {
	padding-top:12.958435207%;
	background: url(../bilder/clip-shadow-right.png);
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	z-index:2;
}

.clearfloat {
	clear:both;	
}

#selected-animations p {
	margin: -10% 0 12% 6%;	
	font-size:0.875em;
	font-weight:500;
	color:#007eff;
	position:relative;
	z-index:1;
}

#selected-animations p.sub {
	margin: -12% 0 8% 6%;	
	font-size:0.8125em;
	font-weight:400;
	color:#6d6d6d;
}




/* ---------------------- 03 SELECTED DESIGNS ---------------------- */
#selected-designs {
	background: url(../bilder/bg-punched-metal-white.png) repeat;
	padding: 3.125em 0 4.375em;
	border-top: 0.125em solid #fff;
	border-bottom: 0.125em solid #fff;
	box-shadow:0 0 0.625em 0.1875em rgba(0,0,0,0.7);
	position:relative;
	z-index:20;
}

.design-wrap {
	width:93%;
	max-width:910px;
	margin:0 auto;
}

#design01 {
	background:url(../bilder/design_haribo_bigpreview.jpg) -115px 0;
}

#design02 {
	background:url(../bilder/design_mesut_bigpreview.jpg) -115px 0;
}

#design03 {
	background:url(../bilder/design_cola_bigpreview.jpg) 0 -215px;
}

#design04 {
	background:url(../bilder/design_meandyou_bigpreview.jpg) -140px 0;
}

#design05 {
	background:url(../bilder/design_experte24_bigpreview.jpg) -70px -30px;
}

#design06 {
	background:url(../bilder/design_rohdeundschwarz_bigpreview.jpg) -100px 0;
}

#design07 {
	background:url(../bilder/design_revolution_bigpreview.jpg) -250px -280px;
}

#design08 {
	background:url(../bilder/design_ipod_bigpreview.jpg) -325px -110px;
}

/* alle ids, die mit "design0" beginnen bekommen diese Formatierung */
div[id^="design0"] {
	border:0.3em solid white;
	box-shadow: 0 0 0 1px #c8c8c8, 0 0 0 2px #fff;
	position:relative;
	z-index:1;
}

.design-wrap a {
	display:block;
	padding-top:30%;
}

.design-shadow {
	padding-top:10.0649%;
	background: url(../bilder/design-shadow2.png) left top no-repeat;
	background-size:cover;
	position:relative;
	z-index:2;
	margin-top:2px;
}

#selected-designs p {
	margin: -9% 0 0 3%;	
	font-size:0.875em;
	font-weight:500;
	color:#007eff;
	position:relative;
	z-index:1;
}

#selected-designs p.sub {
	margin: 0 0 7% 3%;	
	font-size:0.8125em;
	font-weight:400;
	color:#6d6d6d;
}





/* ---------------------- 04 CONTACT ---------------------- */
#contact {
	background-image:url(../bilder/bg-rectangle.png);
	background-repeat:repeat;
	background-position:left top;
	padding: 3.125em 0 4.375em;
	position:relative;
	z-index:10;
}

#Formular {
	width: 93%;
	max-width:510px;
	margin:0 auto;
}

form label  {
	font-family: 'Raleway', "sans-serif;";
	color: #007eff;
	font-size: 0.9em;
	margin-bottom: 1%;
	font-weight: 400;
	display:block;
}


form input[type="text"], form input[type="email"] {
	width: 100%;
	max-width: 500px;
	border: 0px;
	box-shadow: 0 0 0 1px #c0c0c0, 0 0 0 2px #fff;
	border-radius: 0.125em;
	height: 2.5em;
	background-image: linear-gradient(bottom, rgba(255,255,255,0) 90%, rgba(196,196,196,1) 100%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 90%, rgba(196,196,196,1) 100%);
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 90%, rgba(196,196,196,1) 100%);
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 90%, rgba(196,196,196,1) 100%);
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0) 90%, rgba(196,196,196,1) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.9, rgba(255,255,255,0)),
		color-stop(1, rgba(196,196,196,1))
	);
	padding: 0.3% 0;
	font-family: Verdana, Geneva, sans-serif;
	color: #7F7F7F;
	font-size: 0.75em;
	text-indent: 0.375em;
}

textarea {
	border: 0px;
	box-shadow:0 0 0 1px #c0c0c0, 0 0 0 2px #fff;
	border-radius: 0.125em;
	height: 14.25em;
	overflow: auto;
	padding: 2% 0;
	background-image: linear-gradient(bottom, rgba(255,255,255,0) 98.5%, rgba(196,196,196,1) 100%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 98.5%, rgba(196,196,196,1) 100%);
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 98.5%, rgba(196,196,196,1) 100%);
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 98.5%, rgba(196,196,196,1) 100%);
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0) 98.5%, rgba(196,196,196,1) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.985, rgba(255,255,255,0)),
		color-stop(1, rgba(196,196,196,1))
	);
	font-family: Verdana, Geneva, sans-serif;
	color: #666;
	width: 100%;
	resize: none;
	font-size: 0.75em;
	text-indent: 0.375em;
}

input[type="text"]:focus, form input[type="email"]:focus, textarea:focus {
	outline: 0;
	box-shadow:0 0 0 1px #c0c0c0, 0 0 0 2px #007eff;
}

input[type="submit"] {
	display:block;
	color: #FFF;
	background-color: #007eff;
	font-family: 'Raleway', "sans-serif;";
	font-size: 1em;
	border-radius: 0.125em;
	border: none;
	font-weight: 400;
	height: 2.5em;
	width: 5em;
	cursor: pointer;
}

input[type="submit"]:hover {
	box-shadow: 0 0 3px 5px #fff;
}

.contact-shadow {
	padding-top:16.6%;
	background:url(../bilder/contact-shadow.png) top left no-repeat;
	background-size:cover;
	margin:-1px auto -1.5em;
}




/* ---------------------- FOOTER ---------------------- */
#footer {
	background:url(../bilder/texture-dark.jpg) repeat;
	padding:6% 0;
	box-shadow:inset 0 0.25em 0.25em rgba(0,0,0,0.7);
	border-top:1px solid #fff;
	position:relative;
	z-index:20;
}

#footer .infobox {
	margin:0 auto;
	margin:0%;
}

#footer .infobox a {
	display:block;
	color:#fff;
	text-decoration:none;
	text-align:center;
	font-size:0.8em;
	margin-bottom:3em;
}

#footer .infobox a img{
	display:block;
	margin:2em auto 0.3125em;		
}

#footer #infobox-wrap {
	overflow:hidden;
	margin:0 auto;
}

#footer p.imprint {
	text-align:center;
	font-size:0.9em;
	margin-top:2.5em;
}

#footer p.imprint a {
	color:#fff;
}

#footer a[href$=".html"] {
	padding-right:1.25em;
	background:url(../bilder/external.png) no-repeat right center;
}


/* ------------------- IMPRESSUM ----------------- */
#imprintbody {
	background: url(../bilder/bg-rectangle.png) repeat;	
}

#imprint-wrap {
	width:90%;
	max-width:800px;
	margin:0 auto;
	padding-top:2em;
}

#imprint-wrap h2, #imprint-wrap h3 {
		background:#0076ef;
		color:#fff;
		padding:0.2em 0.4em;
		margin-bottom:0.8em;
		margin-top: 3em;
		border-radius:2px;
		box-shadow:0 0 0 1px #aaa, 0 0 0 2px rgba(255,255,255,0.8);
		font-weight:400;
}

#imprint-wrap p {
	margin: 0.7em 0;
	font-size: 0.85em;
	line-height: 1.6em;
}

#imprint-wrap h4 {
		position:relative;
		font-weight:400;
		background:#fff;
		color:#0076ef;
		padding:0.2em 0.4em;
		border-radius:2px;
		margin-top:2em;
}

#imprint-wrap .first {
		margin-top:0;
}

#imprint-wrap ul {
	margin-left: 2em;
	list-style: square;
}


/*---------------------------------------------------------------------------------------------
-------------------------------------ab 420px--------------------------------------------------
-----------------------------------------------------------------------------------------------*/
@media only screen and (min-width:420px) {
/* ---------------------- NAVIGATION ---------------------- */

#footer .infobox {
	float:left;
	width:32%;
}

#footer #infobox-wrap {
	max-width:550px;
}

/* ---------------------- SELECTED ANIMATIONS ---------------------- */
div[id^="badge"] {
	width:58px;
	height:110px;
	position:absolute;
	top:-8px;
	left:-8px;
	z-index:2;
}

#badge01 {
	background:url(../bilder/badge01.png);
	background-size:cover;
}
#badge02 {
	background:url(../bilder/badge02.png);
	background-size:cover;
}
#badge03 {
	background:url(../bilder/badge03.png);
	background-size:cover;
}
#badge04 {
	background:url(../bilder/badge04.png);
	background-size:cover;
}
#badge05 {
	background:url(../bilder/badge05.png);
	background-size:cover;
}
#badge06 {
	background:url(../bilder/badge06.png);
	background-size:cover;
}
#badge07 {
	background:url(../bilder/badge07.png);
	background-size:cover;
}
#badge08 {
	background:url(../bilder/badge08.png);
	background-size:cover;
}


}


/*---------------------------------------------------------------------------------------------
-------------------------------------ab 730px--------------------------------------------------
-----------------------------------------------------------------------------------------------*/
@media only screen and (min-width:730px) {
/* ---------------------- NAVIGATION ---------------------- */
#header{
	background-color:rgba(255,255,255,0.95);
	position:fixed;
}

#header #menu-icon{
	left:-99999px; /* menu icon dissapers */
}

#header #nav {
	width:70%;
	padding:0.7em 0 0 0.5em;
	background:transparent;
	right:0;
	display:block;
	top:0;
	box-shadow:0 0 0 rgba(0,0,0,0.7);
}

/*new rule*/
#header #nav li {
	font-size:1em;
	font-weight:500;
	display:block;
	padding:0.5em 0.94em;
	width:200px;
	float:left;
}

/*new rule*/
#header #nav li:nth-child(3) {
	clear:both;
}

#header #nav li a{
	font-weight:300;
	display:inline;
	padding:0;
	color:#666;
	border:1px solid transparent;
	
	
}

#header #nav li a:hover{
	background-color:transparent;/*reset*/
	box-shadow:inset 0 0 0 rgba(0,0,0,0.2), 0 0 0 0 rgba(255,255,255,0.2);/*reset*/
	color:#c91d00;
}



/* ---------------------- ABOUT ME ---------------------- */
#about-me {
	background-position: center 1.875em;
	background-size:content; /*reset*/
	background-color:#fff;
	padding-top:0em;
	padding-bottom:0em; /*reset*/
	position:fixed;
	top:5.625em;
	width:100%;
	height: 27.875em;
}

#about-me p{
	font-size:1.0625em;
	z-index:1;
	left: 190px;
	width:50%;
}

#about-me p#text1{
	padding-left:132px;
	margin-top:50px;
}

#about-me p#text2{
	padding-left:90px;
}

#about-me p#text3{
	padding-left:60px;
}

#about-me #nader-big{
	left:-100px;
	z-index:2;
}

#about-me p #nader-small{
	left:-99999px;
}

/* ---------------------- Content 01 till 04 --------------- */
#content01till04 {
	top:33.5em;
	position:relative;
	z-index:30;
	width:100%;
}

/* ---------------------- 01 SHOWREEL ---------------------- */
#showreel {
	padding-top:5em;
}

#showreel-pic {
	-webkit-transition: all 0.4s ease-out 0s;
	-moz-transition: all 0.4s ease-out 0s;
	-ms-transition: all 0.4s ease-out 0s;
	-o-transition: all 0.4s ease-out 0s;
	transition: all 0.4s ease-out 0s;	
}


#showreel #showreel-pic:hover {
	box-shadow:0 0 30px 15px #fff;
}

#content01till04 h2 {
	background: url(../bilder/section-title-big.png) left top no-repeat;
	height: 65px;
	width:100%;
	max-width:880px;
	padding:0.15em 0 0 0;
	color:#fff;
	font-weight:300;
	font-size:2.1875em;
	margin:0 auto 1.4em;
	text-indent:0.9em;
}

#content01till04 h2 span {
	font-weight:600;
	font-size:1.2em;
	text-shadow: -0.03em 0 #666;
	margin-right:1.4em;
}	


/* ---------------------- 02 SELECTED ANIMATIONS ---------------------- */
#selected-animations {
	padding-top:5em;
}

#allclips-wrap {
	margin:0 auto;
	overflow:hidden;
	max-width:900px;
}

#wrap01, #wrap03, #wrap04, #wrap06,#wrap07, #wrap09 {
	width:32.057416%;
	width:37%;
	max-width:335px;
	margin-left:1.5%;
}

#wrap03, #wrap06, #wrap09 {
	margin-left:-9%;
}

#wrap02, #wrap05, #wrap08 {
	width:35.885167%;
	width:41.5%;
	max-width:375px;
	margin-left:-9%;
}

#clip01 {
	background: url(../bilder/clip01_v2.png) left bottom no-repeat;

}
#clip02{
	background: url(../bilder/clip02_v2.png) left bottom no-repeat;
}
#clip03{
	background: url(../bilder/clip03_v2.png) left bottom no-repeat;
}
#clip04{
	background: url(../bilder/clip04_v2.png) left bottom no-repeat;
}
#clip05{
	background: url(../bilder/clip05_v2.png) left bottom no-repeat;
}
#clip06{
	background: url(../bilder/clip06_v2.png) left bottom no-repeat;
}
#clip07{
	background: url(../bilder/clip07_v2.png) left bottom no-repeat;
}
#clip08{
	background: url(../bilder/clip08_v2.png) left bottom no-repeat;
}
#clip09{
	background: url(../bilder/clip09_v2.png) left bottom no-repeat;
}

#clip01 a {
	background: url(../bilder/clip01_v2.png) left top no-repeat;

}
#clip02 a{
	background: url(../bilder/clip02_v2.png) left top no-repeat;
}
#clip03 a{
	background: url(../bilder/clip03_v2.png) left top no-repeat;
}
#clip04 a{
	background: url(../bilder/clip04_v2.png) left top no-repeat;
}
#clip05 a{
	background: url(../bilder/clip05_v2.png) left top no-repeat;
}
#clip06 a{
	background: url(../bilder/clip06_v2.png) left top no-repeat;
}
#clip07 a{
	background: url(../bilder/clip07_v2.png) left top no-repeat;
}
#clip08 a{
	background: url(../bilder/clip08_v2.png) left top no-repeat;
}
#clip09 a{
	background: url(../bilder/clip09_v2.png) left top no-repeat;
}

#clip01, #clip02, #clip03, #clip04, #clip05, #clip06, #clip07, #clip08, #clip09 {
	background-size:cover;
}

#clip01 a, #clip03 a, #clip04 a, #clip06 a, #clip07 a, #clip09 a {
	padding-top:56.1194029%;
	background-size:cover;
}

#clip02 a, #clip05 a, #clip08 a {
	padding-top:50.13333333333333%;
	background-size:cover;
}

#clip01 a, #clip02 a, #clip03 a, #clip04 a, #clip05 a, #clip06 a, #clip07 a, #clip08 a, #clip09 a {
	display:block;
	z-index:3;
	opacity:1;
	cursor:pointer;
	-webkit-transition: all 0.4s ease-out 0s;
	-moz-transition: all 0.4s ease-out 0s;
	-ms-transition: all 0.4s ease-out 0s;
	-o-transition: all 0.4s ease-out 0s;
	transition: all 0.4s ease-out 0s;	
}

#clip01 a:hover, #clip02 a:hover, #clip03 a:hover, #clip04 a:hover, #clip05 a:hover, #clip06 a:hover, #clip07 a:hover, #clip08 a:hover, #clip09 a:hover {
	opacity:0;
}

#shadow01, #shadow04, #shadow07 {
	padding-top:12.871287%;
	background: url(../bilder/clip-shadow-left.png);
	background-size:cover;
	background-repeat:no-repeat;
}

#shadow02, #shadow05, #shadow08 {
	padding-top:11.73333337%;
	background: url(../bilder/clip-shadow-middle.png);
	background-size:cover;
	background-repeat:no-repeat;
}

#shadow03, #shadow06, #shadow09 {
	padding-top:12.958435207%;
	background: url(../bilder/clip-shadow-right.png);
	background-size:cover;
	background-repeat:no-repeat;
}

#selected-animations p {
	font-size:1.05em;
	font-weight:400;
}

#selected-animations p.sub {
	font-size:0.85em;
	font-weight:300;
}


/* ---------------------- 03 SELECTED DESIGNS ---------------------- */
#selected-designs {
	padding-top:5em;
}

.design-wrap {
	width:93%;
	max-width:860px;
	margin:0 auto;
}

#design01 {
	background-position: 0 0;
}

#design07 {
	background-position: 0 -280px;
}

#design08 {
	background-position: -125px -110px;
}
/* alle ids, die mit "design0" beginnen bekommen diese Formatierung */
div[id^="design0"] {
	border:0.3em solid white;
	box-shadow: 0 0 0 1px #c8c8c8, 0 0 0 2px #fff;
}

.design-wrap a {
	padding-top:15%;
	background: url(../bilder/picture-hover-v2.png) center center no-repeat;
	background-size:cover;
	opacity:0;
	-webkit-transition: all 0.4s ease-out 0s;
	-moz-transition: all 0.4s ease-out 0s;
	-ms-transition: all 0.4s ease-out 0s;
	-o-transition: all 0.4s ease-out 0s;
	transition: all 0.4s ease-out 0s;
}

.design-wrap a:hover {
	opacity:1;
}

#selected-designs p {
	margin-left:1.5%;
	margin-top:-9.5%;	
	font-size:1.05em;
	font-weight:400;
}

#selected-designs p.sub {
	margin-left:1.5%;	
	margin-bottom:4%;
	font-size:0.85em;
	font-weight:300;
}



/* ---------------------- 04 CONTACT ---------------------- */
#contact {
	background-image:url(../bilder/contact_bg.png), url(../bilder/bg-rectangle.png);
	background-repeat:no-repeat, repeat;
	background-position: center 380px, left top;
}

#contact {
	padding-top:5em;
}

form label  {
	font-size: 1.2em;
	font-weight: 300;
}


form input[type="text"], form input[type="email"]  {
	padding: 0.8% 0;
	font-size: 0.9em;
	text-indent: 0.375em;
}

textarea {
	height: 16em;
	padding: 2% 1.5% 0;
	width: 96%;
	font-size: 0.9em;
	text-indent:0; /*reset*/
}

input[type="text"]:focus, form input[type="email"]:focus, textarea:focus {
	outline: 0;
	box-shadow:0 0 0 1px #c0c0c0, 0 0 0 2px #007eff;
}

input[type="submit"] {
	font-size: 1.1em;
	height: 2.8em;
	width: 5.5em;
	margin-top:-50px;
	margin-bottom:80px;
}


/* ---------------------- FOOTER ---------------------- */
#footer {
	padding:3% 0;
}

	
}

/*---------------------------------------------------------------------------------------------
-------------------------------------ab 1024px--------------------------------------------------
-----------------------------------------------------------------------------------------------*/
@media only screen and (min-width:1024px) {
/* ---------------------- NAVIGATION ---------------------- */
#header #nav {
	width:auto;
	top:1.6em;
}

#header #nav-wrap {
	margin:0 auto;
	height:5.625em;
	position:relative;
	width:850px;
}

#header #nav li {
	font-size:1.1em;
	width:auto;
}


#header #nav li:nth-child(3) {
	clear:none;/*reset*/
}

/* ---------------------- ABOUT ME ---------------------- */
#p-wrap {
	margin:0 auto;
	width:50%;
	padding-left:18%;	
}

#about-me p{
	font-size:1.0625em;
	z-index:1;
	left: auto;
/*	margin-left:auto;
	margin-right:auto;
*/	width:100%;
}

#about-me p#text1{
	padding-left:0.75em;
	margin-top:80px;
}

#about-me p#text2{
	padding-left:0.75em;
}

#about-me p#text3{
	padding-left:0.75em;
}

#about-me #nader-big{
	left:-50px;
	z-index:2;
}

#about-me p #nader-small{
	left:-99999px;
}



/* ---------------------- SELECTED DESIGNS ---------------------- */
div[id^="badge"] {
	width:74px;
	height:141px;
}


/* ---------------------- FOOTER ---------------------- */
#footer {
	padding:3% 0;
}

}

/*---------------------------------------------------------------------------------------------
-------------------------------------ab 1025px--------------------------------------------------
-----------------------------------------------------------------------------------------------*/
@media only screen and (min-width:1025px) {
#fsbutton {
	display:block;
	cursor: pointer;
	width: 22px;
	height: 22px;
	border: 0;
	position: fixed;
	z-index: 150;
	right: 10px;
	bottom: 10px;
	background-image: url(../bilder/fullscreen2.png);
	background-repeat: no-repeat;
	background-color:transparent;
	background-position:center center;
	box-shadow:0 0 0 1px transparent, 0 0 0 2px transparent;
}

}


/*---------------------------------------------------------------------------------------------
-------------------------------------ab 1250px--------------------------------------------------
-----------------------------------------------------------------------------------------------*/
@media only screen and (min-width:1250px) {
#header #nav-wrap {
	width:800px;
}
#header #nav-wrap #nav {
	right:auto;
}	
#fsbutton {
	width: 134px;
	height: 22px;
	background-image: url(../bilder/go-fullscreen2.png);
}

#p-wrap {
	padding-left:5%;	
}

}


/*---------------------------------------------------------------------------------------------
-------------------------------------ab 1700px--------------------------------------------------
-----------------------------------------------------------------------------------------------*/
@media only screen and (min-width:1700px) {
#about-me p#text1, #about-me p#text2, #about-me p#text3{
	padding:0.9em 1.1em;
}



}



/*---------------------------------------------------------------------------------------------
-------------------------------------PRINT--------------------------------------------------
-----------------------------------------------------------------------------------------------*/
@media print {
* {
	background-color:#60C !important;
	box-shadow:0 0 0 0 #fff !important;
}

#footer, #header, .iframebox, img, video {
	display:none!important;	
}

a[href^="http://"], a[href^="http://"] {
	background:none !important;
	padding-right:0 !important;
}

a[href^="http://"]:after, a[href^="http://"]:after {
	content:" ["attr(href)"] ";	
}

p, h1, h2, span, label {
	color:#000 !important;
}

}