/********************************
 * Main CSS file for micasas-elportet.de
 ********************************/

/* Normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}
audio,canvas,video{display:inline;zoom:1;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html,button,input,select,textarea{font-family:sans-serif;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0;}
h2{font-size:1.5em;margin: 0;}
h3{font-size:1.17em;margin: 0;}
h4{font-size:1em;margin: 0;}
h5{font-size:.83em;margin: 0;}
h6{font-size:.67em;margin: 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:700;}
blockquote{margin:1em 40px;}
dfn{font-style:italic;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;}
pre{white-space:pre-wrap;word-wrap:break-word;}
q{quotes:none;}
q:before,q:after{content:none;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-.5em;}
sub{bottom:-.25em;}
dd{margin:0 0 0 40px;}
menu,ol,ul{padding:0;}
nav ul,nav ol{list-style:none;list-style-image:none;}
img{border:0;-ms-interpolation-mode:bicubic;}
svg:not(:root){overflow:hidden;}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}
legend{border:0;white-space:normal;margin-left:-7px;padding:0;}
button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0;}
button,input{line-height:normal;}
button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible;}
button[disabled],input[disabled]{cursor:default;}
input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;width:13px;padding:0;}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
body,figure,form{margin:0;}
p,pre,dl,menu,ol,ul{margin:0 0;}

/* Boilerplate Reset */
html,button,input,select,textarea{color:#222;}
body{font-size:1em;line-height:1.4;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
img{vertical-align:middle;}
fieldset{border:0;margin:0;padding:0;}
textarea{resize:vertical;}
::-moz-selection,::selection{background:#b3d4fc;text-shadow:none;}

/* User Styles */
body {
	background-color: #fcf1e7;
    color: #402E21;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
}
	a {
	   color: #71553E;
	}
	a:hover {
	   color: #402E21;
	}
	
	#header {
		margin-bottom: 30px;
		padding: 0 15px;
		position: relative;
	}
      #header .logo {
         float: left;
         width: 200px;
      }
         #header .logo img {
            max-width: 100%;
         }
      #header .languages {
         float: right;
         list-style-type: none;
         margin-right: -5px;
      }
         #header .languages li {
            float: left;
            font-size: 10px;
            margin-left: 10px;
         }
         #header .languages li:first-child {
            margin-left: 0;
         }
            #header .languages li a,
            #header .languages li span {
               display: block;
               height: 25px;
               text-decoration: none;
               text-indent: -9999px;
               width: 34px;
            }
      #navigation {
         clear: both;
         float: left;
         margin: -40px auto 0px;
         position: relative;
         left: 200px;
      }
         #navigation ul {
            list-style-type: none;
            margin: auto;
            position: relative;
         }
            #navigation li {
               float: left;
               margin-left: 10px;
			   min-height: 25px;
            }
            #navigation li:first-child {
               margin-left: 0;
            }
               #navigation a {
                  display: block;
                  font-weight: bold;
                  line-height: 20px;
                  padding: 0 10px;
                  text-decoration: none;
                  text-transform: uppercase;
               }
               #navigation li.active > a {
                  padding-bottom: 5px;
               }
               #navigation li ul {
                  display: none;
               }
               #navigation li.active > ul {
                  border-top: 1px solid;
                  display: block;
                  float: none;
                  left: auto;
                  position: absolute;
                  top: 25px;
               }
                  #navigation li.active li a {
                     font-weight: normal;
                     text-transform: none;
                  }
                  #navigation li.active li.active a {
                     font-weight: bold;
                     padding-bottom: 0;
                  }
   #main {
      margin: 20px auto;
      position: relative;
      max-width: 950px;
   }
      #content {
        background-color: #e5cbac;
        -webkit-box-shadow: 0 0 8px 1px #2e231f;
        -moz-box-shadow: 0 0 8px 1px #2e231f;
        box-shadow: 0 0 8px 1px #2e231f;
        padding: 15px 15px 5px;
      }
         #content img {
            max-width: 100%;
         }
         #content h1 {
            font-size: 1.5em;
            margin: 0 0 5px;
         }
         #content h2 {
            font-size: 1.3em;
            margin: 0 0 5px;
         }
         #content .intro,
         #content .text {
            margin-bottom: 20px;
         }
         #content .text.small {
            font-size: 0.916em;
         }
         #content .text.center {
            text-align: center;
         }
            #content .intro p,
            #content .text p {
               margin-bottom: 0.5em;
            }
            #content .intro h2,
            #content .text h2 {
               font-size: 1.083em;
            }
            #content .intro ul,
            #content .text ul {
               list-style-position: inside;
               list-style-type: none;
               margin-bottom: 10px;
            }
               #content .intro li,
               #content .text li {
                  padding-left: 13px;
               }
               #content .intro li:before,
               #content .text li:before {
                  content: '-';
                  margin-left: -13px;
                  margin-right: 7px;
               }
         #content table {
            margin-top: 10px;
            margin-bottom: 15px;
            table-layout: fixed;
         }
            #content table th {
               border-bottom: 1px solid;
               border-right: 1px solid;
               padding: 3px 7px;
            }
            #content table td {
               border-bottom: 1px solid;
               border-right: 1px solid;
               padding: 3px 7px;
            }
            #content table th:first-child,
            #content table td:first-child {
               border-left: 1px solid;
            }
         #content .stage {
            margin: 0 auto 20px;
			text-align: center;
         }
         #content .stage.small {
            width: 70%;
         }
		#content .stage.video {
			position: relative;
			text-align: left;
			width: 70%;
		}
			#content .stage.video:after {
				content: "";
				display: block;
				padding-bottom: 55%;
			}
			#content .stage.video iframe {
				height: 100%;
				position: absolute;
				width: 100%;
			}
            #content .stage p {
               margin-bottom: 20px;
               margin-top: 8px;
			   text-align: left;
            }
		#content .info {
			font-size: 0.916em;
			margin: -10px auto 30px;
			position: relative;
			width: 70%;
		}
        #content .gallery {
            margin: 0 -1% 20px;
        }
            #content .gallery a {
               display: block;
               float: left;
               margin: 0 1% 2%;
               overflow: hidden;
               width: 18%;
            }
               #content .gallery a img {
                  max-height: 100%;
                  max-width: 100%;
               }
         #content .teaser {
            margin: auto auto 20px;
            width: 50%;
         }
            #content .teaser a {
               display: block;
               font-size: 1.083em;
               font-weight: bold;
               line-height: 1.8;
               padding: 10px 10px 10px 35px;
               text-decoration: none;
            }
			
	#intro {
		/*display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 10px;*/
		display: block;
		margin-bottom: 30px;
	}
		#intro .tile {
			display: block;
			justify-self: stretch;
			height: 500px;
			overflow: hidden;
			position: relative;
		}
		#intro img {
			height: 100%;
			object-fit: cover;
			left: 50%;
			position: relative;
			transition: transform 0.3s ease-out;
			transform: translateX(-50%);
			width: auto;
			z-index: 1;
		}
		#intro a:hover img {
			transform: translateX(-50%) scale(1.1);
		}
		#intro h2 {
			color: #FFFFFF;
			font-size: 30px;
			left: 20px;
			position: absolute;
			text-shadow: 2px 2px 0 #444444, 2px -2px 0 #444444, -2px 2px 0 #444444, -2px -2px 0 #444444, 2px 0px 0 #444444, 0px 2px 0 #444444, -2px 0px 0 #444444, 0px -2px 0 #444444, 2px 2px 2px rgba(0,0,0,0);
			top: 20px;
			z-index: 5;
		}
			
      #calendar {
         margin: 0 auto 20px;
         position: relative;
         width: 70%;
      }
         #calendar .fc-header td,
         #calendar .fc-header td:first-child {
            border: 0 none;
         }
            #calendar .fc-header-title {
               text-align: center;
            }
            #calendar .fc-button {
                  cursor: pointer;
                  display: block;
                  height: 25px;
                  width: 30px;
            }
            #calendar .fc-button-prev {
               float: left;
            }
            #calendar .fc-button-next {
               float: right;
            }
               #calendar .fc-button span {
                  display: none;
               }
         #calendar .fc-content td {
            font-size: 0.834em;
            padding: 5px;
            vertical-align: middle;
         }
            #calendar .fc-content td > div {
               height: 4em;
               min-height: 0 !important;
            }
        
         #calendar .fc-event {
            height: 2em;
            margin-top: -20px;
            text-indent: -9999px;
         }
      #content .legend {
         margin: 0 auto 20px;
         width: 70%;
      }
         #content .legend p {
            
         }
         #content .legend p:before {
            border: 1px solid;
            content: "";
            display: inline-block;
            height: 1.2em;
            margin-bottom: 5px;
            margin-right: 10px;
            vertical-align: middle;
            width: 30px;
         }
      #content .map {
         height: 300px;
         margin: 0 auto 20px;
         width: 70%;
      }
        
   #footer {
      padding: 0 15px;
      margin-top: 8px;
   }
      #footer .info {
         float: left;
      }
      #footer .links {
         float: right;
         line-height: 17px;
         list-style-type: none;
      }
         #footer .links li {
            float: left;
            font-size: 10px;
            margin-left: 10px;
         }
         #footer .links li:first-child {
            margin-left: 0;
         }
            #footer .links li a {
               text-decoration: none;
            }
			
/* Mediaqueries */
@media screen and (max-width: 960px) {
   #header .logo {
       width: 17%;
   }
   #navigation {
		left: 17%;
   }
}
@media screen and (max-width: 730px) {
   #header {
      margin-bottom: 20px;
      position: static;
   }
      #header .logo {
         width: 200px;
      }
      #navigation {
         float: none;
         left: 0;
         margin: 15px 5px 0;
         width: auto;
      }
         #navigation ul {
            height: auto;
         }
            #navigation li {
               float: none;
			   margin-top: 10px;
               margin-left: 0;
            }
            #navigation li.active {
               height: auto;
            }
               #navigation li.active > ul {
                  position: relative;
                  top: 0;
               }
   #content .stage.small {
      width: 100%;
   }
   #content .map {
	   margin-left: 0;
	   margin-right: 0;
   }
   #calendar {
      width: 100%;
   }
   #main .gallery a {
      width: 31%;
   }
   #footer {
      padding-top: 20px;
   }
}
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
	cursor:pointer;
	border: 0 none;
	background-color: transparent;
}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{
   background-color: #000000;
}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px;}
    #cboxTopRight{width:21px; height:21px;}
    #cboxBottomLeft{width:21px; height:21px;}
    #cboxBottomRight{width:21px; height:21px; }
    #cboxMiddleLeft{width:21px;}
    #cboxMiddleRight{width:21px;}
    #cboxTopCenter{height:21px; }
    #cboxBottomCenter{height:21px;}
    #cboxContent{
      background:#fff;
   }
      .cboxIframe{background:#fff;}
      #cboxError{padding:50px; border:1px solid #ccc;}
      #cboxLoadedContent{}
         #cboxLoadedContent img {
            max-width: 900px;
            max-height: 900px;
         }
      #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
      #cboxCurrent{
         background-color: #FCF1E7;
         bottom: -22px;
         color: #71553E;
         left: 0;
         line-height: 22px;
         padding: 0 10px;
         position: absolute;
         right: 0;
      }
      #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
      #cboxPrevious {
		  height: 100%;
		position:absolute;
        left: 0;
		text-indent:-9999px;
		top: 0;
		width: 50px;
	  }
	  #cboxPrevious:before{
         background-position: -83px -29px;
		 content: "";
		 display: block;
         height: 30px;
         left: 10px;
         margin-top: -15px;
         position:absolute;
         top: 50%;
         width: 30px;
      }
      #cboxPrevious:hover:before{
         background-position: -84px -67px;
      }
	  #cboxNext {
		  height: 100%;
		position:absolute;
        right: 0;
		top: 0;
		text-indent:-9999px;
		width: 50px;
	  }
      #cboxNext:before{
        background-position: -42px -29px;
		content: "";
		display: block;
        height: 30px;
		left: 10px;
        margin-top: -15px;
		position: absolute;
        top: 50%;
        width: 30px;
      }
      #cboxNext:hover:before{
         background-position: -42px -67px;
      }
      #cboxClose{
         background-position: 3px -29px;
         height: 25px;
         position: absolute;
         right: -12px;
         text-indent: -9999px;
         top: -9px;
         width: 25px;
      }
      #cboxClose:hover{
         background-position: 3px -54px;
      }

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}


/* Helper Classes */
.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;}
.ir:before{content:"";display:block;width:0;height:100%;}
.hidden{display:none!important;visibility:hidden;}
.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0;}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0;}
.invisible{visibility:hidden;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}

@media print {
   *{background:transparent!important;color:#000!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) ")";}
   .ir a:after,a[href^=javascript:]:after,a[href^=#]:after{content:"";}
   pre,blockquote{border:1px solid #999;page-break-inside:avoid;}
   thead{display:table-header-group;}
   tr,img{page-break-inside:avoid;}
   img{max-width:100%!important;}
   @page{margin:.5cm;}
   p,h2,h3{orphans:3;widows:3;}
   h2,h3{page-break-after:avoid;}
}