/*
 * CSS3 library is now included in wp-module-themeframework.
 * This file still exists for backward compatibility.
 */
/*******************************
 * Contrast color functions
 ******************************/
/**
 * Automatically decides wheter black or white color is needed
 * @obsolete
 */
/**
 * Automatically gets the contrast color
 *
 */
/*******************************
 * Prefixing mixins
 ******************************/
/*******************************
 * Clearfix
 ******************************/
/*
 * If there is no other clearfix
 * class from bootstrap or something
 * available, you can include this.
 */
/*******************************
 * BS Viewports
 ******************************/
/*******************************
 * Additional Viewports
 ******************************/
/*******************************
 * Misc
 ******************************/
/*
 * Triangle factory
 */
/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
/*******************************
 * Header Grid System
 *
 * A few classes to make it
 * easier to create a header
 * layout.
 *
 * Currently only supporting
 * XS and SM vierports
 *
 ******************************/
/*******************************
 * hgCreateAligns
 ******************************/
/*
 * Create alignment classes
 * for the enclosing viewport
 */
/*******************************
 * hgCreateCols
 ******************************/
/*
 * Create a simple grid with 12 cols
 * for the given viewport
 */
/*******************************
 * header-row
 ******************************/
.header-row {
  position: relative;
  /*
   * Include clearfix so you
   * dont have to add the clearfix
   * class additionally.
   */
  /*
  * You dont add the .partial class
  * to every partial.
  */
  /*
   * Vertical center wrapper
   */
  /*
   * Create alignment classes
   * for this viewport
   */
  /*
   * Create a simple grid with 12 cols
   * like in bootstrap. It should be
   * really simple and known to use.
   */
  /*
   * SM Viewport
   */
  /*
   * MD Viewport
   */
  /*
   * LG Viewport
   */ }
  .header-row:after {
    content: "";
    display: table;
    clear: both;
    *zoom: 1; }
  .header-row .partial, .header-row [class^='partial'] {
    width: 100%;
    position: relative;
    display: table; }
  .header-row .v-center {
    vertical-align: middle;
    height: inherit;
    display: table-cell; }
  .header-row .partial-xs-left {
    text-align: left; }
  .header-row .partial-xs-center {
    text-align: center; }
  .header-row .partial-xs-right {
    text-align: right; }
  .header-row .partial-xs-1 {
    width: 8.3333333333%;
    float: left; }
  .header-row .partial-xs-2 {
    width: 16.6666666667%;
    float: left; }
  .header-row .partial-xs-3 {
    width: 25%;
    float: left; }
  .header-row .partial-xs-4 {
    width: 33.3333333333%;
    float: left; }
  .header-row .partial-xs-5 {
    width: 41.6666666667%;
    float: left; }
  .header-row .partial-xs-6 {
    width: 50%;
    float: left; }
  .header-row .partial-xs-7 {
    width: 58.3333333333%;
    float: left; }
  .header-row .partial-xs-8 {
    width: 66.6666666667%;
    float: left; }
  .header-row .partial-xs-9 {
    width: 75%;
    float: left; }
  .header-row .partial-xs-10 {
    width: 83.3333333333%;
    float: left; }
  .header-row .partial-xs-11 {
    width: 91.6666666667%;
    float: left; }
  .header-row .partial-xs-12 {
    width: 100%;
    float: left; }
  @media (min-width: 768px) {
    .header-row .partial-sm-1 {
      width: 8.3333333333%;
      float: left; }
    .header-row .partial-sm-2 {
      width: 16.6666666667%;
      float: left; }
    .header-row .partial-sm-3 {
      width: 25%;
      float: left; }
    .header-row .partial-sm-4 {
      width: 33.3333333333%;
      float: left; }
    .header-row .partial-sm-5 {
      width: 41.6666666667%;
      float: left; }
    .header-row .partial-sm-6 {
      width: 50%;
      float: left; }
    .header-row .partial-sm-7 {
      width: 58.3333333333%;
      float: left; }
    .header-row .partial-sm-8 {
      width: 66.6666666667%;
      float: left; }
    .header-row .partial-sm-9 {
      width: 75%;
      float: left; }
    .header-row .partial-sm-10 {
      width: 83.3333333333%;
      float: left; }
    .header-row .partial-sm-11 {
      width: 91.6666666667%;
      float: left; }
    .header-row .partial-sm-12 {
      width: 100%;
      float: left; }
    .header-row .partial-sm-left {
      text-align: left; }
    .header-row .partial-sm-center {
      text-align: center; }
    .header-row .partial-sm-right {
      text-align: right; } }
  @media (min-width: 992px) {
    .header-row {
      /*
       * Create a simple grid with 12 cols
       * like in bootstrap. It should be
       * really simple and known to use.
       */
      /*
       * Create alignment classes
       * for this viewport
       */ }
      .header-row .partial-md-1 {
        width: 8.3333333333%;
        float: left; }
      .header-row .partial-md-2 {
        width: 16.6666666667%;
        float: left; }
      .header-row .partial-md-3 {
        width: 25%;
        float: left; }
      .header-row .partial-md-4 {
        width: 33.3333333333%;
        float: left; }
      .header-row .partial-md-5 {
        width: 41.6666666667%;
        float: left; }
      .header-row .partial-md-6 {
        width: 50%;
        float: left; }
      .header-row .partial-md-7 {
        width: 58.3333333333%;
        float: left; }
      .header-row .partial-md-8 {
        width: 66.6666666667%;
        float: left; }
      .header-row .partial-md-9 {
        width: 75%;
        float: left; }
      .header-row .partial-md-10 {
        width: 83.3333333333%;
        float: left; }
      .header-row .partial-md-11 {
        width: 91.6666666667%;
        float: left; }
      .header-row .partial-md-12 {
        width: 100%;
        float: left; }
      .header-row .partial-md-left {
        text-align: left; }
      .header-row .partial-md-center {
        text-align: center; }
      .header-row .partial-md-right {
        text-align: right; } }
  @media (min-width: 1170px) {
    .header-row .partial-lg-1 {
      width: 8.3333333333%;
      float: left; }
    .header-row .partial-lg-2 {
      width: 16.6666666667%;
      float: left; }
    .header-row .partial-lg-3 {
      width: 25%;
      float: left; }
    .header-row .partial-lg-4 {
      width: 33.3333333333%;
      float: left; }
    .header-row .partial-lg-5 {
      width: 41.6666666667%;
      float: left; }
    .header-row .partial-lg-6 {
      width: 50%;
      float: left; }
    .header-row .partial-lg-7 {
      width: 58.3333333333%;
      float: left; }
    .header-row .partial-lg-8 {
      width: 66.6666666667%;
      float: left; }
    .header-row .partial-lg-9 {
      width: 75%;
      float: left; }
    .header-row .partial-lg-10 {
      width: 83.3333333333%;
      float: left; }
    .header-row .partial-lg-11 {
      width: 91.6666666667%;
      float: left; }
    .header-row .partial-lg-12 {
      width: 100%;
      float: left; }
    .header-row .partial-lg-left {
      text-align: left; }
    .header-row .partial-lg-center {
      text-align: center; }
    .header-row .partial-lg-right {
      text-align: right; } }

/*******************************
 * Basic dropdown
 ******************************/
/**
 * This function is intented
 * to be placed inside the selector
 * which represents the top level ul.
 *
 * It will add the default css
 * dropdown functionlalities to this class.
 */
/*******************************
 * Default responsive mobile styles
 ******************************/
/*******************************
 * Default vertical dropdown
 ******************************/
/**
 * Creates a default vertical
 * dropdown out of the corresponding ul.
 */
/*******************************
 * jQueryResponsiveNavigation styles
 ******************************/
/*******************************
 * DEV
 ******************************/
/*
 * Creates a new menu. Use this
 * mixin as your base for the menu
 * and define the single menu levels.
 */
/*
 * false:	Alle child ul
 * 0:		Root level
 * >0:		Specific level
 */
header.main {
  border-bottom: 2px solid #efefef;
  /*******************************
   * R0
   ******************************/ }
  header.main .logo-link {
    max-width: 150px; }
    @media (min-width: 992px) {
      header.main .logo-link {
        max-width: 10rem; } }
    @media (min-width: 1600px) {
      header.main .logo-link {
        max-width: 12rem; } }
    header.main .logo-link img {
      width: 100%; }
  header.main .r0-wrap {
    background-color: #001424; }
    header.main .r0-wrap .r0 {
      height: 3rem;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      max-width: 100%;
      overflow-x: auto; }
      @media (min-width: 992px) {
        header.main .r0-wrap .r0 {
          height: 2.5rem; } }
      header.main .r0-wrap .r0 > * {
        display: flex;
        align-items: stretch; }
      header.main .r0-wrap .r0 .left {
        margin-right: auto; }
      header.main .r0-wrap .r0 .right {
        margin-left: auto; }
      header.main .r0-wrap .r0 .left > *, header.main .r0-wrap .r0 .right > * {
        display: flex;
        align-items: stretch; }
      header.main .r0-wrap .r0 .menu {
        display: flex;
        flex-grow: 1;
        margin: 0;
        padding: 0; }
        header.main .r0-wrap .r0 .menu li {
          display: flex;
          list-style: none; }
          header.main .r0-wrap .r0 .menu li.current-menu-item, header.main .r0-wrap .r0 .menu li.current-page-ancestor {
            background-color: #00A3DA; }
      header.main .r0-wrap .r0 a {
        display: flex;
        align-items: center;
        padding: 0 20px;
        font-size: 0.8rem;
        color: #fff;
        font-weight: bold; }
      @media (min-width: 992px) {
        header.main .r0-wrap .r0 {
          display: flex; } }
      header.main .r0-wrap .r0.opened, header.main .r0-wrap .r0.active {
        display: block;
        animation: r1-reveal linear 300ms; }
      header.main .r0-wrap .r0 .faded {
        opacity: 0.0;
        -webkit-transition: opacity ease-in-out 300ms;
        -moz-transition: opacity ease-in-out 300ms;
        -o-transition: opacity ease-in-out 300ms;
        -ms-transition: opacity ease-in-out 300ms;
        -khtml-transition: opacity ease-in-out 300ms;
        transition: opacity ease-in-out 300ms; }
        @media (min-width: 992px) {
          header.main .r0-wrap .r0 .faded {
            opacity: 1.0; } }
      header.main .r0-wrap .r0.opened .faded {
        opacity: 1.0; }
      header.main .r0-wrap .r0 .search-button {
        background-color: #00A3DA;
        color: #fff;
        cursor: pointer;
        flex-grow: 1;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center; }
  header.main .r1 {
    display: flex;
    display: -ms-flexbox;
    border-top: 1px solid #efefef;
    justify-content: space-between;
    -ms-flex-pack: justify;
    background-color: #fff;
    min-height: 80px;
    align-items: center; }
    @media (min-width: 992px) {
      header.main .r1 {
        justify-content: flex-start;
        -ms-flex-pack: start;
        min-height: 6rem;
        height: 6rem; } }
    @media (min-width: 1600px) {
      header.main .r1 {
        min-height: 8rem;
        height: 8rem; } }
    @media print {
      header.main .r1 {
        display: none; } }
    header.main .r1 > *:not(script) {
      display: flex;
      display: -ms-flexbox;
      flex-flow: row;
      -ms-flex-flow: row;
      align-items: center;
      -ms-flex-align: center; }
  header.main nav.main {
    display: flex;
    align-items: center; }

.header-wrap.search-mode {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 30; }
  .header-wrap.search-mode .search-form {
    display: block; }
@keyframes search-form {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.header-wrap .search-form {
  background-color: rgba(0, 20, 36, 0.9);
  height: 100%;
  margin: 0;
  padding: 0;
  display: none;
  animation: search-form 300ms; }
  .header-wrap .search-form .content {
    background-color: #fff; }
    .header-wrap .search-form .content input {
      box-sizing: border-box;
      font-size: 1rem;
      border: none; }
      .header-wrap .search-form .content input:focus {
        outline: none; }
  .header-wrap .search-form .line-wrap {
    display: flex;
    padding: 0.75rem; }
    @media (min-width: 992px) {
      .header-wrap .search-form .line-wrap {
        flex-flow: row; } }
    .header-wrap .search-form .line-wrap input {
      margin-top: 0;
      margin-bottom: 0;
      width: auto !important; }
    .header-wrap .search-form .line-wrap .search-input {
      height: auto !important;
      width: 100% !important;
      margin-right: 1rem;
      border: 2px solid #efefef;
      padding: 0.7rem 1rem; }

/*******************************
 * Toggle Container
 ******************************/
@keyframes menu-li {
  from {
    opacity: 0;
    transform: translateX(-15px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
header.main .r1 .mob-button {
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-item-align: center;
  justify-content: center;
  -ms-flex-pack: center;
  flex-shrink: 0;
  font-size: 25px; }
  header.main .r1 .mob-button:hover {
    background-color: #efefef; }
  header.main .r1 .mob-button:active {
    background-color: #e0e0e0; }
  header.main .r1 .mob-button img {
    width: 25px; }
header.main .r1 .toggle-button {
  float: right;
  justify-self: flex-end;
  transition: scale ease 300ms;
  margin-left: auto;
  border-left: 2px solid #efefef;
  margin-right: -15px;
  height: 80px; }
  @media (min-width: 992px) {
    header.main .r1 .toggle-button {
      display: none;
      margin-top: 0; } }
header.main .r1 .toggle-container {
  width: 100%;
  display: none; }
  @media (min-width: 992px) {
    header.main .r1 .toggle-container {
      display: flex;
      justify-content: flex-end; } }
  header.main .r1 .toggle-container .close-button {
    flex-shrink: 0;
    color: #000;
    border-left: 2px solid #efefef; }
    @media (min-width: 992px) {
      header.main .r1 .toggle-container .close-button {
        display: none; } }
  header.main .r1 .toggle-container .mobile-gui {
    display: none;
    width: 100%;
    border-bottom: 2px solid #efefef;
    justify-content: space-between;
    flex-shrink: 0;
    align-items: center; }
  @media (max-width: 992px) {
    header.main .r1 .toggle-container.toggled {
      letter-spacing: 1.5px;
      animation: toggle-container-toggle 300ms forwards;
      background-color: #fff;
      font-size: 1.5rem;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow-y: scroll;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      z-index: 35;
      height: 100%;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column; }
    @keyframes toggle-container-toggle {
      0% {
        opacity: 0;
        transform: scale(0.95); }
      100% {
        opacity: 1;
        transform: scale(1); } }
      header.main .r1 .toggle-container.toggled .mobile-gui {
        display: flex; } }
  @media (max-width: 992px) and (min-width: 992px) {
    header.main .r1 .toggle-container.toggled {
      background-color: transparent; } }
  @media (max-width: 992px) {
      header.main .r1 .toggle-container.toggled nav.main {
        flex-flow: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        overflow-y: scroll; }
        header.main .r1 .toggle-container.toggled nav.main > * {
          width: 100%; }
        header.main .r1 .toggle-container.toggled nav.main li {
          border-bottom: 2px solid #efefef; }
          header.main .r1 .toggle-container.toggled nav.main li:first-child {
            border-top: 2px solid #efefef; }
      header.main .r1 .toggle-container.toggled.animated li {
        opacity: 0;
        animation: menu-li 600ms forwards; } }
  @media (max-width: 992px) and (min-width: 992px) {
    header.main .r1 .toggle-container.toggled {
      position: static; } }
  @media (max-width: 992px) {
      header.main .r1 .toggle-container.toggled .search-button {
        border-right: 2px solid #efefef;
        border-left: none;
        min-width: 0;
        left: 0; } }

.header-bg {
  background-color: #fff; }

/*
 * CSS3 library is now included in wp-module-themeframework.
 * This file still exists for backward compatibility.
 */
/*******************************
 * Contrast color functions
 ******************************/
/**
 * Automatically decides wheter black or white color is needed
 * @obsolete
 */
/**
 * Automatically gets the contrast color
 *
 */
/*******************************
 * Prefixing mixins
 ******************************/
/*******************************
 * Clearfix
 ******************************/
/*
 * If there is no other clearfix
 * class from bootstrap or something
 * available, you can include this.
 */
/*******************************
 * BS Viewports
 ******************************/
/*******************************
 * Additional Viewports
 ******************************/
/*******************************
 * Misc
 ******************************/
/*
 * Triangle factory
 */
/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
footer {
  background-color: #001424;
  color: #fff; }
  @media print {
    footer {
      display: none; } }
  footer .r1 {
    padding-top: 15px;
    padding-bottom: 15px; }
    @media (min-width: 992px) {
      footer .r1 {
        padding: 3rem 15px; } }
    @media (min-width: 1600px) {
      footer .r1 {
        padding: 4.5rem 15px; } }
  footer .r2 {
    border-top: 2px solid #234;
    padding-top: 15px;
    padding-bottom: 15px; }
    footer .r2 .container {
      display: flex;
      flex-flow: column;
      justify-content: space-between; }
      @media (min-width: 768px) {
        footer .r2 .container {
          flex-flow: row; } }
      footer .r2 .container:before, footer .r2 .container:after {
        content: none; }
    footer .r2 p {
      margin: 10px 0; }
  @media print {
    footer {
      display: none; } }
  footer h1, footer h2, footer h3 {
    color: #fff; }
  footer a {
    color: #fff; }
  footer hr {
    border-color: black; }
  footer table.opening-hours tr td:first-child {
    padding-right: 10px; }

/*
 * Fix for BS3 and Chrome
 * because chrome takes
 * the xs viewport for printing
 */
@media print {
  @page {
    size: 330mm 427mm;
    margin-left: 7mm;
    margin-right: 7mm; }
  .container {
    width: 993px !important; }

  table {
    width: 100%; } }
/*
 * http://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size
 * https://developer.mozilla.org/de/docs/Web/CSS/@page
 *
 */
@media print {
  section.main {
    overflow-x: scroll;
    overflow: scroll; } }
/*
 * Needed to prevent FF to crop
 * the content when printing.
 */
@media print {
  * {
    overflow: visible !important; } }
@media print {
  a[href]::after {
    content: "" !important; } }
/*
.wpb_row {
  margin-bottom: 0;
}

.wpb_content_element {
  margin-bottom: 0;
}
*/
/*
.page-section > *:last-child {
  margin-bottom: 0;
}

.page-section > .container > *:last-child {
  margin-bottom: 0;
}
*/
.wpb_column > .wpb_wrapper > *:last-child {
  margin-bottom: 35px; }
.wpb_column > .wpb_wrapper > .page-section {
  margin-bottom: 0; }

.wpb_single_image img {
  height: auto !important; }

/*******************************
 * Forgery functions
 ******************************/
/*******************************
 * Misc
 ******************************/
.button-spacer {
  overflow: hidden;
  margin: 20px 0;
  position: relative; }
  .button-spacer:after {
    border-top: 1px solid #dadada;
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
    margin-left: 10px; }

/*******************************
 * Version 2
 ******************************/
/*
 * Creates a button with the necessary
 * selector. Pass the custom styles
 * directly as content block.
 *
 * @include button('my-button') { ... }
 *
 * You can use predefined button styles:
 * @include button('other-button') {
 *  @include buttonStyleSolid(...);
 * }
 *
 */
/*
 * Helper function to throw an error
 * when trying to include a buttonStyle
 * mixin on root level.
 */
/*******************************
 * Predefined Hover Styles
 ******************************/
/*******************************
 * Predefined Style Mixins
 ******************************/
/*
 * Creates a simple solid flat button with
 * customizable $backgroundColor and $color.
 */
/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
/*******************************
 * Creating Button Styles
 * (using V2 factory)
 ******************************/
.button, form input[type="submit"], .contact-form input[type="submit"], .wpcf7 input[type="submit"], .searchform input[type="submit"] {
  background-color: #001424;
  color: #fff;
  padding: 15px 20px;
  display: inline;
  line-height: 3.2rem;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: bold;
  user-select: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color ease 120ms; }
  .button:hover, form input[type="submit"]:hover, .contact-form input[type="submit"]:hover, .wpcf7 input[type="submit"]:hover, .searchform input[type="submit"]:hover {
    color: #fff;
    background-color: #124065; }
  .button:focus, form input[type="submit"]:focus, .contact-form input[type="submit"]:focus, .wpcf7 input[type="submit"]:focus, .searchform input[type="submit"]:focus {
    color: #fff; }
  .button:active, form input[type="submit"]:active, .contact-form input[type="submit"]:active, .wpcf7 input[type="submit"]:active, .searchform input[type="submit"]:active {
    background-color: black; }
  .button.disabled, form input.disabled[type="submit"], .contact-form input.disabled[type="submit"], .wpcf7 input.disabled[type="submit"], .searchform input.disabled[type="submit"] {
    background-color: #ddd;
    cursor: not-allowed; }

p + .button, form p + input[type="submit"], .contact-form p + input[type="submit"], .wpcf7 p + input[type="submit"], .searchform p + input[type="submit"] {
  margin-top: 0; }

/*
 * Theme scope styles that you
 * want to add to all your buttons
 */
button, .button.style-primary, form input.style-primary[type="submit"], .contact-form input.style-primary[type="submit"], .wpcf7 input.style-primary[type="submit"], .searchform input.style-primary[type="submit"] {
  text-align: center; }

/*******************************
 * Version 1 Generator Mixins
 ******************************/
/*******************************
 * Version 2 Generator Mixins
 ******************************/
/*
 * Main difference to V1 is, that
 * you only use the one statement to
 * define the style and at the same
 * time your custom styles.
 */
/**
 * description
 */
/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
/*******************************
 * PageSections
 ******************************/
.page-section {
  background-size: cover; }
  .page-section.align-vcenter .row {
    display: flex;
    flex-flow: row;
    align-items: center;
    flex-wrap: wrap;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    -ms-flex-align: center; }
    .page-section.align-vcenter .row:before, .page-section.align-vcenter .row:after {
      content: normal; }
  .page-section .container + .container {
    margin-top: 1rem; }
  .page-section .row > * + [class^="col-sm"] {
    padding-top: 25px; }
  @media (min-width: 768px) {
    .page-section .row > * + [class^="col-sm"] {
      padding-top: 0; } }
  @media (min-width: 992px) {
    .page-section .row > * + [class^="col-md"] {
      padding-top: 0; } }

.page-section.style-default, form input.page-section[type="submit"], .contact-form input.page-section[type="submit"], .wpcf7 input.page-section[type="submit"], .searchform input.page-section[type="submit"] {
  color: #4a4a4a; }
  .page-section.style-default + .style-default, form input.page-section[type="submit"] + .style-default, .contact-form input.page-section[type="submit"] + .style-default, .wpcf7 input.page-section[type="submit"] + .style-default, .searchform input.page-section[type="submit"] + .style-default, form .page-section.style-default + input[type="submit"], form input.page-section[type="submit"] + input[type="submit"], .contact-form .page-section.style-default + input[type="submit"], .contact-form input.page-section[type="submit"] + input[type="submit"], .wpcf7 .page-section.style-default + input[type="submit"], .wpcf7 input.page-section[type="submit"] + input[type="submit"], .searchform .page-section.style-default + input[type="submit"], .searchform input.page-section[type="submit"] + input[type="submit"] {
    border-top: 2px solid #f9f9f9; }

.page-section.style-light {
  background-color: #F6F7F8;
  color: #4a4a4a; }
  .page-section.style-light + .style-light {
    border-top: 2px solid #efefef; }

.page-section.style-dark {
  background-color: #001424;
  color: #fff; }
  .page-section.style-dark:last-child {
    border-bottom: 2px solid #234; }

/*******************************
 * Layouts
 ******************************/
.page-section.layout-default {
  margin: 0;
  padding: 2.5rem 0; }
  .page-section.layout-default [class^="col-"] {
    padding-left: 25px;
    padding-right: 25px; }
  @media (min-width: 992px) {
    .page-section.layout-default [class^="col-"] {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (min-width: 1400px) {
    .page-section.layout-default {
      padding: 3rem 0; } }
  @media (min-width: 1600px) {
    .page-section.layout-default {
      padding: 5rem 0; } }

.page-section.layout-compact {
  margin: 0;
  padding: 20px 0; }
  .page-section.layout-compact [class^="col-"] {
    padding-left: 25px;
    padding-right: 25px; }
  @media (min-width: 992px) {
    .page-section.layout-compact {
      padding: 30px 0; }
      .page-section.layout-compact [class^="col-"] {
        padding-left: 15px;
        padding-right: 15px; } }

/*******************************
 * Equal Rows
 ******************************/
@media (min-width: 992px) {
  .row.equal-cols {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap; } }
/*******************************
 * Columns
 ******************************/
@media (min-width: 992px) {
  .page-section [class^="col-"].layout-padding-l {
    padding-left: 100px; }
  .page-section [class^="col-"].layout-padding-r {
    padding-right: 100px; }
  .page-section [class^="col-"].layout-padding-lr {
    padding: 0 5%; } }
  @media (min-width: 992px) and (min-width: 992px) {
    .page-section [class^="col-"].layout-padding-lr {
      padding: 0 15%; } }
@media (min-width: 992px) {
    .page-section [class^="col-"].layout-padding-lr p {
      font-size: 120%; } }
.layout-nopm {
  padding: 0; }

.layout-mbottom {
  margin-bottom: 30px; }

/*******************************
 * Tables
 ******************************/
.page-section table td {
  padding: 0.5rem 1rem;
  border: 1px solid #efefef; }
.page-section table + table {
  margin-top: 1rem; }
.page-section.style-default table td, form input.page-section[type="submit"] table td, .contact-form input.page-section[type="submit"] table td, .wpcf7 input.page-section[type="submit"] table td, .searchform input.page-section[type="submit"] table td {
  background-color: #fbfbfb; }
.page-section.style-light table td {
  background-color: #fff; }

/*
 * CSS3 library is now included in wp-module-themeframework.
 * This file still exists for backward compatibility.
 */
/*******************************
 * Contrast color functions
 ******************************/
/**
 * Automatically decides wheter black or white color is needed
 * @obsolete
 */
/**
 * Automatically gets the contrast color
 *
 */
/*******************************
 * Prefixing mixins
 ******************************/
/*******************************
 * Clearfix
 ******************************/
/*
 * If there is no other clearfix
 * class from bootstrap or something
 * available, you can include this.
 */
/*******************************
 * BS Viewports
 ******************************/
/*******************************
 * Additional Viewports
 ******************************/
/*******************************
 * Misc
 ******************************/
/*
 * Triangle factory
 */
/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
/* TESTIMONIAL*/
/*
 * This mixin should be used when generating form styles
 * so id adopts all the supported input types and new
 * input types can be added without changing all
 * the form style templates.
 */
input[type="radio"].touched:invalid + label {
  color: #e1324f;
  border-color: #e1324f; }

@media (min-width: 768px) {
  form, .contact-form, .wpcf7, .searchform {
    text-align: left; } }
form label, .contact-form label, .wpcf7 label, .searchform label {
  padding: 5px 0px;
  display: inline-block; }
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="date"],
form input[type="url"],
form input[type="password"],
form textarea, .contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form input[type="url"],
.contact-form input[type="password"],
.contact-form textarea, .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 input[type="url"],
.wpcf7 input[type="password"],
.wpcf7 textarea, .searchform input[type="text"],
.searchform input[type="email"],
.searchform input[type="tel"],
.searchform input[type="date"],
.searchform input[type="url"],
.searchform input[type="password"],
.searchform textarea {
  outline: none;
  padding: 10px 15px;
  max-width: 100%;
  width: 100%;
  background-color: #F6F7F8;
  border: 2px solid transparent;
  outline: none;
  -webkit-transition: all ease-in-out 0.3s;
  -moz-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  -ms-transition: all ease-in-out 0.3s;
  -khtml-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  /* Needed to disabled default
   * iphone safari input styles */
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  -khtml-border-radius: 0;
  border-radius: 0;
  padding: 20px 20px;
  max-width: 100%;
  width: 100%;
  font-size: 15px; }
  form input[type="text"]:disabled,
  form input[type="email"]:disabled,
  form input[type="tel"]:disabled,
  form input[type="date"]:disabled,
  form input[type="url"]:disabled,
  form input[type="password"]:disabled,
  form textarea:disabled, .contact-form input[type="text"]:disabled,
  .contact-form input[type="email"]:disabled,
  .contact-form input[type="tel"]:disabled,
  .contact-form input[type="date"]:disabled,
  .contact-form input[type="url"]:disabled,
  .contact-form input[type="password"]:disabled,
  .contact-form textarea:disabled, .wpcf7 input[type="text"]:disabled,
  .wpcf7 input[type="email"]:disabled,
  .wpcf7 input[type="tel"]:disabled,
  .wpcf7 input[type="date"]:disabled,
  .wpcf7 input[type="url"]:disabled,
  .wpcf7 input[type="password"]:disabled,
  .wpcf7 textarea:disabled, .searchform input[type="text"]:disabled,
  .searchform input[type="email"]:disabled,
  .searchform input[type="tel"]:disabled,
  .searchform input[type="date"]:disabled,
  .searchform input[type="url"]:disabled,
  .searchform input[type="password"]:disabled,
  .searchform textarea:disabled {
    background-color: #f9f9f9;
    cursor: no-drop; }
  form input[type="text"].touched:invalid,
  form input[type="email"].touched:invalid,
  form input[type="tel"].touched:invalid,
  form input[type="date"].touched:invalid,
  form input[type="url"].touched:invalid,
  form input[type="password"].touched:invalid,
  form textarea.touched:invalid, .contact-form input[type="text"].touched:invalid,
  .contact-form input[type="email"].touched:invalid,
  .contact-form input[type="tel"].touched:invalid,
  .contact-form input[type="date"].touched:invalid,
  .contact-form input[type="url"].touched:invalid,
  .contact-form input[type="password"].touched:invalid,
  .contact-form textarea.touched:invalid, .wpcf7 input[type="text"].touched:invalid,
  .wpcf7 input[type="email"].touched:invalid,
  .wpcf7 input[type="tel"].touched:invalid,
  .wpcf7 input[type="date"].touched:invalid,
  .wpcf7 input[type="url"].touched:invalid,
  .wpcf7 input[type="password"].touched:invalid,
  .wpcf7 textarea.touched:invalid, .searchform input[type="text"].touched:invalid,
  .searchform input[type="email"].touched:invalid,
  .searchform input[type="tel"].touched:invalid,
  .searchform input[type="date"].touched:invalid,
  .searchform input[type="url"].touched:invalid,
  .searchform input[type="password"].touched:invalid,
  .searchform textarea.touched:invalid {
    color: #e1324f;
    border-color: #e1324f; }
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="tel"]:focus,
  form input[type="date"]:focus,
  form input[type="url"]:focus,
  form input[type="password"]:focus,
  form textarea:focus, .contact-form input[type="text"]:focus,
  .contact-form input[type="email"]:focus,
  .contact-form input[type="tel"]:focus,
  .contact-form input[type="date"]:focus,
  .contact-form input[type="url"]:focus,
  .contact-form input[type="password"]:focus,
  .contact-form textarea:focus, .wpcf7 input[type="text"]:focus,
  .wpcf7 input[type="email"]:focus,
  .wpcf7 input[type="tel"]:focus,
  .wpcf7 input[type="date"]:focus,
  .wpcf7 input[type="url"]:focus,
  .wpcf7 input[type="password"]:focus,
  .wpcf7 textarea:focus, .searchform input[type="text"]:focus,
  .searchform input[type="email"]:focus,
  .searchform input[type="tel"]:focus,
  .searchform input[type="date"]:focus,
  .searchform input[type="url"]:focus,
  .searchform input[type="password"]:focus,
  .searchform textarea:focus {
    border-bottom: 2px solid #00A3DA; }
form input[type="checkbox"], form input[type="radio"], .contact-form input[type="checkbox"], .contact-form input[type="radio"], .wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"], .searchform input[type="checkbox"], .searchform input[type="radio"] {
  width: auto; }
form input[type="submit"], .contact-form input[type="submit"], .wpcf7 input[type="submit"], .searchform input[type="submit"] {
  outline: none;
  line-height: 1rem;
  border: none; }

.page-section.style-light input[type="text"],
.page-section.style-light input[type="email"],
.page-section.style-light input[type="tel"],
.page-section.style-light input[type="date"],
.page-section.style-light input[type="url"],
.page-section.style-light input[type="password"],
.page-section.style-light textarea {
  outline: none;
  padding: 10px 15px;
  max-width: 100%;
  width: 100%;
  background-color: #fff; }
  .page-section.style-light input[type="text"]:disabled,
  .page-section.style-light input[type="email"]:disabled,
  .page-section.style-light input[type="tel"]:disabled,
  .page-section.style-light input[type="date"]:disabled,
  .page-section.style-light input[type="url"]:disabled,
  .page-section.style-light input[type="password"]:disabled,
  .page-section.style-light textarea:disabled {
    background-color: #f9f9f9;
    cursor: no-drop; }
  .page-section.style-light input[type="text"].touched:invalid,
  .page-section.style-light input[type="email"].touched:invalid,
  .page-section.style-light input[type="tel"].touched:invalid,
  .page-section.style-light input[type="date"].touched:invalid,
  .page-section.style-light input[type="url"].touched:invalid,
  .page-section.style-light input[type="password"].touched:invalid,
  .page-section.style-light textarea.touched:invalid {
    color: #e1324f;
    border-color: #e1324f; }

form input + input {
  margin-top: 15px; }
form textarea {
  resize: vertical; }

.searchform {
  max-width: 300px; }

.wps-form {
  width: 100%;
  margin: 0 auto; }
  .wps-form .wps-form-row {
    display: flex;
    width: 100%;
    display: -ms-flexbox;
    -ms-flex-align: stretch;
    -ms-flex-pack: justify; }
    .wps-form .wps-form-row .wpcf7-form-control {
      width: 100%; }
    .wps-form .wps-form-row.block .wpcf7-list-item {
      display: block; }
  .wps-form .wps-form-column {
    flex: 1;
    width: 100%;
    padding: .5rem 0;
    font-size: 0.85rem; }
    .wps-form .wps-form-column:first-child {
      padding: .5rem .5rem .5rem 0; }

/* Notebook / Desktop */
@media only screen and (min-width: 48em) {
  .wps-form .wps-form-row {
    flex-direction: row; }

  .wps-form .wps-form-column {
    padding: .5rem .5rem;
    -ms-flex: 1 1 auto; } }
span.wpcf7-not-valid-tip {
  color: #e1324f !important;
  margin: 4px 0px; }

.wpcf7-response-output, .mc4wp-alert {
  background-color: #001E55;
  color: #ffffff;
  margin: 0.75rem 0 !important;
  padding: 15px !important;
  border: none !important; }
  .wpcf7-response-output.wpcf7-validation-errors, .wpcf7-validation-errors.mc4wp-alert, .mc4wp-alert.mc4wp-error {
    background-color: #e1324f; }
  .wpcf7-response-output.wpcf7-mail-sent-ok, .wpcf7-mail-sent-ok.mc4wp-alert, .mc4wp-alert.mc4wp-success {
    background-color: #66BE40; }

.grecaptcha-badge {
  display: none; }

/*
 * CSS3 library is now included in wp-module-themeframework.
 * This file still exists for backward compatibility.
 */
/*******************************
 * Contrast color functions
 ******************************/
/**
 * Automatically decides wheter black or white color is needed
 * @obsolete
 */
/**
 * Automatically gets the contrast color
 *
 */
/*******************************
 * Prefixing mixins
 ******************************/
/*******************************
 * Clearfix
 ******************************/
/*
 * If there is no other clearfix
 * class from bootstrap or something
 * available, you can include this.
 */
/*******************************
 * BS Viewports
 ******************************/
/*******************************
 * Additional Viewports
 ******************************/
/*******************************
 * Misc
 ******************************/
/*
 * Triangle factory
 */
/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
.page-nav {
  margin-top: 15px; }
  .page-nav .page-nav-item {
    -webkit-transition: all ease-in 0.2s;
    -moz-transition: all ease-in 0.2s;
    -o-transition: all ease-in 0.2s;
    -ms-transition: all ease-in 0.2s;
    -khtml-transition: all ease-in 0.2s;
    transition: all ease-in 0.2s;
    background-color: #efefef;
    text-decoration: none;
    float: left;
    padding: 8px 14px; }
    .page-nav .page-nav-item:hover {
      background-color: #fcfcfc; }
    .page-nav .page-nav-item .fa {
      font-size: 130%; }
    .page-nav .page-nav-item.current-page-nav-item {
      background-color: #00A3DA;
      color: #fff; }

/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
.info-stripe .title {
  color: #666; }

/*
 * Creates a new menu. Use this
 * mixin as your base for the menu
 * and define the single menu levels.
 */
/*
 * false:	Alle child ul
 * 0:		Root level
 * >0:		Specific level
 */
/*******************************
 * Basic dropdown
 ******************************/
/**
 * This function is intented
 * to be placed inside the selector
 * which represents the top level ul.
 *
 * It will add the default css
 * dropdown functionlalities to this class.
 */
/*******************************
 * Default responsive mobile styles
 ******************************/
/*******************************
 * Default vertical dropdown
 ******************************/
/**
 * Creates a default vertical
 * dropdown out of the corresponding ul.
 */
/*******************************
 * jQueryResponsiveNavigation styles
 ******************************/
/*******************************
 * DEV
 ******************************/
/*******************************
 * Helpers
 ******************************/
/*******************************
 * Style
 ******************************/
nav.main {
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
  overflow: hidden; }
  @media (min-width: 992px) {
    nav.main {
      /*
       * Necessary to make the
       * dropdown on desktop visible
       */
      overflow: visible;
      font-size: 1rem; } }
  @media (min-width: 1200px) {
    nav.main {
      font-size: 1.1rem; } }
  nav.main ul {
    background-color: #fff;
    transition: max-height ease-out 300ms; }
    @media (min-width: 992px) {
      nav.main ul {
        float: right; } }
    nav.main ul.active {
      display: block;
      animation: menu-fade ease-out 300ms;
      background-color: rgba(0, 0, 0, 0.05); }
    nav.main ul li {
      list-style: none; }
    nav.main ul a {
      text-decoration: none;
      position: relative;
      color: #667477; }
    nav.main ul li.current-menu-item > a, nav.main ul li.current-page-ancestor:not(.menu-item-home) > a {
      background-color: #fcfcfc;
      color: #000; }
  nav.main > ul {
    background-color: transparent;
    margin: 0;
    padding: 0;
    display: flex;
    display: -ms-flexbox;
    flex-flow: column;
    -ms-flex-flow: column; }
    @media (min-width: 992px) {
      nav.main > ul {
        flex-flow: row;
        -ms-flex-flow: row; } }
    nav.main > ul > li a {
      white-space: nowrap;
      padding: 15px 20px;
      display: block; }
      @media (min-width: 992px) {
        nav.main > ul > li a {
          padding: 15px 10px; } }
      @media (min-width: 1200px) {
        nav.main > ul > li a {
          padding: 15px 20px; } }
    nav.main > ul > li:hover > a {
      background-color: #fcfcfc; }
    @media (min-width: 992px) {
      nav.main > ul > li:hover > ul {
        animation: menu-anim 250ms; } }
  @media (min-width: 992px) {
    nav.main > ul > li > ul {
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%) translateY(0);
      -moz-transform: translateX(-50%) translateY(0);
      -o-transform: translateX(-50%) translateY(0);
      -ms-transform: translateX(-50%) translateY(0);
      -khtml-transform: translateX(-50%) translateY(0);
      transform: translateX(-50%) translateY(0); }
      nav.main > ul > li > ul:after {
        content: '';
        border-style: solid;
        position: absolute;
        height: 0;
        width: 0;
        clear: both;
        border-width: 0 10px 12px 10px;
        border-color: transparent transparent #fff transparent;
        left: 50%;
        top: -10px;
        transform: translateX(-50%); } }

/*******************************
 *
 ******************************/
@media (min-width: 992px) {
  .nav-wrapper .nav-control {
    display: none; } }
.nav-wrapper .nav-control .fa {
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
  display: table-cell;
  height: inherit;
  width: inherit; }
.nav-wrapper .btn-nav-toggle {
  float: right; }
.nav-wrapper .btn-search-toggle {
  float: left; }
.nav-wrapper.style-center {
  display: inline-block; }

@media (min-width: 992px) {
  header.main.style-center .nav-toggle-container {
    display: inline-block;
    vertical-align: top;
    float: none; } }
@media (min-width: 992px) {
  header.main .responsive-menu {
    float: right; } }

/*******************************
 * Promo
 ******************************/
nav.main li.promotion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }
  nav.main li.promotion:after {
    margin-right: -76px;
    content: '';
    display: inline-block;
    height: 25px;
    width: 76px;
    background-image: url("../../res/icons/promo_badge_mobile.svg");
    background-repeat: no-repeat; }
    @media (min-width: 992px) {
      nav.main li.promotion:after {
        height: 33px;
        margin-right: 0;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -60%);
        z-index: 3;
        background-image: url("../../res/icons/promo_badge.svg"); } }

/*******************************
 * Custom Hover Colors
 ******************************/
.ob-newsentry {
  background-color: #fff;
  -webkit-box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -moz-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -o-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -ms-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -khtml-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  padding: 20px; }
  .ob-newsentry h3 {
    font-size: 16px; }

.ob-faq {
  background-color: #fff;
  -webkit-box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -moz-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -o-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -ms-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -khtml-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  padding: 20px; }
  .ob-faq h3 {
    font-size: 16px; }

.channel-group {
  background-color: #fff;
  -webkit-box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -moz-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -o-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -ms-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -khtml-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  padding: 20px;
  margin: 15px 0; }
  .channel-group h3 {
    font-size: 16px; }
  .channel-group h3 {
    margin: 0;
    size: 18px; }
  .channel-group p {
    margin: 14px 0 !important; }
  .channel-group .toggle-target {
    display: none; }

.FailureReport {
  background-color: #fff;
  -webkit-box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -moz-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -o-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -ms-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  -khtml-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
  padding: 20px; }
  .FailureReport h3 {
    font-size: 16px; }
  .FailureReport + .FailureReport {
    margin-top: 20px; }
  .FailureReport .service li:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
    margin-right: 10px; }
  .FailureReport hr {
    margin: 5px 0; }

/*******************************
 * ProductGroup
 ******************************/
.ProductGroup {
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all ease-in-out 300ms;
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -ms-transition: all ease-in-out 300ms;
  -khtml-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  position: relative;
  margin-top: 40px; }
  .ProductGroup:hover {
    background-color: #fff;
    -webkit-box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    -moz-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    -o-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    -ms-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    -khtml-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5); }
    .ProductGroup:hover h3 {
      font-size: 16px; }
  .ProductGroup a {
    padding: 20px 10px;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer; }
    .ProductGroup a:hover, .ProductGroup a:active, .ProductGroup a:focus {
      text-decoration: none; }
    .ProductGroup a .title {
      color: #000;
      font-weight: 300;
      font-size: 25px !important;
      /*
       * No upper case since desired
       * from sasag CEO.
       */
      margin: 10px 0 0 0;
      cursor: pointer; }
    .ProductGroup a .description {
      color: #797979;
      font-family: Arial;
      max-width: 50%;
      display: inline-block;
      cursor: pointer; }
    .ProductGroup a .img-wrapper {
      position: relative;
      display: inline-block; }
    .ProductGroup a img {
      max-width: 100px; }
  .ProductGroup.in-basket {
    background-color: #fff;
    -webkit-box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    -moz-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    -o-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    -ms-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    -khtml-box-shadows: 0 3px 3px 2px rgba(205, 205, 205, 0.5);
    box-shadow: 0 3px 3px 2px rgba(205, 205, 205, 0.5); }
    .ProductGroup.in-basket h3 {
      font-size: 16px; }
    .ProductGroup.in-basket .img-wrapper:after {
      content: "\f058";
      font-family: FontAwesome;
      font-size: 24px;
      color: #3cc839;
      -webkit-transform: translate(50%, -50%);
      -moz-transform: translate(50%, -50%);
      -o-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
      -khtml-transform: translate(50%, -50%);
      transform: translate(50%, -50%);
      position: absolute;
      right: 0;
      top: 0; }

@media (min-width: 992px) {
  .chosen-product-wrap {
    margin: 30px 0; } }

.product-link-wrap {
  text-decoration: none;
  color: inherit; }
  .product-link-wrap:hover {
    text-decoration: none; }

.OBSlider {
  -webkit-transition: all ease-in 0.1s;
  -moz-transition: all ease-in 0.1s;
  -ms-transition: all ease-in 0.1s;
  -o-transition: all ease-in 0.1s;
  -khtml-transition: all ease-in 0.1s;
  transition: all ease-in 0.1s;
  overflow: hidden;
  position: relative;
  width: 100%; }
  .OBSlider .control {
    position: absolute;
    z-index: 15;
    /*
     * Hide controls for printing
     */ }
    @media print {
      .OBSlider .control {
        display: none; } }
    .OBSlider .control.control-next {
      padding: 20px;
      right: 0px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -khtml-transform: translateY(-50%);
      transform: translateY(-50%);
      /* Disabled control on mobile devices */ }
      @media (max-width: 992px) {
        .OBSlider .control.control-next {
          display: none; } }
    .OBSlider .control.control-prev {
      padding: 20px;
      left: 0px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -khtml-transform: translateY(-50%);
      transform: translateY(-50%);
      /* Disabled control on mobile devices */ }
      @media (max-width: 992px) {
        .OBSlider .control.control-prev {
          display: none; } }
    .OBSlider .control.control-indicator {
      text-align: center;
      bottom: 0;
      width: 100%;
      padding: 5px 0; }
      .OBSlider .control.control-indicator .indicator {
        margin: 0 4px; }
    .OBSlider .control .fa {
      font-size: 20px; }
  .OBSlider .inner {
    position: relative;
    -webkit-transition: all ease-in 0.1s;
    -moz-transition: all ease-in 0.1s;
    -ms-transition: all ease-in 0.1s;
    -o-transition: all ease-in 0.1s;
    -khtml-transition: all ease-in 0.1s;
    transition: all ease-in 0.1s; }
    .OBSlider .inner .slide {
      opacity: 0.0;
      width: 100%;
      /*
       * Take care that you dont set transition
       * for "all" properties. Otherwise IE
       * will probably calculate a too small
       * slide with (problem cropped slider).
       */
      -webkit-transition: opacity ease-in 0.3s;
      -moz-transition: opacity ease-in 0.3s;
      -ms-transition: opacity ease-in 0.3s;
      -o-transition: opacity ease-in 0.3s;
      -khtml-transition: opacity ease-in 0.3s;
      transition: opacity ease-in 0.3s;
      z-index: 0;
      position: absolute; }
      @media print {
        .OBSlider .inner .slide {
          position: static;
          display: block;
          opacity: 1.0;
          visibility: visible; } }
      .OBSlider .inner .slide.current-slide {
        opacity: 1.0;
        z-index: 2; }

.OBWPSlider {
  background-color: #f9f9f9; }
  .OBWPSlider .control {
    cursor: pointer; }
  .OBWPSlider .control-next:hover, .OBWPSlider .control-prev:hover {
    background-color: #fff; }
  .OBWPSlider .control-next:active, .OBWPSlider .control-prev:active {
    background-color: #efefef; }
  .OBWPSlider .inner {
    min-height: 400px;
    height: 35vw !important;
    max-height: 700px;
    overflow: hidden; }
  .OBWPSlider .slide {
    background-position: center;
    background-size: cover;
    height: 100%;
    display: flex; }
    @media print {
      .OBWPSlider .slide {
        min-height: initial;
        height: auto;
        display: block !important;
        opacity: 1.0 !important; } }
    .OBWPSlider .slide .content-wrapper {
      width: 100%;
      display: flex;
      align-items: stretch; }
    .OBWPSlider .slide .fade-down {
      -webkit-transition: all ease 400ms;
      -moz-transition: all ease 400ms;
      -o-transition: all ease 400ms;
      -ms-transition: all ease 400ms;
      -khtml-transition: all ease 400ms;
      transition: all ease 400ms;
      opacity: 0.0;
      -webkit-transform: translateY(-10px);
      -moz-transform: translateY(-10px);
      -o-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      -khtml-transform: translateY(-10px);
      transform: translateY(-10px);
      -webkit-transition-delay: 300ms;
      -moz-transition-delay: 300ms;
      -o-transition-delay: 300ms;
      -ms-transition-delay: 300ms;
      -khtml-transition-delay: 300ms;
      transition-delay: 300ms; }
      @media print {
        .OBWPSlider .slide .fade-down {
          opacity: 1.0 !important; } }
    .OBWPSlider .slide.current-slide .fade-down {
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -o-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -khtml-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1.0; }
    .OBWPSlider .slide .box {
      background-color: rgba(0, 163, 218, 0.9);
      color: #fff;
      flex-grow: 1;
      width: 100%;
      max-width: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      display: -ms-flexbox;
      -ms-flex-direction: column;
      -ms-flex-pack: center;
      position: relative;
      padding-left: 15px;
      padding-right: 15px;
      /* First fix for 21:9 screens */ }
      .OBWPSlider .slide .box .scroll-indicator {
        height: 6rem;
        margin-top: -6rem;
        z-index: 2;
        width: 100%;
        background: linear-gradient(to bottom, rgba(0, 163, 218, 0) 0%, rgba(0, 163, 218, 0) 34%, rgba(0, 163, 218, 0.65) 95%, rgba(0, 163, 218, 0.65) 100%); }
      .OBWPSlider .slide .box .content {
        box-sizing: border-box;
        max-height: 70%;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        /* Firefox 64 */
        overflow-y: -moz-hidden-unscrollable;
        position: relative;
        margin-top: -1.2rem; }
        .OBWPSlider .slide .box .content::-webkit-scrollbar {
          /* required, although an apparent no-op */
          display: none; }
        .OBWPSlider .slide .box .content > *:first-child {
          margin-top: 0; }
        .OBWPSlider .slide .box .content > *:last-child {
          margin-bottom: 0; }
        .OBWPSlider .slide .box .content h1, .OBWPSlider .slide .box .content h2, .OBWPSlider .slide .box .content h3 {
          text-shadow: 0 0 2px rgba(0, 0, 0, 0.76); }
        .OBWPSlider .slide .box .content p, .OBWPSlider .slide .box .content h1, .OBWPSlider .slide .box .content h2 {
          color: white;
          max-width: 100%;
          width: 100%; }
        .OBWPSlider .slide .box .content p {
          font-size: 1.1rem; }
@keyframes button-arrow-hover {
  50% {
    transform: translateX(100%);
    opacity: 0; }
  51% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes button-arrow-active {
  100% {
    transform: translateX(100%);
    opacity: 0; } }
        .OBWPSlider .slide .box .content .button:hover:after, .OBWPSlider .slide .box .content form input[type="submit"]:hover:after, form .OBWPSlider .slide .box .content input[type="submit"]:hover:after, .OBWPSlider .slide .box .content .contact-form input[type="submit"]:hover:after, .contact-form .OBWPSlider .slide .box .content input[type="submit"]:hover:after, .OBWPSlider .slide .box .content .wpcf7 input[type="submit"]:hover:after, .wpcf7 .OBWPSlider .slide .box .content input[type="submit"]:hover:after, .OBWPSlider .slide .box .content .searchform input[type="submit"]:hover:after, .searchform .OBWPSlider .slide .box .content input[type="submit"]:hover:after {
          animation: button-arrow-hover ease 400ms; }
        .OBWPSlider .slide .box .content .button:active:after, .OBWPSlider .slide .box .content form input[type="submit"]:active:after, form .OBWPSlider .slide .box .content input[type="submit"]:active:after, .OBWPSlider .slide .box .content .contact-form input[type="submit"]:active:after, .contact-form .OBWPSlider .slide .box .content input[type="submit"]:active:after, .OBWPSlider .slide .box .content .wpcf7 input[type="submit"]:active:after, .wpcf7 .OBWPSlider .slide .box .content input[type="submit"]:active:after, .OBWPSlider .slide .box .content .searchform input[type="submit"]:active:after, .searchform .OBWPSlider .slide .box .content input[type="submit"]:active:after {
          animation: button-arrow-active ease 400ms forwards; }
        .OBWPSlider .slide .box .content .button:after, .OBWPSlider .slide .box .content form input[type="submit"]:after, form .OBWPSlider .slide .box .content input[type="submit"]:after, .OBWPSlider .slide .box .content .contact-form input[type="submit"]:after, .contact-form .OBWPSlider .slide .box .content input[type="submit"]:after, .OBWPSlider .slide .box .content .wpcf7 input[type="submit"]:after, .wpcf7 .OBWPSlider .slide .box .content input[type="submit"]:after, .OBWPSlider .slide .box .content .searchform input[type="submit"]:after, .searchform .OBWPSlider .slide .box .content input[type="submit"]:after {
          content: "";
          background-image: url("../../res/icons/right-arrow.svg");
          background-repeat: no-repeat;
          background-size: contain;
          display: inline-block;
          margin-left: 15px;
          height: 12px;
          width: 15px;
          transition: transform ease 400ms; }
      @media (min-width: 768px) {
        .OBWPSlider .slide .box {
          padding-left: calc((100vw - 750px) / 2 + 15px);
          text-align: left;
          width: auto; }
          .OBWPSlider .slide .box:after {
            display: block;
            content: "";
            right: 0;
            top: 0;
            bottom: 0;
            width: 0;
            height: 0;
            transform: translateX(100%);
            position: absolute;
            border-style: solid;
            border-width: 700px 130px 0 0;
            border-color: rgba(0, 163, 218, 0.9) transparent transparent transparent; }
          .OBWPSlider .slide .box p {
            max-width: 400px; } }
      @media (min-width: 800px) {
        .OBWPSlider .slide .box {
          max-width: 50%; } }
      @media (min-width: 992px) {
        .OBWPSlider .slide .box {
          padding-left: calc((100vw - 970px) / 2 + 15px); } }
      @media (min-width: 1200px) {
        .OBWPSlider .slide .box {
          max-width: 45%;
          padding-left: calc((100vw - 1170px) / 2 + 15px); } }
      @media (min-width: 1600px) {
        .OBWPSlider .slide .box {
          max-width: 40%;
          padding-right: 0;
          padding-left: calc((100% - 1580px) / 2 + 15px); } }
      @media (min-width: 1900px) {
        .OBWPSlider .slide .box {
          padding-left: calc((1900px - 1580px) / 2 + 15px); } }
      .OBWPSlider .slide .box a {
        color: #fff;
        text-decoration: underline; }
        .OBWPSlider .slide .box a.button {
          text-decoration: none; }
      .OBWPSlider .slide .box h1 {
        line-height: 2.5rem; }
      .OBWPSlider .slide .box h2 {
        line-height: 1.75rem; }
  .OBWPSlider .indicator-wrap {
    width: 100%;
    position: absolute;
    z-index: 2;
    bottom: 0; }
    .OBWPSlider .indicator-wrap .indicators {
      display: flex;
      align-items: center;
      position: static;
      padding: 1.2rem 0; }
      @media (min-width: 992px) {
        .OBWPSlider .indicator-wrap .indicators {
          padding: 0 0 2rem 0; } }
    .OBWPSlider .indicator-wrap .indicator {
      display: flex;
      align-items: center;
      transition: transform ease 300ms;
      cursor: pointer;
      padding: 0.5rem; }
      .OBWPSlider .indicator-wrap .indicator:first-child {
        padding-left: 0; }
      .OBWPSlider .indicator-wrap .indicator:hover {
        transform: scale(1.3); }

/*******************************
 * Steps bar
 * An easy and flexible
 * form step class.
 * by OWNBIT LLC
 ******************************/
.steps-bar {
  counter-reset: my-badass-counter;
  display: table;
  color: #666;
  margin: 0;
  padding: 10px 0;
  width: 100%; }
  .steps-bar li {
    list-style: none;
    list-style-position: inside;
    position: relative; }
    @media (min-width: 640px) {
      .steps-bar li {
        display: table;
        float: left;
        min-width: 125px;
        padding-top: 40px;
        text-align: center; } }
    .steps-bar li.active a:after {
      background-color: #00A3DA;
      color: #fff; }
    .steps-bar li:hover a:after {
      -webkit-box-shadow: inset 0 0 0 3px #00A3DA;
      -moz-box-shadows: inset 0 0 0 3px #00A3DA;
      -o-box-shadows: inset 0 0 0 3px #00A3DA;
      -ms-box-shadows: inset 0 0 0 3px #00A3DA;
      -khtml-box-shadows: inset 0 0 0 3px #00A3DA;
      box-shadow: inset 0 0 0 3px #00A3DA; }
    .steps-bar li:first-child a:before {
      left: 50%; }
    .steps-bar li:last-child a:before {
      right: 50%; }
    .steps-bar li a {
      color: inherit;
      text-decoration: none;
      padding-top: 15px;
      padding-right: 20px;
      padding-bottom: 15px;
      padding-left: 60px;
      display: inline-block; }
      .steps-bar li a:after {
        /*
         *  Using counter, working in all browsers
         *	http://caniuse.com/#search=counter
         *
         *  https://css-tricks.com/numbering-in-style/
         */
        content: counter(my-badass-counter);
        counter-increment: my-badass-counter;
        background-color: #efefef;
        transition: all ease-in 100ms;
        text-align: center;
        vertical-align: middle;
        border-radius: 50%;
        height: 40px;
        width: 40px;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -khtml-transform: translateY(-50%);
        transform: translateY(-50%);
        display: inline-block;
        padding-top: 10px;
        box-sizing: border-box;
        position: absolute; }
        @media (min-width: 640px) {
          .steps-bar li a:after {
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -khtml-transform: translateX(-50%);
            transform: translateX(-50%);
            top: 0;
            left: 50%; } }
      @media (min-width: 640px) {
        .steps-bar li a {
          padding-top: 10px;
          padding-right: 20px;
          padding-bottom: 0;
          padding-left: 20px; }
          .steps-bar li a:before {
            content: "";
            border-top: 3px solid #efefef;
            display: block;
            position: absolute;
            top: 20px;
            left: 0px;
            right: 0; } }

.breadcrumb {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0; }
  .breadcrumb li {
    float: left; }
    .breadcrumb li a {
      color: #4A4A4A;
      text-decoration: none;
      padding: 10px 5px 10px 20px;
      background: #ffffff;
      position: relative;
      display: block;
      float: left; }
      .breadcrumb li a:after {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        /* Go big on the size, and let overflow hide */
        border-bottom: 20px solid transparent;
        border-left: 12px solid white;
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 1; }
    .breadcrumb li.active a {
      background-color: #00A3DA;
      color: #fff; }
      .breadcrumb li.active a:after {
        border-left-color: #00A3DA; }
    .breadcrumb li.active + {
      background-color: #efefef;
      pointer-events: none;
      cursor: default; }

.breadcrumb li a:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 20px solid transparent;
  border-left: 12px solid white;
  position: absolute;
  top: 0;
  margin-left: 1px;
  left: 100%;
  z-index: 1; }

.breadcrumb li:first-child a {
  padding-left: 10px; }

.breadcrumb li:last-child a {
  padding-right: 10px; }
  .breadcrumb li:last-child a:after {
    border: none; }
  .breadcrumb li:last-child a:before {
    border: none; }

/*******************************
 * ProductOption
 ******************************/
.ProductOption {
  border-top: 1px solid #ddd;
  padding: 10px 0; }
  .ProductOption .title {
    font-weight: 500; }
  .ProductOption .price-wrap {
    padding: 5px;
    float: right;
    text-align: right; }
    .ProductOption .price-wrap label {
      margin: 0;
      padding: 0; }
    .ProductOption .price-wrap .price-type {
      font-size: 11px; }

/*******************************
 * Product
 ******************************/
.chosen-product-wrap .Product, .chosen-product-wrap .product {
  background-color: #fff; }

/*******************************
 * PriceCalculator
 ******************************/
.LivePriceCalc {
  background-color: rgba(0, 164, 218, 0.75);
  color: #fff;
  font-size: 12px;
  text-align: center;
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 12px 0px;
  z-index: 99; }
  @media (min-width: 992px) {
    .LivePriceCalc {
      font-size: 14px;
      width: auto;
      right: 20px;
      bottom: 20px;
      padding: 20px 30px; } }

/*******************************
 * OrderSummary
 ******************************/
.order-summary .fa.fa-times {
  color: #e1324f; }
.order-summary .fa.fa-check {
  color: #76b04c; }

/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
.alert {
  padding: 10px;
  margin: 10px 0;
  /*
   * Dirty overwrite
   * because button styles count on button element
   * with no class required
   */ }
  .alert button {
    float: right;
    background-color: transparent;
    color: #fff;
    padding: 0;
    display: inline; }
  .alert.alert-success {
    color: #fff;
    background-color: #76b04c; }
  .alert.alert-warning {
    color: #fff;
    background-color: #FF931A; }
  .alert.alert-danger {
    color: #fff;
    background-color: #e1324f; }

.OBWindow-wrapper {
  -webkit-transition: all ease 300ms;
  -moz-transition: all ease 300ms;
  -o-transition: all ease 300ms;
  -ms-transition: all ease 300ms;
  -khtml-transition: all ease 300ms;
  transition: all ease 300ms; }
  .OBWindow-wrapper .OBWindow {
    -webkit-transition: opacity ease 300ms;
    -moz-transition: opacity ease 300ms;
    -o-transition: opacity ease 300ms;
    -ms-transition: opacity ease 300ms;
    -khtml-transition: opacity ease 300ms;
    transition: opacity ease 300ms; }
  .OBWindow-wrapper .control-close {
    color: #fff;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 102;
    cursor: pointer;
    display: none; }
  .OBWindow-wrapper.open {
    background-color: rgba(0, 0, 0, 0.65);
    overflow-y: scroll;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100; }
    .OBWindow-wrapper.open .control-close {
      text-align: center;
      background-color: rgba(0, 163, 218, 0.5);
      border-radius: 50%;
      width: 20px;
      display: block; }
    .OBWindow-wrapper.open .OBWindow {
      background-color: #fff;
      -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
      -moz-box-shadows: 0px 0px 3px rgba(0, 0, 0, 0.4);
      -o-box-shadows: 0px 0px 3px rgba(0, 0, 0, 0.4);
      -ms-box-shadows: 0px 0px 3px rgba(0, 0, 0, 0.4);
      -khtml-box-shadows: 0px 0px 3px rgba(0, 0, 0, 0.4);
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
      overflow-y: scroll;
      overflow-x: hidden;
      z-index: 101;
      position: fixed;
      top: 10px;
      left: 10px;
      bottom: 10px;
      right: 10px;
      max-width: 600px;
      max-height: 650px;
      height: 90%; }
      @media (min-width: 992px) {
        .OBWindow-wrapper.open .OBWindow {
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -khtml-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); } }
      .OBWindow-wrapper.open .OBWindow .inner {
        -webkit-transition: opacity ease-in-out 300ms;
        -moz-transition: opacity ease-in-out 300ms;
        -o-transition: opacity ease-in-out 300ms;
        -ms-transition: opacity ease-in-out 300ms;
        -khtml-transition: opacity ease-in-out 300ms;
        transition: opacity ease-in-out 300ms;
        opacity: 0.0; }
        .OBWindow-wrapper.open .OBWindow .inner.loaded {
          opacity: 1.0; }
    .OBWindow-wrapper.open.loading .OBWindow {
      background-image: url("../../res/loaders/circles.gif");
      background-position: center;
      background-repeat: no-repeat; }

.op-price {
  background-color: #F9F9F9;
  padding: 0.5rem;
  display: inline-flex;
  border-radius: 5px; }

.channel-list {
  margin: 0;
  padding: 0; }
  .channel-list .channel {
    list-style: none;
    background-color: #fff;
    display: flex;
    flex-flow: column;
    color: #4a4a4a; }
    .channel-list .channel .img-wrap {
      padding: 1.5rem;
      border-bottom: 2px solid #f9f9f9; }
    .channel-list .channel .content-wrap {
      padding: 1.5rem; }
    .channel-list .channel .channel-label {
      flex-shrink: 0;
      font-weight: bold; }
    .channel-list .channel .channel-description {
      width: 100%; }
      .channel-list .channel .channel-description > *:last-child {
        margin-bottom: 0; }
    .channel-list .channel .channel-image {
      flex-shrink: 0;
      max-width: 175px; }
    .channel-list .channel .channel-link {
      flex-shrink: 0; }

.browsehappy {
  color: #fff;
  background-color: #FF5764;
  margin: 0;
  padding: 20px; }

/*
 * CSS3 library is now included in wp-module-themeframework.
 * This file still exists for backward compatibility.
 */
/*******************************
 * Contrast color functions
 ******************************/
/**
 * Automatically decides wheter black or white color is needed
 * @obsolete
 */
/**
 * Automatically gets the contrast color
 *
 */
/*******************************
 * Prefixing mixins
 ******************************/
/*******************************
 * Clearfix
 ******************************/
/*
 * If there is no other clearfix
 * class from bootstrap or something
 * available, you can include this.
 */
/*******************************
 * BS Viewports
 ******************************/
/*******************************
 * Additional Viewports
 ******************************/
/*******************************
 * Misc
 ******************************/
/*
 * Triangle factory
 */
/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
.newsletter-signup {
  display: flex; }
  .newsletter-signup input {
    color: #4a4a4a;
    margin: 0; }

.mc4wp-alert {
  margin-top: 1rem; }
  .mc4wp-alert p {
    margin: 0; }
  .mc4wp-alert.mc4wp-notice {
    background-color: #FF931A; }

.ob-folder > h3 {
  cursor: pointer;
  font-size: 16px; }
  .ob-folder > h3:before {
    font-family: "FontAwesome";
    content: "\f107";
    margin-right: 10px; }
.ob-folder.opened > h3:before {
  font-family: "FontAwesome";
  content: "\f106"; }
.ob-folder .option-price {
  float: right; }
.ob-folder .badge {
  background-color: #efefef;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  color: #888;
  font-size: 14px;
  display: inline;
  padding: 1px 5px; }

.faq-filter {
  display: flex;
  margin-bottom: 1rem;
  flex-flow: column; }
  @media (min-width: 768px) {
    .faq-filter {
      flex-flow: row; } }
  .faq-filter .category-select {
    min-height: 3rem;
    margin: 1rem 0;
    background-color: #fff;
    flex-shrink: 0;
    -moz-appearance: none; }
    @media (min-width: 768px) {
      .faq-filter .category-select {
        margin: 0 0.5rem; } }

/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
.obstacktable {
  text-align: center; }
  .obstacktable.small-only th {
    padding: 50px 0px 10px 0px; }
    .obstacktable.small-only th:nth-child(even) {
      background-color: white; }
  .obstacktable.large-only .thead-fix {
    display: none; }
  .obstacktable .button, .obstacktable form input[type="submit"], form .obstacktable input[type="submit"], .obstacktable .contact-form input[type="submit"], .contact-form .obstacktable input[type="submit"], .obstacktable .wpcf7 input[type="submit"], .wpcf7 .obstacktable input[type="submit"], .obstacktable .searchform input[type="submit"], .searchform .obstacktable input[type="submit"] {
    margin: 30px 0px 10px 0px; }
  .obstacktable .sub td {
    background-color: #00A3DA !important;
    color: #fff;
    font-size: 18px; }
  .obstacktable td {
    padding: 5px; }
    .obstacktable td:nth-child(1) {
      text-align: left; }
    .obstacktable td:nth-child(even) {
      background-color: #efefef; }
  .obstacktable th {
    font-size: 25px;
    font-weight: 300;
    position: relative;
    padding: 10px 10px;
    text-align: center; }
    .obstacktable th:nth-child(even) {
      background-color: #efefef; }
    @media (min-width: 992px) {
      .obstacktable th.has-badge {
        padding-right: 75px; } }

.fault-report .services {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; }
  .fault-report .services > * {
    display: flex;
    list-style: none;
    align-items: center;
    margin-right: 1rem; }
    .fault-report .services > *:before {
      margin-right: 0.5rem;
      content: "";
      width: 15px;
      height: 15px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -o-border-radius: 50%;
      -ms-border-radius: 50%;
      -khtml-border-radius: 50%;
      border-radius: 50%;
      display: inline-block;
      right: 5px;
      vertical-align: middle; }
    .fault-report .services > *.service-available:before {
      background-color: #7abb28; }
    .fault-report .services > *.service-disturbed:before {
      background-color: orange; }
    .fault-report .services > *.service-unavailable:before {
      background-color: #e83f0a; }

/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
.supportstripe {
  margin-top: 35px;
  margin-bottom: 35px; }
  @media print {
    .supportstripe {
      display: none; } }
  .supportstripe .vcenter {
    display: block;
    text-align: center;
    margin-top: 15px; }
    @media (min-width: 768px) {
      .supportstripe .vcenter {
        text-align: left;
        margin-top: 0; } }
    @media (min-width: 992px) {
      .supportstripe .vcenter {
        display: inline-block;
        vertical-align: middle;
        float: none; } }
  .supportstripe .icon {
    margin-right: 10px;
    float: left;
    display: none; }
    @media (min-width: 768px) {
      .supportstripe .icon {
        float: none;
        display: block; } }
    @media (min-width: 992px) {
      .supportstripe .icon {
        float: left; } }
  .supportstripe h2 {
    margin: 0; }
  .supportstripe p {
    margin: 0; }
  .supportstripe a {
    color: #4A4A4A;
    text-decoration: none; }
    .supportstripe a:hover {
      color: #000;
      text-decoration: none; }
  .supportstripe i {
    font-size: 60px !important; }

/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
/*******************************
 * Contact Page
 ******************************/
.contact-details table {
  font-weight: 300;
  margin: 14px 0px; }
  .contact-details table.opening-hours tr td:first-child {
    padding-right: 10px; }

/*******************************
 * visual composer map
 ******************************/
.wpb_gmaps_widget {
  margin: 0; }

.wpb_gmaps_widget .wpb_wrapper {
  padding: 0; }

.employee {
  background-color: #fff;
  text-align: left; }
  .employee ul {
    padding: 0 0 0 10px; }
  .employee .employee-text {
    padding: 15px; }
    @media (min-width: 992px) {
      .employee .employee-text {
        padding: 30px; } }

/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
html {
  max-width: 1920px;
  margin: 0 auto; }

body {
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  color: #4a4a4a; }

/*******************************
 * WP WYSWIG image options
 ******************************/
/*
 * As images added through wordpress
 * have width and height HTML attributes
 * we need to say that there should be height auto
 * over CSS if we choose a different width such as 100%.
 */
img {
  height: auto;
  max-width: 100%; }

img.alignleft {
  float: left;
  margin: 15px 15px 15px 0; }

img.alignright {
  float: right;
  margin: 15px 0 15px 15px; }

img.alignnone {
  display: block;
  margin: 15px 0; }

img.aligncenter {
  display: block;
  margin: 15px auto; }

/*******************************
* iFrames
******************************/
iframe {
  vertical-align: top; }

/*******************************
 * A (General link style)
 ******************************/
a {
  color: #00A3DA; }
  a:hover, a:active, a:focus {
    color: #0ec2ff;
    text-decoration: none; }

/*******************************
 * Bootstrap Overwrites
 ******************************/
@media print {
  a[href]:after {
    content: ""; } }
/*******************************
 * Text Selection Color
 ******************************/
::selection {
  background-color: rgba(0, 163, 218, 0.75);
  color: #ffffff; }

/*******************************
 * iframes
 ******************************/
iframe {
  max-width: 100%; }

/*******************************
 * Container
 ******************************/
@media (min-width: 1600px) {
  .container {
    width: 1580px;
    max-width: calc(100% - 30px); } }

/*******************************
 * Arrow link
 ******************************/
.arrow-link:hover .arrow-marker:after {
  transform: translateX(10px); }
.arrow-link .arrow-marker {
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  margin-top: 1rem; }
  .arrow-link .arrow-marker:after {
    content: "";
    background-image: url("../../res/icons/right-arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 15px;
    height: 12px;
    width: 15px;
    transition: transform ease 400ms; }
.arrow-link.is-external .arrow-marker:after {
  background-image: url("../../res/icons/external-link.svg"); }

/*******************************
 * Badge
 ******************************/
.badge {
  border-radius: 4px;
  box-shadow: -4px 0 50px rgba(0, 0, 0, 0.26);
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  z-index: 10;
  margin-right: 10px;
  padding: 0.5rem; }
  @media (min-width: 992px) {
    .badge {
      border-radius: 50%;
      transform: translateY(-40%) translateX(20%) rotate(-20deg);
      position: absolute;
      display: table;
      top: 0;
      right: 0;
      float: right;
      padding: 0; } }
  .badge .center-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: inherit;
    width: inherit; }
    .badge .center-wrap .content {
      display: inline-block; }

.badge.size-default {
  font-size: 1rem;
  line-height: 0.9;
  font-weight: bold; }
  @media (min-width: 992px) {
    .badge.size-default {
      width: 4.5rem;
      height: 4.5rem; } }

.badge.color-red {
  background-color: #e20072;
  color: #fff; }

.badge.color-orange {
  background-color: #fdbb02;
  color: #fff; }

.badge.color-green {
  background-color: #6baf26;
  color: #fff; }

.badge.color-primary {
  background-color: #00A3DA;
  color: #fff; }

/*******************************
 * Spped
 ******************************/
.speed-badge {
  display: flex;
  align-items: center;
  background-color: #fff;
  font-weight: bold;
  white-space: nowrap; }
  .speed-badge > * {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    width: 100%; }
  .speed-badge > *:not(:last-child) {
    border-right: 2px solid #efefef; }
  .speed-badge img {
    width: 25px;
    flex-shrink: 0; }

:root, body {
  font-size: 14px; }
  @media (min-width: 768px) {
    :root, body {
      font-size: 15px; } }
  @media (min-width: 992px) {
    :root, body {
      font-size: 16px; } }
  @media (min-width: 1200px) {
    :root, body {
      font-size: 17px; } }
  @media (min-width: 1400px) {
    :root, body {
      font-size: 18px; } }
  @media (min-width: 1600px) {
    :root, body {
      font-size: 19px; } }
  @media (min-width: 1900px) {
    :root, body {
      font-size: 20px; } }

h1 {
  font-size: 2rem;
  line-height: 2.3rem; }
  @media (min-width: 992px) {
    h1 {
      line-height: 1.42857143; } }

h2 {
  font-size: 1.5rem;
  line-height: 1.8rem; }
  @media (min-width: 992px) {
    h2 {
      line-height: 1.42857143; } }

h3 {
  font-size: 1rem; }

.ug {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /**
   * Keep in mind that adding viewports or gutter sizes
   * will cause a bigger CSS file as these ar multiplied!
   * Number of necessary classes = #viewports * #gutter-sizes * $max-cols.
   * Default: 4 viewports, 3 gutter sizes and max. 4 columns
   *	--> 4 * 3 * 4 = 48 classes containing a some CSS lines. = ~680 lines of CSS.
   */ }
  .ug.ug-xs-1-0 {
    margin: 0px; }
    .ug.ug-xs-1-0 > * {
      margin: 0px;
      width: 100%;
      flex: 0 1 calc(100% - 0px);
      max-width: calc(100% - 0px); }
  .ug.ug-xs-2-0 {
    margin: 0px; }
    .ug.ug-xs-2-0 > * {
      margin: 0px;
      width: 50%;
      flex: 0 1 calc(50% - 0px);
      max-width: calc(50% - 0px); }
  .ug.ug-xs-3-0 {
    margin: 0px; }
    .ug.ug-xs-3-0 > * {
      margin: 0px;
      width: 33.3333333333%;
      flex: 0 1 calc(33.3333333333% - 0px);
      max-width: calc(33.3333333333% - 0px); }
  .ug.ug-xs-4-0 {
    margin: 0px; }
    .ug.ug-xs-4-0 > * {
      margin: 0px;
      width: 25%;
      flex: 0 1 calc(25% - 0px);
      max-width: calc(25% - 0px); }
  .ug.ug-xs-5-0 {
    margin: 0px; }
    .ug.ug-xs-5-0 > * {
      margin: 0px;
      width: 20%;
      flex: 0 1 calc(20% - 0px);
      max-width: calc(20% - 0px); }
  .ug.ug-xs-1-15 {
    margin: -15px; }
    .ug.ug-xs-1-15 > * {
      margin: 15px;
      width: 100%;
      flex: 0 1 calc(100% - 30px);
      max-width: calc(100% - 30px); }
  .ug.ug-xs-2-15 {
    margin: -15px; }
    .ug.ug-xs-2-15 > * {
      margin: 15px;
      width: 50%;
      flex: 0 1 calc(50% - 30px);
      max-width: calc(50% - 30px); }
  .ug.ug-xs-3-15 {
    margin: -15px; }
    .ug.ug-xs-3-15 > * {
      margin: 15px;
      width: 33.3333333333%;
      flex: 0 1 calc(33.3333333333% - 30px);
      max-width: calc(33.3333333333% - 30px); }
  .ug.ug-xs-4-15 {
    margin: -15px; }
    .ug.ug-xs-4-15 > * {
      margin: 15px;
      width: 25%;
      flex: 0 1 calc(25% - 30px);
      max-width: calc(25% - 30px); }
  .ug.ug-xs-5-15 {
    margin: -15px; }
    .ug.ug-xs-5-15 > * {
      margin: 15px;
      width: 20%;
      flex: 0 1 calc(20% - 30px);
      max-width: calc(20% - 30px); }
  @media (min-width: 768px) {
    .ug.ug-sm-1-0 {
      margin: 0px; }
      .ug.ug-sm-1-0 > * {
        margin: 0px;
        width: 100%;
        flex: 0 1 calc(100% - 0px);
        max-width: calc(100% - 0px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-2-0 {
      margin: 0px; }
      .ug.ug-sm-2-0 > * {
        margin: 0px;
        width: 50%;
        flex: 0 1 calc(50% - 0px);
        max-width: calc(50% - 0px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-3-0 {
      margin: 0px; }
      .ug.ug-sm-3-0 > * {
        margin: 0px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 0px);
        max-width: calc(33.3333333333% - 0px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-4-0 {
      margin: 0px; }
      .ug.ug-sm-4-0 > * {
        margin: 0px;
        width: 25%;
        flex: 0 1 calc(25% - 0px);
        max-width: calc(25% - 0px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-5-0 {
      margin: 0px; }
      .ug.ug-sm-5-0 > * {
        margin: 0px;
        width: 20%;
        flex: 0 1 calc(20% - 0px);
        max-width: calc(20% - 0px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-1-15 {
      margin: -15px; }
      .ug.ug-sm-1-15 > * {
        margin: 15px;
        width: 100%;
        flex: 0 1 calc(100% - 30px);
        max-width: calc(100% - 30px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-2-15 {
      margin: -15px; }
      .ug.ug-sm-2-15 > * {
        margin: 15px;
        width: 50%;
        flex: 0 1 calc(50% - 30px);
        max-width: calc(50% - 30px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-3-15 {
      margin: -15px; }
      .ug.ug-sm-3-15 > * {
        margin: 15px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 30px);
        max-width: calc(33.3333333333% - 30px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-4-15 {
      margin: -15px; }
      .ug.ug-sm-4-15 > * {
        margin: 15px;
        width: 25%;
        flex: 0 1 calc(25% - 30px);
        max-width: calc(25% - 30px); } }
  @media (min-width: 768px) {
    .ug.ug-sm-5-15 {
      margin: -15px; }
      .ug.ug-sm-5-15 > * {
        margin: 15px;
        width: 20%;
        flex: 0 1 calc(20% - 30px);
        max-width: calc(20% - 30px); } }
  @media (min-width: 992px) {
    .ug.ug-md-1-0 {
      margin: 0px; }
      .ug.ug-md-1-0 > * {
        margin: 0px;
        width: 100%;
        flex: 0 1 calc(100% - 0px);
        max-width: calc(100% - 0px); } }
  @media (min-width: 992px) {
    .ug.ug-md-2-0 {
      margin: 0px; }
      .ug.ug-md-2-0 > * {
        margin: 0px;
        width: 50%;
        flex: 0 1 calc(50% - 0px);
        max-width: calc(50% - 0px); } }
  @media (min-width: 992px) {
    .ug.ug-md-3-0 {
      margin: 0px; }
      .ug.ug-md-3-0 > * {
        margin: 0px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 0px);
        max-width: calc(33.3333333333% - 0px); } }
  @media (min-width: 992px) {
    .ug.ug-md-4-0 {
      margin: 0px; }
      .ug.ug-md-4-0 > * {
        margin: 0px;
        width: 25%;
        flex: 0 1 calc(25% - 0px);
        max-width: calc(25% - 0px); } }
  @media (min-width: 992px) {
    .ug.ug-md-5-0 {
      margin: 0px; }
      .ug.ug-md-5-0 > * {
        margin: 0px;
        width: 20%;
        flex: 0 1 calc(20% - 0px);
        max-width: calc(20% - 0px); } }
  @media (min-width: 992px) {
    .ug.ug-md-1-15 {
      margin: -15px; }
      .ug.ug-md-1-15 > * {
        margin: 15px;
        width: 100%;
        flex: 0 1 calc(100% - 30px);
        max-width: calc(100% - 30px); } }
  @media (min-width: 992px) {
    .ug.ug-md-2-15 {
      margin: -15px; }
      .ug.ug-md-2-15 > * {
        margin: 15px;
        width: 50%;
        flex: 0 1 calc(50% - 30px);
        max-width: calc(50% - 30px); } }
  @media (min-width: 992px) {
    .ug.ug-md-3-15 {
      margin: -15px; }
      .ug.ug-md-3-15 > * {
        margin: 15px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 30px);
        max-width: calc(33.3333333333% - 30px); } }
  @media (min-width: 992px) {
    .ug.ug-md-4-15 {
      margin: -15px; }
      .ug.ug-md-4-15 > * {
        margin: 15px;
        width: 25%;
        flex: 0 1 calc(25% - 30px);
        max-width: calc(25% - 30px); } }
  @media (min-width: 992px) {
    .ug.ug-md-5-15 {
      margin: -15px; }
      .ug.ug-md-5-15 > * {
        margin: 15px;
        width: 20%;
        flex: 0 1 calc(20% - 30px);
        max-width: calc(20% - 30px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-1-0 {
      margin: 0px; }
      .ug.ug-lg-1-0 > * {
        margin: 0px;
        width: 100%;
        flex: 0 1 calc(100% - 0px);
        max-width: calc(100% - 0px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-2-0 {
      margin: 0px; }
      .ug.ug-lg-2-0 > * {
        margin: 0px;
        width: 50%;
        flex: 0 1 calc(50% - 0px);
        max-width: calc(50% - 0px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-3-0 {
      margin: 0px; }
      .ug.ug-lg-3-0 > * {
        margin: 0px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 0px);
        max-width: calc(33.3333333333% - 0px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-4-0 {
      margin: 0px; }
      .ug.ug-lg-4-0 > * {
        margin: 0px;
        width: 25%;
        flex: 0 1 calc(25% - 0px);
        max-width: calc(25% - 0px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-5-0 {
      margin: 0px; }
      .ug.ug-lg-5-0 > * {
        margin: 0px;
        width: 20%;
        flex: 0 1 calc(20% - 0px);
        max-width: calc(20% - 0px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-1-15 {
      margin: -15px; }
      .ug.ug-lg-1-15 > * {
        margin: 15px;
        width: 100%;
        flex: 0 1 calc(100% - 30px);
        max-width: calc(100% - 30px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-2-15 {
      margin: -15px; }
      .ug.ug-lg-2-15 > * {
        margin: 15px;
        width: 50%;
        flex: 0 1 calc(50% - 30px);
        max-width: calc(50% - 30px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-3-15 {
      margin: -15px; }
      .ug.ug-lg-3-15 > * {
        margin: 15px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 30px);
        max-width: calc(33.3333333333% - 30px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-4-15 {
      margin: -15px; }
      .ug.ug-lg-4-15 > * {
        margin: 15px;
        width: 25%;
        flex: 0 1 calc(25% - 30px);
        max-width: calc(25% - 30px); } }
  @media (min-width: 1200px) {
    .ug.ug-lg-5-15 {
      margin: -15px; }
      .ug.ug-lg-5-15 > * {
        margin: 15px;
        width: 20%;
        flex: 0 1 calc(20% - 30px);
        max-width: calc(20% - 30px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-1-0 {
      margin: 0px; }
      .ug.ug-xl-1-0 > * {
        margin: 0px;
        width: 100%;
        flex: 0 1 calc(100% - 0px);
        max-width: calc(100% - 0px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-2-0 {
      margin: 0px; }
      .ug.ug-xl-2-0 > * {
        margin: 0px;
        width: 50%;
        flex: 0 1 calc(50% - 0px);
        max-width: calc(50% - 0px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-3-0 {
      margin: 0px; }
      .ug.ug-xl-3-0 > * {
        margin: 0px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 0px);
        max-width: calc(33.3333333333% - 0px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-4-0 {
      margin: 0px; }
      .ug.ug-xl-4-0 > * {
        margin: 0px;
        width: 25%;
        flex: 0 1 calc(25% - 0px);
        max-width: calc(25% - 0px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-5-0 {
      margin: 0px; }
      .ug.ug-xl-5-0 > * {
        margin: 0px;
        width: 20%;
        flex: 0 1 calc(20% - 0px);
        max-width: calc(20% - 0px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-1-15 {
      margin: -15px; }
      .ug.ug-xl-1-15 > * {
        margin: 15px;
        width: 100%;
        flex: 0 1 calc(100% - 30px);
        max-width: calc(100% - 30px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-2-15 {
      margin: -15px; }
      .ug.ug-xl-2-15 > * {
        margin: 15px;
        width: 50%;
        flex: 0 1 calc(50% - 30px);
        max-width: calc(50% - 30px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-3-15 {
      margin: -15px; }
      .ug.ug-xl-3-15 > * {
        margin: 15px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 30px);
        max-width: calc(33.3333333333% - 30px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-4-15 {
      margin: -15px; }
      .ug.ug-xl-4-15 > * {
        margin: 15px;
        width: 25%;
        flex: 0 1 calc(25% - 30px);
        max-width: calc(25% - 30px); } }
  @media (min-width: 1400px) {
    .ug.ug-xl-5-15 {
      margin: -15px; }
      .ug.ug-xl-5-15 > * {
        margin: 15px;
        width: 20%;
        flex: 0 1 calc(20% - 30px);
        max-width: calc(20% - 30px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-1-0 {
      margin: 0px; }
      .ug.ug-2xl-1-0 > * {
        margin: 0px;
        width: 100%;
        flex: 0 1 calc(100% - 0px);
        max-width: calc(100% - 0px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-2-0 {
      margin: 0px; }
      .ug.ug-2xl-2-0 > * {
        margin: 0px;
        width: 50%;
        flex: 0 1 calc(50% - 0px);
        max-width: calc(50% - 0px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-3-0 {
      margin: 0px; }
      .ug.ug-2xl-3-0 > * {
        margin: 0px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 0px);
        max-width: calc(33.3333333333% - 0px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-4-0 {
      margin: 0px; }
      .ug.ug-2xl-4-0 > * {
        margin: 0px;
        width: 25%;
        flex: 0 1 calc(25% - 0px);
        max-width: calc(25% - 0px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-5-0 {
      margin: 0px; }
      .ug.ug-2xl-5-0 > * {
        margin: 0px;
        width: 20%;
        flex: 0 1 calc(20% - 0px);
        max-width: calc(20% - 0px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-1-15 {
      margin: -15px; }
      .ug.ug-2xl-1-15 > * {
        margin: 15px;
        width: 100%;
        flex: 0 1 calc(100% - 30px);
        max-width: calc(100% - 30px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-2-15 {
      margin: -15px; }
      .ug.ug-2xl-2-15 > * {
        margin: 15px;
        width: 50%;
        flex: 0 1 calc(50% - 30px);
        max-width: calc(50% - 30px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-3-15 {
      margin: -15px; }
      .ug.ug-2xl-3-15 > * {
        margin: 15px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 30px);
        max-width: calc(33.3333333333% - 30px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-4-15 {
      margin: -15px; }
      .ug.ug-2xl-4-15 > * {
        margin: 15px;
        width: 25%;
        flex: 0 1 calc(25% - 30px);
        max-width: calc(25% - 30px); } }
  @media (min-width: 1600px) {
    .ug.ug-2xl-5-15 {
      margin: -15px; }
      .ug.ug-2xl-5-15 > * {
        margin: 15px;
        width: 20%;
        flex: 0 1 calc(20% - 30px);
        max-width: calc(20% - 30px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-1-0 {
      margin: 0px; }
      .ug.ug-3xl-1-0 > * {
        margin: 0px;
        width: 100%;
        flex: 0 1 calc(100% - 0px);
        max-width: calc(100% - 0px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-2-0 {
      margin: 0px; }
      .ug.ug-3xl-2-0 > * {
        margin: 0px;
        width: 50%;
        flex: 0 1 calc(50% - 0px);
        max-width: calc(50% - 0px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-3-0 {
      margin: 0px; }
      .ug.ug-3xl-3-0 > * {
        margin: 0px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 0px);
        max-width: calc(33.3333333333% - 0px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-4-0 {
      margin: 0px; }
      .ug.ug-3xl-4-0 > * {
        margin: 0px;
        width: 25%;
        flex: 0 1 calc(25% - 0px);
        max-width: calc(25% - 0px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-5-0 {
      margin: 0px; }
      .ug.ug-3xl-5-0 > * {
        margin: 0px;
        width: 20%;
        flex: 0 1 calc(20% - 0px);
        max-width: calc(20% - 0px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-1-15 {
      margin: -15px; }
      .ug.ug-3xl-1-15 > * {
        margin: 15px;
        width: 100%;
        flex: 0 1 calc(100% - 30px);
        max-width: calc(100% - 30px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-2-15 {
      margin: -15px; }
      .ug.ug-3xl-2-15 > * {
        margin: 15px;
        width: 50%;
        flex: 0 1 calc(50% - 30px);
        max-width: calc(50% - 30px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-3-15 {
      margin: -15px; }
      .ug.ug-3xl-3-15 > * {
        margin: 15px;
        width: 33.3333333333%;
        flex: 0 1 calc(33.3333333333% - 30px);
        max-width: calc(33.3333333333% - 30px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-4-15 {
      margin: -15px; }
      .ug.ug-3xl-4-15 > * {
        margin: 15px;
        width: 25%;
        flex: 0 1 calc(25% - 30px);
        max-width: calc(25% - 30px); } }
  @media (min-width: 1900px) {
    .ug.ug-3xl-5-15 {
      margin: -15px; }
      .ug.ug-3xl-5-15 > * {
        margin: 15px;
        width: 20%;
        flex: 0 1 calc(20% - 30px);
        max-width: calc(20% - 30px); } }
  .ug > * {
    float: left; }

/*
 * Fixes the problem that the ug item "collides" with a previous
 * container which causes the ug container to be squeezed at the right corner.
 * TODO: is this a proper solution?
 */
.ug {
  margin-top: 0 !important; }

/*******************************
 * Box
 ******************************/
.ug img {
  align-self: center; }

/*******************************
 * Enumeration (ug-ordered)
 ******************************/
.ug.style-ordered {
  counter-reset: offer-enum; }
  .ug.style-ordered .ug-item {
    counter-increment: offer-enum; }
    .ug.style-ordered .ug-item:before {
      content: counter(offer-enum,decimal-leading-zero);
      color: #00A3DA;
      font-size: 2rem;
      background-color: #f9f9f9;
      width: 4rem;
      height: 4rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%; }

.page-section.style-light .ug.style-ordered .ug-item:before {
  background-color: #fff; }

/*******************************
 * Post Grid
 ******************************/
.post-grid .post {
  display: flex;
  flex-flow: column; }
  .post-grid .post, .post-grid .post:hover, .post-grid .post:active, .post-grid .post:focus {
    color: #4a4a4a;
    text-decoration: none; }
  .post-grid .post .post-details {
    padding: 4rem;
    height: 100%; }
    .post-grid .post .post-details > *:first-child {
      margin-top: 0; }
    .post-grid .post .post-details > *:last-child {
      margin-bottom: 0; }
.post-grid + * {
  margin-top: 20px; }

.page-section.style-default .post-grid .post-details, form input.page-section[type="submit"] .post-grid .post-details, .contact-form input.page-section[type="submit"] .post-grid .post-details, .wpcf7 input.page-section[type="submit"] .post-grid .post-details, .searchform input.page-section[type="submit"] .post-grid .post-details {
  background-color: #f9f9f9; }

.page-section.style-light .post-grid .post-details {
  background-color: #fff; }

.content-box {
  background-color: #fff;
  display: flex;
  position: relative;
  transition: all ease 300ms;
  transition-property: box-shadow, transform; }
  .content-box img {
    align-self: center; }
  .content-box .img-wrap {
    display: block;
    overflow: hidden; }
    .content-box .img-wrap img {
      width: 100%; }
  .content-box .content-wrap {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    color: #4a4a4a;
    padding: 2rem;
    width: 100%;
    height: 100%; }
    .content-box .content-wrap *:first-child {
      margin-top: 0; }
  .content-box .content {
    flex-shrink: 0; }
  .content-box .arrow-link {
    margin-top: auto; }
  .content-box .next-icon {
    margin-left: 20px; }
  .content-box.type-imgtop {
    flex-flow: column; }
    .content-box.type-imgtop .content-wrap {
      flex-grow: 1;
      height: auto;
      align-items: stretch;
      border-top: 2px solid #f9f9f9; }
  .content-box.type-imgleft {
    flex-flow: row;
    align-items: center; }
    .content-box.type-imgleft .img-wrap {
      padding: 1rem; }
    .content-box.type-imgleft .content-wrap {
      border-left: 2px solid #f9f9f9; }

a.content-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 30px -10px #e7e7e7; }

/*******************************
 * Styles
 ******************************/
.content-box.style-dark {
  background-color: #001424; }
  .content-box.style-dark .content-wrap {
    color: #fff; }
  .content-box.style-dark .next-icon {
    display: none; }
  .content-box.style-dark .button, .content-box.style-dark form input[type="submit"], form .content-box.style-dark input[type="submit"], .content-box.style-dark .contact-form input[type="submit"], .contact-form .content-box.style-dark input[type="submit"], .content-box.style-dark .wpcf7 input[type="submit"], .wpcf7 .content-box.style-dark input[type="submit"], .content-box.style-dark .searchform input[type="submit"], .searchform .content-box.style-dark input[type="submit"] {
    background-color: #00A3DA; }
  .content-box.style-dark ul {
    list-style: none; }
    .content-box.style-dark ul li {
      display: flex;
      align-items: center; }
      .content-box.style-dark ul li:before {
        content: "";
        width: .5em;
        height: .5em;
        background-color: #00A3DA;
        margin-right: 10px;
        border-radius: 50%; }
.content-box.style-light {
  background-color: #F6F7F8; }

/*******************************
 * Promotion
 ******************************/
.content-box {
  overflow: hidden; }
  .content-box .promotion {
    border-radius: 0 0 0 22px;
    box-shadow: 0px 3px 0px 0 #22222236;
    align-items: center;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.76);
    display: inline-flex;
    background-color: #76b04c;
    color: #fff;
    padding: 0.5rem 1rem;
    position: absolute;
    top: 0;
    right: 0; }
    .content-box .promotion .promotion-icon {
      margin-right: 0.5rem;
      background-color: #61903e;
      border-radius: 50%;
      height: 26px;
      width: 26px;
      padding: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center; }
      .content-box .promotion .promotion-icon img {
        height: 15px;
        width: 15px; }

.accordion + .accordion {
  margin-top: 15px; }
.accordion .accordion-heading {
  font-weight: bold;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  color: #222222;
  font-size: 1rem; }
  .accordion .accordion-heading:after {
    content: "+";
    font-size: 2rem;
    line-height: 2rem;
    color: #00A3DA;
    display: inline-block;
    float: right;
    min-width: 25px;
    text-align: right;
    font-weight: 400; }
.accordion .accordion-inner {
  padding: 15px;
  display: none; }
  @media (min-width: 992px) {
    .accordion .accordion-inner {
      padding: 30px; } }
  .accordion .accordion-inner:last-of-type {
    position: relative;
    top: -1px; }
.accordion.accordion-open .accordion-heading:after {
  content: "-"; }
.accordion:last-child {
  margin-bottom: 1em; }

.page-section.style-default .accordion, form input.page-section[type="submit"] .accordion, .contact-form input.page-section[type="submit"] .accordion, .wpcf7 input.page-section[type="submit"] .accordion, .searchform input.page-section[type="submit"] .accordion {
  background-color: #F6F7F8; }
  .page-section.style-default .accordion .accordion-heading, form input.page-section[type="submit"] .accordion .accordion-heading, .contact-form input.page-section[type="submit"] .accordion .accordion-heading, .wpcf7 input.page-section[type="submit"] .accordion .accordion-heading, .searchform input.page-section[type="submit"] .accordion .accordion-heading {
    border-bottom: 3px solid #fff; }
.page-section.style-light .accordion {
  background-color: #fff; }
  .page-section.style-light .accordion .accordion-heading {
    border-bottom: 3px solid #f6f7f8; }

.recent-posts {
  background-color: #fff;
  padding: 0.1px;
  border-radius: 3px; }
  .recent-posts.style-overlapping {
    position: relative;
    z-index: 8;
    max-width: 460px;
    margin: auto 0 auto auto; }
    @media (min-width: 768px) {
      .recent-posts.style-overlapping {
        margin-top: -100px; } }
    @media (min-width: 992px) {
      .recent-posts.style-overlapping {
        box-shadow: 0 58px 26px #edf0f2;
        margin-top: -185px; } }
  .recent-posts .heading {
    text-transform: uppercase;
    padding: 0 30px;
    margin: 1.4em 0; }
  .recent-posts .post {
    background-color: #F6F7F8;
    transition: background-color 150ms; }
    .recent-posts .post a {
      padding: 30px;
      display: flex;
      flex-flow: row;
      align-items: center; }
    .recent-posts .post .wp-post-image {
      width: 75px;
      align-self: center;
      margin-right: 20px; }
      @media (min-width: 992px) {
        .recent-posts .post .wp-post-image {
          width: auto; } }
    .recent-posts .post + .post {
      margin-top: 30px; }
    .recent-posts .post:hover {
      background-color: #fbfbfb; }
    .recent-posts .post a {
      color: #4a4a4a; }
      .recent-posts .post a, .recent-posts .post a:focus, .recent-posts .post a:active {
        text-decoration: none; }
      .recent-posts .post a:after {
        display: none; }
      .recent-posts .post a strong {
        color: #222222; }
    .recent-posts .post .post-date {
      display: block;
      color: #9B9B9B; }
    .recent-posts .post p {
      font-weight: normal;
      margin: 0; }

.recent-posts + .button, form .recent-posts + input[type="submit"], .contact-form .recent-posts + input[type="submit"], .wpcf7 .recent-posts + input[type="submit"], .searchform .recent-posts + input[type="submit"] {
  margin-top: 1.5rem;
  display: inline-flex;
  line-height: 1rem; }

/*
 * CSS3 library is now included in wp-module-themeframework.
 * This file still exists for backward compatibility.
 */
/*******************************
 * Contrast color functions
 ******************************/
/**
 * Automatically decides wheter black or white color is needed
 * @obsolete
 */
/**
 * Automatically gets the contrast color
 *
 */
/*******************************
 * Prefixing mixins
 ******************************/
/*******************************
 * Clearfix
 ******************************/
/*
 * If there is no other clearfix
 * class from bootstrap or something
 * available, you can include this.
 */
/*******************************
 * BS Viewports
 ******************************/
/*******************************
 * Additional Viewports
 ******************************/
/*******************************
 * Misc
 ******************************/
/*
 * Triangle factory
 */
/*******************************
 * Sasag Colors
 ******************************/
/*******************************
 * Semantic colors
 ******************************/
/*
 * Body
 */
/* TODO: use a SCSS map */
/*
 * Footer's background-color and color
 */
/*
 * Text
 */
/*
 * Import your styles, which you
 * wish to display in the WYSIQYG
 * editor while editing.
 */
/*******************************
 * Badges
 ******************************/
.highlighted-text {
  background-color: #f9f9f9;
  padding: 0.8rem 1rem;
  display: inline-block;
  border-left: 5px solid #00A3DA; }
  .highlighted-text.style-blue {
    border-left: 5px solid #00A3DA; }
  .highlighted-text.style-green {
    border-left: 5px solid #6baf26; }
  .highlighted-text.style-yellow {
    border-left: 5px solid #fdbb02; }
  .highlighted-text.style-magenta {
    border-left: 5px solid #e20072; }
  .highlighted-text.style-orange {
    border-left: 5px solid #e84e0f; }
  .highlighted-text.style-solid-blue {
    border: none;
    color: #fff;
    background-color: #00A3DA; }
  .highlighted-text.style-solid-green {
    border: none;
    color: #fff;
    background-color: #6baf26; }
  .highlighted-text.style-solid-yellow {
    border: none;
    color: #fff;
    background-color: #fdbb02; }
  .highlighted-text.style-solid-magenta {
    border: none;
    color: #fff;
    background-color: #e20072; }
  .highlighted-text.style-solid-orange {
    border: none;
    color: #fff;
    background-color: #e84e0f; }

.page-section.style-light .highlighted-text.style-blue {
  background-color: #fff; }

/*******************************
 * Badge Slider
 ******************************/
.badge-slider {
  font-weight: bold;
  background-color: rgba(0, 19, 39, 0.29);
  border-radius: 3px;
  padding: 0.5rem 0.9rem;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.76); }

.order-process .step {
  font-size: 16px; }
  .order-process .step h2 {
    font-size: 1.25rem; }
.order-process .root > .order-node + .order-node:not(:last-child) {
  margin-top: 2rem;
  border-top: 2px solid #efefef; }
@keyframes terms-conditions-invalid {
  10%, 90% {
    transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0); }
  40%, 60% {
    transform: translate3d(4px, 0, 0); } }
.order-process .terms-conditions {
  display: flex;
  align-items: center; }
  .order-process .terms-conditions.invalid {
    color: #c53a3a;
    border-left-color: #e1324f;
    animation: terms-conditions-invalid 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
  .order-process .terms-conditions input {
    margin-right: 0.5rem; }
.order-process .alert {
  padding: 0.75rem 1rem;
  border: 2px solid #e4e4e4;
  border-radius: 5px; }

.overview {
  background-color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 75px;
  display: flex;
  z-index: 10;
  align-items: center;
  border-bottom: 2px solid #efefef;
  border-top: 2px solid #efefef; }
  .overview .container {
    height: 100%; }
    @media (max-width: 767px) {
      .overview .container {
        width: 100%; } }
  .overview .steps-controls {
    padding: 15px 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%; }
    .overview .steps-controls .button, .overview .steps-controls form input[type="submit"], form .overview .steps-controls input[type="submit"], .overview .steps-controls .contact-form input[type="submit"], .contact-form .overview .steps-controls input[type="submit"], .overview .steps-controls .wpcf7 input[type="submit"], .wpcf7 .overview .steps-controls input[type="submit"], .overview .steps-controls .searchform input[type="submit"], .searchform .overview .steps-controls input[type="submit"] {
      line-height: 0.6rem; }
    .overview .steps-controls > .total {
      padding: 0 1rem; }
    .overview .steps-controls .total {
      display: flex;
      flex-flow: column;
      font-size: 1rem;
      width: 100%; }
      @media (min-width: 992px) {
        .overview .steps-controls .total {
          flex-flow: row; } }
  .overview .total {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #001E55; }
  .overview.sticky {
    box-shadow: -4px 0 50px rgba(0, 0, 0, 0.09);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0; }

.steps .steps-nav-wrap {
  background-color: #fff;
  border-bottom: 2px solid #efefef;
  border-top: 2px solid #efefef; }
.steps .steps-nav {
  display: flex;
  justify-content: space-between;
  flex-flow: column; }
  @media (min-width: 992px) {
    .steps .steps-nav {
      flex-flow: row; } }
  .steps .steps-nav > * {
    display: flex;
    align-items: center;
    background-color: #fff;
    width: 100%;
    padding: 1rem;
    border-left: 2px solid #efefef;
    border-right: 2px solid #efefef;
    border-bottom: 2px solid #efefef; }
    @media (min-width: 992px) {
      .steps .steps-nav > * {
        border-bottom: none;
        border-right: none; }
        .steps .steps-nav > *:last-child {
          border-right: 2px solid #efefef;
          border-right: 2px solid #efefef; } }
    .steps .steps-nav > *:last-child {
      margin-right: 0;
      border-right: 2px solid #efefef;
      border-bottom: none; }
    .steps .steps-nav > *.active {
      background-color: #fbfbfb;
      color: #4a4a4a; }
      .steps .steps-nav > *.active .arrow:after {
        content: "";
        background-image: url("../../res/icons/right-arrow.svg");
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        margin-left: 15px;
        height: 20px;
        width: 24px;
        transition: transform ease 400ms; }
      .steps .steps-nav > *.active.active {
        color: #4a4a4a; }
    .steps .steps-nav > *.past {
      color: green; }
      .steps .steps-nav > *.past .step-label {
        margin-left: 0.8rem; }
    .steps .steps-nav > *.future {
      color: #919191; }
.steps .step {
  margin: 3rem auto; }
.steps .steps-controls-wrap {
  background-color: #fff;
  border-top: 2px solid #efefef;
  border-bottom: 2px solid #efefef;
  margin-bottom: 3rem; }

/*******************************
 * Offer Box
 ******************************/
.offer-box {
  box-shadow: 0 0 10px rgba(165, 165, 165, 0.43); }
  .offer-box .chosen-mark {
    position: absolute;
    margin: 0.5rem;
    background-color: #fff;
    color: #fff;
    border-radius: 50%;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    box-shadow: -4px 0 50px rgba(0, 0, 0, 0.26); }
  .offer-box .promo-badge {
    margin-right: 1rem;
    margin-left: -1rem;
    background-color: #8bbd3c;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    box-shadow: -4px 0 50px rgba(0, 0, 0, 0.09);
    border: 3px solid #fff; }
    .offer-box .promo-badge svg {
      transform: scale(1.3); }

/*******************************
 * Sticky
 ******************************/
@media screen {
  .js-sticky {
    position: static;
    top: auto; } }
  @media screen and (min-width: 992px) {
    .js-sticky.sticky-now {
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.09);
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      z-index: 100; } }

@media screen {
  .admin-bar .sticky-now {
    top: 32px; } }
/*******************************
 * Window
 ******************************/
.window-wrap {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center; }

.window {
  background-color: #fff;
  padding: 30px; }

/*******************************
 * Forms
 ******************************/
.opro-form .field {
  margin: 5px 0;
  display: flex;
  flex-flow: column; }
  .opro-form .field label {
    width: 50%; }
  @media (min-width: 768px) {
    .opro-form .field {
      flex-flow: row; } }
.opro-form .radio-wrap {
  width: 100%; }
  .opro-form .radio-wrap label {
    width: auto; }

/*******************************
 * Order Details
 ******************************/
.order-details {
  background-color: #fff;
  box-shadow: 0 25px 30px -10px #e7e7e7; }
  .order-details.style-sticky {
    max-height: calc(100vh - 230px);
    display: flex;
    flex-direction: column; }
    .order-details.style-sticky .products-section {
      overflow-y: scroll; }
  .order-details .details-section {
    padding: 1.25rem; }
    .order-details .details-section + .details-section {
      border-top: 2px solid #f9f9f9; }
  .order-details .instead-price {
    justify-content: flex-end; }
  .order-details .heading-section h1, .order-details .heading-section h2, .order-details .heading-section h3 {
    margin: 0; }
  .order-details .products-section .product-list {
    margin: 0;
    padding: 0; }
    .order-details .products-section .product-list > li {
      list-style: none; }
  .order-details .products-section .product {
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 1rem; }
    .order-details .products-section .product + .product {
      margin-top: 0.5rem; }
    .order-details .products-section .product .item {
      align-items: center; }
    .order-details .products-section .product .option-list:not(:empty) {
      border-top: 2px solid #efefef;
      padding-top: 1rem;
      margin-top: 1rem; }
  .order-details .products-section .option-list > li {
    list-style: initial; }
  .order-details .products-section .item {
    display: flex;
    justify-content: space-between; }
    .order-details .products-section .item .product-label .group-part {
      font-weight: bold; }
  .order-details .total-section .total {
    display: flex;
    justify-content: space-between; }

.order-details-wrap {
  position: absolute;
  top: -2px;
  right: 0;
  transform: translateY(-100%); }
  .order-details-wrap .order-details {
    box-shadow: 0px -20px 30px -10px #e7e7e7; }

/*******************************
 * Option Configurator
 ******************************/
.option-configurator .node-group {
  background-color: #fff;
  margin: 1rem 0; }
  .option-configurator .node-group .group-title {
    border-bottom: 2px solid #efefef;
    padding: 0.5rem 1rem;
    font-weight: bold; }
.option-configurator .option {
  background-color: #fff;
  display: flex;
  flex-flow: column; }
  .option-configurator .option:not(.locked) .toggle-handle:hover .chosen-mark {
    border-color: #00A3DA; }
  .option-configurator .option:not(.locked) .toggle-handle:active .chosen-mark {
    background-color: #efefef; }
  .option-configurator .option .option-heading {
    justify-content: space-between;
    display: flex;
    border-bottom: 2px solid #eaeaea; }
    .option-configurator .option .option-heading .toggle-handle {
      cursor: pointer;
      display: flex;
      align-items: stretch;
      width: 100%; }
      .option-configurator .option .option-heading .toggle-handle > * {
        display: flex;
        align-items: center; }
    .option-configurator .option .option-heading > * {
      display: flex;
      align-items: center; }
    .option-configurator .option .option-heading .checkbox-wrap {
      padding: 0.75rem 0.75rem; }
    .option-configurator .option .option-heading .price-wrap {
      border-left: 2px solid #eaeaea;
      padding: 0.5rem;
      width: 40%; }
  .option-configurator .option .option-details {
    display: flex;
    background-color: #fcfcfc;
    border-bottom: 2px solid #f9f9f9; }
    .option-configurator .option .option-details .option-description {
      padding: 0 1rem; }
      .option-configurator .option .option-details .option-description, .option-configurator .option .option-details .option-description p {
        font-size: 0.8rem; }
  .option-configurator .option .option-label {
    width: 100%; }
  .option-configurator .option .option-price {
    flex-shrink: 0; }
  .option-configurator .option .chosen-mark {
    width: 26px;
    height: 26px;
    background-color: #fff;
    color: #fff;
    border-radius: 6px;
    border: 3px solid #efefef;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 0; }
    .option-configurator .option .chosen-mark svg {
      transition: all ease-in-out 200ms;
      opacity: 0;
      transform: scale(1.5);
      max-width: 16px; }
  .option-configurator .option.locked .chosen-mark {
    border-color: #e0e0e0;
    background-color: #fbfcfb; }
    .option-configurator .option.locked .chosen-mark svg path, .option-configurator .option.locked .chosen-mark svg polygon {
      fill: #e0e0e0; }
  .option-configurator .option.selected .chosen-mark svg {
    transform: scale(1);
    opacity: 1; }
  .option-configurator .option.locked {
    background-color: #fbfbfb;
    color: #b5b5b5;
    cursor: not-allowed; }
  .option-configurator .option .price {
    display: flex;
    flex-flow: column;
    font-size: 0.8rem;
    line-height: 0.9rem; }
  .option-configurator .option .toggle-details {
    border-left: 2px solid #eaeaea;
    user-select: none;
    width: 3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    .option-configurator .option .toggle-details svg {
      width: 15px; }
      .option-configurator .option .toggle-details svg path, .option-configurator .option .toggle-details svg polygon {
        fill: #757575; }
    .option-configurator .option .toggle-details:hover {
      background-color: #fcfcfc; }
    .option-configurator .option .toggle-details:active {
      background-color: #fbfbfb; }
    .option-configurator .option .toggle-details .toggle-indicator {
      transition: transform ease 200ms; }
    .option-configurator .option .toggle-details.toggled .toggle-indicator {
      transform: rotate(180deg); }
  .option-configurator .option .toggle-details-placeholder {
    flex-shrink: 0;
    width: 3rem; }

/*******************************
 * Imageradio
  ******************************/
.imageradio .item {
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px; }
  .imageradio .item .label {
    margin: 0.5rem 0 0.3rem 0; }
  .imageradio .item:hover:not(.active) {
    background-color: #f9f9f9; }
.imageradio .active {
  background-color: #00A3DA;
  color: #fff; }

.userdata-panel {
  border: 2px solid #efefef;
  padding: 1rem;
  background-color: #fff; }
  .userdata-panel + .userdata-panel {
    margin-top: 1rem; }
  .userdata-panel input[type="text"], .userdata-panel textarea, .userdata-panel input[type="email"] {
    border: 2px solid #efefef; }
  .userdata-panel > *:first-child {
    margin-top: 0; }
  .userdata-panel > *:last-child {
    margin-bottom: 0; }

.plug-chooser .invalid {
  color: #e1324f; }

/*******************************
 * Product Configurator
 ******************************/
.product-configurator .group-title {
  font-weight: bold;
  font-size: 1.5rem; }
.product-configurator .option-group {
  display: none; }
.product-configurator .node-group {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 0.1px; }
  .product-configurator .node-group:not(:first-child) {
    margin-top: 2rem; }
  .product-configurator .node-group .product-group {
    padding: 2rem;
    border-bottom: 2px solid #efefef; }
    .product-configurator .node-group .product-group *:first-child {
      margin-top: 0; }
    .product-configurator .node-group .product-group *:last-child {
      margin-bottom: 0; }
  .product-configurator .node-group .product-group + .node-children {
    padding: 2rem; }
.product-configurator .product-wrap, .product-configurator .node-product {
  display: flex;
  width: 100%; }

/*******************************
 * Optionsconfigurator
 ******************************/
.option-configurator .invalid {
  color: #e1324f; }
.option-configurator .option-group .group-description {
  padding: 1rem;
  border-bottom: 2px solid #f9f9f9; }

/*******************************
 * DatePicker
 ******************************/
.vdp-datepicker {
  width: calc(100% + 18px); }

.vdp-datepicker__calendar {
  border: none !important;
  box-shadow: 0 0 2rem rgba(154, 154, 154, 0.3); }

.vdp-datepicker__calendar .cell {
  border-width: 2px !important; }
  .vdp-datepicker__calendar .cell:hover {
    background-color: #f3f3f3;
    border-color: transparent !important; }

.vdp-datepicker__calendar .cell.selected {
  background-color: #00A3DA !important;
  color: #fff; }

/*******************************
 * Price Display
 ******************************/
.instead-price {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; }
  .instead-price .tooltip-wrap {
    margin-left: 0.5rem;
    flex-shrink: 0; }
    .instead-price .tooltip-wrap > *, .instead-price .tooltip-wrap .trigger, .instead-price .tooltip-wrap .tooltip-target {
      display: flex;
      align-items: center;
      justify-content: center; }

/*******************************
 * Group Active Style Colors
 ******************************/
.product-group.style-magenta + .node-children .offer-box.active .heading {
  background-color: #e20072;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.42); }
.product-group.style-magenta + .node-children .offer-box.active .marketing-text {
  color: #e20072;
  font-weight: bold; }
.product-group.style-green + .node-children .offer-box.active .heading {
  background-color: #6baf26;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.42); }
.product-group.style-green + .node-children .offer-box.active .marketing-text {
  color: #6baf26;
  font-weight: bold; }
.product-group.style-yellow + .node-children .offer-box.active .heading {
  background-color: #fdbb02;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.42); }
.product-group.style-yellow + .node-children .offer-box.active .marketing-text {
  color: #fdbb02;
  font-weight: bold; }
.product-group.style-orange + .node-children .offer-box.active .heading {
  background-color: #e84e0f;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.42); }
.product-group.style-orange + .node-children .offer-box.active .marketing-text {
  color: #e84e0f;
  font-weight: bold; }

/*******************************
 * Opt out control
 ******************************/
.opt-out-control {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem; }
  .opt-out-control input[type="checkbox"] {
    margin-right: 0.5rem; }

.offer-box {
  background-color: #fff;
  display: flex;
  flex-flow: column;
  transition: all ease 300ms;
  position: relative;
  border-radius: 5px 5px 0 0;
  width: 100%; }
  .offer-box, .offer-box:hover, .offer-box:active, .offer-box:focus {
    color: #4a4a4a; }
  @media (min-width: 992px) {
    .offer-box.active:not(.in-orderprocess) {
      box-shadow: 0 25px 30px -10px #e7e7e7;
      transform: translateY(-10px); } }
  .offer-box.active .heading {
    background-color: #00A3DA; }
  .offer-box .heading {
    border-radius: 5px 5px 0 0;
    background-color: #001424;
    transition: background-color ease 300ms;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    padding: 1.2rem;
    font-weight: bold; }
  .offer-box .price {
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    flex-flow: column;
    padding: 1rem;
    flex-shrink: 0; }
    .offer-box .price .actual-price {
      width: 100%;
      font-size: 1.5rem; }
  .offer-box .marketing-text {
    border-top: 2px solid #efefef;
    padding: 0.5rem 2rem;
    text-align: center; }
  .offer-box .description {
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    flex-grow: 1;
    border-top: 2px solid #efefef; }
    @media (min-width: 992px) {
      .offer-box .description {
        background-color: #F8FCFE;
        border-top: none; } }
    .offer-box .description ul {
      display: inline-block;
      text-align: left; }
    .offer-box .description p + ul {
      margin-top: 0; }
  .offer-box .arrow-marker {
    margin: auto 0 0 0;
    display: inline-flex;
    padding: 1.4rem; }

a.offer-box {
  cursor: pointer; }
  a.offer-box:hover {
    box-shadow: 0 25px 30px -10px #2d2d2d26; }
  a.offer-box.style-magenta:hover .heading {
    background-color: #e20072;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.42); }
  a.offer-box.style-magenta:hover .marketing-text {
    color: #e20072;
    font-weight: bold; }
  a.offer-box.style-green:hover .heading {
    background-color: #6baf26;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.42); }
  a.offer-box.style-green:hover .marketing-text {
    color: #6baf26;
    font-weight: bold; }
  a.offer-box.style-yellow:hover .heading {
    background-color: #fdbb02;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.42); }
  a.offer-box.style-yellow:hover .marketing-text {
    color: #fdbb02;
    font-weight: bold; }
  a.offer-box.style-orange:hover .heading {
    background-color: #e84e0f;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.42); }
  a.offer-box.style-orange:hover .marketing-text {
    color: #e84e0f;
    font-weight: bold; }

.offer-box.in-orderprocess {
  cursor: pointer; }
  .offer-box.in-orderprocess .description {
    display: none;
    flex-flow: column; }
    @media (min-width: 992px) {
      .offer-box.in-orderprocess .description {
        display: flex; } }
    .offer-box.in-orderprocess .description.toggled {
      display: block; }
    .offer-box.in-orderprocess .description > *:first-child {
      margin-top: 0; }
    .offer-box.in-orderprocess .description > *:last-child {
      margin-bottom: 0; }
    .offer-box.in-orderprocess .description .v-popover {
      margin-top: auto; }
    .offer-box.in-orderprocess .description .tooltip-target {
      display: flex;
      align-items: center;
      background-color: #eaf5fb;
      border-radius: 5px;
      padding: 0.25rem 0.5rem; }
      .offer-box.in-orderprocess .description .tooltip-target svg {
        margin-left: 0.5rem; }
  .offer-box.in-orderprocess .details-toggle {
    border-top: 2px solid #efefef;
    padding: 0.5rem 1rem;
    text-align: center; }
    @media (min-width: 992px) {
      .offer-box.in-orderprocess .details-toggle {
        display: none; } }
    .offer-box.in-orderprocess .details-toggle.toggled {
      display: block; }
      .offer-box.in-orderprocess .details-toggle.toggled .toggle-indicator {
        transform: rotate(180deg); }
    .offer-box.in-orderprocess .details-toggle .toggle-indicator {
      transition: transform ease 200ms;
      margin-right: 0.5rem; }

@keyframes popup {
  0% {
    opacity: 0;
    transform: scale(0.95); }
  100% {
    opacity: 1;
    transform: scale(1); } }
.popup-wrap {
  text-align: left;
  cursor: default;
  display: none;
  background-color: rgba(0, 0, 0, 0.85);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  z-index: 150;
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important; }
  .popup-wrap.popup-orderprocess {
    display: flex; }
  .popup-wrap.popup-unseen {
    display: flex; }

.popup {
  animation: popup ease 500ms;
  background-color: #fff;
  margin: 1rem;
  max-width: 100vw;
  max-height: calc(100vh - 2rem);
  overflow-y: scroll;
  white-space: normal; }
  @media (min-width: 992px) {
    .popup {
      max-width: 40vw; } }
  .popup .popup-header {
    border-bottom: 2px solid #efefef;
    padding: 0 1rem; }
  .popup .popup-inner {
    padding: 0 1rem; }
  .popup .popup-footer {
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 2px solid #efefef; }
    .popup .popup-footer .button, .popup .popup-footer form input[type="submit"], form .popup .popup-footer input[type="submit"], .popup .popup-footer .contact-form input[type="submit"], .contact-form .popup .popup-footer input[type="submit"], .popup .popup-footer .wpcf7 input[type="submit"], .wpcf7 .popup .popup-footer input[type="submit"], .popup .popup-footer .searchform input[type="submit"], .searchform .popup .popup-footer input[type="submit"] {
      margin: 0.25rem;
      line-height: 1rem;
      white-space: pre-wrap; }

.button.loading, form input.loading[type="submit"], .contact-form input.loading[type="submit"], .wpcf7 input.loading[type="submit"], .searchform input.loading[type="submit"] {
  color: transparent;
  animation-play-state: running;
  opacity: 1;
  position: relative; }
@keyframes spinner {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg); }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg); } }
  .button.loading.-paused, form input.loading.-paused[type="submit"], .contact-form input.loading.-paused[type="submit"], .wpcf7 input.loading.-paused[type="submit"], .searchform input.loading.-paused[type="submit"] {
    animation-play-state: paused;
    opacity: 0.2;
    transition: opacity linear 0.1s; }
  .button.loading::before, form input.loading[type="submit"]::before, .contact-form input.loading[type="submit"]::before, .wpcf7 input.loading[type="submit"]::before, .searchform input.loading[type="submit"]::before {
    animation: 0.8s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 4px #fff;
    border-bottom-color: #00A3DA;
    border-radius: 50%;
    content: "";
    height: 30px;
    left: 50%;
    opacity: inherit;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 30px;
    will-change: transform; }

.spinner {
  animation-play-state: running;
  opacity: 1;
  position: relative; }
@keyframes spinner {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg); }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg); } }
  .spinner.-paused {
    animation-play-state: paused;
    opacity: 0.2;
    transition: opacity linear 0.1s; }
  .spinner::before {
    animation: 0.8s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 4px #fff;
    border-bottom-color: #00A3DA;
    border-radius: 50%;
    content: "";
    height: 30px;
    left: 50%;
    opacity: inherit;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 30px;
    will-change: transform; }

@keyframes gdpr-notice-reveal {
  0% {
    transform: translateY(100%); }
  100% {
    transform: translateY(0); } }
.gdpr.sticky-notice {
  z-index: 15;
  display: none;
  background-color: #fff;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.12);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: space-between;
  flex-flow: column;
  padding: 15px; }
  @media (max-width: 571px) {
    .gdpr.sticky-notice .button, .gdpr.sticky-notice form input[type="submit"], form .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .contact-form input[type="submit"], .contact-form .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .wpcf7 input[type="submit"], .wpcf7 .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .searchform input[type="submit"], .searchform .gdpr.sticky-notice input[type="submit"] {
      margin-top: 15px;
      width: 100%;
      text-align: center;
      margin-left: 0; } }
  @media (min-width: 572px) {
    .gdpr.sticky-notice {
      padding: 20px 25px;
      flex-flow: row; }
      .gdpr.sticky-notice .button, .gdpr.sticky-notice form input[type="submit"], form .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .contact-form input[type="submit"], .contact-form .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .wpcf7 input[type="submit"], .wpcf7 .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .searchform input[type="submit"], .searchform .gdpr.sticky-notice input[type="submit"] {
        margin-left: 20px; } }
  .gdpr.sticky-notice .button, .gdpr.sticky-notice form input[type="submit"], form .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .contact-form input[type="submit"], .contact-form .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .wpcf7 input[type="submit"], .wpcf7 .gdpr.sticky-notice input[type="submit"], .gdpr.sticky-notice .searchform input[type="submit"], .searchform .gdpr.sticky-notice input[type="submit"] {
    padding: 9px 20px;
    cursor: pointer;
    line-height: 1.4rem; }
  .gdpr.sticky-notice p {
    margin: 0; }
  .gdpr.sticky-notice.not-seen {
    display: flex;
    animation: gdpr-notice-reveal ease 800ms forwards; }

.tooltip {
  display: block !important;
  z-index: 10000;
  max-width: 400px; }
  .tooltip .close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 25px;
    height: 25px;
    padding: 1px 5px;
    cursor: pointer;
    border-radius: 50%; }
    .tooltip .close-button:hover {
      background-color: #545454; }
  .tooltip .tooltip-inner {
    background: black;
    color: white;
    border-radius: 8px;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    font-size: 0.9rem; }
    .tooltip .tooltip-inner .content > *:first-child {
      padding-top: 0;
      margin-top: 0; }
    .tooltip .tooltip-inner .content > *:last-child {
      padding-bottom: 0;
      margin-bottom: 0; }
  .tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: black; }
  .tooltip[x-placement^="top"] {
    margin-bottom: 5px; }
    .tooltip[x-placement^="top"] .tooltip-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0; }
  .tooltip[x-placement^="bottom"] {
    margin-top: 5px; }
    .tooltip[x-placement^="bottom"] .tooltip-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0; }
  .tooltip[x-placement^="right"] {
    margin-left: 5px; }
    .tooltip[x-placement^="right"] .tooltip-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0; }
  .tooltip[x-placement^="left"] {
    margin-right: 5px; }
    .tooltip[x-placement^="left"] .tooltip-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0; }
  .tooltip[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s; }
  .tooltip[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s; }

#avmwiki .product-listing {
  display: flex;
  margin: -0.5rem;
  flex-wrap: wrap; }
  #avmwiki .product-listing .product-group {
    margin: 0.5rem;
    padding: 3rem;
    background-color: #f9f9f9; }
    #avmwiki .product-listing .product-group > *:first-child {
      margin-top: 0; }
    #avmwiki .product-listing .product-group > *:last-child {
      margin-bottom: 0; }
    #avmwiki .product-listing .product-group ul {
      padding: 0;
      list-style: none; }
#avmwiki .kb-item {
  color: #222222;
  background-color: #f9f9f9;
  padding: 1.25rem;
  margin: 0.5rem; }
  #avmwiki .kb-item > *:first-child {
    margin-top: 0; }
  #avmwiki .kb-item > *:last-child {
    margin-bottom: 0; }
  #avmwiki .kb-item h1, #avmwiki .kb-item h2, #avmwiki .kb-item h3, #avmwiki .kb-item p {
    margin: 0; }
  #avmwiki .kb-item:hover {
    background-color: #fbfbfb; }
#avmwiki .kb-list {
  margin: -0.5rem; }
#avmwiki .no-entries-message {
  background-color: #f9f9f9;
  color: #9a9898;
  padding: 1rem 1.5rem; }
  #avmwiki .no-entries-message > * {
    margin: 0; }
#avmwiki .pagination-wrap {
  margin-top: 2rem; }
#avmwiki .back-link {
  cursor: pointer;
  color: #4a4a4a;
  font-size: 1.25rem;
  display: flex;
  align-items: center; }
  #avmwiki .back-link:before {
    content: "";
    background-image: url("../../res/icons/left-arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right: 0.75rem;
    height: 20px;
    width: 23px;
    transition: transform ease 400ms; }
#avmwiki ul.pagination {
  overflow-y: scroll;
  display: flex;
  margin: -0.5rem -0.25rem;
  padding: 0; }
  #avmwiki ul.pagination li {
    user-select: none;
    list-style: none;
    margin: 0.5rem 0.25rem; }
    #avmwiki ul.pagination li a {
      color: #4a4a4a;
      cursor: pointer;
      padding: 0.5rem 1rem;
      border: 2px solid #efefef; }
    #avmwiki ul.pagination li:active:not(.active) a {
      background-color: #f9f9f9; }
    #avmwiki ul.pagination li.active a {
      background-color: #00A3DA;
      border-color: #00A3DA;
      color: #ffffff;
      font-weight: bold; }
    #avmwiki ul.pagination li.disabled a {
      color: #6f6f6f;
      background-color: #f9f9f9; }
#avmwiki .search-row {
  margin: 2rem 0; }
  #avmwiki .search-row .filter {
    display: flex;
    flex-flow: column;
    justify-content: stretch;
    margin: -0.25rem; }
    @media (min-width: 768px) {
      #avmwiki .search-row .filter {
        flex-flow: row; } }
    #avmwiki .search-row .filter > * {
      margin: 0.25rem; }
  #avmwiki .search-row input {
    border: 2px solid #efefef;
    padding: 0.75rem 1.5rem; }
  #avmwiki .search-row select, #avmwiki .search-row .button, #avmwiki .search-row form input[type="submit"], form #avmwiki .search-row input[type="submit"], #avmwiki .search-row .contact-form input[type="submit"], .contact-form #avmwiki .search-row input[type="submit"], #avmwiki .search-row .wpcf7 input[type="submit"], .wpcf7 #avmwiki .search-row input[type="submit"], #avmwiki .search-row .searchform input[type="submit"], .searchform #avmwiki .search-row input[type="submit"], #avmwiki .search-row input[type="submit"] {
    flex-grow: 0;
    line-height: 1.3rem;
    display: inline-flex;
    align-items: center; }
  #avmwiki .search-row select {
    background-color: #ffffff;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0.75rem 1.5rem;
    padding-right: 2.5rem;
    border: 2px solid #efefef;
    background-image: url("../../res/icons/triangle-down.svg ");
    background-position: right 1rem center;
    background-repeat: no-repeat; }

.kb-single {
  max-width: 800px; }
  .kb-single .tip {
    background-color: #f7f7f7f7;
    padding: 1rem; }
    .kb-single .tip .offscreen {
      margin-right: 1rem;
      font-weight: bold; }
  .kb-single .image-wrapper .subtitle {
    font-size: 0.8rem;
    font-style: italic; }

/*******************************
 * From AVM
 ******************************/
/* Sektionen */
#avmwiki .section {
  margin-bottom: 40px; }

#avmwiki .section.titel {
  margin-bottom: 20px; }

#avmwiki .section.voraussetzungen {
  margin-top: -20px; }

#avmwiki .section.verwendung {
  margin-top: -30px; }

#avmwiki .section.loesung,
#avmwiki .section.intern,
#avmwiki .section.titel + .section.intern {
  padding-left: 20px; }

#avmwiki .section:last-child {
  margin-bottom: 0; }

#avmwiki .section.titel + .section.loesung {
  padding-left: 0; }

/* Module */
#avmwiki .module {
  margin-bottom: 10px; }

#avmwiki .module:last-child {
  margin-bottom: 0; }

#avmwiki .module.description {
  display: none; }

#avmwiki .loesung div.handlungsaufforderung:first-child {
  margin-top: -6px; }

/* Headlines */
#avmwiki h2 {
  margin: 0 0 10px -20px; }

#avmwiki h3 {
  margin: 20px 0 10px; }

#avmwiki h4 {
  margin: 12px 0 8px; }

#avmwiki p + h3,
#avmwiki ol + h3,
#avmwiki ul + h3,
#avmwiki .handlungsaufforderung + h3,
#avmwiki .antwort + h3,
#avmwiki .resultat_2 + h3,
#avmwiki .image-wrapper + h3 {
  margin-top: 20px; }

/* Paragraphen */
#avmwiki p {
  line-height: 1.4;
  margin: 0 0 10px; }

#avmwiki p:last-child {
  margin-bottom: 0; }

#avmwiki ol + p,
#avmwiki ul + p {
  margin-top: 10px !important; }

/* Hinweise */
#avmwiki .tip,
#avmwiki .important,
#avmwiki .attention,
#avmwiki .example {
  background-color: #f2f2f2;
  border-radius: 5px;
  margin: -5px 0px 10px 20px;
  padding: 15px; }

#avmwiki li p.tip,
#avmwiki li p.important,
#avmwiki li p.attention,
#avmwiki li p.example {
  margin-left: 0;
  margin-top: 5px;
  min-height: 55px; }

/* Listen */
#avmwiki ol,
#avmwiki ul {
  line-height: 1.4;
  list-style-position: outside;
  margin: 0;
  padding-left: 30px; }

#avmwiki ol + ol,
#avmwiki ol + ul,
#avmwiki ul + ul,
#avmwiki ul + ol {
  margin-top: 10px; }

#avmwiki .bullet {
  list-style-image: none;
  list-style-type: disc; }

#avmwiki .circle {
  list-style-image: none;
  list-style-type: circle; }

#avmwiki ol ol {
  list-style-type: lower-alpha;
  padding-left: 20px; }

#avmwiki ul.noList {
  list-style-image: none !important;
  list-style-type: none !important;
  margin-left: 10px;
  padding-left: 0px; }

#avmwiki ul.noList ul.noList {
  margin-left: 10px; }

#avmwiki ul.noList ul ul.noList,
#avmwiki ul.noList ol ul.noList,
#avmwiki li ul.noList {
  margin-left: 0px; }

#avmwiki ol ol,
#avmwiki ol ul,
#avmwiki ul ul,
#avmwiki ul ol {
  margin-bottom: 15px; }

#avmwiki li {
  margin-bottom: 10px; }

#avmwiki li ol,
#avmwiki li ul {
  margin-top: 10px; }

#avmwiki li:last-child {
  margin-bottom: 0; }

/* Abbildungen + Videos */
#avmwiki p img,
#avmwiki li img {
  vertical-align: unset; }

#avmwiki .image-wrapper {
  margin-bottom: 15px; }

#avmwiki li .image-wrapper {
  margin-bottom: 5px;
  padding-top: 5px; }

#avmwiki .image-wrapper img {
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  margin-bottom: -5px;
  max-width: 100%;
  padding: 3px;
  vertical-align: middle; }

#avmwiki .yt-wrapper {
  padding: 25px 0 53.75%;
  position: relative;
  height: 0; }

#avmwiki .yt-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

#avmwiki .image-wrapper p.subtitle,
#avmwiki .video p.subtitle {
  font-size: 12px;
  margin: 0;
  padding: 7px 0 0; }

/* Tabellen */
#avmwiki table {
  border-collapse: collapse;
  margin: 10px 0 10px 1px; }

#avmwiki li table {
  font-size: 16px; }

#avmwiki th,
#avmwiki td {
  border: 1px solid #C7C7C7; }

#avmwiki th {
  background-color: #F2F2F2;
  color: #555555;
  font-weight: 700;
  padding: 10px; }

#avmwiki td {
  color: #3F3F3F;
  padding: 5px 10px; }

#avmwiki tfoot tr td {
  border: none;
  font-size: 12px;
  padding: 3px 0 0; }

/* Spezialelemente */
#avmwiki .input {
  font-family: monospace, serif;
  text-align: left;
  font-size: 16px;
  color: black; }

#avmwiki .application {
  color: #999; }

#avmwiki .key {
  background-color: #EFEFEF;
  border: 1px solid #666666;
  color: #161616;
  font-family: monospace, serif;
  font-size: 15px;
  font-style: normal;
  font-weight: bold;
  line-height: 20px;
  margin: 0 2px;
  padding: 1px 5px 0 5px; }

img {
  max-width: 100%; }

.browser-happy-overlay {
  background-color: #444444;
  color: #ffffff;
  font-size: 20px;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1001; }

.wrapper-center {
  margin: 0 auto;
  width: 100%;
  max-width: 1170px; }

.wrapper-inline-block {
  display: inline-block; }

/*# sourceMappingURL=main.css.map */