html {
  height: 100%;
  font-family: "basedfont"!important;
}
body {
  height: 100%;
  display: flex;
}

@font-face {
font-family: "basedfont";
src: url("../National2Condensed-Bold.otf");
}

.login-1{
    background: #e4002b;
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.login-1-1{
    display: flex;
    justify-content: center;
}
.login-1-2{
  position: absolute;
  z-index: 100;
}
.login-1-3{
  margin-top:100px;
  position: absolute;
  z-index: 99;
  width:475px;
}
.login-1-4{
  background: #F5D4B7;
  width: 400px;
  height: 300px;
  margin-top:200px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  padding: 15px;
}
.login-1-5{
  width: 100%;
  height: 100%;
  background:#FEF1E1;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.login-1-6{
  width:75%;
}
.login-1-6:hover{
  cursor:pointer;
}

.loading{
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.login-1-7{
  margin-bottom:25px;
}

#vanillatoasts-container{
  z-index:9999;
}

.btnVoucher{
  border:0px;
  width:50%;
}

@media only screen and (min-width: 0px) and (max-width: 600px) {

  .login-1-1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .login-1-2{
    width: 35%;
  }
  .login-1-3{
    margin-top:20%;
    width: 85%;
  }
  .login-1-4{
    margin-top:40%;
    width:75%;
    height:250px;
  }
  .login-1-4.listgame{
	width:300px!important;
   }
  .login-1-5 >.login-1-7{
    width: 50%;
  }
  .login-1-5 > .login-1-6 {
    width: 75%;
  }
  .login-1-6{
    margin-top:50px;
  }
  #gameContainer canvas{
	width:350px!important;
  }
}