/*html,body{
  height: 100%;
  background: #212121;
  font-family: 'Roboto', sans-serif;
  line-height: 24px;
  letter-spacing: 1px;
}*/
/*.item-hints{
  height: 500px;
  width: 500px;
  margin: 250px auto;
}*/
.item-hints .hint {
  width:25px;
  height:25px;
  margin:0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

}
.item-hints .hint::before{ /* //rotated squre */
    /*background-color:#eeeeee;*/
  /*width:8px;
  height:8px;*/
  z-index: 2;
  /*-webkit-clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);*/
  content:'!';
  font-size:10px;
  color:#808080;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}



.item-hints .hint-dot {
  z-index: 3;
  border: 1px solid #808080;
  border-radius: 50%;
  width:15px;
  height:15px;
  display: block;
  -webkit-transform: translate(-0%,-0%) scale(.95);
  transform: translate(-0%,-0%) scale(.95);
  -webkit-animation: home_hero_item_hints_border 2s linear infinite;
  animation: home_hero_item_hints_border 2s linear infinite;
  margin: auto;
}
@-webkit-keyframes home_hero_item_hints_border {
  0%,
  100% {
    border-color:#808080;
    -webkit-transform: translate(-50%, -50%) scale(.95);
    transform: translate(-0%, -0%) scale(.95)
  }
  50% {
      border-color:#808080;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-0%, -0%) scale(1)
  }
}
@keyframes home_hero_item_hints_border {
  0%,
  100% {
    border-color:#808080;
    -webkit-transform: translate(-50%, -50%) scale(.95);
    transform: translate(-0%, -0%) scale(.95)
  }
  50% {
      border-color:#808080;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-0%, -0%) scale(1)
  }
}



/*.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5)
}*/





/*.con-tooltip {

  position: relative;
  background: #F2D1C9;
  
  border-radius: 9px;
  padding: 0 20px;
  margin: 10px;
  
  display: inline-block;
  
  transition: all 0.3s ease-in-out;
  cursor: default;

}*/

/*tooltip */
 .tooltip {
  visibility: hidden;
  z-index: 4;
  opacity: .40;
  
  width:200px;
  padding: 10px 20px;

  background: #333;
  color:#cfc8c8;
  
  position: absolute;
 top:30px;
  left:0;
  

  border-radius: 9px;
  font: 16px;

  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  
  box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}


/* tooltip  after*/
/*.tooltip::after {
  content: " ";
  width: 0;
  height: 0;
  
  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #333 transparent transparent transparent;

  position: absolute;
  left: 40%;

}*/

.item-hints:hover .tooltip{
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
    /*transition: .3s linear;*/
  /*animation: odsoky 1s ease-in-out infinite  alternate;*/

  
}
@keyframes odsoky {
  0%{
    transform: translateY(6px);	
  }

  100%{
    transform: translateY(1px);	
  }

}

/*hover ToolTip*/
.left:hover {transform: translateX(-6px); }
.top:hover {transform: translateY(-6px);  }
.bottom:hover {transform: translateY(6px);}
.right:hover {transform: translateX(6px); }