body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body, html {
  margin: 0;
  padding: 0; }

div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

img {
  display: block; }

.banner {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #fff; }
  .banner .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .banner .logo {
    position: absolute;
    margin-top: 100%;
    -webkit-animation-name: moveUp;
            animation-name: moveUp;
    -webkit-animation-duration: 1300ms;
            animation-duration: 1300ms;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards; }
  .banner .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .banner .frame.frame-01 {
      margin-left: -100%;
      -webkit-animation-name: moveRight;
              animation-name: moveRight;
      -webkit-animation-duration: 2500ms;
              animation-duration: 2500ms;
      -webkit-animation-delay: 500ms;
              animation-delay: 500ms;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .banner .frame.frame-02 .rooster {
      opacity: 0;
      -webkit-animation-name: fadeInOut;
              animation-name: fadeInOut;
      -webkit-animation-duration: 2500ms;
              animation-duration: 2500ms;
      -webkit-animation-delay: 2600ms;
              animation-delay: 2600ms;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .banner .frame.frame-02 .copy {
      margin-top: -100%;
      -webkit-animation-name: moveDownDown;
              animation-name: moveDownDown;
      -webkit-animation-duration: 4000ms;
              animation-duration: 4000ms;
      -webkit-animation-delay: 2000ms;
              animation-delay: 2000ms;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .banner .frame.frame-03 .rooster {
      opacity: 0;
      -webkit-animation-name: fadeInOut;
              animation-name: fadeInOut;
      -webkit-animation-duration: 2500ms;
              animation-duration: 2500ms;
      -webkit-animation-delay: 5000ms;
              animation-delay: 5000ms;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .banner .frame.frame-03 .copy {
      margin-top: -100%;
      -webkit-animation-name: moveDownDown;
              animation-name: moveDownDown;
      -webkit-animation-duration: 4000ms;
              animation-duration: 4000ms;
      -webkit-animation-delay: 4400ms;
              animation-delay: 4400ms;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .banner .frame.frame-04 .talent {
      opacity: 0;
      -webkit-animation-name: fadeIn;
              animation-name: fadeIn;
      -webkit-animation-duration: 2500ms;
              animation-duration: 2500ms;
      -webkit-animation-delay: 7200ms;
              animation-delay: 7200ms;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .banner .frame.frame-04 .getup {
      margin-top: -100%;
      -webkit-animation-name: moveDownDown;
              animation-name: moveDownDown;
      -webkit-animation-duration: 4000ms;
              animation-duration: 4000ms;
      -webkit-animation-delay: 6600ms;
              animation-delay: 6600ms;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .banner .frame.frame-04 .espn, .banner .frame.frame-04 .live, .banner .frame.frame-04 .weekdays {
      opacity: 0;
      -webkit-animation-name: fadeIn;
              animation-name: fadeIn;
      -webkit-animation-duration: 3000ms;
              animation-duration: 3000ms;
      -webkit-animation-delay: 9.5s;
              animation-delay: 9.5s;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeInOut {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes moveRight {
  0% {
    margin-left: -100%; }
  20% {
    margin-left: 0; }
  80% {
    margin-left: 0;
    opacity: 1; }
  100% {
    margin-left: 0;
    opacity: 0; } }

@keyframes moveRight {
  0% {
    margin-left: -100%; }
  20% {
    margin-left: 0; }
  80% {
    margin-left: 0;
    opacity: 1; }
  100% {
    margin-left: 0;
    opacity: 0; } }

@-webkit-keyframes moveUp {
  0% {
    margin-top: 100%; }
  100% {
    margin-top: 0; } }

@keyframes moveUp {
  0% {
    margin-top: 100%; }
  100% {
    margin-top: 0; } }

@-webkit-keyframes moveLeft {
  0% {
    margin-left: 100%; }
  20% {
    margin-left: 0; }
  80% {
    margin-left: 0;
    opacity: 1; }
  100% {
    margin-left: 0;
    opacity: 0; } }

@keyframes moveLeft {
  0% {
    margin-left: 100%; }
  20% {
    margin-left: 0; }
  80% {
    margin-left: 0;
    opacity: 1; }
  100% {
    margin-left: 0;
    opacity: 0; } }

@-webkit-keyframes moveDownDown {
  0% {
    margin-top: -100%;
    opacity: 0; }
  30% {
    margin-top: 0;
    opacity: 1; }
  70% {
    margin-top: 0;
    opacity: 1; }
  100% {
    margin-top: 100%;
    opacity: 0; } }

@keyframes moveDownDown {
  0% {
    margin-top: -100%;
    opacity: 0; }
  30% {
    margin-top: 0;
    opacity: 1; }
  70% {
    margin-top: 0;
    opacity: 1; }
  100% {
    margin-top: 100%;
    opacity: 0; } }

.banner-300x250 {
  width: 300px;
  height: 250px; }
  .banner-300x250 .logo {
    top: 157px;
    left: 12px;
    -webkit-animation-name: moveUp2;
            animation-name: moveUp2;
    -webkit-animation-duration: 9s;
            animation-duration: 9s;
    -webkit-animation-delay: 1000ms;
            animation-delay: 1000ms;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards; }
  .banner-300x250 .frame.frame-01 {
    margin-left: -100%;
    -webkit-animation-duration: 3000ms;
            animation-duration: 3000ms;
    -webkit-animation-delay: 300ms;
            animation-delay: 300ms; }
    .banner-300x250 .frame.frame-01 img {
      position: absolute;
      top: 0;
      left: 0px; }
  .banner-300x250 .frame.frame-02 .rooster {
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-animation-name: fadeInOut2;
            animation-name: fadeInOut2;
    -webkit-animation-duration: 2500ms;
            animation-duration: 2500ms;
    -webkit-animation-delay: 3000ms;
            animation-delay: 3000ms; }
  .banner-300x250 .frame.frame-02 .copy {
    position: absolute;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-animation-name: moveDownDown2;
            animation-name: moveDownDown2;
    -webkit-animation-duration: 2500ms;
            animation-duration: 2500ms;
    -webkit-animation-delay: 3000ms;
            animation-delay: 3000ms; }
  .banner-300x250 .frame.frame-03 .rooster {
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-animation-name: fadeInOut2;
            animation-name: fadeInOut2;
    -webkit-animation-duration: 2500ms;
            animation-duration: 2500ms;
    -webkit-animation-delay: 5300ms;
            animation-delay: 5300ms; }
  .banner-300x250 .frame.frame-03 .copy {
    position: absolute;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-animation-name: moveDownDown2;
            animation-name: moveDownDown2;
    -webkit-animation-duration: 2500ms;
            animation-duration: 2500ms;
    -webkit-animation-delay: 5300ms;
            animation-delay: 5300ms; }
  .banner-300x250 .frame.frame-04 .talent,
  .banner-300x250 .frame.frame-04 .getup,
  .banner-300x250 .frame.frame-04 .live,
  .banner-300x250 .frame.frame-04 .weekdays,
  .banner-300x250 .frame.frame-04 .espn {
    position: absolute; }
  .banner-300x250 .frame.frame-04 .talent {
    top: 91px;
    right: 0;
    -webkit-animation-name: fadeInMoveLeft;
            animation-name: fadeInMoveLeft;
    -webkit-animation-duration: 2500ms;
            animation-duration: 2500ms;
    -webkit-animation-delay: 7600ms;
            animation-delay: 7600ms;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards; }
  .banner-300x250 .frame.frame-04 .getup {
    top: 8px;
    left: 8px;
    -webkit-animation-name: moveDownDown2;
            animation-name: moveDownDown2;
    -webkit-animation-duration: 2500ms;
            animation-duration: 2500ms;
    -webkit-animation-delay: 7600ms;
            animation-delay: 7600ms; }
  .banner-300x250 .frame.frame-04 .live {
    top: 154px;
    left: 10px; }
  .banner-300x250 .frame.frame-04 .weekdays {
    top: 151px;
    left: 12px; }
  .banner-300x250 .frame.frame-04 .espn {
    top: 201px;
    left: 20px; }
  .banner-300x250 .frame.frame-04 .live, .banner-300x250 .frame.frame-04 .weekdays, .banner-300x250 .frame.frame-04 .espn {
    -webkit-animation-delay: 10s;
            animation-delay: 10s; }

@-webkit-keyframes fadeInOut2 {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeInOut2 {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes moveDownDown2 {
  0% {
    margin-top: -100%;
    opacity: 0; }
  20% {
    margin-top: 0;
    opacity: 1; }
  90% {
    margin-top: 0;
    opacity: 1; }
  100% {
    margin-top: 0;
    opacity: 0; } }

@keyframes moveDownDown2 {
  0% {
    margin-top: -100%;
    opacity: 0; }
  20% {
    margin-top: 0;
    opacity: 1; }
  90% {
    margin-top: 0;
    opacity: 1; }
  100% {
    margin-top: 0;
    opacity: 0; } }

@-webkit-keyframes moveUp2 {
  0% {
    top: 157px;
    left: 12px;
    width: 74px;
    margin-top: 100%; }
  2% {
    top: 157px;
    left: 12px;
    width: 74px;
    margin-top: 0; }
  98% {
    top: 157px;
    left: 12px;
    width: 74px;
    margin-top: 0; }
  100% {
    top: 30px;
    left: 20px;
    width: 97px;
    margin-top: 0; } }

@keyframes moveUp2 {
  0% {
    top: 157px;
    left: 12px;
    width: 74px;
    margin-top: 100%; }
  2% {
    top: 157px;
    left: 12px;
    width: 74px;
    margin-top: 0; }
  98% {
    top: 157px;
    left: 12px;
    width: 74px;
    margin-top: 0; }
  100% {
    top: 30px;
    left: 20px;
    width: 97px;
    margin-top: 0; } }

@-webkit-keyframes fadeInMoveLeft {
  0% {
    opacity: 0;
    top: 91px;
    width: 194px; }
  15% {
    opacity: 1;
    top: 91px;
    width: 194px; }
  90% {
    opacity: 1;
    top: 91px;
    width: 194px; }
  100% {
    opacity: 1;
    top: 9px;
    width: 167px; } }

@keyframes fadeInMoveLeft {
  0% {
    opacity: 0;
    top: 91px;
    width: 194px; }
  15% {
    opacity: 1;
    top: 91px;
    width: 194px; }
  90% {
    opacity: 1;
    top: 91px;
    width: 194px; }
  100% {
    opacity: 1;
    top: 9px;
    width: 167px; } }