// Tiles

.tiles {

margin-bottom: 2rem;
position: relative;
box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);
font-size: 0.75rem;
transition: transform 0.2s ease-in-out;

.tiles-image:after {
  transition: background-image 0.2s ease-in-out;
  background-image: linear-gradient(0deg, #00234B 0%, #00234B 12%, rgba(0,35,75, 0.7) 20%, rgba(0,35,75, 0) 45%, rgba(0,35,75, 0) 100%);
  opacity: 0.9;
}

}

.tiles-body {

position: absolute;
left: 20px;
bottom: 20px;
right: 20px;

h3 {
  margin-bottom: 0;
  color: $white;
  line-height: 1.25;
  font-weight: 700;
}

a h3 {
  &:after {
    font-family: 'icomoon' !important;
    content: "\e900";
    font-size: 12px;
    margin-left: 10px;
    margin-top: -1px;
  }
}

}

.tiles-label {

font-family: $font-family-sans-serif;
font-weight: 500;
color: $white;
text-transform: uppercase;

}

.tiles-square {

.tiles-image {
  padding-bottom: 100%;
}

&:hover {
  transform: scale(1.055);
}

}

.tiles-wrapper {

background-color: $white;
box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15);

.tiles {
  box-shadow: none;
  margin-bottom: 0;
}

}

.tiles-image {

position: relative;
margin-bottom: 1rem;
overflow: hidden;

&:after {
  content: "";
  opacity: 0.9;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

img {
  animation-delay: 0.75s;
  animation-name: fade;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  @include media-breakpoint-down(xs) {
    width: 100%;
    height: auto;
  }
}

}

.tiles-footer {

padding: 1.875rem;
display: flex;
justify-content: space-between;
align-items: center;

}

.tiles-stretch {

height: 100%;

}

.benefits-icon {

margin-bottom: 0.5rem;

svg {
  display: block;
  margin: 0 auto;
}

}

.benefits-items {

padding: 30px 40px;

p {
  font-size: 0.75rem;
}

h3 {
  margin-bottom: 1.5rem;
}

h6 {
  margin-bottom: 0;
}

.row {
  margin-right: -40px;
  margin-left: -40px;
}

.col-md-12,
.col-md-4 {
  padding-right: 40px;
  padding-left: 40px;
}

.col-md-4 + .col-md-4 {
  &:after {
    content: "";
    position: absolute;
    border-left: 1px solid #dee2e3;
    top: 5px;
    bottom: 0;
    left: 0;
  }
}

}

.tiles-container {

padding: 40px 190px 40px 40px;
@include media-breakpoint-down(lg) {
  padding-right: 60px;
}
@include media-breakpoint-down(md) {
  padding-right: 40px;
}

}

.tiles-fixed-heading {

min-height: 90px;

}

.tiles-link {

position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 10;

}

.tiles-indent {

margin-top: -100px;
margin-bottom: 50px;

}

.tiles-icon-header {

position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -30%);

}

.tiles-icon-footer {

position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, -30%);

}