@media (min-width: 1921px) {
	
	/* ------------------------- VARIABILI ------------------------- */
	:root {

		/* ----- altre variabili ----- */
		--contenitore-w: 1920px;

	}
	
}

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

@media (max-width: 1400px) {
	
	/* ------------------------- BTN ------------------------- */

	/* ----- btn - general ----- */
	[class*="btn-large"] {
		padding-right: 35px !important;
		padding-left: 35px !important;
	}

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

	/* ----- general ----- */
	.contenitore {
		max-width: calc(var(--contenitore-w) - var(--sidebar-w) - (var(--container-spacing-oriz) * 2));
	}
	
	/* ------------------------- SEZ. ETICA ------------------------- */

	/* ----- sez. etica - i nostri valori ----- */
	.grid-icon-valori {
		grid-template-columns: repeat(4, 125px);
	}
	
	
	/* ------------------------- SEZ. LAVORO ------------------------- */

	/* ----- sez. lavoro - ferie e permessi individuali ----- */
	.grid-dati-ferie {
		grid-template-columns: repeat(3, 3fr);
		grid-gap: 20px;
	}
	.grid-dati-ferie .dato-ferie {
		padding-right: 20px;
		padding-left: 20px;
	}

}

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

@media (max-width: 1200px) {
	
	/* ------------------------- VARIABILI ------------------------- */
	:root {

		/* ----- altre variabili ----- */
		--sidebar-w: 275px;
		--sidebar-p-rl: 30px;
		
		--section-pt: 50px;
		--section-pb: 100px;
	
		--container-spacing-oriz: 45px;

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

	/* ----- btn - general ----- */
	[class*="btn-large"] {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
	
}

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

@media (max-width: 1024px) {
	
	/* ------------------------- VARIABILI ------------------------- */
	:root {
	
		/* ----- font ----- */
		--h1-size: 50px;
		--h2-size: 50px;

		/* ----- altre variabili ----- */
		--header-h: 80px;
		
	  --sidebar-w: 40vw;
	
		--container-spacing-oriz: 60px;

	}

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

	/* ----- general ----- */
	.content-wrapper {
		padding-top: var(--header-h);
	}
	.contenitore {
		max-width: calc(var(--contenitore-w) - (var(--container-spacing-oriz) * 2));
	}
	
	/* ----- divider ----- */
	.divider {
		margin-top: 30px;
		margin-bottom: 30px;
	}

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

	.header {
		position: fixed;
		display: flex;
    justify-content: flex-start;
    align-items: center;
		width: 100vw;
		height: var(--header-h);
		padding: 5px var(--container-spacing-oriz);
		z-index: 100;
	}
	.header img {
		height: 50px;
	}
	
	/* ------------------------- SIDEBAR ------------------------- */
	
	.show-sidebar {
		--el-d: 50px;
		position: fixed;
		top: calc((var(--header-h) - var(--el-d)) / 2);
		right: var(--container-spacing-oriz);
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--el-d);
		height:var(--el-d);
		color: white;
		background-color: var(--blu-scuro);
		border-radius: 5px;
		z-index: 1000;
		transition: all .2s linear;
	}
	.show-sidebar:before {
		font-family: 'Font Awesome 7 Pro';
	}
	.show-sidebar.chiuso:before {
		content: '\f0c9';
	}
	.show-sidebar:not(.chiuso):before {
		content: '\e59b';
	}
	.show-sidebar:after {
		content: '';
		position: absolute;
		display: block;
		z-index: 998;
	}
	.show-sidebar.chiuso:after {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.show-sidebar:not(.chiuso):after {
		top: -5px;
		left: -5px;
		width: calc(100vw - var(--sidebar-w));
		height: 100vh;
	}

	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		transition: transform .2s linear;
	}
	.show-sidebar.chiuso ~ .sidebar {
		transform: translateX(calc(var(--sidebar-w) * -1));
	}
	.sidebar-logo img {
		max-width: 200px;
	}
	
}

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

@media (max-width: 768px) {
	
	/* ------------------------- VARIABILI ------------------------- */
	:root {
		
		/* ----- font ----- */
		--text-footer-copyright-size: 10px;

		/* ----- altre variabili ----- */
	  --sidebar-w: 50vw;
	
		--container-spacing-oriz: 60px;

	}
	
	/* ------------------------- SEZ. LAVORO ------------------------- */

	/* ----- sez. lavoro - ferie e permessi individuali ----- */
	.grid-dati-ferie {
		grid-template-columns: auto;
    justify-content: center;
	}
	.grid-dati-ferie .dato-ferie {
		min-width: 350px;
	}
	
}

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

@media (max-width: 576px) {
	
	
	/* ------------------------- VARIABILI ------------------------- */
	:root {
		
		/* ----- font ----- */
		--text-footer-copyright-size: 9px;
		
		/* ----- font ----- */
		--h1-size: 35px;
		--h2-size: 35px;
		--h3-size: 25px;

		/* ----- altre variabili ----- */
		--header-h: 70px;
		
		--sidebar-w: 100vw;
		
    --section-pb: 50px;
		
		--container-spacing-oriz: 15px;
	
	}
	
	
	/* ------------------------- SIDEBAR ------------------------- */
	
	.show-sidebar {
		--el-d: 40px;
	}
	.show-sidebar:not(.chiuso) {
		background-color: var(--blu-scuro);
	}
	.show-sidebar:after {
		content: none;
	}
	
	
	/* ------------------------- SEZ. ETICA ------------------------- */

	/* ----- sez. etica - i nostri valori ----- */
	.grid-icon-valori {
		grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
	}
	
}