/*
 *
 * Animationen
 * ------------------------------------------
 * Animationen werden durch jQuery getriggert
 * und mit CSS ausgeführt
 *
 *
 */


/* ====== Menu ====== */

#burger span {
  width       : 0;
  transition  : ease-out .3s;
}

#burger span.stroke {
  width : 30px;
}

#burger span.line-1.stroke.animate {
  top : 10px;
  -webkit-transform : rotate(315deg);
  transform         : rotate(315deg);
}

#burger span.line-3.stroke.animate {
  top               : 10px;
  -webkit-transform : rotate(-315deg);
  transform         : rotate(-315deg);
}

#burger span.line-2.stroke.animate {
  opacity     : 0;
  transition  : none;
}

#menu.animate {
  bottom  : 0%
}
/*
#menu.animate li {
  opacity     : 1;
  transition  : all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#menu ul li.animate:nth-child(1) {
  top               : 0;
  transition-delay  : .3s;
}

#menu ul li.animate:nth-child(2) {
  top               : 80px;
  transition-delay  : .4s;
}

#menu ul li.animate:nth-child(3) {
  top               : 160px;
  transition-delay  : .5s;
}

#menu ul li.animate:nth-child(4) {
  top               : 240px;
  transition-delay  : .6s;
}

#menu ul li.animate:nth-child(5) {
  top               : 320px;
  transition-delay  : .7s;
}

#menu ul li.animate:nth-child(6) {
  top               : 400px;
  transition-delay  : .8s;
}

#menu ul li.animate:nth-child(7) {
  top               : 480px;
  transition-delay  : .9s;
}
*/
/* Words */

#word-1 { left  : 40%;  transition  : ease 6s;  }
#word-2 { left  : 48%;  transition  : ease 7s;  }
#word-3 { left  : 48%;  transition  : ease 8s;  }

/* Big Number */

.big-number {
  margin-top  : 60px;
  opacity     : 0;
  transition  : ease .3s;
}

.big-number.animate {
  margin-top  : 0;
  opacity     : 1;
}

.big-1 h6,
.big-2 h6,
.big-3 h6,
.big-4 h6,
.big-5 h6 {
  font-size         : 450px;
  font-family       : "Akzidenz-BoldCond";
}

.big-1,
.big-2,
.big-3,
.big-4,
.big-5 {
  color             : #f2f2f2;
  position          : absolute;
  top               : 50%;
  -wekit-transform  : translateY(-50%);
  transform         : translateY(-50%);
}

.big-1, .big-3, .big-5 {
  right : -90px;
}

.big-2, .big-4 {
  left  : -90px;
}

/* ===== Animationen ab einer Breite von 1024px ====== */

@media screen and (min-width : 1024px) {

  /* Pagination */
  #pagination a {
    -webkit-transform : scale(0);
    transform         : scale(0);

  }

  #pagination a.animate {
    -webkit-transform : scale(1);
    transform         : scale(1);
    transition        : ease-out .3s;
  }

  /* Direction */
  #prev.animate,
  #next.animate {
    opacity : 1;
  }

  /* Hover */

  .cta {
   position : relative;
   overflow : hidden;
   transition : ease .3s;
  }

  .cta:after {
    content    : "";
    display    : block;
    width      : 100%;
    height     : 0;
    background : #FFF;
    position   : absolute;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%) rotate(45deg);
    transition : ease-out .3s;
    z-index    : -1;
  }

  .cta:hover {
    color  : #de1624;
  }

  .cta:hover:after {
    height  : 420%;
  }


  /* Form Animation */
  .form {
    margin-bottom  : -50%;
    transition     :  all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
  }

  .form.animate {
    margin-bottom  : 0;
  }

  .form-2_red.animate,
  .form-2_darkgrey.animate {
    height  : 70%;
  }

  .form-2.animate {
    top : 70%;
  }

  /* Packshot Animation */

  .packshot {
    margin-bottom : -30%;
    transition    : all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .packshots {
    margin-bottom : -100%;
    transition    : ease-out .9s;
  }

  .packshots:nth-child(1) {    transition-delay : .2s;  }
  .packshots:nth-child(2) {    transition-delay : .15s;  }
  .packshots:nth-child(3) {    transition-delay : .1s;  }
  .packshots:nth-child(4) {    transition-delay : .05s;  }
  .packshots:nth-child(5) {    transition-delay : 0;  }

  .packshot.animate,
  .packshots.animate {
    margin-bottom : 0;
  }

  .packshot.animate.transform,
  .packshots.animate.transform {
    margin-bottom : -30px;
  }

  .packshot.scroll,
  .packshots.scroll {
    opacity     : 0;
    visibility  : hidden;
}

  /* Teaser Text Animation */
  .teaser-text,
  .teaser-text_packshots  {
    margin-top  : 100%;
    transition  : all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .teaser-text.animate,
  .teaser-text_packshots.animate {
    margin-top: 0;
  }

  /* Stroke Lines Animation */

  /* === Stroke Lines === */
  /* Number Box */

  .number-box_right,
  .number-box_left {
    width     : 120px;
    height    : 120px;
    position  : absolute;
    top       : -90px;
    color     : #de1624;
  }

  .number-box_right { right : -100px;}
  .number-box_left  { left  : -100px;}

  .stroke-line_onscroll h4 {
    position          : absolute;
    top               : 50%;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
  }

   #stroke-line_onload {
    width     : 120px;
    height    : 120px;
    position  : absolute;
    top       : 200px;
    right     : 10%;
    z-index   : 3;
  }

  .stroke-line_onscroll {
    width     : 120px;
    height    : 120px;
    position  : absolute;
    z-index   : 3;
  }

  .number-box_left  {  left   : -90px; }
  .number-box_right {  right  : -90px; }


  #stroke-line_onload h4,
  .stroke-line_onscroll h4 {
    width             : 200%;
    font-family       : "Akzidenz-BoldCond";
    text-transform    : uppercase;
    color             : #de1624;
    letter-spacing    : 3px;
    font-size         : 20px;
    position          : absolute;
    top               : 50%;
    -webkit-transform : translateY(-50%);
    transform         : translateY(-50%);
  }

  .stroke-line {
    height  : 120px;
    width   : 120px;
  }

  .line {
    display     : block;
    background  : #EEE;
    position    : absolute;
  }

  .line-top {
    top   : 0;
    left  : 0;
  }

  .line-right {
    right   : 0;
    top     : 0;
  }

  .line-bottom {
    bottom  : 0;
    right   : 0;
  }

  .line-left {
    left    : 0;
    bottom  : 0;
  }

  #stroke-line_onload h4 {
    left              : -80%;
    opacity           : 0;
    transition        : ease-in .3s;
    transition-delay  : 2.4s;
  }

  #stroke-line_onload.animate h4 {
    left    : -100%;
    opacity : 1;
  }

  .stroke-line_onscroll h4 {
    left              : 15px;
    opacity           : 0;
    transition        : ease-in .3s;
    transition-delay  : 2.4s;
  }

  .stroke-line_onscroll.animate h4 {
    left    : 15px;
    opacity : 1;
  }

  .line-top,
  .line-bottom {
    width       : 0;
    height      : 5px;
    transition  : ease-out .3s;
  }

  .line-right,
  .line-left {
    width       : 5px;
    height      : 0;
    transition  : ease-out .3s;
  }

  #stroke-line_onload.animate .line-top,
  .stroke-line_onscroll.animate .line-top {
    width             : 100%;
    transition-delay  : 1s;
  }

  #stroke-line_onload.animate .line-right,
  .stroke-line_onscroll.animate .line-right {
    height            : 100%;
    transition-delay  :  1.3s;
  }


  #stroke-line_onload.animate .line-bottom,
  .stroke-line_onscroll.animate .line-bottom {
    width             : 100%;
    transition-delay  : 1.6s;
  }

  #stroke-line_onload.animate .line-left,
  .stroke-line_onscroll.animate .line-left {
    height            : 100%;
    transition-delay  : 1.9s;
  }

  /* Scroll Down */

  .scroll-down {
    height            : 0;
    overflow          : hidden;
    transition        : ease-out .3s;
    transition-delay  : 1s;
  }

  .scroll-down.stroke {
    height  : 90px;
  }

  .more {
    left              : 30px;
    opacity           : 0;
    transition        : ease-out .3s;
    transition-delay  : 1.5s;
  }
  .scroll-down.stroke .more {
    opacity : 1;
    left    : 45px;
  }

  /* Hover Animation (Words) */

  #word-1.animate { left  : 35%;  }
  #word-2.animate { left  : 50%;  }
  #word-3.animate { left  : 45%;  }

  #word-1.animate.transform { left  : 40%;  }
  #word-2.animate.transform { left  : 48%;  }
  #word-3.animate.transform { left  : 48%;  }

  /* Animationen die beim Scrollen ausgeführt werden */

  .box-red,
  .box-darkgrey {
    width : 0;
    transition  : ease-in .6s;
  }

  .packshot_text {
    margin-left : -30px;
    opacity     : 0;
    transition  : ease-in .6s;
  }

  .packshot_text.animate {
    margin-left : 0;
    opacity     : 1;
  }

  .text-box hgroup {
    margin-left       : 60px;
    transition        : ease-out .3s;
    transition-delay  : .6s;
    opacity           : 0;
  }

  .text-box p {
    transition        : ease-out .3s;
    transition-delay  : .8s;
    opacity           : 0;
  }

  .box-red.animate,
  .box-darkgrey.animate {
    width : 100%;
  }

  .text-box hgroup.animate {
    margin-left: 0;
    opacity : 1;
  }

  .text-box p.animate {
    opacity : 1;
  }

}

@media screen and (max-width  : 1024px) {

  /* Big Number */

  .big-1, .big-3, .big-5, .big-2, .big-4 {
    right : auto;
    left  : -25px;
  }

  .big-1 h6, .big-3 h6, .big-5 h6, .big-2 h6, .big-4 h6 {
    font-size : 300px;
    z-index   : -1;
  }

  #menu ul li.animate:nth-child(1) {
    top : 0;
  }

  #menu ul li.animate:nth-child(2) {
    top : 70px;
  }

  #menu ul li.animate:nth-child(3) {
    top : 140px;
  }

  #menu ul li.animate:nth-child(4) {
    top : 210px;
  }

  #menu ul li.animate:nth-child(5) {
    top : 280px;
  }

  #menu ul li.animate:nth-child(6) {
    top : 350px;
  }

}

@media screen and (max-width: 769px) {

  .number-box_right,
  .number-box_left {
    display : none;
  }

  #menu ul li.animate:nth-child(1) {
    top : 0;
  }

  #menu ul li.animate:nth-child(2) {
    top : 40px;
  }

  #menu ul li.animate:nth-child(3) {
    top : 80px;
  }

  #menu ul li.animate:nth-child(4) {
    top : 120px;
  }

  #menu ul li.animate:nth-child(5) {
    top : 160px;
  }

  #menu ul li.animate:nth-child(6) {
    top : 200px;
  }
}

@media screen and (max-width: 568px) {

  .big-number,
  .big-number {
    position  : static;
  }

  .big-1 h6, .big-3 h6, .big-5 h6, .big-2 h6, .big-4 h6 {
    font-size: 120px;
    line-height : 60px;
    -wekit-transform: translateY(-25%);
    transform: translateY(-25%);
  }

}