/*
 * Globals
 */

/* Fonts */
@font-face {
  font-family: 'Open Sans';
  font-style: lighter;
  font-weight: 300;
  src: url(../fonts/OpenSans-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/OpenSans-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/RobotoSlab-Regular.ttf) format('truetype');
}

/* Links */
a,
a:focus,
a:hover {
  color: #ffffff;
}

/* Custom default button */
.btn-secondary {
  color: #ffffff;
  background-color: #e2001a;
  border: 0px;
}

/*
 * Base structure
 */
html,
body {
  height: 100%;
}
body {
  color: #fff;
  text-align: center;
}

* {
  font-family: 'Arial', sans-serif;
}

h1 {
  font-family: 'Roboto Slab', serif;
}

h2 {
  font-size: 2.5rem;
  font-family: 'Roboto Slab', serif;
}

h3 {
  font-size: 2rem;
  font-family: 'Open Sans', sans-serif;
}

h2, h3 {
  color: #002a51;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner, .phone {
  padding: 2.6rem 0;
}

.inner.nav-outer, .phone {
  margin: 0px;
}

/*
 * Header
 */
.header-outer {
    background: #003366;
    background: -webkit-linear-gradient(#003366, #003366);
    background: -o-linear-gradient(#003366, #003366);
    background: -moz-linear-gradient(#003366, #003366);
    background: linear-gradient(#003366, #003366);
}

.logo {
	padding-top: 15px;
	padding-bottom: 15px;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: 0 .25rem 0;
  font-weight: bold;
  color: #ffffff;
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .open>.nav-link, .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  background-color: transparent;
  color: #ffffff;
}

.navbar-light .navbar-toggler-icon {
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: #e2001a;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
}


/*
 * Cover
 */

.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: bold;
}


/*
 * Footer
 */

.mastfoot {
  color: rgba(255,255,255,.5);
}


/*
 * Affix and center
 */

@media (min-width: 40em) {
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 62em) {
  .mastfoot,
  .cover-container {
    width: 42rem;
  }
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  bottom: 3rem;
}

#fldCarousel .carousel-caption {
  text-shadow: 1px 1px 1px #5c5c5c;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  min-height: 33rem;
}

#fldCarousel .carousel-item {
  min-height: 28rem;
}

#fldCarousel .carousel-item img {
    width: 100%;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  /* min-width: 100%;
  height: 32rem; */
}

#fldCarousel {
   border-top: 2px solid #ffffff;
   border-bottom: 2px solid #ffffff;
}

/* CUSTOMIZE THE ABOUT */
#about {
    background: #40668c;
    background: -webkit-linear-gradient(#003366, #40668c);
    background: -o-linear-gradient(#003366, #003366);
    background: -moz-linear-gradient(#003366, #40668c);
    background: linear-gradient(#003366, #40668c);
    padding: 4rem 0;
}

#about h2 {
  font-size: 2rem;
  color: #ffffff;
}

#about .cover-container {
    margin-bottom: 3rem;
}

/* CUSTOMIZE THE CONTENT */
#content {
  background-color: #ffffff;
  color: #000000;
}

#content .row {
  padding-top: 50px;
  padding-bottom: 10px;
}

/* CUSTOMIZE THE POWER AREA */
#power {

}

/* CUSTOMIZE THE PRICE AREA */
#price {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

#price a, #price a:hover, #price a:focus {
  color: #636c72;
  text-decoration;
}


/* CUSTOMIZE THE ALBUM */
.album {
  padding-top: 3rem;
  padding-bottom: 3rem;
    background: #f9f6e6;
    background: -webkit-linear-gradient(#f9f6e6, #f4eed7);
    background: -o-linear-gradient(#f9f6e6, #f4eed7);
    background: -moz-linear-gradient(#f9f6e6, #f4eed7);
    background: linear-gradient(#f9f6e6, #f4eed7);
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
  background-color: transparent;
}

.card img {
  margin-bottom: .75rem;
  border: 1px solid #ffffff;
}

.card-text {
  font-size: 85%;
  padding-top: 0.75rem;
}

/* CUSTOMIZE THE EVENTS AREA */
#news {
    padding-top: 3rem;
}

#news h2 {
    margin: 20px 0px;
}

#news .carousel-indicators li {
  background-color: #e3e3e3;
}

#news .carousel-indicators li.active {
  background-color: #777777;
}

#news .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

#news .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* CUSTOMIZE THE VIDEO AREA */
#media {
  padding-top: 6rem;
  padding-bottom: 6rem;
    background: #f9f6e6;
    background: -webkit-linear-gradient(#f9f6e6, #f4eed7);
    background: -o-linear-gradient(#f9f6e6, #f4eed7);
    background: -moz-linear-gradient(#f9f6e6, #f4eed7);
    background: linear-gradient(#f9f6e6, #f4eed7);
}

/* CUSTOMIZE THE LOGO AREA */
#logos {
   background-color: #ffffff;
   color: #000000;
}

#logos .row {
   margin-top: 50px;
   margin-bottom: 80px;
}

/* CUSTOMIZE THE FEATURE AREA */
#feature {
   padding-top: 50px;
   padding-bottom: 50px;
}

/* CUSTOMIZE THE FOOTER */
#footer {
   padding-top: 50px;
   padding-bottom: 50px;
    background: #021533;
    background: -webkit-linear-gradient(#021533, #06203f);
    background: -o-linear-gradient(#021533, #06203f);
    background: -moz-linear-gradient(#021533, #06203f);
    background: linear-gradient(#021533, #06203f);
}

#footer h2, #footer h3 {
  color: #ffffff;
}

#map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-height: 250px;
}

/* CUSTOMIZE THE COPYRIGHT AREA */
#copyright {
    background: #06203f;
    background: -webkit-linear-gradient(#06203f, #00132f);
    background: -o-linear-gradient(#06203f, #00132f);
    background: -moz-linear-gradient(#06203f, #00132f);
    background: linear-gradient(#06203f, #00132f);
}

/* HOVER BUTTONS */
.hvr-bounce-to-right:before {
  background: #ffffff;
}

.btn-secondary:hover {
  color: #e2001a;
}

/* GALLERY ZOOM */
.zoom-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: transparent;
  cursor: pointer;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  margin: 0 10px;
}

.zoom-icon:before {
  content: '';
  background: url(../img/zoom.png);
  width: 120px;
  height: 90px;
  margin: -45px 0px 0 -60px;
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.zoom-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  background: url(../img/zoom-bg.png);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  transition: 400ms all 100ms;
  -webkit-transition: 400ms all 100ms;
  -o-transition: 400ms all 100ms;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.card {
	background:none;
	padding:0;
	box-shadow:none;
	border:none;
	overflow:hidden;
	-webkit-transform:translateZ(0);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.card img {
	display:inline-block;
	border-radius:0;
	padding:0;
	background:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
    margin-bottom: 0px;
}

.card a {
  position: relative;
  display: block;
  	transition:all 0.3s ease 0s;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}

.card a img {
  transition: transform 200ms linear;
  -webkit-transition: -webkit-transform 200ms linear;
}

.card a:hover .zoom-icon, .card a:hover .zoom-magnifier {
	visibility: visible;
  	opacity: 1;
}

.card:hover .zoom-icon:before {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}

.card:hover .zoom-icon:after {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}

/* BACK TO TOP */
#back-top-wrapper {
	z-index:200;
	right:20px;
	bottom:43px;
	overflow:visible;
	position: fixed;
}

#back-top-wrapper #back-top {
	margin:0;
}

#back-top a {
  display: block;
}

#back-top-wrapper #back-top a {
	width:48px;
	height:48px;
	border-radius:50px;
	background:rgba(127,127,127,0.6);
	text-align:center;
	-webkit-perspective:100px;
	perspective:100px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	transition:all 0.3s ease 0s;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}

#back-top-wrapper #back-top a span {
	display:block;
	width:14px;
	height:8px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-4px 0 0 -7px;
	background:url(../img/totop.png) no-repeat 0 0;
	transition:all 0.3s ease 0s;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}

#back-top-wrapper #back-top a:hover {
	background: #e2001a;
}

#back-top-wrapper #back-top a:hover span {
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
	-o-transform:rotateY(180deg);
	transform:rotateY(180deg);
}

/* SLIDESHOW */
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Fading animation */
.fadeSlide {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
  animation: fadeSlide 15s ease-out infinite;
}

@-webkit-keyframes fadeSlide {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}

@keyframes fadeSlide {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}

@media( max-width: 1280px ) {
  #fldCarousel .carousel-item {
    min-height: 24rem;
  }
}

/* TABLET QUER */
@media( max-width: 1024px ) {
  .container {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    max-width: 100%;
  }

  #fldCarousel .carousel-item {
    min-height: 15rem;
  }
}

/* TABLET HOCH */
@media( max-width: 768px ) {
  .card {
    width: 100%;
  }
}

/* PHONE QUER */
@media (max-width: 667px) {
  #fldCarousel .carousel-item {
    min-height: 7rem;
  }

  .carousel-item {
    min-height: 34rem;
  }

}

/* PHONE HOCH */
@media( max-width: 567px ) {
  .carousel-item {
    min-height: 39rem;
  }
}




#colorbox a {
  color: #D70017;
}

#colorbox a.btn-secondary {
  color: #ffffff;
}

#colorbox a.btn-secondary:hover {
  color: #D70017;
}

.navigation .navbar {
  padding-top: 33px;
}

.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover, .navbar-light .navbar-toggler:focus, .navbar-light .navbar-toggler:hover {
  color: transparent;
}

@media( max-width: 768px ) {
  .logo {
    padding-top: 15px;
  }

  .navigation .navbar {
    padding-top: 20px;
  }

  #fldCarousel {
    border-bottom: 3px solid #ffffff;
  }

  #about .col-md-4, #price .col-lg-6 {
    margin-bottom: 50px;
  }
}

@media( max-width: 375px ) {
  .navbar-light .navbar-toggler {
    margin-top: -45px;
  }

  #news {
    padding-top: 0rem;
  }
}

.phone a {
    margin-top: .6rem;
    display: block;
}

/* CSS Slider with fade effect */
.slider {
  max-width: 100%;
  height: 100%;
  min-height: 300px;
  position: relative;
}

.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide1 {
  background: url( ../img/angebot/angebot01.jpg ) no-repeat center;
  background-size: contain;
  animation:fade 15s infinite;
  -webkit-animation:fade 15s infinite;
}

.slide2 {
  background: url( ../img/angebot/angebot02.jpg ) no-repeat center;
  background-size: contain;
  animation:fade2 15s infinite;
  -webkit-animation:fade2 15s infinite;
}

.slide3 {
  background: url( ../img/angebot/angebot03.jpg ) no-repeat center;
  background-size: contain;
  animation:fade3 15s infinite;
  -webkit-animation:fade3 15s infinite;
}

.slide4 {
  background: url( ../img/angebot/angebot04.jpg ) no-repeat center;
  background-size: contain;
  animation:fade4 15s infinite;
  -webkit-animation:fade4 15s infinite;
}

.slide5 {
  background: url( ../img/angebot/angebot05.jpg ) no-repeat center;
  background-size: contain;
  animation:fade5 15s infinite;
  -webkit-animation:fade5 15s infinite;
}

@keyframes fade
{
  0%   {opacity:1}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 0}
  80% { opacity: 0}
  100% { opacity: 1}
}

@keyframes fade2
{
  0%   {opacity:0}
  20% { opacity: 1}
  40% { opacity: 0 }
  60% { opacity: 0 }
  80% { opacity: 0 }
  100% { opacity: 0}
}

@keyframes fade3
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 1}
  60% { opacity: 0}
  80% { opacity: 0 }
  100% { opacity: 0}
}

@keyframes fade4
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 1}
  80% { opacity: 0}
  100% { opacity: 0}
}

@keyframes fade5
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 0}
  80% { opacity: 1}
  100% { opacity: 0}
}