@charset "utf-8";
/**
  * @link       </assets/css/spalash.css>
  * @version    1.0
  * @media      all
  * @css-for    all
  * @author     Ingo Wagener <http://atelierkrake.de>
  * @created    02.06.16
  */
  
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; }

body { min-height: 100%; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; color: #333}

body::after {
	position: fixed;
	right: 0; bottom: 0; left: 0;
	height: 10px;
	content: "";
	background: #000
} 

a { color: #333;  transition: all .4s ease }
a:hover { color: #666; text-decoration: none }

a[href^="mailto"] { text-decoration: none; border-bottom: 2px solid #666 }
a[href^="mailto"]:hover { border-color: #999 } 

h2, h3, h4 {margin-bottom: 15px; text-align: center }
h2 { font-size: 24px }
h3 { font-size: 22px }
h4 { font-size: 20px }

header {
	background: #000;
	width: 100%;
	height: 64px;
	position: absolute;
	top: 0; right: 0; left: 0;
	z-index: 10;
	text-align: center
}


header img { 
	width: 200px; 
	position: absolute; 
	top: 13px; right: 0; left: 0;
	margin: 0 auto;
}

header span { display: none }

.photo {
	height: 200px;
	background: url(../img/atelier-md.jpg) 50% 20px / cover no-repeat;
	transform: rotate(1deg)
}

p, address, ul {
	margin: 0 0 15px; 
	line-height: 1.6;
	font-style: normal
}

ul { list-style: square; padding: 0 30px}

main {
	box-sizing: border-box;
	max-width: 666px;
	margin: 0 auto;
	padding: 60px 15px;
}

main p.i {
	font-weight: 300;
	font-size: 20px; 
	letter-spacing: 2px; 
	line-height: 1.4;
	cursor: default;
}

main strong {
	display: inline-block;
	font-weight: 300;
	line-height: 1;
	transition: all .4s ease-in-out;
	border-bottom: 3px solid transparent
}
	
main p:hover strong { border-bottom-color: #ddd }

hr { 
	height: 1px;
	margin: 30px 0;
	background: #ddd;
	border: 0;
}

address h2 { display: none }
address { text-align: center; font-weight: 300 }

.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; margin-top: 30px } 
.embed iframe, .embed object, .embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 }
.small { font-size: 12px }