.main {
    width: 100%;
    margin: auto;
    overflow: hidden;
    color: #ffffff;
    min-height:200px;
    max-height:600px;
    background-color:#053a77;
}

.slider {
    position: relative;
}
.slider .slider-parent {
    padding: 0;
    display: flex;
}
.slider .slider-parent .images-list {
    background-size: cover;
}
.slider .slider-parent .images-list:first-of-type, .slider .slider-parent .images-list:last-of-type {
    background-image: url("https://depotschool.com/img/banner.jpg")
}
.slider .slider-parent .images-list:nth-of-type(2) {
    background-image: url(https://depotschool.com/img/banner2.jpg)
}
.slider .slider-parent .images-list:nth-of-type(3) {
    background-image: url(https://depotschool.com/img/banner3.jpg)
}
.slider .slider-parent .images-list:nth-of-type(4) {
    background-image: url(https://depotschool.com/img/banner4.jpg)
}
.slider .slider-parent .images-list:nth-of-type(5) {
    background-image: url(https://depotschool.com/img/banner5.jpg)
}
.slider .slider-parent .images-list:nth-of-type(6) {
    background-image: url(https://depotschool.com/img/banner-new-1.jpg)
}
.slider .buttom-circles {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    bottom: 200px
}
.slider .buttom-circles .buttom-circles-list {
    display: inline-block
}
.slider .buttom-circles .buttom-circles-list:hover .fa:before, .slider .buttom-circles .buttom-circles-list.slider-active .fa:before {
    content: "\f111";
}
.slider > .fa {
    position: absolute;
    top: 45%
}
.slider > .fa:first-of-type { right: 50px}
.slider > .fa:last-of-type { left: 10px}
.slider .fa {
    text-shadow: 5px 5px 5px #555;
    cursor: pointer
}
 
@media(min-width: 100px) and (max-width: 767px) {
    .slider > .fa { font-size: 5px }
    .slider .buttom-circles .buttom-circles-list { visibility: hidden }
    
}
@media(min-width: 768px) and (max-width: 991px) { 
    .slider > .fa { font-size: 10px }
    .slider .buttom-circles .buttom-circles-list { visibility: hidden }
}
@media(min-width: 992px) and (max-width: 1199px) { 
    .slider > .fa { font-size: 15px }
    .slider .buttom-circles .buttom-circles-list { font-size: 5px }
}
@media(min-width: 1200px) { 
    .slider > .fa { font-size: 25px }
    .slider .buttom-circles .buttom-circles-list { font-size: 5px }
}