@import url('https://fonts.googleapis.com/css?family=Archivo:400,700&display=swap');

*{
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

#wpadminbar {
  position: fixed;
}

html{
  overflow-x: hidden;
}

a{
  color: inherit;
  text-decoration: none;
}

p a:hover{
  text-decoration: underline;
  cursor: pointer;
}

a img{
  border: none;
}

html,
body {
  font-size: 62.5%;
  /*height: 100%;*/
  padding: 0;
  margin: 0;
  font-family: 'Archivo', sans-serif;
}

body {
  max-width: 700px;
}

h1 {
  font-family: "Archivo", sans-serif;
  font-size: 2.5em;
  text-align: center;
}

button {
  cursor: pointer;
}

button.round-icon {
  width: 4em;
  height: 4em;
  border-radius: 100%;
  border: 0 none;
  background-color: #000;
  color: #fff;
  outline: transparent;
}

button.full-width {
  width: 100%;
  height: 3em;
  background-color: #000;
  border: 0 none;
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  outline: transparent;
}

@keyframes moveGradient {
0% {
  background-position: 0% 0%;
}
100% {
  background-position: -200% 0%;
}
}

#strap {
  position: fixed;
  width: 100%;
  height: 4px;
  top: 0;
  font-size: 0;
  background: repeating-linear-gradient(
  90deg,
  #E73E3F 0%,
  #E73E3F 8.33333333%,

  #F07C28 8.33333333%,
  #F07C28 16.66666666%,

  #F3CC29 16.66666666%,
  #F3CC29 25%,

  #6BB845 25%,
  #6BB845 33.33333333%,

  #0C7EC1 33.33333333%,
  #0C7EC1 41.66666666%,

  #752B90 41.66666666%,
  #752B90 50%,

  #E73E3F 50%,
  #E73E3F 58.33333333%,

  #F07C28 58.33333333%,
  #F07C28 66.66666666%,

  #F3CC29 66.66666666%,
  #F3CC29 75%,

  #6BB845 75%,
  #6BB845 83.33333333%,

  #0C7EC1 83.33333333%,
  #0C7EC1 91.66666666%,

  #752B90 91.66666666%,
  #752B90 100%
);
  background-size: 200%;
  /*animation: moveGradient 3s linear infinite;*/
  z-index: 999999;
}

#strap.move {
  animation: moveGradient 3s linear infinite;
}

#strap.middle {
  transform: translateY(25vh) scaleY(1.5);
  z-index: 999999;
  transition: transform 2s ease-in-out;
  transition-delay: 0.6s;
}

#strap.middle-start {
  transform: translateY(25vh) scaleY(1.5);
  animation: moveGradient 3s linear infinite;
  z-index: 999999;
}

#strap.loaded-start {
  transform: translateY(0) scaleY(1);
  z-index: 999999;
  transition: transform 2s ease-in-out;
  animation: moveGradient 3s linear;
  transition-delay: 0.5s;
}

/*
#strap-1 {
    display: inline-block;
    width: 100%;
    animation: moveRainbow 5s linear infinite;
}

#strap-2 {
    display: inline-block;
    width: 100%;
    animation: moveRainbow 5s linear infinite;
}

#strap .color {
    display: inline-block;
    width: 16.66666%;
    height: 6px;
    font-size: 0;
}

#strap #red.color {
    background-color: #E73E3F;
}

#strap #orange.color {
    background-color: #F07C28;
}

#strap #yellow.color {
    background-color: #F3CC29;
}

#strap #green.color {
    background-color: #6BB845;
}

#strap #blue.color {
    background-color: #0C7EC1;
}

#strap #violet.color {
    background-color: #752B90;
}
*/

main {
  width: calc(100% - 80px);
  height: calc(100vh - 80px);
  margin: 40px auto 40px auto;
  /*background-color: #efefef;*/
}

#logo-container {
  width: 138px;
  margin: 0 auto;
  padding: 20px 0;
}

#welcome-container {
  margin-top: 100px;
}

#tutorial-illustration {
  width: 100%;
  margin-bottom: 8em;
  text-align: center;
}

#tutorial-illustration img {
  width: 15em;
  margin: 0 auto;
}

#instructions-1 {
  width: 40em;
  margin: 0 auto 5em auto;
}

#instructions-1  h1 {
  font-size: 2.4em;
  font-weight: 500;
}

#no-camera-link {
  display: block;
  font-size: 2.5em;
  text-align: center;
  text-decoration: underline;
}

#open-camera-button-container {
  width: 100%;
  text-align: center;
}

button.round-icon img {
  height: 30px;
}

#about-link {
  position: absolute;
  width: 100%;
  bottom: calc(40px - 2em);
  font-family: 'Archivo', sans-serif;
  font-size: 2.5em;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

#loading-animation {
  display: none;
  height: 50px;
}

#loading-animation.show {
  display: block !important;
}


#camera {
  width: 500px;
  height: 600px;
}

#foto {
  width: 300px
  height: auto;
}

#camera-controls {
  width: calc(100vw - 80px);
  max-width: calc(100% - 80px);
  height: 100px;
  background-color: rgba(0, 0, 0, 0.2);
  bottom: 40px;
  position: absolute;
  z-index: 100;
}

#screenshot-button-container {
  width: 64px;
  height: 64px;
  margin: 18px auto 0 auto;
  border-radius: 100%;
  border: solid 2px #fff;
}

#screenshot-button {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 100%;
    border: solid 2px #ccc;
    outline: none;
    transition: transform 0.15s;
}

#screenshot-button:active {
  transform: scale(1.4);
  transition: transform 0.15s;
}

#screenshot-button:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}

#loading-photo-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 4px;
  left: 0;
  background-color: #fff;
  text-align: center;
  opacity: 0;
}

#loading-photo-overlay.show {
  opacity: 1;
  transition: opacity 1s ease-in;
  transition-delay: 0.3s;
  z-index: 999;
}

#loading-photo-overlay h1 {
  width: 100%;
  padding: 0 20%;
  margin: 0 auto;
  top: calc(50% - 4px - 2em);
  position: absolute;
}

#loading-page-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 4px;
  left: 0;
  background-color: #fff;
  opacity: 1;
  z-index: 99999;
}

#loading-page-overlay.show {
  opacity: 1;
  transition: opacity 1s ease-in;
  transition-delay: 0.3s;
  z-index: 99999;
}

#loading-page-overlay img {
  position: absolute;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: calc(50% - 100px);
}