/*@font-face
  see https://developer.mozilla.org/en/CSS/@font-face
  generator http://www.fontsquirrel.com/fontface/generator

@font-face {
	font-family: CenturyGothic;
	src: url("../fonts/CENTURYG.TTF");
}
*/


/* -------------- Next styles mobile */


/* Global
 * -------------- */

html,body {
	background: rgba(239, 239, 239, 1.0);
	/*font-family: CenturyGothic, Arial, Helvetica, sans-serif;*/
	font-family:Verdana;
	font-size: 15px;
	color: #373737;
}

body {
	overflow:hidden;
}

a,
a:link, a:visited, a:hover, a:focus {
	color: #373737;
	text-decoration: none;
	outline: 0;
}

a img, img{
    border: 0px;
}


/* Main
 * -------------- */

/* @todo: study: http://stackoverflow.com/questions/22719315/vertical-align-glyphicon-in-bootstrap-3 */
#loader {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 30000;
	overflow:hidden;
}

.debug {
	opacity:1 !important;
	display:block !important;	
}

.centered {
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 0;
	top: 50%;
	text-align: center;
	font-size: 30px;
}

.zero {
	padding:0 !important;
	margin:0 !important;
}
/*
    Original version: http://www.bootply.com/128062
    This version adds support for IE 10+ and Firefox.
    http://www.w3schools.com/cssref/css3_pr_animation.asp
    
    http://preloaders.net/en/circular
    see /view/loader.php
*/

#loaderImage.dynamic {
	left: 50%;
	position: absolute;
	margin-left: -16px; /* half of width */
}

#loaderImage.static{

}

/* animated glyphicon not work centered
icons sind nicht zentriert , wabbern */
.glyphicon-spin {
	animation: spin .9s infinite linear;
	-webkit-animation: spinw .9s infinite linear;
	-moz-animation: spinm .9s infinite linear;
}

@keyframes spin {
	from { transform:scale(1)rotate(0deg);}
	to {transform: scale(1) rotate(360deg);}
}

@-webkit-keyframes spinw {
	from { -webkit-transform:rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes spinm {
	from { -moz-transform:rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}
/* ------------------------------------------------ */
#navi_toggler {
	position: fixed;
	z-index: 1031;
	top: 30px;
	left:30px;
	width: 19px;
	height: 15px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	background: transparent url(../images/menueButtonSprite.png) no-repeat left top;
}

#navi_toggler:hover {
	background-position: right top !important
}

#navi_toggler.rotated {
	background-position: right top !important
}

#header {
	position: fixed;
	z-index: 999;
	background: rgba(239, 239, 239, .8);
	height: 70px;
	opacity: 0;
	left:0;
	right:0;
	/* padding-top:10px;*/
	/*
	 45+15 = abstand zum toggler
	 bevor <=768 .img-responsive
	 protect overlap
	*/
	padding-left:60px;
	/*scrollbar*/
	padding-right:45px;
	margin-right:15px;
}

#header p {
	padding:0;
	margin:0;
}

#header a {
    height: 100%;
    display:block;
    background-image:url(../images/Schriftzug.png) !important;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:423px 51px
}

#header a img{
	max-width: 230px;
	height: auto;
}

/* base.php Y schriftzug */
.ypos {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-43%);
	-ms-transform: translateY(-43%);
	-moz-transform: translateY(-43%);
	-o-transform: translateY(-43%);
	transform: translateY(-43%);
}

#content {
	padding: 0px 30px 30px 30px;
	opacity: 0;
	filter: alpha(opacity=0);
	position:absolute;
	z-index: 0;
	/* overflow: hidden; */
	width:100%;
	height:100%;
}

.phone #content.Controller_Index {
	overflow: hidden;
	position:fixed;
}

.computer #content.Controller_Index {
	overflow: auto;
	position:fixed;
}



/*
beware
script.js
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
*/
#content.Controller_Gallery {
	/* overflow-x: hidden;	*/
}

.content-inner {
	height: 100%;
	width:auto;
}

#content.Controller_Gallery .content-inner {
	padding-top:20px;
}

#content.Controller_Index .content-inner {
	padding-top:70px;
}

/* see several classes .disabled  > http://getbootstrap.com/css/#forms-control-disabled */
.disabled {
	height: 0 !important;
	width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	visibility: hidden !important;
	opacity: 0 !important;
	border: 0 !important;
	background: none !important;
	display:none;
}

/* Navigation
 * -------------- */
.navbar {
	width: 345px;
	height: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 1;
	margin-bottom:0;
	left:0;
	padding:70px 0 0;
}

.navbar-default {
	border-color: transparent;
	background: rgba(239, 239, 239, .8);
	border:none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
}

.navbar-header {
	margin-bottom: 0px;
}

.container-fluid {
	padding:0;
	height: 100%;
}

#menu-bar {
	padding-top:15px;
	height:100%;
}

#menu-bar .panel {
	margin-bottom: 0;
	border: none;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	background: none;
}

#menu-bar ul {
	padding: 0;
	margin: 0;
	background: none;
}

#menu-bar li {
	text-transform: uppercase;
	text-align: left;
	list-style: none;
	float: none;
	margin: 0;
	padding:0 25px 0 50px;
}

#menu-bar li.noliner a {
	border:none;
}

#menu-bar li a {
	margin: 0;
	padding:10px 0 10px 0;
	background: none;
	border-bottom:1px solid #373737;
}

#menu-bar li ul,
#menu-bar li ul li,
#menu-bar li ul li a {
	border:none;
	background: none;
	padding:0;
	margin:0;
	list-style: none;
}

#menu-bar li ul li{
	padding:10px 0 10px 20px;
	text-transform: none;
}

/* https://css-tricks.com/snippets/html/glyphs/ */
#menu-bar li ul li:before {
	content: "\203A";
}

#menu-bar li a {

}

#menu-bar li a.active {
	background: none;
	text-shadow:0.1px 0px 0px #000
}

#menu-bar li.nodisplay {
	display: none;
}

#navbar #socials {
	border:0px solid red;
	padding-top: 40px;
	padding-bottom: 40px;
}

#navbar #socials.social-fix-bottom {
	position:fixed;
	bottom:40px;
	padding-top:0;
	padding-bottom:0;
}

#navbar #socials a{
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right:5px;
	border:none;
}

#navbar #socials a.facebook {
	background: url(../images/SMFacebookButtonSprite.png);
}

#navbar #socials a.facebook:hover {
	background-position: -25px 0px;
}

#navbar #socials a.linkin {
	background: url(../images/SMLinkedInButtonSprite.png);
}

#navbar #socials a.linkin:hover {
	background-position: -25px 0px;
}

#navbar #socials a.mailer {
	background: url(../images/SMMailButtonSprite.png);
}

#navbar #socials a.mailer:hover {
	background-position: -25px 0px;
}


/* Carousel
 * -------------- */
.carousel {
	height: 100%;
}

.carousel-inner {
	text-align: center;
	width: 100%;
	height: 100%;
}

.carousel-inner .item {
	text-align: center;
	height: 100%;
}

img.fixed-size {
	max-width:none !important;
}

.width100p {
	width: 100% !important;
	height: auto !important;
}

.height100p {
	width: auto !important;
	height: 100% !important;
}

.carousel-indicators li {
	float: none;
	border:1px solid #efefef;
	width: 15px;
	height: 15px;
	border-radius: 15px;
}

.carousel-indicators li.active {
	background-color: #efefef;
	width: 17px;
	height: 17px;
}

.carousel-caption {
	border:0px solid red;
	padding:0;
	text-shadow:none;
}

.carousel-caption span,
.carousel-caption h3
{
	text-transform:uppercase;
}

.carousel-caption h3 {
	font-size: 23px;
	font-weight:600;
	margin:0;
}

.tablet .carousel-caption h3 {
	font-size: 23px;
	font-weight:600;
	margin:0;
}

.carousel-caption span {
	font-size: 15px;
}

.carousel-caption,
.carousel-caption a,
.carousel-caption a:hover,
.carousel-caption.weiss,
.carousel-caption.weiss a,
.carousel-caption.weiss a:hover {
	color: #FFFFFF;
	/*text-shadow: 0 1px 2px rgba(0,0,0,.6);*/
}

.carousel-caption.grau,
.carousel-caption.grau a,
.carousel-caption.grau a:hover {
	color: #373737;
	/*text-shadow: 0 1px 2px rgba(255,255,255,.6);*/
}


/* https://www.bc.edu/schools/gssw/gssw-resources/web-publishing-guide/editing-and-creating-pages/gssw-home-bootstrap-reference.html */
.carousel-caption.middle-center {
	padding-top:5px;
	padding-bottom:5px;
	bottom: 50%;
	text-align: center;
	left:50%;
	right:auto;
	border:0px solid red;
	border-color: transparent;
}

.carousel-caption.middle-center.phone {
	background: rgba(239, 239, 239, .6);
}

.carousel-caption.middle-center.phone  * {
	color: #373737 !important;
	/*text-shadow: 0 1px 2px rgba(255,255,255,.6) !important;*/
}

.carousel-caption.top-center {
	top: 0;
	bottom: auto;
	padding-top: 70px;
	text-align: left;
	left:50%;
	right:auto;
}

.carousel-caption.top-left {
	top: 0;
	bottom: auto;
	float: left;
	left: 8%;
	padding-top: 70px;
	right: auto;
	text-align: left;
}

.carousel-caption.top-right {
	top:0;
	bottom: auto;
	float: right;
	left: auto;
	padding-top: 70px;
	right: 8%;
	text-align: left;
}

.carousel-caption.bottom-center {
	padding-bottom:70px;
	text-align: left;
	left:50%;
	right:auto;
}

.carousel-caption.bottom-left {
	padding-bottom:70px;
	bottom: 30px;
	float: left;
	left: 8%;
	right: auto;
	text-align: left;
}

.carousel-caption.bottom-right {
	padding-bottom:70px;
	bottom: 30px;
	float: right;
	left: auto;
	right: 8%;
	text-align: left;
}


/* Gallery
 * -------------- */
.gallerie-inner {
	text-align: left;
}

.gallerie-inner p.item {
	margin:0;
	width:50%;
}

/*
http://stackoverflow.com/questions/10565587/css-transition-opacity-on-mouse-out
http://www.w3schools.com/css/css3_transitions.asp
*/
.gallerie-inner p img{
	width: 100%;
	height: auto;
	/*zoom: 1;*/
	filter: alpha(opacity=100);
	opacity: 1;
}

.gallerie-inner p img:hover{
	filter: alpha(opacity=60);
	opacity: 0.6;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

.gallerie-inner {
	width: 100%;
	height: auto;
	margin-top: 50px;
}

#gallerie {
	width: auto;
	height:100%;
}


/* Fullscreen
 * -------------- */
 
#fullscreen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background: #fff;
    overflow: hidden;
	position: relative;
	background: transparent;
}

.fullscreen-inner {
	padding: 0;
	height: 100%;
    padding: 0;
}

.fullscreen-inner p.image {
	border: 0px solid red;
	cursor:pointer;
    height: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    overflow: hidden;
}

.fullscreen-inner span.pdf-selection{
    display: block;
    width: 200px;
    text-align: left;
}
	
p.navi.close.cloner { /*
		clone closer new element position
		script.js
		$('body').append(closer)
	*/
	top: 30px;
	right: 28px;
	z-index: 3000;
}

p.navi {
	margin: 0px;
	display: block;
	position: absolute;
	width: 35px;
	height: 35px;
	overflow: hidden;
	top: 50%;
	text-indent: -2000px;
}

p.navi.next {
	right: 70px;
	opacity:0;
	filter: alpha(opacity=0);
}

p.navi.prev {
	left: 70px;
	opacity:0;
	filter: alpha(opacity=0);
}

p.navi.close {
	width: 15px;
	height: 15px;
	right: 70px;
	top: 80px;
}

p.navi a {
	display: block;
	width: 35px;
	height: 35px;
}

p.navi.close a {
	background: url(../images/galerieButtonXSprite.png);
}

p.navi.close a:hover {
	background: url(../images/galerieButtonXSprite.png);
	background-position: -15px 0px;
}

p.navi.prev a {
	background: url(../images/galerieButtonPfeillinks.png);
}

p.navi.next a {
	background: url(../images/galerieButtonPfeilrechts.png);
}

.trans_show {
	filter: alpha(opacity=100) !important;
	opacity: 1 !important;
}



/* Photoswipe
 * -------------- */
.pswp__bg, .pswp__top-bar {
	background: rgba(239, 239, 239, 1.0);
}

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right {
  visibility: visible;
}

.pswp__button {
	opacity:1;	
}


.pswp__button--arrow--left,
.pswp__button--arrow--right,
.closer {
	top:14px;
	z-Index:999;
}

.pswp__button--arrow--left {
	left:20px;
}

.pswp__button--arrow--right {
	right:25px;
}

.pswp__button--arrow--left,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right,
.pswp__button--arrow--right:before,
.closer {
	margin: 0;
	padding:0;
	height: 20px;
	width:auto;
	background: none !important;
}

.pswp__button--arrow--right:before {
	content: 'NEXT';
	top:0;
}

.pswp__button--arrow--left:before {
	content: 'PREV';
	top:0;
}

.closer {
	position:absolute;
	z-Index:998;
	text-align:center;
	left:0;
	right:0;
}

.pswp__ui--hidden .closer {
	opacity:0;
}

.pswp__img--placeholder--blank {
	background:none;	
}

.pswp__top-bar {
	top:50%;
	background:none;
}
.pswp__preloader,
.pswp__preloader--active
 {
	display:block;
	position:absolute;
	top:50%;
	left:50%;
}
.pswp--css_animation .pswp__preloader__donut {
	border:2px solid #333;
}

/* Pages
 * -------------- */

#text-content {
	width: 100%;
	color:#333;
}

#text-content h1,
#text-content p {
	font-size:15px;
	color:#333;
}

#text-content p {
	margin:0;
	padding:0;
}

#text-content h1 {
	font-weight:600;
	padding:0;
	margin:0;
	margin-bottom:24px;
}

#text-content img {
	width:100% !important;
	height:auto !important;
}
	
#text-content .oembed-provider-vimeo iframe {
	width:100% !important;
	height:auto !important;	
}


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/


/*
Phones (<768px)
Extra small devices (phones, less than 768px)
No media query since this is the default in Bootstrap

http://getbootstrap.com/css/#grid-media-queries
*/

.phone .pswp__button--arrow--left,
.phone .pswp__button--arrow--left:before,
.phone .pswp__button--arrow--right,
.phone .pswp__button--arrow--right:before,
.phone .closer {
	height: 30px;
	width:auto;
	content:'';
}

.phone .closer a {
	background-color: transparent !important;
	background-image:  url(../images/closer.png) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 13px 13px !important;
	height: 30px;
	width:25px;
	display:inline-block;	
}

.phone .pswp__button--arrow--left:before {
	background-color: transparent !important;
	background-image:  url(../images/previous.png) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 9px 15px !important;
	width:17px;
	height:30px;
}

.phone .pswp__button--arrow--right:before {
	background-color: transparent !important;
	background-image:  url(../images/next.png) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 9px 15px !important;
	width:17px;
	height:30px;
}

.tablet .pswp__button--arrow--left,
.tablet .pswp__button--arrow--left:before,
.tablet .pswp__button--arrow--right,
.tablet .pswp__button--arrow--right:before,
.tablet .closer {
	height: 30px;
	width:auto;
	content:'';
}

.tablet .closer a {
	background-color: transparent !important;
	background-image:  url(../images/closer.png) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 13px 13px !important;
	height: 30px;
	width:25px;
	display:inline-block;	
}

.tablet .pswp__button--arrow--left:before {
	background-color: transparent !important;
	background-image:  url(../images/previous.png) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 9px 15px !important;
	width:17px;
	height:30px;
}

.tablet .pswp__button--arrow--right:before {
	background-color: transparent !important;
	background-image:  url(../images/next.png) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 9px 15px !important;
	width:17px;
	height:30px;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Retina-specific stuff here */
	
	#header > a {
		background-image:url(../images/Schriftzug@2x.png) !important;
	}

	.phone #header a {
		background-image:url(../images/Schriftzug@2x.png) !important;
		background-size:235px;
		background-position:20px 23px;
	}
	
	.phone .closer a {
		background-image:  url(../images/closer@2x.png) !important;
	}
	
	.phone .pswp__button--arrow--left:before {
		background-image:  url(../images/previous@2x.png) !important;
	}
	
	.phone .pswp__button--arrow--right:before {
		background-image:  url(../images/next@2x.png) !important;
	}

	.tablet .closer a {
		background-image:  url(../images/closer@2x.png) !important;
	}
	
	.tablet .pswp__button--arrow--left:before {
		background-image:  url(../images/previous@2x.png) !important;
	}
	
	.tablet .pswp__button--arrow--right:before {
		background-image:  url(../images/next@2x.png) !important;
	}
}

/*
(≥768px)
Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

	#header a img{
		max-width: 100%;
		height: auto;
	}	
	
	/* base.php Y schriftzug */
	.ypos {
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.navbar-default {
		position:fixed;
		overflow-y:auto;
	}

	.navbar-fixed-top {
		
	}

	#menu-bar li a:hover,
	#menu-bar li a.active {
		background: none;
		text-shadow:0.1px 0px 0px #000
	}

	.computer #content {
		padding: 70px 30px 30px 30px;
	}
	
	.computer .content-inner {
		padding-top:0 !important;
	}
	
	.carousel-caption.middle-center{
		padding-bottom:0px;
		bottom: 50%;
		text-align: left;
		left:50%;
		right:auto;	
	}	
	
	.carousel-caption h3 {
		font-size: 50px;
		font-weight:600;
	}

	.carousel-caption span {
		font-size: 15px;
	}
	
	.computer #content.Controller_Gallery,
	#content.Controller_Index {
		overflow-y: auto;
	}

	.computer #gallerie {
		position: relative;
		z-index: 1;
		left: inherit;
		top: inherit;
		bottom: inherit;
		width: 100%;
		height: auto;
		background: none;
		overflow: auto;
		margin-top: inherit;
	}

	.computer .gallerie-inner {
	  width: 100%;
	  margin: 0;
	  /* https://css-tricks.com/equidistant-objects-with-css/ */
	  text-align: justify;
	}

	.computer .gallerie-inner:after {
	  content: '';
	  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
	  display: inline-block;
	}
	
	.computer .gallerie-inner p.item {
		width:auto;
		display: inline-block;
		line-height: normal;
		margin:0 0 30px 0;
		vertical-align: top;
	}

	.computer .gallerie-inner p img {
		/*height: 220px;
		width: auto;*/
		height:100%;
		filter: none;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
	}
	
	.computer .fullscreen-inner {
		padding: 0;
		height: 100%;
	    /*padding: 60px 20px 20px 20px;*/
	}
	
	#text-content {
		width: 600px;
		left:50%;
		margin-left:-300px;
		position:absolute;
		border:0px solid red;
	}
	
	#text-content table td{
		vertical-align:top;
		padding-bottom:5px;
	}
	
	#text-content img {
		width:600px !important;
		height:auto !important;
	}
	
	#text-content .oembed-provider-vimeo iframe {
		width:600px !important;
		height:400px !important;	
	}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

@media screen and (orientation:portrait) {
	
	.carousel-caption.middle-center.phone {
		width:94%;
	}	
	
}

@media screen and (orientation:landscape) {
	
	.carousel-caption.middle-center.phone {
		width:50%;
	}	
	
	#navbar #socials.social-fix-bottom.phone {
		position:relative;
		bottom:0;
		padding-top:40px;
		padding-bottom:40px;
	}
	
}