@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
* {
		
}

body{
		
		background:url("background/background.jpg") no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		height: 100%;
		overflow: hidden;   /*  hide scrollbars */
		opacity: 1.0;
		-webkit-transition: background 1.5s linear;
		-moz-transition: background 1.5s linear;
		-o-transition: background 1.5s linear;
		-ms-transition: background 1.5s linear;
		transition: background 1.5s linear;	

}
	
.main-wrapper {
		margin-bottom: 200px;
		border-radius: 4px;
		background-color: white;
		padding: 20px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
		position: relative;
}

i.btn-menu {
		font-size: 1.5rem;
		color: white;
		position: relative;
		border-radius: 50%;
		padding: 5px;
		margin: 3px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
		transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s ease;
}

i.btn-menu:after {
		content: "";
		width: 100%;
		height: 100%;
		border: solid 2px;
		transform: scale(0.8);
		position: absolute;
		top: -2px;
		left: -2px;
		border-radius: 50%;
		transition: all 0.3s ease;
}

i.btn-menu:hover:after {
		transform: scale(1);
		box-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23);
}

i.btn-menu:nth-of-type(4) {
		background-color: #88b999;
}

i.btn-menu:nth-of-type(4):hover {
		color: #88b999;
}

i.btn-menu:nth-of-type(4):after {
		border-color: #88b999;
}

i.btn-menu:nth-of-type(5) {
		background-color: #88b2b9;
}

i.btn-menu:nth-of-type(5):hover {
		color: #88b2b9;
}

i.btn-menu:nth-of-type(5):after {
		border-color: #88b2b9;
}

i.btn-menu:nth-of-type(6) {
		background-color: #8897b9;
}

i.btn-menu:nth-of-type(6):hover {
		color: #8897b9;
}

i.btn-menu:nth-of-type(6):after {
		border-color: #8897b9;
}

i.btn-menu:nth-of-type(7) {
		background-color: #af88b9;
}

i.btn-menu:nth-of-type(7):hover {
		color: #af88b9;
}

i.btn-menu:nth-of-type(7):after {
		border-color: #af88b9;
}

i.btn-menu:nth-of-type(8) {
		background-color: #d59acb;
}

i.btn-menu:nth-of-type(8):hover {
		color: #d59acb;
}

i.btn-menu:nth-of-type(8):after {
		border-color: #d59acb;
}

i.btn-menu:nth-of-type(1) {
		background-color: #cd8484;
}

i.btn-menu:nth-of-type(1):hover {
		color: #cd8484;
}

i.btn-menu:nth-of-type(1):after {
		border-color: #cd8484;
}

i.btn-menu:nth-of-type(2) {
		background-color: #ec9f83;
}

i.btn-menu:nth-of-type(2):hover {
		color: #ec9f83;
}

i.btn-menu:nth-of-type(2):after {
		border-color: #ec9f83;
}

i.btn-menu:nth-of-type(3) {
		background-color: #cdb274;
}

i.btn-menu:nth-of-type(3):hover {
		color: #cdb274;
}

i.btn-menu:nth-of-type(3):after {
		border-color: #cdb274;
}

i.btn-menu:hover {
		background-color: transparent;		
		cursor: pointer;
		box-shadow: none;
}

#load { height: 100%; width: 100%; }
#load {
    position    : fixed;
    z-index     : 99999; /* or higher if necessary */
    top         : 0;
    left        : 0;
    overflow    : hidden;
    text-indent : 100%;
    font-size   : 0;
    opacity     : 0.6;
    background  : #E0E0E0  url(load.gif) center no-repeat;
  }
	.atas{
		margin: 10px;
		height: 120px;
		overflow:hidden;

	}
	.atas h1 {
		color: #fff;
		background-color: transparent;
		font-size: 35px;
		font-weight: normal;
		line-height: 50%;

	}
	.atas p {
		color: #FFFFFF;
		background-color: transparent;
		font-size: 18px;
		font-weight: normal;
	}
	.atas-kiri{
		margin: 5px;
		padding: 5px;
		width: 75%;
		float: left;	
		border: 1px solid #D0D0D0;
		border-radius: 15px;
		box-shadow: 0 0 8px #D0D0D0;
		background: rgba(0, 0, 0, 0.60)!important;
	}
	.atas-kiri-img{
		margin-left: 10px;
		float: left;
	}
	.atas-kiri-img img{
		max-height:100px;

	}
	.atas-kiri-satker{
		
		margin-left: 20px;
		float: left;
		font-family:Courier New;
	
	}
	.atas-kanan{
		margin: 5px;
		padding: 20px;
		width: 20%;
		height: 90 px;
		float: right;
		border: 1px solid #D0D0D0;
		border-radius: 15px;
		box-shadow: 0 0 8px #D0D0D0;
		background: rgba(0, 0, 0, 0.60)!important;
	}
	.vid{
		float:left;
		padding: 5px;
		margin-top : 20px;
		margin-left: 40px;
		border:5px solid blue;
		border-radius: 15px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.camera{
		float:right;
		padding: 5px;
		margin-left: 40px;
		border:5px solid blue;
		border-radius: 15px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.text-bawah{
		padding: 15px;
		width: 100%;
		float : left;

	}
	.tengah-kanan{
		padding : 10px;
		margin: 100px auto;
		width: 40%;
		float : right;
	}
	.but_menu{
		margin-right:50px;
	}
	#jam{
		color: #FFFFFF;
		background-color: transparent;
		font-size: 40px;
		font-weight: normal;
		line-height: 50%;
	}
	#title{
		font-family: 'Kaushan Script', cursive;
	}
	#isi{
		font-family: 'Bad Script', cursive;
		font-size: 20px;
	}
	#Mdl-Manual{
		top: 5%;
		overflow: hidden;
	}	
	.mdl-menu{
		top: 40%;
	}	
	.mdl-menu .modal-dialog  {width:75%;}
	#Mdl-keuangan .modal-dialog {width:60%;}
	
	.btn-touch{ 
		margin: 5px auto;
		padding: 5px;
		height: 100px;
		width: 100px;
		font-size:50px;
		border-radius:15px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.btn-touch:active, .btn-touch:focus{
		outline:none;
	}
	.btn-angka
	{
		background-color: white;
		color: #ec9f83;
		border: solid 2px;
		border-color: #ec9f83;		
		
	}
	.btn-angka:active, .btn-angka:focus, .btn-angka:hover{
		background-color: #ec9f83;
		color: white;
	}
	.input-touch{
		margin: 5px auto;
		padding: 5px;
		height: 50px;
		width: 150px;
		max-width: 120px;
		font-size:30px;
		border: solid 1px;
		border-color: #14ea09;
	}
	#footer{
		margin: 10px 20px 0 20px;
		padding: 10px 40px 0 40px;
		height: 5vh;
		border: 1px solid #D0D0D0;
		border-radius: 10px;
		box-shadow: 0 0 8px #D0D0D0;
		background: rgba(0, 0, 0, 0.60)!important;
	}
	#footer p{
		color: #FFFFFF;
		background-color: transparent;
		font-size: 14px;
		font-weight: normal;
		line-height: 120%;
	}
	.new-btn{
		font-size : 24px;
		margin : 25px 25px 25px 25px;
	}
.menu-inf {
    background: linear-gradient(to bottom, rgba(206,219,233,1)0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1)33%,rgba(58,132,195,1) 46%,rgba(65,154,214,1)65%,rgba(75,184,240,1)74%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border-radius: 0px 20px 0px 20px;
	border: 5px solid #D9D9D9;
	padding: 15px; 
    font-family: 'Kaushan Script', cursive;;
    height: 70px; 
	color: white;
	font-size: 18px;
	margin: 5px;
} 
.menu-inf:active, .menu-inf:focus, .menu-inf:hover{
		background: white;
		color: #00BFFF;
		border: 5px solid #00BFFF;
	}

@media (min-width:601px) {
	i.btn-menu {
		padding:10px;
		margin:5px;
		font-size:2rem;
	}
}

@media screen and (min-width:993px) {
	i.btn-menu {
		padding:20px;
		margin:10px;
		font-size:4rem;
	}
	i.btn-menu:after {
		border-width:3px;
		top:-3px;
		left:-3px;
	}

}