@media (min-width: 768px){
	.bingoInfo {
		width: 830px;
		padding: 20px 15px;
	}

	.bingoBoard {
		border-radius: 20px;
		width: 830px;
		padding: 20px 15px;
		background-color: #BE1E2D;
		color: #fff;
		margin-bottom: 20px;
	}
	.bingoBoard a {
		cursor: pointer;
	}
	.upperTitle {
		color: #fff;
		margin-bottom: 0;
	}

	.bingoRow {
		display: table;
		width: 750px;
		min-width: 750px;
		margin-bottom: 10px;
	}

	.bingoHeader li span {
		display: block;
		font-family: "ProximaNova-Semibold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		font-size: 50px;
		text-align: center;
		width: 150px;
		height: 60px;
		line-height: 80px;
		padding: 0 11px;
	}

	.bingoSquare {
		display: table-cell !important;
		vertical-align: middle;
		height: 0;
		padding-right: 5px;
		padding-left: 5px;
	}

	.bingoSquare a {
		border: 1px solid #666;
		background-color: #fff;
		color: #333;
		font-weight: bold;
		width: 150px;
		height: 150px;
		text-align: center;
		text-decoration: none;
		line-height: 20px;
		display: block;
		padding: 65px 6px 0 6px;
	}

	.freeSpace a {
		background-color: #ffcf0c;
		color: #333;
	}

	.bingoSquare a span, .bingoLetter {
		display:inline;
		vertical-align:middle;
		line-height: 20px;
		margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
	}

	.bingoSquare a.selected {
		text-decoration: none;
		background-color: #ffcf0c;
		color: #333;
	}

	.bingoSquare a:active {
		background-color: #333;
		color: #fff;
	}
	ul.bingoRow li {
		list-style-type: none;
		margin-left: -5px;
	}
}

@media (max-width: 767px){
	
	/* The Bingo Board
	-------------------------*/
	
	.bingoBoard {
		border-radius: 20px;
	    width: 90%;
	    padding: 2% 5% 5% 5%;
	    background-color: #BE1E2D;
	    color: #fff;
	    max-width: 600px;
	    margin: 0 auto 20px auto;
	    transition: all 0.4s ease;
	}

	.upperTitle {
		color: #fff;
		letter-spacing: 1px;
		margin-bottom: 0;
	}

	.bingoRow {
		display: table;
		width: 100%;
		margin-bottom: 0px;
	}

	.bingoHeader li span {
		display: block;
		font-family: "ProximaNova-Semibold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		font-size: 3rem;
		text-align: center;
		line-height: 50px;
	}

	.bingoSquare {
		display: table-cell !important;
		vertical-align: middle;
		width: 20%;
	}

	.bingoSquare a {
		border: 5px solid #BE1E2D;
	    color: #333;
	    font-weight: bold;
	    font-size: 3rem;
	    text-align: center;
	    text-decoration: none;
	    display: block;
	    padding: 0;
	    line-height: 70px;
	    vertical-align: middle;
	    background: #fff;
	    cursor: pointer;
	}

	/* not sure what this is for .freeSpace a {
		font-size: 18px;
		background-color: #ffcf0c;
		color: #333;
	} */
	
	
	/* center the star -- quirky font awesome*/ 
   
	.bingoSquare a span, .bingoLetter {
		display:inline;
		display:inline-table;
		display:inline-block;
		vertical-align:middle;
		*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
	}

	.bingoSquare a.selected {
		text-decoration: none;
		background-color: #ffcf0c;
		color: #333;
	}

	.bingoSquare a:active {
		background-color: #333;
		color: #fff;
	}
	
	/* The Bottom List
	---------------------------- */
	
	ol.bingo-list {
		margin:0 auto;
		width: 100%;
		max-width: 600px;
		list-style-type: none;
		padding:0;
	}
	
	ol.bingo-list li {
		font-size: 1.5rem;
		line-height: 200%;
		cursor: pointer;
		background:#ccc;
		margin: 10px 0;
		padding: 10px;
		border-radius: 5px;
		counter-increment: step-counter;
		font-weight: bold;
		border: 1px solid #c4c3c3;
	}
	
	ol.bingo-list li.selected {
		background-color:#ffcf0c;
	}
	
	ol.bingo-list li.selected::before {
		background-color: #d9ad0e;
		color:#192026;
	}
	
	ol.bingo-list li::before {
	  content: counter(step-counter);
	  margin-right: 10px;
	  font-size: 80%;
	  background-color: #566168;
	  color: white;
	  font-weight: bold;
	  padding: 6px 8px 3px 8px;
	  border-radius: 3px;
	}
	
	/* Sticky Bingo Board and List 
	------------------------------------ */
	
	.bingoBoard.stickybingo {
		visibility: visible;
	    position: fixed;
	    top: 0;
	    width: 100%;
	    z-index: 99;
	    height: auto;
	    overflow: visible;
	    border-radius:0;
	    max-width: 100%;
	    	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
			-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
	    transition: all 0.4s ease;
		margin-left: -30px;
	}
	
	.bingoBoard.stickybingo .bingoHeader li span {
		font-size: 1.5rem;
		line-height: 30px;
	}
	
	.bingoBoard.stickybingo .bingoRow {
		width: 80%;
		margin: 0 auto;
	}
	
	.bingoBoard.stickybingo .bingoSquare a {
		line-height: 30px;
		font-size: 1.5rem;
	}
	
	ol.bingo-list.stickybingo-list {
		margin-top: 350px;
	}
}

@media (max-width: 600px){ 
	.bingoSquare a span, .bingoLetter {
		font-size: 2rem;
	}
	
	.bingoSquare a {
		line-height: 60px;
	}
	
	ol.bingo-list {
		width:90%;
	}
	
	.bingoBoard.stickybingo .bingoSquare a span, .bingoBoard.stickybingo  .bingoLetter {
		font-size: 1.5rem;
	}
}

@media (max-width: 480px){ 
	.bingoSquare a span, .bingoLetter {
		font-size: 2rem;
	}
	
	.bingoSquare a {
		line-height: 40px;
	}
	
	.bingoBoard.stickybingo {
		margin-left:-15px;
	}
	
}

.table-responsive {
  border: none;
}