.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px; }

/** Easings, grabbed from https://css-tricks.com/snippets/sass/easing-map-get-function/
 *
 * Example function call:
    .example {
        animation: there-and-back 2.5s ease(in-quad) infinite alternate;
    }
**/
/*
Usage:
.whatever {
     @include cf();
}
*/
/*
Usage:
.whatever {
     @include tablet{
        float: left;
     }
}
*/
/*
Usage:
.whatever {
    @include skew(25,10);
    @include transform-origin(top left);
}
*/
/**
* Helper
*
* @desc Helper are classes and formattings which are used to accomplish repeating task. Mainly we use ds- for design-task and bv- for behavioral tasks.
* @author [XX]
* @dependency _app_settings.scss
*/
.bv-center {
  margin: 0 auto; }

.bv-width-max {
  max-width: 1185px; }

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

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

.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

/* first for IE 6/7/8 */
@font-face {
  font-family: ClanWeb-Medium;
  src: url(../assets/fonts/ClanWeb-Medium.eot); }

/* then for Mozilla browsers -> Firefox */
@font-face {
  font-family: ClanWeb-Medium;
  src: url(../assets/fonts/ClanWeb-Medium.otf) format("opentype"); }

/**
* Basic Styles
*
* @desc Basic and common styles. Formats for every device live in Common Styles, for device-specific stylings use Mobile First approach.
  @author
*/
body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #FFF;
  font-family: ClanWeb-Medium, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: #FFF;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 0; }

h2 {
  font-size: 18px; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 14px; }

a {
  color: black;
  text-decoration: none; }

#container {
  position: absolute;
  width: 160px;
  height: 600px;
  overflow: hidden; }

#clickthrough {
  position: absolute;
  width: 160px;
  height: 600px;
  cursor: pointer;
  z-index: 104; }

.slideTxt {
  font-size: 21px;
  height: 25px;
  background-color: #cc092f;
  padding: 0 5px 1px 6px;
  line-height: 32px; }

.slideTxtContainer {
  position: relative;
  width: 100%; }

.test-span {
  font-size: 22px;
  padding: 0 5px 1px 6px;
  opacity: 0;
  white-space: nowrap;
  font-family: Arial, sans-serif; }

#screen1Container, #screen2Container, #screen3Container {
  position: absolute;
  width: 160px;
  height: 600px; }

#motiv1 {
  position: absolute;
  width: 160px;
  height: 600px;
  will-change: transform;
  opacity: 0; }

#motiv2 {
  position: absolute;
  width: 160px;
  height: 600px;
  will-change: transform;
  opacity: 0; }

#partnerLogos {
  position: absolute;
  width: 160px;
  height: 600px;
  opacity: 0; }

#slide1Txt, #slide2Txt, #slide3Txt {
  position: absolute;
  width: 280px;
  margin-left: 7px;
  opacity: 0; }
  #slide1Txt h2 span, #slide2Txt h2 span, #slide3Txt h2 span {
    padding: 5px 7px 3px 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-color: #cc092f; }

.cta {
  position: absolute;
  opacity: 1;
  text-align: center;
  width: 160px;
  height: 20px;
  bottom: 148px; }
  .cta span {
    text-align: center;
    display: inline-block;
    padding: 8px 4px 5px 4px;
    width: 140px;
    font-size: 12px;
    overflow: hidden;
    box-sizing: border-box; }

#mousehand {
  position: absolute;
  bottom: 100px;
  left: -40px;
  z-index: 102; }

#logo {
  position: absolute;
  width: 160px;
  height: 203px;
  bottom: 0;
  right: 0;
  background-color: none; }
  #logo img {
    position: absolute;
    right: 9px;
    width: 142px;
    bottom: 47px; }

#url_logo {
  position: absolute;
  bottom: 0;
  width: 160px;
  height: 33px; }

#frame {
  position: absolute;
  width: 158px;
  height: 598px;
  border: 1px solid dimgrey;
  z-index: 103; }

.ie,
.ie:after {
  background-color: #cc092f; }

.ie {
  position: relative;
  line-height: 1;
  color: #fff;
  display: inline;
  white-space: pre-wrap;
  border: 0 solid #cc092f;
  border-width: 0.25em 0;
  /* 0.25em is roughly equal to one space character. */ }

.ie:after {
  content: "";
  position: absolute;
  top: -0.25em;
  right: 100%;
  bottom: -0.25em;
  width: 0.25em; }

.ie > span {
  position: relative;
  padding: 0 !important; }

nav {
  position: relative;
  box-sizing: border-box; }
  nav ul.nav-first {
    width: 100%;
    padding: 0;
    margin: 0;
    float: right;
    position: absolute;
    text-align: right; }
    nav ul.nav-first > li {
      text-transform: uppercase;
      padding: 5px;
      display: inline-block;
      background-color: red; }
      nav ul.nav-first > li:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: green;
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: 0;
        box-sizing: border-box;
        max-height: 0;
        z-index: -1;
        animation: shine-reverse 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53); }
      nav ul.nav-first > li:hover {
        cursor: pointer;
        background: rgba(19, 28, 88, 0.1);
        transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        nav ul.nav-first > li:hover ul.nav-second {
          display: block;
          max-height: 1000px;
          transition: max-height 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53); }
    nav ul.nav-first .nav-second {
      position: absolute;
      padding: 0;
      width: auto;
      margin-left: -5px;
      text-align: left;
      max-height: 0;
      overflow: hidden;
      color: black;
      background: red; }
      nav ul.nav-first .nav-second > li {
        padding: 5px;
        height: 200px;
        max-height: 20px;
        background-color: red; }
        nav ul.nav-first .nav-second > li:hover {
          cursor: pointer;
          background: rgba(19, 28, 88, 0.2);
          transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }