/* sblogos random 
 *  https://codepen.io/henripeetsmann/pen/zxYEgY
 *
 *  Using Bootstrap 3.1.1: //maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
*/ 

.sblogos {
  height: 150px; /* def: 150px - Change this value to make logos smaller / bigger */
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  /* background: #ddd; */
}

@media (max-width: 539px){ 
  .sblogos { height: 300px; }
}

.sblogos__row {
  margin-left: -15px;
  margin-right: -15px;
}

.sblogos__col {
  float: left;
}

.sblogos__link {
  padding: 30px 15px;
}


/* --- */


.sblogos__col { width: 50%; }
@media (min-width: 540px){  .sblogos__col { width: 25%; }}
@media (min-width: 768px){  .sblogos__col { width: 20%; }}
@media (min-width: 992px){  .sblogos__col { width: 20%; }}
@media (min-width: 1200px){ .sblogos__col { width: 16.6667%; }}

/* --- */

@media(max-width: 539px){                         .sblogos__col:nth-child(1n+5) { display: none; }}
@media(min-width: 540px) and (max-width: 767px){  .sblogos__col:nth-child(1n+5) { display: none; }}
@media(min-width: 768px) and (max-width: 991px){  .sblogos__col:nth-child(1n+6) { display: none; }}
@media(min-width: 992px) and (max-width: 1199px){ .sblogos__col:nth-child(1n+6) { display: none; }}
@media(min-width: 1200px){                        .sblogos__col:nth-child(1n+7) { display: none; }}

/* --- */

.sblogos__row,
.sblogos__col,
.sblogos__link,
.off-sblogos__link:before { 
  height: 100%;
}

@media(max-width: 539px){
  .sblogos__col { height: 50%; }
}

.sblogos__link,
.sblogos__link:before {
  display: inline-block;
}

.sblogos__link {
  max-width: 100%;
  max-height: 100%;
}

.sblogos__img {
  display: inline-block;
  vertical-align: middle;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

.sblogos__link:before {
  content: '';
  vertical-align: middle;
}

/* Transition Base */

.sblogos__col.active {
  position: relative;
}

.sblogos__col.active .prev,
.sblogos__col.active .next {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transition-easing: ease;
}

.sblogos .sblogos__col.active {
  perspective: 500px;
}

.sblogos .sblogos__col.active .prev {
  transition: opacity 2.75s ease-out, transform 2.75s ease;
}

.sblogos .sblogos__col.active .next {
  transition: opacity 1.5s ease-out, transform 1.5s ease;
}

/* start */
.sblogos .sblogos__col.active .next {
  opacity: 0;
  transform: translateZ(-125px);
}
/* end */
.sblogos .sblogos__col.active .transition.next {
  opacity: 1;
  transform: translateZ(0px);
}
/* start */
.sblogos .sblogos__col.active .prev {
  opacity: 1;
  transform: translateZ(0px);
}
/* end */
.sblogos .sblogos__col.active .transition.prev {
  opacity: 0;
  transform: translateZ(-250px);
}