/****************************
-- Register Product --
****************************/
.success-fancy .fancybox-skin,
.success-fancy .fancybox-outer,
#register {
  border-radius: 5px;
}

#register {
  display: none;
  max-width: 620px;
  padding: 60px 60px 35px;
  width: 100%;
}

#register .grid .column {
  padding-bottom: 0;
}

#register .field {
  margin-bottom: 14px;
}

#register .field.submit {
  margin: 14px 0 0;
}

#register form + p {
  font-size: 11px;
  font-size: 1.1rem;
  margin-top: 15px;
}

#register form + p ~ p {
  font-size: 11px;
  font-size: 1.1rem;
}

#register ul.text {
  margin-bottom: 15px;
}

#register label {
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 1px 0;
}

#register label[for="newsletter"],
#register label[for="downloadgenie"] {
  font-size: 12px;
  font-size: 1.2rem;
  margin-left: 25px;
}

#register input[type="email"],
#register input[type="number"],
#register input[type="text"] {
  font-size: 14px;
  font-size: 1.4rem;
  width: 100%;
}

#register select {
  width: 100%;
}

#register input + .errors,
#register select + .errors {
  display: none;
  margin: 10px 0 0;
}

#register input + .errors.show,
#register select + .errors.show {
  display: block;
}

#register #purchase:hover {
  cursor: text;
}

#register .register + a {
  margin-left: 7px;
  text-decoration: underline;
}

#register .errors {
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 15px;
}

#register #response-loading {
  clear: both;
  display: none;
  margin: 10px 0 0;
  min-height: 1.5em;
  padding-top: 10px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

#register #response-loading.loading {
  background: url('../images/hor-loading.gif') 50% 50% no-repeat;
  display: block;
}

#register #response-message.success {
  color: #14a22b;
}

/* Fix for Native Android browser not showing the image */
.hh-only .fancybox-wrap.fancybox-close {
  background: none;
}

.hh-only .fancybox-wrap .fancybox-close:after {
  background-color: #000;
  border: 2px solid #fff;
  border-radius: 50%;
  content: 'x';
  color: #fff;
  font-size: 16px;
  height: 28px;
  left: 50%;
  line-height: 16px;
  margin-left: -14px;
  margin-top: -14px;
  padding: 4px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 28px;
  z-index: 1;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.7);
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.7);
}

@media screen and (max-width: 680px) {
  /* Success */
  #register {
    padding-bottom: 35px;
    padding-right: 35px;
  }
  
  #register form > .grid > .column {
    width: 33.33%;
  }
  
  #register form > .grid > .c-3 {
    width: 66.66%;
  }
  
  #register .field.submit {
    margin-top: 30px;
  }
  
  #register .register {
    float: right;
  }
  
  #register .register + a {
    clear: both;
    float: right;
    margin-top: 10px;
    text-align: right;
  }
  
  #register #response-loading {
    float: right;
    width: 100%;
  }
}
@media screen and (max-width: 560px) {
  /* Success */
  #register form > .grid > .column {
    width: 100%;
  }
  
  #register form > .grid > .c-3 {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  /* Success */
  #register {
    padding-bottom: 25px;
    padding-right: 15px;
  }
  
  #register form > .grid > .c-3 > .grid > .column {
    margin-top: 15px;
    width: 100%;
  }
  
  #register form > .grid > .c-3 > .grid > .column:first-child {
    margin-top: 0;
  }
}