@font-face {
    font-family: Helvathaica-X;
    src: url(../fonts/DB-Helvethaica-X.ttf);
}
@font-face {
    font-family: Helvathaica-X-Med;
    src: url(../fonts/DB-Helvethaica-X-Med.ttf);
}
@font-face {
    font-family: Helvathaica-X-BD;
    src: url(../fonts/DB-Helvethaica-X-Bd.ttf);
}

@font-face {
    font-family: Gontserrat;
    src: url(../fonts/Gontserrat-Regular.ttf);
}
@font-face {
    font-family: Gontserrat-Italic;
    src: url(../fonts/Gontserrat-Italic.ttf);
}
@font-face {
    font-family: Gontserrat-Bold;
    src: url(../fonts/DB-Helvethaica-X-Bd.ttf);
}

@font-face {
    font-family: BebasNeue-Regular;
    src: url(../fonts/BebasNeue-Regular.ttf);
}



/* Global CSS */

html,body{

    background: #000;
    padding: 0px; margin: 0px;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;

}
.container{
    padding: 0px;
    max-width: 1440px;
}

.hero{
    position: relative;
    overflow: hidden;
    height: 780px;
    width: 100%;
}
.hero--video{
    height: 125vh;
    width: 1440px;
    object-fit: cover;
    pointer-events: none;
    overflow: hidden;

}
.hero--text--cover{
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);

}
.hero--text{
    text-align: center;
    color: #fff;

}
.hero--text h1{
    font-size: 5rem;
    margin-bottom: 1rem;

}
.hero--text p{
    font-size: 1.5rem;
    margin-bottom: 2rem;

}


.top-nav-right{padding-top: 20px; padding-right: 40px; text-align: right;}
.lang-selection{font-family: Gontserrat; font-size: 13px;}
.lang-selection-separate{font-family: Gontserrat; font-size: 11px;}
.lang-selection--active{color:#FF1313 ;}


.header-button{justify-content:center; margin-top: 20px;}



.heroes-section{font-family:  Gontserrat; font-size: 38px;line-height:40px;color: #FFF;}
.heroes-section--bold{font-family: Gontserrat-Bold; font-size: 56px; line-height: 50px;color: #FFF;}
.season-section-title{font-family:  Gontserrat; font-size: 20px;line-height:20px;color: #FFF;}
.seasons-text-title{font-family: Helvathaica-X-Med; font-size: 24px;color: #FFF; line-height: 25px; margin-top: 12px;}
.seasons-text-subtitle{font-family: Helvathaica-X-Med; font-size: 17px; color: #C6C6C6; line-height: 17px;}
.seasons-text-location{font-family: Helvathaica-X-Med; font-size: 14px; color: #959595; line-height: 12px; margin-top: 14px;}
.seasons-learn-more-btn{border-radius: 4px; border: 1px solid #BF0000; background: none; color:#FFF;font-family:  Gontserrat; font-size: 10px; line-height: 12px; width: 80px; height: 22px; margin-top: 20px; }
.season-badge{position: absolute; right: 0px; margin: 8px; width: 12%;}
.res-hilight-section{font-family:  Gontserrat; font-size: 38px;line-height:40px;color: #000;}
.highlight-badge{position: absolute; left: 0px; margin: 12px;font-family:  Gontserrat; font-size: 10px; color: #FFF;background-color: rgba(0, 0, 0, 0.5); width: 85px; text-align: center; height: 20px; padding: 3px; border-radius: 14px;}
.highlight-season-badge{position: absolute; right: 0px; margin: 12px; width: 7%;}
.highlight-text-title{font-family: Helvathaica-X-Med; font-size: 20px;color: #FFF; line-height: 20px; margin-top: 12px; padding-left: 30px; padding-right: 30px;}
.highlight-text-subtitle{font-family: Helvathaica-X-Med; font-size: 17px; color: #C6C6C6; line-height: 17px; padding-left: 30px; padding-right: 30px; margin-top: 14px;}
.highlight-text-location{font-family: Helvathaica-X-Med; font-size: 16px; color: #959595; line-height: 12px; margin-top: 20px; padding-left: 30px; padding-right: 30px;}



.hilight-card{background-color: #000; border:none}

.footer-gallery{background-image: url('../images/footer_gallery.jpg'); height: 350px; background-size: cover; background-position: center center;}

#main-logo{margin-left: 30px;margin-top: 0px;}
#search-btn{margin-left: 15px; margin-right: 15px;}
#login-btn{margin-right: 0px;font-family: Gontserrat; font-size: 13px; background-color: #BF0000; color: #FFF; border: none; border-radius: 12px; width: 80px; height: 24px;}





.footer-text{font-family:  Helvathaica-X; font-size: 18px; line-height: 16px; padding-left: 20px; padding-right: 20px; margin-top: 40px; color: #656363;}
.footer-sitemap{padding: 20px; margin-top: 10px;}
.sitemap-title{font-family:  Gontserrat; font-size: 14px; line-height: 14px;  color: #FFF;}
.sitemap-subtitle{font-family:  Gontserrat; font-size: 14px; line-height: 14px;  color: #A7A7A7; margin-top: 20px;}
.sitemap-footer-font{font-family:  Gontserrat; font-size: 14px; line-height: 14px;  color: #A7A7A7;}




.lang-selection-white{font-family: Gontserrat; font-size: 13px;color: #FFF;}
.lang-selection-separate-white{font-family: Gontserrat; font-size: 11px;color: #FFF;}
.detail-title{font-family: BebasNeue-Regular; font-size: 40px;color: #FFF; text-align: center;}
.detail-subtitle{font-family: Gontserrat; font-size: 20px;color: #FFF; text-align: center; line-height: 20px;}
.detail-fulltext{font-family: Gontserrat; font-size: 13px;color: #A6A6A6; text-align: center; margin-top: 15px;}
.spc-title{font-family: BebasNeue-Regular; font-size: 28px;color: #FFF; text-align: center;}
.spc-subtitle{font-family: Gontserrat; font-size:14px;color: #FFF; text-align: center; line-height: 14px;}
.detail-food-title{font-family: Helvathaica-X-Med; font-size: 24px;color: #FFF; line-height: 25px; margin-top: 12px;}
.detail-food-subtitle{font-family: Helvathaica-X-Med; font-size: 15px; color: #C6C6C6; line-height: 17px;}


/* Medium and Large Screen CSS */
@media (min-width: 751px) {


    .header-title--th{font-family:  Helvathaica-X-Med; font-size: 90px;line-height:90px;}
    .header-title--en{font-family: Gontserrat-Bold; font-size: 90px; line-height: 90px;}
    .header-subtitle--th{font-family:  Helvathaica-X; font-size: 60px;line-height: 5px;}
    .header-subtitle--en{font-family: Gontserrat; font-size: 40px;line-height: 40px;}

    .series-section-title{font-family:  Gontserrat; font-size: 38px;line-height:30px;color: #FFF;}
    .series-section-subtitle{font-family: Helvathaica-X; font-size: 22px; line-height: 1px; color: #C6C6C6;}
    .seriespd{margin: 0px;}


    .res-text-title{font-family: Helvathaica-X-Med; font-size: 20px;color: #FFF; line-height: 20px; margin-top: 12px; padding-left: 30px; padding-right: 30px;}
    .res-text-subtitle{font-family: Helvathaica-X-Med; font-size: 17px; color: #C6C6C6; line-height: 17px; padding-left: 30px; padding-right: 30px; margin-top: 14px;}
    .res-text-location{font-family: Helvathaica-X-Med; font-size: 16px; color: #959595; line-height: 12px; margin-top: 20px; padding-left: 30px; padding-right: 30px;}
    .top-nav-left{text-align: left;}

    #vote-btn{margin-right: 0px;font-family: Helvathaica-X-Med; font-size: 25px; background-color: #BF0000; color: #FFF; border: none; border-radius: 20px;line-height: 18px; height: 45px; width: 230px;}
    #learn-more-btn{margin-right: 0px;font-family: Helvathaica-X-Med; font-size: 25px; background:none; color: #FFF; border: 2px solid #FFF; border-radius: 20px;line-height: 18px; height: 45px; width: 230px;}

    .cpt{text-align: left;}
    .pl20{padding-left: 20px;}
    .pl30{padding-left: 30px;}
    .pl40{padding-left: 40px;}
    .pr20{padding-right: 20px;}
    .pr30{padding-right: 30px;}
    .pr40{padding-right: 40px;}
    .h10{height: 10px;}
    .h20{height: 20px;}
    .h40{height: 40px;}
    .h60{height: 60px;}
    .h80{height: 80px;}
    .h100{height: 100px;}

    #series-artwork{padding-left: 120px;}
    .plrd{padding-left: 20px; padding-right: 20px;}

    .detail-channel{font-family: Gontserrat; font-size: 10px;color: #FFF; padding-top: 7px; text-align: right;}
    .detail-channel-logo{ text-align: left; padding-left: 20px;}

    .instructor-bg{width: 100%; height: auto;}
    .ins-detail-text{font-family: Gontserrat; font-size: 13px;color: #FFF;}
    .ins-detail-title{font-family: BebasNeue-Regular; font-size: 30px;color: #FFF; text-align: left; line-height: 30px;}
    .ins-detail-full{font-family: Gontserrat; font-size: 11px;color: #FFF; margin-top: 20px;}
    .ins-box{background-color:#D04235 ; border-radius: 8px; width:360px; padding: 40px; margin-right: 40px; margin-left: auto; }


}
/* Small Screen CSS */
@media (max-width: 750px) {


    video{transform: translateX(calc((100% - 2420px) / 2));}
    .header-title--th{font-family:  Helvathaica-X-Med; font-size: 30px;line-height:30px;}
    .header-title--en{font-family: Gontserrat-Bold; font-size: 30px; line-height: 30px;}
    .header-subtitle--th{font-family:  Helvathaica-X; font-size: 20px;line-height: 20px;}
    .header-subtitle--en{font-family: Gontserrat; font-size: 20px;line-height: 20px;}

    .series-section-title{font-family:  Gontserrat; font-size: 28px;line-height:30px;color: #FFF;}
    .series-section-subtitle{font-family: Helvathaica-X; font-size: 18px; line-height: 15px; color: #C6C6C6;}
    .seriespd{margin: 10px;}

    .top-nav-left{text-align: center;}



    .res-text-title{font-family: Helvathaica-X-Med; font-size: 20px;color: #FFF; line-height: 20px; margin-top: 12px; padding-left: 10px; padding-right: 10px;}
    .res-text-subtitle{font-family: Helvathaica-X-Med; font-size: 17px; color: #C6C6C6; line-height: 17px; padding-left: 10px; padding-right: 10px; margin-top: 14px;}
    .res-text-location{font-family: Helvathaica-X-Med; font-size: 16px; color: #959595; line-height: 12px; margin-top: 20px; padding-left: 10px; padding-right: 10px;}

    #vote-btn{margin-right: 0px;font-family: Helvathaica-X-Med; font-size: 14px; background-color: #BF0000; color: #FFF; border: none; border-radius: 20px;line-height: 12px; height: 35px; width: 120px;}
    #learn-more-btn{margin-right: 0px;font-family: Helvathaica-X-Med; font-size: 14px; background:none; color: #FFF; border: 2px solid #FFF; border-radius: 20px;line-height: 18px; height: 35px; width: 120px;}


    .cpt{text-align: center;}
    .pl20{padding-left: 0px;}
    .pl30{padding-left: 10px;}
    .pl40{padding-left: 20px;}
    .pr20{padding-right: 0px;}
    .pr30{padding-right: 10px;}
    .pr40{padding-right: 20px;}
    .h10{height: 10px;}
    .h20{height: 18px;}
    .h40{height: 32px;}
    .h60{height: 50px;}
    .h80{height: 68px;}
    .h100{height: 50px;}
    

    #series-artwork{padding-left: 0px; margin-top: 40px; margin-bottom: 0px;}
    .plrd{padding-left: 20px; padding-right: 20px;}

    .detail-channel{font-family: Gontserrat; font-size: 10px;color: #FFF; padding-top: 7px; text-align: center;}
    .detail-channel-logo{ text-align: center;  margin-top: 10px;}

    .instructor-bg{width: 100%; height: auto;}
    .ins-detail-text{font-family: Gontserrat; font-size: 13px;color: #FFF;}
    .ins-detail-title{font-family: BebasNeue-Regular; font-size: 30px;color: #FFF; text-align: left; line-height: 30px;}
    .ins-detail-full{font-family: Gontserrat; font-size: 11px;color: #FFF; margin-top: 20px;}
    .ins-box{background-color:#D04235 ; border-radius: 8px; width:90%; padding: 40px; margin-right: auto; margin-left: auto; }


}

/* Util CSS */