img#portraitregler
{
  position: absolute;
  z-index: 200;
  width: 50vw;
  max-width: 300px;
  margin: 28vw 0 0 35vw;

  animation-name: pregler;
  animation-duration: 2s;
  opacity: 0;
}

@keyframes pregler
{
  0%   { opacity: 1; transform: scale(1); }
  4%   { transform: scale(1.1); }
  8%   { transform: scale(1); }
  12%   { transform: scale(0.9); }
  16%   { transform: scale(1); }
  20%   { transform: scale(1.1); }
  24%   { transform: scale(1); }
  28%   { transform: scale(0.9); }
  32%   { transform: scale(1); }
  36%   { transform: scale(1.1); }
  40%   { transform: scale(1); }
  44%   { transform: scale(0.9); }
  48%   { transform: scale(1); }
  52%   { transform: scale(1.1); }
  56%   { transform: scale(1); }
  60%   { transform: scale(0.9); }
  64%   { transform: scale(1); }
  68%   { transform: scale(1.1); }
  72%   { transform: scale(1); }
  76%   { transform: scale(0.9); }
  80%   { transform: scale(1); }
  84%   { transform: scale(1.1); }
  88%   { transform: scale(1); opacity: 1;}
  99% { opacity: 0 }
  100% { display: none; }
}

.personen
{
  display: none;
}

#personen0
{
  display: inline;
}

.drag-and-drop-area
{
    min-height: 200px;
    padding: 10px;
    border: 2px solid lightgray;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    overflow: auto;
}

#uploadfilestatus
{
  display: none;
}

#uploadfile.dragover
{
  background-color: #dddddd;
  border: #3b5878 3px dashed;
}

#uploadfile.dragover p
{
  margin-top: 80px;
}

#uploadfile.dragover .draghide
{
  display: none;
}

#file
{
  display: none;
}

#thumbnail img
{
  min-width: 5vw;
  min-height: 5vh;
  max-width: 80vw;
  max-height: 50vh;
  padding: 2px;
  border: 1px solid lightgray;
  border-radius: 3px;
}

.personenButtonDiv
{
  display: inline-block;
  width: calc((100% - 30px) / 3);
  margin: 0;
  padding: 0;
}

.personenButtonDiv > input
{
  width: 100%;
}

#uploaderror
{
  display: none;
  border: #cc0000 2px solid;
  border-radius: 5px;
  padding: 10px;
  color: #cc0000;
  background-color: #ffdddd;
}

#uploaderror p
{
  margin: 3px 0;
}


#personenButtonDiv1
{
  float: left
}

#personenButtonDiv3
{
  float: right
}

@media only screen and (min-width: 768px)
{
  img#portraitregler
  {
    margin: 12vw 0 0 20vw;
  }
}


@media only screen and (min-width: 1024px)
{
  img#portraitregler
  {
    margin: 180px 0 0 380px;
  }
}