@media screen and (max-width: 1635px) {

    header > .container > nav:nth-child(2) {
        padding-bottom: 3em;
    }

    header .navbar .controls {
        padding-right: 2.5em;
    }

    .home-section1 .item .grid {
        width: calc(100% - 3em);
    }

    .home-section1 .item .grid .img-container .overlay {
        width: calc(100%);
        right: -2.4em;
    }

    .home-section1 .item:nth-child(3n-3) .grid .img-container .overlay {
        right: -2.4em;
    }

    .banner-container .container .content p.title {
        font-size: 1.75em;
    }

    .page .awardee-detail .card-body-container img {
        height: fit-content !important;
        max-width: 400px !important;
    }

}

@media screen and (max-width: 1440px) {
    .home-section1 .item {
        padding: 3em;
    }

    .home-section1 .item .grid .img-container .overlay {
        padding: 2em;
    }

    .banner-container .container .content p.title {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 1399px) {
    header > .container > nav:nth-child(2) {
        padding-bottom: 2em;
    }

    header .navbar .controls {
        display: block;
    }
}

@media screen and (max-width: 1280px) {
    .home-section1 .item {
        padding: 2em;
    }

    .home-section1 .item .grid .img-container .overlay {
        padding: 1.5em;
    }

    .banner-container .container .content p.title {
        font-size: 1.25em;
    }
}

@media screen and (min-width: 0px) and (max-width: 1199px) {

    header > .container {
        display: flex;
        flex-direction: column;
    }

    header > .container > .logo {
        margin-top: 0;
        position: relative;
        order: 2;
    }

    header > .container > .navbar.logo >.container {
        padding: 0 1em;
    }

    header .navbar .controls {
        padding: .5em;
        padding-right: .75em;
    }

    header .navbar-brand {
        margin-left: 1em;
    }

    header .navbar .controls button.hamburger {
        /*width: 5.00417vw;*/
        /*height: 3.753127vw;*/
        width: 40px;
        height: 32px;
        position: relative;
        margin: 0 auto;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        display: block;
        border-radius: 0;
        border-color: transparent;
    }

    header .navbar .controls button.hamburger span {
        display: block;
        position: absolute;
        height: 6px;
        /*height: .750625vw;*/
        width: 100%;
        background: #24b4b8;
        border-radius: 4px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    header .navbar .controls button.hamburger span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    header .navbar .controls button.hamburger span:nth-child(2) {
        top: 13px;
        /*top: 1.50125vw;*/
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    header .navbar .controls button.hamburger span:nth-child(3) {
        top: 25px;
        /*top: 3.0025vw;*/
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    header .navbar .controls button.hamburger.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        /* top: -3px;
        left: 8px; */
        top: -.250208vw;
        left: .667222vw;
    }

    header .navbar .controls button.hamburger.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    header .navbar .controls button.hamburger.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        /* top: 39px;
        left: 8px; */
        top: 3.25271vw;
        left: .667222vw;
    }


    header .navbar .controls button span.hamburger-box {
        width: 3.3361vw;
        height: 2.0016vw;
    }

    header .navbar .controls button span.hamburger-box .hamburger-inner, header .navbar .controls button span.hamburger-box .hamburger-inner:after, header .navbar .controls button span.hamburger-box .hamburger-inner:before {
        width: 3.3361vw;
        height: .33361vw;
        border-radius: .33361vw;
    }

    header .navbar .controls button span.hamburger-box .hamburger-inner {
        margin-top: -.166805vw;
    }

    header .navbar .controls button span.hamburger-box .hamburger-inner:before {
        top: -.834028vw;
    }

    header .navbar .controls button span.hamburger-box .hamburger-inner:after {
        bottom: -.834028vw;
    }

    /*
    header .form-inline {
        display: block !important;
    }

    header .form-inline .form-control {
        margin-right: 0 !important;
        position: relative;
        cursor: pointer;
        height: 36px;
        padding: 8px 8px;
        font-size: 1em;
        color: #1c1d1d;
        background-color: #fff;
        transition: opacity .15s ease-in,width .15s ease-in;
        z-index: 1;
        min-width: 1px;
        border: 2px solid transparent;
        padding-right: 3.5em;
        border-radius: 0;
        border-bottom: 1px solid #000;
    }

    header .form-inline .form-control:focus-visible {
        outline: solid;
        outline-color: #000;
        outline-width: 1px;
    }
    */

    .home-container .banner-slider .swiper .swiper-slide:before {
        display: none;
    }

    .home-container.banner .caption-container {
        background: unset;
        background-color: #29256b;
        position: relative;
        left: unset;
        bottom: unset;
        padding: 2em;
    }

    .home-container.banner .caption-container >.container {
        max-width: 100%;
        overflow: unset;
        padding: 1em 2em;
    }

    .home-container.banner {
        margin-bottom: 0;
        padding-top: 2em;
        background-color: #29256b;
    }

    .home-container .banner-slider .swiper {
        padding-bottom: 0;
    }

    .home-container.banner .swiper .swiper-button-prev, .home-container.banner .swiper .swiper-button-next {
        top: 25%;
    }

    .home-container.banner .swiper .swiper-pagination-container {
        position: absolute;
        justify-content: flex-end;
        left: unset;
        right: 0;
        top: 55%;
        bottom: unset;
        padding: 1em 2em;
        margin-top: 0;
        z-index: 10;
    }

    .home-container.banner .home-notice {
        position: relative;
        right: unset;
        width: 100%;
        z-index: 10;
    }

    .home-container.banner > .container > div > div.home-notice {
        position: relative;
        right: 0;
        width: 100%;
        z-index: auto;
    }

    .home-container.banner .home-notice > .container {
        padding: 2em;
    }

    .home-section1 > .container {
        padding-left: 2em;
        padding-right: 2em;
        padding-top: 0;
    }

    .home-section1 .item .grid {
        margin: 0 auto;
    }

    .home-section1 .swiper .swiper-pagination-container {
        margin-right: 0;
    }

    .home-section1 .item-container .item {
        margin-right: 0;
    }

    .home-section2 {
        background: transparent;
        /*margin: 1em 0;*/
    }

    .home-section2 .home-study-container > div > div {
        justify-content: center;
    }

    .home-section2 .home-study-container > div > div:first-child {
        background: rgb(247,243,235);
        background: linear-gradient(270deg, rgba(247,243,235,0) 25.5%, rgba(247,243,235,1) 25.5%, rgba(247,243,235,1) 100%);
    }

    .home-section3:before {
        display: none;
    }

    .home-section4 > .container {
        padding: 0 1.5em;
    }

    .banner-container .container .content p.title {
        font-size: 1em;
    }

    .page.school.search.home .map-container {
        background: transparent;
    }

    .page.school.search.home .map-container .map {
        max-height: 800px;
        height: calc(100% - 6em) !important;
        min-height: 400px;
    }

    .page.school.search.home .map-container .indicator {
        padding: .5em 3em;
        padding-top: 2em;
        background: rgb(247,243,235);
    }

    .page.school.search .content h1 {
        margin-top: 0.5em;
        margin-bottom: 0;
    }

    .page.school.search .map-container .indicator .item {
        margin:0 auto;
    }


    .offcanvas, .offcanvas-backdrop {
        display: unset;
    }

    .offcanvas .offcanvas-header {
        align-items: self-start;
        padding: .5em;
    }

    .offcanvas .offcanvas-header-search {
        padding: 0 1em;
    }

    .offcanvas .offcanvas-header-search ul {
        padding: 0;
    }

    .offcanvas .offcanvas-header-search ul li {
        width: 100%;
    }

    .offcanvas .offcanvas-header-search  .control-icon {
        width: 40px;
        height: 35px;
        max-width: 40px;
        max-height: 35px;
        /* width: 2.5vw; */
        /* height: 2.2916vw; */
        display: inline-block;
        vertical-align: top;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
        position: relative;
        font-size: 0;
        border: none;
        background: transparent;
        padding: 0;
        transition: .5s;
        border: 2px solid transparent;
    }

    .offcanvas .offcanvas-header-search .form-inline .control-icon {
        display: inline-block;
        vertical-align: top;
        font-size: 0;
        border: none;
        background: #fff;
        border-radius: 0;
        border-bottom-right-radius: 1.25em;
        border-top-right-radius: 1.25em;
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0px;
        max-width: 40px;
        max-height: 40px;
        overflow: hidden;
        border: 2px solid transparent;
    }

    .offcanvas .offcanvas-header-search .form-inline .control-icon:before {
        content: '';
        background-image: url(../images/icon.png);
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        width: 38.4px;
        height: 36px;
        /* width: 100%; */
        /* height: 100%; */
        top: 1px;
        left: -1px;
        background-size: unset;
        /* background-size: 33.854vw; */
        /* background-position: center center; */
    }

    .offcanvas .offcanvas-header-search .form-inline .control-icon:hover {
        /*background-color: #eee;*/
        border-color: #000;
    }

    .offcanvas .offcanvas-header-search .form-inline .control-icon:focus {
        /*background-color: #eee;*/
        border-color: #000;
    }

    .offcanvas .offcanvas-header-search .form-inline .control-icon.control-icon--search:before {
        background-position-x: -250px;
        background-position-y: -7px;
    }

    .offcanvas-header .btn-close {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        background: none;
        font-size: 2.5em;
        color: #24b4b8;
        opacity: 1;
        border-radius: 0;
        padding-right: .25em;
        position: absolute;
        right: .25em;
    }

    .offcanvas-header .btn-close:before {
        content: "\f00d";
        display: block;
        line-height: 1em;
    }

    #offcanvasMenu {
        background-color: #fff;
    }

    #offcanvasMenu .controls > ul {
        list-style: none;
        display: flex !important;
        margin-bottom: 0.25em;
        padding-left: 0;
        /* margin-right: 1em; */
    }

    #offcanvasMenu .controls ul li {
        display: inline-flex;
        align-items: center;
        /* margin-left: 10px; */
    }

    #offcanvasMenu .controls > ul > li:after {
        content: ' ';
        display: inline-block;
        border-right: 1px solid #4d4d4d;
        height: 34px;
        margin-right: 0;
        margin-top: 5px;
    }

    #offcanvasMenu .controls > ul > li a {
        color: #666;
        text-decoration: none;
        margin: 0 .25rem;
    }

    #offcanvasMenu .controls ul li.search {

    }

    #offcanvasMenu .controls li.language a {
        border-radius: 50%;
        background-color: #fff;
        width: 2.25em;
        height: 2.25em;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #4d4d4d;
        margin: 0 .25rem;
    }

    #offcanvasMenu .controls li.language a:focus-visible {
        outline: none;
        background: #4d4d4d;
        color: #fff;
    }

    #offcanvasMenu .controls > ul > li a:hover {
        text-decoration: underline;
    }

    #offcanvasMenu .controls > ul > li a:focus-visible {
        outline: solid;
        outline-color: #000;
        outline-width: 1px;
    }

    #offcanvasMenu .controls > ul > li.no-split:after {
        display: none;
    }

    #offcanvasMenu .controls > ul > li:last-child:after {
        display: none;
    }

    #offcanvasMenu .controls > ul > li .dropdown-menu {
        -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);
        box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);
        border: none;
        /* border-radius: 0;
        margin: 0;
        */
        min-width: 8em;
        top: calc(100% + 10px);
        padding: 0;
        /* overflow: hidden; */
    }

    #offcanvasMenu .controls > ul > li .dropdown-menu:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #dfdfdf;
        left: 14px;
        top: -6px;
        display: none;
    }

    #offcanvasMenu .controls ul.language-selector {
        /*display: block;*/
        /*position: absolute;*/
        /*-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);*/
        /*box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);*/
        padding: 0;
        margin: 0;
        /*margin-top: .5rem;*/
        border-radius: 0rem;
        transition: .5s all;
        width: 100%;
        /*background-color: #fdfdfd;*/
        /*z-index: 5000;*/
    }

    #offcanvasMenu .controls .collapsed ul.language-selector {
        display: none;
    }

    #offcanvasMenu .controls ul.language-selector li {
        display: block;
        list-style: none;
        margin: 0;
    }

    #offcanvasMenu .controls ul.language-selector li span {
        padding: .25rem;
    }

    #offcanvasMenu .controls ul.language-selector li a {
        color: #000;
        transition: .25s all;
        display: block;
        margin: 0;
        padding: .25rem;
        text-decoration: none;
        background-color: #dfdfdf;
        font-size: 1.25em;
    }

    #offcanvasMenu .controls ul.language-selector li a:hover, #offcanvasMenu .controls ul.language-selector li a:focus, #offcanvasMenu .controls ul.language-selector li a.active {
        color: #fff;
        text-decoration: none;
        background-color: #306798!important;
    }

    #offcanvasMenu .controls ul li.search {
        /* position: relative; */
        position: unset;
    }

    #offcanvasMenu .controls > ul > li.search .dropdown-menu {
        min-width: 300px;
        /* left: -100px !important; */
        background-color: #dfdfdf;
        transform: translate3d(0, 70px, 0px) !important;
    }

    #offcanvasMenu .controls > ul > li.search .dropdown-menu:before {
        right: 180px;
        left: unset;
        display: none;
    }

    #offcanvasMenu .controls > ul > li.search .dropdown-menu .btn {
        background-color: transparent;
        border-color: #fff;
    }

    #offcanvasMenu .controls > ul > li.share {
        /* position: relative; */
        position: unset;
    }

    #offcanvasMenu .controls > ul > li.share .dropdown-menu {
        background-color: #dfdfdf;
        min-width: 300px;
        /* left: -140px !important; */
        transform: translate3d(10px, 58px, 0px) !important;
        box-shadow: none;
    }

    #offcanvasMenu .controls > ul > li.share .dropdown-menu.show {
        position: absolute;
        inset: 0px auto auto 0px;
        margin: 0px;
    }

    #offcanvasMenu .controls > ul > li.share .dropdown-menu:before {
        right: 184px;
        left: unset;
        display: none;
    }

    #offcanvasMenu .share-btns__btn {
        margin-bottom: 0;
        width: 40px;
        height: 40px;
    }

    #offcanvasMenu .controls .control-icon {
        width: 40px;
        height: 40px;
        max-width: 40px;
        max-height: 40px;
        display: inline-block;
        vertical-align: top;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
        position: relative;
        font-size: 0;
        border: none;
        background: transparent;
        padding: 0;
        transition: .5s;
    }

    #offcanvasMenu .form-inline .control-icon {
        display: inline-block;
        vertical-align: top;
        font-size: 0;
        border: none;
        background: transparent;
        border-radius: 0;
        border-bottom-right-radius: 1.25em;
        border-top-right-radius: 1.25em;
        position: absolute;
        z-index: 2;
        top: 2px;
        right: 10px;
        width: 40px;
        height: 40px;
        max-width: 40px;
        max-height: 40px;
        overflow: hidden;
    }

    #offcanvasMenu .controls .control-icon:focus-visible {
        /*box-shadow: 0 0 0 0.025em rgba(143,112,40,1);*/
        outline: solid;
        outline-color: #000;
        outline-width: 1px;
    }

    .offcanvas-header .btn-close:focus {
        box-shadow: 0 0 0 0.015em #000;
    }

    #offcanvasMenu .controls .control-icon.control-icon--language {
        /*width: 32px;*/
    }

    #offcanvasMenu .controls .control-icon:hover:before, header .navbar .controls .control-icon:focus:before {
        /*background-position-y: -45px;*/
    }

    #offcanvasMenu .controls .control-icon.control-icon--home:before {
        background-position-x: -4px;
    }

    #offcanvasMenu .controls .control-icon.control-icon--contactus:before {
        background-position-x: -50px;
    }
    #offcanvasMenu .controls .control-icon.control-icon--print:before {
        background-position-x: -104px;
        background-position-y: 0px;
    }
    #offcanvasMenu .controls .control-icon.control-icon--share:before {
        background-position-y: 1px;
        background-position-x: -153px;
    }
    #offcanvasMenu .controls .control-icon.control-icon--language:before {
        background-position-y: -1px;
        background-position-x: -200px;
    }
    #offcanvasMenu .controls .control-icon.control-icon--fontsize:before {
        background-position-y: -1px;
        background-position-x: -50px;
        width: 48px;
    }
    #offcanvasMenu .controls .control-icon.control-icon--search:before {
        background-position-x: -247px;
        background-position-y: -3px;
    }

    #offcanvasMenu .controls .control-icon.control-icon--fontsize {
        max-width: 48px;
        width: 48px;
    }

    #offcanvasMenu .controls .control-icon:before {
        content: '';
        background-image: url(../images/icon.png);
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        width: 44px;
        height: 40px;
        /*width: 100%;*/
        /*height: 100%;*/
        top: 0;
        left: 0;
        background-size: unset;
        /*background-size: 33.854vw;*/
        /*background-position: center center;*/
    }

    #offcanvasMenu .offcanvas-body {
        background-color: #fff;
        padding: 0;
        height: 100%;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav {
        display: block;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item {
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item a {
        color: #29256b;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > div {
        display: flex;
        align-items: center;
        position: relative;
        /*border-bottom: 1px solid #bbb;*/
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > div:after {
        content: '';
        display: block;
        width: calc(100% - 2em);
        left: 50%;
        height: 1px;
        background-color: #29256b;
        position: absolute;
        transform: translateX(-50%);
        bottom: 0;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > div > a {
        font-size: 1.45em;
        font-weight: bold;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > div > a.nav-link {
        flex-grow: 1!important;
        padding-left: .5em;
        margin: .25rem;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > div > a.nav-link:focus-visible {
        outline-color: #000;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > div > a.cursor {
        transition: .5s;
        transform: rotate(180deg);
        padding:0 1em;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > div > a.cursor:focus-visible {
        outline-color: #000;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > div > a.cursor.collapsed {
        transform: rotate(0deg);
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children {
        display: block;
        overflow: hidden;
        height: 0;
        list-style: none;
        padding: 0;
        background-color: #f4f3f9;
        width: calc(100% - 3em);
        margin: 0 auto;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children.show {
        height: auto;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li {
        border-bottom: 1px solid #fff;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li a {
        padding: .5em 1em;
        white-space: normal;
        color: #29256b;
        display: none;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children.show > li a {
        display: block;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children a {
        color: #306798;
        font-size: 1.25em;
        font-weight: 400;
        padding: .5em 1em;
        padding-left: 1.25em;
        white-space: normal;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children a:hover {
        background-color: #e18f40;
        color: #000;
        font-size: 1.25em;
        font-weight: 400;
    }

    /* #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children li a:before {
        content: '';
        color: #fff;
        width: 6px;
        height: 6px;
        background-color: #fff;
        border-radius: 50%;
        display: inline-block;
        margin-right: .5em;
    } */

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li > div {
        display: flex;
        align-items: center;
        position: relative;
        border-bottom: 1px solid #fff;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li > div > a.cursor {
        transition: .5s;
        transform: rotate(180deg);
        padding: .5em 1em;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li > div > a.cursor.collapsed {
        transform: rotate(0deg);
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li > .subchildren {
        display: block;
        overflow: hidden;
        height: 0;
        list-style: none;
        padding: 0;
        background-color: #f4f3f9;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li > .subchildren.show {
        height: auto;
    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li > .subchildren > li {
        border-bottom: 1px solid #fff;

    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li > .subchildren > li:last-child {
        border-bottom: none

    }

    #offcanvasMenu .offcanvas-body > div > ul.nav > li.nav-item > .children > li > .subchildren > li a {
        padding: .5em 1em;
        white-space: normal;
    }

    .page .breadcrumb-container > .container > div {
        padding: 0 .5em;
    }

    .banner-container .banner:before {
        display: none;
    }

    .banner-container:after {
        display: none;
    }

    .banner-container .banner .banner-mask {
        display: none;
    }

    .page .title-container h1.title {
        padding: .5em 1.5em;
    }

    .banner-container .container .content {
        padding: 2em 1em;
    }

    .home-container.banner .swiper .swiper-pagination-container {
        position: relative;
    }

    .home-section2 > .container .video-content .video-bigbox {
        margin-bottom: 1em;
    }

    .home-section2 > .container .video-content .video-list {
        margin-bottom: 1em;
    }

    .home-section5 .swiper-container .swiper-element .swiper .swiper-button-prev {
        position: absolute;
        left: 0;
    }

    .home-section5 .swiper-container .swiper-element .swiper .swiper-button-next {
        right: 0;
    }

    .home-section5 .swiper-container .swiper-element .swiper .swiper-button-prev, .home-section5 .swiper-container .swiper-element .swiper .swiper-button-next {
        color: #fff;
        background-color: rgba(0, 0, 0, .7);
        padding: 1em 1em;
        transition: .5s all;
        width: auto;
        transform: translateY(2em);
    }

    .home-section5 .swiper-container .swiper-element .swiper .swiper-button-next:after, .home-section5 .swiper-container .swiper-element .swiper .swiper-button-prev:after {
        font-size: 1em;
    }

    .page .sub-title-container .content-container h4 {
        padding-left: .5em;
        padding-right: .5em;
    }

    .assessment .sub-content-container .content {
        padding: 0 1.5em;
    }

    .assessment .sub-content-container .content .result .card-body-container{
        height: 100%;
    }

    .assessment .sub-content-container .content .result .card-body-container img {
        width: auto;
    }

    .ceremony-video .sub-title-container .content-container h3 {
        padding-left: .5em;
        padding-right: .5em;
    }

    .ceremony-video .sub-content-container .content {
        padding: 0 1.5em;
    }

    .page .sub-title-container .content-container h2 {
        padding-left: .5em;
        padding-right: .5em;
    }

    .page .sub-title-container .content-container h3 {
        padding-left: .5em;
        padding-right: .5em;
    }

    .compendium .sub-content-container .content {
        padding: 0 1.5em;
    }

    .compendium .accordion.compendium .accordion-header .title-container .accordion-button {
        padding-left: .5em;
        padding-right: .5em;
    }

    .compendium .sub-content-container .card-body-container {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .compendium .sub-content-container .card-body-container div:first-child {
        flex-grow: 1 !important;
    }

    .compendium .sub-content-container .card-body-container .card .card-body {
        height: 100%;
    }

    .awardee-detail .sub-abstract-container .content {
        padding: 0 1.5em;
    }

    .awardee-detail .sub-abstract-container a.btn {
        margin-bottom: .5em;
        margin-left: 0;
    }

    .showcase .gallery-container .content {
        padding: 0 1.5em;
    }

    .showcase .gallery-container .swiper-button-next, .showcase .gallery-container .swiper-button-prev {
        top: calc(45% - 80px);
    }

    .showcase .sub-content-container .content {
        padding: 0 1.5em;
    }

    .openclassroom .sub-content-container .content {
        padding: 0 1.5em;
    }

    .awardeeworkshop .sub-content-container .content {
        padding: 0 1.5em;
    }

    .banner-container .banner {
        border-top: 1em solid #29256b;
    }

    footer {
        padding-bottom: 2em;
        background-color: #29256b;
        color: #fff;
    }

    footer a {
        color: #fff;
    }

    footer a:hover {
        color: #e18f40;
    }

    footer .menu {
        display: none;
    }

    footer > .container > div.d-flex {
        display: block!important;
    }

    footer .controls {
        border-top: 1px solid #999;
        margin-top: 2em;
        margin-top: 0;
        padding-bottom: 0;
    }

    footer .controls ul.navigation {
        margin-left: 1em;
        margin-right: 1em;
        padding-bottom: 1em;
        margin-bottom: 1em;
        border-bottom: 1px solid #fff;
    }

    footer .text-end {
        margin-left: 1em;
        margin-right: 1em;
    }

    footer .flex-nowrap {
        justify-content: center!important;
    }



    .backtotop {
        bottom: 100px;
    }

}

@media screen and (max-width: 1024px) {

    .banner-container .container .content {
        padding: 2em 0em;
    }
}

@media screen and (max-width: 991px) {
    .home-section4 img.img-fluid {
        height: fit-content;
        width: auto;
    }

    .home-section3 .item .grid .content {
        display: block;
        max-width: 430px;
    }

    .home-section3a.publicityvideo-list .card {
        max-width: 450px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 900px) {
    header > .container > nav:nth-child(2) {
        padding-bottom: 1em;
    }

    .banner-container .container .content p.title {
        font-size: .75em;
    }
}

@media screen and (max-width: 768px) {

    header > .container > nav:nth-child(2) {
        padding-bottom: .5em;
    }

    header .navbar-brand img {
        width: 75%;
    }

    .home-container.banner .swiper .swiper-button-prev, .home-container.banner .swiper .swiper-button-next {
        top: 25%;
    }

    .home-container.banner .caption-container p {
        font-size: 2em;
        color: #fff;
    }

    .home-container.banner .swiper .swiper-button-prev {
        margin-left: 0;
    }

    .home-container.banner .swiper .swiper-button-prev:after {
        width: 25px;
        height: 37.5px;
        background-position-x: -0px;
        background-position-y: -8px;
        margin-right: 0;
        background-size: 430px;
    }

    .home-container.banner .swiper .swiper-button-next {
        margin-right: 0;
    }

    .home-container.banner .swiper .swiper-button-next:after {
        width: 25px;
        height: 37.5px;
        background-position-x: -25px;
        background-position-y: -8px;
        margin-right: 0;
        background-size: 430px;
    }

    .home-container.banner .caption-container {
        padding: 1.5em;
    }

    .home-container.banner .home-notice > .container {
        padding: 0;
    }

    .home-container.banner .home-notice p {
        font-size: 2em;
    }

    .home-section1 > .container {
        padding-left: 0;
        padding-right: 0;
    }

    .home-section1 > .container > div > div:first-child {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    .home-section1 .item-container p.title {
        font-size: 1.25em;
    }

    .home-section1 .item-container p.date {
        font-size: 1.5em;
    }

    .home-section1 .swiper .swiper-pagination-container {
        padding-right: 1.5em;
    }

    .home-section1 .swiper .swiper-button-prev {
        margin-left: 0;
    }

    .home-section1 .swiper .swiper-button-next {
        margin-right: 0;
    }

    .home-section1 h2 {
        font-size: 2em;
    }

    .home-section1 h2::after {
        background-position: -80px -4.5px;
        width: 20px;
        height: 18px;
        margin-left: .25em;
        background-size: 430px;
    }

    .home-section1 .swiper .swiper-button-prev:after {
        width: 25px;
        height: 37.5px;
        background-position-x: -0px;
        background-position-y: -8px;
        margin-right: 0;
        background-size: 430px;
    }

    .home-section1 .swiper .swiper-button-next:after {
        width: 25px;
        height: 37.5px;
        background-position-x: -25px;
        background-position-y: -8px;
        margin-right: 0;
        background-size: 430px;
    }

    .home-section2 {
        background-color: #f7f5ee;
        padding-bottom: 1em;
    }

    .home-section2 > .container {
        padding: 0;
        /*display: block;*/
    }

    .home-section1 h2 {
        text-align: center;
    }

    .home-section2 > .container .video-content {
        width: 100%;
        border-left: 0;
        border-right: 0;
        /*margin: 0;*/
        margin-left: 0;
        margin-right: 0;
        padding: 1em;
    }

    .home-section2 > .container .video-content .video-bigbox {
        margin-bottom: 1em;
    }

    .home-section2 > .container .video-content .video-list {
        margin-bottom: 1em;
    }

    .home-section2 > .container .video-content .embedVideo {
        text-align: left;
        color: #000;
    }

    .home-section2 > .container .video-content .embedVideo.image {
        width: 100%;
    }

    .home-section2 > .container .video-content:after {
        left: 0;
    }

    .home-section2 .basic-info {
        padding: 1em;
    }

    .home-section3 h2 {
        margin-bottom: 1.5em;
    }

    .home-section3 h2::after {
        bottom: -.5em;
    }

    .home-section3 .dropdown {
        text-align: center;
    }

    .home-section3 .dropdown button {
        width: 90%;
        margin:0 auto;
        border: 1px solid #000;
        border-bottom: 0;
        font-size: 1.75em;
        font-weight: bold;
        text-wrap: unset;
        position: relative;
        padding: .5em 2em;
    }

    .home-section3 .dropdown button.dropdown-toggle::after {
        position: absolute;
        right: 1em;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f078";
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-rendering: auto;
        border: 0;
        margin: 0;
        top: 35%;
    }

    .home-section3 .dropdown button.btn-secondary:hover, .home-section3 .dropdown button.btn-secondary:focus, .home-section3 .dropdown button.btn.show {
        color: #000;
    }

    .home-section3 .dropdown button.tab-0 {
        background-color: #fbe8c8;
        border-color: #eeb541;
    }

    .home-section3 .dropdown button.tab-1 {
        background-color: #d0e5cd;
        border-bottom-color: #8eb756;
    }

    .home-section3 .dropdown button.tab-2 {
        background-color: #ece8fd;
        border-color: #5098cd;
    }

    .home-section3 .dropdown .dropdown-menu.show {
        width: 88%;
        border-radius: 0;
        background-color: #fff;
        padding: 0;
    }

    .home-section3 .dropdown .dropdown-menu.show .dropdown-item {
        color: #000;
        background-color: #fff;
        font-size: 1.75em;
        font-weight: bold;
        padding: 0.5em 1em;
        text-wrap: unset;
    }

    .home-section3 .dropdown .dropdown-menu.show .dropdown-item.tab-0.active, .home-section3 .dropdown .dropdown-menu.show .dropdown-item.tab-0:active {
        background-color: #fbe8c8;
        border-color: #eeb541;
    }

    .home-section3 .dropdown .dropdown-menu.show .dropdown-item.tab-1.active, .home-section3 .dropdown .dropdown-menu.show .dropdown-item.tab-1:active {
        background-color: #d0e5cd;
        border-bottom-color: #8eb756;
    }

    .home-section3 .dropdown .dropdown-menu.show .dropdown-item.tab-2.active, .home-section3 .dropdown .dropdown-menu.show .dropdown-item.tab-2:active {
        background-color: #ece8fd;
        border-color: #5098cd;
    }

    .home-section3a h2 {
        font-size: 2em;
    }

    .home-section4 {
        padding-top: 2em;
    }

    .home-section4 h2 {
        margin-top: 1em;
        margin-bottom: 1.5em;
        font-size: 2em;
    }

    .home-section4 h2::after {
        bottom: -.5em;
        width: 75%;
    }

    .home-section4 .card .card-header {
        padding: 4em 1.75em;
        padding-right: 0;
        padding-top: 4em;
    }

    .home-section4 .card .card-header:before {
        width: 37.5px;
        height: 32.5px;
        background-position-x: -55.5px;
        background-position-y: -58.5px;
        background-size: 430px;
        margin-left: -.5em;
        margin-top: -1.75em;
    }

    .home-section4 .card .card-header:after {
        width: 23px;
        height: 22.5px;
        background-position-x: -55.5px;
        background-position-y: -97px;
        background-size: 430px;
        right: .75em;
    }

    .home-section4 .card .card-header p.philosophy {
        padding: .5em 1em;
    }

    .home-section4 .card .card-body {
        padding: 2em 1em;
    }

    .home-section4 .card .card-body p {
        padding: 1em;
    }

    .home-section4 .swiper-button-next, .home-section4 .swiper-button-prev {
        top: calc(30% - 80px);
    }

    .home-section4 .swiper-button-prev:after {
        width: 28.5px;
        height: 60px;
        background-position-x: -0px;
        background-position-y: -55.5px;
        margin-right: 0;
        background-size: 430px;
    }

    .home-section4 .swiper-button-next:after {
        width: 28.5px;
        height: 60px;
        background-position-x: -23px;
        background-position-y: -55.5px;
        margin-right: 0;
        background-size: 430px;
    }

    .home-section5 h2 {
        font-size: 2em;
    }

    .home-section5 .swiper-container .swiper-element {
        width: 80%;
        margin: 0 auto;
    }

    .home-section5 .swiper {
        position: unset;
    }

    .home-section5 .swiper .swiper-slide {
        display: inline-flex;
        justify-content: center;
    }

    .banner-container .container .content p.title {
        display: none;
    }

    .content-container table.table > thead > tr > th {
        padding: 0.5rem .5rem;
        font-size: 1.1em;
    }

    .content-container table.table > tbody > tr > td {
        padding: 1rem .5rem;
        font-size: 1.1em;
    }

    .page .content-container h2 {
        font-size: 2em;
    }

    .page .content-container h3 {
        font-size: 1.75em;
    }

    .page .content-container p {
        font-size: 1.1em !important;
    }

    .page .content-container ul li {
        font-size: 1.1em !important;
    }

    .page .content-container li {
        font-size: 1.1em !important;
    }

    .page .content-container ul {
        margin-top: .5em;
    }

    .page .btn-primary {
        padding: .375em 1em;
        font-size: 1.25em;
    }

    .content-container .organisation .accordion-button::after {
        width: 20px;
        height: 20px;
        background-position-x: -51.5px;
        background-position-y: -11.5px;
        background-size: 430px;
    }

    .ceremony-video .sub-content-container .sub-content .card .card-header {
        padding: 1em 1.25em;
    }

    .ceremony-video .sub-content-container .sub-content .card .card-body {
        padding: 1em 1.25em;
    }

    .organisation .title-container h1.title:before {
        width: 40px;
        height: 20px;
        background-position-x: -357.5px;
        background-position-y: -10.5px;
        margin-right: .25em;
        background-size: 430px;
    }

    .ceremony .title-container h1.title:before {
        width: 27.5px;
        height: 27.5px;
        background-position-x: -165px;
        background-position-y: -5px;
        margin-right: .25em;
        background-size: 430px;
    }

    .awardee .title-container h1.title:before {
        width: 27.5px;
        height: 25px;
        background-position-x: -132.5px;
        background-position-y: -5px;
        margin-right: .25em;
        background-size: 430px;
    }

    .ltresource .title-container h1.title:before {
        width: 30px;
        height: 30px;
        background-position-x: -205px;
        background-position-y: -2.5px;
        margin-right: .25em;
        background-size: 430px;
    }

    .awardee-detail .card .card-body .card-title {
        font-size: 2.5em !important;
    }

    .awardee-detail .topic {
        font-size: 2em !important;
    }

    .related-professional-sharing p.title {
        font-size: 1.75em !important;
    }

    .related-professional-sharing .card .card-body .card-title {
        font-size: 1.5em !important;
    }

    .related-professional-sharing .ltresource-container {
        margin: 0;
    }

    .awardee-detail .topic {
        width: 100%;
    }

    .page .awardee-detail .card-body-container img {
        height: fit-content !important;
        max-width: 400px !important;
    }

    .showcase .title-container h1.title:before {
        width: 35px;
        height: 35px;
        background-position-x: -320px;
        background-position-y: -0.5px;
        margin-right: .25em;
        background-size: 430px;
    }

    .compendium .accordion.compendium .accordion-header .title-container .accordion-button::after {
        width: 20px;
        height: 20px;
        background-position-x: -51.5px;
        background-position-y: -11.5px;
        background-size: 430px;
    }

    .compendium .compendium-container .photo-slider .swiper-button-prev:after {
        width: 28.5px;
        height: 60px;
        background-position-x: -0px;
        background-position-y: -55.5px;
        margin-right: 0;
        background-size: 430px;
    }

    .compendium .compendium-container .photo-slider .swiper-button-next:after {
        width: 28.5px;
        height: 60px;
        background-position-x: -23px;
        background-position-y: -55.5px;
        margin-right: 0;
        background-size: 430px;
    }

    .showcase .gallery-container .swiper-button-prev:after {
        width: 28.5px;
        height: 60px;
        background-position-x: -0px;
        background-position-y: -55.5px;
        margin-right: 0;
        background-size: 430px;
    }

    .showcase .gallery-container .swiper-button-next:after {
        width: 28.5px;
        height: 60px;
        background-position-x: -23px;
        background-position-y: -55.5px;
        margin-right: 0;
        background-size: 430px;
    }

    .open-classroom .title-container h1.title:before {
        width: 30px;
        height: 27.5px;
        background-position-x: -282.5px;
        background-position-y: -5px;
        margin-right: .25em;
        background-size: 430px;
    }

    .ltresource .card .card-body .card-title {
        padding: .5em 0em;
    }

    .page .title-container h1.title {
        width: 100%;
        padding: .5em 1em;
    }

    .page .sub-title-container .content-container h2 {
        padding-left: 0;
        padding-right: 0;
    }

    .page .content-container img {
        height: auto !important;
    }

    .related-professional-sharing .card .card-header img {
        max-width: 100% !important;
    }

    .backtotop {
        bottom: 120px;
    }
}

@media screen and (max-width: 640px) {
    header > .container > nav:nth-child(1) {
        padding-bottom: 0;
    }
    header > .container > nav:nth-child(2) {
        padding-top: 0;
        padding-bottom: 0;
    }

    header .navbar-brand {
        margin-left: 0;
    }

    header .navbar-brand img {
        width: 100%;
    }

    header nav.title-container > .container {
        line-height: 1em;
    }

    .btn-secondary {
        /*width: 100%;*/
    }

    .page .pager ul li a {
        margin-bottom: .5em;
    }

    .banner-container .banner {
        border-top: 1em solid #29256b;
    }

    .banner-container .banner img.img-fluid {
        width: 150%;
    }

    .page .title-container h1.title {
        width: 100%;
    }

    .backtotop {
        right: 0em;
    }

    .awardee-detail .card .card-body .teaching-philosophy {
        display: block !important;
    }

    .awardee-detail .card .card-body .teaching-philosophy span, .awardee-detail .card .card-body .teaching-philosophy .title {
        display: block;
    }

}

@media screen and (max-width: 480px) {

    header .navbar .controls {
        padding-right: 0;
    }

    #offcanvasMenu .controls .control-icon {
        margin-left: 0.125rem;
        margin-right: 0.125rem;
    }

    .home-section1 h2 {
        padding: 0;
    }

    .page .filter .form-item {
        width: 100%;
    }

    .page .filter .form-item .form-check-inline {
        width: 100%;
    }

    .page .sub-title-container {
        padding-right: 1em;
        padding-left: 1em;
    }

    .page .title-container h1.title {
        font-size: 1.5em;
        padding: .5em 1em;
    }

    .ltresource .title-container h1.title span.icon {
        width: 30px;
        height: 30px;
        background-size: 430px;
        background-position-x: -205px;
        background-position-y: -2.5px;
    }

    .page .filter label {
        width: 100%;
    }

    .page select {
        width: 100%;
        margin: 0;
    }

    .page .filter input[type=text], .tc .page .filter input[type=text], .sc .page .filter input[type=text] {
        width: 100%;
    }

}

@media screen and (max-width: 380px) {

}