/*
Theme Name: soulfrost.com
Theme URI: http://soulfrost.cpm/
Version: 1.0
Description: Discography of Chris Johnson
Author: Cj
Author URI: http://frxst.ca/
*/

/* Global reset-RESET */
/* The below restores some sensible defaults */
html {
	scroll-behavior: smooth;

  }
  
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */
p { padding:0; margin:0; }

body { 	
	background-color: #353535;
	font-family: 'Maven Pro', sans-serif;
	color: #848484;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	}

A:link { text-decoration: none; color: #ccc; transition: all .3s; }
A:visited { text-decoration: none; color: #ccc; }	
A:active { text-decoration: none; color: #ccc; }
A:hover { text-decoration: none; color:#a49272; }

/* Active menu items */
img {
	max-width:100%;
	height:auto;
	}


/* header */

#cycler {
    position: relative;
	}

#cycler img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    animation: dreamfade 24s infinite;
    animation-timing-function: ease-in-out;
    will-change: opacity;
	}

/* 4 images × 6s spacing */
#cycler img:nth-child(1) { animation-delay: 0s; }
#cycler img:nth-child(2) { animation-delay: 6s; }
#cycler img:nth-child(3) { animation-delay: 12s; }
#cycler img:nth-child(4) { animation-delay: 18s; }

@keyframes dreamfade {
    0%   { opacity: 0; }
    25%  { opacity: 0.9; }   /* ~3s fade in */
    50%  { opacity: 0.9; }   /* brief presence */
    75%  { opacity: 0; }     /* ~3s fade out */
    100% { opacity: 0; }
	}

.headerwrap {
	position: relative;
	display: flex; align-items: center; gap: 17px;
	width:100%; 
	margin: 40px 0 54px 0; 
	}

	.header_icon {
		position: relative; 
		width: 34px; height: 34px;
		box-shadow: rgba(0, 0, 0, 0.2) -7px 7px 8px 2px;
		z-index: 9999;
		}




.whowrap {
	position:relative;
	display: flex; flex-direction: column; justify-content: space-between;
	width: 300px;
	font-size:13px; letter-spacing:1px; text-transform:uppercase;
	}
	
.who {
	position:absolute;
	top:1px;
	left:0px;
	}
	
.pocj {
	position:relative; 
	margin-top:19px; 
	color:#777 !important;
	}

.menu {
	font-size: 13px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-transform: lowercase;
    letter-spacing: 2px;
    width: 100%;
    justify-content: flex-end;
	}
	.menu a {
		position: relative;
		letter-spacing: 4px;
		}

/* Index */
.indexwrap {
    position: relative;
    display: flex; flex-direction: column;
    width: 100%;
    margin: 0 0 67px 0;
	}

	.content-title {
		position:relative; 
		width:100%; 
		height:auto; 
		font-size:13px; 
		letter-spacing:1px; 
		margin-bottom:10px;
		color: #777;
		}

	.itemwrap {
		margin-right: -10px;
		}

		.item {
			display: flex;
			width: 100%;
			gap: 3%;
			}

		.item a { 
			position: relative;
			display: block;
			width: 67px; height: 67x;
			aspect-ratio: 1;
			}


			.item img {
				display:block;
				width: 100%; height: 100%;
				transition: all .3s;
				border: 2px rgb(255 255 255 / 20%) solid;
				border-radius: 5px;
				box-sizing: border-box; 
				}
				
			.item:hover img {
				opacity: .3;
				}
				
			.item img:hover {
				opacity: 1;
				border: 2px rgb(255 255 255 / 80%) solid;
				}

.discomain {
    position: relative;
    display: flex;
    gap: 17px;
    width: 100%;height: auto;
    font-size: 13px;
	}

.discoinfo {
	display: flex; flex-direction: column;
    gap: 30px;
	background: #2a2a2a; background: linear-gradient(0deg,rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.4) 100%);
    width: 100%;
    padding: 20px;
    box-sizing: border-box; border-radius: 5px;
	}

.discotitle {
    display: flex; flex-direction: column;
    color: rgba(255, 255, 255, .7);
    font-size: 16px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
	}
	.discotitle span { color: #a49272; }

.discotracks {
	display: flex; flex-direction: column;
	gap: 10px;
	}


.discoimg {
    width: 34%; height: fit-content;
	aspect-ratio: 1;
    border-radius: 5px;
    box-shadow: -7px 7px 12px rgb(0 0 0 / 25%), 8px -8px 10px rgb(184 184 184 / 10%);
	}

.remixmain {
	position:relative;
	width:100%;
	height:auto;
	font-size:13px;
	}
	
.remiximg {
	float:left;
	width:10%;
	}

.remixinfo {
	float:left;
	width:61.82%;
	box-sizing: border-box;
	margin-left:20px;
	}

.mixesimg {
	float:left;
	width:7%;
	}
	
/* Hidden Divs */

/* Close Button */
.closebutton {
    float: right;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url("images/close.png") no-repeat scroll right top transparent;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
	margin-bottom:10px;
	}

.closebutton:hover {
    opacity: 1;
	}

#slidingDiv, #slidingDiv_2 {
	height:auto;
	margin-bottom:50px;
	display:none;
	}
	
.hellowrap {
	position:relative;
	height:auto;
	width:100%;
	display:table;
	background-color: #2a2a2a;
	margin: 0 0 0 0;
	padding: 20px;
	box-sizing: border-box;
	clear: both;
	}

.contacttxt {
	position:relative;
	width:35%; 
	float:left;
	margin: 0 0 0 20px;
	padding-left: 20px;
	border-left: solid 1px #555;
	text-align:left;
	}

.contactimg {
	float:left; 
	width: 60%;
	}

.helloimg {
	float:right;
	margin: 0 0 0 20px;
	}

/* Footer */
.footerwrap {
	position:relative; 
	width: 100%; 
	height:auto; 
	margin: 0 0 50px 0;
	}

.footertext {
	font-size:11px; 
	letter-spacing:1px; 
	text-transform:uppercase;
	}
	
.footer-1 {
	color: #ccc !important; 
	}

	
@media (max-width: 1100px), (max-device-width: 1100px) {
	
	.item a { 
	position:relative;
	width: 55px; height: auto;
	margin-bottom: 10px;
	box-sizing: border-box;
	}
	
	.discoinfo {
	float:left;
	width:58.18%;
	}
}

@media (max-width: 900px), (max-device-width: 900px) {
	.world_bg {
		background: var(--background), #353535;
		background: var(--background), conic-gradient(from 362deg at 50% 100%, rgba(96, 133, 121, .4) 0%, rgba(53, 53, 53, 1) 1%);
	}

	.contactimg {
	width: 50%;
	}
	
	.helloimg {
	float:right;
	width:60%;
	margin: 0 0 10px 20px;
	}
	
	.discoinfo {
	float:left;
	}	
	
	
}

@media (max-width: 600px), (max-device-width: 600px) {
	.world_bg {
		background: var(--background), #353535;
		background: var(--background), conic-gradient(from 360.75deg at 50% 100%, rgba(96, 133, 121, .4) 0%, rgba(53, 53, 53, 1) 1%);
	}

	.headerwrap {
	margin: 40px 0 54px 0; 
	}
	
	.item a { 
	width: 45px; 
	}
	
	.whowrap {
	position:relative;
	height:auto;
	width:100%;
	display:table-cell;
	margin: 10px 0 10px 0;
	}
	
	.contacttxt {
	width:100%; 
	float:left;
	margin: 0 0 0 0;
	padding-left: 0px;
	border-left: solid 0px #555;	
	text-align:center;
	}
	
	.contactimg {
	display:none;
	}
	
	.helloimg {
	float:right;
	width:100%;
	margin: 0 0 20px 20px;
	}
	
	.lb-data .lb-details {
	width: 75%;
	}

	.discoinfo {
	float:left;
	width:100%;
	margin-left:0px;
	}
	
	.discomain { 
		flex-direction: column;
	}

	.discoimg {
		width:100%;
		}

	.remixinfo {
		width: calc(90% - 20px);
		}

}




/* Global font */
@font-face {
  font-family: 'Maven Pro';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/Maven-Pro-700/Maven-Pro-700.eot');
  src: url('fonts/Maven-Pro-700/Maven-Pro-700.eot?#iefix') format('embedded-opentype'),
       local('fonts/Maven Pro Bold'),
       local('fonts/Maven-Pro-700'),
       url('fonts/Maven-Pro-700/Maven-Pro-700.woff2') format('woff2'),
       url('fonts/Maven-Pro-700/Maven-Pro-700.woff') format('woff'),
       url('fonts/Maven-Pro-700/Maven-Pro-700.ttf') format('truetype'),
       url('fonts/Maven-Pro-700/Maven-Pro-700.svg') format('svg');
	}

@font-face {
  font-family: 'Maven Pro';
  font-weight: 500;
  font-style: normal;
  src: url('fonts/Maven-Pro-500/Maven-Pro-500.eot');
  src: url('fonts/Maven-Pro-500/Maven-Pro-500.eot?#iefix') format('embedded-opentype'),
       local('fonts/Maven Pro Medium'),
       local('fonts/Maven-Pro-500'),
       url('fonts/Maven-Pro-500/Maven-Pro-500.woff2') format('woff2'),
       url('fonts/Maven-Pro-500/Maven-Pro-500.woff') format('woff'),
       url('fonts/Maven-Pro-500/Maven-Pro-500.ttf') format('truetype'),
       url('fonts/Maven-Pro-500/Maven-Pro-500.svg') format('svg');
	}

@font-face {
  font-family: 'Maven Pro';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/Maven-Pro-regular/Maven-Pro-regular.eot');
  src: url('fonts/Maven-Pro-regular/Maven-Pro-regular.eot?#iefix') format('embedded-opentype'),
       local('fonts/Maven Pro Regular'),
       local('fonts/Maven-Pro-regular'),
       url('fonts/Maven-Pro-regular/Maven-Pro-regular.woff2') format('woff2'),
       url('fonts/Maven-Pro-regular/Maven-Pro-regular.woff') format('woff'),
       url('fonts/Maven-Pro-regular/Maven-Pro-regular.ttf') format('truetype'),
       url('fonts/Maven-Pro-regular/Maven-Pro-regular.svg') format('svg');
	}