/* fira-sans-extra-condensed-300 - latin */
@font-face {
    font-family: 'Fira Sans Extra Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/fira-sans-extra-condensed-v10-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/fira-sans-extra-condensed-v10-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/fira-sans-extra-condensed-v10-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/fira-sans-extra-condensed-v10-latin-300.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-regular - latin */
@font-face {
    font-family: 'Fira Sans Extra Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/fira-sans-extra-condensed-v10-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/fira-sans-extra-condensed-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/fira-sans-extra-condensed-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/fira-sans-extra-condensed-v10-latin-regular.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-italic - latin */
@font-face {
    font-family: 'Fira Sans Extra Condensed';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/fira-sans-extra-condensed-v10-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/fira-sans-extra-condensed-v10-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/fira-sans-extra-condensed-v10-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/fira-sans-extra-condensed-v10-latin-italic.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-500 - latin */
@font-face {
    font-family: 'Fira Sans Extra Condensed';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/fira-sans-extra-condensed-v10-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/fira-sans-extra-condensed-v10-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/fira-sans-extra-condensed-v10-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-500.woff') format('woff'), /* Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/fira-sans-extra-condensed-v10-latin-500.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-600 - latin */
@font-face {
    font-family: 'Fira Sans Extra Condensed';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/fira-sans-extra-condensed-v10-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/fira-sans-extra-condensed-v10-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/fira-sans-extra-condensed-v10-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-600.woff') format('woff'), /* Modern Browsers */
    url('../fonts/fira-sans-extra-condensed-v10-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/fira-sans-extra-condensed-v10-latin-600.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}
/* shadows-into-light-regular - latin */
@font-face {
    font-family: 'Shadows Into Light';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/shadows-into-light-v15-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/shadows-into-light-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/shadows-into-light-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/shadows-into-light-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/shadows-into-light-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/shadows-into-light-v15-latin-regular.svg#ShadowsIntoLight') format('svg'); /* Legacy iOS */
}




html{font-size: 16px;}
body{
    font-family: 'Fira Sans Extra Condensed', sans-serif;
    color: #575756;
    font-size: 1rem;
    background: #fff
}

em{font-style: italic}
h1, h2{font-weight: 400;font-size: 2.6rem;font-family: "Shadows Into Light", fantasy}
h2{color: #ff0033;font-weight: 600}
h3{font-weight: 400; font-size: 1.6rem;margin-bottom: 2rem;font-family: "Shadows Into Light", fantasy}
h4{font-size: 1.25rem;font-weight: 700; color: #aec65e}
.page--index #ce-9 h4{margin-top: 2rem;}
p{margin-bottom: 1.2rem}
main ul{margin: 0.3rem 0 1.25rem;}
main li{padding-left: 0.5rem;list-style-type: circle;margin-left: 1.5rem;font-size: 1.25rem}
main a{color: #2781c0;transition: 0.3s ease-out}
main a:hover,
main a:focus,
main a:active{color: #44923c;}


.centered{text-align: center}
.hidden{display: none;}

.flex .container{display: flex;}

main .row{padding: 7rem 0 3rem 0;}
.formrow{padding: 0.3rem 0 0.7rem;display: table;width: 100%;}




header .topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #fff;
    z-index: 555;
    transition: 0.5s ease-out
}

.mobile-hamburger{display: none;}
.header--identity{width: 25%;}
.logo-image{width: auto;height: 90px;transition: 0.5s ease-out;display: block;}
.fixedNav-in .logo-image{height: 70px;width: auto;}
.header--navigation{width: 75%;}
.fixedNav-in header{height: 70px}
header + .content--wrapper{margin-top: 122px;}
.fixedNav-in .menu{margin-top: 1rem;}

/*   TEASER STYLES   */
.teaser{
    padding-top: 100px;
    height: 70vh;
    background: #f2f3f5;
    margin-bottom: 15vh;
}
.teaser .container{
    box-sizing: border-box;
    position: relative;
    height: 60vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
    background: url(../globals/img/kinderschwimmen-teaser-3.jpg) no-repeat center center;
    background-size: cover;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.teaser h1{
    bottom: 0;
    left: 0;
    position: absolute;
    color: #ff0033;
    background: #f2f3f5;
    padding: 0.3rem 0.5rem 0.3rem 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3.6rem;
    margin-bottom: 0;
    line-height: 1;
}
.teaser h1::after{
    width: 180px;
    height: 175px;
    position: absolute;
    top: -90px;
    right: -100px;
    content: "";
    display: block;
    background: url(../globals/img/frosch.png) no-repeat center center;
    background-size: contain;

}
.teaser .multipleContents{
    height: 60vh;
    width: 45%;
    background: rgba(0,60, 80, 0.3);
    transform: translate(-5vw, 10vh);
}

.teaser .multipleContents p{margin-left: 5.5vw;font-size: 1.3rem;color: #fff;margin-bottom: 0.8rem;}
.teaser .multipleContents p:first-child{
    padding-top: 15vh;
}
.teaser .multipleContents p > a{
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
}
.teaser .multipleContents .quick-returning{display: none;color: #011053}

main p, main table{font-size: 1.25rem;}

main .row{
    margin: 4rem 0;
}




/* CONTENT STYLES */
main figure{
    padding: 0 5vw 0 3vw;
    display: block;
    box-sizing: border-box;
    position: relative;
}
main figure img{
    display: block;
    box-shadow: 0 0 4px rgba(0,0,0,0.7);
}
figure::before{
    display: block;
    position: absolute;
    height: 45%;
    bottom: -3rem;
    left: 0;
    right: 0;
    background: #eee;
    content: "";
    z-index: 1;
}
figure .imgWrapper{
    position: relative;
    z-index: 99
}

.content33 figure{
    padding: 0;
    margin-bottom: 0.75rem;
}
.content33 figure::before{display: none;}

.form--trigger{
    position: absolute;
    z-index: 333;
    display: block;
    right: 5vw;
    left: auto;
    padding: 0.75rem 2rem;
    color: #fff;
    text-decoration: none;
    width: 200px;
    float: right;
    margin-top: 1rem;
    border-bottom: 2px solid #515e26;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    font-size: 2rem;font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}

.textRight .content50R .contentElement{
    padding: 0 8vw 0 2vw;
}
.textLeft .content50L .contentElement{
    padding: 0 2vw 0 8vw;
}



#ce-2 figure::before,
#ce-4 figure::before,
#ce-6 figure::before{background: #c4e1e8;}
#ce-2 h2,
#ce-4 h2,
#ce-6 h2{color: #ff0033;}
#ce-2 h3,
#ce-4 h3,
#ce-6 h3{
    color: #aec65e;
}
#ce-2 .form--trigger,
#ce-4 .form--trigger,
#ce-6 .form--trigger{background: #aec65e}

#ce-3 figure::before{background: #d7edeb;}
#ce-3 h2{color: #aec65e;}
#ce-3 h3{color: #ff0033;}
#ce-3 .form--trigger{background: #aec65e}

#ce-5 figure::before{background: #dcecda;}
#ce-5 h2{color: #aec65e;}
#ce-5 h3{color: #ff0033;}
#ce-5 .form--trigger{background: #aec65e; border-bottom: 2px solid #1c4a18}
.form--trigger:hover,
.form--trigger:focus,
.form--trigger:active{color: #fff;}

#ce-6 figure + h4{
    margin-top: 4rem;
    color: #406884;
    padding: 0 5vw 0 3vw;
}
#ce-6 h4 + .multipleContents{
    padding: 0 5vw 0 3vw;
}
.cite{
    background: #f0f0f0;
    font-style: italic;
    line-height: 2;
    text-align: center;
    color: #222;
}
.cite p{font-size: 1.5rem;}
.cite .contentElement{position: relative}
.cite .contentElement::before{
    top: -1rem;
    left: -4rem;
    content: "„";
    color: #ccc;
    font-size: 8rem;
    line-height: 2rem;
    position: absolute;
}








/* Automatische Ausgabe der Kursdaten CDATA */
.c--area{
    display: table;
    position: relative;
    width: 100%;
}
.c--field{
    float: left;
    position: relative;
    z-index: 101;
    padding-top: 4.2rem;
}
.c--field h4{
    font-size: 1.5rem;
}
.textRight .c--field{padding-left: 3vw;}
.c--line{margin-bottom: 0;}
.c--block{color: #333;font-weight: 500;}







.form--overlay{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000 url(../globals/img/water-bg.jpg) no-repeat center center;
    background-size: cover;
    visibility: hidden;
    opacity: 0;
    transition: 0.7s ease;
}
.form--in .form--overlay{
    z-index: 866;
    visibility: visible;
    opacity: 1;
    overflow: hidden;
}
.form--in{overflow: hidden;}
.form--overlay-closer{
    color: #fff;
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 32px;
    line-height: 32px;
    padding-right: 2.5rem;
    background: url(../globals/img/overlay-closer.png) no-repeat center right;
    background-size: 32px auto;
    opacity: 0.75;
    transition: 0.3s ease-out;
}
.form--overlay-closer:hover{opacity: 1;}
.form--content{visibility: hidden;opacity: 0;width: 1200px;height: 80vh;margin-top: 5vh;position: fixed;z-index: 2;left: 50%;margin-left: -600px;background: transparent;transition: opacity 0.7s ease;color: #666; overflow: hidden;}
.form--in .form--content{z-index: 888;opacity: 1;visibility: visible;transition: opacity 0.7s ease;}
.form--in.form--hide .form--content{opacity: 0;}

.form--main{
    width: 540px;
    height: 70vh;
    box-sizing: border-box;
    padding: 3rem;
    background: #c4ced1;
    position: absolute;
    left: 50%;
    margin-left: -270px;
    box-shadow: 0 0 4px rgba(0,0,0,0.9);
    overflow: hidden;
}

.form--indicator{
    width: 200px;
    background: rgba(26, 39, 44, 0.7);
    position: absolute;
    height: 56vh;
    top: 7vh;
    left: 50%;
    margin-left: -470px;
}

.form--indicator ul{display: flex;flex-direction: column; height: 100%}
.form--indicator ul li{height: 33%;}
.form--indicator a{display: block;padding: 3rem 1rem 0 1rem;height: 100%;color: #394b52;font-weight: 300;}
.form--indicator ul li a::before{
    content: "";
    font-size: 2rem;
    font-weight: 200;
    display: block;
}
.form--indicator ul li:first-of-type a::before{content: "01";}
.form--indicator ul li:nth-of-type(2) a::before{content: "02";}
.form--indicator ul li:last-of-type a::before{content: "03";}

.form--navigation[data-view="child"] li:first-of-type a{color: #61848f;}
.form--navigation[data-view="parents"] li:first-of-type a,
.form--navigation[data-view="parents"] li:nth-of-type(2) a{color: #61848f;}
.form--navigation[data-view="infos"] li a{color: #61848f;}
.form--infos{
    width: 200px;
    background: rgba(223, 231, 233, 0.15);
    position: absolute;
    height: 56vh;
    top: 7vh;
    left: 50%;
    margin-left: 270px;
}
.sideFrog{
    position: absolute;
    bottom: -3rem;
    width: 160px;
    height: auto;
    right: 1rem;
}
.form--body{
    position: relative;
    width: 100%;
    transition: 0.7s ease-out;
}

.form--body section{
    width: 100%;
    height: 70vh;
    position: relative;
}
/*
.sec--child{background: green;}
.sec--parents{background: blue;}
.sec--infos{background: red;}
*/
.show-sec-child .form--body{margin-top: 0;}
.show-sec-parents .form--body{margin-top: -70vh;}
.show-sec-infos .form--body{margin-top: -140vh;}

.formrow{margin: 0 3rem 0.3rem 3rem;width: calc(100% - 6rem)}
.formrow label{font-size: 0.875rem;color: #222;display: block;line-height: 1.1;}
.formrow .hint{display: block;font-size: 0.75rem;display: none;}
.formrow input[type="text"]{
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.2rem 1rem;
    line-height: 2.2;
    -webkit-appearance: none;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.formrow select{
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 1rem;
    line-height: 2.2;
    -webkit-appearance: none;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.formrow textarea{
    box-sizing: border-box;
    width: 100%;
    min-height: 3rem;
    -webkit-appearance: none;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.formrow input[type="date"],
.locValidation input[type="text"],
.phoneValidation input[type="text"]{
    display: block;
    box-sizing: border-box;
    width: 70%;
    padding: 0.2rem 1rem;
    line-height: 2.2;
    border: 1px solid #999;
    -webkit-appearance: none;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
input[data-toggle="datepicker"]{
    background-image: url(../globals/img/cal-icon.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}
#setSchisser .button-on{background: #399bb9}
.nextFormSec{
    width: 70%;
    margin-left: 15%;
    position:absolute;
    bottom: 3rem;
    height: 60px;
    border: 0;
    background: #9fadb1;
    color: #fff;
    transition: 0.4s ease-out;
}
.nextHint{
    display: block;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    width: 70%;
    margin-left: 15%;
    text-align: center;
    position: absolute;
    bottom: 6rem;
    padding: 0.1rem;
    background: #d9a0ac;
    color: #8e162f;
    font-size: 0.75rem;
    border: 1px solid #8e162f;
    transition: 0.4s ease-out;
}
.nextHint.come-in{visibility: visible; opacity: 1;}
.nextHint.come-in + .nextFormSec{height: 45px;}

.formrow.error .hintReqSingle{display: block;}
.formrow.valid label{color: #1b7943}
.formrow.error input{border-left: 3px solid #8e162f;}
.formrow.valid input{border-left: 3px solid #1b7943;}
.formrow.error .hint{color: #8e162f;}

.birthDateValidation .hintTooOld{display: none;}
.birthDateValidation .hintTooYoung{display: none;}
.birthDateValidation.error-tooOld .hintTooOld{display: block;}
.birthDateValidation.error-tooYoung .hintTooYoung{display: block;}
.birthDateValidation.error-wrongDate .hintWrongDate{display: block;}

.phoneValidation.error-req .hintReq{display: block;}
.phoneValidation.error-nan .hintNaN{display: block;}

.locValidation.error-noLoc .hintNoLoc{display: block;}
.locValidation.error-nan .hintNaN{display: block;}
.locValidation.error-req .hintReq{display: block;}

.mailValidation .hint{display: none;}
.mailValidation.error-noAt .hintNoAt{display: block;}
.mailValidation.error-noMail .hintNoEmail{display: block;}
.mailValidation.error-req .hintReq{display: block;}





/* KONTAKT FORMULAR */
.contacts .container{
    background: #dedede;
    display: flex;
    height: 100%;
    position: relative;
}
.contacts h2{
    font-size: 2rem;
    color: #011053;
    padding: 2rem 0;
    text-align: center;
    width: 100%;
    height: 3rem;
    box-sizing: border-box;
}
.container > .contactData{
    height: 80%;
    width: 40%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(41,117, 167, 0.6);
    transform: translate(-5vw, 5vh);
    padding: 2rem 2rem 2rem 8vw;
    color: #fff;
}
.contactData a{color: #011053}
.contactForm{
    position: absolute;
    width: 50%;
    height: calc(80% - 5vh);
    bottom: 0;
    right: 0;
}
.contactForm .formLine{
    margin-bottom: 1rem;
    width: 90%;
}
.contactForm .formLine label{width: 120px;display: inline-block;font-size: 1.125rem;float: left}
.contactForm .formLine input[type="text"],
.contactForm .formLine input[type="email"]{
    width: calc(100% - 135px);
    padding: 0.5rem 0.66rem;
    line-height: 1.8;
    box-sizing: border-box;
}
.contactForm .formLine textarea{
    width: calc(100% - 135px);
    height: 8rem;
    padding: 0.5rem 0.66rem 0.5rem 1.51rem;
    line-height: 1.8;
    box-sizing: border-box;
}



.header--navigation .icon--datenschutz,
.header--navigation .icon--impressum{
    display: none;
}
.footerMenu .icon--index,
.footerMenu .icon--team,
.footerMenu .icon--kontakt{display: none;}





.websiteFooter{background: #f1f1f1;padding-top: 2rem;padding-bottom: 2rem;}
.websiteFooter address,
.websiteFooter address .mobile-call{color: #949494}

.footerMenu ul{
    margin-top: 0;
}
.footerMenu .menu > li > a{color: #626262;font-size: 0.875rem;transition: 0.3s ease;line-height: 1.5}
.footerMenu a:hover{color: #222;}

.credits{
    padding: 2rem 0;
    text-align: center;
}
.creditslink{
    color: #626262;
    font-style: italic;
    font-size: 0.875rem;
    transition: 0.3s ease;
    line-height: 1.5
}


.scroller {
    width: 2em;
    height: 2em;
    background: rgba(0,0,0,0.2) url('../globals/img/toparr.svg')no-repeat center center;
    background-size: 50% auto;
    color: #fff;
    position: fixed;
    z-index: 222;
    bottom: 2em;
    right: -2em;
    -moz-transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    overflow: hidden;
    display: block;
    text-indent: 100px;
    white-space: nowrap;
}
.scroller.come-in {
    right: 1em;
}


@media screen and (max-width: 1366px){
    main p, main table{font-size: 1rem;}
    .teaser{height: 80vh;}
    .teaser .container{height: 70vh;}
    .teaser .multipleContents p:first-child{padding-top: 10vh;}
}


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



    .form--content{height: 90vh;top: 0;}
    .form--main{
        width: 540px;
        height: 90vh;
        padding: 2rem 3rem;
    }
    .form--body section{height: 90vh;}
    .show-sec-parents .form--body{margin-top: -90vh;}
    .show-sec-infos .form--body{margin-top: -180vh;}
    .formrow.valid{padding-bottom: 0.2rem;}

}

@media screen and (max-width: 1200px){
    .form--content{
        width: 100%;
        left: auto;
        margin-left: 0;
    }
}

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

    h2{font-size: 2rem;}
    h3{font-size: 1.6rem;}
    .textRight .content50R .contentElement{padding: 0 1rem 0 0;}
    .textLeft .content50L .contentElement{padding: 0 0 0 1rem;}
    .c--field{float: none;display: block;clear: both;padding-top: 3rem;}


    .form--indicator{
        width: 200px;
        margin-left: -500px;
    }
    .form--infos{
        width: 200px;
        margin-left: 300px;
    }

}

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

}

@media screen and (max-width: 853px){
    .flex .container{flex-direction: column}
    .flex.textRight .container{flex-direction: column-reverse}
    .logo-image{height: 70px;width: auto;}
    header .topbar{height: 70px}
    .teaser{padding-top: 70px;margin-bottom: 8vh;}
    .teaser .multipleContents{width: 50%;}
    .teaser .multipleContents p > a{letter-spacing: 2px;}

    .contacts h2{padding-left: 2rem;padding-right: 2rem;}
    .contactForm{width: 60%;}

    .menu{margin-top: 1rem;}
    .footerMenu .contentElement{margin-top: 2rem;padding-top: 2rem;border-top: 1px solid #949494}
    .footerMenu ul{
        display: table;
        margin: auto;
        border-left: 0;
    }
    .footerMenu li{float: left;margin: auto;}
    .footerMenu li a{padding: 0 1rem;}

    .form--main{
        width: 70vw;
        left: auto;
        right: 0;
        margin: 0;
    }
    .form--indicator{width: 30vw;left: 0;margin-left: 0;}
    .form--infos{display: none;}

}

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

    .teaser{
        height: calc(100vh - 70px);
        min-height: 420px;
        padding: 0;
        margin-bottom: 5vh;
        display: flex;
        overflow-x: hidden;
    }
    .teaser .container{
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
        background: url(../globals/img/kinderschwimmen-teaser-mobile-3.jpg) no-repeat center center;
        background-size: cover;
    }
    .teaser .multipleContents{background: rgba(0,60, 80, 0.7)}
    .contacts{height: auto;}
    .contacts .container{background: #dedede; display: block;}
    .container > .contactData,
    .container > .contactForm,
    .contacts h2{width: 100%;float: none;margin-bottom: 2rem;transform: translate(0,0); position: static; height: auto;}
    .contactForm .formLine label{display: block;width: 100%;}
    .contactForm .formLine input[type="text"],
    .contactForm .formLine input[type="email"],
    .contactForm .formLine textarea{width: 100%}

    .teaser .container > .content100C{float: none;}
    .teaser .multipleContents{
        width: 100%;
        margin: 30vh 0 3vh 0;
        transform: translate(0,0);
    }
    .teaser .multipleContents p{margin-bottom: 0.6rem;}
    .teaser .multipleContents p:first-child{padding-top: 1.5rem;}
    .teaser .multipleContents p > a{font-size: 1rem;display: block;text-align: center}
    .teaser h1{
        bottom: 0.5rem;
        left: 1rem;
        right: 1rem;
        font-size: 2rem;
        text-align: center;
    }

    /* -----------------------------------------------------------

HAMBURGER Styles

----------------------------------------------------------- */
    .container > .mobile-hamburger{
        float: right;margin-right: 1rem;display: inline-block;
    }
    .off-canvas-trigger{
        font:inherit;
        display:inline-block;
        overflow:visible;
        margin: 10px 0 0 0;
        padding: 5px 0 5px 5px;
        cursor:pointer;
        transition-timing-function:linear;
        transition-duration:.15s;
        transition-property:opacity,-webkit-filter;
        transition-property:opacity,filter;
        transition-property:opacity,filter,-webkit-filter;
        text-transform:none;
        color:inherit;
        border:0;
        background-color:transparent;
    }
    .hamburger-box {
        position:relative;
        display:inline-block;
        width:32px;
        height:20px
    }
    .hamburger-inner {
        top:50%;
        display:block;
        margin-top:-2px
    }
    .hamburger-inner,.hamburger-inner:after,.hamburger-inner:before {
        position:absolute;
        width:36px;
        height:2px;
        transition-timing-function:ease;
        transition-duration:.15s;
        transition-property:-webkit-transform;
        transition-property:transform;
        transition-property:transform,-webkit-transform;
        border-radius:2px;
        background-color:#575756
    }
    .hamburger-inner:before{width: 44px}
    .hamburger-inner:after,.hamburger-inner:before {
        display:block;
        content:''
    }
    .hamburger-inner:before {
        top:-10px;
        left: -8px
    }
    .hamburger-inner:after {
        bottom:-10px
    }
    .off-canvas-trigger .hamburger-inner {
        transition-timing-function:cubic-bezier(.55,.055,.675,.19);
        transition-duration:.1s
    }
    .off-canvas-trigger .hamburger-inner:before {
        transition:top .1s .14s ease,opacity .1s ease
    }
    .off-canvas-trigger .hamburger-inner:after {
        transition:bottom .1s .14s ease,-webkit-transform .1s cubic-bezier(.55,.055,.675,.19);
        transition:bottom .1s .14s ease,transform .1s cubic-bezier(.55,.055,.675,.19);
        transition:bottom .1s .14s ease,transform .1s cubic-bezier(.55,.055,.675,.19),-webkit-transform .1s cubic-bezier(.55,.055,.675,.19)
    }
    .off-canvas-trigger.is-active .hamburger-inner {
        transition-delay:.14s;
        transition-timing-function:cubic-bezier(.215,.61,.355,1);
        -webkit-transform:rotate(45deg);
        transform:rotate(45deg)
    }
    .off-canvas-trigger.is-active .hamburger-inner:before {
        top:0;
        transition:top .1s ease,opacity .1s .14s ease;
        opacity:0
    }
    .off-canvas-trigger.is-active .hamburger-inner:after {
        bottom:0;
        transition:bottom .1s ease,-webkit-transform .1s .14s cubic-bezier(.215,.61,.355,1);
        transition:bottom .1s ease,transform .1s .14s cubic-bezier(.215,.61,.355,1);
        transition:bottom .1s ease,transform .1s .14s cubic-bezier(.215,.61,.355,1),-webkit-transform .1s .14s cubic-bezier(.215,.61,.355,1);
        -webkit-transform:rotate(-90deg);
        transform:rotate(-90deg)
    }

    h1, h2{font-size: 1.8rem;}
    header + .content--wrapper{margin-top: 0;}
    main > .row:first-of-type{margin-top: 0;}
    .hidden.mobileVisible{display: block;}
    .flex .container{flex-direction: column}
    .wide .container > div:first-of-type,
    .wide .container > div:last-of-type{padding: 0 1rem;}
    .content50L{margin-bottom: 2rem;}
    .footerMenu ul{padding: 2rem 0 0 0}

    .textLeft .content50L .contentElement,
    .textRight .content50R .contentElement{padding: 0;}
    main .row{margin: 0;}
    main figure{padding: 0 1rem;}
    .form--trigger{
        width: 90%;
        left: 1rem;
        right: 1rem;
        box-sizing: border-box;
        float: none;
    }

    .form--overlay-closer{
        position: absolute;
        top: 0;
    }
    .form--content{
        top: 2rem;
        bottom: 0;
        margin-top: 0;
        height: auto;
    }

    .form--indicator{
        top: 0;
        width: 100vw;
        height: 4rem;
    }
    .form--indicator ul{width: 100%;margin: 0;padding: 0;flex-direction: row}
    .form--indicator ul li{width: 33%;margin: 0;padding: 0;height: 100%}
    .form--indicator a{padding: 0;font-size: 0.75rem}
    .form--indicator ul li a::before {font-size: 1rem;}

    .form--main{
        top: 4rem;
        width: 100vw;
        padding: 2rem 1rem 2rem 1rem;
        overflow-y: scroll;
        height: auto;
        bottom: 0;
    }

    .form--body section{
        height: auto;
        min-height: 100%;
        position: absolute;
        width: 100%;
        padding-bottom: 4rem;
    }
    .nextFormSec{bottom: 0;}
    .nextHint{bottom: 3rem;}
    .sec--child{min-height: 80vh}
    .sec--parents{left: 100vw;min-height: 80vh}
    .sec--infos{left: 200vw;min-height: 80vh}

    .show-sec-child .form--body{margin-top: 0;}
    .show-sec-parents .form--body{margin-top: 0;margin-left: -100vw;}
    .show-sec-infos .form--body{margin-top: 0;margin-left: -200vw;}

    .formrow{margin: 0 0 0.3rem 0;width: 100%}

    .header--navigation .icon--datenschutz,
    .header--navigation .icon--impressum{
        display: block;
    }
    .header--navigation .icon--datenschutz{
        margin-top: 3rem;
    }

    .header--navigation .icon--datenschutz a,
    .header--navigation .icon--impressum a
    {
        font-size: 1rem;
        color: #888;
    }
}

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

}