
/* BPS Maintenance */
    .BPSCon_Maintenance                         {height: 65vh;}
    .BPSCon_Maintenance_Content                 {position:relative; top:15vh;}
    .BPSCon_Maintenance_Content .fa             {font-size:100px; color:#0088cc;}
    @media only screen and (max-width:768px) {
        .BPSCon_Maintenance                     {height: 40vh;}
        .BPSCon_Maintenance_Content             {top:5vh;}
        .BPSCon_Maintenance_Content h1          {font-size:20px;}
        .BPSCon_Maintenance_Content .fa         {font-size:50px;}
    }

/* BPS Parallax Banner */
    .BPSCon_404 *                               {color:#fff; text-align:center;}
    .BPSCon_Parallax_Content                    {position:relative;}
    .BPSCon_404 h1                              {font-weight: 700; font-size: 270px; line-height: 1em; margin: 15px;}
    @media only screen and (max-width:768px) {
        .BPSCon_404 h1                              {font-weight: 700; font-size: 100px; line-height: 1em; margin: 0 30px 0 0;}
    }
    .BPSCon_404 h2                              {font-weight: 700; font-size: 35px; line-height: 1em; margin: 0;}
    .BPSCon_404 h3                              {margin-bottom:50px;}
    @media only screen and (max-width:768px) {
        .BPSCon_404 h1                              {font-size: 100px;}
        .BPSCon_404 h2                              {font-size: 28px;}
    }
    .BPSCon_Parallax_Image                      {position:relative; background: transparent url('../Images/bioBgtwitter.jpg') no-repeat center center; background-attachment: fixed; background-size:cover;
                                                    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
                                                    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
                                                    -webkit-filter: grayscale(100%);
                                                    filter: gray;
                                                    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
                                                }
    .BPSCon_Parallax_Image::before              {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-image: url('../Images/Events_Overlay.png');}

/* BPS Event CountDown */
    .BPSEventCountDown                          {position:relative; background: transparent url('../Images/bioevent_countdown.jpg') no-repeat center center; background-size:cover;}
    .BPSEventCountDown::before                  {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-image: url('../Images/Events_Overlay.png');}
    .BPSEventCountDown > .text-center           {position:relative; z-index:2;}
    .BPSEventCountDown #DateInitial             {display:none;}
    .BPSEventCountDown h1                       {color:#000; font-weight:700; margin-top:60px; text-transform: uppercase; font-size:60px;}
    .BPSEventCountDown h3                       {color:#000; font-weight:700; margin-top:0; text-transform: uppercase; font-size:36px;}
    .Counters > div                             {display:inline-block; position:relative; border:solid 2px #000; color:#000; background-color:rgba(255,255,255,0.78); width:120px; height:120px; padding:15px; margin:15px;}
    .Counters > div > div                       {font-size: 48px; height:32px; padding:10px 0;}
    .Counters > div > hr                        {margin:22px 0 10px 0 !important;}
    .BPSEventCountDownText                      {padding-top:30px;}
    .BPSEventCountDownText p                    {font-size:24px; color:#000;}
    .BPSEventCountDownText p .btn               {margin:30px 0 60px 0;}
    .BPSEventCountDownDetails                   {background-color:rgba(0,0,0,0.75); padding:30px 15px;position:relative; z-index:2;}
    .BPSEventCountDownDetailBox .fa             {position:absolute; left:40px; top:10px; width:51px; margin-bottom:15px; text-align: center; color:#0088cc; font-size:48px;}
    .BPSEventCountDownDetailBox > div           {position:relative; margin: 15px 0 15px 85px; color:#fff;}
    .BPSEventCountDownDetailBox > div h4        {font-weight:600; text-transform:uppercase; margin-bottom:0;}

    @media only screen and (max-width:768px) {
        .BPSEventCountDownDetailBox .fa         {top:0;}
    }

/* BPS Image Left Gray Backgroun with Title */
    .BPSImageLeftCnt                            {background-color:#f2f2f2; margin-bottom:30px;}
    .BPSImageLeftCntImage                       {overflow:hidden;}
    .BPSImageLeftCntImage img                   {height:100%; width:auto;}
    .BPSImageLeftCntText                        {padding:15px 0;}
    .BPSImageLeftCntTitle                       {font-size:24px; font-weight:600; display:block; padding-bottom:15px;}
    @media only screen and (max-width:768px) {
        .BPSImageLeftCntImage                       {height:200px;}
        .BPSImageLeftCntImage img                   {width:100%; height:auto;}
    }

/* BPS Donate */
    .BPSDonateContainer                         {position:relative; overflow:hidden;}
    .BPSDonateContainerImage                    {position:absolute; left:0; right:0; top:0; width:100%;}
    .BPSDonateContainerText                     {position:relative; padding: 65% 15px 15px 15px;}

/* Rounded Image */
    .BPSRoundedImage                            {margin-bottom:15px; padding:30px 0; border-bottom:solid 1px #e7e7e7;}
    .img-roundresponsive                        {border-radius:100%; left:5%; width:90%; box-shadow: 0 0 0 10px #00000033; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative;}
    .BPSRoundedImageTitle                       {display:block; padding-bottom:25px; font-weight:700;}
    .BPSRoundedImage .btn                       {margin-top:15px;}

    @media only screen and (max-width:768px) {
        .BPSRoundedImage .img-roundresponsive   {width:80%; left:10%; margin-bottom:30px;}
    }

/* Rounded borders with icon */
    .BPSRoundedIcon h2                          {font-size:20px; font-weight:700 !important;}
    .BPSRoundedIcon .box-content                {margin-bottom:15px;}
    .BPSRoundedIcon .featured-box .box-content  {padding: 15px !important;}
    .BPSRoundedIcon .edn_article                {margin-bottom:0 !important;}
    .BPSRoundedIcon .eds_news_Biophysics        {margin-bottom:0 !important;}
    .BPSRoundedIcon .ModEasyDNNnewsWidgetsC .NewsHighlightsArticleImage2 {margin-left:-15px; margin-right: -15px; width:109%;}
    .BPSRoundedIcon .IconListLinks                      {margin-left:-15px; margin-right: -15px;}

/* === Action Forms === */
    /* Contact Buttons */
    #dnn_ctr1597_ModuleContent.ModActionFormC .field-container                  {padding-left: 0; margin-left:0 !important;}
    #dnn_ctr1597_ModuleContent.ModActionFormC .field-container .form-button     {background-color: #0088cc !important; border:solid 3px #0088cc; padding:4px 12px; color:#fff !important; text-shadow:none; border-radius:100px;}
    
/* Twitter */
.BPSTwitter                                     {text-align: center; padding-bottom: 30px;}
.BPSTwitter h2                                  {color: #fff; text-align: left;}
.connect-twitterfeed-item                       {padding: 0 !important;}
.connect-twitterfeed-author                     {width: 100% !important;}
.connect-twitterfeed-content                    {width: 100% !important; margin: 0px !important;}
.connect-twitterfeed-content h2                 {text-align: center;}
.connect-twitterfeed-content a                  {background-color: rgba(0,0,0,0.5); padding: 0 10px;}
.connect-twitterfeed-footer                     {width: 100% !important;}

/* Color Container */
.BPSColorContainer                              {height: 380px; padding: 15px;}
.BPSColorContainer .Normal p                    {color: #fff; margin-bottom: 15px;}
.BPSColorContainer .Normal a                    {display: inline-block; width: 100%; padding: 25px; font-size: 160%; font-weight: 300; margin: 5px 0; color: #fff; text-align: center;}

/* Color Container Small */
.BPSColorContainerSmall                         {height: 315px; padding: 40px 15px;}
.BPSColorContainerSmall .Normal p               {margin: 35px 0; text-align: center; font-weight: 700; font-size: 200%;}
.BPSColorContainerSmall .Normal a               {display: inline-block; width: 100%; padding: 25px; font-size: 160%; font-weight: 300; margin: 5px 0; color: #fff; text-align: center;}

@media only screen and (max-width:1200px) {
    .BPSColorContainerSmall                     {height: 260px; padding: 30px 15px;}
}

@media only screen and (max-width:980px) {
    .BPSColorContainerSmall                     {height: auto; padding: 15px;}
}

/* No Title */
.BPSNoTitlePadding                              {margin: 40px 0;}
@media only screen and (max-width:768px) {
    .BPSNoTitlePadding .Normal                  {margin: 20px 0;}
}
/* Seconday Banner */
.BPSSecondaryBannerImage                        {position: relative;}
.BPSSecondaryBannerOverlay                      {position: absolute; left: 0; top: 0; bottom: 0; right: 20%; background: -webkit-linear-gradient(left, rgba(255,255,255,1) 50%, rgba(255,255,255,1));
                                                 background: -o-linear-gradient(right, rgba(255,255,255,1) 50%, rgba(255,255,255,0)); background: -moz-linear-gradient(right, rgba(255,255,255,1) 50%, rgba(255,255,255,0));
                                                 background: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(255,255,255,0)); }
.BPSSecondaryBannerImage .img-responsive        {width: 100%;}
.BPSSecondaryBannerContent .Normal              {position: absolute; top: 30px; left: 20px; width: 50%;}
.BPSSecondaryBannerContent .Normal h1           {font-weight: 700; margin-bottom: 40px; line-height: 1em;}

@media only screen and (max-width:1200px) {
    .BPSSecondaryBannerContent .Normal              {top: 10px;}
}

@media only screen and (max-width:980px) {
    .BPSSecondaryBannerContent .Normal h1           {margin-bottom: 0; font-size: 300%;}
    .BPSSecondaryBannerContent .Normal p            {display: none;}
}

@media only screen and (max-width:768px) {
    .BPSSecondaryBannerContent .Normal              {bottom: 20px; left: 20px; top: auto; width: 100%;}
    .BPSSecondaryBannerContent .Normal h1           {font-size: 200%;}
}

@media only screen and (max-width:500px) {
    .BPSSecondaryBannerContent .Normal h1           {display: none;}
}

/* Take Action */
.BPSTakeAction                                  {margin: 45px 0 0 0;}
.BPSTakeActionHeader                            {display: inline-block; width: 20%; font-size: 24px; font-weight: 700; color: #fff; line-height: 50px; padding:0 35px; position: relative; text-align: center;}
.BPSTakeActionHeader:after                      {content:''; z-index: 10; position: absolute; top: 0; right: -25px; border-top: 25px solid transparent; border-bottom: 25px solid transparent; width: 0; height: 0;}
.BPSTakeActionLinks                             {background-color: #f1f1f1; height: 50px; float: right; display: block; width: 80%;}
.BPSTakeActionLinks .Normal a                   {display: inline-block; line-height:1.2em; height: 50px; color: #333; vertical-align: middle; width: 25%; padding: 5px 25px; text-align: center; position: relative; z-index: 1;}
.BPSTakeActionLinks .Normal a:hover             {background-color: #0088cc; color: #fff;}
.BPSTakeActionLinks .Normal a:first-child       {padding-left: 45px;}
.BPSTakeActionLinks .Normal a:after             {content: ''; min-height: 50px; border-left: solid 1px #d1d1d1; position: absolute; top: 0; right: 0;}
.BPSTakeActionLinks .Normal a:last-child:after  {border-left: none;}

@media only screen and (max-width: 1200px) {
    .BPSTakeActionLinks .Normal a               {padding: 5px 20px;}
    .BPSTakeActionHeader                        {padding: 0 5px;}
}
@media only screen and (max-width: 980px) {
    .BPSTakeActionHeader                        {float: none; width: 100%;}
    .BPSTakeActionHeader:after                  {display: none;}
    .BPSTakeActionLinks                         {height: auto; padding: 20px 0; width: 100%;}
    .BPSTakeActionLinks .Normal a               {display: block; width: 100%; height: 30px; text-align: left; transition: 0.3s; border-bottom: solid 1px #e7e7e7;}
    .BPSTakeActionLinks .Normal a br            {display: none;}
    .BPSTakeActionLinks .Normal a:first-child   {padding-left: 20px;}
    .BPSTakeActionLinks .Normal a:after         {content: '>'; border-left: none; height: auto; top: 5px; right: 20px; transition: 0.3s;}
    .BPSTakeActionLinks .Normal a:hover:after   {right: 15px;}
}
@media only screen and (max-width:768px) {
    .BPSTakeAction                              {margin: 20px 0 0 0;}
}

/* Header Links */
header .BPSNoTitle                  {display: inline-block;}
footer .BPSNoTitle                  {display: inline-block;}
.BPSNoTitleContent                  {display: inline-block;}
.BPSNoTitleContent p                {margin: 0;}
.BPSNoTitleContent .Normal a        {color: #fff; padding: 8px 5px; display: inline-block;}

@media only screen and (max-width: 767px) {
    header .BPSNoTitle              {display: block;}
    header .BPSNoTitle .Normal a    {font-size: 90%;}
    header .SmallWhiteSocialIcons   {display: none;}
}

/* Header 2 */
.BPSH2Title h2                      {font-weight: 300;}

/* Background Module */
.BPSBackgroundModule .Normal img    {max-width: 100% !important; height: auto !important;}

/* H2 Title Line Above*/
.BPSH2TitleLineAbove                {margin: 50px 0;}
.BPSH2TitleLineAboveLine            {position: relative;}
.BPSH2TitleLineAboveLine > div      {position: absolute; top: -5px; right: 0; width: 50%;}
.BPSH2TitleLineAbove h2             {font-weight: 700;}
@media only screen and (max-width: 768px) {
    .BPSH2TitleLineAbove            {margin: 20px 0;}
}
.BPSH2TitleLineAboveWithLinks li        {transition:0.4s; padding-top:10px; padding-bottom: 10px; border-bottom: solid 1px #f4f4f4; padding-left: 16px;}
.BPSH2TitleLineAboveWithLinks li:first-child {padding-top: 0;}
.BPSH2TitleLineAboveWithLinks li:hover  {background-color: #f4f4f4; border-bottom: solid 1px #e7e7e7;}

/* No Title Line Above */
.BPSNoTitleLineAbove                {margin: 50px 0;}
.BPSNoTitleLineAboveContents        {padding-top: 20px;}
@media only screen and (max-width: 768px) {
    .BPSNoTitleLineAbove            {margin: 20px 0;}
}

/* Banners Vertical */
.BPSBannersVertical .Normal img                         {width: 100% !important; height: auto !important; padding-bottom: 15px;}
.BPSBannersVertical .Normal p                           {margin-bottom: 0px;}
.BPSBannersVertical .Normal img:last-child              {padding-bottom: 0;}

@media only screen and (max-width: 768px) {
    .BPSBannersVertical .Normal img                     {width: 100% !important; height: auto !important; padding-bottom: 0; padding-top: 20px;}
}
/* H2 Line Above Categories */
.BPSH2TitleLineAboveCategories h2                       {display:inline-block;}
.BPSH2TitleLineAboveCategories .btn                     {float:right; background-color:#00395D !important; border-radius:5px !important; border:none; color:#fff;}