:root
{
    --metashield-carousel-item-gap: 12px;
    --metashield-carousel-item-count-mobile: 1;
    --metashield-carousel-item-count-tablet: 2;
    --metashield-carousel-item-count-desktop: 3;
    --metashield-carousel-transition-time: 600ms;
}

.wp-block-metashield-carousel-container
{
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.wp-block-metashield-carousel
{
    display: flex;
    transition: transform  300ms ease;
    transition-duration: var(--metashield-carousel-transition-time);
    gap: var(--metashield-carousel-item-gap);
    --metashield-carousel-item-gap: var(--metashield-carousel-item-gap-desktop);
}
.wp-block-metashield-carousel > * 
{
    position: relative;
    max-width: 100%;
    min-width: calc((100% - (var(--metashield-carousel-item-count) - 1) * var(--metashield-carousel-item-gap)) / var(--metashield-carousel-item-count));
}
.wp-block-metashield-carousel > .wp-block-query{
    display:none;
}
.metashield-carousel-cross-fade{
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-flip {
  animation: metashield-carousel-flip-card 300ms forwards;
  animation-duration: var(--metashield-carousel-transition-time);
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-zoom-in {
  animation: metashield-carousel-zoom-in 500ms ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-slide-up {
  animation: metashield-carousel-slide-up 500ms ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-slide-right {
  animation: metashield-carousel-slide-right 500ms ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-slide-left {
  animation: metashield-carousel-slide-left 500ms ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-slide-down {
  animation: metashield-carousel-slide-down 500ms ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}

.metashield-carousel-pan-zoom-out-top-right {
  animation: metashield-carousel-pan-zoom-out-top-right 20s ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-pan-zoom-out-top-left {
  animation: metashield-carousel-pan-zoom-out-top-left 20s ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-pan-zoom-out-bottom-right {
  animation: metashield-carousel-pan-zoom-out-bottom-right 20s ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-pan-zoom-out-bottom-left {
  animation: metashield-carousel-pan-zoom-out-bottom-left 20s ease-out;
  transform-origin: center;
  opacity: 1 !important;
  z-index: 1 !important;
}

.metashield-carousel-pan-zoom-in-top-right {
  animation: metashield-carousel-pan-zoom-in-top-right 20s ease-out;
  transform-origin: center;
  transform: scale(1.3) translate(10%, 10%);
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-pan-zoom-in-top-left {
  animation: metashield-carousel-pan-zoom-in-top-right 20s ease-out;
  transform-origin: center;
  transform: scale(1.3) translate(-10%, 10%);
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-pan-zoom-in-bottom-right {
  animation: metashield-carousel-pan-zoom-in-bottom-right 20s ease-out;
  transform-origin: center;
  transform: scale(1.3) translate(10%, -10%);
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-pan-zoom-in-bottom-left {
  animation: metashield-carousel-pan-zoom-in-bottom-right 20s ease-out;
  transform-origin: center;
  transform: scale(1.3) translate(-10%, -10%);
  opacity: 1 !important;
  z-index: 1 !important;
}
.metashield-carousel-zoom-iris {
    animation: metashield-carousel-zoom-iris 3s ease-out;
    transform-origin: center;
    opacity: 1 !important;
    z-index: 1 !important;
    overflow: hidden;
}
.metashield-carousel-cube {
    animation: metashield-carousel-cube 3s ease-out;
    transform-origin: center;
    border-radius: 0;
    opacity: 1 !important;
    z-index: 1 !important;
}

@keyframes metashield-carousel-pan-zoom-out-top-right { 0% { transform: scale(1.3) translate(10%, -10%); } 100% {  } }
@keyframes metashield-carousel-pan-zoom-out-top-left { 0% { transform: scale(1.3) translate(-10%, -10%); } 100% {   } }
@keyframes metashield-carousel-pan-zoom-out-bottom-right { 0% { transform: scale(1.3) translate(10%, 10%); } 100% {  } }
@keyframes metashield-carousel-pan-zoom-out-bottom-left { 0% { transform: scale(1.3) translate(-10%, 10%); } 100% {   } }
@keyframes metashield-carousel-pan-zoom-in-top-right { 0% { transform: scale(1) translate(0%, 0%); } 100% { } }
@keyframes metashield-carousel-pan-zoom-in-top-left { 0% { transform: scale(1)  translate(0%, 0%); } 100% {  } }
@keyframes metashield-carousel-pan-zoom-in-bottom-right { 0% { transform: scale(1) translate(0%, 0%); } 100% { } }
@keyframes metashield-carousel-pan-zoom-in-bottom-left { 0% { transform: scale(1)  translate(0%, 0%); } 100% { } }

@keyframes metashield-carousel-slide-up { 0% { transform: translate(0%, 100%); } 100% {  } }
@keyframes metashield-carousel-slide-right { 0% { transform: translate(-100%, 0%); } 100% {  } }
@keyframes metashield-carousel-slide-left { 0% { transform: translate(100%, 0%); } 100% {  } }
@keyframes metashield-carousel-slide-down { 0% { transform: translate(0%, -100%); } 100% {  } }
@keyframes metashield-carousel-zoom-in { 0% { transform: scale(0.1); } 100% { transform: scale(1); } }
@keyframes metashield-carousel-zoom-iris { 0% { clip-path: circle(0% at center); } 100% { clip-path: circle(150% at center); } }
@keyframes metashield-carousel-cube { 0% { transform: rotateY(90deg) translateZ(-300px); } 100% { } }


@keyframes metashield-carousel-flip-card {
  from {
    transform: perspective(400px) rotateY(180deg);
  }
  to {
    transform: perspective(400px) rotateY(0deg); /* Flipping the card around the Y-axis */
  }
}

.wp-block-metashield-carousel > *
{
    --metashield-carousel-item-count: var(--metashield-carousel-item-count-desktop);
    
}
@media (max-width:922px)
{
    .wp-block-metashield-carousel{
        --metashield-carousel-item-gap: var(--metashield-carousel-item-gap-tablet);
    }
    .wp-block-metashield-carousel > *
    {
        --metashield-carousel-item-count: var(--metashield-carousel-item-count-tablet);
    }
}
@media (max-width:544px)
{
    .wp-block-metashield-carousel{
        --metashield-carousel-item-gap: var(--metashield-carousel-item-gap-mobile);
    }
    .wp-block-metashield-carousel > *
    {
        --metashield-carousel-item-count: var(--metashield-carousel-item-count-mobile);
    }
}

/* Cursor Pointer For Navigation Buttons */
.metashield-carousel-scroll-back,
.metashield-carousel-scroll-forward {
  cursor: pointer;
}