.portfolio {position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;}
.portfolio { opacity: 0; z-index: -100000;}
.portfolio.active {opacity: 1; z-index: 1000;}

.portfolio .filter {position: absolute; top: 0; left: 0; background: #00000000; z-index: -1; height: 100%; width: 100%; transition: 0.8;}
.portfolio.active .filter {background: #00000073;}

.portfolio .conteudo {position: relative; max-width: 90%; margin: 0 auto; transform: scale(0); transition: 0.6s; width: 1130px;}
.portfolio.active .conteudo {transform: scale(1);}
.portfolio .conteudo .img {width: 100%; height: 100%; max-height: 100%; max-width: 100%; display: block; max-height: 80vh; aspect-ratio: 1 / 1;}
.portfolio .conteudo .img img {width: 100%; height: 100%; object-fit: cover; background: #000; display: block;}

.portfolio .conteudo .setas .seta {transform: translatex(20px);}
.portfolio .conteudo .setas .seta.esquerda {transform: translatex(-20px) rotate(180deg);}

.portfolio .conteudo .close {width: 15%; height: 15%; max-width: 50px; max-height: 50px; position: absolute; border-radius: 100%; background: #f23232; right: -1.5%; top: -3%; display: flex; justify-content: center; align-items: center; z-index: 1000; box-shadow: 0 0 9px 2px #d0090991; transition: 0.3s; cursor: pointer;}
.portfolio .conteudo .close:hover {transform: scale(1.04); background: #000;}
.portfolio .conteudo .close .rec {width: 40%; height: 3px; background-color: #ffffff; position: absolute; border-radius: 100%;}
.portfolio .conteudo .close .rec.rec-1 {transform: rotate(45deg);}
.portfolio .conteudo .close .rec.rec-2 {transform: rotate(-45deg);}

@media (max-width: 600px) {
     .portfolio .conteudo .setas .seta {width: 25px; height: 25px; padding: 8px; transform: translatex(15px);}    
     .portfolio .conteudo .setas .seta.esquerda {transform: translatex(-15px) rotate(180deg);}
}