/*--------------------------------------------------------------
 Typography
--------------------------------------------- */
:root {
     --tfnt-body: "Titillium Web", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     --tfnt-head: "Orbitron", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

body,
button,
input,
select,
optgroup,
textarea {
     font-family: var(--tfnt-body);
     color: #FFF;
     text-align: center;
     font-size: 16px;
     font-style: normal;
     font-weight: normal;
     line-height: 170%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     clear: both;
     font-family: var(--tfnt-head);
     font-style: normal;
     font-weight: 500;
}

h1 {
     text-align: center;
     font-size: 34px;
     line-height: 100%;
     /* 34px */
}

h2 {
     font-size: 26px;
     line-height: 120%;
     /* 31.2px */
}

h2.loud {
     font-size: 30px;
     font-weight: 700;
     /* 31.2px */
}

h3 {
     font-size: 22px;
     line-height: 100%;
     font-weight: 800;
}

h4 {
     font-size: 18px;
     line-height: 120%;
     /* 21.6px */
}

h5 {
     font-size: 14px;
     line-height: 100%;
}

h5 strong {
     font-weight: 800;
}

p {
     margin-bottom: 1.5em;
}

@media only screen and (min-width : 1024px) {
     h1 {
          font-size: 62px;
     }

     h2 {
          font-size: 28px;
          line-height: 120%;
     }

     h3 {
          font-size: 24px;
     }

     h4 {
          font-size: 22px;
     }
}

@media only screen and (min-width : 1400px) {
     h1 {
          font-size: 80px;
     }

     h2 {
          font-size: 30px;
          line-height: 120%;
     }

     h3 {
          font-size: 26px;
     }

     h4 {
          font-size: 22px;
     }
}

/*--------------------------------------------------------------
 Colors
--------------------------------------------- */
:root {
     --topps-education-black: #000000;
     /* Black */
     --topps-education-white: #ffffff;
     /* White */
     --black: var(--topps-education-black);
     --white: var(--topps-education-white);
     --blue-lite: #70f5e4;
     /* Light Blue */
     --blue-dark: #49c8b6;
     /* Dark Blue */
     --red: #ff5e5b;
     /* Red */
     --red-dark: #ca0501;
     /* Dark Red */
     --shimmer: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(148deg, #49C8B6 0.92%, #B9FFF6 54.38%, #70F5E4 98.46%);
     --blue-radial: radial-gradient(97.37% 94.29% at 50% 50%, rgba(112, 245, 228, 0.06) 24.04%, rgba(112, 245, 228, 0.19) 54.81%, rgba(112, 245, 228, 0.60) 100%);
     --red-radial: radial-gradient(97.37% 94.29% at 50% 50%, rgba(202, 5, 1, 0.18) 33.65%, rgba(202, 5, 1, 0.30) 60.58%, rgba(202, 5, 1, 0.60) 100%);
     --red-shimmer: linear-gradient(148deg, #CA0501 0.92%, #FF5E5B 49.22%, #CA0501 98.46%);
     --gray-dark: #7B7B7B;
}

.has-black-color,
.has-topps-education-black-color {
     color: var(--black) !important;
     border-color: var(--black);
}

.has-black-background-color,
.has-topps-education-black-background-color {
     background-color: var(--black) !important;
     border-color: var(--black) !important;
}

.has-white-color,
.has-topps-education-white-color {
     color: var(--white) !important;
     border-color: var(--white);
}

.has-white-background-color,
.has-topps-education-white-background-color {
     background-color: var(--white) !important;
     border-color: var(--white) !important;
}

/*--------------------------------------------------------------
  Elements
--------------------------------------------- */
body {
     background: #000;
}

hr {
     background-color: var(--blue-dark);
     border: 0;
     height: 1px;
     margin-bottom: 1.5em;
}

ul,
ol {
     margin: 0 0 1.5em 3em;
}

ul {
     list-style: disc;
}

ol {
     list-style: decimal;
}

li>ul,
li>ol {
     margin-bottom: 0;
     margin-left: 1.5em;
}

dt {
     font-weight: 700;
}

dd {
     margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
     max-width: 100%;
}

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

figure {
     margin: 1em 0;
}

table {
     margin: 0 0 1.5em;
     width: 100%;
}

.hide-desktop {
     display: unset;
}

.hide-mobile {
     display: none;
}

@media only screen and (min-width: 1024px) {
     .hide-desktop {
          display: none;
     }

     .hide-mobile {
          display: unset;
     }
}

/* Links
--------------------------------------------- */
a,
a:visited {
     text-decoration: none;
     background: var(--shimmer);
     background-clip: text;
     color: transparent;
     display: inline-block;
     font-weight: 700;
     box-shadow: none;
}

a:hover,
a:focus,
a:active {
     background: var(--red-shimmer);
     display: inline-block;
     color: transparent;
     background-clip: text;
}

a:focus {
     outline: thin dotted;
}

a:hover,
a:active {
     outline: 0;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation {
     display: block;
     position: fixed;
     top: 60px;
     right: -100%;
     width: 100vw;
     height: 100vh;
     transition: opacity 0.5s ease-in-out;
     z-index: 9998;
     padding: 40px 10px 0 10px;
     background: rgba(0, 0, 0, 0.70);
     backdrop-filter: blur(5px);
     opacity: 0;
     text-align: left;
}

.main-navigation.menu-open {
     right: 0;
     opacity: 1;
}

.main-navigation ul {
     list-style: none;
     margin: 0;
     padding-left: 0;
}

.main-navigation li {
     position: relative;
}

body:not(.logged-in) .main-navigation li.friend {
     display: none;
}

.logged-in .main-navigation li.stranger {
     display: none;
}

.main-navigation a,
.main-navigation a:visited {
     display: block;
     text-decoration: none;
     color: var(--gray-dark);
     font-size: 36px;
     font-style: normal;
     font-weight: 275;
     line-height: 100%;
     letter-spacing: 3.6px;
     text-transform: uppercase;
     padding: 30px;
}

.main-navigation a:hover {
     color: var(--blue-lite);
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
     margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
     display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
     flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
     text-align: end;
     flex: 1 0 50%;
}

@media only screen and (min-width : 1024px) {}

@media only screen and (min-width : 1400px) {
     .main-navigation {
          top: 144px;
          height: calc(100vh - 144px);
          max-width: 460px;
          transition: all 0.5s ease-in-out;
     }
}

/* Site Header
--------------------------------------------- */
.site-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999;
     height: 60px;
     transition: all 0.5s ease-in-out;
     background-color: rgba(0, 0, 0, 0);
}

.site-header.scrolled {
     background-color: rgba(0, 0, 0, 0.95);
     backdrop-filter: blur(5px);
     z-index: 1030;
}


.no-masthead-bg .site-header.scrolled {
     background-color: transparent;
     backdrop-filter: none;
}



body.user-registration-page.user-registration-account .site-header {
     background-color: rgba(0, 0, 0, 0.65);
     backdrop-filter: blur(5px);
     z-index: 1030;
}


.site-header-inner {
     width: 96%;
     margin: 0 auto;
     padding: 1rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.site-header-inner div {
     padding: 0px 0px 0px 0px;
     position: relative;
     z-index: 1001;
}

.site-header .menu-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 60px;
     transition: opacity 0.5s ease-in-out;
     z-index: 998;
     padding: 40px 10px 0 10px;
     background: rgba(0, 0, 0, 0.70);
     backdrop-filter: blur(5px);
     opacity: 0;
}

.site-header.menu-open .menu-background {
     opacity: 1;
     z-index: 1002;
}

.menu-toggle {
     position: relative;
     min-height: 36px;
     z-index: 1005 !important;
     width: 38px;
}

.menu-toggle-buttons {
     position: absolute;
     top: 0;
     right: 0;
     min-height: 36px;
     min-width: 36px;
     transition: all 0.65s ease-in-out;
}

.menu-toggle-buttons .menu-button {
     position: absolute;
     top: 0;
     right: 0;
     display: block;
     opacity: 0;
     transition: all 0.25s ease-in-out;
     cursor: pointer;
}

.menu-toggle-buttons .menu-button:hover svg>path,
.menu-toggle-buttons .menu-button:hover svg>rect {
     fill: #70F5E4;
}

.menu-toggle-buttons .menu-button.visible {
     opacity: 1;
     z-index: 1005;
}

#menu-toggle-buttons-desktop {
     display: none;
}

.site-branding-f1 img {
     max-width: 38px;
     width: 37.373px;
     height: auto
}

.site-branding-grail img {
     width: 181.92px;
     max-width: 181.92px;
     height: auto;
}

.background-gradient {
     background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 49.52%, #000 100%);
}

@media only screen and (min-width : 1024px) {
     .site-header {
          height: 144px;
     }

     .site-header .menu-background {
          height: 144px;
     }

     .site-header-inner {
          padding: 44px 0;
     }

     .site-header-inner .site-branding-f1 {
          padding-top: 20px;
     }

     .site-branding-f1 img {
          width: 80px;
          height: auto;
          max-width: 80px;
     }

     .site-branding-grail img {
          display: flex;
          width: 379px;
          height: auto;
          max-width: 380px;
     }

     .menu-toggle {
          width: 80px;
          transform: translateY(-2px)
     }

     #menu-toggle-buttons-desktop {
          display: block;
     }

     #menu-toggle-buttons-mobile {
          display: none;
     }

     .menu-toggle-buttons {
          top: 14px;
     }
}

@media only screen and (min-width : 1400px) {
     .menu-toggle.menu-open .menu-toggle-buttons {
          transform: translateX(-330px);
          transition-delay: 0.05s;
     }
}

/* Site Footer
--------------------------------------------- */
.site-footer-inner {
     color: var(--gray-dark);
     text-align: center;
     font-size: 10px;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
     padding-bottom: 60px;
     /* 15px */
}

/* Posts and pages
--------------------------------------------- */
.site-content {
     margin: 0 0 0 0;
}

.sticky {
     display: block;
}

.post,
.page {
     margin: 0 0 1.5em;
}

.updated:not(.published) {
     display: none;
}

.entry-header {
     display: none;
}

.page-content,
.entry-content,
.entry-summary {
     margin: 0;
}

.page-links {
     clear: both;
     margin: 0 0 1.5em;
}

.entry-content .text-blue {
     background: var(--shimmer, linear-gradient(148deg, #49C8B6 0.92%, #B9FFF6 54.38%, #70F5E4 98.46%)) !important;
     background-clip: text !important;
     color: transparent !important;
}

.entry-content>.has-video-background {
     min-height: 120vh;
     padding: 0;
}

.entry-content>.has-video-background>.wp-block-cover__inner-container {
     padding-top: 80px !important
}

@media only screen and (min-width : 1024px) {
     .entry-content>.has-video-background>.wp-block-cover__inner-container {
          padding-top: 120px !important;
     }

     .page-template-page-dark-future.user-registration-page .entry-content>.has-video-background>.wp-block-cover__inner-container {
          padding-top: 60px !important;
     }
}

/* Form Pages */
@media only screen and (min-width : 24px) {
     .play-box {
          border-radius: 30px;
          box-shadow: 0 0 58px -20px rgba(177, 177, 177, 0.30);
          width: 90%;
          max-width: 468px;
          margin: 0 auto;
          position: relative;
          z-index: 20;
          border: 1px solid var(--blue-lite);
     }

     .play-box .wp-block-group__inner-container {
          align-items: center;
          position: relative;
     }

     .play-box .wp-block-group__inner-container>* {
          margin: 0 0 4px 0;
          padding: 10px 20px;
          background-color: rgba(0, 0, 0, 0.40);
          backdrop-filter: blur(4px);
          position: relative;
          z-index: 20;
     }

     .play-box .wp-block-group__inner-container>h2 {
          background: linear-gradient(0deg, rgba(112, 245, 228, 0.30) 0%, rgba(112, 245, 228, 0.00) 80%, rgba(112, 245, 228, 0.00) 100%);
          margin: 0;
          padding: 50px 20px 10px;
          border-radius: 30px 30px 0 0;
     }

     .play-box .wp-block-group__inner-container>.circ-container {
          position: absolute !important;
          bottom: -130px;
          left: calc(50% - 130px);
          width: 260px;
          height: 260px;
          z-index: 15;
          background-color: transparent;
          padding: 0;
          backdrop-filter: none;
     }

     .play-box .wp-block-group__inner-container>#user-registration.user-registration {
          margin: 0 auto !important;
          width: 100% !important;
          background-color: transparent !important;
          backdrop-filter: none !important;
          padding: 0 !important;
     }

     .play-box .user-registration .ur-frontend-form,
     .play-box .user-registration.ur-frontend-form {
          border: none;
          padding: 0 !important;
          background-color: transparent !important;
          backdrop-filter: none !important;
     }

     .play-box .wp-block-group__inner-container>.user-registration .ur-frontend-form form.login,
     .play-box .wp-block-group__inner-container>.user-registration.ur-frontend-form form.register {
          background-color: rgba(0, 0, 0, 0.40);
          backdrop-filter: blur(4px);
          background-clip: border-box;
          border-radius: 0px 0px 30px 30px;
          padding-bottom: 30px;
     }

     .play-box .user-registration input::placeholder {
          color: var(--gray-dark) !important;
          opacity: 1 !important;
          text-align: center !important;
          font-weight: 400 !important;
     }

     #user-registration .hide-dark-future {
          display: none !important;
     }

     .play-box .ur-frontend-form .ur-form-row .ur-form-grid {
          padding: 0 20px !important
     }

     #user-registration .ur-frontend-form .user-registration-form-login .ur-form-row .ur-form-grid>div:not(#ur-recaptcha-node) {
          float: none !important;
          text-align: center !important;
          display: block !important;
     }

     #user-registration .ur-frontend-form .user-registration-form-login .ur-form-row .ur-form-grid>div:not(#ur-recaptcha-node) .user-registration-Button {
          font-family: var(--tfnt-head);
          text-align: center;
          font-size: 16px;
          font-weight: 700;
          line-height: 100%;
          letter-spacing: 1px;
          text-transform: uppercase;
          width: 140px;
          padding: 10px 20px;
          gap: 10px;
          background: var(--blue-radial);
          border-radius: 40px;
          backdrop-filter: blur(5px);
          border: 1px solid var(--blue-dark);
     }

     #user-registration .ur-frontend-form .user-registration-form-login .ur-form-row .ur-form-grid>div:not(#ur-recaptcha-node) .user-registration-Button:hover {
          padding: 10px 20px;
     }

     .user-registration-register a {
          color: #fff !important;
          text-decoration: none !important;
     }

     .user-registration-register a strong {
          text-decoration: none !important;
          display: inline-block !important;
          background: var(--shimmer, linear-gradient(148deg, #49C8B6 0.92%, #B9FFF6 54.38%, #70F5E4 98.46%)) !important;
          background-clip: text !important;
          color: transparent !important;
          font-weight: 700 !important;
          padding-left: 10px !important;
     }

     .play-box .user-registration.ur-frontend-form form.register .ur-form-row:first-child {
          flex-direction: column !important;
     }

     .entry-content .play-box form:is(.edit-profile, .edit-password) .ur-form-row {
          flex-direction: column !important;
     }

     .play-box .user-registration.ur-frontend-form form.register>.ur-form-row:first-child>div.ur-form-grid {
          width: 100% !important;
          margin-bottom: 20px !important;
     }

     .play-box .user-registration.ur-frontend-form form.register>.ur-form-row:first-child>div.ur-form-grid.ur-grid-2 {
          width: 100% !important;
          margin-bottom: 0px !important;
     }

     body.user-registration-membership_page_user-registration-login-forms #user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error),
     body.user-registration-membership_page_user-registration-login-forms .user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error),
     body.user-registration-page #user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error),
     body.user-registration-page .user-registration:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid .ur-field-item label:not(.user-registration-error) {
          color: #fff !important;
     }

     .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item,
     .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item:last-child {
          margin-bottom: 20px;
     }

     .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-html strong {
          display: block !important;
     }

     .play-box .user-registration.ur-frontend-form .ur-form-row .ur-form-grid input[type="text"],
     .play-box .user-registration.ur-frontend-form .ur-form-row .ur-form-grid input[type="email"],
     .play-box .user-registration.ur-frontend-form .ur-form-row .ur-form-grid input[type="password"] {
          max-width: 350px;
          padding: 13px 10px 15px 10px !important;
          border: 1px solid #C5C5C5 !important;
          background: #FFF !important;
          color: var(--gray-dark) !important;
          text-align: center !important;
          font-size: 16px !important;
          font-weight: 600 !important;
     }

     .play-box .user-registration.ur-frontend-form .ur-form-row .ur-form-grid input[type="text"]::placeholder,
     .play-box .user-registration.ur-frontend-form .ur-form-row .ur-form-grid input[type="email"]::placeholder,
     .play-box .user-registration.ur-frontend-form .ur-form-row .ur-form-grid input[type="password"]::placeholder {
          color: var(--gray-dark) !important;
          opacity: 1 !important;
          text-align: center !important;
          font-weight: 600 !important;
     }

     .entry-content .play-box form:is(.edit-profile, .edit-password) input[type="text"],
     .entry-content .play-box form:is(.edit-profile, .edit-password) .ur-form-row .ur-form-grid input[type="email"],
     .entry-content .play-box form:is(.edit-profile, .edit-password) .ur-form-row .ur-form-grid input[type="password"] {
          max-width: none !important;
     }

     .entry-content .play-box form:is(.edit-profile, .edit-password) .ur-field-item.field-user_login,
     .entry-content .play-box form:is(.edit-profile, .edit-password) .ur-field-item.field-html {
          display: none !important;
     }

     .play-box .user-registration.ur-frontend-form .ur-button-container {
          justify-content: center !important;
          margin-top: 0 !important;
          width: 100% !important;
     }

     .play-box .user-registration.ur-frontend-form button,
     .ur-frontend-form input[type="submit"],
     .ur-frontend-form button[type="submit"] {
          font-family: var(--tfnt-head);
          text-align: center;
          font-size: 16px !important;
          font-weight: 700 !important;
          line-height: 100% !important;
          letter-spacing: 1px !important;
          text-transform: uppercase;
          max-width: 200px;
          padding: 12px 32px 14px !important;
          margin-left: unset !important;
          margin-right: unset !important;
          background: var(--blue-radial) !important;
          border-radius: 40px;
          backdrop-filter: blur(5px);
          border: 1px solid var(--blue-dark) !important;
     }

     .entry-content .play-box form:is(.edit-profile, .edit-password) .user-registration-profile-fields>p,
     .entry-content .play-box form:is(.edit-profile, .edit-password) .user-registration-submit-Button,
     .entry-content .play-box form:is(.edit-profile, .edit-password) input[type="submit"],
     .entry-content #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-EditAccountForm .ur-form-grid>p {
          float: none !important;
          max-width: none !important;
          display: block !important;
          margin: 0 auto 0px !important;
     }

     .play-box#play-box-profile {
          border: none !important;
          box-shadow: none !important;
          max-width: 100% !important;
          width: 100% !important;
     }
}

@media only screen and (min-width : 768px) {
     .play-box .wp-block-group__inner-container>* {
          margin: 0;
          padding: 10px 50px;
     }

     .play-box .wp-block-group__inner-container>h2 {
          padding: 50px 50px 10px;
     }
}

/* Cover Page */
@media only screen and (min-width : 24px) {
     .df-intro-container {
          position: relative;
          z-index: 10;
          margin-bottom: 120vh;
          color: #fff;
          transition: all 0.5s ease-in-out;
     }

     .scrolled .df-intro-container {
          opacity: 0.6;
          transform: translate(0, -60px);
          transition: all 750ms ease-in-out;
     }

     .df-intro-container h1 {
          color: transparent;
          background: linear-gradient(174deg, #CA0501 -34.65%, #FF5E5B 20.22%, #CA0501 76.16%);
          background-clip: text;
          margin: 0 0 30px 0;
     }

     .df-intro-container h1:first-of-type {
          background: linear-gradient(212deg, #7B7B7B 5.32%, #FFF 35.48%, #7B7B7B 66.22%);
          background-clip: text;
          margin-bottom: 10px;
     }

     .df-intro-container p,
     .df-terms-container>* {
          max-width: 680px;
          margin: 0 auto 40px;
     }

     .df-terms-container>* {
          text-align: left;
          padding: 0 20px;
     }

     #intro-scroll-container>.wp-block-group__inner-container {
          position: relative;
     }

     canvas#speedometer {
          width: 250px !important;
          height: 165px !important;
          position: relative;
          z-index: 10;
          margin: 0 auto;
          display: block;
          opacity: 0;
          transform: scale(0);
          animation: speedometerEntrance 1s cubic-bezier(0.64, 0, 0.78, 0) .25s 1 normal forwards;
          cursor: pointer;
     }

     @keyframes speedometerEntrance {
          0% {
               animation-timing-function: ease-in;
               opacity: 0;
               transform: scale(0);
          }

          38% {
               animation-timing-function: ease-out;
               opacity: 1;
               transform: scale(1);
          }

          55% {
               animation-timing-function: ease-in;
               transform: scale(0.7);
          }

          72% {
               animation-timing-function: ease-out;
               transform: scale(1);
          }

          81% {
               animation-timing-function: ease-in;
               transform: scale(0.84);
          }

          89% {
               animation-timing-function: ease-out;
               transform: scale(1);
          }

          95% {
               animation-timing-function: ease-in;
               transform: scale(0.95);
          }

          100% {
               animation-timing-function: ease-out;
               transform: scale(1);
               opacity: 1;
          }
     }

     .chevrons-container {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 100%;
          z-index: 11;
          cursor: pointer;
     }

     .chevrons {
          width: 260px !important;
          height: 167px !important;
          margin: 0 auto;
          padding: 64px 0 0 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transform: scale(0.2);
          transition: all 0.5s linear 0.75s;
          transform-origin: bottom center;
          transition-delay: 0.5s;
     }

     .chevrons-container.visible .chevrons {
          opacity: 1;
          transform: scale(1);
     }

     .chevrondown {
          margin-top: 0px;
          position: relative;
          width: 36px;
          height: 36px;
          background-image: url(images/grail-darkfuture/chevron.webp);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          opacity: 0;
     }

     .chevrondown:nth-child(odd) {
          animation: chevron-pulse 600ms linear 0ms infinite alternate forwards;
     }

     .chevrondown:nth-child(even) {
          animation: chevron-pulse 600ms linear 600ms infinite alternate forwards;
          margin-top: -5px;
     }
}

@media only screen and (min-width: 1024px) {
     .wp-block-cover.is-position-top-center.df-intro-container {
          margin-top: 0px;
          align-items: center !important;
     }

     .df-terms-container>* {
          max-width: 800px;
          padding: 0 40px;
     }
}

@keyframes chevron-pulse {
     from {
          opacity: 0;
          transform: translateY(0px);
     }

     to {
          opacity: 1;
          transform: translateY(2px);
     }
}

/* Hud Elements */
@media only screen and (min-width : 24px) {
     .df-hud-elements {
          position: fixed;
          bottom: 0px;
          left: 0;
          z-index: 1000;
          width: 100%;
          transform: translateY(150vh);
          transition: all 300ms ease-out;
          will-change: transform;
     }

     .df-hud-elements.has-open-hud {
          transform: translateY(150vh);
          transition: all 750ms ease-in-out;
     }

     .site-content.scrolled .df-hud-elements,
     .site-content.scrolled .df-hud-elements.has-open-hud {
          transform: translateY(0);
          transition: all 750ms ease-in-out;
     }

     .df-hud-elements>.wp-block-group__inner-container {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 0px;
     }
}

@media only screen and (min-width : 1024px) {

     .df-hud-elements,
     .df-hud-elements.has-open-hud,
     .site-content.scrolled .df-hud-elements,
     .site-content.scrolled .df-hud-elements.has-open-hud {
          position: fixed;
          top: 0;
          bottom: unset;
          left: 0;
          width: 100vw;
          height: 100vh;
          transform: none;
     }

     .df-hud-elements,
     .df-hud-elements.has-open-hud {
          z-index: 0;
     }

     .site-content.scrolled .df-hud-elements,
     .site-content.scrolled .df-hud-elements.has-open-hud {
          z-index: 1000;
     }

     .df-hud-elements>.wp-block-group__inner-container {
          width: 100%;
          height: 100%;
          display: block;
          flex-direction: unset;
          align-items: unset;
          gap: unset;
     }
}

/* Hud Next Race */
@media only screen and (min-width : 24px) {
     .df-hud-container.df-hud-next-race {
          height: 42px;
          backdrop-filter: none;
          background-image: url(images/grail-darkfuture/grail-f1-next-race-bg.png);
          background-size: auto 100%;
          background-repeat: no-repeat;
          background-position: top left;
          text-align: left;
     }

     .df-hud-container.df-hud-next-race>.wp-block-group__inner-container {
          height: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          padding: 0px 20px 0px 20px;
          gap: 0px;
     }

     .df-hud-container.df-hud-next-race h5 {
          margin: 0;
          padding-right: 18px;
     }

     .df-hud-container.df-hud-next-race h5>strong {
          display: inline-block;
          padding-left: 15px;
     }

     .df-hud-container.df-hud-next-race p {
          margin: 0;
          border-radius: 5px;
          background: rgba(255, 255, 255, 0.50);
          padding: 5px 8px;
          text-align: center;
          color: #000;
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: 100%;
          /* 12px */
     }
}

@media only screen and (min-width: 1024px) {
     .df-hud-container.df-hud-next-race {
          position: fixed;
          top: 0px;
          left: 0px;
          width: 40%;
          max-width: 406px;
          z-index: 1032;
          background-size: 100% auto;
     }

     .scrolled .df-hud-container.df-hud-next-race {
          z-index: 1032;
     }
}

/* Hud Interactives */
@media only screen and (min-width : 24px) {
     .df-hud-elements .df-hud-container {
          backdrop-filter: blur(5px);
          max-height: 50px;
          height: calc(100vh - 175px);
     }

     .df-hud-elements .df-hud-container.hud-open {
          background: linear-gradient(180deg, #36363D 0%, rgba(54, 54, 61, 0.00) 100%);
     }

     .df-hud-container .df-hud-title {
          text-align: left;
          padding: 10px 0px 10px 40px;
          background: linear-gradient(180deg, #36363D 0%, #36363d00 100%);
          transition: all 0.25s ease-out;
          position: relative;
     }

     .df-hud-container .df-hud-title h5 {
          color: #70F5E4;
          text-align: left;
          text-transform: uppercase;
          display: inline-block;
          margin: 0px 28px 0px 0px;
     }

     .df-hud-container .df-hud-title p {
          display: inline-block;
          text-align: left;
          text-transform: uppercase;
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          line-height: 140%;
          letter-spacing: 1.8px;
          margin: 0;
     }

     .df-hud-container.expands .df-hud-title::after {
          content: '';
          position: absolute;
          top: 18px;
          right: 18px;
          width: 22px;
          height: 22px;
          background-image: url(images/grail-darkfuture/hud-openclose.png);
          background-position: center;
          background-size: 8px auto;
          background-repeat: no-repeat;
          transition: transform 0.5s linear;
          transform-origin: center center;
          transform: rotate(0deg);
     }

     .df-hud-container.expands.hud-open .df-hud-title::after {
          transform: rotate(180deg);
     }

     .df-hud-container .df-hud-title p>.has-inline-color {
          background-color: transparent !important;
          color: #D9D9D9 !important;
          display: none !important;
     }

     .df-hud-container.hud-open .df-hud-title {
          background: transparent;
          padding: 20px 0px 0px 40px;
     }

     .df-hud-container.hud-open .df-hud-title h5 {
          display: block;
     }

     .df-hud-container.hud-open .df-hud-title p {
          display: block;
          margin: 20px 0 0 0px;
          width: 28%;
     }

     .df-hud-container.hud-open .df-hud-title p>.has-inline-color {
          background-color: transparent !important;
          color: #D9D9D9 !important;
          display: inline !important;
     }
}

@media only screen and (min-width: 1024px) {

     .df-hud-elements .df-hud-container,
     .df-hud-elements .df-hud-container.hud-open {
          max-height: none;
          max-width: 500px;
          overflow: visible;
          position: absolute;
          top: unset;
          left: 0;
          bottom: 25vh;
     }

     .df-hud-container .df-hud-title {
          text-align: left;
          padding-left: 40px;
          background: linear-gradient(180deg, #36363D 0%, #36363d00 100%);
     }

     .df-hud-container .df-hud-title h5 {
          color: #70F5E4;
          text-align: left;
          text-transform: uppercase;
          display: inline-block;
          margin: 16px 28px 16px 0px;
     }

     .df-hud-container .df-hud-title p {
          display: inline-block;
          text-align: left;
          text-transform: uppercase;
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          line-height: 140%;
          letter-spacing: 1.8px;
     }

     .df-hud-container .df-hud-title p>.has-inline-color {
          background-color: transparent !important;
          color: #D9D9D9 !important;
          display: none !important;
     }

     .df-hud-container.hud-open .df-hud-title h5 {
          display: block;
     }

     .df-hud-container.hud-open .df-hud-title p {
          display: block;
          margin: 20px 0 0 0px;
          width: 28%;
     }

     .df-hud-container.hud-open .df-hud-title p>.has-inline-color {
          background-color: transparent !important;
          color: #D9D9D9 !important;
          display: inline !important;
     }

     .df-hud-container.expands .df-hud-title::after {
          display: none;
     }
}

/* Hud Map */
@media only screen and (min-width : 24px) {
     .df-hud-container.df-hud-map>div {
          position: relative;
     }

     .df-hud-container.df-hud-map {
          height: 280px;
          transition: all 0.5s ease-out;
     }

     .df-hud-container.df-hud-map.hud-open {
          max-height: 350px;
          backdrop-filter: none;
          overflow: visible
     }

     .df-hud-container .hotspots-container {
          transform: translateY(80px);
          opacity: 0;
     }

     .df-hud-container.df-hud-map.hud-open .hotspots-container {
          transform: translateY(0px);
          opacity: 1;
     }

     .df-hud-container.df-hud-map .div-hud-content {
          position: absolute;
          top: 0px;
          right: 0px;
     }

     .df-hud-container.df-hud-map canvas#mapframe {
          display: none;
     }
}

@media only screen and (min-width: 1024px) {

     .df-hud-container.df-hud-map,
     .df-hud-container.df-hud-map.hud-open {
          left: unset;
          top: 50vh;
          right: -480px;
          width: 440px;
          transition: all 0.75s ease-out;
          transition-delay: 0.25s;
          height: 324px;
          max-height: 400px;
          backdrop-filter: none;
          will-change: transform;
     }

     .df-hud-container.df-hud-map canvas#mapframe {
          display: block;
          position: absolute;
          top: -130px;
          left: 0px;
          width: 110%;
          height: auto;
          aspect-ratio: 1 / 1;
          z-index: 40;
          backdrop-filter: blur(5px);
     }

     .site-content.scrolled .df-hud-container.df-hud-map {
          transform: translateX(-435px);
     }

     .df-hud-container.df-hud-map .hotspots-interaction {
          margin: 0;
          transform: translate(0px, 20px);
     }

     .df-hud-container.df-hud-map .df-hud-title {
          background: transparent;
          position: relative;
          z-index: 50;
     }

     .df-hud-container.df-hud-map .df-hud-title h5 {
          display: none;
     }

     .df-hud-container.df-hud-map .df-hud-content {
          position: relative;
          z-index: 50;
     }

     .df-hud-container.df-hud-map .df-hud-title p,
     .df-hud-container.df-hud-map.hud-open .df-hud-title p {
          display: block;
          font-size: 20px;
          font-weight: 500;
          line-height: 140%;
          margin: 0px 0 0 0px;
          width: 100%;
          max-width: 260px;
          transform: translate(10px, 20px);
     }

     .df-hud-container.df-hud-map .df-hud-title p>.has-inline-color {
          background-color: transparent !important;
          color: #fff !important;
          display: inline !important;
     }

     .df-hud-container .hotspots-container {
          transform: translateY(0px);
          opacity: 1;
     }

     .df-hud-container .hotspots-container .hotspots-image-container {
          width: 100%;
          max-width: 300px;
          margin: 0 0 0 0px;
          transform: translate(10px, 0px);
     }
}

/* Hud Leaderboard */
.site-content .df-hud-container.df-hud-leaderboard #borderline {
     display: none;
}

.df-hud-container.df-hud-leaderboard {
     height: 590px;
     max-height: 50px;
     transition: all 0.5s ease-out;
}

.df-hud-container.df-hud-leaderboard.hud-open {
     max-height: 590px;
}

@media only screen and (min-width: 1024px) {
     .df-hud-container.df-hud-leaderboard {
          overflow: visible;
          top: 180px !important;
          left: -420px;
          width: 390px;
          height: 700px;
          transition: all 0.25s ease-out;
          opacity: 1;
          max-height: none;
          /* background: linear-gradient(0deg, rgba(54, 54, 61) 0%, rgba(54, 54, 61, 1) 100%); */
     }

     .df-hud-container.df-hud-leaderboard>.wp-block-group__inner-container {
          height: 700px;
     }

     .site-content .df-hud-container.df-hud-leaderboard::before {
          content: '';
          position: absolute;
          top: 0;
          right: 0px;
          width: 80px;
          height: 100%;
          background: #4a4a4a;
          background: linear-gradient(180deg, #36363D 0%, rgba(54, 54, 61, 0.00) 100%);
          border-radius: 0px 20px 20px 0px;
          z-index: 100;
          display: block;
          backdrop-filter: blur(5px);
          transition: all 0.5s ease-out;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard {
          left: -390px;
          transition: all 0.5s ease-out;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard.hud-open,
     .site-content .df-hud-container.df-hud-leaderboard.hud-open {
          border-radius: 0px 20px 20px 0px;
          transition-delay: 0.25s;
          transition: all 0.5s ease-out;
     }

     .site-content .df-hud-container.df-hud-leaderboard.hud-open::before {
          right: 0;
          cursor: pointer;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard::before {
          right: -80px;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard.hud-open::before {
          right: 700px;
          opacity: 0;
     }

     .site-content .df-hud-container.df-hud-leaderboard #borderline {
          position: absolute;
          top: 50px;
          right: -150px;
          width: 44px;
          height: 504px;
          opacity: 0;
          display: block;
          transform: scaleY(0);
          transform-origin: center center;
          transition: transform 0.5s ease-out, opacity 0.5s ease-out;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard #borderline {
          right: -150px;
          opacity: 1;
          transform: scaleY(1);
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard.hud-open #borderline {
          opacity: 0;
     }

     .site-content.scrolled .df-hud-elements .df-hud-container.df-hud-leaderboard.hud-open,
     .df-hud-elements .df-hud-container.df-hud-leaderboard.hud-open {
          left: 0;
     }

     .df-hud-container.df-hud-leaderboard .df-hud-title {
          background: transparent;
     }

     .df-hud-container.df-hud-leaderboard .df-hud-title h5 {
          font-size: 25px;
          transform-origin: center center;
          position: relative;
          z-index: 600;
          transform: rotate(-90deg) translate(-440px, 180px);
          transition: all 0.5s ease-out;
          animation: none;
     }

     .df-hud-container.df-hud-leaderboard .df-hud-title p {
          font-size: 22px;
          transform: rotate(-90deg) translate(-90px, 250px);
          transform-origin: center center;
          position: relative;
          z-index: 600;
          transition: all 0.5s ease-out;
          letter-spacing: 4.4px;
          animation: none;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard .df-hud-title h5 {
          transform: rotate(-90deg) translate(-440px, 240px);
          margin-top: 0;
          margin-bottom: 0;
          padding-top: 8px;
          padding-bottom: 21px;
          cursor: pointer;
          animation: fadeoutin 600ms ease-out 0ms 1 normal forwards;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard .df-hud-title p {
          transform: rotate(-90deg) translate(-60px, 240px);
          padding: 20px 50px;
          cursor: pointer;
          animation: fadeoutin 700ms ease-out 0ms 1 normal forwards;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard.hud-open .df-hud-title {
          background: linear-gradient(0deg, rgba(112, 245, 228, 0.30) 0%, rgba(54, 54, 61, 0.30) 100%);
          padding: 30px 50px;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard.hud-open .df-hud-title h5 {
          transform: none;
          margin-top: inherit;
          margin-bottom: inherit;
          padding-top: inherit;
          padding-bottom: inherit;
          animation: fadeoutinopen 500ms ease-out 0ms 1 normal forwards;
     }

     .site-content.scrolled .df-hud-container.df-hud-leaderboard.hud-open .df-hud-title p {
          transform: none;
          padding: inherit;
          width: 100%;
          animation: fadeoutinopen 500ms ease-out 0ms 1 normal forwards;
     }

     .df-hud-container.df-hud-leaderboard .df-hud-title p::after {
          content: '';
          position: absolute;
          top: 24px;
          right: 8px;
          width: 22px;
          height: 22px;
          background-image: url(images/grail-darkfuture/hud-openclose.png);
          background-position: center;
          background-size: 12px auto;
          background-repeat: no-repeat;
          transition: transform 0.5s linear;
          transform-origin: center center;
          transform: rotate(180deg);
     }

     .df-hud-container.df-hud-leaderboard.hud-open .df-hud-title p::after {
          top: -58px;
          transform: rotate(270deg);
          right: -20px;
     }
}

@keyframes fadeoutin {
     0% {
          opacity: 1;
     }

     10% {
          opacity: 0;
     }

     50% {
          opacity: 0;
     }

     100% {
          opacity: 1;
     }
}

@keyframes fadeoutinopen {
     0% {
          opacity: 1;
     }

     25% {
          opacity: 0;
     }

     75% {
          opacity: 0.15;
     }

     100% {
          opacity: 1;
     }
}

/* ## Spline */
.spline-container {
     position: fixed;
     top: -40px;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 0;
}

.spline-container .wp-block-cover__inner-container {
     overflow: hidden;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: none;
}

.spline-container .wp-block-cover__inner-container #splineCanvas {
     width: auto !important;
     height: 85vh !important;
     aspect-ratio: 1708 / 887 !important;
     transform: translateX(-36%);
     animation: splineFadeIn 2s cubic-bezier(0.5, 0, 0.75, 0) 0s 1 normal forwards;
     opacity: 0;
     will-change: transform, opacity;
}

@keyframes splineFadeIn {
     0% {
          opacity: 0;
     }

     100% {
          opacity: 1;
     }
}

@media only screen and (min-width: 768px) {
     .spline-container .wp-block-cover__inner-container #splineCanvas {
          transform: translateX(-25%);
     }
}

@media only screen and (min-width: 1024px) {
     .spline-container {
          top: 0px;
     }

     .spline-container .wp-block-cover__inner-container #splineCanvas {
          height: 100vh !important;
          transform: translateX(-29%);
     }
}

@media only screen and (min-width: 1100px) {
     .spline-container .wp-block-cover__inner-container #splineCanvas {
          transform: translateX(-27%);
     }
}

@media only screen and (min-width: 1200px) {
     .spline-container .wp-block-cover__inner-container #splineCanvas {
          transform: translateX(-24%);
     }
}

@media only screen and (min-width: 1400px) {
     .spline-container .wp-block-cover__inner-container #splineCanvas {
          width: 100vw !important;
          height: auto !important;
          transform: translateX(0);
     }
}

.play-box#play-box-faq .wp-block-group__inner-container>* {
     padding: 10px 20px;
}

/* User Profile */
#user-registration {
     background-color: rgba(0, 0, 0, 0.40) !important;
     border-radius: 30px;
}

.dark-future-quest-profile-header .grail-screen-name {
     font-family: var(--tfnt-body);
     font-size: 22px;
     font-weight: 400;
     line-height: 150%;
     display: block;
}

.grail-hero-collection {
     display: grid;
     gap: 6px;
     grid-template-columns: repeat(3, 1fr);
     margin: 0 auto;
     width: 100%;
     max-width: 320px;
     transition: all 0.75s ease-in-out;
}

.grail-hero-collection .grail-collection-card {
     overflow: hidden;
     position: relative;
}

.grail-hero-collection .grail-collection-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.8);
     opacity: 1;
     background-image: url(images/grail-darkfuture/question-mark.png);
     background-size: 38%;
     background-position: center;
     background-repeat: no-repeat;
     display: block;
     z-index: 72;
}

.grail-hero-collection .grail-collection-card.grail-card-is-collected::before {
     display: none;
}

.grail-hero-collection .grail-collection-card img {
     position: relative;
     height: 100%;
     width: auto;
     z-index: 70;
}

.user-registration-MyAccount-navigation ul li:is(.user-registration-MyAccount-navigation-link--dashboard, .user-registration-MyAccount-navigation-link--user-logout, .user-registration-MyAccount-navigation-link--user-privacy) {
     display: none !important
}


#user-registration.horizontal .user-registration-MyAccount-navigation-link a {
     color: #fff !important;
}


#user-registration.horizontal .user-registration-MyAccount-navigation-link.is-active a,
#user-registration.horizontal .user-registration-MyAccount-navigation-link a:hover {
     color: #fff !important;
     background-color: transparent !important;
     border-bottom: none !important;
}
#user-registration.horizontal .user-registration-MyAccount-navigation-link a:hover {
     text-decoration: underline !important;

}
#user-registration .user-registration-MyAccount-content h2,
#user-registration .user-registration-MyAccount-content .edit-password legend {
     width: 100% !important;
}

#user-registration p {
     color: #fff;
}

#user-registration.horizontal .user-registration-MyAccount-navigation,
#user-registration .user-registration-MyAccount-navigation {
     border-bottom: none !important;
     margin: 40px 0;
}

@media only screen and (min-width: 768px) {
     .grail-hero-collection-container {
          max-width: 640px;
          margin: 0 auto;
          position: relative;
          z-index: 10;
          padding-top: 25px;
     }

     .faq-container-for-dots {
          max-width: 640px;
          margin: 0 auto;
          position: relative;
          z-index: 10;
          padding-top: 25px;
     }

     .faq-container-for-dots #borderdotsleft,
     .grail-hero-collection-container #borderdotsleft {
          position: absolute;
          top: 0;
          left: 0;
          width: 64px;
          height: 700px;
          z-index: 1;
          transform: scale(1, 1);
     }

     .faq-container-for-dots #borderdotsright,
     .grail-hero-collection-container #borderdotsright {
          position: absolute;
          top: 0;
          right: 0;
          width: 64px;
          height: 700px;
          z-index: 1;
          transform: scale(-1, -1);
     }

     .grail-hero-collection {
          max-width: 460px;
          gap: 10px;
     }
}


/* Map Video with Cards (Just in Case)


#videoWrapper {
     position: fixed;
     top: -100px;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 1;
     display: flex;
     justify-content: center;
     align-items: center;
}

#yoyoVideo {
     width: auto;
     height: 100vh;
     aspect-ratio: 1708 / 887;
}

#tbut {
     position: relative;
     z-index: 10000;
     width: 100%;
     height: 140px;
     cursor: pointer;
}


#cardContainer {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 1;
     perspective: 1492px;
     transform-style: preserve-3d;
     display: flex;
     justify-content: center;
     align-items: center;
}

#cardContainer .card-image {
     width: 250px;
     height: 375px;
     transform: rotateY(-28deg);
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     opacity: 0;
}

.site-content.scrolled #cardContainer .card-image {
     opacity: 1;
}

@media only screen and (min-width: 1024px) {
     #cardContainer .card-image {
          width: 320px;
          height: 480px;
     }
}
*/
div.easy-notification-bar {
     opacity: 0 !important;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute !important;
     width: 1px;
     word-wrap: normal !important;
}

.screen-reader-text:focus {
     background-color: #f1f1f1;
     border-radius: 3px;
     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     clip: auto !important;
     clip-path: none;
     color: #21759b;
     display: block;
     font-size: 0.875rem;
     font-weight: 700;
     height: auto;
     left: 5px;
     line-height: normal;
     padding: 15px 23px 14px;
     text-decoration: none;
     top: 5px;
     width: auto;
     z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
     outline: 0;
}

/* ### Tertiary Elements */
dfn,
cite,
em,
i {
     font-style: italic;
}

blockquote {
     margin: 0 1.5em;
}

address {
     margin: 0 0 1.5em;
}

pre {
     background: #eee;
     font-family: "Courier 10 Pitch", courier, monospace;
     line-height: 1.6;
     margin-bottom: 1.6em;
     max-width: 100%;
     overflow: auto;
     padding: 1.6em;
}

code,
kbd,
tt,
var {
     font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
     border-bottom: 1px dotted #666;
     cursor: help;
}

mark,
ins {
     background: #fff9c0;
     text-decoration: none;
}

big {
     font-size: 125%;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
     background-color: transparent;
     border: none;
}

.entry-content button,
div.site-content a:is(.button, .post-edit-link, .wp-block-button__link),
.entry-content input[type="button"],
.entry-content input[type="reset"],
.entry-content input[type="submit"] {
     display: inline-block;
     padding: 10px 20px;
     text-align: center;
     border-radius: 40px;
     border: 1px solid #49C8B6;
     background: var(--blue-radial);
     box-shadow: 0 0 20px -5px rgba(112, 245, 228, 0.20);
     backdrop-filter: blur(5px);
     color: #FFF;
     transition: all 0.15s ease-in-out !important;
     font-family: var(--tfnt-head);
     font-size: 16px;
     letter-spacing: 1.25px;
     line-height: 100%;
     /* 16px */
     font-weight: 700;
     text-transform: uppercase;
     cursor: pointer;
     text-decoration: none;
}

div.site-content a.wp-block-button__link:hover,
.entry-content button:hover,
.entry-content input[type="button"]:hover,
.entry-content input[type="reset"]:hover,
.entry-content input[type="submit"]:hover {
     border: 1px solid #CA0501;
     background: var(--red-radial, radial-gradient(97.37% 94.29% at 50% 50%, rgba(202, 5, 1, 0.18) 33.65%, rgba(202, 5, 1, 0.30) 60.58%, rgba(202, 5, 1, 0.60) 100%));
     box-shadow: 0 0 20px -5px rgba(202, 5, 1, 0.40);
}

div.site-content .wp-block-buttons.cover-buttons {
     gap: 34px;
}

div.site-content .wp-block-buttons.cover-buttons a:is(.button, .post-edit-link, .wp-block-button__link) {
     min-width: 175px;
     padding: 12.5px 25px;
}

div.site-content a.wp-block-button__link:active,
div.site-content a.wp-block-button__link:focus,
.entry-content button:active,
.entry-content button:focus,
.entry-content input[type="button"]:active,
.entry-content input[type="button"]:focus,
.entry-content input[type="reset"]:active,
.entry-content input[type="reset"]:focus,
.entry-content input[type="submit"]:active,
.entry-content input[type="submit"]:focus {
     border: 1px solid #CA0501;
     background: var(--red-radial, radial-gradient(97.37% 94.29% at 50% 50%, rgba(202, 5, 1, 0.18) 33.65%, rgba(202, 5, 1, 0.30) 60.58%, rgba(202, 5, 1, 0.60) 100%));
     box-shadow: 0 0 20px -5px rgba(202, 5, 1, 0.40);
}

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content input[type="password"],
.entry-content input[type="search"],
.entry-content input[type="number"],
.entry-content input[type="tel"],
.entry-content input[type="range"],
.entry-content input[type="date"],
.entry-content input[type="month"],
.entry-content input[type="week"],
.entry-content input[type="time"],
.entry-content input[type="datetime"],
.entry-content input[type="datetime-local"],
.entry-content input[type="color"],
.entry-content textarea {
     max-width: 350px;
     padding: 13px 22px 15px 22px !important;
     border: 1px solid #C5C5C5;
     background: #FFF;
     color: var(--gray-dark) !important;
     text-align: center;
     font-size: 16px;
     font-weight: 600;
     line-height: 100%;
     /* 16px */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
     opacity: 1 !important;
}

.entry-content .ur-frontend-form .ur-form-row .ur-form-grid input::placeholder {
     color: var(--gray-dark) !important;
}

select {
     border: 1px solid #C5C5C5;
}

textarea {
     width: 100%;
}

.otgs-development-site-front-end {
     display: none !important;
}