* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
/*body {
	margin-top: 5%;
}*/
ul, ol {
    list-style: none
}
.main {
    width: 100%;
    margin: auto;
    overflow: hidden;
    color: #fff
}
.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(banner/B1.JPG)
}
.slider .slider-parent .images-list:nth-of-type(2) {
    background-image: url(banner/B2.jpeg)
}
.slider .slider-parent .images-list:nth-of-type(3) {
    background-image: url(banner/banner15.jpg)
}
.slider .slider-parent .images-list:nth-of-type(4) {
    background-image: url(banner/B3.jpeg)
}
.slider .slider-parent .images-list:nth-of-type(5) {
    background-image: url(banner/banner10.jpg)
}
.slider .slider-parent .images-list:nth-of-type(6) {
    background-image: url(banner/banner7.png)
}
.slider .slider-parent .images-list:nth-of-type(7) {
    background-image: url(banner/16B.jpg)
}
.slider .buttom-circles {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    bottom: 10px
}
.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: 5px}
.slider > .fa:last-of-type { left: 5px}
.slider .fa {
    text-shadow: 5px 5px 5px #555;
    cursor: pointer
}
 
@media(min-width: 100px) and (max-width: 767px) {
    .slider > .fa { font-size: 20px }
    .slider .buttom-circles .buttom-circles-list { visibility: hidden }
}
@media(min-width: 768px) and (max-width: 991px) { 
    .slider > .fa { font-size: 20px }
    .slider .buttom-circles .buttom-circles-list { visibility: hidden }
}
@media(min-width: 992px) and (max-width: 1199px) { 
    .slider > .fa { font-size: 20px }
    .slider .buttom-circles .buttom-circles-list { font-size: 17px }
}
@media(min-width: 1200px) { 
    .slider > .fa { font-size: 20px }
    .slider .buttom-circles .buttom-circles-list { font-size: 25px }
}