body {
  font-family : 'Roboto', sans-serif;
  font-size:15px;
  line-height: 1.8em;
  color: #898989;
  margin: 0;
  background: #ffffff;
  position: relative;
  padding-top: 74px;
}




.help-block.with-errors {
  color: #ff5050;
  margin-top: 5px;
}

.gmap_canvas {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}

.btn-product{
  position: absolute;
  bottom :10px;
}


.gmap_canvas iframe {
  position: absolute;

  width: 100% !important;
  height: 100% !important;
}

#ourpolicies{
  background: #2196f3;
  position: relative;
  overflow: hidden;
}




#ourpolicies:before {
  content: "";
  position: absolute;
  width: 278px;
  height: 30px;
  background: white;
  left: -30px;
  top: 0;
  transform: skew(-60deg,0deg);
  z-index: 1005;
}


#ourpolicies:after {
  content: "";
  position: absolute;
  width: 278px;
  height: 30px;
  background: white;
  right: -30px;
  top: 0;
  transform: skew(60deg,0deg);
  z-index: 1005;
}

.policies{
  position: relative;
  cursor: pointer;
}

.policies a{
  color: white;
}

.policies a:hover{
  color: black;
}



#accordion .collapsed:after{
  content: "\002B"!important;
}

.policies:after{
  content: "\2212" ;
  position: absolute;
  font-size:25px;
  color:white;
  right: 2%;
  bottom: 0;
  z-index: 1005;
}



.landing-design:before{
  content: "";
  position: absolute;
  width:400px;
  height: 30px;
  background: white;
  left: -2%;
  bottom: 0;
  transform:skew(60deg,0deg);
  z-index: 1005;
}


.landing-design:after{
  content: "";
  position: absolute;
  width:400px;
  height: 30px;
  background: white;
  right: -2%;
  bottom: 0;
  transform:skew(-60deg,0deg);
  z-index: 1006;
}

#products:before{
  content: "";
  position: absolute;
  width: 400px;
  height: 30px;
  background: white;
  left: -2%;
  top: 0;
  transform: skew(-60deg,0deg);
  z-index: 1005;
}


#products:after{
  content: "";
  position: absolute;
  width: 400px;
  height: 30px;
  background: white;
right: -2%;
  top: 0;
  transform: skew(60deg,0deg);
  z-index: 1005;
}

.product-bg{
  background: #03a9f4;
}


.carousel-caption{
  top:37%;
  bottom: 37%;
}
#products{

position: relative;
overflow: hidden;
}

.timpa{
  background: #2196f3;
  color: white !important;
  border-color: blue !important;
  border-radius: 0px !important;
}

.timpa.active{
background-color:white !important;
color: black !important;
border-color: #007fff #ffffff #7b7b7b;
}



#landing{

  background: #202020;
  color: white;
  position: relative;
  overflow: hidden;
}

#visionandmission{
  border-radius: 8em 0em 0em 0em;
}


.biru{
  color:#2196f3;
}

.biru-bg{
  background-color: #2196f3;
}

.garis-batas{
  position: relative;
}

.garis{
  border: 1px solid #2196f3;
}

.garis-biru-normal{
  border: 1px solid #ffffff;
}

.garis-batas .garis:before {
  content: "";
  position: absolute;
  width: 278px;
  height: 30px;
  background: #ffffff;
  border-right: 2px solid #2196f3;
  border-top: 2px solid #2196f3;
  left: -10px;
  top: 58px;
  transform: skew(44deg,0deg);
  z-index: 1005;
}


.garis-putih{
  border: 1px solid white;
}

.carousel-item img{
  width: 100%;
  max-height: 600px;
}


.ujung {
  border-radius: 3em;
}

.nav-tabs .nav-item .nav-link {
  color : #898989;
}


/*--- navigation bar ---*/
.navbar {
  background:#8ccedd;

}
.nav-link,
.navbar-brand {
  color: #fff;
  cursor: pointer;
}

.nav-item a.active{
  border-bottom :2px solid #ffffff;

}

.navbar-nav .nav-link {
  margin-right: 1em ;
}






.navbar-collapse {
  justify-content: flex-end;
  margin-right: 20px;
  color: blue;
  opacity: 1.0 !important;
}




.section-padding{
  padding-top: 100px;
  margin-bottom: 50px;
}

.bayang{
 box-shadow: 0px 0px 18px #888888;
}

#visi:hover{
box-shadow: 0px 0px 18px #888888;
}

#misi:hover{
  box-shadow: 0px 0px 18px #888888;
  }
  


.utama {
	padding-top: 70px;
}

.header {

min-width: 100%;
padding : 80px 0px 30px;
margin-bottom: 50px;


}

.paragraf{
  font-size: 1.5em;
}

.header h2{
  font-weight: 500;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  .landing-design:after{
      display: none;
  }
  .landing-design:before{
    display: none;
  }
  .carousel-title{
    font-size: 1.0rem;
  }
  .carousel-caption{
    top:20%;
    bottom: 20%;
  }
  #products:before{
  display: none;
  }
  
  
  #products:after{
display:none;
  }


  #ourpolicies:before {
  display: none;
  }
  
  
  #ourpolicies:after {
 display: none;
  }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .landing-design:after{
    display: none;
}
.landing-design:before{
  display: none;
}
.carousel-title{
  font-size: 2.0rem;
}
#products:before{
  display: none;
  }
  
  
  #products:after{
display:none;
  }

  #ourpolicies:before {
    display: none;
    }
    
    
    #ourpolicies:after {
   display: none;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .landing-design:after{
    width:200px;
    height: 25px;
    right: -3%;
    bottom: 0;
    display: block;
}

.landing-design:before {
  width: 200px;
  height: 25px;
  left: -3%;
  bottom: 0px;
  display: block;
}
.carousel-title{
  font-size: 2.0rem;
} 


#products:before{
  width: 200px;
  height: 25px;
  left: -3%;
  top: 0;
 display:block;
}


#products:after{
  width: 200px;
  height: 25px;
  right: -3%;
  top: 0;
  display: block;
}


#ourpolicies:before {
  width: 200px;
  height: 25px;
  left: -3%;
  top: 0;
 display:block;
  }
  
  
  #ourpolicies:after {
    width: 200px;
    height: 25px;
    right: -3%;
    top: 0;
    display: block;
  }



}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .landing-design:after{
    width:300px;
    height: 27px;
    right: -3%;

}

.landing-design:before {
  width: 300px;
  height: 27px;
  left: -3%;
}

#products:before{
  width: 300px;
  height: 27px;
  left: -3%;
}


#products:after{
  width: 300px;
  height: 27px;
  right: -3%;
}


.carousel-title{
  font-size: 2.5rem;
}

#ourpolicies:before {
  width: 300px;
  height: 27px;
  left: -3%;
  }
  
  
  #ourpolicies:after {
    width: 300px;
    height: 27px;
    right: -3%;
  }



}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .landing-design:after{
    width:400px;
    height: 30px;
      right: -2%;
}

.landing-design:before {
  width:400px;
  height: 30px;
    left: -2%;
 } 

 #products:before{
  width: 400px;
  height: 30px;
  left: -2%;
}


#products:after{
  width: 400px;
  height: 30px;
  right: -2%;
}
 .carousel-title{
  font-size: 3.0rem;
}

.carousel-title-1{
  top: 27%;
  bottom: 27%;
}

#ourpolicies:before {
  width:400px;
  height: 30px;
    left: -2%;
  }
  
  
  #ourpolicies:after {
    width:400px;
    height: 30px;
      right: -2%;
  }



}