/*
Theme Name: ThemeBasic3.0
Author: Sissy Mirtl
Description: Basic Theme. 
Version: 3.0
*/


@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700');
@font-face {
	font-family: Astro;
	src: url(img/AstroTry-Regular.ttf);
}

*{margin:0; padding:0;}

body{background-color:rgb(240,240,240);font-family: 'Roboto Slab', serif;}	

#nav_container{ top:0; left:0; z-index:100; padding:0 0 0 2%; box-sizing:border-box; display: block; width: 12%; position: absolute;}
#nav_container a, h1 a, h2 a, .postlinks a{text-decoration:none;}
.site_logo{display:block; margin:0.4em 5% 0 0; vertical-align:middle;}
.site_logo a{/**/text-indent:-1000px; display:block; width:100%; height:5rem; margin-top: 0.8em; background:url(../../uploads/2017/11/logoinktest-150x150.png)no-repeat left center; background-size:contain;}
.second_menu {float: right}

#nav_container:hover .first_menu{display: inline-block;}
	

.button {float: right; width: 7%; height: auto; margin-right: 1em}

nav ul{list-style:none;}
nav li{display:block; margin:0 0.8em; position:relative; white-space:nowrap; padding:0.2em; text-align: left;}
/*nav a{color:#333; letter-spacing:1px; text-transform:uppercase;}*/
nav a{color:#fff; letter-spacing:1px; font-size: 1em;}

nav li:hover{color:rgb(204,51,153); }	
nav li:hover>a, nav a.active, .current-menu-item a, .home .homebutton a{color:rgb(204,51,153);}
nav li:hover .sub-menu{display:block;}

.first_menu{display:none; vertical-align:middle; font-size:1.2em;background-color:#272F32; margin-top: 0; padding-top:0.7em; padding-bottom: 0.2em}

.second_menu{position:absolute; top:2em; right:5%; padding:0.6em 1em 0.4em;}
#menu-aboutmenu a {font-size: 1.2em}
#menu-aboutmenu img:hover {}
.second_menu li{display: inline}

.sub-menu{display:none; position:absolute; top:1.5em; left:0; background-color:#fff; font-size:0.9em; padding:0 0.6em;}

#site_header{background-color:#272F32; margin:0 0 2em; padding:1.8em 10%;}
main{width:80%; max-width:1240px; min-height:35em; margin:3em auto 10em;}

article{padding:0; margin:auto; max-width:55em;}
article a:hover {color:rgb(204,51,153);}
.post_thumb { border:solid 1rem #FFFFFF; box-sizing:border-box; margin:0 0 5em;max-height: 25vw;overflow: hidden; transition: all 0.3s ease-in-out 0s;}
.post_thumb:hover {border-color:#272F32;}
.entry_content{position:relative; box-sizing:border-box; padding:2em 0 1em;}

h2{font-weight:700; margin-bottom:2em;}
h3{font-weight:700; margin-bottom:1em;}
h4{font-weight:400; margin-bottom:1em; margin-top: -3em;}
h1{font-size:3em; line-height:100%; font-weight:400; /*letter-spacing:1em;*/ color:#fff; margin:0; text-align: center;/*font-family: 'Astro', serif;*/}
h2{/*display:inline-block;*/ font-size:2em; letter-spacing:0.04em; padding-bottom:0.2em; border-bottom:#000 solid 0.06em; text-align: center;}
h3{ font-size:1.2em; line-height:1.5em; text-align: center}
p{font-size:1em; line-height:156%; padding-bottom:1.4em; box-sizing:border-box; text-align: left;}
a{color:#656565; text-decoration: none;}

.notes {font-size: 0.9em; font-weight: 300}

figure{width:100%; margin:2em auto;}
figure img, .post_thumb img{width:100%; height:auto; vertical-align:bottom;}
.postlinksleft{width:25%; position: fixed; bottom: 4em; top: 8em; left:0%;}
.postlinksright{width:25%; position: fixed; bottom: 4em; top: 8em; right: 0%;}
.postlinks a{font-size:1.1em; display:block; width:100%; white-space:nowrap;}
.prev{ width: 20em; position: absolute; bottom: 0;}
.next{ width: 20em; position: absolute; bottom: 0; right: 0;}

#name_keeper{position: absolute; left: 9%; top: 2%; padding-top: 0.8em; color: white; font-size: 1.8em}

footer{ border-top:solid 0.1em #000; border-bottom:solid 0.1em #000; color:#666; padding:1.2em 2em;}

.widget-title{ font-weight:normal; margin:2em 4% 0.5em; font-size:1.2em; border-bottom:solid #999 0.1em; text-transform:uppercase;}
.footer_widgets a{font-size:0.8em; color:#ccc;}

/* Clearing für Boxen, in denen gefloatet wird! */
.flgroup:before,
.flgroup:after {
	content:"";
	display:table;
	clear:both;
}

/* Meta-Slide */
.metaslider{
	margin: 5em 0;
	background-color: transparent !important;
}

#Dragon { width:80%; height:auto;opacity: 0;float: left; position: absolute; left: 0%;}
.prev:hover + #Dragon {opacity: 1;}
.prev:hover + #Dragon .cls-1{
  stroke:black;
  stroke-width:3;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill:none;
  animation: dash 5s linear forwards;
}

#Deer { width:80%; height:auto;opacity: 0;float: right; position: absolute; right: 0%; top: 25%}
.next:hover + #Deer {opacity: 1;}
.next:hover + #Deer .cls-1{
  stroke:black;
  stroke-width:6;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill:none;
  animation: dash 5s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.poem {transition: all 0.5s ease-in-out 0s;transform: rotate(0deg);}
.poem:hover {
    cursor: default;
    transform: rotate(180deg);
}


.videoFrame {
  position: relative;
  height: 0;
  overflow: hidden;
	padding-bottom: 56.25%;
	margin: 2em 0;
}

.videoFrame iframe {
position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.smallcontainer {
	margin: 2em auto;
	width: 30%;
	
}

.largecontainer {
	margin: 2em auto;
	width: 85%;
	
}

.leftbound {
	text-align: left;
}




@media only screen and (max-width:60em) { 
	#nav_container{position:relative;}
	
	.site_logo{display:block; margin:0; text-align:center;}
	.first_menu, .second_menu{display:block;}
	.first_menu {font-size:1em;}
	.first_menu li{margin-left:0em;}
	.second_menu{font-size:0.8em;}
	#site_header{margin-top:0;}
	main{margin:2em auto;}
	
}

@media only screen and (max-width:44em) { 
	#nav_container{text-align:center;}
	.site_logo a{margin:0 auto;}
	nav li{display:block; margin:1em 0;}
	.first_menu, .second_menu {margin-left:0;}
	.second_menu{position:static; border-top:#000 0.08em solid; padding-left:1em;}
	.sub-menu{position:static;}
	h1{font-size:1.8em; text-align:center;}
	h2{font-size:1.6em; text-align:center;}
	main{width:96%;}
	article{padding:0; margin-bottom:1.6em;}
	h2{padding:0.4em;}
	figure{width:100%;}
	#Dragon, #Deer {visibility: hidden;}
	.postlinks {position: relative;}
}