@charset "utf-8";
/* CSS Document */

    .carousel {
      width: 90%;   /* 6 logos * 200px */
      overflow: hidden;
		margin-left: 5%;
		margin-top: 30px;
		margin-bottom: 30px
         }

    .carousel-track {
      display: flex;
      transition: transform 0.8s ease-in-out;
    }

    .logocarousel {
      min-width: 200px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
		position: relative;
		overflow: hidden;
    }

    .logocarousel .image1 {
      width: 100px;
      height: 70px;
      filter: brightness(0) saturate(100%) invert(49%) sepia(86%) saturate(277%) hue-rotate(154deg) brightness(94%) contrast(89%);
		 top : 0px;
		  position: absolute;
		  z-index: 1;
		transition: top 0.6s ease-in-out; /* smooth slide */
    }
	  .logocarousel .image2 {
       width: 120px;
      height: 70px;
      filter: brightness(0) saturate(100%) invert(49%) sepia(86%) saturate(277%) hue-rotate(154deg) brightness(94%) contrast(89%);
	  top : -100px;
		  position: absolute;
		  z-index: 1;
		  transition: top 0.6s ease-in-out; /* smooth slide */
    }
	  .logocarousel:hover .image2 {
	  top :0px	  
    }
	   .logocarousel:hover .image1 {
	  top :110px	  
    }