/* Grundgerüst
-----------------------------------------------------------*/

body {
	font-family: 'Univers LT W04_55 Roman',Helvetica,sans-serif;
	background: #2D2520;
	font-size: 14px;
	color: #59452a;
	overflow: hidden;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}	


#frame3boxen {
	position: absolute;
	height: 320px; 
	width: 900px;
	margin: -160px 0px 0px -450px;
	top: 50%; 
	left: 50%;
}


#frame {
	width: 990px;
	position: absolute;
	height: 595px; 
	margin: -300px 0px 0px -470px;
	top: 50%;
	left: 50%;
	z-index: 10;
}

#main {
	float: left;
	width: 600px;
}

.fullwithImg {
	margin-left: 20px;
	display: block;
}
/*
#main.sansContentTop {
	padding-top: 400px;
}
*/


#sub {
	float: left;
	width: 300px;
	height: 595px;
	margin: 0 0 0 20px;
	background: #1f1916;
	background: #000;
}

#sub.small {
	height: 195px;
}

#box1 {
	float: left;
	width: 300px;
	height: 300px;
	background: #000;
	position: relative;
}

#box2 {
	position: relative;
	border: 2px solid #000;
	width: 296px;
	height: 296px;
	float: left;
	background: #000;
	overflow: hidden;
}

#box3 {
	color: #ededed;
	width: 260px;
	height: 260px;
	width: 300px;
	height: 300px;
	margin: 0 0 0 0;
	background: #fff;
	background: #1f1916;
	background-color: #1f1a17;
	float: left;
/* 	padding: 20px; */
	overflow: hidden;
}

#logoBox {
	background: #1f1916;
	clear: left;
}

#infoBox, #infoBoxHoch {
	padding: 20px;
	background: #1f1916;
	height: 195px;
	clear: left;
	color: #ededed;
	width: 560px;
}

#emptyBox {
	width: 600px;
	height: 400px;
	background: #000;
}

#infoBoxHoch {
	height: 555px;
}

#infoBox p, #infoBoxHoch p {
	margin: 0 0 1.28em 0;
	line-height: 1.28em;
}

#logoBox img {
	position: absolute;
	bottom: 13px;
	left: 33px;
}

.logoHome {
	position: absolute;
	top: 13px;
	left: 13px;
}

.nameHome {
	position: absolute;
	bottom: 13px;
	left: 13px;
}

a {
	color: #ff6600;
	text-decoration: none;
}

h1 {
	padding: 20px 20px 0 20px;
	font-weight: normal;
	/*text-transform: uppercase;*/
	font-size: 1em;
	line-height: 1.28em;
	/*line-height: 2.8em;*/
}


h2{
	padding: 0 0 0 0;
	font-weight: normal;
	/*text-transform: uppercase;*/
	font-size: 1em;
	line-height: 1.28em;
}

h3 {
	padding: 0 0 1.28em 0;
	margin: 0;
	font-weight: normal;
	font-family: 'Univers LT W04_55 Obliq',Helvetica, sans-serif;
	/*text-transform: uppercase;*/
	font-size: 1em;
	line-height: 1.28em;
}

p:last-child {
	padding: 0 0 1.28em 0;
/* 	line-height: 1.28em; */
}

#infoBox p.abstandOben {
	padding-top: 2.56em;
}

.italiano, em {
	font-family: 'Univers LT W04_55 Obliq',Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
}

#navBox {
	clear: both;
	width: 100%;	
}

#closeBox  {
	float: right;
	width: 20px;
}

a#closeBtn, a#nextBtn, a#prevBtn {
	text-indent: -99999em;
	position: absolute;
	float: right;
	top: 283px;
	right: 5px;
	width: 23px;
	height: 24px;
	background: transparent url(../_img/homeBtn.png) no-repeat center center;
}

a#nextBtn {
	width: 13px;
	height: 24px;
	top: 0px;
	right: 12px;
	background: transparent url(../_img/nextBtn.png) no-repeat center center;
}

a#prevBtn {
	width: 13px;
	height: 24px;
	top: auto;
	right: 12px;
	bottom: 0;
	background: transparent url(../_img/prevBtn.png) no-repeat center center;
}

#logo {
	padding: 0;
}

#emailBtn {
	position: absolute;
	left: 240px;
	bottom: 0px;
}

#sub img, #main img {
	float: left;
	margin: 0 0 0 0;
}

a.ytBtn, a#luigi, a#commedia, a#dualismus, #unendlicheWeiten, #email, #xing, #zwegiele, #dod, a#aldoRossi {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 35px;
	background: url(../_img/youtubeBtn.png) no-repeat center center;
	background-size: 100% auto;
	display: block;
	transform: translate(-600px,-235px);
	text-indent: -9999em;
	overflow: hidden;
}

a#luigi {
	width: 540px;
	height: 330px;
	background: url(../_img/luigiPirandello.png) no-repeat center center;
	transform: translate(650px,-300px);
}

a#commedia {
	width: 200px;
	height: 265px;
	background: url(../_img/commediaDellArte.png) no-repeat center center;
	transform: translate(680px,-400px);
}

a#dualismus {
	width: 280px;
	height: 180px;
	background: url(../_img/dualismus.png) no-repeat center center;
	transform: translate(-875px,200px);
}

#unendlicheWeiten {
	width: 100px;
	height: 34px;
	background: url(../_img/unendlicheWeiten.gif) no-repeat center center;
	transform: translate(-300px,-350px);
}

a#email {
	width: 28px;
	height: 21px;
	background: url(../_img/mailBtn.png) no-repeat center center;
	transform: translate(514px,-160px);
}

a#xing {
	width: 35px;
	height: 35px;
	background: url(../_img/xingBtn.png) no-repeat center center;
	transform: translate(515px,-35px);
}

a#zwegiele {
	width: 50px;
	height: 49px;
	background: url(../_img/zwegieleBtn.png) no-repeat center center;
	transform: translate(508px,90px);
}

#dod {
	width: 215px;
	height: 191px;
	background: url(../_img/dod.png) no-repeat center center;
	transform: translate(-900px,-80px);
}

a#aldoRossi {
	width: 434px;
	height: 534px;
	background: url(../_img/aldoRossi.png) no-repeat center center;
	transform: translate(760px,-500px);
}


/* Scroll
-----------------------------------------------------------*/

.simply-scroll-clip {
	height: 296px;
}


/* Container DIV - automatically generated */
.simply-scroll-container { 
	position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
	position: relative;
	overflow: hidden;
	z-index: 2;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
	
.simply-scroll-list li a {
	background: #1f1916;
	background: #000;
	border: none;
	display: block;
	width: 596px;
	width: 600px;
	width: 424px;
	color: #fff;
}

/*
.simply-scroll-list li a div {
	float: right;
	width: 180px;
	height: 300px;
	height: 296px;
}
*/

/* Custom class modifications - adds to / overrides above

.simply-scroll is default base class */

/* Container DIV */
.simply-scroll {
	position: absolute;
	/*float: left;*/

}

/* Clip DIV */
.simply-scroll .simply-scroll-clip {
	width: 300px;
	width: 296px;
	height: 300px;
	height: 296px;
}
	
/* Explicitly set height/width of each list item */	
.simply-scroll .simply-scroll-list li {
	float: left; /* Horizontal scroll only */
	width: 600px;
	width: 596px;
	width: 424px;
	height: 300px;
	height: 296px;
}




/* Scrollbar
-----------------------------------------------------------*/

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 6px;
	height: 100%;
	background: black;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 24px;
	/*background: red;*/
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	/*background: #000;*/
	position: relative;
}

.jspDrag
{
	background: #ff6600;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}


/* Clearfix
-----------------------------------------------------------*/
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}