.section-hero{ 
	background-color: #ffffff;
	width: 100%;
	padding: 230px 0 106px 0;
}

.section-work{
	background-color: #ffffff;
	width: 100%; 
	margin-top: -1px;
	margin-bottom: -1px;
	padding: 0 15px 20px 15px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
}

.card{
	position: relative;
	height: 600px;
	border-radius: 16px;
	box-sizing: border-box;
	overflow: hidden;
	margin: 15px;
	text-align: center;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s;
}

.card:nth-child(1){
	margin-top: 0;
}

.width-100{
	width: 100%;
}

.width-50{
	width: calc(50% - 30px);
}

.bg-grey{ background-color: #F2F2F5; }
.bg-lemon{ background-color: #FFFCEB; }
.bg-cream{ background-color: #FBFBF7; }
.bg-blue{ background-color: #E0F0EF; }
.bg-pink{ background-color: #FDF3F1; }

.card img{
	align-self: center;
	height: 90%;
	transition: .3s;
}

#pmax {
	height: 108%!important;
	padding-top: 12%;
}

#guidacent{
	align-self: flex-start !important;
	height: 128%!important;
	padding-top: 6%;
}

#payscale{
	align-self: flex-start !important;
	height: 118%!important;
	padding-top: 4%;
	padding-left: 20%;
}

#palador{ height: 116%!important; }

#goalsCard img{ transform: scale(1.4); }

.cs-description{
	position: absolute;
	width: 100%; left: 0; box-sizing: border-box;
	margin-top: 100px;
	opacity: 0;
	transition: .1s;
	padding: 30px;
	transition: .24s;
}

.cs-name{
	color: #fff;
	font-size: 44px;
	font-weight: bold;
	margin: 0 0 10px 0;
	line-height: 1.2em;
}

.cs-tags{
	color: #fff;
	font-size: 21px;
	margin: 0;
}

.cs-bubbleTags{
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cs-bubbleTags span{
	background-color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	padding: 8px 16px;
	border-radius: 100px;
	white-space: nowrap;
}

.bg-grey .cs-bubbleTags span{ color: #479086; }
.bg-lemon .cs-bubbleTags span{ color: #CE8242; }
.bg-cream .cs-bubbleTags span{ color: #495196; }
.bg-blue .cs-bubbleTags span{ color: #3F6CA0; }
.bg-pink .cs-bubbleTags span{ color: #FF7260; }

.card:hover{
	transition: all .2s ease-in-out;
}

.bg-grey:hover{ background-color: #61E2BB; }
.bg-lemon:hover{ background-color: #FFC18E; }
.bg-cream:hover{ background-color: #6564DB; }
.bg-blue:hover{ background-color: #519AEF; }
.bg-pink:hover{ background-color: #FF7260; }

.img-hover{ position: absolute; opacity: 0; }
.swapImg:hover .img-hover{ transition: all .2s ease-in-out; opacity: .1!important; }
.swapImg:hover .img-original{ opacity: 0!important; }

.card:hover img{
	transition: all .2s ease-in-out;
	transform: scale(.75);
	opacity: .1;
}

.card:hover .scale100{
	transform: scale(1.1)!important; 
}

.card:hover .scale85{
	transform: scale(.85)!important; 
}

.card:hover .cs-description{
	transition: all .24s ease-in-out;
	margin-top: 0;
	opacity: 1;
}

.locked{
	font: 16px Montserrat;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #ffffff;
}

/*------Media Queries------*/
@media (max-width: 1380px) {
	.card{ height: 500px; }
}

@media (max-width: 1200px) {
	.section-hero{ padding: 170px 0 70px 0; }
	.card{ height: 400px; }
	.cs-bubbleTags{ gap: 10px; margin-top: 30px; }
	.cs-bubbleTags span{ font-size: 15px; padding: 7px 14px; }
}

@media (max-width: 1070px) { .long-txt{ font-size: 38px; }

@media (max-width: 950px) {
	.section-work{ padding: 0 10px 15px 10px; }
	.card{ height: 320px; margin: 10px; }
	.width-50{ width: calc(50% - 20px); }
	.cs-name{ font-size: 38px; }
	.cs-bubbleTags{ gap: 8px; margin-top: 20px; }
	.cs-bubbleTags span{ font-size: 14px; padding: 6px 12px; }
}

@media (max-width: 890px) { .long-txt{ font-size: 32px; }

@media (max-width: 780px) {
	.section-hero{ padding: 120px 0 52px 0; }
	.card{ height: 300px; }
	.width-50{ width: 100%; }
	.long-txt{ font-size: 38px; }
	.cs-bubbleTags{ margin-top: 6%; }
	.cs-bubbleTags span{ font-size: 13px; padding: 4px 11px; }
}

@media (max-width: 600px) {
	#pmax { height: 100%!important; padding-top: 20%; padding-left: 5%;  } 
}

@media (max-width: 480px) {
	.section-hero{ padding: 28% 0 44px 0; }
}

@media (max-width: 330px) {
	.section-hero{ padding: 90px 0 44px 0; }
}