/** code by webdevtrick ( https://webdevtrick.com ) **/
/*dicovered 2019/09/16...further developed 2021/03/01 for Euchler Software*/

* {
	/*IMPORTANT for sizing 2019/09/16*/
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

ul, ol {
    list-style: none
}

/*called "main" in original code*/
.container_slider {
    width: 75%;
	max-width: 900px;
    margin: auto;
    overflow: hidden;
	position: relative;
	background: #5d5c61;
	border-radius: 15px; 
}
.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(../pics/pic_hb_1.png)
}
.slider .slider-parent .images-list:nth-of-type(2) {
	background-image: url(../pics/pic_hb_2.png)
}
.slider .slider-parent .images-list:nth-of-type(3) {
	background-image: url(../pics/pic_hb_3.png)
}
.slider .slider-parent .images-list:nth-of-type(4) {
	background-image: url(../pics/pic_hb_4.png)
}
.slider .slider-parent .images-list:nth-of-type(5) {
	background-image: url(../pics/pic_hb_5.png)
}
.slider .slider-parent .images-list:nth-of-type(6) {
	background-image: url(../pics/pic_6.JPG)
}
.slider .buttom-circles {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    bottom: 10px;
	background: transparent
}
.slider .buttom-circles .buttom-circles-list {
    display: inline-block;
	background: transparent
}
.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; color: white; background: transparent}
.slider > .fa:last-of-type { left: 5px; color: white; background: transparent}
.slider .fa {
    text-shadow: 5px 5px 5px #555;
    cursor: pointer;
	color: white;
	background: transparent
}
 
@media(min-width: 10px) and (max-width: 600px) {
	.container_slider { 
	display: none;
	}
}
@media(min-width: 601px) and (max-width: 900px) { 
    .slider > .fa { font-size: 25px }
	.slider .buttom-circles .buttom-circles-list { font-size: 8px }
	.container_slider {
	width: 100%
	display: block;
	}
}
@media(min-width: 901px) and (max-width: 1099px) { 
    .slider > .fa { font-size:35px  }
    .slider .buttom-circles .buttom-circles-list { font-size: 8px }
}
@media(min-width: 1100px) { 
    .slider > .fa { font-size: 45px  }
    .slider .buttom-circles .buttom-circles-list { font-size: 8px }
}