#tombol{
	background-color: #c4d5ef;
	color: black;
	text-decoration: none;
	/*border-radius: 10%;*/
	/*height: 40px;
	width: 200px;*/
	-webkit-transition: 0.4s ease;
  transition: 0.4s ease;

}

#tombol:hover{
	background-color: #88e5ea;
	color: white;
	-webkit-transform: scale(1.08);
  transform: scale(1.08);

}

#tmbl{
	/*background-color: #c4d5ef;
	color: black;*/
	text-decoration: none;
	/*border-radius: 10%;*/
	/*height: 40px;
	width: 200px;*/
	-webkit-transition: 0.4s ease;
  transition: 0.4s ease;

}

#tmbl:hover{
	/*background-color: #88e5ea;
	color: white;*/
	-webkit-transform: scale(1.08);
  transform: scale(1.08);

}


.sosmed{
	text-decoration: none;
	-webkit-transition: 0.4s ease;
  transition: 0.4s ease;

}

.sosmed:hover{
	color: yellow;
	-webkit-transform: scale(1.08);
  transform: scale(2.08);

}

.kontak{
	text-decoration: none;
	-webkit-transition: 0.4s ease;
  transition: 0.4s ease;

}
.kontak:hover{
	color: yellow;
	-webkit-transform: scale(1.08);
  transform: scale(1.08);

}

.menu{
	color: black;
	text-decoration: none;
	-webkit-transition: 0.4s ease;
  transition: 0.4s ease;

}
.menu:hover{
	color: black;
	-webkit-transform: scale(1.08);
  transform: scale(1.08);

}

.list{
	background-color:white;
	color: black;
	text-decoration: none;
	-webkit-transition: 0.4s ease;
  	transition: 0.4s ease;

}
.list:hover{
	background-color:white;
	color: red;
	-webkit-transform: scale(1.08);
  	transform: scale(1.08);

}

.iconalm{
	text-decoration: none;
	-webkit-transition: 0.4s ease;
  transition: 0.4s ease;

}

.iconalm:hover{
	color:red;
	-webkit-transform: scale(1.08);
  transform: scale(2.08);

}


/* tombol 57 */

.button-57 {
	width: 27%;
	position: relative;
	overflow: hidden;
	border: 1px solid #18181a;
	color: #18181a;
	/* display: inline-block; */
	font-size: 20px;
	line-height: 15px;
	padding: 18px 18px 17px;
	text-decoration: none;
	cursor: pointer;
	background: #fff;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
  }
  
  .button-57 span:first-child {
	position: relative;
	transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
	z-index: 10;
  }
  
  .button-57 span:last-child {
	color: white;
	display: block;
	position: absolute;
	bottom: 0;
	transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
	z-index: 100;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translateY(225%) translateX(-50%);
	height: 14px;
	line-height: 13px;
  }
  
  .button-57:after {
	content: "";
	position: absolute;
	bottom: -50%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(18, 24, 121);
	transform-origin: bottom center;
	transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
	transform: skewY(9.3deg) scaleY(0);
	z-index: 50;
  }
  
  .button-57:hover:after {
	transform-origin: bottom center;
	transform: skewY(9.3deg) scaleY(2);
  }
  
  .button-57:hover span:last-child {
	transform: translateX(-50%) translateY(-100%);
	opacity: 1;
	transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
  }