/*
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: 1em;max-width: 17em;margin: 0 auto;}
body>header #brand img {max-width: 100%; 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;float: left;width: 100%;margin: 0;padding-left: 0}
#navContainer li{display:block;float: left;width: 100%; position: relative}
#navContainer a, #navContainer span.toggleNav{color:#ccc;line-height:3em;padding:0 1rem;display:block;float: left;width: 100%}
#navContainer li.on a{background-color:#3B76B5;color: #fff}
#navContainer li.open{background-color: #3B76B5;}
#navContainer li.open a {color: #fff;}
#navContainer li>ul+span{opacity: 0.5;display: block;position: absolute;right: 0.1875rem;top: 0;width: 3em;height: 3em;}
#navContainer li.open>ul+span{opacity: 1}
#navContainer li>ul+span:before{content: ""; display: block; width: 40%; height: 0.125rem; background-color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); -webkit-transform-origin: center center; transform-origin: center center;}
#navContainer li>ul+span:after{content: ""; display: block; width: 40%; height: 0.125rem; background-color: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: center center; transform-origin: center center;}
#navContainer li.open>ul+span:before {-webkit-transform: translate(-50%, -50%)rotate(0deg);transform: translate(-50%, -50%)rotate(0deg);}
#navContainer li>ul+span::before { -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease;}
#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: #113459}
#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: #113459;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 .toggleNav {display: flex; align-items: center; justify-content: center;}
#mobilenav .toggleNav svg {width: 0.875rem; height: auto; margin: -2px 0 0 .4rem;}
#mobilenav .toggleNav svg path {fill: #FFF;}
.hamburger{
        height: 2em;
        width: 2em;
        display: block;
        position: fixed;
        right: 3px;
        top: 3px;
        z-index: 2;
        opacity: 0;
        background-color: #113459;
        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;}

/* MAIN ------------------------------ */
#content:not(.hero) {padding: 2em 1em}
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}

/* 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.hero-with-video.hero-circle:before {
  background: linear-gradient( 180deg , rgba(166, 233, 251, 1) 0% , rgba(109, 207, 246, 1) 100% );
}

.hero-text {
        width: 100%;
        text-align: center;
}
.hero-text p {
        margin-inline: auto;
}
.hero-with-video .wrap {
   flex-direction: column;
   padding-block: 1.5em 2.5em;
}
.hero-with-video .buttons {
        width: 100%;
        justify-content: center;
}
.hero-with-video :is(.hero-video, .hero-image) {
        width: 100%;
}

.hero-text .button {display: block; margin-left: auto; margin-right: auto;}
.donor-protections-list li:nth-of-type(n+3) {margin-top: 2.5em;}
.donor-protections-list li {width: calc(50% - .5rem); font-size: 0.875rem;}
.donor-protections-list li:nth-of-type(even) {margin-left: 1rem;}
.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 {font-size: 2em;margin-left: auto;margin-right: auto;}

.tableContainer {overflow: auto;}
.tableContainer .researchSummary {width: 40.625rem;}
.tableContainer .researchSummary td:first-child, .tableContainer .researchSummary th:first-child {position: sticky; left: 0;}
.tableContainer .researchSummary td:first-child:before {content: ""; right: 0; top: 0; bottom: 0; width: 1px; position: absolute; background: rgba(0,0,0,.25);}
.tableContainer .researchSummary tr:nth-child(even) td:first-child {background-color: rgb(229 229 229);}
.tableContainer .researchSummary tr:nth-child(odd) td:first-child {background-color: #FFF;}

.tableContainer .researchSummary tr.newSection:nth-child(odd) td:first-child {background-color: #333;}
.tableContainer .researchSummary tr.newSection:nth-child(odd) td:first-child:before {content: none;}

.tableContainer .researchSummary td:nth-child(2) {border-left: 0;}

.tableContainer .researchSummary tr.high td:first-child {background-color: rgb(251 173 185);}
.tableContainer .researchSummary tr.medium td:first-child {background-color: rgb(255 233 153);}
.tableContainer .researchSummary tr.low td:first-child {background-color: rgb(177 225 187);}

/* FOOTER ------------------------------ */

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

body>footer .wrap {display: flex; flex-direction: column; justify-content: flex-start; align-content: stretch; 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}

 /* 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);}

/* 500 */
@media (max-width: 31.25em) {
        
        .hero h1 {font-size: 1.875em;}
        .hero-text .button {font-size: 1em; padding: .75em 1em;}
        .donor-protections-list li:nth-of-type(n+2) {margin-top: 1.5em;}
        .donor-protections-list li {width: 100%;}
        .donor-protections-list li:nth-of-type(even) {margin-left: 0;}
        .donor-protections-list .icon:before {margin: .75em auto;}
        
        .grey-background-logo .left svg {width: 24vw;}
        .grey-background-logo .left {height: 70vw}
        
        .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;}

        .buttons .button {text-align: center;}

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

         .tableContainer .researchSummary {width: 34.375rem; font-size: 0.875rem;}
         .tableContainer .researchSummary tr.newSection:nth-child(odd) td:first-child {font-size: .875rem;}
}