.slider_frame {
	position: relative;
	width: 100vw;
	height: 50vh;
	overflow: hidden;
}

.slider_frame:active figure a img {
	box-shadow: 2px 2px 4px rgb(80, 80, 80);
}

.slider_frame figure.image.img-center {
	position: absolute;
	max-width: 100%;
	width: 90%;
	padding-inline: 5%;
	height: 48vh;
	transform: translateX(100%);
}

.slider_nav_block{
    display: block;
    position: absolute;
    width: 100vw;
    height: 50vh;
}

#btn_prev{
    display: none;
}

#btn_next{
    display: none;
}

@media screen and (min-width: 981px), (orientation: landscape){

.slider_test {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 50vw;
	margin-bottom: 5%;
}

.slider_frame {
	background-color: rgba(160, 160, 150, 0.7);
	position: relative;
	width: 76%;
	height: 50vh;
	overflow: hidden;
	border-radius: 0.5em;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6) inset;
}

.slider_nav_block {
	display: none;
}

.slider_frame figure.image.img-center {
	position: absolute;
	max-width: 100%;
	width: 100%;
	height: 48vh;
	padding-inline: 0%;
	margin: 1vh auto 1vh auto;
	transform: translateX(100%);
}

.slider_frame:active figure a img {
	box-shadow: 2px 2px 4px rgb(80, 80, 80);
}

.slider_frame figure a img {
	height: 100%;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
}

.slider_frame figure.portrait a img{
	height: 100%;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
}

.slider_frame figure.paysage a img{
	height: 44vh;
	margin-block: 2vh;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
}

.slider_btn_prev {
	width: 8%;
	border-radius: 0.3em 0 0 0.3em;
}

.slider_btn_prev::before {
	content: "arrow_back_ios_new";
    color: var(--hover-link-color);
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 200ms ease-in-out;
}

.slider_btn_prev:hover::before {
    opacity: 1;   
}

.slider_btn_prev::after {
    content: "arrow_back_ios_new";
    z-index: -1;
    opacity: 1;
    transition: opacity 200ms ease-in-out;
}

.slider_btn_prev:hover::after {
    opacity: 0;
}


.slider_btn_next {
	width: 8%;
	border-radius: 0 0.3em 0.3em 0;
}

.slider_btn_next::before {
    content: "arrow_forward_ios";
    color: var(--hover-link-color);
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 200ms ease-in-out;
}

.slider_btn_next:hover::before {
    opacity: 1;
}

.slider_btn_next::after {
    content: "arrow_forward_ios";
    z-index: -1;
    opacity: 1;
    transition: opacity 200ms ease-in-out;
}

.slider_btn_next:hover::after {
    opacity: 0;
}

}