@charset "UTF-8";

/*------------------------------------*\
    #FONT FACE SETTINGS
\*------------------------------------*/

/**
 * @license
 * MyFonts Webfont Build ID 3413718, 2017-06-29T04:51:30-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Campton-Book by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/book/
 * 
 * Webfont: Campton-Medium by Rene Bieder
 * URL: https://www.myfonts.com/fonts/rene-bieder/campton/medium/
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3413718
 * Licensed pageviews: 10,000
 * Webfonts copyright: Copyright &#x00A9; 2016 by Ren&#x00E9; Bieder. All rights reserved.
 * 
 * © 2017 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3416d6");

  
@font-face {font-family: 'Campton';src: url('../../fonts/campton/3416D6_0_0.eot');src: url('../../fonts/campton/3416D6_0_0.eot?#iefix') format('embedded-opentype'),url('../../fonts/campton/3416D6_0_0.woff2') format('woff2'),url('../../fonts/campton/3416D6_0_0.woff') format('woff'),url('../../fonts/campton/3416D6_0_0.ttf') format('truetype'),url('../../fonts/campton/3416D6_0_0.svg#wf') format('svg');font-weight: normal;font-style: normal;}
 
  
@font-face {font-family: 'Campton';src: url('../../fonts/campton/3416D6_1_0.eot');src: url('../../fonts/campton/3416D6_1_0.eot?#iefix') format('embedded-opentype'),url('../../fonts/campton/3416D6_1_0.woff2') format('woff2'),url('../../fonts/campton/3416D6_1_0.woff') format('woff'),url('../../fonts/campton/3416D6_1_0.ttf') format('truetype'),url('../../fonts/campton/3416D6_1_0.svg#wf') format('svg');font-weight: bold;font-style: normal;}

/*------------------------------------*\
    #PSEUDO CLASSES
\*------------------------------------*/

::selection {
  background: rgba(128,128,128,.25); 
}
::-moz-selection {
  background: rgba(128,128,128,.25); 
}

::-webkit-input-placeholder {
  color: rgba(62,73,153,1);
}
:-moz-placeholder {
  color: rgba(62,73,153,1);
  opacity: 1;
}
::-moz-placeholder {
  color: rgba(62,73,153,1);
  opacity: 1;
}
:-ms-input-placeholder { 
  color: rgba(62,73,153,1);
}

/*------------------------------------*\
    #GENERAL SETTINGS
\*------------------------------------*/

* {
  border: 0px;
  margin: 0px;
  padding: 0px;
    
  text-decoration: none;
  text-rendering: optimizeLegibility;
  
  -webkit-tap-highlight-color: rgba(255,255,255,0);
  
  -webkit-font-smoothing: antialiased;
  
  word-wrap: break-word;
  
  font-family: "Campton", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
    
  color: rgba(0,0,0,1);
  
  font-size: 1em;
  line-height: 1;
  
  text-transform: none;
  
}

/*------------------------------------*\
    #LINKS
\*------------------------------------*/

a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;

  line-height: inherit;
  
  letter-spacing: inherit;
  color: inherit;
  
  text-transform: inherit;
  
  cursor: pointer;

  outline: none;
}


/*------------------------------------*\
    #SPAN, BOLD, ITALIC
\*------------------------------------*/

span, strong, em, b, i {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;

  line-height: inherit;
  
  letter-spacing: inherit;
  color: inherit;
  
  text-transform: inherit;
  
}

b { font-weight: bold; }
i { font-style: italic; }

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/

button {
  background: transparent;
  outline: none;
  border:0;
  cursor: pointer;
  font-weight: inherit;
}

/*------------------------------------*\
    #LISTS
\*------------------------------------*/

ul, li {
  list-style: none;
}

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/


/*--- general view -------------------*/

.view {
  position: fixed;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.view.scrollable { 
  width: 100%;
  padding: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.view.absolute { 
  position: absolute;
}

.view.relative { 
  position: relative;
    box-sizing: border-box;
}

.view.relative.auto-height { 
  height: auto;
}

.view.relative.min-height {
  min-height: 100%;    
}

/*--- vertical centered -------------*/
/*--- container         -------------*/

.container--v-center {
  position: absolute;
  display: block;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.container--v-center.scrollable {
  overflow-y: scroll;
}

.v-center--outer {
  display: table;
  width: 100%;
  height: 100%;
}

.v-center--inner {
  display: table-row;
  width: 100%;
  height: 100%;
}

.v-center {
  display: table-cell;
  vertical-align: middle;
}

/*--- container corner ---------------*/

.container--corner {
  z-index: 2;
  position: fixed;
}

.container--corner.top-left  { top: 0; left: 0; }
.container--corner.top-right { top: 0; right: 0; }
.container--corner.bottom-left  { bottom: 0; left: 0; }
.container--corner.bottom-right { bottom: 0; right: 0; }

.container--top,
.container--bottom,
.container--top-left, 
.container--top-right { 
  z-index: 1;
  position: absolute;
  box-sizing: border-box;
}
  
.container--top       { left: 0; top: 0; width: 100%; }
.container--bottom    { left: 0; bottom: 0; width: 100%; } 
.container--top-left  { left: 0; top: 0; } 
.container--top-right { right: 0; top: 0; } 

.container--bottom.fixed {
  position: fixed;
}

/*--- content-frames -----------------*/

.c-frame {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

.c-frame.frame-s {
  width:  85%; 
  min-width: 20em; 
  max-width: 45em;
}

.c-frame.frame-m {
  width:  85%; 
  min-width: 20em; 
  max-width: 60em;
}

.c-frame.frame-ml {
  width:  85%; 
  min-width: 20em; 
  max-width: 80em;
}

.c-frame.frame-l {
  width:  85%; 
  min-width: 20em; 
  max-width: 100em;
}

.c-frame.overflow-visible {
  overflow: visible;
}
  
/*--- columns ------------------------*/

.column {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  transition: .05s;
}

.column.column-90     { width: 90%; }
.column.three-quarter { width: 75%; }
.column.two-third     { width: 66.66%; }
.column.half          { width: 50%; }
.column.third         { width: 33.33%; }
.column.quarter       { width: 25%; }

/*------------------------------------*\
    #TEXT FORMATS
\*------------------------------------*/
  
/*--- headlines ----------------------*/

h1, h2, h3, h4, h5, h6 {
  margin: 0 auto;
  font-style: normal;
  font-variant: normal;
  text-align: left;
}

/*--- paragraphs ---------------------*/

p {
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-align: left;
}
  
  p a       { border-bottom: 1px solid transparent; transition: .1s; }
  p a:hover { border-bottom: 1px solid; }

/*--- list-item ----------------------*/

  li b { font-weight: bold; }

/*--- paragraphs ---------------------*/
/*--- inline images ------------------*/

img.inline {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
}

img.inline.inline-small {
  width: 70%;
  min-width: 18em;
}

img.inline-centered {
  position: relative;
  display: block;
  margin: 0 auto;
}

/*------------------------------------*\
    #HEADER
\*------------------------------------*/

header {
  z-index: 200 !important;
  position: absolute;
  transition: transform .3s, top 1s;
  -webkit-transform: translate3d(0,0,0);
}

header.fixed { position: fixed !important; }
header.start { top: 100%; display: none; }

header.rolled-in,
header.rolled-in-hover { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%) }

header.block-rolled-in { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%) }

    header .mobile-menu-button {
      display: none;
    }

header nav li {
  cursor: pointer;
}

.logo {
  height: 4em;
  width: 4em;
  -webkit-transform: translateY(15px);
      -ms-transform: translateY(15px);
          transform: translateY(15px);
}

/*--- mobile -------------------------*/

header.mobile {
  z-index: 200 !important;
  position: absolute;
  height: 0;
  transition: none;
  -webkit-transform: translate3d(0,0,0);
}

header.mobile.open {
  height: auto;
}

header.mobile.fixed { position: fixed !important; }

header.mobile.rolled-in { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%) }

  header.mobile .mobile-menu-button {
    z-index: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    padding: 2.5em 2em;
    cursor: pointer;
  }

    header.mobile .mobile-menu-button svg { width: 3em; }


  header.mobile > div.c-frame {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
    padding-top: 5em;
    padding-bottom: 5em;
  }

  header.mobile > div.c-frame.start-end {
    transition: transform .3s;
  }

  header.mobile.open > div.c-frame {
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
  }

    header.mobile nav li {
      display: block;
      float: none;
    }
  
    header.mobile #nav-button-contrast {
      position: absolute;
      top: .3em;
      left: 1em;
      display: block;
      float: none;
    }

header.mobile .logo {
  display: none;
}


/*------------------------------------*\
    #MAIN
\*------------------------------------*/

main {
  transition: top 1s;
}

main.start {
  top: 100%;
}

/*--- link buttons -------------------*/

.link-button {
  position: relative;
  display: block;
  height: 12.5em;
  width: 12.5em;
  margin: 0 auto;
}

  .link-button--bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10em;
    transition: transform .2s;
  }

  .link-button:hover .link-button--bg { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05) }

  .link-button span {
    position: absolute;
    display: block;
    top: 50%;
    left: 0%;
    width: 100%;
    text-align: center;
    line-height: 1.4;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }

/*--- close buttons ------------------*/

.button-close {
  height: 2.5em;
  width: 2.5em;
}

/*--- anchor links -------------------*/

.faq-anchor {
  cursor: pointer;
}

/*--- intro --------------------------*/

.view#intro {
  transition: top 1s;
}

#intro.start-end {
  top: -100%;
}

.view#intro svg {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 100%; 
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

.intro-dot {
  fill: black;
  transition: fill .25s;
}

.f-blue-1   { fill: rgba(0,159,227,1) }
.f-blue-2   { fill: rgba(172,198,233,1) }
.f-blue-3   { fill: rgba(62,73,153,1) }
.f-blue-4   { fill: rgba(192,221,255,1) }
.f-red-1    { fill: rgba(230,0,126,1) }
.f-red-2    { fill: rgba(242,150,167,1) }
.f-red-3    { fill: rgba(248,198,210,1) }
.f-green-1  { fill: rgba(109,184,88,1) }
.f-green-2  { fill: rgba(184,214,148,1) }
.f-orange-1 { fill: rgba(255,210,101,1) }
.f-orange-2 { fill: rgba(255,230,136,1) }
.f-grey-1   { fill: rgba(237,240,231,1) }
.f-grey-2   { fill: rgba(216,216,216,1) }

.s-blue-1   { stroke: rgba(0,159,227,1) }
.s-blue-2   { stroke: rgba(172,198,233,1) }
.s-blue-3   { stroke: rgba(62,73,153,1) }
.s-blue-4   { stroke: rgba(192,221,255,1) }
.s-red-1    { stroke: rgba(230,0,126,1) }
.s-red-2    { stroke: rgba(242,150,167,1) }
.s-red-3    { stroke: rgba(248,198,210,1) }
.s-green-1  { stroke: rgba(109,184,88,1) }
.s-green-2  { stroke: rgba(184,214,148,1) }
.s-orange-1 { stroke: rgba(255,210,101,1) }
.s-orange-2 { stroke: rgba(255,230,136,1) }
.s-grey-1   { stroke: rgba(237,240,231,1) }
.s-grey-2   { stroke: rgba(216,216,216,1) }

/*--- welcome ------------------------*/

.view#welcome {
  background-image: url(../../media/images/photographs/pundp-start.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 6em solid rgba(255,255,255,1);
}

.arrow-down {
  cursor: pointer;
}

.image-arrow-down {
  width: 1em;
  cursor: pointer;
}

.welcome-certificates {
  position: absolute;
  top: 7.5%;
  right: 5%;
  width: 10em;
}

/*--- team ---------------------------*/

.team-index-entry img {
  z-index: 1;
  transition: opacity .2s;
}

.team-index-entry p {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.team-index-entry:hover img {
  opacity: 0;
}

#linketext-apply {
  display: inline; 
  border-bottom: 2px solid transparent;
  transition: border .1s;
}

.column.third:hover #linketext-apply { border-bottom: 2px solid rgba(255,255,255,1); }


/*--- contact ------------------------*/

.form-field,
input,
textarea {
  position: relative;
  display: block;
  width: 100%;
  outline: 0;
  font-weight: bold;
  box-sizing: border-box;
  border-radius: 0;
}

textarea {
  height: 20em;
}

.checkbox {
 width: 70%;
 float: left;
 overflow: hidden;
}

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox label {
  cursor: pointer;
  line-height: 1.3;
  padding-left: 3em;
  display: block;
}

.checkbox label::before {
  content: " ";
  display: block;
  height: 1.75em;
  width: 1.75em;
  background-image: url(../../media/general/form-icons/unchecked.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: .5em;
  position: absolute;
  left: 0;
  top: .3em;
}

.checkbox input[type="checkbox"]:checked + label::before {
  background-image: url(../../media/general/form-icons/checked.svg);
}

.file-upload {
  width: 30%;
  float: left;
  overflow: hidden;
}

.file-upload__input {
  display: none;
}

.file-upload__label {
  max-width: 250px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.button-submit {
    
}

.button-submit.disabled {
  opacity: .5;
}

/*--- footer -------------------------*/

#fixed-footer {
  transition: transform .2s;
}

#fixed-footer.mobile .c-frame {
  width: 100%;
  padding-left: 2em;
  padding-right: 2em;
}

#imprint {
  display: none;
}

.footer-sm-icon {
  height: 2em;
  width: 2em;
}


/*------------------------------------*\
    #FURTHER INFO PAGE
\*------------------------------------*/

#read-more,
#button-read-less {
  display: none;
}


#button-read-more.centered,
#button-read-less.centered {
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.membership-entry p {
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

.membership-entry:hover p {
  border-bottom: 1px solid rgba(0,0,0,1);
}

.membership-logo {
  height: 7em;
}

/*------------------------------------*\
    #SLIDESHOWS
\*------------------------------------*/

.slideshow .flickity-page-dots {
  bottom: 2em;
}

.slideshow .flickity-page-dots .dot {
  background-color: rgba(100,100,100,1);
}

.slideshow .flickity-page-dots .dot.is-selected {
  background-color: rgba(230,230,230,1);
}

.slideshow .flickity-prev-next-button.previous {
  left: 7.5%;
}

.slideshow .flickity-prev-next-button.next {
  right: 7.5%;
}

.slideshow .arrow {
  fill: rgba(109,184,88,1); 
}

.slideshow .slide {
  width: 100%;
}

/*------------------------------------*\
    #GOOGLE MAP ADJUSTMENTS
\*------------------------------------*/

.gm-style-pbt {
  text-align: center;
}

/*------------------------------------*\
    #COOKIE BOT
\*------------------------------------*/

#CybotCookiebotDialogHeader {
  display: none !important;
}

body:not(.loaded) #CybotCookiebotDialog {
  opacity: 0 !important;
  transition: .25s !important;
}

 body.loaded #CybotCookiebotDialog {
  opacity: 1 !important;
}

.CybotCookiebotDialogNavItemLink {
  font-family: "Campton", Helvetica, Arial, sans-serif !important;
  font-size: 1em !important;
  line-height: 1.9 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
}

.CybotCookiebotDialogDetailBodyContentCookieContainerButton,
.CybotCookiebotDialogBodyButton,
.CybotCookiebotDialogBodyLevelButtonDescription {
  font-family: "Campton", Helvetica, Arial, sans-serif !important;
  font-size: 1em !important;
  line-height: 1.4 !important;
  letter-spacing: 0.005em !important;
  font-weight: bold !important;
}


#CybotCookiebotDialogBodyContentTitle {
  font-family: "Campton", Helvetica, Arial, sans-serif !important;
  font-size: 1em !important;
  line-height: 1.4 !important;
  letter-spacing: 0.005em !important;
  font-weight: bold !important;
  margin-bottom: 1em !important;
}

.CybotCookiebotDialogDetailBodyContentCookieTypeIntro,
.CybotCookiebotDialogTabPanel,
#CybotCookiebotDialogBodyContentText {
  font-family: "Campton", Helvetica, Arial, sans-serif !important;
  font-size: 1em !important;
  font-size: 1em !important;
  line-height: 1.4 !important;
  letter-spacing: 0.005em !important;
}

#CybotCookiebotDialogDetailBodyContentTextAbout {
  padding: 1.125em !important;
}


.CookieDeclaration * {
  font-size: 1.125rem;
  line-height: 1.9;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,1);
  text-align: center;
}


.CookieDeclaration table * {
  text-align: left;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.CookieDeclarationTableHeader,
.CookieDeclarationTableCell,
.CookieDeclarationType {
  border-color: rgba(255,255,255,1) !important;
}

#CookieDeclarationChangeConsentChange, 
#CookieDeclarationChangeConsentWithdraw {
	font-weight: bold !important;
	color: rgba(62,73,153,1) !important;
	border-bottom: 1px solid !important;

}

/*------------------------------------*\
    #APPENDABLE CLASSES
\*------------------------------------*/

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/*--- text-size ----------------------*/

.text-xl { font-size: 3.000em; line-height: 1.2; letter-spacing: 0.005em; }
.text-l  { font-size: 1.500em; line-height: 1.9; letter-spacing: 0.005em; }
.text-m  { font-size: 1.125em; line-height: 1.9; letter-spacing: 0.005em; }
.text-s  { font-size: 1.000em; line-height: 1.9; letter-spacing: 0.005em; }

.text-xl.flat,
.text-l.flat,
.text-m.flat,
.text-s.flat { line-height: 1; }

.text-xl.reduced-lh,
.text-l.reduced-lh,
.text-m.reduced-lh,
.text-s.reduced-lh { line-height: 1.4; }

.text-xl.spaced { letter-spacing: 0.2em; }
.text-l.spaced  { letter-spacing: 0.2em; }
.text-m.spaced  { letter-spacing: 0.2em; }
.text-s.spaced  { letter-spacing: 0.2em; }

.text-underline-2 { display: inline; border-bottom: 2px solid; }

/*--- colors -------------------------*/

.bg-blue   { background-color: rgba(0,0,255,1); }
.bg-red    { background-color: rgba(255,0,0,1); }
.bg-white  { background-color: rgba(255,255,255,1); }
.bg-black  { background-color: rgba(0,0,0,1); }

.bg-blue-1   { background-color: rgba(0,159,227,1) }
.bg-blue-2   { background-color: rgba(172,198,233,1) }
.bg-blue-3   { background-color: rgba(62,73,153,1) }
.bg-blue-4   { background-color: rgba(192,221,255,1) }
.bg-red-1    { background-color: rgba(230,0,126,1) }
.bg-red-2    { background-color: rgba(242,150,167,1) }
.bg-red-3    { background-color: rgba(248,198,210,1) }
.bg-green-1  { background-color: rgba(109,184,88,1) }
.bg-green-2  { background-color: rgba(184,214,148,1) }
.bg-orange-1 { background-color: rgba(255,210,101,1) }
.bg-orange-2 { background-color: rgba(255,230,136,1) }
.bg-grey-1   { background-color: rgba(237,240,231,1) }
.bg-grey-2   { background-color: rgba(216,216,216,1) }


.bg-red-fond    { background-color: #FCF7F8 }
.bg-blue-fond   { background-color: #F0F8FE }
.bg-green-fond  { background-color: #F5F9F1 }
.bg-yellow-fond { background-color: #FDFBF3 }

.bg-black-trans { background-color: rgba(0,0,0,0.7); }
.bg-white-trans { background-color: rgba(255,255,255,0.9); }


.c-blue  { color: rgba(0,0,255,1); }
.c-red   { color: rgba(255,0,0,1); }
.c-white { color: rgba(255,255,255,1); }
.c-black { color: rgba(0,0,0,1); }
.c-grey  { color: rgba(155,155,155,1); }

.c-blue-1   { color: rgba(0,159,227,1) }
.c-blue-2   { color: rgba(172,198,233,1) }
.c-blue-3   { color: rgba(62,73,153,1) }
.c-blue-4   { color: rgba(192,221,255,1) }
.c-red-1    { color: rgba(230,0,126,1) }
.c-red-2    { color: rgba(242,150,167,1) }
.c-red-3    { color: rgba(248,198,210,1) }
.c-green-1  { color: rgba(109,184,88,1) }
.c-green-2  { color: rgba(184,214,148,1) }
.c-orange-1 { color: rgba(255,210,101,1) }
.c-orange-2 { color: rgba(255,230,136,1) }
.c-grey-1   { color: rgba(237,240,231,1) }
.c-grey-2   { color: rgba(216,216,216,1) }

.bor-blue  { border-color: rgba(0,0,255,1); }
.bor-red   { border-color: rgba(255,0,0,1); }
.bor-white { border-color: rgba(255,255,255,1); }
.bor-black { border-color: rgba(0,0,0,1); }
.bor-grey  { border-color: rgba(155,155,155,1); }

.bor-trans { border-color: rgba(255,255,255,0) !important; }

.bor-blue-1   { border-color: rgba(0,159,227,1) }
.bor-blue-2   { border-color: rgba(172,198,233,1) }
.bor-blue-3   { border-color: rgba(62,73,153,1) }
.bor-blue-4   { border-color: rgba(192,221,255,1) }
.bor-red-1    { border-color: rgba(230,0,126,1) }
.bor-red-2    { border-color: rgba(242,150,167,1) }
.bor-red-3    { border-color: rgba(248,198,210,1) }
.bor-green-1  { border-color: rgba(109,184,88,1) }
.bor-green-2  { border-color: rgba(184,214,148,1) }
.bor-orange-1 { border-color: rgba(255,210,101,1) }
.bor-orange-2 { border-color: rgba(255,230,136,1) }
.bor-grey-1   { border-color: rgba(237,240,231,1) }
.bor-grey-2   { border-color: rgba(216,216,216,1) }

.align-left    { text-align: left; }
.align-center  { text-align: center; }
.align-justify { text-align: justify; }
.align-right   { text-align: right; }

.up-case     { text-transform: uppercase; }
.text-bold   { font-weight: bold; }
.text-inline { display: inline; }

/*--- margins and padding ------------*/

.mar-t-0-25 { margin-top:  .25em; }
.mar-t-0-5 { margin-top:  .5em; }
.mar-t-1   { margin-top:   1em; }
.mar-t-1-5 { margin-top:   1.5em; }
.mar-t-2   { margin-top:   2em; }
.mar-t-3   { margin-top:   3em; }
.mar-t-4   { margin-top:   4em; }
.mar-t-5   { margin-top:   5em; }
.mar-t-10  { margin-top:  10em; }
.mar-t-20  { margin-top:  20em; }
.mar-t-40  { margin-top:  40em; }

.mar-b-0-25 { margin-bottom: .25em; }
.mar-b-0-75 { margin-bottom: .75em; }
.mar-b-0-5  { margin-bottom: .5em;  }
.mar-b-1    { margin-bottom:  1em;  }
.mar-b-1-5  { margin-bottom:  1.5em;  }
.mar-b-2    { margin-bottom:  2em;  }
.mar-b-2-5  { margin-bottom:  2.5em;  }
.mar-b-3    { margin-bottom:  3em;  }
.mar-b-4    { margin-bottom:  4em;  }
.mar-b-5    { margin-bottom:  5em;  }
.mar-b-8    { margin-bottom:  8em;  }
.mar-b-10   { margin-bottom: 10em;  }
.mar-b-15   { margin-bottom: 15em;  }
.mar-b-20   { margin-bottom: 20em;  }

.mar-l-1 { margin-left:   1em; }
.mar-l-1-5 { margin-left:   1.5em; }
.mar-l-2 { margin-left:   2em; }
.mar-l-3 { margin-left:   3em; }

.mar-r-0-5 { margin-right:  .5em; }
.mar-r-1 { margin-right:  1em; }
.mar-r-1-5 { margin-right:  1.5em; }
.mar-r-2 { margin-right:  2em; }
.mar-r-3 { margin-right:  3em; }
.mar-r-4 { margin-right:  4em; }
.mar-r-5 { margin-right:  5em; }

.mar-tb-1 { margin-top: 1em; margin-bottom: 1em; }
.mar-tb-2 { margin-top: 2em; margin-bottom: 2em; }
.mar-tb-3 { margin-top: 3em; margin-bottom: 3em; }
.mar-tb-5 { margin-top: 5em; margin-bottom: 5em; }
.mar-tb-10 { margin-top: 10em; margin-bottom:10em; }

.mar-lr-0-5 { margin-left: .5em; margin-right: .5em; }
.mar-lr-1 { margin-left: 1em; margin-right: 1em; }
.mar-lr-2 { margin-left: 2em; margin-right: 2em; }
.mar-lr-3 { margin-left: 3em; margin-right: 3em; }

.mar-a-0-5 { margin: .5em; }
.mar-a-1 { margin: 1em; }
.mar-a-2 { margin: 2em; }
.mar-a-3 { margin: 3em; }

.pad-t-0-25 { padding-top:    .25em; }
.pad-t-1    { padding-top:    1em; }
.pad-t-2    { padding-top:    2em; }
.pad-t-3    { padding-top:    3em; }
.pad-t-5    { padding-top:    5em; }
.pad-t-10   { padding-top:   10em; }

.pad-b-0-25 { padding-bottom: .25em; }
.pad-b-0-4  { padding-bottom: .4em; }
.pad-b-0-5  { padding-bottom: .5em; }
.pad-b-1    { padding-bottom:  1em;  }
.pad-b-1-5  { padding-bottom:  1.5em;  }
.pad-b-2    { padding-bottom:  2em;  }
.pad-b-3    { padding-bottom:  3em;  }
.pad-b-5    { padding-bottom:  5em;  }

.pad-l-1 { padding-left: 1em; }
.pad-l-2 { padding-left: 2em; }
.pad-l-3 { padding-left: 3em; }
.pad-l-5 { padding-left: 5em; }

.pad-r-1 { padding-right: 1em; }
.pad-r-2 { padding-right: 2em; }
.pad-r-3 { padding-right: 3em; }
.pad-r-5 { padding-right: 5em; }

.pad-tb-0-25 { padding-top: .25em;  padding-bottom: .25em;  }
.pad-tb-0-5 { padding-top: .5em;  padding-bottom: .5em;  }
.pad-tb-0-75 { padding-top: .75em;  padding-bottom: .75em;  }
.pad-tb-0-8 { padding-top: .8em;  padding-bottom: .8em;  }
.pad-tb-1   { padding-top: 1em;   padding-bottom: 1em;   }
.pad-tb-1-5 { padding-top: 1.5em; padding-bottom: 1.5em; }
.pad-tb-2   { padding-top: 2em;   padding-bottom: 2em;   }
.pad-tb-3   { padding-top: 3em;   padding-bottom: 3em;   }
.pad-tb-5   { padding-top: 5em;   padding-bottom: 5em;   }
.pad-tb-8   { padding-top: 8em;   padding-bottom: 8em;   }
.pad-tb-10   { padding-top: 10em;   padding-bottom: 10em;   }

.pad-lr-0-5   { padding-left: .5em;   padding-right: .5em;   }
.pad-lr-1   { padding-left: 1em;   padding-right: 1em;   }
.pad-lr-1-5 { padding-left: 1.5em; padding-right: 1.5em; }
.pad-lr-2   { padding-left: 2em;   padding-right: 2em;   }
.pad-lr-5   { padding-left: 5em;   padding-right: 5em;   }
.pad-lr-3   { padding-left: 3em;   padding-right: 3em;   }
.pad-lr-4   { padding-left: 4em;   padding-right: 4em;   }
.pad-lr-8   { padding-left: 8em;   padding-right: 8em;   }
.pad-lr-10  { padding-left: 10em;  padding-right: 10em;  }
.pad-lr-12  { padding-left: 12em;  padding-right: 12em;  }

.pad-lr-fit { padding-left: 9.5%;  padding-right: 9.5%;  }

.pad-a-0-25 { padding: .25em; }
.pad-a-1 { padding: 1em; }
.pad-a-2 { padding: 2em; }
.pad-a-3 { padding: 3em; }

/*--- margins and padding ------------*/
/*--- border width -------------------*/

.bor-1 { border-width: 1px; border-style: solid; }
.bor-2 { border-width: 2px; border-style: solid; }
.bor-3 { border-width: 3px; border-style: solid; }
.bor-10 { border-width: 10px; border-style: solid; }

.bor-t-1 { border-top-width: 1px; border-style: solid; }
.bor-b-1 { border-bottom-width: 1px; border-style: solid; }
.bor-b-3 { border-bottom-width: 3px; border-style: solid; }


/*--- layout -------------------------*/

.clear        { clear: both; }
.float-left   { float: left; }
.float-right  { float: right; }
.inline-block { display: inline-block; }
.flex { display: flex; }

.gap-2 { gap: 2em; }

.basis-one-third {
  flex-basis: 33.333%;
}

.basis-two-thirds {
  flex-basis: 66.667%;
}

.mobile-visible { display: none; }

/*--- misc ---------------------------*/

.hidden { display: none; }
.opaque { opacity: 1; }
.transparent { opacity: 0; }

.bottom-out {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}

.blured {
  -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
       -o-filter: blur(5px);
      -ms-filter: blur(5px);
          filter: blur(5px);
}

.indent {
  position: relative;
  box-sizing: border-box;
  padding-left: 2em;
}

.indent:before {
  content: '•';
  position: absolute;
  top: 0;
  left: 0;
}

/*--- custom -------------------------*/

.container--info-button {
  position: absolute;
  bottom: 30%;
  left: 20%;
  transform: translate(-50%, -50%);
}

  .container--info-button .column  {
    z-index: 1;
  }

  .container--info-button .column span {
    line-height: 1.5;
  }

  .container--info-button:after {
    content: ' ';
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 100%;
    overflow: hidden;
    background-color: rgba(109,184,88,1);
  }

/*------------------------------------*\
    #RESPONSIVE
\*------------------------------------*/

@media all and (max-width: 1600px), all and (max-height: 900px) {
  body { font-size: .9em; }
}

@media all and (max-width: 1400px) {
  body { font-size: .85em; }
}

@media all and (max-width: 1300px) {
  body { font-size: .8em; }
}

@media all and (max-width: 1200px) {
  body { font-size: .75em; }

  .checkbox {
   width: 60%;

  }

  .file-upload {
    width: 40%;
  }

}

@media all and (max-width: 1000px) {
  #welcome {
    height: 65%;
    margin-top: 0;
    border-top: 0 !important;
  }
}

@media all and (max-width: 900px) {
  .cut { display: none; }
  
  #footer-about {
    padding-right: 2em;
    width: 45%;
  }
  
  #footer-address {
    padding-left: 0;
    width: 30%;
  }
  
}

@media all and (max-width: 700px) {
  
  .mobile-hidden { display: none; }
  .mobile-visible,
  .mobile-block { display: block; }
  .mobile-flex-col { flex-direction: column; }
  .mobile-flex-col-rev { flex-direction: column-reverse; }
  
  .dot-line { 
    position: absolute; 
    width: auto !important; 
    height: 2em; 
    left: 50%; 
    -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
            transform: translate(-50%);
  }
  
  .page-home .c-frame.frame-s,
  .page-home .c-frame.frame-m,
  .page-home .c-frame.frame-full-mobile {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }    
  
  .c-frame.frame-full-mobile { padding: 0; }
  
  .slideshow .flickity-prev-next-button { display: none; }
    
  
  section.pad-tb-10 {
    margin-top: 0;
    padding-top: 1.7em;
    padding-bottom: 1.7em;
  }
  
  section.pad-t-10 {
    margin-top: 0;
    padding-top: 1.7em;
  }
  
  .page-home section h2 { box-sizing: border-box; padding-right: 3em; }
  
  .mar-t-10 { margin-top: 7em; }
  .mar-b-10 { margin-bottom: 1.7em; }
  .mar-t-5  { margin-top: 1.7em; }
  .mar-b-8,
  .mar-b-5  { margin-bottom: 1.7em }
  .mar-b-3  { margin-bottom: 0; }
  
    #welcome .container--bottom {
      bottom: 50%;
      transform: translateY(80%);
    }

    #welcome h1 {
      font-size: 2.25em;
    }

    .welcome-certificates {
      position: absolute;
      top: auto;
      bottom: 0;
      right: 3%;
      width: 100%;
      text-align: right;
    }

    .welcome-certificates > div,
    .welcome-certificates > img {
      display: inline-block;
      width: auto;
      vertical-align: middle;
      margin-bottom: 0 !important;
    }

    .welcome-certificates > div {
      transform: scale(.75);
    }


    .welcome-certificates > img {
      width: 10em;
    }



    .container--info-button {
      position: absolute;
      bottom: 45%;
      left: 15%;
      transform: translate(-50%, -50%) scale(.7);
    }
    
    .image-arrow-down {
      display: none;
    }
    
  #service-range .column.third,
  #service .column.third {
    width: 50%;
    display: block;
    float: left;
  }
  
  #service-range .column.third .link-button,
  #service .column.third .link-button {
      height: 10.5em;
      width: 10.5em;
  }
   
  #c-frame--team-list {
    padding-left: 1em;
    padding-right: 1em;
  }
    
    #team .column.half,
    #team .column.third {
      width: 50%;
      padding-left: 1em;
      padding-right: 1em;
      padding-top: 1em;
      padding-bottom: 1em;
    }
    
      .team-index-entry p {
        box-sizing: border-box;
        padding: 0 2em;
      }
    
    #contact {
      padding-bottom: 0;
    }
    
    .button-submit {
      height: 10em;
      width: 10em;
    }
    
    #container--map {
      padding-left: 0;
      padding-right: 0;
    }
    
    footer .column.half,
    footer .column.quarter {
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      text-align: center;
    }
  
    footer .column.third {
      float: none;
      width: 60%;
    }
  
    #footer-about {
      padding-right: 0;
      width: 100%;
    }

    #footer-address {
      padding-left: 0;
      width: 100%;
    }
  
    #footer-relative .container--top,
    #footer-relative .container--top-left {
      position: relative;
      display: block;
      width: 100% !important;
      overflow: hidden;
    }
  
    #footer-relative .container--top {
      padding-top: 1em;
      padding-bottom: 1em;
    }
    #footer-relative .container--top .mobile-block {
      margin-top: 1em;
    }
  
    #footer-relative #container--footer-further {
      padding-top: 0;
    }
  
    #footer-relative #footer-about {
      padding-top: 2em;
      padding-bottom: 2em;
    }

    #footer-relative .jameda-elements {
      text-align: center;
    }

    #footer-relative .jameda-elements .column {
      float: none;
      display: inline-block;
    }

  
      #footer-relative h3,
      #footer-relative p { text-align: center; }
  
      #footer-address h3 { display: none; }
      #footer-about h3 { text-transform: uppercase; font-weight: bold; }
  
    #footer-relative #footer-sm {
      padding-bottom: 2em;
    }
  
      #footer-sm img { display: block; margin: 1em auto 0 auto; float: none; }
  

/*--- further info page --------------*/
  
  .page-further-info .container--top-right {
    margin-top: 1.5em;
    margin-right: 1.5em;
  }
  
    .page-further-info .c-frame.frame-m {
      padding-left: 1em;
      padding-right: 1em;
    }
    
      #read-more .column {
        width: 100%;
        float: none;
        text-align: center;
        padding: 0;
      }
  
      .page-further-info .column.third { font-weight: bold; width: 100%; text-align: center; padding-left: 1em; padding-right: 1em; }
      .page-further-info .column.two-third { width: 100%; text-align: center; padding-left: 1em; padding-right: 1em; }
  
  .membership-entry {
    width: 100% !important;
    margin-right: 0;
  }
  
}

@media all and (max-width: 480px) {

    footer .column.third {
      float: none;
      width: 80%;
    }

  .checkbox {
   width: 100%;

  }

  .file-upload {
    width: 100%;
  }

  .basis-one-third img.circle-scaled {
    width: 65%;
    display: inline-block;
  }

}

/*------------------------------------*\
    #HIGH CONTRAST
\*------------------------------------*/



.high-contrast .bg-blue   { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-red    { background-color: rgba(0,0,0,1) !important; }

.high-contrast .bg-blue-1   { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-blue-2   { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-blue-3   { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-blue-4   { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-red-1    { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-red-2    { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-red-3    { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-green-1  { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-green-2  { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-orange-1 { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-orange-2 { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-grey-1   { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-grey-2   { background-color: rgba(0,0,0,1) !important; }


.high-contrast .bg-red-fond    { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-blue-fond   { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-green-fond  { background-color: rgba(0,0,0,1) !important; }
.high-contrast .bg-yellow-fond { background-color: rgba(0,0,0,1) !important; }


.high-contrast .c-blue  { color: rgba(0,0,0,1) !important; }
.high-contrast .c-red   { color: rgba(0,0,0,1) !important; }
.high-contrast .c-black { color: rgba(0,0,0,1) !important; }
.high-contrast .c-grey  { color: rgba(0,0,0,1) !important; }

.high-contrast .c-blue-1   { color: rgba(0,0,0,1) !important; }
.high-contrast .c-blue-2   { color: rgba(0,0,0,1) !important; }
.high-contrast .c-blue-3   { color: rgba(0,0,0,1) !important; }
.high-contrast .c-blue-4   { color: rgba(0,0,0,1) !important; }
.high-contrast .c-red-1    { color: rgba(0,0,0,1) !important; }
.high-contrast .c-red-2    { color: rgba(0,0,0,1) !important; }
.high-contrast .c-red-3    { color: rgba(0,0,0,1) !important; }
.high-contrast .c-green-1  { color: rgba(0,0,0,1) !important; }
.high-contrast .c-green-2  { color: rgba(0,0,0,1) !important; }
.high-contrast .c-orange-1 { color: rgba(0,0,0,1) !important; }
.high-contrast .c-orange-2 { color: rgba(0,0,0,1) !important; }
.high-contrast .c-grey-1   { color: rgba(0,0,0,1) !important; }
.high-contrast .c-grey-2   { color: rgba(0,0,0,1) !important; }

.high-contrast .bor-blue  { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-red   { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-black { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-grey  { border-color: rgba(0,0,0,1) !important; }


.high-contrast .bor-blue-1   { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-blue-2   { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-blue-3   { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-blue-4   { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-red-1    { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-red-2    { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-red-3    { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-green-1  { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-green-2  { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-orange-1 { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-orange-2 { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-grey-1   { border-color: rgba(0,0,0,1) !important; }
.high-contrast .bor-grey-2   { border-color: rgba(0,0,0,1) !important; }

.high-contrast .bor-blue-1.bor-trans,
.high-contrast .bor-blue-2.bor-trans,
.high-contrast .bor-blue-3.bor-trans,
.high-contrast .bor-blue-4.bor-trans,
.high-contrast .bor-red-1.bor-trans,
.high-contrast .bor-red-2.bor-trans,
.high-contrast .bor-red-3.bor-trans,
.high-contrast .bor-green-1.bor-trans,
.high-contrast .bor-green-2.bor-trans,
.high-contrast .bor-orange-1.bor-trans,
.high-contrast .bor-orange-2.bor-trans,
.high-contrast .bor-grey-1.bor-trans,
.high-contrast .bor-grey-2.bor-trans  { border-color: transparent !important; }


.high-contrast .f-blue-1   { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-blue-2   { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-blue-3   { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-blue-4   { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-red-1    { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-red-2    { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-red-3    { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-green-1  { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-green-2  { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-orange-1 { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-orange-2 { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-grey-1   { fill: rgba(0,0,0,1) !important; }
.high-contrast .f-grey-2   { fill: rgba(0,0,0,1) !important; }

.high-contrast .s-blue-1   { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-blue-2   { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-blue-3   { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-blue-4   { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-red-1    { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-red-2    { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-red-3    { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-green-1  { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-green-2  { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-orange-1 { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-orange-2 { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-grey-1   { stroke: rgba(0,0,0,1) !important; }
.high-contrast .s-grey-2   { stroke: rgba(0,0,0,1) !important; }


.high-contrast ::-webkit-input-placeholder {
  color: rgba(255,255,255,1) !important;
}
.high-contrast :-moz-placeholder {
  color: rgba(255,255,255,1) !important;
  opacity: 1;
}
.high-contrast ::-moz-placeholder {
  color: rgba(255,255,255,1) !important;
  opacity: 1;
}
.high-contrast :-ms-input-placeholder { 
  color: rgba(255,255,255,1) !important;
}

.high-contrast form .c-blue-3 { 
  color: rgba(255,255,255,1) !important;
}

.high-contrast .checkbox label::before {
  background-image: url(../../media/general/form-icons/unchecked_sw.svg);
}

.high-contrast .checkbox input[type="checkbox"]:checked + label::before {
  background-image: url(../../media/general/form-icons/checked_sw.svg);
}

.high-contrast .slideshow .arrow {
    fill: rgba(0,0,0,1) !important;
}

.switch-button {
  display: flex;
  gap: .3em;
  align-items: center;
  font-weight: 700;
  transform: translateY(.3em)
}

.switch {
  display: inline-block;
  width: 2em;
  height: 1em;
  border-radius: 1em;
  border: .1em solid black;
  transform: translateY(-.05em)
}

.switch.is-on {
    background: black;
}

.switch:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: .5em;
  height: .5em;
  border-radius: .5em;
  border: .1em solid black;
}


.switch.is-off:after {
    left: .15em;
}

.switch.is-on:after {
    right: .15em;
    border: .1em solid white;
    background: white;
}

