
/**~ Variables ~**/
@import "variables.css";
/**~ Base ~**/

/**~ Sections ~**/


/**~ Components ~**/

/**~ Layout Builder ~**/
/**Paragraph Cards layout builder - live**/
[class*='block-field-blocknodebuilder-pagefield-para'],
[class*='block-entity-fieldnodefield-para'] {
  padding:5px;
}


[class*='paragraph--type--card-']{
  background-color: var(--ltgrey);
  border: white solid 5px;
}
[class*='paragraph--type--card-'] [class*='field--name-field-title']{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  color: var(--purple);
  font-size: 1.2em;
  font-family: "Encode Sans Normal","Open Sans","Arial",sans-serif,"Arial",sans-serif;
  font-weight: 800;
  line-height: 1.1;
}
[class*='paragraph--type--card-'] [class*='field--name-field-copy'] {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 2px;
}

[class*='paragraph--type--card-'] [class*='field--name-field-link'] {
  padding: 10px;
}
[class*='paragraph--type--card-'] div.field--type-link > a{
  font-family:uni sans;
  font-size:1.1em;
  font-weight: bold;
  color:var(--purple);
  text-transform: uppercase;
}
[class*='paragraph--type--card-'] div.field--type-link > a::after{
  content: "\2002\276F";
}
.paragraph--type--card-left {
  text-align: left
}
.paragraph--type--card-center{
  text-align: center
}
.paragraph--type--card-center img {
  margin:auto;
}
.field--name-field-image-caption{
  font: italic 12px "Open Sans","Arial",sans-serif,"Arial",sans-serif;
  padding: 0px 15px;
}
.field--name-field-builder-image {
  padding: 0px 15px;
}
.field--name-field-quote {
  font-family: uni sans;
  font-size: 1.5em;
  color: var(--purple);
}
.field--name-field-attribution {
  text-align: right;
  font-style: italic;
  font-family: uni sans;
  font-size: 1.5em;
  color: var(--purple);
}
.field--name-field-attribution::before {
  content: "\2013"
}
.layout--threecol-33-34-33 > .layout__region--second{
  flex: 0 1 33%;
}
.paragraph--type--pull-quote .paragraph__column {
    border-top: 1px solid var(--purple);
    border-bottom: 1px solid var(--purple);
    padding: 10px;
    margin: 7px 0px;
}
.field--name-field-line-spacer {
    border-top: 1px solid var(--purple);
    margin-top: 40px;
}

@media only screen and (max-width: 640px){
  .layout--threecol-33-34-33 > .layout__region--second{
    flex: 0 1 100%;
  }
}
@media screen and (min-width: 40em) {
  .layout--threecol-section--33-34-33 > .layout__region--second {
    flex: 0 1 33%;
  }
}

/** Adds padding to top of builder page **/
body.page-node-type-builder-page div.main-container {
	padding-top: 40px;
}
body.page-node-type-builder-page.path-frontpage div.main-container {
	padding-top: 0px;
}

/** PSPS Specific styling
.pnash section.block-field-blocknodepspsfield-subtitle{
  display: inline-block;
  max-width: 75%;
}
.pnash div.field--name-field-subtitle,
.pnash div.field--name-field-field-subtitle {
  min-width: 400px;
  margin-top: -25px;
  background-color: #ffffff;
  padding: 10px;
  opacity: .99;
  display: inline-block;
  color: #609241;
  font-size: 1.5em;
  font-family: uni sans;
}
@media only screen and (max-width: 400px){
  .pnash div.field--name-field-subtitle,
  .pnash div.field--name-field-field-subtitle,
  .edge div.field--name-field-subtitle p,
  .blog div.field--name-field-subtitle

   {
    min-width: 100%;
  }
}



@media only screen and (max-width: 992px){
  .pnash section.block-field-blocknodepspsfield-subtitle{
    display:block;
  }
  .pnash div.field--name-field-subtitle,
  .pnash div.field--name-field-field-subtitle,
  .edge div.field--name-field-subtitle p,
  .edge div.field--name-field-subtitle,
  .blog div.field--name-field-subtitle

   {
    margin: 55px 0px 0px 0px;
    display:block;
    min-width: 100%;
  }


}
*/
/* PSPS of PNASH Blog */

@media only screen and (min-width: 993px)
{
  .pnash.psps section.block-field-blocknodepspsfield-hero-image-caption > div > p {
  text-align: right;
  }
  .pnash section.block-field-blocknodepspsfield-hero-image-caption > div {
  float: right;
  }
}

/* PSPS of PNASH Blog */

@media only screen and (max-width: 992px) {
  .pnash.psps section.block-field-blocknodepspsfield-subtitle {
    min-width: 100%;
}
}

@media only screen and (max-width: 992px) {

  /* Make the parent container flex to change the order*/
  .psps .layout__region.layout__region--content
 {
  display: flex;
  flex-direction: column;
 }

  /* Make the image caption appear before the subtitle. */
  .pnash.psps.field.field--name-field-hero-image-caption.field--type-text.field--label-hidden.field--item
  {
    float: left;
    text-align: left;
    min-width: 100%;
    order: 1;
}

/* Make the subtitle appear after the image title */

.pnash.psps section.block.block-layout-builder.block-field-blocknodepspsfield-subtitle.clearfix.col-sm-12 {

  order: 2;
}

/* Make the first paragraph of block builder with the icon appear after the subtitle */

section.block.block-layout-builder.block-field-blocknodepspsfield-block-2.clearfix.col-sm-12,
section.block.block-layout-builder.block-field-blocknodepspsfield-block-1.clearfix.col-sm-12,
section.block.block-layout-builder.block-field-blocknodepspsfield-block-3.clearfix.col-sm-12
{
  order: 3;
}
}


.pnash div.field--name-field-subtitle p,
.pnash div.field--name-field-field-subtitle p {
  font-family: uni sans;
  font-size: 22px;
  color: #609241;
  padding: 0px 15px 0px 0px;
}
.pnash section.block-field-blocknodepspsfield-hero-image-caption > div > p {
  font-style: italic;
  font-size: .8em;
}
.pnash section.block-field-blocknodepspsfield-hero-image-caption > div {
  display: inline-block;
  max-width: 400px;
  margin-top: .5em;
}
.pnash section.block-field-blocknodepspsfield-last-updated> div {
  border-top: 1px solid var(--purple);
  margin-top: 40px;
  padding: 20px 0px;
}

/** takes full width left aligned cards and turns them into a classic CTA **/
@media only screen and (min-width: 640px) {
  .layout__region--top .paragraph--type--card-left picture,
  .layout--onecol .paragraph--type--card-left picture,
  .layout__region--bottom .paragraph--type--card-left picture,
  .layout__region--top .paragraph--type--card-left img,
  .layout--onecol .paragraph--type--card-left img,
  .layout__region--bottom .paragraph--type--card-left img {
    float: left;
    padding: 10px;
  }
  .layout__region--top .paragraph--type--card-left .field--name-field-title-left,
  .layout--onecol .paragraph--type--card-left .field--name-field-title-left,
  .layout__region--bottom .paragraph--type--card-left .field--name-field-title-left{
    margin-top: 20px;
  }
}
/**---------------- Frontpage builder -------------------**/
body.path-frontpage article.builder-page {
  max-width: 1200px;
  margin: auto;
  }
body.change.path-frontpage div.main-container > div.row,
body.teris.path-frontpage div.main-container > div.row {
  max-width: 1170px;
  margin: auto;
}
body.path-frontpage [class*='paragraph--type--card-'] {
background-color: var(--purple);
    background-clip: content-box;
    border: rgba(255, 0, 0, 0.0) solid 5px;
}
body.path-frontpage [class*='paragraph--type--card-'] [class*='field--name-field-title'],
body.path-frontpage [class*='field--name-field-copy'] > p,
body.path-frontpage div.field--type-link > a {
  color: white;
}
/** accordion **/
.acc-container {
  max-width: 700px;
  width: 100%;
}

.acc {
  margin-bottom: 10px;
}

.acc-head {
  background-color: var(--purple);
  padding: 15px 10px;
  font-size: 22px;
  position: relative;
  cursor: pointer;
}

.acc-head::before,
.acc-head::after {
  content: "";
  position: absolute;
  top: 50%;
  background-color: #fff;
  transition: all 0.3s;
}

.acc-head::before {
  right: 30px;
  width: 3px;
  height: 20px;
  margin-top: -10px;
}

.acc-head::after {
  right: 21px;
  width: 20px;
  height: 3px;
  margin-top: -2px;
}

.acc-head p {
  color: #fff;
  font-weight: bold;
}

.acc-content {
  padding: 15px 10px;
  display: none;
}

.acc-head.active::before {
  transform: rotate(90deg);
}

/********* Employers page ********/
.emp-fact {
padding:0px 10px 20px 10px;
display: flex;
flex-direction: column;
align-items: center;
}

.emp-fact .num {
font-size: 2.5em;
color: var(--purple);
font-weight: 900;
font-family: 'Encode Sans Normal';
}

.emp-fact p{
text-align:center;
}

.employers p.fact-note {
font-style: italic;
float: right;
font-size: .8em;
}

.employers .genFactulty .profileGrey p{
font-size: 1.1em;
font-weight: 600;
}

.empCards .col-sm-4 {
background-color: var(--purple);
padding: 10px;
margin: 5px;
}

@media screen and (min-width: 900px) {
.empCards .col-sm-4 {
width: 31%;}
}
.empCards .col-sm-4 p,
.empCards .col-sm-4 ol,
.empCards .col-sm-4 li,
.empCards .col-sm-4 h3{
color:white;
}

.empCards .col-sm-4 h3{
margin-top:0px;
}

.empCards .col-sm-4 a{
color: white;
text-decoration: underline;
}

.empCards .col-sm-4 a:hover,
.empCards .col-sm-4 a:focus{
font-weight:bold;
}

/*
EDGE resource cards on builder pages
Where on the site should it be effecting: https://deohs.washington.edu/edge/resource-testing-page - you will need to publish this page to test. Unpulish again when you are done
What should it be doing on the page/s: resourece card background should be gray rather than white on builder pages.
*/

body.card.page-node-type-builder-page  div.views-row {
  background-color: var(--ltgrey);
}

/* Heat is on style tag */
.feature.heat div.title-image {
    background-image: url(/sites/default/files/44168523481_f97eec0a61_4k.jpg);
    background-position: center bottom;
}
.feature.heat .feature-section-topper h2 {
    color: white;
    padding: 150px 90px 0px 90px;
    font-size: 2.5em;
    text-shadow: 1px 2px 4px rgb(20 20 20 / 80%);
}
.feature.heat h1.page-header {
    color: white;
    text-shadow: 1px 2px 4px rgb(20 20 20 / 80%);
}
.feature.heat div.field--name-field-subtitle p, .feature.heat div.field--name-field-field-subtitle p {
    font-family: uni sans;
    font-weight: 500;
    font-size: 21px;
    color: white;
    padding: 0px 15px 0px 0px;
    text-shadow: 1px 2px 4px rgb(20 20 20 / 80%);
}
.feature.heat .feature-intro .col-md-9 a {
    font-weight:bold;
}
.feature.heat .biobox h3 {
    border-top: 1px solid #8F0500;
}
.feature.heat .biobox hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #8F0500;
}

.feature.heat .ImgBand {
  display:flex;
  flex-wrap: wrap;
}

#consider {
  padding:0px;
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 767px) {
  #consider {
    padding:0px;
    display: flex;
    flex-wrap: nowrap;
  }
  .feature.heat .ImgBand > img {
  width: 50%;
  }
  #VulnerableCommunity > div.row.feature-row > iframe {
  height: 750px;
  }
}
#consider .col-sm-4 {
background: #8F0500;
    color: white;
    padding: 5px;
    margin: 5px;
width: 100%;
}
#consider .col-sm-4 img{
  width:200px;
  margin: auto;
  display: block;
  padding-bottom: 10px;
}
@media only screen and (min-width: 767px) {
  #consider .col-sm-4 {
    background: #8F0500;
    color: white;
    padding: 5px;
    margin: 5px;
    width: 33.333333%;
  }
}
#consider .col-sm-4 h4{
    margin: 5px;
}

.feature.heat div.field--name-field-subtitle, .feature.heat div.field--name-field-field-subtitle {
    position: absolute;
    left: 35px;
    color: #ffffff;
    font-size: 40px;
    font-size: 3em;
    margin-top: -375px;
    padding-left: 90px;
    text-shadow: 1px 2px 4px rgb(0 0 0 / 60%);
    background: none;
  }

.feature.heat div.row.feature-intro .col-md-9,
.feature.heat div.row.feature-intro .col-md-3 {
  padding-top:20px;
}

.feature.heat h3 a.link {
  font-size: 22px;
    font-weight: 900;
    font-family: "Encode Sans Normal","Open Sans","Arial",sans-serif,"Arial",sans-serif;
    color: #8F0500;
    margin: 0px;
    line-height: 26.18px;
}
.feature.heat .biobox a.link{
  font-size: 22px;
    font-weight: 900;
    font-family: "Encode Sans Normal","Open Sans","Arial",sans-serif,"Arial",sans-serif;
    color: #8F0500;
    margin: 0px;
    line-height: 26.18px;
}

.feature.heat div.row.feature-intro .col-md-3 li a.link {
  font-family: 'Open Sans';
  font-size: 1em;
  font-weight: bold;
  color: #8F0500;
  margin: 0px;
}

.feature.heat p.hsm-pullquote-1-name {
    color: #8F0500;

}
.feature.heat p.hsm-pullquote-1 {
    color: #8F0500;

}

.feature.heat div.row.feature-intro p.hsm-pullquote-1 {
    margin: 30px 0px 0px 0px;
    width:100%
}

.feature.heat figure.headshot img {
  width: 200px;
}

#checklist .styled-checkbox {
  position: absolute;
  opacity: 0;
}
#checklist .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
#checklist .styled-checkbox + label:before {
  content: "";
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: white;
border: 2px solid #8f0500;
}
#checklist .styled-checkbox:hover + label:before {
  background: #8f0500;
}
#checklist .styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
#checklist .styled-checkbox:checked + label:before {
  background: #8f0500;
}
#checklist .styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
#checklist .styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
#checklist .styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: -25px;
  top: 9px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white,
    4px -6px 0 white, 4px -8px 0 white;
  transform: rotate(45deg);
}

#checklist .unstyled {
  margin: 0px 0px 0px 30px;
  padding: 0;
  list-style-type: none;
}

#checklist li {
  margin: 10px 0px 0px 30px;
  text-indent: -30px;
}

.feature.heat h1.page-header {
    color: #8F0500;
    text-shadow: 1px 2px 4px rgb(220 220 220 / 80%);
    padding-left: 110px;
    text-indent: -10px;
    margin-top: -400px;
    margin-right: 20px;
}
.feature.heat div.field--name-field-subtitle,
.feature.heat div.field--name-field-field-subtitle {
    position: absolute;
    left: 35px;
    margin: -350px 0px 0px 90px;
    padding-left: 90px;
    background: none;
    padding: 0px 15px 0px 0px;
    z-index: 1;
}

.feature.heat div.main-container div.field--name-field-subtitle > p {
    font-family: uni sans;
    font-weight: 600;
    font-size: 24px;
    color: black;
    text-shadow: 1px 2px 4px rgb(220 220 211 / 80%);

}
.feature.heat div.field--name-field-subtitle,
.feature.heat div.field--name-field-field-subtitle {
  z-index: 1;
}
#MostRisk iframe {
  width: 75%;
  height: 450px;
}
#MostRisk > div.row.feature-row > figure {
max-width:60%
}

#MostRisk > div.row.feature-row > div:nth-child(14){
  width:23%;
}

@media only screen and (max-width: 1400px) {
  .feature.heat div.field--name-field-subtitle,
  .feature.heat div.field--name-field-field-subtitle {
      margin: -300px 0px 0px 90px;
  }
}

@media only screen and (max-width: 900px) {
    .feature.heat h1.page-header {
      margin-left: 0px;
      padding: 20px;
      font-size: 2.5em;
    }
    .feature.heat div.field--name-field-subtitle, .feature.heat div.field--name-field-field-subtitle {
      margin: -290px 0px 0px 0px;
    }
    #MostRisk iframe {
      width: 100%;
      height: 450px;
    }

    #MostRisk > div.row.feature-row > div:nth-child(14){
      width:100%;
    }
}
@media only screen and (max-width: 705px) {
    .feature.heat div.field--name-field-subtitle, .feature.heat div.field--name-field-field-subtitle {
      margin: -240px 0px 0px 0px;
    }
    #MostRisk > div.row.feature-row > figure {
      max-width:100%
    }
}

@media only screen and (max-width: 480px) {
    .feature.heat div.field--name-field-subtitle, .feature.heat div.field--name-field-field-subtitle {
        margin: -190px 0px 0px 0px;
      }
}

@media only screen and (max-width: 400px) {
  .feature.heat h1.page-header {
  margin-top:-450px;
  }
}

@media only screen and (max-width: 360px) {
  .feature.heat h1.page-header {
  margin-top:-500px;
  }
}
