/* FONTS */

/* Cormorant Regular */
@font-face {
  font-family:'Cormorant Garamond';
  src:url(../fonts/CormorantGaramond-Regular.woff2);
}
/* Cormorant Italic */
@font-face {
  font-family:'Cormorant Garamond';
  src:url(../fonts/CormorantGaramond-Italic.woff2);
  font-style:italic;
}
/* Merriweather Light (CSS: font-weight:300) */
@font-face {
  font-family:'Merriweather Sans';
  src:url(../fonts/MerriweatherSans-Light.woff2);
}
/* Merriweather Regular */
@font-face {
  font-family:'Merriweather Sans';
  src:url(../fonts/MerriweatherSans-Regular.woff2);
  font-weight:bold;
}
/* Merriweather Light Italic */
@font-face {
  font-family:'Merriweather Sans';
  src:url(../fonts/MerriweatherSans-LightItalic.woff2);
  font-style:italic;
}
/* Merriweather Regular Italic */
@font-face {
  font-family:'Merriweather Sans';
  src:url(../fonts/MerriweatherSans-Italic.woff2);
  font-weight:bold;
  font-style:italic;
}

/* GENERAL */

* {
  margin:0;
  padding:0;
  border:none;
}
html,body {
  height:100%;
  scroll-behavior:smooth;
}
body {
  background-color:#FFFFFF;
  font-family:'Merriweather Sans',sans-serif;
  font-style:normal;
  font-weight:300;
  letter-spacing:0px;
  line-height:100%;
  text-align:left;
  color:#404040;
}
#base-div,#base-div-start {
  position:relative;
  min-height:100%;
  width:944px;
  margin-left:auto;
  margin-right:auto;
  overflow:visible;
}
main {
  display:block;
  max-width:614px;
  overflow:hidden;
  animation:fadein 1s;
}
header {
  height:47px;
  padding-top:86px;
  margin-bottom:70px;
  border-bottom:1px solid #C4C4C4;
  overflow:hidden;
  background-image:url(../bilder/logo-sub.png);
  background-position:top left;
  background-repeat:no-repeat;
  animation:fadein 10s;
}
footer {
  clear:both;
  height:65px;
  margin-top:90px;
  position:relative;
  z-index:10;
  border-top:1px solid #C4C4C4;
  background-color:#FFFFFF;
  overflow:hidden;
  animation:fadein 10s;
}
nav ul {
  list-style-type:none;
}
nav li {
  float:left;
}
header nav ul {
  width:624px;
  float:right;
}
header nav li {
  padding:10px 0px 21px 40px;
}
header nav li:first-child {
  padding-left:0px;
}
footer nav li {
  padding:21px 0px 10px 52px;
}
footer nav li:first-child  {
  padding-left:0px;
}
#side-nav {
  width:290px;
  position:fixed;
  margin-left:654px;
  padding:10px 0px 0px 20px;
  list-style-type:none;
  line-height:21px;
  overflow:hidden;
  color:#808080;
}
#side-nav li {
  margin-top:5px;
  text-indent:-20px;
}
#side-nav li:first-child {
  margin-top:0px;
}
#side-nav li::first-line {
  line-height:40px;
}
header,footer,#side-nav,.sub-map {
  font-size:14px;
}
main,small {
  font-size:18px;
  line-height:32px;
}
main li,table {
  margin-top:15px;
}
p,blockquote,blockquote span {
  display:block;
}
p,blockquote {
  margin-top:30px;
}
p.img,img.map {
  margin:50px 0px;
  line-height:0px;
}
img.map {
  display:block;
  margin-bottom:0px;
}
section {
  margin-top:40px;
}
section + section {
  margin-top:90px;
}
section h2,blockquote p:first-child,blockquote:first-child,#side-nav + blockquote,.frame:first-child h1,#side-nav + .frame h1 {
  margin-top:0px;
}
h1,h2,h3 {
  margin-top:70px;
  margin-bottom:30px;
  font-family:'Cormorant Garamond',serif;
  font-weight:normal;
  text-align:left;
  color:#000000;
}
h1 {
  font-size:48px;
  line-height:60px;
  font-style:italic;
}
h2 {
  font-size:36px;
  line-height:48px;
}
h3 {
  margin-top:30px;
  margin-bottom:20px;
  font-size:30px;
  line-height:38px;
}
main ul,main ol {
  padding-left:40px;
  list-style-position:outside;
}
main ul {
  list-style-type:disc;
}
main ol {
  list-style-type:decimal;
}
td,th {
  padding-right:15px;
  text-align:left;
  vertical-align:top;
  font-weight:300;
}
td:last-child,th:last-child {
  padding-right:0px;
}
th {
  white-space:nowrap;
}
section tr + tr td,section tr + tr th {
  padding-top:7px;
}
section {
  padding-top:15px;
  border-top:1px solid #C4C4C4;
}
img,iframe {
  border-radius:2px;
  height:auto;
}
img,iframe,.sub-map {
  max-width:100%;
}
table img {
  max-width:240px;
  margin-top:9px;
}
.frame {
  position:relative;
}
.anchor {
  position:absolute;
  top:-30px;
}
section .anchor {
  top:-50px;
}
a[href^='http']::after {
  content:'\002197';
}
a[href*='achtsam-leben-in-leipzig.de']::after {
  content:'';
}
a {
  color:#404040;
  text-decoration:none;
  box-shadow:0 -2px 0 0 #FFD22A inset;
  transition:all 250ms;
}
a:hover {
  box-shadow:0 -5px 0 0 #FFD22A inset;
}
a:active {
  box-shadow:0 -20px 0 0 #FFD22A inset;
}
.elect-let-add span:nth-child(3n+2) {
  display:none;
}
nav a,#side-nav a,.sub-map a {
  font-weight:bold;
  color:#676767;
  transition:color 500ms;
  box-shadow:none;
  content:'';
}
nav a:hover,nav a:active,nav .active-li a,#side-nav a:hover,#side-nav a:active,.sub-map a:hover,.sub-map a:active {
  box-shadow:none;
  color:#801717;
}
strong {
  font-weight:bold;
  color:#000000;
}
em {
  font-style:italic;
}
ins {
  text-decoration:underline;
}
small {
  color:#9A9A9A;
}
.caps {
  letter-spacing:0.5px;
}
blockquote {
  font-family:'Cormorant Garamond',serif;
  font-size:28px;
  font-style:normal;
  quotes:none;
  color:#808080;
  line-height:42px;
}
blockquote small {
  font-family:'Merriweather Sans',sans-serif;
  line-height:42px;
}
blockquote small::before {
  content:'\002014\000020';
}

/* START PAGE */

#base-div-start main {
  background-image:url(../bilder/logo-start.png);
  background-position:top center;
  background-repeat:no-repeat;
  padding-top:145px;
}
#base-div-start header {
  margin-bottom:90px;
  padding-top:13px;
  background-image:none;
}
#base-div-start header nav ul {
  width:944px;
  float:none;
}
#base-div-start header nav li {
  padding-left:104px;
}
#base-div-start header nav li:first-child {
  padding-left:0px;
}
#base-div-start #side-nav {
  position:absolute;
  margin-top:197px;
}
#base-div-start main blockquote:first-of-type p {
  text-align:center;
}

/* ADDITION */

.sub-map {
  position:relative;
}
.credit {
  position:absolute;
  right:0px;
  top:-13px;
  padding:4px 0px 4px 3px;
  background-color:#FFFFFF;
  font-size:8px;
  letter-spacing:0.5px;
  line-height:100%;
}

/* SMALL SCREEN */

@media only screen and (max-width:1044px) {
  #base-div,#base-div-start {
    width:614px;
  }
  main {
    background-image:url(../bilder/logo-mobile-big.png);
    background-position:top center;
    background-repeat:no-repeat;
    padding-top:135px;
  }
  header,#base-div-start header {
    background-image:none;
    padding-top:43px;
  }
  #base-div header {
    margin-bottom:75px;
  }
  #base-div-start header {
    margin-bottom:85px;
  }
  #side-nav,header .sub-item,footer .main-item {
    display:none;
  }
  footer {
    height:90px;
  }
  header,footer,.sub-map {
    font-size:16px;
  }
  header nav ul,#base-div-start header nav ul {
    width:auto;
    float:none;
  }
  header nav li,#base-div-start header nav li {
    padding:7px 0px 21px 78px;
  }
  footer nav li {
    padding:21px 110px 10px 0px;
  }
  footer nav li:last-child {
    padding-right:0px;
  }
}

@media only screen and (max-width:694px) {
  #base-div,#base-div-start {
    width:auto;
    padding:100px 40px 40px 40px;
  }
  main,#base-div-start main {
    background-image:url(../bilder/logo-mobile-big.png);
    background-position:top center;
    background-repeat:no-repeat;
    border-bottom:1px solid #C4C4C4;
    padding-bottom:90px;
  }
  main {
    padding-top:125px;
  }
  #base-div-start main {
    padding-top:100px;
  }
  footer {
    display:none;
  }
  header,#base-div-start header {
    display:block;
    position:absolute;
    animation:fadein 0s;
  }
  header nav ul,#base-div-start header nav ul {
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    z-index:10;
    width:100%;
    height:100%;
    background-color:#F5F5EF;
  }
  header .nav-button {
    position:fixed;
    top:30px;
    right:40px;
    width:50px;
    height:50px;
  }
  header #nav-m {
    display:block;
    z-index:15;
    background-image:url(../bilder/mobile-button.png);
    animation:fadein 10s;
  }
  header #nav-o {
    display:none;
    z-index:20;
    background-image:url(../bilder/mobile-button-open.png);
  }
  header #nav-o:target {
    display:block;
  }
  header nav a:target ~ ul, #base-div-start header nav a:target ~ ul,header .sub-item {
    display:block;
  }
  header nav li,#base-div-start header nav li,header nav li:first-child,#base-div-start header nav li:first-child {
    float:none;
    padding:40px 10px 5px 40px;
  }
  main,small {
    font-size:16px;
    line-height:30px;
  }
  blockquote {
    font-size:26px;
    line-height:36px;
  }
  blockquote small {
    line-height:36px;
  }
  h1 {
    font-size:38px;
    line-height:46px;
  }
  h2 {
    font-size:28px;
    line-height:34px;
  }
  h3 {
    font-size:24px;
    line-height:30px;
  }
  table img {
    max-width:200px;
    margin-top:8px;
  }
  td,th {
    padding-right:10px;
  }
}

@media only screen and (max-width:544px) {
  #base-div,#base-div-start {
    width:auto;
    padding:100px 20px 40px 20px;
  }
  main,#base-div-start main {
    background-image:url(../bilder/logo-mobile-small.png);
  }
  main {
    padding-top:115px;
  }
  #base-div-start main {
    padding-top:90px;
  }
  header .nav-button {
    top:15px;
    right:20px;
  }
  header nav li,#base-div-start header nav li,header nav li:first-child,#base-div-start header nav li:first-child {
    padding:25px 20px 10px 20px;
  }
  blockquote {
    font-size:24px;
  }
  #base-div-start main blockquote:first-of-type span {
    display:inline;
  }
  table img {
    max-width:160px;
  }
}

/* SMALL SCREEN MENUE */

@media only screen and (min-width:495px) and (max-width:694px) and (min-height:285px) and (max-height:524px) {
  header nav li:nth-child(5) {
    position:absolute;
    top:0px;
    left:250px;
  }
  header nav li:nth-child(6) {
    position:absolute;
    top:61px;
    left:250px;
  }
  header nav li:nth-child(7) {
    position:absolute;
    top:122px;
    left:250px;
  }
  header nav li:nth-child(8) {
    position:absolute;
    top:183px;
    left:250px;
  }
}

@media only screen and (max-width:494px) and (max-height:524px) {
  header .nav-button {
    top:unset;
    bottom:15px;
  }
  header nav li,#base-div-start header nav li,header nav li:first-child,#base-div-start header nav li:first-child {
    float:left;
  }
}

@media only screen and (min-width:495px) and (max-width:694px) and (max-height:284px) {
  header .nav-button {
    top:unset;
    bottom:35px;
  }
  header nav li,#base-div-start header nav li,header nav li:first-child,#base-div-start header nav li:first-child {
    float:left;
  }
}
  
/* FADE IN */

@keyframes fadein {
  from {
    opacity:0;
  } to {
    opacity:1;
  }
}