:root {
  --xbh-blue-color: #022169;
  --xbh-yellow-color: #fecf13;
  --xbh-white-color: #ffffff;
  --xbh-off-white-color: #EDEDF2;
  --xbh-blue-30per-color: #8399cd;
  --xbh-lightblue-color: #054AE8;
  --xbh-hoverblue-color: #ade1f5;
  --xbh-grey-color: #939598;
  --xbh-black-color: #000000;
}

.container-fluid {
  padding-right: 0px !important;
  padding-left: 0px !important;
  overflow: hidden !important;
}

/* body {
  font-family: 'Red Hat Text', 'Tahoma', 'Arial', sans-serif;
  font-size: 16px;
  background-image: url(../../images/color-background-paper.jpg);
  background-size: cover;
  background-position: left;

  &.is-scrolling {
    padding-bottom: 90px;
    Space for sticky bar

    @media only screen and (max-width: 520px) {
      & {
        padding-bottom: 130px;
      }
    }
  }
} */

html {
  font-size: 100.01%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body {
  --webkit-overflow-scrolling: touch;
  overscroll-behavior-block: none;
  overscroll-behavior: none;
}

body {
  font-family: "Red Hat Text", "Tahoma", "Arial", sans-serif;
  font-size: 16px;
  background-image: url(../../images/color-background-paper.jpg);
  background-size: cover;
  background-position: left;
  /*overscroll-behavior: contain;*/
}

html:lang(zh-HK) body {
  font-family: 'Noto Sans HK', 'Microsoft Yahei', '微軟正黑體', arial, sans-serif;
}

body.is-scrolling {
  /* padding-bottom: 90px; */
}

@media screen and (max-width: 520px) {
  body.is-scrolling {
    /* padding-bottom: 130px; */
  }
}

/* Handle If Sticky Bar Is Shown */
.is-show-sticky-panel .sect-detail {
  padding-bottom: 5rem;
}

.is-show-sticky-panel .youth-art-confirm-section4 {
  padding-bottom: 2.1875rem;
}

h2 {
  font-size: 32px;
  line-height: 1.3em;
  margin-top: 0px;
  margin-bottom: 20px;
  color: var(--xbh-blue-color);
  font-weight: 700;
}

h4,
h6 {
  color: var(--xbh-blue-color);
}

span.voted-Num-large {
  font-size: 2em;
  font-weight: 600;
}

header {
  min-height: 100px;
}

/* button,
a {
  transition: all 0.5s ease;

  &:hover {
    transition: all 0.5s ease;
  }
} */

button,
a {
  transition: all 0.5s ease;
}

:is(button, a):hover,
:is(button, a):hover * {
  transition: all 0.5s ease;
}

:is(.cate-grid) a:hover,
:is(.cate-grid) a:hover * {
  text-decoration: none;
}

@media only screen and (max-width: 768px) {
h2 {
  font-size: 24px;
}
}


/*********** Global Style Start ************/
.mh-80vh {
  min-height: 80vh;
}

/*********** Global Style End ************/

#fb-share-button {
  background: var(--xbh-yellow-color);
  border-radius: 3px;
  font-weight: 600;
  padding: 5px 8px;
  display: inline-block;
  position: static;
  border-radius: 100%;
}

#fb-share-button:hover,
.whatspp-button:hover #whatspp-share-button {
  cursor: pointer;
  opacity: 0.8;
}

#fb-share-button svg {
  width: 18px;
  fill: var(--xbh-blue-color);
  vertical-align: middle;
  border-radius: 2px
}

.swiper {
  width: 600px;
  height: 300px;
}

.youth-art-nav {
  background-color: var(--xbh-blue-color);
  /*position: fixed;*/
  width: 100%;
  top: -1px;
  left: 0;
  right: 0;
  margin: 0 auto;
  /*z-index: 9999;
      box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.5);*/
}

.youth-art-nav-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* .youth-art-nav-inner {
  display: flex;
  width: 100%;
  margin-bottom: 0;
  padding: 1px 20px 0px 20px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 24px;
  box-sizing: border-box;

  @media only screen and (max-width: 768px) {
    & {
      padding-top: 16px;
    padding-bottom: 16px;
    }
  }
} */

.youth-art-nav-inner {
  display: flex;
  width: 100%;
  margin-bottom: 0;
  padding: 1px 20px 0px 20px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 24px;
  box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
  .youth-art-nav-inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* img.youth-art-logo-desktop {
  display: block;

  @media only screen and (max-width: 768px) {
    & {
      display: none;
    }
  }
} */

.youth-art-nav-language__home-btn {
  position: relative;
  background-image: url('data:image/svg+xml,<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9927 7.95077C20.9927 8.5109 20.4459 8.94967 19.8261 8.94967H18.6594L18.6849 13.9317C18.6849 14.0189 18.6776 14.0998 18.6667 14.1838V14.6879C18.6667 15.3756 18.0141 15.9327 17.2083 15.9327H16.625C16.5849 15.9327 16.5448 15.9046 16.5047 15.9295C16.4537 15.9046 16.4026 15.9327 16.3516 15.9327H14.2917C13.4859 15.9327 12.8333 15.3756 12.8333 14.6879V11.9495C12.8333 11.3987 12.312 10.9537 11.6667 10.9537H9.33334C8.68803 10.9537 8.16667 11.3987 8.16667 11.9495V14.6879C8.16667 15.3756 7.51407 15.9327 6.70834 15.9327H4.67032C4.61563 15.9327 4.56094 15.9295 4.50625 15.9264C4.4625 15.9295 4.41875 15.9327 4.375 15.9327H3.79167C2.9863 15.9327 2.33334 15.3756 2.33334 14.6879V11.2026C2.33334 11.1746 2.33443 11.1435 2.33662 11.1155V8.94967H1.16849C0.511146 8.94967 0 8.5109 0 7.95077C0 7.6707 0.109521 7.42175 0.364948 7.20392L9.71251 0.249446C9.96772 0.0311807 10.2594 0 10.5146 0C10.7698 0 11.0615 0.0623614 11.2839 0.218265L20.5917 7.20392C20.8834 7.42175 21.0328 7.6707 20.9927 7.95077Z" fill="white" /></svg>');
  width: 21px;
  height: 16px;
  margin-top: -2px;
}

.youth-art-nav-language__home-btn.is-active,
.youth-art-nav-language__home-btn:hover {
  background-image: url('data:image/svg+xml,<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9927 7.95077C20.9927 8.5109 20.4459 8.94967 19.8261 8.94967H18.6594L18.6849 13.9317C18.6849 14.0189 18.6776 14.0998 18.6667 14.1838V14.6879C18.6667 15.3756 18.0141 15.9327 17.2083 15.9327H16.625C16.5849 15.9327 16.5448 15.9046 16.5047 15.9295C16.4537 15.9046 16.4026 15.9327 16.3516 15.9327H14.2917C13.4859 15.9327 12.8333 15.3756 12.8333 14.6879V11.9495C12.8333 11.3987 12.312 10.9537 11.6667 10.9537H9.33334C8.68803 10.9537 8.16667 11.3987 8.16667 11.9495V14.6879C8.16667 15.3756 7.51407 15.9327 6.70834 15.9327H4.67032C4.61563 15.9327 4.56094 15.9295 4.50625 15.9264C4.4625 15.9295 4.41875 15.9327 4.375 15.9327H3.79167C2.9863 15.9327 2.33334 15.3756 2.33334 14.6879V11.2026C2.33334 11.1746 2.33443 11.1435 2.33662 11.1155V8.94967H1.16849C0.511146 8.94967 0 8.5109 0 7.95077C0 7.6707 0.109521 7.42175 0.364948 7.20392L9.71251 0.249446C9.96772 0.0311807 10.2594 0 10.5146 0C10.7698 0 11.0615 0.0623614 11.2839 0.218265L20.5917 7.20392C20.8834 7.42175 21.0328 7.6707 20.9927 7.95077Z" fill="%23fecf13" /></svg>');
}

img.youth-art-logo-desktop {
  display: block;
}

@media only screen and (max-width: 768px) {
  img.youth-art-logo-desktop {
    display: none;
  }
}

/* img.youth-art-logo-mobile {
  display: none;

  @media only screen and (max-width: 768px) {
    & {
      display: block;
    }
  }
} */

img.youth-art-logo-mobile {
  display: none;
}

@media only screen and (max-width: 768px) {
  img.youth-art-logo-mobile {
    display: block;
  }
}


.youth-art-nav-logo {
  display: inline-block;
  float: left;
}

/* .youth-art-nav-logo img {
  width: 295px;
  height: 60px;

  @media only screen and (max-width: 768px) {
    & {
      width: 143px;
      height: 48px;
    }
  }
} */

.youth-art-nav-logo img {
  /*width: 295px;*/
  width: 170px;
  height: 60px;
}

@media screen and (max-width: 768px) {
  .youth-art-nav-logo img {
    /*width: 143px;*/
    width: 40px;
    height: 48px;
  }
}

.youth-art-nav-language {
  display: inline-flex;
  align-items: center;
}

.youth-art-nav-language a {
  color: var(--xbh-white-color);
  font-size: 16px;
  line-height: 1.3em;
  text-decoration: none;
}

.youth-art-nav-language a:hover {
  text-decoration: underline;
  color: #fecf13;
}

.id-search-container #searchID {
  font-size: 14px;
  padding: 10px 20px 8px 10px;
  width: 100%;
}


/****** Popup Overlay Start ************/
/* Overlay styles */
body.overlay-open {
  overflow: hidden;
}

.overlay {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  /* Black with 80% opacity */
  z-index: 10000;
  /* Sit on top */
  overflow-y: auto;
  /* Enable scrolling for overlay */
}

/* Close button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.close-btn:hover {
  color: #ccc;
}

/* Content box */
.overlay-content {
  position: relative;
  min-height: 80vh;
  /* At least viewport height */
  box-sizing: border-box;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0%);
  color: white;
  width: 80%;
  font-size: 0.85em;
  max-width: 1140px;
  word-wrap: break-word;
  padding-bottom:3em;
}


.overlay-content a {
  color: #8bd1ff;
}

.overlay-content ul li {
  margin-bottom: 1em;
}

/****** Popup Overlay End ************/

/********** header brush Start **********/
.txt-y-brush {
  background: url(../../images/paint-swipe-yellow.svg);
  background-repeat: no-repeat;
  background-size: 80% 50%;
  padding: 5px 20px 10px 20px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: bottom;
  margin-bottom: 24px;
}

/********** header brush End **********/

/***** CATE button Start ********/
.cate-btn p.small {
  font-size: 1em;
  font-weight: 100;
  line-height: 1.5;
  margin-bottom: 0px;
  min-height: 25px;
}

.cate-btn p {
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.2;
  min-height: 2.5em;
  margin-bottom: 10px;
}

.cate-btn .fa {
  font-size: 2em;
}

.cate-btn__blue {
  background-color: var(--xbh-blue-color);
  color: var(--xbh-white-color);
}

.cate-btn__blue .fa {
  color: var(--xbh-blue-30per-color);
}

.cate-btn__yellow {
  background-color: var(--xbh-yellow-color);
  color: var(--xbh-blue-color);
}

.cate-btn__yellow .fa {
  color: #cda811;
}

.cate-btn__white {
  background-color: var(--xbh-white-color);
  color: var(--xbh-blue-color);
}

.cate-btn__white .fa {
  color: var(--xbh-blue-30per-color);
}

a:hover .cate-btn__blue {
  background-color: var(--xbh-lightblue-color);
  text-decoration: none;
}

a:hover .cate-btn__blue p {
  text-decoration: none;
}


a:hover .cate-btn__yellow {
  background-color: var(--xbh-lightblue-color);
  text-decoration: none;
}

a:hover .cate-btn__yellow p {
  text-decoration: none;
  color: var(--xbh-yellow-color);
}

a:hover .cate-btn__white {
  background-color: var(--xbh-lightblue-color);
  text-decoration: none;
}

a:hover .cate-btn__white p {
  text-decoration: none;
  color: var(--xbh-white-color);
}

a:hover .cate-btn__white .fa {
  color: var(--xbh-white-color);
}


/***** CATE button End ********/

/*********** search Start ************/

.sect-id-search {
  max-width: 640px;
  margin: auto;
}

.id-search-container {
  display: flex;
  gap: 1rem;
}

.id-search__left {
  display: inline-block;
  width: 60%;
}

.id-search__right {
  display: inline-block;
  width: 40%;
}

.id-search-btn {
  /*display: inline-flex;
  padding: 8px 25px;*/
  display: block;
  align-items: center;
  padding: 8px;
  background-color: var(--xbh-blue-color);
  color: var(--xbh-white-color);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
  max-width: 200px;
}

.id-search-btn:hover {
  background-color: var(--xbh-hoverblue-color);
  color: var(--xbh-blue-color);
}

.id-search-btn i {
  margin-right: 8px;
  font-size: 16px;
}

.id-search-input {
  padding: 6px 5px;
  border-radius: 5px;
  border: 1px solid var(--xbh-blue-color);
  text-transform: uppercase;
}

.id-search-input::placeholder {
  text-transform: initial;
}

button.inactive {
  opacity: 0.2;
  cursor: auto;
  color: #999;
}

button.inactive:hover {
  background-color: var(--xbh-lightblue-color);
  color: #999;
  opacity: 0.2;
}

/*********** search End ************/

/************** Footer Start ******************/
.footer__wrapper {
  background-color: var(--xbh-blue-color);
  color: var(--xbh-white-color);
  font-size: 16px;
  line-height: 1.2em;
  z-index: 11;
  position: relative;
  padding: 20px 0;
}

.section-wrapper2 {
  max-width: 1440px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

.footer__copyright {
  font-size: 12px;
  opacity: 0.7;
  text-align: right;
}

/************** Footer End ******************/


/****** Enlarge Button Start ************/
/* .placeholder--enlarge {
  position: relative;
  transition: all 0.5s ease;

  &:hover {
    opacity: 0.8;
    transition: all 0.5s ease;
  }
} */

.placeholder--enlarge {
  position: relative;
  transition: all 0.5s ease;
}

.placeholder--enlarge:hover {
  opacity: 0.8;
  transition: all 0.5s ease;
}

.art-work__enlarge {
  display: block;
  width: 30px;
  height: 29px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.enlarge-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 100%;
}

/* .enlarge-img {
  max-width: 1025px;
  margin: 0 auto;

  img {
    width: 100%;
  }
} */

.enlarge-img {
  max-width: 1025px;
  margin: 0 auto;
}

.enlarge-img img {
  width: 100%;
}

/****** Enlarge Button End ************/



/*********** sticky bar Start ***************/

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--xbh-yellow-color);
  padding: 0px 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
  transform: translateY(100%);

  border-top: 3px solid var(--xbh-blue-color);
}


.sticky-bar-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: block;
  padding: 20px;
  text-align: center;
  color: var(--xbh-blue-color);
}

.sticky-text {
  display: inline-block;
  padding-right: 20px;
}

.sticky-text-button {
  display: inline-block;
}

.sticky-bar.visible {
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}

.sticky-bar__msg {
  display: none;
}

.sticky-text {
  flex: 1;
  padding-right: 20px;
}

.sticky-button {
  background-color: var(--xbh-blue-color);
  color: var(--xbh-white-color);
  border: none;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  min-width: 180px;
  font-weight: 600;
}

.sticky-button:hover {
  color: var(--xbh-white-color);
  background-color: var(--xbh-lightblue-color);
  text-decoration: none;
}

@media only screen and (max-width: 520px) {
  .sticky-text {
    font-size: 0.9em;
    line-height: 1.2;
  }

  span.voted-Num-large {
    font-size: 1.5em;
  }

  .sticky-button {
    font-size: 14px;
    min-width: 120px;
    padding: 5px 10px;
  }

  .sticky-bar-inner {
    padding: 5px 0px;
  }
}

/*********** sticky bar End ***************/

/* .scroll-top {
  background: var(--xbh-lightblue-color);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 50px;
  margin: 15px;
  opacity: 0.7 !important;
  position: fixed;
  bottom: -70px;
  right: 10px;
  width: 50px;
  z-index: 1001;
  transition: all .5s ease;
  animation: fadeIn .65s ease forwards;

  &.visible {
    bottom: 13vh;
  }

  &:hover {
    background: var(--xbh-yellow-color);
  }
} */

.scroll-top {
  background: var(--xbh-lightblue-color);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 50px;
  margin: 15px;
  opacity: 0.7 !important;
  position: fixed;
  bottom: -70px;
  right: 10px;
  width: 50px;
  z-index: 1000;
  transition: all 0.5s ease;
  animation: fadeIn 0.65s ease forwards;
}

.scroll-top.visible {
  bottom: 12vh;
}

.scroll-top:hover {
  opacity: 1 !important;
  transition: opacity 0.5s ease;
}

/* .arrow {
  border: solid var(--xbh-white-color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  margin-top: 5px;
  padding: 4px;

  &.up {
    transform: rotate(-135deg);
  }
} */

.arrow {
  border: solid var(--xbh-white-color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  margin-top: 5px;
  padding: 4px;
}

.arrow.up {
  transform: rotate(-135deg);
}


@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}