/* #region BREAKOUT BASE ##################################### */
.breakout {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
background: #efefef;
padding: 4rem 2rem;
margin: 4rem -50vw !important;
}
.breakout>* {
margin: 0 auto;
}
@media (min-width: 576px) {
.breakout>* {
max-width: 540px;
}
}
@media (min-width: 768px) {
.breakout>* {
max-width: 720px;
}
}
@media (max-width: 991.98px) {
.breakout>* {
max-width: 100%;
}
}
@media (min-width: 992px) {
.breakout>* {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.breakout>* {
max-width: 1140px;
}
}
.breakout>h2 {
margin-bottom: 2rem;
}
@media (min-width: 576px) {
.breakout>h2 {
padding-right: 15px;
padding-left: 15px;
}
}
.breakout>.inner {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 576px) {
.breakout>.tabbed-content {
padding-left: 15px;
padding-right: 15px;
}
}
.breakout .tabbed-content section {
background: #fff;
margin-top: 1px !important;
}
.breakout>.textfragment {
max-width: 510px;
}
@media (min-width: 768px) {
.breakout>.textfragment {
max-width: 690px;
}
}
@media (min-width: 992px) {
.breakout>.textfragment {
max-width: 930px;
}
}
@media (min-width: 1200px) {
.breakout>.textfragment {
max-width: 1110px;
}
}
/* #endregion */

/* #region MARGINS ############################################### */
.breakout-margin {
margin-top: clamp(4rem, 12vmin, 15rem) !important;
padding-top: clamp(2rem, 8vmin, 8rem) !important;
margin-bottom: clamp(4rem, 12vmin, 15rem) !important;
}
.breakout-margin-negative {
margin-top: clamp(-12rem, -12vmin, -15rem) !important;
padding-top: clamp(2rem, 8vmin, 8rem) !important;
margin-bottom: clamp(-4rem, -12vmin, -15rem) !important;
}
.breakout-margin-none {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* #endregion */

/* #region BACKGROUND ############################################ */
.breakout-blue-light {
background: #e6edf780 !important;
background: color-mix(in srgb, #0046ad 5%, white) !important;
}
.breakout-green-light {
background: #a8dde380 !important;
background: color-mix(in srgb, #45ac92 40%, white) !important;
background: #45ac9280 !important;
background: color-mix(in srgb, #45ac92 20%, white) !important;
}
.breakout-blue-light .teaser-standard{
background: #e6edf7 !important;
}
.breakout-black{
color: hsl(0 0% 80% / 1);
background: hsl(0 0% 0% / 1);
}
.breakout-black *{
color: inherit !important;
}
.breakout-grey-dark {
background: #cfcfcf;
}
.breakout-grey-light {
background-color: #f7f7f7;
}
.breakout-white{
background-color: #fff;
}
.breakout-grey-light .image-richtext-container,
.breakout-grey-light .image-richtext-container:not(:hover) [data-ui-modal-trigger=image]:after {
background: #fff;
}
/* #endregion */

/* #region FOOTER ################################################ */
.breakout-footer {
/* margin-bottom: -6rem !important; */
margin-bottom: 0 !important;
}
.breakout-footer.tdk {
background: #e6edf7;
}
.breakout-footer.tdk .teaser-standard {
display: flex;
}
.breakout-footer.tdk .teaser-standard:hover {
background-color: #f7f7f7;
}
/* one or two items */
.breakout-footer.tdk>.elementlist>div:only-child .image-column,
.breakout-footer.tdk>.elementlist>div:first-child:nth-last-child(2) .image-column,
.breakout-footer.tdk>.elementlist>div:first-child:nth-last-child(2)~div .image-column {
flex: 0 0 25%;
max-width: 25%;
}
.breakout-footer.tdk>.elementlist>div:only-child .text-column,
.breakout-footer.tdk>.elementlist>div:first-child:nth-last-child(2) .text-column,
.breakout-footer.tdk>.elementlist>div:first-child:nth-last-child(2)~div .text-column {
flex: 0 0 75%;
max-width: 75%;
}
/* two items */
.breakout-footer.tdk>.elementlist>div:first-child:nth-last-child(2) .image-column img,
.breakout-footer.tdk>.elementlist>div:first-child:nth-last-child(2)~div .image-column img {
height: 100%;
object-fit: cover;
aspect-ratio: 4/3;
}
/* #endregion */

/* #region CONTENT FULL WIDTH #################################### */
.breakout-fluid {
overflow: hidden;
padding-left: 0;
padding-right: 0;
}
.breakout-fluid>h2 {
margin-bottom: 2rem;
}
.breakout-fluid>.inner {
padding-left: 15px;
padding-right: 15px;
}
.breakout-fluid>.elementlist {
width: 100vw;
max-width: none;
gap: 2rem;
align-items: center;
padding: 0;
}
.breakout-fluid>.elementlist>div {
/* flex: 1; */
}
/* #endregion */

/* #region BG IMAGE ############################################## */
.breakout-image {
width: 100vw;
max-height: 30vmax;
max-height: 400px;
overflow: hidden;
position: relative;
left: 50%;
right: 50%;
background: #efefef;
padding: 0;
margin: 4rem -50vw !important;
display: flex;
}
.breakout-image-slim {
width: 120%;
max-height: 300px;
margin: 4rem -60% !important;
}
.breakout-image>* {
flex: 1;
align-self: center;
}
.breakout-image-bg {
overflow: hidden;
min-height: 40vmin;
text-align: center;
display: flex;
align-items: center;
}
.breakout-image-bg>.textfragment:first-child div {
position: static;
}
.breakout-image-bg>.textfragment:first-child .image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
max-width: none;
opacity: 0.4;
}
.breakout-image-bg>.textfragment:first-child .image-wrapper img {
object-fit: cover;
width: 100%;
height: 100%;
}
.breakout-image-bg>.elementlist {
flex: 1;
}
.breakout-image-bg h2 {
font-size: 3rem;
text-align: center;
}
@media (min-width: 1200px) {
.breakout-overlap+div {
position: relative;
background-color: #fffe;
padding: 3rem;
margin: calc(-20rem - 4rem) -3rem 0;
}
}
/* #endregion */

/* #region IMAGE COLLECTION ###################################### */
.breakout-image-collection {
position: relative;
width: 100vw;
overflow: hidden;
position: relative;
left: 50%;
right: 50%;
background: #444;
padding: 0;
margin: clamp(4rem, 10vh, 8rem) -50vw;
}
@media (min-width: 576px) {
.breakout-image-collection {
height: clamp(200px, 20vh, 400px);
}
}
.breakout-image-collection>div.textfragment:first-child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .5;
}
.breakout-image-collection>div.textfragment:first-child div {
height: 100% !important;
}
.breakout-image-collection>div.textfragment:first-child img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (min-width: 576px) {
.breakout-image-collection>div.textfragment:first-child img {
height: clamp(200px, 20vh, 400px);
}
}
.breakout-image-collection>.elementlist {
display: flex;
align-items: center;
width: 100%;
height: 100%;
margin: 0 auto;
}
@media (min-width: 576px) {
.breakout-image-collection>.elementlist {
flex-wrap: nowrap;
max-width: 540px;
}
}
@media (min-width: 768px) {
.breakout-image-collection>.elementlist {
max-width: 720px;
}
}
@media (max-width: 991.98px) {
.breakout-image-collection>.elementlist {
max-width: 100%;
}
}
@media (min-width: 992px) {
.breakout-image-collection>.elementlist {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.breakout-image-collection>.elementlist {
max-width: 1140px;
}
}
.breakout-image-collection>.elementlist>div {
flex: 1;
text-align: center;
padding: 1rem;
}
.breakout-image-collection .textfragment {
color: #fff;
margin: 0;
}
.breakout-image-collection .textfragment p {
font-size: 1.8rem;
}
.breakout-image-collection .textfragment h3,
.breakout-image-collection .textfragment .text-size-2 {
font-size: 7rem;
font-weight: bold;
}
/* #endregion */

/* #region IMAGE FADE ############################################ */
.breakout-image-fade {
z-index: 1029;
padding: 0;
}
.breakout-image-fade .cycle-slide {
inset: 0;
max-width: unset;
}
/* #endregion */