﻿.carouseller:before, .carouseller:after {  content: " ";  display: table;}
.carouseller:after { clear: both;}
.carouseller { position: relative;}

.carouseller [class*="car_"] {
display: inline-block; 
position: relative;
margin-left: 0.2564102564102564% !important;
*margin-left: 0.25109110747408616% !important;
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.carouseller [class*="car_"]:first-child  { margin-left: 0 !important;}

.carouseller [class*="car_"]:nth-child(n+7) { display: none;}

.carouseller .car_img { width: 200px;}

.carouseller .carouseller__list { position: relative; width: 997.4358974358974%;}
.carouseller .carouseller__wrap { overflow: hidden; position: relative; margin: 0 35px}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
position: absolute; 
font:normal 32px 'sfctc';
color:rgba(7,57,80,0.4);
margin: 0; 
bottom: 75px;
text-align: center;
text-decoration: none;
cursor:pointer;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.carouseller .carouseller__left:hover, .carouseller .carouseller__right:hover { 
color:rgba(7,57,80,1);

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.carouseller .carouseller__left { left: -50px; }
.carouseller .carouseller__right { right: -50px; }

[class*="car_"] { 
height:200px; 
text-align: center; 
font-size: 30px; 
font-weight: bold; 
border-radius:100%;
background: rgba(255,194,0,1);
}

[class*="car_"] img { 
display:inline-block;
width:100%;
height:100%;
border-radius:100%;
border:solid 10px rgba(140,140,140,1);
cursor:pointer;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

[class*="car_"] img:hover { 
border:solid 10px rgba(0,0,0,0);
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.carouseller { margin: 100px 0px 50px 0px;}

#carousel {
display:block;
position:relative;
width:960px;
height:200px;
margin:100px auto 150px auto;
}

/*------Responsive-----------*/
/* Portrait tablet to landscape and desktop */
@media (min-width: 769px) and (max-width: 1024px) { 

#carousel {
width:92%;
}

.carouseller .car_img { 
width: 200px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

/* Landscape phone to portrait tablet */
@media only screen and  (max-width: 768px) {

#carousel {
width:80%;
}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
bottom: 50px;
}

.carouseller .car_img { 
width: 260px;
height:260px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

/* Landscape phones and down */
@media only screen and (max-width: 414px) {

#carousel {
width:80%;
}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
bottom: 55px;
}

.carouseller .car_img { 
width: 255px;
height:255px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

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

#carousel {
width:80%;
}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
bottom: 55px;
}

.carouseller .car_img { 
width: 255px;
height:255px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

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

#carousel {
width:80%;
}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
bottom: 55px;
}

.carouseller .car_img { 
width: 255px;
height:255px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

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

#carousel {
width:80%;
}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
bottom: 55px;
}

.carouseller .car_img { 
width: 238px;
height:238px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

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

#carousel {
width:80%;
}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
bottom: 55px;
}

.carouseller .car_img { 
width: 230px;
height:230px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

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

#carousel {
width:80%;
}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
bottom: 65px;
}

.carouseller .car_img { 
width: 218px;
height:218px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

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

#carousel {
width:80%;
}

.carouseller .carouseller__left,  .carouseller .carouseller__right {
bottom: 85px;
}

.carouseller .car_img { 
width: 185px;
height:185px;
}

.carouseller .carouseller__left { left: -20px;}
.carouseller .carouseller__right { right: -20px;}

}

