@charset "UTF-8";

  
:root {
  --myVH:0px;
  --myScore:10vh;
}

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

h3{font-size:18px;}

html {}

body{
	font-family: 'Open Sans', sans-serif;
	height:100%;
}

.homeContainer{
	overflow:hidden;
	height:86vh;
	margin:5vh 2vh 0vh 2vh;
	padding:2vh 2vh 2vh 2vh;
	font-family: 'Open Sans', sans-serif;
	background-image: url('../assets/woodboard.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	border: 4px solid #654321;
	border-radius:30px;
	box-shadow: 0 0px 0px #aaa inset,0 0 2px #FFF inset;
}

.addToHomeScreen {display:none;z-index:-1;}


.bodyclass {
  position: fixed;
  width:100%;
  cursor:pointer;
  user-select: none; /* Standard syntax */
  touch-action: manipulation;
}

.heading{
	color:#fff;
	font-size:18px;
	text-transform:uppercase;
	font-weight:700;

	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

a.legal{font-size:70%;text-decoration:none;color:#000;font-weight:700;}
a:hover.legal{text-decoration:underline;}


.minimal{display:none;}
.bestWrapper{padding:15px 15px 15px 8vh;}

	
.content{margin:0px 15px;}
.todayWrapper{
	border-radius:0px 15px 15px 0px;
	margin-right:15px;
	background-color:rgb(205,133,63,.6);
	border:solid 1px #CD853F;
	padding:15px 15px 15px 8vh;
	box-shadow: 0px 0px 10px 0px #000;
	overflow:hidden;
	height:auto;
}

.fa-circle-arrow-left, .fa-circle-arrow-right{color:#fff;}
table.todayScores{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.todaysDate{
	color:#fff;
	text-transform:uppercase;
	font-weight:700;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	letter-spacing:0px;
	font-size:18px;
	margin-bottom:15px;
}

.streaks{
	padding:3px 8px;
	font-weight:700;
	font-size:16px;
	color:#000;
}
.whiteUnderline{border-bottom:solid 1px #fff;padding-bottom:1vh;}
.scoreLine{margin-bottom:6px;}
.fa-trophy-star{font-size:22px;text-shadow: -1px -1px 0 #000, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
.fa-medal{font-size:22px;text-shadow: -1px -1px 0 #000, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
.playerName{
	font-size:14px;
	text-transform:uppercase;
	font-weight:700;
	color:#000;
}

.bestWrapper{
	border-radius:0px 15px 15px 0px;
	margin:15px 15px 10px 0px;
	background-color:rgb(205,133,63,0.6);
	border:solid 1px #CD853F;
	padding:10px 10px 5px 8vh;
	box-shadow: 0px 0px 10px 0px #000;
	overflow:hidden;
	height:auto;
}

.minimised{height:30px;}

.swipeUp{
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
}

.logo{
	height:140px;
}

.swipeUpText{font-weight:600;font-size:14px;color:#000;}

.bigIcon{
	font-size:36px;
}
.turnit{
 	display:none;
}
 
hr{color:#fff;}
.screenContainer{overflow: hidden;}


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

.hidden{
	visibility:hidden;
	display:none;
}

.freePlay{
	z-index:200;
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	background-color: rgb(0, 0, 0, 0.75);	
}

.dialogScreen{
	display:block;
	z-index:200;
	height:100%;
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	background-color: rgb(0, 0, 0, 0.75);
}

.dialogJoinAGame{
	display:block;
	z-index:200;
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	background-color: rgb(0, 0, 0, 0.75);
}

.dialogForfeit{
	display:block;
	z-index:400;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	background-color: rgb(0, 0, 0, 0.75);
}

.dialogSettings{
	display:block;
	z-index:200;
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	background-color: rgb(0, 0, 0, 0.75);
}

.dialogGameOptions{
	display:block;
	z-index:400;
	height:100%;
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	background-color: rgb(0, 0, 0, 0.75);
}

.dialogNoValidMoves{	
	display:block;
	z-index:400;
	height:100%;
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	background-color: rgb(0, 0, 0, 0.75);
}

.dialogGameEnd{
	display:block;
	z-index:400;
	height:100%;
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	background-color: rgb(0, 0, 0, 0.75);
}

.showIfWinner, .showIfLoser, .showIfWinnerGammon, .showIfLoserGammon {
	display:none;
}

body.loser .showIfLoser,
body.loserGammon .showIfLoserGammon,
body.winner .showIfWinner,
body.winnerGammon .showIfWinnerGammon
{
	display:block;
}


.dialogWaitForPlayer{
	display:block;
	z-index:400;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	background-color: rgb(0, 0, 0, 0.75);
}

.dialogWrapper{
	position:relative;
	overflow: auto;
	width:100%;
	height:100%;
}

.dialogBody{
	width:80%;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
  	color:#FFF;
	padding:15px;
	border-radius: 12px 12px 12px 12px;
	text-align:center;
	background-color: rgb(0, 0, 0, 0.9);
	border:solid 1px #FFF;
}

.dialogTitle{
	text-align:center;
	color:#FFF;
	padding:0px 10px 30px 10px;
	
}

.spin {
    margin-bottom:25px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.mb{margin-bottom:1vh;}
.mb2{margin-bottom:2vh;}
.mb3{margin-bottom:3vh;}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.disabledbtn {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-blue{
	display: inline-block;
	font-weight: 400;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	background-color: #007bff;
	text-decoration: none;
	padding:8px 12px;
	border-radius: 25px;
}

.btn-white{
	display: inline-block;
	font-weight: 400;
	color: #111;
	text-align: center;
	vertical-align: middle;
	background-color: #fff;
	text-decoration: none;
	padding:8px 12px;
	border-radius: 25px;
}

.btn{
	display: block;
	font-weight: 600;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	background-color: #DEB887;
	text-decoration: none;
	transition: all .20s ease-in;
	padding:8px 12px;
	border-radius: 12px;
	border:solid 1px #CD853F;
	cursor: pointer;
	outline:none;
	margin:6px;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:2px;	
	box-shadow: -1px -1px 0 #fff, 1px -1px 0 #000, -2px 2px 0 #000, 1px 1px 0 #000;
}

.btn:hover{
	border:solid 1px #fff;
	box-shadow:none;
}

.btnIcon{
	font-size:8vh;
	color:#fff;
	background-color:#528652;
	border:none;
}

.closeButton{color:#FFF;font-size:32px;background-color: black;border: none;cursor:pointer;}
.color1{background-color:#DEB887;} /*light*/
.color2{background-color:#CD853F;} /*dark*/

.btn.color1{color:#000;}

/* Flex Styles */
.flex{display:flex;}
.align-items{align-items:center;}
.stretch{align-items: stretch;}

.justify-content{justify-content:center;}
.start{justify-content:flex-start;}
.end{justify-content:flex-end;}
.space-between{justify-content: space-between;}
.space-evenly{justify-content: space-evenly;}
.centered{text-align:center;}

.left-aligned li{text-align: left;}
.nowrap{flex-wrap: nowrap;}
.wrap{flex-wrap: wrap;}

.col{flex-direction: row;}
.row{flex-direction: column;}

.grow{flex-grow: 1;}
.grow2{flex-grow: 2;}
.shrink{flex-shrink: 1;}

.basis{flex-basis:auto;}
.basis2{flex-basis:50%;}
.basis3{flex-basis:33%;}
.basis4{flex-basis:25%;}
 
.scoresContainer{
	text-transform:uppercase;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	height:var(--myScore);
	display:flex;
	grid-column-start: 1;
	grid-column-end:4;
	grid-row:1;
	padding-top:1vh;
	padding-bottom:2vh;
}

.boardContainer {
	position: relative;
	background-image: url('../assets/woodboard.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	border-radius:10px;
	border-top: 1vh solid #654421;
	border-bottom: 1vh solid #654421;
	border-left: .7vw solid #654421;
	border-right: .7vw solid #654421;
	grid-column:2;
	
}



.board{
	height:100%;
	width:100%;
	display: grid;
	grid-template-columns: repeat(6, 7.75%) 7% repeat(6, 7.75%);
	position: relative;
	z-index: 0;
	
}

.upper{text-transform:uppercase;}

.lfr{padding:0 1.6vh;}

.gameOptions{
	text-transform:uppercase;
	border-radius:0;
	color:#fff;
	text-align:center;
}

.messagesWrapper{
	text-transform:uppercase;
	color:#fff;
	text-align:center;
}

.notifications{
	font-weight:700;
	font-size:3vh;
	line-height:100%;
	text-align:center;
	padding:0px 2vh;
	
}

.piecesContainerWrapper{position:relative;}

.gameTimer{
	letter-spacing:1px;
	font-weight:700;
	padding:0;
	transition: all 0.25s;
	font-size:8vh;
	text-align:center;
	z-index:400;
	color:#FFF;
}

.piecesContainer{
	width: 6vw;
	position: relative;
	text-transform:uppercase;
	font-family: 'Open Sans', sans-serif;
	background-image: url('../assets/woodboard.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	box-shadow: 0 0px 0px #aaa inset,0 0 2px #FFF inset;
	border-top: 0.7vw solid #654421;
	border-bottom: 0.7vw solid #654421;
	border-left: 0.7vw solid #654421;
	border-right: 0.7vw solid #654421;

	border-radius:10px;
	
}

#c25.highlighted {
	border:solid 0.7vw #990000;
}



.diceWrapper1 {
	position: relative;
	z-index: 2;
}

.white_move .diceWrapper1 {
	display: block;
}
.black_move .diceWrapper2 {
	display: block;
}

.red{color:orange}
.undoMoveButton{
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	z-index:400;
	font-size:3vh;
}

body.black .undoMoveButton{
	color:#FFF;
}

a.throwDice{
	/*touch-action: manipulation;*/
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	letter-spacing:1px;
	font-weight:700;
	padding:0px 2vh;
	transition: all 0.25s;
	font-size:4vh;
	border-radius:1.25vh;
	cursor: pointer;
	text-align:center;
	z-index:400;
	background-color:#528652;
	color:#fff;
	border:solid 3px #fff;
	line-height:8vh;
}
a.throwDice:hover{background-color:#528652;color:#fff;border-color: #528652;}

body.black .throwDice{

}

.dice1, .dice2 {
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: -50%;
	font-size: 20vh;
	transition:all 0.25s;
	filter:blur(15px);
	font-weight:300;
}

.diceColorBlack{
	color:darkslategrey;
}
.diceColorWhite{
	color:darkslategrey;
	
}

.thrown{left:25%;filter:blur(0px);}

.headerText{
	text-shadow: 1px 1px 1px #eee;
	font-size:150%;
	font-weight:700;
	margin:8px 0px 30px 0px;
}

.subheaderText{
	font-weight:700;
    color:#333;
    text-align:left;
    line-height:35px;
}

.smallText{font-size:80%;}

.scores{color:#fff;font-size:18px;font-weight:700;background-color:#CD853F;border-radius:15px;padding:2px 16px;}


.buttons{margin-top:10px;}
.scoreWrapper{
	display:block;
	padding:2vh 2vh;
	border-radius:10px;
	color:#FFF;
	box-shadow: 0px 0px 10px #999 inset,0 0 2px #FFF inset;
	border-bottom:solid 1px #FFF;
	margin-bottom:6px;
}

.streakWrapper{
	display:block;
	padding:2vh 2vh;
	border-radius:10px;
	color:#FFF;
	box-shadow: 0px 0px 10px #999 inset,0 0 2px #FFF inset;
	border-bottom:solid 1px #FFF;
	margin-bottom:6px;
}

.middle{
 	background:rgba(139,69,19, 0.45);
	 grid-column: 7;
	 grid-row: 1 / 3;
}


.settings-sound:before{
	content: "\f204";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	margin-left:6px;
	color:#FFF;
}

.settings-sound.toggleOn:before{
	content: "\f205";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	margin-left:6px;
	color:#FFF;
}

.pips{
	text-align:right;
	font-weight:600;
	color:#FFF;
	font-size:4vh;
}
.pips.yourturn::after{
	content: "\f04b";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	rotate:180deg;
	margin-left:6px;
	color:orange;
}

.whosPlaying{
	text-transform:uppercase;
	border-radius:0;
	color:#FFF;
	text-align:center;
	display:flex;
	flex-direction: column;
}

.blackplayer{display:flex;flex-direction: row;}
.whiteplayer{display:flex;flex-direction: row;}
.blackpip{text-align: left;}
.whitepip{text-align: left;}

.blackpip::before{
	content: "\f111";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	rotate:180deg;
	margin-right:6px;
	margin-left:6px;
	color:#000;
}

.whitepip::before{
	content: "\f111";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	rotate:180deg;
	margin-right:6px;
	margin-left:6px;
	color:#fff;
}

.counter-black{
	background: radial-gradient(circle, #000 50%, #fff 100%);
}
.counter-white{
	background: radial-gradient(circle, #fff 50%, #000 100%);
}

.counter{
	border-radius:50%;
	width:calc(8px * var(--myVH));
	height:calc(8px * var(--myVH));
	z-index:100;
	position:absolute;
	pointer-events:none;

	user-select: none;
}
.counter.enable-animation {
	transition-property: top, left, bottom, right;
	transition: all 0.25s;
}
.counter.animating {
	z-index:200;
} 

.counter.edge{
	border-radius:0;
	width:calc(8px * var(--myVH))-2px; 
	height:calc(2px * var(--myVH));
	z-index:100;
	position:absolute;
	pointer-events:none;
	
	width: -o-calc(8px * var(--myVH))-2px; /* opera */
	width: -webkit-calc(8px * var(--myVH))-2px; /* google, safari */
	width: -moz-calc(8px * var(--myVH))-2px; /* firefox */
	
	-moz-user-select: none;
    -html-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    transition: all 0.25s;
}

.counter.edge.counter-white{background:#FFF;border:solid 1px #000;}
.counter.edge.counter-black{background:#000;border:solid 1px #FFF;}


body.white_move.white .counter-white:focus,
body.black_move.black .counter-black:focus 
{	
  box-shadow: 0 0 5px 5px rgba(81, 203, 238, 1);
  z-index:200;
  outline: none;
}

.arrow-up {
  clip-path: polygon(0 100%, 50% 0, 100% 100%); /* top-left right triangle */  
  z-index: 50;
}

.arrow-down {
  clip-path: polygon(0 0, 50% 100%, 100% 0); /* top-left right triangle */  
  filter: drop-shadow(0px 0px 1px #000); 
  z-index:50;
}

.black{background-color:#CD853F;color:#fff;} 
.white{background-color:#DEB887;}


/* body .black_move  -  its blacks move */
/* .black - the person who is playing */
/* .highlighted
/* .counter   is the counter itself
/* counter-white/ counter-black  counter's color */
/* arrow-up / arrow-down
/* black/white for arrow color */

/* body: whos_move | person_playing | element_required | element_color | Highlit or not

/*Blacks Move, View from Blacks Persective, Highlight the Column */
body.black_move.black .arrow-up.highlighted,
body.black_move.black .arrow-down.highlighted,
body.white_move.white .arrow-up.highlighted,
body.white_move.white .arrow-down.highlighted{
	filter: invert(100%);
}

body.black_move.black .arrow-up.highlighted:hover,
body.black_move.black .arrow-down.highlighted:hover,
body.white_move.white .arrow-up.highlighted:hover,
body.white_move.white .arrow-down.highlighted:hover{
	filter: invert(100%) drop-shadow(0px 0px 5px black);
	cursor: pointer;
}


body.black_move.black .counter-count,
body.black_move.white .counter-count {
	position:absolute;
	color:#fff;
	font-size:13px;
	font-weight:700;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

body.white_move.white .counter-count{
	position:absolute;
	color:#000;
	font-size:12px;
	font-weight:700;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.logo{
	height:140px;
}


body {font-size:15px;}

.screenContainer{
	background-color:#528652;
	display:grid;
	grid-template-columns: min-content 1fr min-content;
	grid-template-rows: 10vh 1fr;
	gap: 2vh;
	height: 92vh;
	padding: 2vh 5vw 5vh 5vw;
}
.doubles{text-align:center;word-break:break-all;font-size:150%;font-weight:700;line-height:60%;}
.player2double{color:#fff;}
.player1double{color:#000;}
.swipeUpNo{display:none;}

.reconnecting{
	display:none;
	z-index:5000; 
	padding:30px 60px;
	position:fixed;
	top:50%; left:50%;
	transform: translate(-50%, -50%);
	background-color:rgba(0,0,0,0.75);
	color:#FFF;
	border-radius:4vh;
}

.center{text-align:center;}
.white{color:#FFF;}
.green{background-color:green;color:#fff;}
.gold{color:#d4af37;}
.silver{color:#888;}
.bronze{color:#8C7853;}
.greenText{color:green;font-size:24px;}

.backbacon1{background-color:#b41f1f;margin:0px 5px;}
.bacon1{color:#b41f1f;margin:0px 5px;}

.backbacon2{background-color:#f65656;margin:0px 5px;}
.bacon2{color:#f65656;text-shadow: 1px 1px 1px #000;margin:0px 5px;}

.backbacon3{background-color:#ee9077;margin:0px 5px;}
.bacon3{color:#ee9077;text-shadow: 1px 1px 1px #000;margin:0px 5px;font-size:180%;}

.backbacon4{background-color:#e53b3b;margin:0px 5px;}
.bacon4{color:#e53b3b;text-shadow: 1px 1px 1px #000;margin:0px 5px;}

.backbacon5{background-color:#9f1313;margin:0px 5px;}
.bacon5{color:#9f1313;text-shadow: 1px 1px 1px #000;margin:0px 5px;}

.messageTitle{
	margin-top:2vh;font-size:1.25em;font-weight:700;margin-bottom:1vh;text-transform: uppercase;;
}
	
@media (max-width:567px) {
	.todayWrapper{padding:10px 10px 5px 8vh;}
	.dice1, .dice2{font-size: 14vh;}
}

@media (max-width:768px) {
	.dice1, .dice2{font-size: 14vh;}
}

@media (max-width:992px) {
	.dice1, .dice2{font-size: 14vh;}
}

@media (max-width:1200px) {
	.dice1, .dice2{font-size: 14vh;}
}

@media (max-width:1400px) {
	.dice1, .dice2{font-size: 14vh;}
}


@media (pointer: coarse)  {
	/* mobile device */
	
	body {background-color:#528652;}
	
	.addToHomeScreen {
		display: flex;
		z-index:5000;
		padding:5vh 2vh 5vh 2vh;
		color:#fff;
	}
	
	.addToHomeScreen .message{
		font-size:1.5em;
		margin-top:2vh;
	}
	
	.addToHomeScreen .messageTitle{
		font-size:2em;font-weight:700;margin-bottom:1vh;
	}
	
	.homeContainer{display:none;}
	.dice1, .dice2{font-size: 20vh;}
	
	.shareIsVisible{display:none;}
	.shareIsNotVisible{display:block;}
	
	.flexColumn{flex-direction: column;}
	.flexRow{flex-direction: row;}

	@media (min-width:567px) {
		.shareIsVisible{display:block;}
		.shareIsNotVisible{display:none;}
		.flexColumn{flex-direction: row;}
		.flexRow{flex-direction: column;}
		.dice1, .dice2{font-size: 16vh;}
	}
	
	@media (min-width:992px) {
		.addToHomeScreen .message{
			font-size:2em;
		}
		
		.addToHomeScreen .messageTitle{
			font-size:3em;
		}
	}
	
	@media (pointer:none) and (orientation: portrait), (pointer:coarse) and (orientation: portrait) {
		.screenContainer{display:none;}
		.turnit{display:block;}
		
		.pull{
			position:absolute;
			right:10px;
			top:50%;
			margin-top:-10px;
		}
			
		.overlay{
			display:none;
			position:fixed;
			top:0;
			background-color:rgba(0,0,0,.7);
			width:100%;
			height:100%;
		}
			
		.iconContainer{
			width:200px;
			height:200px;
			position:absolute;
			left:50%;
			top:50%;
			margin-left:-100px;
			margin-top:-100px;
		}
		
		.iconContainer p{
			display:inline-block;
			width:100%;
			text-align:center;
			margin:0;
			font-size:20px;
			opacity:0;
		}
	
		
		.phone{
			position:relative;
			left:50%;
			margin-left:-50px;
			width:0;
			height:0;
			border:0 solid #000;
			background:#a9a9a9;
			border-radius:10px;
			box-sizing:border-box;
		}
		
		.phone i{
			text-align:center;
			width:100%;
			line-height:120px;
			font-size:50px;
			color:#454545;
			opacity:0;
		}
		
		/* @media only screen and (max-width : 1020px){ */
		.overlay{	display:block; }
	
		.overlay .phone{
			animation:
				sizeIncrease .5s forwards ease, 
				borderIncrease .5s .5s forwards ease, 
				rotateRight .7s 1s forwards ease;
		}
	
		.overlay .phone i{
			animation:
				fadeIn .5s .8s forwards ease;
		}
	
		.overlay .iconContainer p{
			animation:
				fadeIn .5s 1.3s forwards ease;
		}
		/* } */
		
		/* KEYFRAMES
		------------------------------------------- */
		/* Animate width + height */
		@keyframes sizeIncrease {
		  0%   { width: 0; height:10px; }
			50%  { width: 100px; height: 10px; }
		  100% { width: 100px; height:160px; }
		}
		/* Add borders */
		@keyframes borderIncrease { 
			100% { border-width:20px 10px; } 
		}
		
		/* fade-in  */
		@keyframes fadeIn { 
			100% { color:#000; opacity:1; } 
		}
		
		/* Rotate device */
		@keyframes rotateRight { 
			100% { transform: rotate(90deg); } 
		}
	
	}
	
	@media (display-mode: standalone) { /*  PWA Web App ONLY  */
		.addToHomeScreen {display:none;z-index:-1;}
		.homeContainer{display:block;}
		.turnit{display:none;}
	
		@media (pointer:none) and (orientation: portrait), (pointer:coarse) and (orientation: portrait) {
			/*  PWA Web App ONLY AND PORTRAIT MODE  */
			.screenContainer{display:none;}
			.turnit{display:block;}
		}
	}
	
}

@media (pointer: fine), (pointer: none) {
	/* specifically desktop */
	
	body {background-color:#528652;}
	
	.shareIsVisible{display:none;}
	.shareIsNotVisible{display:none;}
	.addToHomeScreen {display:none;}
	
	.homeContainer{height:90vh;margin:2vh 2vh;}
}

@media (pointer: fine) and (any-pointer: coarse) {
	/* touch desktop */
}