/* body{
    background-color: green;
} */

.particleCanvasWrapper{
    position: relative;
    width:100%;
    display: flex;
    /* background-color: blueviolet; */
    align-items: center;
}

.particleCanvasTopWrapper{
    height: 12vw;
    max-height: 155px;
    margin-top: 4%;
}

.particleCanvasInner{
    position: relative;
    width:100%;
}

.particleCanvas{
    /* aspect-ratio: 411 / 54;  For a 16:9 aspect ratio */
     aspect-ratio: 1 / 0.25; /* For a 16:9 aspect ratio */
     min-height: 200px;
     max-width: 1440px;
     width: 100%;
     /* background-color: rgba(255, 255, 0, 0.5); */
}

canvas{
    /* object-fit: contain; */
    display: block;

    image-rendering: pixelated; /* For modern browsers */
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -webkit-optimize-contrast; /* Safari, Chrome */
    -ms-interpolation-mode: nearest-neighbor; /* IE */
}

.client-carousel{
    width: 100%;
    min-height: 100px;
    background-color: #353535;
    border-radius: 0 0 12px 12px;
    padding-top: 6%;
    padding-bottom: 6%;
    overflow: hidden;
}

.client-carousel-container{
    width: 100%;
    touch-action: pany-y;
    cursor: grab;
    display: flex;
    align-items: center;
    user-select: none;
    height: 25%;
    position:relative;
}

.client-item{
    width: 10%;
    height: 70px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    /* background-color: red; */
    justify-content: center;
    user-select: none;
    margin-right: 120px;
}

.client-item-scale{
    /* background-color: cadetblue; */
    width: 100%;
    height:100%;
}

.client-logo{
    width: 100%;
    height: 100%;
     user-select: none;
}

.carousel-button{
    width: 35px;
    height: 35px;
    /* float:left; */
    cursor: pointer;
    position: absolute;
}

#carousel-button-container{
    position: relative;
    top: -56px;
}

img{
 
  user-select: none;
  -drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.cprev{
    margin-left: 2%;
}

.cnext{
    right:0px;
    transform: scaleX(-1);
    margin-right: 2%;
}

.carrow{
    width:100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(../graphics/carouselArrow.svg);
    background-size: cover;
}

#debug{
    position:fixed;
    top:50%;
    left:50;
}

@media (max-width: 900px){

    .particleCanvasTopWrapper{
     
        margin-top: 5%; 
    }

   }

   @media (max-width: 562px){
    .particleCanvasTopWrapper{
        max-height: 66px;
        margin-top: 7%; 
          height: 15vw;
    }
   }