@charset "UTF-8";
/* @import "lib/base-page"; */
/* Required */
/* @import "lib/header-footer"; */
/*
CNN Expansion 2.0 Colors
*/
/* Optional (uncomment if needed) */
/* @import "buttons"; */
.share-button {
  background-image: url("../media/social-buttons.png");
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  margin-bottom: 10px; }
  .share-button.facebook {
    background-position: 0 0; }
    .share-button.facebook:hover {
      cursor: pointer;
      background-position: -36px 0; }
  .share-button.twitter {
    background-position: 0 -36px; }
    .share-button.twitter:hover {
      cursor: pointer;
      background-position: -36px -36px; }

/* project specific breakpoints */
/* Default style, this breakpoint shouldn't actually be used */
/* wide short landscapes, e.g. iPhone 6+ */
/* e.g. ipads and up */
/* super big */
html {
  /* Keep font size the same when device orientation changes */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  background-color: #16394d;
  margin: 0;
  font-family: CNN, 'Helvetica Neue', Helvetica, Arial, Utkal, sans-serif;
  font-weight: 200;
  color: white;
  /* was $light-blue */
  font-size: 100%; }

/*
 * Logo is hidden and 'top' moved up for screens shorter than 500px
 */
.logo {
  display: none; }
  @media screen and (min-height: 500px) {
    .logo {
      display: block;
      position: fixed;
      top: 10px;
      left: 10px;
      opacity: 0.7;
      width: 50px;
      height: 50px;
      z-index: 1000; }
      .logo > img {
        width: 100%; } }

.toolbarButton {
  position: fixed;
  bottom: 10px;
  width: 50px;
  height: 50px;
  z-index: 2000;
  background-repeat: no-repeat;
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* background-color: $bright-blue; */
  background-size: 100% 100%;
  background-position: center center;
  opacity: .7;
  /* border-radius: 50%; */ }
  .toolbarButton:hover {
    cursor: pointer; }

.prev {
  right: 90px;
  background-image: url("http://i.cdn.turner.com/cnn/interactive/2015/03/opinion/ctl-child-poverty/media/arrow-left.gif"); }

.next {
  right: 20px;
  background-image: url("http://i.cdn.turner.com/cnn/interactive/2015/03/opinion/ctl-child-poverty/media/arrow-right.gif"); }

.helpButton {
  left: 20px;
  background-image: url("http://i.cdn.turner.com/cnn/interactive/2015/03/opinion/ctl-child-poverty/media/help-icon.gif"); }

.share {
  left: 90px;
  background-image: url("http://i.cdn.turner.com/cnn/interactive/2015/03/opinion/ctl-child-poverty/media/social-circles.gif"); }

.helpBox {
  box-sizing: border-box;
  position: fixed;
  display: none;
  padding: 10px;
  background-color: #333;
  color: #acacac;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  z-index: 5000;
  overflow-y: scroll;
  border: 1px solid #1a1a1a; }
  .helpBox > p {
    font-size: 14px;
    line-height: 1.4em;
    font-weight: normal;
    text-shadow: none;
    margin: 1em 0 1em 0; }
  .helpBox img {
    max-width: 100%; }
  @media screen and (min-width: 701px) and (min-height: 501px) {
    .helpBox {
      padding: 20px; }
    .helpBox > p {
      font-size: 18px; } }

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px; }
  .close-btn:hover {
    cursor: pointer; }

.ctl-logo {
  position: relative;
  top: -5px;
  left: -3px; }

.progress-bar {
  z-index: 5000;
  background-color: #ace2d4;
  height: 3px;
  position: fixed;
  bottom: 0;
  left: 0; }
  @media screen and (min-width: 701px) and (min-height: 501px) {
    .progress-bar {
      height: 5px; } }

#frame-container a {
  color: #89bbd4; }
  #frame-container a:hover {
    color: #f0ae2d; }
  #frame-container a.btn {
    color: white; }

.single-frame {
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 500;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat; }
  .single-frame.slide-left {
    left: 100%; }
  .single-frame.fade-in {
    display: hidden; }
  .single-frame > * {
    position: absolute; }

@media screen and (max-width: 700px) and (max-height: 500px) {
  .single-frame.image > p.default-position,
  .single-frame.video > p.default-position,
  .single-frame.image > p.bottom {
    background-color: rgba(0, 0, 0, 0.4);
    margin-left: -5%;
    padding: 10px 5%;
    width: 90%; } }
img.vignette {
  width: 100%;
  height: 100%; }

img.bg,
video.bg {
  width: 100%;
  height: auto;
  z-index: -1;
  overflow: hidden; }
  @media screen and (max-aspect-ratio: 3 / 2) {
    img.bg,
    video.bg {
      height: 100%;
      width: auto; } }

.bg-top.bg-left {
  top: 0;
  left: 0;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }
.bg-top.bg-center {
  top: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }
.bg-top.bg-right {
  top: 0;
  right: 0;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }

.bg-mid.bg-left {
  top: 50%;
  left: 0;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%); }
.bg-mid.bg-center {
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
.bg-mid.bg-right {
  top: 50%;
  right: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%); }

.bg-bottom.bg-left {
  bottom: 0;
  left: 0;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }
.bg-bottom.bg-center {
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }
.bg-bottom.bg-right {
  bottom: 0;
  right: 0;
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }

/* Hide play button on background videos in iOS */
video.bg::-webkit-media-controls {
  display: none !important; }

.default-position {
  left: 5%;
  top: 25px; }

.top {
  top: 25px; }

@media screen and (min-height: 500px) {
  .default-position {
    top: 60px; }

  .top {
    top: 60px; } }
.left {
  left: 5%; }

.right {
  right: 5%;
  text-align: right; }

.middle {
  top: 50%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%); }

.bottom {
  bottom: 90px; }

.advertisement {
  top: 50%;
  left: 50%;
  width: 300;
  height: 250;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

h1 {
  font-size: 56px;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 1.1em;
  color: #f0ae2d;
  margin-bottom: 12px;
  width: 90%; }
  @media screen and (min-width: 701px) and (max-height: 500px) {
    h1 {
      font-size: 72px; } }
  @media screen and (min-width: 701px) and (min-height: 501px) {
    h1 {
      font-size: 86px; } }
  @media screen and (min-width: 1200px) {
    h1 {
      font-size: 112px; } }

h2 {
  font-size: 36px;
  line-height: 1em;
  text-shadow: 1px 2px 2px black;
  width: 90%; }
  h2 > em {
    font-size: .75em;
    display: block; }
  @media screen and (min-width: 701px) and (max-height: 500px) {
    h2 {
      font-size: 48px; } }
  @media screen and (min-width: 701px) and (min-height: 501px) {
    h2 {
      font-size: 62px; } }
  @media screen and (min-width: 1200px) {
    h2 {
      font-size: 78px; } }

p,
li {
  font-size: 21px;
  line-height: 1.2em;
  text-shadow: 1px 2px 2px black;
  width: 90%; }
  @media screen and (min-width: 701px) and (max-height: 500px) {
    p,
    li {
      font-size: 28px; } }
  @media screen and (min-width: 701px) and (min-height: 501px) {
    p,
    li {
      font-size: 52px; } }
  @media screen and (min-width: 1200px) {
    p,
    li {
      font-size: 60px; } }

.intro-credit {
  font-size: 16px;
  font-weight: 200; }
  @media screen and (max-height: 400px) {
    .intro-credit {
      /* Hide on short screens; content is duped in
         'info' box anyway */ }
      .intro-credit {
        display: none; } }
  @media screen and (min-width: 701px) and (max-height: 500px) {
    .intro-credit {
      font-size: 18px; } }
  @media screen and (min-width: 701px) and (min-height: 501px) {
    .intro-credit {
      font-size: 21px; } }

.editors-note {
  display: inline-block; }

.arrow-help {
  position: absolute;
  text-align: right;
  width: 170px;
  bottom: 60px;
  right: 20px;
  font-size: 14px;
  color: #89bbd4;
  font-style: italic; }

.source {
  top: 5px;
  right: 5%;
  font-size: 12px;
  text-align: right;
  opacity: 0.7; }
  @media screen and (min-height: 500px) {
    .source {
      font-size: 14px;
      top: 10px; } }

p.jorge-photo {
  left: 5%;
  bottom: 70px; }
  p.jorge-photo::after {
    content: "Photo by Jorge Valencia";
    display: block;
    font-size: 70%;
    font-style: italic;
    margin-top: -.1em;
    padding-top: 0; }
  @media screen and (max-width: 700px) and (max-height: 500px) {
    p.jorge-photo {
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 10px 5%; } }

em {
  -webkit-transition: color .5s linear 1s;
  transition: color .5s linear 1s; }

em.gold {
  color: #f0ae2d; }

.quotation {
  font-style: italic; }
  .quotation span {
    display: block;
    font-size: .7em;
    padding-top: .3em;
    line-height: 1.1em; }

q {
  font-style: normal; }
  q::before {
    content: "“"; }
  q::after {
    content: "”"; }

div.video-container {
  top: 50%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  /* top: 0; */
  left: 0;
  width: 100%; }

video {
  width: 100%;
  height: auto; }

/*
 * Button style
 */
div.buttons {
  text-align: center; }

a.btn {
  color: white;
  display: inline-block;
  font-size: .75em;
  padding: .25em 20px;
  margin: 10px;
  background-color: #134c69;
  border-radius: 5px; }
  a.btn:hover {
    background-color: #f0ae2d;
    color: white;
    cursor: pointer; }

ul {
  list-style-type: none; }

li {
  margin-bottom: .5em; }

/*
 * Chart styles
 */
/* bar chart (d3) */
.chart-container {
  width: 100%;
  height: 100%; }

svg {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.bar > rect {
  fill: #134c69; }

.highlight > rect {
  fill: #f0ae2d; }

.axis-label {
  fill: white;
  text-transform: uppercase;
  letter-spacing: .1em; }
  @media screen and (max-height: 350px) {
    .axis-label {
      font-size: 0.9em; } }

.footnote {
  fill: #134c69; }

.label {
  fill: #89bbd4; }
  .highlight .label {
    fill: #134c69; }
  @media screen and (max-height: 350px) {
    .label {
      font-size: 12px; } }
  @media screen and (min-height: 550px) {
    .label {
      font-size: 20px;
      font-weight: bold; } }

/* line chart */
.line {
  fill: none;
  stroke: #134c69;
  stroke-width: 3px; }

.circle {
  fill: #134c69; }
  .circle > text {
    font-size: 12px;
    opacity: 0; }
  .circle > text.wage {
    font-weight: bold; }

@media screen and (min-width: 701px) and (min-height: 501px) {
  .circle > text {
    font-size: 16px; }

  .line {
    stroke-width: 5px; } }
.circle.highlight {
  fill: #f0ae2d; }

.minimum-wage {
  font-weight: normal;
  width: 100%;
  height: 60%;
  position: fixed;
  left: 0;
  bottom: 0; }

.median-income {
  font-weight: normal;
  width: 100%;
  height: 35%;
  position: fixed;
  left: 0;
  bottom: 70px;
  opacity: .9; }
  @media screen and (min-height: 400px) {
    .median-income {
      height: 45%; } }

/* brain graphic */
.brain-img > img {
  position: fixed;
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-height: 90%; }

.start-hidden {
  display: none; }

/* silhouettes */
.silhouettes {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%; }
  .silhouettes > img {
    opacity: 0; }

.silhouettes-five > img {
  margin: 0;
  padding: 0;
  width: 20%;
  height: auto;
  max-height: 100%; }
.silhouettes-five > img.gold-boy {
  position: absolute;
  bottom: 7px;
  right: 20%; }

.silhouettes-twenty > img {
  margin: 0;
  padding: 0;
  width: 10%;
  height: auto; }
  @media screen and (orientation: portrait) {
    .silhouettes-twenty > img {
      width: 20%;
      height: auto;
      max-height: 25%;
      max-width: 20%; } }
.silhouettes-twenty > img.gold-boy {
  position: absolute;
  bottom: 7px;
  right: 30%; }
  @media screen and (orientation: portrait) {
    .silhouettes-twenty > img.gold-boy {
      bottom: 7px;
      right: 40%; } }

.life-cycle {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0; }
  .life-cycle img {
    position: absolute;
    display: none;
    bottom: 0;
    width: 20%;
    height: auto; }
  .life-cycle .young-man {
    left: 52%; }
  .life-cycle .adult-man {
    left: 28%; }
  .life-cycle .old-man {
    left: 4%; }

.ctl-share-container {
  display: none;
  position: fixed;
  width: 36px;
  height: 75px;
  bottom: 70px;
  left: 10px; }

/*
   VIDEO
*/

.cvp-video div {
  max-width: 100% !important;
  max-height: 100% !important;
  height: 0;
  width: 100%;
    padding-bottom: 56.25%;
}
.cvp-video video,
.cvp-video iframe,
.cvp-video object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.cvp-video.html5 {
  padding-bottom: 0;
  height: auto; }
.cvp-video .poster {
  display: block;
  cursor: pointer; }
  .cvp-video .poster .poster-img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    width: 100%; }
  .cvp-video .poster.hide {
    visibility: hidden;
    cursor: default; }
.cvp-video .play-button {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; }
  .cvp-video .play-button .icon {
    position: absolute;
    background: url("url_assetsplaybutton_icon.png") no-repeat;
    height: 67px;
    width: 67px;
    margin-left: -33px;
    margin-top: -33px;
    left: 50%;
    top: 50%; }
  .cvp-video .play-button:hover .icon {
    background-position: 0 -67px; }

.video-container.video {
  padding: 5px;
  border: 1px #EAEAEA solid;
  background: #FFF;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: 100%; }

.single-frame {
  pointer-events: none; }

.single-frame a,
.single-frame .advertisement,
.single-frame .cvp-video {
  pointer-events: auto; }

div#js-tos-prompt {
  display: none !important; }

/*# sourceMappingURL=ctl-poverty.css.map */