.homepage-announcement {width:100%; min-width:1150px; display:block; margin:auto; padding:46px 0px 30px 0; background-color:rgb(218,218,218);}
.homepage-announcement p {width:60%; display:block; margin:auto; text-align:center; font-weight:bold; padding:20px 0; color:#cc0000;}
#homepage-image {height:450px; width:100%; min-width:1150px; display:block; margin:auto; background-color:rgb(218,218,218); background-image:url("surr.jpg"); background-repeat:no-repeat; background-size:920px 98%; background-position:center; border-bottom:20px solid rgb(218,218,218);}
#img-attribution {width:1150px; display:block; position:relative; margin:auto; padding-top:310px;}
#img-attribution>a {right:14%; position:absolute; padding:.5% 1%; border-radius:10px; background-color:rgba(100,100,100,.6); color:#333; text-decoration:none;}
#img-attribution>a:hover {color:#0000cc;}
#homepage-menu-container {position:relative; max-width:1150px; width:1150px; display:block; margin:auto;}
.homepage-menu {width:834px; height:243px; display:block; margin:auto; background-color:rgb(218,218,218); position:relative; margin-top:-120px; padding:8px;}
.homepage-menu>div {width:272px; height:100%; display:block; float:left; background-color:rgb(253,238,187); margin:0 3px;}
.homepage-menu>div h2 {width:100%; background-color:rgb(2,52,91); color:#fff; text-align:center; margin:0; padding:8px 0;}
.homepage-menu>div a {display:block; width:256px; height:65px; font-size:1.12em; text-decoration:none; line-height:340%; padding-left:16px; color:rgb(55,64,66); transition:background-color .3s ease; border-bottom:1px solid rgb(199,186,117);}
.homepage-menu>div a:hover {background-color:rgb(199,186,117);}
.mainpage-bottom {display:block; margin:30px auto 0 auto; width:1150px; padding-bottom:80px; overflow:hidden;}
.eventsbox {width:580px; height:auto; overflow:hidden; display:block; margin:auto; border:1px solid #000; background-color:rgb(253,238,187);}
.eventsbox h2 {width:90%; background-color:rgb(26,26,46); padding:2% 0 2% 10%; color:#fff; margin:0;}
.eventsbox p {font-size:1em; font-style:italic; padding:2% 10% 0 10%;}
.eventsbox a {font-size:1.1em; font-style:normal; font-weight:bold; color:rgb(2,52,91);}
.museumdaylive {font-size:1.1em !important; font-style:normal !important;}
.eventsbox a:hover {color:#cc0000;}
.mainpage-calendarlink {float:right; display:block; margin:10px 40px 20px 0;}
.mainpage-socialbox {width:46%; display:block; min-width:1020px; margin:auto; margin-bottom:100px;}
.followus {text-align:center; font-size:1.7em; padding-top:20px;}
.socialmediabox {width:300px; height:86px; background-color:rgb(26,26,46); float:left; margin:0 20px; line-height:86px;} /* 72,93,94 */
.socialmedialink {text-decoration:none; display:block; height:100%; color:#fff; font-size:150%;}
.facebook {padding-left:20%; width:80%;}
.twitter {padding-left:6%; width:94%;}
.news {text-align:center; width:100%;}
.socialimage {display:block; height:76px !important; width:auto; float:right; margin:5px 5% 0 0;}
.eventsbox img {border:1px solid rgb(55,64,66); display:block; margin:auto;}
.specialhours {width:100%; min-width:1150px; margin:auto; padding-bottom:2% !important;}
.specialhours p {width:65%; margin:auto; padding:3% 7%; border:2px solid #cc0000; font-weight:bold; font-size:1.1em;}
.closeddate {margin-left:5%;}
.pagespecificcontent > div:not(.mainpage-footer) {margin:auto; max-width:none; padding:0; height:initial; overflow:visible;}

/* When width is roughly mobile-sized */
@media (max-width:555px){
.homepage-announcement {min-width:0; padding:32px 0px 28px 0;}
.homepage-announcement p {width:80%;}
#homepage-image {height:200px; width:100%; min-width:0; display:block; margin:auto; background-color:rgb(218,218,218); background-repeat:no-repeat; background-size:auto 100%; background-position:center; border-bottom:none;}
#img-attribution {width:100%; display:block; position:relative; margin:auto; padding-top:160px;}
#img-attribution>a {right:7%; padding:1%; font-size:.8em;}
#homepage-menu-container {position:relative; max-width:100%; width:100%; display:block; margin:auto;}
.homepage-menu {width:100%; height:auto; overflow:hidden; display:block; margin:auto; background-color:#fff; position:relative; margin-top:0; padding:8px 0;}
.homepage-menu>div {width:92%; height:auto; overflow:hidden; display:block; float:none; background-color:rgb(253,238,187); margin:auto; margin-top:3%;}
.homepage-menu>div h2 {width:100%; background-color:rgb(2,52,91); color:#fff; text-align:center; margin:0; padding:8px 0;}
.homepage-menu>div a {display:block; width:100%; height:66px; font-size:1.2em; text-decoration:none; line-height:320%; padding-left:16px; color:rgb(55,64,66);}
.homepage-menu>div a:hover {background-color:rgb(199,186,117);}
.mainpage-bottom {display:block; margin:10px auto 0 auto; width:100%; padding-bottom:40px; overflow:hidden;}
.eventsbox {width:96%; height:auto; overflow:hidden; display:block; margin:auto; border:1px solid #000; background-color:rgb(253,238,187);}
.eventsbox h2 {width:90%; background-color:rgb(26,26,46); padding:2% 0 2% 10%; color:#fff; margin:0;}
.eventsbox p {font-size:1em; font-style:italic; padding:2% 10% 0 10%;}
.eventsbox a {font-size:1.1em; font-style:normal; font-weight:bold; color:rgb(2,52,91);}
.mainpage-calendarlink {float:right; display:block; margin:3% 8% 8% 0;}
.mainpage-socialbox {width:100%; min-width:0; margin:auto;}
.followus {text-align:center; font-size:1.7em;}
.socialmediabox {width:92%; height:86px; float:none; margin:5% auto 0 auto; line-height:86px;} /* 72,93,94 */
.socialmedialink {text-decoration:none; display:block; height:100%; color:#fff; font-size:150%;}
.facebook {padding-left:16%; width:84%;}
.twitter {padding-left:4%; width:96%;}
.news {text-align:center; width:100%;}
.socialimage {display:block; height:50px !important; width:auto; float:right; margin:18px 5% 0 0;}
.specialhours {width:80%; min-width:0; margin:auto; padding-bottom:8% !important;}
.specialhours p {width:85%; padding:5% 7%; font-size:1em;}
.closeddate {margin-left:0;}
}

@media (min-width:475px) and (max-width:555px){
#img-attribution {width:100%; display:block; position:relative; margin:auto; padding-top:160px;}
#img-attribution>a {right:16%; padding:1%;}
}

@media (max-width:300px){
.socialmedialink {font-size:112%;}
.socialimage {height:40px; width:auto; margin:23px 8% 0 0;}
}

@media (min-width:556px) and (max-width:768px){
.homepage-announcement {min-width:0; padding:90px 0px 30px 0; margin-top:-5px !important;}
.homepage-announcement p {width:70%;}
#homepage-image {height:360px; width:100%; min-width:0; display:block; margin:-5px auto 0 auto; background-color:rgb(218,218,218); background-repeat:no-repeat; background-size:auto 98%; background-position:center; border-bottom:20px solid rgb(218,218,218);}
#img-attribution {width:100%; display:block; position:relative; margin:auto; padding-top:256px;}
#img-attribution>a {right:4%; padding:1%;}
#homepage-menu-container {position:relative; max-width:99%; width:99%; display:block; margin:auto;} /* 634px */
.homepage-menu {width:98%; height:243px; display:block; margin:auto; background-color:rgb(218,218,218); position:relative; margin-top:-80px; padding:1% .5%;} /* 618px */
.homepage-menu>div {width:31.33%; height:100%; display:block; float:left; background-color:rgb(253,238,187); margin:0 1%;}
.homepage-menu>div h2 {width:100%; background-color:rgb(2,52,91); color:#fff; text-align:center; margin:0; padding:8px 0;}
.homepage-menu>div a {display:block; width:95%; height:65px; font-size:1.1em; text-decoration:none; line-height:380%; padding-left:5%; color:rgb(55,64,66); transition:background-color .3s ease; border-bottom:1px solid rgb(199,186,117);}
.homepage-menu>div a:hover {background-color:rgb(199,186,117);}
.mainpage-bottom {display:block; position:relative; height:auto; margin:20px auto 0 auto; width:100%; padding-bottom:40px; overflow:hidden;}
.eventsbox {width:42%; height:auto; overflow:hidden; display:block; margin:0 0 3% 4%; border:1px solid #000; background-color:rgb(253,238,187); float:left;}
.eventsbox h2 {width:90%; background-color:rgb(26,26,46); padding:2% 0 2% 10%; color:#fff; margin:0;}
.eventsbox p {font-size:1em; font-style:italic; padding:3% 10% 0 10%;}
.eventsbox a {font-size:1.1em; font-style:normal; font-weight:bold; color:rgb(2,52,91);}
.mainpage-calendarlink {float:right; display:block; margin:3% 8% 8% 0;}
.mainpage-socialbox {width:46%; min-width:0; position:absolute; margin-left:51%; top:0;}
.followus {text-align:center; font-size:1.7em;}
.socialmediabox {width:100%; min-width:255px; height:86px; float:none; margin:20px auto 0 auto; line-height:86px;} /* 72,93,94 */
.socialmedialink {text-decoration:none; display:block; height:100%; color:#fff; font-size:130%;}
.facebook {padding-left:20%; width:80%;}
.twitter {padding-left:6%; width:94%;}
.news {text-align:center; width:100%;}
.socialimage {display:block; height:76px !important; width:auto; float:right; margin:5px 5% 0 0;}
.specialhours {width:80%; min-width:0; margin:auto; padding-bottom:4% !important;}
.specialhours p {width:80%; padding:3% 7%;}
}