#demosettings {
	width:auto;
	height:auto;
	background:#eee;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
	padding:5px;
	position:fixed;
	left:0;top:20%;
	z-index:9999;
}
#demosettings span{font-family:'Open Sans', sans-serif;}
#demosettings span.demo{color:#333;text-transform:uppercase;}
#options-icon{display:block;width:55px;height:57px;}
#options-icon i{
	color:#333;
	font-size:42px;
	position:absolute;
	left:5px;
	-webkit-animation:rotate 5s infinite linear;
	-moz-animation:rotate 5s infinite linear;
	-ms-animation:rotate 5s infinite linear;
	-o-animation:rotate 5s infinite linear;
	animation:rotate 5s infinite linear;
}
@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(359deg);}}
@-moz-keyframes rotate{from{-moz-transform:rotate(0deg);}to{-moz-transform:rotate(359deg);}}
@-ms-keyframes rotate{from{-ms-transform:rotate(0deg);}to{-ms-transform:rotate(359deg);}}
@-o-keyframes rotate{from{-o-transform:rotate(0deg);}to{-o-transform:rotate(359deg);}}
@keyframes rotate{from{transform:rotate(0deg);}to{transform:rotate(359deg);}}

#style-icon{margin-top: 15px;}
#style-icon,#icons-icon,#effects-icon{
	width:55px;
	height:40px;
	display:block;
	color: #666;
	font-size: 25px;
}

#demosettings #options,#demosettings #style,#demosettings #iconstyle,#demosettings #effects{display:none;}

#demosettings .choose{display:block;}
#demosettings .demo-element{display:block;width:35px;height:35px;background:#333;border:1px solid #aaa;cursor:pointer;margin:5px 10px;}
#demosettings .demo-element.selected{box-shadow:0 0 12px rgba(0,0,0,0.5);}

#demosettings .demo-element i{color:#eee;font-size:24px;position:absolute;left:25%;z-index:9999;}
#demosettings .demo-element#light i{color:#333;}

#demosettings #options > a span,
#demosettings .demo-element span{width:auto;height:auto;background:#eee;color:#333;font-size:14px;border-left: 3px solid #ccc;box-shadow: 0 0 10px rgba(0,0,0,0.3);opacity:0;padding:8px;position:fixed;left:65px;pointer-events:none;}
#demosettings #options > a:hover span,
#demosettings .demo-element:hover span{opacity:1;}

#demosettings .demo-element#dark{background:#252525;}
#demosettings .demo-element#light{background:#fff;}

#demosettings .fill{display:block;width:33px;height:33px;background:#ff0060;position:absolute;}

#demosettings .demo-element#icons-circled .fill{border-radius:50%;}
#demosettings .demo-element#icons-diamond .fill{width:22px;height:22px;margin:5px 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}

#demosettings .demo-element#fadein .fill{
	-webkit-animation:dfadeIn 2s infinite linear;
	-moz-animation:dfadeIn 2s infinite linear;
	-ms-animation:dfadeIn 2s infinite linear;
	-o-animation:dfadeIn 2s infinite linear;
	animation:dfadeIn 2s infinite linear;
}
@-webkit-keyframes dfadeIn{from{opacity:0;}to{opacity:1;}}
@-moz-keyframes dfadeIn{from{opacity:0;}to{opacity:1;}}
@-ms-keyframes dfadeIn{from{opacity:0;}to{opacity:1;}}
@-o-keyframes dfadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes dfadeIn{from{opacity:0;}to{opacity:1;}}

#demosettings .demo-element#zoomin .fill{
	-webkit-animation:dzoomIn 2s infinite linear;
	-moz-animation:dzoomIn 2s infinite linear;
	-ms-animation:dzoomIn 2s infinite linear;
	-o-animation:dzoomIn 2s infinite linear;
	animation:dzoomIn 2s infinite linear;
}
@-webkit-keyframes dzoomIn{from{-webkit-transform:scale(0);opacity:0;}to{-webkit-transform:scale(1);opacity:1;}}
@-moz-keyframes dzoomIn{from{-moz-transform:scale(0);opacity:0;}to{-moz-transform:scale(1);opacity:1;}}
@-ms-keyframes dzoomIn{from{-ms-transform:scale(0);opacity:0;}to{-ms-transform:scale(1);opacity:1;}}
@-o-keyframes dzoomIn{from{-o-transform:scale(0);opacity:0;}to{-o-transform:scale(1);opacity:1;}}
@keyframes dzoomIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}

#demosettings .demo-element#vspin .fill{
	-webkit-animation:dvspin 2s infinite linear;
	-moz-animation:dvspin 2s infinite linear;
	-ms-animation:dvspin 2s infinite linear;
	-o-animation:dvspin 2s infinite linear;
	animation:dvspin 2s infinite linear;
}
@-webkit-keyframes dvspin{from{-webkit-transform:rotateY(0deg);}to{-webkit-transform:rotateY(360deg);}}
@-moz-keyframes dvspin{from{-moz-transform:rotateY(0deg);}to{-moz-transform:rotateY(360deg);}}
@-ms-keyframes dvspin{from{-ms-transform:rotateY(0deg);}to{-ms-transform:rotateY(360deg);}}
@-o-keyframes dvspin{from{-o-transform:rotateY(0deg);}to{-o-transform:rotateY(360deg);}}
@keyframes dvspin{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}

#demosettings .demo-element#hspin .fill{
	-webkit-animation:dhspin 2s infinite linear;
	-moz-animation:dhspin 2s infinite linear;
	-ms-animation:dhspin 2s infinite linear;
	-o-animation:dhspin 2s infinite linear;
	animation:dhspin 2s infinite linear;
}
@-webkit-keyframes dhspin{from{-webkit-transform:rotateX(0deg);}to{-webkit-transform:rotateX(360deg);}}
@-moz-keyframes dhspin{from{-moz-transform:rotateX(0deg);}to{-moz-transform:rotateX(360deg);}}
@-ms-keyframes dhspin{from{-ms-transform:rotateX(0deg);}to{-ms-transform:rotateX(360deg);}}
@-o-keyframes dhspin{from{-o-transform:rotateX(0deg);}to{-o-transform:rotateX(360deg);}}
@keyframes dhspin{from{transform:rotateX(0deg);}to{transform:rotateX(360deg);}}

.ie6 #icons-icon,
.ie7 #icons-icon,
.ie8 #icons-icon,
.ie6 #iconstyle,
.ie7 #iconstyle,
.ie8 #iconstyle,
.ie6 #effects-icon,
.ie7 #effects-icon,
.ie8 #effects-icon,
.ie9 #effects-icon,
.ie6 #effects,
.ie7 #effects,
.ie8 #effects,
.ie9 #effects{display:none;}

@media only screen and (min-width:480px) and (max-width:767px){#demosettings{top:auto;bottom:0;}}
@media only screen and (max-width:479px){#demosettings{top:auto;bottom:0;}}