@charset "utf-8";

/* picticon */
@font-face {
    font-family: 'picticon';
    src: url('../font/picticon.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'toko';
    src: url('../font/toko.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'toko2';
    src: url('../font/toko2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'estar_logo';
    src: url('../font/estar_logo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    position: relative;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "picticon";
    font-style: normal;
    font-weight: normal;
    speak: none;
    margin: 0 0.5em 0 0;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    /* opacity: .8; */
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
}

.tokoicon:before {
    font-family: "toko"!important;
}
.toko2icon:before {
    font-family: "toko2"!important;
}
.estaricon:before {
    font-family: "estar_logo"!important;
}


/* icon position left(default) */
[class^="icon-"]:before,
[class*=" icon-"]:before {
    /*
    position: absolute;
    left: -1.5em;
    top: 0px;
    */
}

/* icon position right */
.icon-pos-right{
    position: relative;
    padding-right: 1.75em!important;
}

[class^="icon-"].icon-pos-right:before,
[class*=" icon-"].icon-pos-right:before {
    position: absolute;
    left: auto;
    right: 0em;
    top: 50%;
    margin-top: -0.5em;
}

/* icon position top */
.icon-pos-top{
    padding-top: 3em;
}

[class^="icon-"].icon-pos-top:before,
[class*=" icon-"].icon-pos-top:before {
    font-size: 250%;
    position: absolute;
    top: 0px;
    display: block;
    width: 100%;
    left: 0%;
}

a:hover [class^="icon-"]:before,
a:hover [class*=" icon-"]:before,
a[class^="icon-"]:hover:before,
a[class*=" icon-"]:hover:before{
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: blink;
          animation-name: blink;
}

@-webkit-keyframes blink{
      0% {opacity:0;}
     50% {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes blink{
      0% {opacity:0;}
     50% {opacity:1;}
    100% {opacity:0;}
}
@-ms-keyframes blink{
      0% {opacity:0;}
     50% {opacity:1;}
    100% {opacity:0;}
}
@keyframes blink{
      0% {opacity:0;}
     50% {opacity:1;}
    100% {opacity:0;}
}