.redborder{
  border: 1pt solid red;
}
 .image-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
 .image-container-4 img {
  width: 20%;
  border: 1px solid #ccc;
  margin: 10px;
}
 .career-row{
  display: flex;
}
 .career-block{
  display: flex;
  flex-direction: column;
  transform: skewX(-5deg);
  width: 30%;
  margin-left: 20px;
  position: relative; /* Add relative positioning here */
}
.career-block .img {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  transition: background-position .69s ease-in-out;
  position: relative; /* Ensure this is relative for positioning hover effects */
}

 .career-block .bottom-text{
  color: #0067c5;
  font-family: "canada-type-gibson","Helvetica Neue",helvetica,sans-serif;
  font-size: large;
  font-weight: bold;
  border: thin solid #0067c5;
  padding: 10px 10px;
}
 .career-block .filter-blue{
  background-color: #0067c5;
  opacity: 0.5;
}
 .career-block a {
 position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  /* No underlines on the link */
  z-index: 10;
  /* Places the link above everything else in the div */
  background-color: transparent; /* Set to transparent */
  opacity: 0; /* Fix to make div clickable in IE */
  filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
 .career-block div, span{
	 cursor: pointer;
 }
 .career-block div{
  height: 20rem;
 }

.hover-left:hover .img{
  background-position: -10px 50% !important;
} 
 .hover-right:hover .img{
  background-position: 10px 50% !important;
} 
 .hover-up:hover .img{
  background-position: 50% -10px !important;
}
 .hover-down:hover .img{
  background-position: 50% 10px !important;
}