@charset "UTF-8";
/* normalize */
img, legend {
  border: 0;
}

legend, td, th {
  padding: 0;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

a {
  background-color: transparent;
}

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

abbr[title] {
  border-bottom: 1px dotted;
}

b, optgroup, strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre, textarea {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* vars */
/* mixins */
/* main scss */
* {
  box-sizing: border-box;
}

body {
  background-color: #000;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  overflow: hidden;
}

input[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
#main-wrapper {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
}

h3.badge-name {
  color: rgb(0, 51, 102);
  margin-bottom: -0.5em;
  text-decoration: underline;
  text-decoration-style: double;
}

.bg {
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.bg[data-type=stars] {
  background-image: url(/images/stars_bg.jpg);
}

.bg[data-type=planet] {
  background-image: url(/images/stars_bg_planet.jpg);
}

.bg[data-type=grid] {
  background-image: url(/images/stars_bg_planet_grid.jpg);
}

.bg[data-type=grid-no-planet] {
  background-image: url(/images/stars_bg_grid.jpg);
}

.bg[data-type=planet-solo] {
  background-image: url(/images/green_planet.png);
}

#stage {
  text-align: center;
  padding-top: 78px;
}

#display {
  pointer-events: none;
}

#ui-wrapper {
  pointer-events: none;
}

#ui {
  text-align: center;
  pointer-events: none;
}
#ui .top {
  width: 100%;
  height: 100px;
  pointer-events: all;
}
#ui .center {
  width: 1020px;
  height: 446px;
  margin: 40px 130px 20px;
  position: absolute;
  z-index: 900;
}
#ui .center > * {
  pointer-events: all;
}
#ui .center *:disabled, #ui .center *[disabled] {
  pointer-events: none;
}
#ui .bottom {
  width: 100%;
  height: 150px;
  margin: 510px 0;
  position: absolute;
  pointer-events: all;
}
#ui .right, #ui .left {
  width: 130px;
  height: 510px;
  pointer-events: all;
}
#ui .right {
  float: right;
}
#ui .left {
  float: left;
}

.holder {
  width: 1190px;
  height: 568px;
  margin: 0 auto;
}

.holder2 {
  margin-top: -568px;
}

/* this is what stage-clipped should be, but after Chrome update 55.0.2873.0 for Windows, Linux and  55.0.2873.4 for Mac this css is broken */
/* #video, div#stage-clipped{
	-webkit-clip-path:url(#grid-clip);
    clip-path:url(#grid-clip);
}

canvas#stage-clipped{
	-webkit-clip-path:url(#canvas-clip);
    clip-path:url(#canvas-clip);
} */
/* changed css for Chrome update 55.0.2873.0 for Windows, Linux and  55.0.2873.4 for Mac
** canvas#stage-clipped on chrome windows gets set to {-webkit-clip-path: none; clip-path: none} via js. see /js/session4/a_strategies.js
** fuck you google!
*/
#video {
  clip-path: url(#grid-clip);
}

#stage-clipped {
  clip-path: url(#canvas-clip);
}

.offstage {
  display: none;
  height: 0;
  width: 0;
  margin-left: -4000px;
}

.vert-align {
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  overflow: hidden;
}

.top-align {
  top: 0;
  transform: none;
}

.height-me {
  width: 100%;
  height: auto;
}

.scale-me {
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  position: absolute;
}

.vid-hotspot {
  width: 1020px;
  height: 446px;
  margin: 0 auto;
  position: absolute;
  cursor: pointer;
}

.box-shadow {
  box-shadow: 0px 0px 1.25em 0.125em rgba(0, 0, 0, 0.8);
}

#avatar-head {
  width: 160px;
  height: 145px;
  left: 258px;
  top: 17px;
  background-image: url(/images/heads.png);
  background-repeat: no-repeat;
  background-size: 403%;
  background-position: 200px 200px;
  position: absolute;
  display: inline-block;
  overflow: hidden;
}

#avatar-head[data-type=avatar-1] {
  background-position: -0.5px -0.5px;
}

#avatar-head[data-type=avatar-2] {
  background-position: -161px 0px;
}

#avatar-head[data-type=avatar-3] {
  background-position: -322px 0px;
}

#avatar-head[data-type=avatar-4] {
  background-position: -483px 0px;
}

.avatar-loader {
  display: none;
}

.avatar-loader.svg {
  background-image: url(/images/avatar2.svg), url(/images/avatar1.svg), url(/images/avatar2.svg), url(/images/avatar1.svg);
}

.avatar-loader.png {
  background-image: url(/images/heads.png);
}

.star {
  height: 2.0625em;
  width: 2.0625em;
  background: url(/images/star.svg) no-repeat;
  background-size: contain;
}

.timer {
  color: #FFF;
  font-family: "Audiowide", sans-serif;
  font-size: 4.5em;
  margin: -0.1em auto;
}
.timer span {
  width: 0.9em;
  margin: 0;
  display: inline-block;
}
.timer .colon {
  width: 0.2em;
  margin-right: 0.05em;
}

.home .split {
  font-family: "Audiowide", sans-serif;
  color: #FFF;
  font-size: 3em;
  margin-top: 1.3em;
}
.home .act-alert {
  width: 48em;
  margin-left: -26em;
  background-color: rgba(153, 204, 255, 0.88);
}
.home .act-alert p {
  line-height: 2.2em;
}
.home .act-alert .btns a {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-size: 1.3em;
  text-decoration: none;
  color: rgb(0, 51, 102);
  background-color: rgb(153, 204, 255);
  border: 0.1em solid rgb(0, 51, 102);
  margin: 0.5em;
  padding: 0.2em 0.4em;
  display: inline-block;
}
.home .act-alert .btns a.challenge {
  background-color: rgb(33, 217, 33);
}

.strat-txt {
  color: rgb(153, 204, 255);
  font-family: "Lato", sans-serif;
  font-size: 1.45em;
  opacity: 0;
  max-width: 90%;
  margin: 0 auto;
}

.strat-txt::before {
  content: "Chosen Strategy: ";
  color: rgb(33, 217, 33);
}

/* other sheets */
#display-text {
  font-size: 23px;
  font-family: "Audiowide";
  fill: rgb(153, 204, 255);
  letter-spacing: 1px;
}
#display-text .rank {
  text-transform: uppercase;
  text-anchor: end;
}

#display .display-fill {
  fill: rgb(102, 0, 51);
  opacity: 0.35;
}
#display .display-line {
  fill: none;
  stroke: rgb(153, 204, 255);
  stroke-width: 1;
  stroke-miterlimit: 10;
}

#logo .green-fill {
  fill: rgb(33, 217, 33);
}
#logo .white-fill {
  fill: #FFF;
}
#logo .green-stroke {
  fill: none;
  stroke: rgb(33, 217, 33);
  stroke-miterlimit: 10;
  stroke-width: 3;
}
#logo .round-stroke {
  stroke-width: 2.5;
  stroke-linecap: round;
}

#display-badge {
  opacity: 0.5;
}
#display-badge .badge-number {
  font-size: 23px;
  font-family: "Audiowide";
  fill: rgb(102, 0, 51);
  text-anchor: middle;
}
#display-badge .badge-fill {
  fill: #9cf;
}

.avatar-bg {
  fill: url(#radial-gradient);
}

.svg-clipped {
  clip-path: url(#grid-clip);
}

.grid-line {
  fill: none;
  stroke: rgb(102, 0, 51);
  stroke-miterlimit: 10;
}

/* modex svg */
.modex-svg {
  /* .stage1-btn{
  	cursor:	pointer;
  	.st0{fill:#660033;}
  }
  .stage2-btn{
  	cursor:	pointer;
  	.st0{fill:#520A3D;}
  }

  */
}
.modex-svg .number {
  fill: #99CCFF;
  opacity: 0.25;
}
.modex-svg .status-1 {
  fill: #FFF;
  opacity: 1;
}
.modex-svg .status-2 {
  opacity: 1;
}
.modex-svg .st1 {
  fill: #99CCFF;
}
.modex-svg .st2 {
  opacity: 0.5;
}
.modex-svg .st3 {
  fill: #FF99FF;
}
.modex-svg .stage1-btn {
  cursor: pointer;
}
.modex-svg .stage1-btn .st0 {
  fill: #3D1447;
}
.modex-svg .stage2-btn {
  cursor: pointer;
}
.modex-svg .stage2-btn .st0 {
  fill: #291F52;
}
.modex-svg .stage3-btn {
  cursor: pointer;
}
.modex-svg .stage3-btn .st0 {
  fill: #14295C;
}
.modex-svg .stage4-btn {
  cursor: pointer;
}
.modex-svg .stage4-btn .st0 {
  fill: #003366;
}
.modex-svg #target .cls-1, .modex-svg #target .cls-3 {
  opacity: 0.35;
}
.modex-svg #target .cls-2 {
  fill: #fff;
  opacity: 0.5;
}
.modex-svg #target .cls-3 {
  fill: rgb(33, 217, 33);
}
.modex-svg #target .cls-4 {
  opacity: 0.55;
}
.modex-svg #target .cls-5 {
  fill: none;
  stroke: rgb(33, 217, 33);
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

a[disabled], button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

#home-btn, #profile-btn {
  margin: 0.8em 0 0 0.8em;
  width: 2.1em;
  height: 2.1em;
  float: left;
  cursor: pointer;
}

#home-btn {
  background: url(/images/homeBtn.svg) no-repeat transparent;
  background-size: contain;
}

#profile-btn {
  background: url(/images/profileBtn.svg) no-repeat transparent;
  background-size: contain;
}

#un-btn {
  -webkit-font-smoothing: antialiased;
  font-family: "Lato", sans-serif;
  font-size: 1em;
  color: rgb(255, 153, 255);
  text-decoration: none;
  text-overflow: ellipsis;
  max-width: 7.3em;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 1.05em;
  margin-left: 0.3em;
  float: left;
  cursor: pointer;
}

#un-btn:before {
  content: ":: ";
}

#logout-btn {
  margin: 0.8em 0.8em 0 0;
  width: 5.9em;
  height: 1.9em;
  background: url(/images/logOutBtn.svg) no-repeat transparent;
  background-size: contain;
  float: right;
  cursor: pointer;
}

#main-btn {
  width: 214px;
  height: 65px;
  margin: 0 auto;
  color: rgb(33, 217, 33);
  text-align: center;
  text-transform: uppercase;
  font-family: "Audiowide", cursive;
  font-size: 32px;
  border: none;
  border-top: 3px solid rgb(33, 217, 33);
  border-bottom: 3px solid rgb(33, 217, 33);
  background-color: rgba(33, 217, 33, 0.14);
  overflow: hidden;
}

#main-btn[data-type=timer]:before {
  content: "START";
}

#main-btn[data-type=pause]:before {
  content: "PAUSE";
}

#main-btn[data-type=skip]:before {
  content: "SKIP";
}

#main-btn[data-type=next]:before {
  content: "NEXT";
}

#main-btn[data-type=continue]:before {
  content: "REPLAY";
}

#main-btn[data-type=create]:before {
  content: "CREATE ACCOUNT";
  font-size: 0.8em;
}

.login #main-btn {
  line-height: 0.75em;
}

.home #main-btn:before {
  content: "";
}

#continue-btn {
  width: 16em;
  height: 16em;
  margin: 5.4em auto 0 auto;
  background: url(/images/continueBtn.svg) no-repeat;
  background-size: contain;
  border: none;
}

.play-btn {
  width: 195px;
  height: 190px;
  margin: 122px auto 0 auto;
  background: url(/images/play_btn.svg) no-repeat;
  background-size: contain;
}

.replay-btn {
  background: url(/images/replayBtn.svg) no-repeat;
}

.act-btn {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 1.75em;
  padding: 0.3em 0.7em 0.39em 0.7em;
  border-width: 0.14em;
  border-style: solid;
  border-radius: 0.56em;
  cursor: pointer;
}

.act-btn-blue, .act-btn-blue .btn-icon-sprite {
  color: rgb(153, 204, 255);
  background-color: rgb(0, 51, 102);
  border-color: rgb(153, 204, 255);
}

.act-btn-maroon, .act-btn-maroon .btn-icon-sprite {
  color: rgb(255, 153, 255);
  background-color: rgb(102, 0, 51);
  border-color: rgb(255, 153, 255);
}

.act-btn-green, .act-btn-green .btn-icon-sprite {
  color: rgb(233.8635, 245.6365, 233.8635);
  background-color: rgb(18.1896, 119.6104, 18.1896);
  border-color: rgb(233.8635, 245.6365, 233.8635);
}

.act-btn-pink, .act-btn-pink .btn-icon-sprite {
  color: rgb(255, 153, 255);
  background-color: transparent;
  border-color: rgb(255, 153, 255);
  font-family: "PT Sans", sans-serif;
  font-weight: 300;
  font-size: 1.3em;
  border-width: 0.07em;
  border-radius: 1em;
}

.act-btn-yellow, .act-btn-yellow .btn-icon-sprite {
  color: #ffdb6e;
  background-color: transparent;
  border-color: #ffdb6e;
  font-family: "PT Sans", sans-serif;
  font-weight: 300;
  font-size: 1.3em;
  border-width: 0.07em;
  border-radius: 1em;
}

.btn-icon-sprite {
  float: left;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.3em;
  /* display:inline-block; */
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(/images/btn-icon-sprite.png);
  background-size: 700% 100%;
  background-position: 100% 0%;
  opacity: 0.32;
  /* border: thin white solid;  */
}

.btn-icon-sprite.add {
  background-position: 0% 0%;
}

.btn-icon-sprite.back {
  background-position: 16% 0%;
}

.btn-icon-sprite.check {
  background-position: 33.5% 0%;
}

.btn-icon-sprite.close {
  background-position: 50% 0%;
}

.btn-icon-sprite.info {
  background-position: 66.5% 0%;
}

.btn-icon-sprite.minus {
  background-position: 83.5% 0%;
}

.btn-icon-sprite.next {
  background-position: 100% 0%;
}

.act-load-anim {
  left: 50%;
  top: 50%;
  margin: -1.25em 0 0 -4.5625em;
  position: absolute;
  z-index: 500;
  pointer-events: none;
}

.act-note-text {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  color: rgb(102, 0, 51);
  font-size: 1.15em;
  text-align: center;
  margin: 1em 1.25em;
}

.act-note-div {
  top: 0px;
  left: 0px;
  width: 25em;
  height: auto;
  position: absolute;
  overflow: visible;
}

.act-note {
  background-color: #FFF;
  border: 0.25em solid #FFF;
  border-radius: 1em;
  position: absolute;
  overflow: visible;
  box-shadow: 0px 0px 1.25em 0.125em rgba(0, 0, 0, 0.8);
}

.act-note:after, .act-note:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.act-note:after {
  border-color: rgba(0, 0, 0, 0);
}

.act-note:before {
  border-color: rgba(0, 0, 0, 0);
}

.act-note-bottom:after, .act-note-bottom:before {
  top: 100%;
}

.act-note-bottom:after {
  border-top-color: #FFF;
  left: 50%;
  margin-left: -0.875em;
  border-width: 0.875em;
}

.act-note-bottom:before {
  border-top-color: #FFF;
  left: 50%;
  margin-left: -1.25em;
  border-width: 1.25em;
}

.act-note-top:after, .act-note-top:before {
  bottom: 100%;
}

.act-note-top:after {
  border-bottom-color: #FFF;
  left: 50%;
  margin-left: -0.875em;
  border-width: 0.875em;
}

.act-note-top:before {
  border-bottom-color: #FFF;
  left: 50%;
  margin-left: -1.25em;
  border-width: 1.25em;
}

.act-note-tb-1:after, .act-note-tb-1:before {
  left: 25%;
}

.act-note-tb-2:after, .act-note-tb-2:before {
  left: 50%;
}

.act-note-tb-3:after, .act-note-tb-3:before {
  left: 75%;
}

.act-note-right:after, .act-note-right:before {
  left: 100%;
}

.act-note-right:after {
  border-left-color: #FFF;
  top: 50%;
  margin-top: -0.75em;
  border-width: 0.75em;
}

.act-note-right:before {
  border-left-color: #FFF;
  top: 50%;
  margin-top: -1.125em;
  border-width: 1.125em;
}

.act-note-left:after, .act-note-left:before {
  right: 100%;
}

.act-note-left:after {
  border-right-color: #FFF;
  top: 50%;
  margin-top: -0.75em;
  border-width: 0.75em;
}

.act-note-left:before {
  border-right-color: #FFF;
  top: 50%;
  margin-top: -1.125em;
  border-width: 1.125em;
}

.act-note-lr-1:after, .act-note-lr-1:before {
  top: 25%;
}

.act-note-lr-2:after, .act-note-lr-2:before {
  top: 50%;
}

.act-note-lr-3:after, .act-note-lr-3:before {
  top: 75%;
}

.act-alert {
  top: 50%;
  left: 50%;
  width: 42em;
  height: auto;
  padding: 2em 2em;
  margin-left: -20em;
  background-color: rgba(153, 204, 255, 0.89);
  border-radius: 1em;
  position: absolute;
  text-align: center;
  font-family: "PT Sans", sans-serif;
  z-index: 1000;
}
.act-alert img {
  margin: 1em auto 0em auto;
}
.act-alert .timer {
  margin: 0.1em auto -0.3em auto;
}

.act-alert-txt {
  font-size: 1.5em;
  margin: 0 auto;
}
.act-alert-txt ul, .act-alert-txt ol {
  text-align: left;
}
.act-alert-txt li {
  margin: 0.65em 0;
}

.act-alert-txt *:first-child {
  margin-top: 0;
}

.act-alert-txt .correct {
  color: rgb(0, 51, 102);
  font-weight: 700;
}

.act-alert-txt .incorrect {
  color: rgb(102, 0, 51);
  font-weight: 700;
}

.act-alert button {
  margin: 1em 0.5em 0 0.5em;
}

.act-alert.break-alert {
  top: 48% !important;
  height: 16em !important;
}
.act-alert.break-alert .act-alert-txt {
  font-weight: bold;
  margin: 1rem auto 2rem;
  font-size: 2.2rem;
}

.act-question-box {
  text-align: left;
}
.act-question-box button {
  margin: 0.6em 0.6em;
}
.act-question-box .act-alert-txt {
  font-size: 1.5em;
  margin: 0 0.8em 0.8em;
}

.act-question-box-txt {
  font-size: 1.5em;
  margin: -2.5em 0 0.6em 3.85em;
}

.act-volume {
  width: 5.125em; /* 4em; */
  height: 15.875em;
  margin-top: 8.3em;
  background-repeat: no-repeat;
  background-size: contain;
}
.act-volume .groove {
  width: 0.375em;
  height: 12.5em;
  position: absolute;
  background-color: #000;
  overflow: hidden;
  border-radius: 0.198em;
}
.act-volume .level {
  background-color: #d64133;
  width: 100%;
  height: 100%;
  margin-top: 12.5em;
}
.act-volume .handle {
  width: 3em;
  height: 3.5em;
  margin-top: 11.5em;
  position: absolute;
  /* border: thin solid red; */
}
.act-volume .bar {
  width: 2em;
  height: 0.4375em;
  margin: 1.5625em auto 0;
  background-color: #FFF;
  border-radius: 0.229em;
}

#ui .left .act-volume {
  margin-left: 1.5em;
  background-image: url(/images/feeling_meter_left.svg);
}
#ui .left .act-volume .groove {
  margin: 0.9em 3.54em;
}
#ui .left .act-volume .handle {
  margin-left: 2.3em;
}

#ui .right .act-volume {
  margin-left: 1.6em;
  background-image: url(/images/feeling_meter_right.svg);
}
#ui .right .act-volume .groove {
  margin: 0.9em 1em;
}
#ui .right .act-volume .handle {
  margin-left: -0.3em;
}

.act-alert.checkboxes .act-alert-txt {
  text-align: left;
  font-size: 1.4em;
  margin: 0.35em auto;
  width: 85%;
  /* display: flex;
  flex-direction: row; */
}
.act-alert.checkboxes .act-alert-txt div {
  display: flex;
  margin-top: 0.5em;
  margin-left: 2em;
}
.act-alert.checkboxes .act-alert-txt label, .act-alert.checkboxes .act-alert-txt span, .act-alert.checkboxes .act-alert-txt input[type=text] {
  display: inline-flex;
  vertical-align: middle;
}
.act-alert.checkboxes .act-alert-txt input[type=checkbox] {
  visibility: hidden;
}
.act-alert.checkboxes .act-alert-txt input[type=text] {
  margin-left: 0.8em;
  font-size: 0.85em;
  border: 0.1em solid rgb(0, 51, 102);
}
.act-alert.checkboxes .act-alert-txt input[type=text][disabled] {
  opacity: 0.65;
}
.act-alert.checkboxes .act-alert-txt span {
  margin-left: 0.6em;
  font-weight: 700;
  font-family: "PT Sans", sans-serif;
}
.act-alert.checkboxes .act-alert-txt label {
  width: 1.22em;
  height: 1.22em;
  margin-left: -0.65em;
  cursor: pointer;
  background: rgb(173.4, 214.2, 255);
  border-radius: 20%;
  border: 0.1em solid rgb(0, 51, 102);
  transition: background-color 0.2s;
}
.act-alert.checkboxes .act-alert-txt label:after {
  content: "";
  width: 1.22em;
  height: 1.22em;
  background: transparent no-repeat url(/images/btn-icon-sprite.png);
  background-size: 700% 100%;
  background-position: 32.5% 0%;
  opacity: 0;
  display: block;
  border-radius: 20%;
  margin: -0.15em;
  transform: scale(0, 0);
  transition: 0.3s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.act-alert.checkboxes .act-alert-txt input[type=checkbox]:checked, .act-alert.checkboxes .act-alert-txt input[type=checkbox]:checked + label:after {
  opacity: 1;
  transform: scale(1, 1);
}
.act-alert.checkboxes .act-alert-txt input[type=checkbox]:checked + label {
  background-color: rgb(0, 51, 102);
}

.controls {
  width: 10em;
  height: 10em;
  background-color: rgb(51, 0, 25.5);
  border: 2px solid rgb(153, 204, 255);
  border-radius: 50%;
  margin: -4em auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.controls .joystick {
  width: 5em;
  height: 5em;
  background: radial-gradient(circle at 50% 120%, rgb(233.8635, 245.6365, 233.8635), rgb(33, 217, 33) 10%, rgb(18.1896, 119.6104, 18.1896) 80%, rgb(9.438, 62.062, 9.438) 100%);
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  overflow: hidden;
  box-shadow: 0px 6px 5px 6px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.controls .joystick:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, rgb(233.8635, 245.6365, 233.8635), rgba(233.8635, 245.6365, 233.8635, 0) 58%);
  filter: blur(5px);
  z-index: 3;
}

.controls:before {
  content: "";
  width: 2em;
  height: 2em;
  background: radial-gradient(circle at 50% 0%, rgb(133.656, 218.344, 133.656), rgb(56, 68, 56) 50%, #000);
  border: 3px solid rgb(33, 217, 33);
  border-radius: 50%;
  position: absolute;
}

.controls:after {
  content: "";
  width: 2em;
  height: 2em;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
}

.login #login-form, .login #create-form, .login #profile-form, .profile #login-form, .profile #create-form, .profile #profile-form {
  font-family: "PT Sans", sans-serif;
  text-align: left;
  width: 20em;
  margin: -1.9em 3.2em;
}
.login #login-form button, .login #create-form button, .login #profile-form button, .profile #login-form button, .profile #create-form button, .profile #profile-form button {
  float: right;
  margin-top: 0.4em;
}
.login #login-form input, .login #create-form input, .login #profile-form input, .profile #login-form input, .profile #create-form input, .profile #profile-form input {
  width: 98%;
  color: #000;
  font-size: 1.5em;
}
.login #login-form input, .login #login-form select, .login #create-form input, .login #create-form select, .login #profile-form input, .login #profile-form select, .profile #login-form input, .profile #login-form select, .profile #create-form input, .profile #create-form select, .profile #profile-form input, .profile #profile-form select {
  margin: 0.4em auto;
  font-size: 1.3em;
}
.login #login-form select, .login #create-form select, .login #profile-form select, .profile #login-form select, .profile #create-form select, .profile #profile-form select {
  width: 100%;
  color: #000;
}
.login h1, .profile h1 {
  font-size: 1.8em;
  font-family: "Audiowide", sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.login #login-form, .profile #login-form {
  float: left;
  color: rgb(33, 217, 33);
  margin-top: 3.35em;
}
.login #login-form h1:after, .profile #login-form h1:after {
  content: " >>>";
  letter-spacing: 0em;
}
.login #create-form, .profile #create-form {
  float: right;
  color: rgb(153, 204, 255);
}
.login #create-form h1:before, .profile #create-form h1:before {
  content: "+ ";
  letter-spacing: 0em;
}
.login #profile-form, .profile #profile-form {
  float: right;
  color: rgb(33, 217, 33);
  margin-top: 2.2em;
}
.login .divider, .profile .divider {
  color: #FFF;
  font-size: 1.8em;
  font-family: "Audiowide", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: absolute;
  left: 45%;
  top: 45%;
}
.login .profile-gfx, .profile .profile-gfx {
  width: 20em;
  height: 20em;
  top: 3.7em;
  left: 3.4em;
  position: absolute;
}
.login .profile-gfx h1, .profile .profile-gfx h1 {
  color: #FFF;
  margin-top: 0.53em;
}
.login .profile-gfx div, .profile .profile-gfx div {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(/images/profileBtn.svg) no-repeat transparent;
  background-size: contain;
  opacity: 0.2;
}
.login .act-alert, .profile .act-alert {
  background-color: rgba(153, 204, 255, 0.97);
}

.bg[data-type=planet-solo] {
  width: 100%;
  height: 100%;
  position: absolute;
  visibility: hidden;
}

#avtr-holder {
  width: 100%;
  height: 100%;
  margin: 0 10.7%;
}

#avtr-holder * {
  margin-top: 70px;
  margin-right: 100px;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  cursor: pointer;
}

#avtr-holder *:hover, #avtr-holder *:active, .choosen-avtr {
  box-shadow: 1px 1px 8px 6px rgba(33, 217, 33, 0.3);
}

#avatar-1 {
  width: 165px;
  height: 440px;
  background-image: url(/images/avatar1.svg);
}

#avatar-2 {
  width: 122px;
  height: 445px;
  background-image: url(/images/avatar2.svg);
}

#avatar-3 {
  width: 150px;
  height: 440px;
  background-image: url(/images/avatar3.svg);
}

#avatar-4 {
  width: 200px;
  height: 445px;
  background-image: url(/images/avatar4.svg);
}

.avtr {
  border-radius: 15px;
}

.shapematch {
  /* the 2 .notif-wrap divs must be the first 2 children of it's parent */
}
.shapematch .matched,
.shapematch .prev-score {
  color: rgb(153, 204, 255);
  font-family: "Audiowide", sans-serif;
  font-size: 3em;
  margin: 4.1em auto;
  width: 2.5em;
  line-height: 0.8em;
  opacity: 0;
  display: flex;
  flex-direction: column;
}
.shapematch .matched span,
.shapematch .prev-score span {
  display: inline-block;
}
.shapematch .matched span:before,
.shapematch .prev-score span:before {
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.shapematch .matched span:before {
  content: "matched:";
  font-size: 0.45em;
}
.shapematch .prev-score span:before {
  content: "score to beat:";
  font-size: 0.4em;
}
.shapematch .timer {
  opacity: 0;
}
.shapematch .countdown {
  /* color: #e0a20d; */
  color: rgb(33, 217, 33);
  font-size: 6em;
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  margin-top: 1em;
  display: none;
}
.shapematch #dragger-group {
  opacity: 0;
}
.shapematch #dragger-group rect {
  fill: rgba(0, 0, 0, 0);
}
.shapematch #dragger.shapes {
  fill: rgba(224, 162, 13, 0.65);
}
.shapematch .matched #dragger.shapes {
  fill: rgb(33, 217, 33);
}
.shapematch .not-matched #dragger.shapes {
  fill: red;
}
.shapematch .shapes {
  fill: none;
  stroke: #FFF;
  stroke-width: 2px;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
  stroke-linecap: square;
}
.shapematch .svg-clipped.shapes {
  opacity: 0;
}
.shapematch .reference {
  visibility: hidden;
}
.shapematch .notif-wrap {
  /* height: 5rem;
  width: 16rem; */
  height: auto;
  width: auto;
  position: absolute;
  /* border: thin solid yellow; */
}
.shapematch .notif-wrap .notification {
  height: 5em;
  width: 16rem;
  background-color: #FFF;
  border-radius: 1rem;
  position: relative;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
}
.shapematch .notif-wrap .notification .upper {
  height: 2rem;
  width: 16rem;
  color: #FFF;
  font-size: 0.8rem;
  background-color: rgb(0, 51, 102);
  padding: 0 0.5rem;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-position: 0.7rem 0.4rem;
  background-size: 8%;
  background-repeat: no-repeat;
}
.shapematch .notif-wrap .notification .upper.chat {
  background-image: url(/images/a_shapematch/chatsnap.svg);
}
.shapematch .notif-wrap .notification .upper.gram {
  background-image: url(/images/a_shapematch/diregram.svg);
}
.shapematch .notif-wrap .notification .upper.face {
  background-image: url(/images/a_shapematch/friendface.svg);
}
.shapematch .notif-wrap .notification .upper::before {
  text-transform: uppercase;
  margin-left: 2rem;
}
.shapematch .notif-wrap .notification .upper::after {
  content: "Now";
  opacity: 0.6;
}
.shapematch .notif-wrap .notification .upper.chat::before {
  content: "CHATSNAP";
}
.shapematch .notif-wrap .notification .upper.gram::before {
  content: "DIREGRAM";
}
.shapematch .notif-wrap .notification .upper.face::before {
  content: "FRIENDFACE";
}
.shapematch .notif-wrap .notification .lower {
  height: 3rem;
  font-size: 0.9rem;
  color: #000;
  display: inline-flex;
  align-content: center;
  align-items: center;
}
.shapematch .notif-wrap:nth-of-type(1) {
  top: 22rem;
  left: 9rem;
}
.shapematch .notif-wrap:nth-of-type(2) {
  top: 22rem;
  left: 39rem;
}
.shapematch .notif-wrap:nth-of-type(3) {
  top: -3.1rem;
  left: 42rem;
}
.shapematch .act-note-div {
  top: 22.2rem;
  left: 20rem;
}
.shapematch .btn-holder {
  font-size: 40%;
  margin-bottom: 1em;
}
.shapematch .btn-holder button[data-active="1"] {
  color: rgb(0, 51, 102);
  border-color: rgb(0, 51, 102);
  background-color: rgb(33, 217, 33);
}
.shapematch .act-alert.choose-strat h4 {
  margin-bottom: 0.4em;
}
.shapematch .act-alert.choose-strat #user-text {
  width: 73%;
  border: thin solid rgb(0, 51, 102);
}
.shapematch .act-alert.choose-strat label {
  color: rgb(0, 51, 102);
  font-size: 87%;
}
.shapematch .act-alert.choose-strat label[for=user-text]::before {
  content: "Other: If you have another idea type it in.";
}

.bodytalk .points {
  color: rgb(153, 204, 255);
  font-family: "Audiowide", sans-serif;
  font-size: 2em;
  width: 100%;
  line-height: 0.96em;
  margin: 6.7em auto;
}
.bodytalk .points .pts:before {
  content: "points";
  font-size: 0.62em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.bodytalk .countdown {
  color: #e0a20d;
  font-size: 6em;
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  margin-top: 1em;
  display: none;
}

.brainstorm input {
  font-family: "Lato", sans-serif;
  font-size: 1.5em;
  width: 9em;
  margin: -0.15em auto 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.brainstorm .points {
  color: rgb(153, 204, 255);
  font-family: "Audiowide", sans-serif;
  font-size: 3em;
  margin: 4.2em auto;
  width: 1.8em;
  line-height: 0.8em;
}
.brainstorm .points span:before {
  content: "words ";
  font-size: 0.5em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.brainstorm .right .act-btn {
  margin-top: 11.6em;
}
.brainstorm .emoji-sprite {
  font-size: 150%;
  background-color: rgba(102, 0, 51, 0.75);
  border: 0.06em solid rgb(153, 204, 255);
  position: relative;
  margin-top: -14.3em;
  float: right;
  margin-right: 5.5em;
  overflow: hidden;
}
.brainstorm .type-display {
  color: #FFF;
  font-family: "Audiowide", sans-serif;
  font-size: 6em;
  text-align: center;
  text-transform: uppercase;
  background-color: rgba(153, 204, 255, 0.25);
  border-radius: 4em;
  margin: 0.5em 2%;
  width: 96%;
  opacity: 0.75;
  position: absolute;
  overflow: hidden;
}

.zombie {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #FFF no-repeat url(/images/zombie.jpg);
  background-size: 100% 100%;
  display: none;
}

.emoji-table {
  width: 40em;
  height: auto;
  margin: -0.3em -20.8em;
  padding: 0.8em;
  left: 50%;
  color: rgb(0, 51, 102);
  font-family: "Lato", sans-serif;
  cursor: pointer;
  background-color: rgba(153, 204, 255, 0.92);
  position: absolute;
  border-radius: 1em;
  overflow: hidden;
}
.emoji-table .word {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-size: 1.2em;
  padding: 0.1em;
  border: thin solid rgb(0, 51, 102);
  background-color: rgb(153, 204, 255);
  width: 9em;
  float: left;
  margin: 0.3em 0.6em;
}
.emoji-table .on {
  color: rgb(153, 204, 255);
  background-color: rgb(0, 51, 102);
}
.emoji-table p {
  width: 38.75em;
  margin-top: 0.6em;
  padding: 0.8em;
  text-align: left;
  float: left;
}
.emoji-table .act-btn {
  margin: 15em 0 0 -95%;
}

#stage-clipped.myths {
  padding-top: 11em;
}
#stage-clipped.myths p {
  color: rgb(33, 217, 33);
  font-family: "PT Sans", sans-serif;
  font-size: 1.9em;
  max-width: 30em;
  margin: 0em auto 0;
  line-height: 1.4em;
}

#ui.myths .act-alert-txt ul {
  text-align: left;
}

.a_label_feelings .text-holder {
  width: 39.5rem;
  text-align: left;
  margin-top: 5.5rem;
  margin-left: 9rem;
  float: left;
}
.a_label_feelings .text-holder p, .a_label_feelings .text-holder ul {
  color: rgb(33, 217, 33);
  font-family: "PT Sans", sans-serif;
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.a_label_feelings .text-holder li {
  margin-bottom: 1.1rem;
}
.a_label_feelings #body-canvas {
  width: 20rem;
  height: 31.5rem;
  top: 7rem;
  left: 50.5rem;
  /* border: thin solid #FFF; */
  position: absolute;
}
.a_label_feelings .btn-holder {
  margin-top: 2rem;
  margin-left: 8.5rem;
  float: left;
  font-size: 85%;
  min-width: 31rem;
  text-align: left;
}
.a_label_feelings .btn-holder .act-btn {
  margin: 0 0.5rem;
}
.a_label_feelings .feedback .act-alert-txt p {
  text-align: left;
}

.a_build_body .act-alert-txt p {
  text-align: left;
}
.a_build_body .text-holder {
  width: 38rem;
  text-align: center;
  top: 9.7rem;
  left: 10rem;
  position: absolute;
}
.a_build_body .text-holder p {
  color: rgb(33, 217, 33);
  font-family: "PT Sans", sans-serif;
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.a_build_body .text-holder span {
  color: #FFF;
  font-family: "Audiowide", sans-serif;
}
.a_build_body .btn-holder {
  width: 8.1rem;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 2rem;
}
.a_build_body .btn-holder h3 {
  color: rgb(33, 217, 33);
  font-family: "PT Sans", sans-serif;
  margin-bottom: 0;
}
.a_build_body .btn-holder button {
  font-size: 80%;
  margin: 0.2rem 0;
}
.a_build_body .btn-holder button[data-active="1"] {
  color: rgb(0, 51, 102);
  font-weight: 700;
  border-color: rgb(33, 217, 33);
  background-color: rgb(33, 217, 33);
}
.a_build_body .btn-holder-wrap {
  height: 27rem;
  top: 11.9rem;
  left: 10rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: absolute;
}
.a_build_body #body-canvas {
  width: 320px;
  height: 530px;
  top: 95px;
  left: 800px;
  position: absolute;
  /* border: thin solid red; */
}
.a_build_body .bottom h2 {
  color: rgb(33, 217, 33);
  font-family: "PT Sans", sans-serif;
  font-size: 1.6rem;
  margin-top: 3rem;
  display: none;
}
.a_build_body .bottom h2 .emph {
  color: #FFF;
  font-family: "Audiowide", sans-serif;
  text-transform: uppercase;
}

.holder.a_build_body {
  opacity: 0;
  visibility: hidden;
}

.a_triggers_pong .score {
  color: rgb(153, 204, 255);
  font-family: "Audiowide", sans-serif;
  font-size: 3em;
  margin: 4.1em auto;
  width: 2em;
  line-height: 0.8em;
  opacity: 0;
  display: flex;
  flex-direction: column;
}
.a_triggers_pong .score span {
  display: inline-block;
}
.a_triggers_pong .score span:before {
  content: "volume:";
  font-size: 0.45em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.a_triggers_pong .timer {
  opacity: 0;
  /* margin-left: 13em;
  margin-top: 0.25em;
  position: absolute; */
}
.a_triggers_pong .countdown {
  color: rgb(33, 217, 33);
  font-size: 6em;
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  margin-top: 1em;
  display: none;
}

.behavior p {
  color: rgb(33, 217, 33);
  font-family: "PT Sans", sans-serif;
  font-size: 1.8em;
  line-height: 1.5em;
  text-align: left;
  max-width: 19em;
  position: absolute;
  margin: 0 auto 0 18em;
  top: 10.3em;
}
.behavior .behavior-img-wrap {
  width: 21.875em;
  height: 22.5em;
  position: absolute;
  margin-left: 8.8em;
  top: 12.5em;
}
.behavior .behavior-img-wrap img {
  width: 100%;
  height: 100%;
}
.behavior .answers {
  color: #FFF;
  font-family: "Audiowide", sans-serif;
  font-size: 2.5em;
  line-height: 0.9em;
  position: absolute;
  opacity: 0.5;
  transition: 0.5s opacity;
  width: 10em;
}
.behavior .answers .emo:before {
  font-size: 0.5em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.behavior .answers .wrds {
  margin-top: -0.1em;
  display: inline-block;
}
.behavior .answers.choice1 {
  text-align: left;
  left: 0.8em;
}
.behavior .answers.choice1 .emo:before {
  content: "emotion 1:";
}
.behavior .answers.choice2 {
  left: 100%;
  margin-left: -10.8em;
  text-align: right;
}
.behavior .answers.choice2 .emo:before {
  content: "emotion 2:";
}

.choices-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0.6em;
}
.choices-wrap .behavior-word {
  color: rgb(0, 51, 102);
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-size: 1.2em;
  padding: 0.2em 0.5em;
  border: thin solid rgb(0, 51, 102);
  background-color: rgb(153, 204, 255);
  width: 100%;
  margin: 0.3em 0.6em;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.choices-wrap .behavior-word div {
  display: inline-flex;
}
.choices-wrap .behavior-word div:nth-child(2):before {
  content: ":";
}
.choices-wrap .behavior-word div:nth-child(3) {
  font-size: 0.7em;
  line-height: 1.2em;
  text-align: left;
  width: 62%;
}
.choices-wrap .behavior-word-on {
  color: rgb(153, 204, 255);
  background-color: rgb(0, 51, 102);
}

.act-alert.emojis h3, .act-alert.emojis h4 {
  margin: 0 auto 0.25em;
}
.act-alert.emojis .emojis-container {
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;
  justify-content: center;
  width: 100%;
  height: auto;
  font-size: 62%;
  margin: 0 auto;
}
.act-alert.emojis .emojis-container .emoji {
  display: inline-flex;
  align-items: center;
  margin: 0.15em;
  flex-flow: column nowrap;
  border: none;
  background-color: transparent;
  width: 6.5em;
}
.act-alert.emojis .emojis-container .emoji .label {
  margin: -0.4em auto 0;
  font-weight: 700;
  font-size: 95%;
}
.act-alert.emojis .emojis-container .emoji.chosen {
  color: rgb(153, 204, 255);
  background-color: rgb(0, 51, 102);
}

.a_personalizing .act-alert.emojis .emojis-container {
  font-size: 55%;
}
.a_personalizing .act-alert.emojis #user-text {
  margin: 0 auto;
  border: thin solid rgb(0, 51, 102);
  width: 85%;
}
.a_personalizing .act-alert.emojis label[for=user-text] {
  font-size: 70%;
  line-height: 1.5em;
  display: inline-block;
  text-align: left;
  width: 85%;
  margin-top: 0.6em;
}
.a_personalizing .act-alert.emojis label[for=user-text]::before {
  content: "Optional: Type in any feelings you may have that are not listed above.\aSeparate feelings with commas.";
}

.a_personalizing_2 .act-alert .emo-word {
  color: rgb(0, 51, 102);
  margin: 0 auto;
}

.a_personalizing_2 .act-alert.triggers .triggers-wrap:first-of-type {
  border-top: thin solid rgb(0, 51, 102);
  padding-top: 1em;
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap:last-of-type {
  margin-bottom: 0;
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  font-size: 80%;
  margin: 1em auto;
  border-bottom: thin solid rgb(0, 51, 102);
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap h3 {
  color: rgb(0, 51, 102);
  text-align: left;
  width: 16%;
  margin: 0;
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap .triggers-container {
  width: 84%;
  display: flex;
  flex-flow: row wrap;
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap .trigger-btn {
  margin: 0.1em;
  border: thin solid;
  color: rgb(0, 51, 102);
  background-color: rgb(153, 204, 255);
  border-color: rgb(0, 51, 102);
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap .trigger-btn.chosen {
  color: rgb(153, 204, 255);
  background-color: rgb(0, 51, 102);
  border-color: rgb(0, 51, 102);
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap .input-wrap {
  width: 100%;
  margin: 0.5em 0 1em;
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap input {
  border: thin solid rgb(0, 51, 102);
  width: 73%;
  display: inline-flex;
}
.a_personalizing_2 .act-alert.triggers .triggers-wrap label {
  color: rgb(0, 51, 102);
  width: 27%;
  display: inline-flex;
}

.emoji-sprite {
  width: 5em;
  height: 5em;
  display: inline-flex;
}

.emoji-sprite::after {
  content: " ";
  display: inline-block;
  width: 5em;
  height: 5em;
  padding: 0;
  background-repeat: no-repeat;
  background-image: url(/images/emoji-sprite.png);
}

.angry::after {
  background-position: 0.1529051988% 0.1223990208%;
  background-size: 503.7037037037% 604.3209876543%;
}

.anxious::after {
  background-position: 0.1529051988% 20.0734394125%;
  background-size: 503.7037037037% 604.3209876543%;
}

.ashamed::after {
  background-position: 0.1529051988% 40.0244798042%;
  background-size: 503.7037037037% 604.3209876543%;
}

.bored::after {
  background-position: 0.1529051988% 59.9755201958%;
  background-size: 503.7037037037% 604.3209876543%;
}

.confident::after {
  background-position: 0.1529051988% 79.9265605875%;
  background-size: 503.7037037037% 604.3209876543%;
}

.confused::after {
  background-position: 0.1529051988% 99.8776009792%;
  background-size: 503.7037037037% 604.3209876543%;
}

.curious::after {
  background-position: 25.0764525994% 0.1223990208%;
  background-size: 503.7037037037% 604.3209876543%;
}

.depressed::after {
  background-position: 25.0764525994% 20.0734394125%;
  background-size: 503.7037037037% 604.3209876543%;
}

.disappointed::after {
  background-position: 25.0764525994% 40.0244798042%;
  background-size: 503.7037037037% 604.3209876543%;
}

.disgusted::after {
  background-position: 25.0764525994% 59.9755201958%;
  background-size: 503.7037037037% 604.3209876543%;
}

.embarrassed::after {
  background-position: 25.0764525994% 79.9265605875%;
  background-size: 503.7037037037% 604.3209876543%;
}

.enraged::after {
  background-position: 25.0764525994% 99.8776009792%;
  background-size: 503.7037037037% 604.3209876543%;
}

.excited::after {
  background-position: 50% 0.1223990208%;
  background-size: 503.7037037037% 604.3209876543%;
}

.frustrated::after {
  background-position: 50% 20.0734394125%;
  background-size: 503.7037037037% 604.3209876543%;
}

.grumpy::after {
  background-position: 50% 40.0244798042%;
  background-size: 503.7037037037% 604.3209876543%;
}

.guilty::after {
  background-position: 50% 59.9755201958%;
  background-size: 503.7037037037% 604.3209876543%;
}

.happy::after {
  background-position: 50% 79.9265605875%;
  background-size: 503.7037037037% 604.3209876543%;
}

.hopeful::after {
  background-position: 50% 99.8776009792%;
  background-size: 503.7037037037% 604.3209876543%;
}

.jealous::after {
  background-position: 74.9235474006% 0.1223990208%;
  background-size: 503.7037037037% 604.3209876543%;
}

.lovestruck::after {
  background-position: 74.9235474006% 20.0734394125%;
  background-size: 503.7037037037% 604.3209876543%;
}

.mischievous::after {
  background-position: 74.9235474006% 40.0244798042%;
  background-size: 503.7037037037% 604.3209876543%;
}

.overwhelmed::after {
  background-position: 74.9235474006% 59.9755201958%;
  background-size: 503.7037037037% 604.3209876543%;
}

.proud::after {
  background-position: 74.9235474006% 79.9265605875%;
  background-size: 503.7037037037% 604.3209876543%;
}

.rejected::after {
  background-position: 74.9235474006% 99.8776009792%;
  background-size: 503.7037037037% 604.3209876543%;
}

.relaxed::after {
  background-position: 99.8470948012% 0.1223990208%;
  background-size: 503.7037037037% 604.3209876543%;
}

.sad::after {
  background-position: 99.8470948012% 20.0734394125%;
  background-size: 503.7037037037% 604.3209876543%;
}

.scared::after {
  background-position: 99.8470948012% 40.0244798042%;
  background-size: 503.7037037037% 604.3209876543%;
}

.shy::after {
  background-position: 99.8470948012% 59.9755201958%;
  background-size: 503.7037037037% 604.3209876543%;
}

.stressed::after {
  background-position: 99.8470948012% 79.9265605875%;
  background-size: 503.7037037037% 604.3209876543%;
}

.surprised::after {
  background-position: 99.8470948012% 99.8776009792%;
  background-size: 503.7037037037% 604.3209876543%;
}

@keyframes fadeInBorder {
  0% {
    border-color: rgba(255, 0, 0, 0.1);
  }
  50% {
    border-color: rgba(255, 0, 0, 0.75);
  }
  100% {
    border-color: rgba(255, 0, 0, 0.1);
  }
}
#stage-clipped.unclip {
  clip-path: none;
}

.holder.a_triggers h3 {
  font-size: 1.3em;
  width: 52.5rem;
  margin: 0.8em auto 0;
  color: #FFF;
  font-family: "Audiowide", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  opacity: 0;
  visibility: hidden;
}
.holder.a_triggers p {
  color: rgb(33, 217, 33);
  font-family: "PT Sans", sans-serif;
  font-size: 1.65em;
  line-height: 1.6em;
  text-align: left;
  width: 52.5rem;
  margin: 3.8em auto 0;
}
.holder.a_triggers p .story-word {
  cursor: pointer;
}
.holder.a_triggers p .others {
  color: yellow;
}
.holder.a_triggers p .others * {
  text-decoration: line-through;
  cursor: unset;
}
.holder.a_triggers p .triggers {
  color: #FFF;
}
.holder.a_triggers p .triggers * {
  text-decoration: underline;
  cursor: unset;
}
.holder.a_triggers p .triggers.clickable, .holder.a_triggers p .others.clickable {
  color: rgb(33, 217, 33);
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.holder.a_triggers p .triggers.clickable *, .holder.a_triggers p .others.clickable * {
  text-decoration: none;
}
.holder.a_triggers .image-holder {
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
}
.holder.a_triggers .image-holder img {
  width: 100%;
  height: 100%;
}
.holder.a_triggers .image-holder .hot-spot {
  position: absolute;
  border-radius: 20%;
}
.holder.a_triggers .image-holder .hot-spot.found {
  border: 0.2rem solid rgb(33, 217, 33);
  box-shadow: 0px 0px 1.25em 0.125em rgba(0, 0, 0, 0.5);
}
.holder.a_triggers .image-holder .hot-spot.reveal {
  border: 0.2rem solid rgba(33, 217, 33, 0.1);
  -mozt-animation-name: fadeInBorder;
  animation-name: fadeInBorder;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#ui.a_triggers .bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0 0.8em;
  opacity: 0;
}
#ui.a_triggers .lower-txt {
  color: #FFF;
  font-family: "Audiowide", sans-serif;
  font-size: 2.5em;
  line-height: 0.9em;
  margin: 0 auto;
  opacity: 0.5;
  transition: 0.5s opacity;
  width: 10em;
  animation: blinkText 1s linear infinite;
}
#ui.a_triggers .lower-txt .trig-type:before {
  font-size: 0.6em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
@keyframes blinkText {
  50% {
    opacity: 0;
  }
}
#ui.a_triggers .lower-txt.found {
  opacity: 1;
  animation-name: none;
}
#ui.a_triggers .lower-txt[data-type=person] {
  text-align: left;
}
#ui.a_triggers .lower-txt[data-type=person] .trig-type:before {
  content: "Person Trigger:";
}
#ui.a_triggers .lower-txt[data-type=place] {
  text-align: center;
}
#ui.a_triggers .lower-txt[data-type=place] .trig-type:before {
  content: "Place Trigger:";
}
#ui.a_triggers .lower-txt[data-type=thing] {
  text-align: right;
}
#ui.a_triggers .lower-txt[data-type=thing] .trig-type:before {
  content: "Thing Trigger:";
}
#ui.a_triggers .wrd {
  text-transform: uppercase;
}
#ui.a_triggers .review-images img {
  margin: 0em 0.5em;
  height: 7em;
}
#ui.a_triggers .act-alert-txt .instruct {
  text-align: left;
}

.act-example {
  height: 225px;
  width: auto;
  margin-top: 0 !important;
}

.strategies .emo-volume {
  color: rgb(153, 204, 255);
  font-family: "Audiowide", sans-serif;
  font-size: 3em;
  margin: 4.1em auto;
  width: 2em;
  line-height: 0.8em;
  opacity: 0;
  display: flex;
  flex-direction: column;
}
.strategies .emo-volume .vol {
  display: inline-block;
}
.strategies .emo-volume .vol:before {
  content: "volume:";
  font-size: 0.45em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.strategies .stars {
  top: 2.9em;
  width: 100%;
  opacity: 0.5;
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  transition: all 0.6s ease-out;
}
.strategies .stars .star {
  height: 2.5em;
  width: 2.5em;
  margin: 0 0.25em;
  position: relative;
  display: inline-flex;
}
.strategies .stars.move-down {
  font-size: 75%;
  top: 4.5rem;
}
.strategies .act-note-div.healthy, .strategies .act-note-div.unhealthy {
  top: 3em;
  font-size: 75%;
  top: 4.5rem;
}
.strategies .act-note-div.healthy {
  left: 10.3em;
}
.strategies .act-note-div.healthy .act-note-text:after {
  content: " healthy strategies captured.";
}
.strategies .act-note-div.unhealthy {
  left: 55.8em;
}
.strategies .act-note-div.unhealthy .act-note-text:after {
  content: " unhealthy strategies captured.";
}

/* goliotio ALSO CONTAINS:
		.a_let_it_out1_wrap,
		.a_let_it_out2_wrap,
		.a_think_it_out_intro,
		.a_let_it_out2_intro,
		.a_shapematch2_intro,
		.a_make_plan
*/
.a_get_out .act-alert-txt h4,
.a_let_it_out1_wrap .act-alert-txt h4,
.a_let_it_out2_wrap .act-alert-txt h4,
.a_think_it_out_intro .act-alert-txt h4,
.a_shapematch2_intro .act-alert-txt h4,
.a_make_plan .act-alert-txt h4 {
  font-size: 94%;
}
.a_get_out .img-wrap,
.a_let_it_out1_wrap .img-wrap,
.a_let_it_out2_wrap .img-wrap,
.a_think_it_out_intro .img-wrap,
.a_shapematch2_intro .img-wrap,
.a_make_plan .img-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.a_get_out .img-wrap img,
.a_let_it_out1_wrap .img-wrap img,
.a_let_it_out2_wrap .img-wrap img,
.a_think_it_out_intro .img-wrap img,
.a_shapematch2_intro .img-wrap img,
.a_make_plan .img-wrap img {
  height: 400px;
  margin-top: 20px;
}
.a_get_out .img-wrap.blur,
.a_let_it_out1_wrap .img-wrap.blur,
.a_let_it_out2_wrap .img-wrap.blur,
.a_think_it_out_intro .img-wrap.blur,
.a_shapematch2_intro .img-wrap.blur,
.a_make_plan .img-wrap.blur {
  filter: url(#blur-filter);
}
.a_get_out .emo-volume,
.a_let_it_out1_wrap .emo-volume,
.a_let_it_out2_wrap .emo-volume,
.a_think_it_out_intro .emo-volume,
.a_shapematch2_intro .emo-volume,
.a_make_plan .emo-volume {
  color: rgb(153, 204, 255);
  font-family: "Audiowide", sans-serif;
  font-size: 3em;
  width: 2em;
  margin-left: -3.1em;
  left: 100%;
  top: 0;
  line-height: 0.8em;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.a_get_out .emo-volume .vol,
.a_let_it_out1_wrap .emo-volume .vol,
.a_let_it_out2_wrap .emo-volume .vol,
.a_think_it_out_intro .emo-volume .vol,
.a_shapematch2_intro .emo-volume .vol,
.a_make_plan .emo-volume .vol {
  display: inline-block;
}
.a_get_out .emo-volume .vol:before,
.a_let_it_out1_wrap .emo-volume .vol:before,
.a_let_it_out2_wrap .emo-volume .vol:before,
.a_think_it_out_intro .emo-volume .vol:before,
.a_shapematch2_intro .emo-volume .vol:before,
.a_make_plan .emo-volume .vol:before {
  content: "volume:";
  font-size: 0.45em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.a_get_out .act-note-div.set-level,
.a_let_it_out1_wrap .act-note-div.set-level,
.a_let_it_out2_wrap .act-note-div.set-level,
.a_think_it_out_intro .act-note-div.set-level,
.a_shapematch2_intro .act-note-div.set-level,
.a_make_plan .act-note-div.set-level {
  left: 39.8em;
  top: 9em;
}
.a_get_out .act-note-div.quiet,
.a_let_it_out1_wrap .act-note-div.quiet,
.a_let_it_out2_wrap .act-note-div.quiet,
.a_think_it_out_intro .act-note-div.quiet,
.a_shapematch2_intro .act-note-div.quiet,
.a_make_plan .act-note-div.quiet {
  left: 7em;
  top: -3.2em;
}
.a_get_out .btn-wrap,
.a_let_it_out1_wrap .btn-wrap,
.a_let_it_out2_wrap .btn-wrap,
.a_think_it_out_intro .btn-wrap,
.a_shapematch2_intro .btn-wrap,
.a_make_plan .btn-wrap {
  position: relative;
  margin: 0 auto;
}
.a_get_out .btn-wrap .act-btn,
.a_let_it_out1_wrap .btn-wrap .act-btn,
.a_let_it_out2_wrap .btn-wrap .act-btn,
.a_think_it_out_intro .btn-wrap .act-btn,
.a_shapematch2_intro .btn-wrap .act-btn,
.a_make_plan .btn-wrap .act-btn {
  margin: 1.4em 0.5em 0;
}
.a_get_out .btn-holder,
.a_let_it_out1_wrap .btn-holder,
.a_let_it_out2_wrap .btn-holder,
.a_think_it_out_intro .btn-holder,
.a_shapematch2_intro .btn-holder,
.a_make_plan .btn-holder {
  font-size: 40%;
  margin-bottom: 1em;
}
.a_get_out .btn-holder button[data-active="1"],
.a_let_it_out1_wrap .btn-holder button[data-active="1"],
.a_let_it_out2_wrap .btn-holder button[data-active="1"],
.a_think_it_out_intro .btn-holder button[data-active="1"],
.a_shapematch2_intro .btn-holder button[data-active="1"],
.a_make_plan .btn-holder button[data-active="1"] {
  color: rgb(0, 51, 102);
  border-color: rgb(0, 51, 102);
  background-color: rgb(33, 217, 33);
}
.a_get_out .act-alert.emojis label[for=user-text]::before,
.a_let_it_out1_wrap .act-alert.emojis label[for=user-text]::before,
.a_let_it_out2_wrap .act-alert.emojis label[for=user-text]::before,
.a_think_it_out_intro .act-alert.emojis label[for=user-text]::before,
.a_shapematch2_intro .act-alert.emojis label[for=user-text]::before,
.a_make_plan .act-alert.emojis label[for=user-text]::before {
  content: "Other: Type in any body talk you may have that is not listed above.";
}

.a_let_it_out2_intro .act-alert-txt p,
.a_shapematch2_intro .act-alert-txt p {
  margin-bottom: 0;
  margin-top: 2em;
}
.a_let_it_out2_intro .btn-holder,
.a_shapematch2_intro .btn-holder {
  font-size: 54%;
  margin-bottom: 1em;
}
.a_let_it_out2_intro .btn-holder button[data-active="1"],
.a_shapematch2_intro .btn-holder button[data-active="1"] {
  color: rgb(0, 51, 102);
  border-color: rgb(0, 51, 102);
  background-color: rgb(33, 217, 33);
}

#ui.a_think_it_out_intro .strat-txt {
  margin-top: 2em;
  max-width: 80%;
}
#ui.a_think_it_out_intro .strat-txt::before {
  content: "Chosen Thought(s): ";
}

#ui.a_make_plan .bottom .strat-txt {
  margin-top: 2em;
}
#ui.a_make_plan .bottom .strat-txt::before {
  content: "Your Strategies: ";
}

#stage.a_make_plan .strat-txt {
  margin-top: -20.34em;
  position: absolute;
  left: 5%;
  width: 90%;
}

.a_let_it_out .timer,
.a_let_it_out .holder {
  opacity: 0;
}
.a_let_it_out .countdown {
  /* color: #e0a20d; */
  color: rgb(33, 217, 33);
  font-size: 6em;
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  margin-top: 1em;
  display: none;
}
.a_let_it_out .score {
  color: rgb(153, 204, 255);
  font-family: "Audiowide", sans-serif;
  font-size: 1.5rem;
  margin: 13.5rem auto;
  width: 7rem;
  line-height: 2rem;
  opacity: 0;
  display: flex;
  flex-direction: column;
}
.a_let_it_out .score span {
  display: inline-block;
}
.a_let_it_out .score span:before {
  content: "points:";
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.a_let_it_out .def-holder {
  top: 12em;
  left: 12em;
  position: absolute;
  border: 0.1em solid rgb(153, 204, 255);
}
.a_let_it_out .def-holder .def {
  width: 16em;
  height: 8em;
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom: 0.1em solid rgb(153, 204, 255);
  display: flex;
  align-items: center;
}
.a_let_it_out .def-holder .def span {
  font-size: 1.2em;
  margin: 0 auto;
  font-family: "Lato", sans-serif;
  width: 85%;
  color: #FFF;
}
.a_let_it_out .def-holder .def:last-child {
  border: none;
}
.a_let_it_out .word-holder {
  top: 8em;
  left: 56em;
  position: absolute;
  display: flex;
  flex-flow: column;
}
.a_let_it_out .word-holder .drag-word {
  color: #FFF;
  width: 9em;
  height: 9em;
  margin: 0.4em auto;
  background-color: rgba(0, 0, 0, 0.5);
  border: 0.15em solid rgb(153, 204, 255);
  border-radius: 50%;
  display: flex;
  align-items: center;
  visibility: hidden;
}
.a_let_it_out .word-holder .drag-word span {
  font-family: "PT Sans", sans-serif;
  font-size: 1.4em;
  /* font-weight: 700; */
  width: 90%;
  margin: 0 auto;
}
.a_let_it_out .word-holder .drag-word.correct {
  color: rgb(18.1896, 119.6104, 18.1896);
  font-weight: 700;
  background-color: rgb(255, 255, 255);
}
.a_let_it_out .word-holder .drag-word.incorrect {
  color: rgb(102, 0, 51);
  font-weight: 700;
  background-color: rgb(255, 255, 255);
}
.a_let_it_out #bonus-msg {
  color: #FFF;
  font-size: 4em;
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  text-align: center;
  width: 60%;
  margin: 1em 20% 0;
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

.a_think_it_out .bubble-holder,
.a_think_it_out .act-note-div,
.a_think_it_out .act-note {
  display: flex;
  align-items: center;
  justify-content: center;
}
.a_think_it_out .act-note-div {
  margin: 5em 4em 0;
  position: relative;
  cursor: pointer;
}
.a_think_it_out .act-note {
  max-width: 20em;
  height: 16em;
  border-radius: 50%;
}
.a_think_it_out .act-note-text {
  font-size: 1.6em;
  color: rgb(0, 51, 102);
}
.a_think_it_out #alien {
  margin-top: 690px;
  width: 210px;
  height: 243px;
}
.a_think_it_out .scene-text {
  color: rgb(33, 217, 33);
  font-family: "PT Sans", sans-serif;
  font-size: 1.7em;
  width: 60%;
  margin: 100px 15% 0;
  line-height: 1.4em;
  position: absolute;
  opacity: 0;
}
.a_think_it_out .bubble-holder {
  top: 4.9em;
  position: absolute;
  width: 1190px;
  height: 568px;
}

.a_use_strats #stage-clipped {
  background-color: #000;
}
.a_use_strats #debug-canvas {
  top: 78px;
  left: 46px;
  position: absolute;
}
.a_use_strats .focus-overlay {
  width: 1190px;
  height: 568px;
  top: 78px;
  left: 46px;
  position: absolute;
  clip-path: url(#canvas-clip);
  opacity: 0;
  visibility: hidden;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#02ff13+51,02ff13+100&0+0,0+51,0.66+100 */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(33, 217, 33, 0) 0%, rgba(33, 217, 33, 0) 51%, rgba(33, 217, 33, 0.66) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.a_use_strats .powerbar-wrap {
  width: 350px;
  height: 14px;
  top: 155px;
  left: 50%;
  margin-left: -175px;
  position: absolute;
}
.a_use_strats .powerbar-wrap .powerbar {
  width: 100%;
  height: 100%;
  margin-bottom: 0.6em;
  opacity: 0;
  visibility: hidden;
  text-align: left;
  border-left: thick solid #FFF;
}
.a_use_strats .powerbar-wrap .powerbar span {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.a_use_strats .powerbar-wrap .powerbar.blue span {
  background-color: rgb(153, 204, 255);
}
.a_use_strats .powerbar-wrap .powerbar.green span {
  background-color: rgb(33, 217, 33);
}
.a_use_strats .volume {
  color: rgb(153, 204, 255);
  font-family: "Audiowide", sans-serif;
  font-size: 3em;
  margin: 0.15em 0.6em;
  width: 2em;
  line-height: 0.8em;
  opacity: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.a_use_strats .volume .vol {
  display: inline-block;
}
.a_use_strats .volume .vol::before {
  content: "volume:";
  font-size: 0.45em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.a_use_strats .volume.right-side {
  /* calc( 100% - (width(2em) + margin-left(0.6em) + margin-right(0.6em))) */
  left: calc(100% - 3.2em);
}
.a_use_strats .strat-btn {
  width: 5em;
  height: 5em;
  margin: 0.5em auto;
  border-radius: 100%;
  border: 0.15em solid rgb(33, 217, 33);
  background-color: rgba(0, 0, 0, 0.65);
  color: #FFF;
  font-family: "Audiowide", sans-serif;
  font-size: 1.1em;
  display: flex;
  justify-content: center;
}
.a_use_strats .strat-btn.go::before {
  content: "GET OUT";
}
.a_use_strats .strat-btn.lio::before {
  content: "LET IT OUT";
}
.a_use_strats .strat-btn.tio::before {
  content: "THINK IT OUT";
}
.a_use_strats .strat-btn-wrap {
  margin-top: 7.4em;
  opacity: 0;
}
.a_use_strats .act-question-box h2 {
  text-align: center;
  width: 100%;
  margin: 0 0 0.5em;
}
.a_use_strats .guys-wrap {
  top: 0.8em;
  left: 65%;
  width: 450px;
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  justify-content: right;
  transform: scaleX(0.65) scaleY(0.65);
}
.a_use_strats .guys-wrap .guy {
  background-image: url(/images/a_use_strats/a_use_strats_sprite.png);
  overflow: hidden;
  width: 150px;
  height: 101px;
  /* background-position: determined in code - ArtRegistry.js */
}

.scenarios {
  /* .descContainer {
  	min-height: 400px;
  	background-color:rgba(0, 0, 0, 0.6);
  	padding-top: 5%;
     	font-size: 1.4em;		
     	width: 540px;    	 
     	color: #fff;   
     	position: absolute;
     	top: 173px;
     	left: 159px;
  } */
}
.scenarios .arrowsContainer {
  float: left;
  height: 320px;
  margin-top: 140px;
  width: 90px;
}
.scenarios .choicesContainer {
  float: left;
  height: 100%;
  margin-top: 96px;
  width: 30%;
}
.scenarios .choice {
  height: 18%;
  margin-bottom: 25px;
  width: 90%;
  background-color: rgba(153, 204, 255, 0.82);
  border-radius: 1em;
  font-family: "PT Sans", sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  cursor: pointer;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scenarios .play-btn {
  margin: -18em auto 0 45%;
  cursor: pointer;
}
.scenarios .scenario {
  float: left;
  height: 100%;
  width: 55%;
  cursor: pointer;
}
.scenarios .scenario img {
  margin-left: 113px;
  margin-top: 96px;
}
.scenarios .scenario.center {
  float: none;
  width: 100%;
}
.scenarios .scenario.center img {
  margin-left: 0;
  margin-top: 84px;
}
.scenarios .scenario.center .play-btn {
  margin: -18em auto 0 auto;
}
.scenarios svg .line {
  fill: none;
  stroke: #21d921;
  stroke-miterlimit: 10;
  stroke-width: 8px;
}
.scenarios svg .head {
  fill: #21d921;
}
.scenarios .countdown {
  color: #FFF;
  font-family: "Audiowide", sans-serif;
  font-size: 4.5em;
  margin: -0.1em auto;
}
.scenarios .countdown span {
  width: 0.9em;
  margin: 0;
  display: inline-block;
}
.scenarios .countdown .colon {
  width: 0.2em;
  margin-right: 0.05em;
}
.scenarios .feelings {
  font-family: "Audiowide", sans-serif;
  font-size: 2.5em;
  line-height: 0.75em;
  position: absolute;
  opacity: 0.5;
  width: auto;
  text-align: left;
  color: rgb(153, 204, 255);
  margin: 0.4em 0 0 2.7em;
  opacity: 0;
}
.scenarios .feelings .emo:before {
  content: "emotion(s):";
  font-size: 0.5em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.scenarios .feelings .wrds {
  font-size: 0.72em;
  text-transform: uppercase;
  margin-top: -0.2em;
  display: inline-block;
}
.scenarios .emo-volume {
  top: 0.4em;
  font-family: "Audiowide", sans-serif;
  font-size: 2.5em;
  line-height: 0.75em;
  position: absolute;
  opacity: 0;
  width: 1.6em;
  color: rgb(153, 204, 255);
  left: 0.5em;
}
.scenarios .emo-volume .vol:before {
  content: "vol:";
  font-size: 0.5em;
  font-family: "Lato", sans-serif;
  color: rgb(33, 217, 33);
}
.scenarios .emo-volume .num {
  margin-top: 0.1em;
  display: inline-block;
}

.scenarios1 .choice {
  margin-bottom: 8em;
}

/* a_make_plan includes a_s4_wrap */
.a_make_plan .act-alert.emojis {
  width: 49em;
  margin-left: -23.5em;
}
.a_make_plan .act-alert.emojis label[for=user-text]::before {
  content: "Other: Type in any feelings you may have that are not listed. Separate by comma.";
}
.a_make_plan .act-alert.triggers label[for=user-text]::before {
  content: "Type in at least 2 possible triggers. Separate by comma.";
}
.a_make_plan .act-alert-txt p {
  margin-bottom: 0;
}
.a_make_plan .act-alert-txt h2 {
  margin-bottom: 0;
}
.a_make_plan .act-alert-txt h3, .a_make_plan .act-alert-txt h4 {
  margin-bottom: 0.4em;
}
.a_make_plan .act-alert-txt .selected {
  color: rgb(0, 51, 102);
  text-transform: uppercase;
  background-color: rgb(178.5, 216.75, 255);
  line-height: 2em;
}
.a_make_plan .act-alert-txt .selected::before {
  content: "- ";
}
.a_make_plan .act-alert-txt .selected::after {
  content: " -";
}
.a_make_plan button[data-type=get-out]::before {
  content: "Help: GET OUT";
}
.a_make_plan button[data-type=let-it-out]::before {
  content: "Help: LET IT OUT";
}
.a_make_plan button[data-type=think-it-out]::before {
  content: "Help: THINK IT OUT";
}
.a_make_plan .act-btn.help {
  float: right;
  font-size: 70%;
  margin-right: 1em;
}
.a_make_plan .diagram {
  top: 76px;
  left: 45px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.a_make_plan .diagram .circle {
  height: 15em;
  width: 15em;
  border: thick solid #FFF;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
.a_make_plan .diagram .circle .words {
  font-family: "Audiowide", sans-serif;
  font-size: 1em;
  color: orange;
  text-transform: uppercase;
  width: 85%;
  margin-bottom: 0.15em;
}
.a_make_plan .diagram .circle .words.title {
  text-decoration: underline;
  font-size: 2em;
  color: #FFF;
}
.a_make_plan .diagram .arrow {
  height: 4em;
  width: 8em;
  background: no-repeat url(/images/arrow.svg);
  background-size: cover;
}

.a_make_plan #user-text,
.a_make_plan .user-text,
.a_s4_wrap #user-text,
.a_s4_wrap .user-text {
  margin: 0 auto;
  border: thin solid rgb(0, 51, 102);
  width: 94%;
}
.a_make_plan label[for=user-text-go],
.a_make_plan label[for=user-text-lio],
.a_make_plan label[for=user-text-tio],
.a_make_plan label[for=feedback-text],
.a_s4_wrap label[for=user-text-go],
.a_s4_wrap label[for=user-text-lio],
.a_s4_wrap label[for=user-text-tio],
.a_s4_wrap label[for=feedback-text] {
  font-size: 100%;
  font-weight: 700;
  line-height: 1.5em;
  display: inline-block;
  text-align: left;
  width: 94%;
  margin-top: 0.6em;
}/*# sourceMappingURL=main.css.map */