.slides-main-container {
width:100%;
height:320px;
position:relative;
margin:20px auto;
background-color:rgba(250,250,250,1);
box-shadow:3px 3px 6px rgba(201,200,200,1),-3px -3px 6px rgba(200,200,201,1);
border-radius:10px
}

.navigate-controllers {
width:100%;
background-color:rgba(210,210,210,0.1);
position:absolute;
bottom:0;
padding:5px 0;
box-shadow:0 -2px 0 0 #c8c8c8
}

#button-containers {
margin-left:40%
}

#nextSlide,#prevSlide {
padding:5px;
border-radius:100%;
width:50px;
height:50px;
text-align:center;
line-height:35px;
vertical-align:middle;

border:0;
position:absolute;
top:135px;
outline:0;
font-size:50px;
color:rgb(150,150,150);
background-color:rgb(250,250,250);
transition:background-color 500ms, box-shadow 500ms;
cursor:pointer;
}

#prevSlide {
left:-60px;
}

#nextSlide {
right:-60px;
}

#nextSlide:hover,#prevSlide:hover {
box-shadow:1px 1px 9px rgb(200,200,205);
}

#pausePlay {
position:relative;
width:50px;
height:50px;
border:none;
background-color:rgba(210,210,210,0.1);
outline:none;
border-radius:5px;
box-shadow:1px 1px 3px rgba(180,180,180,1),-1px -1px 3px rgba(180,180,180,1)
}

#pausePlay:hover {
background-color:rgba(200,200,200,0.8)
}

.playAndPause {
content:"";
position:absolute;
height:30px;
width:20px;
border-left:8px solid rgba(100,100,100,1);
border-right:8px solid rgba(100,100,100,1);
left:14px;
top:10px
}

.slidesPlatform {
width:100%;
height:100%;
position:relative
}

.demo0,.demo1,.demo2,.demo3,.demo4,.demo5,.demo6,.demo7,.demo8,.demo9,.demo10,.demo11,.demo12,.demo13,.demo14,.demo15,.demo16 {
width:100%;
height:100%;
display:none;
-webkit-animation:slidingEffects .5s 1;
animation:slidingEffects 1s 1
}

100% {
display:block
}

@keyframes slidingEffects {
0% {
display:none
}

100% {
display:block
}
}

.watch-container {
width:200px;
height:200px;
position:relative
}

.watch {
position:absolute;
width:80%;
height:80%;
border-radius:50%;
border:10px solid #d2d2d2;
border-radius:50%;
background-color:#fafafa;
left:10%;
top:6%
}

.left-ear {
width:40%;
height:40%;
border-radius:45%;
border:none;
background-color:rgba(15,157,88,1);
position:absolute;
left:4%;
top:5%;
-webkit-transform:rotateZ(-45deg);
transform:rotateZ(-45deg)
}

.right-ear {
width:40%;
height:40%;
border-radius:45%;
border:none;
background-color:rgba(15,157,88,1);
position:absolute;
right:4%;
top:5%;
-webkit-transform:rotateZ(45deg);
transform:rotateZ(45deg)
}

.center {
width:5%;
height:5%;
border-radius:50%;
background-color:#000;
position:absolute;
left:47.5%;
top:47.5%;
z-index:10000
}

.hours-needle {
-webkit-transform:rotateZ(0deg);
-webkit-transform-origin:bottom;
transform:rotateZ(0deg);
transform-origin:bottom;
width:2%;
height:25%;
background:red;
position:absolute;
left:49%;
top:25%;
border-top-left-radius:50%;
border-top-right-radius:50%
}

.minutes-needle {
width:2%;
height:32.5%;
background:green;
-webkit-transform:rotateZ(0deg);
-webkit-transform-origin:bottom;
transform:rotateZ(0deg);
transform-origin:bottom;
position:absolute;
left:49%;
top:17.5%;
border-top-left-radius:100%;
border-top-right-radius:100%
}

.seconds-needle {
-webkit-transform:rotateZ(0deg);
-webkit-transform-origin:bottom;
transform:rotateZ(0deg);
transform-origin:bottom;
width:2%;
height:40%;
background:blue;
position:absolute;
left:49%;
top:10%;
border-top-left-radius:100%;
border-top-right-radius:100%
}

.left-leg {
position:absolute;
bottom:10%;
left:15%;
-webkit-transform:rotateZ(-45deg);
-webkit-transform-origin:left;
transform:rotateZ(-45deg);
transform-origin:left;
width:16%;
height:1.2%;
background-color:#d2d2d2;
border-radius:20%
}

.right-leg {
position:absolute;
bottom:10%;
right:15%;
-webkit-transform:rotateZ(45deg);
-webkit-transform-origin:right;
transform:rotateZ(45deg);
transform-origin:right;
width:16%;
height:1.2%;
background-color:#d2d2d2;
border-radius:20%
}

.numbers {
height:10%;
width:85%;
position:absolute;
top:46%;
left:7.5%
}

.smiling-face {
width:100px;
height:100px;
background-color:#ff0;
position:relative;
border-radius:50px;
box-shadow:2px 2px 2px rgba(195,195,195,0.5) inset,-2px -2px 2px rgba(245,240,240,0.5) inset
}

.leftEye {
position:absolute;
content:"";
height:15%;
width:12%;
background:#646464;
border-radius:100%;
top:25%;
left:21.5%;
animation:leftEye 3s infinite;
-webkit-animation:leftEye 3s infinite
}

.leftEyeBrow {
position:absolute;
width:15%;
height:10%;
top:10%;
left:20%;
border-top:3px solid #646464;
border-radius:50%;
animation:leftEyeBrow 3s infinite;
-webkit-animation:leftEyeBrow 3s infinite
}

.smiling-face span.rightEye {
position:absolute;
content:"";
height:15%;
width:12%;
background:#646464;
border-radius:100%;
top:25%;
right:21.5%;
animation:rightEye 3s infinite;
-webkit-animation:rightEye 3s infinite
}

.rightEyeBrow {
position:absolute;
width:15%;
height:10%;
top:10%;
right:20%;
border-top:3px solid #646464;
border-radius:50%;
animation:rightEyeBrow 3s infinite;
-webkit-animation:rightEyeBrow 3s infinite
}

.mouth {
position:absolute;
content:"";
width:30%;
height:40%;
background:#646464;
border-radius:50%;
left:35%;
top:50%;
animation:mounthBlink 3s infinite;
-webkit-animation:mounthBlink 3s infinite
}

@keyframes mounthBlink {
0% {
width:30%;
height:40%;
left:35%
}

35% {
height:15%;
width:15%;
left:30%
}

70% {
width:30%;
height:40%;
left:45%;
transform:rotateZ(-10deg)
}
}

@-webkit-keyframes mounthBlink {
0% {
width:30%;
height:40%;
left:35%
}

35% {
height:15%;
width:15%;
left:30%
}

70% {
width:30%;
height:40%;
left:45%;
-webkit-transform:rotateZ(-10deg)
}
}

@keyframes rightEye {
0% {
top:25%;
right:21.5%
}

35% {
top:35%;
right:26.5%;
transform:rotateZ(10deg)
}

70% {
top:20%;
right:16.5%;
transform:rotateZ(-10deg)
}
}

@-webkit-keyframes rightEye {
0% {
top:25%;
right:21.5%
}

35% {
top:35%;
right:26.5%;
transform:rotateZ(10deg);
-webkit-transform:rotateZ(10deg)
}

70% {
top:20%;
right:16.5%;
-webkit-transform:rotateZ(-10deg)
}
}

@keyframes rightEyeBrow {
0% {
top:10%;
right:20%
}

35% {
right:25%;
top:30%;
transform:rotateZ(10deg)
}

70% {
top:15%;
right:15%;
transform:rotateZ(-10deg)
}
}

@-webkit-keyframes rightEyeBrow {
0% {
top:10%;
right:20%
}

35% {
right:25%;
top:30%;
-webkit-transform:rotateZ(10deg)
}

70% {
top:15%;
right:15%;
-webkit-transform:rotateZ(-10deg)
}
}

@keyframes leftEye {
0% {
top:25%;
left:21.5%
}

35% {
top:25%;
left:11.5%;
transform:rotateZ(10deg)
}

70% {
top:35%;
left:26.5%;
transform:rotateZ(-10deg)
}
}

@-webkit-keyframes leftEye {
0% {
top:25%;
left:21.5%
}

35% {
top:25%;
left:11.5%;
-webkit-transform:rotateZ(10deg)
}

70% {
top:35%;
left:26.5%;
-webkit-transform:rotateZ(-10deg)
}
}

@keyframes leftEyeBrow {
0% {
top:10%;
left:20%
}

35% {
top:20%;
left:10%;
transform:rotateZ(10deg)
}

70% {
top:30%;
left:25%;
transform:rotateZ(-10deg)
}
}

@-webkit-keyframes leftEyeBrow {
0% {
top:10%;
left:20%
}

35% {
top:20%;
left:10%;
-webkit-transform:rotateZ(10deg)
}

70% {
top:30%;
left:25%;
-webkit-transform:rotateZ(-10deg)
}
}

.ball {
color:#fff;
text-indent:5px;
width:100px;
height:100px;
border-radius:50%;
position:absolute;
right:0;
bottom:0;
text-align:center;
background-color:rgba(15,157,88,1);
color:#fff;
line-height:100px;
vertical-align:middle;
-webkit-animation:ballmove 8s 1;
animation:ballmove 8s 1;
z-index:1
}

@-webkit-keyframes ballmove {
0% {
-webkit-transition:-webkit-transform 16s;
-webkit-transform:rotateZ(-360deg);
top:0;
right:93%;
-webkit-animation-timing-function:ease-in
}

12.5% {
right:93%;
top:82%;
-webkit-animation-timing-function:ease-out
}

25% {
right:77.5%;
top:20.5%;
-webkit-animation-timing-function:ease-in
}

37.5% {
right:62%;
top:82%;
-webkit-animation-timing-function:ease-out
}

50% {
right:46.5%;
top:35.87%;
-webkit-animation-timing-function:ease-in
}

62.5% {
right:31%;
top:82%;
-webkit-animation-timing-function:ease-out
}

75% {
right:15.5%;
top:47.4%;
-webkit-animation-timing-function:ease-in
}

100% {
right:0;
top:82%
}
}

@keyframes ballmove {
0% {
transition:transform 16s;
transform:rotateZ(-360deg);
top:0;
right:93%;
animation-timing-function:ease-in
}

12.5% {
right:93%;
top:82%;
animation-timing-function:ease-out
}

25% {
right:77.5%;
top:20.5%;
animation-timing-function:ease-in
}

37.5% {
right:62%;
top:82%;
animation-timing-function:ease-out
}

50% {
right:46.5%;
top:35.87%;
animation-timing-function:ease-in
}

62.5% {
right:31%;
top:82%;
animation-timing-function:ease-out
}

75% {
right:15.5%;
top:47.4%;
animation-timing-function:ease-in
}

100% {
right:0;
top:82%
}
}

.nail {
width:15px;
height:15px;
border-radius:50%;
background-color:#000;
box-shadow:2px 2px 2px 0 #c8c8c8;
position:absolute;
top:100px;
left:92px;
z-index:1000
}

.falling-banner {
color:#fff;
position:absolute;
top:100px;
left:0;
width:200px;
height:150px;
animation:fallingBanner 1s 1;
-webkit-animation:fallingBanner 1s 1
}

.string {
width:10%;
height:10%;
border-top-left-radius:50%;
border-top-right-radius:50%;
border:2px solid rgba(221,187,127,1);
margin:auto;
border-bottom:none
}

.perspective-container {
width:100%;
height:100%;
background-color:#d2d2d2;
border-radius:10px;
-webkit-perspective:400px;
perspective:400px
}

.vibrating-box {
width:100%;
height:100%;
background-color:rgba(221,187,127,1);
color:#fff;
border-radius:10px;
-webkit-transform:rotateX(0deg);
-webkit-transform-origin:top;
-webkit-animation:vibratingBox 2s 1;
-webkit-animation-delay:1s;
transform:rotateX(0deg);
transform-origin:top;
animation:vibratingBox 2s 1;
animation-delay:1s;
box-shadow:5px 5px 5px 0 rgba(210,210,210,0.5)
}

.message-box {
width:95%;
height:92%;
position:absolute;
left:2%;
top:3%;
border:1px dashed #ff0;
border-radius:10px;
background-color:rgba(221,187,127,1);
color:#fff;
font-family:'Dancing Script',cursive
}

@-webkit-keyframes fallingBanner {
0% {
top:-300px;
-webkit-animation-timing-function:ease-in
}

100% {
top:100px
}
}

@keyframes fallingBanner {
0% {
top:-300px;
animation-timing-function:ease-in
}

100% {
top:100px
}
}

@-webkit-keyframes fallingBanner {
0% {
top:-300px;
-webkit-animation-timing-function:ease-in
}

100% {
top:100px
}
}

@-webkit-keyframes vibratingBox {
0% {
-webkit-transform:rotateX(50deg)
}

12.5% {
-webkit-transform:rotateX(0deg)
}

25% {
-webkit-transform:rotateX(37.5deg)
}

37.5% {
-webkit-transform:rotateX(0deg)
}

50% {
-webkit-transform:rotateX(28.125deg)
}

62.5% {
-webkit-transform:rotateX(0deg)
}

75% {
-webkit-transform:rotateX(21deg);
-webkit-animation-timing-function:ease-in
}

100% {
-webkit-transform:rotateX(0deg)
}
}

@keyframes vibratingBox {
0% {
transform:rotateX(50deg)
}

12.5% {
transform:rotateX(0deg)
}

25% {
transform:rotateX(37.5deg)
}

37.5% {
transform:rotateX(0deg)
}

50% {
transform:rotateX(28.125deg)
}

62.5% {
transform:rotateX(0deg)
}

75% {
transform:rotateX(21deg);
animation-timing-function:ease-in
}

100% {
transform:rotateX(0deg)
}
}

.string-rotate {
width:100px;
height:100px;
border:1px solid #000;
border-right:none;
border-bottom:none;
border-radius:10px;
position:relative;
-webkit-transform:rotateZ(45deg);
-webkit-transform-origin:top left;
transform:rotateZ(45deg);
transform-origin:top left
}

.nail-rotate {
width:10px;
height:10px;
border-radius:50%;
background:#000;
box-shadow:4px 1px 2px 0 #aaa
}

.banner-rotate {
width:200px;
height:70px;
border:1px solid rgba(221,187,127,1);
-webkit-transform:rotateZ(-45deg);
transform:rotateZ(-45deg);
position:absolute;
top:40px;
left:-23px;
background-color:rgba(221,187,127,1);
border-radius:10px;
box-shadow:3px 3px 3px 0 rgba(200,200,200,0.5)
}

.string-rotate:hover {
-webkit-animation:vibrate 4s 1;
animation:vibrate 4s 1
}

@-webkit-keyframes vibrate {
0% {
-webkit-transform:rotateZ(45deg);
-webkit-animation-timing-function:ease-in
}

12.5% {
-webkit-transform:rotateZ(55deg);
-webkit-animation-timing-function:ease-in
}

25% {
-webkit-transform:rotateZ(45deg);
-webkit-animation-timing-function:ease-in
}

37.5% {
-webkit-transform:rotateZ(35deg);
-webkit-animation-timing-function:ease-in
}

50% {
-webkit-transform:rotateZ(45deg);
-webkit-animation-timing-function:ease-in
}

62.5% {
-webkit-transform:rotateZ(50deg);
-webkit-animation-timing-function:ease-in
}

75% {
-webkit-transform:rotateZ(45deg);
-webkit-animation-timing-function:ease-in
}

87.5% {
-webkit-transform:rotateZ(40deg);
-webkit-animation-timing-function:ease-in
}

100% {
-webkit-transform:rotateZ(45deg);
-webkit-animation-timing-function:ease-in
}
}

@keyframes vibrate {
0% {
transform:rotateZ(45deg);
animation-timing-function:ease-in
}

12.5% {
transform:rotateZ(55deg);
animation-timing-function:ease-in
}

25% {
transform:rotateZ(45deg);
animation-timing-function:ease-in
}

37.5% {
transform:rotateZ(35deg);
animation-timing-function:ease-in
}

50% {
transform:rotateZ(45deg);
animation-timing-function:ease-in
}

62.5% {
transform:rotateZ(50deg);
animation-timing-function:ease-in
}

75% {
transform:rotateZ(45deg);
animation-timing-function:ease-in
}

87.5% {
transform:rotateZ(40deg);
animation-timing-function:ease-in
}

100% {
transform:rotateZ(45deg);
animation-timing-function:ease-in
}
}

#fluidMotion ul {
list-style-type:none;
background:rgba(26,161,242,1);
padding:20px 0;
width:auto;
height:auto;
float:left
}

#fluidMotion ul li {
float:left
}

#fluidMotion ul li a {
text-decoration:none;
padding:22px;
color:#fff
}

#fluidMotion ul li a:hover {
-webkit-animation:fluidmotion .5s infinite alternate;
animation:fluidmotion .5s infinite alternate;
background-color:rgba(26,161,180,1)
}

@media screen and (max-width:450px) {
#fluidMotion ul {
list-style-type:none;
background:rgba(26,161,242,1);
padding:10px 0;
width:auto;
height:auto;
float:left
}

#fluidMotion ul li a {
text-decoration:none;
padding:12px;
color:#fff
}

#fluidMotion ul li a:hover {
-webkit-animation:fluidmotion .5s infinite alternate;
animation:fluidmotion .5s infinite alternate;
background-color:rgba(26,161,180,1)
}
}

#div {
width:50px;
height:50px;
border:1px solid #000;
background-color:green;
color:#fff
}

@-webkit-keyframes fluidmotion {
0% {
-webkit-animation-timing-function:ease-in-out;
zoom:100%
}

20% {
zoom:104%;
-webkit-animation-timing-function:ease-in-out
}

40% {
zoom:108%;
-webkit-animation-timing-function:ease-in-out
}

60% {
zoom:112%;
-webkit-animation-timing-function:ease-in-out
}

80% {
zoom:116%;
-webkit-animation-timing-function:ease-in-out
}

100% {
zoom:120%;
-webkit-animation-timing-function:ease-in-out
}
}

@keyframes fluidmotion {
0% {
animation-timing-function:ease-in-out;
zoom:100%
}

20% {
zoom:104%;
animation-timing-function:ease-in-out
}

40% {
zoom:108%;
animation-timing-function:ease-in-out
}

60% {
zoom:112%;
animation-timing-function:ease-in-out
}

80% {
zoom:116%;
animation-timing-function:ease-in-out
}

100% {
zoom:120%;
animation-timing-function:ease-in-out
}
}

#zoom ul {
list-style-type:none;
display:block;
background:rgba(200,200,200,0.5);
padding:10px;
width:auto;
height:auto;
border-radius:8px;
float:left
}

#zoom ul li {
float:left
}

#zoom ul li a {
display:block;
margin:auto;
text-decoration:none;
width:60px;
height:60px;
background-color:rgba(150,150,150,0.7);
color:#fff;
border-radius:10px;
line-height:60px;
vertical-align:middle;
text-align:center;
margin:1px
}

@media screen and (max-width:450px) {
#zoom ul {
padding:5px
}

#zoom ul li a {
display:block;
margin:auto;
text-decoration:none;
width:40px;
height:40px;
line-height:40px
}
}

#zoom ul li a:hover {
zoom:150%
}

.a {
background-color:#1aa1f2;
padding:15px 20px;
color:#fff;
text-decoration:none
}

.b {
background-color:#1aa1f2;
padding:15px 20px;
color:#fff;
text-decoration:none
}

.b:hover {
box-shadow:4px 4px 3px rgba(180,180,180,0.5)
}

.c {
background-color:none;
padding:15px 20px;
text-decoration:none;
border-radius:7px;
box-shadow:3px 3px 3px rgba(180,180,180,0.6),3px 3px 3px rgba(150,150,150,0.5) inset;
color:rgba(100,100,100,1)
}

.c:hover {
background-color:rgba(100,100,100,1);
color:#fff
}

.d {
background-color:none;
padding:15px 20px;
text-decoration:none;
border-radius:7px;
border:1px solid rgba(100,100,100,1);
color:rgba(100,100,100,1)
}

.d:hover {
background-color:rgba(100,100,100,1);
color:#fff
}

#navTest ul {
list-style-type:none;
margin-top:20px;
padding:0;
background-color:#1aa1f2;
width:100%;
height:auto;
float:left;
padding:20px 0
}

#navTest ul li {
float:left
}

#navTest ul li a {
text-decoration:none;
font-size:16px;
padding:23px 10px;
background-color:#1aa1f2;
color:#fff;
border-right:1px solid #d2d2d2
}

#navTest ul li a:hover {
box-shadow:1px 5px 2px rgba(210,210,210,0.6);
padding-top:25px
}

@media screen and (max-width:450px) {
#navTest ul {
list-style-type:none;
margin-top:20px;
padding:0;
background-color:#1aa1f2;
width:100%;
height:auto;
float:left;
padding:12px 0
}

#navTest ul li a {
padding:16px 4px
}

#navTest ul li a:hover {
padding-top:18px
}
}

#aside-container {
position:absolute;
left:10px;
top:25px;
width:200px;
min-width:200px;
height:auto
}

#aside {
overflow:auto;
width:100%;
height:auto;
background-color:#fafafa
}

#aside ul {
list-style-type:none;
padding:0;
margin:0;
border-radius:5px
}

#aside ul li a {
text-decoration:none;
display:block;
padding:7px 40px 7px 10px;
background-color:rgba(250,250,250,0.5);
border:solid rgba(200,200,200,0.5);
color:#000;
border-width:0 2px 2px
}

#aside ul li a::before {
content:"\25CB\00A0";
font-size:15px
}

#aside ul li a:hover {
background-color:rgba(200,200,200,0.5)
}

.smiling-face {
width:200px;
height:200px;
background-color:#ff0;
border-radius:50%;
position:relative
}

.left-eye {
width:23%;
height:20%;
border-radius:50%;
background-color:#f0f0f0;
position:absolute;
left:20%;
top:20%
}

.right-eye {
width:23%;
height:20%;
border-radius:50%;
background-color:#f0f0f0;
position:absolute;
right:20%;
top:20%
}

.left-pupil {
width:48%;
height:45%;
border-radius:50%;
background-color:#646464;
position:absolute;
top:55%;
left:26%
}

.right-pupil {
width:48%;
height:45%;
border-radius:50%;
background-color:#646464;
position:absolute;
top:55%;
left:26%
}

.lip {
width:52.5%;
height:25%;
background-color:#ff0;
border-radius:50%;
position:absolute;
left:23.75%;
top:45%;
border:solid red;
border-width:2px 0 0;
-webkit-transform:rotateZ(0deg);
transform:rotateZ(0deg)
}

.smiling-face:hover .lip {
-webkit-transition-timing-function:ease-in;
-webkit-transition:-webkit-transform .01s;
-webkit-transition-delay:2s;
-webkit-transform:rotateZ(180deg);
transition-timing-function:ease-in;
transition:-webkit-transform .01s;
transition-delay:2s;
transform:rotateZ(180deg)
}

.smiling-face:hover .left-pupil,.smiling-face:hover .right-pupil {
-webkit-transition-property:top,width,height;
-webkit-transition-duration:1s,0s,0s;
-webkit-transition-delay:0s,1s,1s;
transition-property:top,width,height;
transition-duration:1s,0s,0s;
transition-delay:0s,1s,1s;
top:27.5%;
width:46%;
height:43%
}

.circle {
width:200px;
height:200px;
background-color:none;
border-radius:50%;
position:relative;
left:30px;
top:30px;
background-color:none
}

.circle li {
position:absolute;
left:50%;
display:block;
height:50px;
width:50%;
background-color:none;
position:absolute;
top:37.5%
}

.circle li a {
display:block;
width:50px;
height:50px;
text-decoration:none;
text-align:center;
vertical-align:middle;
line-height:50px;
background-color:#b40000;
position:relative;
left:-25%;
border-radius:50%;
box-shadow:2px 2px 1px 0 rgba(200,200,200,0.5) inset;
color:#fff;
background-position:center;
background-size:52px
}

.circle:hover li a {
left:50%;
-webkit-animation:Circuling 1 1s;
animation:Circuling 1 1s
}

.circle:hover li a.share {
left:-25%;
-webkit-animation:none;
animation:none
}

.circle li.s1 {
-webkit-transform:rotateZ(0deg);
-webkit-transform-origin:left;
transform:rotateZ(0deg);
transform-origin:left
}

.circle li.s2 {
-webkit-transform:rotateZ(60deg);
-webkit-transform-origin:left;
transform:rotateZ(60deg);
transform-origin:left
}

.circle li.s3 {
-webkit-transform:rotateZ(120deg);
-webkit-transform-origin:left;
transform:rotateZ(120deg);
transform-origin:left
}

.circle li.s4 {
-webkit-transform:rotateZ(180deg);
-webkit-transform-origin:left;
transform:rotateZ(180deg);
transform-origin:left
}

.circle li.s5 {
-webkit-transform:rotateZ(240deg);
-webkit-transform-origin:left;
transform:rotateZ(240deg);
transform-origin:left
}

.circle li.s6 {
-webkit-transform:rotateZ(300deg);
-webkit-transform-origin:left;
transform:rotateZ(300deg);
transform-origin:left
}

@keyframes Circuling {
0% {
left:-25%
}

100% {
left:50%
}
}

@-webkit-keyframes Circuling {
0% {
left:-25%
}

100% {
left:50%
}
}

.socialLinks ul {
list-style-type:none;
background-color:rgba(255,255,255,0.1);
padding:29px 0;
width:0;
position:relative
}

.socialLinks ul li {
float:left
}

.socialLinks ul li a {
display:block;
padding:23px;
background-color:rgba(200,200,200,1);
text-decoration:none;
position:absolute;
top:0;
left:0;
border-radius:7px;
display:none
}

.socialLinks ul li a.li {
display:block;
background-image:url(/how-to-make/share-icon.png);
background-position:center
}

.socialLinks ul li a.go {
background-image:url(/how-to-make/google+-icon.png)
}

.socialLinks ul li a.fa {
background-image:url(/how-to-make/facebook-icon.png)
}

.socialLinks ul li a.tw {
background-image:url(/how-to-make/twitter-icon.png)
}

.socialLinks ul:hover {
width:220px
}

.socialLinks ul:hover li a.go {
-webkit-animation:go .7s 1;
animation:go .7s 1;
left:60px;
display:block
}

.socialLinks ul:hover li a.fa {
-webkit-animation:fa .7s 1;
animation:fa .7s 1;
left:120px;
display:block
}

.socialLinks ul:hover li a.tw {
-webkit-animation:tw .7s 1;
animation:tw .7s 1;
left:180px;
display:block
}

@-webkit-keyframes go {
0% {
left:0
}

100% {
left:60px
}
}

@-webkit-keyframes fa {
0% {
left:0
}

100% {
left:120px
}
}

@-webkit-keyframes tw {
0% {
left:0
}

100% {
left:180px
}
}

@keyframes go {
0% {
left:0
}

100% {
left:60px
}
}

@keyframes fa {
0% {
left:0
}

100% {
left:120px
}
}

@keyframes tw {
0% {
left:0
}

100% {
left:180px
}
}

.social1 {
position:relative;
right:0;
}

.social1 ul {
list-style-type:none;
background-color:rgba(255,255,255,0.1);
padding:29px 0;
width:0;
position:absolute;
right:0
}

.social1 ul li {
float:right
}

.social1 ul li a {
display:block;
padding:23px;
background-color:rgba(200,200,200,1);
text-decoration:none;
position:absolute;
top:0;
right:0;
border-radius:7px;
display:none;
background-position:center
}

.social1 ul li a.li {
display:block;
background-image:url(/how-to-make/share-icon.png);
background-position:center
}

.social1 ul li a.go {
background-image:url(/how-to-make/google+-icon.png)
}

.social1 ul li a.fa {
background-image:url(/how-to-make/facebook-icon.png)
}

.social1 ul li a.tw {
background-image:url(/how-to-make/twitter-icon.png)
}

.social1 ul:hover {
width:220px
}

.social1 ul:hover li a.go {
-webkit-animation:go1 .7s 1;
animation:go1 .7s 1;
right:60px;
display:block
}

.social1 ul:hover li a.fa {
-webkit-animation:fa1 .7s 1;
animation:fa1 .7s 1;
right:120px;
display:block
}

.social1 ul:hover li a.tw {
-webkit-animation:tw1 .7s 1;
animation:tw1 .7s 1;
right:180px;
display:block
}

@keyframes go1 {
0% {
right:0
}

100% {
right:60px
}
}

@keyframes fa1 {
0% {
right:0
}

100% {
right:120px
}
}

@keyframes tw1 {
0% {
right:0
}

100% {
right:180px
}
}

@-webkit-keyframes go1 {
0% {
right:0
}

100% {
right:60px
}
}

@-webkit-keyframes fa1 {
0% {
right:0
}

100% {
right:120px
}
}

@-webkit-keyframes tw1 {
0% {
right:0
}

100% {
right:180px
}
}

.social2 ul {
list-style-type:none;
background-color:rgba(255,255,255,0.1);
width:15px;
height:0;
position:absolute
}

.social2 ul li a {
display:block;
padding:23px;
background-color:rgba(200,200,200,1);
text-decoration:none;
position:absolute;
top:0;
left:0;
border-radius:7px;
display:none
}

.social2 ul li a.li {
display:block;
background-image:url(/how-to-make/share-icon.png);
background-position:center
}

.social2 ul li a.go {
background-image:url(/how-to-make/google+-icon.png)
}

.social2 ul li a.fa {
background-image:url(/how-to-make/facebook-icon.png)
}

.social2 ul li a.tw {
background-image:url(/how-to-make/twitter-icon.png)
}

.social2 ul:hover {
height:220px
}

.social2 ul:hover li a.go {
-webkit-animation:go2 .7s 1;
animation:go2 .7s 1;
top:60px;
display:block
}

.social2 ul:hover li a.fa {
-webkit-animation:fa2 .7s 1;
animation:fa2 .7s 1;
top:120px;
display:block
}

.social2 ul:hover li a.tw {
-webkit-animation:tw2 .7s 1;
animation:tw2 .7s 1;
top:180px;
display:block
}

@keyframes go2 {
0% {
top:0
}

100% {
top:60px
}
}

@keyframes fa2 {
0% {
top:0
}

100% {
top:120px
}
}

@keyframes tw2 {
0% {
top:0
}

100% {
top:180px
}
}

@-webkit-keyframes go2 {
0% {
top:0
}

100% {
top:60px
}
}

@-webkit-keyframes fa2 {
0% {
top:0
}

100% {
top:120px
}
}

@-webkit-keyframes tw2 {
0% {
top:0
}

100% {
top:180px
}
}

.square-comment {
position:absolute;
width:150px;
height:80px;
background:#90ee90;
border-radius:4px
}

.square-comment::after {
position:absolute;
content:"";
top:80px;
left:20px;
border-top:30px solid #90ee90;
border-right:30px solid transparent
}

.round-comment {
width:120px;
height:115px;
border-radius:50%;
background:#90ee90;
text-align:center;
position:absolute;
font-size:15px;
vertical-align:180px;
vertical-align:middle
}

.round-comment p {
position:absolute;
top:32px
}

.round-comment::after {
position:absolute;
content:"";
border-top:40px solid #90ee90;
border-right:30px solid transparent;
top:95px;
left:20px
}

.square1-comment {
position:absolute;
width:200px;
height:100px;
background:#90ee90;
border-radius:1px
}

.square1-comment::after {
position:absolute;
content:" ";
top:100px;
left:20px;
border-top:20px solid #90ee90;
border-right:10px solid transparent;
border-left:10px solid transparent
}