/* ZIRKUS LOLLYPOP */
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400,400italic);


/*  CSS resetting
--------------------------------------------------------------------------	*/
html, body, div, span, p, h1, h2, h3, h4, h5, h6, blockquote, pre, em, img, small, strong, sub, sup, b, i, ul, li, form, label, table, tr, th, td, a { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }


/*  GENERAL
--------------------------------------------------------------------------	*/
html, body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {
	font: 16px/22px 'Crimson Text', serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: rgb(62,57,52);
}
a { color: rgb(120,53,127);
	text-decoration: none;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
a img { -webkit-transition: 0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; transition: 0.1s ease-in-out; }
a:hover { color: rgb(165,140,92); }

h1, h2, h3, h4, h5, h6 { font-weight: normal; text-transform: uppercase; letter-spacing: 1px; text-align: center; color: rgb(120,53,127); }
h1 { font-size: 24px; line-height: 27px; padding-top: 15px; padding-bottom: 6px; }
h2 { font-size: 20px; line-height: 24px; padding-top: 12px; padding-bottom: 6px; }
h3, h4, h5, h6 { font-size: 16px; line-height: 22px; padding-top: 12px; }


/*  Background
--------------------------------------------------------------------------	*/
#bg, #bg:after {
	background-image: url(../img/bg_1.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-color: white;
	background-size: cover;
	position: fixed;
	top: 30px;
	left: 0px;
	right: 0px;
	bottom: 30px;
	overflow: auto;
	z-index: -999;
}
#bg:after { 
	content: '';
	background: transparent url(../img/pattern.png) repeat top left; 
}


/*  Header
--------------------------------------------------------------------------	*/
header { position: fixed; top: 0; text-align: center; width: 100%; z-index: 100; }
#logo { width: 100%; border-bottom: 1px solid rgb(120,53,127); background-color: white; padding-top: 8px; padding-bottom: 5px; }
#logo a { font-size: 24px; line-height: 27px; text-transform: uppercase; letter-spacing: 1px; }
.big_logo img { max-width: 80vw; height: 85vh; max-height: 85vh; margin-top: 0px; }

@media only screen and (max-width: 1060px) 
and (orientation: portrait)  { .big_logo img { max-width: 100vw; } }


/*  Navigation
--------------------------------------------------------------------------	*/
nav { position: relative; top: 0; text-align: center; width: 100%; background-color: white; }
nav a { text-transform: uppercase; letter-spacing: 1px; }
nav a:hover, nav li.active > a { color: rgb(165,140,92); }
nav ul li { display: inline-block; padding: 5px 10px 2px; }
nav ul li.active .sub-menu { display: block; }
nav, .sub-menu { border-bottom: 1px solid rgb(120,53,127); }
.sub-menu { position: absolute; top: 30px; left: 0px; display: none; background-color: white; width: 100%; }

#menuBtn { display: none; height: 40px; position: fixed; right: 0px; top: 0px; cursor: pointer; width: 40px; padding: 0px 20px; }
#menuBtn span, #menuBtn span::before, #menuBtn span::after {
	height: 3px;
	width: 40px;
	background: rgb(120,53,127);
	position: relative;
	top: 20px;
	display: block;
	content: '';
	margin: 0 auto;
}
#menuBtn span::before { top: -7px; }
#menuBtn span::after { top: 4px; }


/*  Article
--------------------------------------------------------------------------	*/
section { width: 100vw; max-width: 1280px; margin: 137px auto 60px; }
article { padding: 6px 20px 11px; background-color: rgba(255,255,255,0.85); border-top: 1px solid rgb(120,53,127); border-bottom: 1px solid rgb(120,53,127); margin-left: 20px; margin-right: 20px; }
article img { max-width: 100%; height: auto; margin: 7px auto; display: block; }
article iframe { margin: 7px auto; max-width: 100%; display: block; max-height: 47vw; }
article ul { list-style-type: none; padding-bottom: 11px; }
article ul li { padding-left: /*60px*/12px; text-indent: -12px; }
article ul li::before { content: '– '; }
/* .stellen { padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid rgb(0,168,211); } */
/* .stellen:last-of-type { border-bottom: 0; } */
/* .stellen:first-of-type { border-top: 1px solid rgb(0,168,211); margin-top: 24px; } */
table { -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; width: 100%; }
table td { padding-right: 14px; border-bottom: 1px dashed grey; }


/*  Map
--------------------------------------------------------------------------	*/
/* #map_canvas { width: auto; height: 480px; height: 60vh; border: 1px solid white; margin: 0 20px 20px; background-color: rgba(255,255,255,0.85); } */
/* .gm-style-cc { display: none; } */
/* #infowindow { font: 15px/18px 'Crimson Text', serif; } */


/*  Circle
--------------------------------------------------------------------------	*/
a.circle {
	width: 86px;
	border-radius: 50%;
	text-align: center;
	padding: 43px 0;
	line-height: 0;
	position: fixed;
	right: 22px;
	top: 63px;
	background: rgb(169,130,175);
	color: white;
	transform: rotate(0deg);
	border: 1px solid rgb(120,53,127);
	-webkit-transition: 2s ease-in-out;
	-moz-transition: 2s ease-in-out;
	transition: 2s ease-in-out;text-transform: uppercase;
	letter-spacing: 1px;
	z-index: 101;
	background-image: url(../img/ferienprojekt.svg);
	background-position: center center;
}
a.circle:hover { transform: rotate(40deg); }


/*  NEWS
--------------------------------------------------------------------------	*/
#news {  margin: 100vh auto 30px; z-index: 102; padding-bottom: 60px; position: absolute; left: 0; right: 0; }
#news article p { text-align: center; }


/*  Footer
--------------------------------------------------------------------------	*/
footer { text-align: center; position: fixed; bottom: 0; width: 100%; background-color: white; border-top: 1px solid rgb(120,53,127); padding-top: 5px; padding-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; color: rgb(120,53,127); z-index: 103; }
footer span { text-transform: initial; letter-spacing: 0px; font-style: italic; }


/* Mobile Navigation
--------------------------------------------------------------------------	*/
@media only screen and (max-width: 767px) {
	nav { display: none; height: 100%; position: fixed; top: 0; overflow-y: scroll; z-index: -1; }
	nav ul { margin-top: 41px; }
	nav ul li { display: block; padding: 0px; border-top: 1px solid rgb(120,53,127); }
	nav ul li:first-child { border-top: none; }
	nav ul li ul li:first-child { border-top: 1px solid rgb(120,53,127); }
	nav ul li a { display: block; padding: 10px 0px 7px; }
	nav ul li ul li a { text-transform: initial; letter-spacing: 0px;  }
	nav ul li ul li a { color: white; }
	nav ul li ul li a:hover, nav ul li ul li.active a { color: rgb(120,53,127); }
	.sub-menu { position: relative; top: 0; margin-top: 0; border-bottom: none; background-color: rgba(165,140,92,.5); }
	#logo { text-align: left; padding-left: 20px; }
	#menuBtn { display: block; }
	#bg { top: 41px; }
	section, section.contact { margin: 60px auto 50px; }
}


/*  Responsive
--------------------------------------------------------------------------	*/
@media only screen and (min-width: 768px) {
	h1, h2, h3, h4, h5, h6 { letter-spacing: 0.15vw; }
	h1 { font-size: 3.13vw; line-height: 3.515vw; padding-top: 1.95vw; padding-bottom: 0.78vw; }
	h2 { font-size: 2.6vw; line-height: 3.15vw; padding-top: 1.625vw; padding-bottom: 0.78vw; }
	h3, h4, h5, h6 { font-size: 2.09vw; line-height: 2.9vw; padding-top: 1.625vw; }
	#logo a { font-size: 3.13vw; line-height: 3.515vw; letter-spacing: 0.15vw; }
	article { padding: 0.8vw 2.6vw 1.3vw; margin-left: 5.2vw; margin-right: 5.2vw; }
	article p, table { /*text-indent: 6.27vw;*/ font-size: 2.09vw; line-height: 2.9vw; }
	article ul { padding-bottom: 1.45vw; }
	article ul li { padding-left: /*7.82vw*/1.45vw; font-size: 2.09vw; line-height: 2.9vw; text-indent: -1.563vw; }
	article img, article iframe { margin: 0.945vw auto; }
	a.circle { top: 2vw; }
	/*#map_canvas { margin: 0 5.2vw 30px; }
	.stellen { padding-top: 3.15vw; padding-bottom: 3.15vw; }
	.stellen:first-of-type { margin-top: 3.15vw; } */
}

@media only screen and (min-width: 1060px) {
	h1, h2, h3, h4, h5, h6 { letter-spacing: 2px; }
	h1 { font-size: 33px; line-height: 37px; padding-top: 20px; padding-bottom: 8px; }
	h2 { font-size: 28px; line-height: 34px; padding-top: 16px; padding-bottom: 8px; }
	h3, h4, h5, h6 { font-size: 23px; line-height: 31px; padding-top: 16px; }
	#logo a { font-size: 33px; line-height: 37px; letter-spacing: 2px; }
	article { padding: 9px 28px 14px; margin-left: 56px; margin-right: 56px; }
	article p, table { /*text-indent: 69px;*/ font-size: 23px; line-height: 31px; }
	table td { padding-right: 18px; }
	article ul { padding-bottom: 16px; }
	article ul li { padding-left: /*83px*/17px; font-size: 23px; line-height: 31px; text-indent: -17px; }
	article img, article iframe { margin: 10px auto; }
	a.circle {  top: 22px; }
	/*#map_canvas { margin: 0 56px 30px; }
	.stellen { padding-top: 32px; padding-bottom: 32px; }
	.stellen:first-of-type { margin-top: 32px; } */
}

@media only screen and (max-width: 428px) {
	footer p span { display: none; }
	/*article p { text-indent: 0; }
	article ul li { padding-left: 12px; text-indent: -12px; }*/
	body {
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}


/*  Gallery
--------------------------------------------------------------------------	*/

#slides { padding-bottom: 12px; /*max-width: 1112px;*/ max-width: 595px; margin: 0 auto; }

#slides { display: none; }
#slides .slidesjs-navigation { margin-top:5px; }

a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
	background-image: url(../img/btns-next-prev.png);
	background-repeat: no-repeat;
	display:block;
	width:12px;
	height:18px;
	overflow: hidden;
	text-indent: -9999px;
}
a.slidesjs-next,
a.slidesjs-previous {
	float: left;
	margin-right:5px;
}
a.slidesjs-play,
a.slidesjs-stop {
	float: right;
}

a.slidesjs-next {
	margin-right:10px;
	background-position: -12px 0;
}
a:hover.slidesjs-next {
	background-position: -12px -18px;
}
a.slidesjs-previous {
	background-position: 0 0;
}
a:hover.slidesjs-previous {
	background-position: 0 -18px;
}
a.slidesjs-play {
	width:15px;
	background-position: -25px 0;
}
a:hover.slidesjs-play {
	background-position: -25px -18px;
}
a.slidesjs-stop {
	width:18px;
	background-position: -41px 0;
}
a:hover.slidesjs-stop {
	background-position: -41px -18px;
}
.slidesjs-pagination {
	margin: 7px 0 0;
	float: right;
	list-style: none;
}
.slidesjs-pagination li {
	float: left;
	margin: 0 1px;
}
.slidesjs-pagination li a {
	display: block;
	width: 13px;
	height: 0;
	padding-top: 13px;
	background-image: url(../img/pagination.png);
	background-position: 0 0;
	float: left;
	overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
	background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
	background-position: 0 -26px
}
#slides a {
	-webkit-transition: 0s ease-in-out;
	-moz-transition: 0s ease-in-out;
	transition: 0s ease-in-out;
	text-decoration: none;
}
#slides a:link,
#slides a:visited {
	color: #333
}
#slides a:hover,
#slides a:active {
	color: #9e2020
}
.navbar {
	overflow: hidden
}
#slides ul li { padding-left: 0px; text-indent: 0px; }
#slides ul li::before { content: ''; }

/*  Slideshow Start
--------------------------------------------------------------------------	*/
.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 30px;
    bottom: 30px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../img/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li:nth-child(1) span { 
}
.cb-slideshow li:nth-child(2) span { 
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    animation-delay: 30s; 
}

.cb-slideshow li:nth-child(2) div { 
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    animation-delay: 30s; 
}
@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}