@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}
body{
overflow: overlay;
overflow-x: hidden;
margin: 0px;
background-color: white;
/*overflow-x:hidden !important; */
}
body, html, h1, h2{
font-family: 'Inter var', sans-serif;
cursor:  default;
color: #202020;
font-size: 16px;
line-height: 21px;
font-weight: 400;
letter-spacing: 0em;
	
-moz-font-feature-settings: "cpsp=1", "cv10=1";
-ms-font-feature-settings: "cpsp" 1, "cv10" 1;
-webkit-font-feature-settings: "cpsp" 1, "cv10" 1;
-o-font-feature-settings: "cpsp" 1, "cv10" 1;
font-feature-settings: "cpsp" 1, "cv10" 1;
}
a {
text-decoration:none;
color: #202020;	
border-radius: 500px;
padding: 0px 8px 2px 8px;
border: 1px solid #202020;
z-index: 9990;
}
a:hover, a:focus {
text-decoration:none;
color: black;
background: white;
}
.legal-type a {
line-height: 21px;	
}
.mastnav a {
text-decoration:none;
color: #202020;
line-height: 21px;		
border-radius: 0px;
padding: 0px 0px 0px 0px;
border: 0px solid white;
}
.mastnav a:hover {
text-decoration:none;
}
.info {
text-decoration:none;
color: #202020;
padding-right: 16px;
}
.rwd-break { 
display: none;
}
.dark {
color: #202020;
}
img {
image-rendering: auto;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;	
-ms-interpolation-mode: nearest-neighbor;
}


/*-------------------------------------------------------------------------------------------------------------------------------*/
/* PRELOADER */
/*-------------------------------------------------------------------------------------------------------------------------------*/
html.preloader-running, body.preloader-running {
overflow: hidden;
}
div#preloader {
background: none repeat scroll 0 0 none;
position: fixed;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.loading-title {
position: fixed;
width: 100%;
height: 72px;
color: black;
font-size: 16px;
line-height: 21px;
font-weight: 400;
letter-spacing: 0em;
padding-top: 12px;
padding-left: 16px;	
z-index: 9999;	
}
.loader-wrapper {
position: fixed;
z-index: 100;
background: black;
}
.loader .ball {	
height: 33.4vh;
width: 0;
background: white;
position: relative;
margin: 0;
}
.loader .ball:nth-child(1) {
-webkit-animation: ball 10s ease-in-out;
animation: ball 10s ease-in-out forwards;	
}
.loader .ball:nth-child(2) {
-webkit-animation: ball 10s ease-in-out .5s;
animation: ball 10s ease-in-out .5s forwards;	
}
.loader .ball:nth-child(3) {
-webkit-animation: ball 10s ease-in-out 1s;
animation: ball 10s ease-in-out 1s forwards;	
}
@keyframes ball {
0% {left: 0; width: 0;}
25% {left: 0; width: 100%;}
50% {left: 0; width: 100%;}
75% {left: 0; width: 100%;}
100% {left: 0; width: 100%;}
}


/*-------------------------------------------------------------------------------------------------------------------------------*/
/* SCROLLBAR */
/*-------------------------------------------------------------------------------------------------------------------------------*/
::-webkit-scrollbar {
  width: 2px;
}
::-webkit-scrollbar-track {
  background: white;
}
::-webkit-scrollbar-thumb {
  background: black;
}
.dark-mode::-webkit-scrollbar-track {
background: black;
}
.dark-mode::-webkit-scrollbar-thumb {
background: white;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* DARK MODE */
/*-------------------------------------------------------------------------------------------------------------------------------*/
body.dark-mode, .dark-mode #info-overlay {
background-color: black;
color: white;
}
.dark-mode .legal-type a, .dark-mode .legal-type a:hover, .dark-mode .legal-type a:focus {
color: #000000;
border: 1px solid white;
background: white;	
}
.dark-mode .legal-type{
color: white;
border: 1px solid black;
background: #000000;	
}
.dark-mode a{
border: 1px solid white;
background: white;
}
.dark-mode .mastnav a {
color: white;	
background: none;
border: 0px solid white;
}
.dark-mode .loading-title, .dark-mode .mobile-title, .dark-mode h1, .dark-mode h2, .dark-mode .info{
color: white;	
}
.dark-mode .mastnav {
background: black;
}
.dark-mode .info-btn, .dark-mode .mobile-btn {
color: black;	
background: white;
border: 1px solid white;
}
.dark-mode .filter-btn {
color: black;
background: white;
border: 1px solid white;	
}
.dark-mode .works-filter a{
color: black;
background: white;
border: 1px solid white;
}
.dark-mode .works-filter .active{
color: black;	
background: hsl(135deg, 100%, 50%);
border: 1px solid hsl(135deg, 100%, 50%);
}
.dark-mode .logo img {
filter: invert(100%);
}
.dark-mode .dark-switch {
background: white;
}
.dark-mode .scrollup-btn:before, .dark-mode .scrollup-btn:after {
background: white;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* BACKGROUND */
/*-------------------------------------------------------------------------------------------------------------------------------*/
.grey {
background: #f5f5f5;
padding-top: 0%;
padding-bottom: 0%;
}
.dark-mode .grey  {
background-image: none;
background: none;	
}
.stay-grey {
background: #f5f5f5;
padding-top: 0%;
padding-bottom: 0%;
}
.dark-mode .stay-grey  {
background-image: none;
background: #f5f5f5;	
}
.pad {
padding-top: 5%;
padding-bottom: 5%;
}
.pad-top {
padding-top: 10%;
}
.pad-bottom {
padding-bottom: 10%;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* NAVIGATION */
/*-------------------------------------------------------------------------------------------------------------------------------*/

header.masthead {
position: fixed;
height: 72px;
width: 100%;
font-size: 32px;
line-height: 58px;
font-weight: 400;
letter-spacing: -0.02em;
padding: 8px 16px 0px;
background: none;
z-index: 9998;	
}
.masthead a {
text-decoration:none;
color: #202020;
padding-top: 0px;	
padding-bottom: 1px;		
margin-right: 5px;	
}
.masthead {
text-decoration:none;
}
nav.mastnav {
display: none;
position: relative;
padding: 12px 16px;
margin-top: 0px;
width: 100%;
height: 400px;
z-index: 9999;	
}
.mobile-info {
display: none;
}
.info-btn, .mobile-btn {
cursor: pointer;
background: white;
padding-left: 15px;
padding-right: 14px;
}
.filter-btn {
cursor: pointer;
background: white;
padding-left: 15px;
padding-right: 14px;	
}
#filter-nav {
display: none;
padding: 0;
z-index: 100;
background: none;
}
.works-filter{
list-style: none;	
}
.first-btn a {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
padding-left: 15px;
padding-right: 13px;		
}
.select-btn a {
border-radius: 0px;
padding-left: 12px;
padding-right: 13px;		
}
.last-btn a {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding-left: 13px;
padding-right: 14px;		
}
.works-filter a{
background: white;
margin-right: -10px;
}
.works-filter li{
display: inline-block;
}
.works-filter .active{
color: white;
background: #202020;
border: 1px solid #202020;
}
.dark-switch {
position: absolute;
display: block;
cursor: pointer;
right: 16px;
top: 16px;	
height: 42px;
width: 42px;
border-radius: 500px;
background: #202020;
}
.legal-btn {
cursor: pointer;
}
#legal-overlay {
display: none;
position: fixed;
top: 0px;
height: 100%;
width: 100%;
z-index: 99999;
}
.legal-type {
text-align: center;
position: fixed;
white-space: nowrap;	
top: 45%;
left: 50%;
background: #ffffff;
padding: 64px 60px 64px;
border-radius: 500px;
transform: translate(-50%, -50%);
}
.legal-type a, .legal-type a:hover, .legal-type a:focus {
background: #ffffff;
}
.scrollup-btn, .scrollup-btn:before, .scrollup-btn:after { 
width: 48px; height: 48px;	
}
.scrollup-btn {
display: none;
overflow: hidden;
position: fixed;	
right: 13px;
bottom: 16px;
border-radius: 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
cursor: pointer;
} 
.scrollup-btn:before, .scrollup-btn:after {
position: absolute;
background: #202020;
pointer-events: auto;
content: '';
}
.scrollup-btn:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
			skewX(30deg) scaleY(.866) translateX(-24%);
}
.scrollup-btn:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
			skewX(-30deg) scaleY(.866) translateX(24%);
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* PORTFOLIO */
/*-------------------------------------------------------------------------------------------------------------------------------*/

img  {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;	
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.digi img {
position: relative;
margin-left: 16px;
padding-left: 8px;
border-radius: 0px;	
}
.digi h1 {
padding-left: calc(29.75% + 16px);	
}
.digi-cover img {
position: relative;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;	
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.vinyl-cover {
position: relative;	
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;	
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.vinyl img {
position: relative;
left: -16px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;	
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.works-container{
padding-top: 74px;
margin-left: 8px;
margin-right: 8px;
z-index: 999;
}
.shift  {
margin-top: 17.5%;
}
.logo img  {
filter: contrast(75%);
}
.works-item {
padding-left: 8px;
padding-right: 8px;
margin-bottom: 148px;	
}
.poster {
max-width: 850px;
}
.no-bottom {
margin-bottom: 16px;
}
.no-gap-bottom {
margin-bottom: 0px;
}
.works-item h1 { 
display: block;
position: absolute;
white-space: nowrap;
opacity: 1;
width: 100%;
height: 100%;
margin-top: 10px;	
background: none;
z-index: 9990;	
text-decoration: none !important;
}
.works-item h2 { 
display: block;
position: absolute;
opacity: 1;
width: 100%;
height: 100%;
margin-top: 10px;	
margin-bottom: 0px;	
background: none;
z-index: 9990;	
text-decoration: none !important;
}
.link {
position: relative;	
text-align: right;	
right: 16px;	
top: 0px;
}
.link-logo {
position: relative;	
text-align: center;	
top: 50px;
margin-right: 16px;		
margin-bottom: -39px;	
}
.logo h1{
display: block;	
position: absolute;
margin-left: -8px;	
white-space: nowrap;	
text-align: center;
}
.logo h2{
display: block;	
position: absolute;
margin-left: -8px;	
white-space: nowrap;	
text-align: left;
}
.mobile-title, .mobile-only {
display: none;
}