:root {--color-main: #0d6efd;--gradiente-main: linear-gradient(#1c1c1c 0%, #000 100%);--gradiente-card: linear-gradient(-35deg, #000 0, #1c1c1c 100%);--font-main: 'Montserrat', Arial, sans-serif;--font-secondary: 'Montserrat', Arial, sans-serif;--font-nav: 'Montserrat', Arial, sans-serif;--font-quote: 'Roboto', sans-serif}
html, body {padding: 0;margin: 0;font-family: var(--font-main);font-size: 16px;color: #fff;background-color: black;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
h1 {color: #fff;font-weight: 600;font-size: 28px;line-height: 1.2;text-align: center;letter-spacing: -.015em;width: 90%;margin: 20px auto 40px auto}
h1 span {display: block}
@media (min-width: 768px) {
  h1 span {display: inline}
}
@media (min-width: 1024px) {
  h1 {font-size: 43px}
}
h2 {margin: 25px auto;max-width: 480px;letter-spacing: -.015em;font-family: var(--font-main);font-size: 28px;line-height: 1.2;font-weight: 600;width: 85%}
@media (min-width: 1024px) {
  h2 {font-size: 39px;margin-bottom: 20px}
}
@media (min-width: 1280px) {
  h2 {font-size: 43px;margin: 0 0 30px 0}
}
h3 {margin: 0;font-family: var(--font-main);font-size: 24px;font-weight: 500;letter-spacing: -.015em}
@media (min-width: 1680px) {
  h3 {font-size: 30px}
}
a {color: #fff;text-decoration: none}
li {list-style: none}
p {font-size: 17px;line-height: 1.45}
@media (min-width: 1024px) {
  p {font-size: 20px;line-height: 1.35}
}
.logo {display: block;width: fit-content;height: 55px;width: 60px;margin: 10px 0 0 0}
@media (min-width: 1024px) {
  .logo {height: 70px;width: 75px;margin: 0}
}
.logo a {display: block;transition: .35s}
.logo a:hover {opacity: .5}
.logo a img {display: block;outline: none;width: 100%}
.--boxed {width: 90%;max-width: 1500px;margin: auto}
.btn--donate {display: block;width: 160px;border-radius: 5px;padding: 14px 20px;text-align: center;background-color: var(--color-main);font-family: var(--font-nav);font-size: 18px;font-weight: 500;transition: .35s;box-sizing: border-box;letter-spacing: -.015em}
@media (min-width: 1024px) {
  .btn--donate {font-size: 17px}
}
.btn--donate:hover {background-color: white;color: var(--color-main)}
.btn--donate-outline {background-color: transparent;border: 1px solid #fff;width: 200px;letter-spacing: -.015em}
.btn--donate-outline:hover {background-color: var(--color-main);color: white;border: 1px solid var(--color-main)}
.header {width: 100%;position: absolute;top: 0;z-index: 999;padding-top: 10px}
.header__container {display: flex;justify-content: space-between;align-items: center}
.header__logo {align-items: flex-start;flex-basis: 30%}
@media (min-width: 1280px) {
  .header__logo {flex-basis: 40%}
}
@media (min-width: 1680px) {
  .header__logo {flex-basis: 45%}
}
.header__nav {align-items: flex-start;flex-basis: 55%}
@media (min-width: 1280px) {
  .header__nav {flex-basis: 45%}
}
@media (min-width: 1680px) {
  .header__nav {flex-basis: 40%}
}
.header__cta {display: none;justify-content: flex-end;align-items: flex-start;flex-basis: 13%;margin-left: 2%}
@media (min-width: 1024px) {
  .header__cta {flex-basis: 15%;display: flex}
}
@media (min-width: 1280px) {
  .header__cta {flex-basis: 15%}
}
.footer {width: 100%;background-color: black;padding: 60px 0}
.footer__logo {flex-basis: 40%;align-items: flex-start}
.footer__nav {display: flex;margin: 40px 0 60px 0;order: 2}
@media (min-width: 1024px) {
  .footer__nav {display: flex;justify-content: space-between;flex-basis: 45%;margin: 4px 0 0 0;order: unset}
}
.footer__nav ul {margin: 0;padding: 0;flex-basis: 32%;min-width: 100px}
.footer__nav ul:nth-child(2) {margin: 0 10px}
@media (min-width: 1024px) {
  .footer__nav ul:nth-child(2) {margin: 0 0 0 0;min-width: unset}
}
.footer__nav ul li {margin: 0;padding: 0;text-align: center}
@media (min-width: 1024px) {
  .footer__nav ul li {text-align: left}
}
.footer__nav ul li a {font-size: 15px;font-weight: 500;display: block;padding: 10px 0;transition: .35s}
@media (min-width: 1024px) {
  .footer__nav ul li a {font-size: 17px}
}
.footer__nav ul li a:hover {color: var(--color-main)}
.footer__cta {flex-basis: 15%;display: flex;justify-content: flex-end;align-items: flex-start;margin: 40px 0 0 0}
@media (min-width: 1024px) {
  .footer__cta {margin: 0}
}
.footer__container {display: flex;justify-content: center;flex-direction: column;align-items: center}
@media (min-width: 1024px) {
  .footer__container {justify-content: space-between;flex-direction: row;align-items: flex-start}
}
@media (min-width: 1024px) {
  .copyright {padding-top: 20px;display: flex;justify-content: space-between;flex-basis: 35%}
}
.copyright p {padding: 20px 0;font-family: var(--font-main);font-size: 13px;line-height: 1.5;font-weight: 500;text-align: center}
@media (min-width: 1024px) {
  .copyright p {padding: 0;text-align: left}
}
.copyright p a {text-decoration: underline;transition: .35s;display: block}
@media (min-width: 1024px) {
  .copyright p a {display: inline}
}
.copyright p a:hover {color: var(--color-main)}
.follow {display: flex;justify-content: center;align-items: flex-start}
@media (min-width: 1024px) {
  .follow {justify-content: flex-end}
}
.follow a {display: flex;flex-direction: column;justify-content: center;width: 36px;height: 36px;font-size: 32px !important;text-align: center;text-decoration: none;margin: 0 10px;border-radius: 99px;transition: .35s}
@media (min-width: 1024px) {
  .follow a {margin-left: 24px}
}
.follow a i {font-size: 32px;transition: .35s}
.follow a:hover {transition: .35s}
.follow a:hover i {font-size: 32px;color: #fff !important}
.follow--facebook i {color: #4267b2}
.follow--twitter i {color: #1da1f2}
.follow--instagram i {color: #a12750}
.follow--youtube i {color: #f00}
.nav {display: none}
@media (min-width: 1024px) {
  .nav {display: flex;justify-content: space-between;align-items: flex-start}
}
.nav ul {display: flex;justify-content: space-between;align-items: center;width: 100%;margin: 0;padding: 0}
.nav ul li {display: block}
.nav ul li a {text-decoration: none;color: #fff;font-family: var(--font-nav);font-size: 17px;font-weight: 500;transition: .35s}
.nav ul li a:hover {color: var(--color-main)}
.nav-container {position: fixed;top: 0;left: -100%;width: 100%;height: 100vh;z-index: 8998;background-color: var(--color-main);background-color: #000;background: var(--gradiente-main);display: block;pointer-events: unset}
@media (min-width: 1024px) {
  .nav-container {display: none;pointer-events: none}
}
.menu {padding: 20vh 0 5vh;--offset: 20vw;--move-initial: calc(-25% + var(--offset));--move-final: calc(-50% + var(--offset));font-size: 7vw;display: block;pointer-events: unset}
@media (min-width: 1024px) {
  .menu {display: none;pointer-events: none}
}
.menu .menu__item {position: relative;text-align: center;white-space: nowrap;margin: 5px 0;padding: 7px 1vw;font-size: 7vw;line-height: 1.15}
.menu .menu__item-link {display: inline-block;cursor: pointer;position: relative;transition: opacity 0.4s;color: #fff}
.menu .menu__item-link:hover {transition-duration: 0.1s;opacity: 0}
.menu .menu__item-link::before {all: initial;counter-increment: menu;position: absolute;bottom: 60%;left: 0;pointer-events: none}
.menu-open, .menu-close {position: absolute;top: 0;right: 0;padding: 40px 30px 20px 30px;font-size: 13px;font-weight: 600;letter-spacing: .03em;text-transform: uppercase;color: #fff;z-index: 8997;cursor: pointer;-webkit-tap-highlight-color: transparent;display: block;pointer-events: unset}
@media (min-width: 1024px) {
  .menu-open, .menu-close {display: none;pointer-events: none}
}
.menu-open svg {width: 22px}
.menu-close {z-index: 8999;padding: 38px 32px 22px 28px}
.menu-close svg {width: 18px}
.socials {margin: 40px auto;text-align: center}
.socials a {margin: auto}
.film {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;min-height: 520px;height: 91.5vh;overflow: hidden;object-fit: cover}
@media (min-width: 1024px) {
  .film {min-height: 650px;aspect-ratio: 16/9;background-size: cover}
}
@media (min-width: 1280px) {
  .film {min-height: 900px;height: 100vh}
}
.film__trigger {position: relative;z-index: 10;text-align: center;transition: .35s;cursor: pointer;transform: translateY(-25%);-webkit-tap-highlight-color: transparent}
@media (min-width: 1024px) {
  .film__trigger {transform: translateY(0%)}
}
.film__trigger img {opacity: .5;transition: .35s;max-width: 72px}
@media (min-width: 1024px) {
  .film__trigger img {max-width: 96px}
}
.film__trigger p {margin: 10px 0 0 0;font-weight: 500;font-size: 19px}
@media (min-width: 1024px) {
  .film__trigger p {font-size: 21px}
}
.film__trigger:hover img {opacity: 1;transition: .35s}
.film > video {position: absolute;top: 50%;left: 50%;z-index: 1;object-fit: cover;transform: translateX(-50%) translateY(-50%);height: 100%;width: 100%}
.share {display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 91.5vh;background: var(--gradiente-main);padding: 10vh 0 10vh 0;box-sizing: border-box}
@media (min-width: 1024px) {
  .share {min-height: 100vh;padding: 15vh 0 15vh 0}
}
.share__container {width: 90%;margin: auto}
.share__container > h1 {margin-bottom: 25px}
.share__container > p {text-align: center;font-weight: 400;margin: 0 auto 60px auto;max-width: 740px;opacity: .95}
@media (min-width: 1024px) {
  .share__container {text-align: right;margin: 0 0 60px}
}
.share__card, .share__links {width: 100%;max-width: 630px;margin: 0 auto}
.share__card .card {display: flex;flex-direction: column;justify-content: space-between;margin: auto;border-radius: 16px;border: 2px solid rgba(255, 255, 255, 0.275);background: var(--gradiente-card);transition: .35s;height: 290px}
@media (min-width: 1024px) {
  .share__card .card {border-radius: 24px;height: 350px}
}
.share__card .card:hover {border: 2px solid rgba(255, 255, 255, 0.75)}
.share__card .card:hover .card__footer {border-top: 2px solid rgba(255, 255, 255, 0.75)}
.share__card .card__quote {padding: 32px 24px}
@media (min-width: 1024px) {
  .share__card .card__quote {padding: 48px 32px}
}
.share__card .card__quote p {font-family: var(--font-quote);font-weight: 400;font-style: italic;font-size: 21px;line-height: 1.35;color: #a0a1a1;text-align: left;margin: 0 auto}
@media (min-width: 1024px) {
  .share__card .card__quote p {font-size: 30px}
}
.share__card .card__quote p span {color: #fff}
.share__card .card__footer {text-align: left;border-top: 2px solid rgba(255, 255, 255, 0.275);transition: .35s;padding: 8px 24px}
@media (min-width: 1024px) {
  .share__card .card__footer {padding: 15px 32px}
}
.share__card .card .refresh {outline: none;height: 40px;font-family: var(--font-main);font-size: 18px;font-weight: 600;line-height: 40px;text-align: left;cursor: pointer;border: none;display: flex;justify-content: flex-start;align-items: center;transition: .35s}
@media (min-width: 1024px) {
  .share__card .card .refresh {font-size: 19px}
}
.share__card .card .refresh i {font-size: 30px;margin-right: 15px;transition: .35s;color: white}
.share__card .card .refresh:hover {color: #fff}
.share__card .card .refresh:hover i {color: var(--color-main);transform: rotate(270deg)}
.share__links {display: flex;justify-content: flex-end;padding: 16px 0}
.share__links > div, .share__links a {display: flex;flex-direction: column;justify-content: center;width: 36px;height: 36px;font-size: 24px !important;color: #000;text-align: center;text-decoration: none;margin-left: 16px;border-radius: 99px;background-color: #fff;transition: .35s;cursor: pointer}
.share__links > div i, .share__links a i {font-size: 24px;transition: .35s}
.share__links > div:hover, .share__links a:hover {background-color: var(--color-main);transition: .35s}
.share__links > div:hover i, .share__links a:hover i {font-size: 24px;color: #fff}
.donate {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;background: url("/themes/custom/droopler_subtheme/frontpage/images/donate.jpg") no-repeat 35% -90px;background-size: 200%;min-height: 600px;height: 100vh}
@media (min-width: 1025px) {
  .donate {background: url("/themes/custom/droopler_subtheme/frontpage/images/donate.jpg") no-repeat center center;background-size: cover;min-height: 800px;overflow: hidden;width: 100%;height: 100vh}
}
.donate__container {display: flex;flex-direction: row;justify-content: flex-end;align-items: center;width: 100%;height: 100%}
.donate__text {width: 100%;margin-right: 0;margin-bottom: 0;margin-top: 0;padding: 0 16px;text-align: center;box-sizing: border-box}
@media (min-width: 1024px) {
  .donate__text {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-end;text-align: right;width: 50%;margin-right: 8%;margin-bottom: 0;margin-top: 22%}
}
@media (min-width: 1025px) {
  .donate__text {margin-right: 15%;margin-top: 30%}
}
@media (min-width: 1280px) {
  .donate__text {margin-right: 16%;margin-top: 22%}
}
@media (min-width: 1366px) {
  .donate__text {margin-right: 17.5%;margin-top: 19%}
}
@media (min-width: 1400px) {
  .donate__text {margin-right: 18%}
}
@media (min-width: 1700px) {
  .donate__text {margin-right: 19.5%}
}
.donate__text p {margin: 0 auto 75px auto;font-weight: 400;max-width: 480px;width: 95%;opacity: .95}
@media (min-width: 1280px) {
  .donate__text p {margin: 0 0 75px 0;max-width: 360px}
}
.donate__text a {font-family: var(--font-main) !important;margin: auto}
@media (min-width: 1024px) {
  .donate__text a {margin: 0}
}
.sponsors {color: #171717; background-color: #FFF;padding: 60px 0;text-align: center;min-height: 91.5vh;display: flex;flex-direction: column;justify-content: center;align-items: center;box-sizing: border-box}
@media (min-width: 768px) {
  .sponsors {padding: 120px 0;min-height: fit-content;display: block}
}
.sponsors a {
  color: #171717;
}
.sponsors__logos {display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;padding: 90px 0}
.sponsors__logos a {display: flex;flex-basis: 33%;justify-content: center;outline: none;transition: .35s;transform: scale(0.6)}
@media (min-width: 1024px) {
  .sponsors__logos a {transform: scale(1);display: block;flex-basis: auto}
}
.sponsors__logos a img {display: block}
.sponsors__logos a:hover {opacity: .5}
.sponsors__link {font-family: var(--font-secondary);font-size: 15px;font-weight: 500;transition: .35s;opacity: .5}
.sponsors__link:hover {color: var(--color-main);opacity: 1}
@media (min-width: 1024px) {
  .sponsors__link {font-size: 17px}
}
.videomodal {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;width: 100vw;background-color: rgba(0, 0, 0, 0.9);position: fixed;top: 0;left: 0;z-index: 9999;transform: translateY(-100%);transition: all 0.8s cubic-bezier(0.79, 0.01, 0.08, 1);box-sizing: border-box}
.videomodal .videomodal__wrapper {width: 100%;height: 100%;display: flex;justify-content: center;flex-direction: column;align-items: center;box-sizing: border-box;height: auto;transform: translateY(-25%)}
@media (min-width: 1024px) {
  .videomodal .videomodal__wrapper {max-width: 960px;transform: translateY(0)}
}
@media (min-width: 1280px) {
  .videomodal .videomodal__wrapper {max-width: 1080px}
}
@media (min-width: 1440px) {
  .videomodal .videomodal__wrapper {max-width: 1200px}
}
@media (min-width: 1680px) {
  .videomodal .videomodal__wrapper {max-width: 1440px}
}
.videomodal .videomodal__container {width: 100%;height: 100%;height: 0;box-sizing: border-box;padding-bottom: 56.25%;padding-top: 0;position: relative;overflow: hidden;transition: opacity .5s;transition-delay: .75s}
@media (min-width: 1280px) {
  .videomodal .videomodal__container {height: 100%;padding: 56.66% 0 0 0}
}
.videomodal .videomodal__container iframe {position: absolute;left: 0;top: 0;width: 100%;height: 100%}
.videomodal .videomodal__close {display: flex;justify-content: center;align-items: center;box-sizing: border-box;position: fixed;left: auto;top: 20px;right: 20px;z-index: 9999;width: 48px;height: 48px;text-decoration: none;font-size: 14px;font-weight: 700;background: #333;border-radius: 99px;transition: .35s;cursor: pointer}
.videomodal .videomodal__close:hover {background-color: var(--color-main)}
.videomodal .videomodal__close svg {width: 16px;fill: #fff;margin: 0}