a{text-decoration:none;color:#000;}
a:hover{color:#6db33f}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p{padding:0;margin:0;}
ul,li{list-style:none;}
body{font-family:Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Oxygen,Ubuntu,Cantarell,"Open Sans",sans-serif;font-size:16px;background-color:#f1f1f1;}
code { font-family:Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Oxygen,Ubuntu,Cantarell,"Open Sans",sans-serif; }
.center{text-align:center;}
.wrapper{max-width:1224px;margin:0 auto;}

.mt10 {margin-top: 10px;}

#header{border-top:4px solid #6db33f;background-color:#34302d;overflow:hidden;}
.header-wrap {display: flex; justify-content: space-between; align-items: center;}

#navbar{margin-left:60px; display: flex;}
#container{margin-top:20px;min-height:100%; }
.jumbotron{background-color:#666;height:180px;overflow:hidden;}

.form-searchbox{display:flex; align-items:center; position:relative; margin: 46px auto 20px; width: 600px; }
.form-text{line-height:1.3333333; font-size:1.2em;color:#fff;width:600px;margin:0 auto;padding:10px;background-color:#34302d;outline:none;border:2px solid #6db33f;}

.form-icon {width:40px;height:20px;border:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAABbklEQVQ4jZ3Uv2pUURDH8c9uMBKwjb2CYlyNgiC2K7eIveALxH9Y+SLaWMQYC7G1sFAIbNAHSJHENYIIQeu8gAQiFud3lusaw64Dhzt3zm++dzhn5nYGg4Exu4hl3MKZxPawjjV8aYubpgHdVmwWzzDEY1zAyayFxIZYwdz417styHs8SmwV15MwF381e/fxLjl/gZ6iwTdcjXgTP7M2E7uEr7iJJ+OgXkRwGzvjZbdsF3fiP0juCLSMmZT+6RhItZ1oZ5I7Ai3FfzEBpFrV1lxdnI0/nAJUtTX3j+ufxuqNHbRBe/EvTwE6n+ePNmg9/t0pQPfy3GiDXuIwm4sTQBajPVRGZgT6jOd5f4Mrx0B6eBv/VXJHIMocbeActpV5uqYc6qn4K0msg3wD8xXUaU3/rNL2D/37Nn/htTJ7C0qn95um2e8c8RvpKQe/pPTJAb6n4rVUdRofot1F/yjQpDaPj4Ft/W9Dwj762MKJ35QeTKGFHIwgAAAAAElFTkSuQmCC) no-repeat 0 0;cursor:pointer; position: absolute;  right: 0px;}
.search-tags{width:600px;line-height:24px;margin:20px auto 0;}
.search-tags li{display:inline-block;background-color:#6db33f;color:#fff;margin-right:10px;margin-bottom:10px;padding:2px 6px;cursor:pointer;}
.search-tags li:hover{background-color:#000}
.search-tags a{color: #ffffff} 
table{border:1px solid #ccc;border-collapse:collapse;}
table h3{color: #6db33f}
table span{ color: #666;}
.table {width:100%;}
thead{background-color:#f00;color:#fff;}
td{border:1px solid #ccc;padding:10px;}
th{padding:10px;border:1px solid #f00;}
tbody tr:hover{background-color:#eee;}

a.category{ background-color:#6db33f;color:#fff;width:100px;text-align:center;font-size:.8em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:30px;line-height:30px;margin:10px;padding:0 6px;}
a.category:hover{background-color:#666;}
 
.nav-item a{color:#fff;line-height:50px;height:50px;padding:0 16px;display:inline-block;text-transform:uppercase; transition: all 0.3s ease;}
.nav-item a:hover {background-color:#86b33f;}
.nav-item.active {background-color:#6db33f;}

.logo{ display: flex; align-items:center; margin-left:10px; width:40px;height:40px;background-image:url('logo.svg'); background-repeat: no-repeat;transition: all 0.3s ease;}
.logo a{display:block; padding-left: 50px;   color: #eee; font-size: 28px;}
.logo em{font-style: normal; color: #6db33f;}
.logo:hover { opacity: .85;}
.span{margin-left:2%;}
.panel-wrapper{    display: flex; margin-bottom:20px;overflow:hidden;}
.panel{ flex: 1;}
.panel h2{font-size:1em;}
.panel h2 a{color:#fff;background-color:#6db33f;display:inline-block;padding:6px 10px;font-size:1em;text-transform:uppercase;}
.panel h2 a:hover{background-color:#666;}
.panel ul{background-color:#fff;overflow:hidden;}
.panel li{padding:8px 10px;}
.panel-item{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.panel-item a{color:#888;font-size:1.2em}
.panel-item a:hover{color:#6db33f}
.panel .category{margin-right:10px}
.article-main,.list-main,.tags-main{  width: 100%;}
  
.menu {	display: none;	width: 24px;}
.menu span, .menu::before,.menu::after {
	content: '';
	display: block;
	background-color: #ccc;
    width: 24px;
    height: 3px;
	margin: 5px 0;
}

.list-wrap, .article-wrap, .tags-wrap {	display: flex; justify-content: space-between;}
.list-main ul{background-color:#fff;margin-top:16px;}
.list-main li{display: flex;justify-content: space-between;font-size:1.2em;border-bottom:1px solid #eee;line-height:50px;height:50px;padding:0 10px;overflow: hidden;}
.list-main li:last-child{border-bottom:none;}
.list-main .list-item{ display: flex;justify-content: space-between;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

.article{ margin-top:16px; padding:20px; background-color:#fff;}
.article h1{font-weight:400;font-family:Montserrat,sans-serif;}
.article .category{line-height:1em;padding:4px 10px;color:#fff;background-color:#6db33f;display:inline-block;}
.content{margin:20px 0;color:#34302d;}
.content img{max-width:660px;}
.content h2{ margin: 10px 0;font-size:1.5em;font-family:Montserrat,sans-serif;color:#6db33f}
.content h3{line-height:2em;}
.content p{font-family:"Varela Round",sans-serif;line-height:1.6em;margin:16px 0;}
.content a{color:#6db33f;font-weight:600;display:inline-block;word-break: break-word;}
.content a:hover{color:#f00;}
.content ul{margin-left:25px;color:#34302d}
.content li{list-style-type:square;line-height:1.6em;}
.content table p{ margin: 0; line-height: 1em; color: #666}
.content table h3{ display: inline-block;}
.content table em{  font-style: normal; color: #f00; font-size: 0.8em; margin-top: 10px; }

.aside{ width:300px; margin-left:20px; }

ul.steps{margin:6px 0;}
ul.steps b{ color: #666; font-style: italic;}
ul.steps span{margin-right:10px;}
ul.steps li{list-style-type:none;display:inline-block;border:1px solid #eee;padding:0 6px;margin-right:6px;margin-bottom:10px;background-color:#fafafa;color:#ed6a43;}
ul.steps li:after{content:"\203a";padding-left:10px;}

.scroll-wrapper{width:100%;overflow:auto;}

.breadcrumb{font-size:18px; text-transform:uppercase;}
.breadcrumb a{color:#fff;background-color:#6db33f;display:inline-block;font-size:1em;padding:5px 10px;}
.breadcrumb a:after{content:"\203a";padding-left:8px;}
.breadcrumb a:last-child:after{content:none;}
.breadcrumb a:hover{background-color:#666}
.breadcrumb span{color:#fff;background-color:#666;display:inline-block;font-size:1em;padding:8px 10px;}
 
.pagination {margin-top:10px; text-align:center;}
.pagination a{    margin-top: 10px; color:#fff;background-color:#6db33f;}
.pagination a:hover{background-color:#666}
.pagination span{color:#666;background-color:#fff;}
.pagination a,.pagination span{display:inline-block;padding:6px 8px;margin-right:10px; margin-top:4px; margin-bottom: 4px;min-width:24px;text-align:center;font-size:1.2em}
.searchbar{overflow:hidden;}
.search-box { display: flex;}
.search-wrapper{    flex: 1; margin-right:20px;}
#search{ display:inline-block;width:100%;height:26px;line-height:1.3333333;font-size:1em;padding:2px 4px; outline:none;border:2px solid #6db33f;}

#go{background-color:#6db33f;color:#fff;border:none;padding:6px 13px;font-size:1.1em;text-transform:uppercase;cursor:pointer;}
#go:hover{background-color:#666;}

.subcategories{margin-top:14px;background-color:#fff;}
.subcategories ul{margin:10px;margin-left:30px;color:#6db33f;}
.subcategories li{line-height:36px;height:36px;border-bottom:1px solid #eee;list-style-type:square;}
.subcategories li:last-child{border-bottom:none;}
.autofit {position: sticky;top: 0;}
.article-tags{margin:14px 0;background-color:#fff;overflow:hidden;padding:10px;}
.article-tags .label{text-transform:uppercase;font-weight:800;}
.article-tags ul{margin-top:10px;}
.article-tags li{margin-right:4px;margin-top:10px;}
.article-tags a{color:#fff;display:inline-block;background-color:#6db33f;padding:4px 6px;}
.article-tags a:hover{background-color:#666;}
.tags{  margin-top:20px;background-color:#fff;overflow:hidden;}
.tags ul{margin:10px;}
.tags li{ margin-bottom:10px;margin-right:10px;}
.tags li:last-child{border-bottom:none;}
.tags a{color:#fff;display:inline-block;background-color:#6db33f;padding:8px 12px;}
.tags a:hover{background-color:#666;}
.icon-wrapper{clear: both;overflow:hidden;}
.icon-wrapper>.article{margin:0}
.icon-list{margin:16px auto;}
.icon-list li{display:inline-block;list-style-type:none;width:94px;height:90px;margin:2px auto;line-height:1em;cursor:pointer;text-align:center; }
.icon-list li:hover{ background-color: #ffe3a0; }
.icon-list li.selected{background-color: #c5e26d}
.icon-list span{display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sponsor {background-color: #fff;border: 1px solid #eee;overflow: hidden;}
.footer{padding:30px 0 10px;clear:both;text-align:center;color:#666;}


@media (min-width:801px) and (max-width:1024px) {
	#navbar{margin-left:0;}
	#navbar li:first-child{ display: none; }
	.wrapper{max-width:1010px;}
	.panel h2{margin-left:10px;}
	.panel ul{margin: 0 10px;}
	.banner { margin-left:10px; margin-right: 10px}
	.nav-item a { padding: 0 10px;}
	.icon-list li { width: 100px; }
	table{width: 660px;}
}

@media (max-width:800px){

	.logo{margin: 5px; }
	.menu {display: block; margin: 10px; position: relative; cursor: pointer;}
	.menu::before {
		position: absolute;
		top: -8px;
		transition: transform 0.3s ease-in-out;
	}
	.menu::after {
		position: absolute;
		bottom: -8px;
		transition: transform 0.3s ease-in-out;
	}


	#header[aria-expanded] #navbar {display:flex; flex-direction: column; width: 100%; margin-left: 0;}
	#header[aria-expanded] .logo {  text-indent: -200%;}
	#navbar{display:none; }

	#header[aria-expanded] .menu span{ background-color: transparent;}
	#header[aria-expanded] .menu::before{ top: 0; transform : rotate(45deg);}
	#header[aria-expanded] .menu::after{ bottom: 0; transform: rotate(-45deg)}

	.content img{ max-width: 100%;}


	.nav-item {text-align: center;}

	.nav-item a { display: block; }
	.form-searchbox{margin:0; width: 100%;}
	.form-text{ flex: 1;margin:20px auto}
	.search-tags{ margin:0 auto 10px;    width: 100%;}
	.span{margin:0;}
	.panel-wrapper{margin:0; flex-direction: column;}
	.panel{width:auto;margin-bottom:20px;}
	.panel h2, .panel ul{margin:0}

	.table {
		width: 660px;
	}

	.list-wrap, .article-wrap, .tags-wrap { flex-direction: column; }
	.category{display:none;}
	.wrapper{width:94%}
	.breadcrumb{margin-top:0; }
	.jumbotron{height:auto;}
	.list-main,.article-main,.tags-main{width:auto;}
	.aside{margin:20px auto;width:100%;}
	.icon-list{text-align:center;}
}