﻿
/*#||###############################################*/
/*# STILI MULTISCHERMO #############################*/
/*#||###############################################*/
/*Proprietà Flexbox*/
.d_flx { display: flex; justify-content: space-evenly; align-content: space-evenly; align-items: center; flex-direction: row; flex-wrap: wrap; }
    /*Flussi Flexbox*/
    .d_flx.column { flex-direction: column; }
    .d_flx.reverse { flex-wrap: wrap-reverse; }
    /*###########*/
    /*Giustificazioni Flexbox*/
    .d_flx.j_between { justify-content: space-between; }
    .d_flx.j_start { justify-content: flex-start; }
    .d_flx.j_end { justify-content: flex-end; }
    .d_flx.j_center { justify-content: center; }
    .d_flx.j_around { justify-content: space-around; }
    /*Allineamenti Flexbox*/
    .d_flx.ai_start { align-items: flex-start; }
    .d_flx.ai_end { align-items: flex-end; }
    .d_flx.ai_stretch { align-items: stretch; }
    .d_flx.ai_center { align-items: center; }
    .d_flx.ai_unset { align-items: unset; }
    /*Distribuzione Contenuti Flexbox*/
    .d_flx.ac_start { align-content: flex-start; }
    .d_flx.ac_end { align-content: flex-end; }
    .d_flx.ac_center { align-content: center; }
    .d_flx.ac_stretch { align-content: stretch; }
    .d_flx.ac_between { align-content: space-between; }
    /*Elementi Flexbox*/
    .flx_itm { padding: 1.2rem; }
        .flx_itm img, .flx_itm video { width: 100%; }
    .w1 { flex: 1 1 100%; }
    .w3-4 { flex: 0 1 calc(100%/4*3); }
    .w2 { flex: 0 1 calc(100%/2); }
    .w2-3 { flex: 0 1 calc(100%/3*2); }
    .w3 { flex: 0 1 calc(100%/3); }
    .w4 { flex: 0 1 calc(100%/4); }
    .w5 { flex: 0 1 calc(100%/5); }
    .w6 { flex: 0 1 calc(100%/6); }
    .w7 { flex: 0 1 calc(100%/7); }
    .w8 { flex: 0 1 calc(100%/8); }
    .w9 { flex: 0 1 calc(100%/9); }
    .w10 { flex: 0 1 calc(100%/10); }
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi DESKTOP --------*/
@media (min-width: 769px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi PORTABLE -------*/
@media (max-width: 768px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*#||###############################################*/
/*- STILI ESCLUSIVI GRANDI SCHERMI -----------------*/
@media (min-width: 1281px) {
    /*##############################################*/
}
/*#||###############################################*/
/*- STILI SCHERMI MEDI --------------------------*/
@media (min-width: 1025px) and (max-width: 1280px) {
    /*#||###############################################*/
}

/*#||###############################################*/
/*- STILI PICCOLI SCHERMI --------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
    /*#||###############################################*/
}

/*#||###############################################*/
/*- STILI TABLET -----------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {
    /*Elementi Flexbox*/
    .w1 { flex: 1 1 100%; }
    .w2 { flex: 0 1 calc(100%/2); }
    .w3 { flex: 0 1 calc(100%/3); }
    .w3-4 { flex: 0 1 calc(100%/2); }
    .w2-3 { flex: 0 1 calc(100%/2); }
    .w4 { flex: 0 1 calc(100%/2); }
    .w5 { flex: 0 1 calc(100%/3); /*Originale 18%;*/ }
    .w6 { flex: 0 1 calc(100%/3); /*Originale 14.6%*/ }
    .w7 { flex: 0 1 calc(100%/3); /*Originale 12.28%*/ }
    .w8 { flex: 0 1 calc(100%/4); /*Originale 10.5%*/ }
    .w9 { flex: 0 1 calc(100%/3); /*Originale 9.1%*/ }
    .w10 { flex: 0 1 calc(100%/5); /*Originale 8%*/ }
    /**/
}

/*#||###############################################*/
/*- STILI MOBILE -----------------------------------*/
@media (max-width: 480px) {
    /*Elementi Flexbox*/
    .w1, .w2, .w3, .w4, .w3-4, .w2-3 { flex: 1 1 100%; }
    .w5, .w6, .w7, .w8 { flex: 0 1 calc(100%/2); }
    .w9, .w10 { flex: 0 1 calc(100%/3); }
    /**/
}
