@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}

body {
	font-family: 'Ubuntu', sans-serif;
}

a {
	text-decoration:none;
	
}

sidebar .button {
    display: inline-block;
    position: relative;
}

sidebar .vertical-icons > ul {
    display: inline-block;
    margin-top: 2px;
    max-width: 5px;
}

sidebar .vertical-icons ul li{
    display: inline-block;
    margin-top: 2px;
}

sidebar .button i {
    display: inline-block;
    min-width: 50px;
	min-height: 50px;
    padding: 5px 8px;
    text-align: center; /* tengah kiri - kanan */
	font-size: 38px;
	line-height:50px; /* tengah atas - bawah, ukuran lihat dari ukuran height */
}

sidebar .button, sidebar .button:hover:after{
	color:white;
	background:#4d69a2;
}
	
sidebar .button.facebook:hover:after, sidebar .button.facebook i{
	background: #4d69a2; /* Old browsers */
	background: -moz-linear-gradient(top,  #4d69a2 0%, #3c5998 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d69a2), color-stop(100%,#3c5998)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4d69a2 0%,#3c5998 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4d69a2 0%,#3c5998 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4d69a2 0%,#3c5998 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #4d69a2 0%,#3c5998 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d69a2', endColorstr='#3c5998',GradientType=0 ); /* IE6-9 */
}
	
sidebar .button.googleplus:hover:after , sidebar .button.googleplus i{
	background: #DD4C39; /* Old browsers */
}

sidebar .button.twitter:hover:after , sidebar .button.twitter i{
	background: #03c6f1; /* Old browsers */
	background: -moz-linear-gradient(top,  #03c6f1 0%, #00adef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#03c6f1), color-stop(100%,#00adef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #03c6f1 0%,#00adef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #03c6f1 0%,#00adef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #03c6f1 0%,#00adef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #03c6f1 0%,#00adef 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03c6f1', endColorstr='#00adef',GradientType=0 ); /* IE6-9 */
}

sidebar .button.youtube:hover:after, sidebar .button.youtube i{
	background: #cd322c; /* Old browsers */
	background: -moz-linear-gradient(top,  #cd322c 0%, #932420 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cd322c), color-stop(100%,#932420)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #cd322c 0%,#932420 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #cd322c 0%,#932420 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #cd322c 0%,#932420 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #cd322c 0%,#932420 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd322c', endColorstr='#932420',GradientType=0 ); /* IE6-9 */
}

sidebar .button.linkedin:hover:after , sidebar .button.linkedin i{
	background: #1f88bd; /* Old browsers */
	background: -moz-linear-gradient(top,  #1f88bd 0%, #0074b2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f88bd), color-stop(100%,#0074b2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #1f88bd 0%,#0074b2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #1f88bd 0%,#0074b2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #1f88bd 0%,#0074b2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #1f88bd 0%,#0074b2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f88bd', endColorstr='#0074b2',GradientType=0 ); /* IE6-9 */
}

sidebar .button.code:hover:after , sidebar .button.code i{
	background: #00B0F6;
}

sidebar .button.github:hover:after , sidebar .button.github i{
	background: #1E89DA;
}

sidebar .button.instagram:hover:after , sidebar .button.instagram i{
	background: #563C0F;
}

sidebar .button.envelope:hover:after , sidebar .button.envelope i{
	background: #cb2027; /* Old browsers */
}

sidebar .button.tumblr:hover:after , sidebar .button.tumblr i{
	background: #2C4762; /* Old browsers */
}
	
sidebar .vertical-icons.horizontal-slide .button:hover:after {
	top:0;
    left: 70px;
    color: #fff;
    content: attr(data-title);
    display: block;
    padding: 2px 10px;
    position: absolute;
	line-height:56px;
    z-index: 1;
	white-space:nowrap;
	animation:slideleft 1.5s;
	-webkit-animation:slideleft 1.5s; /* Safari and Chrome */
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	background:#491a3f;opacity:0.9;filter:alpha(opacity=40); /* Transparan */
}

@keyframes slideleft {
	0%   { transform:scaleX(0); transform-origin:0% 40%; }
	100% { transform:scaleX(1); transform-origin:0% 40%;}
}

@-webkit-keyframes slideleft { /* Safari and Chrome */
	0%   { -webkit-transform:scaleX(0); -webkit-transform-origin:0% 40%;}
	100% { -webkit-transform:scaleX(1); -webkit-transform-origin:0% 40%;}
}