/* header_portofolio -------------------------------------------------------------------------------------------------------- */

#header_portofolio {
    /* background-image:url(../img/gradasi.png); */
    -moz-background-size:cover;
    background-size:cover;
    background-position:center center;
    /* background-attachment:fixed; */
    background-repeat:no-repeat;
    position:relative;
  }
  
  #header_portofolio .center {
    position:relative;
    z-index:1;
    color:white;
  }
  #header_portofolio .bottom {
    color:white;
    text-align:center;
      width:100%;
      position:absolute;
      bottom:30px;
  }
  
  #header_portofolio .banner {
    padding:50px 0px 0px 0px;
  }
  
  #header_portofolio .banner .cektarif {
    width: 70%;
    box-sizing: border-box;
    padding: 10px;
    margin: auto;
    color:black;
  }
  
  #header_portofolio .banner .cektarif .title-cektarif {
    color:black;
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  #header_portofolio .banner .cektarif .body-cektarif {
      position: relative;
      box-sizing: border-box;
      border-radius: 12px;
      background-color: #fff;
      padding: 15px 12px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
      margin-bottom: 20px;
      
  }
  
  #header_portofolio .banner .cektarif .body-cektarif h2{
    color:black;
    font-size: 25px;
  }
  
  
  #header_portofolio .banner .portofolio {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
    margin: auto;
  }
  
  #header_portofolio .banner .portofolio .title-portofolio {
    color:black;
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  #header_portofolio .banner .portofolio .body-portofolio {
      position: relative;
      box-sizing: border-box;
      border-radius: 12px;
      background-color: #fff;
      padding: 15px 12px;
      box-shadow: 0 20px 50px rgba(15, 153, 107, 0.7);
      margin-bottom: 20px;
      
  }
  
  #header_portofolio .banner .portofolio .body-portofolio .portofolio-form {
    float: left;
    width: 100%;
    height: 65px;
    border: 0;
    outline: none;
    font-family: "open-sans";
    font-size: 20px;
    padding-left: 15px;
    color:black;
    /* z-index: 1; */
  }
  
  #header_portofolio .banner .portofolio .body-portofolio .portofolio-btn {
    color: #3A4665;
    white-space: nowrap;
    background-color: #FFC46F;
    position: relative;
    display: inline-block;
    padding: 20px 45px;
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 50px;
    border: none;
    outline: none;
    font-family: 'poppins';
    font-weight: 700;
    width: 40%;
  }
  
  #header_portofolio .banner .portofolio .left-portofolio {
    position: absolute;
    left: 0;
    top: 400px;
    width: 40%;
    z-index: -1;
  }
  
  #header_portofolio .banner .portofolio .right-portofolio {
    position: absolute;
    right: 0;
    top: 400px;
    width: 40%;
    z-index: -1;
  }
  
  #header_portofolio .banner .portofolio .land {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 600px;
    width: 100%;
    height: 130px;
    background-color: #93cc9e;
    box-shadow: 0px -33px 75px rgba(148, 216, 184, 0.9);
    z-index: -10;
  }
  
  #footer_portofolio .inner {
    padding-top: 50px;
  }
  
  #footer_portofolio .logo_footer {
    text-align: right;
    font-size: 24px;
  }
  
  #footer_portofolio .alamat {
    text-align: right;
    font-size: 14px;
    line-height: 26px;
  }
  
  #footer_portofolio .copyright {
    text-align: left;
    font-size: 14px;
    line-height: 26px;
  }
  
  
  #header_portofolio .subtitle h4 {
    display:inline-block;
    background:white;
    color:#ed0121;
    font-size:38px;
    padding:0px 15px;
  }
  
  /* header_portofolio -------------------------------------------------------------------------------------------------------- */
  
  
  /* FOOTER -------------------------------------------------------------------------------------------------------- */
  .hide-mobile{
    display: block;
  }
  
  .dark-wrapper-portofolio {
    background-color:#0d1036;
    color:white;
    font-size:20px;
    font-weight:bold;
    width: 100%;
    height: 40%;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }
  .dark-wrapper-portofolio .ss-style-top::before {
    background-image:linear-gradient(315deg,#ed0121 50%,transparent 50%),linear-gradient(45deg,#ed0121 50%,transparent 50%);
  }
  .social-bar {
    width:100%;
    text-align:right;
  }
  .social-bar a {
    display:inline-block;
    margin-right:11px;
    font-size:2.15em;
    text-decoration:none;
    color:#fff;
    opacity:1;
    filter:alpha(opacity=100);
    -webkit-transition:opacity 350ms ease;
    -moz-transition:opacity 350ms ease;
    -o-transition:opacity 350ms ease;
    transition:opacity 350ms ease;
  }
  .social-bar a:hover {
    opacity:0.5;
    filter: alpha(opacity=50);
  }
  
  /* .themeBy{
    color: #ed0121;
    background: white;
  } */
  
  /* FOOTER -------------------------------------------------------------------------------------------------------- */
  
  
  @import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap");
  
  .container_portofolio {
    /* background: #232931; */
    width: 100%;
    height: auto;
    padding: 50px 50px 50px 50px;
    bottom: 50;
    position: relative;
    /* box-shadow: 2px 5px 10px rgba(119, 119, 119, 0.5); */
    z-index: inherit;
    
  }

  .card-deck .card .card-img-top-superiority {
    width: 100px;
    height: 100px;
    padding-left: 20px;
    padding-top: 20px;
    
  }
  
  .container_portofolio .title_portofolio{
   text-align: left;
   font-size: 25px;
   margin-top: 7%;
   margin-bottom: 7%;
   width: 90%;
   height: auto;
   border-radius: 10px;
  }
  
  .container_portofolio .section-title{
    font-size: 38px;
    color: black;
    text-align: justify;
   }

   .container_portofolio .row{
    margin-bottom: 10px;
   }
  
  
  .rb-container {
    font-family: "PT Sans", sans-serif;
    width: 50%;
    float: left;
    display: block;
    position: relative;
  }
  
  .rb-container ul.rb {
    display: inline-block;
    margin-bottom: 25px;
    padding: auto;
  }
  
  .rb-container ul.rb li {
    list-style: none;
    margin: auto;
    margin-left: 7em;
    min-height: 50px;
    border-left: 1px dashed rgb(39, 4, 4);
    padding: 0 0 50px 30px;
    position: relative;
    width: 100%;
  }
  
  .rb-container ul.rb li:last-child {
    border-left: 0;
  }
  
  .rb-container ul.rb li::before {
    position: absolute;
    left: -18px;
    top: -5px;
    content: " ";
    border: 8px solid rgb(99, 0, 0);
    border-radius: 500%;
    background: #525353;
    height: 20px;
    width: 20px;
    transition: all 500ms ease-in-out;
  }
  
  .rb-container ul.rb li:hover::before {
    border-color: #232931;
    transition: all 1000ms ease-in-out;
  }
  
  ul.rb li .timestamp {
    color: #264635;
    position: relative;
    width: 100%;
    font-size: 12px;
  }
  
  ul.rb li .item-title {
    color: rgb(5, 5, 5);
    font-weight: bold;
    width: 100%;
    position: relative;
  }
  
  ul.rb li .item-location {
    color: rgb(5, 5, 5);
    width: 100%;
    position: relative;
  }
  
  .loader-container {
    position: fixed;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
  }
  
  
    /* ==========================================================================
      11. Responsive styles 
  ========================================================================== */
  
  @media (max-width: 800px){

    .container_portofolio {
        /* background: #232931; */
        width: 80%;
        height: auto;
        bottom: 50;
        position: relative;
        /* box-shadow: 2px 5px 10px rgba(119, 119, 119, 0.5); */
        z-index: inherit;
        
      }
  
    .container_portofolio .title_portofolio{
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      font-size: 25px;
      margin-top: 7%;
      margin-bottom: 7%;
      border-radius: 10px;
      width: 90%;
      height: auto;
     }
  
     .container_portofolio .title_portofolio_2{
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      font-size: 20px;
     }
  
     .container_portofolio .title_portofolio .awb{
      margin-top: 10px;
      font-size: 25px;
     }
  
     .container_portofolio .title_portofolio .route{
      margin-bottom: 10px;
      font-size: 17px;
     }
  
    .hide-mobile {
      display: none;
      width: 100%;
    }
  
    .dark-wrapper-portofolio {
      background-color:#0d1036;
      color:white;
      font-size:20px;
      font-weight:bold;
      width: 100%;
      height: 40%;
      bottom: 0;
      left: 0;
      position: relative;
      overflow: hidden;
    }
    .dark-wrapper-portofolio .ss-style-top::before {
      background-image:linear-gradient(315deg,#ed0121 50%,transparent 50%),linear-gradient(45deg,#ed0121 50%,transparent 50%);
    }
    .social-bar {
      width:100%;
      text-align:right;
    }
    .social-bar a {
      display:inline-block;
      margin-right:11px;
      font-size:2.15em;
      text-decoration:none;
      color:#fff;
      opacity:1;
      filter:alpha(opacity=100);
      -webkit-transition:opacity 350ms ease;
      -moz-transition:opacity 350ms ease;
      -o-transition:opacity 350ms ease;
      transition:opacity 350ms ease;
    }
    .social-bar a:hover {
      opacity:0.5;
      filter: alpha(opacity=50);
    }
  
    #header_portofolio .banner .portofolio {
      width: 90%;
      box-sizing: border-box;
      padding: 10px;
      margin: auto;
      
    }
  
    #header_portofolio .banner .portofolio .body-portofolio .portofolio-btn {
      color: #3A4665;
      white-space: nowrap;
      background-color: #FFC46F;
      position: relative;
      display: inline-block;
      padding: 20px 45px;
      font-weight: 700;
      font-size: 14px;
      transition: 0.3s;
      cursor: pointer;
      white-space: nowrap;
      border-radius: 50px;
      border: none;
      outline: none;
      font-family: 'poppins';
      font-weight: 700;
      width: 60%;
    }
  
    #header_portofolio .banner .portofolio .title-portofolio {
      color:black;
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  
    #footer_portofolio .logo_footer {
      text-align: center;
      font-size: 24px;
    }
    
    #footer_portofolio .alamat {
      text-align: center;
      font-size: 14px;
      line-height: 26px;
    }
  
    #footer_portofolio .social .social-bar {
      text-align: center;
    }
    
    #footer_portofolio .copyright {
      text-align: center;
      font-size: 14px;
      line-height: 26px;
    }
  
    #footer_portofolio .inner {
      padding-bottom: 140px;
      padding-top: 35px;
    }
  
    .container_portofolio {
      /* background: #232931; */
      width: 100%;
      height: auto;
      position: relative;
      margin-top: 4%;
      box-shadow: 2px 5px 10px rgba(119, 119, 119, 0.5);
      overflow: hidden;
    }
  
    .rb-container {
      font-family: "PT Sans", sans-serif;
      width: 50%;
      float: left;
      right: 120px;
      display: block;
      position: relative;
      height: auto;
    }
  
    .rb-container ul.rb {
      margin: 1em 0;
      display: inline-block;
      margin-bottom: 25px;
      padding: auto;
    }
    
    .rb-container ul.rb li {
      list-style: none;
      margin: auto;
      margin-left: 10em;
      min-height: 50px;
      border-left: 1px dashed rgb(39, 4, 4);
      padding: 0 0 50px 30px;
      position: relative;
      width: 100%;
    }
    
    .rb-container ul.rb li:last-child {
      border-left: 0;
    }
    
    .rb-container ul.rb li::before {
      position: absolute;
      left: -18px;
      top: -5px;
      content: " ";
      border: 8px solid rgb(99, 0, 0);
      border-radius: 500%;
      background: #525353;
      height: 20px;
      width: 20px;
      transition: all 500ms ease-in-out;
    }
    
    .rb-container ul.rb li:hover::before {
      border-color: #232931;
      transition: all 1000ms ease-in-out;
    }
    
    ul.rb li .timestamp {
      color: #264635;
      position: relative;
      width: 70%;
      font-size: 12px;
    }
    
    ul.rb li .item-title {
      color: rgb(5, 5, 5);
      width: 70%;
      font-weight: bold;
      position: relative;
    }
  
    ul.rb li .item-location {
      color: rgb(5, 5, 5);
      width: 70%;
      position: relative;
    }
  }
  
  
  @media (min-width:768px) {
    .navbar-nav {
        float:none !important;
        width:100%;
        text-align:center;
        margin-left:9px;
    }
    .navbar-nav>li {
        display:inline-block;
        float:none;
    }
    #logo {
        position:absolute;
        display:block !important;
        width:110px;
        left:50%;
        margin-left:-55px;
        background:black;
        -webkit-border-radius:0 0 100% 100%;
        -moz-border-radius:0 0 100% 100%;
        border-radius:0 0 100% 100%;
        padding: 12px;
    }
    
  }
  
  @media (max-width:767px) {
    #header_portofolio .banner h1 {
        font-size:60px;
    }
    #header_portofolio .subtitle h4 {
        font-size: 22px;
    }
    .social-bar {
        text-align: left;
        margin-top: 30px;
    }
    
  }