/* CSS Document */
/* VARIABILI */
:root{
	--sfondopagina: white;
	--sfondocontainer: orange;
	--colorescollbars: white;
	--coloresfondoscrollbars: grey;
	--bluvulca: #3432ff;
	--aranciovulca: #ff6600;
/* SI USA COME SEGUE...
	background-color: var(--colore1);
*/
}

/*
html, body {
	height: 100%;
}
*/

body{
  font-family: "Outfit", sans-serif;
  /*
	font-optical-sizing: auto;
  font-style: normal;
	*/
	background-color: var(--sfondopagina);
	overflow-y: scroll;
	scrollbar-color: var(--colorescollbars) var(--coloresfondoscrollbars); /* auto | dark | light | <color>; */
	margin-top: 60px; /* per evitare che la navbar si sovrapponga al contenuto */
}
#page-content {
  flex: 1 0 auto;
}

/* barra fondo pagina ? */
#sticky-footer {
  flex-shrink: none;
}
.carattere{
  font-family: "Outfit", sans-serif;
}
/* MODIFICHE AL BOOTSTRAP ORIGINALE */
.carousel-indicators {bottom: -20px;}
/* MODIFICHE AL BOOTSTRAP ORIGINALE */

.text-tabella{font-size: 12px;}


/* CAROUSEL */

.carousel-item picture,
.carousel-item img {
  height: 500px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .carousel-item picture,
  .carousel-item img {
    height: 500px;
  }
}





.bg-navbar-vulca{background-color: var(--aranciovulca);}
.bg-footer-vulca{
	background-color: var(--bluvulca);
  height: 60px; /* smartphone e tablet */
}
@media (min-width: 992px) {
  .bg-footer-vulca {
    height: 40px; /* per desktop (lg e oltre) */
  }
}
.bg_titolo_modal_articolo{background: linear-gradient(180deg, var(--aranciovulca) 0%, #ffffff 100%);}


.pillbutton{
	font-style: normal;
}
.pillbutton .btn{
	border-radius: 25px; /* Ad esempio, un valore più alto */
}


/* Aggiungi questo CSS al tuo file CSS principale o in un blocco <style> nell'head */

.card-img-container {
    /* Imposta un'altezza fissa per l'area dell'immagine */
    height: 200px; /* Puoi regolare questo valore in base alle tue esigenze */
    overflow: hidden; /* Nasconde qualsiasi parte dell'immagine che esce dal contenitore */
    background-color: #f8f9fa; /* Colore di sfondo se l'immagine non copre tutto */
}

.card-img-container img {
    /* L'immagine si adatta al suo contenitore */
    max-height: 100%;
    max-width: 100%;
    /* Mantiene le proporzioni e si assicura che l'intera immagine sia visibile */
    object-fit: contain;
    /* Centra l'immagine all'interno del contenitore se non riempie tutto */
    display: block;
    margin: auto;
}

/* Opzionale: Se vuoi che il card-body abbia un'altezza minima per il testo */
/* .card-body {
    min-height: 120px; /* Esempio: altezza minima per il testo */
/* } */





.dropdown-item {
  padding-top: 2px;
  padding-bottom: 2px;
  /* font-size: 0.9rem; /* opzionale: riduce anche il testo */
  line-height: 1.2;   /* opzionale: compatta ulteriormente */
}


















/* PERSONALI */
.pad0{padding:0px}
.pad5{padding:5px}
.pad10{padding:10px}
.pad15{padding:15px}
.pad20{padding:20px}
.pad25{padding:25px}
.pad30{padding:30px}
.pad35{padding:35px}
.pad40{padding:40px}
.pad45{padding:45px}
.pad50{padding:50px}

.h100pc{min-height: 100%; margin: auto; }
.h100pc2{height: 100%; margin: auto; }
.hfooter{min-height: 250px;}

a.menu:hover {color: red; text-decoration: underline;}
a.menu:link {color: yellow;}
a.menu:visited{color: yellow;}
a.menu:active{color: red;}


.bg1{background-color:#eee !important}
.bgcards{background-color:#ddd !important}

/* IMMAGINI */
/* Extra Small devices (landscape phones, fino a 575px) */
@media (max-width: 575px) {
	.imgslide1{
		background-image: url('images/carousel/ARMADIO DA ESTERNO-500x300.jpg');
		background-color: red;
		height: 500px;
	}
	.imgslide2{
		background-image: url('images/carousel/ARMADIO METALLICO 02-500x300.jpg');
		background-color: red;
		height: 500px;
	}
	.imgslide3{
		background-image: url('images/carousel/ARMADIO SPOGLIATOIO SU PIEDI CON COPRIPIEDINO-500x300.jpg');
		background-color: red;
		height: 500px;
	}
	.imgslide4{
		background-image: url('images/carousel/CASELLARIO SU ZOCCOLO-500x300.jpg');
		background-color: red;
		height: 500px;
	}
}
/* Small devices (landscape phones, da 576px in su) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, da 768px in su) la NAVBAR appare qui */
@media (min-width: 768px) {
}
/* Large devices (desktops, da 992px in su) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, da 1200px in su) */
@media (min-width: 1200px) {
	.imgslide1{
		background-image: url('images/carousel/ARMADIO DA ESTERNO.jpg');
		background-color: red;
		height: 500px;
	}
	.imgslide2{
		background-image: url('images/carousel/ARMADIO METALLICO 02.jpg');
		background-color: red;
		height: 500px;
	}
	.imgslide3{
		background-image: url('images/carousel/ARMADIO SPOGLIATOIO SU PIEDI CON COPRIPIEDINO.jpg');
		background-color: red;
		height: 500px;
	}
	.imgslide4{
		background-image: url('images/carousel/CASELLARIO SU ZOCCOLO.jpg');
		background-color: red;
		height: 500px;
	}
}


.left{text-align:left}
.right{text-align:right}
.center{text-align:center}
.centerdiv{text-align:center;	margin: auto;}

a.menutop:link, a.menutop:visited{font-size: 12px; color: yellow; text-decoration: none; letter-spacing: 2px;}
a.menutop:hover, a.menutop:active{font-size: 12px; color: red; letter-spacing: 2px;}

a.menutop2:link, a.menutop2:visited{font-size: 12px; color: rgb(0, 0, 0); text-decoration: none; letter-spacing: 2px;}
a.menutop2:hover, a.menutop2:active{font-size: 12px; color: rgb(255, 255, 255); letter-spacing: 2px;}

a.footer-link:link, a.footer-link:visited, a.footer-link:hover, a.footer-link:active{color: rgb(255, 255, 255); text-decoration: none;}