/*
Author: Joseph Howard
MORE INFO HERE!!
URL: http://www.pencilscoop.com/2013/12/150-free-animated-svg-icons/

<------------ IF THE SCREEN BLINKS ON HOVER IT'S BECAUSE IT'S LOADING AN EXTERNAL IMAGE - TRY THE LINK ABOVE------------------->
*/

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/*=============================================
[ Page Setup ]
==============================================*/
header {
	width:100%;
	height:100px;
	font-family: 'Raleway', sans-serif;
	position:relative;
	text-align:center;
}
header .back {
color:#CCC;
font-size: 13px;
text-decoration:none;
}
header a:hover {
	color:#52be7f;
}
header .right {
	margin: 10px 20px 0 0px;
	float:right;
}
header .left {
	margin: 10px 0px 0 20px;
	float:left;
}
header h1 {
	color:#999;
	font-size:23px;
	padding-top: 30px;
}

#pageWrap {
    width: 100%;
    overflow: hidden;
}
.innerwrap {
    width: 100%;
    overflow: hidden;
    padding: 0px 0 50px;
}
.innerwrap.purple { background: #af7ac4 }
.innerwrap.blue { background: #246f91 }
.innerwrap.teal { background: #3aada6 }
.innerwrap.red { background: #f26c63 }
.innerwrap.green { background: #52be7f }
.innerwrap.yellow { background: #f3cf3f }
.innerwrap.yellow .iconholder { max-width: 680px }
.iconholder {
    width: 100%;
    max-width: 656px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
.iconholder h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    color: #fff;
    margin: 50px;
}
/*=============================================
[ Icon Wrap]
==============================================*/
.svg-icon {
    display: inline-block;
    width: 134px;
    height: 138px;
    margin: 40px 30px;
    float: left;
}
.svg-icon:hover { cursor: pointer }
.flat-filled {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 40px 30px;
}
.flat-line {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 40px 30px;
}
.flat-shadow {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 40px 30px;
}
/*=============================================
[ 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;
    }
}
/*=============================================
[ Inactive Styles ]
==============================================*/
.social-shadow {
    display: inline-block;
    overflow: visible;
    margin-right: 0;
}
/* 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-shadow { overflow: visible }
/* Gradient IDs */
.social-shadow .icon_circle_shadow {
    fill: url(#icon_circle_gradient);
    fill-opacity: 0.7;
    opacity: 1;
    -webkit-transition: all .4s ease;
    -moz-transition: all 4s ease;
    transition: all .4s ease;
}
.social-shadow .icon_shape_shadow {
    fill: url(#icon_shape_gradient);
    fill-opacity: 0.9;
}
/* Icon Styles */
.social-shadow .icon_circle {
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
    fill: none;
}
.social-shadow .icon_shape { fill: #fff }
/*=============================================
[ Hover Styles ]
==============================================*/
.social-shadow:hover {
    display: inline-block;
    width: 134px;
    height: 138px;
    cursor: pointer;
}
.social-shadow:hover .social-shadow {
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.social-shadow:hover .icon_circle_shadow { opacity: 0 }
.social-shadow:hover .icon_shape_shadow { opacity: 0 }
.social-shadow:hover .icon_circle {
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
    fill: none;
}
.social-shadow:hover .icon_shape { fill: #FFFFFF }
.social-shadow:hover .icon_shape {
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    /*animation-name*/
    -webkit-animation-name: burst2;
    -moz-animation-name: burst2;
    -ms-animation-name: burst2;
    -o-animation-name: burst2;
    animation-name: burst2;
    /*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 burst2 { 
    100% {
        -webkit-transform: scale(1,1);
        animation-timing-function: ease-in;
    }
    37% {
        -webkit-transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    55% {
        -webkit-transform: scale(1.37,1.37);
        animation-timing-function: ease-in;
    }
    73% {
        -webkit-transform: scale(1,1);
        animation-timing-function: ease-out;
    }
    82% {
        -webkit-transform: scale(1.45,1.45);
        animation-timing-function: ease-in;
    }
    91% {
        -webkit-transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    96% {
        -webkit-transform: scale(1.4,1.4);
        animation-timing-function: ease-in;
    }
}
@-moz-keyframes burst2 { 
    100% {
        -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;
    }
}
@keyframes burst2 { 
    100% {
        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;
    }
}
/*=============================================
[ Inactive Styles ]
==============================================*/
.social-filled {
    display: inline-block;
    width: 134px;
    height: 138px;
    margin-right: 54px;
}
.social-filled: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-filled {
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.social-filled .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-filled .icon_shape_shadow {
    fill: none;
    fill-opacity: 0;
}
.social-filled .icon_circle {
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
    fill: #fff;
}
.social-filled .icon_shape { fill: #af7ac4 }
/*=============================================
[ Hover Styles ]
==============================================*/
.social-filled:hover {
    overflow: visible;
    -webkit-transform: scale(1.25,1.25);
    -moz-transform: scale(1.25,1.25);
    transform: scale(1.25,1.25);
}
/* Gradient IDs */
.social-filled:hover .icon_circle_shadow {
    fill: url(#icon_circle_gradient);
    fill-opacity: 0.7;
    opacity: 1;
}
.social-filled:hover .icon_shape_shadow {
    fill: url(#icon_shape_gradient);
    fill-opacity: 0.9;
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    transition-delay: .4s;
}
/* Icon Styles */
.social-filled:hover .icon_circle {
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
    fill: none;
}
.social-filled:hover path.icon_shape {
    fill: #fff;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    /*animation-name*/
    -webkit-animation-name: burst3;
    -moz-animation-name: burst3;
    -ms-animation-name: burst3;
    -o-animation-name: burst3;
    animation-name: burst3;
    /*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 burst3 { 
    100% {
        -webkit-transform: scale(1,1);
        animation-timing-function: ease-in;
    }
    37% {
        -webkit-transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    55% {
        -webkit-transform: scale(1.37,1.37);
        animation-timing-function: ease-in;
    }
    73% {
        -webkit-transform: scale(1,1);
        animation-timing-function: ease-out;
    }
    82% {
        -webkit-transform: scale(1.45,1.45);
        animation-timing-function: ease-in;
    }
    91% {
        -webkit-transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    96% {
        -webkit-transform: scale(1.4,1.4);
        animation-timing-function: ease-in;
    }
}
@-moz-keyframes burst3 { 
    100% {
        -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;
    }
}
@keyframes burst3 { 
    100% {
        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;
    }
}
/*=============================================
[ Inactive Styles ]
==============================================*/
/*Genral*/
.flat-filled .icon > path {
    fill: #f26c63;
    -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 {
    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);
}
.flat-filled .circle {
    fill: #fff;
    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 ]
==============================================*/
#filled-browser:hover .circle { fill: #B1EB5B }
#filled-browser:hover .screen { fill: #d6d6d6 }
#filled-browser:hover .base { fill: #b0b0b0 }
#filled-browser:hover .top { fill: #8F8F8F }
#filled-browser:hover .green { fill: #AEE42D }
#filled-browser:hover .orange { fill: #FFD02C }
#filled-browser:hover .red { fill: #E64545 }
#filled-brush:hover .brush_base { fill: #00A3C6 }
#filled-brush:hover .brush_highlight { fill: #43C1DC }
#filled-brush:hover .brush_silver { fill: #C8C8C8 }
#filled-brush:hover .brush_tip { fill: #917152 }
#filled-brush:hover .circle { fill: #F0A878 }
#filled-calander:hover .circle { fill: #F3CF3F }
#filled-calander:hover .base_top { fill: #5B3F89 }
#filled-calander:hover .left { fill: #848484 }
#filled-calander:hover .right { fill: #848484 }
#filled-calander:hover .number { fill: #fff }
#filled-calander:hover .base_bottom { fill: #644892 }
#filled-camera:hover  .circle { fill: #F39C12 }
#filled-camera:hover .base { fill: #E0DECD }
#filled-camera:hover .strip { fill: #3376D2 }
#filled-camera:hover .lens { fill: #CAC8B7 }
#filled-camera:hover .lens_inner { fill: #A6A495 }
#filled-camera:hover .flash { fill: #FFF }
#filled-camera:hover .red { fill: #D25133 }
#filled-camera:hover .button { fill: #A6A496 }
#filled-clock:hover .circle { fill: #02BD85 }
#filled-clock:hover .base { fill: #FF8933 }
#filled-clock:hover .face { fill: #FFF }
#filled-clock:hover .seconds { fill: #FF725F }
#filled-clock:hover .middle { fill: #808080 }
#filled-clock:hover .hour { fill: #808080 }
#filled-clock:hover .minute { fill: #808080 }
#filled-coffee:hover .circle { fill: #82D8B5 }
#filled-coffee:hover .base { fill: #8F6349 }
#filled-coffee:hover .middle { fill: #9C8679 }
#filled-coffee:hover .top { fill: #F1F1F1 }
#filled-diamond:hover .circle { fill: #02BD85 }
#filled-diamond:hover .middle { fill: #D87598 }
#filled-diamond:hover .top_3 { fill: #FFC8DB }
#filled-diamond:hover .top_2 { fill: #F2A0BD }
#filled-diamond:hover .top_1 { fill: #F2A0BD }
#filled-diamond:hover .top_left { fill: #D87598 }
#filled-diamond:hover .top_right { fill: #D87598 }
#filled-diamond:hover .right { fill: #C15179 }
#filled-diamond:hover .left { fill: #FFC8DB }
#filled-disk:hover .circle { fill: #F3CF3F }
#filled-disk:hover .base { fill: #5D699B }
#filled-disk:hover .top { fill: #B2B2B2 }
#filled-disk:hover .top_right { fill: #747A90 }
#filled-disk:hover .bottom { fill: #D9D9C2 }
#filled-disk:hover .text { fill: #747A90 }
#filled-email:hover .circle { fill: #7D79BC }
#filled-email:hover .top { fill: #3DD97F }
#filled-email:hover .paper { fill: #FFFFFF }
#filled-email:hover .base { fill: #2DB466 }
#filled-email:hover .text { fill: #BBBBBB }
#filled-film:hover .circle { fill: #8DD0BE }
#filled-film:hover .base { fill: #6E6E6E }
#filled-film:hover .bottom { fill: #515151 }
#filled-film:hover .top { fill: #8C8C8C }
#filled-flag:hover .circle { fill: #8DD0BE }
#filled-flag:hover .bottom { fill: #FF5400 }
#filled-flag:hover .shadow { fill: #C03F00 }
#filled-flag:hover .top { fill: #FF5400 }
#filled-flag:hover .pole { fill: #676767 }
#filled-folder:hover .circle { fill: #82D8B5 }
#filled-folder:hover .back { fill: #9C4588 }
#filled-folder:hover .paper_back { fill: #D9D9D9 }
#filled-folder:hover .paper_front { fill: #fff }
#filled-folder:hover .front { fill: #BF67AB }
#filled-graph:hover .circle { fill: #E3A7C0 }
#filled-graph:hover .bar_left { fill: #7BC156 }
#filled-graph:hover .bar_middle { fill: #92D76C }
#filled-graph:hover .bar_right { fill: #64A242 }
#filled-graph:hover .front { fill:  }
#filled-graph:hover .dot_4,
#filled-graph:hover .dot_3,
#filled-graph:hover .dot_2,
#filled-graph:hover .dot_1 { fill: #fff }
#filled-heart:hover .circle { fill: #02BD85 }
#filled-heart:hover .base { fill: #BC4B36 }
#filled-heart:hover .left { fill: #db5940 }
#filled-home:hover .circle { fill: #02BD85 }
#filled-home:hover .base { fill: #F1F1F1 }
#filled-home:hover .hole { fill: #C3C3C3 }
#filled-home:hover .roof { fill: #D34141 }
#filled-lightning:hover .circle { fill: #423D5B }
#filled-lightning:hover .bolt { fill: #FFD928 }
#filled-lightning:hover .highlight { fill: #FFF3B9 }
#filled-location:hover .circle { fill: #4890A8 }
#filled-location:hover .base { fill: #B6351B }
#filled-location:hover .inner { fill: #7E2412 }
#filled-lock:hover .circle { fill: #02AF7E }
#filled-lock:hover .base { fill: #C9A80D }
#filled-lock:hover .baselight { fill: #D9BC36 }
#filled-lock:hover .keyhole { fill: #8A7200 }
#filled-lock:hover .bar { fill: #C6C6C6 }
#filled-magnify:hover .circle { fill: #F2D65F }
#filled-magnify:hover .base { fill: #34B9F1 }
#filled-magnify:hover .glass { fill: #8DDDFF }
#filled-message:hover .circle { fill: #AC5D9F }
#filled-message:hover .back { fill: #FFAD10 }
#filled-message:hover .front { fill: #00A3C6 }
#filled-message:hover .dots { fill: #006A81 }
#filled-mic:hover .circle { fill: #F3CF3F }
#filled-mic:hover .base { fill: #40979F }
#filled-mic:hover .stand { fill: #5F8083 }
#filled-mic:hover .bars_left { fill: #267178 }
#filled-mic:hover .bars_right rect { fill: #267178 }
#filled-paper:hover .circle { fill: #D6D6B8 }
#filled-paper:hover .base { fill: #929292 }
#filled-paper:hover .front { fill: #FFFFFF }
#filled-paper:hover .corner { fill: #D6D6D6 }
#filled-paper:hover .text { fill: #BBBBBB }
#filled-pencil:hover .circle { fill: #CDEFE1 }
#filled-pencil:hover .wood { fill: #FFC833 }
#filled-pencil:hover .base_top { fill: #456FD8 }
#filled-pencil:hover .base_bottom { fill: #3258B6 }
#filled-pencil:hover .base_middle { fill: #567FE5 }
#filled-pencil:hover .tip { fill: #567FE5 }
#filled-pencil:hover .eraser { fill: #FF72B1 }
#filled-pencil:hover .metal { fill: #C6C6C6 }
#filled-phone:hover .circle { fill: #E55D57 }
#filled-phone:hover .base { fill: #6F82A4 }
#filled-phone:hover .screen { fill: #A5B5D3 }
#filled-phone:hover .details { fill: #516078 }
#filled-picture:hover .circle { fill: #B1EB5B }
#filled-picture:hover .back { fill: #A46B49 }
#filled-picture:hover .front { fill: #CE8A61 }
#filled-picture:hover .sky { fill: #DCF5FF }
#filled-picture:hover .sun { fill: #FF7800 }
#filled-picture:hover .mountain { fill: #3B8C1E }
#filled-plane:hover .circle { fill: #E88D70 }
#filled-plane:hover .bottom { fill: #007D7E }
#filled-plane:hover .right { fill: #4ED0D1 }
#filled-plane:hover .middle { fill: #3AAAAB }
#filled-plane:hover .left { fill: #4ED0D1 }
#filled-present:hover .circle { fill: #4890A8 }
#filled-present:hover .base { fill: #F1F1F1 }
#filled-present:hover .top { fill: #C3C3C3 }
#filled-present:hover .ribbon { fill: #D34141 }
#filled-robot:hover .circle { fill: #E88D70 }
#filled-robot:hover .ears { fill: #39517A }
#filled-robot:hover .base { fill: #4C70AF }
#filled-robot:hover .highlight { fill: #6384BE }
#filled-robot:hover .antenna { fill: #A0ABBD }
#filled-robot:hover .eyes { fill: #FFFFFF }
#filled-rocket:hover .circle { fill: #4BAE97 }
#filled-rocket:hover .engine { fill: #7D7D7D }
#filled-rocket:hover .base { fill: #B0CED8 }
#filled-rocket:hover .window { fill: #8BABB6 }
#filled-rocket:hover .glass { fill: #FFFFFF }
#filled-rocket:hover .flame { fill: #FF5400 }
#filled-screen:hover .circle { fill: #F8B243 }
#filled-screen:hover .stand { fill: #516078 }
#filled-screen:hover .base { fill: #6F82A4 }
#filled-screen:hover .highlight { fill: #A5B5D3 }
#filled-screen:hover .logo { fill: #516078 }
#filled-settings:hover .circle { fill: #E3A7C0 }
#filled-settings:hover .base { fill: #8BAE5D }
#filled-settings:hover .top { fill: #698741 }
#filled-spaceship:hover .circle { fill: #02BD85 }
#filled-spaceship:hover .light { fill: #FFF3B9 }
#filled-spaceship:hover .glass { fill: #8DDDFF }
#filled-spaceship:hover .base { fill: #7E8CA6 }
#filled-spaceship:hover .circles { fill: #56627A }
#filled-storm:hover .circle { fill: #90C0D8 }
#filled-storm:hover .cloud { fill: #858585 }
#filled-storm:hover .lightning { fill: #FFAD10 }
#filled-suitcase:hover .circle { fill: #02BD85 }
#filled-suitcase:hover .top { fill: #9A4C1D }
#filled-suitcase:hover .bottom { fill: #B75B24 }
#filled-suitcase:hover .buttons { fill: #C89211 }
#filled-tag:hover .circle { fill: #D6D6B8 }
#filled-tag:hover .base { fill: #FFBA00 }
#filled-tag:hover .dot { fill: #C38E00 }
#filled-thumbsdown:hover .circle { fill: #E74C3C }
#filled-thumbsdown:hover .base { fill: #F1CDB0 }
#filled-thumbsdown:hover .sleeve { fill: #E1AF45 }
#filled-thumbsdown:hover .cuff { fill: #339FA9 }
#filled-thumbsdown:hover .dot { fill: #FFFFFF }
#filled-thumbsup:hover .circle { fill: #02BD85 }
#filled-thumbsup:hover .base { fill: #F1CDB0 }
#filled-thumbsup:hover .sleeve { fill: #854D37 }
#filled-thumbsup:hover .cuff { fill: #C24C28 }
#filled-thumbsup:hover .dot { fill: #FFFFFF }
#filled-trash:hover .circle { fill: #90C0D8 }
#filled-trash:hover .base { fill: #8C8C8C }
#filled-trash:hover .details { fill: #515151 }
#filled-trash:hover .lid { fill: #6E6E6E }
#filled-user:hover .circle { fill: #D1F274 }
#filled-user:hover .body { fill: #44B2B6 }
#filled-user:hover .collar_right { fill: #FFFFFF }
#filled-user:hover .collar_left { fill: #FFFFFF }
#filled-user:hover .head { fill: #F1CDB0 }
#filled-user:hover .hair { fill: #AB6125 }
#filled-winner:hover .circle { fill: #F8B243 }
#filled-winner:hover .ribbon { fill: #5BB3F0 }
#filled-winner:hover .base { fill: #1983CD }
#filled-winner:hover .text { fill: #FFFFFF }
/*=============================================
[ Animation Styles ]
==============================================*/
/*LEFT*/
#filled-winner:hover .text,
#filled-user:hover .hair,
#filled-trash:hover .lid,
#filled-thumbsdown:hover .base,
#filled-thumbsup:hover .base,
#filled-suitcase:hover .buttons,
#filled-spaceship:hover .light,
#filled-screen:hover .highlight,
#filled-rocket:hover .glass,
#filled-robot:hover .eyes,
#filled-robot:hover .ears,
#filled-present:hover .ribbon,
#filled-plane:hover .middle,
#filled-picture:hover .sun,
#filled-phone:hover .screen,
#filled-pencil:hover .metal,
#filled-mic:hover .bars_left,
#filled-message:hover .dots,
#filled-lock:hover .keyhole,
#filled-lightning:hover .highlight,
#filled-home:hover .hole,
#filled-heart:hover .left,
#filled-graph:hover .bar_left,
#filled-folder:hover .paper_front,
#filled-flag:hover .pole,
#filled-film:hover .bottom,
#filled-email:hover .text,
#filled-disk:hover .bottom,
#filled-disk:hover .text,
#filled-diamond:hover .middle,
#filled-coffee:hover .middle,
#filled-clock:hover .seconds,
#filled-camera:hover .strip,
#filled-calander:hover .left,
#filled-brush:hover .brush_silver,
#filled-browser:hover .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*/
#filled-winner:hover .base,
#filled-user:hover .body,
#filled-trash:hover .base,
#filled-thumbsdown:hover .sleeve,
#filled-thumbsup:hover .sleeve,
#filled-tag:hover .base,
#filled-storm:hover .cloud,
#filled-spaceship:hover .base,
#filled-screen:hover .base,
#filled-rocket:hover .base,
#filled-robot:hover .base,
#filled-present:hover .base,
#filled-picture:hover .mountain,
#filled-phone:hover .base,
#filled-pencil:hover .base_middle,
#filled-paper:hover .base,
#filled-mic:hover .bars_right rect,
#filled-magnify:hover .glass,
#filled-lock:hover .base,
#filled-location:hover .inner,
#filled-home:hover .base,
#filled-graph:hover .bar_middle,
#filled-folder:hover .paper_back,
#filled-flag:hover .top,
#filled-film:hover .base,
#filled-email:hover .base,
#filled-disk:hover .base,
#filled-diamond:hover .right,
#filled-coffee:hover .base,
#filled-clock:hover .base,
#filled-camera:hover .base,
#filled-calander:hover .base_top,
#filled-browser:hover .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*/
#filled-user:hover .head,
#filled-thumbsdown:hover .cuff,
#filled-thumbsdown:hover .cuff,
#filled-suitcase:hover .top,
#filled-storm:hover .lightning,
#filled-spaceship:hover .circles,
#filled-spaceship:hover .glass,
#filled-settings:hover .top,
#filled-rocket:hover .engine,
#filled-robot:hover .highlight,
#filled-present:hover .top,
#filled-plane:hover .right,
#filled-picture:hover .sky,
#filled-phone:hover .details,
#filled-pencil:hover .eraser,
#filled-pencil:hover .base_bottom,
#filled-paper:hover .front,
#filled-mic:hover .base,
#filled-mic:hover .stand,
#filled-lock:hover .baselight,
#filled-location:hover .base,
#filled-lightning:hover .bolt,
#filled-home:hover .roof,
#filled-heart:hover .base,
#filled-graph:hover .bar_right,
#filled-graph:hover .dot_4,
#filled-flag:hover .bottom,
#filled-film:hover .top,
#filled-disk:hover .top_right,
#filled-diamond:hover .top_right,
#filled-diamond:hover .left,
#filled-coffee:hover .top,
#filled-clock:hover .face,
#filled-calander:hover .right,
#filled-brush:hover .brush_base,
#filled-browser:hover .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*/
#filled-winner:hover .ribbon,
#filled-trash:hover .details,
#filled-thumbsdown:hover .dot,
#filled-thumbsup:hover .dot,
#filled-tag:hover .dot,
#filled-suitcase:hover .bottom,
#filled-settings:hover .base,
#filled-screen:hover .stand,
#filled-rocket:hover .window,
#filled-robot:hover .antenna,
#filled-plane:hover .left,
#filled-picture:hover .front,
#filled-pencil:hover .base_top,
#filled-paper:hover .corner,
#filled-magnify:hover .base,
#filled-lock:hover .bar,
#filled-graph:hover .dot_3,
#filled-flag:hover .shadow,
#filled-email:hover .paper,
#filled-disk:hover .top,
#filled-diamond:hover .top_left,
#filled-diamond:hover .top_3,
#filled-clock:hover .minute,
#filled-camera:hover .flash,
#filled-calander:hover .number,
#filled-brush:hover .brush_highlight,
#filled-browser:hover .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;
}
#filled-user:hover .collar_left,
#filled-screen:hover .logo,
#filled-rocket:hover .flame,
#filled-picture:hover .back,
#filled-pencil:hover .tip,
#filled-paper:hover .text,
#filled-message:hover .front,
#filled-graph:hover .dot_2,
#filled-folder:hover .front,
#filled-email:hover .top,
#filled-diamond:hover .top_2,
#filled-clock:hover .hour,
#filled-camera:hover .red,
#filled-calander:hover .base_bottom,
#filled-browser:hover .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;
}
#filled-user:hover .collar_right,
#filled-plane:hover .bottom,
#filled-pencil:hover .wood,
#filled-message:hover .back,
#filled-graph:hover .dot_1,
#filled-folder:hover .back,
#filled-diamond:hover .top_1,
#filled-clock:hover .middle,
#filled-camera:hover .button,
#filled-camera:hover .lens,
#filled-camera:hover .lens_inner,
#filled-brush:hover .brush_tip,
#filled-browser:hover .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) }
}
/*=============================================
[ Inactive Styles ]
==============================================*/
/*Genral*/
.flat-line .icon > path {
    stroke: #fff;
    stroke-width: 3px;
    fill: transparent;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
.flat-line .circle {
    stroke: #fff;
    stroke-width: 3px;
    fill: #52be7f;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
/*Exceptions*/
.flat-line .icon > .lightning {
    stroke: #fff;
    stroke-width: 1.5px;
    fill: transparent;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
#line-user .collar_right {
    fill: #52be7f;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
#line-user .collar_left {
    fill: #52be7f;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
#line-lightning .bolt {
    stroke: #fff;
    stroke-width: 3px;
    fill: transparent;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
#line-lightning .highlight {
    fill: transparent;
    stroke: 0px;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
#line-mic .bars_right rect {
    fill: #52be7f;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
#line-coffee .top {
    fill: #52be7f;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}
/*Specifics*/
#line-browser .green {
    fill: #FFF;
    stroke-width: 0px;
}
#line-browser .orange {
    fill: #FFF;
    stroke-width: 0px;
}
#line-browser .red {
    fill: #FFF;
    stroke-width: 0px;
}
#line-browser .screen {
    fill: transparent;
    stroke-width: 0px;
}
#line-brush .brush_silver {
    fill: #FFF;
    stroke-width: 0px;
}
#line-calander .number {
    fill: transparent;
    stroke-width: 0px;
}
#line-camera .lens_inner {
    fill: #FFF;
    stroke-width: 0px;
}
#line-camera .lens {
    fill: transparent;
    stroke-width: 0px;
}
#line-camera .strip {
    fill: transparent;
    stroke-width: 0px;
}
#line-camera .red {
    fill: #FFF;
    stroke-width: 0px;
}
#line-clock .seconds {
    fill: #FFF;
    stroke-width: 0px;
}
#line-clock .middle {
    fill: #FFF;
    stroke-width: 0px;
}
#line-clock .hour {
    fill: #FFF;
    stroke-width: 0px;
}
#line-clock .minute {
    fill: #FFF;
    stroke-width: 0px;
}
#line-clock .face {
    fill: transparent;
    stroke-width: 0px;
}
#line-coffee .top {
    fill: transparent;
    stroke-width: 3px;
    stroke: #fff;
}
#line-coffee .middle {
    fill: #FFF;
    stroke-width: 0px;
}
#line-disk .top {
    fill: #FFF;
    stroke-width: 0px;
}
#line-disk .top_right {
    fill: #FFF;
    stroke-width: 0px;
}
#line-disk .text {
    fill: transparent;
    stroke-width: 0px;
}
#line-email .paper {
    fill: transparent;
    stroke-width: 0px;
}
#line-email .text {
    fill: transparent;
    stroke-width: 0px;
}
#line-film .top {
    fill: transparent;
    stroke-width: 0px;
}
#line-film .bottom {
    fill: transparent;
    stroke-width: 0px;
}
#line-folder .paper_front {
    fill: transparent;
    stroke-width: 0px;
}
#line-folder .paper_back {
    fill: transparent;
    stroke-width: 0px;
}
#line-graph .dot_1,
#line-graph .dot_2,
#line-graph .dot_3,
#line-graph .dot_4 {
    fill: #FFF;
    stroke-width: 0px;
}
#line-home .hole {
    fill: #FFF;
    stroke-width: 0px;
}
#line-home .roof { -webkit-transform: translateY(-5px) }
#line-location .inner {
    fill: #FFF;
    stroke-width: 0px;
}
#line-lock .keyhole {
    fill: transparent;
    stroke-width: 0px;
}
#line-lock .baselight {
    fill: transparent;
    stroke-width: 0px;
}
#line-magnify .glass {
    fill: transparent;
    stroke-width: 0px;
}
#line-message .dots {
    fill: transparent;
    stroke-width: 0px;
}
#line-picture .sun {
    fill: #FFF;
    stroke-width: 0px;
}
#line-picture .mountain {
    fill: #FFF;
    stroke-width: 0px;
}
#line-mic .bars_left {
    fill: #FFF;
    stroke-width: 0px;
}
#line-mic .bars_right rect {
    fill: #FFF;
    stroke-width: 0px;
}
#line-paper .text {
    fill: transparent;
    stroke-width: 0px;
}
#line-paper .corner {
    fill: #FFF;
    stroke-width: 0px;
}
#line-pencil .metal {
    fill: #FFF;
    stroke-width: 0px;
}
#line-phone .screen {
    fill: #FFF;
    stroke-width: 0px;
}
#line-phone .details {
    fill: #FFF;
    stroke-width: 0px;
}
#line-robot .eyes {
    fill: #FFFFFF;
    stroke-width: 0px;
}
#line-suitcase .buttons {
    fill: #FFF;
    stroke-width: 0px;
}
#line-tag .dot {
    fill: #FFF;
    stroke-width: 0px;
}
#line-thumbsdown .dot {
    fill: #FFFFFF;
    stroke-width: 0px;
}
#line-thumbsup .dot {
    fill: #FFFFFF;
    stroke-width: 0px;
}
#line-trash .details {
    fill: #FFF;
    stroke-width: 0px;
}
#line-winner .text {
    fill: #FFFFFF;
    : ;
    stroke-width: 0px;
}
#line-spaceship .light {
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    transform: translateY(1px);
}
/*=============================================
[ Hover Styles ]
==============================================*/
.flat-line:hover .icon {
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    /*animation-name*/
    -webkit-animation-name: line-burst;
    -moz-animation-name: line-burst;
    -ms-animation-name: line-burst;
    -o-animation-name: line-burst;
    animation-name: line-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: 50px 50px !important;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.flat-line:hover .icon > path {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover .circle {
    stroke: transparent;
    stroke-width: 0px;
}
/*Exceptions*/
.flat-line:hover .icon > .lightning {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-user .collar_right {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover#line-user .collar_left {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-lightning .bolt {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-lightning .highlight {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-mic .bars_right rect {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-coffee .top {
    stroke: transparent;
    stroke-width: 0px;
}
#line-browser:hover .circle { fill: #B1EB5B }
#line-browser:hover .screen { fill: #b0b0b0 }
#line-browser:hover .base { fill: #b0b0b0 }
#line-browser:hover .top { fill: #8F8F8F }
#line-browser:hover .green { fill: #AEE42D }
#line-browser:hover .orange { fill: #FFD02C }
#line-browser:hover .red { fill: #E64545 }
#line-brush:hover .brush_base { fill: #00A3C6 }
#line-brush:hover .brush_highlight { fill: #43C1DC }
#line-brush:hover .brush_silver { fill: #C8C8C8 }
#line-brush:hover .brush_tip { fill: #917152 }
#line-brush:hover .circle { fill: #F0A878 }
#line-calander:hover .circle { fill: #F3CF3F }
#line-calander:hover .base_top { fill: #5B3F89 }
#line-calander:hover .left { fill: #848484 }
#line-calander:hover .right { fill: #848484 }
#line-calander:hover .number { fill: #fff }
#line-calander:hover .base_bottom { fill: #644892 }
#line-camera:hover  .circle { fill: #F39C12 }
#line-camera:hover .base { fill: #E0DECD }
#line-camera:hover .strip { fill: #3376D2 }
#line-camera:hover .lens { fill: #CAC8B7 }
#line-camera:hover .lens_inner { fill: #A6A495 }
#line-camera:hover .flash { fill: #FFF }
#line-camera:hover .red { fill: #D25133 }
#line-camera:hover .button { fill: #A6A496 }
#line-clock:hover .circle { fill: #02BD85 }
#line-clock:hover .base { fill: #FF8933 }
#line-clock:hover .face { fill: #FFF }
#line-clock:hover .seconds { fill: #FF725F }
#line-clock:hover .middle { fill: #808080 }
#line-clock:hover .hour { fill: #808080 }
#line-clock:hover .minute { fill: #808080 }
#line-coffee:hover .circle { fill: #82D8B5 }
#line-coffee:hover .base { fill: #8F6349 }
#line-coffee:hover .middle { fill: #9C8679 }
#line-coffee:hover .top { fill: #F1F1F1 }
#line-diamond:hover .circle { fill: #02BD85 }
#line-diamond:hover .middle { fill: #D87598 }
#line-diamond:hover .top_3 { fill: #FFC8DB }
#line-diamond:hover .top_2 { fill: #F2A0BD }
#line-diamond:hover .top_1 { fill: #F2A0BD }
#line-diamond:hover .top_left { fill: #D87598 }
#line-diamond:hover .top_right { fill: #D87598 }
#line-diamond:hover .right { fill: #C15179 }
#line-diamond:hover .left { fill: #FFC8DB }
#line-disk:hover .circle { fill: #F3CF3F }
#line-disk:hover .base { fill: #5D699B }
#line-disk:hover .top { fill: #B2B2B2 }
#line-disk:hover .top_right { fill: #747A90 }
#line-disk:hover .bottom { fill: #D9D9C2 }
#line-disk:hover .text { fill: #747A90 }
#line-email:hover .circle { fill: #7D79BC }
#line-email:hover .top { fill: #3DD97F }
#line-email:hover .paper { fill: #FFFFFF }
#line-email:hover .base { fill: #2DB466 }
#line-email:hover .text { fill: #BBBBBB }
#line-film:hover .circle { fill: #8DD0BE }
#line-film:hover .base { fill: #6E6E6E }
#line-film:hover .bottom { fill: #515151 }
#line-film:hover .top { fill: #8C8C8C }
#line-flag:hover .circle { fill: #8DD0BE }
#line-flag:hover .bottom { fill: #FF5400 }
#line-flag:hover .shadow { fill: #C03F00 }
#line-flag:hover .top { fill: #FF5400 }
#line-flag:hover .pole { fill: #676767 }
#line-folder:hover .circle { fill: #82D8B5 }
#line-folder:hover .back { fill: #9C4588 }
#line-folder:hover .paper_back { fill: #D9D9D9 }
#line-folder:hover .paper_front { fill: #fff }
#line-folder:hover .front { fill: #BF67AB }
#line-graph:hover .circle { fill: #E3A7C0 }
#line-graph:hover .bar_left { fill: #7BC156 }
#line-graph:hover .bar_middle { fill: #92D76C }
#line-graph:hover .bar_right { fill: #64A242 }
#line-graph:hover .front { fill:  }
#line-graph:hover .dot_4,
#line-graph:hover .dot_3,
#line-graph:hover .dot_2,
#line-graph:hover .dot_1 { fill: #fff }
#line-heart:hover .circle { fill: #02BD85 }
#line-heart:hover .base { fill: #BC4B36 }
#line-heart:hover .left { fill: #db5940 }
#line-home:hover .circle { fill: #02BD85 }
#line-home:hover .base { fill: #F1F1F1 }
#line-home:hover .hole { fill: #C3C3C3 }
#line-home:hover .roof { fill: #D34141 }
#line-lightning:hover .circle { fill: #423D5B }
#line-lightning:hover .bolt { fill: #FFD928 }
#line-lightning:hover .highlight { fill: #FFF3B9 }
#line-location:hover .circle { fill: #4890A8 }
#line-location:hover .base { fill: #B6351B }
#line-location:hover .inner { fill: #7E2412 }
#line-lock:hover .circle { fill: #02AF7E }
#line-lock:hover .base { fill: #C9A80D }
#line-lock:hover .baselight { fill: #D9BC36 }
#line-lock:hover .keyhole { fill: #8A7200 }
#line-lock:hover .bar { fill: #C6C6C6 }
#line-magnify:hover .circle { fill: #F2D65F }
#line-magnify:hover .base { fill: #34B9F1 }
#line-magnify:hover .glass { fill: #8DDDFF }
#line-message:hover .circle { fill: #AC5D9F }
#line-message:hover .back { fill: #FFAD10 }
#line-message:hover .front { fill: #00A3C6 }
#line-message:hover .dots { fill: #006A81 }
#line-mic:hover .circle { fill: #F3CF3F }
#line-mic:hover .base { fill: #40979F }
#line-mic:hover .stand { fill: #5F8083 }
#line-mic:hover .bars_left { fill: #267178 }
#line-mic:hover .bars_right rect { fill: #267178 }
#line-paper:hover .circle { fill: #D6D6B8 }
#line-paper:hover .base { fill: #929292 }
#line-paper:hover .front { fill: #FFFFFF }
#line-paper:hover .corner { fill: #D6D6D6 }
#line-paper:hover .text { fill: #BBBBBB }
#line-pencil:hover .circle { fill: #CDEFE1 }
#line-pencil:hover .wood { fill: #FFC833 }
#line-pencil:hover .base_top { fill: #456FD8 }
#line-pencil:hover .base_bottom { fill: #3258B6 }
#line-pencil:hover .base_middle { fill: #567FE5 }
#line-pencil:hover .tip { fill: #567FE5 }
#line-pencil:hover .eraser { fill: #FF72B1 }
#line-pencil:hover .metal { fill: #C6C6C6 }
#line-phone:hover .circle { fill: #E55D57 }
#line-phone:hover .base { fill: #6F82A4 }
#line-phone:hover .screen { fill: #A5B5D3 }
#line-phone:hover .details { fill: #516078 }
#line-picture:hover .circle { fill: #B1EB5B }
#line-picture:hover .back { fill: #A46B49 }
#line-picture:hover .front { fill: #CE8A61 }
#line-picture:hover .sky { fill: #DCF5FF }
#line-picture:hover .sun { fill: #FF7800 }
#line-picture:hover .mountain { fill: #3B8C1E }
#line-plane:hover .circle { fill: #E88D70 }
#line-plane:hover .bottom { fill: #007D7E }
#line-plane:hover .right { fill: #4ED0D1 }
#line-plane:hover .middle { fill: #3AAAAB }
#line-plane:hover .left { fill: #4ED0D1 }
#line-present:hover .circle { fill: #4890A8 }
#line-present:hover .base { fill: #F1F1F1 }
#line-present:hover .top { fill: #C3C3C3 }
#line-present:hover .ribbon { fill: #D34141 }
#line-robot:hover .circle { fill: #E88D70 }
#line-robot:hover .ears { fill: #39517A }
#line-robot:hover .base { fill: #4C70AF }
#line-robot:hover .highlight { fill: #6384BE }
#line-robot:hover .antenna { fill: #A0ABBD }
#line-robot:hover .eyes { fill: #FFFFFF }
#line-rocket:hover .circle { fill: #4BAE97 }
#line-rocket:hover .engine { fill: #7D7D7D }
#line-rocket:hover .base { fill: #B0CED8 }
#line-rocket:hover .window { fill: #8BABB6 }
#line-rocket:hover .glass { fill: #FFFFFF }
#line-rocket:hover .flame { fill: #FF5400 }
#line-screen:hover .circle { fill: #F8B243 }
#line-screen:hover .stand { fill: #516078 }
#line-screen:hover .base { fill: #6F82A4 }
#line-screen:hover .highlight { fill: #A5B5D3 }
#line-screen:hover .logo { fill: #516078 }
#line-settings:hover .circle { fill: #E3A7C0 }
#line-settings:hover .base { fill: #8BAE5D }
#line-settings:hover .top { fill: #698741 }
#line-spaceship:hover .circle { fill: #02BD85 }
#line-spaceship:hover .light { fill: #FFF3B9 }
#line-spaceship:hover .glass { fill: #8DDDFF }
#line-spaceship:hover .base { fill: #7E8CA6 }
#line-spaceship:hover .circles { fill: #56627A }
#line-storm:hover .circle { fill: #90C0D8 }
#line-storm:hover .cloud { fill: #858585 }
#line-storm:hover .lightning { fill: #FFAD10 }
#line-suitcase:hover .circle { fill: #02BD85 }
#line-suitcase:hover .top { fill: #9A4C1D }
#line-suitcase:hover .bottom { fill: #B75B24 }
#line-suitcase:hover .buttons { fill: #C89211 }
#line-tag:hover .circle { fill: #D6D6B8 }
#line-tag:hover .base { fill: #FFBA00 }
#line-tag:hover .dot { fill: #C38E00 }
#line-thumbsdown:hover .circle { fill: #E74C3C }
#line-thumbsdown:hover .base { fill: #F1CDB0 }
#line-thumbsdown:hover .sleeve { fill: #E1AF45 }
#line-thumbsdown:hover .cuff { fill: #339FA9 }
#line-thumbsdown:hover .dot { fill: #FFFFFF }
#line-thumbsup:hover .circle { fill: #02BD85 }
#line-thumbsup:hover .base { fill: #F1CDB0 }
#line-thumbsup:hover .sleeve { fill: #854D37 }
#line-thumbsup:hover .cuff { fill: #C24C28 }
#line-thumbsup:hover .dot { fill: #FFFFFF }
#line-trash:hover .circle { fill: #90C0D8 }
#line-trash:hover .base { fill: #8C8C8C }
#line-trash:hover .details { fill: #515151 }
#line-trash:hover .lid { fill: #6E6E6E }
#line-user:hover .circle { fill: #D1F274 }
#line-user:hover .body { fill: #44B2B6 }
#line-user:hover .collar_right { fill: #FFFFFF }
#line-user:hover .collar_left { fill: #FFFFFF }
#line-user:hover .head { fill: #F1CDB0 }
#line-user:hover .hair { fill: #AB6125 }
#line-winner:hover .circle { fill: #F8B243 }
#line-winner:hover .ribbon { fill: #5BB3F0 }
#line-winner:hover .base { fill: #1983CD }
#line-winner:hover .text { fill: #FFFFFF }
@-webkit-keyframes line-burst { 
     {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-in;
    }
    37% {
        -webkit-transform: scale(1.3);
        animation-timing-function: ease-out;
    }
    55% {
        -webkit-transform: scale(1.17);
        animation-timing-function: ease-in;
    }
    73% {
        -webkit-transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    82% {
        -webkit-transform: scale(1.2);
        animation-timing-function: ease-in;
    }
    91% {
        -webkit-transform: scale(1.3);
        animation-timing-function: ease-out;
    }
    96% {
        -webkit-transform: scale(1.2);
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-out;
    }
}
@-moz-keyframes line-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 line-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;
    }
}
#shadow-camera  .circle { fill: #F39C12 }
#shadow-camera .base { fill: #E0DECD }
#shadow-camera .strip { fill: #3376D2 }
#shadow-camera .lens { fill: #CAC8B7 }
#shadow-camera .lens_inner { fill: #A6A495 }
#shadow-camera .flash { fill: #FFF }
#shadow-camera .red { fill: #D25133 }
#shadow-camera .button { fill: #A6A496 }
#shadow-browser .circle { fill: #B1EB5B }
#shadow-browser .screen { fill: #b0b0b0 }
#shadow-browser .base { fill: #b0b0b0 }
#shadow-browser .top { fill: #8F8F8F }
#shadow-browser .green { fill: #AEE42D }
#shadow-browser .orange { fill: #b0b0b0 }
#shadow-browser .red { fill: #E64545 }
#shadow-brush .brush_base { fill: #00A3C6 }
#shadow-brush .brush_highlight { fill: #43C1DC }
#shadow-brush .brush_silver { fill: #C8C8C8 }
#shadow-brush .brush_tip { fill: #917152 }
#shadow-brush .circle { fill: #F0A878 }
#shadow-calander .circle { fill: #246f91 }
#shadow-calander .base_top { fill: #5B3F89 }
#shadow-calander .left { fill: #848484 }
#shadow-calander .right { fill: #848484 }
#shadow-calander .number { fill: #fff }
#shadow-calander .base_bottom { fill: #644892 }
#shadow-clock .circle { fill: #02BD85 }
#shadow-clock .base { fill: #FF8933 }
#shadow-clock .face { fill: #FFF }
#shadow-clock .seconds { fill: #FF725F }
#shadow-clock .middle { fill: #808080 }
#shadow-clock .hour { fill: #808080 }
#shadow-clock .minute { fill: #808080 }
#shadow-coffee .circle { fill: #90c0d8 }
#shadow-coffee .base { fill: #8F6349 }
#shadow-coffee .middle { fill: #9C8679 }
#shadow-coffee .top { fill: #F1F1F1 }
#shadow-diamond .circle { fill: #02BD85 }
#shadow-diamond .middle { fill: #D87598 }
#shadow-diamond .top_3 { fill: #FFC8DB }
#shadow-diamond .top_2 { fill: #F2A0BD }
#shadow-diamond .top_1 { fill: #F2A0BD }
#shadow-diamond .top_left { fill: #D87598 }
#shadow-diamond .top_right { fill: #D87598 }
#shadow-diamond .right { fill: #C15179 }
#shadow-diamond .left { fill: #FFC8DB }
#shadow-disk .circle { fill: #f07848 }
#shadow-disk .base { fill: #5D699B }
#shadow-disk .top { fill: #B2B2B2 }
#shadow-disk .top_right { fill: #747A90 }
#shadow-disk .bottom { fill: #D9D9C2 }
#shadow-disk .text { fill: #747A90 }
#shadow-email .circle { fill: #7D79BC }
#shadow-email .top { fill: #3DD97F }
#shadow-email .paper { fill: #FFFFFF }
#shadow-email .base { fill: #2DB466 }
#shadow-email .text { fill: #BBBBBB }
#shadow-film .circle { fill: #8DD0BE }
#shadow-film .base { fill: #6E6E6E }
#shadow-film .bottom { fill: #515151 }
#shadow-film .top { fill: #8C8C8C }
#shadow-flag .circle { fill: #8DD0BE }
#shadow-flag .bottom { fill: #FF5400 }
#shadow-flag .shadow { fill: #C03F00 }
#shadow-flag .top { fill: #FF5400 }
#shadow-flag .pole { fill: #676767 }
#shadow-folder .circle { fill: #82D8B5 }
#shadow-folder .back { fill: #9C4588 }
#shadow-folder .paper_back { fill: #D9D9D9 }
#shadow-folder .paper_front { fill: #fff }
#shadow-folder .front { fill: #BF67AB }
#shadow-graph .circle { fill: #E3A7C0 }
#shadow-graph .bar_left { fill: #7BC156 }
#shadow-graph .bar_middle { fill: #92D76C }
#shadow-graph .bar_right { fill: #64A242 }
#shadow-graph .front { fill:  }
#shadow-graph .dot_4,
#shadow-graph .dot_3,
#shadow-graph .dot_2,
#shadow-graph .dot_1 { fill: #fff }
#shadow-heart .circle { fill: #02BD85 }
#shadow-heart .base { fill: #BC4B36 }
#shadow-heart .left { fill: #db5940 }
#shadow-home .circle { fill: #02BD85 }
#shadow-home .base { fill: #F1F1F1 }
#shadow-home .hole { fill: #C3C3C3 }
#shadow-home .roof { fill: #D34141 }
#shadow-lightning .circle { fill: #423D5B }
#shadow-lightning .bolt { fill: #FFD928 }
#shadow-lightning .highlight { fill: #FFF3B9 }
#shadow-location .circle { fill: #4890A8 }
#shadow-location .base { fill: #B6351B }
#shadow-location .inner { fill: #7E2412 }
#shadow-lock .circle { fill: #02AF7E }
#shadow-lock .base { fill: #C9A80D }
#shadow-lock .baselight { fill: #D9BC36 }
#shadow-lock .keyhole { fill: #8A7200 }
#shadow-lock .bar { fill: #C6C6C6 }
#shadow-magnify .circle { fill: #F2D65F }
#shadow-magnify .base { fill: #34B9F1 }
#shadow-magnify .glass { fill: #8DDDFF }
#shadow-message .circle { fill: #AC5D9F }
#shadow-message .back { fill: #FFAD10 }
#shadow-message .front { fill: #00A3C6 }
#shadow-message .dots { fill: #006A81 }
#shadow-mic .circle { fill: #f39c12 }
#shadow-mic .base { fill: #40979F }
#shadow-mic .stand { fill: #5F8083 }
#shadow-mic .bars_left { fill: #267178 }
#shadow-mic .bars_right rect { fill: #267178 }
#shadow-paper .circle { fill: #D6D6B8 }
#shadow-paper .base { fill: #929292 }
#shadow-paper .front { fill: #FFFFFF }
#shadow-paper .corner { fill: #D6D6D6 }
#shadow-paper .text { fill: #BBBBBB }
#shadow-pencil .circle { fill: #CDEFE1 }
#shadow-pencil .wood { fill: #FFC833 }
#shadow-pencil .base_top { fill: #456FD8 }
#shadow-pencil .base_bottom { fill: #3258B6 }
#shadow-pencil .base_middle { fill: #567FE5 }
#shadow-pencil .tip { fill: #567FE5 }
#shadow-pencil .eraser { fill: #FF72B1 }
#shadow-pencil .metal { fill: #C6C6C6 }
#shadow-phone .circle { fill: #E55D57 }
#shadow-phone .base { fill: #6F82A4 }
#shadow-phone .screen { fill: #A5B5D3 }
#shadow-phone .details { fill: #516078 }
#shadow-picture .circle { fill: #B1EB5B }
#shadow-picture .back { fill: #A46B49 }
#shadow-picture .front { fill: #CE8A61 }
#shadow-picture .sky { fill: #DCF5FF }
#shadow-picture .sun { fill: #FF7800 }
#shadow-picture .mountain { fill: #3B8C1E }
#shadow-plane .circle { fill: #E88D70 }
#shadow-plane .bottom { fill: #007D7E }
#shadow-plane .right { fill: #4ED0D1 }
#shadow-plane .middle { fill: #3AAAAB }
#shadow-plane .left { fill: #4ED0D1 }
#shadow-present .circle { fill: #4890A8 }
#shadow-present .base { fill: #F1F1F1 }
#shadow-present .top { fill: #C3C3C3 }
#shadow-present .ribbon { fill: #D34141 }
#shadow-robot .circle { fill: #E88D70 }
#shadow-robot .ears { fill: #39517A }
#shadow-robot .base { fill: #4C70AF }
#shadow-robot .highlight { fill: #6384BE }
#shadow-robot .antenna { fill: #A0ABBD }
#shadow-robot .eyes { fill: #FFFFFF }
#shadow-rocket .circle { fill: #4BAE97 }
#shadow-rocket .engine { fill: #7D7D7D }
#shadow-rocket .base { fill: #B0CED8 }
#shadow-rocket .window { fill: #8BABB6 }
#shadow-rocket .glass { fill: #FFFFFF }
#shadow-rocket .flame { fill: #FF5400 }
#shadow-screen .circle { fill: #F8B243 }
#shadow-screen .stand { fill: #516078 }
#shadow-screen .base { fill: #6F82A4 }
#shadow-screen .highlight { fill: #A5B5D3 }
#shadow-screen .logo { fill: #516078 }
#shadow-settings .circle { fill: #E3A7C0 }
#shadow-settings .base { fill: #8BAE5D }
#shadow-settings .top { fill: #698741 }
#shadow-spaceship .circle { fill: #02BD85 }
#shadow-spaceship .light { fill: #FFF3B9 }
#shadow-spaceship .glass { fill: #8DDDFF }
#shadow-spaceship .base { fill: #7E8CA6 }
#shadow-spaceship .circles { fill: #56627A }
#shadow-storm .circle { fill: #90C0D8 }
#shadow-storm .cloud { fill: #858585 }
#shadow-storm .lightning { fill: #FFAD10 }
#shadow-suitcase .circle { fill: #02BD85 }
#shadow-suitcase .top { fill: #9A4C1D }
#shadow-suitcase .bottom { fill: #B75B24 }
#shadow-suitcase .buttons { fill: #C89211 }
#shadow-tag .circle { fill: #D6D6B8 }
#shadow-tag .base { fill: #FFBA00 }
#shadow-tag .dot { fill: #C38E00 }
#shadow-thumbsdown .circle { fill: #E74C3C }
#shadow-thumbsdown .base { fill: #F1CDB0 }
#shadow-thumbsdown .sleeve { fill: #E1AF45 }
#shadow-thumbsdown .cuff { fill: #339FA9 }
#shadow-thumbsdown .dot { fill: #FFFFFF }
#shadow-thumbsup .circle { fill: #02BD85 }
#shadow-thumbsup .base { fill: #F1CDB0 }
#shadow-thumbsup .sleeve { fill: #854D37 }
#shadow-thumbsup .cuff { fill: #C24C28 }
#shadow-thumbsup .dot { fill: #FFFFFF }
#shadow-trash .circle { fill: #90C0D8 }
#shadow-trash .base { fill: #8C8C8C }
#shadow-trash .details { fill: #515151 }
#shadow-trash .lid { fill: #6E6E6E }
#shadow-user .circle { fill: #D1F274 }
#shadow-user .body { fill: #44B2B6 }
#shadow-user .collar_right { fill: #FFFFFF }
#shadow-user .collar_left { fill: #FFFFFF }
#shadow-user .head { fill: #F1CDB0 }
#shadow-user .hair { fill: #AB6125 }
#shadow-winner .circle { fill: #F8B243 }
#shadow-winner .ribbon { fill: #5BB3F0 }


#shadow-winner .base { fill: #1983CD }
#shadow-winner .text { fill: #FFFFFF }
.iconwrap {
    display: block;
    width: 168px;
    height: 170px;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
}
.long-shadow {
    background: url(http://www.pencilscoop.com/demos/animated-svg/demo/images/long_shadow.png) no-repeat;
    width: 168px;
    height: 170px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all .2s;
    transition: all .2s;
    display: block;
    top: 47px;
    left: 35px;
}
.flat-shadow {
    z-index: 999;
    position: relative;
}
.iconwrap:hover .long-shadow {
    opacity: 1;
    -moz-transition-delay: .5s !important;
    -webkit-transition-delay: .5s !important;
    transition-delay: .5s !important;
}
.flat-shadow:hover .icon {
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    /*animation-name*/
    -webkit-animation-name: shadow-burst;
    -moz-animation-name: shadow-burst;
    -ms-animation-name: shadow-burst;
    -o-animation-name: shadow-burst;
    animation-name: shadow-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: 50px 50px !important;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
@-webkit-keyframes shadow-burst { 
     {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-in;
    }
    37% {
        -webkit-transform: scale(1.3);
        animation-timing-function: ease-out;
    }
    55% {
        -webkit-transform: scale(1.17);
        animation-timing-function: ease-in;
    }
    73% {
        -webkit-transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    82% {
        -webkit-transform: scale(1.2);
        animation-timing-function: ease-in;
    }
    91% {
        -webkit-transform: scale(1.3);
        animation-timing-function: ease-out;
    }
    96% {
        -webkit-transform: scale(1.2);
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-out;
    }
}
@-moz-keyframes shadow-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 shadow-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;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) { 
    .long-shadow {
        background: url(http://www.pencilscoop.com/demos/animated-svg/demo/images/long_shadow@2x.png) no-repeat;
        width: 168px;
        height: 170px;
        background-size: 168px 170px;
    }
}