/*  w4y css 2018*/

/* color-theme
türkis hell    #5AEDF7
türkis dunkel  #4FC0CE

hellblau     #519ef7
hellviolett  #f257ef
dunkeklblau  #0c519b

wolfhell    #cc804e  ,#f7ab7b
wolfdunkel  #1c0504

flamingo  #F877B3
cotinga   #49DAF1


themes 
hellblau hellblau
hellblau hellviolett
wolfhell wolfdunkel
flamingo cotinga
 
*/


/* ------------------------------------------------- */
/*  >>HTML TAGS  */
::-moz-selection {
    background: yellow;
    text-shadow: none;
}

::selection {
    background: yellow;
    text-shadow: none;
}



hr {width:95%;margin-left:2%;}
body {
  overflow: hidden;  
  font-size: 1.2rem;
  line-height: 1.2;
  color:#000;
  background-color:#fff;
  font-family: "ForumRegular", arial;

  width:99%;
  height:99%;

}

#bg1 {  
  position: fixed;
  z-index: -20;
  width:100%;
  height:99%;
  background-image: url("img/pattern.trans.png");
  opacity: 0.64;
  }

a {
  color:black;
  margin-right:0.2em;
  text-decoration: none;
}


/* ------------------------------------------------- */
/*  >>CLASSES  .  */

.nodisplay {
	 display:none;
}

.icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
}

#content {
  position:fixed;
  z-index: 1;
  top:2.9rem;
  left:1vw;
  width:98.8vw;
  bottom:3rem;
  overflow: auto;
  font-size: 2.2rem;
  animation: 0.75s ease-out 0s 1 slideInFromBottom;

}

#content h1 {
  margin-top: 10vh;
  margin-bottom: 20vh;
  width:50rem;
  margin-left:15vw;	
  font-weight:bold;
  text-align:center;
}

#content p {
  width:50rem;
  margin-left:15vw;
  font-size: 0.7em;	
}

#content h2 {
  width:50rem;
  margin-left:15vw;
  margin-top:1em;
  font-size: 0.9em;	
}
.zitat, .gebet {
  margin-top: 10vh;
  margin-bottom: 60vh;
  width:50rem;
  margin-left:15vw;
  }

  
.znr,.ztext, .zquelle , .gnr, .gtitel, .gtext, .gquelle{
  text-align:center;
}

.znr,.gnr {  font-size:1.2rem; color:#555; margin-bottom:1rem;}
.zquelle,.gquelle {  font-size:1.4rem;;color:#555;margin-top:1rem;}
.gtitel {font-weight: bold;margin-top:0.3rem;margin-bottom:1.5rem;}


/* ------------------------------------------------- */
/*  >>IDS # */
#profil { 
  color:#111;
  fill:#1a1a1a;
  position:fixed;
  z-index: -1;
  left:-80px;  /* wolf*/
  bottom:2.75rem;
  height:80vh;
  animation: 0.75s ease-out 0s 1 slideInFromLeft;
  opacity:0.95;
}

#profillogo { 
  position:fixed;
  color:#111;
  z-index: 1;
  left:0rem;
  top:0rem;
  height:2.5rem;
  filter: hue-rotate(220deg);
  animation: 0.75s ease-out 0s 1 slideInFromLeft;
  opacity:0.85;
  margin-right:0.3rem;
}

  
#icon-mw-big {  
  position:fixed; 
  top:-60vh;
  z-index:-5; 
  height:250vh; 
  opacity: 0.10;
  animation: 0.75s ease-out 0s 1 slideInFromLeft;
  }

#svgm {stroke:#cc804e; fill: none ;stroke-width:110; stroke-linecap:round ;}
#svgw {stroke:#cc804e; fill: none ;stroke-width:110; stroke-linecap:round;}

#icon-mw-logo {  
  position:fixed; 
  top:0.3rem;
  left: 0.5rem;
  z-index:-5; 
  height:1.9rem;
  width: 2rem;  
  }
  
#icon-mw-logo #svgm{  stroke: white;stroke-linecap:round;}
#icon-mw-logo #svgw{  stroke: white;stroke-linecap:round;}
 
#icon-mw-logo:hover #svgm{  stroke: yellow;stroke-linecap:round;}
#icon-mw-logo:hover #svgw{  stroke: yellow;stroke-linecap:round;}

#navtop
  {
  position: fixed;
  z-index: 2;
  top:0vh;
  left:0vw;
  height:2.7rem;
  width:100vw;
  font-size: 0.9rem;
  background-color: #cc804e;
  background: linear-gradient(to bottom, #f7ab7b , #cc804e);
  box-shadow: 3px 5px 5px #777;
  color:black;
  padding-left: 1rem;


}

#navbottom
  {
  position: fixed;
  z-index: 2;
  bottom:0rem;
  left:0rem;
  height:2.7rem;
  width:100vw;
  font-size: 0.9rem;
  background-color: #cc804e;  /*hellbraun */
  background: linear-gradient(to bottom, #f7ab7b , #cc804e);
  box-shadow: 3px -3px 3px #777;
  animation: 0.75s ease-out 0s 1 slideInFromBottom;
  color:white;
}

#navtop #left {
  position: fixed;
  top: 0vh;
  left:1.7rem;
}

#navtop #center {
  position: fixed;
  top: 0vh;
  left:20vw;
}

#navtop #right {
  position: fixed;
  top: 0vh;
  right:2vw;
}

#navbottom #left {
  position: fixed;
  bottom: 0vh;
  left:0.5rem;
}

#navbottom #center {
  position: fixed;
  bottom: 0vh;
  left:20vw;
}

#navbottom #right {
  position: fixed;
  bottom: 0vh;
  right:2vw;
}

  
.mitem {
    line-height: 40px;
    padding: 2px 0px;
    font-size: 1.3em;
    display:inline-block;
    vertical-align:middle;
	margin-right:0.5em;
	color:#fff;
}

.mitem span {margin-left:0.3rem;}
.mitem span .optional {margin-left:0.0rem;}
.mitem:hover {cursor:pointer;}
.mitem:hover i,  .mitem:hover span {color:yellow; }
.mitem:hover  #svgm{	stroke: yellow;stroke-linecap:round; }
.mitem:hover  #svgw{	stroke: yellow;stroke-linecap:round; }

.mitem:active i, .mitem:active span{    color:yellow;}	
.mitem i {
    margin-left:0.3em;
    font-size: 1.4em;
    height: 1.4.em;
    vertical-align:middle;
}


#secondline a:hover{	color:red;}
 
#cover {
  position:absolute;
  z-index: 1;
  right:7rem;
  top:47vh;
  animation: 0.75s ease-out 0s 1 slideInFromRight;
}
	
#cover #firstline {
	display: inline-block;
	margin:0rem;
	padding:0rem;
    padding-left: 1.1rem; 
    letter-spacing: 1.7rem; 
	line-height: 2.8rem;
    font-size: 2.9rem;
    font-family: "ForumRegular", arial;
    transform-style: preserve-3d;
    transform-origin: left center;
	border-bottom: 1px solid #333;
	}


#cover #secondline  {
    padding-top: 0.3rem; 
    letter-spacing: 0.15rem;
}
  


  
@keyframes flipFromBehind {
  0%      {    transform:  rotateY( -90deg ); }
  100% {    transform:  rotateY(0deg);  }
}

@keyframes slideInFromLeft {
  0%      {    transform: translateX(-100vw);  }
  100% {    transform: translateX(0);  }
}

@keyframes slideInFromRight {
  0%      {    transform: translateX(100vw);  }
  100% {    transform: translateX(0);  }
}

@keyframes slideInFromTop {
  0%      {    transform: translateY(-800%);  }
  100% {    transform: translateY(0);  }
}

@keyframes slideInFromBottom {
  0%      {    transform: translateY(150vh);  }
  100% {    transform: translateY(0);  }
}

@media screen and (max-width:970px) {
    #content { font-size: 2.0rem; }
	#left  .optional {display:none;}
	#right .optional {display:none;}
	#profil {    opacity:0.25; }
	#navtop #left .optional {display:none;}
	#navtop #center {left:3rem;}
	
    .zitat, .gebet,#content h1,#content h2,#content p {    width:40rem;    margin-left:10vw;  }
}

@media screen and (max-width:720px) {
  body {font-size:1rem;}
  #content { font-size: 1.7rem; }
  .optional {display:none;}
  #h-center {     position: fixed; top:0 ; left: 20vw; }
  #cover { right:1rem;}
  #cover #firstline {font-size:1.8rem;   letter-spacing: 1.2rem; }

  .zitat, .gebet, #content h1,#content h2,#content p {    width:70vw;    margin-left:5vw;  }

  }
  
@media print {
  #navtop,#navbottom {display:none;}
  body{font-size:14px;}
  }