/*
Theme Name: DJ Super K 
Theme URI: https://www.xyloworldwide.com
Author: XYLO Worldwide
Description: Super K Official Website Theme
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */





/*----------------------- core ---------------------------*/

* {
margin:0px;
}

:root {
--cubic: all 0.33s cubic-bezier(0,.82,.44,1);
--cubique: all 0.55s cubic-bezier(.66,0,.22,1);
--cubi: all 0.11s cubic-bezier(.66,0,.11,1);
}
	

html {
  scroll-behavior: smooth;
}


body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-color:#1E1E1E;
transition: var(--cubic);
color:white;
margin: 0;
display: flex;
flex-direction: column;
min-width: 100vw;
font-size: 1.0em;
}




h1 {
font-family: pennypacker-semiwide, sans-serif;
font-weight: 800;
font-size: 2.4em;
line-height: 1.0em;
margin-bottom: 20px;	
}


h2 {
font-family: pennypacker-semiwide, sans-serif;
font-weight: 600;
font-size: 2.0em;
line-height: 1.0em;
margin-bottom: 20px;	
}

h3 {
font-family: pennypacker-semiwide, sans-serif;
font-weight: 600;
font-size: 1.1em;
line-height: 1.0em;
margin-top: 25px;
margin-bottom: 5px;
}


h5 {
font-family: pennypacker-semiwide, sans-serif;
font-weight: 300;
font-size: 0.8em;
margin-bottom: 10px;
text-transform: uppercase;
text-decoration: underline;
}



p {
font-family: pennypacker-semiwide, sans-serif;
font-weight: 500;
font-style: normal;	
font-size: 1.1em;
line-height: 1.25em;	
margin-bottom: 10px;
}

p a {
color: white;
}


.anchor {
position: absolute;
left:0px;
top:0px;
}

.invert {
mix-blend-mode: difference;
}



section {
position: relative;
}




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


form {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
}

form input {
position: relative;
background-color:black;
color:peachpuff;
font-family: pennypacker-semiwide, sans-serif;
font-weight: 600;
font-style: normal;	
font-size: 0.9em;
line-height: 1.25em;	
padding: 10px 0px;
width: calc(100% - 20px);
border:0px;
border-bottom: solid 4px peachpuff;
margin-bottom: 10px;
transition: var(--cubic);
}

form textarea {
position: relative;
background-color:black;
color:peachpuff;
font-family: pennypacker-semiwide, sans-serif;
font-weight: 600;
font-style: normal;	
font-size: 0.9em;
line-height: 1.25em;	
width: calc(100% - 20px);
padding: 10px;
border: solid 4px peachpuff;
margin-top: 10px;
margin-bottom: 10px;
transition: var(--cubic);
}


form input[type="submit"] {
position: relative;
background-color:peachpuff;
color:black;
font-family: pennypacker-semiwide, sans-serif;
font-weight: 600;
font-style: normal;	
font-size: 0.9em;
line-height: 1.25em;	
padding: 10px 0px;
width: calc(100% - 20px);
border:0px;
border: solid 0px peachpuff;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
transition: var(--cubic);
}

form input[type="submit"]:hover {
background-color:white;
color:black;
}




footer {
position: fixed;
bottom: 0px;
display: flex;
justify-content: center;
align-items: flex-end;
min-width: 100vw;
z-index: 222;
transition: var(--cubic);
}





i {
font-weight: 400;
font-size:1.6em;
color: peachpuff;
padding: 25px;
margin-bottom: 0px;
transition: var(--cubi);
}

i:hover{
color: white;
margin-bottom: 10px;
}



nav {
position: fixed;
width: calc(100vw - 50px);
display: flex;
justify-content: space-between;
padding:25px;
z-index: 222;
transition: var(--cubic);
}

nav a {
position: relative;
font-family: pennypacker-wide, sans-serif;
font-weight: 900;
font-size: 1.0em;
text-transform: uppercase;
text-decoration: none;
color: peachpuff;
transition: var(--cubi);
cursor: pointer;
}

nav a:hover {
position: relative;
color: white;
}


nav a::after {
content: '';
position: absolute;
background-color: peachpuff;
bottom: -4px;
left:0px;
width: 0%;
height: 5px;
transition: var(--cubi);
}


nav a:hover::after {
position: absolute;
background-color: white;
width: 100%;
}


section .hero {
position: relative;
width:100vw;
height: 100vh;
}


section .bio {
background-color: peachpuff;
position: relative;
width: calc(100vw - 50px);
padding: 75px 25px;
max-width: 1800px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: stretch;
color:black;
}


section .bio img {
width: 100%;
height: auto;
object-fit: cover;
}

section:nth-of-type(odd) .bio {
padding: 0px 25px 75px 25px;
direction: rtl;
text-align: left;
}




section .clients {
background-color: peachpuff;
position: relative;
width: calc(100vw - 50px);
padding: 75px 25px;
max-width: 1800px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 50px 75px;
align-items: stretch;
color:black;
}

section .clients h5 {
position: relative;	
grid-column: 1 / span 6;
text-align: center;
margin-bottom: -50px;
}


section .clients img {
width: 100%;
height: auto;
filter: grayscale(1);
}





section .contact {
background-color: black;
position: relative;
width: calc(100vw - 50px);
padding: 75px 25px;
max-width: 1800px;
display: grid;
align-items: stretch;
grid-template-columns: 1fr 600px;
gap: 75px;
color:white;
}



section .contact img {
width: 100%;
height: auto;
object-fit: cover;
}

section .contact i {
font-weight: 400;
font-size: 1.1em;
color: white;
padding: 0px;
margin-bottom: 0px;
margin-right: 5px;
transition: var(--cubi);
}


section .contact .form {
position: relative;
margin-top: 50px;
}





section .credits {
background-color:#000016;
position: relative;
width: calc(100vw - 50px);
padding: 50px 25px 125px 25px;
max-width: 1800px;
display: flex;
color:peachpuff;
font-size: 0.8em;
flex-direction: column;
align-items: center;
}

section .credits .cob-logo img {
width: 166px;
height: auto;
margin-bottom: 33px;
}

section .credits .cob-credits {
position: relative;
display: flex;
flex-direction: row;
}

section .credits .cob-credits p {
color:peachpuff;
position: relative;
margin: 0px 25px;
}


section .credits .cob-credits p a {
position: relative;
color:peachpuff;
}








section .hero .swiper-logo {
position: absolute;
width: 100vw;
height: 100vh;
z-index: 111;
display: flex;
justify-content: center;
align-items: center;
}


section .hero .swiper-logo img {
position: relative;
width: 555px;
height: auto;
}




section .hero .swiper-slide {
background-color: black;
}


section .hero .swiper-slide img {
width:100vw;
height: 100%;
object-fit: cover;
opacity: 0.77;
transition: var(--cubic);
}


section .hero:hover .swiper-slide img {
opacity: 1.0;
transform: scale(1.088);
}





section .mixes {
background-color: white;
position: relative;
width: calc(100vw - 50px);
padding: 75px 25px;
max-width: 1800px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 75px;
align-items: stretch;
color:black;
}

section .mixes h2 {
position: relative;	
grid-column: 1 / span 2;
text-align: center;
margin-bottom: -25px;
margin-top:25px;
}


section .mixes .iframe {
position: relative;
width: 100%;
height: 400px;
z-index: 1;
}



section .mixes .iframe::after {
content: '';
position: absolute;
width:100%;
height: 100%;
left:25px;
top:25px;
background-color: peachpuff;
transition: var(--cubi);
z-index: -1;
}

section .mixes .iframe:hover::after {
width: calc(100% + 10px);
height: calc(100% + 10px);
}



















/*------------------------------ iPad Landscape (A-Z) ------------------------------ */


@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1279px) 
  and (orientation: landscape) {
	  
	  
	  
h1 { font-size: 2.0em; }	
	  
section .clients { grid-template-columns: auto auto auto auto auto; gap: 75px; }	
	
section .clients h5 { grid-column: 1 / span 5; }	
	
	  
	  

}













/*------------------------------ iPad Portrait (A-Z) ------------------------------ */

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait)  {

	  
  
	  
	  

	  
	  
body { font-size: 0.85em;	}
	
footer { font-size: 1.5em }
	
section .hero .swiper-logo img { width: calc(100vw - 300px); }
	
	
	
section .bio { grid-template-columns: 250px 1fr; }	
	
section .clients { grid-template-columns: auto auto auto; gap: 100px; }	
	
section .clients h5 { grid-column: 1 / span 3; }	
	
section .credits .cob-credits { display: flex; flex-direction: column; align-items: center; }	
	
section .credits .cob-credits p {    margin: 0px 0px 10px 0px; }


	
section .mixes { grid-template-columns: 1fr; gap: 75px;}	
	
section .mixes h2 {  grid-column: 1 / span 1; }
	
section .contact { grid-template-columns: 1fr; }
	
	
	
	  
	  
	  
}


















/*------------------------ iPhone Landscape (A - Z) (Lock Off) ----------------- */


@media only screen  and (min-device-width: 300px) 
and (max-device-width: 430px)  
and (orientation: landscape) { 
*{ display: none; } 
}


/*------------------------- iPhone 12 Pro Portrait (A - Z) -------------------- */

@media only screen 
and (min-device-width: 300px) 
and (max-device-width: 430px) 
and (orientation: portrait) { 

	
	
	
	
	  
	  
body { font-size: 0.7em;	}
	
footer { font-size: 1.5em }
	
section .hero .swiper-logo img {    width: calc(100vw - 100px); }
	
	
	
section .bio { grid-template-columns: 1fr; }	
	
section .clients { grid-template-columns: auto auto auto; gap: 25px; }	
	
section .clients h5 { grid-column: 1 / span 3; }	
	
section .credits .cob-credits { display: flex; flex-direction: column; align-items: center; }	
	
section .credits .cob-credits p {    margin: 0px 0px 10px 0px; }


	
section .mixes { grid-template-columns: 1fr; gap: 75px;}	
	
section .mixes h2 {  grid-column: 1 / span 1; }
	
section .contact { grid-template-columns: 1fr; }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}