:root {
    --nav-logo-height: 50px;
    --nav-onscroll-logo-height: 30px;
    --nav-logo-ratio: 8/5;
    --nav-font-size: 1rem;
    --nav-link-color: #ffffff;
    --nav-link-hover-color: #fff300;
    --mobile-nav-bg-color:rgba(158, 76, 0, 1);
    --primary-color: #F8CF37;
    --primary-dark-color: #9e4c00;
    --primary-light-color: #F8CF37;
    --primary-text-color: #ffffff;
    --primary-link-color: #ffffff;
    --primary-link-hover-color: #222222;
    --header-font: "Noto Sans TC", sans-serif;
    --body-font: "Noto Sans TC", sans-serif;
    --channel-list-img-height: 80px;
    --contact-label-color: #F8CF37;
    /*rgba(228,114,43,0.9)*/
    --form-border-color: #ffffff;
    --btn-outline-color: #ffffff;
    --btn-outline-border-color: #ffffff;
    --btn-outline-hover-color: #ffffff;
    --btn-outline-hover-bg-color: rgba(255, 255, 255, 0.4);
    --text-opacity:.8;

    --form-btn-bg-color: #ffffff;
    --form-btn-hover-bg-color: rgba(255, 255, 255, 0.8);
    --form-btn-text-color: #F8CF37;
    --viewmore-link-hover-color:#222222;

    --backtotop-rgb:255,255,255;
    --backtotop-hover-rgb:248, 207, 55;

    --header-gradient-solid-color: rgba(572, 73, 105,1);
    --header-gradient-color: linear-gradient(90deg, rgba(72, 73, 105, 1) 0%, rgba(26, 26, 26, 1) 100%);

    --schedule-nav-gradient-solid-color: rgba(158, 76, 0, 1);
    --schedule-nav-gradient-color: linear-gradient(90deg, rgba(248, 207, 55, 1) 0%, rgba(158, 76, 0, 1) 100%);
    --schedule-nav-link-color: #ffffff;
    --schedule-nav-link-hover-color: #F8CF37;
    --schedule-nav-link-hover-bg-color: #ffffff;
    --schedule-border-color: #ffffff;

    --header-bg-color: rgba(0, 0, 0, 0.8);
    --scrollbar-bg-color: rgb(179, 179, 179,1);
    
    --featuremodal-body-bg-color: rgba(0, 0, 0, 1);
    --featuremodal-body-text-color: #ffffff;
    --feature-movie-thumb-active-border-color:#9e4c00;
    --feature-movie-thumb-active-shadow-color:rgba(158, 76, 0, .7);
    --feature-movie-thumb-hover-border-color:#F8CF37;
    --feature-movie-thumb-hover-shadow-color:rgba(248, 207, 55, .7);

    --tonight-show-bg-color: #ffae28;
    --tonight-show-highlight-text-color: #474867;
    --tonight-show-text-color: #ffffff;
    --tonight-show-text-hover-color: #ffffff;

    --ccm-ratio: 7/2;
    --cm-ratio: 7/2;
    --cm-pinoy-ratio: 9/4;
    --cmgo-ratio: 37/9;
    --cmplus-ratio: 7/3;
    --cte-ratio: 2/1;
    --kix-ratio: 8/5;
    --mm-ratio: 7/3;
    --popc-ratio: 12/5;
    --thrill-ratio: 2/1;
}
::-webkit-scrollbar {
  width: .65rem;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  border-radius: .5rem;
  background: var(--scrollbar-bg-color);
}
/*
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1680px;
    }
}
*/

html,
body {
    font-size: 14px;
    background: url() repeat center center;
    font-family: var(--body-font);
    overflow-x: hidden;
}

a,
a:hover {
    cursor: pointer !important;
}
#backtotop {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 8%;
    right: 1.8rem;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    color: rgba(var(--backtotop-rgb),1);
    border:2px solid rgba(var(--backtotop-rgb),1);
    background-color: rgba(var(--backtotop-rgb),0.4);
    z-index: 999;
}
#backtotop svg {
    width: 80%;
    height: auto;
    fill: rgba(var(--backtotop-rgb),1);
}
#backtotop:hover {
    color: rgba(var(--backtotop-hover-rgb),1);
    border:2px solid rgba(var(--backtotop-hover-rgb),1);
    background-color: rgba(var(--backtotop-hover-rgb),0.4);
}
#backtotop:hover svg {
    fill: rgba(var(--backtotop-hover-rgb),1);
}

.opacity-text {
    opacity: var(--text-opacity) !important;
}
.viewmore-link {
    color: var(--primary-link-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .15rem;
}
.viewmore-link:hover {
    color:var(--viewmore-link-hover-color) !important;
}
.viewmore-link::after {
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-left: 0.6rem;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff' transform='rotate(180)'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M5 12H19M5 12L11 6M5 12L11 18' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.viewmore-link:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23222222' transform='rotate(180)'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M5 12H19M5 12L11 6M5 12L11 18' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

#bg-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}

#bg-wrap #left-spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 54%;
    animation: bounce 20s infinite;
    -webkit-animation: bounce 20s infinite;
    -moz-animation: bounce 20s infinite;
    -o-animation: bounce 20s infinite;
    animation-timing-function: linear;
}

#bg-wrap #right-spot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 54%;
    animation: bounce-up 20s infinite;
    -webkit-animation: bounce-up 20s infinite;
    -moz-animation: bounce-up 20s infinite;
    -o-animation: bounce-up 20s infinite;
    animation-timing-function: linear;
}

#page-scroll-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.page-title {
    font-family: var(--header-font);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-text-color);
}

.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.2rem;
    text-transform: uppercase;
    border-color: var(--btn-outline-border-color);
    color: var(--btn-outline-color);
    padding: 0 2.4rem;
    font-weight: 700;
    height: 48px;
}

.btn-outline-white:hover {
    color: var(--btn-outline-hover-color);
    background: var(--btn-outline-hover-bg-color);
    border-color: var(--btn-outline-border-color);
}

.datepicker-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-color: var(--btn-outline-border-color);
    border-radius: 0.2rem;
    height: 48px;
    width: 180px;
    /*padding: 0 2.4rem;*/
    background: transparent;
    position: relative;
}

.datepicker-label:hover {
    color: var(--btn-outline-hover-color);
    background: var(--btn-outline-hover-bg-color);
    border-color: var(--btn-outline-border-color);
}

.datepicker-label svg {
    position: absolute;
    top:50%;
    right:2rem;
    transform: translateY(-50%);
    height: 16px;
    width: auto;
    z-index: -1;
}

#datepicker {
    position: absolute;
    padding: 0 2.4rem;
    top:0; left:0;
    border: 0;
    color: var(--btn-outline-color);
    background: transparent;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-weight: 700;
    height: 48px;
    width: 100%;
    outline: 0 none !important;
    box-shadow: none !important;
}

#datepicker::placeholder {
    color: var(--btn-outline-color);
}

@-webkit-keyframes bounce {

    0%,
    100% {
        -webkit-transform: translate(0, 0);
    }

    25%,
    75% {
        -webkit-transform: translate(6%, 60%);
    }

    50% {
        -webkit-transform: translate(0, 120%);
    }
}

@-moz-keyframes bounce {

    0%,
    100% {
        -moz-transform: translate(0, 0);
    }

    25%,
    75% {
        -moz-transform: translate(6%, 60%);
    }

    50% {
        -moz-transform: translate(0, 120%);
    }
}

@-o-keyframes bounce {

    0%,
    100% {
        -o-transform: translate(0, 0);
    }

    25%,
    75% {
        -moz-transform: translate(6%, 60%);
    }

    50% {
        -o-transform: translate(0, 120%);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25%,
    75% {
        transform: translate(6%, 60%);
    }

    50% {
        transform: translate(0, 120%);
    }
}


@-webkit-keyframes bounce-up {

    0%,
    100% {
        -webkit-transform: translate(0, 0);
    }

    25%,
    75% {
        -webkit-transform: translate(-6%, -60%);
    }

    50% {
        -webkit-transform: translate(0, -120%);
    }
}

@-moz-keyframes bounce-up {

    0%,
    100% {
        -moz-transform: translate(0, 0);
    }

    25%,
    75% {
        -moz-transform: translate(-6%, -60%);
    }

    50% {
        -moz-transform: translate(0, -120%);
    }
}

@-o-keyframes bounce-up {

    0%,
    100% {
        -o-transform: translate(0, 0);
    }

    25%,
    75% {
        -moz-transform: translate(-6%, -60%);
    }

    50% {
        -o-transform: translate(0, -120%);
    }
}

@keyframes bounce-up {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25%,
    75% {
        transform: translate(-6%, -60%);
    }

    50% {
        transform: translate(0, -120%);
    }
}

.team-icon-path,
.media-center-path,
.contact-us-path {
    fill: #fff;
    stroke-width: 0px;
}


.nav-logo {
    width: 100%;
    height: var(--nav-logo-height);
    aspect-ratio: var(--nav-logo-ratio);
    object-fit: contain;
    object-position: center left;
}
#location-bar,
#current-location,
#social-bar {
    margin-left: 2rem;
}
#top-nav ul,
#location-bar ul,
#current-location ul,
#social-bar ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.4rem;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    color: var(--nav-link-color);
    font-weight: 700;
    line-height: 1;
}

#top-nav ul a,
#location-bar ul a,
#current-location ul a,
#social-bar ul a {
    color: var(--nav-link-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: 0;
    text-transform: uppercase;
    line-height: 1;
    font-family: var(--header-font);
    font-size: var(--nav-font-size);
}

#top-nav ul a:hover,
#location-bar ul a:hover,
#current-location ul a:hover,
#social-bar ul a:hover,
#top-nav ul li.active a,
#location-bar ul li.active a,
#current-location ul li.active a,
#social-bar ul li.active a {
    color: var(--nav-link-hover-color);
}

#top-nav svg,
#current-location svg,
#social-bar svg,
#mobile-menu svg {
    width: auto;
    height: var(--nav-font-size);
    margin-right: 0.4rem;
    line-height: 1;
}
#top-nav svg .fill-color,
#current-location svg .fill-color,
#social-bar svg .fill-color,
#mobile-menu svg .fill-color {
    fill: var(--nav-link-color);
}

#top-nav svg .stroke-color,
#current-location svg .stroke-color,
#social-bar svg .stroke-color,
#mobile-menu svg .stroke-color {
    stroke: var(--nav-link-color);
}

#social-bar svg,
#mobile-menu svg {
    height: calc(var(--nav-font-size) * 1.5);
}

#top-nav ul li:hover svg .fill-color,
#location-bar ul li:hover svg .fill-color,
#current-location ul li:hover svg .fill-color,
#social-bar ul li:hover svg .fill-color,
#top-nav ul li.active svg .fill-color,
#location-bar ul li.active svg .fill-color,
#current-location ul li.active svg .fill-color,
#social-bar ul li.active svg .fill-color {
    fill: var(--nav-link-hover-color);
}

#top-nav ul li:hover svg .stroke-color,
#location-bar ul li:hover svg .stroke-color,
#current-location ul li:hover svg .stroke-color,
#social-bar ul li:hover svg .stroke-color,
#top-nav ul li.active svg .stroke-color,
#location-bar ul li.active svg .stroke-color,
#current-location ul li.active svg .stroke-color,
#social-bar ul li.active svg .stroke-color {
    stroke: var(--nav-link-hover-color);
}


#location-bar {
    display: none;
}

#off-location,
#location-bar ul li,
#current-location ul li,
#social-bar ul li {
    cursor: pointer !important;
    text-transform: uppercase;
    color: var(--nav-link-color);
    font-family: var(--header-font);
    font-size: var(--nav-font-size);
    line-height: 1;
    display: flex;
    align-items: center;
}

#location-bar ul li:hover,
#current-location ul li:hover,
#social-bar ul li:hover {
    color: var(--nav-link-hover-color);
}
#mobile-menu ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    color: var(--primary-text-color);
    flex-direction: column;
}

#featureModal .btn-close {
    position: absolute;
    right: 2rem;
    top: 2rem;
    background-color: #fff;
    display: block;
    text-align: center;
    z-index: 99;
    border-radius: 100%;
    width: 2rem;
    height: 2rem;
}


/** Responsive on mobile menu **/
#nav-offcanvas {
    background:var(--mobile-nav-bg-color);
}
#mobile-navigation-wrapper {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
}
#mobile-navigation-wrapper #location-bar,
#mobile-navigation-wrapper #current-location,
#mobile-navigation-wrapper #social-bar {
    margin-left: 0rem;
}
#mobile-navigation-wrapper #top-nav ul {
    flex-direction: column;
}
@media(min-width:1200px) {
    #mobile-menu {
        display: none;
    }
}

#featureModal .modal-content {
    border-radius: 2rem 2rem 0rem 0rem;
}

#featureModal .modal-body {
    padding: 0;
    border-radius: 2rem 2rem 0rem 0rem;
    background: var(--featuremodal-body-bg-color);
}

#featureModal .modal-body .poster {
    position: relative;
    border-radius: 2rem 2rem 0rem 0rem;
    overflow: hidden;
}

#featureModal .modal-body .poster::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 27%, rgba(41, 41, 41, 0) 91%);
}

#featureModal .modal-body .feature-info {
    position: relative;
    margin-top: -8%;
    padding: 1.5rem;
    color: var(--featuremodal-body-text-color);
}

main#main-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
}

.channel-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    list-style: none;
    width: 100%;
}

.channel-list a {
    border: 0;
    display: block;
    margin: 0 .5rem;
}

.channel-list a img {
    height: 40px; 
    width: auto;
}
.channel-list a img.cte {
    height: 60px;
}

@media(min-width:420px) {
    .channel-list a {
        margin: 0 .8rem;
    }
    .channel-list a img {
        height: 54px;
        width: auto;
    }
    .channel-list a img.cte {
        height: 70px;
    }
}

@media(min-width:576px) {
    .channel-list a {
        margin: 0 1rem;
    }
    .channel-list a img {
        height: 70px;
        width: auto;
    }
    .channel-list a img.cte {
        height: 80px;
    }
}
@media(min-width:768px) {
    .channel-list {
        justify-content: space-evenly;
    }
    .channel-list a {
        margin: 0 1rem;
    }
    .channel-list a img {
        height: var(--channel-list-img-height);
        width: auto;
    }
}


.copyright-text {
    font-size: .8rem;
    color: var(--primary-text-color);
}

.footer-link {
    margin: 0;
    padding: 0;
    font-size: .8rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.footer-link a {
    margin: 0;
    padding: 0;
    font-size: .8rem;
    color: var(--primary-link-color);
    text-decoration: none;
}

.footer-link li::after {
    content: "|";
    display: inline-block;
    margin: 0 1rem;
    color: var(--primary-link-color);
}

.footer-link li:last-child::after {
    display: none;
}

header {
    padding: 1.5rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: var(--header-gradient-solid-color);
    background: var(--header-gradient-color);
    /*background-color: var(--header-bg-color);*/
    transition: all .5s ease-in-out;
}

header.show {
    transform: translateY(0);
}

header.hide {
    transform: translateY(-100%);
}

header.show .nav-logo,
header.hide .nav-logo {
    height: var(--nav-onscroll-logo-height);
}

footer {
    position: relative;
    width: 100%;
    z-index: 1;
    padding-top: 5rem;
    /*background: rgba(0, 0, 0, 1);*/
}

#media-centre {
    padding-bottom: 5rem;
}

.page-section {
    position: relative;
    padding-top: 5rem;
}

/** contact form style **/
#contact-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: rgba(255, 255, 255, 0.15);
}
.form-divider {
    border-right: 1px solid var(--form-border-color);
}

.contact-label {
    color: var(--contact-label-color);
    margin-bottom: 0;
}

.contact-label svg {
    height: 24px;
    width: auto;
    margin-right: 0.5rem;
}

.inp {
    position: relative;
    margin: auto;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
}

.inp .label {
    position: absolute;
    top: 20px;
    left: 12px;
    font-size: 16px;
    color: var(--primary-text-color);
    font-weight: 500;
    transform-origin: 0 0;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
    pointer-events: none;
}

.inp .focus-bg {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    color: #ff1a15;
}

.inp input,
.inp textarea,
.inp select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 18px 12px 0 12px;
    height: 60px;
    font-size: 16px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0);
    color: var(--primary-text-color);
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--form-border-color);
}

.inp textarea {
    padding: 28px 12px 0 12px;
}

.inp input:hover,
.inp textarea:hover,
.inp select:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.inp input:not(:-moz-placeholder-shown)+.label,
.inp textarea:not(:-moz-placeholder-shown)+.label,
.inp select:not(:-moz-placeholder-shown)+.label {
    color: rgba(255, 255, 255, 0.5);
    transform: translate3d(0, -12px, 0) scale(0.75);
}

.inp input:not(:-ms-input-placeholder)+.label,
.inp textarea:not(:-ms-input-placeholder)+.label,
.inp select:not(:-ms-input-placeholder)+.label {
    color: rgba(255, 255, 255, 0.5);
    transform: translate3d(0, -12px, 0) scale(0.75);
}

.inp input:not(:placeholder-shown)+.label,
.inp textarea:not(:placeholder-shown)+.label,
.inp select:not(:placeholder-shown)+.label {
    color: rgba(255, 255, 255, 0.5);
    transform: translate3d(0, -12px, 0) scale(0.75);
}

.inp input:focus,
.inp textarea:focus,
.inp select:focus {
    background: rgba(255, 255, 255, 0.05);
    outline: none;
    box-shadow: inset 0 -2px 0 var(--form-border-color);
}

.inp input:focus+.label,
.inp textarea:focus+.label,
.inp select:focus+.label {
    color: var(--primary-text-color);
    transform: translate3d(0, -12px, 0) scale(0.75);
}

.inp input:focus+.label+.focus-bg,
.inp textarea:focus+.label+.focus-bg,
.inp select:focus+.label+.focus-bg {
    transform: scaleX(1);
    transition: all 0.1s ease;
}
.inp select option {
    background-color: #ffffff;
    color: #000000;
}

.checkbox-wrapper {
    --size: 20px;
    --border-size: 2px;
    color: var(--primary-text-color);
    position: relative;
}

.checkbox-wrapper *,
.checkbox-wrapper *::after,
.checkbox-wrapper *::before {
    box-sizing: border-box;
}

.checkbox-wrapper input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
}

.checkbox-wrapper input[type="checkbox"],
.checkbox-wrapper label::before {
    width: var(--size);
    height: var(--size);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.checkbox-wrapper label {
    display: inline-block;
    position: relative;
    padding: 0 0 0 calc(var(--size) + 7px);
}
.checkbox-wrapper label a {
    color:var(--primary-link-color);    
}

.checkbox-wrapper label::before {
    content: '';
    border: var(--border-size) solid var(--primary-text-color);
    opacity: 0.7;
    transition: opacity 0.3s;
}

.checkbox-wrapper input[type="checkbox"]:checked+label::before {
    opacity: 1;
}

.checkbox-wrapper svg {
    position: absolute;
    top: calc(50% + var(--border-size));
    left: var(--border-size);
    width: calc(var(--size) - (var(--border-size) * 2));
    height: calc(var(--size) - (var(--border-size) * 2));
    margin-top: calc(var(--size) / -2);
    pointer-events: none;
}

.checkbox-wrapper svg path {
    stroke-width: 0;
    fill: none;
    transition: stroke-dashoffset 0.2s ease-in 0s;
}

.checkbox-wrapper svg path+path {
    transition: stroke-dashoffset 0.2s ease-out 0.2s;
}

.checkbox-wrapper input[type="checkbox"]:checked~svg path {
    stroke-dashoffset: 0;
    stroke-width: calc(var(--size) / 2);
}

#form-submit.btn {
    background: var(--form-btn-bg-color);
    padding: 0.8rem 2.4rem;
    color: var(--form-btn-text-color);
    font-size: 0.8rem;
}

#form-submit.btn:hover {
    background: var(--form-btn-hover-bg-color);
}

#privacyModal .modal-content,
#tncModal .modal-content {
    background:url(../img/corporate_bg.webp) repeat top center / 100% auto;
}
#msgModal .modal-content {
  background: rgba(255, 255, 255, 0.95);
}

@media (min-width:768px) {
    .page-title {
        font-size: 3rem;
    }
}

@media (min-width:992px) {
    .page-title {
        font-size: 4rem;
    }
}

/** Channel Logo Ratio **/
.cm-ratio {
    aspect-ratio: var(--cm-ratio);
}

.ccm-ratio {
    aspect-ratio: var(--ccm-ratio);
}

.cm-pinoy-ratio {
    aspect-ratio: var(--cm-pinoy-ratio);
}

.cmgo-ratio {
    aspect-ratio: var(--cmgo-ratio);
}

.cmplus-ratio {
    aspect-ratio: var(--cmplus-ratio);
}

.cte-ratio {
    aspect-ratio: var(--cte-ratio);
}

.kix-ratio {
    aspect-ratio: var(--kix-ratio);
}

.mm-ratio {
    aspect-ratio: var(--mm-ratio);
}

.popc-ratio {
    aspect-ratio: var(--popc-ratio);
}

.thrill-ratio {
    aspect-ratio: var(--thrill-ratio);
}