/* david@dpow.net */
/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;300;400;500&family=Mukta:wght@300;400;500&display=swap'); */


/* Stuff */
/* .container {
	width: 50vw;
	height: 50vw;
	margin: 0 auto;
	border: 1px solid black;	
} */

.hover-list {
	/*background-color: #c6c6c6;*/
	background-color: #0d0d0d;
	background-color: #121212;
	padding: 1em 0 0 0;

}

.hover-list:first-child {
	margin-top: 2em;
}


.hover-list ul, .hover-list li {
	list-style: none;
	list-style-position: inside;
	margin: 0;
	padding: 0;

}

.hover-list a {
	text-decoration: none;
	color: #000;
}

.hover-list a:hover {
	text-decoration: underline;

}

.hover-list ul {
	width: 94vw;
	margin: 0 3vw;
	cursor: default;
}

.hover-list ul li a {
	cursor: pointer;
}

.hover-list ul li {
	border-top: 1px solid rgba(255,255,255,.2);
	border-width: 1px 0;
	padding: 1.6em 0 1.4em 2vw;
	padding-left: 0;

}

.hover-list ul li:first-of-type {
	border-top: 1px solid rgba(255,255,255,.2);

}

.hover-list ul li:last-of-type {
	border-bottom: 1px solid rgba(255,255,255,.2);
}



/* Show and hide images */
.hover-object .hover-img {
   position: fixed;
   visibility: hidden;
   opacity: 1;
   transition: opacity 0.5s;
   height: 450px;

}

.hover-object:hover .hover-img {
    position: fixed;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s;

}

a.link1:hover .hover-img {
	position: fixed;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s;

}

/* .hover-object:focus .hover-img {
    position: fixed;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s;

}

.hover-object:active .hover-img {
    position: fixed;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s;

} */





/* List item/Collection title*/
.hover-list h2 {
	color: #fff;
	font-family: graphik-regular, sans-serif;
	text-transform: uppercase;
	margin-left: 3vw;
	padding-bottom: .5em;
	/*font-size: 42px;*/
	font-size: 1rem;
	font-family: graphik-regular, sans-serif;
}



/* List item type style*/
.hover-object a {
	/*font-size: 28px;*/
	/* font-family: graphik-regular, arial;
	font-family: Basis Grotesque Pro Off-White, sans-serif; */
	color: #fff;
	transition: color 0.25s;
	text-decoration: none;
}

/* List item name*/
.hover-object h3 {
	/*font-size: 36px;*/
	/*line-height: 1.3em;*/
	font-size: 26px;
	font-family: graphik-light;
	font-weight: 300;
	font-family: graphik-light;
	font-family: var(--body-fam);

	
}

/* .badgeLink {
	float: right;
	padding: 3px 12px;
} */

/* .badgeRecent {
	box-sizing: border-box;
	color: rgb(240, 246, 252);
	font-family: source-code-pro, sans-serif;
	font-size: 0.6em;
	line-height: 21px;
	margin-left: 8px;
	padding: 6px 18px;
	background-color: rgb(33, 40, 48);
	border-color: rgb(61, 68, 77);
	border-radius: 6px;
	border-style: solid;
	border-width: 1px;
	vertical-align: middle;
} */

/* BADGES */
.recentBadge {
	background-color: #8ee0b0;
	background-color: #111b15;
	background-color: rgb(33, 40, 48);
  	color: rgb(18, 18, 18);
	color: rgb(240, 246, 252);
	color: #fff;
	font-size: .6em;
	border-radius: 5px;
 	text-align: center;
	margin: 0 .3em;
	padding: 6px 18px;
	line-height: 21px;
	margin-left: 8px;
	padding: 6px 18px;
	border-color: rgb(61, 68, 77);
	/* border-color: #8ee0b0; */
	border-radius: 6px;
	border-radius: 6px;
	border-style: solid;
	border-width: 1px;
	position: absolute;
	top: -6px;
}

.hoverBadge {
	display: inline-block;
	float: right;
}

div.recentBadge {
	/* align-items: center; */
	display: flex;
	/* grid-template-columns: "leadingVisual text trailingVisual"; */
	position: relative;
	text-transform: uppercase;
	font-family: source-code-pro, sans-serif;
	font-weight: 400;
	vertical-align: middle;
}

.counter {
	border-radius: 30%;
	font-size: .8em;
	grid-area: text;
	vertical-align: middle;
}

.noti {
	font-family: source-code-pro, sans-serif;
	margin-left: 0.5em;
	background-color: rgba(255,255,255,.1);
	padding: 0 .4em;
	border-radius: 50%;
	vertical-align: middle;
}

.noti span {
	color: #fff;
	font-weight: 500;
	vertical-align: middle;
	font-size: 12px;
}

/* div.indicator {
	position: absolute;
    top: -10px;
  	right: -10px;
   padding: 0px 7px;
    background-color: brown;
	border: 2px solid rgb(51, 51, 51);
	
    border-radius: 24px;
    justify-content: center;
    align-items: center;
	font-size: .8em;
} */




/* RECENTLY */
.recently {
	font-size: 0.7em;
	vertical-align: middle;
	font-style: italic;
	color: #8ee0b0;
	
}

.recentItem {
	color: #fff;
	font-weight: 200;
	font-size: 0.7em;
	font-style: italic;
}

/* span.recently:hover > .recently-proj {
	color: red;
} */


.type-thin {
	/*font-family: 'IBM Plex Sans', sans-serif;*/
	/*font-family: basis grotesque pro, sans-serif;
	font-weight: 300;*/
	/*color: hsla(0, 0%, 100%, 0.5);*/
	/*color: #fff;*/
	color: hsla(0, 0%, 100%, 0.5);
	transition: color 0.5s;
}


.hover-list ul li a h3 {
	
}




/* span.recent {
	vertical-align: middle;
} */


/* Dot style */
.circle {
	display: inline-block;
	width: 2%;
	height: 0;
	padding-bottom: 2%;
	border-radius: 50%;
	margin: 0 1%;
}



.hover-list li, .hover-list a {
	color: #fff;
}


.hover-list ul:hover a, .hover-list ul:hover .type-thin {
    /*opacity: .5;*/
    /*color: #898989;*/
    color: hsla(0, 0%, 100%, 0.5);
	text-decoration: none;
}	

.hover-list ul li:hover a, .hover-list ul li:hover .type-thin {
    /*opacity: 1;*/
    color: #fff;
}

.hover-list ul:hover li .hover-img {
	opacity: 1;
}

/* .hover-object h3 {
	transition-duration: 3s;
} */



@media screen and (max-width: 660px) {
	.circle {
		width: 5%;
		padding-bottom: 5%;
		transform: translate(0, 2px);
	}

	.type-thin {
		font-size: 0.9em;
	}

	.hover-object h3 span:nth-of-type(3) {
		display: block;
		font-size: .8em;
		
	}



}