/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
body {
  color: #5a5a5a;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.6em

}

h1,h2,h3 {
  color: #39aaa5;
  font-weight: 700
}
a{
  color: #39aaa5
}

a:hover{
  text-decoration: underline;
  color: #39aaa5
}
a:visted, a:focus{
  color: #39aaa5
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

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

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

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 70vh;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

/********************************/
/*          Hero Headers        */
/********************************/
.item .slides {
    height: 70vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;}



.carousel-control.right{
    background-image: -webkit-linear-gradient(left,rgba(8,149,143,.0001) 0,rgba(8,149,143,.5) 100%);
    background-image: -o-linear-gradient(left,rgba(8,149,143,.0001) 0,rgba(8,149,143,.5) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(8,149,143,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to right,rgba(8,149,143,.0001) 0,rgba(8,149,143,.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control.left {
    background-image: -webkit-linear-gradient(left,rgba(8,149,143,.5) 0,rgba(8,149,143,.0001) 100%);
    background-image: -o-linear-gradient(left,rgba(8,149,143,.5) 0,rgba(8,149,143,.0001) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(8,149,143,.5)),to(rgba(8,149,143,.0001)));
    background-image: linear-gradient(to right,rgba(8,149,143,.5) 0,rgba(8,149,143,.0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
  }

.hero{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    text-align: left;
    padding-left: 15px;
    text-shadow: none;
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
  }

.carousel .caption h1{
    color: #fff;
    text-shadow: none;
    text-align: left;
    font-size: 40px
}
.carousel .caption span{
    margin: 5px;
    display: inline-block;
    background: rgba(8,149,143,0.6);
    padding: 0px 10px;
    line-height: 1.4em;
}
.carousel .caption span:before{
    content: "";
    position: absolute;
    background: #39aaa5;
    height: 56px;
    width: 10px;
    margin-right: 7px;
    margin-left: -16px;
}
.carousel .caption span.light{
  font-weight: 300
}
/* Kontakt
-------------------------------------------------- */
.btn{
  color:#39aaa5;
  border: 1px solid #39aaa5;
  background: none
}
.btn:hover{
  color: #fff;
  background: #39aaa5;
   border: 1px solid #39aaa5;
}
.btn-white{
    color:#39aaa5;
  border: 1px solid #39aaa5;
  background: #fff
}
.btn-white:hover, .btn-white.focus, .btn-white:focus{
    color:#fff;
  border: 1px solid #fff;
  background: #39aaa5
}
.btn-default.focus, .btn-default:focus,.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover{
    color: #fff;
  background: #39aaa5;
   border: 1px solid #39aaa5;
}
#kontakt{
  background: #ecf0f1;
  padding: 40px 0
}

#kontakt img.icon{
  margin-top: 22px;
  max-width: 50px
}

table .highlight{
  font-weight: 600
}
footer .table-hover>tbody>tr:hover{
  color: #39aaa5;
  background: #fff
}
/* ueberuns
-------------------------------------------------- */

#ueber-uns{
  background: #fff;
  padding:60px 0
}

/* jameda
-------------------------------------------------- */

#jameda{
  background: #fff;
  padding:0px 0 60px
}

#jameda .jameda_widget{
  margin: 10px auto
}
/* jameda
-------------------------------------------------- */

#karte{
    border-top: 5px solid #39aaa5;
}
#karte .map{
  height: 400px
}
.anfahrt{
  background: #fff;
  padding: 140px 0
}


footer{
  background: #39aaa5;
  color:#fff;
  padding: 60px 0
}

footer h3, footer a{
  color: #fff
}
footer a:hover{
  color: #fff;
  text-decoration: underline;
}
/* RESPONSIVE CSS
-------------------------------------------------- */



@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

}
@media (max-width: 768px){

   .anfahrt{
  padding: 80px 0
} 
.hero{
  left: 30%
}
.carousel .caption h1{
    font-size: 30px
}
.carousel .caption span{
    margin: 4px
}
.carousel .caption span:before{
    height: 42px;
    width: 8px;
}

.carousel-control{
  display: none;
}
}

@media (max-width: 480px) {
.row-eq-height{
  display: inherit;
}
#jameda-widget-container310705{
  display: none
}
#map{
  height: 260px
}

.anfahrt{
  padding: 60px 0
}
.carousel .caption h1{
    font-size: 26px
}
.carousel .caption span{
margin: 3px
}
.carousel .caption span:before{
    height: 36px;
    width: 8px;
}
.hero{
  width: 80%;
  left: 50%
}
}