body {
  font-family: Raleway, sans-serif;
  color: #222;
}
#ateliers ul {
  list-style-type: disc;
  margin-left: 12px;
}
.footer {
  display: none;
}
.jour, .section {
    margin: 0 0 20px 0;
}
.wrapper {
  min-height: 100vh;
}
.content {
  position: sticky;
  overflow: auto;
  top: 250px;
  height: 70vh;
  margin-bottom: 20px;
}
.nom {
  font-family: 'Comfortaa', sans-serif;
  font-size: 2em;
  line-height: 120%;
  font-weight: bold;
  margin: 0 0 20px 0;
  padding: 0;
}
.texte a {
  color: #014984;
  text-decoration: none;
}
.vernissage {
  font-weight: bold;
  margin-bottom: 0;
}
.secondaire {
  font-size: 0.56em;
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  color: #666;
}
figure {
  padding: 0;
  margin: 0;
}
#signatures .nom {
  margin-bottom: 8px;
}
#signatures .texte {
  margin-bottom: 8px;
}
#signatures .lastlink {
  margin-bottom: 32px;
}
@media (min-width: 250px) and (max-width: 998px) {
  .sub-smart .prog-titre a {
     text-decoration: none;
     font-size: 1.6em;
     font-family: 'Raleway', sans-serif;
     color: #222;
  }
  .sub-smart .prog-logo {
    width: 30%;
  }
  .sub-smart .prog-texte {
    padding: 12px 0 20px 0;
    text-align: left;
    font-size: 1.2em;
  }
  .content {
    display: none;
   /* display: grid;
    width: 90%;
    margin: 12px auto 0 auto;
    font-size: 0.76em;
    letter-spacing: 0.03em;
    line-height: 1.72em;
    grid-template-columns: 1;
    grid-template-rows: auto; */
  }
  #exposition .sous-menu-smartphone, #ateliers .sous-menu-smartphone, #rencontres .sous-menu-smartphone, #signatures .sous-menu-smartphone, #spectacles .sous-menu-smartphone, #cinema .sous-menu-smartphone {
    display: none;
  }
  #exposition .content, #ateliers .content, #rencontres .content, #signatures .content, #spectacles .content, #cinema .content {
    display: block;
    width: 90%;
    margin: 12px auto 0 auto;
    font-size: 0.76em;
    letter-spacing: 0.03em;
    line-height: 1.72em;
    grid-template-columns: 1;
    grid-template-rows: auto; 
    height: auto;
  }

  #exposition .content img, #ateliers .content img, #rencontres .content img, #signatures .content img, #spectacles .content img, #cinema .content img {
    width:100%;
    height: auto;
    margin-left: 0;
  }
 
  #exposition .content li, #ateliers .content li, #rencontres .content li, #signatures .content li, #spectacles .content li, #cinema .content li {
    list-style-type: none;
  }
  #exposition .content ul, #ateliers .content ul, #rencontres .content ul, #signatures .content ul, #spectacles .content ul, #cinema .content ul {
    padding-left: 0;
  }
  #exposition .content .jour, #ateliers .content .jour, #rencontres .content .jour, #signatures .content .jour, #spectacles .content .jour, #cinema .content .jour {
    margin: 0 0 20px 0;
    padding: 0;
    color: red;
    text-transform: uppercase;
    font-size: 1.6em;
    font-family: 'Raleway', sans-serif;
  }
  #exposition .content figure, #ateliers .content figure, #rencontres .content figure, #signatures .content figure, #spectacles .content figure, #cinema .content figure {
    margin: 0 0 20px 0;
  }
  #exposition .content figure .legende, #ateliers .content figure .legende, #rencontres .content figure .legende, #signatures .content figure .legende, #spectacles .content figure .legende, #cinema .content figure .legende {
    padding: 0;
    margin: 0;
  }
  .texte {
    margin: 0 0 24px 0;
  }
  .vernissage {
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 0;
    margin: 0 0 24px 0;
  }
  .separateur {
    width: 3%;
    padding: 0;
    margin: 0 0 36px 0;
    border-bottom: 2px solid black;
  }
}

@media (min-width: 840px) and (max-width: 998px) {
}

@media (min-width: 998px) {
  .sub-smart {
    display: none;
  }
  .content {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto;
    max-width: 954px;
    margin: 0 auto;
    font-size: 0.86em;
    letter-spacing: 0.03em;
    line-height: 1.6em;
  }
  .section {
    grid-column: 3 / span 8;
    margin: 0 0 20px 0;
    padding: 0;
    color: red;
    text-transform: uppercase;
    font-size: 1.6em;
    font-family: 'Raleway', sans-serif;
  }
  .jour {
    grid-column: 3 / span 8;
    margin: 0 0 20px 0;
    padding: 0;
    color: red;
    text-transform: uppercase;
    font-size: 1.6em;
    font-family: 'Raleway', sans-serif;
  }
  .nom {
    grid-column: 3 / span 8;
  }
  figure {
    grid-column: 3 / span 8;
    margin: 0 0 20px 0;
  }
  figure img {
    /*text-align: center;*/
    width: 100%;
  }
  figure .legende {
    padding: 0;
    margin: 0;
  }
  .texte {
    grid-column: 3 / span 8;
    margin: 0 0 32px 0;
  }
  ul.texte {
    padding-left: 0;
    list-style-type: none;
  }
  .vernissage {
    grid-column: 3 / span 8;
    font-weight: bold;
    margin-bottom: 0;
    margin: 0 0 24px 0;
  }
  .separateur {
    grid-column: 3 / span 8;
    width: 3%;
    padding: 0;
    margin: 0 0 36px 0;
    border-bottom: 2px solid black;
  }
  .footer {
    position: sticky;
  }
}