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

/*CONEXÃO*/
.conexao { width: 100%; height: auto; position: relative; text-align: left; display: block; padding: 0px 0px 30px 0px; }
.conexao .numeros { width: 100%; height: auto; position: relative; z-index: 10; text-align: center; 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; }
.conexao .numeros ol { width: auto; position: relative; text-align: center; height: auto; display: inline-block; vertical-align: top; }
.conexao .numeros ol li { width: 210px; height: auto; line-height: 55px; min-height: 120px; background-color: #ffffff; position: relative; margin: 15px 15px 25px 15px; padding: 10px 15px; color: #2d2d2d; font-size: 18px; font-weight: 700; font-family: var(--fonte-padrao); -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; text-align: center; letter-spacing: -1px; display: inline-block; vertical-align: top; }
.conexao .numeros ol li:hover { box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; }
.conexao .numeros ol li .avatar { width: 45px; height: 45px; margin: 5px 0px; position: relative; overflow: hidden; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.conexao .numeros ol 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; }
.conexao .numeros ol li p { width: 100%; font-weight: 400; height: auto; font-size: 12px; border-top: 1px solid #f4f6f8; text-align: center; line-height: 16px; letter-spacing: 0px; padding: 15px 0px 12px 0px; }
.conexao .numeros ol li:hover { background-color: #ffffff; margin: 5px 15px 35px 15px; }

/*FUNCIONALIDADES*/
.funcionalidades { width: 100%; height: auto; position: relative; z-index: 2; margin: 0px; padding: 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; 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: 570px; height: 500px; position: relative; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -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% - 670px); width: -webkit-calc(100% - 670px); width: -o-calc(100% - 670px); width: calc(100% - 670px); height: auto; position: relative; display: inline-block; vertical-align: top; margin: 0px; padding: 50px 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: #000000; 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: #000000; text-align: left; font-size: 13px; line-height: 22px; }
.funcionalidades ul li .locais { width: 100%; height: auto; position: relative; z-index: 10; text-align: center; 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; padding: 10px 0px 0px 0px; }
.funcionalidades ul li .locais ol { width: auto; position: relative; text-align: center; height: auto; display: inline-block; vertical-align: top; }
.funcionalidades ul li .locais ol li { width: 100%; height: auto; position: relative; margin: 10px 0px; padding: 0px; -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; display: inline-block; vertical-align: top; overflow: hidden; }
.funcionalidades ul li .locais ol li .ico { width: 50px; height: 50px; margin: 0px 15px 20px 0px; position: relative; overflow: hidden; float: left; -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 .locais ol li .ico img { width: auto; max-width: 100%; max-height: 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;  top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;}
.funcionalidades ul li .locais ol li:hover .ico { margin: 0px 10px 20px 5px; }
.funcionalidades ul li .locais ol li .titulo_funcionalidade { width: 100%; height: auto; position: relative; line-height: 20px; color: #2d2d2d; font-size: 16px; font-weight: 700; font-family: var(--fonte-padrao); padding: 0px; }
.funcionalidades ul li .locais ol li p { width: 100%; font-weight: 400; height: auto; font-size: 12px; text-align: left; line-height: 16px; letter-spacing: 0px; padding: 0px 0px 12px 0px; }
.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: 50px 0px 50px 35px; }

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

	/*CONEXÃO*/
	.conexao { width: 94%; text-align: center; display: block; padding: 0px 3% 25px 3%; }
	.conexao .numeros { width: 100%; margin-left: 0px; padding-top: 0px; height: auto; position: relative; z-index: 10; text-align: center; }
	.conexao .numeros ol { width: 100%; }
	.conexao .numeros ol li, .conexao .numeros ol li:hover { width: -moz-calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -o-calc(100% - 30px); width: calc(100% - 30px); margin: 5px 5px; padding: 10px; }

	/*FUNCIONALIDADES*/
	.funcionalidades { width: 96%; padding: 40px 2%; }
	.funcionalidades ul li { margin: 20px 0px 0px 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; }
}