// 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%);
}