html {
   height: 100%;
}

body {
    font-family: 'RosesareFF0000', Arial, Helvetica, sans-serif;
    font-size: 8px;
    color: #fff;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	line-height: 11px;
	cursor: url("images/cursor.png"), crosshair;
}

.font {
  font-family: 'RosesareFF0000', Arial, Helvetica, sans-serif;
  font-size: 8px;
  color: #fff;
}

table.master {
	height: 100%; 
	width: 100%;
}

.mapcursor {
	cursor: url("images/pfeil.png") ,crosshair;
	animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.snake {
	opacity: 0.2;
}

.area {
	position: absolute;
}

.snakedemep {
	opacity: 0.6;
}

.logo:hover {
    -webkit-filter: brightness(70%); /* Safari */
    filter: brightness(70%);
}

a:link {text-decoration: none; color: #ffffff; cursor:  url("images/pfeil.png") ,crosshair;}
a:visited {text-decoration: none; color: #ffffff; cursor:  url("images/pfeil.png") ,crosshair;}
a:active {text-decoration: none; color: #ffffff; cursor:  url("images/pfeil.png") ,crosshair;}
a:hover {text-decoration: underline; color: #ffffff; cursor:  url("images/pfeil.png") ,crosshair;}

a[href^="tel"] {
	text-decoration: none;
	cursor: default;
}
@media only screen and (max-device-width: 480px) {
	a[href^="tel"] {
	text-decoration: none;
	cursor: pointer;
  }
}

.hidden {
	display: none;
}

.copyleft {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  display: inline-block;
}

@font-face {
    font-family: RosesareFF0000;
    src: url("font/RosesareFF0000.woff") format("woff");
}


.line-1{
  position: relative;
  top: 50%;  
  width: 25.1em;
  margin: 0 auto;
  border-right: .30em solid #000000;
  font-size: 7px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .10em; 
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.anim-typewriter1{
  animation: typewriter 3s steps(25) 1s 1 normal both,
             blinkTextCursor 500ms steps(25) infinite normal;
}
@keyframes typewriter1{
  from{width: 0;}
  to{width: 25.1em;}
}
@keyframes blinkTextCursor{
  from, to { border-color: transparent }
  50% { border-color: #fff }
}


.line-2{
  position: relative;
  top: 50%;  
  width: 19.3em;
  margin: 0 auto;
  border-right: .30em solid #000000;
  font-size: 7px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .10em; 
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.anim-typewriter2{
  animation: typewriter 3s steps(25) 1s 1 normal both,
             blinkTextCursor 500ms steps(25) infinite normal;
}
@keyframes typewriter2{
  from{width: 0;}
  to{width: 19.3em;}
}
@keyframes blinkTextCursor{
  from, to { border-color: transparent }
  50% { border-color: #fff }
}


.modal1 {
   position: fixed;
   text-align: center;
   padding: 40px 40px 20px 40px;
   max-width: 200px;
   width: 100%;
   border-radius: 5px;
   top: 40%;
   left: 50%;
   color: #fff;
   font-family: RosesareFF0000, Arial, Helvetica, sans-serif;
   font-size: 8px;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   background-color: #3b3736;
   box-shadow: 0px 2px 6px rgba(0,0,0,1);
   visibility: hidden;
   opacity: 0;
   transition: opacity .5s, visibility 0s linear .5s;
   z-index: 1;
}

.modal1:target {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
}

.modal1 .close {
   position: absolute;
   right: 5px;
   top: 5px;
   padding: 6px 6px 0px 0px;
   color: #000;
   transition: color .3s;
   font-size: 2.2em;
   color: #c0c0c0;
   line-height: 0.2;
   font-weight: 700;
}

.modal1 .close:hover {
   color: #fff;
   text-decoration: none;
}

.close-modal1 {
   background-color: rgba(0,0,0,.7);
   cursor: default;
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   opacity: 0;
   visibility: hidden;
   transition: opacity .5s, visibility 0s linear .5s;
}

.modal1:target + .close-modal1 {
   opacity: 1;
   visibility: visible;
   transition-delay: 0s;
}


.modal2 {
   position: fixed;
   text-align: center;
   padding: 40px 40px 20px 40px;
   max-width: 200px;
   width: 100%;
   border-radius: 5px;
   top: 33%;
   left: 50%;
   color: #fff;
   font-family: RosesareFF0000, Arial, Helvetica, sans-serif;
   font-size: 8px;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   background-color: #3b3736;
   box-shadow: 0px 2px 6px rgba(0,0,0,1);
   visibility: hidden;
   opacity: 0;
   transition: opacity .5s, visibility 0s linear .5s;
   z-index: 1;
}

.modal2:target {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
}

.modal2 .close {
   position: absolute;
   right: 5px;
   top: 5px;
   padding: 6px 6px 0px 0px;
   color: #000;
   transition: color .3s;
   font-size: 2.2em;
   color: #c0c0c0;
   line-height: 0.2;
   font-weight: 700;
}

.modal2 .close:hover {
   color: #fff;
   text-decoration: none;
}

.close-modal2 {
   background-color: rgba(0,0,0,.7);
   cursor: default;
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   opacity: 0;
   visibility: hidden;
   transition: opacity .5s, visibility 0s linear .5s;
}

.modal2:target + .close-modal2 {
   opacity: 1;
   visibility: visible;
   transition-delay: 0s;
}