/* specific to squarespace */
a {text-decoration:underline;}
.page-collection a {text-decoration:none;}

/* mobile specific styles */
@media only screen and (max-width: 480px) {
  .MobileSelect {font-size:11px;}
  .MobileList {width:160px;}
}

.castphoto {
    vertical-align: top;
    display: none; /* change to inline-block to display */
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 200px;}
.castphoto img {width:200px;}
.biodiv {width:100%;display:none;border: 2px solid #f8b61b;height:100%;}
.biophoto {float:left;margin:5px;width:300px;}
.biotext {text-align:left;}
.hide {display:none;}
.castcity {font-size:0.9em;color:#000000;border: 2px solid rgb(255, 255, 255); background: rgb(248, 182, 27);padding:7px;text-decoration:none;margin:4px;}
.castcity:hover {color:#000000;text-decoration:underline;}
h4 {color:#f8b61b;text-align:center;font-size:1.4em;line-height:2em;padding:0px;margin:0px;}

.selectcity {
  position: relative;
  /*Don't really need this just for demo styling*/
  float: center;
  min-width: 200px;
  margin: 0px 33%;
  /*margin: 0 auto;*/
}

/*.selectcity {border-radius:5px;padding:10px;padding-left:20px;padding-right:20px;border:1px solid red !important;}*/
.selectcity:after {
    content: '\f078';
    color: #000000;
    /*right: 11px; top: 6px;*/
    right: 20px; top: 0px;
    height: 34px;
    padding: 15px 0px 0px 8px;
    border-left: 1px solid #000000;
    position: absolute;
    pointer-events: none;
    font: normal normal normal 17px/1 FontAwesome;
}

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {display: none;}

.selectcity select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */  
  border-radius:10px;
  display: block;
  width: 100%;
  max-width: 320px;
  height: 50px;
  float: center;
  margin: 5px 0px;
  padding: 0px 24px;
  font-size: 1em;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 2px solid #000000;
  -ms-word-break: normal;
  word-break: normal;
}

/* mobile specific styles */
/* NOTE: requires 'viewport' meta tag to be set */
@media only screen and (max-width: 700px) {
  body,p {font-size:1.0em;}
  li {font-size:0.8em;} /* not sure why <li> is naturally larger than <p> on mobile? */
  .castphoto {width:80%;}
  .selectcity {margin: 0px 0%;}
  .selectcity:after {right:60px;}
}
@media only screen and (max-width: 850px) {
  .homescroller {display:none;} /* scroller doesn't fit after this point */
}