#ibx {width:100vw;height:100vh;background-color:#FFFFFF}
#ibx div {position:relative;width:12vw;height:12vw;animation:move 10s ease-in-out 0s infinite}
#ibx div div {margin:auto;width:100%;height:100%;background-image:url(imgs/dice-1.png);background-size:100% 100%;animation:fold 10s ease-in-out 0s infinite}

@keyframes move {0%{left: 4vw;top:              4vw }
             16.67%{left:42vw;top:calc( 38vh -  6vw);transform:rotate( -90deg)}
             33.33%{left:84vw;top:              4vw ;transform:rotate(-180deg)}
                50%{left:84vw;top:calc(100vh - 16vw);transform:rotate(-270deg)}
             66.67%{left:42vw;top:calc( 62vh -  6vw);transform:rotate(-360deg)}
             83.33%{left: 4vw;top:calc(100vh - 16vw);transform:rotate(-450deg)}
               100%{left: 4vw;top:              4vw ;transform:rotate(-540deg)}
}

@keyframes fold {0%{width:100%;background-color:#FF4040}              /**/
              8.32%{           background-image:url(imgs/dice-1.png)} 
              8.33%{width:  0%;background-image:url(imgs/dice-2.png)} /**/
             16.67%{width:100%;background-color:#FFA040}              /**/
             24.99%{           background-image:url(imgs/dice-2.png)} 
                25%{width:  0%;background-image:url(imgs/dice-3.png)} /**/
             33.33%{width:100%;background-color:#FFFF00}              /**/
             41.66%{           background-image:url(imgs/dice-3.png)} 
             41.67%{width:  0%;background-image:url(imgs/dice-4.png)} /**/
                50%{width:100%;background-color:#00FF00}              /**/
             58.32%{           background-image:url(imgs/dice-4.png)} 
             58.33%{width:  0%;background-image:url(imgs/dice-3.png)} /**/
             66.67%{width:100%;background-color:#A0A0FF}              /**/
             74.99%{           background-image:url(imgs/dice-3.png)} 
                75%{width:  0%;background-image:url(imgs/dice-2.png)} /**/
             83.33%{width:100%;background-color:#D040FF}              /**/
             91.66%{           background-image:url(imgs/dice-2.png)} 
             91.67%{width:  0%;background-image:url(imgs/dice-1.png)} /**/
               100%{width:100%;background-color:#FF4040}              /**/
}

/* portrait screens */
@media only screen AND (orientation:portrait){
  #ibx div {width:12vh;height:12vh}
  @keyframes move {0%{left:              4vh ;top: 4vh}
               16.67%{left:calc( 38vw -  6vh);top:42vh;transform:rotate( 90deg)}
               33.33%{left:              4vh ;top:84vh;transform:rotate(180deg)}
                  50%{left:calc(100vw - 16vh);top:84vh;transform:rotate(270deg)}
               66.67%{left:calc( 62vw -  6vh);top:42vh;transform:rotate(360deg)}
               83.33%{left:calc(100vw - 16vh);top: 4vh;transform:rotate(450deg)}
                 100%{left:              4vh ;top: 4vh;transform:rotate(540deg)}
  }
}