:root {
    --translate: 50vw;
}

.bg-pan-tr {
  -webkit-animation: bg-pan-tr 30s linear both;
  animation: bg-pan-tr 30s linear both;
}

@-webkit-keyframes bg-pan-tr {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}
@keyframes bg-pan-tr {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}

.slide-in-elliptic-top-fwd {
  width: 16.5rem;
  height: 14rem;
  -webkit-animation: slide-in-elliptic-top-fwd 8s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) 4s both;
  animation: slide-in-elliptic-top-fwd 8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    4s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-12-28 15:59:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 3s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: tracking-in-expand 3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ----------------------------------------------
 * Generated by Animista on 2024-12-27 14:26:20
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.text-focus-in {
  -webkit-animation: text-focus-in 2s linear both;
  animation: text-focus-in 2s linear both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotate-scale-up {
  width: 16.5rem;
  height: 14rem;

  /* -webkit-animation: rotate-scale-up 0.65s linear;
    animation: rotate-scale-up 0.65s linear; */
  -webkit-animation: rotate-center 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 5s
    reverse forwards;
  animation: rotate-center 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 5s reverse
    forwards;
}

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 3s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: tracking-in-expand 3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  /* background-color: dodgerblue; */
  color: white;
  transform: rotateY(180deg);
}

.carousel_container {
  position: relative;
  /* margin: 5rem 2rem; */
  width: 320px;
  height: 300px;
  margin: 0 auto 0 auto;
  perspective: 2000px;
  /* perspective: 1rem; */
}

.carousel {
  position: relative;
  margin: 8rem 2rem;
/* width: 200px; */
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* transform-style: flat; */
  /* animation: rotate360 60s infinite forwards linear; */
  animation: rotate360 45s infinite forwards linear;
}
.carousel__face {
  position: absolute;
  /* width: 25px; */
  height: 187px;

  /* border: 3px solid rgb(22, 14, 92);  */
  border-radius: 10px;
  background-size: contain;
  /* background-size: cover; */
  background-position: center;
  background-repeat: no-repeat;
  /* box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5); */
  display: flex;
}

span {
  margin: auto;
  padding: 0;
  font-size: 1.8rem;
}

.carousel__face img {
  width: 260px;
  height: 187px;
  /* border: 3px solid rgb(22, 14, 92);  */
  border: 3px solid black;
  border-radius: 10px;
  margin: auto 4rem;
  /* font-size: 2rem; */
}







.carousel__face:nth-child(1) {
  /* background-image: url("../images/icons/DOJ.jpg"); */
  transform: rotateY(0deg) translateZ(380px);
}
.carousel__face:nth-child(2) {
  /* background-image: url("../images/icons/FEMA.jpg"); */
  transform: rotateY(40deg) translateZ(380px);
}
.carousel__face:nth-child(3) {
  /* background-image: url("../images/officepeople.png"); */
  transform: rotateY(80deg) translateZ(380px);
}
.carousel__face:nth-child(4) {
  /* background-image: url("../images/icons/ICE.jpg"); */
  transform: rotateY(120deg) translateZ(380px);
}
.carousel__face:nth-child(5) {
  /* background-image: url("../images/icons/Navy-PEO IWS.jpg"); */
  transform: rotateY(160deg) translateZ(380px);
}
.carousel__face:nth-child(6) {
  /* background-image: url("../images/icons/WHS.png"); */
  transform: rotateY(200deg) translateZ(380px);
}
.carousel__face:nth-child(7) {
  /* background-image: url("../images/icons/USDOS.jpeg"); */
  transform: rotateY(240deg) translateZ(380px);
}
.carousel__face:nth-child(8) {
  /* background-image: url("../images/logo/NECT\ Consulting\ -\ rv\ 2\ Final\ File-01.jpg"); */
  transform: rotateY(280deg) translateZ(380px);
}
.carousel__face:nth-child(9) {
  /* background-image: url(""); */
  transform: rotateY(325deg) translateZ(380px);
}



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

  .carousel_container {
    /* position: relative; */
    display: block;
    margin: 0;
    width: 100%;
    /* height: 200px; */
    perspective: none;
    /* perspective: 1rem; */
  }
  
  .carousel {
    display: flex;
    flex-wrap: wrap;

    gap: 0;
    justify-content: space-between;

    position: none;
    margin: 0;
    width: 100%;
    transform-style: flat;
    animation: none;
  }
  .carousel__face {
    position: static;
    flex: 1;
    /* width: 25px; */
    margin: 0;
    padding: auto;
    height: auto;
    /* border: 3px solid rgb(22, 14, 92);  */
    border-radius: 10px;
    background-size: contain;
    /* background-size: cover; */
    background-position: center;
    background-repeat: no-repeat;
    /* box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5); */
    /* display: flex; */
  }
  
  span {
    margin: auto;
    padding: 0;
    font-size: 1.8rem;
  }
  
  .carousel__face img {
    margin: auto;
    padding: -3rem;
    position: static;
    width: 130px;
    height: 80px;
    border: 3px solid black;
    border-radius: 10px;
    
    /* margin: -2rem 0 -4rem auto; */
    /* font-size: 2rem; */
  }
  

  /* .carousel_container {
    margin: 2rem 0;
    width: 100%;
    height: 200px;
    padding: 0;
    perspective: none;
  }
  .carousel {
    animation: none;
width: fit-content;
    height: 100%;
    }
  .carousel__face {
    width: auto;
    height: auto;
  }
  .carousel__face img {
    width: 120px;
    height: 90px;
    margin: 0;
  } */

  .carousel__face:nth-child(1) {
    /* background-image: url("../images/icons/DOJ.jpg"); */
    /* transform: rotateY(0deg) translateZ(var(--translate)); */
    transform: none;
  }
  .carousel__face:nth-child(2) {
    /* background-image: url("../images/icons/FEMA.jpg"); */
    /* transform: rotateY(40deg) translateZ(var(--translate)); */
    transform: none;
  }
  .carousel__face:nth-child(3) {
    /* background-image: url("../images/officepeople.png"); */
    display: none;
    transform: none;
  }
  .carousel__face:nth-child(4) {
    /* background-image: url("../images/icons/ICE.jpg"); */
    transform: none;
  }
  .carousel__face:nth-child(5) {
    /* background-image: url("../images/icons/Navy-PEO IWS.jpg"); */
    transform: none;
  }
  .carousel__face:nth-child(6) {
    /* background-image: url("../images/icons/WHS.png"); */
    transform: none;
  }
  .carousel__face:nth-child(7) {
    /* background-image: url("../images/icons/USDOS.jpeg"); */
    display: none;
    transform: none;
  }
  .carousel__face:nth-child(8) {
    /* background-image: url("../images/logo/NECT\ Consulting\ -\ rv\ 2\ Final\ File-01.jpg"); */
    transform: none;
  }
  .carousel__face:nth-child(9) {
    display: none;
    /* background-image: url(""); */
    transform: none;
  }

}




@keyframes rotate360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}