*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{font-size:100%;padding:0;margin:0;height:100%}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}body{font-family:"Helvetica Neue",Helvetica,Arial,'Microsoft YaHei',sans-serif,'Lato',Calibri;color:#777;background:#f6f6f6}a{color:#555;text-decoration:none;outline:none}a:hover,a:active{color:#777}a img{border:none}.main,.container>header{margin:0 auto}.container{height:100%}.container>header{padding-top:20px;padding-bottom:20px;text-align:center;background:rgba(0,0,0,.01)}.container>header h1{font-size:2.625em;line-height:1.3;margin:0;font-weight:300}.container>header span{display:block;font-size:60%;opacity:.3;padding:0 0 .6em .1em}.main{width:100%;height:100%;overflow:hidden}.demo-scroll{overflow-y:scroll;width:100%;height:100%}.column{float:left;width:50%;padding:0 2em;min-height:300px;position:relative}.column:nth-child(2){box-shadow:-1px 0 0 rgba(0,0,0,.1)}.column p{font-weight:300;font-size:2em;padding:0;margin:0;text-align:right;line-height:1.5}.htmleaf-top{background:#fff;background:rgba(255,255,255,.6);text-transform:uppercase;width:100%;font-size:.69em;line-height:2.2}.htmleaf-top a{padding:0 1em;letter-spacing:.1em;color:#888;display:inline-block}.htmleaf-top a:hover{background:rgba(255,255,255,.95);color:#333}.htmleaf-top span.right{float:right}.htmleaf-top span.right a{float:left;display:block}.htmleaf-icon:before{font-family:'codropsicons';margin:0 4px;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}.htmleaf-demos{padding-top:1em;font-size:.9em}.htmleaf-demos a{display:inline-block;margin:.2em;padding:.45em 1em;background:#999;color:#fff;font-weight:700;border-radius:2px}.htmleaf-demos a:hover,.htmleaf-demos a.current-demo,.htmleaf-demos a.current-demo:hover{opacity:.6}.htmleaf-nav{text-align:center}.htmleaf-nav a{display:inline-block;margin:20px auto;padding:.3em}.bb-custom-wrapper{width:420px;position:relative;margin:0 auto 40px;text-align:center}.demo-1 body{color:#87968e;background:#fff2e3}.demo-1 a{color:#72b890}.demo-1 .htmleaf-demos a{background:#72b890;color:#fff}.demo-2 body{color:#fff;background:#c05d8e}.demo-2 a{color:#d38daf}.demo-2 a:hover,.demo-2 a:active{color:#fff}.demo-2 .htmleaf-demos a{background:#883b61;color:#fff}.demo-2 .htmleaf-top a:hover{background:rgba(255,255,255,.3);color:#333}.demo-3 body{color:#87968e;background:#fff2e3}.demo-3 a{color:#ea5381}.demo-3 .htmleaf-demos a{background:#ea5381;color:#fff}.demo-4 body{color:#999;background:#fff2e3;overflow:hidden}.demo-4 a{color:#1baede}.demo-4 a:hover,.demo-4 a:active{opacity:.6}.demo-4 .htmleaf-demos a{background:#1baede;color:#fff}.demo-5 body{background:#fffbd6}.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:3em 0;overflow:hidden}.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:.8;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-backface-visibility:hidden}.related a:hover,.related a:active{opacity:1}.related a img{max-width:100%}.related a h3{font-weight:300;margin-top:.15em;color:#fff}@media screen and (max-width:40em){.htmleaf-icon span{display:none}.htmleaf-icon:before{font-size:160%;line-height:2}}@media screen and (max-width:46.0625em){.column{width:100%;min-width:auto;min-height:auto;padding:1em}.column p{text-align:left;font-size:1.5em}.column:nth-child(2){box-shadow:0 -1px 0 rgba(0,0,0,.1)}}@media screen and (max-width:25em){.htmleaf-icon span{display:none}}