/*
Theme Name: PwK 3.2.2
Text Domain: Psych with Keegan
Version: 3.2.2
Description: Psych with Keegan theme
Author: Keegan Krantz
Author URI: https://psychwithkeegan.com
*/

html, body, table, div {
margin:0;
padding:0;
overflow-x: hidden;
overflow-y: auto;
}

body {
background-color: var(--PwKWhiteBlue);
padding: 0px;
margin: 0px;
height: 100%;
min-height: 100%;
}

table, tr, td {
padding: 0px;
margin: 0px;
border-collapse: collapse;
}

#site-header {
width: 100%;
margin: 0;
padding: 1.5% 0 2% 0;
background-color: #ffffff;
}

#site-header #header-container {
width: 55%;
margin: 0 auto 0 auto;
padding: 0;
vertical-align: middle;
}

#site-header #header-container a {
text-decoration: none;
}

#site-header #header-container #logo {
width: 20%;
height: auto;
display: inline-block;
vertical-align: middle;
}

#site-header #header-container #header-links {
width: 79%;
display: inline-block;
text-align: right;
vertical-align: middle;
}

#site-header #header-container #header-links #link {
font-family: "PwK-Regular";
color: #7b886b;
font-size: 20px;
line-height: 25px;
text-decoration: none;
display: inline-block;
vertical-align: middle;
margin: 0 0 0 4%;
padding: 0;
transition: color .3s;
}

#site-header #header-container #header-links #link:hover {
color: var(--PwKBlue);
text-decoration: underline;
transition: color .3s;
}

#site-header #header-container #header-links #img-link {
display: inline-block;
vertical-align: middle;
width: 6%;
margin: 0 0 0 4%;
padding: 0;
}

#site-header #header-container #header-links #header-link-img {
background-color: #7b886b;
width: 100%;
height: auto;
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
transition: background-color .3s;
}

#site-header #header-container #header-links #header-link-img:hover {
background-color: #6665dd;
transition: background-color .3s;
}

#mobilemenu {
display: none;
}

#homepage-stories {
width: 100%;
padding: 2% 0 4% 0;
margin: 0;
text-align: center;
vertical-align: top;
}

#homepage-stories a {
text-decoration: none;
}

#homepage-stories #home-storie-container {
background-color: #dbe9ee;
display: inline-block;
width: 25%;
padding: 0;
margin: 0 1% 1% 1%;
padding: 1.5% 1% 2% 1%;
border-radius: 15px;
text-align: left;
vertical-align: top;
transition: background-color .5s;
}

#homepage-stories #home-storie-container:hover {
background-color: #ffffff;
cursor: pointer;
transition: background-color .5s;
}

#homepage-stories #home-storie-container #story-thumbnail {
border-radius: 10px;
width: 95%;
height: auto;
margin: 0 2.5% 0 2.5%;
padding: 0;
text-align: center;
}

#homepage-stories #home-storie-container:hover #story-thumbnail {
border-radius: 10px;
width: 95%;
height: auto;
margin: 0 2.5% 0 2.5%;
padding: 0;
text-align: center;
}

#homepage-stories #home-storie-container #story-thumbnail .thumbnail {
width: 100%;
height: auto;
margin: 0 auto -1% auto;
padding: 0;
border-radius: 10px;
text-align: center;
}

#homepage-stories #home-storie-container:hover #story-thumbnail .thumbnail {
cursor: pointer;
}

#homepage-stories #home-storie-container #story-title {
color: #000000;
width: 90%;
height: 72px;
margin: 3% auto 0 auto;
font-family: "PwK-Bold";
font-size: 30px;
line-height: 35px;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
transition: color .5s;
}

#homepage-stories #home-storie-container:hover #story-title {
color: #000000;
transition: color .5s;
}

#homepage-stories #home-storie-container #story-link {
background-color: #bccbd0;
border-radius: 75px;
text-align: left;
font-family: "PwK-text-bold";
font-size: 15px;
color: #000000;
padding: 2% 5%;
margin: 2% 0 0 4%;
transition: background-color .3s, color .3s;
}

#homepage-stories #home-storie-container:hover #story-link {
background-color: #000000;
color: #ffffff;
pointer: cursor;
transition: background-color .3s, color .3s;
}

#homepage-stories #home-storie-container #story-link:hover {
background-color: #6665dd;
color: #ffffff;
pointer: cursor;
transition: background-color .3s, color .3s;
}

#homepage-stories #button-zone {
width: 100%;
margin: 0;
padding: 2% 0 2% 0;
text-align: center;
}

#homepage-stories #button-zone #home-more-btn {
background-color: #6665dd;
border-radius: 75px;
text-align: center;
font-family: "PwK-text-bold";
font-size: 22px;
color: #ffffff;
padding: 1% 2%;
transition: background-color .3s;
}

#homepage-stories #button-zone #home-more-btn:hover {
background-color: #7b886b;
cursor: pointer;
transition: background-color .3s;
}

#homepage-stories #button-zone #home-more-btn a {
text-decoration: inherit;
color: inherit;
}

#home-favorites {
background-color: #ffffff;
width: 50%;
padding: 3% 2% 4% 2%;
margin: 1% auto 9% auto;
border-radius: 20px;
text-align: center;
}

#home-favorites a {
text-decoration: none;
}

#home-favorites #favorite-chip {
background-color: #ffffff;
display: inline-block;
width: 43%;
margin: 1% 2% 2% 2%;
padding: 2% 1% 2% 1%;
border-radius: 15px;
text-align: left;
vertical-align: top;
transition: background-color .5s;
}

#home-favorites #favorite-chip:hover {
background-color: var(--PwKWhite2);
cursor: pointer;
transition: background-color .5s;
}

#home-favorites #favorite-chip #favorite-thumbnail {
border-radius: 10px;
width: 95%;
height: auto;
margin: 0 2.5% 0 2.5%;
padding: 0;
text-align: center;
}

#home-favorites #favorite-chip #favorites-bar {
width: 100%;
display: block;
padding: 3% 0 3% 0;
margin: 2% auto 1% auto;
text-align: center;
}

#home-favorites #favorite-chip #button-zone {
width: 100%;
margin: 0;
}

#home-favorites #favorite-chip #favorite-button {
background-color: #d1d1d1;
border-radius: 75px;
text-align: left;
font-family: "PwK-text-bold";
font-size: 15px;
color: #717171;
padding: 2% 5%;
margin: 0 1% 0 1%;
transition: background-color .3s, color .3s;
}

#home-favorites #favorite-chip:hover #favorite-button {
background-color: #6665dd;
color: #ffffff;
transition: background-color .3s, color .3s;
}

#home-favorites #favorite-chip #favorite-button:hover {
background-color: #000000;
color: #ffffff;
transition: background-color .3s, color .3s;
}

#home-favorites #favorite-chip #favorite-tag {
border-radius: 75px;
text-align: left;
font-family: "PwK-text-bold";
font-size: 15px;
padding: 2% 5%;
margin: 0 1% 0 1%;
overflow: hidden;
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip #favorite-tag .material-symbols-rounded {
display: inline-block;
margin: -2px 3px 0 0;
padding: 0;
font-size: 20px;
color: inherit;
text-align: center;
vertical-align: middle;
font-variation-settings:
'FILL' 1,
'wght' 500,
'GRAD' -25,
'opsz' 40
}

#home-favorites #favorite-chip #favorite-thumbnail .thumbnail {
width: 100%;
height: auto;
margin: 0 0 -1.2% 0;
padding: 0;
border-radius: 10px;
}

#home-favorites #favorite-chip:hover #favorite-thumbnail .thumbnail {
cursor: pointer;
}

#home-favorites #favorite-chip #favorite-title {
color: #717171;
width: 90%;
height: 73px;
margin: 3% auto 3% auto;
font-family: "PwK-Bold";
font-size: 30px;
line-height: 35px;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
transition: color .5s;
}

#home-favorites #favorite-chip:hover #favorite-title {
color: #000000;
transition: color .5s;
}

#home-favorites h1 {
color: #3a3a3a;
font-family: "PwK-Bold";
font-size: 40px;
line-height: 45px;
text-align: center;
margin: 0 0 4% 0;
}

#home-favorites #button-zone {
width: 100%;
margin: 2% 0 -3% 0;
padding: 2% 0 2% 0;
text-align: center;
}

#home-favorites #button-zone #fav-more-btn {
background-color: #6665dd;
border-radius: 60px;
text-align: center;
font-family: "PwK-text-bold";
font-size: 19px;
color: #ffffff;
padding: 1.75% 3%;
transition: background-color .3s;
}

#home-favorites #button-zone #fav-more-btn:hover {
background-color: #7b886b;
cursor: pointer;
transition: background-color .3s;
}

#home-favorites #button-zone #fav-more-btn a {
text-decoration: inherit;
color: inherit;
}

#home-favorites #favorite-chip .gold {
background-color: var(--White);
color: var(--PwKGray3);
border: 1px solid var(--White);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip:hover .gold {
background-color: var(--PwKWhite2);
color: var(--PwKGray3);
border: 1px solid var(--PwKWhite2);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip .gold:hover {
background-color: var(--PwKWhite2);
color: var(--PwKGoldHover);
border: 1px solid var(--PwKGoldHover);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip .pwkgreen {
background-color: var(--White);
color: var(--PwKGray3);
border: 1px solid var(--White);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip:hover .pwkgreen {
background-color: var(--PwKWhite2);
color: var(--PwKGray3);
border: 1px solid var(--PwKWhite2);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip .pwkgreen:hover {
background-color: var(--PwKWhite2);
color: var(--PwKGreen);
border: 1px solid var(--PwKGreen);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip .pwkred {
background-color: var(--White);
color: var(--PwKGray3);
border: 1px solid var(--White);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip:hover .pwkred {
background-color: var(--PwKWhite2);
color: var(--PwKGray3);
border: 1px solid var(--PwKWhite2);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip .pwkred:hover {
background-color: var(--PwKWhite2);
color: var(--PwKRed);
border: 1px solid var(--PwKRed);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip .pwknavy {
background-color: var(--White);
color: var(--PwKGray3);
border: 1px solid var(--White);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip:hover .pwknavy {
background-color: var(--PwKWhite2);
color: var(--PwKGray3);
border: 1px solid var(--PwKWhite2);
transition: background-color .3s, color .3s, border .3s;
}

#home-favorites #favorite-chip .pwknavy:hover {
background-color: var(--PwKWhite2);
color: var(--PwKNavy);
border: 1px solid var(--PwKNavy);
transition: background-color .3s, color .3s, border .3s;
}

#sitemap-container {
width: 60%;
margin: 0 auto 0 auto;
padding: 2% 0 4% 0;
text-align: center;
}

#sitemap-container h1 {
text-align: center;
font-family: "PwK-text-bold";
font-size: 30px;
line-height: 35px;
color: #000000;
margin: 0 0 3% 0;
}

#sitemap-container h2 {
text-align: left;
font-family: "PwK-Med";
font-size: 20px;
line-height: 20px;
color: #000000;
margin: 2% 0 20px 0;
}

#sitemap-container #sitemap-wide {
width: 90%;
padding: 4% 5% 6% 5%;
margin: 1% 0 2% 0;
background-color: #ffffff;
border-radius: 20px;
text-align: left;
}

#sitemap-container #sitemap-wide #category-column {
display: inline-block;
width: 29%;
padding: 0 3% 0 0;
vertical-align: top;
}

#sitemap-container #sitemap-wide #category-column-wide {
display: inline-block;
width: 45%;
padding: 0 4% 0 0;
vertical-align: top;
}

#sitemap-container #sitemap-wide #category-dividers {
width: 95%;
height: 2px;
margin: 0 auto 4% auto;
}

#sitemap-container #sitemap-wide a {
display: block;
font-family: "PwK-Regular";
font-size: 17px;
line-height: 22px;
color: var(--PwKGray1);
text-decoration: none;
margin: 0 0 20px 0;
}

#sitemap-container #sitemap-wide a:hover {
color: var(--PwKBlue);
text-decoration: underline;
cursor: pointer;
}

#sitemap-container #link {
font-family: "PwK-text";
font-size: 16px;
color: #000000;
text-decoration: none;
text-align: left;
}

#sitemap-container #link:hover {
color: #6665dd;
text-decoration: underline;
cursor: pointer;
}

#favorites-page {
width: 80%;
padding: 1% 0 4% 0;
margin: 1% auto 5% auto;
border-radius: 20px;
text-align: center;
}

#favorites-page a {
text-decoration: none;
}

#favorites-page #favorite-chip {
background-color: var(--PwKWhiteBlueShadow);
display: inline-block;
width: 25%;
margin: 1% 1% 2% 1%;
padding: 1.5% 1% 1.5% 1%;
border-radius: 15px;
text-align: left;
vertical-align: top;
transition: background-color .5s;
}

#favorites-page #favorite-chip:hover {
background-color: var(--PwKWhite2);
cursor: pointer;
transition: background-color .5s;
}

#favorites-page #favorite-chip #favorite-thumbnail {
border-radius: 10px;
width: 95%;
height: auto;
margin: 0 2.5% 0 2.5%;
padding: 0;
text-align: center;
}

#favorites-page #favorite-chip #favorites-bar {
width: 100%;
display: block;
padding: 3% 0 3% 0;
margin: 2% auto 1% auto;
text-align: center;
}

#favorites-page #favorite-chip #favorite-button {
background-color: var(--PwKGray8);
border-radius: 75px;
text-align: left;
font-family: "PwK-text-bold";
font-size: 15px;
color: var(--PwKGray2);
padding: 2% 5%;
margin: 0 1% 0 0;
transition: background-color .3s, color .3s;
}

#favorites-page #favorite-chip:hover #favorite-button {
background-color: #6665dd;
color: #ffffff;
transition: background-color .3s, color .3s;
}

#favorites-page #favorite-chip #favorite-button:hover {
background-color: #000000;
color: #ffffff;
transition: background-color .3s, color .3s;
}

#favorites-page #favorite-chip #favorite-tag {
border-radius: 75px;
text-align: left;
font-family: "PwK-text-bold";
font-size: 15px;
padding: 2% 5%;
margin: 0;
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip #favorite-tag .material-symbols-rounded {
display: inline-block;
margin: -2px 3px 0 0;
padding: 0;
font-size: 20px;
color: inherit;
text-align: center;
vertical-align: middle;
font-variation-settings:
'FILL' 1,
'wght' 500,
'GRAD' -25,
'opsz' 40
}

#favorites-page #favorite-chip #favorite-thumbnail .thumbnail {
width: 100%;
height: auto;
margin: 0 0 -1.2% 0;
padding: 0;
border-radius: 10px;
}

#favorites-page #favorite-chip:hover #favorite-thumbnail .thumbnail {
cursor: pointer;
}

#favorites-page #favorite-chip #favorite-title {
color: var(--PwKGray6);
width: 90%;
height: 73px;
margin: 3% auto 3% auto;
font-family: "PwK-Bold";
font-size: 30px;
line-height: 35px;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
transition: color .5s;
}

#favorites-page #favorite-chip:hover #favorite-title {
color: #000000;
transition: color .5s;
}

#favorites-page #favorite-chip .gold {
background-color: var(--PwKWhiteBlueShadow);
color: var(--PwKGray3);
border: 1px solid var(--PwKWhiteBlueShadow);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip:hover .gold {
background-color: var(--PwKWhite2);
color: var(--PwKGray3);
border: 1px solid var(--PwKGray3);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip .gold:hover {
background-color: var(--PwKWhite2);
color: var(--PwKGoldHover);
border: 1px solid var(--PwKGoldHover);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip .pwkgreen {
background-color: var(--PwKWhiteBlueShadow);
color: var(--PwKGray3);
border: 1px solid var(--PwKWhiteBlueShadow);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip:hover .pwkgreen {
background-color: var(--PwKWhite2);
color: var(--PwKGray3);
border: 1px solid var(--PwKGray3);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip .pwkgreen:hover {
background-color: var(--PwKWhite2);
color: var(--PwKGreen);
border: 1px solid var(--PwKGreen);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip .pwkred {
background-color: var(--PwKWhiteBlueShadow);
color: var(--PwKGray3);
border: 1px solid var(--PwKWhiteBlueShadow);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip:hover .pwkred {
background-color: var(--PwKWhite2);
color: var(--PwKGray3);
border: 1px solid var(--PwKGray3);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip .pwkred:hover {
background-color: var(--PwKWhite2);
color: var(--PwKRed);
border: 1px solid var(--PwKRed);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip .pwknavy {
background-color: var(--PwKWhiteBlueShadow);
color: var(--PwKGray3);
border: 1px solid var(--PwKWhiteBlueShadow);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip:hover .pwknavy {
background-color: var(--PwKWhite2);
color: var(--PwKGray3);
border: 1px solid var(--PwKGray3);
transition: background-color .3s, color .3s, border .3s;
}

#favorites-page #favorite-chip .pwknavy:hover {
background-color: var(--PwKWhite2);
color: var(--PwKNavy);
border: 1px solid var(--PwKNavy);
transition: background-color .3s, color .3s, border .3s;
}

#page-title {
font-family: "PwK-Black";
color: var(--PwKBlack);
margin: 2% auto 0 auto;
font-size: 40px;
line-height: 45px;
text-align: center;
}

#search-banner {
background-color: var(--PwKGray1);
width: 100%;
margin: 0;
padding: 4% 0;
}

#search-banner #search-container {
width: 60%;
margin: 0 auto;
text-align: center;
}

#search-banner #search-container #SearchInput {
background-color: var(--PwKWhite);
width: 60%;
padding: 1.5% 2%;
margin: 0 1% 0 0;
color: var(--PwKBlack);
font-family: "PwK-Regular";
font-size: 20px;
line-height: 25px;
text-align: left;
border-radius: 50px;
display: inline-block;
border-collapse: collapse;
border: 0;
}

#search-banner #search-container #SearchSubmit {
background-color: var(--PwKBlue);
width: fit-content;
padding: 1.5% 4%;
color: var(--White);
font-family: "PwK-Regular";
font-size: 20px;
line-height: 25px;
text-align: center;
border-radius: 50px;
display: inline-block;
border-collapse: collapse;
border: 0;
}

#about-container {
width: 60%;
margin: 0 auto 0 auto;
padding: 2% 0 4% 0;
text-align: center;
}

#about-container h1 {
text-align: center;
font-family: "PwK-text-bold";
font-size: 30px;
line-height: 35px;
color: #000000;
margin: 0 0 3% 0;
}

#about-container #about-contents {
width: 90%;
padding: 4% 5% 6% 5%;
margin: 1% 0 2% 0;
background-color: #ffffff;
border-radius: 20px;
text-align: left;
}

#about-container #about-contents h2 {
text-align: left;
font-family: "PwK-Med";
font-size: 20px;
line-height: 20px;
color: #000000;
margin: 2% 0 0 4%;
}

#about-container #about-contents #column {
display: inline-block;
width: 45%;
margin: 0 4% 0 0;
vertical-align: top;
}

#about-container #about-contents #column #category-dividers {
background-color: var(--PwKGray7);
width: 100%;
height: 2px;
border-radius: 10px;
margin: 4% auto 6% auto;
}

#about-container #about-contents #column p {
width: 96%;
margin: 0 2% 0 2%;
font-family: "PwK-text";
font-size: 17px;
line-height: 24px;
color: var(--Black);
text-decoration: none;
}

#about-container #about-contents #column #featured-photo {
width: 40%;
height: auto;
max-width: 500px;
margin: 0 auto 3% auto;
}