/* ================================================================================================ */
/* ========================== ELEMENTS ============================================================ */
/* ================================================================================================ */

body {
	font-family: "Verdana", sans-serif;
	font-size: 16px;
	color: #ffffff;
	background-color: #080808;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	overflow-x: hidden;
	position: relative;
}

h1 {
	opacity: 0.1;
	font-size: 8px;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}

section {
	font-size: 20px;
	color: #ffc107;
	background: linear-gradient(7deg, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.1) 80%);
	padding: 8px 16px;
	border-radius: 6px;
}

table tr th {
	white-space: wrap;
}
table tr td {
	color: #ffffff;
	white-space: wrap;
}

/* ================================================================================================ */
/* ========================== MODAL =============================================================== */
/* ================================================================================================ */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0, 0.5);
}
.modal-content {
	width: max-content;
	margin: 10vh auto;
	padding: 20px;
	border: 1px solid #ffc107;
	border-radius: 6px;
	background-color: rgb(0, 0, 0, 0.9);
}
.modal-close {
	padding: 2px 10px 2px 10px;
}

/* ================================================================================================ */
/* ========================== MY CLASSES ========================================================== */
/* ================================================================================================ */

.my-color-gold {
	color: #ffc107;
}

.my-border-gold {
	border: 1px solid #ffc107;
}

.my-background-layer-1 {
	position: fixed;
	width: 100%;
	height: 100vh;
	background: radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 100%);
	/* background: radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.1241) 21.35%,rgba(0,0,0,.73) 85.42%); */
	/* https://cssgradient.io */
	z-index: -1;
}
.my-background-layer-2 {
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: -2;
}
.my-background-img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

.my-page {
	min-width: 320px;
	max-width: 1008px;
	margin: auto;
}

.my-logo {
	padding: 6%;
}

.my-menu {
	font-family: "Permanent Marker", "Audiowide", "Verdana", sans-serif;
	font-size: 20px;
}
.my-menu-large {
	padding: 6%;
}
.my-menu-small {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	background: radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.99) 0%,rgba(0,0,0,.9) 100%);
	z-index: 999!important;
}
.my-menu-small-show {
	transition: transform .5s;
	transform: translateX(0%);
}
.my-menu-small-hide {
	transition: transform .5s;
	transform: translateX(100%);
}
.my-menu-item {
	color: #ffc107;
	background: rgba(0, 0, 0, 0.5);
	transition: all 1.0s ease;
}
.my-menu-item:hover,.my-menu-item:focus {
	color: black!important;
	background: #ffc107!important;
	cursor: pointer;
}

.my-link {
	padding: 6%;
}
.my-link-grayscale-transition {
	border: 1px solid white;
	border-radius: 6px;
	opacity: 0.5;
	filter: grayscale(100%);
	transition: all 1.0s ease;
}
.my-link-grayscale-transition:hover {
	border: 1px solid #ffc107;
	opacity: 1.0;
	filter: grayscale(0%);
}

.my-item {
	padding: 4px;
}
.my-item-href {
	color: #ffc107;
	background: rgba(0, 0, 0, 0.5);
	transition: all 1.0s ease;
}
.my-item-href:hover,.my-item-href:focus {
	color: black!important;
	background: #ffc10799!important;
	cursor: pointer;
}
.my-item-less-infos,.my-item-less-news,.my-item-less-concerts,.my-item-less-videos,.my-item-less-photos,.my-item-less-disks,.my-item-less-merch,.my-item-less-contacts {
	display: block;
}
.my-item-more-infos,.my-item-more-news,.my-item-more-concerts,.my-item-more-videos,.my-item-more-photos,.my-item-more-disks,.my-item-more-merch,.my-item-more-contacts {
	display: none;
}