/**
Theme Name: Hubb Imobiliário
Author: Marcos Oliveira
Author URI: https://marcosvoliveira.com
Description: Layout Hubb Imobiliário based on Astra Theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hubb-imobiliario
Template: astra
*/

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

@font-face {
  font-family: 'Myriad Pro';
  font-style: normal;
  font-weight: 500;
  src: url(https://hubbimobiliario.com.br/portal/wp-content/themes/hubbimobiliario/fonts/Myriad-Pro-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Myriad Pro';
  font-style: normal;
  font-weight: 300;
  src: url(https://hubbimobiliario.com.br/portal/wp-content/themes/hubbimobiliario/fonts/Myriad-Pro-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'Myriad Pro';
  font-style: normal;
  font-weight: 700;
  src: url(https://hubbimobiliario.com.br/portal/wp-content/themes/hubbimobiliario/fonts/Myriad-Pro-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Myriad Pro';
  font-style: normal;
  font-weight: 900;
  src: url(https://hubbimobiliario.com.br/portal/wp-content/themes/hubbimobiliario/fonts/Myriad-Pro-Black.woff2) format('woff2');
}

:root{ --laranja:#ff6f02; --fonte: 'Myriad Pro', sans-serif; }

h1, h2, h3, h4, h5, h6, a, p, span, button, input, select, b, strong, table, tr, td, th, div { font-family: var(--fonte); }


.display{ display: flex; gap: 20px; margin: 20px auto; }

main, nav { display: block; width: 100%; }

.bg-laranja{ background:var(--laranja); }

.bg-branco { background: white !important; }


div#wpforms-72-field_3-container label, div#wpforms-72-field_2-container label, div#wpforms-72-field_4-container label {
    display: none;
}

div#content.site-content {
    display: none !important;
}

div#wpforms-72-field_2-container, div#wpforms-72-field_4-container {
    width: 50%;
    display: flex;
    display: inline-grid;
}

.wpforms-submit-container {
    text-align: right;
}



textarea#wpforms-72-field_3, input#wpforms-72-field_2, select#wpforms-72-field_4 {
    background: #e3e3e3;
}


button#wpforms-submit-72 {
    background: var(--laranja);
}



div#contato {
    border: solid 1px;
    border-radius: 10px;
    padding: 20px;
}



.menu-toggle, button, .ast-button, .ast-custom-button, .button, input#submit, input[type="button"], input[type="submit"], input[type="reset"], #comments .submit, .search .search-submit, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button, body .wp-block-file .wp-block-file__button, .search .search-submit, .woocommerce-js a.button, .woocommerce button.button, .woocommerce .woocommerce-message a.button, .woocommerce #respond input#submit.alt, .woocommerce input.button.alt, .woocommerce input.button, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled], .woocommerce input.button:disabled:hover, .woocommerce input.button:disabled[disabled]:hover, .woocommerce #respond input#submit, .woocommerce button.button.alt.disabled, .wc-block-grid__products .wc-block-grid__product .wp-block-button__link, .wc-block-grid__product-onsale, [CLASS*="wc-block"] button, .woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons .button:not(.checkout):not(.ast-continue-shopping), .woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .woocommerce-mini-cart__buttons a.checkout, .woocommerce button.button.alt.disabled.wc-variation-selection-needed, [CLASS*="wc-block"] .wc-block-components-button{
	background-color: var(--laranja) !important;
}


/*  Header e Menu */

@media (min-width: 721px){
div#lateral {
    max-width: 20%;
    width: 20%;
}
}


.ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle {
    background: var(--laranja);
    border-radius: 5px;
    color: white;
}

span.mobile-menu-toggle-icon .ahfb-svg-iconset.ast-inline-flex.svg-baseline svg{color: white!important; fill: white !important;}



.logo-lateral {
    width: 100%;
    display: flex;
    justify-content: center;
}


.infos, .infos span, .infos a {
    display: block;
    text-align: center;
}

.infos span{
    font-weight: 800;
}

.infos a {
    margin-top:-10px;
    font-size: 12px;
}

div#menu-lateral {
    margin: 20px 0px;
}


ul#menu-menu-principal-1, ul#menu-menu-principal-1 ul li, div#menu-lateral li {
    list-style: none;
    margin: 0;
    padding: 0;
}

li>ol, li>ul {
    margin-bottom: 0 !important;
    margin-left: 0 !important;
}


div#menu-lateral ul li a, div#menu-lateral li a {
    color: black;
    background: white;
    display: block;
    margin: 5px 0;
    border-radius: 8px;
    padding: 7px 0 7px 30px;
    font-weight: 700;
}


div#menu-lateral ul li a:hover, div#menu-lateral li a:hover {
    color: white;
    background: var(--laranja);
    display: block;
    margin: 5px 0;
    border-radius: 8px;
    padding: 7px 0 7px 30px;
    font-weight: 700;
}


div#menu-lateral ul li.current-menu-item a, div#menu-lateral ul li.current-menu-parent a {
    color: white;
    background: var(--laranja);
    display: block;
    margin: 5px 0;
    border-radius: 8px;
    padding: 7px 0 7px 30px;
    font-weight: 700;
}


div#menu-lateral ul li:hover ul.sub-menu li a:hover, div#menu-lateral ul li.menu-item-has-children:hover a {
    color: white;
    background: var(--laranja);
    display: block;
    margin: 5px 0;
    border-radius: 8px;
    padding: 7px 0 7px 30px;
    font-weight: 700;
}

div#menu-lateral ul li.menu-item-has-children:hover a:after, div#menu-lateral ul li.menu-item-has-children.current-menu-parent a:after{
    content: ' ↓';
}


div#menu-lateral ul li.menu-item-has-children ul.sub-menu li a:after{
    content: '';
}


div#menu-lateral ul li.menu-item-has-children ul.sub-menu li a {
    color: black;
    background: white;
    display: block;
    margin: 0px 15px 0;
    border-radius: 8px;
    font-weight: 400;
    font-size: 13px;
}

div#menu-lateral ul li.menu-item-has-children ul.sub-menu li a:hover,  div#menu-lateral ul li.menu-item-has-children.current-menu-parent ul.sub-menu li.current_page_item a {
    color: var(--laranja);
    background: white;
    display: block;
    margin: 0px 15px 0;
    border-radius: 8px;
    font-weight: 400;
    font-size: 13px;
}


div#menu-lateral ul li.menu-item-has-children ul.sub-menu {
		display:none !important;
	}
div#menu-lateral ul li.menu-item-has-children:hover ul.sub-menu, div#menu-lateral ul li.current-menu-parent ul.sub-menu, div#menu-lateral ul li.menu-item-has-children:hover{
		display:block!important;
	}

/*  Login  */

a.lwa-links-register-inline {
    display: none;
}

@media (min-width: 721px){
    
    
div#reset form, div#login form {
    max-width: 500px;
}
    
.bloco {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.subtitulo {
    font-size: 20px;
    margin: 0px 0px 50px;
}


p.login-username input#user_login, p.login-password input#user_pass, p #user_login, p #user_info, #user_info, input[name="log"], input[name="pwd"] {
    background: var(--laranja);
    color: white;
    border-width: 0px 0px 1px 0px;
    border-color: white;
    border-radius: 0;
    width: 500px;
    display: block;
    font-size: 21px;
    line-height: 30px;
}


h2.widgettitle, .lwa-password.input-field label, .lwa-username.input-field label, .lwa-remember-email.input-field label {
    display: none;
}

.lwa-username.input-field, .lwa-password.input-field {
    margin-bottom: 1.75em;
}


#user_login::placeholder, #user_pass::placeholder, #user_info::placeholder, input[name="log"]::placeholder, input[name="pwd"]::placeholder  {
  color: white;
  opacity: 1; /* Firefox */
    margin: 0;
  padding: 0 0 10px 0;
}

#user_login::-ms-input-placeholder, #user_pass::-ms-input-placeholder, #user_info::-ms-input-placeholder, input[name="log"]::-ms-input-placeholder input[name="pwd"]::-ms-input-placeholder { /* Edge 12 -18 */
  color: white;
    margin: 0;
  padding: 0 0 10px 0;
}


input[name="log"]:focus::placeholder, input[name="pwd"]:focus::placeholder  {
  color: gray;
  opacity: 1; /* Firefox */
    margin: 0;
  padding: 0 0 10px 0;
}

input[name="log"]:focus::-ms-input-placeholder, input[name="pwd"]:focus::-ms-input-placeholder { /* Edge 12 -18 */
  color: gray;
    margin: 0;
  padding: 0 0 10px 0;
}


/* Change the white to any color */
input[name="log"]:-webkit-autofill,
input[name="log"]:-webkit-autofill:hover, 
input[name="log"]:-webkit-autofill:focus, 
input[name="log"]:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}



p.login-submit input[type="submit"], p.submit input[type="submit"], input.button-primary[name="wp-submit"], .lwa-submit-button input.button-primary {
    color: var(--laranja) !important;
    background-color: white !important;
    padding: 15px 80px;
}

a.lwa-links-remember-cancel.button {
    display: block;
    margin-top: 15px;
}

input[name="user_login"] {
    margin-bottom: 15px;
}

span.lwa-status {
    background: #eaeaea;
    padding: 5px 20px;
    border-radius: 5px;
    border: solid 1px red;
    border-bottom: solid 3px red;
    margin-bottom: 15px !important;
    display: flow-root;
    width: auto;
    color: red;
}


div#reset form, div#login form {
    padding-bottom: 110px;
}

a.lwa-links-remember {
    color: white;
    text-decoration: underline;
    margin-top: 15px;
    display: block;
}

p.login-remember {
    opacity: 0;
    display: none;

}
}



@media (max-width: 720px){

.bloco {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.subtitulo {
    font-size: 20px;
    margin: 0px 0px 50px;
}


div#login {
    display: block;
    width: 100%;
}

p.login-username input#user_login, p.login-password input#user_pass, p #user_login, p #user_info, #user_info, input[name="log"], input[name="pwd"] {
    background: var(--laranja);
    color: white;
    border-width: 0px 0px 1px 0px;
    border-color: white;
    border-radius: 0;
    width: 100%;
    display: block;
    font-size: 21px;
    line-height: 30px;
}


h2.widgettitle, .lwa-password.input-field label, .lwa-username.input-field label, .lwa-remember-email.input-field label {
    display: none;
}

.lwa-username.input-field, .lwa-password.input-field {
    margin-bottom: 1.75em;
}


#user_login::placeholder, #user_pass::placeholder, #user_info::placeholder, input[name="log"]::placeholder, input[name="pwd"]::placeholder  {
  color: white;
  opacity: 1; /* Firefox */
    margin: 0;
  padding: 0 0 10px 0;
}

#user_login::-ms-input-placeholder, #user_pass::-ms-input-placeholder, #user_info::-ms-input-placeholder, input[name="log"]::-ms-input-placeholder input[name="pwd"]::-ms-input-placeholder { /* Edge 12 -18 */
  color: white;
    margin: 0;
  padding: 0 0 10px 0;
}


input[name="log"]:focus::placeholder, input[name="pwd"]:focus::placeholder  {
  color: gray;
  opacity: 1; /* Firefox */
    margin: 0;
  padding: 0 0 10px 0;
}

input[name="log"]:focus::-ms-input-placeholder, input[name="pwd"]:focus::-ms-input-placeholder { /* Edge 12 -18 */
  color: gray;
    margin: 0;
  padding: 0 0 10px 0;
}


p.login-submit input[type="submit"], p.submit input[type="submit"], input.button-primary[name="wp-submit"], .lwa-submit-button input.button-primary {
    color: var(--laranja) !important;
    background-color: white !important;
    padding: 15px 80px;
}

a.lwa-links-remember-cancel.button {
    display: block;
    margin-top: 15px;
}

input[name="user_login"] {
    margin-bottom: 15px;
}

span.lwa-status {
    background: #eaeaea;
    padding: 5px 20px;
    border-radius: 5px;
    border: solid 1px red;
    border-bottom: solid 3px red;
    margin-bottom: 15px !important;
    display: flow-root;
    width: auto;
    color: red;
}


div#reset form, div#login form {
    padding-bottom: 110px;
}


div#reset form, div#login form {
    padding-bottom: 110px;
}

a.lwa-links-remember {
    color: white;
    text-decoration: underline;
    margin-top: 15px;
    display: block;
}

p.login-remember {
    opacity: 0;
    display: none;
}



}


/*  Página Principal  */


@media (min-width: 721px){
    
.principal {
    display: block;
}

.principal #slider {
    width: 70%;
}

.principal #slider img {
    border-radius: 8px;
    width: 100%;
    height: 276px;
    object-fit: cover;
}

.principal #ultimo-boleto {
    width: 30%;
    border: solid 1px #cfcfcf;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



div#ultimo-boleto .infos span, div#ultimo-boleto .botoes {
    display: block;
    text-align: center;
}


div#ultimo-boleto .infos span:first-child, span.vencimento {
    font-weight: 900;
}

span.mes-atual {
    color: var(--laranja);
    margin-top: -8px;
}

span.valor-boleto {
    font-weight: 800;
    font-size: 47px;
    color: var(--laranja);
    line-height: 50px;
}


.botao-medio {
    padding: 5px 0;
    /*margin: 5px auto;*/
    width: 80%;
    display: block;
    border-radius: 5px;
    color: var(--laranja);
    font-weight: 600;
    line-height: 25px;
}

.botao-medio:hover {
    padding: 5px 0;
    /*margin: 5px auto;*/
    width: 80%;
    display: block;
    border-radius: 5px;
    background: var(--laranja) !important;
    font-weight: 600;
    line-height: 25px;
}


.borda-preta {
    border: solid 1px black;
}

.borda-cinza{
    border: solid 1px #c7c7c7;
    border-radius: 5px;
}

.mg-10 { margin: 10px auto; }

.pd-10 { padding: 10px; }

a.text-black, .text-black{
    text-decoration: none;
    color: black;
}

a.text-white, .text-white{
    text-decoration: none;
    color: white;
}


div#extras, div#andamento {
    display: flex;
    gap: 15px;
    margin: 30px 0;
}


.plano-de-pagamento {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



.contagem {
    margin: 18px 0px;
}


.fundo-grafico{
    width:210px;
    height:210px;
    border: 100px solid #ff6f02;
    position:relative;
    border-radius:200px;
    margin: -205px auto 0;
}

.infos-contagem{
    background: white;
    position: absolute;
    left: -70px;
    top: -70px;
    display: flex;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}


.contagem .infos-contagem b, .infos-contagem b {
    font-size: 28px;
    font-weight: 600;
    color: #666666;
    font-weight: 400;
}
.contagem .infos-contagem span, .infos-contagem span  {
    text-align: center;
    font-size: 55px;
    line-height: 50px;
    font-weight: 600;
    color: black;
}

div#loteamento {
    font-size: 13px;
}


div#loteamento td, div#loteamento th {
    border-width: 0;
    border: none;
    padding: 0 10px;
    text-align: left;
}

tr:first-child {
    font-weight: 700;
}


div#loteamento tr td:nth-child(2) {
    text-align: right;
}

.titulo-sessao {
    width: 100%;
    display: block;
    font-weight: 600;
}

.plano-de-pagamento .titulo-sessao {
        margin: 15px 0 0 20px;
}

.andamento-das-obras {
    width: 50%;
    padding: 15px;
    display: inline;
}



div#listagem {
    display: flex;
    gap: 15px;
}



input#myRange {
    width: 100%;
    margin-right: 10px;
}


.range {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}


.listagem {
    width: 60%;
}


.imagem-listagem img {
    border-radius: 8px;
    height: 303px;
    width: 200px;
    margin-top: -30px;
    object-fit: cover;
}


.porcento{
    width: 100%;
}

.barra {
    margin-top: -18px;
    position: relative;
    height: 14px;
    display: block;
    background-image: linear-gradient(to left,var(--laranja), #ffa300,#FFD000);
    border-radius: 100px;
    z-index: 3;
}



input.slider::-webkit-slider-thumb {
    width: 23px;
    height: 23px;
    margin-top: -7px;
    margin-left: -3px;
    background: var(--laranja);
    color: var(--laranja);
    border: solid 4px;
    z-index: 5;
}


input.slider, input.slider:hover, input.slider:active {
    background: gray;
    background: #d6d6d6;
    /* border: solid 10px red; */
    border-radius: 50px;
}




div#descritivo {
    margin-top: -6px;
    font-size: 13px;
}



/* img.imagem-andamento {
    float: right;
    width: 37%;
    height: 100%;
    margin-left: 10px;
    margin-top: -30px;
    border-radius: 5px;
}*/




div#video-projeto {
    width: 30%;
}


.blog, .ajuda, .newsletter{ 
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
}

a.link-home{
    color: var(--laranja);
    font-weight: 700;
}

.ajuda {
    color: white;
    background: #25d366;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding-right: 10px;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}

.ajuda a {
    color: white;
    display: flex;
    align-items: center;
    gap:0;
}

.icon-lateral-esquerda {
    width: 100px;
    display: flex;
    height: 100px;
    align-items: center;
    margin: 0 10px 0;
}


.ajuda span:first-child {
    font-weight: 600;
    font-size: 25px;
    display: flex;
}

.texto-lateral span:nth-child(2) {
    font-size: 15px;
}



}


@media (max-width: 720px){
    
.principal {
    display: block;
}

.principal #slider {
    width: 100%;
}

.principal #slider img {
    border-radius: 8px;
}

.principal #ultimo-boleto {
    width: 100%;
    border: solid 1px #cfcfcf;
    border-radius: 10px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



div#ultimo-boleto .infos span, div#ultimo-boleto .botoes {
    display: block;
    text-align: center;
}


div#ultimo-boleto .infos span:first-child, span.vencimento {
    font-weight: 900;
}

span.mes-atual {
    color: var(--laranja);
    margin-top: -8px;
}

span.valor-boleto {
    font-weight: 800;
    font-size: 47px;
    color: var(--laranja);
    line-height: 50px;
}


.botao-medio {
    padding: 5px 0;
    margin: 5px auto;
    width: 80%;
    text-align: center;
    display: block;
    border-radius: 5px;
    color: var(--laranja);
    font-weight: 600;
}

.borda-preta {
    border: solid 1px black;
}

.borda-cinza{
    border: solid 1px #c7c7c7;
    border-radius: 5px;
    padding: 15px;
    margin: 15px 0;
}

.mg-10 {
    margin: 10px auto;
}

a.text-black, .text-black{
    text-decoration: none;
    color: black;
}

a.text-white, .text-white{
    text-decoration: none;
    color: white;
}


div#extras, div#andamento {
    display: block;
    margin: 20px 0;
}

.plano-de-pagamento {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contagem {
    margin: 18px 0px;
}


.fundo-grafico{
    width:210px;
    height:210px;
    border: 30px solid #ff6f02;
    position:relative;
    border-radius:200px;
    margin: -205px auto 0;
}

.infos-contagem{
    background: white;
    display: flex;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}


.contagem .infos-contagem b, .infos-contagem b {
    font-size: 28px;
    font-weight: 600;
    color: #666666;
    font-weight: 400;
}
.contagem .infos-contagem span, .infos-contagem span  {
    text-align: center;
    font-size: 55px;
    line-height: 50px;
    font-weight: 600;
    color: black;
}

div#loteamento {
    font-size: 13px;
}

div#loteamento td, div#loteamento th {
    border-width: 0;
    border: none;
    padding: 0 10px;
    text-align: left;
}

tr:first-child {
    font-weight: 700;
}


div#loteamento tr td:nth-child(2) {
    text-align: right;
}

.titulo-sessao {
    width: 100%;
    display: block;
    font-weight: 600;
}

.plano-de-pagamento .titulo-sessao {
        margin: 15px 0px 0px;
        text-align:center;
}

.andamento-das-obras {
    width: 100%;
    padding: 20px;
    display: block;
    margin-top: 20px;
}

.range {
    display: flex;
}

span.porcento {
    width: 85%;
}

.range .porcentagem{
    width: 15%;
    text-align: center;
    font-weight: 700;
}



.barra {
    margin-top: -18px;
    position: relative;
    height: 14px;
    display: block;
    background-image: linear-gradient(to left,var(--laranja), #ffa300,#FFD000);
    border-radius: 100px;
    z-index: 3;
}



input.slider::-webkit-slider-thumb {
    width: 23px;
    height: 23px;
    margin-top: -7px;
    margin-left: -3px;
    background: var(--laranja);
    color: var(--laranja);
    border: solid 4px;
    z-index: 5;
}


input.slider, input.slider:hover, input.slider:active {
    background: gray;
    background: #d6d6d6;
    /* border: solid 10px red; */
    border-radius: 50px;
}




div#descritivo {
    margin-top: -6px;
    font-size: 13px;
}





img.imagem-andamento {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    object-fit: cover;
    margin-top: 20px;
}


div#video-projeto {
    width: 100%;
    margin-top: 20px;
}

a.link-home{
    color: var(--laranja);
    font-weight: 700;
}


.ajuda {
    color: white;
    background: #25d366;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding-right: 10px;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}

.ajuda a {
    color: white;
    display: flex;
    align-items: center;
    gap:0;
}

.icon-lateral-esquerda {
    width: 100px;
    display: flex;
    height: 100px;
    align-items: center;
    margin: 0 10px 0;
}


.ajuda span:first-child {
    font-weight: 600;
    font-size: 25px;
    display: flex;
}

.texto-lateral span:nth-child(2) {
    font-size: 15px;
}



}









/*  Quero Pagar / Quero Adiantar  */


@media (min-width: 721px){
    
.flex-50.direita {
    display: flex;
    justify-content: flex-end;
}
.flex-50 {
    display: flex;
    margin-bottom: 40px;
    width: 50%;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.borda{
        border-radius: 8px;
    border: solid 1px #cacaca;
}

.pd-20{
    padding: 10px 31px;
    border-radius: 8px;
    color: white;
}

.bg-cinza {
    background: #d1d1d1;
}


.direita {
    display: flex;
    gap: 20px;
}

td {
    text-align: center;
    font-size: 14px;
}

.bola-verde:before {
    content: '.';
    display: block;
    width: 10px;
    height: 10px;
    background: green;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}

#bola-verde {
    display: block;
    width: 10px;
    height: 10px;
    background: green;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}


.bola-amarela:before {
    content: '.';
    display: block;
    width: 10px;
    height: 10px;
    background: yellow;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}

#bola-amarela {
    display: block;
    width: 10px;
    height: 10px;
    background: yellow;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}


.bola-vermelha:before {
    content: '.';
    display: block;
    width: 10px;
    height: 10px;
    background: red;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}

#bola-vermelha {
    display: block;
    width: 10px;
    height: 10px;
    background: red;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}

}


@media (max-width: 720px){

.flex-50.direita {
    display: flex;
    justify-content: flex-end;
}
.flex-50 {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
}

.borda{
        border-radius: 8px;
    border: solid 1px #cacaca;
}

.pd-20{
    padding: 10px 31px;
    border-radius: 8px;
    color: white;
}

.bg-cinza {
    background: #d1d1d1;
}


.direita {
    display: flex;
    gap: 20px;
}

td {
    text-align: center;
    font-size: 14px;
}

.bola-verde:before {
    content: '.';
    display: block;
    width: 10px;
    height: 10px;
    background: green;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}

#bola-verde {
    display: block;
    width: 10px;
    height: 10px;
    background: green;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}


.bola-amarela:before {
    content: '.';
    display: block;
    width: 10px;
    height: 10px;
    background: yellow;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}

#bola-amarela {
    display: block;
    width: 10px;
    height: 10px;
    background: yellow;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}


.bola-vermelha:before {
    content: '.';
    display: block;
    width: 10px;
    height: 10px;
    background: red;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}

#bola-vermelha {
    display: block;
    width: 10px;
    height: 10px;
    background: red;
    position: relative;
    border-radius: 100%;
    float: left;
    top: 8px;
    right: 4px;
    color: transparent;
}

}



/*  Plano de Pagamento  */


@media (min-width: 721px){
    
#flex-2 {
    display: flex;
        gap: 15px;
}

.info-parcela {
    border: solid 1px #cacaca;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    padding: 5px 20px;
    border-radius: 8px;
}


.total-parcela {
    border: solid 1px #cacaca;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    padding: 5px 20px;
    border-radius: 8px;
    background: var(--laranja);
    color: white;
}



.info-canvas{
        display: block;
    text-align: center;
    font-weight: 600;
    line-height: 19px;
    margin-bottom: 15px;
}

span.titulo-canvas {
    padding: 5px 15px;
    font-weight: 600;
}

span.parcelas-canvas {
    text-align: right;
    padding: 5px 15px;
}


option {
    /* height: 0px; */
    display: contents;
}


.datas{
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    flex-direction: row;
}


.info-parcela .valor {
    color: var(--laranja);
    font-weight: 600;
    font-size: 26px;
}

.total-parcela .valor {
    color: white;
    font-weight: 600;
    font-size: 26px;
}

}


@media (max-width: 720px){
     
#flex-2 {
    display: block;
}

.info-parcela {
    border: solid 1px #cacaca;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    padding: 5px 20px;
    border-radius: 8px;
}


.total-parcela {
    border: solid 1px #cacaca;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    padding: 5px 20px;
    border-radius: 8px;
    background: var(--laranja);
    color: white;
}



.info-canvas{
        display: block;
    text-align: center;
    font-weight: 600;
    line-height: 19px;
    margin-bottom: 15px;
}

span.titulo-canvas {
    padding: 5px 15px;
    font-weight: 600;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 18px;
}

span.parcelas-canvas {
    text-align: center;
    padding: 5px 15px;
    display: block;
}


option {
    /* height: 0px; */
    display: contents;
}


.datas{
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    flex-direction: row;
}


.info-parcela .valor {
    color: var(--laranja);
    font-weight: 600;
    font-size: 26px;
}

.total-parcela .valor {
    color: white;
    font-weight: 600;
    font-size: 26px;
}   
}




/*  Contato / Fale Conosco  */


.tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
    max-height: 12rem;
}


.accordion {
    color: var(--theme);
    overflow: hidden;
    margin-top: 30px;
}
.tab__label, .tab__close {
    display: flex;
    background: var(--theme);
    cursor: pointer;
}

.tab {
	margin-top: 10px;
	border: 2px solid;
	border-radius: 0.5rem;
}
.tab input:checked ~ .tab__label {
	border-bottom: solid 0px;
	border-radius: 5px;
}
.tab__label {
	justify-content: space-between;
	padding: 1rem;
	border-bottom: solid 2px;
	border-radius: 5px;
}

.tab__label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    transform: rotate(90deg);
    transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
    transform: rotate(270deg);
}
.tab__content p {
    margin: 0;
    padding: 1rem;
}
.tab__close {
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}
.accordion--radio {
    --theme: var(--secondary);
}


.tab input:not(:checked) + .tab__label:hover::after {
    animation: bounce .5s infinite;
}
@keyframes bounce {
    25% {
	transform: rotate(90deg) translate(.25rem);
    }
    75% {
	transform: rotate(90deg) translate(-.25rem);
    }
}





/*  responsividade  */

@media (max-width: 720px){
.none-mobile{ display: none !important; }
.flex { display: block; width: 100%; }
}


@media (min-width: 721px){
.none-desktop{ display :none !important;}
.flex{ display: flex; gap: 15px; }
}