@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body {font-family: 'roboto', sans-serif;}
a {color:#061c60;}
.off-canvas {background: #061C60}
.wpsNoTitlePortlet {border: none; margin:0 auto; width:100% !important;}
body>table table {margin-top: 16px;}
.top-bar, .top-bar ul, .footdropdown span ul {background: white;padding: 0; z-index: 99999 !important;}
.indexDiv {padding-top: 5px;}
.colGrey4 {line-height: 1;}
.top-bar input {margin: 0 0 0 -0.3rem;display: inline-block;height: 23px;}
.colBlue2 {padding-top: 5px;}
.grid-container {max-width: 1003px;}
.programs {margin-bottom:1rem;}
.programs img {width: 100%;height: 100%;}
.footdropdown span ul li {overflow: hidden;padding: 4px 5px;background: white; }
table tbody tr:nth-child(even) {background-color: transparent; }
table tbody, table tfoot, table thead {border: none;}
.home-box {padding: 1.5rem 0.2rem; border-bottom: 8px solid #00205b; height: 150px; box-shadow: 0 0 5px #ccc; text-align: center; font-weight:bold; font-size:1.25em; }
.home-box a {}
.home-box a p { font-style:italic; font-size:0.6em;}
.sideNavTitle {width:auto; margin:0; padding:5px 10px;}
.sideNav {width:auto; margin:0;}
.wpsNoSkinPortlet {padding:0;}
.wpsPortletBody {margin:0; padding:0}
.btn {width:100%;}
.footdropdown {width:100%;}
.footdropdown span {display:block; text-align:center; width:auto; margin:0;}
.footdropdown span li {float:none; display:inline-block; padding-left:0;}
.title-bar {background:#dcddde; padding: 0.3rem .5rem; display: none;}
.menu-icon::after { background: #00205b; box-shadow: 0 7px 0 #00205b, 0 14px 0 #00205b;}
body .sapc-sidemenu {}
body .sapc-sidemenu li{border-bottom:1px solid #dcddde; border-top:1px solid #dcddde; margin-top:-1px;}
body .sapc-sidemenu a {color:white;}
.sidebar table tr {border:1px solid #dcddde;}
.main-menu {width: 100%}  

body > table {width: 1003px;}
#sapc {width:1003px; font-family: 'roboto', sans-serif; padding: 0 24px; margin: auto; box-sizing: border-box; color: black;}
#sapc *{box-sizing: border-box; padding: 0; margin: 0;}
#sapc .row {margin: 0 0 16px 0; height: auto; display: flex;}
#sapc .row-lesspadding {margin: 0 -12px; display: flex;}
#sapc .row-nopadding {margin: 0 -24px; display: flex;}
#sapc .col {margin:24px 12px;overflow: hidden; position: relative;}
.col-m1, .col-m2, .col-m3, .col-m4, .col-m5, .col-m6, .col-1quarter, .col-3quarter {float: left}
.col-m1{width: 16.66666%;}
.col-m2{width: 33.33333%;}
.col-m3{width: 50%;}
.col-m4{width: 66.66666%;}
.col-m5{width: 83.33333%;}
.col-m6{width: 100%;}
#sapc .col-1quarter {width: 25%;}
#sapc .col-3quarter {width: 75%;}
#sapc .col img{width: 100%;}
#sapc .col img+div{width: 100%; position: absolute; z-index: 9; bottom: 4px; left: 0; padding: 5px 8px; background:rgba(66,194,233,0.7); color:white;}
#sapc .media{}
#sapc h2.title {font-family: rockwell, 'Kameron', "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif; text-align: center; font-size: 40px; margin:50px 0; color: #00205b;}
#sapc .highlight {background: #42c2e9; padding: 100px 50px; color: white; margin: 0 -24px; position: relative;}
#sapc .highlight:after {content:""; position: absolute; width: 100%; height: 100%; background: red; z-index: -1;left: 0; top: 0;}
#sapc .highlight h2.title{margin-top:0;}
#sapc .divider {width: 100%; height: 5px; clear: both; position: relative; margin: 50px 0; display: block;}
#sapc .divider:before {content:""; position: absolute; width:75%; height: 5px; top:0; left:50%; margin-left: -37.5%; background: #42c2e9;}
#sapc ul {/*list-style: none;*/ margin-left: 20px;}
.spacer15 {height: 15px; width:100%; clear: both;}
.spacer30 {height: 30px; width:100%; clear: both;}
.spacer45 {height: 45px; width:100%; clear: both;}
.spacer60 {height: 60px; width:100%; clear: both;}
.breadcrumbs {margin:0 12px; font-size: 0.8rem;}
.breadcrumbs a, .breadcrumbs a:link, .breadcrumbs a:visited {color: #00205b; padding: 0 5px;}
#hashtags, .hideme, .hidethis {display: none !important;}

#sapc .opioid {height: 989px;}
#sapc .opioid .tab { float: left; background-color: black; width: 30%; padding: 5px 0}
#sapc .opioid .tab a { display: block; background-color: inherit; color: black; padding: 0; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; }
#sapc .opioid .tab a:hover {/*background-color: orange;*/}
#sapc .opioid .tab a.active {background-color: black;  }
#sapc .opioid .tab a img {width: 100%;}
#sapc .opioid .tabcontent {float: left; border: 5px solid black; width: 70%; border-left: none; height: 100%; display: none; position: relative; overflow: hidden;}
#sapc .opioid .tabcontent .title-img {position: absolute; top:-15px; width: 100%;}
#sapc .opioid .tabcontent > div {position: absolute; top: 95px; background: white; z-index: 9; padding: 24px; height: 886px; width: 100%; overflow: auto;}
#sapc .opioid .tabcontent .info {text-align: right; position: relative; margin-bottom: 16px;}
#sapc .opioid .tabcontent .info:before {content:""; width:100px; height:4px; background:#ffb71c; position: absolute; top:11px; left: 0; z-index: 1; border: 2px solid black}
#sapc .opioid .tabcontent .info:after {content:""; width:100%; height:2px; background:black; position: absolute; top:14px; left: 0; z-index: -1;}
#sapc .opioid .tabcontent .info > div {display: inline-block; margin-left: 10px;}
#sapc .opioid .tabcontent .info > div.call {display: none;}
#sapc .opioid .tabcontent .info > div a{ background: #ffb71c; width: 30px; height: 30px; border-radius: 7px; border: 2px solid black; display: block; text-align: center;}
#sapc .opioid .tabcontent .info > div a i {font-size: 20px; margin-top: 4px; color: black;}
#sapc .opioid .tabcontent > div a > .download {margin-top:16px; background: #ffb71c; border-radius: 7px; border: 2px solid black; display: block; text-align: center; padding: 5px 12px; color:black; font-weight: bold; }
#sapc .opioid .tabcontent > div a {text-decoration: none;}

header { top: 0; position: absolute; width: 100%; height: 64px; }
header .title-content { position: absolute; width: 100%; height: 100px; text-align: center; }
header .title-content button { position: absolute; top: 12px; height: 40px; text-align: center; width: 140px; }
header .title-content button#last { left: 12px; }
header .title-content button#next { right: 12px; }
header .title-content span { float: left; margin: 8px 0 16px 0px; width: 100%; height: 40px; }
header .title-content span h1,header .title-content span h2 { clear: both; float: left; margin: 0; padding: 0; line-height: 1; text-align: center; width: 100%; }
header .title-content span h1 { font-size: 24px; line-height: 32px; }
header .title-content span h2 { font-size: 14px; }
.ci-cal-container { top: 64px; position: absolute; border: 1px solid #CCC; width: 100%; height: calc(100% - 64px); }
.ci-cal-container .ci-head { top: 0; background: #012d73; position: absolute; width: 100%; height: 40px; }
.ci-cal-container .ci-head div { line-height: 40px; float: left; color: #FFFFFF; font-size: 12px; font-weight: bold; text-align: center; border-right: 1px solid rgba(255,255,255,0.15); text-transform: uppercase; height: 100%; width: 14.28%; width: -moz-calc(100%/7); width: -webkit-calc(100%/7); width: calc(100%/7); position: relative; }
.ci-cal-container .ci-head div:last-child { border-right: 0px; }
.ci-cal-container .ci-body { top: 40px; position: absolute; width: 100%; height: calc(100% - 40px); }
.ci-cal-container .ci-body .ci-row { clear: both; float: left; position: relative; border-bottom: 1px solid #CCC; width: 100%; height: 16.6% }
.ci-cal-container .ci-calendar.cal-rows-four .ci-body .ci-row { width: 100%; height: 25% }
.ci-cal-container .ci-calendar.cal-rows-five .ci-body .ci-row { width: 100%; height: 20% }
.ci-cal-container .ci-calendar.cal-rows-six .ci-body .ci-row { width: 100%; height: 16.666% }
.ci-cal-container .ci-body .ci-row:last-child { border-bottom: 0; }
.ci-cal-container .ci-body .ci-row .ci-event-row { position: absolute; left: 0px; padding: 3px; height: 50%; width: 100%; z-index: 10; }
.ci-cal-container .ci-body .ci-row .ci-event-row:nth-child(1) {  top: 0px; }
.ci-cal-container .ci-body .ci-row .ci-event-row:nth-child(2) {  margin-top: -1px;  top: 50%; }
.ci-cal-container .ci-body .ci-row>div { box-shadow: inset 0px 0px 0px 1px white; border-right: 1px solid #CCC; overflow: hidden; float: left; height: 100%; width: 14.28%; width: -moz-calc(100%/7); width: -webkit-calc(100%/7); width: calc(100%/7); position: relative; }
.ci-cal-container .ci-body .ci-row>div.empty { background: #f5f5f5; }
.ci-cal-container .ci-body .ci-row>div.empty:before { background:url(http://www.transparenttextures.com/patterns/black-twill.png); position: absolute; height: 100%; width: 100%; opacity: 0.125; }
.ci-cal-container .ci-body .ci-row>div.ci-today { background: #f5f5f5; }
.ci-cal-container .ci-body .ci-row>div:last-child { border-right: 0; }
.ci-cal-container .ci-body .ci-row>div .ci-date { top: 12px; left: 12px; position: absolute; font-size: 12px; }
.ci-event { border-radius: 3px; border: 1px solid transparent; /* box-shadow: inset 0px 0px 0px 1px white; */ position: absolute; padding: 2px 12px; height: calc(100% - 5px); z-index: 20; }
.end-cap,.start-cap { top: 0.5px; z-index: 1; position: absolute; }
.end-cap-border,.start-cap-border { top: -1.75px; z-index: 0; position: absolute; }
.end-cap,.end-cap-border,.start-cap,.start-cap-border { width: 0px; height: 0px; border-style: solid; border-color: transparent; }
.ci-event.public .end-cap,.ci-event.public .start-cap { border-color: transparent #e6f1cd; }
.ci-event.public .end-cap-border,.ci-event.public .start-cap-border { border-color: transparent #D1DBBB; }
.ci-event.private .end-cap,.ci-event.private .start-cap { border-color: transparent #cceff2; }
.ci-event.private .end-cap-border,.ci-event.private .start-cap-border { border-color: transparent #9FBABD; }
.ci-event.public { background: #e6f1cd; border-color: #D1DBBB; }
.ci-event.private { background: #cceff2; border-color: #9FBABD; }
.ci-event label { font-size: 12px; font-weight: bold; vertical-align: middle; }

#share {position:fixed; top:50%; left:0; margin-top:-120px; z-index:999;}
#share > button {position:relative; display:block; margin:0.5rem 0; border:none; padding:1rem; cursor:pointer; text-align:center; width:55px; background-color:#ccc; transition:0.2s;}
#share > button > i {margin:0; font-size:1rem; transition:0.2s;}
#share > button:hover > i {font-size:1.5rem;}
#share > #shareMobile {color:green;}
#share > #shareFacebook {color:#3b5998;}
#share > #shareFacebook:hover {background-color:#3b5998; color:white;}
#share > #shareTwitter {color:#00acee;}
#share > #shareTwitter:hover {background-color:#00acee; color:white;}
#share > #shareLinkedIn {color:#0e76a8;}
#share > #shareLinkedIn:hover {background-color:#0e76a8; color:white;}
#share > #shareEmail {color:#cc0000;}
#share > #shareEmail:hover {background-color:#cc0000; color:white;}
#share > .mobile-button {display: none;}

.timeline { border-left: 4px solid #c00; color: #555; margin: 50px auto; position: relative; line-height: 1.5em; padding: 50px; list-style: none; text-align: left; max-width: 50%;}
.timeline h1 { font-size: 1.5rem;}
.timeline h2, .timeline h3 { letter-spacing: 1.5px; font-size: 1.2rem;}
.timeline .event { border-bottom: 1px dashed rgba(0, 0, 0, 0.1); padding-bottom: 25px; margin-bottom: 50px; position: relative;}
.timeline .event:last-of-type { padding-bottom: 0; margin-bottom: 0; border: none;}
.timeline .event:before, .timeline .event:after { position: absolute; display: block; top: 0; }
.timeline .event:before { left: -217.5px; color: #555; content: attr(data-date); text-align: right; font-weight: 100; font-size: 0.9em; min-width: 120px; font-family: 'century gothic', sans-serif;}
.timeline .event:after { box-shadow: 0 0 0 4px #c00; left: -57.85px; background: #ccc; border-radius: 50%; height: 11px; width: 11px; content: ""; top: 5px;}

.button {min-width: 150px; max-width: 250px; display: block; margin: 1em;padding: 1em;border: none; background: none; color: white; vertical-align: middle; position: relative;z-index: 1;-webkit-backface-visibility: hidden;-moz-osx-font-smoothing: grayscale; line-height: 1.2; border-radius:8px;}
.button:focus {outline: none;}
.button > span {vertical-align: middle;}
.button-nuka { margin: 1em 2em; transition: color 0.3s; transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);}
.button-nuka::before, .button-nuka::after {content: ''; position: absolute; border-radius: inherit; z-index: -1;}
.button-nuka::before {background: #00abc7; top: -4px;bottom: -4px;left: -4px;right: -4px;opacity: 0.2;-webkit-transform: scale3d(0.7, 1, 1);transform: scale3d(0.7, 1, 1);transition: opacity 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;}
.button-nuka::after {background: #1b3d6e; top: 0;left: 0;width: 100%;height: 100%;-webkit-transform: scale3d(1.1, 1, 1);transform: scale3d(1.1, 1, 1);transition: background-color 0.3s,-webkit-transform 0.3s;transition: transform 0.3s, background-color 0.3s;transition: transform 0.3s, background-color 0.3s, -webkit-transform 0.3s;}
.button-nuka::before, .button-nuka::after {transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);}
.button-nuka:hover {color: #fff;}
.button-nuka:hover::before {opacity: 1;}
.button-nuka:hover::after, .button-nuka:hover::before {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
.button-nuka.alt1::before {background: #80c041;}
.button-nuka.alt1::after {background: #f58020;}
.button-nuka.alt2::before {background: #f58020;}
.button-nuka.alt2::after {background: #80c041;}
.button-nuka.alt3::before {background: #00abc7;}
.button-nuka.alt3::after {background: #f3b51a;}
.more-info {width: 100px;}

@media only screen and (max-width:360px) { 
body {  overflow-x: hidden !important;  overflow-y: auto !important;  }
 .ci-cal-container .ci-body {  float: left;  height: auto;  position: relative;  }
 .ci-cal-container .ci-body .ci-row {  border: 0px;  height: auto !important;  }
 .ci-cal-container .ci-body .ci-row .ci-event-row {  top: 0px;  clear: both;  float: left;  height: auto;  padding: 0px !important;  margin-top: 0px !important;  position: relative;  }
 .ci-cal-container .ci-body .ci-row > div {  display: none;  }
 .ci-event {  float: left;  position: relative;  min-height: 100px;  left: 0px !important;  margin: 5px !important;  width: calc(100% - 10px) !important;  }
 .end-cap, .end-cap-border, .start-cap, .start-cap-border {  display: none;  }
 }

@media only screen and (max-width: 768px) {
    body > table {width: auto !important;}
    body > table > tbody > tr:first-child {display: none;}
    #sapc .opioid .tabcontent .info > div.call {display: inline-block;}
    #sapc .opioid .tabcontent .info > div a {height:60px; width: 60px; border-radius: 14px;}
    #sapc .opioid .tabcontent .info > div a i { font-size: 40px; margin-top: 8px;}
    #share {margin-top:30px;}
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	.colAtoZ1, .colFontSize, .colGrey3 {display:none; }
	.colAtoZ2{width:auto;}
	.colGrey2 {width:240px !important;}
	.colGrey4 {width:200px !important; margin-right:12px !important;}
	.globalNavCenterDiv, .indexDiv, .globalNavGreyDiv, .globalNavGreyBlueDiv {width:100%;}
	.colTranslate {	width:100px;}
}
@media screen and (max-width: 62.5em) {
	div.footdropdown + table {width:100%;}
	div.footdropdown + table .footerDisclaimer {width:100%;}
	div.footdropdown + table td {display:block; width:100%;}    
	.sidebar > table:nth-child(3), .sidebar > table:nth-child(4){width:49%; display:inline-block; vertical-align:top;}
	.wpsNoTitlePortlet {height:190px;}
}   
@media screen and (max-width: 62.6875em) {
	.jssora12l, .jssora12r {display:none;} 
}

@media screen and (max-width:65rem){
	#share > .mobile-button {display: block;}
	#share > .sharer {margin-left:-50px;}
}