.clustercompare {
  position: relative;
  max-width: 1010px;
  margin: 0 auto 20px auto;
}

.cluster-item {
  position:relative;
  margin-bottom:50px;
}

.cluster-item > h3 {
  text-align:center;
  margin:0;
  padding:0 0 20px 0;
}

.cluster-wrap {
  position:relative;
}

.cluster-index {
  display:none;
}

.clusterlegend:not(.active) {
  display:none;
}

.clusterlegend * {
  font-size:13px;
  line-height:16px;
}

.clusterlegend .legendrow {
  display:flex;
}

.nr-yellow {
  background-color:#fbba00;
  width:28px;
}

.cluster-dots {
  display:none;
}



@media screen and ( max-width: 959px ) {
  
  .clustercompare {
    overflow-x:hidden;
    margin-top:0;
  }
  .cluster-row {
    white-space:nowrap;
    position:relative;
    overflow-x:hidden;
  }
  .cluster-item {
    display:inline-block;
    margin-bottom:10px;
  }
  .cluster-wrap {
    padding-left:0;
    padding-right:0;
  }
  .cluster-wrap img {
    width:100%;
  }
  
  .cluster-default {
    display:none;
  }
  
  .cluster-arrow {
    width:30px;
    position:absolute;
    top:360px;
    z-index:18;
  }
  .cluster-prev {
    left:0.625rem;
  }
  .cluster-next {
    right:0.625rem;
  }
  
  .cluster-dots {
    text-align:center;
    display:block;
    margin:0 0 30px 0;
    padding:0;
    list-style:none;
  }
  .cluster-dots li {
    display:inline-block;
  }
  .cluster-dots span {
    display:block;
    width:10px;
    height:10px;
    margin:0 8px;
    border:1px solid #fff;
    border-radius:5px;
    font-size:1px;
  }
  .cluster-dots .active span {
    background:#fff;
  }
  
  .clusterlegend {
    padding-left:0.625rem;
    padding-right:0.625rem;
  }
  
  .clusterlegend .cell {
    margin-bottom:0 !important;
  }
  
  .legendrow p:first-child {
    margin-bottom:0;
  }
  
  img.clusterlegende {
    max-width:180px;
    margin-left:9px;
  }
  
  .clustercompare .swit-socialshare {
    padding-left:0.625rem;
    padding-right:0.625rem;
  }
  
}

@media screen and ( max-width: 480px ) {

  .cluster-wrap {
    padding-left:0;
    padding-right:0;
  }
  
  .cluster-arrow {
    width:20px;
    top:200px;
  }


}

@media screen and ( min-width: 960px ) {
 
  .cluster-item {
    width:32.9%;
    display:inline-block;
    cursor:pointer;
  }
  .cluster-default {
    opacity:1;
    -webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease; 
	transition: all .5s ease;
  }
  .active .cluster-default {
    opacity:0;
  }
  .cluster-hover {
    opacity:0;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    transform:scale(1);
    -webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease; 
	transition: all .5s ease;
  }
  .active .cluster-hover {
    opacity:1;
    transform:scale(1.2);
  }
  
  .active .cluster-index {
    display:block;
    width:40px;
    position:absolute;
    bottom:-30px;
    left:50%;
    margin-left:-20px;
  }
  
  .cluster-arrow {
    display:none;
  }
  
  .clusterlegend {
    border-top:1px solid #fff;
    padding-top:20px;
  }
  
  .clusterlegend .cell:not(:last-child) {
    width:28%;
  }
  .clusterlegend .cell:last-child {
    width:16%;
    border-left:1px solid #fff;
  }
  
}