html,body {
  height: 100%;
  font-family: "Saira Condensed";
  color: #FFFFFF;
}

.colgf {
  padding: 10px 0 0 0;
}

.colleft {
  background-image: url(../images/background.png);
  background-color: #000000;
  /* width: 648px; */
  background-size: 100% 100%; 
  font-size: 40px;
  color:#FFFFFF;
  font-weight: 700;
}

.headergf {
  background-color: #000000;   
  color: #FFFFFF;
  padding: 20px 10px 20px 10px;
  height:125px
}

.menu {
  font-family: "Saira Condensed";
  font-size: 22px;
}

.menu-active{
  color: #FF0000;
}

.box-redeem{
  width: 400px;
  margin-left: 100px;
  margin-top: 100px;
}

.box-redeem-justify {
  width: 400px;
}

.input-code {
  background-color: #451010;
  color: #FFFFFF;
}

.height-90 { height:calc(100% - 125px); }

nav .navbar-nav li a{
  color: white !important;
}

nav .navbar-nav .nav-item .active {
  color: #FF0000 !important;
}

.navbar-toggler {
  width: 20px;
  height: 20px;
  position: relative;
  transition: .5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

.navbar-toggler span {
  margin: 0;
  padding: 0;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.middle-bar {
  margin-top: 0px;
}


/* State when the navbar is collapsed */

.navbar-toggler.collapsed .top-bar {
  position: absolute;
  top: 0px;
  transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  position: absolute;
  top: 10px;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  position: absolute;
  top: 20px;
  transform: rotate(0deg);
}

/* when navigation is clicked */

.navbar-toggler .top-bar {
  top: inherit;
  transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
  opacity: 0;
  top: inherit;
  filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
  top: inherit;
  transform: rotate(-135deg);
}

/* Color of 3 lines */

.navbar-toggler.collapsed .toggler-icon {
  background: white;
}

@media screen and (max-width: 991px) {
  .navbar-collapse {
    background-color: rgb(53 47 47);
    padding-left: 20px;
  }
}

@media screen and (max-width: 933px) {
  .navbar-collapse {
    background-color: rgb(53 47 47);
    padding-left: 20px;
  }

  .navbar-brand img {
    width: 300px;
  }
}

@media screen and (max-width: 767px) {
  #banner {
    display: none !important;
  }
}

@media screen and (max-width: 629px) {
  #image-game {
    display: none;
  }
}

@media screen and (max-width: 450px) {
  #title-one label {
    font-size: 22px !important;
  }

  #title-two label {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 383px) {
  .navbar-collapse {
    background-color: rgb(53 47 47);
    padding-left: 20px;
  }

  .navbar-brand img {
    /* display: none; */
    content: url("../images/image_7.png");
    width: 25%;
    height: 25%;
  }

  #title-one label {
    font-size: 22px !important;
  }

  #title-two label {
    font-size: 12px !important;
  }

  #image-game {
    display: none;
  }
}

@media screen and (max-width: 280px) {
  .navbar-collapse {
    background-color: rgb(53 47 47);
    padding-left: 20px;
  }

  .navbar-brand img {
    display: none;
  }

  #title-one label {
    font-size: 16px !important;
  }

  #title-two label {
    font-size: 10px !important;
  }

  #image-game {
    display: none;
  }
}