.copyOptimization{
position:absolute;
z-index:2;
font-size:18px;
color:#000;
font-weight:200;
}


#storeTypeContainer{
position:absolute;
width:200px;
font-size:27px;
z-index:4;
top:80px;
left:19%;
text-align:center;
font-weight:600;
opacity:0.0;
}

#copyPoint1{
left:135px;
top:-45px;
}

#copyPoint2{
left:265px;
top:25px;
}

#copyPoint3{
left:265px;
top:140px;
}

#copyPoint4{
left:130px;
top:209px;
}

#copyPoint5{
left:-20px;
top:140px;
}

#copyPoint6{
left:-45px;
top:25px;
}


#dataIntelPanel{
position:relative;
width:320px;
height:300px;
margin:100px auto;
}

#dotPointLegend{
width:300px;
height:80px;
margin:80px auto;
}

.legendPointContainer{
float:left;
width:75px;
}

.copyType{
width:100%;
text-align:center;
font-size:11px;
font-weight:600;
margin-top:10px;
}

.ringPoint{
position:absolute;
left:142px;
top:-10px;
width:35px;
height:220px;
/*background-image: url('../img/Wordraze_Data_Ring_Blue_Dot.png');*/
/*background-size:100% 100%;*/
/*background-repeat:no-repeat;*/
z-index:2;
}

#blueRingPoint{
transform: rotate(0deg);
}

#yellowRingPoint{
transform: rotate(0deg);
}

#purpleRingPoint{
transform: rotate(0deg);
}


#darkBlueRingPoint{
transform: rotate(0deg);
}

#blueDot{
position:relative;
width:35px;
height:35px;
border-radius:30px;
background-color:#0096FF;
border: 2.0px solid rgba(0,0,0,1.0);
}

#yellowDot{
position:relative;
width:35px;
height:35px;
border-radius:30px;
background-color:#FFC300;
border: 2.0px solid rgba(0,0,0,1.0);
}


#purpleDot{
position:relative;
width:35px;
height:35px;
border-radius:30px;
background-color:#8F00FF;
border: 2.0px solid rgba(0,0,0,1.0);
}

#darkBlueDot{
position:relative;
width:35px;
height:35px;
border-radius:30px;
background-color:#043AFF;
border: 2.0px solid rgba(0,0,0,1.0);
}



#blueDotLegend{
width:15px;
height:15px;
margin:0px auto;
border-radius:10px;
background-color:#0096FF;
border: 2.0px solid rgba(0,0,0,1.0);
}

#yellowDotLegend{
width:15px;
height:15px;
margin:0px auto;
border-radius:10px;
background-color:#FFC300;
border: 2.0px solid rgba(0,0,0,1.0);
}


#purpleDotLegend{
width:15px;
height:15px;
margin:0px auto;
border-radius:10px;
background-color:#8F00FF;
border: 2.0px solid rgba(0,0,0,1.0);
}

#darkBlueDotLegend{
width:15px;
height:15px;
margin:0px auto;
border-radius:10px;
background-color:#043AFF;
border: 2.0px solid rgba(0,0,0,1.0);
}


#dataIntelRing{
  position:relative;
  margin:0px auto;
  width:200px;
  height:200px;
  border-radius:100px;
  background: linear-gradient(135deg,  #ff921d 0%,#ff3f01 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

#dataIntelInnerRing{
  position:absolute;
  background-color: #FFF;
  width:182px;
  height:182px;
  border-radius:91px;
  top:9px;
  left:9px;
    box-shadow: 0px 3px 2px 2px rgba(0,0,0,0.5);
}


.exitStoreType{
  animation: exitStore 0.33333s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes exitStore {
  0% {top: 80px; opacity:1.0;}
  100% {top: 90px; opacity:0.0;}
}



.enterStoreType{
  animation: enterStore 0.333333s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes enterStore {
  0% {top: 70px; opacity:0.0;}
  100% {top: 80px; opacity:1.0;}
}







.startSpinRing300{
  animation: spinRing300 1.0s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes spinRing300 {
  100% {transform: rotate(300deg);}
}



.startSpinRing240{
  animation: spinRing240 1.0s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes spinRing240 {
  100% {transform: rotate(240deg);}
}



.startSpinRing180{
  animation: spinRing180 1.0s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes spinRing180 {
  100% {transform: rotate(180deg);}
}



.startSpinRing120{
  animation: spinRing120 1.0s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes spinRing120 {
  100% {transform: rotate(120deg);}
}




.startSpinRing60{
  animation: spinRing60 1.0s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes spinRing60 {
  100% {transform: rotate(60deg);}
}





.startSpinRing0{
  animation: spinRing0 1.0s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes spinRing0 {
  100% {transform: rotate(0deg);}
}