/*
Theme Name: Travers + Todd
Theme URI: https://traverstodd.com/
Author: The Travers + Todd team. Who else?
Author URI: https://traverstodd.com/
Description: This theme is like no other. Unless you're talking about a parallel universe. Then all bets are off. 
Version: 1.0
*/

@charset "utf-8";

/* CSS reset.  Why?  Because browser makers make the www difficult to style. Enough with that.  */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline: none; text-decoration:none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
input, select { vertical-align:middle; }
/* End the Reset.  Now let the games begin. */

*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box;}
 
html{-webkit-font-smoothing:antialiased;}
body{line-height:1;-webkit-text-size-adjust:none;}

body {font-family: 'Work Sans', sans-serif; background: black; }
img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle;}
p { line-height: 1.4em; margin-bottom: 1em; color: #e7e7e7; font-weight: 300; font-size: 20px; -webkit-font-smoothing: auto;}
strong {font-weight: 500;}
a { outline:none; text-decoration:none; }
a, .transition-015 {  -webkit-transition:all 0.2s;  -o-transition:all 0.2s;  transition:all 0.2s;  color: #fecd03;}
h1, h2, h3, h4, h5, h6, .quote-text p { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 600; margin-bottom: 1em; line-height: 1.3em; }
h1 {color: #fff; font-size: 60px; letter-spacing: -2pt; }
h2 {color: #fff; font-size: 36px; font-weight: 700;}
h3 { color: #fff; font-size: 30px; font-weight: 700; }
.cta {color: #fff; padding: 15px 20px; color: #fff; position: relative; display: inline-block; width: 200px; text-align: center;}
.cta:before, .cta:after { position: absolute; content: ""; width: 30px; height: 30px; -webkit-transition: all 0.4s cubic-bezier(.52,.02,0,.89); -o-transition: all 0.4s cubic-bezier(.52,.02,0,.89); transition: all 0.4s cubic-bezier(.52,.02,0,.89); }
.cta:before { left: 0; bottom: 0; border-left: 2px solid #fecd03; border-bottom: 2px solid #fecd03;}
.cta:after { right: 0; top: 0; border-right: 2px solid #fecd03; border-top: 2px solid #fecd03;}
.cta:hover:before, .cta:hover:after { width: 100%; height: 100%; border-color: #fff; }


/* reusable classes */
.no-overflow { overflow: hidden; }
.hidden, .none, .hide { display: none; }
.invisible {visibility: hidden; }

/* micro clearfix below. contains floats like .clearfix. */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }

/* need to clear floats instead of contain them? use this below. */
.clear, .clear-both { clear: both; }

/* need to float things? we got you covered. */
.left, .floatleft { float: left !important; }
.right, .floatright { float: right !important; }

/* these are for images, below. gives a nice margin. sweet. */
.alignright { float: right; margin: 0 0 15px 15px;}
.alignleft { float: left; margin: 0 15px 15px 0;}
.floatnone { float: none; }

/* need a middle-aligned header. don't write another CSS rule. just use these! */
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

/* need to add z-index?  Us these class? */
.z0 {z-index: 0;}
.z1 {z-index: 1;}
.z2 {z-index: 2;}
.z3 {z-index: 3;}
.z4 {z-index: 4;}
/* For a little extra reassurance */
.z99{z-index: 99;}

/* magic. many combinations exists with simplicity. */
.float20 { float: left; width: 20%; }
.float25 { float: left; width: 25%; }
.float33 { float: left; width: 33%; }
.float50 { float: left; width: 50%; }
.float66 { float: left; width: 66%; }
.float75 { float: left; width: 75%; }
.float80 { float: left; width: 80%; }
.inline50 { display: inline-block; width: 50%; margin-left: -4px; vertical-align: top;}

.opaque { opacity: 1.0 !important;}
.inner {width: 100%; max-width: 1200px; padding: 50px 30px; margin: 0 auto; }
.small-p { font-size: 16px; }
.vertical-middle {position: relative; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);}

.bg-cover {background-size: cover; background-position: center center; background-repeat: no-repeat;}

/* header styles */

header {height: 60px; position: absolute; top: 0; left: 0; width: 100%; z-index: 3; border-bottom: 1px solid rgba(255,255,255,0.3);}
.page-template-page-msf-private-screening header {height: 100px; background-color: rgba(255,255,255,0.2);}
header:before { content: ""; width: 100%; position: absolute;top: 0; left: 0;height: 100%;background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.3)), to(rgba(0,0,0,0.1)));background: -webkit-linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1));background: -o-linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1));background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)); z-index: -1;}
#logo {width: 265px; position: absolute; left: 20px; top: 12px;}
#logos {height: 80px; position: absolute;left: 20px; top: 10px;}
#logos a {display: inline-block;vertical-align: middle;margin-right: 30px; position: relative;height: 100%;}
.mtd-logo {padding-top: 20px;}
#logos img {max-height: 100%;}
.menu-main-nav-container {height: 100%;}
header menu {float: right; height: 100%;}
.page-template-page-private-screening menu ul{height: 100%;}

header menu li {float: left; text-align: right; height: 100%;}
header menu a {color: #fecd03; font-size: 14px; text-transform: uppercase; padding: 12px 20px; border-left: 1px solid rgba(255,255,255,0.3); display: block; height: 100%;font-weight: 600;}
header menu a:hover, .current_page_item { background: rgba(0,0,0,0.5); }
header menu a:hover { color: white; }
header menu .current_page_item a span, header menu .current_page_item a { color: white; }
header menu strong {color: #fff; text-transform: capitalize; font-size: 21px; font-weight: 100; display: block;}
.menu-item-487 a { background: rgba(65, 15, 13, 0.70); }
.menu-item-487 span { color: #ef4343; }
.sub-menu {border-bottom: 1px solid rgba(255,255,255,0.3); position: absolute; top: 60px; right: 0; width: auto; display: none;}
header menu li:hover > .sub-menu {display: block;}
.sub-menu li { border-bottom:1px solid rgba(255,255,255,0.3); float: none;}
header menu .sub-menu strong {display: inline; font-size: 12px; font-weight: bold; text-transform: uppercase;}

/* end header styles */

/* home page styles */
.home header, .home #info-bar, .home video, .home #featured-video, .home #what-if { opacity: 0.0; -webkit-transition: all 1.5s ease-in; -o-transition: all 1.5s ease-in; transition: all 1.5s ease-in; }
.home .content .inner {height: 100%;}
.home-hero{height: 100vh; position: relative; z-index: 2;}
.home-hero:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(92, 21, 19, 0.7)), to(rgba(65, 15, 13, 0.00))); background: -webkit-linear-gradient(left, rgba(92, 21, 19, 0.7), rgba(65, 15, 13, 0.00)); background: -o-linear-gradient(left, rgba(92, 21, 19, 0.7), rgba(65, 15, 13, 0.00)); background: linear-gradient(90deg, rgba(92, 21, 19, 0.7), rgba(65, 15, 13, 0.00));  }
video.fullscreen{position:fixed;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:-1;-webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
#what-if {position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);  padding: 0 30px;}
#what-if h1{color: #fff; font-size: 72px; letter-spacing: -2pt; }
#what-if h1::first-letter { font-size: 108%;}
#person {display: inline-block; color:#fecd03; font-weight: 400; line-height: 1em;}
#featured-video {width: 380px; position: absolute; bottom: 50px; left: 30px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.scrolled #featured-video {-ms-transform:translateY(0);transform:translateY(0);-moz-transform: translateY(0);-webkit-transform: translateY(0);}
#play-circle {position: absolute; width: 60px;height: 60px; right: 20px; top: 40px;border: 4px solid #fecd03; border-radius: 50%; text-align: center;}
#play-circle .ion-play {color:#fecd03; font-size: 30px; position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);}
.featured-vid-text {bottom: 0; left: 20px; position: absolute;}
.featured-vid-text h3 {font-size: 12px; color:#fecd03;margin-bottom: 0px; line-height: 1.1em; text-transform: uppercase; font-weight: 600; }
#featured-video:hover #play-circle, #featured-video:hover i, #featured-video:hover h3 { border-color: #fff; color: #fff; }
.featured-vid-text p {font-size: 21px; color: #fff; line-height: 1em; font-weight: 100; }
.callout {height: 570px; width: 25%; float: left; background-size: cover; background-position: center center}
.callout a {display: block;padding: 230px 30px 30px; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(rgba(64,15,13,0.85)), to(rgba(188,167,167,0.0))); background-image: -webkit-linear-gradient(left, rgba(64,15,13,0.85), rgba(188,167,167,0.0)); background-image: -o-linear-gradient(left, rgba(64,15,13,0.85), rgba(188,167,167,0.0)); background-image: linear-gradient(90deg, rgba(64,15,13,0.85), rgba(188,167,167,0.0));color: #fecd03; font-size: 18px; text-transform: uppercase; line-height: 30px; font-weight: 600;}
.callout a, .callout p { -webkit-transition: all 0.5s cubic-bezier(.26,.76,.51,1.03); -o-transition: all 0.5s cubic-bezier(.26,.76,.51,1.03); transition: all 0.5s cubic-bezier(.26,.76,.51,1.03); position: relative; }
.callout p { opacity: 0; text-transform: none; margin-top: 20px; }
.callout a:hover { padding-top: 50px; color: white; }
.callout a:hover p { opacity: 1.0; }
.callout a:before, .callout a:after { position: absolute; content: ""; width: 30px; height: 30px; -webkit-transition: all 1s cubic-bezier(.52,.02,0,.89); -o-transition: all 1s cubic-bezier(.52,.02,0,.89); transition: all 1s cubic-bezier(.52,.02,0,.89); }
.callout a:before { left: 0; bottom: 0; border-left: 2px solid transparent; border-bottom: 2px solid transparent;}
.callout a:after { right: 0; top: 0; border-right: 2px solid transparent; border-top: 2px solid transparent;}
.callout a:hover:before, .callout a:hover:after { width: 100%; height: 100%; border-width: 3px; border-color: #fff; }
.callout.active a {opacity: 1;-ms-transform: translateX(0);transform: translateX(0); -moz-transform: translateX(0); -webkit-transform: translateX(0);}
.callout a strong {font-size: 36px; font-weight: 300; color: #fff;text-transform: capitalize;}
.home-quotes {background-image: url('/images/home-quote-bg.jpg'); height: 100vh; background-size: cover; background-position: center center; position: relative; background-attachment: fixed; }
.page-template-page-take-action .host-screening {padding-top: 60px; height: auto; min-height: 90vh;background-image: url(/images/dots-bg.png); background-position: center center;}
.page-template-page-take-action .content {background-image: linear-gradient(#2f0c0a 0%, #120202 100%);}
.page-template-page-take-action h1 {margin-bottom: 10px;}
.page-template-page-take-action .host-screening h3 {margin-bottom: 10px;}
.take-action-copy { position: relative; z-index: 1; }
.host-screening {position: relative;background-image: url('/images/screening-bg.jpg');background-size: cover; background-position: right center; height: 485px;}
.quote {position: absolute; width: 100%;  top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); -moz-transform: translateY(-50%);-webkit-transform: translateY(-50%); opacity: 0; -webkit-transition: all 0.0s ease; -o-transition: all 0.0s ease; transition: all 0.0s ease;}
.quote .inner {width: calc(100% - 300px); margin: 0 auto;}
.quote.active-quote {opacity: 1; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#pagination {position: absolute; left: 30px; top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%); -moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; z-index: 2;  }
.quote-pag {color: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 15px; padding-left: 20px; position: relative; cursor: pointer;}
.quote-pag:before {content: ""; position: absolute;left: 0;top: 4px;border-radius: 50%; background: white; width: 6px; height: 6px;}
.quote-pag.active-pag {color: #fecd03;}
.quote-pag.active-pag:after {background: transparent; border: 1px solid white;width: 14px; height: 14px;left: -4px;top: -0;content: "";border-radius: 50%;
position: absolute;}
.home-quotes .ion-quote {font-size: 40px; color: transparent; text-shadow: 0 0 1px #fff; }
.quote-text {margin-bottom: 50px; padding: 0 100px;}
.quote-text p{font-size: 40px; font-weight: 300; font-style: italic; color: #fff; line-height: 1.2em;}
.quote h4 {font-size: 18px; font-weight: 600; color: #fff; text-transform: uppercase;}
.explore-issue {position: absolute; bottom: 80px; width: 100%;}
.explore-issue a {color: #fff; border-bottom: 1px solid #fecd03; font-size: 21px; font-weight: 400; }
.host-screening h2, .isbad-intro .float33 h2{color: #fecd03;font-size: 18px; margin-bottom: 15px; text-transform: uppercase; font-weight: 500;}
.host-screening h3, .isbad-intro .float33 h2 strong{font-size: 36px; color: #fff; letter-spacing: -1.5pt;}
.isbad-intro .float33 h2 strong {text-transform: none; display: block; line-height: 1.2em;margin-top: 20px;}
.host-screening p {font-size: 18px; color: #d3d3d3; }
.static { -webkit-transition: all 1s cubic-bezier(.5,-0.01,.25,.99); -o-transition: all 1s cubic-bezier(.5,-0.01,.25,.99); transition: all 1s cubic-bezier(.5,-0.01,.25,.99); display: block; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);}
.fade-enter, .fade-leave-to  { opacity: 0; }
.fade-enter { -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); }
.fade-leave-active { position: absolute; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
/* end home page styles */

/* footer */
.bars {height:22px;width:20px;position:relative;cursor:pointer;-webkit-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s;}
.bars.muted .bar {-webkit-animation:none!important;animation:none!important;}
.bars:hover .bar {background: #fff;}
.bar {background:#fecd03;bottom:1px;height:3px;position:absolute;width:3px;-webkit-animation:sounds 0s -.8s linear infinite alternate;animation:sounds 0s -.8s linear infinite alternate; -webkit-transition:height .4s; -o-transition:height .4s; transition:height .4s;}
.bar:first-child {left:1px;-webkit-animation-duration:474ms;animation-duration:474ms;}
.bar:nth-child(2) {left:5px;-webkit-animation-duration:433ms;animation-duration:433ms;}
.bar:nth-child(3) {left:9px;-webkit-animation-duration:407ms;animation-duration:407ms;}
.bar:nth-child(4) {left:13px;-webkit-animation-duration:458ms;animation-duration:458ms;}
.bar:nth-child(5) {left:17px;-webkit-animation-duration:.4s;animation-duration:.4s;}
@-webkit-keyframes sounds {
    0% { opacity:.35; height:3px; }
    to { opacity:1; height:22px; }
}
@keyframes sounds {
    0% { opacity:.35; height:3px; }
    to { opacity:1; height:22px; }
}
   
#info-bar {position: fixed; z-index: 5; bottom: 0; left: 0; width: 100%; height: 40px; background-color: rgba(0,0,0,0.7); border-top: 1px solid rgba(255,255,255,0.3);}
.time-count h3 {font-size: 12px; color:#f94848; text-transform: uppercase; padding: 5px 10px 5px 0; line-height: 1;}
.watch-trailer {border-right: 1px solid rgba(255,255,255,0.3);}
.watch-trailer a {height: 100%; display: block; padding: 10px 30px; color: #fff;text-transform: uppercase; font-size: 14px; font-weight: 500;}
.watch-trailer a:hover { color: #fecd03; }
.small-play {height: 20px; width: 20px; border-radius: 50%; border: 2px solid #fff; text-align: center; position: relative; display: inline-block; vertical-align: middle;}
#audio-option {border-left: 1px solid rgba(255,255,255,0.3); padding: 10px 15px;}
#audio-option i {color: #fff; font-size: 30px;}
#bite-count, #time {color: #bcbcbc; font-size: 34px; width: 100px; font-weight: 100; -moz-osx-font-smoothing: grayscale; }
#time.hours { font-size: 26px; line-height: 36px;}
.bite-count {margin-left: 20px;}
.timer-value { display: inline-block; margin: 0 5px; font-size: 2rem; font-weight: 300; }
.timer-label { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; opacity: 0.7; }
.msf-disclaimer p {font-size: 12px;}

/* explore the crisis */
.hero {background-size: cover; background-position: center center;}
.hero-bg { height: 70vh; position: absolute; width: 100%; z-index: 1; background-position: center center; }
.hero-content { position: relative; z-index: 2; }
.hero-copy { padding: 120px 30px 50px; }
.hero h1 { font-size: 62px; margin-bottom: 30px;}
.page-template-page-private-screening .hero h1 {margin-bottom: 10px;}
.hero h1:after { content: ""; border-bottom: 2px solid #fecd03; display: block; width: 100px; margin-top: 20px; opacity: 0.5;}
.page-template-page-private-screening .hero h1::after {margin-top: 10px;}
.hero-img .frame { max-width: 340px; margin: 0 auto; margin-top: 140px; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }
.bg-attach {background-size: cover; background-attachment: fixed; background-position: center center;}
.narrow {width: 66%; margin: 0 auto 50px;}
.page-template-page-take-action .narrow {margin-bottom: 30px;}
.narrow em {font-size: 48px;}
#little-dudes {text-align: center; }
.ebola-deaths, .snake-deaths {display: inline-block; vertical-align:bottom; padding: 0 10px}
.snake-deaths .little-dude {opacity: 0; -ms-transform:translateY(-20px); transform:translateY(-20px); -webkit-transform:translateY(-20px);-moz-transform:translateY(-20px); -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.snake-deaths .little-dude.active {opacity: 1; -ms-transform:translateY(0); transform:translateY(0); -webkit-transform:translateY(0);-moz-transform:translateY(0);}
.little-dudes{width: 42px; text-align: center;}
.little-dudes {margin: 0 auto 15px;}
#little-dudes h4 {color:#bbbbbb; font-size: 14px; text-transform: uppercase;}
.graphic-axis {-ms-transform: rotate(-90deg);transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom;}
.graphic-description {border-top: 1px solid rgba(255,255,255,0.3); padding-top: 15px;}
.graphic-description p {font-size: 14px; color: #919191;}
.the-shock { padding-top: 100px;}
.crisis-section {overflow: hidden; border-top: 2px solid black;}
.crisis-section .inner {padding: 120px 30px;}
.crisis-section .float66 {width: 67%;}
.crisis-content-right {padding-left: 5%; position: relative;}
.crisis-content-left, .magnitude .float66 {padding-right: 5%; position: relative;}
.crisis-content-right:before, .crisis-content-left:before {content: ""; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #fecd03; position: absolute; bottom: -50px;left: 52.5%; margin-left: -13px; }
.crisis-content-right:after, .crisis-content-left:after {content: "";width: 1px;height: 600px; bottom: -655px; left: 52.5%;margin-left: -1px;border-left: 1px dashed #fecd03;position: absolute;}
.crisis-content-left:before,.crisis-content-left:after  {left: 47.5%;}
.crisis-content-left:after {margin-left: 0;}
.who .float66:before, .who .float66:after {display: none;}
.frame {position: relative;z-index: 1; -webkit-box-shadow: 16px 16px 42px rgba(0,0,0,0.4); box-shadow: 16px 16px 42px rgba(0,0,0,0.4); max-width: 25vh;}
.frame img { position: relative; z-index: 2;}
.frame:before {position: absolute; content: ""; width: 100%; height: 100%; top: -20px; left: -20px; border: 1px solid rgba(255, 204, 2, 0.3);z-index: 0;}
.crisis-image-right .frame:before { left: 20px;}
.inner-connectors{max-width: 1200px; width: 100%; margin: 0 auto; position: relative; padding: 0 30px}
.psych-toll .float66 {padding-top: 5vh;}
.connectors {width: 36.3%; margin: 0 auto; position: relative; }
.t-connector {width: 50%; float:right; height: 50px; border-right: 1px dashed #fecd03 ; border-bottom: 1px dashed #fecd03; border-radius: 0 0 13px 0;}
.b-connector { position: relative;width: 49%;margin-top: 49px; float: left; height: 50px; border-left: 1px dashed #fecd03 ; border-top: 1px dashed #fecd03; border-radius: 13px 0 0 0;}
.b-connector:before {content: ""; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #fecd03; position: absolute; bottom: -25px; margin-left: -13px;  }
.btm-connector:before {content: ""; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #fecd03; position: absolute; right: -13px; bottom: -25px; margin-left: -13px;}
.top-connector {width: 50%; float:left; height: 50px; border-left: 1px dashed #fecd03 ; border-bottom: 1px dashed #fecd03; border-radius: 0 0 0 13px;}
.btm-connector {position: relative; width: 49%;margin-top: 49px; float: left; height: 50px; border-right: 1px dashed #fecd03 ; border-top: 1px dashed #fecd03; border-radius: 0 13px 0 0;}

/* interactive map */
#death-toll-map h2, #death-toll-map h3 { letter-spacing: -1pt;}
#death-toll-map h3 { color: #b7221c; }
.map { position: relative; }
.map-tolls span { font-size: 12px; text-transform: uppercase; font-weight: 600; color: #fecd03; }
.map-tolls p { font-size: 24px; font-weight: 300; margin-bottom: 10px; }
.map-markers { position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; }
.marker { position: absolute; border-radius: 50%; width: 16px; height: 16px; background: #fecd03; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.marker:hover, .marker.chosen { -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4);}
.marker:hover { background: white; }
.marker.usa { top: 40%; left: 17%; }
.marker.africa { top: 55%; left: 50%; }
.marker.south-america {top:61%; left: 25%;}
.marker.myanmar {top:54%; left: 75%;}
.marker.sri-lanka {top:60%; left: 70%;}
.marker.new-guinea {top:67%; left: 87%;}
.marker.india { top: 50%; left: 67%; }
.marker.china { top: 47%; left: 80%;  }
.marker.bangladesh { top: 51%; left: 73%;}
.marker.australia { top: 78%; left: 85%; }
.marker.scaled-back { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }
.marker:before { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; content: ""; border-radius: 50%; position: absolute; z-index: -1; top: -2px; left: -2px; width: 20px; height: 20px; background: rgba(254, 205, 3, 0.6); -webkit-animation: map-marker-pulse 1.5s linear infinite; animation: map-marker-pulse 1.5s linear infinite; }
.marker.chosen:before { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; background: white; }
.marker.chosen { background: red;}
.marker:nth-child(2):before,.marker:nth-child(7):before { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.marker:nth-child(3):before,.marker:nth-child(8):before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.marker:nth-child(4):before,.marker:nth-child(9):before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.marker:nth-child(5):before, .marker:nth-child(10):before  { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.marker:nth-child(6):before { -webkit-animation-delay: 1s; animation-delay: 1s; }


@-webkit-keyframes map-marker-pulse {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1.0;
    }
    100% {
      -webkit-transform: scale(3);
              transform: scale(3);
      opacity: 0.0;
    }
}
@keyframes map-marker-pulse {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1.0;
    }
    100% {
      -webkit-transform: scale(3);
              transform: scale(3);
      opacity: 0.0;
    }
}

/* victims and changemakers */
.victims-bg, .changers-bg, .about-bg, .share-bg,.solutions-bg { position: fixed; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; background-image: url(/images/victims-bg.jpg); background-size: cover; background-position: center center; }
.changers-bg {background-image: url(/images/522);}
.about-bg {background-image: url(/images/about-the-film-bg.jpg);}
.share-bg {background-image: url(/images/share-bg.jpg);}
.victims-bg.take-action { background-image:none; }
.solutions-bg { background-image: url(/images/donate-bg.jpg);  }

.page-template-page-victims .content,.page-template-page-changemakers .content ,.page-template-page-about .content, .page-template-page-share .content , page-template-page-support-solutions .content{ position: relative; z-index: 2; }
.page-template-page-victims-changemakers .map-tolls p { color: #ccc; }
.victims-panels, .changers-panels { background: rgba(0,0,0,0.5);  position: relative;}
.victims-panels .frame {width: 100%; max-width: 100%; margin-bottom: 20px;}
.gallery a {height: 100px; width: 31.33%; margin-right: 2%; overflow: hidden; border: 2px solid #fff; float: left; margin-bottom: 2%; opacity: .7; background-size: cover; background-position: center center;}
.gallery a:hover {opacity: 1;}
.victims-panel { padding:0 0 7em; }
.bio-content { padding-left: 40px; }
.bio-content p { font-size: 16px; }
.bio-content p.changer-quote  {font-size: 18px; font-style: italic;}
.bio-content h2 + p { font-size: 20px; overflow: hidden; }
.bio-stats { width: 200px; padding-top: 10px; }
.fancybox-caption {text-align: center; font-size: 18px !important;}

/* changemakers */
#all-changers {position: relative;}
.bio-content p.changer-quote {font-size: 1.6em; font-style: italic; }
.changer-bio {opacity: 0;height: 0; width: 0; overflow: hidden;}
.changer-bio h2, .quoter-content h2 {position: relative;}
.changer-bio h2:after, .quoter-content h2:after {position: absolute; bottom: -15px; left:0; width: 70px; content: "";border-top: 1px solid #fecd03;}
.changer-bio h3,.quoter-content h3 {color: #fecd03; font-size: 20px; font-weight: 600;}
.changer.float33 { cursor: pointer; position: relative; width: 29%;margin-right: 4.33%; margin-bottom: 4.33%;}
.changer.float33:nth-chld(3n) {margin-right: 0;}
.team-members .changer.float33{width: 22%; margin-right: 3%;}
.changer-grad {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(rgba(22,9,8,0.85)), to(rgba(120,113,113,0))); background-image: -webkit-linear-gradient(left, rgba(22,9,8,0.85) 0%, rgba(120,113,113,0) 100%); background-image: -o-linear-gradient(left, rgba(22,9,8,0.85) 0%, rgba(120,113,113,0) 100%); background-image: linear-gradient(90deg, rgba(22,9,8,0.85) 0%, rgba(120,113,113,0) 100%);color: #fecd03; font-size: 18px; text-transform: uppercase; line-height: 30px; font-weight: 600;}
.changer-grad:before, .changer-grad:after { position: absolute; content: ""; width: 30px; height: 30px; -webkit-transition: all 1s cubic-bezier(.52,.02,0,.89); -o-transition: all 1s cubic-bezier(.52,.02,0,.89); transition: all 1s cubic-bezier(.52,.02,0,.89); }
.changer-grad:before { left: 0; bottom: 0; border-left: 2px solid transparent; border-bottom: 2px solid transparent;}
.changer-grad:after { right: 0; top: 0; border-right: 2px solid transparent; border-top: 2px solid transparent;}
.changer-grad:hover:before, .changer-grad:hover:after { width: 100%; height: 100%; border-width: 3px; border-color: #fff; }
.changer-info {position: absolute; bottom: 15px; left: 15px; width: 100%;}
.changer-info h3, .donation-stats h3 {padding-bottom: 5px; margin-bottom: 0px; font-size: 22px; text-transform: none; font-weight: 400; letter-spacing: -1pt;}
.changer-info h4 {font-size: 16px;}
.team-members .changer-info h4 {font-size: 13px;}
.clone .changer-grad {display: none;}
.clone .changer-bio {-ms-transform: translateY(100px);transform: translateY(100px); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease; transition: opacity 0.5s ease, -webkit-transform 0.5s ease; -o-transition: opacity 0.5s ease, transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease; overflow-y: auto;}
.clone .changer-bio.active {opacity: 1; height: 100%; width: 66%;float: left; -ms-transform: translateY(0); transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);z-index: 4;} 
.cta-wht {margin-right: 30px; padding: 10px 20px; color: #fff; border: 1px solid #fff; float: left; font-weight: 500; text-transform: uppercase;}
.cta-wht:hover {background-color: #fff; color: #000;}
.open .changer-image {float: left;width: 33%;}
.clone.changer.float33 {z-index: 4; padding: 5%;background-color: rgba(0,0,0,0.95); }
#close-changers {top: 30px;right: 30px;font-size: 42px;color: #fecd03;position: fixed; cursor: pointer;z-index: 6;}
/* blog styles */

#modal {position: fixed; top: 100px; left: 50%; width: 96%; margin-left: -48%; z-index: 3;}
#fade{position: fixed; height: 100%; width: 100%; background-color: rgba(0,0,0,0.85); top: 0; left: 0; z-index: 3;}
#modal-content {width: 100%;}
.frame-wrapper {position: relative;
    overflow: hidden;
    padding-top: 56.25%;}
.vid-frame {position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;}
#close-modal {position: absolute; top: -45px; right: 0; background-color: #fecd03; color: #000; font-size: 30px; text-transform: lowercase; padding: 5px 10px; cursor: pointer;}
#modal-share {position: relative; padding-top: 10px;}
#modal-share p {color:#fecd03; font-size: 22px; font-weight: 500;}

/* about page */
.play-trailer {position: relative; width: 100%; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7); box-shadow: 0 3px 6px rgba(0,0,0,0.7); -webkit-transition: border 0.3s ease; -o-transition: border 0.3s ease; transition: border 0.3s ease; border: 5px solid #fecd03; cursor: pointer;}
.play-trailer #play-circle {height: 6vw; width: 6vw;}
.play-trailer:hover {border:5px solid #fff;}
.view-trailer {position: absolute; left: 20px; bottom: 20px;}
.view-trailer h3 {color: #fecd03; font-size: 36px; margin-bottom: 0px; -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; font-weight: 600;}
.view-trailer:hover .watch-trailer h3 {color: #fff;}
.producers {background-image: url(/images/llf-bg.jpg);background-size: cover; background-position: center center;}
.sub-hero {background-color: rgba(0,0,0,0.5);}
.two-cols {column-count:2; -moz-column-count:2;-webkit-column-count:2; column-gap: 40px; -webkit-column-gap: 40px;-moz-column-gap: 40px;}
.llf-text { padding-left: 4%;}
.llf-text h2 {margin-bottom: 10px;}
.llf-text h3 {color:#fecd03 }
.press-materials {background-image:-webkit-gradient(linear, left top, right top, from(#2F0C0A), to(#080202));background-image:-webkit-linear-gradient(left, #2F0C0A 0%, #080202 100%);background-image:-o-linear-gradient(left, #2F0C0A 0%, #080202 100%);background-image:linear-gradient(90deg, #2F0C0A 0%, #080202 100%)}
.downloads li {display: inline-block; width: 30%; margin: 0 1.5% 20px;}
.downloads .cta {font-size: 24px; width: 100%;}

/* donations */
.causes { position: relative; z-index: 2; background: rgba(0,0,0,0.5);  }
.page-template-page-no-limit-portal .causes {background: rgba(0,0,0,0.8);}
.causes .frame { max-width: 100%; margin-bottom: 50px; }
.causes .frame img { width: 100%;}
.cause { padding: 50px; display: inline-block; margin-left: -4px; width: 25%; vertical-align: top; }
.cause .frame {transition: opacity .3s ease;}
.cause:hover .frame {opacity: .7;}
.cause .cta { width: auto; font-size: 18px; }
.donation-stats { padding-top: 30px; }
.donation-stats p { font-size: 36px; font-weight: 100; margin-bottom: 0; }
.donation-stats span { color: #aaa; text-transform: uppercase; font-weight: 600; font-size: 14px; }
.donation-stats .donate-needed { color: #bbb; }
.donation-stats .donate-num { color: #888; display: inline-block; margin-top: 5px; font-weight: 400; }
.progress { background: #7b7b7b; position: relative; height: 3px; margin: 30px 0; }
.progress-bar { background: -webkit-gradient(linear, left top, right top, from(rgba(254, 205, 2, 0.25)), to(#fecd03)); background: -webkit-linear-gradient(left, rgba(254, 205, 2, 0.25), #fecd03); background: -o-linear-gradient(left, rgba(254, 205, 2, 0.25), #fecd03); background: linear-gradient(90deg, rgba(254, 205, 2, 0.25), #fecd03); position: absolute; left: 0; width: 0; top: 0; height: 100%; }
.progress span { position: absolute; top: -25px; color: #95a44e; font-weight: 200; margin-left: -10px; font-size: 14px; }
.progress-bar:after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: #fecd03; position: absolute; right: 0; -webkit-box-shadow: 0 0 5px rgba(254, 205, 3, 0.99), 0 0 5px 3px rgba(254, 205, 3, 0.8), 0 0 10px 7px rgba(254, 205, 3, 0.7); box-shadow: 0 0 5px rgba(254, 205, 3, 0.99), 0 0 5px 3px rgba(254, 205, 3, 0.8), 0 0 10px 7px rgba(254, 205, 3, 0.7); }

/* screen film */
.film-screening{ margin-top: 30px;}
.pad-left {padding-left: 4%;}
.pad-right {padding-right: 4%;}
.nf-field-label label {color:#fecd03 ; font-weight: 500; text-transform: uppercase;}
.nf-form-fields-required {color: #fff; padding-bottom: 15px;}
.input-50-left, .input-50-right {float: left; width: 48%; clear:none !important;}
.input-50-left {margin-right: 4%;}
.nf-field-element input,.field-wrap textarea {font-size: 20px; padding: 8px;font-family: 'Work Sans', sans-serif;}
.field-wrap input[type="button"]{background-color: transparent; padding: 10px 20px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer;}
.field-wrap input[type="button"]:hover {background-color: #fff;}
#more-screenings {margin-bottom: 40px;}
.screening-item {font-size: 20px; line-height: 1.3em; margin-bottom: 10px;color: #fff;}
.screening-date {width: 95px; float: left; border-right: 1px solid #fecd03;text-align: right; padding-right: 10px;}
.screening-info {width: calc(100% - 95px); padding-left: 10px; float: left;}
.screening-info span {font-size: 16px;}

/* share page */
.single-share_posts .content { background-size: cover; background-position: center top; padding-top: 50px;}
.single-share_posts .inner { max-width: 1600px; }
.single-share_posts .map-tolls { margin: 1em 0;}
.single-share_posts h1 { font-size: 36px; margin-bottom: 0.5em; }
.single-share_posts h1:after { display: none;  }
.page-template-page-share .hero {background-color: rgba(0,0,0,0.7);}
.page-template-page-share .hero-copy {padding: 90px 30px 0; max-width: 800px; width: 100%; margin: 0 auto; text-align: center;}
.page-template-page-share .hero-copy p {font-size: 18px;} 
.page-template-page-share .hero-copy h1 {font-size: 40px;}
.page-template-page-share .hero-copy h1:after {display: none;}
.share-item {margin-bottom: 20px; border-bottom: 1px dotted #555; padding-bottom: 15px; }
.share .inner {padding-top: 10px; padding-bottom: 10px;}
.share-info {padding-left: 3%;}
.cta-yellow {color: #fecd03; border-color: #fecd03;}
.share-info h3 {margin: 0.5em 0; }
.share-info h3 a:hover {color: white; }
.news-share .share-info h3 {font-size: 26px;}
.share-image img {max-width: 300px;}
.news-share .share-item {display: inline-block; width: calc(50% - 4px); vertical-align: top; margin-bottom: 40px; text-align: left; padding-left: 0px;}
.news-share h4 {color: #fecd03; text-transform: uppercase;}
.news-image {margin-right: 15px; margin-bottom: 15px;}
.feat-img, .video-link { background-size: cover; background-position: center center; height: 220px; opacity: 0.8; position: relative; }
.video-link { display: block; }
.video-link i, .feat-img { transition: all 0.4s ease;}
.video-link i {color: #FECD03; position: absolute; font-size: 48px; left: 50%; margin-left: -35px; top: 30%; border-radius: 50%; border: 2px solid; width: 70px; height: 70px; line-height: 70px; text-align: center; padding-left: 10px; }
.video-link:hover i { color: white; }
.video-link:hover .feat-img { opacity: 0.4;; }
.feat-thumb { max-width: 33.333%;}
.share-info p { font-size: 16px; }
.share-media { padding-right: 20px;}
.share-media iframe { width: 100%; height: calc(50vw *.43); max-height: 310px;}
.share-content { padding-left: 20px;}
.page-template-page-private-screening h1, .page-template-page-no-limit-portal h1 { font-size: 48px; }
.share-portal .callout { height: 130px; width: 32.3333%; margin-right: 1%; }
.share-portal .callout a {font-size: 14px; padding: 80px 10px 10px; line-height: 1; }
.share-portal .callout strong {font-size: 24px; font-weight: 400;  }
.addthis_toolbox { margin-bottom: 20px;}
.addthis_toolbox span { vertical-align: middle; }
.addthis_toolbox a { padding: 3px 15px 3px 10px !important; color: white; text-transform: uppercase; font-weight: 600; font-size: 16px; margin-right: 10px; }
.addthis_button_twitter { background: #1da1f2; }
.addthis_button_facebook { background: #3B5998; }
.addthis_button_email { background: #848484; }

.page-template-page-private-screening .content{height: 100%; min-height: 100vh; background-size: cover;position: relative; background-repeat: no-repeat;}
.page-template-page-no-limit-portal .hero-content, .page-template-page-private-screening .hero-content {padding-top: 100px;}
.page-template-page-no-limit-portal .share-media {padding-top: 40px;}
.page-template-page-no-limit-portal .share-media h2{ font-size: 24px; margin-bottom: 10px;}
.page-template-page-private-screening header menu {display: none;}
.expiration-content {height: 600px; position: relative;}
.share-content h3 { margin-bottom:3px; }
.page-template-page-private-screening p,.page-template-page-no-limit-portal p { font-size: 16px; color: rgb(204, 204, 204); }
.page-template-page-private-screening .share-content .share-item { border-bottom-color: rgba(254, 205, 3, 0.6); }
.share-portal .share-item a strong, .extra-cta a, #more-listings-btn { color: white; border-bottom: 1px solid rgb(254, 205, 3); transition: color 0.2s; font-weight: bold; }
 #more-listings-btn {display:inline-block; margin-bottom: 50px; padding-top: 20px; cursor: pointer;}
.share-portal .share-item a:hover strong, .extra-cta a:hover { color: rgb(254, 205, 3);  }
.private-viewing-form {width: 320px; margin: 0 auto; text-align: left;}
.private-viewing-form sup {font-size: .6em;}
.private-viewing-form p small {font-size: 14px; line-height: 1.1em;}
.private-viewing-form label {color:#f5cc02; font-weight: 600; font-size: 16px; text-align: left;}
input[type="text"], input[type="email"], input[type="password"] {font-size: 16px; padding: 5px 10px; margin-bottom: 20px; text-align: left;}
.private-viewing-form input {width: 100%;}
.private-viewing-form input[type="submit"] {background-color: transparent;box-shadow: none;border: 2px solid #fff;font-size: 18px;text-transform: uppercase;color: #fff;padding: 10px 10px;margin-top: 20px; transition: background 0.3s ease; margin-bottom: 20px;}
.private-viewing-form input[type="submit"]:hover {background-color: #fff; color: #000;}
.login-screen {padding-top: 100px; padding-bottom: 100px;}
.page-template-page-private-screening .login-screen h1 {color: #f5cc02;}
.viewing-org-logo {margin-bottom: 30px;}
.viewing-org-logo img {max-width: 300px; max-height: 100px;}
.org-logo {max-width: 200px; width: 100%; margin: 0 auto 30px; }
.count-down-timer {font-size: 28px; color: #fff;}
.causes h2 {padding: 30px 0;}
.share-content h2 {font-size: 24px; margin-bottom: 20px;}
.thumb-wrap {margin: 0 2px 20px; width: calc(33% - 4px); float: left; text-align: center; }

/* community prevention videos */
.hero.hero--community-prevention {background-image: url(/images/host-screening-bg.jpg); position: relative;}
.hero--community-prevention .hero-copy {padding-top: 80px;}
.hero.hero--community-prevention:before {content:''; position: absolute; width:100%; height: 100%; display:block; background-color: rgba(34, 4, 4, 0.6);}
.hero.hero--community-prevention h1 {font-size: 30px;}
.hero--community-prevention p {font-size: 16px;}
.vid-areas-title {margin-bottom: 20px;}
.vid-areas-title img, .community-vids h2 {display:inline-block; vertical-align: middle; margin-bottom: 0px;}
.vid-areas-title img {width: 100px; padding-right: 10px;}
.community-vids {margin-bottom: 40px;}
.community-vids h2 {line-height: 24px;}
.community-vids h2 small {font-size: 18px; font-weight: 400;}
.vid-language {padding: 0 2% 20px;}
.stream-box {border: 2px solid #fecd03; padding: 15px; height: 85px; margin-bottom: 20px; display:flex; align-items: center; cursor: pointer; transition: all 0.3s ease;}
.stream-box h3,.stream-box .ion-play {display: inline-block; vertical-align: middle; margin: 0; transition: all 0.3s ease;}
.stream-box h3 {font-size:18px;}
.vid-language h4 {color: #fff; margin-bottom: 5px;}
#loading {color: #fff; font-size: 24px; text-align: center;}
.stream-box .ion-play {font-size: 40px; color: #fecd03; margin-right: 20px;}
.stream-box:hover {background-color:#fecd03; }
.stream-box:hover .ion-play, .stream-box:hover h3 {color: #000;}
.vid-downloads li {line-height: 1.4em; margin-bottom: 5px;font-size: 16px}
.vid-downloads li small {font-size: .7em;}
.vid-downloads a:hover {text-decoration: underline;}
#vid-lang {font-size: 24px; color: #fff;}
.relative-frame {max-width: 400px; margin: 0 auto; position: relative;}
#frame-box {position: relative; overflow: hidden; padding-top: 56.25%;}
.responsive-iframe {position: absolute;    top: 0;left: 0;width: 100%; height: 100%; border: 0;}
.vid-lang {font-size: 24px; color: #fff; padding: 10px 20px;}
.page-template-page-community-prevention #modal-content{width: 60%; position: relative; margin: 0 auto;}
.additional-langs h3 {font-size: 16px; margin-bottom: 5px; font-weight: 600;}
.additional-langs ul {padding-left: 20px;}
.additional-langs li {font-size: 16px; color: #fff; list-style: disc; line-height: 1.5em;}
/* msf private viewing */
.page-template-page-msf-private-screening h1 {margin-bottom: 20px;}
.page-template-page-msf-private-screening .content.pass-protect {background-size: cover;}
.page-template-page-msf-private-screening .login-screen {padding: 120px 0 100px;}
.page-template-page-msf-private-screening .hero-content.inner {padding-top: 150px;}
.page-template-page-no-limit-portal .content {background-repeat: no-repeat;background-size: cover;}
.msf-private p {font-size: 16px;}
.form-max-w small {color: #fff;font-size: .8em;}
.private-viewing-form.msf-private label {display: block; margin-bottom: 0; line-height: 1em;}
.page-template-page-msf-private-screening .share-content h1 {font-size: 40px;} 
.private-viewing-form.msf-private {max-width: 600px; margin: 0 auto; width: 100%;}
.form-max-w {max-width: 320px; margin: 0 auto; width: 100%;}
.msf-quote .float66 {padding-left: 40px;}
.quoter-content p{font-size: 32px; font-style: italic;}
.msf-quote {background-color: rgba(0,0,0,0.5);}

.thumb-wrap h3 {font-size: 16px;color: #fecd03;}
.share-thumb {height: 8vw; }
.share-thumb a {display: block; height: 100%; transform: opacity 0.3s ease;}
.thumb-wrap:hover a {opacity: .8;}

.share-content .share-info {float: left; width: calc(100% - 180px);}
.share-content .share-info h3 {font-size: 24px; margin-top: 0px;}
.share-content .share-item {    margin-bottom: 15px; border-bottom: 1px dotted #fecd03; padding-bottom: 15px;}
.share-content .share-item:last-child {border-bottom: none;}

.page-template-page-support-solutions .take-action-copy.inner {padding:80px 30px 20px}
.page-template-page-support-solutions .take-action-copy.inner p {font-size: 16px;}
h1#donations {margin-bottom: 20px;	}

/* ISBAD page */
.page-template-page-isbad header {z-index: 4;}
.isbad-hero,.isbad-intro {position: relative;}
.isbad-hero {position: relative; z-index: 3;}
.max-copy {width: 100%; max-width: 800px;}
#toggle-isbad-form {position: relative;}
#toggle-isbad-form span { cursor: pointer;}
#toggle-isbad-form span:hover {color:#fecd03 ; border-color:#fff;}
.isbad-ctas {padding-top: 110px;}
.take-action-wrapper {margin-bottom: 40px;}
.isbad-ctas h2 {margin-bottom: 5px;}
.isbad-cta {margin-bottom: 10px;}
.isbad-hero:before {content:'';position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); background-image: linear-gradient(rgba(142, 18, 18, 0.4) 0%, rgba(41, 3, 3, 0.4) 100%)}
.isbad-logo {padding: 100px 30px 50px 30px;}
.isbad-form {background-color: rgba(104, 9, 9, 0.9); padding: 20px; position: absolute;  margin-top: 20px;z-index: 3; margin-right: 20px;}
.isbad-form-intro {padding-top: 10px;}
.isbad-form-intro p {font-size: 16px;}
.isbad-logo h1 {margin-bottom: 20px;}
.isbad-logo h1:after {display: none;}
.isbad-logo p {font-size: 18px;}
.isbad-logo h1 + p {font-size: 20px;}
.isbad-logo img {max-width: 310px;}
.logos .inner {position: relative; padding: 0 30px 50px;}
.logo {display: inline-block; width: 200px; margin: 10px 10px; vertical-align: middle;}
.logo img {max-height: 150px;}
.isbad-intro:before {content: ''; background-color: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.isbad-intro .inner {position: relative;}
.isbad-intro .cta {margin-bottom: 20px;}
#death-toll-map.org-markers h3 {margin-bottom: 10px;}
#org-info h4 {font-size: 12px;text-transform: uppercase; font-weight: 600;color: #fecd03;margin-bottom: 0px;}
#org-info h5 {font-size: 20px; line-height: 1.4em; margin-bottom: 10px; font-weight: 500; color: #fff;}
#org-info p {font-size: 16px; line-height: 1.4em;}
.org-markers .inner {padding-bottom: 50px;}
/* map for isbad page */
.page-template-page-isbad .map { position: relative; overflow: hidden; border-right: 30px solid black; }
.page-template-page-isbad .map-region-clicker { position: absolute; opacity: 0.0; background: white; z-index: 5;cursor: pointer; }
.page-template-page-isbad .showing-region .map-region-clicker { pointer-events: none; }
.page-template-page-isbad .hint { position: absolute; z-index: 4; color: white; width: 100%; top: 30px; left: 50%; transform: translateX(-50%); }
.page-template-page-isbad .map-europe { top: 30%; left: 43%; width: 15%; height: 15%;}
.page-template-page-isbad .map-central-america { top: 43%; left: 13%; width: 15%; height: 20%;}
.page-template-page-isbad .map-south-america { top: 63%; left: 23%; width: 15%; height: 37%;}
.page-template-page-isbad .map-africa { top: 47%; left: 43%; width: 20%; height: 37%;}
.page-template-page-isbad .map-india { top: 45%; left: 63%; width: 20%; height: 20%;}
.page-template-page-isbad .map-australia { top: 70%; left: 78%; width: 21%; height: 21%;}
.page-template-page-isbad .map-markers { position: absolute; z-index: 2; width: 100%; height: auto; top: 0; left: 0; transition: all 0.6s cubic-bezier(.77,0,.18,1); }
.page-template-page-isbad .map-markers img { width: 100%; }
.page-template-page-isbad .map-markers[data-region="europe"] { width: 250%; top: -40%; left: -70%; }
.page-template-page-isbad .map-markers[data-region="central-america"] { width: 250%; top: -80%; left: 0%; }
.page-template-page-isbad .map-markers[data-region="south-america"] { width: 230%; top: -143%; left: -30%; }
.page-template-page-isbad .map-markers[data-region="africa"] { width: 230%; top: -100%; left: -70%; }
.page-template-page-isbad .map-markers[data-region="india"] { width: 250%; top: -100%; left: -130%; }
.page-template-page-isbad .map-markers[data-region="australia"] { width: 250%; top: -130%; left: -170%; }


/* footer */
footer { background: rgba(0,0,0,0.95); position: relative;}
footer h3 {font-size: 20px; margin-bottom: 10px;}
.page-template-page-msf-private-screening footer h3 {font-size: 16px;}
footer .inner {padding: 30px 30px 50px;}
#show-foot-form {cursor: pointer;}
.contact-info a {color: #fff; font-size: 14px;}
.contact-emails {padding-right: 30px;}
.contact-emails a {color: #fecd03; font-weight: 500;}
.social-media {text-align: right;}
.social-media li {float: left; float: right; margin-left: 30px;}
.social-media a {color: #fecd03; font-size: 30px;}
.video-share, .image-share, .news-share {background-color: rgba(0,0,0,0.7);}
/* Media Queries. Use these, modify breakpoints, add, or delete.  */
@media (max-width: 1200px){
    .cause { width: 33%; }
     #nav-shower {display: block; color: #fff; font-size: 40px; position: absolute; right: 20px; top: 10px; cursor: pointer;}
    header menu {top: 61px; right: 0; position: absolute; float: none; height: auto;}
    header menu ul {height: auto; overflow: hidden; }
    header menu li {float: none; background-color: rgba(0,0,0,0.95); border-left: none; -webkit-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); position: relative; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
     header menu a {border-right: 3px solid transparent;}
    header menu li.active {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
    header menu a:hover, .current_page_item {background-color: rgba(0,0,0,0.95); border-right: 3px solid #fff}
    .sub-menu:before {content: ''; width: 40px; height: 1px; background-color: #fecd03;right: 30px; top: 0; position: absolute; z-index:2; }
    .sub-menu {position: relative; top: auto; display: block;}
     header menu .sub-menu li {border-bottom: none;} 
}
@media (max-width: 1024px){
   
    .home-quotes {height: 70vh;}
    .quote-text {padding: 0 30px;}
    .quote-text p {font-size: 34px;}
    
    .share-content .share-info h3 {font-size: 18px;}
    .fw-1024 {width: 100%;float: none;}
}

@media only screen and (max-width:800px) {
    .cause { width: 50%; }
    .hiden800 {display: none;}
	.home-hero {height: 600px;}
    #what-if {top: 40%;}
    #what-if h1 {font-size: 50px;}
    video.fullscreen {top: 0; left: 0; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); min-height: 600px;}
    .home-quotes {height: 500px; }
    .explore-issue {bottom: 30px;}
    .quote-text p {font-size: 28px;}
    .gallery a {height: 70px;}
    #pagination {display: none;}
    .callout {width: 50%; height: 500px;}
    .quote-pag {position: relative; }
	.quote-pag::before {top: 5px; left: -10px; position: absolute;}
	.quote .inner {width: 100%;}
	.hero h1 {font-size: 50px;}
	.hero-img .frame {max-width: 240px;}
	.frame {max-width: 20vh}
	.map.float66,#death-toll-map .float33 {width: 100%;}
	.map-tolls {width: 50%; float: left;}
	.bio-stats .map-tolls {width: 100%; float: none;}
	.narrow {width: 100%; margin-bottom: 0px;}
	.hero-copy .float50 {width: 100%;}
	.hero-copy .float50.community-vids {width:50%; float:left;}
	.vid-language.inline50 {width:100%; display:block;}
	.bio-content p.changer-quote {font-size: 1.3em;}
	.donate-btn {clear: left;}
	.page-template-page-about .float33.right {width: 100%; float: none;}
	.team-members .changer.float33 {width: 47%; margin-right: 3%;}
	.team-members .changer.float33:nth-child(2n) {margin-right: 0px;}
	
	.viewing-org-logo {text-align: center;}
	.float50.share-media {width: 100%;}
	.float50.share-content {width: 100%;}
	.counter {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc;}
	.float50.share-content {padding-left: 0px;}
	.share-media iframe {height: 47vw}
	.share-thumb {height: 16vw; } 
	.viewing-org-logo img {max-height: 70px;}
	
	.page-template-page-take-action .screening-link .float33 {width: 100%; display: block; float: none;}
	
	.isbad-logo.float66, .isbad-ctas.float33 {width: 100%; float: none; padding-left: 15px; padding-right: 15px;}
	.isbad-ctas.float33 {padding-top: 40px;	padding-bottom: 40px;}
	.logo {width: 150px;}
	.get-involved-wrapper, .take-action-wrapper {width: 50%; float: left;}
	
	.quoter-content p {font-size: 22px;}
	.float50.msf-disclaimer {float: none; width: 100%; text-align: center;}
	.page-template-page-msf-private-screening .social-media.float25 {width: 50%;}
}
@media only screen and (max-width:700px) {
	#info-timer {display: none;}	
}
@media only screen and (max-width:600px) {
	.inner {padding: 50px 30px;}
	.float33, .float66 {width: 100%;}
	.bio-content.float66 {padding-left: 0px;}
	.home-hero {height: 500px;	}
	.callout {width: 100%; height: 400px;}
	.callout a {padding-top: 50px;}
	.callout a p {opacity: 1;}
	.quote-text {width: 100%; padding: 0; }
	.quote-text p {font-size: 20px;}
	.quote h4 {font-size: 15px;}
	.host-screening .float50 {display: block; width: 100%; float: none;}
	.host-screening {height: auto;}
	#what-if h1 {font-size: 35px;}
	.home #featured-video {width: 250px;}
	#play-circle {display: none;}
	.hero-copy {width: 100%;}
	.hero-img {display: none;}
	.frame {max-width: 300px; margin: 0 auto;}
	.crisis-section .float66, .crisis-section .float33 {width: 100%;}
	.connectors {display: none;}
	.explore-issue {bottom: 20px;}
	.crisis-content-right::after, .crisis-content-left::after {display: none;}
	.crisis-content-right::before, .crisis-content-left::before { display: none;}	
	.victims-panel .float33.frame {max-width: 300px; margin: 0 auto; width: 100%;}
	.crisis-image-right .frame {margin-bottom: 30px;}
	.inner {padding: 80px 25px;}
	#logo {width: 215px; left: 0; top: 15px;}
	.changer.float33 {width: 48%; margin-right: 4%;}
	.changer.float33:nth-child(2n) {margin-right: 0px;}
	.open.clone .changer-image {width: 100%; max-width: 200px; }
	.clone .changer-bio.active {width: 100%; float: none; padding-left: 0px; height: auto; padding-bottom: 100px;}
	.clone.changer.float33 {overflow: scroll;	}
	.downloads li {display: block; margin: 0 auto; width: 300px; margin-bottom: 15px;}
	.producers .float33 {margin-bottom: 20px;}
	.gallery a {height: 100px;}
	.bio-stats {width: 100%; float: none;}
	.bio-stats .map-tolls {width:49%;margin-right: 1%; float: left;}
	.victims-panels .frame {max-width: 320px;}
	.request-film .float50 {width: 100%; float: none; margin-right: 0;margin-bottom: 20px;}
	
/* 	msf private */
	.quoter-headshot.float33 {float: none; display: block; margin: 0 auto; max-width: 300px; margin-bottom: 20px;} 
	#logos {width: 100%; text-align: center; left: auto;}
	#logos a {width: 50%; float: left; text-align: center; margin: 0; padding: 0 5px;}
	#logos a.mtd-logo {padding-top: 20px;}
	
	@media only screen and (max-width: 500px){
	.cause {width: 100%;}
	.donate-btn {width: 100%;}
	.donate-btn p.right { float: none; width: 100%;}
	.share-thumb, .share-content .share-info {width: 100%; float: none;}
	.get-involved-wrapper, .take-action-wrapper {width: 100%; float: none;text-align: center;	}
	.logo {width: 120px;}
	.hero-copy .float50.community-vids.pad-left, .hero-copy .float50.community-vids.pad-right {width:100%; padding-right: 0px; padding-left:0px;}
}
@media only screen and (max-width:400px) {
	.hero h1 {font-size:36px;}
	.hero-copy {padding: 100px 15px 100px;}
	.the-shock {padding-top: 0px;}
	.changer.float33, .team-members .changer.float33  {width: 100%; margin-right: 0px;	}
	.gallery a {height: 70px;} 
	.thumb-wrap {width: 100%;}
	.share-thumb {height: 42vw; margin-bottom: 10px;}
}