/* membuat efek scroll tampak ke halaman */
body {
  min-height: 2300px;
}

/* untuk membuat efek warna page backgound */
.jumbotron {
  /* padding: 2rem 1rem; untuk pading atas bawah 2, kanan kiri 1 */

  padding-top: 6rem;
  /* sebelumnya   padding-top: 2rem; */
  background-color: #eedba7;
}

#projects {
  background-color: #eedba7;
}

/* disemua section tombol berefek */
section {
  padding-top: 5rem;
}
/* ============= */
table {
  margin: 0 auto;
  width: 550px;
  border-collapse: collapse;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
tbody {
  color: #000;
}
table th,
table td {
  padding: 5px 10px;
  border: 2px solid #eef7fb;
}
table tr {
  font: normal 14px Tahoma, Geneva, sans-serif;
  background: #ecbe04;
}
table td {
  -webkit-transition: all 0.7s ease-in-out 0s;
  -moz-transition: all 0.7s ease-in-out 0s;
  -o-transition: all 0.7s ease-in-out 0s;
  transition: all 0.7s ease-in-out 0s;
}
table td:nth-child(2n + 0) {
  background: #faeebc;
}
table td:hover,
table td:nth-child(2n + 0):hover {
  background: #eef7fb;
}
table th {
  background: #3ea4d0;
  color: #daeef6;
  text-shadow: 1px 1px 0 #1f627f;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 100px rgba(0, 0, 0, 0.15) inset;
  font: bold 16px Arial, Helvetica, sans-serif;
}



/* skrip mlsngod */

h2{
	font-family: sans-serif;
	font-weight: normal;
}

.malasngoding-slider { 
	border: 10px solid #efefef; 
	position: relative; 
	overflow: hidden; 
	background: #efefef;
}

/* .malasngoding-slider { 
	margin:20px auto;
	width: 768px;
	height: 450px; 
} */

.malasngoding-slider { 
	margin:20px auto;
	width: 768px;
	height: 450px; 
}

.isi-slider img { 
	width: 768px;
	height: 450px; 
	float: left;
}

.isi-slider { 
	position: absolute; 
	width:3900px;  

	/*pengaturan durasi lama tampil gambar bisa di atur di bawah ini*/
	animation-name:slider;
	animation-duration:8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
	-webkit-animation-name:slider;
	-webkit-animation-duration:8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:slider;
	-moz-animation-duration:8s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count:infinite;
	-o-animation-name:slider;
	-o-animation-duration:16s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count:infinite;
}


/*saat gambar di hover oleh cursor mouse maka berhenti slide*/
.isi-slider:hover { 
	-webkit-animation-play-state:paused; 
	-moz-animation-play-state:paused; 
	-o-animation-play-state:paused; 
	animation-play-state:paused; }
}

.isi-slider img { 
	float: right; 
}

.malasngoding-slider:after { 
	font-size: 150px; 
	position: absolute; 
	z-index: 12; 
	color: rgba(255,255,255, 0); 
	left: 300px; top: 80px; 
	-webkit-transition: 1s all ease-in-out; 
	-moz-transition: 1s all ease-in-out; 
	transition: 1s all ease-in-out; 
}

.malasngoding-slider:hover:after { 
	color: rgba(255,255,255, 0.6);  
}



@-moz-keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}       
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0;
	}   	
	100% {
		left: 0; opacity: 0; 
	}
} 

@-webkit-keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}       
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0;
	}   	
	100% {
		left: 0; opacity: 0; 
	}
} 


@keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}     
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0; 
	} 

	100% {
		left: 0; opacity: 0; 
	}
}

/* MAPS */

.card.map-card .living-coral {
  background-color: #fa7268;
}

.card.map-card .living-coral-text {
  color: #fa7268;
}

.card.map-card .table th {
  width: 2rem;
}

.card.map-card .pt-3-5 {
  padding-top: 1.25rem;
}

.card.map-card .card-body {
  position: absolute;
  width: 100%;
  height: 80%;
  top: 20%;
  overflow: hidden;
  background-color: transparent;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
}

.card.map-card .card-body.closed {
  top: 100%;
  height: 7.5rem;
  margin-top: -7.5rem;
}

.card.map-card .map-container {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.card.map-card .map-container iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.card.map-card .button .btn-floating {
  margin-top: -1.5rem;
}