/* modules */

#logo--icon { font-weight: 700; } /*#help--app { width: 2rem; }*/

menu > div > div > svg { width: 100%; }
menu > div > div:nth-child(2) { font-size: calc( ( 30% - 14dvh ) * 1rem ) }

#carousel--container { width: 50%; height: 40%; position: relative; top: 25%; left: 25%; perspective: 100rem; }
#slider--hv { width: 70%; height: 50%; padding: 1rem; overflow: hidden; font-size: 0.8rem; }

#selector--container { height: 70%; }
#selector { height: 100%; }

section.carousel--container {
	width: 30%; height: 50%; top: 25%; left: 35%;
	background-color: rgba( 0, 0, 0, 0.1 );
	background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid #fff;
	transform-style: preserve-3d; backface-visibility: hidden; transition: all 0.8s ease-in-out;
}

.quote, .author { width: 70%; margin: 2rem 15% 0 15%; }
.quote {
	max-height: calc( 100% - 7rem ); padding-left: 2rem;
	border: unset; border-left: 1rem solid var( --text-color ); border-radius: 0.5rem;
}
.quote--other { border: unset; }

.author { padding-right: 4rem; text-align: right; font-weight: 600; font-style: italic; font-size: 1.25rem; }
.author::before { content: "—"; }

#convos--container { height: unset; position: absolute; overflow-x: hidden; transition: top 0.8s ease-in-out; }

.convo { visibility: hidden; animation-fill-mode: both; animation-duration: 1s;  animation-play-state: paused; }

.convo--container { 
	width: 70%; height: unset; padding: 1rem; background: rgba( 0, 0, 0, 0.1 ); border-radius: 8px; }

.convo--left { margin-right: 30%; } .convo--right { margin-left: 30%; } 
.convo--center { margin: 0 15%; }

.convo--half-left::before { content: "—"; position: absolute; right: -1rem; }
.convo.convo--half-left { width: calc( 50% - 1.5rem ); margin-left: 0.25rem }

.convo--half-right::before { content: "—"; position: absolute; left: -1rem; }
.convo--half-right { width: calc( 50% - 2.25rem ); margin-left: calc( 50% + 2rem ); margin-right: 0.25rem; }

.convo--divider {
	width: 0.75rem; height: 100%; padding: 0; position: absolute; top: 0; left: 50%;
	border: 1px solid #fff; background-color: rgba( 0, 0, 0, 0.1 );
}

#container > main > div.convo--container:not( :last-child ) { margin-bottom: 1rem; }

.group { width: calc( 30% - 0.6rem ); display: inline-block; }

.range-slider--container { width: 70%; margin: 1rem auto; }
.range-slider--value { margin: 1rem 0; text-align: center; }

.day--container, .events--container, .days--container {
	height: calc( 100% - 1rem ); margin: 0 0.5dvw; padding: 0; display: inline-block; overflow: hidden; }

.day--container { width: 20%; } .days--container { width: calc( 50% - 3dvw - 1rem ); }
.events--container { width: 30%; }

.days--header { height: unset; padding-right: 0.5rem; text-align: right; background-color: rgba( 0, 0, 0, 0.05 ); }
.calendar--header { min-height: 3rem; font-size: 1.3em; font-weight: 100; text-align: center; }
.events--header { height: unset; padding: 1rem 0 0 0; font-size: 1.3rem; font-weight: 100; text-align: center; }

.day {
	width: 13%; height: 2rem; padding: 0.25rem 0; font-size: 0.75rem;
	display: inline-block; text-align: center; vertical-align: middle;
}

#calendar--container { height: 100%; margin: 0; } #events { width: 90%; height: calc( 100% - 2.5rem ); margin: auto; }
#days { height: calc( 100% - 7.75rem ); padding-right: 0.5rem; text-align: right; overflow-x: hidden; }
#days .day:hover { font-size: 1rem; }
#day { min-height: 25%; text-align: center; font-size: 15dvh; font-weight: 700; }
#weekday { padding-top: 0; font-size: 1.3rem; text-align: center; }

#bars--container-outer, #bars--container-outer2, #bars--container-outer3, #line--container-outer,
#bars--container-outer-90, #bars--container-outer-90-2 {
	width: 50%; height: 70%; margin: 5% auto; padding: 0; position: relative; overflow: hidden; }

#bars--container-outer-90, #bars--container-outer-90-2 { width: 90%; }

#bars--container-outer > section > .bars--container,
#bars--container-outer-90 > section > .bars--container,
#bars--container-outer-90-2 > section > .bars--container {
	width: 100%; height: calc( 100% - 8rem ); padding: 0 2rem;
	display: inline-block; position: relative; vertical-align: bottom;
	border: unset; border-bottom: 4px solid #fff; border-radius: 0; }

#bars--container-outer > section > .bars--container-reflect,
#bars--container-outer2 > section > .bars--container-reflect,
#bars--container-outer3 > section > .bars--container-reflect,
#bars--container-outer-90 > section > .bars--container-reflect, 
#bars--container-outer-90-2 > section > .bars--container-reflect {
	width: 100%; height: calc( 100% - 8rem ); padding: 0 2rem;
	display: inline-block; position: relative; vertical-align: top; top: 5rem;
	border: unset; border-top: 4px solid #fff; border-radius: 0; }

.bar--container, .bar--container-reflect {
	width: calc( 100% / 8 - 0.5rem ); height: 100%; margin: 0 0.25rem; padding: 0;
	display: inline-block; position: relative; vertical-align: bottom; }
.bar--container-reflect { vertical-align: top; }

.bar--container::before { position: relative; top: calc( 100% + 1rem );
	content: "| \A " attr( data-title ); white-space: pre-wrap; font-size: 0.7rem; text-align: center; opacity: 0; }
.bar--container-reflect::before {
	position: relative; top: -5rem; vertical-align: bottom;
	content: attr( data-title ) " \A |"; white-space: pre-wrap; font-size: 0.7rem; text-align: center; opacity: 0; }
	
.bar--container:hover::before, .bar--container-reflect:hover::before { opacity: 1; }

.bar { width: 100%; position: absolute; bottom: 0; background-color: rgba( 255, 255, 255, 1 ); }
.bar-reflect { width: 100%; position: absolute; top: 0; background-color: rgba( 255, 255, 255, 1 ); }

#line--container-outer {
	padding: 0;
	border: unset; border-radius: unset; border-left: 4px solid #fff; border-bottom: 4px solid #fff; }

.chart--line { height: 100%; padding: 0; }

#donut--container-outer { width: 50%; height: 70%; position: relative; text-align: center; }
#donut--container-outer > svg { height: 100%; }
#bars--container-outer > section, #bars--container-outer2 > section, #bars--container-outer3 > section, 
#line--container-outer > section, 
#donut--container-outer > section { overflow: hidden; }
#donut--percent, #level { font-size: 0.2rem; }

.anim--stroke { opacity: 1; transform-origin: 50% 50%; transform: rotate( 360deg );
	transition: opacity 3s ease-in-out, transform 3s ease-in-out, stroke 3s ease-in-out;
}
.anim--stroke-svg { stroke-width: 4; transform-origin: 50% 50%; stroke-dasharray: 100; }

#quote--container { padding: 0; overflow: hidden; }

/* animations shorthand -- delay direction duration fill-mode iteration-count name play-state timeline timing-function */

@keyframes fadeInRight { 0% { visibility: hidden; transform: translate( 200%, 1rem ); } 
						 100% { visibility: visible; transform: translate( 0, 0 ); } }
@keyframes fadeInDown { 0% { visibility: hidden; transform: translate( 0, -1rem ); } 
						100% { visibility: visible; transform: translate( 0, 0 ); } }
@keyframes fadeInLeft { 0% { visibility: hidden; transform: translate( -200%, 1rem ); } 
						100% { visibility: visible; transform: translate( 0, 0 ); } }
@keyframes fadeInCircle { 0% { visibility: hidden; stroke-dashoffset: 200; transform: rotate( 0 ); } 
						100% { stroke-dashoffset: 0; transform: rotate( 360deg ); } }

.animate--in-long  { animation-direction: normal; animation-fill-mode: both; animation-duration: 1.4s; 
				animation-timing-function: ease-in-out; animation-play-state: running; }
.animate--in  { visibility: visible; animation-direction: normal; animation-fill-mode: both; 
				animation-duration: 1s; animation-timing-function: ease-in-out; animation-play-state: running; }
.animate--out { visibility: visible; animation-direction: reverse; animation-fill-mode: both; 
				animation-duration: 1s; animation-timing-function: ease-in-out; animation-play-state: running; }

.animate--in.fadeInRight, .animate--out.fadeInRight { animation-name: fadeInRight; }
.animate--in.fadeInDown, .animate--out.fadeInDown { animation-name: fadeInDown; }
.animate--in.fadeInLeft, .animate--out.fadeInLeft { animation-name: fadeInLeft; }
.animate--in-long.fadeInCircle, .animate--out.fadeInCircle { animation-name: fadeInCircle; }


@media screen and ( width < 100dvh ) {

	section.carousel--container { width: 60%; left: 20%; }
	.dropdown--container { width: calc( 100% - 1rem ); }
}