.skip-link {
                    background: #ca7c3c;
                    color: white;
                    font-weight: 700;
                    left: 50%;
                    padding: 5px 10px;
                    position: absolute;
                    transform: translateY(-500%);
                    transition: transform 0.3s;
                    z-index: 999;
                }
                a.skip-link:focus {
                    transform: translateY(00%);
                }#navbar_wrap #nav_main li a {font-family: 'Oswald';text-transform: uppercase;}#navbar_wrap #nav_main li a { color: #fff;}#navbar_wrap #nav_main li.active a { border-color: #fff;}#navbar_wrap.bgnav #nav_main li a {color: #fff;}#navbar_wrap.bgnav #nav_main li.active a {border-color: #fff;}#header-main.mobile-open #nav_main a {color: #fff;}#nav-main-toggle > .icon-bar { background-color: #000000;}#navbar_wrap #nav_main li:hover a { color: #c1c1c1; border-color: #c1c1c1;}#navbar_wrap #nav_main li.active:hover a { border-color: #c1c1c1;}#navbar_wrap.bgnav { background: #000000; background: rgba(0, 0, 0, 0.95);}#header-main.mobile-open .nav-bar, #header-main.mobile-open #nav-main-controls { background: #000000; background: rgba(0, 0, 0, 0.95);}#navbar_wrap.bgnav #nav_main li:hover a {color: #c1c1c1; border-color: #c1c1c1;}#navbar_wrap.bgnav #nav_main li.active:hover a {border-color: #c1c1c1;}.home-home-35672 .layout-3-bg-img-color{background-image: url('https://www.unoapp.com/app/source/resources/webbuilder/structure/3/home/layout_3.jpg');}.home-home-35672 .layout-3-logo-section{background-image: url('../source/images/logoplaceholder.png');}.home-home-35672 .layout-3-arrow-color{color:#fff;}@media only screen and (min-width: 1600px) { .home-home-35672 .layout-3-logo-padding{padding-top:495px !important;}}@media only screen and (max-width: 1600px) { .home-home-35672 .layout-3-logo-padding{padding-top:395px !important;}}.home-home-35681 .layout-3-bg-img-color{background-image: url('https://www.unoapp.com/app/source/resources/webbuilder/structure/3/home/layout_3.jpg');}.home-home-35681 .layout-3-logo-section{background-image: url('../source/images/logoplaceholder.png');}.home-home-35681 .layout-3-arrow-color{color:#fff;}@media only screen and (min-width: 1600px) { .home-home-35681 .layout-3-logo-padding{padding-top:495px !important;}}@media only screen and (max-width: 1600px) { .home-home-35681 .layout-3-logo-padding{padding-top:395px !important;}}.layout-3-footer-sub{background-color:rgb(60, 68, 72);}.layout-3-footer-bg{background-color:rgb(47, 55, 59);}/* === FONT LINKS === */
/* Add the @import/@font-face info here, but remember to ALSO embed the <link> option into the Header Script area. */
@font-face {
  font-family:'Open Sans Condensed';
  src: url('https://dmbdemo.com/shared/fonts/OpenSans/OpenSansCondensed-ExtraBold.woff'), url('https://dmbdemo.com/shared/fonts/OpenSans/OpenSansCondensed-ExtraBold.woff2');
}

/* === ROOT SYSTEM === */
/* (Change your colours and fonts under this section) */
:root {
  --brand01: #8DC63F;
  --brand02: #00964C;
  --brand03: #DDF2C2;
  --brand04: #C4F1D3;


  --text-primary: #ffffff; /* Main Body Text Colour */
  --text-secondary: #f1f1f1; /* Alternative Body Text Colour */
  --text-brand: var(--brand01); /* Main Brand Text Colour */
  --text-brand-2: var(--brand02); /* Secondary Brand Text Colour */
  --text-cta-btn: #000000; /* Text Colour for the CTA Button */

  --border-primary: var(--brand01);

  --surface-primary: #000000; /* Primarily the main background */
  --surface-secondary: #1A1A1A; /* Primarily the alternative background */
  --surface-brand: var(--brand01); /* Main Brand Colour */
  --surface-brand-2: var(--brand02); /* Second Brand Colour */
  --surface-legal: rgba(0,0,0,0.6);

  --font-title: 'Open Sans Condensed', sans-serif;
  --font-subtitle: 'Open Sans Condensed', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  
}

/* === GENERAL SETTINGS === */
body {background: var(--surface-primary);}

/* === FONT SETTINGS === */
body, html, p, a, b, i, u, em {font-family: var(--font-body) !important; line-height: 1.3;}
h1, h2, h3, h4, h5, h6 .element-btn {font-family: var(--font-title) !important; font-weight: 800; margin: 0; line-height: 1.3; color:var(--text-brand);}
*, html, body {font-size: 16px; margin: 0;}
h1 {font-size: 45px;}
h2 {font-size: 45px;}
h3 {font-size: 36px;}
h4 {font-size: 32px;}
p {color: var(--text-primary);}
a:hover {opacity: 0.8;}

sup {font-size: inherit !important;}
@media screen and (max-width: 460px) {
  h1 {font-size: 40px; padding: 0;}
}

/* === GLOBAL SECTIONS SETTINGS === */
/* Background on all sections */
div.widget-section {background: var(--surface-primary) !important;}

/* Padding settings */
.hero {padding: 0 !important;}
.main-container {
  max-width:1200px;
  padding: 32px 0px;
  margin:0 auto;
}
@media screen and (max-width: 768px) {
  .main-container {padding: 16px;}
}
@media screen and (max-width: 400px) {
  .main-container {padding: 8px 16px !important;}
}

/* === GLOBAL BUTTONS === */
.button {
  padding: 16px 48px;
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
  letter-spacing: -1px;
  border-radius: 64px;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-title);
  display: inline-block;
}
.main-btn {
  background: var(--surface-brand);
  color: var(--text-cta-btn);
  text-transform: uppercase;
}
.secondary-btn {
  border: 1px solid var(--surface-brand);
  background: rgba(2555,255,255,0.3);
  color: var(--text-brand);
}
.tertiary-btn {
  text-decoration: none;
  font-weight: normal;
  font-family: var(--font-body);
  color: var(--text-brand);
  padding-bottom: 2px;
  background: transparent;
}
.main-btn:hover {
  opacity: 0.8;
  color: var(--text-cta-btn);
  box-shadow: 0 0 10px var(--surface-brand);
}
.secondary-btn:hover {
  opacity: 0.8;
  color: var(--text-primary);
  box-shadow: 0 0 10px var(--surface-brand);
}
.tertiary-btn:hover {text-decoration: underline;}

/* When a button is disabled, add this class to the button */
.disabled-btn {
  background: #636363 !important;
  color: #484848 !important;
}
/* AODA: NOTICEABLE OUTLINE FOR KEYBOARD FOCUS */
a:focus,a:active,button:focus,button:active,.btn.active.focus, .btn.active:focus,.btn.focus,.btn:active.focus, .btn:active:focus,.btn:focus { outline: 1px solid #000000; box-shadow: none;}

@media screen and (max-width: 830px) {
  .mobile-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: var(--surface-primary);
  }
  .mobile-btn .button {width: 100%;}
}

/* === SECTION TITLES === */
.section-title {
  margin: 0 auto 16px;
  text-align: center;
}
.section-title p {
  margin-top: 48px;
}
.section-title img {
  max-width: 400px;
}
@media screen and (max-width: 400px) {
  .section-title img { max-width: 100%;}
}

/* === V2 DEFAULT SETTINGS === */
/* Social Media, Footer */
#header_wrap, #header_wrap #social, #soc_med_bar, .footer, #navbar_wrap {
  display: none !important;
}

/* Skip to Main Content (Do not delete) */
.skip {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hide Sections */
#tips, #faq {display: none !important;}

/* ========================================== */
/* ========== END OF GLOBAL STYLES ========== */
/* ========================================== */

/* ==== CSS FOR INDIVIDUAL SECTIONS STARTS HERE === */

/* ==== HERO SECTION (#hero) === */
#hero {position: relative; z-index: 9 !important;}
/* Logo at the top of the page */
.logo-header {
  padding: 1em 0 !important; 
/*  background: linear-gradient(180deg, #54565A 6.77%, #000 68.75%, #000 98.95%, #000 98.96%)!important;*/
}
.logo-header img {
  display: block;
  margin: 0 auto; 
  height: 56px;
}
/* hero content */
.hero-content p {
  font-size: 1.50em;
}
.hero-content b, em {
  font-size: inherit;
}
.hero-content {
  display: flex;
  max-width: 1200px;
  margin:0 auto;
  align-items: center;
  justify-content: center;
}
.hero-group:nth-child(2) {
  width: 448px;
  display: flex;
  gap: 24px;
  flex-direction: column;
}
.hero_img {max-width: 420px;}
@media screen and (min-width: 1024px) {
  .hero-content {gap: 148px;}
}
@media screen and (max-width: 1024px) {
  .hero-content {gap: 0; justify-content: space-around;}
}
@media screen and (max-width: 830px) {
  #hero {
    position: relative;
    z-index: 9 !important;
  }
  .hero-content {
    flex-direction: column;
    padding: 0 16px 40px !important;
    height: fit-content;
    gap: 4px;
    text-align: center;
  }
  .hero_img {max-width: 80%;}
  .hero-group:nth-child(2) {width: 100%;}
}


/* ==== HTP SECTION (#how-to-play) === */
.how-to-play .table-group {
    max-width: 1024px;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 16px;
    display: grid;
    margin: 0 auto;
}

.table-cell {
  background: var(--surface-secondary);
  padding: 8px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .how-to-play .table-group {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8px;
  }
  .table-cell {
    padding: 8px 8px 16px;
  }
}   

/* --- SVG Icons CSS --- */
.htp-icons {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: 120px;
    height: auto;
}
.htp-icons path {
    fill: var(--surface-brand); /* Change the colour of the icon */
}
.icon-drink {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;  
}
#can-logo {
    width: 24px; /*Change the width of the logo that's inside the can*/
    position: absolute;
}

/* === TIPS SECTION (#tips) === */
.tips_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap:0px;
 }
.tips_item {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.icon_tips{
  display: block;
  margin-right: -32px;
  width: 124px;
  min-width: 124px;
  max-width: 124px;
}
.icon_tips path {
  stroke: var(--surface-brand);
  fill: var(--surface-primary);
}
.basictips-container h2 {
  margin: 0 auto;
  text-align: center;
}
.tips_item p {
  margin: 0;
}
.tips_item .btn-group {
  padding:0; 
  margin:0;
  justify-content: right;
}
@media screen and (max-width: 768px) {
.tips_box {
  grid-template-columns: repeat(1, 1fr);
}
.tips_item {padding: 8px 0;}
.tips_item .btn-group {align-items: end;}
.tips_item .tertiary-btn {width: fit-content !important;}
}

/* === FAQ SECTION (#faq) === */
.faq {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.faq > div {margin-bottom: 16px;}
.faq h3 {
    font-size: 30px;
    color: var(--text-brand);
}
.faq-ask {
    cursor: pointer;
    transition: 0.4s;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-primary);
}
.faq-ask:hover {
    background: rgba(51,51,51,0.1);
}
.fa-plus::before {
  content: "\f067";
}
.fa {
    font-family: 'FontAwesome' !important;
    font-size: 14px;
    padding-left: 16px;
    font-style: normal;
}
.faq-ask.active .fa-plus {
    display: none;
}
.faq-ask:not(.active) .fa-minus {
    display: none;
}
.faq-desc {
    margin: 8px auto;
    padding: 32px;
    background-color: var(--surface-primary);
    border-radius: 8px;
    border: 1px solid var(--surface-brand);
    display: none;
    overflow: hidden;
    font-weight: 300;
}
@media screen and (max-width:400px) {
  .faq h3 {font-size: 1.25rem;}
}

/* === SOCIAL MEDIA SECTION (#socials) === */
/* --- Social Icons CSS --- */
.sm-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 170px;
  margin-top: 16px;
}
@media screen and (max-width: 756px) {
  .sm-container {gap: 8px;}
}
.sm-container svg path {
  fill: var(--text-brand); /* Change the icon color itself */
} 
.social-btn {
  background: var(--surface-primary); /* Change the icon background color */
  padding: 8px; /* Adjust the padding of the circle - so the higher the padding, the bigger the circle will be. Icon remains the same size */
  border-radius: 64px;
  display: flex;
  align-items: center;
}
.social-btn svg {
  width: 64px; /* Adjust the icon itself */
  height: auto;
}
/* --- End of Social Icons CSS --- */
@media screen and (max-width: 460px) {
  .social-btn svg {
    width: 56px;
  }
}
/* === DISCLAIMER / LEGAL SECTION (#disclaimer) === */
#disclaimer div.widget-section {
    background: url('https://images.unoapp.com/boxdata/asset88139/images/bg-disclaimer.png') !important;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: cover !important;
    background-position: 50% !important;
}
.legal-copy h2 {display: none;}
.legal-copy {
  max-width: 1024px; 
  margin: 0 auto; 
  background: var(--surface-legal);
  padding: 8px;
}
.legal-copy p {
  font-size: 0.75rem;
  line-height: 20px;
}
.legal-copy a {
  font-size: inherit;
  color: var(--text-brand);
  text-decoration: underline;
}

@media screen and (max-width: 460px) {
	.legal-copy p {text-align: center;}
}

/* === CUSTOM FOOTER (#faux-footer) === */
.footer-section-content {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.footer-btn-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.footer-btn-group > * + * {margin: 0 16px;}
.footer-btn-group a:hover {opacity: 0.8;}
.footer-links {margin-top: 48px;}

/* ---Legal Links CSS --- */
.legal-btn {
  text-decoration: none; 
  color: var(--text-primary);
  padding: 4px 8px;
}
.legal-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.1);
}
.section-title p {font-size: 1.25em;}
.section-title a {color: var(--text-brand); font-size: inherit;}
@media screen and (max-width: 540px) {
  .footer-section-content {
      padding-bottom: 150px;
  }
  .legal-btn{ width: 100%; text-align: center;
  }
  .footer-btn-group {align-items: center; text-align: center;}
/* --- End of Legal Links --- */
.home-home-35672 .content-social h1, .home-home-35672 .headline h1 {font-family: 'Oswald'; font-size: 32px; color: #fff; margin: 0px;font-weight: normal;}.home-home-35672 .content-social h2, .home-home-35672 .headline h2 {font-family: 'Oswald'; font-size: 24px; color: #fff; margin: 0px;font-weight: normal;}.home-home-35681 .content-social h1, .home-home-35681 .headline h1 {font-family: 'Oswald'; font-size: 32px; color: #fff; margin: 0px;font-weight: normal;}.home-home-35681 .content-social h2, .home-home-35681 .headline h2 {font-family: 'Oswald'; font-size: 24px; color: #fff; margin: 0px;font-weight: normal;}