html{
  scroll-behavior: smooth ;

}
.text-block {
  position: absolute;
  bottom: 20px;
  /*left: 20px;*/
  right: 30px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0.25rem !important;
  padding-top: 0.50rem !important;
}
.img-header{
  width: 11em;
}
.navbar-default{
  transition:500ms ease;
  /*background:transparent;*/
}
.btn-kuning {
  color: #000000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.navbar-default.scrolled{
  background-color: #000000 !important;
}
.btn-default1{
  color: #343a40 !important;
  /*background:transparent;*/
}
.btn-default1.scrolled{
  color: #fff !important;
}
.bg-biru{
  background-color: #0000CD  !important;
}
.btn-biru{
  color: #0000CD;
  background-color: #0000CD;
  border-color: #0000CD;
}
.text-biru{
  color: #0000CD  !important;
}
.bg-merah{
  background-color: #F70D1A  !important;
}
.btn-merah{
  color: #F70D1A;
  background-color: #ffc107;
  border-color: #ffc107;
}
.text-merah{
  color: #F70D1A  !important;
}

.relative1 {
  position: relative;
  /*width: 400px;
  height: 200px;*/
  /*border: 3px solid #73AD21;*/
}
.hcus{
  height: 35em !important;

}
.absolute1 {
  position: absolute;
  top: 500px;
  right: 0;
  /*width: 200px;
  height: 100px;*/
  /*border: 3px solid #73AD21;*/
}
.text-orange{
  color:#FF6600 !important;
}
.bg-orange{
  color:#FF6600 !important;
}
.btn-orange {
  color: #fff;
  background-color: #FF6600;
  border-color: #FF6600;
}
.btn-xs{
  padding: 0.5rem 0.5rem;
  font-size: 0.800rem;
  line-height: 1;
  border-radius: 0.2rem;
}
/*-----------navbar-------------*/
.smart-scroll{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.scrolled-down{
   transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
   transform:translateY(0); transition: all 0.3s ease-in-out;
}
/*-----------------*/
.btn-transparent{
  color: #fff;
  background-color: transparent;
  border-color: transparent;
}
.zoom-effect {  
  position: relative;
}
.img-zoom {
  max-width: 100%;
  max-height: 60%;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
.zoom-effect:hover .img-zoom {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}
.img-fluid1 {
  max-width: 100%;
  max-height: 60%;
}
.img-fluid2 {
  max-width: 100%;
  max-height: 50%;
}
.img-pro {
  max-width: 10%;
  max-height: 50%;
}
.gmb-inside {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 20%;
}
.rounded-xl {
  border-radius: 1.5rem !important;
}
.row1 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
.gmb-client{
  max-width: 40%;
  max-height: 40%;
  
}
/* Create four equal columns that sits next to each other */
.column {
  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) {
  .relative1 {
    position: relative;
    /*width: 400px;
    height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }

  .absolute1 {
    position: absolute;
    top: 300px;
    right: 0;
    /*width: 200px;
    height: 100px;*/
    /*border: 3px solid #73AD21;*/
  }
  
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 480px) {
  .relative1 {
    position: relative;
    /*width: 400px;
    height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }

  .absolute1 {
    position: absolute;
    top: 10px;
    right: 0;
    /*width: 200px;
    height: 100px;*/
    /*border: 3px solid #73AD21;*/
  }

}
@media screen and (max-width: 600px) {
  .relative1 {
    position: relative;
    /*width: 400px;
    height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }

  .absolute1 {
    position: absolute;
    top: 300px;
    right: 0;
    /*width: 200px;
    height: 100px;*/
    /*border: 3px solid #73AD21;*/
  }
  
}
 .footer {
      padding: 1em 0;
  }
.navbar-default{
  transition:500ms ease;
  /*background:transparent;*/
}
.navbar-default.scrolled{
  background:#696969;
}
.text-blue{
  transition:500ms ease;
  /*color: #fff !important;*/

}
.text-blue.scrolled{
  /*color: #fff !important;*/
}
.btn-darkg{
  background: #2F4F4F; 
}

.containerAktif {
  position: relative;
  width: 50%;
}
.imageAktif {
  display: block;
  width: 100%;
  height: auto;
}

.overlayAktif {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

.containerAktif:hover .overlayAktif {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.tulisanAktif {
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.sans{
  /*color: #787976; */
  font-family:  "Open Sans", sans-serif;
}
.courier{
  font-family : "Courier New", Courier, monospace;

}
.lucida{
  font-family : "Lucida Console", Monaco, monospace;

}
.georgia{
  font-family : Georgia, serif;

}
.palatino{
  font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;

}
.timesnew{
  font-family : "Times New Roman", Times, serif;

}
.arial{
  font-family : Arial, Helvetica, sans-serif; 
}

.comic{
  font-family : "Comic Sans MS", cursive, sans-serif; 
}
.impact{
  font-family : Impact, Charcoal, sans-serif; 
}
.tahoma{
  font-family : Tahoma, Geneva, sans-serif;
}

.verdana{
  font-family : Verdana, Geneva, sans-serif;  
}

@media (min-width: 320px) {
  .img-header{
    width: 30em;
  }
  .hcus{
    height: 20em !important;

  }
  .relative1 {
    position: relative;
    /*width: 400px;
    height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }

  .absolute1 {
    position: absolute;
    top: 200px;
    right: 0;
    /*width: 200px;
    height: 100px;*/
    /*border: 3px solid #73AD21;*/
  }
    .scrollable-menu {
  }
  .gambarHeader{
    width:30vh;
    height:5vh;
  }
  .gambarIcon{
    width: 4.5vh; 
    height: 5vh;
    
  }
  .gambarIcon1{
    width: 8vh; 
    height: 6vh;
    
  }
  .gambarHome{
      width: 35vh; 
      height: 30vh;

  }
  .gambarAbout{
      width: 30vh; 
      max-height: 30vh;
  }    
  .gambarGuna{
      width: 100%; 
      max-height: 8vh;
    }
  .gambarTesti{
      width: 50vh; 
      max-height: 50vh;
  }
  .gambarTesti1{
      width: 40%; 
      max-height: 40%;
  }
  .tulis1{
    font-family:  "Open Sans", sans-serif;
    font-size: 10vw;
  }
  .tulis2{
    font-family : "Courier New", Courier, monospace;
    font-size: 5vw;
  }  
  .youtube{
    width:40vh;
    height: 30vh;
  }
  
  .map-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
  }
  .map-responsive iframe{
      left:0;
      top:0;
      height:100%;
      width:100%;
      position:absolute;
  }
}

@media (min-width: 350px) {
  .img-header{
    width: 450px;
    height:4em;

  }
  .hcus{
    height: 20em !important;

  }
  .relative1 {
    position: relative;
    /*width: 400px;
    height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }

  .absolute1 {
    position: absolute;
    top: 200px;
    right: 0;
    /*width: 200px;
    height: 100px;*/
    /*border: 3px solid #73AD21;*/
  }
    .scrollable-menu {
	}
	.gambarHeader{
    width:30vh;
    height:5vh;
  }
  .gambarIcon{
    width: 4.5vh; 
    height: 5vh;
    
  }
  .gambarIcon1{
    width: 8vh; 
    height: 6vh;
    
  }
  .gambarHome{
      width: 35vh; 
      height: 30vh;

  }
  .gambarAbout{
      width: 30vh; 
      max-height: 30vh;
  }    
  .gambarGuna{
	    width: 100%; 
	    max-height: 8vh;
    }
  .gambarTesti{
      width: 50vh; 
      max-height: 50vh;
  }
  .gambarTesti1{
      width: 40%; 
      max-height: 40%;
  }
  .tulis1{
    font-family:  "Open Sans", sans-serif;
    font-size: 10vw;
  }
  .tulis2{
    font-family : "Courier New", Courier, monospace;
    font-size: 5vw;
  }  
  .youtube{
    width:40vh;
    height: 30vh;
  }
  .map-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
  }
  .map-responsive iframe{
      left:0;
      top:0;
      height:100%;
      width:100%;
      position:absolute;
  }
}
@media (min-width: 576px) {
	.img-header{
    width: 11em;
  }
  .relative1 {
    position: relative;
    /*width: 400px;
    height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }

  .absolute1 {
    position: absolute;
    top: 250px;
    right: 0;
    /*width: 200px;
    height: 100px;*/
    /*border: 3px solid #73AD21;*/
  }
    .tulis1{
    font-family:  "Open Sans", sans-serif;
    font-size: 6vw;
  }
  .tulis2{
    font-size: 3vw;
    font-family : "Courier New", Courier, monospace;
  }
  .scrollable-menu {

  }
  .gambarHeader{
    width:30vh;
    height:10vh;
  }
  .gambarTesti{
      width: 150vh; 
      max-height: 50vh;
  }
  .gambarTesti1{
      width: 20%; 
      max-height: 20%;
  }
  .gambarHome{
      width: 70vh; 
      height: 60vh;
  }
  .gambarIcon{
    width: 13vh; 
    height: 15vh;
    
  }
  .gambarIcon1{
    width: 19vh; 
    height: 15vh;
    
  }
  .gambarAktif{
      width: 30vh; 
      height: 30vh;
  }
  .imageAktif {
    display: block;
    width: 100%;
    height: 100vh;
  }
  .gambarGuna{
      width: 100%; 
      max-height: 35vh;
  }
  .gambarModal{
      width: 100%; 
      max-height: 15vh;
  }
  .gambarAbout{
      width: 70vh; 
      max-height: 70vh;
  }    
  .youtube{
    width:100vh;
    height: 70vh;
  }
  .map-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
  }
  .map-responsive iframe{
      left:0;
      top:0;
      height:100%;
      width:100%;
      position:absolute;
  }  
}

@media (min-width: 992px) {
  .img-header{
    width: 11em;
  }
  .hcus{
    height: 35em !important;

  }
  .relative1 {
    position: relative;
    /*width: 400px;
    height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }

  .absolute1 {
    position: absolute;
    top: 500px;
    right: 0;
    /*width: 200px;
    height: 100px;*/
    /*border: 3px solid #73AD21;*/
  }
    .scrollable-menu {
	}
	.tulis1{
    font-family:  "Open Sans", sans-serif;
    font-size: 6vw;
  }
  .tulis2{
    font-size: 3vw;
    font-family : "Courier New", Courier, monospace;
  }
  .gambarHeader{
    width:30vh;
    height:8vh;
  }
  .gambarTesti{
      width: 150vh; 
      max-height: 50vh;
  }
  .gambarTesti1{
      width: 20%; 
      max-height: 20%;
  }
  .gambarHome{
      width: 60vh; 
      height: 60vh;
  }
  .gambarIcon{
    width: 10vh; 
    height: 10vh;
    
  }
  .gambarAktif{
      width: 100%; 
      max-height: 18vh;
  }
  .gambarGuna{
      width: 100%; 
      max-height: 20vh;
  }
  .gambarModal{
      width: 100%; 
      max-height: 15vh;
  }
  .gambarAbout{
      width: 65vh; 
      max-height: 55vh;
  }    
  .youtube{
    width:80vh;
    height: 50vh;
  } 
  .map-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
  }
  .map-responsive iframe{
      left:0;
      top:0;
      height:100%;
      width:100%;
      position:absolute;
  }  
}

@media (min-width: 1200px) {
  .img-header{
    width: 11em;
  }
  .relative1 {
    position: relative;
    /*width: 400px;
    height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }

  .absolute1 {
    position: absolute;
    top: 500px;
    right: 0;
    /*width: 200px;*/
    /*height: 200px;*/
    /*border: 3px solid #73AD21;*/
  }
  

  .tulis1{
    font-family:  "Open Sans", sans-serif;
    font-size: 6vw;
  }
  .tulis2{
    font-size: 3vw;
    font-family : "Courier New", Courier, monospace;
  }
  .scrollable-menu {

	}
  .gambarHeader{
    width:30vh;
    height:8vh;
  }
	.gambarTesti{
      width: 100%; 
      max-height: 50vh;
  }
  .gambarTesti1{
      width: 20%; 
      max-height: 20%;
  }
  .gambarHome{
      width: 50vh; 
      height: 40vh;
  }
  .gambarIcon{
    width: 6vh; 
    height: 7vh;
    
  }
  .gambarIcon1{
    width: 9vh; 
    height: 7vh;
    
  }
  .gambarAktif{
	    width: 100%; 
	    max-height: 18vh;
	}
	.gambarGuna{
	    width: 100%; 
	    max-height: 20vh;
	}
	.gambarModal{
	    width: 100%; 
	    max-height: 15vh;
	}
	.gambarAbout{
	    width: 65vh; 
	    max-height: 55vh;
	}    
  .youtube{
    width:80vh;
    height: 50vh;
  }
  .map-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
  }
  .map-responsive iframe{
      left:0;
      top:0;
      height:100%;
      width:100%;
      position:absolute;
  }
}
/*//----------sidebar-----------//*/
body {
  font-family: "Lato", sans-serif;
}

/* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active1 {
  background-color: green;
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}