/*=============================================
[ Inactive Styles ]
==============================================*/



 
@-moz-document url-prefix() { 
    .social-line:hover .icon_shape_shadow {
        fill: url("firefix.svg/#icon_shape_gradient");
        fill-opacity: 0.9;
    }
    .social-line:hover .icon_circle_shadow {
        fill: url("firefix.svg/#icon_circle_gradient");
        fill-opacity: 0.7;
    }
    .social-shadow .icon_circle_shadow {
        fill: url("firefix.svg/#icon_circle_gradient");
        fill-opacity: 0.7;
    }
    .social-shadow .icon_shape_shadow { fill: url("firefix.svg/#icon_shape_gradient") }
    .social-filled:hover .icon_circle_shadow {
        fill: url("firefix.svg/#icon_circle_gradient");
        fill-opacity: 0.7;
        opacity: 1;
    }
    .social-filled:hover .icon_shape_shadow {
        fill: url("firefix.svg/#icon_shape_gradient");
        fill-opacity: 0.9;
    }
} 



/*Genral*/
.flat-filled .icon > path {
    -moz-transform: translate(0px ,0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    transform: translate(0px, 0px) scale(1,1);
}
.flat-filled .icon > .lightning {
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
    transform: translate(0px, 0px) scale(1,1);
}
.flat-filled .circle {
    fill: #292929;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
/*Exceptions*/
#filled-user .collar_right {
    fill: #f26c63;
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
    transform: translate(0px, 0px) scale(1,1);
}
#filled-user .collar_left {
    fill: #f26c63;
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
    transform: translate(0px, 0px) scale(1,1);
}
#filled-lightning .bolt {
    fill: #f26c63;
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
    transform: translate(0px, 0px) scale(1,1);
}
#filled-lightning .highlight {
    fill: #f26c63;
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
    transform: translate(0px, 0px) scale(1,1);
}
#filled-mic .bars_right rect {
    fill: #f26c63;
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
    transform: translate(0px, 0px) scale(1,1);
}
#filled-coffee .top {
    fill: #f26c63;
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
    transform: translate(0px, 0px) scale(1,1);
    : ;
}
/*Specifics*/
#filled-browser .green { fill: #FFF }
#filled-browser .orange { fill: #FFF }
#filled-browser .red { fill: #FFF }
#filled-brush .brush_silver { fill: #FFF }
#filled-calander .number { fill: #FFF }
#filled-camera .lens_inner { fill: #FFF }
#filled-clock .seconds { fill: #FFF }
#filled-clock .middle { fill: #FFF }
#filled-clock .hour { fill: #FFF }
#filled-clock .minute { fill: #FFF }
#filled-coffee .middle { fill: #FFF }
#filled-diamond .middle { fill: #FFF }
#filled-diamond .top_3 { fill: #FFF }
#filled-disk .top { fill: #FFF }
#filled-disk .top_right { fill: #FFF }
#filled-disk .text { fill: #FFF }
#filled-email .paper { fill: #FFF }
#filled-home .hole { fill: #FFF }
#filled-location .inner { fill: #FFF }
#filled-lock .keyhole { fill: #FFF }
#filled-message .dots { fill: #FFF }
#filled-picture .sun { fill: #FFF }
#filled-picture .mountain { fill: #FFF }
#filled-mic .bars_left { fill: #FFF }
#filled-mic .bars_right rect { fill: #FFF }
#filled-paper .text { fill: #FFF }
#filled-paper .corner { fill: #FFF }
#filled-pencil .metal { fill: #FFF }
#filled-phone .screen { fill: #FFF }
#filled-phone .details { fill: #FFF }
#filled-robot .eyes { fill: #FFFFFF }
#filled-suitcase .buttons { fill: #FFF }
#filled-tag .dot { fill: #FFF }
#filled-thumbsdown .dot { fill: #FFFFFF }
#filled-thumbsup .dot { fill: #FFFFFF }
#filled-trash .details { fill: #FFF }
#filled-winner .text { fill: #FFFFFF }
/*=============================================
[ Hover Styles ]
==============================================*/

/*=============================================
[ Animation Styles ]
==============================================*/
/*LEFT*/
.services-offer:hover #filled-winner .text,
.services-offer:hover #filled-user .hair,
.services-offer:hover #filled-trash .lid,
.services-offer:hover #filled-thumbsdown .base,
.services-offer:hover #filled-thumbsup .base,
.services-offer:hover #filled-suitcase .buttons,
.services-offer:hover #filled-spaceship .light,
.services-offer:hover #filled-screen .highlight,
.services-offer:hover #filled-rocket .glass,
.services-offer:hover #filled-robot .eyes,
.services-offer:hover #filled-robot .ears,
.services-offer:hover #filled-present .ribbon,
.services-offer:hover #filled-plane .middle,
.services-offer:hover #filled-picture .sun,
.services-offer:hover #filled-phone .screen,
.services-offer:hover #filled-pencil .metal,
.services-offer:hover #filled-mic .bars_left,
.services-offer:hover #filled-message .dots,
.services-offer:hover #filled-lock .keyhole,
.services-offer:hover #filled-lightning .highlight,
.services-offer:hover #filled-home .hole,
.services-offer:hover #filled-heart .left,
.services-offer:hover #filled-graph .bar_left,
.services-offer:hover #filled-folder .paper_front,
.services-offer:hover #filled-flag .pole,
.services-offer:hover #filled-film .bottom,
.services-offer:hover #filled-email .text,
.services-offer:hover #filled-disk .bottom,
.services-offer:hover #filled-disk .text,
.services-offer:hover #filled-diamond .middle,
.services-offer:hover #filled-coffee .middle,
.services-offer:hover #filled-clock .seconds,
.services-offer:hover #filled-camera .strip,
.services-offer:hover #filled-calander .left,
.services-offer:hover  #filled-brush .brush_silver,
.services-offer:hover #filled-browser .screen {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
    /*animation-timing-function*/
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    /*transform-origin*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: left;
    -moz-animation-name: left;
    -ms-animation-name: left;
    -o-animation-name: left;
    animation-name: left;
}
/*RIGHT*/
.services-offer:hover #filled-winner .base,
.services-offer:hover #filled-user .body,
.services-offer:hover #filled-trash .base,
.services-offer:hover #filled-thumbsdown .sleeve,
.services-offer:hover #filled-thumbsup .sleeve,
.services-offer:hover #filled-tag .base,
.services-offer:hover #filled-storm .cloud,
.services-offer:hover #filled-spaceship .base,
.services-offer:hover #filled-screen .base,
.services-offer:hover #filled-rocket .base,
.services-offer:hover #filled-robot .base,
.services-offer:hover #filled-present .base,
.services-offer:hover #filled-picture .mountain,
.services-offer:hover #filled-phone .base,
.services-offer:hover #filled-pencil .base_middle,
.services-offer:hover #filled-paper .base,
.services-offer:hover #filled-mic .bars_right rect,
.services-offer:hover #filled-magnify .glass,
.services-offer:hover #filled-lock .base,
.services-offer:hover #filled-location .inner,
.services-offer:hover #filled-home .base,
.services-offer:hover #filled-graph .bar_middle,
.services-offer:hover #filled-folder .paper_back,
.services-offer:hover #filled-flag .top,
.services-offer:hover #filled-film .base,
.services-offer:hover #filled-email .base,
.services-offer:hover #filled-disk .base,
.services-offer:hover #filled-diamond .right,
.services-offer:hover #filled-coffee .base,
.services-offer:hover #filled-clock .base,
.services-offer:hover #filled-camera .base,
.services-offer:hover #filled-calander .base_top,
.services-offer:hover #filled-browser .base {
    /*animation-timing-function*/
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    /*transform-origin*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: right;
    -moz-animation-name: right;
    -ms-animation-name: right;
    -o-animation-name: right;
    animation-name: right;
}
/*TOP RIGHT*/
.services-offer:hover #filled-user .head,
.services-offer:hover #filled-thumbsdown .cuff,
.services-offer:hover #filled-thumbsdown .cuff,
.services-offer:hover #filled-suitcase .top,
.services-offer:hover #filled-storm .lightning,
.services-offer:hover #filled-spaceship .circles,
.services-offer:hover #filled-spaceship .glass,
.services-offer:hover #filled-settings .top,
.services-offer:hover #filled-rocket .engine,
.services-offer:hover #filled-robot .highlight,
.services-offer:hover #filled-present .top,
.services-offer:hover #filled-plane .right,
.services-offer:hover #filled-picture .sky,
.services-offer:hover #filled-phone .details,
.services-offer:hover #filled-pencil .eraser,
.services-offer:hover #filled-pencil .base_bottom,
.services-offer:hover #filled-paper .front,
.services-offer:hover #filled-mic .base,
.services-offer:hover #filled-mic .stand,
.services-offer:hover #filled-lock .baselight,
.services-offer:hover #filled-location .base,
.services-offer:hover #filled-lightning .bolt,
.services-offer:hover #filled-home .roof,
.services-offer:hover #filled-heart .base,
.services-offer:hover #filled-graph .bar_right,
.services-offer:hover #filled-graph .dot_4,
.services-offer:hover #filled-flag .bottom,
.services-offer:hover #filled-film .top,
.services-offer:hover #filled-disk .top_right,
.services-offer:hover #filled-diamond .top_right,
.services-offer:hover #filled-diamond .left,
.services-offer:hover #filled-coffee .top,
.services-offer:hover #filled-clock .face,
.services-offer:hover #filled-calander .right,
.services-offer:hover #filled-brush .brush_base,
.services-offer:hover #filled-browser .top {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
    /*animation-timing-function*/
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    /*transform-origin*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: right-top;
    -moz-animation-name: right-top;
    -ms-animation-name: right-top;
    -o-animation-name: right-top;
    animation-name: right-top;
}
/*TOP LEFT*/
.services-offer:hover #filled-winner .ribbon,
.services-offer:hover #filled-trash .details,
.services-offer:hover #filled-thumbsdown .dot,
.services-offer:hover #filled-thumbsup .dot,
.services-offer:hover #filled-tag .dot,
.services-offer:hover #filled-suitcase .bottom,
.services-offer:hover #filled-settings .base,
.services-offer:hover #filled-screen .stand,
.services-offer:hover #filled-rocket .window,
.services-offer:hover #filled-robot .antenna,
.services-offer:hover #filled-plane .left,
.services-offer:hover #filled-picture .front,
.services-offer:hover #filled-pencil .base_top,
.services-offer:hover #filled-paper .corner,
.services-offer:hover #filled-magnify .base,
.services-offer:hover #filled-lock .bar,
.services-offer:hover #filled-graph .dot_3,
.services-offer:hover #filled-flag .shadow,
.services-offer:hover #filled-email .paper,
.services-offer:hover #filled-disk .top,
.services-offer:hover #filled-diamond .top_left,
.services-offer:hover #filled-diamond .top_3,
.services-offer:hover #filled-clock .minute,
.services-offer:hover #filled-camera .flash,
.services-offer:hover #filled-calander .number,
.services-offer:hover #filled-brush .brush_highlight,
.services-offer:hover #filled-browser .green {
    /*animation-timing-function*/
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    /*transform-origin*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: left-top;
    -moz-animation-name: left-top;
    -ms-animation-name: left-top;
    -o-animation-name: left-top;
    animation-name: left-top;
}
.services-offer:hover #filled-user .collar_left,
.services-offer:hover #filled-screen .logo,
.services-offer:hover #filled-rocket .flame,
.services-offer:hover #filled-picture .back,
.services-offer:hover #filled-pencil .tip,
.services-offer:hover #filled-paper .text,
.services-offer:hover #filled-message .front,
.services-offer:hover #filled-graph .dot_2,
.services-offer:hover #filled-folder .front,
.services-offer:hover #filled-email .top,
.services-offer:hover #filled-diamond .top_2,
.services-offer:hover #filled-clock .hour,
.services-offer:hover #filled-camera .red,
.services-offer:hover #filled-calander .base_bottom,
.services-offer:hover #filled-browser .orange {
    -webkit-animation-delay: .05s;
    -moz-animation-delay: 0.05s;
    -ms-animation-delay: 0.05s;
    -o-animation-delay: 0.05s;
    animation-delay: 0.05s;
    /*animation-timing-function*/
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    /*transform-origin*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: left-top;
    -moz-animation-name: left-top;
    -ms-animation-name: left-top;
    -o-animation-name: left-top;
    animation-name: left-top;
    -webkit-animation-name: left-top;
    -moz-animation-name: left-top;
    -ms-animation-name: left-top;
    -o-animation-name: left-top;
    animation-name: left-top;
}
.services-offer:hover #filled-user .collar_right,
.services-offer:hover #filled-plane .bottom,
.services-offer:hover #filled-pencil .wood,
.services-offer:hover #filled-message .back,
.services-offer:hover #filled-graph .dot_1,
.services-offer:hover #filled-folder .back,
.services-offer:hover #filled-diamond .top_1,
.services-offer:hover #filled-clock .middle,
.services-offer:hover #filled-camera .button,
.services-offer:hover #filled-camera .lens,
.services-offer:hover #filled-camera .lens_inner,
.services-offer:hover #filled-brush .brush_tip,
.services-offer:hover #filled-browser .red {
    /*animation-timing-function*/
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    /*animation-iteration-count*/
    /*transform-origin*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: left-top;
    -moz-animation-name: left-top;
    -ms-animation-name: left-top;
    -o-animation-name: left-top;
    animation-name: left-top;
}
/*Keyframes*/
@-moz-keyframes left-top { 
    0% { -webki-transform: translate(-100px, -100px) scale(3,3) }
    1% { -webkit-transform: translate(-100px, -100px) scale(3,3) }
    100% { -webkit-transform: translate(0px ,0px) scale(1,1) }
}
@-webkit-keyframes left-top { 
    0% { -webki-transform: translate(-100px, -100px) scale(3,3) }
    1% { -webkit-transform: translate(-100px, -100px) scale(3,3) }
    100% { -webkit-transform: translate(0px ,0px) scale(1,1) }
}
@keyframes left-top { 
    0% { transform: translate(-100px, -100px) scale(3,3) }
    1% { transform: translate(-100px, -100px) scale(3,3) }
    100% { transform: translate(0px, 0px) scale(1,1) }
}
@-moz-keyframes right-top { 
    0% { -webki-transform: translate(100px, -200px) scale(3,3) }
    1% { -webkit-transform: translate(100px, -200px) scale(3,3) }
    100% { -webkit-transform: translate(0px ,0px) scale(1,1) }
}
@-webkit-keyframes right-top { 
    0% { -webki-transform: translate(100px, -200px) scale(3,3) }
    1% { -webkit-transform: translate(100px, -200px) scale(3,3) }
    100% { -webkit-transform: translate(0px ,0px) scale(1,1) }
}
@keyframes right-top { 
    0% { transform: translate(100px, -200px) scale(3,3) }
    1% { transform: translate(100px, -200px) scale(3,3) }
    100% { transform: translate(0px, 0px) scale(1,1) }
}
@-moz-keyframes right { 
    0% { -webki-transform: translate(100px, 0px) }
    1% { -webkit-transform: translate(100px, 0px) }
    100% { -webkit-transform: translate(0px ,0px) }
}
@-webkit-keyframes right { 
    0% { -webki-transform: translate(100px, 0px) }
    1% { -webkit-transform: translate(100px, 0px) }
    100% { -webkit-transform: translate(0px ,0px) }
}
@keyframes right { 
    0% { transform: translate(100px, 0px) }
    1% { transform: translate(100px, 0px) }
    100% { transform: translate(0px, 0px) }
}
@-moz-keyframes left { 
    0% { -webki-transform: translate(-100px, 0px) }
    1% { -webkit-transform: translate(-100px, 0px) }
    100% { -webkit-transform: translate(0px ,0px) }
}
@-webkit-keyframes left { 
    0% { -webki-transform: translate(-100px, 0px) }
    1% { -webkit-transform: translate(-100px, 0px) }
    100% { -webkit-transform: translate(0px ,0px) }
}
@keyframes left { 
    0% { transform: translate(-100px, 0px) }
    1% { transform: translate(-100px, 0px) }
    100% { transform: translate(0px, 0px) }
}