.newportifolio{
	display: flex;;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	justify-content: space-around;
}

.newportifolio .item{
	position: relative;
	width: 25%;
	padding-bottom: 24%;
}

@media screen and (max-width: 960px) {
	.newportifolio .item{
		width: 33.333%;
		padding-bottom: 32%;		
	}	
}

@media screen and (max-width: 760px) {
	.newportifolio .item{
		width: 50%;
		padding-bottom: 50%;				
	}	
}

@media screen and (max-width: 425px) {
	.newportifolio .item{
		width: 100%;
		padding-bottom: 90%;				
	}	
}

.newportifolio .item a{
	text-align: center;
	display: block;
	width: 100%;
	position: absolute;
	margin-top: 80%;
	text-decoration: none;
	text-transform: uppercase;
	color: #CCC;
	font-weight: 600;
}

.newportifolio .item a:hover{
	color: #999999;
}

.newportifolio .item .devices{
	position: absolute;
	width: 100%;
	height: auto;
}

.newportifolio .item .devices.celular{
	z-index: 4;
}

.newportifolio .item .devices.mobile{
	z-index: 2;
}

.newportifolio .item .screenm{
	position: absolute;
	z-index: 1;
	overflow: hidden;
	background-color: rgb(33, 33, 33);
	width: 73%;
	height: 0;
	padding-bottom: 47%;
	margin-top: 9%;
	margin-left: 9.5%;
}

.newportifolio .item .screenc{
	position: absolute;
	z-index: 3;
	overflow: hidden;
	background-color: rgb(33, 33, 33);
	width: 21%;
	height: 0;
	padding-bottom: 35%;
	margin-top: 32%;
	margin-left: 72%;
}

.newportifolio .item .screenm img{
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
	animation: monitor var(--time) infinite;	
}

.newportifolio .item .screenc img{
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
	animation: celular 10s infinite;	
}

@keyframes monitor {
	0%{
		top: 0;
	}
	50%{
		top: var(--my-h);
	}
	100%{
		top: 0px;
	}	
}

@keyframes celular {
	0%{
		top: 0;
	}
	50%{
		top: var(--my-h);
	}
	100%{
		top: 0px;
	}	
}