@charset "UTF-8";
/*
  # Kirby Starterkit
  
  This CSS file handles all of the styling in of Kirby’s
  Starterkit. Feel free to tinker around with it and
  adjust it according to your needs.  
  
  ## Color Definitions
  
  The following colors used in the Starterkit. If you want
  to use this CSS file as a starting point for your own
  project, you can do a simple search & replace to adjust
  the color scheme to your needs.
  
  - Background:            white
  - Text:                  black
  - Hovered Links:         #128DCD
  - Active Button BG:      #128DCD
  - Caption BG in projects
    showcase:              rgba(38, 30, 102, .95)

  - Highlight, Selection,
    Link Underline:        #cfdcad
  - Tap color
    (touch devices):       rgba(113, 239, 172, .5)
  - Marked Text BG,
    Callout Boxes BG:      #eafded

  - Menu Separator,
    <hr> in text:          #a8a5be
  - Blockquote BG:         #fffffd
  
  ## Table of Contents
  
  1 Global Rules & Definitions
  1.1 Font Definitions
  1.2 Reset & Normalization
  1.3 General Typography
  1.4 Images & Figures
  
  2 Layout Helpers & Reusable Components
  2.1 Kirbytext
  2.2 Button
  2.3 Grid & Layout
  2.4 Pagination
  2.5 Projects Showcase
  
  3 Site Layout
  3.1 Header
  3.2 Menu
  3.3 Sticky Footer
  3.4 Main Content
  
  4 Template-specific Components
  4.1 Homepage
  4.2 Blog Article
  4.3 Team
  4.4 Contact
  
*/

/* =====  1 Global Rules & Definitions  ===================================== */

/* -----  1.1 Font Definitions  --------------------------------------------- */

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
}

/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

::-moz-selection {
  background: #cfdcad;
  color: black;
}

::selection {
  background: #128DCD30;
  color: black;
}

/* -----  1.3 General Typography  ------------------------------------------- */

h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, pre {
  /* Reset font-sizes and normalize margins */
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 1rem;
}

/* Headings */
h1, h2, h3 {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

h1 {
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.75rem;
  line-height: 2rem;
  color: #128DCD;

  font-weight: 400;
}

h3 {
  font-size: 1.15em;
  line-height: 1.3;
  font-weight: 400;
  color: #128DCD;
}

h4 {
  font-size: 1em;
}

.small {
  font-size: .8rem !important;
  margin-top: 1rem;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover, a:focus, a:active {
  color: #128DCD;
}

.nav_mini > a:hover, a:focus, a:active {
  color: black;
}

.nav_mini > ul > li > a:hover, a:focus, a:active {
  color: black;
}

#nav-mobile {
  text-transform: uppercase;
}

/* Misc */
hr {
  font-size: 1.25rem;
  font-weight: 500;
  height: 1.5rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #696969;
}

hr::before {
  content: "";
  position: relative;
  display: block;
  background: currentColor;
  height: 2px;
  top: calc(50% + 1px);
}

}

h1 + hr,
.intro + hr {
  /* Shift a <hr> right after an `.intro`
     or <h1> block one line up. */
  margin-top: -1.5rem;
}

i, em {
  font-weight: 400;
  font-style: italic;
}

b, strong {
  font-weight: 600;
}

mark {
  padding: .1em .05em;
  margin: -.1em 0;
  color: black;
  background: #eafded;
}

/* --------- forms ------------- */

input:not([type="radio"]), textarea {
    display: block;
}


.uniform__potty {
    position: absolute;
    left: -9999px;
}
.error {
    border: 1px solid red;
}
.error-text {
    color: red;
    font-size: .8rem;
}

.formblock {
  margin-bottom: 2rem;
}

.formfield__container {
    width: 100%;
    margin-bottom: 1rem;
}

.formfield__option__label > p {
  margin-top: 1rem;
}

.formfield__option__label > a {
  color: #128DCD;
}

.formblock__option__container {
  display: flex;
  flex-wrap: wrap;
}

.formfield__input {
  width: 100%;
}

.formfield__radio {
  margin-right: .5rem;
}


.formfield__select {
  width: 100%;
}

.formfield__checkbox {
  display: inherit !important;
  margin-right: .5rem;
}

.formblock_field__label {
  margin-bottom: 5px;
  font-size: 1.15em;
  line-height: 1.3;
  font-weight: 400;
  color: #128DCD;
}

.formblock__submit {
  width: 100%;
  margin-top: 1.5rem;
}

.formblock__message--error {
  font-size: .8rem;
  color: red;
  width: 100%;
}

.formblock__message--success {
  width: 100%;
}

.col-12 {
  flex-basis: 100%;
}

.col-6 {
  flex-basis: 100%;

}

.col-4 {
  flex-basis: 100%;

}

hr {
  width: 100%;
}

.formblock {
  display: flex;
  flex-flow: wrap;
}

input, textarea
{
  background: transparent;
  border:0px;
  border-bottom: 1px solid black;
  padding: 0.5rem 0rem 0.5rem 0rem;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
  resize: none;
}

input[type="submit"]
{
  color: white;
  border: 0px;
  cursor:pointer;
  text-align: left;
  font-size: 1.1rem;
  background-color: #128DCD;
  padding: 8px;

}




.btn-style {
  font-size : 1rem;
  color : #ffffff;
  padding : 9px 20px;
  background-color : #128DCD;
  margin-bottom: 4rem;

}

select {
  border: 0px;
  border-bottom: 1px solid black;
  padding: 0.5rem 0rem 0.5rem 0rem;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
  color: grey;
  width: 70% ;
  background-color: white;
}

.betreff {
  height: 3rem;
}

textarea:focus, input:focus{
    outline: none;
}

textarea{
  height: 150px;
  width: 100%;
}

.inline{
  display: table;
  width: 100%;
}
.inline div {
  display: table-cell;
  width: 50%;
}

.inline div:last-of-type{
  padding-left: 10px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: black;
}
::-moz-placeholder { /* Firefox 19+ */
  color: black;
}
:-ms-input-placeholder { /* IE 10+ */
  color: black;
}
:-moz-placeholder { /* Firefox 18- */
  color: black;
}

.addressOption {
  display: none;
}

.address-results {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.address-result {
    margin: 0rem 1rem 0 0;
    width: 45%;
}

.adress-result > p {
  margin: 0 !important;
}

.g-recaptcha {
  margin: 1rem 0;
}


.circle {
  width: 120px;
  height: 120px;
  position: absolute;
  background-color: #128DCD;
  border-radius: 50%;
  right: 1rem;
  margin-top: -6rem;
  text-align: center;
  padding: .25rem;
  color: white;
  justify-content: space-around;
  flex-direction: column;
  transform: rotate(6deg);
}

.circle-text a {
  color: white;
}

.circle-text p {
  margin-bottom: 0
}

@media all and (min-width: 38em) {
  .circle {
    right: 5rem;
    width: 130px;
    height: 130px;
    padding: .5rem;
  }  

}

@media all and (max-width: 56em) {
  
 

  .address-result {
    width: 100%;
    margin: 0;
  }


}

@media all and (min-width: 56em) {
  .circle {
    margin-top: -5rem;
    right: 7rem;
    width: 140px;
    height: 140px;
    padding: 1rem;
  } 

  .col-12 {
    padding-right: 10px;
  }

  .col-6 {
    flex-basis: 50%;
    padding-right: 10px;
  }

  .col-4 {
    flex-basis: 33%;
    padding-right: 10px;
  }

  .formfield__option {
    padding-right: 2rem;
  }
}
@media all and (min-width: 75em) {
  .circle {
    right: 10rem;
    margin-top: -8rem;

  }  

}

@media all and (min-width: 90em) {
  .circle {
    right: 15rem;
    margin-top: -5rem;

  }  

}

@media all and (min-width: 100em) {
  .circle {
    right: 22rem;
  }  

}

@media all and (min-width: 150em) {
  .circle {
    right: 40rem;
  }  

}


/* -----  1.4 Images & Figures  --------------------------------------------- */

img {
  border-style: none;
  max-width: 100%;
  height: auto;
}

.img-center {
  text-align: center;
}

figcaption {
  font-size: .75rem;
  line-height: 1.5rem;
}

.material-icons{
  vertical-align: text-bottom;
  color: dimgray !important;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 21px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }


/* =====  2 Layout Helpers & Reusable Components  =========================== */

/* The Clearfix™: A classic … */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

  *:focus {
    outline: none;
  }


/* -----  2.1 Kirbytext  ---------------------------------------------------- */

.intro {
  text-align: center;
  font-weight: 500;
  font-size: 1.125rem;
  margin-bottom: 3rem;
}

h1 + .intro {
  margin-top: -2.25rem;
}

.text h2, .text h3 {
}

.text ul, .text ol {
  margin-left: 1em;
}

.text ul {
  list-style: none;
}

.text ul > li::before {
  content: "–";
  display: inline-block;
  position: relative;
  width: 1.25em;
  margin-right: -1.25em;
  left: -1.25em;
  padding-left: .25em;
}

.text ol > li {
  list-style: decimal;
}

.text pre, .text code {
  background-color: #eafded;
  font-family: Courier, monospace;
  font-size: .75rem;
}

.text code {
  margin: -.25em 0;
  padding: .25em .15em;
  position: relative;
  bottom: .05em;
}

.text pre > code {
  display: block;
  margin: 0;
  padding: .8em;
  position: static;
  bottom: auto;
  overflow-x: auto;
}


@supports (-webkit-overflow-scrolling: touch) {
  .text pre > code {
    /* Enables smoother scrolling for code sections on
       mobile (i.e. touch) devices. */
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

.text kbd {
  padding: 3px 7px;
  margin: -3px 2px;
  font-size: 75%;
  line-height: 1;
  background: #e9e9e9;
  border-radius: 4px;
  box-shadow: 0 2px 0 #c9c7d4;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  position: relative;
  bottom: 2px;
}

.text blockquote {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  border-left: 2px solid #a8a5be;
  padding: .75rem;
  background: #fffffd;
}

.text blockquote :last-child {
  margin-bottom: 0;
}

.details_downloads {
  float: left; 
  width: 25%;
  display: inherit;
  margin-right: 1.5rem;
  line-height: 1.4rem;
}

.details_content {
  float: left; 
  width: 70%;
  margin-bottom: 2rem;
}


.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.weekday:not(:last-child)::after {
  content: ",";
}

.details_content   ul  li {
  list-style-position: outside;
  display: list-item;
}

.details_content   ol  li {
  list-style-type: decimal !important;
  list-style-position: outside;
  display: list-item;
}

.details_content iframe {
  width: 100%;
}


p > a {
  color: #128DCD;
}

.list_top {
  margin-top: 2.25rem;
}

.list_top2 {
    margin-right: 1rem;
    display: inline-block;
    margin-top: 0rem;
    vertical-align: top;
    top: 0px;
  }

  summary::-webkit-details-marker {
    display: none;
    flex-wrap: nowrap;
  }
  
  details[open] summary:before {
  }


  details > summary {
    cursor: pointer;
    list-style: none;
    
  }
  .summary {
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21?28, Safari 6.1+ */
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  details > summary::-webkit-details-marker {
    display: none;
  }

  details[open] summary .plus {
    display: none;
  }
  details[open] summary .minus {
    display: block;
  }

  details summary .minus {
    display: none;
  }

  .details_list {
    width: 100%;
  }


@media all and (max-width: 64em) {

  .details_downloads{
    width: 100% !important;
  }
  .details_list {
    margin-right: 1rem;
    display: inline-block;
    margin-top: 1rem;
    vertical-align: top;
    top: 0px;
  }

  .details_content {
    width: 100%;
  }
}

@media all and (min-width: 120em) {
  .details_content {
    width: 60%;
  }
}

/* -----  2.2 Button  ------------------------------------------------------- */

.btn {
  display: inline-block;
  border: 2px solid;
  padding: .6em .75em;
  white-space: nowrap;
  font-size: .75em;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  line-height: 1;
  font-weight: 400;
}

.btn:hover, .btn:focus {
  background: black;
  border-color: black;
  color: #128DCD;
}

.btn:active {
  background: #128DCD;
  border-color: #128DCD;
}

/* -----  2.3 Grid & Layout  ------------------------------------------------ */

.column {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  vertical-align: top;
  margin-bottom: .5rem;
}


.subnav_column {
  text-align: left;
  line-height: 1rem;
}

.subnav_column > a {
  font-size: .8rem !important;
}

.subnav_column:last-of-type > a > h3 {
  margin-bottom: 0;
}

.halfcolumns div:last-of-type {
  margin-right: 0;
}

.halfcolumn {
  flex-basis: 100%;
  margin-bottom: 1rem;
}

.halfcolumns{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wrap {
  box-sizing: content-box;
  margin: 0 auto;
  padding-left: .75rem;
  padding-right: .75rem;
}



@media all and (min-width: 31.5em) {
  .wrap:not(.wide) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}


@media all and (min-width: 38.25em) {
  .wrap {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  .wrap.wide {
    padding-left: 5rem;
    padding-right: 5rem;
  }



}
@media all and (min-width: 56em) {

  .wrap.wide {
    padding-left: 3.5rem;
    padding-right: 3rem;
  }


}
@media all and (min-width: 64em) {

  .halfcolumns {
    flex-wrap: wrap;
  }

  .halfcolumn {
    flex-basis: 48%;
  }
}

@media all and (min-width: 75em) {

  .wrap.wide {
    padding-left: 8.5rem;
    padding-right: 8rem;
  }

}

@media all and (min-width: 90em) {
  .wrap.wide {
    padding-left: 12.5rem;
    padding-right: 12rem;
  }
}



@media all and (min-width: 100em) {
  .wrap.wide {
    padding-left: 16.5rem;
    padding-right: 16rem;
  }
}

@media all and (min-width: 150em) {
  .wrap.wide {
    padding-left: 35.5rem;
    padding-right: 35rem;
  }
}


/* ----- 2.5 Projects Showcase ---------------------------------------------- */

.category {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.category-item {
  list-style: none;
  margin: .5rem .25rem .75rem .25rem;
  position: relative;
}

.categories-download {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.category-download {
  margin: 0 0 1rem 0;
  flex-basis: 100%;
}


@media all and (min-width: 38em) {
  .category-item {
    flex-basis: 48%;

  }

}

@media all and (min-width: 60em) {
  .category-item {
    flex-basis: 23%;
    margin: .5rem .9rem .75rem 0;

  }

  .category-download {
  flex-basis: 49%;
  }
}

@media all and (min-width: 90em) {
  .category-item {
    margin: .5rem 1rem .75rem 0;

  }
}

@media all and (min-width: 1900px) {

}

.category-link {
  display: block;
  position: relative;
  /* padding-top: 72%; */
  z-index: 0;
  border-bottom: 0;
}

.category-caption {
  position: absolute;
  top: .75rem;
  left: .75rem;
  right: .75rem;
  bottom: .5rem;
  background: rgba(38, 30, 102, .95);
  color: #eafded;
  letter-spacing: .05em;
  opacity: 1;
  -webkit-transition: .25s opacity;
  transition: .25s opacity;
  will-change: opacity;
}

.category-title {
  margin-bottom: 0;
  text-align: left;
  text-align: left;
  width: 100%;
  /* Vertically center the caption */
  /*position: absolute;*/
  top: 60%;
  font-size: 1rem;
  /*-webkit-transform: translateY(-50%);
          transform: translateY(-50%); */
}

.category-image {
  display: block;
  /* position: absolute;
  left: 0; 
  top: 0;*/
}

.category-link:hover .category-caption,
.category-link:focus .category-caption {
  opacity: 1;
}

@media (any-hover: none) {
  .category-caption {
    /* The media query, enclosing these rules matches only
       touch-screen devices that do not support hover due
       to the lack of a pointing device like a mouse.
       It does not work in all mobile browsers, but
       progressively enhances the experience on supported
       devices. Tested in Safari (iOS) 9.3 */
    opacity: 1.0;
    /* Reset will-change property to keep it from eating
       up unneccessary resources on touch-only devices */
    will-change: auto;
  }
  .category-title {
    font-size: .85em;
  }
}

/* =====  3 Site Layout  ==================================================== */

html {
  height: 100%;
  background: white;
  color: dimgrey;
  font: normal 400 1.1em/1.5 'Roboto', sans-serif;
  /* Always show the vertical scrollbar to prevent `jumps`
     of page content after navigating from a very short page
     that does not scroll to a long pager */
  overflow-y: scroll;
  /* Setting this to `default` prevents the cursors from
     changing when hovering blocks of text or whitespace,
     which is less distracting */
  /*cursor: default;*/
  /* Neccessary for sticks footer. */
  position: relative;
  min-height: 100%;
  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: rgba(113, 239, 172, .5);
}

@media all and (max-width: 30em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 0.9em;
    line-height: 1em;
  }
}

@media all and (max-width: 38em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 1em;
    line-height: 1.3em;
  }
}

@media all and (min-width: 75em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 1.2em;
    line-height: 1.4em;
  }
}

body {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ----- 3.1  Header  ------------------------------------------------------- */

.header {
   /* height:100px; */
   position: fixed;
   top:0;
   right:0;
   left:0;
   transition: transform .25s .1s ease-in-out;
   z-index: 1;
   background-color: white;
}

.header div {
  /* height: 100px; /* <-- zum Testen die Höhe hier beliebig anpassen */
}

.down .header {
   transform: translate3d(0, -230%, 0); // um die Höhe (variabel) nach oben verschieben
}

.logo {
  margin-bottom: 1rem;
}

.logo a img {
  width: 70%;
}

.onlyDesktop {
  display: inherit;
  }

.onlyTablet {
  display: none;

}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: 0.3s;
    background: white;
}

.sidenav a {
    padding: 0px;
    text-decoration: none;
    display: block;
    transition: 0.2s;
}

.sidenav a:hover {
    color: rgba(0,255,208, 0.5);
}

.sidenav .closebtn {
    font-size: 18px;
    color: grey;
}


@media all and (min-width: 38em) {

}

@media only screen and (min-width: 56em) {

}

@media only screen and (min-width: 64em) {
  .logo a img {
    width: 100%;
  }
}

@media only screen and (min-width: 75em) {


  .onlyMobile {
    display: none;
  }

  .onlyTablet {
    display: none;
  }

}

@media only screen and (min-width: 90em) {
 
}

@media only screen and (min-width: 100em) {
 
}

/* -----  3.2 Menu  --------------------------------------------------------- */

.menu-toggle {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.8rem;
}

.menu {
  font-weight: 500;
  vertical-align: middle;
}

.menu-item {
  display: inline-block;
  padding-left: 1.75rem;
}

.menu-item:not(:last-child)::after {
  display: inline-block;
  font-size: .75em;
  padding: 0 1em;
  color: #a8a5be;
}

.menu-item a {
  border-bottom: 0;
  font-size: 0.8rem;
}

.menu-item.is-active a {
  color: #128DCD;
}

.menu .menu-item ul {
  display: none;

}

.menu-desktop-item {
  display: inline-block;
  padding-left: 1.75rem;
}

.menu-desktop-item:not(:last-child)::after {
  display: inline-block;
  font-size: .75em;
  padding: 0 1em;
  color: #a8a5be;
}

.menu-desktop-item a {
  border-bottom: 0;
  font-size: 0.8rem;
}

.menu-desktop-item.is-active a {
  border-bottom: 2px solid #128DCD;
}

.menu .menu-desktop-item ul {
  display: none;

}

.menu .menu-subnav {
  position: absolute;
  display: none;
}

.menu > .menu-subnav a {
  display: inline-block;
}

.subnav_a.is-active a {
  color: white;
}

.subnav-flex {
  display: flex; 
  flex-direction: column; 
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 1px solid darkgray;

}

.subnav-first {
  margin-left: 0;
}

.subnav-border {
  margin: 0 1rem 0 0rem;
}

#nav-desktop{
  display: none;
}
.mobile {
  cursor: pointer;
}

nav{
  width: 100% !important;

}


nav ul
{
  display: none;
  transition: all 500ms ease;
}
nav .mobile
{
  display: inline-block;
  float: right;
  padding-right: 15px;      
}

nav ul.ausgeklappt
{
  display: block;
  position: absolute;
  text-align: left;
  width: 100%; 
  top:5px;
  left: 0px;
  padding: 0px;
  margin-top: 45px;
}

nav ul.ausgeklappt li
{
  background-color: white;
  display: block;
  margin-right: 0px;
  padding: 15px 10px;
  border-bottom: 1px solid #128DCD;
  text-align: center;

}

nav ul.ausgeklappt li a
{
  font-size: 1.2rem;
  text-align: center;
}




.navbar {
  -moz-transition: all 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition: all 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
  flex-direction: row-reverse;
}


.subnav {
  float: right;
  background: #128DCD;
  color: white;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 0.9rem;
  width: 100%;
  display: none;
}

.menu-icon {
  cursor: pointer;
  z-index: 1;
  margin-top: .4rem;
  display: flex;
  align-items: center;
}

.banner {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  background: aliceblue;
  font-size: 0.8rem;
  width: 100%;
  padding: 2rem .75rem 2rem .75rem;
}


.nav_mini {
  flex-direction: column;
  display: none;

}


.nav_mini:first-of-type {
  padding-left: 0;
}

.nav_mini:last-of-type {
  padding-right: 0;
}

.nav_mini > h3 {
  color: #128DCD;
}

.logos-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.logo-banner {
  margin: 0 1rem 0 0;

}

.navColumn {
  margin-top: 1rem;
}

.adress {
  padding-right: 2rem;
  line-height: 1.2rem;
  display: inline-block;
  min-width: 28%;

}

.adress > p {
  margin-bottom: 0;
}

@media all and (min-width: 38em) {


.nav_mini {
    display: flex;
    margin-bottom: 1rem;
  }
.nav_mini img {
  max-width: 100% ;
}
.menu-item a {
  border-bottom: 0;
  font-size: .95rem;
}

.menu-item.current > a {  /* Marks the current target group item as active */
  color: #128DCD;
}

.banner {
    padding: 2rem 5rem 2rem 5rem ;
}

.subnav {
  position: absolute;
  right: 0rem;
}

.subnav-background {
  display: flex; 
  justify-content: flex-end; 
  padding: 1rem 0;
  margin-top: 1.8rem;
  opacity: .9;
  background-color: white;
}

}

@media all and (min-width: 56em) {


  .banner {
    padding: 2rem 3rem 2rem 3.5rem ;
    justify-content: space-between;
    flex-wrap: nowrap;

  }

  .nav_mini {
    padding: 0 2rem;
    margin-bottom: 0;

  }

  .border-left {
        border-left: 1px solid darkgrey;
  }

  .adress {
    min-width: 25%;
  }

  .subnav-border {
      border-left: 1px solid darkgray;
  }


}

@media all and (min-width: 64em) {

  #nav-mobile {
    display: none;
  }

  #nav-desktop {
    display: inherit;
  }

  .sidenav {
    display: none !important;
  }

 .menu-icon {
    display: none;
  }

  nav {
  top: 30px;
  }


  nav ul {
    display: inherit;
    transition: all 500ms ease;
  }

  nav .mobile {
    display: none;      
  }
  .subnav_a {
    text-align: left;
    float: left;
    width: 100%;
    margin-top: 1rem;
  }

  .subnav_a > a {
    padding-right: 2rem;
    font-size: 0.9em;
  }

  .subnav_a > a:hover, a:focus, a:active {
    color: black;
  }

 .subnav-flex {
    border-left: 0;
    margin-bottom: 0;

  }

}


@media all and (min-width: 75em) {

  .menu-item a {
  border-bottom: 0;
  }

 .subnav_column > a {
    font-size: .8rem !important;
  }

  .banner {
    padding: 2rem 8rem 2rem 8.5rem ;

  }

  .adress {
    min-width: 28%;
  }

}

@media all and (min-width: 90em) {
  .banner {
    padding: 2rem 12rem 2rem 12.5rem ;

  }
}

@media all and (min-width: 100em) {

 .banner {
    padding: 2rem 16rem 2rem 16.5rem ;

  }

  .adress {
    min-width: 22%;
  }

  .logos-banner {
    flex-wrap: nowrap;
  }

}

@media all and (min-width: 150em) {
  .banner {
    padding-left: 35.5rem;
    padding-right: 35rem;
  }

}

/* -----  3.3 Sticky Footer  ------------------------------------------------ */

.sticky {
  flex-shrink: 0;
}


.footer {
  font-size: .8rem;
  margin: .5rem 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.footer p {
  margin-bottom: 0;
}

.footer-copyright {
  width: 100%;

}

@media all and (min-width: 38em) {
  .footer-copyright {
    width: auto;
    padding-right: 2rem;

  }
}

/* -----  3.4 Main Content  ------------------------------------------------- */


.main {
    width:100%;
    flex: 1 0 auto;

}

/* =====  4 Template-specific Components ==================================== */


.maps {
  margin-top: 100px;
  position: relative;
  padding-bottom: 50%; 
  height: 0;
  overflow: hidden;
}

.maps iframe {
  position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 97% !important;
}

@media all and (min-width: 75em) {
  .maps {
  padding-bottom: 30%; 

}

  .maps iframe {
    height: 92% !important;
}


}

/* ------ 4.5 Gallery ------------------------------------------------------------ */

.gallery{
  width: 100%;
  height: 190px;
  position: relative;
  z-index: 0;
  margin-top: 5rem;
  margin-bottom: 1rem;

}
.slide{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.bx-viewport, .bx-wrapper{
  -webkit-box-shadow: none!important;
  -moz-box-shadow: none!important;
  box-shadow: none!important;
  border: none!important;
  width:100%;
  /*max-width: 1024px;*/
  height: 100%;
  margin: 0 auto;

}
.bx-viewport{
    left:0px!important;
}
.bxslider li{
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
     background-size: cover;
} 
.bxslider, .bxslider li{
    height: 100% !important;
}

.lazyload,
.lazyloading {
  opacity: 1;
}

.lazyloading {
  opacity: 1;
  transition: opacity 300ms;
  background: #f7f7f7 url(images/loader.gif) no-repeat center;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 300ms;
}

img.lazyload:not([src]) {
  visibility: hidden;
}

.quotes {
  padding: 3rem 1rem 2rem 1rem;
  background-color: #128DCD;
  font-weight: 300;
  color: white;
  font-size: 1.5rem;
  line-height: 1.7rem;
  text-align: center;

}

.quotes > .bx-wrapper {
  background-color: #128DCD;
  height: unset;
}

.quote-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lightbox-section {
  margin: 2rem 0;
}

.lightbox-section:first-of-type {
  margin-top: 0;
}

@media screen and (min-width: 38em) {
  .gallery{
    height: 310px;
    margin-bottom: 2rem;
  }

}

@media screen and (min-width: 42em) {
  .gallery{
    height: 350px;   
  }

}

@media screen and (min-width: 48em) {
  .gallery{
    height: 400px;   
  }

}

@media screen and (min-width: 56em) {
  .gallery{
    height: 430px;    
  }

}

@media screen and (min-width: 60em) {
  .gallery{
    height: 470px;   
  }
  .quotes {
    padding: 3rem 3rem 2rem 3rem;
  }

}

@media screen and (min-width: 70em) {
  .gallery{
    height: 550px;
  }


}
@media screen and (min-width: 75rem) {

  .gallery{
    height: 600px;
  }

}


@media screen and (min-width: 85rem) {
  .gallery{
    height: 700px;
  }

}

@media screen and (min-width: 90em) {

}

@media screen and (min-width: 100rem) {
 .gallery{

  }


@media screen and (min-width: 1800px) {

.bxslider, .bxslider li{
    top: -15%;
}
}

/* -------- MODAL ------- */

.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 3rem;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}