#modal--inner { max-width: 600px; }

canvas { height: 100%; padding: 0; border: unset; }
#container--canvas { height: 100%; padding: 0; position: absolute; top: 0; left: 0; }

nav { margin-top: 6rem; height: 2.5rem; text-align: center; z-index: 1; }
#nav--container { width: unset; position: absolute; right: 1rem; display: flex; }
#nav--container .nav--item { border: unset; padding: 0 1rem; z-index: 1; }
#nav--container .nav--item span { border: unset; position: absolute; display: none; transform: translate( -6rem, -3rem ); }
#nav--container .nav--item:hover span { display: block; width: 12rem; }
.nav--item:before { content: "\25cf"; text-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.1 ); }

#container > header > menu > ul > li:hover { cursor: pointer; opacity: 1; visibility: visible; }

#slider--hv > section { padding: 1rem; }

#menu--side {
	width: 17rem; height: unset; padding: 1rem; position: absolute; top: 5rem; left: -27rem;
	overflow-x: hidden;
    background: linear-gradient( 15deg, rgba(255, 255, 255, 0.2), transparent );
	box-shadow: 10px 10px 10px 5px rgba( 0, 0, 0, 0.1 ); border: unset;
	transform-style: preserve-3d; perspective: 1000px; transition: left 0.8s ease-in-out;
	transform: translateX( 0 ) rotateX( -10deg ) rotateY( 10deg ) rotateZ( -1deg );
}
#menu--side { overflow-x: hidden; }  #menu--side ul { left: 0; transform-style: preserve-3d; font-size: 1.05rem; }
#menu--side ul > li { list-style: none; }

#help { width: 100%; text-align: center; }
#controls { display: none; }

#logo { width: unset; position: absolute; top: 1.5rem; left: 1.5rem; font-size: 2rem; }
#logo--icon { width: unset; padding-right: 0; font-weight: 700; }
#logo > div { width: unset; display: inline-block; }

#forward { top: 0.7rem; left: 1.5rem; font-size: 2rem; z-index: 2; }
#forward > div { padding: 0 0.25rem; display: inline; position: relative; vertical-align: middle; 
				 font-size: 2rem; z-index: 1; }
#forward > #subtitle { padding: 0 0 0 3.3rem; display: block; font-size: 1.2rem; z-index: 1; }
#forward--icon { padding-right: 0; }

#hud--container { display: none; margin-right: 2rem; line-height: 1rem; padding-top: 1rem; text-align: right; }

#year { width: 49.5%; padding: 0 1.5rem; display: inline-block; }
#rewind { width: 49.5%; display: inline-block; text-align: right; padding: 0 1rem; font-size: 2rem; }

#img--container { height: 100%; width: 50%; min-width: 200px; min-height: 150px; max-width: 450px; max-height: 350px;
perspective: 800px; transform-style: preserve-3d; border: 15px ridge rgba( 0, 0, 0, 0.4 ); border-radius: 20px;
box-shadow: 10px 10px 3px 3px hsl( 0, 10%, 0% ), 5px 5px 5px 5px hsl( 0, 0%, 90% ); overflow: hidden; } 

#img--container-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: inset; } 

#other-side--1, #other-side--2, #other-side--3, #other-side--4 { width: 100%; height: 100%; }

#other-side--1 > img, #other-side--2 > img, #other-side--3 > img, #other-side--4 > img { 
width: 100%; height: 100%; margin-top: -5px; }

#help-info > ul > li { list-style: none }

.quote {
	max-height: calc( 100% - 7rem ); padding-left: 2rem;
	border: unset; border-left: 0.3rem dotted var( --text-color ); border-radius: unset;}

.spa--container { width: 30%; margin: 1%; padding: 1.5rem; display: inline-block; vertical-align: middle; overflow-x: hidden;
    background: linear-gradient( 15deg, rgba(255, 255, 255, 0.2), transparent );
	box-shadow: 10px 10px 10px 5px rgba( 0, 0, 0, 0.1 ); border: unset;
	transform-style: preserve-3d; perspective: 1000px; transition: left 0.8s ease-in-out;
	transform: rotateX( -10deg ) rotateY( 10deg ); }

#spa-notes--container > div { transform-style: preserve-3d; font-size: 1.05rem; }
#spa-notes--container > div.spa--container.rotate--none { transform: unset; }
#spa-notes--container > div.spa--container.rotate--right { transform: rotateX( -10deg ) rotateY( -10deg ); }
#spa-notes--container > div.spa--container.rotate--right-less { transform: rotateX( 4deg ) rotateY( -4deg ); }
#spa-notes--container > div.spa--container.rotate--left-less { transform: rotateX( -4deg ) rotateY( 4deg ); }

/* experiments */

.emExp--label, #exp--book { width: 100%; text-align: center; font-weight: 300; }

#exp--book { padding: 1rem 0; }

.code {
	width: 90%; padding: 20px; margin: 20px;
	font-family: courier; background-color: rgba( 0, 0, 0, 0.2 ); border-radius: 20px;
	box-shadow: inset -2px -2px 4px rgba( 255, 255, 255, 0.12 ), inset 8px 8px 12px rgba( 25, 25, 25, 0.1 );	
	color: rgba( 255, 255, 255, 0.7 ); }

.code--bold { color: rgba( 255, 255, 255, 1 ); }
#code--bold { color: rgba( 255, 255, 255, 1 ); }

#tech--show, #ml--show { display: inline-block; }

#emExp--container { min-height: 300px; height: 100%; text-align: center; }

#emExp--tech-detail-container { display: none; width: 100%; text-align: left; overflow-x: hidden; }

#emNeuron--fantasy-container, #emNeuron--scifi-container, #emNeuron--pre-container, #emNeuron--post-container, 
#emNeuron--pre-scifi-container, #emNeuron--post-scifi-container, #emNeuron--pre-fantasy-container,
#emNeuron--post-fantasy-container, #emNeuron--tech-detail-container, #emPredict--container, #emPredict--actual-container {
	width: 350px; margin: 1.5rem; position: relative; display: inline-block; }

#emNeuron--pre-container, #emNeuron--post-container, #emNeuron--pre-scifi-container, #emNeuron--post-scifi-container,
#emNeuron--pre-fantasy-container, #emNeuron--post-fantasy-container, #emNeuron--tech-detail-container { display: none; }

#exp-books--container { width: 100%; min-height: 220px; }
#exp-books { padding: 0 40px 0 20px; font-size: 0.8rem; }

#em-group--container { width: 50%; padding: 10px; display: flex; justify-content: left; align-items: left; }

#em-group--txt { height: 1em; padding-right: 5px; font-size: 0.8em; }
#em-group { padding: 5px; }
#em-group--txt-lrg { height: 1.5rem; padding-right: 5px; font-size: 1rem; }
#em-group-lrg { padding: 10px; }

#em-group--red, #em-group--orange, #em-group--yellow, #em-group--green, #em-group--darkgreen, #em-group--lightblue,
#em-group--indigo, #em-group--violet, #em-group--brown, #em-group--black {
width: 15px; height: 7px; display: inline-block; background-color: #fff; }

#em-group--red-lrg, #em-group--orange-lrg, #em-group--yellow-lrg, #em-group--green-lrg, #em-group--darkgreen-lrg,
#em-group--lightblue-lrg, #em-group--indigo-lrg, #em-group--violet-lrg, #em-group--brown-lrg, #em-group--black-lrg {
width: 20px; height: 10px; padding: 0 5px; display: inline-block; background-color: #fff; }

#em-legend--container, #em-legend--container-lrg { 
width: 100%; padding: 0.5rem 2.5rem 0; display: block; text-align: right; }

#em-legend--container-lrg { text-align: center; }

#exp-context { width: 100%; display: flex; flex-direction: row; justify-content: center; }

#exp-context--genre, #exp-context--time, #exp-context--prev-both, #exp-context--both, #exp-context--next-both,
#exp-context--w2v, #exp-context--bow, .exp-context--sep { width: unset; padding: 0 7px; }

.exp--slider-container { width: 100%; padding-bottom: 1rem; text-align: center; }

.tooltip { width: 140px; padding: 0.9rem; position: absolute; text-align: left; font-weight: 400; font-size: 0.9rem;
border: 0px; border-radius: 8px; opacity: 0; background: #fff; pointer-events: none; transition: opacity 200ms; z-index: 1000; }

#emoji-hang--input {}

.letter { width: unset; padding: 0.25rem; display: inline-block; }

/* convos content */

#convos--container { width: 100%; }

#convos--container > div > div, #convos--container > div > ul {
width: unset; padding: 1rem 3rem; display: inline-block; vertical-align: middle; }

#convos--container > div.convo--container.convo--right { padding-right: 3rem; text-align: right; }
#convos--container > div.convo--container.convo--center { text-align: center; }
#convos--container > div > div, .convo--width { max-width: calc( 100% - 200px - 7rem ); }
#convos--container > div > div.width--m100 { max-width: 100%; }

#convos--container { height: unset; position: absolute; padding: 1rem; 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: unset; height: unset; padding: 0; border-radius: unset; }

.convo--container { 
	width: 70%; 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 );
}

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

.emNeuron--desc { fill: #fff; font-size: 12pt; } .emNeuron--leg { fill: none; }
.emNeuron--point { fill: #fff; stroke: none; } .emNeuron--point:hover { cursor: pointer; }

.coord-sys { width: 150px; height: 150px; position: relative; border-radius: unset; }
.coord-sys--y { width: 75px; height: 150px; position: absolute; top: 0; border-right: 2px dashed; border-radius: unset; }
.coord-sys--o { width: 1rem; height: 1rem; position: absolute; top: 50%; left: 50%;
	transform: translate( -50%, -50% ); border-radius: 50%; background-color: #fff; }
.coord-sys--o1 { width: 1rem; height: 1rem; position: absolute; bottom: -0.5rem; left: -0.5rem;
border-radius: 100%; background-color: #fff; }
.coord-sys--x { width: 150px; height: 75px; border-bottom: 2px dashed; border-radius: unset; }
.coord-sys--x-scatter { width: 150px; height: 75px; position: absolute; top: -20px; left: -20px;
	opacity: 1; border-bottom: 4px solid; border-radius: unset; }
.coord-sys--x-parabola { width: 150px; height: 75px; position: absolute; top: 20px; left: -50px;
	transform: rotate( -45deg ); border-bottom: 2px solid; }
.coord-sys--x-no-dash { border-bottom: 2px solid; }
.coord-sys--dashed { border-left: 2px dashed; border-bottom: 2px dashed; }
.coord-sys--diagonal { transform: rotateZ( -45deg ); }
.coord-sys--diagonal-base { width: 170px; height: 5px; position: absolute; bottom: -3px;
border-top: 2px solid; transform-origin: 0 50%;}
.coord-sys--diagonal-2x { width: 100%; height: 100%; position: absolute; border-bottom: 2px solid; border-radius: 0;
transform-origin: bottom left; transform: rotateZ(-45deg); background: none; }
.coord-sys--solid { border-left-style: solid; border-bottom-style: solid; }
.coord-sys--curved { width: 150px; height: 150px; position: absolute;
border-top: 2px dashed; border-radius: 150px 1%/50px 0 0;
transform: rotateZ( -65deg ) scale( 1, -1.5 ) translate( -65px, 10px ); 
border-color: #fff transparent transparent transparent; }
.coord-sys--curved1 { width: 150px; height: 150px; transform: rotateZ( -50deg ) scale( 1, -1.2 ) translate( -50px, -10px ); }
.coord-sys--curved-triangle { width: 120%; height: 130%;
background-image: url( "../images/math/rt-triangle2.png" ); background-size: 100% 100%; background-repeat: no-repeat;
transform: scale( -1 ) translateX( 40px ); }
.coord-sys--curved-triangle1 { width: 120%; height: 130%; background-image: url( "../images/math/rt-triangle2.png" );
background-size: 100% 100%; background-repeat: no-repeat; transform: translateX( -40px ); }
.coord-sys--vert { height: 90px; padding: 25px 0 0 25px; }
.coord-sys--diagonal2 { width: 100%; transform: rotateZ( -64deg ); }
.coord-sys--diagonal2-1 { transform: rotateZ( -64deg ) translate( 10px, -5px ); }
.coord-sys--smaller3 { width: 80px; height: 50px; position: absolute; top: 60px; left: -40px;
display: inline-block; border-bottom: 2px dashed; }
.coord-sys--y-container { border: none; }

.coord-sys--label { width: 150px; height: 5px; position: absolute; bottom: -10px; left: 0; text-align: center; }
.coord-sys--ylabel { bottom: 75px; left: -100px; transform: rotateZ( -90deg ); }
.coord-sys--ylabel2 { bottom: 75px; left: 85px; transform: rotateZ( -90deg ); }
.coord-sys--label1 { position: absolute; top: 20px; left: 60px; }
.coord-sys--label2 { position: absolute; top: 60px; left: 100px; }
.coord-sys--label3 { position: absolute; top: 110px; left: 100px; }
.coord-sys--label4 { position: absolute; top: 50px; left: 30px; }
.coord-sys--label11 { width: 150px; height: 75px; position: absolute; top: 20px; left: 30px; }
.coord-sys--label21 { width: 150px; height: 75px; position: absolute; top: 10px; left: 150px; transform: rotateZ( -90deg ); }
.coord-sys--label211 { width: 210px; height: 5px; position: absolute; bottom: -10px; left: 0; text-align: center; }

.obj { position: absolute; top: 0; left: 0; font-size: 30px; }
.obj--line { position: absolute; bottom: 25%; left: 25%; }
.obj--line-sm { display: inline; font-size: 20px; }
.obj--line-sm1 { display: inline; vertical-align: sub; font-size: 26px; }
.obj--line-mid { display: inline; vertical-align: super; }

.incline { width: 173px; height: 100px; position: relative; aspect-ratio: auto 173 / 100;
border-left: 2px solid;  border-bottom: 2px solid; }
.incline--diagonal-base { width: 198px; height: 100px; position: absolute; 
border-top: 2px solid; transform-origin: top left; }
.incline--diagonal { transform: rotateZ( 30deg ); } .incline--diagonal-rough { border-top-style: dashed; }
.incline--diagonal-steep { width: 115px; transform: rotateZ( 60deg ); }
.incline--diagonal-steep2 { width: 170px; transform-origin: bottom left; top: 50px; right: 30px; 
transform: rotateZ( 15deg ); }
.incline--diagonal-curved { width: 110px; border-radius: 220px 1%/50px 0 0; 
border-color: #fff transparent transparent transparent; transform: rotateZ(45deg) scale(1, -1.5) translate(2px, -20px); }
.incline--mirror { transform: scale( -1, 1 ); } .incline--hot { border-width: 4px; }
.incline--mirror-both { transform: scale( -1, -1 ); }
.incline--background { border-color: rgba(255, 255, 255, 0.3); } .incline--extend { position: relative; margin-top: 100px; }

.spring { position: absolute; top: calc( 100% - 55px ); transform: rotateZ( -60deg ); }
.spring11 { position: absolute; top: calc(100% - 48px); left: 142px; transform: rotateZ( -60deg ); }
.spring--base { width: 12px; height: 12px; border: 2px solid; border-radius: 100%; transform: rotateZ( 30deg ); }
.spring--horizontal { right: 75px; }
.spring--block { left: -10px; font-size: 30px; } .spring--block-left { left: -10px; }
.spring--brace { left: 0; top: 50% } .spring--brace-ext { transform: scale( 1, 1.7 );}

.spring1, .spring2, .spring3, .spring4, .spring5 { border-color: #fff #fff transparent transparent; }

.pulley { width: 30px; height: 30px; position: absolute; top: -15px; left: -15px; border: 2px solid; border-radius: 100%; }
.pulley--vertical-string { position: absolute; top: 0; left: -15px; height: calc( 100% - 10px); border: 1px solid; }
.pulley--vertical-box { position: absolute; top: calc( 100% - 20px); left: -24px; font-size: 15px; }
.pulley--horizontal-box { position: absolute; top: calc( 50% - 33px ); left: 71px; font-size: 20px; 
transform: rotateZ( 30deg ); }
.pulley--horizontal-string { height: 80px; position: absolute; top: -31px; left: 46px; border: 1px solid; 
transform: rotateZ( -60deg ); }
.pulley--horizontal-pull { position: absolute; top: 2px; left: 45px; font-size: 15px; transform: rotateZ( 30deg ); }
.pulley--vertical-string-pull { width: 30px; height: 100%; position: absolute; top: 0; left: -13px;
border: 1px solid; border-color: transparent #fff transparent transparent; }

.projectile--width { min-width: 380px; }

.obj--projectile { top: 90px; right: -173px; font-size: 15px; }
.obj--projectile2 { top: 35px; right: -7.5px; font-size: 15px; }

.obj--circle-track { position: absolute; top: 25px; right: 0; font-size: 15px; }
.obj--circle-track-horiz { position: absolute; top: 25px; right: 0; font-size: 15px; }
.obj--circle-track2 { position: absolute; top: 10px; right: 20px; font-size: 60px; font-weight: 100; }
.obj--vert-track { position: absolute; top: -88px; left: -35px; width: 70px; height: 88px;
	border: 2px solid; border-color: transparent #fff transparent transparent; }

.obj--pull { height: 50%; position: absolute; top: 50%; left: 13px; font-size: 10px; }
.obj--pendulum { top: 70px; left: -15px; }
.pendulum--string { height: 80px; position: absolute; top: 0; left: 0; border: 1px solid; 
transform: rotateZ( 30deg ); transform-origin: top left; }

.bow { width: 100px; height: 70px; position: absolute; top: 80px; left: 134px;
	border: 2px solid; border-radius: 0 0 100px 70px; border-color: transparent transparent #fff transparent;
	transform: scale( 1, 1.15 ) rotateZ( 125deg ); }
.bow--string { height: 80px; position: absolute; top: 60px; left: 170px;
border: 1px solid; border-radius: 0 0 100px 70px; transform: translate( 0, 0 ) rotateZ( 207deg ); }
.arrow { font-size: 40px; transform: rotateZ(210deg); }

.circle--vert { width: 70px; height: 70px; position: absolute; top: -30px; left: -35px;
border: 2px solid; border-radius: 100%; }
.circle--vert2 { width: 70px; height: 70px; position: absolute; top: -115px; left: -35px; 
border: 2px solid; border-radius: 100%; }
.circle--vert-none { transform: translateY( -85px ); border-color: transparent;}

.neurons { width: 200px; height: 200px; position: relative; } .neuron { position: absolute; }
.neuron--main { top: 85px; left: 85px; font-size: 30px; opacity: 0.8; }
.neuron1 { top: 10px; left: 20px; font-size: 12px; opacity: 0.7; }
.neuron2 { top: 33%; left: 0; font-size: 16px; opacity: 0.4; }
.neuron3 { top: 55%; left: 25px; font-size: 22px; opacity: 0.4; }
.neuron4 { bottom: 20px; left: 20px; font-size: 13px; opacity: 0.4; }
.neuron5 { top: 10px; right: 20px; font-size: 15px; opacity: 0.4; }
.neuron6 { top: 40%; right: 50px; font-size: 20px; opacity: 0.4; }
.neuron7 { bottom: 40px; right: 20px; font-size: 18px; opacity: 0.4; }
.neuron--connector { height: 5px; border-top: 2px dashed; top: 105px; left: 100px; transform-origin: 0 50%; opacity: 0.2; }
.neuron1--connector { width: 112px; transform: rotateZ( -130deg );}
.neuron2--connector { width: 96px; transform: rotateZ( -161deg ); }
.neuron3--connector { width: 68px; transform: rotateZ( 165deg ); }
.neuron4--connector { width: 90px; transform: rotateZ( 138.5deg ); }
.neuron5--connector { width: 107px; transform: rotateZ( -49deg ); }
.neuron6--connector { width: 40px; transform: rotateZ( -14deg ); }
.neuron7--connector { width: 83px; transform: rotateZ( 31deg ); }
.neuron--connector-signal { width: 5px; height: 5px; position: absolute; border-top: 2px dashed; opacity: 0.2; }
.neuron1--connector-signal { top: 10px; left: 15px; transform: rotateZ( -130deg ); }
.neuron3--connector-signal { top: 125px; left: 22px; transform: rotateZ( 10deg ); }
.neuron7--connector-signal { bottom: 90px; right: 97px; transform: rotateZ( 30deg ); }

.scatter { width: 200px; height: 150px; position: relative;
	background-image: url( "../images/ml/exp-salary.png" ); background-size: contain; background-repeat: no-repeat; }
.scatter--predict { background-image: url( "../images/ml/exp-salary-predict.png" ); }
.scatter--low-alpha { background-image: url( "../images/ml/exp-salary-low-alpha.png" ); }

.ml--picts { width: 100%; height: 100%; position: relative; background-size: contain; background-repeat: no-repeat; }
.clusters { background-image: url( "../images/ml/clusters.png" ); }
.trees { background-image: url( "../images/ml/trees.png" ); }
.neuralNet { background-image: url( "../images/ml/neural-net.png" ); }
.svm { background-image: url( "../images/ml/svm.png" ); }
.pca { background-image: url( "../images/ml/pca.png" ); }

.dog--pixelated { width: 100px; height: 150px; background-image: url( "../images/ml/pixelated-pooch-detail.png" );
background-size: 200%; background-repeat: no-repeat; }

.move--origin-bl { transform-origin: bottom left; }

.loop { width: 150px; }

.box { width: 50px; height: 50px; position: relative; padding: 0 10px; }
.box--vertical { width: 5px; height: 30px; padding: 0; position: absolute; top: 0; left: 0; border: 10px solid; }
.box--vertical-right { left: 25px; }
.box--horizontal { width: 30px; height: 5px; padding: 0; position: absolute; top: 0; left: 0; border: 10px solid; }
.box--horizontal-bot { top: 25px; }
.box--checker { width: 5px; height: 5px; border: 5px solid; }
.box--left { width: 70%; height: 70%; border: 2px solid; position: absolute; top: 0; left: 0; }
.box--right { width: 70%; height: 70%; position: absolute; bottom: 0; right: 0; border: 2px solid; }
.box--side-l-top { width: 40%; height: 40%; position: absolute; top: -27px; right: -27px;
border-left: 2px solid; transform: rotate( -45deg ) }
.box--side-r-top { width: 40%; height: 40%; position: absolute; top: -25px; left: 15px;
transform: rotate( -45deg ); border-left: 2px solid; }
.box--side-b-top { width: 40%; height: 40%; position: absolute; top: -27px; right: -27px; border-top: 2px solid; }
.box--top-grp-wrapper { width: 150px; height: 150px; }
.box--top-grp { position: relative; transform-style: preserve-3d; }
.box--top { width: 102px; height: 65px; position: absolute; top: 0; left: 22px;	
transform: rotateX( 45deg ) skew( 34deg ) translateZ(11px); background-color: white; }
.box--side-l-bot { width: 40%; height: 40%; position: absolute; bottom: 13px; left: 13px;
border-left: 2px solid; transform: rotate( -45deg ) }
.box--side-r-bot { width: 40%; height: 40%; position: absolute; bottom: 15px; right: -25px;
	border-left: 2px solid; transform: rotate( -45deg ); }

.vertical { width: 75px; height: 150px; position: absolute; bottom: 0; left: 150px;
	border-left: 2px solid; border-radius: unset; }
.vertical1 { width: 75px; height: 150px; position: absolute; top: 0; left: 0;
	border-left: 2px solid; border-radius: unset; }
.horizontal { width: 150px; height: 75px; position: absolute; bottom: -73px; left: 0; 
border-top: 2px solid; border-radius: unset; }
.diagonal { width: 210px; height: 210px; position: absolute; bottom: 0; left: 0;
	border-bottom: 2px solid; border-radius: unset; transform: rotate( -45deg ); }
.diagonal1 { width: 210px; position: absolute; top: -105px; left: -105px;
	border-bottom: 2px solid; border-radius: unset; transform: rotate( 45deg ); }

.cylinder--top { width: 100%; height: 20%; position: absolute; top: 0; left: 0; border: 2px solid; border-radius: 100%; }
.cylinder--sides { width: 100%; height: 80%; position: absolute; top: 10%; border-left: 2px solid; border-right: 2px solid; }
.cylinder--bot { width: 100%; height: 20%; position: absolute; bottom: 0; left: 0%; border: 2px solid; border-radius: 100%; }

.cone--bot { width: 100%; height: 100%; position: absolute; bottom: 55px; left: 0;
border-left: 2px solid; border-bottom: 2px solid; transform: scale( 0.7, 1.2 ) rotate( -45deg ) }
.shape--top-solid { background-color: rgba( 255, 255, 255, 0.7 ); }


.parabola { width: 150px; height: 100px; position: absolute; top: 70%; border-left: 2px solid; border-radius: 50%;
	transform: rotate( 90deg); background-color: rgba( 255, 255, 255, 0 ); }
.parabola--dashed {
	border-left: 2px dashed;
}

.half-scale { transform: scale( 0.5 ); }

.xform1 { transform: rotateX( 30deg ) rotateY( 40deg ); opacity: 0.9; }
.xform2 { transform: rotateX( -50deg ) rotateY( -10deg ); }
.xform3 { transform: rotateX( -10deg ) rotateY( 40deg ) rotateZ( -20deg ); opacity: 0.6; }

.text--block { width: 100%; padding: 1rem 0; text-align: center; line-height: 40px; font-weight: bold; }
.text--border { padding: 10px 5px; display: inline-block; line-height: 30px; border: 1px solid; border-radius: 10px; }
.text--code { display: inline-block; font-family: courier; font-weight: 700; font-size: 1.1rem; }
.text--code-sm { display: inline-block; font-family: courier; font-size: 11px; opacity: 0.6; }
.text--zoom { background-color: rgba( 255, 255, 255, 0.6 ); border-radius: 5px; }
.text--shade { background-color: rgba( 255, 255, 255, 0.3 ); border-radius: 5px; }

.inline, .inline--sm { width: unset; padding: 0 10px; display: inline-block; vertical-align: middle; }

.scale--larger { transform: scale( 1.5, 1 ) translateX( 30% ); }
.scale--larger1 { transform: scale( 1.5, 1 ); text-align: center;}

.rotateRt { transform: rotate( -90deg ); }

.opacity--high { opacity: 1; } .opacity--darker { opacity: 0.3; }

.width--100p { width: 100%; } .width--300 { width: 300px; } .width--150 { width: 150px; }
.height--40 { height: 40px; }

.li--height { line-height: 20px; } .center--75 { transform: translate( -75px, 0 ); }

.pos--relative { position: relative; }
.pos--abs { position: absolute; top: 0; left: 0; }

.text--bold { font-weight: 700; } .text--left { text-align: left; } .text--right { text-align: right; }
.text--align-mid { padding-bottom: 10px; vertical-align: middle; }
.text--10 { font-size: 10px; } .text--15 { font-size: 15px; } .text--20 { font-size: 20px; }
.text--40 { font-size: 40px; } .text--80 { font-size: 80px; } .top--n40 { top: -40px; }

.left--25 { left: 25px; } .left--35 { left: 35px; } .left--40 { left: 40px; } .left--60 { left: 60px; }
.left--65 { left: 65px; } .left--80 { left: 80px; }

.pos1 { top: -20px; left: 100px; } .pos2 { top: 0; left: 120px; } .pos3 { top: -20px; left: 140px; }
.pos4 { top: -40px; left: 120px; }

.pad--none { padding: 0; } .pad--top { padding-top: 20px; } .pad--top-40 { padding-top: 40px; }
.pad--left { padding-left: 30px; } .pad--right { padding-right: 20px; }
.pad--bottom { padding-bottom: 10px; }

.right { right: 0; } .right--n20 { right: -20px; } .right--n10 { right: -10px; }
.center { position: relative; text-align: center; }

.ul--no-bullet { list-style: none; }

.unicode--flow { width: 50%; margin: 0 auto; }
.unicode--block-sm { display: inline-block; position: relative; text-align: center; }
.unicode--annot-top { position: absolute; right: 10px; top: -25px; font-size: 10px; }
.unicode--reverse { width: 60px; transform: scaleX( -1.2 );}

.neg-r-margin { position: absolute; right: 45px; top: 45%; }

.scale--back { display: inline-block; transform: scale( 0.66, 1 ); }

.txt { padding: 8px; display: inline; opacity: 0.7; }

.triangle--scale { width: 100px; }

table, td, th { text-align: center; font-size: 11px; line-height: 11px; }
table { width: 100%; border-collapse: collapse;  }
th, td { padding: 4px; }

/* 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: 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; }

@keyframes fade { 0% { opacity: 1; } 8% { opacity: 1; } 10% { opacity: 0; } 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeOutInOut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

.fade-in { animation: 10s ease infinite fadeOutInOut; } 

@keyframes backgroundColorCycle {
	0%   { background-color: rgba( 102, 0, 0, 0.95 ); }    15%  { background-color: rgba( 169, 78, 4, 0.95 ); }
	30%  { background-color: rgba( 162, 148, 42, 0.95 ); } 45%  { background-color: rgba( 10, 132, 30, 0.95 ); }
	60%  { background-color: rgba( 0, 75, 149, 0.95 ); }   75%  { background-color: rgba( 9, 4, 97, 0.95 ); }	
	90%  { background-color: rgba( 66, 26, 106, 0.95 );}   100% { background-color: rgba( 102, 0, 0, 0.95 ); } }

@keyframes colorCycle {
	0%   { color: rgba( 102, 0, 0, 1 ); }    15%  { color: rgba( 169, 78, 4, 1 ); }
	30%  { color: rgba( 162, 148, 42, 1 ); } 45%  { color: rgba( 10, 132, 30, 1 ); }
	60%  { color: rgba( 0, 75, 149, 1 ); }   75%  { color: rgba( 9, 4, 97, 1 ); }	
	90%  { color: rgba( 66, 26, 106, 1 ); }  100% { color: rgba( 102, 0, 0, 1 ); } }

@keyframes bounceInLeft {
	0%   { opacity: 0; transform: translateX( -2000px ); } 60%  { transform: translateX( 20px ); }
	80%  { transform: translateX( -5px ); } 100% { opacity: 1; transform: translateX( 0 ); } }
@keyframes bounceInRight {
	0%   { opacity: 0; transform: translateX( 2000px ); } 60%  { transform: translateX( -20px ); }
	80%  { transform: translateX( 5px ); } 100% { opacity: 1; transform: translateX( 0 ); } }
@keyframes bounceIn {
	0%   { opacity: 0; transform: scale( 0.3 ); } 50%  { transform: scale( 1.05 ); }
	70%  { transform: scale( 0.9 ); } 100% { opacity: 1; transform: scale( 1 ); } }
@keyframes bounceInModal {
	0%   { opacity: 0; transform: translate( -50%, -50% ) scale( 0.3 ); } 50%  { transform: translate( -50%, -50% ) scale( 1.05 ); }
	70%  { transform: translate( -50%, -50% ) scale( 0.9 ); } 100% { opacity: 1; transform: translate( -50%, -50% ) scale( 1 ); } }
@keyframes bounceInLeftRotate {
	0%   { opacity: 0; transform: translateX( -1000px ) rotateX( -1deg ) rotateY( 1deg ) rotateZ( -0.1deg ); }
	60%  { transform: translateX( 20px ) rotateX( -4deg ) rotateY( 4deg ) rotateZ( -0.25deg ); }
	80%  { transform: translateX( -5px ) rotateX( -7deg ) rotateY( 7deg ) rotateZ( -0.5deg ); }
	100% { opacity: 1; transform: translateX( 0 ) rotateX( -10deg ) rotateY( 10deg ) rotateZ( -1deg ); } }

@keyframes fadeInLeft {
	 0%  { opacity: 0; transform: translate( -1000px, 20px ); } 100% { opacity: 1; transform: translate( 0, 0 ); } }
@keyframes fadeInRight {
	0%   { opacity: 0; transform: translate( 1000px, 20px ); } 100% { opacity: 1; transform: translate( 0, 0 ); } }

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY( -20px ); } 100% { opacity: 1; transform: translateY( 0 ); } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY( 20px ); } 100% { opacity: 1; transform: translateY( 0 ); } }
@keyframes fadeBgColor { 0% { background: none; } 70%  { background: none; } 100% { background: rgba( 0, 0, 0, 0.3 ); } }
@keyframes fadeOutIn { 0% { opacity: 1; } 50%  { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }	

@keyframes slideRight1 {
	0% { opacity: 0; transform: translate( 0, -40px ); } 100% { opacity: 1; transform: translate( 130px, -40px ); } }
@keyframes slideRight {
	0% { opacity: 0; transform: translate( 0, -40px ); } 100% { opacity: 1; transform: translate( 170px, -40px ); } }
@keyframes slideRightSteep {
	0% { opacity: 0; transform: translate( 0,-40px ); } 100% { opacity: 1; transform: translate( 80px,-40px ); } }
@keyframes slideRightSpring {
	0% { opacity: 0; transform: translate( 0,-40px ); } 100% { opacity: 1; transform: translate( 130px,-40px ); } }
@keyframes slideXDown { to { left: 50px; } } @keyframes slideYDown { to { top: 60px; } }
@keyframes slideRotate { 0% { opacity: 0; transform: rotate( 60deg ); } 100% { opacity: 1; transform: rotate( 48deg ); } }

@keyframes moveRight {
	from { opacity: 0; } to { opacity: 1; transform: translateX( 125px ); } }
@keyframes moveRightAccel {
	from { opacity: 0; } to { opacity: 1; transform: translateX( 125px ); } }
@keyframes moveRightAccel1 {
	from { opacity: 0; } to { opacity: 1; transform: translateX( 210px ); } }
@keyframes moveRightShort {
	0% { opacity: 0; transform: translateX( 0 ); } 100% { opacity: 1; transform: translateX( 70px ); } }
@keyframes moveRightHot { 0% { opacity: 0; border-width: 2px; } 100% { opacity: 1; border-width: 4px; } }
@keyframes moveUp {
	0% { opacity: 0; transform: translateY( 150px ); } 100% { opacity: 1; transform: translateY( -15px ); } }
@keyframes moveRightLeft {
	  0%  { opacity: 0; transform: translateX( 0 ); }  25% { opacity: 1; transform: translateX(  15px ); } 
	  50% { opacity: 1; transform: translateX( 0 ); }  75% { opacity: 1; transform: translateX( -2.5px ); } 
	 100% { opacity: 1; transform: translateX( 0 ); } 
}
@keyframes moveRight2 {
	from { opacity: 0; transform: translateX( 0 ); } to { opacity: 1; transform: translateX( 50% ); } }

@keyframes forceScale {
	  0% { opacity: 0.1; transform: translate( -50%, 0 ) scale( 1, 1 ); } 
	100% { opacity: 1; transform: translate(  50%, 0 ) scale( 2, 1 ); } }

@keyframes throw {
	0% { opacity: 0; transform: translateY( 115px ); } 50%  { opacity: 1; transform: translateY( -10px ); } 100% { transform: translateY( 115px ); } }

@keyframes drop {
	from { opacity: 0; transform: translateY( 25px ); } to { opacity: 1;  transform: translateY( 125px ); } }

@keyframes compress1 {
	0% { opacity: 0.7; transform: rotateZ( -60deg ) scale( 1, 1 ) translate( 0, 0 ); } 100% { opacity: 1; transform: rotateZ( -60deg ) scale( 1, 0.5 ) translate( 0, 30px ); } }
@keyframes compress {
	  0% { opacity: 0; transform: rotate( -90deg ) scaleX( 1 ) translateY( -50px ); } 
	100% { opacity: 1; transform: rotate( -90deg ) scaleX( 0 ) translateY( -50px ); } }
@keyframes expand {
	  0% { opacity: 0; transform: rotate( -90deg ) scaleX( 0 ) translateY( 40px ); } 
	 95% { opacity: 1; transform: rotate( -90deg ) scaleX( 1 ) translateY( 40px ); } 
	100% { opacity: 0; transform: rotate( -90deg ) scaleX( 1 ) translateY( 50px ); } }
@keyframes expandRight {
	  0% { opacity: 0; transform: translateX( -50% ) scale( 0.1, 1 ); } 
	100% { opacity: 1; transform: translateX( 0 )    scale( 1 ); } }
@keyframes expandContract {
	 0%  { opacity: 0; transform: translateX(  -50% ) scaleX( 1 )     rotate( -90deg ); } 
	25%  { opacity: 1; transform: translateX(   50% ) scaleX( 1.25 )  rotate( -90deg ); } 
	50%  { opacity: 1; transform: translateX(  -50% ) scaleX( 1 )     rotate( -90deg ); } 
	75%  { opacity: 1; transform: translateX( -100% ) scaleX( 0.75 )  rotate( -90deg ); } 
	100% { opacity: 1; transform: translateX(  -50% ) scaleX( 1 )     rotate( -90deg ); } 
}

@keyframes horizBoxPulley {
	  0% { opacity: 0;   transform: rotate( 30deg ) translateX( 0 ); } 
	100% { opacity: 1;   transform: rotate( 30deg ) translateX( 40px ); } }
@keyframes horizStringPulley {
	  0% { opacity: 0;   transform: rotate( -60deg ) translateY( 0 )    scaleY( 1 ); } 
	100% { opacity: 1;   transform: rotate( -60deg ) translateY( 20px ) scaleY( 1.5 ); } }
@keyframes horizBoxPull {
	  0% { opacity: 0;   transform: rotate( 30deg ) translateX( 50px ); } 
	100% { opacity: 1;   transform: rotate( 30deg ) translateX( 30px ); } }
@keyframes horizStringPull {
	  0% { opacity: 0;   transform: rotate( -60deg ) translateY( 40px ); } 
	100% { opacity: 1;   transform: rotate( -60deg ) translateY( 20px ); } }
@keyframes horizPull {
	  0% { opacity: 0;   transform: rotate( 30deg ) translateX( 0 ); } 
	100% { opacity: 1;   transform: rotate( 30deg ) translateX( -20px ); } }

@keyframes vertBoxPulley {
	  0% { opacity: 0; transform: translateY( 0 ); } 100% { opacity: 1; transform: translateY( -35px ); } }
@keyframes vertStringPulley {
  	  0% { opacity: 0; transform: translateY( 0 )     scaleY( 1 ); } 
	100% { opacity: 1; transform: translateY( -15px ) scaleY( 0.5 ); } }
@keyframes vertPullPulley {
	    0% { opacity: 0; transform: translateY( 0 ); } 
	  100% { opacity: 1; transform: translateY( 35px ); } }
@keyframes vertPullStringPulley {
	  0% { opacity: 0;  transform: translateY( -13px ) scaleY( 0.5 ); } 
	100% { opacity: 1;  transform: translateY( 0 )     scaleY( 0.9 ); } }

@keyframes projectileXBackBow { to { opacity: 1; right: -15px; } } @keyframes projectileYBackBow { to { opacity: 1; top: 80px; } }
@keyframes projectileXUpBow { to { opacity: 1; right: 173px; } } @keyframes projectileXDownBow { to { opacity: 0; left: -173px; } }
@keyframes projectileYUpBow { to { opacity: 1; top: -30px; } } @keyframes projectileYDownBow { to { opacity: 0; top: 100px; } }
@keyframes projectileXUp { to { opacity: 1; right: 173px; } } @keyframes projectileXDown { to { opacity: 0; left: -246px; } }
@keyframes projectileYUp { to { opacity: 1; top: 0px; } }     @keyframes projectileYDown { to { opacity: 0; top: 85px; } }

@keyframes projectileBowRotate {
	0% { opacity: 0; transform: rotate( 210deg ); } 95% { opacity: 1; transform: rotate( 150deg ); } 100% { opacity: 0; transform: rotate( 150deg ); } }

@keyframes projectileBowString { 0% { opacity: 1; border-radius: 0 0 100px 70px; } 50%{ opacity: 1; border-radius: 0 0 50px 50px; } 100%{ opacity: 1; border-radius: 0 0 0 0; } }

@keyframes circleTrack1 { 0% { opacity: 0; transform: rotate( 0 ) translateY( -85px ) rotate( 0 ); } 
80% { opacity: 1; transform: rotate( 0 ) translateY( 0 ) rotate( 0 ); } 
100% { opacity: 1; transform: rotate( 45deg ) translateY( 35px ) rotate( -45deg ); } }

@keyframes circleTrack { 0% { opacity: 0; transform: translateY( -85px ); } 
20% { opacity: 1; transform: rotate( 0 ); } 40% { transform: rotate( 180deg ) } 60% { transform: rotate( 270deg ) } 
100% { transform: rotate( 360deg ) }
}

@keyframes circleTrackHoriz1 {
	0% { opacity: 0; transform: translateX( 3px ); } 100% { opacity: 1; transform: translateX( -27px ); } }
@keyframes circleTrackHoriz {
	0% { opacity: 0; right: 0 } 50% { opacity: 1; right: 80px; }
	100% { right: 0; } }

@keyframes circleRotate { 0% { opacity: 0; transform: rotate( 0 ); } 100% { opacity: 1; transform: rotate( 360deg ); } }

@keyframes pendulum { 0% { opacity: 1; transform: rotate( 25deg ); } 100% { opacity: 1; transform: rotate( -25deg ); } }

@keyframes run { 0%, 100% { opacity: 0.2; } 25% { opacity: 1; } }
@keyframes fire { 0% { opacity: 0; } 100% { opacity: 1; } }

@keyframes fireSignal1 { to { opacity: 1; transform: translate( 80px, 90px ); } }

@keyframes fireSignal2 { to { opacity: 1; transform: translate( 65px, -10px ); } }
@keyframes fireSignal3 { 75% { opacity: 1; transform: translate( 0 ); } 100% { opacity: 1; transform: translate( 65px, 45px ); } }

@keyframes tilt { 0% { opacity: 1; transform: rotate( 45deg ); } 100% { opacity: 1; transform: rotate( -45deg ); } }
@keyframes tilt2 { 0% { opacity: 1; transform: rotateZ( 130deg ); } 100% { opacity: 1; transform: rotateZ( 160deg ); } }
@keyframes tilt3 { to { top: 0; left: 0; transform: rotate( 0 ); } }

@keyframes rotate2x { 0% { transform: rotateZ( -45deg ); } 100% { transform: rotateZ( -67.5deg ); } }
@keyframes rotate2xUp1 { 0% { transform: translateY( 0 ) rotate( -45deg ); } 40% { transform: translateY( -10px ) rotateZ( -45deg ); } 100% { transform: translateY( -10px ) rotateZ( -64deg ); } }
@keyframes rotate1-2x { 0% { opacity: 0; } 1% { opacity: 1; } 100% { opacity: 1; transform: rotateZ( -22.5deg ); } }

@keyframes scaleUpDown { 0% { transform: scale( 0.25 ); } 100% { transform: scale( 4 ); } }
@keyframes scaleDownUp { 0% { top: 0; right: 0; transform: scale( -0.1 ); height: 0; } 100% { top: 0; right: 0; transform: scale( -1 ); height: 150px; } }
@keyframes scaleUpDownSide { 0% { transform: scale( 1 ); } 20% { transform: scale( 1.25, 0.75 ); } 40% { transform: scale( 1.1, 0.9 ); } 60% { transform: scale( 0.9, 1.1 ); } 80% { transform: scale( 0.75, 1.25 ); } 100% { transform: scale( 1 ); } }

@keyframes rise { 0% { opacity: 0; height: 0; } 1% { opacity: 1; } 100% { height: 150px; } }
@keyframes run1 { 0% { opacity: 0; width: 0; } 1% { opacity: 1; } 100% { width: 150px; } }
@keyframes slope { 0% { opacity: 0; height: 0; width: 0; bottom: 0; left: 0; } 100% { opacity: 1; height: 210px; width: 210px; bottom: 44px; left: -102px; } }
@keyframes slope1 { 0% { opacity: 0; transform: scale( 0.1 ) rotate( 45deg ); left: -30px; top: 75px; } 100% { opacity: 1; transform: scale( 1 ) roate( 45deg ); left: -30px; top: 75px; } }

@keyframes reducePos { 0% { top: 0; } 90% { opacity: 0.7; top: 124px; transform: scale( 1 ); } 100% { opacity: 0; top: 124px; transform: scale( 0 ); } }
@keyframes reducePos2 { 0% { opacity: 0.7; top: 0; } 90% { opacity: 0.7; top: 100px; transform: rotateX( 45deg ) skew( 34deg ) scale( 1 ); } 100% { opacity: 0; top: 100px; transform: rotateX( 45deg ) skew( 34deg ) scale( 0 ); } }
@keyframes reduceAll { 0% { top: 0; transform: scale( 1 ); } 100% { top: 122px; transform: scale( 0 ); } }

@keyframes grad { 0% { border-color: rgba( 255,255,255,0 ) transparent transparent transparent; } 
				100% { border-color: rgba( 255,255,255,1 ) transparent transparent transparent; } } 


/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */

.background-color--cycle { animation: backgroundColorCycle 60s ease-in-out 0s infinite; }
.color--cycle { animation: colorCycle 60s ease-in-out 0s infinite; }

.animate--in { visibility: visible; animation-fill-mode: both; animation-duration: 1s; animation-play-state: running; }
.animate--out { visibility: visible; animation-direction: reverse; animation-fill-mode: both; animation-duration: 1s; animation-play-state: running; }

.animate--in.bounceIn, .animate--out.bounceIn { animation-name: bounceIn; }
.animate--in.bounceInModal, .animate--out.bounceInModal { animation-name: bounceInModal; }

.animate--in.bounceInRight, .animate--out.bounceInRight { animation-name: bounceInRight; }
.animate--in.bounceInLeft, .animate--out.bounceInLeft { animation-name: bounceInLeft; }
.animate--in.bounceInLeftRotate, .animate--out.bounceInLeftRotate { animation-name: bounceInLeftRotate; }

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

.animate--in.fadeIn, .animate--out.fadeIn { animation-name: fadeIn; }
.animate--in.fadeInDown, .animate--out.fadeInDown { animation-name: fadeInDown; }
.animate--in.fadeInUp, .animate--out.fadeInUp { animation-name: fadeInUp; }

.animate--in.moveRight, .animate--out.moveRight { animation: 1.2s linear 0.8s both moveRight; } 
.animate--in.moveRight2, .animate--out.moveRight2 { animation: 1.5s 0.5s both moveRight; }
.animate--in.moveRightAccel, .animate--out.moveRightAccel { animation: 0.8s ease-in 0.8s both moveRightAccel; }
.animate--in.moveRightAccel1, .animate--out.moveRightAccel1 { animation: 0.8s ease-in 0.8s both moveRightAccel1; }
.animate--in.moveRightAccel2, .animate--out.moveRightAccel2 { animation: 0.8s ease-in 0.8s both moveRight; }
.animate--in.moveRightShort, .animate--out.moveRightShort { animation: 1s linear 0.4s both moveRightShort; }
.animate--in.moveRightLeft, .animate--out.moveRightLeft { animation: 2s ease-out 0.8s both moveRightLeft; }
.animate--in.moveRightHot, .animate--out.moveRightHot { animation: 0.9s ease-in 0.8s both moveRightHot  }
.animate--in.moveUp, .animate--out.moveUp { animation: 1.2s linear 0.8s both moveUp; }
.animate--in.moveUpAccel, .animate--out.moveUpAccel { animation: 0.9s ease-out 0.8s both moveUp; }

.animate--in.forceScale, .animate--out.forceScale { animation: 0.9s ease-in 0.8s both forceScale; }

.animate--in.throw, .animate--out.throw { animation: 1.5s ease-in-out 0.8s both throw; }
.animate--in.throw1, .animate--out.throw1 { animation: 1.5s ease-in-out 0.8s both throw; }
.animate--in.throw2, .animate--out.throw2 { animation: 1.5s ease-in-out 0.9s both throw; }
.animate--in.throw3, .animate--out.throw3 { animation: 1.5s ease-in-out 1s both throw; }
.animate--in.throw4, .animate--out.throw4 { animation: 1.5s ease-in-out 1.1s both throw; }
.animate--in.drop, .animate--out.drop { animation: 1.5s ease-in 0.8s both drop; } 

.animate--in.compress1, .animate--out.compress1 { animation: 0.2s ease-in 0.8s both compress1; }
.animate--in.compress, .animate--out.compress { animation: 1.5s ease-in 0.8s both compress; }
.animate--in.expand, .animate--out.expand { animation: 1.5s ease-in 0.8s both expand; }
.animate--in.expandRight, .animate--out.expandRight { animation: 0.9s linear 0.8s both expandRight; }
.animate--in.expandContract, .animate--out.expandContract { animation: 2s ease-out 0.8s both expandContract; }

.animate--in.horizStringPulley, .animate--out.horizStringPulley { animation: 1s linear 0.8s both horizStringPulley; }
.animate--in.horizBoxPulley, .animate--out.horizBoxPulley { animation: 1s linear 0.8s both horizBoxPulley; }
.animate--in.horizStringPull, .animate--out.horizStringPull { animation: 1s linear 0.8s both horizStringPull; }
.animate--in.horizBoxPull, .animate--out.horizBoxPull { animation:  1s linear 0.8s both horizBoxPull; }
.animate--in.horizPull, .animate--out.horizPull { animation:  1s linear 0.8s both horizPull; }

.animate--in.vertStringPulley, .animate--out.vertStringPulley { animation: 1s linear 0.8s both vertStringPulley; }
.animate--in.vertBoxPulley, .animate--out.vertBoxPulley { animation: 1s linear 0.8s both vertBoxPulley; }
.animate--in.vertPullStringPulley, 
.animate--out.vertPullStringPulley { animation: 1s linear 0.8s both vertPullStringPulley; }
.animate--in.vertPullPulley, .animate--out.vertPullPulley { animation: 1s linear 0.8s both vertPullPulley; }

.animate--in.slideRight1, .animate--out.slideRight1 { animation: 1s ease-in both slideRight1; }
.animate--in.slideRight, .animate--out.slideRight { animation: 1.2s ease-in both slideRight; }
.animate--in.slideRightSteep, .animate--out.slideRightSteep { animation: 1s ease-in both slideRightSteep; }
.animate--in.slideRightFriction, .animate--out.slideRightFriction { animation: 1.2s ease-in 0.8s both slideRight; }
.animate--in.slideRightSpring, .animate--out.slideRightSpring { animation: 1.4s ease-in 0.8s both slideRightSpring; }
.animate--in.slideRightCurved, .animate--out.slideRightCurved { animation-name: slideXDown, slideYDown, slideRotate; animation-duration: 1s; animation-timing-function: ease-in; }

.animate--in.projectile, .animate--out.projectile { 
	animation-name: projectileXUp, projectileXDown, projectileYUp, projectileYDown, projectileBowRotate; animation-duration: 1s;
	animation-delay: 0.2s, 1.2s, 0.2s, 1.2s, 0; animation-timing-function: linear, linear, ease-out, ease-in, ease-in; }
	
.animate--in.projectileBowString, .animate--out.projectileBowString { animation: 0.8s ease-in 0.2s both projectileBowString; }
.animate--in.projectileBow, .animate--out.projectileBow {  
	animation-name: projectileXBackBow, projectileYBackBow, projectileXUpBow, projectileXDownBow, projectileYUpBow, projectileYDownBow, projectileBowRotate; animation-duration: 1s, animation-delay: 0, 0, 1s, 2s, 1s, 2s, 0;
	animation-timing-function: linear, linear, linear, linear, ease-out, ease-in, ease-in; }

.animate--in.circleTrack, .animate--out.circleTrack { animation: 0.8s ease-in 0.8s both circleTrack; }
.animate--in.circleTrackHoriz, .animate--out.circleTrackHoriz { animation: 0.8s ease-in 0.8s both circleTrackHoriz; }
.animate--in.circleRotate, .animate--out.circleRotate { animation: ease-in-out 2s circleRotate; }
.animate--in.circleRotate1, .animate--out.circleRotate1 { animation: 2s ease-in-out circleRotate; }

.animate--in.pendulum, .animate--out.pendulum { 
	animation-name: pendulum; animation-delay: 0; animation-duration: 1s; animation-timing-function: ease-in-out; animation-direction: alternate; animation-iteration-count: 2; }

.animate--in.tilt, .animate--out.tilt { animation: 1.5s ease-in-out infinite alternate tilt; }
.animate--in.tilt2, .animate--out.tilt2 { animation: 1.5s ease-in-out infinite alternate tilt2; }
.animate--in.tilt3, .animate--out.tilt3 { animation: 2s ease-in-out 1s both tilt3; }

.animate--in.rotate2x, .animate--out.rotate2x { animation: 1.5s ease-in 1s both rotate2x; }
.animate--in.rotate1-2x, .animate--out.rotate1-2x { animation: 1.5s ease-in 1s both rotate1-2x; }
.animate--in.rotate2xUp1, .animate--out.rotate2xUp1 { animation: 1.5s ease-in 2s both rotate2xUp1; }
	
.animate--in.fire,   .animate--out.fire { animation: 1s ease-in 1.2s infinite both fire; }
.animate--in.fire1, .animate--out.fire1 { animation: 1s ease-in 0 infinite both fire; }
.animate--in.fire2, .animate--out.fire2 { animation: 1s ease-in 0 infinite both fire; }
.animate--in.fire3, .animate--out.fire3 { animation: 1s ease-in 1.3s infinite both fire; }

.animate--in.fireSignal1, .animate--out.fireSignal1 { animation: 1s ease-in 0s infinite both fireSignal1; }
.animate--in.fireSignal2, .animate--out.fireSignal2 { animation: 1s ease-in 0s infinite both fireSignal2; }
.animate--in.fireSignal3, .animate--out.fireSignal3 { animation: 1s ease-in 1.2s infinite fireSignal3; }

.animate--in.run1o, .animate--out.run1o { animation: 4s 1s infinite both run; }
.animate--in.run2o, .animate--out.run2o { animation: 4s 2s infinite both run; }
.animate--in.run3o, .animate--out.run3o{ animation: 4s 3s infinite both run; }

.animate--in.scaleUpDown, .animate--out.scaleUpDown { animation: 4s 2s infinite alternate both scaleUpDown; }
.animate--in.scaleUpDownSide, .animate--out.scaleUpDownSide { animation: 4s 1s infinite both scaleUpDownSide; }
.animate--in.scaleDownUp, .animate--out.scaleDownUp { animation: 4s 1s both scaleDownUp; }

.animate--in.run2, .animate--out.run2 { animation: 2s 1s both run1; }
.animate--in.rise, .animate--out.rise { animation: 2s 3s both rise; }
.animate--in.slope, .animate--out.slope { animation: 2s 5s both slope; }
.animate--in.fadeIn0, .animate--out.fadeIn0 { animation: 2s 1s both fadeIn; }
.animate--in.fadeIn1, .animate--out.fadeIn1 { animation: 2s 3s both fadeIn; }
.animate--in.fadeIn2, .animate--out.fadeIn2 { animation: 2s 5s both fadeIn; }

.animate--in.rise1, .animate--out.rise1 { animation: 2s 2s both rise; }
.animate--in.run1, .animate--out.run1 { animation: 2s 2s both run1; }
.animate--in.slope1, .animate--out.slope1 { animation: 2s 2.8s both slope1; }

.animate--in.reducePos2, .animate--out.reducePos2 { animation: 2s 2s both reducePos2; }
.animate--in.reduceAll, .animate--out.reduceAll { animation: 2s 2s both reduceAll; }
.animate--in.reducePos, .animate--out.reducePos { animation: 2s 2s both reducePos; }

.animate--in.grad, .animate--out.grad { animation: 1.5s 0.5s both grad; }

.animate--out.bounceIn, .animate--out.bounceInModal, .animate--out.bounceInRight, .animate--out.bounceInLeft, .animate--out.bounceInLeftRotate, .animate--out.fadeIn, .animate--out.fadeInDown, .animate--out.fadeInUp, .animate--out.moveRight, .animate--out.moveRightAccel, .animate--out.moveRightShort, .animate--out.moveRightLeft, .animate--out.forceScale, .animate--out.slideRight, .animate--out.throw, .animate--out.drop, .animate--out.compress, .animate--out.expand, .animate--out.expandRight, .animate--out.moveRightHot, .animate--out.expandContract, .animate--out.horizStringPulley, .animate--out.horizBoxPulley, .animate--out.horizStringPull, .animate--out.horizBoxPull, .animate--out.horizPull, .animate--out.vertStringPulley, .animate--out.vertBoxPulley, .animate--out.vertPullStringPulley, .animate--out.vertPullPulley, .animate--out.slideRightSteep, .animate--out.slideRightCurved, .animate--out.slideRightFriction, .animate--out.circleTrack, .animate--out.slideRightSpring, .animate--out.projectile, .animate--out.projectileBowString, .animate--out.projectileBow, .animate--out.opacityFlux, .animate--out.fire, .animate--out.fire1, .animate--out.fire2, .animate--out.fire3, .animate--out.tilt, .animate--out.rotate2x, .animate--out.rotate2xUp1, .animate--out.rotate1-2x, .animate--out.fireSignal, .animate--out.run1, .animate--out.run2, , .animate--out.run1o, .animate--out.run2o, .animate--out.run3o, .animate--out.tilt2, .animate--out.scaleUpDown, .animate--out.scaleUpDownSide, .animate--out.rise, .animate--out.run, .animate--out.slope, .animate--out.slope1, .animate--out.reduceHeight, .animate--out.reduceAll, .animate--out.grad {
	animation-direction: reverse; }

@media screen and ( width < 100dvh ) {

	section.carousel--container { width: 60%; left: 20%; }
	.dropdown--container { width: calc( 100% - 1rem ); }
	
	emoji-hang--input { font-size: 0.7rem );
}