html{
	/*naik satu dimensi*/
	position: relative;
}

body{
   	background-image: linear-gradient(to top, rgba(0, 26, 77,1), rgba(0,0,0,0.2)), url('dist/img/jumbotron-bg.jpg?ver=1.4');
   	background-attachment: fixed;
	background-size: cover;
	background-position: center;
    position: relative;
	/*background-position: 0px 0px;*/
	/*overflow: hidden; *//*jika melewati section jumbotron, element akan di hidden*/
    /*position: absolute;*/
}

#bg-wrapper {
	background: none;
    position: relative;
}

#bg-wrapper-home{
    background: none;
    position: relative;
}

.navbar-custom {
    color: white;
    height:70px;
    border-style: none; 
    box-shadow: 0px 2px 2px grey;
    background-color: #166d3b;
	display: flex;
   	align-items: center;
}

#colorNav {
	background-image: linear-gradient(147deg, #006699 0%, #000000 500%) !important;
	border-bottom: 2px solid #dee2e600;
}

.navbar-custom a{
    color: white;
}

.judulLogo{
	max-width:30px;	
}

.judul1 {
	margin-top: 0px;
	margin-bottom: -5px;
	margin-left: 5px;
	letter-spacing: 3.6px;
	line-height: 1;
	font-size: 29px;
	font-weight: 800;
	color: #DAA520;
}

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 80vh;
  /*min-height: 100vh;*/
}

.judul1 > small{
	margin-left: -10px;
	letter-spacing:0px;
	font-size : 10px;
	font-weight: 300;
	color: #DAA520;
	color: #DAA520;*/
}

.judul2 {
	margin-left: 5px;
	margin-bottom: 0px;
	letter-spacing:-0.4px;
	font-size : 8.8px;
	font-weight: 200;
	color: white;
	margin-top:  3px;
}

#gradien0{
	  background-image: linear-gradient(147deg, #006699 0%, #000000 74%);  
	}

.kiri{
  text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}

.kiri h3{
	color: white;
    font-weight: 200;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
    font-size: 26px;
}

.kiri p{
	margin-top:-10px;
	color: white;
    font-weight : 200;
    text-shadow : 1px 1px 1px rgba(0,0,0,0.7);
    font-size 	: 16px;
}

.kiri table{
	color: white;
   	margin-top: 30px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}

.table td{
    padding: .25rem ;
}

.table th{
    padding: .5rem ;
}

section .tampil{

}

.tampil .loginCustom div.{
	 backdrop-filter: blur(5px); border-radius: 10px; margin:auto;
}

.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
    background-color: #006699;
    color: white;
}

.jumbotron img{
	width: 200px;
	border: 5px solid #eaeaea;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

/*h1 dan p yang ada di jumbotron*/
.jumbotron h1, .jumbotron p {
	/* text-shadow: bayangan_ke_kanan_px bayangan_ke_bawah_px blur_px warna_rgba() */
	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

hr {
	width: 250px;
	border-top: 3px solid #999;
}

section {
	min-height: 600px;
}

.pKiri, .pKanan {
	opacity: 0;
	transform: translate(-50px, 0);
	transition: 1s;
} 

.pKanan {
	transform: translate(50px, 0); 
}

.pKiri.pMuncul, .pKanan.pMuncul {
	opacity: 1;
	transform: translate(0,0);
}

.portofolio{
	background-color: #eee;
}

.portofolio .thumbnail {
	opacity: 0 ;
	transform: translate(0, -40px);
	transition: .5s;
}

.portofolio .thumbnail.muncul {
	opacity: 1 ;
	transform: translate(0, 0);
}

.contact{
	min-height: 600px;
}

.tampil {
	padding-top: 7%;
}

.table-responsive-custom{
	width: 100% !important
}

#tableShow{
	background-color: rgba(0,0,0,0.5); 
	color: white;
}
#tableShow thead th {
	background-color: rgba(0,0,0,0.3); 
	border-top:0px;
}

.login-box-Custom {
	width: 97% !important;
	margin: auto auto auto 0 !important;
}

.txtAtas{
	text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.7);
}
.txtAtas h2{
	font-size: 1.3em;
	padding-top: 7px;
}

.txtAtas p{
	font-size: 0.9em;
}

.front{
	float: left;
	text-align: left;
}

.container-logo{
		margin-left:0; 
		margin-right:auto; 
		display: flex; 
		align-items: center;
}

.garis {
	border-color: rgba(255,255,255,.5) !important;
}


footer{
	margin-top: -30px;
	position: relative;
	bottom: 0;
	width: 100%;
	background-color: #333;
	padding-top: 20px;
}

footer p {
	color: #aaa;
	font-size: 0.9em;
}

footer p i {
	color: salmon;
}

@media (min-width: 768px) {

    .navbar.taller .navbar-nav>li>a {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .kiri h3{
		color: white;
	    font-weight: 200;
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	    font-size: 38px;
	}

	.kiri p{
		margin-top:-10px;
		color: white;
	    font-weight: 200;
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	}

	.kiri table{
		color: white;
	   	margin-top: 30px;
	    font-size: 16px;
	    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	}

	#gradien0{
	  background-image: linear-gradient(147deg, #006699 0%, #00b3b3 74%);  
	}

	.judulLogo{
		max-width:45px;	
	}

	.judul1 {
		margin-top: 5px;
		margin-bottom: -5px;
    	margin-left: 10px;
		letter-spacing: 6px;
    	line-height: 1;
    	font-size: 35px;
    	font-weight: 800;
    	color: #DAA520;
	}

	.judul1 > small{
		margin-left: -15px;
		letter-spacing:0px;
		font-size : 15px;
		font-weight: 300;
    	color: #DAA520;
	}

	.judul2 {
		margin-left: 10px;
		margin-bottom: 0px;
		letter-spacing:0px;
		font-size : 15px;
		font-weight: 300;
		color: white;
	}

	.table-responsive-custom{
		width: 100% !important
	}

	.login-box-Custom {
		margin: 7%  13% 7% auto !important;
		width: 80% !important;
	}

	.txtAtas{
		text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	}

	.txtAtas h2{
		font-size: 1.7em;
	}

	.txtAtas p{
	font-size: 1em;
	}
}

@media (min-width: 1200px) {
	.table-responsive-custom{
		width: 100% !important
	}

	.judulLogo{
		max-width:47px;	
	}

	.judul1 {
		margin-top: 5px;
		margin-bottom: -5px;
    	margin-left: 10px;
		letter-spacing: 5px;
    	line-height: 1;
    	font-size: 40px;
    	font-weight: 800;
    	color: #DAA520;
	}

	.judul2 {
		margin-left: 10px;
		margin-bottom: 0px;
		letter-spacing:-0.1px;
		font-size : 13px;
		font-weight: 300;
		color: white;
	}

	.txtAtas{
		text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	}
	
	.txtAtas h2{
		font-size: 1.7em;
	}

	.txtAtas p{
		font-size: 1em;
	}
}

@media (min-width: 1400px) {
	.judul1 {
		margin-top: 5px;
		margin-bottom: -5px;
    	margin-left: 10px;
		letter-spacing: 5px;
    	line-height: 1;
    	font-size: 45px;
    	font-weight: 800;
    	color: #DAA520;
	}

	.judulLogo{
		max-width:50px;	
	}

	.judul2 {
		margin-left: 10px;
		margin-bottom: 0px;
		letter-spacing:0px;
		font-size : 14px;
		font-weight: 300;
		color: white;
	}

	html, body{
		font-size: 1em;
	}
}

@media (min-width: 1800px) {
	.table-responsive-custom{
		width: 100% !important
		/*font-size: 1.5em;*/
	}

	.judulLogo{
		max-width:70px;	
	}

	.judul1 {
		margin-top: 5px;
		margin-bottom: -5px;
    	margin-left: 10px;
		letter-spacing: 10px;
    	line-height: 1;
    	font-size: 60px;
    	font-weight: 800;
    	color: #DAA520;
	}

	.judul1 > small{
		margin-left: -23px;
		letter-spacing:0px;
		font-size : 20px;
		font-weight: 300;
    	color: #DAA520;
	}

	.judul2 {
		margin-left: 10px;
		margin-bottom: 0px;
		letter-spacing:0px;
		font-size : 20px;
		font-weight: 300;
		color: white;
	}

	.txtAtas{
		text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	}
	
	.txtAtas h2{
		font-size: 1.8em;
		padding-top: 20px;
	}
	.txtAtas p{
		font-size: 1em;
	}

	html, body{
		font-size: 1.1em;
	}
}