File: /var/www/html/wpwatermates_err/wp-content/themes/salient/css/src/elements/element-clients.css
/*
Theme Name: Salient
Description: Styles for the "Clients" page builder element.
*/
.clients.two-cols >div{
width:49.4%
}
.clients.two-cols.no-carousel >div{
width:48.4%
}
.clients.two-cols >div:nth-child(2n+2){
margin-right:0
}
.clients.carousel.two-cols >div{
margin:0 10px
}
.clients.three-cols >div{
width:32.6%
}
.clients.three-cols.no-carousel >div{
width:31.6%
}
.clients.three-cols >div:nth-child(3n+3){
margin-right:0
}
.clients.carousel.three-cols >div{
margin:0 10px
}
@media only screen and (min-width: 1000px) {
.clients.no-carousel.three-cols > div:nth-child(3n+4) {
clear: both;
}
}
@media only screen and (min-width: 690px) {
.clients.no-carousel.four-cols > div:nth-child(4n+5) {
clear: both;
}
.clients.no-carousel.five-cols > div:nth-child(5n+6) {
clear: both;
}
.clients.no-carousel.six-cols > div:nth-child(6n+7) {
clear: both;
}
}
.clients.four-cols >div{
width:24.2%
}
.clients.four-cols.no-carousel >div{
width:23.2%
}
.clients.four-cols >div:nth-child(4n+4){
margin-right:0
}
.clients.carousel.four-cols >div{
margin:0 10px
}
.clients.five-cols >div{
width:19.2%
}
.clients.five-cols.no-carousel >div{
width:18.2%
}
.clients.five-cols >div:nth-child(5n+5){
margin-right:0
}
.clients.carousel.five-cols >div{
margin:0 10px
}
.clients.six-cols >div{
width:15.8%
}
.clients.six-cols.no-carousel >div{
width:14.8%
}
.clients.six-cols >div:nth-child(6n+6){
margin-right:0
}
.clients.carousel.six-cols >div{
margin:0 10px
}
.clients >div{
float:left;
transition:opacity 0.2s linear;
-webkit-transition:opacity 0.2s linear;
margin-right:2%;
margin-bottom:2%;
opacity:1
}
.clients.fade-in-animation >div{
opacity:0;
-webkit-transition:none;
transition:none;
}
.clients.fade-in-animation.completed >div{
-webkit-transition:opacity 0.2s linear;
transition:opacity 0.2s linear;
-webkit-backface-visibility:hidden
}
.clients:not(.fade-in-animation) >.no-link:hover,
.clients.fade-in-animation.completed >.no-link:hover{
opacity:1!important
}
.clients:not(.fade-in-animation) >div:hover,
.clients.fade-in-animation.completed >div:hover{
opacity:0.7!important
}
.clients >div img{
display:block;
max-width:100%;
margin:0 auto
}
.row.carousel.clients {
display: flex;
align-items: center;
}
.clients.no-carousel:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clients.no-carousel {
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
-ms-flex-flow: row wrap;
flex-wrap: wrap;
}
.clients.no-carousel > div {
float: none;
}
.clients[data-additional_padding="2"].no-carousel > div,
.clients[data-additional_padding="3"].no-carousel > div,
.clients[data-additional_padding="4"].no-carousel > div,
.clients[data-additional_padding="2"].no-carousel > div img,
.clients[data-additional_padding="3"].no-carousel > div img,
.clients[data-additional_padding="4"].no-carousel > div img {
margin: 0;
}
.clients[data-additional_padding="2"].no-carousel >div {
padding: 2%;
}
.clients[data-additional_padding="3"].no-carousel >div {
padding: 3%;
}
.clients[data-additional_padding="4"].no-carousel >div {
padding: 3% 5%;
}
.clients[data-he="greyscale_to_color"] > div img{
transition: filter 0.45s cubic-bezier(0.3, 0.4, 0.1, 1), opacity 0.45s cubic-bezier(0.3, 0.4, 0.1, 1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.55;
}
.clients[data-he="greyscale_to_color"] > div:hover img{
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}
.clients img.nectar-lazy {
opacity: 0;
transition: opacity 0.5s ease;
}
.clients img.nectar-lazy.loaded {
opacity: 1;
}
@media only screen and (min-width : 690px) and (max-width : 999px) {
body .clients.no-carousel > div,
body .clients.four-cols.no-carousel >div {
width: 24.2%;
margin-right: 1%;
}
body .clients.no-carousel.six-cols > div {
width: 15.8% ;
margin-right: 1%;
}
body .clients.no-carousel.five-cols > div {
width: 19.2%;
margin-right: 1%;
}
body .clients.no-carousel > div:nth-child(4n+4) {
margin-right: 0;
}
body .clients.carousel > div {
margin: 0 5px;
}
}
@media only screen and (max-width : 690px) {
body .clients[class*="col"].no-carousel > div {
margin-right: 1%;
width: 49.4%;
}
body .clients[class*="col"].no-carousel > div:nth-child(2n+2) {
margin-right: 0;
}
body .clients[class*="col"].carousel > div {
margin: 0 5px;
width: 150px;
}
body .clients.carousel.phone > div {
width: 150px;
}
.clients[data-additional_padding="2"].no-carousel >div {
padding: 2% 4% 2% 4%;
}
.clients[data-additional_padding="3"].no-carousel >div {
padding: 3% 6% 3% 6%;
}
.clients[data-additional_padding="4"].no-carousel >div {
padding: 5% 10% 5% 10%;
}
}
@media only screen and (min-width: 1300px) and (max-width: 1600px) {
.full-width-content .vc_span8 .clients.five-cols.carousel > div,
.full-width-content .vc_col-sm-8 .clients.five-cols.carousel > div {
width: 33%;
}
}
@media only screen and (min-width: 990px) and (max-width: 1300px) {
.full-width-content .vc_span8 .clients.six-cols > div,
.full-width-content .vc_col-sm-8 .clients.six-cols > div {
width: 32.3%;
}
.full-width-content .vc_span8 .clients.no-carousel.six-cols > div:nth-child(3n+3),
.full-width-content .vc_col-sm-8 .clients.no-carousel.six-cols > div:nth-child(3n+3) {
margin-right: 0;
}
.full-width-content .vc_span8 .clients.five-cols.carousel > div,
.full-width-content .vc_col-sm-8 .clients.five-cols.carousel > div {
width: 40%;
}
}