/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
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;

color: #333;
text-decoration: none;}

/* 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; }

@font-face {
    font-family: 'Play';
    src: url('play-regular-webfont.eot');
    src: url('play-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('play-regular-webfont.woff') format('woff'),
         url('play-regular-webfont.ttf') format('truetype'),
         url('play-regular-webfont.svg#Play') format('svg');
    font-weight: normal;
    font-style: normal;

}

a,p,span {
	font: 1em/1.5  'Play', Helvetica,Arial, sans-serif;
}

a:hover {
	color: #777;
}

html {
	background: #FFF url(bilder/seite-schatten.png) repeat-x 0 40px;
	height: 100%;
	font: 1em/1.5  'Play', Helvetica,Arial, sans-serif;
	overflow-y: scroll;
}

body {
	background: url(bilder/slider-schatten.jpg) no-repeat center 244px;
	min-height: 100%;
}

/* ---------------------- */

#inhalt {
	position: relative;
	top: 140px;
	/*height: 384px;*/
	width: 640px;
	margin: 0 auto;
/*padding-left: 1em;*/
}

.logo {
	position: absolute;
	left: 80px;
	top: 30px;
	/*position: absolute;
	top: -150px;
	left: -250px;*/
	// background: url(bilder/massimoschiano.png) no-repeat center center;
	background: url(bilder/massimo-schiano.png) no-repeat center center;
	display: block;
	width: 290px;
	height: 290px;
	z-index: 30;
	text-indent: -9000px;
	text-decoration: none;
}

.dateiliste a,
.accordion a {
	padding-left: 25px;
}

.dateiliste a {
	background: url('bilder/pdf.png') left top no-repeat;
}

.accordion h3:first-child  {
	background: url('bilder/vimeo.png') left 5px no-repeat;
}

.accordion li a {
	background: url('bilder/vimeo.png') left top no-repeat;
}

.accordion h3.ui-state-active {
	background: transparent;
}

.accordion,
/*.dateiliste,*/
p {
	margin-bottom: 1em;
}

iframe .player .only-in-fullscreen { display: block !important}
/* ------------------ Slider */
#sequence {
  position: relative;
top: 110px;
  height: 384px;
  height: 424px;
  width: 640px;
  margin: 0 auto;
  overflow: hidden;
  color: white;
  font-family: 'Play', sans-serif;
}
  #sequence > .sequence-canvas {
    height: 100%;
    width: 100%;
  }
    #sequence > .sequence-canvas > li {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    #sequence > .sequence-canvas li > * {
      position: absolute;
      -webkit-transition-timing-function: ease-in-out;
      -moz-transition-timing-function: ease-in-out;
      -ms-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
    }
  #sequence .sequence-next,
  #sequence .sequence-prev {
    position: absolute;
	top: 100%;
	z-index: 20;
	margin-top: -40px;
	height: 39px;
	width: 40px;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	text-align: center;
	font-size: 1.2em;
	line-height: 2em;

    display: none;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }
  #sequence .sequence-prev {
    left: 0;
	background-position: 0 0;}
    #sequence .sequence-next {
    right: 0;
	background-position: 100% 0;}
  #sequence .sequence-next {
    right: 0; }
  #sequence .sequence-next:hover,
  #sequence .sequence-prev:hover {
	color: #FFF;
	background-color: rgba(0, 0, 0, 1);
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }
  #sequence img {
    left: 100%;
    top: 0;
    width: 100%;
    z-index: 8;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
    -webkit-transition-property: left;
    -moz-transition-property: left;
    -ms-transition-property: left;
    -o-transition-property: left;
    transition-property: left;
  }
  #sequence .animate-in img {
    left: 0;
    z-index: 6;
    -webkit-transition-duration: 1.5s/**/;
    -moz-transition-duration: 1.5s/**/;
    -ms-transition-duration: 1.5s/**/;
    -o-transition-duration: 1.5s/**/;
    transition-duration: 1.5s/**/;
  }
  #sequence .animate-out img {
    left: -100%;
    z-index: 4;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
  }

#sequence .info h3 {
	z-index: 22;
	padding-left: 3em;
	line-height: 2.5em;
}

#sequence .info {
	width: 100%;
	bottom: 0;
    z-index: 16;

    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

#sequence .animate-in .info {
    -webkit-transition-duration: 1.5s/**/;
    -moz-transition-duration: 1.5s/**/;
    -ms-transition-duration: 1.5s/**/;
    -o-transition-duration: 1.5s/**/;
    transition-duration: 1.5s/**/;
}

#sequence .animate-out .info {
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

    #sequence .info.still {
	opacity: 0;

    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -ms-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
  }

#sequence .animate-in .info.still {
	opacity: 1;
}

#sequence .animate-out .info.still {
	opacity: 0;
}

#sequence .info.rein {
	left: -45%;
	left: -100%;
	left: 100%;
	opacity: 0.95;

    -webkit-transition-property: left opacity;
    -moz-transition-property: left opacity;
    -ms-transition-property: left opacity;
    -o-transition-property: left opacity;
    transition-property: left opacity;
}

#sequence .animate-in .info.rein {
	left: 0;
	opacity: 1;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

#sequence .animate-out .info.rein {
	left: 0.1%;
	opacity: 0;
}

#sequence .raus {
	left: 0;
	opacity: 0;

    -webkit-transition-property: left opacity;
    -moz-transition-property: left opacity;
    -ms-transition-property: left opacity;
    -o-transition-property: left opacity;
    transition-property: left opacity;
}

#sequence .animate-in  .raus {
	left: 0;
	opacity: 1;
}

#sequence .animate-out  .raus {
	left: -45%;
	left: -100%;
	opacity: .6;
}

/* ----------------- Accordion */


/* ------------------ Lightbox */
/**
 * Featherlight – ultra slim jQuery lightbox
 * Version 1.5.0 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2016, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
@media all {
  .lightbox {
    display: none;
  }

	.featherlight {
		display: none;

		/* dimensions: spanning the background from edge to edge */
		position:fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 2147483647; /* z-index needs to be >= elements on the site. */

		/* position: centering content */
		text-align: center;

		/* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
		white-space: nowrap;

		/* styling */
		cursor: pointer;
		background: #333;
		/* IE8 "hack" for nested featherlights */
		background: rgba(0, 0, 0, 0);
	}

	/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
	.featherlight:last-of-type {
		background: rgba(0, 0, 0, 0.8);
	}

	.featherlight:before {
		/* position: trick to center content vertically */
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -0.25em;
	}

	.featherlight .featherlight-content {
		/* make content container for positioned elements (close button) */
		position: relative;

		/* position: centering vertical and horizontal */
		text-align: left;
		vertical-align: middle;
		display: inline-block;

		/* dimensions: cut off images */
		overflow: auto;
		padding: 25px 25px 0;
		border-bottom: 25px solid transparent;

		/* dimensions: handling large content */
		margin-left: 5%;
		margin-right: 5%;
		max-height: 95%;

		/* styling */
		background: #fff;
		cursor: auto;

		/* reset white-space wrapping */
		white-space: normal;
	}

	/* contains the content */
	.featherlight .featherlight-inner {
		/* make sure its visible */
		display: block;
	}

	.featherlight .featherlight-close-icon {
		/* position: centering vertical and horizontal */
		position: absolute;
		z-index: 9999;
		top: 0;
		right: 0;

		/* dimensions: 25px x 25px */
		line-height: 25px;
		width: 25px;

		/* styling */
		cursor: pointer;
		text-align: center;
		font-family: Arial, sans-serif;
		background: #fff; /* Set the background in case it overlaps the content */
		background: rgba(255, 255, 255, 0.3);
		color: #000;
	}


	.featherlight .featherlight-image {
		/* styling */
		width: 100%;
	}


	.featherlight-iframe .featherlight-content {
		/* removed the border for image croping since iframe is edge to edge */
		border-bottom: 0;
		padding: 0;
	}

	.featherlight iframe {
		/* styling */
		border: none;
	}

	.featherlight * { /* See https://github.com/noelboss/featherlight/issues/42 */
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
	.featherlight .featherlight-content {
		/* dimensions: maximize lightbox with for small screens */
		margin-left: 10px;
		margin-right: 10px;
		max-height: 98%;

		padding: 10px 10px 0;
		border-bottom: 10px solid transparent;
	}
}