/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@import url("font-awesome.min.css");

/* titillium-web-regular - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/titillium-web-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
       url('../fonts/titillium-web-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v9-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-italic - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/titillium-web-v9-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Titillium Web Italic'), local('TitilliumWeb-Italic'),
       url('../fonts/titillium-web-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v9-latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-700 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/titillium-web-v9-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'),
       url('../fonts/titillium-web-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v9-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v9-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-700italic - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/titillium-web-v9-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Titillium Web Bold Italic'), local('TitilliumWeb-BoldItalic'),
       url('../fonts/titillium-web-v9-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v9-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v9-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v9-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v9-latin-700italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}


/* dancing-script-regular - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dancing-script-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/dancing-script-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dancing-script-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dancing-script-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dancing-script-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dancing-script-v13-latin-regular.svg#DancingScript') format('svg'); /* Legacy iOS */
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: 700;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

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

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}


html {
}

body {
  background-color: #353f97;
  color: #fff;
  font-family: 'Titillium Web';
  font-size: 19px;
  font-weight: 400;
  line-height: 1.4;
}

#header {
	margin: 0;
	height: 100vh;
	width: 100%;

	background-color: #353f97;
	background-image: url("../../img/hochzeiten-header.jpg");
	background-position: center 0px;
	background-repeat: no-repeat;
	background-size: cover;
	/*background-attachment: fixed;*/
	text-align: center;
}

.logo {
	position: absolute;
	margin: auto;
	top: 30vh;
	right: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	max-width:600px;
	z-index: 1000;
}

@media only screen 
and (max-width:1366px)
and (-webkit-min-device-pixel-ratio: 2) 
{
#header {
	margin: 0;
	height: 100vh;
	width: 100%;
	max-height: 900px;
	background-color: #353f97;
	background-image: url("../../img/hochzeiten-header.jpg");
	background-position: center 0px;
	background-repeat: no-repeat;
	background-size: cover;
	/*background-attachment: fixed;*/
	text-align: center;
}
 
	.logo {
	position: absolute;
	top: 30vh;
	margin: auto;
	width: 50%;
	max-width:600px;
	z-index: 1000;
	font-size: 0.8em;
	}
	
		.pfeil-aussen {
		visibility: visible;
     position: absolute;
     bottom: 1em;
     width: 100%;
     z-index: 2000;
	}
}
			
@media screen and (max-width:1110px) {
  
	body {
	color: #fff;
	font-family: 'Titillium Web';
	font-size: 17px;
	font-weight: 300;
	line-height: 1.4;
	padding: 0px 0px;
	}
	
	#header {
	margin: 0;
	height: 80vh;
	width: 100%;
	max-height: 900px;
	background-image: url("../../img/hochzeiten-header_tablet.jpg");
	background-color: #353f97;
	background-position: center 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	text-align: center;
	
	}   
	
	.logo {
	position: absolute;
	top: 16em;
	margin: auto;
	width: 50%;
	max-width:600px;
	z-index: 1000;
	}
   
	
	.pfeil-aussen {
     visibility:hidden
	}

	#pfeil {
     margin: 0 auto;
     width: 50px;
     height: 50px;
    }  
    
}




@media screen and (max-width:799px) 
 {
  
	#header {
	margin: 0;
	width:100%;
	background-image: url("../../img/hochzeiten-header_mob.jpg");
	background-color: #fff;
	background-position: center 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	text-align: center;
	}   

	
}




@media screen and (max-width:750px) {
    
	#header {
	margin: 0;
	width:100%;
	background-image: url("../../img/hochzeiten-header_mob.jpg");
	background-color: #fff;
	background-position: center 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	text-align: center;
	}  
}



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

    body {
	color: #fff;
	font-family: 'Titillium Web';
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	padding: 0px 0px;
	}
	
	#header {
	margin: 0;
	width:100%;
	background-image: url("../../img/hochzeiten-header_mob.jpg");
	background-color: #fff;
	background-position: center 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	text-align: center;
	}  
	
	.logo {
	position: absolute;
	top: 2em;
	margin: auto;
	width: 90%;
	z-index: 1000;
	}
   
	
	.pfeil-aussen {
     position: absolute;
     bottom: 10vh;
     width: 80%;
     z-index: 2000;
	}

	#pfeil {
     margin: 0 auto;
     width: 40px;
     height: 40px;
    }  
}



h1 {
color: #fff;
font-family: 'Dancing Script', cursive;
font-size: 5em;
line-height: 0.8em;
margin:0;
text-shadow: 4px 4px 16px rgba(100,0,50,0.2); 
}

h2 {
color: #fff;
font-size: 1.2em;
font-weight: 900;
text-transform: uppercase;
}

h3 {
font-size: 1.2em;
color: #fff;
font-size: 1.1em;
font-weight: 700;

}

h4 {
font-size: 0.8em;
font-weight: 300;
text-transform: uppercase;
}

p {
text-shadow: none;
font-weight: 100;
}

a {
color: #ff00a2;
font-weight: 900;
transition: all 0.2s ease-in-out;
background: none;
border-bottom: 1px solid #fff;
text-decoration: none;
}

a:hover {
background: #8f3494;
border-bottom: 0px solid #fff;
}


#introlink {
    padding-top: 80px;
    margin-top: -80px;
}

.scripthead {
	font-family: 'Dancing Script', cursive; 
	text-transform: none; 
	font-size:2.2em;
	line-height:1em;
	text-shadow: 4px 4px 16px rgba(100,0,50,0.2);
	}


.pfeil-aussen {
     position: absolute;
     bottom: 15vh;
     width: 100%;
     z-index: 2000;
}

#pfeil {
     margin: 0 auto;
     width: 50px;
     height: 50px;
}

.pfeillink {
text-decoration: none; 
border-bottom: 0px;
}

.pfeillink:hover {
background-color: rgba(0,0,0,0);
border-bottom: 0px;
}




#intro {
width:80%;
max-width: 900px;
margin: 1em auto 4em auto;
text-align: center;
}

#intro p {
color: #fff;
}

#album {
max-width: 700px;
margin: 0px auto;
text-align: center;
}

#album img {
width: 100%;
max-width: 300px;

}

#album p {
color: #050505;
}

.dawn {
float:left;
display: block;
max-width: 46%;
width: 300px;
}

.dawn img {
box-shadow: 4px 4px 20px 0px rgba(100, 0, 50, 0.4);
transition: all 0.5s, height 0.5s;
margin-bottom:1.4em;
}

.dawn img:hover {
-webkit-transform: scale(0.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 8px 8px 40px 0px rgba(100, 0, 50, 0.2);
}

.dusk {
float:right;
display: block;
max-width: 46%;
width: 300px;
margin-bottom: 200px;
}

.dusk img {
box-shadow: 4px 4px 20px 0px rgba(0, 50, 100, 0.4);
transition: all 0.5s, height 0.5s;
margin-bottom:1.4em;
}

.dusk img:hover {
-webkit-transform: scale(0.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 8px 8px 40px 0px rgba(0, 50, 100, 0.2);
}

.smalltext {
font-size: 0.8em;
}

#toughtalk {
width: 100%;
margin: 0;
background-image: url("../../img/tt-hintergrund.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

#smalltalk {
clear:both;
margin: 0;
padding: 0 auto;
background-image: url("../../img/st-hintergrund.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
position: relative;
top:0px;
}

.content {
margin: 0 auto;
padding: 0;
width: 80%;
max-width: 1280px;
}

.band-content {
display: inline-block;
margin: 50px auto;
width: 100%;
max-width: 1280px;
position:relative;
vertical-align: middle;
}

.bandlogo-left {
float:left;
width: 47%;
height: 100%;
text-align: center;
padding: 3% 1em;
margin: auto;
overflow: hidden;
}

.bandlogo-left img {
margin: auto;
max-height: 300px;
}

.bandtext-right {
float: right;
width: 50%;
margin: 2em auto 2em auto;
text-align: left;
padding: 0 1em;
}

.bandlogo-right {
float: right;
width: 47%;
height: 100%;
text-align: center;
padding: 8% 1em 0 1em;
margin: auto;
}

.bandlogo-right img {
margin: auto;
max-height: 300px;
}

.bandtext-left {
float:left;
width: 50%;
margin: 2em auto 2em auto;
text-align: left;
padding: 0 1em;
}

.musik-text {
color: #fff;
text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}

.bandbuttons {
display: inline-flex;
}


/* PORTFOLIO */

#portfolio {
color: #fff;
width: 100%;
max-width: 1680px;
padding: 3em 2em;
margin: 0 auto;

}

.portfolio-content {
display:inline-block;
width:100%;
margin: 0 auto;
text-align: center;

}

.boxen {
margin: 0 auto;
}

.portfolio-text {
color: #fff;
}

#portfolio-content h2 {
margin-block-start: 0em;
margin-block-end: 1em;
}

#portfolio-content h4 {
margin-block-start: 0em;
margin-block-end: 0em;
}

.portfolio-img {
vertical-align: top;
width: 24%;
min-width:150px;
display:inline-block;
margin: 1em auto;
padding: 0 2em;
transition: all 0.5s, filter 0.4s;
font-weight: 700;
}

.portfolio-img:hover {
-webkit-transform: scale(0.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
opacity: 1.0;
filter: blur(0px) brightness(1);
}

.portfolio-img img {
max-width: 150px;
width: 50%;
margin: 0 auto;
transition: all 0.5s, filter 0.4s;
opacity: 1;
}

.portfolio-img:hover img {
opacity: 1;

}

.text-overlay {
color: #fff;
line-height:1.4em;
text-align: center;
}

.text-overlay p {
color: #fff;
}

.portfolio-img img:hover {
-webkit-transform: scale(0.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}


@media screen and (max-width:1200px) {   
   
#portfolio {
width: 100%;
padding: 3em 3em;

}

.portfolio-img {
vertical-align: top;
width: 45%;
min-width:250px;
display:inline-block;
margin: 1em auto;

}
    
}

/* PORTFOLIO SEITE */

#header-portfolio {
text-align: center;
width: 70%;
max-width: 1680px;
margin: 0 auto;
padding: 0 auto;
}

#header-portfolio img {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}

#portfolio-text {
max-width: 1280px;
margin: 2em auto 4em auto;
text-align: center;
color: #fff;
}

.portfolio-intro-text {
display: inline-block;
width: 100%;
}

.portfolio-copy-text {
clear:both;
max-width: 900px;
margin: 0 auto;
}

#portfolio-text h1, p {
color: #fff;
}

.portfolio-text-links {
float:left;
width: 48%;
text-align: left;
}

.portfolio-text-rechts {
float:right;
width: 48%;
text-align: left;
}

.close { /* to make a nice looking pure CSS3 close button */
    display:block;
    position:fixed;
    top:20px;
    right:20px;
    background:none;
    border: 1px solid #ff002a;
    color:#ff00a2;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}

#open-overlay { /* open the overlay */

}

/* BUTTONS */
.button-normal {
  color: #ffffff;
  background-color: #ff00a2; 
  border: none;
  border-radius: 6px;
  box-shadow: 2px 2px 26px rgba(100,0,60,0.6);
  padding: 15px 32px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}

.button-normal:hover {
color: #ffffff; 
text-decoration: none;
background-color: none;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
background-color: #8f3494; 
}

.button-normal a {
color: #ffffff;
border-bottom: 0px;
background-color: none;
}

.button-normal a:hover {
color: #ffffff;
text-decoration: none;
background-color: none;
}


.button-oben {
  background-color: #ff00a2; 
  border: none;
  border-radius: 6px;
  color: white;
  box-shadow: 2px 2px 26px rgba(100,0,60,0.6);
  padding: 20px 20px 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  font-weight: 300;
  text-transform: uppercase;
  position: fixed;
  top: -10px;
  right: 30px;
  z-index: 9999;
}

.button-oben a {
color: #ffffff;
font-weight: 900;
}





/* SLIDESHOW */

#quotes {
width: 100%;
background: #ff00a2;
font-size:1em;
position: relative;
}

#quotes p {
color: #fff;
font-size:0.8em;
}

/* Slideshow container */

* {box-sizing: border-box}


.slideshow-container {
color: #fff;
width: 100%;
max-width: 900px;
margin: 2em auto 0em auto;
text-align: center;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
  font-weight: 800;
  font-size:1.4em;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;

  width: auto;
  margin: 0px 0px 0px 10%;
  padding: 0 16px;
  color: #000;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  border: solid 0px;
}

.prev, .next a {

}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
    margin: 0px 10% 0px 0px ;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(255,255,255,0.4);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: rgba(0,0,0,0);
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #fff;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}



/* FORMULAR */

#kontakt {
color: #fff;
background: #010101;
width: 100%;
padding: 2em auto;
		background: 		
		url("images/ttst_contentbg.jpg") no-repeat,
		url("images/ttst_bg.png") repeat-y;
		
		background-position: top center;
		background-size: 100%, contain;
		overflow:visible;


}

form {
width:100%;
max-width: 900px;
margin: 2em auto 4em auto;
text-align: left;
}

.eingabe {
max-width:600px;
width:100%;
display: inline-box;
}

textarea {
color: #000;
border: 1px solid #fff;

width:100%;
max-width: 600px;
border-radius:6px;
padding: 10px;
}

input[type=text] {
color: #000;
border: 1px solid #fff;

width:100%;
max-width: 600px;
border-radius:6px;
padding: 10px;
}





::-webkit-input-placeholder { 
  color: rgba(255,255,255,0.5);
  font-weight: 900;
  font-size: 0.6em;
  text-transform: uppercase;
  margin: auto;
  vertical-align: middle;
}

:-ms-input-placeholder { 
  color: rgba(255,255,255,0.5);
  font-weight: 900;
  font-size: 0.6em;
  text-transform: uppercase;
  margin: auto;
  vertical-align: middle;
}

::placeholder {
  color: rgba(255,255,255,0.5);
  font-weight: 300;
  font-size: 0.6em;
  text-transform: uppercase;
  margin: auto;
  vertical-align: middle;
 }

/*
input[type="checkbox"] {
  display:none;
}
input[type="checkbox"] + label::before {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid #fff;
  background-color: none;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
}
input[type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #fff;
} */


.bandauswahl {
display: inline-flex;
width: 100%;
max-width:900px;
margin:0 auto;
text-align: left;
font-size: 1.2em;
font-weight: 900;
text-transform: uppercase;
padding: 0 auto;
}

.bandcheckbox {
font-weight: 800;
width:80%;
margin:10px;
}


.datenschutztext {
font-size: 0.6em;
}

/* CHECKBOXEN */

.tt-check {
width:40%;
margin:0 10px;
}

.st-check {
width:40%;
margin:0 10px;
}

.or-check {
width:20%;
margin:0 10px;
}

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
  margin-right: 30px;
  cursor: pointer;
  font-size: 0.8em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: none;
  border: 1px solid #fff;
  border-radius: 6px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: rgba(0,0,0,0);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #ff00a2;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 6px;
  width: 7px;
  height: 12px;
  border: 0px solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/* FOOTER */
/*
#footer {
width: 100%;
background: #333;
font-size:0.6em;
position: relative;
margin:0;
padding: 2em 0;
text-align: center;
text-transform: uppercase;
}

*/


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

#intro {
width: 100%;
margin: 2em auto 4em auto;
padding: 0 20px;
text-align: center;
} 

.band-content {
display: inline-block;
margin: 0px auto;
width: 100%;
max-width: 1280px;
}


.bandlogo-left {
float:left;
width: 100%;
text-align: center;
padding: 10% 0em;
}

.bandlogo-left img {
margin: 0 auto;
width: 100%;
max-width: 513px;
}

.bandtext-right {
float:right;
width: 100%;
text-align: center;
margin: 2em auto 2em auto;
padding: 0 1em 2em 1em;

}

.bandlogo-right {
float:left;
width: 100%;
text-align: center;
padding: 10% 1em 0% 1em;
}

.bandlogo-right img {
margin: 0 auto;
width: 100%;
max-width: 513px;
}

.bandtext-left {
float:right;
width: 100%;
margin: 2em auto 2em auto;
text-align: center;
padding: 0 1em;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 250px;
  width: auto;
  margin: 0px 0px 0px 3%;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  border: solid 0px;
}

.prev, .next a {

}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
    margin: 0px 3% 0px 0px ;
  border-radius: 3px 0 0 3px;
}



}
	#navPanel, #navButton {
		display: none;
	}

@media screen and (max-width:768px) {
   
	html {
	  color: #858585;
	  font-family: 'Titillium Web';
	  font-size: 18px;
	  font-weight: 300;
	  line-height: 1.4;
	}

	body {
	padding: 0px 0px;
	}

	
	.logo {
	position: absolute;
	margin: auto;
	top: 32vh;
	right: 0;
	bottom: 0;
	left: 0;
	width: 90%;
	z-index: 1000;
	}
   
   	h1 {
	font-size: 4.2em;
	}
	
	h2 {
	color: #fff;
	font-size: 1.2em;
	font-weight: 700;
	text-transform: uppercase;
	}

	h3 {
	color: #ff00a2;
	font-size: 1.4em;
	font-weight: 700;

	}

	h4 {
	font-size: 0.8em;
	font-weight: 300;
	text-transform: uppercase;
	}

	p {
	text-shadow: none;
	font-weight: 100;
	}

	a {
	color: #ff00a2;
	font-weight: 900;
	transition: all 0.2s ease-in-out;
	background: none;
	border-bottom: 1px solid #fff;
	text-decoration: none;
	}

	a:hover {
	background: #8f3494;
	border-bottom: 0px solid #fff;
	}
	
	.scripthead {
	font-family: 'Dancing Script', cursive; 
	text-transform: none; 
	font-size:2.2em;
	line-height:0.8em;
	text-shadow: 4px 4px 16px rgba(100,0,50,0.2);
	}
	
	
.pfeil-aussen {
     position: absolute;
     bottom: 10%;
     width: 100%;
     z-index: 2000;
}

#pfeil {
     margin: 0 auto;
     width: 50px;
     height: 50px;
}

#intro {
width: 100%;
margin: 2em auto 4em auto;
padding: 0 20px;
text-align: center;
}


.button-oben {
  width: 100%;
  background-color: #ff00a2; 
  border: none;
  border-radius: 0px;
  color: white;
  box-shadow: 0px 2px 26px rgba(100,0,60,0.6);
  padding: 10px 10px 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.2em;
  font-weight: 300;
  text-transform: uppercase;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 9999;
}

.button-oben a {
color: #ffffff;
font-weight: 900;
}

.content {
margin: 0;
padding: 0 1em;
width: 100%;
max-width: 1280px;
}

.band-content {
display: inline-block;
margin: 0px auto;
width: 100%;
max-width: 1280px;
}

.bandlogo-left {
float:left;
width: 100%;
text-align: center;
padding: 10% 0em;
}

.bandlogo-left img {
margin: 0 auto;
width: 100%;
max-width: 513px;
}

.bandtext-right {
float:right;
width: 100%;
text-align: center;
margin: 0em auto 2em auto;
padding: 0 1em 2em 1em;

}

.bandlogo-right {
float:left;
width: 100%;
text-align: center;
padding: 10% 1em 0% 1em;
}

.bandlogo-right img {
margin: 0 auto;
width: 100%;
max-width: 513px;
}

.bandtext-left {
float:right;
width: 100%;
margin: 0em auto 2em auto;
text-align: center;
padding: 0 1em;
}

.bandbuttons {
display: block;
}

   
#portfolio {

width: 100%;
padding: 3em 1em;

}
.portfolio-img {
width: 100%;
max-width: 400px;
display:inline-block;
margin: 0 auto 0em auto;
transition: all 0.5s, filter 0.4s;
font-weight: 700;
}
.portfolio-img img {
max-width: 180px;
}
    



/* SLIDESHOW */

#quotes {
width: 100%;
background: #ff00a2;
font-size:1em;
position: relative;
}

#quotes p {
color: #fff;
font-size:0.8em;
}

/* Slideshow container */

* {box-sizing: border-box}


.slideshow-container {
color: #fff;
width: 100%;
max-width: 900px;
margin: 1em auto 0em auto;
text-align: center;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
  font-weight: 800;
  font-size:1.2em;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 250px;
  width: auto;
  margin: 0px 0px 0px 3%;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  border: solid 0px;
}

.prev, .next a {

}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
    margin: 0px 3% 0px 0px ;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(255,255,255,0.4);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: rgba(0,0,0,0);
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #fff;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}







/* CHECKBOXEN */


.bandauswahl {
display: block;
width: 50%;
max-width:900px;
margin:0 auto;
text-align: left;
font-size: 1.2em;
font-weight: 900;
text-transform: uppercase;
padding: 0 auto;
}


}
.tt-check {
width:80%;
margin: 40px 10px;
}

.st-check {
width:80%;
margin: 40px 10px;
}


.or-check {
width:80%;
margin: 40px 10px;
}



}





/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

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


/* Button */


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */



@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}