/*
Theme Name: Autonomieenwturf
Theme URL: https://autonomieentwurf.de
Author: Bjoern Hoeller
Author URL: bjoernhoeller.de
Description: Autonomieentwurf Webdesign 2019
Version: 1.0.0
License: GNU GEneral Public License c2 or later
*/

@import url('https://fonts.googleapis.com/css?family=Noto+Serif&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap');

html, body {
	font-family: 'Libre Baskerville', serif;
    padding: 0;
    margin: 0;
	background: #fcfcfc;
    font-size: 24px;
	font-weight: 300;
	overflow-x: hidden;
}
body::-webkit-scrollbar {
    width: 14px;
}
body::-webkit-scrollbar-thumb {
  background-color: #efefef;
  outline: 1px solid #878787;
}
a {
text-decoration: none;
color: #801515;
cursor: pointer;
transition: color 0.3s;
}
a:hover {
	color: #B60500;
}
article {
	
}
article p {padding-bottom: 25px;}

.main {margin-left: 0; transition: all 0.5s;}
.mainopen {margin-left: 300px;}

/* ### HEADER ### */
.balken {width: 100%; height: 50px; position: absolute; top: 0; left: 0; background: #B60500;}
.head {font-family: 'Libre Baskerville', serif; background: #B60500; padding: 50px 0 0 0; border-bottom: 3px solid #121212;}
.name {background: #B60500; margin: 0; padding: 0; text-align: center; line-height: 1; padding: 0 0 55px 0;}
.name h1 {color: #121212; font-size: 45px; letter-spacing: 3px; margin: 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); text-transform: uppercase;}

.headermobile {position: fixed; top: 0; transition: all 0.5s; margin-left: 0; padding: 25px 0 0 25px; cursor: pointer; color: #101010;}
.headermobileopen {margin-left: 300px;}
#labyrinth-button {background: none; -webkit-filter: grayscale(1) contrast(3); filter: grayscale(1) contrast(3); transition: filter 1s, transform 1s; z-index: 10000;}
.labyrinth-open {background: none; transform: rotate(180deg); -webkit-transform: rotate(180deg);}


/* ### SIDEBAR MENU ### */
.sidebar {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #101010; overflow-x: hidden; transition: 0.5s; padding-top: 45px;}
.sidebar ul {list-style: none; padding: 0; margin: 0;}
.sidebar li {display: block;
	margin: 17px 0 0 30px;
	text-align: left;	
	font: 700 27px 'Libre Baskerville';
	letter-spacing: 2px;}
.sidebar a {
	color: #515151;
	transition: color 0.3s;
}
.sidebar a:hover {color: #f1f1f1;}
.menu-item {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  overflow: hidden;
}
.menu-item:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #B60500;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.menu-item:hover:before, .menu-item:focus:before, .menu-item:active:before {
  right: 0;
}
.opensidebar {width: 300px;}

/* ### CONTENT ### */
.content {font-size: 18px; transition: all 0.5s; padding: 50px 250px 80px 250px; min-height: 400px; margin: 0 !important;}
.content p {margin: 14px 0 0 0 ;}
.content img {width: 300px; height: auto;}
.element {width: 100%; margin: 10px 0 40px 0;}
.element.left {text-align: left;}
.element.center {text-align: center;}
.element b {font-weight: 800;}
.element u {text-decoration-color: #B60500; font-size: 18px;}
.spacing10 {width: 100%; height: 10px;}
.spacing15 {width: 100%; height: 15px;}

.impressum {font-size: 16px;}

/* ### ZITATE ### */
.quote {font-size: 18px; transition: all 0.5s;}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
blockquote {
  text-align: center;
  font-size: 21px;
  width: 60%;
  margin: 30px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #333333;
  padding: 20px 30px 20px 30px;
  border-left:5px solid #930400;
  line-height:1.6;
  position: relative;
  background: #EDEDED;
}
blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#930400;
  font-size:3em;
  position: absolute;
  left: 8px;
  top:-8px;
}
blockquote::after{
  content: '';
}
blockquote cite{
  display:block;
  color:#222222;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}
blockquote a {
	color: #801515;
	transition: color 0.3s;
}
blockquote a:hover {
	color: #B60500;
}

/* ### FOOTER ### */
.footer {margin: 0 120px 0 120px; padding: 15px 0 15px 0; text-align: center; border-top: 2px solid #000;}
.footer p {line-height: 0.5; font-size: 17px; color: #121212;}
.footer p:nth-child(2) {font-size: 13px; padding: 25px 0 0 0; opacity: 0.7;}



/* ################################################################################# */
/* Tablet Mediaquerie */
/* ################################################################################# */

@media (max-width: 1200px) {
	
	html, body {
	font-family: 'Libre Baskerville', serif;
    padding: 0;
    margin: 0;
	background: #fcfcfc;
    font-size: 24px;
	font-weight: 300;
	overflow-x: hidden;
}
body::-webkit-scrollbar {
    width: 14px;
}
body::-webkit-scrollbar-thumb {
  background-color: #efefef;
  outline: 1px solid #dcdcdc;
}
a {
text-decoration: none;
color: #801515;
cursor: pointer;
transition: color 0.3s;
}
a:hover {
	color: #801515;
}
article {
	
}
article p {padding-bottom: 25px;}

.main {margin-left: 0; transition: all 0.5s;}
.mainopen {margin-left: 300px;}

/* ### HEADER ### */
.head {font-family: 'Libre Baskerville', serif; background: #B60500; padding: 50px 0 0 0; border-bottom: 3px solid #121212;}
.name {background: #B60500; margin: 0; padding: 0; text-align: center; line-height: 1; padding: 0 0 55px 0;}
.name h1 {color: #121212; font-size: 34px; letter-spacing: 3px; margin: 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); text-transform: uppercase;}

.headermobile {position: fixed; top: 0; transition: all 0.5s; margin-left: 0; padding: 25px 0 0 25px; cursor: pointer; color: #101010;}
.headermobileopen {margin-left: 300px;}
#labyrinth-button {background: none; -webkit-filter: grayscale(1) contrast(3); filter: grayscale(1) contrast(3); transition: filter 1s, transform 1s; z-index: 10000;}
.labyrinth-open {background: none; transform: rotate(180deg); -webkit-transform: rotate(180deg);}


/* ### SIDEBAR MENU ### */
.sidebar {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #101010; overflow-x: hidden; transition: 0.5s; padding-top: 45px;}
.sidebar ul {list-style: none; padding: 0; margin: 0;}
.sidebar li {display: block;
	margin: 17px 0 0 30px;
	text-align: left;	
	font: 700 27px 'Libre Baskerville';
	letter-spacing: 2px;}
.sidebar a {
	color: #515151;
	transition: color 0.3s;
}
.sidebar a:hover {color: #f1f1f1;}
.menu-item {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  overflow: hidden;
}
.menu-item:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #B60500;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.menu-item:hover:before, .menu-item:focus:before, .menu-item:active:before {
  right: 0;
}
.opensidebar {width: 300px;}

/* ### CONTENT ### */
.content {font-size: 18px; transition: all 0.5s; padding: 50px 120px 80px 120px; min-height: 400px; margin: 0 !important;}
.content p {margin: 14px 0 0 0 ;}
.content img {width: 300px; height: auto;}
.element {width: 100%; margin: 10px 0 40px 0;}
.element.left {text-align: left;}
.element.center {text-align: center;}
.element b {font-weight: 800;}
.element u {text-decoration-color: #B60500; font-size: 18px;}

.impressum {font-size: 16px;}

/* ### ZITATE ### */
.quote {font-size: 18px; transition: all 0.5s;}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
blockquote {
  text-align: center;
  font-size: 21px;
  width: 60%;
  margin: 30px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #333333;
  padding: 20px 30px 20px 30px;
  border-left:5px solid #930400;
  line-height:1.6;
  position: relative;
  background: #EDEDED;
}
blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#930400;
  font-size:3em;
  position: absolute;
  left: 8px;
  top:-8px;
}
blockquote::after{
  content: '';
}
blockquote cite{
  display:block;
  color:#222222;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}
blockquote a {
	color: #801515;
	transition: color 0.3s;
}
blockquote a:hover {
	color: #B60500;
}

/* ### FOOTER ### */
.footer {margin: 0 120px 0 120px; padding: 15px 0 15px 0; text-align: center; border-top: 2px solid #000;}
.footer p {line-height: 0.5; font-size: 17px; color: #121212;}
.footer p:nth-child(2) {font-size: 13px; padding: 25px 0 0 0; opacity: 0.7;}
	
}


/* ################################################################################# */
/* Zwischenstufe Mediaquerie */
/* ################################################################################# */

@media (max-width: 1000px) {
	.name h1 {color: #121212; font-size: 26px; letter-spacing: 3px; margin: 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); text-transform: uppercase;}
}


/* ################################################################################# */
/* Smartphone Mediaquerie */
/* ################################################################################# */

@media (max-width: 800px) {
	
	html, body {
	font-family: 'Libre Baskerville', serif;
    padding: 0;
    margin: 0;
	background: #fcfcfc;
    font-size: 24px;
	font-weight: 300;
	overflow-x: hidden;
}
body::-webkit-scrollbar {
    width: 14px;
}
body::-webkit-scrollbar-thumb {
  background-color: #efefef;
  outline: 1px solid #dcdcdc;
}
a {
text-decoration: none;
color: #801515;
cursor: pointer;
transition: color 0.3s;
}
a:hover {
	color: #801515;
}
article {
	
}
article p {padding-bottom: 25px;}

.main {margin-left: 0; transition: all 0.5s;}
.mainopen {margin-left: 0;}

/* ### HEADER ### */
.head {font-family: 'Libre Baskerville', serif; background: #B60500; padding: 90px 0 0 0; border-bottom: 3px solid #121212;}
.name {background: #B60500; margin: 0; padding: 0; text-align: center; line-height: 1; padding: 0 0 55px 0;}
.name h1 {color: #121212; font-size: 22px; letter-spacing: 3px; margin: 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); text-transform: uppercase;}

.headermobile {z-index: 1000000; position: fixed; top: 0; transition: all 0.5s; margin-left: 0; padding: 15px 0 0 15px; cursor: pointer; color: #101010;}
.headermobileopen {margin-left: 0;}
#labyrinth-button {background: none; width: 50px; height: 50px; z-index: 1000000; -webkit-filter: grayscale(1) contrast(3); filter: grayscale(1) contrast(3); transition: filter 1s, transform 1s, background 0.5s; z-index: 10000;}
.labyrinth-open {transform: rotate(180deg); -webkit-transform: rotate(180deg); -webkit-filter: grayscale(0) contrast(3); filter: grayscale(0) contrast(3) !important; background: none !important;}


/* ### SIDEBAR MENU ### */
.sidebar {height: 0vh; width: 0vw; position: fixed; z-index: 1; top: 0; left: 0; background-color: #101010; overflow-x: hidden; overflow-y: hidden; transition: 0.5s; padding-top: 80px;}
.sidebar ul {list-style: none; padding: 0; margin: 0;}
.sidebar li {display: block;
	margin: 12px 0 0 80px;
	text-align: left;	
	font: 700 24px 'Libre Baskerville';
	letter-spacing: 2px;}
.sidebar a {
	color: #515151;
	transition: color 0.3s;
}
.sidebar a:hover {color: #f1f1f1;}
.menu-item {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  overflow: hidden;
}
.menu-item:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #B60500;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.menu-item:hover:before, .menu-item:focus:before, .menu-item:active:before {
  right: 0;
}
.opensidebar {height: 100vh; width: 100vw; overflow-x: hidden; overflow-y: hidden;}

/* ### CONTENT ### */
.content {font-size: 16px; transition: all 0.5s; padding: 50px 20px 80px 20px; min-height: 400px; margin: 0 !important; word-wrap: break-word; overflow-wrap: break-word;}
.content p {margin: 14px 0 0 0 ;}
.content img {width: 250px; height: auto;}
.element {width: 100%; margin: 10px 0 40px 0;}
.element.left {text-align: left;}
.element.center {text-align: center;}
.element b {font-weight: 800;}
.element u {text-decoration-color: #B60500; font-size: 18px;}

.impressum {font-size: 16px;}

/* ### ZITATE ### */
.quote {font-size: 18px; transition: all 0.5s;}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
blockquote {
  text-align: center;
  font-size: 18px;
  width: 80%;
  margin: 30px auto;
  font-family:Open Sans;
  font-style:italic;
  color: #333333;
  padding: 20px 30px 20px 30px;
  border-left:5px solid #930400;
  line-height:1.6;
  position: relative;
  background: #EDEDED;
}
blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#930400;
  font-size:3em;
  position: absolute;
  left: 8px;
  top:-8px;
}
blockquote::after{
  content: '';
}
blockquote cite{
  display:block;
  color:#222222;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}
blockquote a {
	color: #801515;
	transition: color 0.3s;
}
blockquote a:hover {
	color: #B60500;
}

/* ### FOOTER ### */
.footer {margin: 0 40px 0 40px; padding: 15px 0 15px 0; text-align: center; border-top: 2px solid #000;}
.footer p {line-height: 0.5; font-size: 17px; color: #121212;}
.footer p:nth-child(2) {font-size: 13px; padding: 25px 0 0 0; opacity: 0.7;}
	
}