body{
    font-family: 'Noto Sans HK', sans-serif;
}
:root{
    --theme-red: #BE1622;
    --theme-blue: #3B5998;
    --theme-grey: #383C3A;
    --theme-light: #f7f7f7;
    --header-height: 80px;
}
a{
    color:var(--theme-grey)!important;
    text-decoration: none !important; 
}
a:hover {
    text-decoration: none;
    opacity: .9;
    color:var(--theme-red)!important;
}
a:hover img{
    opacity: .9!important;
}

img {
    width:100%;
}
.border-top-md {
    border-top:0!important;
}
@media (max-width:992px){
    .border-top-md{
        border-top:1px solid #ddd !important;
    }
}

.navbar {
    padding: 1.5rem 1rem  .2rem;
}

.logo {
    height:5.5vh;
    width:auto;
}

.navbar .subnav {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem 3rem;

}
    .social-media {
        margin-left: 2rem;
    }
    .social-media-icon {
        height: 3vh;
        width: auto;
    }
    .social-media-icon:hover{
        opacity: .8;
        text-decoration: none;
    }

.navbar #navbarNav {
    margin-top: 2rem;
}
#navbarNav .nav-item {
    padding: 0 .5rem;
}
#navbarNav .nav-link {
    font-size: 1rem;
    /* letter-spacing: 1px; */
    font-weight: 400;
}
#navbarNav .nav-link:hover {
    color:#BE1622 !important;
}

#navbarNav .navbar-nav .active a{
    color:#BE1622 !important;
    font-weight: 500;
}

@media (max-width:1328px){
    #navbarNav .nav-item {
        padding: 0.5rem;
        
    }
    #navbarNav .nav-link {
        font-size: 1rem;
        padding: 0 .5rem;
    }
    .social-media-icon {
        height: 3vh;
        width: auto;
    }
}
@media (max-width:1190px){
    .logo {
        height:5vh;
        width:auto;
    }
    #navbarNav .nav-link {
        font-size: .9rem;
        letter-spacing: 0px;
    }
}
@media (max-width:992px){
    .navbar {
        padding: .5rem 1rem;
    }
    
    .navbar #navbarNav {
        margin-top: 0rem;
        
    }
    .navbar #navbarNav .navbar-nav{
        padding-top: 2rem;
    
    }
    #navbarNav .nav-item {
        padding: .5rem;
    }
    #navbarNav .nav-link {
        font-size: 1.5rem;
        letter-spacing: 1px;
        font-weight: 400;
    }
}
.sub-nav-group {
    margin: 0!important;
}
.sub-nav-group ul{
    display: flex;
    margin: 0!important;

}
.sub-nav-group ul li{
    list-style: none;
    padding: 0 1rem;
}


.sub-nav-group ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 300;
}
.sub-nav-group ul li a:hover{
    color:#fff !important;
    opacity: .9;
}



.sub-nav-group ul .active{
    border-bottom: 3px solid #fff !important;
}

.subnav .nav .nav-item .nav-link:hover{
    color:#fff !important;
    opacity: .8;
}
.subnav .nav .nav-item .active{
    border-bottom: 3px solid #fff !important;
}


/*header */
header, .wrapper {
    margin-top: 40px;
}
@media (max-width:992px){
    header, .wrapper{
        margin-top: 20px;
    }
}


/*Homepage - 4 button*/
#home-btn .red-container a{
    color:#fff!important;
}
#home-btn .white-container{
    opacity: 1;
}
#home-btn .red-container a, 
#home-btn .white-container a{
    height: 180px;
}
#home-btn .red-container a h2, 
#home-btn .white-container a h2{
    margin-top: .3rem;
    letter-spacing: 2px;

}


/* 
a:hover {
    text-decoration: none;
    opacity: .9;
    color:var(--theme-red)!important;
} */






/*footer */
footer ul li a{
    color:#575E61;
    font-weight: 300;
    opacity: .8;
}
footer ul li a:hover{
    color: var(--theme-red)!important;
}
footer .logo-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-right: 1px solid #ccc;

}

footer .logo-group a{
    margin-bottom: 2rem;
}

footer .footer-nav{
    padding-left: 2rem;
}
footer .footer-nav h5, footer .footer-nav li{
    font-size: 1rem;
}
@media (min-width:992px){
    footer .footer-nav h5{
        font-size: 1.5rem;
    }
    footer .footer-nav li{
        font-size: 1.1rem;
    }
}


footer .icon-group a{
    margin-right: 1rem;
}

footer .icon-group .fa-facebook:hover{
    color:var(--theme-blue)!important;
}
footer .icon-group .fa-youtube:hover{
    color:var(--theme-red)!important;
}



.foot-copyright{
    background: #d5d5d5;
    color:#575E61;
    text-align: center;
    opacity: .6;
    margin-bottom: 0;
    padding: .5rem;
}

@media (max-width:992px){
    footer .logo-group {
        flex-direction: row-reverse;
        justify-content: space-around;
        border-right: 0;
        border-bottom: 1px solid #ccc;
        margin: 0 1rem;
    }
    footer .footer-nav{
        padding: 2rem 1rem 0;
    }
}


.section-title {
    font-size: 3rem;
    letter-spacing: 5px;
    color: var(--theme-grey);
    font-weight: 300;
}
.section-subtitle {
    font-size: 1.8rem;
    letter-spacing: 2px;
    color: var(--theme-grey);
    font-weight: 300;
    text-align: center;
}



/*breadcrumb*/
#breadcrumb {
    padding: 1rem 3rem;
}
@media (max-width:992px){
    #breadcrumb {
        padding: 1rem .5rem;
    }
}
#breadcrumb .breadcrumb {
    background: none!important;
    font-size: .9rem;
    margin-bottom: 0;
    border-bottom: 1px solid #eee;
    font-weight: 300;
}

#breadcrumb .breadcrumb .breadcrumb-item, 
#breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    color:#ddd !important;
}

#breadcrumb .breadcrumb .breadcrumb-item a:hover{
    color:var(--theme-red);
}

#breadcrumb .breadcrumb .active {
    color: #000 !important;
}








/*Content*/
#content {
   margin-top: 2rem;
}

#content .content-title{
    color:var(--theme-grey);
    letter-spacing: 4px;
    text-align: center;
}


/* =======Introduction: Editoral Board =======*/
#editoral-msg .msg-container{
    line-height:2;
    font-weight: 300 !important;
}


@media (max-width:576px){
    #editoral-msg .img-container{
        margin: 0 auto;
    }
    #editoral-msg .img-container img{
        max-width:250px !important;
    }
    
}


#editoralboard {
    margin-top: 2rem;
    padding: 0 4rem 6rem;
}
#editoralboard .editor-pic {
    max-width:200px; 
    padding: .7rem;
    background-color: rgb(231, 232, 233, .8);
    border-radius: 50%;
}
#editoralboard .name {
    font-size:1.3rem;
    font-weight: 500;
    padding-top: .5rem;
    letter-spacing: 2px;
}
#editoralboard .title {
    font-size:1.1rem;
    letter-spacing: 2px;
    font-weight: 300;
}
#editoralboard .subtitle {
    font-weight: 300;
}
#editoralboard .editor-group {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}
#editoralboard .editor-group .editor{
    width: 14%;
    margin-bottom: 1rem;
}

#editoralboard .editor-group .editor-pic{
    width:80%;
    max-width: 170px;
}
#editoralboard .title {
    font-size:1rem !important;
}
#editoralboard .subtitle {
    font-size:1rem !important;
}
#editoralboard .editor-group .subtitle {
    font-size:.9rem !important;
}
@media (max-width:1410px){
    #editoralboard .editor-group .subtitle {
        font-size:.8rem !important;
    }
}
@media (max-width:1293px){
    #editoralboard .editor-group .title {
        font-size:.9rem !important;
    }
}
@media (max-width:992px){

    #editoralboard .editor-group{
        margin-top: 2rem;
        flex-wrap: wrap;
    }
    #editoralboard .editor-group .editor{
        margin-top:2rem;
        width: 33%;
        margin-bottom:0rem;
    }
    #editoralboard .name {
        font-size:1.4rem !important;
    }
    #editoralboard .title, #editoralboard .editor-group .title  {
        font-size:1.1rem !important;
    }
    #editoralboard .subtitle, #editoralboard .editor-group .subtitle  {
        font-size:1rem !important;
    }

}
@media (max-width:660px){
    #editoralboard .editor-pic{
        max-width:170px !important;
        padding: .5rem;
    }
    #editoralboard .editor-group{
        margin-top: 0rem;
        flex-direction: column;
    }
    #editoralboard .editor-group .editor{
        width: 100%;
    }
}
/* =======End of Introduction: Editoral Board =======*/


#subscription {
    background: var(--theme-light);
}


/*Post */
.img-container {
    max-height: 400px;
    display: flex;
    justify-content: center;
}
.img-container img{
    max-height: 400px;
    width: auto;
    object-fit: contain;
}
@media (max-width:576px){
    #WHD .img-container {
        max-width: 350px;
        height: auto;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .img-container img{
        max-width: 350px;
        height: auto;
        object-fit: contain;
    }
}

.blog-container p, .blog-container div {
    text-align: justify;
    font-size: 1.2rem;
}

.blog-container img {
    width: initial!important;
    max-width: 100%;
    height: auto;
    margin: auto !important;
    margin-bottom: .5rem !important;

}
    @media (min-width: 912px){
        .blog-container img {
            width: initial!important;
            height: auto;
            margin: auto !important;

        }
    }

    
.post_card a .card-img-container{
    width: 100%;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post_card:hover a{
    color:var(--theme-red)!important;
}
.post_card:hover img{
    opacity: .9;
}
.post_card:hover .btn{
    color: #fff !important;
    opacity: .9;
}

@media only screen and (min-width: 768px) {
    .post_card a .card-img-container{
        height: 200px;
    }
    .post_card a .card-img-container .post_thumb {
        object-fit: cover;
        height: 100%;
        width: 100%;
        object-position:50% 0%;
    }
}

@media only screen and (min-width: 800px) {
    .post_card a .card-img-container{
        height: 210px;
    }
}

/* @media only screen and (min-width: 992px) {
    .post_card a .card-img-container{
        height: 33vh;
    }
} */

@media only screen and (min-width: 1024px) {
    .post_card a .card-img-container{
        height: 160px;
    }
}

@media only screen and (min-width: 1200px) {
    .post_card a .card-img-container{
        height: 280px;
    }
}
@media only screen and (min-width: 1280px) {
    .post_card a .card-img-container{
        height: 210px;
    }
}
@media only screen and (min-width: 1366px) {
    .post_card a .card-img-container{
        height: 225px;
    }
}
@media only screen and (min-width: 1440px) {
    .post_card a .card-img-container{
        height: 240px;
    }
}
@media only screen and (min-width: 1600px) {
    .post_card a .card-img-container{
        height: 270px;
    }
}

@media only screen and (min-width: 1920px) {
    .post_card a .card-img-container{
        height: 330px;
    }
}






.related-post {
    display: flex;
    flex-direction: column;
}
.post_card .post_title {
    min-height: 50px;
}

@media (max-width:992px){
    .related-post {
        margin-top: 1rem;
        border-top: 1px solid #eee;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .related-post .post_card{
        width: 45%;
        margin: 1rem .5rem;

    }
}


/* pagination */
#pagination .active a{
    background: var(--theme-red)!important;
    border-color: var(--theme-red)!important;
    color:#fff!important;
}


/*=========Gallery===========*/
/* The Modal (background) */
#myModal  {
  display: none;
}
#myModal .modals {
    
    position: fixed;
    z-index: 9999;
    padding-top: 2rem;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgb(0, 0, 0, .9);
  }
  
  /* Modal Content */
  #myModal .modal-content {
    position: relative;
    background:none;
    margin: auto;
    padding: 1rem 0;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
  }
  
  /* Hide the slides by default */
  .mySlides {
      position: fixed;
      top: calc(50% - 40vh);
      left: calc(50% - 30%);
      opacity: 0;
      margin: auto;
      width: 60%;
      height: 80vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .mySlides img{
      object-fit: contain;
      margin: auto;
      width: 100%;
      max-height: 500px;
  
  }
  
  .cursor {
    cursor: pointer;
  }
  
  /* The Close Button */
  #myModal .close {
      color: white;
      position: absolute;
      top: 1rem;
      right: 2rem;
      font-size: 3rem;
      padding: 1rem;
      width: 5rem;
      height: 5rem;
      font-weight: bold;
      z-index: 2;
  }
  
  #myModal  .close:hover,
  #myModal  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    z-index: 9999;
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 2rem;
    /* margin-top: calc(50% - 40vh); */
    color: white;
    font-weight: bold;
    font-size: 2rem;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .active,
  .demo:hover {
    opacity: 1;
  }
  
  img.hover-shadow {
    transition: 0.3s;
  }
  
  .hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .img-border {
      padding: .3rem;
      -webkit-border-radius: .3rem;
      -moz-border-radius: .2rem;
      border-radius: .2rem;
      -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2); 
      box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);
  }

/*=========End of Gallery===========*/


/*=========iFrame===========*/
.iframe-container{
    position: relative;
    /* width: 90%; */
    padding-bottom: 56.25%; 
    height: 0;
}

@media (max-width:992px){
    .iframe-container{
        position: relative;
        width: 100%;
    }
}


.iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*=========End of iFrame===========*/

/*Your Heart Mission*/
.content-box:nth-child(even) {
    background: #f5f5f5 !important;
}

.content-box .content-heading{
    color: #000 !important;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, .8);
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 2rem;
    padding: 3.5rem;
    background-image: url(../../images/paint-bg.png);
    background-size: 200px ;
    background-repeat: no-repeat;
    background-position: center;
}

#mission-subnav .nav .nav-item .active{
    -webkit-box-shadow: 0px -4px 7px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px -4px 7px 0px rgba(0,0,0,0.1);
    box-shadow: 0px -4px 7px 0px rgba(0,0,0,0.1);
}

#mission-subnav .nav .nav-item:hover > .nav-link{
    opacity: .7;
    background: #fff;
    color: #000!important;
}


#mission-subnav .nav .nav-item:hover > .active{
    opacity: 1!important;
    color: #000!important;
}
#steps {
    position: relative;
}
#steps:before{
    position: absolute;
    content: "";
    border: 1px solid rgb(245, 245, 245);
    width: 60%;
    left: 20%;
    top: 45%;
    z-index: -1;
}
#steps .step-box{
    text-align: center;
    color:rgb(206, 206, 206);
    position: relative;

}
#steps .step-box:after{
    position: absolute;
    content: "";
    background: rgb(245, 245, 245);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1rem solid #fff;
    top: -1.5rem;
    left: calc(100%/2 - 60px);
    z-index: -1;
}


#steps .active-step{
    color: rgb(79, 79, 79);
}


.has-search .form-control {
    padding-left: 2.375rem;
    
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: flex;
    padding-top:.5rem;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.5rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

#gallery .draw-container { 
    width: 100%; 
    height: 300px;
    max-height: 300px;
    background: rgb(244, 244, 244);
}
#gallery .draw-container img{ 
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal-img-container {
    width: 100%; 
    height: 500px;
    max-height: 500px;
}
.modal-img-container img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#gallery .btn-group .btn-danger:hover{
    color:#fff!important;
}

#gallery .vote .btn-info:hover, #gallery .btn-hover-white:hover, 
#resultBox .btn-hover-white:hover{
    color:#fff!important;
}
#gallery .vote-btn:hover {
    opacity: .5;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .videoWrapper a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0;
  }




/* =======Slider =======*/

/* #homeSlider .carousel {
  height: 300px;
  width: 100%;
} */
#homeSlider .carousel-inner {
  height: 410px;
  width: 100%;
  background-color: rgb(232, 232, 232);
}
#homeSlider .carousel-inner img{
  width: 100%;
  height: 100vh;
  max-height: 410px;
  object-fit: contain;
}
@media (max-width: 500px) {
  #homeSlider{
    margin-top: 3rem;
    padding-top: .5rem;
  }
  #homeSlider .carousel-inner {
    height:110px;
    background-color: #fff;
    border-bottom: 1px solid rgb(245, 245, 245);
  }
  #homeSlider .carousel-inner img{
    max-height: 110px;
  }
}
@media only screen and (min-width: 768px) {
  #homeSlider .carousel-inner {
    height: 200px;
  }
  #homeSlider .carousel-inner img{
    max-height: 200px;
  }
}
@media only screen and (min-width: 1024px) {
  #homeSlider .carousel-inner {
    height: 260px;
  }
  #homeSlider .carousel-inner img{
    max-height: 260px;
  }
}
@media only screen and (min-width: 1200px) {
  #homeSlider{
    /* padding-top: -1rem; */
  }
  #homeSlider .carousel-inner {
    height: 410px;
    width: 100%;
    background-color: rgb(232, 232, 232);
  }
  #homeSlider .carousel-inner img{
    width: 100%;
    height: 100vh;
    max-height: 410px;
    object-fit: contain;
  }
}
@media only screen and (min-width: 1366px) {
  #homeSlider{
    padding-top: 0rem;
  }
  #homeSlider .carousel-inner {
    height: 410px;
    width: 100%;
    background-color: rgb(232, 232, 232);
  }
  #homeSlider .carousel-inner img{
    width: 100%;
    height: 100vh;
    max-height: 410px;
    object-fit: contain;
  }
}

#homeSlider .carousel-indicators { 
  display: none !important; 
}

/* (Extra safety if you only want to hide the dots themselves) */
#homeSlider .carousel-indicators li,
#homeSlider .carousel-indicators [data-bs-target] {
  display: none !important;
}

.slider {
  margin-top: calc(var(--header-height, 80px));
}
/* =======End of Slider =======*/