/* ==================================================
	Bootstrap Overwrites/Additions/Fixes
================================================== */
[role="main"] a { text-decoration: underline; }
a.btn,  nav a { text-decoration: none!important; }
.container { width: 98%; max-width: 1200px; }
.modal-content { border-radius: .5rem; }
.modal-header { color: #fff; background: #00555e /*cc*/; padding: .5rem 1rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
/* The close button has opacity that makes it fail a contrast check and it has no visual focus cue. Opacity turned off, focus style added. */
.close { opacity: 1; text-shadow: none; color: #fff; }
.close:focus { outline: 1px dotted #000; }
.close:focus, .close:hover { color: #fff!important; }
/* BS removes vertical scrollbar and adds padding to account for that on modal. Stop that. */
body, .modal { padding-right: 0!important; } 
.breadcrumb-item + .breadcrumb-item::before { color: #ccc; }
.form-control:focus { border-color: #008391 /*cc*/; box-shadow: 0 0 0 .2rem rgba(113,90,214,.25) /*cc*/; }
.lead { font-size: 1.375rem; }


/* ==================================================
	Smart Menus Overwrites
================================================== */
.sm { z-index: 999; }
.sm-clean { border-radius: 0; padding: 0; background: #494949; margin-top: 2px; }
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { font-family: inherit; font-weight: 300; font-size: 1rem; color: #fff; }
.sm-clean a.current { color: #0000EE; }
.sm-clean a .sub-arrow { background: #fff; }
.sm-clean a .sub-arrow:before { color: #333; font-size: 1.3rem; }
@media (min-width: 768px) {
    .sm-clean { border-radius: 0; margin-top: 0px; }
    .sm-clean a { padding-top: 1.125rem; padding-bottom: 1.125rem; transition: background .1s linear; }
    .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted { color: #fff; background: #5b5b5b; padding-top: 1.125rem; padding-bottom: 1.125rem; transition: background .1s linear; }
    .sm-clean a.current { color: #fff; }
	.sm-clean ul { margin-top: 0!important; border-radius: 0 0 4px 4px!important; border-top: none; }
		.sm-clean > li > ul::before, .sm-clean > li > ul::after { display: none; }
    .sm-clean ul a { padding: 6px 20px 6px 30px; font-size: .875rem; font-weight: 400; }
    .sm-clean ul li:first-child a { padding-left: 20px; font-weight: 600; }
    .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { background: #eee; color: #333; padding: 6px 20px 6px 30px; font-size: .875rem; font-weight: 400; }
    .sm-clean ul a.current { color: #fff; }
    .sm-clean span.scroll-up:hover span.scroll-up-arrow, .sm-clean span.scroll-up:hover span.scroll-down-arrow { border-color: transparent transparent #0000EE transparent; }
    .sm-clean span.scroll-down:hover span.scroll-down-arrow { border-color: #0000EE transparent transparent transparent; }
    .sm-clean a .sub-arrow { border-top-color: #fff; margin-top: 0; right: 10px; background: transparent; }
}


/* ==================================================
	Misc
================================================== */
html { overflow-y: scroll; scroll-behavior: smooth; } /* Force scrollbar on right side to avoid viewport width change on short pages */
body { font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-size: 1.125rem; font-weight: 300; }
img, object, embed, video { max-width: 100%; height: auto; width: auto; } /* responsive media */

h1 { font-family: "Merriweather","Times New Roman",Times,Georgia,serif; font-size: 2.25rem; font-weight: 300; padding: 1.875rem 0; }
h2, h3 { padding-top: 1.875rem; margin-top: 0; margin-bottom: 0.625rem; font-weight: 700; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.15rem; margin-top: 1.25rem; font-weight: 700; }
h5 { font-size: 0.875rem; font-weight: 500; margin-top: 0.625rem; }

/* header icons */
[class*="icon-header-"] { padding-left: 100px; position: relative; display: inline-block; margin: 1rem; }
[class*="icon-header-"]:before { position: absolute; content: ""; display: block; height: 80px; width: 80px; background-repeat: no-repeat; background-position: center; border-radius: 50%; left: 0; top: 50%; margin-top: -40px; background-size: cover; border: 5px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.2); }
.icon-header-webinar:before { background-image: url("../toolbox/images/dccps/icon-2x-webinar.png"); }
.icon-header-announce:before { background-image: url("../toolbox/images/dccps/icon-2x-announce.jpg"); }
.icon-header-application:before { background-image: url("../toolbox/images/dccps/icon-2x-application.png"); }
.icon-header-chat:before { background-image: url("../toolbox/images/dccps/icon-2x-chat.jpg"); }
.icon-header-export:before { background-image: url("../toolbox/images/dccps/icon-2x-export.jpg"); }
.icon-header-connect:before { background-image: url("../toolbox/images/dccps/icon-2x-connect.jpg"); }
.icon-header-news:before { background-image: url("../toolbox/images/dccps/icon-2x-news.png"); }
.icon-header-spotlight:before { background-image: url("../toolbox/images/dccps/icon-2x-spotlight.jpg"); }
@media (max-width: 576px) {
	[class*="icon-header-"] { padding-left: 0; margin: 0; }
	[class*="icon-header-"]:before { display: none; }
}

.extlink { display: inline-block; margin: -8px 0 0 3px; vertical-align: middle; }

/* NCI Logo */
	/* NCI has STRICT requirements for the logo. Do not edit this CSS. Contact Stephanie Schmitt or Brian Downey for help. */
	.nciLogo img { max-height: 54px; max-width: 616px; margin: 23px 0; }

/* backgrounds */
.bg-lightgray { background-color: #f2f2f2; }
.bg-primary { background-color: #008390 /*cc*/; }
.bg-lightprimary { background-color: #59d1df /*cc*/; }
.bg-darkprimary { background-color: #01555f /*cc*/; }

/* modify 1-col template for homepage: hide breadcrumbs, accessibly hide h1 */
.home .tophat h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.home .tophat nav { display: none; }


/* ==================================================
	Header Search
================================================== */
.searchForm { position: relative; }
.searchForm input { padding-right: 3em; }
.searchForm button { position: absolute; top: 2px; right: 2px; background: none; border: none; padding: 4px 8px; margin: 0; border-radius: .25rem;  }
.searchForm button:hover, .searchWrap button:focus { background: #e3ddfe /*cc*/; }
@media (max-width: 47.99em) {
    .searchForm { margin-top: 1rem; }
}


/* ==================================================
	Site Ribbon
================================================== */
.ribbon { background: #008391 /*cc*/; color: #fff; font-weight: 600; padding: .55rem 0; line-height: 1.25; }
.ribbon span { display: inline-block; padding-left: 38px; background: url("../images/icn-hex.png") left center no-repeat; }


/* ==================================================
	Mobile Main Navigtaion
================================================== */
.navBar { position: relative; background: #4a4a4a; }
#menu-button, #search-tog { display: none; }
#search-tog { position: absolute; right: 0; top: 0; margin-right: 1.275rem; }
.js .mobileState { display: block; }
@media (max-width: 47.99em) {
	.navBar { padding: 1rem 0; }
	/* only show the toggle and hide the menu if JS is enabled */
	.js #menu-button, .js #search-tog { display: block; width: 46.5%; font-weight: 600; background: #fff; box-shadow: inset 0 -1rem .5rem rgba(0,0,0,.12); border: 1px solid #999; color: #008391 /*cc*/; }
	.js #menu-button[aria-expanded="true"], .js #search-tog[aria-expanded="true"] { background: #008391 /*cc*/; color: #fff; border-color: #e1acfc /*cc*/; }
	.js #search-tog { top: 1rem; }
	.js .mobileState { display: none; }
}

/* Active Section Highlight in Main Navigation - body class -> li class -> link */
.home .home > a, .areas .areas > a, .networks .networks > a, .funding .funding > a, .resources .resources > a, .data .data > a, .about .about > a { background-color: #5b5b5b; }


/* ==================================================
	Breadcrumbs
================================================== */
.breadcrumb { font-size: 0.875rem; position: relative; top: -25px; padding: 6px 12px; box-shadow: 0 0 4px rgba(0,0,0,0.15); background: #fff; font-weight: 400; }
@media (max-width: 47.99em) {
    .breadcrumb { display: none; }
}


/* ==================================================
	Side Navigation
================================================== */
.subNav ul { list-style: none; margin: 0; padding: 0; }
.subNav li a { background: #f2f2f2; display: block; padding: 10px 15px 10px 10px; border-left: 5px solid #f2f2f2; line-height: 1.2; transition: all .1s linear; }
.subNav li a:hover, .subNav li a:focus { background: #2f70a8; color: #fff; border-left-color: #2f70a8; text-decoration: none; /*padding: 10px 10px 10px 15px; transition: padding .35s ease-in-out, color .1s linear, background .1s linear, border .1s linear;*/ }
.subNav li a.active { border-left-color: #2f70a8; background: #f9f9f9; color: #363636; }

.subNav .heading { text-transform: uppercase; color: #fff; background: #1f496f; font-size: 1rem; font-weight: 700; padding: 8px 15px; margin: 0; }
.togSubNav { display: none; position: fixed; z-index: 100; bottom: 0; padding: .5em 0; width: 100%; background: #008391 /*cc*/; color: #fff; border: none; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
	.togSubNav:hover, .togSubNav:focus { cursor: pointer; background: #352d57 /*cc*/; }
	.togSubNav span { padding-left: 1.8rem; background: url("../images/icn-subnav.png") left -121px no-repeat; }
@media (max-width: 47.99em) {
	/* JS recreates the left navigtaion in an overlay for mobile, so we can hide the original only if JS is present */
	.js .subNav-wrap .subNav { display: none; }
	/* only show the subNav toggle if JS is present */
	.js .togSubNav { display: block; }
    .js .subNav { font-size: 1rem; }
    .js .subNav .heading { display: none; }
    .js .subNav li:first-child a { border-radius: 5px 5px 0 0; }
    .js .subNav li:last-child a { border-radius: 0 0 5px 5px; }
}


/* ==================================================
	On-page Navigation
================================================== */
.pageNav { font-size: 1.125rem; padding-top: 0; margin-bottom: .25rem; }
.pageNav + ul { font-size: 1.125rem; margin-bottom: 1rem; }


/* ==================================================
	Footer
================================================== */
footer, .lastUpdate { font-size: 1rem; color: #fff; }
.footerGray { background: #363636; }
.lastUpdate { padding: 7px 0; }
footer { background: #272727; }

footer h2 { font-size: 1.125rem; padding-top: 0; text-transform: uppercase; font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-weight: 600; }
footer a, footer a:hover, footer a:focus { color: #fff; }
footer li { margin-bottom: 10px; line-height: 1; }
.links { padding: 40px 0 60px 0; }
.govLinks { margin-top: 30px; }

.livehelp { background: #fff; color: #333; text-align: center; padding-top: 10px; }
.livehelp a { padding: 0 0 10px 0; display: block; font-size: 20px; font-weight: 700; color: #333; }
.livehelp a:hover, .livehelp a:focus { color: #333; }
.livehelp img { width: 165px; height: 55px; display: block; margin: 0 auto; }
.livehelp a .livehelp-tel { font-size: 1rem; font-weight: 400; }
.tagline-container { display: table; height: 135px; }
.tagline { display: table-cell; vertical-align: middle; font-family: "Merriweather","Times New Roman",Times,Georgia,serif; font-size: 24px; font-weight: 300; padding: 0 15px; }
.returntop {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: none;
    z-index: 99;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url("../images/up-arrow.svg") center no-repeat;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
}
.returntop:hover, .returntop:focus {
    background: url("../images/up-arrow-hover.svg") center no-repeat;
}
.returntop span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 47.99em) {
    footer { padding-bottom: 50px; } /* add some room for the sticky section nav at bottom */
    footer .list-unstyled { margin: 0 0 1rem 0; padding: 0 0 1rem 0; border-bottom: 1px solid #5b5b5b; }
    footer .list-unstyled li { display: inline-block; padding: 4px 12px 4px 0; margin-right: 8px; border-right: 1px solid #5b5b5b; }
    footer .list-unstyled li:last-child { border: none; }
    
    .tagline-container { height: auto; }
    .tagline { font-size: 1.125em; padding: 1rem 0; }
}


/* ==================================================
	Events
================================================== */
.eventList { list-style: none; margin: 0; padding: 0; }
.card-event { display: flex; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; top: 0; transition: all .3s ease-in-out; margin-bottom: 1rem; border-top: 3px solid #352d57 /*cc*/; }
.date { min-width: 125px; text-align: center; border-right: 1px solid #ccc; margin-right: 25px; padding: .5rem 0; text-transform: uppercase; line-height: 1.1; }
.date strong { font-size: 2rem; font-weight: 700; }
@media (max-width: 576px) {
    .card-event { display: block; }
    .date { border: none; margin: 0; padding: 0; font-weight: 700; }
}


/* ==================================================
	Cards
================================================== */
/* add class to enable flex */
.cardWrap { display: flex; flex-wrap: wrap; justify-content: left; }
/* target specific cards and set width */
.card-25 { display: flex; padding: 0 2rem 2rem 0; width: 25%; }
.card-33 { display: flex; padding: 0 2rem 2rem 0; width: 33.33%; }
.card-50 { display: flex; padding: 0 2rem 2rem 0; width: 50%; }
.card-50:nth-child(2n+2), .card-33:nth-child(3n+3), .card-25:nth-child(4n+4) { padding-right: 0; }
@media (max-width: 1200px) {
    .card-25 { width: 50%; }
    .card-25:nth-child(4n+4) { padding-right: 2rem; }
    .card-25:nth-child(2n+2) { padding-right: 0; }
}
@media (max-width: 992px) {
    .card-33 { width: 50%; }
    .card-33:nth-child(3n+3) { padding-right: 2rem; }
    .card-33:nth-child(2n+2) { padding-right: 0; }
}
@media (max-width: 768px) {
    .card-25, .card-33, .card-50 { width: 100%; padding: 0 0 1rem 0!important; }
}

/* white w/icon, title, desc. */
.card-white { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; top: 0; transition: all .3s ease-in-out; text-decoration: none!important; }
.card-white:hover, .card-white:focus { color: #333; text-decoration: none; top: -.35rem; box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
.card-head { display: table; margin-bottom: 1rem; }
.card-head * { display: table-cell; vertical-align: middle; }
.card-head img { max-width: 60px; background: #008391 /*cc*/; border-radius: 50%; margin-right: .5rem; display: inline-block; }
.card-white .card-title { font-size: 1.0625rem; margin: 0; padding: 0; color: #00555e /*cc*/; font-weight: 700; }
.card-white .card-content { font-size: 1.0625rem; }

/* white with dark head */
.card-dark { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); color: #333; position: relative; top: 0; transition: all .3s ease-in-out; text-decoration: none!important; }
.card-dark:hover, .card-dark:focus { color: #333; text-decoration: none; top: -.35rem; box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
.card-dark > .card-title { display: flex; align-items: center; background: #00555e /*cc*/; border-top: 3px solid #56cccc /*cc*/; font-size: 1.25rem; margin: 0; padding: .5rem 1rem; color: #fff; }
.card-dark > .card-content { font-size: 1.125rem; padding: 1rem; }

/* for when the whole card isn't a link but we need the styling (home, about) */
.card-dark.static { background: #f2f2f2; }
.card-dark.static:hover { position: static; top: 0; box-shadow: 0 3px 3px rgba(0,0,0,0.18); }

/* gray w/optional icon, title, desc, link button */
.card-gray { display: block; padding: 1rem; background: #f2f2f2; margin-bottom: 1rem; }
.card-gray > .card-title { font-size: 1.5rem; padding: 0; margin: 0 0 .5rem 0; }
.card-gray > .card-content { font-size: 1.125rem; }
.card-gray > .card-content *:last-child { margin-bottom: 0; } /* remove margin from last item in card */
.card-icon { padding-left: 5rem; position: relative; }
.card-icon > img { position: absolute; top: 1rem; left: -50px; width: 100px; height: 100px; border-radius: 50%; }
.icon-border { border: 5px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.2); }
.icon-center > img { top: 50%; margin-top: -50px; }
@media (max-width: 576px) {
    .card-icon { padding-left: 1rem; padding-top: 4rem; margin-top: 5rem; }
    .card-icon > img, .icon-center > img { top: -50px; left: 50%; margin-left: -50px; margin-top: 0; width: 100px; height: 100px; }
}
/* clickable gray w/optional icon, title, desc */
a.card-gray { text-decoration: none; }
a.card-gray > .card-content * { color: #333; }

/* news/funding cards */
.card-accent { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; transition: all .3s ease-in-out; border-left: 50px solid #00555e /*cc*/; }
.card-accent:before { display: block; width: 30px; height: 32px; position: absolute; top: 1rem; left: -40px; content:""; background-size: cover; background-repeat: no-repeat; background-position: center; }
	.card-news:before { background-image: url("../toolbox/images/dccps/icon-news.svg"); }
	.card-funding:before { background-image: url("../toolbox/images/dccps/icon-funding.svg") ; }
.card-accent .card-title { font-size: 1.25rem; margin: 0; padding: 0; }
.card-accent > .card-content { font-size: 1.0625rem; }
/* clickable version */
a.card-accent { text-decoration: none; position: relative; top: 0; transition: all .3s ease-in-out; }
a.card-accent:hover, a.card-accent:focus { top: -.35rem; box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
a.card-accent > .card-content { color: #333; }


/* ==================================================
	DataTables
================================================== */
table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer { border-bottom-color: #dee2e6!important; }


/* ==================================================
	Toggles
================================================== */
.tog-control { padding: 0; margin: 0; }
.tog-control button { display: table; border: none; width: 100%; font-size: 1rem; margin: .5rem 0 0 0; padding: 0; border-radius: 4px; font-weight: 600; text-align: left; background: #f2f2f2; color: #2f70a8; transition: all .2s ease-in-out; }
    /* account for toggle on gray background, give white background on elements instead */
    .bg-lightgray .tog-control button, .bg-lightgray .tog-content { background: #fff; }
.tog-control button:hover { cursor: pointer; background: #2f70a8; color: #fff; transition: all .2s ease-in-out; }
.tog-control button[aria-expanded="true"] { background: #2f70a8; color: #fff; }
.tog-control button[aria-expanded="true"] .state { background-position: .75rem -5.875rem; }
.tog-control .state { display: table-cell; width: 2.5rem; height: 2.5rem; background: #2f70a8 url("../images/toggle.png") .75rem .75rem no-repeat; vertical-align: top; border-radius: 4px 0 0 4px; }
.tog-control .tog-title { display: table-cell; vertical-align: middle; padding: .5rem 1rem; }
.tog-content { background: #f2f2f2; border: 1px solid #ddd; padding: 1rem; margin: .25rem 0 1rem 0; box-shadow: inset .25rem .25rem 0 #fff, inset -.25rem -.25rem 0 #fff; }
.tog-content > :last-child { padding-bottom: 0; margin-bottom: 0; }
    

/* ==================================================
	Modal Window
================================================== */
.modalItem { display: inline-block; }

/* no JS? no modal trigger shown */
.modalItem-trigger { display: none; }

/* js class on body? we got JS, so show the modal trigger */
.js .modalItem-trigger { display: inline-block; }

/* js class on body? we got JS, so hide the provided content, it will go into a modal now */
.js .modalItem-content { display: none; }

/* style the provided content in case there is no JS */
.modalItem-content { padding: 1rem; border: 1px solid #ccc; background: #f2f2f2; }
.modalItem-title { font-size: 1.25rem; font-weight: bold; border-bottom: 1px dotted #ccc; margin-bottom: 1rem; }


/* ==================================================
	Tabs
================================================== */
ul[role="tablist"] { padding-left: 0; margin-bottom: -8px; background: #f8f8f8; }
[role="tablist"] li { display: inline-block; list-style: none; margin: 0; }
a[role="tab"] { color: #2f70a8; padding: 0.75rem 2rem; display: inline-block; overflow: hidden; text-decoration: none; font-weight: 500; position: relative; border: 1px solid transparent; }
a[role="tab"]::after { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #2f70a8; content: ''; transition: transform 0.3s; transform: translate3d(0,-150%,0); }
a[role="tab"]:focus, a[role="tab"]:hover { background: rgba(255,255,255,.5); color: #222; border-bottom-color: #ccc; }
[role="tablist"] a[aria-selected] { background: #fff; color: #222; border-color: #ccc; border-bottom-color: #fff; }
[role="tablist"] a[aria-selected]::after { transform: translate3d(0,0,0); }
[role="tabpanel"] { margin: 0 0 2rem 0; padding: 1rem; background: #fff; border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(0,0,0,0.18); }
[role="tabpanel"][aria-hidden="true"] { display: none; }
[role="tabpanel"] > :first-child { padding-top: 0; margin-top: 0; }

/* tabs with tabs-lg class will go full width at the lg breakpoint */
@media screen and (max-width: 1200px) {
    .tabs-lg ul[role="tablist"] { margin-bottom: 0; background: none; }
	.tabs-lg [role="tablist"] li { display: block; margin-bottom: .2rem; }
	.tabs-lg a[role="tab"] { display: block; border-color: #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #2f70a8; font-weight: 700; border-radius: 4px;  }
    .tabs-lg a[role="tab"]::after { display: none; }
    .tabs-lg a[role="tab"]::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("../images/toggle.png") 0 0 no-repeat; }
	.tabs-lg [role="tablist"] a[aria-selected], .tabs-lg a[role="tab"]:focus, .tabs-lg a[role="tab"]:hover { background: #2f70a8; color: #fff; }
    .tabs-lg [role="tablist"] a[aria-selected]::before { background-position: 0 -106px; }
}

/* tabs with tabs-md class will go full width at this breakpoint */
@media screen and (max-width: 992px) {
	.tabs-md ul[role="tablist"] { margin-bottom: 0; background: none; }
	.tabs-md [role="tablist"] li { display: block; margin-bottom: .2rem; }
	.tabs-md a[role="tab"] { display: block; border-color: #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #2f70a8; font-weight: 700; border-radius: 4px;  }
    .tabs-md a[role="tab"]::after { display: none; }
    .tabs-md a[role="tab"]::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("../images/toggle.png") 0 0 no-repeat; }
	.tabs-md [role="tablist"] a[aria-selected], .tabs-md a[role="tab"]:focus, .tabs-lg a[role="tab"]:hover { background: #2f70a8; color: #fff; }
    .tabs-md [role="tablist"] a[aria-selected]::before { background-position: 0 -106px; }
}

/* tabs with tabs-sm class will go full width at this breakpoint */
@media screen and (max-width: 768px) {
	.tabs-sm ul[role="tablist"] { margin-bottom: 0; background: none; }
	.tabs-sm [role="tablist"] li { display: block; margin-bottom: .2rem; }
	.tabs-sm a[role="tab"] { display: block; border-color: #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #2f70a8; font-weight: 700; border-radius: 4px; }
    .tabs-sm a[role="tab"]::after { display: none; }
    .tabs-sm a[role="tab"]::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("../images/toggle.png") 0 0 no-repeat; }
	.tabs-sm [role="tablist"] a[aria-selected], .tabs-sm a[role="tab"]:focus, .tabs-lg a[role="tab"]:hover { background: #2f70a8; color: #fff; }
    .tabs-sm [role="tablist"] a[aria-selected]::before { background-position: 0 -106px; }
}

/* tabs will go full width at this breakpoint (default) */
@media screen and (max-width: 576px) {
	ul[role="tablist"] { margin-bottom: 0; background: none; }
	[role="tablist"] li { display: block; margin-bottom: .2rem; }
	a[role="tab"] { display: block; border-color: #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #2f70a8; font-weight: 700; border-radius: 4px;  }
    a[role="tab"]::after { display: none; }
    a[role="tab"]::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("../images/toggle.png") 0 0 no-repeat; }
	[role="tablist"] a[aria-selected], a[role="tab"]:focus, a[role="tab"]:hover { background: #2f70a8; color: #fff;  }
    [role="tablist"] a[aria-selected]::before { background-position: 0 -106px; }
}


/* ==================================================
	Flickity v2.1.2 (News Archives Slider)
================================================== */
.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }

/* draggable */
.flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

/* flickity-button */
.flickity-button { position: absolute; background: #00555e /*cc*/; border: none; color: #fff; }
.flickity-button:hover { opacity: .75; cursor: pointer; }
.flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; }
.flickity-button:active { opacity: 0.6; }
.flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; }
.flickity-button-icon { fill: #fff; }

/* previous/next buttons */
.flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); }
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; }
.flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; }
.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }

/* page dots */
.flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; }
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; }
.flickity-page-dots .dot.is-selected { opacity: 1; }