#barndencolumns {display:grid; grid-template-columns:23.5% 23.5% 23.5% 23.5%;grid-column-gap: 2%;}

.barnden {margin-bottom:40px;vertical-align:top;clear:both;}
.barnden::after{clear:both;}
.barnden p, .barnden h2, .barnden h3, h2.category{margin: 0 0 4px 0 !important;padding:0 !important;}
.barnden h2 a, .barnden h2 a:visited {color:#343848;}
.barnden h3 {color:#db5f46;}
.barnden a, input#submit.barnden-register{cursor:pointer;}

.categorylist a {text-decoration: none;}
.categorylist a.selected {border-bottom: 1px solid #db5f46;}

.barndenfull {width:100%;height:auto;overflow:hidden;margin: 0px 0px 10px 0px;}
.barndenfull img {width:100%;object-fit: contain;}

.barndenright {max-width:60%;width:400px;height:auto;overflow:hidden;margin: 0px 0px 10px 10px;float:right;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.barndenright img {width:100%!important;object-fit: contain;}

.barnden .attendees {font-style: italic;}
.barnden .toofew {color:red;}
.barnden p.cost {font-size:150%; color: #db5f46;margin-bottom: 0!important;}
.barnden p.smallcost {font-size:90%; color: #db5f46;}
.barnden .available {color:#db5f46;}

/* Registration Form */
#barndenregistration {margin-bottom: 20px;scroll-margin-top: 60px;}
.barnden_input {width:100%;border:1px solid #415063;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;overflow:hidden;}
#barndenregistration .validator {margin-left: -999px;height:0;}
.barnden div.inputlabel{margin: 6px 0 2px 0;}
.barnden div.forminput{margin: 0;}
.barnden input[type=text], .barnden select {-webkit-appearance: none;padding: 4px;font-family: inherit;font-size: inherit;height:auto!important;width: 40%;box-sizing: border-box;border: 1px solid #003e7e;background:#ffffff;}
.barnden select {width: 3em;text-align: center;}
.barnden .barndensubmit {font-family: inherit;font-size: inherit;height:auto;width: 40%;box-sizing: border-box;line-height:normal;margin: 12px 0 3px 0;padding: 6px;background: #003e7e;color:#FFF;text-align: center;cursor: pointer;border:none;}
.barnden .barndensubmit:hover {background-color: #1A82C7;}

.error_blurb { display: block;color: red;margin-bottom: 12px; }

#hidenames {display:none;}

.barnden .registration-content {margin-bottom: 12px;}
.barnden .thankyoutitle {color: #003e7e;font-weight: 900;font-size: 22px;margin-bottom: 12px;}
.barnden .thankyoublurb {font-size: 18px;color: #1A82C7;}

/* Error */
.barnden #error {display:none;color:red;font-weight: 900;}
.barnden input[type=text].warning {border: 1px solid #db2032;}

/* Submitting Animation */
.barnden_working_loading {font: 4em Impact;color: rgba(6, 115, 152, 1);text-align: right;line-height: 1em;}
.barnden_buttons_working { display: none;width: 40%;}
.barnden_working_loading:after {content: ' .';animation: dots 1s steps(5, end) infinite;color: rgba(6, 115, 152, 1);}

@keyframes dots {
	0%, 20% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 0),
			-.5em 0 0 rgba(6, 115, 152, 0);
	}
	40% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 0),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
	60% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 1),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
	80%, 100% {
		color: rgba(6, 115, 152, 1);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 1),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
}

.openmodal {margin-top: 12px;} 

/* The Modal */
#barnden_help.modal, #barnden_fees.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
#barnden_help .modal-content, #barnden_fees .modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 12px;
	border: 1px solid #888;
	width: 60%;
	border-radius: 4px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#barnden_help .modal-content h2, #barnden_fees .modal-content h2 {
	color: #343848; font-size: 20px; font-weight: 900;padding:0;margin:0;
}

/* The Close Button */
#barnden_help .closemodal, #barnden_fees .closefees {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

#barnden_help .closemodal:hover,
#barnden_help .closemodal:focus,
#barnden_fees .closefees:hover,
#barnden_fees .closefees:focus {
	color: #343848;
	text-decoration: none;
	cursor: pointer;
}

  @media only screen and (max-width: 960px) {
	#barndencolumns {grid-template-columns:32% 32% 32%;grid-column-gap: 2%;}
	.barnden h2 {font-size:1.4em;}
	.barnden h3 {font-size:1.2em;}
}

@media only screen and (max-width: 600px) {
	#barndencolumns {display:grid; grid-template-columns:49% 49%;grid-column-gap: 2%;}
	.barndenright {max-width:40%;width:300px;}
	#barndenregistration .registration-content {width: 100%;}
	.barnden input[type=text],.barnden .barndensubmit {width: 100%;}
	.barnden_buttons_working {width: 100%;}
}
/*
	Overrides
*/
.barnden .hide { display: none !important; }