@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
    padding-top: 70px;
	color: #222;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    line-height: 1.8 !important;
}

html {
	overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'Open Sans', sans-serif;
	font-weight:200;
	color: #222;
}

p {
	font-family: 'Roboto', serif;
	font-weight:300;
}

.dienst-titel {
  font-weight: 900;
  font-size: 1.2em;
}

section {
	padding-top: 85px;
	padding-bottom: 85px;
}

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

a,a:link {
	color: #222;
}

a:hover,a:focus {
	color: #222;
}


/* Navbar */

.navbar-fixed-top .nav {
    padding: 15px 0;
}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}

.navbar-brand img{
	max-height: 50px;
}

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: 0px;
}

@media(min-width:768px) {
    body {
        padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    .navbar-fixed-top .navbar-brand {
        padding: 15px 0;
    }
}

.navbar-default {
    background-color: #fff;
    border-color: #fff;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #fff;
    color: #222;
}

.navbar-default .navbar-nav > li > a {
    color: #222;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #555;
}


/* Toggle Animation */

.navbar-toggle * {
	-ms-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.navbar-toggle {
    border: medium none;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    height: 50px;
    padding: 16px;
    width: 50px;
    float: right;
	margin-top:0px;
	margin-bottom:0px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #fff;
}

.navbar-default .navbar-toggle, .navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #fff;
}

.navbar-toggle span {
	width: 25px;
	height: 3px;
	margin-bottom: 5px;
	background-color: #222;
	display: block;
}
.navbar-toggle span.bar1 {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
	-ms-transform-origin: 1px 3px;
	-webkit-transform-origin: 1px 3px;
  -moz-transform-origin: 1px 3px;
  -o-transform-origin: 1px 3px;
	transform-origin: 1px 3px;
	width: 31px;
}
.navbar-toggle span.bar2 {
	-ms-transform: rotate(-360deg) scale(0);
	-webkit-transform: rotate(-360deg) scale(0);
  -moz-transform: rotate(-360deg) scale(0);
  -o-transform: rotate(-360deg) scale(0);
	transform: rotate(-360deg) scale(0);
}

.navbar-toggle span.bar3 {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-ms-transform-origin:8px 2px;
	-webkit-transform-origin: 8px 2px;
	transform-origin: 8px 2px;
	width: 31px;
}
.navbar-toggle.collapsed span.bar1,
.navbar-toggle.collapsed span.bar2,
.navbar-toggle.collapsed span.bar3,
.navbar-toggle.collapsed span.bar4 {
	-ms-transform: none;
	-webkit-transform: none;
	transform: none;
	width: 30px;
}

/* Intro */
/*
<!-- Intro -->
<section class="intro" id="willkommen">
<div class="container">
  <div class="row">
    <div class="col-lg-7">
      <p>Servus! Schön, dass du hier bist. Auf dieser Seite erfährst du alles über das Isar Studio, dein Tonstudio im Herzen des Isarwinkels. Mein Antrieb ist es, den Raum und die Zeit zu schaffen, die es braucht, um eine musikalische Idee zu verwirklichen. Egal, ob alleine oder mit Band, ob ganzes Album oder einfach mal etwas Studioluft schnuppern: Ich freue mich auf dich und darauf, deine Musik aufnehmen zu dürfen.</p>
    </div>
  </div>
</div>
</section>


.intro {
	font-size:22px;
	padding-top:85px;
	padding-bottom:25px;
}
*/


/* About */

.about {
  font-size: 1.2em;
}

.big-letter p:first-child:first-letter {
	float: left;
	color: #222;
	font-size: 4em;
	line-height: 0.8em;
	text-transform: uppercase;
	padding-top: 0px;
	padding-right: 0.1em;
	padding-left: –0.03em;
}

/* Firefox Fix */

@-moz-document url-prefix() {
    .big-letter p:first-child:first-letter {
        padding-top: 0.08em;
    }
}



/* Carousel */
.slider {
  padding-top: 0;
}

.carousel-inner {
  max-height: 80vh;
}

.carousel-control.left {
  background-image: none;
  filter: none;
}
.carousel-control.right {
  background-image: none;
  filter: none;
}



/* Gallery */


/* Hover Effect */

.hovereffect a:link,.hovereffect a:hover,.hovereffect a:focus,.hovereffect a:visited {
	color:#fff;
}

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: left;
  background: #cccccc;
  cursor: pointer;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 50px 20px;
  cursor: pointer;
}

.hovereffect a, .hovereffect p,.hovereffect h2 {
  color: #fff;
  text-decoration:none;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  color:#fff;
  text-decoration:none;
  opacity: 1;
  letter-spacing:1px;
  filter: alpha(opacity=100);
}

@media (max-width: 992px) {
	.hovereffect{
		margin-bottom: 25px;
	}
}

.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor:pointer;
}

.hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.hovereffect .photo-1,
.hovereffect .photo-2,
.hovereffect .photo-3,
.hovereffect .photo-4,
.hovereffect .photo-5,
.hovereffect .photo-6{
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect:hover .photo-1,
.hovereffect:hover .photo-2,
.hovereffect:hover .photo-3,
.hovereffect:hover .photo-4,
.hovereffect:hover .photo-5,
.hovereffect:hover .photo-6{
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.photo-1,.photo-2,.photo-3,.photo-4,.photo-5,.photo-6{
	background-size:cover;
	height:50vh;
	width:100%;
	background-position:center;
}

/* Thumbnail Images*/

.photo-1 {background-image: url('../img/1.jpg');}
.photo-2 {background-image: url('../img/2.jpg');}
.photo-3 {background-image: url('../img/3.jpg');}
.photo-4 {background-image: url('../img/4.jpg');}
.photo-5 {background-image: url('../img/5.jpg');}
.photo-6 {background-image: url('../img/6.jpg');}

/* Modal Box */

.modal-dialog {
    margin: auto;
    top: 15vh;
    width: 55%;
}

.modal-body {
    padding: 0px;
}

.modal-content {
    background-color: transparent;
    border: none;
    border-radius: 0px;
    box-shadow: none;
}

/* Carousel Control*/

.close {
    color: #fff;
    font-size: 50px;
    font-weight: lighter;
    opacity: 1;
    position: fixed;
    right: 30px;
    text-shadow: none;
    top: 10px;
    z-index: 2147483647;
}

.close:hover, .close:focus {
    color: #f7f7f7;
}

.carousel-control.left, .carousel-control.right  {
    background-image: none;
    height: 70vh;
}

.carousel-control {
    text-shadow: none;
	  width: 9%;
}

.modal-open .modal {
    top: 0;
    position: fixed!important;
}


/* Thumbnail */

.thumbnail {
    background-color: transparent;
    border: 0px solid #ddd;
    border-radius: 0px;
    display: block;
    line-height: 1.42857;
    margin-bottom: 0px;
    padding: 10px;
    transition: border 0.2s ease-in-out 0s;
}

@media (max-width: 992px) {
	.thumbnail {
		padding: 0px 10px;
	}
}


.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    height: 100%;
    max-width: none;
	  width: 100%;
	  object-fit: scale-down;


}


/* Press */

.press p {
	line-height: 1.4em;
}

.press a:link {
	text-decoration:underline;
}

.press h4 {
	padding-top:20px;
	font-weight:bold;
	letter-spacing:1px;
}

/* Ausstattung */

.ausstattung {
	line-height: 1.4em;
}

.ausst-titel-gr {
    font-weight: 900;
    font-size: 1.2em;
}

.ausst-titel-kl {
    font-weight: 900;
    font-size: 1em;
}

/* Kontakt*/

#kontakt {
  line-height: 1em;
}


/* Brand */
/*
.logo-list img {
	width:100%;
	height:auto;
	opacity:0.8;
}

.logo-list li {
	padding-bottom:1%;
}

.logo-list li a:hover,
.logo-list li a:focus {
  opacity: 0.6;
  transition:  opacity 0.2s ease;
  display: block; }
}
*/

/* Footer */

footer {
	padding-bottom:85px;
}

footer p {
	font-family: 'Open Sans', sans-serif;
	font-weight:200;
	font-size:0.7em;
}




.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../img/arrow-up.png) no-repeat center 50%;
  background-size:cover;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: transparent;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}