@charset "UTF-8";
/* ***********************
 *     Im Zusammenspiel mit bootstrap.min.css
 */


@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600italic,300italic);

* { margin: 0; padding: 0 }

body {
  font-family: 'Source Sans Pro' sans-serif;
  font-size: 16px;
  font-weight: 400;
  height: 100%;
  color: #484848;
}
section {
  min-height: 100vh;
  background: transparent;
  background-size: cover;
  width: 100%;
  position: relative;
  overflow: hidden;
}
section.lazy-hidden {
  /*background: transparent url(ripple.svg) no-repeat fixed 50% 50% / 120px auto;*/
}
a, a:hover, a:active, a:focus {
  color: rgb(9, 179, 156);
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
  outline: none;
}

#xxs {
  min-height: 100vh;
  background: rgb(9, 179, 156);
  padding: 24px;
  width: 100%;
  display: none;
}
.bg-ol { background-position: 0 0 }
.bg-or { background-position: 100% 0 }
.bg-ul { background-position: 0 100% }
.bg-ur { background-position: 100% 100% }
.bg-ct { background-position: 50% 50% }

nav {
  background-color: rgba(9, 179, 156, .9);
  transition: all .5s;
}
.navbar {
  border: none;
  border-radius: 0;
}
.navbar-nav {
  margin-top: 0;
  margin-bottom: 0;
}

.navbar-start {
  position: fixed;
  z-index: 9;
  padding-top: 24px;
  border: none;
  background-color: rgba(9, 179, 156, 0);
  width: 100%;
}
.navbar-toggle .icon-bar { background: #fff }
.navbar-brand {
  display: none;
  height: 2em;
  font-size: 16px;
  color: #fff;
}
.nav > li > a,
.nav > li > a:active,
.nav > li > a:focus {
   background: transparent;
   color: #fff;
   text-decoration: none;
   padding: 10.5px 15px 10.5px 24px;
}
.nav > li.active > a { border-bottom: 2px solid rgba(255,255,255,.9) }
.nav > li > a:hover { background: transparent }

*:focus { outline: none }
*::-moz-focus-inner { border: 0 }

#logo,
.navbar-brand {
  letter-spacing: .15em;
  font-style: italic;
  padding: .5em 1.5em;
}
.navbar-brand:hover,
.navbar-brand:focus {
  color: #fff;
}

#logo {
  background-color: rgba(9, 179, 156, 0.9);
  border-radius: 0.67em;
  color: #fff;
  left: 0.7em;
  line-height: 0.8;
  position: absolute;
  top: 0.7em;
}
#logo dt {
  font-size: 2.1em;
  font-weight: 600;
}
#logo dd {
  font-size: 0.73em;
  font-weight: 400;
  padding: 0.1em 1em 0.3em;
}

h1 {
  color: #fff;
  font-size: 2em;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  text-shadow: 0 0 48px #606060;
  text-transform: uppercase;
}

h2 {
  color: #484848;
  font-weight: 400;
  font-size: 2em;
  line-height: 1;
}
h3, h4 { margin-bottom: 0 }
h3 > a:hover,
h3 > a:active,
h3 > a:focus { text-decoration: none }
h3 > a.display {
  color: rgb(9, 179, 156);
  font-size: 2em;
  margin-bottom: 0;
  font-weight: 400;
}
h3 > a::after {
    background-color: rgba(9, 179, 156, 0.67);
    border-radius: 1em;
    bottom: 0.25em;
    color: #fff;
    content: "+";
    font: 0.7em/1 "Courier New",Courier,monospace;
    left: 1.3em;
    padding: 0 0.425em;
    position: relative;
}
h3 > a.display::after { content: "-" }
h3.detail {
  font-size: 1em;
  margin-bottom: 1.5em;
}
h3.detail:first-child { margin-top: 0 }
h3, h4 {
  color: #000;
  font-size: 1em;
  font-weight: 600;
}

.navbar-brand { font-size: 16px }

p { clear: both }
p + p, p + h2, p + h3, p + h4 { margin-top: 1.5em; }
p:last-child { margin-bottom: 1.5em; }

h6 {
  font-size: 1em;
  font-weight: 300;
}
h6 + h2 { margin-top: -.1em }

em {
  border-radius: 0.67em;
  color: #fff;
  display: block;
  font-weight: 300;
  font-style: italic;
  font-size: 1.33em;
  line-height: 1.15em;
  margin: 2em 2em 2em 1em;
  padding: 1.33em;
  text-align: center;
}
em.claim { background-color: rgba(9, 179, 156, 0.6) }
em.link { background-color: rgba(204, 0, 204, 0.6) }
em.link a { color: #fff }

div.square-l > img {
  border-radius: 1em;
  height: 16em;
  margin: 0 0 2em 1.33em;
}

img+span.figcap {
  display: block;
  color: #999;
  font-size: .667em;
  line-height: 2;
}
.rdim {
  position: relative;
  background: transparent;
  padding-right: 18px;
  padding-left: 18px;
  margin-right: auto;
  margin-left: auto;
}

.pile {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.sheet {
  background: rgba(255, 255, 255, 0.9);
  padding: 32px 0;
  overflow: hidden;
  clear: left;
  width: 100%;
}
.sheet ul {
  list-style: none;
  margin: 1.5em 0;
}
.sheet ul:last-child { margin-bottom: 3em; }

/**/
.sheet li::before {
    content: "· ";
    display: inline-block;
    margin-left: -0.7em;
    width: 0.7em;
}
.sheet li {
  list-style: none;
  margin-left: 1em;
}

div.col-md-1 {
  overflow: hidden; /* hasLayout-trigger */
}

div.featherlight-content {
  background-color: transparent !important;
}

span.pulse {
  animation: pulse-animation 2s infinite;
  border-radius: .33em;
  padding: 0 .1em 0.07em .2em;
  position: relative;
  left: -.2em;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(255,0,255, 0.24);
  }
  100% {
    box-shadow: 0 0 0 36px rgba(255,0,255, 0);
  }
}


@media (min-width: 640px) {
  section { background-attachment: fixed }
  .rdim { max-width: 750px }
  .nav > li > a,
  .nav > li > a:active,
  .nav > li > a:focus { padding: .5em 1em }

  h2 { margin: 0 0 0.75em }
  p:last-child { margin-bottom: 3em }

}

@media (min-width: 992px) {
  .sheet { padding: 54px 0 36px 0 }

  .nav > li > a,
  .nav > li > a:active,
  .nav > li > a:focus,
  #logo,
  .navbar-brand { padding: .5em 1.5em .7em; }

  .rdim {
      min-width: 970px;
      max-width: 1178px;
  }
}

@media (min-width: 992px) and (min-height: 661px) { /* font jump 16px->18px*/
  body, h3, p, ul, .navbar-brand {
    font-size: 18px;
    font-weight: 300;
  }

  h2 {
    font-weight: 300;
    font-size: 4em;
    margin: 0.165em 0 0.33em;
  }

  h3 > a.display { font-weight: 300 }
}

@media (min-width: 1200px) and (min-height: 800px)  { /* font jump 18px->21px*/
  body, h3, p, ul, .navbar-brand { font-size: 21px }

  .sheet { padding: 63px 0 42px 0 }

  .nav > li > a,
  .nav > li > a:active,
  .nav > li > a:focus {
     padding: .5em 2em;
  }

  .navbar-brand, {
  #logo
    padding: .5em 2em;
  }
}