.portfolio-i1{
	width:100%;
	height:auto;
	object-fit:cover;
	object-position:center;
	border-radius:2rem;
}
.portfolio-m1{
	margin-top:2.5rem;
	margin-bottom:2.5rem;
}
.portfolio-e1{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	grid-gap:1.2rem;
}
.portfolio-e1 img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	object-position:center;
	border-radius:1rem;
	opacity:0.6;
	transition:all 0.3s;
}
.portfolio-e1 img:hover{
	opacity:1;
}
.portfolio-e2{
	padding-top:8rem;
	padding-bottom:8rem;
	background:rgb(30,33,45);
	background:linear-gradient(90deg, rgba(20,20,20,1) 0%, rgba(40,40,40,1) 100%);
}
.portfolio-e4{
	padding:0.6rem 1rem;
	border-radius:3rem;
	background-color:var(--c4);
	color:white;
	font-size:1.2rem;
	border:0;
	box-shadow:0 1rem 1rem -0.5rem var(--c4);
	transition:all 0.2s;
	top:0;
	min-width:max-content;
	margin-left:1rem;
	min-height:4.5rem;
}
.portfolio-e4:hover{
	top:-0.4rem;
	box-shadow:0 2rem 1.5rem -1.3rem var(--c4);
}
.portfolio-e4{
	overflow:hidden;
}
.portfolio-e4::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 5s;
	animation-delay:0.05s;
}
@keyframes portfolio-a1{
	0% { left:-60px; margin-left:0px; }
	20% { left:110%; margin-left:80px; }
	100% { left:110%; margin-left:80px; } 
}
.portfolio-e5{
	border:0;
	padding:0.5rem;
	margin-top:2rem;
	background:rgba(255,255,255,0);
	position:relative;
}
.portfolio-e6{
	grid-column:1/-1;
}
.portfolio-e7{
	position:sticky;
	top:10rem;
}
.portfolio-e8{
	flex-wrap:nowrap !important;
}

@media screen and (max-width:1300px){
	.portfolio-e1{
		display:grid;
		grid-template-columns:repeat(4, 1fr);
		grid-gap:1rem;
	}
}

@media screen and (max-width:1200px){
	.portfolio-e1{
		grid-template-columns:repeat(3, 1fr);
	}
}

@media screen and (max-width:1000px){
	.portfolio-e1{
		grid-template-columns:repeat(5, 1fr);
		margin-top:5rem;
	}
}

@media screen and (max-width:800px){
	.portfolio-e2{
		padding-top:5rem;
		padding-bottom:5rem;
	}
	.portfolio-m2{
		margin-bottom:3rem;
	}
	.portfolio-e1{
		grid-template-columns:repeat(4, 1fr);
	}
}

@media screen and (max-width:500px){
	.portfolio-e8{
		flex-wrap:wrap !important;
	}
	.portfolio-e8 button{
		margin:1.5rem 0 0 0;
		width:100%;
	}
}