/* ┏━━━┓ ┏━━━┓ ┏┓ ┏┓ ┏━┓ ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━━┓ ┏━━┓ ┏━━━┓ ┏━┓ ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━━┛ ┃┏━┓┃ ┃┃ ┃┃ ┃ ┗┓┃┃ ┗┓┏┓┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┗┫┣┛ ┃┏━┓┃ ┃ ┗┓┃┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┗━━┓ ┃┃ ┃┃ ┃┃ ┃┃ ┃┏┓┗┛┃ ┃┃┃┃ ┃┃ ┃┃ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┃ ┃┏┓┗┛┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┏━━┛ ┃┃ ┃┃ ┃┃ ┃┃ ┃┃┗┓ ┃ ┃┃┃┃ ┃┗━┛┃ ┃┃ ┃┃ ┃┃ ┃┃ ┃┃┗┓ ┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃ ┃ ┏┛┗┛┃ ┃┏━┓┃ ┃┃ ┏┫┣┓ ┃┗━┛┃ ┃┃ ┃ ┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛ ┗━━━┛ ┗┛ ┗┛ ┗┛ ┗━━┛ ┗━━━┛ ┗┛ ┗━┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CORE STYLE" DESIGN BY © LO STUDIO CUSTOM MAIN STYLESHEET ver 1.0.21 - Gestione di font, colori tramite variabili. - Regole di compatibilità xBrowser su ogni elemento o tag HTML. - Ottimizzazione e regole di buona "web typography". - Regole di gestione dinamica dei media (img, svg, video, audio). - Macro grid per gestione dei contenuti tramite classi con responsive scalare. /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * ▐▌ ▐▌ ▄▀▀▄ █▀▀▄ ▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▄▀▀ * ▀▄▀ █▀▀█ █▐█▀ █ █▀▀█ █▀▀█ █ ▄ █▀▀ ▀▄ * ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀▀ - VARIABLES * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COLOURS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ html { --black: #3a3a3a; --black-rgb: 58 58 58; --white: #ffffff; --white-rgb: 255 255 255; /* Custom Colors */ --blue: #0c3970; --blue-rgb: 12 57 112; --dark-blue: #021934; --dark-blue-rgb: 2 25 52; --light-blue: #1796f3; --light-blue-rgb: 23 150 243; --green: #00FF27; --green-rgb: 0 255 39; --yellow: #fad646; --yellow-rgb: 250 214 70; --red: #ff0000; --red-rgb: 255 0 0; --dirt-white: #f2f2f2; --dirt-white-rgb: 242 242 242; --grey: #9c9c9c; --grey-rgb: 156 156 156; --nav: #2b2166; } body { --main-bkg-color: var(--dirt-white); } header { --head-bkg-color: var(--white); } footer { --footer-bkg-color: var(--dark-blue); } /* Scrollbar style */ body::-webkit-scrollbar { width: 12px; background-color: var(--white); } body::-webkit-scrollbar-thumb { width: 12px; background-color: var(--blue); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FONTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @font-face { font-family: 'Comfortaa'; src: url('../fonts/Comfortaa-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 300 700; font-style: normal; } ::-moz-selection { color: var(--blue); text-shadow: none; background: var(--yellow); } ::selection { color: var(--blue); text-shadow: none; background: var(--yellow); } html { /* Backup */ font-family: 'Helvetica', 'Arial', 'Georgia', 'Times New Roman', serif; /* Fonts */ --main-font: 'Comfortaa', cursive; --title-font: 'Comfortaa', cursive; /* REM size */ font-size: 20px; --rem-max: 20; --rem: 20px; --rem-min: 14; --rem-min-px: 14px; } p, .p, .content p { --font-size: var( --rem ); --p-color: var( --black ); --p-family: var( --main-font ); --p-line: 1.6; --p-weight: normal; --p-style: normal; } h1, .h1 { --h1-max: 72; --h1-size: 72px; --h1-min: 28; --h1-min-px: 28px; --h1-color: var( --white ); --h1-family: var( --title-font ); --h1-line-height: 1.25; --h1-weight: 700; --h1-spacing: initial; --h1-style: normal; } h2, .h2, .content h2 { --h2-max: 72; --h2-size: 72px; --h2-min: 28; --h2-min-px: 28px; --h2-color: var( --blue ); --h2-family: var( --title-font ); --h2-line-height: 1.25; --h2-weight: 700; --h2-spacing: initial; --h2-style: normal; } h3, .h3, .content h3 { --h3-max: 50; --h3-size: 50px; --h3-min: 24; --h3-min-px: 24px; --h3-color: var( --black ); --h3-family: var( --title-font ); --h3-line-height: 1; --h3-weight: normal; --h3-spacing: initial; --h3-style: normal; } h4, .h4, .content h4 { --h4-max: 34; --h4-size: 34px; --h4-min: 20; --h4-min-px: 20px; --h4-color: var( --black ); --h4-family: var( --title-font ); --h4-line-height: 1.25; --h4-weight: 700; --h4-spacing: initial; --h4-style: normal; } h5, .h5, .content h5 { --h5-max: 30; --h5-size: 30px; --h5-min: 20; --h5-min-px: 20px; --h5-color: var( --black ); --h5-family: var( --title-font ); --h5-line-height: 1; --h5-weight: 700; --h5-spacing: initial; --h5-style: normal; } h6, .h6, .content h6 { --h6-max: 24; --h6-size: 24px; --h6-min: 18; --h6-min-px: 18px; --h6-color: var( --black ); --h6-family: var( --title-font ); --h6-line-height: 1; --h6-weight: normal; --h6-spacing: initial; --h6-style: normal; } /*∞∞ Fluid Typography + Max font-size ∞∞*/ @media screen and (max-width: 1920px) { html { --rem-diff: calc( var(--rem-max) - var(--rem-min) ); --rem: calc( var(--rem-min-px) + var(--rem-diff) * ((100vw - 360px) / 1560)); } h1, .h1, .content h1 { --h1-diff: calc( var(--h1-max) - var(--h1-min) ); --h1-size: calc( var(--h1-min-px) + var(--h1-diff) * ((100vw - 360px) / 1560)); } h2, .h2, .content h2 { --h2-diff: calc( var(--h2-max) - var(--h2-min) ); --h2-size: calc( var(--h2-min-px) + var(--h2-diff) * ((100vw - 360px) / 1560)); } h3, .h3, .content h3 { --h3-diff: calc( var(--h3-max) - var(--h3-min) ); --h3-size: calc( var(--h3-min-px) + var(--h3-diff) * ((100vw - 360px) / 1560)); } h4, .h4, .content h4 { --h4-diff: calc( var(--h4-max) - var(--h4-min) ); --h4-size: calc( var(--h4-min-px) + var(--h4-diff) * ((100vw - 360px) / 1560)); } h5, .h5, .content h5 { --h5-diff: calc( var(--h5-max) - var(--h5-min) ); --h5-size: calc( var(--h5-min-px) + var(--h5-diff) * ((100vw - 360px) / 1560)); } h6, .h6, .content h6 { --h6-diff: calc( var(--h6-max) - var(--h6-min) ); --h6-size: calc( var(--h6-min-px) + var(--h6-diff) * ((100vw - 360px) / 1560)); } } /** * * █▄ ▄█ ▄▀▀▄ ▄▀▀ █▀▀▄ ▄▀▀▄ * █ █ █ █▀▀█ █ █▐█▀ █ █ * ▀ ▀ ▀ ▀ ▀▀ ▀ ▀▀ ▀▀ - MACRO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CORE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ html { /* Prevent adjustments of font size after orientation changes in iOS. */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; font-size: var(--rem); font-family: sans-serif; line-height: 1.15; color: var(--font-main-color); } *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body, div, hr, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, button, input, select, optgroup, audio, video { margin: 0; padding: 0; border: 0; /* font: inherit; font-size: 100%; */ vertical-align: baseline; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CONTAINER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ body { font-family: var(--main-font); background-color: var( --main-bkg-color ); transition: .25s ease; } body.noscroll { overflow: hidden; } main, section, .container { position: relative; width: 100%; } .container { max-width: 1920px; margin: auto; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ELEMENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .rel { position: relative; } .abs { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } @supports(-webkit-position: sticky){ .sticky { -webkit-position: sticky; position: sticky; } } .float_l { float: left; } .float_r { float: right; } .none { display: none !important; } .display { display: initial !important; } .hidden { visibility: hidden !important; } .non-hidden { visibility: visible !important; } .screen_only { display: block; } .mobile_only { display: none; } .clr:after { content: ""; display: table; clear: both; } @supports (display: flow-root) { .clr { display: flow-root; } .clr:after { display: none; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEXT FORMAT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .content :where(p, ul, ol) { margin-top: 1.5em; } .content :where(p, ul, ol):first-of-type { margin-top: 0; } .content :where(h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p), .content :where(h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p):first-of-type, .content :where(h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul, p + ul), .content :where(h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul, p + ul):first-of-type, .content :where(h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol, p + ol), .content :where(h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol, p + ol):first-of-type { margin-top: 1.5em; } .content :where(p + h1, p + h2, p + h3, p + h4, p + h5, p + h6), .content :where(p + h1, p + h2, p + h3, p + h4, p + h5, p + h6):first-of-type { margin-top: 1.5rem; } .content :where(p a, li a) { display: inline-block; font: inherit; } .content :where(.btn, .link) { margin-top: 1.5em; } .content_v { writing-mode: vertical-lr; } .tac { text-align: center; } .tar { text-align: right; } /** * * ▄▀▀ ▄▀▀▄ █▄ ▄█ █▀▄ ▄▀▀▄ ▀▀█▀▀ ▀ █▀▀▄ ▀ █ ▀ ▀▀█▀▀ ▀▄ ▄▀ * █ █ █ █ █ █ █ █ █▀▀█ █ █ █▀▀█ █ █ ▄ █ █ █ * ▀▀ ▀▀ ▀ ▀ █▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀ ▀▀▀▀ ▀ ▀ ▀ - CORRECTIONS FOR COMPATIBILITY * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } nav ul, nav ol { list-style: none; list-style-image: none; } address, cite, var, dfn, em, i, .em { font-style: italic; } button:active, input:active, textarea:active, select:active { outline: none; } button:focus, input:focus, textarea:focus, select:focus { outline: 0; } button, input { overflow: visible; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border: 0; border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } input[type="checkbox"], input[type="radio"], [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"], [type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } select::-ms-expand { display: none; } [hidden], template { display: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /** * * ▀▀█▀▀ ▀▄ ▄▀ █▀▄ ▄▀▀▄ █▀▀ ▄▀▀▄ █▄ █ ▀▀█▀▀ * █ █ █ █ █ █ █▀▀ █ █ █ ▀█ █ * ▀ ▀ █▀ ▀▀ & ▀ ▀▀ ▀ ▀ ▀ - TYPO & FONT * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ html, body, hr, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, blockquote, pre, fieldset, form, legend, textarea, figure, iframe { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased !important; text-rendering: optimizeLegibility !important; } /* Separatori di argomenti per paragrafi o contenuto */ hr { -moz-box-sizing: content-box; box-sizing: content-box; overflow: visible; height: 1px; background-color: #ccc; } /* Citazione da un altro sito o fonte */ blockquote { margin: 0 1.5em; line-height: var(--p-line); } blockquote, q { quotes: none; } blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none; } /* Citazione breve all'interno di un testo o paragrafo */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } q:before, q:after { content: ''; content: none; } q { display: inline; font-style: italic; } q:before { content: '"'; font-style: normal; } q:after { content: '"'; font-style: normal; } abbr, abbr[title], acronym { text-decoration: underline dotted; cursor: help; } /* Marked text */ mark { background: #fff9c0; text-decoration: none; } /* Text deleted or changed */ del, s { text-decoration: line-through; } /* Insert text after a del if needed */ ins { text-decoration: underline; } /* Variation of text size */ big, .big { font-size: 125%; } small, .small { font-size: 75%; } b, strong, .strong { font-weight: bolder; } code, kbd, samp, tt, var, pre { font-family: monospace, monospace; font-size: var(--p-size); } code { vertical-align: bottom; } pre { max-width: 100%; overflow: auto; white-space: pre-wrap; background: #eee; line-height: var(--p-line); padding: 1.5em; } sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sub { bottom: -1ex; vertical-align: sub; } sup { top: -.5ex; vertical-align: super; } span.amp { font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important; font-style: italic; } /* Word break & Hypenations for "p" elements */ p, .p, .content p { word-break: break-word; overflow-wrap: break-word; -moz-hyphens: initial; -ms-hyphens: initial; hyphens: initial; -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings: "liga=1, dlig=1"; font-feature-settings: "liga", "dlig"; font-family: var(--p-family); font-size: var(--font-size); line-height: var(--p-line); font-weight: var(--p-weight); color: var(--p-color); } @supports(-webkit-hyphens: auto){ p, .p, .content p { -webkit-hyphens: auto; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TITLES ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ h1, .h1, .content h1 { font-family: var(--h1-family); font-size: var(--h1-size); line-height: var(--h1-line-height); font-weight: var(--h1-weight); color: var(--h1-color); letter-spacing: var(--h1-spacing); font-style: var(--h1-style); } h2, .h2, .content h2 { font-family: var(--h2-family); font-size: var(--h2-size); line-height: var(--h2-line-height); font-weight: var(--h2-weight); color: var(--h2-color); letter-spacing: var(--h2-spacing); font-style: var(--h2-style); } h3, .h3, .content h3 { font-family: var(--h3-family); font-size: var(--h3-size); line-height: var(--h3-line-height); font-weight: var(--h3-weight); color: var(--h3-color); letter-spacing: var(--h3-spacing); font-style: var(--h3-style); } h4, .h4, .content h4 { font-family: var(--h4-family); font-size: var(--h4-size); line-height: var(--h4-line-height); font-weight: var(--h4-weight); color: var(--h4-color); letter-spacing: var(--h4-spacing); font-style: var(--h4-style); } h5, .h5, .content h5 { font-family: var(--h5-family); font-size: var(--h5-size); line-height: var(--h5-line-height); font-weight: var(--h5-weight); color: var(--h5-color); letter-spacing: var(--h5-spacing); font-style: var(--h5-style); } h6, .h6, .content h6 { font-family: var(--h6-family); font-size: var(--h6-size); line-height: var(--h6-line-height); font-weight: var(--h6-weight); color: var(--h6-color); letter-spacing: var(--h6-spacing); font-style: var(--h6-style); } h1 strong, .h1 strong, h2 strong, .h2 strong, h3 strong, .h3 strong, h4 strong, .h4 strong, h5 strong, .h5 strong, h6 strong, .h6 strong { font-weight: bolder; } h1 span, .h1 span, h1 a, .h1 a, .content h1 span, .content h1 a, h2 span, .h2 span, h2 a, .h2 a, .content h2 span, .content h2 a, h3 span, .h3 span, h3 a, .h3 a, .content h3 span, .content h3 a, h4 span, .h4 span, h4 a, .h4 a, .content h4 span, .content h4 a, h5 span, .h5 span, h5 a, .h5 a, .content h5 span, .content h5 a, h6 span, .h6 span, h6 a, .h6 a, .content h6 span, .content h6 a { font: inherit; color: inherit; } /** * * █▀▀ █ █▀▀ █▄ ▄█ █▀▀ █▄ █ ▀▀█▀▀ ▄▀▀ * █▀▀ █ ▄ █▀▀ █ █ █ █▀▀ █ ▀█ █ ▀▄ * ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀ ▀ ▀ ▀▀ - ELEMENTS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .abs_center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 75%; height: 75%; overflow: hidden; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ button { -webkit-appearance: none; appearance: none; outline: 0; text-decoration: none; text-transform: none; background-color: transparent; font-family: var(--main-font); font-size: 100%; cursor: pointer; transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LIST ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Lists */ ul ul, ol ul, dl ul, ul ol, ol ol, dl ol, ul dl, ol dl, dl dl { margin-top: 0; margin-bottom: 0; } ul li, ol li { list-style: none; list-style-position: inside; line-height: 1.5rem; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } /* Unordered Lists */ ul { list-style: disc; list-style-type: disc; } /* Ordered Lists */ ol { list-style: decimal; list-style-type: decimal; } /* Description Lists */ dt { font-family: var( --font-family ); font-weight: bold; } dd { margin: 0; padding-left: calc(2 * var(--global--spacing-horizontal)); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ a { display: block; font-size: var(--rem); color: inherit; text-decoration: none; /* text-decoration-thickness: 1px; text-underline-offset: 3px; */ cursor: pointer; transition: .25s ease; } a:hover, a:active { outline: 0; } a:focus { outline: 0; } a:visited { color: var(--link-visited-color); } /* Only on Firefox - Allow text decoration to render under text and not above */ @supports (text-decoration-skip-ink: all) { a { text-decoration-skip-ink: all; } a:hover, a:focus, a:active { text-decoration-skip-ink: none; } } /* Highlights links on iPhones/iPads. Basically works like the :hover selector for mobile devices. */ @supports (-webkit-tap-highlight-color: initial) { a:link, a:visited:link { -webkit-tap-highlight-color: var(--tap_highlight); } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACKGROUNDS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .bkg, .bkg_abs, .bkg_video { background-position: center; background-repeat: no-repeat; background-size: cover; } .bkg_abs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sized { background-color: #efefef; overflow: hidden; background: var(--bkg-xlarge) no-repeat center center; background-size: cover; } .sized > img { position: relative; object-fit: cover; min-height: 100%; width: 100%; top: 50%; transform: translateY(-50%); } @media screen and ( max-width: 1440px ) { .sized { background-image: var(--bkg-large); } } @media screen and ( max-width: 980px ) { .sized { background-image: var(--bkg-medium); } } @media screen and ( max-width: 520px ) { .sized { background-image: var(--bkg-small); } } .bkg_video { position: absolute; top: 50%; left: 50%; margin: auto; width: auto; height: auto; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; } .bkg_thumb > img { width: 100%; height: 100%; object-fit: cover; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MEDIA ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ img { height: auto; max-width: 100%; border-style: none; vertical-align: middle; } svg { height: auto; max-width: 100%; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure > img, figure > svg { width: 100%; } picture { display: block; } picture.h100 { height: 100vh; } picture.h100.abs { height: 100%; } picture > img { width: 100%; height: 100%; object-fit: cover; } .image-replacement, .ir { text-indent: 100%; white-space: nowrap; overflow: hidden; } embed, iframe, object, video { max-width: 100%; } * > figure > video { max-width: unset; width: 100%; vertical-align: middle; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } /* Wordpress Images inside a paragraph with float */ img.alignleft { float: left; margin: .25em 1em .25em 0; } img.alignright { float: right; margin: .25em 0 .25em 1em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .filter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .filter_black { background-color: #1e1e1e; opacity: .25; } .filter_back { background: rgba(10 10 10 / 80%); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .filter_back { -webkit-backdrop-filter: blur(10px) /* grayscale(.5) opacity(.8) ...and on and on... */; backdrop-filter: blur(10px) /* grayscale(.5) opacity(.8) ...and on and on... */; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CUSTOM PAGE NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .pagination, .wp-prev-next { margin: 1.5em 0; } .pagination { text-align: center; } .pagination ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5em; white-space: nowrap; padding: 0; } .pagination li { padding: 0; margin: 0; } .pagination a, .pagination span { display: block; min-width: 1em; margin: 0; padding: .75em 1em .675em 1em; box-shadow: 0 0 .25em rgba(var(--blue-rgb) / 25%); background-color: var(--white); border-radius: .5em; font-size: 100%; font-weight: 500; line-height: 1; color: var(--blue); text-decoration: none; } .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: var(--light-blue); color: var(--dark-blue); } .pagination .current { cursor: default; background-color: var(--blue); color: var(--white); } .pagination .current:hover, .pagination .current:focus { } /* fallback previous & next links */ .wp-prev-next .prev-link { float: left; } .wp-prev-next .next-link { float: right; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MISC ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ progress { vertical-align: baseline; } /* ALT ACCORDION */ details > summary { display: list-item; cursor: pointer; } details > p { margin: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ WP CAPTIONS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; text-align: center; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ WP GALLERY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Sovrascritta da "WP Media Folder" se presente */ .gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } .swiper-container, .swiper { position: relative; width: 100%; margin-left: auto; margin-right: auto; padding: 0; overflow: hidden; list-style: none; z-index: 1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PLUGINS & SCRIPTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Iubenda banner */ #iubenda-cs-banner .iubenda-banner-content-padded a, #iubenda-cs-banner .iubenda-banner-content a { display: inline-block !important; } a.iubenda-tp-btn.iubenda-cs-preferences-link { display: none !important; } .iubenda-tp-btn[data-tp-float][data-tp-float=bottom-right], .iubenda-tp-btn[data-tp-float][data-tp-float=top-right] { display: none !important; } /* Google reCapctha hiding */ .grecaptcha-badge { visibility: hidden !important; } /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ INPUTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ input[type="text"], input[type="password"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], input[type="range"], select, textarea, .input { display: block; vertical-align: middle; width: 100%; padding: .75em 1.25em .75em 1.25em; border-radius: 20em; border: 1px solid var(--white); font-family: var(--main-font); font-size: 1em; line-height: 1.25; color: var(--white); background-color: transparent; box-shadow: none; transition: .25s ease; } input[type="text"]:focus, input[type="text"]:active, input[type="password"]:focus, input[type="password"]:active, input[type="datetime-local"]:focus, input[type="datetime-local"]:active, input[type="date"]:focus, input[type="date"]:active, input[type="month"]:focus, input[type="month"]:active, input[type="time"]:focus, input[type="time"]:active, input[type="week"]:focus, input[type="week"]:active, input[type="number"]:focus, input[type="number"]:active, input[type="email"]:focus, input[type="email"]:active, input[type="url"]:focus, input[type="url"]:active, input[type="search"]:focus, input[type="search"]:active, input[type="tel"]:focus, input[type="tel"]:active, input[type="color"]:focus, input[type="color"]:active, input[type="range"]:focus, input[type="range"]:active, select:focus, select:active, textarea:focus, textarea:active, .input:focus, .input:active { } input[type="button"], [type="button"], input[type="reset"], [type="reset"], input[type="submit"], [type="submit"] { -webkit-appearance: none; padding: .75em 1.5em; border-radius: 20em; border: 1px solid var(--blue); background-color: var(--yellow); font-size: 125%; line-height: 1.25; font-weight: 700; color: var(--blue); cursor: pointer; transition: .25s ease; } input[type="button"]:active, [type="button"]:active, input[type="reset"]:active, [type="reset"]:active, input[type="submit"]:active, [type="submit"]:active { background-color: var(--light-blue); color: var(--yellow); } input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { background-color: var(--blue); color: var(--yellow); } input[type="text"].wpforms-error, input[type="password"].wpforms-error, input[type="datetime-local"].wpforms-error, input[type="date"].wpforms-error, input[type="month"].wpforms-error, input[type="time"].wpforms-error, input[type="week"].wpforms-error, input[type="number"].wpforms-error, input[type="email"].wpforms-error, input[type="url"].wpforms-error, input[type="search"].wpforms-error, input[type="tel"].wpforms-error, input[type="color"].wpforms-error, input[type="range"].wpforms-error, select.wpforms-error, textarea.wpforms-error, .input.wpforms-error { color: #fbe3e4; border-color: #fbe3e4; outline: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDREQkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDREQ0YwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3ODRGRkE2RjA0QTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERBRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+U8iT5wAAAedJREFUeNqk1U9I02Ecx/HtV3aIFAc1hcRDUoGXRAq0oNLA2CrsEFmHbikZu0iQYIFGYAiegkCpLipBxPpDEBMUzB0EhSG2LhG7hMR2GviPgUTvB57Bw8P3+U23B16HPX8+e/b8nt93wezZSMCnhXETF3AcB5BDCnH8Dq98ExcGHcFn8Ah3cdDni+fxnPDv9oAnTB7CKu6VCFXtChZy56LxUjt+jfuB8toSOth9wd7xWAWhqrUjYR/FRTwWJm+iIPT/w7bQf5ljiZnBg45dtKFX6H+LU8gIY8OEV6vgTkStwXWE8BPTGDHGPqNPz2mCfSOOYkA99TvCt1bhGPL68zMcwmncMuape10jrI+q4BbHi/FLn31S9z2x5tRhTc+1W506ipM+T3oRD4X+8+qtc4SqFvL0z/Fr14S+Szjis8bz9Lvvaq8cwS/wwGfdlqfPSWqTiFlX77o13u9Ym1PBs8JAytpRoy44X9Ft9E/gvbA+rYKn8NcaaMVc8UHgBw4b9/iqUQZ6hOAJFbyDcUflmsEX4a6+wTtHGfhAIUqa1U29Zc2BytouThD8x6xuN5CtMPi2CrXLZkZf/HyZoRFCP7n+QVR4PV7uI/AjGghN7OU/r1ilnqILtfpNC+o6vIFljBKYlhb/F2AAgaBsWR5wRiIAAAAASUVORK5CYII=); background-position: calc(100% - 0.75em) center; background-repeat: no-repeat; background-size: 1em; background-color: transparent; padding-right: 2em; } input[type="text"].wpforms-valid, input[type="password"].wpforms-valid, input[type="datetime-local"].wpforms-valid, input[type="date"].wpforms-valid, input[type="month"].wpforms-valid, input[type="time"].wpforms-valid, input[type="week"].wpforms-valid, input[type="number"].wpforms-valid, input[type="email"].wpforms-valid, input[type="url"].wpforms-valid, input[type="search"].wpforms-valid, input[type="tel"].wpforms-valid, input[type="color"].wpforms-valid, input[type="range"].wpforms-valid, select.wpforms-valid, textarea.wpforms-valid, .input.wpforms-valid { outline: none; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDRERkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDRFMEYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MzQ0NERERjA0QjExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERFRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7olkTQAAAfhJREFUeNqklU9oE0EUhzdroWjw0tBeWlDxkEaIp55TsCU9VKIgCrHBelA8CQ1Kr1WPbZrQ3gqtQqvGqxpQc2jBk6BIIaAGD4qNCKURpDSKiPi98gLDsJt//uBjsztvfnk7895sIPAw6/joGMThFJyAXn2+A+9gA57/TaY/eU0OeBgfhGm4DiGnsb7DAszxBz/NAdcKjMJLuNWCqagHbsscN5+L+hmH4QkMOe1L5jzFfNA2PgT34ajTuY7AGuZB0/hmh5m+gS0r8xv1zRvg+gGCHZiOwnF4DP3iB3sQkYxPd2C6CWfhB9Xwlus5+K1j4jXuaq3a+gM1H9OPcAa+7q9lPidZJqHbiIm7Wg22rsEI7FrPSzAMX/T+ADyAKSsu7Fr1KplehLvwCs5DvfBf65p+MypqRbO1FXK9utH4/QKuaqYTsG3E3INJv00Q46px3+XxanJ/Ute2/vqP4FKDza2KcdljIKdnhS0xXYULTaqmLMZFn8FFSFtvt6x70ExFCS5oUXspq2ssa7oEl1swFa+CGFdgtkHgPDyDKy02zyxNU6lXRUZb1EuHYayNNs+Yh5B0WQo+/8fpJnNTZFuzz2OpjoQ2QruSOQlMy35fEGmEGMxY9e1brxobw7TkWA1h6xfckUPb+JhGoE/Hpfvew7qUld/H9J8AAwDpw3WYrxcZ3QAAAABJRU5ErkJggg==); background-position: calc(100% - 0.75em) center; background-repeat: no-repeat; background-size: 1em; background-color: transparent; padding-right: 2em; } input[type="text"][disabled], input[type="password"][disabled], input[type="datetime-local"][disabled], input[type="date"][disabled], input[type="month"][disabled], input[type="time"][disabled], input[type="week"][disabled], input[type="number"][disabled], input[type="email"][disabled], input[type="url"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="color"][disabled], input[type="range"][disabled], select[disabled], textarea[disabled], .input[disabled] { cursor: not-allowed; border-color: #cfcfcf; opacity: .5; } label.wpforms-error { margin-top: .5em; padding: 0 .75em; font-size: 75%; font-weight: 700; color: var(--red); text-align: center; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FIELDSET ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ fieldset { padding: 1em; border: 1px solid #c0c0c0; } legend { white-space: normal; max-width: 100%; padding: 0 .5em; border: 0; font-size: 1em; color: inherit; } fieldset input[type=submit] { max-width: max-content; } fieldset input[type=radio], fieldset input[type=checkbox] { margin-bottom: 0; } fieldset input[type=radio] + label, fieldset input[type=checkbox] + label { font-size: 1em; padding-left: 0; margin-bottom: 1em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FIELD & COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ input[type="color"] { padding: 0 .15em; } input[type="password"] { letter-spacing: .25em; } label { display: block; background-color: transparent; font-size: 1em; line-height: 1; text-decoration: none; transition: .25s ease; } textarea { overflow: auto; vertical-align: top; resize: none; max-width: 100%; min-height: 6.5em; padding-top: .25em; padding-bottom: .25em; border: none; background-color: rgba( 255 255 255 / 25% ); line-height: 1.5em; } select { -webkit-appearance: none; padding: 0.75em 3em 0.575em 1.25em; background: url(../images/svg/arrow_down.svg) no-repeat calc(100% - 1.5em) center / 1em; border: 1px solid var(--blue); font-size: 100%; font-weight: 500; line-height: 1.25; color: var(--blue); text-transform: none; transition: .125s ease; cursor: pointer; } select option { font-weight: 500; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PLACEHOLDER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ ::input-placeholder { color: var(--white); opacity: .8; transition: .25s ease; } ::-ms-input-placeholder { color: var(--white); opacity: .8; transition: .25s ease; } :focus::input-placeholder { color: var(--white); opacity: .4; } :focus::-ms-input-placeholder { color: var(--white); opacity: .4; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CUSTOM TOGGLE INPUTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @supports (-webkit-appearance: none) or (-moz-appearance: none) { input[type=checkbox], input[type=radio] { -webkit-appearance: none; -moz-appearance: none; line-height: 0; position: relative; display: block; vertical-align: top; width: 1.5em; height: 1.5em; background: #fff; border: 1px solid #BBC1E1; transition: background .25s, border-color .25s, box-shadow 0.2s; cursor: pointer; } input[type=checkbox]:after, input[type=radio]:after { content: ""; display: block; position: absolute; top: 0; left: 0; transition: .25s ease; } input[type=checkbox]:disabled, input[type=radio]:disabled { border-color: var(--grey); opacity: 0.9; cursor: not-allowed; } input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked { border-color: #E1E6F9; background: #BBC1E1; } input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: 0 0 0 2px rgba(39 94 254 / 30%); } input[type=checkbox]:checked, input[type=radio]:checked { background: var(--white); border-color: var(--blue); } input[type=checkbox]:checked:after { opacity: 1; } input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked { opacity: 1; } input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) { border-color: var(--blue); } input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) { width: 1.5em; height: 1.5em; min-width: 1.5em; } input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after { opacity: 1; } input[type=checkbox]:not(.switch) { border-radius: 4px; } input[type=checkbox]:not(.switch):after { top: 0; left: 0; width: 1.375em; height: 1.375em; background-color: var(--blue); border-radius: 2px; transform: scale(0); transform-origin: center; transition: .25s ease; } input[type=checkbox]:not(.switch):checked:after { transform: scale(.825); } input[type=checkbox].switch { width: 38px; border-radius: 11px; } input[type=checkbox].switch:after { top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #BBC1E1; transform: translateX(0); } input[type=checkbox].switch:checked:after { background: #fff; transform: translateX(17px); } input[type=checkbox].switch:disabled:not(:checked):after { opacity: .5; } input[type=radio] { border-radius: 4em; } input[type=radio]:after { width: 1.125em; height: 1.125em; top: 50%; left: 50%; margin: auto; border-radius: 50%; background: var(--blue); opacity: 0; transform: scale(0) translate(-50%,-50%); transform-origin: 0 0; } input[type=radio]:checked:after { transform: scale(1) translate(-50%,-50%); opacity: 1; } } input[type=checkbox] + label, input[type=radio] + label { display: inline-block; vertical-align: top; font-size: .75em; line-height: 1.25; margin-left: 4px; cursor: pointer; } input[type=checkbox]:disabled + label, input[type=radio]:disabled + label { cursor: not-allowed; } /** * * █▄ ▄█ ▄▀▀▄ ▀ █▄ █ ▄▀▀ █▀▀▄ ▀ █▀▀▄ * █ █ █ █▀▀█ █ █ ▀█ █ ▀▌ █▐█▀ █ █ █ * ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀ ▀▀ ▀ ▀▀▀ - MAIN GRID * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TABLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ table { display: table; width: 100%; border-collapse: collapse; border-spacing: 0; } table, th, td { border: 1px solid #ccc; } thead, tbody, tfoot { vertical-align: middle; border-color: inherit; } thead { display: table-header-group; } tbody { display: table-row-group; } tfoot { display: table-footer-group; } tr { vertical-align: inherit; border-color: inherit; } tr:nth-child(even){ background-color: rgb(30 30 30 / 5%); } th, td { padding: 2px; } th { font-weight: bold } col { display: table-column } colgroup { display: table-column-group } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FLEXBOX ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .flex { display: flex; align-items: center; justify-content: center; } .flex-t { display: flex; align-items: flex-start; justify-content: center; } .flex-r { display: flex; align-items: center; justify-content: flex-end; } .flex-b { display: flex; align-items: flex-end; justify-content: center; } .flex-l { display: flex; align-items: center; justify-content: flex-start; } .flex-v { display: flex; align-items: center; justify-content: center; flex-direction: column; } .flex-vt { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; } .flex-vr { display: flex; align-items: flex-end; justify-content: center; flex-direction: column; } .flex-vb { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; } .flex-vl { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; } .flex-init { display: flex; align-items: flex-start; justify-content: flex-start; } .flex-end { display: flex; align-items: flex-end; justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .flex-rev-row { flex-direction: row-reverse; } .flex-rev-col { flex-direction: column-reverse; } .flex-sort { justify-content: space-between; } .flex-el { flex: 1 1 auto; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ GRID ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .grid { display: grid; } .grid-c2 { display: grid; grid-template-columns: 1fr 1fr; } .grid-c3 { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-c4 { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-r2 { display: grid; grid-template-rows: 1fr 1fr; } .grid-r3 { display: grid; grid-template-rows: 1fr 1fr 1fr; } .grid-r4 { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ RATIO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .ratio-1-1, .squared, .ratio-16-9, .ratio-4-3, .ratio-9-8, .ratio-3-4 { overflow: hidden; width: 100%; } .ratio-1-1, .squared { aspect-ratio: 1 / 1; } .ratio-16-9 { aspect-ratio: 16 / 9; } .ratio-4-3 { aspect-ratio: 4 / 3; } .ratio-9-8 { aspect-ratio: 9 / 8; } .ratio-3-4 { aspect-ratio: 3 / 4; } :where(.ratio-1-1, .squared, .ratio-16-9, .ratio-4-3, .ratio-9-8, .ratio-3-4) img, :where(.ratio-1-1, .squared, .ratio-16-9, .ratio-4-3, .ratio-9-8, .ratio-3-4) video, :where(.ratio-1-1, .squared, .ratio-16-9, .ratio_16_9 .ratio-4-3, .ratio-9-8, .ratio-3-4) iframe { object-fit: cover; width: 100%; height: 100%; } @supports not( aspect-ratio: 1 / 1 ){ .ratio-1-1::before, .squared: :before; { display: inline; content: ""; padding-top: 100%; } .ratio-16-9 { padding-top: 56.25%; } .ratio-4-3 { padding-top: 75%; } .ratio-9-8 { padding-top: 112.5%; } .ratio-3-4 { padding-top: 133.25%; } } .ratio-3-2 { padding-bottom: calc(100% * 3 / 4); } .ratio-8-5 { padding-bottom: 62.5%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ WIDTH ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .w2 { width: 2.5%; } .w5 { width: 5%; } .w7 { width: 7.5%; } .w10 { width: 10%; } .w15 { width: 15%;} .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w33 { width: calc(100% / 3); } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w66 { width: calc(100% / 1.5); } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; } .w20s, .w20m, .w20l, .w20xl, .w25s, .w25m, .w25l, .w25xl, .w30s, .w30m, .w30l, .w30xl, .w33s, .w33m, .w33l, .w33xl, .w35s, .w35m, .w35l, .w35xl, .w40s, .w40m, .w40l, .w40xl, .w45s, .w45m, .w45l, .w45xl, .w50s, .w50m, .w50l, .w50xl, .w55s, .w55m, .w55l, .w55xl, .w60s, .w60m, .w60l, .w60xl, .w65s, .w65m, .w65l, .w65xl, .w66s, .w66m, .w66l, .w66xl, .w70s, .w70m, .w70l, .w70xl, .w75s, .w75m, .w75l, .w75xl, .w80s, .w80m, .w80l, .w80xl, .w85s, .w85m, .w85l, .w85xl, .w90s, .w90m, .w90l, .w90xl, .w95s, .w95m, .w95l, .w95xl { width: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEIGHT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .h10 { height: 10vh; } .h15 { height: 15vh; } .h20 { height: 20vh; } .h25 { height: 25vh; } .h30 { height: 30vh; } .h33 { height: calc(100vh / 3); } .h35 { height: 35vh; } .h40 { height: 40vh; } .h45 { height: 45vh; } .h50 { height: 50vh; } .h55 { height: 55vh; } .h60 { height: 60vh; } .h65 { height: 65vh; } .h66 { height: calc(100vh / 1.5); } .h70 { height: 70vh; } .h75 { height: 75vh; } .h80 { height: 80vh; } .h85 { height: 85vh; } .h90 { height: 90vh; } .h95 { height: 95vh; } .h100 { min-height: 100vh; transition: .25s ease; } .abs.h10, .bkg_abs.h10 { height: 10%; } .abs.h15, .bkg_abs.h15 { height: 15%; } .abs.h20, .bkg_abs.h20 { height: 20%; } .abs.h25, .bkg_abs.h25 { height: 25%; } .abs.h30, .bkg_abs.h30 { height: 30%; } .abs.h33, .bkg_abs.h33 { height: calc(100% / 3); } .abs.h35, .bkg_abs.h35 { height: 35%; } .abs.h40, .bkg_abs.h40 { height: 40%; } .abs.h45, .bkg_abs.h45 { height: 45%; } .abs.h50, .bkg_abs.h50 { height: 50%; } .abs.h55, .bkg_abs.h55 { height: 55%; } .abs.h60, .bkg_abs.h60 { height: 60%; } .abs.h65, .bkg_abs.h65 { height: 65%; } .abs.h66, .bkg_abs.h66 { height: calc(100% / 1.5); } .abs.h70, .bkg_abs.h70 { height: 70%; } .abs.h75, .bkg_abs.h75 { height: 75%; } .abs.h80, .bkg_abs.h80 { height: 80%; } .abs.h85, .bkg_abs.h85 { height: 85%; } .abs.h90, .bkg_abs.h90 { height: 90%; } .abs.h95, .bkg_abs.h95 { height: 95%; } .abs.h100, .bkg_abs.h100 { height: 100%; min-height: unset; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARIABLES ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ :root { --vert-ratio: 1; --oriz-ratio: 1; --c2v: calc(2.5% * var(--vert-ratio)); --c5v: calc(5% * var(--vert-ratio)); --c7v: calc(7.5% * var(--vert-ratio)); --c10v: calc(10% * var(--vert-ratio)); --c15v: calc(15% * var(--vert-ratio)); --c20v: calc(20% * var(--vert-ratio)); --c25v: calc(25% * var(--vert-ratio)); --c2o: calc(2.5% * var(--oriz-ratio)); --c5o: calc(5% * var(--oriz-ratio)); --c7o: calc(7.5% * var(--oriz-ratio)); --c10o: calc(10% * var(--oriz-ratio)); --c15o: calc(15% * var(--oriz-ratio)); --c20o: calc(20% * var(--oriz-ratio)); --c25o: calc(25% * var(--oriz-ratio)); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PADDING MANAGEMENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .p2 { padding: var(--c2v) var(--c2o); } .p5 { padding: var(--c5v) var(--c5o); } .p7 { padding: var(--c7v) var(--c7o); } .p10 { padding: var(--c10v) var(--c10o); } .p15 { padding: var(--c15v) var(--c15o); } .p20 { padding: var(--c20v) var(--c20o); } .p25 { padding: var(--c25v) var(--c25o); } .p2tb { padding-top: var(--c2v); padding-bottom: var(--c2v); } .p5tb { padding-top: var(--c5v); padding-bottom: var(--c5v); } .p7tb { padding-top: var(--c7v); padding-bottom: var(--c7v); } .p10tb { padding-top: var(--c10v); padding-bottom: var(--c10v); } .p15tb { padding-top: var(--c15v); padding-bottom: var(--c15v); } .p20tb { padding-top: var(--c20v); padding-bottom: var(--c20v); } .p25tb { padding-top: var(--c25v); padding-bottom: var(--c25v); } .p2lr { padding-left: var(--c2o); padding-right: var(--c2o); } .p5lr { padding-left: var(--c5o); padding-right: var(--c5o); } .p7lr { padding-left: var(--c7o); padding-right: var(--c7o); } .p10lr { padding-left: var(--c10o); padding-right: var(--c10o); } .p15lr { padding-left: var(--c15o); padding-right: var(--c15o); } .p20lr { padding-left: var(--c20o); padding-right: var(--c20o); } .p25lr { padding-left: var(--c25o); padding-right: var(--c25o); } .p2t { padding-top: var(--c2v); } .p2b { padding-bottom: var(--c2v); } .p5t { padding-top: var(--c5v); } .p5b { padding-bottom: var(--c5v); } .p7t { padding-top: var(--c7v); } .p7b { padding-bottom: var(--c7v); } .p10t { padding-top: var(--c10v); } .p10b { padding-bottom: var(--c10v); } .p15t { padding-top: var(--c15v); } .p15b { padding-bottom: var(--c15v); } .p20t { padding-top: var(--c20v); } .p20b { padding-bottom: var(--c20v); } .p25t { padding-top: var(--c25v); } .p25b { padding-bottom: var(--c25v); } .p2r { padding-right: var(--c2o); } .p2l { padding-left: var(--c2o); } .p5r { padding-right: var(--c5o); } .p5l { padding-left: var(--c5o); } .p7r { padding-right: var(--c7o); } .p7l { padding-left: var(--c7o); } .p10r { padding-right: var(--c10o); } .p10l { padding-left: var(--c10o); } .p15r { padding-right: var(--c15o); } .p15l { padding-left: var(--c15o); } .p20r { padding-right: var(--c20o); } .p20l { padding-left: var(--c20o); } .p25r { padding-right: var(--c25o); } .p25l { padding-left: var(--c25o); } .no_pt { padding-top: 0; } .no_pr { padding-right: 0; } .no_pb { padding-bottom: 0; } .no_pl { padding-left: 0; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MARGIN MANAGEMENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .m2 { margin: var(--c2v) var(--c2o); } .m5 { margin: var(--c5v) var(--c5o); } .m7 { margin: var(--c7v) var(--c7o); } .m10 { margin: var(--c10v) var(--c10o); } .m15 { margin: var(--c15v) var(--c15o); } .m20 { margin: var(--c20v) var(--c20o); } .m25 { margin: var(--c25v) var(--c25o); } .m2tb { margin-top: var(--c2v); margin-bottom: var(--c2v); } .m5tb { margin-top: var(--c5v); margin-bottom: var(--c5v); } .m7tb { margin-top: var(--c7v); margin-bottom: var(--c7v); } .m10tb { margin-top: var(--c10v); margin-bottom: var(--c10v); } .m15tb { margin-top: var(--c15v); margin-bottom: var(--c15v); } .m20tb { margin-top: var(--c20v); margin-bottom: var(--c20v); } .m25tb { margin-top: var(--c25v); margin-bottom: var(--c25v); } .m2lr { margin-left: var(--c2o); margin-right: var(--c2o); } .m5lr { margin-left: var(--c5o); margin-right: var(--c5o); } .m7lr { margin-left: var(--c7o); margin-right: var(--c7o); } .m10lr { margin-left: var(--c10o); margin-right: var(--c10o); } .m15lr { margin-left: var(--c15o); margin-right: var(--c15o); } .m20lr { margin-left: var(--c20o); margin-right: var(--c20o); } .m25lr { margin-left: var(--c25o); margin-right: var(--c25o); } .m2t { margin-top: var(--c2v); } .m2b { margin-bottom: var(--c2v); } .m5t { margin-top: var(--c5v); } .m5b { margin-bottom: var(--c5v); } .m7t { margin-top: var(--c7v); } .m7b { margin-bottom: var(--c7v); } .m10t { margin-top: var(--c10v); } .m10b { margin-bottom: var(--c10v); } .m15t { margin-top: var(--c15v); } .m15b { margin-bottom: var(--c15v); } .m20t { margin-top: var(--c20v); } .m20b { margin-bottom: var(--c20v); } .m25t { margin-top: var(--c25v); } .m25b { margin-bottom: var(--c25v); } .m2r { margin-right: var(--c2o); } .m2l { margin-left: var(--c2o); } .m5r { margin-right: var(--c5o); } .m5l { margin-left: var(--c5o); } .m7r { margin-right: var(--c7o); } .m7l { margin-left: var(--c7o); } .m10r { margin-right: var(--c10o); } .m10l { margin-left: var(--c10o); } .m15r { margin-right: var(--c15o); } .m15l { margin-left: var(--c15o); } .m20r { margin-right: var(--c20o); } .m20l { margin-left: var(--c20o); } .m25r { margin-right: var(--c25o); } .m25l { margin-left: var(--c25o); } .no_mt { margin-top: 0; } .no_mr { margin-right: 0; } .no_mb { margin-bottom: 0; } .no_ml { margin-left: 0; } /** * * █▀▀▄ ▀▄ ▄▀ █▄ █ ▄▀▀▄ █▄ ▄█ ▀ ▄▀▀ █▀▀▄ █▀▀ ▄▀▀ █▀▄ ▄▀▀▄ █▄ █ ▄▀▀ ▀ ▐▌ ▐▌ █▀▀ * █ █ █ █ ▀█ █▀▀█ █ █ █ █ █ █▐█▀ █▀▀ ▀▄ █ █ █ █ █ ▀█ ▀▄ █ ▀▄▀ █▀▀ * ▀▀▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀▀ ▀▀▀ ▀▀ █▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - DYNAMIC RESPONSIVE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MOBILE | 601px -> 767px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @media only screen and ( min-width: 601px ) { :root { --vert-ratio: .875; --oriz-ratio: 1.125; } .w20s { width: 20%; } .w25s { width: 25%; } .w30s { width: 30%; } .w33s { width: calc(100% / 3); } .w35s { width: 35%; } .w40s { width: 40%; } .w45s { width: 45%; } .w50s { width: 50%; } .w55s { width: 55%; } .w60s { width: 60%; } .w65s { width: 65%; } .w66s { width: calc(100% / 1.5); } .w70s { width: 70%; } .w75s { width: 75%; } .w80s { width: 80%; } .w85s { width: 85%; } .w90s { width: 90%; } .w95s { width: 95%; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MOBILE | 768px -> 1023px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @media screen and ( min-width: 768px ) { :root { --vert-ratio: .75; --oriz-ratio: 1.25; } .w20m { width: 20%; } .w25m { width: 25%; } .w30m { width: 30%; } .w33m { width: calc(100% / 3); } .w35m { width: 35%; } .w40m { width: 40%; } .w45m { width: 45%; } .w50m { width: 50%; } .w55m { width: 55%; } .w60m { width: 60%; } .w65m { width: 65%; } .w66m { width: calc(100% / 1.5); } .w70m { width: 70%; } .w75m { width: 75%; } .w80m { width: 80%; } .w85m { width: 85%; } .w90m { width: 90%; } .w95m { width: 95%; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MOBILE | 1024px -> 1280px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @media screen and ( min-width: 1024px ) { :root { --vert-ratio: .625; --oriz-ratio: 1.375; } .screen_only { display: none; } .mobile_only { display: inline-block; } .w20l { width: 20%; } .w25l { width: 25%; } .w30l { width: 30%; } .w33l { width: calc(100% / 3); } .w35l { width: 35%; } .w40l { width: 40%; } .w45l { width: 45%; } .w50l { width: 50%; } .w55l { width: 55%; } .w60l { width: 60%; } .w65l { width: 65%; } .w66l { width: calc(100% / 1.5); } .w70l { width: 70%; } .w75l { width: 75%; } .w80l { width: 80%; } .w85l { width: 85%; } .w90l { width: 90%; } .w95l { width: 95%; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MOBILE | 1281px -> 1366px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @media screen and ( min-width: 1281px ) { :root { --vert-ratio: .5; --oriz-ratio: 1.5; } .w20xl { width: 20%; } .w25xl { width: 25%; } .w30xl { width: 30%; } .w33xl { width: calc(100% / 3); } .w35xl { width: 35%; } .w40xl { width: 40%; } .w45xl { width: 45%; } .w50xl { width: 50%; } .w55xl { width: 55%; } .w60xl { width: 60%; } .w65xl { width: 65%; } .w66xl { width: calc(100% / 1.5); } .w70xl { width: 70%; } .w75xl { width: 75%; } .w80xl { width: 80%; } .w85xl { width: 85%; } .w90xl { width: 90%; } .w95xl { width: 95%; } } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DESKTOP | 1367px -> 1920px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @media screen and ( min-width: 1367px ) {} /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DESKTOP 2K | 1921px -> 2560px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @media screen and ( min-width: 1921px ) {} /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DESKTOP 4K & UP | 2561px -> ... ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ @media screen and ( min-width: 2561px ) {} /** * * ▀ █▀▀ * █ █▀▀ * ▀ ▀▀▀ - IE FALLBACK * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .is-IE { overflow: hidden; } #blue-screen-of-ie { display: none; bottom: 0; left: 0; background-color: #0000aa; text-align: center; z-index: 42; } .is-IE #blue-screen-of-ie { display: block; } #blue-screen-of-ie .blue-screen-of-ie-wrapper { width: 100%; max-width: 1280px; min-height: 660px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #blue-screen-of-ie img.ie-caution { display: block; width: 120px; margin: 0 auto 20px auto; animation: blinkingText 1.8s infinite; } @keyframes blinkingText { 0% { opacity: 0; } 29% { opacity: 0; } 30% { opacity: 1; } } #blue-screen-of-ie h2, #blue-screen-of-ie p, #blue-screen-of-ie li, #blue-screen-of-ie button, #blue-screen-of-ie a { font-family: 'more_perfect_dos_vgaregular', 'Courier New', monospace; color: #bbb; } #blue-screen-of-ie h2 { display: inline-block; background-color: #aaaaaa; box-shadow: 10px 10px 0 #000; font-size: 40px; font-weight: 500; color: #0000aa; text-transform: uppercase; } #blue-screen-of-ie p { -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } #blue-screen-of-ie .ie-focus { margin: 40px 0 20px 0; font-size: 26px; opacity: 1; } #blue-screen-of-ie .ie-list { margin: 20px 0; text-align: center; } #blue-screen-of-ie .ie-list li { max-width: 920px; margin: 0 auto; font-size: 20px; list-style: none; text-align: left; } #is-IE-off { margin-top: 20px; } #is-IE-off span { text-decoration: underline; color: #fff; } #blue-screen-of-ie a { display: inline-block; position: relative; padding: 10px; margin: 20px 0 0 0; background-color: #aaaaaa; box-shadow: 7px 7px 0 #000; font-size: 40px; color: #0000aa; text-transform: uppercase; } #blue-screen-of-ie a:hover { background-color: #666666; color: #ffffff; box-shadow: 10px 10px 0 #000; transform: translateY(-3px); } #blue-screen-of-ie a:focus, #blue-screen-of-ie a:active { transform: translateY(0); box-shadow: 5px 5px 0 #000; }