/*

┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓   ┏━━━┓ ┏━━━┓ ┏━━━┓
┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃   ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃
┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃   ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓
┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃   ┃┃   ┃┃ ┃┃ ┃┃┃┃┃┃   ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃
┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃   ┃┃   ┃┗━┛┃ ┃┃┃┃┃┃   ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃
┗━━━┛ ┗━━━┛ ┗━━━┛   ┗┛   ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET"

DESIGN BY © LO STUDIO

CUSTOM.CSS STYLESHEET FOR => " Famiglia artigiana "

BASE (MOBILE) SIZE

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




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


header { z-index: 4; }
.head_wrapper { padding: 1em 1.5em; z-index: 2; }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.head_logo { 
	display: inline-block; 
	--head-logo-width: 120px; /* <- in 'px' */
	--head-logo-min: 120;
	--head-logo-max: 250;
	max-width: 250px;
}
.head_logo :where(img, svg) { width: 100%; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/





/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#hamburger { 
	display: inline-block; font-size: var(--rem); line-height: 0;
	padding: .5em .5em; margin-right: -.5em; 
	overflow: visible; cursor: pointer; transition: .25s ease;
}
#hamburger .wrap { width: 2.5em; height: 2em; }
#hamburger span {
	display: block; position: absolute; left: 50%; transform: translateX(-50%);
	width: 2.5em; height: 2px; border-radius: .2em;
	background-color: var(--white);
	transform-origin: center; will-change: transform; transition: .25s ease;
}
#hamburger .top_bun { top: -1px; }
#hamburger .burger { top: calc(50% - 1px); }
#hamburger .bottom_bun { bottom: -1px; }

/* Tapped / Clicked animation */
/*
 * Copiare l'animazione scelta dal file hamburger.css
 * oppure utilizare quella base qui sotto
 */
#hamburger.tapped span { background-color: var(--white); transition: .25s ease; }
#hamburger.tapped .burger { opacity: 0; }
#hamburger.tapped .top_bun { top: 50%; transform: translate(-50%,-50%) rotate(45deg); }
#hamburger.tapped .bottom_bun { top: 50%; transform: translate(-50%,-50%) rotate(-45deg); }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#main_nav { display: none; position: absolute; top: 0; left: 0; z-index: 1; }
#main_nav .menu_wrapper { top: 0; left: 0; }

#main_nav .menu { position: relative; text-align: center; }
#main_nav .menu li { font: inherit; line-height: 1; }
#main_nav .menu li a { display: inline-block; color: var(--white); font-weight: 600; font-size: 2em; line-height: 1.25; padding: .25em 1em; }

#main_nav .icon_logo { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); width: 7rem; }



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








/**
 *
 *  ▄▀▀▄  ▄▀▀  ▄▀▀  █▀▀  ▀▀█▀▀  ▄▀▀
 *  █▀▀█   ▀▄   ▀▄  █▀▀    █     ▀▄
 *  ▀  ▀  ▀▀   ▀▀   ▀▀▀    ▀    ▀▀  - ASSETS
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.link {
	display: inline-block; position: relative; width: fit-content;
    padding: .5em 1em; border: 1px solid var(--white); border-radius: .25rem;
	font: inherit; font-weight: 600; font-size: var(--rem); color: var(--white);
	backdrop-filter: blur(.75rem); -webkit-backdrop-filter: blur(.75rem);
}

.link svg { display: inline-block; width: .8rem; transition: .25s ease; }
.link svg path { fill: var(--white); transition: .25s ease; }

.link.flex { display: inline-flex; gap: .5rem; }

.link:hover svg , .link:focus svg , .link:active svg { transform: scaleY(-1); }
.link:hover, .link:focus, .link:active { background-color: rgb(var(--light-rgb) / 75%);  }








/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.filter_s1 { background: rgba(14, 19, 63, 0.29); }
.filter_s1::after { content: ""; background: linear-gradient(to top, var(--dark), transparent 40%); position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }

.filter_grad { background: linear-gradient(180deg, #192C57 0%, #00021A 100%); }


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.light { color: var(--light); }
.blue { color: var(--blue); }

.bkg_dark { background-color: var(--dark); }
.bkg_blue { background-color: #1a2c57; }


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#scroll_btn {
	display: inline-block;
	position: absolute; left: 50%; bottom: 1.5em; 
	--scroll-px: 40px;
	--scroll-min: 40;
	--scroll-max: 60;
	max-width: 60px;
	transform: translateX(-50%);
	cursor: pointer; z-index: 1;
}
#scroll_btn svg { 
	width: 100%; 
	animation: hang_scroll 1.5s ease-in-out infinite forwards alternate;
	animation-play-state: running;
}
@keyframes hang_scroll {
	from { transform: translateY(0); }
	to { transform: translateY(.5em); }
}
#scroll_btn:hover svg, #scroll_btn:focus svg, #scroll_btn:active svg { animation-play-state: paused; }
#scroll_btn svg path { fill: var(--black); transition: .25s ease; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.nav_btn { bottom: 15%; width: 3.5em; padding: .25em; z-index: 1; cursor: pointer; transition: .25s ease; }
.nav_btn :where(img, svg) { width: 100%; }
.nav_btn svg path { fill: var(--black); transition: .25s ease; }

.nav_prev { left: calc(25% - 4em); }
.nav_next { right: calc(25% - 4em); }

.nav_btn.swiper-button-disabled { display: none; }


/* Dots */
.nav_dots { gap: .5em; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/* Social */
.social {}
.social a { display: inline-block; width: 3.5em; padding: .25em; }
.social a :where(img,svg) { width: 100%; }
.social a svg path { transition: .25s ease; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SIDEBAR ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/*
 * Se presenti position sticky, ricordarsi di disattivare nel foundation l' "overflow: hidden;" del "main" - riga 360
 * Il valore "top" è indispensabile ed è l'offset dal top dello schermo se impostato
 */
.sticky { top: 15vh; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BREADCRUMBS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#breadcrumb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5em; }
#breadcrumb li { list-style: none; margin: 0; }
#breadcrumb .separator {}
#breadcrumb :where(a,span) { display: inline-block; min-width: fit-content; color: var(--white); }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ANIMAZIONE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.s1 .s1_title.trigger h1, .s1 .s1_title.trigger .h1 { opacity: 0; }
.s1 .s1_title.trigger.active h1, .s1 .s1_title.trigger.active .h1 { opacity: 1; }

.trigger h1, .trigger h2, .trigger h3, .trigger .h1, .trigger .h2, .trigger .h3 { opacity: 0; transform: translateY(2rem); transition: .75s ease; }
.trigger.active h1, .trigger.active h2, .trigger.active h3, .trigger.active .h1, .trigger.active .h2, .trigger.active .h3 { opacity: 1; transform: translateY(0); }


.trigger p:not(.pretitle) { opacity: 0; transform: translateY(2rem); transition: .75s ease .25s; }
.trigger.active p:not(.pretitle) { opacity: 1; transform: translateY(0); }
.trigger p.pretitle { opacity: 0; transform: translateY(2rem); transition: .25s ease .125s; }
.trigger.active p.pretitle { opacity: 1; transform: translateY(0); }







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


footer .grafica { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: auto; height: 100%; pointer-events: none; }


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.top_foot .foot_block { gap: var(--c2o); padding-right: 0; }
.top_foot h4 { color: var(--white); }

.foot_logo { 
	display: block; 
	--foot-logo-width: 150px;
	--foot-logo-min: 150;
	--foot-logo-max: 340;
	max-width: 340px;
}
.foot_logo :where(img, svg) { width: 100%; }
.foot_block hr { background-color: rgb(var(--white-rgb) / 50%); }


/* Foot Block */
.foot_block p { color: var(--white); }
.foot_block p a { font: inherit; }
.foot_block p a:hover { color: var(--light); }

.foot_block .link { font-size: 1.125rem; padding: 0; border: unset; background-color: transparent; margin-bottom: 1rem; }
.foot_block .link:hover { color: var(--light); }
.foot_block .link:hover path { fill: var(--light); }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#credits { border-top: 1px solid rgb(var(--white-rgb) / 50%); }
#credits p { font-size: .825em; line-height: 1.5; z-index: 1; }
#credits .resp_sep { display: none; }
#credits a { display: inline-block; font: inherit; color: inherit; }







/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACK TO TOP ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#back_top {
	display: none; z-index: 2; 
	bottom: .5em; right: .5em;
	--back-top-px: 40px;
	--back-top-min: 40;
	--back-top-max: 60;
	max-width: 60px; 
	padding: .25em; background-color: rgb(255 255 255 / 25%);
	cursor: pointer; transition: .25s ease;
}
#back_top :where(img, svg) { width: 100%; }
#back_top svg path { fill: var(--black); }








/**
 *
 *  ▄▀▀  █▀▀  ▄▀▀  ▀▀█▀▀  ▀  ▄▀▀▄  █▄ █  ▄▀▀ 
 *   ▀▄  █▀▀  █      █    █  █  █  █ ▀█   ▀▄ 
 *  ▀▀   ▀▀▀   ▀▀    ▀    ▀   ▀▀   ▀  ▀  ▀▀  - SECTIONS
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.s1 { overflow: hidden; }

.s1_title p { text-transform: uppercase; font-size: 1.25rem; font-weight: 400; }
.s1_title h1 { text-shadow: 0px 4px 16.8px rgba(0, 0, 0, 0.25); }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/








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


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.card_empty { padding: 2em 1.5em; }
.card_empty svg { width: 6em; }
.card_empty .text { margin-top: 1em; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/








/**
 *
 *  █  █  ▄▀▀▄  █▄ ▄█  █▀▀
 *  █▀▀█  █  █  █ █ █  █▀▀
 *  ▀  ▀   ▀▀   ▀   ▀  ▀▀▀ - HOMEPAGE
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.video_zoom { transform-origin: top center; }



/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.wrapper_why { border-top: 1px solid var(--black); }

.box_why { background-color: var(--white); box-shadow: 0px 4px 100.2px 0px rgba(0, 0, 0, 0.10); }

.box_why .left { gap: 1rem; padding: 2rem; }
.number { font-size: 4rem; font-weight: 600; }
.icon { width: auto; height: 3.5rem; }

.box_why .right { padding: 2rem; padding-top: 0 }





/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 4 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.gallery_column { display: grid; gap: .5rem; }
.gallery_column :where(.colonna_1, .colonna_2) { height: 100%; }

.gallery_column .flex { gap: .5rem; }

.gallery_column .sec_img + .sec_img { margin-top: .5rem; }
.gallery_column .sec_img picture { position: relative; }
.gallery_column .sec_img .w50 img { height: 33vh; }
.gallery_column .w50 { width: calc(50% - .25rem); }


.fresco { width: 100%; height: 100%; background-color: rgb(var(--blue-rgb) / 50%); opacity: 0; }
.fresco svg { width: 5rem; }
.fresco path { fill: var(--white); }

.fresco:hover { opacity: 1; }



/**
 *
 *  █▀▀▄  ▄▀▀▄  ▄▀▀▀   █▀▀  ▄▀▀
 *  █  █  █▀▀█  █  ▀▌  █▀▀   ▀▄
 *  █▀▀   ▀  ▀   ▀▀▀   ▀▀▀  ▀▀  - TEMPLATES _ PAGINE
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CHI SIAMO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/* Sec 2 */
.s2_page .grafica { position: absolute; top: 5%; left: 50%; transform: translate(-50%, 0%); width: 33%; pointer-events: none; }


/* Sec 3 */
.swiper-slide .anno h2 { transform-origin: bottom center; opacity: .5; transform: scale(.25); transition: .5s ease; color: var(--white); }
.swiper-slide .text { opacity: 0; transition: .5s ease; }

.fake_dots { position: relative; width: 100%; margin: 2.5rem 0; margin-left: calc(50% - 0.5rem); }
.fake_dots::before { content: ""; width: 100vw; height: 1px; background-color: #727272; position: absolute; left:0; top: 50%; z-index: -1; }
.fake_dots .dot { display: block; border-radius: 50%; background-color: var(--white); opacity: 1; width: 1rem; height: 1rem; position: relative; transition: .5s ease; }

.swiper-slide-active .anno h2 { opacity: 1; transform: scale(1); }
.swiper-slide-active .text { opacity: 1; }
.swiper-slide-active .fake_dots .dot { transform: scale(2); }


/* Sec 5 */
.wrapper_pilastri { border-bottom: 1px solid var(--dark); }
.card_pilastro { padding: 2rem; border-top: 1px solid var(--dark); }


/* Sec 6 */
.wrapper_gallery { gap: 1rem; }
.wrapper_gallery picture { min-width: 27%; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE ASSEMBLAGGIO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

.sec_processo:nth-of-type(even) .container { flex-direction: row-reverse; }




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/* Section 1 */

/* Section 2 */








/**
 *
 *  ▄▀▀▄  █▀▀▄  ▄▀▀▀  █  █  ▀  ▐▌ ▐▌  █▀▀
 *  █▀▀█  █▐█▀  █     █▀▀█  █   ▀▄▀   █▀▀
 *  ▀  ▀  ▀ ▀▀   ▀▀▀  ▀  ▀  ▀    ▀    ▀▀▀ - TEMPLATES _ ARCHIVIO
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

/* Search & Filter */

/* Terms Loop */

/* Posts Loop */
.s2_archive .grid { grid-template-columns: 1fr; grid-gap: 2em 1em; }

/* Custom pagination */
.pagination {}

/* Load More */




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/








/**
 *
 *  ▄▀▀  ▀  █▄ █  ▄▀▀▀   █     █▀▀
 *   ▀▄  █  █ ▀█  █  ▀▌  █  ▄  █▀▀
 *  ▀▀   ▀  ▀  ▀   ▀▀▀   ▀▀▀▀  ▀▀▀ - SINGLE
 *
 * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION RELATED ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/








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


/* WP-Form - Custom */
#form { border: 1px solid var(--dark); }

#form .wpforms-field label { color: var(--dark); font-size: 1rem; font-weight: 400; }
#form .wpforms-field :where(input, textarea, select) { background-color: transparent; border: 1px solid var(--dark); border-radius: 0; padding: 1rem; font-size: 1.25rem; color: var(--dark); }

#form .wpforms-field:not(.wpforms-field-checkbox) label { position: absolute; left: 0; top: 0; transform: translate(1rem, 100%); background-color: var(--white); padding: 0 5px; transition: .125s ease; }
#form .wpforms-field:not(.wpforms-field-checkbox).up label { transform: translate(1rem, -50%); }

#form .wpforms-field.wpforms-field-checkbox { margin-bottom: 1rem }
#form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { border-color: var(--dark); }
#form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"]:checked { background-color: var(--white); }
#form .wpforms-field.wpforms-field-checkbox li label { padding: ; color: var(--dark); }
#form .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--light); }


#form .wpforms-submit-container { display: flex; align-items: center; justify-content: flex-end; }
#form button[type=submit] {
	display: inline-flex; gap: .5rem; position: relative; width: fit-content;
    padding: .5em 2em; border: 1px solid var(--blue); border-radius: .25rem;
	font: inherit; font-weight: 600; font-size: 1.25rem; color: var(--white); background-color:  var(--blue);
	backdrop-filter: blur(.75rem); -webkit-backdrop-filter: blur(.75rem);
}
#form button[type=submit]:hover svg , #form button[type=submit]:focus svg , #form button[type=submit]:active svg { transform: scaleY(-1); }
#form button[type=submit]:hover, #form button[type=submit]:focus, #form button[type=submit]:active { background-color: rgb(var(--light-rgb) / 75%);  }


/* White */
#form.white { --dark: var(--white); }
#form.white .wpforms-field:not(.wpforms-field-checkbox) label { background-color: #1a2c57; }
#form.white button[type=submit] { border-color: var(--white); background-color: var(--white); color: var(--blue); }
#form.white button[type=submit]:hover { background-color: transparent; color: var(--white); }





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


/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/

#s1_grazie {}




/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/





/*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CSS EXTRA O MOD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/












/**
 * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
 *
 * RESPONSIVE
 *
 * Settare se necessario regole fluid per minmax di elementi specifici basandosi sulle seguenti regole:
 *	=>	ORIGINAL CALC			->	calc( 12px + (24 - 12) * ( (100vw - 360px) / (1920 - 360) ) )
 *	=>	CALC 1920px -> 360px	->	calc( 12px + (24 - 12) * ( (100vw - 360px) / 1560 ) )
 *	=>	CALC 1280px -> 360px	->	calc( 12px + (24 - 12) * ( (100vw - 360px) / 920 ) )
 *	=>	CALC 1024px -> 360px	->	calc( 12px + (24 - 12) * ( (100vw - 360px) / 664 ) )
 *
 * Da creare fluid dinamico con 2 step per i calc iniziali =   1920 -> 1024   1024 -> 360
 *
 * __________________________________________________________________________________________________________________________________________________________________________
 */




.head_logo { width: calc( var(--head-logo-width) + ( var(--head-logo-max) - var(--head-logo-min) ) * ( (100vw - 360px) / 1560 ) ); }

#scroll_btn { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 360px) / 1560 ) ); }

.foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 360px) / 1560 ) ); }
#back_top { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 360px) / 1560 ) ); }




/*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/
/* Logo */
/* Head Content */
/* Hamburger */
/* Nav Menu */
/* Darkmode Switch */


/*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/
/* Buttons */
/* Links */
/* Filters */
/* Sections 1 */
/* Breadcrumbs */
/* Scroll */
/* Components */
/* Cards */
/* Sidebar */
/* ... */


/*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/
/* Structure */
/* Credits */
/* Back Top */


/*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/
/* Section 1 */


/*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/
/* Card */
/* Card Empty */


/*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/
/* Sec 1 */
/* Sec 2 */
/* Sec [...] */


/*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/
/* Template ... */
/* Template ... */
/* Template ... */


/*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/
/* Sec 1 */
/* Sec 2 */
/* Sec ... */


/*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/
/* Sec 1 */
/* Sec 2 */
/* Sec ... */


/*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/


/*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/




/**
 *
 *  █▄ ▄█  ▄▀▀▄  █▀▀▄  ▀  █     █▀▀
 *  █ █ █  █  █  █▀▀█  █  █  ▄  █▀▀
 *  ▀   ▀   ▀▀   ▀▀▀   ▀  ▀▀▀▀  ▀▀▀ - MOBILE PORT | 601 -> 767
 * __________________________________________________________________________________________________________________________________________________________________________
 */

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

	
	/*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/

	/* Logo */

	/* Head Content */
	.head_wrapper { padding: 1.5em 2.5%; z-index: 2; }

	/* Hamburger */
	/* Nav Menu */


}






/**
 *
 *  ▀▀█▀▀  ▄▀▀▄  █▀▀▄  █     █▀▀  ▀▀█▀▀
 *    █    █▀▀█  █▀▀█  █  ▄  █▀▀    █
 *    ▀    ▀  ▀  ▀▀▀   ▀▀▀▀  ▀▀▀    ▀   - TABLET |  768 x 1024  ->  1023 x 1280
 * __________________________________________________________________________________________________________________________________________________________________________
 */

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

	/*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/
	/* Contents */

	/* Credits */
	#credits br { display: none; }
	#credits .resp_sep { display: inline-block; }



	/*∞∞∞∞∞∞ CHI SIAMO ∞∞∞∞∞∞*/
	/* Sec 4 */
	.card_pilastro { aspect-ratio: 1 / 1; }
	.card_pilastro:nth-of-type(odd) { border-right: 1px solid var(--dark); }

	/* Sec 7 */
	#form .wpforms-field.wpforms-field-checkbox { margin-bottom: 1rem }

}



/**
 *
 *  █▀▀▄  █▀▀  ▄▀▀  █ ▄▀  ▀▀█▀▀  ▄▀▀▄  █▀▀▄      ▄▀▀  █▄ ▄█  ▄▀▀▄  █    █ 
 *  █  █  █▀▀   ▀▄  █▀▄     █    █  █  █  █       ▀▄  █ █ █  █▀▀█  █ ▄  █ ▄ 
 *  ▀▀▀   ▀▀▀  ▀▀   ▀ ▀▀    ▀     ▀▀   █▀▀       ▀▀   ▀   ▀  ▀  ▀  ▀▀▀  ▀▀▀  - LAPTOP |  1024 x 768  ->  1280 x 720
 * __________________________________________________________________________________________________________________________________________________________________________
 */

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


	/*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/
	.head_wrapper .desktop { gap: 2.5em; }
	.head_wrapper .link_head { position: relative; color: var(--white); font-weight: 500; font-size: 1.125rem; }
	.link_head::after {
		content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; 
		width: 100%; height: 1px; background-color: var(--white); width: 0; transition: .25s ease;
	}

	.link_head:hover { transform: scale(1.1); }
	.link_head:hover::after { width: 100%; }
	



	/*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/
	/* Contents */
	.bottom_foot { margin-top: var(--c15v); }

	/* Credits */
	#credits a:hover, #credits a:active, #credits a:focus { opacity: 1; color: var(--light); }
	#credits #credits_studio:hover { color: #e74e0f; }

	/* Back Top */
	#back_top { opacity: 1; }




	/*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/
	/* Sec 3 */
	#s3_home .container { padding-left: var(--c5o); padding-right: var(--c5o); }
	#s3_home .container .p5lr { padding: 0; }

	.box_why { display: grid; grid-template-columns: 0.5fr 1fr; align-items: center; margin-top: var(--c7v); }
	.box_why .left { display: inline-block; padding: 3rem; }
	.box_why .left > div { width: 100%; }

	.number { font-size: 10rem }
	.icon { height: 7rem; }

	.box_why .right { width: 60%; padding: 3rem; position: relative; }
	.box_why .right::after { content: ""; width: 1px; height: calc(100% - 2rem); position: absolute; left: 0; top: 1rem; background-color: var(--black); }


	/* Sec 4 */
	.gallery_column { grid-template-columns: .75fr 1fr; }
	.gallery_column .sec_img .w50 img { height: 55vh; }

	.colonna_2 :where(.sec_img, picture) { height: 100%; }
	.colonna_2 .sec_img img { height: 100% !important; }
	.colonna_2 .sec_img:nth-of-type(1), .colonna_2 .sec_img:nth-of-type(2), .colonna_2 .sec_img:nth-of-type(3), .colonna_2 .sec_img:nth-of-type(4) { height: calc(100% / 3); }
	.colonna_2 .sec_img:nth-of-type(5) { height: calc(100% / 3); }





	/*∞∞∞∞∞∞ CHI SIAMO ∞∞∞∞∞∞*/
	/* Sec 2 */
	.nav_prev { left: calc(30% - 4em); }
	.nav_next { right: calc(30% - 4em); }


	/* Sec 3 */
	#s4_chisiamo :where(.colonna_1 img, .colonna_2 img) { height: 100%; }
	#s4_chisiamo .colonna_1 :where(.sec_img, picture) { height: 100%; }
	#s4_chisiamo .colonna_1 .sec_img:nth-of-type(1) { height: 55%; }
	#s4_chisiamo .colonna_1 .sec_img:nth-of-type(2), #s4_chisiamo .colonna_1 .sec_img:nth-of-type(3) { height: 45%; }
	#s4_chisiamo .colonna_2 .sec_img { height: 50%; }



	/* Sec 4 */
	.card_pilastro { aspect-ratio: unset; height: 25rem; box-flex: 1; flex: 1 0 0%; transition: all .5s ease, background-color .25s ease; }
	.card_pilastro:nth-of-type(2) { border-right: 1px solid var(--dark); }

	.card_pilastro .number { font-size: 5rem; transition: .25s ease; }
	.card_pilastro h2 { font-size: 2rem; max-width: 10ch; transition: .25s ease; }
	.card_pilastro .bott { transition: .125s ease; transform: translateY(50%); opacity: 0; }
	.card_pilastro .bott { transition: .25s ease; }
	
	.card_pilastro:hover { flex-grow: 1.5; }
	.card_pilastro:nth-of-type(odd):hover { background-color: var(--light); }
	.card_pilastro:nth-of-type(even):hover { background-color: var(--blue); }
	.card_pilastro:hover .bott { transform: translateY(0); opacity: 1; transition: .25s ease-in-out .25s; }
	.card_pilastro:hover :where(span, h2, p) { color: var(--white);  }



	/*∞∞∞∞∞∞ ASSEMBLAGGIO ∞∞∞∞∞∞*/
	/* Sec 3 
	#sec_2 .container { align-items: flex-start; padding-bottom: 0; }
	#sec_2 .filter { height: calc(100% - var(--c7v)); }

	#sec_5 .container { align-items: flex-end; padding-top: 0; }
	#sec_5 .filter { height: calc(100% - var(--c7v)); top: var(--c7v); }*/


}






/**
 *
 *  █     ▄▀▀▄  █▀▀▄  ▀█▀  ▄▀▀▄  █▀▀▄
 *  █  ▄  █▀▀█  █  █   █   █  █  █  █
 *  ▀▀▀▀  ▀  ▀  █▀▀    ▀    ▀▀   █▀▀  - LAPTOP |  1281 x 720  ->  1366 x 768
 * __________________________________________________________________________________________________________________________________________________________________________
 */

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

	/*∞∞∞∞∞∞ CHI SIAMO ∞∞∞∞∞∞*/
	/* Sec 4 */
	.card_pilastro { height: 33rem; }
	.card_pilastro .number { font-size: 7rem; }
	.card_pilastro h2 { font-size: 3rem; }
	.card_pilastro .bott { padding-right: 40% }
	.card_pilastro .bott p { font-size: 1.125rem; }

}






/**
 *
 *  █▀▀▄  █▀▀  ▄▀▀  █ ▄▀  ▀█▀  ▄▀▀▄  █▀▀▄
 *  █  █  █▀▀   ▀▄  █▀▄    █   █  █  █  █
 *  ▀▀▀   ▀▀▀  ▀▀   ▀ ▀▀   ▀    ▀▀   █▀▀  - LAPTOP |  1367 x 768  ->  1919 x 1080
 * __________________________________________________________________________________________________________________________________________________________________________
 */

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






/**
 *
 *  █  █  █▀▀▄  █▀▀  █▀▀▄
 *  █  █  █▀▀█  █▀▀  █▐█▀
 *   ▀▀   ▀▀▀   ▀▀▀  ▀ ▀▀ - ÜBER | 1921 -> ...
 * __________________________________________________________________________________________________________________________________________________________________________
 */

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






/**
 *
 *   ▄▀█   █ ▄▀
 *  █▄▄█▄  █▀▄
 *     █   ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ...
 * __________________________________________________________________________________________________________________________________________________________________________
 */

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