@charset 'UTF-8';
/* --------------------------------------------------------

    Author:     click solutions GmbH  
                Michael Schultze
  
    Project:    www.wings.hs-wismar.de

   -------------------------------------------
    TABLE OF CONTENT :: STYLE SECTIONS
    
    GENERAL
      Typography
      Icons
      Colors
      Backgrounds

    OBJECTS (override defaults)
      Accordion
      Buttons
      Inputs
      Listing
      Panel
      Teaser-Grid  [new]
    
    COMPONENTS (override default molecules)
      Banner
      Navigation
        Navigation general styles
        Navigation Icons
        Navigation Offcanvas Submenu
        Navigation Dropdown
      Breadcrumb
      Appendix Link
      Social
      Social Share
      Subscribe
      Quicksearch
      Search Results
      News
      Person
      Contact
      Teaser  [new]
      Map  [new]
      Text Shortened  [new]
      Form
      Table
      Gallery in text
  
    LAYOUT (unique organisms)  [new]
      Page wrapper
      Topbar
      Logo  in Topbar
      Off-Canvas converts to Topbar
      Meta-Navigation  in Offcanvas/Topbar
      Quicksearch  in Offcanvas/Topbar
      Main-Navigation  in Offcanvas/Topbar
      Main-Navigation Dropdown in Topbar
      Layout fixed Topbar
      Layout banner & content
      Layout footer
    
    UTILITIES
      Helper
    
   ------------------------------------------- */



/* ========================================================
    Typography
=========================================================== */

  /* hosted web font loaded from google */
  .webfont {
    /* Fira Sans */
    font-family: "Fira Sans";
    font-weight: 400;
    font-weight: 500;
  }

  html {
    font-size: 100%; 
    color: #3c3c3c;
    overflow-x: hidden; /* prevent horizontal scrollbars from IE */
  }
  @media only screen and (min-width: 100em) {
    html {
      font-size: 112.5%;
    } 
  }
  @media only screen and (min-width: 119em) {
    html {
      font-size: 125%;
    } 
  }

  body {
    font: 400 normal 100%/1 'Fira Sans', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    /*-webkit-font-smoothing: subpixel-antialiased;*/
    color: #3c3c3c;
  }
    
    /* Fallback font - Adjust font-size, lien-height, letter-spacing to avoid jumpiness */
    /*.wf-inactive body,
    .mti-inactive body {
      font: 100 normal 100%/.93 Avenir, Corbel, sans-serif; }*/


  h1, .as-h1 {
    font-size: 2.8125rem;
    /*line-height: 1.17;*/
    margin: 0 0 1.618rem;
    font-weight: 400;
    color: #003366;

    /*-ms-word-break: break-all;*/
    /*word-break: break-all;*/
    word-break: break-word; /* Non standard for webkit */

    -webkit-hyphens: auto; /* Safari */
        -ms-hyphens: auto; /* IE9+ */
            -moz-hyphens: auto;
         hyphens: auto; /* Not supported on Chrome, Opera and Android Browser */
  }
  h1 + h2,
  h1 + .as-h2,
  .as-h1 + h2,
  .as-h1 + .as-h2 {
    margin-top: -1.618rem;
  }

  h2, .as-h2 {
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0 0 1.618rem;
    font-weight: 400;
    color: #003366;
  }

  h3, .as-h3 {
    font-size: 1.25rem;
    /*line-height: 1.19em;*/
    margin: 1em 0 .3em;
    font-weight: 500;
    color: #003366;
  }

  h4, .as-h4 {
    font-size: 1rem;
    /*line-height: 1.294em;*/
    margin: 1.5em 0 1em;
    font-weight: 500;
    color: #003366;
  }

  h5, .as-h5 {
    font-size: 1rem;
    /*line-height: 1.294em;*/
    /*margin: 1.5em 0;*/
    font-weight: 500;
    color: inherit;
  }

  /* Font size reduction for medium */
  @media only screen and (max-width: 63em) {
    h1, .as-h1 {
      font-size: 2.4rem;
    }
    h2, .as-h2 {
      font-size: 1.6rem;
    }
    h3, .as-h3 {
      font-size: 1.15rem;
    }
    h4, .as-h4 {
      font-size: 1rem;
    }
  }
  /* Font size reduction for small */
  @media only screen and (max-width: 40em) {
    h1, .as-h1 {
      font-size: 1.8rem;
    }
    h2, .as-h2 {
      font-size: 1.4rem;
    }
    h3, .as-h3 {
      font-size: 1.1rem;
    }
    h4, .as-h4 {
      font-size: 1rem;
    }
  }


  hgroup > :first-child {
    margin-bottom: 0.1em;
  }
  hgroup > :last-child {
    margin-top: 0;
  }

  p {
    /*color: #3c3c3c;*/
    line-height: 1.618;
    margin: 0 0 1.618rem;
  }
    .text--copy {
      font-size: 1rem;
      line-height: 1.618;
      font-weight: 400;
    }

    /*.text--intro {

    }
    .text--lead {
    }*/

    .text--author,
    .text--caption {
      font-size: 0.875rem;
      color: #9e9d9e;
    }

    .text--small {
      font-size: 0.875rem;
    }

    .text--compact {
      margin-bottom: .5em;
      line-height: 1.4;
    }

    .text--bold {
      font-weight: 700;
    }

    .text--uppercase {
      text-transform: uppercase;
    }

  a,
  .text--anchor,
  .text--static h1 a,
  .text--static h2 a,
  .text--static h3 a,
  .text--static h4 a,
  .text--static h5 a,
  .text--static h6 a {
    /*color: #3c3c3c;*/
    color: inherit;
    /*border-bottom: 1px solid rgb(158, 158, 158);*/
    border-bottom: 1px solid rgb(217, 217, 217); /* a little lighter */
  }
    a:hover,
    .text--anchor:hover,
    .text--static h1 a:hover,
    .text--static h2 a:hover,
    .text--static h3 a:hover,
    .text--static h4 a:hover,
    .text--static h5 a:hover,
    .text--static h6 a:hover {
      border-color: #003366;
    }
    .color-alt a,
    .color-alt .text--anchor {
      border-bottom-color: rgba(255,255,255,.7);
    }
      .color-alt a:hover,
      .color-alt .text--anchor:hover {
        border-bottom-color: rgb(255,255,255);
      }
    .text--add-chevron::after {
      content: " ›";
      content: " \203a";
    }

  .text--no-anchor {
    color: inherit;
    border-bottom-width: 0;
  }

  a[href^='mailto:'],
  a[href^='tel:'] {
    border-bottom-width: 0;
  }
    a[href^='mailto:']:hover,
    a[href^='tel:']:hover {
      border-bottom-width: 1px;
    }

  ul {
    list-style: square;
    padding-left: 1.2em;
  }
  ol {
    padding-left: 1.2em;
  }
    li {
      line-height: 1.3;
      padding-left: 0;
    }

  /* custom list bullets */
  .list--custombullets li {
    list-style: none;
    padding: 0 0 0 1.5em;
    margin-left: -1.3em;
  }
  .list--custombullets li:before {
    font-family: "wings-website-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    position: absolute;
    left: 0;
    content: "■"; /* replace with character code */
    content: "\2713";
    font-size: 120%;
    line-height: 1.05;
    color: #003366;
  }



  ::-moz-selection {
    /*text-shadow: none;*/
    background-color: rgba(60, 60, 60, 0.5)
  }

  ::selection {
    /*text-shadow: none;*/
    background-color: rgba(60, 60, 60, 0.5)
  }

  p.border,
  hr {
    border-bottom: 3px solid rgb(236, 236, 236); 
  }

  strong {
    font-weight: 500;
  }



/* ========================================================
    Icons
=========================================================== */
  
  /* in development use icon-cloud or external file icons/styles.css */





/* ========================================================
    Colors
=========================================================== */

  .color-text {
    color: rgb(60, 60, 60) !important;
  }

  .color-blue {
    color: rgb(0, 51, 102) !important; /* need to be important to override theme color */
  }

  .color-alt,
  .color-white {
    color: white !important; /* need to be important to override theme color */;
  }
  .color-light {
    color: rgb(236, 236, 236) !important;
  }
  .color-medium {
    color: rgb(158, 158, 158) !important;
  }

  .color-accent {
    color: rgb(127, 158, 204); /* should be replaced by specific accent colors */
  }

  .color-master {
    color: rgb(169, 97, 42) !important;
    border-color: currentColor !important;
  }
  .color-bachelor {
    color: rgb(116, 137, 41) !important;
    border-color: currentColor !important;
  }
  .color-diplom {
    color: rgb(167, 138, 25) !important;
    border-color: currentColor !important;
  }
  .color-weiterbildung {
    color: rgb(117, 152, 134) !important;
    border-color: currentColor !important;
  }
  .color-b2b {
    color: rgb(133, 43, 107);
  }
  .color-wings {
    color: rgb(127, 158, 204);
  }

  /* https://brandcolors.net/ */
  .color-facebook {
    color: #3b5998;
  }
  .color-googleplus {
    color: #dd4b39;
  }
  .color-twitter {
    color: #1da1f2;
  }
  .color-xing {
    color: #026466;
  }
  .color-whatsapp {
    color: #0dc143; /* picked from whatsapp favicon */
  }




/* ========================================================
    Backgrounds
=========================================================== */

  /* specify background colors from style document */
  .bg-accent {
    background-color: rgb(127, 158, 204);
    color: white;   
  }
  .bg-white {
    background-color: white;
  }
  .bg-light { /* topbar */
    background-color: rgb(236, 236, 236);
  }
  .bg-silver { /* Vorteile */
    background-color: rgb(217, 217, 217);
  }
  .bg-dark { /* footer */
    background-color: rgb(60, 60, 60);
    color: white;
  }
  .bg-almostdark {
    background-color: rgb(89, 89, 89);
  }
  .bg-halbtransparent {  /* text on image */
    background-color: rgba(60, 60, 60, .5);
    color: white;
  }
  .bg-lightblue {
    background-color: rgb(227, 236, 240);
  }
  .bg-blue {
    background-color: rgb(127, 158, 204);
  }
  .bg-darkblue {  /* contact teaser */
    background-color: rgb(0, 51, 102);
    color: white;
  }


  /* accent colors for promo teasers */
  .bg-bachelor {
    background-color: rgb(116, 137, 41);
  }
  .bg-master {
    background-color: rgb(169, 97, 42);
  }
  .bg-diplom {
    background-color: rgb(167, 138, 25);
  }
  .bg-weiterbildung {
    background-color: rgb(117, 152, 134);
  }
  .bg-b2b,
  .bg-personalentwicklung {
    background-color: rgb(94, 39, 80);
  }

  /* special color for the rating stars */
  .bg-yellow {
    background-color: rgb(255, 181, 0);
  }





/* ========================================================
    Accordion
=========================================================== */

  .accordion__title {

  }

  .accordion__item {
    padding: 0 0;
    border-top: 3px solid rgb(236, 236, 236);
  }
    
  .accordion__title {
    position: relative;
    padding-right: 1.5em;
    cursor: pointer;
  }
  
  .accordion__title:after {
    font-family: "wings-website-icons";
    font-size: 1.4em;
    content: "▾";
    top: -.25em;
    right: 0;
  }

@media only screen and (min-width: 63.063em) {
  .accordion--opened-large-up .accordion__item {
    border-top: none;
  }

  .accordion--opened-large-up .accordion__container {
    height: auto;
    max-height: none;
    visibility: visible;
    opacity: 1;
  }
  .accordion--opened-large-up .accordion__title:after,
  .accordion--opened-large-up .is-open > .accordion__title:after {
    content: none;
  }
}




/* ========================================================
    Buttons
=========================================================== */

  button,
  .button {
    border-radius: 4px;
    font-size: 0.875em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: .7em .9em .62em;
    background: white;
    color: #036;
  }

  button:hover,
  .button:hover {
    background: #f6f6f6;
    color: #036;
  }

  button:focus,
  .button:focus {
    background: #f6f6f6;
    color: #036;
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  }
  button:active,
  .button:active {
    background: #f6f6f6;
    color: #036;
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15) inset;
    -webkit-transform: scale(.985);
    -ms-transform: scale(.985);
        transform: scale(.985);
  }

  button:disabled,
  .button:disabled {
    opacity: .5;
    pointer-events: none;
  }


  .button--primary,
  .button.-primary,
  .button--accent,
  .button.-accent {
    background: rgb(0, 38, 77); /* should be replaced by specific accent colors */
    color: white;
  }
  .button--primary:hover,
  .button.-primary:hover,
  .button--primary:focus,
  .button.-primary:focus,
  .button--accent:hover,
  .button.-accent:hover, 
  .button--accent:focus,
  .button.-accent:focus {
    background: rgb(0, 25, 51); /* should be replaced by specific accent colors */
    color: white;
  }


  .button--secondary,
  .button.-secondary,
  .button--ghost,
  .button.-ghost {
    background: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(0, 51, 102); /* should be replaced by specific accent colors */
    color: rgb(0, 51, 102); /* should be replaced by specific accent colors */
  }

  .button--secondary:hover,
  .button.-secondary:hover,
  .button--secondary:focus,
  .button.-secondary:focus,
  .button--ghost:hover,
  .button.-ghost:hover, 
  .button--ghost:focus,
  .button.-ghost:focus {
    background: rgba(0, 0, 0, .02);
  }

  /*.button--small,
  .button.-small {}

  .button--large,
  .button.-large {}

  .button--dropdown {}
    .button--dropdown:after {}
    .button--dropdown {}
    .button--dropdown.is-closed {}*/

  .button__icon,
  .button [class*="icon"] {
    display: inline-block;
    position: relative;
    top: .25em; /* align larger icon to text */
    margin-top: -1em; /* do not bloat the button */
    font-size: 1.4em;
  }





/* ========================================================
    Inputs
=========================================================== */

  /* We use this to get basic styling on all basic form elements */
  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="time"],
  input[type="url"],
  input[type="color"],
  textarea,
  select {
    margin-bottom: 1.5em;
    border-radius: 3px;
    background-color: white;
    color: rgba(0, 0, 0, 0.75);
    border: 1px solid rgb(204, 204, 204);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1);
    padding: 0.5em;
    -webkit-transition: box-shadow 0.2s, border-color 0.2s ease-in-out;
    transition: box-shadow 0.2s, border-color 0.2s ease-in-out;
  }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="date"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="time"]:focus,
  input[type="url"]:focus,
  input[type="color"]:focus,
  textarea:focus,
  select:focus,
  select:hover {
    background-color: #fcfcfc;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    border-color: rgb(127, 127, 127);
    border-color: rgb(0, 51, 102);
    border-color: rgb(127, 158, 204);

    outline: none;
  }
  input[type="text"]:disabled,
  input[type="text"][disabled],
  input[type="text"][readonly],
  fieldset[disabled] input[type="text"],
  input[type="password"]:disabled,
  input[type="password"][disabled],
  input[type="password"][readonly],
  fieldset[disabled] input[type="password"],
  input[type="date"]:disabled,
  input[type="date"][disabled],
  input[type="date"][readonly],
  fieldset[disabled] input[type="date"],
  input[type="datetime"]:disabled,
  input[type="datetime"][disabled],
  input[type="datetime"][readonly],
  fieldset[disabled] input[type="datetime"],
  input[type="datetime-local"]:disabled,
  input[type="datetime-local"][disabled],
  input[type="datetime-local"][readonly],
  fieldset[disabled] input[type="datetime-local"],
  input[type="month"]:disabled,
  input[type="month"][disabled],
  input[type="month"][readonly],
  fieldset[disabled] input[type="month"],
  input[type="week"]:disabled,
  input[type="week"][disabled],
  input[type="week"][readonly],
  fieldset[disabled] input[type="week"],
  input[type="email"]:disabled,
  input[type="email"][disabled],
  input[type="email"][readonly],
  fieldset[disabled] input[type="email"],
  input[type="number"]:disabled,
  input[type="number"][disabled],
  input[type="number"][readonly],
  fieldset[disabled] input[type="number"],
  input[type="search"]:disabled,
  input[type="search"][disabled],
  input[type="search"][readonly],
  fieldset[disabled] input[type="search"],
  input[type="tel"]:disabled,
  input[type="tel"][disabled],
  input[type="tel"][readonly],
  fieldset[disabled] input[type="tel"],
  input[type="time"]:disabled,
  input[type="time"][disabled],
  input[type="time"][readonly],
  fieldset[disabled] input[type="time"],
  input[type="url"]:disabled,
  input[type="url"][disabled],
  input[type="url"][readonly],
  fieldset[disabled] input[type="url"],
  input[type="color"]:disabled,
  input[type="color"][disabled],
  input[type="color"][readonly],
  fieldset[disabled] input[type="color"],
  textarea:disabled,
  textarea[disabled],
  textarea[readonly],
  fieldset[disabled] textarea,
  select:disabled {
      background-color: #DDDDDD;
      cursor: default;
    }

  /* look like text inputs but can have some unique styles */
  select {
    background-color: white;
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);*/
    /*line-height: normal;*/
    /*height: 2.3125rem;*/
    background-size: 2rem;
  }
  select:after {
    font-family: "wings-website-icons";
    font-size: 1.4em;
    content: "▾";
    display: inline-block;
    position: absolute;
    top: -.25em;
    right: 0;
    speak: none;
    background: lime;
  }
  select::-ms-expand {
    display: none;
  }

fieldset {
  position: relative;
  /*background: rgba(236, 236, 236, .3);*/
  border: 1px solid rgb(236, 236, 236);
  border: none;
  padding: 0;
}
fieldset.accordion {
  padding-top: 0;
  padding-bottom: 0;
}
fieldset .accordion__item:first-of-type {
  border-top: none;
}
fieldset.accordion legend {
  margin-bottom: -.3em;
}

legend {
  color: rgb(0, 51, 102);
  font-weight: 500;
  margin-bottom: 1em;
}


/* ========================================================
    Listing
=========================================================== */

  .listing {
    margin: 0 -1.9rem;
  }
  .listing__link {
    padding: 1.9rem;
  }
  .listing__item::before {
    margin: 0 1.9rem;
  }





/* ========================================================
    Panel
=========================================================== */

  .panel {
    position: relative;
    /*margin-bottom: 1.5rem;*/
    margin-bottom: .25em; /* add this margin as separator line for stacked panels */
    padding: 1.9rem; /* panel is used for the large banner caption */
  }
  .panel__body {
    display: block; /* need this if an anchor tag is used as body */
  } 
  .panel__body > :first-child {
  margin-top: 0; }
  .panel__body > :last-child {
  margin-bottom: 0; }

  .panel--limited-width .panel__body,
  .panel__body--limited-width {
    max-width: 18em; /* dont strech content on stacked teasers */
    margin: 0 auto; /* but keep it centered */
  }

  /*
  .panel--flush, .panel--flush-right {
    left: 99rem;
    margin-left: -99rem;
    padding-right: 100.75rem;
  }

  .panel--flush-left {
    right: 99rem;
    margin-left: -99rem;
    padding-left: 100.75rem;
  }
  */





/* ========================================================
    Teaser-Grid
=========================================================== */

  .teaser-wrapper {
    display: block;
    padding: 0;
    /*margin: 0 -.25rem;*/ 
    margin: 0 -.125rem; /* negativ spacing of the teaser boxes */
  }
  .teaser-wrapper:before, .teaser-wrapper:after {
    content: " ";
    display: table;
  }
  .teaser-wrapper:after {
    clear: both;
  }
  .teaser-wrapper > li {
    display: block;
    height: auto;
    float: left;
    padding: 0 .125rem 0;
    margin: 0;
  }

  /* Flexbox enhancement */
  .teaser-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .teaser-wrapper > li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 16rem;
        -ms-flex: 1 16rem;
            flex: 1 16rem;
    /*flex: 1 33%;*/ /* relative width doesnt work in safari*/
    /*width: 100%;*/
  }

  @media only screen and (min-width: 40.063em) {
    .teaser-wrapper > li {
      max-width: 50%;
    }
    .teaser-wrapper > li:nth-of-type(3n):nth-last-of-type(2) {
      min-width: 50%;  /* force wrap the second last into the last row */
    }
    /* Safari Hack since flex-wrap adds an leading pixel */
    .teaser-wrapper > li:first-child {
      /*margin-left: -1px !important;*/
    }
  }





/* ========================================================
    Banner
=========================================================== */

  .banner {
    /*margin: 0 -1.875em;*/
  }
  
  .banner__caption {
    text-align: left;
    background-color: white;
    text-transform: none;
  }
  @media only screen and (min-width: 40.063em) {
    .banner__caption {
      display: inline-block;
      position: absolute;
      top: auto;
      right: auto;
      bottom: 0;
      left: auto;
      background-color: rgba(60, 60, 60, .5);
      background: -webkit-linear-gradient(top, rgba(60, 60, 60, 0) 0%, rgba(60, 60, 60, .1) 15%, rgba(60, 60, 60, .2) 27%, rgba(60, 60, 60, .4) 50%, rgba(60, 60, 60, .65) 90%);
      background: linear-gradient(to bottom, rgba(60, 60, 60, 0) 0%, rgba(60, 60, 60, .1) 15%, rgba(60, 60, 60, .2) 27%, rgba(60, 60, 60, .4) 50%, rgba(60, 60, 60, .65) 90%);
      padding-top: 1em;
      color: white;
      /* full width layer: */
      padding-left: 0;
      padding-right: 4rem;
      width: 67%; /* keep right edge at the header panel */
      /*box-shadow: -16em 8em 0 8em rgba(60, 60, 60, .5);*/
    }
    .banner__caption::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      /*left: -16em;*/
      right: 100%;
      width: 16em;
      background: -webkit-linear-gradient(top, rgba(60, 60, 60, 0) 0%, rgba(60, 60, 60, .1) 15%, rgba(60, 60, 60, .2) 27%, rgba(60, 60, 60, .4) 50%, rgba(60, 60, 60, .65) 90%);
      background: linear-gradient(to bottom, rgba(60, 60, 60, 0) 0%, rgba(60, 60, 60, .1) 15%, rgba(60, 60, 60, .2) 27%, rgba(60, 60, 60, .4) 50%, rgba(60, 60, 60, .65) 90%);
    }
  }
  .banner__topline {
    margin: 0;
  }
  .banner__headline {
    margin: 0 0 .3em;
  }
  @media only screen and (min-width: 40.063em) {
    .banner__topline.banner__topline {
      color: white;
      font-size: 1rem;
    }
    .banner__headline.banner__headline {
      color: white;
      font-size: 1.6rem; /* h2 font-size on medium viewport */
    }
  }
  @media only screen and (min-width: 63.063em) {
    .banner__headline.banner__headline {
      font-size: 1.75rem; /* h2 font-size on large viewport */
    }
  }
  .banner__image {
    /*min-height: 12rem;*/ /* now controlled by img srcset */
  }
  .banner--backdrop .banner__item,
  .banner--backdrop .banner__image {
    height: 100%;
  }
  @media only screen and (max-width: 40em) {
    .banner--backdrop .banner__image {
      background: none!important;
    }
    .banner--backdrop .banner__image img {
      visibility: visible;
    }
  }
  @media only screen and (min-width: 40.063em) {
    .banner--backdrop {
      position: absolute;
      left: 0;
      right: 30%;
      top: 0;
      bottom: 0;
      z-index: 0; /* behind the content */
    }
    .banner--backdrop .banner__image {
      /*position: absolute;*/
      /*top: 0;
      bottom: 0;
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;*/
      background-position: right top;
    }
  }







/* ========================================================
    Navigation
=========================================================== */

  /* BURGER */
  .nav__burger {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2em;
  }

  .nav__item,
  .nav__link {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
  }


/* –––––––––––––––––––––––––––––––––––––––––––
    Navigation general styles
–––––––––––––––––––––––––––––––––––––––––––––– */
  /*  Stacking navigation items by default ! */

  .nav__item {}
  .nav__link,
  .nav__link:hover,
  .nav__link:focus,
  .nav__link:active {
    padding: .9em .8375em .8em;
    border-bottom: 1px solid rgb(236, 236, 236);
  }
  .nav__link:hover,
  .nav__link:focus {
    /*background: rgba(236, 236, 236, .5);*/
    outline: none;
    text-shadow: 0 0 0 currentColor; /* darken text */
  }
  .nav__link::after,
  .nav__link:focus::after {
    /*content: "";
    position: absolute;
    bottom: .4em;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgb(158, 158, 158);
    background: magenta;*/
  }


  /* STACKED | off canvas stacked navigation */

  /*.is-stacked .nav__item {
    font-size: 1.2em;
  }
  .is-stacked .nav__link,
  .is-stacked .nav__link:hover,
  .is-stacked .nav__link:focus,
  .is-stacked .nav__link:active {
    padding: .9em .8375em .8em;
    border-bottom: 1px solid rgb(236, 236, 236);
  }
  .is-stacked .nav__link:hover,
  .is-stacked .nav__link:focus {
    background: rgba(236, 236, 236, .5);
    outline: none;
  }*/


  /* Bereiche Index auf mobiler Startseite */
  .nav--larger {}
  .nav--larger .nav__item {
    font-size: 1.4rem;
  }
  .nav--larger .nav__link,
  .nav--larger .nav__link:hover,
  .nav--larger .nav__link:focus,
  .nav--larger .nav__link:active {
    padding: 1.3em 1.2em 1.2em;
    border-bottom: 3px solid rgb(236, 236, 236);
  }
  .nav--larger .nav__link:hover,
  .nav--larger .nav__link:focus {
    background: rgba(236, 236, 236, .5);
    outline: none;
  }
  .nav--larger .nav__item:last-child .nav__link,
  .nav--larger .nav__item:last-child .nav__link:hover,
  .nav--larger .nav__item:last-child .nav__link:focus,
  .nav--larger .nav__item:last-child .nav__link:active {
    border-bottom: none;
  }
  .nav__link::before { /* icon */
    margin-right: .5em;
  }



  /* DROPDOWN | main navigation for program-categories */
  @media only screen and (min-width: 63.063em) {
    .nav--horizontal {
      font-size: 1.125rem;
      width: auto;
    }
    .nav--horizontal .nav__list {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }
    .nav--horizontal .nav__item {
      float: left; 
      width: auto;
      /*margin-right: 1em;*/ /* dont need it with flexbox */
    }
    .nav--horizontal .nav__item:last-child {
      margin-right: 0rem; /* dont need it with flexbox */
    }
    .nav--horizontal .nav__link,
    .nav--horizontal .nav__link:hover,
    .nav--horizontal .nav__link:focus,
    .nav--horizontal .nav__link:active,
    .nav--horizontal .nav__link.is-current {
      position: relative; 
      padding:.7em;
      line-height: 1; 
      white-space: nowrap;
      border-bottom: none;

      /* change to uppercase */
     /* text-transform: uppercase;
      font-size: 1.05rem;*/
    }
    
      /*.nav--horizontal .nav__link.is-current:not(:focus):after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 .7em;
        height: .15em;
        background: rgb(133, 43, 107);
      }*/

    /*.nav--horizontal .nav__link.is-current,*/ /* doesnt work with the banner image below it */
    .nav--horizontal .nav__link:active {
      background: white;
    }
    .nav--horizontal .nav__link:hover,
    .nav--horizontal .nav__link:focus {
      background: rgba(255,255,255,.7);
    }
    .nav--horizontal .nav__link::before { /* icon */
      margin-right: .3em;
      font-size: 1.2em;
      font-size: 1.5rem; /* IE multiplies relative fontsizes from multiple selectors */
      top: .2em;
      
      /* change to uppercase */
      /*text-transform: lowercase;
      font-size: 1.4em;
      top: .27em;*/
    }
    
  }

  /* SIMPLE | Meta navigation for aditional links used in topbar or footer */

  @media only screen and (min-width: 63.063em) {
    .nav--simple {
      font-size: .85rem;
      /*text-transform: uppercase;*/
    }
    .nav--simple .nav__item {}
    .nav--simple .nav__link {}
    .nav--simple .nav__link:hover,
    .nav--simple .nav__link:focus {}
  }

  /* ALT COLOR | alternative navigation text color */

  .color--alt .nav__link {}
  .color--alt .nav__link:hover,
  .color--alt .nav__link:focus {}


  /* VERTICAL | sub navigation for pages */

  .nav--vertical > .nav__list {
    font-size: 1.25em;
    margin: 0;
    border-bottom: 3px solid white;
  }
  .nav--vertical .nav__item {
  }
  .nav--vertical .nav__link {
    background: rgb(236, 236, 236);
    border-bottom: 2px solid white;
    padding: .9em .8375em .8em;
  }
  .nav--vertical .nav__list .nav__list {
    padding: 0;
  }
  .nav--vertical .nav__list .nav__list .nav__item {}
  .nav--vertical .nav__list .nav__list .nav__link {
    padding: .9em .8375em .8em 1.8375em;
  }

  .nav--vertical .nav__link:focus,
  .nav--vertical .nav__link:hover {
    background: rgba(236, 236, 236, .5);;
    border-bottom: 2px solid white;
    padding: .9em .8375em .8em;
  }
  .nav--vertical .nav__link.is-current {
    color: rgb(127, 158, 204); /* should be replaced by specific accent colors */
  }

  @media only screen and (min-width: 63.063em) {
    .nav--vertical > .nav__list {
      margin-bottom: 2em;
    }
    .nav--vertical .nav__item {}
    .nav--vertical .nav__link {
      padding: .5em 0;
      background: transparent;
      border-bottom: none;
    }
    .nav--vertical .nav__list .nav__list {
      font-size: 1rem;
    }
    .nav--vertical .nav__list .nav__list .nav__item {}
    .nav--vertical .nav__list .nav__list .nav__link {
      padding: .5em 0 .5em 1rem;
    }
    .nav--vertical .nav__list .nav_list .nav__list {
      font-size: 1em; /* dont get even smaller */
    }
    .nav--vertical .nav__list .nav__list .nav__list .nav__link {
      padding: .5em 0 .5em 2rem; /* more indention on 3rd nesting */
    }

    .nav--vertical .nav__link:focus,
    .nav--vertical .nav__link:hover,
    .nav--vertical .nav__link.is-current {
      padding: .5em 0;
      background: transparent;
      border-bottom: none;
    }
  }


  /* Nav Footer */

  .nav--footer {}
  .nav__flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
  }
  .nav--footer .nav__block {
    -webkit-box-flex: 1;
    -webkit-flex: 1 16rem;
        -ms-flex: 1 16rem;
            flex: 1 16rem;
  }
  .nav--footer .nav__list {
    margin-bottom: 1.2em;
  }
  .nav--footer .nav__item {
    font-size: 0.875rem; /* 14px */
  }
  .nav--footer .nav__item--cats,
  .nav--footer .nav__item:first-child .nav__link {
    font-weight: 700;
    opacity: .9;
  }
  .nav--footer .nav__link {
    line-height: 1.15;
    padding: .6em 0;
    border-bottom: none;
    opacity: .66;

    /*overflow: hidden;
    width: 10em;
    white-space: nowrap;
    text-overflow: ellipsis;*/
    
    /*-ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;*/

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }
  .nav--footer .nav__link:hover,
  .nav--footer .nav__link:focus,
  .nav--footer .nav__link:active {
    opacity: 1 !important;
    background: none;
  }



/* –––––––––––––––––––––––––––––––––––––––––––
    Navigation Icons
–––––––––––––––––––––––––––––––––––––––––––––– */
  .nav__link::before {
    display: inline-block;
    position: relative;
    font-size: 1.5em;
    top: .3em;
    font-family: 'wings-website-icons';
    color: white;
    border-radius: .14em;
    text-align: center;
    line-height: .8;
    padding: .1em 0 .02em;
    margin: -.5em .4em -.5em 0;
    margin-bottom: 0; /* avoids icon to sink down on iOS  */
    width: .9em;
    text-indent: -.05em;
  }

  .nav__item--fernstudiummaster .nav__link::before {
    content:"m";
    background-color: rgb(169, 97, 42);
  }
  .nav__item--fernstudiumbachelor .nav__link::before {
    content:"b";
    background-color: rgb(116, 137, 41);
  }
  .nav__item--fernstudiumdiplom .nav__link::before {
    content:"d";
    background-color: rgb(167, 138, 25);
  }
  .nav__item--weiterbildung .nav__link::before {
    content:"w";
    background-color: rgb(117, 152, 134);
  }
  .nav__item--b2b .nav__link::before,
  .nav__item--personalentwicklung .nav__link::before {
    content:"h";
    color: rgb(133, 43, 107);
    background-color: rgb(133, 43, 107);
  }
  .nav__item--wings .nav__link::before {
    content:"l";
    color: rgb(0, 51, 102);
    background-color: rgb(0, 51, 102);
  }


/* –––––––––––––––––––––––––––––––––––––––––––
    Navigation Offcanvas Submenu
–––––––––––––––––––––––––––––––––––––––––––––– */


  /*.layout__off-off-canvas {
    display: block;
  }*/
 

  /* fade out the wide search input box */
  .layout__offcanvas > .layout__quicksearch {
    -webkit-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    opacity: 1;
  }
  .layout__offcanvas.has-submenu-open > .layout__quicksearch {
    opacity: 0;
  }
  .layout__offcanvas .nav__submenu {
    margin-left: -0.9375em; /* offset column padding – @todo: should be applied on menu items */
    /*position: fixed;*/ /* IE takes fixed elements out of parent container and calculates position and size relative to the browser window */
    position: absolute;
    left: auto;
    top: 0;
    bottom: 0;
    right: -100%; /* positioned right of the offcanvas container */
    width: 256px; /* same as the off-canvas menu */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

    display: block;
    opacity: 0;
    visibility: hidden;
    /*z-index: 1;*/ /* nested z-index doesn't work */

    -webkit-transform: translate(-80%,0);
    -ms-transform: translate(-80%,0);
    transform: translate(-80%,0);

    -webkit-transition: opacity .3s ease, visibility 0s .3s, -webkit-transform .3s ease;
    transition: opacity .3s ease, visibility 0s .3s, -webkit-transform .3s ease;
    transition: transform .3s ease, opacity .3s ease, visibility 0s .3s;
    transition: transform .3s ease, opacity .3s ease, visibility 0s .3s, -webkit-transform .3s ease;
  }
  .layout__offcanvas .nav__submenu.is-open {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition: opacity .3s ease, visibility 0s 0s, -webkit-transform .3s ease;
    transition: opacity .3s ease, visibility 0s 0s, -webkit-transform .3s ease;
    transition: transform .3s ease, opacity .3s ease, visibility 0s 0s;
    transition: transform .3s ease, opacity .3s ease, visibility 0s 0s, -webkit-transform .3s ease;
  }
    .layout__offcanvas .nav__submenu .nav__link--button {
      background: rgba(0,0,0,.1);
      font-size: 0.875em;
      text-transform: uppercase;
      color: #036;
      padding: 1em .8735em .7em;
      -webkit-tap-highlight-color: transparent; 
    }
    .icon--larger {
      font-size: 1.4em;
      display: inline-block;
      position: relative;
      top: .25em;
      margin-top: -1em;
    }
    /* _HACK: no column paddin
    .column.small-expanded,g in stacked navigation */
    /* use utility--expand-on-small*/
    /*.layout__offcanvas .nav__submenu .column {
      padding-left: 0; 
      padding-right: 0;
    }*/
    .layout__offcanvas .nav__submenu .nav__title {
      display: block;
      font-weight: bold;
      margin: .4em 0 0;
      padding: 0;
      border-bottom: 1px solid rgb(236, 236, 236);
    }
      .layout__offcanvas .nav__submenu .nav__title .nav__link,
      .layout__offcanvas .nav__submenu .nav__title .nav__link:hover {
        border-bottom: none;
      }
    .no-layout__offcanvas .nav__submenu .nav__item {
      width: 100%;
      font-size: 1rem;
    }
    .no-layout__offcanvas .nav__submenu .nav__link,
    .no-layout__offcanvas .nav__submenu .nav__link:hover {
      border-bottom: none;
      padding-top: .5em;
      padding-bottom: .5em;
    }
    .no-layout__offcanvas .nav__submenu .nav__link:hover {
      border-bottom: none;
    }

  

/* –––––––––––––––––––––––––––––––––––––––––––
    Navigation Dropdown
–––––––––––––––––––––––––––––––––––––––––––––– */

  .layout__dropdown .nav__submenu {
    display: none;
  }
  @media only screen and (min-width: 63.063em) {  
    .layout__dropdown .nav__submenu {
      position: relative;
      padding-top: 0rem;
      padding-bottom: 0rem;
      display: block;
      overflow: hidden;
      opacity: 0;
      max-height: 0rem;
      -webkit-transition: max-height 0s, opacity 0s 0s ease-out, padding .1s linear;
      transition: max-height 0s, opacity 0s 0s ease-out, padding .1s linear;
    }
    .layout__dropdown .nav__submenu.is-open {
      padding-top: 2rem;
      padding-bottom: 2rem;
      opacity: 1;
      max-height: 30rem;
      -webkit-transition: max-height 0s, opacity .2s .1s ease-in, padding .1s linear;
      transition: max-height 0s, opacity .2s .1s ease-in, padding .1s linear;
    }
    .layout__dropdown .layout__dropdown--additional-padding {
      padding: 0 .9375em;
    }
    /*.nav__submenu .nav__list {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
      -moz-column-gap: 3em;
      -webkit-column-gap: 3em;
      column-gap: 3em;
      orphans: 6;
      widows: 6;
    }*/

    /* placehold because of no nav__title */
    .nav__submenu .nav__list--part2::before {
      content: "\00a0";
      display: block;
      font-weight: bold;
      margin: 0 .8em .8em -4em;
      padding: .9em 0 .8em;
      border-bottom: 1px solid rgb(217,217,217);
    }
    .layout__dropdown .nav__submenu .nav__link--button {
      display: none;
    }
    .layout__dropdown .nav__submenu .nav__title {
      display: block;
      font-weight: bold;
      margin: 0 0.8375em .8em;
      padding: 0 0 .3em 0;
      border-bottom: 1px solid rgb(217,217,217);
    }
      .layout__dropdown .nav__submenu .nav__title .nav__link,
      .layout__dropdown .nav__submenu .nav__title .nav__link:hover {
        padding-top: .9em;
        padding-left: 0;
      }
    .layout__dropdown .nav__submenu .nav__item {
      width: 100%;
      font-size: 1rem;
    }
    .layout__dropdown .nav__submenu .nav__link,
    .layout__dropdown .nav__submenu .nav__link:hover {
      border-bottom: none;
      padding-top: .5em;
      padding-bottom: .5em;
    }
    .layout__dropdown .nav__submenu .nav__link:hover {
      border-bottom: none;
    }
  }





/* ========================================================
    Breadcrumb
=========================================================== */

  .layout__breadcrumb,
  .breadcrumb {
    line-height: 1.3;
    border-bottom: none;
  }
  .layout__breadcrumb a,
  .breadcrumb__link {
    border-bottom: none;
  }
  .layout__breadcrumb a:hover,
  .breadcrumb__link:hover {
    color: #3c3c3c;
  }
  .layout__breadcrumb .current,
  .breadcrumb__link--current {
    color: #3c3c3c;
    /*white-space: nowrap;*/
    /*display: inline-block;*/
  }





/* ========================================================
    Appendix Link
=========================================================== */

  /*.appendix {
    border-bottom: none;
  }
  .appendix__title {}
  .appendix__caption {}
  .appendix:hover .appendix__caption {}*/





/* ========================================================
    Link-List
=========================================================== */

  .link-list {
    list-style: none;
    margin: 0 0 1.618em;
    padding: 0;
  }
  .link-list__item {
    margin-bottom: 1em;
  }
  .link-list__link {
    text-decoration: none;
    /*border-bottom-color: transparent;*/
  }

  .link-list--add-chevrons .link-list__link:hover::after {
    content: "  ›";
    content: "\00a0\00a0\203a";
  }





/* ========================================================
    Social
=========================================================== */

  .social__link {
    opacity: .9;
  }
  .social__link:hover,
  .social__link:focus {
    opacity: 1;
  }

  @media only screen and (max-width: 40em) {
    .social {
      text-align: center;
    }
    .social__heading {
      width: 100%;
      margin-bottom: 0;
    }
    .social__list {
      display: inline-block;
      margin: 0 auto;
    }
    .social__item {
      margin: 2em 1em 0;
    }
    .social__item:nth-child(3n+1) {
      clear: both;
    }
    .social__icon { /* fit box to real icon size */
      display: inline-block;
      position: relative;
      top: .1em;
      margin: -.07em 0;
      font-size: 3.5em;
    }
  }

  @media only screen and (min-width: 40.063em) {
    .social {}
    .social__heading {
      width: auto;
      margin-right: 1em;
    }
    .social__list {
      display: block;
      margin: 0;
    }
    .social__item {
      margin: 0 .7em;
      /*margin: .9em .6em 0;*/
    }
    .social__icon {
      position: relative;
      top: .33em;
      font-size: 2em;
      display: inline-block;
      margin: -1em 0;
    }
  }



/* ========================================================
    Social Share
=========================================================== */

  .share__list {
    list-style: none;
    overflow: hidden;
    padding: 0;
  }
  .share__item {
    width: 50%;
    float: left;
  }
  .share__link {
    opacity: .99; /* makes white background element with z-index:-1; appear in front of the panel background */
    border-bottom-width: 0; /* disable default link style on whole element */
    display: block;
  }
  .share__link:hover,
  .share__link:focus {
    opacity: .99; /* makes white background element with z-index:-1; appear in front of the panel background */
  }
  .share__link:hover .share__label,
  .share__link:focus .share__label {
    border-bottom: 1px solid #003366; /* apply link hover style on the label only */
  }

  .share__icon {
    position: relative;
    font-size: 2em;
    position: relative;
    top: .3em;
  }
  .share__icon::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .1em;
    right: .1em;
    bottom: .3em;
    left: .1em;
    display: block;
    background: white;
  }
  .share__link:hover .share__icon::after {
    background: white;
  }


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

  }






/* ========================================================
    Subscribe
=========================================================== */

  /*.subscribe {}
    .subscribe-heading {}
    .subscribe-uvp {}
    .subscribe-calltoaction {}
    .subscribe-form {}
      .subscribe-input {}
      .subscribe-submit {}*/





/* ========================================================
    Quicksearch
=========================================================== */

  /*.quicksearch {}
  .quicksearch-input {}
  .quicksearch-input:focus {}
  .quicksearch-submit {}
  .quicksearch-submit:focus,
  .quicksearch-submit:hover {}
  .quicksearch-icon {}

  .quicksearch.is-slight  {}
  .quicksearch.is-expanded {}*/

@media only screen and (min-width: 63.063em) {
  .quicksearch__input:focus {
    max-width: 20em;
  }
}




/* ========================================================
    Search Results
=========================================================== */

  .search__item::before {
    /*content: none;*/ /* no seperator lines please */
    border-bottom: 3px solid rgb(236, 236, 236);
  }
  .search__item::after {
    content: none; /* no chevron to the right here */
  }
  .pagination {
    /*white-space: nowrap;*/
    overflow: hidden;
    max-height: 1.5em;
    text-align: left;
  }





/* ========================================================
    News
=========================================================== */

  /*.news {}
  .news-list {}
  .news-item {}
  .news-link {}
  .news-date {}
  .news-title {}
  .news-more {}

  .news--full {}
  .news--headlines {}
  .news-text--intro {}*/






/* ========================================================
    Person
=========================================================== */

  /*.person {}
  .person__portrait {}
  .person__textwrapper {}
  .person__heading {}
  .person__name {}
  .person__email {}*/





/* ========================================================
    Contact
=========================================================== */

  .contact {}

  /*.contact p { useing .text--compact helper instead
    margin-bottom: 1em;
  }*/

  .contact__icon {
    font-size: 1.5em;
    position: relative;
    top: .25em;
  }

  .contact__image {
    /*float: right;
    max-width: 8em;
    margin: 0 -2em -2em 0;*/
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 10em;
  }
  .contact--with-image {
    background-position: 100% bottom;
    background-size: 120px; /* image should be 240px width @2x */
    /*background-size: 10em;*/
    background-repeat: no-repeat;
    /*padding-right: 10em;*/
    min-height: 12em;
  }
  .contact--with-image .contact__image {
    visibility: hidden;
  }

  .contact--on-banner {
    margin-bottom: 0;
  }





/* ========================================================
    Teaser
=========================================================== */

  .teaser {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; /* strech content height */
    width: 100%;
    min-height: 16rem;
    /*background: rgb(60,60,60);*/
  }
  .teaser__body {
    display: block;
    -webkit-box-flex: auto;
    -webkit-flex: auto;
        -ms-flex: auto;
            flex: auto; /* strech height */
    border-bottom: none;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .teaser_body:hover {
    text-decoration: none;
  }
  /* Button should be aligned to bottom */
  .teaser__body > :nth-last-child(2):not(:first-child) {
    /*flex-grow: 1;*/ /* alternate flexbox bottom alignment of last-child */
  }
  .teaser__button
  /*.teaser__body > :last-child:not(:first-child)*/ {
    margin-top: auto; /* flexbox bottom alignment */
    margin-bottom: 0;
  }

  .teaser__text {
    /*display: flex;
    flex-direction: column;*/
  }

  .teaser__text > :first-child,
  .teaser__text > * {
    margin-top: 0;
  }


  .teaser--text { /* Nur Text */
  }
  .teaser--background { /* Text + Hintergrundbild */
  }
  .teaser--picture { /* Text + Bild */
  }
  .teaser--picture .teaser__image {
    float: right;
    max-width: 50%;
    margin: 0;
  }
  .teaser--picture .teaser__img {
    float: right; /* force it to the very right */
  }

  /* We use .bg- helper classes to set background colors */
  /*
    Bachelor-Farbe                  .bg-bachelor
    Master-Farbe                    .bg-master
    Diplom-Farbe                    .bg-diplom
    Weiterbildungs-Farbe            .bg-weiterbildung
    B2B-Farbe                       .bg-b2b
    WINGS-Blau hell                 .bg-lightblue
    WINGS-Blau mittel               .bg-blue

    WINGS-Grau dunkel               .bg-dark
    WINGS-Grau hell                 .bg-light
    Abschlussfarbe des aktiven Studiengangs
                    .bg-accent
  */



  /* –––––––––––––––––––––––––––––––––––––––––––
      Teaser Fernstudiumcheck
  –––––––––––––––––––––––––––––––––––––––––––––– */

  /* Fernstudiumcheck */
  .teaser--rating .teaser__body {
    text-align: center;
    padding-top: 1rem;
  }
  .teaser--rating .teaser__title {
  }
  .teaser--rating .teaser__text {
  }

  .rating {
    position: relative;
  }
  .rating__mask {
    position: relative;
    z-index: 1; /* above absolute positioned range bar */
    display: block; /* ommit magical image margins */
  }
  .rating__range,
  .rating__bg {
    top: 1px;
    bottom: 1px;
  }



  /* –––––––––––––––––––––––––––––––––––––––––––
      Teaser Standorte
  –––––––––––––––––––––––––––––––––––––––––––––– */

  /* Standorte */
  .teaser--locations {
    position: relative;
    background-position: 100% 50%;
    overflow: hidden;
  }
  .teaser--locations .teaser__text {
    pointer-events: none;
    z-index: 1; /* to put above the map */
    text-shadow: 0 0 .5em rgb(127, 158, 204),
                 0 0 .5em rgb(127, 158, 204),
                 0 0 .5em rgb(127, 158, 204),
                 0 0 .5em rgb(127, 158, 204);
  }
  .teaser--locations .teaser__map {
    position: absolute;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    /*background-color: rgba(200,200,200,.2);*/
  }

  .teaser--locations .teaser__map img {
    max-height: 17rem;
  }

    

  /* Standorte global */
  .teaser--locations-global {
    background-position: 100% 50%;
  }
  .teaser--locations-global .teaser__text {
    text-shadow: 0 0 .5em rgb(127, 158, 204),
           0 0 .5em rgb(127, 158, 204),
           0 0 .5em rgb(127, 158, 204),
           0 0 .5em rgb(127, 158, 204);
  }


  /* Count-down */
  .teaser--countdown {
    background-color: #fff;
  }





/* ========================================================
    Map (for locations teaser)
=========================================================== */

  .map {
    position: absolute;
    list-style: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
  }
  .map__img {
    visibility: visible;
    /*outline: 1px solid lime;*/
  }

  .map__item {
    position: static;
  }
  .map__marker {
    position: absolute;
    margin: -1.7rem -.7rem -1rem;
    padding: 0;
    text-align: center;
    width: 1.4rem;
    height: 2rem;
    pointer-events: auto;
    text-decoration: none;
    border-bottom: none;
    /*background: rgba(250,0,150,.4);*/
    overflow: hidden; /* prevent transparent part of the icon from enlarging the clickable area */
  }
  .map__icon {
    cursor: pointer;
    position: relative;
    font-size: 2em;
    margin-top: 0;
    
    /* adoption for correct position since the icon is larger then the box */
    /*top: -.35em;*/ /* align the bottom of the marker icon */
    left: -.3rem;
  }
  .map__marker:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
        transform: scale(1.05);
  }
  .map__marker:hover:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /*box-shadow: 0 0 .3rem .1rem rgba(0,0,0,1);*/
  }





/* ========================================================
    Text Shortened
=========================================================== */




/* toggler for all screen sizes */
.text--shortened.is-toggler-container {
  position: relative;
  overflow: hidden;
  max-height: 9.8em; /* 6 lines visible */
}
.text--shortened.is-toggler-container::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.7em;
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.text--shortened.is-toggler-container.is-expanded {
  max-height: none;
}
.text--shortened.is-toggler-container.is-expanded::after {
  background: none;
}
[data-toggler] {
  opacity: 0;
}
[data-toggler].is-toggler-handler {
  opacity: 1;
}

@media only screen and (max-width: 40em) {
  [data-toggler].hide-for-medium-up {
    display: inline-block !important;
  }
}

/* toggler for small screens only */
@media only screen and (min-width: 40.063em) {
  .text--shortened-small-only.is-toggler-container {
    overflow: auto;
    max-height: none;
  }
  .text--shortened-small-only.is-toggler-container::after {
    content: none;
    background: none;
  }
  .text--shortened-small-only.is-toggler-container.is-expanded {
    max-height: none;
  }
  [data-toggler].hide-for-medium-up {
    display: none;
  }
}


/* ========================================================
    Form
   ======================================================== */

/*Select marked as required*/
.form__field--required select {
  box-shadow: inset .5em 0 0 rgb(0, 51, 102);
  padding-left: 1em;
}
.form__field--required select.no-value, 
.form__field--required option[value="-1"],
.form__field--required option[value=""] {
  box-shadow: inset .5em 0 0 rgb(0, 51, 102);
}
.form__field--required select[class*="value"]:not(.no-value), 
.form__field--required option:not([value="-1"]),
.form__field--required option:not([value=""]) {
  box-shadow: inset .5em 0 0 rgb(227, 236, 240);
}

textarea:required:invalid,
input:required:invalid {
  box-shadow: inset .5em 0 0 rgb(0, 51, 102);
  padding-left: 1em;
}
/*
input:required {
  box-shadow: inset .5em 0 0 rgb(0, 51, 102);
  padding-left: 1em;
}*/
textarea:required:valid,
input:required:valid {
  box-shadow: inset .5em 0 0 rgb(227, 236, 240);
  padding-left: 1em;
}

input[type="checkbox"], input[type="radio"] {
  box-shadow: none;
}





/* form errors */
.form__error {
  padding: .6em .5em .5em;
  color: red;
  background-color: #ececec;
  border: 1px solid currentColor;
}

*[errorelement] {
  border: 1px solid red;
}

.errorform {
  color: red !important;
}
textarea.errorform,
input.errorform {
  box-shadow: inset .5em 0 0 darkred !important;
  padding-left: 1em;
  color: inherit;
}
.errorform select,
select.errorform {
  box-shadow: inset .5em 0 0 red;
  padding-left: 1em;
}







/*form improvement*/
.form--new label:not([for]) {
  opacity: .6;
  font-size: .875em;
}
.form--new input:not([type="submit"]),
.form--new textarea,
.form--new select {
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: rgb(252, 252, 252) !important;
  border-color: #ddd;
}

.form--new textarea:required:invalid,
.form--new input:required:invalid {
  box-shadow: none;
  border-bottom: 1px solid rgb(0, 51, 102);
}

.form--new .row.collapse > .column:first-child {
  padding-right: .8em;
}





/* ========================================================
    Table
=========================================================== */


table {
  display: table;
  /*table-layout: fixed;*/
  width: 100%;
  margin-bottom: 1.618rem;
  overflow: scroll;
  overflow: hidden;
}
  
  table thead,
  table tbody,
  table tfoot {
    /*border: 1px solid rgb(236, 236, 236);*/
    background-color: white;
    border-radius: 4px;
  }
  table thead {
    border-bottom: 3px solid rgb(236, 236, 236);
  }
  table caption {
    font-weight: bold;
    padding: 0.5rem 0.625rem 0.625rem;
  }
  table thead,
  table tfoot {
    /*background: rgb(236, 236, 236);*/
  }
    table thead tr,
    table tfoot tr {
      background: transparent;
    }
    table thead th,
    table thead td,
    table tfoot th,
    table tfoot td {
      padding: 0.5rem 0.625rem 0.625rem;
      font-weight: bold;
      text-align: left;
    }
  table tbody tr:nth-child(even) {
    background-color: rgba(236, 236, 236, .3);
  }
  table tbody th,
  table tbody td {
    padding: 0.5rem 0.625rem 0.625rem;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
  }


table.is-sortable thead th.is-sortable {
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
}
table.is-sortable thead th.is-sortable:hover {
  text-shadow: 0 0 0 currentColor;
  background-color: #f9f9f9;
}
/* hover effekt on the whole column */
table.is-sortable thead th.is-sortable:not(.is-sorted-desc):hover::before,
table.is-sortable thead th.is-sortable.is-sorted-asc:hover::before {
  content: "";
  position: absolute;
  background-color: rgb(158, 158, 158);
  opacity: .05;
  left: 0;
  top: 0;
  height: 100rem;
  width: 100%;
  z-index: 0;
  border: none;
}
table.is-sortable thead th.is-sortable.is-sorted-desc:hover::after {
  content: "";
  position: absolute;
  background-color: rgb(158, 158, 158);
  opacity: .05;
  left: 0;
  top: 0;
  height: 100rem;
  width: 100%;
  z-index: 0;
  border: none;
}
/* arrows showing sortable column head */
table.is-sortable thead th.is-sortable::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 .3rem .4rem .3rem;
  border-color: transparent transparent rgb(217, 217, 217) transparent;
  position: absolute;
  right: .6rem;
  bottom: 50%;
  margin-bottom: .2rem;
}
table.is-sortable thead th.is-sortable::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .4rem .3rem 0 .3rem;
  border-color: rgb(217, 217, 217) transparent transparent transparent;
  position: absolute;
  right: .6rem;
  bottom: 50%;
  margin-bottom: -.4rem;
}

table.is-sortable thead th.is-sortable.is-sorted-asc::after {
  border-top-color: currentColor;
}
table.is-sortable thead th.is-sortable.is-sorted-desc::before {
  border-bottom-color: currentColor;
}
/*table thead th.is-sortable:hover::before,
table thead td.is-sortable:hover::before {
  border-bottom-color: currentColor;
}
table thead th.is-sortable:hover::after,
table thead td.is-sortable:hover::after {
  border-top-color: currentColor;
}
*/

@media screen and (max-width: 63.9375em) {
  .table--stack thead {
    display: none;
  }
  .table--stack tfoot {
    display: none;
  }
  .table--stack tr,
  .table--stack th,
  .table--stack td {
    display: block;
  }
  .table--stack td {
    border-top: 0;
  }
}




@media only screen and (max-width: 63.9375em) {
  
  .table--responsive {
    width: auto;
    min-width: 100%;
    margin-bottom: 0;
  }
  .table--responsive td,
  .table--responsive th {
    position: relative;
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
  }
  .table__scroll-wrapper {
    position: relative;
    /*overflow-x: auto;*/
    overflow: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid rgb(236, 236, 236);
    border-left: 1px solid rgb(236, 236, 236);
    margin-bottom: 1.618rem;
  }
  /*.table__scroll-wrapper::after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 1.7em;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  }*/
}





/* ========================================================
    Gallery in text
=========================================================== */

.gallit {
  margin-bottom: 1.618rem;
}
.gallit__control--prev,
.gallit__control--next {
  background: none;
}
.gallit__control--prev:hover,
.gallit__control--next:hover {
  border-bottom: none;
}
.gallit__control--prev::before,
.gallit__control--next::before {
  background: none;
  font-family: "wings-website-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: calc(50% - .5em);
  color: white;
  text-shadow: 0 0 3px rgba(0,0,0,.3);
  font-size: 300%;
}

.gallit__control--prev::before {
  content: "\2039";
  content: "‹";

}
.gallit__control--next::before {
  content: "\203a";
  content: "›";
}


/* ========================================================
    LAYOUT
=========================================================== */

  /**[class*="layout__quick"] {
    box-shadow: inset 0 0 2em lime;
  }
  .column {
    box-shadow: inset 0 0 0 1em rgba(200,60,120,.1);
  }
*/


  .layout--overflow-hidden {
    overflow: hidden;
  }

  .column--no-wide-padding {
    padding-left: .9375em;
    padding-right: .9375em;
  }

  @media only screen and (min-width: 40.063em) {
    .layout--inline-block {
      display: inline-block !important;
    }   
  }

  @media only screen and (max-width: 40em) {
    .layout--expand-on-small {
      display: block;
      margin-right: -1.9em;
      margin-left: -1.9em;
      width: auto;
    }
    .column.small-expanded,
    .column--expand-on-small {
      padding: 0;
    }
  }
  @media only screen and (min-width: 40.063em) and (max-width: 63.063em) {
    .layout--expand-on-medium {
      display: block;
      margin-right: -0.9375em;
      margin-left: -0.9375em;
      width: auto;
    }
    .column.medium-expanded,
    .column--expand-on-medium {
      padding: 0;
    }
  }


  body {
    /*background: rgb(236, 236, 236);*/
    /*background: white;*/
  }



/* –––––––––––––––––––––––––––––––––––––––––––
    Page wrapper
–––––––––––––––––––––––––––––––––––––––––––––– */

  .slideout-panel, /* class .slideout-menu will be applied by slidout.js */
  .layout__pagewrapper {
    background: white;
  }
  @media only screen and (min-width: 63.063em) {
    .slideout-panel {
      -webkit-transform: none !important;
          -ms-transform: none !important;
              transform: none !important; /* close opened off-canvas on large screens */
      /* fix by hcb, 2017-07-25: use transform: 'none' to be able to use position: fixed */
    }
    .slideout-open, .slideout-open body, .slideout-open .slideout-panel {
      overflow: auto;
    }
  }

  @media only screen and (max-width: 63em) {
    /* dark overlay */
    .layout__pagewrapper::after {
      content: "";
      position: absolute;
      z-index: 99;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0,0,0,.1);
      opacity: 0;
      pointer-events: none;
      -webkit-transition: opacity .1s ease-out;
      transition: opacity .1s ease-out;
    }
      .slideout-open .layout__pagewrapper::after {
        display: block;
        opacity: 1;
        pointer-events: auto;
        -webkit-transition: opacity .3s ease-out;
        transition: opacity .3s ease-out;
      }
    .no-flexbox .layout__pagewrapper::after { /* detects IE10 and lower */
      display: none;
    }

  }



/* –––––––––––––––––––––––––––––––––––––––––––
    Topbar
–––––––––––––––––––––––––––––––––––––––––––––– */

  .layout__topbar {
    padding: .8rem 0 1.5rem;
  }
    @media only screen and (min-width: 40.063em) {
      .layout__topbar {
        padding: .8rem 0 1rem;
      }   
    }

    @media only screen and (min-width: 63.063em) {
      .layout__topbar {
        padding: .8rem 0 0;
      }   
    }



/* –––––––––––––––––––––––––––––––––––––––––––
    Logo  in Topbar
–––––––––––––––––––––––––––––––––––––––––––––– */

  .layout__logo {
    width: 153px;
  }
    @media only screen and (min-width: 40.063em) {
      .layout__logo {
        /*width: 230px;*/
          width: 313px;
      }       
    }
    @media only screen and (min-width: 63.063em) {
      .layout__logo {
        margin-left: .5em;
      }       
    }



/* –––––––––––––––––––––––––––––––––––––––––––
    Off-Canvas converts to Topbar
–––––––––––––––––––––––––––––––––––––––––––––– */

  .slideout-menu, /* class .slideout-menu will be applied by slidout.js */
  .layout__offcanvas {
    left: auto; /* to open from right side */
    background: white; 
    display: none;
  }
    .slideout-open .slideout-menu,
    .slideout-open .layout__offcanvas {
      display: block;
    }

    /* enable submenu inside off-canvas */
    @media only screen and (max-width: 63em) {
      .layout__offcanvas {
        /*background: white;*/
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
        transition: opacity .3s ease, -webkit-transform .3s ease;
        transition: transform .3s ease, opacity .3s ease;
        transition: transform .3s ease, opacity .3s ease, -webkit-transform .3s ease;
        /*z-index: 1;*/ /* it has z-index 1 already */
        overflow: visible; /* submenu dont show up smoothly when only overflow-y is set to auto */
        /*overflow-y: scroll;*/ 
      }   
      .layout__offcanvas.has-submenu-open {
        -webkit-transform: translate(-100%,0);
        -ms-transform: translate(-100%,0);
        transform: translate(-100%,0);
      }
    }

    @media only screen and (min-width: 63.063em) {
      .layout__offcanvas { /* topbar layout instead of off-canvas */          
        display: block;
        position: absolute;
        z-index: 2;
        right: auto;
        left: 50%;
        top: 0;
        bottom: auto;
        -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
        transform: translate(-50%,0);
        max-width: 62.5em;
        width: 100%;
        /*min-height: 15em;*/
        /*overflow: hidden;*/
        overflow: visible;
        /*background: transparent;*/
      }
    }


  @media only screen and (min-width: 63.063em) {
    .layout__offcanvas {
      /*display: none !important;*/ /* no horizontal scrollbar on IE */ /* hides meta nav */
    }  
  }
  

/* –––––––––––––––––––––––––––––––––––––––––––
    Meta-Navigation  in Offcanvas/Topbar
–––––––––––––––––––––––––––––––––––––––––––––– */

  @media only screen and (min-width: 63.063em) {
    .layout__metanav {
      position: absolute;
      top: 0.8rem;
      right: 4.4rem;
    }
  }

/* –––––––––––––––––––––––––––––––––––––––––––
    Country Select Dropdown
–––––––––––––––––––––––––––––––––––––––––––––– */

  .country-select {
    display: none;
    position: absolute;
    z-index: 100;
    top: 2.4rem;
    right: 2.8rem;
    padding: 0 1rem;
    font-size: 0.85rem;
    text-align: left;
    background: rgb(236, 236, 236);
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
  }

    .country-select .nav__link{
      padding: 0;
    }

    .country-select .icon-up {
      display: none;
    }
    .country-select.is-open .icon-down {
      display: none;
    }
    .country-select.is-open .icon-up {
      display: block;
    }
  

  /* drop-down menu */
  .country-select__menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 1.1rem 0 1rem 0;
    border-top: 1px solid #ffffff;
  }
    .country-select.is-open .country-select__menu{
      display: block;
    }

  /* a country */
  .country-select__item {
    display: flex;
    align-items: center;
    padding: 0.1rem 1rem;
    cursor: pointer;
  }

    /* active country triggers the dropdown */
    .country-select__item--head {
      /* font-weight: bold; */
    }

  .country-select__flag {
    width: 25px;
    padding-right: 0.25em;
  }

  .country-select__icon {
    position: relative;
    top: 0.15em;
    padding-left: 0.25em;
  }

  @media only screen and (min-width: 63.063em) {
    .country-select {
      display: block;
    }
  }

/* –––––––––––––––––––––––––––––––––––––––––––
    Quicksearch  in Offcanvas/Topbar
–––––––––––––––––––––––––––––––––––––––––––––– */

  .layout__quicksearch {
    width: 100%;
    /*padding: 0 .9em;*/
  }
    @media only screen and (min-width: 63.063em) {
      .layout__quicksearch {
        position: absolute;
        top: .55rem;
        right: 1.8rem;
        z-index: 3;
        width: auto;
      }
    }



/* –––––––––––––––––––––––––––––––––––––––––––
    Main-Navigation  in Offcanvas/Topbar
–––––––––––––––––––––––––––––––––––––––––––––– */

  @media only screen and (min-width: 63.063em) {
    .layout__logo {
      margin-bottom: 1.4em; /* add some space for main nav */
    }
    .layout__mainnav {
      background: rgb(236, 236, 236);
    }
  }



/* –––––––––––––––––––––––––––––––––––––––––––
    Main-Navigation Dropdown in Topbar
–––––––––––––––––––––––––––––––––––––––––––––– */

  .layout__dropdown {
    background: rgba(255,255,255,.7);
  }




/* –––––––––––––––––––––––––––––––––––––––––––
    Layout fixed Topbar
–––––––––––––––––––––––––––––––––––––––––––––– */

.topbar--fixed {
  position: fixed;
  z-index: 3;
  top: 0;
  width: 100%;
  overflow: hidden;
  padding: .5em 0;
  background: rgb(236, 236, 236);
  border-bottom: 2px solid white;
  -webkit-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
  -webkit-transition: -webkit-transform .4s ease-in-out;
  transition: -webkit-transform .4s ease-in-out;
  transition: transform .4s ease-in-out;
  transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
}
.topbar--fixed.is-visible {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.topbar--fixed .topbar__item--logo {
  display: none;
  width: 44px;
  margin-right: 2em;
}
@media only screen and (min-width: 50.063em) {
  .topbar--fixed .topbar__item--logo {
    display: inline;
  }
}

.topbar--fixed .topbar__item--heading {
  display: inline-block;
  position: relative;
  top: .6rem;
  margin: .6rem 0 .6rem;
  color: inherit;
  /*margin-right: 30%;*/
  max-width: 67%;
  max-width: 61%;
  padding-right: .5em;
}
@media only screen and (min-width: 40.063em) {
  .topbar--fixed .topbar__item--heading {
    max-width: none;
    margin-right: 0;
  }
}

.topbar--fixed .topbar__item--single {
  position: relative;
  top: .25rem;
  margin-top: 0;
}

.topbar--fixed .topbar__item--category {
  /*display: none;*/
  position: absolute;
  top: -.4rem;
  font-weight: normal;
  font-size: 90%;
  white-space: nowrap;
}
@media only screen and (min-width: 63.063em) {
  .topbar--fixed .topbar__item--category {
    display: inline;
  }
}

.topbar--fixed .topbar__item--cta {
  /*position: absolute;*/
  /*top: 0;*/
  /*right: 0.5rem;*/
  left: auto;
  float: right;
  /*display: none;*/
  max-width: 33%;
  max-width: 39%; /* to fit button label on small phones */
}
@media only screen and (min-width: 40.063em) {
  .topbar--fixed .topbar__item--cta {
    display: block;
  }
}
.topbar--fixed .topbar__item--cta::before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.7em;
  width: 1.7em;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(236, 236, 236, 0) 0%, rgba(236, 236, 236, 1) 80%);
  background: linear-gradient(to right, rgba(236, 236, 236, 0) 0%, rgba(236, 236, 236, 1) 80%);
}


/* –––––––––––––––––––––––––––––––––––––––––––
    Layout banner & content
–––––––––––––––––––––––––––––––––––––––––––––– */

  .layout__banner {
    position: relative;
    /*overflow-y: hidden;*/
    overflow: hidden; /* no horizontal scrolling on small viewport */
    /*background-color: rgb(0, 51, 102);*/
  }


    /* on banner with blue background the bottom margin results in a strange blue line */
    .layout__banner .panel {
      margin-bottom: 0;
    }
    @media only screen and (min-width: 40.063em) {
      .layout__banner .column,
      .layout__banner .column:last-child .panel {
        min-height: 20rem;
      }
    }

  .layout__breadcrumb {
    margin: 2rem 0 0;

  }
  .layout__content {
    margin: 3rem 0 0;
  }
  .layout__scripts-above {
    /* not in use yet */
  }
  .layout__static-content {
    /*padding: 1em 0;*/
    overflow: hidden; /* to cut wider content like images or iframes */
  }
  .layout__script-below {
    /*margin-top: 1.625em;*/ /* add some space to the previous block */
    margin-bottom: 3.5em; /* add some space before the navigation block */
  }
  @media only screen and (min-width: 63.063em) {
    .layout__benefits-aside {
      margin-top: 11rem;
      margin-top: 3em;
      margin-bottom: 1.9em;
    }    
  }




/* –––––––––––––––––––––––––––––––––––––––––––
    Layout footer
–––––––––––––––––––––––––––––––––––––––––––––– */

  .layout__footer-rim {
    padding: 1.6rem 0;
    background: rgb(89, 89,89);
  }
  @media only screen and (min-width: 63.063em) {
    .layout__footer-rim {
      margin-top: 1.625em;
    }
  }

  .layout__footer-nav {
    padding: 1.5rem 0 2rem;
  }





/* ========================================================
    Helper
=========================================================== */

  *[class^='img--'] {
    margin-bottom: .25em; /* match inline spacing if images wrap to a new line */
  }
  .img--smallheight {
    max-height: 48px;
  }
  .img--mediumheight {
    max-height: 64px;
  }
  .img--largeheight {
    max-height: 96px;
  }


  .img--large,
  .img--medium {
    width: 100%;
  }
  @media only screen and (min-width: 40.063em) {
    .img--medium {
      float: left;
      margin-right: 0.9375rem;
      width: 300px;
      max-width: 48%;
    }
  }
  .img--small {
    float: left;
    margin-right: 0.9375rem;
    width: 120px;
    max-width: 33%;
  }
  


  .text-overflow-ellipsis {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .no-margin {
    margin: 0;
  }
  .no-margin-top {
    margin-top: 0;
  }
  .no-margin-right {
    margin-right: 0;
  }
  .no-margin-bottom {
    margin-bottom: 0;
  }
  .no-margin-left {
    margin-left: 0;
  }
  .no-padding {
    padding: 0;
  }
  .no-padding-top {
    padding-top: 0;
  }
  .no-padding-right {
    padding-right: 0;
  }
  .no-padding-bottom {
    padding-bottom: 0;
  }
  .no-padding-left {
    padding-left: 0;
  }
  .position-static {
    position: static;
  }
  .position-relative {
    position: relative;
  }
  .position-absolute {
    position: absolute;
  }

  .padding-right-1 {
    padding-right: 1.875rem;
  }
  .padding-right-2 {
    padding-right: 3.75rem;
  }

  .margin-top-1 {
    margin-top: 1.875rem;
  }



/* ========================================================
    Hacks
   ======================================================== */

.hack-ie-flexbox-limit-grow-on-ratingteaser {
  max-height: 4em; /* Hack IE - this div can grow, but not to much */
}