@font-face {
  font-family: 'Rasmus';
  font-style: bold;
  font-weight: 700;
  src: url(https://adfcab.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/Rasmus-BoldItalic.otf) format('truetype');
}

@font-face {
  font-family: 'Rasmus';
  font-style: normal;
  font-weight: 400;
  src: url(https://47a9a3.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/Rasmus-Italic.otf) format('truetype');
}

@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=8cdfc8ca-9aef-4ac3-8964-49d013f38293");
@font-face{
	font-family:"Eurostile";
	src:url("https://023a37.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/a74866ab-3280-4a0e-b8a9-dab3877ada03.eot#iefix");
	src:url("https://023a37.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/a74866ab-3280-4a0e-b8a9-dab3877ada03.eot#iefix") format("eot"),url("https://03e31a.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/2d30f6e9-8073-4694-8597-a5fcc1fd43e0.woff2") format("woff2"),url("https://eff78a.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/a68d470e-1a6a-4fbe-9f94-78cc00d51400.woff") format("woff"),url("https://feb108.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/93c3a4eb-3bcc-42dc-8040-73e6af2ecfbb.ttf") format("truetype"),url("https://c0b070.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/cae7d51d-8f2b-4280-a4eb-4d414c8acaab.svg#cae7d51d-8f2b-4280-a4eb-4d414c8acaab") format("svg");
}

@font-face {
  font-family: 'Ernestine';
  font-style: normal;
  font-weight: 400;
  src: url(https://d5bcd4.claudeassets.com/20220327084406im_/https://interstellar-music.com/fonts/ErnestineOT-Italic.otf) format('truetype');
}


html, body {width:100%; height:100%; margin:0; padding:0}
body {background-color:#ccc; background-image:url(https://900a7a.claudeassets.com/20220327084406im_/https://interstellar-music.com/* '/cms/images/bg.jpg' */); background-size:cover; background-repeat:none; background-position:center center; background-attachment:fixed; font-family:Ernestine,sans-serif,Arial,'Helvetica Neue'; font-weight:normal; font-size:15pt; line-height:16.5pt; color:#000; overflow-x:hidden}

img {border:none}

h1 {font-family:Eurostile; text-transform:uppercase; font-size:16pt; line-height:20pt; letter-spacing:1.3pt}

#home {position:relative; box-sizing:border-box; min-height:100%}

header {position:fixed; width:200%; margin-left:-50%; height:170px; z-index:10; overflow-x:hidden; overflow-y:scroll}

a {text-decoration:none; color:#000}
h2 {font-size:18pt; line-height:21pt; font-weight:normal; font-family:Rasmus; letter-spacing:0.4pt}
h3 {margin:0; padding:0 0 20px 0; font-size:18pt; font-weight:normal; white-space:pre-wrap; line-height:21pt}
.smallText {font-size:10pt}
.redText {color:#ca2f3d}

ul { list-style-type: none; padding-left:0; padding-left:28pt}
li {padding-bottom:8pt}
.infoText li:before {content:'\2192'; margin-left:-22pt; margin-right:12pt}


nav {position:fixed; left:0; top:170px; width:200%; margin-left:-50%; overflow-x:hidden; overflow-y:scroll; background:#fff; height:50px; z-index:10}
nav > div {position:relative; width:50%; margin:0 auto; text-align:center}

#hamburger {display:none}

#navSocial {position:absolute; top:10px; right:20px}
#navSocial img {height:25px; margin-right:10px}
#logo {position:relative; display:block; height:90px; margin:30px auto; z-index:12}

/* #logoBlank {height:123px; margin:27px auto; z-index:28} */

#navTop {margin:0; padding:0; list-style:none; text-align:center}
#navTop li {display:inline-block;  margin:0; padding:0 6px; line-height:50px}
#navTop li:before {content:''; margin-left:0; margin-right:0}
#navTop a {display:block; padding:0 6px; color:#000; font-size:15pt; font-weight:normal; font-family:Eurostile; letter-spacing:2px; text-transform:uppercase}
#navTop a.active, #navTop a:hover{font-weight:bold}
#navTop a::after {
    display: block;
    content: attr(data-text);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}


#content {position:fixed; bottom:30px; width:100%; height:calc(100% - 250px); overflow-y:scroll}

#productions {position:relative; overflow:hidden; height:38px}
#productions ul {margin:0; padding:0; display:block}
#productions li {float:left; list-style:none; margin:0; padding:0}
#productions li a {display:block; float:left; padding:6px; border:2px solid #fff; font-size:13.2pt; text-transform:uppercase; white-space:nowrap}
#productions li a:hover {color:#ca2f3d}
#productions li a.active {color:#ca2f3d; border:2px solid #ca2f3d}
#productions li a.dummy {width:30px; pointer-events:none}
#productions li span {float:left; width:42px; height:20px;}

#productions .leftArrow {position:absolute; top:0; left:0; height:20px; padding:10px; cursor:pointer; display:none}
#productions .rightArrow {position:absolute; top:0; right:0; height:20px; padding:10px; cursor:pointer}

#gallery {position:relative; clear:both; margin-top:17px}
#gallery ul {margin:0; padding:0; list-style:none; width:100%}
#gallery ul img {width:100%}
#gallery .leftArrow {position:absolute; top:50%; top:calc(50% - 20px); left:0; height:20px; padding:20px; cursor:pointer; opacity:0; transition:opacity 0.4s}
#gallery .rightArrow {position:absolute; top:50%; top:calc(50% - 20px); right:0; height:20px; padding:20px; cursor:pointer; opacity:0; transition:opacity 0.4s}
#gallery .downArrow {position:absolute; top:90%; top:calc(100% - 60px); left:48%; left:calc(50% - 20px); height:20px; padding:20px; cursor:pointer}
#gallery:hover .leftArrow, #gallery:hover .rightArrow {opacity:1}


.productionInfo {position:relative; box-sizing:border-box; width:100%; max-width:1200px; margin:0 auto; padding:40px 54px 80px 54px}
.productionInfoText a, .productionInfoBox a, .tc a {font-weight:bold; text-decoration:underline}
.productionInfoText a:hover, .productionInfoBox a:hover, .tc a:hover, .productionInfoBox a:hover * {color:#000}
.productionInfo.backend {display:block}
/* .productionInfoText {float:left; max-width:620px; font-size:12pt} */
.productionInfoText {font-size:12pt}
.productionInfoText h2 {/* margin-top:48px */ font-family:Rasmus; font-size:18pt}
.productionInfoText *:first-child {/* margin-top:0 */}
.productionInfoBox { width:100%}
.productionInfoText, .infoBox {box-sizing:border-box; padding:6px 20px; background:rgba(255, 255, 255, 0.6); margin-bottom:12px; transition:padding 0.3s}
/* .infoBox * {color:#ca2f3d} */
.infoBox {cursor:pointer; clear:both; min-height:48px}
.infoBox.active {cursor:default}
.infoBox .more {transform:rotate(0deg); transition:all 0.3s; vertical-align:middle; float:left; width:24px; margin-right:16px; margin-top:4px}
.infoBox .more.active {transform:rotate(90deg)}
.infoBox > h2 {margin:0; padding:0; line-height:38px; float:left; width:260px}
.infoText {font-size:12pt; margin-top:8px}
.infoBox h2:first-child/* , .productionInfoBox p:first-child */ {/*padding:0 0 0 0*/} 
.infoBox h3 {/* font-size:11pt; margin:0; padding:6px 0 0 0; font-weight:normal; text-transform:uppercase */}
.infoBox p {/*font-size:11pt; margin:0; padding:6px 0 0 0 */}
.infoBox .small {font-size:9pt}
.mce-text {color:#000 !important}

.infoText {width:70%; width:calc(100% - 320px); float:right}
.infoText > div {display:none}
.less {cursor:pointer}




.infoText p:first-child {margin-top:0}

.productionInfoText iframe {/* width:100%; height:360px */}

.staff .name {text-transform:uppercase}

.productionInfoBox.company h2 {font-size:10pt}
/* .productionInfoBox .infoBox {margin-bottom:0; margin-top:12px} */


#overlay {position:fixed; box-sizing:border-box; bottom:30px; left:0; width:100%; height:calc(100% - 250px); z-index:12; overflow-y:scroll; display:none}

#overlay > div {position:relative; width:100%; height:100%; margin:0 auto; max-width:1092px; height:100%; overflow-y:auto; background-color:rgba(208, 208, 208, 0.95); box-sizing:border-box; border:3px solid #fff}

#overlayContent {opacity:0; transition:opacity 0.3s; padding:108px 54px; text-align:center}
#overlayContent p, #overlayContent form {text-align:left; font-size:12pt}

#overlayImage {text-align:center}
#overlayImage img {max-width:60%}

#overlayContent #guts {padding:0; margin:0}

#overlayContent a {font-weight:bold; text-decoration:underline}
#overlayContent h2 {text-align:center; font-size:20pt}
#overlayContent h3 {text-align:center; margin:20px 0 0 0; font-size:16pt}

#overlayContent #overlayReferences p {text-align:center}
#overlayContent #overlayReferences img {max-width:100%}

#overlayClose {display:none; width:30px; cursor:pointer; position:absolute; top:40px; right:40px}
#overlayBack {cursor:pointer; position:absolute; top:40px; left:40px; color:#fff; font-weight:bold; font-size:40pt; padding:3px}



#overlayBackend {position:relative; box-sizing:border-box; bottom:30px; left:0; width:100%; height:calc(100% - 250px); z-index:12; overflow-y:scroll}

#overlayBackend > div {position:relative; width:100%; height:100%; margin:0 auto; max-width:1092px; height:100%; overflow-y:auto; background-color:rgba(208, 208, 208, 0.95); box-sizing:border-box; border:3px solid #fff}
#overlayBackendContent {padding:108px 54px; text-align:center}
#overlayBackendContent p, #overlayContent form {text-align:left; font-size:12pt}
#overlayBackendContent a {font-weight:bold; text-decoration:underline}
#overlayBackendContent h2 {text-align:center; font-size:20pt}
#overlayBackendContent h3 {text-align:center; margin:20px 0 0 0; font-size:16pt}

#overlayBackend #overlayContent #overlayReferences p {text-align:center}




.otherProductions {margin-top:20px}
.otherProductions a, .otherProductions strong {color:#ca2f3d; margin-right:20px; white-space:nowrap}

.video {width:854px; height:480px}

.closeButton {position:absolute; top:20px; right:40px; cursor:pointer; display:none}
.closeButton img {width:50px; padding:20px 10px}

#articleConfig {margin-top:20px; padding-top:20px; border-top:1px dotted black}

.content_type_label {clear:both; display:inline-block; font-size:12px; line-height:14px; margin-top:-14px}
.content_type_label:before {}

#head_text_100, #head_editbutton_100 {display:none !important}




#references, #boutiques {box-sizing:border-box; max-width:1200px; margin:0 auto; padding:0 54px; text-align:center}
#references ul, #boutiques ul {list-style:none; padding:0;margin:30px 0}
#references li, #boutiques li {float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:#fff;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:80%;
	cursor:pointer;
}

#boutiques > ul > li {background-color:rgba(255,255,255,0.3); transition:background-color 0.4s; font-size:12pt}
#boutiques > ul > li:hover {background-color:rgba(255,255,255,0.5)}



.refContainer, #boutiques > ul > li a  {position:absolute; display:block; width:100%; height:100%}
.refContainer > *, #boutiques > ul > li a > * {width:80%}
.refContainer img, #boutiques > ul > li img {width:80%; margin:10% 0 5% 0}
.refTxt, #boutiques > ul > li div {display:inline-block}
.refTxt, #text_text_11 {font-size:12pt}
.refContainer h2, #boutiques h2 {font-size:14pt; margin:0 auto; padding:0}
.refContainer.withTxt img {width:auto; max-width:80%; max-height:50%}
#boutiques > ul > li ul {margin:0 10%; padding:0; list-style:bullet}
#boutiques > ul > li li {background:transparent; float:none; width:80%}

#subForm {display:inline-block}




#content video, #content iframe {max-width:80%!important; height:auto!important}
#overlayContent video, #overlayContent iframe {max-width:100%!important; }





.clear {clear:both}





#backHome {position:absolute; top:50px; left:530px; color:#ca2f3d; display:none; font-weight:bold}
#backHome img {vertical-align:middle; height:16px; margin-right:10px}


footer {position:fixed; bottom:0; left:0; height:34px; width:200%; margin-left:-50%; overflow-x:hidden; overflow-y:scroll}
footer > div {height:30px; margin-top:4px; width:100%; background:#fff}
footer > div > div {box-sizing:border-box; max-width:1200px; margin:0 auto; padding:0 54px}
footer * {font-family:Eurostile; font-size:10pt; line-height:30px}
footer .left {float:left; font-weight:bold}
footer .right {float:right}
footer .right a {margin-left:25px}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('/assets/interstellar-music.com/cms/images/bg.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
}





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

}


/*
@media only screen and (min-width:768px) and (max-width:991px) {

	
}
*/

@media only screen and (max-width:991px) /* and (orientation:portrait) */ {
  header {height:20%}
  nav {top:20%}
  #hamburger {height:22px; padding:11px 30px; display:block}
  #logo {position:relative; display:block; height:12vh; margin:4vh auto; z-index:12}
  #content {height:calc(80% - 80px)}
  .productionInfo {padding:40px 24px 80px 24px}
  .infoBox > h2 {margin:0; padding:0; line-height:38px; float:left; width:calc(100% - 40px)}
  .infoText {clear:left;width:100%; float:none}
  nav {height:auto; min-height:50px; overflow-y:visible; width:100%; margin-left:0}
  nav > div {width:100%}
  #navTop {position:relative; left:0; right:0; margin-top:20px; padding-bottom:20px; display:none}
  #navTop li {display:block;  margin:0; padding:0 6px; line-height:50px}
  footer {width:100%; margin-left:0}
  footer .left {display:none}
  footer > div > div {padding:0 30px}
  footer .right {float:none; display:flex; width:100%; justify-content:space-between}
  footer .right a {margin-left:0}
  #references li, #boutiques li {float:none; width: 100%; padding-bottom:100%}
  #overlay {height:calc(80% - 80px)}
}














/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0.6;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0.6;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}


.less {display:none}

/*
     FILE ARCHIVED ON 23:34:39 Mar 31, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 11:07:36 Jun 13, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.506
  exclusion.robots: 0.059
  exclusion.robots.policy: 0.05
  esindex: 0.007
  cdx.remote: 4.612
  LoadShardBlock: 71.024 (3)
  PetaboxLoader3.datanode: 58.333 (4)
  load_resource: 50.471
  PetaboxLoader3.resolve: 40.594
*/