/*
Theme Name: Web Solutions
Theme URI: https://www.websolutions.com/
Author: Web Solutions
Author URI: https://www.websolutions.com/
Description: WordPress wpCode
Version: 2.0
Text Domain: wpcodev2

Web Solutions is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
*/
@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

  /* HEADER ------------------------------*/
  body>header{background:rgba(57, 57, 57, 0.8); backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem);position: fixed;overflow: visible; padding: .47em .44em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content:flex-end; border-bottom: 3px solid #CF0E34;z-index: 10;min-height: 3.25rem;}
  body>header>.wrap{height:60px; overflow: visible}
  #brand {display:block; position: absolute; max-width: 8rem; width: 100%; left: 2rem; top: 0.6875rem;z-index: 1;}
  #brand img {width:100%; display: block; height: auto;}

  nav ul{margin: 0}
  #mainnav{overflow:visible}
  #mainnav ul{text-align:right;overflow:visible;margin: 0;padding: 0;}
  #mainnav li{display:inline-block;position:relative}
  #mainnav a{font-weight: 500; font-size: .9375em;line-height:2em;border: 1px solid transparent;padding: .3em .8em;display:inline-block;color:#fff;text-decoration:none;}
  #mainnav>div>ul>li:last-child>a {background: var(--red); color: #fff; border-radius: 5px; padding: .25em 1em;
      /*  top: .55em;
        right: .55em;*/}/*
.admin-bar #mainnav>div>ul>li:last-child>a { top: 2.5em;}*/
  #mainnav>div>ul>li:not(:last-child):hover>a, #mainnav>div>ul>li:not(:last-child):active>a,
  body.tax-faqs-category #mainnav>div>ul>li:not(:last-child)>a[href$="/faq/"]:hover {
      background: #000;
      border: 1px solid #A3A3A3;
      border-radius: 5px;
  }
  #mainnav>div>ul>li:last-child:hover>a {-webkit-transform: perspective(1px) scale(1.05);transform: perspective(1px) scale(1.05)}
  #mainnav>div>ul>li.current-menu-item>a,
  #mainnav>div>ul>li.current-page-ancestor>a,
  body.tax-faqs-category #mainnav>div>ul>li>a[href$="/faq/"] {background:#000; border: 1px solid #707070; border-radius: 5px;}
  /*dhtml*/
  #mainnav li ul{z-index:1;width:275px;border-radius: 5px;padding: .5em .75em; margin-left: .25rem; border-radius: 0 .5rem .5rem .5rem;background: rgba(0, 0, 0, 0.8);position:absolute;overflow:auto;height:auto; top: -200vh;opacity: 0;z-index: -1; visibility: hidden; -webkit-transition: ease 200ms opacity 0.35s; transition: ease 200ms opacity 0.35s;}
  #mainnav li:hover ul {top:auto;opacity: 1;z-index: 1; visibility: visible}
  #mainnav>div>ul>li:last-child ul{right:0}
  #mainnav li ul li{width:100%;display:block;}
  #mainnav ul li ul li a{background:none;color:#fff}
  #mainnav li ul li a{font-size: 0.875rem;line-height: 1.1;padding: .37em .5em;display:block;width:100%;text-align:left;float:left}
  #mainnav li ul li a:hover, .t1 li ul li a:active{color:var(--red);background:#fff; border-radius: .25em;border: 1px solid #707070;}
  #mainnav li ul ul {display: none}
  /* ancillary */
  #ancillary {position:absolute;right:0;top:0;padding: 1rem 0; color:#ccc;font-size:.7em;}
  #ancillary ul{display: inline}
  #ancillary li{display: inline;}
  #ancillary a {display: inline-block;padding: .5em .8em; text-decoration:none;color:#999;}
  #ancillary a:hover, #ancillary a:active,#ancillary li.on a{color:#666}
  #ancillary li.on a {text-decoration:none;color:#666}
  #ancillary form{display: inline;}
  #ancillary form input{display: inline-block}
  /* mobile */
  #mobilenav, .toggleNav{display: none}

#mainnav li.has-megamenu { position: static; }

#mainnav li.has-megamenu>button {
  padding: 0;
  border: 0;
  background: 0 0;
  width: 1.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 0.125rem;
  margin-left: -5.625rem;
  opacity: 0;
}
#mainnav li.has-megamenu>button:focus {
  opacity: 1;
}
#mainnav li.has-megamenu>button:before {
  content: "";
    position: absolute;
    height: 1rem;
    top: calc(50% - 6px);
    right: 0;
    left: 0;
    transform: translateY(-50%);
    background: url(images/chevron-down.svg) no-repeat center/contain;
}

#mainnav li.has-megamenu:hover::after {
  bottom: -.75em;
  content: '';
  height: 1.5em;
  left: 0;
  position: absolute;
  transition: none;
  width: 100%;
}

#mainnav .megamenu {
  background: #FFF;
  border-bottom: 1px solid #CCC;
  left: 0;
  opacity: 0;
  padding-block: 2em;
  pointer-events: none;position: fixed;
  right: 0;
  top: 100%;
  transition: all 200ms ease 0.35s;
  visibility: hidden;
  width: 100%;
}
#mainnav li.has-megamenu.open .megamenu,
#mainnav li:hover .megamenu {
  opacity: 1;
  pointer-events: all;visibility: visible;
}

.megamenu .wrap {
  max-width: 55.25em
}

#mainnav li .megamenu ul {
  background: none;
  column-gap: 1.5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);margin: 0;
  opacity: 1;
  position: static;
  row-gap: .5em;
  transition: none;
  width: auto;
  visibility: inherit;
}

#mainnav li .megamenu a,
#mainnav li .megamenu a:hover {
  border: 0;
  border-radius: .3125em;
  color: var(--red);
  font-size: 1em;
  padding: .5em .5em .5em 2em;
}

.megamenu svg {
  height: 1em;
  left: .25em;
  position: absolute;
  top: .4375em;
  width: 1.5em;
}

#mainnav .megamenu li.on a,
#mainnav .megamenu li:hover a,
#mainnav .megamenu a:focus {
  background: var(--red);
  border-radius: .5em;
  color: #FFF;
}

#mainnav .megamenu li.on :is(path, polygon),
#mainnav .megamenu li:hover :is(path, polygon),
#mainnav .megamenu a:focus :is(path, polygon) {
  fill: #FFF;
}

/* MAIN ------------------------------ */
main {padding: 0;}
main > .wrap {padding: 3.75em 4vw 2em;}
main>div>aside{width:10rem; overflow:hidden;float: left; margin-top: 1.25rem;margin-right: 5rem;}
main>div>aside.brochure {float:right; margin-right:0; width: 20rem;}
body.fullWidth  #content {width: 100%;margin: 0 auto;float: none}

#content:not(.hero){float:right;width:calc(100% - 15rem);padding:0 0 50px;overflow:hidden;min-height:600px;position:relative}
#content.faq {float: left; width:calc(100% - 22rem);}
#content.fullWidth {float:none;margin: 0 auto}
#content.no-pageHeader {padding-top: 2rem;}
main > .wrap.faq-no-pageHeader #content.no-pageHeader {padding-top: 0;}
main > .wrap.faq-no-pageHeader {padding-top: 9rem;}

.pageHeader {padding-top: 3.6875rem;}

.wsManagementLogin td:first-child {width:40%; text-align: right}

.twoCol {-webkit-columns:2;-moz-columns:2;columns:2;}
.threeCol {-webkit-columns:3;-moz-columns:3;columns:3;}
.resCol {
	-webkit-columns: auto;-moz-columns: auto;columns: auto;
	-webkit-column-width: 13em;-moz-column-width: 13em;column-width: 13em;
}

.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}

.photoright{margin:0 0 3em 4em;}
.photoleft{margin:0 4em 3em 0;}

#biographies .biographies {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
#biographies .biographies a {width: 20%; margin: 1.5% 1.5% 1em;-webkit-order: 0;-ms-flex-order: 0;order: 0;-webkit-flex: 0 1 20%;-ms-flex: 0 1 20%;flex: 0 1 20%;-webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;}

section {padding: 2.5em 0 6em;}

/* HOME -------------------------------- */
.hero {padding-top: 3.6875rem;min-height: 37.5em;}
.hero::before {
  height: calc(68.5vw + 68.5vh);
  width: calc(68.5vw + 68.5vh);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8)
}
.hero h1 {margin-bottom: 2rem;font-size: 2.8125em;}
.hero-text {max-width: 25rem;width: 50%;}
body:not(.home) .hero-text {max-width: 33rem;}
body:not(.home) .hero-text .secondary-header-subtext {max-width: 25rem;}

main .hero .wrap {padding: 0 5vw;}


/* hero.video (Kidney Donors page) ------------------------------ */
.hero.video {
  padding-top: 3.625em;
}

.hero.video::before {
 display: none;
}

.hero.video .wrap {
  overflow: visible;
}

.hero.video h1 {
  font-size: clamp(1.75rem, 0.524rem + 2.62vw, 2.813rem); /* 750 - 1400 */
  margin-bottom: clamp(0.5em, -1.231em + 3.69vw, 2em);
}

.hero.video :is(.ws-grid, .ws-grid-inner) {
  align-items: center;
  grid-row: 1 / 2;
  grid-column: 1 / -1;
  --ws-column-count: 12;
}

.hero.video .hero-text {
  grid-column: 1 / 5;
  padding: 2em var(--ws-gap) 3em 0;
}

.hero.video .video {
  /* height: 100%; */
  grid-column: 6 / -1;
}



.donor-protections-list li {width: 25%;}
.donor-protections-list li:nth-of-type(n+5) {margin-top: 2.5em;}

.grey-background-logo h2 {margin-bottom: 3.625rem;}
.grey-background-logo .right {float: right;width: 35%;margin-left: 6%;}
.grey-background-logo .left {width: 59%;height: 24em;margin-top: -1.25em;}
.grey-background-logo .left svg {width: 12.5em;}

.aside-buttons .button + .button {margin-left: 1rem;}


/* Donate --------------------------- */
.gift-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  float: left;
  width: 48%;
  padding: 0;
}

.lists-container>:nth-child(even) {
  margin-left: 4%;
}
.gift-cta {
  float:left;
  margin: 2em 0;
}
p + .lists-container > section {
  padding-top: 1rem;
}

/* DONOR PROTECTIONS ------------------- */
.hero.hero-small {
  height: 50vmin;
  min-height: 34em;
}
#main ul.anchor-list {columns: 2; column-gap: 0;}
#main ul.anchor-list li {
    width: 65%;
    display: inline-block;
    text-align: left;
}
.donor-block .wrap, #main .hero.hero-small + .anchor-links > .wrap, .grey-background-logo .wrap, .call-to-action .wrap {padding-left: 4vw;padding-right: 4vw;}


/* RESOURCES --------------------------- */
.resources-callouts section {
  width: calc(33.33% - 2.5rem);
}


/* BROCHURES --------------------------- */
.brochure-list {gap: 4.3125rem;}
.brochure-list li {width: 17.0625rem;}
.brochure-list .button + a:hover {color: var(--red);}
.brochure-list .brochure-img:hover img {opacity: .8}

/* FOOTER ------------------------------ */
body>footer .wrap nav span:before {content: "|"; margin: 0 0.5em}
body>footer>.wrap {padding: 1.5rem 1rem;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}
body>footer .wrap nav {
  display: block;
}

body>footer .wrap nav span:first-of-type:before {
  display: none;
}


body>footer .social-links a:hover {opacity: .7;}

/* SPLASH PAGE */
.splash-page .splash-intro {padding:4.375rem 1rem 6.25rem; background: url(images/splash-bg-umbrella.jpg) no-repeat center / cover}
.splash-page .splash-intro .wrap img {max-width:18.75rem; margin: 0 auto 2.5rem}
.splash-page .splash-intro .buttons {margin-top: 2.8125rem}
.splash-page .splash-intro .button + .button {margin-left: 3.75rem}

.splash-page .splash-intro .wrap :is(.button:hover, .button:focus) {
  background: #FFF;
  border-color: var(--red);
  color: var(--red);
}

/* FIND DONOR SHIELD */
#nkrcenterbuttons button {border-radius: .3em; margin:0 1%;}
#nkrcenterbuttons > button:first-of-type {margin-left: 0;}
#nkrcenterbuttons > button:last-of-type {margin-right: 0;}

/* FAMILY BAR */
#nkr-familybar{
  line-height:2.125em;
  padding:.5em .5em .25em;
}
#nkr-familybar span{
  padding-right:.25em;
}
#nkr-familybar li:before{
  content:"\00A0\2022\00A0";
  display:contents;
}
#nkr-familybar a{line-height:2em;}
#nkr-familybar a:hover,
#nkr-familybar a:active{
  text-decoration:none;
  border-color:rgba(206,14,45,1);
}
/* /family bar */


/* DONOR PROTECTION ARCHIVE ------------------------ */
.protection .content + h2 {
  margin-top: 1.25em;
}

/* DONOR PROTECTION SINGLE TEMPLATE ------------------------ */
.protection .icon {
  transform: translate(-50%,-2.5em);
  height: 10em;
  width: 10em;
}

.protection .icon svg {
  max-height: 4.5em;
  max-width: 4.5em;
  top: 1.5rem;
}

.protection #content {
  min-height: 0;
  padding-block: 2em 4em;
}

.protection :is(h1, h2) {
  font-size: 1.875em;
}

#donor-protections {
  padding-block: 5em 3em;
}

#donor-protections .wrap {
  max-width: calc(55.25em + 2 * 5vw);
  padding-inline: 4vw;
}

#donor-protections h2 {
  font-size: 1.875em;
}

ul.donor-protection-list {
  grid-template-columns: repeat(3, 1fr);
}

ul.donor-protection-list li:not(.on) :is(a:focus, a:hover) {
  padding-right: 1.75em;
}


/* MEDIA QUERIES ------------------------ */

/* MIN 1500 */
@media (min-width: 93.75em) {
    html {font-size: 1.1em;}
}

/* MIN 2000 */
@media (min-width: 125em) {
     html {font-size: 1.2em;}
     #nkrcenterbuttons button {font-size: .83em;}
}

/* 1400 */
@media (max-width: 87.5em) {
  #nkr-familybar {font-size: 0.9375rem;}
  #nkr-familybar svg {width: 1.5em; height: 1.5em;}
  #nkr-familybar nav, #nkr-familybar li {font-size: 0.8125rem;}
  #nkr-familybar span {padding-right: 0; padding-left: 1.75em;}
  #nkr-familybar a {padding: 0 0.25em;}
}

/* 1200 */
@media (max-width: 75rem) {
  #nkr-familybar span {display: none;}
  #nkr-familybar ul li:first-child:before {content: none;}
  #nkr-familybar nav, #nkr-familybar li {font-size: 0.7813rem;}

  #mainnav .megamenu {
    padding-block: 3em 1.5em;
  }

  .megamenu .wrap {

    max-width: 52em;
  }

  #mainnav li .megamenu ul {
    column-gap: 1em;
  }

  #mainnav li .megamenu :is(a, a:hover) { font-size: .875rem; }

}

/* 1100 */
@media (max-width: 68.75em) {
  #brand { left: 1rem; max-width: 6em }
  #mainnav a { font-size: .875em; padding: 0.3em 0.5em;  }
  #mainnav>div>ul>li:last-child>a { padding: 0.25em .5em; }

  #content.no-pageHeader {padding-top: 3.5rem;}

  .grey-background-logo .left svg {
    width: 19vw;
  }
  #main ul.anchor-list li {width: 80%;}

  .hero::before {right: 45%}
  .hero h1 {font-size: 2.5em;}
  .hero.video { padding-top: 3.5em;}

  .resources-callouts {flex-wrap: wrap;}
  .resources-callouts section {width: calc(50% - 1.875rem);}  

  .brochure-list {gap: 3.125rem;}
  .brochure-list li {width: calc(50% - 1.5625rem);}

  .gift-list small {width: 6.75em;}

  /* find donor shield */
  #nkrcenterbuttons {flex-wrap: wrap;}
  #nkrcenterbuttons button {width: 50%; margin: 0;}
  #nkrcenterbuttons button:first-of-type {border-radius: .3em 0 0 0; border-bottom: 0;border-right: 0;}
  #nkrcenterbuttons button:nth-of-type(2) {border-radius: 0 .3em 0 0; border-bottom: 0; border-right: 1px solid var(--red);}
  #nkrcenterbuttons button:nth-of-type(3) {border-radius: 0 0 0 0.3em; border-right: 0;}
  #nkrcenterbuttons button:last-of-type {border-radius: 0 0 0.3em 0;}
}

/* 900 */
@media (max-width: 56.25em) {
  #brand {left: .44em; max-width: 5.5em;}
  #mainnav a {font-size: .75em;}

  .donor-protections-list li {width: 33%;}
  .donor-protections-list li:nth-of-type(n+4) {margin-top: 2.5em;}
  #main ul.anchor-list {columns: 2;}

  ul.donor-protection-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero.video {padding-top: 3.25em;}

}

/* FIREFOX - FOR FAMILY BAR */
@supports (-moz-appearance:none) and (all:initial) {
  #nkr-familybar {padding: .5em;}
}