.browsercomp td{text-align:left; box-shadow: 0px 0px 10px #fff;padding: 6px 6px 6px 12px;}
.browsercomp th{text-align:center; box-shadow: 0px 0px 10px #fff;padding: 6px 6px 6px 12px;}
.browsercomp{padding-right:25px;}
img{box-shadow: 5px 5px 5px rgba(0,0,0,0.7);}
.divrel2 img,.divrel3 img{box-shadow: 5px 5px 15px rgba(0,0,0,0);}
.easingeffects .hoverhere{position: absolute; top:90px;left: 40%;font-size:2em;font-family: "james_star", Arial, sans-serif; color: rgba(255,255,255,1)}
.easingeffects:hover .hoverhere{top:50px;font-size:2em;color: rgba(255,255,255,0);}
.easingeffects{position:relative;height:auto;width:95%;margin: 0.3em auto 1em auto; padding:10px 25px 10px 20px; background: rgba(0,0,30,0.3); border-radius:5px;-webkit-box-shadow: 0px 0px 15px 3px rgba(0,0,0,.75);box-shadow: 0px 0px 15px 3px rgba(0,0,0, .75);}
.easingeffects,.hoverhere{-webkit-transition: all 1s ease; transition: all 1s ease;}
.box01,.box02,.box03,.box04,.box05,.box06{margin:5px 0 5px 0;}
.box01 p,.box02 p,.box03 p,.box04 p,.box05 p,.box06 p{font-size:14px;margin:0;padding:0 0 3px 6px;}
.easingeffects:hover .box01 p,.easingeffects:hover .box03 p,.easingeffects:hover .box05 p{color:#fff;-webkit-transition: all 4s ease; transition: all 4s ease;}
.easingeffects:hover .box02 p,.easingeffects:hover .box04 p,.easingeffects:hover .box06 p{color:#000;-webkit-transition: all 4s ease; transition: all 4s ease;}
.box01 p,.box03 p,.box05 p{color:#000;-webkit-transition: all 4s ease; transition: all 4s ease;}
.box02 p,.box04 p,.box06 p{color:#fff;-webkit-transition: all 4s ease; transition: all 4s ease;}
.box01{height:26px;width:10%;border:2px solid #fff; background:yellow;-webkit-transition: all 2s ease; transition: all 2s ease;}
.box02{height:26px;width:10%;border:2px solid #fff; background:red;-webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}
.box03{height:26px;width:10%;border:2px solid #fff; background:yellow;-webkit-transition: all 2s ease-in; transition: all 2s ease-in;}
.box04{height:26px;width:10%;border:2px solid #fff; background:red;-webkit-transition: all 2s ease-out; transition: all 2s ease-out;}
.box05{height:26px;width:10%;border:2px solid #fff; background:yellow;-webkit-transition: all 2s linear; transition: all 2s linear;}
.box06{height:26px;width:10%;border:2px solid #fff; background:red;-webkit-transition: all 2s cubic-bezier(); transition: all 2s cubic-bezier(1,-0.25,0.5,1.2);}
.easingeffects:hover{background: rgba(0,0,30,1);border-radius:5px;-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);}
.easingeffects:hover .box01{height:26px;width:100%;border:2px solid #fff; background:red;-webkit-transition: all 4s ease; transition: all 4s ease;}
.easingeffects:hover .box02{height:26px;width:100%;border:2px solid #fff; background:yellow;-webkit-transition: all 4s ease-in-out; transition: all 4s ease-in-out;}
.easingeffects:hover .box03{height:26px;width:100%;border:2px solid #fff; background:red;-webkit-transition: all 4s ease-in; transition: all 4s ease-in;}
.easingeffects:hover .box04{height:26px;width:100%;border:2px solid #fff; background:yellow;-webkit-transition: all 4s ease-out; transition: all 4s ease-out;}
.easingeffects:hover .box05{height:26px;width:100%;border:2px solid #fff; background:red;-webkit-transition: all 4s linear; transition: all 4s linear;}
.easingeffects:hover .box06{height:26px;width:100%;border:2px solid #fff; background:yellow;-webkit-transition: all 4s cubic-bezier(); transition: all 4s cubic-bezier(1,-0.15,0.5,1.2);}
.txtdiv{width: 200px;height:150px;padding-top:50px}
.js-ex009,.js-ex010,.js-ex011,.js-ex012,.js-ex013,.js-ex014,.js-ex015,.js-ex017,.js-ex024b,.js-ex025{margin:0 auto 0 auto;font-family: "james_star", Arial, sans-serif;color: #FBFE8B;font-weight: normal;font-style: normal;text-align: center;font-size: 28px;}
h1,h2{text-shadow: 0 1px 0 #333,0 2px 0 #272727,1px 3px 0 #222,2px 4px 0 #171717,3px 5px 0 #111,4px 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),1px 3px 5px rgba(0,0,0,.25),3px 5px 10px rgba(0,0,0,.2),5px 10px 10px rgba(0,0,0,.15),10px 20px 20px rgba(0,0,0,.1);}
.js-exleft{float: left; margin: 0 2em 0.5em 1em;}
.js-exright,.js-exright2{float: right; margin: 0 1em 0.5em 2em;}
[class*='js-ex'] , .js-txt,.txtoverlay,.txtoverlay2,.txtoverlay3,.txtoverlay4,.divrel3 img,.hoverhere2,.css3imgslider02{-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
.js-exright img{border-radius:5px;}
.js-exright2 {overflow:hidden;box-shadow: 5px 5px 5px rgba(0,0,0,0.7);}
.js-exright2:hover .js-ex001b {-webkit-transform:scale(1.3);transform:scale(1.3);}
.js-exright2:hover .js-ex001c {-webkit-transform:scale(1);transform:scale(1);}
.js-ex001c {-webkit-transform:scale(1.3);transform:scale(1.3);}
.js-ex001:hover {-webkit-transform:scale(1.2);transform:scale(1.2);}
.js-ex002:hover{border-radius:50%;box-shadow: 0 10px 6px -6px #666;}
.js-ex003{border-top-left-radius: 120px !important; border-bottom-right-radius: 120px !important;}
.js-ex003:hover{border-top-left-radius: 15px !important; border-bottom-right-radius: 15px !important;border-top-right-radius: 120px; border-bottom-left-radius: 120px;}
.js-ex004{-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);}
.js-ex004:hover{-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75)}
.js-ex005:hover{-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.js-exright:hover .js-ex006{transform: rotateY(180deg);transform-style: preserve-3d;-webkit-transform: rotateY(180deg);-webkit-transform-style: preserve-3d;}
.js-ex007{opacity: 1;}
.js-ex007:hover{opacity: 0.4;-webkit-transform: translate(20px,-50px);transform: translate(20px,-50px);}
.js-ex008,.morph2{opacity: 1;}
.js-ex008:hover,.morph2:hover{-webkit-box-shadow: 0px 0px 15px 15px #fff;box-shadow: 0px 0px 15px 15px #fff;border-radius:50%;-webkit-transform: rotate(720deg);transform: rotate(720deg);opacity: 0.6;}
.js-ex009{text-shadow:none;}
.js-ex010:hover{color: rgba(0,0,0,0); text-shadow: 0 0 20px #FBFE8B;}
.js-ex011:hover{text-shadow:0px 0 15px #FFF;}
.js-ex009:hover{text-shadow: 0 1px 0 #666,0 2px 0 #555,0 3px 0 #444,0 4px 0 #333,0 5px 0 #222,0 6px 1px #111,0 0 5px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5),0 3px 5px rgba(0,0,0,.4),0 5px 10px rgba(0,0,0,.3),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.1);}
.divrel{position:relative;}
.divrel2{position:relative;overflow:hidden;}
.divrel3{position:relative;overflow:hidden;width:200px;height:150px;}
.divrel4{position:relative;width:200px;height:150px;}
.txtoverlay{position:absolute;top:0;left:0;opacity:0;width:200px;height:150px;background-color: rgba(0,0,30,0.5);border-radius:5px;-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);}
.txtoverlay:hover{opacity:1;}
.js-ex012,.js-ex013,.js-ex014,.js-ex015{padding-top:50px;}
.divrel .txtoverlay2 {position:absolute;top:0;left:0;width:200px;height:150px;background-color: rgba(0,0,30,0.5);border-radius:5px;-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);-webkit-transform: scale(0);transform: scale(0);}{}
.divrel:hover .txtoverlay2 {-webkit-transform: scale(1);transform: scale(1);}
.divrel2 .txtoverlay3 {position:absolute;top:0;left:0;width:200px;height:150px;background-color: rgba(0,0,30,0.5);border-radius:5px;-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);margin-top:-160px;}
.divrel2:hover .txtoverlay3 {margin-top:0;}
.divrel3 .txtoverlay4 {position:absolute;top:0;left:0;width:200px;height:150px;margin-left:-210px;}
.divrel3:hover .txtoverlay4 {margin-left:0;}
.divrel3:hover img {margin-left:210px;}
.divrel3 img {margin-left:0;}
.js-ex016{border-top-left-radius: 120px 30px !important; border-bottom-right-radius: 120px 30px !important;}
.js-ex016:hover{border-top-left-radius: 15px !important; border-bottom-right-radius: 15px !important;border-top-right-radius: 30px 120px; border-bottom-left-radius: 30px 120px;}
.divrel4 img{position:absolute;top:0;left:0;-webkit-transition: opacity 1.1s ease;transition: opacity 1.1s ease;}
.divrel4:hover .imgslide2{opacity:0;}
.morph2{-webkit-transition: all 0.7s cubic-bezier(1,-0.75,0.5,1.2); transition: all 0.7s cubic-bezier(1,-0.75,0.5,1.2);}
.js-ex020:hover{-webkit-transform: skew(0deg,20deg); transform: skew(0deg,20deg);}
.css3imgslider{height:150px;width:200px;position:relative;}
.css3imgslider img{position:absolute;top:0;left:0;}
.css3imgslider:hover img {
-webkit-animation-name: jamesstarslider01;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: jamesstarslider01;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@-webkit-keyframes jamesstarslider01 {
  0% {opacity:1;}
  20% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}
@keyframes jamesstarslider01{  0% {opacity:1;}
  20% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}

.css3imgslider img:nth-child(1) {-webkit-animation-delay: 8s;animation-delay: 8s;}
.css3imgslider img:nth-child(2) {-webkit-animation-delay: 6s;animation-delay: 6s;}
.css3imgslider img:nth-child(3) {-webkit-animation-delay: 4s;animation-delay: 4s;}
.css3imgslider img:nth-child(4) {-webkit-animation-delay: 2s;animation-delay: 2s;}
.css3imgslider img:nth-child(5) {-webkit-animation-delay: 0s;animation-delay: 0s;}
.css3imgslider02 .hoverhere2{position: absolute; top:60px;left:30px;font-size:1.5em;font-family: "james_star", Arial, sans-serif; color: rgba(255,255,255,1)}
.css3imgslider02:hover .hoverhere2{top:20px;font-size:1.5em;color: rgba(255,255,255,0);}
.css3imgslider02{height:150px;width:200px;position:relative;}
.css3imgslider02 img{position:absolute;top:0;left:0;opacity:0;}
.css3imgslider02:hover img {
-webkit-animation-name: jamesstarslider02;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: jamesstarslider02;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@-webkit-keyframes jamesstarslider02 {
  0% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
  20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);}
  30% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
  100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
@keyframes jamesstarslider02 {
  0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
  20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);}
  30% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
  100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
.css3imgslider02 img:nth-of-type(1) {-webkit-animation-delay: 8s;animation-delay: 8s;}
.css3imgslider02 img:nth-of-type(2) {-webkit-animation-delay: 6s;animation-delay: 6s;}
.css3imgslider02 img:nth-of-type(3) {-webkit-animation-delay: 4s;animation-delay: 4s;}
.css3imgslider02 img:nth-of-type(4) {-webkit-animation-delay: 2s;animation-delay: 2s;}
.css3imgslider02 img:nth-of-type(5) {-webkit-animation-delay: 0s;animation-delay: 0s;}
@-webkit-keyframes jsshake {
0% { -webkit-transform: rotate(0deg) translate(2px, 1px); }
10% { -webkit-transform: rotate(2deg) translate(1px, 2px); }
20% { -webkit-transform: rotate(-2deg) translate(3px, 0px) ; }
30% { -webkit-transform: rotate(0deg) translate(0px, -2px); }
40% { -webkit-transform: rotate(-2deg) translate(-1px, 1px); }
50% { -webkit-transform: rotate(2deg) translate(1px, -2px); }
60% { -webkit-transform: rotate(0deg) translate(3px, -1px); }
70%	{ -webkit-transform: rotate(2deg) translate(-2px, -1px); }
80% { -webkit-transform: rotate(-2deg) translate(1px, 1px); }
90% { -webkit-transform: rotate(0deg) translate(-2px, -2px); }
100% { -webkit-transform: rotate(2deg) translate(-1px, 2px); }
}
@keyframes jsshake {
0% { transform: rotate(0deg) translate(2px, 1px); }
10% { transform: rotate(2deg) translate(1px, 2px); }
20% { transform: rotate(-2deg) translate(3px, 0px) ; }
30% { transform: rotate(0deg) translate(0px, -2px); }
40% { transform: rotate(-2deg) translate(-1px, 1px); }
50% { transform: rotate(2deg) translate(1px, -2px); }
60% { transform: rotate(0deg) translate(3px, -1px); }
70% { transform: rotate(2deg) translate(-2px, -1px); }
80% { transform: rotate(-2deg) translate(1px, 1px); }
90% { transform: rotate(0deg) translate(-2px, -2px); }
100% { transform: rotate(2deg) translate(-1px, 2px); }
}
.js-ex021 img:hover {
	-webkit-animation-name: jsshake;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-name: jsshake;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@-webkit-keyframes bordercolorchanges {
    0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
    10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF; border-top-left-radius: 30px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
    20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
    30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 0px;}
    40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px;}
	50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF; border-top-left-radius: 90px; border-top-right-radius: 90px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px;}
    60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00; border-top-left-radius: 90px; border-top-right-radius: 90px; border-bottom-right-radius: 90px; border-bottom-left-radius: 90px;}
    70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000; border-top-left-radius: 30px; border-top-right-radius: 90px; border-bottom-right-radius: 90px; border-bottom-left-radius: 90px;}
	80% {box-shadow: 0px 0px 15px #008080; background-color: #800080; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 90px; border-bottom-left-radius: 90px;}
    90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F; border-top-left-radius: 10px; border-top-right-radius: 60px; border-bottom-right-radius: 10px; border-bottom-left-radius: 60px;}
    100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
}
@keyframes bordercolorchanges {
    0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
    10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF; border-top-left-radius: 30px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
    20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
    30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 0px;}
    40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px;}
	50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF; border-top-left-radius: 90px; border-top-right-radius: 90px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px;}
    60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00; border-top-left-radius: 90px; border-top-right-radius: 90px; border-bottom-right-radius: 90px; border-bottom-left-radius: 90px;}
    70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000; border-top-left-radius: 30px; border-top-right-radius: 90px; border-bottom-right-radius: 90px; border-bottom-left-radius: 90px;}
	80% {box-shadow: 0px 0px 15px #008080; background-color: #800080; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 90px; border-bottom-left-radius: 90px;}
    90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F; border-top-left-radius: 10px; border-top-right-radius: 60px; border-bottom-right-radius: 10px; border-bottom-left-radius: 60px;}
    100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
}
.js-ex022{width:200px;height:150px;position:relative;}
.js-ex022 .hoverhere2{position: absolute; top:60px;left:30px;font-size:1.5em;font-family: "james_star", Arial, sans-serif; color: rgba(255,255,255,1)}
.js-ex022:hover .hoverhere2{top:20px;font-size:1.5em;color: rgba(255,255,255,0);}
.js-ex022:hover {
	-webkit-animation-name: bordercolorchanges;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-name: bordercolorchanges;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.js-ex023{width:200px;height:150px;position:relative;}
.jstextarea{background-color:#FFF;top:50px;left:25px;width:160px;height:35px;position:absolute;border: 2px solid #333; box-shadow: 0px 0px 15px #000;padding-left:8px;}
.jstextarea:focus{background-color:#000030;top:0;left:0;height:150px;width:200px;border-radius:5px;border: 2px solid #d4d0ba; box-shadow: 0px 0px 15px #FFFFFF;padding:10px;}

.js-ex024{width:200px;height:150px;position:relative;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform-origin: 100% 75px;transform-origin: 100% 75px;}
.js-exright:hover .js-ex024{-webkit-transform: rotateX(-180deg);transform: rotateX(-180deg);}
.js-ex024a{width:200px;height:150px;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.js-ex024b{width:200px;height:150px;position:absolute;padding-top:50px;left:0;-webkit-transform: rotateX(180deg);transform: rotateX(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.jstooltip {position: relative; opacity: 0; top: -100px; left: 0px;width: 200px; padding: 3px;border-radius: 25px; -webkit-border-radius: 25px;background-color: rgba(0,0,30,0.5);-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);-webkit-transition: .5s; transition: .5s;-webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
.js-ex028 .jstooltip:after {position: absolute;top: 100%; left: 40%;height: 0; border-top-width: 1px; width:0px;border: 6px solid transparent;border-top: 6px solid rgba(0, 0, 30, 0.5);content: "Awesome!";color:#FFF; white-space: nowrap;}
.js-ex028:hover .jstooltip {opacity: 1; top: -255px;-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}