/* Reset */
*,
*:after,
*:before{-webkit-box-sizing: border-box;box-sizing: border-box;}
.clearfix:before,
.clearfix:after{display: table;content: '';}
.clearfix:after{clear: both;}
body{font-family: "Avenir Next", Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;color: #fff;background: #252323;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow-y: scroll;overflow-x: hidden;width: 100vw;}
button:focus{outline: none;}
.hidden{position: absolute;overflow: hidden;width: 0;height: 0;pointer-events: none;}
.htmleaf-container{margin: 0 auto;text-align: center;overflow: hidden;}
.htmleaf-content{font-size: 150%;padding: 1em 0;}
.htmleaf-content h2{margin: 0 0 2em;opacity: 0.1;}
.htmleaf-content p{margin: 1em 0;padding: 5em 0 0 0;font-size: 0.65em;}
.bgcolor-1{background: #f0efee;}
.bgcolor-2{background: #f9f9f9;}
.bgcolor-3{background: #e8e8e8;}/*light grey*/
.bgcolor-4{background: #2f3238; color: #fff;}/*Dark grey*/
.bgcolor-5{background: #df6659; color: #521e18;}/*pink1*/
.bgcolor-6{background: #2fa8ec;}/*sky blue*/
.bgcolor-7{background: #d0d6d6;}/*White tea*/
.bgcolor-8{background: #3d4444; color: #fff;}/*Dark grey2*/
.bgcolor-9{background: #ef3f52; color: #fff;}/*pink2*/
.bgcolor-10{background: #64448f; color: #fff;}/*Violet*/
.bgcolor-11{background: #3755ad; color: #fff;}/*dark blue*/
.bgcolor-12{background: #3498DB; color: #fff;}/*light blue*/
/* Header */
.htmleaf-header{padding: 1em 190px 1em;letter-spacing: -1px;text-align: center;}
.htmleaf-header h1{font-weight: 600;font-size: 2em;line-height: 1;margin-bottom: 0;font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;}
.htmleaf-header h1 span{font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;display: block;font-size: 60%;font-weight: 400;padding: 0.8em 0 0.5em 0;color: #c3c8cd;}
.htmleaf-demos{margin: 2em 0 0;}
.htmleaf-demos a{display: inline-block;margin: 0 0.5em;}
.htmleaf-demos a.current-demo{color: #fff;}
/* Top Navigation Style */
.htmleaf-links{position: relative;display: inline-block;white-space: nowrap;font-size: 1.5em;text-align: center;}
.htmleaf-links::after{position: absolute;top: 0;left: 50%;margin-left: -1px;width: 2px;height: 100%;background: #dbdbdb;content: '';-webkit-transform: rotate3d(0,0,1,22.5deg);transform: rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display: inline-block;margin: 0.5em;padding: 0em 0;width: 1.5em;text-decoration: none;}
.htmleaf-icon span{display: none;}
.htmleaf-icon:before{margin: 0 5px;text-transform: none;font-weight: normal;font-style: normal;font-variant: normal;font-family: 'icomoon';line-height: 1;speak: none;-webkit-font-smoothing: antialiased;}
/* footer */
.htmleaf-footer{width: 100%;padding-top: 10px;}
.htmleaf-small{font-size: 0.8em;}
.center{text-align: center;}
body #cdawrap{top: 15px;right: auto;left: 15px;background-color: rgba(0, 0, 0, 0.6);border: none;}
body #cdawrap .carbon-text{color: #EBEBEB;}
.content{padding: 1em 0 3em;max-width: 1080px;margin: 0 auto;}
/****/
.related{color: #fff;background: #333;text-align: center;font-size: 1.25em;padding: 0.5em 0;overflow: hidden;}
.related > a{vertical-align: top;width: calc(100% - 20px);max-width: 340px;display: inline-block;text-align: center;margin: 20px 10px;padding: 25px;font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;}
.related a{display: inline-block;text-align: left;margin: 20px auto;padding: 10px 20px;opacity: 0.8;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;-webkit-backface-visibility: hidden;}
.related a:hover,
.related a:active{opacity: 1;}
.related a img{max-width: 100%;opacity: 0.8;border-radius: 4px;}
.related a:hover img,
.related a:active img{opacity: 1;}
.related h3{font-family: "Microsoft YaHei", sans-serif;}
.related a h3{font-weight: 300;margin-top: 0.15em;color: #fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content: "\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content: "\e5001";}

@media screen and (max-width: 50em) {
	.htmleaf-header {
		padding: 2em 5%;
	}
}

@media screen and (max-width: 40em) {
	.htmleaf-header h1 {
		font-size: 2.15em;
	}
}