﻿@font-face {
    font-family: 'mariananina';
    src: url('../fonts/MarianinaWdFY-Regular_M.eot');
    src: url('../fonts/MarianinaWdFY-Regular_M.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MarianinaWdFY-Regular_M.woff') format('woff'),
         url('../fonts/MarianinaWdFY-Regular_M.ttf') format('truetype'),
         url('../fonts/MarianinaWdFY-Regular_M.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'mariananina_light';
    src: url('../fonts/MarianinaWdFY-Light_M.eot');
    src: url('../fonts/MarianinaWdFY-Light_M.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MarianinaWdFY-Light_M.woff') format('woff'),
         url('../fonts/MarianinaWdFY-Light_M.ttf') format('truetype'),
         url('../fonts/MarianinaWdFY-Light_M.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'mariananina_bold';
    src: url('../fonts/MarianinaWdFY-Bold_M.eot');
    src: url('../fonts/MarianinaWdFY-Bold_M.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MarianinaWdFY-Bold_M.woff') format('woff'),
         url('../fonts/MarianinaWdFY-Bold_M.ttf') format('truetype'),
         url('../fonts/MarianinaWdFY-Bold_M.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'isidora-regular';
    src: url('../fonts/isidora-regular.eot');
    src: url('../fonts/isidora-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/isidora-regular.woff') format('woff'),
         url('../fonts/isidora-regular.ttf') format('truetype'),
         url('../fonts/isidora-regular.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'isidora-medium';
    src: url('../fonts/isidora-medium.eot');
    src: url('../fonts/isidora-medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/isidora-medium.woff') format('woff'),
         url('../fonts/isidora-medium.ttf') format('truetype'),
         url('../fonts/isidora-medium.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
  background: #FBFCFD;
  font-family: 'mariananina',sans-serif;
  color: #424346;
  margin: 0px;
  padding: 0px;
  font-size: 1.2rem;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'isidora-medium', sans-serif;
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: normal;
}
h1{
    font-size: 2rem;
    color: #616161;
    line-height: 2rem;
}
h2{
    font-size: 1.8rem;
    color: #616161;
     line-height: 2rem;
}
h3{
  font-size: 1.6rem;
    color: #616161;
     line-height: 1.6rem;
}
h4{
  font-size: 1.6rem;
    color: #000;
     line-height: 1.6rem;
}
h5{
  font-size: 1.4rem;
    color: #000;
     line-height: 1.5rem;
}
h6{
  font-size: 1.2rem;
    color: #000;
     line-height: 1.62rem;
}
img{
    max-width: 100%;
  height: auto;
}

p{
    line-height: 1.8rem;
}

a{
    outline: none;
    text-decoration: none;
    color: #B8823F;
}
a:hover{
    outline: none;
    text-decoration: none;
    color: #B8823F;
}
a:focus {
 outline:none;
 background-color: none;
}
a.readon{
    border: 1px solid #354a5e;
    padding: 5px 10px 5px 10px;
     background-color: #fff;
     color: #354a5e;
    display: inline-block;
    transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in; -o-transition: all 400ms ease-in;
}
a.readon:hover{
    color: #fff;
    background-color: #354a5e;
    text-decoration: none;
}
a.readon:focus{
    text-decoration: none;
}

strong{
 font-family: mariananina_bold, sans-serif;
 font-weight: normal;
}
ul{
    list-style-image: url(../images/li.png);
}
hr {
    height: 1px;
    border: none;
    background: #EAEAED;
    position: relative;
}
hr::after {

    content: " ";
    border-radius: 50%;
    border: 1px solid #EAEAED;
    height: 9px;
    left: 50%;
    width: 9px;
    margin-left: -5px;
    margin-top: -5px;
    position: absolute;
    background: #f8f8fa;

}
.klein{
    font-size: 0.9rem;
}
.duenn{
 font-family: mariananina_light, sans-serif;
}

li{
    line-height: normal;
}
.clearfix{

}

.clearfix::after{
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
div.links,div.mitte,div.rechts{
   width: 31.8%;
margin: 0 2.3% 0 0;
float: left;
padding: 10px 0 10px 0;
}
div.rechts{
    margin: 0 0% 0 0
}
.gelb{
    background: #FAFAF8;
    padding: 10px;
}
.einleitungsbild{
    box-sizing: border-box;
    margin-bottom: 15px;
}

.einleitungsbild img, img.imtext {
    box-sizing: border-box;
    max-width: 100%;
    border: 5px solid #fff;
}
img.imtext{
    margin: 0 30px 30px 0;
}
.abstand{
    margin-top: 20px;
    margin-bottom: 20px;
}
.abstand::after{
 clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

.sechziglinks{
 width: 58%;
 float: left;
 box-sizing: border-box;
}
.vierzigrechts{
 width: 38%;
 float: right;
 box-sizing: border-box;
}
.sechziglinks img,.vierzigrechts img{
 box-sizing: border-box;
  max-width: 100%;
    border: 5px solid #fff;
}
.vierzigrechts h1{
    margin-top: 10px;
}

.zitat{
    background: url(../images/zitat.png) #fff no-repeat;
        background-position: 10px 10px;
    padding: 35px 45px 35px 50px;
    color: #000;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    border: 1px solid #C0BFBF;
    margin: 5px 0 30px 0;
}
div.bilder{

}

/* -----Neu---- */
.textslide{
    padding: 50px;
}
.btn-primary {
    background-color: #43525E;
}
.default{

}
.home{

}
#mySidenav, #open{
    display: none;
}

#oben{
   position: absolute;
   top: -100px;
}
#down{
    position: absolute;
    top:calc(100vh - 160px);
}
.default header{
    height: auto;
    position: relative;
}

.home header{
    width: 100%;
    background: #fff;
    z-index: 100;
       position: relative;
        height:calc(100vh - 60px);
     transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in; -o-transition: all 400ms ease-in;
}
#logo {
    position: fixed;
    width: 100%;
    z-index: 1;
    height: 100px;
    background: #fff;
    top: 0;
    box-sizing: border-box;
    text-align: left;
}
.bildindex{
    height:calc(100vh - 160px);
    overflow: hidden;
    top: 100px;
    left: 0;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
.bildindex div{
    height: calc(100vh - 160px);
    position: relative;
}

.bildindex img.start{
  object-fit: cover;
   object-position: center bottom;
  width: 100vw;
}

.bildindex div.scrollto {
    position: absolute;
    bottom: 80px;
    width: 100%;
    height: 60px;
    text-align: center;
}
.home .bildindex .scrollto img{
width: auto;
max-width: auto;
   height: auto;
   object-fit: fill;
   object-position: center center;
}

.bild{
    height: 300px;
    overflow: hidden;
    margin-top: 100px;
}
.bild img{
  min-width: 100%;
    min-height: 300px;
    object-fit: cover;
   object-position: 0% 0%;
}

.home nav {
    width: 100%;
height: 60px;
background: #F6F6F6;
text-align: center;
display: table;
box-sizing: border-box;
position: -webkit-sticky;
  position: sticky;
top: 100px;
border-bottom: 1px solid #fff;
}

.default nav{
    position: relative;
    height: 60px;
    margin-top: 100px;
    background: #F6F6F6;
    text-align: center;
    width: 100%;
    display: table;
    border-bottom: 1px solid #fff;
    position: -webkit-sticky;
  position: sticky;
top: 100px;
}
.default .bild + nav{
    margin-top: 0;
}

.content{
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0 40px 0;

}
.top{
    background: #525A5C;
}

footer{
    background: #43525E;
    text-align: center;
    font-size: 0.9rem;
    color: #fff;
}
#footerinnen{
    margin: 0 auto;
     width: 90%;
    max-width: 1400px;
    padding-top: 20px;
}
#footerinnen::after{
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

#footerinnenlinks{
    width: 40%;
    float: left;
    text-align: left;
    box-sizing: border-box;
    padding-right: 20px;
}
#footerinnenmitte{
  width: 30%;
    float: left;
}
#footerinnenrechts{
   width: 30%;
    float: right;
}
#footerinnenrechts img{
    max-width: 100%;
}

/*-----Navi oben -----*/
nav ul.nav{
     display: table-cell;
vertical-align: middle;
text-align: center;
     margin: 0 auto;
     height: 60px;
     margin: 0;
     padding: 0;
     list-style: none;
     list-style-image: none;
 }
 nav ul.nav::after{
     content: "";
     display: block;
     height: 0;
     clear: both;
     overflow: hidden;
 }

 nav ul.nav li{
     display: inline;
     margin: 0 10px 0 10px;
 }
 nav ul.nav a{
     color: #A6A6A6;
     border-bottom: 2px solid transparent;
     text-decoration: none;
     padding: 5px 15px 5px 15px;
     text-transform: uppercase;
     transition: all 800ms ease-out; -moz-transition: all 800ms ease-out; -webkit-transition: all 800ms ease-out; -o-transition: all 800ms ease-out;
 }
nav ul.nav li.active a{
    border-bottom: 2px solid #A6A6A6;
    color: #000;
}
nav ul.nav a:hover{
    border-bottom: 2px solid #A6A6A6;
}
nav ul.nav > li > a {
    display: inline-block;
}
.nav > li > a:hover{
    background: transparent;
    color: #000;
}
.nav > li > a:hover,.nav > li > a:focus{
    background: transparent;
}
ul.unstyled {
    list-style-image: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
/*-----Navi unten -----*/
#footerinnenmitte nav{
    background: transparent;
    border-bottom: none;
     width: 100%;
height:auto;
text-align: left;
display: block;
box-sizing: border-box;
position: relative;
top: 0px;
margin-top: 0px;
}

#footerinnenmitte nav ul.nav{
       display: block;
vertical-align: top;
text-align: left;
     margin:10px 0 5px 0;
     height: auto;
     padding: 0;
     list-style: none;
     list-style-image: none;
 }
#footerinnenmitte nav ul.nav::after{
     content: "";
     display: block;
     height: 0;
     clear: both;
     overflow: hidden;
 }

#footerinnenmitte nav ul.nav li{
     display: block;
     padding:0;
     margin: 0;
 }
#footerinnenmitte nav ul.nav a{
     color: #fff;
     display: block;
     font-size: 1.1rem;
     text-decoration: none;
     padding: 10px;
     text-transform: none;
     border-bottom: 1px dotted #fff;
     transition: all 800ms ease-out; -moz-transition: all 800ms ease-out; -webkit-transition: all 800ms ease-out; -o-transition: all 800ms ease-out;
 }
#footerinnenmitte nav ul.nav li.active a{
    color: #ccc;
}
#footerinnenmittenav ul.nav a:hover{
    border-bottom: none;
}
#footerinnenmittenav ul.nav > li > a {
    display: block;
}
#footerinnenmitte .nav > li > a:hover{
    background: transparent;
    color: #ccc;
}
#footerinnenmitte .nav > li > a:hover,.nav > li > a:focus{
    background: transparent;
}
#footerinnenmitte ul.unstyled {
    list-style-image: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
div.bildindex{
    position: relative;
}

@keyframes shimmy {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 8px);
    opacity: 0.8;
  }
}
.scrollto img{
 animation: shimmy 0.8s infinite;
  animation-direction: alternate;
}
.scrollto img:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}
.bilder {
    -webkit-column-count: 3;
    -webkit-column-width: 33%;
    -webkit-column-gap: 0px;
    -webkit-column-rule:  0px choose #000000;
    -moz-column-count: 3;
    -moz-column-width:33%;
    -moz-column-gap: 0px;
    -moz-column-rule:  0px choose #000000;
    -o-column-count: 3;
    -o-column-width: 33%;
    -o-column-gap: 0px;
    -o-column-rule:  0px choose #000000;
    column-count: 3;
    column-width: 33%;
    column-gap: 0px;
    column-rule:  0px choose #000000;
}
.bilder p{
    margin: 0;
    padding: 0;
    line-height: 0;
    box-sizing: border-box;
}
.bilder img{
    border: 5px solid #fff;
    box-sizing: border-box;
    width: 100%;
  height: auto;
}
/*-----------------------------------------------------*/
@media (max-width:800px){
 .default{

}
.home{

}
#mySidenav{
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 15px 0 15px;
    height: 0;
    transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in; -o-transition: all 400ms ease-in;
    overflow-y: hidden;
    overflow-x :auto;
    background: #fff;
    z-index: 1100;
}
#mySidenav h3{
    margin-top: 20px;
}

#mySidenav li{
    border-bottom: 1px solid #C0BFBF;
}
 #mySidenav a{
     padding: 8px 0 8px 0;
     font-size: 1.3rem;
     color: #8890A3;
 }
 #mySidenav li.active a{
     padding-left: 4px;
     color: #000;
 }

#open{
    background: #fff;
    text-align: right;
    cursor:pointer;
    display: block;
}
#mobilediv .nav{
    display: block;
}

#mobilediv::after{
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
#menueleft{
    width: 48%;
    float: left;
}
#menueright{
    width: 48%;
    float: right;
}
#oben{
   position: absolute;
   top: -100px;
}
#down{
    position: absolute;
    top:calc(100vh - 160px);
}
.default header{
    height: auto;
    position: relative;
}

.home header{
    width: 100%;
    background: #fff;
    z-index: 100;
       position: relative;
        height:auto;
     transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; -webkit-transition: all 400ms ease-in; -o-transition: all 400ms ease-in;
}
#logo {
    position: relative;
    width: 100%;
    z-index: 1;
    height: 100px;
    background: #fff;
     box-sizing: border-box;
    text-align: center;
}
#logo img{
    max-height: 100px;
}

.home .bildindex{
    height:calc(100vh - 160px);
    overflow: hidden;
    top: 0px;
    left: 0;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: block;
}
.home .bildindex div{
    height: 100%;
}

.bildindex img.start{
    min-width: 100vw;
    min-height: calc(100vh - 160px);
    object-fit: cover;
   object-position: center bottom;

}

.home .bildindex div.scrollto {
    position: absolute;
    bottom: 80px;
    width: 100%;
    height: 60px;
    text-align: center;
}
.home .bildindex .scrollto img{
width: auto;
max-width: auto;
   height: auto;
   object-fit: fill;
   object-position: center center;
}

.bild{
    display: none;
}

.home nav {
   display: none;
}

.default nav{
   display: none;
}
.default .bild + nav{
    margin-top: 0;
}

.content{
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0 40px 0;

}
.top{
    background: #525A5C;
}

footer{
    background: #43525E;
    text-align: center;
    font-size: 0.9rem;
    color: #fff;
}
#footerinnen{
    margin: 0 auto;
     width: 90%;
    max-width: 1400px;
    padding-top: 20px;
}
#footerinnen::after{
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

#footerinnenlinks{
    width: 100%;
    float: none;
    text-align: left;
    box-sizing: border-box;
    padding-right: 0px;
}
#footerinnenmitte{
  display: none;
}
#footerinnenrechts{
   width: 100%;
    float: none;
    text-align: center;
}
#footerinnenrechts img{
    max-width: 100%;
}


.scrollto img{
 animation: shimmy 0.8s infinite;
  animation-direction: alternate;
}
.scrollto img:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}
.bilder {
    -webkit-column-count: 1;
    -webkit-column-width: 100%;
    -webkit-column-gap: 0px;
    -webkit-column-rule:  0px choose #000000;
    -moz-column-count: 1;
    -moz-column-width:100%;
    -moz-column-gap: 0px;
    -moz-column-rule:  0px choose #000000;
    -o-column-count: 1;
    -o-column-width: 100%;
    -o-column-gap: 0px;
    -o-column-rule:  0px choose #000000;
    column-count: 1;
    column-width: 100%;
    column-gap: 0px;
    column-rule:  0px choose #000000;
}
.bilder p{
    margin: 0;
    padding: 0;
    line-height: 0;
    box-sizing: border-box;
}
.bilder img{
    border: 5px solid #fff;
    box-sizing: border-box;
    width: 100%;
}
.sechziglinks{
 width: 100%;
 float: none;
 box-sizing: border-box;
}
.vierzigrechts{
 width: 100%;
 float: none;
 box-sizing: border-box;
}
}