.fp-controlArrow.fp-prev {
    left: 10px;
    border: none;
    width: 50px;
    height: 101px;
    cursor: pointer;
    font-size:3em;
    color:#FFF;
}
.fp-controlArrow.fp-next {
    right: 10px;
    text-align:right;
    border: none;
    width: 50px;
    height: 101px;
    cursor: pointer;
    font-size:3em;
    color:#FFF;
}

#slider {
	position: relative;
	overflow: hidden;
	margin: 20px auto 0 auto;
	border-radius: 4px;
  }
  
  #slider ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
  }
  
  #slider ul li {
	position: relative;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width:80%;
	height: 200px;
	background: #ccc;
	text-align: center;
	line-height: 200px;
  }
  
  a.control_prev, a.control_next {
	position: absolute;
	top: 30%;
	z-index: 999;
	display: block;
	padding: 2%;
	width: auto;
	height: auto;
	background: #2a2a2a;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 18px;
	opacity: 0.8;
	cursor: pointer;
  }
  
  a.control_prev:hover, a.control_next:hover {
	opacity: 1;
	transition: all 0.2s ease;
  }
  
  a.control_prev {
	border-radius: 0 2px 2px 0;
  }
  
  a.control_next {
	right: 0;
	border-radius: 2px 0 0 2px;
  }
  
  .slider_option {
	position: relative;
	margin: 10px auto;
	width: 160px;
	font-size: 18px;
  }
  
			.section{
				text-align:left;
				overflow: hidden;
			}
			.spaner{
				width:100%;
				height: 12vh;
			}
			#myVideo{
				position: absolute;
				right: 0;
				bottom: 0;
				top:0;
				width: 100%;
				height: 100%;
				background-size: 100% 100%;
				background-color:black; 
				background-image: none;
				background-position: center center;
				background-size: contain;
				object-fit: cover; 
				z-index:3;
			}

			
			
			#front .airly{
				position:absolute;
				bottom:50px;
				width:100%;
			}
			video::-webkit-media-controls {
			  display:none !important;
			}
			#front{
				background-image: url('imgs/header.jpg');
				background-size: cover;
				background-attachment: fixed;
				background-position: bottom;
			}
			#misibike{
				background:#FFF;
			}
			#misibike .cover{
				width:90%;
				margin:auto;
			}
			#misibike .text, #misibike .video{
				float:left;
			}
			#misibike .text{
				width:40%;
			}
			#misibike .text p{
				margin-bottom:10px;
			}
			#misibike .text h1{
				font-size:4em;
				font-weight:900;
				line-height:120%;
				color:#24AAE1;
				text-transform:uppercase;
				margin-bottom:20px;
				margin-top:10vh;
			}
			#misibike .video{
				width:55%;
				padding-left:5%;
			}
			#misibike .video iframe{
				width:100%;
				height:50vh;
			}
			#article {
				background:#FFF;
			}
			#article .contentinfo{
				float:left;
				width:50%;
				background-size: cover;
				background-position:bottom center;
				height:100vh;
			}
			#article .contentinfo .blanks{
				height:70%;
				width:100%;
			}
			#article .contentinfo .textnya{
				background:rgba(0, 0, 0, 0.7);
				color:#FFF;
				padding:20px;
				height:30%;
				overflow: hidden;
				transition: all 0.5s ease;
			}
			#article .contentinfo .textnya:hover{
				background: rgba(0, 122, 204, 0.7);
				cursor:pointer;
			}
			#article .contentinfo .textnya h1{
				font-size:1.5em;
				font-weight:900;
				line-height:120%;
				color:#FBB216;
				margin-bottom: 10px;
			}
			#detailarticle {
				background:#FFF;
				padding-top:15vh;
			}
			#detailarticle .cover{
				width:90%;
				margin:auto;
			}
			#detailarticle .text, #detailarticle .gambar{
				float:left;
				width:50%;
			}
			#detailarticle .gambar img{
				width:100%;
			}
			#detailarticle .text{
				padding-left:5%;
			}
			#detailarticle .text h1{
				color:#FBB216;
				font-size:2.5em;
				font-weight:900;
				margin-bottom:20px;
			}
			#orangbike{
				background:#FFF;
			}
			#orangbike .cover{
				width:90%;
				margin:auto;
			}
			#orangbike .text, #orangbike .count{
				float:left;
			}
			#orangbike .text{
				width:50%;
			}
			#orangbike .text p{
				margin-bottom:10px;
			}
			#orangbike .text h1{
				font-size:4em;
				font-weight:900;
				line-height:120%;
				color:#24AAE1;
				text-transform:uppercase;
				margin-bottom:20px;
			}
			#orangbike .count{
				width:50%;
				text-align:right;
			}
			#orangbike .count h5{
				font-size:2em;
				font-weight:900;
				line-height:120%;
				color:#FBB216;
			}
			#orangbike .count h4{
				font-size:5em;
				font-weight:900;
				line-height:120%;
				color:#24AAE1;
			}
			#orangbike .count .rowcount{
				margin-bottom:10px;
			}
			#orangbike .logolist{
				width:20%;
				height:20vh;
				text-align:center;
				float:left;
			}
			#orangbike .logoorang img{
				width:90%;
			}
			#logoorang{
				background-color: #FFF;
			}
			#logoorang .cover{
				width:90%;
				margin:auto;
			}
			
			#semangatbike{
				background:#FFF;
			}
			#semangatbike .cover{
				width:90%;
				margin:auto;
			}
			#semangatbike .text, #semangatbike .count{
				float:left;
			}
			#semangatbike .text{
				width:60%;
			}
			#semangatbike .text p{
				margin-bottom:10px;
			}
			#semangatbike .text h1{
				font-size:4em;
				font-weight:900;
				line-height:120%;
				color:#24AAE1;
				text-transform:uppercase;
				margin-bottom:20px;
			}
			#semangatbike .count{
				padding-top:10vh;
				width:40%;
				text-align:right;
			}
			#semangatbike .count h1{
				font-size:4em;
				font-weight:900;
				line-height:120%;
				color:#24AAE1;
				text-transform:uppercase;
				margin-bottom:20px;
			}
			#semangatbike .count h5{
				font-size:2em;
				font-weight:900;
				line-height:120%;
				color:#FBB216;
			}
			#semangatbike .count h4{
				font-size:5em;
				font-weight:900;
				line-height:120%;
				color:#24AAE1;
			}
			#semangatbike .count .rowcount{
				margin-bottom:10px;
			}
			#semangatbike .logolist{
				width:20%;
				height:20vh;
				text-align:center;
				float:left;
			}
			#semangatbike .logoorang img{
				width:90%;
			}
			
			#acarabike{
				background-image: url('https://www.jogjalebihbike.id/imgs/sky.jpg');
				background-size: cover;
				background-attachment: fixed;
			}
			
			#acarabike .cover{
				width:90%;
				margin:auto;
			}
			#acarabike .text, #acarabike .count{
				float:left;
			}
			#acarabike .text{
				width:40%;
				padding-top:15vh;
			}
			#acarabike .text p{
				margin-bottom:10px;
				color:#FFF;
			}
			#acarabike .text h1{
				font-size:4em;
				font-weight:900;
				line-height:120%;
				color:#FBB216;
				text-transform:uppercase;
				margin-bottom:20px;
			}
			#acarabike .count{
				padding-left:5%;
				width:60%;
				text-align:right;
			}
			
			.baloon{
				background-image: url('imgs/bg-garis.png');
				background-repeat: repeat-x;
				background-position-y: center;
			}
			.baloon .image img{
				width:100%;
			}
			#dukungmisi{
				background:#FFF;
			}
			#dukungmisi .cover{
				width:90%;
				margin:auto;
				padding-top:20px;
			}
			#dukungmisi .text, #dukungmisi .count{
				float:left;
			}
			#dukungmisi .text{
				width:40%;
			}
			#dukungmisi .text p{
				margin-bottom:10px;
			}
			#dukungmisi .text h1{
				font-size:4em;
				font-weight:900;
				line-height:120%;
				color:#24AAE1;
				text-transform:uppercase;
				margin-bottom:20px;
				margin-top:20px;
			}
			#dukungmisi .count{
				width:60%;
				padding-left:5%;
			}
			#partner{
				background:#FFF;
				color:#000000;
			}
			#partner h1{
				color:#000000;
			}
			#partner .cover{
				width:90%;
				margin:auto;
				text-align:center;
			}
			#partner .logopartner img{
				max-width:15%;
				max-height:15vh;
				margin:2%;
			}
			#partner .logopartner{
				padding-bottom:10vh;
			}
			#partner .footer{
				width:100%;
				padding-top:20px;
				padding-bottom: 20px;
				background:#24AAE1;
				margin:auto;
				text-align:left;
				color:#FFF;
    			bottom: 0;
				right: 0;
				padding-left:10%;
				font-size:1em;
				font-weight:400;
			}			
			/* Style the tab */
			.tab {
				overflow: hidden;
				border: none;
				background-color: #24AAE1;
			}
			
			/* Style the buttons inside the tab */
			.tab button {
				width:50%;
				background-color: #F7F7F9;
				border-top:5px solid #F7F7F9;
				float: left;
				border: none;
				outline: none;
				cursor: pointer;
				padding: 14px 16px;
				transition: 0.3s;
				font-size: 17px;
				font-weight:700;
				color:#EEE;
				text-transform: uppercase;
			}
			
			/* Change background color of buttons on hover */
			.tab button:hover {
				/* background-color: #24AAE1; */
			}
			
			/* Create an active/current tablink class */
			.tab button.active {
				background-color: #24AAE1;
				border-top:5px solid #FBB216;
				color:#FFF;
			}
			
			/* Style the tab content */
			.tabcontent {
				display: none;
				padding: 15px;
				border: none;
				border-top: none;
				background-color: #24AAE1;
			}


			
			.fp-slidesNav{
				text-align:center;
			}
			
			.btn-primary {
				color: #fff;
				background-color: #FBB216;
				border-color: #FBB216;
				text-align:right;
				right:10px;
			}
			.btn-primary:hover {
				color: #FBB216;
				background-color: #FFF;
				border-color: #FBB216;
			}
			.form-control, .form-check{
				font-size:0.7em;
			}
			.form-check{
				font-size: 0.7em;
				padding: 5px;
				vertical-align: middle;
				padding-left: 1.25rem;
			}
			.slider{
				width:70%;
				margin:auto;
			}
			.slick-prev
			{
				left: -10px;
			}
			.slick-next
			{
				right: -10px;
			}
			.video .slider{
				width:100%;
				margin:auto;
			}
			
			.video .slider .slick-prev
			{
				left: -20px;
			}
			.video .slider .slick-next
			{
				right: -20px;
			}
			.slick-prev, .slick-next {
				z-index:999;
			}
			
			.video .slider .slick-prev:before, .video .slider .slick-next:before {
				color:#000;
			}
			
			.baloon .slick-prev:before, .baloon .slick-next:before {
				color:#000;
			}
			.baloon .slick-prev
			{
				left: -30px;
			}
			.baloon .slick-next
			{
				right: -30px;
			}
			.logonyaitu{
				width:100%;
				margin:auto;
				margin-top:20px;
			}
			.logonyaitu .responsive .isinya{
				text-align:center;
				background:#24AAE1;
			}
			.responsive .slick-prev:before, .responsive .slick-next:before{
				color:#000;
			}
			label {
				font-size:0.8em;
			}
			.menu a.icon {
				 
				  display: none;
				}
			@media screen and (max-width: 900px) {
				.menu a {display: none;}
				.menu a.icon {
				  position: absolute;
				  right: 10px;
				  top: 10px;
				  font-size:1.5em;
				  display: block;
				}
				.logo{
					  float:left;
					  width:50%;
					  padding-left:5%;
				  }
			  }
			@media screen and (max-width: 900px) {
				body{
					font-size:11px;
				}
				#menu {
					position: fixed;
					width: 100%;
					padding-left:0;
					padding-right:0;
				}
				.menu.responsive .icon {
					position: absolute;
				
				}
				.menu.responsive{
				    float: none;
					width: auto;
					font-weight: 700;
					padding-top: 50px;
					padding-bottom: 20px;
					text-align: right;
				}
				.menu.responsive a, .menu.responsive a.active{
					float: none;
					display: block;
					text-align: right;
					padding-bottom:4vh;
					font-size:1.5em;
				}
				.menu a.active, #menu.active .menu a.active {
					color: #fbb216;
					font-size:1.5em;
					font-weight: 700;
				}
				.fp-controlArrow.fp-prev, .fp-controlArrow.next {
					border-color: transparent #000 transparent transparent;
				}
				.slidejoin .title {
					padding-bottom:10vh;
				}
				.slidejoin .title h1 {
					font-size: 3em;
					font-weight: 900;
					width:90%;
					margin:auto;
				}
				#misibike .cover {
					width: 90%;
				}
				#misibike .text, #misibike .video{
					float:none;
					width:100%;
					padding-left:0;
				}
				
				#misibike .text, #misibike .video{
					float:none;
					width:100%;
					padding-left:0;
				}
				#article .contentinfo{
					float:none;
					width:100%;
					height:50vh;
					background-size: cover;
					background-position:bottom center;
				}
				#article .desk{
					display:none;
				}
				#article .mob{
					display:block;
				}
				#orangbike .cover{
					width:90%;
					margin:auto;
				}
				#orangbike .count .rowcount{
					float:left;
					width:50%;
					margin-bottom:10px;
					margin-top:10px;
					text-align:left;
				}
				#orangbike .text, #orangbike .count{
					float:none;
					width:100%;
					padding-left:0;
				}
				
				#semangatbike .cover{
					width:90%;
					margin:auto;
				}
				#semangatbike .count .rowcount{
					float:left;
					width:50%;
					margin-bottom:10px;
					margin-top:10px;
					text-align:left;
				}
				#semangatbike .text, #semangatbike .count{
					float:none;
					width:100%;
					padding-left:0;
				}
				
				#acarabike .cover{
					width:90%;
					margin:auto;
				}
				#acarabike .text, #acarabike .count{
					float:none;
					width:100%;
					padding-left:0;
				}
				#acarabike .text{
					padding-top:10vh;
				}
				#acarabike .count{
					width:90%;
					margin:auto;
				}
				#dukungmisi .cover{
					width:90%;
					margin:auto;
					
				}
				#dukungmisi .text, #dukungmisi .count{
					float:none;
					width:100%;
					padding-left:0;
				}
				#dukungmisi .count{
					margin-top:20px;
				}
				#dukungmisi .text h1 {
					font-size: 2.5em;
					font-weight: 900;
					margin-bottom: 20px;
				}
				#partner .cover{
					width:90%;
					margin:auto;
					text-align:center;
				}
				#partner .logopartner img{
					max-width:20%;
					max-height:15vh;
					margin:2%;
				}
				#article .contentinfo .blanks{
					height:50%;
				}
				#article .contentinfo .textnya{
					height:50%;
				}
				#detailarticle {
					background:#FFF;
					padding-top:15vh;
				}
				#detailarticle .cover{
					width:90%;
					margin:auto;
				}
				#detailarticle .text, #detailarticle .gambar{
					float:left;
					width:100%;
					padding-left:0;
				}
				#detailarticle .text{
					padding-top:20px;
				}
				#misibike .video iframe{
					width:100%;
					height:50vw;
				}
				
				
			}