/* -------------------------------------------------- */
/* ------------- LAPTOP E TABLET GRANDI ------------- */
/* ------------- USARE XL- PER LE CLASSI ------------ */
/* -------------------------------------------------- */

@media (max-width: 1680px) {
	
	/* ------------------------- TEXT ------------------------- */
	
	/* ----- text - other ----- */
	.text-big-counter {
		font-size: 50px !important;
	}

}


/* -------------------------------------------------- */
/* ------------- LAPTOP E TABLET GRANDI ------------- */
/* ------------- USARE XL- PER LE CLASSI ------------ */
/* -------------------------------------------------- */

@media (max-width: 1440px) {
	
	/* ------------------------- VARIABLES ------------------------- */
	:root {
	
		--h4-size: 22px;
		
		--section-p: 50px;
		
	}
	
	
	/* ------------------------- STORIA ------------------------- */
	.row-tappa-storia .col-tappa-storia-anno {
		padding-right: 25px !important;
	}
	.row-tappa-storia-reverse .col-tappa-storia-anno {
		padding-left: 25px !important;
	}

}

/* -------------------------------------------------- */
/* ------------- TABLET E LAPTOP PICCOLI ------------ */
/* ------------- USARE LG- PER LE CLASSI ------------ */
/* -------------------------------------------------- */

@media (max-width: 1200px) {

	/* ------------------------- VARIABLES ------------------------- */
	:root {

		--h1-size: 45px;

		--h2-size: 35px;

		--h3-size: 25px;

		--h4-size: 20px;

		--text-size: 15px;

		--text-btn-size: 13px;
		--text-btn-letter-spacing: 1.3px;

		--text-header-size: 13px;

		--section-p: 35px;

	}


	/* ------------------------- BTN ------------------------- */

	/* ----- btn - general ----- */
	[class*="btn"] {
		--h-btn: 50px;
	}


	/* ------------------------- OBJECT ------------------------- */

	/* ----- spacing - gap ----- */
	.g-lg-5 { gap: 5px; }
	.g-lg-10 { gap: 10px; }
	.g-lg-15 { gap: 15px; }
	.g-lg-20 { gap: 20px; }
	.g-lg-25 { gap: 25px; }
	.g-lg-30 { gap: 30px; }
	.g-lg-50 { gap: 50px; }
	.g-lg-100 { gap: 100px; }

	/* ----- giuls ----- */
	.giuls-el {
		transform: rotate(-90deg) scale(0.9);
	}
	
	
	/* ------------------------- HEADER ------------------------- */

	/* ----- header - logo ----- */
	#header .header-inner .container #logo {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	/* ----- header - nav ----- */
	#header .header-inner .container #mainMenu nav {
		padding: 0 30px;
	}
	#header .header-inner .container #mainMenu nav > ul {
		column-gap: 20px;
	}
	#header .header-inner .container #mainMenu nav > ul li > a {
		padding: 8.5px 15px;
	}

	/* ----- header - sticky ----- */
	#header.sticky-active .header-inner .container .header-extras-header-sticky [class*="btn"] {
		--h-btn: 40px;
		padding: 5px 20px !important;
	}


	/* ------------------------- SUBHEADER ------------------------- */
	#subheader {
		--section-h: 450px;
	}


	/* ------------------------- FOOTER ------------------------- */

	/* ----- footer - content ----- */
	#footer .footer-content {
		padding: 50px 0;
	}
	
	
	/* ------------------------- STORIA ------------------------- */
	.row-tappa-storia .col-tappa-storia-anno {
		padding-right: 10px !important;
	}
	.row-tappa-storia-reverse .col-tappa-storia-anno {
		padding-left: 10px !important;
	}
	
	/* ------------------------- TRASPARENZA ------------------------- */
	.grid-counter-trasparenza {
		grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr;
	}
	.percentuale-grafico {
		flex-direction: column;
		gap: 0;
		align-items: flex-start !important;
	}

}

/* -------------------------------------------------- */
/* ------------- TABLET ORIZZONTALI ----------------- */
/* ------------- USARE MD- PER LE CLASSI ------------ */
/* -------------------------------------------------- */

@media (max-width: 1024px) {

	/* ------------------------- VARIABLES ------------------------- */
	:root {

		--h1-size: 40px;

		--h2-size: 30px;

		--h3-size: 20px;

		--h4-size: 17px;

	}
	
	/* ------------------------- TEXT ------------------------- */
	
	/* ----- text - other ----- */
	.text-big-counter {
		font-size: 40px !important;
	}


	/* ------------------------- HEADER ------------------------- */

	/* ----- header ----- */
	#header .header-inner [class^="container"] {
		align-items: flex-start;
	}
	#header .header-inner [class^="container"] > .header-extras {
		display: none;
	}

	/* ----- header - logo ----- */
	#header .header-inner [class^="container"] #logo {
		position: relative !important;
		float: none !important;
	}
	#header .header-inner [class^="container"] #mainMenu #logo img {
		padding-bottom: 0;
	}
	
	/* ----- header - menu trigger ----- */
	#header .header-inner [class^="container"] #mainMenu-trigger {
		height: 100%;
    max-height: calc(var(--header-h) - 9px);
		order: 3;
		float: none;
	}
	#header .header-inner [class^="container"] #mainMenu-trigger .lines-button .lines {
		top: unset !important;
	}
	#header .header-inner [class^="container"] #mainMenu-trigger .lines-button .lines,
	#header .header-inner [class^="container"] #mainMenu-trigger .lines-button .lines:before,
	#header .header-inner [class^="container"] #mainMenu-trigger .lines-button .lines:after {
		background-color: var(--amaranto);
	}
	#header .header-inner [class^="container"] #mainMenu-trigger .lines-button.toggle-active .lines,
	#header .header-inner [class^="container"] #mainMenu-trigger .lines-button.toggle-active .lines:before,
	#header .header-inner [class^="container"] #mainMenu-trigger .lines-button.toggle-active .lines:after {
		background-color: var(--amaranto);
	}

	/* ----- header - menu ----- */
	#header .header-inner [class^="container"] #mainMenu {
		position: relative;
		padding: 0 20px;
	}
	#header .header-inner [class^="container"] #mainMenu nav {
		position: absolute !important;
    top: calc(var(--header-h) - 9px);
    left: 0;
    height: 0;
    transform: none;
	}
	
	/* ----- header - menu open ----- */
	.mainMenu-open #header .header-inner {
    box-shadow: none;
    background-color: transparent !important;
  }
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu {
    max-height: calc(100vh - 18px);
    min-height: calc(100vh - 18px) !important;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav {
		height: auto;
		padding: 20px;
		background-color: white;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul {
		flex-direction: column;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul > li {
		height: auto;
		padding: 0;
		margin-bottom: 10px;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul > li.dropdown {
		flex-direction: column;
		align-items: flex-start;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul > li.dropdown:before {
		content: "\f078";
		font-family: "Font Awesome 7 Pro", emoji;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		color: var(--amaranto);
		opacity: 1;
		transform: rotate(0deg);
		transition: .3s all ease-in-out;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul > li:not(.hover-active):hover.dropdown:before {
		transform: rotate(180deg);
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul > li ul.dropdown-menu {
		justify-content: center;
		align-items: flex-start;
		height: 0 !important;
		max-height: unset !important;
		padding-top: 0;
		transition: .3s all ease-in-out;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul > li:not(.hover-active):hover ul.dropdown-menu {
		height: auto !important;
		padding-top: 10px;
		opacity: 1;
		z-index: 100;
	}
	#header .header-inner [class^="container"] #mainMenu nav > ul > li ul.dropdown-menu:before,
	#header .header-inner [class^="container"] #mainMenu nav > ul > li ul.dropdown-menu:after {
		content: none;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul > .header-extras-header-sticky {
		display: flex;
		height: auto;
	}
	.mainMenu-open #header .header-inner [class^="container"] #mainMenu nav > ul > .header-extras-header-sticky [class*="btn"] {
		--h-btn: 40px;
		padding: 5px 20px !important;
	}
	
	
	/* ------------------------- SLIDER ------------------------- */
	#slider .container {
		max-width: unset;
		padding: 100px var(--section-p) !important;
	}
	
	
	/* ------------------------- STORIA ------------------------- */
	.row-tappa-storia .col-tappa-storia-anno {
		padding-right: 0 !important;
	}
	.row-tappa-storia-reverse .col-tappa-storia-anno {
		padding-left: 0 !important;
	}
	
	/* ------------------------- TRASPARENZA ------------------------- */
	.grid-counter-trasparenza {
		grid-template-columns: 1fr 1fr 1fr 1.4fr 1.4fr;
		grid-gap: calc(var(--section-p) / 3);
	}
	
}

/* -------------------------------------------------- */
/* ------------- TABLET VERTICALI ------------------- */
/* ------------- USARE SM- PER LE CLASSI ------------ */
/* -------------------------------------------------- */

@media (max-width: 768px) {

	/* ------------------------- BACKGROUND ------------------------- */
	.bg-sm-center { background-position: center; }
	.bg-sm-center-top { background-position: center top; }
	.bg-sm-center-bottom { background-position: center bottom; }
	.bg-sm-left-center { background-position: left center; }
	.bg-sm-left-top { background-position: left top; }
	.bg-sm-left-bottom { background-position: left bottom; }
	.bg-sm-right-center { background-position: right center; }
	.bg-sm-right-top { background-position: right top; }
	.bg-sm-right-bottom { background-position: right bottom; }
	
	/* ------------------------- OBJECT ------------------------- */
	.flex-sm-col-reverse {
		flex-direction: column-reverse !important;
	}
	
	/* ------------------------- FOOTER ------------------------- */
	#ctaFooter {
		min-height: 500px;
	}

	
	/* ------------------------- STORIA ------------------------- */
	[class*="row-tappa-storia"] {
		--section-p: 70px;
		padding-top: 0;
	}
	[class*="row-tappa-storia"]:last-child {
		padding-bottom: 0;
	}
	[class*="row-tappa-storia"]:before,
	[class*="row-tappa-storia"]:after {
		left: calc((var(--section-p) / 2) - (var(--d) / 2));
	}
	[class*="row-tappa-storia"]:first-child:before,
	[class*="row-tappa-storia"]:last-child:before {
		height: 100%;
	}
	[class*="row-tappa-storia"]:after {
		--d: 17px;
		top: 0;
	}
	[class*="row-tappa-storia"] .col-tappa-storia-img { order: 3; }
	[class*="row-tappa-storia"] .col-tappa-storia-anno { order: 1; }
	[class*="row-tappa-storia"] .col-tappa-storia-testo { order: 2; }
	[class*="row-tappa-storia"]:not(:last-child) .col-tappa-storia-img {
		padding-bottom: 40px;
	}
	.row-tappa-storia .col-tappa-storia-anno {
		padding-right: var(--section-p) !important;
	}
	.row-tappa-storia-reverse .col-tappa-storia-anno {
		padding-left: var(--section-p) !important;
	}
	[class*="row-tappa-storia"] .col-tappa-storia-anno h6 {
		text-align: left !important;
		line-height: 1em !important;
	}
	
	
	/* ------------------------- TRASPARENZA ------------------------- */
	.grid-counter-trasparenza {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto auto;
		grid-gap: calc(var(--section-p) / 2);
	}
	.grid-counter-trasparenza > div:first-child { grid-column: 1 / 3; grid-row: 1 / 2; }
	.grid-counter-trasparenza > div:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 2; }
	.grid-counter-trasparenza > div:nth-child(3) { grid-column: 5 / 7; grid-row: 1 / 2; }
	.grid-counter-trasparenza > div:nth-child(4) { grid-column: 1 / 4; grid-row: 2 / 3; }
	.grid-counter-trasparenza > div:last-child { grid-column: 4 / 7; grid-row: 2 / 3; }

}

/* -------------------------------------------------- */
/* ------------- SMARTPHONE ------------------------- */
/* ------------- USARE XS- PER LE CLASSI ------------ */
/* -------------------------------------------------- */

@media (max-width: 576px) {

	/* ------------------------- VARIABLES ------------------------- */
	:root {
    
		--h1-size: 28px;
    
		--h2-size: 22px;
    
		--h3-size: 20px;
		
		--h6-size: 16px;
		
		--text-small-size: 13px;
		
		--text-footer-copyright-size: 11px;
		
		--section-p: 25px;

	}


	/* ------------------------- TEXT ------------------------- */

	/* ----- text - other ----- */
	.text-big-counter {
		font-size: 50px !important;
	}

	
	/* ------------------------- OBJECT ------------------------- */
	.flex-xs-col {
		flex-direction: column;
	}
	.flex-xs-col-reverse {
		flex-direction: column-reverse;
	}
	.w-xs-100 {
		width: 100% !important;
	}

	/* ----- spacing - gap ----- */
	.g-xs-5 { gap: 5px; }
	.g-xs-10 { gap: 10px; }
	.g-xs-15 { gap: 15px; }
	.g-xs-20 { gap: 20px; }
	.g-xs-25 { gap: 25px; }
	.g-xs-30 { gap: 30px; }
	.g-xs-50 { gap: 50px; }
	.g-xs-100 { gap: 100px; }

	/* ----- giuls ----- */
	.giuls-el {
		top: calc(var(--header-h) + 30px);
		padding: 10px 25px;
		transform: rotate(-90deg) scale(0.8);
	}


	/* ------------------------- FOOTER ------------------------- */
	#footer .footer-content .group-link-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
		width: 100%;
	}
	#footer .footer-content .group-link-footer .titolo-link-footer {
		width: auto;
		height: auto;
	}
	#footer .footer-content .group-link-footer .titolo-link-footer h4 {
		position: relative;
		transform: none;
	}


	/* ------------------------- INCLUDE ------------------------- */

	/* ----- include - fasi ----- */
	.grid-fasi {
		grid-template-columns: auto;
	}


	/* ------------------------- STORIA ------------------------- */
	[class*="row-tappa-storia"] {
    --section-p: 40px;
  }
	[class*="row-tappa-storia"] .carousel.carousel-storia .flickity-button { transform: scale(0.75); }
	[class*="row-tappa-storia"] .carousel.carousel-storia .flickity-button.previous { left: 2.5px !important; }
	[class*="row-tappa-storia"] .carousel.carousel-storia .flickity-button.next { right: 2.5px !important; }
	
	
	/* ------------------------- TRASPARENZA ------------------------- */
	.grid-counter-trasparenza {
		grid-template-columns: auto;
		grid-gap: 30px;
	}
	.grid-counter-trasparenza > div {
  	grid-column: 1 / 2 !important;
  	grid-row: auto !important;
  }
	.link-documenti > i {
		font-size: 35px;
	}
	
	
	/* ------------------------- imageGroup ------------------------- */

	/* ----- carousel ----- */
	#imageGroup {
		position: relative;
		display: block;
		height: 100vw !important;
		overflow-x: hidden;
	}
	#imageGroup [id^="imgGallery"] {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100vw);
		height: calc(100vw);
		background-color: white;
		opacity: 0;
		visibility: hidden;
		z-index: 100;
	}
	#imageGroup [id^="imgGallery"].gallery-go-left,
	#imageGroup [id^="imgGallery"].gallery-go-right,
	#imageGroup [id^="imgGallery"].actual {
		opacity: 1;
		visibility: visible;
		transition: all 0.2s ease-in-out;
	}
	#imageGroup [id^="imgGallery"].gallery-go-left {
		transform: translateX(-100vw);
	}
	#imageGroup [id^="imgGallery"].gallery-go-right {
		transform: translateX(100vw);
	}
	#imageGroup [id^="imgGallery"].actual {
		background-color: white;
		transform: translateX(0) !important;
		z-index: 110 !important;
	}
	#imageGroup [id^="imgGallery"] img {
		width: auto !important;
		max-width: calc(100vw) !important;
		height: auto !important;
		max-height: calc(100vw) !important;
		border-radius: 0;
	}
	#imageGroup .grid-img-gallery-control {
		position: absolute;
		top: 50%;
    display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 0;
		padding: 0 10px;
		z-index: 150;
	}
	#imageGroup .grid-img-gallery-control i {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px;
		height: 30px;
		color: white;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		transition: all 0.3s ease-in-out;
	}
	#imageGroup .grid-img-gallery-control i:hover {
		color: var(--amaranto);
		background-color: white;
	}

}