/* copyright by gridders gmbh 2019 */
html{
	height:100%;
}

body{
	background:transparent;
	font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
	font-size: 14px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
	color: #1a1a1a;
}

h1 {
    margin-top: 0.2em;
}
h2{
	padding-top: 0.8em;	
}
h5 {
    margin: 0.5em 0 0 0;
	font-weight: bold;
	font-size: 1em;
}

.grid-container{
	max-width: 50rem;
	min-height: 100%;
}

.button {
	background-color: #232323;
}

.button:hover{
	background-color: #FFF;
	color:#D04A04;
}

.button:hover a{
	background-color: #FFF;
	color:#bd1113;
}

* {
	margin:0;
	padding:0;
}

html, body {
	height: 100%;
	width: 100%;
	background-color:#F3F3F3; 
}

.logo {
	margin: 25px 0 20px 0;
}

.logokontakt {
	float: right;
	margin: 25px 0 15px 0;
}

#distance {
	width: 10px;
	height: 50%;
	margin-bottom: -270px;
	float: left;
}

#container {
	margin: 0 auto;
	position: relative;
	height: 520px;
	width: 600px;
	clear: left;
}

#navleft {
	float:left;
}

.rechts {
	float: right;
}

.navwp {
	float: right;
	padding: 0 0 0 15px;
}

 .nav-item {
    font-family: 'Fira Sans Extra Condensed', sans-serif;
	color: #000000;
	font-weight: 300;
	margin-left: -5px;
	font-size: 23px;
	text-decoration: none;
    display: inline-block;
}

.nav-item-bera {
    font-family: 'Fira Sans Extra Condensed', sans-serif;
	color: #000000;
	font-weight: 300;
	margin-left: -5px;
	font-size: 23px;
	text-decoration: none;
    display: inline-block;
}

.nav-item-bera a {
	color: #000;
	text-decoration: none;
	font-size: 23px;
	margin-left: 5px
  }

    .nav-item a {
      text-decoration: none;
      font-size: 23px;
      padding: 10px 5px;
      color: #000;
	  margin-right: -5px;
    }

.reveal {
	width: 80%;
}

.reveal-overlay {
	background-color: rgba(10, 10, 10, 0.9);
}

.abstrakta {
	margin-top: 17px;
	padding-right: 36px;
}

.film {
	margin: 17px 0 0 0;
	max-height: 47px;
	padding-left: 75px;
}

.lied {
	margin: 17px 0 0 0;
	max-height: 42px;
}

.jingle {
	margin-top: 17px;
	padding-left: 17px;
	max-height: 49px;
	float: right;
}

.cartoon {
	margin-top: 20px;
	max-height: 35px;
	padding-left: 5px;
}

.schreiben {
	margin-top: 17px;
	padding-left: 95px;
}

@media only screen and (min-width: 0px) and (max-width: 620px) {
	#container {
		margin: 0 auto;
		position: relative;
		height: 676px;
		width: 90%;
		clear: left;
	}
	.mobile {
		max-height: 10px;
		margin: 25px 0 15px 0;
	}
	.abstrakta {
		padding: 0 22px 0 0;
		margin-top: 17px;
	}
	.film {
		padding-left: 30px;
	}
	.cartoon {
		margin-top: 19px;
		max-height: 35px;
	}
	.schreiben {
		margin-top: 17px;
		padding-left: 0px;
	}
}



      .kontakt-overlay {
        position: absolute;
        bottom: 7%;
        left: 5%;
        background-color: white;
        padding: 20px;
        text-align: left;
        font-family: 'Fira Sans Extra Condensed', sans-serif;
        font-weight: 300;
        font-size: 13px;
        width: 30%;
        height: 86%;
      }

      @media (max-width: 600px) {
        .kontakt-overlay {
          left: 0;
          right: 0;
          margin: auto;
          top: 10%;
          max-width: 90vw;
        }
      }	  

	  .galerie-overlay {
		position: absolute;
		bottom: 7%;
		left: 65%;
		background-color: white;
		padding: 20px;
		font-family: 'Fira Sans Extra Condensed', sans-serif;
		font-weight: 300;
		font-size: 14px;
		width: 30%;
		height: 86%;
		overflow-wrap: break-word;
   		overflow: hidden;
   		overflow-y: auto;
   		overflow-x: hidden;
	  }

	  @media (max-width: 600px) {
		.galerie-overlay {
		  left: 0;
		  right: 0;
		  margin: auto;
		  top: 10%;
		  max-width: 90vw;
		}
	  }

	  .galerie-text {
	      margin-top: 85%;
	  }

	  .rubriktitel {
		  font-family: 'Fira Sans Extra Condensed', sans-serif;
		  font-weight: 300;
		  font-size: 16px;
		  text-align: left;
		  text-decoration: none;
		  color: inherit;
	  }

	  .rubrikuntertitel {
		list-style: none; 
		text-decoration: none;
		color:#000000;
		display: inline-block;
		font-family: 'Fira Sans Extra Condensed', sans-serif;
		font-weight: 300;
		font-size: 13px;
		text-align: left;
		color: inherit;
	  }

.rubrikuntertitel a {
    color: inherit;
    text-decoration: none;
}

	  .kontakt-top {
		margin-bottom: 10px;
	  }

	  .kontakt-text {
	    margin-top: 100%;
      }