:root {
  --color-yellow: #ffd966;
  --color-orange: #ffc514;
  --color-pink: #EA77A7;  /* #f38db5; text */ /* #EA77A7 smile */ /* #ff8fda; old */
  --color-purple: #7030a0;
}

.element-invisible,
#webform-client-form-285 .additional_information-textfield {
  display: none!important;
}

.form-10oz .wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 60px auto 0;
}
.form-10oz img {
  max-width: 290px;
  max-height: 290px;
  margin: auto 0 60px 30px;
}

/* CTA */
.smiles-bg {
  background-image: url(../images/cetacaine2025/bg-smiles.png);
}
#popup-form-10oz-cta {
  position: absolute;
  top: 70px;
  right: 10px;
  z-index: 2;
  /* opacity: 0.95; */
}
.popup-form-10oz-cta-inner {
  position: relative;
  background-color: var(--color-yellow);
  width: 360px;
  padding: 30px;
  text-align: center;
  border-radius: 50px;
  box-sizing: content-box;
}
.popup-form-10oz-cta-inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 0;
  height: 0;
  border: 41px solid transparent;
  border-top-color: var(--color-yellow);
  border-bottom: 25px;
  margin-bottom: -40px;
}
.popup-form-10oz-cta-inner h2 {
  font-size: 38px;
  font-weight: normal;
  color: var(--color-purple);
}
.popup-form-10oz-cta-inner h2 big {
  width: 100%;
  display: inline-block;
}
.popup-form-10oz-cta-inner a {
  padding: 8px 40px 12px;
  font-size: 38px;
  font-weight: bold;
  color: #fff;
  background-color: var(--color-pink);
  text-decoration: none;
}
.popup-form-10oz-cta-inner a:hover {
  color: lightyellow;
  background-color: var(--color-purple);
}
#popup-form-10oz-cta img {
  position: relative;
  top: 45px;
  width: 240px;
}

/* FORM2 */
#webform-ajax-wrapper-285 {
  position: relative;
  width: 100%;
/*  margin-left: -100px;*/
  padding: 30px;
  background-color: var(--color-yellow);
  border: 2px solid var(--color-orange);
  border-radius: 60px;
  font-weight: 300;
}
.webform-component--intro-text h2 {
  font-size: 24px;
  color: var(--color-pink);
  text-align: center;
}
#webform-client-form-285 .form-actions {
  width: 35%;
  clear: both;
  text-align: end;
}
#webform-client-form-285 .webform-component--fieldset-left {
  width: 35%;
  float: left;
  float: inline-start;
}
#webform-client-form-285 .webform-component--message {
  width: 60%;
  float: right;
  float: inline-end;
  text-align: center;
  margin-top: 18px;
}

#webform-client-form-285 input,
#webform-client-form-285 textarea {
  width: 100%;
  margin-bottom: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
}
#webform-client-form-285 textarea {
  padding: 20px 15px;
  /* border-radius: 0px; */
}
#webform-client-form-285 .field-checkboxes {width: 200%;}
#webform-client-form-285 input[type="checkbox"] {
  width: 16px;
  height: 17px;
  -webkit-appearance: checkbox;
}

#webform-client-form-285 .form-submit {
  width: auto;
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 30px;
  color: #e1ffff;
  background-color: var(--color-pink);
  border-radius: 3px;
}
#webform-client-form-285 .form-submit:hover {
  color: #fff;
  background-color: var(--color-purple)
  /* #484E90; */
}
#webform-client-form-285 label {display: inline-flex;}
#webform-client-form-285 .form-checkboxes label {font-weight: 300;}
#webform-client-form-285 label a:hover {color: #484E90;}
#webform-client-form-285 .webform-component--message label,
#webform-client-form-285 .webform-component--message .description {
/*  font-size: 16px; */
/*  font-weight: 100; */
  color: var(--color-purple);
}

#webform-ajax-wrapper-285::after {
  content: '';
  position: absolute;
  top: 25%;
  right: 0;
  width: 0;
  height: 0;
  border: 70px solid transparent;
  /* border-left-color: var(--color-yellow); */
  border-top-color: var(--color-yellow);
  border-right: 25px;
  margin-right: -47px;
  transform: rotate(323deg);
}

#webform-ajax-wrapper-285 {
    background-image: url(/sites/all/themes/cetylite/images/cetacaine2025/chairside-kit-720.png);
    background-size: cover;
    /* background-size: contain; */
    background-size: 360px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

#webform-ajax-wrapper-285:has(.webform-confirmation) {
  background-image: none;
}


#webform-ajax-wrapper-285 .messages.error {
  padding: 10px;
  border-radius: 10px;
  color: var(--color-purple);
  background-color: var(--color-pink);
}

@media screen and (min-width: 1800px) {
  #popup-form-10oz-cta {right: 110px;}
}

@media screen and (max-width: 1560px) {
  .hero-content {text-align: left;}
  .hero-content .hero-video,
  .hero-content .video-descr {
    margin:0;
  }
}

@media screen and (max-width: 1260px) {
  .popup-form-10oz-cta-inner {max-width: 330px;}
  #webform-ajax-wrapper-285 {
    margin-left: inherit;
  }
  .form-10oz img {
    max-width: 250px;
    max-height: 250px;
    margin: auto 0 60px 25px;
  }
}

@media screen and (max-width: 1180px) {
  .hero-content {
    padding-bottom: 0;
    text-align: center;
  }
  .hero-content .hero-video,
  .hero-content .video-descr {
    margin: 0 auto 15px;
  }
  #popup-form-10oz-cta {
    position: static;
    text-align: center;
  }
  .popup-form-10oz-cta {margin: 10px;}
  .popup-form-10oz-cta-inner {
    position: relative;
    top: 0;
    width: 100%;
    margin: 0 auto;
  }
  #popup-form-10oz-cta img {display: none;}
}

@media screen and (max-width: 1023px) {
  .popup-form-10oz-cta-inner {top: 30px;}
  #webform-ajax-wrapper-285 {position: static;}
  .form-10oz img,
  #webform-ajax-wrapper-285::after {display: none; border-color: transparent;}
}

@media screen and (max-width: 767px) {
  .popup-form-10oz-cta-inner {top: 20px;}
  .popup-form-10oz-cta-inner::after {margin-bottom: -30px;}
}

@media screen and (max-width: 640px) {
  .webform-component--intro-text h2 {font-size: 20px;}
  #webform-ajax-wrapper-285 {background-image: none;}
}
@media screen and (max-width: 639px) {
  #webform-ajax-wrapper-285 {padding: 20px;}
  #webform-client-form-285 .webform-component--message,
  #webform-client-form-285 .webform-component--fieldset-left {
    width: 100%;
    float: none;
  }
  #webform-client-form-285 label {display: inline;}
  #webform-client-form-285 .field-checkboxes {width: 100%;}
}
@media screen and (max-width: 419px) {
  .popup-form-10oz-cta-inner {
    width: auto;
    max-width: 100%;
    margin: 0 10px;
    box-sizing: border-box;
  }
  .popup-form-10oz-cta-inner h2 {font-size: 30px;}
  #webform-ajax-wrapper-285 {padding: 10px;}
  #webform-client-form-285 .form-actions {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 349px) {
  .popup-form-10oz-cta-inner h2,
  .popup-form-10oz-cta-inner a {font-size: 27px;}
}