/* ENTRADA */
section { padding: 120px 0px 0px 0px; position: relative; width: 100%; height: auto; }

/*FUNCIONALIDADES*/
.funcionalidades { width: 100%; height: auto; position: relative; z-index: 2; margin: 0px; padding: 0px 0px 40px 0px; }
.funcionalidades ul { width: 100%; height: auto; position: relative; list-style-type: none; text-align: center; }
.funcionalidades ul li { width: 100%; height: auto; position: relative; text-align: center; display: inline-block; vertical-align: top; margin: 30px 0px 10px 0px; clear: both; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.funcionalidades ul li .avatar { width: 270px; height: 200px; position: relative; overflow: hidden; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
.funcionalidades ul li .avatar img { width: 100%; height: auto; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.funcionalidades ul li .detalhes { width: -moz-calc(100% - 370px); width: -webkit-calc(100% - 370px); width: -o-calc(100% - 370px); width: calc(100% - 370px); height: auto; position: relative; display: inline-block; vertical-align: top; margin: 0px; padding: 0px; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
.funcionalidades ul li .detalhes .intro { width: 100%; padding: 0px 0px 20px 0px; letter-spacing: -1px; height: auto; color: var(--cor-texto); font-family: var(--fonte-padrao); text-align: left; font-size: 24px; font-weight: 700; line-height: 30px; }
.funcionalidades ul li .detalhes p { width: 100%; padding: 0px; height: auto; color: var(--cor-texto); text-align: left; font-size: 14px; line-height: 24px; }
.funcionalidades ul li:nth-child(even) .avatar { float: left; margin: 0px 45px 0px 0px; }
.funcionalidades ul li:nth-child(even):hover .avatar { margin: 0px 45px 0px 20px; }
.funcionalidades ul li:nth-child(odd) .avatar { float: right; margin: 0px 0px 0px 45px; }
.funcionalidades ul li:nth-child(odd):hover .avatar { margin: 0px 20px 0px 45px; }
.funcionalidades ul li:hover .detalhes { padding: 0px 0px 0px 35px; }

@media screen and (max-width: 1100px) {
	section { padding: 55px 0px 0px 0px; }

	/*FUNCIONALIDADES*/
	.funcionalidades { width: 96%; padding: 10px 2% 40px 2%; }
	.funcionalidades ul li { margin: 0px 0px 30px 0px; }
	.funcionalidades ul li .avatar { width: 94%; height: auto; margin: 0px 2% 15px 2%; }
	.funcionalidades ul li .avatar img { width: auto; max-width: 100%; }
	.funcionalidades ul li .detalhes { width: 100%; padding: 0px 0px 30px 0px; }
	.funcionalidades ul li .detalhes .intro, .funcionalidades ul li .detalhes p { text-align: center; }
	.funcionalidades ul li:nth-child(even) .avatar, .funcionalidades ul li:nth-child(even):hover .avatar, .funcionalidades ul li:nth-child(odd) .avatar, .funcionalidades ul li:nth-child(odd):hover .avatar { margin: 0px 2% 15px 2%; float: none; display: inline-block; vertical-align: top; position: relative; }	
	.funcionalidades ul li:hover .detalhes { padding: 0px 0px 30px 0px; }
}