/* Sprite files */

/* https://codepen.io/luclemo/pen/xbMdEx */
.dotted-border {
	border-image-source: url(../../img/graphics/dots.svg);
	border-image-slice: 33% 33%;
	border-image-repeat: round;
}
.loading,
.lightbox ul li {
	background-image: url(../../img/graphics/loading.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 90px 90px;
}
.sprite {
	background-image: url(../../img/sprites/sprites.png);
	background-repeat: no-repeat;
}

/* Retina displays */

@media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
only screen and ( min-device-pixel-ratio: 2 ) {
	.sprite {
		background-image: url( ../../img/sprites/sprites@2x.png );
		background-size: 400px 310px;
	}
}

/* ---------------------------------------------------------
//
//  IMAGES
//
// -------------------------------------------------------*/

/* Blacks */

.black-33 {
	background-image: url(../../img/misc/black-33.png);
	background-repeat: repeat;
}
.black-50 {
	background-image: url(../../img/misc/black-50.png);
	background-repeat: repeat;
}
.black-66, 
.popup {
	background-image: url(../../img/misc/black-66.png);
	background-repeat: repeat;
}
.black-80 {
	background-image: url(../../img/misc/black-80.png);
	background-repeat: repeat;
}
.black-90,
.popup.lightbox {
	background-image: url(../../img/misc/black-90.png);
	background-repeat: repeat;
}

/* Whites */

.white-80 {
	background-image: url(../../img/misc/white-80.png);
	background-repeat: repeat;
}

/* ---------------------------------------------------------
//
//  SPRITES
//
// -------------------------------------------------------*/

/* Monogram + Logotype (monogram + name) */

.icon.logotype .sprite,
.icon.monogram .sprite {
	background-position: 0 0;
	height: 60px;
	width: 310px;

	/*width: 60px;*/
}
.icon.monogram .sprite {
	width: 60px;
}
.icon.logotype a:hover .sprite,
.icon.monogram a:hover .sprite {
	background-position: 0 -61px;
}
.icon.logotype a:active .sprite,
.icon.monogram a:active .sprite {
	background-position: 0 -246px;
}

/* Monogram */

@media screen and (min-width: 850px) {

	body.scrolled #header.is-sticky .icon.monogram .sprite {
		background-position: -263px -122px;
		width: 45px;
		height: 45px;
	}
	body.scrolled #header.is-sticky .icon.monogram a:hover .sprite {
		background-position: -309px -122px;
	}
	body.scrolled #header.is-sticky .icon.monogram a:active .sprite {
		background-position: -355px -122px;
	}
}

/* Monogram small */

.icon.monogram.small .sprite {
	background-position: -73px -122px;
	width: 30px;
	height: 30px;
}
.icon.monogram.small a:hover .sprite {
	background-position: -104px -122px;
	opacity: 1;
}
.icon.monogram.small a:active .sprite {
	background-position: -135px -122px;
}

/* Name */

.icon.name .sprite {
	background-position: -65px 0;
	height: 60px;
	width: 245px;
}
.icon.name a:hover .sprite {
	background-position: -65px -61px;
}
.icon.name a:active .sprite {
	background-position: -65px -246px;
}

/* JJH portrait */

.icon.jjh .sprite {
	background-position: 0 -210px;
	width: 35px;
	height: 35px;
}

@media screen and (max-width: 850px) {
	.icon.jjh .sprite {
		background-position: -208px -184px;
		width: 25px;
		height: 25px;
	}
}

/* Nav */

.icon.close .sprite {
	background-position: -42px -122px;
}
.icon.close.small .sprite {
	background-position: 0 -184px;
	width: 25px;
	height: 25px;
}

.icon.next .sprite {
	background-position: -21px -122px;
	width: 20px;
	height: 30px;
}
.icon.next.small .sprite {
	background-position: -52px -184px;
	width: 25px;
	height: 25px;
}

.icon.prev .sprite {
	background-position: 0 -122px;
	width: 20px;
	height: 30px;
}
.icon.prev.small .sprite {
	background-position: -26px -184px;
	width: 25px;
	height: 25px;
}

/* Accents */

.icon.everything .sprite {
	background-position: -182px -184px;
	width: 25px;
	height: 25px;
}
.icon.audio .sprite {
	background-position: -130px -184px;
	width: 25px;
	height: 25px;
}
.icon.book .sprite {
	background-position: -156px -184px;
	width: 25px;
	height: 25px;
}
.icon.chronology .sprite {
	background-position: -234px -184px;
	width: 25px;
	height: 25px;
}
.icon.star .sprite,
.icon.featured .sprite {
	background-position: -104px -184px;
	width: 25px;
	height: 25px;
}
.icon.video .sprite {
	background-position: -78px -184px;
	width: 25px;
	height: 25px;
}

/* Social */

.icon.facebook .sprite {
	background-position: -124px -153px;
}
.icon.instagram .sprite {
	background-position: -31px -153px;
}
.icon.linkedin .sprite {
	background-position: -155px -153px;
}
.icon.linktree .sprite {
	background-position: -186px -153px;
}
.icon.substack .sprite {
	background-position: -62px -153px;
}
.icon.twitter .sprite {
	background-position: 0 -153px;
}
.icon.youtube .sprite {
	background-position: -93px -153px;
}

/* Creative Commons */

.icon.cc-a .sprite {
	background-position: 0 -113px;
}
.icon.cc-nc .sprite {
	background-position: -31px -113px;
}
.icon.cc-sa .sprite {
	background-position: -62px -113px;
}