@font-face {
    font-family: 'OldNewspaper';
    src:url('../font/OldNewspaperTypes.woff') format('woff'),
        url('../font/OldNewspaperTypes.svg#OldNewspaper') format('svg'),
        url('../font/OldNewspaperTypes.eot'),
        url('../font/OldNewspaperTypes.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
    }

html {
	height: 100%;
	width: 100%;
	justify-content: center;	
	align-items: flex-start;
  font-family: OldNewspaper,verdana,sans serif;
  hyphens: auto;
  
  /* Browserunterstützung prüfen */
    -webkit-hyphens: auto;
    -ms-hyphenate-limit-chars: 5 4 4;
      -webkit-hyphenate-limit-chars: 5 4 4;
  hyphenate-limit-chars: 5 4 4;
  hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-lines: 2;
        -ms-hyphenate-limit-lines: 2;
}


#container
{
display: none; 
padding: 2%;
 }

#svg-container{
   -webkit-filter: drop-shadow( 5px 5px 5px #c1c1c1 ); 
   filter: drop-shadow( 5px 5px 5px #c1c1c1 );

}
#close_s, #arrow_d,  #arrow_u, #arrow_l,  #arrow_r
{
 visibility: hidden;
  opacity: 0;
}

#title_s
{
 visibility: visible;
}
  
#author_s, #contact_s, #books_s, #inspiration_s
{
 visibility: hidden;
 }   

#author_t, #contact_t, #books_t, #inspiration_t, #title_t, #follow_t  {
    fill-opacity: 0;
  /*visibility: hidden; */
}

#contact_b  {
    fill-opacity: 1;
  visibility: visible; 
   fill: white;
}
 
.menu {
	font-size: 48px;
 text-decoration: underline;
   fill: #585858;
}
.menu_i, .menu_f {
	font-size: 30px;
 text-decoration: underline;
    fill: #585858;
	font-weight: normal;
}
a:link, a:visited, a:hover, a:active {
	color: black;
  cursor: pointer;
  text-decoration: underline;
    font-weight: bold;
}

.tcontent_author {
	font-size: 36px;
  text-align: left;
    color: #585858;
}


.tcontent_inspiration {
	font-size: 32px;
    text-align: left;
      fill: #585858;
 /*  transform:rotate(-1.5deg);  */
}

.tcontent_contact {
	font-size: 32px;
  text-align: justify;
  color: #585858;
    fill: #585858;
}

.tcontent_books {
	font-size: 36px;
    font-weight: bold;
      fill: #585858;
}

.subtitle {
	font-size: 60px;
  font-weight: bold;
    fill: #585858;
}

 
 @media screen and (orientation : landscape)  
  {
 html
 {
 	display: flex;
  }
  }

   @media screen and (min-device-height: 1080px) and (orientation : landscape) 
{
/*html {
	align-items: center;
}    */         
 #container {
 width: 885px;   /*648*/
} 
} 
 @media screen and (max-device-height: 1080px) and (orientation : landscape) 
{
 #container {
 width: 860px;    /*648*/
} 
} 

  @media screen and (max-device-height: 960px) and (orientation : landscape) 
{
 #container {
 width: 895px;    /*672*/
} 
} 
  @media screen and (max-device-height: 800px) and (orientation : landscape) 
{
 #container {
 width: 660px;    /*640*/
} 
}   

 @media screen and (max-device-height: 640px) and (orientation : landscape) 
{
 #container {
  width: 500px;  /*576*/
}     
} 

 @media screen and (orientation : portrait)
{
  #container {
 width: 96%;
}  
  }  

  /*nonsvg*/
  #nonsvgcontainer
 {
 display: none;
 text-align: center;
  min-height: 30px;
  width: 100%;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 24px;
    font-weight: bold;
 }
   #nonsvgimph
 {
 display: none;
 text-align: center;
  min-height: 30px;
  width: 100%;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 24px;
  padding-top: 20px;
    font-weight: bold;
 }
   #nonsvgimp
 {
 display: none;
 text-align: center;
  min-height: 30px;
  width: 100%;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 18px;
  padding-top: 20px;
 }
 
   #nonsvgimplink
 {
 display: none;
 text-align: center;
  min-height: 30px;
  width: 100%;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 18px;
  text-decoration: underline;
  padding-top: 20px;
    font-weight: bold;
 }

  /*noscript*/
  #nojsbox
  {
  display: block;
 text-align: center;
  width: 100%; 
  }

  #nojs
 {
 display: block;
 text-align: left;
  height: 300px;
  width: 320px;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 24px;
  margin: 0px auto;
    font-weight: bold;
 }
 
 
#nojs p {
  white-space: nowrap;
  overflow: hidden;
}
#nojs p:nth-child(1) {
  width: 100%;  
  -webkit-animation: type 2s steps(22, end);
  animation: type 2s steps(22, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#nojs p:nth-child(2) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type2 2s steps(22, end);
  animation: type2 2s steps(22, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#nojs p:nth-child(3) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type3 2s steps(21, end);
  animation: type3 2s steps(21, end);
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#nojs p:nth-child(4) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type4 2s steps(23, end);
  animation: type4 2s steps(23, end);
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#nojs p:nth-child(5) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type5 2s steps(23, end), blink .6s step-end infinite alternate;
  animation: type5 2s steps(23, end), blink .6s step-end infinite alternate;
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
   border-right: .1em solid black; 
  }
 99.9% {
    border-right: .1em solid black;
  }  
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
   border-right: .1em solid black;  
  }
  99.9% {
    border-right: .1em solid black;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
    border-right: .1em solid black;    
  }
  1% {
    opacity: 1;
    border-right: .1em solid black;    
  }
  99.9% {
    border-right: .1em solid black;
  }  
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
     border-right: .1em solid black;
  }
  1% {
    opacity: 1;
     border-right: .1em solid black;
  }
  99.9% {
    border-right: .1em solid black;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
     border-right: .1em solid black;
  }
  1% {
    opacity: 1;
     border-right: .1em solid black;
  }
  99.9% {
    border-right: .1em solid black;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
     border-right: .1em solid black;
  }
  1% {
    opacity: 1;
     border-right: .1em solid black;
  }
  99.9% {
    border-right: .1em solid black;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type4 {
  0% {
    width: 0;
     border-right: .1em solid black;
  }
  1% {
    opacity: 1;
     border-right: .1em solid black;
  }
  99.9% {
    border-right: .1em solid black;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type4 {
  0% {
    width: 0;
     border-right: .1em solid black;
  }
  1% {
    opacity: 1;
     border-right: .1em solid black;
  }
  99.9% {
    border-right: .1em solid black;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type5 {
  0% {
    width: 0;
     border-right: .1em solid black;
  }
  1% {
    opacity: 1;
     border-right: .1em solid black;
  }  
  99.9% {
  //  opacity: 1;
     border-right: .1em solid black;
  }
  100% {
    opacity: 1; 
     border-right: .1em solid black;
  }
}

@-webkit-keyframes type5 {
  0% {
    width: 0;
     border-right: .1em solid black;
  }
    1% {
    opacity: 1;
     border-right: .1em solid black;
  }
  99.9% {
   // opacity: 1;
     border-right: .1em solid black;
  }
  100% {
    opacity: 1;
     border-right: .1em solid black;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}
    /*noscriptim*/
  #nojsimbox
  {
  display: block;
 text-align: center;
  width: 100%; 
  }
    
    #nojsim
 {
 display: block;
 text-align: left;
  height: 300px;
  width: 320px;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 24px;
  margin: 0px auto;
    font-weight: bold;
 }
 
     #imp
 {
 display: block;
 text-align: justify;
  min-height: 300px;
  width: 70%;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 18px;
  margin: 0px auto;
 }
     #imph
 {
 display: block;
 text-align: justify;
  min-height: 30px;
  width: 70%;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 24px;
  margin: 0px auto;
    padding-bottom: 20px;
      font-weight: bold;
 }
  
     #implink
 {
 display: block;
 text-align: left;
  height: 20px;
  width: 320px;
 	font-family: OldNewspaper,verdana,sans serif;
	font-size: 24px;
  margin: 0px auto;
  padding-top: 40px;
    padding-bottom: 20px; 
      font-weight: bold; 
 } 
  @media screen and (orientation : portrait)
{
 
   #nojs, #nojsim
 {
  height: 340px;
  width: 340px;
	font-size: 26px;
 }
     #imp
 {
  width: 90%;
	font-size: 10px;  
 }
     #imph
 {
  width: 90%;
	font-size: 18px;  
 } 
 
 
  }