/***************************************
Custom Styling on LLS.org
Last Updated: 9/23/20
***************************************/



/** Typography and Accents
***************************************/

/* Import LLS Icon Font */
@import url("lls-campaign-icon-font.css");


.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}
.capitalize {text-transform: capitalize;}

ul {font-weight:300;} /* makes font weight similar to paragraph weight */

.hr-red-1 {border-top: 1px solid #CC0000;}

/*************************************** 
END Typography and Accents ******/





/** Color Palette
***************************************/
.red {color: #CC0000;}
.red-dark {color: #AA0000;}
.yellow {color: #FFC425;}
.black {color:#000;}
.grey {color:#666;}
.white {color:#fff;}

.bg-red {background-color: #CC0000;}
.bg-red-dark {background-color: #AA0000;}
.bg-yellow {background-color: #ffc425;}
.bg-black {background-color:#000;}
.bg-lighter-grey {background-color: #fafafa;}
.bg-light-grey {background-color: #f0f0f0;}
.bg-grey {background-color: #f4f4f4;}
.bg-dark-grey {background-color: #8d8d8d;}
.bg-darkest-grey {background-color: #282828;}


/** GELS
Used to create red gel multiply effect over background images with opaque white text
***************************************/
.gel {position: relative;}

.gel:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #CC0000;
    mix-blend-mode: multiply;
    z-index: 0;
}
.gel p, .gel h1, .gel h2, .gel h3, .gel h4, .gel h5, .gel h6 {
    color: #fff;
    z-index: 2;
    position: relative;
}
/* Add to Make Gels Transparent */
@media only screen and (max-width: 767px) {
  .gel-clear.gel:before {
    background: transparent !important;
  }
}
/* END Gels */

/*************************************** 
END Color Palette ******/





/** Sections / Container Styles
***************************************/
.section {text-align:left; padding:40px 0px;}
.section-center {text-align:center; padding:40px 0px;}
.section-nopadding {padding:0px;}
.section-sm {padding:40px 0px;}

/* Review and remove below:; */
.section-grey-lt {background-color:#fafafa;}
.section-grey-md {background-color:#ebebeb;}
.section-black {background-color:#000;}
.section-red {background-color:#CC0000;}
.section-red-dark {background-color:#AA0000;}
.section-yellow {background-color:#ffc425;}
/* Review and remove ENDS */

@media only screen and (max-width: 767px) {
	.section {padding:30px 0px;}
	.section-sm {padding: 15px 0px;}
}
/*************************************** 
END Sections / Container ******/






/** Buttons (Additional)
***************************************/
.btn-transparent,
.btn-transparent:focus {
  background-color: transparent;
  border: 3px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  font-weight: 400!important;
  letter-spacing: 1px;
}
.btn-transparent:hover,
.btn-transparent:active,
.btn-transparent:active:focus,
.btn-transparent:active:hover,
.btn-transparent.active {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.25);
  border-color: #FFF;
  color: #fff!important;
}
@media only screen and (max-width: 767px) {
  .btn-transparent,
  .btn-transparent:focus {
    background-color: rgba(255, 255, 255, 0.25);
  }
}

/* For Transparent BTN on mobile white bg */
@media only screen and (max-width: 767px) {
    .btn-transparent-mobile,
    .btn-transparent-mobile:focus {
      background-color: #CC0000;
      border-color: #CC0000;
      color: #FFF;
      text-transform: uppercase;
    }
    .btn-transparent-mobile:hover,
    .btn-transparent-mobile:active,
    .btn-transparent-mobile:active:focus,
    .btn-transparent-mobile:active:hover,
    .btn-transparent-mobile.active {
      background-color: #AE0000;
      border-color: #AE0000;
      color:#FFF;
    }
} /* END */


.btn-white,
.btn-white:focus {
  background-color: #FFF;
  border: 3px solid #FFF;
  color: #CC0000;
  text-transform: uppercase;
  font-weight: 400!important;
  letter-spacing: 1px;
}
.btn-white:hover,
.btn-white:active,
.btn-white:active:focus,
.btn-white:active:hover,
.btn-white.active {
  background-color: #f5f5f5;
  border-color: #f5f5f5;
  color: #CC0000!important;
}
@media only screen and (max-width: 767px) {
  .btn-white,
  .btn-white:focus {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
  }
}


/** Contextual Button Styles **/
/* Main Style */
.btn-contextual, .btn-contextual-ko {
    display: inline-block;
    padding: 2px 0px;
    margin: 4px 0 15px 0;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 1.42857143;
    text-transform: uppercase;
    color: #000;
    border-bottom: 3px solid #cc0000;
}
.btn-contextual:hover {
    text-decoration: none;
}

/* Secondary Style: For knockout of background color */
.btn-contextual-ko {
    color: #FFF;
    border-bottom: 3px solid #FFF;
}
.btn-contextual-ko:hover {
    color: #FFF;
    text-decoration: none;
    border-bottom: 3px solid #AA0000;
}
/*************************************** 
END Buttons (Additional) ******/








/** Misc Page Layout Elements
***************************************/

/* 
1. Removes Default 15px Gutter From Bootstrap Columns */
.no-gutter { padding-right: 0px; padding-left: 0px;}


/* 
2. Flex Vertical Center */
.flex {
	display: flex;
}
.vertical-center {
	-webkit-flex-flow: column;
	-ms-flex-flow: column;
	flex-flow: column;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
@media only screen and (max-width: 767px) { 
 .flex-fix {display:block;}
}
/* Flex Wrapping Fix: */
.flex-wrap {
  flex-wrap: wrap;
}


/*
3. Equal Column Heights: **/
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}


/*
4. Responsive Video Embed */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* END */


/* 
5. offset anchor point for fixed header */
a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

/*************************************** 
END Misc Page Layout Elements ******/









/** Custom Components and Modules
***************************************/


/**
1. Hover-Styled Clickable Content Boxes:
Default styling for the hover-styled clickable content boxes:
  - Use the defaults for overall framework and functionality, and add/modify classes to theme. 
  - create new classes for background image scaling effect. For example:
    .class-name {background: url(/image-path-here) no-repeat center center; background-size: 150%;};
***************************************/
.hover-box {
    margin:0;
    height: 300px;
    color: #FFF;
    background-color:#CC0000;
    position: relative;
    transition: all 0.3s ease 0s;
    border: .5px solid #fff;
}
.hover-box a.hover-box-click {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
.hover-box:hover {background-size:170%;}

.hover-box-content {padding:15px; width:100%;}

@media only screen and (max-width: 767px) {
    .hover-box {height:180px; margin-bottom:15px; border:none;}
    .hover-box-content {padding:0px;}
}
/*************************************** 
END Hover-Box ******/





/**
2. Donation Component - Default Start 
***************************************/
  
.section-donation-component {
  text-align:center; padding:40px 20px;
  border-top:2px solid #000; 
  border-bottom:2px solid #000;
  background-color:#333;
  color:#FFF;
}
#component-donation {padding:25px 0 0 0;}
  
/** Other Amount Override **/  
.donation-aside li {margin-bottom:10px;}
.donation-aside li .btn {color:#888;}
.donation-aside li .btn.active, .donation-aside li .btn:hover {
  background-color:#cc0000;
  color:#fff;
  border-color:#aa0000;
}
.lls-other-amount-field {
    text-align: center!important;
}
#component-donation .form-group .form-control {padding:px;}  
/* Hack to position Other Amount Field */

@media only screen and (max-width: 767px) {
.section-donation-component {
  padding:40px 0px;
}
.donation-aside form li {
  width:30%;}
}

/*************************************** 
END Donation Component - Default ******/





/** 
3. Homepage Breaking News
***************************************/
.breaking-news {
    background-color: #cc0000;
    color: #fff;
    padding: 15px 15px;
}
.news-headline {
  font-size: 22px;
  margin: 4px 0px;
}
.btn-news {
    background-color: #fff;
    border: none;
    color: #cc0000!important;
    font-size:16px;
    font-weight: 400;
}
.btn-news:hover,
.btn-news:focus {
    background-color: #efefef;
    color: #cc0000;
    text-decoration: none;
}
@media only screen and (max-width: 767px) {
.breaking-news  {text-align:center;}
.news-headline { font-size: 18px; margin: 4px 0px;}
.btn-news {margin:15px auto 0 auto;}
}
/*************************************** 
END Homepage Breaking News ******/





/** 
4. IRC Get Support Home and Internal Components
***************************************/

/* Homepage */
.irc-cta-home-container {
    background-color: #cc0000;
    padding: 20px 20px;
    color: #fff;
}
.irc-cta-home {
    font-size: 20px;
    text-align: center
}
.irc-cta-home a { color: #fff;}
.irc-cta-home-item { margin-right: 30px;}
.intro-mobile { display: none;}
@media only screen and (max-width: 767px) {
    .irc-cta-home-left-rail {padding:15px 10px;}
    .irc-cta-home-item {
        display: block;
        margin-bottom: 6px;
        padding: 10px 0px;
        /*border-bottom: 1px solid #ae0000;*/
        border-bottom: 1px solid #FFF;
    }
}
/* END Homepage */


/* Left Rail */
/** OVERRIDE DEFAULT PROMO STYLING **/
.left-rail-promo-content {
    background-color: transparent;
    border:none;
    padding: 0px;
}
.left-rail-promo-headline { display:none; }
/** END **/
.irc-cta-left-rail {
    padding:10px;
    background-color: #cc0000;
    color: #fff;
    font-size: 16px;
}
.irc-cta-left-rail-container {text-align: center}
.irc-cta-left-rail-container a {color: #fff;}
.irc-cta-left-rail-item {
    display: block;
    border-bottom: 1px solid #fff;
    padding: 6px 0px;
}
.intro-mobile {display: none;}
.get-support-title {
    font-size: 23px;
    line-height:28px;
    font-weight: 400;
    margin: 0 0 10px;
}
.get-support-description {
    font-size: 18px;
    font-weight: 200;
    line-height: 1.4;
    margin-bottom: 22px;
}
@media only screen and (max-width: 767px) {
    .irc-cta-left-rail-item {
        display: block;
        margin-bottom: 15px;
    }
}
/* END Left Rail */

/*************************************** 
END IRC Get Support Home and Internal Components ******/





/**
5. Infographic: Why We Need Your Help - Default Start 
***************************************/
.infographics {text-align:center;}
.infographic-stat-1-3rd {
	background: rgba(0, 0, 0, 0) url("../png/icon-stat-1-3rd.png") no-repeat scroll center center;
	display: block;
	height: 180px;
	width: 100%;
	background-size: contain;
	margin-bottom:15px;
}
.infographic-stat-3mins {
	background: rgba(0, 0, 0, 0) url("../png/icon-stat-3mins.png") no-repeat scroll center center;
	display: block;
	height: 180px;
	width: 100%;
	background-size: contain;
	margin-bottom:15px;
}
.infographic-stat-9mins {
	background: rgba(0, 0, 0, 0) url("../icon-stat-9mins.html") no-repeat scroll center center;
	display: block;
	height: 180px;
	width: 100%;
	background-size: contain;
	margin-bottom:15px;
} 
.infographic-stat-10mins {
	background: rgba(0, 0, 0, 0) url("https://lls.org/sites/default/files/National/USA/Image/Landing_Pages/Q4/icon-stat-10mins.png") no-repeat scroll center center;
	display: block;
	height: 180px;
	width: 100%;
	background-size: contain;
	margin-bottom:15px;
}  
.infographic-stat-content {padding:0 30px;}
.infographic-stat-content p {font-size:18px;} 

@media only screen and (max-width: 767px) {
	.infographic-stat-content {padding:0 0px; margin:30px 0px;}
	.infographic-stat-content p {font-size:20px;}
}
/*************************************** 
END Infographic: Why We Need Your Help Default ******/







/*************************************** 
END Custom Components and Modules ******/











/*****************************************
PAGE SPECIFIC STYLES START
*********************************************************************************************************************/



/** 
1. Homepage Custom Styles
***************************************/

/* 
News Panel */
.module-research {
  padding: 60px 0;
}
.module-research p.more {
  display:none;
}
@media only screen and (max-width: 991px) {
    .module-research h3.x0-top.x3.hidden-sm.hidden-xs {
        font-size: 21px;
        font-weight: 400;
        text-align: left;
    }
}

/* 
Donate Homepage Panel */
.donate-cta-container {
    background: url(https://lls.org/sites/default/files/National/USA/Image/homepage_components/lls-home-banner-bg-donate-cta.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 400px;
    color: #fff;
    text-align: center;
}
.donate-cta-mobile {display: none;}
.donate-cta-container .icon-lls-blood-drop {
    margin-bottom: 15px;
    display: block;
    font-size: 80px!important;
}
@media only screen and (max-width: 767px) {
    .donate-cta-container {
        background: none;
        height: auto;
        color:#000!important;
    }
    .donate-cta-mobile {
        display: block;
    }
    .donate-cta-container .icon-lls-blood-drop {
      color:#CC0000;
    }
}
/* END Donate Homepage Panel */


/* 
Fundraise with LLS Panel */
#fundraise-home-lls .campaign-box img {
  width: 220px;
  margin-bottom: 20px;
}
#fundraise-home-lls .caption-campaign {
  text-align: center;
  color: #333;
  font-size: 15px;
  padding: 0 12px;
}
/* Hover Effects */
.zoom {
  transition: transform .2s;
  /* Animation */
  -webkit-transition: transform .2s;
}
.zoom:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  opacity: 100%;
}
/* Media Queries */
@media only screen and (max-width: 769px) {
  #fundraise-home-lls .campaign-box {
    height: auto;
    padding: 0 40px;
  }
  #fundraise-home-lls .caption-campaign {
    padding: 0 2px;
    line-height: 1.3em;
  }
}
/* END Fundraise with LLS Panel */



/* 
Custom Get Support Block:
This is used to replicate and adjust an RTE version of Get Support block, w/out affecting the LLS Canada site */
div.module-get-support{background-image:url(https://lls.org/sites/default/files/National/USA/img/get-support-bg-2.jpg);background-repeat:no-repeat;background-position:center;background-color:#fff;background-attachment:fixed;padding:80px 0;-webkit-background-size:100!important;-moz-background-size:100%!important;-o-background-size:100%!important;background-size:100%!important;-webkit-background-size:cover!important;-moz-background-size:cover!important;-o-background-size:cover!important;background-size:cover!important}
div.module-get-support{background-image:url(https://lls.org/sites/default/files/National/USA/Image/homepage_components/get-support-bg.jpg);}

div.module-get-support h1{color:#FFF}
div.module-get-support p.subhead-h1{font-weight:400;color:#FFF}
div.module-get-support p.subhead-h2{font-weight:400}
div.module-get-support .support-block{background-color:#fff;padding:30px 20px;height:400px;position:relative}
div.module-get-support .support-block h2{font-size:30px;font-weight:400}
div.module-get-support .support-block i.icon{background-image:url(https://lls.org/sites/default/files/National/USA/img/get-support-icons.png)}
div.module-get-support .support-block i.icon.medium{display:block;height:61px;width:61px;margin:0 auto;margin-bottom:5px}
div.module-get-support .support-block i.icon.medium.blog{background-position:0 0}
div.module-get-support .support-block i.icon.medium.discussion{background-position:0 -61px}
div.module-get-support .support-block i.icon.medium.support{background-position:0 -122px}
div.module-get-support .support-block i.icon.medium.chat{background-position:0 -183px}
div.module-get-support .support-block i.icon.medium.group{background-position:0 -244px}
div.module-get-support .support-block i.icon.medium.financial{background-position:0 -305px}
div.module-get-support .support-block i.icon.medium.care{background-position:0 -366px}
div.module-get-support .support-block ul.list-support{text-align:center}
div.module-get-support .support-block ul.list-support li{display:inline-block;width:100px;height:120px;vertical-align:top}
div.module-get-support .support-block ul.list-support li a span{display:block;font-weight:400;font-size:15px;line-height:18px;margin-top:5px}
div.module-get-support .support-block ul.list-support.financial-support li{width:135px}
div.module-get-support .support-block .content.search p{font-size:24px}
div.module-get-support .support-block .content.search p a{border-width:2px;white-space:nowrap}
div.module-get-support .support-block .content.contact ul li{font-size:18px}
div.module-get-support .support-block .content.contact ul li span.fa{color:#444;width:30px;text-align:center}
div.module-get-support .support-block .content a{color:#c00}
div.module-get-support .support-block .cta{width:100%;position:absolute;bottom:30px;left:0}
@media (max-width: 1199px) {
    div.module-get-support .support-block h2{font-size:24px}
    div.module-get-support .support-block p.subhead-h2{font-size:16px}
    div.module-get-support .support-block ul.list-support li{width:80px}
    div.module-get-support .support-block ul.list-support.financial-support li{width:110px}
}
@media (max-width: 991px) {
    div.module-get-support .support-block{height:290px}
    div.module-get-support .support-block.contact .content.contact ul{text-align:center}
    div.module-get-support .support-block.contact .content.contact ul li{display:inline-block;vertical-align:center;width:160px}
}
@media (min-width: 768px) and (orientation: portrait) {
    div.module-get-support .support-block{height:290px}
    div.module-get-support .support-block.contact .content.contact ul{text-align:center}
    div.module-get-support .support-block.contact .content.contact ul li{display:inline-block;vertical-align:center;width:160px}
}
@media (max-width: 767px) {
div.module-get-support .support-block .cta{bottom: 15px !important;}
}
@media (max-width: 568px) {
    div.module-get-support .support-block{height:390px}
}
@media only screen and (min-width: 320px) and (max-width: 568px) and (orientation: landscape) {
    div.module-get-support .support-block{height:290px}
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) {
    div.module-get-support .support-block{height:400px}
    div.module-get-support .support-block ul.list-support li{width:120px}
}
/* END Custom Get Support Block */


/*************************************** 
END Homepage Custom Styles ******/






/** 
2. About LLS / Who We Are Page Styles
***************************************/

#about-lls p {font-size: 18px;}

/* Main Hero / Intro Section */
#about-lls .hero-container {
    background: url(https://lls.org/sites/default/files/National/USA/Image/Landing_Pages/About-LLS/lls-brand-bg-main-fists.jpg) no-repeat top left #000;
    background-size: 110%;
    height: 1075px;
    padding: 140px 0 0 0;
    color: #FFF;
}

#about-lls .hero-mobile {
    display: none;
}

#about-lls .hero-intro {
    margin-bottom: 75px;
}

#about-lls .hero-intro-mobile {
    display: none;
}

#about-lls .intro-container {
    position: relative;
    min-height: 435px;
}

#about-lls .intro-copy {
    position: absolute;
    bottom: 0;
    left: 15px;
}

@media only screen and (min-width: 1500px) {
    #about-lls .hero-container {
        background: url(https://lls.org/sites/default/files/National/USA/Image/Landing_Pages/About-LLS/lls-brand-bg-main-fists.jpg) no-repeat center center #000;
        background-size: 120%;
        height: 1055px;
    }
}

@media only screen and (max-width: 1290px) {
    #about-lls .hero-container {
        background-size: cover;
        height: 1055px;
    }
}

@media only screen and (max-width: 1199px) {
    #about-lls .hero-container {
        background-size: cover;
        height: 1000px;
    }
}

@media only screen and (max-width: 991px) {
    #about-lls .hero-container {
        background-size: cover;
        height: 1100px;
    }

    #about-lls .intro-container {
        position: relative;
        min-height: 150px;
    }

    #about-lls .hero-intro {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {
    #about-lls .hero-container {
        background: none;
        height: auto;
        padding: 0 15px;
        background-color: #000;
        color: #fff;
    }

    #about-lls .hero-mobile {
        display: block;
    }

    #about-lls .hero-intro {
        display: none;
    }

    #about-lls .hero-intro-mobile {
        display: block;
    }

    #about-lls .intro-copy {
        position: relative;
        left: 0;
    }

    #about-lls .intro-copy,
    #about-lls .manifesto {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

/* END Main Hero / Intro Section */



/* Mission Pillars Section */
#about-lls .pillars-container {
    background: url(https://lls.org/sites/default/files/National/USA/Image/Landing_Pages/About-LLS/lls-brand-bg-mission-pillars.jpg) no-repeat center center;
    background-size: cover;
    height: 500px;
    color: #FFF;
    margin-bottom: 30px;
}

#about-lls .pillars-content {
    height: 500px;
    /*padding:90px;*/
    padding: 4% 6%;
}

#about-lls #feature-box-container {}

#about-lls .feature-box {
    margin-bottom: 15px;
}

#about-lls .fbox-icon,
#about-lls .fbox-content {
    display: table-cell;
    vertical-align: top;
}

#about-lls .fbox-icon {
    padding: 0 20px 0 0;
}

#about-lls .fbox-icon i {
    font-size: 40px !important;
    color: #fff !important;
}

@media only screen and (max-width: 767px) {
    #about-lls .pillars-container {
        background: url(https://lls.org/sites/default/files/National/USA/Image/Landing_Pages/About-LLS/lls-brand-bg-mission-pillars.jpg) no-repeat right center;
        background-size: cover;
        height: auto;
        text-align: center;
    }

    #about-lls .pillars-content {
        height: auto;
        padding: 6% 6%;
    }

    #about-lls .fbox-icon,
    #about-lls .fbox-content {
        display: block;
        vertical-align: top;
        text-align: center;
        margin: 0 auto;
    }

    #about-lls .fbox-icon {
        padding: 0 0 1px 0;
    }
}

/* END Mission Pillars Section */



/* Impact / Infogrfx Section */
#about-lls .our-impact-container {
    border-bottom: 1px solid #f4f4f4;
}

/* END Impact / Infogrfx Section */



/* Get Involved Section Start */
#about-lls .get-involved {
    text-align: center;
}

#about-lls .get-involved h3 {
    font-size: 19px;
    padding: 0 30px;
    text-transform: uppercase;
}

#about-lls .icons-get-involved-row {
    margin-top: 30px;
}

#about-lls .icons-get-involved {
    fill: #cc0000;
    margin-bottom: 6px;
}

#about-lls .icons-get-involved-row a {
    color: #000;
}

#about-lls .icons-get-involved-row a:hover {
    text-decoration: none;
}

@media only screen and (max-width: 1199px) {
    #about-lls .icons-container-mobile {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 991px) {
    #about-lls .get-involved h3 {
        font-size: 17px;
        padding: 0px;
    }
}

@media only screen and (max-width: 544px) {
    #about-lls .get-involved h3 {
        font-size: 16px;
    }

    #about-lls .icons-container-mobile {
        min-height: 180px;
        margin-bottom: 0;
    }
}

/* END Get Involved Section Start */



/* Donate Section */
#about-lls .need-your-help-container {
    background: url(https://lls.org/sites/default/files/National/USA/Image/Landing_Pages/About-LLS/lls-brand-bg-researcher-donate.jpg) no-repeat center center;
    background-size: cover;
    height: 500px;
    color: #FFF;
}

#about-lls .donate-cta-content {
    height: 500px;
    /*padding: 10% 5%;*/
    padding: 5% 5%;
}

@media only screen and (max-width: 767px) {
    #about-lls .need-your-help-container {
        height: auto;
    }

    #about-lls .donate-cta-content {
        height: auto;
        text-align: center;
    }
}

/* Component Override */
#about-lls .need-your-help-container .donate-cta-content #lls_light_box_submit_button {
    background-color: transparent;
    border: 3px solid #FFF;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 1px;
}

#about-lls .need-your-help-container .donate-cta-content #lls_light_box_submit_button:hover {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.25);
    border-color: #FFF;
    color: #fff !important;
}

#about-lls .need-your-help-container .donate-cta-content .donation-aside li .btn.active,
#about-lls .need-your-help-container .donate-cta-content .donation-aside li .btn:hover {
    background-color: #000;
    color: #fff;
    border-color: #666;
}
/* END Donate Section */

/*************************************** 
END About LLS / Who We Are Page Styles ******/









/** 
3. Our Mission Page Styles
***************************************/
#our-mission .hero-container {
    background: url(https://lls.org/sites/default/files/National/USA/Image/Landing_Pages/mission-hero-main.jpg) no-repeat top center;
    background-size: cover;
    height: 460px;
    color: #FFF;
}
#our-mission .hero-mobile {
    display: none;
}
#our-mission .hero-gel {
    height: 460px;
    padding: 6% 6%;
}
#our-mission .mission-bg {
    background: url(https://lls.org/sites/default/files/National/USA/Image/Landing_Pages/mission-bg-mission.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    height: 500px;
}
#our-mission .mission-bg-mobile {
    display: none;
}

@media only screen and (max-width: 767px) {
    #our-mission .hero-container {
        background-image: none;
        height: auto;
    }
    #our-mission .hero-mobile {
        display: block;
    }
    #our-mission .hero-gel {
        height: auto;
        padding: 2% 4%;
        text-align: center;
    }
    #our-mission .mission-bg {
        height: auto;
        background-image: none;
        background-color: #000;
    }
    #our-mission .mission-bg-mobile {
        display: block;
    }
    #our-mission .video {
        height: 250px;
    }
}
#our-mission .white-link,
#our-mission .white-link:hover {
    color: #fff;
}
#our-mission .mission-initiatives {
    padding: 60px 0;
    /*background-color: #eee;*/
}
#our-mission .initiatives-box {
    height: auto;
}
#our-mission .initiatives-box img {
    width: 220px;
    margin-bottom: 15px;
}
#our-mission .initiatives-box img {
    width: 220px;
}
#our-mission .initiatives-box .druk-small {
    font-size: 32px !important;
    line-height: 30px !important;
}
#our-mission .caption-initiatives {
    text-align: center;
    color: #333;
    font-size: 15px;
    padding: 0 15px;
}

@media only screen and (max-width: 991px) {
    #our-mission .initiatives-box {
        height: 480px;
    }
}
@media only screen and (max-width: 767px) {
    #our-mission .initiatives-box {
        height: 530px;
    }
}
@media only screen and (max-width: 544px) {
    #our-mission .initiatives-box {
        height: 550px;
    }
    #our-mission .initiatives-box img {
        width: 140px;
    }
    #our-mission .caption-initiatives {
        margin-bottom: 20px;
        padding: 0 10px;
    }
}
/*************************************** 
END Our Mission Page Styles ******/












/********************************************************************************************************************* 
END PAGE SPECIFIC STYLES 
***************************************
******/