html, body{ 
	min-height: 100%; 
}
h1{
	font-size: 3em;
}
a[name] {
    padding-top:100px;
}
.anchor{
  display: block;
  height: 100px; /*same height as header*/
  margin-top: -100px; /*same height as header*/
  visibility: hidden;
}
.logo{
	-webkit-animation: fadeOut 3s forwards;
	animation: fadeOut 3s forwards;
}
.modal{
	height: 60%;
	left: 50%;
	position:
	absolute;
	top: 50%;
	z-index: 10;
	width: 60%; 
	-webkit-animation: remove 0s 3s forwards;
	animation: remove 0s 3s forwards;
}
.modal .logo{ 
	background: url(../../assets/images/logo.png) no-repeat center center;
	left: -50%;
	position: absolute;
	top: -50%;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.nav{
	position: fixed;
	width: 100% !important;
	z-index: 99 !important;
	height: 100px;
	background-color: #FFFFFF;
	-webkit-animation: hide 0s 0s forwards,
			           show 2s 3s forwards;
	animation: hide 0s 0s forwards,
			   show 2s 3s forwards;
	-webkit-box-shadow: 0 3px 10px 0 rgba(44, 40, 40, 1);
	   -moz-box-shadow: 0 3px 10px 0 rgba(44, 40, 40, 1);
	        box-shadow: 0 3px 10px 0 rgba(44, 40, 40, 1);
}
.navLogo{
	height: 80px;
	width: 80px;
	margin-left: 10px;
	margin-top: 10px;
}
.navTitle{
	padding-top: calc(100px/2 - 3rem/2);
	font-size: 2rem;
	font-family: 'Ubuntu Condensed', sans-serif;
	opacity: 0.7;
}
.navTitle a{
	text-decoration: none;
	color: #222;
}
.aLeistungen:hover{
	color: #0F457E;
}
.aAnfahrt:hover{
	color: #E21A1E;	
}
.aKontakt:hover{
	color: #040201;
}
.highlightRow{
	background: url(../../assets/images/grey_wash_wall.png) !important;
	padding-top: 100px;
}
.content1{
	background: url(../../assets/images/tweed.png) !important;
	-webkit-box-shadow: inset 0 3px 10px 0 rgba(44, 40, 40, 1);
	   -moz-box-shadow: inset 0 3px 10px 0 rgba(44, 40, 40, 1);
	        box-shadow: inset 0 3px 10px 0 rgba(44, 40, 40, 1);
}
.content2{
	background: url(../../assets/images/mochaGrunge.png) !important;
	-webkit-box-shadow: inset 0 3px 10px 0 rgba(44, 40, 40, 1);
	   -moz-box-shadow: inset 0 3px 10px 0 rgba(44, 40, 40, 1);
	        box-shadow: inset 0 3px 10px 0 rgba(44, 40, 40, 1);
}
.content{
	-webkit-animation: hide 0s 0s forwards,
					   show 2s 4s forwards;
	animation: hide 0s 0s forwards,
			   show 1.5s 4s forwards;
}
.headline{
	border: 3px solid;
	border-left: 0;
	border-right: 0;
}
.decorationNone{
	text-decoration: none;
}
.highlight{
	margin: 15vh 50px 50px;
	background-image: url(../../assets/images/whitey.png) !important;
	border-radius: 3px;
	-webkit-box-shadow: 0 3px 10px 0 rgba(44, 40, 40, 1);
	   -moz-box-shadow: 0 3px 10px 0 rgba(44, 40, 40, 1);
	        box-shadow: 0 3px 10px 0 rgba(44, 40, 40, 1);
}
.highlight1
{
	-webkit-animation: hide 0s 0s forwards,
					   show 1.5s 5.5s forwards;
	animation: hide 0s 0s forwards,
			   show 1.5s 5.5s forwards;
}
.highlight2
{
	-webkit-animation: hide 0s 0s forwards,
					   show 1.5s 7s forwards;
	animation: hide 0s 0s forwards,
			   show 1.5s 7s forwards;
}
.highlight3
{
	-webkit-animation: hide 0s 0s forwards,
					   show 1.5s 8.5s forwards;
	animation: hide 0s 0s forwards,
			   show 1.5s 8.5s forwards;
}
.spacing{
	height: 1em;
}
.spacingDouble{
	height: 2em;
}
.spacingAlt{
	padding-bottom: 0.51em;
}
.highlight:hover{
	-webkit-animation: jump 0.8s;
	animation: jump 0.8s;
}
.highlightImage{
	width: 90%;
	height: 40vh;
	margin-top: 25px;
	border-radius: 3px;
}
.topics{
	height: calc(100vh - 100px);
}
.topic{
	display: block;
	font-size: 4em;
}
.topic1{
	color: #0F457E;
	opacity: 0.6;
	text-decoration: underline;
}
.topic2{
	color: #040201;
	opacity: 0.5;
	text-decoration: underline;
}
.topic3{
	color: #E21A1E;
	opacity: 0.5;
	text-decoration: underline;
}
.topicSubtext{
	font-size: 1.3rem;
	opacity: 0.7;
	color: #040201;
	margin-bottom: 100px;
}
.lastContent{
	-webkit-box-shadow: inset 0 -3px 10px 0 rgba(44, 40, 40, 1);
	   -moz-box-shadow: inset 0 -3px 10px 0 rgba(44, 40, 40, 1);
	        box-shadow: inset 0 -3px 10px 0 rgba(44, 40, 40, 1);
}
.mapIframe{
	width: 90%;
	height: calc(100vh - 206px - 15em);
	margin-bottom: 5em;
	border-radius: 5px;
	background-image: url(../../assets/images/map.png)!important;
	background-position: center center;
	background-repeat: no-repeat;
}
.footer{
	background-image: url(../../assets/images/zwartevilt.png) !important;
	height: 100px;
	overflow: hidden;
}
.footerContent{
	font-family: 'Ubuntu Condensed', sans-serif;
	opacity: 0.7;
	color: #878787;
}
.footerPt1{
	padding-top: calc(100px/2 - 1.8rem/2);
	font-size: 1.8rem;
}
.footerPt2{
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 0.9rem;
}
.footerLogo{
	height: 1.5rem;
	width: 1.6rem;
	opacity: 0.5;
}
.topArrow{
	height: 45px;
	width: 45px;
	border: solid 2px #878787;
	border-radius: 90px;
	float: right;
}
.topArrow a img{
	padding-top: 3px;
	padding-left: 3px;
}
.arrowWrapper{
	margin-top: 32.5px;
}
.bold{
	font-weight: bold;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    -ms-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
    -ms-transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}


@keyframes hide {
  0% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes hide {
  0% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

@keyframes show {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@-webkit-keyframes show {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes remove {
  0% {
  	height: 60%;
	width: 60%; 
  }
  100% {
    height: 0;
    width: 0;
  }
}
@-webkit-keyframes remove {
  0% {
  	height: 60%;
	width: 60%; 
  }
  100% {
    height: 0;
    width: 0;
  }
}

@keyframes jump {
  0% {
  }
  50%{
  	transform:  translateY(20px);
  }
  100% {
    transform:  none;
  }
}
@-webkit-keyframes jump {
  0% {
  }
  50%{
  	-webkit-transform:  translateY(20px);
  }
  100% {
    -webkit-transform:  none;
}
