@font-face {
  font-family: 'KnuckleheadLight';
  src: url('fonts/Knucklehead-Light.otf')  format('truetype'); /* Safari, Android, iOS */
       
}


.wrapperultf{
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);*/
}

ol{
  list-style: none;
  width: 685px;
}

ol li{
  width: 70px;
  float: left;
  margin: 0 -5px;
  height: 70px;
  /*background: #fff;*/
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

ol li .fa{
  position: absolute;
  color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 24px;
}

ol li:before{
  content: attr(data-tooltip);
  width: 120px;
  height: 45px;
  background: red;
  position: absolute;
  top: -70px;
  left: -25px;
  text-align: center;
  line-height: 45px;
  border-radius: 5px;
  opacity: 0;
  color: #f2f1ee;
  /*font-weight: bold;*/
  line-height: 1.4;
  background: #232222;
  text-transform: uppercase;
  font-family: 'KnuckleheadLight' !important;
  font-size: 40px;
  text-shadow: 1px 4px 4px rgba(0,0,0,0.6);
  transition: all 0.5s ease;
}

ol li:hover:before,
ol li:hover:after{
  opacity: 1;
  transition: all 0.5s ease;
}

ol li:after{
  content: "";
  position: absolute;
  top: -25px;
  left: 18px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #232222;
  border-bottom: 15px solid transparent;
  opacity: 0;
  transition: all 0.5s ease;
}

@media screen and (max-width: 700px){
  .wrapperultf{
    top: 75%;
  }
  ol{
    width: 100px;
  }
  ol li{
    margin: 40px 0;
  }
}

.iconwin{
  background-image: url("img/Win_Icon.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconloss{
  background-image: url("img/Loss_Icon.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.icondraw{
  background-image: url("img/Draw_Icon.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.shadowfilterwin {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(178,252,36, 0));
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  }

.shadowfilterwin:hover {
  -webkit-filter: drop-shadow(0px 0px 10px rgba(178, 252, 36, 0.8));
}


.shadowfilterloss {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(212,24,30, 0));
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  }

.shadowfilterloss:hover {
  -webkit-filter: drop-shadow(0px 0px 10px rgba(212, 24, 30, 0.8));
}

.shadowfilterdraw {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(140,140,140, 0));
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  }

.shadowfilterdraw:hover {
  -webkit-filter: drop-shadow(0px 0px 10px rgba(140, 140, 140, 0.8));
}

.iconseis{
  background-image: url("img/seis_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconseistres{
  background-image: url("img/seistres_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconseisdos{
  background-image: url("img/seisdos_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconseisuno{
  background-image: url("img/seisuno_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}


.iconseiscuatro{
  background-image: url("img/seiscuatro_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconseiscinco{
  background-image: url("img/seiscinco_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}


.iconseisseis{
  background-image: url("img/seisseis_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconcinconueve{
  background-image: url("img/cinconueve_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}


.iconcincoocho{
  background-image: url("img/cincoocho_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconcincoseis{
  background-image: url("img/cincoseis_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconcincocuatro{
  background-image: url("img/cincocuatro_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconcincodos{
  background-image: url("img/cincodos_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconcuatrotres{
  background-image: url("img/cuatrotres_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconcuatroseis{
  background-image: url("img/cuatroseis_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconcuatroocho{
  background-image: url("img/cuatroocho_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.iconcuatronueve{
  background-image: url("img/cuatronueve_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.icondosocho{
  background-image: url("img/dosocho_background_Circle.png");
  background-size: 180%;
  background-repeat: no-repeat;
  background-position: center center;
}

.shadowfilternotaazul {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(41,36,252, 0));
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  }

.shadowfilternotaazul:hover {
  -webkit-filter: drop-shadow(0px 0px 10px rgba(41, 36, 252, 0.8));
}

.shadowfilternotaroja {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(212,24,30, 0));
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  }

.shadowfilternotaroja:hover {
  -webkit-filter: drop-shadow(0px 0px 10px rgba(212, 24, 30, 0.8));
}

.shadowfilternotasd {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(212,157,24, 0));
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  }

.shadowfilternotasd:hover {
  -webkit-filter: drop-shadow(0px 0px 10px rgba(212, 157, 24, 0.8));
}


.bannersepunotas img:hover{
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  filter: drop-shadow(5px 5px 5px #d49d18);
  opacity: 1.0; 
}