@font-face {
    font-family: 'regular';
    src: url('/a-sequence-of-mistakes/regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'italic';
    src: url('/a-sequence-of-mistakes/italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
  }

/*  SEE BOTTOM FOR CODE THAT NEEDS REALLOCATING */

html,body {font-size: 16px;}
html,body,div,span,a {margin: 0;padding: 0;border: 0;outline: 0;background: transparent}
html {box-sizing: border-box;-webkit-text-size-adjust: 100%;}
*, *:before, *:after {box-sizing: inherit}
body {overflow: hidden;background: #fff;}
.invis {color: transparent}
#backscreen {position: fixed;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background: #000;}
.mobbreak,
.mobbreakinline {display: none}
.nowrap {white-space: nowrap;}
::-moz-selection {color:#295e7d!important;background: ghostwhite!important;}
::selection {color: #295e7d!important;background: ghostwhite!important;}
.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
/*                                                                             #loadings */
#sjsloading {
  display: block;
  color: #000;
  position: fixed;top: 2em;left: 50%;z-index: 1112;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  font-family:'italic',serif;
  font-style: italic;
  letter-spacing: .15rem;
  font-size: 2em;
  text-align: center;
  cursor: wait;
  border-bottom : 1px solid transparent;/* to make it align with Enter */
}
#sjsloading .dot1,
#sjsloading .dot2,
#sjsloading .dot3 {
  font-family:'italic',serif;
  font-style: italic;
  font-size: .85em !important;
  color:rgba(255,255,255,0);color: #000;
  letter-spacing:.0625em;letter-spacing: .15rem;
}
.dot1 {
  /*font-style: italic;*/
  -webkit-animation: dotdotdotA 3000ms 0ms infinite linear both;
  -moz-animation: dotdotdotA 3000ms 0ms infinite linear both;
  -ms-animation: dotdotdotA 3000ms 0ms infinite linear both;
  -o-animation: dotdotdotA 3000ms 0ms infinite linear both;
  animation: dotdotdotA 3000ms 0ms infinite linear both;
}
.dot2 {
  /*font-style: normal;*/
  -webkit-animation: dotdotdotB 3000ms 0ms infinite linear both;
  -moz-animation: dotdotdotB 3000ms 0ms infinite linear both;
  -ms-animation: dotdotdotB 3000ms 0ms infinite linear both;
  -o-animation: dotdotdotB 3000ms 0ms infinite linear both;
  animation: dotdotdotB 3000ms 0ms infinite linear both;
}
.dot3 {
  /*font-weight: bold;*/
  -webkit-animation: dotdotdotC 3000ms 0ms infinite linear both;
  -moz-animation: dotdotdotC 3000ms 0ms infinite linear both;
  -ms-animation: dotdotdotC 3000ms 0ms infinite linear both;
  -o-animation: dotdotdotC 3000ms 0ms infinite linear both;
  animation: dotdotdotC 3000ms 0ms infinite linear both;
}
@-webkit-keyframes dotdotdotA {from{color:rgba(0,0,0,0)}15%{color:rgba(0,0,0,0)}16%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-moz-keyframes dotdotdotA {from{color:rgba(0,0,0,0)}15%{color:rgba(0,0,0,0)}16%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-ms-keyframes dotdotdotA {from{color:rgba(0,0,0,0)}15%{color:rgba(0,0,0,0)}16%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-o-keyframes dotdotdotA {from{color:rgba(0,0,0,0)}15%{color:rgba(0,0,0,0)}16%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@keyframes dotdotdotA {from{color:rgba(0,0,0,0)}15%{color:rgba(0,0,0,0)}16%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}

@-webkit-keyframes dotdotdotB {from{color:rgba(0,0,0,0)}32%{color:rgba(0,0,0,0)}33%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-moz-keyframes dotdotdotB {from{color:rgba(0,0,0,0)}32%{color:rgba(0,0,0,0)}33%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-ms-keyframes dotdotdotB {from{color:rgba(0,0,0,0)}32%{color:rgba(0,0,0,0)}33%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-o-keyframes dotdotdotB {from{color:rgba(0,0,0,0)}32%{color:rgba(0,0,0,0)}33%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@keyframes dotdotdotB {from{color:rgba(0,0,0,0)}32%{color:rgba(0,0,0,0)}33%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}

@-webkit-keyframes dotdotdotC {from{color:rgba(0,0,0,0)}49%{color:rgba(0,0,0,0)}50%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-moz-keyframes dotdotdotC {from{color:rgba(0,0,0,0)}49%{color:rgba(0,0,0,0)}50%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-ms-keyframes dotdotdotC {from{color:rgba(0,0,0,0)}49%{color:rgba(0,0,0,0)}50%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@-o-keyframes dotdotdotC {from{color:rgba(0,0,0,0)}49%{color:rgba(0,0,0,0)}50%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
@keyframes dotdotdotC {from{color:rgba(0,0,0,0)}49%{color:rgba(0,0,0,0)}50%{color:rgba(0,0,0,1)}67%{color:rgba(0,0,0,1)}to{color:rgba(0,0,0,0)}}
/*                                                                             #copyright */
small {
  display: inline-block;
  font: .85rem 'regular';letter-spacing: .15rem;
  position: fixed;bottom: 0;right: 1.5em;z-index: 34;
  -webkit-transform: translateX(100%) rotate(-90deg);
  -moz-transform: translateX(100%) rotate(-90deg);
  -ms-transform: translateX(100%) rotate(-90deg);
  -o-transform: translateX(100%) rotate(-90deg);
  transform: translateX(100%) rotate(-90deg);
  margin-right: 0;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  color: #777;
}
audio::-internal-media-controls-download-button {display:none;}
audio::-webkit-media-controls-enclosure {overflow:hidden;}
audio::-webkit-media-controls-panel {width: calc(100% + 30px); /* Adjust as needed */}

 /* #blackscreen {
    position: fixed;top: 0;left: 0;z-index: 1110;
    height: 100%;width: 100%;
    background: #000
  }*/
  #publicityshot,
  #publicityshot2 {
    position: fixed;top: 50%;left: 50%;z-index: 1111;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-height: 100%;min-width: 100%;
  }
  #publicityshot2 {z-index: 1110}
  #announcement {
    opacity: 0;
    font-size: 2em;
    font-family: 'regular';
    font-weight: 300;
    letter-spacing: .15rem;
    position: fixed;top: 2em;left: 50%;z-index: 1112;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
  }

  #youtubepage {
    display: none;
    position: fixed;top: 0;left: 0;z-index: 777;
    width: 100%;height: 100%;
    background: #fff;
  }
  #youtubeiframe {
    position: absolute;top: 50%;left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 560px; height:315px; max-width: 96% !important;max-height: 96% !important;
  }
  #playlistlink {
    font-family: 'regular';
    font-weight: 300;
    font-size: 1em;
    letter-spacing: .15rem;
    display: block;
    position: absolute;top: 50%;left: 50%;
    transform: translateX(-50%) translateY(168px);
    color: #000;
    text-decoration: none;
    white-space: nowrap; 
  }
  #playlistlink span {border-bottom: 1px solid #000;}




.temp {
  display: none;
  position: fixed;top: 0;left: 120px;right: 0;z-index: 77;
  background: rgba(255,255,255,1);
  width: calc(100% - 120px);
  height: calc(100% - 80px);
   height: calc(100% - 0px);
   width:  100%;left:  0;
}
.tempmessage {
  display: table-cell;
  position: relative;top: 40px;left: 62px;
  width: 100%;height: 100%;
  text-align: center;vertical-align: middle;
  font-family: 'regular';
  font-weight: 300;
  font-size: 2em
}
@media only screen and (max-width :  25.5em) {
  .temp {
    left: 84px;padding-left: 84px;left:  0;
    width: calc(100% - 84px);
    height: calc(100% - 60px) !important;
    width:  100%;
  } 
  .tempmessage {top: 30px !important;left: 2px!important;}
}
.tempmessage a:link,
.tempmessage a:visited,
.tempmessage a:active {color: #666;border-bottom: 1px solid #666;text-decoration: none}
.tempmessage a:hover {color: #000;border-bottom: 1px solid #000}
.tempmessage a:link span,
.tempmessage a:hover span {color: gainsboro;font-variant: small-caps;}
#connections,
#noitunesorspotify {display: inline-block;text-align: left !important}
/*                                                                             #hamburger */
.hamburgerflip-container {
  display: none;
  position: fixed;top: .5em;left: 0;z-index: 99999999;
  perspective: 1000px;
  width: 70px;height: 54px;
}

.hamburgerflipper {
  position: relative;
  transform-style: preserve-3d;
}
.hamburgerfront {
  position: absolute;top: 0;left: 0;
  transform: rotateY(0deg);
  cursor: pointer;
}
.hamburger {

  padding: 15px 15px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  outline-color: transparent;
  opacity: .85;
}
.hamburger1 {display: inline-block;opacity: 0;}
.hamburger:hover {opacity: 1}
.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
}
.hamburgerinnerblack, 
.hamburgerinnerblack::before, 
.hamburgerinnerblack::after {
    width: 40px;
    height: 4px;
    background-color: #000 !important;
    border-radius: 4px;
    position: absolute;
}


.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}
.hamburger-inner::before { top: -12px; }

.hamburger-inner::after { bottom: -12px; }

.hamburger.is-active .hamburger-inner { transform: rotate(45deg); }
.hamburger.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}
.hamburger.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}
#nav2  {display: none}

/*                                                                             #navlist */
#menoo {
  position: fixed;top: 0;left: 0;z-index: 888;
  /*width: 120px;*/height: calc(100% - 80px);
  background: rgba(255,255,255,0.85);
  margin-top: 0;
  /*margin-left: -158px;*/
  padding-top: 74px;padding-right: 2em;padding-left: 0;
  list-style-type: none;
  border: 0px solid #cc0000;

}
#menoo li {
  color: #000;
  font-family: 'regular';
  font-size:  1.5em;
  letter-spacing: .15em;
  font-weight: 300;
  white-space: nowrap
}
.litext {
  padding-left: .85em;
  padding-bottom: .5em;
  cursor: pointer;
}

#menoo li a:link,
#menoo li a:visited,
#menoo li a:active  {
  text-decoration: none;
  color: #000;
  opacity: .85;
}
#menoo li a:hover {opacity: 1}
#menoo li a:active {color: red}

#menoo li#menoooffer {font-size: 1em;padding-left: 1.25em}
#menoo li#menoooffer a:link,
#menoo li#menoooffer a:visited,
#menoo li#menoooffer a:active {color: red}
/*                                                                             #links */
#spotifyetc {
  position: absolute;
  bottom: 5em;z-index: 99999;
}

#bandcamp,
#apple,
#youtube {
  width: 110px;
  height: auto;
}
#bandcamp {padding-bottom: .35em}

#itunes {width: 110px}

#spotify {width: 114px;height: 47px;padding-bottom: .5em;}

#youtube {padding-bottom: .3em}

#apple {height: 40px;}

.notready {text-decoration: line-through;}


/*                                                                             FINAL */

#menooplaylist {height: 0;overflow: hidden;padding-bottom: 0;width: 158px;}
#menoocover {display: none}


#albumicon4playlist,
#albumicon {width: 60px;height: 60px;}

#thanks {opacity: 0;color: red !important;cursor: text}

/*                                                                             #fontawesome */
#fontawesomelist {
  position: fixed;z-index: 999999;
  display: block;
  white-space: nowrap;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);

  bottom: 0;left: 0 !important;padding-right: 17px;

  overflow: visible;
  padding-left: .85em;
  background: rgba(255,255,255,0.85);
border: 0px solid #cc0000;height: 80px;
  text-align: right;
  /*width: calc(100% - 158px);*/
}
#fontawesomelist i {
  color: #000;
  opacity: 1;
  display: inline-block;
  padding-right: .25em;padding-top: .5em !important;padding-bottom: .25em;
  font-size: 1.5em;
  cursor: pointer
}
#fontawesomelist i:hover {opacity: 1;cursor: pointer}
#fontawesomelist a {text-decoration: none;border: none;}




/* #album cover */
.coverflip-container {
  display: none;
  position: fixed;top: 50%;left: 50%;z-index: 2;
  perspective: 1000px;
  width: 37.5em;height: 37.5em;
  margin-top: -18.75em;margin-left: -18.75em;backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.coverflipper {
  position: relative;
  transform-style: preserve-3d;
}
.coverfront {
  position: absolute;top: 0;left: 0;
  transform: rotateY(0deg);
  width: 37.5em;height: 37.5em;
  cursor: pointer; backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
#cover,
#coverbg {width: 37.5em;height: 37.5em;}
/*                                                                             #back cover playlist */
.playlistflip-container {display: none;
  position: fixed;top: 50%;left: 50%;z-index: -1;
  perspective: 1000px;
  width: 37.5em;height: 37.5em;
  margin-top: -18.75em;margin-left: -18.75em;backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.playlistflipper {
  position: relative;
  transform-style: preserve-3d;
}
.playlistfront {
  position: absolute;top: 0;left: 0;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);/*5*/
  width: 37.5em;height: 37.5em; 
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-image:url('/a-sequence-of-mistakes/cover/Back-Cover-1366-tinypngd.jpg');
    background-repeat:no-repeat;
    background-size:contain;
}
.playlistbgflip-container {display: none;
  position: fixed;top: 50%;left: 50%;z-index: -2;
  perspective: 1000px;
  width: 37.5em;height: 37.5em;
  margin-top: -18.75em;margin-left: -18.75em;backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.playlistbgflipper {
  position: relative;
  transform-style: preserve-3d;
}
.playlistbgfront {
  position: absolute;top: 0;left: 0;
  transform: rotateY(180deg);
  width: 37.5em;height: 37.5em; backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
#playlist {/*perspective: 1000px;*/
  position: absolute;top: 50%;left: 50%;
  transform: translateX(calc(-50% - 1.25rem)) translateY(-50%);
  line-height: 1.35;margin-top: 0;padding-left: 0;
  text-align: left;
  list-style-type: none;
  margin-top: -1em;margin-left: 1em
}
#playlist li {
  font-family: 'italic';
  font-size:  1.4em;
  font-style: italic;
  /*font-weight: bold;*/
  /*cursor: pointer;*/
  white-space: nowrap;
  /*transform:  rotateY(5deg) skew(-10deg,-5deg) rotate(-1deg)*/
}/*rotateY(10deg) rotate(-6.5deg)*/

#playlist li span.titleletter {
  display: inline-block;
  transform: rotate(6.5deg)
}
#playlist li#playlisttitle .title {
  font-size: 1.3em;
  display: inline-block;
  transform: translateX(-1.1em);
  color: rgba(217,217,216,1);
}
/*#playlist li.bonustrack {transform: rotate(-7.5deg)}*/

#playlist li .tracknumber {
  color: rgba(141,141,140,1);
  display: inline-block;
  text-align: left;
  width: 1.5em;cursor: pointer;
}

.trackname  {
  color: #FFFF99;
  color: #fcea00;
  color: rgba(217,217,216,1);
  font-family: 'italic'!important;
  letter-spacing: .15rem;
}
.bonustrack {color: #FFFF33}

.tracknamedivider       {color: #FFFF99;}

/*#playlist li.tracknamedivider       {transform: rotate(-5.25deg)}*/

.trackname:hover {color: rgba(217,217,216,.55);}

.trackname i {display: inline-block;transform-origin: center;transition: transform 1s;}

.trackname i:hover {cursor: pointer;color: rgba(217,217,216,.55);}

#resume1,
#resume2,
#resume3,
#resume4,
#resume6,
#resume5 {display: none;}
#play1,
#play2,
#play3,
#play4,
#play5,
#play6 {
  animation: throb .6s infinite 0s linear forwards;
  animation-play-state: paused;
  will-change: transform; 
}

@keyframes throb {
  0% {opacity:  1}
  100% {opacity: .5}
}

#playlist li span.theblaming {font-family: 'Special Elite';font-size:  0.9em;}
.white       {color: #fff}
.red         {color: #E8DE2A;}/*text-shadow: 0 0 27px #00ff00;*/
.red:hover   {color: #E8DE2A;opacity: 1;cursor: text !important;}
.bonusred {color: #FFFF99}
.bonusred:hover {color: #FFFF99;cursor: text !important;}
/*                                                                             #audio players */
.audio {
  display: none;
  position: absolute;bottom: 0;left: 0;right: 0;z-index: 1111;
  min-width: 100% !important;width: 100%;opacity: .85;transform: translateY(90%);
}/*                                                                            if i put opacity: 1 it is invis when backface!!!*/

.trackname i.fa-pause-circle-o {display: none;}


/*                                                                             #credits */
.creditslistflip-container {
  display: none;
  position: fixed;top: 50%;left: 50%;z-index: 28;
  perspective: 1000px;
  width: 37.5em;height: 37.5em;
  margin-top: -18.75em;margin-left: -18.75em;
  overflow: hidden;backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
#covercredits {
  width: 37.5em;height: 37.5em;
  margin-left: -37.5em
}

/*.bookletpages{width: 37.5em;height: 37.5em;}
.bookletpages {position: fixed;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}
*/
#pg8 {z-index: 20}
#pg7 {z-index: 21}
#pg6 {z-index: 22}
#pg5 {z-index: 23}
#pg4 {z-index: 24}
#pg3 {z-index: 25}
#pg2 {z-index: 26}
#pg1 {z-index: 27;transform: translate(1px,1px);}

#lyricsheet{
  display: none;
  position: fixed;top: 50%;left: 50%;z-index: 88;
  width: 37.5em;height: 37.5em;
  margin-top: -18.75em;margin-left: -18.75em;
  overflow: hidden;
}

.pg1flip-container,
.pg2flip-container,
.pg3flip-container,
.pg4flip-container,
.pg5flip-container,
.pg6flip-container,
.pg7flip-container,
.pg8flip-container {
  position: absolute;top: 0;left: 0;z-index: 27;
  perspective: 1000px;
  width: 37.5em;height: 37.5em;
  margin-left: -37.5em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pg2flip-container {z-index: 26}
.pg3flip-container {z-index: 25}
.pg4flip-container {z-index: 24}
.pg5flip-container {z-index: 23}
.pg6flip-container {z-index: 22}
.pg7flip-container {z-index: 21}
.pg8flip-container {z-index: 20}

.pg1flipper,
.pg2flipper,
.pg3flipper,
.pg4flipper,
.pg5flipper,
.pg6flipper,
.pg7flipper,
.pg8flipper  {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 0 0;
}
.pg1front,
.pg2front,
.pg3front,
.pg4front,
.pg5front,
.pg6front,
.pg7front,
.pg8front {
  position: absolute;top: 0;left: 0;
  transform: rotateY(0deg);
  width: 37.5em;height: 37.5em;
  cursor: pointer;
}
#pg2,#pg3,#pg4,#pg5,#pg6,#pg7 {border: 1px solid #dcdcdc;}

.bookletpages {width: 37.5em;height: 37.5em;}


.pageturn,.pageturnback {display: none;}


.pageturn     {
  color: #000;
  position: fixed;right: 50%;bottom: 50%;z-index: 2222;
  margin-bottom: -.5em;margin-right: -7.5em;
  opacity: .3;
}
.pageturnback {
  color: #000;
  position: fixed;left: 50%; bottom: 50%;z-index: 2222;
  margin-bottom: -.5em;margin-left: -7.5em;
  opacity: .3;
}

.pageturn:hover,
.pageturnback:hover {opacity: .5;cursor: pointer}
/*                                                                             #about */
#aboutbg{
  display: none;
  position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 777;
  width: 100%;height: 100%;
  background: rgba(255,255,255,1);
}

#about,
#interview {
  display: none;
  position: fixed;top: 0;left: 0;z-index: 778;
  width: 100%;height: 100%;
  overflow-y: scroll; 
}

#headshot,
#headshot2 {height:auto;width:142px;float:left;margin:.5em .5em .5em 0}
#albumcoverico2 {height:auto;width:188px;float:left;margin:.5em .5em .5em 0;}


#about p,
#interview p {
  font-family: 'regular';
  font-weight: 300;
  font-size: 1.15em;
  line-height: 1.64;
  width: 37.5em;max-width: 37.5em;
  max-width: 90%;
  margin: 0 auto;
  padding-bottom: .5em
}


#interview p  {
  font-family: 'regular';
  font-weight: 300;
  padding-bottom: 1.25em
}
p.stan {font-weight: 700!important}

@media only screen and (max-width : 52.375rem) {/* smaller screens revising changes above */
  body {font-size: 80%} 
  #menoo li {font-size:  2em;}
  #menoo li#menoooffer {font-size:  1em;padding-left: 1.15em}
  #menoo li#fontawesomelist i {font-size: 1em}
   .pageturn {
    position: fixed;right: 50%;bottom: 50%;z-index: 2222;
    margin-bottom: -7.5em;margin-right: -6.25em
  }
  .pageturnback {
    position: fixed;left: 50%; bottom: 50%;z-index: 2222;
    margin-bottom: -7.5em;margin-left: -6.25em;
  }
  .trackname  {letter-spacing: .125rem;}
}



@media only screen and (max-width :  37.5em) {/*                               #smaller screens */
  body {font-size: 67%} 
  #menoo li {font-size:  2em;}
  #menoo li#menoooffer {font-size:  1em;padding-left: 1.15em}
  #menoo li#fontawesomelist i {font-size: 1em}
  .trackname  {letter-spacing: .1125rem;}
}

 #menoo {
    width: 168px!important;
    margin-left:  -168px;
  }
@media only screen and (max-width :  25.5em) { 

  .trackname  {letter-spacing: .1rem;}
  body {
    font-size: 50%;
    overflow-x: auto !important;
    overflow: scroll;
  }
  .mobbreak {display: block}
  .mobbreakinline {display: inline}
  #about p,
  #interview p {font-size: 2.5em}
 #menoo li {font-size:  2.5em;}
  #menoo li#menoooffer {font-size:  1.5em;padding-left: 1.15em}

#publicityshot,
#publicityshot2 {
    position: fixed;top: 50%;left: 50%;z-index: 1111;
    -webkit-transform: translateX(-50%) translateY(-37%) !important;
    transform: translateX(-50%) translateY(-37%) !important;
    min-height: 100%;min-width: 100%
  }
  #publicityshot2 {z-index: 1110}

  #announcement {top: 1em !important}
#interview {font-size: .75em}

  .hamburgerflip-container {margin-left: -10px}

  #menoo {
    width: 168px!important;
    margin-left:  -168px;
  }

  .coverflip-container,
  .playlistflip-container,
  .creditslistflip-container,
  .pg1flip-container,
  .pg2flip-container,
  .pg3flip-container,
  .pg4flip-container,
  .pg5flip-container,
  .pg6flip-container,
  .pg7flip-container,
  .pg8flip-container   {position: absolute !important;}

  .pageturn     {
    position: fixed;right: 50%;bottom: 50%;z-index: 2222;
    margin-bottom: -7.5em;margin-right: -6.25em
  }
  .pageturnback {
    position: fixed;left: 50%; bottom: 50%;z-index: 2222;
    margin-bottom: -7.5em;margin-left: -6.25em;
  }
#menoo {height: calc(100% - 60px);height: 100%!important;}
#fontawesomelist {height: 60px !important;}
  #menoo li#fontawesomelist i {font-size: 1.65em}
  #menoo .litext {font-size: 2.2em}
  #menoooffer {padding-left: 2em}
#playlistlink {font-size: 1.25em !important}
  /*#spotify,
  #bandcamp,
  #apple,
  #itunes,
  #youtube {
    width: 68px !important;
    height: auto;
  }
  #spotify {height: 25px;background: #fff;padding-top: .25em}
  #bandcamp {background: #fff;}
#apple,#itunes {height: 25px;margin-bottom: .5em}*/
/*
  #sjsbg {
    left: 84px !important;
    width: calc(100%-84px) !important;
  }
  #sjs {
   max-width: calc(100% - 50px)
}
  #spotifyetc {
    position: absolute;
    bottom: 9em !important
  }
  small {font-size: 1.25em;}


#menoooffer a {font-size: 1.5em}

*/


}/*                                                                            #end of (max-width :  25.5em) */

#menoocover4playlist {cursor: auto!important;pointer-events: none!important;cursor: text!important;}
#guidelinev {display: none;position: fixed;top: 0;  left: 1em;width: 0;height: 100%;border-left: 1px solid #000;z-index: 999999}
#guidelineh {display: none;position: fixed;top: 1em;left: 0;  width: 100%;height: 0;border-top:  1px solid #000;z-index: 999999}