body{
    background-color: #fff;
    color: #000;
    border-top: 10px solid #172d5b;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: helvetica,arial,verdana,sans-serif;
    transition: all 0.5s;
}

.wrapper{
    max-width: 1250px;
    width: 100%;
    margin: auto;
    transition: all 0.5s;
}

#header1{
    transition: all 0.5s;
}

#hnav{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
    transition: all 0.5s;
}

#hnav li{
    color: #172d5b;
    padding: 0 17px 0 15px;
    margin: 5px 0;
    display: inline-block;
    border-left: 2px solid #172d5b;
    transition: all 0.5s;
}

#hnav li:first-child{
    border-left: none;
    padding: 0 17px 0 0;
}

#hnav li:last-child{
    padding: 0 0 0 15px;
}

#hnav li a[href]:link, #hnav li a[href]:visited, #hnav li a[href]:hover, #hnav li a[href]:active, #hnav li a[href]:focus{
    text-decoration: none;
    color: #172d5b; 
}

#header2{
    background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(209,213,222,1) 20%);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(23,45,92,1) 20%);
    border-image-slice: 1;
    border-width: 2px;
    transition: all 0.5s;
}

#headercontainer{
    position: relative;
    height: 130px;
    transition: all 0.5s;
}

#startlink{
    z-index: 4000;
}

#logo1{
    width: 200px;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    border-right: 20px solid #fff;
    border-bottom: 20px solid #fff;
    transition: all 0.5s;
    z-index: 4000;
}

#logo2{
    display: none;
    width: auto;
    height: 100px;
    transition: all 0.5s;
}

#mobilenav{
    display: none;
    font-size: 300%;
    color: #172d5b;
    cursor: pointer;
    float: right;
    margin: 25px 0 auto auto;
    transition: all 0.5s;
}

#nav{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    list-style-type: none;
    text-align: right;
    transition: all 0.5s;
}

#nav li{
    display: inline-block;
    background: linear-gradient(0deg, rgba(255,221,0,1) 0%, rgba(232,187,23,1) 100%);
    margin: 0;
    padding: 10px 20px;
    border-left: 1px solid #172d5b;
    transition: all 0.5s;
}

#nav li:last-child{
    border-right: 1px solid #172d5b;
}

#nav li:hover{
    background: rgb(255,221,0);
}

#nav li a[href]:link, #nav li a[href]:visited, #nav li a[href]:hover, #nav li a[href]:active, #nav li a[href]:focus{
    text-decoration: none; 
    transition: all 0.5s;
}

#nav li .n1{
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 140%;
    display: block;
    text-align: left;
    text-decoration: none;
    margin: 0 0 -5px 0;
    transition: all 0.5s;
}

#nav li .n2{
    color: #172d5b;
    font-weight: bold;
    font-size: 130%;
    padding: 0 0 0 10px;
    display: block;
    text-align: left;
    text-decoration: none;
    margin: 0;
    transition: all 0.5s;
}

#header3{
    margin-top: 20px;
    text-align: right;
    position: relative;
    transition: all 0.5s;
}

#headerimage{
    display: block;
    position: relative;
    width: calc(100% - 220px);
    height: 300px;
    padding: 0;
    margin: 0 0 0 auto;
    transition: all 0.5s;
}

#headerimage li{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    padding: 0;
    background-color: #d1d5de;
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0;
    right: 0;
    list-style-type: none;
    transition: all 0.5s;
}

#cta{
    display: inline-block;
    position: absolute;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(0deg, rgba(255,221,0,1) 0%, rgba(232,187,23,1) 100%);
    padding: 0;
    margin: 0;
    height: 50px;
    border: 1px solid #172d5b;
    text-decoration: none;
    color: #172d5b;
    box-shadow: 10px 10px 18px -11px rgba(0,0,0,0.75);
    transition: all 0.5s;
}

#cta .ctaleft{
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 65px;
    height: 50px;
    background-image:url(/###VERSION###/images/ctaleft.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
    float: left;
    transition: all 0.5s;
}

#cta .ctaright{
    padding: 0 20px;
    margin: 14px auto auto auto;
    display: inline-block;
    height: 50px;
    font-size: 130%;
    font-weight: bold;
    float: right;
    transition: all 0.5s;
}

#main{
    clear: both;
    margin: 40px auto;
    transition: all 0.5s;
}

#content{
    display: inline-block;
    width: calc(100% - 350px);
    margin: 0 0 auto 0;
    vertical-align: top;
    line-height: 150%;
    transition: all 0.5s;
}

#content p{
    margin: 10px auto;
}

#content h1{
    margin: 25px auto 10px 0;
    padding: 0 0 10px 0;
    color: #172d5b;
    border-bottom: 2px solid #172d5b;
    font-size: 220%;
    font-weight: normal;
    line-height: 100%;
}

#content h2{
    margin: 25px auto 10px 0;
    color: #172d5b;
    font-size: 175%;
    font-weight: normal;
    line-height: 100%;
}

#content h3{
    margin: 20px auto 10px 0;
    color: #172d5b;
    font-size: 150%;
    font-weight: normal;
    line-height: 100%;
}

#content hr{
    height: 2px;
    border-width: 0;
    background-color: #172d5b;
}

#content .CMSImage{
    max-width: 100%;
    height: auto;
}

#content a[href]:link, #content a[href]:visited, #content a[href]:active, #content a[href]:focus{
    text-decoration: none; 
    color: #172d5b;
    border-bottom: 2px solid transparent;
}

#content a[href]:hover{
    border-bottom: 2px solid #ffd400;
}

#content .preview{
    margin: 20px auto 20px auto;
}

#content .previewlinkcontainer{
    text-align: right;
    margin: 0 0 20px auto;
}

#content #anfrage .error{
    color: #b30000;
    border: 2px solid #b30000;
    padding: 15px; 
    margin: 15px 0 15px 0;
    display: block;
    background-color: #ffc1c1;
}

#content #anfrage label{
    margin-top: 5px;
    margin-bottom: 2px;
    display: block;
    color: #172d5b;
    transition: all 0.5s;
}

#content #anfrage input[type=text]{
    width: calc(100% - 10px);
    max-width: 400px;
    border: none;
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;   
    padding: 5px;
    margin-bottom: 10px;
    transition: all 0.5s;
    border: 1px solid #172d5b;
    font-size: 100%;
    color: #000;
}

#content #anfrage input[type=text]::placeholder{
    font-size: 100%;
    color: #172d5b;
}

#content #anfrage input[type=text]:focus{
    outline: none;    
}

#content #anfrage textarea{
    font-family: helvetica,arial,verdana,sans-serif;
    resize: none;
    height: 140px;
    width: calc(100% - 10px);
    max-width: 400px;
    border: none;
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;   
    padding: 5px;
    margin-bottom: 10px;
    transition: all 0.5s;
    border: 1px solid #172d5b;
    font-size: 100%;
    color: #000;
}

#content #anfrage textarea::placeholder{
    font-size: 100%;
    color: #172d5b;
}

#content #anfrage textarea:focus{
    outline: none;    
}

#content #anfrage input[type=checkbox]{
    width: 25px;
    height: 25px;
    margin: 0px 5px -5px auto;
    border: 1px solid #172d5b;
    display: inline-block;
    background-color: #fff;
    transition: all 0.5s;
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}

#content #anfrage input[type=checkbox]:checked{
    background-color: #2d2a73;
}

#content #anfrage input[type=checkbox]:focus{
    outline: none;    
}

#content #anfrage button{
    display: block;
    padding: 10px 20px;
    background-color: #d1d5de;
    color: #172d5b;
    font-size: 120%;
    border: 1px solid #172d5b;
    margin: 10px auto 0 0;
    cursor: pointer;
}

#content #anfrage #simplecaptcha{
    height: 35px;
    width: auto;
    max-width: 300px;
    margin: 0 auto 5px 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    clear:left;
}

#content .ZoomContainer img{
    max-width: 100%;
    height: auto;
}

#content .ZoomContainer a[href]:hover{
    border-bottom: 2px solid transparent;
}

#content .widget_gallery_main_container{
    background-color: #d1d5de;
    text-align: center;
    padding: 10px 0 20px 0;
}
#content .widget_gallery_main_container a[href]:link, #content .widget_gallery_main_container a[href]:visited, #content .widget_gallery_main_container a[href]:hover, #content .widget_gallery_main_container a[href]:active, #content .widget_gallery_main_container a[href]:focus{
    text-decoration: none; 
    border: none
}

#content .widget_gallery_main_container .big_img{
    width: 100%;
    max-width: 900px;
    height: auto;
    padding: 20px 0 20px 0;
}

#content .widget_gallery_main_container .little_images img{
    margin: 2px 5px;
}

#content .accordion .panel{
    margin: 0 auto;
    height: 0;
    overflow: hidden;
    padding: 0 12px;
    box-sizing: border-box;
    transition: all 0.5s;
    background-color: #d1d5de;
}

#content .accordion input:checked~.panel{
    height: auto;
    padding: 0 12px 12px 12px;
    transition: all 0.5s;
}

#content .accordion label{
    cursor: pointer;
    background-color: #d1d5de;
    xborder: 1px solid #fff;
    display: block;
    margin-bottom: 4px;
    padding: 12px;
    width: 100%;    
    box-sizing: border-box;
    z-index: 100;  
    margin: 20px auto 0 0;
    color: #172d5b;
    font-size: 150%;
    font-weight: normal;
}

#content .accordion input{
    display: none;
}

#content .accordion input:checked+label:before{
    transition: 0.5s;
}

#content .member{
    border: 2px solid #d1d5de;
    padding: 20px 20px 20px 270px;
    margin: 0 auto 40px 0;
    position: relative;
    min-height: 180px;
    background-color: #fff;
}

#content .member h3{
    margin-top: 0;
}

#content .member .memberlogo{
    display: inline-block;
    width: 230px;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
    transition: all 0.5s;
}

#content .member .memberlogo:hover{
    border: none;
}

#content .member .memberlink{
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: inline-block;
}

#content .memberdetail{
    position: relative;
    width: 100%;
    transition: all 0.5s;
}

#content .memberdetail .memberdetailkontakt{
    float: left;
}

#content .memberdetail .memberdetaillogo{
    display: inline-block;
    width: 320px;
    background-size: contain;
    background-position: right top;
    background-repeat: no-repeat;
    height: 160px;
    float: right;
    transition: all 0.5s;
}

#content .memberdetail h2{
    clear: both;
}

#side{
    display: inline-block;
    width: 310px;
    margin: 0 0 auto 40px;
    vertical-align: top;
    transition: all 0.5s;
}

#snav{
    padding: 0;
    margin: 0 0 14px 0;
    list-style-type: none;
    text-align: right;
    transition: all 0.5s;
}

#snav li{
    display: inline-block;
    margin: 0 0 0 20px;
}

#snav li a[href]:link, #snav li a[href]:visited, #snav li a[href]:hover, #snav li a[href]:active, #snav li a[href]:focus{
    text-decoration: none; 
    font-size: 350%;
    color: #172d5b;
}

#stitle{
    background-color: #172d5b;
    padding: 100px 20px 20px 20px;
    width: calc(100% - 40px);
    text-transform: uppercase;
    color: #fff;
    font-size: 200%;
    margin: 0 0 20px 0;
}

#scontent{
    background-color: #d1d5de;
    padding: 20px;
    width: calc(100% - 40px);
    min-height: 200px;
    transition: all 0.5s;
}

#scontent{
    line-height: 150%;
}

#scontent h1, #scontent h2, #scontent h3{
    font-size: 120%;
    margin: 0 auto;
    color: #172d5b;
    font-weight: normal;
    line-height: 100%;
}

#scontent hr{
    height: 2px;
    border-width: 0;
    background-color: #172d5b;
}

#scontent a[href]:link, #scontent a[href]:visited, #scontent a[href]:hover, #scontent a[href]:active, #scontent a[href]:focus{
    text-decoration: none; 
    color: #172d5b;
    transition: all 0.5s;
}

#footer{
    border-top: 2px solid #172d5b;
    background: #d1d5de;
    padding: 20px 0 20px 0;
    transition: all 0.5s;
}

#fnav{
    margin: 0 auto 20px auto;
    padding: 0;    
    list-style-type: none;
    transition: all 0.5s;
}

#fnav li{
    color: #172d5b;
    display: inline-block;
    padding: 0 15px 0 17px;
    border-left: 2px solid #172d5b;
    transition: all 0.5s;
}

#fnav li:first-child{
    font-weight: bold;
    padding: 0 15px 5px 0;
    border-left: none;
    width: 100%
}

#fnav li:nth-child(2){
    padding: 0 15px 0 0;
    border-left: none;
}

#fnav li:last-child{
    padding: 0 0 0 15px;
}

#fnav li a[href]:link, #fnav li a[href]:visited, #fnav li a[href]:hover, #fnav li a[href]:active, #fnav li a[href]:focus{
    text-decoration: none;
    color: #172d5b; 
}

#hnavmobile{
    display: none;
    margin: 0 20px 20px 20px;
    padding: 0;
    list-style-type: none;
    transition: all 0.5s;
}

#hnavmobile li{
    display: block;
    width: auto;
    border: none;
    padding: 0;
    margin: 0 auto 5px auto;
    transition: all 0.5s;
}

#hnavmobile li a[href]:link, #hnavmobile li a[href]:visited, #hnavmobile li a[href]:hover, #hnavmobile li a[href]:active, #hnavmobile li a[href]:focus{
    text-decoration: none;
    color: #172d5b; 
}

#credits{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
    transition: all 0.5s;
}

#credits li{
    display: inline-block;
    font-size: 60%;
    color: #172d5b;  
    transition: all 0.5s;    
}

#credits li a[href]:link, #credits li a[href]:visited, #credits li a[href]:hover, #credits li a[href]:active, #credits li a[href]:focus{
    text-decoration: none;
    color: #172d5b; 
}

@media only screen and (max-width: 1400px) {
    .wrapper{ max-width: 1200px; }    
}

@media only screen and (max-width: 1300px) {
    .wrapper{ max-width: 1100px; }
    #hnav li{ padding: 0 12px 0 10px; }
    #hnav li:first-child{ padding: 0 12px 0 0; }
    #hnav li:last-child{ padding: 0 0 0 10px; }
    #header2{ height: 110px; }
    #headercontainer{ height: 110px; }
    #logo1{ width: 180px; }
    #nav li{ padding: 5px 15px; }
    #nav li .n1{ font-size: 135%; }
    #nav li .n2{ font-size: 125%; }
    #headerimage{ width: calc(100% - 200px); height: 270px; }
    #headerimage li{ height: 270px; }
    #cta .ctaright{ padding: 0 10px; font-size: 125%; }
    #content{ width: calc(100% - 320px); }
    #content .member{ padding: 20px 20px 20px 250px; }
    #content .member .memberlogo{ width: 210px; }
    #content .memberdetail .memberdetaillogo{ width: 280px; height: 140px; }
    #side{ width: 280px; }
}

@media only screen and (max-width: 1200px) {
    .wrapper{ max-width: 1000px; }
}

@media only screen and (max-width: 1100px) {
    .wrapper{ max-width: 900px; }
    #hnav li{ padding: 0 10px 0 8px; }
    #hnav li:first-child{ padding: 0 10px 0 0; }
    #hnav li:last-child{ padding: 0 0 0 8px; }
    #header2{ height: 100px; }
    #headercontainer{ height: 100px; }
    #logo1{ width: 140px; }
    #nav li{ padding: 2px 12px; }
    #nav li .n1{ font-size: 130%; }
    #nav li .n2{ font-size: 120%; }
    #headerimage{ width: calc(100% - 160px); height: 200px; }
    #headerimage li{ height: 200px; }
    #cta .ctaright{ padding: 0 8px; font-size: 120%; }
    #content{ width: calc(100% - 290px); }
    #content .member{ padding: 20px 20px 20px 230px; }
    #content .member .memberlogo{ width: 190px; }
    #content .memberdetail .memberdetaillogo{ width: 200px; height: 100px; }
    #side{ width: 250px; }
}

@media only screen and (max-width: 1000px) {
    .wrapper{ max-width: unset; }
    #hnav{ margin: 0 20px; }
    #header2{ background: linear-gradient(90deg, rgba(255,255,255,1) 10%, rgba(209,213,222,1) 10%); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, rgba(255,255,255,1) 10%, rgba(23,45,92,1) 10%); border-image-slice: 1; border-width: 2px; }
    #nav{ right: 0; }
    #headercontainer{ margin: 0 20px; }
    #header3{ margin: 20px 20px 0 20px; }
    #fnav{ margin: 0 20px 20px 20px; }
    #credits{ margin: 0 20px; }
    #main{ margin: 40px 20px; }    
}

@media only screen and (max-width: 900px) {
    body{ overflow-x: hidden; }
    .wrapper{ max-width: unset; }    
    #header1{ display: none; }
    #logo1{ display: none; }
    #logo2{ display: inline-block; }
    #header2{ margin: 20px 0 0 0; background: unset; border-bottom: unset; border-bottom-width: unset; border-image: unset; border-image-slice: unset; border-image-slice: unset; border-width: unset; }
    #nav{ display: none; bottom: unset; right: -280px; top: 80px; z-index: 4500; border-bottom: 1px solid #172d5b;}
    #nav li{ display: block; padding: 15px 30px; border-top: 1px solid #172d5b; border-right: 1px solid #172d5b; }
    #nav li .n1{ font-size: 140%; }
    #nav li .n2{ font-size: 130%; }
    #mobilenav{ display: inline-block; }
    #header3{ background-color: #d1d5de; margin: 20px 0; padding: 0 20px; border-top: 2px solid #172d5b; border-bottom: 2px solid #172d5b; }
    #headerimage{ width: 100%; height: 180px; }
    #headerimage li{ height: 180px; }
    #cta{ right: 10px; }    
    #content{ width: calc(100% - 260px); }
    #content .member{ padding: 20px 20px 20px 170px; min-height: 220px; }
    #content .member .memberlogo{ width: 130px; }
    #content .memberdetail .memberdetailkontakt{ float: unset; }
    #content .memberdetail .memberdetaillogo{ float: unset; width: 300px; height: 150px; max-width: 100%; background-position: left center; }
    #side{ width: 220px; }
    #fnav{ margin: 0 20px 10px 20px; }
    #fnav li{ display: block; width: auto; border: none; padding: 0; margin: 0 auto 5px auto; }
    #fnav li:first-child{ padding: 0; margin: 0 auto 10px auto;  }
    #fnav li:last-child{ padding: 0; }
    #hnavmobile{ display: inline-block; }
}

@media only screen and (max-width: 800px) {
    .wrapper{ max-width: unset; }
    #content{ width: 100%; }
    #side{ width: 100%; margin: 40px auto 0 auto; }
    #snav{ text-align: left; }
    #snav li{ margin: 0 20px 0 0; }
}

@media only screen and (max-width: 650px) {
    .wrapper{ max-width: unset; }
    #content .member{ padding: 20px 20px 20px 130px; min-height: 230px; }
    #content .member .memberlogo{ width: 90px; }    
}