/*
 * Globals
 */


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {

}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}



.header-bg {
	background-image: url('madukismo-dotted.webp'); background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 425px;
  margin-top:-50px;
  text-shadow: 2px 2px #000000;
}



.header_block {
	background-image: url('madukismo-dotted.webp'); background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 100%;
	color: #000000;

	position: static;
}


.text-mk { font-family: "Brush Script MT"; }
.text-14 {font-size: 34px;}

.w-800 {width: 900px;}


.box-heading {
	text-align: right;
	padding: 20px;
	width: 100%;
	margin: 90px 0px 0px 0px;
}

.selamat-datang { margin-top: 40px; font-size: 25px; color: #ffffff;}
h1.h1-top {color: #ffffff; margin: 0px; padding: 0px; }
h2.h2-head {padding: 2px; display: block;}
h3.h3-heading {font-size: 18px; margin-top: 10px;}
h3.h3-limit{font-size: 17px; margin-top: 10px;}
h3.h3-heading-black {font-size: 23px; margin-top: 10px; color: #000000;}
h3.kantor-utama {border-bottom: solid 1px #cccccc; font-size: 21px;}

.rute-bis {
	text-align: left;
}

.box-armada {
  	border-bottom: 1px solid #cccccc;
  	padding: 20px 0px;
}

.box-agen { padding: 2px;  }
.box-agen-phone { padding: 2px;  }

.armada {
	border-bottom: solid 1px #cccccc;
}

.span-h2 {background: #92860c; padding: 0px 10px;}

.border-trayek { border-bottom: solid 1px #000000; }
.code_ {margin: 0px; clear: both; font-size:12px; }
.trayek { background: #c7c7c7; color: black; margin: 5px 0px; }
.agen {border-bottom: solid 1px #cccccc; margin:20px 0px 0px 0px;}


ul.fasilitas-bus {font-size: 13px; margin: 10px 0 0 -20px;}
ul.list-phone {font-size: 13px; margin: 0 0 0 -20px;}
.list-phone a {color: #ffffff;}
.list-phone a:hover {color: #92860c;}

.agen-name {font-size: 20px; font-weight: bold;}
.address {font-size: 12px;}


.row_image {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
  margin: 10px 0px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column_2 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}



















h3.h3-status {padding: 2px; display: block;}
.span-booking {background: red; padding: 0px 10px;}
.span-issued {background: green; padding: 0px 10px;}
.span-cancel {background: #838383; padding: 0px 10px;}
.span-expired {background: #e0ce0b; padding: 0px 10px;}
.span-issued {background: green; padding: 0px 10px;}