@charset "UTF-8";

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

/*
 * Legal Disclaimer
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * www.dr-oehlund.de
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2016
 */

/*
 * Gravur, Lineto.com
 */

@font-face {
  font-family: 'Gravur';
  src: url('../../fonts/gravur/lineto-gravurcondensed-bold.eot');
  src: url('../../fonts/gravur/lineto-gravurcondensed-bold.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/gravur/lineto-gravurcondensed-bold.woff') format('woff');
 font-weight: bold;
 font-style: normal;
}

@font-face {
  font-family: 'Gravur';
  src: url('../../fonts/gravur/lineto-gravurcondensed-regular.eot');
  src: url('../../fonts/gravur/lineto-gravurcondensed-regular.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/gravur/lineto-gravurcondensed-regular.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

@font-face {
  font-family: 'Gravur';
  src: url('../../fonts/gravur/lineto-gravurcondensed-light.eot');
  src: url('../../fonts/gravur/lineto-gravurcondensed-light.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/gravur/lineto-gravurcondensed-light.woff') format('woff');
 font-weight: 100;
 font-style: normal;
}

/*
 * Bryant, processtypefoundry.com
 */

@font-face {
  font-family: 'Bryant';
  src: url('../../fonts/bryant/BryantWebMediumSS1.eot');
  src: url('../../fonts/bryant/BryantWebMediumSS1.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/bryant/BryantWebMediumSS1.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

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

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

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

* {
  border: 0px;
  margin: 0px;
  padding: 0px;
    
  text-decoration: none;
  text-rendering: optimizeLegibility;
  
  -webkit-tap-highlight-color: rgba(100%,100%,100%, 0);
  
  -webkit-font-smoothing: antialiased;
    
  font-family: "Gravur", 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;
}


/*------------------------------------*\
    #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;
  border-radius: 0;
  cursor: pointer;
  transition: color .2s;
}

/*------------------------------------*\
    #TABLES
\*------------------------------------*/

table td {
  vertical-align: top;
}

/*------------------------------------*\
    #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.relative { position: relative; }
.view.auto-height { height: auto; }
.view.min-height { min-height: 100%; }

.view.border {
  border-width: 2em;
  border-style: solid;
  box-sizing: border-box;
}

.view.border-bottom-zero {
  border-bottom-width: 0em;
}

.view.border-top-zero {
  border-top-width: 0em;
}

.view.border-top-one {
  border-top-width: 1em;
}


@keyframes seesaw-top {
  0%   { -webkit-transform: rotate( 1.0deg); -ms-transform: rotate( 1.0deg), transform: rotate( 1.0deg) }
  10%  { -webkit-transform: rotate(-0.9deg); -ms-transform: rotate(-0.9deg), transform: rotate(-0.9deg) }
  20%  { -webkit-transform: rotate( 0.8deg); -ms-transform: rotate( 0.8deg), transform: rotate( 0.8deg) }
  30%  { -webkit-transform: rotate(-0.7deg); -ms-transform: rotate(-0.7deg), transform: rotate(-0.7deg) }
  40%  { -webkit-transform: rotate( 0.6deg); -ms-transform: rotate( 0.6deg), transform: rotate( 0.6deg) }
  50%  { -webkit-transform: rotate(-0.5deg); -ms-transform: rotate(-0.5deg), transform: rotate(-0.5deg) }
  60%  { -webkit-transform: rotate( 0.4deg); -ms-transform: rotate( 0.4deg), transform: rotate( 0.4deg) }
  70%  { -webkit-transform: rotate(-0.3deg); -ms-transform: rotate(-0.3deg), transform: rotate(-0.3deg) }
  80%  { -webkit-transform: rotate( 0.2deg); -ms-transform: rotate( 0.2deg), transform: rotate( 0.2deg) }
  90%  { -webkit-transform: rotate(-0.1deg); -ms-transform: rotate(-0.1deg), transform: rotate(-0.1deg) }
  100% { -webkit-transform: rotate( 0.0deg); -ms-transform: rotate( 0.0deg), transform: rotate( 0.0deg) }
}

@-webkit-keyframes seesaw-top {
  0%   { -webkit-transform: rotate( 1.0deg); -ms-transform: rotate( 1.0deg), transform: rotate( 1.0deg) }
  10%  { -webkit-transform: rotate(-0.9deg); -ms-transform: rotate(-0.9deg), transform: rotate(-0.9deg) }
  20%  { -webkit-transform: rotate( 0.8deg); -ms-transform: rotate( 0.8deg), transform: rotate( 0.8deg) }
  30%  { -webkit-transform: rotate(-0.7deg); -ms-transform: rotate(-0.7deg), transform: rotate(-0.7deg) }
  40%  { -webkit-transform: rotate( 0.6deg); -ms-transform: rotate( 0.6deg), transform: rotate( 0.6deg) }
  50%  { -webkit-transform: rotate(-0.5deg); -ms-transform: rotate(-0.5deg), transform: rotate(-0.5deg) }
  60%  { -webkit-transform: rotate( 0.4deg); -ms-transform: rotate( 0.4deg), transform: rotate( 0.4deg) }
  70%  { -webkit-transform: rotate(-0.3deg); -ms-transform: rotate(-0.3deg), transform: rotate(-0.3deg) }
  80%  { -webkit-transform: rotate( 0.2deg); -ms-transform: rotate( 0.2deg), transform: rotate( 0.2deg) }
  90%  { -webkit-transform: rotate(-0.1deg); -ms-transform: rotate(-0.1deg), transform: rotate(-0.1deg) }
  100% { -webkit-transform: rotate( 0.0deg); -ms-transform: rotate( 0.0deg), transform: rotate( 0.0deg) }
}

@keyframes seesaw-bottom {
  0%   { -webkit-transform: rotate(-1.0deg); -ms-transform: rotate(-1.0deg), transform: rotate(-1.0deg) }
  10%  { -webkit-transform: rotate( 0.9deg); -ms-transform: rotate( 0.9deg), transform: rotate( 0.9deg) }
  20%  { -webkit-transform: rotate(-0.8deg); -ms-transform: rotate(-0.8deg), transform: rotate(-0.8deg) }
  30%  { -webkit-transform: rotate( 0.7deg); -ms-transform: rotate( 0.7deg), transform: rotate( 0.7deg) }
  40%  { -webkit-transform: rotate(-0.6deg); -ms-transform: rotate(-0.6deg), transform: rotate(-0.6deg) }
  50%  { -webkit-transform: rotate( 0.5deg); -ms-transform: rotate( 0.5deg), transform: rotate( 0.5deg) }
  60%  { -webkit-transform: rotate(-0.4deg); -ms-transform: rotate(-0.4deg), transform: rotate(-0.4deg) }
  70%  { -webkit-transform: rotate( 0.3deg); -ms-transform: rotate( 0.3deg), transform: rotate( 0.3deg) }
  80%  { -webkit-transform: rotate(-0.2deg); -ms-transform: rotate(-0.2deg), transform: rotate(-0.2deg) }
  90%  { -webkit-transform: rotate( 0.1deg); -ms-transform: rotate( 0.1deg), transform: rotate( 0.1deg) }
  100% { -webkit-transform: rotate(-0.0deg); -ms-transform: rotate(-0.0deg), transform: rotate(-0.0deg) }
}

@-webkit-keyframes seesaw-bottom {
  0%   { -webkit-transform: rotate(-1.0deg); -ms-transform: rotate(-1.0deg), transform: rotate(-1.0deg) }
  10%  { -webkit-transform: rotate( 0.9deg); -ms-transform: rotate( 0.9deg), transform: rotate( 0.9deg) }
  20%  { -webkit-transform: rotate(-0.8deg); -ms-transform: rotate(-0.8deg), transform: rotate(-0.8deg) }
  30%  { -webkit-transform: rotate( 0.7deg); -ms-transform: rotate( 0.7deg), transform: rotate( 0.7deg) }
  40%  { -webkit-transform: rotate(-0.6deg); -ms-transform: rotate(-0.6deg), transform: rotate(-0.6deg) }
  50%  { -webkit-transform: rotate( 0.5deg); -ms-transform: rotate( 0.5deg), transform: rotate( 0.5deg) }
  60%  { -webkit-transform: rotate(-0.4deg); -ms-transform: rotate(-0.4deg), transform: rotate(-0.4deg) }
  70%  { -webkit-transform: rotate( 0.3deg); -ms-transform: rotate( 0.3deg), transform: rotate( 0.3deg) }
  80%  { -webkit-transform: rotate(-0.2deg); -ms-transform: rotate(-0.2deg), transform: rotate(-0.2deg) }
  90%  { -webkit-transform: rotate( 0.1deg); -ms-transform: rotate( 0.1deg), transform: rotate( 0.1deg) }
  100% { -webkit-transform: rotate(-0.0deg); -ms-transform: rotate(-0.0deg), transform: rotate(-0.0deg) }
}

.seesaw-top,
.seesaw-bottom {
  z-index: 1;
  position: absolute;
  left: -25%;
  width: 150%;
  height: 5em;
  border: 1px solid transparent;
  transition: transform .5s ease-in-out;
}

.seesaw-top { top: -4em; }
.seesaw-bottom { bottom: -4em; }

.seesaw-top.animation { -webkit-animation: seesaw-top 7s 1 ease-in-out; animation: seesaw-top 7s 1 ease-in-out; }
.seesaw-bottom.animation { -webkit-animation: seesaw-bottom 7s 1 ease-in-out; animation: seesaw-bottom 7s 1 ease-in-out; }


/*--- 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;
}

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

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

.content-frame.half { width: 50%; margin: 0; }

.content-frame.large { width: 90%; min-width: 20em; max-width: 100em; }
.content-frame.medium { width: 80%; min-width: 20em; max-width: 80em; }
.content-frame.small  { width: 60%; min-width: 20em; max-width: 60em; }

/*--- columns ------------------------*/

.column {
  position: relative;
  min-height: 1em;
  float: left;
  box-sizing: border-box;
}

.column.left   { float: left; }
.column.right  { float: right; }
.column.inline { display: inline-block; float: none; vertical-align: top; }


.column.full    { width: 100%; }
.column.half    { width: 50%; }
.column.third   { width: 33.333%; }
.column.quarter { width: 25%; }

.column.two-fivth   { width: 40%; }
.column.three-fivth { width: 60%; }

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

.h {
  margin: 0 auto;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-align: left;

  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

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

p {
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-align: left;
}

  p a       { transition: border .2s; border-bottom: 1px solid transparent; }
  p a:hover { border-bottom: 1px solid; color: rgba(255,199,0,1); }

  #intro p a       { transition: color .2s; border: 0px; }
  #intro p a:hover { color: rgba(255,199,0,1); border: 0px; }
  #get-there p a:hover { color: rgba(40,97,141,1); }


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

button.center { 
  display: block; 
  margin: 0 auto;
}

button:hover {
  color: rgba(255,199,0,1); 
}

/*--- inline images/videos -----------*/

img.inline,
video.inline {
    position: relative;
  display: block;
  width: 100%;
}

video.inline.inline-70,
img.inline.inline-70 { width: 70%; }

/*------------------------------------*\
    #COOKIE CONSENT
\*------------------------------------*/

.cc-window {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2em;
  box-sizing: border-box;
}

.cc-text-container { 
  display: block; width: 75%;
}

.cc-compliance { float: right; }
.cc-invisible { display: none; }

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

main {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;  
}

/*--- header -------------------------*/
/*--- desktop ------------------------*/

  header {
    z-index: 2;
    position: absolute;
    bottom: 0;
    width: 100%;
    -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  header.fixed { position: fixed; bottom: 100%; transition: margin-bottom 0.2s; }
  header.open,
  header.open-hover  { margin-bottom: -5em; }

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

    header > nav {
      width: 100%;
      box-sizing: border-box;
      padding: 0 1em;
    }

    header > nav > .logo-container {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }

      header > nav > .logo-container > .header-logo {
        height: 1.2em;
        position: absolute;
        top: 50%;
        left: 6em;
        margin-top: -.6em;
        cursor: pointer;
      }


    header > nav > ul {
      list-style: none;
      text-align: center;
    }

    header > nav > ul > li {
      display: inline-block;
      margin-right: 1em;
      padding: 1em 0;
      cursor: pointer;
      transition: color .2s;
    }


    header > nav > ul > li:hover,
    header > nav > ul > li.in-scroll {
      color: rgba(255,199,0,1);
    }

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

  header.mobile {
    z-index: 2;
    position: fixed;
    top: 0;
    bottom: auto;
    width: auto;
    height: 7em;
    min-width: 50%;
    -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  header.mobile.mobile-open { height: 100%; }

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

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

    header.mobile > nav {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      box-sizing: border-box;
      padding: 7em 2em 0 2em;
      -webkit-transform: translateX(-100%);
          -ms-transform: translateX(-100%);
              transform: translateX(-100%);
      transition: transform .2s;
    }

    header.mobile > nav.mobile-open { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); }

    header.mobile > nav > ul > li {
      display: block;
      text-align: left;
      margin-right: 1em;
      padding: .5em 0;
      cursor: pointer;
      transition: color .2s;
      text-transform: none;
    }

    header.mobile .switch-button {
      z-index: 30;
      position: fixed;
      left: calc(100vw - 2.5em);
      top: 1.5em;
      width: 10rem;
      transform: translate(-100%, .5em);
      justify-content: end;
    }

    header.mobile .switch {
      width: 3em;
      height: 1.5em;
      border-radius: 1em;
      border: .1em solid rgba(40,97,141,1);
      transform: translateY(-.05em)
    }

    header.mobile .switch:after {
      width: .75em;
      height: .75em;
      border-radius: .75em;
    }

    header.mobile .switch.is-off:after {
      left: .2em;
    }

    header.mobile .switch.is-on:after {
      right: .2em;
    }

/*------------------------------------*\
    #INTRO
\*------------------------------------*/

  #intro .vertical-centered { 
    position: absolute; 
    left: 0%;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }   

  #intro-image-mobile {
    /* display: none; */
    position: relative;
    width: 25em;
  }

  canvas#smile {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
  }

  #intro p {
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  #intro p button {
    padding: 1rem 2rem;
    border-radius: 3rem;
    border: 2px solid rgba(255,199,0,1);
  }

  #intro p button:hover {
    padding: 1rem 2rem;
    border-radius: 3rem;
    background: rgba(40,97,141,1);
    color: rgba(255,255,255,1);
    border: 2px solid rgba(255,199,0,1);
  }

  #intro #arrow-down {
    position: absolute;
    bottom: 2.5em;
    left: 50%;
    width: 2.25em;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    cursor: pointer;
  }


  #intro .container-announcement {
    z-index: 10;
    position: absolute;
    left: 20%;
    bottom: 25%;
  }

  #intro .container-announcement .column {
    padding: 1em;
  }  

  #intro .container-announcement p {
    position: relative;
  }  

  #intro .container-announcement:after {
    content: ' ';
    position: absolute;
    width: 100%;
    padding-bottom: 100%; 
    top: 50%; 
    left: 0; 
    transform: translateY(-50%); 
    border-radius: 100%; 
    overflow: hidden;
    background-color: rgba(255,199,0,1)
  }


/*------------------------------------*\
    #SERVICE RANGE
\*------------------------------------*/

#container--service-range-links .center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40em;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

    #container--service-range-links .column p {
      display: inline-block;
      width: 75%;
      vertical-align: middle;
    }

      #container--service-range-links .column p span {
        border-bottom: 1px solid;
        border-color: transparent;
        transition: border .2s;
      }
      #container--service-range-links .column:hover p span {
        border-bottom: 1px solid;
        border-color: rgba(255,199,0,1);
      }

/*------------------------------------*\
    #SERVICE
\*------------------------------------*/

#container--service-links .column p {
  display: inline-block;
  width: 70%;
  margin-left: 5%;
  vertical-align: middle;
}

  #container--service-links .column p span {
    border-bottom: 1px solid;
    border-color: transparent;
    transition: border .2s;
  }

  #container--service-links .column:hover p span {
    border-bottom: 1px solid;
    border-color: rgba(255,255,255,1);
  }

      img.picto-inline {
        display: inline-block;
        vertical-align: middle;
        width: 25%;
        height: 10em;
        margin-top: -1.5em;
      }


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

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

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

.page-further-info span.list-entry {
  position: relative;
  display: block;
  padding-left: 1em;
}

.page-further-info span.list-entry:before {
  position: absolute;
  left: 0;
  content: '●';    
}


/*------------------------------------*\
    #FOOTER
\*------------------------------------*/

footer {
  border-bottom-width: 0 !important;
}

#button-imprint {
  transition: .2s;
  border-bottom: 1px solid transparent;
}

#button-imprint:hover {
  border-bottom: 1px solid;
}

#imprint {
  display: none;
  border-top-width: 0 !important;
}

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

#button-read-more,
#button-read-less {
  border-bottom: 1px transparent;
  transition: border .2s;
}

#button-read-more:hover,
#button-read-less:hover {
  border-bottom: 1px solid;
}

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


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

.slideshow .flickity-page-dots .dot {
  opacity: 1;
  border: 2px solid rgba(255,255,255,1);
  background-color: transparent;
}

.slideshow .flickity-page-dots .dot.is-selected {
  opacity: 1;
  border: 2px solid rgba(255,255,255,1);
  background-color: rgba(255,255,255,1);
}

.slideshow .flickity-prev-next-button {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  border-radius: 0px;
  background: transparent;
  
}

.slideshow .flickity-prev-next-button.previous {
  left: 0;
  cursor: url('../../media/general/arrows/cursor/left.svg') 50 50, pointer;
}

.slideshow .flickity-prev-next-button.next {
  right: 0;
  cursor: url('../../media/general/arrows/cursor/right.svg') 50 50, pointer;
}

.slideshow .arrow {
  display: none;
}

.slideshow .slide {
  width: 100%;
}


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

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

  .gm-style > div > a > div > img {
    top: -3em !important;
  }

  .gm-style > .gmnoprint:not(.gm-bundled-control) {
    bottom: 3em !important;
  }

  .gm-style > .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
    bottom: 10em !important;
  }

  .gm-style > .gmnoprint.gm-style-cc + div {
    top: 3em !important;
  }
}

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

/*------------------------------------*\
    #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;
}

.background-yellow,
.cc-window         { background-color: rgba(255,199,0,1) }
.background-blue   { background-color: rgba(40,97,141,1) }
.background-white  { background-color: rgba(255,255,255,1) }
.background-black  { background-color: rgba(0,0,0,1) }

.border-yellow { border-color: rgba(255,199,0,1) }
.border-blue   { border-color: rgba(40,97,141,1) }
.border-white  { border-color: rgba(255,255,255,1) }
.border-black  { border-color: rgba(0,0,0,1) }

.color-yellow { color: rgba(255,199,0,1) }
.color-blue   { color: rgba(40,97,141,1) }
.color-white  { color: rgba(255,255,255,1) }
.color-black  { color: rgba(0,0,0,1) }


.stroke-yellow { stroke: rgba(255,199,0,1) }
.stroke-blue   { stroke: rgba(40,97,141,1) }

.fill-yellow { fill: rgba(255,199,0,1) }
.fill-blue   { fill: rgba(40,97,141,1) }


.clear { clear: both; }

.top-right {
  position: absolute;
  top: 0;
  right: 0;
}

/*--- clearances ---------------------*/

.margin-top-nine      { margin-top:    9em; }
.margin-top-five      { margin-top:    5em; }
.margin-top-triple    { margin-top:    3em; }
.margin-top-twice     { margin-top:    2em; }
.margin-top           { margin-top:    1em; }
.margin-top-one-five  { margin-top:  1.5em; }
.margin-top-half      { margin-top:  0.5em; }
.margin-bottom        { margin-bottom: 1em; }
.margin-bottom-twice  { margin-bottom: 2em; }
.margin-bottom-triple { margin-bottom: 3em; }
.margin-bottom-four   { margin-bottom: 4em; }
.margin-bottom-five   { margin-bottom: 5em; }
.margin-bottom-nine   { margin-bottom: 9em; }

.margin-all-0-25         { margin:  .5em; }
.margin-right         { margin-right:  1em; }
.margin-left         { margin-left:  1em; }


.padding-all    { padding: 1em; }

.padding-top          { padding-top:    1em; }
.padding-bottom       { padding-bottom: 1em; }
.padding-bottom-twice { padding-bottom: 2em; }

.padding-left         { padding-left:   1em; }
.padding-right        { padding-right:  1em; }
.padding-right-triple  { padding-right:  3em; }

/*--- text formats -------------------*/

.text-super  { font-size: 4.50em; line-height: 1.4; } /* */
.text-huge   { font-size: 3.20em; line-height: 1.4; } /* 32,355/31,698 */
.text-big    { font-size: 2.40em; line-height: 1.4; } /* 23.93 */
.text-medium { font-size: 1.70em; line-height: 1.4; } /* 17.33/17,866 */
.text-small  { font-size: 1.50em; line-height: 1.4; } /* 15/14,689 */
.text-tiny   { font-size: 1.10em; line-height: 1.4; } /* 11,751 */

.uppercase { text-transform: uppercase }
.center    { text-align: center; }
.underline { display: inline; text-decoration: none; border-bottom: 1px solid; }
.spaced    { letter-spacing: 0.05em }

.bryant    { font-family: 'Bryant'; }

.nobr { white-space: nowrap; }

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

.float-left  { float: left; }
.float-right { float: right; }

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

.mobile-only    { display: none; }
.mobile-only-br { display: none; }
.mobile-hidden  { display: block; }

.hidden { display: none; }

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

@media all and (max-width: 1700px) {
  body { font-size: 0.8em; }
}
@media all and (max-width: 1600px), all and (max-height: 900px) {
  body { font-size: 0.7em; }
}
@media all and (max-width: 1050px) {
  body { font-size: 0.6em; }
}


@media all and (max-width: 800px) {
  
.mobile-only    { display: block; }  
.mobile-only-br { display: block; height: 0; }  
.mobile-hidden  { display: none; }  
  
  body { font-size: 0.7em; }
  
  .text-medium { font-size: 2.20em; }
  .text-small  { font-size: 2.00em; }
  .text-tiny   { font-size: 1.80em; }
  
  .margin-top-nine { margin-top: 7em; }
  
  .content-frame.small { width: 75% }
  
  .column {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }  
  
  img.inline.inline-tablet-30 { width: 30%; }

  .seesaw-top, .seesaw-bottom { display: none; }
  
  header > nav > ul > li > b {
    transition: border .2s;
    border-bottom: 2px solid transparent;
  }

  header > nav > ul > li:hover b,
  header > nav > ul > li.in-scroll b {
    border-bottom: 2px solid rgba(255,199,0,1);
  }
  
  .slideshow .flickity-prev-next-button { width: 20%; }  
  
  #intro    { height: calc(100% - 5em); }  
  #map-view { height: 50%; }
  
  
  #intro               { margin-top: 5em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #welcome-image       { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #welcome-text        { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #welcome-slideshow   { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #service-range       { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #service-range-image { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #dentists            { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #team                { margin-top: 0em; margin-bottom: 5em; border-top: 0px; border-bottom: 0px; }
  #service             { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #service-image       { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #contact             { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #get-there           { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #map-view            { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  footer               { margin-top: 0em !important; margin-bottom: 2em !important; border-top: 0px; border-bottom: 0px; }
  
  #dentists .column.half { padding-top: 5em; padding-bottom: 5em; }
  #team .column.half { padding-top: 5em; padding-bottom: 5em; }
  #team .column.half.right { padding-top: 5em; padding-bottom: 2em; }
  #contact .column.left { border-bottom: 2em solid rgba(255,255,255,1); }
  
  
}

@media all and (max-width: 700px) {
  
  body { font-size: 0.5em; }
        
  .margin-top-nine { margin-top: 4em; }
  
  #intro,
  #welcome-text,
  #service-range,
  #service,
  #dentists,
  #contact,
  #team { border-bottom: 0; border-top: 0; }    

  #welcome-image,
  #service-range-image,
  #service-image { 
    border-left: 2em solid rgba(255,255,255,1); 
    border-right: 2em solid rgba(255,255,255,1); 
    box-sizing: border-box; 
  }
    
  #intro    { height: calc(100% - 7em); margin-top: 7em; }
  #intro h1 { font-size: 2.20em; }
  #intro h2 { font-size: 3.75em; }
  #intro p  { font-size: 2.00em; }
  #intro-image-mobile { width: 18em; margin-top: 2em; }
  
  #intro               { margin-top: 5em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #welcome-image       { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #welcome-text        { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #welcome-slideshow   { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #service-range       { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #service-range-image { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #dentists            { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #team                { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #service             { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #service-image       { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #contact             { margin-top: 0em; margin-bottom: 7em; border-top: 0px; border-bottom: 0px; }
  #get-there           { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  #map-view            { margin-top: 0em; margin-bottom: 2em; border-top: 0px; border-bottom: 0px; }
  footer               { margin-top: 0em !important; margin-bottom: 2em !important; border-top: 0px; border-bottom: 0px; }
  
  #dentists .column.half { padding-top: 5em; padding-bottom: 5em; }
  #team .column.half { padding-top: 5em; padding-bottom: 5em; border-top: 2em solid rgba(255,255,255,1); }
  #team .column.half.right { padding-top: 0em; padding-bottom: 0em; }
  #contact .column.left { border-bottom: 2em solid rgba(255,255,255,1); }
  
  #container--service-range-links .column img.inline { width: 90%; margin-left: 5%; }
    
  #container--service-range-links .column {
    -webkit-transform: translate(0,0) !important;
        -ms-transform: translate(0,0) !important;
            transform: translate(0,0) !important;
  }
    
  #team { background-color: rgba(255,199,0,1); }    
  #team h3 { color: rgba(255,255,255,1); }    
  #contact { border-bottom: 0; }
  #get-there { border-top: 0; }
    
  @media all and (orientation: landscape) {
    #intro { height: 200%; margin-top: 7em; }
  }
  
}


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

.high-contrast p a:hover { 
  color: rgba(120,120,120,1); 
}

.high-contrast #intro p a:hover { 
  color: rgba(120,120,120,1); 
}

.high-contrast #get-there p a:hover { 
  color: rgba(0,0,0,1); 
}


.high-contrast button:hover { 
  color: rgba(120,120,120,1); 
}

.high-contrast header > nav > ul > li:hover,
.high-contrast header > nav > ul > li.in-scroll {
  color: rgba(120,120,120,1);
}

.high-contrast #intro p button {
  border-color: rgba(120,120,120,1);
}

.high-contrast #intro p button:hover {
  background: rgba(0,0,0,1);
  color: rgba(255,255,255,1);
  border-color: rgba(120,120,120,1);
}

.high-contrast #intro .container-announcement:after {
  background-color: rgba(120,120,120,1)
}

.high-contrast #container--service-range-links .column:hover p span {
  border-color: rgba(120,120,120,1);
}

.high-contrast #container--service-links .column:hover p span {
  border-color: rgba(255,255,255,1);
}

.high-contrast .slideshow .flickity-page-dots .dot {
  border-color: rgba(255,255,255,1);
}

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


.high-contrast .cc-window           { background-color: rgba(0,0,0,1) }
.high-contrast .cc-window *         { color: rgba(255,255,255,1) !important }

.high-contrast .background-yellow   { background-color: rgba(0,0,0,1) }
.high-contrast .background-yellow * { color: rgba(255,255,255,1) !important }


.high-contrast .background-blue   { background-color: rgba(0,0,0,1) }
.high-contrast .background-white  { background-color: rgba(255,255,255,1) }
.high-contrast .background-black  { background-color: rgba(0,0,0,1) }

.high-contrast .border-yellow { border-color: rgba(0,0,0,1) }
.high-contrast .border-blue   { border-color: rgba(0,0,0,1) }
.high-contrast .border-white  { border-color: rgba(255,255,255,1) }
.high-contrast .border-black  { border-color: rgba(0,0,0,1) }

.high-contrast .color-yellow { color: rgba(0,0,0,1) }
.high-contrast .background-blue .color-yellow { color: rgba(255,255,255,1) }


.high-contrast .color-blue   { color: rgba(0,0,0,1) }
.high-contrast .color-white  { color: rgba(255,255,255,1) }
.high-contrast .color-black  { color: rgba(0,0,0,1) }


.high-contrast .stroke-yellow { stroke: rgba(0,0,0,1) }
.high-contrast .stroke-blue   { stroke: rgba(0,0,0,1) }

.high-contrast .fill-yellow { fill: rgba(0,0,0,1) }
.high-contrast .fill-blue   { fill: rgba(0,0,0,1) }


.high-contrast .slideshow .flickity-prev-next-button.previous {
  cursor: url('../../media/general/arrows/cursor/left-black.svg') 50 50, pointer;
}

.high-contrast .slideshow .flickity-prev-next-button.next {
  cursor: url('../../media/general/arrows/cursor/right-black.svg') 50 50, pointer;
}

  .high-contrast header > nav > ul > li:hover b,
  .high-contrast header > nav > ul > li.in-scroll b {
    border-bottom: 2px solid rgba(120,120,120,1);
  }


.high-contrast .btn-applet {
  background: rgba(255,255,255,1) !important;
  border-color: rgba(255,255,255,1) !important;
}

.high-contrast .btn-applet:hover {
  background: rgba(0,0,0,1) !important;
  border-color: rgba(255,255,255,1) !important;
}


.switch-button {
  position: absolute;
  right: 2em;
  top: 1.5em;
  display: flex;
  gap: .5em;
  align-items: center;
  transform: translateY(-.1em)
}

.switch {
  display: inline-block;
  width: 2em;
  height: 1em;
  border-radius: 1em;
  border: .1em solid rgba(40,97,141,1);
  transform: translateY(-.05em)
}

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

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


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

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