/* ENTRADA */
section { padding: 80px 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: 20px; font-weight: 700; font-family: 'Montserrat'; -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; text-align: center; line-height: 16px; letter-spacing: 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: 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: 20px 0px 0px 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: 100px 0px 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: 'Montserrat'; 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: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: 100px 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; }
}