/*

┏━━━┓ ┏━━━┓ ┏┓ ┏┓ ┏━┓ ┏┓ ┏━━━┓ ┏━━━┓ ┏━━━━┓ ┏━━┓ ┏━━━┓ ┏━┓ ┏┓   ┏━━━┓ ┏━━━┓ ┏━━━┓
┃┏━━┛ ┃┏━┓┃ ┃┃ ┃┃ ┃ ┗┓┃┃ ┗┓┏┓┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┗┫┣┛ ┃┏━┓┃ ┃ ┗┓┃┃   ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃
┃┗━━┓ ┃┃ ┃┃ ┃┃ ┃┃ ┃┏┓┗┛┃  ┃┃┃┃ ┃┃ ┃┃ ┗┛┃┃┗┛  ┃┃  ┃┃ ┃┃ ┃┏┓┗┛┃   ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓
┃┏━━┛ ┃┃ ┃┃ ┃┃ ┃┃ ┃┃┗┓ ┃  ┃┃┃┃ ┃┗━┛┃   ┃┃    ┃┃  ┃┃ ┃┃ ┃┃┗┓ ┃   ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃
┃┃    ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃ ┃ ┏┛┗┛┃ ┃┏━┓┃   ┃┃   ┏┫┣┓ ┃┗━┛┃ ┃┃ ┃ ┃   ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃
┗┛    ┗━━━┛ ┗━━━┛ ┗┛ ┗━┛ ┗━━━┛ ┗┛ ┗┛   ┗┛   ┗━━┛ ┗━━━┛ ┗┛ ┗━┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "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.

/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.swiper-container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
}


/**
 *  ▐▌ ▐▌  ▄▀▀▄  █▀▀▄  ▀  ▄▀▀▄  █▀▀▄  █     █▀▀  ▄▀▀
 *   ▀▄▀   █▀▀█  █▐█▀  █  █▀▀█  █▀▀█  █  ▄  █▀▀   ▀▄
 *    ▀    ▀  ▀  ▀ ▀▀  ▀  ▀  ▀  ▀▀▀   ▀▀▀▀  ▀▀▀  ▀▀  - VARIABLES
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COLOURS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

html {
	--black: #1e1e1e; --black-rgb: 30,30,30;
	--white: #ffffff; --white-rgb: 255,255,255;

	/* Custom Colors */
	--red: #7d112f;	--red-rgb: 125, 17, 47;  
}


/* Da utilizzare in caso di Dark Mode o necessità, alrimenti !-> ELMINNARE <-! */
header { --head-bkg-color: var(--white); }
footer { --footer-bkg-color: var(--white); }


body { --main-bkg-color: var(--white); }


/* Scrollbar style */
body::-webkit-scrollbar { width: 12px; background-color: #ffffff; }
body::-webkit-scrollbar-thumb { width: 12px; background-color: #c1c1c1; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FONTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/* FONTFACE
 * Solo se necessario, in quanto è sempre meglio scegliere la CDN Google
 * To embed your own fonts, use this syntax and place your fonts inside the library/fonts folder.
 * Be sure to remove the comment brackets.
 */

/*  
@font-face {
	font-family: 'Font Name';
	src: url('../fonts/font-name.eot');
	src: url('../fonts/font-name.eot?#iefix') format('embedded-opentype'),
		url('../fonts/font-name.woff') format('woff'),
		url('../fonts/font-name.ttf') format('truetype'),
		url('../fonts/font-name.svg#font-name') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/


::-moz-selection { color: #ffffff; background: rgba(var(--red-rgb),.7); }
::selection { color: #ffffff; background: rgba(var(--red-rgb),.7); }


html {

	/* Backup */
	font-family: Georgia, Times, "Times New Roman", serif;

	/* Fonts */
	--main-font: 'Spartan', sans-serif;
	--title-font: 'DM Serif Display', serif;
	--second-font:  'DM Serif Display', serif;

	/* REM size */
	font-size: 20px;
	--rem-max: 20; --rem: 20px;
	--rem-min: 14; --rem-min-px: 14px;

}


/*
 *
 * h1 { --h1-size: calc( var(--size) * 4 ); }
 * p { --font-size: calc( var(--rem) * 1.25 ); } "p" maggiorato del 25%;
 *
 * Gestire i font con MIN / MAX e classi
 * Eventuali span o tag interni all'elemtno base da gestire con %
 * <a>, <button> e altri elementi con misure intermedie da gestire con la regola => font-size: calc( var(--rem) * 1.5 );
 *
 * Per gestire con buone regole di typo nel responsive, oltre al font-size cambiare anche il font-weight, line-height e letter-spacing
 * Range ideale di 45-75 charcters per line
 *
 */


p, .p {
	--font-size: var( --rem );
	--p-color: var( --black );
	--p-family: var( --main-font );
	--p-line: 1.4;
	--p-weight: 450;
	--p-style: normal;
}


h1, .h1 {
	--h1-max: 100; --h1-size: 100px;
	--h1-min: 40; --h1-min-px: 40px;

	--h1-color: var( --black );
	--h1-family: var( --second-font );
	--h1-line-height: 1;
	--h1-weight: normal; 
	--h1-spacing: initial; --h1-style: normal;
}
h2, .h2 {
	--h2-max: 70; --h2-size: 70px;
	--h2-min: 35; --h2-min-px: 35px;

	--h2-color: var( --red );
	--h2-family: var( --title-font );
	--h2-line-height: 1;
	--h2-weight: normal; 
	--h2-spacing: initial; --h2-style: normal;
}
h3, .h3 {
	--h3-max: 50; --h3-size: 50px;
	--h3-min: 30; --h3-min-px: 30px;

	--h3-color: var( --black );
	--h3-family: var( --title-font );
	--h3-line-height: 1;
	--h3-weight: normal; 
	--h3-spacing: initial; --h3-style: normal;
}
h4, .h4 {
	--h4-max: 40; --h4-size: 40px;
	--h4-min: 30; --h4-min-px: 30px;

	--h4-color: var( --black );
	--h4-family: var( --title-font );
	--h4-line-height: 1;
	--h4-weight: normal; 
	--h4-spacing: initial; --h4-style: normal;
}
h5, .h5 {
	--h5-max: 30; --h5-size: 30px;
	--h5-min: 25; --h5-min-px: 25px;

	--h5-color: var( --black );
	--h5-family: var( --title-font );
	--h5-line-height: 1;
	--h5-weight: normal; 
	--h5-spacing: initial; --h5-style: normal;
}
h6, .h6 {
	--h6-max: 25; --h6-size: 25px;
	--h6-min: 20; --h6-min-px: 20px;

	--h6-color: var( --black );
	--h6-family: var( --title-font );
	--h6-line-height: 1;
	--h6-weight: normal; 
	--h6-spacing: initial; --h6-style: normal;
}


a:hover, a:focus, a:active { --link-hover-color: #191970; }
a:visited { --link-visited-color: #800080; }

/* 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 { --tap_highlight: rgba(30,30,30,.25); }
}

/* a:-webkit-any-link { color: inherit; } */


/*∞∞ 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 - 320px) / 1600)); 
	}
	h1, .h1 { 
		--h1-diff: calc( var(--h1-max) - var(--h1-min) );
		--h1-size: calc( var(--h1-min-px) + var(--h1-diff) * ((100vw - 320px) / 1600)); 
	}
	h2, .h2 { 
		--h2-diff: calc( var(--h2-max) - var(--h2-min) );
		--h2-size: calc( var(--h2-min-px) + var(--h2-diff) * ((100vw - 320px) / 1600)); 
	}
	h3, .h3 { 
		--h3-diff: calc( var(--h3-max) - var(--h3-min) );
		--h3-size: calc( var(--h3-min-px) + var(--h3-diff) * ((100vw - 320px) / 1600)); 
	}
	h3, .h3 { 
		--h3-diff: calc( var(--h3-max) - var(--h3-min) );
		--h3-size: calc( var(--h3-min-px) + var(--h3-diff) * ((100vw - 320px) / 1600)); 
	}
	h4, .h4 { 
		--h4-diff: calc( var(--h4-max) - var(--h4-min) );
		--h4-size: calc( var(--h4-min-px) + var(--h4-diff) * ((100vw - 320px) / 1600)); 
	}
	h5, .h5 { 
		--h5-diff: calc( var(--h5-max) - var(--h5-min) );
		--h5-size: calc( var(--h5-min-px) + var(--h5-diff) * ((100vw - 320px) / 1600)); 
	}
}




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ DARKMODE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

[data-theme="dark"] {
    --black: #efefef; --black-rgb: 239,239,239;
	--white: #121212; --white-rgb: 39,39,39;
	--color_1: #7a8479;	--color_1-rgb: 122,132,121;
	--color_2: #41525b;	--color_2-rgb: 65,82,91;
	--color_3: #937833;	--color_3-rgb: 147,120,51;
	--head-bkg-color: #121212; 
	--footer-bkg-color: #121212; 
	/* ... */
}








/**
 *
 *  █▄ ▄█  ▄▀▀▄  ▄▀▀  █▀▀▄  ▄▀▀▄
 *  █ █ █  █▀▀█  █    █▐█▀  █  █
 *  ▀   ▀  ▀  ▀   ▀▀  ▀ ▀▀   ▀▀  - MACRO
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

>>> TABLE OF CONTENTS:

@ VARIABLES
	- Colours
	- Fonts
	- Darkmode

@ MACRO
	- Core
	- Container
	- HTML Elements

@ COMPATIBILITY

@ Typo & Font
	- Typo elements
	- Titles
	- Extra rules & Effects

@ Elements
	- Button
	- Lists
	- Link
	- Backgrounds
	- Media
	- Filters
	- Gradients
	- Custom Page Nav
	- Animations
	- Misc
	- Captions
	- Gallery
	- Plugins & Scripts

@ Form
	- Inputs
	- Filedset
	- Field & Components
	- Placeholder
	- Custom Toggle Inputs
	- Custom Range Inputs

@ Main Grid
	- Variables
	- Table
	- Flex
	- Grid
	- Width
	- Height
	- Padding management
	- Margin management

@ Responsive
	- Base (Mobile)
	- Larger Mobile
	- Tablet & Small Laptop
	- Desktop
	- Large Desktop & Fullscreen
	- Retina
	- Über ( 2K, 4K, ... )

@ Dark Mode

@ IE Fallback

*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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; }

/*
 * Scrolling behavior for smooth scrolling with anchors ( solo se non è presente il plugin "smooth-scroll" )
 * Ricordarsi di aggiungere "tabindex="-1" come attr all'elemento "ancora" se non "focusable".
 */
/* html:focus-within { scroll-behavior: smooth; } */


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 ); }
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; }


/* NEW CLR IF SUPPORTED | Classe da assegnare a div contenitore
 * Ancora non chiarissimo se funzioni al 100%, va testato xBrowser! Ovviamente da usare solo in presenza di float.
 * In caso di flexbox, grid o elementi a blocchi base non serve!
 */
.clr:after { content: ""; display: table; clear: both; }
@supports (display: flow-root) { 
	.clr { display: flow-root; } .clr:after { display: none; }
}








/**
 *
 *  ▄▀▀  ▄▀▀▄  █▄ ▄█  █▀▄  ▄▀▀▄  ▀▀█▀▀  ▀  █▀▀▄  ▀  █     ▀  ▀▀█▀▀  ▀▄ ▄▀
 *  █    █  █  █ █ █  █ █  █▀▀█    █    █  █▀▀█  █  █  ▄  █    █      █
 *   ▀▀   ▀▀   ▀   ▀  █▀   ▀  ▀    ▀    ▀  ▀▀▀   ▀  ▀▀▀▀  ▀    ▀      ▀    - 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 {
	word-break: break-word;
	overflow-wrap: break-word;

	-moz-hyphens: auto;
	-ms-hyphens: auto;
	/*hyphens: auto;*/

	-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 { -webkit-hyphens: auto; } 
}




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TITLES ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

h1, .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 {
	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 {
	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 {
	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 {
	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 {
	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, 
h2 span, .h2 span, h2 a, .h2 a, 
h3 span, .h3 span, h3 a, .h3 a, 
h4 span, .h4 span, h4 a, .h4 a, 
h5 span, .h5 span, h5 a, .h5 a, 
h6 span, .h6 span, h6 a, .h6 a { font: inherit; color: inherit; }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ETXRA RULES & EFFECTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/* 

*- Writing directions
p { writing-mode: horizontal-tb; }
p { writing-mode: vertical-rl; }
p { writing-mode: vertical-lr; }

*- Gradient Text
h1 {
	background: -webkit-linear-gradient(#eee, #333);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

*- Text selection color
::-moz-selection { color: red; background: yellow; }
::selection { color: red; background: yellow; }

*- Select and style every <p> element where the parent is a <div> element:
div > p { background-color: yellow; }

*- Select and style the first <p> element that are placed immediately after <div> elements:
div + p { background-color: yellow; }

*/








/**
 *
 *  █▀▀  █     █▀▀  █▄ ▄█  █▀▀  █▄ █  ▀▀█▀▀  ▄▀▀
 *  █▀▀  █  ▄  █▀▀  █ █ █  █▀▀  █ ▀█    █     ▀▄
 *  ▀▀▀  ▀▀▀▀  ▀▀▀  ▀   ▀  ▀▀▀  ▀  ▀    ▀    ▀▀  - ELEMENTS
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/* Absolute Centering ( avoidable with flex-box )
 * Required a declared Height
 * Better use "overflow: hidden;" se non si è sicuri che l'altezza dichirata possa contenere tutto
 */
.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;
	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-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:focus, a:active { text-decoration-style: dotted; color: var(--link-hover-color); }
a:hover, a:active { outline: 0; }
a:focus { outline: thin dotted; }
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%; 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: 100vh; 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 > 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: .4; filter: contrast(1.5) saturate(1); }

/* Backdrop Filter - Not Supported in Firefox & IE 
 * Applica l'effetto del filtro all'elemento sottostante
 */
.filter_back { background: rgba(0,0,0,.8); }
@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: inline-block; clear: both;
	background-color: white; white-space: nowrap;
	padding: 0;	border-radius: 3px; 
}
.pagination li {
	padding: 0; margin: 0;
	float: left; display: inline; overflow: hidden;
	border-right: 1px solid #eaedf2; 
}
.pagination a, .pagination span {
	display: block; min-width: 1em;
	margin: 0; padding: 0.75em;
	font-size: 1em; line-height: 1em; font-weight: normal; color: #2980b9; text-decoration: none;	
}
.pagination a:hover, .pagination a:focus, 
.pagination span:hover, .pagination span:focus { background-color: #2980b9; color: white; }
.pagination .current { cursor: default; color: #5c6b80; }
.pagination .current:hover, .pagination .current:focus { background-color: white; color: #5c6b80; }


/* 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; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PLUGINS & SCRIPTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/* Iubenda banner */
#iubenda-cs-banner .iubenda-banner-content-padded a { display: inline-block; }

/* 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%; height: 2em;
	margin-bottom: .75em; padding: 0 .625em;
	border-radius: 3px;
	line-height: 2;
	background-color: #eaedf2; 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 { 
	background-color: #f7f8fa; 
}

input[type="button"], [type="button"],
input[type="reset"],  [type="reset"],
input[type="submit"], [type="submit"] {
	-webkit-appearance: none; 
	padding: .5em 1em;
	border: 2px solid #bbb;  border-radius: 3px;
	background-color: #ddd;
	line-height: 1;
	cursor: pointer; transition: .25s ease;
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover { border-color: #ccc #bbb #aaa; }

input[type="button"]:active, input[type="button"]:focus,
input[type="reset"]:active, input[type="reset"]:focus,
input[type="submit"]:active, input[type="submit"]:focus { border-color: #aaa #bbb #bbb; }

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-color: #fbe3e4;
	background-color: white; background-position: 99% center; background-repeat: no-repeat;
	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=);
}

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 {
	color: #e6efc2;
	border-color: #e6efc2; outline-color: #e6efc2; 
	background-color: white; background-position: 99% center; background-repeat: no-repeat;
	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==);
}

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: 0.6; 
}




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
	background-repeat: no-repeat; background-position: 99% center;
	border: 1px solid #ccc; 
	text-transform: none;
}




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PLACEHOLDER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

::input-placeholder { color: var(--black); opacity: .8; transition: .25s ease; }
::-ms-input-input-placeholder { color: var(--black); opacity: .8; transition: .25s ease; }

:focus::input-placeholder { color: var(--black); opacity: .4; }
:focus::-ms-input-placeholder { color: var(--black); 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;
		position: relative; display: inline-block; vertical-align: top;
		width: 21px; height: 21px;		
		border: 1px solid #BBC1E1;
		background: #fff;
		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: #F6F8FF; 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, .3);
	}

	input[type=checkbox]:checked,
	input[type=radio]:checked {
		background: #275EFE;
		border-color: #275EFE;
	}
	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: #275EFE;
	}


	input[type=checkbox]:not(.switch),
	input[type=radio]:not(.switch) {
		width: 21px;
	}
	input[type=checkbox]:not(.switch):after,
	input[type=radio]:not(.switch):after {
		opacity: 1;
	}
	input[type=checkbox]:not(.switch) {
		border-radius: 3.5px;
	}
	input[type=checkbox]:not(.switch):after {
		top: 4px; left: 7px; display: none;
		width: 5px; height: 9px;
		border: 2px solid #fff; border-top: 0; border-left: 0;
		transform: rotate(20deg);
	}
	input[type=checkbox]:not(.switch):checked:after {
		transform: rotate(43deg);
	}


	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: .6;
	}


	input[type=radio] {
		border-radius: 50%;
	}
	input[type=radio]:after {
		width: 19px; height: 19px;
		bottom: 0; right: 0; margin: auto;
		border-radius: 50%;
		background: #fff;
		opacity: 0;
		transform: scale(0);
	}
	input[type=radio]:checked:after { transform: scale(.7); opacity: 1; }


	.is-dark-theme input[type=checkbox], .is-dark-theme input[type=radio] { background: var(--global--color-white-90); }


}


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;
}




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CUSTOM RANGE INPUTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

@supports (-webkit-appearance: none) or (-moz-appearance: none) {


	input[type=range] {
		-webkit-appearance: none;
		width: 100%; height: 6px;
		margin: 10px 0; padding: 0;
		background: #cccccc;
		border-radius: 6px;
		outline-offset: 10px;
	}
	input[type=range]:disabled { opacity: .7; }

	/* -WEBKIT- */
	input[type=range]::-webkit-slider-runnable-track {
		width: 100%; height: 12.8px;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
		background: #ac51b5;
		border-radius: 25px; border: 0px solid #000101;
		cursor: pointer;
	}
	input[type=range]:focus::-webkit-slider-runnable-track { background: #ac51b5; }
	input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none; margin-top: -3.6px;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
		border: 1px solid #000000; border-radius: 7px;
		height: 20px; width: 39px;
		background: #65001c;
		cursor: pointer;
	}

	/* -MOZ- */
	input[type=range]::-moz-range-track {
		width: 100%; height: 12.8px;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
		background: #ac51b5;
		border: 0px solid #000101; border-radius: 25px;
		transition: .25s; cursor: pointer;
	}	
	input[type=range]::-moz-range-thumb {
		box-sizing: border-box;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
		border: 0px solid #000000; border-radius: 7px;
		height: 20px; width: 39px;
		background: #65001c;
		cursor: pointer;
	}

}


/* Range Input for EDGE */
input[type=range]::-ms-track {
	width: 100%; height: 12.8px;
	background: transparent;
	border-color: transparent; border-width: 39px 0;
	color: transparent;
	transition: .25s; cursor: pointer;
}

input[type=range]::-ms-fill-upper { background: #ac51b5; border: 1px solid #000101; border-radius: 50px; }
input[type=range]::-ms-fill-lower { background: #ac51b5; border: 1px solid #000101; border-radius: 50px; }
input[type=range]:focus::-ms-fill-upper { background: #ac51b5; }
input[type=range]:focus::-ms-fill-lower { background: #ac51b5; }

input[type=range]::-ms-thumb {
	border: 1px solid #000000; border-radius: 7px;
	height: 20px; width: 39px;
	background: #65001c;
	cursor: pointer;
}








/**
 *
 * █▄ ▄█  ▄▀▀▄  ▀  █▄ █     ▄▀▀   █▀▀▄  ▀  █▀▀▄
 * █ █ █  █▀▀█  █  █ ▀█     █ ▀▌  █▐█▀  █  █  █
 * ▀   ▀  ▀  ▀  ▀  ▀  ▀     ▀▀▀   ▀ ▀▀  ▀  ▀▀▀  - MAIN GRID
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARIABLES ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/*
 * Ratio 'left' & 'right': 
 	- mobile  => 1x
 	- tablet  => 1.25x
 	- desktop => 1.5x
 *
 * Ratio 'top' & 'bottom':
	- mobile  => 1x
	- tablet  => .75x
	- desktop => .5x
 *
 * Proporzioni scalari nelle @media query per adeguare le percentuali all'orientamento e proporzione dello schermo
 */
:root {
	--vert-ratio: 1;
	--oriz-ratio: 1;
};




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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: #e4e4e4; }
th, td { padding: 2px; }
th { font-weight: bold }

col { display: table-column }
colgroup { display: table-column-group }

tbody tr:hover { background: yellow; }
/* tr:hover td, tr:hover th { background-color: yellow; } */




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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-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; }


/*
GRID CONTAINER
display: grid; 

grid-template-columns: 200px 300px auto 300px 200px;
grid-template-rows: 25% 200px auto;
grid: grid-template-rows / grid-template-columns;

grid-auto-flow: row | column | dense;
grid-auto-rows: ;
grid-auto-columns: ;

grid-row: 100px 300px;
grid-column: 3fr 1fr;

grid-row-gap: .5rem;
grid-column-gap: 1rem;
grid-gap: 1rem;

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: align-items / justify-items ;

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: align-content / justify-content ;
*/


/* GRID ITEM 
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;

grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: <align-self> / <justify-self>;
*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ RATIO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/
/*
aspect ratio  | padding-bottom value
--------------|----------------------
16:9          |       56.25%
4:3           |       75%
3:2           |       66.66%
8:5           |       62.5%

16:9  ->  padding-bottom: calc(100% * 9 / 16);
4:3   ->  padding-bottom: calc(100% * 3 / 4);
3:2   ->  padding-bottom: calc(100% * 2 / 3);
...

Nuove Regole compatibili solo su Edge e Chrome
aspect-ratio: 1 / 1; Quadrato
aspect-ratio: 16 / 9;
*/

.ratio-1-1, .squared, .ratio-16-9, .ratio-4-3, .ratio-3-2, .ratio-8-5 { overflow: hidden; }
.ratio-1-1, .squared { padding-bottom: 100%; }
.ratio-16-9 { padding-bottom: 56.25%; }
.ratio-4-3 { padding-bottom: 75%; }
.ratio-3-2 { padding-bottom: calc(100% * 3 / 4); }
.ratio-8-5 { padding-bottom: 62.5%; }

.ratio_16_9 iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 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; }

.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; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PADDING MANAGEMENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.p2  { padding: calc(2.5% * var(--vert-ratio)) calc(2.5% * var(--oriz-ratio)); }
.p5  { padding: calc(5% * var(--vert-ratio)) calc(5% * var(--oriz-ratio)); }
.p7  { padding: calc(7.5% * var(--vert-ratio)) calc(7.5% * var(--oriz-ratio)); }
.p10 { padding: calc(10% * var(--vert-ratio)) calc(10% * var(--oriz-ratio)); }
.p15 { padding: calc(15% * var(--vert-ratio)) calc(15% * var(--oriz-ratio)); }
.p20 { padding: calc(20% * var(--vert-ratio)) calc(20% * var(--oriz-ratio)); }
.p25 { padding: calc(25% * var(--vert-ratio)) calc(25% * var(--oriz-ratio)); }

.p2tb  { padding-top: calc(2.5% * var(--vert-ratio)); padding-bottom: calc(2.5% * var(--vert-ratio)); }
.p5tb  { padding-top: calc(5% * var(--vert-ratio)); padding-bottom: calc(5% * var(--vert-ratio)); }	
.p7tb  { padding-top: calc(7.5% * var(--vert-ratio)); padding-bottom: calc(7.5% * var(--vert-ratio)); }
.p10tb { padding-top: calc(10% * var(--vert-ratio)); padding-bottom: calc(10% * var(--vert-ratio)); }
.p15tb { padding-top: calc(15% * var(--vert-ratio)); padding-bottom: calc(15% * var(--vert-ratio)); }
.p20tb { padding-top: calc(20% * var(--vert-ratio)); padding-bottom: calc(20% * var(--vert-ratio)); }
.p25tb { padding-top: calc(25% * var(--vert-ratio)); padding-bottom: calc(25% * var(--vert-ratio)); }

.p2lr  { padding-left: calc(2.5% * var(--oriz-ratio)); padding-right: calc(2.5% * var(--oriz-ratio)); }
.p5lr  { padding-left: calc(5% * var(--oriz-ratio)); padding-right: calc(5% * var(--oriz-ratio)); }
.p7lr  { padding-left: calc(7.5% * var(--oriz-ratio)); padding-right: calc(7.5% * var(--oriz-ratio)); }
.p10lr { padding-left: calc(10% * var(--oriz-ratio)); padding-right: calc(10% * var(--oriz-ratio)); }
.p15lr { padding-left: calc(15% * var(--oriz-ratio)); padding-right: calc(15% * var(--oriz-ratio)); }
.p20lr { padding-left: calc(20% * var(--oriz-ratio)); padding-right: calc(20% * var(--oriz-ratio)); }
.p25lr { padding-left: calc(25% * var(--oriz-ratio)); padding-right: calc(25% * var(--oriz-ratio)); }

.p2t  { padding-top: calc(2.5% * var(--vert-ratio)); } .p2b  { padding-bottom: calc(2.5% * var(--vert-ratio)); }
.p5t  { padding-top: calc(5% * var(--vert-ratio)); }   .p5b  { padding-bottom: calc(5% * var(--vert-ratio)); }  
.p7t  { padding-top: calc(7.5% * var(--vert-ratio)); } .p7b  { padding-bottom: calc(7.5% * var(--vert-ratio)); }
.p10t { padding-top: calc(10% * var(--vert-ratio)); }  .p10b { padding-bottom: calc(10% * var(--vert-ratio)); }  
.p15t { padding-top: calc(15% * var(--vert-ratio)); }  .p15b { padding-bottom: calc(15% * var(--vert-ratio)); }  
.p20t { padding-top: calc(20% * var(--vert-ratio)); }  .p20b { padding-bottom: calc(20% * var(--vert-ratio)); }  
.p25t { padding-top: calc(25% * var(--vert-ratio)); }  .p25b { padding-bottom: calc(25% * var(--vert-ratio)); }  

.p2r  { padding-right: calc(2.5% * var(--oriz-ratio)); } .p2l  { padding-left: calc(2.5% * var(--oriz-ratio)); }
.p5r  { padding-right: calc(5% * var(--oriz-ratio)); }   .p5l  { padding-left: calc(5% * var(--oriz-ratio)); }
.p7r  { padding-right: calc(7.5% * var(--oriz-ratio)); } .p7l  { padding-left: calc(7.5% * var(--oriz-ratio)); }
.p10r { padding-right: calc(10% * var(--oriz-ratio)); }  .p10l { padding-left: calc(10% * var(--oriz-ratio)); }
.p15r { padding-right: calc(15% * var(--oriz-ratio)); }  .p15l { padding-left: calc(15% * var(--oriz-ratio)); }
.p20r { padding-right: calc(20% * var(--oriz-ratio)); }  .p20l { padding-left: calc(20% * var(--oriz-ratio)); }
.p25r { padding-right: calc(25% * var(--oriz-ratio)); }  .p25l { padding-left: calc(25% * var(--oriz-ratio)); }

.no_pt { padding-top: 0; }
.no_pr { padding-right: 0; }
.no_pb { padding-bottom: 0; }
.no_pl { padding-left: 0; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MARGIN MANAGEMENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.m2  { margin: calc(2.5% * var(--vert-ratio)) calc(2.5% * var(--oriz-ratio)); }
.m5  { margin: calc(5% * var(--vert-ratio)) calc(5% * var(--oriz-ratio)); }
.m7  { margin: calc(7.5% * var(--vert-ratio)) calc(7.5% * var(--oriz-ratio)); }
.m10 { margin: calc(10% * var(--vert-ratio)) calc(10% * var(--oriz-ratio)); }
.m15 { margin: calc(15% * var(--vert-ratio)) calc(15% * var(--oriz-ratio)); }
.m20 { margin: calc(20% * var(--vert-ratio)) calc(20% * var(--oriz-ratio)); }
.m25 { margin: calc(25% * var(--vert-ratio)) calc(25% * var(--oriz-ratio)); }

.m2tb  { margin-top: calc(2.5% * var(--vert-ratio)); margin-bottom: calc(2.5% * var(--vert-ratio)); }
.m5tb  { margin-top: calc(5% * var(--vert-ratio)); margin-bottom: calc(5% * var(--vert-ratio)); }	
.m7tb  { margin-top: calc(7.5% * var(--vert-ratio)); margin-bottom: calc(7.5% * var(--vert-ratio)); }
.m10tb { margin-top: calc(10% * var(--vert-ratio)); margin-bottom: calc(10% * var(--vert-ratio)); }
.m15tb { margin-top: calc(15% * var(--vert-ratio)); margin-bottom: calc(15% * var(--vert-ratio)); }
.m20tb { margin-top: calc(20% * var(--vert-ratio)); margin-bottom: calc(20% * var(--vert-ratio)); }
.m25tb { margin-top: calc(25% * var(--vert-ratio)); margin-bottom: calc(25% * var(--vert-ratio)); }

.m2lr  { margin-left: calc(2.5% * var(--oriz-ratio)); margin-right: calc(2.5% * var(--oriz-ratio)); }
.m5lr  { margin-left: calc(5% * var(--oriz-ratio)); margin-right: calc(5% * var(--oriz-ratio)); }
.m7lr  { margin-left: calc(7.5% * var(--oriz-ratio)); margin-right: calc(7.5% * var(--oriz-ratio)); }
.m10lr { margin-left: calc(10% * var(--oriz-ratio)); margin-right: calc(10% * var(--oriz-ratio)); }
.m15lr { margin-left: calc(15% * var(--oriz-ratio)); margin-right: calc(15% * var(--oriz-ratio)); }
.m20lr { margin-left: calc(20% * var(--oriz-ratio)); margin-right: calc(20% * var(--oriz-ratio)); }
.m25lr { margin-left: calc(25% * var(--oriz-ratio)); margin-right: calc(25% * var(--oriz-ratio)); }

.m2t  { margin-top: calc(2.5% * var(--vert-ratio)); } .m2b  { margin-bottom: calc(2.5% * var(--vert-ratio)); }
.m5t  { margin-top: calc(5% * var(--vert-ratio)); }   .m5b  { margin-bottom: calc(5% * var(--vert-ratio)); }  
.m7t  { margin-top: calc(7.5% * var(--vert-ratio)); } .m7b  { margin-bottom: calc(7.5% * var(--vert-ratio)); }
.m10t { margin-top: calc(10% * var(--vert-ratio)); }  .m10b { margin-bottom: calc(10% * var(--vert-ratio)); }  
.m15t { margin-top: calc(15% * var(--vert-ratio)); }  .m15b { margin-bottom: calc(15% * var(--vert-ratio)); }  
.m20t { margin-top: calc(20% * var(--vert-ratio)); }  .m20b { margin-bottom: calc(20% * var(--vert-ratio)); }  
.m25t { margin-top: calc(25% * var(--vert-ratio)); }  .m25b { margin-bottom: calc(25% * var(--vert-ratio)); }  

.m2r  { margin-right: calc(2.5% * var(--oriz-ratio)); } .m2l  { margin-left: calc(2.5% * var(--oriz-ratio)); }
.m5r  { margin-right: calc(5% * var(--oriz-ratio)); }   .m5l  { margin-left: calc(5% * var(--oriz-ratio)); }
.m7r  { margin-right: calc(7.5% * var(--oriz-ratio)); } .m7l  { margin-left: calc(7.5% * var(--oriz-ratio)); }
.m10r { margin-right: calc(10% * var(--oriz-ratio)); }  .m10l { margin-left: calc(10% * var(--oriz-ratio)); }
.m15r { margin-right: calc(15% * var(--oriz-ratio)); }  .m15l { margin-left: calc(15% * var(--oriz-ratio)); }
.m20r { margin-right: calc(20% * var(--oriz-ratio)); }  .m20l { margin-left: calc(20% * var(--oriz-ratio)); }
.m25r { margin-right: calc(25% * var(--oriz-ratio)); }  .m25l { padding-left: calc(25% * var(--oriz-ratio)); }

.no_mt { margin-top: 0; }
.no_mr { margin-right: 0; }
.no_mb { margin-bottom: 0; }
.no_ml { margin-left: 0; }









/**
 *
 * █▀▀▄  ▀▄ ▄▀  █▄ █  ▄▀▀▄  █▄ ▄█  ▀  ▄▀▀     █▀▀▄  █▀▀  ▄▀▀  █▀▄  ▄▀▀▄  █▄ █  ▄▀▀  ▀  ▐▌ ▐▌  █▀▀
 * █  █    █    █ ▀█  █▀▀█  █ █ █  █  █       █▐█▀  █▀▀   ▀▄  █ █  █  █  █ ▀█   ▀▄  █   ▀▄▀   █▀▀
 * ▀▀▀     ▀    ▀  ▀  ▀  ▀  ▀   ▀  ▀   ▀▀     ▀ ▀▀  ▀▀▀  ▀▀   █▀    ▀▀   ▀  ▀  ▀▀   ▀    ▀    ▀▀▀ - DYNAMIC RESPONSIVE
 *
 * Basare le media query sul contentuto e non sulle dimensioni dei dispositivi o degli schermi!
 * Quindi 3 step principali e fare in modo che tutto sia dinamico e adattivo, con flex-grid, dynamic-img, fluid-typo, ecc...
 * - Mobile
 * - Tablet
 * - Desktop
 *
 * Regole di responsive fluide con partenza da mobile che adattando in base alle variabili stabilite in alto il main grid
 * FLUID CALC BASE  ->  calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320))); }
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MOBILE | 0 -> 480px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ MOBILE | 481px -> 767px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

@media only screen and ( min-width: 481px ) {

	: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 -> 1024px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

@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 | 1025px -> 1280px ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

@media screen and ( min-width: 1025px ) {

	: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 ) {}








/**
 *
 * █▀▀▄  ▄▀▀▄  █▀▀▄  █ ▄▀     █▄ ▄█  ▄▀▀▄  █▀▀▄  █▀▀
 * █  █  █▀▀█  █▐█▀  █▀▄      █ █ █  █  █  █  █  █▀▀
 * ▀▀▀   ▀  ▀  ▀ ▀▀  ▀ ▀▀     ▀   ▀   ▀▀   ▀▀▀   ▀▀▀ - DARK MODE
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


.is-IE #dark-mode-toggler { display: none; }

/* Apply the filter directly on the body tag */
[data-theme="dark"] img { filter: brightness(.85) contrast(1.2); }

/* SVG icon */
[data-theme="dark"] svg.icon path { fill: #efefef; }

[data-theme="dark"] body { font-weight: 400; }








/**
 *
 * ▀ █▀▀
 * █ █▀▀
 * ▀ ▀▀▀ - 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; }