﻿.work{
    background: url("/_catalogs/masterpage/NDS/media/patterns/workbg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.work p.text-center {
    width: 90%;
    margin: 1em auto 3rem;
    opacity: 0;
    transform: translateY(100%);
}
.work .col-lg-4 .card{
	 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	 border-radius: .5rem;
	 overflow:hidden;
	 opacity: 0;
	 transform: translateY(100%);
}
.work .col-lg-4 .card .card-img-top{
	overflow:hidden;
}
.work .col-lg-4 .card .card-img-top img{
	height:100%;
	width:100%;
	object-fit:cover;
	transition:var(--transition);
}
.work .col-lg-4 .card:hover .card-img-top img{
	transform:scale(1.1);
}
.work .col-lg-4 .card .card-body{
	padding:2rem;
	background: url('../media/Mask\%20Group\%206.png') 0% 60%;
}
.work .col-lg-4 .card .card-body .card-description{
	margin-bottom:2rem;
}
.work .col-lg-4 .card .card-body .learnMore{
	color:var(--purple);
	font-family: var(--avenirMedium);
	text-transform: capitalize;
}
.work .col-lg-4 .card .card-body .learnMore:hover{
	color:var(--purpleHover);
}
.work .col-lg-4 .card .card-title{font-family: var(--avenirDemi);}
.careers .col-lg-7{
    padding: 4rem 1rem;
    background-color: #f5f6f7;
}
.careers button.jobOpening{
	border-radius: 2rem;
	background-color: var(--purple);
	color: white;
	padding: 0.7rem 2rem;
	border: none;
	transition: var(--transition);
	opacity: 0;
	transform: translateY(100%);
}
.careers button.jobOpening:hover{
	background-color:var(--purpleHover);
}
.careers .values .valuesList li{
	position:relative;
	margin: 0.8rem 0 .5rem;
	padding: 0 2.6rem;
	width: 50%;
	font-family: var(--avenirDemi);
	color: var(--navy);
}
.careers .values .valuesList li::before{
	content: "";
	position: absolute;
	background-image: url(/_catalogs/masterpage/NDS/media/check-svgrepo-com.svg);
	height: .9rem;
	width: .9rem;
	background-size: contain;
	background-repeat: no-repeat;
	top: 65%;
	left: 1rem;
	transform: translate(-50%, -50%);
	z-index:1;
}
.careers .values .valuesList li::after{
	content: "";
	position: absolute;
	background-color:var(--navy);
	background-size: contain;
	background-repeat: no-repeat;
	top: 58%;
	left: 1rem;
	transform: translate(-50%, -50%);
	border-radius:100%;
	height: 1.8rem;
	width: 1.8rem;
	z-index:0;
}
.careers .valuesList{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	padding:0;
}


@media (min-width: 768px) {

	.work p.text-center {
    width: 33%;
}
.careers .col-lg-7{
    padding: 4rem 6rem;
}

}