@charset "UTF-8";
/* * * * * * * * * * * * * * *

    style.scss
    
* * * * * * * * * * * * * * */
/*	Farben													*/
/*	maximale Breite des Wrappers							*/
/*	Höhe der Navigation; = offset-top vom Body 
	TODO: -> irgendwie offset im SmoothScrolling Script		*/
/*	PaddingTop der Sections, Abstand zum Header				*/
/* 	dauer der loading-animation 							*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
a, hr {
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, hr, menu, nav, section {
  display: block; }

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0; }

ins, mark {
  background-color: #ff9;
  color: #000; }

body {
  line-height: 1; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none; }

a {
  margin: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0; }

ins {
  text-decoration: none; }

mark {
  font-style: italic;
  font-weight: 700; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0; }

input, select {
  vertical-align: middle; }

/* * * * * * * * * 

_basics.scss

* * * * * * * * */
*, *:before, *:after {
  box-sizing: inherit; }

html {
  box-sizing: border-box; }

img {
  width: 100%;
  height: auto;
  min-height: 1em; }

html {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%; }

button,
label,
input[type=button],
input[type=submit] {
  cursor: pointer; }

/**
 * Flex Grid -
 * Version: 0.3.2
 *
 * Simple grid built with flex box and sass.
 *
 * Matthew Simo - matthew.a.simo@gmail.com
 */
/**
 * Grid setup
 *
 * The grid will calculate dimensions based on these two variables:
 * $fg-columns will inform the grid loops how many columns there should be.
 * $fg-gutter will inform the grid loops how big eac column's gutters should be.
 *
 * The grid will name columns, rows, offsets based on these three variables:
 * $fg-class-row string used for the row class
 * $fg-class-col string used for the column class
 * $fg-class-off string used for the offset class
 */
/**
 * Break point namespace object
 *
 * Set the default namespace object with these defaults with the
 * understanding that you can pass in whatever you might require for your site.
 *
 * $fg-breakpoints is a Sass list with nested lists inside. Each sub list defines two things.
 * 1. The namespace for that breakpoint. (Required) (i.e. xs, sm, md, lg)
 * 2. The min-width measurement for the breakpoint for that namespace. (i.e. 48em, 62em, 75em)
 *
 * Note: These should be in the proper order (at least till libsass handles map keys properly).
 *
 * Note: If the measurement is left out then it will be skipped when generating
 * the grid and applied to global styles.
 *
 */
/**
 * Class Name Defaults
 *
 * Define class names for columns, rows and offsets in case compatibility with other
 * libraries is necessary.


/**
 * Calculate column size percentage
 */
/**
 * Spacing mixin to create uniform margin/padding
 */
/**
 * Row wrapper class, flex box parent.
 */
.row, section.welcome, section.soundtrips-small, .soundtrip-large, .videos,
.fotos, section.downloads, section.kontakt, section.staedte {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem; }

.col-xs, .col-sm, .col-md, .col-lg, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, section.welcome > h2, section.welcome > p, section.soundtrips-small > .soundtrip-small-wrapper, section.soundtrips-small > .small-link-older, .soundtrip-large > h3, .soundtrip-large > main, .soundtrip-large > aside, .soundtrip-large > .backtop, .videos > .galerie-item,
.fotos > .galerie-item, section.downloads > h3, section.downloads > .download, section.kontakt > main, section.kontakt > aside, section.staedte > ul.staedte-list, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

.col-xs, .col-sm, .col-md, .col-lg {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%; }

/**
 * Generate a set of grid column classes using a namespace
 *
 * .col-[namespace] for intelligent column division
 * .col-[namespace]-[number] for a column that covers a specific number of columns (e.g. 1-12 by default)
 * .off-[namespace]-[number] for pushing a col a specific number of columns (e.g. 1-11 by default)
 */
/**
 * Build the grid in two steps, to help minimize file size
 * Step 1, for each namespace, create the grid-base
 * Step 2, for each namespace, wrap the col width/offset measurements in their breakpoint media query
 */
.col-xs-1 {
  flex-basis: 8.33333%;
  max-width: 8.33333%; }

.col-xs-2 {
  flex-basis: 16.66667%;
  max-width: 16.66667%; }

.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%; }

.col-xs-4 {
  flex-basis: 33.33333%;
  max-width: 33.33333%; }

.col-xs-5 {
  flex-basis: 41.66667%;
  max-width: 41.66667%; }

.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%; }

.col-xs-7 {
  flex-basis: 58.33333%;
  max-width: 58.33333%; }

.col-xs-8 {
  flex-basis: 66.66667%;
  max-width: 66.66667%; }

.col-xs-9 {
  flex-basis: 75%;
  max-width: 75%; }

.col-xs-10 {
  flex-basis: 83.33333%;
  max-width: 83.33333%; }

.col-xs-11 {
  flex-basis: 91.66667%;
  max-width: 91.66667%; }

.col-xs-12, section.welcome > h2, section.welcome > p, section.soundtrips-small > .soundtrip-small-wrapper, section.soundtrips-small > .small-link-older, .soundtrip-large > h3, .soundtrip-large > main, .soundtrip-large > aside, .soundtrip-large > .backtop, .videos > .galerie-item,
.fotos > .galerie-item, section.downloads > h3, section.downloads > .download, section.kontakt > main, section.kontakt > aside, section.staedte > ul.staedte-list {
  flex-basis: 100%;
  max-width: 100%; }

.off-xs-1 {
  margin-left: 8.33333%; }

.off-xs-2 {
  margin-left: 16.66667%; }

.off-xs-3 {
  margin-left: 25%; }

.off-xs-4 {
  margin-left: 33.33333%; }

.off-xs-5 {
  margin-left: 41.66667%; }

.off-xs-6 {
  margin-left: 50%; }

.off-xs-7 {
  margin-left: 58.33333%; }

.off-xs-8 {
  margin-left: 66.66667%; }

.off-xs-9 {
  margin-left: 75%; }

.off-xs-10 {
  margin-left: 83.33333%; }

.off-xs-11 {
  margin-left: 91.66667%; }

@media only screen and (min-width: 768px) {
  .col-sm-1 {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .col-sm-2 {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .col-sm-3 {
    flex-basis: 25%;
    max-width: 25%; }
  .col-sm-4, section.soundtrips-small > .soundtrip-small-wrapper, .soundtrip-large > main, .videos > .galerie-item,
  .fotos > .galerie-item, section.downloads > .download, section.kontakt > main {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .col-sm-5 {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%; }
  .col-sm-7 {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .col-sm-8, .soundtrip-large > aside, section.kontakt > aside {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .col-sm-9 {
    flex-basis: 75%;
    max-width: 75%; }
  .col-sm-10 {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .col-sm-11 {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .col-sm-12 {
    flex-basis: 100%;
    max-width: 100%; }
  .off-sm-1 {
    margin-left: 8.33333%; }
  .off-sm-2 {
    margin-left: 16.66667%; }
  .off-sm-3 {
    margin-left: 25%; }
  .off-sm-4 {
    margin-left: 33.33333%; }
  .off-sm-5 {
    margin-left: 41.66667%; }
  .off-sm-6 {
    margin-left: 50%; }
  .off-sm-7 {
    margin-left: 58.33333%; }
  .off-sm-8 {
    margin-left: 66.66667%; }
  .off-sm-9 {
    margin-left: 75%; }
  .off-sm-10 {
    margin-left: 83.33333%; }
  .off-sm-11 {
    margin-left: 91.66667%; } }

@media only screen and (min-width: 992px) {
  .col-md-1 {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .col-md-2 {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%; }
  .col-md-4 {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .col-md-5 {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .col-md-6 {
    flex-basis: 50%;
    max-width: 50%; }
  .col-md-7 {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .col-md-8 {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .col-md-9 {
    flex-basis: 75%;
    max-width: 75%; }
  .col-md-10 {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .col-md-11 {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .col-md-12 {
    flex-basis: 100%;
    max-width: 100%; }
  .off-md-1 {
    margin-left: 8.33333%; }
  .off-md-2 {
    margin-left: 16.66667%; }
  .off-md-3 {
    margin-left: 25%; }
  .off-md-4 {
    margin-left: 33.33333%; }
  .off-md-5 {
    margin-left: 41.66667%; }
  .off-md-6 {
    margin-left: 50%; }
  .off-md-7 {
    margin-left: 58.33333%; }
  .off-md-8 {
    margin-left: 66.66667%; }
  .off-md-9 {
    margin-left: 75%; }
  .off-md-10 {
    margin-left: 83.33333%; }
  .off-md-11 {
    margin-left: 91.66667%; } }

@media only screen and (min-width: 1200px) {
  .col-lg-1 {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .col-lg-2 {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .col-lg-3 {
    flex-basis: 25%;
    max-width: 25%; }
  .col-lg-4 {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .col-lg-5 {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .col-lg-6 {
    flex-basis: 50%;
    max-width: 50%; }
  .col-lg-7 {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .col-lg-8 {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .col-lg-9 {
    flex-basis: 75%;
    max-width: 75%; }
  .col-lg-10 {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .col-lg-11 {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .col-lg-12 {
    flex-basis: 100%;
    max-width: 100%; }
  .off-lg-1 {
    margin-left: 8.33333%; }
  .off-lg-2 {
    margin-left: 16.66667%; }
  .off-lg-3 {
    margin-left: 25%; }
  .off-lg-4 {
    margin-left: 33.33333%; }
  .off-lg-5 {
    margin-left: 41.66667%; }
  .off-lg-6 {
    margin-left: 50%; }
  .off-lg-7 {
    margin-left: 58.33333%; }
  .off-lg-8 {
    margin-left: 66.66667%; }
  .off-lg-9 {
    margin-left: 75%; }
  .off-lg-10 {
    margin-left: 83.33333%; }
  .off-lg-11 {
    margin-left: 91.66667%; } }

/*
    _clearfix.scss
    
*/
/*    Usage

.container-with-floated-children {
  @extend %clearfix;
}

*/
/*
    _center-hori-vert.scss

Assuming the parent element has position: relative;, 
these four properties will center a child element both horizontally and vertically inside, 
no matter what the width of height of either are.

*/
/*  Usage:


.parent {
  position: relative;
}
.child {
  @include centerhv;
}


*/
/*
    _transition.scss
    
*/
.hamburger, .hamburger [class^="hamburger-bar-"], nav.main-nav .main-nav-list, nav.main-nav .main-nav-list li a:hover {
  -webkit-transition: all 275ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 275ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 275ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 275ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* easeOutQuad */
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* easeOutQuad */ }

/* * * * * * * * * * * * * 
    
    typo.scss

        1. Basic Font Properties
        2. Basic Text Styles
        3. Links
        4. Text Selection
        5. OpenType Typography
        6. Text Rendering
        7. Silbentrennung
        8. Blockquote
        9. Sub- & Superscripts


* * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * *
        @ font face
    * * * * * * * * * * * * * * * * */
@font-face {
  font-family: '__Weissenhof Grotesk_5';
  src: url("../fonts/weissenhof/30771e_0_0.ttf") format("truetype");
  src: url("../fonts/weissenhof/30771e_0_0.woff") format("woff"); }

/* * * * * * * * * * * * * * * * *
        1. Basic Font Properties
    * * * * * * * * * * * * * * * * */
body {
  font: 100%/1.5;
  font-family: open-sans, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 {
  font-family: '__Weissenhof Grotesk_5' , __Weissenhof Grotesk_5 , Weissenhof Grotesk, serif;
  line-height: 1.5; }

/* http://webdesign.tutsplus.com/articles/a-web-designers-typographic-boilerplate--webdesign-15234 */
h1 {
  font-size: 2em;
  /* 2*16 = 32 */ }

/* Überschrift im Header */
h2 {
  font-size: 4.375em;
  /* 4.375*16 = 70 */
  font-weight: 400;
  /*
		margin-top: 1em;
		margin-bottom: 0.5em;
*/ }

/* Überschrift Soundtrip Large, */
h3 {
  font-size: 2.1875em; }

/* Soundtrip Large Artist, Country */
h4 {
  font-size: 1.25em;
  font-weight: bold; }

/* Soundtrip Large Artist, Instrument */
h5 {
  font-size: 1em; }

h6 {
  font-size: 0.75em;
  /* 0.75*16 = 12 */ }

p {
  line-height: 1.5;
  margin: 0 0 1em;
  font-size: 1em;
  /* 1*16 = 16 */
  font-weight: 400; }

/* * * * * * * * * * * * * * * * *
        2. Basic Text Styles
    * * * * * * * * * * * * * * * * */
strong {
  font-weight: bold; }

em {
  font-style: italic; }

small {
  font-size: 80%; }

/* * * * * * * * * * * * * * * * *
        3. Links
    * * * * * * * * * * * * * * * * */
a {
  text-decoration: underline;
  color: #AE0B05; }
  a:visited {
    text-decoration: none; }
  a:focus,
  a:hover {
    text-decoration: none; }
  a:active {
    text-decoration: none; }

/* * * * * * * * * * * * * * * * *
        4. Text Selection
    * * * * * * * * * * * * * * * * */
::selection {
  color: #fff;
  background: #AE0B05;
  /* Safari */ }

::-moz-selection {
  color: #fff;
  background: #AE0B05;
  /* Firefox */ }

/* * * * * * * * * * * * * * * * *
        5. OpenType Typography
    * * * * * * * * * * * * * * * * */
/* 
    Turn on kerning, standard ligatures, and proportional, oldstyle numerals
 	Turn off all other ligatures, tabular, lining numerals, and alternates
	*/
/*

    body {
         font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; 
	     -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; 
	     -o-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; 
	     -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; 
	 }


	*/
/* * * * * * * * * * * * * * * * *
        6. Text Rendering
    * * * * * * * * * * * * * * * * */
/* 
	options:
	text-rendering: optimizeSpeed;
    */
body {
  text-rendering: optimizeLegibility; }

/* * * * * * * * * * * * * * * * *
        7. Silbentrennung
    * * * * * * * * * * * * * * * * */
p {
  /*		word-break: break-all;
        word-break: break-word;
 */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto; }

/* * * * * * * * * * * * * * * * *     
        8. Blockquote
    * * * * * * * * * * * * * * * * */
blockquote {
  border-left: 1px solid #ddd;
  margin: 0 0 20px;
  padding: 9px 20px 0 19px;
  float: left; }
  blockquote p {
    padding: 0 25px;
    /*    FA Icons als " "  */ }
    blockquote p:before,
    blockquote p:after {
      position: absolute;
      top: 0;
      font-family: "FontAwesome";
      font-size: 0.75em; }
    blockquote p:before {
      content: "\f10d";
      left: 0; }
    blockquote p:after {
      content: "\f10e";
      right: 0; }
  blockquote cite {
    color: #555;
    display: block;
    font-size: 0.7em; }
    blockquote cite:before {
      content: "— "; }
    blockquote cite a {
      color: #555; }
      blockquote cite a:visited {
        color: red; }

/* * * * * * * * * * * * * * * * *
        9. Sub- & Superscripts
    * * * * * * * * * * * * * * * * */
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em; }

/*
	Turn on proper subcript numerals
	*/
sub {
  top: 0.4em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
  -o-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
  -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1; }

/*
	Turn on proper supercript numerals
	*/
sup {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
  -o-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
  -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1; }

/* * * * * * * * * * * * * */
/* Grid  	 			   */
/* * * * * * * * * * * * * */
/* index.php */
/* galerie.php */
/*
	section.galerie {
		@extend .row;

		> h4 {
			@extend .col-xs-12;			
		}
		
	} 
*/
/* presse.php */
/* kuratoren.php */
/*
	section.kuratoren {
		@extend .row;
		
		article.kurator {
			@extend .col-xs-12;
			@extend .col-sm-4;						
		}
	}

*/
/* downloads.php */
/* kontakt.php */
/* staedte.php */
/* * * * * * * * * * * * * */
/* Struktur 			   */
/* * * * * * * * * * * * * */
body {
  padding-top: 80px; }

.header-content-wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 960px; }

main {
  width: 100%;
  margin: 0 auto;
  max-width: 960px; }

body > main {
  display: block;
  min-height: 80vh; }

header {
  width: 100%;
  height: auto; }

section {
  padding-top: 2em; }

/* temp */
header {
/*  min-height: 40vh; */
  color: #fff; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* ajax stuff */
body,
.header-content-wrapper,
header,
main {
  opacity: 1;
  transition: all 170ms cubic-bezier(0.52, 0.55, 0.435, 0.935);
  /* custom */
  transition-timing-function: cubic-bezier(0.52, 0.55, 0.435, 0.935);
  /* custom */ }

.ajax-out {
  -webkit-transform: translateY(1em);
  transform: translateY(1em);
  opacity: 0; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
article.download {
  margin-bottom: 2em; }

article.download > figure.flyer-item {
  margin-left: 3em;
  margin-right: 3em;
  margin-bottom: 2em; }

section.galerie h4 {
  margin-left: 0.8em;
  margin-right: 0.5em; }

article.galerie-item > figure {
  margin-left: 1em;
  margin-right: 1em; }

/*
,
article.kurator > h4,
article.kurator > p,
article.kurator > .kurator-foto 
*/
/* * * * * * * * * * * * * * * * * * * * * * * * */
/*	Site Elements 								 */
/* * * * * * * * * * * * * * * * * * * * * * * * */
.loading {
  position: fixed;
  top: 38vh;
  left: 50%;
  margin-left: -2.5vw;
  width: 5vw;
  height: 5vw;
  z-index: 100;
  display: none; }

.loading:before,
.loading:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #AE0B05; }

.loading:before {
  opacity: 0.5;
  transform: scale(1, 1); }

.loading:after {
  opacity: 0;
  transform: scale(0, 0); }

.loading:before {
  animation-name: load2;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  animation-delay: 2000ms; }

.loading:after {
  animation-name: load1;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate; }

@keyframes load1 {
  from {
    opacity: 0;
    transform: scale(0, 0); }
  to {
    opacity: 0.5;
    transform: scale(1, 1); } }

@keyframes load2 {
  from {
    opacity: 0.5;
    transform: scale(1, 1); }
  to {
    opacity: 0;
    transform: scale(0, 0); } }

/* _navigation.scss */
.mobile-logo {
  display: block;
  position: fixed;
  top: 0.5em;
  left: 0.5em;
  width: 8.25em;
  height: auto;
  /* desktop */ }
  @media (min-width: 768px) {
    .mobile-logo {
      display: none; } }

.hamburger {
  display: block;
  position: fixed;
  top: 1em;
  right: 1em;
  width: 2.25em;
  height: 1.75em;
  cursor: pointer;
  /* desktop */ }
  @media (min-width: 768px) {
    .hamburger {
      display: none; } }
  .hamburger [class^="hamburger-bar-"] {
    width: 100%;
    height: 20%;
    background: #383838;
    position: absolute;
    left: 0;
    opacity: 1; }
    .hamburger [class^="hamburger-bar-"][class$="bar-top"] {
      top: 0; }
    .hamburger [class^="hamburger-bar-"][class*="bar-mid"] {
      top: 40%; }
    .hamburger [class^="hamburger-bar-"][class$="bar-bottom"] {
      bottom: 0; }
  .hamburger.active {
    transform: rotate(-90deg); }
    .hamburger.active [class^="hamburger-bar-"] {
      background: #AE0B05; }
    .hamburger.active [class$="bar-top"] {
      top: -20%;
      opacity: 0; }
    .hamburger.active [class$="bar-bottom"] {
      bottom: -20%;
      opacity: 0; }
    .hamburger.active [class$="-mid-1"] {
      transform: rotate(45deg); }
    .hamburger.active [class$="-mid-2"] {
      transform: rotate(-45deg); }

/*  hamburger */
nav.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #c9c9c9;
  display: block;
  height: 80px;
  z-index: 50; }
  nav.main-nav a {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #383838;
    color: black; }
  nav.main-nav .main-nav-list {
    /* mobile */
    /* Desktop */ }
    @media (max-width: 767px) {
      nav.main-nav .main-nav-list {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        display: block;
        opacity: 1;
        background: #fff; }
        nav.main-nav .main-nav-list.mob-invis {
          top: 100%;
          opacity: 0; }
        nav.main-nav .main-nav-list li {
          display: block;
          width: 100%;
          padding: 2vh 5vw; }
          nav.main-nav .main-nav-list li a {
            font-size: 1.5em;
            font-weight: 400; }
          nav.main-nav .main-nav-list li:nth-of-type(4) {
            display: none; } }
    @media (min-width: 768px) {
      nav.main-nav .main-nav-list {
        margin: 0 auto;
        margin-top: 30px;
        width: 100%;
        max-width: 960px;
        display: flex; }
        nav.main-nav .main-nav-list li {
          display: inline;
          flex: 1 1 auto;
          text-align: center; }
          nav.main-nav .main-nav-list li a {
            position: relative;
            text-decoration: none; }
            nav.main-nav .main-nav-list li a:hover {
              opacity: 0.5; }
          nav.main-nav .main-nav-list li:nth-of-type(4) a:hover {
            opacity: 1; }
          nav.main-nav .main-nav-list li.active a:after {
            position: absolute;
            top: 0;
            left: -2em;
            right: -2em;
            bottom: -33px;
            content: "";
            border-bottom: 4px solid black; }
          nav.main-nav .main-nav-list li img {
            height: auto;
            max-width: 160px;
            min-height: 1em;
            transform: translateY(-1em); }
        nav.main-nav .main-nav-list li:nth-of-type(4).active a:after {
          display: none; } }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* _header.scss															   */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
header {
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  /* ease-in-out */
  -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  /* ease-in-out */ }
  header:before,
  header:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url() no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; }
  header:after {
    z-index: -2;
    opacity: 0; }
  header:before {
    z-index: -1;
    opacity: 1; }

.header-content-wrapper {
  /*	padding: 0 5em;  */
  text-align: center;
  padding-bottom: 2em; }

.dots {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -407px;
  width: 813px;
  height: 734px;
  background: url("/images/dots.svg") no-repeat center center;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.5; }

.small-link-older {
  z-index: 10; }

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0; }

.hbg-old {
  z-index: -1; }

.hbg-new {
  z-index: -1; }

.header-content-wrapper section {
  z-index: 5; }

.yt-player {
  position: fixed;
  top: 15vh;
  left: 50%;
  width: 60%;
  margin-left: -30%;
  z-index: 100;
  display: none; }

.yt-player:before {
  position: absolute;
  top: -100vh;
  right: -100vw;
  bottom: -100vh;
  left: -100vw;
  content: "";
  background: #fff;
  z-index: -1;
  opacity: 0.75; }

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%; }

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.yt-close {
  position: absolute;
  top: -10px;
  right: -25px;
  font-size: 2em;
  cursor: pointer; }

.small-link-older {
  text-align: center; }

.soundtrip-small-wrapper {
  padding: 0 2em;
  margin: 0 0 2em 0;
  min-height: 150px; }

.soundtrip-small {
  min-height: 15em;
  padding-top: 1em;
  position: relative;
  background-size: 100px 80px;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  border: 2px solid #fff; }
  .soundtrip-small:hover {
    border: 2px solid #AE0B05; }
  .soundtrip-small p {
    padding-left: 1em;
    text-align: left;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 5em;
    right: 0;
    width: 100%;
    text-align: left;
    font-family: '__Weissenhof Grotesk_5' , __Weissenhof Grotesk_5 , Weissenhof Grotesk, serif;
    font-size: 1.25em;
    font-weight: 600; }
  .soundtrip-small h3 {
    text-align: center;
    text-transform: uppercase;
    display: inline;
    margin: 2em 0;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 1em;
    right: 0;
    width: 100%;
    text-align: center;
    margin: 0; }
    .soundtrip-small h3 span.circle {
      background: #fff;
      color: #383838;
      border-radius: 0.8em;
      -moz-border-radius: 0.8em;
      -webkit-border-radius: 0.8em;
      display: inline-block;
      font-weight: bold;
      line-height: 1.6em;
      margin-right: 15px;
      text-align: center;
      width: 1.6em; }

.is-invisible {
  height: 0;
  overflow: hidden; }

.is-visible {
  height: auto;
  overflow: hidden; }

.hidden {
  display: none !important; }

.soundtrip-small-wrapper:nth-of-type(n+4) {
  /*	display: none !important;
*/ }

img[class*="hbg-extra-"] {
  position: absolute;
  left: 0;
  width: 100vw; }

.hbg-reverse:nth-of-type(even) {
  transform: scale(1, -1);
  -moz-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -webkit-transform: scale(1, -1); }

.small-link-older {
  font-family: '__Weissenhof Grotesk_5' , __Weissenhof Grotesk_5 , Weissenhof Grotesk, serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.6875em;
  cursor: pointer; }

.soundtrip-large {
  position: relative; }
  .soundtrip-large:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.1;
    background: url("../images/logo_bg.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top; }
    @media (min-width: 768px) {
      .soundtrip-large:before {
        right: -3em;
        left: -3em; } }
  .soundtrip-large h3 {
    text-align: center;
    text-transform: uppercase;
    display: inline;
    margin-bottom: 2em;
    /*  -> andere Schriftart, Weissenhof   */ }
    .soundtrip-large h3 span.circle {
      background: #AE0B05;
      color: #fff;
      border-radius: 0.8em;
      -moz-border-radius: 0.8em;
      -webkit-border-radius: 0.8em;
      display: inline-block;
      font-weight: bold;
      line-height: 1.6em;
      margin-right: 15px;
      text-align: center;
      width: 1.6em; }
  .soundtrip-large main {
    display: block;
    /* name & country */
    /* name & instrument */ }
    .soundtrip-large main h4 {
      /*  -> andere Schriftart, Weissenhof   */ }
      .soundtrip-large main h4 span {
        font-weight: 400;
        /* wieder open sans */ }
    .soundtrip-large main h5 {
      font-weight: 400;
      color: #AE0B05; }
      .soundtrip-large main h5:last-of-type {
        margin-bottom: 2.5em; }
      .soundtrip-large main h5 span {
        color: #383838; }
  .soundtrip-large aside .soundtrip-termine-list {
    margin-top: 1em;
    margin-bottom: 2em; }
  .soundtrip-large aside > ul,
  .soundtrip-large aside ul {
    list-style-type: none; }
  .soundtrip-large aside li {
    margin-bottom: 0.5em;
    line-height: 1.5; }
  .soundtrip-large aside li.soundtrip-termin-item {
    margin-bottom: 0; }
  .soundtrip-large aside li.soundtrip-termine-list-item {
    margin-bottom: 2em; }
  .soundtrip-large aside .soundtrip-termin-item.stadt {
    color: #AE0B05;
    font-weight: 800; }
  .soundtrip-large aside .termin {
    font-weight: 800; }
  .soundtrip-large .backtop {
    border-top: 1px solid #383838;
    padding-top: 0.5em;
    text-align: right;
    position: relative;
    height: 30px;
    overflow: hidden; }
    .soundtrip-large .backtop .button {
      position: absolute;
      top: 10px;
      right: 4px;
      border-color: #383838;
      border-style: solid;
      border-width: 0 0 5px 5px;
      height: 20px;
      width: 20px;
      transform: rotate(135deg);
      cursor: pointer; }
    .soundtrip-large .backtop img {
      /*	display: none;
		*/
      width: 25px;
      height: auto;
      position: absolute;
      top: 10px;
      right: 0;
      cursor: pointer; }

/* _galerie.scss */
.videos figure {
  display: none; }

section.galerie figure {
  margin-bottom: 2em; }

.galerie h4 {
  margin-bottom: 0.5em; }

.headline-gallery-videos,
.headline-gallery-fotos {
  cursor: pointer;
  font-weight: 100;
  margin-bottom: 0.5em;
  padding-left: 0.5em;
  text-align: center; }
  .headline-gallery-videos:hover,
  .headline-gallery-fotos:hover {
    color: #AE0B05; }

.galerie-item.video {
  cursor: pointer; }

/*  _presse.scss */
.presse-item {
  text-align: center; }

.presse-dachzeile {
  margin-bottom: 0em !important; }

.presse-headline {
  cursor: pointer;
  margin-bottom: 0.5em;
  font-weight: 100; }
  .presse-headline:hover {
    color: #AE0B05; }

.presse-text {
  display: none; }

/* _kuratoren.scss */
.kurator {
  position: relative;
  margin-bottom: 4em;
  width: 33%;
  padding: 0 1em; }
  .kurator h4 {
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0.5em; }
    .kurator h4 .kurator-name {
      color: #AE0B05;
      font-weight: 600; }
    .kurator h4 .kurator-ort {
      font-weight: 600; }
    .kurator h4 .kurator-rolle {
      font-weight: 400; }

.kurator-foto {
  margin-bottom: 0.5em; }

.kurator:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -2em;
  content: "";
  z-index: -1;
  border-bottom: 1px solid #c9c9c9; }

@media screen and (max-width: 699px) {
  .kurator {
    width: 100% !important; } }

@media screen and (min-width: 700px) and (max-width: 1000px) {
  .kurator {
    width: 50% !important; } }

/* downloads.scss */
.flyer-item figcaption {
  text-align: center; }

section.kontakt h4 {
  text-transform: uppercase;
  line-height: 1.2; }

section.kontakt p:nth-of-type(1) {
  margin-bottom: 3em; }

section.kontakt img {
  margin: 2em 0;
  width: 469px;
  height: auto; }

/* staedte */
/* Abstände & richtige Schriftart */
.stadt-venue-list {
  display: none; }

.staedte-list-item {
  margin-bottom: 0; }

.stadt-venue-item {
  margin-bottom: 0.5em 0; }

section.staedte ul {
  list-style-type: none; }

section.staedte ul.staedte-list {
  text-align: center; }

section.staedte li {
  margin-bottom: 1em;
  cursor: pointer; }
  section.staedte li.open {
    margin-bottom: 0; }

section.staedte h3 {
  font-weight: 100; }

.stadt-venue-list {
  margin-top: 0.5em; }

.stadt-venue-list a {
  font-size: 1.25em; }

/* _footer.scss */
footer {
  width: 100%;
  height: 40vh;
  position: relative;
  background: #ededed;
  margin-top: 15vh; }

.footer-content {
  background: #ededed;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.footer-backtop {
  position: absolute;
  top: -30px;
  left: 50%;
  height: 30px;
  width: 150px;
  margin-left: -75px;
  background: #fff;
  border-radius: 5px 5px 0 0;
  cursor: pointer; }
  .footer-backtop:hover {
    background: #ededed; }
  .footer-backtop span {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    display: block;
    transform: rotate(-90deg); }

@media screen and (min-width: 700px) {
  .header-text-mobile {
    display: none  !important; }
  .header-content-wrapper p {
    display: block !important; } }

@media screen and (min-width: 0) and (max-width: 699px) {
  .header-text-mobile {
    display: block !important; }
  .header-content-wrapper p {
    display: none !important; } }

.header-text-mobile {
  padding: 0 10px; }

@media screen and (min-width: 0) and (max-width: 699px) {
  .kurator:nth-of-type(1),
  .kurator:nth-of-type(2),
  .kurator:nth-of-type(3) {
    margin-top: 80px; } }







/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Änderungen April 2017                                           */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/*

.soundtrips-small {
    flex-basis: 50%;
    max-width: 50%;
    border: 2px solid #fff;
    padding: 2em 0;
}

.small-link-older {
    align-item: center;
    justify-content: center;
}


*/





/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Änderungen Februar 2018                                         */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */




.header-bg {
    position: absolute;
    top: 0;
    right: initial;
    left: -10%;
    left: 0;
    width: 120%;
    width: 100vw;
}







/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Änderungen August 2018                                          */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


.main-nav-list a {
    text-decoration: none;
}

.main-nav-list a:hover {
    color: #AA0B11;
}


.soundtrip-small:after {
    opacity: 0.75;
}



@media screen and (min-width: 1090px) {

    header {
        background: none ;
        background-size: 0 0;
    }

}


@media screen and (max-width: 776px) {

    main {
        padding: 0 1em;
    }

    header {
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .soundtrip-small {
        margin: 1em;
        position: relative;
    }


    h2 {
        font-size: 3em;
    }

    h3 {
        font-size: 1.5em;
    }

    p.soundtrip__artists-names {
        display: block !important;
        position: absolute;
        bottom: 1em;
        left:0 ;
        right: 0;
        width: 100%;
        text-align: center;
        padding: initial;
        top: initial;
    }


}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Änderungen Juni 2019                                            */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.specials-small {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  z-index: 10;
}

.specials-small__link{
  text-decoration: none;
  margin-bottom: 10px;
  z-index: 11;
}

.specials-small__item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: yellow;
  cursor: pointer;
  padding: 5px 5px 0 5px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  z-index: 10;
}

.specials-small__item--red {
  background: rgba(188, 26, 25, 0.8)
}

.specials-small__item--red .specials-small__text {
  color: #fff;
}

.specials-small__item--orange {
  background: rgba(211, 140, 4, 0.8);
}

.specials-small__item--orange .specials-small__text {
    color: #fff;
}

.specials-small__text{
  color: #000;
  font-family: "__Weissenhof Grotesk_5","__Weissenhof Grotesk_5","Weissenhof Grotesk",serif;
  font-size: 2.1875em;
  line-height: 100%;
  font-weight: 700;
}

@media (min-width: 768px) {
  .specials-small__link {
    margin: 0;
  }

  .specials-small__item {
    border-radius: 50%;
    padding: 0;
    width: 300px;
    height: 300px;
  }
  .specials-small__text {
    line-height: 150%;
  }
}