@charset "UTF-8";
/* Required */
/*  ------------------------------------------------------------------
  
@library :      CNN Grid System - SASS
@version :      0.0.0.1
@description :  System for managing breakpoints and
	            responsive grid columns.

@author :       Kenneth Uzquiano (kenneth.uzquiano@gmail.com)

------------------------------------------------------------------ */
    /*  BASE VALUES
		-----------
		All default values for generating the grid can be found in the
		'lib/vars' file. They can also be overidden by the project's vars file.
		Here is a brief description of what each variable within this file does.
		These variables are global, as they need to be used from mixin to mixin,
		but are calculated at each grid change, thus, do not need to be initialized.
		
		    $grid-id :              Active grid id
		    $grid-active :          Active grid
		    $grid-columns :         Number of columns in active grid
		    $grid-column-width :    Width of a column based on units below
		    $grid-query :           Media query for active grid
		    $grid-full-width :      Full width of active grid
    */
    /*  -------------------------------
	                MIXINS
		-------------------------------

		@mixin :                @mixin breakpoint( $breakpointId: mobile )
		@description :          Define active grid by id
		@param $breakpointId :  Id of grid to activate (default : mobile)
		@param $retina :        Include media queries for retina displays (default : false)
    */
/* 20px */
    /*  
    	@mixin :                @mixin grid-col( $col: 1 )
		@description :          Calculate widths of grid columns based on px, ems, or %
		@param $col :           Number of columns to calculate width (default : 1)
		@param $fluid :         Calculate using percentages vs em / px (default : true)
	*/
/*
	@mixin :                @mixin grid-row( $fluid: true )
	@description :          Define a row to house columned elements
	@param $fluid :         Calculate using percentages vs em / px (default : true)
*/
/*
	---------------------------------
	           FUNCTIONS
	---------------------------------
*/
/*
	@function :         -fn-findGridById( $gridID: mobile )
	@description :      Define active grid by id
	@param $gridId :    Id of grid to activate
*/
/*
	@function :         -fn-setGridProperties($p_grid)
	@description :      Set properties based on active grid
	@param $p_grid :    Grid to use to set properties
*/
/*
	@function :         -fn-getStaticWidth($col: 1)
	@description :      Calculate and return the static width of columns.
	@param $col :       Number of columns to use to calculate static width.
*/
/*
	@function :         -fn-getFluidWidth($col: 1)
	@description :      Calculate and return the fluid width of columns.
	@param $col :       Number of columns to use to calculate fluid width.
*/
/*
	@function :         -fn-getStaticMargin()
	@description :      Calculate and return the static margin
	@param :            null
*/
/*
	@function :         -fn-getFluidMargin()
	@description :      Calculate and return the fluid margin
	@param :            null
*/
body {
  font-size: 16px;
  font-family: CNN,"Helvetica Neue",Helvetica,Arial,Utkal,sans-serif; }
  body * {
    box-sizing: border-box; }

/* Set up flexible containers */
.interactive-container,
.cnn-outbrain,
#comments,
#disqus_thread {
  margin: 0 auto;
  width: 95%;
  max-width: 980px; }

/* ------------ MOBILE / DEFAULT STYLES ------------ */
h1 {
  font-size: 1.75rem;
  line-height: 1.21429;
  padding: 10px 0 0;
  font-weight: 300;
  margin: 10px 0; }

.metadata {
  color: #737373;
  font-weight: 400;
  font-size: .75rem;
  line-height: 1.5; }
  .metadata p {
    margin-bottom: 0; }
  .metadata__byline {
    font-weight: 700;
    padding-bottom: 0; }
    .metadata__byline a {
      color: #006598; }
  .metadata:after {
    clear: both;
    content: '';
    display: table; }

p {
  padding: 0 10px 18px 0; }

/* ------------ TABLET STYLES ------------ */
/* md 10 screen and (min-width: 30em) */
@media screen and (min-width: 30em) {
  h1 {
    font-size: 3.25rem;
    line-height: 1.07692;
    padding: 10px 0 0;
    font-weight: 300;
    margin: 10px 0; }

  .metadata {
    color: #737373;
    font-weight: 400;
    font-size: .875rem;
    line-height: 1.57143; }
    .metadata p {
      margin-bottom: 0; }
    .metadata__byline {
      font-weight: 700;
      padding-bottom: 0; }
      .metadata__byline a {
        color: #006598; }
    .metadata:after {
      clear: both;
      content: '';
      display: table; } }
/* ------------ DESKTOP STYLES ------------ */
/* lg 12 screen and (min-width: 48em) */
@media screen and (min-width: 48em) {
  h1 {
    font-size: 3.875rem;
    line-height: 1.06452;
    padding: 10px 0 0;
    font-weight: 300;
    margin: 10px 0; }

  .metadata {
    color: #737373;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5; }
    .metadata p {
      margin-bottom: 0; }
    .metadata__byline {
      font-weight: 700;
      padding-bottom: 0; }
      .metadata__byline a {
        color: #006598; }
    .metadata:after {
      clear: both;
      content: '';
      display: table; } }
/* CNN Sharebar */
.share-container {
  width: 135px;
  position: relative;
  margin: 0 auto 0;
  padding: 0; }
  .share-container .share-bar {
    width: auto;
    display: inline-block;
    float: none;
    padding: 0; }
    .share-container .share-bar li.share-button {
      width: 35px;
      height: 35px;
      float: right;
      margin-left: 15px;
      cursor: pointer;
      list-style-type: none;
      -webkit-transition: transform 0.5s ease 0s;
      transition: transform 0.5s ease 0s; }
      .share-container .share-bar li.share-button.email {
        background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/email.png");
        background-size: 35px 35px;
        margin-left: 0; }
      .share-container .share-bar li.share-button.facebook {
        background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/facebook.png");
        background-size: 35px 35px; }
      .share-container .share-bar li.share-button.twitter {
        background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/twitter.png");
        background-size: 35px 35px; }
      .share-container .share-bar li.share-button:hover {
        transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2); }

/*---------------
TABLET
---------------*/
/* md 10 screen and (min-width: 30em) */
@media screen and (min-width: 30em) {
  .share-container {
    width: 135px;
    position: relative;
    clear: both;
    margin: 0 auto 0; }
    .share-container .share-bar {
      width: auto;
      display: inline-block;
      padding-bottom: 15px; }
      .share-container .share-bar li.share-button {
        width: 35px;
        height: 35px;
        float: right;
        margin-left: 15px;
        cursor: pointer;
        list-style-type: none;
        -webkit-transition: transform 0.5s ease 0s;
        transition: transform 0.5s ease 0s; }
        .share-container .share-bar li.share-button.email {
          background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/email.png");
          background-size: 35px 35px;
          margin-left: 0; }
        .share-container .share-bar li.share-button.facebook {
          background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/facebook.png");
          background-size: 35px 35px; }
        .share-container .share-bar li.share-button.twitter {
          background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/twitter.png");
          background-size: 35px 35px; }
        .share-container .share-bar li.share-button:hover {
          transform: scale(1.2, 1.2);
          -webkit-transform: scale(1.2, 1.2); } }
/*---------------
DESKTOP
---------------*/
/* lg 12 screen and (min-width: 48em) */
@media screen and (min-width: 48em) {
  .share-container {
    width: 135px;
    float: right;
    margin: 0 auto 0; }
    .share-container.center {
      float: none; }
    .share-container .share-bar {
      width: auto;
      display: inline-block;
      padding: 0; }
      .share-container .share-bar li.share-button {
        width: 35px;
        height: 35px;
        float: right;
        margin-left: 15px;
        cursor: pointer;
        list-style-type: none;
        -webkit-transition: transform 0.5s ease 0s;
        transition: transform 0.5s ease 0s; }
        .share-container .share-bar li.share-button.email {
          background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/email.png");
          background-size: 35px 35px;
          margin-left: 0; }
        .share-container .share-bar li.share-button.facebook {
          background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/facebook.png");
          background-size: 35px 35px; }
        .share-container .share-bar li.share-button.twitter {
          background: url("http://i.cdn.turner.com/cnn/.e/img/4.0/interactive/sharebar/twitter.png");
          background-size: 35px 35px; }
        .share-container .share-bar li.share-button:hover {
          transform: scale(1.2, 1.2);
          -webkit-transform: scale(1.2, 1.2); } }
/* Project-level vars */
/*
    CNN Colors
    based on swatches from Data viz style guide
	https://www.dropbox.com/s/vo2qkfk6ycgndni/Data%20Viz%20Style%20Guide-1.pdf?dl=0
*/
/*  ------------------------------------------------------------------
  
@library :      CNN Grid System - SASS
@version :      0.0.0.1
@description :  System for managing breakpoints and
	            responsive grid columns.

@author :       Kenneth Uzquiano (kenneth.uzquiano@gmail.com)

------------------------------------------------------------------ */
    /*  BASE VALUES
		-----------
		All default values for generating the grid can be found in the
		'lib/vars' file. They can also be overidden by the project's vars file.
		Here is a brief description of what each variable within this file does.
		These variables are global, as they need to be used from mixin to mixin,
		but are calculated at each grid change, thus, do not need to be initialized.
		
		    $grid-id :              Active grid id
		    $grid-active :          Active grid
		    $grid-columns :         Number of columns in active grid
		    $grid-column-width :    Width of a column based on units below
		    $grid-query :           Media query for active grid
		    $grid-full-width :      Full width of active grid
    */
    /*  -------------------------------
	                MIXINS
		-------------------------------

		@mixin :                @mixin breakpoint( $breakpointId: mobile )
		@description :          Define active grid by id
		@param $breakpointId :  Id of grid to activate (default : mobile)
		@param $retina :        Include media queries for retina displays (default : false)
    */
/* 20px */
    /*  
    	@mixin :                @mixin grid-col( $col: 1 )
		@description :          Calculate widths of grid columns based on px, ems, or %
		@param $col :           Number of columns to calculate width (default : 1)
		@param $fluid :         Calculate using percentages vs em / px (default : true)
	*/
/*
	@mixin :                @mixin grid-row( $fluid: true )
	@description :          Define a row to house columned elements
	@param $fluid :         Calculate using percentages vs em / px (default : true)
*/
/*
	---------------------------------
	           FUNCTIONS
	---------------------------------
*/
/*
	@function :         -fn-findGridById( $gridID: mobile )
	@description :      Define active grid by id
	@param $gridId :    Id of grid to activate
*/
/*
	@function :         -fn-setGridProperties($p_grid)
	@description :      Set properties based on active grid
	@param $p_grid :    Grid to use to set properties
*/
/*
	@function :         -fn-getStaticWidth($col: 1)
	@description :      Calculate and return the static width of columns.
	@param $col :       Number of columns to use to calculate static width.
*/
/*
	@function :         -fn-getFluidWidth($col: 1)
	@description :      Calculate and return the fluid width of columns.
	@param $col :       Number of columns to use to calculate fluid width.
*/
/*
	@function :         -fn-getStaticMargin()
	@description :      Calculate and return the static margin
	@param :            null
*/
/*
	@function :         -fn-getFluidMargin()
	@description :      Calculate and return the fluid margin
	@param :            null
*/
.document-interactive {
  margin: 0 auto 60px; }
  .document-interactive .slide {
    padding: 0 60px 10px;
    height: auto !important; }
    .document-interactive .slide.title {
      height: 760px; }
    .document-interactive .slide p {
      font-weight: 300;
      line-height: 1.3;
      padding-bottom: 0px;
      font-size: 0.8em; }
    .document-interactive .slide .DC-note-container, .document-interactive .slide img {
      display: block;
      width: 95%;
      height: auto;
      min-height: 40px;
      margin-right: 10px;
      vertical-align: top; }
    .document-interactive .slide .caption {
      width: 100%;
      display: block;
      vertical-align: top; }
      .document-interactive .slide .caption p {
        font-size: 0.8em; }

/* lg 12 screen and (min-width: 48em) */
@media screen and (min-width: 48em) {
  .document-interactive {
    height: auto;
    margin: 0 auto 80px; }
    .document-interactive .slide {
      padding: 0 60px; }
      .document-interactive .slide p {
        font-weight: 300;
        line-height: 1.3;
        font-size: 0.9em; }
      .document-interactive .slide .DC-note-container, .document-interactive .slide img {
        display: inline-block;
        width: 55%;
        height: auto;
        min-height: 40px;
        margin-right: 10px;
        vertical-align: top; }
      .document-interactive .slide .caption {
        width: 40%;
        display: inline-block;
        vertical-align: bottom; }
        .document-interactive .slide .caption p {
          font-size: 0.9em; } }
/*  ------------------------------------------------------------------
  
@library :      CNN Grid System - SASS
@version :      0.0.0.1
@description :  System for managing breakpoints and
	            responsive grid columns.

@author :       Kenneth Uzquiano (kenneth.uzquiano@gmail.com)

------------------------------------------------------------------ */
    /*  BASE VALUES
		-----------
		All default values for generating the grid can be found in the
		'lib/vars' file. They can also be overidden by the project's vars file.
		Here is a brief description of what each variable within this file does.
		These variables are global, as they need to be used from mixin to mixin,
		but are calculated at each grid change, thus, do not need to be initialized.
		
		    $grid-id :              Active grid id
		    $grid-active :          Active grid
		    $grid-columns :         Number of columns in active grid
		    $grid-column-width :    Width of a column based on units below
		    $grid-query :           Media query for active grid
		    $grid-full-width :      Full width of active grid
    */
    /*  -------------------------------
	                MIXINS
		-------------------------------

		@mixin :                @mixin breakpoint( $breakpointId: mobile )
		@description :          Define active grid by id
		@param $breakpointId :  Id of grid to activate (default : mobile)
		@param $retina :        Include media queries for retina displays (default : false)
    */
/* 20px */
    /*  
    	@mixin :                @mixin grid-col( $col: 1 )
		@description :          Calculate widths of grid columns based on px, ems, or %
		@param $col :           Number of columns to calculate width (default : 1)
		@param $fluid :         Calculate using percentages vs em / px (default : true)
	*/
/*
	@mixin :                @mixin grid-row( $fluid: true )
	@description :          Define a row to house columned elements
	@param $fluid :         Calculate using percentages vs em / px (default : true)
*/
/*
	---------------------------------
	           FUNCTIONS
	---------------------------------
*/
/*
	@function :         -fn-findGridById( $gridID: mobile )
	@description :      Define active grid by id
	@param $gridId :    Id of grid to activate
*/
/*
	@function :         -fn-setGridProperties($p_grid)
	@description :      Set properties based on active grid
	@param $p_grid :    Grid to use to set properties
*/
/*
	@function :         -fn-getStaticWidth($col: 1)
	@description :      Calculate and return the static width of columns.
	@param $col :       Number of columns to use to calculate static width.
*/
/*
	@function :         -fn-getFluidWidth($col: 1)
	@description :      Calculate and return the fluid width of columns.
	@param $col :       Number of columns to use to calculate fluid width.
*/
/*
	@function :         -fn-getStaticMargin()
	@description :      Calculate and return the static margin
	@param :            null
*/
/*
	@function :         -fn-getFluidMargin()
	@description :      Calculate and return the fluid margin
	@param :            null
*/
.promo {
  max-width: 320px;
  width: 100%;
  float: none;
  display: block;
  margin: 0 auto 20px;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada; }
  .promo h4 {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
    margin-top: 0;
    padding-top: 20px; }
  .promo h5 {
    font-size: 0.9em;
    font-weight: 500;
    padding: 0;
    margin: 0; }
  .promo p {
    font-size: 0.85em;
    font-weight: 300;
    line-height: 1.4;
    padding: 0;
    margin: 8px 0 40px; }
    .promo p:last-child {
      margin-bottom: 0px;
      padding-bottom: 20px; }

/* lg 12 screen and (min-width: 48em) */
@media screen and (min-width: 48em) {
  .promo {
    max-width: 270px;
    width: 32%;
    float: right;
    display: block;
    margin: 0 0 20px 20px;
    border-left: 1px solid #dadada;
    padding-left: 20px;
    border-top: none;
    border-bottom: none; }
    .promo h4 {
      font-size: 0.75em;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 300;
      margin-top: 0;
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 2px; }
    .promo h5 {
      font-size: 1em;
      font-weight: 500;
      padding: 0;
      margin: 0; }
    .promo p {
      font-size: 0.80em;
      font-weight: 300;
      line-height: 1.5;
      padding: 0;
      margin: 8px 0 40px; }
      .promo p:last-child {
        margin-bottom: 0;
        padding-bottom: 0; } }
/*  ------------------------------------------------------------------
  
@library :      CNN Grid System - SASS
@version :      0.0.0.1
@description :  System for managing breakpoints and
	            responsive grid columns.

@author :       Kenneth Uzquiano (kenneth.uzquiano@gmail.com)

------------------------------------------------------------------ */
    /*  BASE VALUES
		-----------
		All default values for generating the grid can be found in the
		'lib/vars' file. They can also be overidden by the project's vars file.
		Here is a brief description of what each variable within this file does.
		These variables are global, as they need to be used from mixin to mixin,
		but are calculated at each grid change, thus, do not need to be initialized.
		
		    $grid-id :              Active grid id
		    $grid-active :          Active grid
		    $grid-columns :         Number of columns in active grid
		    $grid-column-width :    Width of a column based on units below
		    $grid-query :           Media query for active grid
		    $grid-full-width :      Full width of active grid
    */
    /*  -------------------------------
	                MIXINS
		-------------------------------

		@mixin :                @mixin breakpoint( $breakpointId: mobile )
		@description :          Define active grid by id
		@param $breakpointId :  Id of grid to activate (default : mobile)
		@param $retina :        Include media queries for retina displays (default : false)
    */
/* 20px */
    /*  
    	@mixin :                @mixin grid-col( $col: 1 )
		@description :          Calculate widths of grid columns based on px, ems, or %
		@param $col :           Number of columns to calculate width (default : 1)
		@param $fluid :         Calculate using percentages vs em / px (default : true)
	*/
/*
	@mixin :                @mixin grid-row( $fluid: true )
	@description :          Define a row to house columned elements
	@param $fluid :         Calculate using percentages vs em / px (default : true)
*/
/*
	---------------------------------
	           FUNCTIONS
	---------------------------------
*/
/*
	@function :         -fn-findGridById( $gridID: mobile )
	@description :      Define active grid by id
	@param $gridId :    Id of grid to activate
*/
/*
	@function :         -fn-setGridProperties($p_grid)
	@description :      Set properties based on active grid
	@param $p_grid :    Grid to use to set properties
*/
/*
	@function :         -fn-getStaticWidth($col: 1)
	@description :      Calculate and return the static width of columns.
	@param $col :       Number of columns to use to calculate static width.
*/
/*
	@function :         -fn-getFluidWidth($col: 1)
	@description :      Calculate and return the fluid width of columns.
	@param $col :       Number of columns to use to calculate fluid width.
*/
/*
	@function :         -fn-getStaticMargin()
	@description :      Calculate and return the static margin
	@param :            null
*/
/*
	@function :         -fn-getFluidMargin()
	@description :      Calculate and return the fluid margin
	@param :            null
*/
.breakout {
  max-width: 320px;
  width: 100%;
  float: none;
  display: block;
  margin: 0 auto 20px;
  background: #FFEBEB;
  padding: 15px; }
  .breakout h3 {
    font-size: 1.5em;
    margin: 0 0 10px 0; }
  .breakout a {
    font-weight: 500; }
  .breakout ol {
    margin-left: 10px; }
    .breakout ol li {
      font-weight: 300;
      margin-bottom: 8px; }
      .breakout ol li a {
        font-weight: 500; }
  .breakout p {
    font-size: 0.85em;
    font-weight: 300;
    line-height: 1.4;
    padding: 0; }
    .breakout p:last-child {
      margin-bottom: 0px;
      padding-bottom: 20px; }

/* lg 12 screen and (min-width: 48em) */
@media screen and (min-width: 48em) {
  .breakout {
    max-width: 300px;
    width: 30%;
    float: right;
    display: block;
    margin: 0 0 20px 20px;
    padding: 20px;
    border-top: none;
    border-bottom: none; }
    .breakout h4 {
      font-size: 1em;
      font-weight: 500;
      padding: 0;
      margin: 0; }
    .breakout ol {
      margin-left: 30px; }
      .breakout ol li {
        font-weight: 300; }
    .breakout p {
      font-size: 0.85em;
      font-weight: 300;
      line-height: 1.5;
      padding: 0 0 10px 0; }
      .breakout p:last-child {
        margin-bottom: 0;
        padding-bottom: 0; } }
a {
  color: #006598;
  text-decoration: none; }

body {
  margin: 0;
  padding: 0; }

.source {
  font-size: .75rem;
  color: #595959;
  text-align: right; }

b {
  font-weight: 500; }

@keyframes bounce {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(6px); }
  100% {
    transform: translateY(0); } }
#analysis-box {
  display: none; }

#analysis-cta {
  color: #006598;
  font-weight: 500;
  cursor: pointer; }

.interactive-header {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 130.24%;
  margin-bottom: 30px; }
  .interactive-header .quote-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    height: 150px; }
  .interactive-header-quote {
    text-align: center;
    font-weight: 300;
    font-size: 1.2em;
    line-height: 1.25;
    padding: 0;
    margin: 0 20px 0;
    color: #dcbec0;
    display: none;
    visibility: hidden; }
  .interactive-header .scroll-cta {
    text-align: center;
    margin-top: 20px;
    color: #dcbec0;
    font-size: 0.8em;
    visibility: hidden; }
    .interactive-header .scroll-cta:after {
      content: "\f101";
      font-family: 'cnn-icons';
      color: #dcbec0;
      display: block;
      margin: 10px auto;
      font-weight: 500;
      animation: bounce 2.5s infinite; }
  .interactive-header img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; }
    .interactive-header img.mobile {
      display: block; }
    .interactive-header img.desktop {
      display: none; }

h1.pg-headline {
  font-family: 'Fjalla One', sans-serif;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  max-width: 300px;
  line-height: 1.05;
  color: #FFEBEB;
  font-size: 2em;
  margin: 0 auto;
  position: absolute;
  bottom: 110%;
  left: 0;
  right: 0; }

p.pg-byline {
  text-align: center;
  font-size: 0.80em;
  padding: 0; }

h3 {
  font-family: 'Fjalla One', sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  position: relative;
  display: inline-block;
  z-index: 2;
  margin: 18px 0 0 2%; }
  h3:after {
    width: 85%;
    height: 16px;
    background-color: #FFEBEB;
    display: block;
    content: " ";
    position: absolute;
    top: -5px;
    left: -10px;
    z-index: -1; }

.pg-article-recirc {
  color: #262626; }
  .pg-article-recirc h3 {
    font-size: 1.4em;
    clear: both;
    margin: 40px 20% 20px 0; }
  .pg-article-recirc__item {
    display: inline-block;
    width: 100%;
    margin-right: 0;
    vertical-align: top;
    margin-bottom: 20px;
    border-bottom: 1px solid #d9d9d9; }
    .pg-article-recirc__item h4 {
      font-size: 1.3em;
      line-height: 1.1;
      font-weight: 300;
      margin: 0;
      padding: 0; }
    .pg-article-recirc__item p {
      font-weight: 400;
      font-size: 0.95em;
      line-height: 1.1;
      color: #262626; }

.paragraph {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5;
  padding-bottom: 0; }

.dropcap {
  font-family: 'Fjalla One', sans-serif;
  text-transform: uppercase;
  font-size: 3.75em;
  line-height: 1.2;
  padding-right: 8px;
  position: relative;
  display: inline-block;
  z-index: 2;
  float: left;
  text-align: center; }

.d-body-contrib {
  font-size: 0.85em;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  padding-bottom: 0; }

.carousel-cell {
  width: 100%;
  /* full width */
  height: 400px;
  /* height of carousel */
  margin-right: 10px; }

.pullquote {
  border-top: 1px solid #262626;
  border-bottom: 1px solid #262626;
  padding: 30px 0 10px;
  margin: 50px 5% 60px 5%;
  position: relative; }
  .pullquote.standard {
    padding: 10px 0 10px;
    margin: 50px auto 60px !important; }
  .pullquote.expandable:before {
    content: " ";
    background-image: url("../media/quote.png");
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 40px 40px;
    position: absolute;
    top: -30px;
    left: 30px;
    width: 60px;
    height: 60px;
    background-color: #FFEBEB;
    text-align: center;
    font-size: 8em;
    line-height: 120px; }
  .pullquote blockquote {
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    position: relative;
    display: inline-block;
    z-index: 2;
    text-align: center;
    letter-spacing: 1.5px; }
  .pullquote cite {
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.25em;
    text-align: right;
    text-transform: uppercase;
    display: block;
    font-style: normal; }
    .pullquote cite:before {
      content: "– "; }
  .pullquote .quote-tweet-btn {
    width: 40px;
    height: 40px;
    position: absolute;
    right: -10px;
    bottom: -50px; }
    .pullquote .quote-tweet-btn:before {
      content: "\f139";
      font-family: 'cnn-icons';
      font-size: 2em;
      cursor: pointer; }

.d-epilogue ol li {
  font-weight: 300;
  margin-left: 20px;
  margin-bottom: 12px; }
  .d-epilogue ol li b {
    font-weight: 500; }

.story-element.full {
  width: 93%;
  height: auto;
  margin: 0 auto; }
  .story-element.full .element-media:before {
    content: " ";
    border: 1px solid #262626;
    width: 18px;
    height: 18px;
    position: absolute;
    top: -9px;
    left: -9px;
    z-index: -1; }
  .story-element.full .element-media:after {
    content: " ";
    border: 1px solid #262626;
    width: 18px;
    height: 18px;
    position: absolute;
    bottom: -9px;
    right: -9px;
    z-index: -1; }
.story-element.standard {
  width: 93%;
  max-width: 780px;
  margin: 0 auto; }
.story-element .element-media {
  position: relative;
  z-index: 2; }
  .story-element .element-media.image img {
    width: 100%;
    height: auto;
    display: block; }
.story-element .element-caption p {
  font-size: 0.875em;
  font-weight: normal;
  padding-top: 0;
  margin: 10px 20px 0 0; }

/*****************
**** DESKTOP******
******************/
/* lg 12 screen and (min-width: 48em) */
@media screen and (min-width: 48em) {
  .interactive-header {
    position: relative;
    width: 100%;
    margin: 0 0 40px;
    padding: 0;
    position: relative;
    height: 0;
    z-index: 25;
    overflow: hidden;
    background-image: url("../media/main-image.jpg");
    background-size: cover;
    background-position: center;
    margin-bottom: 30px;
    min-height: 600px; }
    .interactive-header .hed-container {
      display: block;
      margin: 0 auto;
      position: relative;
      color: #F2F2F2;
      z-index: 25;
      text-align: left;
      max-width: 1100px; }
    .interactive-header .quote-container {
      display: block;
      margin: 0 auto;
      position: relative;
      color: #F2F2F2;
      z-index: 25;
      text-align: left;
      max-width: 1100px;
      height: 400px;
      padding-left: 3%; }
    .interactive-header-quote {
      text-align: left;
      font-weight: 300;
      font-size: 1.5em;
      line-height: 1.5;
      padding: 0;
      margin: 0;
      color: #dcbec0; }
    .interactive-header #quote-01 {
      text-indent: -8px; }
    .interactive-header .scroll-cta {
      text-align: left;
      margin-top: 20px;
      color: #dcbec0;
      font-size: 1em; }
      .interactive-header .scroll-cta:after {
        content: "\f101";
        font-family: 'cnn-icons';
        color: #dcbec0;
        display: block;
        margin: 10px auto;
        font-weight: 500;
        animation: bounce 2.5s infinite; }
    .interactive-header img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; }
      .interactive-header img.mobile {
        display: none; }
      .interactive-header img.desktop {
        display: block; }

  h1.pg-headline {
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 2px;
    max-width: 550px;
    line-height: 1.10;
    font-size: 3.875em;
    margin: 0 auto 0 0;
    color: #FFEBEB;
    position: absolute;
    top: 40%;
    display: none;
    padding-left: 3%; }

  p.pg-byline {
    text-align: center;
    font-size: 1.15em;
    padding: 0; }

  h3 {
    margin: 18px 20% 0px 20%; }

  .pg-article-body {
    display: block;
    clear: both;
    margin-top: 40px; }

  .d-epilogue h3 {
    margin: 0; }
  .d-epilogue .paragraph {
    padding: 0; }
  .d-epilogue ol {
    margin-left: 20px;
    padding: 0 20% 18px 20%; }
    .d-epilogue ol li {
      font-weight: 300;
      margin-bottom: 12px; }
      .d-epilogue ol li b {
        font-weight: 500; }

  .analysis-box h3 {
    margin-left: 25%; }
  .analysis-box .paragraph {
    padding-left: 25%; }

  .pg-article-recirc {
    color: #262626; }
    .pg-article-recirc h3 {
      font-size: 1.4em;
      clear: both;
      margin: 40px 50% 20px 0; }
    .pg-article-recirc__item {
      display: inline-block;
      width: 30%;
      margin-right: 3%;
      margin-bottom: auto;
      border-bottom: none;
      vertical-align: top; }
      .pg-article-recirc__item h4 {
        font-size: 1.3em;
        line-height: 1.3;
        font-weight: 300;
        margin: 0;
        padding: 0; }
      .pg-article-recirc__item p {
        font-weight: 400;
        font-size: 1em;
        line-height: 1.4;
        color: #262626; }

  .paragraph {
    font-size: 1.125em;
    font-weight: 300;
    line-height: 1.5;
    padding: 0 20% 18px 20%; }

  .d-body-contrib {
    font-size: 0.85em;
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    padding: 0 10% 18px 20%; }

  .dropcap {
    font-family: 'Fjalla One', sans-serif;
    text-transform: uppercase;
    font-size: 3.75em;
    line-height: 1.2;
    padding-right: 8px;
    position: relative;
    display: inline-block;
    z-index: 2;
    float: left;
    text-align: center; }

  .pullquote {
    border-top: 1px solid #262626;
    border-bottom: 1px solid #262626;
    padding: 30px 0 20px;
    margin: 40px 20% 60px 20%;
    position: relative; }
    .pullquote.standard {
      width: auto !important;
      margin: 40px 20% 60px 20% !important;
      padding: 20px 0 10px; }
    .pullquote.expandable:before {
      content: " ";
      background-image: url("../media/quote.png");
      background-repeat: no-repeat;
      background-position: 10px 12px;
      background-size: 60px 50px;
      position: absolute;
      top: -40px;
      left: 30px;
      width: 80px;
      height: 80px;
      background-color: #FFEBEB;
      text-align: center;
      font-size: 8em;
      line-height: 120px; }
    .pullquote blockquote {
      font-family: 'Fjalla One', sans-serif;
      text-transform: uppercase;
      font-size: 2em;
      position: relative;
      display: inline-block;
      z-index: 2;
      text-align: center;
      letter-spacing: 1.5px; }
    .pullquote cite {
      font-family: 'Fjalla One', sans-serif;
      font-size: 1.25em;
      text-align: right;
      text-transform: uppercase;
      display: block;
      font-style: normal; }
      .pullquote cite:before {
        content: "– "; }
    .pullquote .quote-tweet-btn {
      width: 40px;
      height: 40px;
      position: absolute;
      right: -10px;
      bottom: -50px; }
      .pullquote .quote-tweet-btn:before {
        content: "\f139";
        font-family: 'cnn-icons';
        font-size: 2em;
        cursor: pointer; }

  .story-element.full {
    width: 100%;
    height: auto; }
    .story-element.full .element-media:before {
      content: " ";
      border: 1px solid #262626;
      width: 30px;
      height: 30px;
      position: absolute;
      top: -15px;
      left: -15px;
      z-index: -1; }
    .story-element.full .element-media:after {
      content: " ";
      border: 1px solid #262626;
      width: 30px;
      height: 30px;
      position: absolute;
      bottom: -15px;
      right: -15px;
      z-index: -1; }
  .story-element.standard {
    width: 100%;
    max-width: 780px;
    margin: 0 auto; }
  .story-element .element-media {
    position: relative;
    z-index: 2; }
    .story-element .element-media.image img {
      width: 100%;
      height: auto; }
  .story-element .element-caption p {
    font-size: 0.875em;
    font-weight: normal;
    padding-top: 0;
    margin: 10px 20px 0 0; } }
.cvp-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0; }
  .cvp-video video, .cvp-video iframe, .cvp-video object {
    position: absolute;
    height: 100% !important;
    width: 100% !important;
    left: 0;
    top: 0; }
  .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("http://i2.cdn.turner.com/cnn/2016/images/11/30/playbutton.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; }

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  .cvp-video .play-button .icon,
  .video .play-button .icon {
    background: url("http://i2.cdn.turner.com/cnn/2016/images/11/30/playbutton.icon@2x.png") no-repeat;
    -webkit-background-size: 67px 134px;
    -moz-background-size: 67px 134px;
    -ie-background-size: 67px 134px;
    -o-background-size: 67px 134px;
    background-size: 67px 134px; } }

/*# sourceMappingURL=nursing-home-assault.css.map */