@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,600;1,400&display=swap');





/* CIRCO FUTURO */

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, 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, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
	border:0;
}
html, body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }


/*  General
--------------------------------------------------------------------------	*/
body { font-size: 3vw; font-weight: /*bold*/ normal; font-family: 'Work Sans', Arial, sans-serif; text-rendering: optimizeLegibility; letter-spacing: 0; }

a {
	color: black;
	text-decoration: none;
	-o-transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a img { -o-transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; }
a:hover, a:active { color: #00E100; }

h1, h2, h3, h4, h5, h6 { text-transform: uppercase; letter-spacing: .075vw; padding: 5vw 0 0.5vw; margin-bottom: 0.75vw; font-weight: bold; }
h1 { font-size: 4vw; }
h2 { font-size: 3vw; }
h3, h4, h5, h6, article a, footer { font-size: 2.3vw; }
h2, h3, h4, h5, h6 { border-bottom: 3px solid; }
strong { font-weight: /*normal*/ bold; /*letter-spacing: 1.5px;*/ }


/*  Background
--------------------------------------------------------------------------	*/
#bg {
	/*background-image: url(../img/bg-2.jpg);
	background-position: top center;
	background-repeat: no-repeat;*/
	background-size: cover;
	position: fixed;
	top: 6vw;
	left: 2vw;
	right: 2vw;
	bottom: 2vw;
	overflow: auto;
	z-index: -999;
}
#bg-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
#circo-logo {
	/*background-image: url(../img/cf-anim-4.svg);*/
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto;
	position: absolute;
	top: 6vw;
	left: 12vw;
	right: 12vw;
	bottom: 2vw;
	overflow: auto;
	opacity: 0.85;
	z-index: -996;
}


/*  Header
--------------------------------------------------------------------------	*/
header {
	margin: 0 2vw;
	text-align: center;
	position: sticky;
	top: 0px;
	width: 96vw;
	background-color: white;
	border-bottom: 3px solid black;
	font-weight: bold;
	padding-top: 1vh;
}
#pagetitle {
	font-size: 5vw;
	text-transform: uppercase;
	letter-spacing: .15vw;
	padding-top: .5vw;
	background: url(../img/cf-anim-1.svg) no-repeat center;
	height: 6vh;
	min-height: 48px;
}


/*  Navigation
--------------------------------------------------------------------------	*/
nav {
	position: relative;
	background-color: white;
	text-transform: uppercase;
	letter-spacing: .075vw;
	padding-bottom: 3px;
}
nav ul li { display: inline-block; padding: 0 1vw; }

#menuBtn {
    display: none;
    height: 6vw;
    position: fixed;
    right: 0;
    top: 1vh;
    cursor: pointer;
    width: 6vw;
    padding: 0 2vw;
}
#menuBtn span, #menuBtn span::before, #menuBtn span::after {
	height: .5vw;
	width: 6vw;
	background-color: black;
	position: relative;
	top: 3vw;
	display: block;
	content: '';
	margin: 0 auto;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
#menuBtn span::before { top: -1.2vw; }
#menuBtn span::after { top: .7vw; }
#menuBtn:hover span, #menuBtn:hover span:before, #menuBtn:hover span:after { background-color: #00E100; }


/*  Article
--------------------------------------------------------------------------	*/
section {
	padding: 7vw 2vw 8vw;
	margin: 93vh auto 0;
	background-color: white;
	background-color: rgba(255,255,255,0.75);
}
section.noheader { margin: -3px auto 0; }
section a { border-bottom: 2px solid #00E100; color: #00E100; }
section a:hover { border-bottom: 2px solid black; color: black }

section.gallery a { border-bottom: none; }

#event-container {
    margin: -7vw auto 0;
    background-color: #00E100;
    padding: 2vh 0;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    -moz-animation-name: colorchange;
    -moz-animation-duration: 18s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;    
    -moz-animation-play-state: running;
	-webkit-animation-name: colorchange;
    -webkit-animation-duration: 18s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;    
    -webkit-animation-play-state: running;
    animation-name: colorchange;
    animation-duration: 18s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
}
#event {
    width: 92vw;
    margin: 0 auto;
    max-width: 1280px;
    padding-bottom: 3vw;
}

article {
	padding-bottom: 4vw;
	width: 92vw;
	max-width: 1280px;
	margin: 0 auto;
}

article p, article ul { padding-bottom: 3vw; }
article ul li { display: block; }


article img { max-width: 100%; height: auto; }


footer {
	background-color: #00E100;
	color: white;
	width: 96vw;
	border-top: 3px solid black;
	padding: 4vw 0;
	margin: 0 2vw 2vw;
}
.must {
	width: 92vw;
	max-width: 1280px;
	margin: 0 auto;
}
.must p { padding-bottom: 2.3vw; }
footer h3 { border-bottom: 2px solid; }
.column {
	float: left;
	width: 33.33%;
}
.row { padding-bottom: 2vw; }

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}
footer a { color: white; }
footer a:hover, a.active { color: black; }

footer img {
	/*width: 12vw;*/
	max-width: 200px;
	/*padding: 6vw 0 2vw;*/
	display: block;
	/*margin: auto;*/
	height: auto;
}

footer {
    -moz-animation-name: colorchange;
    -moz-animation-duration: 18s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;    
    -moz-animation-play-state: running;
	-webkit-animation-name: colorchange;
    -webkit-animation-duration: 18s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;    
    -webkit-animation-play-state: running;
    animation-name: colorchange;
    animation-duration: 18s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
}

@-webkit-keyframes colorchange {
    0%     {background-color:#00E100;}
    25.0%  {background-color:#00E1E1;}
    50.0%  {background-color:#FF00FF;}
    75.0%  {background-color:#00E1E1;}
    100.0%  {background-color:#00E100;}
}

@keyframes colorchange {
    0%     {background-color:#00E100;}
    25.0%  {background-color:#00E1E1;}
    50.0%  {background-color:#FF00FF;}
    75.0%  {background-color:#00E1E1;}
    100.0%  {background-color:#00E100;}
}



/* Responsive
--------------------------------------------------------------------------	*/

/* «Hamburger» Menu bis 767px */
@media only screen and (max-width: 767px) {
	nav {
		display: none;
		height: calc(100vh - 9vw);
		position: initial;
		-moz-animation-name: colorchange;
    	-moz-animation-duration: 18s;
    	-moz-animation-timing-function: ease-in-out;
    	-moz-animation-iteration-count: infinite;    
    	-moz-animation-play-state: running;
		-webkit-animation-name: colorchange;
    	-webkit-animation-duration: 18s;
    	-webkit-animation-timing-function: ease-in-out;
    	-webkit-animation-iteration-count: infinite;    
    	-webkit-animation-play-state: running;
    	animation-name: colorchange;
    	animation-duration: 18s;
    	animation-timing-function: ease-in-out;
    	animation-iteration-count: infinite;    
    	animation-play-state: running;
	}
	nav ul li { display: block; padding: 0; border-top: 2px solid black; }
	nav ul li a { display: block; padding: 2.5vw 0 2vw; color: white; }
	nav ul li a:hover { color: black; }
	#menuBtn { display: block; }
	header { border-bottom: 2px solid black; }
	footer { border-top: 2px solid black; }
	h2, h3, h4, h5, h6 { border-bottom: 2px solid; }
	section a, footer h3 { border-bottom: 1px solid; }
	#pagetitle { background-position: left;}
	#event-container { border-top: 2px solid black; border-bottom: 2px solid black; }
}

/* Bis 568 kein vw */
@media only screen and (max-width: 568px) {
	body { font-size: 17px; }
	h1, h2, h3, h4, h5, h6 { padding: 30px 0 2px; margin-bottom: 3px; }
	h1 { font-size: 23px; }
	h2 { font-size: 17px; }
	h3, h4, h5, h6, article a, footer { font-size: 13px; }
	#pagetitle { font-size: 28px; padding-top: 3px; }
	nav ul li a { padding: 11px 0 8px; }
	#menuBtn { height: 34px; width: 34px; padding: 0 11px; }
	#menuBtn span, #menuBtn span::before, #menuBtn span::after { height: 3px; width: 34px; top: 17px; }
	#menuBtn span::before { top: -7px; }
	#menuBtn span::after { top: 4px; }
	article { padding-bottom: 23px; }
	article p, article ul { padding-bottom: 17px; }
	.must p { padding-bottom: 13px; }
	.column { width: 100%; }
}

/* Ab 960px ohne vw */
@media only screen and (min-width: 960px) {
	body { font-size: 29px; }
	#bg, #raster { top: 90px; }
	h1, h2, h3, h4, h5, h6 { padding: 48px 0 5px; margin-bottom: 7px; }
	h1 { font-size: 38px; }
	h2 { font-size: 29px; }
	h3, h4, h5, h6, article a, footer { font-size: 22px; }
	#pagetitle { font-size: 48px; padding-top: 5px; }
	nav ul li { padding: 0 13px; }
	article { padding-bottom: 34px; }
	.must p { padding-bottom: 22px; }
	article p, article ul { padding-bottom: 29px; }
}

@media only screen and (max-width: 486px) { .fancybox img { width: 75%; }}