#page-wrap { 
   z-index: 20; 
   /*width: 570px;*/ 
   width: 100%;
   min-height: 100vh;
   display: flex;
 /*  align-items: center;
   justify-content: center;*/
   /*margin: 20px auto; */
   /*background:#3299BB; */

   }

/*.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; }*/
/* start commented backslash hack \*/
/** html .group { height: 1%; }
.group { display: block; }*/
/* close commented backslash hack */

/*h1, h2 { font-weight: normal; margin: 30px 0 10px 0; }
p { margin: 0 0 10px 0; }
pre { overflow: auto; padding: 10px; background: #eee; margin: 0 0 10px 0; }

.top-demo div { background: #ccc; width: 80px; height: 80px; float: left; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; }
.top-demo div:nth-child(5n) { background: #FF9900; }
.top-demo div:nth-child(5n+1) { background: #424242; }
.top-demo div:nth-child(5n+2) { background: #E9E9E9; }
.top-demo div:nth-child(5n+3) { background: #BCBCBC; }
.top-demo div:nth-child(5n+4) { background: #3299BB; }*/

#sphere-area { height: 350px; position: relative; width: 100%; }
#sphere-area img { width: 300px; height: 300px; position: absolute; top:40%; left: 45%; }
#sphere-area #blue-ball { opacity: 0; }
#sphere-area #green-ball { opacity: 0; }
#sphere-area #orange-ball { opacity: 0; }

/*#unicorn { z-index: 60; position: absolute; top: 40px; left: 44%; width: 110px; display: block; }

#text-demo span { float: left; font: 30px bold Helvetica, Sans-Serif; }*/