﻿body {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-size: 1.2rem;
	color: #E7E2CF;
	background-color: black;
}

#header {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 600px;
	z-index: 1000;
}
.headin {
	width: 100%;
	text-align: center;
	cursor: pointer;
}
.act {
	text-align: center;
}
.img {
	width: 75%;
	opacity: 1 !important;
	margin: 0 auto;
	display: block
}


#menuparent {
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
	margin-bottom: 8px;
	padding: 0 6px;
	color: #fff;
	text-align: center;
	position: relative;
}
.logo {
	margin: 10px auto 0 auto;
	width: 98%;
	max-width: 600px;
	padding: 15px 0 0 0;
	background-color: transparent;
}

#background-video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

.is-visible {
	xxxdisplay: inline-block !important;
}
.dtxt {
	 text-align:left;
	 padding:14px;
}
.ddat {
	text-align: right;
	font-size: small;
	padding: 6px 0px 10px 6px;
	margin:20px 14px;
	border-bottom:3px solid white;
}
.last-item .ddat {
	border-bottom: none;
}
.cont {
	xxxbackground-color: rgba(0,0,0,1);
	xxxbackground-color: #000;
	color: #E7E2CF;
	padding: 30px 20px;
	xxxopacity: 0.8;
	xxxbackground-image: 10px;
	xxxheight: calc(100vh - 240px);
	xxxoverflow-y: auto;
}

.cont2 {
	background-color: #000;
	color: #E7E2CF;
	padding: 30px 10px;
	opacity: 0.7;
	border-radius: 10px;
	height: 65vh;
	display: inline-block;
}

.cont a {
	color: #E7E2CF;
}

.blck {
	display: none;
}

.link {
	width: 23px;
	height: 23px;
	vertical-align: middle;
	margin-right: 8px;
	margin-bottom: 2px;
	display: inline-block;
}

	.link.mg {
		margin-left: 20px;
	}

.link {
	mask-image: url(../img/logo_orph_white.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
}


.socs {
	display: inline-block;
	height: 50px;
	width: 19%;
	xxxbackground-color: #fff;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.8);
}

	.socs img {
		width: 80%;
		max-height: 90%;
		margin: 5px;
	}

	.socs a {
		width: 100%;
		height: 100%;
		display: block;
	}

#in1 a {
	color: orange;
}



#header.is-black {
	background-color: rgba(0,0,0,1);
}

#header.is-blacked {
	background-color: rgba(0,0,0,0.85);
}

#header {
	background-color: rgba(0,0,0,0.75);
}

.gigs {
	padding: 0;
	font-size: 0;
	margin-top: 10px;
}

	.gigs li .dt, .gigs li .inf {
		background-color: rgba(204,204,204,0.7);
		border-radius: 8px;
		padding: 5px 1%;
	}

	.gigs li .dt {
		width: 130px;
		text-align: center;
	}

	.gigs li .inf {
		width: calc(100% - 160px);
		background-color: rgba(255,255,255,0.65);
	}

	.gigs li.first .dt {
		background-color: rgba(255,0,0,0.7);
		color: #fff;
	}

	.gigs li div {
		display: inline-block;
		padding-right: 20px;
	}

	.gigs li {
		list-style-type: none;
		color: #000;
		margin: 3px 0 3px 1%;
		width: 98%;
		display: inline-block;
		font-size: 1.2rem;
	}

		.gigs li a {
			color: #000;
		}





.conts {
	padding: 0;
	font-size: 0;
	margin-top: 10px;
}

	.conts li div {
		display: inline-block;
		padding-right: 20px;
	}

	.conts li {
		background-color: rgba(255,255,255,0.75);
		border-radius: 8px;
		padding: 5px 1%;
		list-style-type: none;
		color: #000;
		margin: 3px 0 3px 1%;
		width: 46%;
		display: inline-block;
		font-size: 1.2rem;
	}

		.conts li a {
			display: block;
			width: 100%;
			height: 50px;
			line-height: 50px;
			color: #000;
			text-decoration: none;
		}








































.container {
	display: flex;
	justify-content: center;
}

iframe {
	width: 98%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: solid 1px #333;
	border-radius: 10px;
}

h2 {
	font-size: 1.2rem;
	margin: 4px 0 24px 0;
	font-weight: normal;
	text-align: left;
	padding-left: 5px;
}




.instagram {
	background: url(../img/Instagram2.png) no-repeat center center;
	background-size: auto 80%;
}

.youtube {
	background: url(../img/YouTube-Logo.wine.svg) no-repeat center center;
	background-size: auto 180%;
}

.facebook {
	background: url(../img/fb4.png) no-repeat center center;
	background-size: auto 70%;
}
.spotify {
	background: url(../img/Spotify_logo_with_text.svg) no-repeat center center;
	background-size: auto 70%;
}
.appleMusic {
	background: url(../img/Apple_Music_logo.svg) no-repeat center center;
	background-size: auto 70%;
}




.phonez {
	background: url(../img/phone.png) no-repeat left center;
	background-size: auto 70%;
}


.mnu {
	padding: 0;
	font-size: 0;
	margin-top: 10px;
}

	.mnu li {
		list-style-type: none;
		padding: 5px 1%;
		margin: 3px 0 3px 1%;
		width: 22%;
		display: inline-block;
		font-size: 1.2rem;
		cursor: pointer;
		border-radius: 6px;
	}

		.mnu li a {
			text-decoration: none;
			color: #fff;
		}

		.mnu li:hover {
			background-color: #333;
		}



		.mnu li.lastli {
			display: none;
			text-align: center;
			padding: 5px 0 0 0;
		}


			.mnu li.lastli a {
				display: inline-block;
				height: 40px;
				width: 60px;
			}

				.mnu li.lastli a.instagram {
					background: url(../img/ig.svg) no-repeat center center;
					background-size: auto 100%;
				}

				.mnu li.lastli a.youtube {
					background: url(../img/yt.svg) no-repeat center center;
					background-size: auto 100%;
				}

				.mnu li.lastli a.facebook {
					background: url(../img/fb.svg) no-repeat center center;
					background-size: auto 91%;
				}
				.mnu li.lastli a.spotify {
					background: url(../img/sp.svg) no-repeat center center;
					background-size: auto 91%;
				}
				.mnu li.lastli a.appleMusic {
					background: url(../img/am.svg) no-repeat center center;
					background-size: auto 91%;
				}



#in1, #in2, #in3 {
	scroll-margin-top: 200px;
}

.mnu li.mnuli {
	display: none;
}

.leftsoc {
	position: fixed;
	left: 10px;
	top: 165px;
	height: 50px;
	width: 50px;
}


a.leftsoc.instagram {
	background: url(../img/ig.svg) no-repeat left center;
	background-size: 100% 100%;
}

a.leftsoc.youtube {
	background: url(../img/yt.svg) no-repeat left center;
	background-size: 100% 100%;
	top: 220px;
}

a.leftsoc.facebook {
	background: url(../img/fb.svg) no-repeat left center;
	background-size: 92% 92%;
	top: 275px;
}
a.leftsoc.spotify {
	background: url(../img/sp.svg) no-repeat left center;
	background-size: 92% 92%;
	top: 330px;
}
a.leftsoc.appleMusic {
	background: url(../img/am.svg) no-repeat left center;
	background-size: 92% 92%;
	top: 385px;
}

.main {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 0 0px;
}

.mainblck {
	background-color: rgba(0,0,0,0.7);
	padding:4px 4px 24px 4px;
	margin-top: 200px;
	text-align: center;
	border-radius: 10px; 
	border-style:solid;
	border-width:3px;
}























@media only screen and (max-width: 850px) {


	.mnu {
		text-align: left;
	}

		.mnu li {
			display: none;
			width: 100%;
			max-width: 600px;
			border: solid 1px #333;
			border-top: none;
			border-radius: 0;
			padding: 10px 0;
			margin: 0;
			background-color: #000;
		}

			.mnu li.mnuli {
				border-radius: 10px;
			}

			.mnu li.mnuli {
				display: block;
				text-align: right;
				border: solid 1px #333;
			}

			.mnu li.lastli {
				border-bottom-right-radius: 10px;
				border-bottom-left-radius: 10px;
			}

		.mnu.active li {
			display: block;
		}

			.mnu.active li.mnuli {
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
			}

		.mnu li .link {
			margin-left: 20px;
		}

	.leftsoc {
		display: none;
	}

	#switcher {
		display: none;
	}
}

@media only screen and (max-width: 400px) {
	.gigs li {
		width: 97%;
	}
}




.chcol {
	transition: color 2s ease;
	color: white;
	font-weight: bold;
}
.lnk {
	text-decoration: underline;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.arrow {
	display: none;
	width: 8%;
	position: absolute;
	z-index: 3;
}