/* Camp Registration Quadrants */

.sub 		{ font-size: small; }
.quad1 		{ font-size: 16px; color: white; font-weight: bold; }
.quad2 		{ font-size: 16px; color: white; font-weight: bold; }
.quad3 		{ font-size: 16px; color: white; font-weight: bold; }
.quad4 		{ font-size: 16px; color: white; font-weight: bold; }
.quad5 		{ font-size: 16px; color: white; font-weight: bold; }
.sub1 		{ font-size: 45px; color: white; font-weight: bold; }
.sub2 		{ font-size: 45px; color: white; font-weight: bold; }
.sub3 		{ font-size: 45px; color: white; font-weight: bold; }
.sub4 		{ font-size: 45px; color: white; font-weight: bold; }
.sub5 		{ font-size: 45px; color: white; font-weight: bold; }
.quadrant1, 
.quadrant2,
.quadrant3,
.quadrant4,
.quadrant5 	{ padding-left: 32px; position: relative; }
.quadrant1:before {
font-family: 'FontAwesome';
content: "\f0f1";
}
.quadrant2:before {
font-family: 'FontAwesome';
content: "\f055";
}
.quadrant3:before {
font-family: 'FontAwesome';
content: "\f1ae";
}
.quadrant4:before {
font-family: 'FontAwesome';
content: "\f193";
}
.quadrant5:before {
font-family: 'FontAwesome';
content: "\f040";
}

.quadrants  { 
padding-left: 15px; 
position: relative; 
height: 150px; 
width: 170px; 
cursor: pointer; 
}
.quadrants:before {
position: absolute;
bottom: -10px;
right: 10px;
color: #FFF;
opacity: 0.20;
font-size: 80px;
z-index:10;
}
.quadrant-content{
	position:relative;
	z-index:20;
}
#quadrant1box :hover {
	background: #8BE9CD;
}
#quadrant2box :hover {
	background: #80DADC;
}
#quadrant3box :hover {
	background: #FFD4BE;
}
#quadrant4box :hover {
	background: #FFBAC4;
}
#quadrant5box :hover {
	background: #FFBAC4;
}

/*sold out messages*/
.image_holder {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
}
.image_holder .image_message {
	position: absolute; /* Position the background text */
	bottom: 0; /* At the bottom. Use top:0 to append it to the top */
	background: rgb(0, 0, 0); /* Fallback color */
	background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
	color: #f1f1f1; /* Grey text */
	font-weight: bold; font-size: 28px;
	width: 100%; /* Full width */
	padding: 25px; /* Some padding */
}

/*
* The following are custom classes created to make the model change size depending on the screen size.
* These classes are not part of the original bootstrap modal classes.
*/
@media (min-width: 768px) {
	.modal.register-camp-modal-custom-padding {
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
}
@media (max-width: 767px) {
	.modal.register-camp-modal-custom-padding .modal-dialog {
	  width: 100%;
	  /* height: 100%; */
	  margin: 0;
	  max-width: 100%;
	}
  
	.modal.register-camp-modal-custom-padding .modal-content {
	  /* height: 100%; */
	  border-radius: 0;
	}
  }


@media (max-width:320px)  { 
	/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
	/* modal-specific code for paywall */
	/* .modal {
		position: fixed;
		top: 50% !important;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;

		width: 90% !important;
		height: 90% !important;
		z-index: 2000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		/*
		max-width: 630px;
		min-width: 320px; */
	} */
	.md-effect-1 .md-content {
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}

	.md-show.md-effect-1 .md-content {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
    }

	.quad1 		{ font-size: .8em; color: white; font-weight: bold; }
	.quad2 		{ font-size: .8em; color: white; font-weight: bold; }
	.quad3 		{ font-size: .8em; color: white; font-weight: bold; }
	.quad4 		{ font-size: .8em; color: white; font-weight: bold; }
	.quad5 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub1 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub2 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub3 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub4 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub5 		{ font-size: .8em; color: white; font-weight: bold; }

	.quadrants  { 
	padding-left: 15px; 
	position: relative; 
	height: 90%; 
	/*width: 170px;*/
	cursor: pointer; 
	max-width: 18rem;
	}
}

@media (max-width:480px)  { 
	/* smartphones, Android phones, landscape iPhone */ 
	
   	/* modal-specific code for paywall */
	/* .modal {
		position: fixed;
		top: 50% !important;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;

		width: 90% !important;
		height: 90% !important;
		z-index: 2000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		/*
		max-width: 630px;
		min-width: 320px; */
	} */
	.md-effect-1 .md-content {
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}

	.md-show.md-effect-1 .md-content {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
    }

	.quad1 		{ font-size: .8em; color: white; font-weight: bold; }
	.quad2 		{ font-size: .8em; color: white; font-weight: bold; }
	.quad3 		{ font-size: .8em; color: white; font-weight: bold; }
	.quad4 		{ font-size: .8em; color: white; font-weight: bold; }
	.quad5 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub1 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub2 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub3 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub4 		{ font-size: .8em; color: white; font-weight: bold; }
	.sub5 		{ font-size: .8em; color: white; font-weight: bold; }

	.quadrants  { 
	padding-left: 15px; 
	position: relative; 
	height: 90%; 
	/*width: 170px;*/
	cursor: pointer;
	max-width: 18rem;
	}
}

@media (max-width:768px)  { 

	/* modal-specific code for paywall */
	/* .modal {
		position: fixed;
		top: 50% !important;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;

		width: 50% !important;
		height: 50% !important;
		z-index: 2000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		/*
		max-width: 630px;
		min-width: 320px; */
	} */
	.md-effect-1 .md-content {
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}

	.md-show.md-effect-1 .md-content {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	
	.quad1 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad2 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad3 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad4 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad5 		{ font-size: 16px; color: white; font-weight: bold; }
	.sub1 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub2 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub3 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub4 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub5 		{ font-size: 45px; color: white; font-weight: bold; }

	.quadrants  { 
	padding-left: 15px; 
	position: relative; 
	height: 150px; 
	max-width: 170px;
	min-width: 120px;
	cursor: pointer;
	max-width: 18rem; 
	}
}

/* @media (min-width: 1024px)  { 
	.sub 		{ font-size: small; }
	.quad1 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad2 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad3 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad4 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad5 		{ font-size: 16px; color: white; font-weight: bold; }
	.sub1 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub2 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub3 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub4 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub5 		{ font-size: 45px; color: white; font-weight: bold; }
	
	.quadrants  { 
	padding-left: 15px; 
	position: relative; 
	height: 150px; 
	/*width: 170px;
	cursor: pointer;
	max-width: 18rem;
	}
} */


@media (min-width: 1550px)  { 
	.sub 		{ font-size: small; }
	.quad1 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad2 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad3 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad4 		{ font-size: 16px; color: white; font-weight: bold; }
	.quad5 		{ font-size: 16px; color: white; font-weight: bold; }
	.sub1 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub2 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub3 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub4 		{ font-size: 45px; color: white; font-weight: bold; }
	.sub5 		{ font-size: 45px; color: white; font-weight: bold; }
	
	.quadrants  { 
	padding-left: 15px; 
	position: relative; 
	height: 150px; 
	/*width: 170px;*/
	cursor: pointer;
	margin-left: 2px;
	max-width: 18rem;
	width: 120px;
	}
}

/* Style the search input container */
.dt-search {
  margin-bottom: 20px;
}
.dt-length {
  margin-bottom: 20px;
}