.portfolio-s1{
	height:28rem;
}
.portfolio-m1{
	padding-top:10rem;
	padding-bottom:10rem;
}
.portfolio-m2{
	margin-bottom:2rem;
	margin-top:2rem;
}
.portfolio-m3{
	margin-right:1rem;
}
.portfolio-m4{
	/*used*/
}
.portfolio-e1{
	padding:1rem 3rem;
	border-radius:3rem;
	background-color:var(--c4);
	color:white;
	font-size:1.3rem;
	border:0;
	box-shadow:0 1rem 1rem -0.5rem var(--c4);
	transition:all 0.2s;
	top:0;
	min-height:5rem;
}
.portfolio-e1:hover{
	top:-0.4rem;
	box-shadow:0 2.5rem 1rem -2rem var(--c4);
}
.portfolio-e1{
	overflow:hidden;
}
.portfolio-e1::after{
	content:'';
	display:block;
	width:30px;
	height:300px;
	margin-left:60px;
	background:linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
	position:absolute;
	top:-100px;
	z-index:100;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	transition:all 0.1s;
	animation:portfolio-a1 infinite ease-in-out 3s;
	animation-delay:0.05s;
}
.portfolio-e2{
	padding:1rem;
	background-color:var(--c1);
	border-radius:1.5rem;
}
.portfolio-e2 img{
	width:1rem;
	height:1rem;
	filter:brightness(0);
}
.portfolio-e2::after{
	content:'';
	z-index:500;
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0);
	top:0;
	left:0;
}
.portfolio-e3{
	border-radius:1.5rem;
	position:absolute;
	top:50%;
	transform:translate(0%,-50%);
}
.portfolio-e3 img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.portfolio-e4::after{
	content:'';
	z-index:500;
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0);
	top:0;
	left:0;
}
.portfolio-e5{
	width:3rem;
	height:3rem;
	position:absolute;
	top:50%;
	left:-4rem;
	transform:translate(0%,-50%);
}
.portfolio-e5 img{
	padding:0.7rem;
	width:100%;
	height:100%;
}
.portfolio-e6{
	width:3rem;
	height:3rem;
	position:absolute;
	top:50%;
	right:-4rem;
	transform:translate(0%,-50%);
}
.portfolio-e6 img{
	padding:0.7rem;
	width:100%;
	height:100%;
}
.portfolio-e7{
	width:100%;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:row;
	align-items:center;
	align-content:center;
}
.portfolio-e7::before{
	display:flex;
	content:'';
	width:10px;
	height:10px;
	border-radius:50%;
	background:rgba(72, 255, 6, 0.3);
	border:3px solid var(--c4);
	margin-right:1rem;
	transition:all 0.3s;
	transform:scale(1,1);
}
.portfolio-e7:hover::before{
	transform:scale(1.5,1.5);
}
.portfolio-e8{
	width:100%;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:column;
	grid-gap:1rem;
	padding-left:2rem;
}

@media screen and (max-width:1200px){
	.portfolio-m4{
		margin-top:5rem;
	}
}
@media screen and (max-width:1000px){
	.portfolio-s1{
		height:25rem;
	}
	.portfolio-e5{
		width:2rem;
		height:2rem;
		left:-2.5rem;
	}
	.portfolio-e5 img{
		padding:0.5rem;
		border-radius:50%;
		background:black;
	}
	.portfolio-e6{
		width:2rem;
		height:2rem;
		right:-2.5rem;
	}
	.portfolio-e6 img{
		padding:0.5rem;
		border-radius:50%;
		background:black;
	}
}
@media screen and (max-width:850px){
	.portfolio-e5{
		z-index:100;
		left:-1rem;
	}
	.portfolio-e6{
		z-index:100;
		right:-1rem;
	}
}
@media screen and (max-width:700px){
	.portfolio-m3{
		margin-left:1rem;
		margin-right:0.6rem;
	}
	.portfolio-m4{
		margin-top:3rem;
	}
	.portfolio-e1{
		font-size:1.1rem;
		padding:1rem;
		min-height:unset;
	}
	.portfolio-e2{
		padding:0.6rem;
	}
}

@keyframes portfolio-a1{
	0% { left:-60px; margin-left:0px; }
	30% { left:110%; margin-left:80px; }
	100% { left:110%; margin-left:80px; } 
}