*, *::before, *::after{ margin: 0;padding: 0;border: 0;background-color: transparent; background-repeat:no-repeat !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

html{font-size:16px; cursor:default;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

body   
{
    background: #ffffff;    
    color: #000000;
    margin-top:20px
}

body, input{
    font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: lighter
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 2em;
    line-height: 1.4em;
     -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    -ms-word-break: normal;
    /* Non standard for webkit */
    word-break: normal;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, .h3, h4, h5, h6
{
    font-size: 1rem;
    text-transform:uppercase;
    font-weight: 200;    
}

h1{font-size: 1.6rem}

h2{font-size: 1.5rem;  margin-top:1.3em; margin-bottom:1.3em}

h3, .h3{font-size: 1.2rem; margin: 1.3em auto}

h4{font-size: 1.1rem}




input.text
{
    width: 320px;    
    border: 1px solid #000000;
    margin: 15px 5px 0;
    padding: 0 5px;
    height: 2em; 
    font-size: 1rem;
}

.text-label{width:320px; display:inline-block; text-align:right; margin-top: 15px;}

/* MISC  ----------------------------------------------------------*/

.clear{clear: both}
.bold{font-weight: bold}

.fl{float:left}
.error{color:#cd0000}
.db{display:block}

/*>> NEW*/

html.sticky-flex{min-height: 100vh; min-width:320px}

.sticky-flex form{height:100vh; display: flex; flex-direction: column}
.sticky-flex header, .sticky-flex footer {flex-shrink:0}
.sticky-flex main {flex: 1 0 auto}		

.content-wrapper{max-width:1360px; margin:0 auto; padding: 20px; min-width:320px}

.title, h1{font-size: 1.45rem; text-transform:uppercase; font-weight:normal}
.btn{font-size: 1.1rem; text-transform:uppercase; text-decoration:none; border:solid .2em #004ba6; padding:.3em 1em; color:#004ba6; font-weight:normal; display:inline-block; cursor:pointer}

header .btn.membership,  #section-home .btn.membership{color:#ffffff; background-color:#004ba6}
#section-teaser .btn.membership{color:#ffffff; border-color:#ffffff; background-color:transparent}

footer{background-color:#004ba6}
footer .content-wrapper{padding-top:.5em;padding-bottom:.5em}
.footer-menu{text-align:center; font-size:0.8rem}
.footer-menu ul, .copyright{display:inline-block}
.footer-menu ul li{display:inline} 
.footer-menu ul li::after{content:' • '; display:inline} 
.footer-menu a{text-decoration:none} 
.footer-menu *{color:#ffffff!important}

#impressum{background-size: contain; background-image:url(Images/info_impressum.png?renew); padding-bottom:25%; max-width:400px}

header{background-size: cover; background-image:url(Images/header_full.jpg); background-position:bottom center; margin-top:10%}

header .content-wrapper{position:relative; text-align:left; min-height:50%}

#logo{background-size: contain; background-image:url(Images/logo.png); min-width:145px; overflow:hidden; display:inline-block; width:22%; transform:translateY(-50%)}
#logo::after{content:""; display:inline-block; padding-bottom:113.6%}

.title{color:#004ba6; padding-bottom:40px}
#aMembership{position: absolute; right:20px; top: -3em}

ul.col{width:100%}
ul.col-3{-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 30px; -moz-column-gap: 30px;  column-gap: 30px}
ul.col-2{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px;  column-gap: 40px}
ul.col li{display:inline-block; overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;
}

section{margin: 2em 0;text-align:center}

ul.circle li{display:block; text-align:center} 
ul.circle li div{background-size:contain; background-position:center; width:100%; max-width: 250px; margin: 0 auto }
ul.circle li div::before{content:'';display:inline-block; padding-bottom:100%}

ul.circle li div.li1{background-image:url(Images/li1.jpg)}
ul.circle li div.li2{background-image:url(Images/li2.jpg)}
ul.circle li div.li3{background-image:url(Images/li3.jpg)}


#section-teaser{background-size: cover; background-image:url(Images/teaser_home_full.jpg); background-position:top center; color:#ffffff; text-align:right; padding: 20px}
#section-teaser p{padding-left:48%}

#section-faq h1{ margin:1.5em 0}
ul.check{overflow:hidden}
ul.check li{padding-left:2em; position:relative; top:0px;left:0; text-align:left; line-height:1.2em; min-height:5em; padding-bottom:1em}
ul.check li::before{content:'•'; color:#e07800; font-size:4rem; position:absolute; top:0; left:0px}

ul.check h4{text-transform:uppercase; margin-bottom:.4em}

#impressum{background-image:url(Images/impressum.png); background-size: contain; max-width:400px; width:100%}
#impressum::after{content:"";display:inline-block;padding-bottom:100%;}

ol li{margin-left: 1em}


.pnl-fields{text-align:left}
.pnl-fields .btn{margin:20px auto 0 325px; display:block; clear:both}
.pnl-fields .error{margin:0px auto 5px 330px; display:block; clear:both}
.pnl-fields, .h3{max-width: 800px; margin-left: auto; margin-right:auto}
.pnl-fields h3,.pnl-fields .h3{text-align:center}

ul.details {list-style-type: none; max-width:800px; margin:0 auto; text-align:left}
ul.details li div {width:60%; display: inline-block}
ul.details li.first {margin-top:.5em}
ul.details li.second {padding-left: 5%}

#section-home{display:none}
@media screen and (max-width:560px)
{   
    body{margin-top:40px}
    header .content-wrapper{text-align:center}

    ul.col-2, ul.col-3{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
    ul.col li{display:block; text-align:center }

    ul.check li::before{right:0px}
    ul.check li{padding-top:2em}

    header{background-image:url(Images/header_small.jpg); text-align:center}


    section{text-align:center}
    #section-home{display:block}
    #aMembership{display:none}
    
    #section-teaser{background-image:url(Images/teaser_home_small.jpg); margin-left:-20px; margin-right:-20px}
}

@media screen and (max-width:800px)
{ 
    .text-label, input.text, .pnl-fields .error{display:block; width: 100%; text-align:left; margin:0}

    .pnl-fields .btn{margin-left:auto; padding-left:3em; padding-right:3em}
    .pnl-fields .error.fl{display:block}
}

@media (min-width: 560px) {
  html {font-size: calc(16px + ((1vw - 5.6px) * 0.2941));}
}
/* Prevent font scaling beyond this breakpoint */
@media (min-width: 1920px) {
   html{font-size: 20px}
}