button {
   opacity: 0.6;
   transition: 0.5s ;
   cursor: pointer;
}
button:hover {
  opacity: 1;
}

#load{
    position: fixed;
    top: 0 ;
   /* background: url("../Div/Welcome/bg.PNG") fixed no-repeat ;
    background-size: cover ; */
    background: #333 ;
    color: #fff ;
    z-index: 888;
    height: 100%;
    width: 100% ;
    animation-delay: 1s ;
    animation-duration: 3s;
  }

  #loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 10vw;
    height: 10vw;
    animation: spin 2s linear infinite;
    margin-left: 45vw;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

#EnterNameSec{

  position: fixed;
    top: 0 ;
    background: url("../Div/Welcome/background.jpg") fixed no-repeat ;
    background-size: cover ;
    color: #fff ;
    z-index: 777;
    height: 100%;
    width: 100% ;
    animation-delay: 1s ;
    animation-duration: 3s;
}

input.form-control , input.form-control:focus{
  width: 30% ;
  margin: 5% ;
  margin-left: 35%;
  background: transparent;
  height: 8%;
  border: 2px solid #fff;
  color: #fff ;
  border-radius: 10px ;
  font-size: 20px ;
}

input.form-control::placeholder{
  color: #fff ;
  font-size: 20px  ;
}


#select{
    position: fixed;
    top: 0 ;
    background: url("../Div/Welcome/bg.PNG") fixed round;
    background-size: cover ;
    color: #fff ;
    z-index: 666;
    height: 100%;
    width: 100%;
    width:100%;
    animation-delay: 0.5s ;
    animation-duration: 2s;
}
.transperant-btn{
    background: transparent ;
    border: 0px;
    width: 40%;
    cursor: pointer;
}

.btn-start{
  width: 20%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
}
.start-img{
  width: 100%;
}
.btn-start:hover{
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
  transform: translate3d(-1px, 0, 0);
}
20%, 80% {
  transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
  transform: translate3d(-4px, 0, 0);
}
40%, 60% {
  transform: translate3d(4px, 0, 0);
}
}

#currentPlayerBadges{
height:100%;
width: 100% ;
padding-top: 6% ;
display: none;
position: absolute;
z-index: 9991;
top:0 ;
left: 0 ;
background: url("../Div/Welcome/bg.PNG") fixed round ;
background-size: cover;
padding: 20px ;
}

#backBtn{
margin: 10% ;
background: transparent ;
border:0px ;
}

img.finalBadges{
  height: 200px ;
  margin: 15px ;
}
#gameOver{
  background: url("../Div/Welcome/bg.PNG") fixed round ;
  background-size: cover;
  height: 100%;
  width: 100%;
  padding-top: 10%;
}
#CongDiv{
  background: url("../Div/Welcome/bg.PNG") fixed round ;
  height: 100%;
  width: 100%;
}

#CongDiv button  {
  width : 25% ;
}
#gameOver button{
  width : 30% ;
}
#gameOver , #CongDiv{
  z-index: -150;
  display: none ;
}
.gameOver img {
  width:60%;

}

.gameOver button {

  border : 0px;
  background-color:transparent;
}

#timer{
  position: absolute;
    width: 15%;
    height:40%;
    display: inline-block;
    right: 30%;
    top: 62%;
}

#timer img {
  width:40% ;
  height: 100%;
  float: left;
}
 #min{
  width:28%;
  height:100%;
  display:inline-block;
  left:32%;
  top:0%;
  margin-top: 0%;
  margin-left: 1%;
}

#second{
 float: right;
 width: 28% ;
 height: 100%;
 display: inline-block ;
 top:0%;
}

#hour{
 float:left;
 width: 28% ;
 height: 100%;
 display: inline-block ;
 top:0%;
}

#leftColon{
width:1%;
height:100%;
top:0%;
display:inline-block;
margin-top:0%;
}

#rightColon{
width:1%;
height:100%;
display: inline-block;
margin-top:0%;
}