/******* customize page background color ********/
body, footer .topback{
  background-color: #b349f5;
}


/******* Activate the following code if the page is darker ********/
h1, h2, h3, h4, a, p, .text, .date, .graphicTitle, .graphicNote, .authorname, .author, .visual, .social a svg, .social a svg path, .social-icons a svg, .social-icons a svg path{
  color:#f2f2f2 !important;
  fill: white !important;
}
.related-graphic h4, .related-tag, .tippy-popper a svg, .tippy-popper a svg path, .tippy-popper a{
  color:#7e7e7e !important;
  fill: #7e7e7e !important;
}
.author-bottom .author .info .minifooter .social:after{
  background-color: white !important;
}
footer .related-infographics .controls .control svg{
    stroke: #f2f2f2 !important;
}


.cover {
  margin-bottom: 40px;
  margin-top: 0px;
  height: 85vh;
  background-image: url("../img/cover.jpg");
  background-size: cover;
  background-position: center;
  /* background-position: bottom;  to avoid graphic crop */
}

.clear {
  height: 40px;
}




.trigger ul li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
}

.trigger ul li.fadeIn{opacity: 1;}


.show-mobile {display: none;}


.solo {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}


.sabbath {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.song {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}



.tattoos {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}



.max960 {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.max360 {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.show-mobile2 {display: none;}

#horizontal-scroll-graphic img{
max-height: 800px;
height: 80vh;
}



/*------------------------- | MEDIA QUERIES | -----------------------------*/

@media only screen and (max-width: 1440px) {}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width:1024px) {}

@media only screen and (max-width: 960px) {
  .solo {
    max-width: 660px;
  }

  .sabbath {
    max-width: 660px;
  }

  .song {
    max-width: 660px;
  }


}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 660px) {
  .show-desktop {display: none;}
  .show-mobile {display: block}

  .solo {
    max-width: 360px;
  }

  .sabbath {
    max-width: 360px;
  }

  .song {
    max-width: 360px;
  }

  .tattoos {max-width: 360px;}
  .show-desktop2 {display: none;}
  .show-mobile2 {display:block;}  




}

@media only screen and (max-width: 480px) {}

@media only screen and (max-width: 400px) {}

@media only screen and (max-width: 360px) {
}