.tile-small, .tile-medium, .tile-wide, .tile-large, .tile-app { display: block; background: linear-gradient(95deg, #007ec6, #0080cd, #008dd3); color: #ffffff; width: 150px; height: 150px; box-shadow: inset 0 0 1px #FFFFCC; cursor: pointer; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; max-width: none!important; border-radius: 6px; } .tile-small { width: 70px; height: 70px; } .tile-medium { width: 150px; height: 150px; } .tile-wide { width: 310px; height: 150px; } .tile-large { width: 310px; height: 310px; } .tile-app { width: 44px; height: 44px; } .tile-small, .tile-medium, .tile-wide, .tile-large, .tile-app { transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out, filter 200ms ease-in-out; box-shadow: none; transform: none; filter: brightness(1); } .tile-small .icon, .tile-medium .icon, .tile-wide .icon, .tile-large .icon, .tile-app .icon { max-width: 33%; height: 33%; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); /*font-size: 50px;*/ /*line-height: 50px;*/ z-index: 2; } .tile-small .branding-bar, .tile-medium .branding-bar, .tile-wide .branding-bar, .tile-large .branding-bar, .tile-app .branding-bar { height: 32px; line-height: 32px; position: absolute; left: 0; bottom: 0; right: 0; padding: 0 10px 5px; font-size: 0.875rem; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 2; } .tile-small .badge-top, .tile-medium .badge-top, .tile-wide .badge-top, .tile-large .badge-top, .tile-app .badge-top, .tile-small .badge-bottom, .tile-medium .badge-bottom, .tile-wide .badge-bottom, .tile-large .badge-bottom, .tile-app .badge-bottom { position: absolute; display: block; padding: 4px 8px; font-size: 12px; text-align: center; background-color: rgba(29, 29, 29, 0.1); z-index: 2; } .tile-small .badge-bottom, .tile-medium .badge-bottom, .tile-wide .badge-bottom, .tile-large .badge-bottom, .tile-app .badge-bottom { right: 10px; bottom: 0; } .tile-small .badge-top, .tile-medium .badge-top, .tile-wide .badge-top, .tile-large .badge-top, .tile-app .badge-top { top: 10px; right: 10px; } .tile-small:hover, .tile-medium:hover, .tile-wide:hover, .tile-large:hover, .tile-app:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25); } .tile-small:active, .tile-medium:active, .tile-wide:active, .tile-large:active, .tile-app:active { transform: translate3d(0, 0, 0); box-shadow: none; filter: brightness(0.94); } .tile-small { /*.branding-bar { display: none; }*/ } .tile-small .icon { max-width: 50%; font-size: 35px; line-height: 35px; } .tile-large .icon { font-size: 102px; line-height: 102px; } .tile-app .icon { max-width: 75%; height: 75%; } .tiles-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, 24%); /*grid-template-rows: repeat(auto-fit, (@tileBaseSize - 1%));*/ grid-gap: 10px; /*.tile-small::before, .tile-medium::before, .tile-large::before { content: ''; padding-bottom: 100%; display: block; } .tile-wide::before { content: ''; padding-bottom: 50%; display: block; }*/ } .tiles-grid .tile-small { height: 100%; width: 100%; grid-column: span 1; grid-row: span 1; } .tiles-grid .tile-medium { height: 100%; width: 100%; grid-column: span 2; grid-row: span 2; } .tiles-grid .tile-wide { height: 100%; width: 100%; grid-column: span 4; grid-row: span 2; } .tiles-grid .tile-large { height: 100%; width: 100%; grid-column: span 4; grid-row: span 4; } .tiles-grid .tile-small.col-1 { grid-column: 1 / span 1; } .tiles-grid .tile-medium.col-1 { grid-column: 1 / span 2; } .tiles-grid .tile-wide.col-1 { grid-column: 1 / span 4; } .tiles-grid .tile-large.col-1 { grid-column: 1 / span 4; } .tiles-grid .tile-small.row-1 { grid-row: 1 / span 1; } .tiles-grid .tile-medium.row-1 { grid-row: 1 / span 2; } .tiles-grid .tile-wide.row-1 { grid-row: 1 / span 4; } .tiles-grid .tile-large.row-1 { grid-row: 1 / span 4; } .tiles-grid .tile-small.col-2 { grid-column: 2 / span 1; } .tiles-grid .tile-medium.col-2 { grid-column: 2 / span 2; } .tiles-grid .tile-wide.col-2 { grid-column: 2 / span 4; } .tiles-grid .tile-large.col-2 { grid-column: 2 / span 4; } .tiles-grid .tile-small.row-2 { grid-row: 2 / span 1; } .tiles-grid .tile-medium.row-2 { grid-row: 2 / span 2; } .tiles-grid .tile-wide.row-2 { grid-row: 2 / span 4; } .tiles-grid .tile-large.row-2 { grid-row: 2 / span 4; } .tiles-grid .tile-small.col-3 { grid-column: 3 / span 1; } .tiles-grid .tile-medium.col-3 { grid-column: 3 / span 2; } .tiles-grid .tile-wide.col-3 { grid-column: 3 / span 4; } .tiles-grid .tile-large.col-3 { grid-column: 3 / span 4; } .tiles-grid .tile-small.row-3 { grid-row: 3 / span 1; } .tiles-grid .tile-medium.row-3 { grid-row: 3 / span 2; } .tiles-grid .tile-wide.row-3 { grid-row: 3 / span 4; } .tiles-grid .tile-large.row-3 { grid-row: 3 / span 4; } .tiles-grid .tile-small.col-4 { grid-column: 4 / span 1; } .tiles-grid .tile-medium.col-4 { grid-column: 4 / span 2; } .tiles-grid .tile-wide.col-4 { grid-column: 4 / span 4; } .tiles-grid .tile-large.col-4 { grid-column: 4 / span 4; } .tiles-grid .tile-small.row-4 { grid-row: 4 / span 1; } .tiles-grid .tile-medium.row-4 { grid-row: 4 / span 2; } .tiles-grid .tile-wide.row-4 { grid-row: 4 / span 4; } .tiles-grid .tile-large.row-4 { grid-row: 4 / span 4; } .tiles-grid .tile-small.col-5 { grid-column: 5 / span 1; } .tiles-grid .tile-medium.col-5 { grid-column: 5 / span 2; } .tiles-grid .tile-wide.col-5 { grid-column: 5 / span 4; } .tiles-grid .tile-large.col-5 { grid-column: 5 / span 4; } .tiles-grid .tile-small.row-5 { grid-row: 5 / span 1; } .tiles-grid .tile-medium.row-5 { grid-row: 5 / span 2; } .tiles-grid .tile-wide.row-5 { grid-row: 5 / span 4; } .tiles-grid .tile-large.row-5 { grid-row: 5 / span 4; } .tiles-grid .tile-small.col-6 { grid-column: 6 / span 1; } .tiles-grid .tile-medium.col-6 { grid-column: 6 / span 2; } .tiles-grid .tile-wide.col-6 { grid-column: 6 / span 4; } .tiles-grid .tile-large.col-6 { grid-column: 6 / span 4; } .tiles-grid .tile-small.row-6 { grid-row: 6 / span 1; } .tiles-grid .tile-medium.row-6 { grid-row: 6 / span 2; } .tiles-grid .tile-wide.row-6 { grid-row: 6 / span 4; } .tiles-grid .tile-large.row-6 { grid-row: 6 / span 4; } .tiles-grid .tile-small.col-7 { grid-column: 7 / span 1; } .tiles-grid .tile-medium.col-7 { grid-column: 7 / span 2; } .tiles-grid .tile-wide.col-7 { grid-column: 7 / span 4; } .tiles-grid .tile-large.col-7 { grid-column: 7 / span 4; } .tiles-grid .tile-small.row-7 { grid-row: 7 / span 1; } .tiles-grid .tile-medium.row-7 { grid-row: 7 / span 2; } .tiles-grid .tile-wide.row-7 { grid-row: 7 / span 4; } .tiles-grid .tile-large.row-7 { grid-row: 7 / span 4; } .tiles-grid .tile-small.col-8 { grid-column: 8 / span 1; } .tiles-grid .tile-medium.col-8 { grid-column: 8 / span 2; } .tiles-grid .tile-wide.col-8 { grid-column: 8 / span 4; } .tiles-grid .tile-large.col-8 { grid-column: 8 / span 4; } .tiles-grid .tile-small.row-8 { grid-row: 8 / span 1; } .tiles-grid .tile-medium.row-8 { grid-row: 8 / span 2; } .tiles-grid .tile-wide.row-8 { grid-row: 8 / span 4; } .tiles-grid .tile-large.row-8 { grid-row: 8 / span 4; } .tiles-grid .tile-small.col-9 { grid-column: 9 / span 1; } .tiles-grid .tile-medium.col-9 { grid-column: 9 / span 2; } .tiles-grid .tile-wide.col-9 { grid-column: 9 / span 4; } .tiles-grid .tile-large.col-9 { grid-column: 9 / span 4; } .tiles-grid .tile-small.row-9 { grid-row: 9 / span 1; } .tiles-grid .tile-medium.row-9 { grid-row: 9 / span 2; } .tiles-grid .tile-wide.row-9 { grid-row: 9 / span 4; } .tiles-grid .tile-large.row-9 { grid-row: 9 / span 4; } .tiles-grid .tile-small.col-10 { grid-column: 10 / span 1; } .tiles-grid .tile-medium.col-10 { grid-column: 10 / span 2; } .tiles-grid .tile-wide.col-10 { grid-column: 10 / span 4; } .tiles-grid .tile-large.col-10 { grid-column: 10 / span 4; } .tiles-grid .tile-small.row-10 { grid-row: 10 / span 1; } .tiles-grid .tile-medium.row-10 { grid-row: 10 / span 2; } .tiles-grid .tile-wide.row-10 { grid-row: 10 / span 4; } .tiles-grid .tile-large.row-10 { grid-row: 10 / span 4; } .tiles-grid .tile-small.col-11 { grid-column: 11 / span 1; } .tiles-grid .tile-medium.col-11 { grid-column: 11 / span 2; } .tiles-grid .tile-wide.col-11 { grid-column: 11 / span 4; } .tiles-grid .tile-large.col-11 { grid-column: 11 / span 4; } .tiles-grid .tile-small.row-11 { grid-row: 11 / span 1; } .tiles-grid .tile-medium.row-11 { grid-row: 11 / span 2; } .tiles-grid .tile-wide.row-11 { grid-row: 11 / span 4; } .tiles-grid .tile-large.row-11 { grid-row: 11 / span 4; } .tiles-grid .tile-small.col-12 { grid-column: 12 / span 1; } .tiles-grid .tile-medium.col-12 { grid-column: 12 / span 2; } .tiles-grid .tile-wide.col-12 { grid-column: 12 / span 4; } .tiles-grid .tile-large.col-12 { grid-column: 12 / span 4; } .tiles-grid .tile-small.row-12 { grid-row: 12 / span 1; } .tiles-grid .tile-medium.row-12 { grid-row: 12 / span 2; } .tiles-grid .tile-wide.row-12 { grid-row: 12 / span 4; } .tiles-grid .tile-large.row-12 { grid-row: 12 / span 4; } .tiles-grid.size-half { width: 50%; } .tiles-grid.size-1 { width: 8.33333333%; } .tiles-grid.size-2 { width: 16.66666667%; } .tiles-grid.size-3 { width: 25%; } .tiles-grid.size-4 { width: 33.33333333%; } .tiles-grid.size-5 { width: 41.66666667%; } .tiles-grid.size-6 { width: 50%; } .tiles-grid.size-7 { width: 58.33333333%; } .tiles-grid.size-8 { width: 66.66666667%; } .tiles-grid.size-9 { width: 75%; } .tiles-grid.size-10 { width: 83.33333333%; } .tiles-grid.size-11 { width: 91.66666667%; } .tiles-grid.size-12 { width: 100%; } @media screen and (min-width: 0) { .tiles-grid .col-fs-1 { grid-column: 1; } .tiles-grid .row-fs-1 { grid-row: 1; } .tiles-grid .col-fs-2 { grid-column: 2; } .tiles-grid .row-fs-2 { grid-row: 2; } .tiles-grid .col-fs-3 { grid-column: 3; } .tiles-grid .row-fs-3 { grid-row: 3; } .tiles-grid .col-fs-4 { grid-column: 4; } .tiles-grid .row-fs-4 { grid-row: 4; } .tiles-grid .col-fs-5 { grid-column: 5; } .tiles-grid .row-fs-5 { grid-row: 5; } .tiles-grid .col-fs-6 { grid-column: 6; } .tiles-grid .row-fs-6 { grid-row: 6; } .tiles-grid .col-fs-7 { grid-column: 7; } .tiles-grid .row-fs-7 { grid-row: 7; } .tiles-grid .col-fs-8 { grid-column: 8; } .tiles-grid .row-fs-8 { grid-row: 8; } .tiles-grid .col-fs-9 { grid-column: 9; } .tiles-grid .row-fs-9 { grid-row: 9; } .tiles-grid .col-fs-10 { grid-column: 10; } .tiles-grid .row-fs-10 { grid-row: 10; } .tiles-grid .col-fs-11 { grid-column: 11; } .tiles-grid .row-fs-11 { grid-row: 11; } .tiles-grid .col-fs-12 { grid-column: 12; } .tiles-grid .row-fs-12 { grid-row: 12; } .tiles-grid.size-fs-1 { width: 8.33333333%; } .tiles-grid.size-fs-2 { width: 16.66666667%; } .tiles-grid.size-fs-3 { width: 25%; } .tiles-grid.size-fs-4 { width: 33.33333333%; } .tiles-grid.size-fs-5 { width: 41.66666667%; } .tiles-grid.size-fs-6 { width: 50%; } .tiles-grid.size-fs-7 { width: 58.33333333%; } .tiles-grid.size-fs-8 { width: 66.66666667%; } .tiles-grid.size-fs-9 { width: 75%; } .tiles-grid.size-fs-10 { width: 83.33333333%; } .tiles-grid.size-fs-11 { width: 91.66666667%; } .tiles-grid.size-fs-12 { width: 100%; } } @media screen and (min-width: 576px) { .tiles-grid .col-sm-1 { grid-column: 1; } .tiles-grid .row-sm-1 { grid-row: 1; } .tiles-grid .col-sm-2 { grid-column: 2; } .tiles-grid .row-sm-2 { grid-row: 2; } .tiles-grid .col-sm-3 { grid-column: 3; } .tiles-grid .row-sm-3 { grid-row: 3; } .tiles-grid .col-sm-4 { grid-column: 4; } .tiles-grid .row-sm-4 { grid-row: 4; } .tiles-grid .col-sm-5 { grid-column: 5; } .tiles-grid .row-sm-5 { grid-row: 5; } .tiles-grid .col-sm-6 { grid-column: 6; } .tiles-grid .row-sm-6 { grid-row: 6; } .tiles-grid .col-sm-7 { grid-column: 7; } .tiles-grid .row-sm-7 { grid-row: 7; } .tiles-grid .col-sm-8 { grid-column: 8; } .tiles-grid .row-sm-8 { grid-row: 8; } .tiles-grid .col-sm-9 { grid-column: 9; } .tiles-grid .row-sm-9 { grid-row: 9; } .tiles-grid .col-sm-10 { grid-column: 10; } .tiles-grid .row-sm-10 { grid-row: 10; } .tiles-grid .col-sm-11 { grid-column: 11; } .tiles-grid .row-sm-11 { grid-row: 11; } .tiles-grid .col-sm-12 { grid-column: 12; } .tiles-grid .row-sm-12 { grid-row: 12; } .tiles-grid.size-sm-1 { width: 8.33333333%; } .tiles-grid.size-sm-2 { width: 16.66666667%; } .tiles-grid.size-sm-3 { width: 25%; } .tiles-grid.size-sm-4 { width: 33.33333333%; } .tiles-grid.size-sm-5 { width: 41.66666667%; } .tiles-grid.size-sm-6 { width: 50%; } .tiles-grid.size-sm-7 { width: 58.33333333%; } .tiles-grid.size-sm-8 { width: 66.66666667%; } .tiles-grid.size-sm-9 { width: 75%; } .tiles-grid.size-sm-10 { width: 83.33333333%; } .tiles-grid.size-sm-11 { width: 91.66666667%; } .tiles-grid.size-sm-12 { width: 100%; } } @media screen and (min-width: 768px) { .tiles-grid .col-md-1 { grid-column: 1; } .tiles-grid .row-md-1 { grid-row: 1; } .tiles-grid .col-md-2 { grid-column: 2; } .tiles-grid .row-md-2 { grid-row: 2; } .tiles-grid .col-md-3 { grid-column: 3; } .tiles-grid .row-md-3 { grid-row: 3; } .tiles-grid .col-md-4 { grid-column: 4; } .tiles-grid .row-md-4 { grid-row: 4; } .tiles-grid .col-md-5 { grid-column: 5; } .tiles-grid .row-md-5 { grid-row: 5; } .tiles-grid .col-md-6 { grid-column: 6; } .tiles-grid .row-md-6 { grid-row: 6; } .tiles-grid .col-md-7 { grid-column: 7; } .tiles-grid .row-md-7 { grid-row: 7; } .tiles-grid .col-md-8 { grid-column: 8; } .tiles-grid .row-md-8 { grid-row: 8; } .tiles-grid .col-md-9 { grid-column: 9; } .tiles-grid .row-md-9 { grid-row: 9; } .tiles-grid .col-md-10 { grid-column: 10; } .tiles-grid .row-md-10 { grid-row: 10; } .tiles-grid .col-md-11 { grid-column: 11; } .tiles-grid .row-md-11 { grid-row: 11; } .tiles-grid .col-md-12 { grid-column: 12; } .tiles-grid .row-md-12 { grid-row: 12; } .tiles-grid.size-md-1 { width: 8.33333333%; } .tiles-grid.size-md-2 { width: 16.66666667%; } .tiles-grid.size-md-3 { width: 25%; } .tiles-grid.size-md-4 { width: 33.33333333%; } .tiles-grid.size-md-5 { width: 41.66666667%; } .tiles-grid.size-md-6 { width: 50%; } .tiles-grid.size-md-7 { width: 58.33333333%; } .tiles-grid.size-md-8 { width: 66.66666667%; } .tiles-grid.size-md-9 { width: 75%; } .tiles-grid.size-md-10 { width: 83.33333333%; } .tiles-grid.size-md-11 { width: 91.66666667%; } .tiles-grid.size-md-12 { width: 100%; } } @media screen and (min-width: 992px) { .tiles-grid .col-lg-1 { grid-column: 1; } .tiles-grid .row-lg-1 { grid-row: 1; } .tiles-grid .col-lg-2 { grid-column: 2; } .tiles-grid .row-lg-2 { grid-row: 2; } .tiles-grid .col-lg-3 { grid-column: 3; } .tiles-grid .row-lg-3 { grid-row: 3; } .tiles-grid .col-lg-4 { grid-column: 4; } .tiles-grid .row-lg-4 { grid-row: 4; } .tiles-grid .col-lg-5 { grid-column: 5; } .tiles-grid .row-lg-5 { grid-row: 5; } .tiles-grid .col-lg-6 { grid-column: 6; } .tiles-grid .row-lg-6 { grid-row: 6; } .tiles-grid .col-lg-7 { grid-column: 7; } .tiles-grid .row-lg-7 { grid-row: 7; } .tiles-grid .col-lg-8 { grid-column: 8; } .tiles-grid .row-lg-8 { grid-row: 8; } .tiles-grid .col-lg-9 { grid-column: 9; } .tiles-grid .row-lg-9 { grid-row: 9; } .tiles-grid .col-lg-10 { grid-column: 10; } .tiles-grid .row-lg-10 { grid-row: 10; } .tiles-grid .col-lg-11 { grid-column: 11; } .tiles-grid .row-lg-11 { grid-row: 11; } .tiles-grid .col-lg-12 { grid-column: 12; } .tiles-grid .row-lg-12 { grid-row: 12; } .tiles-grid.size-lg-1 { width: 8.33333333%; } .tiles-grid.size-lg-2 { width: 16.66666667%; } .tiles-grid.size-lg-3 { width: 25%; } .tiles-grid.size-lg-4 { width: 33.33333333%; } .tiles-grid.size-lg-5 { width: 41.66666667%; } .tiles-grid.size-lg-6 { width: 50%; } .tiles-grid.size-lg-7 { width: 58.33333333%; } .tiles-grid.size-lg-8 { width: 66.66666667%; } .tiles-grid.size-lg-9 { width: 75%; } .tiles-grid.size-lg-10 { width: 83.33333333%; } .tiles-grid.size-lg-11 { width: 91.66666667%; } .tiles-grid.size-lg-12 { width: 100%; } } @media screen and (min-width: 1200px) { .tiles-grid .col-xl-1 { grid-column: 1; } .tiles-grid .row-xl-1 { grid-row: 1; } .tiles-grid .col-xl-2 { grid-column: 2; } .tiles-grid .row-xl-2 { grid-row: 2; } .tiles-grid .col-xl-3 { grid-column: 3; } .tiles-grid .row-xl-3 { grid-row: 3; } .tiles-grid .col-xl-4 { grid-column: 4; } .tiles-grid .row-xl-4 { grid-row: 4; } .tiles-grid .col-xl-5 { grid-column: 5; } .tiles-grid .row-xl-5 { grid-row: 5; } .tiles-grid .col-xl-6 { grid-column: 6; } .tiles-grid .row-xl-6 { grid-row: 6; } .tiles-grid .col-xl-7 { grid-column: 7; } .tiles-grid .row-xl-7 { grid-row: 7; } .tiles-grid .col-xl-8 { grid-column: 8; } .tiles-grid .row-xl-8 { grid-row: 8; } .tiles-grid .col-xl-9 { grid-column: 9; } .tiles-grid .row-xl-9 { grid-row: 9; } .tiles-grid .col-xl-10 { grid-column: 10; } .tiles-grid .row-xl-10 { grid-row: 10; } .tiles-grid .col-xl-11 { grid-column: 11; } .tiles-grid .row-xl-11 { grid-row: 11; } .tiles-grid .col-xl-12 { grid-column: 12; } .tiles-grid .row-xl-12 { grid-row: 12; } .tiles-grid.size-xl-1 { width: 8.33333333%; } .tiles-grid.size-xl-2 { width: 16.66666667%; } .tiles-grid.size-xl-3 { width: 25%; } .tiles-grid.size-xl-4 { width: 33.33333333%; } .tiles-grid.size-xl-5 { width: 41.66666667%; } .tiles-grid.size-xl-6 { width: 50%; } .tiles-grid.size-xl-7 { width: 58.33333333%; } .tiles-grid.size-xl-8 { width: 66.66666667%; } .tiles-grid.size-xl-9 { width: 75%; } .tiles-grid.size-xl-10 { width: 83.33333333%; } .tiles-grid.size-xl-11 { width: 91.66666667%; } .tiles-grid.size-xl-12 { width: 100%; } } @media screen and (min-width: 1452px) { .tiles-grid .col-xxl-1 { grid-column: 1; } .tiles-grid .row-xxl-1 { grid-row: 1; } .tiles-grid .col-xxl-2 { grid-column: 2; } .tiles-grid .row-xxl-2 { grid-row: 2; } .tiles-grid .col-xxl-3 { grid-column: 3; } .tiles-grid .row-xxl-3 { grid-row: 3; } .tiles-grid .col-xxl-4 { grid-column: 4; } .tiles-grid .row-xxl-4 { grid-row: 4; } .tiles-grid .col-xxl-5 { grid-column: 5; } .tiles-grid .row-xxl-5 { grid-row: 5; } .tiles-grid .col-xxl-6 { grid-column: 6; } .tiles-grid .row-xxl-6 { grid-row: 6; } .tiles-grid .col-xxl-7 { grid-column: 7; } .tiles-grid .row-xxl-7 { grid-row: 7; } .tiles-grid .col-xxl-8 { grid-column: 8; } .tiles-grid .row-xxl-8 { grid-row: 8; } .tiles-grid .col-xxl-9 { grid-column: 9; } .tiles-grid .row-xxl-9 { grid-row: 9; } .tiles-grid .col-xxl-10 { grid-column: 10; } .tiles-grid .row-xxl-10 { grid-row: 10; } .tiles-grid .col-xxl-11 { grid-column: 11; } .tiles-grid .row-xxl-11 { grid-row: 11; } .tiles-grid .col-xxl-12 { grid-column: 12; } .tiles-grid .row-xxl-12 { grid-row: 12; } .tiles-grid.size-xxl-1 { width: 8.33333333%; } .tiles-grid.size-xxl-2 { width: 16.66666667%; } .tiles-grid.size-xxl-3 { width: 25%; } .tiles-grid.size-xxl-4 { width: 33.33333333%; } .tiles-grid.size-xxl-5 { width: 41.66666667%; } .tiles-grid.size-xxl-6 { width: 50%; } .tiles-grid.size-xxl-7 { width: 58.33333333%; } .tiles-grid.size-xxl-8 { width: 66.66666667%; } .tiles-grid.size-xxl-9 { width: 75%; } .tiles-grid.size-xxl-10 { width: 83.33333333%; } .tiles-grid.size-xxl-11 { width: 91.66666667%; } .tiles-grid.size-xxl-12 { width: 100%; } } .tiles-group { width: 100%; float: left; overflow: visible; } .tiles-group::before { content: attr(data-group-title); display: block; position: absolute; left: 0; top: -36px; height: 1.5em; line-height: 1.5em; z-index: 1; color: inherit; } [class*=tile-].image-set { background-size: contain; background-position: center; } [class*=tile-].image-set .img { width: 25%; height: 50%; display: block; float: left; border: 1px solid #1d1d1d; background-size: cover; } [class*=tile-].image-set .img:nth-child(1) { width: 50%; height: 100%; } [class*=tile-] .slide { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; } [class*=tile-] [class*=slide-] { width: 100%; height: 100%; position: absolute; transition: all 0.3s ease-in-out; } [class*=tile-] .slide-front { top: 0; left: 0; } [class*=tile-].effect-hover-slide-up .slide-back, [class*=tile-].effect-hover-zoom-up .slide-back { top: 100%; left: 0; } [class*=tile-].effect-hover-slide-up:hover .slide-front, [class*=tile-].effect-hover-zoom-up:hover .slide-front { transform: translateY(-100%); } [class*=tile-].effect-hover-slide-up:hover .slide-back, [class*=tile-].effect-hover-zoom-up:hover .slide-back { top: 0; } [class*=tile-].effect-hover-slide-down .slide-back, [class*=tile-].effect-hover-zoom-down .slide-back { top: 0; left: 0; transform: translateY(-100%); } [class*=tile-].effect-hover-slide-down:hover .slide-front, [class*=tile-].effect-hover-zoom-down:hover .slide-front { top: 100%; } [class*=tile-].effect-hover-slide-down:hover .slide-back, [class*=tile-].effect-hover-zoom-down:hover .slide-back { transform: translateY(0); } [class*=tile-].effect-hover-slide-left .slide-back, [class*=tile-].effect-hover-zoom-left .slide-back { top: 0; left: 100%; } [class*=tile-].effect-hover-slide-left:hover .slide-front, [class*=tile-].effect-hover-zoom-left:hover .slide-front { transform: translateX(-100%); } [class*=tile-].effect-hover-slide-left:hover .slide-back, [class*=tile-].effect-hover-zoom-left:hover .slide-back { left: 0; } [class*=tile-].effect-hover-slide-right .slide-back, [class*=tile-].effect-hover-zoom-right .slide-back { top: 0; left: 0; transform: translateX(-100%); } [class*=tile-].effect-hover-slide-right:hover .slide-front, [class*=tile-].effect-hover-zoom-right:hover .slide-front { left: 100%; } [class*=tile-].effect-hover-slide-right:hover .slide-back, [class*=tile-].effect-hover-zoom-right:hover .slide-back { transform: translateX(0); } [class*=tile-].effect-hover-zoom-up:hover .slide-front, [class*=tile-].effect-hover-zoom-down:hover .slide-front, [class*=tile-].effect-hover-zoom-left:hover .slide-front, [class*=tile-].effect-hover-zoom-right:hover .slide-front { left: 0; top: 0; transform: scale(2); }