/* siebergarten.ch */

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/fileadmin/template/fonts/open-sans-v35-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fileadmin/template/fonts/open-sans-v35-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/fileadmin/template/fonts/open-sans-v35-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

       
html, body, div, p, h1, h2, h3, h4, h5, img {
  border: none;
  margin: 0;
  padding: 0;
}

body {
  color: #222;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size:1em;
  background-color: #ffffff;
  height: 100%;
}

/* Fonts Formatierung */

a:link, a:visited {color:#006633;text-decoration: none;}
a:hover {color:#009966;}
a:active {color: #900;text-decoration: none;}

 a.button { align-items: center; background:#009966; color:#fff;padding:5px 15px 5px 15px; }
.button { text-align: center; box-sizing: border-box; border-radius:10px 3px 15px 5px; }  
.button:hover { background-color: #006633; color:#fff; }

hr {background-color:#006633; color:#006633; border: #006633; height: 1px; margin:.5em 0 1.5em 0; }
p {font-size: 1em;line-height:1.6em;margin-bottom: 15px; }
h1 {margin-bottom:10px;font-size:2.6em; color:#009966; font-weight: 300; line-height:1.5;}
h2 {margin-bottom:10px;font-size:1.8em; color:#009966; font-weight: 300; line-height:1.5;}
h3 {margin-bottom:10px;font-size:1.6em; color:#009966;  font-weight: 300; line-height:1.5;}
h4, h5 {margin-bottom:10px;font-size:1.4em; color:#222; font-weight: 400; line-height:1.5;}

.ce-bodytext ol, .ce-bodytext ul { margin:6px 0 0 2px; padding:0 0 0 4px; list-style:none;}
.ce-bodytext ol, .ce-bodytext ul li:before {
    content:"\2022";
    color: #009966;
    margin-right: 8px;
}

img, embed, object, video {
max-width: 100%;
height: auto;
}

/*GRIDELEMENTS*/

/*gridelements 4-col */

.span_4_of_4 { flex: 0 0 25%; }
.span_3_of_4 { flex: 0 0 25%; }
.span_2_of_4 { flex: 0 0 25%; }
.span_1_of_4 { flex: 0 0 25%; }

.four-container {
  display: flex;
  flex-flow: row; 
  flex-wrap: wrap; }

/*gridelements 3-col*/
.col-container {
  display: flex;
  width: 100%;}
  
.three-cols { margin: 1.6%;}
.three-cols img {max-width:340px;}

/* Layout */
/* Basic Layout */

#center {
  width:100%;
  position:relative;
  min-height:600px;
  
}

#head {
  position:relative;
  top:0;
  left:0;
  width:100%;
  max-width:1140px;
  height:100px;
  margin:0 auto;
  z-index:20;
}

#navigation {
font-size: 1.3em;
  position:relative;
  width:66%;
  z-index:10;
  float:right;
  margin-right:66px;
  margin-top:36px;
}

#image {margin-top:2px;}

#content {
    position:relative;
    left:0;
    width:100%;
      max-width:1140px;
  margin:0 auto; padding-bottom: 60px;
} 


.content-startseite {top: 0px; }
.content-startseite p {font-size: 150%; font-weight: 300; line-height: 1.5em;}
  
.content-startseite .three-cols {text-align: center; font-size: 80%;}

#footer {
  position: relative;
  width:100%;
  margin: 0px;
  background-color: #e8e8e8;
}

.footerinhalt {
    width:100%;
      max-width:1140px;
  margin:0px auto;
  padding:10px 0 20px 0;
}

.footerinhalt p { line-height: 160%;font-weight:100;}

.footerlogos {
  padding:10px 0 0 0;
  clear: both;
}

.con-footer-logos {width:100%;}

iframe {border:hidden;max-width: 100%;}

/* Navigation */
/* Ebene Eins */

ul.nav-ebene-eins {
  padding:0;
  margin:0;
  list-style-type:none;
  width: 100%;
  position:relative;
}

ul.nav-ebene-eins li {
  padding:0;
  margin:0;
  display:inline;
  float:left;
  position:relative;
}

ul.nav-ebene-eins li a {
  display:block;
  font-size:.8em;
  text-align:center;
  line-height: 40px;
  color:#222;
  padding:0 14px 0 14px;
  white-space: nowrap;
}

ul.nav-ebene-eins li a:hover,ul.nav-ebene-eins li a.active, ul.nav-ebene-eins li.pretty-hover a {
  border-bottom:1px solid #666;
  color:#7c7d86;
}

ul.nav-ebene-eins li#pageUid_14 a {border-right:none;}

/* Navigation */
/* Ebene Zwei */

ul.nav-ebene-zwei {
  padding:0;
  margin:0;
  width:180px;
  position: absolute;
  top:auto;
  left:0;
  display:none;

  
}
ul.nav-ebene-zwei li {
  clear:left;
  width:100%;
}
ul.nav-ebene-zwei li a {
  border-right:none;
  color:#7c7d86 !Important;
  background:#FFF !Important;
  border-bottom:1px solid #009966 !important;
  padding:0 0 0 10px;
  line-height: 45px !important;
  text-transform: none;
  text-align:left;
  width: 200px;  
}

ul.nav-ebene-zwei li:last-child a {
  -webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

ul.nav-ebene-zwei li a:hover {
  background:#FFF !Important;
  color:#333 !Important;
}

.code {width:1px;height:1px;overflow:hidden;}

/* Header Logo und Navigation */

#logo {
  position:absolute;
  top:1px;
  left:6px;
  z-index:100;
  }

.con-headerbild img { width: 100%; height: auto;}
  
/* Content Bereich */

#con-center{
  width:100%;
  line-height: 180%;
  position:relative;
  top: 20px;
  max-width: 99%; margin: 0 auto;
}

#con-center p {
  line-height: 180%;
}

#con-center .ce-textpic .ce-media {
  margin:0 auto;
  padding:15px 0 25px;
  display: inline;
}

.ce-column { margin: 0 10px 10px 0; }

figcaption {
font-size: 90%; line-height: normal;
}

div.ce-column {display:inline;}

/*tables*/

table.contenttable {
  table-layout: fixed; min-width:65%;
}
 
tr {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
 
tr:first-child {
  border-top: 0 none;
}
 
th, td {
  padding: .7em; vertical-align: top;   font-size: 120%; 
}
 
thead tr, tr:nth-child(odd) {
  background-color: #f9f9f9;
}
 
th {
  font-size: 120%; 
}
 
tbody th {
  text-align: left; 
}

td:last-child {
  min-width: 160px;
  text-align: right;
}

/* Kontaktformular  YAML */

div.form-group {font-size:1em; }

div.control-label {color: #FFCCCC;}

.form-control {  width:60% !Important;  line-height:25px; }

.actions {   padding-top:10px;}

.btn-primary {font-size:.9em;  color:#6d6d6d; background-color: #e1e1e1;}

.btn-cancel {font-size:.9em; color:#6d6d6d; background-color: #e1e1e1;}


/* iFrame*/

 @media (max-width: 550px) {
     .big-container {
         display: none;
     }
 }
 @media (min-width: 550px) {
     .small-container {
         display: none;
     }
 }
 /* Responsive iFrame */
 .responsive-iframe-container {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px;
     height: 0;
     overflow: hidden;
 }
 .responsive-iframe-container iframe,   
 .vresponsive-iframe-container object,  
 .vresponsive-iframe-container embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }


/* Flexslider */

 .flexslider {
    margin: 0px 0px 0px;
    border:none;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2)
    }
    
  .tx-ws-flexslider .caption-text {
  vertical-align: middle; height: auto;
  /* outline: 1px solid white; */
  text-align: center;
  width: 94%;
   background:transparent;
 }

.tx-ws-flexslider .caption-title { font-weight: bold;  font-size: 6.2vw; font-weight: 400; color:#fff;text-shadow: 2px 0px #343434;}
.tx-ws-flexslider .caption-body p { margin-bottom: 0px;  font-size: 3.2vw; font-weight: 300; color:#fff;text-shadow: 2px 0px #343434;}
.tx-ws-flexslider .caption-text { padding: 17px; }
.tx-ws-flexslider .caption-body a {color:#fff;}

.flex-control-nav {
  position: absolute;
  bottom:8%;
  left:0;
  display:block !important;
  z-index:2000;
}

.flex-control-paging li a {
    width: 16px;
    height: 16px;
    display: block;
    background:#fff;
   border-radius: 20px;
}


.caption-wrapper {
    position: absolute;
    width: 100%;
    left:0;
  top:50px;
}

.caption-link a {display:none}


  
.responsivemenu {display:none;}

ul.mobile-nav-ebene-eins {position:absolute;z-index:5000;top:36px;width:100%;padding:0;margin:0;list-style-type: none; display:none;}
ul.mobile-nav-ebene-eins.hasScrolled {top:36px;}
ul.mobile-nav-ebene-eins li {position:relative;}
ul.mobile-nav-ebene-eins a {display:block;line-height:40px;background:#1e291b;border-bottom:1px solid #535353;padding-left:20px;color:#fff;}
ul.mobile-nav-ebene-eins a:hover {background:#214222;}
ul.mobile-nav-ebene-eins li span {width:42px;height:40px;background:transparent url(img/openclose.png) center top no-repeat; position: absolute; right:0px; top:0;}
ul.mobile-nav-ebene-eins li span.open {background:transparent url(img/openclose.png) center bottom no-repeat;}

ul.mobile-nav-ebene-zwei {width:100%;padding:0;margin:0;list-style-type: none; display:none;}
ul.mobile-nav-ebene-zwei a {background:#21422e;border-bottom:1px solid #606060;}
ul.mobile-nav-ebene-zwei a:hover {background:#0a6339;}


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

  .responsivemenu {display:block;position:absolute;top:0; right:0;width:100px;background:transparent;height:36px;z-index:5000;font-size: 80%;}
  .showmenu {display:block;position:absolute; right:20px; top:0px;z-index:5000; height:36px; background:transparent url(img/menu.png) left center no-repeat; line-height:36px;padding-left:45px;}
  .showmenu:hover {cursor:pointer;}
#navigation {display:none;}
  #center {width:100%;min-height: 100%;}
  #con-center { max-width: 96%; margin: 0 auto }
}
  #footer {width:100%;float:none;}
  
  .ce-mailform label {float:none;width:100%;}
  .ce-mailform input,  .ce-mailform textarea {width:90%;}
  .ce-mailform .ce-form-element-submit input {margin-left:0 !important;}
  table {font-size:1rem;}
  tr, td {padding:3px;}
  
.table-scrollable {
  width: 100%;
  overflow-y: auto;
  margin: 0 0 1em;
}

.table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

}

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

p {padding:0;margin:0;}
.content-startseite { padding-top: 0px; }
.caption-align-right .caption-title {display:none;}
a.button {display:block;margin-top:15px;}

}

@media only screen and (max-width: 510px) {
  h1 {font-size: 2.6rem; line-height: 100%;}
 #logo img{ width: 70%; height: auto; margin:6px 0 0 6px; } 
 .content-startseite { top:-10px; }
  #con-center { max-width: 96%; margin: 0 auto }
.con-headerbild img { min-height: 120px; width: 100%;}
.flex-control-paging li a {display:none;}
.caption-wrapper {top: -11px;}
.form-control {  width:98% !Important;  line-height:25px; }
.footerlogos {padding:1em;}
.col-container {display: flex; width: 100%; flex-wrap: wrap; }
.four-container {display: flex; width: 100%; flex-wrap: wrap; }
.span_4_of_4 { flex: 0 0 100%; }
.span_3_of_4 { flex: 0 0 100%; }
.span_2_of_4 { flex: 0 0 100%; }
.span_1_of_4 { flex: 0 0 100%; }
 }