/* reset by rafaux */ * { margin: 0px; padding: 0px; border: 0px; font-weight: normal; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; } /* var */ :root { --black: #373737; --red: #EB194B; --lightgray: #9C9C9C; --white: #efefef; --white2: #ddd; --blackgray: #3A3A3A; --gray: #777; --green: #18B791; --fontmedium: 'Avenir Next Demi', sans-serif; } /* tweak */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 1000px; } ::-webkit-scrollbar-track { background-color: transparent; } /* global class */ .block { position: relative; float: left; width: 100%; height: auto; margin-bottom: 80px; } .container { position: relative; display: block; width: 1260px; height: auto; margin: 0px auto; } /* base */ a { text-decoration: none; color: var(--black); transition: all .5s ease; } body { background: #fff; color: var(--black); font: normal 16px 'Avenir Next', sans-serif; overflow-x: hidden; } input, textarea, select, button { font: normal 16px 'Avenir Next', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; cursor: pointer; } input[type=submit], button { transition: all .5s ease; } img { pointer-events: none; } label { cursor: pointer; } /* ######################################## HEADER */ /* header */ #header { position: fixed; z-index: 21; top: 0px; left: 0px; width: 100%; height: 34px; padding: 42px 0px; background-color: #fff; transition: all .5s ease; } #header span.logo { position: relative; z-index: 2; float: left; width: 110px; height: auto; margin-top: -2px; } #header span.logo img, #header span.logo a { display: block; width: auto; } #header ul.menu { float: left; width: auto; margin: 5px 0px 0px 146px; transition: all .5s ease; } #header ul.menu li { position: relative; float: left; width: auto; margin-right: 30px; font-size: 14px; } #header ul.menu li a { font-family: var(--fontmedium); } #header ul.menu li a i { display: inline-block; width: auto; margin: -5px 0px 0px 5px; vertical-align: middle; } #header ul.menu li a:hover { color: var(--red); } #header ul.menu li.more a { color: var(--red); } #header ul.menu li:hover ul { display: block; } #header ul.menu li.on a { color: var(--lightgray); } #header ul.menu li.red a { color: var(--red) !important; } #header ul.menu li ul { display: none; position: absolute; top: 30px; left: -20px; width: 220px; height: auto; margin: 0px; padding: 16px 20px; background-color: rgba(255,255,255,.9); border-radius: 20px; box-shadow: 0px 10px 40px rgba(0,0,0,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: left; } #header ul.menu li ul::before { position: absolute; top: -40px; left: 0px; width: 100%; height: 40px; background-color: transparent; content: ''; } #header ul.menu li ul li { width: 100%; margin-right: 0px; } #header ul.menu li ul li a { position: relative; display: block; padding: 12px 0px; color: var(--black) !important; } #header ul.menu li ul li a::before { position: absolute; top: 0px; left: -20px; width: 3px; height: 100%; background-color: var(--red); opacity: 0; transition: all .5s ease; content: ''; } #header ul.menu li ul li a:hover { color: var(--red) !important; } #header ul.menu li ul li a:hover::before { opacity: 1; } #header form { position: relative; float: left; width: 0px; height: auto; margin: 0px; visibility: hidden; opacity: 0; transition: all .5s ease; } #header form input { display: block; width: 100%; height: 40px; padding-left: 24px; color: var(--red); border-bottom: 1px solid #D1D1D1; font-family: var(--fontmedium); font-size: 12px; } #header form input::placeholder { color: var(--lightgray); } #header form i { position: absolute; top: 10px; left: 0px; width: auto; font-size: 18px; color: var(--lightgray); } #header ul.menu2 { float: left; width: 240px; height: auto; margin-top: -5px; visibility: hidden; opacity: 0; transition: all .2s ease; } #header ul.menu2 li { float: left; width: 50%; height: auto; font-size: 14px; } #header ul.menu2 li a { display: block; padding-right: 45px; line-height: 1.4; font-family: var(--fontmedium); } #header ul.menu2 li a:hover { color: var(--red); } #header ul.menu2 li:last-of-type a { padding-right: 30px; } #header span.right { position: absolute; top: -4px; right: 0px; width: auto; text-align: right; transition: all .5s ease; } #header span.right span { display: inline-block; width: auto; margin-right: 10px; vertical-align: middle; font-size: 14px; transition: all .5s ease; } #header span.right span.alt a { display: block; height: 32px; padding: 0px 15px; border: 1px solid var(--black); color: var(--black); border-radius: 16px; line-height: 32px; font-family: var(--fontmedium); } #header span.right span.alt a:hover { background-color: var(--blackgray); color: #fff; } #header span.right span.fav { margin-right: 18px; } #header span.right span.fav a { position: relative; display: block; color: var(--red); } #header span.right span.fav a i { display: inline-block; width: auto; margin: -2px 0px 0px 10px; font-size: 26px; vertical-align: middle; } #header span.right span.fav a sup { position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; background-color: var(--red); color: #fff; border-radius: 100%; text-align: center; line-height: 14px; font-weight: bold; } #header span.right span.fav a sup span { margin-right: 0px; padding-right: 2px; font-weight: bold; font-size: 11px; letter-spacing: -2px; } #header span.right span.login { margin-right: 0px !important; } #header span.right span.login a { display: block; width: auto; height: 32px; padding: 0px 5px; background-color: var(--red); color: #fff; border-radius: 16px; line-height: 32px; cursor: pointer; transition: all .5s ease; } #header span.right span.login a:hover { background-color: var(--black); } #header span.right span.login i { display: inline-block; width: auto; margin-top: -2px; font-size: 22px; vertical-align: middle; } #header span.right span.login b { display: inline-block; width: auto; margin: -2px 13px 0px 13px; vertical-align: middle; font-weight: bold; } /* header -> off */ #header.off { opacity: .5; } #header.off span.toggle { width: 0px; } #header.off span.right { right: 20px; } /* header -> head */ header.head { display: block; margin-bottom: 60px; text-align: center; } header.head h6, header.head h1 { display: block; margin-bottom: 12px; font-weight: bold; font-size: 36px; } header.head p, header.head h3 { display: block; width: 640px; margin: 0px auto; color: var(--gray); font-size: 16px; line-height: 1.6; } /* header -> on */ #header.on, #header.active { padding-top: 16px; background-color: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* header -> header 2 */ #header.header2 ul.menu { margin-left: 50px; } #header.header2 ul.menu2 { display: block; visibility: visible; opacity: 1; transition-delay: .2s; } #header.header2 form { width: 302px; margin: -10px 30px 0px 10px; opacity: 1; visibility: visible; } #header.header2 span.right span { margin-right: 24px; } #header.header2 span.right span.alt { width: 0px; margin: 0px; visibility: hidden; overflow: hidden; } #header.header2 span.right span.alt a { opacity: 0; } #header.header2 span.right span.fav a { padding: 0px; border-color: transparent; } #header.header2 span.right span.fav a b { width: 0px; margin: 0px; overflow: hidden; opacity: 0; } /* header -> form -> autocomplete */ #header form .autocomplete-results-header { display: none; position: relative; z-index: 20; width: 100%; height: auto; padding: 10px; background-color: #fff; border-radius: 20px; box-shadow: 0px 10px 20px rgba(0,0,0,.2); } #header form .autocomplete-results-header li { display: inline-block; width: 100%; height: auto; padding: 5px 0px; border-radius: 10px; } #header form .autocomplete-results-header li:hover { background-color: #eee; } #header form .autocomplete-results-header li .autocomplete-text { position: relative; display: inline-block; width: 70%; height: 20px; padding-left: 14px; font-family: var(--fontmedium); font-size: 12px; color: var(--blackgray); line-height: 20px; overflow: hidden; vertical-align: middle; } #header form .autocomplete-results-header li .autocomplete-text::after { position: absolute; top: 0px; right: 0px; width: 25%; height: 100%; background: linear-gradient(to left, #fff, rgba(255,255,255,.0)); content: ''; } #header form .autocomplete-results-header li:hover .autocomplete-text::after { background: linear-gradient(to left, #eee, rgba(255,255,255,.0)); } #header form .autocomplete-results-header li .status { display: inline-block; width: 28%; padding: 3px; font-weight: bold; font-size: 8px; text-transform: uppercase; border-radius: 5px; text-align: center; vertical-align: middle; } #header form .autocomplete-results-header li .status.slancamentos { background-color: var(--red); color: #fff; } #header form .autocomplete-results-header li .status.savulsos { background-color: rgb(71, 140, 231); color: #fff; } #header form .autocomplete-results-header li .status.sregiao { background-color: var(--green); color: #fff; } /* header -> toggle */ #header span.toggle { display: none; position: absolute; top: 3px; right: 20px; width: 30px; height: 30px; border-top: 3px solid var(--red); cursor: pointer; transition: all .5s ease; } #header span.toggle::before { position: absolute; top: 5px; left: 0px; width: 100%; height: 3px; background-color: var(--red); content: ''; } #header span.toggle::after { position: absolute; top: 13px; right: 0px; width: 50%; height: 3px; background-color: var(--red); content: ''; } /* ######################################## FEATURE HOME */ /* feat */ /* #feat { margin-top: 150px; text-align: center; } #feat header h6 { display: block; font-family: var(--fontmedium); font-size: 20px; } #feat header h5 { display: block; margin-top: 7px; font-family: var(--fontmedium); font-size: 36px; color: var(--red); } #feat figure img { display: block; width: 960px; max-width: 100%; height: auto; margin: 0px auto 40px auto; } #feat section nav ul { display: inline-block; width: auto; height: 50px; margin-bottom: 35px; padding: 10px; background-color: var(--white); border-radius: 25px; } #feat section nav ul li { display: inline-block; width: 135px; height: 32px; } #feat section nav ul li a { display: block; height: 32px; font-weight: bold; line-height: 30px; } #feat section nav ul li.on a { background-color: #fff; color: var(--red); border-radius: 25px; } #feat section form:hover { border-color: var(--red); }*/ #feat section form label { position: relative; display: inline-block; width: auto; height: 68px; padding: 18px 18px 18px 58px; vertical-align: middle; text-align: left; cursor: pointer; } #feat section form label:nth-of-type(1) { width: 100%; margin-right: 4px; border-radius: 34px;} #feat section form label:nth-of-type(1) input { width: 100%; height: auto; font-size: 16px; } #feat section form label:nth-of-type(2) { display: none; width: 68px; padding: 0px; } #feat section form label:nth-of-type(2) input[type=submit] { width: 68px; height: 68px; background: #EB194B url('../img/feat-form-submit.svg') no-repeat center center; border-radius: 100%; text-indent: -9999em; } #feat section form label:nth-of-type(2) input[type=submit]:hover { background-color: var(--black); } #feat section form .autocomplete-results { display: none; position: relative; z-index: 20; width: calc(100% + 40px); height: auto; margin: 10px 0px 0px -40px; padding: 20px; background-color: #fff; border-radius: 20px; box-shadow: 0px 10px 20px rgba(0,0,0,.2); } #feat section form .autocomplete-results li { display: inline-block; width: 100%; height: auto; padding: 5px 0px; border-radius: 10px; } #feat section form .autocomplete-results li:hover { background-color: #eee; } #feat section form .autocomplete-results li .autocomplete-text { position: relative; display: inline-block; width: 70%; height: 30px; padding-left: 20px; font-family: var(--fontmedium); font-size: 14px; color: var(--blackgray); line-height: 30px; overflow: hidden; vertical-align: middle; } #feat section form .autocomplete-results li .autocomplete-text::after { position: absolute; top: 0px; right: 0px; width: 25%; height: 100%; background: linear-gradient(to left, #fff, rgba(255,255,255,.0)); content: ''; } #feat section form .autocomplete-results li:hover .autocomplete-text::after { background: linear-gradient(to left, #eee, transparent); } #feat section form .autocomplete-results li .status { display: inline-block; width: 28%; padding: 6px; font-weight: bold; font-size: 10px; text-transform: uppercase; border-radius: 5px; text-align: center; vertical-align: middle; } #feat section form .autocomplete-results li .status.slancamentos { background-color: var(--red); color: #fff; } #feat section form .autocomplete-results li .status.savulsos { background-color: rgb(71, 140, 231); color: #fff; } #feat section form .autocomplete-results li .status.sregiao { background-color: var(--green); color: #fff; } #feat section form label b { display: block; margin: -3px 0px 3px 0px; } #feat section form label i { position: absolute; top: 50%; left: 24px; font-size: 22px; color: var(--red); transform: translateY(-50%); } #feat section small a { display: inline-block; padding-bottom: 7px; border-bottom: 1px solid var(--white); color: var(--red); font-size: 16px; } #feat section small a:hover { border-bottom-color: var(--red); } /* ######################################## PAGE */ /* page */ #page { padding: 160px 0px 100px 0px; } /* simule */ .iframe { position: relative; width: 100%; height: auto; margin-top: -120px; overflow: hidden; } .iframe iframe { display: inline-block; width: 100%; height: 1400px; margin-top: -64px; } /* ######################################## SIMULE */ /* simule */ body.page-id-119535 { background: #EEF0F8; } #simule-cover { position: relative; display: inline-block; width: 100%; height: 350px; margin-top: 84px; background-color: #000; } #simule-cover::before { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.0)); content: ''; } #simule-cover h6 { position: absolute; z-index: 3; bottom: 60px; left: 50%; font-weight: bold; font-size: 48px; color: #fff; text-align: center; transform: translateX(-50%); white-space: nowrap; } #simule-cover img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .8; } /* ######################################## ENTERPRISES */ /* enterprises */ body.enterprises #header .container { width: calc(100% - 40px); padding: 0px; } body.enterprises #header.header2 form { width: calc(100% - 965px); } #enterprises section { float: left; width: 50%; height: auto; margin-top: 58px; background-color: #fff; transition: all .5s ease; } #enterprises aside { position: fixed; z-index: 10; top: 0px; right: 0px; width: 50%; height: calc(100vh - 58px); margin-top: 58px; transition: all 1s ease-in-out; } #enterprises aside sup { position: absolute; z-index: 2; top: 40px; right: 36px; width: 42px; height: 42px; background-color: var(--red); color: #fff; border-radius: 100%; text-align: center; line-height: 44px; font-size: 18px; cursor: pointer; transition: all .5s ease; } #enterprises aside sub { display: none; } #enterprises aside sub a { position: absolute; z-index: 2; top: 40px; right: 36px; width: 42px; height: 42px; background-color: var(--red); color: #fff; border-radius: 100%; text-align: center; line-height: 44px; font-size: 18px; cursor: pointer; transition: all .5s ease; } #enterprises aside sup:hover, #enterprises aside sub a:hover { background-color: var(--black); } #enterprises aside #enterprises-map { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--white); } #enterprises aside #enterprises-map iframe { display: inline-block; width: 100%; height: 100%; } #enterprises.hidden section { width: 0%; transition-delay: .7s; } #enterprises.hidden section #enterprises-searched { opacity: 0; } #enterprises.hidden section #enterprises-list { opacity: 0; } #enterprises.hidden section #footer { opacity: 0; } #enterprises.hidden aside { width: 100%; transition-delay: .7s; } /* enterprise -> single */ #enterprise { margin-top: 100px; } #enterprise .container { position: relative; } #enterprise .block { margin-bottom: 0px; padding: 0px 440px 60px 0px; } #enterprise h6 { display: block; margin-bottom: 24px; font-family: var(--fontmedium); font-size: 24px; } /* video */ span.view-photos a { display: inline-block; width: auto; margin-bottom: 30px; padding: 10px 30px; background-color: var(--red); color: #fff; font-size: 14px; border-radius: 50px; font-weight: bold; } span.view-photos a i { display: inline-block; margin-right: 10px; } /* breadcrumb */ .breadcrumb { float: left; width: auto; } .breadcrumb li { float: left; width: auto; color: var(--gray); font-size: 14px; } .breadcrumb li a { display: block; color: var(--gray); font-family: var(--fontmedium); } .breadcrumb li a:hover { color: var(--red); } .breadcrumb li a::after { display: inline-block; width: 5px; height: 5px; margin: 0px 10px; background-color: var(--white2); border-radius: 100%; vertical-align: middle; content: ''; } /* enterprise -> single -> code */ #enterprise span.code { float: right; width: auto; color: var(--gray); font-size: 14px; } /* enterprise -> header */ #enterprise header { display: inline-block; width: 100%; height: auto; margin: 20px 0px 15px 0px; } #enterprise header h1 { display: inline-block; width: 100%; font-size: 36px; font-family: var(--fontmedium); color: var(--cor-primaria); } #enterprise header strong { display: inline-block; width: auto; margin-top: 20px; font-size: 14px; color: var(--black); } #enterprise header span { position: relative; float: right; width: auto; margin-top: 5px; text-align: right; } #enterprise header span small { position: relative; display: inline-block; width: auto; margin-left: 40px; font-size: 16px; vertical-align: middle; } #enterprise header span small a { display: block; color: var(--cor-primaria); font-family: var(--fontmedium); } #enterprise header span small a i { display: inline-block; margin-right: 10px; vertical-align: middle; font-size: 22px; } #enterprise header span small.fav button { font-size: 22px; color: var(--red); opacity: 1 !important; } /* enterprise -> header -> share box */ .share-box { display: none; position: absolute; z-index: 10; top: 30px; right: 0px; width: 120px; height: auto; padding: 16px 0px; background-color: #fff; box-shadow: 0px 20px 60px rgba(0,0,0,.2); border-radius: 10px; text-align: center; } .share-box b { display: inline-block; width: auto; margin: 0px 10px; font-size: 16px; vertical-align: top; } .share-box b a { color: var(--blackgray); } .share-box b a:hover { color: var(--red); } .share-box sup { position: absolute; top: -3px; right: -6px; width: 20px; height: 20px; background-color: var(--lightgray); color: #fff; text-align: center; font-size: 12px; line-height: 20px; border-radius: 100%; cursor: pointer; transition: all .5s ease; } .share-box sup:hover { background-color: var(--red); } /* enterprise -> gallery */ #enterprise #gal { width: 100vmax; margin-left: calc(50% - 50vw); display: grid; grid-template-columns: 50% 1fr 1fr; grid-gap: 20px; } #enterprise #gal figure { position: relative; height: 25vh; background-color: #333; overflow: hidden; transform: translate(Z); } #enterprise #gal figure:nth-of-type(1) { height: calc(50vh + 20px); grid-row: 1/3; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } #enterprise #gal figure:nth-of-type(2) { grid-column: 2/4; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } #enterprise #gal figure:nth-of-type(3) { border-radius: 20px; } #enterprise #gal.gal-3 figure:nth-of-type(3) { border-radius: 0px; border-bottom-left-radius: 20px; border-top-left-radius: 20px; } #enterprise #gal figure:nth-of-type(4) { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } #enterprise #gal figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; } #enterprise #gal figure a { display: block; width: 100%; height: 100%; } #enterprise #gal figure sup { position: absolute; z-index: 2; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); transition: all .5s ease; } #enterprise #gal figure sup:hover { background-color: rgba(0,0,0,.7); } #enterprise #gal figure sup b { position: absolute; top: 50%; left: 50%; width: auto; color: #fff; text-align: center; font-size: 14px; font-family: var(--fontmedium); line-height: 1.4; transform: translate(-50%, -50%); } #enterprise #gal figure sup b i { display: block; margin-bottom: 5px; font-size: 18px; } /* enterprise -> gallery -> 3 items */ #enterprise #gal.gal-3 figure:nth-of-type(3) { grid-column: 2/4; } /* enterprise -> fancybox */ #enterprise #fancybox { display: none; } /* enterprise -> navigation */ #enterprise #nav { position: relative; z-index: 5; height: 74px; margin-bottom: 30px; background-color: #fff; } #enterprise #nav::before { position: absolute; top: 0px; left: -1000px; width: 1000px; height: 100%; background-color: #fff; content: ''; } #enterprise #nav.fixed { position: fixed; top: 58px; } #enterprise #nav li { float: left; width: auto; margin: 16px 20px 0px 0px; } #enterprise #nav li a { position: relative; display: inline-block; width: auto; height: auto; padding: 10px 16px; color: var(--gray); font-family: var(--fontmedium); border-radius: 40px; } #enterprise #nav li a:hover { background-color: var(--white); } #enterprise #nav li.on a { background-color: var(--red); color: #fff; } /* enterprise -> tags */ #enterprise .tags { padding-bottom: 60px; } #enterprise .tags.fixed { margin-top: 132px; } #enterprise .tags strong { display: inline-block; width: auto; margin-right: 12px; padding: 10px 16px; border-radius: 20px; background-color: var(--white); border: 1px solid var(--white2); color: var(--blackgray); text-transform: lowercase; } #enterprise .tags strong::first-letter { text-transform: uppercase; } /* enterprise -> valores (format) */ #enterprise .format small { display: block; margin-bottom: 10px; font-weight: bold; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--gray); } #enterprise .format span.valor { display: inline-block; width: 100%; height: auto; } #enterprise .format span.valor sup { display: inline-block; margin-right: 4px; font-weight: bold; font-size: 30px; vertical-align: middle; } #enterprise .format span.valor b { display: inline-block; font-weight: bold; font-size: 30px; vertical-align: middle; } #enterprise .format span.cond { display: block; margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--red); } #enterprise .format span.cond b { font-weight: 600; } /* enterprise -> descricao */ #enterprise #descricao::after { display: inline-block; width: 100%; margin-top: 40px; border-bottom: 1px solid var(--white2); content: ''; } #enterprise #descricao p { display: block; margin-bottom: 20px; line-height: 1.8; font-size: 16px; text-align: justify; } #enterprise #descricao p br { display: none; } /* enterprise -> informacoes */ #enterprise #informacoes::after { display: inline-block; width: 100%; margin-top: 40px; border-bottom: 1px solid var(--white2); content: ''; } /* enterprise -> caracteristicas */ #enterprise #caracteristicas::after { display: inline-block; width: 100%; margin-top: 40px; border-bottom: 1px solid var(--white2); content: ''; } /* enterprise -> list */ #enterprise nav.list li { display: inline-block; width: auto; vertical-align: top; margin: 0px 30px 30px 0px; font-size: 16px; } #enterprise nav.list li i { display: inline-block; width: auto; margin-right: 16px; vertical-align: text-top; color: var(--red); font-size: 20px; } #enterprise nav.list.list2 li::before { display: inline-block; margin-right: 16px; vertical-align: text-top; color: var(--cor-primaria); font-size: 20px; font-weight: 300; font-family: 'Font Awesome 6 Pro'; content: '\f058'; } /* enterprise -> video */ #video-launch iframe { display: inline-block; width: 100%; height: 350px; border-radius: 20px; } /* enterprise */ #plantas-launch ul { display: inline-block; width: 100%; height: 260px; padding: 0px 80px; } #plantas-launch ul li img { display: block; width: 100%; height: 180px; margin: 40px 0px; border-radius: 7px; object-fit: cover; border: 3px solid #fff; opacity: .5; transition: all .5s ease; } #plantas-launch .slick-center img { max-width: initial; height: 260px; margin: 0px; border-color: var(--red); opacity: 1; } #plantas-launch .arrow { position: absolute; z-index: 4; top: 50%; width: 30px; height: 30px; background-color: white; color: var(--amarelo-primario); font-size: 14px; transform: translateY(-50%); border-radius: 100%; text-align: center; line-height: 32px; transition: all .5s ease; } #plantas-launch .arrow.prev { left: 10px; } #plantas-launch .arrow.next { right: 10px; } #plantas-launch .arrow:hover { background-color: var(--black); } #plantas-launch.gal { margin-top: 30px; padding: 0px 200px; } /* enterprise -> localizacao */ #enterprise #localizacao input { display: inline-block; width: 100%; height: 44px; margin-bottom: 30px; padding: 0px 20px 0px 50px; border-radius: 22px; background: transparent url('../img/enterprises-searched.svg') no-repeat 20px center; border: 1px solid var(--white); } #enterprise #localizacao #localizacao-map { display: inline-block; width: 100%; height: 400px; border-radius: 20px; } /* enterprise -> sidebar */ #enterprise-side { position: absolute; z-index: 8; right: 0px; width: 350px; height: auto; margin-top: 35px; transition: all .5s ease; } #enterprise-side span.calculadora a { display: inline-block; width: 100%; height: auto; padding: 20px; background-color: var(--blackgray); border-radius: 20px; box-shadow: 0px 20px 60px rgba(0,0,0,.1); } #enterprise-side span.calculadora a:hover { background-color: var(--red); } #enterprise-side span.calculadora figure { display: inline-block; width: 36px; height: auto; margin: 0px !important; vertical-align: middle; } #enterprise-side span.calculadora figure img { display: block; width: 100%; height: auto; } #enterprise-side span.calculadora p { display: inline-block !important; width: calc(100% - 60px); margin-bottom: 0px !important; padding-left: 20px; color: #fff; vertical-align: middle; font-size: 14px; line-height: 1.6; font-family: var(--fontmedium); } #enterprise-side .talk { position: relative; z-index: 2; display: inline-block; width: 75%; height: auto; background-color: #fff; box-shadow: 0px 20px 60px rgba(0,0,0,.1); border-radius: 5px; overflow: hidden; left:3em} #enterprise-side .talk h6 { display: inline-block; width: 100%; height: auto; margin: 0px; padding: 24px 0px; background-color: var(--blackgray); color: #fff; text-align: center; font-size: 18px; } #enterprise-side .talk form { display: inline-block; width: 100%; height: auto; padding: 20px; } #enterprise-side .talk form legend { display: block; margin-bottom: 20px; line-height: 1.6; color: var(--gray); } #enterprise-side .talk form input { display: block; width: 100%; height: 48px; margin-bottom: 20px; padding: 0px 20px; border: 1px solid var(--lightgray); border-radius: 24px; } #enterprise-side .talk form input[type=radio] { position: relative; display: inline-block; width: 16px; height: 16px; margin-bottom: 0px; padding: 0px; border: 1px solid; border-radius: 100%; vertical-align: middle; cursor: pointer; } #enterprise-side .talk form input[type=radio]:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background-color: var(--cor-primaria); transform: translate(-50%, -50%); border-radius: 100%; content: ''; } #enterprise-side .talk form input.wpcf7-not-valid { border-color: var(--red); } #enterprise-side .talk form b { display: inline-block; width: auto; margin: 0px 10px 0px 5px; vertical-align: middle; color: var(--blackgray); font-family: var(--fontmedium); } #enterprise-side .talk form small { display: inline-block; width: 100%; margin: 10px 0px; color: var(--gray); } #enterprise-side .talk form input[type=submit] { margin: 30px 0px 0px 0px; background-color: var(--cor-primaria); border-color: var(--red); color: #fff; font-family: var(--fontmedium); } #enterprise-side .talk form input[type=submit]:hover { background-color: #fff; color: var(--cor-primaria); } #enterprise-side .talk span.wp a { display: inline-block; width: calc(100% - 40px); height: 48px; margin: 10px 20px 20px 20px; border-radius: 50px; background-color: #25D366; border: 1px solid #25D366; color: #fff; text-align: center; line-height: 48px; font-family: var(--fontmedium); } #enterprise-side .talk span.wp a:hover { background-color: #fff; color: #25D366; } #enterprise-side .talk .wpcf7-spinner { position: absolute; bottom: 0px; right: 0px; } #enterprise-side span.covid { display: inline-block; width: 100%; height: auto; padding: 20px; background-color: #fff; border-radius: 20px; } #enterprise-side span.covid figure { display: inline-block; width: 50px; height: auto; vertical-align: middle; } #enterprise-side span.covid figcaption { display: inline-block; width: calc(100% - 60px); height: auto; padding-left: 20px; vertical-align: middle; } #enterprise-side span.covid figcaption strong { display: block; color: var(--red); margin-bottom: 5px; font-family: var(--fontmedium); text-transform: uppercase; } #enterprise-side span.covid figcaption p { display: block; line-height: 1.6; font-family: var(--fontmedium); } #enterprise-side.fixed .talk { position: fixed; top: 40px; right: 50%; width: 350px; margin-right: -630px; } #enterprise-side.fixed span.covid { display: none; } /* enterprises -> searched */ #enterprises-searched { position: fixed; z-index: 5; top: 58px; left: 0px; width: 50%; height: auto; padding: 40px 40px 30px 40px; background-color: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all .5s ease; } #enterprises-searched.on { box-shadow: 0px 10px 60px rgba(0,0,0,.2); } #enterprises-searched .search input { display: inline-block; width: 100%; height: 44px; padding: 0px 20px 0px 50px; border-radius: 22px; background: #fff url('../img/enterprises-searched.svg') no-repeat 20px center; border: 1px solid var(--white); } #enterprises-searched .filter { display: inline-block; width: 100%; height: auto; margin-top: 22px; padding: 7px; border-radius: 60px; background-color: var(--white); } #enterprises-searched .filter .group { float: left; width: auto; padding: 16px; } #enterprises-searched .filter .group label { float: left; width: 33%; padding-left: 26px; } #enterprises-searched .filter .group:nth-of-type(1) { width: 80%; background-color: #fff; border-radius: 60px; } #enterprises-searched .filter .group:nth-of-type(2) { width: 20%; } #enterprises-searched .filter .group:nth-of-type(2) label { width: 100%; padding-left: 10px; } #enterprises-searched .filter .group:nth-of-type(2) label input { background-color: #fff; } #enterprises-searched .filter .group label input { position: relative; display: inline-block; width: 16px; height: 16px; border: 1px solid #D7D7D7; border-radius: 100%; vertical-align: middle; } #enterprises-searched .filter .group label input:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background-color: var(--lightgray); transform: translate(-50%, -50%); border-radius: 100%; content: ''; } #enterprises-searched .filter .group label b { display: inline-block; margin-left: 12px; vertical-align: middle; font-family: var(--fontmedium); color: var(--lightgray); } #enterprises-searched .filter .group label:first-of-type b { color: var(--black); } #enterprises-searched .filter .group label:first-of-type input:checked::after { background-color: var(--red); } /* enterprises -> searched */ #enterprises-searched .autocomplete-results { display: none; position: relative; z-index: 20; width: 100%; height: auto; padding: 20px; background-color: #fff; border-radius: 20px; box-shadow: 0px 10px 20px rgba(0,0,0,.2); } #enterprises-searched .autocomplete-results li { display: inline-block; width: 100%; height: auto; padding: 5px 0px; border-radius: 10px; } #enterprises-searched .autocomplete-results li:hover { background-color: #eee; } #enterprises-searched .autocomplete-results li .autocomplete-text { position: relative; display: inline-block; width: 70%; height: 30px; padding-left: 32px; font-family: var(--fontmedium); font-size: 14px; color: var(--blackgray); line-height: 30px; overflow: hidden; vertical-align: middle; } #enterprises-searched .autocomplete-results li .autocomplete-text::after { position: absolute; top: 0px; right: 0px; width: 25%; height: 100%; background: linear-gradient(to left, #fff, rgba(255,255,255,.0)); content: ''; } #enterprises-searched .autocomplete-results li:hover .autocomplete-text::after { background: linear-gradient(to left, #eee, transparent); } #enterprises-searched .autocomplete-results li .status { display: inline-block; width: 28%; padding: 6px; font-weight: bold; font-size: 10px; text-transform: uppercase; border-radius: 5px; text-align: center; vertical-align: middle; } #enterprises-searched .autocomplete-results li .status.slancamentos { background-color: var(--red); color: #fff; } #enterprises-searched .autocomplete-results li .status.savulsos { background-color: rgb(71, 140, 231); color: #fff; } #enterprises-searched .autocomplete-results li .status.sregiao { background-color: var(--green); color: #fff; } /* enterprises -> list */ #enterprises-list { float: left; width: calc(100% - 80px); height: auto; margin: 114px 40px 0px 40px; transition: all .5s ease; } #enterprises-list article { display: inline-block; width: 100%; height: auto; margin-bottom: 20px; background-color: #fff; border: 1px solid var(--white); border-radius: 10px; overflow: hidden; transition: all .5s ease; } #enterprises-list article figure { position: relative; float: left; width: 30%; height: 150px; background-color: #000; } #enterprises-list article figure .slick-list { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #enterprises-list article figure::before { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,.5), transparent); border-bottom-left-radius: 10px; content: ''; } #enterprises-list article figure img { display: inline-block; width: 100%; height: 150px; object-fit: cover; opacity: .85; } #enterprises-list article figure strong { position: absolute; z-index: 3; top: 10px; left: 10px; width: auto; padding: 5px 9px; font-weight: bold; font-size: 10px; text-transform: uppercase; background-color: var(--red); color: #fff; border-radius: 10px; } #enterprises-list article figure span.fav { position: absolute; z-index: 3; top: 10px; right: 10px; } #enterprises-list article figure span.fav button { font-size: 20px; color: #fff; opacity: 1 !important; } #enterprises-list article figure .arrow { position: absolute; z-index: 4; top: 50%; width: 30px; height: 30px; background-color: rgba(255,255,255,.5); color: var(--blackgray); font-size: 14px; transform: translateY(-50%); border-radius: 100%; text-align: center; line-height: 32px; transition: all .5s ease; } #enterprises-list article figure .arrow.prev { left: 10px; } #enterprises-list article figure .arrow.next { right: 10px; } #enterprises-list article figure .arrow:hover { background-color: #fff; } #enterprises-list article:hover { background-color: var(--white); } #enterprises-list article.destaque-sim { background-color: #fbf8ef; } #enterprises-list article figcaption { position: relative; float: left; width: 70%; height: 150px; padding: 15px; } #enterprises-list article figcaption a { display: block; width: 100%; height: 100%; } #enterprises-list article figcaption h2 { display: block; font-size: 18px; line-height: 1.6; transition: all .5s ease; } #enterprises-list article:hover figcaption h2, #enterprises-list article:hover figcaption small { color: var(--red); } #enterprises-list article figcaption em { display: block; margin-top: 3px; color: var(--gray); font-style: normal; line-height: 1.4; text-transform: lowercase; } #enterprises-list article figcaption em::first-letter { text-transform: uppercase; } #enterprises-list article figcaption span.details { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 20px; } #enterprises-list article figcaption span.details b { position: relative; display: inline-block; width: 50%; height: auto; margin-top: 8px; padding-left: 36px; font-size: 12px; line-height: 1.4; vertical-align: middle; } #enterprises-list article figcaption span.details b i { position: absolute; top: 50%; left: 0px; width: 30px; color: var(--red); font-size: 16px; transform: translateY(-50%); text-align: center; } #enterprises-list article figcaption span.details b:first-of-type { width: 100%; } #enterprises-list article figcaption small { position: absolute; bottom: 20px; right: 20px; transition: all .5s ease; } #enterprises-list article figcaption small sup { display: inline-block; margin-right: 3px; vertical-align: middle; font-family: var(--fontmedium); font-size: 14px; } #enterprises-list article figcaption small u { display: inline-block; vertical-align: middle; font-family: var(--fontmedium); font-size: 14px; text-decoration: none; } /* enterprises -> map (pin price) */ .gm-style .labels .inner { font-size: 12px; background-color: #fff; color: var(--black); font-weight: bold; font-family: 'Avenir Next', sans-serif; white-space: nowrap; border-radius: 20px; padding: 4px 10px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); margin-left: -20px; margin-top: -10px; } .gm-style .labels.active, .gm-style .labels.hover { z-index: 999 !important; } .gm-style .labels.active .inner { background: var(--red); color: #fff; top: 10; } .gm-style .labels.hover .inner { background: var(--black); color: #fff; top: 10; } /* enterprises -> footer */ #enterprises section #footer { margin-top: 60px; transition: all .5s ease; } #enterprises section #footer .container { width: 100%; } #enterprises section #footer .container::after { display: none; } #enterprises section #footer .column { width: 45%; padding-right: 70px; } #enterprises section #footer .column span.logo img { margin-bottom: 20px; } #enterprises section #footer .column nav.social ul { width: 240px; } #enterprises section #footer .column nav.social ul li { margin-bottom: 12px; } #enterprises section #footer .menu { width: 55%; } #enterprises section #footer .menu ul { width: 50%; margin-bottom: 20px; } #enterprises section #footer .menu ul:last-of-type { width: 100%; } #enterprises section #footer .menu ul li.title { margin-bottom: 20px; } /* enterprises -> resultado */ #enterprises sup#result { display: none; position: fixed; z-index: 20; top: 100px; left: 50%; width: auto; padding: 10px 20px; border-radius: 30px; background-color: var(--red); color: #fff; font-weight: bold; transform: translateX(-50%); box-shadow: 0px 30px 80px rgba(0,0,0,.2); } /* enterprises -> info window */ #enterprises .info { display: block; width: 200px; height: auto; text-align: center; } #enterprises .info a { display: block; width: 100%; height: 100%; } #enterprises .info img { display: block; width: 100%; height: 100px; object-fit: cover; border-radius: 5px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } body.page-id-26 #enterprises .info img { height: 126px; } #enterprises .info strong { display: block; margin: 10px 15px 15px 15px; font-weight: bold; color: var(--red); font-size: 12px; line-height: 1.2; } #enterprises .info small { display: inline-block; width: auto; margin: 15px 15px 0px 15px; padding: 3px 7px; background-color: var(--red); color: #fff; font-weight: bold; font-size: 10px; text-transform: uppercase; border-radius: 10px; } #enterprises .info small b { font-weight: bold; } .gm-style-iw { padding: 0px !important; } .gm-style-iw button { top: 5px !important; right: 5px !important; width: 20px !important; height: 20px !important; background: #fff !important; color: var(--red) !important; border-radius: 100%; } .gm-style-iw button img { margin: 3px !important; opacity: .5 !important; } .gm-ui-hover-effect { opacity: 1 !important; } .gm-style-iw-d { overflow: hidden !important; } /* enterprises -> list */ .list section { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .list section article { display: block; width: auto; background-color: #fff; border-radius: 20px; border: 1px solid var(--white); overflow: hidden; transition: all .5s ease; } .list section article:hover { background-color: var(--white); box-shadow: 0px 10px 80px rgba(0,0,0,.2); } .list section article figure { position: relative; z-index: 2; height: 240px; border-top-left-radius: 20px; border-top-right-radius: 20px; overflow: hidden; } .list section article figure::before { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 70%; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); content: ''; } .list section article figure img { display: inline-block; width: 100%; height: 240px; object-fit: cover; } .list section article figure em { position: absolute; z-index: 3; top: 50px; left: 20px; width: auto; padding: 7px 14px; font-weight: bold; font-size: 10px; background-color: var(--black); color: #fff; border-radius: 10px;font-style: normal; } .list section article figure strong { position: absolute; z-index: 3; top: 20px; left: 20px; width: auto; padding: 7px 14px; font-weight: bold; font-size: 10px; text-transform: uppercase; background-color: var(--red); color: #fff; border-radius: 10px; } .list section article figure span.fav { position: absolute; z-index: 3; top: 20px; right: 20px; } .list section article figure span.fav button { font-size: 24px; color: #fff; opacity: 1 !important; } .list section article figure span.fav a { font-size: 24px; color: #fff; opacity: 1 !important; } .list section article figure .arrow { position: absolute; z-index: 4; top: 50%; color: #fff; font-size: 36px; transform: translateY(-50%); } .list section article figure .arrow.prev { left: 20px; } .list section article figure .arrow.next { right: 20px; } .list section article figcaption { position: relative; height: 200px; margin-top: -1px; padding: 20px; } .list section article figcaption h2 { display: block; font-size: 20px; line-height: 1.6; color: var(--red); } .list section article figcaption em { display: block; margin-top: 5px; color: var(--gray); font-style: normal; line-height: 1.4; } .list section article figcaption span.details { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 20px; } .list section article figcaption span.details b { position: relative; display: inline-block; width: 48%; height: auto; margin-top: 10px; padding-left: 36px; vertical-align: middle; font-size: 14px; line-height: 1.5; } .list section article figcaption span.details b i { position: absolute; top: 50%; left: 0px; width: 30px; color: var(--red); font-size: 16px; transform: translateY(-50%); text-align: center; } .list section article figcaption span.details b:first-of-type { width: 80%; } .list section article figcaption span.value b { display: inline-block; width: auto; margin-top: 10px; padding: 4px 10px 5px 10px; background-color: var(--red); color: #fff; border-radius: 20px; } .list section article figcaption span.value b sup { display: inline-block; margin-right: 3px; vertical-align: middle; font-weight: bold; font-size: 12px; } .list section article figcaption span.value b u { display: inline-block; vertical-align: middle; font-weight: bold; font-size: 12px; text-decoration: none; } .list footer { display: inline-block; width: 100%; height: auto; margin-top: 60px; text-align: center; } .list footer span a { display: inline-block; width: auto; padding: 12px 30px; font-family: var(--fontmedium); font-size: 16px; background-color: var(--cor-quintenaria); border: none; color: #fff; border-radius: 20px; } /* favorites */ .wpfp-img { display: none !important; } .ccc-favorite-post-count { position: relative; margin-right: 0px !important; } .ccc-favorite-post-count span { margin-right: 0px !important; } .ccc-favorite-post-count span.num { position: absolute; top: -2px; right: -2px; width: 20px !important; height: 20px; background-color: #fff; border: 2px solid var(--red); color: var(--red); font-weight: bold; font-size: 12px; border-radius: 100%; line-height: 18px; text-align: center; } .ccc-favorite-post-count > a::before { font-size: 24px !important; } .ccc-favorite-post-toggle { display: inline-block; vertical-align: middle; } /* ######################################## SOBRE */ /* sobre */ #sobre { margin-top: 80px; background: #fff url('../img/sobre-bg.svg') no-repeat 100% 270px; background-size: 1600px; } /* sobre -> header */ #sobre header { display: inline-block; width: 100%; margin: 80px 0px 120px 0px; text-align: center; } #sobre header h6 { display: block; width: 660px; margin: 0px auto; font-weight: bold; font-size: 58px; } #sobre header p { display: inline-block; margin-top: 20px; width: 700px; font-size: 16px; line-height: 1.6; color: var(--gray); } /* sobre -> infos */ #sobre nav.infos { position: relative; display: inline-block; width: 100%; height: auto; margin-bottom: 40px; } #sobre nav.infos ul { float: left; width: 800px; height: auto; } #sobre nav.infos ul li { display: inline-block; width: 48%; height: auto; padding-right: 70px; margin-bottom: 50px; vertical-align: top; } #sobre nav.infos ul li figure { position: relative; display: block; width: 65px; height: 52px; margin-bottom: 20px; } #sobre nav.infos ul li figure img { position: absolute; bottom: 0px; left: 0px; width: auto; max-width: 100%; height: auto; max-height: 52px; } #sobre nav.infos ul li strong { display: block; margin-bottom: 20px; font-weight: bold; font-size: 18px; line-height: 1.2; } #sobre nav.infos ul li p { display: block; font-size: 16px; line-height: 1.4; } #sobre figure.side { position: relative; float: left; width: calc(100% - 800px); height: auto; } #sobre figure.side img { position: absolute; top: -100px; right: 240px; width: 200px; height: auto; } /* sobre -> text */ #sobre section header { margin-bottom: 80px; } #sobre section article p { display: block; margin-bottom: 30px; font-size: 16px; line-height: 2; } #sobre section aside { float: left; width: 50%; height: auto; padding-left: 100px; } #sobre section aside span { display: inline-block; width: 100%; height: auto; margin-bottom: 60px; } #sobre section aside span h2 { display: block; margin-bottom: 10px; font-weight: bold; font-size: 16px; color: var(--red); text-transform: uppercase; } #sobre section aside span p { display: block; line-height: 1.8; } #sobre section figure { position: relative; float: left; width: 50%; height: auto; } #sobre section figure img { position: relative; float: right; width: auto; } #sobre section figure::before { position: absolute; top: 0px; left: -180px; width: 500px; height: 500px; background-color: var(--red); border-radius: 100%; content: ''; } #sobre footer { display: inline-block; width: 100%; height: auto; margin-top: 40px; text-align: center; } #sobre footer span a { display: inline-block; width: auto; padding: 12px 30px; font-family: var(--fontmedium); font-size: 16px; background-color: var(--red); border: 1px solid var(--red); color: #fff; border-radius: 20px; } #sobre footer span a:hover { background-color: #fff; color: var(--red); } /* ######################################## CALL TO ACTIONS */ /* call to action -> calculator */ #cta-calc section { display: inline-block; width: 100%; height: auto; margin: 40px 0px; padding: 70px; background-color: var(--white); border-radius: 20px; } #cta-calc section aside { float: left; width: 440px; height: auto; } #cta-calc section aside h6 { display: block; width: 80%; font-weight: bold; font-size: 52px; } #cta-calc section aside p { display: block; margin: 20px 0px 30px 0px; font-size: 16px; line-height: 1.6; } #cta-calc section aside span a { display: inline-block; width: auto; padding: 12px 30px; background-color: var(--black); color: #fff; font-family: var(--fontmedium); font-size: 16px; border-radius: 40px; } #cta-calc section aside span a:hover { background-color: var(--red); } #cta-calc section figure { position: relative; float: left; width: calc(100% - 440px); height: auto; } #cta-calc section figure img { position: absolute; top: -160px; right: 0px; width: 90%; } /* call to action -> default */ .cta section { position: relative; display: inline-block; width: 100%; height: auto; padding: 60px; background-color: var(--white); border-radius: 20px; overflow: hidden; } .cta section figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; } .cta section article { display: block; width: 800px; height: auto; margin: 0px auto; text-align: center; } .cta section article h6 { display: block; font-weight: bold; font-size: 48px; } .cta section article p { display: block; margin: 10px 0px 30px 0px; font-size: 16px; line-height: 1.8; color: var(--blackgray); } .cta section article span a { display: inline-block; width: auto; padding: 12px 30px; background-color: var(--black); color: #fff; font-family: var(--fontmedium); font-size: 16px; border-radius: 40px; } .cta section article span a:hover { background-color: var(--red); } /* call to action -> why */ #why aside { position: relative; float: left; width: 50%; height: 1px; } #why aside figure { position: absolute; overflow: hidden; } #why aside figure:nth-of-type(1) { top: 0px; right: 120px; width: calc(50vmax - 120px); height: 420px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } #why aside figure:nth-of-type(2) { top: 250px; right: 60px; width: 60%; height: 300px; border-radius: 20px; } #why aside figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; } #why nav { float: left; width: 50%; height: auto; margin: 10px 0px 160px 0px; counter-reset: porque; } #why nav ol li { position: relative; display: block; margin-top: 70px; padding: 0px 50px; } #why nav ol li::before { position: absolute; top: 0px; left: 0px; font-weight: bold; font-size: 20px; color: var(--lightgray); text-transform: uppercase; counter-increment: porque; content: "0" counter(porque); } #why nav ol li h5 { display: block; margin-bottom: 10px; font-weight: bold; font-size: 18px; text-transform: uppercase; } #why nav ol li p { display: block; line-height: 1.8; color: var(--gray); } /* ######################################## BLOG */ /* blog main */ #blog { position: relative; margin-top: 140px; overflow: hidden; } #blog::before { position: absolute; z-index: -1; top: 0px; left: -490px; width: 600px; height: 600px; background-color: var(--red); border-radius: 100%; content: ''; } #blog::after { position: absolute; z-index: -1; top: 0px; right: -170px; width: 340px; height: 340px; background-color: var(--red); border-radius: 100%; content: ''; } #blog header { position: relative; display: block; width: 500px; height: auto; margin: 0px auto 70px auto; text-align: center; } #blog header h6 { display: block; margin-bottom: 40px; font-weight: bold; font-size: 36px; } #blog header h6 small { display: block; margin-bottom: 10px; font-weight: bold; font-size: 12px; text-transform: uppercase; } #blog header h6 b { font-weight: bold; color: var(--red); } #blog header form { display: inline-block; width: 100%; height: 70px; padding: 10px; border-radius: 35px; box-shadow: 0px 30px 80px rgba(0,0,0,.1); } #blog header form input[type=search] { float: left; width: calc(100% - 50px); height: 50px; padding: 0px 20px; } #blog header form input[type=submit] { float: left; width: 50px; height: 50px; background: #EB194B url('../img/feat-form-submit.svg') no-repeat center center; border-radius: 100%; text-indent: -9999em; } #blog header form input[type=submit]:hover { background-color: var(--black); } #blog header nav { display: inline-block; width: 100%; height: auto; margin-top: 40px; text-align: center; } #blog header nav strong { display: block; margin-bottom: 20px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: bold; color: var(--lightgray); } #blog header nav li { display: inline-block; width: auto; margin: 0px 10px; } #blog header nav li a { display: block; padding: 7px 14px; border: 1px solid var(--white); color: var(--gray); font-weight: bold; font-size: 12px; border-radius: 7px; } #blog header nav li a:hover { border-color: var(--red); } #blog main { display: inline-block; width: 100%; height: auto; } #blog main section { float: left; width: calc(100% - 450px); height: auto; padding-right: 120px; } #blog main section article { display: inline-block; width: 100%; height: auto; margin-bottom: 50px; } #blog main section article figure img { display: inline-block; width: 100%; height: 280px; margin-bottom: 25px; border-radius: 20px; box-shadow: 0px 10px 60px rgba(0,0,0,.1); object-fit: cover; transition: all .5s ease; } #blog main section article figcaption { position: relative; display: inline-block; width: 100%; height: auto; } #blog main section article figcaption sup { position: absolute; top: 4px; right: 0px; color: var(--gray); font-size: 12px; } #blog main section article figcaption sup i { display: inline-block; margin-right: 5px; color: var(--white2); vertical-align: middle; } #blog main section article figcaption h1 { display: block; width: 80%; margin-bottom: 20px; font-weight: bold; font-size: 24px; line-height: 1.4; transition: all .5s ease; } #blog main section article figcaption small { display: inline-block; width: auto; margin: 0px 10px 10px 0px; padding: 6px 10px; background-color: var(--white); color: var(--gray); border-radius: 20px; } #blog main section article figcaption p { display: block; width: 80%; margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--gray); } #blog main section article:hover figcaption h1 { color: var(--red); } #blog main aside { float: left; width: 450px; height: auto; } #blog main aside .calc { display: inline-block; width: 100%; height: auto; margin-bottom: 60px; padding: 40px; background-color: #fff; border: 1px solid var(--white); border-radius: 20px; } #blog main aside .calc strong { display: block; width: 70%; font-weight: bold; font-size: 36px; line-height: 1.2; } #blog main aside .calc p { display: block; margin: 20px 0px; font-size: 16px; line-height: 1.8; color: var(--gray); } #blog main aside .calc span a { display: inline-block; width: auto; padding: 14px 40px; border-radius: 40px; background-color: var(--black); color: #fff; font-family: var(--fontmedium); } #blog main aside .calc span a:hover { background-color: var(--red); } #blog main aside .tags { margin-bottom: 40px; } #blog main aside h6 { display: block; margin-bottom: 24px; font-weight: bold; font-size: 24px; } #blog main aside small { display: inline-block; width: auto; margin: 0px 10px 10px 0px; } #blog main aside small a { display: block; padding: 6px 10px; background-color: var(--white); color: var(--gray); border-radius: 20px; } #blog main aside small a:hover { background-color: var(--black); color: #fff; } #blog main aside .others { margin-bottom: 40px; } #blog main aside .others span.post { display: inline-block; width: 100%; height: auto; margin-bottom: 20px; } #blog main aside .others span.post figure { position: relative; float: left; width: 50%; height: 120px; border-radius: 10px; overflow: hidden; box-shadow: 0px 10px 40px rgba(0,0,0,.1); } #blog main aside .others span.post figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; } #blog main aside .others span.post figcaption { float: left; width: 40%; height: auto; padding: 10px 0px 0px 20px; } #blog main aside .others span.post figcaption h1 { display: block; font-weight: bold; font-size: 16px; line-height: 1.3; } #blog main aside .others span.post:hover figcaption h1 { text-decoration: underline; } #blog main aside .enterprise article { display: block; width: auto; background-color: #fff; border-radius: 20px; border: 1px solid var(--white); overflow: hidden; transition: all .5s ease; } #blog main aside .enterprise article:hover { background-color: var(--white); } #blog main aside .enterprise article figure { position: relative; z-index: 2; height: 240px; background-color: #000; border-top-left-radius: 20px; border-top-right-radius: 20px; overflow: hidden; } #blog main aside .enterprise article figure::before { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 70%; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); content: ''; } #blog main aside .enterprise article figure img { display: inline-block; width: 100%; height: 240px; object-fit: cover; } #blog main aside .enterprise article figure strong { position: absolute; z-index: 3; top: 20px; left: 20px; width: auto; padding: 7px 14px; font-weight: bold; font-size: 12px; text-transform: uppercase; background-color: var(--red); color: #fff; border-radius: 10px; } #blog main aside .enterprise article figure span.fav { position: absolute; z-index: 3; top: 20px; right: 20px; } #blog main aside .enterprise article figure span.fav button { font-size: 20px; color: #fff; opacity: 1 !important; } #blog main aside .enterprise article figure .arrow { position: absolute; z-index: 4; top: 50%; color: #fff; font-size: 36px; transform: translateY(-50%); } #blog main aside .enterprise article figure .arrow.prev { left: 20px; } #blog main aside .enterprise article figure .arrow.next { right: 20px; } #blog main aside .enterprise article figcaption { position: relative; height: 200px; margin-top: -1px; padding: 20px; } #blog main aside .enterprise article figcaption h2 { display: block; font-size: 26px; } #blog main aside .enterprise article figcaption em { display: block; margin-top: 16px; color: var(--gray); font-style: normal; } #blog main aside .enterprise article figcaption span.details { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 20px; } #blog main aside .enterprise article figcaption span.details b { position: relative; float: left; width: 50%; height: auto; margin-top: 15px; padding-left: 36px; } #blog main aside .enterprise article figcaption span.details b i { position: absolute; top: 50%; left: 0px; width: 30px; color: var(--lightgray); font-size: 20px; transform: translateY(-50%); text-align: center; } #blog main aside .enterprise article figcaption span.details b:first-of-type { width: 100%; } /* blog -> post */ #blog-post { position: relative; margin: 58px 0px 0px 0px; } #blog-post header { display: inline-block; width: 100%; height: auto; padding: 40px 0px 86px 0px; text-align: center; background-color: var(--red); } #blog-post header sup { display: inline-block; width: auto; margin-bottom: 24px; padding: 7px 20px; border-radius: 40px; background-color: #fff; color: var(--red); font-size: 12px; font-family: var(--fontmedium); } #blog-post header sup i { display: inline-block; margin-right: 5px; } #blog-post header h1 { display: block; width: 700px; margin: 0px auto 10px auto; font-weight: bold; font-size: 36px; color: #fff; line-height: 1.2; } #blog-post header h2 { display: block; width: 600px; margin: 0px auto; font-size: 18px; line-height: 1.6; color: #fff; } #blog-post section { position: relative; display: inline-block; width: 100%; height: auto; margin-top: -50px; } #blog-post section .container { position: relative; } #blog-post section figure.cover img { display: inline-block; width: 100%; height: 40vh; border-radius: 20px; object-fit: cover; } #blog-post section article { display: inline-block; width: 100%; height: auto; margin-top: 60px; padding: 0px 200px; } #blog-post section article h1, #blog-post section article h2, #blog-post section article h3, #blog-post section article h4, #blog-post section article h5, #blog-post section article h6 { display: block; margin-bottom: 20px; color: var(--gray); font-weight: bold; font-size: 18px; } #blog-post section article h1 { font-size: 36px; } #blog-post section article h2 { font-size: 30px; } #blog-post section article h3 { font-size: 24px; } #blog-post section article p { display: block; margin-bottom: 30px; font-size: 16px; line-height: 1.6; text-align: justify; } #blog-post section article ul, #blog-post section article ol { display: block; margin-bottom: 30px; padding-left: 40px; counter-reset: lista; } #blog-post section article ul li, #blog-post section article ol li { position: relative; display: block; margin-bottom: 16px; font-size: 16px; line-height: 1.6; } #blog-post section article ul li::before { position: absolute; top: 8px; left: -20px; width: 5px; height: 5px; background-color: var(--red); border-radius: 100%; content: ''; } #blog-post section article ol li::before { position: absolute; top: 4px; left: -30px; width: 20px; height: 20px; font-weight: bold; font-size: 12px; background-color: var(--red); color: #fff; text-align: center; line-height: 20px; border-radius: 100%; counter-increment: lista; content: counter(lista); } #blog-post section article img { display: block; width: auto; max-width: 100%; height: auto; margin-bottom: 40px; border-radius: 20px; } #blog-post section article strong, #blog-post section article b { font-weight: bold; color: var(--gray); } #blog-post section article a { color: var(--red); text-decoration: underline; } #blog-post section article .wp-caption { margin-bottom: 30px; padding: 10px; background-color: #eee; border: 1px dotted #ccc; border-radius: 10px; } #blog-post section article .wp-caption img { margin-bottom: 10px; } #blog-post section article .wp-caption p { margin-bottom: 0px; font-weight: bold; font-size: 11px; text-transform: uppercase; color: var(--gray); } #blog-post section article .aligncenter { margin: 0px auto; } #blog-post section span#ouvir { position: absolute; top: calc(40vh + 70px); left: 60px; text-align: center; cursor: pointer; } #blog-post section span#ouvir i { display: block; width: 50px; height: 50px; border: 1px solid var(--white2); color: var(--gray); border-radius: 100%; line-height: 50px; transition: all .5s ease; } #blog-post section span#ouvir:hover i { background-color: var(--white); } #blog-post section span#ouvir b { display: block; margin-top: 10px; font-size: 12px; } #blog-post section nav#share { position: absolute; top: calc(40vh + 70px); right: 60px; width: 10px; } #blog-post section nav#share li { display: block; margin-bottom: 30px; text-align: center; font-size: 20px; } #blog-post section nav#share li a { display: block; color: var(--gray); } #blog-post section nav#share li a:hover { color: var(--red); } /* blog -> post -> pagin */ #blog-post.pagin header { margin-bottom: 60px; padding: 60px 0px; } #blog-post.pagin header h1 { margin-bottom: 0px; } /* blog -> feat */ #blog-feat section { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } #blog-feat section article figure { position: relative; display: block; height: 220px; margin-bottom: 20px; border-radius: 20px; overflow: hidden; } #blog-feat section article figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; } #blog-feat section article small { display: inline-block; width: auto; margin: 0px 10px 10px 0px; padding: 4px 8px; background-color: var(--white); color: var(--gray); border-radius: 20px; font-size: 13px; } #blog-feat section article h2 { display: block; font-weight: bold; font-size: 22px; line-height: 1.2; } #blog-feat section article strong { display: block; margin: 10px 0px 12px 0px; line-height: 1.4; } #blog-feat footer { display: inline-block; width: 100%; height: auto; margin-top: 80px; text-align: center; } #blog-feat footer span a { display: inline-block; width: auto; padding: 12px 30px; background-color: var(--red); border: 1px solid var(--red); color: #fff; font-family: var(--fontmedium); font-size: 16px; border-radius: 40px; } #blog-feat footer span a:hover { background-color: #fff; color: var(--red); } /* blog -> loading */ #progress .cont { position: relative; z-index: 100; display: inline-block; width: 100%; height: 7px; margin: -65px 0 70px 0; background-color: #ececec; } #progress .cont b { position: absolute; top: 0; left: 0; width: 0; height: 7px; background-color: var(--red); } /* ######################################## ANUNCIE SEU IMÓVEL */ /* anuncie -> header */ #anuncie header.cover { position: relative; display: inline-block; width: 100%; height: 350px; margin: 58px 0px 80px 0px; background-color: #000; } #anuncie header.cover .breadcrumb { position: relative; z-index: 2; left: 50%; margin: 30px 0px 0px -630px; } #anuncie header.cover .breadcrumb li a { color: #fff; opacity: .5; } #anuncie header.cover .breadcrumb li { color: #fff; } #anuncie header.cover figcaption { position: absolute; z-index: 2; top: 50%; left: 50%; width: 550px; height: auto; transform: translate(-50%, -50%); text-align: center; } #anuncie header.cover figcaption h1 { display: block; font-weight: bold; font-size: 36px; color: #fff; line-height: 1.2; } #anuncie header.cover figcaption p { display: block; margin-top: 20px; font-size: 16px; color: #fff; line-height: 1.6; } #anuncie header.cover figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: .5; object-fit: cover; object-position: 0% 31%; } #anuncie section .form { width: 100%; padding: 0px 200px; } /* anuncie -> header */ body.page-id-99379 #why { margin-bottom: 0px; } body.page-id-99379 #footer { background-color: #fff; } body.page-id-99379 #anuncie-passos { margin: 40px 0px 120px 0px; } body.page-id-99379 #why nav ol li { padding: 0px; } body.page-id-99379 #why nav ol li::before { display: none; } #anuncie-header { height: auto; margin: 58px 0px 0px 0px; overflow: hidden; } #anuncie-header section { position: fixed; z-index: 20; top: 58px; left: 0%; width: 50%; height: calc(100vh - 58px); } #anuncie-header section article { position: fixed; z-index: 2; top: 50%; left: 40%; width: 560px; height: auto; margin-left: -630px; transform: translateY(-50%); opacity: 0; transition: all .5s ease; } #anuncie-header section article h1 { display: block; font-weight: bold; font-size: 14px; text-transform: uppercase; color: #fff; } #anuncie-header section article h2 { display: block; margin: 16px 0px; font-weight: bold; font-size: 64px; color: #fff; } #anuncie-header section article p { display: block; color: #fff; line-height: 1.8; font-family: var(--fontmedium); } #anuncie-header section article p a { text-decoration: underline; color: #fff; } #anuncie-header section article nav ul { display: block; margin-top: 20px; } #anuncie-header section article nav ul li { position: relative; display: inline-block; width: 48%; margin-bottom: 30px; padding-left: 30px; vertical-align: top; color: #fff; font-family: var(--fontmedium); } #anuncie-header section article nav ul li i { position: absolute; top: -3px; left: 0px; font-size: 18px; } #anuncie-header section article span a { display: inline-block; width: auto; height: auto; margin-top: 10px; padding: 12px 18px 14px 18px; border-radius: 10px; background-color: var(--red); color: #fff; text-align: center; font-size: 14px; } #anuncie-header section article span a:hover { background-color: #fff; color: var(--black); } #anuncie-header section article span a i { display: inline-block; width: auto; margin-right: 7px; font-size: 12px; vertical-align: middle; } #anuncie-header.end section article span a i { font-size: 18px; } #anuncie-header aside { position: relative; float: right; width: 50%; height: auto; padding: 20px 40px 140px 40px; opacity: 0; transition: all 1s ease; } #anuncie-header aside h6 { display: block; font-weight: bold; font-size: 26px; color: var(--red); } #anuncie-header aside p { display: block; margin: 14px 0px; color: var(--gray); font-size: 16px; } #anuncie-header aside p a { text-decoration: underline; } #anuncie-header aside p.confirm { font-size: 12px; font-family: var(--fontmedium); color: var(--red); text-transform: uppercase; } #anuncie-header aside em { display: block; margin: 10px 0px; font-style: normal; } #anuncie-header aside label { display: block; margin-top: 20px; } #anuncie-header aside label strong { display: block; margin: 16px 0px; font-family: var(--fontmedium); line-height: 1.3; } #anuncie-header aside label b { display: block; margin-top: 5px; font-size: 12px; } #anuncie-header aside label input { display: block; width: 100%; height: 50px; padding: 0px 30px; border-radius: 50px; border: 1px solid var(--white2); font-size: 16px; } #anuncie-header aside label input.error { border-color: var(--red); } #anuncie-header aside label input.ok { border-color: var(--green); } #anuncie-header aside label small a { display: block; margin-top: 14px; font-size: 14px; color: var(--gray); } #anuncie-header aside label small a:hover { text-decoration: underline; } #anuncie-header aside button { position: fixed; z-index: 30; bottom: 30px; right: 40px; width: 100px; height: 50px; border-radius: 10px; background-color: var(--red); color: #fff; text-align: center; font-family: var(--fontmedium); } #anuncie-header aside button.back { left: calc(50% + 40px); background-color: #fff; border: 1px solid var(--red); color: var(--red); } #anuncie-header aside .text { display: inline-block; width: 100%; height: auto; } #anuncie-header aside .text h5 { display: block; margin: 25px 0px 0px 0px; font-weight: bold; } #anuncie-header aside .text p { display: block; margin: 20px 0px 0px 0px !important; line-height: 1.6; } #anuncie-header aside .text nav ul li { position: relative; display: inline-block; width: 100%; height: auto; margin-top: 20px; padding-left: 35px; } #anuncie-header aside .text nav ul li strong { display: block; font-weight: bold; font-size: 14px; line-height: 1.6; } #anuncie-header aside .text nav ul li p { margin: 5px 0px 0px 0px !important; } #anuncie-header aside .text nav ul li i { position: absolute; top: 3px; left: 0px; font-size: 20px; } #anuncie-header #google-login { float: right; width: 100%; height: auto; padding: 40px 40px 140px 40px; text-align: center; } #anuncie-header #google-login h1 { display: block; font-weight: bold; font-size: 26px; color: var(--red); } #anuncie-header #google-login b { display: block; margin: 40px 0px; font-size: 11px; font-weight: bold; text-transform: uppercase; } #anuncie-header #google-login span a { display: block; font-size: 14px; color: var(--red); text-decoration: underline; } #anuncie-header #google-login .customGPlusSignIn { display: inline-block; width: auto; margin-top: 40px; padding: 16px 40px; background-color: var(--green); color: #fff; border-radius: 10px; cursor: pointer; transition: all .5s ease; } #anuncie-header #google-login .customGPlusSignIn .buttonText { font-weight: bold; } #anuncie-header #google-login .customGPlusSignIn:hover { background-color: var(--black); } #anuncie-header #video { position: fixed; top: 58px; left: 0px; width: 100%; height: calc(100vh - 58px); background-color: #000; transition: all 2s ease; } #anuncie-header #video-fotos { display: none; position: fixed; z-index: 1000; top: 58px; left: 0px; width: 50%; height: calc(100vh - 58px); background-color: #000; } #anuncie-header #video-fotos sup { display: none; position: absolute; z-index: 3; top: 10px; left: 50%; width: auto; padding: 6px 20px; border-radius: 30px; background-color: var(--red); color: #fff; font-weight: bold; font-size: 10px; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; cursor: pointer; } #anuncie-header #video-fotos video, #anuncie-header #video video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 1; } #anuncie-header.on section article { opacity: 1; left: 50%; transition-delay: .5s; } #anuncie-header.on aside { opacity: 1; transition-delay: 1.3s; } #anuncie-header.on aside form { display: none; } #anuncie-header.on #video { width: 50%; } #anuncie-header.on #video video { opacity: .3; } /* anuncie -> step */ #anuncie-step { position: fixed; z-index: 10; bottom: 0px; left: calc(50% + 40px); width: calc(50% - 80px); height: auto; opacity: 0; transition: all 1s ease; } #anuncie-step::after { position: fixed; z-index: -1; bottom: 0px; right: 0px; width: 50%; height: 100px; background-color: #fff; content: ''; } #anuncie-step.on { bottom: 100px; opacity: 1; } #anuncie-step b { position: absolute; top: -16px; left: 0px; font-weight: bold; font-size: 10px; text-transform: uppercase; color: var(--black); } #anuncie-step em { position: absolute; top: 0px; left: 0px; width: 100%; height: 4px; background-color: #eee; border-radius: 10px; overflow: hidden; } #anuncie-step em i { position: absolute; top: 0px; left: 0px; width: auto; height: 4px; background-color: var(--red); transition: all 1.5s ease; } #finalizar-anuncie { display: none; } /* anuncie -> text */ #anuncie-header section article.on { left: 40% !important; opacity: 0 !important; transition-delay: 0s !important; z-index: -1; } /* anuncie -> end */ #anuncie-header.end { width: 100%; } #anuncie-header.end section article { top: 50%; left: 50%; width: 900px; margin: 0px; text-align: center; transform: translate(-50%, -50%); opacity: 1; } #anuncie-header.end section article p { margin-bottom: 20px; } #anuncie-header.end aside { opacity: 0; transition-delay: 0s; } #anuncie-header.end #video { width: 100%; } #anuncie-header.end #video video { opacity: .3; } /* anuncie -> step */ #anuncie-header sub { position: fixed; z-index: 20; bottom: 20px; left: 75%; font-size: 12px; font-family: var(--fontmedium); text-transform: uppercase; transform: translateX(-50%); opacity: 0; transition: all 1s ease; } #anuncie-header sub.on { bottom: 45px; opacity: 1; transition-delay: 1s; } #anuncie-header small { display: none; position: fixed; z-index: 22; bottom: 88px; left: 75%; width: auto; padding: 5px 40px; font-family: var(--fontmedium); font-size: 10px; border-radius: 30px; background-color: var(--red); color: #fff; text-transform: uppercase; transform: translateX(-50%); } /* step */ .step { display: none; } .step .field-hidden { display: none !important; } .step h5 { display: block; margin: 25px 0px 10px 0px; color: var(--red); font-family: var(--fontmedium); font-size: 18px; } .step small { display: none; position: fixed; z-index: 2; bottom: 45px; left: calc(50% + 40px); font-family: var(--fontmedium); font-size: 12px; color: var(--red); } .wpcf7-response-output { display: none !important; } /* step 1 */ .step-1 { display: block; } /* step 1 complemento */ .step-11 label { float: left; margin-top: 25px !important; padding-right: 10px; } .step-11 .lb30 { width: 30%; } .step-11 .lb70 { width: 70%; } .step-11 .lb100 { width: 100%; } .step-11 .error { border-color: var(--red); } .step-11 button { display: inline-block !important; margin-top: 20px; } /* step 2 */ .step-2 .tipo { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; margin: 30px 0px 20px 0px; } .step-2 .tipo figure { position: relative; display: block; height: 140px; margin-bottom: 10px; border: 1px solid var(--white2); border-radius: 10px; text-align: center; cursor: pointer; overflow: hidden; transition: all .5s ease; } .step-2 .tipo figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: all .5s ease; } .step-2 .tipo figure strong { position: absolute; z-index: 2; top: 50%; left: 50%; padding: 10px; background-color: #fff; color: var(--black); transform: translate(-50%, -50%); font-family: var(--fontmedium); font-size: 16px; border-radius: 50px; transition: all .5s ease; } .step-2 .tipo figure:hover { border-color: #fff; } .step-2 .tipo figure:hover img { opacity: 1; } .step-2 .tipo figure.on strong { background-color: var(--red); color: #fff; } /* step 3 */ .step-3 p { margin-bottom: 25px !important; } .step-3 button { margin: 20px 0px 0px 0px !important; } .step-3 span { display: inline-block; width: calc(50% - 3px); padding-right: 20px; } .step-3 span em { display: block; font-weight: bold; font-family: var(--fontmedium); font-style: normal; } .step-3 span.input.area { width: 100%; margin-top: 10px; } .step-3 span.select { margin-top: 10px; padding-right: 10px; vertical-align: top; } .step-3 span.select i { display: inline-block; width: auto; vertical-align: middle; color: var(--white2); font-size: 24px; cursor: pointer; transition: all .5s ease; } .step-3 span.select i:hover { color: var(--red); } .step-3 span.select input { display: inline-block; width: 30px; height: 30px; font-weight: bold; font-family: var(--fontmedium); font-size: 20px; text-align: center; vertical-align: middle; color: var(--blackgray); } .step-3 span.select span { width: auto; padding-right: 0px; } .step-3 span.input span { width: 100%; padding-right: 0px; } .step-3 span label { display: inline-block; width: 49%; padding-right: 10px; vertical-align: top; font-family: var(--fontmedium); } .step span.input label, .step span.radio label { width: 100%; } .step-3 input[type=radio] { position: relative; display: inline-block !important; width: 20px !important; height: 20px !important; margin: -2px 7px 0px 0px; padding: 0px !important; border: 1px solid var(--red) !important; border-radius: 100% !important; vertical-align: middle; cursor: pointer; } .step-3 input[type=radio]:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background-color: var(--red); transform: translate(-50%, -50%); border-radius: 100%; content: ''; } .step span.input { width: calc(50% - 3px); } .step span.input.input-100 { width: 100%; } .step-3 .vendaaluguel { width: 100%; padding-right: 0px; } .step-3 .vendaaluguel .wpcf7-list-item { width: 100%; margin-bottom: 0px; vertical-align: top; } .step-3 .wpcf7-radio { width: 100%; padding-right: 0px; } .step-3 .wpcf7-radio label { margin-top: 0px !important; } .step-3 .vendaaluguel .wpcf7-list-item { width: 50%; margin: 0px !important; } .step-3 .vendaaluguel .wpcf7-list-item label { width: auto; margin-top: 0px; } .step-3 .vendaaluguel .wpcf7-list-item span { width: auto; } .wpcf7-form-control-wrap { width: 100%; } /* step 333 */ .step-333 p { line-height: 1.4; } .box-modalidade { position: relative; display: inline-block; width: 100%; height: auto; margin-top: 30px; padding: 5px 20px 5px 60px; border: 1px solid var(--gray); border-radius: 10px; opacity: .6; cursor: pointer; transition: all .5s ease; } .box-modalidade p { display: block; font-size: 14px; } .box-modalidade p strong { font-weight: bold; } .box-modalidade h4 { font-weight: bold; } .box-modalidade h4 b { display: inline-block; width: auto; margin-left: 10px; padding: 5px 10px; font-weight: bold; font-size: 10px; background-color: #ffdee6; color: var(--red); vertical-align: middle; border-radius: 20px; } .box-modalidade input { position: absolute; top: 50%; left: 20px; width: 20px; height: 20px; border: 1px solid var(--red); border-radius: 100%; transform: translateY(-50%); cursor: pointer; } .box-modalidade input:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background-color: var(--red); transform: translate(-50%, -50%); border-radius: 100%; content: ''; } .box-modalidade.box-on { opacity: 1; } .box-valor { display: inline-block; width: 100%; height: auto; padding: 20px; } .box-valor span { display: inline-block; width: 100%; height: auto; margin-bottom: 10px; } .box-valor span b { float: left; width: auto; } .box-valor span em { float: right; width: auto; margin: 0px !important; text-align: right; font-style: normal; } .box-valor.box-receber { margin-top: 20px; background-color: #eee; border-radius: 10px; } .box-valor p { margin: 0px; } .box-valor.box-receber span b, .box-valor.box-receber span em, .receber-inquilino b, .receber-inquilino em { font-weight: bold; } .receber-receber { margin-bottom: 20px !important; padding-bottom: 20px; border-bottom: 1px solid var(--white2); } .receber-receber b, .receber-receber em { font-weight: bold; } .editar-valor { display: inline-block; width: auto !important; margin-top: 20px; padding-bottom: 5px; font-weight: bold; border-bottom: 1px dotted var(--red); color: var(--red); cursor: pointer; } .box-valor span.aluguel { display: none; } /* step 33 */ .step-33 strong br { display: block !important; } .step-33 span { display: inline-block; padding-right: 20px; } .step-33 span.drop { width: calc(50% - 3px); vertical-align: top; } .step-33 span.drop label { width: 100%; margin-top: 20px !important; } .step-33 span.drop select { display: block; width: 100%; height: 50px; padding: 0px 20px; background: #fff url('../img/select.svg') no-repeat 93% center; background-size: 10px; border: 1px solid var(--white2); border-radius: 24px; color: var(--gray); } .step span.input.input-corretor { display: none; width: 100%; } /* step textarea */ .step textarea { display: inline-block; width: 100%; height: 120px; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--white2); } .step textarea.error { border-color: var(--red); } .step textarea.conformidade { font-size: 13px; color: #444; line-height: 1.6; resize: none; } .step .descricao { width: calc(100% - 3px); } /* step 5 */ .step-5 .midia { display: inline-block; margin-bottom: -50px; vertical-align: top; } .step-5 .midia figure { position: relative; display: inline-block; width: 80px; height: 80px; margin: 0px 7px 7px 0px; } .step-5 .midia figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; } .step-5 .file { position: relative; display: inline-block; width: 80px; height: 80px; margin-left: -2px; background-color: #eee; border-radius: 5px; border: 1px solid #ddd; } .step-5 .file input { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; } .step-5 .file i { position: absolute; top: 50%; left: 50%; width: auto; font-size: 24px; color: var(--red); transform: translate(-50%, -50%); } /* step 7 */ /* .step-7 h6 { margin-bottom: 30px !important; } .step-7 p { margin-top: 15px !important; font-size: 16px; line-height: 1.4; } */ .escolha-documentos { display: grid; margin: 25px 0px 15px 0px; grid-template-columns: 1fr 1fr; } .escolha-documentos label { position: relative; display: block; padding-left: 30px; font-family: var(--fontmedium); } .escolha-documentos label input { position: absolute; top: 50%; left: 00px; width: 16px !important; height: 16px !important; margin: -1px 10px 0px 0px; padding: 0px !important; border-radius: 100%; border: 1px solid var(--gray) !important; transform: translateY(-50%); } .escolha-documentos label input:checked { border-color: var(--red); } .escolha-documentos label input:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 100%; background-color: var(--red); transform: translate(-50%, -50%); content: ''; } .lista-documentos { display: block; } .step-6 span { display: inline-block; padding-right: 20px; } .step-6 span.file { width: calc(50% - 3px); margin: 0px 0px 10px 0px; } .step-6 span.file.f100 { width: 100%; } .step-6 label { margin-top: 0px !important; } .step-6 span.file input { height: auto !important; padding: 0px !important; border: none !important; border-radius: 0px !important; font-size: 12px !important; } .step-6 span.check { width: 100%; margin-bottom: 20px; } .step-6 span.check input { position: relative; float: left; width: 16px !important; height: 16px !important; margin: -1px 10px 0px 0px; padding: 0px !important; border-radius: 100%; border: 1px solid var(--gray) !important; } .step-6 span.check input:checked { border-color: var(--red); } .step-6 span.check input:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 100%; background-color: var(--red); transform: translate(-50%, -50%); content: ''; } .step-6 span.check a { text-decoration: underline; } .step-6 span.check span { width: auto; margin: 0px !important; padding-right: 0px; vertical-align: top; } .step-6 span.check span input { margin: 0px; } .step-6 span.check label { font-size: 14px; font-family: var(--fontmedium); } .step-6 span.textarea { width: 100%; margin: 20px 0px; } .step-6 span.textarea strong { display: block; margin-bottom: 16px; font-family: var(--fontmedium); } .step-7 .wpcf7-spinner { position: absolute; top: 20px; right: 0px; } .step-7 aside label strong { margin-bottom: 5px !important; } /* browse file */ .wpcf7-images-optimize-upload-wrap .images-optimize-upload-handler { padding: 15px !important; border-width: 2px !important; } .wpcf7-images-optimize-upload-wrap .images-optimize-upload-handler h3 { padding-top: 0px !important; font-weight: bold !important; font-size: 10px !important; } .wpcf7-images-optimize-upload-wrap .images-optimize-upload-handler h3:before { display: none !important; } .wpcf7-images-optimize-upload-wrap .images-optimize-upload-inner > span { display: block; margin: 10px 0px !important; text-transform: uppercase; font-weight: bold !important; font-size: 10px !important; } .wpcf7-images-optimize-upload-wrap .images-optimize-upload-button { background: var(--gray) !important; border-radius: 100px !important; text-transform: uppercase; font-weight: bold !important; font-size: 10px !important; } .wpcf7-images-optimize-upload-wrap .list { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 5px; } .wpcf7-images-optimize-upload-wrap .list li { height: 100px !important; } .wpcf7-images-optimize-upload-wrap .list li .thumbnail, .wpcf7-images-optimize-upload-wrap .list li .thumbnail img { width: 100% !important; height: 100% !important; } .wpcf7-images-optimize-upload-wrap .list li del { background: var(--red) !important; } .wpcf7-images-optimize-upload-wrap .list li del:hover:before, .wpcf7-images-optimize-upload-wrap .list li del:hover:after { display: none !important; } /* anuncie -> passos */ #anuncie-passos section { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 100px; text-align: center; counter-reset: lista; } #anuncie-passos section::before { position: absolute; z-index: -1; top: 30px; left: 200px; width: calc(100% - 400px); height: 1px; background-color: var(--green); content: ''; } #anuncie-passos section span strong { display: block; margin-bottom: 20px; font-weight: bold; font-size: 18px; } #anuncie-passos section span p { display: block; line-height: 1.6; } #anuncie-passos section span strong::before { display: block; width: 60px; height: 60px; margin: 0px auto 20px auto; background-color: var(--green); color: #fff; line-height: 60px; text-align: center; border-radius: 100%; counter-increment: lista; content: counter(lista); } /* anuncie -> faq */ #anuncie-faq { margin-bottom: 0px; padding: 60px 0px 100px 0px; background-color: #fff; } #anuncie-faq header { display: block; margin-bottom: 60px; text-align: center; } #anuncie-faq header small { display: block; margin-bottom: 10px; font-weight: bold; font-size: 14px; color: var(--gray); text-transform: uppercase; } #anuncie-faq header h6 { display: block; font-weight: bold; font-size: 50px; color: var(--red); } #anuncie-faq article { position: relative; display: inline-block; width: 100%; height: auto; padding: 20px 0px; border-bottom: 1px solid var(--white2); cursor: pointer; } #anuncie-faq article:last-of-type { margin-bottom: 0px; border: none; } #anuncie-faq article h3 { position: relative; display: inline-block; font-family: var(--fontmedium); font-size: 18px; line-height: 1.4; } #anuncie-faq article span { display: none; float: left; width: 100%; height: auto; } #anuncie-faq article span p { display: block; margin-top: 14px; font-size: 16px; line-height: 1.6; } #anuncie-faq article span p a { color: var(--red); text-decoration: underline; } #anuncie-faq article i { position: absolute; top: 0px; right: 0px; font-size: 24px; color: var(--red); } /* ######################################## CALCULADORA DE IMÓVEIS */ /* calculadora -> header */ #calculadora header.cover { position: relative; display: inline-block; width: 100%; height: 380px; margin-top: 58px; background-color: #000; } #calculadora header.cover .breadcrumb { position: relative; z-index: 2; left: 50%; margin: 30px 0px 0px -630px; } #calculadora header.cover .breadcrumb li a { color: #fff; opacity: .5; } #calculadora header.cover .breadcrumb li { color: #fff; } #calculadora header.cover figcaption { position: absolute; z-index: 2; top: 50%; left: 50%; width: 550px; height: auto; margin-left: -630px; transform: translateY(-50%); } #calculadora header.cover figcaption h1 { display: block; font-weight: bold; font-size: 36px; color: #fff; line-height: 1.2; } #calculadora header.cover figcaption p { display: block; margin-top: 20px; font-size: 16px; color: #fff; line-height: 1.6; } #calculadora header.cover figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: .5; object-fit: cover; } /* calculadora -> section */ #calculadora section { position: relative; z-index: 2; float: left; width: 100%; margin-top: -60px; } .block-parcelas { display: none; } /* calculadora -> options */ #calculadora .ops { float: left; width: 100%; height: 120px; background-color: #fff; box-shadow: 0px 30px 60px rgba(0,0,0,.1); border-radius: 20px; } #calculadora .ops label { position: relative; display: inline-block; width: 48%; height: 120px; padding: 26px 0px 0px 60px; vertical-align: middle; } #calculadora .ops label:first-of-type::after { position: absolute; top: 50%; right: 0px; width: 1px; height: 50%; background-color: var(--white); transform: translateY(-50%); content: ''; } #calculadora .ops label input { position: relative; display: inline-block; width: 30px; height: 30px; background-color: #fff; box-shadow: 0px 10px 20px rgba(0,0,0,.1); border: 2px solid var(--black); border-radius: 100%; vertical-align: middle; } #calculadora .ops label input:checked::before { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; background-color: var(--red); border-radius: 100%; transform: translate(-50%, -50%); content: ''; } #calculadora .ops label figure { display: inline-block; width: auto; margin: 0px 40px; vertical-align: middle; } #calculadora .ops label figure img { display: block; width: 62px; max-width: 62px; height: auto; max-height: 60px; } #calculadora .ops label span { display: inline-block; width: calc(100% - 180px); height: auto; vertical-align: middle; font-weight: bold; font-size: 16px; line-height: 1.4; } #calculadora .ops label span strong { font-weight: bold; color: var(--red); } /* calculadora -> start */ #calculadora .start { float: left; width: 100%; height: auto; margin: 60px 0px; } #calculadora .start fieldset { display: grid; grid-template-columns: 1fr 1fr 1fr 150px; grid-gap: 20px; } #calculadora .start fieldset label { display: block; } #calculadora .start fieldset label strong { display: block; margin-bottom: 10px; padding-left: 36px; font-size: 16px; color: var(--gray); } #calculadora .start fieldset label span.field { display: inline-block; width: 100%; height: 60px; background-color: #fff; border: 1px solid #ddd; border-radius: 60px; transition: all .5s ease; } #calculadora .start fieldset label span.field em { display: inline-block; width: 80px; height: 60px; margin-left: 5px; line-height: 60px; font-style: normal; font-size: 16px; text-align: center; color: var(--gray); } #calculadora .start fieldset label span.field input { display: inline-block; width: calc(100% - 90px); height: 56px; font-size: 20px; color: var(--gray); } #calculadora .start fieldset label span.field:focus-within { background-color: var(--white); } #calculadora .start fieldset label span.field.erro { border-color: var(--red); } #calculadora .start fieldset label span.field.erro input { color: var(--red); } #calculadora .start fieldset label.submit button { display: inline-block; width: 100%; height: 60px; margin-top: 26px; border-radius: 60px; background-color: var(--red); color: #fff; font-weight: bold; font-size: 12px; text-transform: uppercase; text-align: center; line-height: 60px; } #calculadora .start fieldset label.submit button i { display: inline-block; margin-left: 7px; } #calculadora .start fieldset label.submit button:hover { background-color: var(--black); } #calculadora .start p { display: inline-block; width: 100%; margin-top: 60px; padding: 40px; text-align: center; font-size: 16px; color: var(--gray); background-color: #eee; border: 2px dotted #ccc; border-radius: 40px; } #calculadora .start p.error { border-color: var(--red); color: var(--red); } /* calculadora -> result */ #calculadora .result { float: left; width: 100%; height: auto; margin: 20px 0px; padding: 0px 200px; } #calculadora .result span { display: inline-block; width: 50%; height: 76px; margin: 0px -2.6px; text-align: center; background-color: #eee; border: 1px solid var(--green); vertical-align: top; cursor: pointer; } #calculadora .result span:first-of-type { border-top-left-radius: 35px; border-bottom-left-radius: 35px; } #calculadora .result span:last-of-type { border-top-right-radius: 35px; border-bottom-right-radius: 35px; } #calculadora .result span strong { display: block; margin: 17px 0px 8px 0px; text-transform: uppercase; color: var(--green); font-family: var(--fontmedium); } #calculadora .result span b { font-family: var(--fontmedium); color: var(--green); } #calculadora .result span em { display: block; font-style: normal; font-weight: bold; font-size: 18px; color: var(--gray); letter-spacing: 1px; } #calculadora .result span em i { font-size: 14px; } #calculadora .result span.on { position: relative; z-index: 2; background-color: var(--green); border-color: var(--green); } #calculadora .result span.on strong, #calculadora .result span.on b { color: #fff; } /* calculadora -> details */ #calculadora .details { float: left; width: 100%; height: auto; margin-top: 40px; } #calculadora .details article { float: left; width: 50%; height: auto; padding-top: 5px; } #calculadora .details article header p { display: block; margin-bottom: 10px; font-weight: bold; font-size: 16px; } #calculadora .details article header p:first-of-type { color: var(--green); } #calculadora .details article header strong { display: block; font-weight: bold; font-size: 42px; } #calculadora .details aside { float: left; width: 50%; height: auto; } #calculadora .details aside .form { width: 100%; } #calculadora .details aside .form legend { width: 60%; } #calculadora .details footer p { display: inline-block; width: 100%; margin-top: 80px; color: var(--gray); text-align: center; } #calculadora .details .item-prontos { display: none; } /* calculadora -> details -> line */ #calculadora .details ul { float: left; width: 100%; height: 300px; margin-top: 40px; } #calculadora .screen-reader-response ul { display: none; } #calculadora .details ul li { position: relative; float: left; width: 50%; height: 33%; } #calculadora .details ul li sup { display: none; float: left; width: 26px; height: 100%; } #calculadora .details ul li::before { position: absolute; top: 10px; left: 0px; width: 12px; height: 12px; background-color: #000; border-radius: 100%; content: ''; } #calculadora .details ul li span { position: absolute; top: 6px; left: 30px; white-space: nowrap; } #calculadora .details ul li span em { display: block; margin-bottom: 5px; font-weight: bold; text-transform: lowercase; font-style: normal; } #calculadora .details ul li span em i { display: inline-block; margin-left: 5px; font-size: 18px; vertical-align: text-bottom; } #calculadora .details ul li span strong { display: block; font-weight: bold; font-size: 16px; } #calculadora .details ul li span strong b { font-weight: bold; } #calculadora .details ul li:nth-of-type(1) sup { background-color: #4BD9D1; border-top-left-radius: 13px; border-top-right-radius: 13px; } #calculadora .details ul li:nth-of-type(2) sup { background-color: #6385DD; } #calculadora .details ul li:nth-of-type(3) sup { background-color: #26438F; } #calculadora .details ul li:nth-of-type(4) sup { background-color: #EF9478; border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; } #calculadora .details ul li:nth-of-type(1)::before { background-color: #4BD9D1; } #calculadora .details ul li:nth-of-type(2)::before { background-color: #6385DD; } #calculadora .details ul li:nth-of-type(3)::before { background-color: #26438F; } #calculadora .details ul li:nth-of-type(4)::before { background-color: #EF9478; } #calculadora .details ul li:nth-of-type(1) span em { color: #4BD9D1; } #calculadora .details ul li:nth-of-type(2) span em { color: #6385DD; } #calculadora .details ul li:nth-of-type(3) span em { color: #26438F; } #calculadora .details ul li:nth-of-type(4) span em { color: #EF9478; } /* ######################################## LANCAMENTOS */ /* lancamentos */ #lancamentos { margin-top: 130px; } #lancamentos header { display: block; margin-bottom: 50px; text-align: center; } #lancamentos header h1 { display: block; font-weight: bold; font-family: var(--fontmedium); font-size: 24px; } #lancamentos aside { position: relative; z-index: 10; display: inline-block; width: 100%; height: auto; margin-bottom: 30px; } #lancamentos aside span { position: relative; float: left; width: auto; margin-right: 10px; text-align: center; } #lancamentos aside span.item a { display: block; width: auto; min-width: auto; height: 40px; padding: 0px 20px; border: 1px solid var(--cor-primaria); font-family: var(--fontmedium); font-size: 13px; line-height: 38px; border-radius: 40px; } #lancamentos aside span.item a:hover { color: var(--amarelo-primario); border-color: var(--amarelo-primario); } #lancamentos aside span.box a { display: block; width: auto; min-width: auto; height: 40px; padding: 0px 20px; border: 1px solid var(--cor-primaria); font-family: var(--fontmedium); font-size: 13px; line-height: 38px; border-radius: 40px; } #lancamentos aside span.box a:hover { color: var(--amarelo-primario); border-color: var(--amarelo-primario); } #lancamentos aside span.box .item-box { display: none; position: absolute; z-index: 10; top: 50px; left: 0px; width: 440px; height: auto; padding: 20px 20px 14px 20px; border-radius: 20px; background-color: #fff; box-shadow: 0px 30px 70px rgba(0,0,0,.2); text-align: center; } #lancamentos aside span.box .item-box::before { position: absolute; top: -10px; left: 0px; width: 100%; height: 10px; background-color: transparent; content: ''; } #lancamentos aside span.box .item-box input { float: left; width: 160px; height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #ccc; border-radius: 60px; } #lancamentos aside span.box .item-box button { height: 40px; margin: 0px; } #lancamentos aside span.box .item-box small { display: inline-block; width: 100%; height: auto; margin-top: 10px; font-size: 12px; color: var(--blackgray); text-align: left; } #lancamentos aside span.box:hover .item-box { display: block; } #lancamentos aside span.box a:hover { color: var(--amarelo-primario); border-color: var(--amarelo-primario); } #lancamentos aside span.box .item-box-right { display: none; position: absolute; z-index: 10; top: 50px; left: -198px; width: 440px; height: auto; padding: 20px 20px 14px 20px; border-radius: 20px; background-color: #fff; box-shadow: 0px 30px 70px rgba(0,0,0,.2); text-align: center; } #lancamentos aside span.box .item-box-right::before { position: absolute; top: -10px; left: 0px; width: 100%; height: 10px; background-color: transparent; content: ''; } #lancamentos aside span.box .item-box-right input { float: left; width: 160px; height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #ccc; border-radius: 60px; } #lancamentos aside span.box .item-box-right button { height: 40px; margin: 0px; } #lancamentos aside span.box .item-box small-right { display: inline-block; width: 100%; height: auto; margin-top: 10px; font-size: 12px; color: var(--blackgray); text-align: left; } #lancamentos aside span.box:hover .item-box-right { display: block; } #lancamentos aside span.local { float: right; width: auto; margin-right: 0px; } #lancamentos aside span.local a { min-width: auto; padding: 0px; border: none; color: var(--cor-primaria); font-size: 14px; } #lancamentos aside span.local a i { display: inline-block; margin-right: 5px; font-size: 16px; vertical-align: text-top; } #lancamentos aside span.clear a { display: block; margin: 13px 0px 0px 20px; font-weight: bold; font-family: var(--font); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--lightgray); } #lancamentos aside span.clear a:hover { text-decoration: underline; } #lancamentos aside span.tipo { display: inline-block; width: auto; margin: -5px 10px 0px 10px; text-align: center; } #lancamentos aside span.tipo em { display: block; width: auto; font-weight: bold; font-family: var(--fontmedium); font-style: normal; font-size: 9px; color: var(--gray); text-transform: uppercase; } #lancamentos aside span.tipo i { display: inline-block; width: auto; vertical-align: middle; color: var(--white2); font-size: 20px; cursor: pointer; transition: all .5s ease; } #lancamentos aside span.tipo i:hover { color: var(--cor-primaria); } #lancamentos aside span.tipo input { display: inline-block; width: 30px; height: 30px; font-weight: bold; font-family: var(--fontmedium); font-size: 20px; text-align: center; vertical-align: middle; color: var(--blackgray); } #lancamentos aside span.tipos nav { width: 400px; height: auto; padding-bottom: 7px; } #lancamentos aside span.tipos nav ul { height: auto; } #lancamentos aside span.tipos nav ul li { width: 100%; } #lancamentos aside button { float: left; width: auto; height: 28px; margin: 4px 0px 0px 10px; padding: 0px 16px; border-radius: 40px; background-color: var(--cor-primaria); color: var(--amarelo-primario); font-weight: bold; font-family: var(--fontmedium); text-transform: uppercase; font-size: 11px; } #lancamentos aside button:hover { background-color: var(--cor-primaria); color: #fff;} #lancamentos aside nav { display: none; position: absolute; z-index: 10; top: 50px; left: 0px; width: 800px; height: 270px; padding: 20px 20px 20px 40px; border-radius: 20px; background-color: #fff; box-shadow: 0px 30px 70px rgba(0,0,0,.2); text-align: left; } #lancamentos aside nav::before { position: absolute; top: -10px; left: 0px; width: 100%; height: 10px; background-color: transparent; content: ''; } #lancamentos aside nav ul { display: inline-block; width: 100%; height: 230px; overflow-y: auto; } #lancamentos aside nav ul li { display: inline-block; width: 33%; height: auto; margin-bottom: 16px; vertical-align: top; font-weight: bold; font-family: var(--fontmedium); cursor: pointer; text-transform: lowercase; transition: all .5s ease; } #lancamentos aside nav ul li:hover { color: var(--cor-primaria); } #lancamentos aside nav ul li.on { color: var(--red); } #lancamentos aside nav ul li b { position: relative; display: inline-block; width: 14px; height: 14px; margin-right: 7px; border-radius: 4px; border: 1px solid var(--blackgray); vertical-align: bottom; } #lancamentos aside nav ul li.on b { border-color: var(--red); } #lancamentos aside nav ul li.on b::before { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 2px; background-color: var(--red); transform: translate(-50%, -50%); content: ''; } #lancamentos aside span:hover nav { display: block; } #lancamentos section { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 30px; } #lancamentos section article { position: relative; display: block; height: 250px; border-radius: 20px; overflow: hidden; transform: translateZ(0); } #lancamentos section article:nth-of-type(6n-5) { grid-column: 1/3; } #lancamentos section article:nth-of-type(6n-4) { grid-column: auto; } #lancamentos section article:nth-of-type(6n-3) { grid-column: auto; } #lancamentos section article:nth-of-type(6n-2) { grid-column: auto; } #lancamentos section article:nth-of-type(6n-1) { grid-column: auto; } #lancamentos section article:nth-of-type(6n-0) { grid-column: 3/5; } #lancamentos section article a { display: block; width: 100%; height: 100%; } #lancamentos section article a::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 20%; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); content: ''; } #lancamentos section article a::after { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 70%; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); content: ''; } #lancamentos section article img { position: absolute; top: 0px; left: 0px; width: 100%; height: 250px; object-fit: cover; } #lancamentos section article h2 { position: absolute; z-index: 3; bottom: 60px; left: 0px; width: 100%; padding: 0px 40px; font-family: var(--fontmedium); font-size: 16px; text-align: center; color: #fff; line-height: 1.4; } #lancamentos section article em { position: absolute; z-index: 3; top: 44px; left: 20px; width: auto; padding: 5px 14px; font-weight: bold; font-size: 10px; background-color: var(--black); color: #fff; border-radius: 10px; font-style: normal; } #lancamentos section article em b { font-weight: bold; } #lancamentos section article strong { position: absolute; z-index: 3; top: 20px; left: 20px; width: auto; padding: 5px 14px; font-weight: bold; font-size: 10px; text-transform: uppercase; background-color: var(--red); color: #fff; border-radius: 10px; } #lancamentos section article span.fav { position: absolute; z-index: 3; top: 20px; right: 20px; } #lancamentos section article span.fav button { font-size: 24px; color: #fff; opacity: 1 !important; } #lancamentos section article span.details { position: absolute; z-index: 3; bottom: 20px; left: 0px; width: 100%; text-align: center; } #lancamentos section article span.details b { display: inline-block; width: auto; margin: 0px 7px; color: #fff; font-family: var(--fontmedium); font-size: 11px; } #lancamentos section article span.details b i { display: block; margin-bottom: 5px; font-size: 16px; color: #fff; } #lancamentos section article sup { position: absolute; z-index: 4; top: 20px; right: 60px; width: auto; font-size: 24px; color: #fff; cursor: pointer; } /* lancamentos -> map */ #lancamentos-map { position: fixed; z-index: 9001; bottom: calc(-40vh - 50px); left: 10px; width: calc(100% - 20px); height: 40vh; transition: all .5s ease; } #lancamentos-map.on { bottom: 10px; } #lancamentos-map sup { position: absolute; top: -30px; right: 10px; width: auto; padding: 7px 20px; background-color: var(--black); color: #fff; font-weight: bold; font-family: var(--font); font-size: 10px; text-transform: uppercase; cursor: pointer; border-radius: 100px; transition: all .5s ease; } #lancamentos-map sup:hover { background-color: var(--red); } #lancamentos-map #lancamentos-map-cont { display: inline-block; width: 100%; height: 100%; border-radius: 30px; } #lancamentos-map #lancamentos-map-cont .info { width: 170px; height: auto; margin-bottom: 7px; text-align: center; } #lancamentos-map #lancamentos-map-cont .info img { display: inline-block; width: 100%; height: 120px; margin-bottom: 2px; object-fit: cover; } #lancamentos-map #lancamentos-map-cont .info small { display: block; margin: 7px 0px; padding: 0px 10px; text-align: center; font-weight: bold; font-family: var(--font); font-size: 12px; color: var(--red); } #lancamentos-map #lancamentos-map-cont .info strong { display: block; margin-bottom: 10px; padding: 0px 10px; font-weight: bold; font-family: var(--font); font-size: 10px; text-align: center; text-transform: uppercase; } .poi-info-window { padding: 20px !important; } .poi-info-window div { font-size: 12px !important; line-height: 1.2 !important; color: var(--blackgray); } .poi-info-window a { display: block !important; margin-top: 5px; color: var(--red) !important; font-size: 10px !important; text-transform: uppercase; } .gm-style-iw-ch { display: none !important } .gm-style-iw-chr button{ position: absolute !important; float: inline-end !important; background: none !important;} .gm-style-iw-chr button span { display: table-cell !important; background: #eee !important; } .price-tag { background-color: #EB194B; border-radius: 8px; color: #FFFFFF; font-size: 14px; padding: 10px 15px; position: relative; } /* ######################################## FAVORITOS */ /* favoritos */ .list.fav { margin-top: 100px; } #favoritos header { display: block; margin-bottom: 100px; text-align-last: center; } .list.fav header i { display: block; margin-bottom: 10px; color: var(--red); font-size: 30px; } .list.fav header p { display: block; margin-top: 10px; color: var(--red); font-size: 16px; } /* ######################################## SEARCH */ /* hot results */ #results section nav { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 70px; } #results section nav ul li.title { display: block; margin-bottom: 20px; font-weight: bold; font-size: 20px; } #results section nav ul li a { position: relative; display: block; padding: 12px 0px; color: var(--blackgray); font-size: 16px; } #results section nav ul li a::after { position: absolute; bottom: -5px; left: 0px; width: 100%; height: 1px; background-color: var(--red); opacity: 0; transition: all .5s ease; content: ''; } #results section nav ul li a:hover::after { bottom: 0px; opacity: 1; } /* ######################################## CONTATO / TRABALHE COM A LOPES */ /* contato -> map */ #contato #map { display: inline-block; width: 100%; height: 40vh; margin-top: 58px; background-color: #000; } #contato #map iframe { display: inline-block; width: 100%; height: 100%; } #contato section { display: grid; margin-top: -120px; padding: 0px 20px; grid-template-columns: 1fr 1fr; grid-gap: 20px; background-color: #fff; box-shadow: 0px 10px 60px rgba(0,0,0,.1); border-radius: 20px; } #contato section article { display: block; padding: 20px 0px 40px 0px; } #contato section article img { display: block; width: 100%; height: 300px; margin-bottom: 20px; border-radius: 20px; object-fit: cover; } #contato section article h1 { display: block; margin-bottom: 10px; text-transform: uppercase; color: var(--gray); font-size: 12px; font-weight: bold; } #contato section article h1 strong { display: block; margin-top: 7px; text-transform: none; color: var(--red); font-size: 30px; font-family: var(--fontmedium); } #contato section article address { display: block; margin-bottom: 20px; font-style: normal; font-size: 16px; line-height: 1.6; color: var(--gray); } #contato section article span a { display: inline-block; width: auto; color: var(--red); font-weight: bold; font-size: 16px; } #contato section article span a i { display: inline-block; width: auto; margin-right: 4px; } #contato footer { display: inline-block; width: 100%; height: auto; margin-top: 80px; padding: 0px 20px; } #contato footer aside { float: left; width: 40%; height: auto; } #contato footer aside h6 { display: block; margin-bottom: 50px; font-weight: bold; font-size: 24px; } #contato footer aside span a { display: block; margin-bottom: 50px; font-size: 20px; font-family: var(--fontmedium); color: var(--red); } #contato footer aside span a i { display: inline-block; width: auto; margin-right: 5px; } #contato footer .wpcf7-response-output { display: block; margin: 40px 0px; font-weight: bold; text-align: center; } /* form */ .form { float: left; width: 60%; height: auto; } .form label { float: left; width: 100%; height: auto; padding: 0px 10px; } .form label.lb50 { width: 50%; } .form label.lb33 { width: 33%; } .form legend { display: block; width: 50%; margin-bottom: 30px; padding-left: 10px; font-size: 16px; line-height: 1.6; } .form input { display: block; width: 100%; height: 58px; margin-bottom: 20px; padding: 0px 20px; border: 1px solid var(--white2); border-radius: 24px; } .form input.wpcf7-not-valid { border-color: var(--red); } .form select { display: block; width: 100%; height: 58px; margin-bottom: 20px; padding: 0px 20px; background: #fff url('../img/select.svg') no-repeat 93% center; background-size: 10px; border: 1px solid var(--white2); border-radius: 24px; color: var(--gray); } .form textarea { display: block; width: 100%; height: 100px; margin-bottom: 20px; padding: 16px 20px; border: 1px solid var(--white2); border-radius: 24px; } .form input[type=radio] { position: relative; display: inline-block; width: 16px; height: 16px; margin-bottom: 0px; padding: 0px; border: 1px solid black; border-radius: 100%; vertical-align: middle; cursor: pointer; } .form input[type=radio]:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background-color: black; transform: translate(-50%, -50%); border-radius: 100%; content: ''; } .form b { display: inline-block; width: auto; margin: 0px 10px 0px 5px; vertical-align: middle; color: var(--blackgray); font-family: var(--fontmedium); } .form input[type=submit] { width: 50%; margin: 20px 0px 0px 0px; background-color: var(--red); border-color: var(--red); color: #fff; font-family: var(--fontmedium); } .form input[type=submit]:hover { background-color: #fff; color: var(--red); } .form .types small { display: inline-block; width: 100%; margin-top: 10px; padding-left: 10px; color: var(--gray); } .form .types label { width: auto; margin: 10px 0px; } .form-hidden { display: none !important; } /* trabalhe */ #trabalhe { margin-top: 58px; } #trabalhe figure.cover img { display: inline-block; width: 100%; height: 450px; object-fit: cover; object-position: 0px 35%; } #trabalhe section { display: inline-block; width: 100%; height: auto; text-align: center; } #trabalhe section h6 { display: block; margin: 50px 0px; font-size: 24px; font-weight: bold; } #trabalhe section h6 strong { display: block; font-weight: bold; font-size: 64px; color: var(--red); } #trabalhe section form { float: none; display: inline-block; width: 860px; height: auto; text-align: left; } #trabalhe section form legend { width: 100%; text-align: center; } /* ######################################## FOOTER */ /* footer */ #footer { margin-bottom: 140px; padding: 0px 42px; } #footer .container { position: relative; } #footer .column { position: relative; float: left; width: 400px; height: auto; } #footer .container::after { position: absolute; top: 64px; left: 0px; width: 100%; height: 1px; background-color: var(--white2); content: ''; } #footer .column span.logo img { float: left; width: 110px; height: auto; margin: 10px 0px 30px 0px; } #footer .column p { display: inline-block; width: 100%; margin-top: 30px; color: var(--blackgray); line-height: 1.8; } #footer .column nav.social ul { display: inline-block; width: 100%; height: auto; margin-top: 30px; } #footer .column nav.social ul li { display: inline-block; width: auto; margin-right: 12px; vertical-align: top; text-align: center; font-size: 18px; } #footer .column nav.social ul li a { display: block; width: 42px; height: 42px; background-color: var(--cor-primaria); color: var(--amarelo-primario); line-height: 44px; border-radius: 100%; } #footer .column nav.social ul li a:hover { background-color: var(--red); color: #fff; } #footer .menu { float: left; width: calc(100% - 400px); height: auto; } #footer .menu ul { float: left; width: 33%; height: auto; } #footer .menu ul li.title { display: block; margin: 14px 0px 54px 0px; font-family: var(--fontmedium); font-size: 18px; } #footer .menu ul li a { display: block; padding: 10px 0px; font-size: 14px; } #footer .menu ul li a:hover { color: var(--red); } /* footer -> newsletter */ #newsletter section { display: inline-block; width: 100%; height: auto; padding: 42px; background-color: var(--black); border-radius: 20px; } #newsletter section aside { float: left; width: 30%; height: auto; } #newsletter section aside h6 { display: block; margin-bottom: 16px; font-weight: bold; font-size: 30px; color: #fff; } #newsletter section aside p { display: block; color: #fff; font-size: 16px; line-height: 1.6; } #newsletter section form { float: left; width: 70%; height: auto; margin-top: 10px; padding-left: 40px; } #newsletter section form label { float: left; width: calc(50% - 34px); height: auto; padding-right: 16px; } #newsletter section form label input { display: inline-block; width: 100%; height: 68px; padding: 0px 26px; background-color: #616161; border: 1px solid #616161; border-radius: 100px; color: #fff; font-size: 16px; } #newsletter section form label input.wpcf7-not-valid { border-color: var(--red); } #newsletter section form label input::placeholder { color: #fff; } #newsletter section form label.submit { width: 68px; } #newsletter section form label.submit input { width: 68px; height: 68px; background: #EB194B url('../img/newsletter-submit.svg') no-repeat center center; border: 1px solid var(--red); border-radius: 100%; text-indent: -9999em; } #newsletter section form label.submit input:hover { background-color: transparent; border-color: #fff; } #newsletter .wpcf7-response-output { color: #fff; } /* footer -> bar */ #bar { position: fixed; z-index: 20; bottom: 0px; left: 0px; width: 100%; height: 50px; padding: 0px 42px; background-color: var(--cor-terciaria); box-shadow: 0px 10px 60px rgba(0,0,0,.2); transition: all .5s ease; } #bar.on { bottom: -50px; } #bar section { display: grid; grid-template-columns: 1fr 1fr 1fr; } #bar section article a { position: relative; display: block; height: 50px; padding-left: 60px; font-size: 14px; } #bar section article a:hover { background-color: var(--cor-primaria); } #bar section article i { position: absolute; top: 50%; left: 20px; width: auto; font-size: 18px; color: #fff; transform: translateY(-50%); } #bar section article strong { display: block; padding-top: 10px; font-weight: bold; font-size: 12px; color: #fff; text-transform: uppercase; } #bar section article p { display: block; margin-top: 5px; color: #fff; } /* ######################################## BOX */ /* box */ #box { display: none; position: fixed; z-index: 200; top: 0px; left: 0px; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.5); } #box sup { position: absolute; top: 0px; left: 50%; font-size: 30px; color: #fff; transform: translateX(-50%); cursor: pointer; transition: all .5s ease; opacity: 0; } #box .box { position: absolute; top: 50%; left: 50%; width: 730px; height: 450px; background-color: #fff; border-radius: 20px; border-radius: 20px; box-shadow: 0px 30px 60px rgba(0,0,0,.2); transform: translate(-50%, -50%); overflow: hidden; transition: all .5s ease; opacity: 0; } /* box -> animate */ #box.on sup { top: 40px; opacity: 1; transition-delay: .3s; } #box.on .box { opacity: 1; transition-delay: .5s; } /* box -> content */ #box .box aside { float: left; width: 290px; height: 100%; background-color: var(--red); } #box .box aside img { display: block; width: 100px; height: auto; margin: 40px auto 0px auto; } #box .box aside span { display: inline-block; width: 100%; height: auto; padding: 44px 0px 0px 40px; color: #fff; font-size: 20px; font-family: var(--fontmedium); } #box .box aside span a { display: block; margin-top: 10px; text-decoration: underline; color: #fff; font-size: 16px; font-family: var(--fontmedium); } #box .box section { float: left; width: calc(100% - 290px); height: auto; padding: 75px 50px; } #box .box section header strong { display: block; margin-bottom: 10px; font-weight: bold; font-size: 24px; } #box .box section header p { display: block; margin: 10px 0px 30px 0px; font-size: 16px; line-height: 1.6; } #box .box section .form { width: 100%; } #box .box section .form label { padding: 0px; } /* ######################################## COOKIE */ /* cookies */ #cookies { display: none; position: fixed; z-index: 9999; bottom: 20px; left: 50%; width: 600px; height: auto; padding: 30px; border-radius: 40px; background-color: #fff; box-shadow: 0px 30px 60px rgba(0,0,0,.3); transform: translateX(-50%); text-align: center; } #cookies p { display: inline-block; width: 100%; height: auto; margin-bottom: 20px; line-height: 1.6; } #cookies p a { color: var(--red); text-decoration: underline; } #cookies button { display: inline-block; width: 180px; height: 40px; border-radius: 20px; background-color: var(--red); color: #fff; text-align: center; line-height: 40px; font-weight: bold; font-size: 14px; vertical-align: middle; } #cookies button:hover { background-color: var(--black); } /* ######################################## SIDEBAR MOBILE */ /* box */ aside#sidebar { display: none; position: fixed; z-index: 9999; top: 0px; left: 0px; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.5); } aside#sidebar .cont { position: fixed; top: 20px; left: -300px; width: 270px; height: 90%; background-color: #fff; border-radius: 20px; transition: all .5s ease; } aside#sidebar .cont.on { left: 20px; transition-delay: .4s; } aside#sidebar .cont header { position: relative; display: inline-block; width: 100%; height: auto; margin-bottom: 20px; } aside#sidebar .cont header span.logo img { float: left; width: 100px; height: auto; margin: 30px 0px 0px 30px; } aside#sidebar .cont header sup { position: absolute; top: 30px; right: 30px; color: var(--red); font-size: 26px; cursor: pointer; } aside#sidebar .cont nav { display: inline-block; width: 100%; height: auto; padding: 0px 30px; } aside#sidebar .cont nav li a { display: block; margin: 0px -16px 5px -16px; padding: 12px 16px; color: var(--gray); font-family: var(--fontmedium); border-radius: 40px; } aside#sidebar .cont nav li a:hover { background-color: var(--red); color: #fff; } aside#sidebar .cont span.login { position: absolute; bottom: 30px; left: 30px; } aside#sidebar .cont span.login a { display: inline-block; width: auto; height: 32px; padding: 0px 5px; background-color: var(--red); color: #fff; border-radius: 16px; line-height: 32px; cursor: pointer; transition: all .5s ease; } aside#sidebar .cont span.login a:hover { background-color: var(--black); } aside#sidebar .cont span.login i { display: inline-block; width: auto; margin-top: -2px; font-size: 22px; vertical-align: middle; } aside#sidebar .cont span.login b { display: inline-block; width: auto; margin: -2px 13px 0px 13px; vertical-align: middle; font-weight: bold; } /* ######################################## PLUGINS */ /* wpcf7 */ .wpcf7 br { display: none; } .wpcf7-not-valid-tip { display: none !important; } .wpcf7 form .wpcf7-response-output { margin: 0px !important; padding: 0px !important; border: none !important; } .wpcf7-list-item { margin: 0px 20px 0px 0px !important; } .wpcf7-list-item-label { display: inline-block; width: auto; margin-left: 7px; vertical-align: middle; font-family: var(--fontmedium); } /* ######################################## LANDING */ /* landing */ .single-landing #header { position: absolute; } .single-landing #header span.logo { float: none; display: block; width: 90px; margin: 20px auto 0px auto; } .single-landing #pic-feature { position: relative; display: inline-block; width: 100vw; height: calc(100vh - 172px); margin-left: calc(50% - 50vw); overflow: hidden; } .single-landing #pic-feature::after { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 80%; background: linear-gradient(to top, rgba(0,0,0,1), transparent); content: ''; } .single-landing #pic-feature figure { display: inline-block; width: 100%; height: 100%; background-size: cover; background-attachment: fixed; background-position: center center; } .single-landing #pic-feature sub { position: absolute; z-index: 3; bottom: 40px; left: 50%; width: 16px; height: auto; transform: translateX(-50%); cursor: pointer; transition: all .5s ease; } .single-landing #pic-feature sub img { display: block; width: 100%; height: auto; } .single-landing #pic-feature.off sub { opacity: 0; } .single-landing #pic-feature h2 { position: absolute; z-index: 3; top: 50%; left: 50%; width: 700px; transform: translate(-50%, -50%); text-align: center; color: #fff; font-size: 30px; line-height: 1.2; transition: all .5s ease; } .single-landing #pic-feature.off h2 { top: 50%; opacity: 0; } .single-landing #bar { display: none; } .single-landing #enterprise { margin-top: 40px; } .single-landing #enterprise .block { padding: 80px 0px; } .single-landing #enterprise .informacoes { display: block; padding-top: 0px; } .single-landing #enterprise h6 { margin-bottom: 40px; font-size: 18px; text-align: center; line-height: 1.4; } .single-landing #enterprise h6 strong { display: block; margin-bottom: 20px; color: var(--red); font-family: var(--fontmedium); font-size: 24px; line-height: 1.4; } .single-landing #enterprise nav.list { display: inline-block; width: 100%; height: auto; margin-top: 20px; text-align: center; } .single-landing #enterprise nav.list li { width: auto; margin: 0px 20px; } .single-landing #enterprise .informacoes-alt { padding-top: 0px; } .single-landing #enterprise .informacoes-alt nav.list li { width: 300px; margin: 0px 20px; } .single-landing #enterprise nav.list li h2 { display: block; margin: 20px 0px; color: var(--red); font-family: var(--fontmedium); font-size: 20px; } .single-landing #enterprise nav.list li p { display: block; font-size: 14px; line-height: 1.6; } .single-landing #enterprise .informacoes:after { display: none; } .single-landing #enterprise nav.list li i { display: block; margin: 0px 0px 20px 0px; font-size: 30px; } .single-landing #enterprise header span { margin-top: -10px; } .single-landing #enterprise span small.cta a { display: inline-block; width: auto; padding: 14px 30px; background-color: var(--red); border: 1px solid var(--red); color: #fff; font-weight: bold; border-radius: 40px; font-size: 14px; } .single-landing #enterprise span small.cta a:hover { background-color: transparent; color: var(--red); } .single-landing .cta-txt { display: block; width: 1000px; height: auto; margin: 80px auto; text-align: center; } .single-landing .cta-txt h1 { display: block; margin-bottom: 40px; font-family: var(--fontmedium); font-size: 28px; line-height: 1.6; color: var(--red); } .single-landing .cta-txt h2 { display: block; margin-bottom: 40px; font-family: var(--fontmedium); font-size: 24px; line-height: 1.6; color: var(--red); } .single-landing .cta-txt h3 { display: block; margin-bottom: 20px; font-family: var(--fontmedium); font-size: 20px; } .single-landing .cta-txt p { display: block; margin-bottom: 40px; font-size: 16px; line-height: 1.6; } .single-landing .cta-txt p strong { font-family: var(--fontmedium); } .single-landing .cta-txt p a { font-family: var(--fontmedium); color: var(--green); text-decoration: underline; } .single-landing .cta-txt .column { column-gap: 20px; } .single-landing .cta-txt span a { display: inline-block; width: auto; padding: 14px 50px; background-color: var(--red); border: 1px solid var(--red); color: #fff; font-weight: bold; border-radius: 40px; font-size: 16px; } .single-landing .cta-txt span a:hover { background-color: transparent; color: var(--red); } .single-landing .cta-txt span.wp-call a { margin: -20px 0px 40px 0px; padding: 0px 30px !important; background-color: #25D366 !important; border: 1px solid #25D366 !important; } .single-landing .cta-txt span.wp-call a:hover { background-color: transparent !important; border-color: #25D366 !important; color: #25D366 !important; } .single-landing #landing-tab { display: inline-block; width: 100%; height: auto; margin-bottom: 30px; border-bottom: 2px solid var(--white2); } .single-landing #landing-tab li { display: inline-block; width: auto; margin-bottom: -1px; } .single-landing #landing-tab li a { display: block; border-bottom: 2px solid var(--white2); padding: 20px; font-family: var(--fontmedium); } .single-landing #landing-tab li a.active { border-color: var(--red); color: var(--red); } .single-landing #plantas { margin-top: 40px; } .single-landing #plantas nav ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; } .single-landing #plantas nav ul li a { position: relative; display: block; height: 220px; border-radius: 20px; background-color: #fff; border: 1px solid #ddd; overflow: hidden; } .single-landing #plantas nav ul li a:hover { border-color: var(--red); box-shadow: 0px 20px 40px rgba(0,0,0,.1); } .single-landing #plantas nav ul li img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 20px; object-fit: cover; } .single-landing #tour { display: none; width: 100%; height: auto; } .single-landing #tour iframe { display: inline-block; width: 100%; height: 600px; } .single-landing #cta { display: inline-block; width: 100%; height: auto; background-color: #fff; border: 1px solid var(--white2); border-radius: 20px; overflow: hidden; } .single-landing #cta aside { position: relative; float: left; width: 50%; height: auto; padding: 60px; } .single-landing #cta aside h5 { display: block; margin-bottom: 15px; text-align: center; font-family: var(--fontmedium); font-size: 20px; line-height: 1.4; } .single-landing #cta aside p { display: block; margin-bottom: 30px; text-align: center; } .single-landing #cta aside form legend { display: block; margin-bottom: 20px; line-height: 1.6; color: var(--gray); } .single-landing #cta aside form input { display: block; width: 100%; height: 48px; margin-bottom: 20px; padding: 0px 20px; border: 1px solid var(--white2); border-radius: 24px; } .single-landing #cta aside form ::placeholder { color: var(--black); } .single-landing #cta aside form input[type=radio] { position: relative; display: inline-block; width: 16px; height: 16px; margin-bottom: 0px; padding: 0px; border: 1px solid var(--red); border-radius: 100%; vertical-align: middle; cursor: pointer; } .single-landing #cta aside form input[type=radio]:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background-color: var(--red); transform: translate(-50%, -50%); border-radius: 100%; content: ''; } .single-landing #cta aside form input.wpcf7-not-valid { border-color: var(--red); } .single-landing #cta aside form b { display: inline-block; width: auto; margin: 0px 10px 0px 5px; vertical-align: middle; color: var(--blackgray); font-family: var(--fontmedium); } .single-landing #cta aside form label { display: inline-block; width: 100%; height: auto; } .single-landing #cta aside form small { display: inline-block; width: 100%; margin: 10px 0px; color: var(--gray); } .single-landing #cta aside form input[type=submit] { display: inline-block; width: 100%; padding: 0px 60px; background-color: var(--red); border-color: var(--red); color: #fff; font-family: var(--fontmedium); } .single-landing #cta aside form input[type=submit]:hover { background-color: #fff; color: var(--red); } .single-landing #cta figure { position: relative; float: left; width: 50%; height: 560px; } .single-landing #cta figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; } .single-landing #cta.cta-sec { width: 60%; margin: 0px 20%; } .single-landing #cta.cta-sec aside { width: 100%; background-color: #fff; } .single-landing #cta span.wp-call a { display: block; margin-top: -30px; } .single-landing .wpcf7-spinner { position: absolute; bottom: 0px; } .single-landing #cta .wpcf7-response-output { display: block; margin: 20px 0px 0px 0px !important; font-size: 12px; text-align: center; } .single-landing #video { display: inline-block; width: 100%; height: auto; margin-top: 40px; } .single-landing #video iframe { display: inline-block; width: 100%; height: 600px; border-radius: 20px; } .single-landing .footer-logo { display: block; width: 110px; height: auto; margin: 0px auto 100px auto; } .single-landing .footer-logo img { display: block; width: 100%; height: auto; } .single-landing #enterprise #localizacao #localizacao-map { height: 500px; } .single-landing #faq { width: 60%; margin: 0px 20%; padding-top: 0px !important; counter-reset: list; } .single-landing #faq header h6 { color: var(--red); } .single-landing #faq article { display: block; margin-bottom: 60px; padding: 0px 60px; } .single-landing #faq article h3 { position: relative; display: block; margin-bottom: 20px; font-family: var(--fontmedium); font-size: 18px; line-height: 1.4; } .single-landing #faq article h3::before { position: absolute; top: -2px; left: -50px; width: 30px; height: 30px; border-radius: 100%; background-color: var(--red); color: #fff; text-align: center; line-height: 30px; font-family: var(--fontmedium); font-size: 12px; counter-increment: list; content: counter(list); } .single-landing #faq article p { display: block; font-size: 16px; line-height: 1.6; } .single-landing #faq article p a { color: var(--red); text-decoration: underline; } .single-landing #faq article:last-of-type { margin-bottom: 0px; } /* landing -> header */ body.single-landing { background-color: #f3f3f3; } #landing-header { margin-bottom: 0px; } #landing-header header { position: relative; display: inline-block; width: 100%; height: 84px; } #landing-header header span.logo img { position: absolute; top: 50%; left: 50%; width: 110px; height: auto; transform: translate(-50%, -50%) scale(2); transition: all 4s ease; opacity: 0; } #landing-header header h1 { position: absolute; top: 50%; left: -200px; transform: translateY(-50%); font-size: 14px; font-family: var(--fontmedium); color: var(--red); transition: all 3s ease; opacity: 0; } #landing-header header address { position: absolute; top: 50%; right: -200px; transform: translateY(-50%); font-style: normal; font-size: 14px; font-family: var(--fontmedium); color: var(--gray); transition: all 3s ease; opacity: 0; } #landing-header section { position: relative; display: inline-block; width: 100%; height: calc(100vh - 104px); margin-left: 20px; } #landing-header section article { position: relative; display: inline-block; width: calc(100% - 40px); height: calc(100vh - 104px); border-radius: 20px; overflow: hidden; transform: translateZ(0); transition: all .5s ease; opacity: 0; } #landing-header section article h2 { position: absolute; z-index: 4; bottom: 200px; left: 40px; width: 60%; height: auto; margin-bottom: -20px; color: #fff; font-size: 30px; line-height: 1.2; opacity: 0; transition: all 1.3s ease; } #landing-header section article figure { position: absolute; z-index: -1; top: 0px; left: 0px; width: 100%; height: 100vh; transition: all 1.3s ease; } #landing-header section article::before { position: absolute; z-index: 3; bottom: 0px; left: 0px; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,7), transparent); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; transition: all .5s ease; opacity: 0; content: ''; } #landing-header section article figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: calc(100vh - 104px); object-fit: cover; border-radius: 20px; } #landing-header section aside { position: absolute; z-index: 10; top: 50%; right: 280px; width: 380px; height: auto; padding: 30px 30px 16px 30px; background-color: rgba(0,0,0,.7); border-radius: 20px; box-shadow: 0px 30px 90px rgba(0,0,0,.2); transform: translateY(-50%); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); transition: all 3s ease; opacity: 0; } #landing-header section aside h6 { display: block; font-weight: bold; font-size: 20px; font-family: var(--fontmedium); line-height: 1.2; color: #fff; } #landing-header section aside p { display: block; margin: 10px 0px 20px 0px; color: #fff; } #landing-header section aside form input { display: inline-block; width: 100%; height: 42px; margin-bottom: 14px; padding: 0px 22px; border-radius: 100px; background-color: transparent; border: 1px solid rgba(255,255,255,.3); font-size: 13px; color: #fff; } #landing-header section aside form input::placeholder { color: #fff; } #landing-header section aside form input[type=submit] { float: right; width: 45%; background-color: var(--red); color: #fff; border: none; text-align: center; font-family: var(--fontmedium); border: 1px solid var(--black); } #landing-header section aside form input[type=submit]:hover { background-color: #fff; color: var(--red); border-color: #fff; } #landing-header section aside span.wp-call a { position: absolute; bottom: 21px; left: 30px; width: 43%; font-size: 13px; } #landing-header section aside span.wp-call a:hover { background-color: transparent; border-color: #fff !important; color: #fff !important; } /* whatsapp call */ span.wp-call a { display: inline-block; width: 100%; height: 40px; margin: 10px 0px; border-radius: 50px; background-color: #25D366; border: 1px solid #25D366; color: #fff; text-align: center; line-height: 40px; font-family: var(--fontmedium); } span.wp-call a:hover { background-color: #fff; color: #25D366; } /* landing -> on */ #landing-header.on header span.logo img { transform: translate(-50%, -50%) scale(1); opacity: 1; } #landing-header.on header h1 { left: 20px; opacity: 1; } #landing-header.on header address { right: 20px; opacity: 1; } #landing-header.on section article::before { opacity: 1; } #landing-header.on section article { left: 0px; opacity: 1; } #landing-header.on section article h2 { opacity: 1; margin-bottom: 0px; transition-delay: 2s; } #landing-header.on section article figure { transform: scale(1.1); } #landing-header.on section aside { right: 80px; opacity: 1; box-shadow: 0px 50px 50px rgba(0,0,0,.7); } /* landing -> obrigado */ #landing-obrigado { margin: 60px 0px 100px 0px; text-align: center; } #landing-obrigado .container { width: 600px; } #landing-obrigado h1 { display: block; font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; } #landing-obrigado h6 { display: block; font-weight: bold; margin: 20px 0px; font-size: 36px; color: var(--red); } #landing-obrigado p { display: block; margin-bottom: 40px; font-size: 18px; } #landing-obrigado span a { display: inline-block; width: auto; padding: 16px 40px; background-color: var(--red); border: 2px solid var(--red); color: #fff; font-weight: bold; border-radius: 60px; } #landing-obrigado span a:hover { background-color: #fff; color: var(--red); } #landing-obrigado span a i { display: inline-block; margin-right: 10px; font-size: 20px; vertical-align: middle; } #landing-obrigado iframe { display: inline-block; width: 100%; margin-top: 60px; border-radius: 20px; } /* landing -> ball */ span#ball { display: none; position: fixed; bottom: 200px; left: -10px; z-index: 9000; } span#ball figure { position: relative; width: 80px; height: auto; } span#ball figure img { position: absolute; top: 0px; left: 0px; width: 80px; height: 80px; box-shadow: 0px 10px 30px rgba(0,0,0,.5); border-radius: 100%; object-fit: cover; border: 4px solid var(--red); } span#ball figure sup { position: absolute; z-index: 2; top: -5px; right: 0px; width: 20px; height: 20px; border-radius: 100%; background-color: var(--red); color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 12px; } span#ball p { position: absolute; z-index: 3; top: 50px; left: 60px; width: 300px; padding: 14px; background-color: var(--black); border-radius: 14px; font-size: 13px; line-height: 1.4; box-shadow: 0px 10px 30px rgba(0,0,0,.7); } span#ball p a { color: #fff; } span#ball p sup { position: absolute; top: -15px; right: -15px; color: var(--black); font-size: 20px; cursor: pointer; } /* landing -> box */ #box-landing { display: none; position: fixed; z-index: 9999; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); } #box-landing aside { position: absolute; top: 50%; left: 50%; width: 500px; height: auto; padding: 20px 20px 0px 20px; background-color: #fff; border-radius: 20px; transform: translate(-50%, -50%); } #box-landing aside h5 { display: block; margin-bottom: 15px; text-align: center; font-family: var(--fontmedium); font-size: 20px; line-height: 1.4; } #box-landing aside p { display: block; margin-bottom: 30px; text-align: center; } #box-landing aside form legend { display: block; margin-bottom: 20px; line-height: 1.6; color: var(--gray); } #box-landing aside form input { display: block; width: 100%; height: 48px; margin-bottom: 20px; padding: 0px 20px; border: 1px solid var(--white2); border-radius: 24px; } #box-landing aside form ::placeholder { color: var(--black); } #box-landing aside form input[type=radio] { position: relative; display: inline-block; width: 16px; height: 16px; margin-bottom: 0px; padding: 0px; border: 1px solid var(--red); border-radius: 100%; vertical-align: middle; cursor: pointer; } #box-landing aside form input[type=radio]:checked::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background-color: var(--red); transform: translate(-50%, -50%); border-radius: 100%; content: ''; } #box-landing aside form input.wpcf7-not-valid { border-color: var(--red); } #box-landing aside form input[type=submit] { display: block; width: auto; margin: 10px auto 0px auto; padding: 0px 60px; background-color: var(--red); border-color: var(--red); color: #fff; font-family: var(--fontmedium); } #box-landing aside form input[type=submit]:hover { background-color: #fff; color: var(--red); } #box-landing aside sup { position: absolute; top: -30px; right: -30px; color: #fff; font-size: 28px; cursor: pointer; } /* landing -> view */ #landing-view { margin-top: -5px; margin-bottom: 0px; padding: 60px 0px; background-color: #BEA576; text-align: center; } #landing-view .container { width: 600px; } #landing-view h3 { display: block; font-weight: bold; font-size: 48px; color: #fff; } #landing-view p { display: block; margin: 30px 0px; line-height: 1.6; color: #fff; } #landing-view span a { display: inline-block; width: auto; padding: 16px 50px; border-radius: 60px; font-weight: bold; font-size: 14px; background-color: var(--black); color: #fff; } /* landing -> niemeyer */ body.postid-107097 #landing-header header { position: absolute !important; z-index: 20; } body.postid-107097 #landing-header header h1, body.postid-107097 #landing-header header address { display: none !important; } body.postid-107097 #landing-header section { margin: 0px; } body.postid-107097 #landing-header section article, body.postid-107097 #landing-header section article figure img { width: 100%; height: 100vh; border-radius: 0px; } body.postid-107097 #landing-header section article::before { border-radius: 0px !important; } body.postid-107097 #landing-header span.logo-niemeyer img { display: block; width: auto; height: 140px; margin-bottom: 10px; } body.postid-107097 #landing-header section aside { background-color: var(--black); } body.postid-107097 #landing-header section aside h6, body.postid-107097 #landing-header section aside p { color: #fff; } body.postid-107097 #landing-header section aside form input { border-color: var(--lightgray); } body.postid-107097 .cta-txt h2, body.postid-107097 #enterprise nav.list li h2, body.postid-107097 #enterprise nav.list li i, body.postid-107097 .cta-txt span a:hover, body.postid-107097 #faq header h6, body.postid-107097 #faq article p a, body.postid-107097 #enterprise h6 strong { color: #BEA576 !important; } body.postid-107097 #cta aside form input[type=submit], body.postid-107097 #faq article h3::before { background-color: var(--cor-primaria); } body.postid-107097 .cta-txt span a { background: var(--black); border-color: var(--black); } body.postid-107097 #plantas-launch .slick-center img, body.postid-107097 #cta aside form input[type=submit] { border-color: #BEA576; } body.postid-107097 #plantas-launch .arrow { background-color: var(--cor-primaria); color: #fff; } /* load more */ .elm-button { margin-top: 40px; padding: 10px 30px; font-weight: bold; font-family: var(--fontmedium); border-radius: 100px; transition: all .5s ease; } .elm-button:hover { background-color: var(--black) !important; } /* recaptcha */ .grecaptcha-badge { display: none !important; } /* Permitir que os dropdowns sejam controlados via JavaScript */ #lancamentos aside nav.force-show, #lancamentos aside .item-box.force-show { display: block !important; }