/*
	 lxDriver - home stylesheet
	 http://lxdriver.de/grips
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

html, body, #wrap {
	height: 100%;
}

#wrap {
	width: 100%;
	height: 100%;
}
#slides {
	position: relative;
	width: 100%;
	overflow: hidden;
}

body { 
	background: #fff; 
	scrollbar-base-color: white;
/* 	font-family: 'PT Sans', sans-serif; */
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	/* font-weight: 600; */
	color: #888;
}

header {
	position: relative;
	top: 0px;
	min-height: 100px;
	height: auto;
	width: 100%;
}
p {
  	font-weight: normal;
}
a {
  	color: #888;
  	outline: none;
  	text-decoration: none;
  	width: auto;
}
a:visited {
  	color: #888;
  	text-decoration: none;
}
a:hover, a:active, a:focus {
	color: #888;
  	text-decoration: none;
  	outline: none;
}
h1 {
  	font-weight: 300;
  	font-size: 24px;
  	margin-top: 10px;
}
h2 {
	font-weight: 600;
	font-size: 14px;
	margin: 0px;
}

/* Footer */
footer {
 	position: absolute;
 	bottom: 0px;
 	width: 100%;
 	clear: both;
 	background-color: #fff;
	min-height: 50px;
	height: 8%;
	text-align: center;
	font-size: 16px;
}
footer p {
	display: block;
	width: 100%;
	position: absolute;
	bottom: 15px;
	z-index: 301;
}


/* CLEAR FIX */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}

/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Bereich nicht für IE-mac Ende */


/** SWIPE **/
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
	.swipe-wrap {
	  overflow: hidden;
	  position: relative;
	}
		.swipe-wrap > div {
		  float:left;
		  width:100%;
		  position: relative;
		}

/* Slider */
#slider {
	top: 2%;
	width: 100%;
	margin: 0 auto;
	height: 90%;
}
	#slider div {
		display:block;
		background: #fff;
		width: 100%;
		height: 100%;
	}
		#slider div span {
			position: absolute;
			display: block;
			width: 76%;
			height: 76%;
			background-size: contain;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			top: 12%;
			left: 12%;
		}
			#slider div b {
				display:block;
				font-weight:bold;
				color:#14ADE5;
				font-size:20px;
				text-align:center;
				padding:100px 10px;
			}
				#slider div img {
					display: block;
					max-width: 80%;
					max-height: 80%;
					margin: 0 auto;
					padding: 20px;
				}
					#slider .caption {
						position: absolute;
						height: auto;
						bottom: 2em;
						width: 80%;
						left: 50%;
						margin-left: -40%;
						text-align: center;
						font-size: 16px;
						padding-top: 10px;
					}

/* arrow */
.arrow {
	position: fixed;
	width: 100px;
	height: 100%;
	z-index: 100;
	top: 0;
}
	.arrow svg {
		position: absolute;
		width: 50px;
		height: 50px;
		top: 50%;
		left: 50%;
		margin-top: -25px;
		margin-left: -25px;
	}
		.arrow polygon {
			fill: #d3d3d3;
		}
			.arrow:hover polygon {
				fill: #929292;
			}
				#leftArrow { /* left arrow */
					left:0px;
				}
					#rightArrow { /* right arrow */
						right: 0px;
					}

/* logo */
#logo {
	display: block;
	position: fixed;
	top: 20px;
	left: 10%;
	width: 80%;
	margin: 0px auto; 
	text-align: left;
	z-index: 301;
	font-size: 1.8em;
	float: left;
	font-weight: 700;
	padding-left: 5px;
}

/* menu */
#menu {
	position: fixed;
	width: 50px;
	height: 50px;
	z-index: 101;
	top: 15px;
	right: 60px;
	font-weight: 600;
}
	#menu rect {
		fill: #d3d3d3;
	}
		#menu:hover rect {
			fill: #929292;
		}

/* menu title */
#menuTitle {
	position: fixed;
	height: 50px;
	line-height: 50px;
	vertical-align: middle;
	text-align: right;
	z-index: 101;
	top: 15px;
	right: 130px;
	font-weight: 200;
	font-size: 1.1em;
}
#menuTitle b {
	font-weight: 600;
}
/* menu page */
#menuPage,
#homePage {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 1;
	z-index: 300;
}
	#menuPage {
		display: none;
	}

/* menu close */
#menuClose {
	position: fixed;
	width: 50px;
	height: 50px;
	z-index: 101;
	top: 15px;
	right: 60px;
	display: none;
}
	#menuClose polygon {
		fill: #d3d3d3;
	}
		#menuClose:hover polygon {
			fill: #929292;
		}
		
/* MENU */
.menuWrap {
	position: relative;
	top: 15%;
	margin: 0 auto;
	width: 80%;
	height: 70%;
	/*box-shadow: 0px 0px 5px rgba(0,0,0,0.2);*/
}
	.menuItemWrap {
		position: relative;
		right: 0px;
		width: 25%;
		height: 100%;
		float: left;
		/* background-color: #f0f0f0; */
	}
		.subMenuItemWrap {
			position: relative;
			left: 0px;
			height: 100%;
			width: 75%;
			float: left;
			margin: auto 0;		
			display: none;
		}
		
			/* Clear floats */
			.menuItemWrap:before, 
			.menuItemWrap:after,
			.subMenuItemWrap:before, 
			.subMenuItemWrap:after { 
			    content: " "; 
			    display: table; 
			}
	 
				.menuItemWrap:after,
				.subMenuItemWrap:after { 
				    clear: both; 
				}

/* Menu Item */
.menuItem {
	position: relative;
	display: block;
	width: 100%;
	height: 11%;
	color: #a3a3a3;
	font-size: 18px;
	float: left;
	cursor: pointer;
    overflow: hidden;
    background-position: -50px center;
    background-size: auto 80%;
	background-repeat: no-repeat;
	transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
}
	/*
	.menuItem:hover {
		background-color: #b8b8b8;
		transition: background-color 0.5s ease;
	}*/
	.menuItem:hover {
/* 		background-color: #4d4d4d; */
		color: #666;
		font-weight: bold;
	}
	.menuItem:hover span,
	.menuItem.active span {
	/* 	color: #f0f0f0; */
		transition: color 0.5s ease;
	}
		.menuItem span {
			position: absolute;
			top: 50%;
			height: 30px;
			margin-top: -15px;
			vertical-align: middle;
			line-height: 30px;
			font-size: 1.5em;
			font-weight: 200;
			right: 12%;
		}
			@media (max-width: 1200px) {
				.menuItem span {
					font-size: 1em;
				}
			}
				@media (max-width: 700px) {
					.menuItem span {
						font-size: 0.7em;
					}
				}
					.active {
						/*background-image: url('../images/ui/fullArrow-R.svg');
						background-position: 70px center;
						background-size: auto 100%;
						background-color: #707070; */
						color: #000;
					}
						.inactive {
							background-position: -50px center;
							transition: background-position 0.3s linear;
							-webkit-transition: background-position 0.3s linear;
							-moz-transition: background-position 0.3s linear;
						}

/* Sub Menu Item */
.subMenuItem {
	position: relative;
	width: 33.33333%;
	height: 50%;
	color: #a3a3a3;
	
	font-size: 18px;
	float: left;
    display: block;
   	cursor: pointer;

    overflow: hidden;
}

	.subMenuItemWrap#paintingsItems .subMenuItem {
			width: 20%;
			float: right;
		}
		
	div#recentWorks.subMenuItem,
	div#editions.subMenuItem,
    div#installationview.subMenuItem
/* 	div#text.subMenuItem  */
	{
			background-size: 100% auto;
			width: 100%;
			height: 100%;

	}	
	
	div#recentWorks.subMenuItem .content,
	div#editions.subMenuItem .content,
    div#installationview.subMenuItem .content
/* 	div#text.subMenuItem .content  */
	{
		padding: 0;
		margin: 0;
		width: 99%;
		height: 100%;
		background-position: center center;
		background-size: contain;
		width: 100%;
		height: 100%;
		
	}


/*  !!!!!! neu !!!!!! */

	.subMenuItemWrap#objectsItems .subMenuItem {
		background-size: contain;
	}


	
	div#vitae.subMenuItem,
	div#text.subMenuItem {
		width: 100%;
		height: 100%;
		cursor: default;
	}
	div#vitae.subMenuItem div.content,
	div#text.subMenuItem div.content {
		overflow: auto;
	}
	.subMenuItem .contentWrapper {
		position: relative;
		
		height: 100%;
		/* background stuff */
	    
	    background-position: 0 0;
		background-repeat: no-repeat;
		 
/*
		background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size: cover;
*/
	}


		.subMenuItem .content {
			position: relative;
			/*padding: 10px;*/
			height: 94%;
			width: 94%;
			/* background stuff */
		    
		    background-position: 0 0;
			background-repeat: no-repeat;
			 

 			background-size: cover;
    		-moz-background-size: cover;
			-webkit-background-size: cover;
 

			margin-left: 3%;
			
		}

/* Christoph, für die mit mehreren items vollbildskalierung */	
	div#paintings.subMenuItem .content,
	div#paperworks.subMenuItem .content,
	div#objects.subMenuItem .content,
	div#installations.subMenuItem .content {
	    width: 100%;
		height: 100%;
		background-size: 100% auto;
		-moz-background-size: cover;
		-webkit-background-size: cover;
	}	
	
	
	

			.subMenuItem div.subOverlay {

				position: absolute;
				top: 0%; 
			    left: 0%;
				width: 100%;
				height: 100%;
				background-image: url(../images/ui/arrow-R-60.png);
				background-repeat: no-repeat;
				/* background-color: rgba(118,24,127,1); */
				background-position: center center;
				display: none;
			}
			.subMenuItem div.subOverlay p {
	

	
				color: rgba(255,255,255,0.6);
				font-size: 6em;
				font-weight: bold;
				text-align: center;


				/* vertical-align: middle;
				text-align: center;
				position: absolute;			
				top: 0%;
				width: 100%;
				margin-top: -20px; */
			}
			.subMenuItem span {
				position: absolute;
				width: 100%;
				text-align: center;
				bottom: 0px;
				padding-top: 10px;
				padding-bottom: 7px;
			 /* border-top: 1px solid #a3a3a3;
				border-left: 1px solid #626262;
				border-right: 1px solid #626262;
				border-bottom: 1px solid #626262;*/
				background-color: #fff;
			}
			.topItem {
				margin-bottom: 5%;
			}
			.bottomItem {
				margin-top: 8%;
			}
			
.floatingText {
	position: relative;
	width: 80%;
	margin: 0 auto;
	max-height: 80%;
	line-height: 25px;
	overflow: auto;
}

#contactPage,
#impressumPage {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 1;
	z-index: 400;
	display: none;
}
#contactPage div.content,
#impressumPage div.content{
	position: absolute;
	top: 25%;
	left: 20%;
	width: 40%;
}
.closeButton {
	position: fixed;
	width: 50px;
	height: 50px;
	top: 15px;
	right: 60px;
}

/*######### Instagram  #########*/
#instagramLink {
float: right;
	width: 30px;
	height: 30px;

}


	.closeButton polygon {
		fill: #d3d3d3;
	}
		.closeButton:hover polygon {
			fill: #929292;
		}
		

texteFormat {
	font-size: 0.8em;
	line-height: 1.5em;

}

texteFormat p {
	margin-right: 5%;
	margin-top: 20px;
	margin-bottom: 20px;	
}

/* Headline */
texteFormat h5 {
	font-weight: bold;
}

/* eingerückt kursiv */
texteFormat h6 {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: left; 
	margin-left: 50px;
	margin-right: 50px; 
	font-style: italic;
	font-weight: normal;
	font-variant: normal;
}

/* eingerückt normal */
texteFormat h4 {
	text-align: left; 
	margin-left: 50px;
	margin-right: 50px; 
	font-weight: normal;
	font-variant: normal;
	margin-bottom: 20px;
}



/* ***********   Fußnoten   ++++++++++++++ */
texteFormat h10 {
	text-align: left; 
	font-weight: normal;
	font-variant:normal;
	font-style: italic;
	font-size: 10px;
}

/* ##################  contact   ############# */
.content.contact {
	line-height: 1.5em;
}

/*################  Video embedded  ############*/
.video-container {
    position: absolute;
 left: 0; right: 0;
    top: 50%;
    margin-top: -28.1%;
    /* video height / video width */
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 25%;

    width: 50%;
    height: 50%;
}