/* #### Generated By: http://www.cufonfonts.com #### */

    @font-face {
    font-family: 'Oswald Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Regular'), url('./Font/Oswald/Oswald-Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Extra-Light';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Extra-Light'), url('./Font/Oswald/Oswald-Extra-LightItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald ExtraLight'), url('./Font/Oswald/Oswald-ExtraLight.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Light';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Light'), url('./Font/Oswald/Oswald-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Light';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Light'), url('./Font/Oswald/Oswald-LightItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Medium'), url('./Font/Oswald/Oswald-Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Medium'), url('./Font/Oswald/Oswald-MediumItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Demi-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Demi-Bold'), url('./Font/Oswald/Oswald-Demi-BoldItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald DemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald DemiBold'), url('./Font/Oswald/Oswald-DemiBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Bold'), url('./Font/Oswald/Oswald-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Bold'), url('./Font/Oswald/Oswald-BoldItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Heavy'), url('./Font/Oswald/Oswald-Heavy.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Heavy'), url('./Font/Oswald/Oswald-HeavyItalic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Regular Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Regular Regular'), url('./Font/Oswald/Oswald-Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Oswald Stencil Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Oswald Stencil Bold'), url('./Font/Oswald/Oswald-Stencil.woff') format('woff');
    }    

html {
  background-color: #000000;
  width: 80%;
  margin: auto;
  font-size: 16px;
  scroll-behavior: smooth;
}

/* Universal Styles */
body {
  margin: 0;
  font-family: 'Oswald Regular';
  font-size: 1rem;
  font-weight:normal;
}

h1 {
  font-family: 'Oswald Regular';
  font-size: 3.5rem;
  font-weight: 50;
  text-align: center;
  padding: 1.875rem 0px 1.875rem 0px;
}

h2 {
  margin: 2rem 0 2rem 0;
  font-family: 'Oswald Regular';
  font-size: 3rem;
  font-weight: 600;
  text-align: left;
}

h3 {
  margin: 1rem 0 0.5rem 0;
  font-family: 'Oswald Regular';
  font-size: 1.4rem;
  font-weight: 600;
  text-align: left;
}


/* Header */

header {
  display: flex;
  align-items: left;
  margin-top: 0rem;
  z-index: 1;
  width: 100%;
  height: auto;
  font-family: 'Oswald Regular';

}

header a:link {
  color:#E5CB97;
  text-decoration: none;
}
header a:active {color:#E5CB97;text-decoration: none;}
header a:visited {color:#E5CB97;text-decoration: none;}
header a:hover {color:#E5CB97;text-decoration: none;font-size: 26px;}


.logo {
  display: flex;
  align-items: center;
  padding: 1rem 0rem 1rem 1.5rem;
  flex-grow: 1;
}

.logo img{

width: 32rem;
}

nav {
  padding-right: 3.5rem;
}

nav span {
  display: block;
  padding: 2.5rem 0 0 3.125rem;
  font-size: 1rem;
  height: 15px;
  width: 60px;
}

@media only screen and (max-width: 1000px) {

nav{
    display: none;
}

.logo{
  padding: 0rem;
  justify-content: center;
}

.logo img{
    width: 40%;
    height: auto;
    padding: 0.5rem;
  }
}


/* Main Section 1*/


.container1 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  vertical-align: top;
}


@media only screen and (max-width: 1000px) {

  .container1{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}
}
.section1 .imagecontainerleft  {
  display: flex;
  flex-direction: column;
  margin: 10rem 20rem 3rem 10rem;
  width: 50%;
  color: #1C1C1C;
}

/* Main Section 2*/


.container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

}


@media only screen and (max-width: 1000px) {

  .container{
    width: 100%;
    height: auto;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
}

.section1 {
  display: flex;
  height: 75rem;
  width: 100%;
  background-image: url("./Fotos/Völki+Ego.jpg");
  background-size: 100% auto;
  color: #FFE7BA;
}
@media only screen and (max-width: 1000px) {

  .section1{
    display: none;
}
}

.mobile {
  display: none;
}

@media only screen and (max-width: 1000px) {

  .mobile {
    display: flex;
    flex-direction: column;
    width: auto;
    justify-content: flex-start;
}
}

.section2 {
  width: 100%;
  height: auto;
  display: flex;
  color: #FFE7BA;
  flex-direction: column;
  justify-content: center;
  background-image: url("./Fotos/Startbild.jpg");
  background-size: 100% auto;
}

.section2 p, .section1 p {
  font-size: 1.2rem;
  line-height: 1;
  text-align: left;
}

.section2 span {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 900;
}

.section2 .imagecontainerleft {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  width: 60%;
}

@media only screen and (max-width: 1000px) {

  .section2 .imagecontainerleft, .section1 .imagecontainerleft{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0.125rem;
    flex-grow: 1;
}

.imagecontainerleft h1, p {
  padding: 0.625rem;
  text-align: center;

}

}

.imageleft {
  width: 100%;
  height: auto;
}

.textright {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0rem 0;
    margin: 40rem;
  }


  @media only screen and (max-width: 2000px) {

    .textright{
      width:80%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 1rem 0;
      margin: 0.1rem;
  }
}

@media only screen and (max-width: 1066px) {

  .textright{
    width:80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
    margin: 12rem;
}
}

@media only screen and (max-width: 854px) {

  .textright{
    width:80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
    margin: 5.2rem;
}
}

@media only screen and (max-width: 455px) {

  .textright{
    width:80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
    margin: 2rem;
}
}

.infocontainersmall {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.textsmallright {
  width: 100%;
  text-align: center;
  padding:0.8rem;
}

.textsmallright a {
  color: #C1E6FF;
}

.textsmallright p{
  padding: 0.5rem 0;
}

.textsmallright p, h3, h2 {
  text-align: center;
}

@media only screen and (max-width: 1000px) {

  .infocontainersmall {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
  }

  .textsmallright {
    width: 100%;
    padding: 0;
  }

  .textsmallright p, h3, h2 {
    padding: 0rem;
    text-align: center;
  }

  h2 {
    margin: 0.5rem;
    font-size: 2.5rem;
    font-weight: 50;
  }
  h3 {
    font-size: 1rem;
    font-weight: 900;
  }
  p {
    font-size: 1rem;
    font-weight: 600;
  }
}


/*Slider */

.sliderElements,
.sliderElements figure,
.sliderControls {
    margin: 0 0 1rem 0 ;

}

.sliderElements:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}

.cssSlider {
    overflow-x: hidden;
    width: 100%;
}

.sliderElements {
    list-style: none;
    position: relative;
    left: 0;
    width: 500%;
    margin-bottom: 1rem;
    padding: 0;
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;
}

.sliderElements > li {
    float: left;
    width: 20%;
    position: relative;
}

#slide02:checked ~ .sliderElements {
    left: -100%;
}

#slide03:checked ~ .sliderElements {
    left: -200%;
}

#slide04:checked ~ .sliderElements {
    left: -300%;
}
#slide05:checked ~ .sliderElements {
    left: -400%;
}

/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption {
    display: block;
    color: #fff;
    position: absolute;
    left: 0rem;
    bottom: 2rem;
    padding: .125rem;
    background: #0A0E35;
}

/* Bilder responsive */
.sliderElements img {
    width: 100%;
    height: 100%;
}


/* inputs aus dem Blickfeld schieben */
.cssSlider input {
    position: absolute;
    left: -99999px;
}

/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
    text-align: center;
}

/* Controls nebeneinander bringen */
.sliderControls li {
    display: inline-block;
}

/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: #0A0E35;
    color: #FFE7BA;
}

.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"],
#slide05:checked ~ .sliderControls label[for="slide05"]
{
    background: #ddd;
    color: #0A0E35;
}


/* Main Section 3*/


.container2 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.headliner h2{
  justify-content: center;
}
.zurück {
  width:100%;
  justify-content: right;
  text-align: right;
  font-size: 1.5rem;
  font-style: 400;
}

.section3 span {
  font-size: 0.9375rem;
  line-height: 1.2;
}


.section3 {
  display: flex;
  width: 100%;
  background-color: #0A0E35;
  color: #0A0E35;
}

@media only screen and (max-width: 1000px) {

  .section3 {
    background-color: #0A0E35;
    color: #FFE7BA;
  }
  .dontshowmobile {
    display: none;
  }
}

.courses {
  display: flex;
  padding: 0rem 0rem 5rem 0rem;
  flex-direction: column;
  width: 50%;
}

@media only screen and (max-width: 1000px) {

  .courses {
    width: 80%;
  }
}

.course {
  display: flex;
  flex-direction: column;
  padding: 0.625rem;
  margin: 0.625rem;
  border-radius: 0.9375rem;
}

.course h3 {
  margin-left: 1rem;
  color: #1C1C1C;
  font-style: bold;
}

#audio_with_controls {
  width: 100%;
}


/* Main Section 4*/

.container3 {
  display: flex;
  width: 100%;
  height: 4rem;
  margin: 0 0 0 0;
  background-color: #0A0E35;
  justify-content: space-around;
  align-items: center;
}

.container3 span {
  color: #FFE7BA;
  font-size: 1rem;
  font-weight: bold;}

.container3
  a:link {color:#FFE7BA;text-decoration: none;}
  a:active {color:#FFE7BA;text-decoration: none;}
  a:visited {color:#FFE7BA;text-decoration: none;}
  a:hover {color:#FFE7BA;text-decoration: underline; }

@media only screen and (max-width: 1000px) {

  .container3 {
    flex-direction: column;
    height: 10rem;
    padding: 1rem 0 0 0 ;
  }
}

.Stephke {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.stephkebild {
  width:15rem;
  padding: 2rem;
}
.stephkebild p {
  padding: 0.3rem;
  text-align: center;
}

.stephkebild img {
  width: 100%;
}

@media only screen and (max-width: 1000px) {

  .stephkebild {
    width:15rem;
    padding: 1rem 0.5rem 0.5rem 0.5rem;
  }

  .stephkebild p {
    font-weight: 600;
    padding: 2rem 0 0 0 ;
  }

  .stephkebild img {
    padding: 1rem 0 0 0;
  }
}