* {
	margin: 0;
	padding: 0;
	font-family: "Verdana", sans-serif;
}

h1 {
	position: absolute;
	font-size: 6vw;
	color: white;
	left: 10vw;
	top: 15vw;
  text-shadow: -0.6vw -0.4vw #000;
}

h2 {
	position: absolute;
	font-size: 3.6vw;
	color: white;
	left: 10vw;
	top: 24vw;
	text-shadow: -0.4vw -0.28vw #000;
}

input {
  margin-bottom: 1vw;
  margin-top: 1vw;
  width: 40vw;
  height: 4vw;
  font-size: 1.5vw;
}

.bgcolor {
	width: 100vw;
	height: 200vh;
	position: absolute;
	z-index: -1;
	/*background-color: rgb(92, 95, 138)*/;
	background: linear-gradient(
  	to bottom,
  	rgb(92, 95, 138),
  	rgb(118, 94, 64)
	);
}

.step1 {
	position: absolute;
	color: white;
	left: 8vw;
	top: 5vw;
	width: 60vw;
}

.step2 {
	position: absolute;
	color: white;
	left: 66vw;
	top: 5vw;
	width: 36vw;
}

.banner {
	position: absolute;
	width: 100vw;
	height: 51vw;
	background-image: url("../img/vanBanner.jpg");
	background-color: rgb(5, 0, 70);
	background-size: 100vw;
	background-repeat: no-repeat;
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0) 100%
  );
}

.title1 {
	position: relative;
	font-weight: bold;
	color: white;
	text-align: center;
	top: 4vw;
	font-size: 3vw;
	text-shadow: -0.25vw 0.25vw #000;
}

.qrcode {
	position: absolute;
	background-color: white;
	width: 30vw;
	height: 30vw;
	left: 50vw;
	top: 4vw;
	font-size: 2vw;
	color: white;
}

#qrcode img {
	width: 30vw;
	height: 30vw;
}

.qrexpl {
	position: absolute;
	color: white;
	width: 40vw;
	left: 50vw;
	font-size: 1.6vw;
}

.cover {
	position: absolute;
	width: 100vw;
	height: 2vw;
	bottom: 0vw;
	background-color: rgb(5, 0, 80, 1.0);
	font-size: 2vw;
	color: lightgray;
}

.title2 {
	position: relative;
	font-weight: bold;
	color: black;
	text-align: center;
	top: 4vw;
	font-size: 3vw;
}

.toffset {
	width: 99vw;
	left: 1vw;
	color: orange;
	z-index: 1;
	opacity: 0.8;
}

.subtitle1 {
	position: absolute;
	left: 45vw;
	font-size: 2vw;
	font-weight: lighter;
	top: 30vw;
	color: rgb(50, 50, 50, 1.0);
}

.menu {
	position: absolute;
	width: 45vw;
	height: 4vw;
	left: 27.5vw;
	top: 37vw;
	display: flex;
	list-style-type: none;
}

.mn {
	background-color: lightgray;
	width: 15vw;
	height: 2.5vw;
	margin-top: 0.5vw;
	margin-left: 0.3vw;
	margin-right: 0.3vw;
	flex-direction: row;
	text-align: center;
	font-size: 1.5vw;
	padding-top: 0.5vw;
	cursor: pointer;
}

.home {
	position: absolute;
	width: 80vw;
	height: 50vw;
	//background-color: lightgray;
	left: 10vw;
	top: 43vw;
}

.bio {
	position: absolute;
	width: 40vw;
	height: 15vw;
}

.para {
	position: relative;
	font-size: 1.7vw;
	width: 80vw;
	top: 7vw;
	text-align: justify;
	line-height: 1.5;
	color: white;
}

.titlebio, .eptitle {
	position: absolute;
	font-size: 3vw;
}

.reels {
	position: absolute;
	width: 40vw;
	height: 22.5vw;
	background-color: black;
	top: 16vw;
}

.bdr {
	position: absolute;
	width: 0.2vw;
	height: 38.5vw;
	background-color: black;
	left: 41.4vw;
}

.gigs {
	position: absolute;
	width: 37vw;
	height: 38.5vw;
	left: 43vw;
}

.img1 {

}

.para2 {
	position: absolute;
	font-size: 1.25vw;
	width: 37vw;
	top: 5vw;
	text-align: justify;
	line-height: 1.5;
}

.para2 li {
	position: relative;
	left: 2vw;
}

.para3 {
	position: absolute;
	font-size: 1.25vw;
	width: 37vw;
	top: 31.4vw;
	text-align: justify;
	line-height: 1.5;
}

.para3 dd {
	font-size: 1vw;
}

.titlegigs {
	position: absolute;
	font-size: 3vw;
}

.titlegigs2 {
	position: absolute;
	font-size: 3vw;
	top: 27vw;
}

.reel {
	position: absolute;
	width: 40vw;
}

dd {
	line-height: 2vw;
}

a {
	color: black;
}

span {
	font-weight: bold;
}

.copyright {
	position: absolute;
	top: 88vw;
	font-size: 1vw;
	width: 100vw;
	text-align: center;
}

.copyright-music {
	position: absolute;
	top: 113vw;
	font-size: 1vw;
	width: 100vw;
	text-align: center;
}

.copyright-contact {
	position: absolute;
	top: 62vw;
	font-size: 1vw;
	width: 100vw;
	text-align: center;
}

.music {
	position: absolute;
	width: 80vw;
	height: 72vw;
	left: 10vw;
	top: 43vw;
}

.contacts {
	position: absolute;
	width: 80vw;
	height: 23vw;
	left: 10vw;
	top: 43vw;
}

.email {
	position: absolute;
	width: 50vw;
	height: 5vw;
	left: 15vw;
	background-color: gray;
	font-size: 2vw;
	text-align: center;
	padding-top: 2vw;
	background-color: lightgray;
	cursor: pointer;
}


.ins {
	position: absolute;
	width: 50vw;
	height: 5vw;
	left: 15vw;
	background-color: lightgray;
	top: 9vw;
	padding-top: 2vw;
	text-align: center;
	font-size: 2vw;
	cursor: pointer;
}

.insimg {
	position: absolute;
	width: 4vw;
	height: 4vw;
	background-image: url("../img/instagram.png");
	background-size: 4vw;
	left: 10vw;
	top: 1.3vw;
}

.spotify {
	position: relative;
	top: 5vw;
}

.wml {
	color: darkgray;
}

.about-paragraph {
	position: absolute;
	width: 80vw;
	left: 10vw;
	top: 30vw;
}

.dono-paragraph {
	position: absolute;
	width: 80vw;
	left: 10vw;
	top: 25vw;
}

.para-about {
	position: relative;
    font-size: 1.25vw;
    text-align: justify;
    line-height: 1.5;
}

.inputarea{
	position: relative;
	left: 30vw;
	top: 10vw;
	width: 50vw;
	color: white;
	font-size: 2.4vw;
}

.video-area {
	position: relative;
	width: 80vw;
	display: flex;
	flex-wrap: wrap;
	gap: 2.5vw;

}

.rsvp {
	position: absolute;
	width: 15vw;
	height: 15vw;
	background-color: rgb(242, 128, 169);
	border-radius: 3vw;
	box-shadow: -1vw 1vw black;
	right: 10vw;
	top: 14.8vw;
	scale: 1.2;
	cursor: pointer;
}

.pay {
	position: relative;
	width: 20vw;
	height: 12vw;
	background-color: rgb(240, 202, 96);
	border-radius: 3vw;
	top: auto;
	cursor: pointer;
}

.aboutpage-video {
	position: relative;
	width: 50vw;
	height: calc(50vw * 9 / 16);
	margin-top: 3vw;
	left: 15vw;
}

.payment {
	position: absolute;
	width: 100vw;
	height: 200vw;
	background-color: black;
}

.form {
	position: absolute;
	width:50vw;
	height:80vw;
	left: 8vw;
	top: 25vw;
	border-radius: 3vw;
}

.greq, .tuan, .dkth {
	position: relative;
	width: 80vw;
	top: 1vw;
	margin-bottom: 2vw;
}

.greq {
	height: 22vw;
}

.tuan {
	height: 22vw;
}

.dkth {
	height: 24vw;
}

.g_img, .t_img, .d_img {
	position: absolute;
	width: 40vw;
	left: 1vw;
	background-color: black;
	background-size: 40vw;
	border-radius: 2vw;
}

.g_img {
	background-image: url(../img/sb.jpg);
	background-position-y: 0vw;
	height: 23vw;
}

.t_img {
	background-image: url(../img/ttj.jpg);
	height: 24vw;
}

.g_bio, .t_bio, .d_bio {
	position: absolute;
	width: 36vw;
	height: 19vw;
	left: 44vw;
	top: 3vw;
}

.xback, .donoxback {
	position: absolute;
	background-color: white;
	top: 0;
	right: 0;
	font-size: 4vw;
	cursor: pointer;
}



.gallery {
	position: relative;
	width: 80vw;
	height: 45vw;
	top: 9vw;
}

.gpic {
	border-radius: 2vw;
}

.gpic1 {
	position: absolute;
	width: 19vw;
	height: 39vw;
	background-color: black;
	background-image: url(../img/menu2.jpg);
	background-size: 22vw 39vw;
	background-position-x: -1.5vw;
}

.gpic2 {
	position: absolute;
	width: 19vw;
	height: 19vw;
	background-color: black;
	left: 20vw;
	background-image: url(../img/menu4.jpg);
	background-size: 20vw 32vw;
	background-position-x: -0.5vw;
}

.gpic3 {
	position: absolute;
	width: 19vw;
	height: 19vw;
	background-color: black;
	left: 20vw;
	top: 20vw;
	background-image: url(../img/menu3.jpg);
	background-size: 20vw 36vw;
	background-position-x: -0.5vw;
}

.gpic4 {
	position: absolute;
	width: 19vw;
	height: 39vw;
	background-color: black;
	left: 40vw;
	background-image: url(../img/golf1.jpg);
	background-size: 27vw;
	background-position-x: -4.5vw;
}

.gpic5 {
	position: absolute;
	width: 19vw;
	height: 19vw;
	background-color: black;
	left: 60vw;
	background-image: url(../img/bandbz3.jpg);
	background-size: 29vw;
	background-position: -4vw -4vw;
}

.gpic6 {
	position: absolute;
	width: 19vw;
	height: 19vw;
	background-color: black;
	left: 60vw;
	top: 20vw;
	background-image: url(../img/bandbz2.jpg);
	background-size: 24vw;
	background-position: -1vw 0vw;
}

.amount {
	position: relative;
	left: 30vw;
	top: 11vw;
}

.nowechat {
	display: none;
}

.scan {
	position: absolute;
	top:20vw;
}

.bottompart {
	position: absolute;
	top: 80vw;
	font-size: 1vw;
	color: white;
	width: 100vw;
	text-align: center;
	opacity: 0.2;
	line-height: 2vw;
}

.openmic {
	position: relative;
	width: 34vw;
	height: 8vw;
	background-color: rgb(129, 204, 228);
	border-radius: 3vw;
	top: 3vw;
	cursor: pointer;
	padding-top: 4vw;

}

.jam {
	position: relative;
	width: 34vw;
	height: 8vw;
	background-color: rgb(129, 204, 228);
	border-radius: 3vw;
	top: -12vw;
	cursor: pointer;
	padding-top: 4vw;
}

.jamsesh {
	position: relative;
	top: auto;
	margin-left: 5vw;
}

.openmicsesh {
	position: relative;
	margin-left: 5vw;
}

.basic {
	position: relative;
}

.xback2 {
	position: relative;
	width: 3.5vw;
	background-color: white;
	color: black;
	top: 5.1vw;
	left: -4.6vw;
	font-size: 2.5xvw;
	cursor: pointer;
}

.xback3 {
	position: relative;
	width: 3.5vw;
	background-color: white;
	color: black;
	left: -4.6vw;
	font-size: 2.5xvw;
	cursor: pointer;
}

.list {
	position: relative;
	color: black;
	background-color: rgb(129, 204, 228);
	width: 15vw;
	height: 4.5vw;
	text-align: center;
	border-radius: 2vw;
	font-size: 2vw;
	cursor: pointer;
	border: none;
}

.xback4 {
	position: absolute;
	width: 2.2vw;
	background-color: white;
	color: black;
	top: -2.8vw;
	left: 1.6vw;
	font-size: 2.5xvw;
	cursor: pointer;
}

.donation {
	position: absolute;
	width: 100vw;
	height: 160vw;
	background-color: black;
}

.dnbanner {
	position: absolute;
	width: 100vw;
	height: 30vw;
	background-size: 100vw;
	background-image: url(../img/dubanner.jpg);
	mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,0) 100%
  );
}

.btnarea {
	position: absolute;
	width: 50vw;
	left: 10vw;
	height: 30vw;
	top: 40vw;
	display: flex;
	flex-wrap: wrap;
	gap: 2vw;
}

.paydon {
	position: relative;
	width: 18.5vw;
	height: 18.5vw;
	border-radius: 3vw;
	background-color: rgb(242, 128, 169);
	font-size: 4vw;
}

@media screen and (min-height: 140vw) {

	.banner {
		height: 52vw;
	}

	input {
		height: 6vw;
		font-size: 2vw;
	}

	h1 {
		font-size: 6.3vw;
	}

	h2 {
		top: 22.9vw;
	}

	.cover {
		top: 40vw;
		font-size: 2vw;
		padding-bottom: 1vw;
		background-color: rgb(5, 0, 70, 1.0);
	}

	.nowechat {
		position: absolute;
		display: block;
		width: 30vw;
		height: 3vw;
		color: White;
		right: 5vw;
		top: 33.5vw;
		text-align: center;
		font-size: 2vw;
		text-shadow: -2px 2px 0 #000;
	}

	.step1 {
		position: relative;
		left: 10vw;
	}

	.step2 {
		position: relative;
		top: 20vw;
		left: 10vw;
	}

	.rsvp {
		scale: 1.5;
		top: 13.6vw;
		right: 12vw;
	}

	.form {
		position: relative;
		left: 10vw;
		width: 80vw;
		top: 10vw;
	}

	.pay {
		position: relative;
		top: 15vw;
	}

	.payment {
		height: 200vh;
	}

	.subtitle1 {
		font-size: 2.7vw;
		top: 33vw;
	}

	.menu {
		width: 82.3vw;
		left: 8vw;
		height: 10vw;
		top: 42vw;
	}

	.mn {
		width: 33vw;
		height: 5vw;
		margin-left: 2vw;
		font-size: 3vw;
	}

	.titlebio {
		font-size: 4vw;
	}

	.para {
		font-size: 3vw;
		width: 80vw;
		top: 2.4vw;
	}

	.reel {
		width: 80vw;
	}

	.home {
		top: 50vw;
	}


	.bio {
		width: 80vw;
	}

	.reels {
		width: 80vw;
		height: 45vw;
		top: 22vw;
	}

	.gigs {
		width: 80vw;
		left: 0;
		top: 70vw;
	}

	.titlegigs, .titlegigs2 {
		font-size: 4vw;
	}

	.para2, .para3 {
		font-size: 2vw;
		width: 80vw;
	}

	.titlegigs2 {
		top: 37vw;
	}

	.para3 {
		top: 43vw;
		line-height: 3.2vw;
	}

	.bdr {
		visibility: hidden;
	}

	.ct2, .ct3 {
		top: 50vw;
	}

	.about-paragraph {
		top: 40vw;
	}

	.email, .ins {
		font-size: 2.5vw;
		width: 80vw;
		left: 0;
	}

	.para2 li {
		left: 4vw;
	}

	.para3 dd {
		font-size: 1.5vw;
	}

	.insimg {
		left: 22vw;
	}

	.copyright {
		top: 179vw;
		font-size: 1.5vw;
	}

	.copyright-music, .copyright-contact {
		display: none;
	}

	.greq {
		height: 52vw;
	}

	.tuan {
		height: 65vw;
	}

	.dkth {
		height: 58vw;
	}

	.g_img, .t_img, .d_img {
		width: 80vw;
		background-size: 80vw;
	}

	.g_img {
		height: 40vw;
		background-position-y: -5vw;

	}

	.t_img {
		height: 46vw;
	}

	.d_img {
		height: 40vw;
		background-position-y: -5vw;
	}

	.g_bio, .t_bio, .d_bio {
		width: 80vw;
		left: 1vw;
		font-size: 1.8vw;
	}

	.g_bio {
		top: 42vw;
	}

	.t_bio {
		top: 49vw;
	}

	.d_bio {
		top: 42vw;
	}

	.xback {
		right: 2vw;
	}

	.amount {
		display: block;
		position: relative;
		left: 30vw;
		top: 12vw;
		font-size: 2vw;
	}

	.bottompart {
		top: auto;
		bottom: 5vw;
		font-size: 2vw;
		line-height: 3vw;
	}
}