section { padding-top: 280px !important; position: relative; width: 100%; height: auto; }

/*PRODUTO*/
.produto { width: 100%; height: auto; position: relative; padding-bottom: 80px; }
.produto .resumo { width: 100%; height: auto; position: relative; }
.produto .resumo .nome_produto { width: 100%; border-bottom: 4px solid #00acd8; display: inline-block; vertical-align: top; position: relative; height: auto; padding: 20px 0px 20px 0px; font-size: 28px; font-weight: 700; text-align: left; color: #000000; }

.pagamento { width: 100%; height: auto; position: relative; text-align: center; margin-top: 20px; }
.pagamento .boleto { cursor: pointer; width: 100%; height: auto; position: relative; }
.pagamento .boleto .atention { width: -moz-calc(100% - 100px); width: -webkit-calc(100% - 100px); width: -o-calc(100% - 100px); width: calc(100% - 100px); height: auto; position: relative; padding: 30px 50px; text-align: left; color: black; line-height: 26px; font-size: 18px; font-family: 'Roboto'; font-weight: 400; background-color: #eaeaea }
.pagamento .boleto .atention p { font-size: 32px; font-weight: 900; line-height: 40px; }
.pagamento .boleto .atention strong { font-weight: 900; text-decoration: underline; }
.pagamento .boleto .atention i { font-size: 50px; line-height: 95px; color: #00acd8; float: left; padding: 0px 30px 0px 0px; }

/*PLANOS*/
ul.planos { position: relative; height: auto; width: 100%; margin: 0; text-align: center; }
ul.planos li { position: relative; height: auto; width: 200px; display: inline-block; padding: 15px; vertical-align: top; margin: 30px 15px; text-align: center; }
ul.planos li .recomendo { font-size: 14px; font-weight: 700; color: black; background: yellow; line-height: 40px; display: inline-block; padding: 0; width: 100%; margin: 10px 0px 20px 0; letter-spacing: 1px; }
ul.planos li .recomendo i { line-height: 40px; color: red; padding-right: 7px; font-size: 16px; display: inline-block; vertical-align: top; }
ul.planos li .label { font-size: 18px; font-weight: 500; color: #00acd8; line-height: 40px; display: inline-block; padding: 0px; margin: 0 0 40px 0; width: 100%; text-align: left; position: relative; }
ul.planos li .label .valor { font-size: 18px; font-weight: 500; color: #00acd8; border: 1px solid #00acd8; line-height: 40px; float: right; padding: 0 15px; border-radius: 30px; }
ul.planos li .cta { font-size: 18px; font-weight: 400; color: #ffffff; background: #00acd8; line-height: 40px; display: inline-block; padding: 0 25px; border-radius: 30px; margin: 20px 0; letter-spacing: 1px; }
ul.planos li .descricao { width: 100%; height: auto; position: relative; display: inline-block; padding: 15px 0px; widows: 100%; }
ul.planos li .descricao p { width: 100%; opacity: 0.2; height: auto; position: relative; font-size: 12px; text-align: left; display: inline-block; font-weight: 400; font-family: 'Montserrat'; border-top: 1px solid #f4f6f8; padding: 5px 0px; line-height: 20px; }
ul.planos li .descricao p.tem { opacity: 1; }
ul.planos li .descricao p i { line-height: 20px; color: #00acd8; padding-right: 5px; font-size: 14px; display: inline-block; vertical-align: top; }
ul.planos li:hover .descricao { padding: 0px 0px 20px 0px;  }
ul.planos li:hover { background-color: #f4f6f8; margin: 50px 15px 30px 15px; }
ul.planos li:hover .label {  margin: 10px 0 30px 0; }

@media screen and (max-width: 1100px) {
	section { padding: 150px 0px 20px 0px !important; }
	ul.planos li { width: 300px; }
	ul.planos { position: relative; height: auto; width: 96%; margin: 20px 2% 0 2%; text-align: center; }
}