/* Das Layout - Angaben die Bootstrap überschreiben! */
/* Eigene CSS-Deklarationen */

body {
  font-family: open_sansregular, Helvetica, Arial, sans-serif;
  color: #333333 !important;
  background-color: #9dd2cd !important;
}
body.ComixContent {
  overflow:scroll;
}
.intern {
  background-color: #333;
  color: #fff;
  padding:6px 12px;
}
.intern span a {
  color: #fff;
  margin-left:50px;
  display: inline-block;
  text-decoration:underline;
}

/* Header */
.navbar-brand {
  display: flex;
}
.isleten-logo {
  width: 50px;
  margin-top: -12px;
}
.navbar-brand {
  color: #fff!important;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 0.6em;
}
nav.navbar {
  background-color: #457ccd;
  color: #fff!important;
}
.navbar-default .navbar-nav > li > a {
  color: #fff!important;
  font-size: 1.2em;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #ffee00!important;
  font-size: 1.2em;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
  display: block;
}
/* Nav Material ausblenden */
/*.Material {
  display: none !important;
}*/
/* iframe Pano */
.panocontainer {
  padding-top:0px!important;
}
iframe.pano {
  aspect-ratio: 13/9;
  width:100%;
}

.infostart-d {
  position: relative;
  top: 82px;
  width: 100%;
  display: block;
}
.infostart-e {
  position: relative;
  top: 92px;
  width: 100%;
  display: block;
}
.infostart-d span, .infostart-e span {
  width: 200px;
  display: block;
  text-align: center;
  padding: 8px 16px;
  opacity: 0.8;
  background-color: #fff;
  color: #000 !important;
  font: 18px bold Arial,sans-serif;
  font-weight: normal;
  text-decoration: none;
  font-weight: bold;
  margin: auto;
  border-radius: 10px;
}
.infostart span:hover{
  opacity:1;
  background-color:#000;
  color:#fff!important;
}
.infopanel {
  display: flex;
  justify-content: space-between;
  background-color: #457CCD;
  padding: 5px 6px 0px 6px;
  margin-top: -6px;
}
.infopanel svg {
  fill:#fff;
}
.infopanel svg:hover {
  fill:#6ff;
}
p.hoch {
    font-size:0.8em;
    line-height:0.8em;
}
a.zumform {
    font-size: 2em;
  color: red;
  font-weight: bold;
  text-align: right;
  padding: 2px 8px;
  margin-left: ;
  margin: auto;
  width: 96%;
  display: inline-block;
  background-color: #457CCD;
}
#carouselfumetto {
  max-width: 400px;
  margin: auto;
}
/* Footer */
.right > p > a > img {
width:30px;
height:auto;
}
.right > p > a > img:hover {
opacity:0.5;
}

/* WYSIWYG EDITOR ALIGNMENT CLASSES
-------------------------------------------- */
.left {
text-align: left
}
.center {
text-align: center
}
.right {
text-align: right
}

a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}

.container a {
  color: #1d5bb8;
}
.container a:hover {
  color: #900;
}
.LiteraturPage a, .PersonenPage a {
	color:#333;
}
.LiteraturPage a:hover, .PersonenPage a:hover {
	color:#1d5bb8;
}

/* IMAGES
-------------------------------------------- */
img {
height: auto; /* resets the image height so that it maintains its aspect ratio when width is set */
/*background: transparent url(../images/ajax-loader.gif) no-repeat center center;*/
}
img.left {
float: left;
max-width: 50%;
margin: 5px 20px 10px 0;
width:auto;
}
img.right {
float: right;
max-width: 50%; /* Responsive width */
margin: 5px 0 10px 20px;
}
img.leftAlone {
float: left;
width:auto;
max-width:100%;
margin-right: 100%;
margin-bottom: 10px;
clear: both;
}
img.center {
float: none;
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 10px;
clear: both;
}
.footer img {
width:auto;
}
hr {
width: 100%;
}
/* Gallery */
.carousel-control {
  font-size: 39px;
  color: #fff;
  text-align: center;
  text-shadow: 2px 4px 6px rgba(0,0,0,.8);
}
.glyphicon {
  position: relative;
  top: calc(50% - 20px);
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
}

/* Responsiv Video */
.responsive-video {
	position: relative;
	padding-bottom: 56%; /* 16/9 Video */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

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

/* Bildwechsler CodeSnippet *********************/
div.imagecontainer {
width:174px;
min-height:200px;
display:inline-block;
margin:0 8px 8px 0;
}
div.imagecontainer img {
position:absolute;
width:auto;
height:auto;
cursor:pointer;
}
div.imagecontainer:hover img.hund {
display:none;
}
div.pfeil {
background: rgba(255,255,255,0.4);
position: relative;
color: #333;
padding: 2px 6px;
margin-top: -3px;
pointer-events: none !important;
text-align: center;
}
.carousel-control.right, .carousel-control.left {
background:none;
}
.embed-container {
position: relative;
padding-bottom: 98%; /* ratio 16x9 */
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.sharecontent {
  margin-top:25px;
}
div.sharecontent:hover {
  cursor:pointer;
}
#sharehome, .shareit {
  position: relative;
  top: -20px;
  left: 74px;
}
#sharehome span .shareit span {
  margin-right:10px;
}
.sharelink svg {
  max-width: 23px;
}
.bildlegende {
  text-align: center;
}
.carousel-indicators {
  position: absolute;
  bottom: -30px;
}

/* Form */
input, textarea {
  width: 100%;
}
label {
  margin: 5px 0 0 0;
}
input.checkbox {
  width: 56px;
  margin-top: 9px;
}
#Form_ContactForm_Adresse_Holder, #Form_ContactForm_Anrede_Holder {
  display: none;
}
footer {
  background-color: #457ccd;
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
padding-bottom: 75%;
}
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	.dropdown-menu {
		display:block;
	  position: static;
	  float: none;
	}
	div.PersonenPage img, div.LiteraturPage img {
		max-width:250px;
	}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}