/* Font */
@font-face {
    font-family: DBHelvethaicaXMedExt;
    src: url(./fonts/DBHelvethaicaXMedExt.ttf);
}
body {
    font-family: DBHelvethaicaXMedExt;
    color: #fff;
    font-size: 18px;
    background-color: #272727;
    line-height: 1!important;
}
p {
    font-family: DBHelvethaicaXMedExt;
}
/* Nav */
@media (min-width: 376px) {
    .bg-mobile {
        background-color: black;
    }
    .linkmobile {

    }
}
@media (min-width: 576px) {
    .nav-dark {
        /* background-color: rgba(0, 0, 0, 0.1); */
    }
    .bg-mobile {
        background-color: black;
    }
}
@media (min-width: 768px) {
    .nav-dark {
        /* background-color: rgba(0, 0, 0, 0.1); */
    }
    .bg-mobile {
        background-color: black;
    }
}
@media (min-width: 1390px) {
    .nav-dark {
        background-color: rgba(0, 0, 0, 0.1);
    }
}
.nav-transparent {
    background-color: rgba(0, 0, 0, 0.3);
}
#nav-ul {
    /* height: 33px; */
}
.navbar-toggler {
    border-color: rgba(255, 255, 255, 1)!important;
}
.navbar {
    padding-top: 5px;
    /* padding-right: 30px;
    padding-left: 30px; */
    padding-bottom: 5px;
}
.navbar .container {
    /* padding-left: 0;
    padding-right: 0; */
}
.navbar-brand {
    /* margin-left: 30px; */
}
.nav-home {
    width: 120px!important;
}
.nav-about {
    width: 120px!important;
}
.nav-academy {
    width: 280px!important;
}
.nav-channels {
    width: 150px!important;
}
.nav-store {
    width: 215px!important;
}
.nav-contact {
    width: 140px!important;
}
.nav-trial {
    width: 150px!important;
    padding-top: 10px;
}

.nav-link {
    color: #fff;
    font-size: 22.5px;
    opacity: 1;
}
.navbar-toggler {
    color: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
    z-index: 5;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.nav-link:hover {
    color: #fff;
}
.trial {
    background-color: #fff;
    border-radius: 15px;
    color: #000;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 11px;
    text-decoration: none;
}
.trial:hover {
    background-color: #284498;
    color: #fff;
}
.session-block {
    min-height: 600px;   
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 49px;
}
#session-home {
    background-image: url('../../images/background/bg-home.png');
} 
/* about */
#session-about {
    background-color: #272727;
    padding-bottom: 20px;
}
.about-title-block {
    height: 75px;
}
.title-img-about {
    margin-top: 46px;
    font-size: 42px;
}
.detail-img-about {
    font-size: 32px;
}
.title-about {
    font-size: 30px;
}
.detail-about-block {
    min-height: 443px;
    font-size: 24px;
}
/* end about */
/* program */  
.row-program {
    margin-top: 41px;
    padding-left: 10px;
    padding-right: 10px;
}
.program-bg {
    background-position: center;
    background-size: cover;
    padding-top: 41px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 43px;
}
.program-block {
    padding: 2px;
    border-radius: 20px;
}
.card-header-block {
    border: 2px solid #6d6e70;
    border-radius: 20px;
    min-height: 152px;
    padding: 10px;
}
.card-body {
    padding-bottom: 25px;
}
.program-btn {
    background-color: #fff;
    border-radius: 10px;
    color: #000;
    bottom: 12px!important;
    padding: 17px 15px 10px 15px;
    text-decoration: none;
}
.program-btn:hover { 
    background-color: #284498;
    color: #fff;
}
.title-program {
    font-size: 23px;
}
.price {
    margin-top: 64px;
    font-size: 36px;
    font-weight: bold;
    padding-bottom: 140px;
}
/* end program */
/* academy */
#session-academy {
    background-color: #272727;
}
.academy-image-block{
    margin-top: 43px;
}
.academy-image {
    max-width:306px;
    max-height:396px;
}
/* end academy */
/* channels */
#session-channels {
    background-image: url('../../images/background/bg-channels.png');
    min-height: 380px!important;
}
/* end channels */
#session-store {
    background-image: url('../../images/background/bg-store.png');
}
#session-contact {
    background-image: url('../../images/background/bg-contact.png');
}
.session-header {
    margin-bottom: 0;
    line-height: 28px;
}
h1 {
    font-size: 45px;
}
h3 {
    font-size: 30px;
}
.white-line {
    height: 2px;
    background-color: #fff!important;
    border: none;
    margin-top: -7px;
}
.gray-line {
    height: 1px;
    background-color: #555!important;
    border: none;
}
.gray-box {
    background-color: #525151;
    border-radius: 15px;
    padding: 30px 30px 30px 30px;
}
.black-box {
    background-color: #000;
}
.about-block {
    min-height: 430px;
}
/* academy */
.row-program {
    padding-left: 10px;
    padding-right: 10px;
}
.academy-block {
    min-height: 500px;
    padding: 5px;
    border-radius: 0;
    background: none;
}
.academy-detail h1 {
    font-size: 41px;
}
.academy-detail h3 {
    font-size: 29px;
}
.profile-list {
    padding-left: 14px;
    font-family: sans-serif;
}
.profile-list li p {
    margin-bottom: 0;
}
.no-dot {
    list-style-type: none;
}
.no-dot p {
    font-size: 20px;
}
/* channel */
.row-channel {
    height: 450px;
}
/* store */
.learn-more {
    background-color: #fff;
    color: #000;
    padding: 13px 15px 8px 15px;
    text-decoration: none;
    border-radius: 5px;
}
.learn-more:hover {
    background-image: url('../../images/LEARN-MORE-hover.png');
    background-size:contain;
    background-repeat: repeat-y;
    color: #000;
}
.logo-row {
    /* height: 500px; */
}
/* contact */
.contact-block {
    min-height: 500px;
}
.contact-block-image {
    padding-top: 111px;
}
.contact-block-map {
    padding-top: 94px;
}
.contact-detail {
    padding-top: 78px;
    font-size: 18px;
}
.copyright {
    font-size: 8px;
}
.copyright a {
    color: #fff;
    text-decoration: none;
}
.copyright a:hover {
    color: #fff;
}
a,a:hover {
    text-decoration: none;
}