/* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: http://www.fontshop.com */
@font-face { font-family:"Seria W05 Regular"; src:url("/Fonts/5357148/f15359cf-56ba-4cff-a4fc-e3817b29875b.eot?#iefix"); src:url("/Fonts/5357148/f15359cf-56ba-4cff-a4fc-e3817b29875b.eot?#iefix") format("eot"),url("/Fonts/5357148/10f5b6cd-69de-402e-a3d0-5e9394d3cf3b.woff2") format("woff2"),url("/Fonts/5357148/25eb4069-3cd5-4dab-9a55-859cf8918d0b.woff") format("woff"),url("/Fonts/5357148/b8a6d959-8a8c-4544-825e-6cb6bba57728.ttf") format("truetype"); }
@font-face { font-family:"Seria Sans W05 Bold"; src:url("/Fonts/5353837/36ec4e84-21f2-444b-9f32-171623b03d64.eot?#iefix"); src:url("/Fonts/5353837/36ec4e84-21f2-444b-9f32-171623b03d64.eot?#iefix") format("eot"),url("/Fonts/5353837/0aed5dd5-3a95-4b74-8b96-9dd2b800b25b.woff2") format("woff2"),url("/Fonts/5353837/2c2bbb19-947d-465d-a9a2-a1a9f7397403.woff") format("woff"),url("/Fonts/5353837/2f32c703-fe1f-40dd-954a-f1fc69d9775f.ttf") format("truetype"); }


/* IconScreen.de, Matthias Ring, 11.2016 */
/* default
-------------------------------------------------------------- */
html,body,div,span,h1,h2,h3,h4,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,details,input,figure,figcaption,footer,header,menu,nav,output,section,summary,time,mark,audio,video,fieldset { padding: 0; margin: 0; border: 0; } article, aside, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section { display: block; }




/* general
-------------------------------------------------------------- */
html { font-size: 62.5%; border-left: 8px solid #e5f124; padding-right: 3%; padding-left: 3%; }

body { 
	margin: 0 auto;
	width: 100%; max-width: 1024px;	
	font-family: Seria W05 Regular, Times, serif;
	font-size: 2.4rem;
	line-height: 3.2rem;
	color: #333;
	background-color: #fefdf2;
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
	


/* ***  if very small then that */
		@media (max-width: 740px) { body { line-height: 1.2; }  }
		
a, a:link, a:visited { color: #ea5c45; text-decoration: none; border: 0; }
a.active, a:active, a:hover, a.grey, article header nav a { color: #7a7a7a !important; }
a:hover { border-bottom: 1px solid #7a7a7a;  }
h1 a:hover, h1 a.active { padding-bottom: 2px; }
a img, a img:hover, figure:hover a, a:hover img.left, .logo a { border: 0 !important; text-decoration: none; }
big { font-weight: bold; color: #c6d01d; }

.minismall { font-family: Seria W05 Regular, Times, serif; }



article nav, footer nav { font-family: Seria Sans W05 Bold, Arial, sans-serif; color: #999999; line-height: 1; }


/* indices
-------------------------------------------------------------- */
header#indices { margin-top: 8.75rem; margin-bottom: 12.25rem; min-height: 8.75rem; }
#indices a.active  { border-bottom: 2px solid #7a7a7a; }

section { width: 100% }
section figure img { margin: 0;  padding: 0; width: 100%;  height: 100%; }

section figure { 
    width: 32.8%;
    float: left; 
    padding-right: 0.8%; 
    margin-bottom: -2px; 
    overflow: hidden; position: relative; }

section figure:nth-child(3n) { padding-right: 0; }  

/* *** if very small then that */
		@media (max-width: 740px) { section figure { margin-bottom: -5px !important; }}

section figcaption { 
font-family: "Seria Sans W05 Bold", Helvetica, Arial, sans-serif; font-size: 2.6rem; color: #ea5c45; line-height: 1;
position: absolute; left: 6px; right: 0; bottom: 6px; padding: 0 0 6px 6px; }
section figcaption div { opacity: 0;   }

section figure:hover img {  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ opacity: 0.2; }
section figure:hover div { opacity: 1; top: 0; }

section:after { content: ""; display: table; clear: both; }

/* *** if very small then that */
		@media (max-width: 740px) { 
		header#indices { margin-top: 4.75rem; }
		header#indices { margin-bottom: 3rem; }
		section figcaption { display: none; } }
		
/* left-right */
#leftright { margin: 11rem auto 4rem auto; width: 100%; text-align: center; }
img.left, img.right { width: 40px; height: 40px; }
img.left { -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg) }
img.inactive, img.left:hover, img.right:hover {  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ }
img.inactive { opacity: .1; }

/* *** if very small then that */
@media (max-width: 740px) { #leftright { margin: 3rem auto 0 auto; } }

/* article
-------------------------------------------------------------- */
article { margin-top: 8.75rem; line-height: 1.3; }
article header { margin-bottom: 12.25rem; min-height: 8.75rem; }
article header nav { padding-top: 7px; }

h1 { 
	-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; 
	font-family: "Seria Sans W05 Bold", Helvetica, Arial, sans-serif; 
	font-size: 4.2rem;
	line-height: 1; 
	max-width: 90%; }

h2 { 
	-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; 
	font-family: "Seria Sans W05 Bold", Helvetica, Arial, sans-serif; 
	font-size: 3.4rem;
	line-height: 1;  }

article h2 { margin-top: 4rem; }
article h2:first-child { margin-top: 0; }
ul { list-style-type: circle; }

/* ***  if very small then that */
		@media (max-width: 740px) { 
		article { margin-top: 4.75rem; }
		article header { margin-bottom: 3rem; }
		article header nav { padding-top: 0; }
		h1 { font-size: 2.7rem; line-height: 1.1; letter-spacing: -0.025em; } 
		h2 { font-size: 2.5rem; line-height: 1.1; } 
		article h2 { margin-top: 2rem; } 
		article h2:first-child { margin-top: 0; }}

article p, article ul { margin-top: 1rem; width: 75%; }
article ul { padding-left: 20px; }
	
article p#skills {
	padding: 2.1rem 1rem 2.1rem 3rem;
	margin-left: 4rem;
	margin-bottom: 2rem;
	width: 48.5%;
	float: right;
	border: 8px solid #e5f124; }
	
.kundeSPACE, .projektSPACE { display: block; padding-bottom: 6px; }	

article p#skills { line-height: 1; }

/* ***  if very very small then that */
		@media (max-width: 380px) { article p#skills  {  line-height: 1.1; } }
	
#tags > a:after { content: ', '; }
#tags > a:last-child:after { content: ''; }


@media (max-width: 768px) { 
		article { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } }
	
/* ***  if very small then that */
		@media (max-width: 740px) { 
		article p { width: 100%; margin-top: 1rem; }	
		article ul { width: 90%; margin-top: 1rem; }	
		article p#skills { /* 23.2.2017; float none */ float: none; margin-bottom: 4rem; margin-left: 2rem; width: 85%;  border-right: 8px solid #e5f124; border-top: none; border-bottom: none; border-left: none; } 	}
		
article .pleft { width: 48%; float: left; }
article .pright { width: 48%; float: right; text-align: left; }

	
/* ***  if very small then that */
		@media (max-width: 740px) { 
		article .pleft, article .pright { width: auto; float: none; } 
		 }

/* article figure */
article figure { 
   line-height: 0; margin-top: 4rem;  margin-bottom: 3.5rem;
   -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
   -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; }
article figure.single { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }

article figure:first-child { margin-top: 0; }
article figure img { display: block; margin: 0; width: 100%; height: auto; padding-bottom: 6px; }

/* ***  if very small then that */
		@media (max-width: 740px) { article figure { -moz-column-count: 1; margin-bottom: 2rem; -webkit-column-count: 1; column-count: 1; } }
		
/* figcaption */
.figcaption { color: #999; font-size: 1.75rem; line-height: normal; padding-bottom: 15px; padding-right: 35%; }

/* ***  if very small then that */
		@media (max-width: 740px) {
		.figcaption { text-align: left; font-size: 1.75rem; line-height: 1; margin: 0%; border-bottom: 0; padding-right: 0; } }
		
		
table#listall { margin-top: 1rem; width: 95%; }
table#listall { font-size: 1.875rem; line-height: 1; }
table#listall td { padding: 1em 2rem;  border-bottom: 1px solid #ea5c45; }
table#listall td:first-child { border-bottom: none; }
.tagtag::after { content: " >";  }
a.tagtag { display: inline-block; margin: 0.45em 0.45em 0.45em 0; padding: 4px 10px 0 10px; border-radius: 6px; height: 24px; text-align: center; text-decoration: none; cursor: pointer; border: 1px solid #ea5c45; vertical-align: bottom; white-space: nowrap; -webkit-font-smoothing: antialiased; font-size: 90%; font-weight: 500; }

		

/* back */
#back { margin: 11rem auto 4rem auto; width: 100%; text-align: center; }
img.javascriptback { width: 50px; height: 50px; -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg) }
img.javascriptback:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ }




/* contact
-------------------------------------------------------------- */
.logo { display: block; font-family: Seria Sans W05 Bold, Arial, sans-serif; line-height: 0.9; }
i { display: block; font-weight: normal; font-style: normal; font-size: 1.8rem; line-height: 0.3; margin: 8px 0; color: #333333; }

#google-maps { padding-left: 25px; display: block; height: 25px; background-size: 15px 21px; 
background-repeat: no-repeat; background-image: url(/images/basic/map.png); 
background-position: left 3px; border: none !important; text-decoration: none; }
#google-maps:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */  
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);
filter: grayscale(100%); filter: gray; /* IE 6-9 */ }

blockquote { padding: 15px 15px 15px 30px; margin-top: 2rem; margin-bottom: 1.4rem;
  background: #f3f3f3; margin-top: 4rem; width: 72%; }

	
/* ***  if very small then that */
		@media (max-width: 740px) { 
		blockquote { width: 100%; margin-top: 1.4rem; }	}


/* form */
.field-container { margin-top: 0.75em 0 0.5em 0; padding-bottom: 1em; }
label { cursor: default; font-size: 2.25rem; }
	
/* ***  if very small then that */
		@media (max-width: 740px) { label { font-size: 2rem; } }

input[type="text"], input[type="tel"], input[type="number"],input[type="email"], textarea { width: 75%; background-color: #f4f3f1; color: #000000; border: 1px solid #999; 
font-size: 1.8rem; padding: 0.5rem 1rem; margin: 0; outline: 0; }
input[type="text"]:focus, textarea:focus { border-color: #e5f124; background-color: #fff; }
textarea { height: 9em; }
input[type="submit"] { width: 75%; height: 3.125em; background: #ea5c45; color: #000; border: 0; font-size: 1.8rem; padding: 0.4rem 3rem; margin: 0 0 10px 0;  -webkit-appearance: none; -webkit-font-smoothing: antialiased; display: block; }

/* ***  if very small then that */
		@media (max-width: 740px) {
		input[type="text"], input[type="tel"], input[type="number"],input[type="email"], textarea { width: 90%; }
		input[type="submit"] { width: 97%; } }

input.preview[type="submit"] { background: #cccccc;  height: 2em; opacity: 0.7; }
input[type=submit]:hover { text-decoration: none; background-color: #7a7a7a;  opacity: 1; }
em { color: red; font-size: 18px !important; font-style: italic; font-weight: normal; }

/* footer
-------------------------------------------------------------- */
footer { 
	margin: 12rem 0; 
	font-size: 2rem;
	line-height: normal;
	border-top: 1px solid #ea5c45; 
	border-bottom: 1px solid #ea5c45; }
footer:after { content: ""; display: table; clear: both; }
.adress span { display: none; }
footer p { margin-bottom: 2rem; }
footer p:first-child { margin-top: 2rem; }
footer #byline { width: 29.5%; float: left; padding-right: 20%; }
footer nav { margin-top: 2rem; width: 49.5%; float: right; text-align: right; line-height: 1.3; }

/* ***  if very small then that */
		@media (max-width: 740px) { 
		footer { margin: 3rem 0 12rem 0; }
		footer #byline { width: 100%; float: none; padding-right: 0; }
		footer nav { margin-top: 2rem; width: 100%; float: none; text-align: left; margin-bottom: 2rem; }  }

/* ***  if very very small then that */
		@media (max-width: 380px) { footer .logo { font-size: 2.3rem; }
		 footer nav { font-size: 2.2rem; }
		 footer i  { font-size: 2rem; } }


/* top */
#bodytop { margin: 0 auto 4rem auto; width: 100%; text-align: center; }
img.top { width: 50px; height: 50px; -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ transform: rotate(270deg) }
img.top:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ }






/* print
-------------------------------------------------------------- */
		@media print { 
		html { border-left: none; padding-right: 2%; padding-left: 6%; }
		body { font-size: 1.75rem; line-height: 2.25rem; }
		body { background-color: #fff; background-image: none !important; }
		*, a, a:link, a:visited { color: #000 !important; }
		nav, #bodytop, #leftright, .description, #back { display: none; } 
		footer { margin: 4rem 0; border-top: 1px solid #000; border-bottom: none; }
		.adress span { display: inline; }
		article { margin-top: 3rem; }
		article header, header#indices { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; min-height: auto; }
		h1 { font-size: 2.5rem; line-height: 1; } 
		article figure { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
		article figure img { display: block; margin: 0;  width: 65%; padding-bottom: 6px; }
		.figcaption { padding-right: 5%; font-size: 1.25rem; }
		#teaser img:first-child { float: left;  width: 49% !important; }
		#teaser img:last-child { float: right;  width: 49% !important; }
		article p#skills { border: 4px solid #000; max-width: 300px; padding: 1.5rem 1rem 1.5rem 2rem; margin-left: 2rem; margin-bottom: 1rem; }
		article p, article ul { margin-top: 2rem; width: 95%; } }