body#strategic-directions{
   padding-top: 0; 
}


#strategic-directions #globalHeader{
  background:#000000;
  padding-right: 15px;
  padding-left: 15px;
  position: fixed;
}
#globalHeader #mainlogo{
  height: inherit;
  padding:0;
}
#globalHeader #mainlogo a{
  height:inherit;
  width:inherit;
}
#globalHeader #mainlogo img {
    color: #ffffff;
    font-family: 'Oswald',sans-serif;
    font-size: 2.8rem;
    height: 65px;
    text-align: left;
}

.headerSubtitle{
    font-size: 2rem;
    font-weight: 400;
    color: #ffffff;
    margin: auto;
    max-width: 1170px;
    text-transform: uppercase;
    position: absolute;
    top: calc(50% - 1rem);
    left: 250px;
}
@media screen and (max-width: 767.999px) { /* xs */ /* for when Strategic Directions goes to 2 lines */
  .headerSubtitle{
    top: 12px;
  }	
}




.headertitle{
    display:none;
background: #aa0000;
    xbottom: calc(60px + 10.8rem);
    position: absolute;
    width: 100%;
        z-index: 999999;
    position: sticky;
    top: 0;
}
.headertitle h1{
font-size: 2rem;
    font-weight: 400;
    color: #ffffff;
    margin: auto;
    max-width: 1170px;
    padding: 10px 60px;
    text-transform: uppercase;
}
.jumpNavigationWrapper {

}
.jumpNavigation {
    max-width: 1170px;
}
.jumpNavigation ul {
    display: inline-block;
    float: right;
    list-style: none;
    margin: auto;
    max-width:1050px;
    padding: 0;
}
.jumpNavigation ul li{
    float: left;
}
/* Only stick if you can fit */
@media (min-height: 300px) {
  .jumpNavigation ul {
    position: sticky;
    top: 0;
  }
}
.jumpNavigation ul li a {
    color: #ffffff;
    display: block;
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;
  padding: 2rem 1rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: .25s;
}
@media screen and (max-width: 767.999px) { /* xs */
  .jumpNavigation ul li a {
    font-size: 1.2rem;
    line-height: 1.2rem;
    padding: 1rem 1rem;
  }	
}


.jumpNavigation ul li a:focus, .jumpNavigation ul li a:hover {
    background:#aa0000;
  color:#ffffff;
    transition: .25s;
}
.jumpNavigation ul li a.active {
    background: #ffffff;
    color: #aa0000;
    text-decoration: none;
}
.jumpNavigation ul li a.active:focus, nav ul li a.active:hover {
    background: #aa0000;
    color: #ffffff;
    text-decoration: none;
}
x.planlink {  
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 65px;
}
x.planlink a{
  background: #aa0000;
  color: #ffffff;
  font-size:1.5rem;
  padding: 5px;
  text-decoration:none;

}
/* overrides the default v9 action of 130px adjustment for sticky header*/
a:not([href]) {
    display: block;
    position: relative;
    top: -65px;
    visibility: hidden;
}


#blockTitle{
    background: url(/media/strategic-directions/sealbg.png);
    background-size: 66%;
    background-position: 100%;
    background-repeat: no-repeat;
    padding: 125px 0 60px 0;
    position: relative;   
}
@media screen and (max-width: 767.999px) { /* xs */
  #blockTitle{
    padding: 157px 0 60px 0;
  }	
}


#blockTitle h1{
    font-size: 8rem;
    font-weight: 200;
    color: #333333;
    margin: auto;
    max-width: 1170px;
    padding:60px;
    text-transform: uppercase;
    position:relative;
    z-index:1;
}
@media screen and (max-width: 767.999px) { /* xs */
  #blockTitle h1{
    font-size: 4rem;
    font-weight: 300;
    line-height: 4.8rem;
    padding:30px;
  }
}
#blockTitle .subtitle{
    background: #aa0000;
    bottom: calc(60px + 10.8rem);
  left:0;
    position: absolute;
    width: 100%;
}

@media screen and (max-width: 767.999px) { /* xs */
  #blockTitle .subtitle{
    background: #aa0000;
    bottom: calc(43px + 4.8rem);  /* 30px padding of the h1 + 4.8rem line-height of the h1 + 1/2 of the line height of the h2 */
  left:0;
    position: absolute;
    width: 100%;
  }
}
.subtitle h2{
    font-size: 2rem;
    font-weight: 400;
    color: #ffffff;
    margin: auto;
    max-width: 1170px;
    padding: 10px 60px;
    text-transform: uppercase;
}

/**/
#blockTitle #title1, #blockTitle #title2{
    font-size: 8rem;
    font-weight: 200;
    color: #333333;
    line-height:1.1;
    margin: auto;
    max-width: 1170px;
    padding:0 60px;
    text-transform: uppercase;
    position:relative;
    z-index:1;
}
@media screen and (max-width: 767.999px) { /* xs */
  #blockTitle #title1, #blockTitle #title2{
    font-size: 4rem;
    font-weight: 300;
    line-height: 4.8rem;
    padding: 0 30px;
  }
}
#blockTitle #blockSubtitle{
    background: #aa0000;
    margin: 10px 0;
    position: relative;
    width: 100%;
}

@media screen and (max-width: 767.999px) { /* xs */
  #blockTitle #blockSubtitle{
    background: #aa0000;
  }
}
#blockTitle #blockSubtitle h2{
    font-size: 2rem;
    font-weight: 400;
    color: #ffffff;
    margin: auto;
    max-width: 1170px;
    padding: 10px 60px;
    text-transform: uppercase;
}


@media screen and (max-width: 767.999px) { /* xs */
  .subtitle h2{
	font-size: 1.5rem;
    padding: 5px 30px;
  }
  #blockTitle #blockSubtitle h2{
	font-size: 1.5rem;
    padding: 5px 30px;
  }
}




.blockImage{
    margin-bottom: 60px;
  padding:0;
    position: relative;
}
.blockHeading h2{
    color: #333333;
    font-family: montserrat;
    font-size: 5.5rem;
    font-weight: 200;
    line-height: 6rem;
    margin:0;
    padding-left: 15px;
    text-align:right;
    text-transform: uppercase;    
}
@media screen and (max-width: 767.999px) { /* xs */
  .blockHeading h2{
    font-size: 4rem;
    font-weight: 200;
    line-height: 5.5rem;
    padding-left: 0;
    text-align:left;  
  }
}


.block .pullquote {
    color: #333333;
    font-style: italic;
    font-family: "roboto slab";
    font-size: 2.2rem;
    font-weight: 300;
    margin: 0 0 45px 0;
    padding: 0 45px 0 30px;
}
@media screen and (max-width: 767.999px) { /* xs */
  .block .pullquote{
    font-size: 2rem;
    font-weight: 300;
    margin: 0 0 30px 0;
    padding: 0;
  }
}


.block .colorpop{
    color: #aa0000;
    font-weight:400;
}

.blockContent{
    margin-bottom: 60px;
}
.blockContent h3 {
    color: #aa0000;
    font-family: "Montserrat";
    font-size: 3rem;
    font-weight: 300;
    padding: 0 45px 0 30px;
    text-transform: uppercase;
}
.blockContent p{
    font-size:2rem;
    margin: 0 30px 3.2rem 30px;
}
@media screen and (max-width: 767.999px) { /* xs */
  .blockContent p{
    font-size:1.5rem;
    margin: 0 15px 2rem 15px;
  }
}


.blockContent .fullGoal{
    border-left: 1px solid #333;
    margin-left: 45px;
}
.blockContent .fullGoal h3{
    color: #333333;
    font-family: Montserrat;
    font-size: 3rem;
    padding: 0 30px 30px 30px;
    text-transform: uppercase;
    border-left: 1px solid #aa0000;
    position: relative;
    left: -1px;
}
.blockContent ul {
    margin: 0 30px 45px;
}
.blockContent ul li {
    font-size:2rem;
    margin-bottom:1rem;
}
.blockContent ul li:before {
    font-family: 'FontAwesome';
    font-size: 18px !important;
    content: '\f0da';
    color: #aa0000;
    padding-right: 5px;
    display: table-cell;
    position: relative;
    top: 1px;
}
.readMore p {
    /* text-decoration: underline; */
    font-family: 'Roboto Slab';
    /* font-weight: 300; */
    /* background: #a00; */
    /* padding: 15px 0 2px 0; */
    xpadding-left: 13px;
    color: #aa0000;
    /* border-top: 1px solid #a00; */
    /* border-bottom: 1px solid #a00; */
    display: inline-block;
    text-transform: uppercase;
    margin: 0 30px 3.2rem 30px;
}
.readMore p a {
    color: #aa0000;
    text-decoration: none;
}
.readMore p a:focus, .readMore p a:hover {
    color: #333333;
    text-decoration: underline;
}
.readMore p .fa-caret-right {
    font-size: 2.8rem;
    position: relative;
    top: .3rem;
    left: .5rem;
}


.blockContent ul.downloadLinks li:before{
  content:none;
  list-style-type: none;
}
.downloadLinks a {
    font-family: "Roboto Slab";
    text-transform: uppercase;
    text-decoration: none;
}
.downloadLinks a:hover {
    text-decoration: underline;
}
.downloadLinks i.fas.fa-file-pdf {
    padding: 0 1rem;
    color: #aa0000;
}





#pageContent #idVideoSD{
    position: relative;
    margin: 60px 0;
    border: 1px solid #cccccc;
}
@media screen and (max-width: 767.999px) { /* xs */
  #pageContent #idVideoSD{
    margin: 30px 0;
  }
}
#pageContent #idVideoSD a .play-button {
    color: #ffffff;
    font-size: 9rem;
    top: calc(50% - 4.5rem);
}

.fancybox-wrap{
  background: rgba(0,0,0,.6);
  z-index: 200;
}
.fancybox-wrap iframe{
    width: 100%;
    height: 100%;
    padding: 10%;
}



#missionOverlay{
    background: rgba(0,0,0,1);
    color: #ffffff;
    line-height: 2;
    padding: 30px;
}

@media screen and (min-width: 992px) { /* md + lg*/
	
  #missionOverlay{
    background: rgba(0,0,0,.7);
    color: #ffffff;
    left: 5%;
    line-height: 2;
    padding: 30px;
    position: absolute;
    top: 240px;
    width: calc(28% - 15px); 
  }
  
}


footer {
    position: relative;
    background: #000000;
}
footer #footerInner {
    padding: 30px 0;
}
#footerLinks li{
  color: #ffffff;
  font-size: 1.5rem;
  margin-bottom:2rem;
}
@media screen and (max-width: 767.999px) { /* xs */
  #footerLinks li {
    text-align: center;
  }
}


#footerLinks li a{
    color: #ffffff;
}
#footerLinks li a:focus, #footerLinks li a:hover{
    color: #cccccc;
}

/**********************************
Strategic Planning Council microsite styles
based loosely off Strategic Directions above
**********************************/

#SPCHomepage {
  padding-top:65px;
}
#SPCSubpage {
  padding-top:65px;
}
#SPCHomepage header,
#SPCSubpage header {
  background:#000000;
  padding-right: 15px;
  padding-left: 15px;
  position: fixed;
}

.SPC .headerSubtitle {
  font-size: 1.6rem;
}
.SPC .blockImage {
  margin-bottom:0;
}
@media screen and (min-width:992px) {
  .SPC .blockImage {
    margin-bottom:60px;
  }
}
#SPCSubpage #zoneA {
  padding: 15px;
}
@media screen and (min-width:992px) {
  #SPCSubpage #zoneA {
    padding: 0;
  }
}
#SPCSubpage #zoneA .primaryContentWrapper {
  padding: 0 15px;
}
@media screen and (min-width:992px) {
  #SPCSubpage #zoneA .primaryContentWrapper {
    padding: 0;
  }
}
.SPC .blockHeading h1 {
  font-size: 3rem;
  line-height: 1.4;
  padding: 30px 15px;
  text-align: left;
}
@media screen and (min-width:992px) {
  .SPC .blockHeading h1 {
    font-size: 4rem;
    padding: 0px 15px;
    text-align: right;
  }
}


/* homepage cards */
#SPCHomepage .cardsWrapper .cardButton {
  display:none;
}
#SPCHomepage #zoneA #id1245982 {
    margin-bottom: 20px;
}


/*News and Events*/
#SPCHomepage .curatedNewsWrapper {
  max-width: 1170px;
  margin: 6rem auto 0 auto;
}
#SPCHomepage .curatedNewsWrapper .curatedNews .curatedNewsTitle h3 {
   text-align:left;
}
#SPCHomepage .curatedNews .curatedNewsList {
  padding: 1.5rem 0;
}
#SPCHomepage #id1252360 {
   margin-top:9rem;
}
#SPCHomepage #id1252360 .curatedEventsList {
    max-width: 1170px;
    margin: 0 auto;
}
#SPCHomepage #id1252360 .curatedEventsTitle h2 {
  color:#000;
}
/* block banners */
.blockBanner {
  background:#f7f7f7;
  margin-bottom: 4rem;
}
.blockBanner .blockHeading h2 {
  color:#aa0000;
  text-align:left;
  padding: 3rem 15px 1rem;
  font-size: 3rem;
  line-height: 1.2;
}
.blockBanner .blockHeading h2 span {
  color:#000;
  display:block;
  font-size:2.4rem;
  line-height:1.2;
}
.blockBanner .blockContent {
  margin-bottom: 4rem;
}
@media screen and (min-width:992px) {
  .blockBanner .blockHeading h2 {
    font-size: 4rem;
    padding: 0 15px;
    text-align:right;
  }
  .blockBanner .blockContent {
    margin-bottom: 6rem;
  }
}

.blockBanner .blockContent p {
  margin: 0 15px;
}
.blockBanner .blockContent p strong {
   font-weight: 500;
}
.blockBanner .blockContent p a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #088099;
}
.blockBanner .blockContent p a:hover {
    color: #aa0000;
    text-decoration: none;
    border-bottom: 1px solid #088099;
}

/* jumbotron buttons */
@media screen and (min-width: 992px) {
  #pageContentWrapper.container-fluid #zoneA.col-md-12 .jumbotron1 ul.boxlinks li{
    flex: 0 1 calc(33.33% - 7px);
    width: 33.33%;
  }
}