@font-face {
    font-family:ecoicon;
    src:url(../fonts/ecoicon.eot);
    src:url(../fonts/ecoicon.eot) format('embedded-opentype'), url(../fonts/ecoicon.woff) format('woff'), url(../fonts/ecoicon.ttf) format('truetype'), url(../fonts/ecoicon.svg#ecoicon) format('svg');
    font-weight:400;
    font-style:normal
}
.hi-icon-wrap {
    text-align:center;
    margin:0 auto;
}
.hi-icon {
    display:inline-block;
    font-size:0;
    cursor:pointer;
    margin:15px 30px;
    width:90px;
    height:90px;
    border-radius:50%;
    text-align:center;
    position:relative;
    z-index:1;
    color:#fff
}
.hi-icon:after {
    pointer-events:none;
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    content:'';
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
.hi-icon:before {
    font-family:ecoicon;
    speak:none;
    line-height:90px;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none;
    display:block;
    -webkit-font-smoothing:antialiased
}
.hi-icon-mobile:before {
    content:"\e009"
}
.hi-icon-screen:before {
    content:"\e00a"
}
.hi-icon-earth:before {
    content:"\e002"
}
.hi-icon-support:before {
    content:"\e000"
}
.hi-icon-locked:before {
    content:"\e001"
}
.hi-icon-cog:before {
    content:"\e003"
}
.hi-icon-clock:before {
    content:"\e004"
}
.hi-icon-videos:before {
    content:"\e005"
}
.hi-icon-list:before {
    content:"\e006"
}
.hi-icon-refresh:before {
    content:"\e007"
}
.hi-icon-images:before {
    content:"\e008"
}
.hi-icon-pencil:before {
    content:"\e00b"
}
.hi-icon-link:before {
    content:"\e00c"
}
.hi-icon-mail:before {
    content:"\e00d"
}
.hi-icon-location:before {
    content:"\e00e"
}
.hi-icon-archive:before {
    content:"\e00f"
}
.hi-icon-chat:before {
    content:"\e010"
}
.hi-icon-bookmark:before {
    content:"\e011"
}
.hi-icon-user:before {
    content:"\e012"
}
.hi-icon-contract:before {
    content:"\e013"
}
.hi-icon-star:before {
    content:"\e014"
}
.hi-icon-effect-1 .hi-icon {
    background:rgba(255, 255, 255, .1);
    -webkit-transition:background .2s, color .2s;
    -moz-transition:background .2s, color .2s;
    transition:background .2s, color .2s
}
.hi-icon-effect-1 .hi-icon:after {
    top:-7px;
    left:-7px;
    padding:7px;
    box-shadow:0 0 0 4px #fff;
    -webkit-transition:-webkit-transform .2s, opacity .2s;
    -webkit-transform:scale(.8);
    -moz-transition:-moz-transform .2s, opacity .2s;
    -moz-transform:scale(.8);
    -ms-transform:scale(.8);
    transition:transform .2s, opacity .2s;
    transform:scale(.8);
    opacity:0
}
.hi-icon-effect-1a .hi-icon:hover {
    background:#fff;
    color:#41ab6b
}
.hi-icon-effect-1a .hi-icon:hover:after {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
.hi-icon-effect-1b .hi-icon:hover {
    background:#fff;
    color:#41ab6b
}
.hi-icon-effect-1b .hi-icon:after {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    transform:scale(1.2)
}
.hi-icon-effect-1b .hi-icon:hover:after {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
.hi-icon-effect-2 .hi-icon {
    color:#eea303;
    box-shadow:0 0 0 3px #fff;
    -webkit-transition:color .3s;
    -moz-transition:color .3s;
    transition:color .3s
}
.hi-icon-effect-2 .hi-icon:after {
    top:-2px;
    left:-2px;
    padding:2px;
    z-index:-1;
    background:#fff;
    -webkit-transition:-webkit-transform .2s, opacity .2s;
    -moz-transition:-moz-transform .2s, opacity .2s;
    transition:transform .2s, opacity .2s
}
.hi-icon-effect-2a .hi-icon:hover {
    color:#eea303
}
.hi-icon-effect-2a .hi-icon:hover:after {
    -webkit-transform:scale(.85);
    -moz-transform:scale(.85);
    -ms-transform:scale(.85);
    transform:scale(.85)
}
.hi-icon-effect-2b .hi-icon:hover:after {
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
    opacity:0;
    -webkit-transition:-webkit-transform .4s, opacity .2s;
    -moz-transition:-moz-transform .4s, opacity .2s;
    transition:transform .4s, opacity .2s
}
.hi-icon-effect-2b .hi-icon:hover {
    color:#fff
}
.hi-icon-effect-3 .hi-icon {
    box-shadow:0 0 0 4px #fff;
    -webkit-transition:color .3s;
    -moz-transition:color .3s;
    transition:color .3s
}
.hi-icon-effect-3 .hi-icon:after {
    top:-2px;
    left:-2px;
    padding:2px;
    z-index:-1;
    background:#fff;
    -webkit-transition:-webkit-transform .2s, opacity .3s;
    -moz-transition:-moz-transform .2s, opacity .3s;
    transition:transform .2s, opacity .3s
}
.hi-icon-effect-3a .hi-icon {
    color:#f06060
}
.hi-icon-effect-3a .hi-icon:hover {
    color:#fff
}
.hi-icon-effect-3a .hi-icon:hover:after {
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    transform:scale(1.3);
    opacity:0
}
.hi-icon-effect-3b .hi-icon {
    color:#fff
}
.hi-icon-effect-3b .hi-icon:hover {
    color:#f06060
}
.hi-icon-effect-3b .hi-icon:after {
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    transform:scale(1.3);
    opacity:0
}
.hi-icon-effect-3b .hi-icon:hover:after {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
.hi-icon-effect-4 .hi-icon {
    width:92px;
    height:92px;
    box-shadow:0 0 0 4px #fff
}
.hi-icon-effect-4a .hi-icon {
    -webkit-transition:box-shadow .2s;
    -moz-transition:box-shadow .2s;
    transition:box-shadow .2s
}
.hi-icon-effect-4 .hi-icon:before {
    line-height:92px
}
.hi-icon-effect-4 .hi-icon:after {
    top:-4px;
    left:-4px;
    padding:0;
    z-index:10;
    border:4px dashed #fff
}
.hi-icon-effect-4 .hi-icon:hover {
    box-shadow:0 0 0 0 transparent;
    color:#fff
}
.hi-icon-effect-4b .hi-icon:hover {
    -webkit-transition:box-shadow .2s;
    -moz-transition:box-shadow .2s;
    transition:box-shadow .2s
}
.hi-icon-effect-4b .hi-icon:hover:after {
    -webkit-animation:spinAround 9s linear infinite;
    -moz-animation:spinAround 9s linear infinite;
    animation:spinAround 9s linear infinite
}
@-webkit-keyframes spinAround {
    from {
        -webkit-transform:rotate(0deg)
    }
    to {
        -webkit-transform:rotate(360deg)
    }
}
@-moz-keyframes spinAround {
    from {
        -moz-transform:rotate(0deg)
    }
    to {
        -moz-transform:rotate(360deg)
    }
}
@keyframes spinAround {
    from {
        transform:rotate(0deg)
    }
    to {
        transform:rotate(360deg)
    }
}
.hi-icon-effect-5 .hi-icon {
    /*box-shadow:0 0 0 4px #fff;*/
    overflow:hidden;
    -webkit-transition:background .3s, color .3s, box-shadow .3s;
    -moz-transition:background .3s, color .3s, box-shadow .3s;
    transition:background .3s, color .3s, box-shadow .3s
}
.hi-icon-effect-5 .hi-icon:after {
    display:none
}
.hi-icon-effect-5 .hi-icon:hover {
    background: #ff7608;
    box-shadow:0 0 0 8px rgba(255, 255, 255, .3)
}
.hi-icon-effect-5a .hi-icon:hover:before {
    -webkit-animation:toRightFromLeft .3s forwards;
    -moz-animation:toRightFromLeft .3s forwards;
    animation:toRightFromLeft .3s forwards
}
@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform:translate(100%)
    }
    50% {
        opacity:0;
        -webkit-transform:translate(-100%)
    }
    51% {
        opacity:1
    }
}
@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform:translate(100%)
    }
    50% {
        opacity:0;
        -moz-transform:translate(-100%)
    }
    51% {
        opacity:1
    }
}
@keyframes toRightFromLeft {
    49% {
        transform:translate(100%)
    }
    50% {
        opacity:0;
        transform:translate(-100%)
    }
    51% {
        opacity:1
    }
}
.hi-icon-effect-5b .hi-icon:hover:before {
    -webkit-animation:toLeftFromRight .3s forwards;
    -moz-animation:toLeftFromRight .3s forwards;
    animation:toLeftFromRight .3s forwards
}
@-webkit-keyframes toLeftFromRight {
    49% {
        -webkit-transform:translate(-100%)
    }
    50% {
        opacity:0;
        -webkit-transform:translate(100%)
    }
    51% {
        opacity:1
    }
}
@-moz-keyframes toLeftFromRight {
    49% {
        -moz-transform:translate(-100%)
    }
    50% {
        opacity:0;
        -moz-transform:translate(100%)
    }
    51% {
        opacity:1
    }
}
@keyframes toLeftFromRight {
    49% {
        transform:translate(-100%)
    }
    50% {
        opacity:0;
        transform:translate(100%)
    }
    51% {
        opacity:1
    }
}
.hi-icon-effect-5c .hi-icon:hover:before {
    -webkit-animation:toTopFromBottom .3s forwards;
    -moz-animation:toTopFromBottom .3s forwards;
    animation:toTopFromBottom .3s forwards
}
@-webkit-keyframes toTopFromBottom {
    49% {
        -webkit-transform:translateY(-100%)
    }
    50% {
        opacity:0;
        -webkit-transform:translateY(100%)
    }
    51% {
        opacity:1
    }
}
@-moz-keyframes toTopFromBottom {
    49% {
        -moz-transform:translateY(-100%)
    }
    50% {
        opacity:0;
        -moz-transform:translateY(100%)
    }
    51% {
        opacity:1
    }
}
@keyframes toTopFromBottom {
    49% {
        transform:translateY(-100%)
    }
    50% {
        opacity:0;
        transform:translateY(100%)
    }
    51% {
        opacity:1
    }
}
.hi-icon-effect-5d .hi-icon:hover:before {
    -webkit-animation:toBottomFromTop .3s forwards;
    -moz-animation:toBottomFromTop .3s forwards;
    animation:toBottomFromTop .3s forwards
}
@-webkit-keyframes toBottomFromTop {
    49% {
        -webkit-transform:translateY(100%)
    }
    50% {
        opacity:0;
        -webkit-transform:translateY(-100%)
    }
    51% {
        opacity:1
    }
}
@-moz-keyframes toBottomFromTop {
    49% {
        -moz-transform:translateY(100%)
    }
    50% {
        opacity:0;
        -moz-transform:translateY(-100%)
    }
    51% {
        opacity:1
    }
}
@keyframes toBottomFromTop {
    49% {
        transform:translateY(100%)
    }
    50% {
        opacity:0;
        transform:translateY(-100%)
    }
    51% {
        opacity:1
    }
}
.hi-icon-effect-6 .hi-icon {
    box-shadow:0 0 0 4px #fff;
    -webkit-transition:background .2s, color .2s;
    -moz-transition:background .2s, color .2s;
    transition:background .2s, color .2s
}
.hi-icon-effect-6 .hi-icon:hover {
    background:#fff;
    color:#64bb5d
}
.hi-icon-effect-6 .hi-icon:hover:before {
    -webkit-animation:spinAround 2s linear infinite;
    -moz-animation:spinAround 2s linear infinite;
    animation:spinAround 2s linear infinite
}
.hi-icon-effect-7 .hi-icon {
    box-shadow:0 0 0 4px #fff;
    -webkit-transition:background .2s, color .2s;
    -moz-transition:background .2s, color .2s;
    transition:background .2s, color .2s
}
.hi-icon-effect-7 .hi-icon:hover {
    color:#fff
}
.hi-icon-effect-7 .hi-icon:after {
    top:-8px;
    left:-8px;
    padding:8px;
    z-index:-1;
    opacity:0
}
.hi-icon-effect-7a .hi-icon:after {
    box-shadow:0 0 0 #fff;
    -webkit-transition:opacity .2s, box-shadow .2s;
    -moz-transition:opacity .2s, box-shadow .2s;
    transition:opacity .2s, box-shadow .2s
}
.hi-icon-effect-7a .hi-icon:hover:after {
    opacity:1;
    box-shadow:3px 3px 0 #fff
}
.hi-icon-effect-7a .hi-icon:before {
    -webkit-transform:scale(.8);
    -moz-transform:scale(.8);
    -ms-transform:scale(.8);
    transform:scale(.8);
    opacity:.7;
    -webkit-transition:-webkit-transform .2s, opacity .2s;
    -moz-transition:-moz-transform .2s, opacity .2s;
    transition:transform .2s, opacity .2s
}
.hi-icon-effect-7a .hi-icon:hover:before {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
.hi-icon-effect-7b .hi-icon:after {
    box-shadow:3px 3px #fff;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg);
    -webkit-transition:opacity .2s, -webkit-transform .2s;
    -moz-transition:opacity .2s, -moz-transform .2s;
    transition:opacity .2s, transform .2s
}
.hi-icon-effect-7b .hi-icon:hover:after {
    opacity:1;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg)
}
.hi-icon-effect-7b .hi-icon:before {
    -webkit-transform:scale(.8);
    -moz-transform:scale(.8);
    -ms-transform:scale(.8);
    transform:scale(.8);
    opacity:.7;
    -webkit-transition:-webkit-transform .2s, opacity .2s;
    -moz-transition:-moz-transform .2s, opacity .2s;
    transition:transform .2s, opacity .2s
}
.hi-icon-effect-7b .hi-icon:hover:before {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
.hi-icon-effect-8 .hi-icon {
    background:rgba(255, 255, 255, .1);
    -webkit-transition:-webkit-transform ease-out .1s, background .2s;
    -moz-transition:-moz-transform ease-out .1s, background .2s;
    transition:transform ease-out .1s, background .2s
}
.hi-icon-effect-8 .hi-icon:after {
    top:0;
    left:0;
    padding:0;
    z-index:-1;
    box-shadow:0 0 0 2px rgba(255, 255, 255, .1);
    opacity:0;
    -webkit-transform:scale(.9);
    -moz-transform:scale(.9);
    -ms-transform:scale(.9);
    transform:scale(.9)
}
.hi-icon-effect-8 .hi-icon:hover {
    background:rgba(255, 255, 255, .05);
    -webkit-transform:scale(.93);
    -moz-transform:scale(.93);
    -ms-transform:scale(.93);
    transform:scale(.93);
    color:#fff
}
.hi-icon-effect-8 .hi-icon:hover:after {
    -webkit-animation:sonarEffect 1.3s ease-out 75ms;
    -moz-animation:sonarEffect 1.3s ease-out 75ms;
    animation:sonarEffect 1.3s ease-out 75ms
}
@-webkit-keyframes sonarEffect {
    0% {
        opacity:.3
    }
    40% {
        opacity:.5;
        box-shadow:0 0 0 2px rgba(255, 255, 255, .1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, .5)
    }
    100% {
        box-shadow:0 0 0 2px rgba(255, 255, 255, .1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, .5);
        -webkit-transform:scale(1.5);
        opacity:0
    }
}
@-moz-keyframes sonarEffect {
    0% {
        opacity:.3
    }
    40% {
        opacity:.5;
        box-shadow:0 0 0 2px rgba(255, 255, 255, .1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, .5)
    }
    100% {
        box-shadow:0 0 0 2px rgba(255, 255, 255, .1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, .5);
        -moz-transform:scale(1.5);
        opacity:0
    }
}
@keyframes sonarEffect {
    0% {
        opacity:.3
    }
    40% {
        opacity:.5;
        box-shadow:0 0 0 2px rgba(255, 255, 255, .1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, .5)
    }
    100% {
        box-shadow:0 0 0 2px rgba(255, 255, 255, .1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, .5);
        transform:scale(1.5);
        opacity:0
    }
}
.hi-icon-effect-9 .hi-icon {
    -webkit-transition:box-shadow .2s;
    -moz-transition:box-shadow .2s;
    transition:box-shadow .2s
}
.hi-icon-effect-9 .hi-icon:after {
    top:0;
    left:0;
    padding:0;
    box-shadow:0 0 0 3px #fff;
    -webkit-transition:-webkit-transform .2s, opacity .2s;
    -moz-transition:-moz-transform .2s, opacity .2s;
    transition:transform .2s, opacity .2s
}
.hi-icon-effect-9a .hi-icon:hover:after {
    -webkit-transform:scale(.85);
    -moz-transform:scale(.85);
    -ms-transform:scale(.85);
    transform:scale(.85);
    opacity:.5
}
.hi-icon-effect-9a .hi-icon:hover {
    box-shadow:0 0 0 10px #fff;
    color:#fff
}
.hi-icon-effect-9b .hi-icon:hover:after {
    -webkit-transform:scale(.85);
    -moz-transform:scale(.85);
    -ms-transform:scale(.85);
    transform:scale(.85)
}
.hi-icon-effect-9b .hi-icon:hover {
    box-shadow:0 0 0 10px rgba(255, 255, 255, .4);
    color:#fff
}