#bg
{
  z-index: 0;
  background-color: #fccc3c;

  border: 1px solid black;
  box-sizing: border-box;
  /* border-radius: 10px; */

  /* dreamy soft shadows */
  box-shadow: 0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07),
  0 32px 64px rgba(0,0,0,0.07);

  /* width: 100%; */
  /* height: 100%; */
  /* longer shadows */
  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 
  0 4px 2px rgba(0,0,0,0.09), 
  0 8px 4px rgba(0,0,0,0.09), 
  0 16px 8px rgba(0,0,0,0.09),
  0 32px 16px rgba(0,0,0,0.09);
}

#base_hid
{
  display: none;
  position: static;
  visibility: hidden;
  width: 100%;
  object-fit: contain;
  max-width: 620px;
}

#base,#darks,#highlights,#cover_shadow,#bg, .roto,#color_mock,#rotos_gif,#roto_shadows {
  width: 100%;
  object-fit: contain;
  max-width:620px;
}
#roto_shadows
{
  z-index: 1;
}

#rotos_gif
{
  z-index: 2;
}

.roto
{
  /* roto_size / rest of mockup size */
  width:calc(29300%/700);
  width: -webkit-calc(29300%/700);
  z-index: 2;
  /* (max width / mockup size)  *  roto size */
  /* max-width:260px; */
}

#roto_r
{
  /* animation: spin_r 6s linear infinite; */
  visibility: hidden;

}
#roto_l
{
  /* animation: spin_l 6s linear infinite; */
  visibility: hidden;

}



@keyframes spin_r
{
  from
  {
    transform: translate(42%,-3%) rotate(0deg)
  }
  to
  {
    transform: translate(42%,-3%) rotate(360deg)
  }
}

@keyframes spin_l
{
  from
  {
    transform: translate(-41.5%,-3%) rotate(0deg)
  }
  to
  {
    transform: translate(-41.5%,-3%) rotate(360deg)
  }
}

@keyframes spin_r_mobi {
  from {
      transform: translate(111.5%, 66.5%) rotate(0deg)
  }
  to {
      transform: translate(111.5%, 66.5%) rotate(360deg)
  }
}
@keyframes spin_l_mobi {
  from {
      transform: translate(28%, 66.5%) rotate(0deg)
  }
  to {
      transform: translate(28%, 66.5%) rotate(360deg)
  }
}

#base {
  z-index: 3;
  /* display: none; */
  /* visibility: hidden; */
}

#cover
{
  /* text-align: center; */
  z-index: 4;
  position: absolute;
  width: 100%;
  max-width: 620px;
  height: 100%;

  background-image: url("../images/covers/default_cover.jpg");
  background-size: cover;
  background-position: center center;
  /* mask-type: alpha; */
  mask-position: 0px 0px;
  mask-size: 100% 100%;

}
.color_as_color
{
  mask-image: url(../images/new_layers/mockup_cover.svg);
  -webkit-mask-image: url(../images/new_layers/mockup_cover.svg);
}

.image_as_color
{
  mask-image: url(../images/new_layers/mockup_full.svg);
  -webkit-mask-image: url(../images/new_layers/mockup_full.svg);
  /* mask-mode: alpha; */
}

#color_mock {
  z-index: 4;
  mask-image: url(../images/new_layers/mockup_color.svg);
  -webkit-mask-image: url(../images/new_layers/mockup_color.svg);
  mask-position: 0px 0px;
  mask-size: 100% 100%;


}
#cover_shadow 
{
  z-index: 7;
}

#darks {
  mix-blend-mode: multiply;
  z-index: 5;
}

#highlights {
  mix-blend-mode: screen;
  z-index: 6;
}

/* JAVASCRIPT SETTABLE CONATAINER SURROUNDING CASSETE
with correct height and width
Can be used as background instead of #bg(svg)
*/
#sizer
{
  text-align: center;
  z-index: 0;
  position: absolute;
  width: 100%;
  max-width: 620px;
  height: 100%;
  background-size: cover;
  background-position: center center;
  
}



#track
{
  /* vertical-align: bottom; */
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translate(-50%,0%);
  z-index: 10;
  color: black;
  font-family: serif;
  width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  font-size: 38px;
}
#track_text
{
  display: inline-block;
  font-size: 100%;
  /* overflow: hidden; */
  font-family: 'Inter', sans-serif;
  /* font-family: 'Teko', sans-serif; */
  font-weight: 700;
  /* letter-spacing: 2px; */
  /* text-shadow: 0px 5px rgba(0,0,0,0.4); */

}

#artist
{
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%,0%);
  z-index: 10;
  color: black;
  font-family: serif;
  width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  font-size: 34px;
}
#artist_text
{
  display: inline-block;
  font-size: 100%;
  /* overflow: hidden; */
  font-family: 'Inter', sans-serif;
  /* font-family: 'Teko', sans-serif; */
  font-weight: 500;
  /* font-style: italic; */
  /* letter-spacing: 1px; */
  /* text-shadow: 0px 4px rgba(0,0,0,0.4); */

  /* text-shadow: 0px 4px rgba(0,0,0,0.4); */
  /* text-shadow: 0px 4px rgba(0,0,0,0.4); */


}

/* IMAGE WATERMARK */
#watermark
{
  position: initial;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.watermark_light
{
  background-image: url("../images/watermark_light.png");
}
.watermark_dark
{
  background-image: url("../images/watermark_dark.png");
}