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

@media (max-width: 700px) {

@keyframes expand {
0%   {width: 0;}
100% {width:  100%;}
}

#site-header {
display: none;
}

#mobilemenu {
background-color: var(--White);
display: block;
width: 100%;
text-align: center;
margin: 0 0 3% 0;
}

#mobilemenu #logo {
width: 30%;
height: auto;
border: 0;
margin: -5% 0 5% 0;
}

#mobilemenu #mobile-icon-menu {
width: 9%;
height: auto;
border: 0;
margin: 3% 0 0 3%;
color: var(--PwKBlack);
text-decoration: none;
transition: color .3s;
}

#mobilemenu #mobile-icon-menu:hover {
color: var(--PwKBlue);
text-decoration: none;
transition: color .3s;
}

#mobilemenu #mobile-icon-menu .material-symbols-rounded {
display: block;
margin: -2px 2% 0 0;
padding: 0;
font-size: 50px;
color: inherit;
text-align: right;
vertical-align: middle;
font-variation-settings:
'FILL' 1,
'wght' 500,
'GRAD' -25,
'opsz' 40
}

#mobilelinkzone {
display: none;
background-color: var(--PwKBlack);
width: 100%;
min-height: 175vw;
position: fixed;
top: 0;
left: 0;
padding: 0 0 15% 0;
animation-name: expand;
animation-duration: .25s;
overflow: hidden;
z-index: 100;
}

#mobilelinkzone #mobile-icon-menu-close {
width: 9%;
height: auto;
border: 0;
margin: 3% 0 0 3%;
color: var(--White);
text-decoration: none;
transition: color .3s;
}

#mobilelinkzone #mobile-icon-menu-close:hover {
color: var(--PwKOrange);
text-decoration: none;
transition: color .3s;
}

#mobilelinkzone #mobile-icon-menu-close .material-symbols-rounded {
display: block;
margin: -2px 2% 0 0;
padding: 0;
font-size: 50px;
color: inherit;
text-align: right;
vertical-align: middle;
font-variation-settings:
'FILL' 1,
'wght' 500,
'GRAD' -25,
'opsz' 40
}

#mobilelinkzone #mobilelink {
color: var(--White);
font-family: "PwK-Bold";
text-align: left;
font-size: 35px;
line-height: 75px;
margin: 4% 0 2% 12%;
text-decoration: none;
display: block;
}

#mobilelinkzone #mobilelink:hover {
color: var(--PwKOrange);
}

#mobilelinkzone #yl-link {
background-color: var(--White);
display: block;
margin: 10% auto 0 auto;
padding: 2% 0 2% 0;
text-align: center;
width: 80%;
border-radius: 20px;
vertical-align: middle;
}

#mobilelinkzone #yl-link #yl-text {
color: var(--PwKGreen);
font-family: "PwK-Bold";
font-size: 30px;
margin: 0 0 0 4%;
display: inline-block;
vertical-align: middle;
transition: color .3s;
}

#mobilelinkzone #yl-link:hover #yl-text {
color: var(--PwKBlue);
transition: color .3s;
}

#mobilelinkzone #yl-link #img-link {
background-color: var(--White);
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}

#mobilelinkzone #yl-link #img-link #header-link-img {
background-color: var(--PwKGreen);
height: auto;
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
transition: background-color .3s;
text-align: left;
display: inline-block;
width: 10%;
}

#mobilelinkzone #yl-link:hover #img-link #header-link-img {
background-color: var(--PwKBlue);
transition: background-color .3s;
}

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

#homepage-stories #button-zone {
width: 100%;
margin: 0;
padding: 5% 0 7% 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: 2% 6%;
transition: background-color .3s;
}

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

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

#home-favorites #button-zone {
width: 100%;
margin: 4% 0 0 0;
padding: 4% 0 4% 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: 3% 6%;
transition: background-color .3s;
}

#footer-area {
background-color: var(--PwKBlack);
width: 100%;
margin: 0;
padding: 15% 0 20% 0;
text-align: center;
}

#footer-area #footer-logo {
width: 40%;
height: auto;
margin: 0 auto 9% auto;
padding: 0;
text-align: center;
display: block;
}

#footer-area #yl-link {
width: 10%;
margin: 0 auto 0 auto;
display: block;
}

#footer-area #footer-links #footer-link {
font-family: "PwK-Regular";
font-size: 17px;
margin: 6% 1% 6% 1%;
display: block;
color: var(--PwKBlue);
text-decoration: none;
transition: color .3s;
}

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

#video-body {
background-color: #ffffff;
width: 75%;
margin: 6% auto 6% auto;
padding: 7% 6%;
border-radius: 20px;
text-align: center;
}

#video-body #video-title {
width: 80%;
font-family: "PwK-Black";
color: var(--PwKBlack);
margin: 0 auto 5% auto;
font-size: 35px;
line-height: 40px;
text-align: center;
}

#video-body #video-header {
background-color: var(--PwKGray7);
width: 100%;
height: 2px;
border-radius: 10px;
margin: 7% auto 7% auto;
}

#blog-text-zone {
width: 90%;
font-family: "PwK-Text";
color: var(--PwKBlack);
margin: 2% auto 2% auto;
font-size: 15px;
line-height: 20px;
text-align: left;
}

#blog-text-zone img {
width: 100%;
height: auto;
border-radius: 10px;
margin: 5% 0 5% 0;
}

#video-recommendation-zone {
width: 100%;
margin: 4% auto 10% auto;
padding: 0;
border-radius: 20px;
text-align: center;
}

#video-recommendation-zone #rec-video-chip {
background-color: var(--PwKWhiteBlue);
display: inline-block;
width: 70%;
padding: 0;
margin: 0 1% 4% 1%;
padding: 4% 2% 6% 2%;
border-radius: 15px;
text-align: left;
vertical-align: top;
transition: background-color .5s;
}

#video-zone {
width: 100%;
margin: 8% auto 2% auto;
padding: 0 0 2% 0;
text-align: center;
}

#video-zone #video-container {
width: 70%;
height: auto;
margin: 0 15% 0 15%;
}

#video-zone #video {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%;
border-radius: 10px;
max-width: 3840px;
max-height: 2160px;
}

#video-zone iframe {
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
width: 100%; 
height: 100%;
border: none;
}

#video-zone #video-yt-link {
background-color: var(--PwKBlue);
border-radius: 75px;
text-align: center;
font-family: "PwK-Bold";
font-size: 22px;
color: var(--White);
padding: 1% 4%;
margin: 2% auto 3% auto;
transition: background-color .3s;
text-decoration: none;
}

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

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

#favorites-page #favorite-chip #favorite-title {
color: #717171;
width: 90%;
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;
}

#favorite-body {
background-color: #ffffff;
width: 80%;
margin: 2% auto 6% auto;
padding: 2% 2% 5% 2%;
border-radius: 20px;
text-align: center;
}

#favorite-body #favorite-title {
width: 90%;
font-family: "PwK-Black";
color: var(--PwKBlack);
margin: 4% auto 2% auto;
font-size: 35px;
line-height: 40px;
text-align: center;
}

#favorite-body #favorite-divider {
background-color: var(--PwKGray7);
width: 95%;
height: 2px;
border-radius: 10px;
margin: 9% auto 7% auto;
}

#favorite-page-thumnbail {
width: 60%;
margin: 6% auto 0 auto;
text-align: center;
}

#affiliate-notice {
background-color: var(--PwKGray8);
width: 80%;
margin: 5% auto 0% auto;
padding: 2% 2%;
border-radius: 20px;
text-align: center;
font-family: "PwK-Regular";
font-size: 15px;
color: var(--PwKDarkGray);
}

#general-page-body {
background-color: #ffffff;
width: 90%;
margin: 6% auto 10% auto;
padding: 4% 2% 5% 2%;
border-radius: 20px;
text-align: center;
}

#general-page-body #general-content-zone {
width: 90%;
font-family: "PwK-Text";
margin: 2% auto 2% auto;
text-align: left;
font-size: 19px;
line-height: 30px;
}

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

#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: block;
width: 90%;
padding: 0 0 5% 0;
vertical-align: top;
}

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

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

#pagination-section {
width: 100%;
margin: 3% auto 5% auto;
padding: 0;
text-align: center;
}

#pagination-section #nav-links {
color: var(--PwKBlack);
font-family: "PwK-Med";
text-align: center;
font-size: 30px;
line-height: 25px;
}

#pagination-section .nav-links .page-numbers {
color: var(--PwKBlack);
font-family: "PwK-Med";
text-align: center;
font-size: 30px;
line-height: 25px;
margin: 0 2% 0 0;
padding: 2%;
display: inline-block;
text-decoration: none;
}

#pagination-section .nav-links .page-numbers:hover {
background-color: var(--PwKBlue);
color: var(--White);
text-decoration: none;
cursor: pointer;
border-radius: 5px;
}

#pagination-section .nav-links .current {
background-color: var(--PwKGreen);
color: var(--White);
border-radius: 5px;
font-family: "PwK-Bold";
text-decoration: none;
}

#pagination-section .nav-links .current:hover {
text-decoration: none;
}

#shorts-page {
width: 100%;
margin: 2% auto 4% auto;
padding: 0;
text-align: center;
}

#shorts-page #shorts-container {
background-color: var(--White);
width: 95%;
margin: 0 2% 2% 2%;
padding: 1.5% 1% 2.5% 1%;
border-radius: 20px;
display: inline-block;
}#short-page-container {
width: 50%;
margin: 2% auto 4% auto;
padding: 0;
vertical-align: top;
}

#short-page-container {
width: 95%;
}

#short-page-container #short-video-space {
width: 34%;
margin: 0;
padding: 1% 0 0 0;
display: inline-block;
vertical-align: top;
text-align: center;
}

#short-page-container #short-video-space .short-thumbnail {
width: 85%;
height: auto;
border-radius: 10px;
margin: 0 auto;
}

#short-page-container #short-text-space {
width: 64%;
margin: 0;
display: inline-block;
vertical-align: top;
}

#short-page-container #short-text-space #info-container {
background-color: var(--White);
width: 95%;
margin: 0 auto;
padding: 6% 1% 7% 1%;
border-radius: 20px;
}

#link-button-container {
width: 100%;
text-align: center;
padding: 3% 0;
}

#link-button-container #link-button {
background-color: #ffffff;
color: var(--PwKBlue);
text-decoration: none;
border: 0px;
text-align: center;
font-family: "PwK-text";
font-size: 20px;
padding: 1% 6% 1.5% 6%;
margin: 0 1%;
transition: color .3s, background-color .3s;
}

#link-button-container #link-button:hover {
background-color: #ffffff;
color: var(--PwKOrangeLight);
transition: color .3s, background-color .3s;
}

#link-button-container #link-button .material-symbols-rounded {
display: inline-block;
margin: -2px 9px 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
}

#link-button-container #link-button a {
text-decoration: none;
color: inherit;
}

#section-disclaimers {
width: 100%;
padding: 0;
margin: 7% auto 3% auto;
vertical-align: top;
text-align: center;
}

#section-disclaimers h1 {
width: 100%;
font-family: "PwK-Black";
color: var(--PwKBlack);
margin: 0 0 3% 0;
padding: 0;
font-size: 20px;
line-height: 20px;
text-align: center;
}

#section-disclaimers #disclaimer-box {
display: inline-block;
width: 90%;
margin: 0 auto 4% auto;
vertical-align: top;
text-align: left;
}

#about-container {
width: 100%;
margin: 0 auto 0 auto;
padding: 2% 0 15% 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: 80%;
padding: 4% 5% 6% 5%;
margin: 1% auto 2% auto;
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: block;
width: 90%;
margin: 0 auto 10% auto;
vertical-align: top;
}

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


}