| .draperA { |
| border-radius: 50%; |
| opacity: 1; |
| position: absolute; |
| background-color: #000000; |
| width: 60px; |
| height: 60px; |
| top: 0px; |
| left: 0px; |
| } |
| .draperB { |
| border-radius: 50%; |
| opacity: 1; |
| position: absolute; |
| background-color: #ffffff; |
| width: 48px; |
| height: 48px; |
| top: 6px; |
| left: 6px; |
| } |
| .draperC { |
| position: absolute; |
| background-color: #000000; |
| width: 60px; |
| height: 60px; |
| top: 0px; |
| left: 0px; |
| width: 28px; |
| } |
| .draperD { |
| position: absolute; |
| background-color: #ffffff; |
| width: 60px; |
| height: 60px; |
| top: 0px; |
| height: 3px; |
| width: 63px; |
| top: 28.5px; |
| left: 0px; |
| } |
| .rot1, |
| .rot2 { |
| opacity: 0; |
| } |
| .draper.rot1.active { |
| position: absolute; |
| background-color: #ffffff; |
| width: 60px; |
| height: 60px; |
| top: 0px; |
| left: 0px; |
| height: 4px; |
| width: 44px; |
| top: 28.5px; |
| left: 8px; |
| opacity: 1; |
| -webkit-animation: rota 2s infinite linear; |
| } |
| .draper.rot2.active { |
| position: absolute; |
| background-color: #ffffff; |
| width: 60px; |
| height: 60px; |
| top: 0px; |
| left: 0px; |
| height: 4px; |
| width: 30px; |
| top: 28.5px; |
| left: 15px; |
| opacity: 1; |
| -webkit-animation: rotb 1s infinite linear; |
| } |
| @-webkit-keyframes rota { |
| 100% { |
| -webkit-transform: rotate(-360deg); |
| } |
| } |
| @-webkit-keyframes rotb { |
| 100% { |
| -webkit-transform: rotate(360deg); |
| } |
| } |
| .draperE { |
| position: absolute; |
| background-color: #ffffff; |
| width: 60px; |
| height: 60px; |
| top: 0px; |
| left: 0px; |
| width: 3px; |
| left: 28.5px; |
| } |
| .hover-box { |
| width: 100%; |
| height: 100%; |
| background-color: #000000; |
| } |
| .draper.c6 { |
| border-radius: 50%; |
| opacity: 1; |
| position: absolute; |
| background-color: #ffffff; |
| width: 6px; |
| height: 6px; |
| top: 27px; |
| left: 27px; |
| } |
| .draper.c5 { |
| border-radius: 50%; |
| opacity: 1; |
| position: absolute; |
| background-color: #000000; |
| width: 14px; |
| height: 14px; |
| top: 23px; |
| left: 23px; |
| } |
| @-webkit-keyframes "draper6" { |
| |
| } |
| @-webkit-keyframes "draper5" { |
| 50% { |
| opacity: 0; |
| } |
| } |
| .draper.c4 { |
| border-radius: 50%; |
| opacity: 1; |
| position: absolute; |
| background-color: #ffffff; |
| width: 20px; |
| height: 20px; |
| top: 20px; |
| left: 20px; |
| } |
| .draper.c3 { |
| border-radius: 50%; |
| opacity: 1; |
| position: absolute; |
| background-color: #000000; |
| width: 28px; |
| height: 28px; |
| top: 16px; |
| left: 16px; |
| } |
| @-webkit-keyframes "draper4" { |
| |
| } |
| @-webkit-keyframes "draper3" { |
| 50% { |
| opacity: 0; |
| } |
| } |
| .draper.c2 { |
| border-radius: 50%; |
| opacity: 1; |
| position: absolute; |
| background-color: #ffffff; |
| width: 34px; |
| height: 34px; |
| top: 13px; |
| left: 13px; |
| } |
| .draper.c1 { |
| border-radius: 50%; |
| opacity: 1; |
| position: absolute; |
| background-color: #000000; |
| width: 42px; |
| height: 42px; |
| top: 9px; |
| left: 9px; |
| } |
| @-webkit-keyframes "draper2" { |
| |
| } |
| @-webkit-keyframes "draper1" { |
| 50% { |
| opacity: 0; |
| } |
| } |