@import url(./pink.css); .RV-Alignment { display: grid; } .RV-Alignment--top { display: grid; align-content: start; } .RV-Alignment--bottom { display: grid; align-content: end; } .RV-Alignment--left { display: grid; justify-content: start; } .RV-Alignment--right { display: grid; justify-content: end; } .RV-Alignment--horizontalCenter { display: grid; justify-content: center; } .RV-Alignment--verticalCenter { display: grid; align-items: center; } .RV-Alignment--center { display: grid; justify-content: center; display: grid; align-items: center; } /* * Classes for easy flexrow usage */ /* ########## * Container class ########### */ /* * Orientation */ /* * Breaks from row to column orientation at the given breakpoint * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint. */ /* * Flexbox behavior, Row is horizontal, but item are wraped individualy */ /* * Shorthand for the modifiers above */ /* ########## * Item class ########### */ /* * Varios relative width of items to each other */ /* * Item has always the given width */ /* * Item width relativ to the container */ /* * Shorthand for the modifiers above */ /* * Combining basic classes */ /* * Combining shorthands */ /* * Final CSS Class */ .RV-FlexRow__Container { display: flex; height: 100%; } .RV-FlexRow__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; } .RV-FlexRow__Container--breakPoint { flex-wrap: wrap; } .RV-FlexRow__Container--breakPoint * { flex-basis: calc(500px * 999 - 100% * 999); } .RV-FlexRow__Container--horizontal { flex-direction: row; } .RV-FlexRow__Container--vertical { flex-direction: column; } .RV-FlexRow__Container--auto { flex-direction: row; flex-wrap: wrap; } .RV-FlexRow__Item { display: grid; } .RV-FlexRow__Item--top { display: grid; align-content: start; } .RV-FlexRow__Item--bottom { display: grid; align-content: end; } .RV-FlexRow__Item--left { display: grid; justify-content: start; } .RV-FlexRow__Item--right { display: grid; justify-content: end; } .RV-FlexRow__Item--horizontalCenter { display: grid; justify-content: center; } .RV-FlexRow__Item--verticalCenter { display: grid; align-items: center; } .RV-FlexRow__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-FlexRow__Item--narrower { flex-grow: 1; flex-shrink: 5; } .RV-FlexRow__Item--narrow { flex-grow: 2; flex-shrink: 4; } .RV-FlexRow__Item--wide { flex-grow: 4; flex-shrink: 2; } .RV-FlexRow__Item--wider { flex-grow: 5; flex-shrink: 1; } .RV-FlexRow__Item--fixedSize { flex-grow: 0; flex-shrink: 0; width: min-content; flex-basis: 100px; } .RV-FlexRow__Item--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; width: 50%; } .RV-FlexRow__Item--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.33%; width: 33.33%; } .RV-FlexRow__Item--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; } .RV-FlexRow__Item--content { flex-grow: 0; flex-shrink: 0; width: max-content; flex-basis: max-content; } .RV-FlexGrid__Container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(300px, 1fr); } .RV-FlexGrid__Item { display: grid; } .RV-FlexGrid__Item--top { display: grid; align-content: start; } .RV-FlexGrid__Item--bottom { display: grid; align-content: end; } .RV-FlexGrid__Item--left { display: grid; justify-content: start; } .RV-FlexGrid__Item--right { display: grid; justify-content: end; } .RV-FlexGrid__Item--horizontalCenter { display: grid; justify-content: center; } .RV-FlexGrid__Item--verticalCenter { display: grid; align-items: center; } .RV-FlexGrid__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-ContentCrop { display: block; overflow: hidden; } .RV-ContentCrop img { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-ContentCrop p { overflow: hidden; display: block; text-overflow: ellipsis; padding: 0; margin: 0; line-height: 1.21; z-index: -20; position: relative; background-color: white; height: 96.8%; } .RV-ContentCrop--fade--fade:after { background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: -10; } .RV-ContentCrop--ellipsis--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: white; padding: 0 2px; } .RV-ContentCrop--square { width: 100%; padding-top: 100%; position: relative; } .RV-ContentCrop--square img, .RV-ContentCrop--square div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--circle { width: 100%; padding-top: 100%; position: relative; border-radius: 50%; } .RV-ContentCrop--circle img, .RV-ContentCrop--circle div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--1to2 { width: 100%; padding-top: 200%; position: relative; } .RV-ContentCrop--1to2 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--2to1 { width: 100%; padding-top: 50%; position: relative; } .RV-ContentCrop--2to1 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--4to3 { width: 100%; padding-top: 75%; position: relative; } .RV-ContentCrop--4to3 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--16to9 { width: 100%; padding-top: 56.25%; position: relative; } .RV-ContentCrop--16to9 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--3to2 { width: 100%; padding-top: 66.66667%; position: relative; } .RV-ContentCrop--3to2 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--left img { object-position: left; } .RV-ContentCrop--center img { object-position: center; } .RV-ContentCrop--top img { object-position: top; } .RV-ContentCrop--bottom img { object-position: bottom; } .RV-ContentCrop--center img { object-position: center; } .RV-Fan__Container--vertical { flex-direction: column; width: max-content; } .RV-Fan__Container--vertical .RV-Fan__Surface { width: 320px; min-height: 280px; } .RV-Fan__Container--horizontal { flex-direction: row; } .RV-Fan__Container--horizontal .RV-Fan__Surface { min-width: 320px; height: 280px; } .RV-Fan__Container--auto { flex-flow: row wrap; } .RV-Fan__Container--auto .RV-Fan__Surface { width: calc(100% - 320px); min-width: 320px; height: 280px; } .RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface { flex-grow: 1; } .RV-Fan__Container { display: flex; } .RV-Fan__Base { height: 280px; width: 320px; flex: 0 0 auto; } .RV-Fan__Surface { display: block; overflow: hidden; } .RV-Fan__Surface img { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-Fan__Surface p { overflow: hidden; display: block; text-overflow: ellipsis; padding: 0; margin: 0; line-height: 1.21; z-index: -20; position: relative; background-color: white; height: 96.8%; } .RV-Fan__Surface--fade--fade:after { background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: -10; } .RV-Fan__Surface--ellipsis--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: white; padding: 0 2px; } .RV-Fan__Surface--square { width: 100%; padding-top: 100%; position: relative; } .RV-Fan__Surface--square img, .RV-Fan__Surface--square div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Fan__Surface--circle { width: 100%; padding-top: 100%; position: relative; border-radius: 50%; } .RV-Fan__Surface--circle img, .RV-Fan__Surface--circle div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Fan__Surface--1to2 { width: 100%; padding-top: 200%; position: relative; } .RV-Fan__Surface--1to2 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Fan__Surface--2to1 { width: 100%; padding-top: 50%; position: relative; } .RV-Fan__Surface--2to1 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Fan__Surface--4to3 { width: 100%; padding-top: 75%; position: relative; } .RV-Fan__Surface--4to3 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Fan__Surface--16to9 { width: 100%; padding-top: 56.25%; position: relative; } .RV-Fan__Surface--16to9 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Fan__Surface--3to2 { width: 100%; padding-top: 66.66667%; position: relative; } .RV-Fan__Surface--3to2 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Fan__Surface--left img { object-position: left; } .RV-Fan__Surface--center img { object-position: center; } .RV-Fan__Surface--top img { object-position: top; } .RV-Fan__Surface--bottom img { object-position: bottom; } .RV-Fan__Surface--center img { object-position: center; } .RV-FullWidthContent__Container { width: 100%; } .RV-FullWidthContent__Item { width: 100%; display: block; overflow: hidden; } .RV-FullWidthContent__Item img { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-FullWidthContent__Item p { overflow: hidden; display: block; text-overflow: ellipsis; padding: 0; margin: 0; line-height: 1.21; z-index: -20; position: relative; background-color: white; height: 96.8%; } .RV-FullWidthContent__Item--fade--fade:after { background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: -10; } .RV-FullWidthContent__Item--ellipsis--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: white; padding: 0 2px; } .RV-FullWidthContent__Item--square { width: 100%; padding-top: 100%; position: relative; } .RV-FullWidthContent__Item--square img, .RV-FullWidthContent__Item--square div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-FullWidthContent__Item--circle { width: 100%; padding-top: 100%; position: relative; border-radius: 50%; } .RV-FullWidthContent__Item--circle img, .RV-FullWidthContent__Item--circle div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-FullWidthContent__Item--1to2 { width: 100%; padding-top: 200%; position: relative; } .RV-FullWidthContent__Item--1to2 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-FullWidthContent__Item--2to1 { width: 100%; padding-top: 50%; position: relative; } .RV-FullWidthContent__Item--2to1 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-FullWidthContent__Item--4to3 { width: 100%; padding-top: 75%; position: relative; } .RV-FullWidthContent__Item--4to3 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-FullWidthContent__Item--16to9 { width: 100%; padding-top: 56.25%; position: relative; } .RV-FullWidthContent__Item--16to9 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-FullWidthContent__Item--3to2 { width: 100%; padding-top: 66.66667%; position: relative; } .RV-FullWidthContent__Item--3to2 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-FullWidthContent__Item--left img { object-position: left; } .RV-FullWidthContent__Item--center img { object-position: center; } .RV-FullWidthContent__Item--top img { object-position: top; } .RV-FullWidthContent__Item--bottom img { object-position: bottom; } .RV-FullWidthContent__Item--center img { object-position: center; } .RV-Sizes--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; width: 50%; } .RV-Sizes--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.33%; width: 33.33%; } .RV-Sizes--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; } .RV-Sizes--fixedSize { flex-grow: 0; flex-shrink: 0; } .RV-Sizes--content { flex-grow: 0; flex-shrink: 0; width: max-content; flex-basis: max-content; } .RV-BoxShadow { position: relative; float: left; } .RV-BoxShadow:before, .RV-BoxShadow:after { content: ""; position: absolute; z-index: -2; } .RV-BoxShadow--simple { box-shadow: 0 0 10px #6b5690; } .RV-BoxShadow--raised:after { box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { bottom: 15px; left: 10px; width: 50%; height: 20%; max-width: 300px; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); transform: rotate(-3deg); } .RV-BoxShadow--liftedCorners:after { right: 10px; left: auto; transform: rotate(3deg); } .RV-Spacing__Outer--small { margin: 10px; } .RV-Spacing__Outer--medium { margin: 25px; } .RV-Spacing__Outer--large { margin: 35px; } .RV-Spacing__Inner--small { padding: 10px; } .RV-Spacing__Inner--small { gap: 10px; } .RV-Spacing__Inner--medium { padding: 25px; } .RV-Spacing__Inner--medium { gap: 25px; } .RV-Spacing__Inner--large { padding: 35px; } .RV-Spacing__Inner--large { gap: 35px; } .RV-Iconized__Container { position: relative; } .RV-Iconized__Container--small { top: -.25em; } .RV-Iconized__Container--medium { top: -.5em; } .RV-Iconized__Container--large { top: -1.03073em; } .RV-Iconized__Container--huge { top: -2.05em; } .RV-Iconized__Icon { margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; } .RV-Iconized__Container--extraSmall .RV-Iconized__Icon { width: 1em; height: 1em; position: relative; top: .125em; } .RV-Iconized__Container--small .RV-Iconized__Icon { width: 1.5em; height: 1.5em; position: relative; top: .45em; } .RV-Iconized__Container--medium .RV-Iconized__Icon { width: 2em; height: 2em; position: relative; top: .625em; } .RV-Iconized__Container--large .RV-Iconized__Icon { width: 3em; height: 3em; position: relative; top: 1.15573em; } .RV-Iconized__Container--huge .RV-Iconized__Icon { width: 5em; height: 5em; position: relative; top: 2.175em; } .RV-ElementList { display: flex; height: 100%; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; list-style-type: none; } .RV-ElementList--breakPoint { flex-wrap: wrap; } .RV-ElementList--breakPoint * { flex-basis: calc(500px * 999 - 100% * 999); } .RV-ElementList--horizontal { flex-direction: row; } .RV-ElementList--vertical { flex-direction: column; } .RV-ElementList--auto { flex-direction: row; flex-wrap: wrap; } .RV-ElementList__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; } .RV-Menu--vertical .RV-Menu__List { flex-direction: column; width: 100%; } .RV-Menu--horizontal .RV-Menu__List { flex-direction: row; flex-wrap: wrap; } .RV-Menu--horizontal .RV-Menu__List * { flex-basis: calc(500px * 999 - 100% * 999); } .RV-Menu--spaced .RV-Menu__List { gap: 25px; } .RV-Menu__List { display: flex; height: 100%; display: flex; height: 100%; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; list-style-type: none; padding: 10px; } .RV-Menu__List--breakPoint { flex-wrap: wrap; } .RV-Menu__List--breakPoint * { flex-basis: calc(500px * 999 - 100% * 999); } .RV-Menu__List--horizontal { flex-direction: row; } .RV-Menu__List--vertical { flex-direction: column; } .RV-Menu__List--auto { flex-direction: row; flex-wrap: wrap; } .RV-Menu__List__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; } .RV-Menu__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; display: grid; } .RV-Menu__Item--top { display: grid; align-content: start; } .RV-Menu__Item--bottom { display: grid; align-content: end; } .RV-Menu__Item--left { display: grid; justify-content: start; } .RV-Menu__Item--right { display: grid; justify-content: end; } .RV-Menu__Item--horizontalCenter { display: grid; justify-content: center; } .RV-Menu__Item--verticalCenter { display: grid; align-items: center; } .RV-Menu__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-Menu__Item--narrower { flex-grow: 1; flex-shrink: 5; } .RV-Menu__Item--narrow { flex-grow: 2; flex-shrink: 4; } .RV-Menu__Item--wide { flex-grow: 4; flex-shrink: 2; } .RV-Menu__Item--wider { flex-grow: 5; flex-shrink: 1; } .RV-Menu__Item--fixedSize { flex-grow: 0; flex-shrink: 0; width: min-content; flex-basis: 100px; } .RV-Menu__Item--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; width: 50%; } .RV-Menu__Item--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.33%; width: 33.33%; } .RV-Menu__Item--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; } .RV-Menu__Item--content { flex-grow: 0; flex-shrink: 0; width: max-content; flex-basis: max-content; } .RV-Menu__Item .RV-Link { padding: 10px; background-color: beige; display: block; white-space: nowrap; } .RV-ImageGrid__Container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(300px, 1fr); } .RV-ImageGrid__Item { display: grid; } .RV-ImageGrid__Item--top { display: grid; align-content: start; } .RV-ImageGrid__Item--bottom { display: grid; align-content: end; } .RV-ImageGrid__Item--left { display: grid; justify-content: start; } .RV-ImageGrid__Item--right { display: grid; justify-content: end; } .RV-ImageGrid__Item--horizontalCenter { display: grid; justify-content: center; } .RV-ImageGrid__Item--verticalCenter { display: grid; align-items: center; } .RV-ImageGrid__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-ImageGrid__Container { padding: 25px; } .RV-ImageGrid__Container__Container { gap: 25px; } .RV-ImageGrid__Item { display: block; overflow: hidden; } .RV-ImageGrid__Item img { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-ImageGrid__Item p { overflow: hidden; display: block; text-overflow: ellipsis; padding: 0; margin: 0; line-height: 1.21; z-index: -20; position: relative; background-color: white; height: 96.8%; } .RV-ImageGrid__Item--fade--fade:after { background: linear-gradient(180deg, rgba(255, 255, 255, 0), white); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: -10; } .RV-ImageGrid__Item--ellipsis--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: white; padding: 0 2px; } .RV-ImageGrid__Item--square { width: 100%; padding-top: 100%; position: relative; } .RV-ImageGrid__Item--square img, .RV-ImageGrid__Item--square div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ImageGrid__Item--circle { width: 100%; padding-top: 100%; position: relative; border-radius: 50%; } .RV-ImageGrid__Item--circle img, .RV-ImageGrid__Item--circle div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ImageGrid__Item--1to2 { width: 100%; padding-top: 200%; position: relative; } .RV-ImageGrid__Item--1to2 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ImageGrid__Item--2to1 { width: 100%; padding-top: 50%; position: relative; } .RV-ImageGrid__Item--2to1 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ImageGrid__Item--4to3 { width: 100%; padding-top: 75%; position: relative; } .RV-ImageGrid__Item--4to3 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ImageGrid__Item--16to9 { width: 100%; padding-top: 56.25%; position: relative; } .RV-ImageGrid__Item--16to9 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ImageGrid__Item--3to2 { width: 100%; padding-top: 66.66667%; position: relative; } .RV-ImageGrid__Item--3to2 img { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ImageGrid__Item--left img { object-position: left; } .RV-ImageGrid__Item--center img { object-position: center; } .RV-ImageGrid__Item--top img { object-position: top; } .RV-ImageGrid__Item--bottom img { object-position: bottom; } .RV-ImageGrid__Item--center img { object-position: center; } .RV-ImageGrid__Item img { object-position: center; } .RV-ImageGrid__Item--square { height: 0; width: 100%; padding-bottom: 100%; } .RV-ImageGrid__Item--square * { height: initial; }