/*
Theme Name: Iconic One Pro
Custom CSS Template for Iconic One Pro
*/
      body {
 height: 100%;
    background-image: url(https://www.kinderlokker.nl/logo.svg);
     background-position: center;
     background-size: 100px 100px;
    -o-background-size: 10% 10%;
    -webkit-background-size: 100px 100px;
  animation-name: kinderlokker;

  animation-duration: 140s;
   animation-iteration-count: infinite;
            font: 12px 'Lucida Grande', Arial, sans-serif;
        }
@keyframes kinderlokker {
  0%   {background-color:#de5307; background-size: 100px 100px;}
  25%  {background-color:#e8e8e8;rotate(-90deg);}
  50%  {background-color:#e8e8e8; background-size: 1000px 700px;rotate(0deg);}
  75%  {background-color:#e8e8e8;rotate(90deg);}
  100% {background-color:#de5307; background-size: 100px 100px;rotate(0deg);}
}

.site {
background: #fff;
animation: mymove 300s infinite;
}
@keyframes mymove {
0% {background-color:#fff;}
70% {background-color:#fff;}
95% {background-color:#de5307;}
100% {background-color:#000000;}
}
.progress {
 background: #222;
 width: 0;
 height: 88px;
 position: fixed;
 top: 0; /* top: 0; bottom: 0; */
 animation: grow linear forwards;
 animation-timeline: scroll();
}

@keyframes grow {
 to {
 width: 100%;
 }
}