.effect {
  width: 100%; 
}
.effect h2 {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 3px;
}
.effect:nth-child(2) {
  margin-top: 50px;
}
 
.effect .buttons { 
 border-top: 2px solid #00adef;
 margin-top: 0px;  
 padding-top: 20px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
    
}
.effect a:last-child {
  margin-right: 0px;
}

/*common link styles !!!YOU NEED THEM*/
.effect {
  /*display: flex; !!!uncomment this line !!!*/
}
.effect a {
	text-decoration: none !important;
    color: #bbbbbb;
	font-family: Exo;
    font-style: normal;
    font-weight: 100;
    font-size: 14px;

   /* width: 35px;*/
    height: 35px;
    /*display: -webkit-box;*/
    display: -ms-flexbox;
    /*display: flex;*/
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 06px;
    margin-right: 20px;
    overflow: hidden;
    position: relative;
	
	 
	 
}

.easew {
	    text-decoration: none !important;
	    color: #fff; 
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    border-radius: 06px;
	    margin-right: 20px;
	    font-size: 20px;
	    overflow: hidden;
	    position: relative;
}



.effect a i {
  position: relative;
  color:#fff;
  z-index: 3;
  width: 35px;

}
.effect a.fb {
  background-color: #3b5998;
  width: 35px;
  outline:none;
  
}
.effect a.tw {
  background-color: #00aced;
}
.effect a.g-plus {
  background-color: #dd4b39;
}
.effect a.dribbble {
  background-color: #ea4c89;
}
.effect a.pinterest {
  background-color: #cb2027;
}
.effect a.insta {
  background-color: #bc2a8d;
  width: 35px;	
  outline:none;   
}
.effect a.in {
  background-color: #d62523;
  outline:none;
   
}
.effect a.vimeo {
  background-color: #1ab7ea;
  outline:none;
}

/* aeneas effect */
.effect.aeneas a {
  -webkit-transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s, -webkit-transform 0.4s linear 0s;
  transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
  transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s, -webkit-transform 0.4s linear 0s;
}
.effect.aeneas a i {
  -webkit-transition: -webkit-transform 0.4s linear 0s;
  transition: -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, -webkit-transform 0.4s linear 0s;
}
.effect.aeneas a:hover {
  /*-webkit-transform: rotate(360deg);
          transform: rotate(360deg);*/
  border-radius: 40%;
}
.effect.aeneas a:hover i {
  -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
}

/* jaques effect */
.effect.jaques a {
  -webkit-transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
  transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
}
.effect.jaques a:hover {
  border-radius: 50%;
}

/* egeon effect */
.effect.egeon a {
  -webkit-transition: border-radius 0.2s linear 0.2s, -webkit-transform 0.2s linear 0s;
  transition: border-radius 0.2s linear 0.2s, -webkit-transform 0.2s linear 0s;
  transition: transform 0.2s linear 0s, border-radius 0.2s linear 0.2s;
  transition: transform 0.2s linear 0s, border-radius 0.2s linear 0.2s, -webkit-transform 0.2s linear 0s;
}
.effect.egeon a i {
  -webkit-transition: -webkit-transform 0.2s linear 0s;
  transition: -webkit-transform 0.2s linear 0s;
  transition: transform 0.2s linear 0s;
  transition: transform 0.2s linear 0s, -webkit-transform 0.2s linear 0s;
}
.effect.egeon a:hover {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.effect.egeon a:hover i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/* claudio effect */
.effect.claudio a {
  -webkit-transition: border-radius 0.2s linear 0s, -webkit-transform 0.2s linear 0s;
  transition: border-radius 0.2s linear 0s, -webkit-transform 0.2s linear 0s;
  transition: transform 0.2s linear 0s, border-radius 0.2s linear 0s;
  transition: transform 0.2s linear 0s, border-radius 0.2s linear 0s, -webkit-transform 0.2s linear 0s;
}
.effect.claudio a:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  border-bottom-left-radius: 50%;
  border-top-right-radius: 50%;
}

/* laertes effect */
.effect.laertes a {
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.effect.laertes a i {
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.effect.laertes a:hover {
  border-radius: 50%/20%;
}
.effect.laertes a:hover i {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  text-shadow: 0 0 12px rgba(33, 33, 33, 0.6);
}