/* // =============================== // IMPORT CUSTOM LIBS // =============================== */ /* UNCLEAR IF THESE ARE EVEN IN USE */ /* // =============================== // IMPORT BASE TEMPLATE // =============================== */ /* --------- // GLOBAL-FN // --------- // @description: Define functions that aren't tied to any one system. */ /* ----------- // STRIP UNITS // ----------- // @description: Strip a value of its unit. // @param $value: Value that needs to be stripped of its unit. */ /* ----------- // EM // ----------- // @description: Convert unit into em. // @param $value: Value that will be converted into em. */ /* ----------- // REM // ----------- // @description: Convert unit into em. // @param $value: Value that will be converted into em. */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Import type library */ /* // ---------------------- // MIXINS // ---------------------- */ /* // ---------------------- // FUNCTIONS // ---------------------- */ /* Type definitions */ html { font-size: 100%; } body { font-size: 16px; font-size: 1rem; line-height: 1em; } /* // GRID // ---- // @description: Define grid */ /* Import grid engine */ /* // ------------------------------------------------------------------ // // @library : Uzi Grid System - SASS // @version : 0.2.0.1 // @description : System for managing breakpoints and // responsive grid columns. // // @author : Kenneth Uzquiano (kenneth.uzquiano@gmail.com) // // ------------------------------------------------------------------ */ /* Define unit width and grids */ /* // BASE VALUES // ----------- // Define base properties for global use */ /* // UNITS // ----------------- // Units to be used to base grid. Because the grid is based on rems, it is // important to make sure the font-size of the tag is set appropriately. // For the uzi-grid to work properly with the default settings, the base font-size // must be set to 100%. Formerly 62.5%, when trying 10px grid base. I'm not a fan // though. :) */ /* // ------------------------------- // 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) */ /* // @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 : -uzi-fn-findGridById( $gridID: mobile ) // @description : Define active grid by id // @param $gridId : Id of grid to activate */ /* // @function : -uzi-fn-setGridProperties($p_grid) // @description : Set properties based on active grid // @param $p_grid : Grid to use to set properties */ /* // @function : -uzi-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 : -uzi-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 : -uzi-fn-getStaticMargin() // @description : Calculate and return the static margin // @param : null */ /* // @function : -uzi-fn-getFluidMargin() // @description : Calculate and return the fluid margin // @param : null */ /* Common definitions */ .full-width { max-width: none; width: 100%; } .center { margin: 0 auto !important; } /* Scaffolding mixin */ /* Breakpoints */ /* xs 4 "screen and (min-width: 0px)" */ @media screen and (min-width: 0px) { .grid-width { max-width: 20rem; width: 100%; } .col.full { width: 300px; width: 93.75%; max-width: 300px; max-width: 18.75rem; margin: 0 3.125%; } .col.half { width: 140px; width: 43.75%; max-width: 140px; max-width: 8.75rem; } .col-xs-full { width: 100%; } .row { margin-left: -6.25%; } .row.static { width: auto; margin-left: -1.25rem; } .row:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .col-xs-1 { width: 60px; width: 18.75%; max-width: 60px; max-width: 3.75rem; } .col-xs-1.static { width: 60px; width: 3.75rem; } .row .col-xs-1 { margin-left: 6.25%; float: left; } .row.static .col-xs-1 { margin-left: 1.25rem; } .col-xs-2 { width: 140px; width: 43.75%; max-width: 140px; max-width: 8.75rem; } .col-xs-2.static { width: 140px; width: 8.75rem; } .row .col-xs-2 { margin-left: 6.25%; float: left; } .row.static .col-xs-2 { margin-left: 1.25rem; } .col-xs-3 { width: 220px; width: 68.75%; max-width: 220px; max-width: 13.75rem; } .col-xs-3.static { width: 220px; width: 13.75rem; } .row .col-xs-3 { margin-left: 6.25%; float: left; } .row.static .col-xs-3 { margin-left: 1.25rem; } .col-xs-4 { width: 300px; width: 93.75%; max-width: 300px; max-width: 18.75rem; } .col-xs-4.static { width: 300px; width: 18.75rem; } .row .col-xs-4 { margin-left: 6.25%; float: left; } .row.static .col-xs-4 { margin-left: 1.25rem; } .hidden-xs { display: none; } .visible-xs { display: block; } } /* sm 6 "screen and (min-width: 320px) and (orientation: portrait)" */ @media screen and (min-width: 320px) and (orientation: portrait) { .grid-width { max-width: 30rem; width: 100%; } .col.full { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; margin: 0 2.08333%; } .col.half { width: 220px; width: 45.83333%; max-width: 220px; max-width: 13.75rem; } .col-sm-full { width: 100%; } .row { margin-left: -4.16667%; } .row.static { width: auto; margin-left: -1.25rem; } .row:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .col-sm-1 { width: 60px; width: 12.5%; max-width: 60px; max-width: 3.75rem; } .col-sm-1.static { width: 60px; width: 3.75rem; } .row .col-sm-1 { margin-left: 4.16667%; float: left; } .row.static .col-sm-1 { margin-left: 1.25rem; } .col-sm-2 { width: 140px; width: 29.16667%; max-width: 140px; max-width: 8.75rem; } .col-sm-2.static { width: 140px; width: 8.75rem; } .row .col-sm-2 { margin-left: 4.16667%; float: left; } .row.static .col-sm-2 { margin-left: 1.25rem; } .col-sm-3 { width: 220px; width: 45.83333%; max-width: 220px; max-width: 13.75rem; } .col-sm-3.static { width: 220px; width: 13.75rem; } .row .col-sm-3 { margin-left: 4.16667%; float: left; } .row.static .col-sm-3 { margin-left: 1.25rem; } .col-sm-4 { width: 300px; width: 62.5%; max-width: 300px; max-width: 18.75rem; } .col-sm-4.static { width: 300px; width: 18.75rem; } .row .col-sm-4 { margin-left: 4.16667%; float: left; } .row.static .col-sm-4 { margin-left: 1.25rem; } .col-sm-5 { width: 380px; width: 79.16667%; max-width: 380px; max-width: 23.75rem; } .col-sm-5.static { width: 380px; width: 23.75rem; } .row .col-sm-5 { margin-left: 4.16667%; float: left; } .row.static .col-sm-5 { margin-left: 1.25rem; } .col-sm-6 { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; } .col-sm-6.static { width: 460px; width: 28.75rem; } .row .col-sm-6 { margin-left: 4.16667%; float: left; } .row.static .col-sm-6 { margin-left: 1.25rem; } .hidden-sm { display: none; } .visible-sm { display: block; } } /* iph6 6 "screen and (max-device-width: 737px) and (orientation: landscape)" */ @media screen and (max-device-width: 737px) and (orientation: landscape) { .grid-width { max-width: 30rem; width: 100%; } .col.full { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; margin: 0 2.08333%; } .col.half { width: 220px; width: 45.83333%; max-width: 220px; max-width: 13.75rem; } .col-iph6-full { width: 100%; } .row { margin-left: -4.16667%; } .row.static { width: auto; margin-left: -1.25rem; } .row:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .col-iph6-1 { width: 60px; width: 12.5%; max-width: 60px; max-width: 3.75rem; } .col-iph6-1.static { width: 60px; width: 3.75rem; } .row .col-iph6-1 { margin-left: 4.16667%; float: left; } .row.static .col-iph6-1 { margin-left: 1.25rem; } .col-iph6-2 { width: 140px; width: 29.16667%; max-width: 140px; max-width: 8.75rem; } .col-iph6-2.static { width: 140px; width: 8.75rem; } .row .col-iph6-2 { margin-left: 4.16667%; float: left; } .row.static .col-iph6-2 { margin-left: 1.25rem; } .col-iph6-3 { width: 220px; width: 45.83333%; max-width: 220px; max-width: 13.75rem; } .col-iph6-3.static { width: 220px; width: 13.75rem; } .row .col-iph6-3 { margin-left: 4.16667%; float: left; } .row.static .col-iph6-3 { margin-left: 1.25rem; } .col-iph6-4 { width: 300px; width: 62.5%; max-width: 300px; max-width: 18.75rem; } .col-iph6-4.static { width: 300px; width: 18.75rem; } .row .col-iph6-4 { margin-left: 4.16667%; float: left; } .row.static .col-iph6-4 { margin-left: 1.25rem; } .col-iph6-5 { width: 380px; width: 79.16667%; max-width: 380px; max-width: 23.75rem; } .col-iph6-5.static { width: 380px; width: 23.75rem; } .row .col-iph6-5 { margin-left: 4.16667%; float: left; } .row.static .col-iph6-5 { margin-left: 1.25rem; } .col-iph6-6 { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; } .col-iph6-6.static { width: 460px; width: 28.75rem; } .row .col-iph6-6 { margin-left: 4.16667%; float: left; } .row.static .col-iph6-6 { margin-left: 1.25rem; } .hidden-iph6 { display: none; } .visible-iph6 { display: block; } } /* md 8 "screen and (min-width: 570px)" */ @media screen and (min-width: 570px) { .grid-width { max-width: 40rem; width: 100%; } .col.full { width: 620px; width: 96.875%; max-width: 620px; max-width: 38.75rem; margin: 0 1.5625%; } .col.half { width: 300px; width: 46.875%; max-width: 300px; max-width: 18.75rem; } .col-md-full { width: 100%; } .row { margin-left: -3.125%; } .row.static { width: auto; margin-left: -1.25rem; } .row:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .col-md-1 { width: 60px; width: 9.375%; max-width: 60px; max-width: 3.75rem; } .col-md-1.static { width: 60px; width: 3.75rem; } .row .col-md-1 { margin-left: 3.125%; float: left; } .row.static .col-md-1 { margin-left: 1.25rem; } .col-md-2 { width: 140px; width: 21.875%; max-width: 140px; max-width: 8.75rem; } .col-md-2.static { width: 140px; width: 8.75rem; } .row .col-md-2 { margin-left: 3.125%; float: left; } .row.static .col-md-2 { margin-left: 1.25rem; } .col-md-3 { width: 220px; width: 34.375%; max-width: 220px; max-width: 13.75rem; } .col-md-3.static { width: 220px; width: 13.75rem; } .row .col-md-3 { margin-left: 3.125%; float: left; } .row.static .col-md-3 { margin-left: 1.25rem; } .col-md-4 { width: 300px; width: 46.875%; max-width: 300px; max-width: 18.75rem; } .col-md-4.static { width: 300px; width: 18.75rem; } .row .col-md-4 { margin-left: 3.125%; float: left; } .row.static .col-md-4 { margin-left: 1.25rem; } .col-md-5 { width: 380px; width: 59.375%; max-width: 380px; max-width: 23.75rem; } .col-md-5.static { width: 380px; width: 23.75rem; } .row .col-md-5 { margin-left: 3.125%; float: left; } .row.static .col-md-5 { margin-left: 1.25rem; } .col-md-6 { width: 460px; width: 71.875%; max-width: 460px; max-width: 28.75rem; } .col-md-6.static { width: 460px; width: 28.75rem; } .row .col-md-6 { margin-left: 3.125%; float: left; } .row.static .col-md-6 { margin-left: 1.25rem; } .col-md-7 { width: 540px; width: 84.375%; max-width: 540px; max-width: 33.75rem; } .col-md-7.static { width: 540px; width: 33.75rem; } .row .col-md-7 { margin-left: 3.125%; float: left; } .row.static .col-md-7 { margin-left: 1.25rem; } .col-md-8 { width: 620px; width: 96.875%; max-width: 620px; max-width: 38.75rem; } .col-md-8.static { width: 620px; width: 38.75rem; } .row .col-md-8 { margin-left: 3.125%; float: left; } .row.static .col-md-8 { margin-left: 1.25rem; } .hidden-md { display: none; } .visible-md { display: block; } } /* lg 10 "screen and (min-width: 769px)" */ @media screen and (min-width: 769px) { .grid-width { max-width: 50rem; width: 100%; } .col.full { width: 780px; width: 97.5%; max-width: 780px; max-width: 48.75rem; margin: 0 1.25%; } .col.half { width: 380px; width: 47.5%; max-width: 380px; max-width: 23.75rem; } .col-lg-full { width: 100%; } .row { margin-left: -2.5%; } .row.static { width: auto; margin-left: -1.25rem; } .row:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .col-lg-1 { width: 60px; width: 7.5%; max-width: 60px; max-width: 3.75rem; } .col-lg-1.static { width: 60px; width: 3.75rem; } .row .col-lg-1 { margin-left: 2.5%; float: left; } .row.static .col-lg-1 { margin-left: 1.25rem; } .col-lg-2 { width: 140px; width: 17.5%; max-width: 140px; max-width: 8.75rem; } .col-lg-2.static { width: 140px; width: 8.75rem; } .row .col-lg-2 { margin-left: 2.5%; float: left; } .row.static .col-lg-2 { margin-left: 1.25rem; } .col-lg-3 { width: 220px; width: 27.5%; max-width: 220px; max-width: 13.75rem; } .col-lg-3.static { width: 220px; width: 13.75rem; } .row .col-lg-3 { margin-left: 2.5%; float: left; } .row.static .col-lg-3 { margin-left: 1.25rem; } .col-lg-4 { width: 300px; width: 37.5%; max-width: 300px; max-width: 18.75rem; } .col-lg-4.static { width: 300px; width: 18.75rem; } .row .col-lg-4 { margin-left: 2.5%; float: left; } .row.static .col-lg-4 { margin-left: 1.25rem; } .col-lg-5 { width: 380px; width: 47.5%; max-width: 380px; max-width: 23.75rem; } .col-lg-5.static { width: 380px; width: 23.75rem; } .row .col-lg-5 { margin-left: 2.5%; float: left; } .row.static .col-lg-5 { margin-left: 1.25rem; } .col-lg-6 { width: 460px; width: 57.5%; max-width: 460px; max-width: 28.75rem; } .col-lg-6.static { width: 460px; width: 28.75rem; } .row .col-lg-6 { margin-left: 2.5%; float: left; } .row.static .col-lg-6 { margin-left: 1.25rem; } .col-lg-7 { width: 540px; width: 67.5%; max-width: 540px; max-width: 33.75rem; } .col-lg-7.static { width: 540px; width: 33.75rem; } .row .col-lg-7 { margin-left: 2.5%; float: left; } .row.static .col-lg-7 { margin-left: 1.25rem; } .col-lg-8 { width: 620px; width: 77.5%; max-width: 620px; max-width: 38.75rem; } .col-lg-8.static { width: 620px; width: 38.75rem; } .row .col-lg-8 { margin-left: 2.5%; float: left; } .row.static .col-lg-8 { margin-left: 1.25rem; } .col-lg-9 { width: 700px; width: 87.5%; max-width: 700px; max-width: 43.75rem; } .col-lg-9.static { width: 700px; width: 43.75rem; } .row .col-lg-9 { margin-left: 2.5%; float: left; } .row.static .col-lg-9 { margin-left: 1.25rem; } .col-lg-10 { width: 780px; width: 97.5%; max-width: 780px; max-width: 48.75rem; } .col-lg-10.static { width: 780px; width: 48.75rem; } .row .col-lg-10 { margin-left: 2.5%; float: left; } .row.static .col-lg-10 { margin-left: 1.25rem; } .hidden-lg { display: none; } .visible-lg { display: block; } } /* xl 12 "screen and (min-width: 960px)" */ @media screen and (min-width: 960px) { .grid-width { max-width: 60rem; width: 100%; } .col.full { width: 940px; width: 97.91667%; max-width: 940px; max-width: 58.75rem; margin: 0 1.04167%; } .col.half { width: 460px; width: 47.91667%; max-width: 460px; max-width: 28.75rem; } .col-xl-full { width: 100%; } .row { margin-left: -2.08333%; } .row.static { width: auto; margin-left: -1.25rem; } .row:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .col-xl-1 { width: 60px; width: 6.25%; max-width: 60px; max-width: 3.75rem; } .col-xl-1.static { width: 60px; width: 3.75rem; } .row .col-xl-1 { margin-left: 2.08333%; float: left; } .row.static .col-xl-1 { margin-left: 1.25rem; } .col-xl-2 { width: 140px; width: 14.58333%; max-width: 140px; max-width: 8.75rem; } .col-xl-2.static { width: 140px; width: 8.75rem; } .row .col-xl-2 { margin-left: 2.08333%; float: left; } .row.static .col-xl-2 { margin-left: 1.25rem; } .col-xl-3 { width: 220px; width: 22.91667%; max-width: 220px; max-width: 13.75rem; } .col-xl-3.static { width: 220px; width: 13.75rem; } .row .col-xl-3 { margin-left: 2.08333%; float: left; } .row.static .col-xl-3 { margin-left: 1.25rem; } .col-xl-4 { width: 300px; width: 31.25%; max-width: 300px; max-width: 18.75rem; } .col-xl-4.static { width: 300px; width: 18.75rem; } .row .col-xl-4 { margin-left: 2.08333%; float: left; } .row.static .col-xl-4 { margin-left: 1.25rem; } .col-xl-5 { width: 380px; width: 39.58333%; max-width: 380px; max-width: 23.75rem; } .col-xl-5.static { width: 380px; width: 23.75rem; } .row .col-xl-5 { margin-left: 2.08333%; float: left; } .row.static .col-xl-5 { margin-left: 1.25rem; } .col-xl-6 { width: 460px; width: 47.91667%; max-width: 460px; max-width: 28.75rem; } .col-xl-6.static { width: 460px; width: 28.75rem; } .row .col-xl-6 { margin-left: 2.08333%; float: left; } .row.static .col-xl-6 { margin-left: 1.25rem; } .col-xl-7 { width: 540px; width: 56.25%; max-width: 540px; max-width: 33.75rem; } .col-xl-7.static { width: 540px; width: 33.75rem; } .row .col-xl-7 { margin-left: 2.08333%; float: left; } .row.static .col-xl-7 { margin-left: 1.25rem; } .col-xl-8 { width: 620px; width: 64.58333%; max-width: 620px; max-width: 38.75rem; } .col-xl-8.static { width: 620px; width: 38.75rem; } .row .col-xl-8 { margin-left: 2.08333%; float: left; } .row.static .col-xl-8 { margin-left: 1.25rem; } .col-xl-9 { width: 700px; width: 72.91667%; max-width: 700px; max-width: 43.75rem; } .col-xl-9.static { width: 700px; width: 43.75rem; } .row .col-xl-9 { margin-left: 2.08333%; float: left; } .row.static .col-xl-9 { margin-left: 1.25rem; } .col-xl-10 { width: 780px; width: 81.25%; max-width: 780px; max-width: 48.75rem; } .col-xl-10.static { width: 780px; width: 48.75rem; } .row .col-xl-10 { margin-left: 2.08333%; float: left; } .row.static .col-xl-10 { margin-left: 1.25rem; } .col-xl-11 { width: 860px; width: 89.58333%; max-width: 860px; max-width: 53.75rem; } .col-xl-11.static { width: 860px; width: 53.75rem; } .row .col-xl-11 { margin-left: 2.08333%; float: left; } .row.static .col-xl-11 { margin-left: 1.25rem; } .col-xl-12 { width: 940px; width: 97.91667%; max-width: 940px; max-width: 58.75rem; } .col-xl-12.static { width: 940px; width: 58.75rem; } .row .col-xl-12 { margin-left: 2.08333%; float: left; } .row.static .col-xl-12 { margin-left: 1.25rem; } .hidden-xl { display: none; } .visible-xl { display: block; } } .cnn-longform .cnn-longform-header { width: auto; margin-left: -6.25%; margin-bottom: 6.25%; } .cnn-longform .cnn-longform-header .title { position: relative; width: 300px; width: 93.75%; max-width: 300px; max-width: 18.75rem; margin-bottom: 6.25%; } .cnn-longform .cnn-longform-header .title h1 { text-indent: -9999px; display: none; } .cnn-longform .cnn-longform-header .title .src { vertical-align: middle; width: 100%; max-width: 100%; max-height: 100%; height: auto; } .cnn-longform .cnn-longform-header .title.text { margin-bottom: 0 !important; } .cnn-longform .cnn-longform-header .title.text h1 { font-size: 24px; font-size: 1.5rem; line-height: 1.16667em; font-weight: bold; text-indent: 0px; display: block; } .cnn-longform .cnn-longform-header .description { font-family: Arial; width: 300px; width: 93.75%; max-width: 300px; max-width: 18.75rem; font-size: 14px; font-size: 0.875rem; line-height: 1.28571em; vertical-align: top; margin-top: 6.25%; border-bottom: 1px #CCCCCC dotted; padding-bottom: 15px; } .cnn-longform .cnn-longform-header .description .credit { margin-top: 10px; } .cnn-longform .cnn-longform-header .lead-media { width: 300px; width: 93.75%; max-width: 300px; max-width: 18.75rem; border: 1px #CCC solid; background: #FFF; padding: 5px; } .cnn-longform .cnn-longform-header.horizontal .title { margin: 0; width: 300px; width: 93.75%; max-width: 300px; max-width: 18.75rem; } .cnn-longform .cnn-longform-header.horizontal .description { margin-top: 6.25%; } .cnn-longform .cnn-longform-header:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } /* sm 6 "screen and (min-width: 320px) and (orientation: portrait)" */ @media screen and (min-width: 320px) and (orientation: portrait) { .cnn-longform .cnn-longform-header { width: auto; margin-left: -4.16667%; margin-bottom: 4.16667%; } .cnn-longform .cnn-longform-header .title { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; margin-bottom: 4.16667%; } .cnn-longform .cnn-longform-header .title.text h1 { font-size: 26px; font-size: 1.625rem; line-height: 1.11538em; } .cnn-longform .cnn-longform-header .description { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; margin-top: 4.16667%; } .cnn-longform .cnn-longform-header .lead-media { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; } .cnn-longform .cnn-longform-header.horizontal .title { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; } } /* md 8 "screen and (min-width: 570px)" */ @media screen and (min-width: 570px) { .cnn-longform .cnn-longform-header { width: auto; margin-left: -3.125%; } .cnn-longform .cnn-longform-header .title { width: 460px; width: 71.875%; max-width: 460px; max-width: 28.75rem; margin: 0 auto 3.125%; } .cnn-longform .cnn-longform-header .description { width: 540px; width: 84.375%; max-width: 540px; max-width: 33.75rem; margin-top: 3.125%; } .cnn-longform .cnn-longform-header .lead-media { width: 540px; width: 84.375%; max-width: 540px; max-width: 33.75rem; } .cnn-longform .cnn-longform-header.horizontal .title { width: 540px; width: 84.375%; max-width: 540px; max-width: 33.75rem; } } /* lg 10 "screen and (min-width: 769px)" */ @media screen and (min-width: 769px) { .cnn-longform .cnn-longform-header { margin-top: 0; margin-bottom: 2.5%; width: auto; margin-left: -2.5%; } .cnn-longform .cnn-longform-header .title { display: block; width: 540px; width: 67.5%; max-width: 540px; max-width: 33.75rem; margin: 0 auto 2.5% auto; } .cnn-longform .cnn-longform-header .title.text h1 { font-size: 28px; font-size: 1.75rem; line-height: 1.10714em; } .cnn-longform .cnn-longform-header .description { display: block; vertical-align: top; margin-top: 2.5%; width: 700px; width: 87.5%; max-width: 700px; max-width: 43.75rem; } .cnn-longform .cnn-longform-header .lead-media { float: none; width: 700px; width: 87.5%; max-width: 700px; max-width: 43.75rem; } .cnn-longform .cnn-longform-header.horizontal .title { float: none; width: 700px; width: 87.5%; max-width: 700px; max-width: 43.75rem; } .cnn-longform .cnn-longform-header.horizontal .description { width: 700px; width: 87.5%; max-width: 700px; max-width: 43.75rem; margin-top: 2.5%; } } /* xl 12 "screen and (min-width: 960px)" */ @media screen and (min-width: 960px) { .cnn-longform .cnn-longform-header { width: auto; margin-left: -2.08333%; margin-bottom: 2.08333%; padding-top: 0; } .cnn-longform .cnn-longform-header .title { margin: 0; width: 540px; width: 56.25%; max-width: 540px; max-width: 33.75rem; margin-right: 2.08333%; padding-bottom: 5.20833%; float: left; } .cnn-longform .cnn-longform-header .title.text h1 { font-size: 30px; font-size: 1.875rem; line-height: 1.1em; } .cnn-longform .cnn-longform-header .description { width: auto; max-width: initial; margin-top: 0; width: 940px; width: 97.91667%; max-width: 940px; max-width: 58.75rem; font-size: 13px; font-size: 0.8125rem; line-height: 1.23077em; border: none; padding-bottom: 0; } .cnn-longform .cnn-longform-header .description:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .cnn-longform .cnn-longform-header .lead-media { position: relative; width: 940px; width: 97.91667%; max-width: 940px; max-width: 58.75rem; float: right; } .cnn-longform .cnn-longform-header.horizontal .title { width: 940px; width: 97.91667%; max-width: 940px; max-width: 58.75rem; float: none; } .cnn-longform .cnn-longform-header.horizontal .lead-media { float: none; } .cnn-longform .cnn-longform-header.horizontal .description { width: 780px; width: 81.25%; max-width: 780px; max-width: 48.75rem; margin: 2.08333% auto 0 auto; } } /* xs 4 "screen and (min-width: 0px)" */ @media screen and (min-width: 0px) { .cnn-longform .cnn-longform-header .title { width: 540px; width: 168.75%; max-width: 540px; max-width: 33.75rem; padding-bottom: 9.375%; } .cnn-longform .cnn-longform-header .description { font-size: 13px; font-size: 0.8125rem; line-height: 1.53846em; } .cnn-longform .cnn-longform-header .lead-media { width: 940px; width: 293.75%; max-width: 940px; max-width: 58.75rem; } .cnn-longform .cnn-longform-header.horizontal .description { margin-top: 6.25%; } } .cnn-longform { font-size: 16px; } .cnn-longform .bold { font-weight: bold; } .cnn-longform .italic { font-style: italic; } .cnn-longform .dropcap { font-size: 68px; font-size: 4.25rem; line-height: 0.91176em; font-weight: bold; margin-right: 8px; margin-top: -4px; float: left; } .cnn-longform .timestamp { color: #666666; font-size: 11px; font-size: 0.6875rem; line-height: 1.27273em; margin-top: 5px; } .cnn-longform .rule { background: #C4C4C4; } .cnn-longform .rule.horizontal { width: 80%; height: 2px; margin: 50px auto 20px; } .cnn-longform .rule.vertical { width: 2px; height: 80%; margin: auto 20px; } .cnn-longform .title { font-size: 20px; font-size: 1.25rem; line-height: 1.2em; padding-bottom: 10px; padding-top: 10px; font-weight: bold; } .cnn-longform .paragraph { padding-bottom: 12px; font-size: 15px; font-size: 0.9375rem; line-height: 1.6em; } .cnn-longform .paragraph.intro { font-size: 1.57142857142857em; line-height: 1.55454545454545em; font-weight: 100; margin-bottom: 20px; } .cnn-longform .paragraph.break { font-size: 1.3625em; line-height: 1.425em; font-weight: 100; margin-bottom: 20px; } .cnn-longform .paragraph.break .dropcap { font-size: 4.70588235294118em; margin-top: 0px; } .cnn-longform .list { margin-left: 20px; } .cnn-longform .list li { list-style: disc; list-style-position: outside; } .cnn-hdr { font-family: Arial; background: #CA0002; height: 32px; } .cnn-hdr .section { position: absolute; } .cnn-hdr .section .link { display: block; font-size: 13px; font-size: 0.8125rem; line-height: 2.46154em; color: #FFFFFF; } .cnn-hdr .cnn-logo { position: relative; display: block; background: url("../media/assets/cnn-logo.png") 0 0 no-repeat; height: 21px; width: 45px; top: 5px; } .cnn-hdr .cnn-logo .link { display: block; text-indent: -9999px; height: 100%; width: 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .cnn-hdr .cnn-logo { background: url("../media/assets/cnn-logo@2x.png") 0 0px no-repeat; -webkit-background-size: 45px 21px; -moz-background-size: 45px 21px; -ie-background-size: 45px 21px; -o-background-size: 45px 21px; background-size: 45px 21px; } } .cnn-longform .recirc-container { font-family: Georgia, serif; font-weight: bold; width: 100%; margin-top: 30px; margin-bottom: 30px; } .cnn-longform .recirc-container .recirc-header { margin-bottom: 15px; } .cnn-longform .recirc-container .recirc-header .header-row { display: table-row; position: relative; } .cnn-longform .recirc-container .recirc-header .header-row h3 { font-size: 18px; font-size: 1.125rem; line-height: 1.11111em; color: #000; min-width: 150px; margin-right: 10px; white-space: nowrap; } .cnn-longform .recirc-container .recirc-header .header-row .header-bar { display: table-cell; vertical-align: middle; width: 100%; } .cnn-longform .recirc-container .recirc-header .header-row .header-bar .bar { display: block; border-bottom: 1px #CCC solid; height: 17px; width: 100%; float: left; } .cnn-longform .recirc-container .recirc-content .recirc-content-row { display: none; } .cnn-longform .recirc-container .recirc-content .recirc-content-row .recirc-item { padding-top: 15px; border-top: 1px #CCC dotted; } .cnn-longform .recirc-container .recirc-content .recirc-content-row:first-child { display: block; } .cnn-longform .recirc-container .recirc-content .recirc-content-row:first-child .recirc-item { margin-top: 0; border: none; } .cnn-longform .recirc-container .recirc-content .recirc-content-row:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .cnn-longform .recirc-container .recirc-content .recirc-item { display: block; width: 300px; width: 93.75%; max-width: 300px; max-width: 18.75rem; margin-bottom: 15px; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-header { font-size: 18px; font-size: 1.125rem; line-height: 1.22222em; font-weight: bold; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-header a { color: #000; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-header a:hover { color: #f15a2a; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-img { width: 100%; margin-bottom: 10px; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-img img { width: 100%; height: auto; max-width: 100%; vertical-align: middle; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-description { font-weight: normal; } .cnn-longform .recirc-container .recirc-content .recirc-item.sm .recirc-img { width: 100%; max-width: 100%; height: auto; margin: 0; } .cnn-longform .recirc-container .recirc-content .recirc-item.sm .recirc-description { display: none; } .cnn-longform .recirc-container:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } /* sm 6 "screen and (min-width: 320px) and (orientation: portrait)" */ @media screen and (min-width: 320px) and (orientation: portrait) { .cnn-longform .recirc-container .recirc-content { width: 300px; width: 62.5%; max-width: 300px; max-width: 18.75rem; margin: 0 auto; } .cnn-longform .recirc-container .recirc-content .recirc-item { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; float: left; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-img { width: 100%; } .cnn-longform .recirc-container .recirc-content .recirc-item.sm { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; } } /* md 8 "screen and (min-width: 570px)" */ @media screen and (min-width: 570px) { .cnn-longform .recirc-container .recirc-content { width: 460px; width: 71.875%; max-width: 460px; max-width: 28.75rem; margin: 0 auto; } .cnn-longform .recirc-container .recirc-content .recirc-content-row { display: block; } .cnn-longform .recirc-container .recirc-content .recirc-item { width: 252px; width: 39.375%; max-width: 252px; max-width: 15.75rem; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-img { width: 100%; } .cnn-longform .recirc-container .recirc-content .recirc-item.sm { width: 252px; width: 39.375%; max-width: 252px; max-width: 15.75rem; } } /* lg 10 "screen and (min-width: 769px)" */ @media screen and (min-width: 769px) { .cnn-longform .recirc-container .recirc-content { width: auto; max-width: initial; } .cnn-longform .recirc-container .recirc-content .recirc-item { width: 340px; width: 42.5%; max-width: 340px; max-width: 21.25rem; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-img { width: 380px; width: 47.5%; max-width: 380px; max-width: 23.75rem; margin-right: 2.5%; float: left; } .cnn-longform .recirc-container .recirc-content .recirc-item.sm { width: 220px; width: 27.5%; max-width: 220px; max-width: 13.75rem; } } /* xl 12 "screen and (min-width: 960px)" */ @media screen and (min-width: 960px) { .cnn-longform .recirc-container .recirc-content .recirc-item { width: 460px; width: 47.91667%; max-width: 460px; max-width: 28.75rem; } .cnn-longform .recirc-container .recirc-content .recirc-item .recirc-img { width: 460px; width: 47.91667%; max-width: 460px; max-width: 28.75rem; } .cnn-longform .recirc-container .recirc-content .recirc-item.sm { width: 220px; width: 22.91667%; max-width: 220px; max-width: 13.75rem; } } /* xs 4 "screen and (min-width: 0px)" */ @media screen and (min-width: 0px) { .cnn-longform .recirc-container .recirc-content { max-width: none; } .cnn-longform .recirc-container .recirc-content .recirc-item { width: 460px; width: 143.75%; max-width: 460px; max-width: 28.75rem; } } .story-element { position: relative; margin-bottom: 24px; width: 100%; } .story-element.container { width: 100%; margin: 15px 0 20px 0; } .story-element .element-media { position: relative; } .story-element .element-media .overlay { display: none; position: absolute; font-size: 12px; font-size: 0.75rem; line-height: 2.08333em; padding: 0 5px 0 25px; color: transparent; height: 25px; right: 0px; top: -25px; } .story-element .element-media .overlay .plus { position: absolute; font-size: 11px; font-size: 0.6875rem; line-height: 2.27273em; margin-left: -16px; } .story-element .element-text { font-family: Arial; font-size: 12px; font-size: 0.75rem; line-height: 1.16667em; width: 100%; border-left: 1px #CCC solid; padding-left: 10px; margin-top: 15px; } .story-element .element-text .credit { color: #777777; font-style: italic; margin-top: 5px; } /* sm 6 "screen and (min-width: 320px) and (orientation: portrait)" */ @media screen and (min-width: 320px) and (orientation: portrait) { .story-element.container { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; margin: 10px auto 30px auto; } .story-element.container.static { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; } } /* md 8 "screen and (min-width: 570px)" */ @media screen and (min-width: 570px) { .story-element { float: none; } .story-element.container { width: 540px; width: 84.375%; max-width: 540px; max-width: 33.75rem; } .story-element.container.static { width: 540px; width: 84.375%; max-width: 540px; max-width: 33.75rem; } } /* lg 10 "screen and (min-width: 769px)" */ @media screen and (min-width: 769px) { .story-element { float: right; } .story-element.container { width: 380px; width: 47.5%; max-width: 380px; max-width: 23.75rem; margin: 10px 10px 10px 35px; } .story-element.container.sm { width: 300px; width: 37.5%; max-width: 300px; max-width: 18.75rem; } .story-element.container.static { width: 380px; width: 23.75rem; } .story-element.container .element-media .overlay { color: #000; display: block; } .story-element.container .element-media .overlay.click-enabled { cursor: pointer; } .story-element.container .element-text { width: 460px; width: 57.5%; max-width: 460px; max-width: 28.75rem; float: right; } } /* xl 12 "screen and (min-width: 960px)" */ @media screen and (min-width: 960px) { .story-element.container { width: 460px; width: 47.91667%; max-width: 460px; max-width: 28.75rem; margin: 15px 10px 15px 50px; } .story-element.container.sm { width: 380px; width: 39.58333%; max-width: 380px; max-width: 23.75rem; } .story-element.container.static { width: 460px; width: 28.75rem; } .story-element.container .element-text { width: 620px; width: 64.58333%; max-width: 620px; max-width: 38.75rem; } } /* xs 4 "screen and (min-width: 0px)" */ .cnn-longform .element-media.text { padding: 6.25%; border-left: 1px #EAEAEA solid; } .cnn-longform .element-media.text .title, .cnn-longform .element-media.text .paragraph { font-size: 14px; font-size: 0.875rem; line-height: 1.71429em; padding-left: 0; width: auto; max-width: initial; } .cnn-longform .element-media.text .title { font-size: 18px; font-size: 1.125rem; line-height: 1.44444em; margin-bottom: 3.125%; } /* sm 6 "screen and (min-width: 320px) and (orientation: portrait)" */ @media screen and (min-width: 320px) and (orientation: portrait) { .cnn-longform .element-media.text { padding: 4.16667%; } .cnn-longform .element-media.text .title { margin-bottom: 2.08333%; } } /* md 8 "screen and (min-width: 570px)" */ @media screen and (min-width: 570px) { .cnn-longform .element-media.text .title { margin-bottom: 1.5625%; } } /* lg 10 "screen and (min-width: 769px)" */ @media screen and (min-width: 769px) { .cnn-longform .element-media.text .title { margin-bottom: 1.25%; } } /* xl 12 "screen and (min-width: 960px)" */ @media screen and (min-width: 960px) { .cnn-longform .element-media.text .title { margin-bottom: 1.04167%; } } /* xs 4 "screen and (min-width: 0px)" */ .cnn-longform img { display: block; vertical-align: middle; max-height: 100%; max-width: 100%; height: auto; } .cnn-longform img.full-page { max-width: initial; max-height: 100%; height: 100%; width: auto; } .cnn-longform .element-media.image { padding: 5px; border: 1px #EAEAEA solid; background: #FFF; } /* lg 10 "screen and (min-width: 769px)" */ @media screen and (min-width: 769px) { .element-media.image img.click-enabled { cursor: pointer; } } @media screen and (min-aspect-ratio: 3 / 2) { .cnn-longform img.full-page { max-width: 100%; max-height: initial; height: auto; width: 100%; } } .cnn-longform .video, .cnn-longform .cvp-video { position: relative; padding-bottom: 56.25%; height: 0; } .cnn-longform .video div, .cnn-longform .cvp-video div { max-width: 100%; height: auto; width: 100%; } .cnn-longform .video video, .cnn-longform .video iframe, .cnn-longform .video object, .cnn-longform .cvp-video video, .cnn-longform .cvp-video iframe, .cnn-longform .cvp-video object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cnn-longform .video.app, .cnn-longform .cvp-video.app { padding-bottom: 0; } .cnn-longform .video .poster, .cnn-longform .cvp-video .poster { display: block; cursor: pointer; } .cnn-longform .video .poster .poster-img, .cnn-longform .cvp-video .poster .poster-img { vertical-align: middle; max-width: 100%; height: auto; width: 100%; } .cnn-longform .video .poster.hide, .cnn-longform .cvp-video .poster.hide { visibility: hidden; cursor: default; } .cnn-longform .video .play-button, .cnn-longform .cvp-video .play-button { position: absolute; height: 100%; width: 100%; left: 0; top: 0; } .cnn-longform .video .play-button .icon, .cnn-longform .cvp-video .play-button .icon { position: absolute; background: url("../media/assets/playbutton_icon.png") no-repeat; height: 67px; width: 67px; margin-left: -33px; margin-top: -33px; left: 50%; top: 50%; } .cnn-longform .video .play-button:hover .icon, .cnn-longform .cvp-video .play-button:hover .icon { background-position: 0 -67px; } .cnn-longform .element-media.video { padding: 5px; border: 1px #EAEAEA solid; background: #FFF; vertical-align: middle; max-height: 100%; max-width: 100%; height: auto; width: 100%; } .cnn-longform .element-media.quote { border: none; background-color: transparent; background-image: url("${url_css_assets}quote.png"), url("${url_css_assets}quote-end.png"); background-repeat: no-repeat, no-repeat; background-position: 0 0, right bottom; font-family: Georgia, serif; font-size: 22px; font-size: 1.375rem; line-height: 1.27273em; padding: 20px 0 0 20px; } .cnn-longform .element-media.quote .author { float: right; color: #666666; font-size: 9px; font-size: 0.5625rem; line-height: 1.22222em; padding-top: 15px; margin-bottom: 30px; } .cnn-longform .gallery { position: relative; } .cnn-longform .gallery .media img, .cnn-longform .gallery .media div { display: none; } .cnn-longform .gallery .media img.active, .cnn-longform .gallery .media div.active { display: block; } .cnn-longform .gallery .nav { position: relative; background: #1a1b1d; background: -webkit-linear-gradient(180deg, #313131 10%, #1a1b1d); background: -o-linear-gradient(180deg, #313131 10%, #1a1b1d); background: -moz-linear-gradient(180deg, #313131 10%, #1a1b1d); background: linear-gradient(180deg, #313131 10%, #1a1b1d); border: 1px #313131 solid; } .cnn-longform .gallery .nav .btn { cursor: pointer; display: inline-block; *display: inline; border-left: 1px #313131 solid; background: #000; text-align: center; line-height: 30px; width: 30px; zoom: 1; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .cnn-longform .gallery .nav .btn:first-child { border-left: none; } .cnn-longform .gallery .nav .btn.arrow.right { position: absolute; right: 0; } .cnn-longform .gallery .nav .btn:hover { background: #f96237; color: #FFF; } .cnn-longform .gallery .nav .btn.active { color: #FFF; background: #f96237; font-weight: bold; cursor: default; } .cnn-longform .gallery .nav .btn.active:hover { color: #FFF; background: #f96237; } .cnn-longform .gallery .nav .btn.disabled { color: #AAA; background: #000; cursor: default; } .cnn-longform .gallery .nav .btn.disabled:hover { color: #AAA; background: #000; } .cnn-longform .element-media.gallery { padding: 0px; border: none; background: #000; vertical-align: middle; max-height: 100%; max-width: 100%; height: auto; width: 100%; } .cnn-longform .element-media.gallery img { width: 100%; height: auto; } .cnn-longform .element-text { position: absolute; width: 25%; height: auto; display: block; background: url("${url_css_assets}bg-75.png"); background: rgba(0, 0, 0, 0.8); bottom: 40px; left: 20px; padding: 15px; } .cnn-lightbox { cursor: pointer; position: fixed; background: url("${url_css_assets}bg-75.png"); background: rgba(0, 0, 0, 0.75); width: 100%; height: 0px; top: 0; opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } .cnn-lightbox.open { height: 100%; opacity: 1; } .cnn-lightbox .content { display: block; position: relative; margin: 0 auto !important; } .cnn-lightbox .content .image-gallery { display: block; position: relative; } .cnn-lightbox .content .image-gallery .image-container { cursor: default; display: block; position: relative; border: 1px #E7E5D7 solid; background: #fefcf1; margin: 0 auto; -webkit-box-shadow: 0 0 20px #000; -moz-box-shadow: 0 0 20px #000; -o-box-shadow: 0 0 20px #000; box-shadow: 0 0 20px #000; } .cnn-lightbox .content .image-gallery .image-container img { max-width: 100%; height: auto; width: 100%; vertical-align: middle; } .cnn-lightbox .content .close-button { text-indent: -999999px; display: block; position: absolute; text-align: center; line-height: 23px; background: url("${url_css_assets}close-button.png") no-repeat; right: -5px; top: -5px; height: 28px; width: 28px; } .cnn-longform .about { position: relative; font-family: Georgia; margin-top: 6.25%; background: #F1EFEB; border: 2px #D1CDC4 solid; padding: 20px 20px; } .cnn-longform .about .title { font-size: 18px; font-size: 1.125rem; line-height: 1.38889em; font-weight: normal; font-style: italic; text-align: center; color: #858075; padding: 0 0 20px 0; } .cnn-longform .about .paragraph { color: #666259; padding: 0 0 12px 0; max-width: 100%; width: 100%; } .cnn-longform .indent .about .title { padding: 0 0 20px 0; width: 100%; } .cnn-longform .indent .about .paragraph { padding: 0 0 12px 0; width: 100%; } body { font-family: Georgia, serif; } .chrome.app { display: none !important; } .c_share_container { float: right; } .c_share_container.overlay { position: absolute; right: 0; } .c_share_container.block { width: 100%; } .c_share_container.block .c_sharebtns { float: right; } .cnn-longform .longform-ad { margin-top: 10px; } .cnn-longform .content { position: relative; } .cnn-longform .content .body-copy { width: auto; margin-left: -6.25%; } .cnn-longform .content .body-copy .block { width: 100%; width: 300px; width: 93.75%; max-width: 300px; max-width: 18.75rem; } /* sm 6 "screen and (min-width: 320px) and (orientation: portrait)" */ @media screen and (min-width: 320px) and (orientation: portrait) { .cnn-longform .content .body-copy { width: auto; margin-left: -4.16667%; } .cnn-longform .content .body-copy .block { width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; } .cnn-longform .indent .title { padding: 0 10px 12px 10px; } .cnn-longform .indent .description, .cnn-longform .indent .paragraph { padding: 0 10px 12px 10px; width: 460px; width: 95.83333%; max-width: 460px; max-width: 28.75rem; } } /* md 8 "screen and (min-width: 570px)" */ @media screen and (min-width: 570px) { .cnn-longform .content .body-copy { width: auto; margin-left: -3.125%; } .cnn-longform .content .body-copy .block { width: 540px; width: 84.375%; max-width: 540px; max-width: 33.75rem; } .cnn-longform .indent .description, .cnn-longform .indent .paragraph { width: 540px; width: 84.375%; max-width: 540px; max-width: 33.75rem; } } /* lg 10 "screen and (min-width: 769px)" */ @media screen and (min-width: 769px) { .longform-ad { margin-top: 0; } .c_share_container { float: right; } .cnn-longform .content .body-copy { width: auto; margin-left: -2.5%; } .cnn-longform .content .body-copy .block { width: 700px; width: 87.5%; max-width: 700px; max-width: 43.75rem; } .cnn-longform .indent .title { padding-left: 50px; padding-right: 20px; } .cnn-longform .indent .description, .cnn-longform .indent .paragraph { width: 620px; width: 77.5%; max-width: 620px; max-width: 38.75rem; padding-right: 20px; padding-left: 50px; } } /* xl 12 "screen and (min-width: 960px)" */ @media screen and (min-width: 960px) { .cnn-longform .content .body-copy { width: auto; margin-left: -2.08333%; } .cnn-longform .content .body-copy .block { width: 940px; width: 97.91667%; max-width: 940px; max-width: 58.75rem; } .cnn-longform .indent .title { padding-left: 100px; } .cnn-longform .indent .paragraph { padding-left: 100px; width: 700px; width: 72.91667%; max-width: 700px; max-width: 43.75rem; } .cnn-longform .indent .description { padding-left: 100px; width: 700px; width: 72.91667%; max-width: 700px; max-width: 43.75rem; margin: 0 2.08333% !important; } .cnn-longform .indent .story-element.container { margin-right: 50px !important; } } /* xs 4 "screen and (min-width: 0px)" */ @media screen and (min-width: 0px) { .cnn-longform .content .body-copy { width: auto; margin-left: -6.25%; } .cnn-longform .content .body-copy .block { width: 940px; width: 293.75%; max-width: 940px; max-width: 58.75rem; } } /* // =============================== // SCSS DEFINITIONS // =============================== */ body { font-family: 'CNN', Helvetica Neue, Arial, sans-serif; background: url("../media/assets/bkgd-street-food-roy-choi.jpg") top center no-repeat black; background-size: 150%; color: #FFF; } .cnn-longform .gallery .nav .btn { width: 29px; } .ds-video-carousel .dsvc-mode:before { content: "stack"; display: block; position: absolute; visibility: hidden; height: 0; width: 0; } .ds-video-carousel .ds-video-carousel-header { position: relative; height: auto; padding-bottom: 0px; /* ------ SOCIAL TOOLS ------ */ /* SHARE BAR, based on Expansion styles / behaviors */ /*--------------- TABLET ---------------*/ /* md 8 "screen and (min-width: 570px)" */ /*--------------- DESKTOP ---------------*/ /* lg 10 "screen and (min-width: 769px)" */ /*--------------- IPHONE 6 / 6+ ---------------*/ /* iph6 6 "screen and (max-device-width: 737px) and (orientation: landscape)" */ } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title { padding: 0; float: none; height: 100%; margin-top: 20px; max-width: 85%; font-family: 'CNN', Helvetica Neue, Arial, sans-serif; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title h1.title { font-size: 48px; font-size: 3rem; line-height: 1.125em; font-weight: 300; display: none; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title p { display: none; font-size: 14px; font-size: 0.875rem; line-height: 1.28571em; color: #fff; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title .src { width: 280px; max-width: 280px; margin-bottom: 5px; display: block; vertical-align: bottom; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title .secondary-title { display: block; vertical-align: bottom; margin-bottom: 20px; } .ds-video-carousel .ds-video-carousel-header .share-container { width: 300px; position: relative; margin-top: 0px; margin-left: -15px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar { width: auto; display: inline-block; float: none; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button { width: 35px; height: 35px; float: right; margin-left: 15px; cursor: pointer; -webkit-transition: transform 0.5s ease 0s; transition: transform 0.5s ease 0s; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.email { background: url("../media/assets/social/email.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.facebook { background: url("../media/assets/social/facebook.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.twitter { background: url("../media/assets/social/twitter.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button:hover { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); } @media screen and (min-width: 570px) { .ds-video-carousel .ds-video-carousel-header .share-container { width: 300px; position: relative; margin-left: -15px; clear: both; margin-top: 15px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar { width: auto; display: inline-block; float: left; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button { width: 35px; height: 35px; float: right; margin-left: 15px; cursor: pointer; -webkit-transition: transform 0.5s ease 0s; transition: transform 0.5s ease 0s; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.email { background: url("../media/assets/social/email.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.facebook { background: url("../media/assets/social/facebook.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.twitter { background: url("../media/assets/social/twitter.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button:hover { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); } } @media screen and (min-width: 769px) { .ds-video-carousel .ds-video-carousel-header .share-container { width: 300px; position: absolute; right: 0; bottom: 40px; margin-left: 0; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar { width: auto; display: inline-block; float: right; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button { width: 35px; height: 35px; float: right; margin-left: 15px; cursor: pointer; -webkit-transition: transform 0.5s ease 0s; transition: transform 0.5s ease 0s; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.email { background: url("../media/assets/social/email.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.facebook { background: url("../media/assets/social/facebook.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.twitter { background: url("../media/assets/social/twitter.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button:hover { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); } } @media screen and (max-device-width: 737px) and (orientation: landscape) { .ds-video-carousel .ds-video-carousel-header .share-container { width: 300px; position: relative; margin-left: -15px; clear: both; margin-top: 5px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar { width: auto; display: inline-block; float: left; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button { width: 35px; height: 35px; float: right; margin-left: 15px; cursor: pointer; -webkit-transition: transform 0.5s ease 0s; transition: transform 0.5s ease 0s; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.email { background: url("../media/assets/social/email.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.facebook { background: url("../media/assets/social/facebook.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button.twitter { background: url("../media/assets/social/twitter.png"); background-size: 35px 35px; } .ds-video-carousel .ds-video-carousel-header .share-container .share-bar li.share-button:hover { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); } } .ds-video-carousel .ds-video-carousel-header .co-brand { position: relative; right: 0; top: 55px; width: auto; height: 100%; } .ds-video-carousel .ds-video-carousel-header .co-brand .co-brand-src { display: inline-block; width: 300px; } .ds-video-carousel .ds-video-carousel-header .co-brand:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-header:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-content { overflow-x: hidden; margin: 20px 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu { position: relative; display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .title { display: none; position: relative; font-size: 18px; font-size: 1.125rem; line-height: 1.33333em; padding: 10px; font-weight: 500; text-align: left; float: left; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-icon { cursor: pointer; display: block; float: right; width: 25px; margin: 12px 10px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list { display: block; position: absolute; background: #000; background: rgba(30, 30, 30, 0.8); z-index: 100; width: 100%; top: 41px; visibility: hidden; opacity: 0; webkit-transition: visibility 0s 0.25s, opacity 0.25s linear; moz-transition: visibility 0s 0.25s, opacity 0.25s linear; o-transition: visibility 0s 0.25s, opacity 0.25s linear; transition: visibility 0s 0.25s, opacity 0.25s linear; border-bottom: 1px #363533 solid; border-bottom: 1px rgba(255, 255, 255, 0.13) solid; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item { display: block; position: relative; cursor: pointer; font-size: 14px; font-size: 0.875rem; line-height: 2.14286em; padding-left: 22px; color: #C0BEBF; border-top: 1px #363533 solid; border-top: 1px rgba(255, 255, 255, 0.13) solid; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor { background: #2ea8e6; background: rgba(46, 168, 230, 0.5); color: #FFF; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor .sponsor-logo { display: block; float: right; height: 31px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor .sponsor-logo img { display: inline-block; height: 25px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor .sponsor-logo:before { content: "Sponsor content"; font-size: 10px; font-size: 0.625rem; line-height: 3em; text-transform: uppercase; margin-right: 10px; color: #FFF; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor:hover { background: #24518A; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item:hover { color: #FFF; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list.open { visibility: visible; opacity: 1; webkit-transition: opacity 0.25s linear; moz-transition: opacity 0.25s linear; o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container { margin-bottom: 20px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-mobile-ad { width: 300px; display: block; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media { max-width: 1028px; margin: 0 auto 30px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .cvp-video.hide { visibility: hidden; height: 0; width: 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-item-media, .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-gallery-container { position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-item-media .element-text, .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-gallery-container .element-text { font-size: 14px; font-size: 0.875rem; line-height: 1.35em; position: relative; width: auto; bottom: 0; left: 0; margin: 0 10px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel { display: block; position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-tray { position: relative; left: 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item { position: relative; display: block; vertical-align: top; white-space: normal; z-index: 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .title { display: block; position: relative; font-size: 18px; font-size: 1.125rem; line-height: 1.33333em; padding: 10px; font-weight: 500; text-align: left; color: #fff; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .paragraph { font-size: 14px; font-size: 0.875rem; line-height: 1.42857em; position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-image { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-fade { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-media { display: block; position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-media .element-text { font-size: 14px; font-size: 0.875rem; line-height: 1.35em; position: relative; width: auto; bottom: 0; left: 0; margin: 0 10px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-info { padding: 10px; color: #fff; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo { display: inline-block; position: absolute; margin-left: 0px; padding: 3px; right: 5px; top: 10px; height: 35px; max-height: 35px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo img { display: inline-block; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo:before { display: inline-block; font-size: 9px; font-size: 0.5625rem; line-height: 3.88889em; text-transform: uppercase; text-align: center; color: #FFF; margin-right: 10px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.dummies { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.sponsor { background: #2ea8e6; background: #2ea8e6; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.sponsor .title { background: #2ea8e6; background: rgba(46, 168, 230, 0.5); } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active { cursor: default; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active.sponsor .title { background: #24518A; background: #0c2340; } .ds-video-carousel .ds-video-carousel-content .dsvc-card { color: #FFF; padding: 0 10px; border-top: 4px double #333; padding-top: 10px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .paragraph { font-size: 14px; font-size: 0.875rem; line-height: 1.42857em; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .paragraph.credits { font-size: 13px; font-size: 0.8125rem; line-height: 1.38462em; color: #bfbfbf; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .title { font-size: 18px; font-size: 1.125rem; line-height: 1.33333em; font-weight: 200; margin-bottom: 15px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .title.credits { color: #bfbfbf; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .feature-image { position: relative; margin-bottom: 20px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .feature-image.ireport:after { content: " "; position: absolute; background-image: url("../media/assets/ireport.bug.small.gif"); height: 14px; width: 14px; bottom: 0; right: 0; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.cot-share { text-align: left; padding: 10px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.cot-share .title { display: inline-block; vertical-align: middle; margin: 0; padding-right: 20px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.cot-share .c_share_container { display: inline-block; vertical-align: middle; width: auto; float: none; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item { display: block; margin-bottom: 10px; color: #FFF; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item .item-title { font-size: 18px; font-size: 1.125rem; line-height: 1em; margin-bottom: 10px; font-weight: 800; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item .paragraph { font-size: 13px; font-size: 0.8125rem; line-height: 1.23077em; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item .tease-image { float: left; margin-right: 10px; width: 60px; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } /* ------------------------------------ ------------- TABLET -------------- ------------------------------------ */ /* md 8 "screen and (min-width: 570px)" */ @media screen and (min-width: 570px) { body { background-size: 200%; } .ds-video-carousel .dsvc-mode:before { content: "carousel"; } .ds-video-carousel .ds-video-carousel-header { padding-bottom: 40px; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title { margin: 40px 0 0; max-width: 100%; float: none; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title p { display: block; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title .src { margin-bottom: 15px; max-width: 300px; width: 300px; display: inline-block; vertical-align: bottom; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title .secondary-title { vertical-align: bottom; display: inline-block; margin-bottom: 17px; } .ds-video-carousel .ds-video-carousel-header .co-brand { position: relative; right: auto; float: right; width: 300px; height: 100%; padding: 0; margin-top: -50px; margin-left: 0; } .ds-video-carousel .ds-video-carousel-header .co-brand .co-brand-src { display: inline-block; width: 300px; margin: 0; } .ds-video-carousel .ds-video-carousel-header .co-brand:before { display: inline-block; padding-left: 20px; text-align: left; max-width: none; } .ds-video-carousel .ds-video-carousel-content { margin: 0 0 60px 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container { margin: 0; margin-bottom: 40px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-mobile-ad { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-gallery-container { position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-gallery-container .element-text { position: absolute; bottom: 40px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel { display: block; position: relative; height: 115px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-tray { position: absolute; white-space: nowrap; left: 50%; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-tray:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; position: relative; display: inline-block; vertical-align: top; white-space: normal; width: 180px; height: 135px; z-index: 0; transition: all 0.5s; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .title { display: block; position: relative; background: #262626; background: rgba(38, 38, 38, 0.5); font-size: 16px; font-size: 1rem; line-height: 0.375em; text-transform: none; font-weight: 200; text-align: center; z-index: 100; transition: background 0.5s; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .title:before { content: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .paragraph { font-size: 14px; font-size: 0.875rem; line-height: 1.3em; position: relative; z-index: 100; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-image { display: block; position: absolute; left: 0; top: 0; max-width: initial; max-height: 100%; height: 100%; width: auto; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-fade { display: block; position: absolute; background: url("../media/assets/bg_25.png"); background: rgba(0, 0, 0, 0.25); height: 120%; width: 120%; left: -10px; top: -10px; transition: background 0.5s; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-media { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-info { padding: 10px; visibility: hidden; opacity: 0; webkit-transition: visibility 0s 0.5s, opacity 0.5s linear; moz-transition: visibility 0s 0.5s, opacity 0.5s linear; o-transition: visibility 0s 0.5s, opacity 0.5s linear; transition: visibility 0s 0.5s, opacity 0.5s linear; width: 250px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo { display: block; position: absolute; padding: 7px 15px; max-width: 150px; left: 50%; bottom: 0; top: auto; right: auto; margin-left: -75px; max-height: none; height: auto; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo img { display: block; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo:before { display: block; content: "Sponsor Content"; font-size: 8px; font-size: 0.5rem; line-height: 1em; text-transform: uppercase; text-align: center; color: #FFF; margin-bottom: 5px; margin-right: 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.dummies { display: inline-block; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.sponsor .title { background: #2ea8e6; background: rgba(46, 168, 230, 0.5); } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active { cursor: default; width: 250px; min-height: 160px; margin-top: -20px; -webkit-box-shadow: 0 0 25px black; -moz-box-shadow: 0 0 25px black; -o-box-shadow: 0 0 25px black; box-shadow: 0 0 25px black; z-index: 50; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active .title { background: #262626; background: #262626; font-size: 20px; font-size: 1.25rem; line-height: 1.1em; height: 45px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active .dsvc-item-fade { background: url("../media/assets/bg_75.png"); background: rgba(0, 0, 0, 0.75); } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active .dsvc-item-info { visibility: visible; opacity: 1; webkit-transition: opacity 0.5s linear; moz-transition: opacity 0.5s linear; o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; width: 250px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active.sponsor .title { background: #2ea8e6; background: #2ea8e6; } .ds-video-carousel .ds-video-carousel-content .dsvc-card { border-top: none; padding-top: 0; margin-top: 10px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .paragraph { font-size: 16px; font-size: 1rem; line-height: 1.375em; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .title { font-size: 20px; font-size: 1.25rem; line-height: 1.3em; } .ds-video-carousel .ds-video-carousel-content .dsvc-card:first-child { border: none; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.dsvc-share { margin-top: 0; border-bottom: 1px #333 solid; text-align: right; } .ds-video-carousel .ds-video-carousel-content .dsvc-bordered-row { position: relative; } .ds-video-carousel .ds-video-carousel-content .dsvc-borders { overflow: hidden; position: absolute; height: 100%; width: 100%; z-index: -100; } .ds-video-carousel .ds-video-carousel-content .dsvc-borders .border-elem { position: absolute; margin-top: 15px; } .ds-video-carousel .ds-video-carousel-content .dsvc-borders .border-elem.left { border-right: 1px #333 solid; height: 100%; left: 10px; } .ds-video-carousel .ds-video-carousel-content .dsvc-borders .border-elem.right { border-left: 1px #333 solid; height: 100%; right: 10px; } } /* ------------------------------------ ------------- DESKTOP -------------- ------------------------------------ */ /* lg 10 "screen and (min-width: 769px)" */ @media screen and (min-width: 769px) { body { background-size: 100%; } .ds-video-carousel .dsvc-mode:before { content: "carousel"; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title { margin: 40px 0 0; max-width: 60%; float: left; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title .src { margin-bottom: 15px; max-width: 360px; width: 360px; } .ds-video-carousel .ds-video-carousel-header .co-brand { position: relative; right: -7px; float: right; top: 40px; width: 300px; height: 100%; padding: 0; margin-top: 0; } .ds-video-carousel .ds-video-carousel-header .co-brand .co-brand-src { display: inline-block; width: 300px; margin: 0; } .ds-video-carousel .ds-video-carousel-header .co-brand:before { display: inline-block; padding-left: 20px; text-align: left; max-width: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container { margin: 0; margin-bottom: 40px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-gallery-container { position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-gallery-container .element-text { position: absolute; bottom: 40px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel { display: block; position: relative; height: 115px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-tray { position: absolute; white-space: nowrap; left: 50%; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-tray:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; position: relative; display: inline-block; vertical-align: top; white-space: normal; width: 180px; height: 135px; z-index: 0; transition: all 0.5s; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .title { display: block; position: relative; background: #262626; background: rgba(38, 38, 38, 0.5); font-size: 16px; font-size: 1rem; line-height: 0.375em; text-transform: none; font-weight: 200; text-align: center; z-index: 100; transition: background 0.5s; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .title:before { content: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .paragraph { font-size: 14px; font-size: 0.875rem; line-height: 1.3em; position: relative; z-index: 100; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-image { display: block; position: absolute; left: 0; top: 0; max-width: initial; max-height: 100%; height: 100%; width: auto; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-fade { display: block; position: absolute; background: url("../media/assets/bg_25.png"); background: rgba(0, 0, 0, 0.25); height: 120%; width: 120%; left: -10px; top: -10px; transition: background 0.5s; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-media { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-info { padding: 10px; visibility: hidden; opacity: 0; webkit-transition: visibility 0s 0.5s, opacity 0.5s linear; moz-transition: visibility 0s 0.5s, opacity 0.5s linear; o-transition: visibility 0s 0.5s, opacity 0.5s linear; transition: visibility 0s 0.5s, opacity 0.5s linear; width: 250px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo { display: block; position: absolute; padding: 7px 15px; max-width: 150px; left: 50%; bottom: 0; top: auto; right: auto; margin-left: -75px; max-height: none; height: auto; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo img { display: block; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo:before { display: block; content: "Sponsor Content"; font-size: 8px; font-size: 0.5rem; line-height: 1em; text-transform: uppercase; text-align: center; color: #FFF; margin-bottom: 5px; margin-right: 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.dummies { display: inline-block; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.sponsor .title { background: #2ea8e6; background: rgba(46, 168, 230, 0.5); } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active { cursor: default; width: 250px; min-height: 160px; margin-top: -20px; -webkit-box-shadow: 0 0 25px black; -moz-box-shadow: 0 0 25px black; -o-box-shadow: 0 0 25px black; box-shadow: 0 0 25px black; z-index: 50; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active .title { background: #262626; background: #262626; font-size: 20px; font-size: 1.25rem; line-height: 1.1em; height: 45px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active .dsvc-item-fade { background: url("../media/assets/bg_75.png"); background: rgba(0, 0, 0, 0.75); } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active .dsvc-item-info { visibility: visible; opacity: 1; webkit-transition: opacity 0.5s linear; moz-transition: opacity 0.5s linear; o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; width: 250px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active.sponsor .title { background: #2ea8e6; background: #2ea8e6; } .ds-video-carousel .ds-video-carousel-content .dsvc-card { border-top: none; padding-top: 0; margin-top: 10px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .paragraph { font-size: 18px; font-size: 1.125rem; line-height: 1.33333em; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .title { font-size: 24px; font-size: 1.5rem; line-height: 1.25em; } .ds-video-carousel .ds-video-carousel-content .dsvc-card:first-child { border: none; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.dsvc-share { margin-top: 0; border-bottom: 1px #333 solid; text-align: right; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.dsvc-about { background: rgba(0, 0, 0, 0.5); } .ds-video-carousel .ds-video-carousel-content .dsvc-bordered-row { position: relative; } .ds-video-carousel .ds-video-carousel-content .dsvc-borders { overflow: hidden; position: absolute; height: 100%; width: 100%; z-index: -100; } .ds-video-carousel .ds-video-carousel-content .dsvc-borders .border-elem { position: absolute; margin-top: 15px; } .ds-video-carousel .ds-video-carousel-content .dsvc-borders .border-elem.left { border-right: 1px #333 solid; height: 100%; left: 10px; } .ds-video-carousel .ds-video-carousel-content .dsvc-borders .border-elem.right { border-left: 1px #333 solid; height: 100%; right: 10px; } } /* ------------------------------------ ------------- iPHONE6 -------------- ------------------------------------ */ /* iph6 6 "screen and (max-device-width: 737px) and (orientation: landscape)" */ @media screen and (max-device-width: 737px) and (orientation: landscape) { /* overriding footer-lib, which sets this at 740px for some readon */ .cnn-footer { width: auto; } body { font-family: 'CNN', Helvetica Neue, Arial, sans-serif; background-size: 400%; color: #FFF; } .ds-video-carousel .dsvc-mode:before { content: "stack"; display: block; position: absolute; visibility: hidden; height: 0; width: 0; } .ds-video-carousel .ds-video-carousel-header { position: relative; height: auto; padding-bottom: 40px; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title { padding: 0; float: none; height: 100%; margin-top: 20px; max-width: 85%; font-family: 'CNN', Helvetica Neue, Arial, sans-serif; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title h1.title { font-size: 48px; font-size: 3rem; line-height: 1.125em; font-weight: 300; display: none; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title p { font-size: 14px; font-size: 0.875rem; line-height: 1.28571em; display: none; } .ds-video-carousel .ds-video-carousel-header .ds-video-carousel-title .src { width: auto; max-width: 275px; margin-bottom: 20px; } .ds-video-carousel .ds-video-carousel-header .co-brand { position: relative; right: initial; left: 0; top: 105px; width: auto; height: 100%; margin-left: -16px; float: none; } .ds-video-carousel .ds-video-carousel-header .co-brand .co-brand-src { display: inline-block; margin-left: -10px; width: 300px; } .ds-video-carousel .ds-video-carousel-header .co-brand:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-header:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-content { overflow-x: hidden; margin: 60px 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu { position: relative; display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .title { display: none; position: relative; font-size: 18px; font-size: 1.125rem; line-height: 1.33333em; padding: 10px; font-weight: 500; text-align: left; float: left; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-icon { cursor: pointer; display: block; float: right; width: 25px; margin: 12px 10px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list { display: block; position: absolute; background: #000; background: rgba(30, 30, 30, 0.8); z-index: 100; width: 100%; top: 41px; visibility: hidden; opacity: 0; webkit-transition: visibility 0s 0.25s, opacity 0.25s linear; moz-transition: visibility 0s 0.25s, opacity 0.25s linear; o-transition: visibility 0s 0.25s, opacity 0.25s linear; transition: visibility 0s 0.25s, opacity 0.25s linear; border-bottom: 1px #363533 solid; border-bottom: 1px rgba(255, 255, 255, 0.13) solid; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item { display: block; position: relative; cursor: pointer; font-size: 14px; font-size: 0.875rem; line-height: 2.14286em; padding-left: 22px; color: #C0BEBF; border-top: 1px #363533 solid; border-top: 1px rgba(255, 255, 255, 0.13) solid; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor { background: #2ea8e6; background: rgba(46, 168, 230, 0.5); color: #FFF; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor .sponsor-logo { display: block; float: right; height: 31px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor .sponsor-logo img { display: inline-block; height: 25px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor .sponsor-logo:before { content: "Sponsor content"; font-size: 10px; font-size: 0.625rem; line-height: 3em; text-transform: uppercase; margin-right: 10px; color: #FFF; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor:hover { background: #24518A; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item.sponsor:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list .dsvc-menu-item:hover { color: #FFF; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu .dsvc-menu-list.open { visibility: visible; opacity: 1; webkit-transition: opacity 0.25s linear; moz-transition: opacity 0.25s linear; o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-mobile-menu:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container { margin-bottom: 20px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-mobile-ad { width: 300px; display: block; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media { max-width: 1028px; margin: 0 auto 30px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .cvp-video.hide { visibility: hidden; height: 0; width: 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-item-media, .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-gallery-container { position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-item-media .element-text, .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .ds-video-carousel-media .dsvc-gallery-container .element-text { font-size: 14px; font-size: 0.875rem; line-height: 1.35em; position: relative; width: auto; bottom: 0; left: 0; margin: 0 10px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel { display: block; position: relative; height: initial; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-tray { position: relative; left: 0; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item { position: relative; display: block; vertical-align: top; white-space: normal; z-index: 0; height: initial; width: initial; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .title { display: block; position: relative; font-size: 18px; font-size: 1.125rem; line-height: 1.33333em; padding: 10px; font-weight: 500; text-align: left; background: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .paragraph { font-size: 14px; font-size: 0.875rem; line-height: 1.42857em; position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-image { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-fade { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-media { display: block; position: relative; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-media .element-text { font-size: 14px; font-size: 0.875rem; line-height: 1.35em; position: relative; width: auto; bottom: 0; left: 0; margin: 0 10px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .dsvc-item-info { padding: 10px; width: auto; visibility: visible; opacity: 1; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo { display: inline-block; position: absolute; margin-left: 0px; padding: 3px; right: 5px; left: initial; top: 10px; height: 35px; max-height: 35px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo img { display: inline-block; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item .sponsor-logo:before { display: inline-block; content: initial; font-size: 9px; font-size: 0.5625rem; line-height: 3.88889em; text-transform: uppercase; text-align: center; color: #FFF; margin-right: 10px; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.dummies { display: none; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.sponsor { background: #2ea8e6; background: #2ea8e6; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.sponsor .title { background: #2ea8e6; background: rgba(46, 168, 230, 0.5); } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active { cursor: default; } .ds-video-carousel .ds-video-carousel-content .ds-video-carousel-media-container .dsvc-carousel .dsvc-item.active.sponsor .title { background: #24518A; background: #0c2340; } .ds-video-carousel .ds-video-carousel-content .dsvc-card { color: #FFF; padding: 0 10px; border-top: 4px double #333; padding-top: 10px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .paragraph { font-size: 14px; font-size: 0.875rem; line-height: 1.42857em; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .title { font-size: 18px; font-size: 1.125rem; line-height: 1.33333em; font-weight: 800; margin-bottom: 15px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .feature-image { position: relative; margin-bottom: 20px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card .feature-image.ireport:after { content: " "; position: absolute; background-image: url("../media/assets/ireport.bug.small.gif"); height: 14px; width: 14px; bottom: 0; right: 0; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.cot-share { text-align: left; padding: 10px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.cot-share .title { display: inline-block; vertical-align: middle; margin: 0; padding-right: 20px; } .ds-video-carousel .ds-video-carousel-content .dsvc-card.cot-share .c_share_container { display: inline-block; vertical-align: middle; width: auto; float: none; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item { display: block; margin-bottom: 10px; color: #FFF; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item .item-title { font-size: 18px; font-size: 1.125rem; line-height: 1em; margin-bottom: 10px; font-weight: 800; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item .paragraph { font-size: 13px; font-size: 0.8125rem; line-height: 1.23077em; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item .tease-image { float: left; margin-right: 10px; width: 60px; } .ds-video-carousel .ds-video-carousel-content .dsvc-related .dsvc-item:after { content: " "; display: block; clear: both; line-height: 0; height: 0; zoom: 1; } } a { color: #8dbec5; text-decoration: none; } a:link { color: #8dbec5; } a:hover { color: #FFF; } a:visited { color: #8dbec5; } a.white { color: #FFF; } a.white:hover { color: #FFF; } a.white:visited { color: #FFF; }