* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; font: 1em Verdana, Geneva, Arial, Serif, Helvetica, Sans-serif; }
.topbar { display: block; min-width: 310px; width:100%; height:100px; border-bottom: 1px solid #f38020; }
.logo { margin-top: 0px; height: 99px; background-image: url("../images/phoenix_large.png"); background-repeat: no-repeat }
ul.navbar { list-style: none; text-align: center; float: right; display: block; width: 460px }
ul.navbar li { position: relative; display: inline-block }
ul.navbar li a { text-decoration: none; display: block; padding: 15px 5px }
ul.navbar li a:hover { background-color: #f38020; color: #fff; }
ul.navbar li.menuIcon { display: none; }
.box { min-width: 310px; width: 100%; border-bottom: 1px solid #f38020; }
.upcomingconcert { border-style: solid; border-color: #fff; border-left-width: 20px; border-bottom-width: 20px; text-align: right; background-image: url("../images/phoenixPic.jpg"); background-position: left bottom; background-repeat: no-repeat; }
.previousevents { text-align: left; background-color: #fed8b1; }
.concertdetails { height: 500px; }
.aboutus { text-align: left; color: #000; }
.aboutus a { color: #000; }
.aboutus a:hover { color: #000; }
.rightimages { float: right; }
.rightsmallimages { float: right; }
.inconcert { padding: 10px; }
.conductor { padding: 10px; }
.benright { padding: 10px; }
.teachers { text-align: left; background-color: #fed8b1; }
.clearboth { clear: both; }
.inthenews { background-color: #fed8b1; }
.recordings { }
h1, h2 { font-weight: bold; font-size: 1.2em; padding: 16px 12px; margin: 0; }
a { color: #000; }
a:hover { text-decoration: none; color: #000; }
.nigelleft { float: left; padding: 15px; }
.robleft { float: left; padding: 15px; }
.ststephensleft { float: left; padding-left: 15px; padding-bottom: 15px; padding-right: 15px }
.leftimages { float: left }
.clearleft { clear: left }
.clearboth { clear: both }
.clearright { clear: right }
small { font-size: 80% }
p { padding: 16px 12px; }
.twitter-follow-button { margin-top: -3px; margin-bottom: -3px; margin-right: 10px }
.socials { margin-left: 5px; vertical-align: middle }
img { margin-top: 6px; }
b { font-weight: bold }

@media screen and (max-width: 74em) {
  .upcomingconcert { background-image: url("../images/phoenixPic_small.jpg") }
  .logo { margin-top: 0px; height: 99px; background-image: url("../images/phoenix.png"); background-repeat: no-repeat }
  .bandstand { width: 325px }
}

@media screen and (max-width: 50em) {
  .logo { margin-top: 0px; height: 99px; background-image: url("../images/phoenix.png"); background-repeat: no-repeat }
  .upcomingconcert { background-image: url("../images/phoenixPic_smaller.jpg") }
  .inconcert { width: 300px; padding: 7px }
  .conductor { width: 100px; }
  .nigelleft { width: 192px; height: 128px; padding: 7px }
  .robleft { width: 125px; height: 145px; padding: 7px }
  .sueryder { height: 50px }
  .ststephensleft { height: 220px; padding-left: 7px; padding-bottom: 7px; padding-right: 7px } 
  .concertdetails { height: 350px; background-color: #fed8b1; }
  small { font-size: 60%; }
  .leftimages p { padding-left: 15px; padding-right: 10px; }
  p { padding: 8px 6px; }
  h1, h2 { padding: 8px 6px; }
  .nav { position: fixed; width: 100%; }
  ul.navbar li { display: none; }
  ul.navbar li.menuIcon { position: relative; background-color: #fff; color: #000; float: right; display: block; width: 2.8em; text-align: center; border: 1px solid #000; }
  ul.navbar.responsive { list-style: none; display: block; float: right; width: 200px; }
  ul.navbar.responsive li.menuIcon { text-decoration: none; display: block; width: 2.8em; background: #fff; color: #000; border: 1px solid #000; text-align: center; }
  ul.navbar.responsive li { display: inline-block; background-color: #fff; color: #000; width: 200px; text-align: right; border: 1px solid #000; }
  ul.navbar.responsive li a:hover { background: #f38020; color: #fff; }
  .twitter-follow-button { margin-right: 5px }
}

@media screen and (max-width: 30em) {
  * { font-size: 0.95em }
  h1, h2 { font-size: 0.95em }
  .upcomingconcert { background-image: url("../images/phoenixPic_tiny.jpg"); }
  .inconcert { width: 300px; padding: 7px }
  .benright { width: 241px; height: 154px; padding: 7px }
  .nigelleft { width: 150px; height: 100px; padding: 7px }
  .robleft { width: 100px; height: 116px; padding: 7px }
  .rightimages { float: none; display: block; text-align: center }
  small { font-size: 60% }
  ul.navbar.responsive { width: 140px; }
  ul.navbar.responsive li { width: 140px; }
  .twitter-follow-button { margin-right: 5px }
}