body,
html {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande";
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Remove this line and everything bove it before adding to WCMS. */

#carousel {
  height: 600px;
}

.billboard-wrap {
  display:  block;
  max-height: 600px;
  margin:  0 auto;
  max-width: 1080px;
  position: relative;
  width: 100%;
}

.billboard-content {
  background: #ccc;
  display:  block;
  height: 600px;
  width: 100%;
}

.billboard-container {
  background: #00458c;
  display: block;
  height: 600px;
  max-width: 1080px;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

/*SCENE 1 CSS */
.earth {
  animation-name: earth-zoom;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  position: absolute;
  z-index: 1;
}

@keyframes earth-zoom {
  0% {
    height: 267.5px;
    margin: 10em 0 0 20em;
    width: 267px; 
    opacity: 1;
  }
  100% {
    height: 4000.5px;
    margin: -95em 0 0 -30em;
    width: 4000px;
    opacity: 0;
  }  
}

/* END SCENE 1 CSS */

/* SCENE 2 */
.cloud-one,
.cloud-two {
  display: block;
  height:  50px;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 163px;
  z-index: 1000;
}

.cloud-one {
  animation: cloud-left 7s ease-in-out 3s 1 normal forwards;
  left: 0;
}


.cloud-two {
  animation: cloud-right 7s ease-in-out 3s 1 normal forwards;
  transform: scaleX(-1);
  right: 0;
}

@keyframes cloud-left {
  0% {
    height: 50px;
    margin: 3em 0 0 10em;
    opacity: 0;
    width: 163px;
  }
  100% {
    height: 123px;
    margin: -5em 0 0 -25em;
    opacity: 1;
    width: 400px;
  } 
}

@keyframes cloud-right {
  0% {
    height: 50px;
    margin: 1em 10em 0 0;
    opacity: 0;
    width: 163px;
  }
  100% {
    height: 123px;
    margin: 0em -25em 0 0;
    opacity: 1;
    width: 400px;
  } 
}


.seymour-center {
  animation: seymour-zoom 6s ease-in-out 3s 1 normal forwards;
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: 1080px;
}

@keyframes seymour-zoom {
  0% {
    height: 97px;
    margin: 8em 0 0 0;
    opacity: 0;
    width: 1080px;
  }
  5% {
    height: 97px;
    margin: 8em 0 0 0;
    opacity: .25;
    width: 1080px;
  }
  95% {
    height:  359px;
    margin: 1em 0 0 -65em;
    opacity: 1;
    width: 4000px;
  }
  100% {
    height:  359px;
    margin: 1em 0 0 -65em;
    opacity: 0;
    width: 4000px;
  }
}
  
.dolphins {
  animation: dolphin-jump 2s ease-in-out 3s 1 normal forwards;
  bottom: 0;
  opacity: 0;
  position: absolute;
  z-index: 3;
}

@keyframes dolphin-jump {
  0% {
    height: 464px;
    left: 60%;
    margin: 0 0 -8em;
    opacity: 1;
    width: 200px;
    transform: rotate(0deg);
  }
  100% {
    height: 1392px;
    left: 10%;
    margin: 0 0 -50em;
    opacity: 1;
    width: 600px;
    transform: rotate(-360deg);
  }
}

.parallax > use {
  animation: move-forever 24s linear 4s infinite normal forwards;
  transform-origin: 50% 50%;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
}
.parallax > use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 5s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 3s;
}

@keyframes move-forever{
  0% {
    transform: translate(-90px , 0%);
  }
  100% {
    transform: translate(85px , 0%);
  } 
}

.waves {
  bottom: 0;
  display: block;
  height: 6em;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 3;
  animation: waves-delay 9s ease-in-out -100ms 1 normal forwards;
}

@keyframes waves-delay {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.sea-lion {
  animation: sea-lion 3s ease-in-out 5s 1 normal forwards; 
  top: 0;
  display:  block;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: 2;
}

@keyframes sea-lion {
  0% {
    height: 23px;
    margin: 18em 0 0 20em;
    opacity: .8;
    width: 25px;
  }
  100% {
    height: 230px;
    margin: 15em 0 0 -20em;
    opacity: 1;
    width: 250px;
  } 
}

.natural-bridges {
  animation: natural-bridges-ani 6s ease-in-out 4s 1 normal forwards; 
  top: 0;
  display:  block;
  opacity: 0;
  position: absolute;
  right: 0;
  width: 150px;
  z-index: 2;
}

@keyframes natural-bridges-ani {
  0% {
    height: 16px;
    margin: 16em 20em 0 0;
    opacity: .6;
    width: 50px;
  }
  50% {
    opacity: 1;
  }
  100% {
    height: 195px;
    margin: 20em -40em 0 0;
    opacity: 1;
    width: 600px;
  }
}
/* END SCENE 2 - 9 secs */
/* SCENE 3 */
.ucsc-sign {
  animation: ucsc-sign-zoom 7s ease-in-out 9s 1 normal forwards;
  bottom: 0;
  display: block;
  opacity: 0;
  position: absolute;
  z-index: 3;
}

@keyframes ucsc-sign-zoom {
  0% {
    height: 531px;
    margin-left: 0;
    opacity: 0;
    width: 1080px;
  }
  20%,
  95% {
    height: 833px;
    margin-left: -12em;
    opacity: 1;
    width: 1694px;
  }
  100% {
    height: 833px;
    margin-left: -12em;
    opacity: 0;
    width: 1694px;
  }
}

.redwoods-sign {
  animation: redwoods-sign-slide 5.75s ease-in-out 10s 1 normal forwards;
  bottom: 1em;
  display: block;
  height: 472px;
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: 1080px;
}

@keyframes redwoods-sign-slide {
  0% {
    bottom:  -5em;
    opacity: 0;
  }
  10%,
  95% {
    bottom: 8em;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* END SCENE 3 */

/* looping cloud */
.sign-cloud {
  animation:  sign-cloud-fly-by 40s ease-in-out 10s infinite normal forwards;
  height: 77px;
  opacity: 0;
  margin:  1em 0 0 -255px;
  position: absolute;
  width:  250px;
  z-index: 230;
}

@keyframes sign-cloud-fly-by {
  0% {
    opacity: 1;
    margin: 1em 0 0 -255px;
  }
  100% {
    opacity: 1;
    margin: 1em 0 0 1300px;
  }
}

.big-cloud {
  animation:  big-cloud-fly-by 40s ease-in-out 16s infinite normal forwards;
  height: 150px;
  opacity: 0;
  margin:  .5em 0 0 -400px;
  position: absolute;
  width:  400px;
  z-index: 231;
}

@keyframes big-cloud-fly-by {
  0% {
    opacity: 1;
    margin: .5em 0 0 -400px;
  }
  100% {
    opacity: 1;
    margin: .5em 0 0 1300px;
  }
}

.deer {
  animation: deer-walk steps(18) 2.5s 1;
  animation-delay:  10s;
  background: url('http://www.ucsc.edu/features/images/rachel-carson-college/deer-v1.svg') 0 93px no-repeat;
  bottom: 5em;
  opacity: 0;
  height: 93px;
  position: absolute;
  width: 150px;
  z-index: 4;
}

.deer-two {
  animation: deer-walk steps(18) 2.5s 1;
  animation-delay:  11.5s;
  background: url('http://www.ucsc.edu/features/images/rachel-carson-college/deer-v1.svg') 0 93px no-repeat;
  bottom: 4.5em;
  opacity: 0;
  height: 93px;
  position: absolute;
  width: 150px;
  z-index: 4;
}

@keyframes deer-walk {
  0% {
    background-position: 0 0;
    margin: 0;
    opacity: 0;
  }
  
  50% {
    background-position: 0 -1687.5px;
    margin: 0 0 0 149px;
    opacity: 1;
  }
  
  51% {
    background-position: 0 0;
    margin: 0 0 0 150px;
    opacity: 1;
  }
 
  100% {
    background-position: 0 -1687.5px;
    margin: 0 0 0 300px;
    opacity: 0;
  }
}


/* end looping cloud */

/*  SCENE 4 */

.casf-grass {
  animation: casf-grass-slidein 4s ease-in-out 17s 1 normal forwards;
  display: block;
  bottom: 0;
  opacity: 0;
  position: absolute;
  z-index: 6;
}

@keyframes casf-grass-slidein {
  0%,
  100% {
    height: 340px;
    opacity: 0;
    margin: -12em 0;
    width: 1080px;
  }
  10%,
  90% {
    height: 340px;
    opacity: 1;
    margin: 0;
    width: 1080px;
  }
}

.tractor {
  animation: tractor-ani 4s ease-in-out 17s 1 normal forwards;
  bottom: 9em;
  display: block;
  height: 291px;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 458px;
  z-index: 5;
}

@keyframes tractor-ani {
  0%,
  100% {
    opacity: 1;
    margin-left: -460px;
  }
  10%,
  95% {
    opacity: 1;
    margin-left: 0;
  }
}

.land-1 {
  animation: land-1-ani 4s ease-in-out 17s 1 normal forwards;
  display: block;
  bottom: 0;
  opacity: 0;
  right: 0;
  position: absolute;
  z-index: 5;
}

@keyframes land-1-ani {
  0%,
  100% {
    height: 183px;
    opacity: 0;
    margin: -14em 0;
    width: 1080px;
  }
  10%,
  90% {
    height: 183px;
    opacity: 1;
    margin: 0;
    width: 1080px;
  }
}

.land-2 {
  animation: land-2-ani 4s ease-in-out 17.1s 1 normal forwards;
  display: block;
  bottom: 0;
  opacity: 0;
  right: 0;
  position: absolute;
  z-index: 4;
}

@keyframes land-2-ani {
  0%,
  100% {
    height: 169px;
    opacity: 0;
    margin: -14em 0;
    width: 1080px;
  }
  10%,
  90% {
    height: 169px;
    opacity: 1;
    margin: 4em 0;
    width: 1080px;
  }
}

.land-3 {
  animation: land-3-ani 4s ease-in-out 17.2s 1 normal forwards;
  display: block;
  bottom: 0;
  opacity: 0;
  right: 0;
  position: absolute;
  z-index: 3;
}

@keyframes land-3-ani {
  0%,
  100% {
    height: 119px;
    opacity: 0;
    margin: -14em 0;
    width: 1080px;
  }
  10%,
  90% {
    height: 119px;
    opacity: 1;
    margin: 8em 0;
    width: 1080px;
  }
}

.land-4 {
  animation: land-4-ani 4s ease-in-out 17.3s 1 normal forwards;
  display: block;
  bottom: 0;
  opacity: 0;
  right: 0;
  position: absolute;
  z-index: 2;
}

@keyframes land-4-ani {
  0%,
  100%{
    height: 90px;
    opacity: 0;
    margin: -14em 0;
    width: 1080px;
  }
  10%,
  90% {
    height: 90px;
    opacity: 1;
    margin: 10em 0;
    width: 1080px;
  }
}

.land-5 {
  animation: land-5-ani 4s ease-in-out 17.4s 1 normal forwards;
  display: block;
  bottom: 0;
  opacity: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}

@keyframes land-5-ani {
  0%, 
  100% {
    height: 53px;
    opacity: 0;
    margin: -14em 0;
    width: 1080px;
  }
  10%,
  90% {
    height: 53px;
    opacity: 1;
    margin: 14em 0;
    width: 1080px;
  }
}

/* END SCENE 4*/
/* SCENE 5 */
.rachel-carson-college {
  animation:  rcc 1s ease-in-out 21s 1 normal forwards;
  display: block;
  bottom: 0;
  opacity: 0;
  position: absolute;
  z-index: 14;
}

@keyframes rcc {
  0% {
    height: 368px;
    bottom: -10em;
    opacity: 0;
    width:  1080px;
  }
  100% {
    height: 368px;
    opacity: 1;
    bottom: 0;
    width:  1080px;
  }
}

.redwoods-rcc {
  animation: redwoods-slide 700ms ease-in-out 22s 1 normal forwards;
  display: block;
  opacity: 0;
  position: absolute;
  z-index: 10;
  
}

@keyframes redwoods-slide {
  0% {
    height: 472px;
    bottom:  -15em;
    opacity: 0;
    width: 1080px;
  }
  100% {
    bottom: 1em;
    height: 472px;
    opacity: 1;
    width: 1080px;
  }
}

.rachel-carson {
  animation:  rachel-carson-ani 2s ease-in-out 22.5s 1 normal forwards;
  bottom: -1em;
  display: block;
  left: 42%;
  opacity: 0;
  position: absolute;
  z-index: 22;
}

@keyframes rachel-carson-ani {
  0% {
    height: 474px;
    opacity: 0;
    width: 200px;
  }
  100% {
    height: 474px;
    opacity: 1;
    width: 200px;
  }
}

.rachel-text,
.rachel-text-mobile {
  animation: header-text 2s ease-in-out 23s 1 normal forwards;
  background: #d75c01;
  max-width: 1080px;
  opacity: 0;
  position: absolute;
  top: 26em;
  width: 100%;
  z-index: 20;
}

.rachel-text-mobile {
  padding:  1em 0;
}

.rachel-text {
  max-height:  8em;
  padding:  1em 0;
}

.rachel-text h1,
.rachel-text-mobile h1 {
  color: #FFF;
  display: inline-block;
  margin: 0 0 0 1.5em;
  font-size: 3em;
  line-height: 1em;
  padding-right: .5em;
  text-align: right;
}

.rachel-text h1 {
  width:  33%;
}

.rachel-text .teaser,
.rachel-text-mobile .teaser {
  color: #FFF;
  float: right;
  display: inline-block;
  margin: .25em 3em 0 0;
}

.rachel-text .teaser {
  width: 35%;
}

@keyframes header-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*BIRDS*/
.bird-1,
.bird-2,
.bird-animation-left,
.bird-aniamtion-right {
  display: block;
  position: absolute;
}

.bird-1,
.bird-2 {
  height: 35px;
  width: 75px;
  z-index: 0;
}

.bird-1 {
  top: 3.5em;
  left: 45%;
}
.bird-2 {
  top: 3em;
  left: 52%;
}

.bird-animation-left,
.bird-animation-right {
  z-index: 1000;
}

.bird-animation-left {
  animation-delay: 5s;
}

.bird-animation-right {
  float: right;
  transform: rotateY(180deg);
  animation-delay: 10s;
}

.bird-1,
.bird-2 {
  animation: bird-1-animation steps(7) 1s infinite;
  animation-delay: 3s;
  background: url('http://www.ucsc.edu/features/images/holidays-2015/bird-animation.svg') 0 35px no-repeat;
  opacity: .5;
}

.bird-animation-left,
.bird-animation-right {
  animation: bird-2-animation steps(32) 5s infinite;
  background: url('http://www.ucsc.edu/features/images/holidays-2015/bird-animation-left.svg') 0 48px no-repeat;
  height: 48px;
  width: 200px;
}

.bird-animation-right {
  animation-delay: 8s;
}

.bird-animation-left {
  animation-delay: 3s;
}

@keyframes bird-1-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -245px;
  }
}

@keyframes bird-2-animation {
  0% {
    background-position: 0 0;
    opacity: .75;
  }
  50% {
    background-position: 0 -1600px;
    opacity: .45;
  }
  100% {
    background-position: 0 -1600px;
    opacity: .1;
  }
}

/* breakpoints */
@media screen and (max-width: 31.125em) {
  .billboard-content {
    height: 400px;
    max-width:  1080px;
  }
  .billboard-container {
    height: 400px;
    width: 100%;
  }
  
  /* Scene 1 31.125em */
  @keyframes earth-zoom {
    0% {
      height: 267.5px;
      margin: 5em 0 0 0;
      width: 267px; 
      opacity: 1;
    }
    100% {
      height: 2000.5px;
      margin: -45em 0 0 -20em;
      width: 2000px;
      opacity: 0;
    }  
  }
  
  /* Scene 2 31.125em */
  @keyframes cloud-left {
    0% {
      height: 31px;
      margin: 3em 0 0 2em;
      opacity: 0;
      width: 100px;
    }
    100% {
      height: 50px;
      margin: -5em 0 0 -10em;
      opacity: 1;
      width: 163px;
    } 
  }

  @keyframes cloud-right {
    0% {
      height: 31px;
      margin: 1em 2em 0 0;
      opacity: 0;
      width: 100px;
    }
    100% {
      height: 50px;
      margin: 0em -11em 0 0;
      opacity: 1;
      width: 163px;
    } 
  }
  
  @keyframes seymour-zoom {
    0% {
      margin: 6em 0 0 -5em;
      opacity: 0;
      width: 600px;
    }
    5% {
      margin: 6em 0 0 -5em;
      opacity: .25;
      width: 600px;
    }
    95% {
      margin: 2em 0 0 -50em;
      opacity: 1;
      width: 2500px;
    }
    100% {
      margin: 2em 0 0 -50em;
      opacity: 0;
      width: 2500px;
    }
  }
  
  @keyframes sea-lion {
    0% {
      margin: 11em 0 0 6em;
      opacity: .8;
      width: 25px;
    }
    100% {
      margin: 15em 0 0 -6.5em;
      opacity: 1;
      width: 100px;
    } 
  }
  
  @keyframes natural-bridges-ani {
    0% {
      margin: 10em 6em 0 0;
      opacity: .6;
      width: 50px;
    }
    50% {
      opacity: 1;
    }
    100% {
      margin: 16em -15.5em 0 0;
      opacity: 1;
      width: 250px;
    }
  }
  
  @keyframes dolphin-jump {
    0% {
      left: 60%;
      margin: 0 0 -8em;
      opacity: 1;
      width: 200px;
      transform:rotate(0);
    }
    100% {
      left: -20%;
      margin: 0 0 -16em;
      opacity: 1;
      width: 400px;
      transform:rotate(-360deg);
    }
  }
 
  .bird-2 {
    display: none;
  }
  
  .bird-animation-right {
    display: none;
  }
  
  /* SCENE 3 31.125em */
  .ucsc-sign {
    animation: ucsc-sign-zoom 7s ease-in-out 9s 1 normal forwards;
    bottom: 0;
    display: block;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 3;
  }
  
  @keyframes ucsc-sign-zoom {
    0% {
      margin-left: 0;
      opacity: 0;
      width: 400px;
    }
    20%, 
    95% {
      margin-left: -6.5em;
      opacity: 1;
      width: 550px;
    }
    100% {
      margin-left: -6.5em;
      opacity: 0;
      width: 550px;
    }
  }
  
  @keyframes redwoods-sign-slide {
    0%, 
    100% {
      bottom:  -5em;
      opacity: 0;
    }
    10%,
    95% {
      bottom: -3.5em;
      opacity: 1;
    }
  }
  
  .deer-two {
    display: none;
  }
  
  .deer {
    bottom: 1em;
  }
  
  @keyframes deer-walk {
    0% {
      background-position: 0 0;
      margin: 0 0 0 -49px;
      opacity: 0;
    }

    50% {
      background-position: 0 -1687.5px;
      margin: 0 0 0 100px;
      opacity: 1;
    }

    51% {
      background-position: 0 0;
      margin: 0 0 0 101px;
      opacity: 1;
    }

    100% {
      background-position: 0 -1687.5px;
      margin: 3em 0 0 248px;
      opacity: 0;
    }
  }
  
  /* SCENE 4 31.125em */
  .casf-grass {
    width: 428px;
  }
  
  @keyframes casf-grass-slidein {
    0%,
    100% {
      opacity: 0;
      margin: -12em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 0;
    }
  }
  
  .tractor {
    bottom: 3.5em;
    height: 127px;
    width: 200px;
    z-index: 5;
  }
  
  @keyframes land-1-ani {
    0%,
    100% {
      opacity: 0;
      margin: -6em 0 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 0;
    }
  }
  
  @keyframes land-2-ani {
    0%,
    100% {
      opacity: 0;
      margin: -3em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 1.5em 0;
    }
  }
  
  @keyframes land-3-ani {
    0%,
    100% {
      opacity: 0;
      margin: 0 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 2.75em 0 2.75em .25em;
    }
  }
  
  @keyframes land-4-ani {
    0%,
    100% {
      opacity: 0;
      margin: 0 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 3.75em 0 3.75em .25em;
    }
  }
  
  @keyframes land-5-ani {
    0%, 
    100% {
      opacity: 0;
      margin: 0 0 0 .5em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 5em 0 5em .5em;
    }
  }
  
  /* SCENE 5 31.125em */
  
  @keyframes rcc {
    0% {
      max-height: 165px;
      bottom: -10em;
      opacity: 0;
      max-width:  484px;
      width: 100%;
    }
    100% {
      max-height: 165px;
      opacity: 1;
      bottom: 0;
      max-width:  484px;
      width: 100%;
    }
  }
  
  .rachel-text-mobile {
    animation: header-text 700ms ease-in-out 0s 1 normal forwards;
    background: #d75c01;
    opacity: 0;
    position: static;
    top: 0;
    width: 100%;
    z-index: 0;
  }
  
  .rachel-text {
    display: none;
  }
  
  .rachel-text-mobile h1 {
    font-size: 1.5em;
    margin: 0;
    padding: 0 .25em;
    text-align: left;
    with: 100%;
  }

  .rachel-text-mobile .teaser {
    float: none;
    font-size: .9em;
    margin: 0;
    padding: .5em .5em 0 .5em;
    width: 100%;
  }
  
  .rachel-carson {
    animation:  rachel-carson-ani 2s ease-in-out 22.5s 1 normal forwards;
    bottom: -1em;
    display: block;
    left: 35%;
    opacity: 0;
    position: absolute;
    z-index: 16;
  }
  
  @keyframes rachel-carson-ani {
    0% {
      height: 237px;
      opacity: 0;
      width: 100px;
    }
    100% {
      height: 237px;
      opacity: 1;
      width: 100px;
    }
  }
  
  @keyframes redwoods-slide {
    0% {
      bottom:  -15em;
      height: 262px;
      opacity: 0;
      width: 600px;
    }
    100% {
      bottom:  -4em;
      height: 262px;
      opacity: 1;
      width: 600px;
    }
  }
}


@media screen and (min-width: 31.1875em) {
  .billboard-content {
    height: 400px;
    max-width:  1080px;
  }
  
  .billboard-container {
    height: 400px;
    width: 100%;
  }
  
  /* Scene 1 min-width: 31.1875em */
   @keyframes earth-zoom {
    0% {
      height: 267.5px;
      margin: 5em 0 0 15em;
      width: 267px; 
      opacity: 1;
    }
    100% {
      height: 2000.5px;
      margin: -45em 0 0 -10em;
      width: 2000px;
      opacity: 0;
    }  
  }
  
  /* Scene 2 min-width: 31.1875em */
  
  @keyframes cloud-left {
    0% {
      height: 31px;
      margin: 3em 0 0 2em;
      opacity: 0;
      width: 100px;
    }
    100% {
      height: 50px;
      margin: -5em 0 0 -10em;
      opacity: 1;
      width: 163px;
    } 
  }

  @keyframes cloud-right {
    0% {
      height: 31px;
      margin: 1em 2em 0 0;
      opacity: 0;
      width: 100px;
    }
    100% {
      height: 50px;
      margin: 0em -11em 0 0;
      opacity: 1;
      width: 163px;
    } 
  }
  
  @keyframes seymour-zoom {
    0% {
      margin: 6em 0 0;
      opacity: 0;
      width: 600px;
    }
    5% {
      margin: 6em 0 0;
      opacity: .25;
      width: 600px;
    }
    95% {
      margin: 2em 0 0 -56em;
      opacity: 1;
      width: 3000px;
    }
    100% {
      margin: 2em 0 0 -56em;
      opacity: 0;
      width: 3000px;
    }
  }
  
  @keyframes sea-lion {
    0% {
      margin: 11em 0 0 10em;
      opacity: .8;
      width: 25px;
    }
    100% {
      margin: 14em 0 0 -12em;
      opacity: 1;
      width: 200px;
    } 
  }
  
  @keyframes natural-bridges-ani {
    0% {
      margin: 10.5em 10em 0 0;
      opacity: .6;
      width: 50px;
    }
    50% {
      opacity: 1;
    }
    100% {
      margin: 16em -31em 0 0;
      opacity: 1;
      width: 500px;
    }
  }
  
  @keyframes dolphin-jump {
    0% {
      left: 85%;
      margin: 0 0 -8em;
      opacity: 1;
      width: 200px;
      transform:rotate(0);
    }
    100% {
      left: -20%;
      margin: 0 0 -12em;
      opacity: 1;
      width: 400px;
      transform:rotate(-360deg);
    }
  }
 
  .bird-2 {
    display: none;
  }
  
  .bird-animation-right {
    display: none;
  }
  
  /* Scene 3 min-width: 31.1875em */
  
  @keyframes ucsc-sign-zoom {
    0% {
      margin-left: 0;
      opacity: 0;
      width: 600px;
    }
    20%, 
    95% {
      margin-left: -8em;
      opacity: 1;
      width: 900px;
    }
    100% {
      margin-left: -8em;
      opacity: 0;
      width: 900px;
    }
  }
  
  @keyframes redwoods-sign-slide {
    0%, 
    100% {
      bottom:  -5em;
      opacity: 0;
    }
    10%,
    95% {
      bottom: -3.5em;
      opacity: 1;
    }
  }
  
  .deer-two {
    display: block;
    bottom: 1.25em;
  }
  
  .deer {
    bottom: 1em;
  }
  
  @keyframes deer-walk {
    0% {
      background-position: 0 0;
      margin: 0 0 0 -49px;
      opacity: 0;
    }

    50% {
      background-position: 0 -1687.5px;
      margin: 0 0 0 100px;
      opacity: 1;
    }

    51% {
      background-position: 0 0;
      margin: 0 0 0 101px;
      opacity: 1;
    }

    100% {
      background-position: 0 -1687.5px;
      margin: 3em 0 0 248px;
      opacity: 0;
    }
  }
  
  /* Scene 4 min-width: 31.1875em */
  
  .casf-grass {
    width: 100%;
    z-index: 7;
  }
  
  @keyframes casf-grass-slidein {
    0%,
    100% {
      opacity: 0;
      margin: -12em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 0;
    }
  }
  
  .tractor {
    bottom: 4em;
    height: 191px;
    width: 300px;
    z-index: 6;
  }
  
  @keyframes land-1-ani {
    0%,
    100% {
      opacity: 0;
      margin: -6em 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 0 0 0 .25em;
    }
  }
  
  @keyframes land-2-ani {
    0%,
    100% {
      opacity: 0;
      margin: -3em 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 1em 0 1em .25em;
    }
  }
  
  @keyframes land-3-ani {
    0%,
    100% {
      opacity: 0;
      margin: 0 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 3em 0 3em .25em;
    }
  }
  
  @keyframes land-4-ani {
    0%,
    100%{
      opacity: 0;
      margin: 0 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 4em 0 4em .25em;
    }
  }
  
  @keyframes land-5-ani {
    0%, 
    100% {
      opacity: 0;
      margin: 0 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 6em 0 6em .25em;
    }
  }
  
  /* Scene 5 min-width: 31.1875em */
  
  @keyframes rcc {
    0% {
      max-height: 336px;
      bottom: -10em;
      opacity: 0;
      max-width:  769px;
      width: 100%;
    }
    100% {
      max-height: 336px;
      opacity: 1;
      bottom: 0;
      max-width:  769px;
      width: 100%;
    }
  }
  
  .rachel-text-mobile {
    animation: header-text 700ms ease-in-out 0s 1 normal forwards;
    background: #d75c01;
    opacity: 0;
    position: static;
    top: 0;
    width: 100%;
    z-index: 0;
  }
  
  .rachel-text {
    display: none;
  }
  
  .rachel-text-mobile h1 {
    font-size: 2em;
    margin: 0;
    padding: 0 .25em;
    text-align: left;
    with: 100%;
  }

  .rachel-text-mobile .teaser {
    float: none;
    font-size: 1em;
    margin: 0;
    padding: .6em .6em 0;
    width: 100%;
  }
  
  .rachel-carson {
    animation:  rachel-carson-ani 2s ease-in-out 22.5s 1 normal forwards;
    bottom: -1em;
    display: block;
    left: 42%;
    opacity: 0;
    position: absolute;
    z-index: 16;
  }
  
  @keyframes rachel-carson-ani {
    0% {
      height: 237px;
      opacity: 0;
      width: 100px;
    }
    100% {
      height: 237px;
      opacity: 1;
      width: 100px;
    }
  }
  
  @keyframes redwoods-slide {
    0% {
      bottom:  -15em;
      height: 262px;
      opacity: 0;
      width: 600px;
    }
    100% {
      bottom:  -2em;
      height: 262px;
      opacity: 1;
      width: 600px;
    }
  }

}

/*  iphone 6*/

@media screen and (min-width: 37.5em) {
  
  /* Scene 2 */
  @keyframes seymour-zoom {
    0% {
      margin: 6em 0 0;
      opacity: 0;
      width: 750px;
    }
    5% {
      margin: 6em 0 0;
      opacity: .25;
      width: 750px;
    }
    95% {
      margin: 2em 0 0 -50em;
      opacity: 1;
      width: 3000px;
    }
    100% {
      margin: 2em 0 0 -50em;
      opacity: 0;
      width: 3000px;
    }
  }
  
  @keyframes sea-lion {
    0% {
      margin: 11.5em 0 0 10em;
      opacity: .8;
      width: 25px;
    }
    100% {
      margin: 14em 0 0 -13em;
      opacity: 1;
      width: 200px;
    } 
  }
  
  @keyframes natural-bridges-ani {
    0% {
      margin: 11.75em 10em 0 0;
      opacity: .6;
      width: 50px;
    }
    50% {
      opacity: 1;
    }
    100% {
      margin: 16em -31em 0 0;
      opacity: 1;
      width: 500px;
    }
  }
  
   @keyframes dolphin-jump {
    0% {
      left: 85%;
      margin: 0 0 -8em;
      opacity: 1;
      width: 200px;
      transform:rotate(0);
    }
    100% {
      left: -5%;
      margin: 0 0 -15.5em;
      opacity: 1;
      width: 400px;
      transform:rotate(-360deg);
    }
  }
  
  @keyframes ucsc-sign-zoom {
    0% {
      margin-left: 0;
      opacity: 0;
      width: 800px;
    }
    20%, 
    95% {
      margin-left: -8em;
      opacity: 1;
      width: 1000px;
    }
    100% {
      margin-left: -8em;
      opacity: 0;
      width: 1000px;
    }
  }
  
  .tractor {
    bottom: 6.5em;
    height: 191px;
    width: 300px;
    z-index: 6;
  }
  
  @keyframes land-5-ani {
    0%, 
    100% {
      opacity: 0;
      margin: 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 6.6em 0;
    }
  }
  
 .rachel-text-mobile {
    animation: header-text 700ms ease-in-out 0s 1 normal forwards;
    background: #d75c01;
    opacity: 0;
    position: static;
    top: 0;
    width: 100%;
    z-index: 0;
  }
  
  .rachel-text-mobile h1 {
    font-size: 2em;
    margin: 0;
    padding: 0 .25em;
    text-align: left;
    with: 100%;
  }

  .rachel-text-mobile .teaser {
    float: none;
    font-size: 1em;
    margin: 0;
    padding: .6em .6em 0;
    max-width: 95%;
    width: 100%;
  }
  
  @keyframes rachel-carson-ani {
    0% {
      height: 296px;
      opacity: 0;
      width: 125px;
    }
    100% {
      height:296px;
      opacity: 1;
      width: 125px;
    }
  }
  
  .rachel-text {
    display: none;
  }
  
  @keyframes redwoods-slide {
    0% {
      bottom:  -15em;
      height: 336px;
      opacity: 0;
      width: 768px;
    }
    100% {
      bottom:  -2em;
      height: 336px;
      opacity: 1;
      width: 768px;
    }
  }

}

/* ipad portrait */

@media screen and (min-width: 48em) {
  
  @keyframes seymour-zoom {
    0% {
      margin: 6em 0 0;
      opacity: 0;
      width: 900px;
    }
    5% {
      margin: 6em 0 0;
      opacity: .25;
      width: 900px;
    }
    95% {
      margin: 1.75em 0 0 -50em;
      opacity: 1;
      width: 3000px;
    }
    100% {
      margin: 1.75em 0 0 -50em;
      opacity: 0;
      width: 3000px;
    }
  } 
  
  .bird-animation-right {
    display: block;
  }
  
  @keyframes sea-lion {
    0% {
      margin: 12em 0 0 10em;
      opacity: .8;
      width: 25px;
    }
    100% {
      margin: 14em 0 0 -12.5em;
      opacity: 1;
      width: 200px;
    } 
  }
  
  @keyframes natural-bridges-ani {
    0% {
      margin: 11.5em 10em 0 0;
      opacity: .6;
      width: 50px;
    }
    50% {
      opacity: 1;
    }
    100% {
      margin: 16em -31em 0 0;
      opacity: 1;
      width: 500px;
    }
  }
  
  @keyframes dolphin-jump {
    0% {
      left: 85%;
      margin: 0 0 -8em;
      opacity: 1;
      width: 200px;
      transform:rotate(0);
    }
    100% {
      left: 0;
      margin: 0 0 -15.25em;
      opacity: 1;
      width: 400px;
      transform:rotate(-360deg);
    }
  }
  
  /* Scene 4 min-width: 48em */
  
  .casf-grass {
    width: 100%;
    z-index: 7;
  }
  
  @keyframes casf-grass-slidein {
    0%,
    100% {
      opacity: 0;
      margin: -12em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 0;
    }
  }
  
  .tractor {
    bottom: 6.75em;
    height: 191px;
    width: 300px;
    z-index: 6;
  }
  
  @keyframes land-1-ani {
    0%,
    100% {
      opacity: 0;
      margin: -6em 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: -2em 0 -2em .25em;
    }
  }
  
  @keyframes land-2-ani {
    0%,
    100% {
      opacity: 0;
      margin: -3em 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 0 0 0 .25em;
    }
  }
  
  @keyframes land-3-ani {
    0%,
    100% {
      opacity: 0;
      margin: 0 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 1em 0 3em .25em;
    }
  }
  
  @keyframes land-4-ani {
    0%,
    100%{
      opacity: 0;
      margin: 0 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 4em 0 4em .25em;
    }
  }
  
  @keyframes land-5-ani {
    0%, 
    100% {
      opacity: 0;
      margin: 0 0 0 .25em;
    }
    10%,
    90% {
      opacity: 1;
      margin: 7em 0 7em .25em;
    }
  }
  
 .rachel-text-mobile {
    animation: header-text 700ms ease-in-out 0s 1 normal forwards;
    opacity: 0;
    position: static;
    top: 0;
    width: 100%;
    z-index: 0;
  }
  
  .rachel-text-mobile h1 {
    font-size: 2em;
    margin: 0;
    padding: 0 .25em;
    text-align: left;
    with: 100%;
  }

  .rachel-text-mobile .teaser {
    float: none;
    font-size: 1em;
    margin: 0;
    padding: .6em .6em 0;
    max-width: 95%;
    width: 100%;
  }
  
  .rachel-text {
    display: none;
  }
  
  @keyframes redwoods-slide {
    0% {
      bottom:  -15em;
      opacity: 0;
    }
    100% {
      bottom: -5em;
      opacity: 1;
    }
  }
  
  .bird-2 {
    display: block;
  }
  
}

@media screen and (min-width: 60em) {
  
  .billboard-content {
    height: 600px;
    width: 100%;
  }

  .billboard-container {
    height: 600px;
    max-width: 1080px;
    width: 100%;
  }

  /*SCENE 1 CSS */
  
  @keyframes earth-zoom {
    0% {
      height: 267.5px;
      margin: 10em 0 0 20em;
      width: 267px; 
      opacity: 1;
    }
    100% {
      height: 4000.5px;
      margin: -95em 0 0 -30em;
      width: 4000px;
      opacity: 0;
    }  
  }

  /* SCENE 2 */
  @keyframes cloud-left {
    0% {
      height: 50px;
      margin: 3em 0 0 10em;
      opacity: 0;
      width: 163px;
    }
    100% {
      height: 123px;
      margin: -5em 0 0 -25em;
      opacity: 1;
      width: 400px;
    } 
  }

  @keyframes cloud-right {
    0% {
      height: 50px;
      margin: 1em 10em 0 0;
      opacity: 0;
      width: 163px;
    }
    100% {
      height: 123px;
      margin: 0em -25em 0 0;
      opacity: 1;
      width: 400px;
    } 
  }

  @keyframes seymour-zoom {
    0% {
      margin: 8em 0 0 0;
      opacity: 0;
      width: 1080px;
    }
    5% {
      margin: 8em 0 0 0;
      opacity: .25;
      width: 1080px;
    }
    95% {
      margin: 1em 0 0 -65em;
      opacity: 1;
      width: 4000px;
    }
    100% {
      margin: 1em 0 0 -65em;
      opacity: 0;
      width: 4000px;
    }
  }

    @keyframes dolphin-jump {
      0% {
        left: 60%;
        margin: 0 0 -8em;
        opacity: 1;
        width: 200px;
        transform:rotate(0);
      }
      100% {
        left: 10%;
        margin: 0 0 -23em;
        opacity: 1;
        width: 600px;
        transform:rotate(-360deg);
      }
    }

  @keyframes sea-lion {
    0% {
      margin: 18em 0 0 20em;
      opacity: .8;
      width: 25px;
    }
    100% {
      margin: 15em 0 0 -20em;
      opacity: 1;
      width: 250px;
    } 
  }



  @keyframes natural-bridges-ani {
    0% {
      margin: 16em 20em 0 0;
      opacity: .6;
      width: 50px;
    }
    50% {
      opacity: 1;
    }
    100% {
      margin: 20em -40em 0 0;
      opacity: 1;
      width: 600px;
    }
  }
  /* END SCENE 2 - 9 secs */
  /* SCENE 3 */

  @keyframes ucsc-sign-zoom {
    0% {
      margin-left: 0;
      opacity: 0;
      width: 1080px;
    }
    20%, 
    95% {
      margin-left: -6.5em;
      opacity: 1;
      width: 1500px;
    }
    100% {
      margin-left: -6.5em;
      opacity: 0;
      width: 1500px;
    }
  }


  @keyframes redwoods-sign-slide {
    0% {
      bottom:  -5em;
      opacity: 0;
    }
    10%,
    95% {
      bottom: 8em;
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /* END SCENE 3 */

  /* looping cloud */
  @keyframes sign-cloud-fly-by {
    0% {
      opacity: 1;
      margin: 1em 0 0 -255px;
    }
    100% {
      opacity: 1;
      margin: 1em 0 0 1300px;
    }
  }

  @keyframes big-cloud-fly-by {
    0% {
      opacity: 1;
      margin: 1em 0 0 -400px;
    }
    100% {
      opacity: 1;
      margin: 1em 0 0 1300px;
    }
  }

  .deer {
    bottom: 5em;
  }

  .deer-two {
    bottom: 4.5em;
  }

  @keyframes deer-walk {
    0% {
      background-position: 0 0;
      margin: 0;
      opacity: 0;
    }

    50% {
      background-position: 0 -1687.5px;
      margin: 0 0 0 149px;
      opacity: 1;
    }

    51% {
      background-position: 0 0;
      margin: 0 0 0 150px;
      opacity: 1;
    }

    100% {
      background-position: 0 -1687.5px;
      margin: 0 0 0 300px;
      opacity: 0;
    }
  }

  /*  SCENE 4 */

  .casf-grass {
    animation: casf-grass-slidein 4s ease-in-out 17s 1 normal forwards;
    display: block;
    bottom: 0;
    opacity: 0;
    position: absolute;
    z-index: 6;
  }

  @keyframes casf-grass-slidein {
    0%,
    100% {
      opacity: 0;
      margin: -12em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 0;
    }
  }

  .tractor {
    animation: tractor-ani 4s ease-in-out 17s 1 normal forwards;
    bottom: 9em;
    height: 291px;
    width: 458px;
    z-index: 5;
  }

  @keyframes tractor-ani {
    0%,
    100% {
      opacity: 1;
      margin-left: -460px;
    }
    10%,
    95% {
      opacity: 1;
      margin-left: 0;
    }
  }

  @keyframes land-1-ani {
    0%,
    100% {
      opacity: 0;
      margin: -14em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 0;
    }
  }

  @keyframes land-2-ani {
    0%,
    100% {
      opacity: 0;
      margin: -14em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 4em 0;
    }
  }

  @keyframes land-3-ani {
    0%,
    100% {
      opacity: 0;
      margin: -14em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 8em 0;
    }
  }

  @keyframes land-4-ani {
    0%,
    100%{
      opacity: 0;
      margin: -14em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 10em 0;
    }
  }

  @keyframes land-5-ani {
    0%, 
    100% {
      opacity: 0;
      margin: -14em 0;
    }
    10%,
    90% {
      opacity: 1;
      margin: 14em 0;
    }
  }

  /* END SCENE 4*/
  /* SCENE 5 */
  .rachel-carson-college {
    animation:  rcc 1s ease-in-out 21s 1 normal forwards;
    display: block;
    bottom: 0;
    opacity: 0;
    position: absolute;
    z-index: 15;
  }

  @keyframes rcc {
    0% {
      bottom: -10em;
      opacity: 0;
    }
    100% {
      opacity: 1;
      bottom: 0;
    }
  }

  .redwoods-rcc {
    animation: redwoods-slide 700ms ease-in-out 22s 1 normal forwards;
    bottom: 1em;
    display: block;
    height: 472px;
    opacity: 0;
    position: absolute;
    z-index: 10;
    width: 1080px;
  }

  @keyframes redwoods-slide {
    0% {
      bottom:  -15em;
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .rachel-carson {
    animation:  rachel-carson-ani 2s ease-in-out 22.5s 1 normal forwards;
    bottom: -1em;
    display: block;
    left: 42%;
    opacity: 0;
    position: absolute;
    width: 200px;
    z-index: 22;
  }

  @keyframes rachel-carson-ani {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1;
    }
  }

  .rachel-text {
    animation: header-text 2s ease-in-out 23s 1 normal forwards;
    background: #d75c01;
    display: block;
    height: 100%;
    max-height:  8em;
    max-width: 1080px;
    opacity: 0;
    padding:  1em 0;
    position: absolute;
    top: 26em;
    width: 100%;
    z-index: 20;
  }
  
  .rachel-text-mobile {
    display: none;
  }

  .rachel-text h1 {
    color: #FFF;
    display: inline-block;
    font-size: 2.75em;
    line-height: 1em;
    max-width: 360px;
    padding-right: .5em;
    text-align: right;
    width: 33%;
  }

  .rachel-text .teaser {
    color: #FFF;
    float: right;
    display: inline-block;
    margin: .5em 3em 0 0;
    width: 35%;
  }
  
  @keyframes header-text {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  .bird-2 {
    display: block;
  }

}