.hidden { display: none; }

.logo { height: 180px; }
#leftlogo { width: 100%; text-align: center; } /* change this when the search bar comes back */

#maincontainer { width: 100%; display: flex; flex-wrap: nowrap; align-items: stretch; align-content: stretch; }
.archivediv { width: 100%; }

#badlogin { font-weight: bold; display: hidden; }
/** LOGIN POPUP **/
.login-popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	max-width: 320px;
	background-color: #ffffff;
	border: 3px solid #f1f1f1;
	z-index: 9;
}

/* Add styles to the form container */
.form-container {
	max-width: 300px;
	padding: 10px;
	background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
	background-color: #ddd;
	outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
	background-color: #04AA6D;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
	background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
	opacity: 1;
}

/** HAMBURGER AND SIDEBAR **/
.burger { cursor: pointer; text-decoration: none; background-color: #000; color: #fff; padding: 5px; font-size: 14px; }
.burger.closed { border: 1px solid #000; background-color: #fff; color: #000; }
#sidebar { margin: 4px; width: 25px; height: 100%; overflow-x: hidden; transition: 0.5s; height: calc(90vh - 210px); padding-top: 6px; }
#sidebar.open { width: 200px; border: 1px solid #000; padding-left: 10px; padding-top: 0px; background-color: #e9e9e9; }
#restofsidebar a { text-decoration: none; font-weight: bold; color: #000; }

/** LIVE ROW **/
#liverow { background-color: #f0f0f0; padding: 8px; display: flex; flex-wrap: wrap; justify-content: space-evenly; }
#liverow .eventbox { width: 225px; text-align: center; }
#liverow .eventbox a { font-weight: bold; color: #000 !important; text-decoration: none; }
#liverow .eventtitle { padding-top: 5px; }
#liverow .sectionhead { font-weight: bold; text-align: left; padding-bottom: 4px; }
#liverow .eventimage { height: 225px; max-width: 100%; }
.sectionfoot { text-align: center; padding-top: 15px; font-size: 1.4rem; font-weight: bold; }
.evtbutt { cursor: pointer; border-radius: 6px; background-color: #000; color: #ffffff; border: 0; font-size: 1.2rem; }
.evtbutt:hover { opacity: 0.8; }

/** FOOTER **/
#footer { width: 100%; text-align: center; padding-top: 10px; }

/** SINGLE-EVENT PAGE **/
.singleeventdiv { display: flex; flex-wrap: nowrap; }
@media (max-width: 600px) {
	.singleeventdiv { display: flex; flex-wrap: wrap; }
}
.singleeventleft { }
.singleeventright { min-width: 300px; padding-right: 20px; }
#eventdiv { padding: 10px; }
#eventdiv .eventimg { text-align: center; }
#eventdiv img { max-height: 300px; width: auto; }
#eventdiv .eventtitle { font-weight: bold; margin-top: 10px; }
#eventdiv .eventtitle, #eventdiv .eventdates { text-align: center; font-size: 1.2rem; }
#eventdiv .eventcontent { text-align: center; padding: 20px; }
#eventdiv p { text-align: center; }

/** SIGNUP PAGE **/
#signupdiv .formrow { padding-bottom: 18px; }
#signupdiv .formrow input { font-size: 1rem; padding: 4px; width: 300px; }
#signupbutt { cursor: pointer; border-radius: 6px; background-color: #000; color: #ffffff; border: 0; font-size: 1.2rem; }
#signupbutt:hover { opacity: 0.8; }
@media (max-width: 600px) {
	#signupdiv .formrow { border: 1px solid #000; font-size: 1.2rem; padding: 4px; margin-bottom: 10px; }
	#signupdiv .formrow input { background-color: #eeeeee; }
}

/** UPCOMING EVENTS **/
#upcomingdiv { padding-left: 40px; }
#upcomingdiv .eventbox { width: 100%; margin-bottom: 10px; max-width: 800px; display: flex; flex-wrap: nowrap; align-items: center; }
#upcomingdiv .eventbox .eventimage { max-width: 150px; height: auto; margin-right: 10px; }
#upcomingdiv .eventbox .eventtitle, #upcomingdiv .eventbox .eventtitle a { font-weight: bold; text-decoration: none; font-size: 1.2rem; width: 400px; color: #000 !important; margin-right: 10px; }

/** MY ACCOUNT PAGE **/
#accountdiv { padding-left: 40px; }
#accountdiv .subhead { font-weight: bold; padding-bottom: 14px; }
#accountdiv .purchrow { display: flex; flex-wrap: nowrap; margin-bottom: 6px; }
#accountdiv .purchdate { width: 200px; }
#accountdiv .purchtitle { min-width: 400px; }
#myaccountright .morelink { padding-left: 40px; padding-top: 40px; }
#myaccountright .morebutt { cursor: pointer; border-radius: 6px; background-color: #000; color: #ffffff; border: 0; font-size: 1.1rem; }
#myaccountright .morebutt:hover { opacity: 0.8; }