.circle {
  position: relative;
  width: 100px;
  height: 130px;
}
.hikayeler {
overflow-x:auto;
overflow-y:hidden;
display:-webkit-box;
width:100%;
margin-top:-13px;	
height:113px;
}
.circle svg {
  fill: none;
  stroke: #8a3ab9;
  stroke-linecap: round;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: stroke-draw 6s ease-out infinite alternate;
}
.circle img {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  width: 62px;
  border-radius: 0%;
  width:24px;
  height:24px;
  
z-index:9999;
}
.circle .firma {
font-size:11px;
font-weight:700;
}
.circle .bonus {
font-size:11px;
width:98px;
display:block;
text-align:center;
margin-top:-52px;
}
@keyframes stroke-draw {
  from {
    stroke: #8a3ab9;
    stroke-dasharray: 1;
  }
  to {
    stroke: #cd486b;
    transform: rotate(180deg);
    stroke-dasharray: 8;
  }
}
.storywin {
 position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime;
  display:none;
}
.storywin img {
/*	
position:absolute;
top:-50px;
bottom:0px;
margin:auto;	
max-width:100%;
left:50%;
transform:translateX(-50%);
*/
z-index:999999;

}
.storywin .bonus1 {
font-family: Tahoma;
font-size: 22px;
color: white;
/*
position: absolute;
top: 109px;
width: 100%;
left: 0px;
bottom: 0px;
margin: auto;
*/
}
.storywin .bonus2 {
font-family: Tahoma;
font-size: 22px;
color: #f88c00;
display:block;
/*
position: absolute;
top: 75px;
width: 100%;
left: 0px;
bottom: 0px;
margin: auto;
*/
}
.hikayeicerik {
background-color: #FF4136;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.purple-square-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purple-square {
  background-color: #B10DC9;
  width: 300px;
  height: 300px;
}