@font-face {
  font-family: 'Caladea';
  src: url('../fonts/caladea-italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  }
@font-face {
  font-family: 'Arya';
  font-style: normal;
  font-weight: 700;
  src: local('Arya Bold'), local('Arya-Bold'),
     url('../fonts/arya-v3-latin-700.woff2') format('woff2'),
     url('../fonts/arya-v3-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
     url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
     url('../fonts/open-sans-v15-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
     url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'),
     url('../fonts/open-sans-v15-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
     url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'),
     url('../fonts/open-sans-v15-latin-700.woff') format('woff');
}

html {
  height:100%;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

* {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;/
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

body {
  padding:0;
  background: #000;
  margin:0;
  display: flex;
  align-items:center;
  justify-content:center;
  height:100%;
  width:100%;
  font-family:"open sans";
  overflow:hidden;
  position:fixed;
}

.noscript {
  position:absolute;
  display:flex;
  text-align:center;
  z-index:9999;
  font-size:36px;
}

#area {
  flex-shrink: 0;
  background: radial-gradient(#f7eaab, #bfbb73);
  height:720px;
  width:1280px;
  font-size:30px;
  overflow:hidden;
}

#fader {
  position:absolute;
  z-index:999;
  flex-shrink: 0;
  background: radial-gradient(#f7eaab, #bfbb73);
  height:720px;
  width:1280px;
  overflow:hidden;
  transition: opacity 0.25s linear;
  pointer-events: none;
  opacity:1;
}

.notransition {
  transition: none !important;
}

#title {
  position:relative;
  font-size:135px;
  font-family:arya;
  font-weight:700;
  color:#ce181e;
  text-align:center;
  line-height:1.2;
}

#subheading {
  line-height:1.2;
  font-size:66px;
  font-family:caladea;
  font-style:italic;
  color:#948a54;
  text-align:center;
  margin-bottom:1.3em;
}

#titleSelection {
  font-size:50px;
  color:#376092;
  text-align:center;
  margin-bottom:2.5em;
}

.flexCenter {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}

#titleSlide {
  height:100%;
  background-image:url("../img/bingoRoller.svg");
  background-size: contain;
  background-repeat:no-repeat;
}

#howToUseSlide, #aboutCreditsSlide {
  display:none;
  height:100%;
  grid-template-columns:100%;
  grid-template-rows: 96px 44px 2px 1fr 77px;
  grid-template-areas: "helpHeader"
                "helpNav"
                "helpLine"
                "helpContent"
                "helpFooter";
}

#onboardingSlide {
  display:none;
  height:100%;
}

#masterBoardSlide {
  display:none;
  height:100%;
  grid-template-columns:255px 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 100%;
  grid-template-areas: "controlsCol  bCol  iCol  nCol  gCol  oCol";
}

#settingsSlide {
  display:none;
  height:100%;
  grid-template-columns:100%;
  grid-template-rows: 96px 1fr 77px;
  grid-template-areas: "helpHeader"
                      "helpContent"
                      "helpFooter";
}

#winningPatternSlide {
  display:none;
  height:100%;
  grid-template-columns:100%;
  grid-template-rows: 96px 1fr 77px;
  grid-template-areas: "helpHeader"
                      "helpContent"
                      "helpFooter";
}

h2 {
  font-size:36px;
  font-weight:300;
  text-align:center;
  margin:22px 0;
  grid-area: helpHeader;
}

.controlsCol {
  grid-area: controlsCol;
}

.bCol {
  grid-area: bCol;
}

.iCol {
  grid-area: iCol;
}

.nCol {
  grid-area: nCol;
}

.gCol {
  grid-area: gCol;
}

.oCol {
  grid-area: oCol;
}

.bingoCol {
  border-left: 2px solid rgba(0,0,0,0.31);
  position:relative;
}

.helpNav {
  grid-area: helpNav;
  font-size:0;
  width:720px;
  margin:0 auto;
  text-align:center;
}

.creditsNav {
  grid-area: helpNav;
  font-size:0;
  width:360px;
  margin:0 auto;
  text-align:center;
}

#helpNavLine, #creditsNavLine {
  border-top:3px solid black;
  width:180px;
  position:absolute;
  transition:margin-left 0.5s;
}

.helpNavText, .creditsNavText {
  height:41px;
  width:180px;
  font-size:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:color 0.15s;
}

.helpNavText:hover, .creditsNavText:hover {
  cursor:pointer;
  color:#16639a;
}

.boldHelp {
  font-weight:700;
}

.boldHelp:hover {
  color:#000;
}

.helpLine {
  grid-area: helpLine;
  border-top:2px solid #948a54;
  width:1100px;
  margin:0 auto;
}

.helpContent {
  grid-area: helpContent;
}

#howToUseBasics2, #howToUseTipsTricks, #howToUseThanks, #creditsCredits {
  display:none;
}

.helpFooter {
  grid-area: helpFooter;
  text-align:center;
}

.helpFooterLabel {
  display:inline-block;
  cursor:pointer;
  color:#376092;
  transition:color 0.15s;
  margin:0.5em 0;
}

.helpFooterLabel:hover {
  color:#4297b7;
}

.helpPointer {
  position:absolute;
  background-color: #4b63dc;
  height:3px;
  box-shadow:1px 1px 2.5px rgba(0,0,0,0.6);
  border-radius:0 3px 3px 0;
}

.textLink {
  text-decoration:underline;
  cursor:pointer;
  color:blue;
}

.textLink:active {
  color:red;
}

#howToUse, #goToMasterBoard {
  display:inline-block;
  margin: 0 0.7em;
  cursor:pointer;
  transition:color 0.15s;
}

#howToUse:hover, #goToMasterBoard:hover {
  color:#4297b7;
}

#copyright {
  text-align:center;
  margin-top:-39px;
  font-size:13.5px;
  font-family:arial;
}

#copyrightLabel {
  cursor:pointer;
  color:#000;
  transition:color 0.15s;
}

#copyrightLabel:hover {
  color:#2d6073;
}

.layer {
  position:absolute;
  width:1280px;
  height:720px;
  overflow:hidden;
  pointer-events:none;
}

#fullScreenToggleLayer {
  z-index:1000;
  display:none;
  transition: opacity 0.25s linear;
}

#drawBallLayer {
  z-index:2;
  display:none;
  transition: opacity 0.25s linear;
}

#drawBallDiv {
  position:absolute;
  top:256px;
  left:48px;
  pointer-events:auto;
  transition:0.1s;
}

#hex {
  cursor:pointer;
}

#hex polygon {
  fill: url(#gradient);
}

#hex:hover polygon {
  fill: rgba(155, 145, 90, 0.8);
}

.fullScreenToggleBig {
  position:absolute;
  pointer-events:auto;
  right:25px;
  top:15px;
}

.fullScreenToggleSmall {
  position:absolute;
  pointer-events:auto;
  right:15px;
  top:5px;
  transform:scale(0.5);
}

#fullScreenButton, #fullScreenButtonDown {
  width:30px;
  height:30px;
  background-size: contain;
  background-repeat:no-repeat;
  cursor:pointer;
}

#fullScreenButton {
  background-image:url("../img/fullscreenUp.svg");
}

#fullScreenButtonDown {
  display:none;
  background-image:url("../img/fullscreenDown.svg");
}

#fullScreenButton:hover {
  background-image:url("../img/fullscreenUpHover.svg");
}

#fullScreenButtonDown:hover {
  background-image:url("../img/fullscreenDownHover.svg");
}

#homeButton {
  width:30px;
  height:30px;
  background-size: contain;
  background-repeat:no-repeat;
  cursor:pointer;
  transform:scale(0.5);
  background-image:url("../img/homeButton.svg");
  display:none;
}

#homeButton:hover {
  background-image:url("../img/homeButtonHover.svg");
}

.homeButtonLabel {
  position:absolute;
  pointer-events:auto;
  right:50px;
  top:5px;
}

.smallMargin {
margin:0.5em 0;
}

.bingoLetter {
  font-family:arya;
  font-weight:700;
  color:#ce181e;
  font-size:110px;
  text-align:center;
  line-height:0.8;
  left:50%;
  transform: translateX(-50%);
  margin:41px auto 13px auto;
  overflow:hidden;
  z-index:2;
  position:absolute;
}

.bingoLetter:hover {
  cursor:pointer;
  color:#e24e53;
}

.bingoLetterGray {
  color:#969696;
}

.bingoLetterGray:hover {
  color:#808080;
}

#blocker {
  position:relative;
  width:1280px;
  height:720px;
  margin-top:-720px;
  background-image: linear-gradient(#c4bd97, #948A54);
  z-index:1;
  left:1287px;
  box-shadow: 5px 0 7px 7px rgba(0,0,0,0.6);
  transition: left 0.5s, opacity 0.3s;
}

.boardToggle {
  width:115px;
  height:26px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:14.5px;
  margin: 26px auto 0 auto;
  cursor:pointer;
  border-radius: 12px 0 12px 0;
  transition:background-color 0.15s;
}

#hideBoard {
  background-color:rgba(75,172,198,0.3);
  border: 1px solid rgba(49,133,156,0.65);
}

#hideBoard:hover {
  background-color:rgba(75,172,198,0.5);
}

#showBoard {
  background-color:rgba(192,80,77,0.3);
  border: 1px solid rgba(192,80,77,0.65);
}

#showBoard:hover {
  background-color:rgba(192,80,77,0.5);
}

.smallButton {
  font-size:13px;
  font-family:arial,sans-serif;
  cursor:pointer;
  padding: 3px 6px;
  border-radius:6px;
  transition:background-color 0.15s;
  margin-right:14px;
}

#reset:hover {
  background-color:rgba(255,0,0,0.25);
}

#reset:active {
  background-color:rgba(255,0,0,0.5);
}

#themes:hover {
  background-color:rgba(80,80,80,0.25);
}

.bigBingoBallClass {
  background:#9b9b9b;
  border:2.5px solid #333;
  opacity:0.21;
}

#bigBingoBall {
  border-radius:50%;
  width:186px;
  height:186px;
  margin:0 auto;
  margin-top:135px;
  cursor:pointer;
}

.bigBingoBallClass:hover {
  opacity:0.35;
}

#bigBingoLetter {
  font-size:62px;
  font-weight:700;
  text-align:center;
  width:60px;
  margin:0 auto;
  line-height:1;
  margin-top:12px;
}

#bigBingoNumber {
  font-size:95px;
  font-weight:700;
  text-align:center;
  width:110px;
  height:110px;
  margin:-14px auto 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:font-size 0.1s;
}

#ballsDrawnRemaining {
  width:193px;
  height:44px;
  font-size:25px;
  background:rgba(179,162,199,0.67);
  border:1.2px solid rgba(74,126,187,0.85);
  border-radius:12px;
  margin:9px auto 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
}

#ballsDrawn {
  display:none;
  align-items:center;
  justify-content:center;
}

#ballsRemaining {
  display:none;
  align-items:center;
  justify-content:center;
}

#bingoB, #bingoI, #bingoN, #bingoG, #bingoO {
  margin-top:-10px;
}

.bingoBalls {
  text-align:center;
  margin-top:132px;
  transition:opacity 0.3s;
}

.bingoBallBall {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  width:61px;
  height:61px;
  background:#9b9b9b;
  margin:4px 10px;
  font-size:38px;
  cursor:pointer;
  border-style: solid;
  border-width: 1px;
  border-color:#333;
  color:#000;
  opacity:0.21;
}

.bingoBallBall:hover {
  opacity:0.54;
}

.bingoBallBallActiveB {
  border-color:rgb(228,108,10);
  color:#6b3205;
  opacity:1;
font-weight:700;
  background:radial-gradient(circle at 31.5px 12px, rgba(247, 182, 128,0.85), rgba(228,108,10,0.85));
}

.bingoBallBallActiveI {
  border-color:rgb(119,147,60);
  color:#3e4f1f;
  opacity:1;
  font-weight:700;
  background:radial-gradient(circle at 31.5px 12px, rgba(176, 204, 120,0.85), rgba(135, 170, 63,0.85));
}

.bingoBallBallActiveN {
  border-color:rgb(49,133,156);
  color:#194551;
  opacity:1;
  font-weight:700;
  background:radial-gradient(circle at 31.5px 12px, rgba(108, 201, 226,0.85), rgba(84, 165, 188,0.85));
}

.bingoBallBallActiveG {
  border-color:rgb(96,74,123);
  color:#352944;
  opacity:1;
  font-weight:700;
  background:radial-gradient(circle at 31.5px 12px, rgba(195, 164, 234,0.85), rgba(159, 129, 193,0.85));
}

.bingoBallBallActiveO {
  border-color:rgb(149,55,53);
  color:#5e2221;
  opacity:1;
  font-weight:700;
  background:radial-gradient(circle at 31.5px 12px, rgba(255, 138, 135,0.85), rgba(221, 98, 95,0.85));
}

.bingoBallBallActiveB:hover, .bingoBallBallActiveI:hover, .bingoBallBallActiveN:hover, .bingoBallBallActiveG:hover, .bingoBallBallActiveO:hover {
  opacity:0.8;
}

.bingoBallVintage {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:61px;
  height:61px;
color:gray;
  margin:4.5px 10px;
  font-size:52px;
  cursor:pointer;
  color:#000;
  opacity:0.17;
}

.bingoBallVintage:hover {
  opacity:0.54;
}

.bingoBallVintageActive {
  opacity:1;
  font-weight:700;
}

.bingoBallVintageActive:hover {
  opacity:0.75;
}

.bigBingoBallVintage {
  opacity:1;
  font-weight:700;
  background:rgba(155, 155, 155,0.5);
}

.bigBingoBallVintage:hover {
  opacity:0.75;
}

#bingoStyleBall {
  border-radius:12px;
  transition: background-color 0.15s;
  cursor:pointer;
}

#bingoStyleBall:hover {
  background-color:rgba(0,0,0,0.05);
}

#bingoStyleBall:hover .bingoBallBall {
  opacity:1;
}

#bingoStyleVintage {
  border-radius:12px;
  transition: background-color 0.15s;
  cursor:pointer;
}

#bingoStyleVintage:hover {
  background-color:rgba(0,0,0,0.05);
}

#bingoStyleVintage:hover .bingoBallVintage {
  opacity:1;
}

.themeSelection {
  font-size:38px;
  font-weight:700;
}

.themeSelection span {
    margin: 0 24px;
}

.themeSelection span:first-of-type {
    margin-left: 0;
}

.themeSelection span:last-of-type {
    margin-right: 0;
}

.themeColor {
  padding:3px 12px;
  border-radius:12px;
  transition: background-color 0.15s;
  cursor:pointer;
}

.themeColor:hover {
  background-color:rgba(0,0,0,0.05);
}

#classic {
  color:rgb(148,138,84);
}

#red {
  color:rgb(255,0,0);
}

#green {
  color:rgb(0,128,0);
}

#blue {
  color:rgb(51,102,255);
}

#purple {
  color:rgb(164,70,153);
}

.chromeBingoLetterFix {
  transform:translateX(-50%) translateZ(0);
}

.winningPatternDiv {
  width:90%;
  height:201px;
  background:rgba(0,0,0,0);
  margin:0 auto;
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.bingoCard {
  display:grid;
  height:180px;
  width:150px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  border:1px solid #7f7f7f;
}

.bingoCard:hover {
  cursor:pointer;
  opacity:0.75;
}

.bigBingoCard {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  border:1px solid #7f7f7f;
  height:420px;
  width:350px;
  font-size:70px;
  box-shadow:4px 4px 12px #777;
  margin-right:40px;
}

.bingoCardBody {
  background-color:#f2f2f2;
  border:1px solid #7f7f7f;
}

.bingoCardHeader {
  background:#e1cdac;
  border:1px solid #7f7f7f;
  text-align:center;
  font-size:80%;
  line-height:0.6;
  font-family:arya;
  color:#ce181e;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.winningPatternNames {
  width:600px;
  height:380px;
  font-size:27px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

.winningPatternNames div {
  display:flex;
  align-items:center;
  justify-content:center;
}

.cardExplanation {
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-style:italic;
}

.winningName, .bigBingoCardBody {
  transition: color 0.15s, background-color 0.2s;
}

.winningName:hover {
  cursor:pointer;
  color:#16639a;
}

.bigBingoCardBody:hover {
  cursor:pointer;
  background-color:#ddd;
}

.bingoCardActive, .bingoCardActive2 {
  background-color:#e83b29;
}

.bingoCardActive:hover {
  background-color:#f14b3a;
}

.twoSections {
  width:1000px;
  height:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
}