/* Resources
/*------------------------------------------------------------*/
.resources-list .adv {
	height: 100%;
	padding-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sec-title {
	font-size: 16px;
    font-weight: 700;
    color: #333;
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0;
	margin-bottom: 15px;
}

.sec-title .text-link .sec-name {
	display: none;
}

.resources--section {
	margin-bottom: 15px;
}

.resources-list .row {
	display: flex;
	flex-wrap: wrap;
}

/* Right Column */
/* Column Section */
h2.col-sec-header {
	font-size: 20px;
	font-weight: bold;
	color: #1F81B9;
	text-align: left;
}

.col-sec-list li {
	padding-bottom: 15px;
	border-bottom: 1px dashed rgba(51, 51, 51, .3);
	margin-bottom: 15px;
}

.col-sec-list li:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 30px;
}

/* Job List */
.col-job-list .job__title {
	font-size: 16px;
	font-weight: 600;
	transition: color .3s ease-in-out;
	display: block;
}

.col-job-list .job__company {
	font-size: 14px;
	font-weight: normal;
	margin: 4px 0;
	display: inline-block;
}

.col-job-list .job__postdate {
	font-size: 13px;
}

/* Article List */
.col-article-list .article {
	font-size: 16px;
	margin-bottom: 0;
	display: flex;
	justify-content: center;
}

.col-article-list .article span {
	padding-left: 15px;
}

.col-article-list .article .video__length {
	font-size: 12px;
	padding: 2px 4px;
	right: 5px;
	bottom: 5px;
}

.article__thumb--s {
	width: 125px;
	height: 65px;
	position: relative;
}


/* Job Swiper */
.related-jobs-swiper {
	margin-bottom: 30px;
}

/* See more */
.btn--seemore {
	margin: 0 auto;
}

/* Video Tab Control */
.video__container .nav-center {
	display: flex;
	justify-content: center;
}

.video__container .nav-pills {
	background-color: #E9F3F8;
	border-radius: 50px;
	padding: 5px;
	width: 610px;
}

.video__container .nav-pills>li {
	margin-right: 0;
	margin-left: 0;
	text-align: center;
	width: 33.33333333%;
}

.video__container .nav-pills>li.active>a,
.video__container .nav-pills>li.active>a:focus,
.video__container .nav-pills>li.active>a:hover {
	border-bottom-color: transparent;
	background-color: #1F81B9;
	color: #FFFFFF;
	padding: 6px 0;
	border-radius: 50px;
	font-weight: bold;
}

.video__container .nav-pills>li>a,
.video__container  .nav-pills>li>a:focus {
	padding: 6px 0;
	font-weight: normal;
	display: flex;
	align-items: center;
    justify-content: center;
}

.video__container .video-nav-control .icon--left {
	font-size: 20px;
	margin-right: 6px;
}

/* Videos section */
.resources--section .article .video__overlay .embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Shorts section */
.resources--section .shorts-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(100px, 1fr));
	gap: 20px;
}

.resources--section .shorts-list .article {
	margin-bottom: 0;
}

.resources--section .shorts-list .article--withVideo:nth-child(5) {
	display: none;
}

.resources--section .embed-responsive-9by16,
.story .resources-list .embed-responsive-9by16 {
	padding-bottom: 177.777778%;
}

.video__container .article .video__play {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
	opacity: 1;
	transition: opacity .3s ease-in-out;
}

.video__container .article a.article__link:hover .video__play {
    opacity: 0;
}

.resources--section .article__title,
.story .resources-list .article__title {
	line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
	min-height: 46px;
}

.video__container .article__overview {
	cursor: pointer;
}

.video__container .article .article__categories {
	white-space: unset;
	overflow: unset;
	text-overflow: unset;
}

.video__container .article .tag {
	line-clamp: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shorts Detail */
.story .resources-list .article {
	margin-bottom: 0;
}

.story .resources-list .story-listing {
    display: grid;
	grid-template-columns: repeat(2, minmax(100px, 1fr));
	gap: 20px;
}

.story .btn .spinner--circle {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(31, 129, 185, 0.25);
  border-top: 3px solid #1F81B9;
}

.video__container.story .more {
	margin-top: 30px;
}


/* Shorts Modal */
.shorts-extend .modal-header h3 {
	flex: 1;
	margin: 0;
}

.shorts-extend.fade .modal-dialog {
	transform: unset !important;
}

.shorts-extend .modal-content {
	min-height: unset;
    padding: 0;
}

.shorts-extend .modal-header {
	border-bottom: 0;
	padding-bottom: 0;
}

.shorts-extend .modal-body .article__categories {
	margin-top: 15px;
}

.shorts-extend .modal-body .article__title {
	overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
	line-clamp: 3;
    -webkit-line-clamp: 3;
	max-height: 68px;
}

.shorts-extend .modal-header .close {
    font-size: 38px;
}

.shorts-extend .embed-responsive-9by16 {
	padding-bottom: 62vh;
}

@keyframes fade-in-up {
	0% {
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (min-width: 480px) {
	.sec-title .text-link .sec-name {
		display: inline-block;
	}
}

@media (min-width: 768px) {
	.shorts-extend .modal-dialog {
		max-width: 400px;
	}
	
	.shorts-extend .embed-responsive-9by16 {
		padding-bottom: 177.777778%;
	}
}

@media (min-width: 992px) {
	.columns .col-l {
		margin-right: 30px;
	}
	
	.columns .col-r {
		display: block;
		flex: 0 0 300px;
	}

	.related-jobs-swiper {
		display: none;
	}

	.sec-title {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.story .resources-list .row {
		justify-content: start;
	}

	.resources--section .shorts-list,
	.story .resources-list .story-listing {
		grid-template-columns: repeat(4, minmax(100px, 1fr));
	}
	
}

@media (min-width: 1200px) {
	.resources--section {
		margin-bottom: 30px;
	}

	.resources-list .adv {
		padding-bottom: 30px;
	}

	.resources--section .shorts-list,
	.story .resources-list .story-listing {
		grid-template-columns: repeat(5, minmax(100px, 1fr));
	}

	.resources--section .shorts-list .article--withVideo:nth-child(5) {
		display: unset;
	}
}