/* Loading */
#preloader {
 position: fixed;
 z-index: 4000;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #fff
}
.no-js #preloader,
.oldie #preloader {
 display: none
}
#loader {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 transform: rotate(165deg)
}

#loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em)
}

#loader:before,
#loader:after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 transform: translate(-50%, -50%)
}

#loader:before {
 animation: before 2s infinite
}

#loader:after {
 animation: after 2s infinite
}

@keyframes before {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75)
 }
 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75)
 }
 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75)
 }
 100% {
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75)
 }
}

@keyframes after {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75)
 }
 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75)
 }
 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75)
 }
 100% {
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75)
 }
}

/* Navbar */
.logo-head {
 align-content: center;
 z-index: 3000
}
img.logo-hd {
 padding: 5px
}
.navbar {
 z-index: 2500;
}
.navbar-trans {
 background-color: rgba(0, 0, 0, 1);
 padding: 1.5px;
 min-height: 50px;
 z-index: 2500;
}
.menu-item {
 margin: 0 5px;
}
#myCarousel {
 margin-bottom: 0px
}
.cont-njobo {
 padding: 0 0;
}
.navbar-dark .navbar-nav .current>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
 color: white
}

/* Sticky header */
.sticky {
 position: fixed;
 top: 0;
 width: 100%;
}
.sticky+.content {
 padding-top: 100px;
}

/* Carousel base class */
.carousel {
 margin-bottom: 0;
}
/* Since positioning the image, we need to help out the caption */
.pd-top-15 {
 padding-top: 13rem
}
.carousel-caption {
 bottom: 3rem;
 z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
 height: 35rem;
 background-color: rgb(0, 0, 0);
}
.carousel-item.testia{
 height: 23rem;
 padding: 5rem 0
}
.carousel-item.testia > img{
 width: 100%;
 opacity: .3;
}
.carousel-item > img {
 position: absolute;
 top: 0;
 left: 0;
 min-height: 100%;
 width: 100%;
 min-width: 700px
}
.h3-testi {
 position: absolute;
 right: 0;
 top: 20px;
 left: 0;
 z-index: 15;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-pack: center;
 justify-content: center;
 padding-left: 0;
 margin-right: 15%;
 margin-left: 15%;
}
/* bg gradien nggo porto / featured */
.bg-porto {
 background: radial-gradient(#394d6b, #1c2636) !important
}


/* Services */
.img-srvcs {
 position: relative;
 background-color: #000000;
 border-radius: 50%;
 width: 80%;
 max-width: 300px;
 /* box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18) */
 /* background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGRlZnM+CgkJPHBhdHRlcm4gaWQ9J3RpbGUnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnIHdpZHRoPSc3NScgaGVpZ2h0PSc3NScgdmlld0JveD0nMCAwIDUwIDUwJz4KCQkJPGxpbmUgeDE9JzEnIHkxPScwJyB4Mj0nNTEnIHkyPSc1MCcgc3Ryb2tlPScjZjcwZjBmJyBzdHJva2Utd2lkdGg9JzAnLz4KCQkJPGxpbmUgeDE9JzQ5JyB5MT0nMCcgeDI9Jy0xJyB5Mj0nNTAnIHN0cm9rZT0nI2Y3MGYwZicgc3Ryb2tlLXdpZHRoPScwJy8+CgkJCTxsaW5lIHgxPSc1MCcgeTE9JzAnIHgyPScwJyB5Mj0nNTAnIHN0cm9rZT0nIzA1MWZkYicgc3Ryb2tlLXdpZHRoPScwJy8+CgkJCTxsaW5lIHgxPScwJyB5MT0nMCcgeDI9JzUwJyB5Mj0nNTAnIHN0cm9rZT0nIzA1MWZkYicgc3Ryb2tlLXdpZHRoPScwJy8+CgkJPC9wYXR0ZXJuPgoJCTxyYWRpYWxHcmFkaWVudCBpZD0nbCcgY3g9JzUwJScgY3k9JzIwMCUnIGZ5PScwJyByPScyMDElJz4KCQkJPHN0b3Agb2Zmc2V0PScwJScgc3R5bGU9J3N0b3AtY29sb3I6I2ZmZjsgc3RvcC1vcGFjaXR5Oi4xOycgLz4KCQkJPHN0b3Agb2Zmc2V0PScxMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwMDA7IHN0b3Atb3BhY2l0eTowLjE7JyAvPgoJCQk8c3RvcCBvZmZzZXQ9JzMwJScgc3R5bGU9J3N0b3AtY29sb3I6IzAwMDsgc3RvcC1vcGFjaXR5OjAuMzsnIC8+CgkJCTxzdG9wIG9mZnNldD0nOTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojMDAwOyBzdG9wLW9wYWNpdHk6MC41NTsnIC8+CgkJCTxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6IzAwMDsgc3RvcC1vcGFjaXR5Oi42JyAvPgoJCTwvcmFkaWFsR3JhZGllbnQ+Cgk8L2RlZnM+Cgk8cmVjdCBmaWxsPScjOGU4ZThlJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+Cgk8cmVjdCBmaWxsPSd1cmwoI3RpbGUpJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+Cgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPSd1cmwoI2wpJy8+Cjwvc3ZnPg==); */
}
.imgs {
 opacity: 1;
 display: block;
 width: 100%;
 height: auto;
 transition: .5s ease;
 backface-visibility: hidden
}
.middle {
 transition: .5s ease;
 opacity: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 text-align: center;
}
.img-srvcs:hover .imgs {
 opacity: .5;
}
.img-srvcs:hover .middle {
 opacity: 1;
}
.text {
 color: white;
}


/* Portofolio */
.zoom {
 transition: transform .2s; /* Animation */
}
.zoom:hover {
 transform: scale(1.3)
}

.zoom-pur {
  transition: transform .2s; /* Animation */
 }
.zoom-pur:hover {
  transform: scale(1.1);
 }

/* Blog */
.imgs-blog {
 position: relative;
 background-color: #000000;
 width: 100%;
}
.imgs-blog:hover .imgs {
 opacity:.5
}
.imgs-blog:hover .middle {
 opacity:1
}

.logo {
    max-width: 5%;
  }
  .h3
  {
    font-family: 'quicksand-bold';
  }

  hr
  {
    height: 2px;
    opacity: 0.1;
    border-radius: 40px;
  }

  .btn-floating:hover{
    text-shadow: 2px 2px 4px #000000;
  }
  .btn-floating:active{
    color: black;
  }
  .bg-dark{
    background-color: #1c2636!important;
  }
  .btn-dark{
    background-color: #1c2636!important;
  }

  .ppdiv {
    width: 100px; 
    height: 100px;
    overflow: hidden;
  }
  .pp {
    height: 100%;
    position: absolute;
    border-radius: 50%;
  }
  .coba {
    background-image: url(./assets/img/pp.jpg);
    overflow: hidden;
    height: 100px; 
    width: 100px;
  }
main {
 display: block
}

.ikon {
 padding: 5px;
 margin-right: 10px
}
.txt-bb {
 border-bottom: 3px solid #007bff
}
#sponsor {
 margin-top: 0;
}
.brdr {
 padding: 10px;
 border: 1px solid #ddd
}

/* Css laman FAQ */
.icn {
 position: relative;
 left: 0;
}

.tanya {
 padding: 0 0 5px 25px;
 font-size: 20px;
 color: black;
 cursor: pointer;
 background: url(../img/icons/list.png) top left no-repeat;
 background-position-y: 5px;
}

.jawab {
 margin-top: 5px;
 margin: 0 0 5px 25px;
 font-size: 16px;
 border-top: 1px dashed darkgray;
 color: black
}

li.faq {
 list-style: none;
}

/*ul {
 padding-left: 10px;
}*/

div.kotaklogo {
 position: relative;
}

div.kotakutama {
 background-image: url(../img/office.jpg);
 /* Set a specific height */
 min-height: 300px;
 /* Create the parallax scrolling effect */
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

div.kotakkedua {
 background-color: rgba(255, 255, 255, 0.7);
}

.fadein {
 transition: all ease-in 0.25s;
 position: relative;
 top: 0;
 left: 0;
 height: 60px;
}

.fadein .answer {
 padding-left: 30px;
}

.fadein.ng-hide {
 opacity: 0;
 /* top:-50px; */
 left: -100px;
 height: 0px;
}

/* Location */
#location a {
 cursor: pointer!important
}