.ss-animated-svg{
    
}

.ss-front{}

.ss-back{}

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

@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;
}

.disclaimer svg path{
    fill: none !important;
    stroke: #ffffff;
    stroke-width:1em;
    stroke-dasharray: 20em;
    stroke-linejoin: round;
    stroke-dashoffset: 0;
    animation: dash-logo 7s forwards;
    animation-delay: 0s;
}

.disclaimer svg{
    width:80px;
    height:100px;
}

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

@keyframes dash-anim-2{
   0% {stroke-dashoffset: 0%; stroke-dasharray: 1em; stroke: transparent}
   50% {stroke-dashoffset: 100%; stroke-dasharray: 2em; stroke: #ffffff;}
   100% {stroke-dashoffset: 0%; stroke-dasharray: 3em; stroke: #ffffff;}
}

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

@keyframes dash-logo{
   0% {stroke-dashoffset: 100%;}
   50% {stroke-dashoffset: 200%;}
   99.99% {stroke-dashoffset: 100%;}
   100% {stroke-dashoffset:0%; stroke-dasharray:none;}
}

@keyframes dash-anim-icons{
   0% {stroke-dashoffset: 0%; stroke-dasharray: 7em; stroke: #4f9ddf;}
   50% {stroke-dashoffset: 500%; stroke-dasharray: 7em; stroke: #ec513e;}
   99% {stroke-dashoffset: 0%;stroke-dasharray: 7em; stroke: #ec513e;}
   100% {stroke-dashoffset: 0%;stroke-dasharray: 0; stroke: #ec513e;}
}

#block-frontpagetop svg path{
    fill: none;
    stroke: transparent;
    stroke-width: 2px;
    stroke-dasharray: 0em;
    stroke-linejoin: round;
    stroke-dashoffset: 0;
    animation: dash-anim-2 12s forwards;
    animation-delay: 0.5s;
}