/*navigasi*/
body{
	overflow-x: hidden;
	overflow-y: auto;
}
.banner-login{
	margin-top: 15%;
}
@media screen and (min-width: 601px) {
	h1{
	  font-size: 5vh;
	}
	.icon-desc-login{
		font-size:90px;
		text-align:center;
	}
	
  }
  
  @media screen and (max-width: 600px) {
	h1{
	  font-size: 1vh;
	  
	}
	.h5{
		font-size: 1.3vh;
		
	  }

	.btn-khusus{
		width:25%;
		height:20%;
		font-size:0.5em;
	}
	.jumbo{
		font-size:2em;
		margin-top:90%;
	}

  }

  
  @media screen and (max-width: 600px) {
	.col-md-2{
		width:40%;
	  margin-left: 0%;
	  margin-top:5%;
	}
	.col-md-6-2{
		width:45%;
		margin-left:3%;
	  margin-top:5%;
	}
	.col-md-saldo{
		width:100%;
		font-size: 1em;
	}

	.col-md-3-saldo{
		text-align: center;
		width:50%;
		font-size: 1em;
	}
	.text-caption{
		font-size:1em;
	}
	.deskripsi{
		font-size:0.7em;
	}

	.icon-desc-login{
		font-size:90px;
		text-align:center;
	}

	.banner-login{
		margin-top: 0%;
	}
	h4{
		font-size:1em;
	}
	h5{
		font-size:1em;
	}
	h3{
		font-size:1.3em;
	}
	.col-md-4-2{
		width:100%;
	}
	h1{
		font-size:2em;
	}
	pt-3{
		margin-top:5%;
	}
	.img-drigen{
		margin-left:10%;
	}
	.backround-minyak{
		height:100%
	}
	.backround-spesial{
		background-attachment: relative;
		height: 100%;
		color:black;
	}
  }

  /*navbar{
	border-bottom: 3px solid #131313
}*/
.jumbo{
	font-size: 2.5em;
}
@media screen and (max-width: 600px) {
	.jumbo{
		margin-top:0%;
		font-size: 0.7em;
	}
}
.navbar-me{
	z-index: 99;
}
#nav-me-search{
	z-index: 100;
}
.navbar.navbar-me{
	border-width: 0px;
	background: transparent!important;
}
.navbar.navbar-me .nav-link{
	color: #fff!important;
}
.nav-link{
	font-size: 15px!important
}
.nav-item{
	margin: auto;
	padding: 7px;
}
.nav-item2{
	margin: auto;
	padding: 7px;
}

.nav-pills .nav-item:hover{
	background-color: rgba(0,0,0,0.3);
}
.nav-pills .nav-item.active{
	background-color: #ffffffdb;
	color: #000!important
}
.navbar.navanim{
	-webkit-animation: navanim 1s;
	-o-animation: navanim 1s;
	animation: navanim 1s;
	height: 65px;
	z-index: 99;
}
.navbar.navanim a.small img{
	width: 50%;
}


.navbar.navanim .navbar-brand.small{
	width: 50px;
}
.navbar-toggler{
	background-color: #ffffff;
}
.navbar .absolute-right{
	position: absolute;
	right: 15px
}
.navbar .fixed-right{
	position: fixed;
	right: 15px;
	top: 10px;
}


/*NAVBAR*/
.mynav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
  }
  .mynav li:not(:last-child) {
	margin-right: 20px;
  }
  .mynav a {
	display: block;
	font-size: 20px;
	color: black;
	text-decoration: none;
	padding: 7px 15px;
  }
  .target {
	position: absolute;
	border-bottom: 4px solid transparent;
	z-index: -1;
	transform: translateX(-60px);
  }
  .mynav a,
  .target {
	transition: all .35s ease-in-out;
  }

.desc-login{
	border-radius: 15px 50px;
	padding: 10px;
	
}

.desc-bulet{
	border-radius: 100%;
	background: #73AD21;
	width: 20px;
	height: 20px;
}

.capt{
	bottom: 30%;
	width: 100%;
}
/*card custom*/
.card{
	border-width: 0px
}
.card-body{
	border: 1px solid rgba(0,0,0,.125);
}
.card-header{
	background-image: url('../../assets/img/bg-judul2.png');
	color: #fff;
	background-repeat: no-repeat;
	background-size: cover;
	font-family: Tw Cen MT;
	background-color: transparent;
	font-size: 25px;
	padding: 0;
	padding-top: 10px
}


.container-fluid.main{
	position: relative;
	height: 100vh;
	padding: 0
}

/*carousel*/
.carousel-main{
	position: absolute;
	top: 0;
	width: 100%
}
.carousel-main .carousel-item{
	background-size: cover;
	height: 100vh;
}
.carousel-caption{
	bottom: 35%;
	left: 9%;
	text-align: left;
}


/*button to top*/
.to-top a{
	position: fixed;
	right: 15px;
	bottom: 4%;
	z-index: 999;
	cursor: pointer;
}



/* footer */
footer{
	cursor: default;
}


/*custom*/
.dn{
	display: none;
}
.db{
	display: block;
}
.width-100{
	width: 100%
}
.bg-blue-umb{
	color: #fff;
	background-color: #095062;
}
.font-size-65{
	text-shadow: 3px 3px 3px #404040;
	font-size: 65px
}
.text-indent-30{
	text-indent: 30px
}
.backgorund-akademik{
	background-image: url('../../assets/img/img01.JPG');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
.backgorund-pendaftaran{
	background-attachment: fixed;
	background-image: url('../../assets/img/regis.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.backgorund-tentang{
	background-attachment: fixed;
	background-image: url('../../assets/img/carousel/img-009.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.backround-custom{
	background-attachment: fixed;
	background-image: url('../img/banner8.jpg');
    opacity: 90%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.backround-paralax-minyak{
	background-attachment: fixed;
	background-image: url('../img/background-masak-2.jpg');
    opacity: 90%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.backround-aboutus{
	background-attachment: fixed;
    background-color: #404040;
	background-image: url('../img/banner-about-us.jpg');
    opacity: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.backround-aboutus2{
	background-attachment: fixed;
    background-color: #404040;
	background-image: url('../img/banner-aboutus2.jpg');
    opacity: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.backround-tetangsampah{
	background-attachment: fixed;
    background-color: #404040;
	background-image: url('../img/banner-tentang-sampah.jpg');
    opacity: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.backround-support{
	background-attachment: relative;
    background-color: #404040;
	background-image: url('../img/banner-support.png');
    opacity: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.backround-plastik{
	background-attachment: fixed;
    background-color: #242424;
	height: 20%;
	background-image: url('../img/banner-plastik-2.png');
    opacity: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.backround-kardus{
	background-attachment: fixed;
    background-color: #0e0d0d;
	height: 20%;
	background-image: url('../img/olah-kardus.jpg');
    opacity: 100%;		
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.backround-minyak{
	background-attachment: fixed;
    background-color: #0c0c0c;
	height: 100%;
	background-image: url('../img/background-masak-3.jpg');
    opacity: 100%;		
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.backround-styrofoam{
	background-attachment: fixed;
    background-color: #0c0c0c;
	height: 20%;
	background-image: url('../img/background-styrofoam-2.jpg');
    opacity: 100%;		
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	filter: brightness(100%);

}

.backround-kaleng{
	background-attachment: fixed;
    background-color: #0c0c0c;
	height: 20%;
	background-image: url('../img/backgorund-kaleng-2.jpg');
    opacity: 100%;		
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	filter: brightness(100%);

}

.backround-spesial{
	background-attachment: fixed;
    background-color: #0c0c0c;
	height: 20%;
	background-image: url('../img/sampah-spesial.jpg');
    opacity: 100%;		
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	filter: brightness(100%);

}

.backround-elektronik{
	background-attachment: fixed;
    background-color: #0c0c0c;
	height: 20%;
	background-image: url('../img/sampah-elektronik.jpg');
    opacity: 100%;		
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	filter: brightness(100%);

}

.backround-beling{
	background-attachment: fixed;
    background-color: #0c0c0c;
	height: 20%;
	background-image: url('../img/beling-background.jpg');
    opacity: 100%;		
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	filter: brightness(100%);

}

.backround-besi{
	background-attachment: fixed;
    background-color: #0c0c0c;
	height: 20%;
	background-image: url('../img/sampah-besi-background.jpg');
    opacity: 100%;		
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	filter: brightness(100%);

}

/* Responsive Jumbotron*/

@media screen and (max-width: 600px) {
	
  }



.backround-carousel{
	background-attachment: fixed;
    background-color: #404040;
    opacity: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.btn-cyan{color:#fff;background-color:#095062;border-color:#095062}.btn-cyan:hover{color:#fff;background-color:#0B88A8;border-color:#0B88A8}.btn-check:focus+.btn-cyan,.btn-cyan:focus{color:#fff;background-color:#0B88A8;border-color:#0B88A8;}
.btn-cyan-2{color:#fff;background-color:#095062;border-color:#095062}.btn-cyan:hover{color:#fff;background-color:#0B88A8;border-color:#0B88A8}.btn-check:focus+.btn-cyan,.btn-cyan:focus{color:#fff;background-color:#0B88A8;border-color:#0B88A8;}
@media screen and (max-width: 600px) {
	.btn-cyan{
		width:100%;
		margin-top:5%;
		font-size:1em;
	}
	.btn-cyan-2{
		width:50%;
		margin-top:5%;
		font-size:1em;
	}
	.btn-warning{
		width:40%;
		margin-top:5%;
		font-size:1em;
	}
}
.height-100-vh{
	height: 100vh
}
.list-none{
	list-style: none;
	padding: 0
}
.bg-me-1{
	background-color: #f5f5f5
}
.pointer{
	cursor: pointer;
}
li{
	padding-bottom: 7px
}
.fixed-position{
	position: fixed;
}
.container-fluid.main.height-auto{
	height: 100%;
}
.img-circle{
	border-radius: 50%
}
.border-right{
	border-right: 1px solid #fff
}
.me-tab .tab-field{
	cursor: pointer;
	transition: .5s;
	background-color: rgba(0,0,0,0.25);
}
.me-tab .tab-field.tab-current{
	border-top: 4px solid #ffb900
}
.text-caption{
	padding-top: 15%;
	padding-bottom: 15%;
	font-size: 50px;
}
@media screen and (max-width: 600px) {
	.text-caption{
		padding-top: 15%;
		padding-bottom: 15%;
		font-size: 1em;
	}
}
.img-header.seminar-internet{
	width: 100%;
	height: 200px;
	background-size: 100%;
	background-image: url('../img/img-003.jpg');
}
.img-header.webdesign{
	width: 100%;
	height: 200px;
	background-size: 100%;
	background-image: url('../img/img-004.jpg');
}
.img-header.workshop{
	width: 100%;
	height: 200px;
	background-size: 100%;
	background-image: url('../img/img-006.jpg');
}
.bg-transparent{
	background: transparent!important;
}



/*media queries and keyframes*/
@media (min-width: 992px){
	.navbar-expand-lg .navbar-brand.small {
	    display: none;
	}
}
@media (max-width: 992px){
	.navbar-expand-lg .navbar-brand.large {
	    display: none;
	}
}
@keyframes navanim{
	from{
		transform: translate(0px , -100px);
	}
	to{
		transform: translate(0px , 0px);
	}
}
#accordion .card{
	background-color: transparent;
}
#accordion .card .collapse{
	background-color: #ffffffdb;
}




/*animation*/

	.slideanim {
	  	animation-name: slideanim;
	  	-webkit-animation-name: slideanim;
	  	animation-duration: 1s;
	  	-webkit-animation-duration: 1s;
	  	visibility: visible;
	}
	#thumb{
		opacity: 0;
		transition: .5s;
		transform: translate(0,-40px);
	}
	#thumb.thumb-in{
		opacity: 1;
		transform: translate(0,0);
	}
	@keyframes slideanim {
		from {
		  	opacity: 0;
		  	transform: translateY(50px);
		} 
		to {
		  	opacity: 1;
		  	transform: translateY(0%);
		}
	}
	/*rotate*/
	.rt-right{
		opacity: 0;
		transition: .6s;
		transform: rotate(-30deg);
	}
	.rt-left{
		opacity: 0;
		transition: .6s;
		transform: rotate(30deg);
	}
	.rt-in{
		opacity: 1;
		transition: .6s;
		transform: rotate(0deg);
	}
	/*translate*/
	.tr-up{
		opacity: 0;
		transition: .6s;
		transform: translate(0,-40px);
	}
	.tr-down{
		opacity: 0;
		transition: .6s;
		transform: translate(0,40px);
	}
	.tr-right{
		opacity: 0;
		transition: .6s;
		transform: translate(-40px,0);
	}
	.tr-left{
		opacity: 0;
		transition: .6s;
		transform: translate(40px,0);
	}
	.tr-in{
		opacity: 1;
		transition: .6s;
		transform: translate(0,0);
	}



/*responsive navigasi*/

	@media (max-width: 992px){
		.navbar{
			height: auto;
		}
		.navbar.navanim{
			height: auto;
		}
	}

/*lightbox*/
	.lightbox{
		z-index: 9999;
		background-color: #000000a3;
		height: 100vh;
		top: 0;
		position: fixed;
		width: 100%;
		padding: 20px
	}
	.lightbox-close i.fa:hover{
		color: red
	}
	.lightbox-close {
		text-align: right;
	}
.struk{
	width: 100%;
	
}

.kegiatan {
    position: relative;
    width: 100%;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #2c3e50;
    opacity: 70%;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
  }
  .overlay2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #2c3e50;
    opacity: 70%;
    overflow: hidden;
    width: 100%;
    height: 0;
  }
  
  .kegiatan:hover .overlay {
    height: 100%;
  }
  
  .text {
    white-space: nowrap; 
    color: white;
    font-size: 20px;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  /*count*/
  .wrapper {
    position: absolute;
    width: 80vw;

    display: flex;
    justify-content: space-around;
    gap: 10px;
  }
  .containerr {
    width: 28vmin;
    height: 28vmin;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1em 0;
    position: relative;
    font-size: 16px;
    border-radius: 0.5em;
    background-color: #fff;
    border-bottom: 5px solid #0B88A8;
  }
  .iwhite {
    color: #0B88A8;
    font-size: 2.5em;
    text-align: center;
  }
  span.num {
    color: #21242b;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 3em;
  }
  span.text {
    color: #0B88A8;
    font-size: 1em;
    text-align: center;
    pad: 0.7em 0;
    font-weight: 400;
    line-height: 0;
  }
  @media screen and (max-width: 1024px) {
    .wrapper {
      width: 85vw;
    }
    .containerr {
      height: 26vmin;
      width: 26vmin;
      font-size: 12px;
    }
  }
  @media screen and (max-width: 768px) {
    .wrapper {
      width: 90vw;
      flex-wrap: wrap;
      gap: 30px;
    }
    .containerr {
      width: calc(40% - 40px);
      height: 30vmin;
      font-size: 14px;
    }
  }
  @media screen and (max-width: 480px) {
    .wrapper {
      gap: 15px;
    }
    .containerr {
      width: 100%;
      height: 25vmin;
      font-size: 8px;
    }
  }

  /*profile*/
  .card-profile {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    
    text-align: center;
  }
  
  .title {
    color: grey;
    font-size: 15px;
  }
  
  .button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #0B88A8;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
  }
  
  a {
    text-decoration: none;
    color: black;
  }
  
  .button:hover, a:hover {
    opacity: 0.7;
  }

  .f1-steps { overflow: hidden; position: relative; margin-top: 20px; }

.f1-progress { position: absolute; top: 24px; left: 0; width: 100%; height: 1px; background: #ddd; }
.f1-progress-line { position: absolute; top: 0; left: 0; height: 1px; background: #014441; }

.f1-step { position: relative; float: left; width: 25%; padding: 0 5px;  }

.f1-step-icon {
	display: inline-block; width: 40px; margin-left: 30%; height: 40px; margin-top: 4px; background: #ddd;
	font-size: 16px; color: #fff; line-height: 40px;
	-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;text-align: center;
}
.f1-step.activated .f1-step-icon {
	background: #fff; border: 1px solid #014441; color: #014441; line-height: 38px; text-align: center;
}
.f1-step.active .f1-step-icon {
	width: 48px; height: 48px; margin-top: 0; background: #014441; font-size: 22px; line-height: 48px; text-align: center;
}

.f1-step p { color: #ccc; text-align:center;}
.f1-step.activated p { color: #014441; }
.f1-step.active p { color: #014441; }

.f1 fieldset { display: none; text-align: left; }

.f1-buttons { text-align: right; }

.f1 .input-error { border-color: #f35b3f; }

.features-one{
  position:relative;
}

.features-one .column{
  position:relative;
  margin-bottom:50px; 
  
}

.features-one .column.br{
  border-right: 1px solid #ccc;
}

.left-icon-column{
  position:relative;  
}

.left-icon-column .inner-box{
  position:relative;
  padding-left:95px;
  min-height:80px;
  max-width:400px;
  margin:0 auto;
}

.left-icon-column .inner-box .icon{
  position:absolute;
  left:0px;
  top:10px;
  width:70px;
  height:70px;
  line-height:75px;
  border: 2px solid #0b7b87;
  text-align:center;

  background: #0b7b87;
  color:#ffffff;
  border-radius:50%;
  -ms-border-radius:50%;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}
.left-icon-column .inner-box .icon span:before{
  margin: 0;
  font-size:32px;

}
.left-icon-column .inner-box:hover .icon{
  background:none;
  color:#0b7b87;  
}

.left-icon-column .inner-box h3{
  font-size: 20px;
  text-transform: capitalize;
  margin-bottom:5px;
  color: #222;
}

.left-icon-column .inner-box .text{
  position:relative;
}


/** feature-style-one **/


.feature-style-one{
  position: relative;
}
.feature-style-one .title-bottom-text{
  margin-bottom: 35px;
}
.hexagon {
  left: 0px;
  top: 0px;
  height: 96px;
  width: 96px;
  background: #fff;
  transition: all 500ms ease;
}
.hexagon:before, .double:after {
  position: absolute;
  content: '';
}
.hexagon:before {
  top: 2px;  /* border width */
  left: 2px;  /* border width */
  height: calc(99% - 3px);  /* 100% - (2 * border width) */
  width: calc(99% - 3px);  /* 100% - (2 * border width) */
  background: #fe1848;
  z-index: -1;
}
.hexagon, .hexagon:before, .double:after {
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 101% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.feature-content-one{
  margin-bottom: 30px;
}
.feature-content-one .hexagon-content{
  position: relative;
  display: inline-block;
  margin: auto;
}
.feature-content-one .icon i:before{
  font-size: 36px;
  color: #fff;
  margin: 0px;
}
.feature-content-one .lower-content{
  margin-top: 20px;
}
.feature-content-one .lower-content h4 a{
  margin-bottom: 13px;
  font-size: 20px;
  font-weight: 500;
  color: #222;
}
.feature-content-one .lower-content h4 a:hover{
  color: #fe1848;
}
.feature-content-one .icon{
  position: relative;
  line-height: 96px;
  text-align:  center;
}