<link href="https://fonts.googleapis.com/css?family=Ultra|Alfa+Slab+One|Merriweather:400,400i|Source+Serif+Pro:400,700" rel="stylesheet">



<div class="container">
  <div class="grid tc">
    <div class="folio bb">
      <p class="b f6 sans-serif pb2 tl">Storia di copertina</p>
    </div>
    <div class="page-title tc">
      <h1 class="alfa title-headline tracked-tight">Americanistica</h1>
      <h2 class="merriweather tracked-tight title-deck">Numeri, fatti, primati degli Stati Uniti</h2>
      <p class="ttu f7 b tracked lh-title">A cura di Sara Deganello e davide mottes, illustrazioni di marta signori</p>
    </div>
    <div class="section-1 tc bt"><div>
      <h1 class="alfa tracked-tight section-1-headline">Buone festivà</h1>
      <h2 class="section-1-deck merriweather lh-title measure-narrow center">Gli apputamenti del calendario che scandiscono l'idenità a stelle e strisce generano anche un indotto economico di rilievo</h2></div>
    </div>
    <div class="hero-image bt bb">
      <img src="https://preview.ibb.co/j1LFDa/Screen_Shot_2017_09_04_at_2_22_12_PM.png">
    </div>
    <div class="section-2 relative">
      <div class="section-2-label absolute w-100">
        <p class="ttu tracked f7 b bg-white dib ph2">4 luglio</p>
      </div>
      <h2 class="alfa tracked-tight section-2-headline">Fest dell'Indipendenza</h2>
      <p class="merriweather section-2-subhead i">Independence Day</p>
      <div class="section-2-subsection-1 br">
        <img src="https://image.ibb.co/mjNHRv/Screen_Shot_2017_09_04_at_3_07_20_PM.png" style="width: 110px;">
        <h3 class="stat b">3,6</h3>
        <p class="ttu b tracked f7 pb2">milioni di dollari</p>
        <p class="pb3">È il valore delle importazioni di bandiere Usa nel 2014; vengono soprattutto dalla Cina (3,5 milioni). 1,8 milioni è invece il valore di quelle esportate: soprattutto in Turchia (ne ha comprate per 673mil adollari).</p>
        <h3 class="stat b">59</h3>
        <p class="ttu b tracked f7 pb2">luoghi</p>
        <p>Si chiamano Liberty negli Usa.</p>
      </div>
      <div class="section-2-subsection-2">
        <h3 class="stat b">2,5</h3>
        <p class="ttu b tracked f7 pb2">milioni</p>
        <p class="pb3">La popolazione Usa nel luglio 1776. Oggi gli statunitensi sono 320 milioni.</p>
        <img src="https://image.ibb.co/e3hsRv/Screen_Shot_2017_09_04_at_3_32_43_PM.png" style="width: 110px">
        <h3 class="stat b">247</h3>
        <p class="ttu b tracked f7 pb2">milioni di dollari</p>
        <p class="pb3">È il valore dl fuochi artificali importati dalla Cina nel 2014. Gli Usa ne hanno esportati per 12 milioni di dollari; 5.4 verso Israele, il migliore acquirente.</p>
      </div>
    </div>
    <div class="section-3 relative">
      <div class="section-3-label absolute w-100">
        <p class="ttu tracked f7 b bg-white dib ph2">31 ottobre</p>
      </div>
      <h2 class="alfa tracked-tight section-3-headline">Halloween</h2>
      <div class="section-3-subhead">
        <img src="https://image.ibb.co/hSj3zF/Screen_Shot_2017_09_04_at_3_39_14_PM.png" style="width: 110px;">
      </div>
      <div class="section-3-subsection-1 br">
        <h3 class="stat b">50k</h3>
        <p class="ttu b tracked f7 pb2">acri coltivati</p>
        <p class="pb3">Sono i campi di zucche negli Usa nel 2013. I maggiori Stati produttori: Illinois, California, Ohio, Michigan.</p>
      </div>
      <div class="section-3-subsection-2">
        <h3 class="stat b">41,2</h3>
        <p class="ttu b tracked f7 pb2">milioni</p>
        <p class="pb3">Sono i ragazzi americani tra i 5 e i 14 anni: tutto potenziali trick or treaters.</p>
      </div>
    </div>
    <div class="section-4 relative">
      <div class="section-4-label absolute w-100">
        <p class="ttu tracked f7 b bg-white dib ph2">26 novembre</p>
      </div>
      <h2 class="alfa tracked-tight section-4-headline">Festa del ringraziamento</h2>
      <p class="merriweather section-2-subhead i">Thanksgiving Day</p>
      <div class="section-4-subsection-1 br">
        <h3 class="stat b">152</h3>
        <p class="ttu b tracked f7 pb2">anni fa</p>
        <p class="pb3">Il presidente Lincoln proclamò festa nazionale l'ultimo giovedì di novembre. Successivamente Roosevelt la spostò al quarto per stimolare le vendite natalizie (il goirno dopo è il Black Friday).</p>
      </div>
      <div class="section-4-subsection-2">
        <h3 class="stat b">42</h3>
        <p class="ttu b tracked f7 pb2">luoghi</p>
        <p class="pb3">Si chiamano Plymouth negli Usa. È il posto in cui sbarcarono i padri pellegrini nel 1620 e in cul nel 1621 si festeggiò il primo giorno del ringrazimento tra coloni inglesi e indian Wampanoag.</p>
      </div>
      <div class="section-4-subsection-3 pa3">
        <p class="s4-ss3-s1 ttu s4-box b tracked lh-title">soprattutto, i doni della terra</p>
        <p class="s4-ss3-s2 s4-box i merriweather lh-title pv2 measure center">Nel menu tradizionale possiamo trovare: tacchino al forno, purè, salsa di cranberry, potato dolci, torta di zucca</p>
        <div class="sans-serif s4-box s4-ss3-s3 lh-title">
          <p class="b">242 milioni</p>
          <p class="">E il numero di tacchini alleviati negli Usa nel 2014 (il 5% in meno rispetto al 2012). Maggiori stati produti Minnesota (45 milioni), North Carolina (35), Arkansas (29), Indiana (17).</p>
        </div>
        <div class="sans-serif s4-box s4-ss3-s4 lh-title">
          <p class="b">19 milioni di dolari</p>
          <p class="pb3">E il numero delle importazioni di tacchini viv net 2013, il 99.9% viene del Canada.</p>
          <p class="b">1,088,622 tonneliate</p>
          <p class="">E la produzione cli patate dolci negli Usa nel 2014.</p>
        </div>
        <div class="sans-serif s4-box s4-ss3-s5 lh-title">
          <p class="b">2388,275 tonneliate</p>
          <p class="">È la produzione di cranberry (mirtillo rosso americano) nel 2014. Il Wisconsin è il maggior producttore con 244,-37 tonnellate, seguito dal Massachusetts con 95,254.</p>
        </div>
        <p class="sans-serif s4-box s4-ss3-s6 lh-title pv2 b">Ci sono 20 luoghi negli Usa che si chiamano Turkey - B. invece. Cranberry.</p>
      </div>
    </div>
    <div class="section-5 relative">
      <div class="section-5-label absolute w-100">
        <p class="ttu tracked f7 b bg-white dib ph2">25 dicembre</p>
      </div>
      <h2 class="alfa tracked-tight section-5-headline">Natale</h2>
      <div class="measure-narrow center section-5-subsection-1">
        <h3 class="stat b">24,4</h3>
        <p class="ttu b tracked f7 pb2">miliardi di dollari</p>
        <p class="pb3 measure center">È il valore dei consumi Usa a dicembre (il 40% più di novembre). Il 19% è speso nelle gioiellerie.</p>
      </div>
      <div class=" center section-5-subsection-2">
        <img src="https://image.ibb.co/c0owKF/Screen_Shot_2017_09_04_at_4_29_50_PM.png" style="height: 150px;">
        <h3 class="stat b">137,5</h3>
        <p class="ttu b tracked f7 pb2">milioni di dollari</p>
        <p class="pb3 measure-narrow center">È il valore delle importazioni Usa di alberi natalizi sintetici dalla Cina.</p>
      </div>
      <div class="center section-5-subsection-3">
        <img src="https://image.ibb.co/hsKsta/Screen_Shot_2017_09_04_at_4_30_02_PM.png" style="height: 150px;">
        <h3 class="stat b">1931</h3>
        <p class="ttu b tracked f7 pb2">l'anno di santa</p>
        <p class="pb3 measure-narrow center">Haddon Sundblom inizia a disengare Babbo Natale per la Coca-Cola.</p>
      </div>
    </div>
  </div>
</div>

body {
  font-family: 'Source Serif Pro', serif;
  font-size: 14px;
}

.s4-box {
  font-size: 9px;
}

.alfa {
  font-family: 'Alfa Slab One', serif;
}

.merriweather {
  font-family: 'Merriweather', serif;
}

.container {
  padding: 30px;
}

.folio {
}

.stat {
  font-size: 44px;
  font-family: 'ultra', serif;
  letter-spacing: -2px;
  padding: 15px 0;
}

.page-title {
  padding: 30px 0;
}

.title-headline {
  font-size: 40px;
  margin: 0;
  padding: 0 0 15px 0;
}

.title-deck {
  font-size: 18px;
  margin: 0;
  padding: 0 0 20px 0;
}

.section-1 {
}

.section-1-headline {
  font-size: 58px;
  margin: 0 auto;
  padding: 30px 0;
}

.section-1-deck {
  font-size: 22px;
  padding-bottom: 30px;
}

.hero-image {
  padding: 30px 0;
}

.section-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #000;
}

.section-2-label {
  top: -8px;
}

.section-2-headline {
  grid-column: span 2;
  font-size: 30px;
  padding: 30px 0 15px 0;
}

.section-2-subhead {
  grid-column: span 2;
}

.section-2-subsection-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  margin: 30px 0;
  padding-right: 30px;
}

.section-2-subsection-2 {
  padding-left: 30px;
  margin: 30px 0;
}

.section-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #000;
}

.section-3-label {
  top: -8px;
}

.section-3-headline {
  grid-column: span 2;
  font-size: 30px;
  padding: 30px 0 15px 0;
}

.section-3-subhead {
  grid-column: span 2;
}

.section-3-subsection-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  margin: 30px 0;
  padding-right: 30px;
}

.section-3-subsection-2 {
  padding-left: 30px;
  margin: 30px 0;
}

.section-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #000;
}

.section-4-label {
  top: -8px;
}

.section-4-headline {
  grid-column: span 2;
  font-size: 30px;
  padding: 30px 0 15px 0;
}

.section-4-subhead {
  grid-column: span 2;
}

.section-4-subsection-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  margin: 30px 0;
  padding-right: 30px;
}

.section-4-subsection-2 {
  padding-left: 30px;
  margin: 30px 0;
}

.section-4-subsection-3 {
  grid-column: span 2;
  border: 1px solid #000;
  margin: 15px 0 30px 0;
  
}

.s4-ss3-s3 {
  padding-bottom: 15px;
}

.s4-ss3-s4 {
  padding-bottom: 15px;
}

.section-5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.section-5-label {
  top: -8px;
}

.section-5-headline {
  grid-column: span 2;
  font-size: 30px;
  padding: 30px 0 15px 0;
}

.section-5-subhead {
  grid-column: span 2;
}

.section-5-subsection-1 {
  grid-column: span 2;
}

.section-5-subsection-2 {
  margin: 30px 0;
  padding-right: 30px;
  border-right: 1px solid #000;
}

.section-5-subsection-3 {
  padding-left: 30px;
  margin: 30px 0;
}

@media (min-width: 600px) {
  
  .page-title {
    padding: 60px 0;
  }
  .title-headline {
    font-size: 65px;
  }
  
  .title-deck {
    font-size: 24px;
  }
  
  .section-1-deck {
    font-size: 18px;
    max-width: 300px;
  }
  
  .section-4-subsection-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

  }
  
  .s4-ss3-s1 {
    grid-column: span 3;
  }
  
  .s4-ss3-s2 {
    grid-column: span 3;
    padding-bottom: 25px;
  }
  
  .s4-ss3-s3 {
    padding-right: 15px;
  }
  
  .s4-ss3-s4 {
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    padding: 0 15px;
  }
  
  .s4-ss3-s5 {
    padding-left: 15px;
    
  }
  
  .s4-ss3-s6 {
    grid-column: span 3;
    padding-top: 25px;
    
  }
  
  .section-5-subsection-2 {
    border-right: 1px solid #000;
  }
}

@media (min-width: 800px) {
  
  .container {
    padding: 50px;
  }
  
  body {
    font-size: 13px;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  
  .folio {
    grid-column: span 4;
  }
  
  .page-title{
    grid-column: span 4;
    padding: 90px 0;
  }
  
  .section-1 {
    grid-column: span 2;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    padding-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .hero-image {
    grid-column: span 2;
    padding-left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .section-2 {
    grid-column: span 3;
    padding-right: 15px;
  }
  
  .section-3 {
    grid-column: span 1;
    display: block;
    border-left: 1px solid #000;
    padding-left: 15px;
  }
  
  .section-3-label {
    left: 2px;
    right: 2px;
  }
  .section-3-subsection-1{
    border: none;
    padding: 0;
    margin: 0;
  }
  
  .section-3-subsection-2 {
    padding: 0;
    margin: 0;
  }
  
  .section-4 {
    grid-column: span 2;
    padding-right: 15px;
    border-bottom: none;
  }
  
  .section-5 {
    grid-column: span 2;
    display: block;
    border-left: 1px solid #000;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
  }
  
  .section-5-subsection-2 {
    padding: 0;
    margin: auto;
    border: none;
    
  }
  
  .section-5-subsection-3 {
    padding: 0;
    margin: auto;
  }
}

@media (min-width: 1100px) {
  .container {
    max-width: 1040px;
    margin: auto;
  }
  
  .section-2-headline,
  .section-3-headline,
  .section-4-headline,
  .section-5-headline {
    font-size: 20px;
    padding: 10px 0 20 0;
  }
 
  .grid {
    grid-template-columns: repeat(7, 14.2857%);
    grid-template-rows: repeat(35, 40px);
  }
  
  .folio {
    grid-column: span 7;
    grid-row-start: 1;
  }
  
  .page-title {
    padding: 100px 0;
    grid-area: 2 / 1 / 11 / 8;
  }
  .title-headline {
    font-size: 90px;
  }
  
  .section-1 {
    border-top: none;
    grid-area: 11 / 1 / 19/ 3;
    border-right: none;
  }
  
  .section-1-deck {
    font-size: 15px;
  }
  
  .hero-image {
    border-top: none;
    padding: 30px;
    grid-area: 11 / 3 / 21 / 7;
    border-left: 1px solid #000;
  }
  
  .section-2 {
    grid-area: 19 / 1 / 36 / 3;
    padding-right: 15px;
    border-bottom: none;
  }

  .section-2-subsection-1 {
    padding-right: 15px;
  }
  
  .section-2-subsection-2 {
    padding-left: 15px;
  }
  
  .section-3 {
    grid-area: 21 / 3 / 36 / 4;
    padding: 0 15px;
    border-bottom: none;
    border-right: 1px solid #000;
    
  }
  
  .section-4 {
    grid-area: 21 / 4 / 36 / 7;
    padding-left: 15px;
  }
  
  .section-4-subsection-1 {
    
    padding-right: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    
  }
  .section-4-subsection-2 {
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .section-4-subsection-3 {

      padding: 10px;
    
  }
  
  .s4-ss3-s3 {
    padding-right: 5px;
  }
  
   .s4-ss3-s4 {
    padding: 0 5px;
  }
  
  .s4-ss3-s5 {
    padding-left: 5px;
  }
  
  .section-5 {
    grid-area: 11 / 7 / 36 / 8;
  }
  
  .section-5-label {
    right: 2px;
    left: 2px;
    top: 0;
  }
  
}