/* -----------------------------------------------------------------------------
   Text-switcher
----------------------------------------------------------------------------- */

.text-switcher {
  color: #fff;
  max-width: 600px;
  margin: 0 auto;
  top: 300px;
  right: 20px;
  font-size: 3rem;
  line-height: 1.3;
  font-weight: bold;
}

.tc__line {
  position: relative;
  overflow: hidden;
  height: 4rem;
}

.tc__line span {
  display: block;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.tc__line span.tc__bottom {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}

.tc__line span.tc__in {
  -webkit-animation-name: tc-switch-in;
  animation-name: tc-switch-in;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.tc__line span.tc__out {
  -webkit-animation-name: tc-switch-out;
  animation-name: tc-switch-out;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.tc__line:nth-child(2) span {
  -webkit-animation-delay: 50ms;
  animation-delay: 50ms;
}

.tc__line:nth-child(3) span {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.tc__line:nth-child(4) span {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}

.tc__line:nth-child(5) span {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

/* Move in */
@-webkit-keyframes 
tc-switch-in {  to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 opacity: 1;
}
}
@keyframes 
tc-switch-in {  to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 opacity: 1;
}
}

/* Move out */
@-webkit-keyframes 
tc-switch-out {  to {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 opacity: 0;
}
}
@keyframes 
tc-switch-out {  to {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 opacity: 0;
}
}

/* -----------------------------------------------------------------------------
   Demo
----------------------------------------------------------------------------- */

body {
  font-family: 'Roboto';
  text-align: left;
  background: #333;
  color: #fff;
}

/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl90ZXh0LXN3aXRjaGVyLnNjc3MiLCJzdHlsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztnRkFFZ0Y7QUFFaEY7RUFDRSxZQUFXO0VBQ1gsaUJBQWdCO0VBQ2hCLGVBQWM7RUFDZCxXQUFVO0VBQ1YsWUFBVztFQUNYLGdCQUFlO0VBQ2YsaUJBQWdCO0VBQ2hCLGtCQUFpQixFQUNsQjs7QUFFRDtFQUNFLG1CQUFrQjtFQUNsQixpQkFBZ0I7RUFDaEIsYUFBWSxFQW1EYjtFQXRERDtJQU1JLGVBQWM7SUFDZCx3Q0FBK0I7WUFBL0IsZ0NBQStCLEVBNEJoQztJQW5DSDtNQVVNLG1CQUFrQjtNQUNsQixPQUFNO01BQ04sUUFBTztNQUNQLG9DQUEyQjtVQUEzQixnQ0FBMkI7Y0FBM0IsNEJBQTJCO01BQzNCLFdBQVUsRUFDWDtJQWZMO01Ba0JNLHFDQUE0QjtjQUE1Qiw2QkFBNEI7TUFDNUIsa0NBQXlCO2NBQXpCLDBCQUF5QjtNQUN6Qiw0Q0FBbUM7Y0FBbkMsb0NBQW1DO01BQ25DLG9DQUEyQjtjQUEzQiw0QkFBMkI7TUFDM0IscUNBQTRCO2NBQTVCLDZCQUE0QjtNQUM1QixzQ0FBNkI7Y0FBN0IsOEJBQTZCLEVBQzlCO0lBeEJMO01BMkJNLHNDQUE2QjtjQUE3Qiw4QkFBNkI7TUFDN0Isa0NBQXlCO2NBQXpCLDBCQUF5QjtNQUN6Qiw0Q0FBbUM7Y0FBbkMsb0NBQW1DO01BQ25DLG9DQUEyQjtjQUEzQiw0QkFBMkI7TUFDM0IscUNBQTRCO2NBQTVCLDZCQUE0QjtNQUM1QixzQ0FBNkI7Y0FBN0IsOEJBQTZCLEVBQzlCO0VBakNMO0lBdUNJLDhCQUFxQjtZQUFyQixzQkFBcUIsRUFDdEI7RUF4Q0g7SUEyQ0ksK0JBQXNCO1lBQXRCLHVCQUFzQixFQUN2QjtFQTVDSDtJQStDSSwrQkFBc0I7WUFBdEIsdUJBQXNCLEVBQ3ZCO0VBaERIO0lBbURJLCtCQUFzQjtZQUF0Qix1QkFBc0IsRUFDdkI7O0FBS0gsYUFBYTtBQUNiO0VBQ0U7SUFDRSx3Q0FBK0I7WUFBL0IsZ0NBQStCO0lBQy9CLFdBQVUsRUFBQSxFQUFBO0FBSGQ7RUFDRTtJQUNFLHdDQUErQjtZQUEvQixnQ0FBK0I7SUFDL0IsV0FBVSxFQUFBLEVBQUE7O0FBSWQsY0FBYztBQUNkO0VBQ0U7SUFDRSw0Q0FBbUM7WUFBbkMsb0NBQW1DO0lBQ25DLFdBQVUsRUFBQSxFQUFBO0FBSGQ7RUFDRTtJQUNFLDRDQUFtQztZQUFuQyxvQ0FBbUM7SUFDbkMsV0FBVSxFQUFBLEVBQUE7O0FDaEZkOztnRkFFZ0Y7QUFFaEY7RUFDRSw0QkFBMkI7RUFDM0IsaUJBQWdCO0VBQ2hCLGlCQUFnQjtFQUNoQixZQUFXLEVBQ1oiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cclxuICAgVGV4dC1zd2l0Y2hlclxyXG4tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLSAqL1xyXG5cclxuLnRleHQtc3dpdGNoZXIge1xyXG4gIGNvbG9yOiAjZmZmO1xyXG4gIG1heC13aWR0aDogNjAwcHg7XHJcbiAgbWFyZ2luOiAwIGF1dG87XHJcbiAgdG9wOiAzMDBweDtcclxuICByaWdodDogMjBweDtcclxuICBmb250LXNpemU6IDNyZW07XHJcbiAgbGluZS1oZWlnaHQ6IDEuMztcclxuICBmb250LXdlaWdodDogYm9sZDtcclxufVxyXG5cclxuLnRjX19saW5lIHtcclxuICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcclxuICBoZWlnaHQ6IDRyZW07XHJcblxyXG4gIHNwYW4ge1xyXG4gICAgZGlzcGxheTogYmxvY2s7XHJcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xyXG5cclxuICAgICYudGNfX2JvdHRvbSB7XHJcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgICAgdG9wOiAwO1xyXG4gICAgICBsZWZ0OiAwO1xyXG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwJSk7XHJcbiAgICAgIG9wYWNpdHk6IDA7XHJcbiAgICB9XHJcblxyXG4gICAgJi50Y19faW4ge1xyXG4gICAgICBhbmltYXRpb24tbmFtZTogdGMtc3dpdGNoLWluO1xyXG4gICAgICBhbmltYXRpb24tZHVyYXRpb246IDUwMG1zO1xyXG4gICAgICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLW91dDtcclxuICAgICAgYW5pbWF0aW9uLWRpcmVjdGlvbjogbm9ybWFsO1xyXG4gICAgICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiAxO1xyXG4gICAgICBhbmltYXRpb24tZmlsbC1tb2RlOiBmb3J3YXJkcztcclxuICAgIH1cclxuXHJcbiAgICAmLnRjX19vdXQge1xyXG4gICAgICBhbmltYXRpb24tbmFtZTogdGMtc3dpdGNoLW91dDtcclxuICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiA1MDBtcztcclxuICAgICAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1vdXQ7XHJcbiAgICAgIGFuaW1hdGlvbi1kaXJlY3Rpb246IG5vcm1hbDtcclxuICAgICAgYW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDogMTtcclxuICAgICAgYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7XHJcbiAgICB9XHJcblxyXG4gIH1cclxuXHJcblxyXG4gICY6bnRoLWNoaWxkKDIpIHNwYW4ge1xyXG4gICAgYW5pbWF0aW9uLWRlbGF5OiA1MG1zO1xyXG4gIH1cclxuXHJcbiAgJjpudGgtY2hpbGQoMykgc3BhbiB7XHJcbiAgICBhbmltYXRpb24tZGVsYXk6IDEwMG1zO1xyXG4gIH1cclxuXHJcbiAgJjpudGgtY2hpbGQoNCkgc3BhbiB7XHJcbiAgICBhbmltYXRpb24tZGVsYXk6IDE1MG1zO1xyXG4gIH1cclxuXHJcbiAgJjpudGgtY2hpbGQoNSkgc3BhbiB7XHJcbiAgICBhbmltYXRpb24tZGVsYXk6IDIwMG1zO1xyXG4gIH1cclxuXHJcbn1cclxuXHJcblxyXG4vKiBNb3ZlIGluICovXHJcbkBrZXlmcmFtZXMgdGMtc3dpdGNoLWluIHtcclxuICB0byB7XHJcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xyXG4gICAgb3BhY2l0eTogMTtcclxuICB9XHJcbn1cclxuXHJcbi8qIE1vdmUgb3V0ICovXHJcbkBrZXlmcmFtZXMgdGMtc3dpdGNoLW91dCB7XHJcbiAgdG8ge1xyXG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAtMTAwJSwgMCk7XHJcbiAgICBvcGFjaXR5OiAwLFxyXG4gIH1cclxufVxyXG5cclxuXHJcbiIsIkBjaGFyc2V0ICd1dGYtOCc7XHJcblxyXG5AaW1wb3J0ICd0ZXh0LXN3aXRjaGVyJztcclxuXHJcbi8qIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcbiAgIERlbW9cclxuLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0gKi9cclxuXHJcbmJvZHkge1xyXG4gIGZvbnQtZmFtaWx5OiAnVHJlYnVjaGV0IE1TJztcclxuICB0ZXh0LWFsaWduOiBsZWZ0O1xyXG4gIGJhY2tncm91bmQ6ICMzMzM7XHJcbiAgY29sb3I6ICNmZmY7XHJcbn1cclxuIl19 */