@media (max-width: 1366px) {
    #header-main {
        position: relative;
        margin: auto;
        /*padding: 0px 15px 0px 15px;*/
        /*width: 100%;*/
        /*padding-left: 120px;*/
    }

    #header-logo {
        max-width: 220px;
    }

    #main-menu li > span.nolink, #main-menu li > a {
        padding: 10px 10px;
    }
}


@media (max-width: 1200px) {


    .swiper-slide-link > img,
    .swiper-slide > img {
        width: 100%;
        height: auto;
    }


    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    #header {
        height: 60px;
    }

    #header .header-container {
        height: 60px;
    }

    #header.scroll {
        height: 60px;
    }

    #header-logo {
        max-width: 160px;
    }

    #main-menu > ul > li > span.nolink, #main-menu > ul > li > a {
        height: 54px;
    }

    #hotline {
        position: relative;
        height: 60px;
        color: white;
        /* font-family: UTM_AVO_BOLD; */
        font-size: 16px;
        width: 205px;
        background-image: url(../img/backgrounds/img-5.png);
        background-size: cover;
        background-repeat: no-repeat;
        padding-left: 36px;
        margin-right: -15px;
        font-weight: 600;
    }

    #hotline .hotline-container {
        display: flex;
        align-items: center;
    }


    #hotline i.icon::before {
        width: 22px;
        height: 22px;
        background-size: 100% 100%;
    }
    #hotline div.icon {
        font-size: 0px;
        text-indent: -9999px;
        padding-top: 0px;
    }

    #header.scroll #main-menu > ul > li > span.nolink, #header.scroll #main-menu > ul > li > a {
        height: 60px;
    }

    #header.scroll #hotline div.icon {
        font-size: 0px;
        text-indent: -9999px;
         padding-top: 0px;
    }

    .scroll #hotline {
        height: 60px;
    }

    #main-menu-toggle-btn {
        display: table;
        right: 270px;
        top: 6px;
        position: absolute;
    }

    #header-main {
        position: static;
    }

    #main-menu {
        position: fixed;
        top: 60px;
        left: 0px;
        width: 260px;
        background-color: #005235;
        z-index: 10;
        height: calc(100% - 60px);
        overflow-y: scroll;
        -webkit-transform: translate(-260px, 0);
        -ms-transform: translate(-260px, 0);
        -o-transform: translate(-260px, 0);
        transform: translate(-260px, 0);

        -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
        -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
        -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    }

    #main-menu.show {
        -webkit-transform: translate(0px, 0);
        -ms-transform: translate(0px, 0);
        -o-transform: translate(0px, 0);
        transform: translate(0px, 0);
    }

    .switch-language {
        margin-left: 25px;
        position: absolute;
        right: 215px;

    }

    #main-menu > ul {
        display: block;
    }

    #main-menu > ul > li:first-child
    {
        margin-top: 10px;
    }
    #main-menu > ul > li:last-child {
        margin-bottom: 10px;
    }

    #main-menu > ul li a {
        color: white;
    }
    #main-menu > ul li span {
        color: white;
    }

    #main-menu > ul > li > span.nolink, #main-menu > ul > li > a,
    #header.scroll #main-menu > ul > li > span.nolink, #header.scroll #main-menu > ul > li > a
    {
        height: 36px;
        font-size: 14px;
    }

    #main-menu > ul > li > span.nolink > span.dropdown, #main-menu > ul > li > a > span.dropdown {
        top: 0px;
    }

    #main-menu ul li > ul {
        position: static;
        overflow: hidden;
        display: none;
    }

    #main-menu ul > li:hover > ul {
        top: 100%;
        opacity: 1;
        visibility: visible;
        display: block;
    }

    #main-menu ul > li.active > ul {
        top: 100%;
        opacity: 1;
        visibility: visible;
        display: block;
    }

    #main-menu > ul > li.active > span.nolink, #main-menu > ul > li.active > a {
        border-bottom: 2px solid #f36f21;
    }

    #main-menu > ul > li.active > a, #main-menu > ul > li.active > span, #main-menu > ul > li > a.active, #main-menu > ul > li > span.active {
        color: #f36f21;
    }


    #home-services-and-facilities-block .home-services-and-facilities-item .home-services-and-facilities-item-content .home-services-and-facilities-item-des {
        padding: 55px;
        text-align: justify;
    }

    .category-article-page .list-article-hilight .list-article-hilight-left,
    .category-article-page .list-article-hilight .list-article-hilight-right
    {
        width: 100%;
        /*max-width: 526px;*/
        margin: auto;
        float: none;
    }
    .category-article-page .list-article-hilight .list-article-hilight-right {
        padding-left: 0px;
        margin-top: 30px;
    }


    .page-article .article-main {
        width: 100%;
    }
    .page-article .article-hilights {
        width: 100%;
        padding-left: 0px;
    }

    #regiter_join_today_modal .modal-dialog {
        width: 600px;
    }

    #regiter_join_today_modal .modal-dialog .modal-content {
        background-image: none !important;
        background-color: white;
    }

    /*todo*/

    #class-page .class-type-navigator a{
        background-image: none !important;
        background-size: 100% 100%;
        color: white;
        width: calc(50% - 30px);
        text-align: center;
        margin-bottom: 15px;
        background-color: #30715b;
        margin-left: 15px;
        margin-right: 15px;
    }

    #class-page .class-type-navigator a.active, #class-page .class-type-navigator a:hover {
        color: #f36f21;
    }

    #class-page  .class-type-navigator-content {
        position: absolute;
        right: 0px;
        top: 100%;
        background: white;
        padding: 25px 15px 15px 15px;
        z-index: 1;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        border-top: 1px solid #30715b;
        display: none;
    }

    #class-page  .class-type-navigator-content.show {
        display: block;
    }

    #class-type-toggle-btn

    {
        display: block !important;
    }

    #class-page .class-type-navigator-active {
        display: table !important;
    }


}

@media (min-width: 992px) {
    .cassiopeia-swiper-desktop,
    .desktop
    {
        display: block;
    }

    .schedule-page-img-dowload .dowload-schedule-img-desktop {
        display: block;
    }
}

@media (max-width: 991px) {
    h1, h2, h3, h4, h5, h6 {
        line-height: normal;
    }

    .cassiopeia-swiper-tablet,
    .tablet
    {
        display: block;
    }

    .cassiopeia-swiper-desktop.no-tablet-mobile,
    .desktop.no-tablet-mobile,
    .desktop.no-tablet
    {
        display: block !important;
    }

    .dowload-schedule-img-tablet {
        display: block;
    }

    .dowload-schedule-img-desktop.no-tablet-mobile {
        display: block !important;
    }

    #home-join-today-block .join-today-form{
        margin: auto;
        max-width: 520px;
    }


    #footer .footer-bottom-group-top-item-content {
        margin: auto;
        display: table;
        text-align: center;
    }

    #footer .footer-bottom-group-top-item:nth-child(2) {
        margin-top: 30px;
    }

    #class-page .class-type-items .class-type-item-body{
        display: table;
        margin: auto;
    }

    #class-page .class-type-navigator {

    }

    #class-page .class-type-navigator .class-type-navigator-content {
        margin-left: 0px;
        margin-right: 0px;
    }




    #member-page .member-benefit-content-inner {
        display: table;
        margin: auto;
    }

    .category-article-page .list-article-hilight .list-article-hilight-left .article-highlight-img img{
        width: 100%;
    }

    .page-article .article-hilights .article-hilight, .page-article .article-hilights .article-hilight-large img {
        width: 100%;
    }

    .page-article .related-article-title {
        margin-bottom: 15px;
    }

    .page-article .related-article {
        padding-bottom: 20px;
    }

    #facilities-page .facilitie-item-image img{
        width: 100%;
    }

    .tpl-block-1 .tpl-block-1-body-item{
        margin-bottom: 10px;
        white-space: -moz-pre-wrap; /* Mozilla */
        white-space: -hp-pre-wrap; /* HP printers */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: pre-wrap; /* CSS 2.1 */
        white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
        word-wrap: break-word; /* IE */
        word-break: break-all;
    }


    .tpl-block-2 {
        overflow: hidden;
    }
    .tpl-block-2 .tpl-block-body {
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 35px;
    }

    .tpl-block-2 .tpl-block-body-content {
        margin: auto;
    }

    #schedule-page .schedule-page-img-dowload a {
        text-align: center;
    }

    #class-page .class-type-item-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*#class-page .class-type-item {*/
        /*padding-top: 60px;*/
        /*padding-bottom: 60px;*/
    /*}*/
}


@media (max-width: 768px) {
    .cassiopeia-swiper-tablet, .tablet {
        display: none;
    }

    #home-join-today-block {
        background-image: none;
    }
}

@media (max-width: 750px) {
    .cassiopeia-swiper-tablet.no-mobile {
        display: block !important;
    }
    .cassiopeia-swiper-mobile,
    .mobile
    {
        display: block;
    }

    .desktop.no-tablet {
        display: none !important;
    }

    .dowload-schedule-img-mobile {
        display: block;
    }

    #regiter_join_today_modal .modal-dialog,
    #adv-modal .modal-dialog.modal-lg,
    #message-model .modal-dialog
    {
        width: 86%;
    }

    .swiper-slide .html_code {
        max-height: 80%;
        overflow-y: scroll;
    }



    #home-services-and-facilities-block .home-services-and-facilities-block-title {
        font-size: 26px;
    }

    #home-join-today-block  {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    #schedule-page .schedule-page-pdf-content iframe{
        height: 400px;
    }

}


@media (max-width: 520px) {

    #header-logo {
        max-width: 140px;
    }

    #hotline-toggle-btn {
        display: flex;
    }

    #hotline {
        position: absolute;
        right: 0px;
        top: 100%;
        background-color: #005235;
        padding-left: 0px;
        width: 0px;
        margin-right: 0px;
        -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
        -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
        -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
        overflow: hidden;
    }

    #hotline .hotline-container  {
        width: 176px;
    }

    #main-menu-toggle-btn {
        display: table;
        right: 68px;
        top: 8px;
        position: absolute;
        padding: 6px;
    }
    .switch-language {
        margin-left: 25px;
        position: absolute;
        right: 15px;
    }


    #hotline.show {
        width: 176px;
    }

    #hotline-mobile {
        display: flex;
    }
}

@media (max-width: 480px) {
    #class-page .class-type-navigator a{
        width: 100%;
    }
    .article-short-left {
        width: 100%;
    }

    .article-short-left .article-short-img img{
        width: 100%;
    }
    .article-short-right {
        width: 100%;
        margin-top: 20px;
        padding-left: 0px;
    }
    .category-article-page .article-highlight-large-content .article-highlight-group-field {
        max-width: none;
        padding-right: 20px;
        bottom: 25px;
    }

    .category-article-page .list-article-hilight .list-article-hilight-left .article-highlight-img img{
        width: 100%;
    }

}