@font-face
@font-face
{
font-family: standardFont;
src: url('../fonts/Berlinsans-Demi.otf'),
     url('../fonts/Berlinsans-Demi.ttf');
}

@font-face
{
font-family: seriousFont;
src: url('../fonts/BebasNeue.otf'),
     url('../fonts/BebasNeue.ttf');
}


html{
background-color: black;

}

body{
  width: 100%;
  height: 100%;
  font-family: standardFont;
  font-size: 12px;
  margin:0;
background-color: black;
}

#machine {
 position:absolute;
 overflow: hidden;
 display: none;
 width: 100%;
 height: 100%;
 padding: 0px;
 background-repeat: no-repeat;
 background-color: black;
 background-size: 100% 100%;
}

.machineDesktop {
 background-image: url('../img/bg.jpg');
}

.machineMobile {
 background-image: url('../img/BGmobile.jpg');
}

#loader {
  display: block;
  position:absolute;
  width: 100%;
  height: 100%;
  padding: 0px;
  background-repeat: no-repeat;
  background-color: black;
  background-size: 100% 100%;
  background-image: url('../img/bg.jpg');
}

#loaderAnimationContainer{
top: 65%;
left: 40%;
position: absolute;
/* background-color: rgba(155,0,0,0.4); */
width: 20%;
height: 30%;
}

#loaderLogo{
  display: block;
  position:absolute;
  top: 19%;
  left: 28%;
  width: 40%;
  height: 58%;
  padding: 0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


#balanceSprite{
  position:absolute;
  width: 200px;  
  height: 200px;  
    left: 40px;
    top: -70px;

  background: transparent url(../img/sprites/balance/animation.png) 0 0 no-repeat;
}


  
.card, .hold {
 position: absolute;
 width: 13%;
 height: 83%;
 top: 10%;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 cursor: pointer;
}

 .hold{
background: transparent url(../img/cards/hold.png) 0 0 no-repeat;
 background-size: 100% 100%;
 display:none;
}  
.card:hover{
-webkit-filter: drop-shadow(0px 0px 5px #fff);
filter: drop-shadow(0px 0px 5px #fff);

}



  
.deck{
position: relative;top: 52%;left: -0.5%;
width: 100%;height: 32%;
overflow: hidden;
z-index: 340;/* background-color: #5555AA; */}

.deckMobile{
position: relative;top: 49%;left: 1.5%;width: 97%;height: 47%;
overflow: hidden;
z-index: 340;/* background-color: #5555AA; */}

.card0, .hold0{
 left: 13%;
 /* top: 30%; */
}
.card1, .hold1{
 left: 28%;
 /* top: 30%; */
}
.card2, .hold2{
 left: 43%;
 /* top: 30%; */
}
.card3, .hold3{
 left: 58%;
 /* top: 30%; */
}
.card4, .hold4{
 left: 73%;
 /* top: 30%; */
}

.cardMobile0,  .holdMobile0  {
 left: 3%;
 top:0%;
}
.cardMobile1 , .holdMobile1 {
 left: 22%;
 top:0%;
}
.cardMobile2 , .holdMobile2 {
 left: 41%;
 top:0%;
}
.cardMobile3 , .holdMobile3 {
 left: 60%;
 top:0%;
}
.cardMobile4 ,  .holdMobile4{
 left: 79%;
 top:0%;
}

 .holdButton{
position: absolute;
width: 18%;
height: 100%;
top: 0%;
background-image: url(../img/btnHold.png);
background-size: 100% 100%;
}

#holdButtons{
position: absolute;
top: 73%;
left: 0px;
width: 100%;
height: 13%;
overflow: hidden;
z-index: 340;
display:none;
/*background-color: #AA55AA;*/
}

#holdButton0{
 left: 1%;
}
#holdButton1{
 left: 21%;
}
#holdButton2{
 left: 41%;
}
#holdButton3{
 left: 61%;
}
#holdButton4{
 left: 81%;
}


#menu, #soundMessage{
position: absolute;
overflow: hidden;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
/* background-image: url(../img/menuBg.png); */
/* background-repeat: no-repeat; */
/* background-size: 100% 100%; */
z-index: 800000;
font-size: 1.6em;
display: none;
background-color: rgba(0, 0, 0, 0.67);
font-family: sans-serif;color: #d4cda5;}


#soundMessagePanel{
width: 70%;
height: 50%;
/* margin: 10% auto; */
top: 25%;
left: 15%;
background-color: #DDDDDD;
position: relative;
/* padding: 5%; */
font-size: 2em;border-radius: 0.7em;}

#soundMessageTitle{
 position: relative;
 top: 0;
 left: 0;
 width: 100%;
 height: 40%;
 text-align:  center;
 line-height: 3em;
 color: #700025;
 font-family: seriousFont;
 font-size: 2em;
}
#soundMessageYes{
position: absolute;
top: 40%;
left: 20%;
width: 20%;
height: 25%;
text-align: center;
line-height: 3em;border-radius: 0.5em;}
#soundMessageNo{
position: absolute;
top: 40%;
left: 60%;
width: 20%;
height: 25%;
text-align: center;
line-height: 3em;border-radius: 0.5em;}


#menu #options{
 position: absolute;
 top: 5%;
 left: 5%;
 width: 80%;
 height: 10%;
}

#menu #settings, #menu #payTable, #menu #help{
  position: absolute;
  top: 15%;
  left: 5%;
  width: 90%;
  height: 80%;
  position: absolute;
  top: 15%;
  left: 5%;
  width: 88.5%;
  background-color: #dddddd;
  height: 80%;
  cursor: pointer;
  background: url('../img/BGmobile.jpg')50% 70%;
  background-size: 104%;
  background-position-y: 96%;
  padding: 0 .5em;
}


#coinsSelector {/* background-color: green; */position: relative;overflow: hidden;top: 5%;left: 5%;width: 90%;height: auto;z-index: 600;font-size: 1.5em;/* background-color: green; */}
.coinSelector {
float: left;
width: 15%;
height: 41%;
margin-left: 2%;
text-align: center;
line-height: 1.5em;
cursor: pointer;
}

.coinSelector-6 {
width: 12%;
}

#betsSelector {position: relative;overflow: hidden;top: 11%;left: 5%;width: 90%;height: auto;z-index: 600;font-size: 1.5em;/*background-color: green;*/}
.betsSelector {
float: left;
width: 15%;
height: 41%;
margin-left: 2%;
text-align: center;
line-height: 1.5em;
cursor: pointer;
}

#payTable{
 display:none;
 z-index: 400000;
 font-size: 1.9em;
}
#closeMenu{
width: 10%;
height: 10%;background-color: #39000F;
position: absolute;
top: 6%;
left: 85%;
cursor: pointer;
font-size: 3em;
line-height: 1.5em;
text-align: center;
border-radius: 0.2em;
/* z-index: 50000; */}
#closeMenu:hover{
  color: #fff;
}
#payTableElements{
 position: absolute;
 top: 5%;
 left: 5%;
 width: 90%;
 height: 60%;
 font-size: 1.2em;
overflow: hidden;
}

#payTableJoker{
 position: absolute;
 top: 60%;
 left: 5%;
 width: 90%;
 height: 30%;
 font-size: 1.3em;
overflow: hidden;

}
#jokerPaytable, #jackpotPaytable{

 width: 50%; 
 float: left;
 }

#payTableJoker img{
 width: 10%;
}

.payTableElementImg{
 height: 25%;
 width: 10%;
 background-size: 100% 100%;
}
.payTableElement{
 height: 25%;
 width: 10%;
 text-align: right;
}
.payTableElementJackpot{
 background-color: green;
}

#autoSpinSelector {
position: relative;
overflow: hidden;
top: 10%;
left: 5%;
width: 90%;
height: 20%;
z-index: 600;
font-size: 2em;
/*background-color: red;*/
}



#soundSelector {font-size: -8em;position: absolute;overflow: hidden;top: 65%;left: 6%;width: 20%;height: auto;font-size: 1.5em;font-size: 1.5em;/* background-color: grey; */}

#speedButton, #soundButton, #holdButton {
 width: 83%;
 text-align: center;
 padding: 0.4em;
 margin-left: 3.5%;
 border: 1px;
}

#holdSelector {position: absolute;overflow: hidden;top: 65%;left: 75%;width: 20%;height: 20%;z-index: 600;font-size: 1.5em;/*background-color: grey; */}

#speedSelector {position: absolute;overflow: hidden;top: 65%;left: 39%;width: 25%;height: 20%;z-index: 600;font-size: 1.5em;/*background-color: grey; */}

.autoSelector {
float: left;
width: 15%;
height: 41%;
margin-left: 2%;
text-align: center;
line-height: 1.5em;
cursor: pointer;
}


#status{
position: absolute;
text-align: center;
top: 20%;
left: 0%;
width: 20%;
font-size: 4em;
color: #d4cda5;
font-family: seriousFont;
z-index: 300;
display:none;
}


.messageContainerDesktop{
position: absolute;
text-align: center;top: 75%;left: 20%;
width: 60%;font-size: 2.5em;
color: #d4cda5;font-family: serif;
z-index: 300;
height: 20%;
display: table;}


.messageContainerMobile{
position: absolute;
text-align: center;top: 76%;left: 20%;
width: 60%;font-size: 3em;
color: #d4cda5;font-family: serif;
z-index: 300;
height: 20%;
display: table;}

#message{
display: table-cell;
  vertical-align: middle;/* text-shadow: 0px 2px #194323; */}

#winAmount{width: 100%;top: 0;left: 0;color: #F9F9F9;text-align: center;height: 100%;/* text-shadow: 2px 2px #ff0000; */font-size: 7em;/* margin: 0; *//* padding: 0; */background: -webkit-linear-gradient(#eee, #4E3737);    -webkit-background-clip: text;/* -webkit-text-fill-color: transparent; *//* margin-top: -1%; */}

#winAmountPanel {width: 50%;top: 253%;
left: 25%;
z-index: 30000;
visibility: hidden; 
position: absolute;font-family: serousfont;}

#winAmountPanel.show {
  visibility: visible;

  transition-duration: 0.3s;
  transition-property: transform;

  transform: translaterY(100%);
  -ms-transform: translateY(100%);
  -webkit-transform: translateY(100%);
}



.controlValue2{
  position:absolute;
  color: #000000;
  font-size: 2em;
  z-index:200;
  text-align: center;
  height: 2em;

}



#btnMax {
  position:absolute;
  left:670px;
  top:515px;
  z-index:300
}

#btnAuto {
  position:absolute;
  left:670px;
  top:575px;
  z-index:300
}


#btnBet {

position: absolute;

top: 20%;

left: 82%;

width: 16%;

height: 24%;

z-index: 300000;

cursor: pointer;

background-size: 100% 100%;
}

.btnBetManual:hover{
  background-image: url("../img/btnBetHover2.png");
  cursor: pointer;
}

.btnBetDeposit{
  background-image:url("../img/btnBetDeposit.png");
}
.btnBetManual{
  background-image: url("../img/btnBet2.png");
}
.btnDrawManual{
  background-image: url("../img/btnDraw.png");
}


#btnBet:hover{
  cursor: pointer;
}

#header{
width: 100%;
height: 10%;
position: absolute;
top: 0%;
left: 0;
z-index: 600000;
}

#footer{
width: 100%;
height: 10%;
position: absolute;
top: 90%;
left: 0;
z-index: 600000;font-family: sans-serif;}

#coinSize{
 left: 48%;
}

.footerValue a {
 text-decoration: none;
 color: white;
}

.footerValue{font-size: 2em;height: 100%;color: white;position: absolute;line-height: 3.4em;text-shadow: 0px 3px #000000;text-decoration: none;}

.headerValue{
font-size: 5em;
height: 100%;
color: white;
position: absolute;
}

#bigWin{
  display: none;
  position: absolute;
  left: 0;
  top: 7%;
  background-image: url('../img/youWin.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 66%;
  z-index: 50000;
  display: none;
}


#paytable{
 display:none;
}

#btnLobby {
   cursor: pointer;
   position: absolute;
   left: 1%;
   top: 26%;
   width: 4%;
   height: 52%;
   background-image: url("../img/btnLobby.png");
   background-size: 100% 100%;
   z-index: 30000;
}
#btnLobby:hover{
 background-image: url("../img/btnLobbyHover.png") 
}
#btnMenu {
   cursor: pointer;
   position: absolute;
   left: 94%;
   top: 23%;
   width: 4%;
   height: 56%;
   z-index: 3000;
   background-image: url("../img/btnMenu.png");
   background-size: 100% 100%;
}
#btnMenu:hover{
  background-image: url("../img/btnMenuHover.png")
}

#btnBet.hide{
  transition-duration: 0.5s;
  transition-property: transform;
  transform: translateX(200%);
  -ms-transform: translateX(200%);
  -webkit-transform: translateX(200%);

}

#btnMenu.hide{
  transition-duration: 0.3s;
  transition-property: transform;
  transform: translateX(200%);
  -ms-transform: translateX(200%);
  -webkit-transform: translateX(200%);

}

#btnLobby.hide{
  transition-duration: 0.3s;
  transition-property: transform;
  transform: translateX(-200%);
  -ms-transform: translateX(-200%);
  -webkit-transform: translateX(-200%);

}

#noBalanceMessage{
  display: none;
}

#payTable table{/* width: 95%; *//* padding: 3%; *//* height: 92%; *//* height: 99%; */5em;}



#balance {
  text-align: right;
  left: 8%;
}
#betAmount {
text-align: left;
right: 12%;
}

table{
  /* background: rgba(11, 35, 16, 0.63); */
  border-collapse: collapse;
  /* margin: 0.5em auto; */
  border-radius: 0.2em;
  color: #E9D9B1;
  border-radius: 0.5em;
  }
th {
  border-bottom: 2px solid rgba(204, 5, 71, 0.1);
  color: #E2B842;
  font-size: 0.65em;
  font-weight: 600;
  padding: 0.9em 1em;
  background: rgba(1, 42, 23, 0.46);
}
td {
  /* color: #fff; */
  /* font-weight: 400; */
  padding: 0.25em 0.5em;
}
tbody tr {
  transition: background 0.25s ease;
}
#payTable2 tbody tr:hover {
  /* background: #126D29; */
  /* color: #fff; */
}

#helpTitle{font-size: 2em;
padding-left: 1em;
padding-bottom: 0;}

#helpText{
  padding: 0em 1em;
  font-size: 1em;
  overflow: auto;
  height: auto;
}

.grey{
   -webkit-filter: opacity(20%);/* Chrome, Safari, Opera */
   filter: grayscale(20%);
   -moz-filter: grayscale(20%);
   -ms-filter: grayscale(20%);
   -o-filter: grayscale(20%);
}

/* Loader animation */

#linearLoader{
position:relative;
width:100%;
height:100%}

.linearLoader{
position:absolute; background-color: #fff; 
width:10%;
height:10%;background-size: cover;-moz-border-radius:50%;
-moz-animation-name:bounce_linearLoader;
-moz-animation-duration:1.28s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:50%;
-webkit-animation-name:bounce_linearLoader;
-webkit-animation-duration:1.28s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:50%;
-ms-animation-name:bounce_linearLoader;
-ms-animation-duration:1.28s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:50%;
-o-animation-name:bounce_linearLoader;
-o-animation-duration:1.28s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:50%;
animation-name:bounce_linearLoader;
animation-duration:1.28s;
animation-iteration-count:infinite;
animation-direction:linear;}

#linearLoader_1{
left:0%;
top:0%;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}

#linearLoader_2{
left:12.5%;
top:0%;
-moz-animation-delay:0.32s;
-webkit-animation-delay:0.32s;
-ms-animation-delay:0.32s;
-o-animation-delay:0.32s;
animation-delay:0.32s;
}

#linearLoader_3{
left:25%;
top:0;
-moz-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
-ms-animation-delay:0.4s;
-o-animation-delay:0.4s;
animation-delay:0.4s;
}

#linearLoader_4{
left:37.5%;
top:0%;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}

#linearLoader_5{
left:50%;
top:0%;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}

#linearLoader_6{
left:62.5%;
top:0%;
-moz-animation-delay:0.64s;
-webkit-animation-delay:0.64s;
-ms-animation-delay:0.64s;
-o-animation-delay:0.64s;
animation-delay:0.64s;
}

#linearLoader_7{
left:75%;
top:0%;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}

#linearLoader_8{
left:87.5%;
top:0%;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
-ms-animation-delay:0.8s;
-o-animation-delay:0.8s;
animation-delay:0.8s;
}

@-moz-keyframes bounce_linearLoader{
0%{
-moz-transform:scale(1)}

100%{
-moz-transform:scale(0)}

}

@-webkit-keyframes bounce_linearLoader{
0%{
-webkit-transform:scale(1)}

100%{
-webkit-transform:scale(0)}

}

@-ms-keyframes bounce_linearLoader{
0%{
-ms-transform:scale(1)}

100%{
-ms-transform:scale(0)}

}

@-o-keyframes bounce_linearLoader{
0%{
-o-transform:scale(1)}

100%{
-o-transform:scale(0)}

}

@keyframes bounce_linearLoader{
0%{
transform:scale(1)}

100%{
transform:scale(0)
}
}


.tablePrizeName{
  text-align: left;
  /* width: 50%; */
  /* background: red; */
}
.tablePrize{
  text-align: right;
  
}


.payTableDesktop {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 90%;
  height: 80%;
  position: absolute;
  top: 12%;
  left: 17%;
  width: 64%;
  height: 40%;
  /* background: red; */
  /* z-index: 48; */
  border-radius: 1em;
  box-shadow: -webkit-box-shadow: 0px 0px 42px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 42px -5px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 42px -5px rgba(0,0,0,0.75);
}

.payTableDesktop  table{
 width: 100%;
 height: 100%;
 font-size: 2em;
 line-height: 0em;
 font-family: sans-serif;
 font-weight: 600;
 text-align: lerf;
 color: #CACDA5;
 z-index: 5000;
}


.payTableMobile {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 90%;
  height: 80%;
  position: absolute;
  top: 2%;
  left: 5%;
  width: 71%;
  height: 44%;
  /* cursor: pointer; */
  font-size: 1.5em;
  /* background: red; */
  /* border: .2em solid #02321A; */
  border-radius: 1em;
  box-shadow: -webkit-box-shadow: 0px 0px 42px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 42px -5px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 42px -5px rgba(0,0,0,0.75);
}

.payTableMobile table{
 width: 100%;
 height: 100%;
 font-size: 2em;
 line-height: 0em;
 font-family: sans-serif;
 /* font-weight: 600; */
 /* padding: 1em; */
 /* margin: 1em; */
 text-align: lerf;
}

.payTableMobile thead{
display:none;
}

.cardMobile, .holdMobile{
 position: absolute;
 width: 18%;
 height: 74%;
 top: 0%;
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

 .holdMobile{
background: transparent url(../img/cards/hold.png) 0 0 no-repeat;
 background-size: 100% 100%;
 display:none;
}  





.betSelected{
  background-color: rgba(204, 5, 71, 0.38);
}

.betPrize{
  background-color: #E6024D !important;
  color: #F6E7BE;
}


.betPrize .betSelected{
  background-color: #F1E2BA;
  color: #E6024D;
  font-weight: 600;
  /* text-align: center; */
}
.betRow{
  /* color:green; */
  font-weight: 100;
  font-size: 0.7em;
  /* text-align: center; */
}
tr:nth-child(even){
  background-color: rgba(27, 27, 27, 0.33);

}
.betTable1:hover,.betTable2:hover,.betTable3:hover,.betTable4:hover,.betTable5:hover{
  background: rgba(204, 5, 71, 0.38);
  cursor: pointer;
}





#helpText::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  border-radius: 2%;
}

#helpText::-webkit-scrollbar
{
  width: 2%;
  background-color: #F5F5F5;
}

#helpText::-webkit-scrollbar-thumb
{
  border-radius: 2%;
  background-image: -webkit-gradient(linear,
                     left bottom,
                     left top,
                     color-stop(0.44, rgb(122,153,217)),
                     color-stop(0.72, rgb(73,125,189)),
                     color-stop(0.86, rgb(28,58,148)));
}



.card:hover{
-webkit-filter: drop-shadow(0px 0px 5px #fff);
filter: drop-shadow(0px 0px 5px #fff);

}
/*----------------------------------------Scrollbar-----------------------------------------*/
::-webkit-scrollbar
{
  width: .5em;  /* for vertical scrollbars */
  border-radius:1em;
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.2);
  border-radius:1em;
}
::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.4);
  border-radius:1em;
}


#errorMessage{
    display: none;
    width: 90%;
    height: 80%;
    background-repeat: no-repeat;
    position: absolute;
    background-color: black;
    top: 5%;
    left: 5%;
    z-index: 1000000000;
  }

#errorMessageBody{
    position: relative;
    top: 11%;
    color: white;
    font-size: 6em;
    text-align: center;
}

/*----------------------------------------buttons-----------------------------------------*/


.btn-grey {
  -moz-border-radius:10%;
  -webkit-border-radius: 0.2em;
  border: 1px;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-weight:bold;
  padding:1%;
  background: #007dd6;
  background: -moz-linear-gradient(top, #007dd6 0%, #0065ad 90%, #004d85 91%, #004d85 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #007dd6), color-stop(90%, #0065ad), color-stop(91%, #004d85), color-stop(100%, #004d85));
  background: -webkit-linear-gradient(top, #007dd6 0%, #0065ad 90%, #004d85 91%, #004d85 100%);
  background: -o-linear-gradient(top, #007dd6 0%, #0065ad 90%, #004d85 91%, #004d85 100%);
  background: -ms-linear-gradient(top, #007dd6 0%, #0065ad 90%, #004d85 91%, #004d85 100%);
  background: linear-gradient(to bottom, #6c001e 0%, #39000f 90%, #39000f 91%, #39000f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007dd6', endColorstr='#004d85', GradientType=0 );
}
.btn-grey:active {
  position:relative;
  top:0.1em;
}

.btn-grey.selected,.btn-grey:hover,.btn-switch-grey,.btn-switch-grey.selected {
  -moz-border-radius:10%;
  -webkit-border-radius: 0.2em;
  padding:1%;
  text-decoration:none;
  background: #61bdff;
  background: -moz-linear-gradient(top, #61bdff 0%, #1fa2ff 90%, #0080db 91%, #0080db 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #61bdff), color-stop(90%, #1fa2ff), color-stop(91%, #0080db), color-stop(100%, #0080db));
  background: -webkit-linear-gradient(top, #61bdff 0%, #1fa2ff 90%, #0080db 91%, #0080db 100%);
  background: -o-linear-gradient(top, #61bdff 0%, #1fa2ff 90%, #0080db 91%, #0080db 100%);
  background: -ms-linear-gradient(top, #61bdff 0%, #1fa2ff 90%, #0080db 91%, #0080db 100%);
  background: linear-gradient(to bottom, #F44336 0%, #a01414 90%, #67021e 91%, #4a0116 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61bdff', endColorstr='#0080db', GradientType=0 );
}

.menuOption{width: 20%;height: 87%;background-color: #6c001e;float: left;margin: 0%;font-size: 1.5em;padding-top: 2%;text-align: center;border-top-right-radius: 0.4em;border-top-left-radius: 0.3em;cursor: pointer;color: #D9EADD;}

.menuOptionInactive{background-color: #39000f;border: 1px solid black;}