<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet prefetch" href="https://preview.codepad.co/css/normalize.min.css">
<style>
body, html {
margin: 0;
padding: 0;
}
/* PEN STARTS */
.circle {
width: 40px;
margin: 0 auto;
margin-top: 200px;
animation: rotateround 10s linear infinite;
transition: transform 200ms linear;
transform-style: preserve-3d;
}
.face:nth-child(0) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-0 30s linear infinite;
}
</style>
</head>
<body itemscope="" itemtype="https://preview.codepad.co/redirect?url=http://schema.org/MediaObject">
<meta charset="utf-8">
<meta name="generator" content="Software RVG HTML Editor (www.software-rvg.com)">
<meta name="dcterms.created" content="ju., 21 ene. 2016 21:29:24 GMT">
<meta name="description" content="Software RVG advanced designs_Magic_ball">
<meta name="keywords" content="Software RVG,Advanced designs,magic ball rotating" css,svg,javascript="">
<title>SOFTWARE RVG Advanced Designs</title>
<style type="text/css">
<!--
body {
color:#E91414;
background-color:#111111;
background-image:url('Background Image');
background-repeat:no-repeat; width:1000px;
margin-left:auto;
margin-right:auto;
font-family: "Arial", sans-serif;
color:blue;
text-align:center;
font-size:30px;
}
} .header {
width:500px;
margin-left:auto;
margin-right:auto;
font-family: "Arial", sans-serif;
color:blue;
text-align:center;
font-size:30px;
}
.header h3 {
color:blue;
opacity:0.9;
}
.header h2{color:#40FF00}
header h5 {color:#00FFFF}
.header small {
color:red;
opacity:0.9;
font-size:20px;
}
/* PEN STARTS */
.circle {
width:40px;
margin:0 auto;
margin-top:200px;
animation: rotateround 10s linear infinite;
transition: transform 200ms linear;
transform-style: preserve-3d;
}
$panels: 10;
$rows: 20;
$h: 0;
$hStep: 360/($panels*$rows);
@for $r from 0 to $rows {
@for $i from 0 to $panels {
$x: $r * 360deg / $rows;
$y: $i * 180deg / $panels;
$count: $r*$panels + $i;
.face:nth-child(#{$count}) {
width:40px;
height:40px;
border: 1px solid black;
background:hsl($h, 50%, 70%);
opacity:0.9;
border-radius:50%;
position: absolute;
transform: rotateY($y) rotateX($x) translateZ(200px);
margin-top:0px;
animation:big-#{$count} 30s linear infinite;
}
@keyframes big-#{$count} {
0% {
transform: rotateY($y + 0deg) rotateX($x + 0deg) translateZ(200px);
}
50% {
transform: rotateY($y + 0deg) rotateX($x + 0deg) translateZ(200px);
}
100% {
transform: rotateY($y + 0deg) rotateX($x + 0deg) translateZ(200px);
}
}
$h: $h + $hStep;
}
}
@keyframes rotateround {
0% {
transform: rotateX(0deg) rotateY(20deg);
}
100% {
transform: rotateX(360deg) rotateY(380deg);
}
}
<head><script src="//assets.codepen.io/assets/editor/live/console_runner-ac6f22d6f99e61f8e835261f461f1027.js"></script>
<meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="canonical" href="https://preview.codepad.co/redirect?url=http://codepen.io/samirc/pen/yePNvJ">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet" type="text/css">
<style class="cp-pen-styles">.header {
width: 500px;
margin-left: auto;
margin-right: auto;
font-family: 'Montserrat', sans-serif;
color: blue;
text-align: center;
font-size: 30px;
}
.header h3 {
opacity: 0.9;
}
.header small {
opacity: 0.9;
font-size: 20px;
}
.header h4 {color:#00FFFF;
opacity: 0.9;
font-size: 20px;
}
.container {
width: 600px;
padding: 30px;
height: 430px;
box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.5);
margin-left: auto;
margin-right: auto;
}
.footer {
width: 900px;
height: 100px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.footer > h4 {
font-family: 'Montserrat', sans-serif;
color: red;
text-align: center;
font-size: 20px;
opacity: 0.9;
margin-left: auto;
margin-right: auto;
}
.img > a {
margin-top: -20px;
}
.footer .img {
width: 200px;
margin-left: auto;
margin-right: auto;
}
.img > a > img {
width: 50px;
display: inline;
}
.img > h4 {
font-family: 'Montserrat', sans-serif;
color: blue;
text-align: center;
font-size: 15px;
opacity: 0.9;
margin-left: auto;
display: inline;
margin-right: auto;
margin-top: -10px;
}
/* PEN STARTS */
.circle {
width: 40px;
margin: 0 auto;
margin-top: 200px;
animation: rotateround 10s linear infinite;
transition: transform 200ms linear;
transform-style: preserve-3d;
}
.face:nth-child(0) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-0 30s linear infinite;
}
@keyframes big-0 {
0% {
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(1) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98f8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-1 30s linear infinite;
}
@keyframes big-1 {
0% {
transform: rotateY(18deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(2) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9918c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-2 30s linear infinite;
}
@keyframes big-2 {
0% {
transform: rotateY(36deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(3) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9938c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-3 30s linear infinite;
}
@keyframes big-3 {
0% {
transform: rotateY(54deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(4) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9958c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-4 30s linear infinite;
}
@keyframes big-4 {
0% {
transform: rotateY(72deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(5) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9988c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-5 30s linear infinite;
}
@keyframes big-5 {
0% {
transform: rotateY(90deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(6) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d99a8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-6 30s linear infinite;
}
@keyframes big-6 {
0% {
transform: rotateY(108deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(7) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d99c8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-7 30s linear infinite;
}
@keyframes big-7 {
0% {
transform: rotateY(126deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(8) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d99f8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-8 30s linear infinite;
}
@keyframes big-8 {
0% {
transform: rotateY(144deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(9) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9a18c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(0deg) translateZ(200px);
margin-top: 0px;
animation: big-9 30s linear infinite;
}
@keyframes big-9 {
0% {
transform: rotateY(162deg) rotateX(0deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(0deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(0deg) translateZ(200px);
}
}
.face:nth-child(10) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9a38c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-10 30s linear infinite;
}
@keyframes big-10 {
0% {
transform: rotateY(0deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(11) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9a58c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-11 30s linear infinite;
}
@keyframes big-11 {
0% {
transform: rotateY(18deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(12) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9a88c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-12 30s linear infinite;
}
@keyframes big-12 {
0% {
transform: rotateY(36deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(13) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9aa8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-13 30s linear infinite;
}
@keyframes big-13 {
0% {
transform: rotateY(54deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(14) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9ac8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-14 30s linear infinite;
}
@keyframes big-14 {
0% {
transform: rotateY(72deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(15) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9af8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-15 30s linear infinite;
}
@keyframes big-15 {
0% {
transform: rotateY(90deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(16) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9b18c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-16 30s linear infinite;
}
@keyframes big-16 {
0% {
transform: rotateY(108deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(17) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9b38c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-17 30s linear infinite;
}
@keyframes big-17 {
0% {
transform: rotateY(126deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(18) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9b68c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-18 30s linear infinite;
}
@keyframes big-18 {
0% {
transform: rotateY(144deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(19) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9b88c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(18deg) translateZ(200px);
margin-top: 0px;
animation: big-19 30s linear infinite;
}
@keyframes big-19 {
0% {
transform: rotateY(162deg) rotateX(18deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(18deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(18deg) translateZ(200px);
}
}
.face:nth-child(20) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9ba8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-20 30s linear infinite;
}
@keyframes big-20 {
0% {
transform: rotateY(0deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(21) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9bc8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-21 30s linear infinite;
}
@keyframes big-21 {
0% {
transform: rotateY(18deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(22) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9bf8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-22 30s linear infinite;
}
@keyframes big-22 {
0% {
transform: rotateY(36deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(23) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9c18c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-23 30s linear infinite;
}
@keyframes big-23 {
0% {
transform: rotateY(54deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(24) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9c38c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-24 30s linear infinite;
}
@keyframes big-24 {
0% {
transform: rotateY(72deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(25) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9c68c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-25 30s linear infinite;
}
@keyframes big-25 {
0% {
transform: rotateY(90deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(26) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9c88c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-26 30s linear infinite;
}
@keyframes big-26 {
0% {
transform: rotateY(108deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(27) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9ca8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-27 30s linear infinite;
}
@keyframes big-27 {
0% {
transform: rotateY(126deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(28) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9cd8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-28 30s linear infinite;
}
@keyframes big-28 {
0% {
transform: rotateY(144deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(29) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9cf8c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(36deg) translateZ(200px);
margin-top: 0px;
animation: big-29 30s linear infinite;
}
@keyframes big-29 {
0% {
transform: rotateY(162deg) rotateX(36deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(36deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(36deg) translateZ(200px);
}
}
.face:nth-child(30) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9d18c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-30 30s linear infinite;
}
@keyframes big-30 {
0% {
transform: rotateY(0deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(31) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9d38c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-31 30s linear infinite;
}
@keyframes big-31 {
0% {
transform: rotateY(18deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(32) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9d68c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-32 30s linear infinite;
}
@keyframes big-32 {
0% {
transform: rotateY(36deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(33) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d9d88c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-33 30s linear infinite;
}
@keyframes big-33 {
0% {
transform: rotateY(54deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(34) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d7d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-34 30s linear infinite;
}
@keyframes big-34 {
0% {
transform: rotateY(72deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(35) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d5d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-35 30s linear infinite;
}
@keyframes big-35 {
0% {
transform: rotateY(90deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(36) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d3d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-36 30s linear infinite;
}
@keyframes big-36 {
0% {
transform: rotateY(108deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(37) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d0d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-37 30s linear infinite;
}
@keyframes big-37 {
0% {
transform: rotateY(126deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(38) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #ced98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-38 30s linear infinite;
}
@keyframes big-38 {
0% {
transform: rotateY(144deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(39) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #ccd98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(54deg) translateZ(200px);
margin-top: 0px;
animation: big-39 30s linear infinite;
}
@keyframes big-39 {
0% {
transform: rotateY(162deg) rotateX(54deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(54deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(54deg) translateZ(200px);
}
}
.face:nth-child(40) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c9d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-40 30s linear infinite;
}
@keyframes big-40 {
0% {
transform: rotateY(0deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(41) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c7d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-41 30s linear infinite;
}
@keyframes big-41 {
0% {
transform: rotateY(18deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(42) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c5d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-42 30s linear infinite;
}
@keyframes big-42 {
0% {
transform: rotateY(36deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(43) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c3d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-43 30s linear infinite;
}
@keyframes big-43 {
0% {
transform: rotateY(54deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(44) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c0d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-44 30s linear infinite;
}
@keyframes big-44 {
0% {
transform: rotateY(72deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(45) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #bed98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-45 30s linear infinite;
}
@keyframes big-45 {
0% {
transform: rotateY(90deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(46) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #bcd98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-46 30s linear infinite;
}
@keyframes big-46 {
0% {
transform: rotateY(108deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(47) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b9d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-47 30s linear infinite;
}
@keyframes big-47 {
0% {
transform: rotateY(126deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(48) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b7d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-48 30s linear infinite;
}
@keyframes big-48 {
0% {
transform: rotateY(144deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(49) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b5d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(72deg) translateZ(200px);
margin-top: 0px;
animation: big-49 30s linear infinite;
}
@keyframes big-49 {
0% {
transform: rotateY(162deg) rotateX(72deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(72deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(72deg) translateZ(200px);
}
}
.face:nth-child(50) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b3d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-50 30s linear infinite;
}
@keyframes big-50 {
0% {
transform: rotateY(0deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(51) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b0d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-51 30s linear infinite;
}
@keyframes big-51 {
0% {
transform: rotateY(18deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(52) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #aed98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-52 30s linear infinite;
}
@keyframes big-52 {
0% {
transform: rotateY(36deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(53) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #acd98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-53 30s linear infinite;
}
@keyframes big-53 {
0% {
transform: rotateY(54deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(54) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a9d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-54 30s linear infinite;
}
@keyframes big-54 {
0% {
transform: rotateY(72deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(55) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a7d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-55 30s linear infinite;
}
@keyframes big-55 {
0% {
transform: rotateY(90deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(56) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a5d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-56 30s linear infinite;
}
@keyframes big-56 {
0% {
transform: rotateY(108deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(57) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a2d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-57 30s linear infinite;
}
@keyframes big-57 {
0% {
transform: rotateY(126deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(58) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a0d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-58 30s linear infinite;
}
@keyframes big-58 {
0% {
transform: rotateY(144deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(59) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #9ed98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(90deg) translateZ(200px);
margin-top: 0px;
animation: big-59 30s linear infinite;
}
@keyframes big-59 {
0% {
transform: rotateY(162deg) rotateX(90deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(90deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(90deg) translateZ(200px);
}
}
.face:nth-child(60) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #9cd98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-60 30s linear infinite;
}
@keyframes big-60 {
0% {
transform: rotateY(0deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(61) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #99d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-61 30s linear infinite;
}
@keyframes big-61 {
0% {
transform: rotateY(18deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(62) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #97d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-62 30s linear infinite;
}
@keyframes big-62 {
0% {
transform: rotateY(36deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(63) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #95d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-63 30s linear infinite;
}
@keyframes big-63 {
0% {
transform: rotateY(54deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(64) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #92d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-64 30s linear infinite;
}
@keyframes big-64 {
0% {
transform: rotateY(72deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(65) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #90d98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-65 30s linear infinite;
}
@keyframes big-65 {
0% {
transform: rotateY(90deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(66) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ed98c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-66 30s linear infinite;
}
@keyframes big-66 {
0% {
transform: rotateY(108deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(67) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd98d;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-67 30s linear infinite;
}
@keyframes big-67 {
0% {
transform: rotateY(126deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(68) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd98f;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-68 30s linear infinite;
}
@keyframes big-68 {
0% {
transform: rotateY(144deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(69) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd992;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(108deg) translateZ(200px);
margin-top: 0px;
animation: big-69 30s linear infinite;
}
@keyframes big-69 {
0% {
transform: rotateY(162deg) rotateX(108deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(108deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(108deg) translateZ(200px);
}
}
.face:nth-child(70) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd994;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-70 30s linear infinite;
}
@keyframes big-70 {
0% {
transform: rotateY(0deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(71) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd996;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-71 30s linear infinite;
}
@keyframes big-71 {
0% {
transform: rotateY(18deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(72) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd998;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-72 30s linear infinite;
}
@keyframes big-72 {
0% {
transform: rotateY(36deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(73) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd99b;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-73 30s linear infinite;
}
@keyframes big-73 {
0% {
transform: rotateY(54deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(74) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd99d;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-74 30s linear infinite;
}
@keyframes big-74 {
0% {
transform: rotateY(72deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(75) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd99f;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-75 30s linear infinite;
}
@keyframes big-75 {
0% {
transform: rotateY(90deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(76) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9a2;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-76 30s linear infinite;
}
@keyframes big-76 {
0% {
transform: rotateY(108deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(77) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9a4;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-77 30s linear infinite;
}
@keyframes big-77 {
0% {
transform: rotateY(126deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(78) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9a6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-78 30s linear infinite;
}
@keyframes big-78 {
0% {
transform: rotateY(144deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(79) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9a9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(126deg) translateZ(200px);
margin-top: 0px;
animation: big-79 30s linear infinite;
}
@keyframes big-79 {
0% {
transform: rotateY(162deg) rotateX(126deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(126deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(126deg) translateZ(200px);
}
}
.face:nth-child(80) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9ab;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-80 30s linear infinite;
}
@keyframes big-80 {
0% {
transform: rotateY(0deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(81) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9ad;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-81 30s linear infinite;
}
@keyframes big-81 {
0% {
transform: rotateY(18deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(82) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9af;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-82 30s linear infinite;
}
@keyframes big-82 {
0% {
transform: rotateY(36deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(83) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9b2;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-83 30s linear infinite;
}
@keyframes big-83 {
0% {
transform: rotateY(54deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(84) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9b4;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-84 30s linear infinite;
}
@keyframes big-84 {
0% {
transform: rotateY(72deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(85) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9b6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-85 30s linear infinite;
}
@keyframes big-85 {
0% {
transform: rotateY(90deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(86) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9b9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-86 30s linear infinite;
}
@keyframes big-86 {
0% {
transform: rotateY(108deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(87) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9bb;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-87 30s linear infinite;
}
@keyframes big-87 {
0% {
transform: rotateY(126deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(88) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9bd;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-88 30s linear infinite;
}
@keyframes big-88 {
0% {
transform: rotateY(144deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(89) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c0;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(144deg) translateZ(200px);
margin-top: 0px;
animation: big-89 30s linear infinite;
}
@keyframes big-89 {
0% {
transform: rotateY(162deg) rotateX(144deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(144deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(144deg) translateZ(200px);
}
}
.face:nth-child(90) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c2;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-90 30s linear infinite;
}
@keyframes big-90 {
0% {
transform: rotateY(0deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(91) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c4;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-91 30s linear infinite;
}
@keyframes big-91 {
0% {
transform: rotateY(18deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(92) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-92 30s linear infinite;
}
@keyframes big-92 {
0% {
transform: rotateY(36deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(93) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9c9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-93 30s linear infinite;
}
@keyframes big-93 {
0% {
transform: rotateY(54deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(94) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9cb;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-94 30s linear infinite;
}
@keyframes big-94 {
0% {
transform: rotateY(72deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(95) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9cd;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-95 30s linear infinite;
}
@keyframes big-95 {
0% {
transform: rotateY(90deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(96) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d0;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-96 30s linear infinite;
}
@keyframes big-96 {
0% {
transform: rotateY(108deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(97) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d2;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-97 30s linear infinite;
}
@keyframes big-97 {
0% {
transform: rotateY(126deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(98) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d4;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-98 30s linear infinite;
}
@keyframes big-98 {
0% {
transform: rotateY(144deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(99) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(162deg) translateZ(200px);
margin-top: 0px;
animation: big-99 30s linear infinite;
}
@keyframes big-99 {
0% {
transform: rotateY(162deg) rotateX(162deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(162deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(162deg) translateZ(200px);
}
}
.face:nth-child(100) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd9d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-100 30s linear infinite;
}
@keyframes big-100 {
0% {
transform: rotateY(0deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(101) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd6d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-101 30s linear infinite;
}
@keyframes big-101 {
0% {
transform: rotateY(18deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(102) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd4d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-102 30s linear infinite;
}
@keyframes big-102 {
0% {
transform: rotateY(36deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(103) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd2d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-103 30s linear infinite;
}
@keyframes big-103 {
0% {
transform: rotateY(54deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(104) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cd0d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-104 30s linear infinite;
}
@keyframes big-104 {
0% {
transform: rotateY(72deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(105) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ccdd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-105 30s linear infinite;
}
@keyframes big-105 {
0% {
transform: rotateY(90deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(106) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ccbd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-106 30s linear infinite;
}
@keyframes big-106 {
0% {
transform: rotateY(108deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(107) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cc9d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-107 30s linear infinite;
}
@keyframes big-107 {
0% {
transform: rotateY(126deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(108) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cc6d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-108 30s linear infinite;
}
@keyframes big-108 {
0% {
transform: rotateY(144deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(109) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cc4d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(180deg) translateZ(200px);
margin-top: 0px;
animation: big-109 30s linear infinite;
}
@keyframes big-109 {
0% {
transform: rotateY(162deg) rotateX(180deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(180deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(180deg) translateZ(200px);
}
}
.face:nth-child(110) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cc2d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-110 30s linear infinite;
}
@keyframes big-110 {
0% {
transform: rotateY(0deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(111) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cc0d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-111 30s linear infinite;
}
@keyframes big-111 {
0% {
transform: rotateY(18deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(112) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cbdd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-112 30s linear infinite;
}
@keyframes big-112 {
0% {
transform: rotateY(36deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(113) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cbbd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-113 30s linear infinite;
}
@keyframes big-113 {
0% {
transform: rotateY(54deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(114) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cb9d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-114 30s linear infinite;
}
@keyframes big-114 {
0% {
transform: rotateY(72deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(115) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cb6d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-115 30s linear infinite;
}
@keyframes big-115 {
0% {
transform: rotateY(90deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(116) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cb4d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-116 30s linear infinite;
}
@keyframes big-116 {
0% {
transform: rotateY(108deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(117) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cb2d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-117 30s linear infinite;
}
@keyframes big-117 {
0% {
transform: rotateY(126deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(118) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cafd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-118 30s linear infinite;
}
@keyframes big-118 {
0% {
transform: rotateY(144deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(119) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cadd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(198deg) translateZ(200px);
margin-top: 0px;
animation: big-119 30s linear infinite;
}
@keyframes big-119 {
0% {
transform: rotateY(162deg) rotateX(198deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(198deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(198deg) translateZ(200px);
}
}
.face:nth-child(120) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8cabd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-120 30s linear infinite;
}
@keyframes big-120 {
0% {
transform: rotateY(0deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(121) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ca9d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-121 30s linear infinite;
}
@keyframes big-121 {
0% {
transform: rotateY(18deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(122) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ca6d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-122 30s linear infinite;
}
@keyframes big-122 {
0% {
transform: rotateY(36deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(123) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ca4d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-123 30s linear infinite;
}
@keyframes big-123 {
0% {
transform: rotateY(54deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(124) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8ca2d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-124 30s linear infinite;
}
@keyframes big-124 {
0% {
transform: rotateY(72deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(125) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c9fd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-125 30s linear infinite;
}
@keyframes big-125 {
0% {
transform: rotateY(90deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(126) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c9dd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-126 30s linear infinite;
}
@keyframes big-126 {
0% {
transform: rotateY(108deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(127) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c9bd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-127 30s linear infinite;
}
@keyframes big-127 {
0% {
transform: rotateY(126deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(128) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c98d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-128 30s linear infinite;
}
@keyframes big-128 {
0% {
transform: rotateY(144deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(129) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c96d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(216deg) translateZ(200px);
margin-top: 0px;
animation: big-129 30s linear infinite;
}
@keyframes big-129 {
0% {
transform: rotateY(162deg) rotateX(216deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(216deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(216deg) translateZ(200px);
}
}
.face:nth-child(130) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c94d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-130 30s linear infinite;
}
@keyframes big-130 {
0% {
transform: rotateY(0deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(131) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c92d9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-131 30s linear infinite;
}
@keyframes big-131 {
0% {
transform: rotateY(18deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(132) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c8fd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-132 30s linear infinite;
}
@keyframes big-132 {
0% {
transform: rotateY(36deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(133) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8c8dd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-133 30s linear infinite;
}
@keyframes big-133 {
0% {
transform: rotateY(54deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(134) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #8e8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-134 30s linear infinite;
}
@keyframes big-134 {
0% {
transform: rotateY(72deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(135) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #908cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-135 30s linear infinite;
}
@keyframes big-135 {
0% {
transform: rotateY(90deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(136) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #928cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-136 30s linear infinite;
}
@keyframes big-136 {
0% {
transform: rotateY(108deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(137) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #958cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-137 30s linear infinite;
}
@keyframes big-137 {
0% {
transform: rotateY(126deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(138) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #978cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-138 30s linear infinite;
}
@keyframes big-138 {
0% {
transform: rotateY(144deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(139) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #998cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(234deg) translateZ(200px);
margin-top: 0px;
animation: big-139 30s linear infinite;
}
@keyframes big-139 {
0% {
transform: rotateY(162deg) rotateX(234deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(234deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(234deg) translateZ(200px);
}
}
.face:nth-child(140) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #9c8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-140 30s linear infinite;
}
@keyframes big-140 {
0% {
transform: rotateY(0deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(141) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #9e8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-141 30s linear infinite;
}
@keyframes big-141 {
0% {
transform: rotateY(18deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(142) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a08cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-142 30s linear infinite;
}
@keyframes big-142 {
0% {
transform: rotateY(36deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(143) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a28cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-143 30s linear infinite;
}
@keyframes big-143 {
0% {
transform: rotateY(54deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(144) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a58cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-144 30s linear infinite;
}
@keyframes big-144 {
0% {
transform: rotateY(72deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(145) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a78cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-145 30s linear infinite;
}
@keyframes big-145 {
0% {
transform: rotateY(90deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(146) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #a98cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-146 30s linear infinite;
}
@keyframes big-146 {
0% {
transform: rotateY(108deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(147) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #ac8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-147 30s linear infinite;
}
@keyframes big-147 {
0% {
transform: rotateY(126deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(148) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #ae8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-148 30s linear infinite;
}
@keyframes big-148 {
0% {
transform: rotateY(144deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(149) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b08cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(252deg) translateZ(200px);
margin-top: 0px;
animation: big-149 30s linear infinite;
}
@keyframes big-149 {
0% {
transform: rotateY(162deg) rotateX(252deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(252deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(252deg) translateZ(200px);
}
}
.face:nth-child(150) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b38cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-150 30s linear infinite;
}
@keyframes big-150 {
0% {
transform: rotateY(0deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(151) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b58cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-151 30s linear infinite;
}
@keyframes big-151 {
0% {
transform: rotateY(18deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(152) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b78cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-152 30s linear infinite;
}
@keyframes big-152 {
0% {
transform: rotateY(36deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(153) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #b98cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-153 30s linear infinite;
}
@keyframes big-153 {
0% {
transform: rotateY(54deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(154) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #bc8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-154 30s linear infinite;
}
@keyframes big-154 {
0% {
transform: rotateY(72deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(155) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #be8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-155 30s linear infinite;
}
@keyframes big-155 {
0% {
transform: rotateY(90deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(156) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c08cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-156 30s linear infinite;
}
@keyframes big-156 {
0% {
transform: rotateY(108deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(157) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c38cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-157 30s linear infinite;
}
@keyframes big-157 {
0% {
transform: rotateY(126deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(158) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c58cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-158 30s linear infinite;
}
@keyframes big-158 {
0% {
transform: rotateY(144deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(159) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c78cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(270deg) translateZ(200px);
margin-top: 0px;
animation: big-159 30s linear infinite;
}
@keyframes big-159 {
0% {
transform: rotateY(162deg) rotateX(270deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(270deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(270deg) translateZ(200px);
}
}
.face:nth-child(160) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #c98cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-160 30s linear infinite;
}
@keyframes big-160 {
0% {
transform: rotateY(0deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(161) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #cc8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-161 30s linear infinite;
}
@keyframes big-161 {
0% {
transform: rotateY(18deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(162) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #ce8cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-162 30s linear infinite;
}
@keyframes big-162 {
0% {
transform: rotateY(36deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(163) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d08cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-163 30s linear infinite;
}
@keyframes big-163 {
0% {
transform: rotateY(54deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(164) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d38cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-164 30s linear infinite;
}
@keyframes big-164 {
0% {
transform: rotateY(72deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(165) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d58cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-165 30s linear infinite;
}
@keyframes big-165 {
0% {
transform: rotateY(90deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(166) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d78cd9;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-166 30s linear infinite;
}
@keyframes big-166 {
0% {
transform: rotateY(108deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(167) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cd8;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-167 30s linear infinite;
}
@keyframes big-167 {
0% {
transform: rotateY(126deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(168) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cd6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-168 30s linear infinite;
}
@keyframes big-168 {
0% {
transform: rotateY(144deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(169) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cd3;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(288deg) translateZ(200px);
margin-top: 0px;
animation: big-169 30s linear infinite;
}
@keyframes big-169 {
0% {
transform: rotateY(162deg) rotateX(288deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(288deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(288deg) translateZ(200px);
}
}
.face:nth-child(170) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cd1;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-170 30s linear infinite;
}
@keyframes big-170 {
0% {
transform: rotateY(0deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(171) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98ccf;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-171 30s linear infinite;
}
@keyframes big-171 {
0% {
transform: rotateY(18deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(172) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98ccd;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-172 30s linear infinite;
}
@keyframes big-172 {
0% {
transform: rotateY(36deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(173) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cca;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-173 30s linear infinite;
}
@keyframes big-173 {
0% {
transform: rotateY(54deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(174) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cc8;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-174 30s linear infinite;
}
@keyframes big-174 {
0% {
transform: rotateY(72deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(175) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cc6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-175 30s linear infinite;
}
@keyframes big-175 {
0% {
transform: rotateY(90deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(176) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cc3;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-176 30s linear infinite;
}
@keyframes big-176 {
0% {
transform: rotateY(108deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(177) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cc1;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-177 30s linear infinite;
}
@keyframes big-177 {
0% {
transform: rotateY(126deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(178) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cbf;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-178 30s linear infinite;
}
@keyframes big-178 {
0% {
transform: rotateY(144deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(179) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cbc;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(306deg) translateZ(200px);
margin-top: 0px;
animation: big-179 30s linear infinite;
}
@keyframes big-179 {
0% {
transform: rotateY(162deg) rotateX(306deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(306deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(306deg) translateZ(200px);
}
}
.face:nth-child(180) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cba;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-180 30s linear infinite;
}
@keyframes big-180 {
0% {
transform: rotateY(0deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(181) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cb8;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-181 30s linear infinite;
}
@keyframes big-181 {
0% {
transform: rotateY(18deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(182) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cb6;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-182 30s linear infinite;
}
@keyframes big-182 {
0% {
transform: rotateY(36deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(183) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cb3;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-183 30s linear infinite;
}
@keyframes big-183 {
0% {
transform: rotateY(54deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(184) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cb1;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-184 30s linear infinite;
}
@keyframes big-184 {
0% {
transform: rotateY(72deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(185) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98caf;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-185 30s linear infinite;
}
@keyframes big-185 {
0% {
transform: rotateY(90deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(186) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98cac;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-186 30s linear infinite;
}
@keyframes big-186 {
0% {
transform: rotateY(108deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(187) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98caa;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-187 30s linear infinite;
}
@keyframes big-187 {
0% {
transform: rotateY(126deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(188) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98ca8;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-188 30s linear infinite;
}
@keyframes big-188 {
0% {
transform: rotateY(144deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(189) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98ca5;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(324deg) translateZ(200px);
margin-top: 0px;
animation: big-189 30s linear infinite;
}
@keyframes big-189 {
0% {
transform: rotateY(162deg) rotateX(324deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(324deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(324deg) translateZ(200px);
}
}
.face:nth-child(190) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98ca3;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(0deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-190 30s linear infinite;
}
@keyframes big-190 {
0% {
transform: rotateY(0deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(0deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(0deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(191) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98ca1;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(18deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-191 30s linear infinite;
}
@keyframes big-191 {
0% {
transform: rotateY(18deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(18deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(18deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(192) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c9f;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(36deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-192 30s linear infinite;
}
@keyframes big-192 {
0% {
transform: rotateY(36deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(36deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(36deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(193) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c9c;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(54deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-193 30s linear infinite;
}
@keyframes big-193 {
0% {
transform: rotateY(54deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(54deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(54deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(194) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c9a;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(72deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-194 30s linear infinite;
}
@keyframes big-194 {
0% {
transform: rotateY(72deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(72deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(72deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(195) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c98;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(90deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-195 30s linear infinite;
}
@keyframes big-195 {
0% {
transform: rotateY(90deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(90deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(90deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(196) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c95;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(108deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-196 30s linear infinite;
}
@keyframes big-196 {
0% {
transform: rotateY(108deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(108deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(108deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(197) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c93;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(126deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-197 30s linear infinite;
}
@keyframes big-197 {
0% {
transform: rotateY(126deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(126deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(126deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(198) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c91;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(144deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-198 30s linear infinite;
}
@keyframes big-198 {
0% {
transform: rotateY(144deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(144deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(144deg) rotateX(342deg) translateZ(200px);
}
}
.face:nth-child(199) {
width: 40px;
height: 40px;
border: 0px solid black;
background: #d98c8f;
opacity: 0.6;
border-radius: 50%;
position: absolute;
transform: rotateY(162deg) rotateX(342deg) translateZ(200px);
margin-top: 0px;
animation: big-199 30s linear infinite;
}
@keyframes big-199 {
0% {
transform: rotateY(162deg) rotateX(342deg) translateZ(200px);
}
50% {
transform: rotateY(162deg) rotateX(342deg) translateZ(200px);
}
100% {
transform: rotateY(162deg) rotateX(342deg) translateZ(200px);
}
}
@keyframes rotateround {
0% {
transform: rotateX(0deg) rotateY(20deg);
}
100% {
transform: rotateX(360deg) rotateY(380deg);
}
}
</style>
<!--
body {
color:#000000;
background-color:#FF00FF;
background-image:url('Background Image');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
<!--[if IE]>
<script src="https://preview.codepad.co/redirect?url=http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div class="header">
<h3><strong>MAGIC BALL ROTATING </strong> <small>by SOFTWARE RVG</small></h3>
<h2>mozilla css developers </h2><h4>" constantly evolving "</h4>
</div>
<div class="container">
<div class="circle">
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
</div>
</div>
<div class="footer">
<div class="byline">
<img src="https://3.bp.blogspot.com/-SSIfWR01A4w/Vs9bJ91mJhI/AAAAAAAAB9I/qEnEqQWJRig/s320/SOFTWARE%2BRVG-Icon%2Bapp.jpg" border="0" height="155" width="160">
</div>
</div>
<script src="//codepen.io/assets/editor/live/css_live_reload_init.js"></script>
<script type="text/javascript">
(function(){var $c=function(a){this.w=a||[]};$c.prototype.set=function(a){this.w[a]=!0};$c.prototype.encode=function(){for(var a=[],b=0;b<this.w.length;b++)this.w[b]&&(a[Math.floor(b/6)]^=1<<b%6);for(b=0;b<a.length;b++)a[b]="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_".charAt(a[b]||0);return a.join("")+"~"};var vd=new $c;function J(a){vd.set(a)}var Nd=function(a,b){var c=new $c(Dd(a));c.set(b);a.set(Gd,c.w)},Td=function(a){a=Dd(a);a=new $c(a);for(var b=vd.w.slice(),c=0;c<a.w.length;c++)b[c]=b[c]||a.w[c];return(new $c(b)).encode()},Dd=function(a){a=a.get(Gd);ka(a)||(a=[]);return a};var ea=function(a){return"function"==typeof a},ka=function(a){return"[object Array]"==Object.prototype.toString.call(Object(a))},qa=function(a){return void 0!=a&&-1<(a.constructor+"").indexOf("String")},D=function(a,b){return 0==a.indexOf(b)},sa=function(a){return a?a.replace(/^[\s\xa0]+|[\s\xa0]+$/g,""):""},ta=function(a){var b=M.createElement("img");b.width=1;b.height=1;b.src=a;return b},ua=function(){},K=function(a){if(encodeURIComponent instanceof Function)return encodeURIComponent(a);J(28);return a},
L=function(a,b,c,d){try{a.addEventListener?a.addEventListener(b,c,!!d):a.attachEvent&&a.attachEvent("on"+b,c)}catch(e){J(27)}},wa=function(a,b){if(a){var c=M.createElement("script");c.type="text/javascript";c.async=!0;c.src=a;b&&(c.id=b);var d=M.getElementsByTagName("script")[0];d.parentNode.insertBefore(c,d)}},Ud=function(){return"https:"==M.location.protocol},xa=function(){var a=""+M.location.hostname;return 0==a.indexOf("www.")?a.substring(4):a},ya=function(a){var b=M.referrer;if(/^https?:\/\//i.test(b)){if(a)return b;
a="//"+M.location.hostname;var c=b.indexOf(a);if(5==c||6==c)if(a=b.charAt(c+a.length),"/"==a||"?"==a||""==a||":"==a)return;return b}},za=function(a,b){if(1==b.length&&null!=b[0]&&"object"===typeof b[0])return b[0];for(var c={},d=Math.min(a.length+1,b.length),e=0;e<d;e++)if("object"===typeof b[e]){for(var g in b[e])b[e].hasOwnProperty(g)&&(c[g]=b[e][g]);break}else e<a.length&&(c[a[e]]=b[e]);return c};var ee=function(){this.keys=[];this.values={};this.m={}};ee.prototype.set=function(a,b,c){this.keys.push(a);c?this.m[":"+a]=b:this.values[":"+a]=b};ee.prototype.get=function(a){return this.m.hasOwnProperty(":"+a)?this.m[":"+a]:this.values[":"+a]};ee.prototype.map=function(a){for(var b=0;b<this.keys.length;b++){var c=this.keys[b],d=this.get(c);d&&a(c,d)}};var O=window,M=document;var Aa=function(a){var b=O._gaUserPrefs;if(b&&b.ioo&&b.ioo()||a&&!0===O["ga-disable-"+a])return!0;try{var c=O.external;if(c&&c._gaUserPrefs&&"oo"==c._gaUserPrefs)return!0}catch(d){}return!1};var Ca=function(a){var b=[],c=M.cookie.split(";");a=new RegExp("^\\s*"+a+"=\\s*(.*?)\\s*$");for(var d=0;d<c.length;d++){var e=c[d].match(a);e&&b.push(e[1])}return b},zc=function(a,b,c,d,e,g){e=Aa(e)?!1:eb.test(M.location.hostname)||"/"==c&&vc.test(d)?!1:!0;if(!e)return!1;b&&1200<b.length&&(b=b.substring(0,1200),J(24));c=a+"="+b+"; path="+c+"; ";g&&(c+="expires="+(new Date((new Date).getTime()+g)).toGMTString()+"; ");d&&"none"!=d&&(c+="domain="+d+";");d=M.cookie;M.cookie=c;if(!(d=d!=M.cookie))a:{a=
Ca(a);for(d=0;d<a.length;d++)if(b==a[d]){d=!0;break a}d=!1}return d},Cc=function(a){return K(a).replace(/\(/g,"%28").replace(/\)/g,"%29")},vc=/^(www\.)?google(\.com?)?(\.[a-z]{2})?$/,eb=/(^|\.)doubleclick\.net$/i;var oc=function(){return(Ba||Ud()?"https:":"http:")+"//www.google-analytics.com"},Da=function(a){this.name="len";this.message=a+"-8192"},ba=function(a,b,c){c=c||ua;if(2036>=b.length)wc(a,b,c);else if(8192>=b.length)x(a,b,c)||wd(a,b,c)||wc(a,b,c);else throw ge("len",b.length),new Da(b.length);},wc=function(a,b,c){var d=ta(a+"?"+b);d.onload=d.onerror=function(){d.onload=null;d.onerror=null;c()}},wd=function(a,b,c){var d=O.XMLHttpRequest;if(!d)return!1;var e=new d;if(!("withCredentials"in e))return!1;
e.open("POST",a,!0);e.withCredentials=!0;e.setRequestHeader("Content-Type","text/plain");e.onreadystatechange=function(){4==e.readyState&&(c(),e=null)};e.send(b);return!0},x=function(a,b,c){return O.navigator.sendBeacon?O.navigator.sendBeacon(a,b)?(c(),!0):!1:!1},ge=function(a,b,c){1<=100*Math.random()||Aa("?")||(a=["t=error","_e="+a,"_v=j41","sr=1"],b&&a.push("_f="+b),c&&a.push("_m="+K(c.substring(0,100))),a.push("aip=1"),a.push("z="+hd()),wc(oc()+"/collect",a.join("&"),ua))};var Ha=function(){this.M=[]};Ha.prototype.add=function(a){this.M.push(a)};Ha.prototype.D=function(a){try{for(var b=0;b<this.M.length;b++){var c=a.get(this.M[b]);c&&ea(c)&&c.call(O,a)}}catch(d){}b=a.get(Ia);b!=ua&&ea(b)&&(a.set(Ia,ua,!0),setTimeout(b,10))};function Ja(a){if(100!=a.get(Ka)&&La(P(a,Q))%1E4>=100*R(a,Ka))throw"abort";}function Ma(a){if(Aa(P(a,Na)))throw"abort";}function Oa(){var a=M.location.protocol;if("http:"!=a&&"https:"!=a)throw"abort";}
function Pa(a){try{O.navigator.sendBeacon?J(42):O.XMLHttpRequest&&"withCredentials"in new O.XMLHttpRequest&&J(40)}catch(c){}a.set(ld,Td(a),!0);a.set(Ac,R(a,Ac)+1);var b=[];Qa.map(function(c,d){if(d.F){var e=a.get(c);void 0!=e&&e!=d.defaultValue&&("boolean"==typeof e&&(e*=1),b.push(d.F+"="+K(""+e)))}});b.push("z="+Bd());a.set(Ra,b.join("&"),!0)}
function Sa(a){var b=P(a,gd)||oc()+"/collect",c=P(a,fa);!c&&a.get(Vd)&&(c="beacon");if(c){var d=P(a,Ra),e=a.get(Ia),e=e||ua;"image"==c?wc(b,d,e):"xhr"==c&&wd(b,d,e)||"beacon"==c&&x(b,d,e)||ba(b,d,e)}else ba(b,P(a,Ra),a.get(Ia));a.set(Ia,ua,!0)}function Hc(a){var b=O.gaData;b&&(b.expId&&a.set(Nc,b.expId),b.expVar&&a.set(Oc,b.expVar))}function cd(){if(O.navigator&&"preview"==O.navigator.loadPurpose)throw"abort";}function yd(a){var b=O.gaDevIds;ka(b)&&0!=b.length&&a.set("&did",b.join(","),!0)}
function vb(a){if(!a.get(Na))throw"abort";};var hd=function(){return Math.round(2147483647*Math.random())},Bd=function(){try{var a=new Uint32Array(1);O.crypto.getRandomValues(a);return a[0]&2147483647}catch(b){return hd()}};function Ta(a){var b=R(a,Ua);500<=b&&J(15);var c=P(a,Va);if("transaction"!=c&&"item"!=c){var c=R(a,Wa),d=(new Date).getTime(),e=R(a,Xa);0==e&&a.set(Xa,d);e=Math.round(2*(d-e)/1E3);0<e&&(c=Math.min(c+e,20),a.set(Xa,d));if(0>=c)throw"abort";a.set(Wa,--c)}a.set(Ua,++b)};var Ya=function(){this.data=new ee},Qa=new ee,Za=[];Ya.prototype.get=function(a){var b=$a(a),c=this.data.get(a);b&&void 0==c&&(c=ea(b.defaultValue)?b.defaultValue():b.defaultValue);return b&&b.Z?b.Z(this,a,c):c};var P=function(a,b){var c=a.get(b);return void 0==c?"":""+c},R=function(a,b){var c=a.get(b);return void 0==c||""===c?0:1*c};Ya.prototype.set=function(a,b,c){if(a)if("object"==typeof a)for(var d in a)a.hasOwnProperty(d)&&ab(this,d,a[d],c);else ab(this,a,b,c)};
var ab=function(a,b,c,d){if(void 0!=c)switch(b){case Na:wb.test(c)}var e=$a(b);e&&e.o?e.o(a,b,c,d):a.data.set(b,c,d)},bb=function(a,b,c,d,e){this.name=a;this.F=b;this.Z=d;this.o=e;this.defaultValue=c},$a=function(a){var b=Qa.get(a);if(!b)for(var c=0;c<Za.length;c++){var d=Za[c],e=d[0].exec(a);if(e){b=d[1](e);Qa.set(b.name,b);break}}return b},yc=function(a){var b;Qa.map(function(c,d){d.F==a&&(b=d)});return b&&b.name},S=function(a,b,c,d,e){a=new bb(a,b,c,d,e);Qa.set(a.name,a);return a.name},cb=function(a,
b){Za.push([new RegExp("^"+a+"$"),b])},T=function(a,b,c){return S(a,b,c,void 0,db)},db=function(){};var gb=qa(window.GoogleAnalyticsObject)&&sa(window.GoogleAnalyticsObject)||"ga",Ba=!1,he=S("_br"),hb=T("apiVersion","v"),ib=T("clientVersion","_v");S("anonymizeIp","aip");var jb=S("adSenseId","a"),Va=S("hitType","t"),Ia=S("hitCallback"),Ra=S("hitPayload");S("nonInteraction","ni");S("currencyCode","cu");S("dataSource","ds");var Vd=S("useBeacon",void 0,!1),fa=S("transport");S("sessionControl","sc","");S("sessionGroup","sg");S("queueTime","qt");var Ac=S("_s","_s");S("screenName","cd");
var kb=S("location","dl",""),lb=S("referrer","dr"),mb=S("page","dp","");S("hostname","dh");var nb=S("language","ul"),ob=S("encoding","de");S("title","dt",function(){return M.title||void 0});cb("contentGroup([0-9]+)",function(a){return new bb(a[0],"cg"+a[1])});var pb=S("screenColors","sd"),qb=S("screenResolution","sr"),rb=S("viewportSize","vp"),sb=S("javaEnabled","je"),tb=S("flashVersion","fl");S("campaignId","ci");S("campaignName","cn");S("campaignSource","cs");S("campaignMedium","cm");
S("campaignKeyword","ck");S("campaignContent","cc");var ub=S("eventCategory","ec"),xb=S("eventAction","ea"),yb=S("eventLabel","el"),zb=S("eventValue","ev"),Bb=S("socialNetwork","sn"),Cb=S("socialAction","sa"),Db=S("socialTarget","st"),Eb=S("l1","plt"),Fb=S("l2","pdt"),Gb=S("l3","dns"),Hb=S("l4","rrt"),Ib=S("l5","srt"),Jb=S("l6","tcp"),Kb=S("l7","dit"),Lb=S("l8","clt"),Mb=S("timingCategory","utc"),Nb=S("timingVar","utv"),Ob=S("timingLabel","utl"),Pb=S("timingValue","utt");S("appName","an");
S("appVersion","av","");S("appId","aid","");S("appInstallerId","aiid","");S("exDescription","exd");S("exFatal","exf");var Nc=S("expId","xid"),Oc=S("expVar","xvar"),Rc=S("_utma","_utma"),Sc=S("_utmz","_utmz"),Tc=S("_utmht","_utmht"),Ua=S("_hc",void 0,0),Xa=S("_ti",void 0,0),Wa=S("_to",void 0,20);cb("dimension([0-9]+)",function(a){return new bb(a[0],"cd"+a[1])});cb("metric([0-9]+)",function(a){return new bb(a[0],"cm"+a[1])});S("linkerParam",void 0,void 0,Bc,db);var ld=S("usage","_u"),Gd=S("_um");
S("forceSSL",void 0,void 0,function(){return Ba},function(a,b,c){J(34);Ba=!!c});var ed=S("_j1","jid");cb("\\&(.*)",function(a){var b=new bb(a[0],a[1]),c=yc(a[0].substring(1));c&&(b.Z=function(a){return a.get(c)},b.o=function(a,b,g,ca){a.set(c,g,ca)},b.F=void 0);return b});
var Qb=T("_oot"),dd=S("previewTask"),Rb=S("checkProtocolTask"),md=S("validationTask"),Sb=S("checkStorageTask"),Uc=S("historyImportTask"),Tb=S("samplerTask"),Vb=S("_rlt"),Wb=S("buildHitTask"),Xb=S("sendHitTask"),Vc=S("ceTask"),zd=S("devIdTask"),Cd=S("timingTask"),Ld=S("displayFeaturesTask"),V=T("name"),Q=T("clientId","cid"),Ad=S("userId","uid"),Na=T("trackingId","tid"),U=T("cookieName",void 0,"_ga"),W=T("cookieDomain"),Yb=T("cookiePath",void 0,"/"),Zb=T("cookieExpires",void 0,63072E3),$b=T("legacyCookieDomain"),
Wc=T("legacyHistoryImport",void 0,!0),ac=T("storage",void 0,"cookie"),bc=T("allowLinker",void 0,!1),cc=T("allowAnchor",void 0,!0),Ka=T("sampleRate","sf",100),dc=T("siteSpeedSampleRate",void 0,1),ec=T("alwaysSendReferrer",void 0,!1),gd=S("transportUrl"),Md=S("_r","_r");function X(a,b,c,d){b[a]=function(){try{return d&&J(d),c.apply(this,arguments)}catch(b){throw ge("exc",a,b&&b.name),b;}}};var Od=function(a,b,c){this.V=1E4;this.fa=a;this.$=!1;this.B=b;this.ea=c||1},Ed=function(a,b){var c;if(a.fa&&a.$)return 0;a.$=!0;if(b){if(a.B&&R(b,a.B))return R(b,a.B);if(0==b.get(dc))return 0}if(0==a.V)return 0;void 0===c&&(c=Bd());return 0==c%a.V?Math.floor(c/a.V)%a.ea+1:0};var ie=new Od(!0,he,7),je=function(a){if(!Ud()&&!Ba){var b=Ed(ie,a);if(b&&!(!O.navigator.sendBeacon&&4<=b&&6>=b)){var c=(new Date).getHours(),d=[Bd(),Bd(),Bd()].join(".");a=(3==b||5==b?"https:":"http:")+"//www.google-analytics.com/collect?z=br.";a+=[b,"A",c,d].join(".");var e=1!=b%3?"https:":"http:",e=e+"//www.google-analytics.com/collect?z=br.",e=e+[b,"B",c,d].join(".");7==b&&(e=e.replace("//www.","//ssl."));c=function(){4<=b&&6>=b?O.navigator.sendBeacon(e,""):ta(e)};Bd()%2?(ta(a),c()):(c(),ta(a))}}};function fc(){var a,b,c;if((c=(c=O.navigator)?c.plugins:null)&&c.length)for(var d=0;d<c.length&&!b;d++){var e=c[d];-1<e.name.indexOf("Shockwave Flash")&&(b=e.description)}if(!b)try{a=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7"),b=a.GetVariable("$version")}catch(g){}if(!b)try{a=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6"),b="WIN 6,0,21,0",a.AllowScriptAccess="always",b=a.GetVariable("$version")}catch(g){}if(!b)try{a=new ActiveXObject("ShockwaveFlash.ShockwaveFlash"),b=a.GetVariable("$version")}catch(g){}b&&
(a=b.match(/[\d]+/g))&&3<=a.length&&(b=a[0]+"."+a[1]+" r"+a[2]);return b||void 0};var gc=function(a,b){var c=Math.min(R(a,dc),100);if(!(La(P(a,Q))%100>=c)&&(c={},Ec(c)||Fc(c))){var d=c[Eb];void 0==d||Infinity==d||isNaN(d)||(0<d?(Y(c,Gb),Y(c,Jb),Y(c,Ib),Y(c,Fb),Y(c,Hb),Y(c,Kb),Y(c,Lb),b(c)):L(O,"load",function(){gc(a,b)},!1))}},Ec=function(a){var b=O.performance||O.webkitPerformance,b=b&&b.timing;if(!b)return!1;var c=b.navigationStart;if(0==c)return!1;a[Eb]=b.loadEventStart-c;a[Gb]=b.domainLookupEnd-b.domainLookupStart;a[Jb]=b.connectEnd-b.connectStart;a[Ib]=b.responseStart-b.requestStart;
a[Fb]=b.responseEnd-b.responseStart;a[Hb]=b.fetchStart-c;a[Kb]=b.domInteractive-c;a[Lb]=b.domContentLoadedEventStart-c;return!0},Fc=function(a){if(O.top!=O)return!1;var b=O.external,c=b&&b.onloadT;b&&!b.isValidLoadTime&&(c=void 0);2147483648<c&&(c=void 0);0<c&&b.setPageReadyTime();if(void 0==c)return!1;a[Eb]=c;return!0},Y=function(a,b){var c=a[b];if(isNaN(c)||Infinity==c||0>c)a[b]=void 0},Fd=function(a){return function(b){"pageview"!=b.get(Va)||a.I||(a.I=!0,gc(b,function(b){a.send("timing",b)}))}};var hc=!1,mc=function(a){if("cookie"==P(a,ac)){var b=P(a,U),c=nd(a),d=kc(P(a,Yb)),e=lc(P(a,W)),g=1E3*R(a,Zb),ca=P(a,Na);if("auto"!=e)zc(b,c,d,e,ca,g)&&(hc=!0);else{J(32);var l;a:{c=[];e=xa().split(".");if(4==e.length&&(l=e[e.length-1],parseInt(l,10)==l)){l=["none"];break a}for(l=e.length-2;0<=l;l--)c.push(e.slice(l).join("."));c.push("none");l=c}for(var k=0;k<l.length;k++)if(e=l[k],a.data.set(W,e),c=nd(a),zc(b,c,d,e,ca,g)){hc=!0;return}a.data.set(W,"auto")}}},nc=function(a){if("cookie"==P(a,ac)&&
!hc&&(mc(a),!hc))throw"abort";},Yc=function(a){if(a.get(Wc)){var b=P(a,W),c=P(a,$b)||xa(),d=Xc("__utma",c,b);d&&(J(19),a.set(Tc,(new Date).getTime(),!0),a.set(Rc,d.R),(b=Xc("__utmz",c,b))&&d.hash==b.hash&&a.set(Sc,b.R))}},nd=function(a){var b=Cc(P(a,Q)),c=ic(P(a,W));a=jc(P(a,Yb));1<a&&(c+="-"+a);return["GA1",c,b].join(".")},Gc=function(a,b,c){for(var d=[],e=[],g,ca=0;ca<a.length;ca++){var l=a[ca];l.H[c]==b?d.push(l):void 0==g||l.H[c]<g?(e=[l],g=l.H[c]):l.H[c]==g&&e.push(l)}return 0<d.length?d:e},
lc=function(a){return 0==a.indexOf(".")?a.substr(1):a},ic=function(a){return lc(a).split(".").length},kc=function(a){if(!a)return"/";1<a.length&&a.lastIndexOf("/")==a.length-1&&(a=a.substr(0,a.length-1));0!=a.indexOf("/")&&(a="/"+a);return a},jc=function(a){a=kc(a);return"/"==a?1:a.split("/").length};function Xc(a,b,c){"none"==b&&(b="");var d=[],e=Ca(a);a="__utma"==a?6:2;for(var g=0;g<e.length;g++){var ca=(""+e[g]).split(".");ca.length>=a&&d.push({hash:ca[0],R:e[g],O:ca})}return 0==d.length?void 0:1==d.length?d[0]:Zc(b,d)||Zc(c,d)||Zc(null,d)||d[0]}function Zc(a,b){var c,d;null==a?c=d=1:(c=La(a),d=La(D(a,".")?a.substring(1):"."+a));for(var e=0;e<b.length;e++)if(b[e].hash==c||b[e].hash==d)return b[e]};var od=new RegExp(/^https?:\/\/([^\/:]+)/),pd=/(.*)([?&#])(?:_ga=[^&#]*)(?:&?)(.*)/;function Bc(a){a=a.get(Q);var b=Ic(a,0);return"_ga=1."+K(b+"."+a)}function Ic(a,b){for(var c=new Date,d=O.navigator,e=d.plugins||[],c=[a,d.userAgent,c.getTimezoneOffset(),c.getYear(),c.getDate(),c.getHours(),c.getMinutes()+b],d=0;d<e.length;++d)c.push(e[d].description);return La(c.join("."))}var Dc=function(a){J(48);this.target=a;this.T=!1};
Dc.prototype.ca=function(a,b){if(a.tagName){if("a"==a.tagName.toLowerCase()){a.href&&(a.href=qd(this,a.href,b));return}if("form"==a.tagName.toLowerCase())return rd(this,a)}if("string"==typeof a)return qd(this,a,b)};
var qd=function(a,b,c){var d=pd.exec(b);d&&3<=d.length&&(b=d[1]+(d[3]?d[2]+d[3]:""));a=a.target.get("linkerParam");var e=b.indexOf("?"),d=b.indexOf("#");c?b+=(-1==d?"#":"&")+a:(c=-1==e?"?":"&",b=-1==d?b+(c+a):b.substring(0,d)+c+a+b.substring(d));return b=b.replace(/&+_ga=/,"&_ga=")},rd=function(a,b){if(b&&b.action){var c=a.target.get("linkerParam").split("=")[1];if("get"==b.method.toLowerCase()){for(var d=b.childNodes||[],e=0;e<d.length;e++)if("_ga"==d[e].name){d[e].setAttribute("value",c);return}d=
M.createElement("input");d.setAttribute("type","hidden");d.setAttribute("name","_ga");d.setAttribute("value",c);b.appendChild(d)}else"post"==b.method.toLowerCase()&&(b.action=qd(a,b.action))}};
Dc.prototype.S=function(a,b,c){function d(c){try{c=c||O.event;var d;a:{var g=c.target||c.srcElement;for(c=100;g&&0<c;){if(g.href&&g.nodeName.match(/^a(?:rea)?$/i)){d=g;break a}g=g.parentNode;c--}d={}}("http:"==d.protocol||"https:"==d.protocol)&&sd(a,d.hostname||"")&&d.href&&(d.href=qd(e,d.href,b))}catch(w){J(26)}}var e=this;this.T||(this.T=!0,L(M,"mousedown",d,!1),L(M,"keyup",d,!1));if(c){c=function(b){b=b||O.event;if((b=b.target||b.srcElement)&&b.action){var c=b.action.match(od);c&&sd(a,c[1])&&rd(e,
b)}};for(var g=0;g<M.forms.length;g++)L(M.forms[g],"submit",c)}};function sd(a,b){if(b==M.location.hostname)return!1;for(var c=0;c<a.length;c++)if(a[c]instanceof RegExp){if(a[c].test(b))return!0}else if(0<=b.indexOf(a[c]))return!0;return!1};var Jd=function(a,b,c){this.U=ed;this.aa=b;(b=c)||(b=(b=P(a,V))&&"t0"!=b?Wd.test(b)?"_gat_"+Cc(P(a,Na)):"_gat_"+Cc(b):"_gat");this.Y=b},Rd=function(a,b){var c=b.get(Wb);b.set(Wb,function(b){Pd(a,b);var d=c(b);Qd(a,b);return d});var d=b.get(Xb);b.set(Xb,function(b){var c=d(b);Id(a,b);return c})},Pd=function(a,b){b.get(a.U)||("1"==Ca(a.Y)[0]?b.set(a.U,"",!0):b.set(a.U,""+hd(),!0))},Qd=function(a,b){b.get(a.U)&&zc(a.Y,"1",b.get(Yb),b.get(W),b.get(Na),6E5)},Id=function(a,b){if(b.get(a.U)){var c=new ee,
d=function(a){$a(a).F&&c.set($a(a).F,b.get(a))};d(hb);d(ib);d(Na);d(Q);d(Ad);d(a.U);c.set($a(ld).F,Td(b));var e=a.aa;c.map(function(a,b){e+=K(a)+"=";e+=K(""+b)+"&"});e+="z="+hd();ta(e);b.set(a.U,"",!0)}},Wd=/^gtm\d+$/;var fd=function(a,b){var c=a.b;if(!c.get("dcLoaded")){Nd(c,29);b=b||{};var d;b[U]&&(d=Cc(b[U]));d=new Jd(c,"https://stats.g.doubleclick.net/r/collect?t=dc&aip=1&_r=3&",d);Rd(d,c);c.set("dcLoaded",!0)}};var Sd=function(a){if(!a.get("dcLoaded")&&"cookie"==a.get(ac)){Nd(a,51);var b=new Jd(a);Pd(b,a);Qd(b,a);a.get(b.U)&&(a.set(Md,1,!0),a.set(gd,oc()+"/r/collect",!0))}};var Lc=function(){var a=O.gaGlobal=O.gaGlobal||{};return a.hid=a.hid||hd()};var ad,bd=function(a,b,c){if(!ad){var d;d=M.location.hash;var e=O.name,g=/^#?gaso=([^&]*)/;if(e=(d=(d=d&&d.match(g)||e&&e.match(g))?d[1]:Ca("GASO")[0]||"")&&d.match(/^(?:!([-0-9a-z.]{1,40})!)?([-.\w]{10,1200})$/i))zc("GASO",""+d,c,b,a,0),window._udo||(window._udo=b),window._utcp||(window._utcp=c),a=e[1],wa("https://www.google.com/analytics/web/inpage/pub/inpage.js?"+(a?"prefix="+a+"&":"")+hd(),"_gasojs");ad=!0}};var wb=/^(UA|YT|MO|GP)-(\d+)-(\d+)$/,pc=function(a){function b(a,b){d.b.data.set(a,b)}function c(a,c){b(a,c);d.filters.add(a)}var d=this;this.b=new Ya;this.filters=new Ha;b(V,a[V]);b(Na,sa(a[Na]));b(U,a[U]);b(W,a[W]||xa());b(Yb,a[Yb]);b(Zb,a[Zb]);b($b,a[$b]);b(Wc,a[Wc]);b(bc,a[bc]);b(cc,a[cc]);b(Ka,a[Ka]);b(dc,a[dc]);b(ec,a[ec]);b(ac,a[ac]);b(Ad,a[Ad]);b(hb,1);b(ib,"j41");c(Qb,Ma);c(dd,cd);c(Rb,Oa);c(md,vb);c(Sb,nc);c(Uc,Yc);c(Tb,Ja);c(Vb,Ta);c(Vc,Hc);c(zd,yd);c(Ld,Sd);c(Wb,Pa);c(Xb,Sa);c(Cd,Fd(this));
Jc(this.b,a[Q]);Kc(this.b);this.b.set(jb,Lc());bd(this.b.get(Na),this.b.get(W),this.b.get(Yb))},Jc=function(a,b){if("cookie"==P(a,ac)){hc=!1;var c;b:{var d=Ca(P(a,U));if(d&&!(1>d.length)){c=[];for(var e=0;e<d.length;e++){var g;g=d[e].split(".");var ca=g.shift();("GA1"==ca||"1"==ca)&&1<g.length?(ca=g.shift().split("-"),1==ca.length&&(ca[1]="1"),ca[0]*=1,ca[1]*=1,g={H:ca,s:g.join(".")}):g=void 0;g&&c.push(g)}if(1==c.length){J(13);c=c[0].s;break b}if(0==c.length)J(12);else{J(14);d=ic(P(a,W));c=Gc(c,
d,0);if(1==c.length){c=c[0].s;break b}d=jc(P(a,Yb));c=Gc(c,d,1);c=c[0]&&c[0].s;break b}}c=void 0}c||(c=P(a,W),d=P(a,$b)||xa(),c=Xc("__utma",d,c),void 0!=c?(J(10),c=c.O[1]+"."+c.O[2]):c=void 0);c&&(a.data.set(Q,c),hc=!0)}c=a.get(cc);if(e=(c=M.location[c?"href":"search"].match("(?:&|#|\\?)"+K("_ga").replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1")+"=([^&#]*)"))&&2==c.length?c[1]:"")a.get(bc)?(c=e.indexOf("."),-1==c?J(22):(d=e.substring(c+1),"1"!=e.substring(0,c)?J(22):(c=d.indexOf("."),-1==c?J(22):(e=
d.substring(0,c),c=d.substring(c+1),e!=Ic(c,0)&&e!=Ic(c,-1)&&e!=Ic(c,-2)?J(23):(J(11),a.data.set(Q,c)))))):J(21);b&&(J(9),a.data.set(Q,K(b)));if(!a.get(Q))if(c=(c=O.gaGlobal&&O.gaGlobal.vid)&&-1!=c.search(/^(?:utma\.)?\d+\.\d+$/)?c:void 0)J(17),a.data.set(Q,c);else{J(8);c=O.navigator.userAgent+(M.cookie?M.cookie:"")+(M.referrer?M.referrer:"");d=c.length;for(e=O.history.length;0<e;)c+=e--^d++;a.data.set(Q,[hd()^La(c)&2147483647,Math.round((new Date).getTime()/1E3)].join("."))}mc(a)},Kc=function(a){var b=
O.navigator,c=O.screen,d=M.location;a.set(lb,ya(a.get(ec)));if(d){var e=d.pathname||"";"/"!=e.charAt(0)&&(J(31),e="/"+e);a.set(kb,d.protocol+"//"+d.hostname+e+d.search)}c&&a.set(qb,c.width+"x"+c.height);c&&a.set(pb,c.colorDepth+"-bit");var c=M.documentElement,g=(e=M.body)&&e.clientWidth&&e.clientHeight,ca=[];c&&c.clientWidth&&c.clientHeight&&("CSS1Compat"===M.compatMode||!g)?ca=[c.clientWidth,c.clientHeight]:g&&(ca=[e.clientWidth,e.clientHeight]);c=0>=ca[0]||0>=ca[1]?"":ca.join("x");a.set(rb,c);a.set(tb,
fc());a.set(ob,M.characterSet||M.charset);a.set(sb,b&&"function"===typeof b.javaEnabled&&b.javaEnabled()||!1);a.set(nb,(b&&(b.language||b.browserLanguage)||"").toLowerCase());if(d&&a.get(cc)&&(b=M.location.hash)){b=b.split(/[?&#]+/);d=[];for(c=0;c<b.length;++c)(D(b[c],"utm_id")||D(b[c],"utm_campaign")||D(b[c],"utm_source")||D(b[c],"utm_medium")||D(b[c],"utm_term")||D(b[c],"utm_content")||D(b[c],"gclid")||D(b[c],"dclid")||D(b[c],"gclsrc"))&&d.push(b[c]);0<d.length&&(b="#"+d.join("&"),a.set(kb,a.get(kb)+
b))}};pc.prototype.get=function(a){return this.b.get(a)};pc.prototype.set=function(a,b){this.b.set(a,b)};var qc={pageview:[mb],event:[ub,xb,yb,zb],social:[Bb,Cb,Db],timing:[Mb,Nb,Pb,Ob]};pc.prototype.send=function(a){if(!(1>arguments.length)){var b,c;"string"===typeof arguments[0]?(b=arguments[0],c=[].slice.call(arguments,1)):(b=arguments[0]&&arguments[0][Va],c=arguments);b&&(c=za(qc[b]||[],c),c[Va]=b,this.b.set(c,void 0,!0),this.filters.D(this.b),this.b.data.m={},je(this.b))}};var rc=function(a){if("prerender"==M.visibilityState)return!1;a();return!0};var td=/^(?:(\w+)\.)?(?:(\w+):)?(\w+)$/,sc=function(a){if(ea(a[0]))this.u=a[0];else{var b=td.exec(a[0]);null!=b&&4==b.length&&(this.c=b[1]||"t0",this.K=b[2]||"",this.C=b[3],this.a=[].slice.call(a,1),this.K||(this.A="create"==this.C,this.i="require"==this.C,this.g="provide"==this.C,this.ba="remove"==this.C),this.i&&(3<=this.a.length?(this.X=this.a[1],this.W=this.a[2]):this.a[1]&&(qa(this.a[1])?this.X=this.a[1]:this.W=this.a[1])));b=a[1];a=a[2];if(!this.C)throw"abort";if(this.i&&(!qa(b)||""==b))throw"abort";
if(this.g&&(!qa(b)||""==b||!ea(a)))throw"abort";if(ud(this.c)||ud(this.K))throw"abort";if(this.g&&"t0"!=this.c)throw"abort";}};function ud(a){return 0<=a.indexOf(".")||0<=a.indexOf(":")};var Yd,Zd,$d;Yd=new ee;$d=new ee;Zd={ec:45,ecommerce:46,linkid:47};
var ae=function(a){function b(a){var b=(a.hostname||"").split(":")[0].toLowerCase(),c=(a.protocol||"").toLowerCase(),c=1*a.port||("http:"==c?80:"https:"==c?443:"");a=a.pathname||"";D(a,"/")||(a="/"+a);return[b,""+c,a]}var c=M.createElement("a");c.href=M.location.href;var d=(c.protocol||"").toLowerCase(),e=b(c),g=c.search||"",ca=d+"//"+e[0]+(e[1]?":"+e[1]:"");D(a,"//")?a=d+a:D(a,"/")?a=ca+a:!a||D(a,"?")?a=ca+e[2]+(a||g):0>a.split("/")[0].indexOf(":")&&(a=ca+e[2].substring(0,e[2].lastIndexOf("/"))+
"/"+a);c.href=a;d=b(c);return{protocol:(c.protocol||"").toLowerCase(),host:d[0],port:d[1],path:d[2],query:c.search||"",url:a||""}};var Z={ga:function(){Z.f=[]}};Z.ga();Z.D=function(a){var b=Z.J.apply(Z,arguments),b=Z.f.concat(b);for(Z.f=[];0<b.length&&!Z.v(b[0])&&!(b.shift(),0<Z.f.length););Z.f=Z.f.concat(b)};
Z.J=function(a){for(var b=[],c=0;c<arguments.length;c++)try{var d=new sc(arguments[c]);if(d.g)Yd.set(d.a[0],d.a[1]);else{if(d.i){var e=d,g=e.a[0];if(!ea(Yd.get(g))&&!$d.get(g)){Zd.hasOwnProperty(g)&&J(Zd[g]);var ca=e.X;!ca&&Zd.hasOwnProperty(g)?(J(39),ca=g+".js"):J(43);if(ca){ca&&0<=ca.indexOf("/")||(ca=(Ba||Ud()?"https:":"http:")+"//www.google-analytics.com/plugins/ua/"+ca);var l=ae(ca),e=void 0;var k=l.protocol,w=M.location.protocol,e="https:"==k||k==w?!0:"http:"!=k?!1:"http:"==w;var Xd;if(Xd=e){var e=
l,be=ae(M.location.href);if(e.query||0<=e.url.indexOf("?")||0<=e.path.indexOf("://"))Xd=!1;else if(e.host==be.host&&e.port==be.port)Xd=!0;else{var ce="http:"==e.protocol?80:443;Xd="www.google-analytics.com"==e.host&&(e.port||ce)==ce&&D(e.path,"/plugins/")?!0:!1}}Xd&&(wa(l.url),$d.set(g,!0))}}}b.push(d)}}catch(de){}return b};
Z.v=function(a){try{if(a.u)a.u.call(O,N.j("t0"));else{var b=a.c==gb?N:N.j(a.c);if(a.A)"t0"==a.c&&N.create.apply(N,a.a);else if(a.ba)N.remove(a.c);else if(b)if(a.i){var c;var d=a.a[0],e=a.W;b==N||b.get(V);var g=Yd.get(d);ea(g)?(b.plugins_=b.plugins_||new ee,b.plugins_.get(d)||b.plugins_.set(d,new g(b,e||{})),c=!0):c=!1;if(!c)return!0}else if(a.K){var ca=a.C,l=a.a,k=b.plugins_.get(a.K);k[ca].apply(k,l)}else b[a.C].apply(b,a.a)}}catch(w){}};var N=function(a){J(1);Z.D.apply(Z,[arguments])};N.h={};N.P=[];N.L=0;N.answer=42;var uc=[Na,W,V];N.create=function(a){var b=za(uc,[].slice.call(arguments));b[V]||(b[V]="t0");var c=""+b[V];if(N.h[c])return N.h[c];b=new pc(b);N.h[c]=b;N.P.push(b);return b};N.remove=function(a){for(var b=0;b<N.P.length;b++)if(N.P[b].get(V)==a){N.P.splice(b,1);N.h[a]=null;break}};N.j=function(a){return N.h[a]};N.getAll=function(){return N.P.slice(0)};
N.N=function(){"ga"!=gb&&J(49);var a=O[gb];if(!a||42!=a.answer){N.L=a&&a.l;N.loaded=!0;var b=O[gb]=N;X("create",b,b.create);X("remove",b,b.remove);X("getByName",b,b.j,5);X("getAll",b,b.getAll,6);b=pc.prototype;X("get",b,b.get,7);X("set",b,b.set,4);X("send",b,b.send);b=Ya.prototype;X("get",b,b.get);X("set",b,b.set);if(!Ud()&&!Ba){a:{for(var b=M.getElementsByTagName("script"),c=0;c<b.length&&100>c;c++){var d=b[c].src;if(d&&0==d.indexOf("https://www.google-analytics.com/analytics")){J(33);b=!0;break a}}b=
!1}b&&(Ba=!0)}Ud()||Ba||!Ed(new Od)||(J(36),Ba=!0);(O.gaplugins=O.gaplugins||{}).Linker=Dc;b=Dc.prototype;Yd.set("linker",Dc);X("decorate",b,b.ca,20);X("autoLink",b,b.S,25);Yd.set("displayfeatures",fd);Yd.set("adfeatures",fd);a=a&&a.q;ka(a)?Z.D.apply(N,a):J(50)}};N.da=function(){for(var a=N.getAll(),b=0;b<a.length;b++)a[b].get(V)};
(function(){var a=N.N;if(!rc(a)){J(16);var b=!1,c=function(){if(!b&&rc(a)){b=!0;var d=c,e=M;e.removeEventListener?e.removeEventListener("visibilitychange",d,!1):e.detachEvent&&e.detachEvent("onvisibilitychange",d)}};L(M,"visibilitychange",c)}})();function La(a){var b=1,c=0,d;if(a)for(b=0,d=a.length-1;0<=d;d--)c=a.charCodeAt(d),b=(b<<6&268435455)+c+(c<<14),c=b&266338304,b=0!=c?b^c>>21:b;return b};})(window);
</script>
</body></html>
CSS3 development with javascript added by Software RVG
Setting up Keyframes
A @SoftwareRVG-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes.
While this may sound complicated, and can be, we're starting with one of the most simple examples. The keyframes block defined here will simply rotate an element or group of elements counter-clockwise around the Y-axis (which points towards the top of the page): Setting the stage for our animation
The 'stage' is the element in which our animation takes place. The animation will move and rotate in relation to the stage element, which itself remains fixed to the page.
The optional perspective attribute defines how extreme the 3D effect will be as elements move up and down the Z-axis (come out of the page). The larger this distance the less obvious the effect. Without this attribute there is no perspective effect at all.
Setting up Keyframes
A @SoftwareRVG-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes.
While this may sound complicated, and can be, we're starting with one of the most simple examples. The keyframes block defined here will simply rotate an element or group of elements counter-clockwise around the Y-axis (which points towards the top of the page): Setting the stage for our animation
The 'stage' is the element in which our animation takes place. The animation will move and rotate in relation to the stage element, which itself remains fixed to the page.
The optional perspective attribute defines how extreme the 3D effect will be as elements move up and down the Z-axis (come out of the page). The larger this distance the less obvious the effect. Without this attribute there is no perspective effect at all.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.