@charset "UTF-8";




#picture-wrap {
  width:100%;
  margin:auto auto auto -3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  position:absolute;
}

#picture {
  display:block;
    max-width:100%;
    max-height:350px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

#previewPicture{
  display: none;
  width: 100%;
  margin-left:auto;
  height:350px;
}

#loader-wrap {
  margin-top:165px;
  margin-left:auto;
  width:100%;
  position: absolute;
}

.loader{
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 3px solid #666666;
  animation: animate 2s linear infinite;
  z-index: 10000;
  position: absolute;
}

.loader:before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #666666;
  animation:animateBg 2s linear infinite;
}

.loaderbackground{
  top: 0;
  position: relative;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.8);
  margin:auto;
}

@keyframes animate
{
  0%
  {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  25%
  {
    transform: translate(-50%,-50%) rotate(180deg);
  }
  50%
  {
    transform: translate(-50%,-50%) rotate(180deg);
  }
  75%
  {
    transform: translate(-50%,-50%) rotate(360deg);
  }
  100%
  {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes animateBg
{
  0%
  {
      height:0;
  }
  25%
  {
      height:0;
  }
  50%
  {
      height:100%;
  }
  75%
  {
      height:100%;
  }
  100%
  {
      height:0;
  }
}