@media screen and (max-width: 812px) {
   
body{
  width: 100vw;
  --body-size: 0.5em;
  --title-size: 1.5em;
  --subtitle-size: 1em;
  --details-size: 0.9em;
  padding-left: 0;
}

/*******************************************************************************************************************/
/********************************************        BUTTONS       *************************************************/
/*******************************************************************************************************************/
#section--buttons{
  top: 16px;
  right: 15px;
}

#section--buttons--access{
  min-width: 40%;
  margin-left: 2%;
  margin-top: 1%;
}

#section--buttons--print{
  margin-right: 2%;
  margin-top: 1%;
  display: none;
}

#section--buttons--toc{
  display: none;
  margin-top: 1%;
}

.purchase_buttons{
  margin-top:-24%;
  margin-bottom: 10%;
}

#section--buttons--language{
  color: var(--white);
}

#section--buttons--language a{
  font-size: inherit;
  color: var(--white);
}

.language{
  display: none;
}

.language-small{
  display: block;
}

.language-small a{
  font-size: smaller;
}
/*******************************************************************************************************************/
/********************************************        TITLE         *************************************************/
/*******************************************************************************************************************/

#section--title{

  margin-top: 0;
  margin-left: 0;
  padding-left: 20px;
  padding-top: 19px;
  padding-bottom: 13px;
  margin-bottom: 0;
  background-color: var(--blue);
  color: var(--white);
}

#pub_title{
  font-size: 1em;
  font-weight: bolder;
}

.pub_subtitle{
  display: none;
}

.background{
  min-height: 100%;
 top: 0px;

}

.author_name{
  font-size: 0.7em;
  margin-top: 1px;
}

.summary {

  padding: 8% 13% 10% 10%;
  font-size: 0.8em;
  
}

#mockup_desktop{
  display: none;
}

#mockup_mobile{
  display: block;
}

.credits{ 
  width: 93%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.credits .license{
  margin-top: 20px;
}

/*******************************************************************************************************************/
/********************************************        NAVIGATOR         *********************************************/
/*******************************************************************************************************************/

#section--nav{
  position: fixed;
  display: none;
  width: 86%;
  margin-left: 5%;
  margin-right: 25%;
  height: auto;
  top: 53px;
  text-align: center;
  background-color: var(--white);
  border-color: 1px solid var(--black);
  border-style: dotted;
  box-shadow: none;
  border-radius: 10px;
} 

.dark #section--nav{
  color: var(--purple);
  background-color: var(--black);
  box-shadow: 0px 0px 10px 15px var(--black);
}

nav h2{
  font-size: 7vw;
  margin: 15px 0px;
}

.plain #section--nav h2{
  font-family: var(--plain);
  font-size: 6.5vw;
}



/*******************************************************************************************************************/
/************************************************ CONTENT SECTION  *************************************************/
/*******************************************************************************************************************/


#section--content{
  margin-top: 50px;
  position: relative;
  display: none; /*block it for the moment*/
  width: 100%;
  height: fit-content;
}

#section--content h1 {
  text-align: center;
  margin-bottom: 10%;
  padding-top: 57%;
}

#section--editorial p{
  padding: 0 7% 0 7%;
}

.page{
  width: 100%;
  margin: 0 0 5% 0;
  z-index: 1;
}

#section--program {
  width: 85%;
  margin: 0;
  padding-left: 7%;
  padding-right: 7%;
  padding-bottom: 13%;
  background-color: var(--white);
  box-shadow: 0px 0px 10px 15px rgba(249,249,249,1);
}

.dark #section--program {
  background-color: var(--black);
  box-shadow: 0px 0px 10px 15px var(--black);
}

#section--program .horizontal {
  margin: 0 0 0 -30%;
}

#section--program .program-table{
  margin-left: 0;
  width: 85%;
  margin-bottom: 25px;
}

#section--goingnative {
  width: 100%;
  padding: 0;
  margin: 0;
}

#section--goingnative p{
  padding: 0 7% 0 7%;
}

#section--goingnative h1{
  margin-top: 0; 
}

#section--goingnative h2 {
  text-align: center;
}

#section--breakout{
  margin: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}

#section--breakout h1 {
  padding-top: 57%;
}

#section--breakout article h1{
  padding-top: 0;
}

#section--breakout article p {
  margin-top: 7%;
  padding: 0 7% 0 7%;
}

#section--breakout .zine {
  margin-left: -20%;
  z-index: 50;
}

#section--breakout .cards {
  margin-left: 7%;
  z-index: 50;
}

#section--colophon {
  width: 85%;
  margin: 0;
  padding: 0 7% 0 7%;
}

#section--images {
  background: var(--brown);
  padding: 15% 0;
  margin: 0;
}

#section--photos .active + figcaption {
  margin: 0 7%;
  color: var(--white);
}


}