﻿@import url("nacersano-responsive.css");

/*********************************************************/
/**** START DESKTOP STYLES FOR WIDTHS MORE THAN 992PX */
/*********************************************************/
@media screen and (min-width: 992px) {
    #included-mobile-header, #mobile-footer {
        display: none;
    }
    #news-article-page .news-mobile-view {display: none;}
    #mobile-filter {display: none!important;}
    #money-goes-image-mobile {display: none;}
    .mobile-homepage-header {display: none;}
    
    #mobile-header-container, 
    #mobile-contact-us-gallery, 
    #mobile-signin-block,
    #mobile-signup-block,
    #mobile-incorrect-login-block,
    #mobile-signin-multiple-accounts-block, .mobile-video-overlay, .mobile-video-title {display:none;}
    #mobileNav-container, .mobile-search-header {display:none;}
    .calc-mobile-button {display:none!important} 
    #search-results h1, #search-header h2 {color:#9c5fb5!important}    
    .mobile {display: none;}    
    #mobile-video-container {display:none;}
    #mobile-video-homepage {display:none;}
    #mobile-footer-container {display:none;}
    #mobile-category-gallery-top {display:none;}
    #mobile-library-select, #mobile-topic, #mobile-article-text, .readmore-js-toggle, #mobile-homepage-blog  {display:none!important;}
    #video-lists, #video-most {display: none;}
    .desktop-filter-list {display: block!important;}
    .mobile-tabContainer {display:none!important;} 
    .mobile-plus {display: none;}
    #mobile-filter, #responsive-video {display: none!important;}
    #container-fluid {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    #faq-page #faq h3, #faq-page #faq h3 a:link, #faq-page #faq h3 a:active, #faq-page #faq h3 a:visited {
        font-weight: bold;
    }
}

@media screen and (min-width: 414px) {
    #mobile-video-container {
        width: 250px;
        margin: 0 auto;
        float: none;
    }

    #topic-page object {
        float: left;
        margin-bottom: 10px;
    }

    /*.BrightcoveExperience {
        width: 100%!important;
    }*/
    .slider-img-responsive{
        width: 100%;
    }
    .home-img-responsive{
        width: 100%;
    }

}

@media screen and (max-width: 1480px) {
    #hero .bx-wrapper .bx-prev, #hero .bx-wrapper .bx-next, #hero .bx-wrapper .bx-prev:hover, #hero .bx-wrapper .bx-next:hover  {
        width: 20px;
        height: 40px;
        background-size: 20px 40px;
    }
}

/*************************************************************************************/
/**** START RESPONSIVE STYLES FOR WIDTHS LESS THAN 991PX AND PORTRAIT ORIENTATION ****/
/*************************************************************************************/
@media screen and (max-width: 991px) and (orientation: portrait), screen and (max-width: 991px) and (orientation: landscape) { /* 767 */

    /* Remove all desktop components */
    #global-nav, #content-nav, #content-sub-nav, #user-nav, #masthead, #bread-crumb, #category-navigation, #newsletter, footer, #footer-divider, #mobile-gallery {
        display: none!important;
    }

    /* 404 Page */
    .f0f ul {
        width: auto;
    }
    .f0f .search-wrapper {
        width: 100%;
    }
    .f0f input {
        width: 87%;
    }
    .f0f #btn-404-search {
        width: 13%;
    }

    #alt-topic-layout {display: none!important;}
    .clear-form {
        text-transform: capitalize;
        font-size: 22px;
        color: #00bfd7;
    }

    /* FAQ Page */
    #faq {width: 100%;margin-bottom:30px;} 
    #faq-intro {width:100%;}
    #faq h3:nth-last-child(2) {margin-bottom: 0px;}
    #faq-page #faq a:focus, #faq-page #faq a:active, #faq-page #faq a:hover {
        text-decoration: none;
    }
    #faq-page #faq h3 {
        font-size: 13pt;
        color: #9c5fb5!important;
    }
    #faq-page #faq a h3 {
        background-color: #e4e4e4;
        padding: 10px 15px;
        width: 110%;
        height: auto;
        margin-left: -15px;
        color: #000!important;
        font-size: 13pt!important;
    }
    #faq-page #faq h3 a {
        color: #000!important;
        font-weight: normal!important;
    }
    #faq .faq-arrow {display: none!important;}

    .at4m-menu .at4m-menu-inner .at4m-menu-search input[type=text] {
        top: 10px!important;
        padding: 0 0 0 22px!important;
    }

    /* Sidebar */
    #sidebar {
        padding: 0;
        margin-top: 25px;
        clear: both;
    }
    #sidebar .module {
        margin-bottom: 25px;
    }
    #sidebar .module.with-button {
        width: 100%;
        height: 100%;
        padding-top: 15px;
        border-top: 1px solid #ccc;
        text-align: center;g
    }
    #sidebar .module-button {
        text-align: center;
    }
    #sidebar .module .module-top {
        height: 100%;
    }
    #sidebar .module img {
        display: block;
        float: none;
        margin: 0 auto 15px;
        border: none;
    }
    #sidebar .module-bottom {
        text-align: center;
    }
    #sidebar .module .border-bottom {
        display: none;
    }
    #sidebar .module .button {
        float: none;
        width: 100%;
    }

    .signup-receipt #options3 {
        width: auto;
    }

    .main-content #gallery {
        width: 100%!important; 
        margin-bottom: 14px!important;
    }

    #category-page #left-column > div:nth-child(2) {
        border-top: 1px solid #ccc;
    }
    #form-left, #form-right {
        width: 100%;
    }
    #mobile-article-text {
        padding-bottom: 10px;
    }
    #all-partners {
        display: none;
    }
    .partners {
        border: none;
        height: auto;
    }
    .partners:first-child {
        border: none;
    }
    .partners:nth-child(3) img {
        width: 30%;
    }
    .partners .amount {
        float: none;
        height: auto;
        width: auto;
    }
    .partners .desc {
        display: none;
    }
    .partners img {
        display: inline;
        width: 32%;
    }
    .partners .mobile-only {
        display: inline;
    }
    .all-partners {
        display: none;
    }
    #spotlight-page .spotlight-teaser {margin-right: 0px;}
    .mobile-only {
        display: block;
    }

   .center-text {
        text-align: center; /*added*/
    }
    #con-slider {
        width:100% !important;
    }
    .mobile-style {
        width: 100% !important;
    }
    .slider-img-responsive{
        max-width:160%!important; 
        width:160%!important;
        float:right !important;
        position: relative;
        z-index: 9999999!important;  /* fix img that cuts off when slider finishes animation */
    }
    .bx-clone {
        z-index: 999; /* fix img that cuts off when slider finishes animation */
    }
    /*img-responsive{width:100%;}*/
    .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover {
        box-shadow: none;
        background: #9c5fb5;
    }
    .bx-wrapper .bx-pager.bx-default-pager a {
        box-shadow: none;
        border: 1px solid #9c5fb5;
    }
    .caption1, .caption2 {
        position: relative;
        bottom: 0;
        right: 0;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        padding: 20px 30px;
    }
    .caption1 h1, .caption2 h1 {
        line-height: 1.1;
        font-weight: bold;
        font-size: 25pt;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .caption1 h2, .caption2 h2 {
        padding: 10px 0 15px 0;
        margin-bottom: 10px;
    }
    .caption1 a, .caption2 a {
        float: none;
        width: 100% !important;
        margin-top: 0;
        border: none;
        box-shadow: none;
        height:45px;
        text-decoration: none;
    }
    
    .btn-learn-more {
        padding: 10px 40px !important;
        display: block;
        letter-spacing: 1.2px !important;
    }
    
    .home-slide {
        border-bottom: 1px solid #CCC;
    }
    
    .bxslider li br{
       display: none; /* remove <br/> tags - yes it's possible with just css! */
    }


    /* =============================================================================================*/
    /* Select box for Mobile pages
    /* version: 1.1                                                                                 */
    /* Last Modified: 04/09/14                                                                      */
    /* Modified by: Scott Shapiro;                                                                  */
    /* =============================================================================================*/
    .styled-select {
        width: 100%;
        height: 40px;
        overflow: hidden;
        background: url("/glue/css-images/new_arrow.png") no-repeat 95%;
        border: 1px solid #afafaf;
        border-radius: 6px;
        clear: both;  
    }
    .styled-select select {
        background: transparent;
        width: 110%;
        height:40px;
        padding: 5px;
        font-size: 16px;
        line-height: 1;
        border: 0;
        font-family: helvetica;
        color:#9c5fb5;
        font-size: 12pt;
        -webkit-appearance: none;
    }
    #mobile-header {
        float: left;
        position: fixed;
        height: 78px;
        width: 100%;
        background-color: #fff; /* #efe8f2; */
        /*box-shadow: 0px 1px 4px rgba(0,0,0,0.3);*/
        border-bottom: 1px solid #ccc;
        z-index: 999;
    }
    #mobile-hamburger {
        float: left;
        position: relative;
        top: 28px;
    }
    #mobile-logo {
        float: left;
        position: relative;
        top: 14px;
    }
    #mobile-donate {
        display: inline-block;
        float: right;
        position: relative;
        top: 22px;
        width: 80px;
        background-color: #9a61b2;
        color: #fff;
        font-weight: bold;
        text-transform: lowercase;
    }

    #dashboardInterior {
        width:100%
    }

    #dashboardInterior h1 {
        font-size: 18px;
    }

    .control-accountinfo h1 {
        font-size: 18px;  
    }

    #dashboardInterior #leftSide, #dashboardInterior #rightSide {
        width: 100%;
        float: left;
    } 
    #dashboardInterior .myDashboardBox {
        width: 100%;
        background-image: none!important;
        border-radius: 5px;
        
    }
    #dashboardInterior #myActions {
        border: 1px solid #58a618;
    }
    #dashboardInterior #whatIveGiven {
        border: 1px solid #d874ae;
    }
    #dashboardInterior #myInbox {
        border: 1px solid #9c5fb5;
    }
    #dashboardInterior #myPages {
        border: 1px solid #00bfd7;
    }

    #dashboardInterior .profile {
        width: 100%;
        margin-bottom: 10px;
    }    

    #dashboardInterior .dashboard {
        width: 100%;
    }
    .news-landing img {
        margin-bottom: 10px;
    }
    #news-reporter h3 {
        margin-bottom: 10px;
    }
    #news-reporter a {
        color: #9c5fb5;
    }
    #mobile-footer {
        padding-bottom: 20px;
        text-align: center;
    }
    #mobile-footer #social {
        margin: 30px 0;
        text-align: center;
    }
    #mobile-footer #social img {
        display: inline;
        margin: 0 2px;
        max-height: 48px;
        max-width: 48px;
        width: 13%;
        border-radius: 6px;
    }
    #mobile-footer #share-icon {
        width: 90px !important;
    }
    #mobile-footer #contact .button {
        display: inline-block;
        width: 120px;
        background-color: #9a61b2;
        text-transform: lowercase;
        color: #fff;
    }
    #banner img {
        height: 70px;
        width: 100%;
    }
    .container {
        width: 100%;
    }
    #article-page {
        margin-top: 60px;
    }
    #article-page #mobile-article-text img {
        width: 100%!important;
        height: 100%!important;
    }
    #left-column {
        padding-right: 0;
        width: 100%;
    }
    .read-arrow {
        display: inline-block;
    }
    .main-content {
        margin-top: 60px;
        padding-bottom: 0;
    }
    .main-content p,
    .main-content form,
    .main-content form input[type=text],
    .main-content form input[type=password],
    .main-content form input[type=tel],
    .main-content form input[type=email],
    .main-content form select, 
    .main-content form textarea {
        width: 100%!important;
    }
    .main-content h1 {
        margin-top: 20px; 
        width: 100%;
    }
    .main-content form {
        min-width: 100%;
    }
    #main-content {
        margin-top: 20px;
    }
    #mobile-topic {
        margin-bottom: 30px;
    }
    /* Homepage */
    #cares, #mission, #arrow-right, #arrow-left {
        display: none;
    }
    h2 {
        margin: 10px 0 15px 0;
        font-size: 18pt!important;
        line-height: 30px;
    }
    #other p {
        padding: 0 22px;
    }
    #other #find-event img {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .col-md-4, .col-md-12 {
        padding: 0;
    }
    .caption1 {
        display: block;
    }
    .caption2 {
        display: block;
    }
    .lines {
        border: none;
    }
    #hero {
        display: block;
        margin: 60px 0 0 0!important;
        width: 100%;
        clear: both;
    }

    #hero .bx-controls {display: none;}

    .mobile-homepage-header {
        margin-top: 15px;
        padding: 10px 15px;
        text-align: center;
        border-bottom: 1px solid #CCC;
    }
    .mobile-homepage-header h1 {
        font-weight: bold;
        font-size: 25pt;
        text-transform: uppercase;
    }
    .mobile-homepage-header h2 {
        font-size: 25pt;
        text-transform: none;
    }
    .mobile-homepage-header .btn-learn-more {
        background-color: #d874ae;
        height: 45px;
        box-shadow:none;
        text-decoration: none;
        color: #fff;
        cursor: pointer;
        font-family: 'CenturyGothic';
    }
    .video-js {
        width: 100%!important;
    }
    .first-row.first-column {
        padding-bottom: 20px;
        border-bottom: 1px solid #CCC;
    }
    .first-row.first-column h2 {
        margin-bottom: 10px;
        font-size: 18pt!important;
    }
    .first-row.first-column span {
        float: none;
        display: block;
        margin-bottom: 10px;
        font-size: 17pt;
    }
    .first-row.second-column {
        margin-bottom: 0px;
        padding-bottom: 20px;
        border-bottom: 1px solid #CCC;
    }
    .first-row.second-column .button, .first-row.third-column .button, .third-row.first-column .button, #hp-share-story-widget .button {
        width: 100%!important;
        height: 45px;
        line-height: 45px;
    }
    .first-row.third-column {
        padding-bottom: 40px;
        border-bottom: 1px solid #CCC;
    }
    .first-row.first-column img, #hp-video-widget img {
        width: 100%;
        height: 100%;
    }
    .first-row.second-column img {
        margin-bottom: 20px;
    }
    .second-row img {
        width: 45%;
    }
    .second-row span {
        display: inline-block;
        font-size: 12pt;
    }
    .third-row.first-column {
        margin-top: 20px;
        padding-bottom: 40px;
        border-bottom: 1px solid #CCC;
        background-position: 100% 0;
        background-size: 20%;
    }
    #hp-share-story-widget {
        margin-top: 20px;
        padding-bottom: 40px;
        border-left: none!important; border-right: none!important;
        border-bottom: 1px solid #CCC;
    }
    #hp-share-story-widget img {
        right: 30px;
        top: -15px;
        width: 45px;
    }
    #hp-share-story-widget h2 {
        width: auto;
        margin: 10px 0 15px 0;
    }
    .third-row.third-column {
        margin-top: 20px;
    }
    .third-row.first-column p {
        padding-right: 0;
        font-size: 12pt;
        line-height: 25px;
    }
    #share {
        text-align: center;
    }
    #extra {
        padding-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }
    #why-care {
        border-bottom: 1px solid #CCC;
        margin-left: 0;
        margin-right: 0;
    }
    #promo {
        padding-bottom: 15px;
        border-bottom: 1px solid #999;
    }
    #baby img {
        width: 100%;
    }
    #other #find {
        border-left: none;
        border-right: none;
    }
    #extra #img-watch-share {
        margin: 0 0 10px 0;
        border-radius: 0;
        border: none;
        width: 100%;
    }
    #mission h3 {
        font-size: 22px; 
    }
    #input-zip {
        width: 75% !important;
    }
    .zip-wrapper {
        margin: 0 auto;
        height: 38px;
        width: 90%;
    }
    .button {
        width: 100%;
    }
    #donation {
        margin: 20px 0 10px 0 !important;
        width: 100% !important;
    }
    #other {
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }
    #other #start-event {
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }
    #btn-donate {
        margin-bottom: 20px;
    }
    #extra {
        padding-top: 0;
    }
    .bx-wrapper .bx-viewport {
        border: none;
        box-shadow: none;
        left: 0;
        overflow-y: visible;
        height: auto !important;
    }
    .bx-wrapper .bx-caption {
        padding: 5px 45px;
        bottom: -100px;
        height: 100px;
        background-color: #9c5fb5;
        font-size: 18px;
    }
    .bx-wrapper .bx-controls-direction a {
        top: 74%;
    }
    #controlContainer {
        margin-bottom: 10px;
        width: 100%;
    }
    #changeVideoSelect {
        width: 145px;
    }
    
    .sub-title {
        display: none;
    }
    #article-library-page {
        margin-top: 40px;
    }
    #topic-navigation-flat, #more-articles {
        display: none;
    }
    #newsletter-thank-you #form-right, #newsletter-thank-you #form-left {width: 100%!important;}
    #newsletter-thank-you #form-actions {width: 100%!important;}
    #join-an-event #form-left {width: 100%!important;}
    .join-an-event-gallery {display: none;}
    #contact-us-gallery #contact-information {width: 100%!important;}
    #news-article-page #media-spacer {display: none;}
    #news-article-page #news-right-panel {float: none;border: none;margin:0px;}
    #news-article-page #media-contacts {padding: 0px;}
    #news-article-page .news-desktop-view {display: none;}
    #news-article-page .news-mobile-view {border: none!important;float: none!important;margin: 0px!important;}
    #news-article-page .news-mobile-view #media-contacts {padding: 0px!important;}

    /*************** Privacy Policy **************/
    #privacy-page #main-container .container {
        width: 100%!important;
        margin-top: 20px;
        padding: 0px 10px!important;
    }
    #privacy-page .main-content .container h1 {font-size: 18pt!important;}
    #privacy-page .ui-tabs .ui-tabs-panel {width: 100%!important;}
    #privacy-page .ui-tabs-nav {display: none!important;}
    #privacy-page .mobile #divWizardOuter table td{float: left;}
    #privacy-page .mobile #divWizardOuter{width: auto;}
    #privacy-page .mobile #divQuickWizardNextButton{width: auto;}
    #privacy-page #privacy, #privacy-page #editorial, #privacy-page #link, #privacy-page #terms-of-use, #privacy-page #state-disclosure-notice {margin-left: 10px;}
    #privacy-page .tabContainer {display: none!important;}
    #privacy-page .tabs-container {width: 100%!important;}
    #privacy-page .hide-more {display: none!important;}
    #privacy-page .show-more {display: block!important;}
    #privacy-page #tabs .styled-select {width: 93%!important;}
    /*************** Search **************/
    #showing-container {display: none!important;}
    .mobile-search-header h5 {float: left;font-weight: bold;margin-top: 15px;}
    .mobile-search-header {border-bottom: 1px solid #9c5fb5;margin-bottom: 20px!important;} 
    .search-result {width: 100%!important;}
    #search-right-column {width: 100%!important;}
    #search-menu {width: 100%;}
    #search-results h1 {color: #9C5FB5!important;font-size: 16pt;}
    #search-header {
        clear: both;
        width: 100%!important;
        height: 45px;
    }
    #search-header h2 {
        margin-left: 0px!important;
        width: 70%!important;
        margin-top: 10px;
        float: left;
        margin-bottom: 0px!important;
        color: #9c5fb5!important;
    }
    #search-results #showing {
        margin: 20px 0px 10px 0px!important;
    }
    #searchResultsContainer {
        padding-left: 0px!important;
        width: 100%;
    }
    #searchResultsPager {
        width: 100%;
        text-align: center;
        font-size: 80%;
    }
    .searchResultURL {color: #9c5fb5!important;}
    .searchResultCopy em {color:#ed6d3b!important;}
    #facetContainer-media {
        margin-left: 0px;
        margin-right: 0px;
        overflow: auto;
        clear: both;
        background-color: #e4e4e4;
        color: #9c5fb5!important;
        padding: 10px 0px 10px 10px;
        margin-bottom: 0px!important;
        margin-top: -20px;
        border-bottom: 1px solid #9c5fb5;
        border-right: 1px solid #9c5fb5;
        border-left: 1px solid #9c5fb5;

    }
    #facetContainer-media > span {
        width: 45%;
        margin-right: 10px!important;
        color: #ffffff!important;
    }
    #facetContainer-media ul li {
        width: 45%;
        float: left;
        margin-bottom: 10px;
    }
    .desktop-search-header {display: none;}
    .searchResults-Pager {
        background-color: #9b5ab6;
        border-radius: 7px;
        float: left;
        height: 25px;
        margin: 0px 2px 15px !important;
        text-decoration: none;
        width: 25%;
        color: #9b5ab6;
        padding-top: 10px;
    }
    .searchResults-Pager a:link {
        color: #ffffff!important;
        font-size: 90%!important;
    }
    .searchResults-Pager a:hover {
        text-decoration: none!important;
        font-size: 90%!important;
    }
    #searchResults-PagerNext {padding: 4px 7px 4px 2px;float:right;margin-right:10px!important}
    #searchResults-PagerPrev {padding: 4px 7px 4px 2px;float:left;margin-left:10px!important}
    #searchResults-PagerLast {display:none!important;}
    #searchResults-PagerFirst {display:none!important;}
    .searchResults-PagerInternal{display: none!important;}
    
    /*************** Money Goes **************/
    #money-goes-image {display: none;}
    #money-goes-top {height: auto;}

    /* ===================================================== */
    /* MOBILE FOOTER CONTAINER                               */
    /* ===================================================== */
    #mobile-footer-container {width:100%; float:left;margin:0 auto 80px;padding:0;overflow-x:hidden;}
    /* Mobile Footer Banner */
    #mobile-footer-container #banner {width:100%;float:left; height:40px;margin-bottom:20%;}
    #mobile-footer-container #banner img{width:100%;}
    
    /* Mobile Social Media */
    #mobile-footer-container #socialmedia {width:105%; margin:0 auto; text-align: center}
    #mobile-footer-container #socialmedia img {width:10%;margin-right:20px; margin-bottom:8%;}
    
    /* Mobile Get in touch buttons */
    #mobile-footer-container #intouch {width:50%; text-align: center}
    #mobile-footer-container #intouch div {width: 210px; margin:0 auto; text-align: center}
    
    /* Mobile Copyright */
    #mobile-footer-container #copyright {width:90%!important; margin:0 auto;}
    #mobile-footer-container #copyright p{color:#333; font-size: 8pt; font-family: verdana;float:left}

    /* Email Sign Up Module */
    .mobile-footer-button {
        margin: 10px 0;
        padding: 3px;
        width: 100%;
        height: 50px;
        line-height: 45px;
        border-radius: 7px;
        text-align: center;
        
    }
    .mobile-footer-button h4 {
        
        color: #fff;
        font-family: 'CenturyGothic';
        font-size: 14pt;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
    }
    #esu {
        background-color: #00bfd7;
    }
    #aaq {
        background-color: #cdadd9;
    }
    #dnt {
        background-color: #ed6d3b;
    }
    #cus {
        background-color: #9c5fb5;
    }
    #mobile-privacy-overview {
        width: 100%;
    }
    .tabs-container {
        width: 100%!important;
    }
    #mobile-us {
        margin-bottom: 20px;
        text-align: center;
    }
    #copyright {
        padding: 10px;
        text-align: center;
    }
    #copyright p {
        margin: 0 auto;
        width: 200px;
        font-size: 7pt;
    }
    .mobile-button {
        margin: 0 5px;
        border-radius: 7px;
        width: 100px;
        height: 35px;
        line-height: 35px;
        text-decoration: none;
        text-transform: uppercase; 
        color: #fff;
        background-color: #9c5fb5;
        text-align: center;
    }
    #mobile-footer-divider {
        margin-top: 10px;
        border-top: 1px solid #999;
        width: 100%;
        height: 20px;
    }
    .topic-row, .topic-row-feature {
        margin-top: -15px !important;
        padding-left: 0 !important;
        padding-top: 0;
    }
    .topic-row-image, .topic-row, .topic-row-feature {
        width: 100% !important;
        height: 100% !important;
    }
    .topic-row .topic-content p {
        margin-bottom: 10px;
    }
    .topic-row .topic-content h2 {
        margin-bottom: 10px!important;
    }
    #category-page .topic-row-image > img {
        margin: 0 10px 10px 0;
    }
    .topic-row-image {
        display: inline-grid;
    }
    .topic-row-image .topic-content {
        width: 60%;
        float: left;
    }
    .topic-row-image .topic-content h2 {
        margin-bottom: 10px !important;
        top: 0 !important;
        line-height: 14px;
    }
    .topic-row-image > .topic-content p {
        top: 0 !important;
        margin-left: 0 !important;
    }
    #category-page #category-gallery {
        margin-bottom: 10px;
    }
    #category-page #category-gallery #mobile-category-gallery-top p {
        padding-bottom: 15px;
    }
    #random {
        display: none;
    }
    #mobile-category-gallery-top img {
        width: 100%;
        margin: 0 0 10px 0;
    }
    #category-page h2 {
        /*line-height: 10px;*/
    }
    #category-page h2 a {
        font-size: 16px;
        color: #9c5fb5;
    }
    #other #btn-find-out, #other #btn-donate, #extra #btn-view-all {
        width: 100%;
    }

    /* ===================================================== */
    /* VIDEO LANDING PAGE AND INDIVIDUAL PAGES               */
    /* ===================================================== */
    #video-right-column #video-results-pager, 
    #video-right-column #video-results-container,
    #video-right-column,
    #video-left-column {width: 100%!important;margin-bottom:30px;}
    #video-main .video {display: none!important;} 
    .tooltip {
        display: none!important;
    }
    #video-description {
        margin-left: 10px;
    }
    #video-description h3 {
        color: #9c5fb5!important;
        font-size: 14pt!important;
    }
    #video-right-column .video-thumbnail {
        width: 225px!important;
        height: auto!important;
        margin-top: 10px;
    }
    #video-right-column .video-thumbnail img {
        border-radius: 0px!important;
    }
    #video-right-column .mobile-video-overlay {
        margin-left: 40%;
        margin-top: 15%;
        position: absolute;  
    }
    
    #video-main #video-lists .mobile-video-overlay, #video-main #video-list .mobile-video-overlay {
        margin-left: 40%;
        margin-top: 15%;
        position: absolute;
        width: 20%;    
    }
    #video-right-column .mobile-video-overlay img {
        width: 30%!important;
    }
    #video-lists .mobile-video-overlay img, #main-body #video-list .mobile-video-overlay img  {
        width: 30%!important;
    }
    #video-right-column #video-filters {display: none;}
    .mobile-video-title {position: absolute; width:100%; height:53px;background-color: #9c5fb5; color: #ffffff;opacity:.8;margin-top:-55px;}
    .mobile-video-title h3 {margin: 10px 0px 0px 10px;color: #ffffff!important; font-size: 10pt!important;font-weight: bold;}
    #video-left-column #FilterList li {float: left;width:50%}
    #video-left-column ul {margin-left: 5px!important;width:100%!important;color:#9c5fb5 !important; font-size:9pt!important;}
    #video-left-column h1 {float: left;margin-left: 0px;width: 70%;margin-bottom:0px!important;font-size:18pt;margin-top:10px;}
    #video-left-column h3 {display: none;}
    #video-tab {display: none!important;}
    #video-lists #video-list .video-thumbnail img, #video-most #video-list .video-thumbnail img {height: auto!important; width: 100%!important; border-radius: 0px!important;}
    #video-lists #video-list .video-thumbnail, #video-most #video-list .video-thumbnail {width: 100%!important; height: auto!important;}
    #video-lists #video-list .video-thumbnail p, #video-most #video-list .video-thumbnail p {display: none!important;} 
    #video-filter-list {background-color: #e4e4e4; border: 1px solid #9c5fb5; clear: both; display: block; width: 100%; height: auto; overflow: hidden; padding:10px 0px 0px 0px;margin-left:0px;}
    #mobile-filter {width:27%;background-color: #e4e4e4;height:35px;float: right; color: #ffffff;padding:8px;margin-top:10px;margin-right:0px;border: 1px solid #9c5fb5;}
    #mobile-filter a {color: #9c5fb5!important;}
    #mobile-filter .arrow {float:left;margin:5px 10px 0px 0px;}
    .mobile-filter-video {height: 40px!important;}
    #mobile-filter a {color: #9c5fb5;}
    #main-body #video-right-column .videoResults-PagerInternal{display: none!important;}
    #video-header h1 {width: 60%!important;font-size: 16pt;float: left;}
    .videoResults-Pager {
        background-color: #9b5ab6;
        border-radius: 7px;
        float: left;
        height: 25px;
        margin: 0px 2px 0px !important;
        text-decoration: none;
        width: 25%;
        color: #9b5ab6;
        padding-top: 10px;
    }
    .videoResults-Pager a:link {
        color: #ffffff!important;
        font-size: 80%!important;
    }
    .videoResults-Pager a:hover {
        text-decoration: none!important;
        font-size: 80%!important;
    }
    #videoResults-PagerNext {padding: 1px 7px 4px 2px;float:right;margin-right:10px!important}
    #videoResults-PagerPrev {padding: 1px 7px 4px 2px;float:left;}
    #videoResults-PagerLast {display:none!important;}
    #videoResults-PagerFirst {display:none!important;}
    .videoResults-PagerInternal{display: none!important;}
    #video-lists {
        display: block;
    }
    #video-most {
        display: none;
    }
    #video-content {padding: 0px 0px;margin-top: -4px;}


    /* ===================================================== */
    /* DUE DATE CALCULATOR                                   */
    /* ===================================================== */
    #due-date-calc {background-image: none!important;width:100%!important;padding:0px!important;height:auto!important;}
    #due-date-calc-top {width: 100%!important;}
    #due-date-calc-top h2 {width: 94%!important;}
    #due-date-calc-bottom {width: 94%!important; margin-left: 0px;} 
    #due-date-calc-bottom #calc {margin-bottom: 30px;} 
    .calc-desktop-button, #due-date-text {display:none!important} 
    #due-date-calc #calcform {width: 100%!important;margin-bottom:30px;height: auto!important;}
    #ddc-month {
        width: 41%!important;
        height: 40px!important;
        overflow: hidden;
        background: url("/glue/css-images/new_arrow.png") no-repeat 95%!important;
        border: 1px solid #afafaf;
        border-radius: 6px;
    }  
    #ddc-date {
        width: 20%!important;
        margin-left: 6%!important;
        height: 40px!important;
        overflow: hidden;
        background: url("/glue/css-images/new_arrow.png") no-repeat 95%!important;
        border: 1px solid #afafaf;
        border-radius: 6px;
    }
    #ddc-year {
        width: 25%!important;
        margin-left: 6%!important;
        float: right!important;
        height: 40px!important;
        overflow: hidden;
        background: url("/glue/css-images/new_arrow.png") no-repeat 95%!important;
        border: 1px solid #afafaf;
        border-radius: 6px;
    }
    #ddc-year select, #ddc-date select, #ddc-month select, #ddc-day-amount select {
        padding: 8px 0px 0px 4px !important;
        color: #9c5fb5!important;
        font-size: 12pt!important;
        font-weight: bold!important;
    }
    .result-margin-present h2, .result-margin-future h2 {
        font-size: 12pt!important;
        float: left;
        width: 20%;
        line-height: 16px!important;
        margin-top: 20px!important;
    }
    .result-margin-present h3, .result-margin-future h3 {
        font-size: 12pt!important;
        float: left;
        width: 70%;
        color: #868686!important;
        line-height: 16px !important;
    }
    #due-date-calc #week {
        width: 100%;
    }
    #due-date-calc .button {
        width: 100%!important;
        line-height: 40px;
    }
    #due-date-calc #error, #due-date-calc #error h3 {
        width: 100%!important;
    }

    /* ===================================================== */
    /* OVULATION CALCULATOR                                  */
    /* ===================================================== */
    #preg_calc_container {width: 100%!important;}
    #preg_calc_container #instructions p {display: none;}
    #instructions {width: 100%!important;margin-bottom:0px!important;}
    #calc {width: 100%!important;height:auto!important;padding: 0px!important;border: none!important;}
    #calc-question-mark {margin-top:0px!important;}
    #preg_calc_container #calcform {width: 100%!important;margin-bottom:30px;}
    #calc-controls {width:100%!important;}
    #preg_calc_container #calc h3 {width: 100%!important; margin-top: 15px!important;}
    #resultsLeft {float: none!important;width:100%!important;margin-left: 0px!important;clear:both;}
    #resultsRight {float: none!important;width:100%!important;margin-left: 0px!important;margin-top:0px!important;}
    #calcform #rule {display: none!important;}
    #calc-question-mark {height: auto!important;}
    #calc-controls h3 {margin-top: 0px!important;}
    #calc-month {
        width: 41%!important;
        height: 40px!important;
        overflow: hidden;
        background: url("/glue/css-images/new_arrow.png") no-repeat 95%!important;
        border: 1px solid #afafaf;
        border-radius: 6px;
    }  
    #calc-date {
        width: 20%!important;
        height: 40px!important;
        overflow: hidden;
        background: url("/glue/css-images/new_arrow.png") no-repeat 95%!important;
        border: 1px solid #afafaf;
        border-radius: 6px;
        margin-left: 5%!important;
    }
    #calc-day-amount {
        width: 20%!important;
        height: 40px!important;
        overflow: hidden;
        background: url("/glue/css-images/new_arrow.png") no-repeat 95%!important;
        border: 1px solid #afafaf;
        border-radius: 6px;
        margin-left: 0px!important;
    }
    #calc-year {
        width: 26%!important;
        height: 40px!important;
        overflow: hidden;
        background: url("/glue/css-images/new_arrow.png") no-repeat 95%!important;
        border: 1px solid #afafaf;
        border-radius: 6px;
        margin-left: 5%!important;
    }
    #calc-year select, #calc-date select, #calc-month select, #calc-day-amount select {
        padding-top: 8px!important;
        color: #9c5fb5!important;
        font-size: 12pt!important;
        font-weight: bold!important;
        width: 120%!important;
    }

    /* Mobile HeaderContainer */
    #mobile-header-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #FFF;
        border-bottom: 1px solid #E4E4E4;
        padding: 0;
        z-index: 9999;
    }
    /* Mobile Logo  */
    #mobile-header-container #logo img {
        width: 134px;
        float: left;
        margin-left: 10px;
        margin-top: 15px;
    }
    
    /* Hamburger Container */
    #hamburger {
        float: left;
        margin: 15px 5px 0 5px;
        padding: 5px 5px 10px 5px;
    }
    .ham-active {
        background-color: #E4E4E4;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        transition: all .4s;
    }
    
    /* Mobile Nav Container */
    #mobileNav-container {
        left: 0;
        top: 60px;
        position: fixed;
        z-index: 9999;
        width: 100%;
        height: 825px;
        overflow: scroll;
        background: rgba(102,102,102,0.7);
        display: none;
    }
    
    #mobile-signup-block { 
        left: 0px;
        top: 60px;
        position: fixed;
        z-index: 1000;
        width: 100%;
        
        /*height:87%;*/
        height:80%;
        
        overflow-y:scroll;
        overflow-x:hidden;
        padding:0px 0px;
        background: #ffffff;
        opacity: 1;
        display:block;
        margin-bottom:5px;
    }
    .mobile-signup-block_top {
        top: 60px !important;
    }
    #mobile-signin-block { 
        left: 0px;
        top: 60px;
        position: fixed;
        z-index: 1000;
        width: 100%;
        
        /*height:87%;*/
        height:87%;
        
        overflow-y:scroll;
        overflow-x:hidden;
        padding:0px 0px;
        background: #ffffff;
        opacity: 1;
        display:block;
        margin-bottom:5px;
    }
    #mobile-loggedin {
        height: 120px;
        margin-top: 45px;
        background-color: #FFF;
    }
    .mobile-button-row {
        font-family: 'CenturyGothic';
        font-size: 15px;
        height: 50%;
    }
    .mobile-button-container {
        float: left;
        height: 100%;
        width: 50%;
        padding: 0 5px;
    }
    .mobile-button-container p {
        font-size: 15px;
        color: #666666;
        white-space: nowrap;
    }
    .mobile-user-button {
        display: block;
        width: 100%;
        height: 35px;
        line-height: 35px;
        padding: auto;
        margin: 0 auto;
        border-radius: 5px;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
    }
    .mobile-user-button:hover, .mobile-user-button:active, .mobile-user-button:focus {
        color: #ffffff;
    }
    .mobile-user-button.profile {
        background-color: #9c5fb5;
    }
    .mobile-user-button.dashboard {
        background-color: #d1abde;
    }
    #message {
        text-align: left;
        padding-top: 20px;
        padding-left: 5px;
        font-size: 15px;
        color: #666666;
    }
    #signout {
        text-align: right;
        padding-top: 20px;
        padding-right: 5px;
    }
    
    /*.mobile-incorrect-login-block { 
        left: 0px;
        top: 60px;
        position: fixed;
        z-index: 1000;
        width: 100%;
        height:87%;
        overflow-y:hidden;
        overflow-x:hidden;
        padding:0px 0px;
        background: #ffffff;
        opacity: 1;
        display:block;
        margin-bottom:5px;
    }*/
    
    .mobile-signin-multiple-accounts-block-inner {
        margin-left:0px;
        height:100px;
    }
    
    #mobile-incorrect-signup-block {
        height: auto;
    }
    
    #mobileNav-container #search-container {
        position: absolute;
        width: 100%;
        height: 45px;
        background: #e4e4e4;
        padding: 6px 10px 0px 10px;
        color: #fff;
    }
    #mobileNav-container #search-container .search-button {
        float: right;
        top: -30px;
        position: relative;
        width: 25px;
    }
    #mobileNav-container #search-container .search-input {
        float: right;
        width: 100%;
    }
    #mobileNav-container #search-container input {
        margin-right: 5px;
        padding: 0 5px;
        width: 90%;
        height: 32px;
        border: none;
        border-radius: 5px;
        color: #333;
    }
    #mobileNav-container #search-container span {
        top: 5px;
        font-size: 20px;
    }
    #contentLayer {
        display: none;
        height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 5000;
        min-height: 1062px;
        background-color:#333;
        opacity: .4
    }
    #mobileNav-container #signin {width:95.5%;height:40px; background-color:#ed6d3b;float:left; border-bottom:1px #fff solid;margin-left:2%;margin-right:2px;padding-bottom: 4px; padding-top: 4px;margin-bottom:2px}
    #mobileNav-container #navigation-links {background: #9c5fb5; width:100%; float:left;margin-bottom: 100px;height: 500px;border-top:1px solid #ccc;}
    #mobileNav-container #navigation-links h1 {font-family: "CenturyGothicBold","CenturyGothic",sans-serif; font-size: 18pt; color:#fff; margin:10px 10px -8px 10px;font-weight: bold;}
    #mobileNav-container #navigation-links ul { padding:5px 20px 0px 20px;margin:0; list-style: none}
    #mobileNav-container #navigation-links ul li a { color:#fff; font-family: "Verdana"; font-size: 16pt; text-decoration: none;margin:0;line-height: 130%;}
    #mobileNav-container #navigation-links li {
        background-color: #cdadd9;
    }
    #mobileNav-container #loggedin {display:none; width:95.5%;height:60px; background-color:#ed6d3b;float:left; border-bottom:1px #fff solid;margin-left:2%;margin-right:2px;padding-bottom: 4px; padding-top: 4px;margin-bottom:2px;margin-top:0px;}
    #mobileNav-container #loggedin #message p{font-family: verdana; font-size: 11pt;color:white;padding:0;margin:0;}
    
    #mobile-signin {
        margin-top: 45px;
        padding-top: 12px;
        width: 100%;
        height: 64px;
        background: #E4E4E4;
    }
    .fancybox-close {display:none !important;}
    
    .mobile .fancybox-inner{
        background:  white !important;
        height: 400px !important;
        
        padding: 5px;
        padding-left: 0px;
        
        overflow: hidden !important;
        position: fixed;
        top: 60px;
        width: 100% !important;
        z-index: 1001;
    }

    .mobile-donate-button {
        margin: 13px 15px 0 0;
        padding-top: 8px;
        background-color: #ed6d3b;
        border-radius: 5px;
        float: right;
        width: 90px;
        height: 35px;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .mobile-donate-button:hover, .mobile-donate-button:visited, .mobile-donate-button:active, .mobile-donate-button:link {
        color: #fff;
        text-decoration: none;
    }
    .mobile-donate-button:focus {
        outline: none;
    }
    /* Mobile Calculator Button - 100% button  x 32px */
    #calculteBTN {width:100%!important;clear: both;margin-left: 0px!important;}
    #calculate {
        background-color: #9b5ab6;
        border-radius: 7px; 
        -moz-border-radius: 7px; 
        -webkit-border-radius: 7px; 
        float: left;
        width: 100%;
        height: 40px;
        text-decoration: none!important;
        margin-top: 20px!important;
    }
    #calculate p {
        padding:0; 
        margin-top:10px; 
        font-weight:bold; 
        font-size: 12pt;
        color:#ffffff!important;
        font-family: verdana;
        text-align:center;
        vertical-align:middle;
        line-height: 2em;
    }
    /* Mobile Video Button - 26% button  x 35px */
    .mobile-video-button {
        background-color:#9b5ab6;
        border-radius: 7px; 
        -moz-border-radius: 7px; 
        -webkit-border-radius: 7px; 
        float: right;
        width: 25%;
        height: 35px;
        margin: 0px!important;
        text-decoration: none!important;
    }
    .mobile-video-button p {
        padding: 4px 0px; 
        margin:0; 
        font-weight:bold; 
        font-size: 10pt;
        color:#fff;
        font-family: verdana;
        text-align:center;
        vertical-align:middle;
        line-height: 2em;
    }
    a.mobile-video-button:hover {
        text-decoration: none;
    }
    
    .mobile-signin-button, .mobile-signup-button, .mobile-dashboard-button, .mobile-signout-button {
        margin: 0 0 0 20px;
        padding-top: 8px;
        background-color: #fff;
        border-radius: 5px; 
        top: -43px;
        /*position: relative; */
        float: left;
        width: 130px;
        height: 40px;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        font-size: 17px;
        font-family: 'CenturyGothic';
    }
    .mobile-signin-button {
        margin-left: 10px;
        background-color: #00bfd7;
    }
    .mobile-signup-button {
        background-color: #9c5fb5;
    }
    a.mobile-signin-button:hover, a.mobile-signup-button:hover, a.mobile-dashboard-button:hover {
        color: #fff;
        text-decoration: none;
    }
    #topic-page #more-articles {
        width: 100%;
    }
    #bereavement-kit-page #form-left, #bereavement-kit-page #form-right {
        width: 100%;
    }
    #bereavement-kit-page form input, #bereavement-kit-page form select {
        width: 100%;
    }
    #form-actions {
        width: 100%;
        text-align: center;
    }
    
    #form-actions .button {
        margin-bottom: 20px;
    }
    /* Account Info */
    #account-nav {
        display: none;
    }
    #account-nav-mobile {
        display: block;
        margin-bottom: 10px;
        border-bottom: 1px solid #9c5fb5;
    }
    #account-forms {
        margin-left: 0;
        width: 100%;
        left: 0;
    }
    #account-forms p {
        text-align: center;
    }
    #save-form {
        text-align: center;
    }
    #btn-save {
        margin-bottom: 20px;
        width: 100%;
    }
}

@media only screen and (max-width: 330px) {
    .bx-wrapper .bx-controls-direction a {
        top: 66%;
    }
}

/* Mobile Navigation */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
    width: 100%;
    height: 1300px;
    font-family: 'CenturyGothic';
    color: #fff;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu ul li:last-child() {
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  padding-left: 40px;
  cursor: pointer;
  z-index: 2;
  font-size: 18px;
  text-decoration: none;
  color: #595959;
  background: #e4e4e4;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  font-family: 'CenturyGothic';
  border-bottom: 1px solid #EEE;
}
#cssmenu > ul > li > a:hover {
  color: #ffffff;
  background-color: #9c5fb5;
}
#cssmenu ul ul > li.has-sub.open > a {
  color: #ffffff;
  background-color: #9c5fb5;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  /*right: 26px;*/
  left: 22px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #474747;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  /*right: 22px;*/
  left: 18px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #474747;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  padding-left: 40px;
  cursor: pointer;
  z-index: 2;
  font-size: 18px;
  text-decoration: none;
  color: #595959;
  background: #ead1f4;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  /* proposed */
  /*margin-bottom: 5px;*/
  /*border-top: 2px solid #C9B5D0;
  border-bottom: 2px solid #C9B5D0;*/
}
#cssmenu ul ul ul li a {
    margin-bottom: 0;
    border-top: none;
    /* proposed */
    padding-left: 40px;
    background: #fff;
    /*border-bottom: 2px solid #ccc;*/
}
/*#cssmenu ul ul ul li a:after {
    font-size: 16pt;
    color: #eee;
    float: right;
    content: "\25B6";
    top: -4px;
    right: -5px;
    position: relative;
}*/
#cssmenu ul ul li a:hover {
  color: #9c5fb5;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #474747;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #474747;
}