.fb-icon, .tw-icon, .yt-icon, .ig-icon, .tune-icon {
  width:50px;
  height:50px;
  display:inline-block;
  position:relative;
  /*
  border-radius: 50%;
  transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  -webkit-transition: opacity .3s;
  */
}

/*
.fb-icon {
  background: url('../images/socmed-sprites.png') no-repeat;
}

.tw-icon{
  background: url('../images/socmed-sprites.png') -50px 0 no-repeat;
}

.yt-icon{
  background: url('../images/socmed-sprites.png') -100px 0 no-repeat;
}

.ig-icon{
  background: url('../images/socmed-sprites.png') -150px 0 no-repeat;
}

.tune-icon{
  background: url('../images/socmed-sprites.png')  -200px 0 no-repeat;
}

.fb-icon:hover,
.tw-icon:hover,
.yt-icon:hover,
.ig-icon:hover,
.tune-icon:hover {
  border-radius: 10px;
}
*/

.fb-icon {
  background: url('../images/socmed-sprites-2.png') no-repeat;
}

.tw-icon{
  background: url('../images/socmed-sprites-2.png') -50px 0 no-repeat;
}

.yt-icon{
  background: url('../images/socmed-sprites-2.png') -100px 0 no-repeat;
}

.ig-icon{
  background: url('../images/socmed-sprites-2.png') -150px 0 no-repeat;
}

.tune-icon{
  background: url('../images/socmed-sprites-2.png')  -200px 0 no-repeat;
}

.fb-icon:after, .tw-icon:after, .yt-icon:after, .ig-icon:after, .tune-icon:after {
  content: "";
  -moz-transition: opacity .3s;
  -ms-transition: opacity .3s;
  -o-transition: opacity .3s;
  -webkit-transition: opacity .3s;
  opacity: 0;
  width:50px;
  height:50px;
  display:inline-block;
}

.fb-icon:hover:after, .tw-icon:hover:after, .yt-icon:hover:after, .ig-icon:hover:after, .tune-icon:hover:after {
  opacity: 1;
}

.fb-icon:after {
  background: url('../images/socmed-sprites-2.png') 0 -50px no-repeat;
}

.tw-icon:after {
  background: url('../images/socmed-sprites-2.png') -50px -50px no-repeat;
}

.yt-icon:after {
  background: url('../images/socmed-sprites-2.png') -100px -50px no-repeat;
}

.ig-icon:after {
  background: url('../images/socmed-sprites-2.png') -150px -50px no-repeat;
}

.tune-icon:after {
  background: url('../images/socmed-sprites-2.png') -200px -50px no-repeat;
}

.main-logo {
  padding-top: 3px;
}

.top-page {
  background: none; //url('../images/bg2.jpg');
}

//-------------- News --------------//
.overlay-container {
  display: inline-block;
}

.news-item, .quiz-item {
  margin-bottom: 20px;
}

.news-item .news-item-group, 
.quiz-item .quiz-item-group {
  position: relative;
  height: 100%;
  display: block;
}

.news-item .news-item-group img,
.quiz-item .quiz-item-group img {
  width: 100%;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  z-index: 10;
}

.news-item .news-item-group .news-item-label {
  font-weight: bold;
  font-size: .9em;
  text-transform: uppercase;
  position: absolute;
  top: 10px;
  color: #fff;
  background-color: #166636;
  padding: 3px 6px;
  z-index: 10;
}

.news-item .news-item-group .news-item-title, 
.quiz-item .quiz-item-group .quiz-item-title {
  width: 100%;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  padding: 0 10px 15px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 1px #000;
  font-size: 1.2em;
  z-index: 3;
}

.news-item .news-item-group .news-item-title p,
.quiz-item .quiz-item-group .quiz-item-title p {
  margin: 0 !important;
  z-index: 10;
}

.news-item .news-item-group .news-item-gradient,
.quiz-item .quiz-item-group .quiz-item-gradient {
  bottom: 0;
  height: 40%;
  top: auto;
  background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.45) 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.45)));
  background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.45) 100%);
  background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.45) 100%);
  background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.45) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.news-item .news-item-group .news-item-overlay,
.quiz-item .quiz-item-group .quiz-item-overlay {
  background: rgba(0,0,0,.15);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  -webkit-transition: background-color .15s ease-out;
  -moz-transition: background-color .15s ease-out;
  transition: background-color .15s ease-out;
  width: 100%;
  z-index: 3;
}

.news-item .news-item-group .news-item-overlay:hover,
.quiz-item .quiz-item-group .quiz-item-overlay:hover {
  background-color: rgba(0,0,0,0) !important;
}

.news-item-overlay2 {
  background: rgba(0,0,0,0.1);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  -webkit-transition: background-color .15s ease-out;
  -moz-transition: background-color .15s ease-out;
  transition: background-color .15s ease-out;
  width: 100%;
  z-index: 3;
}

.news-item-overlay2:hover{
  background-color: rgba(0,0,0,0.7) !important;
}

.timestamp{
font-size:11px;
font-style:italic;
color:#CCC;
text-shadow: 0.1em 0.1em 0.2em black;
}
//---------- End of News ----------//

//---------- CHART ---------------//
.borders {
border-style:hidden;
}
.sidenumber {
position:absolute;
bottom:0;
right:5%;
font-family:Bitter, sans-serif;
font-size:30px;
font-weight: bold;
opacity: 0.9;
color: transparent;
text-shadow: 0 0 1px rgba(0,0,0,0.3);
z-index:0;
}

.numberpos {font-family:Bitter, serif;margin-right:5px;}

@media screen and (min-width:427px){
	.sidechart{
	float:right; text-align:center; height:100px; border:inset; padding-left:2px; padding-right:2px;
	}
	.sidechart2{
	display:none; text-align:center; border:inset; padding-left:2px; padding-right:2px;
	}
}

@media screen and (max-width:426px){
	.sidechart{
	display:none; float:right; text-align:center; height:100px; border:inset; padding-left:2px; padding-right:2px;
	}
	.sidechart2{
	display:block; text-align:left; border:inset; padding-left:2px; padding-right:2px; margin-top:65px;
	}
}
@media screen and (max-width:374px){
	.numberpos{
		float:left ; font-size:32px; color:#FFFBF0;vertical-align:middle; letter-spacing:2px; display:inline-block; height:100px;
		}
}
@media screen and (min-width:375px){
	.numberpos{
		float:left ;font-size:50px; color:#FFFBF0;vertical-align:middle; letter-spacing:2px; display:inline-block; height:100px;
		}
}
// -------------------------------- //


@media screen and (min-width:1020px){
	.topbannerTall{max-height:1200px !important;}
	.imagebannerTall{height:362px !important;}
	.maxbotTall{max-height:385px !important;}
}
@media screen and (min-width:1100px){

	.imagebannerTall{height:389px !important;}
}
@media screen and (min-width:1200px){

	.imagebannerTall{height:414px !important;}
}
@media screen and (min-width:1300px){

	.imagebannerTall{height:461px !important;}

}
@media screen and (min-width:1400px){

	.imagebannerTall{height:482px !important;}
}
@media screen and (min-width:1500px){

	.imagebannerTall{height:554px !important;}

}
@media screen and (min-width:1700px){

	.imagebannerTall{height:590px !important;}
}
@media screen and (min-width:1850px){

	.imagebannerTall{height:616px !important;}
}
@media screen and (min-width:2000px){

	.imagebannerTall{min-height:642px !important;}
}
@media screen and (min-width:2125px){

	.imagebannerTall{min-height:668px !important;}
}
@media screen and (min-width:2250px){

	.imagebannerTall{height:702px !important;}
}
@media screen and (min-width:2375px){

	.imagebannerTall{height:716px !important;}
}
@media screen and (min-width:2500px){

	.imagebannerTall{height:746px !important;}
}


@media screen and (max-width:399px){
	.bottomSize{max-width:250px !important;max-height:250px !important;}
}
@media screen and (min-width:400px){
	.bottomSize{max-width:250px !important;max-height:250px !important;}
}

@media screen and (max-width:767px){
	.newsTall,.quizTall{max-height:490px !important;
	max-width:735 !important;}
}
@media screen and (min-width:768px){
	.newsTall,.quizTall{height:230px !important;}
}
@media screen and (min-width:1020px){
	.newsTall,.quizTall{height:204px !important;}
}
@media screen and (min-width:1230px){
	.newsTall,.quizTall{height:251px !important;}
}
@media screen and (min-width:1500px){
	.newsTall,.quizTall{height:302px !important;}
}

@media screen and (max-width:426px){
	.burgerpos{margin-top:7px; width:40px !important; height:40px !important;}
	.burgersize{width:100% !important; height:100% !important;}
}
@media screen and (max-width:321px){
	.burgerpos{margin-left: 2px !important; margin-top:12px; width:30px !important; height:30px !important;}
	.burgersize{width:100% !important; height:100% !important;}
}

.logomain{
width:100%;
}

.slick-dots{
display:none !important;
}

.page-content {
    background: url(../images/bg-main-40.jpg) no-repeat center top;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.sp-time-elapsed {display: none}

.bottom-info {
  font-family: 'PT Sans Narrow', sans-serif;
  background-color: #0d9346;
  padding: 50px 0 30px;
  border-bottom: dotted 1px #ccc;
  color: #fff;
}

.bottom-info-title h4 {
  font-family: 'PT Sans Narrow', sans-serif;
  font-weight: bold;
  color: #fff;
  margin-bottom: 30px;
}

.bottom-info-sm {
  margin-bottom: 10px;
}

.sm-icon {
  padding-right: 8px;
}

.sm-id {
  padding-left: 10px;
  font-size: 16px;
}

.sm-id:hover {
  text-decoration: underline;
}

.contact-title {
  display: inline-block;
  width: 150px;
}

.bottom-info-content a:hover {
    text-decoration: underline;
    color: #fff
}
.containerPopup {
  width: 68% !important;
}

#sp-popup {
  float: right;
  width: 30px;
  height: 20px;
  z-index: 10;
  cursor: pointer;
  text-align: center;
  font-size: 26px;
  font-weight: normal;
  line-height: 20px;
  background-color: #eee;
  background-color: rgba(238,238,238,0.9);
  color: #666;
  background-image: url(../img/maximize.png);
  background-repeat: no-repeat;
  background-position: center center;
}

#sp-toggle:after {
  display: inline-block;
}

.charts li {float: left;}

.chart-cover {
  float: left;
}

.chart-detail {
  float:left !important;
  width:80% !important;
}

.career {font-family: Bitter, serif}
.career h2 {
  margin-top: 40px;
}

.career .profile {position:relative;vertical-align: bottom;}
.career .title {font-size: 20px;font-weight: bold;margin-bottom: 10px;display: inline-block;}
.career ol li:before {font-family: Bitter, serif;font-size: 20px;font-weight: bold;}
.career ol li {margin-bottom: 20px}

.profile-video, .more-info {float: left;}
.more-info {display:inline-block;position: relative; top:180px;}
.more-info p {line-height: 25px}
.vacancy {padding: 30px;}

@media screen and (max-width:765px){
  .more-info {display:inline-block;position: relative; top:10px;}
}

ul.qualification li:before {font-family: Bitter, serif;font-size: 20px;font-weight: bold;counter-increment: ul-counter;content: none}
ul.qualification li {list-style-type: disc;list-style-position: inside; margin-left: 25px;}
ul.qualification li a {font-weight: bold}
ul.qualification li a:hover {text-decoration: underline;}

.program-title {
  margin-bottom: 5px;
}

.program-detail-time {margin-bottom: 20px;font-family: "Raleway", sans-serif; font-size:14px;font-weight:bold}

#stream-box {
  position: fixed;
  width: 120px;
  clear: both;
  left: 20px;
  bottom: 0;
  padding: 0 0 20px 0;
  z-index: 99999999;
}

.stream-button {
  display: block;
  width: 120px;
  height: 45px;
  background-image: url('../images/btn-live-stream.png');
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out;
  cursor: pointer;
}

.stream-button span {
  position: absolute;
  top:0;
  left: 0;
  width: 120px;
  height: 45px;
  background-image: url('../images/btn-live-stream.png');
  background-position: 0 -45px;
  -webkit-transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  opacity: 0;
}

.stream-button span:hover {
  opacity: 1;
}