/* ==========================================
   ASHES – PAIRVIEW
   ========================================== */

.pairview_flex {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

.pairview_flex > div {
	padding: 5px 10px;
	margin: 2px 10px;
}


/* ==========================================
   KATEGORIEN
   ========================================== */

.pairview_cat {
	background: rgba(7, 7, 16, 0.8);
	color: #bdbdc8;

	border-top: 1px solid #4A3A75;
	border-bottom: 1px solid #4A3A75;

	padding: 9px 12px;

	text-align: center;

	font-size: 11px;
	font-weight: bold;

	letter-spacing: 3px;
	text-transform: uppercase;
}


/* ==========================================
   PAARE
   ========================================== */

.pairview_pairs {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}


/* Das Paar selbst immer mittig */

.pairview_pair {
	width: 100% !important;

	display: flex !important;
	justify-content: center !important;
	align-items: center !important;

	margin: 20px auto !important;
	padding: 0 !important;

	position: relative;

	flex-wrap: nowrap !important;
}


/* ==========================================
   PERSONEN
   ========================================== */

.pairview_lovers {
	padding: 5px 10px;

	margin: 0 25px;

	text-align: center;

	position: relative;
	z-index: 2;

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	align-items: center;
}


/* ==========================================
   BILDER
   ========================================== */

.pairview_lovers_pic {
	width: 90px;
	height: 90px;

	padding: 4px;

	border-radius: 50%;

	border: 1px solid rgba(149, 103, 230, 0.7);

	background: #070710;

	box-sizing: content-box;

	text-align: center;

	box-shadow:
		0 0 0 rgba(149, 103, 230, 0),
		inset 0 0 8px rgba(149, 103, 230, 0.08);

	transition:
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		transform 0.35s ease;
}


.pairview_lovers_pic img {
	width: 90px;
	height: 90px;

	border-radius: 50%;

	object-fit: cover;

	display: block;

	transition: filter 0.35s ease;
}


/* ==========================================
   HOVER
   ========================================== */

.pairview_lovers_pic:hover {
	border-color: #B78CFF;

	box-shadow:
		0 0 8px rgba(149, 103, 230, 0.6),
		0 0 20px rgba(149, 103, 230, 0.3),
		0 0 35px rgba(149, 103, 230, 0.12);

	transform: scale(1.05);
}

.pairview_lovers_pic:hover img {
	filter: brightness(1.08);
}


/* ==========================================
   NAMEN
   ========================================== */

.lovername {
	width: 100%;

	margin: 4px 0;

	text-align: center;

	color: #bdbdc8;

	font-size: 10px;

	line-height: 1.5;

	letter-spacing: 1.5px;

	text-transform: uppercase;

	white-space: nowrap;

	position: relative;

	z-index: 3;
}


/* ==========================================
   GROSSES &
   ========================================== */

.pairview_and {
	position: absolute;

	left: 50%;
	top: 50%;

	transform: translate(-50%, -50%);

	color: #9567E6;

	font-size: 100px;

	line-height: 1;

	opacity: 0.13;

	z-index: 1;

	pointer-events: none;

	text-align: center;

	text-indent: 0;

	text-transform: uppercase;

	text-shadow:
		0 0 15px rgba(149, 103, 230, 0.2);
}


/* ==========================================
   LÖSCHEN / EDITIEREN
   ========================================== */

.pairview_options {
	position: absolute !important;

	left: 50% !important;
	bottom: 5px !important;

	transform: translateX(-50%) !important;

	width: max-content !important;

	margin: 0 !important;
	padding: 0 !important;

	text-align: center !important;

	font-size: 9px;

	opacity: 0.55;

	z-index: 10;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {

	.pairview_lovers {
		margin: 0 10px;
		padding: 5px;
	}

	.pairview_lovers_pic {
		width: 75px;
		height: 75px;
	}

	.pairview_lovers_pic img {
		width: 75px;
		height: 75px;
	}

	.lovername {
		font-size: 9px;
		letter-spacing: 1px;
	}

	.pairview_and {
		font-size: 80px;
	}
}