/************* COMPONENT VARS *************/
/************* COMPONENT VARS END *************/
/*media query proposal - for refactoring 15-06-2016*/
/********************* global slider animations ******************/

/********************* CUSTOM FONT FACE FOR BERNAFON SHOP *********************/

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500;1,700&display=swap");

:root {
  --bernafon-red: #FA344C;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #3B3C3D;
  background-color: #ffffff; }

@media only screen and (max-width: 1250px) {
  html, body {
    font-size: 14px; } }

@media only screen and (max-width: 800px) {
  html, body {
    font-size: 13px; } }

@media only screen and (max-width: 479px) {
  html, body {
    font-size: 12px;
    overflow-x: hidden; } }

@media only screen and (min-width: 1950px) {
  html, body {
    font-size: 18px; } }

@media only screen and (min-width: 2200px) {
  html, body {
    font-size: 22px; } }

#wrapper > #content .component {
  padding: 0; }
  #wrapper > #content .component .info-box {
    padding: 1.5rem;
    border: 1px solid #E8E5E1;
    background-color: #F7F6F4; }
    #wrapper > #content .component .info-box .info-box-header {
      border-bottom: 1px solid #B7B3AC; }
      #wrapper > #content .component .info-box .info-box-header h3 {
        font-size: 1.4rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
      }
      #wrapper > #content .component .info-box .info-box-header > * {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
      }
    #wrapper > #content .component .info-box .info-box-content {
      margin-top: 0.75rem; }
      #wrapper > #content .component .info-box .info-box-content a:nth-of-type(1) {
        clear: both;
        float: left; }
      #wrapper > #content .component .info-box .info-box-content a:nth-of-type(2) {
        float: right; }
        #wrapper > #content .component .info-box .info-box-content a:nth-of-type(2)::after {
          clear: both; }
      #wrapper > #content .component .info-box .info-box-content a:not(.button):not(.link) {
        margin: 2rem 0 1rem;
        padding: 0.8rem 2em 1em; }
      #wrapper > #content .component .info-box .info-box-content::after {
        content: '';
        display: block;
        clear: both; }
    #wrapper > #content .component .info-box .info-box-label {
      color: #7E7B78;
      clear: both;
      font-size: 0.875rem; }
    #wrapper > #content .component .info-box .info-box-content .link-container .font-regular {
      font-family: 'Roboto', sans-serif !important;
      font-weight: 600;
    }
    #wrapper > #content .component .info-box .info-box-label,
    #wrapper > #content .component .info-box .info-box-value,
    #wrapper > #content .component .info-box .info-box-subheader,
    #wrapper > #content .component .info-box input {
      float: left;
      margin: 0.75rem 0 0.3rem; }
    #wrapper > #content .component .info-box .info-box-value {
      clear: both;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      margin-top: 0;
      font-size: 0.875rem;
      line-height: 1.4; }
      #wrapper > #content .component .info-box .info-box-value.not-available {
        color: #D7D3CC; }

    #wrapper > #content .component .info-box .info-box-content label {
      font-family: 'Roboto', sans-serif;
      font-weight: 600;
    }

h1, .like-h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 0 0 0.4em 0;
  font-size: 4em;
  line-height: 1.125;
  color: inherit; }
  @media all and (-ms-high-contrast: none) {
    h1, .like-h1 {
      font-weight: bold; } }

h2, .like-h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-weight: normal;
  font-style: normal;
  font-size: 3em;
  margin: 0 0 0.3em 0;
  line-height: 1.25;
  color: inherit; }
  @media all and (-ms-high-contrast: none) {
    h2, .like-h2 {
      font-weight: bold; } }
  h2.light, .like-h2.light {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin: 0 0 0.3em 0;
  }

h3, .like-h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2em;
  margin: 0 0 0.7rem 0;
  line-height: 1.3;
  color: inherit; }
  h3.h3-b2b, .like-h3.h3-b2b {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }
  h3.h3-b2b-medium, .like-h3.h3-b2b-medium {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
  }

h4, .like-h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.3333em;
  margin: 0 0 .4em 0;
  line-height: 1.3;
  color: inherit; }
  @media all and (-ms-high-contrast: none) {
    h4, .like-h4 {
      font-weight: bold; } }

h5, .like-h5 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3333em;
  margin: 1.75em 0 1em 0;
  line-height: 1.2;
  color: inherit; }

a {
  cursor: pointer; }

a.button {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #3B3C3D;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #3B3C3D !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  a.button:not(.disabled) {
    cursor: pointer; }
  a.button a {
    color: #3B3C3D !important;
    text-decoration: none;
    background-color: transparent; }
  a.button:not(.disabled):hover {
    color: #ffffff !important;
    background-color: #3B3C3D;
    text-shadow: none; }
    a.button:not(.disabled):hover a {
      text-decoration: none;
      color: #ffffff !important;
      text-shadow: none; }

a.disc-down {
  font-size: 1.8em;
  width: 1em;
  height: 1em;
  line-height: 1;
  border: 3px solid #3B3C3D;
  display: inline-block;
  overflow: hidden;
  color: #3B3C3D;
  padding: 0.4em;
  border-radius: 50%;
  position: relative;
  margin: 0.7em auto; }
  a.disc-down:hover {
    background-color: #3B3C3D;
    color: #ffffff; }
  a.disc-down span {
    font-family: "Oticon-icon-www";
    color: #3B3C3D;
    text-decoration: none;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    position: absolute;
    top: 0.1em;
    left: 0;
    bottom: 0;
    right: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    margin: auto;
    -webkit-animation: cta-down 0.4s;
    animation: cta-down 0.4s; }
  a.disc-down:hover span {
    color: #ffffff;
    -webkit-animation: cta-down-hover 0.4s;
    animation: cta-down-hover 0.4s; }

a.disc-right {
  font-size: 1.8em;
  width: 1em;
  height: 1em;
  line-height: 1;
  border: 3px solid #3B3C3D;
  display: inline-block;
  overflow: hidden;
  color: #3B3C3D;
  padding: 0.4em;
  border-radius: 50%;
  position: relative;
  margin: 0.7em auto; }
  a.disc-right:hover {
    background-color: #3B3C3D;
    color: #ffffff; }
  a.disc-right span {
    font-family: "Oticon-icon-www";
    color: #3B3C3D;
    text-decoration: none;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    position: absolute;
    top: -0.052em;
    bottom: 0;
    right: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    margin: auto;
    -webkit-animation: cta-right 0.4s;
    animation: cta-right 0.4s;
    left: 0.2rem; }
  a.disc-right:hover span {
    color: #ffffff;
    -webkit-animation: cta-right-hover 0.4s;
    animation: cta-right-hover 0.4s; }

:not(.content-overflow) .white-txt a.disc-right,
:not(.content-overflow) .white-txt a.disc-down {
  font-size: 1.8em;
  width: 1em;
  height: 1em;
  line-height: 1;
  border: 3px solid #ffffff;
  display: inline-block;
  overflow: hidden;
  color: #ffffff;
  padding: 0.4em;
  border-radius: 50%;
  position: relative;
  margin: 0.7em auto; }
  :not(.content-overflow) .white-txt a.disc-right:hover,
  :not(.content-overflow) .white-txt a.disc-down:hover {
    background-color: #ffffff;
    color: #ffffff; }
  :not(.content-overflow) .white-txt a.disc-right span,
  :not(.content-overflow) .white-txt a.disc-down span {
    font-family: "Oticon-icon-www";
    color: #ffffff;
    text-decoration: none;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    position: absolute;
    top: 0.1em;
    left: 0;
    bottom: 0;
    right: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    margin: auto;
    -webkit-animation: cta-down 0.4s;
    animation: cta-down 0.4s; }
  :not(.content-overflow) .white-txt a.disc-right:hover span,
  :not(.content-overflow) .white-txt a.disc-down:hover span {
    color: #3B3C3D;
    -webkit-animation: cta-down-hover 0.4s;
    animation: cta-down-hover 0.4s; }

.button-white {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #ffffff !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button-white:not(.disabled) {
    cursor: pointer; }
  .button-white a {
    color: #ffffff !important;
    text-decoration: none;
    background-color: transparent; }
  .button-white:not(.disabled):hover {
    color: #3B3C3D !important;
    background-color: #ffffff;
    text-shadow: none; }
    .button-white:not(.disabled):hover a {
      text-decoration: none;
      color: #3B3C3D !important;
      text-shadow: none; }

.button-grey {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #6B6867;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #6B6867 !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button-grey:not(.disabled) {
    cursor: pointer; }
  .button-grey a {
    color: #6B6867 !important;
    text-decoration: none;
    background-color: transparent; }
  .button-grey:not(.disabled):hover {
    color: #ffffff !important;
    background-color: #6B6867;
    text-shadow: none; }
    .button-grey:not(.disabled):hover a {
      text-decoration: none;
      color: #ffffff !important;
      text-shadow: none; }

.button-dark-grey {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #3B3C3D;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #3B3C3D !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button-dark-grey:not(.disabled) {
    cursor: pointer; }
  .button-dark-grey a {
    color: #3B3C3D !important;
    text-decoration: none;
    background-color: transparent; }
  .button-dark-grey:not(.disabled):hover {
    color: #ffffff !important;
    background-color: #3B3C3D;
    text-shadow: none; }
    .button-dark-grey:not(.disabled):hover a {
      text-decoration: none;
      color: #ffffff !important;
      text-shadow: none; }

.button-corporate {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid var(--bernafon-red);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: var(--bernafon-red) !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button-corporate:not(.disabled) {
    cursor: pointer; }
  .button-corporate a {
    color: var(--bernafon-red) !important;
    text-decoration: none;
    background-color: transparent; }
  .button-corporate:not(.disabled):hover {
    color: #ffffff !important;
    background-color: var(--bernafon-red);
    text-shadow: none; }
    .button-corporate:not(.disabled):hover a {
      text-decoration: none;
      color: #ffffff !important;
      text-shadow: none; }

.button-corporate-grey {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid var(--bernafon-red);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: var(--bernafon-red) !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button-corporate-grey:not(.disabled) {
    cursor: pointer; }
  .button-corporate-grey a {
    color: var(--bernafon-red) !important;
    text-decoration: none;
    background-color: transparent; }
  .button-corporate-grey:not(.disabled):hover {
    color: #F7F6F4 !important;
    background-color: var(--bernafon-red);
    text-shadow: none; }
    .button-corporate-grey:not(.disabled):hover a {
      text-decoration: none;
      color: #F7F6F4 !important;
      text-shadow: none; }

.button-blue {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #88a4b9;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #88a4b9 !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button-blue:not(.disabled) {
    cursor: pointer; }
  .button-blue a {
    color: #88a4b9 !important;
    text-decoration: none;
    background-color: transparent; }
  .button-blue:not(.disabled):hover {
    color: #F7F6F4 !important;
    background-color: #88a4b9;
    text-shadow: none; }
    .button-blue:not(.disabled):hover a {
      text-decoration: none;
      color: #F7F6F4 !important;
      text-shadow: none; }

.button.white {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #ffffff !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button.white:not(.disabled) {
    cursor: pointer; }
  .button.white a {
    color: #ffffff !important;
    text-decoration: none;
    background-color: transparent; }
  .button.white:not(.disabled):hover {
    color: #19191A !important;
    background-color: #ffffff;
    text-shadow: none; }
    .button.white:not(.disabled):hover a {
      text-decoration: none;
      color: #19191A !important;
      text-shadow: none; }

.button.dark {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #19191A;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #19191A !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button.dark:not(.disabled) {
    cursor: pointer; }
  .button.dark a {
    color: #19191A !important;
    text-decoration: none;
    background-color: transparent; }
  .button.dark:not(.disabled):hover {
    color: #ffffff !important;
    background-color: #19191A;
    text-shadow: none; }
    .button.dark:not(.disabled):hover a {
      text-decoration: none;
      color: #ffffff !important;
      text-shadow: none; }

.button.footer {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #B7B3AC;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #B7B3AC !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button.footer:not(.disabled) {
    cursor: pointer; }
  .button.footer a {
    color: #B7B3AC !important;
    text-decoration: none;
    background-color: transparent; }
  .button.footer:not(.disabled):hover {
    color: #19191A !important;
    background-color: #B7B3AC;
    text-shadow: none; }
    .button.footer:not(.disabled):hover a {
      text-decoration: none;
      color: #19191A !important;
      text-shadow: none; }

.button.corporate {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid var(--bernafon-red);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: var(--bernafon-red) !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box; }
  .button.corporate:not(.disabled) {
    cursor: pointer; }
  .button.corporate a {
    color: var(--bernafon-red) !important;
    text-decoration: none;
    background-color: transparent; }
  .button.corporate:not(.disabled):hover {
    color: #ffffff !important;
    background-color: var(--bernafon-red);
    text-shadow: none; }
    .button.corporate:not(.disabled):hover a {
      text-decoration: none;
      color: #ffffff !important;
      text-shadow: none; }

.small-icon, .medium-icon, .large-icon {
  padding-bottom: 0;
  margin-bottom: 0;
  line-height: 1; }

.small-icon {
  font-family: "Oticon-icon-www";
  font-size: 1em; }

.medium-icon {
  font-family: "Oticon-icon-www";
  font-size: 3em; }
  .medium-icon + * {
    margin-top: 0;
    padding-top: 0; }

.large-icon {
  font-family: "Oticon-icon-www";
  font-size: 5em; }

b {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

strong {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

h2.pre-header {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

h2.quote {
  margin: 4.5em 0 1.5em 0;
  line-height: 1.5;
  font-size: 2em;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
  h2.quote::before {
    font-family: "Oticon-icon-www";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    content: '"';
    position: absolute;
    top: -1.2em;
    left: 0;
    display: block;
    font-size: 2em;
    color: var(--bernafon-red); }
  h2.quote.white:before {
    color: #ffffff; }
  h2.quote.light-grey:before {
    color: #B7B3AC; }
  h2.quote.black:before {
    color: #000000; }

.direct-quote {
  display: block; }
  .direct-quote:before {
    font-family: "Oticon-icon-www";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    content: '"';
    display: block;
    font-size: 5em;
    color: var(--bernafon-red); }
  .direct-quote.white:before {
    color: #ffffff; }
  .direct-quote.light-grey:before {
    color: #B7B3AC; }
  .direct-quote.black:before {
    color: #000000; }

p {
  line-height: 1.7;
  margin: 0 0 0.8rem 0;
  color: inherit; }
  p.bigger {
    font-size: 1.3333em;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-bottom: 2.0rem; }
    p.bigger + p a.link,
    p.bigger + p a.link-track,
    p.bigger + p a.link-track-download,
    p.bigger + a.link,
    p.bigger + a.link-track,
    p.bigger + a.link-track-download {
      position: relative;
      top: -1.2rem; }
  p.footnote {
    opacity: 0.5;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: italic;
    margin: 1.5em 0 3em 0; }

a {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: var(--bernafon-red);
  text-decoration: none; }
  a.link, a.link-track, a.link-track-download {
    display: inline-block;
    position: relative;
    margin-top: 0.2rem;
    margin-bottom: 1.3em;
    padding: 0 0 0 1.4em;
    line-height: 1;
    -webkit-transition: padding 0.2s;
    transition: padding 0.2s; }
    a.link::before, a.link-track::before, a.link-track-download::before {
      font-family: "Oticon-icon-www";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      display: inline-block;
      content: '\e603';
      font-size: 1em;
      margin: 0 0.4em 0 0;
      position: absolute;
      left: 0;
      top: 0; }
    a.link:hover, a.link-track:hover, a.link-track-download:hover {
      padding-left: 1.8em;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }
      a.link:hover::before, a.link-track:hover::before, a.link-track-download:hover::before {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none; }

.like-regular {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.inner {
  padding: 7em 0; }

.middle-grey-bg {
  background-color: #D7D3CC; }

/* MIXINS FOR USE IN MARKUP */
.corporate-color {
  color: var(--bernafon-red); }

.light-font {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.like-h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 0 0 0.4em 0;
  font-size: 4em;
  line-height: 1.125;
  color: inherit; }
  @media all and (-ms-high-contrast: none) {
    .like-h1 {
      font-weight: bold; } }

.like-h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3em;
  margin: 0 0 0.3em 0;
  line-height: 1.25;
  color: inherit; }
  @media all and (-ms-high-contrast: none) {
    .like-h2 {
      font-weight: bold; } }
  .like-h2.light {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin: 0 0 0.3em 0; }

.like-h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2em;
  margin: 0 0 0.7rem 0;
  line-height: 1.3;
  color: inherit; }

.like-h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.3333em;
  margin: 0 0 .4em 0;
  line-height: 1.3;
  color: inherit; }
  @media all and (-ms-high-contrast: none) {
    .like-h4 {
      font-weight: bold; } }

.like-h5 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3333em;
  margin: 1.75em 0 1em 0;
  line-height: 1.2;
  color: inherit; }

.like-p-bigger {
  font-size: 1.3333em;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  margin-bottom: 2.0rem; }

.like-p {
  line-height: 1.7;
  margin: 0 0 0.8rem 0;
  color: inherit; }

.like-a-link {
  display: inline-block;
  position: relative;
  margin-top: 0.2rem;
  margin-bottom: 1.3em;
  padding: 0 0 0 1.4em;
  line-height: 1;
  -webkit-transition: padding 0.2s;
  transition: padding 0.2s; }
  .like-a-link::before {
    font-family: "Oticon-icon-www";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    content: '\e603';
    font-size: 1em;
    margin: 0 0.4em 0 0;
    position: absolute;
    left: 0;
    top: 0; }
  .like-a-link:hover {
    padding-left: 1.8em;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; }
    .like-a-link:hover::before {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none; }

.mag-container {
  position: relative;
  width: 74rem;
  max-width: 90%;
  margin: 0 auto; }

.mag-container-75 {
  position: relative;
  width: 74rem;
  max-width: 75%;
  margin: 0 auto; }

.font-regular {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.font-medium {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.font-light {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.font-bold {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
  @media all and (-ms-high-contrast: none) {
    .font-bold {
      font-weight: bold; } }

.bg-grey-0100 {
  background-color: #19191A; }

.color-grey-0100 {
  color: #19191A; }

.bg-grey-0200 {
  background-color: #3B3C3D; }

.color-grey-0200 {
  color: #3B3C3D; }

.bg-grey-0300 {
  background-color: #6B6867; }

.color-grey-0300 {
  color: #6B6867; }

.bg-grey-0400 {
  background-color: #7E7B78; }

.color-grey-0400 {
  color: #7E7B78; }

.bg-grey-0500 {
  background-color: #B7B3AC; }

.color-grey-0500 {
  color: #B7B3AC; }

.bg-grey-0600 {
  background-color: #CBC9C4; }

.color-grey-0600 {
  color: #CBC9C4; }

.bg-grey-0700 {
  background-color: #D7D3CC; }

.color-grey-0700 {
  color: #D7D3CC; }

.bg-grey-0800 {
  background-color: #E3DFDB; }

.color-grey-0800 {
  color: #E3DFDB; }

.bg-grey-0900 {
  background-color: #E8E5E1; }

.color-grey-0900 {
  color: #E8E5E1; }

.bg-grey-1000 {
  background-color: #F7F6F4; }

.color-grey-1000 {
  color: #F7F6F4; }

/* MIXINS FOR USE IN MARKUP */

 #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box .timeout {
            margin-bottom: 10px; display: inline-block;}

#wrapper > #content .slider-stack-wrapper > .component.component-ready.animate.slider-stack {
  opacity: 0;
  left: 100%;
  -webkit-transition: opacity 1.3s, left 0s linear 1.5s;
  transition: opacity 1.3s, left 0s linear 1.5s; }
  #wrapper > #content .slider-stack-wrapper > .component.component-ready.animate.slider-stack.active-slide {
    opacity: 1;
    left: 0;
    -webkit-transition: opacity 1.3s, left 0s linear 0s;
    transition: opacity 1.3s, left 0s linear 0s; }

ol {
  list-style-type: decimal;
  list-style-position: inside;
  line-height: 1.7;
  margin: 0 0 0.8rem 0;
  color: inherit; }

label, span {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  margin: 0 0 0.8rem 0;
  color: inherit; }

fieldset {
  border: none;
  padding: 0;
  margin: 0; }

legend {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2em;
  line-height: 1.3;
  color: #000000;
  padding: 0;
  text-decoration: none;
  margin: 0;
}

input:not([type='checkbox']):not([type='submit']), textarea, select, input[type="search"], input[type="tel"] {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 1em 1.85em;
  border: 1px solid #7E7B78;
  background-color: #fff;
  border-radius: 2em;
  font-size: 1em;
  font-style: normal;
  color: #3B3C3D;
  -webkit-transition: color 0.2s, background-color 0.2s, opacity 0.2s, border-color 0.2s;
  transition: color 0.2s, background-color 0.2s, opacity 0.2s, border-color 0.2s;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
  input:not([type='checkbox']):not([type='submit']):focus, textarea:focus, select:focus, input[type="search"]:focus, input[type="tel"]:focus {
    border-color: var(--bernafon-red); }

select.is-open {
  border-radius: 0;
  border-top-right-radius: 2em;
  border-top-left-radius: 2em; }

select::-ms-expand {
  /* for IE 11 */
  display: none; }

textarea {
  border-radius: 0; }

input[type="submit"] {
  display: inline-block;
  font-size: 1em;
  border-radius: 0;
  width: auto;
  text-decoration: none;
  padding: 0.8em 2em 1em 2em;
  border: 4px solid #3B3C3D;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #3B3C3D !important;
  line-height: 1;
  background-color: transparent;
  text-align: center;
  margin-bottom: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box;
  margin-top: 0;
}
  input[type="submit"]:not(.disabled) {
    cursor: pointer; }
  input[type="submit"] a {
    color: #3B3C3D !important;
    text-decoration: none;
    background-color: transparent; }
  input[type="submit"]:not(.disabled):hover {
    color: #ffffff !important;
    background-color: #3B3C3D;
    text-shadow: none; }
    input[type="submit"]:not(.disabled):hover a {
      text-decoration: none;
      color: #ffffff !important;
      text-shadow: none; }

input[type="checkbox"] {
  width: 1px;
  height: 1px;
  margin: 0;
  -webkit-transform: scale(0.01);
  -ms-transform: scale(0.01);
  transform: scale(0.01); }
  input[type="checkbox"] + label {
    position: relative;
    padding-left: 2rem;
    user-select: none; }
    input[type="checkbox"] + label::before {
      content: '';
      position: absolute;
      width: 1rem;
      height: 1rem;
      border: 1px solid #7E7B78;
      display: block;
      left: 0;
      top: -1px;
      font-size: 1.3rem;
      line-height: 1;
      color: #3B3C3D;
      padding: 0.1rem; }
    
    input[type="checkbox"]:checked + label::before {
        content: '\1F5F8';
    }
  input[type="checkbox"]:focus + label::before {
    border: 1px solid var(--bernafon-red);
  }

::-moz-selection {
  background: var(--bernafon-red);
  color: #ffffff; }

::selection {
  background: var(--bernafon-red);
  color: #ffffff; }

::-moz-selection {
  background: var(--bernafon-red);
  color: #ffffff; }

@media only screen and (max-width: 1020px) {
  #wrapper .component.top-margin {
    margin-top: 1rem; } }

#wrapper > #content > .row > .grid-12 > div > .row.alpha > .row {
  position: relative;
  width: 74rem;
  max-width: 90%;
  margin: 0 auto; }
  #wrapper > #content > .row > .grid-12 > div > .row.alpha > .row > div.margin2 {
    margin-bottom: 2rem; }
  #wrapper > #content > .row > .grid-12 > div > .row.alpha > .row > div.margin4 {
    margin-bottom: 4rem; }
  #wrapper > #content > .row > .grid-12 > div > .row.alpha > .row > div.margin7 {
    margin-bottom: 7rem; }
  #wrapper > #content > .row > .grid-12 > div > .row.alpha > .row > div .component > .component-content {
    max-width: none;
    width: 100%; }
  .brand-image {
    width: 180px;
    height: 50px;
    background-image: url('/assets/images/bernafon-logo.svg');
    background-size: 100% 100%;
  }


input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}