.swiper-pagination-bullet { background: #e1e1e1; border: solid 1px #aaa; opacity: 1 } .swiper-pagination-bullet.swiper-pagination-bullet-active { border: solid 1px #e6421e; background: #e6421e } .swiper-container { width: 100% } .swiper-pagination-bullet-active { background: #e6421e; width: 20px; height: 20px } .swiper-pagination-bullet { width: 12px; height: 12px } .swiper-button-prev::before { font-size: 42px } .swiper-button-next::before { font-size: 42px } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { display: block } .swiper-slide { text-align: center; font-size: 18px; height: auto; background: #ccc; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center } .swiper-slide img { max-width: 100%; height: auto } .swiper-button-next, .swiper-button-prev { display: none } .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets { bottom: 0!important; float: left; position: relative; padding: 20px } @media(min-width: 600px) { .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets { bottom: 50px!important } .swiper-button-prev { left: 1% } .swiper-button-next { right: 1% } } @media(min-width:768px) { .swiper-button-prev { left: 2% } .swiper-button-next { right: 2% } } @media(min-width: 992px) { .swiper-button-next, .swiper-button-prev { display: block; } .swiper-button-prev { left: 15% } .swiper-button-next { right: 15% } } @media(min-width: 1024px) { .swiper-button-prev { left: 15% } .swiper-button-next { right: 15% } } .swiper-button-next { position: absolute; width: 50px; height: 50px; line-height: 1; font-size: 4rem; padding: 4px 0 0 4px; border-radius: 50%; background: #fff; color: #d52d30; opacity: .8; margin-top: 0; margin-bottom: 0; top: 42%; } .swiper-button-next:hover{ box-shadow: -2px 0 2px 0 rgba(0, 0, 0, .2); opacity: 1; } .swiper-button-next::before { content: '\e602'; color: #d52d30; text-align: center; display: block; } .swiper-button-prev:hover{ box-shadow: 2px 0 2px 0 rgba(0, 0, 0, .2); opacity: 1; } .swiper-button-prev { position: absolute; width: 50px; height: 50px; line-height: 1; font-size: 4rem; padding: 5px 2px 0px 0px; border-radius: 50%; background: #fff; color: #d52d30; opacity: .8; margin-top: 0; margin-bottom: 0; top: 42%; } .swiper-button-prev::before { content: "\e621"; color: #d52d30; text-align: center; display: block; } .swiper-slide.swiper-slide-active img { opacity: 1 } .swiper-slide img { opacity: .3 } .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets { bottom: 0!important; position: relative; padding: 10px 0 5px 0; } .box-available-serv-holder { background: #eee; padding: 10px 20px; margin-bottom: 20px; } @media (min-width: 600px) { .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets { position: absolute; bottom: 15px!important; left: 50%; padding: 0; width: auto; margin-left: -100px; } }