:root {
  --primary-color: transparent;
  --secondary-color: transparent;
  --font-color: transparent;
  --button-font-color: transparent;
  --start-font-color: transparent;
  --countdown-color: transparent;
  --background-countdown-color: transparent;
  --cheese-color: transparent;
  --panel-color: transparent;
  --hover-panel-color: transparent;
  --border-color: transparent;
  --box-color: transparent;
  --gallery-button-color: transparent;
  --background-default: none;
  --background-admin: none;
  --background-chroma: none;
  --background-ipcam: none;
  --fontSize: 16px;
  --preview-rotation: 0deg; }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 200;
  src: local("Dosis ExtraLight"), local("Dosis-ExtraLight"), url(../fonts/dosis/ExtraLight.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  src: local("Dosis Light"), local("Dosis-Light"), url(../fonts/dosis/Light.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: local("Dosis Regular"), local("Dosis-Regular"), url(../fonts/dosis/Regular.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 500;
  src: local("Dosis Medium"), local("Dosis-Medium"), url(../fonts/dosis/Medium.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 600;
  src: local("Dosis SemiBold"), local("Dosis-SemiBold"), url(../fonts/dosis/SemiBold.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 700;
  src: local("Dosis Bold"), local("Dosis-Bold"), url(../fonts/dosis/Bold.woff) format("woff"); }

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 800;
  src: local("Dosis ExtraBold"), local("Dosis-ExtraBold"), url(../fonts/dosis/ExtraBold.woff) format("woff"); }

* {
  -ms-content-zooming: none;
  box-sizing: border-box; }

html,
body {
  font-size: var(--fontSize);
  width: 100%;
  height: 100%; }

h1,
h2 {
  font-weight: 300; }

h1 {
  font-size: 3rem;
  margin: 33px 0; }

h3 {
  font-weight: normal; }

.deselect ::selection {
  background: transparent;
  color: inherit; }

.deselect ::-moz-selection {
  background: transparent;
  color: inherit; }

.deselect {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

body {
  padding: 0;
  margin: 0;
  font-family: 'Dosis', sans-serif;
  font-weight: 300;
  color: #2b2127;
  font-size: 1em;
  line-height: 1.5;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  overflow: hidden; }

p.text-muted {
  font-size: 0.8em;
  opacity: 0.7; }

.accordion a,
.accordion a:active,
.accordion a:focus {
  color: var(--font-color);
  text-shadow: 0 0 5px black; }

.btn {
  padding: 20px 40px;
  border: 0 none;
  background: var(--primary-color);
  display: inline-block;
  color: var(--button-font-color);
  text-decoration: none;
  margin: auto;
  width: 200px;
  text-align: center;
  font-size: 1em; }
  .btn--small {
    padding: 12px 40px; }
  .btn--tiny {
    padding: 3px 6px; }
  .btn--flex {
    width: auto; }
  .btn--login {
    padding: 12px 18px;
    width: 50%; }
  .btn:active, .btn:focus, .btn:hover {
    background: var(--secondary-color); }

.btn.save-btn,
.btn.install-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  -ms-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear; }
  .btn.save-btn i,
  .btn.install-btn i {
    display: none; }
  .btn.save-btn:active, .btn.save-btn:focus,
  .btn.install-btn:active,
  .btn.install-btn:focus {
    outline: none; }
  .btn.save-btn span,
  .btn.install-btn span {
    display: none; }
    .btn.save-btn span.sv,
    .btn.install-btn span.sv {
      display: inline; }
  .btn.save-btn.error span.sv,
  .btn.save-btn.success span.sv,
  .btn.save-btn.saving span.sv,
  .btn.install-btn.error span.sv,
  .btn.install-btn.success span.sv,
  .btn.install-btn.saving span.sv {
    display: none; }
  .btn.save-btn.saving i,
  .btn.install-btn.saving i {
    display: inline-block; }
  .btn.save-btn.error,
  .btn.install-btn.error {
    background-color: #d93939 !important; }
    .btn.save-btn.error span.er,
    .btn.install-btn.error span.er {
      display: inline; }
  .btn.save-btn.success,
  .btn.install-btn.success {
    background-color: #81d939 !important; }
    .btn.save-btn.success span.su,
    .btn.install-btn.success span.su {
      display: inline; }

@media screen and (max-width: 1024px) {
  .takePic,
  .takeCollage {
    padding: 10px 10px; } }

.gallery {
  position: fixed;
  width: 0px;
  height: 0px;
  left: 0;
  top: 0;
  background: var(--primary-color);
  overflow: hidden;
  color: var(--font-color);
  transition: width 0.3s, height 0.3s;
  z-index: 1000; }
  .gallery h1 {
    margin-top: 10px;
    margin-left: 30px; }
  .gallery--open {
    width: 100%;
    height: 100%;
    padding: 0; }
  .gallery__inner {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column; }
  .gallery__header {
    height: 100px;
    width: 100%;
    background: var(--primary-color); }
    .gallery__header > a {
      position: absolute;
      right: 30px;
      top: 24px;
      color: var(--gallery-button-color);
      font-size: 1.875em;
      width: 50px;
      height: 50px;
      background: var(--secondary-color);
      text-align: center;
      line-height: 50px; }
  .gallery__body {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    justify-content: center; }
    .gallery__body a {
      display: block;
      width: 33.333333333333%;
      padding: 3px;
      max-width: 500px;
      text-decoration: none; }
    .gallery__body img {
      max-width: 100%;
      list-style: none;
      border: 1px solid var(--border-color);
      display: block; }
    .gallery__body figure {
      margin: 0; }
  .gallery figcaption {
    background-color: var(--secondary-color);
    text-align: center;
    color: var(--font-color); }

@media (max-width: 800px) {
  .pswp__button--arrow--left:before,
  .pswp__button--arrow--right:before {
    top: 50%;
    position: fixed; }
  .pswp__button--arrow--left:before {
    left: 5%; }
  .pswp__button--arrow--right:before {
    right: 5%; } }

.gallery-button {
  position: relative;
  z-index: 100; }

.sidenav {
  width: 100%;
  position: fixed;
  z-index: 1005;
  top: 0;
  bottom: 0;
  right: -100%;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 60px 30px;
  transition: right 0.5s; }
  @media (min-width: 576px) {
    .sidenav {
      width: 250px;
      right: -250px; } }
  .sidenav--open {
    right: 0; }
  .sidenav a {
    text-transform: uppercase;
    margin-bottom: 3px;
    background-color: var(--primary-color); }
    .sidenav a:hover {
      background-color: var(--secondary-color); }
  .sidenav .btn {
    width: 100%; }
  .sidenav .closebtn {
    position: absolute;
    right: 30px;
    top: 0;
    color: var(--font-color);
    font-size: 1.875em;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    text-align: center;
    line-height: 50px; }
    .sidenav .closebtn:hover {
      background: var(--secondary-color); }
  .sidenav .activeSidenavBtn a {
    background-color: var(--secondary-color); }

::-webkit-scrollbar {
  width: 6px; }

/* Track */
::-webkit-scrollbar-track {
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background-color: transparent; }

/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0px;
  background: var(--secondary-color); }

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center; }
  .modal--show {
    display: flex; }
  .modal__body {
    color: #ffffff;
    font-size: 2em;
    text-align: center;
    max-width: 100%;
    padding: 6px; }
    .modal__body * {
      max-width: 100%; }
    #qrCode .modal__body {
      background-color: #ffffff;
      color: #252525; }
      #qrCode .modal__body p {
        margin: 0;
        font-size: 0.7em; }

.github-fork-ribbon {
  width: 12.1em;
  height: 12.1em;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  font-size: 0.8em;
  text-decoration: none;
  text-indent: -999999px; }
  .github-fork-ribbon:before, .github-fork-ribbon:after {
    position: absolute;
    display: block;
    width: 15.38em;
    height: 1.54em;
    top: 3.23em;
    right: -3.23em;
    transform: rotate(45deg); }
  .github-fork-ribbon:hover:before {
    background-color: var(--secondary-color); }
  .github-fork-ribbon:before {
    content: '';
    padding: 0.38em 0;
    background-color: var(--primary-color);
    box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); }
  .github-fork-ribbon:after {
    content: attr(data-ribbon);
    color: var(--button-font-color);
    font: 700 1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.54em;
    text-decoration: none;
    text-shadow: 0 -0.08em rgba(0, 0, 0, 0.5);
    text-align: center;
    text-indent: 0;
    padding: 0.15em 0;
    margin: 0.15em 0;
    border-width: 0.08em 0;
    border-style: dotted;
    border-color: rgba(255, 255, 255, 0.7); }

.pswp__button--close,
.pswp__button--qrcode,
.pswp__button--print,
.pswp__button--print-chroma-keying,
.pswp__button--download,
.pswp__button--mail,
.pswp__button--playpause {
  color: var(--gallery-button-color);
  background: transparent !important;
  font-size: 1.625em;
  text-align: center;
  width: calc(4.375 * 1em);
  height: calc(4.375 * 1em);
  line-height: calc(4.375 * 1em); }
  .pswp__button--close:hover,
  .pswp__button--qrcode:hover,
  .pswp__button--print:hover,
  .pswp__button--print-chroma-keying:hover,
  .pswp__button--download:hover,
  .pswp__button--mail:hover,
  .pswp__button--playpause:hover {
    opacity: 1; }
  .pswp__button--close > i,
  .pswp__button--qrcode > i,
  .pswp__button--print > i,
  .pswp__button--print-chroma-keying > i,
  .pswp__button--download > i,
  .pswp__button--mail > i,
  .pswp__button--playpause > i {
    position: relative;
    z-index: -1; }

.pswp__qr {
  width: calc(18.75 * 1em);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10000;
  transform: translate(-50%, -50%);
  max-width: 100%; }
  .pswp__qr img {
    width: 100%; }

#wrapper {
  display: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  background-image: var(--background-default);
  background-position: center center;
  background-size: cover; }

#result {
  width: 100%;
  background: center center no-repeat;
  background-size: contain;
  z-index: 2; }

.resultInner {
  display: flex;
  position: absolute;
  bottom: -64px;
  left: 0;
  right: 0;
  justify-content: center;
  transition: bottom 0.5s;
  z-index: 100; }
  .resultInner.show {
    bottom: 0; }
  .resultInner .btn {
    width: auto;
    padding: 20px 0;
    text-align: center;
    flex-grow: 1;
    max-width: 250px;
    margin: initial; }
  @media (max-width: 576px) {
    .resultInner span {
      display: none; } }

#counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
  font-size: 12em;
  opacity: 0.2; }

#counter.tick {
  font-size: 1em;
  opacity: 1;
  transition: font-size 0.75s, opacity 0.75s; }

.cheese {
  position: absolute;
  color: var(--cheese-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
  font-size: 3em; }

#loader {
  display: none;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center center;
  color: var(--countdown-color);
  z-index: 100;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0; }
  #loader:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.5s; }
  #loader.showBackgroundImage:after {
    opacity: 0.5; }
  #loader.open {
    display: flex; }
  #loader .spinner {
    color: var(--cheese-color);
    font-size: 5em; }

.homebtn {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.875em;
  width: 130px; }

.qr {
  display: none;
  width: 300px;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff; }
  .qr > * {
    display: none; }
  .qr.active > * {
    display: block; }
  .qr p {
    margin: 0;
    padding: 0 15px;
    font-size: 1.6em; }
  .qr img {
    width: 100%;
    height: auto; }

.send-mail {
  z-index: 1600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--panel-color);
  color: var(--font-color);
  padding: 25px 15px 15px;
  min-width: 250px;
  display: none; }

#send-mail-close {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 1.75em;
  cursor: pointer; }

.mail-form-input {
  padding: 15px;
  margin: 12px 0;
  width: 100%; }

input[type='email'] {
  color: var(--font-color);
  background: var(--box-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  width: 100%;
  padding: 0 10px; }

.spacer {
  clear: both;
  height: 50px;
  width: 100%; }

.loading {
  font-size: 3.125em;
  text-align: center;
  width: 100%; }
  .loading p {
    margin: 0 0 0.2em; }
  .loading .btn {
    font-size: 0.4em; }

.error p {
  color: red; }

.stages {
  display: none;
  height: 100%;
  width: 100%; }

hr {
  display: block;
  height: 0.1em;
  border: 0;
  border-top: 0.1em solid var(--start-font-color);
  margin: 1em 0;
  padding: 0; }

hr.small {
  width: 50%;
  display: block;
  margin: auto; }

#start.open {
  display: flex;
  align-items: center;
  justify-content: center; }

#start .fs-button {
  position: fixed;
  top: 5rem;
  left: 0; }

#start .gallery-button {
  position: fixed;
  top: 0;
  left: 0; }

#start .cups-button {
  position: absolute;
  left: 0;
  bottom: 0; }

#start .startInner {
  background: rgba(0, 0, 0, 0.5);
  color: var(--start-font-color);
  text-align: center;
  padding: 3rem; }
  #start .startInner .names {
    margin-top: 2rem;
    margin-bottom: 5rem; }
  #start .startInner .btn {
    margin-top: 3px;
    width: 80%; }
  @media (max-width: 1024px) {
    #start .startInner {
      padding: 1rem; }
      #start .startInner .names {
        margin-top: 1rem;
        margin-bottom: 2rem; }
      #start .startInner .btn {
        font-size: 0.8em;
        margin-top: 1px;
        width: 80%; }
      #start .startInner p,
      #start .startInner h1,
      #start .startInner h2,
      #start .startInner h3 {
        margin: 0;
        padding: 0 0.9em; }
      #start .startInner p {
        font-size: 0.8em; }
      #start .startInner h1 {
        font-size: 1.6em; }
      #start .startInner h2 {
        font-size: 1.2em; }
      #start .startInner h3 {
        font-size: 0.9em; } }
  @media (max-width: 800px) {
    #start .startInner .names {
      margin-left: 2.5rem;
      margin-right: 2.5rem; } }

.sliderImages {
  display: none;
  position: fixed;
  top: 0;
  z-index: 1000000;
  background: #000; }

.owl-carousel.owl-loaded {
  display: none; }

.overlay {
  display: none;
  background-color: #000;
  width: 400px;
  height: 200px;
  position: fixed;
  z-index: 1010;
  left: 50%;
  top: 50%;
  right: 0;
  bottom: 0; }

#gallery .controls a.close_opengal {
  display: none;
  right: 30px;
  top: 30px;
  position: fixed;
  z-index: 10000000;
  font-size: 3.125em;
  text-shadow: 0 2px 0 #000;
  color: #fff; }

#video--view {
  top: 0;
  left: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  object-fit: cover; }

#video--preview {
  top: 0;
  left: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  object-fit: cover; }

#ipcam--view {
  background-image: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: rotate(var(--preview-rotation)); }
  #ipcam--view.streaming {
    background-image: var(--background-ipcam); }

.flip-horizontal {
  transform: scaleX(-1);
  filter: FlipH; }

.chroma-control-bar {
  margin-top: 12px;
  text-align: center; }
  @media (max-width: 576px) {
    .chroma-control-bar span {
      display: none; } }

.triggerPic,
.triggerCollage,
.closeGallery {
  padding: 0;
  margin: 0;
  width: 1px;
  height: 1px; }

#useBuzzer {
  font-size: 2em;
  margin-top: 1em; }

@media (max-width: 767px) {
  .takePic {
    bottom: auto; } }
