/* CSS by Phil Hoffer */

/* === fonts === */

@font-face
 {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lora-v26-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/lora-v26-latin-regular.woff') format('woff');   /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

@font-face
 {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/lora-v26-latin-500.woff2') format('woff2'),
       url('fonts/lora-v26-latin-500.woff') format('woff');
 }

@font-face
 {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lora-v26-latin-700.woff2') format('woff2'),
       url('fonts/lora-v26-latin-700.woff') format('woff');
 }

@font-face
 {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/lora-v26-latin-500italic.woff2') format('woff2'),
       url('fonts/lora-v26-latin-500italic.woff') format('woff');
 }

@font-face
 {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/lora-v26-latin-700italic.woff2') format('woff2'),
       url('fonts/lora-v26-latin-700italic.woff') format('woff');
 }

@font-face {
  font-family: 'Neco';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Neco-Regular.woff2') format('woff2'),
       url('fonts/Neco-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Neco';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/Neco-Italic.woff2') format('woff2'),
       url('fonts/Neco-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Neco';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/Neco-Medium.woff2') format('woff2'),
       url('fonts/Neco-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Neco';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/Neco-MediumItalic.woff2') format('woff2'),
       url('fonts/Neco-MediumItalic.woff') format('woff');
}

@font-face {
  font-family: 'Neco';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Neco-Bold.woff2') format('woff2'),
       url('fonts/Neco-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Neco';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/Neco-BoldItalic.woff2') format('woff2'),
       url('fonts/Neco-BoldItalic.woff') format('woff');
}

@font-face {
  font-family: 'Neco';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/Neco-Black.woff2') format('woff2'),
       url('fonts/Neco-Black.woff') format('woff');
}

@font-face {
  font-family: 'Neco';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/Neco-BlackItalic.woff2') format('woff2'),
       url('fonts/Neco-BlackItalic.woff') format('woff');
}

html,body,p,a,li,h1,h2,h3,h4,h5,h6 { font-family: Neco, "Times New Roman", serif; font-weight: 400; color: #2e2c2c;}

html,body
{
 height: 100%;
 background: url(bg_02a.png) repeat fixed #fff7f7;
}

html
{
 box-sizing: border-box;
}

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


/* formatting */

#resurrexit
{
 padding: 0 !important;
 margin-top: 32px;
 margin-bottom: 32px;
}

.r-padding
{
 padding: 32px !important;
}

.r-content
{
 padding: 32px 64px 32px !important;
 color: #2e2c2c !important;
 background-color: #fff7f7 !important;
}



/* Konzerte */

.expired { display: none; }



/* text */

p
{
 margin: 0 0 12px;
}

/*
p, li
{
 hyphens: auto;
 -moz-hyphens: auto;
 -webkit-hyphens: auto; 
}
*/

p, a, li, li a
{
 font-size: 17px;
 line-height: 1.6em; 
}

a
{
 text-decoration: underline;
}

a:hover
{
 text-decoration: none;
 color: inherit;
}

small
{
 font-size: 13px;
}

small a
{
 font-size: inherit;
}

small a:hover 
{
 color: inherit;
}



/* headlines */

h1 { font-size: 38px !important; font-weight: 700; font-style: italic; margin: 30px 0 15px; }
h2 { font-size: 33px !important; font-weight: 700; font-style: italic; }
h3 { font-size: 29px !important; }
h4 { font-size: 24px !important; }
h5 { font-size: 22px !important; }
h6 { font-size: 19px !important; font-weight: 500; font-style: italic; }



/* divider */

.div
{
 width: 100%;
 height: 1px;
 background: rgba(0,0,0,0.45);
 margin: 32px 0 32px;
}



/*  Bilder */

.r-bild
{
 max-width: 100%;
 margin: 0 0 12px;
}

.r-bild img
{
 max-width: 100%;
 border-radius: 3px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}



/* */

.left
{
 float: left;
 width: 49%;
 padding-right: 16px;
}

.right
{
 float: right;
 width: 49%;
}

.left a img {
 width: 100%;
 height: auto;
 border-radius: 3px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
 transition: all 0.1s ease-out;
}

.left a:hover img {
 box-shadow: 0 3px 8px rgba(0,0,0,0.33);
 transition: all 0.1s;
}

.clearfix
{
 clear: both;
}



/*  Fotos */

#fotos
{
 column-count: 2;
 column-gap: 14px;
}

#fotos img
{
 display: inline-block;
 max-width: 100%;
 margin: 0 0 14px;
 border-radius: 3px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
 XXtransition: all 250ms ease-out;
}

#fotos img:hover
{
 XXmargin: -4px 0 18px;
 XXtransition: all 50ms;
}



/* logo */

#logo
{
 max-width: 350px;
 padding: 24px 0 42px; 
 margin: 0 auto; 
}

#logo img
{
 max-width: 100%;
}



/* menu */

#r-Navbar
{ 
 margin: 0 0 32px; 
 padding: 12px 0;
 border-color: rgba(0,0,0,0.5);
 border-top: 1px solid;
 border-bottom: 1px solid;
 font-size: 0;
}

#r-Navbar ul,
#r-Navbar ul li
 {
  display: inline-block;
  padding: 0;
  list-style-type: none;
  position: relative;
 }

#r-Navbar ul li
 {
 border-right: 1px solid;
 border-color: inherit;
}

#r-Navbar ul li ul li,
#r-Navbar ul li:last-child, 
#r-Navbar .w3-hover-black
{
 border: none;
}

#r-Navbar ul li ul
 {
  position: absolute;
  display: block;
  z-index: 93;
  background: #fff7f7;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  left: -9px;
  padding: 10px 0;
 }

#r-Navbar ul li ul li
 {
  display: block;
 }

#r-Navbar ul li ul
 {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 200ms;
 }

#r-Navbar ul li:hover ul 
 {
  height: 9em;
  height: auto;
  opacity: 1;
 }

#r-Navbar a,
#r-Navdrop a
{
 display: block;
 padding: 10px 22px;
 margin: 0 !important;
 font-weight: 400;
 font-size: 15px;
 text-transform: uppercase;
 font-family: Lora, "Times New Roman", serif; 
 letter-spacing: 0.1em;
}

#r-Navbar a:hover
{
 background: rgba(0,0,0,0.03) !important;
 text-decoration: none;
 color: inherit !important;
}

#r-Navdrop
{
 margin: -32px 0 0;
 float: left;
 position: absolute;
 display: block;
 width: calc(100% - 128px);
 background: #fffefe;
 box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#r-Navdrop ul,
#r-Navdrop ul li
 {
  display: block;
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
 }

#r-Navdrop > ul
 {
  padding: 10px 0;
 }

#r-Navdrop > ul > li
{
 border-bottom: 1px solid;
 border-color: rgba(0,0,0,0.2);
 margin: 0 10px;
}

#r-Navdrop > ul > li:last-child
{
 border: none;
}

#r-Navdrop a,
#r-Navdrop > ul > li > div
{
 border: none;
 text-align: center;
}

#r-Navdrop > ul > li > div
{
 padding: 10px 22px 0;
}

#r-Navdrop a:hover
{
 background: rgba(0,0,0,0.03) !important;
}

.no-link {
 cursor: auto;
}

@media (min-width:730px) 
 {
.r-hide-big  { display: none!important; }
}

@media (max-width:729px) 
{
.r-hide-small  { display: none!important; }
}
















/* old */

.w3-card p
 { margin: 6px 0; }

.w3-button.wrap,
.wrap
 { white-space: normal !important; }





.schmal
 { max-width: 680px; margin: 0 auto; }

.w3-round-xlarge-top
 { border-radius: 16px 16px 0 0; }

.w3-round-xlarge-bottom
 { border-radius: 0 0 16px 16px; }





.w3-ul-sub
 { padding: 0; margin-left: 1em; }

.facebook
 { width: 20px; height: 20px; margin: 0 4px 4px 0; }

.close
 { color: #fff; }






/* Modal overrides */

.w3-modal
 { display: block; }

.w3-modal a:hover
 { color: inherit; }







/* smaller font on tablets and phones */

@media only screen and (max-device-width: 1300px) {

	p, a { font-size: 17px; }

}


/* 1 column fotos on smaller screens (like nav) */

@media (max-width:729px) {

	#fotos { column-count: 1; }

}


/* smaller margins on smaller screens */

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

	#resurrexit { margin-top: 0; margin-bottom: 0; }
	.r-padding { padding: 32px !important; }
	.r-content { padding: 32px 32px 16px !important; }
	#r-Navdrop { width: calc(100% - 80px); }

}

@media only screen and (max-device-width: 600px) {

	#resurrexit { margin-top: 0px; margin-bottom: 0; }
	.r-padding { padding: 16px !important; }
	.r-content { padding: 24px 24px 8px !important; }
	#r-Navdrop { width: calc(100% - 80px); }
	#logo { padding: 12px 0 32px;}
	#logo img { margin: 0 16px;}
	.left, .right { float: none; width: 100%; padding: 0; }

}

@media only screen and (max-device-width: 350px) {

	#logo { padding: 6px 0 24px;}
	#logo img { margin: 0 6px;}
}