@import url('//fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,300;1,400&display=swap');
@import url('//fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,200;0,300;0,400;1,200;1,300&display=swap');
@import url('//fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


			*{
				padding:0;
				margin:0;
			}
			html {
			  scroll-behavior: smooth;
			}
			body{
				background:#000;
				color: rgba(0,0,0,1);
				font-family: 'Montserrat', sans-serif;
			}
			body.light{
				background:#FFF;
				color:#000;
				font-family: 'Montserrat', sans-serif;
			}
			body a{
				color: rgb(36, 170, 225);
				text-decoration:none;
			}
			h1, h2, h3, h4, h5, h6{
				color:#FFF;
				font-weight:300;
			}
			h1{
				font-size:2em;
			}
			a, a:hover{
				cursor:pointer;
				text-decoration:none;
				color:#FFF;
			}
			.text-info{
				color:#FFF;
			}
			#menu{
				position:fixed;
				width:100%;
				padding-left:10%;
				padding-right:10%;
				/* padding-bottom:10px; */
				margin:auto;
				background:none;
				color: rgb(36, 170, 225);
				opacity:0.9;
				height:auto;
				transition: all 700ms ease;
				z-index:99999;
			}
			
			.menu{
				float:right;
				font-weight:600;
				padding-top:20px;
				text-align:right;
			}
			.menu a{
				display: inline-block;
				margin: 0 10px;
			}
			.menu a:hover{
				color:#fbb216;
				text-decoration:none;
			}
			.menu a.active, #menu.active .menu a.active{
				color:#fbb216;
				font-size:1.1em;
				font-weight:500;
			}
			#menu.active{
				background:#24AAE1;
			}
			#menu.active .menu a{
				color:#FFF;
			}
			#menu.active .logo img{
				filter: grayscale(100%) brightness(200%);
			}
			.logo{
				float:left;
				width:20%;
				padding-top:20px;
				padding-bottom:20px;
			}
			.logo img{
				max-width:100%;
			}
			.button{
				width:100px;
				padding:10px;
				border:1px solid #FFF;
				text-align:center;
			}
			.slidejoin{
				
				color:#FFF;
			}
			.slidejoin .title {
				text-align:center;
			  font-weight:400;
			}
			.slidejoin .title .button{
				margin-top:20px;
				text-shadow: none;
			}
			.slidejoin .title h1{
				font-size:4em;
				font-weight:900;
				line-height:120%;
				color:#fbb216;
				
			}
			.videofull{
				width:100%;
				height:100vh;
			}
			iframe.yt{
				
				min-width: 100%;
				min-height: 100%;
				width: auto;
				height: auto;
				z-index: 0;
				background: url('https://www.jogjalebihbike.id/assets/images/polina.jpg') no-repeat;
				background-size: cover;
			}
			
			.facilities{
				
				color:#000;
			}
			.facilities h1{
				 font-family: 'Newsreader', serif;
				 text-align:center;
				 margin-bottom:20px;
				 margin-top:20px;
				 color:#000;
			}
			.facilities .img-fclt{
				 font-family: 'Newsreader', serif;
				max-width:1200px;
				margin:auto;
			}
			.facilities .img-fclt li{
				float:left;
				width:20%;
				text-align:center;
				list-style-type:none;
				padding:20px 0;
				font-size:1.2em;
			}
			.facilities .img-fclt li.gjl{
				margin-left:10%;
			}
			.facilities .img-fclt img{
				width:70%;
				margin-bottom:20px;
				max-width:100px;
			}
			.packages{
				color:#000;
				padding-top:100px;
				padding-bottom:0px;
				
			}
			
			.packages h1{
				 font-family: 'Newsreader', serif;
				 text-align:center;
			}
			
			.list-packages{
				max-width:1000px;
				margin:auto;
				border:1px solid #333;
				border-radius:5px;
				padding:10px;
				margin-bottom:20px;
			}
			.boxtrio{
				width:100%;
				max-width:1200px;
				margin:auto;
				display:table;
				border-spacing:30px;
			}
			.list-packages.trio{
				display:table-cell; 
				width:30.15%;
				margin:1.5%;
				border:1px solid #333;
				border-radius:5px;
				margin-bottom:20px;
				padding-bottom:50px;
				 position: relative;

			}
			
			.list-packages .name{
				border-bottom:1px solid #333;
				padding:10px;
			}
			.list-packages .name h3{
				font-size:1.5em;
			}
			.list-packages .name .price{
				text-align:right;
			}
			.list-packages .name .price h5{
				font-size:1.5em;
				color:#fbb216;
				font-weight:500;
			}
			.list-packages .text-info{
				padding:10px;
				font-size:0.9em;
				min-height:40vh;
				color:#FFF;
			}
			.list-packages .text-info ul li{
				list-style-position: outside;
				padding:5px;
				margin-left:20px;
			 }
			 .list-packages .text-info .button{
				background:#fbb216;
				color:#FFF;
				float:right;
				width:150px;
				border-radius:5px;
				bottom:0;
			 }
			 .shortc-button {
			  bottom: 0;
			  left: 0;
			  width: 100%;
			  margin:0 auto ;
			  position: absolute;
			}
			 .list-packages .button{
				background:#fbb216;
				color:#FFF;
				width:150px;
				border-radius:5px;
				bottom: 0;
				right:10px;
				margin:0 auto ;
				margin-bottom:10px;
				position: absolute;
			 }
			.warga{
				background:#ECECEF;
				color:#000;
				padding-top:50px;
			}
			.warga h1{
				 font-family: 'Newsreader', serif;
				 text-align:center;
				 margin-bottom:50px;
			}
			
			.warga .list-warga .gambar, .warga .list-warga .text-isi{
				float:left;
				width:50%;
			}
			.warga .list-warga .gambar{
				overflow:hidden;
				height:50vh;
			}
			.warga .list-warga .gambar img{
				width:100%;
			}
			.warga .list-warga .text-isi .contentnya{
				padding:50px;
				font-family: 'Montserrat', sans-serif;
				font-size:1em;
				font-weight:300;
			}
			.warga .list-warga .text-isi .contentnya h3{
				font-size:2em;
				font-weight:300;
				font-family: 'Newsreader', serif;
				margin-bottom:10px;
			}
			.warga .list-warga .text-isi .contentnya p{
				font-size:0.9em;
				line-height:150%;
			}
			.warga .list-warga .text-isi .contentnya span{
				color:#fbb216;
				font-size:0.9em;
				padding-top:20px;
			}
			.slideprogram{
				width:100%;
				height:100vh;
			}
			.slideprogram .title {
			  position: absolute;
			  color:#FFF;
			  margin-top:20vh;
			  left:60%;
			  width:40%;
			  font-family: 'Montserrat', sans-serif;
			  font-weight:300;
			 /* text-shadow: 2px 2px 4px #000000; */
			  line-height:120%;
			 
			}
			.slideprogram .title .menunya{
				margin-top:30px;
			}
			.slideprogram .title .menunya a{
				color:#fbb216;
				cursor:pointer;
			}
			.slideprogram .title .button{
				margin-top:20px;
				text-shadow:none;
			}
			.slideprogram .title h3{
				font-size:3em;
				line-height:120%;
				font-family: 'Newsreader', serif;
				color:#FFF;
			}
			.pad15{
				font-family: 'Newsreader', serif;
			}
			.pad15 img{
				width:100%;
			}
			.pad15 p{
				font-size:0.9em;
			}
			.pad15 p.lead{
				padding-top:10px;
				font-weight:400;
				font-size:1.5em;
			}
			.ecosystem{
				background:#FFF;
				color:#000;
				padding-top:50px;
				padding-bottom:50px;
			}
			.ecosystem h1{
				 font-family: 'Newsreader', serif;
				 text-align:center;
				 margin-bottom:50px;
			}
			.gallery{
				padding-top:20px;
				padding-bottom:20px;
			}
			.gallery h1{
				 font-family: 'Newsreader', serif;
				 text-align:center;
				 margin-bottom:50px;
			}
			.gallery .list-gallery{
				width:100%;
				margin:auto;
				
			}
			
			.contact{
				width:100%;
				height:100vh;
				background:#646466;
			}
			.contact .map {
				padding-top:25vh;
				float:left;
				width:40%;
				margin-left:10%;
			}
			.contact .map iframe{
				height:50vh;
			}
			.contact .title {
			padding-top:25vh;
			 float:left;
			width:40%;
			margin-right:10%;
			padding-left:5%;
			  line-height:120%;
			  color:#FFF;
			  font-weight:200;
			}
			.contact .title h3{
				font-family: 'Newsreader', serif;
				font-size:2em;
				color:#FFF;
			}
			.footer{
				position:absolute;
				right:50px;
				margin-top:-150px;
				text-align:right;
				font-size:0.8em;
				color:#FFF;
				font-weight:200;
				font-size:0.7em;
			}
			.footer img{
				max-width:170px;
			}
			.button:hover, .list-packages .text-info .button:hover{
				background:#FFF;
				border:1px solid #fbb216;
				cursor:pointer;
				color:#fbb216;
			}
			.slidejoin .title .button:hover, .slideprogram .title .button:hover{
				background:#FFF;
			}
			.modal-body{
				color:#333;
			}
		
			.detail-warga .left-50{
				width:100%;
				height:65vh;
			}
			.detail-warga .right-50{
				width:100%;
				height:35vh;
			}
			
			.detail-warga .left-50 .bgfull{
				width:100%;
				height:100%;
				background-size:cover;
				background-position:center;
			}
			.detail-warga .right-50 .isian h3{
				font-size: 2em;
				font-family: 'Newsreader', serif;
			}
			.detail-warga .right-50 .isian{
				padding:5vh;
				font-size: 0.9em;
				line-height: 150%;
				font-weight: 300;
			}
			.detail-warga .right-50 .isian .left{
				width:60%;
				float:left;
			}
			.detail-warga .right-50 .isian .right{
				width:30%;
				margin-left:10%;
				float:left;
				padding-top:20px;
			}
			.detail-warga .right-50 .isian .button{
				background:#fbb216;
				color:#FFF;
				text-transform:uppercase;
				width:150px;
				border-radius:5px;
				font-size:0.6em;
				margin-top:20px;
				margin-left:20px;
				
			}
			.events{
				width:80%;
				margin:auto;
				padding-top:10vh;
			}
			.events .title{
				text-align:center;
				 font-family: 'Newsreader', serif;
			}
			.accordion{
				font-weight:300;
			}
			.accordion .card{
				background-color: rgba(76, 76, 76, 0.8);
				border:none;
			}
			.accordion .card .card-header{
				border-left:0;
				border-right:0;  
				border-top:2px solid #FFF;
				border-bottom:none;
				
			}
			.accordion .card .btn-link:hover{
				text-decoration:none;
				color:#E47C25;
			}
			.accordion .card .card-body{
				padding-top:0;
				min-height:30vh;
				color:#FFF;
			}
			.accordion .card .btn-link{
				color:#FFF;
				font-family: 'Newsreader', serif;
				font-size:1.7em;
				font-weight:300;
			}
			
			.btn-link.focus, .btn-link:focus {
				text-decoration: none;
				border-color: transparent;
				box-shadow: none;
				
			}
			.accordion{
				margin-bottom:20px;
			}
			.card-body .col-title{
				float:left;
				width:30%;
			}
			.card-body .col-isian{
				text-align:center;
				float:left;
				width:100%;
			}
			.bagi3{
				float:left;
				width:33%;
			}
			.bagi4{
				float:left;
				width:25%;
			}
			.col-isian h3{
				font-size:0.8em;
				background:#E47C25;
				border-radius:10px;
				width:80%;
				margin:auto;
				text-align:center;
				margin-bottom:20px;
				padding:10px 3px;
			}
			.col-isian p{
				font-size:0.8em;
				width:80%;
				margin:auto;
				padding:0 3px;
				text-align:left;
			}
			.button.page{
				background:#fbb216;
				color:#FFF;
				text-transform:uppercase;
				float:right;
				width:150px;
				border-radius:5px;
				font-size:0.6em;
			}
			.grid {
			  display: grid;
			  grid-template-columns: repeat(auto-fill, minmax(12%, 1fr));
			  grid-gap: 1rem;
			}
			.grid > div {
			  background: #FFF;
			  padding: 1rem;
			  position: relative;
			  overflow:hidden;
			}
			.grid > div::before {
			  content: "";
			  display: block;
			  padding-bottom: 100%;
			}
			.grid > div img {
			  position: absolute;
			  width: 80%;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  transition-duration: 500ms;
			}
			.grid > div:hover img {
				width: 90%;
				cursor:pointer;
			}