/*
.sec-heading,
.ts-inner h2,
.slider-text-block .text-section h2{
color:#2cabab;
}
*/
.content .text-block td p{
font-family: 'Basel Grotesk', 'Noto Sans HK', sans-serif;
}
@media screen and (min-width: 1361px) {
    .header ul#menu-main-menu>li>a {
        background-color: transparent!important;
        color: #fff!important;
    }
    .header.sticky ul#menu-main-menu>li>a {
        background-color: #fff!important;
        color: #07322F !important;
    }
    .ts-text {
        width: calc(100% - 80px);
    }
    .dropdown-btn,
    ul#menu-main-menu>li.mobile {
        display: none;
    }
}

@media screen and (min-width: 1801px) {}

@media screen and (max-width: 1480px) {
    .header-left {
        width: 362px;
    }
}

@media screen and (max-width: 1405px) {
    .menu-footer-menu-container>ul>li#menu-item-843,
    .menu-footer-menu-container>ul>li#menu-item-6904 {
        width: 26%;
    }
    .menu-footer-menu-container>ul>li#menu-item-6907 {
        width: 17%;
    }
}

@media screen and (max-width: 1800px) {
    .header-left {
        width: 380px;
    }
    .en_US ul#menu-main-menu>li>a {
        font-size: 13px;
    }
    .header-logo img {
        max-height: 44px;
    }
    .header-logo-3 img {
        max-height: 35px;
    }
    .hr-right {
        width: 80px;
        height: 94px;
    }
    .header-wrapper.wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
    }
    .header-right {
        width: auto;
    }
}

@media screen and (min-width: 1551px) {
    /* small */
    body.small h1 {
        font-size: 3vw;
    }
    body.small h2 {
        font-size: 2vw;
    }
    body.small h3,
    body.small .hb-text h2,
    body.small .center-heading,
    body.small .ct-name {
        font-size: 1.5vw;
    }
    body.small h4,
    body.small .ec-month,
    body.small .ct-title,
    body.small h2.sec-heading-new,
    body.small h3.sec-heading-new {
        font-size: 1.12vw;
    }
    body.small p,
    body.small .search-form-text,
    body.small .primary-btn,
    body.small h2.accordion-icon,
    body.small .accordion-icon-title,
    body.small .select,
    body.small .counsellor-table p,
    body.small .text-block li,
    body.small .content .text-block td li,
    body.small .content .text-block table {
        font-size: 1vw;
    }
    /* large */
    body.large h1 {
        font-size: 4.5vw;
    }
    body.large h2 {
        font-size: 3vw;
    }
    body.large h3,
    body.large .hb-text h2,
    body.large .center-heading,
    body.large .ct-name {
        font-size: 2.25vw;
    }
    body.large h4,
    body.large .ec-month,
    body.large .ct-title,
    body.large h2.sec-heading-new,
    body.large h3.sec-heading-new {
        font-size: 1.75vw;
    }
    body.large p,
    body.large .search-form-text,
    body.large .primary-btn,
    body.large h2.accordion-icon,
    body.large .accordion-icon-title,
    body.large .select,
    body.large .counsellor-table p,
    body.large .text-block li,
    body.large .content .text-block td li,
    body.large .content .text-block table {
        font-size: 1.5vw;
    }
}


/* 1551px */

@media screen and (max-width: 1550px) {
    body.small {
        font-size: 43%;
    }
    body.large {
        font-size: 58%;
    }
    .menu-main-menu-container>ul>li>a {
        font-size: 1.2em;
    }
    .main-menu li.menu-item-has-children>a:after {
        width: 10px;
        height: 10px;
    }
    .hcb-icon {
        width: 20%;
        padding-bottom: 20%;
    }
    .home-contact-block {
        padding-bottom: 8%;
    }
    .search-form-submit {
        width: 1.8em;
        height: 1.8em;
    }
    .cb-link span {
        font-size: 2.1em;
    }
    h2 {
        font-size: 4em;
    }
    .content .text-block table {
        font-size: 1em;
    }
    p,
    .content .text-block td,
    .content .text-block th,
    .text-block li {
        font-size: 16px;
    }
    .content .text-block td li {
        font-size: 1em;
    }
    .home .slider-text-block h2 {
        font-size: 3.2em;
    }
    .home .slider-text-block p {
        font-size: 1.8em;
    }
    .ts-links {
        margin-top: 0;
    }
    .ts-link {
        padding: 10px;
        font-size: 1.7em;        
		display: flex;
        align-items: center;
    }
    .slider-text-block .text-section {
        padding-right: 10%;
    }
    .primary-btn,
    .light-btn {
        font-size: 1.8em;
    }
    .light-btn span:first-child:after {
        margin-top: 4px;
        width: 8px;
        height: 8px;
    }
    .hb-link {
        padding: 1.3em 2.1em 1.3em 0.2em;
        font-size: 2em;
    }
    .hb-link span:before {
        margin-top: 5px;
    }
    .menu-footer-menu-container>ul>li ul li a {
        font-size: 2em;
    }
    .footer-menu-btn {
        margin-top: 3em;
    }
    .copyright,
    .bottom-menu a {
        font-size: 1.6em;
    }
    .breadcrumbs-container span.crumb,
    .breadcrumbs-container a.crumb {
        font-size: 1.8em;
    }
    .breadcrumbs-container span.crumb:before,
    .breadcrumbs-container a.crumb:before {
        width: 6px;
        height: 15px;
    }
    .ct-row-2,
    .ct-row-1 {
        padding: 13px;
    }
    .ct-header>div {
        padding: 16px;
    }
    .ct-header>div,
    .publication-date {
        font-size: 1.8em;
    }
    .counsellor-table p {
        font-size: 1.8em;
    }
    .ct-name {
        font-size: 2.2em;
    }
    .ct-title,
    .publication-name {
        font-size: 2.1em;
    }
    .contact-col p {
        font-size: 2.4em;
    }
    .contact-col .ec-details {
        font-size: 2.1em;
    }
    .contact-col .ec-details p {
        font-size: 1em;
    }
    .ecd-right p {
        font-size: 1em;
    }
    #Contact-Us .wrapper {
        width: 90%;
        max-width: 90%;
    }
    .contact-col:nth-child(2) {
        width: 48%;
        margin-right: 5%;
    }
    .contact-col:nth-child(3) {
        width: 40%;
    }
    /* .text-block ul>li,
    .text-block ol>li {
        padding-left: 15px;
        font-size: 2.1em;
    }*/
    h3 {
        font-size: 3.6em;
    }
    h4 {
        font-size: 2.8em;
    }
    .sec-tag {
        padding: 3em;
    }
    .custom-table th,
    .custom-table td {
        font-size: 2em;
        padding: 15px 25px;
    }
    .sidebar li {
        font-size: 1.9em;
    }
    .sidebar li a {
        font-size: 1em;
    }
    .ec-heading {
        font-size: 1.8em;
    }
    .highlight-col .hc-text {
        font-size: 2em;
    }
    .ec-tag {
        font-size: 1.6em;
    }
    .highlight-col .hc-details {
        padding-bottom: 30px;
        background-size: 20px;
    }
    .highlight-col .hc-details {
        padding-top: 0;
    }
    .filter-title,
    .awa-table li,
    .awa-table td {
        font-size: 1.8em;
        margin-bottom: 5px;
    }
    .select {
        font-size: 2.2em;
    }
    ul.select-options li {
        padding: 12px;
        text-indent: 12px;
    }
    .awa-table th,
    .awa-left {
        font-size: 2.1em;
    }
    h2.accordion-icon {
        font-size: 2.5em;
        background-size: 2em;
    }
    .acc-top-text,
    h2.accordion-icon,
    .awa-left,
    .awa-table th,
    .awa-table td {
        padding: 20px;
    }
    h2.accordion-icon {
        padding: 7px;
    }
    .awa-table li:before {
        top: 6px;
    }
    .awa-table li {
        padding-left: 1em;
    }
    .center-heading {
        font-size: 3.6em;
    }
    .ec-table th,
    .ec-table td {
        font-size: 2em;
    }
    a.ec-next,
    a.ec-prev {
        font-size: 2.1em;
    }
    .ec-month {
        font-size: 2.8em;
    }
    .ec-day {
        padding: 10px 10px 20px 10px;
    }
    .event-section .ts-text,
    .ec-message .ts-text,
    .ts-icon span {
        font-size: 1em;
    }
    .event-section .ts-link {
        padding: 15px;
        font-size: 2em;
    }
    a.ec-next:after,
    a.ec-prev:before {
        width: 1em;
        height: 1em;
    }
    .event-section .ts-link {
        font-size: 2em;
    }
    .event-col .ec-details {
        font-size: 1.6em;
    }
    .ec-text {
        padding: 10px;
    }
    .page-numbers,
    .pagination-number,
    .page-template-page-peer-support-network .page-numbers,
    .page-template-page-peer-support-network .pagination-number {
        font-size: 14px;
        width: 40px;
        height: 40px;
        margin: 0 5px;
        padding: 10px;
    }
    .next.page-numbers,
    .prev.page-numbers {}
    .next.page-numbers {
        margin-left: 5px;
    }
    .prev.page-numbers {
        margin-right: 5px;
    }
    .carousel-slide p {
        font-size: 2em;
    }
    .bx-wrapper .bx-controls-direction a {
        width: 45px;
        height: 45px;
    }
    .home-slider-container .bx-wrapper .bx-pager.bx-default-pager {
        width: 95%;
    }
    .counsellor-table h2.accordion-icon {
        background-size: 30px;
    }
    .ct-row-2 {
        padding-right: 35px;
    }
    .ecd-left {
        width: 60px;
    }
    .ecd-left {
        width: 70px;
    }
}


/* 1550px */

@media screen and (max-width: 1360px) {
    .events-cols {
        flex-wrap: wrap;
    }
    .events-cols .event-col {
        flex-basis: 48.5%;
        margin-right: 3%;
    }
    .events-cols .event-col:nth-child(3n+3) {
        margin-right: 3%;
    }
    .events-cols .event-col:nth-child(2n+2) {
        margin-right: 0;
    }
    .footer-menu-container {
        padding-bottom: 5em;
    }
    .copyright {
        width: 100%;
        margin-bottom: 1%;
    }
    .bottom-menu {
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    .header-left {
        width: 428px;
    }
    .header-logo img {
        max-height: 35px;
    }
    .slide-caption h2 {
        font-size: 6em;
    }
    .slide-caption p {
        font-size: 3em;
    }
    .hcb-inner {
        font-size: 1em;
    }
    .hcb-text {
        font-size: 1.8em;
    }
    .flex {
        flex-wrap: wrap;
    }
    .search-container {
        width: 100%;
        margin-bottom: 2em;
    }
    .search-container .search-form {
        position: relative;
        top: unset;
        transform: unset;
    }
    .search-form-text {
        font-size: 2em;
    }
    .home-contact-block {
        width: 23%;
        padding-bottom: 12%;
    }
    .home-contact-block:nth-child(4),
    .home-contact-block:nth-child(5) {
        margin-bottom: 0;
    }
    .search-container .search-form {
        padding: 10px;
    }
    .cb-text h2 {
        font-size: 4em;
    }
    .slider-text-block {
        padding: 3em 0;
    }
    .wrapper {
        max-width: 90%;
        width: 90%;
    }
    .highlight-col .hc-text {
        font-size: 1.8em;
    }
    .highlight-col .hc-details {
        padding-bottom: 40px;
    }
    .ecd-left {
        width: 65px;
    }
    .grid-1-3>.grid-col,
    .grid-1-3>.grid-col:nth-child(3n+3),
    .grid-1-3.sec-cards>.grid-col,
    .grid-1-3.sec-cards>.grid-col:nth-child(3n+3) {
        width: 49%;
        margin-right: 2%;
    }
    .grid-1-3>.grid-col:nth-child(3n+1),
    .grid-1-3.sec-cards>.grid-col:nth-child(3n+1) {
        clear: unset;
    }
    .grid-1-3>.grid-col:nth-child(2n+2),
    .grid-1-3.sec-cards>.grid-col:nth-child(2n+2) {
        margin-right: unset;
    }
    .grid-1-3>.grid-col:nth-child(2n+1) {
        clear: both;
    }
    .page-template-page-peer-support-network .ues-inner {
        margin: auto;
    }
    .page-template-page-peer-support-network .ec-left {
        width: 100%;
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .page-template-page-peer-support-network .event-section,
    .page-template-page-peer-support-network .ec-message {
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .page-template-page-peer-support-network .calendar-section .ts-icon span {
        padding: 6px;
    }
    .footer-menu-container {
        padding-bottom: 0;
    }
}


/* 1200px */

@media screen and (max-width: 1450px) {
    .header {
        padding: 0;
    }
    .header-wrapper.wrapper {
        padding: 0 0 0 20px;
    }
    .hr-left {
        display: none;
    }
    .hr-right,
    .main-menu-button {
        display: block;
    }
    .header-right {
        width: auto;
    }
    .mobile-menu-container li.menu-item-has-children>a:after {
        display: none;
    }
    .mobile-menu-container ul#menu-main-menu-1>li {
        position: relative;
    }
    .main-menu li.menu-item-has-children:hover>ul,
    .main-menu li.menu-item-has-children:focus-within>ul {
        padding-top: 0!important;
    }
    .dropdown-btn {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
        width: 32px;
        height: 32px;
        background-size: 12px;
        background-image: url(images/arrow-down-w.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    .large .dropdown-btn {
        background-size: 15px;
        top: 12px;
    }
    .small .dropdown-btn {
        background-size: 10px;
        top: 8px;
    }
    .mobile-menu-container ul#menu-main-menu-1 {
        margin-top: 20px;
    }
    .mobile-menu-container ul#menu-main-menu-1>li>a {
        font-size: 2em;
        padding: 15px 46px 15px 15px;
    }
    .mobile-menu-container ul#menu-main-menu-1>li>ul>li>a {
        font-size: 1.1em;
    }
    .small .mobile-menu-container ul#menu-main-menu-1>li>ul>li>a {
        font-size: 0.9em;
    }
    .large .mobile-menu-container ul#menu-main-menu-1>li>ul>li>a {
        font-size: 1.3em;
    }
    .slide-wrapper {
        max-width: 100%;
    }
    .wrapper {
        max-width: 90%;
        width: 100%;
    }
    .header-wrapper {
        max-width: 100%;
        padding: 0 0 0 20px;
    }
    .ts-icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    .ts-icon span {
        width: 35px;
    }
    .ts-text {
        display: inline-block;
        width: calc(100% - 50px);
    }
    .mobile-menu-container ul#menu-main-menu-1>li>ul>li>a {
        padding: 10px 16px;
    }
    #header {
        background-color: #fff;
        border-bottom: 0;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    }
    .header .light-logo {
        display: none;
    }
    .header .normal-logo {
        display: inline-block;
    }
    .hr-right {
        height: 80px;
    }
    .main {
        padding-top: 80px;
    }
    .search-btn {
        width: 18px;
        height: 18px;
        margin-right: 30px;
    }
    .mobile-menu-container ul#menu-main-menu-1>li>a {
        text-transform: uppercase;
    }
    .counsellor-table .accordion-details {
        background-color: #F8F8F8;
        padding: 12px;
    }
    .ct-row-2 {
        width: calc(100% - 30px);
    }
    .counsellor-table h2.accordion-icon {
        background-position: center right 7px;
    }
    .contrast-button {
        margin-left: 0;
        margin-right: 30px;
    }
}


/* 1360px */

@media screen and (max-width: 960px) {
    body {
        font-size: 45%;
    }
    body.small {
        font-size: 40%;
    }
    body.large {
        font-size: 55%;
    }
    .slide-caption h2 {
        font-size: 5em;
    }
    .slide-caption h3 {
        font-size: 2.4em;
    }
    .slide-caption p {
        margin-bottom: 0.5em;
    }
    .slide-wrapper {
        width: 94%;
    }
    .bx-wrapper .bx-pager.bx-default-pager a {
        width: 12px;
        height: 12px;
    }
    .bx-wrapper .bx-pager.bx-default-pager a.active {
        width: 32px;
    }
    .cb-text {
        width: 100%;
        order: 1;
        margin-bottom: 4em;
    }
    .cb-link:first-child {
        order: 2;
        width: 23.5%;
        padding-bottom: 22%;
        margin-top: 0;
    }
    .cb-link:nth-child(3) {
        order: 3;
        margin-top: 0;
        width: 49%;
        padding-bottom: 22%;
    }
    .cb-link:nth-child(4) {
        order: 4;
        width: 23.5%;
        padding-bottom: 22%;
        margin-top: 0;
    }
    .cb-link:nth-child(5) {
        order: 5;
        width: 49%;
        padding-bottom: 22%;
    }
    .cb-link:nth-child(6) {
        order: 6;
        width: 49%;
        padding-bottom: 22%;
    }
    .primary-btn {
        padding: 12px 25px 12px 12px;
        background-size: 22px;
    }
    .light-btn {
        padding: 12px;
        min-width: 180px;
    }
    .hb-block {
        padding: 15px;
    }
    .hb-link {
        padding: 1em 2.1em 1em 0.2em;
    }
    .social-btns {
        width: 100%;
    }
    .social-btn {
        width: 40px;
        height: 40px;
        background-size: auto 20px;
    }
    .social-btn:last-child {
        background-size: 20px auto;
    }
    .copyright,
    .bottom-menu {
        width: 100%;
    }
    .bottom-menu {
        text-align: left;
        margin-top: 1em;
    }
    .bottom-menu a:first-child {
        padding-left: 0;
    }
    .footer-bottom {
        margin-top: 2em;
    }
    .content-col {
        padding-left: 3%;
    }
    .highlight-cols {
        max-width: 550px;
        margin: auto;
    }
    .highlight-col {
        flex-basis: 100%;
        padding: 3%;
    }
    .page-template-page-article .filter-section {
        max-width: 550px;
        margin: auto;
    }
    .page-template-page-article .select-filter {
        width: 100%;
        margin-bottom: 2em;
    }
    .highlight-col {
        margin-right: 0;
        height: auto !important;
    }
    .ec-left {
        width: 100%;
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .event-section,
    .ec-message {
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .select-styled:after {
        width: 20px;
    }
    ul.select-options {
        margin-top: 48px;
    }
    .calendar-section .ts-icon span {
        font-size: 0.92em;
    }
    .website-award {
        width: 100px;
        margin-left: 10px;
    }
    .page-template-page-peer-support-network .events-cols .event-col {
        flex-basis: 100%;
        margin-right: 0;
    }
    .social-btns-container {
        position: relative;
        bottom: unset;
    }
    .social-btns-container:after {
        width: 100%;
        padding-bottom: 12%;
    }
    .counsellor-table .accordion-icon-top {
        font-size: 2em;
    }
}


/* 960px */

@media screen and (max-width: 768px) {
    .hr-right {
        width: 70px;
        height: 70px;
    }
    .main {
        padding-top: 70px;
    }
    .slide-caption h2 {
        font-size: 4.5em;
    }
    .slide-caption p {
        font-size: 2em;
    }
    .home-contact-block {
        width: 49%;
        padding-bottom: 100px;
        margin-bottom: 2%;
    }
    .hcb-icon {
        width: 30px;
        padding-bottom: 30px;
    }
    .st-slider-container {
        width: 100%;
        padding-bottom: 100%;
    }
    .slider-text-block .text-section {
        width: 100%;
        padding: 0 5% 5% 5%;
    }
    .slider-text-block {
        padding: 0;
    }
    .ts-link {
        background-size: 15px;
    }
    .home-bottom .flex {
        width: 100%;
    }
    .hb-block.green-bg {
        margin-bottom: 3%;
    }
    .hb-text h2 {
        font-size: 3em;
    }
    .menu-footer-menu-container>ul>li,
    .menu-footer-menu-container>ul>li#menu-item-843,
    .menu-footer-menu-container>ul>li#menu-item-6904,
    .menu-footer-menu-container>ul>li#menu-item-6907,
    .en_US .menu-footer-menu-container>ul>li#menu-item-843,
    .en_US .menu-footer-menu-container>ul>li#menu-item-6904,
    .en_US .menu-footer-menu-container>ul>li#menu-item-6907 {
        width: 100%;
        margin-top: 3em;
    }
    .social-btns-container {
        margin-top: 3em;
    }
    .social-btns-container:after {
        width: 100%;
        padding-bottom: 15%;
        margin-top: 12em;
    }
    .sec-padding {
        padding: 5em 0;
    }
    .grid-1-3>.grid-col,
    .grid-1-3>.grid-col:nth-child(3n+3) {
        width: 100%;
        margin-right: 0;
    }
    #Publications .grid-1-3 {
        max-width: 350px;
        margin: auto;
    }
    .contact-col:nth-child(3) {
        width: 100%;
    }
    .contact-col:nth-child(2) {
        width: 100%;
        margin: 0 0 3% 0;
    }
    .image-text-block .text-block {
        width: 100%;
        margin-top: 1em;
        order: 2;
    }
    .image-text-block .image-block {
        width: 100%;
        order: 1;
    }
    h3 {
        font-size: 2.8em;
    }
    h4 {
        font-size: 2.4em;
    }
    .has-sidebar {
        padding-bottom: 0;
    }
    .has-sidebar>.wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    .content-col {
        width: 100%;
        order: 1;
        padding-left: 0;
    }
    .sidebar-col {
        width: 100%;
        order: 2;
    }
    .sidebar {
        padding: 12px;
    }
    .content-col .border-block:last-child {
        padding-bottom: 0;
    }
    .quote-block:before {
        width: 42px;
        height: 36px;
    }
    .quote-block {
        padding: 15px;
    }
    .image-text-block .text-block,
    .flex .col-right {
        width: 100%;
    }
    .flex .col-left {
        width: 100%;
        max-width: 550px;
        margin: auto;
    }
    .awa-block {
        flex-wrap: wrap;
    }
    .awa-left {
        width: 100%;
    }
    .awa-right {
        width: 100%;
    }
    .events-cols .event-col {
        flex-basis: 100%;
        margin-right: 0;
    }
    .events-cols .event-col:nth-child(3n+3) {
        margin-right: 0;
    }
    .highlights-section {
        padding: 5em 5%;
    }
    .sidebar li:before {
        top: 6px;
    }
    .text-block iframe {
        width: 100%;
    }
    .responsive-table,
    .text-block {
        overflow-x: auto;
    }
    .responsive-table table {
        min-width: 600px;
    }
    .text-block table {
        min-width: 600px;
    }
    .text-block li,
    .text-block td>ul>li {
        padding-left: 16px;
    }
    .text-block li:before {
        top: 6px;
        left: 0;
        width: 6px;
        height: 6px;
    }
    .home-popup-text {
        width: 100%;
        margin-bottom: 15px;
    }
    .home-popup-image {
        width: 100%;
        margin: auto;
    }
    .quiz-container {
        min-height: auto;
    }
    button.quiz-start-next {
        padding: 10px 20px;
        font-size: 2.4em;
    }
    button.quiz-start-next+button {
        margin-left: 30px;
    }
    .album-cols {
        gap: 2%;
    }
    .album-col {
        flex-basis: 49%;
        margin-bottom: 2%;
    }
    .flex-1-3 .video-row {
        flex-basis: 49%;
    }
}


/* 768px */

@media screen and (max-width:550px) {
    .header-wrapper {
        padding: 0 0 0 15px;
    }
    .header-logo img {
        max-height: 30px;
    }
    .header-left {
        width: auto;
    }
    .hr-right {
        width: 50px;
        height: 50px;
    }
    .main {
        padding-top: 50px;
    }
    .slide-caption h2 {
        font-size: 3em;
    }
    .slide-caption p {
        font-size: 1.8em;
    }
    .slide-caption {
        top: 55%;
    }
    .bx-wrapper .bx-pager.bx-default-pager {
        bottom: 12px;
    }
    .cb-link:first-child {
        order: 2;
        width: 49%;
        padding-bottom: 44%;
        margin-top: 0;
        margin-bottom: 2em;
    }
    .cb-link:nth-child(3) {
        order: 4;
        margin-top: 0;
        width: 100%;
        padding-bottom: 44%;
    }
    .cb-link:nth-child(4) {
        order: 3;
        width: 49%;
        padding-bottom: 44%;
        margin-top: 0;
        margin-bottom: 2em;
    }
    .cb-link:nth-child(5) {
        order: 5;
        width: 100%;
        padding-bottom: 44%;
    }
    .cb-link:nth-child(6) {
        order: 6;
        width: 100%;
        padding-bottom: 44%;
    }
    .hb-text h2 {
        font-size: 2.4em;
    }
    .custom-table th,
    .awa-table th {
        display: none;
    }
    .custom-table td,
    .awa-table td {
        display: block;
        width: 100%;
    }
    .custom-table td:before,
    .awa-table td:before {
        display: block;
        width: 100%;
        content: attr(data-th);
        font-family: "Basel Grotesk Medium", "Noto Sans TC", "Noto Sans SC", sans-serif;
        font-weight: 700;
        margin-bottom: 0.2em;
    }
    .breadcrumbs-container a.crumb:before {
        width: 5px;
        height: 14px;
    }
    .border-block {
        margin-bottom: 5em;
        padding-bottom: 5em;
    }
    .highlight-col .hc-details {
        background-position: left bottom 5px;
    }
    .awa-table td {
        padding-top: 0;
    }
    .awa-table td:first-child {
        padding-top: 20px;
    }
    .filter-section {
        max-width: 550px;
        margin: auto;
    }
    .select-filter,
    .filter-section .select-filter {
        width: 100%;
        margin-bottom: 2em;
    }
    .filter-section {
        margin-bottom: 2em;
    }
    .bx-wrapper .bx-controls-direction a {
        width: 30px;
        height: 30px;
    }
    .mobile-menu-container {
        max-width: 300px;
        min-width: 250px;
    }
    .header-logo-2 {
        margin-right: 5px;
    }
    #search-and-explore-events {
        padding-top: 0;
    }
    .quiz-start {
        flex-wrap: wrap;
    }
    .quiz-start-image {
        width: 100%;
        max-width: 350px;
        order: 2;
        margin: 4em auto 0;
    }
    .quiz-start-text {
        width: 100%;
        text-align: center;
        order: 1;
    }
    .quiz-start-heading {
        font-size: 2.8em;
    }
    .flex-1-2 .video-row,
    .flex-1-3 .video-row {
        flex-basis: 100%;
    }
    .search-btn {
        margin: 0 15px;
    }
    .language-switcher {
        margin-left: 15px;
    }
    .contrast-button {
        margin-right: 20px;
    }
	.social-btns-container{
		width:100%;
	}
}


/*550px */

@media screen and (max-width:450px) {
    .header-logo-1 {
        width: 43px;
        overflow: hidden;
    }
    .contact-col .ecd-left,
    .contact-col .ecd-right {
        width: 100%;
        margin-bottom: 1%;
    }
    .sec-tag {
        width: 100%;
    }
    .sec-tag:nth-child(2) {
        margin-top: 2em;
    }
    .highlight-col .hc-image {
        width: 250px;
        padding-bottom: 352px;
        margin: auto;
    }
    .highlight-col .hc-details {
        width: 100%;
        margin-top: 2em;
    }
    .ts-text {
        padding-right: 15px;
    }
    .ec-day {
        padding: 10px;
    }
    .daywithevent .ec-day:after {
        bottom: 0;
    }
    .events-cols .event-col {
        height: auto !important;
    }
    .page-template-page-about .content>.wrapper {
        max-width: 100%;
    }
    .counsellor-table h2.accordion-icon {
        background-size: 20px;
    }
    .ct-row-2 {
        padding-right: 23px;
    }
    .ct-row-2,
    .ct-row-1 {
        padding: 14px 7px;
    }
    .ec-heading {
        font-size: 2em;
    }
    .carousel-slide p {
        font-size: 1.6em;
    }
    .carousel-slide .ec-photo {
        width: 250px;
        margin: auto;
        padding-bottom: 352px;
    }
    h2.accordion-icon {
        font-size: 2.2em;
    }
    .ct-name {
        font-size: 2em;
    }
    .accordion-details p,
    .accordion-details li {
        font-size: 1.8em;
    }
    .album-col {
        flex-basis: 100%;
    }
	.calendar-section .ts-icon span{
		padding:2px;
	}
}


/* 450px */

@media screen and (max-width:400px) {
    .header-logo img {
        max-height: 24px;
    }
    .header-logo-1 {
        width: 32px;
    }
    .header-logo-2 {
        margin-right: 4px;
    }
    .close-button {
        width: 16px;
        height: 16px;
    }
    .slide-caption {
        font-size: 90%;
    }
    .home .bx-controls-direction {
        display: none;
    }
    .ec-image {
        width: 250px;
        padding-bottom: 352px;
        margin: 0 auto 10px;
    }
    .website-award {
        display: block;
        width: 80px;
        margin-left: 0;
        margin-top: 20px;
    }
    .social-btns-container:after {
        padding-bottom: 20%;
        margin-top: 18em;
    }
}


/* 375px */

@media screen and (max-width:350px) {
    .header-wrapper {
        padding: 0 0 0 10px;
    }
    .bx-wrapper .bx-pager.bx-default-pager a {
        width: 10px;
        height: 10px;
        margin: 0 3px;
        border-width: 1px;
    }
    .bx-wrapper .bx-pager.bx-default-pager a.active {
        width: 25px;
    }
    .slide-caption h2 {
        font-size: 2.8em;
    }
    .slide-caption h3 {
        font-size: 2.2em;
    }
    .hcb-icon {
        width: 25px;
        padding-bottom: 25px;
    }
    .hr-right {
        width: 45px;
        width: 45px;
    }
    .main {
        padding-top: 45px;
    }
    .hb-link>span:before {
        width: 8px;
        height: 8px;
        margin-right: 7px;
    }
    .hb-link {
        font-size: 12px;
    }
    .header-wrapper.wrapper {
        padding: 0 0 0 10px;
    }
}


/* 350px */