body, html {
  padding : 0px;
  margin : 0px;
  background : #fff;
  color : #2a2a2a;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-family: open sans;
  font-weight: 300;
  box-sizing : border-box;
}

@font-face { font-family: georgia italic; src: url(fonts/GeorgiaItalic.ttf); }
@font-face { font-family: Brandon regular; src: url(fonts/brandon_re.ttf); }
@font-face { font-family: Brandon bold; src: url(fonts/Brandon_bld.otf); }
@font-face { font-family: Brandon medium; src: url(fonts/Brandon_med.otf); }
@font-face { font-family: miller display italic; src: url(fonts/millerdisplayitalic.ttf); }
/* @font-face { font-family: Cinzel; src: url(fonts/TrajanPro-Regular.ttf); } */


input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

a, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

.clear {
  clear : both;
}

.master-body {
  width : 100%;
  height : 100%;
  min-width : 1200px;
  overflow: hidden;
  margin : 0 auto;
  position : relative;
  background : #fff;
}

.master-body#index {
  background : none;
  min-height : 600px;
}


/* ----------------- MAIN MENU CSS ---------------- */

#menu-master {
  width: 100%; /* biar gak melebar ke kanan */
  position: fixed;
  z-index: 9999;
  top: 0px;
  left: 0px;
  transition: all 0.2s ease-in-out;
  background: transparent;/* biar ada transisi putih ke bawah */
}

/* Logo besar di kiri */
#menu-master #master-logo {
  position: absolute;
  top: 0px;
  left: 5%; /* nempel kiri tapi kasih jarak dikit */
  width: 210px;
  margin-top: 0px;
  padding: 25px 15px;
  background: #fff;
  text-align: center;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 4px;
  transition: all 0.3s ease-in-out;
  z-index: 10000;
}

/* Logo kecil (untuk mode mobile) */
#menu-master #master-logo-small {
  position: absolute;
  left: 20px;
  top: 0;
  width: 120px;
  min-width: 120px;
  border: none;
  padding-top: 12px;
  background: #fff;
  padding: 0 10px;
  visibility: hidden;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  z-index: 10000;
}

/* Logo effect (biru kecil di pojok) */
#menu-master #master-logo:before {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #54baf7;
  border-radius: 4px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  content: '';
  bottom: -50px;
  right: -50px;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

#menu-master #master-logo.margin-top:before {
  display: none;
}

/* Menu tengah */
#menu-master #cssmenu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 30px 0;
}

#menu-master #cssmenu ul {
  display: inline-block;
  padding: 0;
  margin: 0;
}

#menu-master #cssmenu ul li {
  display: inline-block;
  margin: 0 10px;
}



/* Tampilkan submenu saat hover */
#menu-master #cssmenu ul li:hover > ul {
  display: block;
}

#menu-master #cssmenu ul li a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  padding: 8px 12px;
  transition: 0.2s;
}

#menu-master #cssmenu ul li a:hover {
  color: #54baf7;
}

/* Responsif mobile */
@media only screen and (max-width: 1200px) {
  #menu-master {
    width: 100%;
  }

  #menu-master #master-logo {
    visibility: hidden;
  }

  #menu-master #master-logo img {
    visibility: hidden;
  }

  #menu-master #master-logo-small {
    visibility: visible;
  }

  #menu-master #cssmenu {
    flex-direction: column;
    padding: 15px 0;
  }

  #menu-master #cssmenu ul {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
}

/* ----------------- END MAIN MENU CSS ---------------- */


.background-master {
  position : relative;
  width : 100%;
  height : 750px;
  margin-top : 0px;
  overflow : hidden;
  background : #111;
  background-position : bottom center;
  background-size : cover;
}

.submenu-background-master {
  position : relative;
  width : 100%;
  height : 550px;
  margin-top : 0px;
  overflow : hidden;
  background : #111;
  background-position : bottom center;
  background-size : cover;
}

.background-master:after,
.submenu-background-master:after {
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  content : '';
  z-index : 1;
  background : rgba(21,69,109,0.5);
}

.background-master .bxslider {
  margin : 0;
  padding : 0;
  width : 100%;
  height : 100%;
  position : absolute;
  top : 0;
  left : 0;
  z-index : 0;
}


.background-master #text-content-frame {
    position: absolute;
    font-family: Montserrat;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Memusatkan secara horizontal dan vertikal */
    z-index: 10; /* Pastikan teks di atas slider */
    color: #fff;
    font-weight: 600;
}

.background-master #text-content-frame #text-big {
    font-size: 85px;
    text-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

.background-master #text-content-frame #text-small {
    font-size: 30px;
    letter-spacing: 2px;
    padding: 10px 20px;
    display: inline-block;
    text-transform: uppercase;
    background: rgba(35,56,74,0.88);
    border-radius: 2px;
}

.background-master #text-content-frame #text-small2 {
    padding-top: 20px;
    text-align: center; /* Mengubah dari text-align: left ke center untuk konsistensi */
    font-size: 30px;
    font-family: 'Roboto Slab';
    text-transform: capitalize;
    font-weight: 300;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.frame-master {
  width : 1130px;
  padding : 0 25px;
  margin : 0 auto;
  position : relative;
}

.frame-master > .frame-inner{
  width : 1130px;
  padding : 0 25px;
  margin : 0 auto;
  position : relative;
}

.frame-master .read-more {
  position : relative;
  cursor : pointer;
  color : #fff;
  transition: all .2s cubic-bezier(.72,.35,.33,.71);
}

.frame-master .read-more-trigger:hover .read-more,
.frame-master#index-5 #title:hover .read-more,
.frame-master .read-more:hover{
  transform : scale(1.1);
  transition: all .2s cubic-bezier(.72,.35,.33,.71);
}

.frame-master .read-more-trigger:hover .read-more #text,
.frame-master#index-5 #title:hover .read-more #text,
.frame-master .read-more:hover #text{
  transform: translate(-48px, 0px);
  opacity : 1;
  transition-delay : .2s;
  transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);  
}

.frame-master .read-more #text {
  position : relative;
  float : left;
  height : 48px;
  border : 1px solid #335a71;
  padding : 0 20px;
  background : #fff;
  color : #335a71;
  font-family : brandon bold;
  text-transform : uppercase;
  letter-spacing : 2px;
  font-size : 14px;
  vertical-align : middle;
  line-height : 48px;
  opacity : 0;
  transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); 

}

.frame-master .read-more #icon{
  position : absolute;
  right : 0px;
  height : 50px;
  width : 50px;
  vertical-align : middle;
  line-height : 50px;
  text-align : center;
  background : #335a71; 
  box-shadow : 5px 5px 10px rgba(0,0,0,0.2); 
}

.frame-master .read-more #icon i {
  font-size : 17px;
}

#maintenance {
  width : 100%;
  height : 100%;
  background : #fff;
  position : absolute;
  z-index : 990;
  text-align : center;
}

#maintenance img{
  margin-top : 20%;

}
@media (max-width: 1200px) {
  .frame-master,
  .frame-master > .frame-inner {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
  }

  .background-master #text-content-frame #text-big {
    font-size: 60px;
  }

  .background-master #text-content-frame #text-small {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .background-master,
  .submenu-background-master {
    height: auto;
    min-height: 350px;
  }

  .background-master #text-content-frame {
    top: 30%;
    right: 0;
    left: 0;
    padding: 0 10px;
  }

  .background-master #text-content-frame #text-big {
    font-size: 40px;
  }

  .background-master #text-content-frame #text-small {
    font-size: 18px;
    padding: 8px 15px;
  }

  .frame-master,
  .frame-master > .frame-inner {
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .background-master #text-content-frame #text-big {
    font-size: 28px;
  }

  .background-master #text-content-frame #text-small {
    font-size: 14px;
    padding: 6px 10px;
    letter-spacing: 1px;
  }
}
@media (max-width: 768px) {
  /* Matikan efek slider di mobile */
  .background-master .bxslider {
    position: relative;
    height: auto;
    display: block;
  }

  .background-master .bxslider li {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  .background-master .bxslider img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}



/* ----------------- index 1  ------------------*/


.frame-master#index-1 {
  margin-top : 120px;
  padding-bottom : 100px;
}

.frame-master#index-1 #content-top {
  position : relative;
  margin-bottom : 100px;
  margin-right : 8%;
  padding-left : 50px;
  float : left;
  width : 80%;  
  z-index : 1;
}

.frame-master#index-1 #content-top #text-big{
  font-family : Montserrat;
  color : #2a3b4e;
  font-weight : 700;
  font-size : 70px;
  letter-spacing : -1px;
  line-height : 120%;
}

.frame-master#index-1 #content-top #text-small{
  margin-top : 20px;
  font-size : 17px;
  width : 80%;
  font-weight : 300;
  line-height : 150%;
}
.frame-master#index-1 #content-top #text-big:before{
  width : 120px;
  height : 300px;
  background : #6dc5f2;
  position : absolute;
  content : '';
  right : -50px;
  top : -180px;
}

.frame-master#index-1 #content1 {
  position : relative;
  float : left;
  width : 400px;
  background: #fff;
  border : 1px solid #d8e0e5;
  padding : 50px;
  z-index : 2;
  transition: all 400ms ease-in-out;  
}

.frame-master#index-1 #content1:hover {
  box-shadow : 0 10px 30px rgba(0,0,0,0.1);
  border-color : #fff;
  transform : translate(20px, 0px);
  transition: all 400ms ease-in-out;  
  transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);  
}


.frame-master#index-1 #content1:after {
  position : absolute;
  left : 50px;
  bottom : -5px;
  width : 150px;
  height : 10px;
  content : '';
  background : #6dc5f2;
}

.frame-master#index-1 #content1 #text-small{
  font-family : roboto slab;
  color : #2a3b4e;
  font-size :35px;
}

.frame-master#index-1 #content1 .read-more{
  float : right;
  margin : 10px 0;
  margin-right : -75px;
}

.frame-master#index-1 #content2 {
  float : right;
  position : relative;
  margin-top : 140px;
  width : calc(100% - 520px);
  height : 400px;
  z-index : 1;
}

.frame-master#index-1 #content2 #image-block{
  position : absolute;
  top : 0;
  right : 0px;
  width : 110%;
  height : 400px;
  background : url(asset/images/kantor.jpg);
  background-size : cover;
  background-position : center;
}

.frame-master#index-1 #content2 #text-frame{
  position : relative;
  margin-top : 350px;
  margin-left : 50px;
  max-width : 350px;
  z-index : 2;
  background : #335a71;
  color : #fff;
  box-shadow : 0 0 20px rgba(0,0,0,0.32);
  padding : 30px;
  line-height : 170%;
  font-weight : 400;
}



/* ----------------- index 2  ------------------*/


.frame-master#index-2 {
  width : 100%;
  padding : 0;
  margin-top : 80px;
  padding-bottom : 120px;
}

.frame-master#index-2 #title-box{
  max-width : 170px;
  width : 12%;
  height : 170px;
  background : #6dc5f2;
  position : absolute;
  top : 10px;
  left : 0;
}
.frame-master#index-2 #title-box::before{
  position : absolute;
  content : '';
  width : 100%;
  height : 100%;
  border : 2px dashed #d8e0e5;
  top : -30px;
  right : -30px;
  z-index : 0;
}

.frame-master#index-2 #title-frame{
  width : 80%;
  margin-left : 12%;
  position : relative;
}

.frame-master#index-2 #title-frame #big{
  display : block;
  float : left;
  font-family : Montserrat;
  font-weight : 700;
  font-size : 90px;
  line-height : 110%;
  color : #2a3b4e;
  letter-spacing : -1px;
}

.frame-master#index-2 #title-frame .read-more{
  float : left;
  margin-top : 120px;
  margin-left : 200px;
}

.frame-master#index-2 #desc-frame {
  margin-top : 20px;
  margin-left : 12%;
  width : 600px;
  color : #2a3b4e;
  position : relative;
  line-height : 170%;
  font-weight : 400;
}

.frame-master#index-2 #content-frame {
  margin-left : 12%;
  position : relative;
  margin-top : 50px;
}

.frame-master#index-2 #content-frame #box {
  position : relative;
  float : left;
  margin : 15px;
  border : 1px solid #bdc6cc;
  border-radius : 2px;
  width : 120px;
  height : 120px;
  padding : 20px;
  cursor : pointer;
  text-align : center;
  transition : all .4s ease-in-out;
}
.frame-master#index-2 #content-frame #box:first-child {
  margin-left : 0;
}

.frame-master#index-2 #content-frame #box:hover {
  border-color : #6dc5f2;
  background : #6dc5f2;
  transform : translate(0px, -10px);
  box-shadow : 12px 12px 0px #d6eef9;
  transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);  
}

.frame-master#index-2 #content-frame #box:hover #title{
  color : #fff;
  font-weight : 600;
}

.frame-master#index-2 #content-frame #box:hover #icon{
  color : #fff;
  transition : all .2s ease-in-out
}


.frame-master#index-2 #content-frame #box #icon {
  position : absolute;
  right : 20px;
  top : 15px;
  line-height : 100%;
  font-size : 42px;
  color : #5cb4e0;
}

.frame-master#index-2 #content-frame #box #title {
  padding : 5px 0;
  font-family : roboto slab;
  font-weight : 400;
  font-size : 20px;
  color : #2a3b4e;
  font-size : 18px;
  position : absolute;
  bottom : 20px;
  left : 20px;
  transition: all 400ms ease-in-out;  
}


/* ----------------- index 2  ------------------*/


.frame-master#index-3 {
  width : 100%;
  padding : 0;
  min-height : 550px;
  padding-bottom : 100px;
  background : url(images/bg1.jpg);
  background-attachment : fixed;
  background-size : cover;
  position : relative;
}

.frame-master#index-3 #box-frame{
  position : absolute;
  width : 550px;
  height : 650px;
  right : 12%;
  top : 0px;
  background : rgba(32,86,117,0.85);
  color : #fff;

}

.frame-master#index-3 #box-frame #inner-padding{
  padding : 50px;
  position : relatives;
}

.frame-master#index-3 #box-frame #title-frame{
  margin-top : 60px;
}

.frame-master#index-3 #box-frame #title-frame #text-big{
  font-family : roboto slab;
  text-transform : capitalize;
  font-size : 32px;
  line-height : 140%;
}

.frame-master#index-3 #box-frame #title-frame #text-big b{
  font-weight : 400;
  font-size : 65px;
  line-height : 90%;
}

.frame-master#index-3 #box-frame #content-frame{
  width : 90%;
  padding-top : 50px;
  font-weight : 400;
  line-height : 170%;
  text-shadow : 1px 1px 2px rgba(0,0,0,0.1);
}

.frame-master#index-3 #box-frame .read-more{
  float : right;
  margin-top : 20px;
  margin-right : -70px;
}
.frame-master#index-3 #box-frame .read-more #icon {
  background : #6dc5f2;
}


/* ----------------- index 4  ------------------*/


.frame-master#index-4 {
  margin-top : 120px;
  padding-bottom : 100px;
}

.frame-master#index-4 #text-middle {
  position : relative;
  float : left;
  width : 380px;
  border : 1px solid#d8e0e5;
  padding : 40px;
  padding-top : 50px;
  text-align : right;
  color : #2a3b4e;
  padding-bottom : 100px;
  transition: all 400ms ease-in-out;  
}

.frame-master#index-4 #text-middle:hover {
  box-shadow : 0 10px 30px rgba(0,0,0,0.1);
  border-color : #fff;
  transform : translate(20px, 0px);
  transition: all 400ms ease-in-out;  
  transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);  
}

.frame-master#index-4 #text-middle #big{
  font-size : 42px;
  font-family : roboto slab;
  position : relative;
}

.frame-master#index-4 #text-middle:before{
  width : 120px;
  height : 8px;
  position : absolute;
  content : '';
  left : 40px;
  bottom : -4px;
  background : #6dc5f2;
}

.frame-master#index-4 #text-middle #big b{
  font-weight : 400;
}

.frame-master#index-4 #text-middle #small{
  padding-top : 40px;
  padding-left : 20%;
  font-weight : 500;
  font-family : montserrat;
  line-height : 170%;
}

.frame-master#index-4 #text-middle #small .read-more{
  margin-top : 10px;
  float : right;
  margin-right : -60px;
}

.frame-master#index-4 #client {
  position : relative;
  width : 600px;
  margin-top : 20px;
  padding-left : 60px;
  float : right;
}

.frame-master#index-4 #client #box{
  width : 150px;
  height : 150px;
  margin-right : 40px;
  margin-bottom : 20px;
  text-align : center;
  float : left;
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  transition : all 2s ease-in-out;
}

.frame-master#index-4 #client #box:hover{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  transition : all .2s ease-in-out;
}

.frame-master#index-4 #client #box:hover img{
  opacity : 1;
}


.frame-master#index-4 #client #box img{
  width : 100%;
  opacity : 1;
}


/* ----------------- index 5  ------------------*/


.frame-master#index-5 {
  width : 100%;
  padding : 0;
  min-height : 350px;
  padding-bottom : 100px;
  background : url(images/bg2.jpg);
  background-attachment : fixed;
  background-size : cover;
  position : relative;
}

.frame-master#index-5:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  z-index: 0;
  background: rgba(21,69,109,0.5);
}

.frame-master#index-5 > .frame-inner {
  z-index : 1;
}

.frame-master#index-5 #title:hover #big {
  transform : translate(20px, 0px);
  transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);  
}

.frame-master#index-5 #title:hover #small {
  transform : translate(20px, 0px);
  transition-delay: .4s;
  transition: all 400ms ease-in-out;  
}

.frame-master#index-5 #box-block{
  width : 140px;
  height : 330px;
  background : #6dc5f2;
  position : relative;
  float : left;
  margin-top : -70px;
}

.frame-master#index-5 #title{
  margin-top : 100px;
  margin-left : 40px;
  width : 80%;
  position : relative;
  float : left;
  color : #fff;
}

.frame-master#index-5 #title #big{
  font-family : montserrat;
  font-weight : 700;
  font-size : 85px;
  transition : all .4s ease-in-out;
}

.frame-master#index-5 #title #small{
  font-family : roboto slab;
  font-weight : 400;
  font-size : 20px;
  padding-left : 20px;
  transition : all .4s ease-in-out;
}

.frame-master#index-5 .read-more{
  float : right;
  margin-right : 50px;
}

/* ----------------- FOOTER  ------------------*/


.footer-frame {
  position : relative;
  width : 100%;
  background : #254252;
}

.footer-frame .frame-inner{
  width : 85%;
  margin : 0 auto;
  position : relative;
  padding : 45px 0;
}

.footer-frame #left{
  text-align : left;
  float : left;
  width : 500px;
  font-size : 14px;
  color : #fff;
  font-family : brandon medium;
  text-transform : uppercase;
  letter-spacing : 2px;
  font-weight : 400;
  margin-top : 30px;
}

.footer-frame #left span{
  font-family : montserrat;
  font-size : 12px;
  letter-spacing : 0;
  text-transform : none;
}

.footer-frame #right{
  float : right;
  text-align : right;
  width : 300px;
  position :relative;
}

.footer-frame #right img{
  width : 90px;
  padding : 12px;
  border-radius : 4px;
  background : #fff;
  box-shadow : 0 5px 20px rgba(22,22,22,0.2);
}

/* 
  ================== ************JOS************* ===================
  ======================== A B O U T - U S ==========================
  ================== ************JOS************* ===================
*/



.submenu-background-master#about-us{
  background-image : url(images/bg3.jpg);
}

.submenu-background-master #text-content-frame{
  width : 500px;
  position : absolute;
  left : calc(50% - 250px);
  bottom : 20%;
  text-align : center;
  z-index : 2;
  text-shadow : 1px 1px 2px rgba(22,22,22,0.1);
}

.submenu-background-master #text-content-frame #text-big{
  color : #fff;
  font-family : montserrat;
  font-weight : 700;
  font-size : 68px;
  letter-spacing : -1px;
}

.submenu-background-master #text-content-frame #text-small{
  margin-top : 0px;
  color : #8addff;
  font-family : roboto slab;
  text-transform : capitalize;
  font-weight : 400;
  font-size : 18px;
}

.frame-master#about-1 {
  width : 100%;
  position : relative;
  padding-bottom : 120px;
}

.frame-master#about-1 > #box-content2 {
  position : absolute;
  right : 0px;
  top : 100px;
  width : 200px;
  height : 180px;
  background : #6cc5f2;
}

.frame-master#about-1 #content1{
  margin-top : 0px;
  width : 100%;
  position : relative;
  z-index : 1;
}

.frame-master#about-1 #content1 #left{
  width : 350px;
  float : left;
  position : relative;
  color : #2a3b4e;
  z-index : 2;
  padding-top : 210px;
  text-align : right;
}

.frame-master#about-1 #content1 #left #big-number:after{
  width : 120%;
  height : 70px;
  content : '';
  position : absolute;
  z-index : -1;
  border : 2px dashed #6cc5f2;
  bottom : -10px;
  right : -30%;
}

.frame-master#about-1 #content1 #left #small{
  font-size : 25px;
  font-family : roboto slab;
  font-weight : normal;
}

.frame-master#about-1 #content1 #left #big-number{
  font-size : 120px;
  font-family : montserrat;
  font-weight : 700;
  line-height : 110%;
  position : relative;
  display : inline-block;
}

.frame-master#about-1 #content1 #right{
  width : calc(100% - 400px);
  padding-left : 50px;
  position : relative;
  margin-left : 0px;
  float : left;
}

.frame-master#about-1 #content1 #right #image{
  width : 90%;
  height : 350px;
  margin-top : 0px;
  margin-bottom : 70px;
  z-index : 1;
  background : url(images/index-frame1-content2.jpg);
  background-size : cover;
  box-shadow  : 0 20px 40px rgba(0,0,0,0);
}

.frame-master#about-1 #content1 #right #text{
  width : 70%;
  padding-bottom : 20px;
  font-weight : 300;
  line-height : 180%;
}

.frame-master#about-1 #content2{
  margin-top : 100px;
  width : 100%;
  position : relative;
  z-index : 1;
}

.frame-master#about-1 #content2 #left{
  width : 350px;
  height : 600px;
  float : left;
  position : relative;
}

.frame-master#about-1 #content2 #left #image {
  width : 120%;
  position : absolute;
  top : -100px;
  height : 700px;
  background : linear-gradient(90deg, #e2f5ff 40%, transparent 100%);
  background-position : center;
  box-shadow  : 0 20px 40px rgba(0,0,0,0);
  background-size : cover;
}

.frame-master#about-1 #content2 #right{
  width : calc(100% - 300px);
  padding-left : 50px;
  position : relative;
  margin-left : -150px;
  float : left;
  padding-top : 100px;
}

.frame-master#about-1 #content2 #right #text-big{
  font-family : montserrat;
  font-weight : 700;
  line-height : 120%;
  font-size : 75px;
  color : #2a3b4e;
}

.frame-master#about-1 #content2 #right #content-frame{
  width : 80%;
  position : relative;
  float : right;
  margin-top : 50px;
  font-family : Roboto Slab;
  line-height : 160%;
  font-weight : 300;
  font-size : 22px;
  color : #6c7780;
}
.frame-master#about-1 #content2 #right #content-frame b{
  color : #68bfea;
  font-weight : 500;
}


.frame-master#about-2 {
  width : 100%;
  position : relative;
}

.frame-master#about-2 > #image-background {
  width : 85%;
  height : 400px;
  position : absolute;
  left : -25px;
  top : 0;
  background-image : url(images/about-frame2-content1.jpg);
  background-size : cover;
  background-position : center;
  z-index : 1;
}

.frame-master#about-2 #content1:after {
  content : '';
  position : absolute;
  height : 700px;
  width : 300px;
  right : -50px;
  top : -100px;
  background : linear-gradient(90deg, #e2f5ff 40%, transparent 100%);

}

.frame-master#about-2 #content1{
  position : relative;
  padding-top : 500px;
  padding-left : 70px;
}

.frame-master#about-2 #content1 #text-big{
  font-size: 52px;
  font-weight : 300;
  width : 700px;
  font-family: roboto slab;
}

.frame-master#about-2 #content1 #text-big b{
  font-weight : 400;
  display : inline-block;
  padding-bottom : px;
}

.frame-master#about-2 #content1 #text-medium{
  line-height : 170%;
  margin-top : 40px;
  width : 800px;
}

.frame-master#about-2 #content2 {
  margin-top : 100px;
  margin-bottom : 120px;
  width : 100%;
  position : relative;
}

.frame-master#about-2 .about-list-box .box:first-child {
  margin-left : 0;
}

.about-list-box .box{
  width : 280px;
  height : 320px;
  position : relative;
  float : left;
  margin-bottom : 70px;
  margin-left : 70px;
  transition : all .4s ease-in-out;
}

.about-list-box .box:first-child,
.about-list-box .box:nth-child(4){
  margin-left : 0;
}

.frame-master#about-2 #content2.about-list-box .box .overflow#one{
  background-image : url(images/about-frame2-box1.jpg);
}
.frame-master#about-2 #content2.about-list-box .box .overflow#two{
  background-image : url(images/about-frame2-box2.jpg);
}
.frame-master#about-2 #content2.about-list-box .box .overflow#three{
  background-image : url(images/about-frame2-box3.jpg);
}


.about-list-box .box:hover{
  transform : translate(0,-20px);
  box-shadow : 0 20px 50px rgba(23,61,100,0.6);
  transition : all .2s ease-in-out;
}
.about-list-box .box:hover .overflow{
  background-size : 120%;
  transition : all 10s linear;
}
.about-list-box .box:hover #slide-frame{
  margin-top : -320px;
  transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
}
.about-list-box .box:hover #title-out{
  transform : rotate(-90deg) translate(40%, -460%);
  opacity : 1;
  transition: all 700ms cubic-bezier(0.86, 0, 0.07, 1);
}
.about-list-box .box:hover #slide-frame .half#bottom {
  background : rgba(20,62,97,0.8);
  transition : all .7s ease-in-out;
}
.about-list-box .box:hover #slide-frame .half#top #title{
  opacity : 0;
  transition : all 0.6s ease-in-out;
}

.about-list-box .box #title-out{
  width : 280px;
  height : 36px;
  transform : rotate(-90deg) translate(50%, -300%);
  position : absolute;
  bottom : 20px;
  font-family : brandon bold;
  text-transform : uppercase;
  font-size : 25px;
  color : #6cc5f2;
  letter-spacing : 2px;
  opacity : 1;
  z-index : 1;
  transition: all .2s ease-in-out;  
}

.about-list-box .box #title-out.small{
  font-size : 18px;
  height : 34px;
}

.about-list-box .box .overflow{
  width : 280px;
  height : 320px;
  position : absolute;
  overflow : hidden;
  background-size : 100%;
  background-position : center;
  z-index : 2;
  transition : all 1s ease-in-out;
}

.about-list-box .box #slide-frame{
  width : 100%;
  position : relative;
  z-index : 2;
  transition: all .6s ease-in-out;  
}

.about-list-box .box #slide-frame .half{
  width : 100%;
  height : 320px;
  position : relative;
  float : left;
}

.about-list-box .box #slide-frame .half#top #title{
  position : absolute;
  bottom : 25px;
  right : 30px;
  font-weight : 700;
  font-family : montserrat;
  color : #fff;
  text-shadow : 2px 2px 3px rgba(22,22,22,0.32);
  font-size : 30px;
}
.about-list-box .box #slide-frame .half#top #title.small{
  font-size : 28px;
  text-align : right;
}

.about-list-box .box #slide-frame .half#bottom {
  background : rgba(21,69,109,0);
  transition : all .4s ease-in-out;
}

.about-list-box .box #slide-frame .half#bottom ul{
  width : calc(100% - 70px);
  padding : 25px;
  padding-left : 40px;
  margin : 0;
}

.about-list-box .box #slide-frame .half#bottom ul li{
  padding-bottom : 20px;
  font-family : roboto slab;
  color : #fff;
  font-weight : 400;
}




/* 
  ================== ************JOS************* ===================
  ======================= O U R  -  T E A M =========================
  ================== ************JOS************* ===================
*/




.submenu-background-master#team{
  background-image : url(images/bg-team.jpg);
}

.frame-master#team-1 {
  width : 100%;
  position : relative;
  padding-bottom : 80px;
}

.frame-master#team-1 #fade-bg{
  width : 350px;
  height : 550px;
  position : absolute;
  right :25%;
  top : 0px;
  background : linear-gradient(-90deg, #e2f5ff 40%, transparent 100%);
}

.frame-master#team-1 #photo-bg{
  width : 25%;
  height : 650px;
  position : absolute;
  right : 0;
  top : 550px;
  background-image : url(images/team-frame1-bg.jpg);
  background-size : cover;
  background-position : left;
  background-attachment : fixed;
}

.frame-master#team-1 #content1{
  width : 100%;
  position : relative;
  padding-top : 160px;
  margin-bottom : 200px;
}

.frame-master#team-1 #content1 #text-big{
  width : 80%;
  font-family : montserrat;
  font-size : 55px;
  font-weight : 700;
  color : #2a3b4e;
  letter-spacing : -.5px;
}

.frame-master#team-1 #content1 #text-medium{
  margin-top : 50px;
  width : 800px;
  font-size : 16px;
  font-family : roboto slab;
  line-height : 170%;
  font-weight : 300;
}

.frame-master#team-1 #content2 {
  margin-top : 100px;
  width : 80%;
  position : relative;
}

.frame-master#team-1 #content2 #title{
  font-family : roboto slab;
  font-size : 50px;
  color : #2a3b4e;
  padding : 10px 0;
  padding-bottom : 20px;
}

.frame-master#team-1 #content2 #title:after{
  width : 60px;
  height : 60px;
  position : absolute;
  right : -4%;
  background : #6cc5f2;
  content : '';
}

.frame-master#team-1 #content2 #title b{
  font-weight : 600;
}

.frame-master#team-1 #content2 > ul{
  font-size : 18px;
  width : 400px;
  float : left;
  position : relative;
}

.frame-master#team-1 #content2 > ul > li{
  padding : 4px 0;
  font-family : roboto slab;
}

.frame-master#team-2 {
  width : 100%;
  padding : 0;
  min-height : 300px;
  padding-bottom : 100px;
  background-image : url(images/team-frame1-bg.jpg);
  background-size : cover;
  background-position : left;
  background-attachment : fixed;
  position : relative;
}

.frame-master#team-3 {
  margin-top : -70px;
  margin-bottom : 150px;
}

.frame-master#team-3 #number-team{
  position : relative;
}

.frame-master#team-3 #number-team #inner-padding{
  padding : 0 25px;
}

.frame-master#team-3 #number-team #header{
  width : 80%;
  margin : 0 auto;
  text-align : center;
  padding : 35px 0;
  font-size : 36px;
  background : rgba(38,113,150,1);
  font-family : roboto slab;
  box-shadow : 0 20px 40px rgba(0,99,146,0.3);
  color : #fff;
}

.frame-master#team-3 #number-team #content{
  margin-top : 70px;
  min-height : 300px;
}

.frame-master#team-3 #number-team #content #sub-title{
  padding : 30px 0;
  font-size : 20px;
  width : 100%;
  text-align : center;
  font-family : montserrat;
  font-weight : 600;
  letter-spacing : -.5px;
  color : #2a3b4e;
}

.frame-master#team-3 #number-team #content #box-master{
  position : relative;
  margin-top : 50px;
}

.frame-master#team-3 #number-team #content #box-master.formal{
  position : relative;
  margin-top : 50px;
  width : 630px;
  margin : 0 auto;
}
.frame-master#team-3 #number-team #content #box-master.non-formal{
  position : relative;
  width : 840px;
  margin : 0 auto;
}

.frame-master#team-3 #number-team #content #box-master #box{
  width : 170px;
  float : left;
  margin : 20px;
  text-align : center;
  position : relative;
}

.frame-master#team-3 #number-team #content #box-master #box #circle{
  width : 140px;
  height : 140px;
  margin-left : 15px;
  border-radius : 50%;
  border : 3px dashed #bedef1;
  vertical-align : middle;
  display : table-cell;
  transition: all .4s ease-in-out;  
}
.frame-master#team-3 #number-team #content #box-master #box #circle:hover{
  transform : translate(0, -10px);
  background : #68bfea;
  border : 3px dashed #68bfea;
  box-shadow : 0px 0px 0px 10px #d4edf9;
  transition: all .2s ease-in-out; 
}
.frame-master#team-3 #number-team #content #box-master #box #circle:hover #middle{
  color : #fff;
  font-weight : 400;
}

.frame-master#team-3 #number-team #content #box-master #box #circle #middle{
  text-align : center;
  width : 100%;
  display : table;
  font-size : 30px;
  font-family : roboto slab;
  color : #2a3b4e;
}

.frame-master#team-3 #number-team #content #box-master #box #circle #middle i{
  padding-right : 5px;
}

.frame-master#team-3 #number-team #content #box-master #box #title {
  width : 100%;
  padding-top : 20px;
  font-family : roboto slab;
  font-size : 19px;
}




/* 
  ================== ************JOS************* ===================
  ====================== M A N A G E M E N T ========================
  ================== ************JOS************* ===================
*/



.submenu-background-master#management{
  background-image : url(images/bg-management.jpg);
  background-position : 0px -120px;
}

.submenu-background-master#management #text-content-frame{
  left : calc(50% - 450px);
  width : 900px;

}

.submenu-background-master#management #text-content-frame #text-big{
  font-size : 55px;
}

.frame-master#management-1 {
  width : 100%;
  position : relative;
  padding : 80px 0%;
  padding-top : 100px;
  padding-bottom : 120px;
}

.frame-master#management-1 #content-1{
  border-top : 1px solid #aaa;
  position : relative;
  padding-top : 60px;
  width : 62%;
  margin-left : 5%;
  float : left;
  line-height : 160%;
  z-index : 2;
}

.frame-master#management-1 #content-1 div{
  font-family: roboto slab;
  font-size: 35px;
  color: #2a3b4e;
  line-height: 140%;
  padding-bottom : 30px;
}

.frame-master#management-1 #content-1 p{
  padding : 5px 0;
}

.frame-master#management-1 #content-2{
  position : relative;
  float : left;
  width : 30%;
}

.frame-master#management-1 #management-image-bg{
  position : absolute;
  bottom : 0px;
  right : 0;
  width : 750px;
  height : 670px;
  background-position : center;
  background-image : url(images/management-frame1-pict1.jpg);
  background-size : cover;
  z-index : 1;
}

.frame-master#management-2 {
  width : 80%;
  position : relative;
  padding : 80px 10%;
}

.frame-master#management-2 #content-1{
  width : 100%;
  position : relative;
  padding : 40px 0;
}

.frame-master#management-2 #content-1 #left{
  width : calc(100% - 400px);
  float : left;
  position : relative;
}

.frame-master#management-2 #content-1 #left #title-frame{
  padding : 10px 0;
  margin-top : 20px;
}

.frame-master#management-2 #content-1 #left #title-frame #name{
  font-family : roboto slab;
  font-size : 45px;
  color : #2a3b4e;
  line-height : 140%;
}

.frame-master#management-2 #content-1 #left #title-frame #position{
  font-size : 20px;
  font-weight : 500;
  color : #68bfea;
  line-height : 120%;
  padding-left : 30px;
  position : relative;
}

.frame-master#management-2 #content-1 #left #title-frame #position:after{
  position : absolute;
  left : 0px;
  top : 4px;
  width : 15px;
  height : 15px;
  background : #68bfea;
  content : '';
}

.frame-master#management-2 #content-1 #left #box-desc{
  width : 600px;
  margin-top : 20px;
  line-height : 160%;
  text-align : justify;
}

.frame-master#management-2 #content-1 #right {
  position : relative;
  float : left;
  width : 340px;
  margin-right : 50px;
}

.frame-master#management-2 #content-1 #right #image img{
  width : 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-radius : 4px;
}




/* 
  ================== ************JOS************* ===================
  ========================== C L I E N T ============================
  ================== ************JOS************* ===================
*/


.submenu-background-master#client{
  background-image : url(images/bg-client.jpg);
}

.frame-master#client-1 {
  padding : 80px 0%;
  margin-top : 20px;
}

.frame-master#client-1 #content-1{
  margin-top : 20px;
  width : 800px;
  margin : 0 auto;
  font-family: roboto slab;
  color: #2a3b4e;
  font-size: 24px;
  line-height : 160%;
  text-align : center;
}

.frame-master#client-2 {
  margin-top : 20px;
  margin-bottom : 80px;
}

.frame-master#client-2 #client {
  position : relative;
  width : 920px;
  margin : 0 auto;
}

.frame-master#client-2 #client #box{
  width : 200px;
  height : 200px;
  margin : 0 15px;
  margin-bottom : 20px;
  box-shadow : 0 0 0 1px #6cc5f2;
  border-radius : 6px;
  border-top-left-radius : 40px;
  border-bottom-right-radius : 40px;
  text-align : center;
  float : left;
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  transition : all .4s ease-in-out;
}

.frame-master#client-2 #client #box:hover{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  box-shadow : 0 0 0 2px #6cc5f2;
  transition : all .2s ease-in-out;
}

.frame-master#client-2 #client #box:hover img{
  opacity : 1;
}


.frame-master#client-2 #client #box img{
  text-align : center;
  margin-top : 40px;
  width : 80%;
  opacity : 1;
}




/* 
  ================== ************JOS************* ===================
  ========================= P R O D U C T ===========================
  ================== ************JOS************* ===================
*/



.submenu-background-master#product{
  background-image : url(images/bg-product-index.jpg);
}

.submenu-background-master#product #text-big{
  font-size : 65px;
}

.frame-master#product-index1 #fade-bg{
  width : 380px;
  height : 800px;
  position : absolute;
  right :15%;
  top : 0px;
  background : linear-gradient(-90deg, #e2f5ff 40%, transparent 100%);
}

.frame-master#product-index1 #content1{
  padding-left : 60px;
  position : relative;
  padding-top : 150px;
  color : #2a3b4e;;
}

.frame-master#product-index1 #content1 #text-big{
  width : 80%;
  font-family : montserrat;
  font-size : 55px;
  font-weight : 400;
  color : #2a3b4e;
  letter-spacing : -.5px;
}

.frame-master#product-index1 #content1 #text-medium{
  margin-top : 50px;
  width : 700px;
  font-size : 17px;
  font-weight : 400;
  line-height : 170%;
  font-weight : 300;
}

.frame-master#product-index1 #box-master{
  width : 100%;
  position : relative;
  margin-top : 50px;
  padding-bottom : 100px;
}

.frame-master#product-index1 #box-master .box{
  width : 240px;
  height : 288px;
  background : #ddd;
  margin : 20px;
  position : relative;
  overflow : hidden;
  float : left;
  border-radius : 6px;
  box-shadow : 0 10px 20px rgba(22,22,22,0.1);
  cursor : pointer;
  transition : all .4s ease-in-out;
  background : #4798c8;
}

.frame-master#product-index1 #box-master .box:hover{
  transform : translate(0, -10px);
  box-shadow: 0 10px 40px rgba(35,53,76,0.7);
  transition : all .2s ease-in-out;
}

.frame-master#product-index1 #box-master .box #image{
  z-index : 1;
  position : relative;
  width : 100%;
  height : 100%;
}

.frame-master#product-index1 #box-master .box #image img{
  width : 100%;
  transition : all .2s ease-in-out;
}


.frame-master#product-index1 #box-master .box #image #read-more{
  position : absolute;
  top : 45%;
  width : 100%;
  text-align : center;
  font-family : Montserrat;
  font-size : 19px;
  color : #fff;
  font-weight : 500;
  margin-left : -30px;
  opacity : 0;
  transition : all .2s ease-in-out;
}

.frame-master#product-index1 #box-master .box:hover #image img{
  opacity : 0.2;
  transition : all .3s ease-in-out;
}

.frame-master#product-index1 #box-master .box:hover #image #read-more{
  opacity : 1;
  margin-left : 0;
  transition : all .3s ease-in-out;
}

.frame-master#product-index1 #box-master .box:hover #title{
  transform : translate(0, 100%);
  opacity : 0.2;
  transition : all .2s ease-in-out;
}

.frame-master#product-index1 #box-master .box #title{
  position : absolute;
  bottom : 0;
  left : 0;
  width : calc(100% - 40px);
  padding : 20px;
  padding-top : 20px;
  font-family : montserrat;
  font-weight : 500;
  font-size : 22px;
  color : #fff;
  z-index : 2;
  background: linear-gradient(0deg, rgba(25,38,49,0.6) 40%, transparent 100%);
  transition : all .3s ease-in-out;
}



/* 
  ================== ************JOS************* ===================
  ===================== S U B - P R O D U C T =======================
  ================== ************JOS************* ===================
*/



.submenu-background-master#product-sub{
  background-image : url(images/bg1.jpg);
  background-position : center;
}


.submenu-background-master.aviation#product-sub {
  background-image : url(images/p-bg-aviation.jpg);
}
.submenu-background-master.electronic#product-sub {
  background-image : url(images/p-bg-electronic.jpg);
}
.submenu-background-master.engineering#product-sub {
  background-image : url(images/p-bg-engineering.jpg);
}
.submenu-background-master.kebakaran#product-sub {
  background-image : url(images/p-bg-kebakaran.jpg);
}
.submenu-background-master.kendaraan#product-sub {
  background-image : url(images/p-bg-kendaraan.jpg);
}
.submenu-background-master.kerusakan#product-sub {
  background-image : url(images/p-bg-kerusakan.jpg);
}
.submenu-background-master.kesehatan#product-sub {
  background-image : url(images/p-bg-kesehatan.jpg);
}
.submenu-background-master.liability#product-sub {
  background-image : url(images/p-bg-liability.jpg);
}
.submenu-background-master.lost#product-sub {
  background-image : url(images/p-bg-lost.jpg);
}
.submenu-background-master.money#product-sub {
  background-image : url(images/p-bg-money.jpg);
}
.submenu-background-master.peralatan-berat#product-sub {
  background-image : url(images/p-bg-peralatan-berat.jpg);
}
.submenu-background-master.rangka#product-sub {
  background-image : url(images/p-bg-rangka.jpg);
}


.submenu-background-master#product-sub #text-big{
  font-size : 48px;
}

.submenu-background-master#product-sub #text-content-frame{
  width : 700px;
  left : calc(50% - 350px);
}

.frame-master#product-sub {
  padding : 80px 0;
}

.frame-master#product-sub .left-menu-master{
  width: 280px;
  position: relative;
  float : left;
  background: #fff;
  padding-bottom : 0px;
  background: #335a71;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.frame-master#product-sub .left-menu-master #header{
  margin : 40px 0 20px -5px;
  padding : 10px 0;
  padding-left : 18px;
  font-family : roboto slab;
  font-weight : 300;
  border-left : 10px solid #6cc5f2;
  font-size : 32px;
}

.frame-master#product-sub .left-menu-master #body{
  padding : 20px;
  padding-top : 10px;
  background : #4e8cab;
}

.frame-master#product-sub .left-menu-master #body ul{
  margin : 0;
  padding : 0;
}

.frame-master#product-sub .left-menu-master #body ul li{
  list-style : none;
  padding : 4px 0;
  transition : all .32s linear;
}

.frame-master#product-sub .left-menu-master #body ul li:hover{
  margin-left : 8px;
  font-weight : 400;
  transition : all .15s linear;
}

.frame-master#product-sub .left-menu-master #body ul li i{
  margin-right : 8px;
}

.frame-master#product-sub .right-frame {
  width: calc(100% - 350px);
  padding-left: 50px;
  padding-top : 20px;
  position: relative;
  float: right;
}


.frame-master#product-sub .right-frame .title{
  position : relative;
  width : 100%;
  border-bottom : 2px solid #6cc5f2;
  padding-bottom : 10px;
  font-family : montserrat;
  font-weight : 300;
  letter-spacing : -.5px;
  color : #2a3b4e;
  font-size : 32px;
}

.frame-master#product-sub .right-frame .title i{
  position : absolute;
  right : 0px;
  bottom : -12px;
  font-size : 24px;
  background : #fff;
  color : #6cc5f2;
}

.frame-master#product-sub .right-frame .content{
  padding-top : 30px;
  padding-bottom : 60px;
  line-height : 160%;
}

.frame-master#product-sub .right-frame .content ul{
  margin : 0;
  padding : 0;
  margin-left : 25px;
}

.frame-master#product-sub .right-frame .content > ul > li {
  list-style: none;
  font-size : 15px;
  padding-bottom : 30px;
}

.frame-master#product-sub .right-frame .content > ul > li > h2{
  margin : 0;
  font-size : 20px;
  margin-left : -25px;
  text-transform : capitalize;
}

.frame-master#product-sub .right-frame .content > ul > li > ul > li{
  list-style : upper-alpha;
}

.frame-master#product-sub .right-frame .content > ul#list-only > li{
  list-style : circle;
  padding-bottom : 10px;
  font-size : 16px;
}




/* 
  ================== ************JOS************* ===================
  ========================= S E R V I C E ===========================
  ================== ************JOS************* ===================
*/


.submenu-background-master#service{
  background-image : url(images/bg-service.jpg);
}

.submenu-background-master#service #text-big{
  font-size : 65px;
}

.frame-master#service-1 {
  width : 100%;
}

.frame-master#service-1 #fade-bg{
  width : 380px;
  height : 700px;
  position : absolute;
  right : 2%;
  top : 150px;
  background : linear-gradient(90deg, #e2f5ff 40%, transparent 100%);
}

.frame-master#service-1 {
  padding-top : 120px;
  padding-bottom : 50px;
}

.frame-master#service-1 #content-1{
  width : 750px;
  position : relative;
  margin-left : 0px;
}

.frame-master#service-1 #content-1 #big{
  font-size : 50px;
  line-height : 130%;
  font-family : montserrat;
  font-weight : 300;
  color : #2a3b4e;
  display : inline-block;
}

.frame-master#service-1 #content-1 #small{
  width : 80%;
  font-size : 18px;
  border-left : 8px solid #68bfea;
  padding-left : 20px;
  margin-top : 40px;
  font-family: Roboto Slab;
  line-height: 160%;
  font-weight: 300;
  font-size: 18px;
  color: #6c7780;
}

.frame-master#service-1 #content-2{
  width : 100%;
  margin-top : 80px;
  position : relative;
}

.frame-master#service-1 .about-list-box .box .overflow#profesional{
  background-image : url(images/service-box-profesional.jpg);
}
.frame-master#service-1 .about-list-box .box .overflow#negosiasi{
  background-image : url(images/service-box-negosiasi.jpg);
}
.frame-master#service-1 .about-list-box .box .overflow#monitoring{
  background-image : url(images/service-box-monitoring.jpg);
}
.frame-master#service-1 .about-list-box .box .overflow#klaim{
  background-image : url(images/service-box-klaim.jpg);
}
.frame-master#service-1 .about-list-box .box .overflow#inspeksi{
  background-image : url(images/service-box-inspeksi.jpg);
}

.frame-master#service-2 {
  width : 100%;
  padding-bottom : 60px;
  background: url(images/bg1.jpg);
  background-attachment: fixed;
  background-size: cover;
}

.frame-master#service-2:after {
  position : absolute;
  width : 250px;
  height : 300px;
  background : #6dc5f2;
  top : -150px;
  right : 12%;
  content : '';
  z-index : 2;
}

.frame-master#service-2:before {
  position : absolute;
  z-index : 1;
  width : 100%;
  height : 100%;
  content : '';
  left : 0;
  top : 0;
  background: rgba(21,69,109,0.7); 
}

.frame-master#service-2 #content-1{
  padding-top : 100px;
  color : #fff;
  text-shadow : 1px 1px 2px rgba(22,22,22,0.2);
  position : relative;
  z-index : 1;
}

.frame-master#service-2 #content-1 #big{
  font-size: 55px;
  line-height: 140%;
  font-family: roboto slab;
}

.frame-master#service-2 #content-1 #content{
  font-weight: 400;
  line-height: 170%;
  padding-top : 40px;
  width : 800px;
}

.frame-master#service-2 #content-2{
  padding-top : 80px;
  position : relative;
  z-index : 2;
}

.frame-master#service-2 #content-2 #box{
  width : 480px;
  position : relative;
  float : left;
  margin-bottom : 40px;
  margin-right : 60px;
}

.frame-master#service-2 #content-2 #box:nth-child(even){
  margin-right : 0px;
}

.frame-master#service-2 #content-2 #box #icon{
  position : relative;
  float : left;
  width : 95px;
  vertical-align : middle;
}

.frame-master#service-2 #content-2 #box #icon #inner{
  height : 65px;
  width : 65px;
  background : #fff;
  box-shadow : 0 0 10px rgba(22,22,22,0.3);
  line-height : 62px;
  text-align : center;
  border-radius : 50%;
}

.frame-master#service-2 #content-2 #box #icon #inner i{
  color : #6dc5f2;
  vertical-align : middle;
  font-size : 26px;
}

.frame-master#service-2 #content-2 #box #content{
  float : left;
  margin-left : 0px;
  width : calc(100% - 100px);
  display : inline-block;
  font-size : 16px;
  font-weight : 400;
  line-height : 150%;
  color : #fff;
  text-shadow : 1px 1px 2px rgba(22,22,22,0.2);
}





/* 
  ================== ************JOS************* ===================
  ========================= C O N T A C T ===========================
  ================== ************JOS************* ===================
*/


.submenu-background-master#contact{
  background-image : url(images/bg-contact.jpg);
}

.frame-master#contact-1 #fade-bg{
  width : 300px;
  height : 850px;
  position : absolute;
  right : 2%;
  top : 150px;
  background : linear-gradient(90deg, #e2f5ff 40%, transparent 100%);
}

.frame-master#contact-1 {
  padding-top : 120px;
  padding-bottom : 50px;
}

.frame-master#contact-1 #content-1{
  width : 750px;
  position : relative;
  margin-left : 0px;
}

.frame-master#contact-1 #content-1 #big,
.frame-master#contact-3 #content-1 #big{
  font-size : 50px;
  line-height : 130%;
  font-family : montserrat;
  font-weight : 300;
  color : #2a3b4e;
  display : inline-block;
}

.frame-master#contact-1 #content-1 #small,
.frame-master#contact-3 #content-1 #small{
  width : 100%;
  font-size : 18px;
  border-left : 8px solid #68bfea;
  padding-left : 20px;
  margin-top : 40px;
  font-family: Roboto Slab;
  line-height: 160%;
  font-weight: 300;
  font-size: 18px;
  color: #6c7780;
}

.frame-master#contact-1 #content-2{
  width : 100%;
  position : relative;
  margin-top : 80px;
}

.frame-master#contact-1 #content-2 #box{
  position : relative;
  float : left;
  margin-right : 20px;
  margin-bottom : 20px;
  width : 350px;
  border-radius : 12px;
  background : rgba(255,255,255,0.8);
  transition : all .4s ease-in-out;
}

.frame-master#contact-1 #content-2 #box:hover{
  background : #fff;
  box-shadow : 0px 2px 10px rgba(23,61,100,0.1);
  transition : all .2s ease-in-out;
}

.frame-master#contact-1 #content-2 #box #padding{
  padding : 20px;
}

.frame-master#contact-1 #content-2 #box #title{
  font-weight : 700;
  font-family : montserrat;
  margin-bottom : 5px;
  font-size : 18px;
  color : #2a3b4e;
  position : relative;
}

.frame-master#contact-1 #content-2 #box #title:before{
  content : '';
  position : absolute;
  width : 12px;
  height : 12px;
  border-radius : 100%;
  left : -26px;
  top : 3px;
  background : #6cc5f2;
}

.frame-master#contact-1 #content-2 #box a{
  color : #2a3b4e;
}



.frame-master#contact-2 {
  width : 100%;
  height : 450px;
  margin : 0;
  padding : 0;
  position : relative;
}

.frame-master#contact-2 #map-canvas {
  width : 100%;
  height : 100%;
  background : #ddd;
}

.frame-master#contact-2 #map-canvas h3{
  color : #2a3b4e;
  font-family : montserrat;
  font-weight : 400;
  font-size : 18px;
}


.frame-master#contact-3 #fade-bg{
  width : 300px;
  height : 400px;
  position : absolute;
  left : 0%;
  top : 0px;
  background : linear-gradient(-90deg, #e2f5ff 40%, transparent 100%);
}

.frame-master#contact-3 #content-1 {
  padding : 50px 0;
  padding-top : 80px;
  width : 62%;
  margin-left : 28%;
}

.frame-master#contact-3 #content-1 .contact-fill {
  padding : 15px 10px;
  margin-bottom : 10px;
  width : 350px;
  font-size : 14px;
  border-radius : 4px;
  border : 1px solid #6cc5f2;
  font-family : montserrat;
  font-size : 16px;
  color : #2a3b4e;
}

.frame-master#contact-3 #content-1 .contact-fill#message{
  max-width : 550px;
  max-height : 200px;
  width : 550px;
  height : 200px;
}

.frame-master#contact-3 #content-1 .contact-fill#submit-button{
  background: #47a3da;
  color: #fff;
  font-family : montserrat;
  font-weight : 500;
  font-size: 18px;
  cursor : pointer;
  width : 250px;
}

.frame-master#contact-3 #content-1 form{
  margin-top : 40px;
}




/* 
  ================== ************JOS************* ===================
  ============================ N E W S ==============================
  ================== ************JOS************* ===================
*/






.frame-master#news-index-1 {
  padding-top : 100px;
  padding-bottom : 80px;
}

.frame-master#news-index-1 .frame-left {
  width : calc(100% - 330px);
  float : left;
  position : relative;
}

.frame-master#news-index-1 .frame-right {
  width : 300px;
  position : relative;
  float : right;
}

.frame-master#news-index-1 .frame-left .news-frame {
  position : relative;
}

.frame-master#news-index-1 .frame-left .news-frame #box {
  width : 370px;
  height : 540px;
  margin : 45px 30px 25px 0;
  position : relative;
  float : left;

  background : #fff;
  box-shadow: 0 10px 35px rgba(23,61,100,0.15);
  cursor : pointer;
  transition : all .4s ease-in-out;
}

.frame-master#news-index-1 .frame-left .news-frame #box #image{
  position : relative;
  width : 100%;
  height : 240px;
  background-size : cover;
  background-position : center center;
  overflow : hidden;
}

.frame-master#news-index-1 .frame-left .news-frame #box #image img{
  
}


.frame-master#news-index-1 .frame-left .news-frame #box #padding {
  padding : 30px;
}

.frame-master#news-index-1 .frame-left .news-frame #box #content {
  padding-top : 10px;
}

.frame-master#news-index-1 .frame-left .news-frame #box #content #title{
  font-family : montserrat;
  font-weight : 700;
  font-size : 22px;
  color : #2a3b4e;
  margin-bottom : 20px;
}

.frame-master#news-index-1 .frame-left .news-frame #box #content #desc{
  line-height : 160%;
}

.frame-master#news-index-1 .frame-left .news-frame #box #date{
  display : inline-block;
  position : absolute;
  z-index : 2;
  top : -30px;
  right : 20px;
  padding : 12px 18px;
  border-radius : 6px;
  background : #448bce;
  color : #fff;
  font-family : brandon bold;
  text-align : center;
  text-transform : uppercase;
  transition: all .4s cubic-bezier(0.7,0,0.3,1);
}

.frame-master#news-index-1 .frame-left .news-frame #box #date #number{
  font-size : 37px;
  line-height : 90%;
}
.frame-master#news-index-1 .frame-left .news-frame #box #date #month{
  font-size : 17px;
  letter-spacing : 2px;
}
.frame-master#news-index-1 .frame-left .news-frame #box #date #year{
  font-size : 17px;
  letter-spacing : 1px;
  line-height : 90%;
}


.frame-master#news-index-1 .frame-right #title{
  margin-top : 40px;
  font-size : 35px;
  padding-bottom : 10px;
  border-bottom : 2px solid #eee;
  color : #2a3b4e;
  font-family : montserrat;
  font-weight : 300;
}

.frame-master#news-index-1 .frame-right #title b{
  font-weight : 700;
  color : #6cc5f2;
}


.frame-master#news-index-1 .frame-right ul{
  margin : 0;
  margin-top : 20px;
  padding : 0;
}

.frame-master#news-index-1 .frame-right ul li{
  width : 100%;
  list-style : none;
  padding-top : 10px;
  padding-bottom : 10px;
  border-bottom : 1px solid #ddd;
  cursor : pointer;
  transition : all .4s linear;
}

.frame-master#news-index-1 .frame-right ul li:hover{
  transform : translate(10px, 0);
  transition : all .2s linear;
}

.frame-master#news-index-1 .frame-right ul li #image{
  margin-top : 10px;
  width : 60px;
  height : 60px;
  position : relative;
  float : left;
  border-radius : 100%;
  overflow : hidden;
  background-size : cover;
}

.frame-master#news-index-1 .frame-right ul li #content{
  width : calc(100% - 80px);
  float : left;
  margin-left : 20px;
  line-height : 160%;
  font-size : 15px;
}

.frame-master#news-index-1 .frame-right ul li #content #date{
  margin-top : 10px;
  color : #9C9C9C;
  font-family : montserrat;
  font-weight : 700;
}

.frame-master#news-index-1 .frame-right ul li #content #date i{
  color : #6cc5f2;
  margin-right : 5px;
}


.submenu-background-master#news-detail{
  background-image : url(images/bg-contact.jpg);
  height : 300px;
}




.frame-master#news-index-1 .frame-left .news-detail-frame {
  position : relative;
  width : 90%;
}

.frame-master#news-index-1 .frame-left .news-detail-frame #title-frame {
  padding-bottom : 40px;
  font-family: montserrat;
}

.frame-master#news-index-1 .frame-left .news-detail-frame #title-frame #title{
  color: #2a3b4e;
  font-weight: 300;
  font-size : 32px;
}

.frame-master#news-index-1 .frame-left .news-detail-frame #title-frame #date{
  padding-top : 10px;
  color: #6cc5f2;
  font-weight: 700;
}

.frame-master#news-index-1 .frame-left .news-detail-frame #image{
  width : 100%;
  position : relative;
}

.frame-master#news-index-1 .frame-left .news-detail-frame #image #gallery{
  width : 100%;
}

.frame-master#news-index-1 .frame-left .news-detail-frame #content{
  padding-top : 40px;
  line-height : 160%;
}