/* Box system */
.full, .one_half, .one_third, .two_third, .one_fourth, .two_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth {
  overflow: hidden;
  float: left;
  position: relative;
  display: block; }
  @media screen and (max-width: 700px) {
    .full, .one_half, .one_third, .two_third, .one_fourth, .two_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth {
      width: 100% !important;
      margin-left: 0px !important;
      float: none; } }

.full {
  margin-left: 0;
  width: 100%; }

.one_half {
  margin-left: 4%;
  width: 48%; }
  .one_half.no-margin {
    margin-left: 0px;
    width: 50%; }
  .one_half.centered.first {
    margin-left: 26% !important; }
    @media screen and (max-width: 700px) {
      .one_half.centered.first {
        margin-left: 0px !important; } }

.one_third {
  margin-left: 5%;
  width: 30%; }
  .one_third.no-margin {
    margin-left: 0px;
    width: 35%; }
  .one_third.centered.first {
    margin-left: 15% !important; }
    @media screen and (max-width: 700px) {
      .one_third.centered.first {
        margin-left: 0px !important; } }

.two_third {
  margin-left: 5%;
  width: 65%; }

.one_fourth {
  margin-left: 4%;
  width: 22%; }

.two_fourth {
  margin-left: 4%;
  width: 48%; }

.three_fourth {
  margin-left: 4%;
  width: 74%; }

.one_fifth {
  overflow: hidden;
  margin-left: 5%;
  width: 16%; }

.two_fifth {
  overflow: hidden;
  margin-left: 4%;
  width: 37%; }

.three_fifth {
  margin-left: 4%;
  width: 57%; }

.four_fifth {
  margin-left: 4%;
  width: 79%; }

.full.first, .one_fifth.first, .one_fourth.first, .two_fourth.first, .one_third.first, .two_fifth.first, .one_half.first, .three_fifth.first, .two_third.first, .three_fourth.first, .four_fifth.first {
  margin-left: 0 !important;
  clear: left; }

/* BOXEN SPECIAL */
a.teaser {
  display: block;
  position: relative;
  border-top: 1px solid #FBCE4D;
  border-bottom: 1px solid #FBCE4D;
  overflow: visible; }
  a.teaser .ce_text, a.teaser figure {
    margin-bottom: 0px !important; }
  a.teaser img {
    display: block; }
  a.teaser .overlay {
    transition: all 300ms ease;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%; }
  a.teaser .description {
    width: 100%;
    color: #FBCE4D;
    position: absolute;
    top: -25px;
    text-transform: uppercase;
    font-size: 1.2em;
    text-align: center;
    -webkit-animation: slide-up 600ms 1;
    -moz-animation: slide-up 600ms 1;
    -o-animation: slide-up 600ms 1;
    animation: slide-up 600ms 1;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }
@-webkit-keyframes slide-up {
  0% {
    top: 50%; }
  20% {
    top: 52%; }
  100% {
    top: -25px; } }
@-moz-keyframes slide-up {
  0% {
    top: 50%; }
  20% {
    top: 52%; }
  100% {
    top: -25px; } }
@-o-keyframes slide-up {
  0% {
    top: 50%; }
  20% {
    top: 52%; }
  100% {
    top: -25px; } }
@keyframes slide-up {
  0% {
    top: 50%; }
  20% {
    top: 52%; }
  100% {
    top: -25px; } }
  a.teaser:hover .description {
    color: #FFF;
    transform: translate(-50%, -50%);
    left: 50%;
    -webkit-animation: slide-down 600ms 1;
    -moz-animation: slide-down 600ms 1;
    -o-animation: slide-down 600ms 1;
    animation: slide-down 600ms 1;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }
@-webkit-keyframes slide-down {
  0% {
    top: 0; }
  80% {
    top: 52%; }
  100% {
    top: 50%; } }
@-moz-keyframes slide-down {
  0% {
    top: 0; }
  80% {
    top: 52%; }
  100% {
    top: 50%; } }
@-o-keyframes slide-down {
  0% {
    top: 0; }
  80% {
    top: 52%; }
  100% {
    top: 50%; } }
@keyframes slide-down {
  0% {
    top: 0; }
  80% {
    top: 52%; }
  100% {
    top: 50%; } }
  a.teaser:hover .overlay {
    background-color: #FBCE4D;
    opacity: 0.7; }

a.quick-product {
  transition: all 300ms ease;
  padding: 20px;
  box-sizing: border-box;
  color: #FBCE4D;
  text-align: center; }
  a.quick-product:hover {
    text-decoration: none;
    background-color: rgba(251, 206, 77, 0.2); }
  a.quick-product figure {
    margin-bottom: 30px; }
    a.quick-product figure img {
      max-width: 80%;
      margin: 0 auto; }

.fly-away.flying {
  -webkit-animation: fly 500ms 1;
  -moz-animation: fly 500ms 1;
  -o-animation: fly 500ms 1;
  animation: fly 500ms 1;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }
@-webkit-keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  10% {
    transform: translate(0, 0) rotate(0deg) scale(1.1); }
  100% {
    opacity: 0;
    transform: translate(600px, -100px) rotate(90deg) scale(0.1); } }
@-moz-keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  10% {
    transform: translate(0, 0) rotate(0deg) scale(1.1); }
  100% {
    opacity: 0;
    transform: translate(600px, -100px) rotate(90deg) scale(0.1); } }
@-o-keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  10% {
    transform: translate(0, 0) rotate(0deg) scale(1.1); }
  100% {
    opacity: 0;
    transform: translate(600px, -100px) rotate(90deg) scale(0.1); } }
@keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  10% {
    transform: translate(0, 0) rotate(0deg) scale(1.1); }
  100% {
    opacity: 0;
    transform: translate(600px, -100px) rotate(90deg) scale(0.1); } }
/*.info
 * padding: 20px
 * background-color: $color-gold
 * color: $color-font-light
 * display: inline-block */
.slide-left {
  -webkit-animation: slide-to-left 500ms 1;
  -moz-animation: slide-to-left 500ms 1;
  -o-animation: slide-to-left 500ms 1;
  animation: slide-to-left 500ms 1;
  animation-delay: 500ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }
@-webkit-keyframes slide-to-left {
  0% {
    transform: translate(0px, 0);
    opacity: 1; }
  100% {
    transform: translate(-2000px, 0);
    opacity: 0; } }
@-moz-keyframes slide-to-left {
  0% {
    transform: translate(0px, 0);
    opacity: 1; }
  100% {
    transform: translate(-2000px, 0);
    opacity: 0; } }
@-o-keyframes slide-to-left {
  0% {
    transform: translate(0px, 0);
    opacity: 1; }
  100% {
    transform: translate(-2000px, 0);
    opacity: 0; } }
@keyframes slide-to-left {
  0% {
    transform: translate(0px, 0);
    opacity: 1; }
  100% {
    transform: translate(-2000px, 0);
    opacity: 0; } }
body.fade-in-page {
  opacity: 0;
  -webkit-animation: fade-in-an 500ms 1;
  -moz-animation: fade-in-an 500ms 1;
  -o-animation: fade-in-an 500ms 1;
  animation: fade-in-an 500ms 1;
  animation-delay: 500ms;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }
@-webkit-keyframes fade-in-an {
  0% {
    transform: scale(0);
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes fade-in-an {
  0% {
    transform: scale(0);
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes fade-in-an {
  0% {
    transform: scale(0);
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fade-in-an {
  0% {
    transform: scale(0);
    opacity: 0; }
  100% {
    opacity: 1; } }
body a, #header ul.som, #container .center, #container .right {
  font-family: Verdana, sans-serif;
  font-size: 26px;
  font-weight: bold; }
  @media screen and (max-width: 650px) {
    body a, #header ul.som, #container .center, #container .right {
      font-size: 19px; } }

#container .left .inside {
  font-family: Verdana, sans-serif;
  font-size: 8em;
  font-weight: bold; }
  @media screen and (max-width: 650px) {
    #container .left .inside {
      font-size: 6em; } }

body a {
  font-style: italic; }

* {
  margin: 0px;
  padding: 0px; }

body {
  overscroll-behavior: none; }
  body a {
    color: #000;
    text-decoration: none;
    cursor: crosshair;
    width: 100%;
    display: block;
    padding: 1px;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent; }
    body a:hover {
      text-decoration: none;
      border-color: #000; }
  body img.preview-img {
    width: 300px;
    height: 200px;
    background-color: #f1f1f1;
    position: fixed; }
  body video:focus {
    outline: none; }
  body video.preview-video {
    z-index: -1;
    width: 350px;
    height: auto;
    background-color: transparent;
    position: fixed;
    transition: all 10000ms ease-out;
    opacity: 1;
    transform: scale(1); }
    @media screen and (max-width: 650px) {
      body video.preview-video {
        left: 0px;
        width: 100%; } }
    body video.preview-video.disolve {
      z-index: -1;
      opacity: 0;
      transform: scale(0); }
    body video.preview-video.active {
      border: 1px solid #000;
      z-index: 999; }
      @media screen and (max-width: 650px) {
        body video.preview-video.active {
          border: none;
          border-top: 1px solid #000;
          border-bottom: 1px solid #000; } }

#header {
  position: fixed;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto; }
  #header ul.som {
    display: flex;
    justify-content: space-between; }
    #header ul.som li {
      list-style-type: none; }
      #header ul.som li:nth-child(1) {
        width: 66%; }
      #header ul.som li:nth-child(2) {
        width: 23%; }
      #header ul.som li:nth-child(3) {
        width: 10%;
        text-align: right; }

#container {
  position: relative;
  z-index: 9;
  padding-top: 200px; }
  #container.nopadding {
    padding-top: 15px; }
    @media screen and (max-width: 650px) {
      #container.nopadding {
        padding-top: 200px; }
        #container.nopadding .center {
          padding-top: 0px !important; } }
    #container.nopadding .center {
      padding-top: 200px; }
  #container .left {
    position: fixed;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -25px; }
    @media screen and (max-width: 650px) {
      #container .left {
        width: 20%;
        margin-top: -14px; } }
    #container .left .inside {
      display: inline-block;
      transform-origin: center;
      display: inline-block;
      transform: rotate(-90deg) translate(0.55em, -0.5em);
      transform-origin: right; }
    #container .left .creative {
      position: absolute;
      perspective: 210px;
      width: 150px;
      top: 241%;
      right: 2px;
      text-align: right; }
      @media screen and (max-width: 650px) {
        #container .left .creative {
          display: none; } }
      #container .left .creative.normal {
        top: 400%; }
        #container .left .creative.normal a {
          transform: rotateX(-22deg) rotateZ(-8deg) rotateY(45deg) skewX(-1deg) skewY(1deg) translateX(40px) translateY(-25px); }
          #container .left .creative.normal a:hover {
            transform: rotateX(-16deg) rotateZ(-13deg) rotateY(43deg) skewX(-9deg) skewY(6deg) translateX(36px) translateY(-25px); }
            #container .left .creative.normal a:hover:before {
              left: -40%;
              width: 60%;
              transform: rotateX(0deg) rotateZ(-45deg) rotateY(0deg) skewX(0deg) skewY(0deg) translateX(0px) translateY(0px); }
            #container .left .creative.normal a:hover:after {
              left: -28%;
              width: 44%;
              transform: rotateX(0deg) rotateZ(48deg) rotateY(0) skewX(0deg) skewY(0deg) translateX(8px) translateY(28px); }
      #container .left .creative a {
        transform: rotateX(-22deg) rotateZ(-8deg) rotateY(45deg) skewX(-9deg) skewY(1deg) translateX(40px) translateY(-25px);
        display: inline-block;
        position: relative; }
        #container .left .creative a:hover {
          transform: rotateX(-22deg) rotateZ(-8deg) rotateY(48deg) skewX(-9deg) skewY(1deg) translateX(56px) translateY(5px);
          border-top: 1px solid black;
          border-bottom: 1px solid black; }
          #container .left .creative a:hover:before {
            position: absolute;
            content: "";
            height: 100%;
            left: -60%;
            background-color: grey;
            width: 80%;
            height: 1px;
            transform: rotateX(0deg) rotateZ(-45deg) rotateY(0deg) skewX(0deg) skewY(0deg) translateX(0px) translateY(0px); }
          #container .left .creative a:hover:after {
            position: absolute;
            content: "";
            height: 100%;
            left: -60%;
            background-color: grey;
            width: 100%;
            height: 1px;
            transform: rotateX(0deg) rotateZ(48deg) rotateY(0) skewX(0deg) skewY(0deg) translateX(22px) translateY(30px); }
  #container .center {
    box-sizing: border-box;
    float: left;
    width: 60%;
    margin-left: 30%; }
    @media screen and (max-width: 650px) {
      #container .center {
        margin-left: 20%;
        width: 70%; } }
    #container .center ul li {
      list-style-type: none; }
    #container .center .divider {
      width: 20px;
      margin: 10px 0px;
      height: 1px;
      background-color: #999; }
  #container .right {
    top: 0px;
    height: 100vh;
    width: 10%;
    position: fixed;
    left: 90%; }
    @media screen and (max-width: 650px) {
      #container .right {
        left: 90%; } }
    #container .right .sufix {
      position: absolute;
      transition: all 300ms ease-in-out;
      top: 238px; }
      #container .right .sufix.dash {
        margin-left: -26px; }

#header {
  top: 0px;
  left: 0px;
  z-index: 999999;
  position: fixed; }
  #header .creative {
    display: inline-block; }
    #header .creative a {
      font-style: normal; }

#footer {
  bottom: 80px;
  right: -23px;
  z-index: 999999;
  position: fixed;
  font-weight: bold; }
  @media screen and (max-width: 650px) {
    #footer {
      bottom: 128px;
      right: -100px;
      bottom: 160px;
      right: -115px; } }
  #footer .contact {
    display: inline-block;
    transform-origin: center;
    transform: rotate(-90deg); }
    #footer .contact span.onlymobile {
      display: none;
      padding-left: 5px; }
      @media screen and (max-width: 650px) {
        #footer .contact span.onlymobile {
          display: inline; } }
    #footer .contact a {
      width: auto;
      display: inline-block;
      font-style: normal; }
      #footer .contact a.onlymobile {
        display: none; }
        @media screen and (max-width: 650px) {
          #footer .contact a.onlymobile {
            display: inline-block; } }

@media screen and (max-width: 650px) {
  body.creative #footer {
    bottom: 160px;
    right: -115px; } }

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