@import url("http://fonts.googleapis.com/css?family=The+Girl+Next+Door");
@import url("http://fonts.googleapis.com/css?family=The+Girl+Next+Door");

.d0917 .boxShadow {
  width: 100px;
  height: 100px;
  background: white;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 20%;
  -moz-border-radius: 20%;
  -ms-border-radius: 20%;
  -o-border-radius: 20%;
  border-radius: 20%;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
}
.d0917 .webfont {
  font-family: "The Girl Next Door", cursive;
  font-size: 2em;
}
.d0917:hover > .transition {
  margin-left: 80%;
  margin-left: calc(100% - 50px);
}
.d0917 .transition {
  width: 50px;
  height: 50px;
  background: red;
  -webkit-transition-property: margin-left;
  -moz-transition-property: margin-left;
  -o-transition-property: margin-left;
  transition-property: margin-left;
  -webkit-transition-duration: 5s;
  -moz-transition-duration: 5s;
  -o-transition-duration: 5s;
  transition-duration: 5s;
}
.d0917 .transition + .transition {
  margin-top: 5px;
}
.d0917 .timing1 {
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}
.d0917 .container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.d0917 .cube {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform: rotateY(-15deg);
  -moz-transform: rotateY(-15deg);
  -ms-transform: rotateY(-15deg);
  -o-transform: rotateY(-15deg);
  transform: rotateY(-15deg);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d0917 .cube div {
  width: 146px;
  height: 146px;
  border: 2px solid #555555;
  position: absolute;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d0917 .cube:hover {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.d0917 .cube:hover div {
  -webkit-transform: rotateY(0deg) translateZ(1px);
  -moz-transform: rotateY(0deg) translateZ(1px);
  -ms-transform: rotateY(0deg) translateZ(1px);
  -o-transform: rotateY(0deg) translateZ(1px);
  transform: rotateY(0deg) translateZ(1px);
}
.d0917 .front {
  background: rgba(255, 0, 0, 0.5);
  -webkit-transform: rotateY(0deg) translateZ(75px);
  -moz-transform: rotateY(0deg) translateZ(75px);
  -ms-transform: rotateY(0deg) translateZ(75px);
  -o-transform: rotateY(0deg) translateZ(75px);
  transform: rotateY(0deg) translateZ(75px);
}
.d0917 .back {
  background: rgba(255, 255, 0, 0.5);
  -webkit-transform: rotateX(180deg) translateZ(75px);
  -moz-transform: rotateX(180deg) translateZ(75px);
  -ms-transform: rotateX(180deg) translateZ(75px);
  -o-transform: rotateX(180deg) translateZ(75px);
  transform: rotateX(180deg) translateZ(75px);
}
.d0917 .right {
  background: rgba(0, 255, 0, 0.5);
  -webkit-transform: rotateY(90deg) translateZ(75px);
  -moz-transform: rotateY(90deg) translateZ(75px);
  -ms-transform: rotateY(90deg) translateZ(75px);
  -o-transform: rotateY(90deg) translateZ(75px);
  transform: rotateY(90deg) translateZ(75px);
}
.d0917 .left {
  background: rgba(0, 255, 255, 0.5);
  -webkit-transform: rotateY(-90deg) translateZ(75px);
  -moz-transform: rotateY(-90deg) translateZ(75px);
  -ms-transform: rotateY(-90deg) translateZ(75px);
  -o-transform: rotateY(-90deg) translateZ(75px);
  transform: rotateY(-90deg) translateZ(75px);
}
.d0917 .top {
  background: rgba(0, 0, 255, 0.5);
  -webkit-transform: rotateX(90deg) translateZ(75px);
  -moz-transform: rotateX(90deg) translateZ(75px);
  -ms-transform: rotateX(90deg) translateZ(75px);
  -o-transform: rotateX(90deg) translateZ(75px);
  transform: rotateX(90deg) translateZ(75px);
}
.d0917 .bottom {
  background: rgba(255, 0, 255, 0.5);
  -webkit-transform: rotateX(-90deg) translateZ(75px);
  -moz-transform: rotateX(-90deg) translateZ(75px);
  -ms-transform: rotateX(-90deg) translateZ(75px);
  -o-transform: rotateX(-90deg) translateZ(75px);
  transform: rotateX(-90deg) translateZ(75px);
}

.d0918 {
  text-align: center;
  color: white;
  line-height: 100px;
}
.d0918 div {
  display: inline-block;
  width: 45%;
  height: 100px;
}
.d0918 .color1 {
  background: #bf2c73;
}
.d0918 .color2 {
  background: #bf2c73;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff3b99), color-stop(100%, #7f1d4d));
  background-image: -webkit-linear-gradient(#ff3b99, #7f1d4d);
  background-image: -moz-linear-gradient(#ff3b99, #7f1d4d);
  background-image: -o-linear-gradient(#ff3b99, #7f1d4d);
  background-image: linear-gradient(#ff3b99, #7f1d4d);
}

.d0919 .test {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: 100px;
  height: 100px;
  border: #333333 solid 3px;
  margin: 0 auto;
}

.d0920 .nest ul {
  color: #e80c7a;
}
.d0920 .nest ul li {
  border-bottom: #cccccc solid 1px;
}
.d0920 .math {
  text-align: center;
  color: white;
}
.d0920 .math div {
  background: orange;
  border: #e80c7a solid 10px;
  display: inline-block;
  vertical-align: middle;
}
.d0920 .math .box1 {
  width: 150px;
  height: 150px;
}
.d0920 .math .box2 {
  width: 130px;
  height: 130px;
}
.d0920 .color {
  text-align: center;
  color: white;
}
.d0920 .color div {
  display: inline-block;
  width: 150px;
  height: 150px;
}
.d0920 .color .box1 {
  background: #e80c7a;
}
.d0920 .color .box2 {
  background: #b80961;
}
.d0920 .mixin table.table1 {
  border-collapse: collapse;
  width: 100%;
}
.d0920 .mixin table.table1 th {
  text-align: center;
  background: #e80c7a;
  color: white;
}
.d0920 .mixin table.table1 td, .d0920 .mixin table.table1 th {
  padding: 6px;
  border: 1px solid #cccccc;
}
.d0920 .mixin table.table2 {
  border-collapse: collapse;
  width: 100%;
}
.d0920 .mixin table.table2 th {
  text-align: center;
  background: #9d6bda;
  color: white;
}
.d0920 .mixin table.table2 td, .d0920 .mixin table.table2 th {
  padding: 6px;
  border: 1px solid #cccccc;
}
.d0920 .compass {
  margin: 0 auto;
  width: 150px;
  height: 150px;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e80c7a), color-stop(100%, #870747));
  background-image: -webkit-linear-gradient(#e80c7a, #870747);
  background-image: -moz-linear-gradient(#e80c7a, #870747);
  background-image: -o-linear-gradient(#e80c7a, #870747);
  background-image: linear-gradient(#e80c7a, #870747);
}
.d0920 .sass table.table3 {
  border-collapse: collapse;
  width: 100%;
}
.d0920 .sass table.table3 th {
  text-align: center;
  background: #e80c7a;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e80c7a), color-stop(100%, #870747));
  background-image: -webkit-linear-gradient(#e80c7a, #870747);
  background-image: -moz-linear-gradient(#e80c7a, #870747);
  background-image: -o-linear-gradient(#e80c7a, #870747);
  background-image: linear-gradient(#e80c7a, #870747);
  color: white;
}
.d0920 .sass table.table3 td, .d0920 .sass table.table3 th {
  padding: 6px;
  border: 1px solid #cccccc;
}

.d0921 {
  text-align: center;
}
.d0921 div {
  width: 100px;
  height: 100px;
  display: inline-block;
}
.d0921 .rgba1 {
  background: rgba(232, 12, 122, 0.2);
}
.d0921 .rgba2 {
  background: rgba(232, 12, 122, 0.4);
}
.d0921 .rgba3 {
  background: rgba(232, 12, 122, 0.6);
}
.d0921 .rgba4 {
  background: rgba(232, 12, 122, 0.8);
}
.d0921 .rgba5 {
  background: #e80c7a;
}
.d0921 .h1 {
  background: yellow;
}
.d0921 .h2 {
  background: lime;
}
.d0921 .h3 {
  background: cyan;
}
.d0921 .h4 {
  background: blue;
}
.d0921 .h5 {
  background: magenta;
}
.d0921 .h6 {
  background: red;
}
.d0921 .s1 {
  background: gray;
}
.d0921 .s2 {
  background: #669966;
}
.d0921 .s3 {
  background: #4db34d;
}
.d0921 .s4 {
  background: #33cc33;
}
.d0921 .s5 {
  background: #19e619;
}
.d0921 .s6 {
  background: lime;
}
.d0921 .l1 {
  background: black;
}
.d0921 .l2 {
  background: #006600;
}
.d0921 .l3 {
  background: #00cc00;
}
.d0921 .l4 {
  background: #33ff33;
}
.d0921 .l5 {
  background: #99ff99;
}
.d0921 .l6 {
  background: white;
}
.d0921 .hsla {
  background: #19e6d5;
}

.d0922 {
  text-align: center;
}
.d0922 .naruto {
  display: inline-block;
  background-image: url("/images/naruto.png");
  height: 404px;
  width: 156px;
  position: relative;
  z-index: 3;
}
.d0922 .naruto:after, .d0922 .naruto:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -15px;
  opacity: 0;
  -webkit-transition: all, 0.5s;
  -moz-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.d0922 .naruto:after {
  height: 414px;
  width: 214px;
  left: 0;
  background-image: url("/images/narutoR.png");
}
.d0922 .naruto:before {
  height: 413px;
  width: 231px;
  right: 0;
  background-image: url("/images/narutoL.png");
}
.d0922 .naruto:hover:after {
  opacity: 1;
  left: 150px;
}
.d0922 .naruto:hover:before {
  opacity: 1;
  right: 150px;
}
.d0922 .mayday {
  font-size: 2em;
  line-height: 1em;
  color: red;
}
.d0922 .mayday:before {
  content: "淚未乾 ";
  opacity: 0;
  -webkit-transition: all, 0.5s;
  -moz-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.d0922 .mayday:after {
  content: " 是什麼依然在滾燙";
  opacity: 0;
  -webkit-transition: all, 0.5s;
  -moz-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.d0922 .mayday:hover:before, .d0922 .mayday:hover:after {
  opacity: 1;
}
.d0922 .box-withArrow {
  font-size: 1.5em;
  width: 15em;
  padding: 0.5em;
  margin: 10px auto;
  background: #f74b48;
  color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}
.d0922 .box-withArrow:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 10px;
  bottom: -20px;
  border: transparent 10px solid;
  border-top: #f74b48 10px solid;
}

.d0923 {
  font-size: 2.5em;
  line-height: 1.5em;
  text-align: center;
}
.d0923.dark {
  background: #555555;
}
.d0923.gray {
  background: #dddddd;
}
.d0923 .text1 {
  color: red;
  text-shadow: 4em 0 0 gray;
}
.d0923 .text {
  font-weight: bolder;
  color: black;
}
.d0923 .normal {
  text-shadow: 1px 1px 5px gray;
}
.d0923 .texture {
  background: url("/images/agsquare.png");
}
.d0923 .text-shadow1 {
  text-shadow: 1px 1px 0 white;
}
.d0923 .text-shadow2 {
  text-shadow: -1px -1px 0 white;
}
.d0923 .text-shadow11 {
  color: #cccccc;
  text-shadow: -1px -1px 0 white, 1px 1px 0 #333333, 1px 1px 0 #444444;
}
.d0923 .text-shadow3 {
  text-shadow: 0 0 20px orange;
  color: white;
}
.d0923 .text-shadow4 {
  color: white;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 40px #ff00de, 0 0 70px #ff00de;
  line-height: 3em;
}
.d0923 .text-shadow9 {
  font-size: 1.5em;
  line-height: 1.5em;
  text-shadow: 3px 3px 0 #555555, 5px 5px 0 white;
  color: white;
}

.d0924 [class*="gradient"] {
  width: 100%;
  height: 100px;
}
.d0924 .gradient1 {
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e80c7a), color-stop(50%, rgba(232, 12, 122, 0.5)), color-stop(100%, #e85d2d));
  background-image: -webkit-linear-gradient(left, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: -moz-linear-gradient(left, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: -o-linear-gradient(left, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: linear-gradient(left, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
}
.d0924 .gradient2 {
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #e80c7a), color-stop(50%, rgba(232, 12, 122, 0.5)), color-stop(100%, #e85d2d));
  background-image: -webkit-linear-gradient(bottom, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: -moz-linear-gradient(bottom, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: -o-linear-gradient(bottom, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: linear-gradient(bottom, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
}
.d0924 .gradient3 {
  background-image: -webkit-linear-gradient(-35deg, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: -moz-linear-gradient(-35deg, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: -o-linear-gradient(-35deg, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: linear-gradient(-35deg, #e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
}
.d0924 .gradient4 {
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #e80c7a), color-stop(50%, rgba(232, 12, 122, 0.5)), color-stop(100%, #e85d2d));
  background-image: -webkit-radial-gradient(#e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: -moz-radial-gradient(#e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: -o-radial-gradient(#e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
  background-image: radial-gradient(#e80c7a, rgba(232, 12, 122, 0.5), #e85d2d);
}
.d0924 .gradient7 {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #e80c7a), color-stop(20%, #e85d2d), color-stop(30%, #e80c7a), color-stop(40%, #e85d2d), color-stop(50%, #e80c7a), color-stop(60%, #e85d2d));
  background-image: -webkit-linear-gradient(top, #e80c7a 10%, #e85d2d 20%, #e80c7a 30%, #e85d2d 40%, #e80c7a 50%, #e85d2d 60%);
  background-image: -moz-linear-gradient(top, #e80c7a 10%, #e85d2d 20%, #e80c7a 30%, #e85d2d 40%, #e80c7a 50%, #e85d2d 60%);
  background-image: -o-linear-gradient(top, #e80c7a 10%, #e85d2d 20%, #e80c7a 30%, #e85d2d 40%, #e80c7a 50%, #e85d2d 60%);
  background-image: linear-gradient(top, #e80c7a 10%, #e85d2d 20%, #e80c7a 30%, #e85d2d 40%, #e80c7a 50%, #e85d2d 60%);
}
.d0924 .gradient8 {
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(20%, rgba(232, 12, 122, 0.5)), color-stop(50%, transparent));
  background-image: -webkit-linear-gradient(left, rgba(232, 12, 122, 0.5) 20%, transparent 50%);
  background-image: -moz-linear-gradient(left, rgba(232, 12, 122, 0.5) 20%, transparent 50%);
  background-image: -o-linear-gradient(left, rgba(232, 12, 122, 0.5) 20%, transparent 50%);
  background-image: linear-gradient(left, rgba(232, 12, 122, 0.5) 20%, transparent 50%);
}
.d0924 .gradient9 {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(232, 12, 122, 0.5)), color-stop(70%, transparent));
  background-image: -webkit-linear-gradient(top, rgba(232, 12, 122, 0.5), transparent 70%);
  background-image: -moz-linear-gradient(top, rgba(232, 12, 122, 0.5), transparent 70%);
  background-image: -o-linear-gradient(top, rgba(232, 12, 122, 0.5), transparent 70%);
  background-image: linear-gradient(top, rgba(232, 12, 122, 0.5), transparent 70%);
}
.d0924 .gradient10 {
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(20%, rgba(232, 12, 122, 0.5)), color-stop(50%, transparent)), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(232, 12, 122, 0.5)), color-stop(70%, transparent));
  background: -webkit-linear-gradient(left, rgba(232, 12, 122, 0.5) 20%, transparent 50%), -webkit-linear-gradient(top, rgba(232, 12, 122, 0.5), transparent 70%);
  background: -moz-linear-gradient(left, rgba(232, 12, 122, 0.5) 20%, transparent 50%), -moz-linear-gradient(top, rgba(232, 12, 122, 0.5), transparent 70%);
  background: -o-linear-gradient(left, rgba(232, 12, 122, 0.5) 20%, transparent 50%), -o-linear-gradient(top, rgba(232, 12, 122, 0.5), transparent 70%);
  background: linear-gradient(left, rgba(232, 12, 122, 0.5) 20%, transparent 50%), linear-gradient(top, rgba(232, 12, 122, 0.5), transparent 70%);
}
.d0924 .gradient11 {
  background-image: -webkit-linear-gradient(-45deg, #000000 5px, transparent 50px);
  background-image: -moz-linear-gradient(-45deg, #000000 5px, transparent 50px);
  background-image: -o-linear-gradient(-45deg, #000000 5px, transparent 50px);
  background-image: linear-gradient(-45deg, #000000 5px, transparent 50px);
  background-size: 50px 50px;
}
.d0924 .gradient12 {
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 33, color-stop(9.09091%, #ffffff), color-stop(15.15152%, transparent), color-stop(21.21212%, #ffffff), color-stop(27.27273%, transparent), color-stop(33.33333%, #ffffff), color-stop(39.39394%, transparent), color-stop(45.45455%, #ffffff), color-stop(51.51515%, transparent), color-stop(57.57576%, #ffffff), color-stop(63.63636%, transparent), color-stop(69.69697%, #ffffff), color-stop(75.75758%, transparent), color-stop(81.81818%, #ffffff), color-stop(87.87879%, transparent), color-stop(93.93939%, #ffffff), color-stop(100%, transparent));
  background-image: -webkit-radial-gradient(#ffffff 3px, transparent 5px, #ffffff 7px, transparent 9px, #ffffff 11px, transparent 13px, #ffffff 15px, transparent 17px, #ffffff 19px, transparent 21px, #ffffff 23px, transparent 25px, #ffffff 27px, transparent 29px, #ffffff 31px, transparent 33px);
  background-image: -moz-radial-gradient(#ffffff 3px, transparent 5px, #ffffff 7px, transparent 9px, #ffffff 11px, transparent 13px, #ffffff 15px, transparent 17px, #ffffff 19px, transparent 21px, #ffffff 23px, transparent 25px, #ffffff 27px, transparent 29px, #ffffff 31px, transparent 33px);
  background-image: -o-radial-gradient(#ffffff 3px, transparent 5px, #ffffff 7px, transparent 9px, #ffffff 11px, transparent 13px, #ffffff 15px, transparent 17px, #ffffff 19px, transparent 21px, #ffffff 23px, transparent 25px, #ffffff 27px, transparent 29px, #ffffff 31px, transparent 33px);
  background-image: radial-gradient(#ffffff 3px, transparent 5px, #ffffff 7px, transparent 9px, #ffffff 11px, transparent 13px, #ffffff 15px, transparent 17px, #ffffff 19px, transparent 21px, #ffffff 23px, transparent 25px, #ffffff 27px, transparent 29px, #ffffff 31px, transparent 33px);
  background-color: #111111;
  background-size: 30px 30px;
}
.d0924 .gradient13 {
  background: -webkit-linear-gradient(45deg, #557777 50%, transparent 50%), -webkit-linear-gradient(90deg, #ee6655 100%, transparent 100%), -webkit-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -webkit-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -webkit-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -webkit-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -webkit-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -webkit-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -moz-linear-gradient(45deg, #557777 50%, transparent 50%), -moz-linear-gradient(90deg, #ee6655 100%, transparent 100%), -moz-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -moz-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -moz-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -moz-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -moz-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -moz-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -o-linear-gradient(45deg, #557777 50%, transparent 50%), -o-linear-gradient(90deg, #ee6655 100%, transparent 100%), -o-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -o-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -o-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -o-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -o-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -o-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: linear-gradient(45deg, #557777 50%, transparent 50%), linear-gradient(90deg, #ee6655 100%, transparent 100%), linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  margin: 0 auto;
  width: 150px;
  height: 150px;
  border: 1em solid tomato;
  -webkit-transition: all, 3s;
  -moz-transition: all, 3s;
  -o-transition: all, 3s;
  transition: all, 3s;
}
.d0924 .gradient13:hover {
  -webkit-transform: rotate(3600deg);
  -moz-transform: rotate(3600deg);
  -ms-transform: rotate(3600deg);
  -o-transform: rotate(3600deg);
  transform: rotate(3600deg);
}
.d0924 .gradient14 {
  background: -webkit-linear-gradient(45deg, #557777 50%, transparent 50%), -webkit-linear-gradient(90deg, #ee6655 100%, transparent 100%), -webkit-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -webkit-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -webkit-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -webkit-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -webkit-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -webkit-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -moz-linear-gradient(45deg, #557777 50%, transparent 50%), -moz-linear-gradient(90deg, #ee6655 100%, transparent 100%), -moz-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -moz-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -moz-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -moz-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -moz-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -moz-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -o-linear-gradient(45deg, #557777 50%, transparent 50%), -o-linear-gradient(90deg, #ee6655 100%, transparent 100%), -o-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -o-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -o-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -o-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -o-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -o-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: linear-gradient(45deg, #557777 50%, transparent 50%), linear-gradient(90deg, #ee6655 100%, transparent 100%), linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}
.d0924 .gradient15 {
  background: -webkit-linear-gradient(45deg, #557777 50%, transparent 50%), -webkit-linear-gradient(90deg, #ee6655 100%, transparent 100%), -webkit-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -webkit-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -webkit-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -webkit-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -webkit-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -webkit-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -moz-linear-gradient(45deg, #557777 50%, transparent 50%), -moz-linear-gradient(90deg, #ee6655 100%, transparent 100%), -moz-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -moz-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -moz-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -moz-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -moz-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -moz-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -o-linear-gradient(45deg, #557777 50%, transparent 50%), -o-linear-gradient(90deg, #ee6655 100%, transparent 100%), -o-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -o-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -o-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -o-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -o-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -o-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: linear-gradient(45deg, #557777 50%, transparent 50%), linear-gradient(90deg, #ee6655 100%, transparent 100%), linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background-repeat: no-repeat;
}

.d0925 .frame {
  margin: 0 auto;
  max-width: 450px;
  max-height: 300px;
  overflow-y: scroll;
}
.d0925 .frame:before {
  font-size: 2em;
  content: attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title) "\A" attr(data-title);
}
.d0925 .frame:hover::-webkit-scrollbar-thumb {
  background-color: #777777;
}
.d0925 .frame::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background-color: transparent;
}
.d0925 .frame::-webkit-scrollbar-thumb {
  background-color: rgba(170, 170, 170, 0.3);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.d0925 .frame::-webkit-scrollbar-track {
  background-color: transparent;
}
.d0925 .pic {
  background-image: url("/images/IMAG0645.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.d0925 .scroll {
  background-attachment: scroll;
}
.d0925 .fixed {
  background-attachment: fixed;
}
.d0925 .local {
  background-attachment: local;
}
.d0925 .new {
  font-size: 1.5em;
  line-height: 1.5;
  background: linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) bottom, radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%), radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 18px, 100% 18px;
  background-attachment: local, local, scroll, scroll;
}
.d0925 .new:before {
  font-size: 1.5em;
}
.d0925 .new1 {
  background: linear-gradient(#000000 30%, rgba(0, 0, 0, 0)), linear-gradient(rgba(0, 0, 0, 0), #000000 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px;
  background-attachment: local, local;
}
.d0925 .new1:before {
  font-size: 1.5em;
}
.d0925 .new2 {
  background: radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%), radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
  background-repeat: no-repeat;
  background-size: 100% 18px, 100% 18px;
  background-attachment: scroll, scroll;
}
.d0925 .new2:before {
  font-size: 1.5em;
}

@-webkit-keyframes keyborder {
  0% {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
  }

  15% {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
  }

  30% {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  45% {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
  }

  60% {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  75% {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
  }

  100% {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
  }
}

.d0926 {
  position: relative;
}
.d0926 .test1 {
  padding: 4px;
}
.d0926 .test1:before {
  content: attr(data-foo) "";
}
.d0926 .test2 {
  background: orange;
  display: block;
  width: calc(100% - 80px);
  margin: 0 auto;
  text-align: center;
}
.d0926 .test3 {
  background: orange;
  display: block;
  width: calc(100% / 6);
  margin: 0 auto;
  text-align: center;
}
.d0926 .test4 {
  position: relative;
  height: 1.6em;
}
.d0926 .test4 span {
  background: orange;
  display: block;
  position: absolute;
  left: calc(10% + 20px);
}
.d0926 .test5 {
  width: 300px;
  height: 300px;
  margin: auto;
}
.d0926 .test5 div {
  width: calc(100% - 4em);
  height: calc(100% - 4em);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 1em solid #4387fd;
  display: flex;
  margin: auto;
  -webkit-box-shadow: 0 0 5px #515151 inset;
  -moz-box-shadow: 0 0 5px #515151 inset;
  box-shadow: 0 0 5px #515151 inset;
}
.d0926 .test5 > div {
  animation: keyborder 2s;
  -webkit-animation: keyborder 2s;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.d0926 .test5 > div:hover {
  animation: keyborder 2s;
  -webkit-animation: keyborder 2s;
}
.d0926 .test5 div > div {
  border-color: #f44a3f;
  animation: keyborder 1s;
  -webkit-animation: keyborder 1s;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.d0926 .test5 div > div:hover {
  animation: keyborder 1s;
  -webkit-animation: keyborder 1s;
}
.d0926 .test5 div > div > div {
  border-color: #ffd14d;
  animation: keyborder 0.5s;
  -webkit-animation: keyborder 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.d0926 .test5 div > div > div:hover {
  animation: keyborder 0.5s;
  -webkit-animation: keyborder 0.5s;
}
.d0926 .test5 div > div > div > div {
  border-color: #0da861;
  animation: keyborder 0.25s;
  -webkit-animation: keyborder 0.25s;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.d0926 .test5 div > div > div > div:hover {
  animation: keyborder 0.25s;
  -webkit-animation: keyborder 0.25s;
}
.d0926 .test6 {
  background: #acdbc8;
  padding: 1em;
  overflow: hidden;
  *zoom: 1;
}
.d0926 .test6 div {
  padding: 1em;
  background: #ffa1a1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}
.d0926 .test6 .all1 {
  width: calc(100% - 200px - 1em);
}
.d0926 .test6 .w200 {
  width: 200px;
  float: right;
}
.d0926 .test6 .wr100 {
  float: right;
  width: 100px;
}
.d0926 .test6 .wl100 {
  float: left;
  width: 100px;
}
.d0926 .test6 .all2 {
  width: calc(100% - 200px - 2em);
  margin: 0 1em;
}

.d0927 {
  text-align: center;
}
.d0927 div {
  margin: 4px;
  border: #cccccc solid 1px;
  padding: 4px;
}
.d0927 div:hover {
  border: red solid 1px;
}
.d0927 .f12px {
  font-size: 12px;
}
.d0927 .f13px {
  font-size: 13px;
}
.d0927 .f14px {
  font-size: 14px;
}
.d0927 .f15px {
  font-size: 15px;
}
.d0927 .fLarge {
  font-size: large;
}
.d0927 .f1em {
  font-size: 1.1em;
}
.d0927 .f2em {
  font-size: 1.2em;
}
.d0927 .f3em {
  font-size: 1.3em;
}
.d0927 .f4em {
  font-size: 1.4em;
}
.d0927 .f1rem {
  font-size: 1.1rem;
}
.d0927 .f2rem {
  font-size: 1.2rem;
}
.d0927 .f3rem {
  font-size: 1.3rem;
}
.d0927 .f4rem {
  font-size: 1.4rem;
}
.d0927 section {
  display: inline-block;
  background: orange;
}
.d0927 img {
  border: #cccccc 1px solid;
}
.d0927 .px {
  margin: 0 8px;
  width: 100px;
  height: 100px;
}
.d0927 .vw {
  width: 10vw;
  height: 10vw;
  margin: 0 8px;
}

.d0928 div {
  text-shadow: 1px 1px 0 #aaaaaa;
}
.d0928 .test1::-moz-selection {
  background: black;
  color: white;
}
.d0928 .test1::selection {
  background: black;
  color: white;
}
.d0928 .test2::-moz-selection {
  background: red;
  color: white;
  text-shadow: none;
}
.d0928 .test2::selection {
  background: red;
  color: white;
  text-shadow: none;
}
.d0928 .test3 {
  text-shadow: none;
  font-size: 1.5em;
  line-height: 1.8em;
  background: white;
}
.d0928 .test3::-moz-selection {
  background: transparent;
  color: transparent;
  text-shadow: none;
}
.d0928 .test3::selection {
  background: transparent;
  color: transparent;
  text-shadow: none;
}
.d0928 .test3 span::-moz-selection {
  background: transparent;
  color: red;
  text-shadow: none;
}
.d0928 .test3 span::selection {
  background: transparent;
  color: red;
  text-shadow: none;
}

.d0929 {
  overflow: hidden;
  *zoom: 1;
}
.d0929.lightbox:target {
  display: table;
}
.d0929.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}
.d0929.lightbox figure {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.d0929.lightbox figure figcaption {
  display: inline-block;
  margin: auto;
  padding: 15px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
.d0929 .circles:target {
  animation: ifinityCircles 3s linear infinite;
  -webkit-animation: ifinityCircles 3s linear infinite;
}
.d0929 .circles {
  display: block;
  float: right;
  background: -webkit-linear-gradient(45deg, #557777 50%, transparent 50%), -webkit-linear-gradient(90deg, #ee6655 100%, transparent 100%), -webkit-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -webkit-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -webkit-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -webkit-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -webkit-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -webkit-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -moz-linear-gradient(45deg, #557777 50%, transparent 50%), -moz-linear-gradient(90deg, #ee6655 100%, transparent 100%), -moz-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -moz-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -moz-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -moz-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -moz-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -moz-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -o-linear-gradient(45deg, #557777 50%, transparent 50%), -o-linear-gradient(90deg, #ee6655 100%, transparent 100%), -o-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -o-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -o-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -o-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -o-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -o-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: linear-gradient(45deg, #557777 50%, transparent 50%), linear-gradient(90deg, #ee6655 100%, transparent 100%), linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  width: 150px;
  height: 150px;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  line-height: 150px;
  color: white;
  text-align: center;
  outline: none;
}

@-webkit-keyframes ifinityCircles {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.d0930 .demo1, .d0930 .demo2, .d0930 .demo3, .d0930 .demo4, .d0930 .d1004 .demo5, .d1004 .d0930 .demo5, .d0930 .d1004 .demo6, .d1004 .d0930 .demo6, .d0930 .d1004 .demo7, .d1004 .d0930 .demo7, .d0930 .d1011 .demo0, .d1011 .d0930 .demo0, .d0930 .d1011 .demo5, .d1011 .d0930 .demo5 {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  background: orange;
  border: solid 1px #dddddd;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.d0930 .demo5, .d0930 .demo6, .d0930 .demo7 {
  height: 150px;
  width: 100%;
  margin: 20px auto;
  position: relative;
  line-height: 150px;
  text-align: center;
  font-size: 2em;
  color: #555555;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d0930 .demo1:hover {
  -webkit-box-shadow: 120px 0 0 rgba(255, 165, 0, 0.8), -120px 0 0 rgba(255, 165, 0, 0.5);
  -moz-box-shadow: 120px 0 0 rgba(255, 165, 0, 0.8), -120px 0 0 rgba(255, 165, 0, 0.5);
  box-shadow: 120px 0 0 rgba(255, 165, 0, 0.8), -120px 0 0 rgba(255, 165, 0, 0.5);
}
.d0930 .demo2:hover {
  -webkit-box-shadow: 120px 0 8px 10px rgba(255, 165, 0, 0.8), -120px 0 8px 10px rgba(255, 165, 0, 0.5);
  -moz-box-shadow: 120px 0 8px 10px rgba(255, 165, 0, 0.8), -120px 0 8px 10px rgba(255, 165, 0, 0.5);
  box-shadow: 120px 0 8px 10px rgba(255, 165, 0, 0.8), -120px 0 8px 10px rgba(255, 165, 0, 0.5);
}
.d0930 .demo3 {
  background: white;
}
.d0930 .demo3:hover {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.d0930 .demo4 {
  background: white;
}
.d0930 .demo4:hover {
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) inset;
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) inset;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) inset;
}
.d0930 .demo5 {
  background: white;
}
.d0930 .demo5:hover {
  background: rgba(255, 255, 255, 0.3);
}
.d0930 .demo5:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 20px;
  z-index: -1;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.d0930 .demo6 {
  background: white;
}
.d0930 .demo6:hover {
  background: rgba(255, 255, 255, 0.3);
}
.d0930 .demo6:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  top: 0;
  z-index: -1;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 30%;
  -moz-border-radius: 30%;
  -ms-border-radius: 30%;
  -o-border-radius: 30%;
  border-radius: 30%;
}
.d0930 .demo7 {
  background: white;
  position: relative;
  display: block;
}
.d0930 .demo7:hover {
  background: rgba(255, 255, 255, 0.3);
}
.d0930 .demo7:after, .d0930 .demo7:before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  bottom: 6px;
  width: 50%;
  height: 20%;
  max-height: 20px;
  z-index: -1;
  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px;
  -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px;
  box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px;
}
.d0930 .demo7:after {
  right: 5px;
  left: auto;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}
.d0930 .demo7:before {
  left: 5px;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.d1001 {
  font-size: 8em;
  font-weight: bold;
  line-height: 1em;
  text-shadow: none;
  color: #34ffff;
  color: white;
  overflow: hidden;
  background: #eb775d;
}
.d1001 div.test {
  text-shadow: 1px 1px 0 rgba(87, 129, 153, 0.95), 2px 2px 0 rgba(87, 129, 153, 0.5), 3px 3px 0 rgba(87, 129, 153, 0.35), 4px 4px 0 rgba(87, 129, 153, 0.275), 5px 5px 0 rgba(87, 129, 153, 0.23), 6px 6px 0 rgba(87, 129, 153, 0.2), 7px 7px 0 rgba(87, 129, 153, 0.17857), 8px 8px 0 rgba(87, 129, 153, 0.1625), 9px 9px 0 rgba(87, 129, 153, 0.15), 10px 10px 0 rgba(87, 129, 153, 0.14), 11px 11px 0 rgba(87, 129, 153, 0.13182), 12px 12px 0 rgba(87, 129, 153, 0.125), 13px 13px 0 rgba(87, 129, 153, 0.11923), 14px 14px 0 rgba(87, 129, 153, 0.11429), 15px 15px 0 rgba(87, 129, 153, 0.11), 16px 16px 0 rgba(87, 129, 153, 0.10625), 17px 17px 0 rgba(87, 129, 153, 0.10294), 18px 18px 0 rgba(87, 129, 153, 0.1), 19px 19px 0 rgba(87, 129, 153, 0.09737), 20px 20px 0 rgba(87, 129, 153, 0.095), 21px 21px 0 rgba(87, 129, 153, 0.09286), 22px 22px 0 rgba(87, 129, 153, 0.09091), 23px 23px 0 rgba(87, 129, 153, 0.08913), 24px 24px 0 rgba(87, 129, 153, 0.0875), 25px 25px 0 rgba(87, 129, 153, 0.086), 26px 26px 0 rgba(87, 129, 153, 0.08462), 27px 27px 0 rgba(87, 129, 153, 0.08333), 28px 28px 0 rgba(87, 129, 153, 0.08214), 29px 29px 0 rgba(87, 129, 153, 0.08103), 30px 30px 0 rgba(87, 129, 153, 0.08), 31px 31px 0 rgba(87, 129, 153, 0.07903), 32px 32px 0 rgba(87, 129, 153, 0.07813), 33px 33px 0 rgba(87, 129, 153, 0.07727), 34px 34px 0 rgba(87, 129, 153, 0.07647), 35px 35px 0 rgba(87, 129, 153, 0.07571), 36px 36px 0 rgba(87, 129, 153, 0.075), 37px 37px 0 rgba(87, 129, 153, 0.07432), 38px 38px 0 rgba(87, 129, 153, 0.07368), 39px 39px 0 rgba(87, 129, 153, 0.07308), 40px 40px 0 rgba(87, 129, 153, 0.0725);
  -webkit-box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
  -moz-box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
  box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
  margin: 25px auto;
  background: #25aae2;
  width: 1em;
  height: 1em;
  padding: 0.1em;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
}
.d1001 .test1 {
  margin: 25px auto;
  width: 1em;
  height: 1em;
  padding: 0.1em;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(239, 89, 54, 0.95), 2px 2px 0 rgba(239, 89, 54, 0.5), 3px 3px 0 rgba(239, 89, 54, 0.35), 4px 4px 0 rgba(239, 89, 54, 0.275), 5px 5px 0 rgba(239, 89, 54, 0.23), 6px 6px 0 rgba(239, 89, 54, 0.2), 7px 7px 0 rgba(239, 89, 54, 0.17857), 8px 8px 0 rgba(239, 89, 54, 0.1625), 9px 9px 0 rgba(239, 89, 54, 0.15), 10px 10px 0 rgba(239, 89, 54, 0.14), 11px 11px 0 rgba(239, 89, 54, 0.13182), 12px 12px 0 rgba(239, 89, 54, 0.125), 13px 13px 0 rgba(239, 89, 54, 0.11923), 14px 14px 0 rgba(239, 89, 54, 0.11429), 15px 15px 0 rgba(239, 89, 54, 0.11), 16px 16px 0 rgba(239, 89, 54, 0.10625), 17px 17px 0 rgba(239, 89, 54, 0.10294), 18px 18px 0 rgba(239, 89, 54, 0.1), 19px 19px 0 rgba(239, 89, 54, 0.09737), 20px 20px 0 rgba(239, 89, 54, 0.095), 21px 21px 0 rgba(239, 89, 54, 0.09286), 22px 22px 0 rgba(239, 89, 54, 0.09091), 23px 23px 0 rgba(239, 89, 54, 0.08913), 24px 24px 0 rgba(239, 89, 54, 0.0875), 25px 25px 0 rgba(239, 89, 54, 0.086), 26px 26px 0 rgba(239, 89, 54, 0.08462), 27px 27px 0 rgba(239, 89, 54, 0.08333), 28px 28px 0 rgba(239, 89, 54, 0.08214), 29px 29px 0 rgba(239, 89, 54, 0.08103), 30px 30px 0 rgba(239, 89, 54, 0.08), 31px 31px 0 rgba(239, 89, 54, 0.07903), 32px 32px 0 rgba(239, 89, 54, 0.07813), 33px 33px 0 rgba(239, 89, 54, 0.07727), 34px 34px 0 rgba(239, 89, 54, 0.07647), 35px 35px 0 rgba(239, 89, 54, 0.07571), 36px 36px 0 rgba(239, 89, 54, 0.075), 37px 37px 0 rgba(239, 89, 54, 0.07432), 38px 38px 0 rgba(239, 89, 54, 0.07368), 39px 39px 0 rgba(239, 89, 54, 0.07308), 40px 40px 0 rgba(239, 89, 54, 0.0725);
}
.d1001 .test2 {
  -webkit-box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
  -moz-box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
  box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
  margin: 25px auto;
  background: #25aae2;
  width: 1em;
  height: 1em;
  padding: 0.1em;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
}
.d1001 .test3 {
  text-shadow: 1px 1px 0 rgba(87, 129, 153, 0.95), 2px 2px 0 rgba(87, 129, 153, 0.5), 3px 3px 0 rgba(87, 129, 153, 0.35), 4px 4px 0 rgba(87, 129, 153, 0.275), 5px 5px 0 rgba(87, 129, 153, 0.23), 6px 6px 0 rgba(87, 129, 153, 0.2), 7px 7px 0 rgba(87, 129, 153, 0.17857), 8px 8px 0 rgba(87, 129, 153, 0.1625), 9px 9px 0 rgba(87, 129, 153, 0.15), 10px 10px 0 rgba(87, 129, 153, 0.14), 11px 11px 0 rgba(87, 129, 153, 0.13182), 12px 12px 0 rgba(87, 129, 153, 0.125), 13px 13px 0 rgba(87, 129, 153, 0.11923), 14px 14px 0 rgba(87, 129, 153, 0.11429), 15px 15px 0 rgba(87, 129, 153, 0.11), 16px 16px 0 rgba(87, 129, 153, 0.10625), 17px 17px 0 rgba(87, 129, 153, 0.10294), 18px 18px 0 rgba(87, 129, 153, 0.1), 19px 19px 0 rgba(87, 129, 153, 0.09737), 20px 20px 0 rgba(87, 129, 153, 0.095), 21px 21px 0 rgba(87, 129, 153, 0.09286), 22px 22px 0 rgba(87, 129, 153, 0.09091), 23px 23px 0 rgba(87, 129, 153, 0.08913), 24px 24px 0 rgba(87, 129, 153, 0.0875), 25px 25px 0 rgba(87, 129, 153, 0.086), 26px 26px 0 rgba(87, 129, 153, 0.08462), 27px 27px 0 rgba(87, 129, 153, 0.08333), 28px 28px 0 rgba(87, 129, 153, 0.08214), 29px 29px 0 rgba(87, 129, 153, 0.08103), 30px 30px 0 rgba(87, 129, 153, 0.08), 31px 31px 0 rgba(87, 129, 153, 0.07903), 32px 32px 0 rgba(87, 129, 153, 0.07813), 33px 33px 0 rgba(87, 129, 153, 0.07727), 34px 34px 0 rgba(87, 129, 153, 0.07647), 35px 35px 0 rgba(87, 129, 153, 0.07571), 36px 36px 0 rgba(87, 129, 153, 0.075), 37px 37px 0 rgba(87, 129, 153, 0.07432), 38px 38px 0 rgba(87, 129, 153, 0.07368), 39px 39px 0 rgba(87, 129, 153, 0.07308), 40px 40px 0 rgba(87, 129, 153, 0.0725);
  margin: 25px auto;
  background: #25aae2;
  width: 1em;
  height: 1em;
  padding: 0.1em;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
}
.d1001 .test4 {
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
  margin: 25px auto;
  background: #25aae2;
  width: 1em;
  height: 1em;
  padding: 0.1em;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
}
.d1001 .test4:hover {
  text-shadow: 1px 1px 0 rgba(87, 129, 153, 0.95), 2px 2px 0 rgba(87, 129, 153, 0.5), 3px 3px 0 rgba(87, 129, 153, 0.35), 4px 4px 0 rgba(87, 129, 153, 0.275), 5px 5px 0 rgba(87, 129, 153, 0.23), 6px 6px 0 rgba(87, 129, 153, 0.2), 7px 7px 0 rgba(87, 129, 153, 0.17857), 8px 8px 0 rgba(87, 129, 153, 0.1625), 9px 9px 0 rgba(87, 129, 153, 0.15), 10px 10px 0 rgba(87, 129, 153, 0.14), 11px 11px 0 rgba(87, 129, 153, 0.13182), 12px 12px 0 rgba(87, 129, 153, 0.125), 13px 13px 0 rgba(87, 129, 153, 0.11923), 14px 14px 0 rgba(87, 129, 153, 0.11429), 15px 15px 0 rgba(87, 129, 153, 0.11), 16px 16px 0 rgba(87, 129, 153, 0.10625), 17px 17px 0 rgba(87, 129, 153, 0.10294), 18px 18px 0 rgba(87, 129, 153, 0.1), 19px 19px 0 rgba(87, 129, 153, 0.09737), 20px 20px 0 rgba(87, 129, 153, 0.095), 21px 21px 0 rgba(87, 129, 153, 0.09286), 22px 22px 0 rgba(87, 129, 153, 0.09091), 23px 23px 0 rgba(87, 129, 153, 0.08913), 24px 24px 0 rgba(87, 129, 153, 0.0875), 25px 25px 0 rgba(87, 129, 153, 0.086), 26px 26px 0 rgba(87, 129, 153, 0.08462), 27px 27px 0 rgba(87, 129, 153, 0.08333), 28px 28px 0 rgba(87, 129, 153, 0.08214), 29px 29px 0 rgba(87, 129, 153, 0.08103), 30px 30px 0 rgba(87, 129, 153, 0.08), 31px 31px 0 rgba(87, 129, 153, 0.07903), 32px 32px 0 rgba(87, 129, 153, 0.07813), 33px 33px 0 rgba(87, 129, 153, 0.07727), 34px 34px 0 rgba(87, 129, 153, 0.07647), 35px 35px 0 rgba(87, 129, 153, 0.07571), 36px 36px 0 rgba(87, 129, 153, 0.075), 37px 37px 0 rgba(87, 129, 153, 0.07432), 38px 38px 0 rgba(87, 129, 153, 0.07368), 39px 39px 0 rgba(87, 129, 153, 0.07308), 40px 40px 0 rgba(87, 129, 153, 0.0725);
  -webkit-box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
  -moz-box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
  box-shadow: 1px 1px 0 #e03912, 2px 2px 0 rgba(224, 57, 18, 0.5), 3px 3px 0 rgba(224, 57, 18, 0.33333), 4px 4px 0 rgba(224, 57, 18, 0.25), 5px 5px 0 rgba(224, 57, 18, 0.2), 6px 6px 0 rgba(224, 57, 18, 0.16667), 7px 7px 0 rgba(224, 57, 18, 0.14286), 8px 8px 0 rgba(224, 57, 18, 0.125), 9px 9px 0 rgba(224, 57, 18, 0.11111), 10px 10px 0 rgba(224, 57, 18, 0.1), 11px 11px 0 rgba(224, 57, 18, 0.09091), 12px 12px 0 rgba(224, 57, 18, 0.08333), 13px 13px 0 rgba(224, 57, 18, 0.07692), 14px 14px 0 rgba(224, 57, 18, 0.07143), 15px 15px 0 rgba(224, 57, 18, 0.06667), 16px 16px 0 rgba(224, 57, 18, 0.0625), 17px 17px 0 rgba(224, 57, 18, 0.05882), 18px 18px 0 rgba(224, 57, 18, 0.05556), 19px 19px 0 rgba(224, 57, 18, 0.05263), 20px 20px 0 rgba(224, 57, 18, 0.05), 21px 21px 0 rgba(224, 57, 18, 0.04762), 22px 22px 0 rgba(224, 57, 18, 0.04545), 23px 23px 0 rgba(224, 57, 18, 0.04348), 24px 24px 0 rgba(224, 57, 18, 0.04167), 25px 25px 0 rgba(224, 57, 18, 0.04), 26px 26px 0 rgba(224, 57, 18, 0.03846), 27px 27px 0 rgba(224, 57, 18, 0.03704), 28px 28px 0 rgba(224, 57, 18, 0.03571), 29px 29px 0 rgba(224, 57, 18, 0.03448), 30px 30px 0 rgba(224, 57, 18, 0.03333), 31px 31px 0 rgba(224, 57, 18, 0.03226), 32px 32px 0 rgba(224, 57, 18, 0.03125), 33px 33px 0 rgba(224, 57, 18, 0.0303), 34px 34px 0 rgba(224, 57, 18, 0.02941), 35px 35px 0 rgba(224, 57, 18, 0.02857), 36px 36px 0 rgba(224, 57, 18, 0.02778), 37px 37px 0 rgba(224, 57, 18, 0.02703), 38px 38px 0 rgba(224, 57, 18, 0.02632), 39px 39px 0 rgba(224, 57, 18, 0.02564), 40px 40px 0 rgba(224, 57, 18, 0.025), 41px 41px 0 rgba(224, 57, 18, 0.02439), 42px 42px 0 rgba(224, 57, 18, 0.02381), 43px 43px 0 rgba(224, 57, 18, 0.02326), 44px 44px 0 rgba(224, 57, 18, 0.02273), 45px 45px 0 rgba(224, 57, 18, 0.02222), 46px 46px 0 rgba(224, 57, 18, 0.02174), 47px 47px 0 rgba(224, 57, 18, 0.02128), 48px 48px 0 rgba(224, 57, 18, 0.02083), 49px 49px 0 rgba(224, 57, 18, 0.02041), 50px 50px 0 rgba(224, 57, 18, 0.02), 51px 51px 0 rgba(224, 57, 18, 0.01961), 52px 52px 0 rgba(224, 57, 18, 0.01923), 53px 53px 0 rgba(224, 57, 18, 0.01887), 54px 54px 0 rgba(224, 57, 18, 0.01852), 55px 55px 0 rgba(224, 57, 18, 0.01818), 56px 56px 0 rgba(224, 57, 18, 0.01786), 57px 57px 0 rgba(224, 57, 18, 0.01754), 58px 58px 0 rgba(224, 57, 18, 0.01724), 59px 59px 0 rgba(224, 57, 18, 0.01695), 60px 60px 0 rgba(224, 57, 18, 0.01667), 61px 61px 0 rgba(224, 57, 18, 0.01639), 62px 62px 0 rgba(224, 57, 18, 0.01613), 63px 63px 0 rgba(224, 57, 18, 0.01587), 64px 64px 0 rgba(224, 57, 18, 0.01563), 65px 65px 0 rgba(224, 57, 18, 0.01538), 66px 66px 0 rgba(224, 57, 18, 0.01515), 67px 67px 0 rgba(224, 57, 18, 0.01493), 68px 68px 0 rgba(224, 57, 18, 0.01471), 69px 69px 0 rgba(224, 57, 18, 0.01449), 70px 70px 0 rgba(224, 57, 18, 0.01429), 71px 71px 0 rgba(224, 57, 18, 0.01408), 72px 72px 0 rgba(224, 57, 18, 0.01389), 73px 73px 0 rgba(224, 57, 18, 0.0137), 74px 74px 0 rgba(224, 57, 18, 0.01351), 75px 75px 0 rgba(224, 57, 18, 0.01333), 76px 76px 0 rgba(224, 57, 18, 0.01316), 77px 77px 0 rgba(224, 57, 18, 0.01299), 78px 78px 0 rgba(224, 57, 18, 0.01282), 79px 79px 0 rgba(224, 57, 18, 0.01266), 80px 80px 0 rgba(224, 57, 18, 0.0125);
}

.solar-system {
  background: black;
}
.solar-system .system {
  width: 670px;
  height: 670px;
  max-width: 100%;
  display: flex;
  margin: auto;
}
.solar-system .system article {
  width: calc(100% - 5em);
  height: calc(100% - 5em);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #cccccc;
  display: flex;
  margin: auto;
}

.d1002 .demo1 {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: red;
  -webkit-transition: background 1s;
  -moz-transition: background 1s;
  -o-transition: background 1s;
  transition: background 1s;
}
.d1002 .demo1:hover {
  background: blue;
}
.d1002:hover > div {
  margin-left: calc(100% - 50px);
}
.d1002 div {
  width: 50px;
  height: 50px;
  background: red;
  -webkit-transition-property: margin-left;
  -moz-transition-property: margin-left;
  -o-transition-property: margin-left;
  transition-property: margin-left;
  -webkit-transition-duration: 5s;
  -moz-transition-duration: 5s;
  -o-transition-duration: 5s;
  transition-duration: 5s;
}
.d1002 div + div {
  margin-top: 5px;
}
.d1002 .timing1 {
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}
.d1002 .timing2 {
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.d1002 .timing3 {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.d1002 .timing4 {
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.d1002 .timing5 {
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
}
.d1002 .timing6 {
  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
  -moz-transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
  -o-transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
  transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
}
.d1002 .timing7 {
  -webkit-transition-timing-function: step-start;
  -moz-transition-timing-function: step-start;
  -o-transition-timing-function: step-start;
  transition-timing-function: step-start;
}
.d1002 .timing8 {
  -webkit-transition-timing-function: step-end;
  -moz-transition-timing-function: step-end;
  -o-transition-timing-function: step-end;
  transition-timing-function: step-end;
}
.d1002 .timing9 {
  -webkit-transition-timing-function: steps(4, end);
  -moz-transition-timing-function: steps(4, end);
  -o-transition-timing-function: steps(4, end);
  transition-timing-function: steps(4, end);
}
.d1002 .timing11 {
  -webkit-transition-timing-function: inherit;
  -moz-transition-timing-function: inherit;
  -o-transition-timing-function: inherit;
  transition-timing-function: inherit;
}
.d1002 .ryu {
  width: 131px;
  height: 100px;
  background: url("/images/20131002.png") left bottom no-repeat;
  -webkit-transition: background 1s;
  -moz-transition: background 1s;
  -o-transition: background 1s;
  transition: background 1s;
  -webkit-transition-timing-function: steps(13, end);
  -moz-transition-timing-function: steps(13, end);
  -o-transition-timing-function: steps(13, end);
  transition-timing-function: steps(13, end);
}
.d1002 .ryu:hover {
  background-position: right bottom;
}
.d1002 .ryu2 {
  width: 131px;
  height: 100px;
  background: url("/images/20131002.png") no-repeat;
  animation: ryu 1s infinite alternate;
  -webkit-animation: ryu 1s infinite alternate;
  animation-timing-function: steps(13, end);
  -webkit-animation-timing-function: steps(13, end);
}

@-webkit-keyframes ryu {
  from {
    background-position: left bottom;
  }

  to {
    background-position: right bottom;
  }
}

@font-face {
  font-family: "Kavoon-Regular";
  src: url('/stylesheets/fonts/Kavoon-Regular.ttf') format('truetype');
}

.d1003 {
  line-height: 2em;
  font-size: 2em;
}
.d1003 .webfont1 {
  font-family: Kavoon-Regular;
}
.d1003 .webfont2 {
  font-family: "The Girl Next Door", cursive;
}
.d1003 .webfont3 {
  font-family: "Frijole", cursive;
}

.d1004 .demo1, .d1004 .demo2, .d1004 .demo3, .d1004 .demo4, .d1004 .demo5, .d1004 .demo6, .d1004 .demo7, .d1004 .d1011 .demo0, .d1011 .d1004 .demo0 {
  line-height: 120px;
  height: 120px;
}
.d1004 .demo1 {
  font-size: 50px;
}
.d1004 .demo2 {
  font-size: 50px;
  color: #00acee;
}
.d1004 .demo3 {
  font-size: 50px;
  font-style: italic;
  color: #00acee;
}
.d1004 .demo4 {
  font-size: 50px;
  color: white;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.d1004 .demo5 {
  background: gray;
  font-size: 50px;
  color: white;
  padding: 20px;
  text-shadow: 1px 1px 0 #dddddd, 2px 2px 0 gainsboro, 3px 3px 0 #dadada, 4px 4px 0 #d9d9d9, 5px 5px 0 #d7d7d7, 6px 6px 0 #d5d5d5, 7px 7px 0 #d4d4d4, 8px 8px 0 #d2d2d2, 9px 9px 0 #d1d1d1, 10px 10px 0 #cfcfcf, 11px 11px 0 #cdcdcd, 12px 12px 0 #cccccc, 13px 13px 0 #cacaca, 14px 14px 0 #c9c9c9, 15px 15px 0 #c7c7c7, 16px 16px 1px rgba(0, 0, 0, 0.3), 17px 17px 10px rgba(0, 0, 0, 0.6);
}
.d1004 .demo6 {
  font-size: 40px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  color: #00acee;
}
.d1004 .demo6:hover {
  font-size: 50px;
}
.d1004 .demo7 {
  font-size: 50px;
}
.d1004 .demo7 .lsf {
  -webkit-font-smoothing: none;
  -moz-font-smoothing: none;
  -ms-font-smoothing: none;
  -o-font-smoothing: none;
  font-smoothing: none;
}

@font-face {
  font-family: "drangon";
  src: url('/stylesheets/fonts/normal');
  src: url('/stylesheets/fonts/normal?#iefix') format('eot'), url('/stylesheets/fonts/icomoon.eot') format('embedded-opentype'), url('/stylesheets/fonts/icomoon.ttf') format('truetype'), url('/stylesheets/fonts/icomoon.woff') format('woff'), url('/stylesheets/fonts/icomoon.svg') format('svg');
  font-weight: normal;
}

.d1005 {
  font-size: 5em;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.d1005 .drangon-icon {
  font-family: "drangon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-transition: color 0.6s;
  -moz-transition: color 0.6s;
  -o-transition: color 0.6s;
  transition: color 0.6s;
}
.d1005 .drangon-icon:hover {
  color: #00acee;
}
.d1005 [data-drangon]:before {
  font-family: "drangon";
  content: attr(data-drangon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.d1005 .drangon-icon-drangonball {
  font-family: "drangon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.d1005 .drangon-icon-drangonball:before {
  content: "\67";
}

.d1006 div {
  text-align: center;
}
.d1006 .demo1 img {
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.d1006 .demo2 img {
  -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
.d1006 .demo3 img {
  -webkit-filter: contrast(300%);
  -moz-filter: contrast(300%);
  filter: contrast(300%);
}
.d1006 .demo4 img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d1006 .demo4 img:hover {
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  filter: grayscale(0);
}
.d1006 .demo5 img {
  -webkit-filter: hue-rotate(180deg);
  -moz-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
.d1006 .demo6 img {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: blur(10px);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d1006 .demo6 img:hover {
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  filter: blur(0);
}

.d1007 .demo1 div {
  height: 22px;
  line-height: 22px;
  padding: 8px;
  border: 1px dashed orange;
  margin-bottom: 8px;
  color: white;
  text-align: center;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}
.d1007 .demo1 div:last-child {
  margin-bottom: 0;
}
.d1007 .demo1 div:hover {
  background: orange;
}
.d1007 .demo1 div:hover:before {
  content: "Present";
}
.d1007 .demo1 div:hover ~ div {
  background: #b0095c;
}
.d1007 .demo1 div:hover ~ div:before {
  content: "After";
}
.d1007 .demo2 label, .d1007 .demo3 label, .d1007 .d1008 .demo1, .d1008 .d1007 .demo1, .d1007 .d1008 .demo2, .d1008 .d1007 .demo2, .d1007 .d1009 .demo0 .box, .d1009 .demo0 .d1007 .box, .d1007 .d1009 .demo0 .d1010 .rotate, .d1009 .demo0 .d1010 .d1007 .rotate, .d1007 .d1010 .d1009 .demo0 .rotate, .d1010 .d1009 .demo0 .d1007 .rotate, .d1007 .d1009 .demo0 .d1010 .rotate2, .d1009 .demo0 .d1010 .d1007 .rotate2, .d1007 .d1010 .d1009 .demo0 .rotate2, .d1010 .d1009 .demo0 .d1007 .rotate2, .d1007 .d1009 .demo0 .d1010 .rotate3, .d1009 .demo0 .d1010 .d1007 .rotate3, .d1007 .d1010 .d1009 .demo0 .rotate3, .d1010 .d1009 .demo0 .d1007 .rotate3, .d1007 .d1009 .demo0 .d1010 .rotate4, .d1009 .demo0 .d1010 .d1007 .rotate4, .d1007 .d1010 .d1009 .demo0 .rotate4, .d1010 .d1009 .demo0 .d1007 .rotate4, .d1007 .d1009 .demo0 .d1010 .scale, .d1009 .demo0 .d1010 .d1007 .scale, .d1007 .d1010 .d1009 .demo0 .scale, .d1010 .d1009 .demo0 .d1007 .scale, .d1007 .d1009 .demo0 .d1010 .scale2, .d1009 .demo0 .d1010 .d1007 .scale2, .d1007 .d1010 .d1009 .demo0 .scale2, .d1010 .d1009 .demo0 .d1007 .scale2, .d1007 .d1009 .demo1 .box, .d1009 .demo1 .d1007 .box, .d1007 .d1009 .demo1 .d1010 .rotate, .d1009 .demo1 .d1010 .d1007 .rotate, .d1007 .d1010 .d1009 .demo1 .rotate, .d1010 .d1009 .demo1 .d1007 .rotate, .d1007 .d1009 .demo1 .d1010 .rotate2, .d1009 .demo1 .d1010 .d1007 .rotate2, .d1007 .d1010 .d1009 .demo1 .rotate2, .d1010 .d1009 .demo1 .d1007 .rotate2, .d1007 .d1009 .demo1 .d1010 .rotate3, .d1009 .demo1 .d1010 .d1007 .rotate3, .d1007 .d1010 .d1009 .demo1 .rotate3, .d1010 .d1009 .demo1 .d1007 .rotate3, .d1007 .d1009 .demo1 .d1010 .rotate4, .d1009 .demo1 .d1010 .d1007 .rotate4, .d1007 .d1010 .d1009 .demo1 .rotate4, .d1010 .d1009 .demo1 .d1007 .rotate4, .d1007 .d1009 .demo1 .d1010 .scale, .d1009 .demo1 .d1010 .d1007 .scale, .d1007 .d1010 .d1009 .demo1 .scale, .d1010 .d1009 .demo1 .d1007 .scale, .d1007 .d1009 .demo1 .d1010 .scale2, .d1009 .demo1 .d1010 .d1007 .scale2, .d1007 .d1010 .d1009 .demo1 .scale2, .d1010 .d1009 .demo1 .d1007 .scale2, .d1007 .d1009 .demo2 .box, .d1009 .demo2 .d1007 .box, .d1007 .d1009 .demo2 .d1010 .rotate, .d1009 .demo2 .d1010 .d1007 .rotate, .d1007 .d1010 .d1009 .demo2 .rotate, .d1010 .d1009 .demo2 .d1007 .rotate, .d1007 .d1009 .demo2 .d1010 .rotate2, .d1009 .demo2 .d1010 .d1007 .rotate2, .d1007 .d1010 .d1009 .demo2 .rotate2, .d1010 .d1009 .demo2 .d1007 .rotate2, .d1007 .d1009 .demo2 .d1010 .rotate3, .d1009 .demo2 .d1010 .d1007 .rotate3, .d1007 .d1010 .d1009 .demo2 .rotate3, .d1010 .d1009 .demo2 .d1007 .rotate3, .d1007 .d1009 .demo2 .d1010 .rotate4, .d1009 .demo2 .d1010 .d1007 .rotate4, .d1007 .d1010 .d1009 .demo2 .rotate4, .d1010 .d1009 .demo2 .d1007 .rotate4, .d1007 .d1009 .demo2 .d1010 .scale, .d1009 .demo2 .d1010 .d1007 .scale, .d1007 .d1010 .d1009 .demo2 .scale, .d1010 .d1009 .demo2 .d1007 .scale, .d1007 .d1009 .demo2 .d1010 .scale2, .d1009 .demo2 .d1010 .d1007 .scale2, .d1007 .d1010 .d1009 .demo2 .scale2, .d1010 .d1009 .demo2 .d1007 .scale2, .d1007 .d1009 .demo3 .box, .d1009 .demo3 .d1007 .box, .d1007 .d1009 .demo3 .d1010 .rotate, .d1009 .demo3 .d1010 .d1007 .rotate, .d1007 .d1010 .d1009 .demo3 .rotate, .d1010 .d1009 .demo3 .d1007 .rotate, .d1007 .d1009 .demo3 .d1010 .rotate2, .d1009 .demo3 .d1010 .d1007 .rotate2, .d1007 .d1010 .d1009 .demo3 .rotate2, .d1010 .d1009 .demo3 .d1007 .rotate2, .d1007 .d1009 .demo3 .d1010 .rotate3, .d1009 .demo3 .d1010 .d1007 .rotate3, .d1007 .d1010 .d1009 .demo3 .rotate3, .d1010 .d1009 .demo3 .d1007 .rotate3, .d1007 .d1009 .demo3 .d1010 .rotate4, .d1009 .demo3 .d1010 .d1007 .rotate4, .d1007 .d1010 .d1009 .demo3 .rotate4, .d1010 .d1009 .demo3 .d1007 .rotate4, .d1007 .d1009 .demo3 .d1010 .scale, .d1009 .demo3 .d1010 .d1007 .scale, .d1007 .d1010 .d1009 .demo3 .scale, .d1010 .d1009 .demo3 .d1007 .scale, .d1007 .d1009 .demo3 .d1010 .scale2, .d1009 .demo3 .d1010 .d1007 .scale2, .d1007 .d1010 .d1009 .demo3 .scale2, .d1010 .d1009 .demo3 .d1007 .scale2, .d1007 .d1009 .demo4 .box, .d1009 .demo4 .d1007 .box, .d1007 .d1009 .demo4 .d1010 .rotate, .d1009 .demo4 .d1010 .d1007 .rotate, .d1007 .d1010 .d1009 .demo4 .rotate, .d1010 .d1009 .demo4 .d1007 .rotate, .d1007 .d1009 .demo4 .d1010 .rotate2, .d1009 .demo4 .d1010 .d1007 .rotate2, .d1007 .d1010 .d1009 .demo4 .rotate2, .d1010 .d1009 .demo4 .d1007 .rotate2, .d1007 .d1009 .demo4 .d1010 .rotate3, .d1009 .demo4 .d1010 .d1007 .rotate3, .d1007 .d1010 .d1009 .demo4 .rotate3, .d1010 .d1009 .demo4 .d1007 .rotate3, .d1007 .d1009 .demo4 .d1010 .rotate4, .d1009 .demo4 .d1010 .d1007 .rotate4, .d1007 .d1010 .d1009 .demo4 .rotate4, .d1010 .d1009 .demo4 .d1007 .rotate4, .d1007 .d1009 .demo4 .d1010 .scale, .d1009 .demo4 .d1010 .d1007 .scale, .d1007 .d1010 .d1009 .demo4 .scale, .d1010 .d1009 .demo4 .d1007 .scale, .d1007 .d1009 .demo4 .d1010 .scale2, .d1009 .demo4 .d1010 .d1007 .scale2, .d1007 .d1010 .d1009 .demo4 .scale2, .d1010 .d1009 .demo4 .d1007 .scale2, .d1007 .d1009 .demo5 .box, .d1009 .demo5 .d1007 .box, .d1007 .d1009 .demo5 .d1010 .rotate, .d1009 .demo5 .d1010 .d1007 .rotate, .d1007 .d1010 .d1009 .demo5 .rotate, .d1010 .d1009 .demo5 .d1007 .rotate, .d1007 .d1009 .demo5 .d1010 .rotate2, .d1009 .demo5 .d1010 .d1007 .rotate2, .d1007 .d1010 .d1009 .demo5 .rotate2, .d1010 .d1009 .demo5 .d1007 .rotate2, .d1007 .d1009 .demo5 .d1010 .rotate3, .d1009 .demo5 .d1010 .d1007 .rotate3, .d1007 .d1010 .d1009 .demo5 .rotate3, .d1010 .d1009 .demo5 .d1007 .rotate3, .d1007 .d1009 .demo5 .d1010 .rotate4, .d1009 .demo5 .d1010 .d1007 .rotate4, .d1007 .d1010 .d1009 .demo5 .rotate4, .d1010 .d1009 .demo5 .d1007 .rotate4, .d1007 .d1009 .demo5 .d1010 .scale, .d1009 .demo5 .d1010 .d1007 .scale, .d1007 .d1010 .d1009 .demo5 .scale, .d1010 .d1009 .demo5 .d1007 .scale, .d1007 .d1009 .demo5 .d1010 .scale2, .d1009 .demo5 .d1010 .d1007 .scale2, .d1007 .d1010 .d1009 .demo5 .scale2, .d1010 .d1009 .demo5 .d1007 .scale2, .d1007 .d1009 .demo6 .box, .d1009 .demo6 .d1007 .box, .d1007 .d1009 .demo6 .d1010 .rotate, .d1009 .demo6 .d1010 .d1007 .rotate, .d1007 .d1010 .d1009 .demo6 .rotate, .d1010 .d1009 .demo6 .d1007 .rotate, .d1007 .d1009 .demo6 .d1010 .rotate2, .d1009 .demo6 .d1010 .d1007 .rotate2, .d1007 .d1010 .d1009 .demo6 .rotate2, .d1010 .d1009 .demo6 .d1007 .rotate2, .d1007 .d1009 .demo6 .d1010 .rotate3, .d1009 .demo6 .d1010 .d1007 .rotate3, .d1007 .d1010 .d1009 .demo6 .rotate3, .d1010 .d1009 .demo6 .d1007 .rotate3, .d1007 .d1009 .demo6 .d1010 .rotate4, .d1009 .demo6 .d1010 .d1007 .rotate4, .d1007 .d1010 .d1009 .demo6 .rotate4, .d1010 .d1009 .demo6 .d1007 .rotate4, .d1007 .d1009 .demo6 .d1010 .scale, .d1009 .demo6 .d1010 .d1007 .scale, .d1007 .d1010 .d1009 .demo6 .scale, .d1010 .d1009 .demo6 .d1007 .scale, .d1007 .d1009 .demo6 .d1010 .scale2, .d1009 .demo6 .d1010 .d1007 .scale2, .d1007 .d1010 .d1009 .demo6 .scale2, .d1010 .d1009 .demo6 .d1007 .scale2, .d1007 .d1009 .demo7 .box, .d1009 .demo7 .d1007 .box, .d1007 .d1009 .demo7 .d1010 .rotate, .d1009 .demo7 .d1010 .d1007 .rotate, .d1007 .d1010 .d1009 .demo7 .rotate, .d1010 .d1009 .demo7 .d1007 .rotate, .d1007 .d1009 .demo7 .d1010 .rotate2, .d1009 .demo7 .d1010 .d1007 .rotate2, .d1007 .d1010 .d1009 .demo7 .rotate2, .d1010 .d1009 .demo7 .d1007 .rotate2, .d1007 .d1009 .demo7 .d1010 .rotate3, .d1009 .demo7 .d1010 .d1007 .rotate3, .d1007 .d1010 .d1009 .demo7 .rotate3, .d1010 .d1009 .demo7 .d1007 .rotate3, .d1007 .d1009 .demo7 .d1010 .rotate4, .d1009 .demo7 .d1010 .d1007 .rotate4, .d1007 .d1010 .d1009 .demo7 .rotate4, .d1010 .d1009 .demo7 .d1007 .rotate4, .d1007 .d1009 .demo7 .d1010 .scale, .d1009 .demo7 .d1010 .d1007 .scale, .d1007 .d1010 .d1009 .demo7 .scale, .d1010 .d1009 .demo7 .d1007 .scale, .d1007 .d1009 .demo7 .d1010 .scale2, .d1009 .demo7 .d1010 .d1007 .scale2, .d1007 .d1010 .d1009 .demo7 .scale2, .d1010 .d1009 .demo7 .d1007 .scale2 {
  width: 100px;
  height: 100px;
  text-align: center;
  color: white;
  display: block;
}
.d1007 .demo2 {
  overflow: hidden;
  *zoom: 1;
}
.d1007 .demo2 [type="checkbox"]:checked ~ label {
  background: #b0095c;
}
.d1007 .demo2 [type="checkbox"]:checked ~ label:before {
  content: "Checkbox is checked.";
}
.d1007 .demo2 label {
  float: right;
  background: orange;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}
.d1007 .demo2 label:before {
  content: "Click me";
}
.d1007 .demo3 {
  overflow: hidden;
  *zoom: 1;
}
.d1007 .demo3 [type="checkbox"] {
  display: none;
}
.d1007 .demo3 [type="checkbox"]:checked + label {
  background: #b0095c;
}
.d1007 .demo3 [type="checkbox"]:checked + label:before {
  content: "Checkbox is checked.";
}
.d1007 .demo3 [type="checkbox"]:checked + label ~ .circles {
  animation: ifinityCircles 3s linear infinite;
  -webkit-animation: ifinityCircles 3s linear infinite;
}
.d1007 .demo3 label {
  float: left;
  background: orange;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}
.d1007 .demo3 label:before {
  content: "Click me";
}
.d1007 .demo3 .circles {
  float: right;
  display: block;
  background: -webkit-linear-gradient(45deg, #557777 50%, transparent 50%), -webkit-linear-gradient(90deg, #ee6655 100%, transparent 100%), -webkit-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -webkit-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -webkit-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -webkit-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -webkit-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -webkit-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -moz-linear-gradient(45deg, #557777 50%, transparent 50%), -moz-linear-gradient(90deg, #ee6655 100%, transparent 100%), -moz-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -moz-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -moz-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -moz-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -moz-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -moz-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -o-linear-gradient(45deg, #557777 50%, transparent 50%), -o-linear-gradient(90deg, #ee6655 100%, transparent 100%), -o-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -o-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -o-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -o-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -o-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -o-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: linear-gradient(45deg, #557777 50%, transparent 50%), linear-gradient(90deg, #ee6655 100%, transparent 100%), linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  width: 150px;
  height: 150px;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  line-height: 150px;
  color: white;
  text-align: center;
  outline: none;
}

@-webkit-keyframes ifinityCube {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }

  to {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

.d1008 label {
  cursor: pointer;
}
.d1008 .d1007 .demo2 label, .d1007 .demo2 .d1008 label, .d1008 .d1007 .demo3 label, .d1007 .demo3 .d1008 label, .d1008 .demo1, .d1008 .demo2, .d1008 .d1009 .demo0 .box, .d1009 .demo0 .d1008 .box, .d1008 .d1009 .demo0 .d1010 .rotate, .d1009 .demo0 .d1010 .d1008 .rotate, .d1008 .d1010 .d1009 .demo0 .rotate, .d1010 .d1009 .demo0 .d1008 .rotate, .d1008 .d1009 .demo0 .d1010 .rotate2, .d1009 .demo0 .d1010 .d1008 .rotate2, .d1008 .d1010 .d1009 .demo0 .rotate2, .d1010 .d1009 .demo0 .d1008 .rotate2, .d1008 .d1009 .demo0 .d1010 .rotate3, .d1009 .demo0 .d1010 .d1008 .rotate3, .d1008 .d1010 .d1009 .demo0 .rotate3, .d1010 .d1009 .demo0 .d1008 .rotate3, .d1008 .d1009 .demo0 .d1010 .rotate4, .d1009 .demo0 .d1010 .d1008 .rotate4, .d1008 .d1010 .d1009 .demo0 .rotate4, .d1010 .d1009 .demo0 .d1008 .rotate4, .d1008 .d1009 .demo0 .d1010 .scale, .d1009 .demo0 .d1010 .d1008 .scale, .d1008 .d1010 .d1009 .demo0 .scale, .d1010 .d1009 .demo0 .d1008 .scale, .d1008 .d1009 .demo0 .d1010 .scale2, .d1009 .demo0 .d1010 .d1008 .scale2, .d1008 .d1010 .d1009 .demo0 .scale2, .d1010 .d1009 .demo0 .d1008 .scale2, .d1008 .d1009 .demo1 .box, .d1009 .demo1 .d1008 .box, .d1008 .d1009 .demo1 .d1010 .rotate, .d1009 .demo1 .d1010 .d1008 .rotate, .d1008 .d1010 .d1009 .demo1 .rotate, .d1010 .d1009 .demo1 .d1008 .rotate, .d1008 .d1009 .demo1 .d1010 .rotate2, .d1009 .demo1 .d1010 .d1008 .rotate2, .d1008 .d1010 .d1009 .demo1 .rotate2, .d1010 .d1009 .demo1 .d1008 .rotate2, .d1008 .d1009 .demo1 .d1010 .rotate3, .d1009 .demo1 .d1010 .d1008 .rotate3, .d1008 .d1010 .d1009 .demo1 .rotate3, .d1010 .d1009 .demo1 .d1008 .rotate3, .d1008 .d1009 .demo1 .d1010 .rotate4, .d1009 .demo1 .d1010 .d1008 .rotate4, .d1008 .d1010 .d1009 .demo1 .rotate4, .d1010 .d1009 .demo1 .d1008 .rotate4, .d1008 .d1009 .demo1 .d1010 .scale, .d1009 .demo1 .d1010 .d1008 .scale, .d1008 .d1010 .d1009 .demo1 .scale, .d1010 .d1009 .demo1 .d1008 .scale, .d1008 .d1009 .demo1 .d1010 .scale2, .d1009 .demo1 .d1010 .d1008 .scale2, .d1008 .d1010 .d1009 .demo1 .scale2, .d1010 .d1009 .demo1 .d1008 .scale2, .d1008 .d1009 .demo2 .box, .d1009 .demo2 .d1008 .box, .d1008 .d1009 .demo2 .d1010 .rotate, .d1009 .demo2 .d1010 .d1008 .rotate, .d1008 .d1010 .d1009 .demo2 .rotate, .d1010 .d1009 .demo2 .d1008 .rotate, .d1008 .d1009 .demo2 .d1010 .rotate2, .d1009 .demo2 .d1010 .d1008 .rotate2, .d1008 .d1010 .d1009 .demo2 .rotate2, .d1010 .d1009 .demo2 .d1008 .rotate2, .d1008 .d1009 .demo2 .d1010 .rotate3, .d1009 .demo2 .d1010 .d1008 .rotate3, .d1008 .d1010 .d1009 .demo2 .rotate3, .d1010 .d1009 .demo2 .d1008 .rotate3, .d1008 .d1009 .demo2 .d1010 .rotate4, .d1009 .demo2 .d1010 .d1008 .rotate4, .d1008 .d1010 .d1009 .demo2 .rotate4, .d1010 .d1009 .demo2 .d1008 .rotate4, .d1008 .d1009 .demo2 .d1010 .scale, .d1009 .demo2 .d1010 .d1008 .scale, .d1008 .d1010 .d1009 .demo2 .scale, .d1010 .d1009 .demo2 .d1008 .scale, .d1008 .d1009 .demo2 .d1010 .scale2, .d1009 .demo2 .d1010 .d1008 .scale2, .d1008 .d1010 .d1009 .demo2 .scale2, .d1010 .d1009 .demo2 .d1008 .scale2, .d1008 .d1009 .demo3 .box, .d1009 .demo3 .d1008 .box, .d1008 .d1009 .demo3 .d1010 .rotate, .d1009 .demo3 .d1010 .d1008 .rotate, .d1008 .d1010 .d1009 .demo3 .rotate, .d1010 .d1009 .demo3 .d1008 .rotate, .d1008 .d1009 .demo3 .d1010 .rotate2, .d1009 .demo3 .d1010 .d1008 .rotate2, .d1008 .d1010 .d1009 .demo3 .rotate2, .d1010 .d1009 .demo3 .d1008 .rotate2, .d1008 .d1009 .demo3 .d1010 .rotate3, .d1009 .demo3 .d1010 .d1008 .rotate3, .d1008 .d1010 .d1009 .demo3 .rotate3, .d1010 .d1009 .demo3 .d1008 .rotate3, .d1008 .d1009 .demo3 .d1010 .rotate4, .d1009 .demo3 .d1010 .d1008 .rotate4, .d1008 .d1010 .d1009 .demo3 .rotate4, .d1010 .d1009 .demo3 .d1008 .rotate4, .d1008 .d1009 .demo3 .d1010 .scale, .d1009 .demo3 .d1010 .d1008 .scale, .d1008 .d1010 .d1009 .demo3 .scale, .d1010 .d1009 .demo3 .d1008 .scale, .d1008 .d1009 .demo3 .d1010 .scale2, .d1009 .demo3 .d1010 .d1008 .scale2, .d1008 .d1010 .d1009 .demo3 .scale2, .d1010 .d1009 .demo3 .d1008 .scale2, .d1008 .d1009 .demo4 .box, .d1009 .demo4 .d1008 .box, .d1008 .d1009 .demo4 .d1010 .rotate, .d1009 .demo4 .d1010 .d1008 .rotate, .d1008 .d1010 .d1009 .demo4 .rotate, .d1010 .d1009 .demo4 .d1008 .rotate, .d1008 .d1009 .demo4 .d1010 .rotate2, .d1009 .demo4 .d1010 .d1008 .rotate2, .d1008 .d1010 .d1009 .demo4 .rotate2, .d1010 .d1009 .demo4 .d1008 .rotate2, .d1008 .d1009 .demo4 .d1010 .rotate3, .d1009 .demo4 .d1010 .d1008 .rotate3, .d1008 .d1010 .d1009 .demo4 .rotate3, .d1010 .d1009 .demo4 .d1008 .rotate3, .d1008 .d1009 .demo4 .d1010 .rotate4, .d1009 .demo4 .d1010 .d1008 .rotate4, .d1008 .d1010 .d1009 .demo4 .rotate4, .d1010 .d1009 .demo4 .d1008 .rotate4, .d1008 .d1009 .demo4 .d1010 .scale, .d1009 .demo4 .d1010 .d1008 .scale, .d1008 .d1010 .d1009 .demo4 .scale, .d1010 .d1009 .demo4 .d1008 .scale, .d1008 .d1009 .demo4 .d1010 .scale2, .d1009 .demo4 .d1010 .d1008 .scale2, .d1008 .d1010 .d1009 .demo4 .scale2, .d1010 .d1009 .demo4 .d1008 .scale2, .d1008 .d1009 .demo5 .box, .d1009 .demo5 .d1008 .box, .d1008 .d1009 .demo5 .d1010 .rotate, .d1009 .demo5 .d1010 .d1008 .rotate, .d1008 .d1010 .d1009 .demo5 .rotate, .d1010 .d1009 .demo5 .d1008 .rotate, .d1008 .d1009 .demo5 .d1010 .rotate2, .d1009 .demo5 .d1010 .d1008 .rotate2, .d1008 .d1010 .d1009 .demo5 .rotate2, .d1010 .d1009 .demo5 .d1008 .rotate2, .d1008 .d1009 .demo5 .d1010 .rotate3, .d1009 .demo5 .d1010 .d1008 .rotate3, .d1008 .d1010 .d1009 .demo5 .rotate3, .d1010 .d1009 .demo5 .d1008 .rotate3, .d1008 .d1009 .demo5 .d1010 .rotate4, .d1009 .demo5 .d1010 .d1008 .rotate4, .d1008 .d1010 .d1009 .demo5 .rotate4, .d1010 .d1009 .demo5 .d1008 .rotate4, .d1008 .d1009 .demo5 .d1010 .scale, .d1009 .demo5 .d1010 .d1008 .scale, .d1008 .d1010 .d1009 .demo5 .scale, .d1010 .d1009 .demo5 .d1008 .scale, .d1008 .d1009 .demo5 .d1010 .scale2, .d1009 .demo5 .d1010 .d1008 .scale2, .d1008 .d1010 .d1009 .demo5 .scale2, .d1010 .d1009 .demo5 .d1008 .scale2, .d1008 .d1009 .demo6 .box, .d1009 .demo6 .d1008 .box, .d1008 .d1009 .demo6 .d1010 .rotate, .d1009 .demo6 .d1010 .d1008 .rotate, .d1008 .d1010 .d1009 .demo6 .rotate, .d1010 .d1009 .demo6 .d1008 .rotate, .d1008 .d1009 .demo6 .d1010 .rotate2, .d1009 .demo6 .d1010 .d1008 .rotate2, .d1008 .d1010 .d1009 .demo6 .rotate2, .d1010 .d1009 .demo6 .d1008 .rotate2, .d1008 .d1009 .demo6 .d1010 .rotate3, .d1009 .demo6 .d1010 .d1008 .rotate3, .d1008 .d1010 .d1009 .demo6 .rotate3, .d1010 .d1009 .demo6 .d1008 .rotate3, .d1008 .d1009 .demo6 .d1010 .rotate4, .d1009 .demo6 .d1010 .d1008 .rotate4, .d1008 .d1010 .d1009 .demo6 .rotate4, .d1010 .d1009 .demo6 .d1008 .rotate4, .d1008 .d1009 .demo6 .d1010 .scale, .d1009 .demo6 .d1010 .d1008 .scale, .d1008 .d1010 .d1009 .demo6 .scale, .d1010 .d1009 .demo6 .d1008 .scale, .d1008 .d1009 .demo6 .d1010 .scale2, .d1009 .demo6 .d1010 .d1008 .scale2, .d1008 .d1010 .d1009 .demo6 .scale2, .d1010 .d1009 .demo6 .d1008 .scale2, .d1008 .d1009 .demo7 .box, .d1009 .demo7 .d1008 .box, .d1008 .d1009 .demo7 .d1010 .rotate, .d1009 .demo7 .d1010 .d1008 .rotate, .d1008 .d1010 .d1009 .demo7 .rotate, .d1010 .d1009 .demo7 .d1008 .rotate, .d1008 .d1009 .demo7 .d1010 .rotate2, .d1009 .demo7 .d1010 .d1008 .rotate2, .d1008 .d1010 .d1009 .demo7 .rotate2, .d1010 .d1009 .demo7 .d1008 .rotate2, .d1008 .d1009 .demo7 .d1010 .rotate3, .d1009 .demo7 .d1010 .d1008 .rotate3, .d1008 .d1010 .d1009 .demo7 .rotate3, .d1010 .d1009 .demo7 .d1008 .rotate3, .d1008 .d1009 .demo7 .d1010 .rotate4, .d1009 .demo7 .d1010 .d1008 .rotate4, .d1008 .d1010 .d1009 .demo7 .rotate4, .d1010 .d1009 .demo7 .d1008 .rotate4, .d1008 .d1009 .demo7 .d1010 .scale, .d1009 .demo7 .d1010 .d1008 .scale, .d1008 .d1010 .d1009 .demo7 .scale, .d1010 .d1009 .demo7 .d1008 .scale, .d1008 .d1009 .demo7 .d1010 .scale2, .d1009 .demo7 .d1010 .d1008 .scale2, .d1008 .d1010 .d1009 .demo7 .scale2, .d1010 .d1009 .demo7 .d1008 .scale2 {
  width: 150px;
  height: 150px;
  text-align: center;
  color: white;
  display: block;
  background: #b0095c;
  margin: 0 auto;
  white-space: pre;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d1008 .circles {
  display: block;
  float: left;
  background: -webkit-linear-gradient(45deg, #557777 50%, transparent 50%), -webkit-linear-gradient(90deg, #ee6655 100%, transparent 100%), -webkit-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -webkit-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -webkit-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -webkit-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -webkit-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -webkit-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -moz-linear-gradient(45deg, #557777 50%, transparent 50%), -moz-linear-gradient(90deg, #ee6655 100%, transparent 100%), -moz-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -moz-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -moz-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -moz-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -moz-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -moz-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: -o-linear-gradient(45deg, #557777 50%, transparent 50%), -o-linear-gradient(90deg, #ee6655 100%, transparent 100%), -o-linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, -o-linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, -o-linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, -o-linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, -o-linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, -o-linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  background: linear-gradient(45deg, #557777 50%, transparent 50%), linear-gradient(90deg, #ee6655 100%, transparent 100%), linear-gradient(135deg, #ffeebb 50%, transparent 50%) 100% 0%, linear-gradient(180deg, #ffcc55 100%, transparent 100%) 100% 0%, linear-gradient(225deg, #ffaa22 50%, transparent 50%) 100% 100%, linear-gradient(270deg, #ccddaa 100%, transparent 100%) 100% 100%, linear-gradient(315deg, #77aa88 50%, transparent 50%) 0% 100%, linear-gradient(360deg, #99cc99 100%, transparent 100%) 0% 100%;
  width: 150px;
  height: 150px;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  line-height: 150px;
  color: white;
  text-align: center;
  outline: none;
}
.d1008 .demo1:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.d1008 .demo2:hover {
  -webkit-transform: scale(2, 2);
  -moz-transform: scale(2, 2);
  -ms-transform: scale(2, 2);
  -o-transform: scale(2, 2);
  transform: scale(2, 2);
}
.d1008 .demo3 {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.d1008 .demo3 [type="checkbox"] {
  display: none;
}
.d1008 .demo3 [type="checkbox"]:checked ~ .cube {
  animation: ifinityCube 10s linear infinite;
  -webkit-animation: ifinityCube 10s linear infinite;
}
.d1008 .demo3 .cube {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
}
.d1008 .demo3 .cube div {
  width: 146px;
  height: 146px;
  border: 2px solid #555555;
  position: absolute;
}
.d1008 .demo4 {
  position: relative;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.d1008 .demo4 #b1:checked ~ .cube {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.d1008 .demo4 #b2:checked ~ .cube {
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
.d1008 .demo4 #b3:checked ~ .cube {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.d1008 .demo4 #b4:checked ~ .cube {
  -webkit-transform: rotateX(270deg);
  -moz-transform: rotateX(270deg);
  -ms-transform: rotateX(270deg);
  -o-transform: rotateX(270deg);
  transform: rotateX(270deg);
}
.d1008 .demo4 #b5:checked ~ .cube {
  -webkit-transform: rotateX(0deg) rotateY(270deg);
  -moz-transform: rotateX(0deg) rotateY(270deg);
  -ms-transform: rotateX(0deg) rotateY(270deg);
  -o-transform: rotateX(0deg) rotateY(270deg);
  transform: rotateX(0deg) rotateY(270deg);
}
.d1008 .demo4 #b6:checked ~ .cube {
  -webkit-transform: rotateX(0deg) rotateY(90deg);
  -moz-transform: rotateX(0deg) rotateY(90deg);
  -ms-transform: rotateX(0deg) rotateY(90deg);
  -o-transform: rotateX(0deg) rotateY(90deg);
  transform: rotateX(0deg) rotateY(90deg);
}
.d1008 .demo4 .cube {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  color: white;
  font-size: 40px;
  line-height: 150px;
  text-align: center;
}
.d1008 .demo4 .cube div {
  width: 146px;
  height: 146px;
  border: 2px solid #555555;
  position: absolute;
}
.d1008 .front {
  background: rgba(255, 0, 0, 0.5);
  -webkit-transform: rotateY(0deg) translateZ(75px);
  -moz-transform: rotateY(0deg) translateZ(75px);
  -ms-transform: rotateY(0deg) translateZ(75px);
  -o-transform: rotateY(0deg) translateZ(75px);
  transform: rotateY(0deg) translateZ(75px);
}
.d1008 .back {
  background: rgba(255, 255, 0, 0.5);
  -webkit-transform: rotateX(180deg) translateZ(75px);
  -moz-transform: rotateX(180deg) translateZ(75px);
  -ms-transform: rotateX(180deg) translateZ(75px);
  -o-transform: rotateX(180deg) translateZ(75px);
  transform: rotateX(180deg) translateZ(75px);
}
.d1008 .right {
  background: rgba(0, 255, 0, 0.5);
  -webkit-transform: rotateY(90deg) translateZ(75px);
  -moz-transform: rotateY(90deg) translateZ(75px);
  -ms-transform: rotateY(90deg) translateZ(75px);
  -o-transform: rotateY(90deg) translateZ(75px);
  transform: rotateY(90deg) translateZ(75px);
}
.d1008 .left {
  background: rgba(0, 255, 255, 0.5);
  -webkit-transform: rotateY(-90deg) translateZ(75px);
  -moz-transform: rotateY(-90deg) translateZ(75px);
  -ms-transform: rotateY(-90deg) translateZ(75px);
  -o-transform: rotateY(-90deg) translateZ(75px);
  transform: rotateY(-90deg) translateZ(75px);
}
.d1008 .top {
  background: rgba(0, 0, 255, 0.5);
  -webkit-transform: rotateX(90deg) translateZ(75px);
  -moz-transform: rotateX(90deg) translateZ(75px);
  -ms-transform: rotateX(90deg) translateZ(75px);
  -o-transform: rotateX(90deg) translateZ(75px);
  transform: rotateX(90deg) translateZ(75px);
}
.d1008 .bottom {
  background: rgba(255, 0, 255, 0.5);
  -webkit-transform: rotateX(-90deg) translateZ(75px);
  -moz-transform: rotateX(-90deg) translateZ(75px);
  -ms-transform: rotateX(-90deg) translateZ(75px);
  -o-transform: rotateX(-90deg) translateZ(75px);
  transform: rotateX(-90deg) translateZ(75px);
}
.d1008 .control {
  text-align: center;
  margin-top: 40px;
}
.d1008 .demo5 {
  position: relative;
}
.d1008 .demo5 ul {
  overflow: hidden;
  *zoom: 1;
  background: #b0095c;
}
.d1008 .demo5 ul li {
  float: left;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.d1008 .demo5 ul li a {
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  text-align: center;
  display: inline-block;
  color: white;
  position: relative;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.d1008 .demo5 ul li a:after {
  content: attr(data-menu);
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #4f0429;
  position: absolute;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.d1008 .demo5 ul li a:hover {
  -webkit-transform: rotateX(90deg) translateZ(20px);
  -moz-transform: rotateX(90deg) translateZ(20px);
  -ms-transform: rotateX(90deg) translateZ(20px);
  -o-transform: rotateX(90deg) translateZ(20px);
  transform: rotateX(90deg) translateZ(20px);
}

@-webkit-keyframes Rline {
  30% {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
  }

  100% {
    -webkit-transform: rotate(30deg) translateX(200px);
    -moz-transform: rotate(30deg) translateX(200px);
    -ms-transform: rotate(30deg) translateX(200px);
    -o-transform: rotate(30deg) translateX(200px);
    transform: rotate(30deg) translateX(200px);
  }
}

@-webkit-keyframes Zline {
  30% {
    -webkit-transform: rotateY(90deg) rotateX(-10deg);
    -moz-transform: rotateY(90deg) rotateX(-10deg);
    -ms-transform: rotateY(90deg) rotateX(-10deg);
    -o-transform: rotateY(90deg) rotateX(-10deg);
    transform: rotateY(90deg) rotateX(-10deg);
  }

  100% {
    -webkit-transform: rotateY(90deg) rotateX(-10deg) translateZ(500px);
    -moz-transform: rotateY(90deg) rotateX(-10deg) translateZ(500px);
    -ms-transform: rotateY(90deg) rotateX(-10deg) translateZ(500px);
    -o-transform: rotateY(90deg) rotateX(-10deg) translateZ(500px);
    transform: rotateY(90deg) rotateX(-10deg) translateZ(500px);
  }
}

.d1009 {
  padding: 80px !important;
}
.d1009 .d1007 .demo2 label, .d1007 .demo2 .d1009 label, .d1009 .d1007 .demo3 label, .d1007 .demo3 .d1009 label, .d1009 .d1008 .demo1, .d1008 .d1009 .demo1, .d1009 .d1008 .demo2, .d1008 .d1009 .demo2, .d1009 .demo0 .box, .d1009 .demo0 .d1010 .rotate, .d1010 .d1009 .demo0 .rotate, .d1009 .demo0 .d1010 .rotate2, .d1010 .d1009 .demo0 .rotate2, .d1009 .demo0 .d1010 .rotate3, .d1010 .d1009 .demo0 .rotate3, .d1009 .demo0 .d1010 .rotate4, .d1010 .d1009 .demo0 .rotate4, .d1009 .demo0 .d1010 .scale, .d1010 .d1009 .demo0 .scale, .d1009 .demo0 .d1010 .scale2, .d1010 .d1009 .demo0 .scale2, .d1009 .demo1 .box, .d1009 .demo1 .d1010 .rotate, .d1010 .d1009 .demo1 .rotate, .d1009 .demo1 .d1010 .rotate2, .d1010 .d1009 .demo1 .rotate2, .d1009 .demo1 .d1010 .rotate3, .d1010 .d1009 .demo1 .rotate3, .d1009 .demo1 .d1010 .rotate4, .d1010 .d1009 .demo1 .rotate4, .d1009 .demo1 .d1010 .scale, .d1010 .d1009 .demo1 .scale, .d1009 .demo1 .d1010 .scale2, .d1010 .d1009 .demo1 .scale2, .d1009 .demo2 .box, .d1009 .demo2 .d1010 .rotate, .d1010 .d1009 .demo2 .rotate, .d1009 .demo2 .d1010 .rotate2, .d1010 .d1009 .demo2 .rotate2, .d1009 .demo2 .d1010 .rotate3, .d1010 .d1009 .demo2 .rotate3, .d1009 .demo2 .d1010 .rotate4, .d1010 .d1009 .demo2 .rotate4, .d1009 .demo2 .d1010 .scale, .d1010 .d1009 .demo2 .scale, .d1009 .demo2 .d1010 .scale2, .d1010 .d1009 .demo2 .scale2, .d1009 .demo3 .box, .d1009 .demo3 .d1010 .rotate, .d1010 .d1009 .demo3 .rotate, .d1009 .demo3 .d1010 .rotate2, .d1010 .d1009 .demo3 .rotate2, .d1009 .demo3 .d1010 .rotate3, .d1010 .d1009 .demo3 .rotate3, .d1009 .demo3 .d1010 .rotate4, .d1010 .d1009 .demo3 .rotate4, .d1009 .demo3 .d1010 .scale, .d1010 .d1009 .demo3 .scale, .d1009 .demo3 .d1010 .scale2, .d1010 .d1009 .demo3 .scale2, .d1009 .demo4 .box, .d1009 .demo4 .d1010 .rotate, .d1010 .d1009 .demo4 .rotate, .d1009 .demo4 .d1010 .rotate2, .d1010 .d1009 .demo4 .rotate2, .d1009 .demo4 .d1010 .rotate3, .d1010 .d1009 .demo4 .rotate3, .d1009 .demo4 .d1010 .rotate4, .d1010 .d1009 .demo4 .rotate4, .d1009 .demo4 .d1010 .scale, .d1010 .d1009 .demo4 .scale, .d1009 .demo4 .d1010 .scale2, .d1010 .d1009 .demo4 .scale2, .d1009 .demo5 .box, .d1009 .demo5 .d1010 .rotate, .d1010 .d1009 .demo5 .rotate, .d1009 .demo5 .d1010 .rotate2, .d1010 .d1009 .demo5 .rotate2, .d1009 .demo5 .d1010 .rotate3, .d1010 .d1009 .demo5 .rotate3, .d1009 .demo5 .d1010 .rotate4, .d1010 .d1009 .demo5 .rotate4, .d1009 .demo5 .d1010 .scale, .d1010 .d1009 .demo5 .scale, .d1009 .demo5 .d1010 .scale2, .d1010 .d1009 .demo5 .scale2, .d1009 .demo6 .box, .d1009 .demo6 .d1010 .rotate, .d1010 .d1009 .demo6 .rotate, .d1009 .demo6 .d1010 .rotate2, .d1010 .d1009 .demo6 .rotate2, .d1009 .demo6 .d1010 .rotate3, .d1010 .d1009 .demo6 .rotate3, .d1009 .demo6 .d1010 .rotate4, .d1010 .d1009 .demo6 .rotate4, .d1009 .demo6 .d1010 .scale, .d1010 .d1009 .demo6 .scale, .d1009 .demo6 .d1010 .scale2, .d1010 .d1009 .demo6 .scale2, .d1009 .demo7 .box, .d1009 .demo7 .d1010 .rotate, .d1010 .d1009 .demo7 .rotate, .d1009 .demo7 .d1010 .rotate2, .d1010 .d1009 .demo7 .rotate2, .d1009 .demo7 .d1010 .rotate3, .d1010 .d1009 .demo7 .rotate3, .d1009 .demo7 .d1010 .rotate4, .d1010 .d1009 .demo7 .rotate4, .d1009 .demo7 .d1010 .scale, .d1010 .d1009 .demo7 .scale, .d1009 .demo7 .d1010 .scale2, .d1010 .d1009 .demo7 .scale2 {
  width: 150px;
  height: 150px;
  text-align: center;
  position: relative;
  color: white;
  display: block;
  background: #b0095c;
  margin: 0 auto;
  white-space: pre;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
.d1009 .xline, .d1009 .yline, .d1009 .zline, .d1009 .d1010 .topLine, .d1010 .d1009 .topLine, .d1009 .d1010 .middleLine, .d1010 .d1009 .middleLine, .d1009 .d1010 .bottomLine, .d1010 .d1009 .bottomLine {
  border-top: orange solid 1px;
  position: absolute;
  color: black;
  top: 50%;
  left: 50%;
  width: 60%;
  text-align: right;
  z-index: 5;
}
.d1009 .xline:before, .d1009 .yline:before, .d1009 .zline:before, .d1009 .d1010 .topLine:before, .d1010 .d1009 .topLine:before, .d1009 .d1010 .middleLine:before, .d1010 .d1009 .middleLine:before, .d1009 .d1010 .bottomLine:before, .d1010 .d1009 .bottomLine:before {
  content: attr(data-line);
}
.d1009 .yline {
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.d1009 .zline {
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}
.d1009 .demo2 {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  -ms-perspective: 300px;
  -o-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.d1009 .demo2 .box, .d1009 .demo2 .d1010 .rotate, .d1010 .d1009 .demo2 .rotate, .d1009 .demo2 .d1010 .rotate2, .d1010 .d1009 .demo2 .rotate2, .d1009 .demo2 .d1010 .rotate3, .d1010 .d1009 .demo2 .rotate3, .d1009 .demo2 .d1010 .rotate4, .d1010 .d1009 .demo2 .rotate4, .d1009 .demo2 .d1010 .scale, .d1010 .d1009 .demo2 .scale, .d1009 .demo2 .d1010 .scale2, .d1010 .d1009 .demo2 .scale2 {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(60deg);
  -moz-transform: rotateY(60deg);
  -ms-transform: rotateY(60deg);
  -o-transform: rotateY(60deg);
  transform: rotateY(60deg);
}
.d1009 .demo3:hover .box, .d1009 .demo3:hover .d1010 .rotate, .d1010 .d1009 .demo3:hover .rotate, .d1009 .demo3:hover .d1010 .rotate2, .d1010 .d1009 .demo3:hover .rotate2, .d1009 .demo3:hover .d1010 .rotate3, .d1010 .d1009 .demo3:hover .rotate3, .d1009 .demo3:hover .d1010 .rotate4, .d1010 .d1009 .demo3:hover .rotate4, .d1009 .demo3:hover .d1010 .scale, .d1010 .d1009 .demo3:hover .scale, .d1009 .demo3:hover .d1010 .scale2, .d1010 .d1009 .demo3:hover .scale2 {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.d1009 .demo3:hover .box, .d1009 .demo3:hover .d1010 .rotate, .d1010 .d1009 .demo3:hover .rotate, .d1009 .demo3:hover .d1010 .rotate2, .d1010 .d1009 .demo3:hover .rotate2, .d1009 .demo3:hover .d1010 .rotate3, .d1010 .d1009 .demo3:hover .rotate3, .d1009 .demo3:hover .d1010 .rotate4, .d1010 .d1009 .demo3:hover .rotate4, .d1009 .demo3:hover .d1010 .scale, .d1010 .d1009 .demo3:hover .scale, .d1009 .demo3:hover .d1010 .scale2, .d1010 .d1009 .demo3:hover .scale2 {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.d1009 .demo4:hover .box, .d1009 .demo4:hover .d1010 .rotate, .d1010 .d1009 .demo4:hover .rotate, .d1009 .demo4:hover .d1010 .rotate2, .d1010 .d1009 .demo4:hover .rotate2, .d1009 .demo4:hover .d1010 .rotate3, .d1010 .d1009 .demo4:hover .rotate3, .d1009 .demo4:hover .d1010 .rotate4, .d1010 .d1009 .demo4:hover .rotate4, .d1009 .demo4:hover .d1010 .scale, .d1010 .d1009 .demo4:hover .scale, .d1009 .demo4:hover .d1010 .scale2, .d1010 .d1009 .demo4:hover .scale2 {
  -webkit-transform: translateX(100%) rotate(30deg);
  -moz-transform: translateX(100%) rotate(30deg);
  -ms-transform: translateX(100%) rotate(30deg);
  -o-transform: translateX(100%) rotate(30deg);
  transform: translateX(100%) rotate(30deg);
}
.d1009 .demo5 .box, .d1009 .demo5 .d1010 .rotate, .d1010 .d1009 .demo5 .rotate, .d1009 .demo5 .d1010 .rotate2, .d1010 .d1009 .demo5 .rotate2, .d1009 .demo5 .d1010 .rotate3, .d1010 .d1009 .demo5 .rotate3, .d1009 .demo5 .d1010 .rotate4, .d1010 .d1009 .demo5 .rotate4, .d1009 .demo5 .d1010 .scale, .d1010 .d1009 .demo5 .scale, .d1009 .demo5 .d1010 .scale2, .d1010 .d1009 .demo5 .scale2 {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation: Rline 2s alternate infinite;
  -webkit-animation: Rline 2s alternate infinite;
}
.d1009 .demo6 {
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
}
.d1009 .demo6 .box, .d1009 .demo6 .d1010 .rotate, .d1010 .d1009 .demo6 .rotate, .d1009 .demo6 .d1010 .rotate2, .d1010 .d1009 .demo6 .rotate2, .d1009 .demo6 .d1010 .rotate3, .d1010 .d1009 .demo6 .rotate3, .d1009 .demo6 .d1010 .rotate4, .d1010 .d1009 .demo6 .rotate4, .d1009 .demo6 .d1010 .scale, .d1010 .d1009 .demo6 .scale, .d1009 .demo6 .d1010 .scale2, .d1010 .d1009 .demo6 .scale2 {
  margin: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
.d1009 .demo6:hover .box, .d1009 .demo6:hover .d1010 .rotate, .d1010 .d1009 .demo6:hover .rotate, .d1009 .demo6:hover .d1010 .rotate2, .d1010 .d1009 .demo6:hover .rotate2, .d1009 .demo6:hover .d1010 .rotate3, .d1010 .d1009 .demo6:hover .rotate3, .d1009 .demo6:hover .d1010 .rotate4, .d1010 .d1009 .demo6:hover .rotate4, .d1009 .demo6:hover .d1010 .scale, .d1010 .d1009 .demo6:hover .scale, .d1009 .demo6:hover .d1010 .scale2, .d1010 .d1009 .demo6:hover .scale2 {
  -webkit-transform: rotateY(90deg) translateZ(500px);
  -moz-transform: rotateY(90deg) translateZ(500px);
  -ms-transform: rotateY(90deg) translateZ(500px);
  -o-transform: rotateY(90deg) translateZ(500px);
  transform: rotateY(90deg) translateZ(500px);
}
.d1009 .demo7 {
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
}
.d1009 .demo7 .box, .d1009 .demo7 .d1010 .rotate, .d1010 .d1009 .demo7 .rotate, .d1009 .demo7 .d1010 .rotate2, .d1010 .d1009 .demo7 .rotate2, .d1009 .demo7 .d1010 .rotate3, .d1010 .d1009 .demo7 .rotate3, .d1009 .demo7 .d1010 .rotate4, .d1010 .d1009 .demo7 .rotate4, .d1009 .demo7 .d1010 .scale, .d1010 .d1009 .demo7 .scale, .d1009 .demo7 .d1010 .scale2, .d1010 .d1009 .demo7 .scale2 {
  margin: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  animation: Zline 2s alternate infinite;
  -webkit-animation: Zline 2s alternate infinite;
}

.d1010 {
  text-align: center;
  padding: 80px !important;
}
.d1010 .box, .d1010 .rotate, .d1010 .rotate2, .d1010 .rotate3, .d1010 .rotate4, .d1010 .scale, .d1010 .scale2 {
  display: inline-block;
  background: orange;
  width: 100px;
  height: 100px;
  position: relative;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  z-index: 5;
}
.d1010 .dot {
  position: absolute;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  background: red;
  height: 5px;
  width: 5px;
  left: 50px;
  top: 98px;
}
.d1010 .rotate {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
.d1010 .rotate:hover {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.d1010 .rotate .dot {
  left: 50%;
  top: 50%;
  left: calc(50% - 2px);
  top: calc(50% - 2px);
}
.d1010 .rotate2 {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}
.d1010 .rotate2:hover {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.d1010 .rotate2 .dot {
  left: calc(0% - 2px);
  top: calc(0% - 2px);
}
.d1010 .perspective {
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.d1010 .perspective:hover .rotate3 {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
.d1010 .perspective:hover .rotate4 {
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}
.d1010 .rotate3 {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}
.d1010 .rotate3 .dot {
  left: calc(0% - 2px);
  top: calc(0% - 2px);
}
.d1010 .rotate4 {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  -o-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.d1010 .rotate4 .dot {
  left: calc(100% - 2px);
  top: calc(0% - 2px);
}
.d1010 .scale {
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}
.d1010 .scale:hover {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.d1010 .scale .dot {
  left: 50%;
  top: 50%;
  left: calc(50% - 2px);
  top: calc(50% - 2px);
}
.d1010 .scale2 {
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}
.d1010 .scale2:hover {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.d1010 .scale2 .dot {
  left: calc(0% - 2px);
  top: calc(0% - 2px);
}
.d1010 .relative {
  position: relative;
  height: 100px;
  z-index: 1;
}
.d1010 .d1009 .xline, .d1009 .d1010 .xline, .d1010 .d1009 .yline, .d1009 .d1010 .yline, .d1010 .d1009 .zline, .d1009 .d1010 .zline, .d1010 .topLine, .d1010 .middleLine, .d1010 .bottomLine {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}
.d1010 .topLine {
  top: 0;
  background: rgba(255, 0, 0, 0.6);
}
.d1010 .middleLine {
  top: 50%;
  top: calc(50% - 1px);
  background: rgba(0, 0, 255, 0.6);
}
.d1010 .bottomLine {
  bottom: 0;
  background: rgba(0, 128, 0, 0.6);
}

@-webkit-keyframes clockRotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.clocks {
  text-align: center;
}
.clocks .clock {
  display: inline-block;
  background: #c45575;
  position: relative;
  height: 200px;
  width: 200px;
  border: #a64863 5px solid;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.clocks .clock div {
  width: 8px;
  position: absolute;
}
.clocks .hours {
  background: #edb95b;
  height: 80px;
  top: 40px;
  left: 96px;
  -webkit-transform-origin: 50% 60px;
  -moz-transform-origin: 50% 60px;
  -ms-transform-origin: 50% 60px;
  -o-transform-origin: 50% 60px;
  transform-origin: 50% 60px;
  -webkit-animation: clockRotate 72s infinite linear;
}
.clocks .minutes {
  background: #676bed;
  height: 100px;
  top: 20px;
  left: 96px;
  -webkit-transform-origin: 50% 80px;
  -moz-transform-origin: 50% 80px;
  -ms-transform-origin: 50% 80px;
  -o-transform-origin: 50% 80px;
  transform-origin: 50% 80px;
  -webkit-animation: clockRotate 6s infinite linear;
}
.clocks .seconds {
  background: #f78c5f;
  height: 120px;
  top: 0px;
  left: 96px;
  -webkit-transform-origin: 50% 100px;
  -moz-transform-origin: 50% 100px;
  -ms-transform-origin: 50% 100px;
  -o-transform-origin: 50% 100px;
  transform-origin: 50% 100px;
  -webkit-animation: clockRotate 1s infinite linear;
}

.d1011 {
  padding: 80px !important;
}
.d1011 label {
  cursor: pointer;
}
.d1011 .d1004 .demo6, .d1004 .d1011 .demo6, .d1011 .d1004 .demo7, .d1004 .d1011 .demo7, .d1011 .demo0, .d1011 .demo1, .d1011 .demo2, .d1011 .demo3, .d1011 .demo4, .d1011 .demo5 {
  width: 150px;
  height: 150px;
  color: white;
  display: block;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
}
.d1011 .viewpoint {
  position: absolute;
  background: red;
  padding: 5px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.d1011 .demo0 {
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
}
.d1011 .demo1 {
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  -ms-perspective: 1500px;
  -o-perspective: 1500px;
  perspective: 1500px;
}
.d1011 .demo2 {
  -webkit-perspective: 250px;
  -moz-perspective: 250px;
  -ms-perspective: 250px;
  -o-perspective: 250px;
  perspective: 250px;
}
.d1011 .demo3 {
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: center 0%;
  -moz-perspective-origin: center 0%;
  -ms-perspective-origin: center 0%;
  -o-perspective-origin: center 0%;
  perspective-origin: center 0%;
}
.d1011 .demo3 .viewpoint {
  top: 0;
  left: calc(50% - 2.5px);
}
.d1011 .demo4 {
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: right bottom;
  -moz-perspective-origin: right bottom;
  -ms-perspective-origin: right bottom;
  -o-perspective-origin: right bottom;
  perspective-origin: right bottom;
}
.d1011 .demo4 .viewpoint {
  top: calc(100% - 2.5px);
  left: calc(100% - 2.5px);
}
.d1011 .rotate {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.d1011 .rotate [type="checkbox"] {
  display: none;
}
.d1011 .rotate [type="checkbox"]:checked ~ .cube {
  animation: ifinityCube 10s linear infinite;
  -webkit-animation: ifinityCube 10s linear infinite;
}
.d1011 .cube {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
}
.d1011 .cube div {
  width: 146px;
  height: 146px;
  border: 2px solid #555555;
  position: absolute;
}
.d1011 .front {
  background: rgba(255, 0, 0, 0.5);
  -webkit-transform: rotateY(0deg) translateZ(75px);
  -moz-transform: rotateY(0deg) translateZ(75px);
  -ms-transform: rotateY(0deg) translateZ(75px);
  -o-transform: rotateY(0deg) translateZ(75px);
  transform: rotateY(0deg) translateZ(75px);
}
.d1011 .back {
  background: rgba(255, 255, 0, 0.5);
  -webkit-transform: rotateX(180deg) translateZ(75px);
  -moz-transform: rotateX(180deg) translateZ(75px);
  -ms-transform: rotateX(180deg) translateZ(75px);
  -o-transform: rotateX(180deg) translateZ(75px);
  transform: rotateX(180deg) translateZ(75px);
}
.d1011 .right {
  background: rgba(0, 255, 0, 0.5);
  -webkit-transform: rotateY(90deg) translateZ(75px);
  -moz-transform: rotateY(90deg) translateZ(75px);
  -ms-transform: rotateY(90deg) translateZ(75px);
  -o-transform: rotateY(90deg) translateZ(75px);
  transform: rotateY(90deg) translateZ(75px);
}
.d1011 .left {
  background: rgba(0, 255, 255, 0.5);
  -webkit-transform: rotateY(-90deg) translateZ(75px);
  -moz-transform: rotateY(-90deg) translateZ(75px);
  -ms-transform: rotateY(-90deg) translateZ(75px);
  -o-transform: rotateY(-90deg) translateZ(75px);
  transform: rotateY(-90deg) translateZ(75px);
}
.d1011 .top {
  background: rgba(0, 0, 255, 0.5);
  -webkit-transform: rotateX(90deg) translateZ(75px);
  -moz-transform: rotateX(90deg) translateZ(75px);
  -ms-transform: rotateX(90deg) translateZ(75px);
  -o-transform: rotateX(90deg) translateZ(75px);
  transform: rotateX(90deg) translateZ(75px);
}
.d1011 .bottom {
  background: rgba(255, 0, 255, 0.5);
  -webkit-transform: rotateX(-90deg) translateZ(75px);
  -moz-transform: rotateX(-90deg) translateZ(75px);
  -ms-transform: rotateX(-90deg) translateZ(75px);
  -o-transform: rotateX(-90deg) translateZ(75px);
  transform: rotateX(-90deg) translateZ(75px);
}
.d1011 .control {
  text-align: center;
  margin-top: 40px;
}

.d1012 {
  text-align: center;
}
.d1012 .test1 .coverflow-item {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  text-align: center;
}
.d1012 .test1 .coverflow-item .album-cover {
  height: 150px;
  width: 150px;
}
.d1012 .test1 .coverflow-item .album-cover img {
  opacity: 0.5;
}
.d1012 .test1 .coverflow-item .album-name {
  text-align: center;
  display: block;
  color: #777777;
}
.d1012 .test1 .coverflow-item label {
  display: block;
}
.d1012 .test2 .coverflow-item {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  text-align: center;
}
.d1012 .test2 .coverflow-item .album-cover {
  height: 150px;
  width: 150px;
}
.d1012 .test2 .coverflow-item .album-cover img {
  opacity: 0.5;
}
.d1012 .test2 .coverflow-item .album-name {
  text-align: center;
  display: block;
  color: #777777;
}
.d1012 .test2 .coverflow-item label {
  display: block;
}
.d1012 .test2 .coverflow-list {
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  -ms-perspective: 900px;
  -o-perspective: 900px;
  perspective: 900px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective-origin: 100% 30%;
  -moz-perspective-origin: 100% 30%;
  -ms-perspective-origin: 100% 30%;
  -o-perspective-origin: 100% 30%;
  perspective-origin: 100% 30%;
}
.d1012 .test2 .coverflow-list .coverflow-item {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: rotateY(45deg);
  -moz-transform: rotateY(45deg);
  -ms-transform: rotateY(45deg);
  -o-transform: rotateY(45deg);
  transform: rotateY(45deg);
}
.d1012 .test3 {
  text-align: center;
}
.d1012 .test3 .coverflow-item {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  text-align: center;
}
.d1012 .test3 .coverflow-item .album-cover {
  height: 150px;
  width: 150px;
}
.d1012 .test3 .coverflow-item .album-cover img {
  opacity: 0.5;
}
.d1012 .test3 .coverflow-item .album-name {
  text-align: center;
  display: block;
  color: #777777;
}
.d1012 .test3 .coverflow-item label {
  display: block;
}
.d1012 .test3 .coverflow-list {
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  -ms-perspective: 900px;
  -o-perspective: 900px;
  perspective: 900px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective-origin: 100% 30%;
  -moz-perspective-origin: 100% 30%;
  -ms-perspective-origin: 100% 30%;
  -o-perspective-origin: 100% 30%;
  perspective-origin: 100% 30%;
}
.d1012 .test3 .coverflow-list .coverflow-item {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: rotateY(45deg);
  -moz-transform: rotateY(45deg);
  -ms-transform: rotateY(45deg);
  -o-transform: rotateY(45deg);
  transform: rotateY(45deg);
}
.d1012 .test3 input[type="checkbox"] {
  display: none;
}
.d1012 .test3 input[type="checkbox"]:checked + .coverflow-item {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: rotateY(0.1deg);
  -moz-transform: rotateY(0.1deg);
  -ms-transform: rotateY(0.1deg);
  -o-transform: rotateY(0.1deg);
  transform: rotateY(0.1deg);
  margin: 0 auto;
}
.d1012 .test3 input[type="checkbox"]:checked + .coverflow-item img {
  opacity: 1;
}
.d1012 .test3 input[type="checkbox"]:checked + .coverflow-item .album-name {
  color: #333333;
}
.d1012 .complete {
  text-align: center;
}
.d1012 .complete .controllor {
  margin-top: 10px;
}
.d1012 .complete .coverflow-item {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  text-align: center;
  margin: 0 -45px;
  background-color: white;
}
.d1012 .complete .coverflow-item .album-cover {
  height: 150px;
  width: 150px;
  -webkit-box-reflect: below 22px -webkit-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
  -moz-box-reflect: below 22px -moz-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
  -o-box-reflect: below 22px -o-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
  -ms-box-reflect: below 22px -ms-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
  box-reflect: below 22px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%);
}
.d1012 .complete .coverflow-item .album-cover img {
  opacity: 0.5;
}
.d1012 .complete .coverflow-item .album-name {
  text-align: center;
  display: block;
  color: #777777;
}
.d1012 .complete .coverflow-item label {
  display: block;
}
.d1012 .complete .coverflow-list {
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  -ms-perspective: 900px;
  -o-perspective: 900px;
  perspective: 900px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective-origin: 100% 30%;
  -moz-perspective-origin: 100% 30%;
  -ms-perspective-origin: 100% 30%;
  -o-perspective-origin: 100% 30%;
  perspective-origin: 100% 30%;
}
.d1012 .complete .coverflow-list .coverflow-item {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: rotateY(45deg);
  -moz-transform: rotateY(45deg);
  -ms-transform: rotateY(45deg);
  -o-transform: rotateY(45deg);
  transform: rotateY(45deg);
}
.d1012 .complete input[type="radio"] {
  display: none;
}
.d1012 .complete input[type="radio"]:checked + .coverflow-item {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: rotateY(0.1deg);
  -moz-transform: rotateY(0.1deg);
  -ms-transform: rotateY(0.1deg);
  -o-transform: rotateY(0.1deg);
  transform: rotateY(0.1deg);
  margin: 0 auto;
}
.d1012 .complete input[type="radio"]:checked + .coverflow-item img {
  opacity: 1;
}
.d1012 .complete input[type="radio"]:checked + .coverflow-item .album-name {
  color: #555555;
}
.d1012 .complete input[type="radio"]:checked + .coverflow-item ~ .coverflow-item {
  -webkit-transform: rotateY(-45deg);
  -moz-transform: rotateY(-45deg);
  -ms-transform: rotateY(-45deg);
  -o-transform: rotateY(-45deg);
  transform: rotateY(-45deg);
}
.d1012 .complete .controllor {
  margin-top: 40px;
}
.d1012 .complete .controllor label {
  cursor: pointer;
  color: #999999;
  padding: 8px;
  border: 1px solid #cccccc;
  background-color: #fafafa;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.d1012 .complete .controllor label:hover {
  color: #555555;
  border: 1px solid;
}