/* 
CSS File for theme 'Avital'
HERRMANN GERMANN, July 2013/April 2020 
*/

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

/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html { outline:none; }
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; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }
body {
  line-height: 1; overflow-y:scroll; }
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; }
.navi_mobile { display:none; }


/* #Basic Styles
================================================== */
body {
	background: #f8e6c6;
	font: 19px/24px 'futmedium', Arial, sans-serif;
	color: #000;
	letter-spacing:0.075em;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	animation: colorchange 40s;
    -webkit-animation: colorchange 40s;
}

@keyframes colorchange
{
	0%   {background: #e8edeb;}
	33%  {background: #e6dede;}
	66%  {background: #f8e6c6;}
	100% {background: #e8edeb;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
	0%   {background: #e8edeb;}
	33%  {background: #e6dede;}
	66%  {background: #f8e6c6;}
	100% {background: #e8edeb;}
}

body#portrait { background: #e6dede; }
body#repertoire { background: #e8edeb; }


a { color:#000; text-decoration: none; border-bottom: 1px dotted #000; }
a:hover { border-bottom: 2px solid #000; }
#aktuell a { border:0; }

img { border: 0; }
p { padding: 0; margin: 0; line-height: 1.4em; }
h1, h2, h3 { padding: 0; margin: 0; font-weight: normal; }
h1 { font: 19px/29px Georgia, serif; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom:20px; }
strong { font: 21px/29px Georgia, serif; }
strong a { border-bottom:1px solid #000; }
em { text-transform:uppercase; }
u { text-decoration: none; font-style: italic; }
small { font-size: 15px; }
s { border-bottom:2px solid #000; display: block; width: 100%; margin: 0 0 10px; }

.align-left { float: left; }
.align-right { float: right; }
.align-center { margin: 0 auto 0 auto; }

#wrapper { padding:33px 0 0 0; }
header { height:183px; }
#content { min-height: calc(100vh - 243px); }
#title { position:absolute; top:31px; right:38px; }
#title a { border:0; }
#footer { margin-bottom: 10px; padding: 120px 0 10px 0; }
.page-text { max-width: 500px; }
#tickets .page-text { max-width:100%; }
#portrait strong { padding-right:30px; }
#fb { float:right; margin-right:50px; margin-bottom:15px; opacity:.7; }
#fb:hover { opacity: 1; }

#menu { text-transform: uppercase; font-size:18px; letter-spacing: 0.1em; }
#menu ul, #menu li { margin: 0; padding: 0; list-style: none; }
#menu ul { width: 100%; }
#menu li { display: block; margin:0 0 6px 0; }
#menu li a { color:#000; border:0; }
#menu li a:hover, #menu li.active a { padding-left:30px; text-decoration:none; background:url(../img/flute.png) 0 5px no-repeat; }

.project-link {	display: block;	float: left;	margin: 0 10px 10px 0;	width: 230px;	text-align: center;	overflow: hidden;	outline: none; }
.project-link .thumbnail { display: block;margin-bottom: 5px;	height: 110px; background-color: #EEE; }
.project-link .thumbnail:hover, .front_slideshow_image:hover img {
	opacity: 0.75;
	-moz-opacity: 0.75;
	filter:alpha(opacity=75); }
.project-link img { display: block; }
.project-info {	margin-bottom: 10px; }
.project-info h2 { margin-bottom: 0; }
.tags { margin-bottom: 5px; width: 240px; }
.tags, .tags a { color: #999; }
.tags a:hover { color: #EF2400; }

.fileGroup { float: left; margin: 0 10px 20px 0; width: 100%; }
.file { float: left; }
.one-by-one .file { margin-right:10px; margin-bottom:15px; }
.one-by-one .file:nth-child(2n+3) { margin-right:0; }
#home .fileGroup { float:right; margin: 0 30px 0 0; width: auto; }
#home .file { float: right; cursor:pointer; }
.file img { display: block; margin-bottom: 1px; max-width: 680px; height: auto; }
.textblock { width: 100%; margin-bottom:20px; }
.slideshow .slides { min-height: 520px; }
.slideshow .slideshow-nav { margin-bottom: 5px; clear:both; }
.file .info { margin-bottom:10px; }
.slideshow .slideshow-nav a, .file .info .title { color: #000; font-size:15px; }
.slideshow .slideshow-nav, .file .info .caption { color: #000; font-size:15px; }
.slideshow .slideshow-nav .currentSlide { font-weight: 700; }

.audiojs {
    background: none repeat scroll 0 0 #444444;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    font-family: monospace;
    font-size: 12px;
    height: 36px;
    overflow: hidden;
    width: 380px;
    margin-top:5px;
}

.fluid-width-video-wrapper {
	margin: 10px 0;
}

#repertoire iframe { margin-top:5px; }
/*
 * Blog
 */

#aktuell { margin:162px 0 0 30px; }
.akttit { display:block; margin-bottom:5px; font: 12px/19px Georgia, serif; color:#666; letter-spacing:0.2em; text-transform: uppercase; }
#agenda .post hr { margin:30px 0; }
#home .post { margin-bottom:20px; }
.postTitle { margin-bottom: 0; }
.postTitle a, .postTitle strong { border:0; color:#000; }
.postTitle strong {  display:block; }
.postTitle a:hover { color:#000; border-bottom:1px solid #000; }
#aktuell .post a { color:#666; }
#aktuell .post a:hover { color:#000; border:0; }
.post img { display: block; margin: 0 0 10px 0; padding: 0; }
.post .text { margin: 10px 0 0 0; }
.post .more { margin-left: 5px; font-size: 1em; color: #EF2400; }
.post .more:hover { color: #999; }
.back { color: #EF2400; }
.back:hover { text-decoration: underline; }
.alt, .alt a { color:#444 !important; }

.scrollup {
	content: url(../img/up.svg);
	bottom: 60px;
	display: none;
	height: 32px;
	width: 32px;
	position: fixed;
	z-index:10000;
	left: calc(50% - 11px);
}	
	
/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	.content ul li {  }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

/* #Images
================================================== */
	img.scale-with-grid, .file img {
		max-width: 100%;
		height: auto; }


/* #Buttons
================================================== */
	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
	  background: #fff; /* Old browsers */
	  border: 1px solid #aaa;
	  border-top: 1px solid #ccc;
	  border-left: 1px solid #ccc;
	  padding: 4px 12px;
	  -moz-border-radius: 3px;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  color: #000;
	  display: inline-block;
	  font-size: 14px;
	  text-decoration: none;
	  cursor: pointer;
	  margin-bottom: 10px;
	  line-height: normal;
	  padding: 5px 5px; }
	
	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: #222;
		background: #eee; 
	  border: 1px solid #888;
	  border-top: 1px solid #aaa;
	  border-left: 1px solid #aaa; }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		border: 1px solid #666;
		background: #fff; }

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}

/* #Forms
================================================== */

	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 14px "csans", Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }


	.acc-item hr, #agenda hr {
		border-bottom:2px solid #000;		
	}

	#agenda .alt hr {
		border-bottom:2px solid #666;		
	}

	.toggle {
	    margin-bottom: 12px;
	    cursor: pointer;
	    position: relative;
	    transition: all 0.5s ease;
	    width: 100%;
	}

	.toggle::after {
		position: absolute;
		width:22px;
		height:22px;
		text-align: center;
		right:12px;
		top:0;
		content: url(../img/down.svg);
	}

	.toggle.open::after {
		content:url(../img/up.svg);
	}

	.acc-content {
		overflow: hidden;
        display: none;
        width:100%;
        padding-bottom:45px;
	}

/* #Misc
================================================== */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }


/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	body { font-size: 16px; line-height:21px; }
	header { height:275px !important; }
	#title { top:5px; left:0; }
	#agenda #content { padding-left:0 !important; }
	#menu { position:absolute; top:100px; margin-left:0 !important; }
	.textblock { margin-bottom:30px !important; }
	#home .file img { max-width:300px; height:auto !important; }
	#home .fileGroup { float:left !important; margin-bottom:30px !important; }
	#home #aktuell { margin:0 !important; }
	.audiojs { width:100% !important; }
	#repertoire iframe { width:100% !important; height:auto !important; }
	strong { font-size:17px !important; line-height:23px !important; }
	#portrait strong { padding-right:0 !important; }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
}