@font-face {
  font-family: blernFont;
  src: url('../assets/fonts/Blern regular.otf');
}

@font-face {
  font-family: quicksandFont;
  src: url('../assets/fonts/Quicksand-Medium.ttf');
}

#nameDisplayDiv , #valueDisplayDiv{
	font-size: 18pt;
	font-family:'quicksandFont';
	margin: 10px;
	position: absolute;
  line-height: 2.1;
}
#nameDisplayDiv {
/*	color: #7c2f2f;*/
	color: #ffffff;
	top: 0.5%;
	left: 0%;
	right: 0%;
	text-align: center;
}

#helpDisplayDiv{
	font-size: 14pt;
	font-family:'quicksandFont';
	margin: 0px;
	position: absolute;
  line-height: 2.1;
}

#helpDisplayDiv {
 /* color: #6191a0; */
 color: #ffffff;
  right: 2%;
  top: 0%;
  text-align: right;
}

#valueDisplayDiv {
 /* color: #6191a0; */
 color: #ffffff;
  left: 0%;
  top: 0.5%;
  text-align: left;
}

#ViewerSplitBttn , #practiceDiv , #startGameBttn, #resetBttn{
  font-size: 34pt;
  text-align: center;
  color: #ffffff;
  font-family:'quicksandFont';
   width: 23%;
   padding: 5px;
}

#ViewerSplitBttn {
  position:absolute;
  bottom:0px;
  left:0px; 

  background-size: 100% 100%;
  background-repeat: no-repeat,repeat;
}

#startGameBttn {
  position:absolute;
  bottom:0px;
  float: none;
  right: 0px;
  margin-left: auto;
  margin-right: auto;

  background-size: 100% 100%;
  background-repeat: no-repeat,repeat;

}

#resetBttn {
  position:absolute;
  bottom:0px;
  float: none;
  right: 0px;
  left: 0px;  
  margin-left: auto;
  margin-right: auto;
  display: none;
  background-size: 100% 100%;
  background-repeat: no-repeat,repeat;

}

#valueGameDisplayDiv {

  width: 200px;
  height: 40px;
  font-size: 18pt; 
  font-family:'quicksandFont';
  color: #ffffff;
  /* color: #6191a0;*/
  line-height: 200%;
  margin-left:1%;
  position: absolute;
  left: 0%;
  top: 8%;
  text-align: left;
  display: none;
}

#levelDiv {

  top: 64px;
  position: absolute;
  width: 100px;
  /* left: 50%; */

  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;

  font-family:'quicksandFont';
  color: #ffffff;
/*  color: #6191a0; */
  /* margin-left: -50px; */
  font-size: 24px; 
  display: none;
}

#practiceDiv {
  position:absolute;
  bottom:0px;
  right:0px; 
  background-image:url(../assets/NormalButton1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat,repeat;
}

#practiceDiv:hover {
  opacity: 0.8;
}

#startGameBttn:hover {
  opacity: 0.8;
}

#resetBttn:hover {
  opacity: 0.8;
}

#ViewerSplitBttn:hover {
  opacity: 0.8;
}
/*
@media only screen and (min-width : 320px) and (max-width: 640px) {

    #nameDisplayDiv {

      width: 160px !important;
      height: 24px !important;
      font-size: 12px !important;
      color: #7c2f2f ;
      font-family:'quicksandFont';
      position: absolute;
      bottom: 15% !important;
      right: 0%;
      text-align: center;
    }
    #valueDisplayDiv {

      width: 80px !important;
      height: 24px !important;
      font-size: 12px !important;
      font-family:'quicksandFont';
      color: #6191a0;
      line-height: 200%;
      margin-left: 1%;
      position: absolute;
      left: 0%;
      bottom: 15%;
      text-align: left;
    }
    #valueGameDisplayDiv {

      width: 80px !important;
      height: 24px !important;
      font-size: 12px !important;
      font-family:'quicksandFont';
      color: #6191a0;
      margin-left:1%;
      position: absolute;
      left: 0%;
      bottom: 10%;
      text-align: left;
      display: none;
    }
    #practiceDiv {

      position:absolute;
      bottom:0px;
      right:0px; 
      width:27%;
      font-family:'quicksandFont';
      font-size: 12px;
      color:#fff;
      background-image:url(../assets/NormalButton1.png);
      background-size: cover;
      background-repeat: no-repeat,repeat;
    }
    #ViewerSplitBttn {

      position:absolute !important;
      bottom:0px !important;
      left:0px !important; 
      font-family:'quicksandFont';
      width:27%;
      font-size: 12px !important;
      color:#fff !important;
      background-image:url(../assets/NormalButton.png) !important;
      background-size: cover !important;
      background-repeat: no-repeat,repeat !important;
    }
    #startGameBttn {

      position:absolute;
      bottom:0px;
      float: none;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      width:27%;
      margin: auto; 
      font-family:'quicksandFont';
      font-size: 12px;
      color:#fff;
      text-align: center;
      background-image:url(../assets/PlayButton.png);
      background-size: cover;
      background-repeat: no-repeat,repeat;

    }
    #leftPanel {

      bottom: 0% !important;
      width: 100% !important;
      height: 60px !important;
    }
    #leftPanelMiddle {

      height: 100% !important;
    }
    #leftPanelMiddle .selectElement {

      width: 20% !important;
      height: 50px !important;
    }
    #levelDiv {

        font-size: 18px !important;
        top: 96px !important;
    }
}
*/