body, html {
  top:0px;
  left:0px;
  margin:0px;
  padding:0px;
  background:white;
  color:rgba(0,0,0,.87);
  font:16px "Roboto",Verdana,sans-serif;
  line-height:1.5;
  text-align:left;
  width:100%;
}

@media (max-width:800px) {
  body, html {
    font-size:14px;
  }
}

@media (max-width:640px) {
  body, html {
    font-size:12px;
  }
}

a {
  color:#013476;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

h1 {
  font-size:5em;
  line-height:1;
  font-weight:100;
  padding:0 15px;
}

@media (max-width:540px) {
  h1 {
    font-size:3em;
  }
}

h2 {
  font-size:2.25rem;
  line-height:2.5875rem;
  margin:2.25rem 0;
  font-weight:200;
  text-align:center;
}

h3 {
  font-size:2.3rem;
  line-height:2.6rem;
  font-weight:200;
  text-align:center;
}

.vertically-centered {
  position:absolute;
  top:45%;
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  transform:translateY(-50%);
}

.text-horizontally-centered {
  width:100%;
  text-align:center;
}

.text-shadow {
  -webkit-text-shadow:0 1px 1px rgba(0,0,0,.4);
  -moz-text-shadow:0 1px 1px rgba(0,0,0,.4);
  -ms-text-shadow:0 1px 1px rgba(0,0,0,.4);
  -o-text-shadow:0 1px 1px rgba(0,0,0,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}

.material-icons {
  font-family:'Material Icons';
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-transform:none;
  letter-spacing:normal;
  word-wrap:normal;
  white-space:nowrap;
  direction:ltr;
  cursor:pointer;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'liga';
}

ul {
  list-style-type:none;
  padding:0;
  position:relative;
}

ul.inline li {
  display:inline-block;
}


.bounce-up {
  -webkit-transition:all .7s ease-out .5s;
  -moz-transition:all .7s ease-out .5s;
  -o-transition:all .7s ease-out .5s;
  -ms-transition:all .7s ease-out .5s;
  transition:all .7s ease-out .5s;
  -webkit-transform:translate3d(0,200px,0);
  -moz-transform:translate3d(0,200px,0);
  -ms-transform:translate3d(0,200px,0);
  -o-transform:translate3d(0,200px,0);
  transform:translate3d(0,200px,0);
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  backface-visibility:hidden;
  opacity:0;
}

.bounce-up.in-view {
  opacity:1;
  -webkit-transform:translateZ(0);
  -moz-transform:translateZ(0);
  -ms-transform:translateZ(0);
  -o-transform:translateZ(0);
  transform:translateZ(0);
}

header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:2;
}

section {
  position:relative;
  padding:0;
}

header .meta {
  height:26px;
  line-height:26px;
  background:#013476;
}

@media (max-width:600px) {
  header .meta {
    height:6px;
    line-height:6px;
  }
}

header .top-nav {
  color:#013476;
  background-color:#013476;
  width:100%;
  height:40px;
  line-height:40px;
}

header .nav-wrapper {
  height:100%;
  background-color:#a3d8f8;
  padding:0 1.5em;
}

header .brand-logo {
  height:40px;
  line-height:40px;
  display:inline-block;
  position:relative;
}

header .brand-logo img {
  height:24px;
  width:auto;
  position:relative;
  top:6px;
}

#container {
  width:100%;
  box-sizing:border-box;
  padding-top:114px;
  z-index:1;
}

@media (max-width:600px) {
  #container {
    padding-top:86px;
  }
}

#container .stripe {
  position:relative;
  box-sizing:border-box;
  padding:40px 0;
  width:100%;
  background:#fff;
  z-index:1;
  overflow:hidden;
  height:calc(100vh - 114px);
  text-align:center;
  color:#fff;
  -webkit-font-smoothing:auto;
}

@media (max-width:600px) {
  #container .stripe {
    height:calc(100vh - 86px);
  }
}

#container .stripe-background {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  background-color:black;
}

#container .stripe-background video {
  left:0;
  min-height:100%;
  min-width:100%;
  opacity:.8;
  position:absolute;
  display:inline-block;
  vertical-align:baseline;
}

#container .at-bottom {
  position:absolute;
  margin:0 auto;
  bottom:10px;
  left:0;
  right:0;
  -webkit-animation:bounce 2s forwards infinite ease-out;
  -moz-animation:bounce 2s forwards infinite ease-out;
  -ms-animation:bounce 2s forwards infinite ease-out;
  -o-animation:bounce 2s forwards infinite ease-out;
  animation:bounce 2s forwards infinite ease-out;
}

@-webkit-keyframes bounce {
  0%,20%,50%,80%,to{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-moz-transform:translateY(-15px);-ms-transform:translateY(-15px);-o-transform:translateY(-15px);transform:translateY(-15px)}
}
  
@-moz-keyframes bounce {
  0%,20%,50%,80%,to{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-moz-transform:translateY(-15px);-ms-transform:translateY(-15px);-o-transform:translateY(-15px);transform:translateY(-15px)}
}

@keyframes bounce {
  0%,20%,50%,80%,to{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-moz-transform:translateY(-15px);-ms-transform:translateY(-15px);-o-transform:translateY(-15px);transform:translateY(-15px)}
}

#container .at-bottom:hover {
  -webkit-animation:none;
  -moz-animation:none;
  -ms-animation:none;
  -o-animation:none;
  animation:none;
}

#container .at-bottom p small {
  font-size:.875em;
  cursor:pointer;
}

#container .at-bottom svg {
  fill:#fff!important;
  -webkit-transition:.2s;
  -moz-transition:.2s;
  -o-transition:.2s;
  -ms-transition:.2s;
  transition:.2s;
  cursor:pointer;
}

#container .at-bottom svg:hover {
  -webkit-transform:scale(1.15);
  -moz-transform:scale(1.15);
  -ms-transform:scale(1.15);
  -o-transform:scale(1.15);
  transform:scale(1.15);
}

#welcome {
  padding:30px 0;
  background-color:#212121;
  color:white;
}

.row {
  margin:0 auto 20px auto;
  width:93%;
  max-width:1200px;
  padding:0;
}

.row:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

.row>div {
  float:left;
}

@media (max-width:540px) {
  .row {
    display:block;
    width:80%;
  }
  .row>div {
    float:none;
  }
}

.jumpto>div {
  width:32%;
  height:240px;
  display:block;
  margin-right:2%;
  margin-bottom:20px;
  background:white;
  box-sizing:border-box;
  position:relative;
  -webkit-transition:.2s;
  -moz-transition:.2s;
  -o-transition:.2s;
  -ms-transition:.2s;
  transition:.2s;
}

.jumpto>div:hover {
  -webkit-transform:scale(1.05);
  -moz-transform:scale(1.05);
  -ms-transform:scale(1.05);
  -o-transform:scale(1.05);
  transform:scale(1.05);
}

@media (max-width:800px) {
  .jumpto>div {
    height:220px;
  }
}

@media (max-width:540px) {
  .jumpto>div {
    width:100%;
    margin-right:0;
    height:auto;
  }
}

.jumpto>div:last-child {
  margin-right:0;
}

.jumpto>div>div.kopf {
  background:#ac1161;
  height:60px;
  line-height:60px;
  text-align:center;
  color:white;
  font-size:1.5rem;
  font-weight:200;
}

.jumpto>div>div.kopf b {
  font-weight:normal;
}

@media (max-width:800px) {
  .jumpto>div>div.kopf {
    height:40px;
    line-height:40px;
  }
}

.jumpto>div>div.inhalt {
  padding:20px 30px;
  text-align:center;
  color:#013476;
}

@media (max-width:1024px) {
  .jumpto>div>div.inhalt {
  padding:15px;
  }
}

@media (max-width:540px) {
  .jumpto>div>div.inhalt {
  padding:15px;
  }
}

.jumpto>div>div.inhalt .ekg_angabe {
  font-size:1.2em;
  font-weight:bold;
  margin-top:10px;
  border-radius:3px;
  display:inline-block;
  cursor:default;
}

@media (max-width:640px) {
  .jumpto>div>div.inhalt .ekg_angabe {
    font-size:1.1em;
  }
}

.jumpto>div>div.inhalt input {
  width:50px;
  font-family:'Roboto',Verdana,sans-serif;
  font-weight:bold;
  padding:2px 5px;
  color:#013476;
  background:rgba(1,52,118,.1);
  margin-left:5px;
  font-size:1em;
  border:none;
}

@media (max-width:640px) {
  .jumpto>div>div.inhalt input {
    width:40px;
  }
}

.jumpto>div>div.inhalt input:focus {
  outline:0;
}

.jumpto>div>div.inhalt .button_los {
  background:#ac1161;
  padding:0 14px;
  display:inline-block;
  margin-top:15px;
  font-weight:200;
  font-size:1.3em;
  transition:all .3s;
  border:1px solid #ac1161;
  color:white;
}

.jumpto>div>div.inhalt .button_los:hover {
  color:#ac1161;
  background:white;  
}

section#cover {
  padding:30px 0;
}

section#cover .buchtitel {
  -webkit-box-shadow:-2px 2px 12px 0px rgba(0,0,0,0.44);
  -moz-box-shadow:-2px 2px 12px 0px rgba(0,0,0,0.44);
  box-shadow:-2px 2px 12px 0px rgba(0,0,0,0.44);
  width:331px;
}

@media (max-width:800px) {
  section#cover .buchtitel {
    width:200px;
  }
}

@media (max-width:540px) {
  section#cover .buchtitel {
    margin:0 auto;
  }
}

section#cover .buchtitel>img {
  display:block;
  max-width:100%;
}

section#cover .info_buch {
  padding-left:360px;
  float:none;
}

@media (max-width:800px) {
  section#cover .info_buch {
    padding-left:230px;
  }
}

@media (max-width:540px) {
  section#cover .info_buch {
    padding-left:0;
    margin-top:20px;
    display:block;
  }
}

section#cover .info_buch p.herausgeber {
  font-size:1.1em;
  font-weight:bold;
  margin:0 0 1em 0;
}

footer {
  border-top:1px solid #e0e0e0;
  padding-top:2em;
}

footer .scrollup {
  line-height:54px;
  width:54px;
  height:54px;
  font-size:1.6rem;
  border-radius:50%;
  background-color:#013476;
  display:none;
  color:white;
  text-align:center;
  cursor:pointer;
  position:fixed;
  bottom:20px;
  right:20px;
  opacity:.4;
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  -ms-transition:.5s;
  transition:.5s;
  z-index:1000;
}

footer .scrollup:hover {
  opacity:.8;
}

footer .scrollup .material-icons:before {
  content:'\e316';
}

footer ul, footer ul li {
  text-align:center;
}

footer ul li {
  margin-right:1em;
  color:#013476;
  cursor:pointer;
}

footer ul li:last-child {
  margin-right:0;
  color:#9e9e9e;
  cursor:default;
}

.overlay_kasten {
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  display:none;
  z-index:100;
}

.overlay_hg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.3);
}

.overlay_inhalt_kasten {
  position:absolute;
  top:15%;
  height:70%;
  width:50%;
  margin:0 25%;
  background:white;
  border-radius:3px;
  padding:15px;
  box-sizing:border-box;
  transition:all .8s;
}

.overlay_inhalt_kasten {
  transform:translate(0px,300px);
}

.overlay_inhalt_kasten.schieben {
  transform:translate(0px,0px);
}

@media (max-width:800px) {
  .overlay_inhalt_kasten {
    width:70%;
    margin:15%;
    padding:10px;
  }
}

@media (max-width:640px) {
  .overlay_inhalt_kasten {
    width:80%;
    margin:10%;
    padding:5px;
  }
}

.overlay_inhalt {
  overflow:auto;
  height:100%;
  width:100%;
  color:#013476;
}

.overlay_inhalt h2 {
  margin:0 0 .5em 0;
}

.overlay_inhalt h3 {
  font-size:1.3em;
  line-height:1.2em;
  margin:.5em 0;
  font-weight:bold;
  text-align:left;
}

.overlay_inhalt h4 {
  margin:1.2em 0 0 0;
}

.kreuz {
  position:absolute;
  top:-15px;
  right:-15px;
  width:30px;
  height:30px;
  background:#5cb85c;
  border-radius:50%;
  border:2px solid white;
  cursor:pointer;
}

.kreuz div {
  border-top:2px solid white;
  position:absolute;
  top:50%;
  margin-top:-1px;
  left:15%;
  width:70%;
  transition:all .4s;
}

.kreuz div:nth-of-type(1) {
  transform: rotate(45deg);
}

.kreuz div:nth-of-type(2) {
  transform: rotate(-45deg);
}

.kreuz:hover div:nth-of-type(1) {
  transform: rotate(-45deg);
}

.kreuz:hover div:nth-of-type(2) {
  transform: rotate(45deg);
}