:root .bricks-button { cursor: pointer; white-space: nowrap; transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard); will-change: transform; } :root .bricks-button svg { transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } :root .bricks-button.circle { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--control-md); block-size: var(--control-md); width: var(--control-md); height: var(--control-md); min-inline-size: var(--control-md); min-block-size: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); max-inline-size: var(--control-md); max-block-size: var(--control-md); max-width: var(--control-md); max-height: var(--control-md); flex: 0 0 var(--control-md); aspect-ratio: 1 / 1; padding: 0; border-radius: 50%; box-sizing: border-box; line-height: 1; overflow: hidden; } :root .bricks-button.circle.sm { inline-size: var(--control-sm); block-size: var(--control-sm); width: var(--control-sm); height: var(--control-sm); min-inline-size: var(--control-sm); min-block-size: var(--control-sm); min-width: var(--control-sm); min-height: var(--control-sm); max-inline-size: var(--control-sm); max-block-size: var(--control-sm); max-width: var(--control-sm); max-height: var(--control-sm); flex-basis: var(--control-sm); } :root .bricks-button.circle.lg { inline-size: var(--control-lg); block-size: var(--control-lg); width: var(--control-lg); height: var(--control-lg); min-inline-size: var(--control-lg); min-block-size: var(--control-lg); min-width: var(--control-lg); min-height: var(--control-lg); max-inline-size: var(--control-lg); max-block-size: var(--control-lg); max-width: var(--control-lg); max-height: var(--control-lg); flex-basis: var(--control-lg); } :root .bricks-button.circle svg { inline-size: 18px; block-size: 18px; } :root .bricks-button:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 7px 16px rgba(11,45,93,.075), 0 1px 0 rgba(173,140,96,.16); } :root .bricks-button:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):active { transform: translateY(0) scale(.985); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(11,45,93,.065); } :root .bricks-button:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover svg { transform: translateX(2px); } :root .bricks-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-gold) 72%, var(--color-white)); outline-offset: 3px; } :root .bricks-button.bricks-background-primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: #061d3e; border-color: #061d3e; } :root .bricks-button.bricks-background-secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: #9f7948; border-color: #9f7948; } :root .bricks-button.outline, :root .bricks-button.outline[class*="primary"], :root .bricks-button.outline[class*="secondary"], :root .bricks-button.outline[class*="dark"] { background-color: transparent; border-color: var(--color-navy); color: var(--color-navy); } :root .bricks-button.outline:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: var(--color-cream); border-color: var(--color-gold); color: var(--color-navy); } :root .hero-card .bricks-button.outline, :root .intro-demo--hero .bricks-button.outline { border-color: var(--color-white); color: var(--color-white); } :root .hero-card .bricks-button.outline:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover, :root .intro-demo--hero .bricks-button.outline:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: rgba(255,255,255,.08); border-color: rgba(231,201,153,.76); color: var(--color-white); } :root .bricks-button:disabled, :root .bricks-button[disabled], :root .bricks-button[aria-disabled="true"], :root .bricks-button.disabled { cursor: not-allowed; opacity: .46; filter: grayscale(.35) saturate(.45); transform: none; box-shadow: none; } :root .bricks-button:disabled svg, :root .bricks-button[disabled] svg, :root .bricks-button[aria-disabled="true"] svg, :root .bricks-button.disabled svg { opacity: .6; }  :root { --container-width: min(1360px, calc(100% - 80px)); } #brx-content, #brx-content.wordpress { width: 100%; max-width: none; } @media (max-width: 720px) { :root { --container-width: calc(100% - 30px); } }