#lotusModal .modal-body {
	padding: 0px;
	border: none;
	box-shadow: none;
}

#lotusModal .modal-header,
#lotusModal .modal-footer {
	display: none;
}


#lotusModal .modal-dialog {
	top: 130px;
	width: auto;
	max-width: 400px;
	margin: 0px auto;
	background-color: transparent !important;
}

#lotusModal .modal-content {

	padding: 0;
	border: none;
	box-shadow: none;
	background-color: transparent !important;

}

#lotusBloc {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	/* NOTE: margin-top necessary when/if appears below #newBloc */
	margin-top: 32px;
	width: 100%;
	height: 555px;
	max-width: 400px;


	-webkit-border-top-left-radius: 300px;
	-webkit-border-top-right-radius: 300px;
	border-top-left-radius: 300px;
	border-top-right-radius: 300px;

	-webkit-border-bottom-left-radius: 16px;
	-webkit-border-bottom-right-radius: 16px;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;

	-webkit-box-shadow: 6px 12px 36px 36px rgba(255 255 255 / 6%);
	box-shadow: 6px 12px 36px 36px rgba(255 255 255 / 6%);

}

#lotusBloc .audio-hide {
	position: absolute;
	top: 34.5%;
	width: 36px;
	height: 36px;
	padding: 8px 5px 0;
	font-size: 7px;
	text-align: center;
	letter-spacing: 0.05em;
	line-height: 1.3;
	border-radius: 50%;
	z-index: 22;
	display: none;
	border: 0.5px solid var(--light-border);
}

#lotusBloc.dark .audio-hide {
	color: var(--dark-col-btn);
	border: 0.5px solid var(--dark-border);
}

/* 1. When the player is VISIBLE (Normal State) */
#lotusBloc .audio-hide {
  position: absolute; /* or fixed, depending on your container setup */
}

/* 2. When the player is HIDDEN (Shifted State) */
/* This centers the button exactly on the right border of your container */
#lotusBloc .audio-hide.playerHidden {
}


#lotusWISDOM.central {
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	bottom: 0;
}

#lotusWISDOM.onpage {
	position: relative;
	margin-top: 30px;
}


#lotusImgContainer {
	position: absolute;
	top: 0;
	left: 50%;
	height: 500px;
	width: 200px;
	margin-left: -100px;
	/* z-index 0 prevents the controls from being covered by the leafs */
	z-index: 0;
}

/* *************************************************
	NEW STYLES FOR VANILLA : FRIDAY, JULY 3, 2026
**************************************************** */


/* **************************************************
***************************************************** */

#lotusTextContainer {
	position: absolute;
	width: 200px;
	height: 416px;
	top: 0;
	left: 0;
	z-index: 7;
	opacity: 1;
	transition: opacity 0.75s ease-in-out;

	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
			color-stop(0.03, rgba(0, 0, 0, 0)),
			color-stop(0.15, rgba(0, 0, 0, 1)),
			color-stop(1.00, rgba(0, 0, 0, 1)));
	scrollbar-width: none;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

#lotusText {
	width: 100%;
	opacity: 1;
	transition-property: transform, opacity;
	transition-duration: 1s, 0.75s;
	transition-timing-function: linear, ease-in-out;
	will-change: transform;
}


#lotusText * {
	text-shadow: 1px 1px 1px rgb(0 0 0 / 25%) !important;
}

#lotusText p {
	font-family: 'Paprika', sans-serif;
	font-weight: 400;
	text-align: center !important;
	text-indent: 0;
	margin: 1em 0;
	line-height: 2.2 !important;
	color: white;
	text-shadow: var(--dark-ts)
}

#lotusText p:not(:last-child) {
	font-size: 10px !important;
}

/* NOTE: p:last-child is source */
#lotusText p:last-child {
	margin-bottom: 80px;

	font-family: 'Arima Madurai', sans-serif;
	font-size: 14px !important;
	margin-top: 15px;
}

#lotusText h1 {
	font-family: 'Arima Madurai', sans-serif;
	font-size: 20px;
	text-indent: 0;
	text-align: center;
	margin: 340px 0 70px 0;
}


#lotusText h5 {
	color: rgb(176, 167, 166) !important;
}

#lotusText h6 {
	color: rgb(135, 156, 175) !important;
}

#lotusText .quote {
	font-family: 'Paprika', sans-serif;
	text-align: left;
	font-size: 10px;
	text-indent: 0;
	letter-spacing: 0.1em;
	padding: 0;
	margin-left: 19px;
	line-height: 17px;
}

#lotusText .quoteSource * {
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	margin-top: 0;
	margin-bottom: 14px;
}

#lotusText pre {
	margin: 5px 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	text-align: center;
}

/* CONTROLS
***************************************** */

#lotusControls {
	font-size: 13px;
	position: absolute;


	height: 36px;
	z-index: 21;

	right: -10px;
	bottom: -9px;
	width: 160px !important;

	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	align-items: flex-end;
}

#lotusControls a {
	border: none;
}

#lotusControls #btnScroller i {
	font-size: 1.45em;
}

#lotusControls #btnLoad *,
#lotusControls #btnScroller * {
	font-size: 108%;
}

#lotusControls div {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	margin: 0;
	width: 38px;
	height: 100%;
	text-align: center;
}

.lotus-scroll-wrap div i,
#lotusControls i {
	cursor: pointer;
}

.lotus-scroll-wrap div {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
}

#lotusScroll {
	position: absolute;
	right: 0;
	bottom: 12px;
	width: 30px;
	z-index: 22;

	height: 211px;


	display: none;
}

.lotus-scroll-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;

	position: absolute;
	max-height: 100px;
}

.lotus-scroll-wrap div {
	height: 0;
	width: 100%;
}

.lotus-scroll-wrap#lsw1 {
	top: 0;
}

.lotus-scroll-wrap#lsw2 {
	top: 112px;
}

.lotus-scroll-wrap#lsw1,
.lotus-scroll-wrap#lsw2 {
	width: 100%;
}

#lotusScroll #btnFast {
	font-size: 24px;
	top: 0;
}

#lotusScroll #btnMedium {
	font-size: 20px;
	top: 34px;
}

#lotusScroll #btnSlow {
	font-size: 16px;
	top: 68px;
}

#lotusScroll #btnPause {
	top: 0;
}

#lotusScroll #btnRewind {
	top: 45px;
}

#lotusScroll #btnRewind * {
	font-size: 88%;
}

#lotusScroll #btnExit {
	top: 85px;
}

#lotusScroll #btnExit * {
	font-size: 90%;
}

#lotusText h1,
#lotusText p:last-child {
	color: rgb(238 230 215 / 100%);
}


#lotusControls div::after,
.lotus-scroll-wrap#lsw1::after,
.lotus-scroll-wrap#lsw2 div::after {
	font-size: 9px;
	color: var(--light-col-base);
	text-shadow: var(--light-ts);
}

.dark #lotusControls div::after,
.dark .lotus-scroll-wrap#lsw1::after,
.dark .lotus-scroll-wrap#lsw2 div::after {
	color: var(--dark-col-base);
	text-shadow: var(--dark-ts);
}

.lotus-scroll-wrap div i,
.lotus-scroll-wrap div .svg-icon,
#logucControls,
#lotusControls .svg-icon {

	color: var(--dark-col-btn) !important;
	text-shadow: var(--dark-ts) !important;
}

.lotus-scroll-wrap div:hover i,
.lotus-scroll-wrap div:hover .svg-icon,
#lotusControls :hover *,
#lotusControls :hover i {
	color: rgb(245 250 255 / 100%) !important;
	text-shadow: none !important;
}

.lotus-scroll-wrap#lsw1::after,
.lotus-scroll-wrap#lsw2 div::after {

	display: block;
	white-space: nowrap;
	position: absolute;
	right: -27px;
	width: 9px;
	letter-spacing: 1px;

	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);

	/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;

}


.lotus-scroll-wrap#lsw1::after {
	content: 'SCROLLS';
	top: 28px;
}

.lotus-scroll-wrap#lsw2 div:nth-child(1)::after {
	content: 'PAUSE';
	top: -5px;
}

.lotus-scroll-wrap#lsw2 div:nth-child(2)::after {
	content: 'REWIND';
	top: -9px;
}

.lotus-scroll-wrap#lsw2 div:nth-child(3)::after {
	content: 'EXIT';
	top: 1px;
}

#lotusControls div::after {
	position: absolute;
	cursor: default;
	width: auto;
	min-width: 32px;
	left: 0;
	bottom: -6px;
	height: auto;
	text-align: center;
	letter-spacing: 0.25px;
}


#notes {
	position: absolute;
	right: 129px;
	bottom: 16px;
	font-size: 9px;
	color: var(--dark-col-btn);
	text-shadow: none !important;
	opacity: 0;
}

#btnMusic {
	position: relative;
}

#btnMusic span {
	position: absolute;
}

#btnMusic .music-close {
	left: 3px;
	bottom: 14px;
	opacity: 0;
	font-size: 9px;
	color: var(--dark-col-btn);
}

#btnMusic .music-open {
	left: 7px;
}

#btnMusic .music-close i {
	position: absolute;
	font-size: 9px;
	left: 8.5px;
	bottom: 13px;
	text-shadow: none !important;
	display: none;
}

#btnMusic:not(.disabled) .music-close.pulse i,
#notes.pulse {
	animation: pulseIt 1.0s infinite alternate ease-in-out !important;
	backface-visibility: hidden;
	will-change: transform;
}

#btnMusic.disabled .music-close.pulse i {
	animation: pulseItBright 1.0s infinite alternate ease-in-out !important;
	backface-visibility: hidden;
	will-change: transform;
}

@keyframes pulseIt {
	0% {
		transform: scale(1);
		color: rgb(230, 215, 200);
	}

	50% {
		/* Scales down to 90% at the halfway point */
		transform: scale(1.125);
		color: rgb(255, 154, 0);
	}

	100% {
		transform: scale(1);
		color: rgb(230, 215, 200);
	}
}

@keyframes pulseItBright {
	0% {
		transform: scale(1);
		color: rgb(255, 240, 225);
	}

	50% {
		/* Scales down to 90% at the halfway point */
		transform: scale(1.125);
		color: rgb(255, 154, 0);
	}

	100% {
		transform: scale(1);
		color: rgb(255, 240, 225);
	}
}

#btnMusic::after {
	content: 'AMBIENT';
	margin-left: -3px;
}

#btnPrint::after {
	content: 'PRINT';
	margin-left: 4.25px;
}

#btnLoad::after {
	content: 'NEW';
	margin-left: 2.5px;
}

#btnScroller::after {
	content: 'AUTO';
	margin-left: 2.5px;
}


/* POND
****************************** */

#lotusFlower {
	position: absolute;
	z-index: 6;
	height: 120px;
	width: 200px;
	bottom: 52px;
	left: 0;
}

#lotusFront {
	position: absolute;
	z-index: 8;
	height: 120px;
	width: 200px;
	bottom: 52px;
	left: 0;
}

#lotusStem {
	position: absolute;
	z-index: 5;
	height: 70px;
	width: 19px;
	bottom: 0;
	left: 90px;
	background-image: url('../images/yim/pond/lotus-stem.png');
}

#pondLeaf-l01 {
	height: 28px;
	width: 120px;
	background-image: url('../images/yim/pond/pond-leaf-left-01.png');
	background-repeat: no-repeat;
	position: absolute;
	bottom: 13px;
	left: -72px;
}

#pondLeaf-r01 {
	height: 24px;
	width: 102px;
	background-image: url('../images/yim/pond/pond-leaf-right-01.png');
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
	right: -73px;
}

#pondLeaf-l02 {
	height: 30px;
	width: 70px;
	background-image: url('../images/yim/pond/pond-leaf-left-02.png');
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0px;
	z-index: 4;

	left: -36px;
}

#pondLeaf-r02 {
	height: 26px;
	width: 121px;
	background-image: url('../images/yim/pond/pond-leaf-right-02.png');
	background-repeat: no-repeat;
	position: absolute;
	bottom: 8px;
	z-index: 6;

	right: 66px;
	bottom: -41px;
}

#pondLeaf-l03 {
	height: 32px;
	width: 115px;
	background-image: url('../images/yim/pond/pond-leaf-left-03.png');
	background-repeat: no-repeat;
	position: absolute;
	bottom: -20px;
	left: 23%;
	z-index: 7;

	left: 0;
}

#pondLeaf-r03 {
	height: 27px;
	width: 133px;
	background-image: url('../images/yim/pond/pond-leaf-right-03.png');
	background-repeat: no-repeat;
	position: absolute;
	bottom: -10px;
	right: 19%;
	z-index: 7;

	right: 0px;
}

#pondLeaf-l04 {
	height: 30px;
	width: 100px;
	background-image: url('../images/yim/pond/pond-leaf-left-04.png');
	background-repeat: no-repeat;
	position: absolute;
	bottom: 13px;
	left: 30%;
	z-index: 3;

	left: 23px;
}

#pondLeaf-r04 {
	height: 26px;
	width: 91px;
	background-image: url('../images/yim/pond/pond-leaf-right-04.png');
	background-repeat: no-repeat;
	position: absolute;
	bottom: 10px;
	z-index: 4;
	right: 17px;
}

#pondFar-left,
#pondFar-right {
	height: 30px;
	width: 149px;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 1;
}

#pondFar-left {
	bottom: 36px;
	left: -66px;
}

#pondFar-right {
	bottom: 10px;
	right: -70px;

}

:not(.modal) .lotuslbls {
	color: rgb(155 148 140 / 100%);
}

#pondFar-left,
#pondFar-right {
	background-image: url('../images/yim/pond/pond-lotus-far-light.png');
	filter: brightness(1.2);
}

#lotusFront {
	background-image: url('../images/yim/pond/lotus-front-light.png');
	filter: brightness(1.3);
}

#lotusFlower {
	background-image: url('../images/yim/pond/lotus-flower-light.png');
	filter: brightness(1.1);
}

/* ****************************************
	DARK PAGES
******************************************* */

.dark #lotusText h1,
.dark #lotusText p:last-child {
	color: rgb(245 230 225 / 100%);
}


.dark .lotus-scroll-wrap div i,
.dark #lotusControls div i {
	color: var(--dark-col-head);
	text-shadow: var(--dark-ts);
}

.dark #pondFar-left,
.dark #pondFar-right {
	background-image: url('../images/yim/pond/pond-lotus-far-dark.png');
	filter: brightness(1.1);
}

.dark #lotusFront {
	background-image: url('../images/yim/pond/lotus-front-dark.png');
	filter: brightness(1.2);
}

.dark #lotusFlower {
	background-image: url('../images/yim/pond/lotus-flower-dark.png');
	filter: brightness(1.1);
}

.dark .lotus-scroll-wrap div:hover i,
.dark #lotusControls div:hover i {
	color: var(--dark-col-hov);
}


/* THE ROTATING SUN
******************************************* */

#sunContainer {

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	overflow: hidden;
	-webkit-border-top-left-radius: 300px;
	-webkit-border-top-right-radius: 300px;
	border-top-left-radius: 300px;
	border-top-right-radius: 300px;
	-webkit-border-bottom-left-radius: 16px;
	-webkit-border-bottom-right-radius: 16px;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;

	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

	-webkit-box-shadow: inset 10px 10px 40px -12px rgba(0, 0, 0, 0.55);
	box-shadow: inset 10px 10px 40px -12px rgba(0, 0, 0, 0.55);

}

.dark #sunContainer {
	background-image: radial-gradient(farthest-corner at 42% 20%, rgba(106 122 128 / 86%) 0, rgba(70 70 75 / 86%) 60%, rgba(0 8 16 / 86%) 100%);
}

#lotusBloc .sun,
#lotusBloc .moon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 70px;
	height: 70px;
	border-radius: 50%;

	margin: 100px auto auto 100px;
}

/* NOTE: lotus sun and moon */
#lotusBloc .sun,
body:not(.dark) #lotusBloc.dark .sun {
	background-image: url('');
	box-shadow: 0px 0px 40px 15px white;

	opacity: 0.7;
	background: white;
}

body.dark #lotusBloc .sun {
	opacity: 0.6;
}

#lotusBloc .moon {
	opacity: 1;
	box-shadow: none;
}
body:not(.dark) #lotusBloc.dark .moon {
	background-image: url('');
	opacity: 0;
}

.dark .sun {
	background: rgb(255 255 215 / 100%);
	opacity: 0.3;
	-webkit-box-shadow: 0px 0px 40px 15px white;
	box-shadow: 0px 0px 40px 15px white;
}

.dark .moon {
	background-image: url('../images/yim/moon-sml.png');
	opacity: 1;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.sun2 {
	position: absolute;
	top: 72px;
	left: 72px;
	opacity: 0.6;
	filter: saturate(0.75);
}

.sun2 img {
	width: 130px;
	height: 130px;
}

body:not(.dark) .moon,
body.dark .sun2 {
	display: none;
}

.ray_box {
	position: absolute;
	margin: auto;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 70px;
	-webkit-animation: ray_anim 120s linear infinite;
	animation: ray_anim 120s linear infinite;
	opacity: 0.1;

}

body.dark .ray_box {
	opacity: 0.05;
}

.ray {
	background: -webkit-linear-gradient(top, rgba(255, 255, 215, 0) 0%, rgba(255, 255, 235, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(top, rgba(255, 255, 215, 0) 0%, rgba(255, 255, 235, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
	margin-left: 10px;
	border-radius: 80% 80% 0 0;
	position: absolute;

}

.ray1 {
	height: 170px;
	width: 30px;
	-webkit-transform: rotate(180deg);
	top: -175px;
	left: 15px;

}

.ray2 {
	height: 100px;
	width: 8px;
	-webkit-transform: rotate(220deg);
	top: -90px;
	left: 75px;
}

.ray3 {
	height: 170px;
	width: 50px;
	-webkit-transform: rotate(250deg);
	top: -80px;
	left: 100px;
}

.ray4 {
	height: 120px;
	width: 14px;
	-webkit-transform: rotate(305deg);
	top: 30px;
	left: 100px;
}

.ray5 {
	height: 140px;
	width: 30px;
	-webkit-transform: rotate(-15deg);
	top: 60px;
	left: 40px;
}

.ray6 {
	height: 90px;
	width: 50px;
	-webkit-transform: rotate(30deg);
	top: 60px;
	left: -40px;
}

.ray7 {
	height: 180px;
	width: 10px;
	-webkit-transform: rotate(70deg);
	top: -35px;
	left: -40px;
}

.ray8 {
	height: 120px;
	width: 30px;
	-webkit-transform: rotate(100deg);
	top: -45px;
	left: -90px;
}

.ray9 {
	height: 80px;
	width: 10px;
	-webkit-transform: rotate(120deg);
	top: -65px;
	left: -60px;
}

.ray10 {
	height: 190px;
	width: 23px;
	-webkit-transform: rotate(150deg);
	top: -185px;
	left: -60px;
}

@-webkit-keyframes ray_anim {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* SMALLER SCREENS
******************************************* */

@media (max-width: 766.98px) {
	#lotusWISDOM.central {
		top: -16px;
	}
}

@media (max-width: 478.98px) {

	body:not(.lotus) #lotusControls {
		left: 62%;
	}
}

@media only screen and (max-width: 427.98px) and (orientation: portrait) {

	/* no lotus in the right column under "news" (this does NOT affect the lotus-wisdom.html page or the lotus in modal form) */
	body:not(.lotus) #lotusBloc {
		display: none;
	}
}

@media only screen and (max-height: 427.98px) and (orientation: landscape) {

	/* no lotus in the right column under "news" (this does NOT affect the lotus-wisdom.html page or the lotus in modal form) */
	body:not(.lotus) #lotusBloc {
		display: none;
	}
}