/* ========================================================================== Act Tema 2026 — Global Styles As CSS custom properties de cor/fonte/tamanho (--cor-*, --font-*, --fs-*) vêm do painel Act Tema → Estilos, injetadas inline no (inc/act-panel/tokens.php). ========================================================================== */ /* 0. Fontes Locais ========================================================================== */ @font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans/InstrumentSans-Variable.woff2') format('woff2-variations'), url('../fonts/instrument-sans/InstrumentSans-Variable.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans/InstrumentSans-Italic-Variable.woff2') format('woff2-variations'), url('../fonts/instrument-sans/InstrumentSans-Italic-Variable.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap; } /* 1. Reset & Variáveis ========================================================================== */ :root { --container-width: 1296px; --container-width-lg: 1396px; --container-width-xl: 1536px; --container-width-xxl: 1600px; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 40px; --spacing-xl: 64px; --header-height: 80px; --cor-branco: #fff; --cor-preto: #000; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --transition-fast: 0.3s ease; --transition-base: 0.4s ease; } @media (max-width: 767px) { :root { --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --spacing-xl: 48px; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--spacing-lg)); } body { font-family: var(--font-1, system-ui, sans-serif); background-color: var(--cor-fundo, #fafafa); color: var(--cor-texto, #333); font-size: var(--fs-6, 1rem); line-height: 1.375; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .spaceHeader { height: var(--header-height) !important; } section[id], div[id] { scroll-margin-top: calc(var(--header-height) + var(--spacing-lg)); } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--cor-principal, currentColor); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--cor-secundaria, var(--cor-principal, currentColor)); } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-2, var(--font-1, inherit)); color: var(--cor-texto-titulo, inherit); font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-sm); } h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 700; } p { margin-bottom: var(--spacing-sm); } p:last-child { margin-bottom: 0; } strong { font-weight: 700; } /* O RichText "Destacar" do editor (core/text-color) sempre usa , mesmo quando só a cor do TEXTO é escolhida (sem cor de fundo) — sem este reset, o navegador aplica o estilo padrão dele (fundo amarelo, texto preto) por cima da cor escolhida. */ mark { background: none; color: inherit; } hr { border: none; border-top: 1px solid var(--cor-destaque-secundaria, #e5e5e5); width: 100%; margin: var(--spacing-md) 0; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* 2. Layout / Containers ========================================================================== */ .container, .container-lg, .container-xl, .container-xxl { width: 100%; margin: 0 auto; padding: 0 var(--spacing-md); } .container { max-width: calc(var(--container-width) + (var(--spacing-md) * 2)); } .container-lg { max-width: calc(var(--container-width-lg) + (var(--spacing-md) * 2)); } .container-xl { max-width: calc(var(--container-width-xl) + (var(--spacing-md) * 2)); } .container-xxl { max-width: var(--container-width-xxl); padding: 0; } #site-content { min-height: 60vh; } /* 3. Utilitários ========================================================================== */ .d-none { display: none !important; } .d-flex { display: flex !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-between { justify-content: space-between !important; } .align-items-center { align-items: center !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--spacing-xs) !important; } .mb-2 { margin-bottom: var(--spacing-sm) !important; } .mb-3 { margin-bottom: var(--spacing-md) !important; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-900 { font-weight: 900; } /* 4. Elementos Flutuantes (WhatsApp, Voltar ao Topo, Cookies) ========================================================================== */ .whatsapp-float { position: fixed; bottom: 20px; right: 20px; z-index: 999; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #25d366; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); transition: transform var(--transition-base), box-shadow var(--transition-base); } .whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55); } .whatsapp-float span { text-transform: uppercase; position: absolute; top: -25px; right: 70%; width: 156px; text-align: center; padding: 10px 5px; border-radius: var(--radius-sm); color: #7e7e7e; background: var(--cor-branco); font-size: 0.875rem; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08); } /* .contacts-float__* — reaproveitado como classe de estilo pelos contatos do rodapé (components/footer/footer.php), não é mais um widget flutuante próprio (removido). */ .contacts-float__item { display: flex; align-items: stretch; width: 100%; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border-top-left-radius: 10px; border-bottom-left-radius: 10px; transition: transform var(--transition-fast); } .contacts-float__item:hover { transform: translateX(-4px); } .contacts-float__icon { display: flex; align-items: center; justify-content: center; width: 50px; flex-shrink: 0; background: var(--cor-principal, #2a2169); border-top-left-radius: 10px; border-bottom-left-radius: 10px; color: var(--cor-branco); } .contacts-float__icon svg { width: 24px; height: 24px; } .contacts-float__icon img { width: 24px; height: 24px; object-fit: contain; } .contacts-float__info { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px var(--spacing-sm); background: var(--cor-branco); min-width: 190px; width: 100%; } .contacts-float__label { color: var(--cor-principal, #2a2169); font-family: var(--font-2, var(--font-1, inherit)); font-size: var(--fs-7, 1.125rem); } .contacts-float__number { color: #2f2f2f; font-family: var(--font-2, var(--font-1, inherit)); font-size: var(--fs-7, 1.125rem); } @media (max-width: 767px) { .contacts-float__info { min-width: 0; } .contacts-float__label, .contacts-float__number { font-size: var(--fs-8, 0.875rem); } } #backToTop { display: none; position: fixed; bottom: 90px; right: 22px; align-items: center; justify-content: center; border-radius: 50%; width: 38px; height: 38px; color: var(--cor-branco); background-color: var(--cor-principal, #333); font-size: var(--fs-5, 1.25rem); z-index: 998; transition: opacity var(--transition-base); } #backToTop.show { display: flex; } #aceite-termos { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: #0c2950; animation: act-slide-up 0.5s ease; } @keyframes act-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } #aceite-termos-barra { height: 5px; background: #0a0a0a; } #aceite-termos-conteudo { max-width: 1300px; margin: 0 auto; padding: var(--spacing-md); display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); } #aceite-termos-conteudo span { color: var(--cor-branco); font-size: 0.9375rem; line-height: 1.5; } #aceite-termos-conteudo a { color: var(--cor-branco); text-decoration: underline; } #btn-aceite-termos { flex-shrink: 0; background: #037354; border-radius: var(--radius-md); font-weight: 700; text-decoration: none !important; color: var(--cor-branco); padding: 10px 20px; } #btn-aceite-termos:hover { background: #025a43; color: var(--cor-branco); } @media (max-width: 767px) { #aceite-termos-conteudo { flex-direction: column; text-align: center; } } /* 5. Acessibilidade ========================================================================== */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } a.skip-link { position: absolute; top: -100px; left: 0; background: var(--cor-principal, #000); color: var(--cor-branco); padding: var(--spacing-sm); z-index: 9999; } a.skip-link:focus { top: 0; } :focus-visible { outline: 2px solid var(--cor-principal, #000); outline-offset: 2px; } /* 6. Conteúdo (loop de posts, 404, paginação) ========================================================================== */ .container-404 { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: var(--spacing-xl) var(--spacing-md); } .content-404 { max-width: 600px; } .content-404 h1 { font-size: var(--fs-2, 2.5rem); } .btn-404 { display: inline-block; margin-top: var(--spacing-md); padding: 12px 28px; background-color: var(--cor-principal, #333); color: var(--cor-branco); border-radius: var(--radius-sm); font-weight: 700; transition: opacity var(--transition-fast); } .btn-404:hover { color: var(--cor-branco); opacity: 0.85; } .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-lg); padding: var(--spacing-xl) 0; } .post-card { display: flex; flex-direction: column; background: var(--cor-branco, #fff); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .post-card-thumb { aspect-ratio: 16 / 10; overflow: hidden; } .post-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .post-card-body { padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-xs); flex-grow: 1; } .post-card-meta { font-size: var(--fs-7); color: var(--cor-texto-secundario, #777); } .post-card-title { font-size: var(--fs-4); margin-bottom: 0; } .post-card-title a { color: var(--cor-texto-titulo, var(--cor-texto)); } .post-card-excerpt { color: var(--cor-texto-secundario, var(--cor-texto)); flex-grow: 1; } .post-card-link { margin-top: var(--spacing-xs); font-weight: 700; color: var(--cor-principal); } .single-post-header { padding: var(--spacing-xl) 0 var(--spacing-md); text-align: center; } .single-post-thumb { margin-bottom: var(--spacing-lg); border-radius: var(--radius-md); overflow: hidden; } .single-post-thumb img { width: 100%; } .no-results { padding: var(--spacing-xl) 0; text-align: center; } .archive-header { padding-top: var(--spacing-xl); } .archive-description { color: var(--cor-texto-secundario, var(--cor-texto)); } /* Modelo de Conteúdo (Gutenberg) vinculado a um termo de taxonomia — ver inc/taxonomy-modelos.php e Act Tema → Modelos. */ .taxonomy-modelo-content { /* padding-top: var(--spacing-lg); */ } .search-form { display: flex; align-items: center; gap: var(--spacing-xs); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: var(--radius-sm); padding: 4px 4px 4px var(--spacing-sm); max-width: 360px; } .search-field { flex-grow: 1; border: none; outline: none; background: transparent; } .search-submit { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--cor-principal); } .navigation.pagination { display: flex; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-lg) 0; } .navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--cor-branco, #fff); color: var(--cor-texto); } .navigation.pagination .page-numbers.current { background: var(--cor-principal); color: var(--cor-branco); } /* 7. Botões (blocos) ========================================================================== */ /** * Base compartilhada dos CTAs de bloco (Banner, Itens em Destaque, Vitrine * de Vídeos...) — quase todos eram o mesmo botão reescrito em cada * .css. `min-width`/`border-radius`/`font-weight` continuam * ajustáveis por bloco (classe própria do bloco stackada junto, ex: * `banner-slide__cta btn-principal`) quando o card pede uma medida * diferente do padrão abaixo. */ .btn-principal, .btn-outline { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; min-height: 60px; padding: 10px var(--spacing-md); border-radius: var(--radius-md); font-family: var(--font-2, var(--font-1, inherit)); font-size: var(--fs-6, 1.125rem); text-align: center; transition: opacity var(--transition-fast); } .btn-principal { background: var(--cor-principal, #2a2169); color: var(--cor-branco); gap: 10px; } /* Ícone de "enviar" antes do texto — todo .btn-principal do site (nunca .btn-outline). mask-image (não /SVG inline) pra herdar a cor do botão via currentColor, sem depender do fill de dentro do SVG. */ .btn-principal::before { content: ""; display: inline-block; width: 23px; height: 23px; flex-shrink: 0; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjIuNzg1OSAwLjIxMjYyN0MyMi44ODczIDAuMzE0MTc0IDIyLjk1NjYgMC40NDMyNzEgMjIuOTg1MyAwLjU4Mzg4MkMyMy4wMTM5IDAuNzI0NDkyIDIzLjAwMDYgMC44NzA0MTkgMjIuOTQ3IDEuMDAzNTRMMTQuNDI1MyAyMi4zMDk3QzE0LjM1MDIgMjIuNDk3NCAxNC4yMjQ4IDIyLjY2MDYgMTQuMDYyOSAyMi43ODE2QzEzLjkwMSAyMi45MDI1IDEzLjcwODkgMjIuOTc2NSAxMy41MDc3IDIyLjk5NTJDMTMuMzA2NSAyMy4wMTQgMTMuMTA0IDIyLjk3NjkgMTIuOTIyNSAyMi44ODhDMTIuNzQxIDIyLjc5OTEgMTIuNTg3NiAyMi42NjE4IDEyLjQ3OTEgMjIuNDkxM0w3LjgyNDk5IDE1LjE3NTRMMC41MTAwMDUgMTAuNTIwOEMwLjMzOTEyOCAxMC40MTI0IDAuMjAxNTE4IDEwLjI1ODkgMC4xMTIzNTkgMTAuMDc3MkMwLjAyMzIwMDIgOS44OTU1MiAtMC4wMTQwNDE2IDkuNjkyNzQgMC4wMDQ3NDMyNSA5LjQ5MTIzQzAuMDIzNTI4MSA5LjI4OTcyIDAuMDk3NjA5MyA5LjA5NzMyIDAuMjE4ODEyIDguOTM1MjZDMC4zNDAwMTUgOC43NzMyIDAuNTAzNjI5IDguNjQ3NzcgMC42OTE1OTggOC41NzI4MkwyMS45OTUxIDAuMDUyOTgwOUMyMi4xMjgyIC0wLjAwMDYwNzE0NyAyMi4yNzQxIC0wLjAxMzkwNTcgMjIuNDE0NyAwLjAxNDczNzFDMjIuNTU1MyAwLjA0MzM4IDIyLjY4NDQgMC4xMTI3MDIgMjIuNzg1OSAwLjIxNDA5MlYwLjIxMjYyN1pNOS4yODY1MyAxNC43NDc4TDEzLjMyOTkgMjEuMTAxNEwyMC4yNjEyIDMuNzcxNzJMOS4yODY1MyAxNC43NDc4Wk0xOS4yMjU4IDIuNzM2MjFMMS44OTgzMSA5LjY2ODM4TDguMjUyNjEgMTMuNzEwOEwxOS4yMjU4IDIuNzM2MjFaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjIuNzg1OSAwLjIxMjYyN0MyMi44ODczIDAuMzE0MTc0IDIyLjk1NjYgMC40NDMyNzEgMjIuOTg1MyAwLjU4Mzg4MkMyMy4wMTM5IDAuNzI0NDkyIDIzLjAwMDYgMC44NzA0MTkgMjIuOTQ3IDEuMDAzNTRMMTQuNDI1MyAyMi4zMDk3QzE0LjM1MDIgMjIuNDk3NCAxNC4yMjQ4IDIyLjY2MDYgMTQuMDYyOSAyMi43ODE2QzEzLjkwMSAyMi45MDI1IDEzLjcwODkgMjIuOTc2NSAxMy41MDc3IDIyLjk5NTJDMTMuMzA2NSAyMy4wMTQgMTMuMTA0IDIyLjk3NjkgMTIuOTIyNSAyMi44ODhDMTIuNzQxIDIyLjc5OTEgMTIuNTg3NiAyMi42NjE4IDEyLjQ3OTEgMjIuNDkxM0w3LjgyNDk5IDE1LjE3NTRMMC41MTAwMDUgMTAuNTIwOEMwLjMzOTEyOCAxMC40MTI0IDAuMjAxNTE4IDEwLjI1ODkgMC4xMTIzNTkgMTAuMDc3MkMwLjAyMzIwMDIgOS44OTU1MiAtMC4wMTQwNDE2IDkuNjkyNzQgMC4wMDQ3NDMyNSA5LjQ5MTIzQzAuMDIzNTI4MSA5LjI4OTcyIDAuMDk3NjA5MyA5LjA5NzMyIDAuMjE4ODEyIDguOTM1MjZDMC4zNDAwMTUgOC43NzMyIDAuNTAzNjI5IDguNjQ3NzcgMC42OTE1OTggOC41NzI4MkwyMS45OTUxIDAuMDUyOTgwOUMyMi4xMjgyIC0wLjAwMDYwNzE0NyAyMi4yNzQxIC0wLjAxMzkwNTcgMjIuNDE0NyAwLjAxNDczNzFDMjIuNTU1MyAwLjA0MzM4IDIyLjY4NDQgMC4xMTI3MDIgMjIuNzg1OSAwLjIxNDA5MlYwLjIxMjYyN1pNOS4yODY1MyAxNC43NDc4TDEzLjMyOTkgMjEuMTAxNEwyMC4yNjEyIDMuNzcxNzJMOS4yODY1MyAxNC43NDc4Wk0xOS4yMjU4IDIuNzM2MjFMMS44OTgzMSA5LjY2ODM4TDguMjUyNjEgMTMuNzEwOEwxOS4yMjU4IDIuNzM2MjFaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPgo="); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } .btn-outline { background: transparent; border: 1px solid var(--cor-destaque); color: var(--cor-branco); } .btn-principal:hover, .btn-outline:hover { opacity: 0.85; color: var(--cor-branco); } /* 8. Animações de entrada (data-animate) ========================================================================== */ /** * Uso:
...
* Tipos: fade-up | fade-down | fade-left | fade-right | zoom-in | zoom-out * Atributos opcionais: * data-delay="200" — atraso em ms * data-duration="600" — duração em ms * data-repeat="true" — anima de novo toda vez que entra na viewport * O JS (assets/js/main.js) observa via IntersectionObserver e adiciona a * classe .animate-show quando o elemento entra na tela. */ [data-animate] { --animate-transform: translateY(80px); opacity: 0; transform: var(--animate-transform); will-change: transform, opacity; transition-property: opacity, transform; transition-duration: 0.6s; transition-timing-function: ease; } /* Evita scrollbar horizontal enquanto o elemento ainda está deslocado fora da tela */ main>*:has([data-animate="fade-left"]), main>*:has([data-animate="fade-right"]) { overflow-x: clip; } .animate-show { opacity: 1; transform: translate(0, 0) scale(1); } [data-animate="fade-up"] { --animate-transform: translateY(80px); } [data-animate="fade-down"] { --animate-transform: translateY(-80px); } [data-animate="fade-left"] { --animate-transform: translateX(-80px); } [data-animate="fade-right"] { --animate-transform: translateX(80px); } [data-animate="zoom-in"] { --animate-transform: scale(0.9); } [data-animate="zoom-out"] { --animate-transform: scale(1.1); } /* 9. Swiper (ActSwiper) — botões e paginação ========================================================================== */ /** * Estiliza os elementos que assets/js/swiper-helper.js (ActSwiper.build()) * cria automaticamente pra qualquer carrossel do tema — sitewide, não é * específico de um bloco. Usa .swiper-button (classe própria do helper) * em vez do :after padrão do Swiper (escondido abaixo). */ .swiper~.swiper-button-lock, .swiper~.swiper-button:after { display: none !important; } .swiper~.swiper-button { width: 36px; height: 36px; top: 50%; transform: translateY(-50%); background-color: transparent; border-radius: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--cor-branco); transition: background-color var(--transition-base); cursor: pointer; border: none; } .swiper~.swiper-button svg { width: 16px; height: auto; } .swiper~.swiper-button:hover { background-color: var(--cor-btn); } .swiper~.swiper-button.swiper-button-prev { left: 0; } .swiper~.swiper-button.swiper-button-next { right: 0; } .swiper~.swiper-pagination { bottom: 0 !important; } .swiper-pagination-bullets .swiper-pagination-bullet { opacity: 1; background-color: transparent; height: 24px; width: 24px; margin: 0 !important; position: relative; display: inline-flex; align-items: center; justify-content: center; } .swiper-pagination-bullet::after { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: #d9d9d9; } .swiper-pagination-bullet-active::after { background-color: var(--cor-destaque, var(--cor-secundaria)); } .titulo-section .section-header-text--center { flex-direction: column-reverse; display: flex; gap: 10px; max-width: 790px; } /* page contato */ .pagina-de-contato .contact-info-list { flex-wrap: wrap; column-gap: 3.5rem; gap: 1.5rem; } .pagina-de-contato .contact-info-list .contact-info-item a, .pagina-de-contato .contact-info-list .contact-info-item { align-items: start; } .pagina-de-contato .contact-info-list .contact-info-value, .pagina-de-contato .contact-info-list .contact-info-label { color: var(--cor-branco); font-size: var(--fs-5); } /* Page quem somos */ .page-id-209 footer { margin-top: 0; } .swiper-button-next:after, .swiper-button-prev:after { display: none !important; } body.home.wp-singular .site-footer { margin-top: 0; } .sessao-capacidade .card-servico__box { background: transparent; } .sessao-capacidade .card-servico__box .card-servico__content { padding: 0; padding-right: 110px; } .sessao-capacidade .card-servico__box ul.card-servico__list { padding-left: 36px; } .custom-maps .contact-info-map-embed { width: 100%; max-width: 100%; height: 450px; } .custom-maps .contact-info-map-embed iframe { display: block; width: 100% !important; max-width: 100%; height: 450px !important; border: 0; } .page-id-104 .site-footer { margin-top: 0; }