/*=============================================
[ Inactive Styles ]
==============================================*/
.social-line {
    display: inline-block;
    width: 134px;
    height: 138px;
    margin-right: 54px;
}
.social-line:hover { cursor: pointer }
/* Gradient Offsets */
.offset0 {
    stop-color: #000000;
    stop-opacity: 0.5;
}
.offset1 {
    stop-color: #000000;
    stop-opacity: 0.2;
}
.offset2 {
    stop-color: #000000;
    stop-opacity: 0.173;
}
.offset3 {
    stop-color: #000000;
    stop-opacity: 0;
}
.offset4 {
    stop-color: #000000;
    stop-opacity: 0.7;
}
.offset5 {
    stop-color: #000000;
    stop-opacity: 0.1143;
}
.offset6 {
    stop-color: #000000;
    stop-opacity: 0.1106;
}
.social-line {
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.social-line .icon_circle_shadow {
    fill: none;
    fill-opacity: 0;
    opacity: 0;
    -webkit-transition: all .4s ease;
    -moz-transition: all 4s ease;
    transition: all .4s ease;
}
.social-line .icon_shape_shadow {
    fill: none;
    fill-opacity: 0;
}
.social-line .icon_circle {
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
    fill: none;
}
.social-line .icon_shape { fill: #FFFFFF }
/*=============================================
[ Hover Styles ]
==============================================*/
.social-line:hover {
    overflow: visible;
    -webkit-transform: scale(1.15,1.15);
    -moz-transform: scale(1.15,1.15);
    transform: scale(1.15,1.15);
}
/* Gradient IDs */
.social-line:hover .icon_circle_shadow {
    fill: url(#icon_circle_gradient);
    fill-opacity: 0.7;
    opacity: 1;
}
.social-line:hover .icon_shape_shadow {
    fill: url(#icon_shape_gradient);
    fill-opacity: 0.9;
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    transition-delay: .4s;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    transform: scale(1,1);
}
/* Icon Styles */
.social-line:hover .icon_circle {
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
    fill: none;
}
.social-line:hover path.icon_shape {
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    /*animation-name*/
    -webkit-animation-name: burst;
    -moz-animation-name: burst;
    -ms-animation-name: burst;
    -o-animation-name: burst;
    animation-name: burst;
    /*animation-duration*/
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    /*transform-origin*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 40px 38px !important;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
/*=============================================
[ KeyFrame Animations ]
==============================================*/
@-webkit-keyframes burst { 
     {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-in;
    }
    37% {
        -webkit-transform: scale(1.5);
        animation-timing-function: ease-out;
    }
    55% {
        -webkit-transform: scale(1.37);
        animation-timing-function: ease-in;
    }
    73% {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-out;
    }
    82% {
        -webkit-transform: scale(1.45);
        animation-timing-function: ease-in;
    }
    91% {
        -webkit-transform: scale(1.5);
        animation-timing-function: ease-out;
    }
    96% {
        -webkit-transform: scale(1.4);
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-out;
    }
}
@-moz-keyframes burst { 
     {
        -moz-transform: scale(1,1);
        animation-timing-function: ease-in;
    }
    37% {
        -moz-transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    55% {
        -moz-transform: scale(1.37,1.37);
        animation-timing-function: ease-in;
    }
    73% {
        -moz-transform: scale(1,1);
        animation-timing-function: ease-out;
    }
    82% {
        -moz-transform: scale(1.45,1.45);
        animation-timing-function: ease-in;
    }
    91% {
        -moz-transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    96% {
        -moz-transform: scale(1.4,1.4);
        animation-timing-function: ease-in;
    }
    100% {
        -moz-transform: scale(1,1);
        animation-timing-function: ease-in;
    }
}
@keyframes burst { 
     {
        transform: scale(1,1);
        animation-timing-function: ease-in;
    }
    37% {
        transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    55% {
        transform: scale(1.37,1.37);
        animation-timing-function: ease-in;
    }
    73% {
        transform: scale(1,1);
        animation-timing-function: ease-out;
    }
    82% {
        transform: scale(1.45,1.45);
        animation-timing-function: ease-in;
    }
    91% {
        transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    96% {
        transform: scale(1.4,1.4);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1,1);
        animation-timing-function: ease-out;
    }
}