@import 'demo.css';@import 'font-awesome.css';*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}::selection{background:0 0}::-moz-selection{background:0 0}.wrapper-demo{margin:60px 0 0;*zoom:1;font-weight:400}.wrapper-demo:after{clear:both;content:"";display:table}.wrapper-dropdown-1{position:relative;width:200px;padding:10px;margin:0 auto;background:#9bc7de;color:#fff;outline:0;cursor:pointer;font-weight:700}.wrapper-dropdown-1:after{content:"";width:0;height:0;position:absolute;right:16px;top:50%;margin-top:-6px;border-width:6px 0 6px 6px;border-style:solid;border-color:transparent #fff}.wrapper-dropdown-1 .dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;list-style:none;font-weight:400;opacity:0;pointer-events:none}.wrapper-dropdown-1 .dropdown li a{display:block;text-decoration:none;color:#9e9e9e;padding:10px 20px}.wrapper-dropdown-1 .dropdown li:hover a{background:#f3f8f8}.wrapper-dropdown-1.active .dropdown{opacity:1;pointer-events:auto}.wrapper-dropdown-1.active:after{border-color:#9bc7de transparent;border-width:6px 6px 0;margin-top:-3px}.wrapper-dropdown-1.active{background:#9bc7de;background:-moz-linear-gradient(left,#9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,#9bc7de),color-stop(78%,#9bc7de),color-stop(78%,#ffffff),color-stop(100%,#ffffff));background:-webkit-linear-gradient(left,#9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);background:-o-linear-gradient(left,#9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);background:-ms-linear-gradient(left,#9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);background:linear-gradient(to right,#9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc7de',endColorstr='#ffffff',GradientType=1 )}.no-opacity .wrapper-dropdown-1 .dropdown,.no-pointerevents .wrapper-dropdown-1 .dropdown{display:none;opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-1.active .dropdown,.no-pointerevents .wrapper-dropdown-1.active .dropdown{display:block}.wrapper-dropdown-2{position:relative;width:200px;margin:0 auto;padding:10px 15px;background:#fff;border-left:5px solid grey;cursor:pointer;outline:0}.wrapper-dropdown-2:after{content:"";width:0;height:0;position:absolute;right:16px;top:50%;margin-top:-3px;border-width:6px 6px 0;border-style:solid;border-color:grey transparent}.wrapper-dropdown-2 .dropdown{position:absolute;top:100%;left:-5px;right:0;background:#fff;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;list-style:none;opacity:0;pointer-events:none}.wrapper-dropdown-2 .dropdown li a{display:block;text-decoration:none;color:#333;border-left:5px solid;padding:10px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.wrapper-dropdown-2 .dropdown li:nth-child(1) a{border-left-color:#00aced}.wrapper-dropdown-2 .dropdown li:nth-child(2) a{border-left-color:#4183c4}.wrapper-dropdown-2 .dropdown li:nth-child(3) a{border-left-color:#3b5998}.wrapper-dropdown-2 .dropdown li i{margin-right:5px;color:inherit;vertical-align:middle}.wrapper-dropdown-2 .dropdown li:hover a{color:grey}.wrapper-dropdown-2.active:after{border-width:0 6px 6px}.wrapper-dropdown-2.active .dropdown{opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-2 .dropdown,.no-pointerevents .wrapper-dropdown-2 .dropdown{display:none;opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-2.active .dropdown,.no-pointerevents .wrapper-dropdown-2.active .dropdown{display:block}.wrapper-dropdown-3{position:relative;width:200px;margin:0 auto;padding:10px;background:#fff;border-radius:7px;border:1px solid rgba(0,0,0,.15);box-shadow:0 1px 1px rgba(50,50,50,.1);cursor:pointer;outline:0;font-weight:700;color:#8aa8bd}.wrapper-dropdown-3:after{content:"";width:0;height:0;position:absolute;right:15px;top:50%;margin-top:-3px;border-width:6px 6px 0;border-style:solid;border-color:#8aa8bd transparent}.wrapper-dropdown-3 .dropdown{position:absolute;top:140%;left:0;right:0;background:#fff;border-radius:inherit;border:1px solid rgba(0,0,0,.17);box-shadow:0 0 5px rgba(0,0,0,.1);font-weight:400;-webkit-transition:all .5s ease-in;-moz-transition:all .5s ease-in;-ms-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in;list-style:none;opacity:0;pointer-events:none}.wrapper-dropdown-3 .dropdown:after{content:"";width:0;height:0;position:absolute;bottom:100%;right:15px;border-width:0 6px 6px;border-style:solid;border-color:#fff transparent}.wrapper-dropdown-3 .dropdown:before{content:"";width:0;height:0;position:absolute;bottom:100%;right:13px;border-width:0 8px 8px;border-style:solid;border-color:rgba(0,0,0,.1) transparent}.wrapper-dropdown-3 .dropdown li a{display:block;padding:10px;text-decoration:none;color:#8aa8bd;border-bottom:1px solid #e6e8ea;box-shadow:inset 0 1px 0 #fff;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.wrapper-dropdown-3 .dropdown li i{float:right;color:inherit}.wrapper-dropdown-3 .dropdown li:first-of-type a{border-radius:7px 7px 0 0}.wrapper-dropdown-3 .dropdown li:last-of-type a{border:0;border-radius:0 0 7px 7px}.wrapper-dropdown-3 .dropdown li:hover a{background:#f3f8f8}.wrapper-dropdown-3.active .dropdown{opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-3 .dropdown,.no-pointerevents .wrapper-dropdown-3 .dropdown{display:none;opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-3.active .dropdown,.no-pointerevents .wrapper-dropdown-3.active .dropdown{display:block}.wrapper-dropdown-4{position:relative;width:270px;margin:0 auto;padding:10px 10px 10px 30px;background:#fff;border:1px solid silver;cursor:pointer;outline:0}.wrapper-dropdown-4:after{content:"";width:0;height:0;position:absolute;right:10px;top:50%;margin-top:-3px;border-width:6px 6px 0;border-style:solid;border-color:#ffaa9f transparent}.wrapper-dropdown-4 .dropdown{position:absolute;top:100%;margin-top:1px;left:-1px;right:-1px;background:#fff;border:inherit;border-top:0;list-style:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;opacity:0;pointer-events:none}.wrapper-dropdown-4 .dropdown:before,.wrapper-dropdown-4:before{content:"";width:4px;height:100%;position:absolute;top:0;left:15px;border:1px solid #ffaa9f;border-top:0;border-bottom:0;z-index:2}.wrapper-dropdown-4 .dropdown li{position:relative}.wrapper-dropdown-4 .dropdown li label{display:block;padding:10px 10px 10px 30px;border-bottom:1px dotted #1ccfcf;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.wrapper-dropdown-4 .dropdown li:last-of-type label{border:0}.wrapper-dropdown-4 .dropdown li input{position:absolute;display:block;right:10px;top:50%;margin-top:-8px}.wrapper-dropdown-4 .dropdown li:hover label{background:#f0f0f0}.wrapper-dropdown-4 .dropdown li input:checked~label{color:grey;text-decoration:line-through}.wrapper-dropdown-4.active:after{border-width:0 6px 6px}.wrapper-dropdown-4.active .dropdown{opacity:1;pointer-events:auto}.no-opacity wrapper-dropdown-4 .dropdown,.no-pointerevents .wrapper-dropdown-4 .dropdown{display:none;opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-4.active .dropdown,.no-pointerevents .wrapper-dropdown-4.active .dropdown{display:block}.wrapper-dropdown-5{position:relative;width:200px;margin:0 auto;padding:12px 15px;background:#fff;border-radius:5px;box-shadow:0 1px 0 rgba(0,0,0,.2);cursor:pointer;outline:0;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.wrapper-dropdown-5:after{content:"";width:0;height:0;position:absolute;top:50%;right:15px;margin-top:-3px;border-width:6px 6px 0;border-style:solid;border-color:#4cbeff transparent}.wrapper-dropdown-5 .dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:0 0 5px 5px;border:1px solid rgba(0,0,0,.2);border-top:0;border-bottom:0;list-style:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;max-height:0;overflow:hidden}.wrapper-dropdown-5 .dropdown li{padding:0 10px}.wrapper-dropdown-5 .dropdown li a{display:block;text-decoration:none;color:#333;padding:10px 0;transition:all .3s ease-out;border-bottom:1px solid #e6e8ea}.wrapper-dropdown-5 .dropdown li:last-of-type a{border:0}.wrapper-dropdown-5 .dropdown li i{margin-right:5px;color:inherit;vertical-align:middle}.wrapper-dropdown-5 .dropdown li:hover a{color:#57a9d9}.wrapper-dropdown-5.active{border-radius:5px 5px 0 0;background:#4cbeff;box-shadow:none;border-bottom:0;color:#fff}.wrapper-dropdown-5.active:after{border-color:#82d1ff transparent}.wrapper-dropdown-5.active .dropdown{border-bottom:1px solid rgba(0,0,0,.2);max-height:400px}