@keyframes MenyesuaikanTinggi
	{
		to 
			{ 
			width:100%;
			}
	}

@keyframes bersatu
	{
		25%	{ letter-spacing:5px;}		
		50%	{ letter-spacing:50px;}
		75%	{ letter-spacing:25px;}
		100%{ letter-spacing:1px;}

	}
	
@keyframes megar
	{
		25%{opacity:1; left:-100px;}
		50%{left:200px;}		
		75%{left:400px;}		
		75%{left:20px;}		
	}
	
@keyframes tampil
	{
		to 
			{
				opacity:1;
			}
	}

@keyframes menghilang
	{
		to 
			{
				opacity:0;
			}
	}

@keyframes slider
	{
		to 
			{
				width:100%;
			}
	}

@keyframes kekanan
	{
		to 
			{
				width:100%;
			}
	}

@keyframes muter
	{
		to 
			{
				transform:rotate(720deg);
			}
	}
	
@media only screen and (min-width: 180px)
	{
		#Container ul li
			{
				width:140px;
				height:100px;
			}

		#Container ul li div
			{
				margin-top:58.4px;
				height:11px;
				font-size:9px;
			}

		#TombolMenu
			{
				display:block;
				padding:15px;
				border:none;
				float:left;
				width:45px;
				height:40px;
				text-align:center;
		        color:white;
			}
	
		#TombolMenu:hover
			{
				cursor:pointer;
			}
	
		#TombolMenu div
			{
				display:block;
    			width:35px;
    			height:5px;
    			background:green;
    			margin:6px 0;
				box-shadow: 3px 3px 3px #003;
			}
	
		.DaftarMenu
			{
				animation:menghilang 2s;
				display:none;
			}
		
		#DaftarMenu
			{
				opacity:0;
				animation:tampil 1s forwards;
				width:125px auto;
				margin-top:65px;
				left:10px;
				padding:0;
				position:fixed;
			}
		
		#DaftarMenu li
			{
				text-shadow:3px 3px 3px #003;
				box-shadow:3px 3px 3px #003;
				border-radius:0px 5px 0px 5px;
				width:125px;
				background:green;
				color:white;
				font-size:12px;
				border-bottom:1px solid #FFF;
				list-style:none;
				padding:5px;
				text-align:left;
				cursor:pointer;
			}

		#DaftarMenu li:hover
			{
				box-shadow:3px 3px 3px #CCFFFF;
			}

		#logo
			{
			    animation:tampil 2s forward;
				float:right;
				width:144px;
				height:57px;
			}
	
	}

@media only screen and (min-width: 768px)
	{
		#Container ul li
			{
				width:300px;
				height:200px;
			}

		#Container ul li div
			{
				margin-top:175px;
				height:23px;
				font-size:16px;
			}

		#TombolMenu
			{
				display:none;
			}
		
		#TombolMenu div
			{
				display:none;
			}
		
		#DaftarMenu
			{
				display:block;
				opacity:0;
				animation:tampil 1s forwards;
				width:125px auto;
				padding:0;
				margin-top:30px;
				left:20%;
				position:fixed;
			}
		
		#DaftarMenu li
			{
				display:inline;
				text-shadow:3px 3px 3px #003;
				box-shadow:3px 3px 3px #003;
				border-radius:0px 5px 0px 5px;
				width:125px;
				background:green;
				color:white;
				font-size:12px;
				border-bottom:1px solid #FFF;
				list-style:none;
				padding:5px;
				text-align:left;
				cursor:pointer;
			}
		
		#DaftarMenu li:hover
			{
				background:linear-gradient(-45deg, #006cff, #5ca1ff);
			}

		#logo
			{
				width:144px;
				height:57px;
				float:left;
			}

	}

@media only screen and (min-height: 300px)
	{
		.header
			{
				height:17.5%;
				position:fixed;
			}	

		.main
			{
				height:82.5%;
				position:fixed;
				top:20%;
			}	
	}

@media only screen and (min-height: 500px)
	{
		.header
			{
				height:9.80%;
				position:fixed;
			}	
		.main{
				height:90.20%;
				top:10%;
			}	
	}

*{
	padding: 0;margin: 0;
}

html, body
	{
		height: 100%;
	}

.header
	{
	    opacity:0;
		width:100%;
		font-family:"MS Serif", "New York", serif;
		border-bottom:2px solid green;
		animation:tampil 4s forwards;
		
	}

.main
	{
		opacity:0;
		width:100%;
		border-top:2px solid #FFFFFF;
		background:white;
		text-align:justify;
		float:left;
		border:none;
		position:fixed;
		overflow:auto;
		animation:tampil 3s forwards;
		animation-delay:1s;
	}
	

#logo
	{
		margin-top:5px;
		margin-left:5px;
    	border:none;
	}

#wa_logo
	{
		position:relative;
		right: 5%;
		top: 90%;
		float: right;
		width: 54px;
		height: 50px;
		border: none;
		border-radius: 0 5px 5px 0;
		opacity: 0;
		animation: tampil 2s forwards;
	}

#wa_logo:hover
	{
		cursor:pointer;
	}

#HeaderContainer
	{
		background-color:#33F;
		overflow:auto;
		overflow-style:marquee-line;
		position:static;
		opacity:0px;
		border: none;
    	padding:0;
		width: 0%;
		height: 0px;
		animation:tampil 1s forwards;
		animation:MenyesuaikanTinggi 1s forwards;
	}
	
#HeaderMenu
	{
	width:0;
	animation:slider 1s forwards;
	}

.KotakTengah{
		opacity:0;
		width:275px;
		background:#09C;
		border:2px #000066 solid;
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		height:300px auto;
		border-radius:5%;
		padding:35px;
		animation:tampil 1s forwards;
		box-shadow:3px 3px 3px #003;
}

#MenuAdmin
	{
		opacity:0;
		width:440px;
		background:#09C;
		border:1px #000066 solid;
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		height:300px auto;
		border-radius:5%;
		padding:35px;
		animation:tampil 1s forwards;	
	}

#MenuAdmin h3
	{
		opacity:0;
		background-color:#069;
		color:#FFF;
		border-radius:18px 18px 1px 1px;
		text-align:center;
		animation:tampil 1s forwards;
	}

.KotakBooking{
    border:1px dashed #009;
    font-size:14px;
    padding:10px;
    border-radius:10px;
    width:80%;
    left:5%;
    position:relative;
    margin:5px;
}


.ContainerMenu
	{
		background-color:#3CF;
		color:#FFF;
		float:left;
		text-align:center;
		line-height:100px;
		width:100px;
		height:100px;
		border:1px solid #069;
		border-radius:10%;
		margin:5%;
		box-shadow:3px 3px 3px #003;
		animation:muter 1s forwards;
		transition:1s;
	}
	
.ContainerMenu:hover
	{
		transform:rotate(720deg);
		cursor:pointer;
		border-radius:50%;
		background-color:#06F;
		color:#FFF;
	}
	
#Container
	{
		border:1px dashed #009;
		padding:8px;
		border-radius:10px;
		opacity:0;
		animation:tampil 1s forwards;
		margin:5px;
		font-family:Verdana, Geneva, sans-serif;
		margin-bottom:25px;
		margin-top:25px;		
	}

#Container ul li
	{
		padding:0;
		border:none;
		display:inline-block;
		list-style: none;
		background-color:lightgreen;
		border-radius:10px;
		box-shadow: 3px 3px 3px #999999;
		transition:1s;
	}

#Container ul li:hover
	{
		cursor:pointer;
		box-shadow: 3px 3px 3px 3px #000066;
	}

#Container ul li:first-child
	{
		margin:5px;
		background-image:url(../images/jasa-kurir.jpg);
		background-size:cover;
		background-position:center;
	}

#Container ul li:nth-child(2)
	{
		margin:5px;
		background-image:url(../images/sewa-kendaraan.jpg);
		background-size:cover;
		background-position:center;
	}

#Container ul li:last-child
	{
		margin:5px;
		background-image:url(../images/truk.jpg);
		background-size:cover;
		background-position:center;
	}
	
#Container ul li div
	{
		padding-left:10px;
		background-color:grey;
		color:#FFF;
		border-radius:10px 10px 0px 0px;
	}
	
#Container p
	{
		color:#036;
		font-size:14px;
		padding:5px;
    	text-align:justify;
		margin-top:10px;
		margin-bottom:10px;
	}

#HeaderName
	{
		margin:2.5%;
		padding:5px;
		color:#FFF;
		letter-spacing:5px;
		text-shadow:3px 3px 3px #333333;
		border-radius:5px;
		background-color:#35A9DB;	
	}

#Judul
	{
		position:absolute;
		margin-top:-25px;
		margin-left:-1px;
		padding:5px;
		color:#FFF;
		letter-spacing:5px;
		text-shadow:3px 3px 3px #333333;
		box-shadow:3px 3px 3px #333333;
		border-radius:5px;
		background-color:green;
		font-weight:bold;
		font-style:italic;
		text-transform:uppercase;

}
	
#Judul a
	{
		opacity:0;
		font-family:"MS Serif", "New York", serif;
		font-weight:bold;
		padding:0px;
		border:none;
		text-align:justify;
		color:white;
		text-shadow: 3px 3px 3px #FFFF66;
		border-radius:10px 10px 10px 10px;
		transition:1s;
		animation:megar 2s ease infinite;
	}

.KotakForm
	{
		background: linear-gradient(-45deg, #005ddc, #0044a1);
		border:1px solid #669;
		border-radius:20px 0px 20px 0px;
		box-shadow:3px 3px 3px #666666;
	}
	
.KotakForm h2
	{
		margin-top:25px;
		padding:10px;
		color:#66CCFF;
		text-shadow:3px 3px 3px #66CCFF;
	}

.KotakInput
	{
		padding-left:5px;
		margin:3.5px;
		border:none;
		background-color:#66CCFF;
		color:#FFF;
		border:1px solid #CCF;
		border-radius:5px 5px 5px 5px;
		box-shadow:3px 3px 3px #CC66FF;	
	}
	
.KotakInput:hover
	{
	box-shadow:3px 3px 3px #66CCFF;
	}
	
.KotakInput:focus
	{
		box-shadow:3px 3px 3px #66CCFF;
	}
	
.TombolSubmit
	{
		border-bottom:1px solid #FFF;
		margin:5px;
		padding:2px;
		width:60px;
		border:1px solid #66C;
		border-radius:5px 5px 5px 5px;
		background-color:green;
		color:#FFF;
		font-size:14px;
		box-shadow:3px 3px 3px #66CCFF;
	}
	
.TombolSubmit:hover
	{
		background:linear-gradient(-45deg, #006cff, #5ca1ff);
		cursor:pointer;
	}

#FormLogin
	{
		opacity:0;
		animation:tampil 1s forwards;
		width:200px;
		height:200px;
		padding:10px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -110px;
		margin-left: -110px;
		text-align:center;
	}

#KotakInputPendek
	{
		width:100px;
		margin:5px;
	}

#Kontak p
	{
		padding:10px;
	}

#KontakPesan
	{
		width:170px;
		height:100px;
	}

#FormKontak
	{
		opacity:0;
		animation:tampil 1s forwards;
		animation-delay:1s;
		width:300px;
		height:320px;
		padding:10px;
		position:absolute;
		top: 50%;
		left: 50%;
		margin-top: -80px;
		margin-left: -165px;
		text-align:center;
	}
	
.penutup
	{
		color:#FFF;
		right:20px;
		position:absolute;
	}

#TampilKotakPesan
	{
		display:none;
	}

.penutup:hover
	{
		cursor:pointer;
	}
	
.GambarBundar
	{
		border:2px #036;
		border-style:double;
		width:200px;
		height:200px;
		border-radius:120px 120px 120px 120px;
		box-shadow:3px 3px 3px #66CCFF;
	}

.GambarKotak
	{
		margin:30px;
		border:2px #036;
		border-style:double;
		width:144px;
		height:57px;
		border-radius:20px 20px 20px 20px;
		box-shadow:3px 3px 3px #000033;
	}

#table-tarif
	{	
		opacity:0;
		animation:tampil 1s forwards;
		animation-delay:1s;
		background-color:#069;
		border:1px solid #666;
		width:305px;
		height:305px;
		padding:5px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -160px;
		margin-left: -160px;
		border-radius:5px 5px 5px 5px;
		overflow:auto;
	}
	
#table-tarif p
	{
		font-weight:bold;
		font-style:italic;
		color:#CCC;
		font-family:"Lucida Console", Monaco, monospace;
		padding:10px;
		font-size:14px;
	}
	
#NamaJasa
	{
		font-family:"Lucida Console", Monaco, monospace;
		font-size:12px;
		color:#CCC;
		width:145px;
		padding:5px;
		text-align:left;
		float:left;
	}

#HargaSeparator
	{
		font-family:"Lucida Console", Monaco, monospace;
		font-size:12px;
		color:#CCC;
		width:10px;
		padding:5px;
		text-align:center;
		float:left;
	}
	
#HargaJasa
	{
		font-family:"Lucida Console", Monaco, monospace;
		font-size:12px;
		color:#CCC;
		width:120px;
		padding:5px;
		text-align:right;
		float:right;
	}

.PanjangFull
	{
		width:100%;
	}

.PanjangOption
	{
		width:103%;
	}


.PanjangSedang
	{
		width:90%;
	}

.TinggiFull
	{
		height:100px;
	}
	
.Tengah
	{
	margin-top:20px;
	text-align:center;
	}
	
.Renggang
	{
	padding:20px;
	}
	
#JasaKurir
	{
		display:none;
		opacity:0;
		animation:tampil 1s forwards;
	}

#SewaKendaraan
	{
		display:none;
		opacity:0;
		animation:tampil 1s forwards;
	}
	
#SewaTruk
	{
		display:none;
		opacity:0;
		animation:tampil 1s forwards;
	}
	
.Paragraf
	{
		margin:30px;
		font-family:"Lucida Console", Monaco, monospace;
		font-size:14px;
		text-align:justify;
		transition:1s;
	}