/* Box colors */
/* Moema */
.button--moema {
  border-radius: 13px;
  color: #fff;
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}

.button--moema::before {
  content: '';
  position: relative;
  top: -60px;
  left: -20px;
  bottom: -20px;
  right: -20px;
  background: inherit;
  /*z-index: -1;*/
  opacity: 0.9;
  -webkit-transform: scale3d(0.5, 0.3, 1);
  transform: scale3d(0.8, 0.5, 1);
  height: 5.9rem;
}
.button--moema:hover {
  -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
  transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
  -webkit-animation: anim-moema-1 0.3s forwards;
  animation: anim-moema-1 0.3s forwards;
}

.button--moema:hover::before {
  -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
  animation: anim-moema-2 0.3s 0.3s forwards;
}
@-webkit-keyframes anim-moema-1 {
  60% {
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
  }
  85% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes anim-moema-1 {
  60% {
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
  }
  85% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes anim-moema-2 {
  to {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes anim-moema-2 {
  to {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}



/*Skills*/


#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:100px;
 font-size:55px;
 color:#2E64FE;
}
#wrapper h1 a
{
 color:#2E64FE;
 font-size:18px;
}
.skill_name
{
 margin-left: 0rem;
 height: 40px;
 line-height: 22px;
 font-weight: normal;
 font-size: 1.8rem;
 color: black;
 clear: both;
 padding-left: 1rem;
 border-radius: 3px 0px 0px 3px;
 top: 2.5rem;
 position: relative;
 z-index: 99;
 font-weight: 500;
 margin-bottom: 1rem;
}
.skillbar_wrapper
{
 float:left;
 position:relative;
 display:block;
 width:400px;
 background-color:#efff03;
 height:50px;
 border-radius:0px 3px 3px 0px;
}
.skillbar_bar
{
 height:40px;
 width:0px;
 border-radius:0px 3px 3px 0px;
}
#skillbar_php,#skillbar_ux,#skillbar_wordpress,#skillbar_javascript,
#skillbar_xd,#skillbar_html5,#skillbar_bootstrap,
#skillbar_css,#skillbar_seo,#skillbar_doubleclick
{
 background-color:black;
}
.skill_bar_percent
{
position: absolute;
right: -53px;
top: 0;
font-size: 22px;
height: 35px;
line-height: 35px;
color: black;
}
.skill_bar_percent.star {
color: transparent;
text-shadow: 0 0 0 #ffffff;
}


.arrow-services {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right-services {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left-services {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}