:not(input):not(textarea),img{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@keyframes ai-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes backgroundPosition{0%{background-position:-140px 0}100%{background-position:140px 0}}.ai-wrap{padding:20px;background-color:#202020;color:#fff;max-width:100%;box-sizing:border-box;margin-bottom:20px}.ai-wrap::after,.ai-wrap::before{box-sizing:border-box}.ai-wrap *{box-sizing:border-box}.ai-wrap *::after,.ai-wrap *::before{box-sizing:border-box}.ai-wrap img{max-width:100%;height:auto;border:0;box-shadow:none;margin:0;padding:0}.ai-wrap p{margin:0;padding:0;font-weight:normal;line-height:normal}.ai-wrap span{margin:0;padding:0;font-weight:normal;line-height:normal}.ai-wrap a{font-weight:normal;box-shadow:none;border:0;text-decoration:none;text-transform:none}.ai-wrap svg{display:inline-block}.ai-wrap .ai-btn,.ai-wrap .ai-audio-control{display:inline-block;font-weight:normal;margin:0;padding:0;line-height:normal;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;box-shadow:none;vertical-align:middle;cursor:pointer;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:0;min-width:0;max-width:100%;min-height:0;width:auto;height:auto;background-image:none;background-color:rgba(0,0,0,0)}.ai-wrap .ai-btn::before,.ai-wrap .ai-btn::after,.ai-wrap .ai-audio-control::before,.ai-wrap .ai-audio-control::after{display:none}.ai-wrap .ai-control-wrap{display:flex;min-height:130px}.ai-wrap .ai-control-wrap-thumb{width:130px;height:100%;flex:none;overflow:hidden;margin-right:20px;position:relative;line-height:0}.ai-wrap .ai-control-wrap-thumb::after{position:absolute;top:0;bottom:0;left:0;right:0;transition:opacity 1.5s ease;content:"";width:300%;height:100%;background:linear-gradient(to right, #3e3e3e 8%, #4d4d4d 18%, #3e3e3e 33%);background-size:500px;position:absolute;top:0;left:0;opacity:1;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:backgroundPosition;animation-timing-function:linear;opacity:0}.ai-wrap .ai-control-wrap-thumb img{margin:0;border:0;box-shadow:none}.ai-wrap .ai-control-wrap-controls{position:relative;width:100%}.ai-wrap .ai-audio-controls-main{display:flex;align-items:center;width:100%;margin-bottom:16px}.ai-wrap .ai-audio-control{width:50px;height:50px;border-radius:50%;display:block;flex:none;vertical-align:middle;color:#fff;background-color:#f70f5d;opacity:1;transition:opacity 1.5s ease;padding:0;position:relative}.ai-wrap .ai-audio-control:hover,.ai-wrap .ai-audio-control:focus{border:0;background-color:#f70f5d}.ai-wrap .ai-audio-control:focus,.ai-wrap .ai-audio-control:active{outline:0}.ai-wrap .ai-audio-control.ai-audio-playing svg{left:0}.ai-wrap .ai-audio-control svg{fill:#fff;height:16px;position:relative;left:2px;top:1px}.ai-wrap .ai-track-info{display:flex;flex-direction:column;justify-content:center;padding-left:20px;flex:auto;width:0}.ai-wrap .ai-track-title{margin:0 0 4px;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}.ai-wrap .ai-track-title span{opacity:1;transition:opacity 1.5s ease}.ai-wrap .ai-track-subtitle{margin:0;line-height:normal;opacity:.7;font-size:.8125em}.ai-wrap .ai-track-subtitle span{opacity:1;transition:opacity 1.5s ease}.ai-wrap .ai-audio-controls-progress{display:flex;align-items:center;margin-bottom:15px}.ai-wrap .ai-track-progress-bar{display:block;flex:1;position:relative;height:5px;cursor:pointer;background-color:#3e3e3e}.ai-wrap .ai-track .ai-track-progress-bar{position:absolute;top:auto;bottom:0;left:0;width:100%;height:3px;background-color:rgba(0,0,0,0)}.ai-wrap .ai-track .ai-track-progress-bar:hover{background-color:rgba(255,255,255,.3)}.ai-wrap .ai-track-progress{position:absolute;top:0;left:0;height:100%;pointer-events:none;background-color:#f70f5d;transition:width .28s ease}.ai-wrap .ai-track .ai-track-progress{background-color:#fff;opacity:.5}.ai-wrap .ai-track-time{flex:none;font-size:13px;opacity:.7;width:65px;text-align:right;cursor:pointer}.ai-wrap .ai-audio-volume-control{display:flex;align-items:center}.ai-wrap .ai-audio-volume-bars{float:left;margin-right:3px;height:34px}.ai-wrap .ai-audio-volume-bars::after{content:"";display:table;clear:both}.ai-wrap .ai-volume-bar{float:left;position:relative;width:4px;height:100%;background-color:#3e3e3e;cursor:pointer;border-right:1px solid #202020}.ai-wrap .ai-volume-bar::before{content:"";position:absolute;bottom:0;left:0;right:0;transition:background-color .18s ease}.ai-wrap .ai-volume-bar.ai-volume-bar-active::before{background-color:#f70f5d}.ai-wrap .ai-volume-bar:nth-child(1)::before{height:0%}.ai-wrap .ai-volume-bar:nth-child(2)::before{height:10%}.ai-wrap .ai-volume-bar:nth-child(3)::before{height:20%}.ai-wrap .ai-volume-bar:nth-child(4)::before{height:30%}.ai-wrap .ai-volume-bar:nth-child(5)::before{height:40%}.ai-wrap .ai-volume-bar:nth-child(6)::before{height:50%}.ai-wrap .ai-volume-bar:nth-child(7)::before{height:60%}.ai-wrap .ai-volume-bar:nth-child(8)::before{height:70%}.ai-wrap .ai-volume-bar:nth-child(9)::before{height:80%}.ai-wrap .ai-volume-bar:nth-child(10)::before{height:90%}.ai-wrap .ai-volume-bar:nth-child(11)::before{height:100%}.ai-wrap .ai-audio-volume-control-btns{display:flex;flex-direction:column;height:100%}.ai-wrap .ai-audio-volume-control-btns .ai-btn{height:50%;font-size:10px}.ai-wrap .ai-audio-volume-control-btns .ai-btn:first-child{margin-bottom:1px}.ai-wrap .ai-audio-volume-control-btns .ai-btn:last-child{margin-top:1px}.ai-wrap .ai-audio-volume-control-btns .ai-btn svg{height:6px}.ai-wrap .ai-audio-controls-meta{display:flex;width:100%;opacity:1;transition:opacity .36s ease}.ai-wrap .ai-audio-controls-meta::after{content:"";display:table;clear:both}.ai-wrap .ai-audio-controls-meta .ai-btn{margin-right:4px}.ai-wrap .ai-btn{width:32px;height:34px;font-size:14px;padding:0;background-image:none;background-color:#3e3e3e;color:#fff;transition:color .18s ease;box-shadow:none;text-decoration:none;font-style:normal;text-transform:none}.ai-wrap .ai-btn svg{position:relative;fill:#fff;height:10px;transition:fill .18s ease}.ai-wrap .ai-btn:hover{background-color:#3e3e3e;border:0}.ai-wrap .ai-btn.ai-btn-active{color:#fff;background-color:#f70f5d}.ai-wrap .ai-btn.ai-btn-active svg{fill:#fff}.ai-wrap .ai-btn-repeat svg{height:17px;top:2px}.ai-wrap .ai-btn-shuffle svg{height:14px;top:2px;left:-1px}.ai-wrap .ai-tracklist-toggle{margin-left:auto;margin-right:0}.ai-wrap .ai-tracklist-toggle svg{height:16px;top:2px}.ai-wrap .ai-btn-skip-position,.ai-wrap .ai-btn-playback-rate{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:11px;font-weight:bold;letter-spacing:-0.05em}.ai-wrap .ai-tracklist-wrap{opacity:1;transition:opacity 1.5s ease}.ai-wrap .ai-tracklist-open{margin-top:20px}.ai-wrap .ai-tracklist-open+.ai-footer{margin-top:-1px;border-top:0}.ai-wrap .ai-tracklist{margin:0;padding:0;list-style:none}.ai-wrap .ai-track{display:flex;position:relative;margin:0 0 1px;padding:0;list-style:none;height:40px;cursor:pointer;background-color:#3e3e3e;transition:background-color .18s ease}.ai-wrap .ai-track:hover,.ai-wrap .ai-track.ai-track-active{background-color:#f70f5d;color:#fff}.ai-wrap .ai-track:hover .ai-track-btn,.ai-wrap .ai-track.ai-track-active .ai-track-btn{color:#fff}.ai-wrap .ai-track:hover .ai-track-btn svg,.ai-wrap .ai-track.ai-track-active .ai-track-btn svg{fill:#fff}.ai-wrap .ai-track-control{display:flex;height:100%;align-items:center;flex:1;overflow:hidden;border-left:1px solid #202020}.ai-wrap .ai-track-control:first-child{border-left:0}.ai-wrap .ai-track-thumb{display:inline-block;width:40px;max-height:100%;margin:0;overflow:hidden}.ai-wrap .ai-track-thumb img{width:40px;max-height:100%;box-shadow:none;border:0;margin:0}.ai-wrap .ai-track-no-thumb{display:block;width:130px;height:130px;line-height:150px;text-align:center;background-color:#3e3e3e}.ai-wrap .ai-track-no-thumb svg{fill:#fff;height:40px;opacity:.6}.ai-wrap .ai-track-no-thumb.ai-track-thumb{width:40px;height:40px;line-height:50px}.ai-wrap .ai-track-no-thumb.ai-track-thumb svg{height:16px}.ai-wrap .ai-track-name{display:inline-block;padding:0 10px;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:normal}.ai-wrap .ai-track-control-buttons{margin-left:auto;display:flex;align-items:center}.ai-wrap .ai-track-btn{display:inline-block;width:40px;height:40px;text-align:center;font-size:13px;line-height:40px;box-shadow:none;border:0;border-left:1px solid #202020;color:#fff;background:none;cursor:pointer;margin:0;padding:0}.ai-wrap .ai-track-btn svg{position:relative;fill:#fff;height:15px;transition:fill .18s ease;top:3px}.ai-wrap .ai-track-btn-repeat:hover span{opacity:1 !important}.ai-wrap .ai-track-inline-play-btn{position:relative}.ai-wrap .ai-track-inline-play-btn:first-child{border-left:0}.ai-wrap .ai-track-inline-play-btn.ai-is-loading svg{opacity:0}.ai-wrap .ai-player-buttons{display:flex;align-items:center;flex-wrap:wrap;line-height:normal;grid-gap:10px;margin-top:20px}.ai-wrap .ai-player-button{display:flex;align-items:center;justify-content:center;grid-gap:6px;font-size:13px;color:currentColor;width:auto;padding-left:15px;padding-right:15px}.ai-wrap .ai-player-button-icon-only{padding:0;width:32px}.ai-wrap .ai-player-button-icon{width:18px;height:18px;display:block}.ai-wrap .ai-player-button-icon svg{width:100%;height:100%;fill:currentColor}.ai-wrap .ai-player-button-icon svg rect,.ai-wrap .ai-player-button-icon svg path{fill:currentColor}.ai-wrap .ai-footer{border-top:1px solid #3e3e3e;margin-top:20px;padding-top:20px;text-align:center;font-size:11px}.ai-wrap .ai-footer a{color:#f70f5d;text-decoration:none;box-shadow:none;border:0;opacity:1}.ai-wrap .ai-footer a:hover{color:#f70f5d;border:0;opacity:1}.ai-wrap .ai-footer p{opacity:.7;margin:0;font-size:12px}.ai-wrap.ai-is-loading .ai-track-title{position:relative}.ai-wrap.ai-is-loading .ai-track-title span{opacity:0}.ai-wrap.ai-is-loading .ai-track-title::after{content:"";width:140px;height:8px;background:linear-gradient(to right, #3e3e3e 8%, #4d4d4d 18%, #3e3e3e 33%);background-size:500px;position:absolute;top:-10px;left:0;opacity:1;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:backgroundPosition;animation-timing-function:linear}.ai-wrap.ai-is-loading .ai-track-subtitle{position:relative}.ai-wrap.ai-is-loading .ai-track-subtitle span{opacity:0}.ai-wrap.ai-is-loading .ai-track-subtitle::after{content:"";width:100px;height:6px;background:linear-gradient(to right, #3e3e3e 8%, #4d4d4d 18%, #3e3e3e 33%);background-size:500px;position:absolute;top:2px;left:0;opacity:1;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:backgroundPosition;animation-timing-function:linear}.ai-wrap.ai-is-loading .ai-audio-controls-meta{opacity:0}.ai-wrap.ai-is-loading .ai-audio-control{opacity:.5}.ai-wrap.ai-is-loading .ai-control-wrap-thumb::after{opacity:1}.ai-wrap.ai-is-loading .ai-tracklist-wrap{opacity:1}.ai-wrap .ai-tracklist-enter{opacity:0}.ai-wrap .ai-tracklist-enter.ai-tracklist-enter-active{opacity:1;transition:opacity .5s ease-in}.ai-wrap .ai-scroll-wrap .ai-tracklist{margin-right:15px}.ai-wrap .ai-scroll-wrap>div:last-child{top:0 !important;bottom:0 !important;background-color:rgba(62,62,62,.5)}.ai-wrap .ai-scroll-wrap>div:last-child div{background-color:#f70f5d !important}.ai-wrap.ai-type-global-footer{width:100%;position:fixed;bottom:0;left:0;right:0;padding:0;margin:0;z-index:999}.ai-wrap.ai-type-global-footer .ai-control-wrap{min-height:70px}.ai-wrap.ai-type-global-footer .ai-control-wrap-thumb{width:80px;height:80px;margin:0;line-height:115px}.ai-wrap.ai-type-global-footer .ai-control-wrap-controls{display:flex;flex-direction:column}.ai-wrap.ai-type-global-footer .ai-audio-controls-main{padding:0 25px;margin:0;flex:auto}.ai-wrap.ai-type-global-footer .ai-audio-controls-meta{width:auto;margin-left:20px;flex:none}.ai-wrap.ai-type-global-footer .ai-audio-controls-meta-right{margin-left:auto}.ai-wrap.ai-type-global-footer .ai-track-progress-bar{flex:initial}.ai-wrap.ai-type-global-footer .ai-tracklist-toggle{margin-left:15px}.ai-wrap.ai-type-global-footer .ai-audio-controls-progress{margin-bottom:0}.ai-wrap.ai-type-global-footer .ai-tracklist-wrap{position:absolute;bottom:100%;width:100%;padding:20px;background-color:inherit;margin:0}.ai-control-spinner{border-radius:50%;position:absolute;top:-5px;left:-5px;width:calc(100% + 10px);height:calc(100% + 10px);font-size:10px;text-indent:-9999em;border-top:5px solid rgba(255,255,255,.2);border-right:5px solid rgba(255,255,255,.2);border-bottom:5px solid rgba(255,255,255,.2);border-left:5px solid currentColor;transform:translateZ(0);animation:ai-spin 1.1s infinite linear;z-index:1;opacity:0;transition:opacity .18s ease;transition-delay:.2s}.ai-audio-loading .ai-control-spinner{opacity:.8}.ai-control-spinner::after{border-radius:50%;position:absolute;width:100%;height:100%}.ai-track-spinner{border-radius:50%;position:absolute;top:50%;left:50%;margin-left:-10px !important;margin-top:-10px !important;width:20px;height:20px;font-size:10px;text-indent:-9999em;border-top:3px solid rgba(255,255,255,.2);border-right:3px solid rgba(255,255,255,.2);border-bottom:3px solid rgba(255,255,255,.2);border-left:3px solid currentColor;transform:translateZ(0);animation:ai-spin 1.1s infinite linear;z-index:1;opacity:0}.ai-track-loading .ai-track-spinner{opacity:.8}.ai-track-spinner::after{border-radius:50%;position:absolute;width:100%;height:100%}.ReactModal__Body--open{overflow:hidden}.ai-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background-color:rgba(0,0,0,.3)}.ai-modal{position:absolute;top:40px;width:460px;max-width:calc(100% - 30px);left:50%;transform:translateX(-50%);background-color:#fff;color:#000;border-radius:4px;border:1px solid rgba(62,62,62,.4);outline:0;max-height:calc(100vh - 50px);overflow-y:auto;box-sizing:border-box}.ai-modal-header{display:flex;padding:5px;margin-bottom:10px}.ai-modal-dismiss{display:inline-block;font-weight:normal;margin:0;padding:0;line-height:normal;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;box-shadow:none;vertical-align:middle;cursor:pointer;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:0;min-width:0;max-width:100%;min-height:0;width:auto;height:auto;background-image:none;background-color:rgba(0,0,0,0);font-size:30px;margin-left:auto;padding-left:5px;padding-right:5px;line-height:1;color:#000}.ai-modal-dismiss::before,.ai-modal-dismiss::after{display:none}.ai-modal-dismiss:hover,.ai-modal-dismiss:active,.ai-modal-dismiss:focus{background:none;box-shadow:none;border:0;color:#000}.ai-modal-content{padding:0 20px 20px;white-space:pre-wrap}.ai-with-typography{font-family:sans-serif;font-weight:normal;line-height:normal;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ai-with-typography .ai-track-subtitle{font-size:13px}.ai-with-typography .ai-track-title{font-size:16px}.ai-modal-with-typography{font-family:sans-serif;font-weight:normal;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45;letter-spacing:0}.ai-narrow .ai-control-wrap{height:auto;flex-wrap:wrap}.ai-narrow .ai-control-wrap-thumb{width:100%;margin:0 0 20px}.ai-narrow .ai-audio-controls-meta{position:relative}.ai-narrow .ai-track-thumb{display:none}@media(max-width: 767px){.ai-wrap.ai-type-global-footer .ai-track-time,.ai-wrap.ai-type-global-footer .ai-thumb,.ai-wrap.ai-type-global-footer .ai-btn-repeat,.ai-wrap.ai-type-global-footer .ai-audio-volume-control,.ai-wrap.ai-type-global-footer .ai-btn-skip-position{display:none}.ai-wrap.ai-type-global-footer .ai-track-title{font-size:15px}.ai-wrap.ai-type-global-footer .ai-audio-controls-main{padding-left:10px;padding-right:10px}.ai-wrap.ai-type-global-footer .ai-track-info{padding-left:10px}.ai-wrap.ai-type-global-footer .ai-audio-controls-meta{margin-left:10px}.ai-wrap .ai-audio-volume-control .ai-btn{display:none}}@media(max-width: 480px){.ai-wrap .ai-control-wrap{height:auto;flex-wrap:wrap}.ai-wrap .ai-control-wrap-thumb{width:100%;margin:0 0 20px}.ai-wrap .ai-audio-controls-meta{position:relative}.ai-wrap .ai-audio-volume-control{display:none}.ai-wrap .ai-scroll-wrap .ai-tracklist{margin-right:0}}@media(max-width: 320px){.ai-wrap .ai-track-thumb{display:none}}
/*!
Theme Name: TSL Member Area
Author: TSL
Author URI: http://underscores.me/
Description: TSL Member Area
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tsl_members
*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	        text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 var(--space-md) var(--space-xl);
	padding: 0
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
:root {

    /*-------------------------------
    Typography
    -------------------------------*/
    --font-primary: 'Lato', sans-serif;
    --font-secondary: Georgia, serif;
    --font-tertiary: 'Bona Nova SC', serif;
    --font-quaternary: 'Great Vibes', cursive;
    --font-event: "castoro", sans-serif;

    /*-------------------------------
    Text Sizes
    -------------------------------*/
    --text-base: 1em;
    --text-scale-ratio: 1.225;
    --text-body: calc(1em + .0625em);
    --text-xxs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)));
    --text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
    --text-sm: calc(1em / var(--text-scale-ratio));
    --text-md: calc(1em * var(--text-scale-ratio));
    --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));

    /*-------------------------------
    Line Height
    -------------------------------*/
    --heading-line-height: 1.35;
    --body-line-height: 1.65;

    /*-------------------------------
    Spacing
    -------------------------------*/
    --space-xxxxs: 0.125em;
    --space-xxxs: 0.25em;
    --space-xxs: 0.375em;
    --space-xs: 0.5em;
    --space-sm: 0.75em;
    --space-md: 1.25em;
    --space-lg: 2em;
    --space-xl: 3.25em;
    --space-xxl: 5.25em;
    --space-xxxl: 8.5em;
    --space-xxxxl: 10.5em;

    --grid-space: var(--space-lg);

    /*-------------------------------
    Colors
    -------------------------------*/

    /* accent */
    --color-accent: #fed871;
    --color-accent-light: #fee08d;
    --color-accent-lighter: hsl(44, 97%, 90%);
    --color-accent-lightest: hsl(45, 97%, 98%);
    --color-accent-dark: #f5c856;

    /* primary color */
    --color-primary: hsl(208, 64%, 34%);
    --color-primary-light: hsl(208, 53%, 43%);
    --color-primary-lighter: hsl(215, 38%, 57%);
    --color-primary-lightest: hsl(210, 100%, 98%);
    --color-primary-dark: hsl(211, 100%, 28%);
    --color-primary-darker: hsl(210, 100%, 24%);
    --color-primary-darkest: hsl(210, 100%, 20%);

    /* grayscale */
    --black: #1d1d21;
    /* 88.46% */
    --gray-10: #2e2e31;
    /* 81.83% */
    --gray-8: #666666;
    --gray-6: #7b7a7d;
    /* 51.91% */
    --gray-4: #a5a5a6;
    /* 35.25% */
    --gray-3: #bbbbbc;
    /* 26.62% */
    --gray-2: #d1d0d2;
    /* 18.23% */
    --gray-1: hsl(0, 0%, 96%);
    /* 5%  */

    --color-text: var(--color-primary-darkest);
    --color-text-subtle: hsla(240, 3%, 12%, .75);
    --color-heading: var(--color-primary-darker);


    /* event colors */
    --event-color-accent: hsl(320, 60%, 47%);
    --event-color-accent-light: hsl(320, 65%, 60%);
    --event-color-accent-lighter: hsl(320, 65%, 80%);
    --event-color-accent-lightest: hsl(320, 65%, 96%);
    --event-color-accent-dark: hsl(320, 55%, 45%);

    --event-bg-color: hsl(30, 100%, 96%);

    /*-------------------------------
    Gradients
    -------------------------------*/
    --gradient-bg: linear-gradient(45deg, var(--color-primary), var(--color-primary-dark));
    --gradient-bg-light: linear-gradient(45deg, var(--color-primary-light), var(--color-primary));
    --gradient-bg-dark: linear-gradient(45deg, var(--color-primary-dark), var(--color-primary-darker));
    --gradient-cta: linear-gradient(to right, var(--color-accent), var(--color-accent-light));
    --gradient-golden: linear-gradient(-45deg,
            #fff, var(--color-gold-light), var(--color-gold-dark), var(--color-gold-light), #fff, var(--color-gold-light), var(--color-gold-dark), var(--color-gold-dark), var(--color-gold-light), #fff);

    /* change & delete */
    --color-primary-gd: var(--color-primary-light), var(--color-primary);

    /*-------------------------------
    KOF Lessons Colors
    -------------------------------*/
    --kof-color-accent: #9933cc;
    --kof-color-accent-light: #ad5cd6;
    --kof-color-accent-dark: #732699;
    --kof-color-primary: #331472;
    --kof-color-primary-light: #5c438e;
    --kof-color-primary-lighter: #aea1c7;
    --kof-color-primary-lightest: hsl(260, 100%, 96%);
    /*#d6d0e3*/
    --kof-color-primary-dark: #270f56;
    --kof-color-primary-darker: #1a0a39;
    --kof-color-primary-darkest: #1a0a39;

    /*-------------------------------
    Seven Rays Hues & gradients
    -------------------------------*/
    --color-blue: hsl(201, 65%, 50%);
    --color-yellow: hsl(37, 100%, 70%);
    --color-pink: hsl(334, 100%, 82%);
    --color-white: hsl(203, 100%, 80%);
    --color-green: hsl(175, 65%, 40%);
    --color-purple: hsl(271, 33%, 55%);
    --color-violet: hsl(306, 38%, 50%);
    --color-violet-light: hsl(306, 40%, 70%);
    --color-salmon: hsl(15, 88%, 87%);
    --color-gold-light: hsl(45, 100%, 70%);
    --color-gold-dark: hsl(41, 61%, 37%);

    /* gradient hues */
    --gd-blue: var(--color-primary-light) 40%, var(--color-primary);
    --gd-yellow: hsl(37, 100%, 90%), hsl(37, 100%, 70%)
        /*hsl(40, 60%, 54%)*/
    ;
    --gd-pink: #ffa1ca, #ff89bd;
    --gd-white: #99d8ff, #72aaff;
    --gd-green: #00b486, #005b48;
    --gd-purple: hsl(271, 48%, 50%), hsl(280, 79%, 26%);
    --gd-violet: var(--kof-color-accent-dark), var(--kof-color-primary);
    --gd-salmon: #fbd0c2, #f6baad, #ebb5a3;

    /*-------------------------------
    Box Styles
    -------------------------------*/
    --box-shadow: -10px -10px 20px #fafbff, 10px 10px 20px rgb(166 171 189 / 20%);
    --box-shadow-hover: -10px -10px 20px #fafbff, 10px 10px 20px rgb(166 171 189 / 40%);
    --box-shadow-white: 10px 10px 20px rgb(166 171 189 / 30%);
    --box-shadow-white-hover: 10px 10px 20px rgb(166 171 189 / 50%);

    --box-border-rad: var(--space-lg);
    --box-hover-move: var(--space-xxxxs);
    --box-hover-scale: 1.0125;

    /*-------------------------------
    Sidenav & Top Nav
    -------------------------------*/
    --sidenav-width: 18%;
    --sidenav-width-collapsed: 80px;
    --sidenav-height: 60px;

    --nav-height: 60px;
    --rspv-nav-width: 250px;
    --toggle-rotate: 48deg;

    /*-------------------------------
    Others
    -------------------------------*/
    --transparent: rgba(255, 255, 255, .001);
    --color-mask-dark: hsl(210, 80%, 7%);
    --text-shadow:
        2px 2px 4px rgba(0, 0, 0, .125),
        1px 1px 2px rgba(0, 0, 0, .25);
    --transition: all .25s ease 0s;

}
/*----------------------------------------
Main Styles
----------------------------------------*/
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/*--------------------------------------------------
Grid System
--------------------------------------------------*/
.flex,
.row {
  display: flex;
  flex-wrap: wrap;
}

.row {
  margin: 0 calc(-1 * var(--grid-space)) 0 calc(-1 * var(--grid-space));
}

ul.row {
  list-style: none;
  padding: 0;
}

.row .row {
  margin: 0;
}

/*------------------------------ 
Individual Columns 
------------------------------*/
.col {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: min(100%, 100%);
  padding: var(--grid-space);
}

/*------------------------------
Component Columns 
------------------------------*/
.cols_2 > .col {
  width: calc(100% / 2);
}

.cols_3 > .col {
  width: calc(100% / 3);
}

.cols_4 > .col {
  width: calc(100% / 4);
}

.cols_5 > .col {
  width: calc(100% / 5);
}

.cols_6 > .col {
  width: calc(100% / 6);
}

.cols_7 > .col {
  width: calc(100% / 7);
}

/*------------------------------
Golden Ratio & Musical Scales
------------------------------*/
.cols_m7 > .col_major {
  width: 53.33%;
}

.cols_m7 > .col_minor {
  width: 46.67%;
}

.cols_gr > .col_major {
  width: 61.8%;
}

.cols_gr > .col_minor {
  width: 38.2%;
}

.cols_p5 > .col_major {
  width: 66.67%;
}

.cols_p5 > .col_minor {
  width: 33.33%;
}

.cols_p4 > .col_major {
  width: 75%;
}

.cols_p4 > .col_minor {
  width: 25%;
}

.cols_m3 > .col_major {
  width: 80%;
}

.cols_m3 > .col_minor {
  width: 20%;
}

.cols_m2 > .col_major {
  width: 88.89%;
}

.cols_m2 > .col_minor {
  width: 11.11%;
}

/*----------------------------------------
General Styles
----------------------------------------*/
#main {
  background-color: var(--color-primary-lightest);
  position: relative;
  width: 100%;
  max-width: 100%;
}

#content_wp {
  position: relative;
  left: var(--sidenav-width);
  width: calc(100% - var(--sidenav-width));
  min-height: 100vh;
  transition: var(--transition);
  z-index: 1;
}

#content_cnt {
  width: 100%;
  padding: 2.5% 5% 5%;
  margin: 0 auto;
}

.wrapper {
  width: min(100%, 100%);
  margin: 0;
  padding: var(--space-xxxl) 0;
  overflow: hidden;
  position: relative;
}

.wrp_short {
  padding-block: var(--space-xxl);
}

.wrp_container {
  width: min(90%, 1280px);
  margin: 0 auto;
  height: auto;
}

.wrp_bg_color_light {
  background-color: var(--color-primary-lightest);
}

.section_container,
.section_cnt {
  margin: 0 auto var(--space-xxl);
  width: 100%;
}

.wrp_container .section_container:last-of-type {
  margin-bottom: 0;
}

/*--------------------------------------------------
Boxes
--------------------------------------------------*/
.box {
  border-radius: var(--box-border-rad);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  padding: var(--space-lg);
  overflow: hidden;
}

.box p:last-of-type {
  margin-bottom: 0;
}

.box_transform:hover {
  transform: translateY(calc(-1 * var(--box-hover-move))) scale(var(--box-hover-scale));
  box-shadow: var(--box-shadow-hover);
  transition: var(--transition);
}

.box_transform:active {
  transform: translateY(var(--box-hover-move)) scale(1);
  box-shadow: var(--box-shadow);
}

/*--------------------------------------------------
Images
--------------------------------------------------*/
.bg_img,
.svg_img {
  background-position: center;
  background-repeat: no-repeat;
}

.bg_img {
  background-size: cover;
}

.svg_img {
  background-size: 100%;
}

/* review */
.img_gr {
  aspect-ratio: 1.618/1;
}

.img_sq {
  aspect-ratio: 1/1;
}

/*--------------------------------------------------
Lists
--------------------------------------------------*/
.no_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Bullet List
------------------------------*/
ul.list {
  list-style: none;
  position: relative;
  margin: var(--space-sm) 0;
  padding: 0 0 0 var(--space-lg);
}

ul.list li::before {
  content: "\2022";
  color: var(--event-color-accent);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

ul.list li {
  margin-bottom: var(--space-xxxs);
}

/* Icons (svg) List
------------------------------*/
ul.icon_list li::before {
  display: none;
}

ul.icon_list li {
  position: relative;
  padding-left: 1em;
}

ul.icon_list li svg {
  position: absolute;
  top: 0.3em;
  left: -1em;
}

.mask_gd::before,
.mask::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: var(--gradient-bg-dark);
  opacity: 0.65;
}

.abs_center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.scroll_auto {
  overflow: auto;
}

.overflow_visible {
  overflow: visible;
}

/*--------------------------------------------------
Golden Ring
--------------------------------------------------*/
.gold_ring_cnt {
  position: relative;
}

.gold_ring::before {
  content: "";
  display: block;
  border-radius: 100%;
  width: 110%;
  height: 110%;
  background-image: var(--gradient-golden);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  box-shadow: var(--box-shadow);
}

.gold_ring img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

/*--------------------------------------------------
# Typography
--------------------------------------------------*/
body {
  font-family: var(--font-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 var(--space-xxxs);
  line-height: var(--heading-line-height);
  color: var(--color-heading);
  font-weight: 600;
}

h1 {
  font-size: var(--text-xxl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4 {
  font-size: var(--text-md);
}

h5 {
  font-size: var(--text-body);
}

p {
  font-size: var(--text-body);
  line-height: var(--body-line-height);
  margin: 0 0 var(--space-md);
}

.section_title {
  margin-bottom: var(--space-sm);
}

.subsection_title::after,
#audio_streams header::after,
.underline::after {
  content: "";
  display: block;
  margin: var(--space-xs) auto var(--space-md);
  height: 1px;
  width: 100%;
  background-color: var(--color-primary-lighter);
  opacity: 0.25;
}

.text_white {
  color: #fff;
}

.text_uppercase {
  text-transform: uppercase;
}

.text_italic {
  font-style: italic;
}

.text_center {
  text-align: center;
}

.text_balance {
  text-wrap: balance;
}

.font_bolder {
  font-weight: 900;
}

.font_bold {
  font-weight: 600;
}

.font_secondary {
  font-family: var(--font-secondary);
}

.font_tertiary {
  font-family: var(--font-tertiary);
}

.footnote {
  font-size: var(--text-sm);
  opacity: 0.75;
}

/* Text overflow
------------------------------*/
.text_overflow {
  width: min(100%, 95%);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Underlined
------------------------------*/
.underlined::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0.25;
  margin: 0 auto;
}

/*----------------------------------------
Buttons
----------------------------------------*/
.btn {
  display: block;
  width: min(100%, 250px);
  margin: var(--space-lg) 0;
  line-height: 3;
  height: 3em;
  border-radius: 50px;
  border: 1px solid #fff;
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
  overflow: hidden;
}

.btn_primary {
  background-image: var(--gradient-cta);
  color: var(--color-heading);
}

.btn_secondary {
  background-image: var(--gradient-bg-light);
  color: #fff;
}

.btn_kof_primary {
  background-image: linear-gradient(45deg, var(--kof-color-accent-light), var(--kof-color-accent), var(--kof-color-accent-dark));
  color: #fff;
  border-color: var(--kof-color-accent-light);
  filter: drop-shadow(0 4px 8px hsla(280, 60%, 17%, 0.25));
}

/*------------------------------
Button Ghost
------------------------------*/
.btn_ghost,
.btn_kof_ghost {
  background-color: var(--transparent);
  border-width: 1px;
  border-style: solid;
}

.btn_ghost {
  border-color: var(--color-primary-darker);
  color: var(--color-primary-darker);
}

.btn_ghost_white {
  background-color: var(--gray-1);
  color: var(--gray-10);
  border: 1px solid var(--gray-6);
}

.btn_kof_ghost {
  border-color: var(--kof-color-primary);
  color: var(--kof-color-primary);
}

/*------------------------------
Button Sizes
------------------------------*/
.btn:is(.btn_md, .btn_sm) {
  font-size: 0.9em;
}

.btn_medium,
.btn_md {
  height: 3em;
  line-height: 3;
  max-width: var(--space-xxxxl);
}

.btn_small,
.btn_sm {
  height: 2.5em;
  line-height: 2.5;
  max-width: var(--space-xxxl);
}

.btn_smaller {
  height: 2em;
  line-height: 2;
  max-width: var(--space-xxl);
}

.btn_disabled,
.btn_disabled button {
  background-image: none !important;
  background-color: var(--gray-1) !important;
  color: var(--gray-6) !important;
  border-color: var(--gray-1) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/*----------------------------------------
Content Buttons
----------------------------------------*/
.content_btns {
  --grid-space: 1em;
}

.content_btns {
  width: min(100%, 30em);
  margin-bottom: var(--space-lg);
}

.content_btns .btn {
  margin: 0;
  width: 100%;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn_content {
  margin: var(--space-md) 0;
  width: auto;
  display: table;
  padding-inline: 1em;
  /* font-weight: 400; */
}

.btn_center {
  margin: var(--space-md) auto;
}

.button {
  padding: 0;
}

.no_button {
  background-color: var(--transparent);
  border: none;
  padding: 0;
}

.btn svg {
  opacity: 0.5;
  margin-right: var(--space-xxs);
}

/*------------------------------
Button: Hover
------------------------------*/
.btn:hover {
  transform: translateY(calc(-1 * var(--box-hover-move))) scale(var(--box-hover-scale));
}

.btn_kof_primary:hover {
  filter: drop-shadow(0 4px 8px hsla(280, 60%, 17%, 0.45));
}

.btn_ghost:hover,
.btn_kof_ghost:hover {
  color: #fff;
}

.btn_ghost:hover {
  background-color: var(--color-primary-dark);
}

.btn_kof_ghost:hover {
  background-color: var(--kof-color-primary);
}

.btn_white:hover,
.btn_ghost_white:hover,
.btn_color_bg:hover {
  box-shadow: var(--box-shadow-white-hover);
}

/*------------------------------
Button: Active
------------------------------*/
.btn:active {
  transform: translateY(calc(var(--box-hover-move))) scale(1);
}

.btn_ghost:active {
  background-color: var(--color-primary-dark);
}

.btn_kof_ghost:active {
  background-color: var(--kof-color-primary);
}

.button:is(:hover, :active) {
  border-color: #fff;
}

/*------------------------------
Other Button States
------------------------------*/
.btn_primary:is(hover, :active, :visited, :focus) {
  color: var(--color-heading);
}

:is(.btn_secondary, .btn_kof_primary):is(:hover, :active, :visited, :focus) {
  color: #fff;
}

.btn_ghost_white:is(:hover, :active, :focus, :visited) {
  color: var(--gray-10);
}

/*----------------------------------------------------------
Dropdown Buttons
----------------------------------------------------------*/
.dropdown_btn {
  width: min(100%, 15em);
  position: relative;
}

.dropdown_btn .toggle {
  display: block;
  width: 100%;
  height: 3.5em;
  line-height: 3.5;
  padding: 0;
  font-size: 1em;
  font-weight: 600;
  border-radius: var(--space-xs);
  border: 1px solid var(--color-accent);
  z-index: 2;
  box-shadow: var(--box-shadow);
  position: relative;
  cursor: pointer;
}

/* dropdown arrow icon 
----------------------------------------*/
.nav_dropdown .toggle::before,
.nav_dropdown .toggle::after,
.dropdown_btn .toggle::before,
.dropdown_btn .toggle::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 10px;
  top: 50%;
  transition: var(--transition);
}

.nav_dropdown .toggle::before,
.nav_dropdown .toggle::after {
  background-color: var(--gray-10);
  opacity: 0.5;
  width: 0.12em;
  height: 0.55em;
}

.dropdown_btn .toggle::before,
.dropdown_btn .toggle::after {
  background-color: #fff;
  width: 0.2em;
  height: 0.85em;
}

.nav_dropdown .toggle::before,
.dropdown_btn .toggle::before {
  transform: rotate(45deg) translateY(-50%);
}

.nav_dropdown .toggle::after,
.dropdown_btn .toggle::after {
  transform: rotate(-45deg) translateY(-50%);
}

.nav_dropdown .toggle::before {
  right: 1.1em;
}

.nav_dropdown .toggle::after {
  right: 1em;
}

.dropdown_btn .toggle::before {
  right: 1.625em;
}

.dropdown_btn .toggle::after {
  right: 1.5em;
}

/* dropdown arrow icon when open
----------------------------------------*/
.nav_dropdown:has(.open) .toggle::before {
  right: 1.5em;
}

.nav_dropdown:has(.open) .toggle::after {
  right: 0.84em;
}

.dropdown_btn:has(.open) .toggle::before {
  right: 2.1em;
}

.dropdown_btn:has(.open) .toggle::after {
  right: 1em;
}

/*----------------------------------------
dropdown menu
----------------------------------------*/
.dropdown_btn .menu {
  padding-top: 0.5em;
  position: absolute;
  transition: var(--transition);
  top: 0;
  left: 0;
  opacity: 0;
  visibility: 0;
  transform: scaleY(0);
  transform-origin: top;
  background-color: #fff;
  width: 100%;
  border-radius: 0 0 var(--space-xs) var(--space-xs);
  border: 1px solid var(--color-primary-lightest);
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

.dropdown_btn:has(.open) .menu {
  top: 3em;
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);

  z-index: 1;
}

.dropdown_btn .menu li {
  cursor: pointer;
  width: 100%;
}

.dropdown_btn .menu li :is(a, button) {
  display: block;
  padding: 0.65em var(--space-md);
  color: var(--color-text);
  text-decoration: none;
  width: min(100%, 90%);
  margin: 0 auto;
  border-radius: var(--space-xs);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;

  border: none;
  background-color: var(--transparent);
}

.dropdown_btn .menu li :is(a, button):hover {
  background-color: var(--color-primary-lightest);
}

/*----------------------------------------
Dropdown Button sizes
----------------------------------------*/
.dropdown_btn.dropdown_btn_md {
  width: min(100%, var(--space-xxxxl));
}

.dropdown_btn.dropdown_btn_md .toggle {
  height: 3em;
  line-height: 3;
  font-size: 0.95em;
}

.dropdown_btn.dropdown_btn_md li a {
  font-size: 0.9em;
}

.dropdown_btn.dropdown_btn_md:has(.open) .menu {
  top: 2.65em;
}

/*----------------------------------------
dropdown button colors
----------------------------------------*/
.dropdown_btn_primary .toggle {
  color: var(--color-text);
  background-image: var(--gradient-cta);
}

.dropdown_btn_primary .toggle::before,
.dropdown_btn_primary .toggle::after {
  background-color: var(--gray-10);
}

/*----------------------------------------
Components: Cards
----------------------------------------*/
.cards {
  margin: 0 auto;
  width: 100%;
  justify-content: flex-start;
}

.card {
  position: relative;
  transition: var(--transition);
  padding: 0;
  margin-bottom: var(--space-xl);
}

.card a {
  text-decoration: none;
  color: var(--color-text);
}

.card_img {
  padding-bottom: 60%;
}

.card_content {
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

.card_title {
  font-size: var(--text-md);
}

.card_description {
  margin: 0 auto;
  font-size: var(--text-base);
  color: var(--color-text-subtle);
}

/*-------------------------
Card Featured
-------------------------*/
.card_featured {
  justify-content: space-between;
  width: 100%;
}

.card_featured .card_img {
  aspect-ratio: 1.618/1;
  padding-bottom: 0;
  width: 40%;
}

.card_featured .card_content {
  width: 60%;
  padding: var(--space-xl);
}

.card_featured .card_title {
  font-size: var(--text-xl);
}

.card_featured .btn {
  margin-bottom: 0;
}

/*-------------------------
Card Boxes
-------------------------*/
.card_boxes .card {
  padding-bottom: 28%;
  position: relative;
}

.card_boxes a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.card_boxes .card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  background-image: linear-gradient(to top, var(--color-primary-darker), var(--transparent));
  left: 0;
  bottom: -1em;
  z-index: 0;
  opacity: 0.9;
}

.card_boxes .card_title {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  color: #fff;
  text-shadow: var(--text-shadow);
  z-index: 1;
}

/*-------------------------
Card buttons
-------------------------*/
.card_btns .card {
  border-radius: 100px;
}

.card_btns .card a {
  align-items: center;
}

.card_btns .card_btn_img {
  width: var(--space-xxl);
  height: auto;
  border-radius: 100%;
  border: 5px solid var(--color-primary-lightest);
}

.card_btns .card_title {
  width: 60%;
  padding: 0 0 0 5%;
  margin: 0;
}

/*-------------------------
Card albums
-------------------------*/
.card_albums .card {
  padding: var(--space-md);
  align-items: flex-start;
}

.card_albums .album_img {
  border-radius: var(--box-border-rad);
  box-shadow: var(--box-shadow);
  width: 100%;
  max-width: var(--space-xxxxl);
}

.post-type-archive-book .card_albums .album_img {
  box-shadow: none;
}

.card_albums .card_content {
  width: calc(100% - var(--space-xxxxl));
  padding: var(--space-sm) 0 0 var(--space-lg);
}

.card_albums .card:hover,
.card_albums .card:active {
  box-shadow: none;
}

/*--------------------
card features 
--------------------*/
.cards_subs .card_features {
  border-top: 2px solid var(--color-primary-lightest);
  padding-top: var(--space-md);
}

.cards_subs .card_features ul,
.cards_subs .card_features ol {
  padding: 0;
  margin: 0 0 0 var(--space-md);
  list-style: circle;
}

.cards_subs .card_features li {
  font-size: var(--text-base);
  margin: 0 auto var(--space-md);
  line-height: var(--body-line-height);
}

.cards_subs .card_features a {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/*------------------------------
Card Columns
------------------------------*/
.cards_col_2 .card {
  width: calc(100% / 2.065);
  margin-right: 3%;
}

.cards_col_2 .card:nth-child(2n) {
  margin-right: 0;
}

.cards_col_3 .card {
  width: calc(100% / 3.195);
  margin-right: 3%;
}

.cards_col_3 .card:nth-child(3n) {
  margin-right: 0;
}

/*------------------------------
Card States
------------------------------*/
.card:hover {
  transform: translateY(calc(-1 * var(--box-hover-move))) scale(var(--box-hover-scale));
  box-shadow: var(--box-shadow-hover);
}

.card:active {
  transform: translateY(var(--box-hover-move)) scale(1);
  box-shadow: var(--box-shadow);
}

/*----------------------------------------
Broadcast Single
----------------------------------------*/
.boxcast-boxoffice {
  box-shadow: var(--box-shadow);
}

.notice_cnt {
  margin: var(--space-xl) auto;
}

/*----------------------------------------
Audio Stream
----------------------------------------*/
.audio_stream_player {
  width: 100%;
  padding: 0;
  border-radius: 100px;
  box-shadow: none;
}

/*------------------------------------------------------------
Accordion Panels
------------------------------------------------------------*/
.accordion_cnt {
  width: 100%;
}

.panel_container {
  margin: 0 auto var(--space-xl);
  position: relative;
  border-radius: var(--box-border-rad);
  overflow: hidden;
  background-color: #fff;
  transition: var(--transition);
  box-shadow: var(--box-shadow);
}

.panel_container:hover {
  transform: translateY(calc(-1 * var(--box-hover-move)));
  box-shadow: var(--box-shadow-hover);
}

.panel_container:active {
  transform: translateY(calc(var(--box-hover-move)));
  box-shadow: var(--box-shadow);
}

.accordion .panel_container.active {
  box-shadow: var(--box-shadow-hover);
}

.accordion .panel_container.active:hover {
  transform: none;
}

.panel_header {
  position: relative;
}

.panel_title {
  width: 100%;
  font-size: var(--text-md);
  padding: 1em 2.5% 1em 7%;
  position: relative;
  cursor: pointer;
}

.panel_subtitle {
  color: var(--color-primary);
  font-weight: 400;
}

.panel_header img {
  position: absolute;
  display: block;
  height: auto;
  width: 5%;
  max-width: 2.25em;
  z-index: 0;
  border-radius: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #fff;
  left: 2%;
  box-shadow: var(--box-shadow);
}

.panel_btn {
  height: 100%;
  line-height: 2.5;
  width: 100%;
  position: absolute;
  right: 0;
  max-width: 100%;
  top: 0;
  background-color: var(--transparent);
  border: none;
  cursor: pointer;
}

.panel_btn:active,
.panel_btn:focus {
  border: none;
  border-color: var(--transparent);
  outline: none;
}

.panel_header svg {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary-light);
  font-size: 2em;
}

.panel_content {
  width: 100%;
  transition: all 0.25s ease-in-out;
  padding: 2.5%;
}

.accordion .panel_content {
  margin: -5px auto 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 2.5%;
  height: 0;
}

.panel_content_header {
  justify-content: space-between;
  width: 100%;
  margin: 0 auto var(--space-sm);
  padding: var(--space-xxs);
  border-bottom: 3px solid var(--color-primary-lightest);
}

.panel_content_header_hd {
  font-size: var(--text-body);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0;
}

.panel_list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.panel_list li {
  padding: var(--space-xs);
}

.panel_list li svg {
  color: var(--color-primary);
  margin-right: var(--space-xs);
  opacity: 0.35;
}

/* Panel style when active */
.accordion .panel_container.active .panel_content {
  padding: 2.5%;
  opacity: 1;
  height: auto;
  position: relative;

  /*
    max-height: 350px;
    overflow: scroll;
    */
}

.panel_container.active .panel_header {
  border-radius: var(--box-border-rad) var(--box-border-rad) 0 0;
}

.panel_container.active .underline::after {
  display: block;
  opacity: 0.25;
}

.panel_container.no_transform .panel_title {
  cursor: default;
}

/*----------------------------------------------------------
Replays
----------------------------------------------------------*/
.replay_panel li,
.panel_list_item {
  align-items: center;
  justify-content: space-between;
  margin: 0;
  transition: var(--transition);
  height: auto;
  width: 100%;
}

.replay_panel li::after,
.panel_list_item::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--color-primary-lighter);
  margin: var(--space-sm) auto;
  opacity: 0.125;
}

.replay_panel li:last-of-type::after,
.panel_list_item:last-of-type::after {
  display: none;
}

.replay_title {
  margin: 0;
  font-size: var(--text-body);
}

.replay_subtitle {
  font-size: var(--text-base);
  font-weight: 400;
  margin: 0;
  color: var(--color-text-subtle);
}

.replay_author {
  font-size: var(--text-base);
  opacity: 0.75;
}

.replay_panel .btn,
.replay_panel .audio_stream_player {
  max-width: var(--space-xxxxl);
}

.replay_panel .btn,
.panel_list_btns .btn:not(.close_btn) {
  margin: 0;
  height: 2.5em;
  line-height: 2.5;
}

.replay_heading {
  width: 50%;
}

.replay {
  width: 45%;
  justify-content: flex-end;
}

/*------------------------------
Simple Layout Panel
------------------------------*/
#simple_replay_panel .replay_panel li {
  justify-content: space-between;
}

#simple_replay_panel .panel_list img {
  display: block;
  height: auto;
  width: var(--space-xl);
  max-width: 8%;
  border-radius: var(--space-xs);
  margin-right: 1.5%;
  box-shadow: var(--box-shadow);
}

#simple_replay_panel .replay_header {
  width: 60%;
  max-width: 60%;
  /*overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis*/
}

#simple_replay_panel .replay_level {
  width: 15%;
}

#simple_replay_panel .audio_stream_player {
  width: 30%;
  max-width: 100%;
}

/*------------------------------
Sunday Service Panel
------------------------------*/
#sunday_service_panel .panel_content_header_hd:nth-child(1) {
  width: 40%;
}

#sunday_service_panel .panel_content_header_hd:nth-child(2) {
  width: 25%;
}

#sunday_service_panel .panel_content_header_hd:nth-child(3) {
  width: 22%;
  text-align: center;
}

#sunday_service_panel .replay_panel li {
  align-items: flex-start;
  justify-content: space-between;
}

.sunday_service_header {
  width: 100%;
  max-width: 40%;
}

.author_heading {
  width: 25%;
}

.sunday_service_btns {
  width: 22%;
}

.sunday_service_header .replay_title,
.sunday_service_header .replay_subtitle,
.sunday_service_header .dictation_date,
.author_heading .service_author,
.author_heading .service_date {
  margin-bottom: var(--space-xs);
}

.sunday_service_header .dictation_date,
.sunday_service_header .pow_details,
.author_heading .service_sermon,
.author_heading .service_date {
  font-size: var(--text-base);
}

.sunday_service_btns .audio_stream_player,
.sunday_service_btns .btn {
  max-width: 100%;
}

.sunday_service_btns .audio_stream_player {
  margin-bottom: var(--space-md);
}

/*------------------------------
Inserts Panel
------------------------------*/
.insert_panel {
  justify-content: space-between;
}

.insert_panel li {
  width: 50%;
  max-width: 48%;
  margin: 0 0 var(--space-xxs);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 2.5em;
  position: relative;
}

.insert_panel li > a {
  text-decoration: none;
}

.insert_panel li svg {
  position: absolute;
  left: var(--space-xs);
  top: 0.75em;
}

/*----------------------------------------------------------
Playlist Panel
----------------------------------------------------------*/
#playlist_replay_panel {
  background-color: var(--transparent);
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

#playlist_replay_panel .panel_content {
  background-color: #fff;
  box-shadow: var(--box-shadow);
  border-radius: var(--box-border-rad);
  padding: var(--space-xl);
}

#playlist_replay_panel .panel_header {
  padding: var(--space-md) 0;
}

#playlist_replay_panel .panel_title,
#playlist_replay_panel .panel_subtitle {
  padding: 0 0 0 100px;
  width: 100%;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#playlist_replay_panel .panel_title {
  font-size: var(--text-lg);
}

#playlist_replay_panel .panel_subtitle {
  font-size: var(--text-body);
  color: var(--color-text-subtle);
}

#playlist_replay_panel .panel_header img {
  width: 100%;
  max-width: var(--space-xl);
  height: var(--space-xl);
}

/*----------------------------------------------------------
Album Panel
----------------------------------------------------------*/
#album_panel .panel_header {
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  align-items: flex-start;
  justify-content: space-between;
}

#album_panel .album_img {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  max-width: var(--space-xxxxl);
  border-radius: var(--box-border-rad);
  transform: none;
  border: none;
  box-shadow: var(--box-shadow);
  z-index: 0;
  float: left;
  margin: 0 var(--space-lg) var(--space-xxs) 0;
}

#album_panel .book_img {
  box-shadow: none;
  max-width: 12em;
  top: -1em;
}

#album_panel .album_title,
#album_panel .album_subtitle {
  clear: none;
}

#album_panel .album_subtitle {
  font-weight: 400;
  font-size: var(--text-md);
  margin-bottom: var(--space-md);
  color: var(--color-text-subtle);
}

#album_panel .album_description p {
  font-size: var(--text-base);
  margin-bottom: var(--space-sm);
}

#album_panel .panel_list {
  list-style: decimal;
}

#album_panel .panel_content_header_hd:nth-child(1) {
  width: 80%;
}

#album_panel .panel_content_header_hd:nth-child(2) {
  width: 20%;
  text-align: center;
}

#album_panel .replay_panel li .replay_title_author {
  width: 60%;
}

#album_panel .replay_title_author p:empty {
  display: none;
}

#album_panel .replay_panel li .replay_author {
  margin: 0;
}

#album_panel .replay_panel li .btn {
  max-width: 20%;
}

/*------------------------------
Options Panel
------------------------------*/
#options_panel .replay_panel li {
  justify-content: space-between;
}

#options_panel .options_header {
  width: 50%;
}

#options_panel .options_btns {
  width: 40%;
}

#options_panel .replay_panel .btn,
#options_panel .replay_panel .audio_stream_player {
  max-width: var(--space-xxxl);
  margin: 0 1% var(--space-md) 0;
}

/*------------------------------
Select Box
------------------------------*/
#content_cnt #main_panels_cnt:nth-child(n + 3) #select_box {
  display: none;
}

#main_panels_cnt {
  justify-content: flex-end;
}

#select_box {
  display: block;
  margin: 0 0 var(--space-lg);
  width: 100%;
  max-width: var(--space-xxxxl);
  position: relative;
}

#levels_select {
  background-color: #fff;
  padding: var(--space-xs);
  border-radius: var(--space-xs);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 100%;
}

#select_box svg {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.25;
  pointer-events: none;
}

/*------------------------------
Select Box conditions
------------------------------*/
.panel_container.slow .panel_list li:is(.medium, .high),
.panel_container.medium .panel_list li:is(.slow, .high),
.panel_container.high .panel_list li:is(.medium, .slow) {
  height: 0;
  opacity: 0;
  padding: 0;
}

/*----------------------------------------------------------
Now Playing & Mains Streams
----------------------------------------------------------*/
#now_playing {
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
}

.now_playing_header {
  width: 60%;
}

.now_playing_hd {
  font-size: var(--text-body);
  margin: 0 0 0 var(--space-md);
  flex-wrap: nowrap;
  position: relative;
}

.now_playing_hd span:first-child::before,
.now_playing_hd span:first-child::after {
  content: "";
  display: block;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.now_playing_hd span:first-child::before {
  background-color: var(--color-violet);
  width: var(--space-sm);
  height: var(--space-sm);
  left: -1.25em;
}

.now_playing_hd span:first-child::after {
  background-color: var(--transparent);
  border: 1px solid var(--color-violet-light);
  width: var(--space-md);
  height: var(--space-md);
  left: -1.5em;
}

/*----- title: now playing -----*/
.now_playing_hd span:first-child {
  width: 100%;
  max-width: 7.5em;
}

/*----- subtitle: what's being played -----*/
.now_playing_hd span:last-child {
  margin-left: var(--space-sm);
  font-weight: 400;
  width: 100%;
  max-width: 75%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/*----- now playing buttons  -----*/
.now_playing_btns {
  width: 35%;
  justify-content: space-between;
}

#now_playing .btn {
  margin: 0;
  width: 47.5%;
  max-width: 100%;
}

/*------------------------------
Main Streams
------------------------------*/
#main_streams_panel .now_playing_hd {
  width: 55%;
}

#main_streams_panel .audio_stream_player {
  width: 100%;
  max-width: 35%;
}

#main_streams_panel .now_playing_hd span:first-child {
  position: relative;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-xxxs);
  display: block;
  max-width: 100%;
}

#main_streams_panel .now_playing_hd span:last-child {
  margin: 0;
  color: var(--color-text-subtle);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

/*------------------------------------------------------------
Components – New Styles
------------------------------------------------------------*/

/*--------------------------------------------------
Components – Cards
--------------------------------------------------*/
._cards:has(.box) {
  margin-inline: 0;
}

._cards li {
  position: relative;
}

._cards.cols_3 {
  gap: var(--space-lg);
}

._cards.cols_3 .col {
  width: calc(100% / 3 - 1.34em);
}

/*----------------------------------------
Testimonial Cards
----------------------------------------*/
.ttl_cards {
  margin-top: var(--space-xxl);
}

._cards.ttl_cards {
  gap: var(--space-xl) var(--space-lg);
}

.ttl_cards li {
  overflow: visible;
  padding-top: var(--space-xl);
}

.ttl_cards .description,
.ttl_cards .modal .content {
  font-family: var(--font-secondary);
}

.ttl_cards .description {
  text-align: justify;
  hyphens: auto;
  line-height: 1.75;
}

.ttl_cards .name {
  text-align: right;
  font-weight: 600;
  font-size: var(--text-md);
}

.ttl_cards .image {
  aspect-ratio: 1/1;
  border-radius: 100%;
  position: absolute;
  top: -2.5em;
  width: var(--space-xxl);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: var(--box-shadow);
}

/* testimonial cards modal 
----------------------------------------*/
.ttl_cards .modal_open_btn {
  color: var(--color-blue);
  text-decoration: underline;
  cursor: pointer;
  background-color: var(--transparent);
  border: none;
}

.ttl_cards .modal .content {
  font-style: italic;
}

/*------------------------------------------------------------
Modals
------------------------------------------------------------*/
.modal {
  position: absolute;
}

.modal::before,
.modal .container {
  opacity: 0;
  top: 50%;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.modal::before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--color-mask-dark);
  z-index: 999;
}

.modal .container {
  height: 70vh;
  width: min(90%, 50em);
  max-height: 35em;
  box-shadow: var(--box-shadow-white);
  transition: all 0.35s ease 0s;
  z-index: 1000;
  padding: var(--space-xl) 0 var(--space-xl) var(--space-xl);
  overflow: visible;
}

/*------------------------------
Modal Content
------------------------------*/
.modal .content {
  overflow: auto;
  height: 100%;
  padding-right: var(--space-lg);
}

.modal .title {
  margin-bottom: var(--space-sm);
}

.modal ol,
.modal ul {
  margin: var(--space-md) 0 var(--space-md) 1.5em;
}

#playlist_replay_panel .modal .content li::after {
  display: none;
}

/*------------------------------
Modal close button
------------------------------*/
.modal .close_btn {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-md);
  height: var(--space-lg);
  width: var(--space-lg);
  border-radius: 100%;
  font-size: var(--text-md);
  transition: var(--transition);
  background-color: var(--transparent);
  cursor: pointer;
}

.panel_list .modal .close_btn svg {
  opacity: 0.5;
  color: var(--color-primary-darkest);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal .close_btn:hover {
  background-color: var(--color-primary-dark);
}

.modal .close_btn:hover svg {
  color: #fff;
  opacity: 1;
}

/*------------------------------
Modal open button
------------------------------*/
#playlist_replay_panel .modal_open_btn {
  max-width: var(--space-xxxl);
  position: absolute;
  top: var(--space-lg);
  right: 0;
}

.modal.open .container,
.modal.open::before {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal.open::before {
  opacity: 0.75;
}

/*----------------------------------------------------------
Books
----------------------------------------------------------*/
.book {
  align-items: flex-start;
}

.book img {
  width: 100%;
  max-width: 12.5em;
}

.book_content {
  width: calc(100% - 200px);
  padding: var(--space-lg) 0 0 var(--space-md);
}

.book_substitle {
  font-size: var(--text-base);
}

.book .btn,
.book .dropdown_btn {
  margin-bottom: 0;
  max-width: 12em;
}

.book .btn,
.book .dropdown_btn_toggle {
  height: 3em;
  line-height: 3;
}

.book .dropdown_btn_menu.open_dropdown_btn {
  top: 2.75em;
}

/*------------------------------
Books Columns
------------------------------*/
.books_col_2 .book {
  width: calc(100% / 2.065);
  margin-right: 3%;
}

.books_col_2 .book:nth-child(2n) {
  margin-right: 0;
}

/*----------------------------------------------------------
Archive Taxonomy – Video Category
----------------------------------------------------------*/
/* .tax-video-category {} */

/*----------------------------------------
Video Taxonomy Header
----------------------------------------*/
.video_tax_header {
  /* aspect-ratio: 5/2; */
  position: relative;
  padding: var(--space-xl);
  margin: 0 0 var(--space-xl) 0;
  border-radius: var(--box-border-rad);
  -ms-align-items: flex-start;
  align-items: flex-start;
}

.video_tax_header::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* background-color: var(--color-mask-dark); */
  background-color: hsl(240, 88%, 6%);
  opacity: 0.75;
  border-radius: var(--box-border-rad);
}

.video_tax_header :is(.image, .content) {
  position: relative;
  z-index: 1;
}

.video_tax_header .image {
  aspect-ratio: 7/10;
  padding: 0;
  border-radius: var(--space-sm);
  box-shadow: 4px 8px 16px var(--color-primary-darkest);
}

.video_tax_header .content:not(.modal .content) {
  width: min(75%, 35em);
}

.video_tax_header .title {
  font-weight: 900;
  margin-bottom: 0;
}

.video_tax_header .subtitle {
  font-weight: 400;
  /* font-size: var(--text-md); */
}

.video_tax_header .description {
  margin: var(--space-md) 0 0;
  font-size: 1em;
}

.video_tax_header button {
  margin-bottom: 0;
  max-width: 7.5em;
}

.video_tax_header button:hover {
  box-shadow: none;
}

/*----------------------------------------
Video Taxonomy List
----------------------------------------*/
.video_tax_list {
  --grid-space: 1em;
}

.video_tax_list li {
  border-radius: var(--space-sm);
}

.video_tax_list li a {
  text-decoration: none;
}

.video_tax_list li .image {
  aspect-ratio: 1.618/1;
  margin-bottom: var(--space-sm);
  border-radius: var(--space-xs);
  position: relative;
  overflow: hidden;
}

.video_tax_list li .title {
  margin-bottom: 0;
}

.video_tax_list li .eyebrow {
  font-weight: 600;
}

.video_tax_list li .description {
  margin-bottom: 0;
  color: var(--gray-8);
}

/* Video List item – Icon
------------------------------*/
.video_tax_list li .icon {
  width: 5em;
  height: 5em;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: var(--box-shadow-white);
  transition: var(--transition);
  opacity: 0;
  z-index: 1;
}

.video_tax_list li svg {
  color: var(--color-primary-darker);
  font-size: 2.25em;
  left: 52.5%;
}

/* Video List item – States
------------------------------*/
.video_tax_list li:hover {
  background-color: hsla(224, 30%, 92%, 0.9125);
}

.video_tax_list li a:hover .icon {
  opacity: 1;
}

/*----------------------------------------------------------
Single Video
----------------------------------------------------------*/
.video_cnt {
  background-color: var(--color-primary-darker);
}

.video_cnt .boxcast-size-lg .boxcast-with-playlist-to-right-col-2 {
  width: 30% !important;
}

/*------------------------------
Video Header
------------------------------*/
#video_header_cnt {
  margin: var(--space-xl) auto 0;
  align-items: flex-start;
  justify-content: space-between;
}

#video_header {
  width: 80%;
}

.video_title {
  font-size: var(--text-lg);
}

.video_subtitle {
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-text-subtle);
  line-height: var(--body-line-height);
}

/*------------------------------
Video Cat
------------------------------*/
.video_cat_cnt {
  width: 15%;
}

.video_cat_img {
  height: auto;
  width: 100%;
  display: block;
  border-radius: var(--box-border-rad);
  transition: var(--transition);
  box-shadow: var(--box-shadow);
}

.video_cat_name {
  width: 100%;
  display: block;
  margin: var(--space-sm) auto 0;
}

/*------------------------------
Video Meta
------------------------------*/
.video_meta {
  align-items: center;
  margin-top: var(--space-xl);
}

.video_author_img {
  border-radius: var(--space-sm);
  width: var(--space-xxl);
  height: var(--space-xxl);
  margin-right: var(--space-md);
  box-shadow: var(--box-shadow);
}

.video_author_name,
.video_date {
  margin-bottom: 0;
}

.video_date {
  color: var(--color-text-subtle);
}

.video_pow .btn {
  margin: 0 0 0 var(--space-xl);
  max-width: 18em;
}

/*------------------------------
Video Downloads
------------------------------*/
.video_downloads {
  margin: var(--space-lg) 0 0;
  --grid-space: var(--space-xs);
}

.video_downloads ul a {
  color: var(--gray-10);
  text-decoration: none;
}

.video_downloads ul a svg {
  margin-right: var(--space-xs);
  color: var(--color-primary-light);
}

.video_downloads ul a:hover {
  text-decoration: underline;
}

/*------------------------------
Video Description
------------------------------*/
.video_description {
  margin: var(--space-lg) 0 0;
}

/*----------------------------------------------
Page Styles
------------------------------------------------*/
.page_header_cnt {
  margin: 0 0 var(--space-xl);
}

.page_header_hd {
  width: 100%;
}

.page_title {
  margin-bottom: var(--space-xxxxs);
  font-weight: 900;
}

.page_subtitle,
.chapter_subtitle {
  font-weight: 400;
  color: var(--color-text-subtle);
  margin: 0;
}

.page_banner {
  border-radius: var(--box-border-rad);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  margin-bottom: var(--space-xl);
  aspect-ratio: 3/1;
}

.page_banner img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*----------------------------------------------------------
General Styles Higher Spec.
----------------------------------------------------------*/
.no_transform,
.no_transform:hover,
.no_transform:active {
  transform: none;
}

.no_link > a,
.no_link > a:active,
.no_link > a:visited,
.no_link > a:focus {
  color: var(--color-text);
  text-decoration: none;
}

/*----------------------------------------------------------
Login Page
----------------------------------------------------------*/
#login_wp {
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

#login_wp .container {
  width: 90%;
  max-width: 800px;
}

.login_form_container {
  position: relative;
  z-index: 2;
  width: 100%;
  box-shadow: var(--box-shadow-white);
  padding: 0;
  flex-wrap: nowrap;
}

.login_form_img {
  width: calc(100% - 61.8%);
  /*border-radius: 0px var(--space-lg) var(--space-lg) 0px;*/
}

#login_form_content {
  width: calc(100% - 38.19%);
  padding: var(--space-xl) 10%;
  box-shadow: var(--box-shadow-white);
}

#login_logo {
  position: absolute;
  top: calc(0% + 2.5%);
  left: calc(0% + 2.5%);
  display: block;
  width: var(--space-xxl);
  height: var(--space-xl);
  z-index: 1;
  background-image: url(/wp-content/uploads/2021/08/TSL-Logo-White-vector.svg);
}

/*------------------------------
Login header
------------------------------*/
.login_form_header_cnt {
  justify-content: space-between;
  align-items: center;
  margin: 0 auto var(--space-lg);
}

.login_form_logo {
  width: 18%;
  padding-bottom: 18%;
}

.login_form_header {
  width: 80%;
  margin: 0;
}

.login_form_hd {
  font-size: var(--text-lg);
  margin-bottom: 0;
}

.login_form_sub {
  color: var(--color-text-subtle);
  font-size: var(--text-base);
  text-transform: uppercase;
}

/*------------------------------
Login form
------------------------------*/
.login_form_container #loginform > p {
  margin: 0 auto var(--space-sm);
}

.login_form_container #loginform > p > label,
.login_form_container #loginform > p > input {
  width: 100%;
  display: block;
}

.login_form_container #loginform > p > input {
  filter: none;
}

.login_form_container #loginform .login-password,
.login_form_container #loginform .login-username {
  position: relative;
}

.login_form_container #loginform .login-password::before,
.login_form_container #loginform .login-username::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 20px;
  opacity: 0.125;
  background-position: center;
  background-repeat: no-repeat;
  top: 2.5em;
  left: 0.75em;
}

.login_form_container #loginform .login-password::before {
  background-image: url(/wp-content/uploads/2021/08/key-regular.svg);
}

.login_form_container #loginform .login-username::before {
  background-image: url(/wp-content/uploads/2021/08/user-regular.svg);
}

.login_form_container #loginform .login-username input,
.login_form_container #loginform .login-password input {
  /* background-color: var(--color-primary-lightest); */
  background-color: #fff;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 2.75em;
  border: 2px solid #d2dee8;
  border-radius: var(--space-sm);
}

#loginform .login-username label,
#loginform .login-password label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  margin-bottom: var(--space-xxxxs);
}

/*------------------------------
Login submit button
------------------------------*/
.login_form_container #loginform .login-submit {
  margin: var(--space-md) auto 0;
}

#loginform #wp-submit {
  background-image: var(--gradient-cta);
  border-radius: 100px;
  padding: 0;
  height: 3em;
  line-height: 3;
  border: none;
  box-shadow: var(--box-shadow);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

#loginform #wp-submit:hover {
  transform: translateY(calc(-1 * var(--box-hover-move))) scale(var(--box-hover-scale));
  box-shadow: var(--box-shadow-hover);
}

#loginform #wp-submit:active {
  transform: translateY(calc(var(--box-hover-move))) scale(1);
  box-shadow: var(--box-shadow);
}

.login-remember {
  font-size: var(--text-base);
  opacity: 0.75;
  padding-right: 1em;
}

.login-remember input {
  margin-right: var(--space-xxs);
}

#login_wp .footnote {
  color: #fff;
  position: relative;
  z-index: 1;
  margin: var(--space-md) auto 0;
  opacity: 1;
  text-align: center;
}

#login_wp .footnote p {
  margin-bottom: 0;
}

#login_wp .footnote a {
  color: #fff;
}

/*----------------------------------------------------------
Single [update,teaching, book chapter, kof lesson]
----------------------------------------------------------*/
.content_box {
  padding: var(--space-xl);
}

.content_box ul,
.content_box ol {
  margin: var(--space-md) 0 var(--space-md) var(--space-xl);
}

.content_box ul > li,
.content_box ol > li {
  margin-bottom: var(--space-xs);
  line-height: var(--body-line-height);
}

.content_box ul:first-child > li,
.content_box ol:first-child > li {
  font-size: var(--text-body);
}

/*----------------------------------------------------------
Single Book Chapter
----------------------------------------------------------*/
.single-book .content_box {
  position: relative;
  overflow: visible;
  margin-top: var(--space-xl);
}

.chapter_image {
  width: var(--space-xxxl);
  height: var(--space-xxxl);
  position: absolute;
  top: -5em;
  left: 50%;
  transform: translateX(-50%);
}

.chapter_header {
  margin: var(--space-lg) auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.chapter_title {
  font-family: var(--font-secondary);
}

.single-book .content_box blockquote {
  margin-bottom: var(--space-md);
  font-style: italic;
}

/*------------------------------
Outreach Book
------------------------------*/
/* indesign title class */
.the-outreach-book .p1,
.the-outreach-book .p2,
.el-libro-de-expansion .p1,
.el-libro-de-expansion .p2 {
  text-align: center;
  width: 100%;
}

.the-outreach-book .p1,
.el-libro-de-expansion .p1 {
  max-width: 650px;
  font-family: var(--font-secondary);
  line-height: 1.5;
  margin: var(--space-xl) auto var(--space-sm);
  font-weight: 400;
}

.the-outreach-book .content_box .p1:first-of-type,
.el-libro-de-expansion .content_box .p1:first-of-type {
  margin-top: 0;
}

.the-outreach-book .p1::before,
.el-libro-de-expansion .p1::before {
  content: "";
  display: block;
  width: var(--space-xl);
  height: var(--space-xl);
  margin: 0 auto;
  background-image: url(/wp-content/uploads/2021/09/KOFF-Logo.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.the-outreach-book .p1 b,
.the-outreach-book .p2 b,
.el-libro-de-expansion .p1 b,
.el-libro-de-expansion .p2 b {
  font-weight: 400;
}

.the-outreach-book .p2,
.el-libro-de-expansion .p2 {
  color: var(--color-text-subtle);
  margin-bottom: var(--space-md);
}

.the-outreach-book .p4,
.el-libro-de-expansion .p4 {
  font-size: var(--text-body) !important;
  text-align: right;
}

/*------------------------------
Posts Nav
------------------------------*/
.post_nav_cnt {
  justify-content: space-between;
}

.post_nav_bottom {
  margin: var(--space-xl) auto var(--space-lg);
}

.post_nav {
  width: 100%;
  max-width: 16.25em;
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 50px;
  transition: var(--transition);
}

.post_nav > a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-decoration: none;
}

.post_nav img {
  border-radius: 100%;
  width: 4em;
  height: 4em;
  box-shadow: var(--box-shadow);
  margin-right: var(--space-md);
}

.post_nav_hd span {
  display: block;
  color: var(--color-text);
}

.post_nav_hd span:nth-child(1) {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.post_nav_hd span:nth-child(2) {
  width: 100%;
  max-width: 10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post_nav:hover {
  transform: translateY(calc(-1 * var(--box-hover-move)));
  box-shadow: var(--box-shadow-hover);
}

.post_nav:active {
  transform: translateY(calc(var(--box-hover-move)));
  box-shadow: var(--box-shadow);
}

/*------------------------------------------------------------
Single Post 
------------------------------------------------------------*/
.single-post :is(h2, h3, h4, h5) {
  font-weight: 900;
}

.single-post .content_box p {
  font-size: var(--text-md);
  font-family: var(--font-secondary);
}

.single-post blockquote {
  font-family: var(--font-secondary);
  font-style: italic;
  margin: var(--space-lg) 0 var(--space-lg) var(--space-lg);
  padding: 0 0 0 var(--space-lg);
  position: relative;
}

.single-post blockquote::before {
  content: "";
  display: block;
  border-radius: 25px;
  width: 0.25em;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--color-accent-lighter);
}

/*------------------------------------------------------------
Page Hero Banner
------------------------------------------------------------*/
.page_hero_banner {
  aspect-ratio: 3/1;
  margin-top: 1em;
}

.page_hero_banner header {
  width: min(100%, 40em);
}

.page_hero_banner header .title {
  font-weight: 900;
  margin-bottom: var(--space-xxxs);
}

.page_hero_banner header .btn {
  margin: 0;
}

/*------------------------------------------------------------
Single – Live Broadcast
------------------------------------------------------------*/

/* donate & altar */
.page_top_btns {
  position: absolute;
  z-index: 1;
  right: var(--space-xl);
  top: var(--space-xxl);
  width: min(100%, 20em);
  justify-content: flex-end;
  gap: var(--space-md);
}

.page_top_btns > * {
  flex: 1;
  margin: 0;
}

.altar_modal .container {
  padding: 0;
  width: min(90%, 70em);
  height: auto;
  max-height: unset;
  overflow: hidden;
  box-shadow: none;

  background: linear-gradient(white, white) padding-box, var(--gradient-golden) border-box;
  border-radius: 1em;
  border: var(--space-xxs) solid transparent;
}

.altar_modal .content {
  padding: 0;
}

.altar_modal .content img {
  display: block;
}

/*----------------------------------------------------------
Responsive Styles
----------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  /*--------------------
    Main Styles
  --------------------*/
  #content_wp {
    left: 0;
    width: 100%;
  }

  /*--------------------
    Login Page
  --------------------*/
  #login_wp::before {
    opacity: 0.85;
  }

  #login_wp .container {
    max-width: 420px;
  }

  .login_form_img {
    display: none;
    visibility: hidden;
  }

  #login_form_content {
    width: 100%;
  }
}

/* #1024px */

@media only screen and (max-width: 980px) {
  /*--------------------------------------------------
  Components – Cards
  --------------------------------------------------*/
  ._cards.cols_3 .col {
    width: calc(100% / 2 - 1em);
  }

  /*------------------------------
  Elements: Books
  ------------------------------*/
  .books.books_col_2 {
    flex-direction: column;
  }

  .books_col_2 .book,
  .books_col_2 .book:nth-child(2n) {
    width: 100%;
    margin: 0 0 var(--space-md);
    max-width: 600px;
  }
}

/* #980px */

@media only screen and (max-device-width: 900px) and (orientation: landscape) {
  .altar_modal .container {
    width: min(90%, 60vw);
  }

  /*  #900px landscape*/
}

@media only screen and (max-width: 900px) {
  body {
    font-size: 97%;
  }

  /*------------------------------
  Elements: Main Streams
  ------------------------------*/
  #main_streams_panel .panel_list li {
    flex-direction: column;
  }

  #main_streams_panel .now_playing_hd,
  #main_streams_panel .audio_stream_player {
    max-width: 100%;
    width: 100%;
  }

  #main_streams_panel .audio_stream_player {
    margin: var(--space-md) auto;
  }

  /*------------------------------
  Elements: panels
  ------------------------------*/

  /*--------------------
  Panel: MP3 Playlist
  --------------------*/
  #playlist_replay_panel .panel_title,
  #playlist_replay_panel .panel_subtitle {
    max-width: 100%;
  }

  /*----------------------------------------
  Video Taxonomy Archive
  ----------------------------------------*/
  .video_tax_header .image {
    width: min(100%, var(--space-xxxxl));
    margin: 0 0 var(--space-lg);
  }

  .video_tax_header .content {
    width: min(100%, 100%);
    padding: 0 !important;
  }
}

/* #900px */

@media only screen and (max-width: 768px) {
  body {
    font-size: 94%;
  }

  /*------------------------------
  Elements: now playing
  ------------------------------*/
  #now_playing {
    padding: var(--space-lg);
  }

  .now_playing_header,
  .now_playing_btns {
    width: 100%;
  }

  .now_playing_btns {
    max-width: 28em;
    margin: var(--space-sm) auto 0;
  }

  .now_playing_hd {
    text-align: center;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .now_playing_hd span:first-child,
  .now_playing_hd span:last-child {
    max-width: 100%;
    margin: 0 auto var(--space-xs);
  }

  .now_playing_hd span:last-child {
    overflow: visible;
    white-space: normal;
  }

  .now_playing_hd span:first-child::before,
  .now_playing_hd span:first-child::after {
    display: none;
  }

  /*------------------------------
  Elements: cards
  ------------------------------*/
  .cards_col_3 .card,
  .cards_col_3 .card:nth-child(3n) {
    width: calc(100% / 2.106);
    margin-right: 5%;
  }

  .cards_col_3 .card:nth-child(2n) {
    margin-right: 0;
  }

  .cards_subs.cards_col_2 .card,
  .cards_subs.cards_col_2 .card:nth-child(2n) {
    width: 100%;
    max-width: 600px;
    margin: 0 auto var(--space-xxl);
    padding-bottom: 0;
  }

  .card_btns .card {
    margin-bottom: var(--space-lg);
  }

  /*--------------------
  Card featured 
  --------------------*/
  .card_featured {
    overflow: visible;
    margin: var(--space-xxl) auto var(--space-xl);
  }

  .card_featured .card_img {
    width: var(--space-xxxxl);
    height: var(--space-xxxl);
    border-radius: var(--space-md);
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid var(--color-primary-lightest);
  }

  .card_featured .card_content {
    width: 100%;
    padding: var(--space-xxl) var(--space-xl) var(--space-xl);
  }

  /*------------------------------
  Elements: panels
  ------------------------------*/
  .replay_panel li {
    padding: var(--space-sm) var(--space-md);
  }

  /*--------------------
  Panel: services layout
  --------------------*/
  #sunday_service_panel .panel_content_header {
    display: none;
  }

  .sunday_service_header {
    max-width: 100%;
    margin-bottom: var(--space-md);
  }

  .author_heading {
    width: 50%;
  }

  .sunday_service_btns {
    width: 50%;
    margin-bottom: var(--space-md);
  }

  /*--------------------
  Panel: inserts layout
  --------------------*/
  .insert_panel li {
    padding: var(--space-xs) var(--space-md) var(--space-xs) 3.5em;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
  }

  .insert_panel li > a {
    font-size: var(--text-body);
  }

  .insert_panel li svg {
    left: var(--space-md);
  }

  /*----------------------------------------
  Video Taxonomy Archive
  ----------------------------------------*/
  .video_tax_list li.col {
    width: calc(100% / 2);
  }

  /*------------------------------
  Single: Book
  ------------------------------*/
  .chapter_image {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin: 0 auto;
  }
}

/* #768px */

@media only screen and (max-width: 600px) {
  body {
    font-size: 91%;
  }

  /*------------------------------
  Elements: cards
  ------------------------------*/
  .cards_col_2 .card,
  .cards_col_2 .card:nth-child(2n) {
    width: 100%;
    margin: 0 auto var(--space-lg);
    padding-bottom: 55%;
  }

  /*------------------------------
  Elements: panels
  ------------------------------*/

  /*--------------------
  Panel: simple layout
  --------------------*/
  #simple_replay_panel .replay_panel li {
    align-items: flex-start;
    justify-content: flex-start;
  }

  #simple_replay_panel .panel_list img {
    max-width: 15%;
    width: 100%;
    margin-right: 5%;
  }

  #simple_replay_panel .replay_header {
    width: 100%;
    max-width: 80%;
    overflow: visible;
    white-space: normal;
  }

  #simple_replay_panel .audio_stream_player {
    width: 100%;
    margin: var(--space-md) 0;
  }

  /*--------------------
  Panel: MP3 Playlist
  --------------------*/
  #playlist_replay_panel .panel_header img {
    display: none;
  }

  #playlist_replay_panel .panel_title,
  #playlist_replay_panel .panel_subtitle {
    padding: 0 0 0 12px;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
  }

  /*--------------------------------------------------
  Components – New Styles
  --------------------------------------------------*/

  /*----------------------------------------
  Components – Modals
  ----------------------------------------*/
  .modal .container {
    padding: var(--space-xl) 0 var(--space-xl) var(--space-md);
  }

  /*----------------------------------------
  Components – Cards
  ----------------------------------------*/
  ._cards.cols_3 .col {
    width: min(100%, 28em);
  }

  /*------------------------------
  Testimonial Cards
  ------------------------------*/
  .ttl_cards .modal .content {
    text-align: justify;
    hyphens: auto;
    font-style: normal;
  }

  /*--------------------
    Login Page
  --------------------*/
  #login_wp {
    background-image: none !important;
  }

  #login_wp::before {
    opacity: 0;
  }

  #login_logo {
    background-image: url(/wp-content/uploads/2021/08/TSL-Logo-vector.svg);
    background-size: 90%;
    z-index: 3;
  }

  #login_wp .container {
    max-width: 300px;
  }

  #login_form_content {
    padding: var(--space-lg) 5%;
  }

  .login_form_container {
    box-shadow: none;
    background-color: var(--transparent);
  }

  #login_wp .footnote,
  #login_wp .footnote a {
    color: var(--color-text);
    margin: 0 auto;
  }

  /*----------------------------------------
  Video Taxonomy Archive
  ----------------------------------------*/
  .video_tax_header {
    padding: var(--space-lg);
  }

  .video_tax_header .description {
    display: none;
  }

  .video_tax_header .title {
    font-size: var(--text-xl);
  }

  /*------------------------------
  Single: Video
  ------------------------------*/
  .video_downloads ul li.col {
    width: 100%;
  }

  /*------------------------------
  Single: Book
  ------------------------------*/
  .single-book .content_box {
    margin-top: var(--space-lg);
    padding: var(--space-xl) var(--space-lg);
  }

  .post_nav {
    width: 47.5%;
    max-width: 15em;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
  }

  .post_nav > a {
    display: block;
  }

  .post_nav img {
    display: none;
  }

  .post_nav_hd span:nth-child(2) {
    max-width: 100%;
  }

  /* altar modal */
  .altar_modal .container {
    padding: 0;
  }

  /* #600px */
}

@media only screen and (max-width: 480px) {
  body {
    font-size: 88%;
  }

  /*------------------------------
  Elements: cards
  ------------------------------*/
  .cards_col_3 .card,
  .cards_col_3 .card:nth-child(2n),
  .cards_col_3 .card:nth-child(3n) {
    width: 100%;
    margin: 0 auto var(--space-lg);
  }

  .cards_col_2 .card:nth-child(2n),
  .cards_col_3 .card:nth-child(3n),
  .cards_col_3.card_btns .card:nth-child(3n) {
    margin-bottom: var(--space-xl);
  }

  .card_content {
    padding: var(--space-lg);
  }

  /*--------------------
  Card: card featured
  --------------------*/
  .card_featured .card_img {
    width: 100%;
    padding-bottom: 60%;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    border: none;
  }

  .card_featured .card_content {
    padding: var(--space-lg);
  }

  /*------------------------------
  Elements: panels
  ------------------------------*/
  .replay_panel li::after {
    margin: var(--space-md) auto;
  }

  .replay_panel .btn {
    height: 3em;
    line-height: 3;
  }

  /*--------------------
  Panel: services layout
  --------------------*/
  #sunday_service_panel .replay_panel li {
    flex-direction: column;
  }

  .sunday_service_header,
  .author_heading,
  .sunday_service_btns {
    width: 100%;
    margin-bottom: var(--space-sm);
  }

  .sunday_service_header .dictation_date,
  .sunday_service_header .pow_details,
  .author_heading .service_sermon,
  .author_heading .service_date {
    font-size: var(--text-body);
  }

  /*--------------------
  Panel: album layout
  --------------------*/
  #album_panel .replay_panel li .replay_title_author {
    width: 100%;
  }

  #album_panel .replay_panel li .btn {
    max-width: var(--space-xxxl);
    margin: var(--space-md) 0 0;
  }

  #album_panel .panel_content_header {
    display: none;
  }

  /*------------------------------
  Elements: Content Editor
  ------------------------------*/
  .content_box {
    padding: var(--space-lg);
  }

  /*----------------------------------------
  Content
  ----------------------------------------*/

  /* Content Buttons 
  ----------------------------------------*/
  .content_btns {
    flex-direction: column;
  }

  .content_btns .col {
    width: 100%;
  }

  .content_btns .btn {
    width: min(100%, 15em);
  }

  /*------------------------------
  Elements: Books
  ------------------------------*/
  .books_col_2 .book,
  .books_col_2 .book:nth-child(2n) {
    max-width: 300px;
    flex-direction: column;
    margin: 0 auto var(--space-lg);
  }

  .book img {
    margin: 0 auto;
    max-width: 10.5em;
  }

  .book_content {
    padding: 0;
    width: 100%;
    text-align: center;
  }

  .book .btn,
  .book .dropdown_btn {
    margin: 0 auto;
  }

  /*------------------------------
  Single: Book
  ------------------------------*/

  /*------------------------------
  The Outreach Book
  ------------------------------*/
  .the-outreach-book .p1,
  .the-outreach-book .p2,
  .el-libro-de-expansion .p1,
  .el-libro-de-expansion .p2 {
    text-align: left;
  }

  /*----------------------------------------
  Page Banner
  ----------------------------------------*/
  .page_banner {
    aspect-ratio: 1.618/1;
  }
}

/* #480px */

@media only screen and (max-width: 400px) {
  /*------------------------------
  Single and Elements: Content editor
  ------------------------------*/
  .content_box ul,
  .content_box ol {
    margin: var(--space-md) 0 var(--space-md) var(--space-md);
  }
}

/* #400px */
/*------------------------------------------------------------
Top Nav
------------------------------------------------------------*/
#top_nav {
  justify-content: flex-end;
  align-items: center;
  padding: 1.5% 5% 0;
  width: 100%;
}

/*------------------------------
Member Name
------------------------------*/
#member_name img {
  width: 1.25em;
  position: relative;
  margin-right: 5px;
}

.top_nav_ul {
  width: calc(100% - 20% - 2.5em - 2.5%);
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: flex-end;
}

.top_nav_item {
  margin: 0 var(--space-md) 0 0;
}

.top_nav_item:last-child {
  margin-right: 0
}

.top_nav_item a {
  text-decoration: none;
  align-items: center;
  padding: var(--space-xs) 0;
  color: var(--color-primary-darker);
  position: relative;
}

.top_nav_item a::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: var(--transition);
  position: absolute;
  bottom: 0;
  left: 0
}

.top_nav_item svg {
  margin-right: var(--space-xs);
  opacity: .35
}

.top_nav_item a:hover::after {
  width: 100%
}

/*------------------------------------------------------------
Masthead – New Styles
------------------------------------------------------------*/
.masthead {
  width: 100%;
  padding: var(--space-sm) 5% 0;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}

/* buttons and links 
----------------------------------------*/
.masthead .top_nav :where(a, button),
.masthead .search_trigger {
  border-radius: var(--space-lg);
  color: var(--gray-10);
  display: block;
  height: 2.5em;
  line-height: 2.5;
  text-decoration: none;
}

/*----------------------------------------
Masthead Search Trigger
----------------------------------------*/
.masthead .search_trigger {
  width: min(15%, var(--space-xxxxl));
  height: 2.75em;
  line-height: 2.75;
  margin: 0;

  svg {
    position: relative;
    color: inherit;
    top: 0;
    left: 0;
    transform: none;
    font-size: 1em;
  }
}

/*----------------------------------------
Masthead Top Nav
----------------------------------------*/
.masthead .top_nav {
  width: min(50%, 30em);

  ul {
    align-items: center;
    justify-content: space-between;
  }
}

.masthead .top_nav :where(a, button) {
  padding: 0 1em;
}

.masthead .top_nav svg,
.masthead .user_dropdown a svg {
  opacity: .35;
  margin-right: var(--space-xxxs);
  transition: var(--transition);
}

/* button states 
----------------------------------------*/
.masthead .top_nav :is(a, button):hover,
.masthead .top_nav .nav_dropdown:has(.open),
.masthead .user_dropdown:has(.open),
.masthead .user_dropdown :is(button, li a):hover {
  background-color: hsla(210, 100%, 96%);
}

.masthead .top_nav a svg.fa-heart {
  opacity: .6
}

.masthead .top_nav :is(a, button):hover svg,
.masthead .top_nav .nav_dropdown:has(.open) svg {
  opacity: 1;
  color: var(--color-primary);
}

.masthead .top_nav a svg.fa-heart {
  color: var(--event-color-accent-light)
}


/*----------------------------------------
Masthead Nav Dropdown
----------------------------------------*/
.masthead .nav_dropdown {
  position: relative;

  button {
    align-items: center;
    cursor: pointer;
    padding-right: var(--space-lg);
  }
}

.masthead .nav_dropdown .menu::before {
  content: "";
  width: 0;
  height: 0;
  border-left: .5em solid transparent;
  border-right: .5em solid transparent;
  border-bottom: .75em solid #fff;
  position: absolute;
  top: -.75em;
  right: 1em;
  filter: drop-shadow(4px 8px 16px hsla(210, 100%, 20%, .1));
}

.masthead .nav_dropdown .menu {
  position: absolute;
  transition: var(--transition);
  top: 0;
  right: 0;
  opacity: 0;
  visibility: 0;
  transform: scaleY(0);
  transform-origin: top;
  background-color: #fff;
  width: 13.8em;
  border-radius: var(--space-xs);
  border: 1px solid var(--color-primary-lightest);
  box-shadow: 4px 8px 16px hsla(210, 100%, 20%, .1);
  padding: var(--space-md) var(--space-sm);
  z-index: 10;
}

.masthead .nav_dropdown .menu li a,
.masthead .user_dropdown li a {
  border-radius: var(--space-xxs);
  font-size: .975em;
}

.masthead .nav_dropdown:has(.open) .menu {
  top: 3em;
  opacity: 1;
  visibility: visible;
  transform: scaleY(1)
}

/*----------------------------------------
User Dropdown
----------------------------------------*/
.masthead .user_dropdown button {
  border-radius: var(--space-lg);
}

.masthead .user_dropdown .icon {
  height: 2.5em;
  aspect-ratio: 1/1;
  border-radius: 100%;
  background-color: var(--color-accent-lighter);
  background-size: 75%;
  box-shadow: var(--box-shadow);
  margin-right: var(--space-sm);
}

.masthead .user_dropdown .menu :where(li, a) {
  text-decoration: none;
  color: var(--gray-10);
}

.masthead .user_dropdown .user_name {
  padding: var(--space-sm);
  font-size: 1em;
  font-weight: 600;
}

.masthead .user_dropdown a {
  display: block;
  padding: var(--space-xs);
  padding-left: .8em;
}

.masthead .user_dropdown:has(.open) .menu {
  top: 3.25em;
}

/*----------------------------------------------------------
Breadcrumbs
----------------------------------------------------------*/
.breadcrumb {
  text-decoration: none;
  width: 100%;
  max-width: 20%;
  position: relative;
}

.breadcrumb,
.breadcrumb:active,
.breadcrumb:visited {
  color: var(--color-text-subtle)
}

.breadcrumb_title {
  margin: 0;
  width: 100%;
  margin-left: 10%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.breadcrumb_icon,
.breadcrumb_icon svg {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);

}

.breadcrumb_icon {
  display: block;
  left: 0;
  width: var(--space-lg);
  height: var(--space-lg);
  border-radius: 100%;
}

.breadcrumb_icon svg {
  left: 50%;
  font-size: var(--space-md);
  opacity: .65;
}

.breadcrumb:hover .breadcrumb_icon {
  background-color: var(--color-primary-lighter);
  color: #fff;
}

.breadcrumb:hover .breadcrumb_icon svg {
  opacity: 1;
}

/*------------------------------------------------------------
Bottom Nav
------------------------------------------------------------*/
#bottom_nav {
  background-image: var(--gradient-bg);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 999;
}

.bottom_nav_ul {
  width: 100%;
  justify-content: space-between;
}

.bottom_nav_ul li {
  width: calc(100% / 5);
  position: relative;
}

.bottom_nav_ul li > a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: var(--nav-height);
  position: absolute;
  top: 0;
  left: 0;
}

/* Bottom Nav Icons & title
------------------------------*/
#bottom_nav a :is(svg, span) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

#bottom_nav a svg {
  font-size: var(--text-lg);
  top: 35%
}

#bottom_nav a span {
  top: 72.5%;
  font-size: var(--text-sm);
}

/* States
------------------------------*/
#bottom_nav a.current {
  background-color: var(--color-primary-light);
}

/* Bottom Nav Search Trigger
------------------------------*/
#bottom_nav .search_trigger {
  border-radius: initial;
  border: none;
  background-color: var(--transparent)
}

/*------------------------------------------------------------
Side navigation
------------------------------------------------------------*/
#sidenav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: var(--sidenav-width);
  background-image: var(--gradient-bg);
  z-index: 1;
  box-shadow: var(--box-shadow-white);
  overflow: visible;
  transition: var(--transition)
}

#sidenav.hide {
  top: calc(-1 * var(--nav-height))
}

/*------------------------------
Sidenav Top
------------------------------*/
#logo {
  margin: var(--space-sm) 0 var(--space-sm) 25px;
  display: block;
  width: 115px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: -8px center;
  background-size: 110px;
  transition: var(--transition)
}

/*--------------------------------------------------------------
Logo and Navigation
--------------------------------------------------------------*/
#menu,
#menu ul,
#menu ul ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 90%
}

.menu_item {
  position: relative;
  margin: 0
}

.menu_item.show_rspv {
  display: none;
  visibility: hidden;
}

.menu_item > a,
#sidenav .logout_menu_item a {
  color: #fff;
  font-size: var(--text-base);
  display: block;
  padding: 15px 18px 15px 55px;
  text-decoration: none;
  border-radius: var(--space-xs);
  outline: none
}

.menu_item svg {
  position: absolute;
  top: 20px;
  color: #fff;
  opacity: .35;
}

.menu_item > svg {
  right: 10px;
  opacity: 1;
  pointer-events: none
}

.menu_item a svg {
  left: var(--space-md);
}

/*------------------------------  
Dropdown Submenus
------------------------------*/
#menu .dropdown_menu {
  position: relative;
  transition: var(--transition);
  width: 100%;
  max-height: 0;
  z-index: 1;
  overflow: hidden;
}

.dropdown_menu .menu_item > a {
  padding: var(--space-sm);
  font-size: .925em;
  position: relative;
  width: 81%;
  margin: 0 0 0 auto;
}

.dropdown_menu .menu_item > a::before,
.dropdown_menu .menu_item > a::after {
  content: "";
  display: block;
  position: absolute;
  opacity: .35;
}

.dropdown_menu .menu_item > a::before {
  background-color: var(--color-primary-lighter);
  height: 100%;
  width: .125em;
  top: -1.75em;
  left: -1em;
}

.dropdown_menu .menu_item > a::after {
  width: 1em;
  height: 1em;
  border-radius: 100%;
  border-left: 2px solid var(--color-primary-lighter);
  transform: rotate(-45deg);
  left: -1em;
  top: .75em;
}

/*------------------------------ 
Menu item hover effect 
------------------------------*/
.menu_item a:hover,
.dropdown_menu .menu_item a:hover {
  background-color: var(--color-primary);
}

/* current/active child menu item */
.active.menu_item > a,
.active.menu_item .active.menu_item a {
  background-color: var(--color-primary-light);
}

.menu_item a:hover svg,
.active.menu_item svg {
  opacity: 1;
}

/*-----------------------------
Collapse Button
-----------------------------*/
#collapse_btn {
  width: var(--space-lg);
  height: var(--space-lg);
  margin: 0;
  background-color: var(--color-primary-dark);
  color: #fff;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 100%;
  padding: 0;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);

}

#collapse_btn:hover {
  background-color: var(--color-primary-darker);
}

/*----------------------------------------------
Collapse
------------------------------------------------*/

.collapsed #sidenav {
  width: var(--sidenav-width-collapsed);
  overflow: visible
}

.collapsed #content_wp {
  left: var(--sidenav-width-collapsed);
  width: calc(100% - var(--sidenav-width-collapsed));
}

.collapsed #logo {
  width: 85%;
  background-size: contain;
  height: 60px;
  margin: var(--space-lg) auto var(--space-sm);
  background-position: center;
}

.collapsed .menu_item > a {
  color: var(--transparent);
  width: 100%;
  height: var(--space-xl);
  padding: 0;
}

.collapsed .menu_item a svg {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.collapsed #sidenav #collapse_btn .svg-inline--fa {
  transform: rotate(180deg);
  opacity: 1
}

/* menu item tooltips */
.menu_item_tooltip {
  display: none;
  visibility: hidden;
}

.collapsed .menu_item_tooltip::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 12px solid var(--color-primary-lighter);
  border-bottom: 6px solid transparent;
  position: absolute;
  left: -9px;
  top: 6px;
}

.collapsed .menu_item_tooltip {
  opacity: 0;
  display: block;
  visibility: visible;
  position: absolute;
  right: -120px;
  top: 0;
  color: #fff;
  background-color: var(--color-primary-lighter);
  padding: var(--space-xxxs);
  width: var(--space-xxxl);
  height: auto;
  text-align: center;
  font-size: var(--text-sm);
  border-radius: var(--space-xs);
  pointer-events: none
}

.collapsed .menu_item:hover .menu_item_tooltip {
  opacity: 1;
}

.collapsed .dropdown_menu,
.collapsed .menu_item > svg {
  display: none;
}

/*--------------------------------------------------------------
Live Search
--------------------------------------------------------------*/
.search_overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(255, 255, 255, .965);
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  transition: var(--transition);
  transition-duration: .35s;
}

.search_overlay_active {
  opacity: 1;
  visibility: visible
}

/* search trigger and close buttons */
.search_trigger,
.search_overlay_close {
  height: 2.5em;
  width: 2.5em;
  border-radius: 100%;
  border: 1px solid #fff;
  background-color: var(--color-primary-light);
  transition: var(--transition)
}

.search_trigger > svg,
.search_overlay_close > svg {
  color: #fff;
  font-size: 17px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* search trigger button */
.search_trigger {
  position: relative;
  margin-left: 2%
}

/* search close button */
.search_overlay_close {
  position: absolute;
  z-index: 2;
  top: var(--space-md);
  right: var(--space-xl);
  cursor: pointer;
  padding: 0
}

.search_trigger:hover,
.search_overlay_close:hover {
  transform: translateY(calc(-1 * var(--box-hover-move))) scale(var(--box-hover-scale));
}

.search_trigger:active,
.search_overlay_close:active {
  transform: translateY(var(--box-hover-move)) scale(1);
}

/*------------------------------
Search Overlay Top
------------------------------*/
.search_overlay_form_cnt {
  width: 100%;
  height: 18vh;
  position: relative;
}

/*.search_overlay_form_cnt::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: var(--gradient-bg);
  opacity: .9;
  z-index: 1;
}*/

.search_overlay_form {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 47.5%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* search input field */
#search_term {
  width: 90%;
  padding: var(--space-xs);
  font-size: var(--text-lg);
  max-width: 33em;
  margin: 0 auto;
  display: block;
}

/*------------------------------
Search Results
------------------------------*/
#search_overlay_results {
  width: 90%;
  max-width: 1280px;
  height: calc(100vh - 18vh);
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: space-between;
  padding: 0 0 var(--space-xl);
}

.search_col {
  width: 31.5%
}

.search_col_title {
  margin-bottom: var(--space-sm)
}

.search_item {
  margin: 0 auto var(--space-lg);
}

.search_item_header {
  align-items: center;
  flex-wrap: nowrap;
}

.search_item_img {
  width: var(--space-lg);
  height: var(--space-lg);
  border-radius: 100%;
  margin-right: var(--space-sm)
}

.search_item_title {
  margin: 0
}

.search_item_description {
  font-size: var(--text-base);
  margin: var(--space-xxs) auto 0;
  opacity: .75;
}

/* hide scroll on body */
.body_no_scroll {
  overflow: hidden;
}

/*------------------------------
Spinner
------------------------------*/

@keyframes chakraSpinner {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.spinner_loader {
  border-radius: 0.5em;
  box-shadow:
    1.5em 0 0 0 var(--color-primary-lighter),
    1.1em 1.1em 0 0 var(--color-primary-light),
    0 1.5em 0 0 var(--color-primary),
    -1.1em 1.1em 0 0 var(--color-primary-dark),
    -1.5em 0 0 0 var(--color-primary-darker),
    -1.1em -1.1em 0 0 var(--color-primary),
    0 -1.5em 0 0 var(--color-primary-light),
    1.1em -1.1em 0 0 var(--color-primary-lighter);
  display: block;
  font-size: .925em;
  width: 1em;
  height: 1em;
  margin: var(--space-lg) auto;
  opacity: .75;
  animation: chakraSpinner 2.5s infinite linear
}

/*------------------------------------------------------------
KOF Templates
------------------------------------------------------------*/
#main.kof_main {
  background-color: var(--kof-color-primary-lightest);
}

.kof_main #logo {
  width: var(--space-xxl);
  height: var(--space-xxl);
  background-position: center;
  background-size: 100%
}

.kof_main #sidenav,
.kof_main #bottom_nav {
  background-image: linear-gradient(var(--kof-color-primary),
      var(--kof-color-primary-dark),
      var(--kof-color-primary-darker))
}

.kof_main .menu_item a:hover,
.kof_main .dropdown_menu .menu_item a:hover,
.kof_main .active.menu_item > a {
  background-color: var(--kof-color-accent-dark);
}

.kof_main .search_trigger,
.kof_main .search_overlay_close,
.kof_main #collapse_btn,
.kof_main #collapse_btn:hover {
  background-color: var(--kof-color-accent-dark)
}

.kof_main .breadcrumb:hover .kof_main .breadcrumb_icon {
  background-color: var(--kof-color-primary-lighter)
}

/*------------------------------------------------------------
Nav Conference Styles
------------------------------------------------------------*/
#menu > .menu_item_conf a {
  background-image: linear-gradient(to left,
      var(--event-color-accent),
      var(--event-color-accent-dark))
}

#menu > .menu_item_conf > a {
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#menu .menu_item_conf .dropdown_menu a {
  background-image: none
}

/*----------------------------------------------------------
Responsive Styles
----------------------------------------------------------*/
/* @media only screen and (min-width: 1025px) {

  #toggle,
  #bottom_nav {
    display: none;
  }

} */

/* #1025 */

/* @media only screen and (max-width: 1024px) {

  body, .post, .page {
    margin: var(--nav-height) 0
  }

  :is(.page-template-login,
    .page-template-event-landing-page,
    .page-template-event-reg-options,
    .page-template-event-landing-page-por) {
    margin: 0
  } */

  /*------------------------- 
  top nav
  -------------------------*/
  /* .top_nav_ul,
  #top_nav .search_trigger {
    display: none;
    visibility: hidden;
  }

  .breadcrumb {
    max-width: 100%;
    padding: var(--space-sm) 0
  }

  .breadcrumb_title {
    margin-left: var(--space-lg)
  }

  .breadcrumb_icon {
    left: var(--space-xs)
  } */

  /*------------------------- 
  sidenav
  -------------------------*/
  /* #sidenav {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    height: var(--nav-height);
    box-shadow: none;
  }

  #logo {
    max-width: 200px;
    min-width: 180px;
    width: 100%;
    height: var(--nav-height);
    margin: 0;
    background-position: var(--space-sm) center;
    background-size: var(--space-xxl)
  }

  .kof_main #logo {
    max-width: 100%;
    min-width: 0;
    width: var(--nav-height);
    height: var(--nav-height);
    background-position: center;
    background-size: 90%;
    margin-left: var(--space-lg);
  }

  #collapse_btn {
    display: none;
    visibility: hidden
  } */

  /*------------------------------
  Toggle
  ------------------------------*/
  /* #toggle {
    position: fixed;
    top: 6px;
    right: var(--space-md);
    width: 35px;
    height: 45px;
    z-index: 9999;
  }

  #toggle .line {
    display: block;
    height: 4px;
    width: 30px;
    border-radius: 50px;
    background-color: #fff;
    position: absolute;
    transition: var(--transition);
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;
    transform-origin: left;
  }

  #toggle .line:nth-child(1) {
    top: 25%
  }

  #toggle .line:nth-child(2) {
    top: 50%;
  }

  #toggle .line:nth-child(3) {
    top: 75%;
  }

  .iconClose .line:nth-child(2) {
    opacity: 0
  }

  #toggle.iconClose .line:nth-child(1),
  #toggle.iconClose .line:nth-child(3) {
    background-color: var(--color-accent-light)
  }

  #toggle.iconClose .line:nth-child(1) {
    -webkit-transform: rotate(var(--toggle-rotate));
    -moz-transform: rotate(var(--toggle-rotate));
    -ms-transform: rotate(var(--toggle-rotate));
    -o-transform: rotate(var(--toggle-rotate));
    transform: rotate(var(--toggle-rotate));
  }

  #toggle.iconClose .line:nth-child(3) {
    -webkit-transform: rotate(calc(-1 * var(--toggle-rotate)));
    -moz-transform: rotate(calc(-1 * var(--toggle-rotate)));
    -ms-transform: rotate(calc(-1 * var(--toggle-rotate)));
    -o-transform: rotate(calc(-1 * var(--toggle-rotate)));
    transform: rotate(calc(-1 * var(--toggle-rotate)));
  } */

  /*--------------------
  Popout
  --------------------*/
  /* #content_cnt {
    padding: 1em 0;
    width: 90%;
  } */

  /* #content_cnt,
  #popout {
    transition-timing-function: ease-in;
    transition-duration: .5s; */
    /*will-change: transform; */
    /* using will-change properity optimizes rendering but causes issues with any children with position: fixed */
  /* } */

  /* #popout {
    position: fixed;
    z-index: 100;
    height: 100vh;
    width: var(--rspv-nav-width);
    background-color: #fff;
    box-shadow: 10px 0 20px rgba(0, 0, 0, .1);
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    top: 0;
    left: 0;
    overflow: scroll;
    -webkit-transform: translateX(calc(-1 * var(--rspv-nav-width)));
    -moz-transform: translateX(calc(-1 * var(--rspv-nav-width)));
    -ms-transform: translateX(calc(-1 * var(--rspv-nav-width)));
    -o-transform: translateX(calc(-1 * var(--rspv-nav-width)));
    transform: translateX(calc(-1 * var(--rspv-nav-width)));
  }

  #popout_logo {
    display: block;
    width: 90%;
    height: var(--nav-height);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: contain;
    margin: var(--space-sm) auto;
  } */

  /*------------------------- 
  nav and content transition
  -------------------------*/
  /* #popout,
  #popout.nav_hide {
    -webkit-transform: translateX(calc(-1 * var(--rspv-nav-width)));
    -moz-transform: translateX(calc(-1 * var(--rspv-nav-width)));
    -ms-transform: translateX(calc(-1 * var(--rspv-nav-width)));
    -o-transform: translateX(calc(-1 * var(--rspv-nav-width)));
    transform: translateX(calc(-1 * var(--rspv-nav-width)));
  }

  #popout.nav_show,
  #content_cnt.content_show {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  } */

  /* hides nav with and resizes content size*/
  /* #content_cnt.content_hide {
    -webkit-transform: translateX(var(--rspv-nav-width));
    -moz-transform: translateX(var(--rspv-nav-width));
    -ms-transform: translateX(var(--rspv-nav-width));
    -o-transform: translateX(var(--rspv-nav-width));
    transform: translateX(var(--rspv-nav-width));
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
    position: fixed;
    width: 100%;
  } */

  /* creates content container mask */
  /* #content_cnt::after {
    content: "";
    display: block;
    background-color: var(--color-primary-darkest);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 10
  }

  /* shows mask */
  /* #content_cnt.content_hide::after {
    opacity: .85;
    visibility: visible
  } */

  /*--------------------
  Main Nav
  --------------------*/
  /* .menu_container {
    width: 100%;
    height: calc(100vh - var(--nav-height));
    overflow: scroll;
    margin: var(--space-sm) 0 0;
  }

  #menu li::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background-color: var(--color-primary);
    opacity: .0925
  }

  .menu_item.show_rspv {
    display: block;
    visibility: visible
  }

  .menu_item.hide_rspv {
    display: none;
    visibility: hidden
  }

  #menu .menu_item > a,
  #sidenav .logout_menu_item a {
    color: var(--color-text);
    position: relative;
  } */

  /*------------------------------
  Nav Conference Styles
  ------------------------------*/
  /* #menu > .menu_item_conf > a,
  #menu > .menu_item_conf svg {
    color: #fff
  } */

  /* left icons */
  /* .menu_item > svg {
    display: block;
    top: 22px;
    color: var(--color-primary)
  } */

  /* angle/arrow icon */
  /* .menu_item a svg {
    right: 25px;
    color: var(--color-primary);
    opacity: .35;
  }

  #menu .menu_item a:hover {
    background-color: var(--color-primary-lightest)
  }

  #menu .active.menu_item > a,
  #menu .active.menu_item .active.menu_item a {
    background-color: var(--color-primary-lighter)
  }

  #menu .active.menu_item a,
  #menu .active.menu_item svg {
    color: #fff
  } */

  /*------------------------------ 
  Sidenav Logout Item
  ------------------------------*/
  /* #sidenav .logout_menu_item {
    position: absolute;
    top: calc(0% + 625px);
    left: 50%;
    width: 90%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  } */

  /*--------------------
  Submenus
  --------------------*/
  /* #menu .dropdown_menu,
  #menu .menu_item:nth-last-child(-n+2) .dropdown_menu {
    position: relative;
    width: 100%;
    max-height: 0;
    padding: 0;
    left: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0 auto;
    z-index: 1;
    opacity: 0;
  }

  #menu .dropdown_menu.open,
  #menu .menu_item:nth-last-child(-n+2) .dropdown_menu.open {
    -webkit-transform: scaleY(1);
    -moz-transform: none;
    -ms-transform: scaleY(1);
    -o-transform: none;
    transform: scaleY(1);
    opacity: 1;
  }

  #menu .dropdown_menu li::after {
    display: none
  }

  #menu .dropdown_menu .menu_item > a {
    width: 100%;
    font-size: .925em;
    opacity: 1;
  }

  #menu .active .dropdown_menu .menu_item a {
    color: var(--color-text)
  }

  #menu .active .dropdown_menu .active.menu_item a {
    color: #fff
  } */



  /*------------------------- 
  live search
  -------------------------*/
  /* .search_trigger {
    right: 62px;
    margin: 0;
  }

  .search_overlay_form {
    width: 90%;
    left: 45%;
    top: 30%;
  }

  .search_overlay_close {
    top: var(--space-lg);
    right: var(--space-md);
  }

} */

/* #1024px */


/* @media only screen and (max-width: 980px) { */

  /*------------------------- 
  live search
  -------------------------*/
  /* .search_col {
    width: 100%;
  }

  .search_item_description {
    display: none;
  }


} */


/* #980px */

/* @media only screen and (max-width: 600px) { */

  /*------------------------- 
  live search
  -------------------------*/
  /* .search_overlay_close {
    width: 30px;
    height: 30px;
    font-size: 1em
  }

} */


/* #600px */

/* @media only screen and (max-width: 480px) { */

  /*------------------------- 
  live search
  -------------------------*/
  /* .search_overlay_form_cnt {
    height: 22vh
  }

  #search_term {
    font-size: var(--text-md)
  }


} */


/* #480px */

/* @media only screen and (max-width: 400px) { */

  /*------------------------- 
  live search
  -------------------------*/
  /* .search_overlay_close {
    width: 25px;
    height: 25px;
  }


} */


/* #400px */
/*------------------------------------------------------------
AudioIgniter Tweaks
------------------------------------------------------------*/

/*--------------------------------------------------
Single Track  
--------------------------------------------------*/
.audio_stream_player .ai-wrap {
  background-color: #fff;
  margin: 0;
  font-family: var(--font-primary);
  padding: 0; 
}

.audio_stream_player .ai-wrap .ai-track {
  background-color: #fff;
  background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light));
  padding: var(--space-xs);
  height: var(--space-xl);
  margin: 0;
}

.audio_stream_player .ai-wrap .ai-track-btn svg,
.audio_stream_player .ai-wrap :is(.ai-track:hover,.ai-track.ai-track-active) .ai-track-btn svg{
  fill: #fff
}

.audio_stream_player :is(.ai-track-name, .ai-track-btn) {
  font-size: .9em;
  color: #fff;
}

.audio_stream_player .ai-wrap .ai-track-control {
  border-color: var(--color-primary-lighter);
}

.audio_stream_player .ai-wrap .ai-track-btn svg{
  opacity: .75;
  margin: 0;
}

.audio_stream_player .ai-wrap .ai-track .ai-track-progress-bar{
  height: .65em
}

/* Single track states 
----------------------------------------*/
.audio_stream_player .ai-wrap .ai-track:hover,
.audio_stream_player .ai-wrap .ai-track.ai-track-active {
  background-color: #fff;

}

/*------------------------------------------------------------
MP3-J Playlist
------------------------------------------------------------*/

/* playlist header and track list container */
.mp3_playlist_cnt .subwrap-MI{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: visible;
}

/* playlist header and player buttons container */
.mp3_playlist_cnt .jp-innerwrap{
  width: 40%;
  min-height: 18em
}

/* track list container */
 .mp3_playlist_cnt .listwrap_mp3j{
   width: 55%;
   max-height: 18em!important;
   overflow: auto!important
 }

 .mp3_playlist_cnt .ul-mjp{
   border-top: none
 }

.mp3_playlist_cnt .playlist-colour{
  background-color: #fff
}

/* division line between tracks */
#playlist_replay_panel .replay_panel li::after{
  margin: 0 auto
}

/* track list item */
.mp3_playlist_cnt .li-mjp .a-mjp{
  border-radius: var(--space-xs);
  padding: var(--space-sm)!important
}

/* track titles */
.mp3_playlist_cnt .a-mjp{
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text)
}

/* playlist title and player container */
.mp3_playlist_cnt div.innerx{
  background-color: #fff;
  border: none;
}

/* track image */
.mp3_playlist_cnt .MI-image{ 
  border-radius: var(--space-md);
  width: 6em !important;
  height: 6em !important;
  margin: 2px auto var(--space-md)!important;
  box-shadow: var(--box-shadow);
}

.mp3_playlist_cnt div.innertab{ border: none }

/*------------------------------ 
Current Track Title 
------------------------------*/
.mp3_playlist_cnt .player-track-title,
.mp3_playlist_cnt .player-track-title div{
  width: 100%;
  max-width: 90%;
  margin: 0 auto var(--space-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mp3_playlist_cnt .player-track-title{
  position: relative;
  top: 0 !important;
  left: 0 !important;
  text-align: center;
  font-size: var(--text-md);
}

/* current track captions/subtitle */
.mp3_playlist_cnt .player-track-title div{
  font-size: .75em;
  color: var(--color-text-subtle);
  margin: var(--space-xs) auto 0;
  font-style: normal;
}

/*------------------------------ 
Track Bar
------------------------------*/
.mp3_playlist_cnt .bars_holder{
  position: relative;
  top: 0;
  margin: 15px auto 0;
  display: block;
  background-color: var(--color-primary-lightest);
  cursor: pointer;
}

/* track status bar */
.mp3_playlist_cnt .poscolMI_mp3j{
  background-color: var(--transparent);
  background-image: linear-gradient(to right,var(--color-primary), var(--color-primary-light)) !important;
}

/* track status bar – load */
.mp3_playlist_cnt .loadMI_mp3j{
  background-color: var(--color-primary-lighter)
}

.mp3_playlist_cnt .statusMI{
  display: none;
}

/*------------------------------
Track time
------------------------------*/
.mp3_playlist_cnt .jp-play-time,
.mp3_playlist_cnt .jp-total-time{
  position: relative;
  right: 0;
  width: 100%;
  font-size: var(--text-sm)!important;
}

.mp3_playlist_cnt .jp-play-time{
  text-align: left;
  bottom: -5px;
}

.mp3_playlist_cnt .jp-total-time{
  bottom: 10px
}

/*------------------------------ 
Current Track States
------------------------------*/
.mp3_playlist_cnt .li-mjp.mp3j_LI_current,
.mp3_playlist_cnt .li-mjp:hover{
  background-color: #fff!important
}

.mp3_playlist_cnt .a-mjp.mp3j_A_current,
.mp3_playlist_cnt .a-mjp:hover{
  background-color: var(--color-primary-lightest)!important;
  color: var(--color-text)!important
}

/*------------------------------
Player Controls
------------------------------*/
.mp3_playlist_cnt .transport-MI{
  position: relative;
  width: 100%;
  max-width: 10em;
  margin: var(--space-xs) auto 0;
  height: 5em;
  left: 0!important
}

/* Player button */
.mp3_playlist_cnt .play-mjp,
.mp3_playlist_cnt .pause-mjp,
.mp3_playlist_cnt .next-mjp,
.mp3_playlist_cnt .prev-mjp{
  position: absolute;
  top: 50%;
  background-color: none;
  background-image: var(--gradient-bg-light)!important;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  border-radius: 100%;
  box-shadow: var(--box-shadow-white);
  float: none;
}

/* add icons as pseudo elements */
.mp3_playlist_cnt .play-mjp::before,
.mp3_playlist_cnt .pause-mjp::before,
.mp3_playlist_cnt .next-mjp::before,
.mp3_playlist_cnt .prev-mjp::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%
}

/* player buttons icons */
.mp3_playlist_cnt .play-mjp::before { 
  background-image:url(/wp-content/uploads/2021/08/icon_play_white.svg);
  background-position-x: 60%; /* icon optical adjustment */
}

.mp3_playlist_cnt .pause-mjp::before{ background-image:url(/wp-content/uploads/2021/08/icon_pause_white.svg)}
.mp3_playlist_cnt .next-mjp::before { background-image:url(/wp-content/uploads/2022/01/MP3-Player-step-forward-icon.svg) }
.mp3_playlist_cnt .prev-mjp::before { background-image:url(/wp-content/uploads/2022/01/MP3-Player-step-backward-icon.svg) }

/* Play & Pause button */
.mp3_playlist_cnt .play-mjp,
.mp3_playlist_cnt .pause-mjp{
  width: 4.5em;
  height: 4.5em;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* Player next and previous buttons */
.mp3_playlist_cnt .next-mjp,
.mp3_playlist_cnt .prev-mjp{
  width: 2.125em;
  height: 2.125em;
  transform: translateY(-50%);
}

.mp3_playlist_cnt .next-mjp{ right: 0 }
.mp3_playlist_cnt .prev-mjp{ left: 0 }




/*----------------------------------------------------------
Simple Calendar – custom styles
----------------------------------------------------------*/
#scalendar{position: relative; }

#scalendar .simcal-fullcalendar-grid{
  font-family: var(--font-primary);
  font-size: 16px
}

#scalendar .fc-view-harness{
  background-color: #fff;
  box-shadow: var(--box-shadow);
}

/*------------------------------
Calendar Header
------------------------------*/
#scalendar .fc-header-toolbar{
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

#scalendar .fc-header-toolbar div:nth-child(2){
  order: 1;
  width: 100%;
}

#scalendar .fc-header-toolbar div:nth-child(1){
  order: 2;
}

#scalendar .fc-header-toolbar div:nth-child(3){
  order: 3;
}

#scalendar .fc-toolbar-title{
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  line-height: 1.5
}

#scalendar #calendar_dropdown_btn{
  position: absolute;
  top: 0;
  right: 0;
}

#scalendar #calendar_dropdown_btn .dropdown_btn_toggle{
  height: 2.75em;
  line-height: 2.75;
}

/*------------------------------
Calendar Buttons
------------------------------*/
#scalendar .fc-button{
  font-size: var(--text-base);
  border: none;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  margin: 0 1.15em 0 0;
  background-image: var(--gradient-bg-light);
  border-radius: var(--space-xs);
  padding: var(--space-xxs) 1em;
}

#scalendar .fc-button:last-child{ margin-right: 0 }

#scalendar .fc-dayGridMonth-button,
#scalendar .fc-timeGridWeek-button,
#scalendar .fc-timeGridDay-button,
#scalendar .fc-prev-button,
#scalendar .fc-next-button{
  background-image: none;
  background-color: #fff;
  color: var(--color-primary-darker)
}

#scalendar .fc-button-active{
  background-color: var(--transparent);
  background-image: var(--gradient-bg-light);
  color: #fff
}

#scalendar .fc-prev-button,
#scalendar .fc-next-button{
  border-radius: 100%;
  padding: var(--space-xxs);
  margin-right: var(--space-xs)
}

#scalendar .fc .fc-next-button{ margin-right: var(--space-md) }

/*------------------------------
Calendar Buttons States
------------------------------*/
#scalendar .fc-button:hover{
  transform: translateY( calc(-1 * var(--box-hover-move)));
}

#scalendar .fc-button:active{
  transform: translateY(var(--box-hover-move));
}

#scalendar .fc-today-button:hover,
#scalendar .fc-today-button:active,
#scalendar .fc-today-button:focus,
#scalendar .fc-button-active:hover,
#scalendar .fc-button-active:active,
#scalendar .fc-button-active:focus{
  color: #fff;
  text-shadow: none;
  height: auto;
}

#scalendar .fc-button[disabled]{ pointer-events: none }

/*------------------------------
Calendar Body
------------------------------*/
#scalendar .fc-scrollgrid{ border: none }

#scalendar .fc-theme-standard td, 
#scalendar .fc-theme-standard th{
  border-color: #efefef
}

/*------------------------------
Calendar Day Names
------------------------------*/
#scalendar .fc-col-header .fc-day{
  padding: var(--space-md) 0 var(--space-sm) 0;
  position: relative;
}

#scalendar .fc-col-header .fc-day a{
  font-size: var(--text-body);
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 600;
  opacity: .85;
  padding: 0;
}

#scalendar .fc-col-header .fc-day::before{
  content: "";
  display: block;
  width: 100%;
  height: var(--space-xs);
  position: absolute;
  top: 0;
  left: 0;
}

#scalendar .fc-day-mon::before{ background-color: var(--color-pink) }
#scalendar .fc-day-tue::before{ background-color: var(--color-blue) }
#scalendar .fc-day-wed::before{ background-color: var(--color-green) }
#scalendar .fc-day-thu::before{ background-color: var(--color-purple) }
#scalendar .fc-day-fri::before{ background-color: var(--color-white) }
#scalendar .fc-day-sat::before{ background-color: var(--color-violet) }
#scalendar .fc-day-sun::before{ background-color: var(--color-yellow) }

/*------------------------------
Calendar Day Numbers
------------------------------*/
#scalendar .fc-daygrid-day-number{
  color: var(--color-text);
  margin: 0;
  padding: var(--space-xxs);
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: left;
  width: 100%;
  opacity: .65;
}

/*------------------------------
Calendar Body Events
------------------------------*/
#scalendar .fc-timegrid-event .fc-event-main,
#scalendar .fc-daygrid-event .fc-event-main{
  color: var(--color-text-subtle)!important;
  padding: var(--space-xs);
}

#scalendar .fc-event-title{
  font-weight: 600;
  font-size: var(--text-base);
}

/*------------------------------
Calendar Body Time Slots
------------------------------*/
#scalendar .fc-timegrid-slot-label-cushion{
  padding: 0;
  font-size: var(--text-sm);
  text-align: center;
  width: 100%;
  color: var(--color-text-subtle)
}

/*------------------------------
Calendar Body Event Tooltips
------------------------------*/
.page-template-calendar .tippy-box{
  box-shadow: var(--box-shadow-white);
  padding: var(--space-md);
  border-radius: var(--box-border-rad);
  font-size: var(--text-sm);
}

.page-template-calendar .tippy-box p{ margin-bottom: var(--space-sm) }
.page-template-calendar .tippy-box p:empty{ display: none }
.page-template-calendar .tippy-content .simcal-event-title{ font-size: var(--text-body) }
.page-template-calendar .tippy-content .simcal-event-description{ color: var(--color-text-subtle)}

/*------------------------------
Calendar Day View
------------------------------*/
#scalendar .fc-timeGridDay-view .fc-event-title{ font-size: var(--text-md) }

/*------------------------------
Calendar Day and Week View
------------------------------*/
#scalendar .fc-timeGridWeek-view .fc-scrollgrid-sync-table,
#scalendar .fc-timeGridDay-view .fc-scrollgrid-sync-table{ 
  background-color: var(--color-primary-lightest) }

/*------------------------------------------------------------
Responsive Styles
------------------------------------------------------------*/
@media only screen and (max-width: 1024px){

  /*------------------------------
  MP3 Playlist
  ------------------------------*/
  .mp3_playlist_cnt .subwrap-MI{
    flex-direction: column;
  }
  
  .mp3_playlist_cnt .jp-innerwrap,
  .mp3_playlist_cnt .listwrap_mp3j{
    width: 100%;
  }

  /* playlist player */
  .mp3_playlist_cnt .jp-innerwrap{
    margin-bottom: var(--space-md)
  }

  /* playlist track list container  */
  .mp3_playlist_cnt .listwrap_mp3j{
    max-height: 10.5em!important
  }

}/* #980px */


@media only screen and (max-width: 900px){

  #calendar_dropdown_btn{
    display: none;
  }

  /* playlist wrapper container */
  #playlist_replay_panel .wrap-mjp{
    padding: 0 0 var(--space-sm) 0!important;

  }

  /* playlist modal open button */
  #playlist_replay_panel .mp3_playlist_modal_btn{
    position: relative;
    margin: 0 auto;
    top: var(--space-xs)
  }

} /* #900px */

@media only screen and (max-width: 480px){
  
  /*------------------------------
  MP3 Playlist
  ------------------------------*/
  #playlist_replay_panel .panel_content{
    padding: var(--space-lg)
  }

  /* tracks */
  .mp3_playlist_cnt .a-mjp{
    font-size: 15px;
  }


  /*------------------------------
  Simple Calendar
  ------------------------------*/
  #scalendar .fc-toolbar-chunk:last-of-type{
    display: flex;
    justify-content: flex-end;
  }

  #scalendar .fc-header-toolbar div:nth-child(1){ width: 50% }
  #scalendar .fc-header-toolbar div:nth-child(3){ width: 50% }

  #scalendar .fc-button{
    padding: var(--space-xxs) .5em;
    margin-right: 5%;
    font-size: .9em;
  }

  #scalendar .fc-prev-button, 
  #scalendar .fc-next-button{
    padding: var(--space-xxs)
  }

  #scalendar .fc-view-harness{ min-height: 26em }

  #scalendar .fc-col-header .fc-day a{ font-size: .9125em }
  #scalendar .fc-daygrid-day-number{ font-size: var(--text-body);}

} /* #480px */

@media only screen and (max-width: 480px){} /* #400px */
/*----------------------------------------------------------
KOF Templates
----------------------------------------------------------*/
.kof_main :is(h1, h2, h3, h4, h5) {
  color: var(--kof-color-primary-darker);
}

.kof_main .page_title {
  font-family: var(--font-tertiary);
}

/*----------------------------------------------------------
KOF Lessons Archive
----------------------------------------------------------*/

/*------------------------------
KOF Lessons Welcome
------------------------------*/
.kofl_welcome {
  justify-content: space-around;
  align-items: center;
}

.kofl_welcome img {
  width: 25%;
  max-width: 225px;
}

.kofl_welcome .kofl_welcome_content {
  width: 70%;
}

.kofl_welcome_header .kofl_welcome_level {
  color: var(--kof-color-accent);
  font-size: var(--text-lg);
  position: relative;
  padding-left: 1.5em;
}

.kofl_welcome_header .kofl_welcome_level::before {
  content: "";
  display: block;
  width: var(--space-md);
  height: var(--space-md);
  background-image: url(/assets/kof/Keepers-of-the-Flame-Fraternity-logo-vector-7d9b21f0322b196fe4ae125bde07752c6c32310e0b29b3ed3fa49557f3ad8af1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/*------------------------------
KOF Lessons Panel
------------------------------*/
.archive .kof_main .accordion,
.page-template-kof-lessons-main .kof_main .accordion {
  width: 100%;
  max-width: calc(100% / 1.618);
  margin: 0 auto;
}

/*------------------------------
KOF Lessons Panel Header
------------------------------*/
.kof_lessons_panel .panel_header {
  background-image: linear-gradient(var(--kof-color-primary), var(--kof-color-primary-dark));
  padding: var(--space-md);
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.kof_lessons_panel .panel_header_cnt {
  width: 88%;
}

.kof_lessons_panel .panel_header .panel_title {
  color: var(--color-accent);
  font-size: var(--text-lg);
  padding: 0;
  width: auto;
  margin: 0;
}

.kof_lessons_panel .panel_header .panel_subtitle {
  color: #fff;
  margin: 0;
}

.kof_lessons_panel .panel_header_img {
  width: 4em;
  height: 4em;
}

/*------------------------------
KOF Lessons Panel Content
------------------------------*/
.kof_lessons_panel .panel_list_header {
  width: 50%;
}

.kof_lessons_panel .panel_list_btns {
  width: 50%;
  justify-content: flex-end;
}

.kof_lessons_panel .panel_list_btns .btn:not(.modal_close_btn) {
  max-width: 47.5%;
  margin-right: 5%;
}

.kof_lessons_panel .panel_list_btns a.btn:last-of-type {
  margin-right: 0;
}

/*------------------------------
KOF Lessons Modal
------------------------------*/
.kof_lessons_panel .modal_content p {
  font-family: var(--font-secondary);
}

/*----------------------------------------------------------
Single KOF Lesson
----------------------------------------------------------*/
.single-kof-lessons .content_box .content,
.single-book .content_box .content {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.single-kof-lessons .content :is(h1, h2, h3, h4, p),
.single-book .content p {
  font-family: var(--font-secondary);
}

.single-kof-lessons .content p,
.single-book .content p {
  font-size: 1.375em;
  line-height: 1.75;
}

.single-kof-lessons img {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.single-kof-lessons hr {
  opacity: 0.125;
  border-top-width: 0;
  border-bottom: 2px solid var(--color-primary-darkest);
  margin: var(--space-md) auto;
}

.single-kof-lessons .box {
  box-shadow: none;
}

/*----------------------------------------
KOF Lessons – Board Header
----------------------------------------*/
.kofl_board_header {
  width: min(100%, 900px);
  margin: 0 auto var(--space-xl);
  padding: var(--space-xxl) var(--space-xxl) var(--space-xl);
  text-align: center;
}

.kofl_board_header .subheading {
  letter-spacing: 2px;
  font-family: var(--font-tertiary);
  font-weight: 500;
  font-size: 1em;
  margin-bottom: var(--space-xs);
}

.kofl_board_header header {
  width: min(100%, 30em);
  margin: 0 auto var(--space-lg);
}

/* KOFL Board – Title
----------------------------------------*/
.kofl_board_header .title {
  font-family: var(--font-tertiary);
  font-size: 3.75em;
  line-height: 0.925;
  font-weight: 600;
  color: var(--kof-color-accent-dark);
  position: relative;
}

.kofl_board_header .title span {
  display: block;
}

.kofl_board_header .title em {
  font-family: var(--font-secondary);
  font-size: var(--text-xxs);
  font-style: italic;
  font-weight: 400;
  position: relative;
  top: -0.25em;
  right: -0.25em;
}

.kofl_board_header header .quote {
  font-style: italic;
  font-family: var(--font-secondary);
  text-wrap: balance;
}

.kofl_board_header header .quote span {
  display: block;
  font-style: normal;
}

/* KOFL Board – Board & Directors
----------------------------------------*/
.kofl_board_header :is(.board, .directors) {
  gap: 1em;
  margin-bottom: var(--space-lg);
  width: min(100%, 35em);
  margin-inline: auto;
}

.kofl_board_header .board {
  flex-direction: column;
}

/* KOFL Board – Directors
----------------------------------------*/
.kofl_board_header .directors .member {
  flex: 0 0 calc((100% / 2) - 1em);
}

.kofl_board_header .directors .member:last-child {
  flex: 1;
}

/* KOFL Board – Members
----------------------------------------*/
.kofl_board_header .member span {
  display: block;
  font-family: var(--font-secondary);
}

.kofl_board_header .member .name {
  text-transform: uppercase;
  font-weight: 400;
}

.kofl_board_header .member .role {
  text-wrap: balance;
  opacity: 0.75;
}

/* KOFL Board – Messengers
----------------------------------------*/
.kofl_board_header .messengers {
  font-family: var(--font-secondary);
  text-transform: uppercase;
}

/*------------------------------
KOF Lessons Header Banner
------------------------------*/
.kofl_header_container {
  padding: 0 0 var(--space-xl) 0;
  max-width: 900px;
  margin: 0 auto var(--space-xxl);
}

.kofl_header_banner {
  position: relative;
}

.kofl_header_banner::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--kof-color-primary-dark);
  opacity: 0.65;
}

.kofl_header_banner .kofl_header_banner_title {
  font-family: var(--font-tertiary);
  font-size: var(--text-lg);
  text-align: center;
  color: #fff;
  text-shadow: var(--text-shadow);
  width: 100%;
  max-width: 15em;
  margin: 0 auto;
  padding: var(--space-xl) 0;
  position: relative;
  z-index: 1;
}

.kofl_header {
  text-align: center;
  margin: var(--space-xl) auto;
}

.kofl_header_title,
.kofl_header_level {
  text-transform: uppercase;
}

.kofl_header_title {
  color: var(--kof-color-primary-dark);
}

.kofl_header_level {
  color: var(--kof-color-primary);
  font-family: var(--font-tertiary);
  font-weight: 400;
}

/*------------------------------
KOF lesson header quote
------------------------------*/
.kofl_header_quote {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}

.kofl_header_quote p {
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  line-height: 1.85;
}

.kofl_header_quote .author_name {
  font-weight: bold;
  font-family: var(--font-tertiary);
  text-align: right;
  margin-right: var(--space-md);
}

/*------------------------------
KOF lesson divider
------------------------------*/
.kofl_divider,
.kofl_divider::before,
.kofl_divider::after {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
}

.kofl_divider {
  position: relative;
  width: 100%;
  max-width: 70%;
  height: 2.5em;
  margin: var(--space-sm) auto;
  background-image: url(/assets/lessons/background/Koff-logo-golden-sm-f6999e20d463ab282501aec942cad796a0c9bfa8ce8afff5a5c2cb3c65853a36.svg);
  background-size: 12%;
}

.kofl_divider::before,
.kofl_divider::after {
  content: "";
  width: 45%;
  height: 1em;
  background-image: url(/assets/lessons/background/Koff-logo-divider-line-9113a46cc5aef01de6bc73dc288cda1cbf74d758fe86dffe43188f9b43f444c2.svg);
  background-size: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.kofl_divider::before {
  top: 30%;
  left: 0;
  transform: rotate(180deg);
}

.kofl_divider::after {
  right: 0;
}

/*------------------------------
KOF lesson sections
------------------------------*/
.kofl_section_container {
  width: 100%;
  max-width: 900px;
  padding: 0 0 var(--space-xxl) 0;
  margin: 0 auto var(--space-xxl);
  box-shadow: var(--box-shadow-white);
}

/*------------------------------
KOF lesson table of contents
------------------------------*/
.kofl_table_contents_container {
  padding: var(--space-lg);
}

.kofl_table_contents ol {
  -moz-column-count: 2;
  column-count: 2;
  list-style: decimal;
  padding: 0 var(--space-md);
}

.kofl_table_contents li a {
  display: inline-block;
  width: auto;
  padding: var(--space-xxs);
  transition: var(--transition);
  position: relative;
  font-size: var(--text-body);
}

.kofl_table_contents li a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: var(--kof-color-accent);
  transition: var(--transition);
  position: absolute;
  bottom: 0;
  left: 0;
}

.kofl_table_contents li a:hover::after {
  width: 100%;
}

/*------------------------------
KOF Lesson Section Header
------------------------------*/
.kofl_section_header_container {
  margin-bottom: var(--space-xl);
}

.kofl_section_header {
  text-align: center;
  padding: var(--space-lg) 0;
  width: 90%;
  max-width: 30em;
  margin: 0 auto;
}

.kofl_section_header_title {
  font-family: var(--font-tertiary);
  margin-bottom: var(--space-xxs);
}

.kofl_section_header_subtitle {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-style: italic;
}

.kofl_section_content_container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}

/*------------------------------
KOF Lesson Content Typography
------------------------------*/
.kofl_section_content_container h2,
.kofl_section_content_container h3,
.kofl_section_content_container h4 {
  font-family: var(--font-secondary);
}

.kofl_section_content_container p {
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  line-height: 1.75;
}

.kofl_section_content_container > p:first-of-type {
  margin-top: var(--space-lg);
}

.kofl_section_content_container .author_name {
  font-family: var(--font-tertiary);
  font-weight: 600;
  font-size: var(--text-lg);
}

/* Used for image caption */
.kofl_section_content_container h5 {
  font-weight: 400;
  font-size: var(--text-base);
  margin: 0 auto var(--space-md);
  color: var(--color-text-subtle);
  width: 100%;
  max-width: 520px;
  line-height: 1.5;
}

/* Used for footnotes within content */
.kofl_section_content_container h6 {
  font-weight: 400;
  font-size: 0.85em;
  margin: var(--space-sm) auto var(--space-md);
  color: var(--color-text-subtle);
  line-height: 1.5;
}

.kofl_section_content_container h5 + h5 {
  margin-top: -0.5em;
}

/*------------------------------
KOF Section Top Images
------------------------------*/
.kofl_decree_section,
.kofl_gleanings_section,
.kofl_gleanings_tff_section,
.kofl_basic_cosmo_science_section,
.kofl_inter_cosmo_science_section,
.kofl_adoration_flame_section {
  position: relative;
  overflow: visible;
  margin-top: var(--space-xxxl);
}

.kofl_decree_section::before,
.kofl_gleanings_section::before,
.kofl_gleanings_tff_section::before,
.kofl_basic_cosmo_science_section::before,
.kofl_basic_cosmo_science_section::after,
.kofl_inter_cosmo_science_section::before,
.kofl_adoration_flame_section::before {
  content: "";
  display: block;
  width: var(--space-xxxl);
  height: var(--space-xxxl);
  box-shadow: var(--box-shadow-white);
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: -65px;
  transform: translateX(-50%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.kofl_decree_section::before,
.kofl_adoration_flame_section::before {
  background-image: url(/assets/lessons/background/Threefold-Flame-–-Divine-Spark-3c4c46a0fbc7e563220027186bcc3a69cd177afc5f7d4129f664a25c45ba8a72.jpg);
}

.kofl_gleanings_section::before {
  background-image: url(/assets/lessons/background/Worthy-Gleanings-painting-kof-lessons-77332ab7647d9ac474ab57d63a2734b0813bc6fa9ba7f65130bb1e4cb9f31190.jpg);
}

.kofl_gleanings_tff_section::before {
  background-image: url(/assets/lessons/background/Threefold-Flame-Divine-Spark-line-art-9daa8fdfc7762558430cbf8d91b56cd0b5c029afc0f19c2463a44c25013932de.jpg);
}

.kofl_basic_cosmo_science_section::before {
  left: 43%;
  background-image: url(/assets/lessons/background/Galaxy-Spiral-KOF-lessons-a42ba1a0dc36b3781ddf415360e2b60efa1323a885eef68274c1e31462153ea0.jpg);
}

.kofl_basic_cosmo_science_section::after {
  left: 57%;
  background-image: url(/assets/lessons/background/Shell-Spiral-KOF-lessons-651c82f0674c02c762ab4e8a09587c92607a2a4360bdaceef18dc2024f80e909.jpg);
}

.kofl_inter_cosmo_science_section::before {
  background-image: url(/assets/lessons/background/Gold-shell-and-golden-ratio-spiral-kof-lessons-4e9d12f3d57146c9e850813c68c9356ef571efd41ee177c57f9aff8859054643.jpg);
}

:is(.kofl_decree_section, .kofl_gleanings_section, .kofl_gleanings_tff_section, .kofl_basic_cosmo_science_section, .kofl_inter_cosmo_science_section, .kofl_adoration_flame_section) .kofl_section_header_container {
  padding-top: var(--space-xl);
  border-radius: var(--box-border-rad) var(--box-border-rad) 0 0;
}

.kofl_content_double_imgs {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.kofl_content_double_imgs img {
  width: 100%;
  max-width: 50%;
}

/*------------------------------
KOF Message or Letter Section
------------------------------*/
.kofl_msg_section .kofl_section_header {
  max-width: 85%;
}

.kofl_msg_section .kofl_section_header_title {
  font-size: var(--text-lg);
  text-transform: uppercase;
  margin-bottom: 0;
  letter-spacing: 0.025em;
}

.kofl_msg_section .kofl_section_content_container blockquote,
.kofl_basic_cosmo_science_section .kofl_section_content_container blockquote {
  font-style: italic;
  margin: var(--space-lg) auto;
  padding: var(--space-lg);
  border-width: 7px;
  border-style: double;
  color: #fff;
}

/*------------------------------
KOF Decree Section
------------------------------*/
.kofl_decree_section .audio_stream_player,
.kofl_adoration_flame_section .audio_stream_player {
  margin: var(--space-sm) auto var(--space-lg);
  box-shadow: none;
  max-width: 24em;
}

/*------------------------------
KOF Gleanings Section
------------------------------*/
.kofl_gleanings_section .kofl_section_header_container,
.kofl_gleanings_tff_section .kofl_section_header_container {
  background-color: hsl(30, 78%, 94%);
}

.kofl_gleanings_section .kofl_section_header,
.kofl_gleanings_tff_section .kofl_section_header {
  max-width: 40em;
}

.kofl_gleanings_section .kofl_section_header_title,
.kofl_gleanings_tff_section .kofl_section_header_title {
  font-family: var(--font-secondary);
}

.kofl_gleanings_section .kofl_section_header_subtitle span:first-child,
.kofl_gleanings_tff_section .kofl_section_header_subtitle span:first-child {
  font-style: normal;
  font-weight: bold;
}

.kofl_gleanings_quote {
  margin: 0 auto var(--space-xl);
}

.kofl_gleanings_quote::after {
  content: "";
  display: block;
  width: var(--space-xxl);
  height: var(--space-lg);
  margin: 0 auto;
  background-image: url(/assets/lessons/background/kof-lessons-sheaves-97b1fa2f1b4be465af54e6a535dd71bc20d15d12920a63bd667bf87aef9ede95.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.kofl_gleanings_section li:last-child .kofl_gleanings_quote::after,
.kofl_gleanings_tff_section li:last-child .kofl_gleanings_quote::after {
  display: none;
}

.kofl_gleanings_quote blockquote {
  margin: 0 auto var(--space-md);
}

.kofl_gleanings_quote figcaption {
  text-align: right;
  font-style: italic;
}

/*------------------------------
KOF Basic and Inter Cosmo-Science
------------------------------*/
:is(.kofl_basic_cosmo_science_section, .kofl_inter_cosmo_science_section) :is(.kofl_section_content_container blockquote, .kofl_section_header_container) {
  background-color: hsl(297, 82%, 96%);
  color: var(--color-text);
  border-color: var(--kof-color-primary-lighter);
}

/*------------------------------
KOF Basic Content Section
------------------------------*/
.kofl_content_section {
  padding-top: var(--space-xxl);
}

.kofl_content_section blockquote {
  font-style: italic;
  font-size: var(--text-body);
}

.kofl_content_section blockquote .author_name {
  font-size: var(--text-base);
  font-style: normal;
}

/*------------------------------
KOF Adorations to the Flame Section
------------------------------*/
.kofl_adoration_flame_section .kofl_section_header_container {
  background-color: hsl(262, 60%, 88%);
}

.kofl_adoration_flame_section .kofl_section_header {
  max-width: 80%;
}

.kofl_adoration_flame_section .kofl_section_header_title {
  font-family: var(--font-quaternary);
  font-size: var(--text-xxxxl);
  font-weight: normal;
  margin: 0;
}

/*------------------------------
KOF Lesson Section Rays
------------------------------*/
.kofl_msg_section.ray_blue :is(.kofl_section_header_container, .kofl_section_content_container blockquote) {
  background-image: linear-gradient(45deg, var(--gd-blue));
}

.kofl_msg_section.ray_yellow .kofl_section_header_container {
  background-image: linear-gradient(45deg, var(--gd-yellow));
}

.kofl_msg_section.ray_pink .kofl_section_header_container {
  background-image: linear-gradient(45deg, var(--gd-pink));
}

.kofl_msg_section.ray_white .kofl_section_header_container {
  background-image: linear-gradient(45deg, #fff, var(--color-white));
}

.kofl_msg_section.ray_purple .kofl_section_header_container {
  background-image: linear-gradient(45deg, var(--gd-purple));
}

.kofl_msg_section.ray_green :is(.kofl_section_header_container, .kofl_section_content_container blockquote) {
  background-image: linear-gradient(45deg, var(--gd-green));
}

.kofl_msg_section.ray_violet :is(.kofl_section_header_container, .kofl_section_content_container blockquote) {
  background-image: linear-gradient(45deg, var(--gd-violet));
}

.kofl_msg_section.ray_eight .kofl_section_header_container {
  background-image: linear-gradient(45deg, var(--gd-salmon));
}

.kofl_msg_section:is(.ray_blue, .ray_pink, .ray_green, .ray_purple, .ray_violet, .ray_eight) .kofl_section_header_title {
  color: #fff;
  text-shadow: var(--text-shadow);
}

.kofl_msg_section.ray_blue .kofl_section_content_container blockquote,
.kofl_msg_section.ray_violet .kofl_section_content_container blockquote {
  border-color: #fff;
}

.kofl_content_section.ray_yellow {
  background-color: hsl(37, 100%, 92.5%);
}
.kofl_content_section.ray_pink {
  background-color: hsl(334, 90%, 93.5%);
}
.kofl_decree_section.ray_yellow {
  background-color: hsl(37, 100%, 90.5%);
}
.kofl_content_section.ray_green {
  background-color: hsl(175, 65%, 92%);
}
.kofl_content_section.ray_purple {
  background-color: hsl(264, 84%, 92.5%);
}

:is(.kofl_decree_section, .kofl_content_section).ray_blue {
  background-color: hsl(233, 72%, 90%);
}
:is(.kofl_decree_section, .kofl_content_section).ray_violet {
  background-color: hsl(298, 75%, 92.5%);
}

/*------------------------------
KOF Lesson Notes
------------------------------*/
.kofl_notes {
  margin-top: var(--space-xxxl);
}

.kofl_notes_title {
  text-transform: uppercase;
  font-size: var(--text-md);
}

.kofl_notes p,
.kofl_notes li {
  font-size: var(--text-base);
}

/*----------------------------------------------------------
Responsive Styles
----------------------------------------------------------*/
@media only screen and (max-width: 900px) {
  /*------------------------------
  KOF Archive
  ------------------------------*/
  .kofl_welcome {
    flex-direction: column;
  }

  .kofl_welcome img,
  .kofl_welcome .kofl_welcome_content {
    width: 100%;
  }

  .kofl_welcome .kofl_welcome_content {
    max-width: 600px;
    margin: var(--space-lg) auto 0;
  }

  .kofl_welcome_header {
    text-align: center;
  }

  .kofl_welcome_header .kofl_welcome_level::before {
    display: none;
  }

  .kofl_welcome_header .kofl_welcome_level {
    padding-left: 0;
  }

  .archive .kof_main .accordion,
  .page-template-kof-lessons-main .kof_main .accordion {
    max-width: 100%;
  }
} /* #900px */

@media only screen and (max-width: 600px) {
  /*---------------------------------------
  KOLF Board Header
  ----------------------------------------*/
  .kofl_board_header {
    padding: var(--space-xl) var(--space-md);
  }

  .kofl_board_header .title {
    font-size: var(--text-xxxl);
  }

  .kofl_board_header .directors {
    flex-direction: column;
  }

  .kofl_board_header .directors .member {
    flex: 1;
  }

  /* 600px */
}

@media only screen and (max-width: 480px) {
  /*------------------------------
  KOF Lessons Archive
  ------------------------------*/
  .kof_lessons_panel .panel_list_item {
    flex-direction: column;
  }

  .kof_lessons_panel .panel_list_header,
  .kof_lessons_panel .panel_list_btns {
    width: 100%;
    margin-bottom: var(--space-sm);
  }

  .kof_lessons_panel .panel_list_header {
    text-align: center;
  }

  .kof_lessons_panel .panel_list_btns {
    justify-content: space-between;
  }

  .kof_lessons_panel .panel_list_btns .btn {
    height: 3em;
    line-height: 3;
  }

  /*----------------------------------------
  KOF Lessons Single
  ----------------------------------------*/
  .kofl_section_container blockquote br {
    display: none;
  }
} /* #480px */

@media only screen and (max-width: 400px) {
  /*----------------------------------------
  KOF Lessons Single
  ----------------------------------------*/
  .kofl_section_container blockquote p {
    text-align: left !important;
  }
} /* #400px */
/*--------------------------------------------------
Events – Pages
--------------------------------------------------*/
:is(.page-template-event-landing-page, .page-template-event-landing-page-por) #main {
  background-color: #fff;
}

:is(.page-template-event-landing-page, .page-template-event-reg-options, .page-template-event-landing-page-por) #content_wp {
  left: 0;
  width: 100%;
}

:is(.page-template-event-landing-page, .page-template-event-reg-options, .page-template-event-landing-page-por) #content_cnt {
  padding: 0;
  width: 100%;
}

/*--------------------------------------------------
Events – General Styles
--------------------------------------------------*/
.essentials {
  --event-color: hsl(278, 40%, 48%);
  --event-color-light: hsl(273, 72%, 99%);
  --event-color-dark: hsl(273, 50%, 38%);
}

.event_color_light {
  background-color: var(--event-color-light);
}

.event_color_dark {
  background-color: var(--event-color-dark);
}

.event_btn.btn_thick {
  border: 0.25em solid var(--event-color-accent-light);
  line-height: 2.5;
}

.event_btn.btn_disabled {
  pointer-events: none;
  background-image: none;
  background-color: var(--gray-1);
  color: var(--gray-8);
  border-color: var(--gray-2);
}

.eyebrow {
  color: var(--event-color-accent);
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 900;
  margin-bottom: var(--space-xxxs);
}

:is(.event_btn, .event_dropdown_btn .toggle) {
  background-image: linear-gradient(45deg, var(--event-color-accent), var(--event-color-accent-dark));
  color: #fff;
}

.event_btn:is(:hover, :active, :visited, :focus) {
  color: #fff;
}

:is(.page-template-event-landing-page) .btn_content {
  height: auto;
  line-height: 1;
  display: table;
  width: auto;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9em;
}

/* Event Section Header
------------------------------*/
.event_section_header {
  width: min(100%, calc(100% / 1.618));
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.event_section_header .title {
  margin-bottom: var(--space-xs);
  margin-inline: auto;
  font-size: var(--text-xl);
  font-weight: 900;
  text-wrap: balance;
}

.event_section_header .description {
  /* font-family: var(--font-secondary); */
  font-size: var(--text-body);
  font-style: italic;
  /*text-wrap: balance;*/
}

/* .event_section_header.special_header .title {
  font-family: var(--font-event);
} */

.event_section_header.special_header .btn {
  margin-block: 0;
}

/* Event Sub-Section Header
------------------------------*/
.event_subsection_header::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--gray-1);
}

.event_subsection_header {
  margin-bottom: var(--space-lg);
}

/*--------------------------------------------------
Event Banner
--------------------------------------------------*/
.event_banner {
  position: relative;
}

.event_banner::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.event_banner .image {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.event_banner header {
  width: min(100%, 25em);
  margin: 0;
  position: relative;
  z-index: 1;
}

.event_banner header .title {
  font-size: var(--text-xxxl);
  font-family: var(--font-event);
  line-height: 1;
  margin: var(--space-xxxs) 0;
  font-weight: 900;
}

.event_banner header .subtitle {
  text-wrap: balance;
}

.event_banner header .event_name {
  font-weight: 600;
  text-transform: uppercase;
}

/*----------------------------------------
 Event Home Banner
----------------------------------------*/
.event_home_banner::before {
  border-radius: var(--box-border-rad);
}

.event_home_banner {
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  z-index: 2;
}

.event_home_banner .btns {
  width: min(100%, 25em);
  margin: var(--space-md) auto 0;
  gap: 1em;
}

.event_home_banner :where(.dropdown_btn, .btn) {
  margin: 0;
  max-width: 100%;
  flex: 0 0 calc(50% - 1em);
}

.event_home_banner .btns .btn_ghost_white:hover {
  box-shadow: none;
}

.event_home_banner .dates svg {
  margin-right: var(--space-xs);
  opacity: 0.85;
}

/*----------------------------------------
 Event Hero Banner
----------------------------------------*/
.event_hero_banner {
  aspect-ratio: 1500/860;
}

.event_hero_banner > section {
  position: relative;
}

.event_hero_banner .return_btn {
  position: absolute;
  left: var(--space-xl);
  top: var(--space-lg);
  margin: 0;
  width: min(100%, 7em);
}

.event_hero_banner .btns {
  gap: 1em;
  width: min(100%, 25em);
  margin: var(--space-lg) auto;
}

.event_hero_banner .btns a {
  flex: 1;
  margin: 0;
}

.event_hero_banner .btns a:last-child {
  background-color: hsla(0, 0%, 100%, 0.25);
  border: 1px solid hsl(0, 0%, 100%, 0.65);
  color: #fff;
}

/*----------------------------------------
 Event Page Banner
----------------------------------------*/
.event_page_banner {
  margin-bottom: var(--space-xxl);
  aspect-ratio: 4/1;
}

.event_page_banner header {
  width: min(100%, 28em);
  margin: 0 !important;
  align-self: center;
}

/*--------------------------------------------------
Event – Clouds Frame
--------------------------------------------------*/
.clouds_frame_top::before,
.clouds_frame_bottom::after {
  content: "";
  width: 100%;
  aspect-ratio: 6/1;
  background-image: url(/wp-content/uploads/2025/06/Clouds-Frame-Bottom-1500x250-1.jpg);
  position: absolute;
  left: 0;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}

.clouds_frame_bottom::after {
  bottom: 0;
}

.clouds_frame_top::before {
  top: 0;
  transform: rotate(180deg);
}

.wrapper.clouds_frame_top {
  margin-top: -8em;
  padding-top: 15em;
}

.wrapper.clouds_frame_bottom {
  margin-bottom: -8em;
  padding-bottom: 10em;
}

/*--------------------------------------------------
Event – Top Nav
--------------------------------------------------*/
.event_top_nav {
  padding: var(--space-xs) 0;
}

.event_top_nav a {
  display: block;
  padding: var(--space-sm);
  width: min(100%, 18em);
  text-decoration: none;
  color: var(--gray-10);
}

/*--------------------------------------------------
Event – Sticky Navigation
--------------------------------------------------*/
nav.event_nav {
  width: min(90%, 980px);
  position: sticky;
  position: -webkit-sticky;
  top: var(--space-md);
  z-index: 10;
  background-color: #fff;
  box-shadow: var(--box-shadow);
  margin: var(--space-xxl) auto -8em;
  border-radius: 100px;
  border: 1px solid var(--gray-2);
}

nav.event_nav ul {
  /* justify-content: space-evenly; */
  --grid-space: 1em;
  gap: 1em;
}

nav.event_nav li {
  flex-grow: 1;
}

nav.event_nav li a {
  display: block;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--color-primary-darker);
  text-decoration: none;
  border-radius: 50px;
  text-align: center;
}

nav.event_nav li a svg {
  opacity: 0.5;
  margin-right: var(--space-xxs);
}

nav.event_nav li a:is(:hover, :active) {
  background-color: var(--color-accent-lighter);
}

/*--------------------------------------------------
Event – Intro Quote
--------------------------------------------------*/
#event_intro {
  padding-top: var(--space-xl);
}

.event_intro_quote {
  align-items: flex-end;
  justify-content: space-evenly;
  width: min(100%, 75em);
  margin: 0 auto;
}

/* Event Intro Quote Image
------------------------------*/
.event_intro_quote .image::before {
  content: "";
  display: block;
  width: 88%;
  padding-bottom: 88%;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  background-image: linear-gradient(to top, var(--color-accent-light), var(--color-accent-lighter));
}

.event_intro_quote .image {
  position: relative;
  border-radius: 100%;
  width: min(100%, 30%);
  overflow: hidden;
  aspect-ratio: 5/6;
}

.event_intro_quote .image img {
  margin: 0 auto;
  width: min(100%, 95%);
  position: relative;
  bottom: -1.5em;
  left: 0.65em;
}

/* Event Intro Quote Content
------------------------------*/
.event_intro_quote .content {
  max-width: 48%;
}

.event_intro_quote blockquote {
  margin: 0;
  text-wrap: balance;
}

.event_intro_quote .content blockquote p {
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  font-style: italic;
  margin-bottom: 0;
}

.event_intro_quote figcaption {
  display: block;
  width: min(100%, 18em);
  bottom: calc(-1 * var(--space-lg));
  height: auto;
  aspect-ratio: 5/1;
  margin-inline: auto 0;
  position: relative;
  top: 1em;
}

/*--------------------------------------------------
Event – Intro
--------------------------------------------------*/
#about {
  padding-top: var(--space-xl);
}

.event_intro {
  align-items: center;
}

.event_intro .images div {
  float: left;
  display: block;
  border-radius: var(--space-md);
}

.event_intro .images div:nth-child(1) {
  aspect-ratio: 3/4;
  width: 54%;
  margin-right: 5%;
}

.event_intro .images div:is(:nth-child(2), :nth-child(3)) {
  aspect-ratio: 5/4;
  width: 41%;
}

.event_intro .images div:nth-child(2) {
  margin-bottom: 5%;
}

/*  Event Intro – Letter
--------------------------------------------------*/
.event_letter .description {
  -moz-column-width: 50ch;
       column-width: 50ch;
  -moz-column-gap: var(--space-xl);
       column-gap: var(--space-xl);
  hyphens: auto;
  text-align: justify;
}

.event_letter figure blockquote {
  font-style: italic;
  padding-inline: var(--space-md) 0;
  font-family: var(--font-secondary);
  border-left: 5px solid var(--gray-1);
  margin: 0;
}

.event_letter figure figcaption {
  font-size: var(--text-sm);
  text-align: right;
}

.event_letter .description > p:first-child:first-letter {
  color: var(--event-color);
  float: left;
  font-family: var(--font-secondary);
  font-size: 4em;
  line-height: 60px;
  padding-top: 0.1em;
  padding-right: 0.1em;
  padding-left: 0.05em;
  font-weight: 600;
}

/*--------------------------------------------------
Event – Features
--------------------------------------------------*/
.event_features > li {
  -ms-align-items: center;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xxl);
}

.event_features > li:last-child {
  margin-bottom: 0;
}

#event_options .event_features > li {
  align-items: flex-start;
}

/* Event Features Content
------------------------------*/
.event_features .content,
.event_features .image {
  width: calc(50% - var(--grid-space));
}

.event_features .content {
  width: calc(50% - var(--space-xl));
}

.event_features .content p:last-of-type {
  margin-bottom: 0;
}

.event_features .title {
  font-weight: 900;
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
  text-wrap: balance;
}

.event_features li:nth-child(even) .content {
  order: 1;
}

/* Event Features Image
------------------------------*/
.event_features .image {
  aspect-ratio: 1.618/1;
  pointer-events: none !important;
}

.event_features li:nth-child(even) .image {
  order: 2;
}

/* SU Bookstore */
.event_features #bookstore .image {
  aspect-ratio: 720/847;
}

/*--------------------------------------------------
Event – Highlights
--------------------------------------------------*/
.event_highlights li .image {
  width: min(100%, var(--space-xxl));
  aspect-ratio: 1/1;
  padding: 0;
  border-radius: 100%;
  margin-bottom: var(--space-md);
}

.event_highlights li .title {
  text-wrap: balance;
  margin-bottom: var(--space-xxxs);
}

.event_highlights li .content .description {
  font-size: 1em;
  color: var(--gray-10);
  margin-bottom: 0;
}

/*--------------------------------------------------
Event – Details
--------------------------------------------------*/
.event_details_section > .col_minor {
  position: relative;
}

.event_details_section > .col_minor::after {
  content: "";
  display: block;
  position: absolute;
  right: -20px;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--gray-1);
}

ul.event_details_list > .row {
  align-items: flex-start;
}

ul.event_details_list li p:last-child {
  margin-bottom: 0;
}

.event_details_list li.cols_gr .image {
  aspect-ratio: 1.618/1;
}

.event_details_list li:not(.cols_gr) .image {
  aspect-ratio: 1/1;
}

.event_details_list li .content {
  padding-top: 0;
}

/*--------------------------------------------------
Event – Featured Dictations
--------------------------------------------------*/
.event_dictations {
  margin-bottom: var(--space-xl);
}

.event_dictations li::before {
  content: "";
  width: 90%;
  background-image: url(/wp-content/uploads/2024/11/Golden-Frame-400x500-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
}

.event_dictations li::before,
.event_dictations .portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.event_dictations li {
  position: relative;
  aspect-ratio: 5/6;
}

.event_dictations .portrait {
  aspect-ratio: 3/4;
  width: 63%;
  margin: 0 auto;
  box-shadow: inset 0 0 10px var(--gray-6);
  left: 49.69%;
  top: 50.1%;
  border-radius: 1px;
}

.event_dictations .name {
  position: absolute;
  bottom: -1.35em;
  font-family: var(--font-secondary);
  text-align: center;
  font-style: italic;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  font-size: 0.925em;
}

/*--------------------------------------------------
Event – Quote
--------------------------------------------------*/
.event_quote {
  background-attachment: fixed;
}

.event_quote::before {
  background-image: none;
  background-color: hsl(240, 60%, 8%);
  opacity: 0.8;
}

.event_quote_container {
  position: relative;
  z-index: 1;
  width: min(100%, 50em);
  text-align: center;
  margin: 0 auto;
}

.event_quote .gold_ring_cnt {
  max-width: var(--space-xxxl);
  margin: 0 auto var(--space-lg);
}

.event_quote .gold_ring::before {
  box-shadow: var(--box-shadow-white);
}

.event_quote :is(h2, h3, p, figcaption) {
  color: #fff;
}

.event_quote blockquote {
  margin: 0;
}

.event_quote blockquote p {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: var(--text-lg);
  text-wrap: balance;
}

/*--------------------------------------------------
Event – Pricing Tabs
--------------------------------------------------*/
.pricing_tabs_container {
  width: min(100%, 65em);
  margin: 0 auto;
}

.pricing_tabs {
  position: relative;
  transition: height 0.4s ease;
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.pricing_tabs > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  margin: 0 auto;
  box-shadow: none;
  border: 1px solid var(--gray-2);
}

.pricing_tabs > li.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/*----------------------------------------
pricing tabs toggle
----------------------------------------*/
.pricing_toggle {
  position: relative;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--gray-2);
  border-radius: 50px;
  padding: var(--space-xxxs);
  background: #fff;
  box-shadow: var(--box-shadow-white);
  width: min(100%, 27em);
  margin: 0 auto var(--space-lg);
}

/* Hide the inputs */
.pricing_toggle input[type="radio"] {
  display: none;
}

/* Style labels as toggle buttons */
.pricing_toggle label {
  padding: var(--space-xs) var(--space-xxxxs);
  cursor: pointer;
  z-index: 1;
  text-align: center;
  flex: 1;
  font-weight: 600;
  font-size: var(--text-body);
}

.pricing_toggle svg {
  opacity: 0.5;
  margin-right: var(--space-xxxs);
}

/* Slider background */
.pricing_toggle .slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  background: var(--color-accent);
  z-index: 0;
  transition: transform 0.3s ease;
}

/* Move slider */
.pricing_toggle input:nth-of-type(1):checked ~ .slider {
  transform: translateX(0%);
}

.pricing_toggle input:nth-of-type(2):checked ~ .slider {
  transform: translateX(100%);
}

.pricing_toggle input:nth-of-type(3):checked ~ .slider {
  transform: translateX(200%);
}

/* pricing tabs content
----------------------------------------*/
.pricing_tabs li .content {
  padding-block: 1em;
}

.pricing_tabs header .title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

/* pricing tabs price options
----------------------------------------*/
.pricing_tabs .price_options {
  --grid-space: 1em;
  width: min(100%, 28em);
  margin: 0;
  text-align: center;
}

.pricing_tabs .price_option .heading {
  font-weight: 800;
  text-wrap: balance;
  margin-bottom: 0;
}

.pricing_tabs .price_option .price {
  font-size: var(--text-xxxl);
  color: var(--event-color-accent);
  position: relative;
}

.pricing_tabs .price_option .price::before {
  content: "$";
  position: relative;
  font-size: var(--text-xxs);
  top: -0.5em;
  left: 0.25em;
}

/* single price option */
.pricing_tabs .price_options.single {
  text-align: left;
}

.pricing_tabs .price_options.single li {
  padding: var(--grid-space);
}

/* pricing tabs button
----------------------------------------*/
.pricing_tabs .content .btns {
  margin-block: var(--space-md) var(--space-lg);
}

.pricing_tabs .content .btns :is(.btn, .dropdown_btn) {
  margin: 0;
}

/* pricing tabs bullets
----------------------------------------*/
.pricing_tabs .bullets {
  padding-left: var(--space-sm);
}

.pricing_tabs .bullets li {
  margin-bottom: var(--space-xs);
}

.pricing_tabs .bullets svg {
  opacity: 0.5;
  margin-right: var(--space-xs);
  color: var(--event-color-accent-light);
}

/*--------------------------------------------------
Event – Modal
--------------------------------------------------*/
.event_modal .container {
  padding-inline: var(--space-xl);
}

.event_modal .btns {
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
}

.event_modal .btns span {
  font-size: var(--text-sm);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-xxs);
  display: block;
  letter-spacing: 0.125px;
}

.event_modal .copy_text_btn {
  margin: 0;
}

.event_modal .btns .copied_text {
  top: 110%;
  right: unset;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
}

.event_modal .event_btn {
  margin: 0;
}

/*--------------------------------------------------
Event – FAQ
--------------------------------------------------*/
.faq_list {
  width: min(100%, 45em);
  margin: var(--space-xl) auto;
}

.faq_list ._accordion header::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--gray-2);
}

.faq_list ._accordion header {
  padding: var(--space-md) 0;
}

/*--------------------------------------------------
Event – Current Styles
--------------------------------------------------*/

/* Summer – Event Banner
----------------------------------------*/
#summer .event_banner :where(.title, .subtitle, .dates p) {
  color: #fff;
}

#summer .event_banner::before {
  background-image: linear-gradient(to right, hsl(217, 90%, 14%) 0%, hsl(213, 80%, 20%) 45%, var(--transparent) 60%);
  opacity: 0.85;
  /* color: hsl(213, 81%, 21%); */
}

#summer .event_banner header {
  /* margin-inline: auto 0; */
  width: min(100%, 40em);
  /*outline: 3px dotted lightgray;*/
}

#summer .event_title_svg {
  display: block;
  width: min(100%, 14em);
  aspect-ratio: 5/1;
  margin: 0;
}

#summer .event_banner .subtitle {
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  font-weight: 400;
  text-wrap: balance;
  line-height: 1.45;
  margin-bottom: 1em;
}

/* Summer – Event Home Banner
----------------------------------------*/
#summer .event_home_banner header {
  width: min(100%, 30em);
}

#summer .event_home_banner .dates {
  --grid-space: var(--space-xxxs);
}

#summer .event_home_banner .dates h4 {
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-xxxxs);
  font-size: 1em;
  letter-spacing: 1px;
}

#summer .event_home_banner .btns {
  margin: var(--space-lg) 0 0;
}

/* Easter – Event Page Banner
----------------------------------------*/
#easter .event_page_banner {
  justify-content: flex-end;
}

#easter .event_page_banner header {
  width: min(100%, 30em);
}

#easter .event_page_banner .title {
  font-size: var(--text-xxxl);
  margin: 0;
}

#easter .event_page_banner .event_name {
  margin: 0;
  font-size: var(--text-body);
}

/*----------------------------------------------------------
Responsive Styles
----------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
  /*----------------------------------------
  Event – Banner
  ----------------------------------------*/

  /* Event – Hero Banner
  ----------------------------------------*/
  .event_banner {
    aspect-ratio: 1024/1365;
  }

  /* Event – Hero Page Banner
  ----------------------------------------*/
  .event_page_banner {
    aspect-ratio: 3/1;
  }

  /*----------------------------------------
  Event – Sticky Nav
  ----------------------------------------*/
  nav.event_nav {
    display: none;
  }

  .event_intro_quote {
    flex-direction: column;
  }

  /*----------------------------------------
  Event – Intro
  ----------------------------------------*/
  #about {
    padding: 0;
  }

  .event_intro_quote :is(.image, .content) {
    margin: 0 auto;
  }

  .event_intro_quote .image {
    order: 1;
    width: min(100%, 18em);
  }

  .event_intro_quote .image img {
    bottom: -2em;
  }

  .event_intro_quote .content {
    order: 2;
    width: 100%;
    max-width: 40em;
    padding-inline: 0;
  }

  /*----------------------------------------
  Event – Intro Letter
  ----------------------------------------*/
  .event_intro {
    flex-direction: column;
  }

  .event_intro :is(.images, .content) {
    width: min(100%, 40em);
    margin: 0 auto;
    padding-bottom: 0;
  }

  .event_letter {
    width: min(100%, 40em);
    margin: 0 auto;
  }

  /*----------------------------------------
  Event – Quote
  ----------------------------------------*/
  .event_quote {
    background-attachment: scroll;
  }

  /*----------------------------------------
  Event – Dictations
  ----------------------------------------*/
  .event_dictations {
    width: min(100%, 40em);
    margin-inline: auto;
  }

  .event_dictations li.col {
    width: calc(100% / 3);
    margin-bottom: var(--space-md);
  }

  /*----------------------------------------
  Event – Features
  ----------------------------------------*/
  .event_features li {
    flex-direction: column;
  }

  .event_features :is(.content, .image) {
    width: min(100%, 768px);
    margin: 0 auto;
  }

  .event_features :is(.image) {
    order: 1;
  }

  .event_features :is(.content),
  .event_features li:nth-child(2n) .content {
    order: 2;
  }

  /* Essentials – Easter 2026
  ----------------------------------------*/
  #summer .event_banner::before {
    background: linear-gradient(to bottom, hsl(217, 90%, 14%) 0%, hsl(213, 80%, 20%) 45%, var(--transparent) 60%);
    opacity: 1;
  }

  #summer .event_banner header {
    margin: 0 auto;
    text-align: center;
  }

  #summer :is(.event_title_svg, .event_home_banner .btns) {
    margin-inline: auto;
  }

  /* #1200px */
}

@media only screen and (max-width: 1024px) {
  .event_intro_about,
  .event_details_section {
    flex-direction: column;
  }

  /*----------------------------------------
  Event – Intro Letter
  ----------------------------------------*/
  .event_intro_about > .col {
    width: 100%;
  }

  .event_intro_about .content {
    -moz-column-count: 1;
         column-count: 1;
    width: min(100%, 40em);
    margin-inline: auto;
  }

  /*----------------------------------------
  Event – Highlights
  ----------------------------------------*/
  .event_highlights li.col {
    width: calc(100% / 2);
  }

  /*----------------------------------------
  Event – Details
  ----------------------------------------*/
  .event_details_section > .col {
    width: min(100%, 50em);
    margin: 0 auto;
    padding-bottom: 0;
  }

  .event_details_section > .col_minor::after {
    display: none;
  }

  .event_details_section > .col_major {
    padding-inline: 0;
  }
}

/* #1024px */

@media only screen and (max-width: 980px) {
  #event_intro {
    padding-top: var(--space-xxl);
  }

  /*----------------------------------------
  Event – Section Header
  ----------------------------------------*/
  .event_section_header {
    width: min(100%, 40em);
  }

  .event_section_header .title {
    font-size: var(--text-lg);
  }

  /* .event_section_header.special_header .title {
    letter-spacing: 0;
  } */

  .event_section_header .description {
    font-size: var(--text-body);
  }

  /*----------------------------------------
  Event – Features
  ----------------------------------------*/
  .event_features :is(.content, .image) {
    width: min(100%, 40em);
  }

  /*----------------------------------------
  Event – Pricing Tabs
  ----------------------------------------*/
  .pricing_tabs > li {
    flex-direction: column;
  }

  .pricing_tabs li .content {
    width: min(100%, 40em);
    padding-inline: 0;
    margin: 0 auto;
  }

  .pricing_tabs li header {
    text-align: center;
  }

  .pricing_tabs .content .btns :is(.btn, .dropdown_btn),
  .pricing_tabs .content .price_options {
    margin: 0 auto;
  }

  .pricing_tabs li .image {
    width: 100%;
    aspect-ratio: 2/1;
  }

  /* single price option */
  .pricing_tabs .price_options.single {
    text-align: center;
  }
}

/* #980px */

@media only screen and (max-width: 900px) {
  /*----------------------------------------
  Event – Banner
  ----------------------------------------*/
  .event_hero_banner .return_btn {
    top: var(--space-lg);
    left: var(--space-lg);
  }

  /* event page banner */
  .event_page_banner {
    aspect-ratio: 3/1;
  }
}

/* #900px */

@media only screen and (max-width: 768px) {
  /*----------------------------------------
  Event Page Banner
  ----------------------------------------*/
  .event_page_banner {
    justify-content: center;
  }

  #easter .event_page_banner::before {
    display: block;
    background-image: linear-gradient(to bottom, hsl(252 62 35), hsl(252 62 35));
    opacity: 0.65;
  }

  #easter .event_banner {
    justify-content: center;
  }
  #easter .event_page_banner header {
    margin: 0;
  }

  /* #768px */
}

@media only screen and (max-width: 600px) {
  /*----------------------------------------
  Event – Banner
  ----------------------------------------*/
  :is(.event_home_banner, .event_hero_banner) {
    /* aspect-ratio: 4/5  major third */
    /* aspect-ratio: 3/4; */
    aspect-ratio: 1/2;
  }

  .event_banner .dates {
    text-wrap: balance;
  }

  /* Event – Home Banner
  ----------------------------------------*/
  .event_home_banner {
    padding: var(--space-lg);
  }

  .event_home_banner .dropdown_btn :is(.dropdown_btn_toggle) {
    height: 3.5em;
    line-height: 3.5;
  }

  .event_home_banner .btns .dropdown_btn:first-child {
    z-index: 3;
  }

  /* Event – Hero Banner
  ----------------------------------------*/
  .event_hero_banner {
    padding-top: var(--space-xxl);
  }

  /*----------------------------------------
  Event – Clouds Frame
  ----------------------------------------*/
  .clouds_frame_top::before,
  .clouds_frame_bottom::after {
    background-image: url(/wp-content/uploads/2025/06/Clouds-Frame-Bottom-600x200-1.jpg);
    aspect-ratio: 3/1;
  }

  .wrapper.clouds_frame_top {
    padding-top: 10em;
  }

  .wrapper.clouds_frame_bottom {
    padding-bottom: 8em;
  }

  /*------------------------------
  Event Landing Page
  ------------------------------*/
  .event_highlights li.col,
  .event_details_section .event_details_list .content {
    width: 100%;
  }

  /*----------------------------------------
  Event – Features
  ----------------------------------------*/
  .event_features .image {
    max-width: 90%;
  }

  /*----------------------------------------
  Event – Details
  ----------------------------------------*/
  .event_details_section .event_details_list > .row {
    flex-direction: column;
  }

  .event_details_section .event_details_list .content {
    padding: var(--space-md) 0 0 0;
  }

  /* event details list images */
  .event_details_list li.cols_p4 .image {
    width: min(100%, 12em);
  }

  .event_details_list li.cols_gr .image {
    width: min(100%, 20em);
  }

  /* Essentials – summer 2026
  ----------------------------------------*/
  #summer .event_banner .title,
  #summer.lang_spa .event_banner .title {
    font-size: 2.5em;
  }

  #summer .event_banner .subtitle {
    font-size: var(--text-md);
  }

  #summer .event_banner .dates {
    font-size: var(--text-body);
  }

  #summer .event_home_banner .dates {
    font-size: 0.9em;
  }

  /* #600px */
}

@media only screen and (max-width: 480px) {
  /*----------------------------------------
  Event – Quote
  ----------------------------------------*/
  .event_quote_container blockquote p {
    text-align: left;
  }

  /*----------------------------------------
  Event – Modal
  ----------------------------------------*/
  .event_modal .container {
    padding-top: var(--space-lg);
    padding-inline: var(--space-md);
  }

  .event_modal .content {
    padding: 0;
    text-align: left;
  }

  /*----------------------------------------
  Event Current
  ----------------------------------------*/

  /* Event – Page Banner 
  ----------------------------------------*/
  .event_page_banner {
    aspect-ratio: 1.618/1;
  }

  #summer .event_page_banner .title {
    font-size: var(--text-xl);
  }
}

/* #480px */

@media only screen and (max-width: 400px) {
}
/*--------------------------------------------------
Component – Copy Text Button
--------------------------------------------------*/
.copy_text_btn {
  display: block;
  margin: 0;
  border-radius: var(--space-xs);
  background-color: var(--gray-1);
  border: 1px solid var(--gray-3);
  padding: var(--space-sm) 1em;
  position: relative;
  cursor: pointer;
  transition: var(--transition);
}

.copied_text {
  font-size: var(--text-sm);
  position: absolute;
  right: -4em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-7);
}

.copy_text_btn:is(:hover, :active) {
  background-color: var(--gray-1);
  box-shadow: none;
}

/*--------------------------------------------------
Component – Accordion New
--------------------------------------------------*/
._accordion {
  margin-bottom: var(--space-md);
}

/* Accordion header
------------------------------*/
._accordion header {
  position: relative;
}

._accordion header .title {
  width: min(100%, 90%);
}

._accordion .accordion_btn {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--transparent);
  border: none;
  box-shadow: none;
  padding: 0;
  transition: var(--transition);
  cursor: pointer;
}

._accordion .panel {
  margin: -5px auto 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 2.5%;
  height: 0;
  transition: var(--transition);
}

/* Accordion icon
------------------------------*/
._accordion .accordion_btn::before,
._accordion .accordion_btn::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 0.35em;
  background-color: var(--event-color-accent-light);
  position: absolute;
  right: 0;
  top: 1.8em;
  border-radius: var(--space-xxxs);
  transition: var(--transition);
}

._accordion .accordion_btn::before {
  transform: rotate(45deg);
  right: 0.885em;
}

._accordion .accordion_btn::after {
  transform: rotate(-45deg);
}

/* Accordion Active
------------------------------*/
._accordion .accordion_content.active .panel {
  padding: 2.5%;
  opacity: 1;
  height: auto;
  position: relative;
}

._accordion .accordion_content.active .accordion_btn::before,
._accordion .accordion_content.active .accordion_btn::after {
  right: 10px;
}

/*--------------------------------------------------
Timeline
--------------------------------------------------*/
.page-template-timeline .page_header_cnt {
  margin: 0;
}

.timeline {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.timeline_section::after {
  content: "";
  display: block;
  position: absolute;
  width: 5px;
  height: calc(100% - var(--space-xxxl));
  background-color: hsl(210, 40%, 50%);
  opacity: 0.125;
  top: var(--space-xxxl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.timeline_section {
  margin: 0 auto;
  position: relative;
  padding-top: var(--space-xxl);
}

.timeline_section_title {
  text-align: center;
  margin: 0 auto var(--space-lg);
  font-weight: 900;
}

.timeline_block {
  width: 100%;
  position: relative;
  margin: 0 0 var(--space-xxl);
}

.timeline_block:last-child {
  margin-bottom: 0;
}

.timeline_section:last-child .timeline_block:last-child {
  margin-bottom: var(--space-xl);
}

.timeline_block:nth-child(odd) .timeline_text_container::before,
.timeline_block:nth-child(even) .timeline_text_container::before {
  content: "";
  position: absolute;
  top: 30px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transition: var(--transition);
}

.timeline_block:nth-child(odd) .timeline_text_container::before {
  right: -3.5%;
  border-left: 20px solid #fff;
}

.timeline_block:nth-child(even) .timeline_text_container::before {
  left: -3.5%;
  border-right: 20px solid #fff;
}

.timeline_text_container {
  background-color: #fff;
  width: 43.5%;
  box-shadow: var(--box-shadow);
  padding: var(--space-lg);
  border-radius: var(--box-border-rad);
  position: relative;
  will-change: transform;
  z-index: 1;
  text-decoration: none;
  transition: var(--transition);
}

.timeline_block:nth-child(2n) {
  flex-direction: row-reverse;
}

.timeline_time {
  position: absolute;
  left: 130%;
  top: 22px;
  width: 100%;
  font-size: var(--text-md);
  opacity: 0.8;
  font-weight: 600;
  color: var(--gray-8);
}

.timeline_block:nth-child(2n) .timeline_time {
  left: -130%;
  text-align: right;
}

.timeline_event_hd {
  font-weight: 900;
  margin: 0 auto var(--space-xxs);
  text-wrap: balance;
}

.timeline_event_sub {
  margin: 0 0 var(--space-sm);
  font-weight: 400;
  color: var(--color-primary-light);
}

.timeline_info h3 {
  font-weight: 900;
  font-size: var(--text-md);
  margin: var(--space-md) 0 var(--space-xs);
}

.timeline_info h4 {
  margin: 1em 0 0.125em;
}

.timeline_info:empty,
.timeline_event_sub:empty {
  display: none;
}

/* Timeline Details Container
------------------------------*/
.timeline_info p {
  margin: 0 auto 0.25em;
  color: var(--gray-8);
  font-size: 1em;
}

/* Timeline Image
------------------------------*/
.timeline_img {
  width: 5em;
  height: 5em;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
  z-index: 1;
  opacity: 0.9;
  will-change: transform;
}

.timeline_img img {
  border-radius: 100%;
}

.timeline_img_hidden,
.timeline_content_hidden {
  opacity: 0;
}

.timeline_img_bounce {
  animation: img_bounce 1s;
}

.timeline_content_bounce {
  animation: content_bounce 1s;
}

/* Timeline Transitions
------------------------------*/

/* timeline block animations */
@keyframes img_bounce {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }
}

@keyframes content_bounce {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  60% {
    opacity: 1;
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* timeline nav
------------------------------*/
.timeline_nav {
  --grid-space: var(--space-sm);
  position: sticky;
  position: -webkit-sticky;
  top: var(--space-md);
  margin: -1em auto var(--space-xl);
  /* background-color: var(--color-accent-lighter); */
  background-color: #fff;
  border-radius: var(--space-xl);
  z-index: 9999;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--gray-2);
}

.timeline_nav li {
  flex-grow: 1;
  gap: 1em;
}

.timeline_nav ul a {
  text-decoration: none;
  text-align: center;
  display: block;
  padding: var(--space-sm);
  color: var(--gray-10);
  border-radius: var(--space-xl);
  font-weight: 600;
  cursor: pointer;
}

.timeline_nav ul a:is(:hover) {
  background-color: var(--color-accent-lighter);
}

/* timeline top buttons
------------------------------*/
ul.timeline_top_btns {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: min(100%, 20em);
  --grid-space: var(--space-xs);
}

ul.timeline_top_btns .btn {
  margin: 0;
}

/*----------------------------------------
Slider
----------------------------------------*/
.slider_container {
  --slider-duration: 10000ms; /*has to match 'transitionTime' in JS*/
  --active-index: 0;
  --slider-height: 400px;
  position: relative;
}

.slider {
  width: 100%;
  min-height: var(--slider-height);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: var(--box-border-rad);
  box-shadow: var(--box-shadow);
}

.slider > ul {
  height: 100%;
  transition: var(--transition);
}

.slider .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
  transition: opacity 1.5s ease-in-out;
}

.slider .slide.active {
  opacity: 1;
  z-index: 1;
}

.slider .slide .image {
  width: 100%;
  height: 100%;
}

.slider .slide .content {
  position: absolute;
  width: min(100%, 25em);
  top: 50%;
  left: 5%;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: var(--box-border-rad);
  padding: var(--space-lg);
  transform: translateY(-50%);
}

.slider .slide .title {
  font-size: var(--text-lg);
  font-weight: 900;
  line-height: 1.25;
  text-wrap: balance;
}

.slider .slide .description {
  margin: 0;
  font-size: 1em;
}

.slider .slide .btns {
  width: 100%;
  margin-block: 1em 0;
}

.slider .slide .btn {
  box-shadow: var(--box-shadow-hover);
  margin: 0;
}

.slider .slide .dropdown_btn {
  margin: 0;
}

.slider .slide .dropdown_btn .menu {
  box-shadow: var(--box-shadow-white);
}

/*----------------------------------------
Slider – Controls
----------------------------------------*/
.slider_controls {
  display: flex;
  justify-content: center;
}

/* Slider – Controls – Shortcuts
----------------------------------------*/
.slider_controls .shortcuts {
  background-color: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 100px;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  top: var(--space-md);
}

.slider_controls .shortcut {
  width: var(--space-sm);
  height: var(--space-sm);
  background-color: var(--gray-2);
  padding: 0;
  margin: 0;
  border-radius: 100%;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: width 0.25s ease-in, border-radius 0.25s ease-in;
}

.slider_controls .shortcut::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background-color: var(--color-accent);
}

/* Active shortcut becomes pill */
.slider_controls .shortcut.active {
  width: var(--space-xl);
  border-radius: 10px;
}

/* Only the active/resetting one animates */
.slider_controls .shortcut.active.is-resetting::after {
  animation: animate-progress var(--slider-duration) linear forwards;
}

@keyframes animate-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Slider – Controls – Next/Prev Buttons
----------------------------------------*/
.slider_nav button {
  width: 1em;
  aspect-ratio: 1;
  padding: var(--space-sm);
  font-size: var(--text-xl);
  background-color: #fff;
  border: 1px solid var(--gray-2);
  border-radius: 100%;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  transition: var(--transition);
}

.slider_nav button svg {
  position: absolute;
  color: var(--gray-6);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.slider_nav .prev_btn {
  left: -25px;
}

.slider_nav .next_btn {
  right: -25px;
}

.slider_nav button:hover {
  background-color: var(--color-accent);
}

.slider_nav button:hover svg {
  color: var(--gray-10);
}

/*--------------------------------------------------
Responsive Styles 
--------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  /*----------------------------------------
  Timeline 
  ----------------------------------------*/
  .timeline_nav {
    top: 5em;
  }

  .timeline_section {
    padding-top: 9em;
  }

  .timeline_section::after {
    top: 15em;
  }
}

@media only screen and (max-width: 900px) {
  /*----------------------------------------
  Timeline 
  ----------------------------------------*/
  .timeline_section::after {
    left: 2.5em;
  }

  .timeline_section_title {
    text-align: left;
  }

  .timeline_block,
  .timeline_block:nth-child(2n) {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 6em;
  }

  .timeline_block:nth-child(2n) .timeline_text_container::before,
  .timeline_block:nth-child(2n + 1) .timeline_text_container::before {
    left: -2.5%;
    right: unset;
    border-right: 20px solid #fff;
    border-left: unset;
  }

  .timeline_img {
    left: 0;
    position: relative;
    transform: none;
  }

  .timeline_time,
  .timeline_block:nth-child(2n) .timeline_time {
    left: var(--space-md);
    top: -2em;
    text-align: left;
  }

  .timeline_text_container {
    width: min(100%, min(100%, calc(100% - 7em)));
  }

  /*----------------------------------------
  Components – Slider
  ----------------------------------------*/
  .slider {
    min-height: unset;
  }

  .slider > ul {
    display: flex;
    height: auto;
    position: static;
    transition: transform 0.5s ease;
    transform: translateX(calc(var(--active-index) * -100%));
  }

  .slider .slide {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    height: auto;
    opacity: 1;
    z-index: auto;
    transition: none;
    background-color: #fff;
  }

  .slider .slide .image {
    height: auto;
    aspect-ratio: 3/1; /* TO-DO: modify once there's a new ACF mobile image */
  }

  .slider_controls {
    gap: var(--space-lg);
    margin-top: var(--space-lg);
  }

  .slider .slide .content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    z-index: 2;
    background-color: #fff;
    padding: var(--space-lg) var(--space-md);
  }

  .slider_nav {
    display: flex;
    gap: var(--space-xs);
  }

  .slider_nav button:is(.prev_btn, .next_btn) {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
  }

  .slider_controls .shortcuts {
    top: auto;
  }

  /* #900px */
}

@media only screen and (max-width: 480px) {
  /*----------------------------------------
  Timeline 
  ----------------------------------------*/

  .timeline_section::after {
    left: 50%;
  }

  .timeline_section_title {
    text-align: center;
  }

  .timeline_text_container {
    width: 100%;
  }

  .timeline_img {
    margin: 0 auto var(--space-lg);
    width: var(--space-xxl);
    height: var(--space-xxl);
  }

  /* #480px */
}
:root {
  --color-success: hsl(156, 73%, 45%);
  --color-success-light: hsl(158, 60%, 95%);
  --color-success-dark: hsl(157, 75%, 40%);
  --color-warning: hsl(38, 98%, 64%);
  --color-warning-light: hsl(38, 98%, 95%);
  --color-warning-dark: hsl(37, 72%, 58%);
  --color-alert: #fb4246;
  --color-alert-light: #fc8d8e;
  --color-alert-dark: #ca3638;
}

/*------------------------------------------------------------
General Styles – ToDo: Move after to main styles
------------------------------------------------------------*/
.btn_disable {
  background-color: var(--gray-1);
  color: var(--gray-6);
  border-color: var(--gray-2);
  background-image: none;
  pointer-events: none;
}

/*------------------------------------------------------------
SAP Login
------------------------------------------------------------*/
.sap_login {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*----------------------------------------
SAP Login – Top Buttons
----------------------------------------*/
.sap_login .btns_top {
  width: min(90%, 1280px);
  margin-block: auto;
  position: absolute;
  top: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sap_login .tsl_logo {
  display: block;
  width: 6em;
  aspect-ratio: 5/4;
}

.sap_login .btns_top button {
  margin: 0;
}

/*----------------------------------------
SAP Login – Login Box
----------------------------------------*/
.sap_login .login_box {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  width: min(100%, 28em);
  padding: 4em var(--space-lg) var(--space-lg);
  border-radius: var(--space-md);
  position: relative;
}

.sap_login .login_box > img {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: var(--space-xxl);
  border-radius: 100%;
  border: 5px solid #fff;
}

/* Header
----------------------------------------*/
.sap_login .login_box header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.sap_login .login_box header .eyebrow {
  color: var(--color-blue);
  letter-spacing: 1px;
}

.sap_login .login_box header .title {
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 900;
  font-family: var(--font-tertiary);
  margin: 0;
}

.sap_login .login_box header .subtitle {
  font-size: var(--text-md);
  text-transform: uppercase;
  margin: 0;
}

.sap_login .note {
  font-size: 1em;
  text-align: center;
  margin: 0 0 var(--space-md);
}

/*----------------------------------------
Login SSO Button
----------------------------------------*/
#login_form .login_sso_btn a,
.sap_login .login_sso_btn a {
  margin: 1em auto;
  font-size: 1em;
  background-image: linear-gradient(45deg, hsl(225 73% 57%) 40%, hsl(247 62% 53%) 80%);
  height: 3em;
  line-height: 3;
  display: block;
  border-radius: 100px;
  border: 2px solid hsl(247 62% 90%);
  box-shadow: 4px 8px 16px hsla(225 80% 20%/0.25);
  text-align: center;
  position: relative;
  transition: all 1s ease 0s;
}

#login_form .login_sso_btn a > i,
.sap_login .login_sso_btn a > i {
  background: none !important;
  border: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  font-size: 1em !important;
  margin: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#login_form .login_sso_btn a > i span,
.sap_login .login_sso_btn a > i span {
  font-size: 1em;
  flex: 1;
  margin: 0 !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

#login_form .login_sso_btn a > i::before,
.sap_login .login_sso_btn a > i::before {
  position: absolute;
  left: 1.25em;
  opacity: 0.75;
  font-size: 1em;
}

#login_form .login_sso_btn a:hover,
.sap_login .login_sso_btn a:hover {
  background-image: linear-gradient(45deg, hsl(225 73% 60%) 20%, hsl(247 60% 55%) 60%);
}

/*----------------------------------------
SAP Login – Admin Login
----------------------------------------*/
.sap_login .modal .container {
  width: min(100%, 25em);
  height: auto;
  padding: var(--space-xl);
}

.sap_login #loginform > p {
  margin: 0 auto var(--space-sm);
}

.sap_login #loginform > p > label,
.sap_login #loginform > p > input {
  width: 100%;
  display: block;
}

.sap_login #loginform > p > input {
  filter: none;
}

.sap_login #loginform .login-password,
.sap_login #loginform .login-username {
  position: relative;
}

.sap_login #loginform .login-password::before,
.sap_login #loginform .login-username::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 20px;
  opacity: 0.125;
  background-position: center;
  background-repeat: no-repeat;
  top: 2.5em;
  left: 0.75em;
}

.sap_login #loginform .login-password::before {
  background-image: url(/wp-content/uploads/2021/08/key-regular.svg);
}

.sap_login #loginform .login-username::before {
  background-image: url(/wp-content/uploads/2021/08/user-regular.svg);
}

.sap_login #loginform .login-username input,
.sap_login #loginform .login-password input {
  background-color: #fff;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 2.75em;
  border: 2px solid #d2dee8;
  border-radius: var(--space-sm);
}

#loginform .login-username label,
#loginform .login-password label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  margin-bottom: var(--space-xxxxs);
}

/*------------------------------
Login submit button
------------------------------*/
.sap_login #loginform .login-submit {
  margin: var(--space-md) auto 0;
}

#loginform #wp-submit {
  background-image: var(--gradient-cta);
  border-radius: 100px;
  padding: 0;
  height: 3em;
  line-height: 3;
  border: none;
  box-shadow: var(--box-shadow);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

#loginform #wp-submit:hover {
  transform: translateY(calc(-1 * var(--box-hover-move))) scale(var(--box-hover-scale));
  box-shadow: var(--box-shadow-hover);
}

#loginform #wp-submit:active {
  transform: translateY(calc(var(--box-hover-move))) scale(1);
  box-shadow: var(--box-shadow);
}

.login-remember {
  font-size: var(--text-base);
  opacity: 0.75;
  padding-right: 1em;
}

.login-remember input {
  margin-right: var(--space-xxs);
}

/*------------------------------------------------------------
Dashboard
------------------------------------------------------------*/
.dashboard {
  position: relative;
}

/*----------------------------------------
Dashboard – Badges
----------------------------------------*/
.dashboard .badges {
  gap: var(--space-xs);
  position: absolute;
  top: 2.5%;
  right: 5%;
  justify-content: flex-end;
}

.dashboard .badge {
  width: min(100%, var(--space-xl));
  position: relative;
}

.dashboard .badge img {
  aspect-ratio: 1/1;
  width: min(100%, var(--space-xl));
  border-radius: 100%;
  box-shadow: var(--box-shadow);
  border: 2px solid #fff;
  background-color: #fff;
}

.dashboard .badge .label {
  opacity: 0;
  position: absolute;
  top: -2.25em;
  right: 1.25em;
  width: 8em;
  background-color: var(--color-blue);
  color: #fff;
  border-radius: var(--space-xxs);
  padding: 0.25em;
  text-align: center;
  font-size: var(--text-sm);
  transition: var(--transition);
  z-index: 1;
}

.dashboard .badge .label::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.25em solid transparent;
  border-right: 0.25em solid transparent;
  border-top: 0.5em solid var(--color-blue);
  position: absolute;
  bottom: -0.5em;
  right: 0.5em;
  z-index: 2;
}

.dashboard .badge:hover .label {
  opacity: 1;
}

.dashboard .badge.role-kof-active img {
  border-color: var(--color-success);
}

.dashboard .badge.role-kof-inactive img {
  border-color: var(--color-warning);
}

/*----------------------------------------
Dashboard – Banner
----------------------------------------*/
.dashboard .intro_banner {
  position: relative;
  width: 100%;
  margin: 0;
  background-image: linear-gradient(-45deg, hsl(272, 39%, 52%) 0%, hsl(260, 49%, 40%) 50%);
  align-items: center;
  min-height: 16em;
}

/* Dashboard Banner – Header
----------------------------------------*/
.dashboard .intro_banner header {
  width: min(100%, 60%);
}

.dashboard .intro_banner header :is(.title, .description) {
  color: #fff;
}

.dashboard .intro_banner header a {
  color: var(--color-accent);
}

/* Dashboard Banner – Image
----------------------------------------*/
.dashboard .intro_banner .image {
  padding: 0;
  position: absolute;
  bottom: -0.5em;
  right: 5%;
  width: 16em;
}

.dashboard .intro_banner .image svg,
.dashboard .intro_banner .image image {
  width: 100%;
  height: auto;
}

/*----------------------------------------
Dashboard – Account Details
----------------------------------------*/
.dashboard .account ul {
  /* gap: var(--space-md); */
  padding: var(--space-md);
  border: 1px solid var(--gray-1);
  align-items: center;
  border-radius: 1em;
  margin-block: var(--space-md) 0;
  overflow: visible;
}

.dashboard .account li {
  flex: 1;
}

.dashboard .account li span {
  display: block;
}

.dashboard .account li span:nth-child(1) {
  color: var(--gray-6);
  font-size: var(--text-sm);
}

.dashboard .account li span:nth-child(2),
.dashboard .account li button {
  font-size: var(--text-md);
  font-weight: 900;
  color: var(--color-text);
}

.dashboard .account li button {
  margin: 0;
  border: none;
  padding: var(--space-xxs);
  border-color: var(--gray-1);
}

.dashboard .account li button svg {
  margin-left: var(--space-xs);
  color: var(--gray-3);
  font-size: var(--text-sm);
  pointer-events: none;
}

.dashboard .account li button .copied_text {
  font-size: var(--text-xs);
  color: var(--gray-6);
  font-weight: 400;
}

/*----------------------------------------
Dashboard – Subscriptions
----------------------------------------*/
.dashboard .subscriptions {
  position: relative;
}

/*----------------------------------------
Subscriptions – Snapshot Refresh
----------------------------------------*/
.snapshot_refresh {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 7em);
}

.snapshot_refresh button {
  margin: 0;
}

/*----------------------------------------
Subscriptions – Cards
----------------------------------------*/
.dashboard .cards {
  margin-block: var(--space-md) 0;
  border: 1px solid var(--gray-1);
  border-radius: calc(1em + var(--space-sm));
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-md);
  overflow: visible;
}

.dashboard .cards li {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.dashboard .cards li:not(:last-of-type)::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--gray-1);
  position: absolute;
  bottom: -1em;
  left: 0;
}

.dashboard .cards .image {
  width: min(10%, var(--space-xxl));
  aspect-ratio: 1/1;
  border-radius: var(--space-sm);
}

/* Subscriptions Cards – Content
----------------------------------------*/
.dashboard .cards .content {
  padding: var(--space-md);
  position: relative;
}

.dashboard .cards .heading {
  width: min(100%, 27%);
  padding-left: var(--space-xxs);
}

.dashboard .cards .name {
  font-weight: 900;
  font-size: var(--text-md);
  margin: 0;
}

.dashboard .cards .sublabel {
  color: var(--gray-6);
}

/* Subscriptions Cards – Details
----------------------------------------*/
.dashboard .cards .details {
  align-items: flex-end;
  width: min(100%, 40%);
  justify-content: space-between;
  text-align: center;
  gap: 1em;
}

.dashboard .cards .details > * {
  flex: 1;
}

/* Subscriptions – Expiration
----------------------------------------*/
/* .dashboard .cards .details .expiration {} */

.dashboard .cards .details .expiration span:last-child {
  font-weight: 900;
  display: block;
}

/* Subscriptions Cards – Price
----------------------------------------*/
/* .dashboard .cards .details .price {} */

.dashboard .cards .details .price span:first-child {
  font-weight: 900;
  font-size: var(--text-lg);
}

.dashboard .cards .details .price span:last-child,
.dashboard .cards .details .expiration span:first-child {
  color: var(--gray-6);
  font-size: var(--text-sm);
}

/* Subscriptions Cards – Status
----------------------------------------*/
.dashboard .cards .status {
  position: relative;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-xxs) 0;
  border-radius: 1em;
}

.dashboard .cards .status svg {
  border-radius: 100%;
  padding: 0.125em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 1/1;
  left: 0.75em;
  font-size: 0.9em;
  color: #fff;
}

.dashboard .cards .status.status_active {
  background-color: var(--color-success-light);
  color: var(--color-success-dark);
}

.dashboard .cards .status.status_inactive {
  background-color: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.dashboard .cards .status.status_active svg {
  background-color: var(--color-success-dark);
}

.dashboard .cards .status.status_inactive svg {
  background-color: var(--color-warning-dark);
}

/* Subscriptions Cards – Action
----------------------------------------*/
.dashboard .cards .action {
  width: min(100%, 20%);
}

.dashboard .cards .renew_btn {
  margin: 0 auto;
}

.dashboard .cards .action .note {
  text-align: center;
  margin: 0 auto;
}

.dashboard .cards .action .note svg {
  opacity: 0.5;
  margin-right: var(--space-xs);
}

/*--------------------------------------------------
Responsive Styles
--------------------------------------------------*/
@media only screen and (max-width: 900px) {
  /*----------------------------------------
  Dashboard
  ----------------------------------------*/

  .dashboard .badges {
    position: relative;
    top: 0;
    right: 0;
    margin-block: -1em 1em;
  }

  /* Dashboard – Banner
  ----------------------------------------*/
  .dashboard .intro_banner {
    padding: var(--space-lg);
  }

  .dashboard .intro_banner .image {
    display: none;
  }

  .dashboard .intro_banner header {
    width: 100%;
    padding: 0;
  }

  /* Dashboard – Subscriptions
  ----------------------------------------*/
  .dashboard .cards {
    gap: 1em;
    justify-content: space-between;
    margin-top: var(--space-xxl);
    flex-direction: row;
  }

  .dashboard .cards li {
    flex-direction: column;
    position: relative;
    overflow: visible;
    padding-block: 3em 1em;
    margin-bottom: var(--space-xl);
    flex: 0 0 calc((100% / 2) - 1em);
  }

  .dashboard .cards li:not(:last-of-type)::after {
    display: none;
  }

  .dashboard .cards .image {
    width: var(--space-xxl);
    border-radius: 100%;
    position: absolute;
    top: -2.5em;
  }

  .dashboard .cards .heading {
    width: 100%;
    padding: 0;
    text-align: center;
    margin-block: 1em;
  }

  .dashboard .cards .name {
    width: 100%;
  }

  .dashboard .cards .details {
    flex-direction: column;
    gap: var(--space-md);
  }

  .dashboard .cards .details > * {
    width: 100%;
    flex: auto;
  }

  .dashboard .cards .action {
    width: 100%;
    margin-block: 1em;
  }

  /* #900px */
}

@media only screen and (max-width: 768px) {
  /*----------------------------------------
   Dashboard
  ----------------------------------------*/
}

@media only screen and (max-width: 600px) {
  /*----------------------------------------
   Dashboard
  ----------------------------------------*/

  /* Dashboard – Subscriptions
  ----------------------------------------*/
  .dashboard .cards {
    flex-direction: column;
    gap: var(--space-md);
  }

  .dashboard .cards li {
    width: 100%;
  }

  .dashboard .cards li:not(:last-of-type)::after {
    display: block;
    bottom: 0;
  }

  /* Dashboard – Account Details
  ----------------------------------------*/
  .dashboard .account ul {
    gap: var(--space-md);
    flex-direction: column;
    align-items: flex-start;
  }

  /* 600px */
}
/*------------------------------------------------------------
WPForms – Donate
------------------------------------------------------------*/
/* .wpforms-container .wpforms-field-text.wpforms-field-readonly {} */


.wpforms-container .wpforms-field-payment-single.wpforms-field-readonly,
.wpforms-container .wpforms-field-text.wpforms-field-readonly,
.wpforms-container .wpforms-field-name.wpforms-field-readonly,
.wpforms-field-email.wpforms-field-readonly {
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/*------------------------------------------------------------
TSL Donate
------------------------------------------------------------*/
:is(.page-template-donate-main, .page-template-donate-payment-options) :is(#content_wp, #content_cnt) {
  width: 100%;
  left: 0;
  padding: 0;
}

/* donate hero banner
----------------------------------------*/
.donate_hero_banner header {
  width: min(100%, 35em);
}

.donate_hero_banner header .title {
  font-family: var(--font-tertiary);
}

/* donate button
----------------------------------------*/
.donate_btn {
  padding: 0;
  background-image: linear-gradient(45deg, var(--event-color-accent), var(--event-color-accent-light));
  color: #fff;
  font-weight: 900;
  border: 1px solid var(--event-color-accent-dark);
  box-shadow: 4px 8px 16px hsla(320, 60%, 40%, .15);
}

.donate_btn:is(:hover, :active, :visited, :focus) {
  color: #fff;
}

.donate_form {
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 auto;
}

/*----------------------------------------
Fund Cards
----------------------------------------*/
.donate_funds {
  padding: 0 var(--space-xl) 0 0;
  width: min(100%, 70%);
  margin-inline: var(--grid-space) 0;
}

.fund_cards li.box {
  padding: 0;
  margin-bottom: var(--space-xl);
}

.fund_cards .image {
  aspect-ratio: 1.618/1;
}

.fund_cards header {
  margin-bottom: var(--space-sm)
}

.fund_cards header .title {
  font-weight: 900;
}

.fund_cards header .eyebrow {
  font-weight: 600;
}

.fund_cards .description {
  font-size: 1em;
}

/*----------------------------------------
fund cards buttons 
----------------------------------------*/
.fund_cards .btns {
  margin-top: var(--space-lg);
  width: min(100%, 25em);
  justify-content: space-between;
  align-items: center;
}


/* fund card amount field 
----------------------------------------*/
.fund_cards .amount_field_container {
  position: relative;
  width: min(100%, 60%);
}

.fund_cards .amount_field_container input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  width: 100%;
  font-size: var(--text-body);
  border-radius: var(--space-xs);
}

.fund_cards .amount_field_container :is(.pre_input, .post_input) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-4);
  font-weight: 600;
}

.fund_cards .amount_field_container .pre_input {
  left: var(--space-md)
}

.fund_cards .amount_field_container .post_input {
  right: var(--space-md)
}

.fund_cards .btns .btn {
  margin: 0;
  width: min(100%, 35%);
  border-radius: var(--space-xs);
  height: 3em;
  line-height: 3;
}

/*----------------------------------------
donate Summary
----------------------------------------*/
.donate_summary {
  position: sticky;
  position: -webkit-sticky;
  top: var(--space-xl);
  overflow: visible;
  /* -webkit-align-self: flex-start;
  -ms-align-self: flex-start;
  align-self: flex-start; */
  width: min(20em, 25%);
}

/* donate summary logo 
----------------------------------------*/
.donate_summary .logo_container {
  aspect-ratio: 1/1;
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  width: var(--space-xl);
  background-color: #fff;
  border-radius: 100%;
}

.donate_summary .logo {
  aspect-ratio: 1/1;
  display: block;
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 100%;
  background-size: 85%;
}

/* donate summary header
----------------------------------------*/
.donate_summary header {
  margin-block: var(--space-md)
}

.donate_summary .name {
  text-align: center;
  font-weight: 900;
  margin-bottom: 0;
}

/* donate summary button
----------------------------------------*/
.donate_summary .donate_btn {
  width: 100%;
  margin: 0 auto
}

/* donate total
----------------------------------------*/
#donate_total {
  text-align: center;
  font-weight: 900;
  font-size: var(--text-xxl);
  margin: 0 auto;
  position: relative;
  display: table;
}

#donate_total::before {
  content: "$";
  font-size: .5em;
  position: absolute;
  left: -15px;
  top: 10px;
  font-weight: 600;
}

/* donate funds reset button
----------------------------------------*/
.reset_btn {
  padding: var(--space-xs) 1em;
  background-color: var(--gray-1);
  color: var(--gray-10);
  border-radius: var(--space-lg);
  font-size: .875em;
  margin: 0 0 1em auto;
  border-color: var(--gray-2);
  cursor: pointer;
}

/* donate funds list
----------------------------------------*/
#donate_list {
  margin: 0 auto;
}

#donate_list li {
  height: 0;
  opacity: 0;
  transition: var(--transition);
  justify-content: space-between;
  font-size: .925em;
  color: var(--gray-6);
}

#donate_list li span:first-child {
  width: min(100%, 75%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* when input has value other than 0 */
#donate_list li.listed {
  height: auto;
  opacity: 1;
  border-bottom: 1px solid var(--gray-1);
  margin-bottom: var(--space-xs);
}

/*----------------------------------------
Donate Fee Box
----------------------------------------*/
.donate_summary .fee_box_cnt {
  --grid-space: .25em;
  position: relative;
  align-items: center;
  padding: var(--space-xs);
  margin-block: 1em var(--space-sm);
  border-radius: var(--space-sm);
  background-color: var(--color-primary-lightest);
}

.donate_summary .fee_box_cnt label {
  cursor: pointer;
  padding-block: var(--space-sm);
}

.donate_summary .fee_box_cnt input {
  cursor: pointer;
  margin-right: var(--space-xxs);
  accent-color: var(--donate-color-green)
}

.donate_summary .fee_box_cnt:has(input:checked) {
  background-color: var(--donate-color-bubbles)
}

/*---------------------------------------- 
Fee Box Tooltip 
----------------------------------------*/
.donate_summary .tooltip {
  line-height: 1;
}

.donate_summary .tooltip .icon {
  background-color: #fff;
  border: 1px solid var(--gray-2);
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
}

.donate_summary .tooltip .icon svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: .8em;
}

.donate_summary .tooltip .label {
  opacity: 0;
  position: absolute;
  left: -15em;
  width: 14em;
  background-color: #fff;
  padding: var(--space-xs);
  border-radius: var(--space-sm);
  box-shadow: var(--box-shadow-white);
  font-size: .9em;
  line-height: 1.35;
  top: -1.65em;
}

.donate_summary .tooltip .label::after {
  content: "";
  border-top: 10px solid transparent;
  border-left: 15px solid #fff;
  border-bottom: 10px solid transparent;
  position: absolute;
  right: -1em;
  top: 2.65em;
}

.donate_summary .tooltip .label.show {
  opacity: 1;
  visibility: visible;
}


/* donate form error
----------------------------------------*/
.form_error {
  position: relative;
  margin-bottom: var(--space-xl);
  padding: 1em 1em 1em var(--space-xl);
  border-left: 8px solid var(--event-color-accent-light);
  border-radius: var(--space-xxs);
  background-color: hsl(320, 85%, 95%);
  box-shadow: none;
}

.form_error svg {
  position: absolute;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: var(--text-lg);
  color: var(--event-color-accent);
}

#donate .form_error {
  display: none
}

#donate .form_error.show_msg {
  display: block
}

/*--------------------------------------------------
Dots Loader
--------------------------------------------------*/
.page_loader {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.dots_loader {
  width: 4em;
  aspect-ratio: 1.154;
  --dot: no-repeat radial-gradient(farthest-side, var(--color-primary) 90%, var(--transparent));
  background: var(--dot) 50% 0, var(--dot) 0 100%, var(--dot) 100% 100%;
  background-size: 44% calc(44%*1.154);
  animation: rotateDots 1s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dots_loader::before {
  content: "";
  width: 150%;
  aspect-ratio: 1/1;
  border: .5em solid var(--color-primary);
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}

/*----------------------------------------
White Dots Loader
----------------------------------------*/
.page_loader:has(.dots_loader.dots_white) {
  background: radial-gradient(circle, hsl(210, 77%, 46%), hsl(221, 72%, 40%) 35%, hsl(221, 67%, 30%) 82%)
}

.dots_loader.dots_white {
  --dot: no-repeat radial-gradient(farthest-side, #fff 90%, var(--transparent));
}

.dots_loader::before {
  border-color: #fff;
}

@keyframes rotateDots {
  50%, 100% {
    background-position: 100% 100%, 50% 0, 0 100%
  }
}

/*------------------------------------------------------------
Donate Steps
------------------------------------------------------------*/
.donate_steps_wrp {
  padding: var(--space-lg) 0;
  background-color: var(--color-primary-lightest);
}

.donate_steps_wrp .masthead,
.page-template-donate-main .masthead {
  padding: 0;
  margin-bottom: var(--space-md);
}

.page-template-donate-main .masthead {
  width: min(90%, 1280px);
  margin: var(--space-md) auto 0;
}

.donate_steps_wrp .return_btn,
.page-template-donate-main .return_btn {
  margin: 0;
}

.donate_steps_wrp .masthead .logo,
.page-template-donate-main .masthead .logo {
  aspect-ratio: 5/2;
  /* width: var(--space-xxxl); */
  width: 7em;
}

.donate_steps_wrp .copyright {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-6);
  margin: 0;
}

.donate_steps {
  padding: 0;
  box-shadow: none;
  border: 1px solid var(--gray-1);
  margin-bottom: var(--space-lg);
}

.donate_steps .title {
  font-weight: 900;
  font-size: var(--text-md);
  margin-bottom: var(--space-md);
}

/*----------------------------------------
Donate Steps Side Banner
----------------------------------------*/
.donate_steps .side_banner {
  padding: 0;
  position: relative;
  overflow: hidden;
}

.donate_steps .side_banner svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.donate_steps .side_banner svg image {
  width: 100%;
  height: auto;
}

.donate_steps .side_banner figure {
  text-align: center;
  font-size: 1em;
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
}

.donate_steps .side_banner figure blockquote {
  font-family: var(--font-secondary);
  margin-bottom: var(--space-xs);
  text-wrap: balance;
  font-style: italic;
}

.donate_steps .side_banner figure figcaption {
  text-transform: uppercase;
  font-size: var(--text-sm);
}


/* payment methods side banner 
----------------------------------------*/
.page-template-donate-payment-options .side_banner {
  background-image: radial-gradient(17em circle at center 20%, #fff, #30cba7, #0b7d79, #1b585b);
}

.page-template-donate-payment-options .side_banner svg {
  width: 75%;
  aspect-ratio: 1/1;
  top: var(--space-xl);
}

.page-template-donate-payment-options .side_banner figure {
  bottom: var(--space-lg);
}


/* success page side banner 
----------------------------------------*/
.page-template-donate-success .side_banner {
  background-image: radial-gradient(20em circle at center 60%, #fff, #fbbf93, #f58e8e);
}

.page-template-donate-success .side_banner svg {
  width: 140%;
  aspect-ratio: 5/6;
  bottom: -2px;
}

.page-template-donate-success .side_banner figure {
  top: var(--space-xxl)
}


/*--------------------------------------------------
Donate Payment Methods
--------------------------------------------------*/
.page-template-donate-payment-options .donate_steps {
  aspect-ratio: 2/1;
}


/*----------------------------------------
Donate Payment Details
----------------------------------------*/
.payment_details {
  padding: 1em;
  justify-content: space-between;
}

/*----------------------------------------
Donate Payment Summary
----------------------------------------*/
.payment_summary li {
  justify-content: space-between;
  /* border-bottom: 1px solid var(--gray-1); */
  margin-bottom: var(--space-xs);
  opacity: .75;
  font-size: .925em;
}

.payment_summary li .fund_name {
  width: min(100%, 80%);
}

.payment_fee {
  opacity: .75;
  font-size: .925em;
  justify-content: space-between;
}

.payment_summary .total {
  justify-content: space-between;
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--event-color-accent);
}

.payment_summary .total::before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--gray-1);
  margin-block: var(--space-xxxs) .125em;
}

.payment_summary .total span:last-of-type::before {
  content: "$";
  font-size: .5em;
  position: relative;
  top: -.5em;
}

/*----------------------------------------
Donate Payment Methods
----------------------------------------*/
.payment_details .payment_methods {
  width: 55%;
}

.payment_selection {
  margin-bottom: var(--space-xl);
}

.payment_selection .payment_method {
  position: relative;
  aspect-ratio: 1.618/1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;
  padding: 0;
  width: min(50%, var(--space-xxxxl));
  border: 1px solid var(--gray-1);
  border-radius: var(--space-sm);
  box-shadow: 3px 6px 9px #efefef;
  cursor: pointer;
  transition: var(--transition);
}

.payment_selection .payment_method:not(:last-of-type) {
  margin-right: 2.5%;
}

.payment_methods .payment_selection input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.payment_selection .payment_method:has(.active) {
  border-color: var(--donate-color-eucalyptus);
}

.payment_method_forms .payment_method_form {
  opacity: 0;
  height: 0;
  visibility: hidden;
}

.payment_method_forms .payment_method_form .subtitle {
  font-weight: 900;
  font-size: var(--text-body);
  margin-bottom: var(--space-md);
}

.payment_method_forms .payment_method_form.show {
  opacity: 1;
  visibility: visible;
  height: auto;
}

/*----------------------------------------
Payflow iFrame
----------------------------------------*/
.donate_iframe_cnt {
  aspect-ratio: 5/3;
  overflow: hidden;
}

/*----------------------------------------
PayPal Form
----------------------------------------*/
#paypal_form button {
  background-image: url(/wp-content/uploads/2024/07/paypal-logo.svg);
  background-size: contain;
  width: min(100%, 14em);
  height: 2.75em;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 4px 8px 12px hsla(42, 90%, 24%, .08);

  /* PayPal styles */
  background-color: #ffc439;
  /* border-radius: 4px; */
  /* height: 35px; */
  /* color: #111; */
}

/*--------------------------------------------------
Donate Success Page
--------------------------------------------------*/
.page-template-donate-success .donate_steps_wrp {
  background-color: hsl(23, 100%, 91%);
}

:is(.page-template-donate-success, .page-template-donate-cancel-error) .content {
  padding: var(--space-xxl) var(--space-xl);
}

:is(.page-template-donate-success, .page-template-donate-cancel-error) header {
  width: min(100%, 40em);
  margin: 0 auto var(--space-xl);
  text-align: center;
}

:is(.page-template-donate-success, .page-template-donate-cancel-error) header .title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xxxs);
  text-wrap: balance;
}

:is(.page-template-donate-success, .page-template-donate-cancel-error) header .btns {
  width: min(100%, 22em);
  margin: 0 auto;
}

:is(.page-template-donate-success, .page-template-donate-cancel-error) header .btns .btn {
  margin: var(--space-md) auto 0;
}

/*----------------------------------------
Donate List Cards
----------------------------------------*/
.donate_cards {
  gap: var(--grid-space);
}

.donate_cards li {
  border: 1px solid var(--gray-2);
  border-radius: var(--space-md);
  padding: 0;
}

.donate_cards li a {
  text-decoration: none;
  color: var(--gray-10);
  display: block;
  padding: 1em;
}

.donate_cards li .image {
  aspect-ratio: 1.618/1;
  border-radius: var(--space-md);
  margin-bottom: var(--space-sm);
}

.donate_cards li .content {
  padding: var(--space-xxs) 0;
}

.donate_cards li .title {
  margin-bottom: var(--space-xxs);
}

.donate_cards li .description {
  font-size: 1em;
}

.donate_cards.cols_3 li {
  width: min(100%, calc(100% / 3 - 1.35em));
}

.donate_cards.list_cards {
  width: min(100%, 40em);
  margin: 0 auto;
}

.donate_cards.list_cards a {
  display: flex;
  align-items: center;
  margin: 0;
}

.donate_cards.list_cards a .image {
  aspect-ratio: 1/1;
  margin-bottom: 0;
}

.donate_cards.list_cards a .content {
  padding: 1em var(--grid-space);
}


/*------------------------------------------------------------
Responsive Styles
------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

  /*----------------------------------------
  Donate Funds
  ----------------------------------------*/
  .donate_form {
    flex-direction: column;
  }

  .donate_funds {
    width: min(100%, 56.25em);
    margin: calc(-1 * var(--grid-space)) auto;
    padding: 0;
  }

  .fund_cards li.box {
    margin-inline: auto;
  }

  /*----------------------------------------
  Donate Summary
  ----------------------------------------*/
  .donate_summary {
    position: fixed;
    bottom: 0;
    top: initial;
    width: 100%;
    left: 0;
    border: 1px solid var(--gray-2);
    /*  */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--space-lg) var(--space-lg) 0 0;
    box-shadow: 0 -8px 16px rgba(0, 0, 0, .1);
    padding-block: var(--space-md) var(--space-lg);
  }

  /* Donate Summary Header
  ------------------------------*/
  .donate_summary header {
    width: min(20em, 55%);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .donate_summary .reset_btn {
    /* override JS style */
    display: block !important;
    margin: 0;
    padding-block: var(--space-sm);
  }

  .donate_summary .fee_box_cnt {
    /* override JS style */
    display: flex !important;
    width: min(100%);
    margin: 0;
  }

  .donate_summary .fee_box_cnt label {
    padding-right: 12%;
  }


  /* Donate Summary Tooltip
  ------------------------------*/
  .donate_summary .tooltip .label {
    left: 100%;
    visibility: hidden;
  }

  .donate_summary .tooltip .label::after {
    border-left: none;
    border-right: 15px solid #fff;
    right: 100%;
  }

  .donate_summary :is(#donate_list, .logo_container, .name) {
    display: none;
  }

  /* Donate CTA & donate button
  ------------------------------*/
  .donate_summary .donate_cta {
    width: min(13em, 35%);
  }

  .donate_summary .donate_btn {
    width: min(100%);
    margin: 0;
  }

  /*----------------------------------------
  Donate Payment Steps
  ----------------------------------------*/
  .donate_steps {
    flex-direction: column;
  }

  .donate_steps .side_banner {
    width: 100%;
    aspect-ratio: 5/1;
  }

  .donate_steps .side_banner figure {
    bottom: initial;
    top: 50%;
    transform: translateY(-50%);
    width: min(100%, 20em);
    right: 5%;
    left: initial;
  }

  :is(.page-template-donate-success, .page-template-donate-cancel-error) .content {
    width: 100%;
  }

  /*----------------------------------------
  Donate Payment Options
  ----------------------------------------*/
  .page-template-donate-payment-options .side_banner {
    background-image: radial-gradient(14em circle at 12% 50%, #fff, #30cba7, #0b7d79, #1b585b);
  }

  .page-template-donate-payment-options .side_banner svg {
    width: 15%;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
  }

  .page-template-donate-payment-options .donate_steps {
    aspect-ratio: initial !important;
    /* overflow: visible; */
    /* height: 100vh; */
  }


  .payment_details {
    width: 100%
  }

  .payment_methods {
    width: 60%
  }

  .payment_summary {
    width: 40%
  }

  /*----------------------------------------
  Donate Thank You Page
  ----------------------------------------*/
  .page-template-donate-success .side_banner {
    background-image: radial-gradient(20em circle at 15% 40%, #fff, #fbbf93, #f58e8e);
  }

  .page-template-donate-success .side_banner svg {
    width: 21%;
    bottom: -33%;
    left: 15%;
  }


  /* #1200px */
}


@media only screen and (max-width: 1024px) {

  .page-template-login-sap {
    margin: 0;
  }

}

@media only screen and (max-width: 900px) {

  /*----------------------------------------
  Component: Donate Cards
  ----------------------------------------*/
  .donate_cards {
    flex-direction: column;
  }

  .donate_cards.cols_3 li {
    width: min(100%, 27.06em);
    margin-inline: auto;
  }

  /*----------------------------------------
  Donate Payment Options
  ----------------------------------------*/
  .page-template-donate-payment-options .payment_details {
    flex-direction: column;
    width: 100%;
  }

  .page-template-donate-payment-options :is(.payment_summary, .payment_methods) {
    width: min(100%, 40em);
    margin: 0 auto;
  }
}

/* 900px */

@media only screen and (max-width: 768px) {

  /*----------------------------------------
  Donate Funds
  ----------------------------------------*/
  .fund_cards li.box {
    padding: var(--space-lg);
    align-items: flex-start;
  }

  .fund_cards li.box .image {
    padding: 0;
    aspect-ratio: 1/1;
    width: min(100%, 20%);
    border-radius: var(--space-sm);
  }

  .fund_cards li.box .content {
    width: min(100%, 80%);
    padding: 0 0 0 var(--grid-space);
  }


  /* 768px */
}

@media only screen and (max-width: 600px) {

  /*----------------------------------------
  Donate Payment Steps
  ----------------------------------------*/
  .donate_steps_wrp {
    background-color: #fff !important
  }

  .donate_steps_wrp .donate_steps {
    border-radius: 0;
  }

  /* Side Banner 
  ----------------------------------------*/
  .donate_steps_wrp .donate_steps .side_banner {
    aspect-ratio: revert;
    overflow: visible;
    padding-block: var(--space-lg) var(--space-xl);
  }

  .donate_steps .side_banner :is(.image, svg) {
    position: absolute;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: #fff;
    left: 50%;
  }

  .donate_steps .side_banner .image {
    bottom: -2.75em;
    transform: translateX(-50%);
    width: var(--space-xxl);
    /* important */
    --border: 5px;
    background-clip: padding-box;
    border: solid var(--border) var(--transparent);
  }

  .donate_steps .side_banner .image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: var(--gradient-golden);
    /* important */
    margin: calc(-1 * var(--border));
    border-radius: inherit;
  }

  .donate_steps .side_banner svg {
    top: 50%;
    width: 100%;
    bottom: revert;
    transform: translate(-50%, -50%);
  }

  /* Side Banner Quote
  ----------------------------------------*/
  .donate_steps_wrp .side_banner figure {
    margin: 0 auto;
    right: initial;
    bottom: initial;
    top: initial;
    position: relative;
    font-size: var(--text-md);
    width: min(100%, 90%);
    transform: none;
  }

  :is(.page-template-donate-success, .page-template-donate-cancel-error) .content {
    padding: var(--space-xxl) var(--space-lg) var(--space-lg);
  }

  /* Donate Payment Options
  ----------------------------------------*/
  .page-template-donate-payment-options .side_banner {
    background-image: linear-gradient(to top, #0b7d89, #1d5e6b);
  }

  .payment_details {
    padding-top: var(--space-xl);
  }

  .page-template-donate-payment-options .payment_selection .payment_method {
    width: min(50%, var(--space-xxxl));
  }

  /* Donate Thank you Page
  ----------------------------------------*/
  .page-template-donate-success .side_banner {
    /* background-image: linear-gradient(to top, hsl(25, 87%, 74%), hsl(0, 90%, 72%)); */
    background-image: linear-gradient(to top, hsl(25, 93%, 78%), hsl(0, 78%, 70%))
  }

  /*--------------------------------------------------
  SAP Login
  --------------------------------------------------*/
  .sap_login .login_box {
    padding-inline: var(--space-md);
    width: min(90%, 28em);
  }


  /* 600px */
}

@media only screen and (max-width: 480px) {

  /*----------------------------------------
  Donate Funds
  ----------------------------------------*/
  .page-template-donate-main .wrapper {
    background-color: #fff;
    padding-block: var(--space-xxxl) var(--space-xxl)
  }

  .fund_cards li.box {
    padding: 3.5em var(--space-md) var(--space-md);
    flex-direction: column;
    box-shadow: none;
    width: 100%;
    border: 1px solid var(--gray-1);
    border-radius: var(--space-lg);
    position: relative;
    overflow: visible;
    margin-bottom: var(--space-xxl);
  }

  .fund_cards li.box .image {
    position: absolute;
    top: calc(-1 * 2.75em);
    width: min(100%, var(--space-xxl));
    margin-bottom: var(--space-sm);
    border-radius: 100%;
  }

  .fund_cards li.box .content {
    width: 100%;
    padding: 0;
  }

  .fund_cards li.box .content .title {
    font-size: var(--text-md);
  }

  .fund_cards li.box .content .btns {
    width: 100%;
  }

  /* Donate Summary
  ------------------------------*/
  .donate_summary :is(header, .donate_cta) {
    width: 100%;
  }

  .donate_summary .donate_cta {
    margin-top: var(--space-md)
  }

  .donate_summary .fee_box_cnt label {
    padding: 1em 10% 1em 0;
    font-size: 1em;
  }

  .donate_summary .fee_box_cnt .tooltip .label {
    left: 7.25em;
    right: 0;
  }

  .donate_summary .tooltip .label::after {
    right: -1em;
    transform: rotate(180deg);
  }

  /* Donate Summary Tooltip
  ------------------------------*/
  .donate_summary .fee_box_cnt label {
    padding-right: 0;
    font-size: .975em;
  }


  /* 480px */
}

@media only screen and (max-width: 400px) {

  /*----------------------------------------
  Donate Funds
  ----------------------------------------*/
  .page-template-donate-main .wrapper {
    padding-bottom: var(--space-xxxxl);
  }


  /* 400px */
}
.error_wid_login {
  background-color: #FFEBE8;
  border: 1px dashed #FF0000;
  color: #FF0000;
  float: left;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-weight: 500;
  padding: 6px;
	margin-left: 200px;
  width: 80%;
	clear:both !important;
}

.login_wid{
  list-style-type:none;
  /*border: 1px dashed #999999;*/
  width:98%;
  float:left;
  padding:5%;
	}
.login_wid li{
	width:98%;
	float:left;
	margin:2px;
}
.openid_social_login{
	padding:5px 0px 0px 0px;
	clear:both;
	width:100% !important;
}

.login_wid li input{
	width:85%;
	float:left;
	margin:2px;
}

.btn-fdefault {
	background: #7272dc;
	height:40px;
	padding:8px;
	text-align:center;
	color:#fff;
}

.mo_oauth_simple_modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.mo_oauth_simple_modal_content {
  background-color: #fff;
  margin: 5% auto;
  padding: 30px 40px;
  border-radius: 12px;
  max-width: 480px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  text-align: center;
  position: relative;
  color: #202124;
}
.mo_oauth_simple_modal_content img {
  max-width: 100px;
  margin-bottom: 1px; 
}
.mo_oauth_simple_modal_content p {
  font-size: 1.3em;
  margin-bottom: 30px;
}
.mo_oauth_modal_confirm {
  font-size: 1.1em;
  font-weight: 700;
  padding: 10px 30px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  color: #fff;
  background-color: #1a73e8;
  transition: background-color 0.3s ease;
}
.mo_oauth_modal_confirm:hover {
  background-color: #155ab6;
}
.mo_oauth_modal_close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2.2em;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.3s ease;
}
.mo_oauth_modal_close:hover {
  color: #000;
}
.mo_oauth_modal_skip {
  background: none;
  border: none;
  color: #1a73e8;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.ai-wrap {
  background-color: #ffffff;
}

.ai-wrap .ai-volume-bar {
  border-right-color: #ffffff
}

.ai-wrap .ai-track-btn,
.ai-wrap .ai-track-control {
  border-left-color: #ffffff
}
.ai-wrap .ai-track-progress-bar,
.ai-wrap .ai-volume-bar,
.ai-wrap .ai-btn,
.ai-wrap .ai-btn:hover,
.ai-wrap .ai-btn:focus,
.ai-wrap .ai-track,
.ai-wrap .ai-track-no-thumb {
  background-color: #246095;
}

.ai-wrap .ai-scroll-wrap > div:last-child {
  background-color: #246095;
}

.ai-wrap .ai-footer {
  border-top-color: #246095;
}

.ai-wrap.ai-is-loading .ai-control-wrap-thumb::after,
.ai-wrap.ai-is-loading .ai-track-title::after,
.ai-wrap.ai-is-loading .ai-track-subtitle::after {
  background: linear-gradient(to right, #246095 8%,  #26669f 18%, #246095 33%);
}
.ai-control-wrap {
  color: #1e1e20;
}
.ai-control-wrap .ai-btn,
.ai-control-wrap .ai-btn:hover,
.ai-player-buttons .ai-btn,
.ai-player-buttons .ai-btn:hover,
.ai-wrap .ai-volume-bar {
  background-color: #246095;
}
.ai-control-wrap .ai-audio-control,
.ai-control-wrap .ai-audio-control:hover,
.ai-control-wrap .ai-audio-control:focus,
.ai-control-wrap .ai-btn.ai-btn-active,
.ai-wrap .ai-volume-bar.ai-volume-bar-active::before {
  background-color: #b6338a;
}
.ai-wrap .ai-track-progress {
  background-color: #b6338a;
}
.ai-wrap .ai-track {
  background-color: #ffffff;
}
      .ai-wrap .ai-track,
.ai-wrap .ai-track-btn {
  color: #1e1e20;
}

.ai-wrap .ai-track-btn svg {
  fill: #1e1e20;
}
.ai-wrap .ai-track:hover,
.ai-wrap .ai-track.ai-track-active {
  background-color: #f3f8fd;
}
.ai-wrap .ai-track:hover,
.ai-wrap .ai-track.ai-track-active {
  color: #1e1e20;
}

.ai-wrap .ai-track:hover .ai-track-btn svg,
.ai-wrap .ai-track.ai-track-active .ai-track-btn svg {
  fill: #1e1e20;
}
.ai-modal,
.ai-modal-dismiss,
.ai-modal-dismiss:hover {
  color: #1e1e20;
}

.no-js img.lazyload {
  display: none;
}

figure.wp-block-image img.lazyloading {
  min-width: 150px;
}

.lazyload,
.lazyloading {
  --smush-placeholder-width: 100px;
  --smush-placeholder-bg-max-width: 120px;
  --smush-placeholder-aspect-ratio: 1/1;
  width: var(--smush-image-width, var(--smush-placeholder-width)) !important;
  aspect-ratio: var(--smush-image-aspect-ratio, var(--smush-placeholder-aspect-ratio)) !important;
}

.lazyload, .lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 400ms;
  transition-delay: 0ms;
}
/* 
 *














 *
 */