html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

main {
  height: auto;
  min-height: 100%;
  grid-gap: 0;
  display: grid;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("images/background.jpg");
  color: white;
  grid-template: "container";
  place-items: center;
}

main .overlay {
  z-index: 1;
  background-color: #cc0000;
  min-height: 100%;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  grid-area: container;
}

.thanks {
  grid-area: container;
  z-index: 2;
  grid-gap: 0;
  height: 100%;
  display: none;
  place-items: center;
}

.thanks .content {
  display: grid;
  place-items: center;
  text-align: center;
}

.thanks .content h3 {
  font-size: 2rem;
  font-weight: 600;
  color: white;
}

.view {
  grid-area: container;
  z-index: 2;
  grid-gap: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(30px, auto) min-content 30px min-content minmax(40px, auto);
  grid-template-areas: "." "header" "." "form" ".";
}

.view header {
  grid-area: header;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

.view .form {
  grid-area: form;
  display: grid;
  grid-template-columns: minmax(15px, auto) 1fr minmax(15px, auto);
}

.view .form form {
  padding: 20px 20px 20px 20px;
  background-color: #353e4a;
  grid-column-start: 2;
  display: grid;
  font-size: 1.1rem;
  grid-template-rows: repeat(8, 20px 30px 15px) 8px auto 8px auto 30px 60px;
  grid-template-areas: "first-name-label" "first-name" "first-name-error" "last-name-label" "last-name" "last-name-error" "email-label" "email" "email-error" "phone-label" "phone" "phone-error" "street-label" "street" "street-error" "city-label" "city"  "city-error" "province-label" "province" "province-error" "zip-label" "zip" "zip-error" "." "confirm" "." "message-optin" "." "button";
}

.view .form form .first-name-label {
  grid-area: first-name-label;
}

.view .form form #first_name {
  grid-area: first-name;
}

.view .form form #first_name-error {
  grid-area: first-name-error;
}

.view .form form .last-name-label {
  grid-area: last-name-label;
}

.view .form form #last_name {
  grid-area: last-name;
}

.view .form form #last_name-error {
  grid-area: last-name-error;
}

.view .form form .email-label {
  grid-area: email-label;
}

.view .form form #email {
  grid-area: email;
}

.view .form form #email-error {
  grid-area: email-error;
}

.view .form form .phone-label {
  grid-area: phone-label;
}

.view .form form #phone {
  grid-area: phone;
}

.view .form form #phone-error {
  grid-area: phone-error;
}

.view .form form .street-label {
  grid-area: street-label;
}

.view .form form #street {
  grid-area: street;
}

.view .form form #street-error {
  grid-area: street-error;
}

.view .form form .city-label {
  grid-area: city-label;
}

.view .form form #city {
  grid-area: city;
}

.view .form form #city-error {
  grid-area: city-error;
}

.view .form form .province-label {
  grid-area: province-label;
}

.view .form form #state {
  grid-area: province;
}

.view .form form #state-error {
  grid-area: province-error;
}

.view .form form .zip-label {
  grid-area: zip-label;
}

.view .form form #zip {
  grid-area: zip;
}

.view .form form #zip-error {
  grid-area: zip-error;
}

.view .form form .confirm-checkbox {
  grid-area: confirm;
}

.view .form form .message-optin-checkbox {
  grid-area: message-optin;
}

.view .form form #submit {
  grid-area: button;
}

.view .form form label {
  margin-left: 4px;
  align-self: flex-end;
}

.view .form form input, .view .form form select {
  color: black;
}

.view .form form input, .view .form form textarea, .view .form form select, .view .form form button {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1rem;
  border-radius: 25px;
  border: 2px solid #353e4a;
  padding-left: 6px;
  padding-right: 6px;
}

.view .form form label {
  font-size: 1.0rem;
}

.view .form form #submit {
  background-color: #cc0000;
  width: 140px;
  height: 100%;
  color: white;
  border-radius: 30px;
  text-align: center;
  justify-self: center;
  font-weight: 800;
}

.view .form form #submit:hover {
  background: #880000;
  cursor: pointer;
}

.view .form form .confirm-checkbox label, .view .form form .message-optin-checkbox label {
  font-size: 0.8rem;
}

.view .form form .confirm-checkbox label:hover, .view .form form .message-optin-checkbox label:hover {
  cursor: pointer;
}

.view .form form .confirm-checkbox input:hover, .view .form form .message-optin-checkbox input:hover {
  cursor: pointer;
}

.view .form form .error {
  color: orangered;
  align-self: center;
}

.view .form form label.error {
  font-size: 0.8rem;
}

.view .form form input[type="checkbox"] {
  accent-color: #cc0000;
}

.view .form form span a {
  color: white;
}

div.wix {
  height: auto;
  min-height: 100%;
  grid-gap: 0;
  display: grid;
  color: white;
  grid-template: "container";
  place-items: center;
  background-color: #353e4a;
}

div.wix .view {
  grid-template-rows: 1fr;
  grid-template-areas: "form";
}

div.wix .view .form {
  grid-template-columns: 1fr;
}

div.wix .view .form form {
  grid-column-start: 1;
  column-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 20px 30px 15px) auto 6px auto 10px 60px auto;
  grid-template-areas: "first-name-label last-name-label" "first-name last-name" "first-name-error last-name-error" "email-label phone-label" "email phone" "email-error phone-error" "street-label street-label" "street street" "street-error street-error" "city-label province-label" "city province"  "city-error province-error" "zip-label ." "zip ." "zip-error ." "confirm confirm" ". ." "message-optin message-optin" ". ." "button button" ". .";
}