nav-cube-container* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a, a:link, a:visited, a:hover, a:active, a:focus { outline: medium none; }
a:hover { color:#000; text-decoration:none; }

html { -webkit-font-smoothing: antialiased; }

html,
body {
    width: 100%;
    /*height: 100%;*/
}

header { margin-top:35px; margin-bottom:35px; }
@media (min-width: 768px) {
	header { margin-top:75px; margin-bottom:55px; }
}

@media (min-width: 992px) {
	header { margin-top:75px; margin-bottom:75px; }
}

/* ### BACKGROUND ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
.bg { 
	position:absolute;
	width:100%;
	height:40%;
	border-top:1px solid #28724f;
	z-index:-1;
	background: #fff; /* Old browsers */
	background: -moz-linear-gradient(top, #ccc 0%, #fff 40%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(40%,#fff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ccc 0%,#fff 40%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ccc 0%,#fff 40%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ccc 0%,#fff 40%); /* IE10+ */
	background: linear-gradient(top, #ccc 0%,#fff 40%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccc', endColorstr='#fff',GradientType=0 ); /* IE6-9 */
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.bg-start { margin-top:44.5%; }
@media (min-width: 360px) {	.bg-start { margin-top:44%; } }
@media (min-width: 480px) {	.bg-start { margin-top:41.5%; } }
@media (min-width: 768px) {	.bg-start { margin-top:321px; } }
@media (min-width: 992px) {	.bg-start { margin-top:427px; } }
@media (min-width: 1200px) { .bg-start { margin-top:506px; } }

.bg-standard { margin-top:44.5%; }
@media (min-width: 360px) {	.bg-standard { margin-top:44%; } }
@media (min-width: 480px) {	.bg-standard { margin-top:41.5%; } }
@media (min-width: 768px) {	.bg-standard { margin-top:210px; } }
@media (min-width: 992px) {	.bg-standard { margin-top:283px; } }
@media (min-width: 1200px) { .bg-standard { margin-top:332px; } }

/* ### NAV ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
.nav-cube-container { padding-left:5px; padding-right:5px; text-align:center; }
.nav-cube { width:20%; float: left; padding-left:5px; padding-right:5px; text-align:center; position: relative; }

.nav-effect {
	position: absolute;
	padding-right: 15px;
}

@media (min-width: 480px) {
	.nav-cube-container { padding-left:10px; padding-right:10px; }
	.nav-cube { padding-left:10px; padding-right:10px; }
}

@media (min-width: 680px) {
	.nav-cube-container { padding-left:0; padding-right:0; }
	.nav-cube { padding-left:15px; padding-right:15px; }
}

.img-fade { 
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.img-fadeout { 
	filter: alpha(opacity=30); 
	opacity: 0.3;  
}
	
.img-fadein { 
	filter: alpha(opacity=80); 
	opacity: 0.90; 
}

/* ### SECTIONS ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
section { padding:0; padding-bottom:25px; text-align:center; }
.section-heading { margin:0; font-size: 2em; }
.section-lead { margin: 30px 0; }
.section-paragraph { margin: 30px 0; }

@media(min-width:768px) {
    section { padding-top: 25px; padding-bottom: 25px; }
    .section-heading { font-size: 4em; }
}

/* ### CONTENT ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
h1, h2, h3, h4, h5, h6 { color:#28724f; }

h1 { font-size:2em; padding:0; margin:0; padding-bottom:15px; }
h2 { font-size:1.5em; padding:0; margin:0; padding-bottom:15px; }
h3 { font-size:1.15em; padding:0; padding-bottom:5px; margin:0; line-height:1.15em; }

p { font-size:1em; }

@media(min-width:768px) {
	h1 { font-size:4em; padding-bottom:25px; }
	h2 { font-size:2.5em; padding-bottom:25px; }
	h3 { font-size:1.5em; padding:0; margin:0; line-height:1.5em; }
	
	p { font-size:1.2em; line-height:1.5em; }
}

.tinymcewysiwyg a,
.tinymcewysiwyg a:link { color:#000; text-decoration:underline; }

.tinymcewysiwyg a:hover { color:#28724f; }

.spalte-bild { margin-top:15px; }
@media(min-width:768px) { .spalte-bild { margin-top:0; } }

.section-onesp,
.section-twosp { text-align:left; }
.section-twosp-l,
.section-twosp-r { text-align:left; }

@media (min-width: 480px) {	
	.section-onesp,
	.section-twosp { text-align:center; }
	.section-twosp-l { text-align:left; }
	.section-twosp-r { text-align:left; }
}

/* ### ### Google-Maps / Modals ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */

.map_container {
    position: relative;
    width: 100%;
   	padding-bottom: 100%; 
	background-color:transparent;
}

.map_container #map_canvas_kanalweg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:transparent;
}

.modal-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius:0;
  -webkit-box-shadow:none;
  box-shadow:none;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  outline: 0;
}

.modal-body { position: relative; padding: 15px; background-color:#fff; border:0; }

.modal-content button { position:absolute; z-index:999; top:0; right:0; display:block; width:36px; height:36px; border-top:6px solid #fff; border-left:6px solid #fff; border-right:6px solid #fff; border-bottom:6px solid #fff; background-color:#fff; color:#222;  opacity: 1; filter: alpha(opacity=100); background-image:url(../files/btn-nav-1.png); background-size:cover;}
.modal-content button:hover { opacity: 1; filter: alpha(opacity=100); background-image:url(../files/btn-nav-1-1.png); }
.modal-header { border-bottom: none; padding-bottom:0; }
.modal-footer { border-top: none; }
.modal-backdrop.in {
  opacity: 0.75;
  filter: alpha(opacity=75);
  background-color:#28724f;
}

@media(min-width:768px) {
	.modal-content button { top:18px; right:-36px; }
}


/* ### ### ### GALERIE ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
.tabgallery { padding:0; margin:0; margin-bottom:25px; }
.grid { width:100%; margin: 0 auto; }
.grid:after { content: ''; display: block; clear: both; }

.grid-sizer,
	.grid-item { width: 18.5%; display:block; }
	.gutter-sizer { width: 3.75%; }
	.grid-item--width2 { width: 37%; }

@media(min-width:480px) {
	.grid-item { width: 10%; display:block; }
	.gutter-sizer { width: 2.5%; }
	.grid-item--width2 { width: 20%; }
}



/* ### ### ### LIGHTBOX ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
#imagelightbox
{
    position: fixed;
    z-index: 9999;
 
    -ms-touch-action: none;
    touch-action: none;
}

#imagelightbox-overlay {
	background-color: #28724f;
	opacity: 0.75;
  	filter: alpha(opacity=75);
	position: fixed;
	z-index: 9998;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#imagelightbox-caption {
	text-align: center;
	color: #fff;
	background-color: #28724f;
	position: fixed;
	z-index: 10001;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.625em; /* 10 */
}

/* CLOSE BUTTON */

#imagelightbox-close {
	width: 2.5em;
	height: 2.5em;
	text-align: left;
	background-color: #28724f;
	border:none;
	position: fixed;
	z-index: 10002;
	top: 2.5em;
	right: 2.5em;	
	-webkit-transition: color .3s ease;
	transition: color .3s ease;
}

#imagelightbox-close:hover,
#imagelightbox-close:focus { background-color: #000; }

#imagelightbox-close:before,
#imagelightbox-close:after {
	width: 2px;
	background-color: #fff;
	content: '';
	position: absolute;
	top: 20%;
	bottom: 20%;
	left: 50%;
	margin-left: -1px;
}

#imagelightbox-close:before {
	-webkit-transform: rotate( 45deg );
	-ms-transform: rotate( 45deg );
	transform: rotate( 45deg );
}

#imagelightbox-close:after {
	-webkit-transform: rotate( -45deg );
	-ms-transform: rotate( -45deg );
	transform: rotate( -45deg );
}

/* ARROWS */
.imagelightbox-arrow {
	width: 2.5em;
	height: 2.5em;
	background-color: #28724f;
	vertical-align: middle;
	display: none;
	position: fixed;
	z-index: 10001;
	top: 50%;
	margin-top: -1.25em;
	border:none;
	background-repeat:no-repeat; 
	background-size:cover;
}

.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus { background-color: #000; }
.imagelightbox-arrow:active { background-color: #000; }

.imagelightbox-arrow-left { left: 2.5em; background-image:url(../files/menu-bottom-left.png); }
.imagelightbox-arrow-right { right: 2.5em; background-image:url(../files/menu-bottom-right.png); }

/*#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow
{
-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}*/

@-webkit-keyframes fade-in {
	from	{ opacity: 0; }
	to		{ opacity: 1; }
}

@keyframes fade-in {
	from	{ opacity: 0; }
	to		{ opacity: 1; }
}

@media only screen and (max-width: 41.250em) /* 660 */ {
	#imagelightbox-close { top: 1.25em; right: 1.25em; }
	#imagelightbox-nav { bottom: 1.25em; }
	.imagelightbox-arrow { width: 2.5em; height: 2.5em; margin-top: -1.25em; }
	.imagelightbox-arrow-left { left: 1.25em; }
	.imagelightbox-arrow-right { right: 1.25em; }
}

@media only screen and (max-width: 20em) {
	.imagelightbox-arrow-left { left: 0; }
	.imagelightbox-arrow-right { right: 0; }
}



.color-spritzwerk { background-color: #28724f !important; }
.color-spritzwerk { background-color: #cc0000 !important; }
.color-strahlwerk { background-color: #99cc00 !important; }
.color-gipserwerk { background-color: #0066cc !important; }
.color-geschichte { background-color: #ff9900 !important; }



/* ### FOOTER ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
footer { margin-top:15px; padding-bottom:75px; }
footer,
footer address,
footer a,
footer a:link,
footer a:active,
footer a:visited { color:#28724f; text-decoration:none; }
footer a:hover { color:#000; }
.address-block { display:inline-block; width:58px; }

.footer-righttop { padding-top:15px; text-align:left; }
.footer-leftbottom { padding-top:20px; text-align:left; }

@media (min-width: 480px) {	
	footer { margin-top:25px; }
	.footer-righttop { text-align:center; }
	.footer-leftbottom { text-align:center; }
}

@media (min-width: 768px) {	
	footer { margin-top:35px; }
	.footer-righttop { border-left:2px solid #28724f; padding-top:5px; padding-bottom:5px; text-align:left; }
	.footer-leftbottom { text-align:right; padding-top:5px; } 
}

.btn-trockeneis {
	position: absolute;
	width: 75px;
	height: 75px;
	top: 53px;
	right: 4px;
	z-index: 99;
}

@media (min-width: 355px) {
  .btn-trockeneis {
	  top: 56px;
  }
}

@media (min-width: 480px) {
  .btn-trockeneis {
	  top: 56px;
  }
}

@media (min-width: 576px) {
  .btn-trockeneis {
	  top: 75px;
	  width: 100px;
	  height: 100px;
  }
}

@media (min-width: 768px) {
  .btn-trockeneis {
	  top: 25px;
	  width: 115px;
	  height: 115px;
	  right: calc((100% - 750px) / 2);
  }
}
@media (min-width: 992px) {
  .btn-trockeneis {
	  width: 125px;
	  height: 125px;
	  right: calc((100% - 970px) / 2);
  }
}
@media (min-width: 1200px) {
  .btn-trockeneis {
	  width: 150px;
	  height: 150px;
	  right: calc((100% - 1170px) / 2);
  }
}

/*@media(min-width:768px) {
	footer { text-align:inherit; }
}*/

/* ### ### ### ### YOUTUBE ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */ 
.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-col { margin-top: 15px; margin-bottom: 25px; }
@media (min-width: 768px) {
	.youtube-col { margin-top: 50px; margin-bottom: 25px }
}

.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-success {
	color: #ffffff !important;
	background-color: #28724f;
	border-color: #28724f;
	text-decoration: none !important;
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
}
.btn-success:focus,
.btn-success.focus,
.btn-success:hover {
	color: #28724f !important;
	background-color: #fff;
	border-color: #28724f;
}