@keyframes bounce {
	0%, 20%, 60%, 100% {
	  -webkit-transform: translateY(0);
	  transform: translateY(0);
	}
  
	40% {
	  -webkit-transform: translateY(-20px);
	  transform: translateY(-20px);
	}
  
	80% {
	  -webkit-transform: translateY(-10px);
	  transform: translateY(-10px);
	}
}

/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

/* keyframe function*/
  
 
 
div.svg-box {
	padding: 10px 15px;
	margin: 0 auto;
	max-width: 120px;
	max-height: 120px;
}

/* Effect - fall and drop */
div.svg-svg-briefcase{
	content: url(svg/svg-briefcase.svg);
	max-width: 150px; 
	max-height: 150px;
    transition: transform 1s ease-in-out;
}

div.svg-svg-briefcase:hover{
	animation: bounce 1s;
}

div.svg-svg-people{
	content: url(svg/svg-people.svg);
	max-width: 150px; 
	max-height: 150px;
    transition: transform 1s ease-in-out;
    margin-top: 50px;
}

div.svg-svg-people:hover{
	animation: bounce 1s;
}

/* Effect - fall and drop */
div.svg-svg-mic{
	content: url(svg/svg-mic.svg);
	width: 150px; 
	height: 150px;
	transition: transform 1s ease-in-out;
}

div.svg-svg-mic:hover{
	animation: bounce 1s;
}

/* Effect - rotate / reflection */
div.svg-svg-tag{
    content: url(svg/svg-tag.svg);
    transition: 0.70s;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    width: 150px;
    height: 150px;
    display: block;
    margin-right: auto;
    margin-left: auto;
}
div.svg-svg-tag:hover{
    transition: 0.70s;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}




/* Effect - rotate / reflection */
div.svg-svg-meter{
    content: url(svg/svg-meter.svg);
    transition: width 2s, height 2s, transform 2s;
    width: 150px;
    height: 150px;
}
div.svg-svg-meter:hover{
    transform: rotate(180deg);
}

/* Effect - fade in */
div.svg-svg-checklist{
    content: url(svg/svg-checklist.svg);
    opacity:0.5;
    transition: 1s ease;
    width: 150px;
    height: 150px;
}
div.svg-svg-checklist:hover{
    opacity:1;
    transition: 1s ease;
}

/* Effect - fade in */
div.svg-svg-earth{
    content: url(svg/svg-earth.svg);
    opacity:0.5;
    transition: 1s ease;
    width: 180px;
    height: 150px;
}
div.svg-svg-earth:hover{
    opacity:1;
    transition: 1s ease;
}

/* Effect - fade in 
div.svg-svg-people{
    content: url(svg/svg-people.svg);
    opacity:0.5;
    transition: 1s ease;
    width: 150px;
    height: 150px;
}
div.svg-svg-people:hover{
    opacity:1;
    transition: 1s ease;
}*/


/* Effect - scale */
div.svg-svg-dollar{
    content: url(svg/svg-dollar.svg);
    transition: 1s ease;
    width: 150px;
    height: 150px;
}
div.svg-svg-dollar:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;    
}

/* Effect - scale */
div.svg-svg-caption{
    content: url(svg/svg-caption.svg);
    transition: 1s ease;
    width: 150px;
    height: 150px;
}
div.svg-svg-caption:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;    
}

/* Effect - scale */
div.svg-svg-rocket{
    content: url(svg/svg-rocket.svg);
    transition: 1s ease;
    width: 150px;
    height: 150px;
}
div.svg-svg-rocket:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;    
}

div.svg-svg-calendar{
    content: url(svg/svg-calendar.svg);
    transition: 1s ease;
    width: 150px;
    height: 150px;
}
div.svg-svg-calendar:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;
}

/* Effect - blink*/
div.svg-svg-badge{
    content: url(svg/svg-badge.svg);
    width: 150px;
    height: 150px;
}

div.svg-svg-badge:hover{
    -moz-animation: blink normal 1s infinite ease-in-out; 
    -webkit-animation: blink normal 1s infinite ease-in-out; 
    -ms-animation: blink normal 1s infinite ease-in-out; 
    animation: blink normal 1s infinite ease-in-out; 
}

/* Effect - blink*/
div.svg-svg-light{
    content: url(svg/svg-light.svg);
	width: 150px;
    height: 150px;
}

div.svg-svg-light:hover{
    -moz-animation: blink normal 1s infinite ease-in-out; 
    -webkit-animation: blink normal 1s infinite ease-in-out; 
    -ms-animation: blink normal 1s infinite ease-in-out; 
    animation: blink normal 1s infinite ease-in-out; 
}

/* Effect - blink*/
div.svg-svg-voice{
    content: url(svg/svg-voice.svg);
    width: 150px;
    height: 150px;
}

div.svg-svg-voice:hover{
    -moz-animation: blink normal 1s infinite ease-in-out; 
    -webkit-animation: blink normal 1s infinite ease-in-out; 
    -ms-animation: blink normal 1s infinite ease-in-out; 
    animation: blink normal 1s infinite ease-in-out; 
}

/* Effect - blink*/
div.svg-svg-remark{
    content: url(svg/svg-remark.svg);
    width: 150px;
    height: 150px;
}

div.svg-svg-remark:hover{
    -moz-animation: blink normal 1s infinite ease-in-out; 
    -webkit-animation: blink normal 1s infinite ease-in-out; 
    -ms-animation: blink normal 1s infinite ease-in-out; 
    animation: blink normal 1s infinite ease-in-out; 
}

/* Effect - Scale and rotate */
div.svg-svg-lift{
    content: url(svg/svg-lift.svg);
    width: 150px;
    height: 150px;
    transition: transform .5s ease-in-out;
}

div.svg-svg-lift:hover{
    transform: scale(1.2) rotate(25deg);
}

/* Effect - Blur */
div.svg-svg-profile{
    content: url(svg/svg-profile.svg);
    width: 150px; 
    height: 150px;
	transition: transform 1s, filter 0.3s ease-in-out;
	filter: blur(0.5px);
}

div.svg-svg-profile:hover{
    filter: blur(0);
  	transform: scale(1);
}

/* Effect - Blur 
div.svg-svg-calander{
    content: url(svg/svg-calander.svg);
    width: 150px; 
    height: 150px;
	transition: transform 1s, filter 0.3s ease-in-out;
	filter: blur(0.5px);
}

div.svg-svg-calander:hover{
    filter: blur(0);
  	transform: scale(1);
}*/

/* Effect - Blur */
div.svg-svg-quote{
    content: url(svg/svg-quote.svg);
    width: 150px; 
    height: 150px;
	transition: transform 1s, filter 0.3s ease-in-out;
	filter: blur(0.5px);
}

div.svg-svg-quote:hover{
    filter: blur(0);
  	transform: scale(1);
}


div.svg-svg-calendar-21{
    content: url(svg/svg-calendar-21.svg);
    width: 150px;
    height: 150px;
}

div.svg-svg-dollar-21{
    content: url(svg/svg-dollar-21.svg);
    width: 150px;
    height: 150px;
}

div.svg-svg-people-21{
    content: url(svg/svg-people-21.svg);
    width: 150px;
    height: 150px;
}

div.svg-svg-hand{
    content: url(svg/svg-hand.svg);
    width: 150px;
    height: 150px;
}