/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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; 
	overflow-x: hidden;}
	
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; }
	

@font-face	{ 		font-family: "hopitoy";
					src: url('../fonts/hopitoy-regular.otf');
					font-weight: 400;
					font-style: normal; }
				
body	 	{ 		font-size: 1px; 
					display: block; 
					background-color: #eee; }

h1, h2		{		font-family: "hopitoy", Arial, sans-serif;
					font-size: 30em;
					color: #000; }
				
p, a		{		font-family: "hopitoy", Arial, sans-serif;
					font-size: 16em;
					color: #000; }
					
.selected-work03 { 		font-size: 0.75em; }
					
					/* div für text */

.div01		{ 		position: absolute;
					top: 2%;
					left: 1%; }
				
.div02		{ 		position: absolute;
					bottom: 2%;
					left: 1%; 
					width: 20%; }
				
.div03		{ 		position: absolute;
					bottom: 2%;
					left: 20%; 
					width: 20%; }
				
.div04		{ 		position: absolute;
					bottom: 2%;
					left: 40%; 
					width: 20%; }

.div05		{ 		position: absolute;
					bottom: 20%;
					left: 1%; 
					width: 20%; }
					
.div06		{ 		position: absolute;
					bottom: 20%;;
					left: 20%; 
					width: 80%; }
					
.div07		{ 		visibility: hidden;
					position: absolute;
					bottom: 10%;
					left: 2%; 
					width: 80%; }
					
.div06 p 	{ 		padding-left: 0.5em;
					text-indent: -0.5em; }
					
#div05-content, #div06-content {
					position: absolute;
					bottom: 0px; 
					height: auto; }	
					
#div06-content	{ 	display: flex;
					flex-direction: column-reverse; }								

.div06-toggle:hover {
					cursor: hand; }
					
#div06-list	p	{ 	visibility: hidden; }

.selected-work02		{ 		visibility: hidden; }

.selected-work04 { 		visibility: hidden;} 

.div06-toggle:focus + #div06-list p {
  					visibility: visible; }
					
.div06-toggle:focus > .selected-work02 {
  					visibility: visible; }					

[tabindex] 	{ 		outline: none !important; }					
					
					/* mouseover für projektfotos */
					
.div06-list-span { 	
					cursor: hand; }

/* .div06-list-span01:hover #projekt01-01 {
					display: block; } */
				
					
.div06-img { 		position: fixed;
					top: 50%;
					left: 50%;
					width: 70%;
					transform: translate(-50%, -50%); 
					text-indent: 0em;
					display: none; }
					
.div06-img img {	width: 100%; 
					height: auto; }
					
.div06-img video {	width: 100%; 
					height: auto; }
					
.div06-list-span:hover .div06-img {
					display: block; 
					z-index: -5; }
					
					/* div für mouseover bilder */
				
.img01		{ 		position: absolute;
					top: 10%;
					left: 30%; 
					width: 40em;}

.img02		{ 		position: absolute;
					top: 20%;
					left: 70%; 
					width: 40em;}

.img03		{ 		position: absolute;
					top: 30%;
					left: 10%; 
					width: 40em;}

.img04		{ 		position: absolute;
					top: 40%;
					left: 50%; 
					width: 40em;}

.img05		{ 		position: absolute;
					top: 50%;
					left: 15%; 
					width: 40em;}

.img06		{ 		position: absolute;
					top: 60%;
					left: 35%; 
					width: 40em;}

.img07		{ 		position: absolute;
					top: 70%;
					left: 90%; 
					width: 40em;}

.img08		{ 		position: absolute;
					top: 80%;
					left: 60%; 
					width: 40em;}

.img09		{ 		position: absolute;
					top: 90%;
					left: 80%; 
					width: 40em; }
				
					/* img für mouseover bilder */

.img-src01	{ 		position: absolute;
					top: 10%;
					left: 60%;
					height: 80%;  
					z-index: 100; }
					
.img-src02	{ 		position: absolute;
					top: 20%;
					left: 30%;
					height: 70%;  
					z-index: 100; }
					
.img-src03	{ 		position: absolute;
					top: 20%;
					left: 40%;
					width: 50%;  
					z-index: 100; }
					
.img-src04	{ 		position: absolute;
					top: 10%;
					left: 5%;
					width: 50%;  
					z-index: 100; }
					
.img-src05	{ 		position: absolute;
					top: 10%;
					left: 10%;
					height: 80%;  
					z-index: 100; }

.img-src06	{ 		position: absolute;
					top: 40%;
					left: 50%;
					height: 50%;  
					z-index: 100;  }
					
.img-src07	{ 		position: absolute;
					top: 20%;
					left: 20%;
					height: 70%;  
					z-index: 100; }

.img-src08	{ 		position: absolute;
					top: 5%;
					left: 10%;
					width: 70%;  
					z-index: 100; }

.img-src09	{ 		position: absolute;
					top: 5%;
					left: 60%;
					height: 80%;  
					z-index: 100; }
									
#img-src01, #img-src02, #img-src03, #img-src04, #img-src05, 
#img-src06, #img-src07, #img-src08, #img-src09	
			{ 		visibility: hidden;
					opacity: 0;
					transition:  opacity 0.5s ease-in-out;
					-webkit-transition:  opacity 0.5s ease-in-out;
					-moz-transition:  opacity 0.5s ease-in-out;
					-o-transition:  opacity 0.5s ease-in-out;
					-ms-transition:  opacity 0.5s ease-in-out; }
					
#img01:hover #img-src01, #img02:hover #img-src02, #img03:hover #img-src03, #img04:hover #img-src04, 
#img05:hover #img-src05, #img06:hover #img-src06, #img07:hover #img-src07, #img08:hover #img-src08, 
#img09:hover #img-src09
			{ 		visibility: visible; 
					opacity: 1; }

					/* links */

a 			{ 		text-decoration: none; 
					color: #000; 
					font-size: 1em; }
					
.cryptedmail:after {	content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); }
					
@media (max-width: 1024px) { 
	
	p			{		font-size: 14em; }
	
	a 			{ 		font-size: 0.93em; }
	
	h1, h2		{		font-size: 27em; }	
						
	.div05		{ 		bottom: 15%; }

	.div06		{ 		bottom: 15%; }
	
	.div06-img { 		width: 90%; } 
	
	.img-src01	{ 		position: absolute;
						top: 10%;
						left: 40%;
						height: 80%;  
						z-index: 100; }
}
	
@media (max-width: 768px) { 

	p		{		font-size: 13em; }
	
	h1, h2		{		font-size: 25em; }	
					
	.div01 		{ 		top: 1.5%; }
	
	.div02, .div03, .div04 { bottom: 1%; }

	.div05		{ 		bottom: 20%;}

	.div06		{ 		bottom: 20%;  
						left: 42%; }

	.div06-img { 		width: 90%; }
		
	.img01, .img02, .img03, .img04, .img05,
	.img06, .img07, .img08, .img09
				{ 		width: 25em; } 

	.img-src01	{ 		top: 10%;
						left: 5%;
						height: 80%; }
}
				
@media (max-width: 640px) { 

	.div01, .div02, .div05 		{ left: 2%; }
	
	.div01 				{ top: 2%; }
	
	.div05		{ 		bottom: 13%; 
						width: 40%; }

	.div06		{ 		bottom: 13%; 
						left: 41%; }
	
	.img-src01	{ 		top: 10%;
						left: 5%;
						height: 80%; }
}
	
	
@media (max-width: 480px) { 

	.div01, .div02 		{ left: 2%; }
	
	.div01 				{ top: 2%; }
	
	.div05, .div06		{ display: none; }
	
	.div07 				{ visibility: visible; }
	
	.img-src01	{ 		top: 10%;
						left: 5%;
						height: 70%; }
					
	.img-src05	{ 		top: 10%;
						left: 10%;
						height: 60%; }

	.img-src07	{ 		top: 20%;
						left: 5%;
						height: 70%; }

	.img-src09	{ 		top: 5%;
						left: 50%;
						height: 80%; }
}
	
	
@media (max-width: 415px) { 

	.div01, .div02 		{ left: 2%; }
	
	.div01 				{ top: 2%; }
	
	.div05, .div06		{ display: none; }
	
	.div07 				{ visibility: visible; }
											
	.selected-work04 	{ visibility: visible; }
	
	.selected-work01, .selected-work02, .selected-work03 
						{ display: none; }
						
	.img-src01	{ 		left: 20%;
						height: 80%; }
}

/* iphone 6 */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) { 

	h1, h2				{ font-size: 60em; }
	
	p 					{ font-size: 30em; }
	
	.div01, .div02 		{ left: 2%; }
	
	.div01 				{ top: 2%; }
	
	.div05, .div06		{ display: none; }
	
	.div07 				{ visibility: visible; }
											
	.selected-work04 	{ visibility: visible; }
	
	.selected-work01, .selected-work02, .selected-work03 
						{ display: none; }
						
	.img-src01	{ 		left: 20%;
						height: 80%; }
} 

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 

	h1, h2				{ font-size: 60em; }
	
	p 					{ font-size: 30em; }
	
	.div01, .div02 		{ left: 2%; }
	
	.div01 				{ top: 2%; }
	
	.div05, .div06		{ display: none; }
	
	.div07 				{ visibility: visible; }
											
	.selected-work04 	{ visibility: visible; }
	
	.selected-work01, .selected-work02, .selected-work03 
						{ display: none; }
						
	.img-src01	{ 		left: 20%;
						height: 80%; }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 

	h1, h2				{ font-size: 60em; }
	
	p 					{ font-size: 30em; }
	
	.div01, .div02 		{ left: 2%; }
	
	.div01 				{ top: 2%; }
	
	.div03				{ position: fixed;
						  
						  top: 40%;
						  	right: 2%; }
	
	.div05, .div06		{ display: none; }
	
	.div07 				{ visibility: visible; }
											
	.selected-work04 	{ visibility: visible; }
	
	.selected-work01, .selected-work02, .selected-work03 
						{ display: none; }
						
	.img-src01	{ 		left: 20%;
						height: 80%; }
}