@charset "UTF-8";
/* CSS Document */

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	border: 0;
	background-color: rgba(0,0,0,0.4);
	background: url("../images/singing-bg-dark.jpg") center left no-repeat #7D8FBA;
	background-size: cover;
	background-attachment: fixed;
}
h1 {
	font-family: "Slabo 27px", serif;
	font-weight: 400;
	font-size: 3em;
	margin: 20px 0 10px;
}
ul {
	margin: 0;
}
ul li {
	margin-bottom: 20px;
	font-weight: 400;
	font-size: 1.2em;
}
li::marker {
  color: #7D8FBA;
}
.top {
	display: flex;
	justify-content: space-between;
	margin: 25px;
}
.logo {
	max-height: 100px;
	text-align: center;
}
.dateofcamp {
	text-align: center;
	margin: 10px 0 10px;
	display: none;
}
#sidemenu {
	background-color: #ddd;
	position: fixed;
	top: 0;
	left: -25%;
	width: 25%;
	padding: 20px 30px;
	z-index: 4;
	height: 100%;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.showmenu {
	left: 0 !important;
}
#sidemenu ul {
	list-style: none;
	margin: 50px 0 0 0;
	padding: 0;
}
#sidemenu ul li {
	font-family: "Slabo 27px", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 1.7em;
	padding: 0 0 10px;
	margin: 0;
}
#sidemenu ul li a {
	color: #7D8FBA;
}
.menuclose {
	float: right;
}
.menuclose:hover {
	cursor: pointer;
}
.menuline {
	width: 100%;
	height: 3px;
	border-radius: 4px;
	background-color: white;
	margin-bottom: 10px;
}
header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3;
	background-color: rgba(0,0,0,0.4);
	backdrop-filter: blur(20px);
}
header p {
	margin: 0;
}
header ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: flex-end;
}
header ul li {
	padding: 0;
	margin: 0;
}
header ul li a {
	padding: 32px 20px;
	display: inline-block;
	color: #9595C8;
	text-decoration: underline;
}
header ul li a:hover {
	text-decoration: underline;
	color: white;
}
.active {
	text-decoration: none;
	color: white;
}
.menuline {
	width: 100%;
	height: 2px;
	border-radius: 4px;
	background-color: #fff;
	margin-bottom: 10px;
}
.logo {
	max-height: 70px;
	margin: 10px 0;
}
.menubtn {
	padding: 0 0 0 20px;
}
.burgermenu {
	width: 34px;
	height: 70px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.burgermenu:hover {
	cursor: pointer;
}
#timetable {
	overflow: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	width: 100vw;
	padding-top: 10px;
	background-color: rgba(0,0,0,0.4);
	backdrop-filter: blur(20px);
}
#sing-banner {
	padding: 250px 0 170px;
	background-size: cover;
}
#sing-banner h1 {
	color: white;
}
#filter {
	margin: 0px 0;
}
#footer {
	background-color: #7D8FBA;
	padding: 30px 0;
}
#footer p {
	text-align: right;
	color: white;
	margin: 0;
}
#footer a {
	color: white;
	text-decoration: underline;
}
.footflex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.filter-cont {
	position: absolute;
	right: 0;
	background-color: rgba(0,0,0,0.4);
	backdrop-filter: blur(20px);
	padding: 10px 20px 0;
	margin-top: -100px;
	border-radius: 20px 20px 0 0;
}
.filter-cont p {
	color: white;
}
.day-cont {
	scroll-snap-align: start;
	width: 14.2vw;
	padding: 0 5px;
}
.blue .header, .blue .multiple .onbtn, .blue .multiple p:hover, .fbtns p:hover { background-color: #7D8FBA; }
.blue h3, .blue .status, .blue .material-symbols-outlined, .blue .location, .blue .color { color: #7D8FBA; }
.blue .status, .blue .livebox { border: solid 2px #7D8FBA; }
.blue .extra, .blue .multiple { background-color: #444444; }

.purple .header, .purple .multiple .onbtn, .purple .multiple p:hover { background-color: #9696C3; }
.purple h3, .purple .status, .purple .material-symbols-outlined, .purple .location, .purple .color { color: #9696C3; }
.purple .status, .purple .livebox { border: solid 2px #9696C3; }
.purple .extra, .purple .multiple { background-color: #444444; }

.red .header, .red .multiple .onbtn, .red .multiple p:hover { background-color: #7b0000; }
.red h3, .red .status, .red .material-symbols-outlined, .red .location { color: #7b0000; }
.red .status, .red .livebox { border: solid 2px #7b0000; }
.red .extra, .red .multiple { background-color: #E5D5D5; }

.green .header, .green .multiple .onbtn, .green .multiple p:hover { background-color: #53ae8c; }
.green h3, .green .status, .green .material-symbols-outlined, .green .location { color: #53ae8c; }
.green .status, .green .livebox { border: solid 2px #53ae8c; }
.green .extra, .green .multiple { background-color: #E1F0E8; }

.peach .header, .peach .multiple .onbtn, .peach .multiple p:hover { background-color: #BB877E; }
.peach h3, .peach .status, .peach .material-symbols-outlined, .peach .location { color: #BB877E; }
.peach .status, .peach .livebox { border: solid 2px #BB877E; }
.peach .extra, .peach .multiple { background-color: #EEE3E2; }

.mustard .header, .mustard .multiple .onbtn, .mustard .multiple p:hover { background-color: #ACA265; }
.mustard h3, .mustard .status, .mustard .material-symbols-outlined, .mustard .location { color: #ACA265; }
.mustard .status, .mustard .livebox { border: solid 2px #ACA265; }
.mustard .extra, .mustard .multiple { background-color: #EFEADB; }



.pink .header, .pink .multiple .onbtn, .pink .multiple p:hover { background-color: #B95F81; }
.pink h3, .pink .status, .pink .material-symbols-outlined, .pink .location { color: #B95F81; }
.pink .status, .pink .livebox { border: solid 2px #B95F81; }
.pink .extra, .pink .multiple { background-color: #F2E0EB; }

.completed {
	border: solid 2px #aaa !important;
	color: #aaa !important;
}
.donebox {
	background-color: #777 !important;
}
.donebox h3, .donebox p, .donebox .location, .donebox .material-symbols-outlined {
	color: #aaa;
}
.donebox .multiple {
	background-color: #eee;
}
.donebox .onbtn, .donebox .multiple p:hover {
	background-color: #bbb !important;
}
.header {
	border-radius: 10px;
	padding: 10px 20px;
	margin-bottom: 10px;
}
h2 {
	font-family: "Slabo 27px", serif;
	color: white;
	text-transform: uppercase;
	margin: 0;
	font-size: 1.6em;
}
h3 {
	font-family: "Slabo 27px", serif;
	font-weight: 400;
	font-size: 1.8rem;
	margin: 2.5rem 0 0rem;
}
.less-mar {
	margin: 1rem 0 0 0 !important;
}
.box {
	border: solid 1px #333333;
	border-radius: 10px;
	padding: 20px 20px 0px;
	margin-bottom: 10px;
	background-color: rgba(40,40,40,0.8);
	-webkit-transition: box-shadow 0.2s;
	transition: box-shadow 0.3s;
}
.box p {
	color: white;
}
.blankbox {
	min-height: 260px;
	margin-bottom: 10px;
}
.status {
	border: solid 2px #555;
	text-transform: uppercase;
	display: inline-block;
	border-radius: 5px;
	padding: 1px 7px;
	float: right;
	font-size: 0.8em;
	margin: 0;
}
.blinker {
	background-color: #0071FC;
	border-color:#0071FC !important;
	color: white !important;
	animation: blinker 2s linear infinite;
	position: relative;
}
.fixeddays {
	display: grid;
	overflow: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	grid-template-columns: repeat(7, 1fr);
	position: fixed;
	width: 100vw;
	z-index: 2;
	top: -60px;
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
	-webkit-transition: top 0.6s; /* For Safari 3.1 to 6.0 */
    transition: top 0.6s;
}
.fixeddays::-webkit-scrollbar {
    display: none;
}
.fixeddays .green, .fixeddays .purple, .fixeddays .peach, .fixeddays .mustard, .fixeddays .blue, .fixeddays .pink {
	width: 14.2vw;
	padding: 0 5px;
}
.fixeddays .header {
	padding: 10px 20px;
}
.daysvisible {
	top: 96px;
}
@keyframes blinker {
	50% {opacity: 0; }
}
.time {
	font-weight: bold;
	margin: 0 0 2em;
}
.morebtn {
	float: right;
	color: #007bff;
}
.morebtn:hover {
	cursor: pointer;
}
.material-symbols-outlined {
	color: #555555;
	margin: 5px 5px 0 0;
	float: left;
}
.location {
	font-weight: 700;
}
.extra {
	margin: 0 -20px;
	padding: 20px 20px 1px;
	border-radius: 0 0 7px 7px;
	display: none;
}
.names {
	font-family: "Playfair Display", serif;
	font-style: italic;
}
.extratitle {
	font-family: "Slabo 27px", serif;
	margin: 0 0 0.1em;
	font-size: 1.3em;
}
.staff {
	margin: 0;
	font-family: "Playfair Display", serif;
	font-style: italic;
}
.multiple {
	display: flex;
	justify-content: space-around;
	width: 120%;
	margin: 45px -10% 0;
	padding: 5px 0;
}
.multiple p {
	width: 31%;
	text-align: center;
	margin: 0;
	border-radius: 3px;
	padding: 2px 0;
	font-size: 0.8em;
}
.multiple p:hover {
	cursor: pointer;
	color: white;
}
.multiple .onbtn {
	color: white;
}
.filter {
	margin: 0;
}
.filter p {
	text-align: center;
	padding-right: 10px;
	font-size: 1.5em;
	margin: 0;
}
.fbtns {
	text-align: center;
}
.fbtns p {
	display: inline-block;
	background-color: black;
	text-align: center;
	padding: 5px 15px;
	border-radius: 5px;
	font-size: 1.1em;
}
.fbtns p:hover {
	cursor: pointer;
	color: white;
}

.fonbtn { 
	color: white;
	background-color: #7D8FBA !important;
}

@media (max-width: 1500px) {
	.day-cont, .fixeddays .green, .fixeddays .purple, .fixeddays .peach, .fixeddays .mustard, .fixeddays .blue, .fixeddays .pink {
		width: 20vw;
	}
}
@media (max-width: 1200px) {
	.day-cont, .fixeddays .green, .fixeddays .purple, .fixeddays .peach, .fixeddays .mustard, .fixeddays .blue, .fixeddays .pink {
		width: 25vw;
	}
	h2 {
		font-size: 1.4em;
	}
	h3 {
		font-size: 1.6em;
	}
	.material-symbols-outlined {
		color: #555555;
		margin: 8px 5px 0 0;
		font-size: 20px;
	}
	#sidemenu {
		width: 30%;
		left: -30%;
	}
	#sidemenu ul li {
		font-size: 1.5em;
	}
}
@media (max-width: 991px) {
	.day-cont, .fixeddays .green, .fixeddays .purple, .fixeddays .peach, .fixeddays .mustard, .fixeddays .blue, .fixeddays .pink {
		width: 33vw;
	}
	#sidemenu {
		width: 40%;
		left: -40%;
	}
	#sidemenu ul li {
		font-size: 1.4em;
	}
	.logo {
		max-height: 60px;
		margin: 10px 0;
	}
	.burgermenu {
		height: 64px;
	}
	header ul li a {
		padding: 25px 20px;
	}
	.daysvisible {
		top: 85px;
	}
}
@media (max-width: 768px) {
	h1 {
		font-size: 3em;
	}
	.day-cont, .fixeddays .green, .fixeddays .purple, .fixeddays .peach, .fixeddays .mustard, .fixeddays .blue, .fixeddays .pink {
		width: 50vw;
	}
	.top {
		flex-wrap: wrap;
	}
	.filter-cont {
		right: 5px;
		padding: 5px 10px 5px;
		margin-top: -70px;
	}
	.filter-cont p {
		margin-bottom: 5px;
	}
	.fbtns p {
		font-size: 0.9em;
		padding: 3px 10px;
	}
	#sidemenu {
		width: 60%;
		left: -60%;
	}
	
}
@media (max-width: 576px) {
	p, ul li {
		font-size: 1em;
	}
	.logo {
		max-height: 50px;
	}
	.burgermenu {
		height: 56px;
		width: 30px;
	}
	.menuline {
		height: 2px;
		margin-bottom: 9px;
	}
	h1 {
		font-size: 2.5em;
	}
	.logo {
		max-height: 66px;
	}
	#sing-banner {
		padding: 110px 0 90px;
	}
	.day-cont, .fixeddays .green, .fixeddays .purple, .fixeddays .peach, .fixeddays .mustard, .fixeddays .blue, .fixeddays .pink {
		width: 100vw;
	}
	.multiple {
		width: 115%;
		margin: 45px -7.5% 0;
	}
	.logo {
		max-height: 50px;
	}
	header ul li a {
		padding: 22px 10px;
	}
	#sidemenu {
		width: 100%;
		left: -100%;
	}
	.daysvisible {
		top: 75px;
	}
	.menubtn {
		padding: 0 0 0 10px;
	}
}