.full-page-reference {
  background:#F6F1E6;
}

.full-page-reference-item-comparison__main img-comparison-slider {
  width:100%;
}

.full-page-reference-item-comparison__main img-comparison-slider img {
  width:100%;
  height:auto;
}

.full-page-reference-item-comparison__bot {
  margin-top:1.5rem; 
}

body,
.full-page-reference,
.full-page-reference__item,
.full-page-reference__wrapper {
}
.full-page-reference {
  position: relative;
  scroll-behavior: smooth; 
}

.full-page-reference__wrapper/*,
.full-page-reference */{
  min-block-size: 100%;
}

.dark-overlay {
  background-color: rgba(22, 56, 90, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.full-page-reference__item {
  {#background: var(--color-cream);#}
  background: #F6F1E6;
  position: relative;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  scroll-snap-align: start;
  padding: 4rem 0;
  /*border: 2px solid red;*/
}

.full-page-refererence-item__bg {
  position: absolute;
  background-size: cover !important; 
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 50%;
  top: 0;
  bottom: 0;
}

.full-page-refererence-item__bg.full-page-reference-item__bg--contain {
  background-size:contain !important; 
}

.full-page-refererence-item__bg.full-page-reference-item__bg--full {
  left: 0;
  right: 0;
  width: 100%;
}

.full-page-reference__item--image-right .full-page-reference-item__bg--image,
.full-page-reference__item--image-left .full-page-reference-item__bg--color {
  right: 0;
}

.full-page-reference__item--image-left .full-page-reference-item__bg--image,
.full-page-reference__item--image-right .full-page-reference-item__bg--color {
  left: 0;
}

.full-page-reference__item--image-left .full-page-reference-item__inner {
  max-width: 48%;
  margin-left: auto;
  padding-right: 2rem;
}

.full-page-reference__item--image-right .full-page-reference-item__inner {
  max-width: 48%;
  padding-left: 2rem;
}

.full-page-reference-item__content {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.full-page-reference-item__content:not(.full-page-reference-item__content--bottom-right) {
  min-height: 700px;
}

.full-page-reference-item__content.full-page-reference-item__content--bottom-right {
  position: absolute;
  bottom: 0;
  width:100%;
}

.full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner {
  padding: 0;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text {
  background: var(--color-noir);
  -webkit-box-flex: 0;
  -ms-flex: 0 1 50%;
  flex: 0 1 50%;
  position: relative;
  padding: 3rem 3rem 1.5rem;
}

.full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text > * {
  color: var(--color-cream);
}

.full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text h4 {
  line-height: 1.3;
}

.full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text:before,
.full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text:after {
  content: "";
  position: absolute;
  background: var(--color-noir);
  height: 150%;
  width: 62px;
  top: 0px;
}

.full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text:before {
  -webkit-transform: skew(-5deg, 0deg);
  -ms-transform: skew(-5deg, 0deg);
  transform: skew(-5deg, 0deg);
  left: -36px;
}

.full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text:after {
  -webkit-transform: skew(5deg, 0deg);
  -ms-transform: skew(5deg, 0deg);
  transform: skew(5deg, 0deg);
  right: -36px;
}

.full-page-reference-item__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  padding: 0 2.5rem;
}

.full-page-reference-item__inner.full-page-reference-item__inner--top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.full-page-reference-item__inner.full-page-reference-item__inner--center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.full-page-reference-item__inner.full-page-reference-item__inner--bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.full-page-reference-item-inner__logo {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  position: absolute;
  margin-bottom: 0;
  bottom: 1.5rem;
  z-index: 2;
}

.full-page-reference-item-inner__logo img {
  height: 80px !important;
  margin: 0 auto;
  width: auto !important;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.full-page-reference-item-inner__text {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
}

.full-page-reference-item-inner__text ul,
.full-page-reference-item-inner__text ol {
}

.full-page-reference-item-inner__text--cta {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 45%;
  flex: 0 1 45%;
  margin: 0 auto;
  text-align: center;
  padding: 3rem;
}

.full-page-reference-item__content--text-and-image .full-page-reference-item-inner__text,
.full-page-reference-item__content--text-and-text .full-page-reference-item-inner__text {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 45%;
  flex: 0 1 45%;
}

.full-page-reference-item__content--text-and-image .full-page-reference-item-inner__image {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 45%;
  flex: 0 1 45%;
}

.full-page-reference-item__content--text-and-image .full-page-reference-item-inner__image img {
  margin: 0 auto;
  width: 100% !important;
  height: auto !important;
}

.full-page-reference__pagination .full-page-reference-pagination__bullet {
  padding: 0;
  color: transparent;
  border: 0;
  background: #91ebc7;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
  outline: none;
  opacity: 1;
}

.full-page-reference__pagination .full-page-reference-pagination__bullet:not(:last-child) {
  margin-right: 0.5rem !important;
}

.full-page-reference__pagination .full-page-reference-pagination__bullet:hover,
.full-page-reference__pagination .full-page-reference-pagination__bullet.full-page-reference-pagination__bullet-active {
  height: 23px;
  width: 23px;
}

.full-page-reference__bottom {
  position: fixed;
  bottom: 1.5rem;
  z-index: 1;
  left: 3rem;
  right: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.full-page-reference__back-to-listing {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.full-page-reference__back-to-listing a {
  color: #fff;
}

.full-page-reference__back-to-listing.scrolling .first-slide__listing {
  display: none !important; 
}
.full-page-reference__back-to-listing.scrolling .other__listing {
  display: block !important;
}

.full-page-reference__pagination {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

.full-page-reference__previous-slide,
.full-page-reference__next-slide {
  position: absolute;
  top: calc(50% - 44px);
  z-index: 1;
  opacity: 1;
}

.swiper-button-disabled {
  opacity: 0.25;
}

.full-page-reference__previous-slide img,
.full-page-reference__next-slide img {
  max-width: 70px;
}

.full-page-reference__previous-slide {
  left: 1rem;
}

.full-page-reference__previous-slide img {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.full-page-reference__next-slide {
  right: 1rem;
}

.full-page-reference-item__bg--circle {
  position: absolute;
  width: 472px;
  height: 472px;
  border-radius: 50%;
  top: 5%;
}

.full-page-reference-item__bg--triangle {
  width: 436px;
  height: 436px;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  left: -218px;
  top: 200px;
}

.full-page-reference-item-inner__statistics {
  background: url(https://www.valve.fi/hubfs/Newsletter-2023/graphics/arrow-big-yellow.png);
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50%;
  height: 350px;
  width: 350px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: auto;
}

.full-page-reference-item-inner__statistics li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 !important;
}

.full-page-reference-item-inner__statistics li:before {
  display: none !important;
}

.full-page-reference-item-inner__statistics li > * {
}

.full-page-reference-item-inner__statistics li:not(:last-child) {
  margin-bottom: 1rem;
}

.full-page-reference-item-inner__statistics .stat-big {
  font-weight:700; 
  white-space: nowrap;
}

.full-page-reference-item-inner__big-statistics li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 !important;
}

.full-page-reference-item-inner__big-statistics li:before {
  display: none !important;
}

.full-page-reference-item-inner__big-statistics li:not(:last-child) {
  margin-bottom: 2.5rem;
}

.full-page-reference-item-inner__big-statistics .stat-big {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 45%;
  flex: 0 1 45%; /*35%*/
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/*.stat-big {
font-size: 100px;
font-weight: 500;
line-height: 100px; 
}*/

.full-page-reference-item-inner__big-statistics .stat-small {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0 0 0 2rem;
}

.stat-small {
  /*font-size: 22px;
  line-height: 30px;
  font-weight: 400;*/
  margin-left: 1rem;
}

.listing__button {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  visibility: visible;
}

.listing__button img {
  max-width: 41px;
}

.listing__button span {
  line-height: 1;
}

.not-first-slide .first-slide__listing {

}

.other__listing {
  display: none;
}

.not-first-slide .other__listing {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Video BG */



.video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.video-wrapper--contain.video-wrapper video {
  -o-object-fit:contain;
  object-fit:contain; 
}

{# Mobile background image styles #}
@media screen and (min-width:1025px) {
  .full-page-refererence-item__bg--mobile {
    display:none; 
  }
}

@media screen and (max-width:1024px) {
  .full-page-refererence-item__bg--desktop {
    display:none; 
  }
}

@media screen and (min-width: 1380px) {
  .full-page-reference__item:first-child .full-page-reference-item__content:not(.full-page-reference-item__content--text-and-image) .full-page-reference-item__inner {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .full-page-reference__item:first-child .full-page-reference-item-inner__text {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 45%;
    flex: 0 1 45%;
  }
}



@media screen and (max-width: 1670px) {
  .full-page-reference__previous-slide img,
  .full-page-reference__next-slide img {
    max-width: 35px;
  }
}

@media screen and (max-width: 1279px) {
}

@media screen and (max-width: 767px) {

  .full-page-reference__item--full-bg.full-page-reference__item--only-video {
    min-height: auto;
    aspect-ratio: 16/9; 
  }

  .full-page-reference__item--full-bg.full-page-reference__item--only-video .video-wrapper {
    height: auto;
    aspect-ratio: 16/9; 
  }

  .full-page-reference__item--full-bg.full-page-reference__item--bg-no-content {
    height: auto;
    aspect-ratio: 16/9; 
    min-height:auto;
  }

  .full-page-reference-item-inner__text--cta {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    padding: 3rem 1.5rem;
  }

  .full-page-reference-item-inner__big-statistics li {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  .full-page-reference-item__content:not(.full-page-reference-item__content--bottom-right) {
    height: auto;
    min-height:auto;
    padding-top:1.5rem;
    -webkit-box-ordinal-group:3;
    -ms-flex-order:2;
    order:2;
  }

  .full-page-reference-item__bg--image {
    position: relative;
    width: 100%;
    min-height: 50vh;
    z-index: 2;
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1;
  }

  .full-page-reference__item--half-bg .full-page-reference-item__bg--image .video-wrapper {
    height:auto;
    aspect-ratio:1/1;
  }

  .full-page-reference-item__inner {
    padding: 0;
  }

  .full-page-reference {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .full-page-reference__item {
    padding:0;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
  }

  .full-page-reference__item:first-child,
  .full-page-reference__item--full-bg {
    /*min-height: 100vh;*/
  }

  .full-page-reference__item--full-bg {
    min-height:auto;
    margin:3rem 0;
  }

  .full-page-reference__item:last-child {
    margin-bottom:0; 
  }

  .full-page-reference-item__bg--circle {
    height:236px;
    width:236px;
  }

  .full-page-reference__bottom {
    left: 0.5rem;
    bottom: 0.5rem;
    right: 0.5rem;
    display: none;
  }

  .full-page-reference__pagination {
    display: none;
  }

  .full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    padding: 1.5rem;
  }

  .full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text:before,
  .full-page-reference-item__content.full-page-reference-item__content--bottom-right .full-page-reference-item__inner .full-page-reference-item-inner__text:after {
    display: none;
  }

  .full-page-reference__next-slide,
  .full-page-reference__previous-slide {
    display: none;
  }

  .full-page-reference-item__bg--color {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }

  .full-page-reference__item--image-right .full-page-reference-item__inner {
    max-width: 100%;
    padding-left: 0;
  }

  .full-page-reference__item--image-left .full-page-reference-item__inner {
    max-width: 100%;
    padding-right: 0;
  }

  .full-page-reference__container {
    min-height: 100vh;
    height: auto;
  }

  .full-page-reference-item__content--text-and-image .full-page-reference-item-inner__image,
  .full-page-reference-item__content--text-and-image .full-page-reference-item-inner__text {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
  }

  .full-page-reference-item-inner__image {
    display: none;
  }

  .full-page-reference-item-inner__big-statistics .stat-big {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    text-align: left;
    margin-bottom: 0.25rem;
  }

  .full-page-reference-item-inner__big-statistics .stat-small {
    margin-left: 0;
    margin-bottom: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
  }

  .full-page-reference-item-inner__logo {
    bottom: 3rem;
  }

  .full-page-reference-item__content.full-page-reference-item__content--bottom-right {
    padding: 0;
  }

  .full-page-reference-item__content--text-and-text .full-page-reference-item-inner__text {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
  }
}

.full-page-reference__back-to-link {
  text-decoration: none !important;
}

@media screen and (max-width:380px) {
  .full-page-reference__item:first-child,
  .full-page-reference__item--full-bg {
    min-height: 130vh;
  } 
}