* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0px;
  border: 0px;
  margin: 0px; }

.clearfix:after {
  content: "";
  display: table;
  clear: both; }

* {
  /* this property is completely broken on some versions of iOS - https://bugs.webkit.org/show_bug.cgi?id=136685 */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

@font-face {
  font-family: 'SesameWorkshop';
  src: url("../fonts/SesameWkshp-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/SesameWkshp-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/SesameWkshp-Bold.woff") format("woff"), url("../fonts/SesameWkshp-Bold.ttf") format("truetype"), url("../fonts/SesameWkshp-Bold.svg#6327f76b188cdcd102aff27c390f0771") format("svg");
  /* Legacy iOS */
  font-style: bold;
  font-weight: 700; }
@font-face {
  font-family: 'SesameWorkshop';
  src: url("../fonts/SesameWkshp-Regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/SesameWkshp-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SesameWkshp-Regular.woff") format("woff"), url("../fonts/SesameWkshp-Regular.ttf") format("truetype"), url("../fonts/SesameWkshp-Regular.svg#e4ec8f67d560a5e84e9bdeebd02ba671") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400; }
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'SesameWorkshop', sans-serif; }

body {
  position: relative;
  background: #000000;
  text-align: center;
  margin: 0; }

#wrapper-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden; }

#game-area {
  position: absolute;
  width: 1320px;
  height: 780px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*background-image: url(assets/images/registration.png);*/
  /*background-size: cover;*/
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  -webkit-perspective: 500px;
  -webkit-perspective-origin: 50% 100%; }

#title {
  position: absolute;
  width: 1320px;
  height: 780px;
  top: 0;
  left: 0;
  background-image: url(../images/title.png);
  background-repeat: no-repeat;
  background-position: center;
  transition: 1s;
  z-index: 100; }

#title.hide {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -moz-transform: translateY(100%);
  transform: translateY(100%); }
  .mobile #title.hide {
    display: none; }

#parent-section {
  position: absolute;
  width: 1320px;
  height: 780px;
  top: 0;
  left: 0;
  z-index: 50;
  background: white;
  padding: 60px 148px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transition: 0.5s; }
  #parent-section.hide {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    .mobile #parent-section.hide {
      display: none; }

.title-bar {
  width: 100%;
  padding: 0 25px; }

p {
  padding: 10px;
  font-size: 2rem;
  width: 50%;
  max-width: 640px;
  text-align: left; }

.instructions-monster-background {
  border-radius: 10px;
  background: #ae76fd;
  width: 50%;
  max-width: 640px;
  float: right; }
  .instructions-monster-background img {
    display: block;
    margin: 0 auto; }

#play-button {
  text-align: center;
  color: white;
  padding: 10px 50px;
  border-radius: 5px;
  display: inline-block;
  font-size: 2rem;
  background: #9E66DA;
  margin: 10px;
  cursor: pointer;
  transition: 0.2s; }
  #play-button:hover {
    background: #ae76fd; }

#back-button-parents {
  position: fixed;
  top: 40px;
  right: 40px;
  width: 60px;
  cursor: pointer;
  backface-visibility: hidden;
  display: none; }
  #back-button-parents.show {
    display: block; }

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.skip-button {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 60px;
  left: 150px;
  z-index: 5000; }
  .skip-button:active {
    transform: scale(1.1); }

#global-close-button {
  position: fixed;
  width: 50px;
  height: 50px;
  top: 1%;
  right: 1%;
  background-image: url(../images/close.png);
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 10000;
  display: none; }

.flag {
  position: absolute;
  display: block;
  bottom: 120px;
  transform: scale(0);
  transition: 0.5s; }
  .flag#english {
    left: 12%; }
  .flag#espanol {
    right: 12%; }
  .flag.show {
    transform: scale(1); }
    .flag.show:hover {
      transition: 0.1s;
      transform: scale(1.1); }
    .flag.show:active {
      transition: 0.1s;
      transform: scale(0.9); }

@media screen and (max-width: 768px) {
  h1 {
    font-size: 3rem; }

  p, .instructions-monster-background {
    float: none;
    margin: 0 auto;
    width: 80%;
    max-width: none; }

  #play-button {
    font-size: 2.5rem; } }
@media screen and (max-width: 540px) {
  h1 {
    font-size: 5rem; }

  p, .instructions-monster-background {
    width: 95%;
    max-width: none;
    font-size: 3rem; }

  #play-button {
    font-size: 3.5rem;
    padding: 25px 80px; } }