/* ------------------------------------------------------------------------------------------------- */
/*                               B R A N D I N G     S E C T I O N                                   */
/* ------------------------------------------------------------------------------------------------- */

#donatePhotoBar { position: relative; border-top: 10px solid white; }		
#donatePhotoBar img { width: 100%; height: 100%; display: block; }

.overlay { background: rgba(255,255,255, 0.4); position: absolute; z-index: 5000; width: 100%; height: 100%; top: 0px;}
.col33 {float: left; width: 33.333333%; height: 250px; position: relative; }	
.col67 {float: left; width: 66%; }
.col50 { float: left; width: 50%; height: 500px; border-top: 0px solid #999; box-shadow: 2px 0 2px #444;}

@media all and (max-width: 950px) {
	
}

@media all and (max-width: 550px) {	
	.col33 { height: 150px; }
	.col50 { width: 100%; height: auto; }
}

@media all and (max-width: 350px) {	
	#waysToHelpHeader { min-height: 250px; }
	.col33 { width: 100%; height: auto; }			
}			
		

/* ------------------------------------------------------------------------------------------------- */
/*                                V O L U N T E E R      S E C T I O N                               */
/* ------------------------------------------------------------------------------------------------- */

.volunteer_form { border: 1px solid #ccc; padding: 0px; box-shadow: 0px 0px 10px 1px #ddd; max-width: 960px; margin: 0 auto; }
.volunteer_item_container { padding-left: 7%; }
.volunteer_item { display: block; position: relative; font-size: 110%;}			
.volunteer_item span { visibility: hidden; font-weight: 700; position: absolute; top: 1.4em; left: 0px; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg);}
.volunteer_item:hover { background-color: #ccc; border-radius: 0px 20px 20px 0px; transition: all 0.9s; }
.volunteer_item:hover span { visibility: visible; background-color: #d62929; color: white; z-index: 1000; width: 80%; 
							margin-left: 80px; padding-right: 10px; text-align: right; border-radius: 0px 20px 20px 0px; 											
							transition: transform 0.5s; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
					
.sign_up_button { width: 100%; padding: 20px; font-size: 1.4em; }			
.thank_you { font-size: 2em; text-align: center; }

.button_text { padding: 10px 40px; font-size: 1.1em; color: #222;}
.show_more { display: block; padding: 10px 10px; background-color: #aaa; text-decoration: none; color: white; text-align: center; margin: 20px 0px;  }
.show_more:hover { background-color: #ccc; }
		
		

/* ------------------------------------------------------------------------------------------------- */
/*                                    D O N A T E      S E C T I O N                                 */
/* ------------------------------------------------------------------------------------------------- */	
	
.donations { background: url('../images/small_meal.jpg'); overflow: hidden; width: 100%; border-radius: 10px; } 
.donations h3 { font-size: 2em; text-align:left; color: black; width: 100%; background-color: rgba(255, 255, 255, 0.9); padding: 10px 20px;  }
.financial { background-color: rgba(0,100,0,0.5); color: white; position: relative; display: block; padding: 20px; 
				overflow:hidden; width: 100%; }
.nonprofit { width: 60%; float: left; background: rgba(0,0,0,.7); padding: 20px; border-radius: 10px;}
.paypal { width: 40%; height: 100%; float: left;  position: absolute; top: 0px; right: 0px; 
			  display: flex; justify-content: center; align-items: center; }
.paypal form { padding: 20px; background: rgba(0,0,0,0.7); border-radius: 10px; }

.mail { background-color: rgba(255,0,0,0.5); color: white; padding: 20px; overflow:hidden; width: 100%; }
.mail .address { float: left; width: 38%; background-color: rgba(0,0,0,0.7); padding: 20px; }
.mail .description { width: 60%; float: left; border-left: 1px solid white; background-color: rgba(0,0,0,0.7); padding: 20px; }%
.mail .description span { font-weight: 700; margin-left: 40px; }

@media all and (max-width: 550px) {	
	
	.nonprofit { width: 100%; float: none;  display: block; border-radius: 0px;  text-align: center;  }
	.paypal { width: 100%; float: none; display: block; position: relative; }
	.paypal form { border-radius: 0px; }
	
	.mail .address  { width: 100%; float: none; }
	.mail .description { width: 100%; float: none; border: none; text-align: center; }
}
 		

/* ------------------------------------------------------------------------------------------------- */
/*                                S P O N S O R S      S E C T I O N                                 */
/* ------------------------------------------------------------------------------------------------- */	
		
.sponsor_container { margin-left: 20px; }
.sponsor_container img { margin-left: -20px; }	  
 
#sponsors { width: 100%; text-align: center; overflow: hidden; margin-bottom: 20px; padding: 40px 0px; border-top: 2px dashed #777; border-bottom: 2px dashed #777;}
#sponsors div { display: inline-block;  width: 250px; margin: 10px; }		
#sponsors img { height: 200px; width: 100%; border: 1px solid #ccc; box-shadow: 0 0 10px 1px #444; 
			 background: white; border-radius: 5px; padding: 10px; max-width: 300px; }			
			 
#sponsors div.no-link { border: 1px solid #ccc; box-shadow: 0 0 10px 1px #444; 
			 background: white; border-radius: 5px; padding: 10px; width: 350px; }	

#sponsors div.no-link span { font-weight: 700; font-size: 1.1em; font-family: 'roboto slab';}			 


table { text-align: center; padding: 0px; margin-right: 20px; border: 4px solid lightslategray;
border-spacing: 0px; cellspacing: 0px; box-shadow: 0px 2px 10px #444;}
td:first-child { text-align: center; width: 25%; border-right: 4px solid lightslategray; border-bottom: none; border-left: none; }				
td { width: 12%; vertical-align: middle; border-left: 4px solid white; padding: 5px; border-bottom: 2px solid white; padding: 5px;}
td:nth-child(2) { border-left: none; }
tr:nth-child(2n+1) { background-color: WhiteSmoke; }	
tr:last-child td { border-bottom: none; }
			
th:first-child { border-left: none;  }
th:nth-child(2) { border-left: none; }
th { background-color: lightslategray; background: linear-gradient(0deg, slategray, silver );
	 color: white; font-weight: 400; border-left: 4px solid white; height: 3em; vertical-align: middle; }
			
.included { background: linear-gradient(135deg, tan, wheat 60%, tan); }				
		
		
		
/* -------------------------------------------------------------------- */
/*     G E O M E T R Y     A N D     S Y M E T R Y      M A R K U P     */
/* -------------------------------------------------------------------- */
.padding20 { padding: 20px; }			
.col2 { float: left;  width: 49%; }
.center { text-align: center; }
.left { text-align: left; }
.centerFlex { display: flex; justify-content: center; }
.bump_up { position: relative; top: -10px; }
.darker { background-color: #f7f7f7; }


/* -------------------------------------------------------------------- */
/*     H T M L     F I E L D     M A R K U P     						*/
/* -------------------------------------------------------------------- */
h1 { font-size: 2em; color: gray; text-transform:uppercase; text-shadow: 1px 1px 1px #aaa; }
h3 { font-size: 145%; font-weight: normal; text-transform: uppercase; text-shadow: 1px 1px 2px #aaa; padding-bottom: 10px; } 
hr { border: 0; height: 1px; background: #bbb; padding: 0px; margin: 0px; }					
textarea { width: 90%; padding: 10px; resize: none; font-size: 1.4em; }
.anchor {padding-top: 200px; height: 200px; margin-top: -200px; display: block; visibility: hidden;}


/* -------------------------------------------------------------------- */
input[type=text] {  			
	-webkit-appearance:none 
	outline: none; box-shadow: none; width: 100%; font-weight: 100; font-size: 1.1em;	font-family: 'Abel';
	padding: 10px; text-transform: uppercase; border: none; border-bottom: 1px solid #ccc; text-align: center;						
}				

input[type=text]:hover {  			
	transition: background-color 2.5s;
	background-color: #ccc;	
	border-bottom: 1px solid #777;
	border-top: 1px solid #777;
}	

/* PLACE HOLDER COLOR NEEDS A HACK TO BE CHANGED 
http://stackoverflow.com/questions/13183421/how-to-change-placeholder-color-on-focus
*/
input[type=text]:hover::-webkit-input-placeholder { 
	color: white; transition: all 0.5s; font-size: 150%; ;
}

.flipl {
		-webkit-transform: rotateY(-0deg);
			transform: rotateY(-0deg);
			backface-visibility: hidden;
}

.flipl:hover {  			
	background-color: firebrick;						
	
	-webkit-transform: rotateX(360deg);
			transform: rotateX(360deg);
	-webkit-transition: -webkit-transform 0.9s;
			transform: 0.9s;					
}					


/* -------------------------------------------------------------------- */			
input[type="submit"] { padding: 20px 10px; width: 90%; background: #d62929; color: white; font-size: 1.2em; font-weight: 700;
	text-transform: uppercase; box-shadow: none; border: none; border-radius: 3px;  border: 1px solid #d62929;
}

input[type="submit"]:hover {
	color: white;				
	background: green; /*rgba(255, 255, 255, 0.5);*/
	transition: background-color 0.7s;
	border: 1px solid green;
}  

/* -------------------------------------------------------------------- */
.switch {   position: relative;	display: table; float: left; margin: 10px 5%; }
.switch input { position: absolute; width: 100%;  height: 100%; z-index: 100; opacity: 0; cursor: pointer; display: table-cell; }
.switch label { display: block; width: 200px; height: 100%; position: relative; text-align: center; font-size: 1.4em;	
	text-transform: uppercase; background-color: white; padding: 10px 0px; color: gray; border: 1px solid gray;
}

/* Hovering over option */
.switch input:hover + label { color: white; border: 1px solid #777; background-color: #ccc; transition: all 0.5s; }

/* Option is selected */
.switch input:checked ~ label { cursor: default; background: green; color: white; border-color: transparent; }
			
@media all and (max-width: 950px) {
	.volunteer_item_container { padding-left: 20px; }
	.col2 { width: 100%; }
	.sign_up_button { width: 100%; padding: 20px; font-size: 1.4em; }				
	.switch label { width: 125px; padding: 10px 0px; }			
}

@media all and (max-width: 550px) {
	h1 { font-size: 1.6em; border-bottom: 1px solid #ccc; background-color: #f4f4f4;}
	h3 { font-size: 1.2em; padding-top: 20px; }
	.padding20 { padding: 0px 0px 0px 0px;  }
	.centerFlex { display: block; text-align: center; }				
	.switch {  position: relative;	 display: block; float: none; }	
	.switch label { width: 100%; }					
}

@media all and (max-width: 350px) {	
	textarea { font-size: 1.2em; }
	.volunteer_item_container { padding-left: 0px; }					
	.volunteer_item:hover span { font-size: 0.9em; margin-left: 20px;} 					
}