:root {
	--brand: #12537E;
	--border-color: #CACCCD;
	--text: #222;
	--text-light: #444;
	--text-bright: #fff;
	--white: #fff;
	--black: #000;
	--brand-blue-ultralight: #f2f8fc;
	--brand-blue-light: #3D98D4;
	--brand-blue: #12537E;
	--blog-font-size-xxs: 0.5rem;
	--blog-font-size-xs: 0.75rem;
	--blog-font-size-sm: 1rem;	
	--blog-font-size-md: 1.375rem;	
}




.nav.nav-pills{
	display: flex;
	flex-wrap: wrap;
	gap: .75rem !important;
	margin-bottom: 1.25rem;
	


		
		& > *{
			flex: none;
			min-width: unset;

		}

			&.noflex{
				& > *{
					@media (min-width: 992px) { 
						flex: none;
						min-width: unset;
					}
				}

			}

		.btn{
			margin: 0;

		}

		li{
			margin-bottom: unset !important;
			position: unset !important;
			margin-leflt: unset !important;
			padding-left: unset !important;
			&:before{
				display: none;
			}

		}


		button, button.nav-link{
			border: 1px solid var(--border-color);
			border-radius: .5rem;
			font-size: var(--blog-font-size-sm);
			font-weight: 300;
			background: none;
			color: var(--brand-blue-light);
			font-weight: 400;
			padding: 0 1rem;
			line-height: 2;

			&:hover:not(.active){
				background: var(--brand-blue-ultralight);
			}

			&.active{
				background: var(--brand) !important;
				color: white;
			}		
		}
}



/* ----------------------------------- */
/* blog
/* ----------------------------------- */

.article-list{

	&.is-visible{
		opacity: 1;
		transition: all .3s ease;
	}

	&.is-invisible{
		opacity: 0;
	}

	a.post-detail{
		text-decoration: none !important;
		color: unset !important;
		&:hover{
			text-decoration: none !important;
		}
	}




	.post{



		.post-inner{
			position: relative;
			border: 1px solid var(--brand);
			border-radius: 1.25rem !important;
			transition: all .2s ease;
			background: white;
	
	
	
			&:hover{
				filter: brightness(.98) saturate(1.4);
				box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05) !important;
				transform: scale(1.02);
			}
	
	
			.post-image{
				position: relative;
				img{
					border-top-left-radius: 1.25rem !important;
					border-top-right-radius: 1.25rem !important;
				}
				.category{
					max-width: calc( 100% - 1.25rem)
					font-size: var(--blog-font-size-sm);
					color: white;
	
					position: absolute;
					background: var(--brand);
					padding: .25rem .5rem .25rem 1.25rem;
					bottom: 1.25rem;
	
				}
			}
	
			.post-abstract{
	
				.inner{
					padding: 2rem 1.25rem;
				}
	
	
				.date{
					display: block;
					font-size: var(--blog-font-size-xs);
					color: var(--text-light);
					margin-bottom: .5rem;
	
				}
	
			}
	
		}
	
	}



	&.related-list{


	}





}

.slider-article-list{
			//width: calc( 100vw -  ( (100vw - 1280px) / 2 ));  /* Makes it full viewport width */
			width: calc((100% + (50vw - 50%)) - 8px);


			margin-left: auto; /* Aligns it to the right */
			margin-right: calc(-50vw + 50%); /* Pulls it outside the container */
	
			//background: red;
			overflow: hidden;
			max-width: 100vw;
			margin-top: -1rem;


			& + .swiper-buttons{
				margin-top: -3rem;
			}



	a.post-detail{
		text-decoration: none !important;
		color: unset !important;
		&:hover{
			text-decoration: none !important;
		}
	}

	.bggradient, .bg-white{
		transition: all .2s ease;
		&:hover{
			filter: brightness(.98) saturate(1.4);
			box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05) !important;
			transform: scale(1.02);
		}
	}

	.post{
		height: 100%;
		.post-abstract{
			@include media-breakpoint-up(lg) { 
				min-height: 290px;
			}


		}
	}

	.main-carousel{
		cursor: pointer !important;
		padding-bottom: 2rem;
		height: 100%;





		//background: red;

		
		width: 100%;



		.swiper-wrapper{
			padding-top:1rem;



			@include media-breakpoint-up(lg) { 
				//transform: translate3d(8.33%, 0px, 0px);
				//width: calc(100vw - 8.33%);
			}


		}

		.carousel-cell.swiper-slide{
			width: 440px;
			max-width: 75%;
			height: auto;
			align-items: flex-start;
			height: 100%;

		
		}

	
		




	}





}









.related-posts{
	background: var(--brand-blue-ultralight);
	margin-bottom: 0px;

	.event-item .event-date {
		font-weight: 500 !important;
	}

	a {
		color: var(--brand-blue-light, #3D98D4);
		transition: color 0.2s ease;

		&:hover {
			color: #000000 !important;
		}
	}

	& + footer{
		margin-top: 0;

	}

}


.quoted{
	font-size: var(--blog-font-size-md);
	font-weight: 500;
	&:before {
		content: '«';
		color: var(--brand-blue-light)
	}	  
	&:after {
		content: '»';
		color: var(--brand-blue-light)
	}
}

.related-posts ~ .footer,
.related-posts ~ footer {
	margin-top: 0 !important;
}

.teammv .small,
.teammv .small ul li,
.teammv .small p {
	font-size: 14px !important;
	line-height: 20px !important;
}