/** *******************************************
 ** MEDIA QUERY FOR  UP ++ 1440px
 ** *******************************************/
@media screen and (min-width: 1440px) {
    section.break-before-except-desktop, section.break-except-desktop {
        margin-top: 40px !important;
    }
    #reflow_section {
        margin-bottom: -60px !important;
    }

}
@media screen and (max-width: 1600px) and (min-width: 1240px) {
    #museum--bunker .row {
        margin-top: -60px !important;
    }
    #course--course aside,
    #uti--way aside{
        margin-top: -40px;
    }

}


/** *******************************************
 ** MEDIA QUERY FOR  1580px
 ** *******************************************/
@media screen and (max-width: 1580px) {
    body, :root {
        --_p: 12.5% !important;
    }

    body .package {
        margin: 0 20px;
    }
}

/** *******************************************
 ** MEDIA QUERY FOR  1245px -- 1440px
 ** *******************************************/
@media screen and (max-width: 1440px) and (min-width: 1245px) {
    body,
    :root {
        --_p: 10% !important;
    }
    section.break-before-except-desktop, section.break-except-desktop {
        margin-top: 0px !important;
    }

    #museum--bunker {
        margin-bottom:-60px !important;
    }

    #donate--hospital section{
        padding-bottom:0px;
    }

    #reflow_section {
        margin-bottom: -100px !important;
    }



}

/** *******************************************
 ** MEDIA QUERY FOR  1340px
 ** *******************************************/
@media screen and (max-width: 1340px) {
    header {
        padding-right: 0px !important;
    }

    #other_langs {
        width: 85px !important;
    }

    #head_links_inner a {
        padding: 10px 8px;
        letter-spacing: -.3px;
    }
    .full-support-pad {
        min-width:100px;
        display: inline-block;
        margin: 0 15px;
    }



}



/** *******************************************
 ** MEDIA QUERY FOR  1200px ( LAPTOP MODE )
 ** *******************************************/
@media screen and (max-width: 1200px) {
    /*main screen card */
    #page--welcome .row .card h1 {
        font-size: 26px !important;
    }

    body .card.accent {
        margin: 20px;
        height: calc(100% - (20px * 2));
    }

    :root, body, section {
        --tn-text: 14px;
        --sm-text: 15px;
        --md-text: 16px;
        --lg-text: 34px;
    }

}

/** *******************************************
 ** MEDIA QUERY FOR  1180px ( LAPTOP MODE low )
 ** *******************************************/
@media screen and (max-width: 1180px) {
    body,
    :root {
        --_p: 80px !important;
    }

    #header_langs {
        position: absolute;
        right: 0;
        top: 20px;
    }

    #head_links_inner {
        display: block;
        position: absolute;
        left: var(--_p);
        margin-top: 80px;
    }

    header[block] {
        height: 150px !important;
    }

    #page--award--body #popup_container, #page--uti--body #popup_container {
        margin-top: 60px;
    }

}

/** *******************************************
 ** MEDIA QUERY FOR  840px ( TABLET )
 ** *******************************************/
@media screen and (max-width: 840px) {
    #page--award--body #popup_container, #page--uti--body #popup_container {
        margin-top: 0px;
    }

    footer[block], #empty-space {
        height: auto !important;
        min-height: 350px !important;
    }

    header > a {
        margin-left: calc(50% - 80px);
    }

    header[block] {
        padding: 20px !important;
        height: min-content !important;
    }

    header[block] #menu_button {
        color: white;
        display: block !important;
        padding: 28px 20px;
        position: fixed;
        height: 80px;
        left: -15px;
        top: 20px;

    }

    #head_links_inner {
        transition: all .2s;
        display: block;
        padding-left: 40px;
        padding-right: 40px;
        margin-top: 50px;
        max-height: 0;
        margin-left: -80px;
        overflow: hidden;
        background: var(--blue);
        position: absolute;
        width: 100%;
    }

    #head_links_inner a {
        display: inline-block;
        padding: 10px 12px;
        letter-spacing: 0px;
    }

    #head_links_inner.on {
        padding-bottom: 20px;
        padding-top: 20px;
        max-height: 250px;
    }

    #head_links_inner.on #head_links_expand_img {
        transform: rotate(180deg);
    }

    table.fullwidth {
        width: calc(100% + var(--_p));
        margin-left: calc(-1 * var(--_p) / 2);
    }

}

/** *******************************************
 ** MEDIA QUERY FOR  975px ( TABLED MODE ++ BOOTSTRAP BREAKPOINT )
 ** *******************************************/
@media screen and (max-width: 975px) {

    div.incard.offset .inner > span {
        padding: calc(25% + 20px) 25px 25px 25px;
    }

    footer[block], #empty-space {
        height: 350px !important;
    }


    .mobi-col-pad {
        padding-top: 30px;
    }

    .mobi-reverse-flex {
        flex-direction: column-reverse;
    }

    body .reset-pad-right {
        padding-right: calc(var(--bs-gutter-x) / 2) !important;
    }

    body section.reset-pad-right {
        padding: 0 calc(var(--_p)) !important;
    }

    #reflow_section {
        margin-top: 0px;
    }

    .mobi-row-flex-middle {
        align-items: center;
    }

    #museum_represent, #museum_now {
        width: 100%;
    }

    #uti_gallery #popup_container.show {
        left: 20px;
        right: 20px;
        transform: none;
    }

    .mobi-margin-middle {
        margin: 0 auto !important;
    }

    .col-0 {
        display: none;
    }

    .mobi-fullwidth {
        width: 100%
    }

    .container, .container-sm {
        max-width: inherit !important;
    }

    #reflow_section {
        margin-bottom: -40px;
    }
    tr.data-container td:first-child {

        /* display: inline-block; */
        width: 206%;
        margin-top: -12px;
        padding-bottom: 15px;
    }

}

/** *******************************************
 ** MEDIA QUERY FOR  1240px
 ** *******************************************/
@media screen and (max-width: 1240px) {
    /***********************************/
    section:not([cover]), .force-img, .mobi-no-bg {
        background-image: none !important;
    }

    #uti_extra_info {
        padding: 20px;
        background: #eee;
    }

    .img-mobi-view {
        display: block;
    }

    .img-mobi-view img {
        width: 100%;
    }

    section.inset .row {
        display: block;
    }

    section:not(.no-mobi) .row.rowless > *,
    section:not(.no-mobi) .row.container > * {
        margin: -120px auto 0;
    }

    .break-less {
        margin: -60px auto 0 !important;
    }

    section:not(.no-mobi) .rowless .col-5, .container .col-5 {
        width: 70%;
    }

    .container .col-6 {
        width: 85%;
    }

    .struct-img aside {
        background: #eee;
        padding: 40px;
        position: relative;
    }

    section[break-before], section[break]:not(.no-mobi) {
        margin-top: 00px;
    }

    .content {
        margin-top: -40px;
    }

    section:not(.no-mobi) .struct-img, #donate--hospital {
        padding: 0px;
    }

    #donate--hospital {
        background: white;
    }

    .mobi-flr {
        text-align: right;
    }

    .mobi-middle {
        text-align: center;
    }

    .mobi-pad {
        padding: 40px;
    }

    .smaller-img {
        margin-top: 40px;
    }

    .smaller-img .row {
        padding: 0;
        margin: 0;
    }

    .force-break-top {
        margin-top: 80px !important;
    }

    .mobi-pad-top {
        padding-top: 40px;
    }

    .mobi-fll {
        float: left;
    }

    .mobi-w100 {
        width: 100%;
    }

    .mobi-margin-top {
        margin-top: 80px !important;
    }

    #page--award--body #popup_container, #page--uti--body #popup_container {
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: auto;
        top: 80px;
    }

    #page--award--body #popup_container_inner {
        margin-right: -60px;
    }

    #welcome--water {
        margin-bottom: -100px !important;
    }

}

/** *******************************************
 ** MEDIA QUERY FOR  660px ( MOBILE )
 ** *******************************************/
@media screen and (max-width: 660px) {

    header[block] #menu_button {
        padding: 28px 10px;
    }

    img[logo] {
        zoom: .8;
    }

    header > a:not([raw]) {
        display: block;
        text-align: center;
        padding: 6px 8px;
        margin-left: 0px;
    }

    header[block] {
        padding: 14px 20px !important;
    }


    #head_links_inner.on {
        margin-top: 15px;
    }

    .mobi-reflow {
        margin: 0px !important;
        margin-right: -10px !important;
        padding-left: 20px !important;
        padding-right: 0px !important;
    }

    .mobi-fw {
        width: 100%;
    }

    .mobi-hide {
        display: none;
    }

    .mobi-reset {
        margin: 0px !important;
        margin-right: -10px !important;
        padding-left: 20px !important;
        padding-right: 0px !important;
        width: 100% !important;
    }

    footer[block] {
        font-size: var(--sm-text);
        height: auto !important;
    }

    .mobi-fwp {
        width: 100% !important;
        padding: 15px 0;
    }

    #footer_low {
        font-size: var(--md-text);
    }

    section[break-before], section[break] {
        margin-top: 40px !important;
    }

    body section.reset-pad-right {
        padding: 0 40px !important;
    }


    section[break-after], section[break], .break {
        margin-bottom: 40px !important;
    }

    #donate_percent {
        text-align: center;
        margin-bottom: 30px;
    }

    p {
        text-align: justify;
    }

    section[break-before].mobi-no-top {
        margin-top: -40px !important;
    }

    body #page--museum #title_content,
    body #page--uti--body #title_content,
    body .centered-title-content {
        padding: 40px !important;
        max-width: 800px !important;
    }

    body #page--museum #title_content {
        padding: 80px 10px 40px 10px !important;
    }

    .mobi-reset-offset {
        margin: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100% !important;
    }

    .col-1 {
        display: none;
    }

    section {
        padding-left: 40px;
        padding-right: 40px;
    }

    #ytframe {
        width: 100%;
    }

    body #museum_now {
        height: 100%;
    }

    #carouselNews, #carouselReviews, .card-carousel {
        overflow: hidden;
        height: auto;
        min-height: 150px;
    }

    body .footer-links {
        width: 100%;
    }

    body #nail_content {
        height: 520px;
    }

    body h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: break-spaces;
        overflow-wrap: anywhere;
    }

    #page--award--body #popup_container.fixed.show {
        padding: 40px 40px;
        overflow: scroll !important;
    }

    #page--award--body #popup_container .row > div {
        width: 100%;
        padding: 20px !important;
    }

    #page--award--body #popup_container_inner {
        margin-right: 0px !important;
        max-height: initial !important;
    }

    .mobi-scrollable {
        overflow: hidden;
        overflow-x: scroll;
    }

    #popup_container_inner .scrollable {
        text-align: justify;
    }

    .blue form label {
        width: 100% !important;
    }

    #sp img {
        margin-top: -50px;
    }

    #realdonateform {
        padding-bottom: 80px;
    }

    div.incard.offset img {
        width: 100%;
        margin-left: -20px;
    }

    div.incard.offset .inner > span {
        padding: calc(25% + 20px) 25px 25px 25px;
        margin-left: 10%;
        width: 100%;
    }

    .mobi-w90 {
        width: 90% !important;
    }

    .pretime {
        position: initial;
        margin-left: 0px;
        width: 100%;
        text-align: right;
        color: #666;
        padding: 10px 0;
    }

    #uti_gallery #popup_container.show {
        left: 0;
        right: 0;
        bottom: 0px !important;
    }

    #uti_gallery #popup_container > img {
        margin: 0px !important;
    }

    #uti_gallery #popup_a {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        animation: upflow .4s forwards;
    }

    @keyframes upflow {
        0% {
            bottom: -80px;
            opacity: 0;
        }
        100% {
            bottom: 0px;
            opacity: 1;
        }
    }
    #schoolname {
        white-space: break-spaces !important;
    }
    #carouselNewsContainer {
        width: 100%;
        margin-top:-30px;
    }

    :root, body h1 {
        --lg-text: 30px;
    }

    .multi-carousel .carousel-control-prev {
        left: 20px;
        width: calc(15% - 80px);
    }
    .multi-carousel .carousel-control-next {
        right: 20px;
        width: calc(15% - 80px);
    }
    .multi-carousel .carousel-inner .carousel-item.active, .multi-carousel .carousel-inner .carousel-item-next, .multi-carousel .carousel-inner .carousel-item-prev {

        justify-content: center;
    }
    #overflow_bg {
        display: none;
    }
    #museumContainer {
        width: auto !important;
    }
    .mobi-prepad {
        margin-top:30px !important;
    }
    .mobi-small-dpad {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }


}

/** *******************************************
 ** MEDIA QUERY FOR  FOOTER POSITIONING min975px
 ** *******************************************/
@media screen and (min-width: 660px) {
    .footer-fix footer {
        z-index: -1;
        position: fixed;
    }
}