#errors {display:none;}
#errors h1 {color:#0b3a79;}
#errors p { margin-top:20px;}
.modalDialog {display:none; }
.modalDialog:target {
    display:block;
}
.modalDialog:target  .success { display:block;}
.buttonWrap {margin-top:40px;}
 .buttonWrap > a {
        background: #005caa; /* Old browsers */
        background: -moz-linear-gradient(top, #005caa 0%, #0079c1 99%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005caa), color-stop(99%,#0079c1)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #005caa 0%,#0079c1 99%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #005caa 0%,#0079c1 99%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #005caa 0%,#0079c1 99%); /* IE10+ */
        background: linear-gradient(to bottom, #005caa 0%,#0079c1 99%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005caa', endColorstr='#0079c1',GradientType=0 ); /* IE6-9 */
        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;

    }
.modal-prompt {
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  width: 36%;
  height: auto;
  margin: 0 auto;
  padding: 20px 50px 35px;
  position: relative;
  top: 25%;
  z-index: 1000000;
   border-radius: 10px ;
   text-align:center;
}

#prompt-background , .overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999999;

 }
 .overlay{
 background:  #555;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 8888;
  opacity:0.9;
 }

#age-check-prompt h1 {font-size:2em; text-transform:capitalize; margin:0;}
.modalDialog ul li, .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;
}
.modalDialog select { width:130px; margin:0 -10px;}
.modalDialog ul { margin:25px 0 0 0; padding:0; }
.modalDialog ul li {list-style-type:none; display:inline-block; line-height:50px; margin-right:20px; padding:0 10px;  margin-top:10px;}
.modalDialog label.custom-select {
position: relative;
display: inline-block;
}
.modalDialog .custom-select select {
	padding: 4px 3px 3px 5px;
 }
/* Select arrow styling */
.modalDialog .custom-select:after {
content: "";  /* Current arrow I would like to change */
position: absolute;
top: 42%;
right: 0px;
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;
}

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

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