﻿.carousel-pi-outer {
    position: relative;
}

.carousel-pi-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-pi-image:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(39,34,79,0.9) 0%, rgba(43,43,90,0.84) 35%, rgba(65,90,147,0.26) 100%);
}

.carousel-pi-description {
    position: absolute;
    left: 5vw;
    bottom: 30vh;
    color: var(--color-white);
}

.phone .carousel-pi-description {
    left: 2rem;
    bottom: 25vh;
    padding-right: 2rem;
}
.carousel-pi-outer .carousel-pi-image img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    filter: brightness(0.9);
}
.active .carousel-pi-outer .carousel-pi-image img {
    -webkit-animation: scale-up-center 20s cubic-bezier(0.250, 0.460, 0.450, 0.940) 4s both infinite;
    animation: scale-up-center 20s cubic-bezier(0.250, 0.460, 0.450, 0.940) 4s both infinite; 
    will-change: transform;
}
/*
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  
  48% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  
  52% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  45% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  55% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


@-webkit-keyframes focus-in {
  0% {
    -webkit-filter: blur(8px) grayscale(.5);
            filter: blur(8px) grayscale(.5);
  }
  100% {
    -webkit-filter: blur(0px) grayscale(0);
            filter: blur(0px) grayscale(0);
  }
}
@keyframes focus-in {
  0% {
    -webkit-filter: blur(8px) grayscale(.5);
            filter: blur(8px) grayscale(.5);
  }
  100% {
    -webkit-filter: blur(0px) grayscale(0);
            filter: blur(0px) grayscale(0);
  }
}*/