.clearfix:before, .clearfix:after {
  display: table;
  content: " ";
}

#canvas_container{
  display: none;
}

div.article-content-wrapper .favorites-pack{
  display: none;
}

div.hkecl-categ-columns-container{
  max-width: 1330px;
  margin: 0 auto;
  padding: 0 20px;
}
.category-banner {
  position: relative;
}
.category-banner img{
  width: 100%;
}
.category-banner p {
  position: absolute;
  color: #fff;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  /* transform: translate(-50%, 0); */
  bottom: 30px;
  /* left: 50%; */
  width: 100%;
  text-align: center;
  text-shadow: #000 1px 0 10px;
}
.category-description{
  /* font-size: 18px; */
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  padding: 50px 20px;
}
.level-selection {
  padding: 20px 0;
}
.hkecl-categ-content{
  /* font-size: 16px; */
  line-height: 1.5;
  margin-bottom: 50px;
}

.hkecl-categ-content hr{
  border-bottom: 3px dotted #717171;
  margin: 10px 0;
  border-top: 0;
}

.hkecl-categ-content>#channel-pack{
  display: none;
}

#hkecl-side h2, 
.layout-3rd #hkecl-side h2,
#hkecl-side .hkecl-h3 {
  border-bottom: 1px solid #717171;
  margin-bottom: 20px;
  font-size: 1.5em;
}

div#hkecl-columns-container{
  display: flex;
  width: calc( 100% - 10px);
}

.hkecl-columns-container h1, 
.hkecl-columns-container h2, 
.hkecl-columns-container h3, 
.hkecl-columns-container h4, 
.hkecl-columns-container h5, 
.hkecl-columns-container h6 {
  color: #454545;
}
/*
.layout-2nd.show-category-description .category-description {
  padding: 5px 0;
  display: block;
}
.layout-2nd.show-category-description .category-description .category-description-title {
  font-size: 4rem;
  font-weight: bold;
  color: #FFD50D;
  text-shadow: 1px 1px 10px #000, 2px 2px 20px #999 !important;
  line-height: 1.5;
}
.layout-2nd.show-category-description .category-description>p {
  color: #571212;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
}
*/
.breadcrumb{
  margin-top: 20px;
  /* font-size: 14px; */
}
.hkecl-categ-content .level-selection {
  margin-bottom: 30px;
}
.hkecl-categ-content .level-selection a {
  line-height: 30px;
  margin: 5px 0px 0 0;
  padding: 0px 10px;
  vertical-align: top;
  display: inline-block;
  min-width: 50px;
}
.hkecl-categ-content .level-selection a.btn {
  border: 1px #eee solid;
  background: none;
  color: #666;
  font-size: 1.6rem;
}
.hkecl-categ-content .level-selection a.btn.selected {
  border: 1px #F60 solid;
  color: #000;
}
.hkecl-categ-content .level-selection a.btn.selected:hover {
  opacity: 1;
}

.hkecl-categ-content h1, 
.hkecl-categ-content h2,
.hkecl-categ-content .hkecl-h2 {
  font-size: 200%;
  border-bottom: dotted 3px #717171;
  margin:10px 0;
  line-height: 1.5;
  font-size: 200%;
  font-weight: bold;
}
.layout-2nd .browse-sorting-option {
  text-align: right;
  margin-bottom: 5px;
}
.hkecl-categ-content .browse-sorting-option select {
  background-color: #F0F0F0;
  padding: 3px 10px;
  border-radius: 5px;
  width: fit-content;
  display: inline;
}
.subject-show-more {
  margin-top: 30px;
  color: #ffffff;
}
.subject-show-more a {
  background: #3A8CD0;
    border-radius: 10px;
    width: 20%;
    margin: 50px auto;
    padding: 10px 12px;
    /* font-size: 18px; */
    text-align: center;
    color: #ffffff;
}
body.layout-2nd #hkecl-side {
  padding: 50px 15px 15px 15px;
  /* font-size: 16px; */
  line-height: 1.5;
}
#latest-news {
  width: 100%;
  margin-bottom: 50px;
}
#tagcloud {
  border: 1px solid #BFBFBF;
  padding: 0.5em;
}
.tag {
  float: left;
  margin: 0.2em 0.5em;
}

div.resources-packages {
  margin: 20px 0 80px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 2%;
}
div.resources-packages article {
  background-color: #fff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border: none;
  overflow: hidden;
  width: 23%;
  max-width: 25%;
  margin: 0;
  background-color: #eee;
  border-radius: 5px;
}
div.resources-packages .hoti {
  margin: 20px 0 0 30px;
  padding: 2px 17px;
  max-width: 88px;
  width: auto;
  position: absolute;
  color: #FFF;
  background: #FE8C07;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.5em;
  z-index: 10;
}
html[lang="en"] div.resources-packages .hoti{
  font-size: 1em;
}
div.resources-packages.type-sec-level-listing article .article-image-container {
  width: 100%;
  padding: 0;
  overflow: hidden;
}
div.resources-packages article .article-image-container {
  text-align: center;
  padding: 5px;
}
div.resources-packages article .article-image-container a{
  display: block;
  line-height: 0;
}
div.resources-packages article .article-image-container img {
  width: 100%;
  transition: 1s ease;
}
div.resources-packages article .article-image-container img:hover{
	transform: scale(1.2);  /* zoom in the image upto 20% */
	cursor: pointer;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper {
  padding: 20px;
  /* font-size: 14px; */
  line-height: 1.5;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper a {
  color: #008CD6;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper .article-title {
  height: 110px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper .article-title a{
  font-weight: 700;
  /* font-size: 24px; */
  line-height: 1.5;
  color: #414141;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.field-tag span:not(:last-child)::after,
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.field-author span:not(:last-child)::after,
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.field-tag a:not(:last-child)::after,
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.field-author a:not(:last-child)::after
{
  content: "|";
  padding: 0 5px;
  color: #000;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.field-author, 
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.field-category{
  display: block;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper p {
  margin-bottom: 10px;
}
div.resources-packages article .article-content-wrapper .article-title, 
div.resources-packages article .article-content-wrapper div, div.resources-packages article .article-content-wrapper p {
  margin: 10px 0px;
  word-wrap: break-word;
  -ms-word-break: break-word;
  line-height: 1.5;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.field-category {
  color: #01633c;
}
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.upload-date, 
div.resources-packages.type-sec-level-listing article .article-content-wrapper .hkecl-channel-customized.resources-avaliable{
  display: block;
  text-align: right;
  min-height: 50px;
}
div.resources-packages article .article-content-wrapper .show-more {
  text-align: right;
}

div.resources-packages article.hide {
  display: none;
}

.pagination-block {
  text-align: center;
  width: 100%;
}
.pagination-block .page-numbers {
  display: inline;
  padding: 5px;
}

/* mobile */
@media only screen and (max-width: 767px){
  .category-banner p{
    font-size: 24px;
    bottom: 10px;
  }
  div#hkecl-columns-container{
    flex-direction: column;
    max-width: 100vw;
    width: 100vw;
    padding: 0;
  }
  div.hkecl-categ-content{
    /* min-width: unset; */
    /* width: calc( 100% - 40px); */
  }
  .layout-3rd .hkecl-columns-container img.photo-large{
    max-width: 100%;
  }
  div.resources-packages.type-sec-level-listing article .article-image-container {
    float: unset;
    width: 100%;
    min-width: unset;
    overflow: hidden;
  }
  div.resources-packages.type-sec-level-listing article .article-content-wrapper{
    margin-left: unset;
  }
  #hkecl-side{
    width: unset;
  }
  .category-description{
    text-align: justify;
    padding: 50px 0;
  }
  div.resources-packages article{
    width: 100%;
    max-width: 100%;
  }
  div.resources-packages.type-sec-level-listing article .article-content-wrapper .article-title{
    height: auto;
  }
  .subject-show-more a{
    width: auto;
  }
}
/* tablet */
@media only screen and (max-width: 1023px) and (min-width: 768px){
  .category-banner p{
    bottom: 20px;
  }
  div.resources-packages{
    gap: 30px 2%;
  }
  div.resources-packages article{
    width: 31%;
    max-width: 33%;
  }
}