html, body { 
  background: url(../images/slider/splash_image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/slider/city_slider.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/slider/city_slider.jpg', sizingMethod='scale')";
  
  margin: 0; padding: 0; height: 100%; color: #fff; background-color:#000; font-family: 'Roboto', sans-serif;
}

.clear { clear:both; }
#invalid-date {display: none; padding-bottom: 20px; text-align:center; width: 100%;}
#invalid-age {display: none; padding-bottom: 20px; text-align:center; width: 100%;}

::-webkit-input-placeholder {
   color: white;
}

:-moz-placeholder { /* Firefox 18- */
   color: white;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: white;  
}

:-ms-input-placeholder {  
   color: white;  
}

#age-wrapper { margin: 0 auto; width: 500px; background-color: rgba(0,0,0,0.8); height: 100%; border-right: 1px solid #333; border-left: 1px solid #333;}
.logo { width: 100%; text-align:center; padding-top: 20%;}
.logo img { width: 400px; }

.age-check { width: 400px; margin: 20px 50px 0px 50px; padding: 20px 0px 20px 0px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
.age-check .input-wrapper { border: 1px solid #2e2e2d; width: 240px; height: 25px; background-color: #211d1b; padding: 5px 5px 5px 5px; float: left;} 
.age-check input { display:inline; width: 70px; float: left; border: 0px; border-right: 2px solid #a9a9a9; background-color: #211d1b; font-size: 150%; font-weight: bold; color: #fff; padding: 0px; margin: 0px; height: 25px; line-height: 25px; text-align:center;}
.age-check input.year { display:inline; width: 90px;  border: 0px; background-color: #211d1b; text-align:center; }
/*.age-check .button { float: right; width: 130px; font-size: 150%; margin-left: 10px; height: 37px; background-color: #957f5f; color: #a9a9a9; border: 0px; }*/
.age-check .button { float: right; width: 130px; font-size: 150%; margin-left: 10px; height: 37px; background-color: #810023; color: #ffffff; border: 0px; }

.body-content { width: 400px; margin: 50px 50px 0px 50px; color: #fff; text-align:center; }
.footer { width: 500px; font-size: 90%; text-align: center; margin-top: 20px; }
.footer a { text-decoration: none; color: #ffffff; }
.footer a:hover { text-decoration: none; color:#999; }

@media only screen and ( max-width : 640px)  {
	
body, html { background: url(../images/slider/city_slider.jpg) center #000000; }

#age-wrapper { margin: 0; width: 90%; padding: 0% 5% 0% 5%; background-color: rgba(0,0,0,0); height: 100%; border-right: 0px; border-left: 0px;}
.logo { width: 100%; text-align:center;}
.logo img { width: 100%; }

.age-check { width: 100%; margin: 0; padding: 20px 0px 20px 0px; border-top: 1px solid #999; border-bottom: 1px solid #999; }
.age-check .input-wrapper { width: 100%; padding: 5px 0px 5px 0px; float: none;} 
.age-check input { width: 29%;}
.age-check input.year { display:inline; width: 40%;  border: 0px; background-color: #211d1b; text-align:center; }
.age-check .button { float: none; width: 100%; margin: 20px 0px 0px 0px; height: 37px; background-color: #810023; color: #ffffff; border: 0px; }

.body-content { width: 100%; margin: 20px 0px 20px 0px;}
.footer { width: 100%; font-size: 90%; text-align: center; margin-top: 20px; }
.footer a { text-decoration: none; color: #ffffff; }
.footer a:hover { text-decoration: none; color:#999; }
	}