/* WRHS1965 70TH BIRTHDAY BASH - MENU */

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
    

/*MAIN*/

body, html 
	{
	margin: 0;
	background-color: rgb(0, 50, 0, .1);

	
	
	}
	
	* 
		{
		box-sizing: border-box;
		}


	/* START HEADER */ 
		#header_container {
		
			background-image:url('../img/wachmt-bg_harvard.jpg');
			background-size:cover;
			background-position: center bottom;
			border-bottom:3px solid #003300;
			top:0; width:100%;
			height: 99px;
			z-index:0 ;       
			}
		
			#topbar{
				margin:4px auto 0;
				z-index:0 ;
				}       
					  
			#logo img{
				float:left;
				margin: 4px 0 0 2%;
				height: 80px;
				background-color: rgba(255,255,255,.3);
				border:3px solid rgba(120,120,120,.1);
				border-radius: 5px;
				box-shadow: 3px 6px 20px rgb(150,150,150);
				}
			
			/* START NAVIGATION */
				nav {
					font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
					float: right;
					background-color: rgba(244,244,244,0.8);
					border-radius: 5px;
					margin: 36px 3% 0 0;
					padding: 2px 10px 2px 0;	
					z-index: 5px;	
					}
				
				
					
					#menu-icon 
						{
						display: hidden;
						width: 40px;
						height: 40px;
						background: #000000 url(../img/menu-icon.png) center;
						}
				
					a:hover#menu-icon 
						{
						background-color: #444;
						border-radius: 4px 4px 0 0;
						}
				
					nav ul 
						{
						list-style: inherit;
						}
				
						nav li 
							{
							/* border:1px solid red; */
							display: inline-block;
							float: left;
							padding: 10px 3px;
							text-align: center;
							font-size: 13px;
							z-index: 5px;
							}
							
						
				
					
						nav li .current 
							{
							background-color:rgba(100,100,100,0.3);
							border-radius: 3px;
							padding: 6px;
							}
					
						nav a
							{
							color: #333;
							text-decoration: none;
							}
						
						nav a:hover 
							{
							color:black;   
							}
					
						nav li:hover a 
							{ 
							background-color: black;
							color:white;
							padding: 6px;
							width: 50px;
							border-radius: 3px;
							}
				
				
							.dropdown {
								  float: left;
								  overflow: hidden;
								}
								
								.dropdown .dropbtn 
									{
									/* 	border:1px black solid; */
									display: inline-block;
									float: left;
									padding: 9px 6px;
									text-align: center;
									font-size: 13px;
									z-index: 5px;
									}
								
								.navbar a:hover, .dropdown:hover .dropbtn
									{
									background-color: inherit;
									}
								
								.dropdown-content 
									{
									display: none;
									top:75px;
									position: absolute;
									background-color: #f9f9f9;
									min-width: 185px;
									margin-left: -100px;
									z-index: 1;
									}
									
									.dropdown-content p
										{
										margin-top:12px;
										color:darkgreen;
										text-align: center;
										font-weight: bold;
										}
									
									.dropdown-content .current
										{
										background-color:rgba(100,100,100,0.3);
										border:1px solid rgba(50,50,50,0.6);
										}
								
								.dropdown-content a
									{
									float: none;
									color: black;
									padding: 12px 16px;
									text-decoration: none;
									display: block;
									text-align: left;
									}
								
								.dropdown-content a:hover 
									{
									background-color: #ddd;
									}
								
								.dropdown:hover .dropdown-content 
									{
									display: block;
									}
				
				/*   END NAVIGATION    */
		
		/* END HEADER */
	

    /* START MAIN CONTENTS */ 
    
    
    
main>img {
  width: 100%;
  min-width: 300px;
  height: auto;
  display: block;
}


      
    
        
    .main-content 
    	{
	    width: 98%;
	    margin: 0 auto;
/* 		border: 2px solid blue; */
/* 	    height: 1900px; */
    	} 
    	    	
    	h1, h2, h3, h4
    		{
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			color:#094E23;
			line-height: 1.1em;
			}			

    	  
        #contentheading 
        	{
	        margin:20px auto;
            text-align:center;
/* 			border:1px solid yellow; */
			background-color: rgba(244,244,244,.7);
			box-shadow: 4px 4px 12px 2px #666;
			padding: 10px;
            max-width:700px;
            border-radius: .9rem;

            }
            
            #contentheading h2            		
            	{ 
				padding: 4px 0;
				font-size: 1.8em;
				text-align: center;
				color:#336633;
				} 
            
			#contentheading h1            		
            	{ 
				padding: 8px 0;
				font-size: 1.8em;
				text-align: center;
				color:#336633;
				} 
				
			#contentheading h3            		
            	{ 
				padding: 2px 0 12px;
				font-size: 1em;
				text-align: center;
				color:#336633;
				} 



				
			#contentheading p           		
            	{ 
				font-size: .9em;
				text-align: center;
				}  
				

.container {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
}

.card {
  width: 38vw;
  min-width: 310px;
  border: 3px solid black;
  border-radius: 1rem;
  flex-wrap: wrap; 
  z-index: -1
}

.card2 {
  width: 28vw;
  min-width: 300px;
  border: 3px solid black;
  border-radius: 1rem;
  flex-wrap: wrap; 
  z-index: -1
}



.the-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  border-radius: .9rem .9rem 0 0;
  top: 0;

}

figcaption {
	text-align: center;
	padding: 1rem 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#094E23;
	background-color: rgb(244, 255, 244, .8);
	font-size: .95em;
	border-radius: 0 0 .9rem .9rem;
}

.ratio-box {
  width: 100%;
  height: 0;
  padding-top: calc(100% * (540 / 958));
  position: relative;
}

.ratio-box2 {
  width: 100%;
  height: 0;
  padding-top: calc(100% * (725 / 958));
  position: relative;
}
    
        
		.bbmenu-items
		{
            margin: 20px auto;
            padding: 7px;
			display:flex;
			flex-wrap: wrap;
			}
            
            .luncheon
	            {	      

		        width:100%;

	            }
	            
	       h1 {
		        text-align: center;
		        color: maroon;
		        font-size: 1.8em;
		        font-family: Georgia, serif;
		        font-style: italic;
		        margin: 20px auto;
	        }
	        
			.wach-mt-photos {
/* 				border: 1px solid gray; */
				width: 100%;
				padding: 12px 1%;
				margin: 1% 3%;
				
			}
			
			.wach-mt-photos h2{
				text-align: center;
				font-size: 1.7em;
			}
			
			.jack-photos {
/* 				border: 1px solid gray; */
				width: 100%;
				padding: 12px 1%;
				margin: 1% 3%;
			}
			
			.jack-photos h2{
				text-align: center;
				font-size: 1.7em;
			}
			
			.include-items {
				border: 1px solid gray;
				width: 100%;
				padding: 12px 1%;
				margin: 1% 20%;
			}
			
			.include-items h2{
				margin-bottom: 12px;				
				text-align: center;
				font-size: 1.7em;
			}
			
			

	        .item1>p {
		        text-align: center;
		        color: black;
		        font-size: 1em;
		        font-family: Georgia, serif;
		        font-style: italic;
		        margin: -10px auto 20px;
	        }
	        	        
	        .item1>h3 {
		        text-align: left;
		        color: black;
		        font-size: 1.4em;
		        font-family: Georgia, serif;
		        font-style: bold;
		        text-decoration: underline;
		        margin: 15px 0 10px 12px;
	        }
	        
			li {
				list-style-type: circle;
		        text-align: left;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				color:#094E23;
				line-height: 1.1em;
		        font-style: bold;
		        font-size: 1.4em;
		        margin: 0 0 16px 12px;
	        }
	            
        



   
			
    /* END MAIN CONTENTS */ 
	

/*BEGIN FOOTER*/
		#footer {
			margin: auto;
			background-color: rgba(244,244,244,0.9);
			padding: 15px;
			width: 35%;
			height: 50px;
			border: 1px solid black;
	}
	
		#footer a {
			margin: 12px;
		}
	/*END FOOTER*/




/*MEDIA QUERY*/
@media only screen and (max-width : 960px) {

	/* 	START NAVIGATION */
	#menu-icon
		{
		display:inline-block;
		}

	nav 
		{
		background-color: rgba(0,0,0,0);
		}


		nav li 
			{
			width: 190px;
			padding:12px 5px;
			text-align: left;
			font-size: 18px;
			line-height: 1.6em;
			}


			nav ul, nav:active ul 
				{
				display: none;
				position: absolute;
				width: 220px;
				border: 3px ridge rgb(100,100,100);
				right: 20px;
				top:75px;
				}

			nav:hover ul {
				display: block;
				background-color: rgb(200,200,200);
				}
		
			.dropdown-content {
				  left:-80px;						  
				  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
				}
				
				.classmates
					{
					margin-top:-40px;
					}
					
				.fifty7th
					{
					margin-top:80px;
					}
					
				.sixtyth
					{
					margin-top:200px;
					margin-right:200px;
					}

				.links
					{
					margin-top:250px;
					}	
  
	/* 	END NAVIGATION */	

	
	/* 	START CONTENT */
	.container li {
		font-size: 1.2em;
	}
	
	/* 	END CONTENT */					
		}
		
		
		

@media only screen and (max-width : 750px) {
	
	#contentheading h2 {font-size: 1.6em;} 
	#contentheading h4 {font-size: 1em;} 
	
	.salads {margin: 1%;}

	.entrees {margin: 1%;}
	
	.entrees h2{
		text-align: center;
		font-size: 1.7em;
	}
	
	.include-items {margin: 1%;}
	
	.container li {font-size: 1em;}
	
	.card2 {width: 22vw;}	
	
	#footer {
			width: 50%;
	}

}

@media only screen and (max-width : 550px) {
	
	#contentheading h2 {font-size: 1.2em;} 
	#contentheading h4 {font-size: .8em;} 
	}
	
	#footer {
			width: 70%;
	}
	

}