/*
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";

/* HEADER ------------------------------ */
body>header {background:#fff}
body>header #brand {display: block; padding: .5em}
body>header #brand img {max-width: 20%; transform: translateX(4%); height: auto; margin:0 auto; display: block}
.slideNav{overflow: hidden;}
body>header:before{content: "";opacity: 0; z-index: 3;background-color: #000;display: block;position: fixed;left:100vw;top:0;width:100vw;height:100vh;-webkit-transition:left 0ms ease 200ms, opacity 200ms ease;transition:left 0ms ease 200ms, opacity 200ms ease}
body.slideNav>header:before{left:0;opacity: .5;-webkit-transition:left 0ms ease 0ms, opacity 200ms ease;transition:left 0ms ease 0ms, opacity 200ms ease}
#navContainer{position: fixed;left: 100%;top:0;bottom:0;width: 75%;max-height: 100vh;background-color:#333;z-index:3;-webkit-transition: left 200ms ease;transition: left 200ms ease;overflow:auto;-webkit-overflow-scrolling: touch;}
#navContainer{position: fixed;left: 100%;top:0;bottom:0;width: 85%;max-height: 100vh;background-color:#333;z-index:9999;-webkit-transition: left 200ms ease;transition: left 200ms ease;overflow:auto;-webkit-overflow-scrolling: touch;}
.admin-bar #navContainer{top:46px}
body.slideNav {overflow: hidden;}
.slideNav #navContainer{left: 15%;}
#navContainer nav{display: inline}
#navContainer ul{display: block;width: 100%;margin: 0;padding-left: 0}
#navContainer li{display:block;width: 100%; position: relative}
#navContainer a, #navContainer aside.toggleNav{color:#ccc;line-height:3em;padding:0 1rem;display:block;width: 100%}
#navContainer li.on a{background-color:#f03c5e;color: #fff}
#navContainer li.open{background-color: var(--red);}
#navContainer li.open a {color: #fff;}

#navContainer li>:where(ul+span, div+span) {
  opacity: 0.5;
  display: block;
  position: absolute;
  right: 0.1875rem;
  top: 0;
  width: 3em;
  height: 3em;
}


#navContainer li>:where(ul+span, div+span)::before {
  content: "";
  display: block;
  width: 40%;
  height: 0.125rem;
  background-color: #fff;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  transition: transform .2s ease;
}

#navContainer li>:where(ul+span, div+span)::after {
  content: "";
  display: block;
  width: 40%;
  height: 0.125rem;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

#navContainer li.open>:where(ul+span, div+span) {
  opacity: 1
}

#navContainer li.open>:where(ul+span, div+span)::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

#navContainer ul ul {font-size: .8em;display: none}
#navContainer ul ul a {padding: 0.5em 1rem 0.5em 2rem; line-height: 1.5em}
#navContainer ul ul li.current-menu-item a {background-color: darkred}
#navContainer form {clear: both; width:100%; padding:1em}
#navContainer form input[type="search"] {width:calc(100% - 6em)}
#navContainer form .search-submit {width:6em}
#navContainer #mainnav {background-color: #333; }
#mobilenav{background-color: var(--red);float: left;width: 100%;text-align: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center;}
#mobilenav a, #mobilenav span{color: #fff;line-height: 2.5em; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;}
#mobilenav *+* {border-left: 1px solid rgba(255, 255, 255, 0.74)}
/* #mobilenav a:hover, #mobilenav span:hover{color: #fff;background-color:#c60d2a} */
.hamburger{
        height: 2em;
        width: 2em;
        display: block;
        position: fixed;
        right: 3px;
        top: 3px;
        z-index: 2;
        opacity: 0;
        background-color: var(--red);
        padding: 3px 4px 2px 5px;
}
.hamburger svg {height: 1.6em;}
.hamburger path {fill:#fff;font-size: 1.75em;}
.hamburger svg {pointer-events: none;}
.hamburger.on{opacity: .3}

section {padding: 3em 0 4em;}

/* Mega menu */
#navContainer ul .megamenu {
  display: none;
}

#navContainer ul li.open .megamenu {
 display: block;
}

#navContainer ul .megamenu .wrap {
  padding: 0;
}

#navContainer ul .megamenu ul {
  display: block;
}

#navContainer ul .megamenu ul svg {
  height: 1em;
  margin: 0 .75em 0 0;
  width: auto;
}

#navContainer ul .megamenu ul path {
  fill: #FFF;
}

#mobilenav .toggleNav {display: flex; align-items: center; justify-content: center;}
#mobilenav .toggleNav svg {width: 0.875rem; height: auto; margin: -2px 0 0 .4rem; pointer-events: none;}
#mobilenav .toggleNav svg path {fill: #FFF;}

header .separator {border-top: 35px solid var(--red);}

/* MAIN ------------------------------ */
#content:not(.hero) {padding: 2em 1em}
#content.no-pageHeader {padding: 3em 1em 2em;}
main > .wrap > aside {padding: 0 1em}
.twoCol, .threeCol, .resCol{
-webkit-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
-webkit-columns: auto;
        columns: auto;
-webkit-column-width: 13em;
        column-width: 13em;}

.content ul li {padding-left: 1.5em;}

.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea{margin-bottom:1em}
.formTable table td + td {padding-left: 0 !important;}

.photoright{margin:0 0 .75em 1em;}
.photoleft{margin:0 1em .75em 0;}

.admin-bar .main-navigation {top:46px}
#wpadminbar {position: fixed}
.slideNav header>.menu{right:80%}
.slideNav>nav {right:0}


.admin-bar .hamburger {margin-top: 3em}

.videoContainer {width: 100%;height:0;line-height:0;position: relative;padding-top:56.25%; /* 16:9 */}
.videoContainer.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */}
.videoContainer iframe {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:0}

#biographies .biographies a img {height: auto}
#biographies {padding: 3em 1em}
#biographies .biographies a {max-width: 82%; margin-bottom: 1em}

/* DONATE */
section.gift-list {padding: 0;}
.gift-cta {margin: 2em 0 0;}
p + .lists-container {
        padding-top: 1rem;
}

/* HOME -------------------------------- */
.wrap {padding-left: 5vw; padding-right: 5vw;}
.hero {min-height: 23.4rem}
.hero::before {
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 0;
}
.hero-text {
        width: 100%;
        text-align: center;
}
.hero-text .button {display: block; margin-left: auto; margin-right: auto;}


/* hero.video (Kidney Donors page) ------------------------------ */
.hero.video::before {
  display: none;
}

.hero.video .hero-text {
  margin: 0 0 2em;
  padding-block: 5vh;
}


.donor-protections-list li:nth-of-type(n+3) {margin-top: 2.5em;}
.donor-protections-list li {width: 50%;}
.donor-protections-list {justify-content: flex-start;}
.grey-background-logo h2 {margin-bottom: 1.5rem;}
.grey-background-logo .left {width: 100%;margin-top: 3em;height: 54vw;}
.grey-background-logo .left svg {width: 30vw;}

.call-to-action img {max-width: 100%;}
.aside-buttons .button:last-of-type {display: table; margin: .5em auto 0;}

h1.kidney-donation {margin-left: auto;margin-right: auto;}

.faq-category h1.page-title {font-size: 2em;}

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


/* BROCHURES --------------------------- */
.brochure-list {gap: 3.125rem;}
.brochure-list li {width: calc(50% - 1.5625rem);}
.content .brochure-list li {padding-left: 0;}

/* FOOTER ------------------------------ */
body>footer .wrap {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; ;align-items: stretch; padding: 1.5rem 5vw; text-align: center;}
body>footer .wrap nav {display: block}
#web-solutions{ -ms-flex-order: 1;  -webkit-box-ordinal-group: 2; order: 1;}
body>footer .wrap nav a+span:before {content: "|"; margin: 0 0.5em}

.main-navigation .search-form, body>footer .search-form{width:100%;display: block}
   .main-navigation .search-form{padding:1rem;border-top:1px solid rgba(255,255,255,.2);position: relative;overflow: auto}
.search-form input[type="search"]{height: 2em;width:calc(100% - 2em);line-height: 2em;font-size: 1em;padding: 0 0 0 .5em;border: 0;float: left;background-color: #fff}
.search-form .search-submit{height: 2em;width: 2em;line-height: 2em;font-size: 1em; color:#000; padding: 0;border: 0;float: left;-webkit-appearance:none;background-color: #ccc}
.search-form .screen-reader-text {display: none}

/* SPLASH PAGE */
.splash-page .splash-intro {padding:3rem 1rem; background: url(images/splash-bg-umbrella-small.jpg) no-repeat center / cover}
.splash-page .splash-intro img {max-width:12.5rem; margin:0 auto 2rem; transform:translateX(0.625rem)}
.splash-page .splash-intro .button {display: block}
.splash-page .splash-intro .button + .button {margin-top: 1em}

 /* find donor shield */
 #nkrcenterbuttons {flex-wrap: wrap;}
 #nkrcenterbuttons button {width: 50%;}
 #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; border-right: 1px solid var(--red);}

/* FAMILY BAR */
#nkr-familybar {
        padding:1em .5em;
}
#nkr-familybar span {
        margin-bottom: .5rem;
}
#nkr-familybar a {
        line-height: 1.7em;
}
#nkr-familybar li {
        display: block;
        line-height: 1em;
}
/* /family bar */


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

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

.protection .icon svg {
  max-height: 4em;
  max-width: 4em;
  top: 1.25rem;
}

.protection #content {
  padding-block: 4em 5em;
}

.protection :where(h1, h2) {
  font-size: 1.625em;
  position: relative;
}

#donor-protections {
  padding-block: 4em 2em;
}

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


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

/* 600 */
@media (max-width: 37.5em) {
  ul.donor-protection-list {
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }
}


/* 500 */
@media (max-width: 31.25em) {
        body>header #brand img {max-width: 33%;}

        .hero h1 {font-size: 2em;}
        .donor-protections-list li:nth-of-type(n+2) {margin-top: 1.5em;}
        .donor-protections-list li {width: 100%;}
        .donor-protections-list .icon:before {margin: .75em auto;}

        .grey-background-logo .left svg {width: 24vw;}
        .grey-background-logo .left {height: 70vw}

        .resources-callouts section {width: 100%;}  

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

        .call-to-action p {font-size: 1em;}

        #main ul.anchor-list li {width: 100%; margin-right: 0;}

        .content .alignright, .content .align-right {max-width: 100%;margin: 1em 0;}

        #mobilenav a, #mobilenav span {font-size: 0.875rem;}

        .donor-block h2 {font-size: 1.5em;}

        .brochure-list li {width: 100%;}

         /* find donor shield */
         #nkrcenterbuttons {flex-direction: column;}
         #nkrcenterbuttons button:first-of-type,
         #nkrcenterbuttons button:nth-of-type(2),
         #nkrcenterbuttons button:nth-of-type(3),
         #nkrcenterbuttons button:last-of-type {
                 border: 1px solid var(--red);
                 border-radius: .3em;
                 width: 100%;
                 margin: .25em 0;
         }
}