/* Mixins */
/* Variables */
/* Bagde Styles */
.badgetrinta {
  position: relative;
  height: 76px;
  width: 150px;
  margin: 70px auto;
}
.badgetrinta .dotted {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 90px;
 /* box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5), inset 0px 0px 5px 1px rgba(0, 0, 0, 0.4);*/
  background: #5a228b;
}
.badgetrinta .dotted:before, .badgetrinta .dotted:after {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
}
.badgetrinta .dotted:before {
  content: "";
  z-index: 2;
  top: 5px;
  left: -1px;
  width: 90px;
  height: 90px;
  background: #5a228b;
  *zoom: 1;
 /* filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF7ABCFF', endColorstr='#FF4096EE');
 /* background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhlNDJkMSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNzUyY2I0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNWEyMjhiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');*/
  background-size: 100%;
 /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8e42d1), color-stop(60%, #752cb4), color-stop(100%, #5a228b));
  background-image: -moz-linear-gradient(top, #8e42d1 0%, #752cb4 60%, #5a228b 100%);
  background-image: -webkit-linear-gradient(top, #8e42d1 0%, #752cb4 60%, #5a228b 100%);
  background-image: linear-gradient(to bottom, #8e42d1 0%, #752cb4 60%, #5a228b 100%);*/
  transform: rotate(60deg);
}
.badgetrinta .dotted:after {
  content: "";
  z-index: 2;
  top: 5px;
  left: -1px;
  width: 90px;
  height: 90px;
  background: #5a228b;
  *zoom: 1;
  /*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF7ABCFF', endColorstr='#FF4096EE');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhlNDJkMSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNzUyY2I0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNWEyMjhiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8e42d1), color-stop(60%, #752cb4), color-stop(100%, #5a228b));
  background-image: -moz-linear-gradient(top, #8e42d1 0%, #752cb4 60%, #5a228b 100%);
  background-image: -webkit-linear-gradient(top, #8e42d1 0%, #752cb4 60%, #5a228b 100%);
  background-image: linear-gradient(to bottom, #8e42d1 0%, #752cb4 60%, #5a228b 100%);*/
  font-size: 50px;
  color: white;
  text-align: center;
  text-shadow: 0px 0px 4px #262626;
  transform: rotate(30deg);
  /*padding-top: 8px;
  padding-right: 2px;*/
}
.badgetrinta .bubble {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: relative;
  z-index: 4;
  top: 18px;
  width: 60px;
  height: 60px;
  padding: 0px;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);
}
.badgetrinta .bubble:before {
  content: attr(data-icon);
  text-align: center;
  font-size: 25px;
  color: #5a228b;
  display: block;
  padding-top: 11px;
  padding-right: 2px;
}
.badgetrinta .bubble:after {
  content: attr(data-top);
  display: block;
  position: absolute;
  color: white;
  bottom: -78px;
  left: 12px;
  border-width: 10px 4px 0;
  border-color: #FFFFFF transparent;
  z-index: 1;
  transform: rotate(35deg);
  animation: animate 2s infinite alternate linear
}
.badgetrinta .tail {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  content: "as";
  position: absolute;
  z-index: 0;
  top: 88px;
  height: 70px;
  width: 62px;
  background: #5a228b;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2989D8', endColorstr='#FF2989D8');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhMmViYyIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNWEyMjhiIi8+PHN0b3Agb2Zmc2V0PSI3NiUiIHN0b3AtY29sb3I9IiM1YTIyOGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3YTJlYmMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7a2ebc), color-stop(60%, #5a228b), color-stop(76%, #5a228b), color-stop(100%, #7a2ebc));
  background-image: -moz-linear-gradient(top, #7a2ebc 0%, #5a228b 60%, #5a228b 76%, #7a2ebc 100%);
  background-image: -webkit-linear-gradient(top, #7a2ebc 0%, #5a228b 60%, #5a228b 76%, #7a2ebc 100%);
  background-image: linear-gradient(to bottom, #7a2ebc 0%, #5a228b 60%, #5a228b 76%, #7a2ebc 100%);
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.4);
}
.badgetrinta .tail:before, .badgetrinta .tail:after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -13px;
  width: 0px;
  height: 0px;
  border-style: solid;
}
.badgetrinta .tail:before {
  left: 30px;
  border-width: 15px 31px 0 0;
  border-color: #7a2ebc transparent transparent transparent;
}
.badgetrinta .tail:after {
  right: 30px;
  border-width: 0 31px 15px 0;
  border-color: transparent #7a2ebc transparent transparent;
}
.badgetrinta .tail .inner {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  z-index: 1;
  top:-1%;
  height: 65px;
  width: 50px;
  border-left: 1px dashed white;
  border-right: 1px dashed white;
}



@keyframes  animate {
  0% {
    text-shadow:
      0 3px 20px red,
      0 0 20px red,
      0 0 10px orange,
      0 0 0 yellow,
      0 0 5px yellow,
      -2px -5px 5px yellow,
      4px -10px 10px yellow;
  }
  25% {
    text-shadow:
      0 3px 20px red,
      0 0 30px red,
      0 0 20px orange,
      0 0 5px yellow,
      -2px -5px 5px yellow,
      3px -10px 10px yellow,
      -4px -15px 20px yellow;
  }
  50% {
    text-shadow:
      0 3px 20px red,
      0 0 20px red,
      0 -5px 10px orange,
      -2px -5px 5px yellow,
      3 -10px 10px yellow,
      -4px -15px 20px yellow,
      2px -20px 30px rgba(255,255,0,0.5);
  }
  75% {
    text-shadow:
      0 3px 20px red,
      0 0 20px red,
      0 -5px 10px orange,
      3 -5px 5px yellow,
      -4px -10px 10px yellow,
      2px -20px 30px rgba(255,255,0,0.5),
      0 -25px 40px rgba(255,255,0,0);
  }
  100% {
    text-shadow:
      0 3px 20px red,
      0 0 20px red,
      0 0 10px orange,
      0 0 0 yellow,
      0 0 5px yellow,
      -2px -5px 5px yellow,
      4px -10px 10px yellow;
  }
}