body{
color:#ffffff;
font-family:"trade-gothic-next";
margin: auto !important;
max-width: 100%;
}
.container{
    font-size: 14px;
}
.page-title {
    background-color: #000000;
    padding: 0 15px;
    margin-bottom: 30px;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
}
.container:after, .container:before {
    content: " ";
    display: table;
}
.page-title h1 {
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    font-size: 80px;
    line-height: 56px;
    padding: 7px 0;
    display: inline-block;
}
.form-required-astrick{
color: red;
}

.logo{
  max-width: 163px !important;
}
.navbar{
  border-bottom: 0px solid #000000;
}

#buy-tickets {  
 
  width: 139.12px;  
    border: 1px solid transparent;
  padding:10px 0;
      
}

.buttons:not(:disabled):not(.disabled) {
    cursor: pointer;
}

footer{
  background-color: #000000;
  color: #d8d8d8;
}
footer hr{
  size: 3px;  
  /*width: 707px; */
  border: 1px solid #979797;
}
.social img{
  max-height: 28px;
  width: auto;
  margin: 12px;
}

.form-heading{
    color: #FFFFFF;  font-size: 42px;  font-weight: bold;  line-height: 46px;
    text-transform: uppercase;
}
.form-subheading{
  text-transform: uppercase;
  color: #FFFFFF;  font-size: 10px;  font-weight: bold;  letter-spacing: 1px;  line-height: 14px;
}

.footer-nav a, .copyright{
   color: #ffffff !important; 
    font-size: 15px;  
    font-weight: 500; 
    letter-spacing: 0.3px;  
    line-height: 22px;
    text-decoration: none;
    
}
.footer-nav {
  padding: 30px 0;
}
.footer-nav div{
  padding: 10px 0;
}
.copyright{
  padding-bottom: 60px;
}
.submit-btn{
  width: 160px;    
  border-style: double;
  border-width: 3px;
  padding:5px 0;
}
.buttons{
   height: 40px;
   background-color: #bc9d66;
   color: #000000 !important;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      line-height: 20px;
    font-family: "trade-gothic-next";
  text-transform: uppercase;
}
.buttons:hover{
  background-color: #bc9d66;
}
.formcontainer{
    background-color: #000000;
        max-width: 794px;
        padding: 40px;
        margin-top: 30px;
        margin-bottom: 60px;
}
select {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.form-input {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 12px 10px;
    font-size: 10px;
    line-height: 14px;
    color: #495057;
    background-color: #FFFFFF;
    background-clip: padding-box;
    border: 1px solid #000000;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    height: 40px;
   letter-spacing: 1px;
font-weight: bold;
}

.invalid{
    border: 1px solid #C21800;
}
#body-container{
  background-color: #000000;
}
/* webkit solution */
::-webkit-input-placeholder,::placeholder { text-align:right;color: red; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; color: red;}
:-ms-input-placeholder{text-align:right; color: red;}


/* show the placeholder when input has no content (no content = invalid) */
/*input[required]:invalid + label {
    display: inline-block;
}*/

/* hide the placeholder when input has some text typed in */
/*input[required]:valid + label{
    display: none;
}*/

.formcontainer .testing,.form-input-group{
  position: relative;
}
.testing label,.form-input-group label{
  position: absolute;
  left: 25px;
  color: #000000;
  top: 13px;
  margin-bottom: 0 !important;
  text-transform: uppercase;
  font-size: 10px;
}
.form-input-group input:focus + label{
  opacity: 0;
  display: none;
}
/*TODO: when there is an input value in the box don't show the label anymore*/
.form-input-group input:not([value=""]) + label{
  opacity: 0;
  display: none;
}
.form-input-group input:[value=""] + label{
  opacity: 1;
  display: inline-block;
}
.show-validation{
  opacity: 1 !important;
  color: #c21800 !important;
  position: absolute !important;
  right: 20px !important; 
  left: auto !important; 
  top: 7px;
  margin-bottom: 0 !important;
  text-transform: uppercase;
  display: inline-block !important;
}
.form-input-group input[required]:invalid + ::placeholder{
  content: "Please enter valid";
  display: inline-block;
}
#birthday-label{
  color: #FFFFFF;  font-size: 10px;  font-weight: bold;  letter-spacing: 1px;  line-height: 14px;
}
.form-dropdown option:checked{
 color: #000000;
}
.form-input:focus{
    border: 1px solid #000000;
}
#back-btn{
    height: 40px; width: 237px;
     padding:10px 20px;
}
#thank-you-message{
padding-bottom: 30px;
font-size: 18px; line-height: 30px; color: #000000;
}
.thank-you-wrapper{
padding-bottom: 80px;
}
@media (max-width: 480px){

.submit-btn,#back-btn{
  width: 100%;
display: block;
}

#buy-tickets{
height: 37px;
width: 91px;
font-size: 12px;
      font-weight: 500;
line-height: 17px !important;      
}
.form-heading{
  font-size: 32px;
    line-height: 36px;
}
}