@font-face {
  font-family: "Etica";
  font-weight: normal;
  src: url("../fonts/LFT_Etica_Book_Liip.eot?#iefix");
  src: url("../fonts/LFT_Etica_Book_Liip.eot?#iefix") format("eot"), url("../fonts/LFT_Etica_Book_Liip.woff") format("woff"), url("../fonts/LFT_Etica_Book_Liip.ttf") format("truetype"); }
@font-face {
  font-family: "Etica";
  font-weight: bold;
  src: url("../fonts/LFT_Etica_Bold_Liip.eot?#iefix");
  src: url("../fonts/LFT_Etica_Bold_Liip.eot?#iefix") format("eot"), url("../fonts/LFT_Etica_Bold_Liip.woff") format("woff"), url("../fonts/LFT_Etica_Bold_Liip.ttf") format("truetype"); }
html {
  background: #000; }

body {
  overflow: hidden;
  font-size: 1em;
  font-family: "Etica";
  line-height: 1.4;
  font-size: 80%;
  transition: background 1s;
  height: 100vh;
  -webkit-perspective: 1000;
  perspective: 1000; }
  @media (min-width: 480px) {
    body {
      font-size: 90%; } }
  @media (min-width: 768px) {
    body {
      font-size: 100%; } }
  body.room-is-taken .room-display {
    background: #f26531; }
  body.room-is-taken .meeting-remaining.next, body.room-is-taken .room-free {
    opacity: 1;
    transform: translate(0, 0); }
  body.room-is-taken .next {
    opacity: 0;
    transform: translate(3em, 0); }
  body.room-is-taken .current {
    opacity: 1;
    transform: translate(0, 0); }
  body.room-is-free .room-display {
    background: #81ab2a; }
  body.room-is-free .meeting-creator, body.room-is-free .meeting-guestcount {
    opacity: 0;
    transform: translate(3em, 0); }
  body.room-is-free .next {
    opacity: 1;
    transform: translate(0, 0); }
  body.room-is-free .current {
    opacity: 0;
    transform: translate(3em, 0); }
  body.room-actions-view-visible .room-display {
    transform: rotateX(45deg);
    transform-origin: 0 250%;
    opacity: 0.5; }
  body.room-actions-view-visible .room-actions-view {
    top: 0;
    transform: rotateX(0deg);
    transform-origin: 0 220%; }

.room-display {
  transition: all 1s;
  height: 100vh;
  color: white; }

h1, h2, h3 {
  text-transform: uppercase;
  margin: 0; }

header {
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  padding: 1em; }
  header .room-name {
    float: left; }
  header .current-time {
    float: right;
    font-weight: normal; }

.room-status {
  padding: 1em;
  margin-top: 3em; }
  .room-status .next, .room-status .current {
    position: absolute;
    top: 0;
    left: 0; }
  .room-status .meeting-name {
    font-size: 2em;
    height: 1.5em;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .room-status .meeting-name span {
      transition: all 1s; }
    @media (min-width: 480px) {
      .room-status .meeting-name {
        font-size: 3em; } }
  .room-status .meeting-progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5em;
    margin-top: 0.5em; }
    .room-status .meeting-progress::-webkit-progress-bar {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 1em; }
    .room-status .meeting-progress::-webkit-progress-value {
      background: white;
      border-radius: 1em;
      transition: 2s width; }
  .room-status .meeting-facts {
    font-size: 1.25em;
    list-style-type: none;
    position: relative;
    margin: 0;
    padding: 0; }
    .room-status .meeting-facts li {
      padding: 0.25em 0 0.25em 2em;
      height: 1em;
      position: relative;
      transition: all 1s; }
      .room-status .meeting-facts li:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: 1.5em;
        height: 1.5em;
        background-size: 100%;
        opacity: 0.2; }
      .room-status .meeting-facts li.meeting-remaining span {
        padding: 0.25em 0 0.25em 2em;
        transition: all 1s;
        transition-delay: 0.1s; }
      .room-status .meeting-facts li.meeting-remaining:before {
        background-image: url("../img/time.svg"); }
      .room-status .meeting-facts li.meeting-creator {
        transition-delay: 0.2s; }
        .room-status .meeting-facts li.meeting-creator:before {
          background-image: url("../img/user.svg"); }
      .room-status .meeting-facts li.meeting-guestcount {
        transition-delay: 0.3s; }
        .room-status .meeting-facts li.meeting-guestcount:before {
          background-image: url("../img/users.svg"); }

footer {
  box-sizing: border-box;
  width: 100%;
  padding: 1em 1em 0 1em; }
  @media (min-width: 480px) {
    footer {
      position: absolute;
      bottom: 1em;
      left: 0; } }
  footer .upcoming-meetings .upcoming-meeting-time {
    padding-right: 1em; }
  @media (min-width: 480px) {
    footer .actions-toolbar.room-actions {
      position: absolute;
      bottom: 0;
      right: 1em; } }
  footer .actions-toolbar .reserve-room {
    width: 100%;
    margin-top: 1em; }
    @media (min-width: 480px) {
      footer .actions-toolbar .reserve-room {
        width: auto;
        margin-top: 0; } }

.flex {
  display: flex; }
  .flex .flex-child {
    flex-grow: 1;
    width: 50%; }
    .flex .flex-child:first-child {
      margin-right: 0.3333em; }
    .flex .flex-child:last-child {
      margin-left: 0.3333em; }

.btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0.2em solid;
  background: none;
  border-radius: 0.5em;
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: bold;
  padding: 0.5em; }
  .btn.btn-white {
    color: white; }
  .btn.btn-black {
    color: black; }
  .btn.btn-green {
    color: #81ab2a; }
  .btn.btn-red {
    color: #f26531; }
  .btn.btn-grey-filled {
    color: white;
    background: #8c8c8c;
    border-color: #8c8c8c; }
  .btn.btn-green-filled {
    color: white;
    background: #81ab2a;
    border-color: #81ab2a; }

* {
  -webkit-user-select: none; }
  *:focus {
    outline: none; }

.room-actions-view {
  transition: all 0.8s ease;
  transition-delay: 0.1s;
  transform-origin: 0 0%;
  width: 100%;
  color: #414141;
  background: white;
  height: 100vh;
  position: absolute;
  box-sizing: border-box;
  top: 100vh;
  padding: 1em; }
  .room-actions-view .reserve-room-form {
    margin-top: 3em; }
    .room-actions-view .reserve-room-form h2 {
      font-size: 1.5em;
      font-weight: bold; }
    .room-actions-view .reserve-room-form select {
      -webkit-appearance: none;
      appearance: none;
      font-size: 1.5em;
      padding: 0.25em;
      margin-top: 0.5em;
      border: 0; }