/* Video Outputs: Shared. */

.output
{
  opacity: 0;
  position: absolute;
  width: 800px;
  height: 450px;
}

.output.active
{
  opacity: 1;
}

.slate
{
  background-position: center center;
  background-repeat: no-repeat;
}

.photo
{
  overflow: hidden;
}

.photo.inactive
{
  opacity: 0;
}

.output.photo img,
.output.photo .filter
{
  min-width: 850px;
  position: absolute;
  left: 0;
  top: -25%;
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 1s, 4s;
     -moz-transition-property: opacity, -moz-transform;
     -moz-transition-duration: 1s, 4s;
      -ms-transition-property: opacity, -ms-transform;
      -ms-transition-duration: 1s, 4s;
       -o-transition-property: opacity, -o-transform;
       -o-transition-duration: 1s, 4s;
          transition-property: opacity, transform;
          transition-duration: 1s, 4s;
}

.photo.active img
{
  opacity: 1;
}

.photo.effect-zoom_in.active img,
.photo.effect-zoom_out.active img,
.photo.effect-ken_burns.active img,
.photo.effect-burns_ken.active img,
.photo.effect-zoom_in.active .filter,
.photo.effect-zoom_out.active .filter,
.photo.effect-ken_burns.active .filter,
.photo.effect-burns_ken.active .filter
{
  -webkit-transform: scale(1.1) translate(40px);
     -moz-transform: scale(1.1) translate(40px);
      -ms-transform: scale(1.1) translate(40px);
       -o-transform: scale(1.1) translate(40px);
          transform: scale(1.1) translate(40px);
}

.photo.effect-ken_burns img,
.photo.effect-ken_burns .filter
{
  left: -50px;
  -webkit-transform-origin: top left;
     -moz-transform-origin: top left;
      -ms-transform-origin: top left;
       -o-transform-origin: top left;
          transform-origin: top left;
}

.photo.effect-burns_ken img,
.photo.effect-burns_ken .filter
{
  left: -50px;
  -webkit-transform-origin: bottom right;
     -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
       -o-transform-origin: bottom right;
          transform-origin: bottom right;
}

html.cssfilters .fallback-filter
{
  display: none;
}

html.cssfilters .photo.filter-sepia img
{
  -webkit-filter: sepia(.8);
}

html.cssfilters .photo.filter-negativity img
{
  -webkit-filter: contrast(350%) saturate(0);
}

html.cssfilters .photo.filter-monochrome img
{
  -webkit-filter: saturate(0);
}

html.cssfilters .photo.filter-zombie img
{
  -webkit-filter: contrast(1) hue-rotate(150deg) saturate(6);
}

.photo.filter-zombie img     { z-index: 1; }
.photo.filter-zombie .filter { z-index: 2; }

.photo.filter-zombie .filter
{
  background: url(img/video-output/zombie-photo_filter.jpg) left top no-repeat;
  width: 850px;
  height: 500px;
  position: absolute;
  left: -50px;
  top: 0;
  opacity: .65;
}

.output.active,
.output.active img
{
  -webkit-animation-play-state: running;
     -moz-animation-play-state: running;
       -o-animation-play-state: running;
          animation-play-state: running;
}

.output.active.paused,
.output.active.paused img
{
  -webkit-animation-play-state: paused;
     -moz-animation-play-state: paused;
       -o-animation-play-state: paused;
          animation-play-state: paused;
}


/* Video Outputs: Shared */

#ad-smalltown-positive_slogan,
#ad-metro-positive_slogan
{
  position: absolute;
  background: url(img/video-output/bio-positive_slogan.jpg);
  height: 450px;
  width: 800px;
  top: 0;
  overflow: hidden;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  color: white;
  opacity: 0;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
     -moz-transition-property: -moz-opacity;
     -moz-transition-duration: 1s;
      -ms-transition-property: -ms-opacity;
      -ms-transition-duration: 1s;
       -o-transition-property: -o-opacity;
       -o-transition-duration: 1s;
          transition-property: opacity;
          transition-duration: 1s;
}

#ad-smalltown-positive_slogan-photo img,
#ad-metro-positive_slogan-photo img
{
  padding: 10px;
  background: #eee;
  border: 1px solid #fff;
  box-shadow: 0 2px 15px #333;
  position: absolute;
  top: 140px;
  left: 1310px;
  width: 230px;
  -webkit-transform: scale(1.1) rotate(5deg) translate(800px);
     -moz-transform: scale(1.1) rotate(5deg) translate(800px);
      -ms-transform: scale(1.1) rotate(5deg) translate(800px);
       -o-transform: scale(1.1) rotate(5deg) translate(800px);
          transform: scale(1.1) rotate(5deg) translate(800px);
  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 1s, 1s;
     -moz-transition-property: -moz-transform;
     -moz-transition-duration: 1s, 1s;
      -ms-transition-property: -ms-transform;
      -ms-transition-duration: 1s, 1s;
       -o-transition-property: -o-transform;
       -o-transition-duration: 1s, 1s;
          transition-property: transform;
          transition-duration: 1s, 1s;
}

#ad-smalltown-positive_slogan-photo.active img,
#ad-metro-positive_slogan-photo.active img
{
  left: 480px;
  opacity: 1;
  -webkit-transform: scale(1) rotate(6deg) translate(0px);
     -moz-transform: scale(1) rotate(6deg) translate(0px);
      -ms-transform: scale(1) rotate(6deg) translate(0px);
       -o-transform: scale(1) rotate(6deg) translate(0px);
          transform: scale(1) rotate(6deg) translate(0px);
}

#ad-smalltown-positive_slogan-name,
#ad-metro-positive_slogan-name
{
  font-size: 40px;
  margin: 20px 20px 5px 20px;
  line-height: 1em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

#ad-smalltown-positive_slogan-text,
#ad-metro-positive_slogan-text
{
  font-size: 24px;
  margin: 0 20px;
  line-height: 1.2em;
  text-align: center;
  text-transform: uppercase;
}

#ad-smalltown-positive_slogan-legal,
#ad-metro-positive_slogan-legal
{
  color: #444;
  font-family: 'proxima-nova';
  font-weight: 900;
  text-transform: uppercase;
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 800px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}


/* Video Outputs: Small-town. */

#ad-smalltown-hometown
{
  height: 450px;
  width: 800px;
  top: 0;
  color: #f0f6f4;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8em;
  text-align: center;
  line-height: .9em;
  background: url(img/video-output/smalltown-hometown.jpg);
  position: absolute;
  opacity: 0;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s, 4s;
     -moz-transition-property: -moz-opacity, -moz-transform;
     -moz-transition-duration: 1s, 4s;
      -ms-transition-property: -ms-opacity, -ms-transform;
      -ms-transition-duration: 1s, 4s;
       -o-transition-property: -o-opacity, -o-transform;
       -o-transition-duration: 1s, 4s;
          transition-property: opacity, transform;
          transition-duration: 1s, 4s;
}

#ad-smalltown-hometown.active
{
  opacity:1;
  -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

#ad-smalltown-hometown-name-wrapper
{
  color: #f2f1dd;
  display: table;
  position: absolute;
  left: 371px;
  top: 185px;
  width: 260px;
  height: 55px;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  transform: rotate(1deg);
}

#ad-smalltown-hometown-name
{
  display: table-cell;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
}

#ad-smalltown-diploma
{
  width: 800px;
  height: 450px;
  background: url(img/video-output/smalltown-diploma.jpg) center;
  position: absolute;
  font-family: 'bickham-script-pro';
  text-align: center;
  font-size: 3em;
  line-height: 1em;
  top: 0;
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 1s, 10s;
     -moz-transition-property: -moz-opacity, -moz-transform;
     -moz-transition-duration: 1s, 10s;
      -ms-transition-property: -ms-opacity, -ms-transform;
      -ms-transition-duration: 1s, 10s;
       -o-transition-property: -o-opacity, -o-transform;
       -o-transition-duration: 1s, 10s;
          transition-property: opacity, transform;
          transition-duration: 1s, 10s;
}

#ad-smalltown-diploma-place
{
  font-size: .6em;
  margin-top: 85px;
  margin-bottom: 45px;
  font-family: "ff-brokenscript-web";
}

#ad-smalltown-diploma-year
{
  font-weight: bold;
  font-size: 64px;
  margin-top: 120px;
}

#ad-smalltown-diploma-name
{
  font-size: 1.6em;
}

#ad-smalltown-diploma.active
{
  opacity: 1;
  -webkit-transform: scale(1.2) translate(0px);
     -moz-transform: scale(1.2) translate(0px);
      -ms-transform: scale(1.2) translate(0px);
       -o-transform: scale(1.2) translate(0px);
          transform: scale(1.2) translate(0px);
}


/* Video Outputs: Metro. */

#ad-metro-trophy
{
  width: 800px;
  height: 450px;
  background: url(img/video-output/metro-trophy.jpg) center;
  position: absolute;
  font-family: 'bickham-script-pro';
  text-align: center;
  font-size: 3em;
  line-height: 1em;
  top: 0;
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 1s, 10s;
     -moz-transition-property: -moz-opacity, -moz-transform;
     -moz-transition-duration: 1s, 10s;
      -ms-transition-property: -ms-opacity, -ms-transform;
      -ms-transition-duration: 1s, 10s;
       -o-transition-property: -o-opacity, -o-transform;
       -o-transition-duration: 1s, 10s;
          transition-property: opacity, transform;
          transition-duration: 1s, 10s;

}

#ad-metro-trophy-place
{
  color: #37121a;
  font-family: ff-brokenscript-web;
  font-size: 9px;
  margin-top: 322px;
}

#ad-metro-trophy .user-name
{
  font-size: 22px;
  margin-top: -29px;
}

#ad-metro-trophy-year
{
  font-family: ff-brokenscript-web;
  font-size: 10px;
  margin-top: -37px;
}

#ad-metro-trophy.active
{
  opacity: 1;
  -webkit-transform: scale(1.2) translate(0px);
     -moz-transform: scale(1.2) translate(0px);
      -ms-transform: scale(1.2) translate(0px);
       -o-transform: scale(1.2) translate(0px);
          transform: scale(1.2) translate(0px);
}

/* Video Outputs: Credentials. */

.output#ad-credentials-photo.active
{
  opacity: .65 !important;
}

#ad-credentials-likes
{
  background: url(img/video-output/credentials-likes.jpg);
  overflow: hidden;
  white-space: nowrap;
}

#ad-credentials-likes-like1,
#ad-credentials-likes-like2
{
  font-family: proxima-nova;
  font-size: 42px;
  font-weight: 900;
  width: 100%;
  position: absolute;
  text-align: center;
  -webkit-transform: rotate(-17deg);
     -moz-transform: rotate(-17deg);
      -ms-transform: rotate(-17deg);
       -o-transform: rotate(-17deg);
          transform: rotate(-17deg);
  -webkit-transition: all 10s ease-in-out;
     -moz-transition: all 10s ease-in-out;
      -ms-transition: all 10s ease-in-out;
       -o-transition: all 10s ease-in-out;
          transition: all 10s ease-in-out;
}

#ad-credentials-likes-like1
{
  color: #000;
  top: 110px;
  left: -100px;
}

#ad-credentials-likes-like2
{
  color: #fff;
  top: 300px;
  left: 100px;
}

#ad-credentials-likes.active #ad-credentials-likes-like1
{
  text-indent: 500px;
}

#ad-credentials-likes.active #ad-credentials-likes-like2
{
  text-indent: -500px;
}

#ad-credentials-negative_slogan,
#ad-character-negative_slogan
{
  background: url(img/video-output/attack-negative_slogan.jpg) left top no-repeat;
}

#ad-credentials-negative_slogan-text,
#ad-character-negative_slogan-text
{
  color: #fff;
  font-size: 40px;
  margin: 20px 20px 5px 20px;
  line-height: 1em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  position: relative;
  z-index: 2;
}

#ad-credentials-negative_slogan-photo img,
#ad-character-negative_slogan-photo img
{
  padding: 10px;
  background: #000;
  box-shadow: 0 2px 15px #333;
  margin-left: -115px;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 165px;
  z-index: 1;
  -webkit-transition: all 2s ease-in-out;
     -moz-transition: all 2s ease-in-out;
      -ms-transition: all 2s ease-in-out;
       -o-transition: all 2s ease-in-out;
          transition: all 2s ease-in-out;
}

#ad-credentials-negative_slogan-photo.active img,
#ad-character-negative_slogan-photo.active img
{
  opacity: 1;
}

#ad-credentials-negative_slogan-legal,
#ad-character-negative_slogan-legal
{
  font-family: 'proxima-nova';
  font-weight: 900;
  text-transform: uppercase;
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 800px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}


/* Video Outputs: Character. */

#ad-character-out_of_context_quote
{
  background: url(img/video-output/character-out_of_context_quote.jpg);
}

#ad-character-out_of_context_quote-text
{
  background: url(img/video-output/character-out_of_context_quote-text.jpg);
  border: 8px solid #000;
  font-size: 28px;
  text-align: center;
  text-transform: uppercase;
  width: 500px;
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -270px;
  padding: 15px 25px;
  -webkit-transform: rotate(-4deg);
     -moz-transform: rotate(-4deg);
      -ms-transform: rotate(-4deg);
       -o-transform: rotate(-4deg);
          transform: rotate(-4deg);
  -webkit-transition: all 5s ease-in-out;
     -moz-transition: all 5s ease-in-out;
      -ms-transition: all 5s ease-in-out;
       -o-transition: all 5s ease-in-out;
          transition: all 5s ease-in-out;
}

#ad-character-out_of_context_quote.active #ad-character-out_of_context_quote-text
{
  top: 25%;
  -webkit-transform: rotate(4deg) scale(1.5);
     -moz-transform: rotate(4deg) scale(1.5);
      -ms-transform: rotate(4deg) scale(1.5);
       -o-transform: rotate(4deg) scale(1.5);
          transform: rotate(4deg) scale(1.5);
}

#ad-character-backfire_quote-text
{
  color: #fff;
  font-size: 48px;
  text-align: center;
  text-transform: uppercase;
  width: 600px;
  position: absolute;
  top: 20px;
  left: 45%;
  margin-left: -350px;
  padding: 15px 25px;
  text-shadow: 1px 1px 5px rgba(0,0,0,1);
  -webkit-transform: rotate(-2deg);
     -moz-transform: rotate(-2deg);
      -ms-transform: rotate(-2deg);
       -o-transform: rotate(-2deg);
          transform: rotate(-2deg);
  -webkit-transition: all 5s ease-in-out;
     -moz-transition: all 5s ease-in-out;
      -ms-transition: all 5s ease-in-out;
       -o-transition: all 5s ease-in-out;
          transition: all 5s ease-in-out;
}

#ad-character-backfire_quote-photo img
{
  border: 10px solid #fff;
  position: absolute;
  bottom: 50px;
  right: 50px;
  width: 200px;
  -webkit-transform: rotate(6deg);
     -moz-transform: rotate(6deg);
      -ms-transform: rotate(6deg);
       -o-transform: rotate(6deg);
          transform: rotate(6deg);
  -webkit-transition: all 5s ease-in-out;
     -moz-transition: all 5s ease-in-out;
      -ms-transition: all 5s ease-in-out;
       -o-transition: all 5s ease-in-out;
          transition: all 5s ease-in-out;
}

#ad-character-backfire_quote.active #ad-character-backfire_quote-text
{
  left: 50%;
}

#ad-character-backfire_quote.active #ad-character-backfire_quote-photo img
{
  right: 100px; 
}

/* Video Outputs: Zombie */

#ad-zombie-photo1.photo .graphic_overlay
{
  background: url(img/video-output/zombie-presidential_seal.png) 25px 25px no-repeat;
  width: 800px;
  height: 450px;
  z-index: 9;
  position: absolute;
  left: 0;
  top: 0;
}

#ad-zombie-hometown-name-wrapper
{
  color: #00f01c;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: -3px;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 0, 0, 1);
  text-transform: uppercase;
  width: 305px;
  height: 35px;
  position: absolute;
  left: 0;
  top: 38px;
  overflow: hidden;
  -webkit-transform: rotate(-7deg);
     -moz-transform: rotate(-7deg);
      -ms-transform: rotate(-7deg);
       -o-transform: rotate(-7deg);
          transform: rotate(-7deg);
}

#ad-zombie-out_of_context_quote
{
  background: url(img/video-output/zombie-newspaper.gif) left top no-repeat;
  background-position: -25px 125px;
  -webkit-transition: opacity 1s, all 5s;
     -moz-transition: opacity 1s, all 5s;
      -ms-transition: opacity 1s, all 5s;
       -o-transition: opacity 1s, all 5s;
          transition: opacity 1s, all 5s;
}

#ad-zombie-out_of_context_quote.active
{
  background-position: -150px 125px;
}

#ad-zombie-out_of_context_quote-text
{
  background: url(img/video-overlay.png);
  color: #fff;
  font-size: 48px;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  margin-top: 280px;
  padding: .2em .5em;
  -webkit-transition: all 10s;
     -moz-transition: all 10s;
      -ms-transition: all 10s;
       -o-transition: all 10s;
          transition: all 10s;
}

#ad-zombie-out_of_context_quote.active #ad-zombie-out_of_context_quote-text
{
  margin-left: -1000px;
}

#ad-zombie-over_shoulder_photo
{
  width: 261px;
  height: 202px;
  overflow: hide;
  left: 126px;
  top: 43px;
}

#ad-zombie-over_shoulder_photo.output.photo img
{
  min-width: 350px;
  min-height: 350px;
  width: 350px;
}

#ad-zombie-photo2-title
{
  color: #fff;
  font-size: 48px;
  margin: 20px 20px 5px 20px;
  line-height: 1em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  position: relative;
  z-index: 2;
}


#ad-zombie-photo2-legal
{
  color: #fff;
  font-family: 'proxima-nova';
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: .8;
  position: absolute;
  top: 200px;
  text-align: center;
  width: 800px;
  text-shadow: 1px 1px 0 rgba(0, 0 ,0, 1);
  z-index: 2;
}