/**
 * Stili generali dei box
 * -- */
div.box {
	margin-bottom: 2rem;
}

main .box.box-type-grid {
    margin-bottom: 2rem;
}

main .page-col {
	margin-bottom: 2rem;
}

/**
 * HEAD 
 * -- */
div.box .box-head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
}

/**
 * HEAD LABELS
 * -- */
div.box .box-head .box-head-label {}
div.box .box-head .box-head-label .head {
	font-size: 1.73rem;
	color: var(--color-main);
	text-transform: uppercase;
	display: block;
	font-family: var(--font-alternative);
	font-weight: bold;
}
div.box .box-head .box-head-label .subhead {
	font-size: 1.3rem;
	color: var(--color-darkgrey);
	text-transform: inherit;
	display: block;	
	font-family: var(--font-alternative);
	font-weight: normal;
}

/**
 * HEAD ACTIONS
 * -- */

div.box .box-head .box-head-action {
	position: relative;
	min-width: 50%;
	text-align: right;
	font-size: 1.25rem;
	line-height: 1.25rem;
	color: var(--color-black);
}
div.box .box-head .box-head-action > * {
	position: absolute;
	bottom: 0;
	width: inherit;
	padding: 0;
	right: 0;
}

/**
 * HEAD ACTION CAROUSEL
 * -- */
div.box .box-head .box-head-action .box-carousel-action {
	color: var(--color-black);
}

div.box .box-head .box-head-action .box-carousel-action button {
	cursor: pointer;
	transition: all 0.5s ease-out;
}

div.box .box-head .box-head-action .box-carousel-action button:hover {
	color: var(--color-darkgrey);
	transition: all 0.5s ease-out;
}

div.owl-dots {
	display: none;
}

/**
 * HEAD ACTION LINK
 * -- */
div.box .box-head .box-head-action .box-head-action-link {
	font-family: var(--font-alternative);
	font-size: 0.9rem;
}

div.box .box-head .box-head-action .box-head-action-link a:link,
div.box .box-head .box-head-action .box-head-action-link a:visited {
	color: var(--color-black);
}

div.box .box-head .box-head-action .box-head-action-link a:hover,
div.box .box-head .box-head-action .box-head-action-link a:active {
	color: var(--color-darkgrey);
}

/**
 * Questo stile è di norma applicato ad ogni box delle homepage
 * e crea un effetto bottone con animazione sull'immagine
 * -- */
div.box article.box-withtext {
	cursor: pointer;
}

div.box article.box-withtext figure {
	overflow: hidden;
}

div.box article.box-withtext figure img {
	transition: transform .75s ease;
}

div.box article.box-withtext:hover figure img {
	transform: scale(1.2);
	transition: transform .75s ease;
}


div.box .box-head .box-head-action {
    position: relative;
    min-width: 20%;
    text-align: right;
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--color-black);
}


@media (max-width: 40rem) {
	div.box .box-head {
		display: flex;
		flex-direction: column;
		margin-bottom: 1rem;
	}

	div.box .box-head {
		position: relative;
	}		

	div.box .box-head .box-head-label {
		min-width: 100%;
	}

	div.box .box-head .box-head-action {
		position: relative;
    min-width: 100%;
    text-align: left;
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--color-black);
	}


div.box .box-head .box-head-action .box-head-action-link {
    font-family: var(--font-alternative);
    font-size: 0.9rem;
	
}
div.box .box-head .box-head-action > * {
    position: relative;
    bottom: 0px;
    width: inherit;
    padding: 0;
    left: 0;
	margin-top: 0.5rem;
}
}	

/**div.grid-container div.page-col {
	margin-bottom: 4rem;
}

div.box {
	margin-bottom: 0;
}

div.blockgrid-row div.box {
	margin-bottom: 2rem;
}

div.blockgrid-row {
	margin-bottom: -2rem;
}

div.box div.owl-dots {
	display: none;
}

/**
 * Ora i box non hanno margine, tranne quelli in blockgrid. Quindi su smartphone sono attaccati verticalmente.
 * --* /


/*Classi helper per i titoli:
gestiscono i margin in caso di uso misto di grid/carousel e cols */

/*assegna il margin-top: da utilizzare dopo l'inserimento di cols miste senza grid
div.box .box-head.space_top {
	margin-top:2rem;
}

/*annulla il margin-bottom, da utllizzare quando si inserisce il titolo manuamente sopra cols e grid
div.box .box-head.space_bottom {
	margin-bottom:0rem;
}