.container-fluid.main{
  position: relative; /* To make the navbar positions relative to this container */
  padding: 0;
}

.navbar-default {
  background-image: none;
  background-color: transparent; /* Make the menu become transparent */
  border-radius: 0px;
  border: 0;
  box-shadow: none;
  padding: 10px;
  position: absolute; /* Make the menu out of the document flow so it can placed anywhere without disturbing other widgets */
  top: 0;
  left: 0;
  right: 0;
  z-index: 10; /* If you delete this line, your menu link won't be clicked because it is behind the background. Applying this code bring the menu in front of the background */
}

.navbar-default .navbar-brand {
  font-family: Verdana;
  color: #ffffff;
  font-size: 20px;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
  background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
  color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
}

.navbar-default .navbar-toggle:hover {
  background-color: transparent;
}

.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.carousel .background {
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 900px;
}

@media (max-width:991px) {
  .carousel .background {
    background-size: cover; /* To make the background image looks good */
  }
}

.carousel .background.a {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/background20.jpg");
  /* background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://static.pexels.com/photos/338936/pexels-photo-338936.jpeg"); */
}

.carousel .background.b {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/background21.jpg");
  /* background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://static.pexels.com/photos/129539/pexels-photo-129539.jpeg"); */
}

.carousel .background.c {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/background22.jpg");
  /* background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg"); */
}

.carousel .background.d {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/background23.jpg");
  /* background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg"); */
}

.carousel .background.e {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/background24.jpg");
  /* background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg"); */
}


.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition: opacity 0.3s; /* The 0.3s describes the duration to make the opacity from 0 to 1 */
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

/* CSS Hack to trigger GPU for smooth transition */
@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* CSS Hack to trigger GPU for smooth transition */

.covertext {
  position: absolute; /* To make the div to be place anywhere. It is out of the document flow */
  top: 200px; /* The distance between the div with the top of document */
  left: 0px; /* Make the div full width */
  right: 0px; /* Make the div full width */
}

.title {
  font-family: "Verdana";
  font-weight: 600;
  font-size: 60px;
  color: #ffffff;
  text-align: center;
}

.subtitle {
  font-family: "Verdana";
  font-size: 23px;
  color: #ffffff;
  text-align: center;
}

.explore .platcari{
  text-align: center;
  margin-top: 10px;
}

.explore .platcari .row{
  text-align: center;
  margin-top: 10px;
}

.explore .explorer .tombol-login{
  font-size: 20px;
}

.explore {
  text-align: center;
  
}



#btl{
background: #FF4000;
font-weight: bold;
color: #ffffff;
border-radius: 30px;
}

#btnbtl{
  background: rgb(54, 207, 218);
  font-weight: bold;
  color: #ffffff;
  border-radius: 30px;
  }

  /* btn login properti let me in*/

 #btl:focus {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
     
    #btl:hover,
    #btl:focus {
      color: #333333;
      text-decoration: none;
    }

    #btl:hover,
    #btl:active,
    #btl .active {
      background-color: #31b0d5;
      border-color: #2aabd2;
    }

/* btn batal property*/
#btnbtl:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
 
#btnbtl:hover,
#btnbtl:focus {
  color: #333333;
  text-decoration: none;
}

#btnbtl:hover,
#btnbtl:active,
#btnbtl .active {
  background-color: #ff9999;
  border-color: #ff9999;
}
/*==========================================*/
.platcari{
      display:none;
    }

    .tombol {
      border-radius: 30px;
      display: inline-block;
      padding: 15px 25px;
      margin-bottom: 4px;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.428571429;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      border: 1px solid transparent;
      border-radius: 29px;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
           -o-user-select: none;
              user-select: none;
    }
    .tombol:focus {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
     
    .tombol:hover,
    .tombol:focus {
      color: #333333;
      text-decoration: none;
    }
     
    .tombol:active,
    .tombol.active {
      background-image: none;
      outline: 0;
      -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
              box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }
    .tombol-login {
      background:#FF4000;
      border:0;
      color:#fff;
      margin-top:0;
      margin-bottom:0;
    }
    .tombol-login:hover,
    .tombol-login:active,
    .tombol-login .active {
      background-color: #31b0d5;
      border-color: #2aabd2;
    }