@charset "UTF-8";
/* CSS Document */



/*---------------------------------- Core ------------------------------*/


:root {
--cubic: all 0.44s cubic-bezier(0,.82,.22,1);
--cubique: all 0.66s cubic-bezier(.66,0,.44,1);
--closed: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
--open: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}






/*-------------------------- Holding Themes -------------------------------*/

.black { color: black; background-color:white; }
.white { color: white; background-color:black; }
.cyan { color: black; background-color: cyan; }
.yellow { color: black; background-color: yellow; }
.magneta { color: black; background-color:magenta; }

/*-------------------------- Master ----------------------------------*/


html {
margin:0px;
scroll-behavior: smooth;
}



body {
position: relative;
margin:0px;
font-family: "futura-pt", sans-serif;
font-weight: 300;
font-style: italic;
font-style: normal;
}


p {
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size: 2.0em;
line-height: 1.25em;
margin:0px;
margin-bottom:20px;
text-transform: uppercase;
}


a {
position: relative;
color:inherit;	
}



h1 {
font-family: "futura-pt", sans-serif;
font-weight: 800;
font-style: italic;
font-size: 12.0em;
line-height: 1.0em;
text-transform: uppercase;
margin: 0px;
letter-spacing: -20px;
margin-bottom: 25px;
}


h2 {
font-family: "futura-pt", sans-serif;
font-style: italic;
font-weight: 600;
font-size: 4.8em;
line-height: 0.8em;
margin: 0px;
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: -8px;
}

h3 {
font-family: "futura-pt", sans-serif;
font-style: italic;
font-size: 2.8em;
line-height: 1.0em;
margin: 0px;
margin-bottom: 25px;
}

h4 {
font-family: "futura-pt", sans-serif;
font-style: italic;
font-size: 2.6em;	
line-height: 1.0em;
margin: 0px;
}

h6 {
font-family: "futura-pt", sans-serif;
font-weight: 800;
font-style: italic;
font-size: 3.6em;
line-height: 1.0em;
text-transform: uppercase;
margin: 0px;
margin-bottom: 25px;
}



img {
position: relative;
display: block;
}

main {
position: relative;
min-height: 100dvh;
overflow: hidden;
z-index: 1;
}


footer {
width: 100%;
min-height: 777px;
z-index: 2;
color:white;
background-color: black;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: flex-end;
}


footer section {
position: relative;
padding: 60px 0px;
width: calc(100vw - 60px);
background-color: black;
display: grid;
gap: 25px;
grid-template-columns: 1fr;
justify-content: center;
justify-items: center;
margin: 50px 0px 111px 0px;
}

footer section:hover {
position: relative;
background-color: black;
}




footer section p {
text-align: center;
font-weight: 500;
margin: 0px;
}

footer section .logo img {
position: relative;
width: 240px;
height: auto;
}

footer section p.legal {
position: relative;
display: block;
color:#333333;
}

footer section .credits {
position: relative;
display: block;
grid-column: 2;	
filter: invert(.777);
}

footer section .newsletter {
position: relative;
display: flex;
border-top: 2px solid grey;
margin:25px 0px;
padding:25px 0px;
grid-column: span 2;
font-size: 0.85em;
}





footer form {
position: relative;
display: flex;
align-items: center;
font-family: 'Grtsk Tera Medium';
gap: 10px;

}

footer form label {
position: relative;
display: flex;
gap: 10px;
align-items: center;
}

footer form label span {
position: relative;
display: flex;
align-items: center;
}

footer form input {
font-family: 'Grtsk Tera Regular';
position: relative;
padding:10px;
}









nav {
position: fixed;
width: 100vw;
z-index: 111;
}


nav .logo {
position: absolute;
display: flex;
align-items: center;
width: 200px;
height: 50px;
top: 30px;
left: 30px;
transition: var(--cubique);
}


nav .logo img {
position: relative;
width: 100%;
height: auto;
}



nav .menu {
position: absolute;
display: flex;
top: 30px;
right: 30px;
margin:0px;
flex-direction: column;
align-items: flex-end;
transition: var(--cubique);
}



nav .menu.active {
position: absolute;
display: flex;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}




nav .menu .nav-menu  {
display: flex;
align-items: flex-end;
justify-content: flex-start;
flex-direction: column;
align-content: flex-end;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: var(--cubic);
}


nav .menu .nav-menu.active {
display: flex;
align-items: flex-end;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}






nav .menu .nav-menu h4 {
font-size: 1.4em;
line-height: 1.0em;
margin: 0px; 
padding: 10px;
padding-left: 20px;
text-transform: uppercase;
background-color: #231f20;
color:white;
}

nav .menu .nav-menu h4 a {
position: relative;
text-decoration: none;
}


nav .menu .mobile-menu {
display: flex;
width: 50px;
height: 18px;
padding:16px 10px;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}


nav .menu .mobile-menu .line {
width: auto;	
height: 3px;
background-color: #231f20;
transition: var(--cubic);
}








section {
position: relative;
display: flex;
flex-direction: column;	
justify-content: center;
min-height: 100dvh;
width:100%;
height: auto;
z-index: 0;
align-items: center;
background-color:#E1E1E1;
transition: var(--cubic);
}


section:hover {
position: relative;
background-color:#FFFFFF;
}



section.marquee {
position: relative;
display: block;
}

section.section-xmas {
position: relative;
color:red;
background-color: navy;
}






#thetop {
position: relative;
left:0px;
}

#theme {
position: relative;
left:0px;
visibility: hidden;
}








/*-------------------------- A-Z ----------------------------------*/




.bg {
position: absolute;
z-index: -1;
left: 0px;
top:0px;
}

.bg img {
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
object-fit: cover;
}

.button {
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size: 1.8em;
line-height: 1.25em;
margin: 0px;
margin-bottom: 20px;
text-transform: uppercase;
position: relative;
padding: 15px 30px;
border: 3px solid black;
}



.button::after {
content: '';
position: absolute;
left:0px;
top:0px;
background-color: black;
width:0%;
height: 100%;
z-index: -1;
transform: translate(0,0);
transition: var(--cubic);
}

.button:hover {
position: relative;
color:white;
}



.button:hover::after {
width:100%;
height: 100%;
}
 
.button a {
position: relative;
text-decoration: none;
display: flex;
flex-direction: row;
align-items: center;
}

.button a i {
font-size: 1.4em;
margin-right: 20px;
}



.bio {
position: relative;
padding: 75px 0px;
width: calc(100vw - 60px);
max-width: 1600px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}





.clients {
position: relative;
padding: 75px 0px;
padding-bottom: 150px;
width: calc(100vw - 60px);
max-width: 1600px;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap:100px 250px;
}



.clients h2 {
position: relative;
text-align: center;
grid-column: 1 / span 4;
}



.clients img {
position: relative;
transition: var(--cubic);	
}


.clients img:hover {
position: relative;
transform: translateY(-15px);
}









.collapsibles {
position: relative;
max-width: 1600px;
width: calc(100vw - 60px);
padding: 90px 30px;		
}


.collapsibles .main {
position: relative;
margin-top: -25px;
}

.collapsibles .collapsible {
position: relative;
display: flex;
flex-direction: column;
border-bottom: 3px solid black;
}




.collapsibles .collapsible .header {
position: relative;
display: flex;
padding: 25px 0 0 0px;	
justify-content: space-between;
align-items: center;
cursor: help;
transition: var(--cubic);
}


.collapsibles .collapsible .header:hover {
position: relative;
filter: invert(0.3333)
}





.collapsibles .collapsible .expander {
position: relative;
padding: 0px 0px 0px 0px;
display: none;
margin-bottom: 50px;
}


.collapsibles .collapsible .expander p {
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size: 2.0em;
line-height: 1.25em;
text-transform: none;
}


.collapsibles .collapsible .expander ul {
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size: 2.0em;
line-height: 1.15em;
margin:0px;
margin-bottom: 20px;
text-transform: none;
}



.collapsibles .collapsible.active .expander {
position: relative;
display: block;
}









.carousel {
display: flex;
flex-wrap: nowrap;
height: 100vh;
cursor: none;
}



.carousel img {
position: relative;
height: 100vh;
width: auto;
}


.carousel .card video {
position: relative;
height: 100vh;
width: auto;
}

.carousel .mastercard {
position: absolute;
z-index: 111;
align-items: center;
bottom: -50px;
left: -15px;
filter: invert(1);
}



.carousel .mastercard h1 {
font-size: 15.0em;
line-height: 1.0em;
margin-bottom: 0px;
}


.carousel .mastercard .carousel-arrow img {
position: relative;
width: 540px;
height: 40px;
}












.cursordx {
height: 111px;
width: 111px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
pointer-events: none;
position: fixed;
top: 0;
left: 0; 
transform: translate(-50%, -50%) scale(0.001);
z-index: 100;
}


.cursordx::after {
content: '\f07e';
font-family: 'Font Awesome 6 Pro';
font-weight: 300;
-webkit-font-smoothing: antialiased;
position: relative;
color: white;
font-size: 2.2em;
z-index: 1;
}











.hero {
position: relative;
display: flex;
flex-direction: column;
width: calc(100% - 60px);
padding: 0px 30px;
max-width: 1600px;
height: 100dvh;
justify-content: flex-start;
align-content: center;
align-items: center;
overflow: hidden;
}




.invert {
filter: invert(1);
}




.mixes {
position: relative;	
padding: 75px 0px;
}

.mixes h2 {
display: flex;
align-items: center;
justify-content: center;	
}

.mixes .content {
display: flex;
justify-content: center;
}




.marqcase {
width: 100%;
overflow: hidden;
margin-bottom: 75px;
cursor: none;
}


.marqcase .inner {
height: 100%;
width: 100%;
}

.marqcase .mx {
gsap: "class for gsap only";
width: fit-content;
}


.marqcase .marq {
height: 100%;
width: fit-content;
display: flex;
position: relative;
will-change: transform;
align-items: flex-start;
}




.marqcase .marq a {
color: inherit;
text-decoration: none;
    cursor: none;
}


.marqcase .marq .mix {
position: relative;
width: 420px;
margin:0px;
margin-right: 50px;
overflow: hidden;
display: grid;
gap: 25px;
cursor: none;	
}

.marqcase .marq .mix img {
position: relative;
width:100%;
height: auto;
margin
}


.marqcase .marq .mix:first-of-type {
position: relative;
margin-left: 50px;
}

.marqcase .marq .mix:last-of-type  {
position: relative;
margin-right: 50px;
}

.marqcase .marq .mix h1 {
font-family: "futura-pt", sans-serif;
font-size: 3.0em;
line-height: 0.75em;
letter-spacing: -4px;
margin-bottom: 0px;
}


.marqcase .marq .mix p {
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size: 1.4em;
line-height: 1.0em;
margin: 0px;
text-transform: uppercase;
}

.marqcase .marq .mix ul {
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-size: 1.0em;
line-height: 1.8em;
text-transform: uppercase;
position: relative;
margin: 0px;
padding: 0px;
display: block;
list-style: none;
}

.marqcase .marq .mix ul li {
display: inline-block;
border: 1px solid;
padding: 0px 5px;
margin-right: 10px;
margin-bottom: 10px;
}








.main {
width: calc(100% - 60px);
position: relative;
display: flex;
flex-direction: row;
z-index: 0;
padding: 90px 30px 60px 30px;
}

.main.right{
position: relative;
display: flex;
flex-direction: row-reverse;
}

.main .details {
padding: 50px;
display: flex;
flex: 1;
align-items: flex-start;
flex-direction: column;
width: 50%;	
}

.main.right .details {
padding: 50px 50px 50px 0px;
}


.main .image {
position: relative;
flex: 1;
width: -webkit-fill-available;
height: -webkit-fill-available;	
}

.main .image img {
width: calc(100% - 0px);
min-height: calc(100vh - 150px);
object-fit: cover;
}

.main .details .button {
position: relative;
padding: 15px 30px;
border: 3px solid black;
}


.main .details .button::after {
content: '';
position: absolute;
left:7px;
top:7px;
background-color: black;
width:100%;
height: 100%;
z-index: -1;
transform: translate(0,0);
transition: var(--cubic);

}


.main .details .button:hover::after {
left:0px;
top:0px;
}


.main .details .button a {
text-decoration: none;
font-size: 0.85em;
line-height: 1.0em;
cursor: none;
}






.playlists  {
position: relative;
padding: 75px 0px;
width: calc(100vw - 60px);
max-width: 1600px;
align-items: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 50px;
}

.playlists .overview {
position: relative;
grid-column: 1 / span 3;
align-items: center;
display: flex;
flex-direction: column;
align-content: center;
text-align: center;
}

.playlists .cta {
position: relative;
grid-column: 1 / span 3;
align-items: center;
display: flex;
flex-direction: column;
align-content: center;
text-align: center;
}








.picture {
position: relative;
display: block;
height: 100dvh;
}

.picture img {
width: 100vw;
height: 100%;
object-fit: cover;
}


.sorry {
position: relative;
display: flex;]
width: calc(100vw - 60px);
min-height: 100dvh;
flex-direction: row;
z-index: 0;
padding: 30px;
align-items: center;
}




.youtube  {
position: relative;
padding: 75px 0px;
align-items: center;
display: flex;
flex-direction: column;
}

.youtube .overview {
position: relative;
width: calc(100vw - 60px);
max-width: 1600px;
align-items: center;
display: flex;
flex-direction: column;
align-content: center;
text-align: center;
margin-bottom: 30px;
}


.youtube .swiper-slide iframe,
.youtube .swiper-slide object,
.youtube .swiper-slide embed { 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



.xmas {
position: relative;
width: calc(100vw - 60px);
max-width: 1600px;
align-items: center;
display: grid;
justify-content: center;
text-align: left;
grid-template-columns: 1fr 1fr;
gap:50px;
}


.xmas .image img {
position: relative;
width:100%;
height: auto;
}