#age-errors {display:none;}
#age-errors h1 {color:#0b3a79;}
#age-errors p { margin-top:20px;}
.age-modalDialog {display:none; }
.age-modalDialog:target {
  display:block;
}
.age-modalDialog:target  .age-success { display:block;}
.buttonWrap {margin-top:40px;}
.buttonWrap > a {
  background: #007ac7;
  border-radius: 6px;
  box-shadow: 1px 3px 10px #ccc;
  color: #fff;
  display: inline-block;
  max-height: 46px;
  padding:12px 15px;
  text-transform: uppercase;
  min-width:100px;
  margin:10px 0 0 15px;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.age-modal-prompt {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  width: 90vw;
  height: auto;
  margin: 0 auto;
  padding: 20px 50px 35px;
  position: relative;
  top: 25%;
  z-index: 1000000;
  border-radius: 10px ;
  text-align:center;
  box-sizing: border-box;
}
#prompt-background , .age-overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999999;

}
.age-overlay{
 background:  #555;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 z-index: 9999999;
 opacity:0.9;
}
#age-check-prompt h1 {font-size:2em;text-transform:capitalize;margin:0;color: #000;}
.age-modalDialog ul li, .age-modalDialog select {
  background: #323a40;
  height:50px;
  color:#fff;
  border:none;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  font-size:14px;
  border-radius:3px;
  text-transform: uppercase;
}
.age-modalDialog select { width:130px; margin:0 2px;}
.age-modalDialog ul { margin:25px 0 0 0; padding:0; }
.age-modalDialog ul li {list-style-type:none; display:inline-block; line-height:50px; margin-right:20px; padding:0 10px;  margin-top:10px;}
.age-modalDialog label.custom-select {
  position: relative;
  display: inline-block;
}
.age-modalDialog .custom-select select {
	padding: 4px 3px 3px 5px;
}
/* Select arrow styling */
.age-modalDialog .custom-select:after {
  content: "";  /* Current arrow I would like to change */
  position: absolute;
  top: 42%;
  right: 0;
  bottom: 0;
  font-size: 60%;
  line-height: 30px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 7.5px 0 7.5px;
  border-color: #fff transparent transparent transparent;
  pointer-events:none;
}
select::-ms-expand {
    display: none;
}

@media only screen and (min-width: 260px) and (max-width: 767px) {
  #age-check-prompt h1{
    font-size: 18px;
  }
  .age-modal-prompt{
    top:10%;
  }
  .buttonWrap > a {
    margin:10px 0 0 0;
    padding: 12px 9px;
  }
  .age-modalDialog ul li{
    padding: 0 0;
    margin-right: 0;
  }
}

@media only screen and (min-width: 260px) and (max-width: 773px) and (orientation : landscape){
  .age-modal-prompt{
    width: 65%;
  }
  .age-modalDialog select{
    width: 110px;
    margin: 0 1px;
  }
  .age-modalDialog .custom-select:after{
    right: 5px;
  }
}