.d1028 .btn-demo {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
  text-decoration: none;
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  line-height: 22px;
  vertical-align: middle;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all, 0.2s;
  -moz-transition: all, 0.2s;
  -o-transition: all, 0.2s;
  transition: all, 0.2s;
  color: white;
}
.d1028 .btn-demo:hover {
  color: white;
}
.d1028 .btn-demo:focus, .d1028 .btn-demo:active, .d1028 .current.btn-demo {
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.05);
}

@-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);
  }
}

@-moz-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);
  }
}

@-ms-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);
  }
}

@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);
  }
}

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

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

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

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

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

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

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

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

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

  50% {
    -webkit-transform: translateX(-100%) rotate(180deg);
    -moz-transform: translateX(-100%) rotate(180deg);
    -ms-transform: translateX(-100%) rotate(180deg);
    -o-transform: translateX(-100%) rotate(180deg);
    transform: translateX(-100%) rotate(180deg);
  }

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

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

  50% {
    -webkit-transform: translateX(-100%) rotate(180deg);
    -moz-transform: translateX(-100%) rotate(180deg);
    -ms-transform: translateX(-100%) rotate(180deg);
    -o-transform: translateX(-100%) rotate(180deg);
    transform: translateX(-100%) rotate(180deg);
  }

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

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

  50% {
    -webkit-transform: translateX(-100%) rotate(180deg);
    -moz-transform: translateX(-100%) rotate(180deg);
    -ms-transform: translateX(-100%) rotate(180deg);
    -o-transform: translateX(-100%) rotate(180deg);
    transform: translateX(-100%) rotate(180deg);
  }

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

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

  50% {
    -webkit-transform: translateX(-100%) rotate(180deg);
    -moz-transform: translateX(-100%) rotate(180deg);
    -ms-transform: translateX(-100%) rotate(180deg);
    -o-transform: translateX(-100%) rotate(180deg);
    transform: translateX(-100%) rotate(180deg);
  }

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

.d1016 div, .d1017 div, .d1018 div, .d1018 label, .d1128 div {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  display: block;
  background: orange;
}

.d1016 div {
  -webkit-animation: ifinityCircles 3s infinite linear;
  -moz-animation: ifinityCircles 3s infinite linear;
  -o-animation: ifinityCircles 3s infinite linear;
  animation: ifinityCircles 3s infinite linear;
}

.d1017 .box {
  -webkit-animation: ifinityCircles 3s infinite linear;
  -moz-animation: ifinityCircles 3s infinite linear;
  -o-animation: ifinityCircles 3s infinite linear;
  animation: ifinityCircles 3s infinite linear;
}
.d1017 .box1 {
  -webkit-animation: ifinityCircles2 3s infinite linear alternate;
  -moz-animation: ifinityCircles2 3s infinite linear alternate;
  -o-animation: ifinityCircles2 3s infinite linear alternate;
  animation: ifinityCircles2 3s infinite linear alternate;
}

.d1018 label {
  cursor: pointer;
}
.d1018 [type="checkbox"]:checked ~ .box1 {
  -webkit-animation: ifinityCircles 3s;
  -moz-animation: ifinityCircles 3s;
  -o-animation: ifinityCircles 3s;
  animation: ifinityCircles 3s;
}
.d1018 [type="checkbox"]:checked ~ .box2 {
  -webkit-animation: ifinityCircles 8s;
  -moz-animation: ifinityCircles 8s;
  -o-animation: ifinityCircles 8s;
  animation: ifinityCircles 8s;
}
.d1018 [type="checkbox"]:checked ~ .box3 {
  -webkit-animation: ifinityCircles 3s ease;
  -moz-animation: ifinityCircles 3s ease;
  -o-animation: ifinityCircles 3s ease;
  animation: ifinityCircles 3s ease;
}
.d1018 [type="checkbox"]:checked ~ .box4 {
  -webkit-animation: ifinityCircles 3s linear;
  -moz-animation: ifinityCircles 3s linear;
  -o-animation: ifinityCircles 3s linear;
  animation: ifinityCircles 3s linear;
}
.d1018 [type="checkbox"]:checked ~ .box5 {
  -webkit-animation: ifinityCircles 3s;
  -moz-animation: ifinityCircles 3s;
  -o-animation: ifinityCircles 3s;
  animation: ifinityCircles 3s;
}
.d1018 [type="checkbox"]:checked ~ .box6 {
  -webkit-animation: ifinityCircles 3s 1.5s;
  -moz-animation: ifinityCircles 3s 1.5s;
  -o-animation: ifinityCircles 3s 1.5s;
  animation: ifinityCircles 3s 1.5s;
}
.d1018 [type="checkbox"]:checked ~ .box7 {
  -webkit-animation: ifinityCircles 1.5s 2;
  -moz-animation: ifinityCircles 1.5s 2;
  -o-animation: ifinityCircles 1.5s 2;
  animation: ifinityCircles 1.5s 2;
}
.d1018 [type="checkbox"]:checked ~ .box8 {
  -webkit-animation: ifinityCircles 1.5s infinite;
  -moz-animation: ifinityCircles 1.5s infinite;
  -o-animation: ifinityCircles 1.5s infinite;
  animation: ifinityCircles 1.5s infinite;
}
.d1018 [type="checkbox"]:checked ~ .box9 {
  -webkit-animation: ifinityCircles 1.5s reverse infinite;
  -moz-animation: ifinityCircles 1.5s reverse infinite;
  -o-animation: ifinityCircles 1.5s reverse infinite;
  animation: ifinityCircles 1.5s reverse infinite;
}
.d1018 [type="checkbox"]:checked ~ .box10 {
  -webkit-animation: ifinityCircles 1.5s alternate-reverse infinite;
  -moz-animation: ifinityCircles 1.5s alternate-reverse infinite;
  -o-animation: ifinityCircles 1.5s alternate-reverse infinite;
  animation: ifinityCircles 1.5s alternate-reverse infinite;
}
.d1018 [type="checkbox"]:checked ~ .box11 {
  -webkit-animation: ifinityCircles 1.5s alternate infinite;
  -moz-animation: ifinityCircles 1.5s alternate infinite;
  -o-animation: ifinityCircles 1.5s alternate infinite;
  animation: ifinityCircles 1.5s alternate infinite;
}

.d1020 {
  font-size: 2em;
  line-height: 1.6em;
}
.d1020 .demo2 {
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
}
.d1020 .demo3 {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

.fluidGridDemo .row {
  width: 1200px;
  max-width: 100%;
  margin-bottom: 15px;
}
.fluidGridDemo .row [class*='column'] {
  float: left;
  min-height: 1px;
  margin-bottom: 8px;
  margin-left: 2%;
  *margin-bottom: 2%;
  zoom: 1;
}
.fluidGridDemo .row [class*='column']:first-child {
  margin-left: 0;
}
.fluidGridDemo .row input[class*='column'], .fluidGridDemo .row img[class*='column'] {
  float: none;
  margin-left: 0;
}
.fluidGridDemo .row img[class*='column'] {
  height: auto;
}
.fluidGridDemo .row .column1 {
  width: 6.5%;
  max-width: 6.5%;
}
.fluidGridDemo .row img.column1.polaroid {
  width: -13.5%;
}
.fluidGridDemo .row .offset1 {
  margin-left: 10.5%;
}
.fluidGridDemo .row .offset1:first-child {
  margin-left: 8.5%;
}
.fluidGridDemo .row .column2 {
  width: 15%;
  max-width: 15%;
}
.fluidGridDemo .row img.column2.polaroid {
  width: -5%;
}
.fluidGridDemo .row .offset2 {
  margin-left: 19%;
}
.fluidGridDemo .row .offset2:first-child {
  margin-left: 17%;
}
.fluidGridDemo .row .column3 {
  width: 23.5%;
  max-width: 23.5%;
}
.fluidGridDemo .row img.column3.polaroid {
  width: 3.5%;
}
.fluidGridDemo .row .offset3 {
  margin-left: 27.5%;
}
.fluidGridDemo .row .offset3:first-child {
  margin-left: 25.5%;
}
.fluidGridDemo .row .column4 {
  width: 32%;
  max-width: 32%;
}
.fluidGridDemo .row img.column4.polaroid {
  width: 12%;
}
.fluidGridDemo .row .offset4 {
  margin-left: 36%;
}
.fluidGridDemo .row .offset4:first-child {
  margin-left: 34%;
}
.fluidGridDemo .row .column5 {
  width: 40.5%;
  max-width: 40.5%;
}
.fluidGridDemo .row img.column5.polaroid {
  width: 20.5%;
}
.fluidGridDemo .row .offset5 {
  margin-left: 44.5%;
}
.fluidGridDemo .row .offset5:first-child {
  margin-left: 42.5%;
}
.fluidGridDemo .row .column6 {
  width: 49%;
  max-width: 49%;
}
.fluidGridDemo .row img.column6.polaroid {
  width: 29%;
}
.fluidGridDemo .row .offset6 {
  margin-left: 53%;
}
.fluidGridDemo .row .offset6:first-child {
  margin-left: 51%;
}
.fluidGridDemo .row .column7 {
  width: 57.5%;
  max-width: 57.5%;
}
.fluidGridDemo .row img.column7.polaroid {
  width: 37.5%;
}
.fluidGridDemo .row .offset7 {
  margin-left: 61.5%;
}
.fluidGridDemo .row .offset7:first-child {
  margin-left: 59.5%;
}
.fluidGridDemo .row .column8 {
  width: 66%;
  max-width: 66%;
}
.fluidGridDemo .row img.column8.polaroid {
  width: 46%;
}
.fluidGridDemo .row .offset8 {
  margin-left: 70%;
}
.fluidGridDemo .row .offset8:first-child {
  margin-left: 68%;
}
.fluidGridDemo .row .column9 {
  width: 74.5%;
  max-width: 74.5%;
}
.fluidGridDemo .row img.column9.polaroid {
  width: 54.5%;
}
.fluidGridDemo .row .offset9 {
  margin-left: 78.5%;
}
.fluidGridDemo .row .offset9:first-child {
  margin-left: 76.5%;
}
.fluidGridDemo .row .column10 {
  width: 83%;
  max-width: 83%;
}
.fluidGridDemo .row img.column10.polaroid {
  width: 63%;
}
.fluidGridDemo .row .offset10 {
  margin-left: 87%;
}
.fluidGridDemo .row .offset10:first-child {
  margin-left: 85%;
}
.fluidGridDemo .row .column11 {
  width: 91.5%;
  max-width: 91.5%;
}
.fluidGridDemo .row img.column11.polaroid {
  width: 71.5%;
}
.fluidGridDemo .row .offset11 {
  margin-left: 95.5%;
}
.fluidGridDemo .row .offset11:first-child {
  margin-left: 93.5%;
}
.fluidGridDemo .row .column12 {
  width: 100%;
  max-width: 100%;
}
.fluidGridDemo .row img.column12.polaroid {
  width: 80%;
}
.fluidGridDemo .row .offset12 {
  margin-left: 104%;
}
.fluidGridDemo .row .offset12:first-child {
  margin-left: 102%;
}
.fluidGridDemo .container {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}
.fluidGridDemo .row {
  margin-bottom: 1%;
  overflow: hidden;
  clear: both;
  zoom: 1;
}
@media (max-width: 1200px) {
  .fluidGridDemo .container {
    max-width: 98%;
    padding: 0 1%;
  }
}
@media (max-width: 767px) {
  .fluidGridDemo .container {
    max-width: 96%;
    padding: 0 2%;
  }
  .fluidGridDemo .row [class*='col'] {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
  .fluidGridDemo .row [class*='offset'] {
    margin-left: 0 !important;
  }
}
.fluidGridDemo [class*='col'] {
  background: gray;
  text-align: center;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}
.fluidGridDemo [class*='col']:hover {
  background: #555555;
}

.d1022 .display-box1, .d1022 .display-box2, .d1022 .display-box3, .d1022 .display-box4, .d1022 .d1024 .display-box5, .d1024 .d1022 .display-box5 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-box-align: stretch;
  box-align: stretch;
  width: 100%;
}
.d1022 .display-box1 {
  height: 200px;
}
.d1022 .n200px {
  width: 200px;
  background: #a10854;
}
.d1022 .n20p {
  width: 20%;
  background: deepskyblue;
}
.d1022 .flex1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  background: orange;
}
.d1022 .flex3 {
  -webkit-box-flex: 3;
  -moz-box-flex: 3;
  -ms-box-flex: 3;
  box-flex: 3;
  background: #375f99;
}
.d1022 .flex5 {
  -webkit-box-flex: 5;
  -moz-box-flex: 5;
  -ms-box-flex: 5;
  box-flex: 5;
  background: #20b87b;
}
.d1022 .n60p {
  height: 60%;
  background: deepskyblue;
}
.d1022 .display-box2 {
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -ms-box-direction: reverse;
  box-direction: reverse;
  height: 200px;
}
.d1022 .display-box3 {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  box-orient: vertical;
  height: 200px;
}
.d1022 .display-box4 {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -ms-box-direction: reverse;
  box-direction: reverse;
  height: 200px;
}
.d1022 .display-box5 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  height: 400px;
}
.d1022 .display-box5 .flex3 {
  flex: 3;
}
.d1022 .display-box5 .flex1 {
  flex: 1;
}
.d1022 .display-box5 .box-col {
  display: flex;
  width: 200px;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: darkgreen 5px solid;
  flex-direction: column;
}
.d1022 .display-box5 .box-row {
  display: flex;
  flex: 1;
}

.d1024 .display-box1, .d1024 .display-box2, .d1024 .display-box3, .d1024 .display-box4, .d1024 .display-box5 {
  display: flex;
  width: 100%;
}
.d1024 .display-box1 {
  height: 200px;
}
.d1024 .flex1 {
  flex: 1;
  background: orange;
}
.d1024 .flex3 {
  flex: 3;
  background: #375f99;
}
.d1024 .flex5 {
  flex: 5;
  background: #20b87b;
}
.d1024 .h50 {
  height: 50%;
  background: deepskyblue;
}
.d1024 .n200px {
  width: 200px;
  background: #a10854;
}
.d1024 .wh100px {
  width: 100px;
  height: 100px;
  background: deepskyblue;
}
.d1024 .wh200px {
  width: 200px;
  height: 200px;
  background: #a10854;
}
.d1024 .n20p {
  width: 20%;
  background: deepskyblue;
}
.d1024 .display-box2 {
  flex-direction: row-reverse;
  height: 200px;
}
.d1024 .display-box3 {
  flex-direction: column;
  height: 300px;
}
.d1024 .display-box4 {
  height: 200px;
  justify-content: center;
}
.d1024 .display-box4.start {
  justify-content: flex-start;
}
.d1024 .display-box4.end {
  justify-content: flex-end;
}
.d1024 .display-box4.space {
  justify-content: space-between;
}
.d1024 .display-box4.aspace {
  justify-content: space-around;
}
.d1024 .display-box5 {
  align-items: stretch;
}
.d1024 .display-box5 .wh100px {
  line-height: 100px;
}
.d1024 .display-box5 .wh200px {
  line-height: 80px;
}
.d1024 .display-box5.flex-start {
  align-items: flex-start;
}
.d1024 .display-box5.flex-end {
  align-items: flex-end;
}
.d1024 .display-box5.center {
  align-items: center;
}
.d1024 .display-box5.baseline {
  align-items: baseline;
}

.d1026 .flex {
  display: flex;
}
.d1026 header {
  background: orange;
  width: 100%;
  padding: 8px;
}
.d1026 menu {
  width: 100%;
  margin: 8px 0;
  background: deepskyblue;
  padding: 8px;
}
.d1026 nav {
  width: 120px;
  margin-right: 8px;
  background: #20b87b;
  padding: 8px;
}
.d1026 article {
  flex: 1;
  background: #a10854;
  padding: 8px;
}
.d1026 footer {
  margin-top: 8px;
  padding: 8px;
  width: 100%;
  background: darkgreen;
}
.d1026 .container {
  display: flex;
  flex-wrap: wrap;
}
.d1026 .container.center1 {
  height: 300px;
}
.d1026 .container.center1 div {
  margin: auto;
  width: 100px;
  height: 100px;
  background: #20b87b;
}
.d1026 .container.center2 {
  height: 300px;
  align-items: center;
  justify-content: center;
}
.d1026 .container.center2 div {
  width: 100px;
  height: 100px;
  background: #20b87b;
}
.d1026 .nav {
  background: #a10854;
}
.d1026 .order {
  display: flex;
}
.d1026 .order input {
  display: none;
}
.d1026 .order label {
  width: 10%;
  background: #20b87b;
  padding: 8px;
  margin-right: 12px;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d1026 .order input:checked + label {
  order: -1;
  background: #375f99;
}

.d1027 .gutter {
  margin-left: -1em;
}
.d1027 .box {
  display: flex;
  flex-wrap: wrap;
}
.d1027 .flexbox {
  flex: 1;
  display: flex;
  margin-bottom: 1em;
  padding-left: 1em;
}
.d1027 label, .d1027 span, .d1027 a {
  color: #555555;
  padding: 0.6em 0.75em;
  background: #dfdfdf;
  border: #777777 solid 1px;
  line-height: 1;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.d1027 label {
  border-right: #aaaaaa solid 1px;
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.d1027 span, .d1027 a {
  border-left: none;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.d1027 input {
  flex: 1;
  padding: 0.6em 0.75em;
  border: #777777 solid 1px;
  border-left: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  margin: 0;
  outline: none;
  background: #efefef;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d1027 input:focus {
  -webkit-box-shadow: 0 0 8px orange;
  -moz-box-shadow: 0 0 8px orange;
  box-shadow: 0 0 8px orange;
  background: white;
}

.d1028 .btn-demo {
  border: 1px solid #e69500;
  background-color: #ffae1a;
  margin: 1px;
}
.d1028 .btn-demo:hover, .d1028 .btn-demo.current {
  background-color: #e69500;
  border: 1px solid #b37300;
}
.d1028 .gradient {
  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;
}
.d1028 .gradient.current {
  -webkit-animation: ifinityCircles 2s infinite linear;
  -moz-animation: ifinityCircles 2s infinite linear;
  -o-animation: ifinityCircles 2s infinite linear;
  animation: ifinityCircles 2s infinite linear;
}

.solar-system {
  font-size: 20px;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
  box-align: center;
}

.earth .planet {
  width: 0.25em;
  height: 0.25em;
  margin: 0 auto;
  margin-top: -0.125em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.earth {
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: border-color 0.5s;
  -moz-transition: border-color 0.5s;
  -o-transition: border-color 0.5s;
  transition: border-color 0.5s;
}
.earth:hover {
  border-color: rgba(255, 255, 255, 0.8);
}

.sun {
  font-size: 250px;
  width: 0.35em;
  height: 0.35em;
  margin: auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 35% 15%, 0, 35% 15%, 100, color-stop(0%, #ffffff), color-stop(50%, #ffeab6), color-stop(100%, #e86e00));
  background: -webkit-radial-gradient(35% 15%, circle, #ffffff, #ffeab6, #e86e00);
  background: -moz-radial-gradient(35% 15%, circle, #ffffff, #ffeab6, #e86e00);
  background: -o-radial-gradient(35% 15%, circle, #ffffff, #ffeab6, #e86e00);
  background: radial-gradient(35% 15%, circle, #ffffff, #ffeab6, #e86e00);
  -webkit-box-shadow: 0 0 50px #e86e00, 0 0 8px red;
  -moz-box-shadow: 0 0 50px #e86e00, 0 0 8px red;
  box-shadow: 0 0 50px #e86e00, 0 0 8px red;
  z-index: 11;
}

.earth {
  width: 10em;
  height: 10em;
  margin-top: -5em;
  margin-left: -5em;
  -webkit-animation: ifinityCircles 24s infinite linear;
  -moz-animation: ifinityCircles 24s infinite linear;
  -o-animation: ifinityCircles 24s infinite linear;
  animation: ifinityCircles 24s infinite linear;
  z-index: 8;
}
.earth .planet {
  font-size: 120px;
  background: -webkit-gradient(radial, 35% 15%, 0, 35% 15%, 100, color-stop(0%, #5a9cf7), color-stop(50%, #467ac2), color-stop(100%, #203859));
  background: -webkit-radial-gradient(35% 15%, circle, #5a9cf7, #467ac2, #203859);
  background: -moz-radial-gradient(35% 15%, circle, #5a9cf7, #467ac2, #203859);
  background: -o-radial-gradient(35% 15%, circle, #5a9cf7, #467ac2, #203859);
  background: radial-gradient(35% 15%, circle, #5a9cf7, #467ac2, #203859);
}

.d0929 {
  height: 400px;
  -webkit-perspective-origin: center 0%;
  -moz-perspective-origin: center 0%;
  -ms-perspective-origin: center 0%;
  -o-perspective-origin: center 0%;
  perspective-origin: center 0%;
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  -ms-perspective: 1500px;
  -o-perspective: 1500px;
  perspective: 1500px;
  position: relative;
}
.d0929 .threeD {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.d0929 .threeD.solar-system {
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.d0929 .threeD .sun {
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.d0929 .threeD .earth {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.d0929 .threeD .earth .planet {
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.d0929 .sun.eggs {
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}
.d0929 .planet.eggs {
  -webkit-animation: rotateY 24s infinite linear;
  -moz-animation: rotateY 24s infinite linear;
  -o-animation: rotateY 24s infinite linear;
  animation: rotateY 24s infinite linear;
}

.d1031 .turn180 {
  margin: 0 auto;
  position: relative;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}
.d1031 .turn180 .flipper {
  -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-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
}
.d1031 .turn180 .flipper:hover {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.d1031 .turn180 .flipper:hover:first-child {
  z-index: 11;
}
.d1031 .turn180 .flipper:hover:first-child + * {
  z-index: 12;
}
.d1031 .turn180 .flipper > * {
  position: absolute;
  top: 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;
}
.d1031 .turn180 .flipper > *:first-child {
  z-index: 12;
  left: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.d1031 .turn180 .flipper > *:first-child + * {
  z-index: 11;
  right: 0;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.d1031 .turn180.visible .flipper > div {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  -ms-backface-visibility: visible;
  -o-backface-visibility: visible;
  backface-visibility: visible;
}

.d1102 {
  text-align: center;
}
.d1102 .demo0, .d1102 .demo1, .d1102 .demo2 {
  padding: 0.6em 1.2em;
  background: #40cb90;
  color: white;
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.d1102 .demo1 {
  border: 1px solid #134630;
  border-bottom: 6px solid #23825a;
  margin: 1px auto 6px auto;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d1102 .demo1:hover {
  margin: 6px auto;
  border-bottom: 1px solid #299667;
  -webkit-box-shadow: 0 0 1em #299667 inset;
  -moz-box-shadow: 0 0 1em #299667 inset;
  box-shadow: 0 0 1em #299667 inset;
}
.d1102 .demo2 {
  border: 1px solid #299667;
  border-bottom: 1px solid #54d09c;
  margin: 1px auto 6px auto;
  -webkit-box-shadow: 0 0 1em #2eaa75 inset, 0 6px 0 #1e6e4c;
  -moz-box-shadow: 0 0 1em #2eaa75 inset, 0 6px 0 #1e6e4c;
  box-shadow: 0 0 1em #2eaa75 inset, 0 6px 0 #1e6e4c;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d1102 .demo2:hover {
  margin: 6px auto 1px auto;
  -webkit-box-shadow: 0 0 1em #1e6e4c inset, 0 1px 0 #1e6e4c;
  -moz-box-shadow: 0 0 1em #1e6e4c inset, 0 1px 0 #1e6e4c;
  box-shadow: 0 0 1em #1e6e4c inset, 0 1px 0 #1e6e4c;
}

.d1111 {
  height: 500px;
  position: relative;
}
.d1111 .ball {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  width: 5em;
  height: 5em;
  background: #e24b7c;
  position: absolute;
  left: calc(50% - (5em/2));
  top: 0;
  -webkit-transition: top 1s cubic-bezier(0.18, 1.62, 0.31, 0.69);
  -moz-transition: top 1s cubic-bezier(0.18, 1.62, 0.31, 0.69);
  -o-transition: top 1s cubic-bezier(0.18, 1.62, 0.31, 0.69);
  transition: top 1s cubic-bezier(0.18, 1.62, 0.31, 0.69);
}
.d1111 .demo4 .ball {
  -webkit-transition: top 1s cubic-bezier(0.07, 1.91, 0.51, 0.8);
  -moz-transition: top 1s cubic-bezier(0.07, 1.91, 0.51, 0.8);
  -o-transition: top 1s cubic-bezier(0.07, 1.91, 0.51, 0.8);
  transition: top 1s cubic-bezier(0.07, 1.91, 0.51, 0.8);
}
.d1111 .wave {
  height: 200px;
  background: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #ffffff), color-stop(2%, #c7d7f9), color-stop(6%, #6ecded), color-stop(20%, #0a89bc), color-stop(100%, #02316f));
  background: -webkit-linear-gradient(to bottom, #ffffff 0%, #c7d7f9 2%, #6ecded 6%, #0a89bc 20%, #02316f 100%);
  background: -moz-linear-gradient(to bottom, #ffffff 0%, #c7d7f9 2%, #6ecded 6%, #0a89bc 20%, #02316f 100%);
  background: -o-linear-gradient(to bottom, #ffffff 0%, #c7d7f9 2%, #6ecded 6%, #0a89bc 20%, #02316f 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #c7d7f9 2%, #6ecded 6%, #0a89bc 20%, #02316f 100%);
  opacity: 0.8;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}
.d1111 .demo1:hover .ball, .d1111 .demo4:hover .ball {
  top: calc(100% - (200px + 5em/2));
}

.d1125 .reload {
  display: inline-block;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAb9JREFUeNrEV91tgzAQTiLewwjdADYonaBsUPLIGyOkEzRvPIZswAaFCWI2SDfIBvSuMhJy7/DZsYKlkyWw7/vOvj9vx3HcrDl2m5VH5LqhrusYpgwkJX4rkK4sy7tARwrrusgBuIAJ5VWwtoepAYCGAe9AWpy3Nh+ADWgpKko8TnhA0kBEGeCo6xO+HyMLeAXT1wNXjEBX0HOYLDYNiRbA0eoPgYV437HlhM4gJ5C9yAm15Rz4Ba2B42uJfTlMObN3Tyn75wP6zq/E2h99n53ACSV+8+cDVB5omKNOJeA4tNPlzolIh1pCWJ7ZYpsItdYnExbEmsIDvJOG7c7YaCaZi/TYfcDNKMiI/61j3Fc6LHvB2ptJICWcyYkAenXIajisXY7vaxOI1yaQPJuAYnL70whQ8R6EABhyBMmsxQgWdUQyenNJRgQ4An/PIus075R2gkLU6AznAx4bOtGvzvOrpcqxIhxw8CxIVFruQU+2FAUFExGKu0fm2BUTSdViQyLoBW0dERrwzuw9mJ0y2xUH7gmnylpYW7LAXTFruYhA6HeBFwGfl5HuBxrOai8CC2/Dl6m5kL4NHyIQevwKMABGYeKfUNDp7wAAAABJRU5ErkJggg==');
  width: 32px;
  height: 32px;
}
.d1125 .reload.svg {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxkZWZzPg0KCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIvPg0KCTwvZGVmcz4NCgk8Y2xpcFBhdGggaWQ9IlNWR0lEXzJfIj4NCgkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBvdmVyZmxvdz0idmlzaWJsZSIvPg0KCTwvY2xpcFBhdGg+DQoJPGcgY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSI+DQoJCTxnPg0KCQkJPGRlZnM+DQoJCQkJPHJlY3QgaWQ9IlNWR0lEXzNfIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiLz4NCgkJCTwvZGVmcz4NCgkJCTxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iPg0KCQkJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzNfIiAgb3ZlcmZsb3c9InZpc2libGUiLz4NCgkJCTwvY2xpcFBhdGg+DQoJCQk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfNF8pIiBmaWxsPSIjOTY5Njk2IiBkPSJNMjUuODgyLDYuMTE2QzIzLjM1MiwzLjU3NywxOS44NTUsMiwxNS45ODcsMkM4LjI2MywyLDIuMDAxLDguMjY4LDIuMDAxLDE2DQoJCQkJYzAsNy43MzIsNi4yNjYsMTQuMDAxLDEzLjk4OCwxNC4wMDFjNS43MjMsMCwxMC42NDEtMy40NCwxMi44MDktOC4zNjRsLTMuODE1LTEuNjM4Yy0xLjUzOSwzLjQ0Mi00Ljk4NCw1Ljg1My04Ljk5MSw1Ljg1Mw0KCQkJCWMtNS40MjcsMC05Ljg0My00LjQyLTkuODQzLTkuODUyYzAtNS40MzIsNC40MTYtOS44NTEsOS44NDMtOS44NTFjMi43MTksMCw1LjE4LDEuMDIyLDYuOTYzLDIuODE0bC00LjE0Niw0LjA1NGgxMS4xNzZWMg0KCQkJCUwyNS44ODIsNi4xMTZ6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
  background-image: url('/images/reload.png?1385344951') \9;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.d1125 .reload.x2 {
  width: 64px;
  height: 64px;
}

.d1127 .em {
  padding: 0.35em 0.7em 0.4em;
  vertical-align: middle;
}
.d1127 .ll {
  font-size: 24px;
}
.d1127 .xl {
  font-size: 42px;
}

.d1128 {
  text-align: center;
}
.d1128 div {
  display: inline-block;
  margin: 1em;
}
.d1128 .transition {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.d1128 .scale:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
.d1128 .rotate:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.d1128 .filter:hover {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  filter: blur(5px);
}

.d1218 .circle {
  width: 140px;
  height: 140px;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: red;
}

.d1223 {
  position: relative;
}
.d1223 .transform3d {
  height: 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;
}
.d1223 .transform3d:hover .ez {
  -webkit-transform: translate3d(50%, 0, 0);
  -moz-transform: translate3d(50%, 0, 0);
  -ms-transform: translate3d(50%, 0, 0);
  -o-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}
.d1223 .transform3d:hover .ziggs {
  -webkit-transform: translate3d(-50%, 0, 0);
  -moz-transform: translate3d(-50%, 0, 0);
  -ms-transform: translate3d(-50%, 0, 0);
  -o-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.d1223 span {
  width: 40%;
  display: block;
  position: absolute;
  bottom: 0;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
}
.d1223 span img {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  filter: blur(5px);
  width: 100%;
}
.d1223 span img:hover {
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  filter: blur(0);
}
.d1223 .ez {
  left: 0;
}
.d1223 .ziggs {
  right: 0;
}
.d1223 .transformjs {
  height: 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;
}
.d1223 .transform3d2 {
  height: 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;
}
.d1223 .transform3d2 span {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.d1223 .transform3d2 .ez {
  -webkit-filter: drop-shadow(-5px 0 0 rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(-5px 0 0 rgba(0, 0, 0, 0.5));
  filter: drop-shadow(-5px 0 0 rgba(0, 0, 0, 0.5));
}
.d1223 .transform3d2 .ziggs {
  -webkit-filter: drop-shadow(5px 0 0 rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(5px 0 0 rgba(0, 0, 0, 0.5));
  filter: drop-shadow(5px 0 0 rgba(0, 0, 0, 0.5));
}
.d1223 .transform3d2:hover .ez {
  -webkit-transform: translate3d(50%, 0, 0);
  -moz-transform: translate3d(50%, 0, 0);
  -ms-transform: translate3d(50%, 0, 0);
  -o-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
  -webkit-filter: drop-shadow(5px 0 0 rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(5px 0 0 rgba(0, 0, 0, 0.5));
  filter: drop-shadow(5px 0 0 rgba(0, 0, 0, 0.5));
}
.d1223 .transform3d2:hover .ziggs {
  -webkit-transform: translate3d(-50%, 0, 0);
  -moz-transform: translate3d(-50%, 0, 0);
  -ms-transform: translate3d(-50%, 0, 0);
  -o-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  -webkit-filter: drop-shadow(-5px 0 0 rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(-5px 0 0 rgba(0, 0, 0, 0.5));
  filter: drop-shadow(-5px 0 0 rgba(0, 0, 0, 0.5));
}

.d0101 {
  font-size: 1.2em;
}
.d0101 .serif {
  font-family: serif;
}
.d0101 .sans-serif {
  font-family: sans-serif;
}
.d0101 .cursive {
  font-family: cursive;
}
.d0101 .fantasy {
  font-family: fantasy;
}
.d0101 .monospace {
  font-family: monospace;
}
.d0101 .Microsoft-JhengHei2 {
  font-family: "Microsoft JhengHei";
}
.d0101 .Microsoft-JhengHei2 {
  font-family: "微軟正黑體";
}
.d0101 .Segoe-UI {
  font-family: "Segoe UI";
}
.d0101 .verdana {
  font-family: verdana;
}
.d0101 .Segoe-UI2 {
  font-family: "Segoe UI", "微軟正黑體", sans-serif;
}
.d0101 .Apple {
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
.d0101 .Microsoft {
  font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
.d0101 .Yahoo {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.d0101 .Google {
  font-family: arial, sans-serif;
}