.carousel .item {
display: block;
position: absolute;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
filter: blur(6px);
opacity: 0.3;
}
.carousel .item.active {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
filter: blur(0);
opacity: 1
}
.carousel .item.transition {
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
}.row {
text-align: center;
}
.carousel {
padding: 0;
left: 50%;
position: relative;
float: left;
width: 1297px;
margin-left: -641px;
overflow: hidden;
height: 600px;
top: 0;
}
.carousel .item {
width: 660px;
height: 400px;
background-size: 100%;
vertical-align: middle;
line-height: 150px; }
.controls {
position: relative;
float: left;
margin-top: 20px;
left: 50%;
width: 120px;
margin-left: -53px;
clear: both;
}
.margin-left-auto{
margin-left: auto!important;
}
.margin0{
margin-left: 0!important;
}
.margin325{
margin-left: 325px!important;
}
.controls a {
display: block;
}
.controls .previous {
float: left;
}
.controls .next {
float: right;
}
@media (max-width: 750px){
.carousel {
width: 500px;
margin-left: -250px;
height: 580px;
}
.carousel .item {
width: 500px;
height: 300px;
}
@media (max-width: 550px){
.carousel {
width: 350px;
margin-left: -175px;
}
.carousel .item {
width: 350px;
height: 300px;
}
@media (max-width: 350px){
.carousel {
width: 270px;
margin-left: -135px;
}
.carousel .item {
width: 270px;
height: 300px;
}