/* ------------------------------------------ */


/* ------------ LAYOUT A COLONNE ------------ */


/* ------------------------------------------ */


/*
singola %
singola vw
due colonne con float
due colonne con inline-block
colonne con flex
- colonna flessibile
- due colonne
- tre colonne
- quattro colonne
*/


/* ------------singola  % ---------------- */

.singola-colonna {
	width: 100%;
	position: relative;
}

.sing-col-var-20pc {
	width: 20%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.sing-col-var-80pc {
	width: 80%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.sing-col-var-90pc {
	width: 90%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}


/* ---------- singola  vw ---------------- */

.sing-col-var-20vw {
	width: 20vw;
	margin: 0 auto;
	position: relative;
}

.sing-col-var-25vw {
	width: 25vw;
	margin: 0 auto;
	position: relative;
}

.sing-col-var-30vw {
	width: 30vw;
	margin: 0 auto;
	position: relative;
}


/* 1300 > 50 - 1000 > 70 800 > 80 */

.sing-col-var-40vw {
	width: 40vw;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.sing-col-var-50vw {
	width: 50vw;
	margin: 0 auto;
	position: relative;
}

.sing-col-var-60vw {
	width: 60vw;
	margin: 0 auto;
	position: relative;
}

.sing-col-var-70vw {
	width: 70vw;
	margin: 0 auto;
	position: relative;
}

.sing-col-var-80vw {
	width: 80vw;
	margin: 0 auto;
	position: relative;
}

.sing-col-var-90vw {
	width: 90vw;
	margin: 0 auto;
	position: relative;
}


/* ------------------- DUE COLONNE CON FLOAT ------------------ */


/* Create two unequal columns that floats next to each other */

.due-colonne-base {
	width: 100%;
}

/* ---- doppia classe ---- */
.due-colonne-base .sx {
	width: 50%;
	float: left;
}

.due-colonne-base .dx {
	width: 50%;
	float: left;
}

/* ---- classe unica ---- */
.due-colonne-base .due-col-50 {
	width: 50%;
	float: left;
}



.disassato .due-colonne-base {
	width: 100%;
}

.disassato .due-colonne-base .sx {
	width: 50%;
	float: left;
}

.disassato .due-colonne-base .dx {
	width: 50%;
	float: left;
	margin-top: 80px;
}

.due-colonne-i {
	/*float: left;*/
	/*    height: 300px; /* Should be removed. Only for demonstration */
	width: 100%;
	overflow: hidden;
}

.due-colonne-i-overfl-vis {
	/*float: left;*/
	/*    height: 300px; /* Should be removed. Only for demonstration */
	width: 100%;
	overflow: visible;
}

.due-colonne-i .larga-xmin-i {
	width: 76%;
	float: left;
}

.due-colonne-i .piccola-xmin-i {
	width: 23%;
	float: left;
}

.due-colonne-i .larga-70-i {
	width: 70%;
	float: left;
}

.due-colonne-i .larga-66-i {
	width: 66%;
	float: left;
}


.due-colonne-i .piccola-30-i {
	width: 30%;
	float: left;
}


.due-colonne-i-overfl-vis .larga-min-i,
.due-colonne-i .larga-min-i {
	width: 66%;
	float: left;
}

.due-colonne-i-overfl-vis .piccola-min-i,
.due-colonne-i .piccola-min-i {
	width: 33%;
	float: left;
}

.due-colonne-i .larga-i {
	width: 56%;
	float: left;
}

.due-colonne-i .piccola-i {
	width: 43%;
	float: left;
}

.due-colonne-i .larga-ii {
	width: 50%;
	float: left;
}

.due-colonne-i .piccola-ii {
	width: 43%;
	float: left;
}

.due-colonne-i .larga-iii {
	width: 40%;
	float: left;
}

.due-colonne-i .piccola-iii {
	width: 30%;
	float: left;
}


/* test sticky */

.due-colonne-i .sticky-spacer {
	width: 30%!important;
}

.due-colonne-i .piccola-min-sticky {
	width: auto;
	float: left;
	overflow: hidden;
}


/* ----------- DUE COLONNE CON INLINE-BLOCK -------------- */


/*  obsoloete da cancellare */

.due-colonne {
	width: 100%;
}

.due-colonne .larga {
	width: 66%;
	display: inline-block;
}

.due-colonne .piccola {
	width: 33%;
	display: inline-block;
}


/*  da usare */

.due-colonne-inline {
	width: 100%;
}

.due-colonne-inline .larga {
	width: 66%;
	display: inline-block;
}

.due-colonne-inline .piccola {
	width: 33%;
	display: inline-block;
}

.due-colonne-inline .due-col-50 {
	width: 49%;
	display: inline-block;
	vertical-align: top;
}




/* ---------------- COLONNe CON FLEX  --------------- */


/*---------- COLONNA FLESSIBILE FLEX ----------------*/

.colonne-giustificate-flessibili {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	position: relative;
	justify-content: center;
	flex-wrap: wrap;
}

.colonne-giustificate-flessibili .due-50 {
	max-width: 50%;
	min-width: 50%;
}

.colonne-giustificate-flessibili .tre-33 {
	max-width: 33%;
	min-width: 33%;
}

.colonne-giustificate-flessibili .tre-33-no-min {
	max-width: 33%;
	
}
.colonne-giustificate-flessibili .cinque-20 {
	max-width: 20%;
	min-width: 180px;
	margin: 0 auto;
}


/* --------------- DUE COLONNE CON FLEX -------------- */


/*
/* ipotesi di sviluppo: si può sviluppare un genitore tipo .colonna-flex e tanti figli a seconda del numero di colonne: -colonna-flex .due-i, .colonna-flex .due-ii 
/* .colonna-flex .tre-i, .colonna-flex .tre-ii,  .colonna-flex .tre-ii, etc.
/* l'uso di due colonne con flex permette di adattare le altre colonne all'altezza della colonna più lunga, altrimenti usare le due colonne semplici di sopra
*/

.due-colonne-flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	position: relative;
}

.due-colonne-flex .due-23 {
/*	flex: 1 1 23%;*/
	max-width: 28%;
}

.due-colonne-flex .due-76 {
/*	flex: 1 1 76%;*/
	max-width: 72%;
}

.due-colonne-flex .due-33 {
	flex: 1 1 33%;
	max-width: 33%;
}

.due-colonne-flex .due-66 {
	flex: 1 1 66%;
	max-width: 66%;
}

.due-colonne-flex-ii {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	position: relative;
	flex-flow: row wrap;
}

.due-colonne-flex-ii .pari {
	/*width: 50%;*/
	flex: 1 1 50%;
}

.due-colonne-flex-ii .pari-2 {
	/*width: 50%;*/
	flex: 1 1 50%;
}


/*  obsoloete da cancellare */

.due--colonne {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	position: relative;
	flex-flow: row wrap;
}

.due--colonne .pari {
	width: 50%;
	flex: 1 1 50%;
}

.due--colonne .pari-2 {
	width: 50%;
	flex: 1 1 50%;
}


/* --------------- TRE COLONNE CON FLEX -------------- */

.tre-colonne {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	position: relative;
	  -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tre-colonne .tre-i {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre-colonne .tre-ii {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre-colonne .tre-iii {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre-colonne .tre-i-mw33 {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre-colonne .tre-ii-mw33 {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre-colonne .tre-iii-mw33 {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre-colonne .tre-doppia {
	flex: 1 1 66%;
	/*max-width: 66%;*/
}



.tre-colonne-giustificate {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	position: relative;
	justify-content: space-between;
}

.tre-colonne-giustificate .tre-33 {
	max-width: 33%;
	    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 33%;
    -ms-flex: 0 1 33%;
    flex: 0 1 33%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.tre-colonne-giustificate .tre-3x {
	width: 32.6%;
	max-width: 32.6%;
	
}

.tre-colonne-giustificate-flessibili {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	position: relative;
	justify-content: center;
}

.tre-colonne-giustificate-flessibili .tre-33 {
	max-width: 33%;
}


/* tre colonne 50 25 25*/

.tre-colonne .tre-50 {
	max-width: 50%;
	align-self: center;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
}

.tre-colonne .tre-25 {
	max-width: 25%;
	align-self: center;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
}

/* tre colonne 50 25 25 allineate in basso */

.tre-colonne .tre-50-basso {
	max-width: 50%;
	    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
}

.tre-colonne .tre-25-basso {
	max-width: 25%;
	    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
}
.tre-colonne .tre-25-alto {
	max-width: 25%;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
}


/* tre colonne 38 38 24*/

.tre-colonne .tre-24 {
flex: 1 1 24%;
max-width: 24%

}
.tre-colonne .tre-38 {
flex: 1 1 38%;
max-width: 38%

}



/* tre colonne allineate a destra*/

.tre-colonne-rx {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.tre-colonne-rx-ele:nth-child(1) {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 1 22%;
	-ms-flex: 0 1 22%;
	flex: 0 1 22%;
	-webkit-align-self: auto;
	-ms-flex-item-align: auto;
	align-self: auto;
	max-width: 22%;
}

.tre-colonne-rx-ele:nth-child(2) {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 1 22%;
	-ms-flex: 0 1 22%;
	flex: 0 1 22%;
	-webkit-align-self: auto;
	-ms-flex-item-align: auto;
	align-self: auto;
	max-width: 22%;
}

.tre-colonne-rx-ele:nth-child(3) {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 1 22%;
	-ms-flex: 0 1 22%;
	flex: 0 1 22%;
	-webkit-align-self: auto;
	-ms-flex-item-align: auto;
	align-self: auto;
	max-width: 22%;
}


/* da cancellare */

.tre--colonne {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	position: relative;
}

.tre--colonne .tipo-i .tre--i {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre--colonne .tipo-i .tre--ii {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre--colonne .tipo-i tre--iii {
	flex: 1 1 33%;
	max-width: 33%;
}

.tre--colonne .tre--i {
	flex: 1 1 33%;
	/*max-width: 33%;*/
}

.tre--colonne .tre--ii {
	flex: 1 1 33%;
	/*max-width: 33%;*/
}

.tre--colonne .tre--iii {
	flex: 1 1 33%;
	/*max-width: 33%;*/
}

.tre--colonne .tre--doppia {
	flex: 1 1 66%;
	/*max-width: 66%;*/
}

.tre--colonne-giustificate {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	position: relative;
	justify-content: space-between;
}


/* quattro colonne */

.quattro--colonne {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	position: relative;
	flex-flow: row wrap;
}

.quattro--colonne .quattro--i {
	flex: 1 1 25%
}

.quattro--colonne .quattro--ii {
	flex: 1 1 25%
}

.quattro--colonne .quattro--iii {
	flex: 1 1 25%
}

.quattro--colonne .quattro--iv {
	flex: 1 1 25%
}

.quattro--colonne .quattro--doppia {
	flex: 1 1 50%
}

.quattro-colonne-giustificate {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	position: relative;
	justify-content: space-between;
}

.quattro-colonne-giustificate .quattro-25 {
	max-width: 25%;
	display: flex; /*aggiunto display flex successivamente - 12 10 2020. Considerare effetti su modelli già creati */
}
.quattro-colonne-giustificate .quattro-50 {
	max-width: 50%;
}