.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
:focus {
  outline: 0 !important;
}
a {
  outline: none !important;
}
body, html {
  padding: 0;
  /*height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
    */
}

/* Style sheet main */

body {
  font: 12pt/16pt 'Roboto', Arial, sans-serif;
  color: #695f5f;
  font-weight: 300
}
.youtubebild {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  margin-bottom: 25px;

}



h1, h2 {
  font: 22pt 'Dosis', Arial, sans-serif;
  font-weight: normal;
  color: #000;
  text-transform: uppercase
}
.mapfullscreen_toggler {
  display: none;
  display: none !important
}
#maptype {
  display: none
}

.leaflet-control-container {
  display: none;
}
.hidemobile {
  display: none;
}
.no-touchevents .hidemobile {
  display: inherit;
}
#Slider {
  bottom: 60px;
  height: 120px;
  position: absolute;
  width: 660px;
  z-index: 2147483647;
  left: 50%;
  margin-left: -350px;
}
#Slider .slick-slide {
  height: 124px;
  width: 200px !important;
  margin-left: 10px;
  margin-right: 10px;
}
#Slider span {
  border: 5px solid #fff !important;
  border-collapse: collapse;
  border: 1px solid #888;
  /*-webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.4);*/
}
#Slider .wrapper {
  width: 200px;
  height: 22px;
  float: none;
  margin: -42px 0 0 5px;
  text-align: center;
  position: absolute;
  bottom: 0px;
}
#Slider p {
  margin-top: -30px;
  margin-left: 0;
  padding: 15px 15px 3px;
  text-align: center;
  font-family: Dosis;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  width: 190px;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: break-all !important;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(71%, rgba(0, 0, 0, 0.85)), color-stop(100%, rgba(0, 0, 0, 0.85)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000', GradientType=0);
}

.slick-prev, .slick-next
{
  display: none !important;
}


@media screen and (max-width: 768px)
{
  #Slider { display: none; }
}


#footer ul {
  width: 100px;
  top: 50%;
  position: absolute;
  left: -15px;
  margin-top: -170px;
}
#footer li {
  width: 40px;
  height: 65px;
  float: left;
  display: block;
  margin-right: 30px;
  margin-left: 30px;
  cursor: pointer;
  background-size: 160px 40px;
  font-size: 12px;
  line-height: 15px;
  padding-top: 40px !important;
  color: rgba(255, 255, 255, 0.6);
}
.no-touchevents #footer li:hover {
  color: rgba(255, 255, 255, 1.0);
}
#footer .video {
  background-image: url("../images/video_sprite.png");
  background-position: left top;
  background-repeat: no-repeat;
  text-align: center;
  font-family: Dosis;
  text-transform: uppercase;
  padding-top: 35px;
}
.no-touchevents #footer .video:hover {
  background-position: -40px 0px
}
#footer .video.active {
  background-position: -80px 0px
}

/*#footer .video.active:hover{background-position: -120px 0px}*/

#footer .info {
  background-image: url("../images/info_sprite.png");
  background-position: left top;
  background-repeat: no-repeat;
  text-align: center;
  font-family: Dosis;
  text-transform: uppercase;
  padding-top: 35px;
}
.no-touchevents #footer .info:hover {
  background-position: -40px 0px
}
#footer .info.active {
  background-position: -80px 0px
}

/*#footer .info.active:hover{background-position: -120px 0px}*/

#footer .weather {
  background-image: url("../images/weather_sprite.png");
  background-position: left top;
  background-repeat: no-repeat;
  text-align: center;
  font-family: Dosis;
  text-transform: uppercase;
  padding-top: 35px;
}
.no-touchevents #footer .weather:hover {
  background-position: -40px 0px
}
#footer .weather.active {
  background-position: -80px 0px
}

/*#footer .weather.active:hover{background-position: -120px 0px}*/

#footer .medialinks {
  background-image: url("../images/media_sprite.png");
  background-position: left top;
  background-repeat: no-repeat;
  text-align: center;
  font-family: Dosis;
  text-transform: uppercase;
  padding-top: 35px;
}
.no-touchevents #footer .medialinks:hover {
  background-position: -40px 0px
}
#footer .medialinks.active {
  background-position: -80px 0px
}

/*#footer .medialinks.active:hover{background-position: -120px 0px}*/

#footer .social {
  background-image: url("../images/social_sprite.png");
  background-position: left top;
  background-repeat: no-repeat;
  text-align: center;
  font-family: Dosis;
  text-transform: uppercase;
  padding-top: 35px;
}
.no-touchevents #footer .social:hover {
  background-position: -40px 0px
}
#footer .social.active {
  background-position: -80px 0px
}

/*#footer .social.active:hover{background-position: -120px 0px}*/

#social_social a {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -3000px;
  margin-right: 10px;
}
#social_Facebook {
  background: url('../images/SocialIcons_Facebook.svg');
}
#social_GooglePlus {
  background: url('../images/SocialIcons_GooglePlus.svg');
}
#social_Twitter {
  background: url('../images/SocialIcons_Twitter.svg');
}
#social_Pinterest {
  background: url('../images/SocialIcons_Pinterest.svg');
}
#social_Tumbler {
  background: url('../images/SocialIcons_tumbler.svg');
}
.no-touchevents #social_Facebook:hover {
  background: url('../images/SocialIcons_FacebookHL.svg');
}
.no-touchevents #social_GooglePlus:hover {
  background: url('../images/SocialIcons_GooglePlusHL.svg');
}
.no-touchevents #social_Twitter:hover {
  background: url('../images/SocialIcons_TwitterHL.svg');
}
.no-touchevents #social_Pinterest:hover {
  background: url('../images/SocialIcons_PinterestHL.svg');
}
.no-touchevents #social_Tumbler:hover {
  background: url('../images/SocialIcons_tumblerHL.svg');
}
.fix {
  position: fixed;
  /* top: 0px; */
  width: auto;
  background: #fff;
  z-index: 1000000000000000;
  width: 797px;
}

/* Style sheet wetter */

@font-face {
  font-family: 'weather';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix") format('embedded-opentype'), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff") format('woff'), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf") format('truetype'), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg") format('svg');
  font-weight: normal;
  font-style: normal
}
/* #wetter i {
  width: 165px;
  display: inline-block;
  font: 125pt/1.0 weathericons;
  font-weight: normal;
  color: #000;
  font-style: normal
}*/
#wetter h2 {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid #fff;
  font: 14pt Roboto;
  color: #000
}

/*.prognose{width:100%;position:absolute}*/

.ptag {
  width: 25%;
  float: left;
  text-align: center
}
#wetter .ptag i {
  font-size: 100pt
}
.icon-0:before {
  content: ":"
}
.icon-1:before {
  content: "p"
}
.icon-2:before {
  content: "S"
}
.icon-3:before {
  content: "Q"
}
.icon-4:before {
  content: "S"
}
.icon-5:before {
  content: "W"
}
.icon-6:before {
  content: "W"
}
.icon-7:before {
  content: "W"
}
.icon-8:before {
  content: "W"
}
.icon-9:before {
  content: "I"
}
.icon-10:before {
  content: "W"
}
.icon-11:before {
  content: "I"
}
.icon-12:before {
  content: "I"
}
.icon-13:before {
  content: "I"
}
.icon-14:before {
  content: "I"
}
.icon-15:before {
  content: "W"
}
.icon-16:before {
  content: "I"
}
.icon-17:before {
  content: "W"
}
.icon-18:before {
  content: "U"
}
.icon-19:before {
  content: "Z"
}
.icon-20:before {
  content: "Z"
}
.icon-21:before {
  content: "Z"
}
.icon-22:before {
  content: "Z"
}
.icon-23:before {
  content: "Z"
}
.icon-24:before {
  content: "E"
}
.icon-25:before {
  content: "E"
}
.icon-26:before {
  content: "3"
}
.icon-27:before {
  content: "a"
}
.icon-28:before {
  content: "A"
}
.icon-29:before {
  content: "a"
}
.icon-30:before {
  content: "A"
}
.icon-31:before {
  content: "6"
}
.icon-32:before {
  content: "1"
}
.icon-33:before {
  content: "6"
}
.icon-34:before {
  content: "1"
}
.icon-35:before {
  content: "W"
}
.icon-36:before {
  content: "1"
}
.icon-37:before {
  content: "S"
}
.icon-38:before {
  content: "S"
}
.icon-39:before {
  content: "S"
}
.icon-40:before {
  content: "M"
}
.icon-41:before {
  content: "W"
}
.icon-42:before {
  content: "I"
}
.icon-43:before {
  content: "W"
}
.icon-44:before {
  content: "a"
}
.icon-45:before {
  content: "S"
}
.icon-46:before {
  content: "U"
}
.icon-47:before {
  content: "S"
}
#wetter h3 {
  margin: 0 0 8px;
  text-align: center;
  font: 60px Dosis;
  color: #000;
  font-weight: 300;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15)
}
.ptag h4 {
  font: 20pt Dosis;
  color: #000;
  font-weight: 300
}
.ptag h4 span {
  font: 12pt Dosis;
  color: #000;
  font-weight: 500
}
#wetter ul {
  margin: 0;
  padding: 0
}
#wetter li {
  display: inline-block;
  padding: 20px;
  border-radius: 5px;
  /*behavior: url("assets/css3pie/1.0.0/PIE.htc");*/
  background: #fff;
  background: rgba(255, 255, 255, 0.90)
}
#wetter .currently {
  margin: 0 20px
}
#wetter article {
  /*background: none*/
}
#wetter h5 {
  width: 100px;
  float: left;
  clear: both;
  font-family: Dosis;
  text-transform: uppercase;
}
#wetter .prognose .weathercontent {
  float: left;
}
#wetter .prognose i {
  font-size: 60px !important;
}
#wetter .prognose {
  margin-bottom: 30px;
  height: 100px;
}
.weathercontent.current {
  padding-left: 75px;
}
.weathercontent.current > div > span {
  margin-top: -50px;
}
.weathercontent.prognose > div > span {
  margin-top: -30px;
  margin-left: -25px;
}
#wetter h6 {
  margin: 0 0 8px;
  text-align: center;
  font: 40px Dosis;
  color: #000;
  font-weight: 300;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15)
}

/* Style sheet slinky */

* {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  font-size: 100%;
  text-decoration: none;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
:focus, :active, :hover {
  outline: 0
}
::-moz-selection {
  color: #fff;
  background: #666;
  text-shadow: none
}
::selection {
  color: #fff;
  background: #666;
  text-shadow: none
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  font: 125% "Helvetica Neue", "Helvetica", "Ubuntu", "Segoe UI", Verdana, sans-serif;
  color: #666;
  cursor: default;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}
#informations, #medialinks, #social, #wetter {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #000;
}
nav {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
section, header {
  width: 100%
}
section {
  margin: 0 auto
}
h4 {
  margin-top: 3px;
  margin-bottom: 10px;
  font: 1em Dosis;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase
}
section header {
  width: 135px;
  margin-bottom: 0;
  border-top: 1px solid #fff;
  z-index: 500;
  -webkit-transform: translate3d(0,0,0);
}
section header.active {
  /*width: 100%*/
}
section:first-child header {
  /*width: 100%*/
}
article {
  margin-top: -34px;
  margin-bottom: 2px;
  margin-left: 150px;
  padding: 5% 5% 5% 5%;
  background: #fff;
  z-index: 1000
}
small {
  font-size: .8em
}
.arrow {
  float: right;
  padding-bottom: 18px;
  /*background-image: url("../../url('data: image/svg+xml');background-position:bottom;background-repeat:no-repeat;color:#ccc;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNiA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wIDJoMnYtMmgydjJoMmwtMyA0eiIgZmlsbD0iI2RkZCIvPjwvc3ZnPg==");*/
  background-size: 18px;
}
.searchcontainer {
  border-bottom: 1px solid #fff;
}
/*.searchcontainer:after {
  background: url('powered_by_google_on_non_white_2x.png') top left no-repeat;
  width: 144px;
  height: 18px;
  float: right;
  background-size: 144px 18px;
  margin-top: 3px;
  margin-right: -16px;
}*/
#btnSearch {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -3000px;
  background: url("search_sprite.png") top left;
  background-size: 160px 40px;
  margin-top: 18px;
}
.no-touchevents #btnSearch:hover {
  background-position: -40px 0;
}
#btnSearch.active {
  background-position: -80px 0;
}
#btnDelete {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -3000px;
  background: url("deletesearch_sprite.png") top left;
  background-size: 160px 40px;
  position: absolute;
  top: 25px;
}
#popupList #btnDelete {
  display: inline-block;
  width: 36px;
  height: 30px;
  text-indent: -3000px;
  background: url("textdelete2_dark_sprite.png") top left;
  background-size: 108px 30px;
  float: right;
  position: absolute;
  right: 0px;
  top: 15px;
}
.no-touchevents #btnDelete:hover {
  background-position: -40px 0;
}
#btnMenu {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -3000px;
  background: url("menu_sprite.png") top left;
  background-size: 160px 40px;
  margin-top: 18px;
}
.no-touchevents #btnMenu:hover {
  background-position: -40px 0;
}
#btnMenu.active {
  background-position: -80px 0;
}
#btnMap span {
  display: inline-block;
  width: 40px;
  height: 40px;
  /*text-indent: -3000px;*/
  background: url("mapview_sprite.png") top left;
  background-size: 80px 40px;
}
#btnTiles span {
  display: inline-block;
  width: 40px;
  height: 40px;
  /*text-indent: -3000px;*/
  background: url("gridview_sprite.png") top left;
  background-size: 80px 40px;
}
#btnList span {
  display: inline-block;
  width: 40px;
  height: 40px;
  /*text-indent: -3000px;*/
  background: url("listview_sprite.png") top left;
  background-size: 80px 40px;
}
#btnAbout {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -3000px;
  background: url("imprint_sprite.png") top left;
  background-size: 160px 40px;
  margin-left: 20px;
  margin-top: 15px;
}
.no-touchevents #btnMap:hover span, .no-touchevents #btnTiles:hover span, .no-touchevents #btnList:hover span, .no-touchevents #btnAbout:hover, .no-touchevents .btnVideoclose:hover, .no-touchevents .btnVideoFullscreen:hover, .no-touchevents .btnClose:hover {
  background-position: -40px 0;
}
.btnVideoclose {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -3000px;
  background: url("videofull_sprite.png") top left;
  background-size: 160px 40px;
  margin: 10px 0 0 -40px;
  left: 50%;
  position: absolute;
}
.btnVideoFullscreen {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -3000px;
  background: url("videofullscreen_sprite.png") top left;
  background-size: 160px 40px;
  margin: 10px 0 0 40px;
  left: 50%;
  position: absolute;
}
.btnClose {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -3000px;
  background: url("../images/NEU/close_sprite.png") top left;
  background-size: 160px 40px;
  top: 95px;
  right: 15px;
  position: fixed;
}
#wetter {
  color: #000;
}
.alignright {
  text-align: right;
}
.alignright a {
  text-align: left;
}
.gmnoprint {
  display: none;
}
.infobox {
  overflow: hidden;
  position: relative;
}
.wikimore {
  display: none;
}
#contentList h2 {
  width: 100%;
  float: none;
  clear: both;
  margin-top: 0px;
  padding-top: 15px;
  border-bottom: 1px solid #888;
}
#contentList h3 {
  width: 100%;
  float: none;
  clear: both;
  margin-top: 0px;
  padding-top: 15px;
  border-bottom: 1px solid #888;
  font-family: Dosis;
  font-size: 14pt;
  color: #000;
  margin-left: 15px;
}
#contentList > div {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#contentList img {
  position: absolute;
  bottom: 15px;
  /*-85px;*/
}
@keyframes headeranimation {
  0% {
    background-color: rgba(0, 0, 0, .2);
    border-bottom: none;
  }
  100% {
    background-color: rgba(0, 0, 0, .8);
    border-bottom: 1px solid #000;
  }
}
@keyframes headeranimation2 {
  0% {
    background-color: rgba(0, 0, 0, .8);
    border-bottom: 1px solid #000;
  }
  100% {
    background-color: rgba(0, 0, 0, .2);
    border-bottom: none;
  }
}
@keyframes opacityZeroTo100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity100ToZero {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#LoadingMask {
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 100000000001;
}
#idleMask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.80);
  /*z-index: 100000000002;*/
}
.videogular-container, .progressbar {
  z-index: 100000000003;
}
/*
#informations.ng-hide-remove, #wetter.ng-hide-remove, #medialinks.ng-hide-remove, #social.ng-hide-remove {
  animation-name: opacityZeroTo100;
  animation-duration: 1.0s;
}
#informations.ng-hide-add, #wetter.ng-hide-add, #medialinks.ng-hide-add, #social.ng-hide-add {
  animation-name: opacity100ToZero;
  animation-duration: 1.0s;
}*/
#social a.btn-primary {
  background-color: #00C05B;
  border-color: transparent;
  border-radius: 20px;
  display: inline-block;
  padding: 10px;
  height: 40px;
}
#Header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 77px;
  width: 100%;
  background-color: rgba(0, 0, 0, .2);
  color: transparent;
  z-index: 100000000000;
  animation-name: headeranimation2;
  animation-duration: 0.5s;
}
#Header:hover:not(.active),
.no-touchevents #Header:hover:not(.active) {
  background-color: rgba(0, 0, 0, .8);
  border-bottom: 1px solid #000;
  animation-name: headeranimation;
  animation-duration: 0.5s;
}
#Header.active, #Header.ng-animate, #Header.active-remove.active-remove-active {
  background-color: rgba(0, 0, 0, .8);
  border-bottom: 1px solid #000;
  animation-duration: 0s;
}
html, body, #map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
}
#map_canvas {
  position: relative;
}
.angular-google-map-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.popup {
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  position: absolute;
  top: 77px;
  width: 100%;
  left: 0px;
  color: #ffffff;
}
.popup .inside {
  padding: 20px 100px;
  position: relative;
}
#popupAbout .inside {
  padding: 0px;
}
.popup h1 {
  color: #fff;
  text-align: center;
}
#popupAbout h1 {
  color: #000;
  text-align: left;
}
#popupAbout h1, #popupAbout h2 {
  border-bottom: 1px solid #dddddd;
  text-align: center;
  font-size: 150%;
}
#popupDetails {
  background: url(BG_PopupNEU.png) center bottom no-repeat transparent;
}
#popupTiles {
  overflow-y: auto;
}
#popupTiles img {
  width: 100%;
  height: auto;
  padding: 10px;
}
#popupTiles p {
  color: #fff;
  margin-top: -20px;
  margin-left: 0;
  padding: 15px 0 7px;
  text-align: center;
  font-family: Dosis;
  font-weight: bold;
  text-transform: uppercase;
  width: 100%;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: break-all !important;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(71%, rgba(0, 0, 0, 0.85)), color-stop(100%, rgba(0, 0, 0, 0.85)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 71%, rgba(0, 0, 0, 0.85) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000', GradientType=0);
  padding-left: 15px;
  padding-right: 15px;
}
#popupTiles .wrapper {
  width: 100%;
  height: 22px;
  float: none;
  position: absolute;
  bottom: 0px;
  text-align: center;
  padding: 0 10px;
}
#popupTiles h2 {
  text-align: center;
  color: #fff;
}
#popupSearch h2 {
  color: #fff;
  border-bottom: 1px solid #fff;
}
#popupSearch img {
  max-height: 110px;
  max-width: 178px;
  width: 100%;
  height: auto;
  /*float: right;*/
  /*margin-right: -15px;*/
  padding: 5px 0px;
}
#popupSearch a {
  color: #fff;
  text-decoration: none;
}
.no-touchevents #popupSearch .scrollcontainer a:hover, .no-touchevents #popupSearch .scrollcontainer a:hover div, .no-touchevents [kb-item]:hover, .no-touchevents [kb-item]:hover i {
  color: #000 !important;
  background-color: #fff !important;
}
.scrollcontainer {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#popupSearch i {
  color: #f00;
}
#popupSearch #Searchstring {
  font-size: 50px;
  text-align: center;
}
#Searchbox {
  width: 100%;
  border-bottom: 1px solid #fff;
  text-align: center;
  position: relative;
}
.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}
.contentbox {
  padding: 30px;
  overflow-y: auto;
  background: #ffffff;
  color: #000000;
}
.ng-pageslide {
  padding-top: 77px;
}
#SideMenu {
  height: 100%;
  background: #fff;
  width: 200px;
  overflow-y: auto;
}
#SideMenu h2 {
  font-size: 11pt;
  color: #fff;
  /*background: #333;*/
  padding: 10px;
  text-align: center;
  margin: 0px;
}
#SideMenu p {
  /*padding: 10px 20px;*/
  border-bottom: 1px solid #eee;
  margin: 0px;
}
#SideMenu a {
  display: block;
  width: 100%;
}
#SideMenu span {
  float: right;
  margin-top: -10px;
}
.videogular-container {
  width: 100%;
  /*height: 320px;*/
  margin: auto;
  position: relative;
  /*overflow: hidden;*/
}
.marker-labels {
  /*width: 160px;
    text-align: center;*/
  height: 18px;
  line-height: 18px;
  overflow: visible !important;
  position: absolute;
  /* left: 50%; */
}
.marker-labels span {
  padding-right: 5px;
  padding-left: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  border-collapse: collapse;
  display: block;
  margin-left: -50%;
  text-align: center;
  height: 18px;
  width: auto;
  display: inline-block;
  white-space: nowrap;
  /* margin-top: 40px; */
  max-width: 150px;
  text-overflow: ellipsis;
	overflow: hidden;
}
.progressbar {
  width: 100%;
  height: 1px;
  background: #fff;
  /*margin-top: 50px;*/
}
.aktprogress {
  width: 0px;
  height: 1px;
  background: #ff0000;
}
.clickbereich {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 50px;
  cursor: pointer;
}
.marker {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: #fff;
  border: 1px solid #323232;
  border-radius: 50%;
  border-collapse: collapse;
  /*behavior: url('css3pie/1.0.0/PIE.htc');*/
  cursor: pointer;
}
#markers {
  position: relative;
  margin-top: -16px;
  margin-bottom: 10px;
}
.no-touchevents .marker:hover, .marker.active {
  background-color: #f00;
}
.marker span {
  display: none;
  /*font-size:16pt;*/
  margin-top: -23px;
  position: absolute;
  width: 250px;
  left: -118px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: break-all !important;
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: .5px;
}
.no-touchevents .marker:hover span {
  display: block;
}
.marker.active span {
  display: block;
  color: #fff;
}

videogular vg-volume, [videogular] vg-volume {
    /*display: table-cell !important;*/
}

/*@media (min-width: 1200px) {
	.videogular-container {
		width: 1170px;
		height: 658.125px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.videogular-container {
		width: 940px;
		height: 528.75px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.videogular-container {
		width: 728px;
		height: 409.5px;
	}
}
*/


/* The starting CSS styles for the enter animation */

.views.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}

/* The finishing CSS styles for the enter animation */

.views.ng-enter.ng-enter-active {
  opacity: 1;
}

/* now the element will fade out before it is removed from the DOM */

.views.ng-leave {
  transition: 0.5s linear all;
  opacity: 1;
}
.views.ng-leave.ng-leave-active {
  opacity: 0;
}
.videogular-conatiner {
  width: 100%;
}

/* Everything but the jumbotron gets side spacing for mobile first views */

.header, .marketing, .footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */

.header {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 10px;
}

/* Make the masthead heading the same height as the navigation */

.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

/* Custom page footer */

.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */

.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */

.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */

@media screen and (min-width: 768px) {
  .container {
    /* max-width: 730px; */
  }
  /* Remove the padding we set earlier */
  .header, .marketing, .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  #Header center img {
    position: absolute;
    left: 50%;
    margin-left: -128px;
  }
}
.Version {
  float: right;
  margin-top: -30px;
  color: #000;
  background: #fff;
  font-size: 8pt;
  padding: 5px;
}

/* NEUE CSS DEFINITIONEN VON MARTIN */

#Header {
  background-color: rgba(0, 0, 0, .2);
}
#Header.active {
  background-color: rgba(0, 0, 0, .8);
}

/* entsprechend auch die Farbwerte der headeranimation2 einstellen */

#popupSearch i {
  color: #f00;
  padding: 0 1px;
  font-weight: 500;
}
.no-touchevents #popupSearch a:hover i {
  color: #f00;
}
#SideMenu {
  /*border-left: 1px solid #333; */
  background-color: rgba(0, 0, 0, .8);
  /*background-image: url(avm-logo.png);*/
  background-position: bottom center;
  /*background-position: calc(100% - 20px) center;*/
  background-size: 100px auto;
  background-repeat: no-repeat;
  border-bottom: 20px solid rgba(0, 0, 0, .8);
  -webkit-background-clip: padding-box;
  /* for Safari */
  background-clip: padding-box;
  /* for IE9+, Firefox 4+, Opera, Chrome */
}
#SideMenu h2 {
  padding-top: 30px;
  font-size: 12pt;
  font-weight: 600;
  color: #fff;
}
#SideMenu p {
  /*padding: 15px 20px; */
  border-bottom: 1px solid #eee;
  border-left: 1px solid #888;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  background-color: #f7f7f7;
}
.no-touchevents #SideMenu p:hover {
  background-color: #EEE;
  border-bottom: 1px solid #fff;
}
#SideMenu p:active {
  background-color: #EEE;
  border-bottom: 1px solid #fff;
}
#SideMenu a {
  color: #888;
  padding: 15px 20px;
}
.no-touchevents #SideMenu a:hover {
  text-decoration: none;
}
#SideMenu a:active {
  color: #e00;
}
#popupSearch #Searchstring {
  font-size: 70px;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Dosis';
}
#popupList h2 > span > input {
  color: #000;
  float: right;
  border-radius: 25px;
  height: 30px;
  border: 1px solid #ccc;
  padding: 0 20px;
  font-size: 20px;
}
.idle {
  opacity: 0.2;
}
#Header.idle {
  opacity: 1;
}
#Header.idle .inside {
  opacity: 0.2;
}
.hinweis {
  font-size: 80%;
  line-height: 1.3em;
}
[kb-item] {
  cursor: pointer;
}
[kb-item].kb-selected {
  background: lightblue;
}
.videobox {
  display: inline-flex;
  width: 100%;
}
.videobox.col-md-4 {
  display: block;
  width: 33.3333333333%;
}
.custom-marker {
  min-height: 40px;
  min-width: 40px;
  background: url('vmarke_kl.png') top center no-repeat;
  cursor: pointer;
  position: relative;
}
.custom-marker.selected, .custom-marker:hover {
  background: url('vmarke_hkl.png') top center no-repeat;
  z-index: 10000 !important;
}
.custom-marker.selected .youtubebild {
  display: block;
  position: absolute;
  bottom: 5px;
  left: 50%;
  margin-left: -100px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .infobox {
    width: 100% !important;
    float: right;
  }
  .videobox {
    width: 100% !important;
    float: left;
    display: block;
  }

  #weather i {
    width: 85px;
  }

  #weather h5 {
    width: 60px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .weathercontent.current > div > span {
    margin-top: -100px;
    margin-left: 180px;
  }

  #weather i {
    width: 85px;
  }

  #weather h5 {
    width: 60px;
  }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {

  #wetter i {
    width: 95px;
  }

  #wetter h5 {
    width: 60px;
  }

  .weathercontent.current > div > span {
    margin-left: 120px !important;
  }

  #wetter .current i {
    font-size: 70px !important;
    margin-left: 0px !important;
  }

  #popupSearch #Searchstring {
    font-size: 30px;
  }

  #btnDelete {
    top: 0px;
  }

}



.leaflet-control-container {
  display: none;
}


.marker-labels {
  /*width: 160px;
    text-align: center;*/
  height: 18px;
  line-height: 18px;
  overflow: visible !important;
  position: absolute;
  /* left: 50%; */
  margin-left: 20px;
}
.marker-labels span {
  padding-right: 5px;
  padding-left: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  border-collapse: collapse;
  display: block;
  margin-left: -50%;
  text-align: center;
  height: 18px;
  width: auto;
  display: inline-block;
  white-space: nowrap;
  /* margin-top: 40px; */
  max-width: 150px;
  text-overflow: ellipsis;
	overflow: hidden;
}

.leaflet-marker-pane {
    z-index: 8;
}

.leaflet-popup-tip-container {
  visibility: hidden;
}

.leaflet-popup-close-button {
  display: none;
}

.leaflet-popup-content-wrapper {
  border-radius: 0px !important;
  padding: 0px !important;
}

.leaflet-popup-content {
  margin: 0px !important;
}

.leaflet-popup-pane {background: none;}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: none;
  box-shadow: none;
}

.leaflet-popup {
  margin-bottom: 0 !important;
}


.youtube {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#HinweisEnde {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #800;
}