/*General Style*/
body {
    background:#DCDCDC;
    background-image: url(pics/background.png);
    font-size:100%;
    margin:0em;
    padding:0em;
    font-family: Helvetica, Arial, sans-serif;
    
    max-width: 90%;
    margin:auto auto;
}
h1 {
    font-size:2.0em;
    line-height: 2.5em;
    font-weight: 100;
    color:black;
    margin:0em;
}
h2 {
    font-size:1.5em;
    line-height: 1.5em;
    font-weight: 100;
    color:black;
    margin:0em;
    padding:0.75em;
    text-align:center;
}
p {
    line-height: :1.25em;
    font-weight: 100;
    color:black;
    margin:0em;
    padding:1.25em;
    text-align:justify;    
}

ul {
    margin:0em;
    padding:0em;
}

li {
    list-style:square;
    font-weight: 100;
    color:black;
    margin:0em;
    padding:1.25em;
    margin:0.313em 0em 0.313em 0em;  
}

img {
    width:90%;
    height: auto;
    max-width: 100%;
}

a {
    text-decoration: none;
}


/* On Top Bar */
#menubar {
    display:block;
    position: absolute;
    width: 90%;
    background-color:rgba(0, 0, 0, 0.1);
}
#menubar ul {
    display: block;
    width: 2em;
    padding: 0.3em;
}
#menubar ul li {
    display:inline;
}

/* Header */
header {
    display: block;
    background:url(pics/bg1.png);
    height: 220px;
}
#skull {
    width: 220px;
    margin: auto auto;
    padding-top: 1.1em;
}

/* Navigation */
nav {
    display: block;
    height: 2.5em;    
    background: #2F2C2C;
    text-align: center;
    border-radius: 0px 0px 10px 10px; 
}
nav ul {
    display: block;    
       
}
nav ul li {
    display: inline;
    margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
    color:white;
    font-size: 1.125em;
    line-height: 2.5em;
    padding:0.563em 0.938em 0.375em 0.983em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}
nav ul li a:hover {
    background: :#DBD9D8;
    border-bottom: 0.188em solid red;
}

/* Content Area */
#main {
    display:block;
    width:90%;	
    margin:1.25em auto;
    padding:0em;
}
#main article {
    display:inline-block;
    width:65.3%;
    background:#FFFFFF;
    vertical-align: top;
    margin:0em;
    padding:0em;
    text-align:center;
    border-radius: 10px;
}
#main article1 {
    display:inline-block;
    width:100%;
    background:#FFFFFF;
    vertical-align: top;
    margin:auto;
    padding:auto;
    text-align:center;
    border-radius: 10px;
}
#main article2 {
    display:inline-block;
    width:58%;
    background:#FFFFFF;
    vertical-align: top;
    margin:auto;
    padding:auto;
    text-align:center;
    border-radius: 10px;
}
#main article img {
    width:350px;
    height:auto;
    max-width: 90%;
    box-shadow:0px 0px 10px -5px #4c4948;
    border-radius: 5px;
}
#main article2 img {
    width:100%;
    height:auto;
    max-width: 90%;
}
#main article p img {
    width:25px; 
    box-shadow:0px 0px 0px 0px;
    border-radius: 2px;      
}
#main aside {
    display:inline-block;
    width: 30.6%;
    margin-left:3%;
    padding:0em;
    vertical-align:top;
}
#main aside1 {
    display:inline-block;
    width: 39%;
    margin-left:3%;
    padding:0em;
    vertical-align:top;
}
#main aside section {
    margin-bottom:1.563em;
    background:#FFFFFF;
    border-radius: 10px;
    border-bottom: 0.188em solid red;
}
#main aside1 section {
    margin-bottom:1.563em;
    background:#FFFFFF;
    border-radius: 10px;
    border-bottom: 0.188em solid red;
}
#main aside img {
    width:100%;
    height:auto;    
}
#main article h2 {
    padding:1em 1.8em 1em 1.8em;
}
#main aside section ul {
    padding:0em 1.1em 1.25em 2.5em;
}
#durchstrich {
    text-decoration: line-through;
}

/* footer */
footer {
    display:block;        
    text-align:center;    
}
footer ul {
    display:block;
    width: 90%;
    background:#2F2C2C;
    border-radius: 10px 10px 0px 0px; 
    text-align:center;
    margin:0px auto;
}
footer ul li {
    display:inline;
    font-size:0.9em;
    line-height:2.5em;
    color:white;
    padding:0em 0.8em 0em 0.8em;
}
footer ul li a {
    color:red;
}
footer img { 
    width: 1.8em;
    vertical-align: middle;        
}


/* Back To Top Button */
#back-to-top-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 26px;
  width: 50px;
  height: 50px;
  background-color: red;
  color: white;
  cursor: pointer;
  outline: none;
  border: 3px solid red;
  border-radius: 50%;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-property: background-color, color;
}
#back-to-top-btn:hover, #back-to-top-btn:focus {
  background-color: white;
  color: red;  
}
@media(max-width: 800px) {
  body {
	font-size:90%;
       }
  #back-to-top-btn { font-size: 22px; width: 40px; height: 40px; bottom: 15px; right: 15px; }
}
@media(max-width:600px) {
  #main aside, #main article {
	width:100%;
	display:block;
	margin:0.625em 0em 0.625em 0em;
	}
  #back-to-top-btn { font-size: 18px; width: 32px; height: 32px; bottom: 6px; right: 6px; }
}
@media(min-width:620px) {
    nav.nav {
	display:block !important;
	}
}
@media(max-width:620px) {
    body {
	font-size:80%;
    }
	#menubar ul li a.menubutton {
	display:block;
    }
    nav {
	display:none;
	height:auto;
	}

    nav ul li {
	display:block;
	margin:0.3em 0em 03.em 0em;
    }
}


/* Animations */
.btnEntrance {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: btnEntrance;
}
/* zoomIn */
/* @keyframes btnEntrance { 
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }    
} */

/* fadeInUp */
@keyframes btnEntrance {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.btnExit {
  animation-duration: 0.25s;
  animation-fill-mode: both;  
  animation-name: btnExit;
}
/* zoomOut */
/* @keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
} */

/* fadeOutDown */
@keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}