@import "custom2.css";
@font-face {
    font-family: sukhumvit_bold;
    src: url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.eot);
    src: url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.eot%3F) format("embedded-opentype"),
    url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.woff2) format("woff2"),
    url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.woff) format("woff"),
    url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.ttf) format("truetype"),
    url(../fonts/sukhumvit/sukhumvit-set_bold-webfont.svg) format("svg");
    font-weight: normal;
}

@font-face {
    font-family: sukhumvit;
    src: url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.eot);
    src: url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.eot%3F) format("embedded-opentype"),
    url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.woff2) format("woff2"),
    url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.woff) format("woff"),
    url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.ttf) format("truetype"),
    url(../fonts/sukhumvit/sukhumvit-set_medium-webfont.svg) format("svg");
    /*font-weight:400;*/
    font-style: normal;
}

@font-face {
    font-family: sukhumvit_text;
    src: url(../fonts/sukhumvit/sukhumvit-set_text-webfont.eot);
    src: url(../fonts/sukhumvit/sukhumvit-set_text-webfont.eot%3F) format("embedded-opentype"),
    url(../fonts/sukhumvit/sukhumvit-set_text-webfont.woff2) format("woff2"),
    url(../fonts/sukhumvit/sukhumvit-set_text-webfont.woff) format("woff"),
    url(../fonts/sukhumvit/sukhumvit-set_text-webfont.ttf) format("truetype"),
    url(../fonts/sukhumvit/sukhumvit-set_text-webfont.svg) format("svg");
    /*font-weight:400;*/
    font-style: normal;
}

html, body, h1, h2, h3, h4, h5, h6, div, p, a, li, span, tr, th, td, .h1, .h2, .h3, .h4, .h5, .h6 {
    /*font-family: "Poppins", "sukhumvit";*/
    font-family: "sukhumvit";
}

b, th, .text-bold {
    /*font-family: "Poppins", "sukhumvit_bold";*/
    font-family: "sukhumvit_bold";
    font-weight: 600;
}
.footer {
    width: 100%;
    background-color: #404040;
}
.footer .copyright {
    font-size: 14px;
    color: #9a9a9a;
    margin-bottom: 36px;
}
footer .copyright a {
    color: #9a9a9a;
    text-decoration: none;
}
footer a {
    padding: 0 16px 0 0;
}
.footer .footer-main{
	padding-bottom:0px !important;
	padding-top:1rem;
}
.text-tpbs {
    color: #FA5000;
}

.main-header.header-tpbs {
    background: #fa5000;
}

.main-header .top-header {
    background: #b73e01;
}

.main-header .navbar {
	padding:inherit;
	min-height:inherit;
}

/*#nav-section{*/
/*	height:70px;*/
/*}*/
#nav-section .logo{
	display:inline;
}

#nav-section .home-btn a{
	font-family:Sukhumvit;
	letter-spacing:1px;
	font-size:20px;
	padding:10px;
	background:#edc403;
	color:#FA5000;
	min-width: inherit;
	vertical-align:inherit;
}
#nav-section .home-btn a:hover{
	background:#fff;
	color:#55565b;
}

#nav-section .home-btn a i{
	font-size:1.5rem;
	margin-right:5px;
}
.banner {
    background: #fa5000 url("../img/main_banner/banner02.jpg") center center no-repeat;
    background-size: cover;
    height: 350px;
	/*margin-top: 70px;*/
}

.spot-container {
    padding-top: 50px;
    padding-bottom: 30px;
}

.btn {
    font-family: sukhumvit;
    min-width: 15rem;
}

a.btn.btn-tpbs {
    background: linear-gradient(90deg, rgb(255, 42, 104) 0%, rgb(255, 125, 96) 100%);
    border: none;
    color: #fff;
    border-radius: 50px;
    margin-bottom: 15px;
    padding: 10px 30px;
	text-transform:inherit;
}

a.live-link{
	color:black;
	margin-right:10px;
}
a.live-link:hover{
	color:#fa5000;
}

a.btn.btn-tpbs:hover {
    background: linear-gradient(270deg, rgb(255, 42, 104) 0%, rgb(255, 125, 96) 100%);
}


.btn-play-clip {
    /*background: #fa5000 url("../img/bg-play-button.png") center center repeat-x;*/
    background-color: #fa5000;
    background-image: url("../img/bg-play-button.png");
    background-position: center center;
    background-repeat: repeat-x;
    min-width: 50px;
    border-radius: 50%;
    padding-left: 20px;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
}

.btn-play-clip:hover {
    background-color: #c23700;
    background-image: none;
}

.visual-title, .visual-sub-title {
    line-height: 1.5;
}

.fancybox-container {
    z-index: 999999999;
}

/*  Online : Start  */
.online-h2 {
    font-size: 4rem;
    color: #f2650a;
	font-family: "Poppins", "sukhumvit";
	letter-spacing: -1px;
}

.online-h4 {
    font-size: 1.5rem;
}

.online-header {
    background: url("../img/bg/bg_online.png") center bottom no-repeat;
    padding-bottom: 1px;
}
h3.section-header{
	font-size: 32px;
    line-height: 30px;
    font-weight: 700;
    color: rgb(0, 0, 0);
	font-family: Poppins, sukhumvit;
	margin-bottom:5px;
}
/*  Online : End  */


/*  Website : Start  */
.website-stat {
    /*background: url("../img/bg/bg_website.png") right bottom no-repeat;*/
    /*height: 600px;*/
}
.btn-website, .header-website, .title-imac, .subtitle-imac, .value-imac, .unit-imac {
    font-family: "Poppins", "sukhumvit";
}
.bg-custom-gray {
    background: #c1c3c5;
}
.bg-global {
    position: absolute;
    left: -220px;
    bottom: -235px;
}
.bg-custom-lightgray{
	background: #f7f6f6;
}

article.center{
	text-align:center;
}

article.center a {
	text-decoration:none;
	color:#55565b;
}
article.center a:hover{
	text-decoration:none;
	color:#fa5000;
}
article.center a:hover h2{
	color:#fa5000;
}
article.center a:hover img, .tweet-thumbnail a:hover img,.post-thumbnail a:hover img{
	opacity: 0.5;
  filter: alpha(opacity=50);
  transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;
}
article .detail h2{
	font-size: 20px;
    margin-top: 20px;
    margin-bottom: 5px;
    line-height: 28px;
	letter-spacing:0px;
}
article .detail p.date,article .detail p.pageview{
	margin-bottom:0px;
	line-height: 24px;
    font-size: 16px;
	letter-spacing:0px;
}
h3.globe-icon:before {
    content: url('../img/globe-icon_03.png');
	margin-right:15px;
	vertical-align:middle;
}
h3.twitter-icon:before {
    content: url('../img/twitter-icon.png');
	margin-right:15px;
	vertical-align:middle;
}
h3.facebook-icon:before {
    content: url('../img/facebook-icon.png');
	margin-right:15px;
	vertical-align:middle;
}
h3.podcast-icon:before {
    content: url('../img/podcast-icon.png');
	margin-right:15px;
	vertical-align:middle;
}
h3.thaipbsplay-icon:before {
    content: url('../img/tpbsplay-icon.png');
	margin-right:15px;
	vertical-align:middle;
}
#makeMeScrollable
		{
			width:100%;
			height: 100%;

			position: relative;
		}

		/* Replace the last selector for the type of element you have in
		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
		#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			height:500px;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}
.text-white{
	color:#fff;
}
.photography figure figcaption{
	 text-align: center;
}
.photography figure figcaption .rank-label{
	 border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;
	display:inline-block;
    background: #f2650a;
    color: #fff;
    text-align: center;
	box-sizing:initial;
    font: 32px Arial, sans-serif;
	font-weight:bold;
	margin-bottom:10px;
}
.photography figure figcaption .pg-text-top{
	font-size:18px;
	line-height:24px;
	margin-bottom:5px;
}
.photography figure figcaption .pg-text-lower{
	font-size:24px;
	line-height:28px;
}

#twitter-content{
	background: url('../img/twitter-bg.jpg') #96d2f1 no-repeat;
	min-height:100vh;
	background-position:top;
	background-size:100%;
}
article.Twitter-box,article.facebook-box{
	overflow: hidden;
    background-color: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 5px;
	font-family: Arial, Helvetica, sans-serif !important;
	letter-spacing:0px;
}
article.facebook-box{
	border-radius:4px;
}
article.Twitter-box .Tweet-header,article.facebook-box .facebook-header{
	display:flex;
	padding: 10px 17.5px 0px;
}
.engagement{
	font-size:14px;
}

article.Twitter-box .Tweet-header .TweetAuthor-avatar {
    -webkit-box-flex: 0;
    height: 36px;
    background-color: transparent;
    margin-right: 9px;
    flex: 0 0 auto;
}
article.Twitter-box a:hover{
	color: rgb(43, 123, 185);

}
.Avatar {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
}
article.facebook-box .facebook-header .Avatar{
	border: 3px solid #3578E5;
	margin-right:15px;
}

article.Twitter-box .TweetAuthor, article.facebook-box .facebookAuthor {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    overflow: hidden;
}
article.facebook-box .facebookAuthor .facebookAuthor-link{
	color: #385898;
    cursor: pointer;
	font-family: Arial, Helvetica, sans-serif !important;
    text-decoration: none;
	margin-bottom:5px;
	font-weight:bold;
}
article.facebook-box .footer{
	background:#fff;
}
article.facebook-box .footer span{
	margin:0px 10px 0px 10px;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size:14px;
	vertical-align:middle;
}
article.facebook-box .footer span.like i{
	background-image: url(../img/5ZaMSNstzpD.png);
    background-size: 74px 490px;
    background-repeat: no-repeat;
    display: inline-block;
	width: 18px;
    height: 18px;
    background-position: -40px -432px;
}
article.facebook-box .footer{
	display:flex;
}
article.facebook-box .footer div{
	display:inline;
}
article.facebook-box .footer div.engagement{
	text-align:right;
	font-size:14px;
	margin-left:auto;
	padding:5px 10px 5px 10px;
}
article.facebook-box .footer span.comment:before {
    content: '';
    display: inline-block;
    height: 18px;
    margin: 0 6px -3px 0;
    min-width: 18px;
    position: relative;
    top: -2px;
    width: 18px;
}
article.facebook-box .footer span.comment:before {
    background-image: url(../img/pfDd8HDC7NN.png);
    background-repeat: no-repeat;
    background-size: 500px 304px;
    background-position: -258px -250px;
}
article.facebook-box .footer span.share:before {
    content: '';
    display: inline-block;
    height: 18px;
    margin: 0 6px -3px 0;
    min-width: 18px;
    position: relative;
    top: -2px;
    width: 18px;
}
article.facebook-box .footer span.share:before {
    background-image: url(../img/pfDd8HDC7NN.png);
    background-repeat: no-repeat;
    background-size: 500px 304px;
    background-position: -278px -250px;
}
.TweetAuthor a:hover{
	 color: #1DA1F2;
}
.facebookAuthor a:hover{
	text-decoration:underline;
}
.tweet-thumbnail img{
	border-radius:5px;
	width:100%;
}
.TweetAuthor-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 4px;
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(28, 32, 34);
	font-weight:bold;
	font-size:14px;
}
.TweetAuthor-screenName, .facebookDate{
	display: block;
    color: rgb(105, 120, 130);
    margin-top: -18px;
    font-size: 12.25px;
	font-family: Arial, Helvetica, sans-serif;
}
.facebookDate{
	padding-top:5px;
}

.Tweet-brand,.facebook-more {
    margin-left: auto;
}
.Tweet-brand a,article.Twitter-box .footer a,.tweet-text p a{
   color: #1DA1F2;
}
.Tweet-brand a:hover, article.Twitter-box .footer a:hover,.tweet-text p a:hover{
   color: rgb(43, 123, 185);
}
.Tweet-brand span i{
	font-size:20px;
}
.tweet-text{
	margin-top:10px;
	min-height:102px;
}
.post-text{
	margin-top:10px;
	padding: 0px 17.5px 10px;
	min-height:50px;
}
.post-text.mh-70{
	min-height:70px;
}
.tweet-text p, .post-text p{
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(28, 32, 34);
	line-height:20px;
	font-size:14px;
	letter-spacing:0px;
	margin-bottom: 0px;
}
.tweet-thumbnail{
	margin-top:5px;
}
.tweet-text p a span, .post-text p a span{
	font-family: Arial, Helvetica, sans-serif !important;
	line-height:20px;
	color:#385898;
}
.tweet-date span.like{
	margin-right:10px;
}
.tweet-date span{
	font-family: Arial, Helvetica, sans-serif !important;
	font-size:12px;
}
article.Twitter-box .content{
	border-bottom:1px solid #ddd;
	padding: 0px 17.5px 5px;
}
article.Twitter-box .footer{
	background:#fff;
	margin-top:5px;
	padding: 0px 17.5px 10.15px;
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif !important;
}
article.Twitter-box .footer div{
	display:inline;
}
article.Twitter-box .footer div.comment{
	font-family: Arial, Helvetica, sans-serif !important;
}
article.Twitter-box .footer div.comment i{
	margin-right:5px;
}
article.Twitter-box .footer div.chevron{
	float:right;
}


#facebook-content{
	background: url('../img/facebook-bg.jpg') #3c5ca2 no-repeat;
	min-height:100vh;
	background-position:top;
	background-size:100%;
}
#podcast-content{
	background: url('../img/podcast-bg.jpg') no-repeat;
	background-position:top;
	background-size:cover;
}

#play-content{
	background: url('../img/thaipbsplay-bg.jpg') no-repeat;
	background-position:top;
	background-size:cover;
}
#timeline-content{
	background: url('../img/timeline-bg.jpg') #fff no-repeat;
	background-position:top;
	background-size:100%;
}
article.podcast a .detail h2{
	color:#fff;
}

article.podcast a .detail h2:hover{
	color:#f2650a;
}

article.tplay a .detail h2,article.tplay a .detail .date{
	color:#fff;
}

article.tplay a .detail h2:hover, article.tplay a .detail .date:hover{
	color:#55565b;
}


.post-thumbnail, .tweet-thumbnail {
	 position: relative;
}
.post-thumbnail img{
	 width: 100%;
    height: 100%;
}
.post-thumbnail .rank-overlay ,.tweet-thumbnail .rank-overlay{
    position: absolute;
    bottom: 0;
	left: 0;
    padding:8px 20px 8px 20px;
    background-color: #f2650a;
    color: #fff;
	font-weight:bold;
	font-family:Sukhumvit;
	font-size:28px;
	line-height:34px;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}

.post-thumbnail .live-overlay {
    position: absolute;
    top: 10px;
	right: 10px;
    padding:5px 15px 5px 15px;
    background-color: #f34448;
    color: #fff;
	letter-spacing:1px;
	font-weight:bold;
	font-family:Sukhumvit;
	font-size:18px;
	line-height:20px;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
	border-radius:4px;
}


.border-tp{
	border-top:1px solid #ddd;
}
.border-bt{
	border-bottom:1px solid #ddd;
}
.m-auto{
	margin:0 auto;
}
article.ig{
	font-size:16px;
}
article.ig .content{
	background:#fff;
	padding:10px;
}
article.ig .content .text{
	min-height:96px;
}
article.ig .content .text.yt{
	min-height:48px;
}
article.ig .ig-footer img, article.ig .ig-header img{
	height:100%;
	width:100%;
	display:block;
}
article.ig .ig-footer{
	clear:both;
}
article.ig .content .text{
	letter-spacing:0px;
	line-height:24px;

}
article.ig .content .meta{
	letter-spacing:0px;
	line-height:24px;
	font-size:14px;
	margin-top:10px;
	position:relative;
	color:#9f9d9d;
}
article.ig .content .meta .views,article.ig .content .meta .date{
	display:inline;
}
article.ig .content .meta .views{
	float:right;
}
	.lt-logo{
		width:200px;
		display:inline;
	}

	.main-header .navbar .navbar-collapse.show {
		overflow-y:inherit;
	}

	#mega-menu{
		background:#FA5000;
	}


.main-header .container-fluid, .main-header .container {
    padding-left: 10px;
    padding-right: 10px;
}
.main-header .navbar .navbar-nav li a {
	display:inline;
	padding:1rem 1rem;
	letter-spacing: 0px;
}
.main-header .navbar .navbar-brand {
    padding: 1rem 0;
}
@media only screen and (min-width: 991px) {
    main.no-banner {
        padding-top: 60px;
    }

    .visual-no-bg .visual-inner {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

@media only screen and (min-width: 1200px) {
    .banner {
        height: 450px;
    }
}

@media (max-width: 991.98px) {
    .banner {
        height: 300px;
        margin-top: 60px;
    }
}

@media (max-width: 767.98px) {
    .banner {
        /*height: 175px;*/
		margin-top:auto;
    }
	.fixed-top{
		position:relative;
	}
	article.Twitter-box, article.facebook-box{
		margin-bottom:10px;
	}

	#nav-section .home-btn a {
		margin-top:0px;

	}
	#nav-section .home-btn a i{
		margin-right:0px;
	}
	.lt-logo{
		width:100px;
	}
	.imac{
		margin-bottom:20px !important;
		margin-top:20px !important;
	}
	article.ig .content .text{
		min-height:auto;
	}
	article.ig .content .text.yt{
		min-height:auto;
	}
	.tweet-text{
		min-height:auto;
	}
	.main-header .navbar .navbar-nav li {
    border-bottom: .1px solid #eee;
}
	.main-header .navbar .navbar-nav li a {
		display:inline-block;
		width:100%;
	}

}

@media (max-width: 575.98px) {
    .banner {
        height: 135px;
    }

    .online-header {
        background-size: 70%;
    }

    .online-h2 {
        font-size: 2rem;
    }

    .online-h4 {
        font-size: 1.2rem;
    }
}