.d-inline-flex li{
  padding-left: 2.5em;
  padding-right: 2.5em;
}

.abmisi{
  list-style-type: square;
  color: #070707;
}

.btn-produk{
  display: inline-block;
  margin:0.1em;
  font-weight: bold;
  font-size: 50em;
  height: 3em;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding-left:1em;
  padding-right: 1em;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.5rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.asss{
  text-align: left;
}

.produkk{
	margin: 2% 2% 2% 2%;
	width:50em;
  height:100%;
}

.tabel{
  width:80em;
}
.bawah{
	width: 2.5em;
}

@font-face{
  font-family:"coba";
  src:url(../font/GIL_____.TTF);
}

@font-face{
  font-family:"berlin";
  src:url(../font/GOTHIC.TTF);
}


@font-face{
  font-family: "asd";
  src:url(../font/tt0142m_.ttf);
}

@font-face{
  font-family: "utu";
  src:url(../font/tt0248m_.ttf);
}

@font-face{
  font-family: "stra";
  src:url(../font/tt0503m_.ttf);
}

.wat{
  font-family:utu;
  padding-left: 2%;
  font-size: 2em;
  font-weight: 550;
}

.coba{
  font-family:coba;
  font-size:1em ;
  margin-top: 0.6em;
}

.asd{
 	font-family:asd;
	font-size: 45px;
  text-decoration: none;
}

.bg-oren{
  background-color: #ff6633;
}

.bg-waw{
  background-color: #f7f7f7;
  padding-bottom: 6em;
  padding-top: 0.5em;
}

.bg-wow{
  background-color: #e0e0e0;
  padding-bottom: 6em;
  padding-top: 0.5em;
}

.bg-wow1{
  background-color: #e0e0e0;
}


/*********************************************************************navbar***********************************/
.navbar-oren .navbar-brand {
  color: #000;
}

.navbar-oren .navbar-brand:hover, .navbar-oren .navbar-brand:focus {
  color: #000;
}

.navbar-oren .navbar-nav .nav-link {
  color: rgba(0,0,0, 1);
  padding-left: 1em;
  padding-right: 1em;
}

.navbar-oren .navbar-nav .nav-link:hover, .navbar-oren .navbar-nav .nav-link:focus {
  color: rgba(0,0,0, 1);
  background-color: rgba(250,250,250, 0.2);
  border-radius: 0.5em;
  height: 2.5em;
  transition: color 0.16s ease-in-out,
  background-color 0.16s ease-in-out,
  border-color 0.16s ease-in-out,
  box-shadow 0.16s ease-in-out;
}

.navbar-oren .navbar-nav .nav-link.disabled {
  color: rgba(0,0,0, 1);
}

.navbar-oren .navbar-nav .show > .nav-link,
.navbar-oren .navbar-nav .active > .nav-link,
.navbar-oren .navbar-nav .nav-link.show,
.navbar-oren .navbar-nav .nav-link.active {
  color: #000;
}

.navbar-oren .navbar-toggler {
  color: rgba(0,0,0, 1);
  border-color: rgba(0,0,0, 1);
}

.navbar-oren .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-oren .navbar-text {
  color: rgba(255,255,255, 1);
}

.navbar-oren .navbar-text a {
  color: #fff;
}

.navbar-oren .navbar-text a:hover, .navbar-oren .navbar-text a:focus {
  color: #000;
}

/*********************************************************************navbar***********************************/


/*********************************************************************Home+SlideShow***********************************/



#header{
    background: url('../img/ujh.png') no-repeat fixed;
    background-size: cover;
    min-height: 42em;
    position: relative;
    background-color:#f7f7f7 ;
}
/*********************************************************************Home+SlideShow***********************************/

/***************************************************************About US***********************************************/

.asmi{
  height:5em;
  width:5em;
  border-radius:4em;
  text-align: center;
  padding-top: 1.8em;
  background-color: #ff6633;
  color: #000;
  font-size: 30px;
  font-family:stra ;
}

* Pulse Grow */
@-webkit-keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.asmi:hover, .asmi:focus, .asmi:active{
   -webkit-animation-name: hvr-pulse-grow;
    animation-name: hvr-pulse-grow;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
.amis{
  padding-left:0.5em;
  padding-right:1.5em;
  padding-bottom: 2em;
}

.badge-oren {
  color:  #e6e6e6;
  background-color: #ff6633;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
}

a.badge-oren:hover, a.badge-oren:focus {
  color: #fff;
  background-color: #FF4F14;
}

a.badge-oren:focus, a.badge-oren.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}



.badge-abu {
  color:  #555;
  background-color: #d7d7d7;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
}

a.badge-abu:hover, a.badge-abu:focus {
  color: #fff;
  background-color: #FF4F14;
}

a.badge-abu:focus, a.badge-abu.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.kupit_b {
  color:  #e6e6e6;
  background-color: #ff6633;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
}

a.kupit_b:hover, a.kupit_b:focus {
  color: #fff;
  background-color: #FF4F14;
}

a.kupit_b:focus, a.kupit_b.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.navbar-brand-oren {
  display: inline-block;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  margin-right: 1rem;
  font-size: 1rem;
  line-height: inherit;
  white-space: nowrap;
  color:#000;
}

.navbar-brand-oren:hover, .navbar-brand-oren:focus {
  text-decoration: none;
  color:#fff;
}

.header2{
  text-align: center;
  font-size: 5em;
  font-family:"asd";
  color: #ff6633;
  text-shadow: 4px 4px 8px #000;
  display: inline-block;
}
/***************************************************************About US***********************************************/


/***************************************************************Button***********************************************/


.btn-oren {
  color: #fff;
  background-color: #ff6633;

}

.btn-oren:hover {
  color: #fff;
  background-color: #FF4F14
}

.btn-oren:focus, .btn-oren.focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-oren.disabled, .btn-oren:disabled {
  color: #fff;
  background-color: #6c757d;

}

.btn-oren:not(:disabled):not(.disabled):active, .btn-oren:not(:disabled):not(.disabled).active,
.show > .btn-oren.dropdown-toggle {
  color: #fff;
  background-color: #545b62;

}

.btn-oren:not(:disabled):not(.disabled):active:focus, .btn-oren:not(:disabled):not(.disabled).active:focus,
.show > .btn-oren.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
#demo{
  margin-top:4em;
}

 #aboutUs, #produk,#kontak{
  padding-top:4em;
}
#home{
  padding-top:1em;
}
 .mobil{
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  z-index: 19;
}
.captionR, .captionL, .cap{
      position: absolute;
    }
.capt, .captionR, .captionL, .cap {
  font-family: berlin;
  color: #ff6633;
  text-align: center;
}
.logo{
  width: 4em;
}

.cccp{
    margin-top: 25%;
    margin-right:50%;
    margin-left: 10%;
    border-bottom: 2px solid #000;
}


/************************************Media Kueri @***************************************/
  @media only screen and (max-width: 450px){
    #demo{
      height: 19em;
    }

    .captionR{
      right:10%;
      left:50%;
      max-width: 100%;
      margin-top:20%;
      font-size: 70%;
      padding: 1em;
      border-bottom: 2px solid #000;
    }

    .captionL{
      right:5%;
      left:85%
      margin-top:11.5%;
      padding-top:11.5%;
      font-size: 70%;
      padding-bottom: 0.5em;
      padding-left:1em;
      padding-right:1em;
      border-bottom: 2px solid #000;
    }

    .capt{
      margin-left:10%;
      margin-right:10%;
      font-size: 1em;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      max-width:80%;
      padding: 0.5em;
      margin-bottom: 2.2em;
    }

    .imgSlide{
      width: 40em;
    }
  }

  @media only screen and (min-width: 500px) {
    #demo{
      height: 37em;
    }

    .captionR{
      right:10%;
      left:50%;
      max-width: 100%;
      margin-top:25%;
      font-size: 1em;
      padding: 1em;
      border-bottom: 2px solid #000;
    }

    .captionL{
      right:5%;
      left:75%
      margin-top:12.5%;
      padding-top:12.5%;
      font-size: 1em;
      padding-bottom: 0.5em;
      padding-left:1em;
      padding-right:1em;
      border-bottom: 2px solid #000;
    }

    .capt{
      top:50%;
      margin-left:10%;
      margin-right:10%;
      font-size: 1.5em;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      max-width:80%;
    }

    .mobil{
      padding-top:1em;
    }

  }

  @media only screen and (min-width: 800px) {
    #demo{
      max-height:38em;
    }

    .captionR{
      right:10%;
      left:50%;
      max-width: 100%;
      margin-top:25%;
      font-size: 1.5em;
      padding: 1em;
      border-bottom: 2px solid #000;
    }

    .captionL{
      right:10%;
      left:75%
      margin-top:12.5%;
      padding-top:12.5%;
      font-size: 1.5em;
      padding-bottom: 0.5em;
      padding-left:1em;
      padding-right:1em;
      border-bottom: 2px solid #000;
    }

    .capt{
      margin-top:20%;
      font-size: 25px;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      max-width:80%;
      margin-bottom:5.5em;
    }

    .mobil{
      padding-top:1em;
    }
  }

  @media only screen and (min-width: 1200px) {
    #demo{
      height:40em;
    }

    .captionR{
      right:10%;
      left:50%;
      margin-top:20%;
      font-size: 2em;
      padding:0.5em;
      padding-bottom: 0.5em;
    }

    .captionL{
      right:60%;
      left:8%;
      margin-top:18%;
      font-size:2em;
      padding:0.5em;
      padding-bottom: 0.5em;
    }

    .aas{
      margin-left:45% !important;
      right:20% !important;
    }
    .capt{
      top: 41%;
      left:20%;
      right:20%;
      bottom:12%;
      font-size: 2em;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      max-width:80%;
      text-align: center;
    }

    .mobil{
      padding-top:1em;
    }

  }
/***************************************************************************/

.capt{
  font-weight: 100em;
}

#name_header{
  font-size: 1em;
}

.agree_box_buy {
  font-size: 10px;
}

.modal-content {
  background-color: #ff6633;
}