.effect-1 {
background-image: url(../images/icons/icon-arrow.png);
transition: background-image 0.2s ease-in-out;
  position: relative;
  height: 64px;
  width: 64px;
  margin: 28px 0px 0px 74px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 100px;
  font-family: 'Monoton', cursive;
  
  -webkit-transform: translateZ(0); }
  .effect-1:hover {
  	background-image: url(../images/icons/icon-arrow-h.png);
    -webkit-transition: background-image 0.2s;
    -moz-transition: background-image 0.2s;
    -o-transition: background-image 0.2s;
    transition: background-image 0.2s;
     }
    .effect-1:hover:after {
    
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
      -webkit-transition: -webkit-transform 0.2s;
      -moz-transition: -moz-transform 0.2s;
      -o-transition: -o-transform 0.2s;
      transition: transform 0.2s; 
      
     }
     
.effect-1:after {
  position: absolute;
  top: -10px;
  left: -10px;
  content: '';
  height: 100%;
  width: 100%;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 5px #fff;
  -moz-box-shadow: 0 0 0 5px #fff;
  box-shadow: 0 0 0 5px #fff;
  -webkit-transform: scale(0.7, 0.7);
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -o-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  transition: transform 0.2s; 
  }
  
  .effect-2 {
background-image: url(../images/icons/icon-play.png);
transition: background-image 0.2s ease-in-out;
  position: relative;
  height: 64px;
  width: 64px;
  margin: 28px 0px 0px 74px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 100px;
  font-family: 'Monoton', cursive;
  
  -webkit-transform: translateZ(0); }
  .effect-2:hover {
  	background-image: url(../images/icons/icon-play-h.png);
    -webkit-transition: background-image 0.2s;
    -moz-transition: background-image 0.2s;
    -o-transition: background-image 0.2s;
    transition: background-image 0.2s;
     }
    .effect-2:hover:after {
    
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
      -webkit-transition: -webkit-transform 0.2s;
      -moz-transition: -moz-transform 0.2s;
      -o-transition: -o-transform 0.2s;
      transition: transform 0.2s; 
      
     }
     
.effect-2:after {
  position: absolute;
  top: -10px;
  left: -10px;
  content: '';
  height: 100%;
  width: 100%;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 5px #fff;
  -moz-box-shadow: 0 0 0 5px #fff;
  box-shadow: 0 0 0 5px #fff;
  -webkit-transform: scale(0.7, 0.7);
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -o-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  transition: transform 0.2s; 
  }
  
  

 .effect-3 {
background-image: url(../images/icons/icon-heart.png);
transition: background-image 0.2s ease-in-out;
  position: relative;
  height: 64px;
  width: 64px;
  margin: 28px 0px 0px 74px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 100px;
  font-family: 'Monoton', cursive;
  
  -webkit-transform: translateZ(0); }
  .effect-3:hover {
  	background-image: url(../images/icons/icon-heart-h.png);
    -webkit-transition: background-image 0.2s;
    -moz-transition: background-image 0.2s;
    -o-transition: background-image 0.2s;
    transition: background-image 0.2s;
     }
    .effect-3:hover:after {
    
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
      -webkit-transition: -webkit-transform 0.2s;
      -moz-transition: -moz-transform 0.2s;
      -o-transition: -o-transform 0.2s;
      transition: transform 0.2s; 
      
     }
     
.effect-3:after {
  position: absolute;
  top: -10px;
  left: -10px;
  content: '';
  height: 100%;
  width: 100%;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 5px #fff;
  -moz-box-shadow: 0 0 0 5px #fff;
  box-shadow: 0 0 0 5px #fff;
  -webkit-transform: scale(0.7, 0.7);
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -o-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  transition: transform 0.2s; 
  }
  
  
  

 .effect-4 {
background-image: url(../images/icons/icon-mic.png);
transition: background-image 0.2s ease-in-out;
  position: relative;
  height: 64px;
  width: 64px;
  margin: 28px 0px 0px 74px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 100px;
  font-family: 'Monoton', cursive;
  
  -webkit-transform: translateZ(0); }
  .effect-4:hover {
  	background-image: url(../images/icons/icon-mic-h.png);
    -webkit-transition: background-image 0.2s;
    -moz-transition: background-image 0.2s;
    -o-transition: background-image 0.2s;
    transition: background-image 0.2s;
     }
    .effect-4:hover:after {
    
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
      -webkit-transition: -webkit-transform 0.2s;
      -moz-transition: -moz-transform 0.2s;
      -o-transition: -o-transform 0.2s;
      transition: transform 0.2s; 
      
     }
     
.effect-4:after {
  position: absolute;
  top: -10px;
  left: -10px;
  content: '';
  height: 100%;
  width: 100%;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 5px #fff;
  -moz-box-shadow: 0 0 0 5px #fff;
  box-shadow: 0 0 0 5px #fff;
  -webkit-transform: scale(0.7, 0.7);
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -o-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  transition: transform 0.2s; 
  }
  
  
.effect-5 {
background-image: url(../images/icons/icon-arrow.png);
transition: background-image 0.2s ease-in-out;
  position: relative;
  height: 64px;
  width: 64px;
  margin: 31px 0px 0px 78px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 100px;
  font-family: 'Monoton', cursive;
  
  -webkit-transform: translateZ(0); }
  .effect-5:hover {
  	background-image: url(../images/icons/icon-arrow-h.png);
    -webkit-transition: background-image 0.2s;
    -moz-transition: background-image 0.2s;
    -o-transition: background-image 0.2s;
    transition: background-image 0.2s;
     }
    .effect-5:hover:after {
    
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
      -webkit-transition: -webkit-transform 0.2s;
      -moz-transition: -moz-transform 0.2s;
      -o-transition: -o-transform 0.2s;
      transition: transform 0.2s; 
      
     }
     
.effect-5:after {
  position: absolute;
  top: -10px;
  left: -10px;
  content: '';
  height: 100%;
  width: 100%;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 5px #fff;
  -moz-box-shadow: 0 0 0 5px #fff;
  box-shadow: 0 0 0 5px #fff;
  -webkit-transform: scale(0.7, 0.7);
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -o-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  transition: transform 0.2s; 
  }