/* 
//////////////////////////////////////////////////////////////
///////////////////////// All Style //////////////////////////
//////////////////////////////////////////////////////////////
*/

body {
  margin:0px;
  padding:0px;
  color:#676767;

  background-color:#F9F9Fc;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.08em;
  font-size: 1.1em;
  -webkit-text-size-adjust: none;
  text-size-adjust:none;
  -moz-text-size-adjust:none;
  -webkit-font-size-adjust:none;
  font-size-adjust:none;
  -moz-font-size-adjust:none;

  line-height: 1.3;
  position:relative;
  float:left;
  width:100%;


  background-image:url('../background/19.svg?t=17651454990'), url('../background/2.svg?t=17651454991'), url('../background/9.svg?t=17651454992'), url('../background/1.svg?t=17651454993'), url('../background/14.svg?t=17651454994'), url('../background/15.svg?t=17651454995'), url('../background/17.svg?t=17651454996'), url('../background/19.svg?t=17651454997'), url('../background/7.svg?t=17651454998'), url('../background/4.svg?t=17651454999'), url('../background/9.svg?t=176514549910'), url('../background/2.svg?t=176514549911'), url('../background/10.svg?t=176514549912'), url('../background/14.svg?t=176514549913'), url('../background/20.svg?t=176514549914'), url('../background/7.svg?t=176514549915'), url('../background/1.svg?t=176514549916'), url('../background/16.svg?t=176514549917'), url('../background/2.svg?t=176514549918'), url('../background/17.svg?t=176514549919');
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:10.97% 1.88%, 19.25% 14.87%, 27.85% 19.9%, 17.74% 35.73%, 12.58% 42.33%, 10.96% 55.2%, 34.42% 57.08%, 8.89% 70.41%, 12.39% 83.79%, 14.27% 87.7%, 80.18% 2.2%, 65.25% 17.53%, 66.47% 27.48%, 87.91% 37.47%, 68.74% 38.86%, 87.72% 51.51%, 86.04% 63.66%, 89.57% 69.65%, 96.63% 77.77%, 74.62% 86.05%;
  background-size:6.5% auto, 5.5% auto, 7.2% auto, 5.4% auto, 5.4% auto, 5.5% auto, 5.1% auto, 6.5% auto, 7% auto, 7% auto, 6.2% auto, 6.4% auto, 7.5% auto, 5.1% auto, 7.2% auto, 7.3% auto, 6% auto, 6% auto, 7.2% auto, 6.9% auto;
}

.logoFont {
  font-family: 'Pacifico', cursive;
  font-weight: 300;
  font-size: 1.3em;
}

.wrapper {
  max-width:1600px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

img {
  line-height: 0px;
  margin:0px;
  padding:0px;
  max-width:100%;
}

h1 {
  margin:0px;
  padding:0px;
  color:#28337B;
  font-weight: 900;
  font-size:3em;
}

h2 {
  margin:0px;
  padding:0px;
  font-weight: 900;
  color:#28337B;
  font-size:3em;
}

h3 {
  margin:0px;
  padding:0px;
  font-weight: 900;
  color:#28337B;
  font-size:1.2em;
  margin-bottom: 0.5em;
}

a {
  color:#28337B;
  text-decoration: none;
}

a:hover {
  color:#676767;
}

.highlightText {
  color:#D6915A;
  font-size: 1.7em;
}

/* 
//////////////////////////////////////////////////////////////
////////////////////////////// Input Felder //////////////////
//////////////////////////////////////////////////////////////
*/

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#676767;
  opacity: 0.5; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:rgba(103,103,103, 0.5);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color:rgba(103,103,103, 0.5);
}



input[type=checkbox] {
  cursor: pointer;
}

input[type=radio] {
  cursor: pointer;
}

label {
  cursor: pointer;
}

.formBlock {
  margin-bottom: 1.5em;
}

select {
  border:1px solid #28337B;
  background-color:#F9F9Fc;
  color:#676767;
  font-size: 1.2em;
  padding:0.5em 1em;
  font-family: 'Noto Sans', sans-serif;
  width:100%;

  -webkit-border-radius: 0.75em;
     -moz-border-radius: 0.75em;
          border-radius: 0.75em;

  -webkit-box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
     -moz-box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
          box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
}

input {
  border:1px solid #28337B;
  background-color:#F9F9Fc;
  color:#676767;
  font-size: 1.2em;
}

input[type=text] {
  width:calc((100% - 2px) - 2em);
  padding:0.5em 1em;

  font-family: 'Noto Sans', sans-serif;

  -webkit-border-radius: 0.75em;
     -moz-border-radius: 0.75em;
          border-radius: 0.75em;

  -webkit-box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
     -moz-box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
          box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
}

textarea {
  border:1px solid #28337B;
  background-color:#F9F9Fc;
  color:#676767;
  font-size: 1.2em;
  width:calc((100% - 2px) - 2em);
  height:15em;

  padding:0.5em 1em;

  font-family: 'Noto Sans', sans-serif;

  -webkit-border-radius: 0.75em;
     -moz-border-radius: 0.75em;
          border-radius: 0.75em;

  -webkit-box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
     -moz-box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
          box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.07);
}




.buttonWrapper {
  position:relative;
  height:5em;
}

@keyframes releaseButton {
  from {
    margin-top: 0.25em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
  } to {
    margin-top: 0em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
  }
}


input[type=submit] {
  position:absolute;
  animation-duration: 0.25s;
  animation-name: releaseButton;

  border:none;

  margin-top:0em;
  background-color:#D6915A;
  color:#ffffff;
  text-align:center;
  display:inline-block;

  width: -webkit-min-content;
  width:    -moz-min-content;
  width:         min-content;

  white-space: nowrap;
  padding:0.9em 1.4em;
  cursor:pointer;

  -webkit-border-radius: 2.5em;
     -moz-border-radius: 2.5em;
          border-radius: 2.5em;

  -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
     -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
          box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
}



@keyframes pressButton {
  from {
    margin-top: 0em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
  } to {
    margin-top: 0.25em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
  }
}

input[type=submit]:hover {
  animation-duration: 0.25s;
  animation-name: pressButton;

  margin-top: 0.25em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
}

.errorText {
  color:#E04F5D;
}

.errorInput {
  border-color:#E04F5D;
}

.successText {
  color:#78E02D;
}


/* 
//////////////////////////////////////////////////////////////
////////////////////////////// Buttons ///////////////////////
//////////////////////////////////////////////////////////////
*/

.button {
  background-color:#28337B;
  color:#ffffff;
  text-align:center;
  display:inline-block;

  width: -webkit-min-content;
  width:    -moz-min-content;
  width:         min-content;

  white-space: nowrap;
  padding:0.9em 1.4em;
  cursor:pointer;

  -webkit-border-radius: 2.5em;
     -moz-border-radius: 2.5em;
          border-radius: 2.5em;
}

.button:hover {
  background-color:#D6915A;
}

.highlightButton {
  background-color:#D6915A!important;
}

.highlightButton:hover {
  -webkit-box-shadow: 0em 0em 0.75em 0.25em rgba(214,145,90, 0.4);
     -moz-box-shadow: 0em 0em 0.75em 0.25em rgba(214,145,90, 0.4);
          box-shadow: 0em 0em 0.75em 0.25em rgba(214,145,90, 0.4);
}

.outlineButton {
  background-color:transparent;
  color:#28337B!important;
  border:1px solid #28337B;
}

.outlineButton:hover {
  background-color:#28337B!important;
  color:#ffffff!important;
}

/* 
//////////////////////////////////////////////////////////////
////////////////////////////// Navigation Bar ////////////////
//////////////////////////////////////////////////////////////
*/

.navigationBarWrapper {
  max-width:90%;
  width:100%;
  margin-left:auto;
  margin-right:auto;


  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content:space-between;
  align-items:flex-start;
  align-content: flex-start;
}

.headerBar {
  position: sticky;
  top:0;
  z-index:999;
  background-color:rgba(249,249,252, 0.75);;
  backdrop-filter: blur(0.6em);
  border-bottom:1px solid #dddddd;
}

.logoLine {
  width:42.5%;
  float:left;
  border-bottom:1px solid #BDA18C;
  margin-top:2.5vw;
}

.logoContainer {
  margin:1.2em 0;
  order: 1;
  width:15%;
}

.logoContainer object {
  width:15em;
}

.navigationContainer {
  order: 2;
  margin-top:4.7em;
  text-align:center;
}

.onlineLearningButtonWrapper {
  order: 3;
  width:15%;
  text-align: right;
}

.onlineLearningButtonWrapper .button {
  margin-top:2.7em;
}


/* 
//////////////////////////////////////////////////////////////
////////////////////////////// Navigation ////////////////////
//////////////////////////////////////////////////////////////
*/


.navigationContainer a {
  color:#676767;
}

.navigationContainer a:hover {
  color:#D6915A;
}

.curnav {
  color:#D6915A;
  display:block;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.subnavi {
  font-size:0.9em;
}






#nav {
  display:inline-block;
}

#nav li {
  float: right;
  margin: auto;
}

.mouseover{
  margin:0 1em;
  display:block;
  margin-bottom: 1.5em;
}

#nav li ul {
  text-align:left;
  position: absolute;
  max-width: 15em;
  left: -999em;
  background-color:#ffffff;
  margin-left:1em;
  padding:1em 0;


  -webkit-border-radius: 0.6em;
     -moz-border-radius: 0.6em;
          border-radius: 0.6em;

  -webkit-box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
     -moz-box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
          box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
}

#subnav li {
  max-width:15.5em;
  min-width:15.5em;
  padding: 0px;
  text-align: left;
}

#subnav .mouseover {
  padding:0.25em;
  display:block;
  margin-bottom: 0em;
}

#subnav li ul {
  max-width: 7em;
}

#nav, #nav ul {
   padding: 0;
   margin: 0;
   list-style: none;;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
   left: -1100em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
   left: auto;
}

li>ul {
   top: auto;
   left: auto;
}


/* 
//////////////////////////////////////////////////////////////
////////////////////////////// Header ////////////////////////
//////////////////////////////////////////////////////////////
*/


.fullsizeHeaderPicture {
  height: 40vh;

  background-size:100% auto;
  background-repeat: no-repeat;
  background-position: center center;
}

.headerHeadline {
  margin-top:2em;
  font-size: 4em;
  line-height: 1.6em;
  color:#28337B;
  font-weight: 600;
}

.headerSubline {
  margin-top:0.5em;
}

.headerButtons {
  margin-top:2.5em;
  display:inline-block;

  width: -webkit-min-content;
  width:    -moz-min-content;
  width:         min-content;
  
  white-space: nowrap;

}

.headerButtons .button {
  margin:0 1.5em;
}

.headerMedia {
  margin-top:5em;
}

.headerMedia video {
  width:50em;

  -webkit-border-radius: 1.0em;
     -moz-border-radius: 1.0em;
          border-radius: 1.0em;

  -webkit-box-shadow: 0 1em 1em 0 rgba(0,0,0,0.25);
     -moz-box-shadow: 0 1em 1em 0 rgba(0,0,0,0.25);
          box-shadow: 0 1em 1em 0 rgba(0,0,0,0.25);
}


/* 
//////////////////////////////////////////////////////////////
////////////////////////////// Content ///////////////////////
//////////////////////////////////////////////////////////////
*/

.content {
  margin:5em 0 15em 0;
}


.headline {
  margin-bottom: 1.5em;
}


.contentElement {
  margin-bottom:5em;
  margin-top:5em;
}

.highlight {
  color:#28337B;
}


.roundedCornerImage {
  -webkit-border-radius: 1.0em;
     -moz-border-radius: 1.0em;
          border-radius: 1.0em;
}


/* 
//////////////////////////////////////////////////////////////
////////////////////////////// Quadratic Button //////////////
//////////////////////////////////////////////////////////////
*/

@keyframes loseQuadraticButton {
  from {
    margin-bottom: 0em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
  } to {
    margin-bottom: 0.25em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
  }
}

@keyframes loseOddQuadraticButton {
  from {
    margin-bottom: 2.5em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
  } to {
    margin-bottom: 2.75em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
  }
}

.quadraticButton {
  animation-duration: 0.25s;
  animation-name: loseQuadraticButton;

  width:18em;
  height:18em;

  background-color:#F9F9Fc;
  display:inline-block;
  cursor:pointer;
  text-align:center;
  margin:0 0.75em 0.25em;

  -webkit-border-radius: 1.0em;
     -moz-border-radius: 1.0em;
          border-radius: 1.0em;

  -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
     -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
          box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
}

/*.quadraticButton:nth-child(odd){
  margin-bottom:2.75em;
  animation-duration: 0.25s;
  animation-name: loseOddQuadraticButton;
}*/

@keyframes pressQuadraticButton {
  from {
    margin-bottom: 0.25em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
  } to {
    margin-bottom: 0em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
  }
}

@keyframes pressOddQuadraticButton {
  from {
    margin-bottom: 2.75em;

    -webkit-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
       -moz-box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
            box-shadow: 0 0.75em 1.25em 0.25em rgba(128,128,128,0.25);
  } to {
    margin-bottom: 2.5em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
  }
}

.quadraticButton:hover {
  animation-duration: 0.25s;
  animation-name: pressQuadraticButton;

  margin-bottom: 0em;
    
    -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
       -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
            box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
}

/*.quadraticButton:nth-child(odd):hover {
  animation-duration: 0.25s;
  animation-name: pressOddQuadraticButton;

  margin-bottom: 2.5em;
    
  -webkit-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
     -moz-box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
          box-shadow: 0 0.25em 0.25em 0em rgba(0,0,0,0.4);
}*/

.quadraticButtonIcon {
  margin:3em 0 2em;
}

.quadraticButtonIcon svg {
  width:30%;
  fill:#28337B;
}

.quadraticButtonToppic {
  margin-bottom:2.5em;
  font-size: 1.25em;
}

.quadraticButtonLink {
  color:#28337B;
}

.quadraticButton:hover .quadraticButtonLink {
  color:#D6915A;

  -webkit-filter: drop-shadow(0em 0em 0.5em rgba(214,145,90, 0.4));
     -moz-filter: drop-shadow(0em 0em 0.5em rgba(214,145,90, 0.4));
          filter: drop-shadow(0em 0em 0.5em rgba(214,145,90, 0.4));
}

.quadraticButton:hover .quadraticButtonIcon svg {
  fill:#D6915A;

  -webkit-filter: drop-shadow(0em 0em 1.5em rgba(214,145,90, 0.4));
     -moz-filter: drop-shadow(0em 0em 1.5em rgba(214,145,90, 0.4));
          filter: drop-shadow(0em 0em 1.5em rgba(214,145,90, 0.4));
}


/* 
//////////////////////////////////////////////////////////////
/////////////////////////////// Footer ///////////////////////
//////////////////////////////////////////////////////////////
*/

.footer {
  float:left;
  width:100%;
  padding:4em 0;
  color:#676767;
  line-height:1.5em;
  font-size:0.9em;

  background-color: #EEEEF2;
}

.footer a {
  color:#D6915A;
  text-decoration: none;
}

.footer a:hover {
  color:#28337B;
}

.footer .highlight {
  color:#28337B;
  font-size:1.1em;
}

.footerMainRow {
  float:left;
  width:100%;
}

.footerSubRow {
  float:left;
  width:95%;
  margin-left:5%;
}

.copyrightLine {
  margin-top:4em;
}

.copyrightLine a {
  display:inline-block;
  margin-right: 3em;
}

.copyrightLine span {
  display:inline-block;
  float:right;
}

.copyrightLine span a {
  margin: 0;
}

.footerListingTitle {
  float:left;
  margin-right: 1.5em;
}


.endOfPageLine {
  float:left;
  width:100%;
  height:0.6em;
  background-color:#28337B;
}