#client-solutions {
    background-color: #fff;
    position: relative;
}
#client-solutions .client-wrapper { padding-top: 100px; }
/*  clients-list */
ul.clients-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
ul.clients-list li {
    flex: 0 1 auto;
    width: 100%;
    margin: 15px;
}
ul.clients-list li.break-row {
    width: 100%;
    margin: 0;
    height: 0;
}
@media screen and (min-width:460px) {
    ul.clients-list li {
        width: calc(50% - 30px);
        margin: 15px;
    }
}
@media screen and (min-width:768px) {
    ul.clients-list li {
        width: calc(33.33% - 30px);
    }
}
ul.clients-list li a {
    background-color: #fff;
    box-shadow: 0 5px 30px rgba(0,0,0,0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70px;
    position: relative;
    top: 0;
}
ul.clients-list li:hover a {
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    top: -4px;
}
ul.clients-list li a img {
    margin: 0 auto;
    width: auto;
    max-height: 40px;
    display: block;
}
/*  clients solutions background */
#client-solutions .client-solutions-content {
    position: relative;
    z-index: 2;
}
#client-solutions .client-solutions-background {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 1600px;
    transform: translateX(-50%);
    display: block;
    margin: 0 auto;
}
#client-solutions .client-solutions-background .client-solutions-ship {
    position: absolute;
    left: 0;
    bottom: 12%;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    transform: translateY(0) translateX(0);
}
#client-solutions .client-solutions-background .client-solutions-ship svg {
    position: absolute;
    display: block;
    width: 28%;
    height: auto;
    max-width: 450px;
    max-height: 450px;
    bottom: -11%;
    left: 56%;
    transform: translateX(-50%) translateY(0) rotate(-10deg);
    animation: animShip 1.5s infinite ease-in-out;
}
@media screen and (min-width:768px) {
    #client-solutions .client-solutions-background .client-solutions-ship svg {
        bottom: -5%;
    }
}
.client-solutions-smoke {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
}
.smoke {
    position: absolute;
    bottom: 0;
    border-radius: 48%;
    background: var(--color-gray-light);
    transform: translateY(60%) rotate(0deg);
    animation: animSmoke 3s infinite ease-in-out;
}
.smoke.smoke-1 {
    left: 1%;
    padding: 3%;
    animation-delay: 1.2s;
}
.smoke.smoke-2 {
    left: 5%;
    padding: 6%;
    animation-delay: 0.9s;
}
.smoke.smoke-3 {
    left: 12%;
    padding: 10%;
    animation-delay: 0.6s;
}
.smoke.smoke-4 {
    left: 20%;
    padding: 16%;
    animation-delay: 0.3s;
}
.smoke.smoke-5 {
    left: 45%;
    padding: 13%;
}
.smoke.smoke-6 {
    left: 62%;
    padding: 10%;
    animation-delay: 0.3s;
}
.smoke.smoke-7 {
    left: 78%;
    padding: 7%;
    animation-delay: 0.6s;
}
.smoke.smoke-8 {
    left: 88%;
    padding: 5%;
    animation-delay: 0.9s;
}
.smoke.smoke-9 {
    left: 95%;
    padding: 2.5%;
    animation-delay: 1.2s;
}
@keyframes animSmoke {
    0% { transform: translateY(60%) rotate(0deg); }
    50% { transform: translateY(45%) rotate(180deg); }
    100% { transform: translateY(60%) rotate(360deg); }
}
@keyframes animShip {
    0% { transform: translateX(-50%) translateY(0) rotate(-10deg); }
    50% { transform: translateX(-50%) translateY(-20px) rotate(-10deg); }
    100% { transform: translateX(-50%) translateY(0) rotate(-10deg); }
}