:root {
    --ok-coal: hsl(218deg 26% 20% / 10%);
} 

.avtor2.two {
	border: 0px;
}

#nextprev {
    padding-inline: clamp(0rem, -17.9375rem + 41.0000vw, 5.125rem);
    margin-block: 0 70px;
    border-block-start: 2px solid var(--ok-col-acent-red);
}

#nextprev .flex {
	display: flex;
	align-items: stretch;
	background-color: #ffffff;
	box-shadow: 0px 0px 20px -10px rgb(0 0 0 / 30%);
	border-radius: 0 0 clamp(0rem, -5.6875rem + 13.0000vw, 1.625rem) clamp(0rem, -5.6875rem + 13.0000vw, 1.625rem);
	flex-direction: row;
	justify-content: center;
	flex-wrap: nowrap;
	padding-block: 2.8rem;
}

@media screen and (max-width: 700px) {
#nextprev .flex {
    flex-direction: column-reverse;
}
}

#nextprev .prev_item {
	width: 50%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

#nextprev .prev_item div:last-of-type, #nextprev .next_item div:first-of-type {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
}

#nextprev .prev_item div:last-of-type {align-items: flex-start;padding-inline-end: clamp(3.75rem, 3.0192rem + 0.9736vw, 4.1875rem);}
#nextprev .next_item div:first-of-type {align-items: flex-end;padding-inline-start: clamp(3.75rem, 3.0192rem + 0.9736vw, 4.1875rem);}

#nextprev .next_item {
	width: 50%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

@media screen and (max-width: 700px) {
#nextprev .prev_item, #nextprev .next_item {
	width: 100%;
}
}

#nextprev .prev_item a {
	display: flex;
	align-items: center;
	position: relative;
	text-decoration: none;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

#nextprev .aback, #nextprev .aforward {
	padding: 20px;
	min-width: clamp(3.75rem, 3.0192rem + 0.9736vw, 4.1875rem);
	margin-inline: clamp(0.6rem, -0.9033rem + 2.0028vw, 1.5rem);
}

#nextprev .next_item a{
	display: flex;
	align-items: center;
	position: relative;
	text-decoration: none;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

#nextprev .vertline {
	width: 1px;
	height: auto;
	margin: 0 4vw;
	background-color: var(--ok-coal);
}

@media screen and (max-width: 700px) {
#nextprev .vertline {
	width: auto;
	height: 1px;
	margin: 33px;
}
}

#nextprev .date, #nextprev .avtor {font-family: 'Nunito Sans';margin: 0;font-size: clamp(0.84rem, 0.5727rem + 0.3561vw, 1rem);font-stretch: 95%;font-weight: 630;letter-spacing: .005em;font-optical-sizing: auto;color: var(--ok-col-base-blue);opacity: 60%;line-height: 1.2em;}

#nextprev .title {font-family: 'Literata';color: var(--ok-col-base-blue);margin: 0;font-size: clamp(1rem, 0.1648rem + 1.1127vw, 1.5rem);font-optical-sizing: none;font-weight: 720;letter-spacing: -.02em;word-spacing: .03em;line-height: 1.24em;margin-block: 0.4em 0.8em;}

#nextprev .next_item .title, #nextprev .next_item .date, #nextprev .next_item .avtor {
    text-align: end;
}

#nextprev .prev_item .title, #nextprev .prev_item .date, #nextprev .prev_item .avtor {
    text-align: start;
}

#nextprev a {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	z-index: 2;
}

#nextprev a:after {
	display: none;
}

#nextprev .aforward img, #nextprev .aback img {
    animation-play-state: running;
    animation-direction: normal;
    animation-duration: 3.3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.59, 0.33, 0.41, 0.74);
}

#nextprev .aforward img {
	animation-name: red-next;
}

#nextprev .aback img {
	animation-name: red-prev;
}

@keyframes red-next {
    13% {
		transform: translateX(0px)
	}
	 33% {
		transform: translateX(16px)
	}
}

@keyframes red-prev {
    13% {
		transform: translateX(0px)
	}
	 33% {
		transform: translateX(-16px)
	}
}