/*
Theme Name: Theme Name
Version: 1.0
Author: Sizeable Interactive
Author URI: http://sizeableinteractive.com
Description: Custom WordPress theme
*/
@-webkit-keyframes loader { 0% { background: transparent; left: -10px; -webkit-transform-origin: 10px 35px; }
  30% { background: #fff; }
  100% { background: transparent; left: 10px; -webkit-transform-origin: -10px 35px; } }
@-webkit-keyframes outer { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes outer { 0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes inner { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-720deg); } }
@-moz-keyframes inner { 0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(-720deg); } }
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: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }

mark, rp, rt, ruby, summary, time { display: inline; }

@font-face { font-family: 'icomoon'; src: url("fonts/icomoon.eot?aostjp"); src: url("fonts/icomoon.eot?#iefixaostjp") format("embedded-opentype"), url("fonts/icomoon.woff?aostjp") format("woff"), url("fonts/icomoon.ttf?aostjp") format("truetype"), url("fonts/icomoon.svg?aostjp#icomoon") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-menu:before { content: "\e600"; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= FONT FACES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@font-face { font-family: 'Tungsten'; src: url("fonts/tungsten-light-webfont.eot"); src: url("fonts/tungsten-light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/tungsten-light-webfont.woff2") format("woff2"), url("fonts/tungsten-light-webfont.woff") format("woff"), url("fonts/tungsten-light-webfont.ttf") format("truetype"), url("fonts/tungsten-light-webfont.svg#tungstenlight") format("svg"); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Tungsten'; src: url("fonts/tungsten-book-webfont.eot"); src: url("fonts/tungsten-book-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/tungsten-book-webfont.woff2") format("woff2"), url("fonts/tungsten-book-webfont.woff") format("woff"), url("fonts/tungsten-book-webfont.ttf") format("truetype"), url("fonts/tungsten-book-webfont.svg#tungstenbook") format("svg"); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Tungsten'; src: url("fonts/tungsten-medium-webfont.eot"); src: url("fonts/tungsten-medium-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/tungsten-medium-webfont.woff2") format("woff2"), url("fonts/tungsten-medium-webfont.woff") format("woff"), url("fonts/tungsten-medium-webfont.ttf") format("truetype"), url("fonts/tungsten-medium-webfont.svg#tungstenmedium") format("svg"); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Tungsten'; src: url("fonts/tungsten-semibold-webfont.eot"); src: url("fonts/tungsten-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/tungsten-semibold-webfont.woff2") format("woff2"), url("fonts/tungsten-semibold-webfont.woff") format("woff"), url("fonts/tungsten-semibold-webfont.ttf") format("truetype"), url("fonts/tungsten-semibold-webfont.svg#tungstensemibold") format("svg"); font-weight: 600; font-style: normal; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= GLOBAL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; background-repeat: no-repeat; }

html { width: 100%; height: 100%; }

body { height: 100%; font-size: 100%; font: 400 0.875rem "proxima-nova", helvetica, arial, sans-serif; line-height: 1.3125rem; color: #00457e; letter-spacing: 0.005em; background-color: white; }
@media (min-width: 76.25em) { body { font-size: 1.125rem; line-height: 1.625rem; } }

.page-wrapper { width: 100%; }
.page-wrapper > .bin { margin: 0 auto; width: 100%; max-width: 1680px; }

.credit { position: absolute; right: 10px; bottom: 10px; color: #eef5df; font: 400 0.5625rem "proxima-nova", helvetica, arial, sans-serif; }
.credit.alt { color: #00457e; }

.overlay { background-color: transparent; background-image: -webkit-linear-gradient(top, transparent 15%, rgba(0, 0, 0, 0.8) 100%); background-image: linear-gradient(to bottom,transparent 15%, rgba(0, 0, 0, 0.8) 100%); }

.says, .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; }

sup { vertical-align: super; font-size: smaller; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= BUTTONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.button, a.button, button { display: block; padding: 8px 10px; width: 106px; height: 55px; font: 400 0.6875rem "proxima-nova", helvetica, arial, sans-serif !important; line-height: 13px; color: #dad46d; text-decoration: none; text-align: center; background: rgba(0, 69, 126, 0.3); border-radius: 3px; border: 0 none; cursor: pointer; letter-spacing: 0.01rem; }
@media (min-width: 76.25em) { .button, a.button, button { width: 143px; height: 66px; font-size: 0.875rem !important; } }
@media (min-width: 90em) { .button, a.button, button { width: 170px; height: 76px; font-size: 1rem !important; } }
.button span, a.button span, button span { display: block; font-weight: 700 !important; text-transform: uppercase; }
.button:hover, a.button:hover, button:hover { background: rgba(0, 69, 126, 0.5); }

.takeaways .button, .takeaways a.button { padding: 12px 10px; width: 100%; font-size: 0.875rem !important; line-height: 16px !important; text-transform: uppercase; }
@media (min-width: 76.25em) { .takeaways .button, .takeaways a.button { font-size: 1.125rem !important; line-height: 1.375rem !important; } }

.takeaways span.button { cursor: default; }
.takeaways span.button:hover { background: rgba(0, 69, 126, 0.3); }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= COPY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
p { margin-bottom: 1.75em; font: 400 0.875rem "proxima-nova", helvetica, arial, sans-serif; line-height: 1.3125rem; color: #00457e; letter-spacing: 0.005em; }
@media (min-width: 76.25em) { p { font-size: 1.125rem; line-height: 1.625rem; } }

a { -webkit-transition: color 0.2s, background-color 0.2s, opacity 0.2s; -moz-transition: color 0.2s, background-color 0.2s, opacity 0.2s; transition: color 0.2s, background-color 0.2s, opacity 0.2s; }
a:hover { -webkit-transition: color 0.2s, background-color 0.2s, opacity 0.2s; -moz-transition: color 0.2s, background-color 0.2s, opacity 0.2s; transition: color 0.2s, background-color 0.2s, opacity 0.2s; }

blockquote { margin-bottom: 1.2em; padding-left: 30px; border-left: 6px solid #eff6e0; }

ul, ol { margin-bottom: 1.2em; padding-left: 30px; line-height: 1.2em; }

em { font-style: oblique; }

strong { font-weight: bold; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= FORMS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
input { -webkit-appearance: none; border-radius: 0; }
input::-webkit-input-placeholder { color: #666; }
input::-moz-placeholder { color: #666; }
input:-moz-placeholder { color: #666; }
input:-ms-input-placeholder { color: #666; }

textarea { width: 100%; min-height: 100px; height: 100px; resize: none; }

.gfield_required { color: #7e001b; font: 400 0.875rem helvetica, arial, sans-serif; }

.gfield_error { color: black; background-color: rgba(255, 0, 0, 0.1); }
.gfield_error input { border-color: black; }
.gfield_error .validation_message { margin-top: 12px; font: 700 0.75rem helvetica, arial, sans-serif; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= HEADINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
h1 { font-size: 15rem; font-weight: 300; letter-spacing: -0.01em; text-align: center; }

h2 { font-size: 5.625rem; font-weight: 300; }
@media (min-width: 76.25em) { h2 { font-size: 7.125rem; } }
@media (min-width: 90em) { h2 { font-size: 8.625rem; } }
@media (min-width: 105em) { h2 { font-size: 9.8125rem; } }

h3 { font-size: 2.5rem; font-weight: 400; }

h4 { font-size: 1.625rem; font-weight: 600; letter-spacing: 0.05em; }
@media (min-width: 90em) { h4 { font-size: 2.325rem; } }

h1, h2, h3, h4 { font-family: "Tungsten", helvetica, arial, sans-serif; line-height: 1; text-transform: uppercase; }

h1, h2 { color: #00457e; }

h3, h4 { color: #eff6e0; }

.subhead { font: 800 1.625rem "proxima-nova", helvetica, arial, sans-serif; line-height: 1.75rem; color: #00457e; text-transform: uppercase; letter-spacing: 0.01em; text-align: center; }
@media (min-width: 76.25em) { .subhead { font-size: 2.125rem; line-height: 2.2rem; } }
section .subhead { font: 800 1rem "proxima-nova", helvetica, arial, sans-serif; line-height: 1; letter-spacing: 0.025em; text-align: left; }
@media (min-width: 76.25em) { section .subhead { font-size: 1.25rem; } }
@media (min-width: 90em) { section .subhead { font-size: 1.5rem; } }
@media (min-width: 105em) { section .subhead { font-size: 1.75rem; } }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= COLUMNS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.sections { height: 100%; z-index: 200; pointer-events: none; }
.sections::after { clear: both; content: ""; display: table; }

.column { position: relative; top: 0; z-index: 100; height: 100%; -webkit-backface-visibility: hidden; pointer-events: auto; }
.column.left { left: 0; padding-top: 120px; width: 50%; border-right: 20px solid white; }
.column.right { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); position: fixed; top: 0; left: 50%; margin: 66px 0 0; width: 50%; max-width: 840px; height: calc(100% - 66px); background-color: white; overflow: hidden; }

.intro { height: 100%; }
.intro .hgroup { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 60px; }
@media (min-width: 76.25em) { .intro .hgroup { padding: 0 75px; } }
@media (min-width: 90em) { .intro .hgroup { padding: 0 90px; } }
@media (min-width: 105em) { .intro .hgroup { padding: 0 112px; } }
.intro .column.left { padding-top: 0; }
.intro .column.right { -webkit-transition: none; -moz-transition: none; transition: none; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); background-size: cover; }
.intro .column.right .credit { z-index: 1; pointer-events: none; opacity: .5; }

section { height: 100%; z-index: 1; }
section.active > .column.right { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); }
section > .bin { width: 100%; max-width: 480px; }
section h2 { line-height: 0.85em; }
section .hgroup { margin-bottom: 18px; padding: 0 60px; }
section .hgroup::after { clear: both; content: ""; display: table; }
@media (min-width: 76.25em) { section .hgroup { padding: 0 75px; } }
@media (min-width: 90em) { section .hgroup { padding: 0 90px; } }
@media (min-width: 105em) { section .hgroup { padding: 0 112px; } }
section .summary { padding: 20px 50px 20px 60px; color: #eff6e0; background: #0086b2; }
section .summary::after { clear: both; content: ""; display: table; }
@media (min-width: 76.25em) { section .summary { padding: 25px 65px 25px 75px; } }
@media (min-width: 90em) { section .summary { padding: 30px 80px 30px 90px; } }
@media (min-width: 105em) { section .summary { padding: 36px 100px 36px 112px; } }
section .summary h3 { margin: 0 -50px 9px 0; padding-bottom: 6px; border-bottom: 2px solid #dad46d; }
@media (min-width: 76.25em) { section .summary h3 { margin-right: -65px; } }
@media (min-width: 90em) { section .summary h3 { margin-right: -80px; } }
@media (min-width: 105em) { section .summary h3 { margin-right: -100px; } }
section .summary h4 { margin-bottom: 12px; }
section .summary p { color: #eff6e0; font-weight: 300; letter-spacing: 0.025em; }
section .summary a { color: #dad46d; font-weight: 800; }
section .summary ul { margin: 0; padding: 0; list-style: none; line-height: 1em; color: #eff6e0; }
section .summary ul li { margin-bottom: 1.5rem; padding-left: 20px; font-weight: 300; font-size: 0.875rem; line-height: 21px; }
@media (min-width: 76.25em) { section .summary ul li { font-size: 1.125rem; line-height: 1.625rem; } }
section .summary ul li .bullet { position: absolute; top: 6px; left: 0; display: block; width: 9px; height: 9px; border-radius: 50%; background: #dad46d; }
@media (min-width: 76.25em) { section .summary ul li .bullet { top: 9px; } }
@media (min-width: 90em) { section .summary ul li .bullet { top: 10px; } }
@media (min-width: 105em) { section .summary ul li .bullet { top: 11px; } }
section .summary strong { font-weight: 800; }
section .summary .button { float: left; margin-left: 10px; }
section .summary .button:first-of-type { margin: 0; }
section .summary .instructions { margin: 0 -60px 25px 0; color: #eef5df; font: 700 italic 1.125rem "proxima-nova", helvetica, arial, sans-serif; line-height: 21px; }
@media (min-width: 76.25em) { section .summary .instructions { font-size: 1.25rem; } }
section .img-quo .bin { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background-position: center top; background-repeat: no-repeat; background-size: cover; }
section .img-quo .quote { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 200; margin: 0 auto; width: 80%; font: 400 1.25rem "proxima-nova", helvetica, arial, sans-serif; line-height: 21px; color: #dad46d; text-align: center; }
@media (min-width: 76.25em) { section .img-quo .quote { font-size: 1.5rem; line-height: 1.5rem; } }
@media (min-width: 90em) { section .img-quo .quote { font-size: 1.75rem; line-height: 1.75rem; } }
@media (min-width: 105em) { section .img-quo .quote { font-size: 2.25rem; line-height: 2.5rem; } }
section .img-quo .quote span { font-size: 2rem; line-height: 30px; font-weight: 800; }
@media (min-width: 76.25em) { section .img-quo .quote span { font-size: 2.125rem; line-height: 2.25rem; } }
@media (min-width: 90em) { section .img-quo .quote span { font-size: 2.375rem; line-height: 2.5rem; } }
@media (min-width: 105em) { section .img-quo .quote span { font-size: 2.5rem; line-height: 3rem; } }
section .img-quo .quote .attribution { margin-top: 24px; font: 300 italic 0.625rem "proxima-nova", helvetica, arial, sans-serif; text-align: right; }
section .img-quo .quote .attribution .author { display: block; font: 800 1.125rem "proxima-nova", helvetica, arial, sans-serif; }
section .img-quo .credit { z-index: 200; }
section .img-quo .overlay { position: absolute; z-index: 10; height: 100%; width: 100%; }
section .img-cap { background-size: cover; background-repeat: no-repeat; }
section .img-cap .bin { width: 85%; height: 100%; }
@media (min-height: 768px) { section .img-cap .bin { width: 100%; } }
section .img-cap img { display: block; width: 100%; max-height: 100%; }
section .img-cap a.block { display: block; height: 100%; width: 100%; }
section .img-cap .caption { padding: 9px 12px; width: 100%; color: #00457e; font: 400 0.6875rem "proxima-nova", helvetica, arial, sans-serif; line-height: 14px; text-align: center; background: #dad46d; }
@media (min-width: 76.25em) { section .img-cap .caption { font-size: 0.8125rem; line-height: 1rem; } }
@media (min-width: 90em) { section .img-cap .caption { font-size: 1rem; line-height: 1.125rem; } }
@media (min-width: 105em) { section .img-cap .caption { font-size: 1.125rem; line-height: 21px; } }
section .img-cap .caption a { display: inline !important; font-weight: 900; text-decoration: none; color: #00457e; }
section .img-cap.alt .bin { width: 100%; }
section .img-cap.alt .caption { position: absolute; bottom: 0; }
section .img-cap.fixed .bin { width: 380px; }
@media (min-height: 768px) { section .img-cap.fixed .bin { width: 470px; } }
section .img-cap.fixed img { display: block; width: 100%; }
section .img-cap.fixed a { display: block; width: auto; height: auto; }
section .impulse-content { display: none; }
section .impulse-info > .bin { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background-position: center top; background-repeat: no-repeat; background-size: cover; }
section .impulse-info .credit { position: absolute; right: 10px; bottom: 10px; z-index: 20; color: #eef5df; font: 400 0.5625rem "proxima-nova", helvetica, arial, sans-serif; }
section .impulse-info .impulse-nav { height: 100%; z-index: 300; }
section .impulse-info .impulse-nav ul { margin: 0; padding: 0; list-style: none; line-height: 1em; height: 100%; }
section .impulse-info .impulse-nav li { float: left; display: block; width: 50%; height: 33.4%; border-top: 2px solid white; }
section .impulse-info .impulse-nav li:nth-of-type(1), section .impulse-info .impulse-nav li:nth-of-type(2) { border-top: 0 none; }
section .impulse-info .impulse-nav li:nth-of-type(2n+1) { border-right: 1px solid white; }
section .impulse-info .impulse-nav li.empty-cell { background: rgba(0, 0, 0, 0.5); }
section .impulse-info .impulse-nav li a { display: block; padding: 0 15%; width: 100%; height: 100%; color: #dad46d; font: 500 2.25rem "Tungsten", helvetica, arial, sans-serif; text-decoration: none; text-transform: uppercase; text-align: center; background: rgba(0, 0, 0, 0.5); cursor: pointer; }
@media (min-width: 76.25em) { section .impulse-info .impulse-nav li a { font-size: 2.75rem; } }
@media (min-width: 90em) { section .impulse-info .impulse-nav li a { font-size: 3.25rem; } }
@media (min-width: 105em) { section .impulse-info .impulse-nav li a { font-size: 3.75rem; } }
section .impulse-info .impulse-nav li a:hover { background: transparent; }
section .impulse-info .impulse-nav li a .bin { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
section .vid-cap.int .bin, section .vid-cap.int .mejs-container, section .vid-cap.int .mejs-layer, section .vid-cap.int .mejs-mediaelement video { width: 403px !important; height: 430px !important; }
@media (min-height: 768px) { section .vid-cap.int .bin, section .vid-cap.int .mejs-container, section .vid-cap.int .mejs-layer, section .vid-cap.int .mejs-mediaelement video { width: 468px !important; height: 500px !important; } }
section .vid-cap .bin { width: 468px; }
section .vid-cap img { display: block; width: 100%; max-height: 100%; }
section .vid-cap .play-container:hover .overlay { background-color: rgba(0, 0, 0, 0.3); }
section .vid-cap .overlay { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); }
section .vid-cap .play-button { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 0; right: 0; margin: 0 auto; width: 124px; height: 124px; border-radius: 50%; border: 6px solid rgba(218, 212, 109, 0.5); background: rgba(218, 212, 109, 0.3); cursor: pointer; }
section .vid-cap .play-button::after { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 31px 0 31px 54px; border-color: transparent transparent transparent white; }
section .vid-cap .caption { padding: 9px 12px; width: 100%; color: #00457e; font: 400 0.6875rem "proxima-nova", helvetica, arial, sans-serif; line-height: 14px; text-align: center; background: #dad46d; }
@media (min-width: 76.25em) { section .vid-cap .caption { font-size: 0.8125rem; line-height: 1rem; } }
@media (min-width: 90em) { section .vid-cap .caption { font-size: 1rem; line-height: 1.125rem; } }
@media (min-width: 105em) { section .vid-cap .caption { font-size: 1.125rem; line-height: 21px; } }

.sub-section .left.column { padding-top: 70px; background: #0086b2; }
@media (min-width: 105em) { .sub-section .left.column { padding-top: 120px; } }
.sub-section.active > .column.right { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); }
.policy-communication-fellows .sub-section .summary, .gender .sub-section#sub-section01 .summary, .gender .sub-section#sub-section02 .summary, .gender .sub-section#sub-section03 .summary, .gender .sub-section#sub-section04 .summary { min-height: 0 !important; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= FOOTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
footer { width: 100%; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= HEADER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header { position: fixed; top: 0; left: 0; z-index: 50000; width: 100%; background: #eff6e0; }
header > .bin { margin: 0 auto; padding-left: 60px; width: 100%; max-width: 1680px; }
@media (min-width: 76.25em) { header > .bin { padding-left: 75px; } }
@media (min-width: 90em) { header > .bin { padding-left: 90px; } }
@media (min-width: 105em) { header > .bin { padding-left: 112px; } }
header nav ul { margin: 0; padding: 0; list-style: none; line-height: 1em; }
header .icon-menu { float: left; margin: 0 15px 0 0; font-size: 0.75rem; line-height: 40px; cursor: pointer; }
header .prb-logo { position: absolute; right: 0; top: 0; z-index: 2; width: 49px; height: 40px; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= LARGE NAV
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.large-nav { height: 100%; }
.large-nav ul { margin: 0; padding: 0; list-style: none; line-height: 1em; height: 100%; }
.large-nav li { display: block; height: 25%; border-bottom: 2px solid white; }
.large-nav li:last-of-type { border-bottom: 0 none; }
.large-nav a { display: block; width: 100%; height: 100%; text-decoration: none; text-transform: uppercase; }
.large-nav a:hover .img-holder { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.large-nav a:hover .bin { background-color: transparent; }
.large-nav a .img-holder { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-attachment: fixed; -webkit-filter: grayscale(50%); filter: grayscale(50%); }
.large-nav a .bin { display: table; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); }
.large-nav .section-link { display: table-cell; width: 50%; text-align: right; color: #dad46d; font: 400 4.0625rem "Tungsten", helvetica, arial, sans-serif; vertical-align: middle; }
@media (min-width: 76.25em) { .large-nav .section-link { font-size: 5rem; } }
@media (min-width: 90em) { .large-nav .section-link { font-size: 6rem; } }
@media (min-width: 105em) { .large-nav .section-link { font-size: 7.0625rem; } }
.large-nav .section-summary { display: table-cell; padding-left: 12px; width: 50%; color: #eef5df; font: 300 0.875rem "proxima-nova", helvetica, arial, sans-serif; line-height: 1.125rem; vertical-align: middle; }
@media (min-width: 76.25em) { .large-nav .section-summary { font-size: 1.125rem; line-height: 1.125em; } }
@media (min-width: 90em) { .large-nav .section-summary { font-size: 1.375rem; } }
@media (min-width: 105em) { .large-nav .section-summary { font-size: 1.5rem; } }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= LOGO BLOCK
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.logo-block { position: absolute; bottom: 40px; left: 0; width: 100%; text-align: center; }
.logo-block img { margin-left: 50px; }
.logo-block img:first-of-type { margin: 0; }
.logo-block .usaid { width: 92px; }
@media (min-width: 76.25em) { .logo-block .usaid { width: 125px; } }
@media (min-width: 90em) { .logo-block .usaid { width: 160px; } }
@media (min-width: 105em) { .logo-block .usaid { width: 194px; } }
.logo-block .idea { width: 85px; }
@media (min-width: 76.25em) { .logo-block .idea { width: 115px; } }
@media (min-width: 90em) { .logo-block .idea { width: 145px; } }
@media (min-width: 105em) { .logo-block .idea { width: 177px; } }
.logo-block .prb { width: 58px; }
@media (min-width: 76.25em) { .logo-block .prb { width: 73px; } }
@media (min-width: 90em) { .logo-block .prb { width: 96px; } }
@media (min-width: 105em) { .logo-block .prb { width: 120px; } }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= NAVBAR
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= NAV DROPDOWN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
nav.dropdown { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: absolute; top: 40px; visibility: hidden; min-height: 0; max-height: 0; overflow: hidden; width: 270px; background: #d6d7d8; }
nav.dropdown.show { height: auto; min-height: 100px; max-height: 2000px; visibility: visible; }
nav.dropdown a { display: block; padding: 0 0 0 16px; height: 28px; color: #00457e; font: 600 0.8125rem "proxima-nova", helvetica, arial, sans-serif; line-height: 30px; letter-spacing: 0.025em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid white; }
nav.dropdown a:hover { background: rgba(218, 212, 109, 0.5); }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= SUB-SECTION NAV
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.sub-section-nav { position: absolute; left: 24px; z-index: 50000; pointer-events: auto; }
@media (min-width: 76.25em) { .sub-section-nav { left: 32px; } }
@media (min-width: 90em) { .sub-section-nav { left: 38px; } }
@media (min-width: 105em) { .sub-section-nav { left: calc(50% - 790px); } }
.sub-section-nav ul { margin: 0; padding: 0; list-style: none; line-height: 1em; }
.sub-section-nav li { margin-bottom: 13px !important; padding: 0 !important; }
.sub-section-nav a { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #eef5df; background: transparent; cursor: pointer; }
@media (min-width: 76.25em) { .sub-section-nav a { width: 14px; height: 14px; } }
@media (min-width: 90em) { .sub-section-nav a { width: 16px; height: 16px; } }
@media (min-width: 105em) { .sub-section-nav a { width: 18px; height: 18px; } }
.sub-section-nav a.active, .sub-section-nav a:hover { border-color: #dad46d; background-color: #dad46d; }
.sub-section-nav.sticky { position: fixed; top: calc(50% - 120px) !important; }
.sub-section-nav.unstuck { position: absolute; top: auto !important; bottom: 8px; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= PAGE NAV
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.page-nav { position: fixed; top: 40px; z-index: 20000; width: 100%; max-width: 1680px; font: 400 0.8125rem "proxima-nova", helvetica, arial, sans-serif; text-transform: uppercase; background: white; }
.page-nav::after { clear: both; content: ""; display: table; }
.page-nav > .bin { padding-left: 60px; width: calc(50% - 20px); }
.page-nav > .bin::after { clear: both; content: ""; display: table; }
@media (min-width: 76.25em) { .page-nav > .bin { padding-left: 75px; } }
@media (min-width: 90em) { .page-nav > .bin { padding-left: 90px; } }
@media (min-width: 105em) { .page-nav > .bin { padding-left: 112px; } }
.page-nav ul { margin: 0; padding: 0; list-style: none; line-height: 1em; }
.page-nav li { float: left; width: 25%; }
.page-nav a { display: block; text-decoration: none; line-height: 26px; color: #00457e; text-align: center; }
.page-nav a.active, .page-nav a:hover { background: #dad46d; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= SIDEBAR
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= TITLEBAR
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.titlebar { width: 100%; height: 40px; color: #00457e; font: 700 1.125rem "proxima-nova", helvetica, arial, sans-serif; line-height: 40px; text-transform: uppercase; }
.titlebar .page-title { font-weight: 400; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= WALL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.wall .item { position: absolute; border-bottom: 2px solid white; border-left: 2px solid white; background-position: center center; background-size: cover; background-repeat: no-repeat; -webkit-filter: grayscale(50%); filter: grayscale(50%); }
.wall .item:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.wall .item.full { width: 100%; }
.wall .item.half { width: 50%; }
.wall .item.third { width: 33%; }
.wall .item.third.giant { width: 34%; }
.wall .item.two-thirds { width: 66%; }
.wall .item.giant { height: 50%; }
.wall .item.tall { height: 30%; }
.wall .item.normal { height: 25%; }
.wall .item.short { height: 20%; }
.wall .item.one { top: 0; }
.wall .item.one, .wall .item.two, .wall .item.six { left: 0; }
.wall .item.two, .wall .item.three, .wall .item.four { top: 25%; }
.wall .item.three, .wall .item.five { left: 34%; }
.wall .item.four { left: 67%; }
.wall .item.five { top: 45%; }
.wall .item.six, .wall .item.seven { top: 75%; }
.wall .item.seven { left: 50%; }
.wall .item.one, .wall .item.two, .wall .item.six { border-left: 0 none; }
.wall .item.six, .wall .item.seven { border-bottom: 0 none; }
.wall .item.one { background-image: url(img/landing-page/PolicyFellows-hover.jpg); background-size: 100%; background-position: center 20%; }
.wall .item.two { background-image: url(img/landing-page/PHE-hover.jpg); background-size: cover; background-position: 74% 90%; }
.wall .item.three { background-image: url(img/landing-page/IntheField-hover.gif); background-size: cover; background-position: 58% 73%; -webkit-filter: grayscale(80%); filter: grayscale(80%); }
.wall .item.three:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.wall .item.four { background-image: url(img/landing-page/DemoDiv-hover.jpg); background-size: 220%; background-position: -130px 22%; -webkit-filter: grayscale(70%); filter: grayscale(70%); }
.wall .item.four:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.wall .item.five { background-image: url(img/landing-page/gender-hover.jpg); background-size: cover; background-position: 0 30%; -webkit-filter: grayscale(60%); filter: grayscale(60%); }
.wall .item.five:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.wall .item.six { background-image: url(img/landing-page/Data-hover.gif); background-size: 145%; background-position: 90% 6%; }
.wall .item.seven { background-image: url(img/landing-page/Media-hover.jpg); background-size: cover; background-position: 83% 100%; }
.wall .item.six a:hover { color: #eef5df; }
.wall a { -webkit-transition: none; -moz-transition: none; transition: none; display: block; padding: 15px; width: 100%; height: 100%; color: #eef5df; font: 600 2rem "Tungsten", helvetica, arial, sans-serif; letter-spacing: 0.05rem; text-transform: uppercase; text-decoration: none; background-color: rgba(0, 0, 0, 0.5); }
@media (min-width: 90em) { .wall a { font-size: 2.75rem; } }
@media (min-width: 105em) { .wall a { font-size: 3.4375rem; } }
.wall a:hover { color: #00457e; background-color: transparent; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= DATA OVERRIDES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.data h1 { margin-bottom: 9px; font-size: 10.625rem; line-height: 0.75em; letter-spacing: -0.01em; }
@media (min-width: 76.25em) { .data h1 { font-size: 14rem; } }
@media (min-width: 90em) { .data h1 { font-size: 17rem; } }
.data .intro .large-nav li a .img-holder { background-image: url(img/data-navintro-sat.jpg); background-position: 100% center; background-size: 60%; }
.data section .impulse-info .impulse-nav li { height: 50%; }
.data #data-context .caption.alt { font-size: 0.5625rem; background: none; text-align: right; }
@media (min-width: 76.25em) { .data #data-context .caption.alt { font-size: 0.625rem; } }
@media (min-width: 90em) { .data #data-context .caption.alt { font-size: 0.75rem; } }
@media (min-width: 105em) { .data #data-context .caption.alt { font-size: 0.875rem; } }
.data #data-results { background-image: url(img/data-results-sat.jpg); background-position: right top; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= DEMOGRAPHIC DIVIDEND
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.demographic-dividend h1 { margin-bottom: 9px; letter-spacing: -0.01em; text-align: center; }
.demographic-dividend h1 span { display: block; line-height: 0.75em; }
.demographic-dividend h1 .top { margin-bottom: 9px; font-size: 5.75rem; }
@media (min-width: 76.25em) { .demographic-dividend h1 .top { font-size: 7.5rem; letter-spacing: -0.005em; } }
@media (min-width: 90em) { .demographic-dividend h1 .top { margin-bottom: 15px; font-size: 8.685rem; letter-spacing: -0.001em; } }
.demographic-dividend h1 .bottom { font-size: 9.25rem; }
@media (min-width: 76.25em) { .demographic-dividend h1 .bottom { font-size: 12rem; letter-spacing: -0.005em; } }
@media (min-width: 90em) { .demographic-dividend h1 .bottom { font-size: 14rem; letter-spacing: -0.001em; } }
.demographic-dividend .intro .column.right .credit { z-index: 1; pointer-events: none; opacity: .5; }
.demographic-dividend .intro .column.right .large-nav li a .img-holder { background-image: url(img/demo-navintro-sat.jpg); background-position: 100% center; background-size: contain; }
.demographic-dividend .results #sub-section03 .column.right { display: none; }
.demographic-dividend section .impulse-info .impulse-nav li { height: 50%; }
.demographic-dividend .activities #ii-2 a.button, .demographic-dividend .activities #ii-3 a.button { height: 66px; }
@media (min-width: 76.25em) { .demographic-dividend .activities #ii-2 a.button, .demographic-dividend .activities #ii-3 a.button { height: 86px; } }
@media (min-width: 90em) { .demographic-dividend .activities #ii-2 a.button, .demographic-dividend .activities #ii-3 a.button { height: 96px; } }
.demographic-dividend #demo-context { background: url(img/demo-context.jpg) 0 60% no-repeat; background-size: 100%; }
.demographic-dividend #demo-context::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: white; background-image: -webkit-linear-gradient(top, white 0%, rgba(255, 255, 255, 0) 50%); background-image: linear-gradient(to bottom,white 0%, rgba(255, 255, 255, 0) 50%); background-color: transparent; }
.demographic-dividend #demo-context .quote { top: 45px; bottom: auto; width: 420px; font-size: 2rem; line-height: 38px; color: #00457e; }
@media (min-width: 76.25em) { .demographic-dividend #demo-context .quote { width: 90%; font-size: 2.25rem; line-height: 2.25rem; } }
@media (min-width: 90em) { .demographic-dividend #demo-context .quote { font-size: 2.5rem; line-height: 2.5rem; } }
@media (min-width: 105em) { .demographic-dividend #demo-context .quote { font-size: 2.75rem; line-height: 2.75rem; } }
.demographic-dividend #demo-activities { background: url(img/demo-activities-sat.jpg) 60% 0 no-repeat; background-size: cover; }
.demographic-dividend #demo-results { background: url(img/demo-results.jpg) center 0 no-repeat; background-size: cover; }
.demographic-dividend #demo-results .quote { width: 90%; font-size: 1.25rem; line-height: 1.625rem; font-weight: 800; }
@media (min-width: 76.25em) { .demographic-dividend #demo-results .quote { font-size: 1.5rem; line-height: 1.75rem; } }
@media (min-width: 90em) { .demographic-dividend #demo-results .quote { font-size: 1.75rem; line-height: 2rem; } }
@media (min-width: 105em) { .demographic-dividend #demo-results .quote { font-size: 2rem; line-height: 2.25rem; } }
.demographic-dividend #demo-takeaways { background: url(img/demo-takeaways.jpg) center 0 no-repeat; background-size: cover; }
.demographic-dividend #demo-takeaways .quote { width: 90%; font-size: 1.25rem; line-height: 1.625rem; font-weight: 800; }
@media (min-width: 76.25em) { .demographic-dividend #demo-takeaways .quote { font-size: 1.5rem; line-height: 1.75rem; } }
@media (min-width: 90em) { .demographic-dividend #demo-takeaways .quote { font-size: 1.75rem; line-height: 2rem; } }
@media (min-width: 105em) { .demographic-dividend #demo-takeaways .quote { font-size: 2rem; line-height: 2.25rem; } }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= GENDER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.gender h1 { font-size: 10.625rem; }
@media (min-width: 76.25em) { .gender h1 { font-size: 13.25rem; } }
@media (min-width: 90em) { .gender h1 { font-size: 15.875rem; } }
.gender .intro .column.right .credit { z-index: 1; pointer-events: none; opacity: .5; }
.gender .intro .large-nav li a .img-holder { background-image: url(img/gen-navintro-sat.jpg); background-position: 100% center; background-size: cover; -webkit-filter: grayscale(70%); filter: grayscale(70%); }
@media (min-width: 1900px) { .gender .intro .large-nav li a .img-holder { background-position: 72% center; background-size: 80%; } }
@media (min-width: 2100px) { .gender .intro .large-nav li a .img-holder { background-position: 50% center; } }
@media (min-width: 2300px) { .gender .intro .large-nav li a .img-holder { background-position: 33% center; } }
@media (min-width: 2500px) { .gender .intro .large-nav li a .img-holder { background-position: 46% center; background-size: 70%; } }
.gender .intro .large-nav li a:hover .img-holder { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.gender #gender-context { background-image: url(img/gen-context.jpg); background-position: center center; }
.gender #gender-takeaways { background-image: url(img/gen-takeaways.jpg); background-position: 64% top; }
.gender #gender-results-engendered-approach { background-image: url(img/gen-engendered.jpg); }
.gender #gender-results { background-image: url(img/gen-results-sat.jpg); background-position: right top; }
.gender #sub-section02 .img-cap { background-image: url(img/gen-FGMC-Infographic.gif); background-position: 0 0; background-size: 100%; }
.gender #sub-section03 .img-cap { background-image: url(img/gen-journalists.jpg); background-position: 0 0; }
.gender #sub-section05 .summary { padding-bottom: 100px; }
.gender #sub-section05 .img-cap { background-image: url(img/gen-multimedia.jpg); background-position: center -15px; }
.gender #sub-section05 .credit { bottom: 80px; }
@media (min-width: 1120px) { .gender #sub-section05 .credit { bottom: 60px; } }
@media (min-width: 105em) { .gender #sub-section05 .credit { bottom: 70px; } }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= INDEX PAGE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.index .page-wrapper > .bin { padding: 0; }
.index .hgroup { top: auto; -webkit-transform: translateY(0); transform: translateY(0); padding: 0 60px; text-align: center; }
@media (min-width: 76.25em) { .index .hgroup { padding: 0 85px; } }
@media (min-width: 90em) { .index .hgroup { padding: 0 110px; } }
@media (min-width: 105em) { .index .hgroup { padding: 0 148px; } }
.index h1 { font-size: 15rem; line-height: 0.7em; letter-spacing: 0.01rem; }
@media (min-width: 76.25em) { .index h1 { font-size: 17.5rem; } }
@media (min-width: 90em) { .index h1 { font-size: 20.625rem; } }
@media (min-width: 105em) { .index h1 { font-size: 22.5rem; } }
.index h3 { margin: 0 -50px 0 0; color: #00457e; font-weight: 500; }
@media (min-width: 76.25em) { .index h3 { margin-right: -75px; } }
@media (min-width: 90em) { .index h3 { margin-right: -90px; } }
@media (min-width: 105em) { .index h3 { margin-right: -112px; } }
.index section { height: 100%; }
.index .h1-extra { display: block; margin-bottom: 15px; padding-bottom: 6px; font: 600 3.75rem "Tungsten", helvetica, arial, sans-serif; letter-spacing: 0.01rem; text-transform: uppercase; border-bottom: 3px solid #00457e; }
@media (min-width: 76.25em) { .index .h1-extra { padding-bottom: 0; font-size: 4.5rem; } }
@media (min-width: 90em) { .index .h1-extra { font-size: 5.25rem; } }
@media (min-width: 105em) { .index .h1-extra { font-size: 5.9375rem; } }
.index .subhead { margin-bottom: 0px; font-size: 1.125rem; line-height: 21px; text-align: center; }
@media (min-width: 76.25em) { .index .subhead { font-size: 1.375rem; line-height: 25px; } }
@media (min-width: 90em) { .index .subhead { font-size: 1.5625rem; line-height: 29px; } }
@media (min-width: 105em) { .index .subhead { font-size: 1.75rem; line-height: 33px; } }
.index .column.left { padding: 0; }
.index .column.left section { padding: 113px 0 0 0; }
.index .column.right { -webkit-transition: none; -moz-transition: none; transition: none; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); margin: 40px 0 0; height: 100%; }
.index .showcase-intro { margin-bottom: 30px; padding: 0 60px; }
@media (min-width: 76.25em) { .index .showcase-intro { padding: 0 75px; } }
@media (min-width: 90em) { .index .showcase-intro { padding: 0 90px; } }
@media (min-width: 105em) { .index .showcase-intro { padding: 0 112px; } }
@media (min-width: 76.25em) { .index .showcase-intro p { font-size: 0.875rem; line-height: 16px; } }
@media (min-width: 90em) { .index .showcase-intro p { font-size: 1rem; line-height: 18px; } }
.index .logo-block { position: static; bottom: auto; margin-bottom: 24px; }
.index .scroll-more { margin: 0 auto; cursor: pointer; }
.index .scroll-more img { display: block; margin: 0 auto; }
.index .about { margin-bottom: 90px; padding: 0 60px; }
@media (min-width: 76.25em) { .index .about { padding: 0 75px; } }
@media (min-width: 90em) { .index .about { padding: 0 90px; } }
@media (min-width: 105em) { .index .about { padding: 0 112px; } }
.index .about h3 { margin-bottom: 9px; padding-bottom: 6px; border-bottom: 2px solid #dad46d; }
.index .credits h3 { padding: 0 0 3px 60px; }
@media (min-width: 76.25em) { .index .credits h3 { padding: 0 75px 6px; } }
@media (min-width: 90em) { .index .credits h3 { padding: 0 90px 6px; } }
@media (min-width: 105em) { .index .credits h3 { padding: 0 112px 6px; } }
.index .credits p { font: 300 0.75rem "proxima-nova", helvetica, arial, sans-serif; line-height: 16px; }
@media (min-width: 76.25em) { .index .credits p { font-size: 0.9375rem; line-height: 1.25rem; } }
@media (min-width: 90em) { .index .credits p { font-size: 1.125rem; line-height: 1.5rem; } }
.index .credits a { color: #eff6e0; text-decoration: none; font-weight: 300; }
.index .credits a:hover { text-decoration: underline; }
.index .credits .summary { padding: 20px 50px 20px 60px; min-height: 0 !important; color: #eff6e0; background: #0086b2; }
.index .credits .summary::after { clear: both; content: ""; display: table; }
@media (min-width: 76.25em) { .index .credits .summary { padding: 25px 75px; } }
@media (min-width: 90em) { .index .credits .summary { padding: 30px 90px; } }
@media (min-width: 105em) { .index .credits .summary { padding: 36px 112px; } }
.index .credits .summary p { color: #eff6e0; font-weight: 300; letter-spacing: 0.025em; }
@media (min-width: 105em) { .index .credits .nameaddr { line-height: 1.5rem; } }
.index .credits .orgname { font-weight: 800; }
@media (min-width: 105em) { .index .credits .orgname { font-size: 1.5rem; line-height: 2rem; } }
.index .credits .site { font-size: 0.875rem; }
@media (min-width: 105em) { .index .credits .site { font-size: 1.5rem; line-height: 2rem; } }
.index .credits .contact-info { display: block; }
.index .credits .contact-info::after { clear: both; content: ""; display: table; }
@media (min-width: 105em) { .index .credits .contact-info { line-height: 3rem; } }
.index .credits .copyright { font-size: 0.6875rem; }
@media (min-width: 76.25em) { .index .credits .copyright { font-size: 0.875rem; } }
@media (min-width: 90em) { .index .credits .copyright { font-size: 1rem; } }
@media (min-width: 105em) { .index .credits .copyright { font-size: 1.125rem; } }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= IN THE FIELD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.in-the-field h1 span { display: block; }
.in-the-field h1 span.top { font-size: 10rem; }
@media (min-width: 76.25em) { .in-the-field h1 span.top { font-size: 13rem; } }
@media (min-width: 90em) { .in-the-field h1 span.top { font-size: 15rem; } }
.in-the-field h1 span.bottom { margin-bottom: 24px; font-size: 11.1rem; font-weight: 400; letter-spacing: 0.005em; line-height: 100px; }
@media (min-width: 76.25em) { .in-the-field h1 span.bottom { margin-bottom: 36px; font-size: 14.25rem; line-height: 130px; } }
@media (min-width: 90em) { .in-the-field h1 span.bottom { margin-bottom: 48px; font-size: 16.5rem; line-height: 150px; } }
.in-the-field .intro .large-nav li a .img-holder { background-image: url(img/field-navintro-sat.jpg); background-size: cover; -webkit-filter: grayscale(70%); filter: grayscale(70%); background-size: cover; }
.in-the-field .intro .large-nav li a:hover .img-holder { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.in-the-field #field-context { background: url(img/field-context.jpg) 0 0% no-repeat; background-size: 150%; }
@media (min-width: 1050px) { .in-the-field #field-context { background-position: 0 20%; } }
@media (min-width: 76.25em) { .in-the-field #field-context { background-size: 120%; } }
.in-the-field #field-context .overlay { background-color: rgba(255, 255, 255, 0); background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 65%, white 90%); background-image: linear-gradient(to top,rgba(255, 255, 255, 0) 65%, white 90%); }
@media (min-width: 90em) { .in-the-field #field-context .overlay { background-color: rgba(255, 255, 255, 0); background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 65%, white 85%); background-image: linear-gradient(to top,rgba(255, 255, 255, 0) 65%, white 85%); } }
.in-the-field #field-context .quote { top: 25px; bottom: auto; width: 420px; font-size: 1.5rem; line-height: 2rem; }
.in-the-field #field-context .quote span { font-size: 1.5rem; line-height: 1.2em; }
@media (min-width: 76.25em) { .in-the-field #field-context .quote span { font-size: 1.75rem; } }
@media (min-width: 1445px) { .in-the-field #field-context .quote span { font-size: 2.5rem; } }
@media (min-width: 1580px) { .in-the-field #field-context .quote span { font-size: 2.75rem; } }
@media (min-width: 76.25em) { .in-the-field #field-context .quote { width: 90%; font-size: 2.25rem; line-height: 2.25rem; } }
@media (min-width: 90em) { .in-the-field #field-context .quote { font-size: 2.5rem; line-height: 2.5rem; } }
@media (min-width: 105em) { .in-the-field #field-context .quote { font-size: 2.75rem; line-height: 2.75rem; } }
.in-the-field section .impulse-info .impulse-nav li { height: 50%; }
.in-the-field #results .summary { min-height: 915px !important; }
.in-the-field #field-results { background-image: url(img/field-results.jpg); background-position: right top; }
.in-the-field #takeaways .button, .in-the-field #takeaways a.button { margin: 0 0 12px; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= MEDIA PAGE OVERRIDES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.media h1 { margin-bottom: 9px; font-size: 10.625rem; line-height: 0.75em; letter-spacing: -0.01em; }
@media (min-width: 76.25em) { .media h1 { font-size: 14rem; } }
@media (min-width: 90em) { .media h1 { font-size: 17rem; } }
@media (min-width: 105em) { .media h1 { font-size: 19rem; } }
.media .intro .large-nav li a .img-holder { background-image: url(img/media-navintro-sat.jpg); background-size: cover; -webkit-filter: grayscale(70%); filter: grayscale(70%); }
.media .intro .large-nav li a:hover .img-holder { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.media section .impulse-info .impulse-nav li { height: 50%; }
.media #context .img-cap .bin { width: 370px; }
.media #context .img-cap img { width: 100%; }
.media #media-results { background-image: url(img/media-results.jpg); background-position: right top; }
.media .takeaways .img-cap .bin { width: 560px; }
@media (min-height: 768px) { .media .takeaways .img-cap .bin { width: 100%; } }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= POLICY FELLOWS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.policy-communication-fellows h1 { margin-bottom: 6px; letter-spacing: -0.01rem; }
.policy-communication-fellows h1 span { display: block; line-height: 0.75em; }
.policy-communication-fellows h1 span.top { margin-bottom: 12px; font-size: 13.125rem; }
@media (min-width: 76.25em) { .policy-communication-fellows h1 span.top { font-size: 10.5rem; } }
@media (min-width: 90em) { .policy-communication-fellows h1 span.top { font-size: 13rem; } }
.policy-communication-fellows h1 span.long { margin-bottom: 18px; font-size: 5rem; font-weight: 400; letter-spacing: 0.005rem; }
@media (min-width: 76.25em) { .policy-communication-fellows h1 span.long { font-size: 6rem; } }
@media (min-width: 90em) { .policy-communication-fellows h1 span.long { font-size: 7.25rem; } }
.policy-communication-fellows h1 span.short { font-size: 10rem; }
@media (min-width: 76.25em) { .policy-communication-fellows h1 span.short { font-size: 10.5rem; } }
@media (min-width: 90em) { .policy-communication-fellows h1 span.short { font-size: 13rem; } }
.policy-communication-fellows .intro .large-nav li a .img-holder { background-image: url(img/pf-navintro-sat.jpg); background-position: 100% top; background-size: 60%; -webkit-filter: grayscale(65%); filter: grayscale(65%); }
@media (min-width: 1800px) { .policy-communication-fellows .intro .large-nav li a .img-holder { background-position: 95% top; } }
@media (min-width: 2100px) { .policy-communication-fellows .intro .large-nav li a .img-holder { background-position: 80% top; } }
@media (min-width: 2400px) { .policy-communication-fellows .intro .large-nav li a .img-holder { background-position: 67% top; } }
.policy-communication-fellows .intro .large-nav li a:hover .img-holder { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.policy-communication-fellows .img-quo .quote { font-size: 1.75rem; font-weight: 700; line-height: 30px; }
.policy-communication-fellows #policy-context { background-image: url(img/pf-context.jpg); }
.policy-communication-fellows #sub-section01 + .img-cap { background-image: url(img/pf-results.jpg); background-position: 100% 0; }
.policy-communication-fellows #sub-section01 + .right.column .credit { bottom: 70px; }
@media (min-width: 1368px) { .policy-communication-fellows #sub-section01 + .right.column .credit { bottom: 50px; } }
.policy-communication-fellows #sub-section03 .img-cap { background-image: url(img/pf-leaders.jpg); background-position: 50% 0; }
.policy-communication-fellows #sub-section04 .img-cap { background-image: url(img/pf-job.jpg); background-position: 10% 0; }
.policy-communication-fellows .takeaways .img-cap { background-image: url(img/pf-takeaways.jpg); background-position: 35% 0; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
= POPULATION HEALTH ENVIRONMENT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.population-health-environment h1 { margin-bottom: 6px; letter-spacing: -0.01rem; font-weight: 400; }
.population-health-environment h1 span { display: block; }
.population-health-environment h1 span.top { font-size: 6rem; }
@media (min-width: 76.25em) { .population-health-environment h1 span.top { font-size: 7rem; } }
@media (min-width: 90em) { .population-health-environment h1 span.top { font-size: 8rem; } }
.population-health-environment h1 span.bottom { font-size: 5.1rem; font-weight: 400; letter-spacing: 0.005rem; }
@media (min-width: 76.25em) { .population-health-environment h1 span.bottom { font-size: 6rem; } }
@media (min-width: 90em) { .population-health-environment h1 span.bottom { font-size: 6.75rem; } }
.population-health-environment h1 span.middle { font-size: 10rem; line-height: 110px; font-weight: 300; }
@media (min-width: 76.25em) { .population-health-environment h1 span.middle { font-size: 11.8rem; line-height: 140px; } }
@media (min-width: 90em) { .population-health-environment h1 span.middle { font-size: 13.25rem; } }
.population-health-environment .intro .large-nav li a .img-holder { background-image: url(img/phe-navintro-sat.jpg); background-size: cover; -webkit-filter: grayscale(70%); filter: grayscale(70%); }
@media (min-width: 1681px) { .population-health-environment .intro .large-nav li a .img-holder { background-size: 80%; background-position: 100% 0; } }
@media (min-width: 1900px) { .population-health-environment .intro .large-nav li a .img-holder { background-size: 70%; background-position: 82% 0; } }
@media (min-width: 2100px) { .population-health-environment .intro .large-nav li a .img-holder { background-position: 68% 0; } }
@media (min-width: 2300px) { .population-health-environment .intro .large-nav li a .img-holder { background-size: 60%; } }
@media (min-width: 2500px) { .population-health-environment .intro .large-nav li a .img-holder { background-size: 50%; } }
.population-health-environment .intro .large-nav li a:hover .img-holder { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
.population-health-environment #phe-takeaways { background-image: url(img/phe-takeaways.jpg); background-position: 64% top; }
.population-health-environment #sub-section01 + .img-cap { background-image: url(img/phe-conference.jpg); background-position: 0 0; background-size: 100%; }

.mejs-offscreen { /* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). */ position: absolute !important; top: -10000px; left: -10000px; overflow: hidden; width: 1px; height: 1px; }

.mejs-container { position: relative; background: #000; font-family: Helvetica, Arial; text-align: left; vertical-align: top; text-indent: 0; }

.me-plugin { position: absolute; }

.mejs-embed, .mejs-embed body { width: 100%; height: 100%; margin: 0; padding: 0; background: #000; overflow: hidden; }

.mejs-fullscreen { /* set it to not show scroll bars so 100% will work */ overflow: hidden !important; }

.mejs-container-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }

.mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video { width: 100%; height: 100%; }

.mejs-clear { clear: both; }

/* Start: LAYERS */
.mejs-background { position: absolute; top: 0; left: 0; }

.mejs-mediaelement { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.mejs-poster { position: absolute; top: 0; left: 0; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; }
.mejs-poster:after { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); }

:root .mejs-poster img { display: none; }

.mejs-poster img { border: 0; padding: 0; border: 0; }

.mejs-overlay { position: absolute; top: 0; left: 0; }

.mejs-overlay-play { cursor: pointer; }

.mejs-overlay-button { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 0; right: 0; margin: 0 auto !important; width: 125px; height: 125px; background: url(img/play-button.svg) no-repeat; }

.no-svg .mejs-overlay-button { background-image: url(vendor/mediaelement/bigplay.png); }

.mejs-overlay-loading { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; background: #333; background: url(vendor/mediaelement/background.png); background: rgba(0, 0, 0, 0.9); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9))); background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); background: -o-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); }

.mejs-overlay-loading span { display: block; width: 80px; height: 80px; background: transparent url(vendor/mediaelement/loading.gif) 50% 50% no-repeat; }

/* End: LAYERS */
/* Start: CONTROL BAR */
.mejs-container .mejs-controls { position: absolute; list-style-type: none; margin: 0; padding: 0; bottom: 0; left: 0; background: url(vendor/mediaelement/background.png); background: rgba(0, 0, 0, 0.7); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7))); background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); height: 30px; width: 100%; }

.mejs-container .mejs-controls div { list-style-type: none; background-image: none; display: block; float: left; margin: 0; padding: 0; width: 26px; height: 26px; font-size: 11px; line-height: 11px; font-family: Helvetica, Arial; border: 0; }

.mejs-controls .mejs-button button { cursor: pointer; display: block; font-size: 0; line-height: 0; text-decoration: none; margin: 7px 5px; padding: 0; position: absolute; height: 16px; width: 16px; border: 0; background: transparent url(vendor/mediaelement/controls.svg) no-repeat; }

.no-svg .mejs-controls .mejs-button button { background-image: url(vendor/mediaelement/controls.png); }

/* :focus for accessibility */
.mejs-controls .mejs-button button:focus { outline: dotted 1px #999; }

/* End: CONTROL BAR */
/* Start: Time (Current / Duration) */
.mejs-container .mejs-controls .mejs-time { color: #fff; display: block; height: 17px; width: auto; padding: 10px 3px 0 3px; overflow: hidden; text-align: center; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

.mejs-container .mejs-controls .mejs-time a { color: #fff; font-size: 11px; line-height: 12px; display: block; float: left; margin: 1px 2px 0 0; width: auto; }

/* End: Time (Current / Duration) */
/* Start: Play/Pause/Stop */
.mejs-controls .mejs-play button { background-position: 0 0; }

.mejs-controls .mejs-pause button { background-position: 0 -16px; }

.mejs-controls .mejs-stop button { background-position: -112px 0; }

/* Start: Play/Pause/Stop */
/* Start: Progress Bar */
.mejs-controls div.mejs-time-rail { direction: ltr; width: 200px; padding-top: 5px; }

.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a { display: block; position: absolute; width: 180px; height: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: pointer; }

.mejs-controls .mejs-time-rail .mejs-time-total { margin: 5px; background: #333; background: rgba(50, 50, 50, 0.8); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8))); background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); }

.mejs-controls .mejs-time-rail .mejs-time-buffering { width: 100%; background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 15px 15px; -moz-background-size: 15px 15px; -o-background-size: 15px 15px; background-size: 15px 15px; -webkit-animation: buffering-stripes 2s linear infinite; -moz-animation: buffering-stripes 2s linear infinite; -ms-animation: buffering-stripes 2s linear infinite; -o-animation: buffering-stripes 2s linear infinite; animation: buffering-stripes 2s linear infinite; }

@-webkit-keyframes buffering-stripes { from { background-position: 0 0; }
  to { background-position: 30px 0; } }
@-moz-keyframes buffering-stripes { from { background-position: 0 0; }
  to { background-position: 30px 0; } }
@-ms-keyframes buffering-stripes { from { background-position: 0 0; }
  to { background-position: 30px 0; } }
@-o-keyframes buffering-stripes { from { background-position: 0 0; }
  to { background-position: 30px 0; } }
@keyframes buffering-stripes { from { background-position: 0 0; }
  to { background-position: 30px 0; } }
.mejs-controls .mejs-time-rail .mejs-time-loaded { background: #3caac8; background: rgba(60, 170, 200, 0.8); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44, 124, 145, 0.8)), to(rgba(78, 183, 212, 0.8))); background: -webkit-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); background: -moz-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); background: -o-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); background: -ms-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); background: linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); width: 0; }

.mejs-controls .mejs-time-rail .mejs-time-current { background: #fff; background: rgba(255, 255, 255, 0.8); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); width: 0; }

.mejs-controls .mejs-time-rail .mejs-time-handle { display: none; position: absolute; margin: 0; width: 10px; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer; border: solid 2px #333; top: -2px; text-align: center; }

.mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; background: #eee; width: 36px; height: 17px; border: solid 1px #333; top: -26px; margin-left: -18px; text-align: center; color: #111; }

.mejs-controls .mejs-time-rail .mejs-time-float-current { margin: 2px; width: 30px; display: block; text-align: center; left: 0; }

.mejs-controls .mejs-time-rail .mejs-time-float-corner { position: absolute; display: block; width: 0; height: 0; line-height: 0; border: solid 5px #eee; border-color: #eee transparent transparent transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; top: 15px; left: 13px; }

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float { width: 48px; }

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current { width: 44px; }

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner { left: 18px; }

/*
.mejs-controls .mejs-time-rail:hover .mejs-time-handle {
	visibility:visible;
}
*/
/* End: Progress Bar */
/* Start: Fullscreen */
.mejs-controls .mejs-fullscreen-button button { background-position: -32px 0; }

.mejs-controls .mejs-unfullscreen button { background-position: -32px -16px; }

/* End: Fullscreen */
/* Start: Mute/Volume */
.mejs-controls .mejs-mute button { background-position: -16px -16px; }

.mejs-controls .mejs-unmute button { background-position: -16px 0; }

.mejs-controls .mejs-volume-button { position: relative; }

.mejs-controls .mejs-volume-button .mejs-volume-slider { display: none; height: 115px; width: 25px; background: url(vendor/mediaelement/background.png); background: rgba(50, 50, 50, 0.7); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; top: -115px; left: 0; z-index: 1; position: absolute; margin: 0; }

.mejs-controls .mejs-volume-button:hover { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; }

/*
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
	display: block;
}
*/
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { position: absolute; left: 11px; top: 8px; width: 2px; height: 100px; background: #ddd; background: rgba(255, 255, 255, 0.5); margin: 0; }

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { position: absolute; left: 11px; top: 8px; width: 2px; height: 100px; background: #ddd; background: rgba(255, 255, 255, 0.9); margin: 0; }

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { position: absolute; left: 4px; top: -3px; width: 16px; height: 6px; background: #ddd; background: rgba(255, 255, 255, 0.9); cursor: N-resize; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; margin: 0; }

/* horizontal version */
.mejs-controls a.mejs-horizontal-volume-slider { height: 26px; width: 56px; position: relative; display: block; float: left; vertical-align: middle; }

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { position: absolute; left: 0; top: 11px; width: 50px; height: 8px; margin: 0; padding: 0; font-size: 1px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #333; background: rgba(50, 50, 50, 0.8); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8))); background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); }

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; left: 0; top: 11px; width: 50px; height: 8px; margin: 0; padding: 0; font-size: 1px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #fff; background: rgba(255, 255, 255, 0.8); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); }

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { display: none; }

/* End: Mute/Volume */
/* Start: Track (Captions and Chapters) */
.mejs-controls .mejs-captions-button { position: relative; }

.mejs-controls .mejs-captions-button button { background-position: -48px 0; }

.mejs-controls .mejs-captions-button .mejs-captions-selector { visibility: hidden; position: absolute; bottom: 26px; right: -51px; width: 85px; height: 100px; background: url(vendor/mediaelement/background.png); background: rgba(50, 50, 50, 0.7); border: solid 1px transparent; padding: 10px 10px 0 10px; overflow: hidden; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }

/*
.mejs-controls .mejs-captions-button:hover  .mejs-captions-selector {
	visibility: visible;
}
*/
.mejs-controls .mejs-captions-button .mejs-captions-selector ul { margin: 0; padding: 0; display: block; list-style-type: none !important; overflow: hidden; }

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li { margin: 0 0 6px 0; padding: 0; list-style-type: none !important; display: block; color: #fff; overflow: hidden; }

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input { clear: both; float: left; margin: 3px 3px 0 5px; }

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label { width: 55px; float: left; padding: 4px 0 0 0; line-height: 15px; font-family: helvetica, arial; font-size: 10px; }

.mejs-controls .mejs-captions-button .mejs-captions-translations { font-size: 10px; margin: 0 0 5px 0; }

.mejs-chapters { position: absolute; top: 0; left: 0; -xborder-right: solid 1px #fff; width: 10000px; z-index: 1; }

.mejs-chapters .mejs-chapter { position: absolute; float: left; background: #222; background: rgba(0, 0, 0, 0.7); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7))); background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000); overflow: hidden; border: 0; }

.mejs-chapters .mejs-chapter .mejs-chapter-block { font-size: 11px; color: #fff; padding: 5px; display: block; border-right: solid 1px #333; border-bottom: solid 1px #333; cursor: pointer; }

.mejs-chapters .mejs-chapter .mejs-chapter-block-last { border-right: none; }

.mejs-chapters .mejs-chapter .mejs-chapter-block:hover { background: #666; background: rgba(102, 102, 102, 0.7); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6))); background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); background: -o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); background: -ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232); }

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title { font-size: 12px; font-weight: bold; display: block; white-space: nowrap; text-overflow: ellipsis; margin: 0 0 3px 0; line-height: 12px; }

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan { font-size: 12px; line-height: 12px; margin: 3px 0 4px 0; display: block; white-space: nowrap; text-overflow: ellipsis; }

.mejs-captions-layer { position: absolute; bottom: 0; left: 0; text-align: center; line-height: 20px; font-size: 16px; color: #fff; }

.mejs-captions-layer a { color: #fff; text-decoration: underline; }

.mejs-captions-layer[lang=ar] { font-size: 20px; font-weight: normal; }

.mejs-captions-position { position: absolute; width: 100%; bottom: 15px; left: 0; }

.mejs-captions-position-hover { bottom: 35px; }

.mejs-captions-text { padding: 3px 5px; background: url(vendor/mediaelement/background.png); background: rgba(20, 20, 20, 0.5); white-space: pre-wrap; }

/* End: Track (Captions and Chapters) */
/* Start: Error */
.me-cannotplay a { color: #fff; font-weight: bold; }

.me-cannotplay span { padding: 15px; display: block; }

/* End: Error */
/* Start: Loop */
.mejs-controls .mejs-loop-off button { background-position: -64px -16px; }

.mejs-controls .mejs-loop-on button { background-position: -64px 0; }

/* End: Loop */
/* Start: backlight */
.mejs-controls .mejs-backlight-off button { background-position: -80px -16px; }

.mejs-controls .mejs-backlight-on button { background-position: -80px 0; }

/* End: backlight */
/* Start: Picture Controls */
.mejs-controls .mejs-picturecontrols-button { background-position: -96px 0; }

/* End: Picture Controls */
/* context menu */
.mejs-contextmenu { position: absolute; width: 150px; padding: 10px; border-radius: 4px; top: 0; left: 0; background: #fff; border: solid 1px #999; z-index: 1001; /* make sure it shows on fullscreen */ }

.mejs-contextmenu .mejs-contextmenu-separator { height: 1px; font-size: 0; margin: 5px 6px; background: #333; }

.mejs-contextmenu .mejs-contextmenu-item { font-family: Helvetica, Arial; font-size: 12px; padding: 4px 6px; cursor: pointer; color: #333; }

.mejs-contextmenu .mejs-contextmenu-item:hover { background: #2C7C91; color: #fff; }

/* Start: Source Chooser */
.mejs-controls .mejs-sourcechooser-button { position: relative; }

.mejs-controls .mejs-sourcechooser-button button { background-position: -128px 0; }

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { visibility: hidden; position: absolute; bottom: 26px; right: -10px; width: 130px; height: 100px; background: url(vendor/mediaelement/background.png); background: rgba(50, 50, 50, 0.7); border: solid 1px transparent; padding: 10px; overflow: hidden; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul { margin: 0; padding: 0; display: block; list-style-type: none !important; overflow: hidden; }

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li { margin: 0 0 6px 0; padding: 0; list-style-type: none !important; display: block; color: #fff; overflow: hidden; }

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input { clear: both; float: left; margin: 3px 3px 0 5px; }

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label { width: 100px; float: left; padding: 4px 0 0 0; line-height: 15px; font-family: helvetica, arial; font-size: 10px; }

/* End: Source Chooser */
/* Start: Postroll */
.mejs-postroll-layer { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(vendor/mediaelement/background.png); background: rgba(50, 50, 50, 0.7); z-index: 1000; overflow: hidden; }

.mejs-postroll-layer-content { width: 100%; height: 100%; }

.mejs-postroll-close { position: absolute; right: 0; top: 0; background: url(vendor/mediaelement/background.png); background: rgba(50, 50, 50, 0.7); color: #fff; padding: 4px; z-index: 100; cursor: pointer; }

/* End: Postroll */
/* Start: Speed */
div.mejs-speed-button { width: 46px !important; position: relative; }

.mejs-controls .mejs-button.mejs-speed-button button { background: transparent; width: 36px; font-size: 11px; line-height: normal; color: #ffffff; }

.mejs-controls .mejs-speed-button .mejs-speed-selector { visibility: hidden; position: absolute; top: -100px; left: -10px; width: 60px; height: 100px; background: url(vendor/mediaelement/background.png); background: rgba(50, 50, 50, 0.7); border: solid 1px transparent; padding: 0; overflow: hidden; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }

.mejs-controls .mejs-speed-button:hover > .mejs-speed-selector { visibility: visible; }

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected { color: #21f8f8; }

.mejs-controls .mejs-speed-button .mejs-speed-selector ul { margin: 0; padding: 0; display: block; list-style-type: none !important; overflow: hidden; }

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li { margin: 0 0 6px 0; padding: 0 10px; list-style-type: none !important; display: block; color: #fff; overflow: hidden; }

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input { clear: both; float: left; margin: 3px 3px 0 5px; display: none; }

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label { width: 60px; float: left; padding: 4px 0 0 0; line-height: 15px; font-family: helvetica, arial; font-size: 11.5px; color: white; margin-left: 5px; cursor: pointer; }

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover { background-color: #c8c8c8 !important; background-color: rgba(255, 255, 255, 0.4) !important; }

/* End: Speed */
/* Start: Skip Back */
.mejs-controls .mejs-button.mejs-skip-back-button { background: transparent url(vendor/mediaelement/skipback.png) no-repeat; background-position: 3px 3px; }

.mejs-controls .mejs-button.mejs-skip-back-button button { background: transparent; font-size: 9px; line-height: normal; color: #ffffff; }

/* End: Skip Back */
.mejs-inner { height: 100%; }

/*# sourceMappingURL=style.css.map */