/*
Colors
**************
*/
/* Per-site CSS variables for colors */
body.wp-theme-blastworks-inc {
  --primary: #cc3333;
}

body.wp-theme-slingo-arcade {
  --primary: #0059a5;
  --secondary: #002333;
}

body.wp-theme-slingo-casino {
  --primary: #7b123e;
  --secondary: #ffba1e;
  --pink: #d92570;
  --dark-purple: #410422;
}

/*
Gradients
***********
*/
/*
Button Gradients
***********
*/
/*
Font Import & Family
***********
*/
@font-face {
  font-family: "avenirnextbold";
  src: url("../fonts/avenirnextbold.woff2") format("woff2"), url("../fonts/avenirnextbold.woff") format("woff"), url("../fonts/avenirnextbold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "avenirnextregular";
  src: url("../fonts/avenirnextregular.woff2") format("woff2"), url("../fonts/avenirnextregular.woff") format("woff"), url("../fonts/avenirnextregular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "metapro_bold";
  src: url("../fonts/metapro_blk.woff2") format("woff2"), url("../fonts/metapro_blk.woff") format("woff"), url("../fonts/metapro_blk.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EurostileCondensedBold";
  src: url("../fonts/eurostile_lt_condensed_bold-webfont.woff2") format("woff2"), url("../fonts/eurostile_lt_condensed_bold-webfont.woff") format("woff"), url("../fonts/eurostile_lt_condensed_bold-webfont.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
/*
Font variables
***********
*/
/*
Font maps per site (MATCH BODY CLASSES)
***********
*/
/* =====================================
   Site-specific Font Variables (FIXED)
===================================== */
body.wp-theme-blastworks-inc {
  --font-body: avenirnextregular, sans-serif;
  --font-subheading: avenirnextbold, sans-serif;
  --font-heading: avenirnextheavy, sans-serif;
}

body.wp-theme-slingo-arcade {
  --font-body: avenirnextregular, sans-serif;
  --font-subheading: metapro_bold, sans-serif;
  --font-heading: metapro_bold, sans-serif;
}

body.wp-theme-slingo-casino {
  --font-body: avenirnextregular, sans-serif;
  --font-subheading: EurostileCondensedBold, sans-serif;
  --font-heading: EurostileCondensedBold, sans-serif;
}

/* =====================================
   Site-specific font assignments
===================================== */
/* ==========================
   Blastworks Site Fonts
========================== */
body.wp-theme-blastworks-inc {
  font-family: var(--font-body);
  /* Body text */
}
body.wp-theme-blastworks-inc p,
body.wp-theme-blastworks-inc li,
body.wp-theme-blastworks-inc .main-foot a,
body.wp-theme-blastworks-inc .sub-foot a {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.25;
}
body.wp-theme-blastworks-inc a {
  font-family: var(--font-body);
  font-size: var(--link-size);
  line-height: 1;
}
body.wp-theme-blastworks-inc h1 {
  font-family: var(--font-heading);
  font-size: var(--h1-size);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
body.wp-theme-blastworks-inc h2 {
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  line-height: 1;
  text-transform: uppercase;
}
body.wp-theme-blastworks-inc h3 {
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  line-height: 1;
  text-transform: uppercase;
}
body.wp-theme-blastworks-inc h4 {
  font-family: var(--font-subheading);
  font-size: var(--h4-size);
  line-height: 1.25;
}
body.wp-theme-blastworks-inc h5 {
  line-height: 1.25;
}
body.wp-theme-blastworks-inc h5,
body.wp-theme-blastworks-inc h6,
body.wp-theme-blastworks-inc button,
body.wp-theme-blastworks-inc header a {
  font-family: var(--font-subheading);
  font-size: var(--h5-size);
}
body.wp-theme-blastworks-inc .main a {
  text-transform: uppercase;
}

/* ==========================
   Slingo Arcade Site Fonts
========================== */
body.wp-theme-slingo-arcade {
  font-family: var(--font-body);
  /* Body text */
}
body.wp-theme-slingo-arcade a {
  font-family: var(--font-heading);
  font-size: var(--link-size);
  line-height: 1.25;
}
body.wp-theme-slingo-arcade p,
body.wp-theme-slingo-arcade input,
body.wp-theme-slingo-arcade li,
body.wp-theme-slingo-arcade .main-foot a {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.25;
}
body.wp-theme-slingo-arcade {
  /* Headings */
}
body.wp-theme-slingo-arcade h1 {
  font-family: var(--font-heading);
  font-size: var(--h1-size);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
body.wp-theme-slingo-arcade h2 {
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  line-height: 1;
}
body.wp-theme-slingo-arcade h3 {
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  line-height: 1;
}
body.wp-theme-slingo-arcade h4 {
  font-family: var(--font-subheading);
  font-size: var(--h4-size);
  line-height: 1.25;
}
body.wp-theme-slingo-arcade h5 {
  font-family: var(--font-body);
  font-size: var(--h5-size);
  line-height: 1.25;
}
body.wp-theme-slingo-arcade h6,
body.wp-theme-slingo-arcade button,
body.wp-theme-slingo-arcade header a {
  font-family: var(--font-subheading);
  font-size: var(--h5-size);
  line-height: 1.25;
}

/* ==========================
   Slingo Casino Site Fonts
========================== */
body.wp-theme-slingo-casino {
  font-family: var(--font-body);
  /* Body text */
}
body.wp-theme-slingo-casino body,
body.wp-theme-slingo-casino p,
body.wp-theme-slingo-casino li {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.25;
}
body.wp-theme-slingo-casino a {
  font-family: var(--font-body);
  font-size: var(--link-size);
  line-height: 1.25;
}
body.wp-theme-slingo-casino {
  /* Headings */
}
body.wp-theme-slingo-casino h1 {
  vertical-align: text-top;
  font-family: var(--font-heading);
  font-size: var(--h1-size);
  text-transform: uppercase;
  line-height: 1;
}
body.wp-theme-slingo-casino h2 {
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  line-height: 1;
}
body.wp-theme-slingo-casino h3 {
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  line-height: 1;
}
body.wp-theme-slingo-casino h4 {
  font-family: var(--font-subheading);
  font-size: var(--h4-size);
  line-height: 1.25;
}
body.wp-theme-slingo-casino h5 {
  font-family: var(--font-body);
  font-size: var(--h5-size);
  line-height: 1.25;
}
body.wp-theme-slingo-casino h6,
body.wp-theme-slingo-casino button,
body.wp-theme-slingo-casino header a {
  font-family: var(--font-subheading);
  font-size: var(--h5-size);
  line-height: 1.25;
}

/*
Root Font Size
***********
*/
html {
  font-size: 16px;
}

/*
Line Heights
**************
*/
/*
Font Weights
**************
*/
/*
Font Sizes per site using CSS variables
**************
*/
body.wp-theme-blastworks-inc {
  --h1-size: clamp(2rem, 5.2vw, 5.2rem);
  --h2-size: clamp(1.4rem, 3.6vw, 3.6rem);
  --h3-size: clamp(1.3rem, 2.6vw, 2.4rem);
  --h4-size: clamp(1.2rem, 1.6vw, 1.6rem);
  --h5-size: clamp(1rem, 1.4vw, 1.4rem);
  --body-size: clamp(0.9rem, 1.25vw, 1.25rem);
  --link-size: clamp(1rem, 1.4vw, 1.4rem);
}

body.wp-theme-slingo-arcade {
  --h1-size: clamp(2.4rem, 8vw, 8rem);
  --h2-size: clamp(1.8rem, 4vw, 4rem);
  --h3-size: clamp(1.5rem, 3vw, 3rem);
  --h4-size: clamp(1.3rem, 2vw, 2rem);
  --h5-size: clamp(1.1rem, 1.6vw, 1.6rem);
  --body-size: clamp(0.9rem, 1.25vw, 1.25rem);
  --link-size: clamp(1rem, 1.4vw, 1.4rem);
}

body.wp-theme-slingo-casino {
  --h1-size: clamp(2.6rem, 8.4vw, 8.4rem);
  --h2-size: clamp(2.2rem, 4vw, 4rem);
  --h3-size: clamp(1.5rem, 3vw, 3rem);
  --h4-size: clamp(1.5rem, 2vw, 2rem);
  --h5-size: clamp(1.1rem, 1.6vw, 1.6rem);
  --body-size: clamp(0.9rem, 1.25vw, 1.25rem);
  --link-size: clamp(1rem, 1.4vw, 1.4rem);
}

/* =====================================
   Global typography rules
===================================== */
.nav-container {
  margin: 0 auto;
  padding: 0;
  width: calc(100% - 40px);
}
@media (min-width: 768px) {
  .nav-container {
    width: calc(100% - 60px);
  }
}
@media (min-width: 1024px) {
  .nav-container {
    width: calc(100% - 80px);
  }
}
@media (min-width: 1352px) {
  .nav-container {
    width: calc(100% - 120px);
  }
}
@media (min-width: 1920px) {
  .nav-container {
    width: calc(100% - 200px);
  }
}

/*
Image
**************
*/
.imgWrap {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}
@media (min-width: 1024px) {
  .imgWrap {
    border-radius: 20px;
  }
}
.imgWrap img,
.imgWrap iframe,
.imgWrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
Button
**************
*/
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  font-family: "avenirnextbold", sans-serif;
  cursor: pointer;
  position: relative;
  z-index: 0;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  border-radius: 999999px;
  height: 40px;
  min-width: min-content;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .button {
    padding: 0 30px;
  }
}
.button {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
  .button {
    gap: 0.5rem;
  }
}
@media (min-width: 1352px) {
  .button {
    height: 50px;
    padding: 0 40px;
  }
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.button:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35), 0 6px 15px rgba(0, 0, 0, 0.25);
}
.button:hover::before {
  transform: translateX(120%);
}
.button:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
.website-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  font-family: "avenirnextbold", sans-serif;
  cursor: pointer;
  position: relative;
  z-index: 0;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: all ease 0.3s;
  border-radius: 999999px;
  height: auto;
  min-width: min-content;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  font-size: var(--link-size) !important;
  line-height: 1 !important;
}
@media (min-width: 1024px) {
  .website-button {
    gap: 0.75rem;
  }
}
.website-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.website-button:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35), 0 6px 15px rgba(0, 0, 0, 0.25);
}
.website-button:hover::before {
  transform: translateX(120%);
}
.website-button:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
.website-button--blastworks .logo-wrap, .website-button--arcade .logo-wrap, .website-button--casino .logo-wrap {
  border-radius: 999999px;
  padding: 5px;
  background: white;
}
.website-button--blastworks .logo-wrap img, .website-button--arcade .logo-wrap img, .website-button--casino .logo-wrap img {
  width: 25px;
  height: 25px;
}
@media (min-width: 1352px) {
  .website-button--blastworks .logo-wrap img, .website-button--arcade .logo-wrap img, .website-button--casino .logo-wrap img {
    width: 30px;
    height: 30px;
  }
}
.website-button--blastworks {
  background: linear-gradient(180deg, rgb(213, 29, 40) 0%, rgb(255, 56, 56) 100%);
  font-family: "avenirnextbold", sans-serif !important;
  line-height: 1 !important;
}
.website-button--blastworks:hover {
  box-shadow: 0 5px 5px 1px rgba(204, 51, 51, 0.5);
}
.website-button--arcade {
  background: linear-gradient(180deg, rgb(0, 117, 221) 0%, rgb(60, 163, 255) 100%);
  font-family: "avenirnextbold", sans-serif !important;
  line-height: 1 !important;
}
.website-button--arcade:hover {
  box-shadow: 0 5px 5px 1px rgba(28, 151, 254, 0.5);
}
.website-button--casino {
  background: linear-gradient(180deg, rgb(255, 186, 30) 0%, rgb(223, 146, 58) 100%);
  font-family: "avenirnextbold", sans-serif !important;
  line-height: 1 !important;
  color: var(--dark-purple);
}
.website-button--casino:hover {
  box-shadow: 0 5px 5px 1px rgba(255, 186, 30, 0.5);
}

/*
Reset CSS
***********
*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
body {
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

ol,
ul {
  list-style: none;
  padding: 0;
}

button,
a {
  cursor: pointer;
}

#root,
#__next {
  isolation: isolate;
}

.wp-theme-blastworks-inc header {
  background: #000000 !important;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: var(--primary);
}
header .navWrap {
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  header .navWrap {
    padding: 15px 0;
    gap: 2rem;
  }
}
header .navWrap .custom-logo,
header .navWrap .custom-logo-link {
  position: relative;
  z-index: 5;
  width: auto;
  height: 40px;
}
@media (min-width: 768px) {
  header .navWrap .custom-logo,
  header .navWrap .custom-logo-link {
    width: auto;
    height: 70px;
  }
}
@media (min-width: 1024px) {
  header .navWrap .custom-logo,
  header .navWrap .custom-logo-link {
    order: 2;
    height: 50px;
    margin-right: auto;
  }
}
@media (min-width: 1352px) {
  header .navWrap .custom-logo,
  header .navWrap .custom-logo-link {
    height: 50px;
  }
}
@media (min-width: 1024px) {
  header .navWrap .menuToggle {
    order: 1;
  }
}
header .navWrap .menuToggle .hamburger {
  appearance: none;
  border: 0;
  background: none;
  outline: none;
  cursor: pointer;
  position: relative;
  width: 36px;
  height: 32px;
  z-index: 6;
}
header .navWrap .menuToggle .hamburger:before, header .navWrap .menuToggle .hamburger:after {
  border-radius: 999999px;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: white;
  transition: 0.4s ease;
}
header .navWrap .menuToggle .hamburger:before {
  top: 8px;
}
header .navWrap .menuToggle .hamburger:after {
  bottom: 8px;
}
header .navWrap .menuToggle .hamburger.is-active:before {
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
}
header .navWrap .menuToggle .hamburger.is-active:after {
  bottom: 50%;
  transform: rotate(-45deg) translateY(50%);
}
header .navWrap .buttons {
  display: none;
}
@media (min-width: 1024px) {
  header .navWrap .buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    order: 3;
  }
}
header .navMenu {
  background: rgba(0, 0, 0, 0.85);
  border-bottom: 4px solid var(--primary);
  backdrop-filter: blur(10px);
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 25px 20px 0 20px;
  top: 70px;
  min-height: calc(100vh - 70px);
  position: relative;
  width: 100%;
  left: -100%;
  z-index: 1;
  position: fixed;
}
@media (min-width: 768px) {
  header .navMenu {
    top: 100px;
    min-height: calc(100vh - 100px);
    padding: 25px 30px 0 30px;
  }
}
@media (min-width: 1024px) {
  header .navMenu {
    top: 80px;
    padding: 50px 40px 50px 40px;
    min-height: auto;
    flex-direction: row;
    justify-content: space-between;
  }
}
@media (min-width: 1352px) {
  header .navMenu {
    padding: 50px 60px 50px 60px;
  }
}
@media (min-width: 1920px) {
  header .navMenu {
    padding: 50px 100px 50px 100px;
  }
}
header .navMenu .buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  header .navMenu .buttons {
    display: none;
  }
}
header .navMenu nav .main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style-type: none;
}
@media (min-width: 1024px) {
  header .navMenu nav .main {
    gap: 1.5rem;
  }
}
@media (min-width: 1920px) {
  header .navMenu nav .main {
    gap: 2rem;
  }
}
header .navMenu nav .main li {
  transition: all ease 0.3s;
  text-decoration: none;
}
header .navMenu nav .main li:hover a {
  color: var(--primary);
}
header .navMenu nav .main li a {
  text-transform: uppercase;
  font-size: var(--h4-size);
  transition: all ease 0.3s;
  color: white;
}
header .navMenu nav .sub {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style-type: none;
}
@media (min-width: 1024px) {
  header .navMenu nav .sub {
    gap: 1rem;
  }
}
@media (min-width: 1352px) {
  header .navMenu nav .sub {
    gap: 1.5rem;
  }
}
header .navMenu nav .sub li {
  transition: all ease 0.3s;
  text-decoration: none;
}
header .navMenu nav .sub li:hover a {
  color: var(--primary);
}
header .navMenu nav .sub li a {
  transition: all ease 0.3s;
  color: white;
}
header .navMenu .social-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) {
  header .navMenu .social-wrap {
    width: 25%;
  }
}
@media (min-width: 1352px) {
  header .navMenu .social-wrap {
    width: auto;
  }
}
header .navMenu .social-wrap p {
  color: white;
}
header .navMenu .social-wrap .socials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  header .navMenu .social-wrap .socials {
    flex-flow: wrap;
  }
}
header .navMenu .social-wrap .socials img {
  max-width: none;
  width: auto;
  height: 45px;
}
@media (min-width: 1024px) {
  header .navMenu .social-wrap .socials img {
    height: 60px;
  }
}
header .navMenu .social-wrap .blastworks img {
  max-width: none;
  width: auto;
  height: 45px !important;
}
header .navMenu .games-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) {
  header .navMenu .games-wrap {
    gap: 1.5rem;
    width: 35%;
  }
}
header .navMenu .games-wrap p {
  color: white;
}
header .navMenu .games-wrap .games {
  display: flex;
  align-items: center;
  gap: 1rem;
}
header .navMenu .games-wrap .games .imgWrap {
  transition: all ease 0.3s;
  aspect-ratio: 1/1;
  border-radius: 10px;
}
@media (min-width: 1024px) {
  header .navMenu .games-wrap .games .imgWrap {
    max-width: 25%;
  }
}
header .navMenu .games-wrap .games .coming_soon {
  position: relative;
}
header .navMenu .games-wrap .games .coming_soon::after {
  content: "Coming Soon";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--body-size);
  font-family: "avenirnextbold", sans-serif;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
header .navMenu .games-wrap .games .coming_soon:hover::after {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1024px) {
  header .navMenu .games-wrap .games .blastworks:hover {
    box-shadow: 0 0 16px 4px rgb(204, 51, 51);
  }
}
@media (min-width: 1024px) {
  header .navMenu .games-wrap .games .arcade:hover {
    box-shadow: 0 0 16px 4px rgb(28, 151, 254);
  }
}
@media (min-width: 1024px) {
  header .navMenu .games-wrap .games .casino:hover {
    box-shadow: 0 0 16px 4px rgb(217, 37, 112);
  }
}
header .navMenu.is-active {
  left: 0;
}