/* @group Wellen Life
------------------------------------ */


/* @group Grid
------------------------------------ */

.video-box,
.img-box { background: none; }

@media only screen
and (min-width : 0)
and (max-width : 960px) {
  [class^="col-"] { padding: 0 3rem; }
}
/* @end
------------------------------------ */



/* @group Main Header
------------------------------------ */
.main-header .row { height: 53.3em; position: relative; }
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .main-header .col-36-36 { padding: 17.2em 0 0; }
}
/* @end
------------------------------------ */



/* @group Slider Aside Text
------------------------------------ */
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .slider-aside-text { margin-bottom: 10em; }
}
/* @end
------------------------------------ */


/* @group Overview
------------------------------------ */
.overview { margin-bottom: 10em; position: relative; }
.overview::after { content: ''; width: calc(50% + 6rem); height: 26.4em; background: url('../../img/layout/wellen-life/overview-background.png') no-repeat center center; background-size: cover; position: absolute; pointer-events: none; top: -3em; right: 0; }

.overview .image { margin-bottom: 5em; z-index: 1; }
.overview .image .img-box { height: 26.4em; }

.overview .text h3 { text-transform: uppercase; font-weight: 700; font-size: 2em; line-height: 1.6em; letter-spacing: .1em; color: var(--rose-gold); margin: 0 0 1em; }
.overview .text h2 { text-transform: uppercase; font-weight: 700; font-size: 3em; line-height: 1em; letter-spacing: .0667em; color: var(--navy-blue); margin: 0 0 1em; }
.overview .text p { font-weight: 500; font-size: 1.6em; line-height: 1.5em; letter-spacing: .125em; color: var(--navy-blue); margin: 0 0 4rem; }
.overview .text .bttn-outlined { margin: 0 0 2rem; }
.overview .text .bttn-outlined:last-child { margin: 0; }
@media only screen
and (min-width : 961px) {

  .overview { margin-bottom: 15rem; }
  .overview::after { height: auto; width: 47.22%; top: -8.4rem; bottom: 5.6rem; }

  .overview .image { margin-bottom: 0; }
  .overview .image .img-box { height: 77rem; }

  .overview .text h2 { font-size: 4.5em; letter-spacing: .044em; }
  .overview .text p { font-size: 2em; line-height: 1.35em; letter-spacing: .1em; }

}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end
------------------------------------ */



/* @group Banner Image
------------------------------------ */
.banner-image { position: relative; margin-bottom: 10em; }
.banner-image .background { z-index: -1; background: unset; }
.banner-image .image { height: 44em; padding: 3em; background: unset; }
@media only screen
and (min-width : 961px){
  .banner-image { margin-bottom: 15rem; }
  .banner-image .image { height: 70rem; padding: 5rem 0; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end
------------------------------------ */



/* @group Outdoor Rentals
------------------------------------ */

.outdoor-rentals { margin-bottom: 15em; position: relative; } 

.outdoor-rentals .background .img-box { position: absolute; z-index: -1; left: 0; bottom: 0; padding: 0; background-color: unset; height: 56em; pointer-events: none; }

.outdoor-rentals .text { margin-bottom: 10em; }
.outdoor-rentals .text h3 { text-transform: uppercase; font-weight: 700; font-size: 2em; line-height: 1.6em; letter-spacing: .1em; color: var(--rose-gold); margin: 0 0 1em; }
.outdoor-rentals .text h2 { text-transform: uppercase; font-weight: 700; font-size: 3em; line-height: 1em; letter-spacing: .0667em; color: var(--navy-blue); margin: 0 0 1em; }
.outdoor-rentals .text p { font-weight: 500; font-size: 1.6em; line-height: 1.5em; letter-spacing: .125em; color: var(--navy-blue); margin: 0 0 1.875em; }
.outdoor-rentals .text .bttn-outlined { min-width: 15.8em; text-align: center; }

.outdoor-rentals .images { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 7.6rem; }
.outdoor-rentals .images .outer-image { flex: 0 1 calc(50% - 3.8em); margin: 0 0 3em; text-align: center; }
.outdoor-rentals .images .img-box { height: 18.4em; margin: 0 0 3em; }
.outdoor-rentals .images p { text-transform: uppercase; font-weight: 700; font-size: 1.6em; line-height: 1em; letter-spacing: .125em; color: var(--navy-blue); }


@media only screen
and (min-width : 961px){

  .outdoor-rentals { margin-bottom: 35.5rem; }

  .outdoor-rentals .background .img-box { left: unset; right: 0; bottom: -25rem; height: 81.5rem; }

  .outdoor-rentals .text { margin-bottom: 0; }
  .outdoor-rentals .text h2 { font-size: 4.5em; letter-spacing: .044em; }
  .outdoor-rentals .text p { font-size: 2em; line-height: 1.35em; letter-spacing: .1em; }
  
  .outdoor-rentals .images { column-gap: 3.1rem; }
  .outdoor-rentals .images .outer-image { flex: 0 1 calc(33% - 1.8rem); margin: 0; }
  .outdoor-rentals .images .outer-image.second { position: relative; top: 17rem; }
  .outdoor-rentals .images .img-box { height: 43rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .outdoor-rentals .background .img-box { max-width: 50%; }
  .outdoor-rentals .background .img-box::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.50) }
}
/* @end
------------------------------------ */



/* @group Wellen Sections
------------------------------------ */

.wellen-sections { position: relative; background: url('../../img/layout/wellen-life/sections-background.png'), none no-repeat center center; background-size: cover; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25) inset; padding: 5em 0 2em; margin-bottom: 10em; }

.wellen-sections article { margin-bottom: 3em; }

.wellen-sections .img-box { box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.07); position: absolute; inset: 0 3rem; pointer-events: none; }
.wellen-sections .img-box::before { content: ''; background: rgba(30, 47, 82, 0.85); position: absolute; inset: 0; }

.wellen-sections .text-box { position: relative; z-index: 1; text-align: center; color: var(--white); padding: 3em 5em; min-height: 23.7em; }
.wellen-sections .text-box h2 { text-transform: uppercase; font-weight: 700; font-size: 3em; line-height: 1em; letter-spacing: .0667em; margin: 0 0 1em; }
.wellen-sections .text-box p { font-size: 1.6em; line-height: 1.5em; letter-spacing: .125em; margin: 0 0 1.875em; }
.wellen-sections .text-box .bttn-outlined { --bg-color: transparent; min-width: 12.3em; text-align: center; margin: 0 auto; }
.wellen-sections .text-box .bttn-outlined:not(:hover) { color: var(--white); }

@media only screen
and (min-width : 961px) {

  .wellen-sections { padding: 10rem 0 5rem; margin-bottom: 23rem; }

  .wellen-sections article { height: 45rem; margin-bottom: 5rem; }
  .wellen-sections article.first { height: 50.7rem; } 
  .wellen-sections article.first .img-box::after { content: ''; position: absolute; pointer-events: none; left: 0; bottom: 0; background: url('../../img/layout/wellen-life/sections-first-overlay.png') no-repeat left bottom; background-size: contain; width: 100%; height: 100%; }

  .wellen-sections .img-box { inset: 0; } 

  .wellen-sections .text-box { padding: 6rem; min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .wellen-sections .text-box h2 { font-size: 4.5em; letter-spacing: .044em; }
  .wellen-sections .text-box p { font-size: 2em; line-height: 1.35em; letter-spacing: .1em; }

}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .wellen-sections::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(255, 255, 255, 0.20); }

}
/* @end
------------------------------------ */



/* @group Wellen Living
------------------------------------ */

.wellen-living { position: relative; margin-bottom: 10em; }

.wellen-living .image { margin-bottom: 10.7em; }
.wellen-living .image .img-box { background: unset; height: auto; width: 100%; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.07); }
.wellen-living .image .img-box img { object-fit: contain; }
.wellen-living .image .img-box .hover { position: absolute; background-color: rgba(30, 47, 82, 0.85); inset: 0; display: flex; justify-content: center; align-items: center; transition: all .3s ease; opacity: 0; pointer-events: none; }
.wellen-living .image .img-box .hover .bttn-outlined { --bg-color: transparent; }
.wellen-living .image .img-box .hover .bttn-outlined:not(:hover) { color: var(--white); }
.wellen-living .image .img-box:hover .hover { opacity: 1; pointer-events: all; }

.wellen-living .text h3 { text-transform: uppercase; font-weight: 700; font-size: 2em; line-height: 1.6em; letter-spacing: .1em; margin: 0 0 1em; color: var(--rose-gold); }
.wellen-living .text h2 { text-transform: uppercase; font-weight: 700; font-size: 3em; line-height: 1em; letter-spacing: .0667em; margin: 0 0 1em; color: var(--navy-blue); }
.wellen-living .text p { font-weight: 500; font-size: 1.6em; line-height: 1.5em; letter-spacing: .125em; margin: 0 0 1.875em; color: var(--navy-blue); }

@media only screen
and (min-width : 961px) {

  .wellen-living { margin-bottom: 15rem; }
  .wellen-living::after { content: ''; position: absolute; z-index: -1; pointer-events: none; top: -8rem; bottom: 8rem; right: 0; background: url('../../img/layout/wellen-life/wellen-living-background.png') no-repeat right center;background-size: auto 100%; width: 47.22%; height: auto; }

  .wellen-living .image { margin-bottom: 0; }
  .wellen-living .image .img-box { height: auto; width: 100%; }
  .wellen-living .image .img-box .hover .bttn-outlined { min-width: 24.5rem; text-align: center; }

  .wellen-living .text h2 { font-size: 4.5em; letter-spacing: .044em; }
  .wellen-living .text p { font-size: 2em; line-height: 1.35em; letter-spacing: .1em; }

}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {

  .wellen-living .image::after { content: ''; position: absolute; z-index: -1; pointer-events: none; top: 3em; bottom: -5.7rem; right: 0; background: url('../../img/layout/wellen-life/wellen-living-background-mobile.png') no-repeat right center; background-size: auto 100%; width: 50%; height: auto; }

  .wellen-living .text { padding-right: 9rem; }

}
/* @end
------------------------------------ */



/* @group Event Space
------------------------------------ */

.event-space, 
.event-space > .row { position: relative; }
.event-space>.row .back {
    z-index: -2;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: var(--bg);
    width: 74%;
    height: 86rem;
    left: 13%;
    top: 72rem;
}
.event-space .row-background aside {
  height: 100%;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  width: 32rem;
  height: 48.1rem;
  position: absolute;
  top: 0;
  left: 0;
}

.event-space .text h3 { text-transform: uppercase; font-weight: 700; font-size: 2em; line-height: 1.6em; letter-spacing: .1em; margin: 0 0 1em; color: var(--rose-gold); }
.event-space .text h2 { text-transform: uppercase; font-weight: 700; font-size: 3em; line-height: 1em; letter-spacing: .0667em; margin: 0 0 1em; color: var(--navy-blue); }
.event-space .text p { font-weight: 500; font-size: 1.6em; line-height: 1.5em; letter-spacing: .125em; margin: 0 0 1.875em; color: var(--navy-blue); }
.event-space .text .bttn-outlined:not(:last-of-type) { margin: 0 0 1.2rem; }

@media only screen
and (min-width : 961px) {

  .event-space>.row .back {
    z-index: -2;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: var(--bg);
    width: 25%;
    height: 50rem;
    left: 32%;
    top: 8rem;
  }

  .event-space .row-first { margin-bottom: 63.2rem; }

  .event-space .row-last .first { top: -46.6rem; }
  .event-space .row-last .second { left: -8.333%; }

  .event-space .text h2 { font-size: 4.5em; letter-spacing: .044em; margin: 0 0 3rem; }
  .event-space .text p { font-size: 2em; line-height: 1.35em; letter-spacing: .1em; }
  
  .event-space .image.first .img-box { height: 72.2rem; }
  .event-space .image.second .img-box { height: 51.1rem; }

}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {

  .event-space .row-first .text { margin-bottom: 5em; }
  .event-space .row-first .first { max-width: calc(50% + 6rem); margin-left: auto; margin-bottom: 12em;} 
  .event-space .row-first .first .img-box { height: 32.7em; }

  .event-space .row-last .first { max-width: 58%; margin-bottom: 13em; }
  .event-space .row-last .first .img-box { height: 26.4em; }
  .event-space .row-last .second { margin-bottom: 5em; }
  .event-space .row-last .second::after { content: ''; background: url('../../img/layout/wellen-life/event-space-background.png') no-repeat center center; background-size: cover; position: absolute; z-index: -1; pointer-events: none; right: 0; top: -3em; bottom: 3em; width: calc(50% + 6em); }
  .event-space .row-last .second .img-box { height: 26.4em; }
  .event-space .row-last .text { padding-left: 9em; }

}
/* @end
------------------------------------ */

/* @group sub-menu
------------------------------------ */

.page-template-wellen-life .mobile-toggle {
    visibility: visible;
}
.page-template-wellen-life:not(.scrollhidden) .open-wellen-life .sub-menu {
    translate: 0 var(--offset);
}
@media only screen
and (min-width : 961px) {
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}

/* @end */

/* @group Example
------------------------------------ */
.iframe-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s, visibility .7s;
}
.iframe-popup .row {
  height: 100%;
}
.iframe-popup .col-12-12 {
  height: calc(100vh - 12rem);
  top: 1rem;
}
.show-popup.iframe-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.iframe-popup__box {
  position: relative;
}
.iframe-popup iframe {
  width: 100%;
  height: 100%;
}
.close-video {
  display: inline-block;
  color: #ffffff;
  position: absolute;
  top: -3rem;
  right: 0rem;
  width: 2rem;
  height: 2rem;
}
.close-video i {
  font-size: 2rem;
  color: var(--secondary-black);
  pointer-events: none;
}
@media only screen
and (min-width : 961px) {
  .iframe-popup .row {
      max-width: calc(100% - 6rem);
      margin: 0 3rem;
  }
}
@media only screen
and (max-width : 960px) {
  .iframe-popup .col-12-12 {
      max-height: 70rem;
      max-width: calc(100% - 6rem);
      margin: 0 auto;
      padding: 0 .25rem;
  }
}

/* @end */