@charset "UTF-8";
/*
Theme Name: Ace of Space
Text Domain: palermo
*/
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Young+Serif&display=swap");
.image-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.image-background img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 
Responsive between
Ej: @include responsiveB('mobile-v', 'mobile-h'){
*/
/*
tr( duracion, propiedades, delay)
*/
/*
tre( duracion, propiedades, delay)
a diferencia de tr(), tre tiene un easign aplicado que hace la animacion mas natural
*/
/*
fade( x, y, defaulttransition, delay );
Añade transformacion x e y, y opacity 0 al elemento.
Se pueden pasar valores negativos, por ejemplo, para desplazar x hacia la izquierda
Tambien se puede pasar un porcentaje
defaulttransition aplica la variable $transition-default definida en _variables.scss
delay aplica un delay multiplicando el valor por $transition-default-delay para hacer aparecer los elementos de forma escalonada
*/
.in {
  --fade-opacity: 1;
  --fade-transform: translateX(0px) translateY(0px);
  --p100: 100%;
  --p0: 0%;
  --v1: 1;
  --v0: 0;
}

/*
fadein();
Aplica transformX(0px), transformY(0px) y opacity 1 para hacer aparecer el objecto
*/
/*
Se usa igual que fade, pero crea un loop para animar los elementos de forma ordenada
*/
/*
Use:
@if editor() {
  font-size: 90px;
}
*/
/* Text Block Custom Style */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: -webkit-fill-available;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
}
body img {
  max-width: 100%;
  height: auto;
}
body ul li {
  list-style: none;
}
body p:not(:last-child) {
  margin-bottom: 20px;
}
body:not(.home) {
  background: #f7f3ef;
}

.hidden {
  display: none;
}

input[type=text],
input[type=email],
textarea,
button {
  font-family: "Familjen Grotesk", sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
}

button {
  background-color: transparent;
}

select {
  font-family: "Familjen Grotesk", sans-serif;
}

h1,
.h1,
.h1 p {
  font-family: "Young Serif", serif;
  font-size: clamp(70px, 43.6px + 0.044 * 100vw, 90px);
}

h2,
.h2,
.h2 p {
  font-family: "Young Serif", serif;
  font-size: clamp(40px, -0.2px + 0.067 * 100vw, 70px);
}

h3,
.h3,
.h3 p {
  font-family: "Young Serif", serif;
  font-size: clamp(28px, 17.2px + 0.018 * 100vw, 36px);
}

h4,
.h4,
.h4 p {
  font-family: "Young Serif", serif;
  font-size: clamp(24px, 24px + 0 * 100vw, 24px);
}

h5,
.h5,
.h5 p {
  font-family: "Young Serif", serif;
  font-size: clamp(16px, 13.6px + 0.004 * 100vw, 18px);
}

h6,
.h6,
.h6 p {
  font-family: "Young Serif", serif;
  font-size: clamp(16px, 16px + 0 * 100vw, 16px);
}

a {
  color: #cb3b0c;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

b,
strong,
strong * {
  font-weight: 600;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
  width: 100%;
}
@media only screen and (max-width: 1050px) {
  .container {
    padding: 0 20px;
  }
}
.container .container {
  max-width: 100%;
  padding: 0;
  margin: auto;
}

.centerDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.iframe-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.site-content > *:not(.default_block) {
  margin-bottom: var(--blockMargin, 150px);
}
@media only screen and (max-width: 1050px) {
  .site-content > *:not(.default_block) {
    margin-bottom: var(--blockMarginTablet, 80px);
  }
}
@media only screen and (max-width: 750px) {
  .site-content > *:not(.default_block) {
    margin-bottom: var(--blockMarginMobile, 60px);
  }
}

@media only screen and (max-width: 900px) {
  .desktop {
    display: none !important;
  }
}

@media only screen and (min-width: 900px) {
  .mobile {
    display: none !important;
  }
}

.resizing * {
  -webkit-transition: none !important;
  transition: none !important;
}

body {
  padding-top: 0 !important;
  font-family: "Familjen Grotesk", sans-serif;
  background: none !important;
}
body .popup-handle,
body .mobile_popup_text {
  display: none;
}
body .en__component--column {
  min-width: unset;
}

.wrapper .header,
.wrapper .en__component--column--1,
.wrapper #footer,
.wrapper .form_title,
.wrapper .popup-btn,
.wrapper .en__component--copyblock.title {
  display: none;
}
.wrapper .en__component--column--2 {
  background: #ddd0bd;
  overflow: hidden;
  padding: 0 20px 20px;
  color: #000;
}
.wrapper #main-content ul.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -20px 15px;
  background: #ffffff;
  padding: 5px 10px;
}
.wrapper #main-content ul.menu li {
  width: 100%;
}
.wrapper #main-content ul.menu li:nth-child(1) a:before {
  background: url(../images/icons/tab1.svg) no-repeat center;
}
.wrapper #main-content ul.menu li:nth-child(2) a:before {
  background: url(../images/icons/tab2.svg) no-repeat center;
}
.wrapper #main-content ul.menu li:nth-child(3) a:before {
  background: url(../images/icons/tab3.svg) no-repeat center;
}
.wrapper #main-content ul.menu a {
  background: transparent;
  padding: 7px 10px;
  display: block;
  color: #000;
  font-size: 12px;
  font-family: "Familjen Grotesk", sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  border-radius: 5px;
}
.wrapper #main-content ul.menu a:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 2px;
  background-size: contain !important;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.wrapper #main-content ul.menu a b {
  display: none;
}
.wrapper #main-content ul.menu .active-menu {
  background: #ddd0bd;
}
.wrapper #main-content ul.menu .active-menu:before {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.wrapper .en__field--recurrpay > .en__field__label {
  display: none;
}
.wrapper .en__field__element--checkbox .en__field__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
}
.wrapper .en__field__element--checkbox .en__field__item strong {
  display: block;
  font-size: 16px;
}
.wrapper .en__field__element--checkbox input {
  width: 18px;
  height: 18px;
  border: 2px solid #000;
  border-radius: 4px;
  margin-top: 3px;
}
.wrapper .en__field__element--checkbox a {
  color: #000;
  text-decoration: underline;
}
.wrapper .en__field--radio > .en__field__label {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 7px;
  padding-top: 0;
}
.wrapper .en__field__element--radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.wrapper .en__field__element--radio .en__field__item {
  width: calc(50% - 6px);
  height: 38px;
  background: #ddd0bd;
  border: 2px solid #000;
  border-radius: 20px;
  font-size: 14px;
  text-transform: uppercase;
  color: #000;
  font-weight: 900;
}
.wrapper .en__field__element--radio .en__field__item label {
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  cursor: pointer;
}
.wrapper .en__field__element--radio .en__field__item input {
  display: none;
}
.wrapper .en__field__element--radio .en__field__item:has(input:checked) {
  background: #000;
  color: #ffffff;
}
.wrapper .en__field__element--radio .en__field__item--other {
  background: #ffffff;
  color: #000;
  padding: 0;
  border-radius: 0;
}
.wrapper .en__field__element--radio .en__field__item--other input {
  display: block;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  padding: 0 15px;
  background: none;
  margin: 0;
  text-align: center;
  font-weight: 900;
  border-radius: 0;
}
.wrapper .en__submit button {
  display: block;
  height: 45px;
  background: #cb3b0c;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.wrapper .en__submit button:hover {
  background: #000;
}
.wrapper .en__field--country {
  display: none;
}
.wrapper .en__field--text label,
.wrapper .en__field--email label,
.wrapper .en__field--number label,
.wrapper .en__field--select label,
.wrapper .en__field--vgs label,
.wrapper .en__field--ccexpire label {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 900;
  padding: 0 0 7px;
  width: 100%;
}
.wrapper .en__field--text .en__field__element,
.wrapper .en__field--email .en__field__element,
.wrapper .en__field--number .en__field__element,
.wrapper .en__field--select .en__field__element,
.wrapper .en__field--vgs .en__field__element,
.wrapper .en__field--ccexpire .en__field__element {
  width: 100%;
}
.wrapper .en__field--text input,
.wrapper .en__field--email input,
.wrapper .en__field--number input,
.wrapper .en__field--select input,
.wrapper .en__field--vgs input,
.wrapper .en__field--ccexpire input {
  width: 100%;
}
.wrapper .en__field--text .en__field__input,
.wrapper .en__field--email .en__field__input,
.wrapper .en__field--number .en__field__input,
.wrapper .en__field--select .en__field__input,
.wrapper .en__field--vgs .en__field__input,
.wrapper .en__field--ccexpire .en__field__input {
  width: 100%;
}
.wrapper .en__component--formblock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 20px;
}
.wrapper .en__field__element--select select {
  width: 100%;
}
.wrapper .en__field__element--select .select-selected,
.wrapper .en__field__element--select .select-items {
  display: none;
}
.wrapper .en__field,
.wrapper .en__submit {
  width: 100%;
}
.wrapper .en__field--ccexpire,
.wrapper .en__field--vgs,
.wrapper .en__field--firstName,
.wrapper .en__field--lastName,
.wrapper .en__field--postcode,
.wrapper .en__field--phoneNumber2 {
  width: calc(50% - 10px);
}
.wrapper .en__field--ccnumber {
  width: 100%;
}
.wrapper .en__component--copyblock p {
  margin-bottom: 15px;
}
.wrapper .en__component--copyblock h1 + p {
  font-size: 20px;
  font-weight: 900;
}
.wrapper .en__field__element--checkbox .en__field__item {
  padding: 0;
}
.wrapper .en__field__element--checkbox .en__field__label--item {
  font-size: 14px;
  font-weight: 400;
}
.wrapper .en__field__error {
  color: #fc3848;
  font-weight: 500;
  font-size: 13px;
  padding-bottom: 5px;
}
.wrapper a.back_btn {
  color: #000;
  display: block;
  font-weight: 700;
  font-family: "Familjen Grotesk", sans-serif;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 10px;
  text-align: center;
}
.wrapper .back-btn {
  display: none !important;
}

::-webkit-scrollbar {
  background: #dddddd;
  width: 5px;
  -webkit-box-shadow: 1px 0 #000;
          box-shadow: 1px 0 #000;
  border-left: 2px solid #000;
}

::-webkit-scrollbar-thumb {
  background: #ddd0bd;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-left: 2px solid #000;
}

::-webkit-scrollbar-thumb:hover {
  background: #cb3b0c;
}

::-webkit-scrollbar-thumb:active {
  background-color: #000;
}

.en__field__item:has(#transaction_donationAmt4) {
  width: 100% !important;
}
.en__field__item:has(#transaction_donationAmt4:checked) {
  width: calc(50% - 6px) !important;
}

.en__errorHeader {
  padding: 10px 20px 0;
  font-weight: bold;
}

.en__errorList {
  padding: 0 20px 10px;
  font-weight: bold;
  font-size: 14px;
  color: #cb3b0c;
}