.border-slide-in-transition {
	position: relative;
}

.border-slide-in-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.border-slide-in-line {
	background-color: #00ff00;
	position: absolute;
}

.vertical {
	width: 1vw;
	height: 100%;
}

.horizontal {
	width: 100%;
	height: 1vw;
}

.border-slide-in-transition > .border-slide-in-wrapper > .border-slide-in-line:nth-child(1) {
	top: -100%;
	left: 0%;
	transition: top 0.5s ease-in-out;
}
.border-slide-in-transition > .border-slide-in-wrapper > .border-slide-in-line:nth-child(2) {
	bottom: 0%;
	left: -100%;
	transition: left 0.5s ease-in-out;
}
.border-slide-in-transition > .border-slide-in-wrapper > .border-slide-in-line:nth-child(3) {
	bottom: -100%;
	right: 0%;
	transition: bottom 0.5s ease-in-out;
}
.border-slide-in-transition > .border-slide-in-wrapper > .border-slide-in-line:nth-child(4) {
	top: 0%;
	right: -100%;
	transition: right 0.5s ease-in-out;
}

.border-slide-in-transition > .border-slide-in-wrapper > .hovered:nth-child(1) {top: 0%;}
.border-slide-in-transition > .border-slide-in-wrapper > .hovered:nth-child(2) {left: 0%;}
.border-slide-in-transition > .border-slide-in-wrapper > .hovered:nth-child(3) {bottom: 0%;}
.border-slide-in-transition > .border-slide-in-wrapper > .hovered:nth-child(4) {right: 0%;}