/* ===========================================================================
   nstrap.css - ricostruzione locale del framework "Nstrap" di NXN
   originale: http://www.nxn.it/nstrap/layout.css (server CDN dismesso)
   Copre solo le classi effettivamente usate nei template duebarradue.com.
   Breakpoint:
     pc  >= 1280px  (desktop)
     tl  <  1280px  (tablet landscape)
     tp  <  1024px  (tablet portrait)
     sl  <  768px   (smartphone landscape)
     sc  <  480px   (smartphone portrait)
   =========================================================================== */

/* --- reset minimale --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; border: 0; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* --- griglia: 12 colonne, gutter via n_c_dist --- */
[class*="n_c"] { display: block; float: left; width: 100%; box-sizing: border-box; }

.n_c_dist { padding: 10px; }

/* helper centrato */
.n_cento { display: block; margin: 0 auto; }
.n_m0a   { margin: 0 auto; }

/* clearfix (n_clear, n_clear_pc, n_clear_tl, ecc.) */
.n_clear,
.n_clear_pc,
.n_clear_tl,
.n_clear_tp,
.n_clear_sl,
.n_clear_sc { clear: both; display: block; width: 100%; height: 0; line-height: 0; font-size: 0; }

/* anche le classi "clear" usate nei form */
.clear { clear: both; }

/* --- colonne PC (>= 1280px è il default; sopra 1280 valgono solo pc) --- */
.n_c1_pc  { width: 8.3333%; }
.n_c2_pc  { width: 16.6667%; }
.n_c3_pc  { width: 25%; }
.n_c4_pc  { width: 33.3333%; }
.n_c5_pc  { width: 41.6667%; }
.n_c6_pc  { width: 50%; }
.n_c7_pc  { width: 58.3333%; }
.n_c8_pc  { width: 66.6667%; }
.n_c9_pc  { width: 75%; }
.n_c10_pc { width: 83.3333%; }
.n_c11_pc { width: 91.6667%; }
.n_c12_pc { width: 100%; }

/* --- TL: tablet landscape (< 1280px) --- */
@media only screen and (max-width: 1279px) {
  .n_c1_tl  { width: 8.3333%; }
  .n_c2_tl  { width: 16.6667%; }
  .n_c3_tl  { width: 25%; }
  .n_c4_tl  { width: 33.3333%; }
  .n_c5_tl  { width: 41.6667%; }
  .n_c6_tl  { width: 50%; }
  .n_c7_tl  { width: 58.3333%; }
  .n_c8_tl  { width: 66.6667%; }
  .n_c9_tl  { width: 75%; }
  .n_c10_tl { width: 83.3333%; }
  .n_c11_tl { width: 91.6667%; }
  .n_c12_tl { width: 100%; }
  .n_clear_tl { clear: both; display: block; width: 100%; height: 0; }
}

/* --- TP: tablet portrait (< 1024px) --- */
@media only screen and (max-width: 1023px) {
  .n_c1_tp  { width: 8.3333%; }
  .n_c2_tp  { width: 16.6667%; }
  .n_c3_tp  { width: 25%; }
  .n_c4_tp  { width: 33.3333%; }
  .n_c5_tp  { width: 41.6667%; }
  .n_c6_tp  { width: 50%; }
  .n_c7_tp  { width: 58.3333%; }
  .n_c8_tp  { width: 66.6667%; }
  .n_c9_tp  { width: 75%; }
  .n_c10_tp { width: 83.3333%; }
  .n_c11_tp { width: 91.6667%; }
  .n_c12_tp { width: 100%; }
  .n_clear_tp { clear: both; display: block; width: 100%; height: 0; }
}

/* --- SL: smartphone landscape (< 768px) --- */
@media only screen and (max-width: 767px) {
  .n_c1_sl  { width: 8.3333%; }
  .n_c2_sl  { width: 16.6667%; }
  .n_c3_sl  { width: 25%; }
  .n_c4_sl  { width: 33.3333%; }
  .n_c5_sl  { width: 41.6667%; }
  .n_c6_sl  { width: 50%; }
  .n_c7_sl  { width: 58.3333%; }
  .n_c8_sl  { width: 66.6667%; }
  .n_c9_sl  { width: 75%; }
  .n_c10_sl { width: 83.3333%; }
  .n_c11_sl { width: 91.6667%; }
  .n_c12_sl { width: 100%; }
  .n_clear_sl { clear: both; display: block; width: 100%; height: 0; }
}

/* --- SC: smartphone portrait (< 480px) --- */
@media only screen and (max-width: 479px) {
  .n_c1_sc  { width: 8.3333%; }
  .n_c2_sc  { width: 16.6667%; }
  .n_c3_sc  { width: 25%; }
  .n_c4_sc  { width: 33.3333%; }
  .n_c5_sc  { width: 41.6667%; }
  .n_c6_sc  { width: 50%; }
  .n_c7_sc  { width: 58.3333%; }
  .n_c8_sc  { width: 66.6667%; }
  .n_c9_sc  { width: 75%; }
  .n_c10_sc { width: 83.3333%; }
  .n_c11_sc { width: 91.6667%; }
  .n_c12_sc { width: 100%; }
  .n_clear_sc { clear: both; display: block; width: 100%; height: 0; }
}

/* --- tabella di layout (n_table*) --- */
.n_table       { display: table; width: 100%; }
.n_table_row   { display: table-row; }
.n_table_cell  { display: table-cell; vertical-align: middle; }

/* --- table-row layout per i checkbox del form (n_tab_*) --- */
.n_tab_tb { display: table; width: 100%; margin: 6px 0; }
.n_tab_ro { display: table-row; }
.n_tab_ck { display: table-cell; vertical-align: top; width: 30px; padding: 6px 0; }
.n_tab_lb { display: table-cell; vertical-align: top; padding: 6px 0; }

/* --- form base (.n_form) --- */
.n_form { display: block; width: 100%; }
.n_form label {
  display: block;
  font-size: 0.95em;
  margin: 12px 0 4px;
  color: #444;
}
.n_form label span { color: #c33; }
.n_form input[type="text"],
.n_form input[type="email"],
.n_form input[type="tel"],
.n_form input[type="password"],
.n_form textarea,
.n_form select {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 1em;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
}
.n_form textarea { min-height: 120px; resize: vertical; }
.n_form input:focus,
.n_form textarea:focus,
.n_form select:focus { outline: none; border-color: #239D90; }

.n_form input[type="submit"] {
  display: inline-block;
  margin: 14px 0;
  padding: 10px 28px;
  font-family: inherit;
  font-size: 1em;
  color: #fff;
  background: #239D90;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.n_form input[type="submit"]:hover { background: #1c8276; }

.n_obbligatorio { display: inline-block; margin-left: 12px; font-size: 0.85em; color: #888; }

/* --- antispam (immagine captcha) --- */
.n_antispam img { display: block; }

/* --- social link container --- */
.n_sn {
  display: inline-block;
  margin: 0 6px;
}
.n_sn img { display: block; height: 28px; width: auto; }

/* --- helper "responsive flag" (debug, originalmente in p_dimensioni.php) --- */
#n_fascia_responsive { display: none; }
.n_responsive_pc, .n_responsive_tl, .n_responsive_tp, .n_responsive_sl, .n_responsive_sc { display: none; }
@media only screen and (min-width: 1280px)                           { .n_responsive_pc { display: inline; } }
@media only screen and (max-width: 1279px) and (min-width: 1024px)   { .n_responsive_tl { display: inline; } }
@media only screen and (max-width: 1023px) and (min-width: 768px)    { .n_responsive_tp { display: inline; } }
@media only screen and (max-width: 767px)  and (min-width: 480px)    { .n_responsive_sl { display: inline; } }
@media only screen and (max-width: 479px)                            { .n_responsive_sc { display: inline; } }