.ss-animated-svg{
    
}

.ss-front{}

.ss-back{}

.ss-sn-font-size svg{
    font-size:100px;
}

@media (max-width: 767px){
    .ss-sn-font-size svg{
    font-size:40px;
    }
    
    .ss-svg-dashery svg path{
    stroke-dasharray: 10em;
    }
    
    .ss-svg-border svg {
        padding: 10px !important;
    }
    
    .ss-svg-background svg {
        padding: 10px !important;
    }
}

@media (min-width: 768px) and (max-width: 979px){
    .ss-sn-font-size svg{
    font-size:60px;
    }
}

.ss-svg-border svg{
    border: 5px solid #ffffff;
    padding: 15px;
    border-radius: 50%;
    width: 1.2em !important;
    height: 1.2em;
}

.ss-svg-background svg{
    background:#373737;
    padding: 25px;
    border-radius: 50%;
    width: 1.2em !important;
    height: 1.2em;
}

.ss-flip-root{
  perspective: 1000px;
}

.ss-flip-front, .ss-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.ss-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.ss-flip-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.ss-flip-root:hover .ss-flip-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.ss-svg-narrow svg path{
    stroke-width:10px !important;
}

.ss-svg-static svg path{
    fill: none;
    stroke: #ffffff;
    stroke-width: 30px;
    stroke-linejoin: round;
}

.ss-svg-solid svg path{
    fill: #ffffff;
}

.ss-svg-dashery svg path{
    fill: none;
    stroke: #ffffff;
    stroke-width: 30px;
    stroke-dasharray: 7em;
    stroke-linejoin: round;
    stroke-dashoffset: 0;
    animation: dash-anim 7s infinite;
    animation-delay: 2s;
    animation-direction:forward;
}

.ss-svg-dashery-hover svg path{
    fill: none;
    stroke: #ffffff;
    stroke-dasharray: 0em;
    stroke-linejoin: round;
    stroke-dashoffset: 0;
}

.ss-svg-dashery-hover:hover svg path{
    fill: none;
    stroke: #ffffff;
    stroke-dasharray: 7em;
    stroke-linejoin: round;
    stroke-dashoffset: 0;
    animation: dash-anim-hover 7s infinite;
    animation-delay: 0s;
    animation-direction:forward;
}

@keyframes dash-anim{
   0% {stroke-dashoffset: 0%;}
   50% {stroke-dashoffset: 500%;}
   100% {stroke-dashoffset: 0%;}
}

@keyframes dash-anim-hover{
   0% {stroke-dashoffset: 0%;}
   50% {stroke-dashoffset: 500%;}
   100% {stroke-dashoffset: 0%;}
}