* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grecaptcha-badge {
  display: none!important
}
.grecaptcha-badge.show {
  display: block!important;
  visibility: visible!important
}

body {
  background-color: #fffdf5;
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-weight: 400;
  font-style: normal;
}
b, strong {font-weight: 700;}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1098px;
  width: 100%;
  margin: 0px auto;
}

select,
textarea,
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

input::-webkit-input-placeholder {color: #000;}
input:-moz-placeholder {color: #000;}
input::-moz-placeholder {color: #000;}
input:-ms-input-placeholder {color: #000;}
input::placeholder {color: #000;}


.cc-window.cc-floating,
.cc-banner .cc-message {
  width: 100% !important;
  max-width: 100% !important;
}

main {overflow: hidden;  }

#newsletter {padding: 44px 24px; background-color: #000; color: #ffffff; display: flex; align-items: flex-start; justify-content: center; position: relative;}
#newsletter > h2 {
  font-family: "ivypresto-display", serif;
  font-weight: 100;
  font-style: normal;
  font-size: 36px;
  line-height: 1.17; 
  letter-spacing: 0.72px; 
  margin: 0 32px 0 0;
}

#signup {width: 100%; max-width: 440px;}
#signup .form-details {display: flex; align-items: center; justify-content: center;}

#signup .textbox {position: relative; margin-right: 18px; width: 100%;}
#signup .textbox.error::after {
  animation: fadeIn 0.6s ease-out forwards;
  content: "x";
  color: #b53939;
  font-weight: 900;
  top: 10px;
  position: absolute;
  right: 12px;
}
#signup .textbox input {
  background-color: #fffdf5;
  outline: none;
  width: 100%;
  max-width: 400px;
  height: 44px;
  padding: 4px 16px;
  border: none;
  font-size: 16px;
  color: #000;
}

#signup .signup-submit {
  outline: none;
  padding: 4px 24px;
  position: relative;
  width: 120px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #fffdf5;
  background-color: #000;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#signup .signup-submit:hover {
  background-color: #FFFDF5;
  color: #000;
}

/* #signup {position: relative;} */
#signup .signup-message { 
  margin-top: 12px; text-align: center;;
  /* display: none; position: absolute; left: 0; bottom: -32px; */
}


header {margin-top: 72px;}
header img {display: block;}
header .mobile-banner {display: none;}

footer {padding: 56px 24px;}
footer p { text-align: center; line-height: 1.6; margin: 0 0 4px; }
footer p a {color: #000; text-decoration: underline;}
footer p a:hover {opacity: 0.7;}

@media screen and (max-width: 1600px) {
  header {margin-top: 32px;}
  footer {padding: 32px 24px 48px;}
}
@media screen and (max-width: 1024px) {
  header {margin-top: 0;}
  main {padding: 24px 20px 0;}
  #newsletter {padding: 20px 16px 32px; flex-direction: column; align-items: center;}
  #newsletter > h2 {margin: 0 0 12px; font-size: 18px; line-height: 1.4; letter-spacing: 0.36px;}
}
@media screen and (max-width: 620px) {
  #signup .textbox input {width: 100%;}
  #signup .textbox {margin-right: 8px;}
  #signup .textbox input {
    font-size: 14px;
    height: 36px;
    padding: 0 8px;
  }
  #signup .signup-submit {
    font-size: 12px;
    height: 36px;
    padding: 0 16px;
    width: auto;
  }
  #signup .textbox.error::after {top: 5px;}
  main {
    padding: 0 20px 80px;
    margin-top: -44px;
  }
  header img.banner {display: none;}
  header .mobile-banner {
    padding: 154px 0;
    background-image: url(../img/banner_mobile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    display: flex; align-items: center; justify-content: center;

    h1, h3 { font-family: "ivypresto-display", serif; font-weight: 100; color: #000;}
    h1 {font-size: 54px; font-size: clamp( 32px, 14vw, 54px ); margin: 0; text-align: center;}
    h3 {font-size: 32px; font-style: italic; margin: 0 0 50px; text-align: center;}
    p {font-size: 14px; font-weight: bold; text-align: center; text-transform: uppercase;}
  }
}

@media screen and (max-width: 440px) {
  header .mobile-banner {padding: 116px 0;}
}