@charset "utf-8";

.auto-scrolling-logos {
   background: #e8eef8;
   padding-bottom: 48px;
   padding-top: 48px;
   position: relative;
   overflow: hidden;
 }
 
 .auto-scrolling-logos > img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   -o-object-fit: cover;
   font-family: "object-fit: cover;";
   object-position: center;
 }
 
 .auto-scrolling-logos .section-intro {
   max-width: 480px;
   margin: 0 auto;
   text-align: center;
   margin-bottom: 64px;
 }
 
 .auto-scrolling-logos__wrapper {
  position: relative;
  min-height: 40vh;
  display: flex;
  justify-content: left;
  padding-left:50px;
  transition: transform 200s;


  animation-name: client_slide;
   animation-duration:300s;
   animation-iteration-count:3;
   animation-direction:alternate;
   animation-fill-mode: forwards;
   animation-timing-function :linear;
   padding-bottom: 140px;

}
 .auto-scrolling-logos__wrapper img{
    width: 100%;
    height: auto;
 }
 .auto-scrolling-logos .scroll-item-wrapper, .auto-scrolling-logos .slick-list, .auto-scrolling-logos .slick-tracker {
   height: 100%;
 }
 
 .auto-scrolling-logos__wrapper .logo-grid {
   display: grid;
   grid-gap: 40px;
   grid-template-columns: 1fr;
   grid-template-rows: auto;
   grid-template-columns: repeat(3, auto);
   list-style: none;
   margin: 0;
   padding: 0;
   width: auto;
   height: 100%;
 }
 
 .auto-scrolling-logos__wrapper .logo-grid li {
   background: 0 0;
   padding: 0;
   min-height: 180px;
 }
 
 .auto-scrolling-logos__wrapper .logo-grid li::before {
   display: none;
 }
 
 .auto-scrolling-logos__wrapper ol > li > span {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1.2rem;
   height: 150px;
   width: 150px;
   margin: 0 auto;
   border-radius: 100%;
   transition: all .6s;
   overflow: hidden;
 }
 .auto-scrolling-logos__wrapper ol > li > span:hover{
   transform:scale(1.3);
 }
 .auto-scrolling-logos__wrapper ol > li:nth-child(2n) span {
   height: 165px;
   width: 165px;
 }
 
 .auto-scrolling-logos__wrapper ol > li:nth-child(2n) span > img {
   max-width: 8vw;
 }
 
 .auto-scrolling-logos__wrapper ol > li:nth-child(4n) > span {
   height: 144px;
   width: 144px;
 }
 
 .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(1) {
   grid-column: 1;
   grid-row: 1;
 }
 @media(max-width:600px){
  .auto-scrolling-logos__wrapper .logo-grid li{
    min-height: 135px;;
  }
}
 @media (min-width: 768px) {
 
   .auto-scrolling-logos__wrapper .logo-grid {
     grid-template-columns: repeat(6, auto);
     grid-template-rows: repeat(5, 110px);
     grid-gap: 10px;
     overflow: visible;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(1) {
     grid-column: 1;
     grid-row: 1;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(2) {
     grid-column: 1;
     grid-row: 3;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(3) {
     grid-column: 2;
     grid-row: 2;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(4) {
     grid-column: 2;
     grid-row: 4;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(5) {
     grid-column: 3;
     grid-row: 1;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(6) {
     grid-column: 3;
     grid-row: 3;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(7) {
     grid-column: 4;
     grid-row: 2;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(8) {
     grid-column: 4;
     grid-row: 4;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(9) {
     grid-column: 5;
     grid-row: 1;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(10) {
     grid-column: 5;
     grid-row: 3;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(11) {
     grid-column: 6;
     grid-row: 2;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(12) {
     grid-column: 6;
     grid-row: 4;
   }
 }
 @media (min-width: 1025px) {
   .auto-scrolling-logos {
     padding-bottom: 64px;
     padding-top: 64px;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid {
     grid-template-columns: repeat(6, auto);
     grid-template-rows: repeat(5, 110px);
     grid-gap: 10px;
     overflow: visible;
   }
 }
 @media (min-width: 1200px) {
   .auto-scrolling-logos {
     padding-bottom: 96px;
     padding-top: 96px;
   }
 
   /* .auto-scrolling-logos__wrapper {
     min-height: 60vh;
   } */
 
   .auto-scrolling-logos__wrapper ol > li:nth-child(2n) span {
     margin-left: -30px;
   }
 
   .auto-scrolling-logos__wrapper ol > li:nth-child(4n) > span {
     margin-left: -20px;
   }
 }
 @media (min-width: 1366px) {
   /* .auto-scrolling-logos__wrapper {
     min-height: 80vh;
   } */
 
   .auto-scrolling-logos__wrapper .logo-grid {
     grid-template-columns: repeat(6, 110px);
     grid-template-rows: repeat(4, 160px);
     grid-gap: 0;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(9) {
     grid-column: 5;
     grid-row: 3;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid li:nth-of-type(10) {
     grid-column: 5;
     grid-row: 1;
   }
 
   .awards-logos-section .awards-logos-block2 > div {
     margin: 5px;
   }
 }
 @media (min-width: 1440px) {
   .auto-scrolling-logos__wrapper ol > li:nth-child(2n) span > img {
     max-width: 6vw;
   }
 
   .awards-logos-section .awards-logos-block2 > div {
     margin: 10px;
   }
 }
 @media (min-width: 2000px) {
   .auto-scrolling-logos__wrapper ol > li:nth-child(2n) span > img {
     max-width: 6vw;
   }
 
   .auto-scrolling-logos__wrapper {
     min-height: 40vh;
   }
 
   .auto-scrolling-logos__wrapper .logo-grid {
     grid-template-columns: repeat(6, 120px);
     grid-template-rows: repeat(4, 180px);
   }
 
   .auto-scrolling-logos__wrapper ol > li:nth-child(2n) span {
     height: 180px;
     width: 180px;
   }
 
   .auto-scrolling-logos__wrapper ol > li:nth-child(4n) > span {
     height: 150px;
     width: 150px;
   }
 
   .awards-logos-section .awards-logos-block2 > div {
     margin: 0 27px 27px;
   }
 }
 @media (min-width: 2560px) {
   .auto-scrolling-logos__wrapper ol > li:nth-child(2n) span > img {
     max-width: 100%;
   }
 }