/* PRODUTOS */
section { padding: 150px 0px 75px 0px; }

/*SOLUÇÕES*/
.portfolio { width: 100%; height: auto; position: relative; clear: both; padding: 40px 0px 0px 0px; text-align: center; }
.portfolio .titulo_bloco { color: #ffffff !important; z-index: 2; }
.portfolio ul { width: 100%; height: auto; position: relative; text-align: left; display: flex; justify-content: space-between; flex-wrap: wrap; z-index:5; gap:15px; padding: 30px 0px 0px 0px; }
.portfolio ul li { width: 25%; box-sizing: border-box; height: 300px; margin: 0px 0px 10px 0px; position: relative; display: inline-block; vertical-align: top; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; text-align: left; overflow:hidden; }
.portfolio ul li:before { width: 100%; height: 100%; cursor: pointer; pointer-events: none; position:absolute; z-index:1; content:''; left:0px; top:0px; background-color: var(--cor-primaria); opacity:0.5; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;  }
.portfolio ul li:nth-child(6n+3), .portfolio ul li:nth-child(6n+4) { width: calc(45% + 15px); }
.portfolio ul li .avatar { width: 100%; height: 300px; position: relative; overflow: hidden; display: block; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; overflow:hidden; background-size: cover; background-position:center; }
.portfolio ul li .avatar .view { position: absolute; left: 0px; bottom: 0px; padding: 20px 25px; width: -moz-calc(100% - 50px); width: -webkit-calc(100% - 50px); width: -o-calc(100% - 50px); width: calc(100% - 50px); height: auto; z-index: 11; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
.portfolio ul li .avatar .view .titulo_solucao { width: 100%; height: auto; position: relative; font-family: var(--fonte-padrao); color: #ffffff; line-height: 20px; letter-spacing: -1px; clear: both; font-size: 18px; padding: 0px; text-align: left; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; font-weight:800; }
.portfolio ul li:hover .avatar .view { bottom:10px; }
.portfolio ul li:hover:before { background-color: rgba(49, 49, 49, 0.5); }

@media screen and (max-width: 1100px) {
	section { padding: 60px 0px 30px 0px !important; }

	/*PORTFÓLIO*/
	.portfolio ul { width: 96%; text-align: center; padding: 0px 2%; }
	.portfolio ul li { width: 100%; height: 250px; }
	.portfolio ul li:nth-child(6n+3), .portfolio ul li:nth-child(6n+4) { width: 100%; }
	.portfolio ul li .avatar { height: 250px; }
}