// SECTIONS

.ht-section{
	padding: 24px;
	margin: 16px 0;
}
.ht-depth-1{

}

.ht-page-header{
	padding: 40px 0;
	.ph-title{
		margin: 0;
		line-height: 24px;
		font-size: 18px;
		font-weight: 400;
		color: $color-primary-text;
	}
	.ph-subtitle{
		margin: 16px 0 0;
		line-height: 18px;
		font-size: 14px;
		font-weight: 400;
		color: material-color('grey','600');
	}
	@media (min-width: $screen-sm-min){
		.ph-title{
			line-height: 30px;
			font-size: 24px;
		}
		.ph-subtitle{
			margin: 16px 0 0;
			line-height: 20px;
			font-size: 16px;
		}
	}
	&.dark-bg{
		.ph-title{
			color: #fff;
		}
		.ph-subtitle{
			color: material-color('grey','200');
		}
	}
}
.ht-section-header{
	margin: 24px 0;
	padding: 12px 16px;
	.sh-title{
		margin: 0 0 8px;
		line-height: 24px;
		font-size: 18px;
		font-weight: 500;
		&.has-bdb{
			margin: 0 0 16px;
			padding: 0 0 12px;
		}
	}
	.sh-subtitle{
		margin: 8px 0 0;
		line-height: 18px;
		font-size: 14px;
		font-weight: 400;
		color: material-color('grey','600');
		&.has-bdb{
			margin: 12px 0 16px;
			padding: 0 0 12px;
		}
	}
	.has-bdb{
		position: relative;
		&:after{
			content: "";
			display: block;
			position: absolute;
			width: 80px; height: 2px;
			bottom: 0; left: 0;
			background-color: material-color('blue','600');
		}
		&.text-center{
			&:after{
				left: 50%;
				margin-left: -40px;
			}
		}
	}
	@media (min-width: $screen-sm-min){
		.sh-title{
			margin: 0 0 12px;
			line-height: 30px;
			font-size: 24px;
			&.has-bdb{
				margin: 0 0 20px;
				padding: 0 0 16px;
			}
		}
		.sh-subtitle{
			margin: 12px 0 0;
			line-height: 20px;
			font-size: 16px;
			&.has-bdb{
				margin: 12px 0 16px;
				padding: 0 0 12px;
			}
		}
	}
}
.ht-page-navbar{
	background-color: #fff;
	.ht-wrap{
		position: relative;
	}
	.theme-category-menubar{
		@media (min-width: $screen-md-min){
			float: left; 
			width: 70%;
			padding-right: 16px;
		}
		.navbar-toggle-btn-wrap{
			display: block;
			.navbar-toggle {
				margin: 8px 0;
			  position: relative;
			  float: none;
			  padding: 8px 16px;
			  border: $border;
			  border-radius: 2px;
			}
		}
		.navbar-collapse {
	    padding-right: 0;
	    padding-left: 0;
	    border-top: 0;
	    box-shadow: 0 0 0;
		}
		@media (max-width: $screen-sm-max){
			ul.ht-menu-list{
				border-top: $border;
				li{
					a{
						color: $color-primary;
						&:active{
							background-color: material-color('grey','100');
						}
					}
				}
				& > li{
					border-bottom: $border;
					& > a{
						padding: 8px 16px;
						line-height: 20px;
						font-size: 16px;
					}
					&:last-child{
						border-bottom: 0;
					}
				}
				ul{
					border-top: $border;
					padding: 0 0 0 16px;
					li{
						border-top: 1px solid #eee;
						&:first-child{
							border-top: 0;
						}
						a{
							position: relative;
							padding: 8px 16px 8px 24px;
							line-height: 18px;
							font-size: 14px;
						}
					}
				}
			}
			ul.main-menu{
				//
			}
			ul.sort-menu{
				border-top-color: material-color('grey','400');
			}
		}
		@media (min-width: $screen-md-min){
			ul.ht-menu-list{
				& > li{
					& > a{
						padding: 16px 16px 16px;
						line-height: 20px;
						font-size: 14px;
						color: $color-primary-text;
					}
					&:hover{
						& > a{
							color: $color-primary;
							background-color: material-color('grey','50');
						}
					}
					ul{
						display: none;
						background-color: #fff;
						z-index: 95;
						@include box-shadow(0 1px 2px 2px rgba(#000,.1));
						&.ht-pull-right{
							right: 0; left: auto;
						}
						& > li{
							& > a{
								position: relative;
								padding: 8px 40px 8px 16px;
								line-height: 20px;
								font-size: 14px;
								color: #333;
								i{
									display: block;
									position: absolute;
									top: 8px; right: 12px;
									line-height: 20px;
								}
							}
							&:hover{
								& > a{
									padding: 8px 32px 8px 24px;
									background-color: material-color('grey','100');
								}
							}
							&{
								a:active{
									background-color: material-color('grey','200');
								}
							}
						}
						ul{
							background-color: #fff;
						}
					}
				}
				li{
					&:hover{
						& > ul{
							display: block;
						}
					}
				}
			}
			ul.main-menu{
				float: left;
			}
			ul.sort-menu{
				float: right;
			}
		}
	}
	.theme-search{
		padding: 8px 0;
		@media (max-width: $screen-sm-max){
			position: absolute;
			top: 0; right: 0;
			width: 65%;
		}
		@media (min-width: $screen-md-min){
			float: right;
			width: 30%;
		}
		.form-group{
			margin: 0;
		}
	}
}
.ht-free-register{
	padding: 16px 24px;
	.s-title{
		margin: 0 0 8px;
		line-height: 22px;
		font-size: 16px;
		font-weight: 400;
	}
	form{
		margin-top: 16px;
		padding: 12px 0;
	}
	.form-group{
		margin-bottom: 8px;
	}
	@media (min-width: $screen-sm-min){
		padding: 28px;
		.s-title{
			line-height: 24px;
			font-size: 18px;
		}
		.form-group{
			margin-bottom: 0;
		}
		.form-control{
			min-width: 360px;
			margin-right: 12px;
		}
	}
	@media (min-width: $screen-md-min){
		padding: 36px;
		.s-title{
			line-height: 30px;
			font-size: 24px;
		}
	}
}