@import "animations.css";

/* Color definitions */
:root {
	--primary: #2e4468;
	--primarydark: #4a618691;
	--primaryhalf: #526c96;
	--primarylight: #2e4468af;
	--primarysuperlight: #2e4468;
	--secondary: #3c763d;
	--secondarymedium: #2b552c;
	--secondarydark: #162c17;
	--secondarylight: #77df79;
	--secondaryhalf: #54a857;
	--tertiary: #2e4468;
	--tertiarylight: #7285a3;
	--quartary: #ca5800;
	--quartarydark: #351802;
	--quartarylight: #c49978;
	--cp-octagon: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	--cp-triangle: polygon(50% 0%, 0% 100%, 100% 100%);
	--cp-trapezoid: polygon(32% 0, 100% 1%, 100% 100%, 0% 100%);
	--cp-parallelogram: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	--cp-rhombus: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	--cp-pentagon: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
	--cp-hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	--cp-heptagon: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
	--cp-nonagon: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
	--cp-decagon: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
	--cp-bevel: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
	--cp-rabbet: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
	--cp-left-arrow: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
	--cp-right-arrow: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
	--cp-left-point: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
	--cp-right-point: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
	--cp-left-chevron: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
	--cp-right-chevron: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
	--cp-star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	--cp-cross: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
	--cp-message: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
	--cp-close: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
	--cp-frame: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}

/* MAIN */
pre {
	display: block;
	padding: 9.5px;
	margin: 0 0 10px;
	line-height: 1.4286;
	color: #333;
	word-break: break-all;
	word-wrap: break-word;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
}

pre code {
	font-size: 87.5%;
	color: #db0c6b;
	word-break: break-word;
}

code {
	color: #db0c6b;
}

.Lesson > p,
.outer-element > p {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

mark {
	padding: 0.2em;
	background-color: yellow;
}

#loading {
	position: fixed;
	background: white;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	color: var(--primaryhalf);
	overflow: hidden;
	font-family: "Open Sans Condensed";
	z-index: 9999;
}

#loading-author {
	position: relative;
	width: 100%;
	margin-top: calc(40px + 2.2vw);
	margin-bottom: 0;
	text-align: center;
	font-size: calc(16px + 0.83vw);
	font-weight: 400;
	animation: anim-fade-in 1.2s forwards, anim-scale-up 1.2s forwards;
	opacity: 0;
}

#loading-titling {
	position: relative;
	margin-top: 1.5%;
	width: 100%;
	text-align: center;
	font-size: calc(55px + 2.85vw);
	font-weight: 400;
	font-family: "Open Sans Condensed";
	text-shadow: 1px 1px 4px silver;
	animation: anim-fade-in 1.3s forwards, anim-scale-up 2s forwards;
}

#loading-description {
	position: relative;
	margin-top: 1.5%;
	width: 100%;
	height: auto;
	text-align: center;
	font-size: calc(26px + 1.35vw);
	animation: anim-fade-in 2s, anim-scale-up 2s;
}

#loading-objectives-title {
	font-size: calc(22px + 0.75vw);
	font-family: "Open Sans Condensed";
}

#loading-objectives {
	position: relative;
	padding: 45px;
	color: silver;
	text-shadow: 1px 1px 2px black;
	font-weight: 400;
	width: 100%;
	text-align: left;
	font-size: calc(18px + 0.75vw);
	animation: anim-fade-in 1.3s forwards, anim-scale-up 2s forwards;
}

#loading-bar {
	position: relative;
	margin-left: calc((100% - 400px) / 2);
	margin-top: calc(16px + 0.8vw);
	width: 400px;
	height: 8px;
	border-radius: 4px;
	border-top: 1px black;
	border-bottom: 1px black;
	background-image: linear-gradient(to right, darkslategray, darkgrey, ghostwhite);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset, 1px 1px 2px darkslategray;
	border: solid px black;
	animation: anim-fade-in 1s forwards;
}

#loading-bar::after {
	position: absolute;
	content: " ";
	right: 0;
	bottom: 0;
	width: 100%;
	height: 8px;
	border-radius: 5px;
	border-top: 1px white;
	border-bottom: 1px white;
	background: white;
	z-index: 2;
	animation: shrink 6s forwards, anim-fade-in 1s;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

#loading-date {
	position: absolute;
	bottom: calc(15px + 0.8vw);
	left: 50px;
	width: 300px;
	height: auto;
	font-size: calc(16px + 0.83vw);
	font-family: "Open Sans Condensed";
	font-weight: 400;
	text-shadow: 1px 1px 2px silver;
	animation: focus-in 1.2s, anim-fade-in 1.2s;
}

#loading-logo {
	position: absolute;
	bottom: calc(15px + 0.8vw);
	right: 50px;
	width: calc(150px + 7.7vw);
	height: auto;
	animation: focus-in 1.2s, anim-fade-in 1.2s;
}

#loading-title {
	font-family: "Open Sans", sans-serif;
	color: #2e4468;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 1px;
	padding-top: 60px;
	padding-left: 80px;
}

#noscript-background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: white;
	z-index: 9999;
}

#noscript-header {
	width: 100%;
	text-align: center;
	top: 50%;
	position: absolute;
	text-shadow: 1px 1px 4px #2f4f4f;
	font-family: "Open Sans Condensed";
	font-size: 5rem;
	color: silver;
}

#App .Lesson {
	min-height: 100vh;
}

.Lesson {
	font-family: "Open Sans", sans-serif;
	background-color: #fffff8;
	font-size: 16px !important;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 15px 5px 15px;
	width: 100%;
	height: 100%;
	display: block;
}

.title {
	font-weight: 600;
	font-stretch: extra-expanded;
	color: #2e4468;
}

.focus-glow {
	box-shadow: 0px 0px 15px 5px gold !important;
}

.nav-tabs .nav-item {
	font-family: "Open Sans Condensed";
	font-size: 18px;
	margin-bottom: 8px;
}

.list-group-item.active {
	z-index: 2;
	color: #fff;
	background-color: var(--tertiarylight);
	border-color: var(--tertiarylight);
}

.Presentation {
	font-family: "Open Sans", sans-serif;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	display: block;
}

.panel-heading {
	background: rgba(176, 192, 222, 0.15);
	background-image: none;
}

.panel-default {
	border: 1px solid  rgba(92, 92, 92, 0.6);
	border-radius: 6px;
	box-shadow: 0 0 8px rgba(92, 92, 92, 0.5);
}

.popover {
	font-family: "Open Sans", sans-serif;
}

.btn {
	font-family: "Open Sans", sans-serif;
	box-shadow: 0.5px 0px 1px rgba(60, 60, 60, 1), inset 0.5px 0px 1px rgba(160, 160, 160, 1);
	touch-action: manipulation;
}

.btn-primary {
	background: #2e4468;
	border-color: black;
}

.btn-primary:hover {
	box-shadow: inset 1px 1px 5px white;
	transition: 0.3s;
}

.btn-primary.disabled,
.btn-primary:disabled {
	box-shadow: none !important;
	background-color: #2e4468;
	border-color: #2e4468;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #025aa5;
	background-image: none;
	border-color: #01549b;
}

.btn-secondary {
	transition: all 0.4s ease-in-out;
}

.btn-secondary:hover {
	box-shadow: inset 1px 1px 5px white;
}

.btn-success {
	background: #3c763d;
	background-image: url("https://isle.heinz.cmu.edu/sublime01_1543690264803.png");
	border-color: black;
	box-shadow: inset 0 0 0 transparent;
	transition: all 0.4s ease-in-out;
}

.btn-success:hover {
	box-shadow: inset 1px 1px 5px white;
}

.btn-success.disabled,
.btn-success:disabled {
	box-shadow: none !important;
	background-color: #5cb85c;
	border-color: #5cb85c;
}

.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
	color: #fff;
	background-color: #449d44;
	background-image: none;
	border-color: #419641;
}

.btn-xs {
	box-shadow: none;
}

.btn-group-xs {
	box-shadow: none;
}

.well {
	background-image: none;
	background-color: gainsboro;
}

.date-selection {
	box-shadow: none;
	border: 1px solid rbg(64, 64, 64);
}

.active-button {
	background: slategray;
	color: white;
	text-shadow: none;
}

.actionNote {
	white-space: pre-wrap;
}

.clickable {
	background: transparent;
	cursor: pointer;
}

.empty-button {
	background: none;
	border: none;
	cursor: pointer;
}

.clickable:hover {
	background: lightcoral;
}

@-webkit-keyframes shine {
	0%,
	10% {
		background-position: -1000px;
	}

	20% {
		background-position: top left;
	}

	66% {
		background-position: 1000px;
	}

	100% {
		background-position: -1000px;
	}
}

h1 {
	color: #2e4468;
	font-weight: 700;
	font-family: "Open Sans Condensed";
	margin: 0.3em 0;
}

.Lesson h1 {
	font-size: 40px;
}

.Lesson > h1,
.outer-element > h1,
.Lesson > h2,
.outer-element > h2,
.Lesson > h3,
.outer-element > h3,
.Lesson > h4,
.outer-element > h4,
.Lesson > h5,
.outer-element > h5,
.Lesson > h6,
.outer-element > h6 {
	text-align: center;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.Lesson > p,
.outer-element > p,
.Lesson > pre,
.outer-element > pre {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.Lesson > img,
.Lesson > p > img,
.outer-element > img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.Lesson hr,
.Presentation hr {
	height: 1px;
	background: red; /* For browsers that do not support gradients */
	background: linear-gradient(to right, transparent, var(--primarylight) 12%, var(--quartarylight) 48%, var(--primarylight) 52%, transparent 92%); /* Standard syntax */
}

h2 {
	color: #3c763d;
	font-weight: 700;
	font-family: "Open Sans Condensed";
	-webkit-background-clip: text;
	background-image: linear-gradient(to right, var(--secondaryhalf), var(--secondary) 4%), linear-gradient(to bottom, transparent, var(--quartary));
}

.Lesson h2 {
	font-size: 36px;
}

h3 {
	color: #2e4468;
	font-weight: 700;
	font-family: "Open Sans Condensed";
}

.Lesson h3 {
	font-size: 24px;
	transition: color 1.4s ease-in-out;
}

.Lesson h3:hover {
	color: var(--tertiarylight);
}

h4 {
	color: #ca5800;
	font-weight: 600;
	font-family: "Open Sans Condensed";
}

.Lesson h4 {
	font-size: 24px;
	transition: color 1.4s ease-in-out;
}

.Lesson h4:hover {
	color: var(--quartarylight);
}

.Lesson th,
.Lesson td {
	padding: 5px;
}

.nav-link,
.dropdown-item {
	color: #2e4468;
}

.navbar-light .navbar-nav .nav-link {
	color: rgba(0, 0, 0, 0.6);
}

.navbar-light .navbar-nav .active {
	color: rgba(0, 0, 0, 1);
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--tertiarylight);
}

.dropdown-item:disabled,
.dropdown-item.disabled {
	color: #6c757d;
	background-color: transparent;
}

a {
	color: #016ee3;
}

.nav-pills .nav-link.active {
	background-color: var(--tertiarylight);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
	color: #ca5800;
	cursor: default;
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom-color: transparent;
	font-weight: 600px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	color: black;
	background-color: rgb(255, 242, 229);
}

.Lesson > ul,
.outer-element > ul {
	list-style-position: outside !important;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
}

.Lesson > ol,
.outer-element > ol {
	list-style-position: outside !important;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
}

.Lesson table,
.Presentation table {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	margin-bottom: 1rem;
	color: #212529;
}

.Lesson table th,
.Presentation table th,
.Lesson table td,
.Presentation table td {
	padding: 0.75rem;
	vertical-align: top;
	border-top: 1px solid #dee2e6;
}

.Lesson table thead th,
.Presentation table thead th {
	vertical-align: bottom;
	border-bottom: 2px solid #dee2e6;
}

.Lesson table tbody + tbody,
.Presentation table tbody + tbody {
	border-top: 2px solid #dee2e6;
}

.Lesson > blockquote,
.outer-element > blockquote,
.Presentation blockquote {
	font-size: 1.4em;
	width: 60%;
	max-width: 900px;
	margin: 50px auto;
	color: var(--primaryhalf);
	padding: 1.2em 50px 1.2em 75px;
	border-left: 8px solid var(--primaryhalf);
	line-height: 1.5;
	position: relative;
	background: #EDEDED;
}

.Lesson > blockquote::before,
.outer-element > blockquote::before,
.Presentation blockquote::before {
	font-family: Arial;
	content: "\201C";
	color: var(--primaryhalf);
	font-size: 4em;
	position: absolute;
	left: 10px;
	top: -0.2em;
}

.Lesson > blockquote::after,
.outer-element > blockquote::after,
.Presentation blockquote::after {
	font-family: Arial;
	content: "\201D";
	color: var(--primaryhalf);
	font-size: 4em;
	position: absolute;
	right: 20px;
	bottom: -0.4em;
}

.Lesson > .alert,
.outer-element > .alert {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.example-multiple-targets::after {
	content: attr(data-count);
	display: block;
}

.row.no-gutter {
	margin-left: 0px;
	margin-right: 0px;
}

.row.no-gutter [class*="col-"]:not(:first-child),
.row.no-gutter [class*="col-"]:not(:last-child) {
	padding-right: 2px;
	padding-left: 2px;
}

.centered {
	display: block;
	margin: 0 auto !important;
}

.center {
	display: block;
	margin: 0 auto !important;
	text-align: center;
}

.modal-container {
	position: relative;
}

.modal-container.modal,
.modal-container .modal-backdrop {
	position: absolute;
}

.unselectable {
	-khtml-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none; /* From IE10 only */
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	cursor: inherit;
}

.modal-100w {
	max-width: none !important;
	width: 100%;
	margin: 0;
	padding: 0;
}

.modal-90w {
	max-width: none !important;
	width: 90%;
}

.modal-75w {
	max-width: none !important;
	width: 75%;
}

.modal-60w {
	max-width: none !important;
	width: 60%;
}

.modal-50w {
	max-width: none !important;
	width: 50%;
}

.modal-40w {
	max-width: none !important;
	width: 40%;
}

.modal-30w {
	max-width: none !important;
	width: 30%;
}

label {
	font-weight: 600;
	font-stretch: extra-expanded;
	color: #2e4468;
}

.multicard_memory {
	position: abolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.multicard_memory img {
	width: 100%;
	height: 100%;
}

.sublime_01 {
	width: 80%;
	left: 0;
	right: 0;
	top: 50px;
	background-image: url("https://isle.heinz.cmu.edu/micro_carbon_big_1543861751440.png");
	height: 500px;
	margin: auto;
	padding: 10px;
}

.sublime_02 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background-image: url("https://isle.heinz.cmu.edu/white_carbonfiber_1543854970404.png");
}

.screenreader {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/********************** ANIMATION CLASSES **************************/

@keyframes anim-fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes anim-fade-out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes anim-slide-up {
	0% {
		height: 400px;
	}

	100% {
		height: 0;
	}
}

@keyframes minimal-scale-in {
	0% {
		-webkit-transform: scale(1);
	}

	100% {
		-webkit-transform: scale(1.03);
	}
}

@keyframes minimal-scale-out {
	0% {
		-webkit-transform: scale(1.03);
	}

	100% {
		-webkit-transform: scale(1);
	}
}


@keyframes anim-rotate-in {
	0% {
		-webkit-transform: scale(0) rotate(-120deg);
	}

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

@keyframes anim-rotate-out {
	0% {
		transform: rotate(0deg) scale(1);
	}

	100% {
		transform: rotate(720deg) scale(0);
	}
}


@keyframes anim-scale-up {
	0% {
		transform: scale(0.01);
	}

	100% {
		transform: scale(1);
	}
}

.anim-scale-up {
	animation-name: anim-scale-up;
	animation-duration: 0.3s;
}


@keyframes anim-scale-down {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}

.anim-scale-down {
	animation-name: anim-scale-down;
	animation-duration: 0.3s;
}

@-webkit-keyframes tracking-in {
	0% {
		letter-spacing: 1em;
		-webkit-transform: translateZ(400px) translateY(-300px);
		transform: translateZ(400px) translateY(-300px);
		opacity: 0;
	}

	40% {
		opacity: 0.6;
	}

	100% {
		-webkit-transform: translateZ(0) translateY(0);
		transform: translateZ(0) translateY(0);
		opacity: 1;
	}
}

/**
* ----------------------------------------
* animation shrink
* ----------------------------------------
*/
@keyframes shrink {
	0% {
		width: 100%;
	}

	100% {
		width: 0%;
	}
}

/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
	0% {
		-webkit-transform: translateX(-1000px);
		transform: translateX(-1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-in-left {
	0% {
		-webkit-transform: translateX(-1000px);
		transform: translateX(-1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

/**
* ----------------------------------------
* animation slide-in-right
* ----------------------------------------
*/
@-webkit-keyframes slide-in-right {
	0% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-in-right {
	0% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-right {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}
}

@keyframes slide-out-right {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}
}


/**
* ----------------------------------------
* animation focus-in
* ----------------------------------------
*/
@-webkit-keyframes focus-in {
	0% {
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}

	100% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		opacity: 1;
	}
}

.text-focus-in {
	-webkit-animation: focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
	animation: focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/**
* ----------------------------------------
* animation pop-up-top
* ----------------------------------------
*/

@keyframes pop-up-top {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		text-shadow: none;
	}

	100% {
		-webkit-transform: translateY(-50px);
		transform: translateY(-50px);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
	}
}

.text-pop-up-top {
	-webkit-animation: pop-up-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: pop-up-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/**
* ----------------------------------------
* animation bounce-top
* ----------------------------------------
*/
@keyframes bounce-in-top {
	0% {
		-webkit-transform: translateY(-45px);
		transform: translateY(-45px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 1;
	}

	24% {
		opacity: 1;
	}

	40% {
		-webkit-transform: translateY(-24px);
		transform: translateY(-24px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	65% {
		-webkit-transform: translateY(-12px);
		transform: translateY(-12px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	82% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	93% {
		-webkit-transform: translateY(-4px);
		transform: translateY(-4px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	25%,
	55%,
	75%,
	87% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	100% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
}


.bounce-top {
	-webkit-animation: bounce-in-top 0.9s both;
	animation: bounce-in-top 0.9s both;
}


/* ----------------------------------------
* animation jello-horizontal
* ----------------------------------------
*/
@-webkit-keyframes jello-horizontal {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(0.95, 1.05, 1);
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, 0.95, 1);
		transform: scale3d(1.05, 0.95, 1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes jello-horizontal {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		-webkit-transform: scale3d(0.95, 1.05, 1);
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		-webkit-transform: scale3d(1.05, 0.95, 1);
		transform: scale3d(1.05, 0.95, 1);
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	animation: jello-horizontal 0.9s both;
}

/**
* ----------------------------------------
* animation wobble-top
* ----------------------------------------
*/
@-webkit-keyframes wobble-top {
	0%,
	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}

	15% {
		-webkit-transform: translateX(-30px) rotate(6deg);
		transform: translateX(-30px) rotate(6deg);
	}

	30% {
		-webkit-transform: translateX(15px) rotate(-6deg);
		transform: translateX(15px) rotate(-6deg);
	}

	45% {
		-webkit-transform: translateX(-15px) rotate(3.6deg);
		transform: translateX(-15px) rotate(3.6deg);
	}

	60% {
		-webkit-transform: translateX(9px) rotate(-2.4deg);
		transform: translateX(9px) rotate(-2.4deg);
	}

	75% {
		-webkit-transform: translateX(-6px) rotate(1.2deg);
		transform: translateX(-6px) rotate(1.2deg);
	}
}


.wobble-top {
	-webkit-animation: wobble-hor-top 0.8s both;
	animation: wobble-hor-top 0.8s both;
}

.flip-scale-up-hor {
	-webkit-animation: flip-scale-up-hor 0.5s linear both;
	animation: flip-scale-up-hor 0.5s linear both;
}

.elegantshadow {
	color: #131313;
	letter-spacing: 0.15em;
	text-shadow:
		1px -1px 0 #767676,
		-1px 2px 1px #737272,
		-2px 4px 1px #767474,
		-3px 6px 1px #787777,
		-4px 8px 1px #7b7a7a,
		-5px 10px 1px #7f7d7d,
		-6px 12px 1px #828181,
		-7px 14px 1px #868585,
		-8px 16px 1px #8b8a89,
		-9px 18px 1px #8f8e8d,
		-10px 20px 1px #949392,
		-11px 22px 1px #999897,
		-12px 24px 1px #9e9c9c,
		-13px 26px 1px #a3a1a1,
		-14px 28px 1px #a8a6a6,
		-15px 30px 1px #adabab,
		-16px 32px 1px #b2b1b0,
		-17px 34px 1px #b7b6b5,
		-18px 36px 1px #bcbbba,
		-19px 38px 1px #c1bfbf,
		-20px 40px 1px #c6c4c4,
		-21px 42px 1px #cbc9c8,
		-22px 44px 1px #cfcdcd,
		-23px 46px 1px #d4d2d1,
		-24px 48px 1px #d8d6d5,
		-25px 50px 1px #dbdad9,
		-26px 52px 1px #dfdddc,
		-27px 54px 1px #e2e0df,
		-28px 56px 1px #e4e3e2;
}

.tv-screen-effect {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_TVScreen01.jpg");
	background-size: 800px auto;
	-webkit-background-clip: text;
	animation: moving-background 15s alternate infinite;
}

.tv-screen-effect2 {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_tv2.jpg");
	background-size: 800px auto;
	-webkit-background-clip: text;
	animation: moving-background 7.3s linear infinite;
	text-shadow: 0 0 2px rgba(100, 0, 0, 0.2);
}

.tv-screen-effect3 {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_tv3.jpg");
	background-size: 100% 100%;
	-webkit-background-clip: text;
	animation: moving-background-right 7.3s linear infinite;
}

.tv-screen-effect4 {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_tv3.jpg");
	background-size: 1920px 1080px;
	-webkit-background-clip: text;
	animation: moving-background-down 25.3s linear infinite alternate;
}

.tv-screen-effect5 {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_tv3.jpg");
	background-size: 1920px 1080px;
	-webkit-background-clip: text;
	animation: moving-background-down-loop 5.3s linear infinite;
}

.tv-screen-effect6 {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_tv3.jpg");
	background-size: 1920px 1080px;
	-webkit-background-clip: text;
	animation: blurring-background  5.3s linear infinite;
}

.cloud-effect1 {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_cloud01.jpg");
	background-size: 1920px 1080px;
	-webkit-background-clip: text;
	animation: moving-background-down-loop 15.3s linear infinite;
}

.moving-colors {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_cloud01.jpg");
	background-size: 1920px 1080px;
	-webkit-background-clip: text;
	animation: moving-colors 8.3s linear infinite;
}

.grunge-effect1 {
	color: transparent;
	background-image: url("https://isle.heinz.cmu.edu/Summertime_grunge01.jpg");
	background-size: 500px auto;
	-webkit-background-clip: text;
	animation: grunge-background-right 5.3s linear infinite;
}


/********************** LIST OF FORMS **************************/

.form-effect-bird {
	font-family: Helvetica, sans-serif;
	color: white;
	font-size: 31.5em;
	margin: 0;
	-webkit-mask-image: url("https://isle.heinz.cmu.edu/Summertime_bird3.png");
	-webkit-mask-repeat: repeat;
	-webkit-mask-size: inherit;
	-webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 1.5));
}

.multiply {
	color: white;
	mix-blend-mode: multiply;
	background-color: rgb(59, 2, 6);
}


/**************************** SHAPES ****************************/

.shape-wrap-around-image {
	float: left;
	shape-outside: url("https://isle.heinz.cmu.edu/Summertime_bird3.png");
	shape-image-threshold: 0;
	shape-margin: 30px;
}

.contextmenu-fullscreen {
	height: 100%;
	width: 100%;
}

.react-contextmenu,
.CtxtMenu_Menu {
	font-size: 28px;
	z-index: 1004;
	box-shadow: 0 0 2px darkgrey !important;
	font-family: "Open Sans Condensed" !important;
}

.Pane1 .react-contextmenu {
	font-size: 18px;
}

.react-contextmenu-item.react-contextmenu-item::after {
	color: rgb(120, 120, 120);
}

.react-contextmenu-item.react-contextmenu-item .fa-cogs {
	color: rgb(120, 120, 120);
}

.react-contextmenu-item.react-contextmenu-item .fa-cogs:hover {
	color: black;
}

.react-contextmenu-item.react-contextmenu-item--active::after {
	color: black;
}

.react-contextmenu-item.react-contextmenu-item--active,
.react-contextmenu-item.react-contextmenu-item--selected {
	color: #373a3c;
	background-color: #ffffce;
	border-color: #ffffce;
	text-decoration: none;
}

.react-contextmenu-item.react-contextmenu-item--disabled,
.react-contextmenu-item.react-contextmenu-item--disabled:hover {
	color: #878a8c;
	background-color: transparent;
	border-color: rgba(0, 0, 0, 0.15);
}

.react-contextmenu-item--divider {
	margin-bottom: 3px;
	padding: 2px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	cursor: inherit;
}

.react-contextmenu-item--divider:hover {
	background-color: transparent;
	border-color: rgba(0, 0, 0, 0.15);
}

.react-contextmenu-item.react-contextmenu-submenu {
	padding: 0;
	min-width: 250px;
}

.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
	content: "▶";
	display: inline-block;
	position: absolute;
	right: 7px;
}

.check-list {
	list-style: none;
}

.check-list li {
	position: relative;
	padding-left: 40px;
	text-indent: 0;
}

.check-list li::before {
	position: absolute;
	top: 15px;
	left: 0;
	content: " ";
	width: 50px;
	height: 50px;
	background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

.unstyled-link {
	color: inherit !important;
	text-decoration: inherit !important;
}

.btn-group-toggle .btn.active {
	font-weight: 600;
}

#pwa-notification {
	visibility: hidden;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 8px;
	position: fixed;
	z-index: 999;
	left: 1%;
	top: 2%;
}

#pwa-notification.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s;
	animation: fadein 0.5s;
}