@charset 'UTF-8';
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,300|Oswald:600,400,300);

/**
 * © 2014-2018 Higi Bigler (nullnulleins.ch). All rights reserved.
 */

* { margin: 0; padding: 0; }
html, body { height: 100%; }
/*          italic small-caps bold */
body { font: normal normal 300 .9em/1.4em 'Oswald', Arial, sans-serif; margin: 0; padding: 0; -webkit-text-size-adjust: none; background-color: #000; color: #FFF; overflow-y: scroll; }

/* structure */
#container { min-height: 100%; width: 100%; display: flex; flex-direction: column; }
#logo { font-weight: 400; display: table-cell; white-space: nowrap; padding: 0 2em 0 0; font-size: 100%; letter-spacing: .05em; text-transform: uppercase; vertical-align: top; }
#newsticker { font-weight: 300; display: table-cell; padding: 0 11em 0 0; position: relative; }
#newstickerwrapper { position: relative; max-width: 640px; }
#newsticker p { margin: 0; font-family: Oswald; }
#newstickertext { position: absolute; width: inherit; }
#newstickerplaceholder { visibility: hidden; }
#newstickerplaceholder div { margin-left: -100%; width: 100%; float: right; }

#logo a { color: #000; text-decoration: none; }
#logo a:hover { color: #333; }
.innerwrapper { padding: 0 5%; }
nav { text-transform: uppercase; line-height: 1.25; }
nav ul { list-style: none; margin: 0; }
nav a { color: #999; text-decoration: none; display: inline-block; height: 21.5px; }
nav a:hover, nav a.active, nav a.activesparent { color: #FFF; text-decoration: none; }

#navigation { position: fixed; left: 0; top: 0; z-index: 2; padding: .175em 2em 1em 5%; font-size: 120%; letter-spacing: .125em; }
#navigation > div { background-image: url(./../img/buttons.png); background-size: auto 100%; background-repeat: no-repeat; min-height: 216px; background-position: right top; margin: 0; padding: 1px 0 0; }
#navigation ul { margin: 1.25em 11.625em 0 0; }
#navigation li { text-align: right; min-height: 21.7px; }
#navigation li:nth-child(2) { margin-right: -.75em; }
#navigation li:nth-child(3) { margin-right: -1.5em; }
#navigation li:nth-child(4) { margin-right: -2.25em; }
#navigation li:nth-child(5) { margin-right: -3em; }
#navigation li:nth-child(6) { margin-right: -3.75em; }
#navigation li:nth-child(7) { margin-right: -4.5em; }
#navigation li:nth-child(8) { margin-right: -5.25em; }
#navigation li:nth-child(9) { margin-right: -6em; }
#navigation li a { display: inline-block; position: relative; }

#smartbutton { position: fixed; top: 0; right: 0; z-index: 10; display: none; padding: .5em; padding: 1.4em .8em; width: 2.4em; height: 1em; border: none; }
#mailchimpformbutton { display: block; }
#smartbutton span { display: block; height: 2px; width: 100%; background-color: #FFF; position: relative; margin: calc(.5em - 1px) 0 0; transition: background-color 0s linear .15s, border-color 0s linear .15s; border: 1px solid #000; }
#smartbutton span:before, #smartbutton span:after { content: ''; display: block; height: inherit; background-color: #FFF; top: -9px; left: 0; position: absolute; width: 100%; transition: transform .15s ease-in, top .15s ease-out .15s; outline: 1px solid #000;  }
#smartbutton span:after { top: 9px; }

body.smartnavigation #smartbutton span { background-color: transparent; border-color: transparent; }
body.smartnavigation #smartbutton span:before, body.smartnavigation #smartbutton span:after { transition: top .15s ease-in, transform .15s ease-out .15s; outline: none; }
body.smartnavigation #smartbutton span:before { top: 0; transform: rotate(45deg); }
body.smartnavigation #smartbutton span:after { top: 0; transform: rotate(-45deg); }

#smartcover { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent; z-index: 1; display: none; }

#subnavigation { max-width: 700px; width: 100%; text-align: center; margin: /*.2em*/ 0 auto 0; letter-spacing: 1px; }
#subnavigation li { display: inline; }
.middot li:before { content: ' · '; margin: 0 .5em; }
.middot li:first-child:before { content: ''; margin: 0; }
#subnavigation li a { white-space: nowrap; }

#navigation a:after, #navigation a span.button { content: ''; width: 18px; height: 18px; background-color: rgba(255,255,255,.65); border-radius: 50%; position: absolute; margin: 1px 0 0 9px; -webkit-box-shadow: 0px 0px 8px 0px rgba(255,255,255,.5); -moz-box-shadow: 0px 0px 8px 0px rgba(255,255,255,.5); box-shadow: 0px 0px 4px 0px rgba(255,255,255,1); filter: blur(1px); opacity: 0; }
#navigation a.active:after, #navigation a.activesparent:after, #navigation a:hover:after, #navigation a span.button { opacity: 1; }
#navigation a span.button:nth-child(2) { margin-left: 34px; }
#navigation li:nth-child(9) a span.button:nth-child(2) { margin-left: 32px; }
#navigation a span.button:nth-child(3) { margin-left: 59px; width: 16px; height: 16px; margin-top: 2px; }
#navigation a span.button:nth-child(4) { margin-left: 84px; width: 16px; height: 16px; margin-top: 2px; }
#navigation a span.button:nth-child(5) { margin-left: 106px; width: 16px; height: 16px; margin-top: 2px; }
#navigation li:nth-child(8) a span.button:nth-child(5) { display: none !important; }
#navigation li:nth-child(9) a span.button:nth-child(5), #navigation li:nth-child(9) a span.button:nth-child(4), #navigation li:nth-child(9) a span.button:nth-child(3) { display: none !important; }

p { font-family: 'Roboto Slab', serif; }

#content { flex-grow: 2; }
section { /*width: 100%;*/ max-width: 700px; margin: 4em auto; position: relative; padding-bottom: 56px /* height of footer .innerwrapper */ }
section > *:first-child { margin-top: 0; }
section > article:first-child > *:first-child { margin-top: 0; }
section > .column.halfcolumn:first-child + .column.halfcolumn > *:first-child { margin-top: 0; }

h1, h2, h3 { margin: 1.25em 0 .625em; text-align: center; }
p, ul, ol { margin: .625em 0; }
h1 { font-size: 120%; font-weight: 300; letter-spacing: .125em; text-transform: uppercase; }
#news { text-align: center; }

strong { font-weight: 400; }

hr { border: none; border-top: 1px solid #FFF; height: 0px; padding: 0 0 2px; margin: 1.75em auto 1.25em; width: 50%; max-width: 350px; }
hr.double { border-bottom: 1px solid #FFF; padding: 0 0 2px; }

/* home */
body.home #content .innerwrapper { position: relative; min-height: 23em; }
body.home section { padding: 0; margin: 0; }
#homeimages { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; }
.homeimage { width: 100%; height: 100%; display: none; background-position: 25% 20%; background-size: cover; position: absolute; top: 0; left: 0; }
body.nojs .homeimage:first-child { display: block; }

body.home #navigation { position: absolute; }

/* gigs */
article.gig { position: relative; }
article.gig.soldout h1:after { content: 'sold out'; display: inline-block; text-transform: uppercase; color: #FFF; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; font-size: 70%; font-weight: 600; line-height: 1; padding: .15em 0; background-color: rgba(0,0,0,.5); vertical-align: middle; margin-left: .5em; }
article.gig.cancelled h1:before { content: 'cancelled'; display: inline-block; text-transform: uppercase; color: #FFFF33; border-top: 2px solid #FFFF33; border-bottom: 2px solid #FFFF33; font-size: 90%; transform: /*translate(5em, -.25em)*/ rotate(20deg); font-weight: 600; line-height: 1; padding: 0 0 .15em; background-color: rgba(0,0,0,.5); position: absolute; left: 10%; }

ol.pastgigs { list-style: none; text-align: justify; font-size: 90%; }
ol.pastgigs li { display: inline; }
ol.pastgigs li.soldout:after { content: 'sold out'; display: inline-block; text-transform: uppercase; color: #FFF; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; font-size: 70%; font-weight: 400; line-height: 1; padding: .15em 0; background-color: rgba(0,0,0,.5); margin: 0 0 0 .5em; vertical-align: middle; }
ul.gigfooter { list-style: none; text-align: center; }
ul.gigfooter li { display: inline; }

/* gallery */
body.gallery section { /*max-width: 1200px;*/ }
.pagegallery { margin: 0 -.675em; display: flex; flex-wrap: wrap; }
.pagegalleryimage { width: 25%; position: relative; }
.pagegalleryimage figure { margin: 0 .675em 1.25em; position: relative; }
.pagegalleryimage figure div { height: 0; padding-bottom: 67.85714285714286%; outline: 1px solid #222; }
.pagegalleryimage figure a { transition: opacity .5s; }
.pagegalleryimage figure a:hover { opacity: .8; }
.pagegalleryimage figure img { display: block; width: 100%; }
.pagegalleryimage figure figcaption { font-size: 80%; letter-spacing: 1px; padding: .25em 0 0; }
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: transparent; }
.pswp__caption__center { font-size: 100%; padding: 1em 5%; max-width: 640px; line-height: 1.4; }
.pswp__counter { font-size: 100%; line-height: 1.4; color: #FFF; padding: 1em; }

/**/
.pagedownloadwrapper { display: flex; flex-wrap: wrap; margin: 1.25em -.675em; }
.pagedownload { margin: 0 0 1.25em; position: relative; width: 50%; padding: 0 .675em; box-sizing: border-box; }
.pagedownload > div:first-child { background-color: #333; padding: .675em; }
.pagedownload p { margin: 0; }
.pagedownload figure { height: 0; margin: .2em 0 .5em; }
.pagedownload figure img { width: 100%; height: auto; }

/**/
.pagemusicwrapper { display: flex; flex-wrap: wrap; margin: 0 -.675em; }
.pagemusic { margin: 0 0 1.25em; position: relative; width: 50%; padding: 0 .675em; box-sizing: border-box; }
.pagemusic.video { width: 33.3333%; }
.pagemusic .gvideoembed { margin: 0; outline: 1px solid #222; }
.pagemusic ul.playlist { list-style: none; margin: 0; }
.pagemusic ul.playlist a { padding: 0 0 0 1.875em; display: inline-block; position: relative; }
.pagemusic .caption { font-size: 80%; letter-spacing: 1px; padding: .25em 0 0; }

.pagemusic ul.playlist a:before { content: ''; color: #FFF; font-family: 'Material Design Icons'; text-align: center; display: block; position: absolute; left: 0; top: -1px; width: 100%; height: 100%; overflow: hidden; line-height: 1.35rem; font-size: 1.0625rem; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; font-weight: 400 !important; font-style: normal !important; }
.pagemusic ul.playlist a:before { width: 1.3em; height: 1.3em; background-color: #999; display: inline-block; vertical-align: bottom; border-radius: 50%; position: absolute; content: '\F040A'; }
.pagemusic ul.playlist li.playing a:before { content: '\F03E4'; }
.pagemusic ul.playlist li.loading a:before { content: '\F04DB'; }

.pagemusic p { margin: 0; }
.pagemusic p:first-child { margin-top: .625em; }
ul.playlist li > div { display: none; }

.embedwrapper { position: relative; margin: 0 0 1.25em; }

/**/
.socialswrapper { text-align: center; margin: 0 0 1.25em; }
.socialswrapper a.social { margin: 0 .5em; }
.socialswrapper a.social:before { content: ''; color: #FFF; font-family: 'Material Design Icons'; text-align: center; display: inline-block; overflow: hidden; line-height: .85; font-size: 300%; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; font-weight: 400 !important; font-style: normal !important; vertical-align: middle; }
.socialswrapper a.social span { display: none; }
.socialswrapper a.social:hover { opacity: .8; }
.socialswrapper a.social.facebook:before { content: '\F020C'; color: #3B5998; }
.socialswrapper a.social.twitter:before { content: '\F0544'; color: #1DA1F2; }
.socialswrapper a.social.youtube:before { content: '\F05C3'; color: #FF0000; font-size: 390%; }
.socialswrapper a.social.instagram:before { content: '\F02FE'; color: #666; font-size: 290%; }

/**/
footer { background-color: #FFF; color: #000; position: fixed; bottom: 0; left: 0; right: 0; z-index: 101; }
body.home footer { position: static; width: 100%; }
footer .innerwrapper { min-height: 20px; padding-top: 1.25em; padding-bottom: 1.25em; position: relative; }
footer .innerwrapper > div { display: table; }
footer .innerwrapper > div > div { display: table-row; }
#homelink { top: 1.05em; height: 24px; width: 24px; display: block; position: absolute; right: 4.5%; border-radius: 30%; background-image: url(./../img/batkovic.png); background-repeat: no-repeat; background-position: center; background-size: contain; }
body.home #homelink { height: 70px; width: 70px; top: 1.25em; }

a { color: #999; text-decoration: none; }
a:focus { outline: none; }
a:hover { text-decoration: underline; }
a img { border: none; }

/* columns */
article.column { float: right; margin: 0 0 5%; }
article.column:first-child { float: left; }
article.halfcolumn { width: 47%; }
article.pagepart { width: 100%; float: left; position: relative; }
article.pagepart h1 { text-align: left; }
article.pagepart figure { float: left; margin: 1.75em 1.25em 0 0; max-width: 30%; }
article.pagepart figure img { max-width: 100%; height: auto; }

/* gvideoembed */
span.gvideoembed { margin: 1.25em 0; display: block; background-size: cover; position: relative; background-position: center; max-width: 100% !important; padding-bottom: 56.25%; height: 0 !important; overflow: hidden; transition: background-color .25s; transition: opacity .25s; cursor: pointer; background-color: #000; }
span.gvideoembed:hover { opacity: .9; }
span.gvideoembed a.gvideoembed { display: none; }
span.gvideoembed:before { opacity: .5; content: ''; display: block; border-radius: 50%; width: 44px; height: 44px; background-color: #FFF; position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; padding: 0; transition: all .25s; }
span.gvideoembed:after { opacity: .9; content: ''; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -8px; width:0; height:0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 22px solid #000; transition: all .25s; }
span.gvideoembed:hover:before, span.gvideoembed:hover:after { opacity: .85; }
span.gvideoembed.loaded, span.gvideoembed.loaded:hover { opacity: 1; cursor: wait; }
span.gvideoembed.loaded:after, span.gvideoembed.loaded:before { display: none; }
.gvideoembed iframe, .gvideoembed object, .gvideoembed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; }

/* googlemap */
span.googlemap { }
img.gimageleft { margin: .3em 1.25em 1.25em 0 !important; float: left; }
img.gimageright { margin: .3em 0 1.25em 1.25em !important; float: right; }

.clearfix:before, .clearfix:after { content: ' '; display: table; }
.clearfix:after { clear: both; }
span.nowrap { white-space: nowrap; }

@media only screen {
	body { min-width: 320px; }
	img.gimageleft, img.gimageright { max-width: 30%; height: auto; }
}

body.gallery section { margin-left: 19em; max-width: 1500px; }

@media only screen and (max-width: 1400px) {
	section { margin-left: 19em; box-sizing: border-box; }
	.pagegalleryimage { width: 33.3333%; }
	.pagemusic.video { width: 50%; }
}

@media only screen and (max-width: 1080px) {
	.innerwrapper { padding: 0 2%; }
	#navigation { padding-left: 2%; }
	#homelink { right: 2%; }
	section { max-width: initial; }
}
@media only screen and (max-width: 880px) {
	.pagegalleryimage { width: 50%; }
}

@media only screen and (max-width: 760px) {
	#navigation { position: fixed; left: 0; right: 0; padding: .175em 2% 1em; transform: translateY(-100%); font-size: 160%; transition: transform .5s, background-color .5s; }
	#smartbutton { display: block; }
	body.smartnavigation #navigation { transform: translateY(0); background-color: #000; }
	body.smartnavigation #smartcover { display: block; }
	body.home #navigation { background-color: transparent; transform: translateY(0) !important; overflow-x: hidden; }
	body.home #smartbutton { display: none; }
	#navigation > div { display: inline-block; }
	body.gallery section, section { margin-left: auto; }

	#navigation > div { min-height: 288px; min-width: 330px; }
	#navigation ul { }
	#navigation ul a { height: 28.75px; }
	#navigation ul a > span:first-child { font-size: 80%; }
	#navigation a:after, #navigation a span.button { content: ''; width: 26px; height: 26px; margin: 1px 0 0 11px; }
	#navigation a span.button:nth-child(2) { margin-left: 45px; }
	#navigation a span.button:nth-child(3) { margin-left: 79px; width: 24px; height: 24px; margin-top: 2px; }
	#navigation a span.button:nth-child(4) { margin-left: 111px; width: 24px; height: 24px; margin-top: 2px; }
	#navigation a span.button:nth-child(5) { margin-left: 140px; width: 24px; height: 24px; margin-top: 2px; }
	#navigation li:nth-child(9) a span.button:nth-child(2) { margin-left: 42px; }
}


@media only screen and (max-width: 560px) {
	/*
	footer .innerwrapper > div, footer .innerwrapper > div > div { display: block; }
	*/
	#logo, #newsticker { display: block; }
	/*#logo { font-size: 160%; }*/
	#newsticker { margin-top: 1.25em; padding: 0; }
	#newsticker { padding: 0; }
	/*footer .innerwrapper { min-height: 20px; }*/
	#homelink, body.home #homelink { top: 1.05em; height: 24px; width: 24px; right: 2%; }
	
	.pagemusicwrapper { display: block; margin: 0; }
	.pagemusic { width: 100%; padding: 0; }
	.pagemusic.video { width: 100%; }
}
@media only screen and (max-width: 500px) {
	#navigation { text-align: center; }
	.column.halfcolumn { width: 100%; }
	.column.halfcolumn + .column.halfcolumn { margin-top: 2.5em; } 
}
@media only screen and (max-width: 400px) {
	.pagegallery { display: block; margin: 0; }
	.pagegalleryimage { width: 100%; }
	.pagegalleryimage figure { margin-left: 0; margin-right: 0; }
}