#app, #app * {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

#app input,
#app label,
#app select,
#app button,
#app textarea {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 100%;
  font-size: 12px;
  font-family: inherit;
  font-weight: 400; }

#app input:focus,
#app a:focus {
  outline: 0; }

#app button::-moz-focus-inner {
  border: 0; }

/* define */
/* generate */
/* container*/
.fl-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row; }

.fl-inl-row {
  display: inline-flex;
  flex-direction: row; }

.fl-row-rev {
  display: flex;
  flex-direction: row-reverse; }

.fl-inl-row-rev {
  display: inline-flex;
  flex-direction: row-reverse; }

.fl-col {
  display: flex;
  flex-direction: column; }

.fl-col-rev {
  display: flex;
  flex-direction: column-reverse; }

.fl-inl-col {
  display: inline-flex;
  flex-direction: column; }

.fl-inl-col-rev {
  display: inline-flex;
  flex-direction: column-reverse; }

/* justify-content */
.fl-jc-start {
  justify-content: flex-start; }

.fl-jc-end {
  justify-content: flex-end; }

.fl-jc-center {
  justify-content: center; }

.fl-jc-between {
  -webkit-box-pack: justify;
  justify-content: space-between; }

.fl-jc-around {
  justify-content: space-around; }

/* align-content */
.fl-ac-start {
  align-content: flex-start; }

.fl-ac-end {
  align-content: flex-end; }

.fl-ac-center {
  align-content: center; }

.fl-ac-around {
  align-content: space-around; }

.fl-ac-between {
  align-content: space-between; }

.fl-ac-stretch {
  align-content: stretch; }

/* align-items */
.fl-ai-start {
  -webkit-box-align: flex-start;
  align-items: flex-start; }

.fl-ai-end {
  -webkit-box-align: flex-end;
  align-items: flex-end; }

.fl-ai-center {
  -webkit-box-align: center;
  align-items: center; }

.fl-ai-baseline {
  -webkit-box-align: baseline;
  align-items: baseline; }

.fl-ai-stretch {
  -webkit-box-align: stretch;
  align-items: stretch; }

/* align-self */
.fl-as-start {
  align-self: flex-start; }

.fl-as-end {
  align-self: flex-end; }

.fl-as-center {
  align-self: center; }

.fl-as-baseline {
  align-self: baseline; }

.fl-as-stretch {
  align-self: stretch; }

/* misc */
.fl-nowrap {
  flex-wrap: nowrap; }

.fl-wrap {
  flex-wrap: wrap; }

.fl-wrap-reverse {
  flex-wrap: wrap-reverse; }

.fl-grow-0 {
  -webkit-flex-grow: 0;
  flex-grow: 0; }

.fl-grow-1 {
  -webkit-flex-grow: 1;
  flex-grow: 1; }

.fl-shrink-0 {
  -webkit-flex-shrink: 0;
  flex-shrink: 0; }

.fl-shrink-1 {
  -webkit-flex-shrink: 1;
  flex-shrink: 1; }

html {
  font-family: 'Roboto', sans-serif; }

body {
  font-size: 12px; }

h1, .h1 {
  font-size: 18px;
  letter-spacing: 0.1em;
  font-weight: 400; }

h2, .h2 {
  font-size: 16px;
  font-weight: 400; }

h3, .h3 {
  font-size: 14px;
  font-weight: 400; }

.upper {
  text-transform: uppercase; }

.cvr {
  width: 100%;
  height: 100%; }

.rel {
  position: relative; }

.abs {
  position: absolute;
  top: 0;
  left: 0; }

.cvr-img {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 50%; }

* {
  margin: 0;
  padding: 0; }

html,
body {
  width: 100%;
  height: 100%;
  background-color: #000111; }

#app {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }

#app .viewer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%; }
  #app .viewer.no-cursor {
    cursor: none; }

/* #app .viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
} */