*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "ITCFranklinGothicStd", sans-serif;
  font-weight: 400;
  font-size: 24px;
  position: relative;
}

@media screen and (max-width: 768px) {
  html, body {
    font-size: 16px;
  }
}

.noselect,
div, span, a, img,
h1,h2,h3,h4,h5,p {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
a,
a:hover {
  color: inherit;
}

::selection {
  background: #000;
  color: #fff;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #111;
  background: rgb(255, 210, 3) !important;
  z-index: 99999
}

#app {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  /* background: rgb(255, 210, 3); */
  background: rgb(255, 210, 3) !important;
  transition: all 0.5s ease
}

#app.site-nav-active {
  top: 93px;
  top: 8vw;
}

#app.site-nav-active .site-nav-curtain {
  z-index: 999;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
}

#app.cant-interact canvas{
  pointer-events: none;

}

.ui {
  /* position: fixed; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  pointer-events: none;
}
.ui > * {
  z-index: 9;
  pointer-events: initial;
}

.action {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  z-index: 99;
  background: none;
  width: 8.5em;
  line-height: 1;
  font-weight: bold;
  border: 3px solid;
  padding: 0.4em .5em 0.2em;
  transition: -webkit-transform .1s;
  transition: transform .1s;
  transition: transform .1s, -webkit-transform .1s;
}

.action.center{
  bottom: auto;
  right: auto;
  left:50%;
  top:50%;
  -webkit-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
  opacity: 0;
}

.rewatch{
  position: absolute;
  display: block;
  top: 0.3em;
  left: 1.4em;
  padding-left: 20px;
  width: 9em;
  z-index: 10;
  cursor: pointer;
  display: none;
}

.rewatch:hover{
  display: block;
}

.action.center.visible{
  opacity: 1;
}

button.action{
  font: inherit;
  font-weight: bold;
  font-family: "ITCFranklinGothicStd", sans-serif;
}
.action:disabled {
  color: inherit;
  opacity: 0.2
}

.action:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.action.center:hover {
  -webkit-transform: translate(-50%,-50.5%);
          transform: translate(-50%,-50.5%);
}

.action.light {
  font-weight: normal;
  border-color: transparent;
}

.actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.actions .action {
  margin: 0 .25rem
}

.logo {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  pointer-events: none;
  z-index: 99999;
}
.logo img {
  width: 2rem;
  height: auto;
  display: block;
}

.start-again {
  pointer-events: initial;
  cursor: pointer;
  z-index: 9999999;
  position: fixed;
  top: 1rem;
  right: 1rem;
  text-decoration: underline;
}
.hamburger,
.close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  z-index: 99;
}

.question-mark,
.back {
  position: absolute;
  left: 1rem;
  top: 1rem;
  cursor: pointer;
  z-index: 99;
}

.title {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 49;
}

.dummy-header img {
  width: 100%;
  height: 8vw;
  /* height: 93px; */
}

.stage-bottom {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 49;
}

.stage-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 49;
  /* max-width: 600px; */
  /* width: 90%; */
  padding: 1rem;
}

.center-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.scrollable {
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

.max-width-800 {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
.max-width-700 {
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
}
.max-width-600 {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.about {
  padding: 4rem
}

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3, .h3 {
  font-size: 1.5rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
h5, .h5 {
  font-size: 1rem;
}
h6, .h6 {
  font-size: 0.75rem;
}

h1,h2,h3 {
  line-height: 1.3
}
h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
  margin-bottom: 0
}
h1 a,h2 a,h3 a,h4 a,h5 a,p a{
  text-decoration: underline;
  cursor: pointer;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.03em
}


.home-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}



.tutorial-list {
  display: block;
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  text-align: center;
}

.tutorial-list-item {
  transition: opacity .5s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  /* margin-right: 10px; */
}
.tutorial-list-enter, .tutorial-list-leave-to
/* .tutorial-list-leave-active below version 2.1.8 */ {
  opacity: 0;
  /* transform: translateY(5px); */
}
.tutorial-list-leave-active {
  position: absolute;
}





/* .tagline-list {
  display: block;
  position: absolute;
  text-align: center;
  width: 100%;
} */

.tagline-list-item {
  transition: opacity .5s;
  position: absolute;
  text-align: center;
  display: block;
  margin: auto;
  width: 100%
  /* margin-right: 10px; */
}
.tagline-list-enter, .tagline-list-leave-to
/* .tagline-list-leave-active below version 2.1.8 */ {
  opacity: 0;
  /* transform: translateY(5px); */
}
.tagline-list-leave-active {
  position: absolute;
}



/* Enter and leave animations can use different */
/* durations and timing functions.              */
.fade-enter-active {
  /* transition-delay: .3s; */
  transition: all .3s ease-in-out .5s;
}
.fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter, .fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  /* transform: translateX(10px); */
  opacity: 0;
}

.drawing-tools {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5rem;
  width: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  z-index: 99;
}
.tool {
  width: 36px;
  height: 36px;
  margin: .5rem 0;
  position: relative;
  cursor: pointer;
}
.tool-icon {
  position: absolute;
  width: 36px;
  height: 36px;
  background-size: cover;
  background-repeat: no-repeat;
}
.tool::before {
  display: block;
  position: absolute;
  line-height: 1.75rem;
  right: 100%;
  padding-right: .5em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.tool:hover::before,
.tool:hover .tool-tip {
  opacity: 1;
  display: block;
}

.tool.has-tooltip:hover::before {
  opacity: 0;
}

.tool.disabled{
  pointer-events: none;
}

.tool.coming{
  opacity: 0.3;
  /* pointer-events: none; */
}

.tool.disabled .tool-tip, .tool.disabled::before{
  opacity: 0 !important;
}

.show-help .tool::before{
  opacity: 1;
}

.show-help .rewatch{
  display: block;
}

.tool-tip{
  display: none;
  position: absolute;
  line-height: 1.75rem;
  right: 100%;
  /* padding-right: .5em; */
  opacity: 0;
  top:0px;
  padding-right: .5em;
  /* margin-right: 12px; */
  /* padding-top: 30px; */
  /* pointer-events: none; */
  white-space: nowrap;
}
.tool-tip:hover{
  display: block;
  opacity: 1;
}
.tool-tip span{
  /* margin-right: 12px; */
  pointer-events: all;
}

.tool-tip span:hover{
  border-bottom: 2px solid;
}

.tool-tip span.active{
  border-bottom: 2px solid;
}

.disabled {
  opacity: 0.3
}

.no-click {
  pointer-events: none;
}

.tool-rotate .tool-icon {
  background-image: url(../assets/ic_3d_rotation_black_24px.svg);
}
.tool-rotate::before {
  /* content: 'Auto Rotate'; */
}

.tool-rotate .tool-tip {
  /* position: absolute;
  content: 'Auto Rotate'; */
}
.tool-brush .tool-icon {
  background-image: url(../assets/ic_panorama_fish_eye_black_24px.svg);
}
.tool-brush::before {
  content: 'Brush Size';
}
.tool-text .tool-icon {
  background-image: url(../assets/ic_text_fields_black_24px.svg);
}
.tool-text::before {
  content: 'Type Input';
}

.tool-pan .tool-icon{
  background-image: url(../assets/ic_pan_tool_black_24px.svg);
}

.tool-pan::before {
  content: 'Pan your drawing';
}

.tool-undo{
  margin-top: 40px;
}
.tool-undo .tool-icon {
  background-image: url(../assets/ic_undo_black_24px.svg);
}
.tool-undo::before {
  content: 'Undo';
}
.tool-bin .tool-icon {
  background-image: url(../assets/ic_delete_black_36px.svg);
}
.tool-bin::before {
  content: 'Clear All';
}

.tool-video .tool-icon {
  background-image: url(../assets/ic_videocam_black_24px.svg);
}
.tool-video::before {
  content: 'AR Coming Soon';
}
.tool-video {
  position: absolute;
  bottom: 1rem;
  right: 0;
}

.brush-sizer {
  position: absolute;
  border-radius: 50%;
  background: black;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.size1 {
  width: 24%;
  height: 24%
}
.size2 {
  width: 50%;
  height: 50%
}
.size4 {
  width: 75%;
  height: 75%
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}
}

@keyframes spin {
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}
}
.spin {
  -webkit-animation: spin 4s infinite linear;
          animation: spin 4s infinite linear;
}
.spin.spin-right {
  -webkit-animation: spin 4s infinite linear;
          animation: spin 4s infinite linear;
  -webkit-animation-direction: reverse;
          animation-direction: reverse;
}

@-webkit-keyframes wave {
    from {-webkit-transform: rotate(15deg);transform: rotate(15deg);}
    to {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
}

@keyframes wave {
    from {-webkit-transform: rotate(15deg);transform: rotate(15deg);}
    to {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
}
.wave {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: wave 0.5s infinite alternate;
          animation: wave 0.5s infinite alternate;
}


.tool-text-input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  z-index: 99
}

.tool-text-input input[type='text'] {
  font-size: 4rem;
}
.tool-text-input a {
  cursor: pointer;
}

.tool-help{
  position: fixed;
  /* bottom: 10px;
  left: 20px; */
  top: 1rem;
  left: 1rem;
}


input[type='text'] {
  /* -webkit-appearance: caret; */
  display: block;
  /* width: 90%; */
  max-width: 600px;
  border-radius: 0px;
  border: none;
  outline: none;
  border-bottom: 0.05em solid black;
  background: transparent
}

input[type='checkbox'] {
  /* -webkit-appearance: input; */
  /* display: block; */
  /* width: 90%; */
  /* max-width: 600px; */
  border-radius: 0px;
  border: none;
  outline: none;
  border: 0.05em solid black;
  background: transparent
}

.registration input {
  background: rgba(0,0,0,0.1)
}

.align-left {
  text-align: left;
}

@media screen and (min-width: 1600px) {
  .tool::before,
  .tool .tool-tip{
    opacity: 1;
    display: block;
  }
  .rewatch {
    display: block;
  }
}