@font-face{font-family:'Equity Text';src:url('../fonts/eq-book-text-b-regular.ttf')}
@font-face{font-family:'Equity Text';src:url('../fonts/eq-book-text-b-bold.ttf'); font-weight:700}
@font-face{font-family:'Equity Text';src:url('../fonts/eq-book-text-b-bold-italic.ttf'); font-weight:700; font-style:italic}
@font-face{font-family:'Equity Text';src:url('../fonts/eq-book-text-b-italic.ttf'); font-style:italic}
@font-face{font-family:'Equity Caps';src:url('../fonts/eq-book-caps-b-regular.ttf')}
@font-face{font-family:'Equity Caps';src:url('../fonts/eq-book-caps-b-bold.ttf'); font-weight:700}
@font-face{font-family:'Equity Caps';src:url('../fonts/eq-book-caps-b-bold-italic.ttf'); font-weight:700; font-style:italic}
@font-face{font-family:'Equity Caps';src:url('../fonts/eq-book-caps-b-italic.ttf'); font-style:italic}

body {
  color: #100a10;
  background-color: #fcfeff;
  font-family: "Equity Text", serif;
  font-size: 160%;
}

/* Variables */



/* Mixins */
.center{
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.front {
  padding-top: 0.6rem;
  font-size: 2.5vw;
}

.front p {
  font-size: 200%;
  margin-top: 0rem;
  margin-bottom: 1rem;  
}

.menu {
  text-align: center;
  font-size: 140%;
  color: #000022;
}

.menu a {
  color: #000022;
  text-decoration: none;
}

.main-content {
  text-align: justify;
  margin: 2rem auto;
  max-width: 60rem;
  line-height: 1.2;
  color: #000022;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-size: inherit;
  margin: 2.4rem 0 0.8rem;
}

a {
  color: #ee2222;
  text-decoration: none;
}

span.arrow {
  display: none;
  width: 0;
}

a:hover span.arrow, a:active span.arrow {
  display: inline-block;
}

ul {
  padding: 0;
  margin: 0 0 0;
  line-height: 1.2;
}

ul.album-info {
  padding: 0;
  margin: 1rem 0 0 53%;
  line-height: 1.2;
  font-size: 80%;
}

ul.listing {
  clear: both;  
}

ul.references {
  padding: 0;
  line-height: 1.2;
  font-size: 80%;
  width: 80%;
  margin-left: 9%;
}

ul.music-factory {
  width: fit-content;
  padding: 0 3.9rem 0 0;
  float: left;
}

ul.music-factory-credits {
  padding: 1rem 1rem 0 0;
  line-height: 1.4;
  float: left;
  font-size: 80%;
}

ul.references li {
  margin: 1.2rem 0 0 1.2rem;
}

li {
  list-style-type: none;
  list-style-position: outside;
}

img {
  margin: 0 auto -0.5rem;
  width: 60%;
  max-width: 90%;
}

img.gallery {
  width: 98%;
  margin: 0.8% 0 0.8% 0.8%  
}

img.diagram {
  width: 98%;
  margin: 0.8% 0 0.8% 0.8%
}

img.half-diagram {
  width: 62%;
  margin: 0.8% 0 0.8% 18%;
}

img.graph {
  width: 52%;
  margin: 0 0 0 24%;
}

img.harmolodics {
  margin: 0 auto;
  display: block;
}

img.knot {
  width: 34%;
  margin: 0.8% 0% 0.8% 32%;
}

img.tactus {
  margin: 0 0 0 0.8%;
}

img.cover {
  width: 100%;
  border: 1px solid #e6e6e6;
}

p.engraving {
  width: 98%;
  text-align: center;
}

p.link {
  text-align: center;
}

p.album {
  float: left;
  width: 50%;
  margin: 0;
}

blockquote {
  margin: 0 auto;
  width: fit-content;
  font-size: 78%;
  font-style: italic;
}

blockquote.leading {
  margin: 4rem auto 2em;
}

blockquote.quote {
  margin: 0 auto;
  width: 80%;
  font-style: italic;
  font-size: 84%;
}

span.attribution {
  padding-left: 19.4em;
}

span.link {
  font-size: 80%;
  font-weight: bold;
}

.back {
  font-size: 300%;
  width: 100%;
  text-align: center;
  display: block;
  clear: both;
}


/* Lacan */

.subject, .other {
  position: relative;  
  font-style: normal;
}

.subject:before, .other:before {
  position: absolute;
  content: '/';
  top: 0;
  font-weight: bold;
}

.subject:before {
  left: 0.1rem;
  right: -0.1rem;
}

.other:before {
  left: 0.3rem;
  right: -0.3rem;
}


/*  Media Queries
    Extra small devices (phones, up to 480px) No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) {}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) {}