#open-switcher, #close-switcher { position: fixed; top: 100px; left: 0px; z-index: 10000001; padding: 15px; background: #FFF; color: #666; cursor: pointer; border: 1px solid #ECECEC; border-left: 0px; }
#close-switcher { display: none; left: 200px; z-index: 10000002; }
#demo-colors { position: fixed; top: 100px; left: -202px; z-index: 10000000; width: 200px; height: 180px; background: #FFF; border: 1px solid #ECECEC; }
#demo-wrapper { width: 180px; margin: 0 auto; padding-top: 26px; }
#demo-wrapper h2 { margin-bottom: 15px; font-size: 15px; font-weight: bold; color: #000; }
#demo-wrapper ul { margin: 0; padding: 0; }
#demo-wrapper ul li { float: left; width: 26px; height: 26px; margin: 5px; cursor: pointer; list-style-type: none }
#demo-wrapper ul li.blue { background: #4FC1E9; }
#demo-wrapper ul li.yellow { background: #ffce54; }
#demo-wrapper ul li.orange { background: #FC6E51; }
#demo-wrapper ul li.pink { background: #FE91A4; }
#demo-wrapper ul li.black { background: #000; }
#demo-wrapper ul li.red { background: #ED5565; }
#demo-wrapper ul li.magenta { background: #D1417E; }
#demo-wrapper ul li.brown { background: #8B6759; }
#demo-wrapper ul li.purple { background: #B338A0; }
#demo-wrapper ul li.green { background: #48CFAD; }
#demo-wrapper p { font-size: 12px; padding-top: 10px; text-align: center; color: #999; cursor: pointer; }
#demo-wrapper p:hover { color: #000; }

@media screen and (max-width: 960px) { 

#open-switcher, #close-switcher, #demo-colors { display: none; }

}