/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */
 
/* Font sizes */
h1, h2, h3, h4, h5, h6{font-weight: 300}

html, body {
    font-size: calc(0.95rem + 1 * ((100vw - 600px) / 540));
}

h1{
    font-size: calc(2.4rem + 6 * ((100vw - 600px) / 540));
}

h2{
    font-size: calc(1.5rem + 5 * ((100vw - 600px) / 540));
}
h2.header{
    font-size: calc(2rem + 5 * ((100vw - 600px) / 540));
    font-weight: 100;
}
h3{
    font-size: calc(1.5rem + 5 * ((100vw - 600px) / 540));
}
.full-banner .section h1{
  font-size: calc(2.4rem + 6 * ((100vw - 600px) / 540));
}
.full-banner .section h2{
  font-size: calc(1.5rem + 5 * ((100vw - 600px) / 540));
}
p.header{
    font-size: calc(1.3rem + 2 * ((100vw - 600px) / 540));
    font-weight: 100;
}
p.s-header{
    font-size: calc(1.1rem + 2 * ((100vw - 600px) / 540));
    font-weight: 100;
}
p.caption{
    font-size: calc(0.9rem + 1 * ((100vw - 600px) / 540));
    font-weight: 100;
    font-style: italic;
}
.card .card-title{
    font-size: calc(1.6rem + 1 * ((100vw - 600px) / 540));
    font-weight: 300;
    margin-bottom: 15px;
    display: inline-block;
}
.card .card-action .card-title{
    font-size: calc(1.3rem + 2 * ((100vw - 600px) / 540));
    font-weight: 300;
    margin-bottom: 0;
}
footer.page-footer .footer-copyright{
    font-size: calc(0.7rem + 1 * ((100vw - 600px) / 540));
}

/* GENERAL ADDITIONS */
@media only screen and (min-width: 993px) {
  .container {
    width: 80%;
  }
}
p {
  line-height: 1.6;
  margin: 0.7rem 0;
}
.card-content p {
  line-height: 2
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}
.section-href{position: relative;}
.section-href div{position: absolute; top: 136px;}

.inline_image {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(0,0,0,0.1);
  border-radius: 10px 10px 10px 10px;
}
.inline_image img{
  padding: 0;
  box-shadow: 0 0 15px -5px #000; 
  border-radius: 10px 10px 10px 10px;
}
.inline_image .col img{
  margin:0.5rem 0;
}
@media only screen and (min-width: 601px) {
  .inline_image {
    padding: 1.3rem;
    box-shadow: 0 0 15px -5px #000 inset;
  }
  .inline_image img{
    padding: 1.3rem;
    box-shadow: 0 0 15px -5px #000;
  }
  .inline_image .col img{
    margin:0;
  }
}

.image .material-placeholder.active img{
  z-index: 2001 !important;
}

.card .image img{
  margin: 0 auto;
}

.background-extra {
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
}

/* MATERIALIZE ADDITIONS */
.card .card-footer{
  position: absolute;
  bottom: 0;
  left:0;
  right: 0;
}
.card img{vertical-align: bottom;}

.card .material-icons{vertical-align: bottom; margin-right: .3rem}
.hide-init{opacity: 0}


@media only screen and (min-width: 993px) {
  .valign-wrapper-l-only {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
           align-items: center;
  }
  .valign-wrapper-l-only .valign {
    display: block;
  }
}

.parallax-container {
  min-height: 400px;
  xline-height: 0;
  height: auto;
  color: rgba(255,255,255,.9);
}
.parallax-container.full-height {
  max-height: 800px;
}

.parallax-container .section {
  width: 100%;
}

.parallax-container h2.header{
  font-weight: 200;
}
.parallax-container p.header{
  font-weight: 200;
}

img.responsive-img, video.responsive-video {width: 100%;}

.row.no-mar-bot{margin-bottom: 0}
.col.alpha{padding-left: 0;}
.col.omega{padding-right: 0;}

/* MATERIALIZE CORRECTIONS */
.input-field .prefix ~ .select-wrapper{
    margin-left: 3rem;
    width: calc(100% - 3rem);
}

button.waves-block{
  width: 100%;
}

.materialboxed:hover:not(.active) {
  opacity: 1;
}

/* AUDIO CONTROLS */
audio {
  display: none;
}
.audiorow {
  margin-bottom: 80px;
}
.audiocontainer{
  position: relative;
}
.audiocontainer a{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}
.audiocontainer a.stop{
  display: none;
}

.audiocontainer .btn-floating.btn-large {
  width: 80px;
  height: 80px;
}
.audiocontainer .btn-floating.btn-large i {
  line-height: 80px;
  font-size: 2.5rem;
}

.audiorow .fi{
  z-index: 100;
  left:-40px;
  top;-40px;
  width:40px;
  height: 40px;
  box-shadow: 0px 0px 15px -5px #000; 
  border-radius: 30px 30px 30px 30px;
}

.modal-content .modalinner .audiocontainer {
  height: 15px;
}
.modal-content .modalinner .audiocontainer .btn-floating.btn-large {
  width: 90px;
  height: 90px;
}
.modal-content .modalinner .audiocontainer .btn-floating.btn-large i {
  line-height: 90px;
  font-size: 2.8rem;
}

#s-maintiles .card .audiocontainer{
  position: static;  
}
#s-maintiles .card .audiocontainer .btn-floating.btn-large {
  width: 150px;
  height: 150px;
}
#s-maintiles .card .audiocontainer .btn-floating.btn-large i {
  line-height: 150px;
  font-size: 3.5rem;
}

#intro-4 .audiocontainer .btn-floating.btn-large {
  width: 100px;
  height: 100px;
}
#intro-4 .audiocontainer .btn-floating.btn-large i {
  line-height: 100px;
  font-size: 3rem;
}
#intro-4 .audiorow .fi{
  z-index: 100;
  left:-50px;
  top;-50px;
  width:40px;
  height: 40px;
  box-shadow: 0px 0px 15px -5px #000; 
  border-radius: 30px 30px 30px 30px;
}

/* GLOW EFFECT */
@-webkit-keyframes glow_pink {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

@-webkit-keyframes glow_amber {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffab00, 0 0 40px #ffab00, 0 0 50px #ffab00, 0 0 60px #ffab00, 0 0 70px #ffab00;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 40px #ffc400, 0 0 50px #ffc400, 0 0 60px #ffc400, 0 0 70px #ffc400, 0 0 80px #ffc400, 0 0 90px #ffc400;
  }
}

@-webkit-keyframes glow_lime {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #aeea00, 0 0 40px #aeea00, 0 0 50px #aeea00, 0 0 60px #aeea00, 0 0 70px #aeea00;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 40px #c6ff00, 0 0 50px #c6ff00, 0 0 60px #c6ff00, 0 0 70px #c6ff00, 0 0 80px #c6ff00, 0 0 90px #c6ff00;
  }
}

/* Headermenu */
#headerMenu{
  width: 100%;
  position: absolute;
  top:0;
  z-index: 1000;
}
#headerMenu .inner{
  width: 100%;
}
#headerMenu nav{
  height: 74px;
  line-height: 74px;
}
@media only screen and (min-width: 601px) {
  #headerMenu nav{
    height: 74px;
    line-height: 74px;
  }
}

#headerMenu .inner nav,
#headerMenu .inner.pin-top nav {
  transition: all .5s ease-out;
  background: none;
  xbackground-image: url('../images/background/trans/pattern/arabesque.png'); 
  background-image: url('../images/background/trans/texture/navy.png'); 
  xbackground-image: url('../images/background/solid/colored/bush.png'); 
  background-color: rgba(0,0,0, 0.2);
  color: rgba(255,255,255, 0.9);
}
#headerMenu .inner.pinned nav{
  xbackground-color: rgba(0, 150, 255, 0.7);
  background-color: rgba(0,0,0, 0.5);
  color: rgba(255,255,255, 0.8);
}
#headerMenu .inner nav a,
#headerMenu .inner.pin-top nav a,
#headerMenu .inner.pinned nav a {
  color: rgba(255,255,255, 0.8);
}

#headerMenu .inner nav .dropdown-content,
#headerMenu .inner.pin-top nav .dropdown-content {
  background-image: url('../images/background/trans/texture/navy.png'); 
  background-color: rgba(0,0,0, 0.4);
}
#headerMenu .inner.pinned nav .dropdown-content {
  xbackground-color: rgba(0, 150, 255, 0.9);
  background-color: rgba(0,0,0, 0.6);
}
#headerMenu .inner nav ul.dropdown-content li:hover,
#headerMenu .inner.pin-top nav ul.dropdown-content li:hover{
  background-color: rgba(0,0,0, 0.2);
  color: rgba(0, 234, 255, 1);
}
#headerMenu .inner.pinned nav ul.dropdown-content li:hover{
  color: #fff;
}
#headerMenu .inner nav ul.dropdown-content a,
#headerMenu .inner.pin-top nav ul.dropdown-content a,
#headerMenu .inner.pinned nav ul.dropdown-content ul a{
  color: #fafafa;
}
#headerMenu .inner nav ul.dropdown-content a:hover,
#headerMenu .inner.pin-top nav ul.dropdown-content a:hover{
  color: rgba(0, 234, 255, 1);
}
#headerMenu .inner.pinned nav ul.dropdown-content a:hover{
  xcolor: #fff;
  color: rgba(0, 234, 255, 1);
}

#headerMenu li.languages {
  position: relative;
}
#headerMenu li.languages .fi{
  position: absolute;
  left:50%;
  top:50%;
  box-shadow: 0px 0px 15px -5px #000; 
  border-radius: 30px 30px 30px 30px;
}

#headerMenu #nav-mobile.side-nav{
  transition: all .5s ease-out;
  background: none;
  xbackground-image: url('../images/background/trans/pattern/arabesque.png'); 
  background-image: url('../images/background/trans/texture/navy.png'); 
  background-color: rgba(0, 136, 232, 0.7);
  color: rgba(255,255,255, 0.8);
  font-weight: 600;
  width: 300px;
}
#headerMenu #nav-mobile.side-nav a{
  color: rgba(255,255,255, 0.8);
  font-size: 1rem;
}
#headerMenu #nav-mobile.side-nav li{
  padding:0 5px 0 10px;
}
#headerMenu #nav-mobile.side-nav li i{
  margin-right: 5px;
}
#headerMenu #nav-mobile.side-nav li:hover {
  background: rgba(255,255,255, 0.2);
}

/* logo */
#logo-container{font-weight: 200; overflow: hidden}
#logo-container img{
  width: auto; 
  height: 50px; 
  margin-top: 10px; 
  float: left
}
#logo-container img+img{
  width: auto; 
  height: 40px; 
  margin-top: 15px; 
  margin-left: 10px;
}
@media only screen and (max-width: 992px) {
  #logo-container img{
    float: right;
  }
  #logo-container img+img{
    margin-left: 0;
    margin-right: 10px;
  }
  nav #logo-container.brand-logo {
    left: auto;
    -webkit-transform:none;
    -ms-transform: none;
    transform: none;
    right: 0;
    width: 80%;
    text-align: right;
  }
}

/* Footer */
footer.page-footer{
  background:none;background-image:none; 
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.4),rgba(0,0,0,.4));
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.4),rgba(0,0,0,.4));
  background-image:-o-linear-gradient(top,rgba(255,255,255,.4),rgba(0,0,0,.4));
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4),rgba(0,0,0,.4));
  background-image:linear-gradient(top,rgba(255,255,255,.4),rgba(0,0,0,.4));
  background-image:linear-gradient(to bottom,rgba(255,255,255,.4),rgba(0,0,0,.4));
  background-position:left bottom;
  background-repeat:repeat-x; 
  xbackground-color: rgba(0, 150, 255, 1);
  background-color: rgba(21, 101, 192, 1);
  position: relative;
}
footer.page-footer .background-extra{
  background-image: url('../images/background/trans/texture/navy.png'); 
  xbackground-image: url('../images/background/trans/pattern/arabesque.png');
  box-shadow: 0 0 100px 1px rgba(255,255,255,0.3) inset;
}
footer.page-footer .container {
  position: relative;
  z-index: 1;
}
footer.page-footer .background-extra:before{
  content: url('../images/background/stefan/karte_rot_400px.png');
  position: absolute;
  left:0;
  top:-30%;
  opacity: 0.8;
}


footer.page-footer {
  margin: 0;
  overflow: hidden;
  box-shadow: 0px 0px 15px -4px #000;
}

footer.page-footer ul.smallicons li {
  line-height: 30px;
}
footer.page-footer ul.smallicons li + li {
  padding-top: : 13px;
}
footer.page-footer ul.smallicons .material-icons{
  vertical-align: middle; 
  margin-right: .5rem; 
  font-size: 25px;
}

footer.page-footer ul.smallicons li a { color: rgba(255,255,255, 0.7); font-weight: 600;}
footer.page-footer ul.smallicons li a:hover { color: #fff; text-decoration: underline;}
footer.page-footer ul.smallicons li.mmxdivider { color: rgba(255,255,255, 0.7); height:0px; line-height:0px;margin-top:10px;margin-bottom:10px;max-width:130px;border-bottom: 1px solid rgba(255,255,255, 0.8);}

footer.page-footer .flogos{text-align: center; margin-top: 20px;}
@media only screen and (min-width: 700px) {
  footer.page-footer .flogos{margin-right: 60px;}
}
footer.page-footer .flogos .flogo{background: rgba(255,255,255, 0.3); box-shadow: 0px 0px 10px -5px #000; border-radius: 10px; padding-left: 10px;padding-right: 10px;}
footer.page-footer .flogos .flogo p{
  font-size: .9rem; 
  line-height: 1.3rem; 
  margin: 0; 
  margin-bottom:15px; 
  padding-bottom: 20px; 
  color:#fff;
}
footer.page-footer .flogos .flogo + .flogo p{margin-top:15px;}
footer.page-footer .flogos .flogo img{width: 65%;height: auto;margin-top: 15px;}
footer.page-footer .flogos .flogo + .flogo img{width: 50%; margin-top: 15px;}

footer.page-footer .footer-copyright{
  background: rgba(0,0,0,0.2);
  line-height: 1.5;
  height: auto;
  min-height: 50px;
  overflow: visible;
}
footer.page-footer .footer-copyright .material-icons{
  vertical-align: text-bottom; 
  margin-right: .3rem;
}

/**
  RGBA
  
  blue footer: rgba(0, 136, 232, 0.7)
  blue footer alt rgba(0, 150, 255, 0.70)
  orange rgba(255, 146, 0, 0.7)
  dark orange rgba(255, 78, 0, 0.7)
  red rgba(255, 31, 0, 0.3)
  yellow rgba(255, 230, 0, 0.7)
  green  rgba(116, 255, 0, 0.7)
  turkis rgba(0, 234, 255, 0.7)
  
  SOLID
  
  blue darken-2 #1565c0 | rgba(21, 101, 192, 0.7)
  light-green darken-3 #558b2f
  red darken-2 #d32f2f
  lime darken-4 #827717
  #ffab00 amber accent-4 | rgba(255, 171, 0, 0.7)
  purple #9c27b0 
  
  cyan accent-4 #00b8d4
  #26a69a teal lighten-1
  #c51162 pink accent-4
  #009688 teal
  #ff9100 orange accent-3 | brown darken-4 #3e2723 
  #9575cd deep-purple lighten-2
  
  
  
  teal accent-3 #1de9b6
  cyan darken-4 #006064 
  deep-orange accent-3 #ff3d00
  brown darken-3 #4e342e
/**/


/* banner top bottom */
/* general */
.full-banner .section{
  background: rgba(255,255,255,.7);
}
.full-banner .section h1,
.full-banner .section h2{
  font-weight: 200;
}
.full-banner .section h1{
}
.full-banner .section h2{
  padding: 0;
  margin: 0;
}

/* top banner */
#index-banner .start-button{
  position: absolute; bottom: 5%; left: 0; width: 100%;
}

#index-banner .full-banner .section{
  background: none;
  background-image: url('../images/background/trans/texture/navy.png'); 
  xbackground-image: url('../images/background/trans/texture/tex2res4.png'); 
  background-color: rgba(0, 136, 232, 0.7);
  box-shadow: 0px 0px 15px -5px #000 inset; 
}
/*reposition banner text vertically */
/**/
#index-banner .full-banner .section h1{
  margin-top: 100px;
  margin-right: 10px;
}
#index-banner .full-banner .section h2{
  margin-right: 10px;
}

#index-banner .full-banner .section{
  position: absolute;
  width: 30%;
  height: 100%;
  min-width: 400px;
  left: 5%;
}
@media only screen and (max-width: 400px) {
  #index-banner .full-banner .section{
    width: 100%;
    min-width: 100%;
    left: 0;
  }
}
/**/
#index-banner .full-banner .section h1{
  font-weight: 800;
  color:rgba(255,255,255, 0.9);
}
#index-banner .full-banner .section h2{
  font-weight: 400;
  color:rgba(255,255,255, 0.7);
}
#index-banner .full-banner.parallax-container{
  background-image: url('../images/background/trans/texture/stucco.png');
  background-color: rgba(139, 65, 4, 0.1);
}
#xxindex-banner .full-banner .container:before{
  content: url('../images/background/stefan/karte_blau_400px.png');
  position: absolute;
  left:0;
  top:15%;
  width: 30%;
  height: auto;
  opacity: 0.8;
}

/* bottom banner */
#bottom-banner{
  background: none;
  background-image: url('../images/background/trans/texture/stucco.png');
  background-color: rgba(139, 65, 4, 0.1);
  box-shadow: 0px 0px 20px -1px #000; 
}

#bottom-banner .full-banner .section{
  background: none;
  xbackground-image: url('../images/background/trans/texture/navy.png');
  background-image: url('../images/background/trans/texture/tex2res4.png'); 
  background-color: rgba(0,0,0, 0.3);
  box-shadow: 0px 0px 15px -5px #000 inset; 
  border-radius: 10px;
  margin:40px 0;
}
#bottom-banner .full-banner .section h1{
  font-weight: 800;
  color:rgba(255,255,255, 0.9);
}
#bottom-banner .full-banner .section h2{
  font-weight: 400;
  color:rgba(255,255,255, 0.7);
}

#bottom-banner .section h1{
  color: #fff;
  font-size: calc(3.5rem + 10 * ((100vw - 600px) / 540));
  font-weight: 800;
  text-shadow: 5px 5px rgba(0,0,0,0.5);
}

/* sections */
/* intro 1 vorwort */
#intro-1{
  background: none;
  xbackground-image: url('../images/background/solid/colored/morocco-blue.png'); 
  background-image: url('../images/background/trans/texture/navy.png'); 
  position: relative;
  overflow-x: hidden;
  box-shadow: 0px 0px 20px -1px #000; 
}
#intro-1 .background-extra:before{
  xcontent: url('../images/background/stefan/kreide1_400_flip.png');
  content: url('../images/background/stefan/karte_orange_400px.png');
  position: absolute;
  right:-150px;
  top:-100px;
  z-index: 0;
  opacity: 0.8;
}
#intro-1 .background-extra{
  xbox-shadow: 0px 0px 100px -50px rgba(0,0,0,0.3) inset;
  box-shadow: 0px 0px 100px -50px rgba(0,0,0,0.4) inset; 
}
#intro-1 .section p{
  padding:0 20px;
  color: #fff;
}
#intro-1 .section h2.header{
  font-size: calc(2rem + 10 * ((100vw - 600px) / 540));
  font-weight: 600;
}
#intro-1 .section p.header{
  calc(1.1rem + 2 * ((100vw - 600px) / 540));
  font-weight: 300;
  line-height: 1.3;
  font-style: italic;
}

/* intro 5 nachwort */
#intro-5{
  background: none;
  xbackground-image: url('../images/background/solid/colored/bush.png'); 
  background-image: url('../images/background/trans/texture/navy.png'); 
  position: relative;
  overflow-x: hidden;
  box-shadow: 0px 0px 20px -1px #000; 
}
#intro-5:before{
  content: url('../images/background/stefan/karte_orange_400px_flip.png');
  position: absolute;
  left:-150px;
  top:-100px;
  z-index: 0;
  opacity: 0.8;
}
#intro-5 .background-extra{
  xbox-shadow: 0px 0px 100px -50px rgba(0,0,0,0.3) inset; 
  box-shadow: 0px 0px 100px -50px rgba(0,0,0,0.4) inset; 
}

#intro-5 .section h2{
  padding:0 20px;
  color: #fff;
}
#intro-5 .section p{
  padding:0 20px;
  color: #fff;
}
#intro-5 .section h2.header{
  font-size: calc(2rem + 10 * ((100vw - 600px) / 540));
  font-weight: 600;
}
#intro-5 .section p.header{
  calc(1.1rem + 2 * ((100vw - 600px) / 540));
  font-weight: 300;
  line-height: 1.3;
  font-style: italic;
}

/* intro 4 parole */
#intro-4{
  background: none;
  background-image: url('../images/background/trans/texture/stucco.png'); 
  position: relative;
  overflow-x: hidden;
  box-shadow: 0px 0px 20px -1px #000 inset; 
}
#intro-4 .background-extra{
  box-shadow: 0px 0px 200px 10px rgba(255,255,255,0.4) inset; 
  box-shadow: 0px 0px 150px -10px rgba(0,0,0,0.3) inset; 
  background-image: url('../images/background/trans/texture/navy.png'); 
}
#intro-4 .section h1{
  color: #afff;
  font-family: "Mansalva", sans-serif;
  font-size: calc(4.5rem + 10 * ((100vw - 600px) / 540));
  font-weight: 400;
  text-shadow: 5px 5px rgba(0,0,0,0.5);
}

#intro-4 .section h1.glow {
  color: rgba(255,255,255,0.7);
  text-align: center;
  -webkit-animation: glow_lime 0.8s ease-in-out infinite alternate;
  -moz-animation: glow_lime 0.8s ease-in-out infinite alternate;
  animation: glow_lime 0.8s ease-in-out infinite alternate;
}

/* intro 6 backstage */
#intro-6{
  background: none;
  background-image: url('../images/background/trans/texture/stucco.png'); 
  background-color: rgba(0,0,0,0.5);
  box-shadow: 0px 0px 20px -1px #000; 
  position: relative;
  overflow: hidden;
}
#intro-6 .section p{
  padding:0;
  color: #fff;
}
#intro-6 .section p.header{
  xfont-weight: 400;
  line-height: 1.3;
  font-style: italic;
}

/* intro 3 klassenzimmer */
#intro-3{
  background: none;
  xbackground-image: url('../images/background/solid/colored/bush.png'); 
  background-image: url('../images/background/trans/texture/navy.png'); 
  box-shadow: 0px 0px 20px -10px #000 inset; 
  position: relative;
  overflow-x: hidden;
}
#intro-3 .background-extra:after{
  content: url('../images/background/stefan/kreide1_400_flip2.png');
  position: absolute;
  right:-150px;
  top:-100px;
  z-index: 0;
  opacity: 0.8;
}
#intro-3 .background-extra{
  box-shadow: 0px 0px 100px -30px #fff inset; 
}

#intro-3 .textbackground {
  background-image: url('../images/background/trans/texture/navy.png'); 
  background-color: rgba(0,0,0,0.2);
  padding: 20px;
  box-shadow: 0px 0px 15px -5px #000 inset; 
  border-radius: 10px 10px 10px 10px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 992px) {
  #intro-3 .textbackground {
    padding: 15px;
    margin-top: 20px;
  }
}
#intro-3 .card{
  xz-index: 1;
}

#intro-3 .section h2{
  padding:0 20px;
  color: #fff;
}
#intro-3 .section p{
  padding:0 20px;
  color: #fff;
}
#intro-3 .section p.header{
  xfont-weight: 400;
  line-height: 1.3;
  font-style: italic;
}

/* intro 2 waage */
#intro-2{
  background: none;
  xbackground-image: url('../images/background/solid/colored/morocco-blue.png'); 
  background-image: url('../images/background/trans/texture/navy.png'); 
  box-shadow: 0px 0px 20px -5px #000 inset; 
  position: relative;
  overflow: hidden;
}

#intro-2 .background-extra{
  box-shadow: 0px 0px 100px -50px rgba(0,0,0,0.4) inset; 
}

#intro-2 .textbackground {
  xbackground-image: url('../images/background/trans/texture/stucco.png'); 
  background-color: rgba(255,255,255,0.5);
  padding: 20px;
  box-shadow: 0px 0px 15px -5px #000 inset; 
  border-radius: 10px 10px 10px 10px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 992px) {
  #intro-2 .textbackground {
    padding: 15px;
    margin-top: 10px;
  }
}
#intro-2 .section h2{
  padding:0 20px;
  color: #37474f;
}
#intro-2 .section p{
  padding:0 20px;
  color: #37474f;
}
#intro-2 .section p.header{
  xfont-weight: 400;
  line-height: 1.3;
  font-style: italic;
}

/* css grid base */
.cssgrid.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap:10px;
  background-color: rgba(255,255,255,0.1);
  color: #444;
  max-width: 1200px;
}
.cssgrid .box {
  z-index: 1;
}
.cssgrid .card{margin: 0}

/* tiles */
/* area */
#s-maintiles {
  background-image: url('../images/background/solid/colored/cork-board.png'); 
  padding-top: 50px;
  padding-bottom: 50px;
  box-shadow: 0px 0px 15px -5px #000 inset; 
  position: relative;
  overflow: hidden;
}

#s-maintiles .background-extra {
  box-shadow: 0 0 45px 15px rgba(0,0,0,0.4) inset;
  background-image: url('../images/background/trans/texture/stucco.png'); 
}

#s-maintiles .background-extra:after{
  xcontent: url('../images/background/stefan/kreide1_400.png');
  content: url('../images/background/stefan/karte_rot_400px_flip.png');
  position: absolute;
  left:-200px;
  bottom:-140px;
  width: 30%;
  height: auto;
  z-index: 0;
  opacity: 0.8;
}

#s-maintiles .background-extra:before{
  xcontent: url('../images/background/stefan/kreide3_400.png');
  content: url('../images/background/stefan/karte_blau_400px.png');
  position: absolute;
  right:-10px;
  top:-10px;
  z-index: 0;
  opacity: 0.8;
}

/* cards */
#s-maintiles .box{
  position: relative;
  box-shadow: 0 0 15px -5px rgba(0,0,0,0.8);
}
#s-maintiles .box:after{
  content: '';
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 55px -15px rgba(255,255,255,0.7) inset;
}
#s-maintiles .card{
  background-image: url('../images/background/trans/texture/navy.png'); 
}
#s-maintiles .card-content{min-height: 330px}

#s-maintiles .card .card-content .valign-wrapper:before {
  content: url('../images/background/pin_100.png');
  position: absolute;
  top:-3%;
  left:-3%;
}

#s-maintiles .card-reveal{
  background-image: url('../images/background/trans/texture/navy.png'); 
}
#s-maintiles .card-content .valign-wrapper {
  min-height: 300px;
}

#s-maintiles .card .card-content .card-title {
  line-height: 1.2;
}
#s-maintiles .card .card-reveal span+div{
  font-size: calc(1.4rem + 1 * ((100vw - 600px) / 540));
  line-height: 1.2;
}

/* Modals */
/* close link */
a.modal-action.modal-close{position: fixed; right: 25px; z-index: 1000;}
a.modal-action.modal-close i{color:#fff; font-size: 40px; padding: 10px; background-color:rgba(255, 78, 0, 0.7); border-radius: 40px;box-shadow: 0px 0px 15px -5px #000;}

/* General modal */
.text-modal.modal.bottom-sheet{
  min-height: 60% !important;
  max-height: 80% !important;
  overflow-x: hidden;
  z-index: 2000 !important;
  color:rgba(255,255,255,0.9); 
}
.text-modal.modal.bottom-sheet{
  background-color: rgba(0, 136, 232, 0.8);
  background-image: url('../images/background/trans/texture/navy.png'); 
}
.text-modal.modal .modal-content {
  position: relative;
  z-index: 1;
}
.text-modal:after{
  content: url('../images/background/stefan/karte_rot_400px.png');
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  left:0;
  top:-20%;
  width: 30%;
  height: auto;
  z-index: -10;
  opacity: 0.8;
}

.text-modal .modalinner{
  padding: 0;
}
.text-modal .modalinner h1.modaltitle{
  color:rgba(255,255,255,0.9); 
  font-weight: 600;
  margin-right: 5rem;
}
.text-modal .modalinner .modaltext h2 {
    margin-top: 1.5rem;
 }
.text-modal .modalinner .modaltext{
  color:rgba(255,255,255,1); 
  font-weight: 300;
  background-color: rgba(0,0,0,0.1);
  padding: 1rem 0.5rem;
  border-radius: 10px;
}
.text-modal .modaltext p:first-child {
  margin-top: 0;
}
.text-modal .modaltext p:last-child {
  margin-bottom: 0;
}
.text-modal blockquote {
  font-weight: bold;
  background-color: rgba(0,0,0,0.1);
  padding: 1.2rem 0.8rem;
  border-radius: 10px;
  border-left: 10px solid rgba(255, 146, 0, 0.7);
}
.text-modal li {
  list-style-type:disc;
  list-style-position: outside;
  line-height: 1.6;
  margin-left: 1rem;  
}
.text-modal li+li {
  margin-top: 0.7rem;  
}
@media only screen and (min-width: 601px) {
  .text-modal .modalinner{
    padding: 0 1.5rem;
  }
  .text-modal .modalinner .modaltext{
    padding: 2rem 1.25rem;
    box-shadow: 0 0 15px -8px #000 inset;
  }
  .text-modal blockquote {
    padding: 1.5rem 1rem;
    box-shadow: 0 0 15px -8px #000 inset;
  }
}
@media only screen and (min-width: 993px) {
  .text-modal .modalinner .modaltext h2 {
    margin-top: 0;
  }
}

/* vorwort nachwort modal */
#bottom-vorwort.text-modal.modal.bottom-sheet,
#bottom-nachwort.text-modal.modal.bottom-sheet
{
  min-height: 80% !important;
  max-height: 100% !important;
}
#bottom-vorwort.text-modal.modal.bottom-sheet:after,
#bottom-nachwort.text-modal.modal.bottom-sheet:after
{
  content: url('../images/background/stefan/karte_orange_400px.png');
}
#bottom-vorwort.text-modal.modal.bottom-sheet {
  background-color: #ffab00;
  box-shadow: 0px 0px 150px -50px rgba(0,0,0,0.3) inset; 
}
#bottom-nachwort.text-modal.modal.bottom-sheet {
  background-color: #ffab00;
  box-shadow: 0px 0px 150px -50px rgba(0,0,0,0.3) inset; 
}

/* tiles modal */
.tile-modal.text-modal.modal.bottom-sheet {
  min-height: 80% !important;
  max-height: 100% !important;
}
.tile-modal.text-modal.modal.bottom-sheet{
  background-image: url('../images/background/trans/texture/iron-grip.png'); 
  box-shadow: 0px 0px 150px 10px rgba(255,255,255,0.4) inset; 
}
#bottom-tile1modal.text-modal:after{
  content: url('../images/background/stefan/karte_orange_400px.png');
}
#bottom-tile2modal.text-modal:after{
  content: url('../images/background/stefan/karte_gelb_400px.png');
}
#bottom-tile3modal.text-modal:after{
  content: url('../images/background/stefan/karte_blau_400px.png');
}
#bottom-tile4modal.text-modal:after{
  content: url('../images/background/stefan/karte_orange_400px.png');
}
#bottom-tile5modal.text-modal:after{
  content: url('../images/background/stefan/karte_blau_400px.png');
}
#bottom-tile6modal.text-modal:after{
  content: url('../images/background/stefan/karte_turkis_400px.png');
}

#bottom-tile1modal.text-modal{
  background-color: #1565c0;
}
#bottom-tile2modal.text-modal{
  background-color: #558b2f;
}
#bottom-tile3modal.text-modal{
  background-color: #d32f2f;
}
#bottom-tile4modal.text-modal{
  background-color: #827717;
}
#bottom-tile5modal.text-modal{
  background-color: #3e2723;
}
#bottom-tile6modal.text-modal{
  background-color: #9c27b0;
}

/* contest modal */
#bottom-contest .modal-content{
  padding: 0;
  z-index: 2000 !important;
}

/* Mail modal */
.mailform.modal.bottom-sheet{
  max-height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  z-index: 2000 !important;
}
.mailform.modal.bottom-sheet{
  background:none;background-image:none; 
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.4));
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.4));
  background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.4));
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.4));
  background-image:linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.4));
  background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.4));
  background-position:left bottom;
  background-repeat:repeat-x; 
}
.mailform.modal.bottom-sheet{
  background-color: rgba(21, 101, 192, 1);
}
.mailform.modal .background-extra{
  background-image: url('../images/background/trans/texture/navy.png'); 
}
.mailform.modal .modal-content {
  position: relative;
  z-index: 1;
}
.mailform.modal .background-extra:after{
  content: url('../images/background/stefan/karte_rot_400px.png');
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  left:0;
  top:-20%;
  width: 30%;
  height: auto;
  z-index: 1;
  opacity: 0.8;
}

.mailform.modal .modal-content{
  padding: 30px;
}
.mailform.modal .modal-content > div.row.no-mar-bot{
  background: rgba(255,255,255,0.5);
  padding: 40px 20px 10px 20px;
  box-shadow: 0 0 100px 20px #fff inset;
}
.xmailform .row.result{
  position: absolute;
  left: 0;
  right: 0;  
  top: 45%;
}
.mailform.modal .card{
  background-image: url('../images/background/trans/texture/navy.png');
}
.mailform.modal .input-field label {
  color: #666;
}

/* login modal */
.loginform.modal.bottom-sheet{
  max-height: 70%;
  min-height: 30%;
  overflow-x: hidden;
  z-index: 2000 !important;
}
.xloginform.modal.bottom-sheet{
  background:none;background-image:none; 
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.1));
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.1));
  background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.1));
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.1));
  background-image:linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.1));
  background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.1));
  background-position:left bottom;
  background-repeat:repeat-x; 
}
.loginform.modal.bottom-sheet{
  background-color: rgba(255, 171, 0, 1);
}
.loginform.modal .background-extra{
  background-image: url('../images/background/trans/texture/navy.png');
  box-shadow: 0px 0px 150px -20px rgba(255,255,255,0.4) inset; 
}
.loginform.modal .modal-content {
  position: relative;
  z-index: 1;
}
.loginform.modal .background-extra:after{
  content: url('../images/background/stefan/karte_orange_400px.png');
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  right:-5%;
  top:-20%;
  width: 30%;
  height: auto;
  z-index: 1;
  opacity: 0.8;
}

.loginform.modal .modal-content{
  padding: 30px;
}
.loginform.modal .modal-content > div.row.no-mar-bot{
  background: rgba(255,255,255,0.5);
  padding: 40px 20px 10px 20px;
  box-shadow: 0 0 100px 20px #fff inset;
}
.loginform.modal .card{
  background-image: url('../images/background/trans/texture/navy.png');
}
.loginform.modal .input-field label {
  color: #666;
}


/* owl sliders */
/* general */
.modalslider {
  padding: 0px;
  border-radius: 10px;
}
@media only screen and (min-width: 601px) {
  .modalslider {
    padding: 1rem;
    box-shadow: 0 0 15px -10px #000 inset;
    background-color: rgba(0,0,0,0.1);
  }
}
.modalslider .slidercontent {
  overflow: hidden;
}
.modalslider .owl-item .image {
  position:relative;
  margin: 0.5rem;
}
.modalslider .owl-item img{
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 15px -5px #000;
  border-radius: 10px 10px 10px 10px;
}
.modalslider .owl-item .text{
  color:rgba(255,255,255,1); 
  font-weight: 300;
}
.modalslider .owl-item .text .inner{
  width:95%; 
  margin:0 auto; 
  padding: 0;
}
@media only screen and (min-width: 993px) {
  .modalslider .owl-item .text .inner{width:100%;}
}

.owl-theme .owl-controls .owl-page span{
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  box-shadow: 0 0 15px -10px #000 !important;
}
@media only screen and (min-width: 993px) {
  .owl-theme .owl-controls .owl-page span{
    width: 30px !important;
    height: 30px !important;
  }
}

/* slider_5a_wirkung */
#slider_5a_wirkung .modalslider .owl-item .image:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  background-image: url('../images/background/trans/texture/stucco.png'); 
  background-repeat: repeat;
  background-color:rgba(0,0,0,0.1); 
  border-radius: 10px 10px 10px 10px;
}
#slider_5a_wirkung .modalslider {
  background-color: rgba(0,0,0,0.1);
}

/* slider_backstage */
#slider_backstage .modalslider {
  background-image: url('../images/background/trans/texture/navy.png'); 
  background-color: rgba(255, 146, 0, 0.5);
  padding: 0.5rem;
  box-shadow: 0 0 15px -5px #000 inset;
  border-radius: 10px;
}
@media only screen and (min-width: 993px) {
  #slider_backstage .modalslider {
    padding: 0.8rem;
  }
}
#slider_backstage .modalslider .owl-item .image {
  margin: 1rem;
}
#slider_backstage .modalslider .owl-item img{
  box-shadow: 0 0 15px -5px #000;
  border-radius: 10px 10px 10px 10px;
}

/* slider_klasse */
#slider_klasse .modalslider {
  background-image: none; 
  background-color: rgba(0,0,0,0.0);
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
@media only screen and (min-width: 601px) {
  #slider_klasse .modalslider {
    background-image: none; 
  background-color: rgba(0,0,0,0.0);
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }
}