body {background-color:#ff0300 ;
body.nope .container > div.menu ul li #nope{background-color:#FF3;}
body.rsvp .container > div.menu ul li #rsvp{background-color:#FF3;}
body.ud .container > div.menu ul li #ud{background-color:#FF3;}
body.respond .container > div.menu ul li #respond{background-color:#FF3;}
body.sl35one .container > div.menu ul li #sl35one{background-color:#FF3;}
body.sl35two .container > div.menu ul li ul li #sl35two{background-color:#FF3;}
body.sl35three .container > div.menu ul li ul li #sl35three{background-color:#FF3;}
body.sl35four .container > div.menu ul li ul li #sl35four{background-color:#FF3;}
body.payment .container > div.menu ul li #pay{background-color:#FF3;}
body.dec .container > div.menu ul li #dec{background-color:#FF3;}	
body.home .container > div.menu ul li #updateinfo{background-color:#FF3;}
body.home .container > div.menu ul li #home{background-color:#FF3;}
body.miss .container > div.menu ul li #miss{background-color:#FF3;}
body.con .container > div.menu ul li #con{background-color:#FF3;}
body.re50 .container > div.menu ul li #re50{background-color:#FF3;}
body.re45 .container > div.menu ul li #re45{background-color:#FF3;}
body.rsvp .container > div.menu ul li #respond{background-color:#FF3;}
body.re40 .container > div.menu ul li #re40{background-color:#FF3;}
body.re30 .container > div.menu ul li #re30{background-color:#FF3;}
body.re35 .container > div.menu ul li #re35{background-color:#FF3;}
body.re10 .container > div.menu ul li #re10{background-color:#FF3;}
body.re15 .container > div.menu ul li #re15{background-color:#FF3;}
body.sl55 .container > div.menu ul li #sl55{background-color: #FF3;}

}
.container {
    display:grid;
    max-width: 100%;
    min-width: 200px;
    align-items: center;
    grid-template-areas: 
    'logo'
    'header'
    'menu'
    'photos'
    'footer';
}
.container > div {
  background-color:#ff0300 ;
  display:grid;
  align-items:center;
  text-align: center;
}
div.logo p {
  grid-area: logo;
 display:grid;
 align-items: center;
 text-align: center;
}



div.logo {
 max-width: 100px ;
 height:auto;
 align-items: center;
}

.container > div.header {
  grid-area: header;
  font-family:'Comic Sans MS', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 30px;
  color:#ff3;
  text-align: center;
 
}

.container > div.header > h2 {
    font-size: 25px;
    color:#fff;
}
.container > div.menu {
  grid-area: menu;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 font-weight:bold;
 text-align: center;
 }


.container > div.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 2px;
	overflow: hidden;
	background-color: #fff;
	list-style-image:none; font-size:18px; width:100%;
	
}


 .container > div.menu ul li {
	display: inline-block;
	color: black;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	}
	
/*.container > div.menu ul li ul li { visibility:hidden;} */
.container > div.menu ul li ul li a:hover{ visibility:visible; z-index:600;}	
 .container > div.menu ul li ul li { 
    display:block;
	overflow:hidden;
	margin-left:150px;
	position:relative;
	color: black;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	z-index:1;
	}	
	
	
 .container > div.menu ul li a:active {
	display: inline-block;
	color: black;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	}
	
.container > div.menu ul li a {
	display: inline-block;
	color: black;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	}
	
.container > div.menu ul li a:hover {
	display: inline-block;
	color: black;
	background-color:#CCC;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	}
#busindex ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	list-style-image:none;
	
}

#busindex ul li {
    float: left; list-style-image:none;
}

.container > div.menu ul li a, .dropbtn {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}

.container > div.menu ul li a:hover, .dropdown:hover .dropbtn {
    background-color: #CCC; color:black; 
}


.container > div.menu ul li.dropdown {
    display: inline-block;
}

.container > div.menu .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.container > div.menu .dropdown-content a {
    color: black;
    padding: 10px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.container > div.menu .dropdown-content a:hover {background-color: #999; text-align:left;}

.container > div.menu .dropdown:hover .dropdown-content {
    display: block;text-align:left;
}								
ul.noshow li {text-decoration:none; list-style:none;}

img {
  width:100%;
  height: auto;
  align-items: center;
  text-align: center;
}

.container > div.photos {
  grid-area: photos;
  text-align: center;
  align-items: center;
  max-width: 100%;
  min-width: 200px;
  font-size: 25px;
  color: #ff3;
  min-width: 200px;
  height: auto;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.container > div.footer {
  grid-area: footer;
  text-align: center;
  color:#fff;
  align-items: center;
  font-size: 25px;
}


@media only screen and (max-width: 600px) {
  .logo {grid-area: 1 / span 6;}
  .header {grid-area: 2 / span 6;}
  .menu {grid-area: 3 / span 6;}
  .subhead {grid-area: 3 / span 6;}
  .photos {grid-area: 4 / span 6;}
  .footer {grid-area: 5 / span 6;}
}

@media only screen and (min-width: 600px) {
  .logo {grid-area: 1 / span 6;}
  .header {grid-area: 2 / span 6;}
  .menu {grid-area: 3 / span 6;}
  .subhead {grid-area: 3 / span 6;}
  .photos {grid-area: 4 / span 6;}
  .footer {grid-area: 5 / span 6;}
}

@media only screen and (min-width: 768px) {
  .logo {grid-area: 1 / span 6;}
  .header {grid-area: 2 / span 6;}
  .menu {grid-area: 3 / span 6;}
  .subhead {grid-area: 3 / span 6;}
  .photos {grid-area: 4 / span 6;}
  .footer {grid-area: 5 / span 6;}
}