html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background: rgb(0,48,98);
  background: linear-gradient(0deg, rgba(0,48,98,1) 0%, rgba(9,79,121,1) 35%, rgba(255,255,255,1) 100%);}
.centerFlex{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
#cube div {background-image:url("/goodwill.png");background-size:contain;background-repeat:no-repeat;background-position:center;}
#cube div.top{background-image:none;}

  
  .container {
    width: 200px;
    height: 200px;
    position: relative;
    /* -webkit-perspective: 1000px; */
    /* -moz-perspective: 1000px; */
    /* -webkit-animation: funny 30s infinite linear; */
  }
  
  #cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: rotatecube 10s infinite linear;
    
    -moz-transform-style: preserve-3d;
    -moz-animation: rotatecube 10s infinite linear;
  }
  
  #cube div {
    width: 200px;
    height: 200px;
    display: block;
    position: absolute;
    border: none;
    line-height: 200px;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
  }

  .trust {
    position:fixed;
    bottom:0;
    right:0;
    font-style: italic;
  }
  
  @-webkit-keyframes funny {
    0% {-webkit-perspective: 1000px;}
    20% {-webkit-perspective: 1000px;}
    35% {-webkit-perspective: 75px;}
    /* 50% {-webkit-perspective: 75px;} */
    65% {-webkit-perspective: 75px;}
    80% {-webkit-perspective: 1000px;}
    100%{-webkit-perspective: 1000px;}
  }

  /*@-webkit-keyframes rotatecube {
    0% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    25% { -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg); }
    50% { -webkit-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); }
    75% { -webkit-transform: rotateX(270deg) rotateY(0deg) rotateZ(0deg); }
    99.99% { -webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg); }
    100% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  }*/
  @-webkit-keyframes rotatecube {
    0% { -webkit-transform: rotateX(345deg) rotateY(0deg) rotateZ(0deg); }
    /*99.99% { -webkit-transform: rotateX(345deg) rotateY(359.99deg) rotateZ(0deg); }*/
    /* 100% { -webkit-transform: rotateX(345deg) rotateY(0deg) rotateZ(0deg); } */
    100% { -webkit-transform: rotateX(345deg) rotateY(-360deg) rotateZ(0deg); }
  }
  
  /*@-moz-keyframes rotatecube {
    0% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }
    25% { -moz-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }
    50% { -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
    75% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }
    100% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }
  }*/
  @-moz-keyframes rotatecube {
    0% { -moz-transform: rotateX(345deg) rotateY(0deg) rotateZ(0deg); }
    /*99.99% { -moz-transform: rotateX(345deg) rotateY(359.99deg) rotateZ(0deg); }*/
    /* 100% { -moz-transform: rotateX(345deg) rotateY(0deg) rotateZ(0deg); } */
    100% { -moz-transform: rotateX(345deg) rotateY(-360deg) rotateZ(0deg); }
  }

  #cube div {
    background-color:white;
    border: 2px solid black;
  }
  
  /*.front {
    background: rgba(255,0,0,.5);
  }
  
  .back {
    background: rgba(0,255,0,.5);
  }
  
  .right {
    background: rgba(0,0,255,.5);
  }
  
  .left {
    background: rgba(0,255,255,.5);
  }
  
  .top {
    background: rgba(255,0,255,.5);
  }
  
  .bottom {
    background: rgba(255,255,0,.5);
  }*/
  
  #cube .front  {
    -webkit-transform: rotateY(0deg ) translateZ( 100px );
    -moz-transform: rotateY( 0deg ) translateZ( 100px );
  }
  /*#cube .back {
    -webkit-transform: rotateX( 180deg ) translateZ( 100px );
    -moz-transform: rotateX( 180deg ) translateZ( 100px );
  }*/
  #cube .back {
    -webkit-transform: rotateX( 180deg ) rotateZ(180deg) translateZ( 100px );
    -moz-transform: rotateX( 180deg ) rotateZ(180deg) translateZ( 100px );
  }
  #cube .right  {
    -webkit-transform: rotateY(  90deg ) translateZ( 100px );
    -moz-transform: rotateY(  90deg ) translateZ( 100px );
  }
  #cube .left   {
    -webkit-transform: rotateY( -90deg ) translateZ( 100px );
    -moz-transform: rotateY( -90deg ) translateZ( 100px );
  }
  #cube .top    {
    -webkit-transform: rotateX(  90deg ) translateZ( 100px );
    -moz-transform: rotateX(  90deg ) translateZ( 100px );
  }
  #cube .bottom {
    -webkit-transform: rotateX( -90deg ) translateZ( 100px );
    -moz-transform: rotateX( -90deg ) translateZ( 100px );
  }