/* JUMBO SLIDER */
.jumbo-slider-wrapper { height: 30vw; }
.jumbo-slide.swiper-slide  { min-height: 370px; height: 30vw; max-height: 500px; position: relative !important; }
.xs-editmode.preview .jumbo-slider-wrapper,
.xs-editmode.preview .jumbo-slide.swiper-slide  { height: auto; }

.jumbo-slide          { position: relative; width: 100%; max-height: 550px; height: 35vw; }
.jumbo-circle         { position: absolute; top: 100%; left: 50%; z-index: 1; width: 1px; height: 1px; background: url('/images/bol.png') 0 0/100% 100% no-repeat; image-rendering: optimizeQuality; /*background: #ded5bb; border-radius: 50%;*/ margin: 0 auto; opacity: 0.7; }

.jumbo-circle-small   { position: absolute; width: 1px; height: 1px; background: url('/images/bol.png') 0 0/100% 100% no-repeat; margin: 0 auto; image-rendering: optimizeQuality; }

/* Dit is een pixel container van 1x1 pixel waar het boek in zit. */ 
/* .jumbo-slide .jumbo-circle-books    { position: absolute; top: 50%; left: 50%; z-index: 5; width: 1px; height: 1px; background-color: lime; 
  transition-delay: 1s; transform-origin: center center;
  -webkit-transition: transform 300ms ease-in-out 1s;
  -moz-transition: transform 300ms ease-in-out 1s;
  -ms-transition: transform 300ms ease-in-out 1s;
  -o-transition: transform 300ms ease-in-out 1s;
  transition: transform 300ms ease-in-out 1s; 
}

.jumbo-circle-books img {
  width: 100%;
  height: 100%;
  object-fit: contain;
} */

.jumbo-slide .jumbo-circle-books {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 400px;        /* echte startmaat */
    height: auto;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center center;
    transition: transform 300ms ease-in-out 1s;
    z-index: 5;
    /* background-color: aqua; */
}

.jumbo-circle-books img {
    width: auto;
    height: auto;
    max-height: 430px;
    display: block;
}

.jumbo-slide.animation-start .jumbo-circle-books {
    transform: translate(-55%, -50%) scale(1.2);
}

/* @media (min-width: 1100px) {
    .jumbo-slide.animation-start .jumbo-circle-books {
        transform: translate(-55%, -50%) scale(1.2);
    }
} */


.jumbo-slide.animation-start .jumbo-circle-small  {
  transform: scale(180,180); 
  transform-origin: center center; 
  opacity: 0.5;
}

.jumbo-slide.animation-start  .jumbo-circle-small.circle1 { transform: scale(180,180); opacity: 0.5; }
.jumbo-slide.animation-start  .jumbo-circle-small.circle2 { transform: scale(160,160); opacity: 0.6; }
.jumbo-slide.animation-start  .jumbo-circle-small.circle3 { transform: scale(130,130); opacity: 0.4; }
.jumbo-slide.animation-start  .jumbo-circle-small.circle4 { transform: scale(110,110); opacity: 1.0; }
.jumbo-slide.animation-start  .jumbo-circle-small.circle5 { transform: scale(95,95); opacity: 0.45; }
.jumbo-slide.animation-start  .jumbo-circle-small.circle6 { transform: scale(80,80); opacity: 0.9; }

@media (min-width: 1600px) { 
  .jumbo-slider-wrapper,
  .slick-slide.jumbo-slide  { height: 500px; }
  .jumbo-slide.animation-start .jumbo-circle-small { transform: scale(120,120); } 
}

@media (max-width: 1200px) { 
  .jumbo-slider-wrapper,
  .slick-slide.jumbo-slide  { height: 45vw; }
  .xs-editmode.preview .jumbo-slider-wrapper,
  .xs-editmode.preview .slick-slide.jumbo-slide  { height: auto; }
  .jumbo-slide.animation-start .jumbo-circle-small { transform: scale(120,120); } 
}

@media (max-width: 900px) { 
  .jumbo-slider-wrapper,
  .slick-slide.jumbo-slide  { height: 57vw; }
  .xs-editmode.preview .jumbo-slider-wrapper,
  .xs-editmode.preview .slick-slide.jumbo-slide  { height: auto; }

  /* .jumbo-slide.animation-start  .jumbo-circle-small.circle1 { transform: scale(150,150); opacity: 0.5; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle2 { transform: scale(135,135); opacity: 0.85; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle3 { transform: scale(110,110); opacity: 0.75; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle4 { transform: scale(95,95); opacity: 1.0; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle5 { transform: scale(80,80); opacity: 0.45; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle6 { transform: scale(70,70); opacity: 0.9; } */
}

@media (max-width: 500px) { 
  .jumbo-slider-wrapper,
  .slick-slide.jumbo-slide  { height: 65vw; }
  .xs-editmode.preview .jumbo-slider-wrapper,
  .xs-editmode.preview .slick-slide.jumbo-slide  { height: auto; }

  .jumbo-slide.animation-start  .jumbo-circle-small.circle1 { transform: scale(120,120); opacity: 0.5; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle2 { transform: scale(100,100); opacity: 0.85; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle3 { transform: scale(85,85); opacity: 0.75; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle4 { transform: scale(70,70); opacity: 1.0; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle5 { transform: scale(60,60); opacity: 0.45; }
  .jumbo-slide.animation-start  .jumbo-circle-small.circle6 { transform: scale(50,50); opacity: 0.9; }
}


.pos-right-top    { right: CALC(50% - 12vw); top: 90px; z-index: 2; }
.pos-right-center { right: CALC(50% - 18vw); top: 45%; z-index: 2; }
.pos-right-bottom { right: CALC(50% - 9vw); bottom: 8vw; z-index: 2; }

.pos-left-top     { left: CALC(50% - 14vw); top: 90px; z-index: 2; }
.pos-left-center  { left: CALC(50% - 11vw); top: 54%; z-index: 2; }
.pos-left-bottom  { left: CALC(50% - 12vw); bottom: 7vw; z-index: 2; }



/* .jumbo-slide.animation-start  .jumbo-circle-books img {
  transform: scale(250,250);
} */

.jumbo-slide.animation-end  .jumbo-circle-books img {
  transform: scale(0.01);
}

.jumbo-slide.animation-start  .jumbo-circle {
  transform: scale(200,200);
}

.jumbo-slide.animation-end  .jumbo-circle {
  transform: scale(0.01);
}

.jumbo-quote     { position: absolute; width: 250px; opacity:0; }

.jumbo-slide.animation-start  .jumbo-quote {
  display: block;
  position: absolute;
  opacity:1;
}

.jumbo-slide.animation-start,
.jumbo-slide.animation-end,
.jumbo-circle-small,
.jumbo-circle {
  transform-origin: center center;
  -webkit-transition: transform 300ms;
  -moz-transition: transform 300ms;
  -ms-transition: transform 300ms;
  -o-transition: transform 300ms;
  transition: transform 300ms; 
}


.jumbo-circle-books {
  transform-origin: center center;
  -webkit-transition: transform 400ms ease-in 0ms;
  -moz-transition: transform 400ms ease-in 0ms;
  -ms-transition: transform 400ms ease-in 0ms;
  -o-transition: transform 400ms ease-in 0ms;
  transition: transform 400ms ease-in 0ms; 
}

.jumbo-slide.animation-start  .jumbo-circle-small.pos-left-top {
  -webkit-transition: all 500ms ease-in 200ms;
  -moz-transition: all 500ms ease-in 200ms;
  -ms-transition: all 500ms ease-in 300ms;
  -o-transition: all 500ms ease-in 300ms;
  transition: all 500ms ease-in 300ms;
}

.jumbo-slide.animation-start .jumbo-circle-small.pos-left-center {
  -webkit-transition: all 300ms ease-in 500ms;
  -moz-transition: all 300ms ease-in 500ms;
  -ms-transition: all 300ms ease-in 500ms;
  -o-transition: all 300ms ease-in 500ms;
  transition: all 300ms ease-in 500ms;
}

.jumbo-slide.animation-start .jumbo-circle-small.pos-left-bottom {
  -webkit-transition: all 300ms ease-in 800ms;
  -moz-transition: all 300ms ease-in 800ms;
  -ms-transition: all 300ms ease-in 800ms;
  -o-transition: all 300ms ease-in 800ms;
  transition: all 300ms ease-in 800ms;
}

.jumbo-slide.animation-start .jumbo-circle-small.pos-right-top {
  -webkit-transition: all 300ms ease-in 700ms;
  -moz-transition: all 300ms ease-in 700ms;
  -ms-transition: all 300ms ease-in 700ms;
  -o-transition: all 300ms ease-in 700ms;
  transition: all 300ms ease-in 700ms;
}

.jumbo-slide.animation-start .jumbo-circle-small.pos-right-center {
  -webkit-transition: all 400ms ease-in 1300ms;
  -moz-transition: all 400ms ease-in 1300ms;
  -ms-transition: all 400ms ease-in 1300ms;
  -o-transition: all 400ms ease-in 1300ms;
  transition: all 400ms ease-in 1300ms;
}

.jumbo-slide.animation-start .jumbo-circle-small.pos-right-bottom {
  -webkit-transition: all 300ms ease-in 900ms;
  -moz-transition: all 300ms ease-in 900ms;
  -ms-transition: all 300ms ease-in 900ms;
  -o-transition: all 300ms ease-in 900ms;
  transition: all 300ms ease-in 900ms;
}

.text-left-top      { left: CALC(50% - 350px); top: 2vw; z-index: 5; }
.text-left-center   { left: CALC(50% - 360px); top: 35%; z-index: 5; }
.text-left-bottom   { left: CALC(50% - 370px); bottom: 1vw; z-index: 5; }

.text-right-top      { right: CALC(50% - 450px); top: 2vw; z-index: 5; }
.text-right-center   { right: CALC(50% - 460px); top: 39%; z-index: 5; }
.text-right-bottom   { right: CALC(50% - 440px); bottom: 1vw; z-index: 5; }

@media (min-width: 1200px ) {
.text-left-top      { left: CALC(50% - 510px); top: 2vw; z-index: 5; }
.text-left-center   { left: CALC(50% - 520px); top: 35%; z-index: 5; }
.text-left-bottom   { left: CALC(50% - 510px); bottom: 1vw; z-index: 5; }

.text-right-top      { right: CALC(50% - 510px); top: 2vw; z-index: 5; }
.text-right-center   { right: CALC(50% - 520px); top: 39%; z-index: 5; }
.text-right-bottom   { right: CALC(50% - 500px); bottom: 1vw; z-index: 5; }
}

.jumbo-quote#q3-1 {
  transform-origin: center center;
  -webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}
.jumbo-quote#q3-2 {
  transform-origin: center center;
  -webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}
.jumbo-quote#q3-3 {
  transform-origin: center center;
  -webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}
.jumbo-quote#q3-4 {
  transform-origin: center center;
  -webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

/* BOOKS IN LIST */
@media (max-width: 10px) { 
  .jumbo-slide.animation-start .jumbo-quote,
  .jumbo-slide.animation-end .jumbo-quote,
  .jumbo-quote     { display: none; }
  .jumbo-slide .jumbo-circle-books { width: 100px; }
  .jumbo-circle-books img { max-height: 110px; }
  /* .jumbo-slide.animation-start  .jumbo-circle-books img { transform: scale(200); } */
  .jumbo-slide.animation-start  .jumbo-circle { transform: scale(160,160); }
}
@media (min-width: 500px) { 
  .jumbo-slide.animation-start .jumbo-quote,
  .jumbo-slide.animation-end .jumbo-quote,
  .jumbo-quote     { display: none; }
  .jumbo-slide .jumbo-circle-books { width: 120px; }
  .jumbo-circle-books img { max-height: 150px; }
  /* .jumbo-slide.animation-start  .jumbo-circle-books img { transform: scale(250); } */
  .jumbo-slide.animation-start  .jumbo-circle { transform: scale(175,175); }
}
@media (min-width: 600px) { 
  .jumbo-slide .jumbo-circle,
  .jumbo-slide .jumbo-circle-books { top: 50%; }
  .jumbo-slide.animation-start .jumbo-quote,
  .jumbo-slide.animation-end .jumbo-quote,
  .jumbo-quote     { display: none; }
  .jumbo-slide .jumbo-circle-books { width: 120px; }
  .jumbo-circle-books img { max-height: 150px; }
  /* .jumbo-slide.animation-start  .jumbo-circle-books img { transform: scale(300); } */
  .jumbo-slide.animation-start  .jumbo-circle { transform: scale(190,190); }
}
@media (min-width: 700px) { 
  .jumbo-slide.animation-start .jumbo-quote,
  .jumbo-slide.animation-end .jumbo-quote,
  .jumbo-quote     { display: none; }
  .jumbo-slide     { height: 500px; }
  .jumbo-slide .jumbo-circle-books { width: 140px; }
  .jumbo-circle-books img { max-height: 160px; }
  /* .jumbo-slide.animation-start  .jumbo-circle-books img { transform: scale(350); } */
  .jumbo-slide.animation-start  .jumbo-circle { transform: scale(250,250); }
}
@media (min-width: 900px) { 
  .jumbo-slide.animation-start .jumbo-quote,
  .jumbo-slide.animation-end .jumbo-quote,
  .jumbo-quote     { display: block!important; }
  .jumbo-quote h4   { font-size: 0.9rem; font-weight: 400; line-height: 20px; }
  .jumbo-quote p    {font-size: 11px; line-height: 15px; } 
  .jumbo-slide     { height: 550px; }
  .jumbo-slide .jumbo-circle-books { width: 200px; }
  .jumbo-circle-books img { max-height: 220px; }
  /* .jumbo-slide.animation-start  .jumbo-circle-books img { transform: scale(400); } */
  .jumbo-slide.animation-start  .jumbo-circle { transform: scale(300,300); }
}
@media (min-width: 1100px) { 
  .jumbo-slide.animation-start .jumbo-quote,
  .jumbo-slide.animation-end .jumbo-quote,
  .jumbo-quote     { display: block!important; }
  .jumbo-quote p    {font-size: 13px; line-height: 21px; font-style: italic;} 
  .jumbo-slide      { height: 600px; }
  .jumbo-slide .jumbo-circle-books { width: 280px; }
  .jumbo-circle-books img { max-height: 280px; }
  .jumbo-slide.animation-start  .jumbo-circle { transform: scale(350,350); }
}

@media (min-width: 1400px) { 
  .jumbo-quote p    {font-size: 16px; line-height: 24px; }
    .jumbo-slide.animation-start .jumbo-quote,
  .jumbo-slide.animation-end .jumbo-quote,
  .jumbo-quote     { display: block!important; }
  .jumbo-quote p    {font-size: 13px; line-height: 21px; font-style: italic;} 
  .jumbo-slide      { height: 700px; }
  .jumbo-slide .jumbo-circle-books { width: 340px; }
  .jumbo-circle-books img { max-height: 360px; }
  .jumbo-slide.animation-start  .jumbo-circle { transform: scale(425,425); }
}


#jumbo-slider-wrapper {
  --swiper-pagination-bullet-inactive-color: #cfcfcf;
  --swiper-pagination-color: #cfcfcf;
  --swiper-navigation-color: #333;
}

#jumbo-nav-wrapper { height: 1px; margin-top: -3rem; }


/* Base dot */
.pe--boeken-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  opacity: 1;
  transition: width 200ms ease, transform 200ms ease;
  background-color: var(--color-secondary);
}

/* Active dot becomes elongated */
.pe--boeken-slider .swiper-pagination-bullet-active {
  width: 28px;
}

/* Navigation buttons placement + circle style */
.pe--boeken-slider .jumbo-nav {
  position: absolute;
  bottom: 14px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  z-index: 10;
}

/* Put the prev button left of next */
.pe--boeken-slider .jumbo-prev,
.pe--boeken-slider .jumbo-next {
    position: relative;
    left: auto;
    right: auto;
    margin-right: 13px;
}

.pe--boeken-slider .swiper-button-next, .pe--boeken-slider .swiper-button-prev {
    position: relative !important;
    left: auto;
    right: auto;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: '';
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: '';
}