body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
* {
	box-sizing: border-box;
}
a {
	text-decoration: none;
}
@font-face {
	font-family: 'op-reg';
	src: url(../fonts/OpenSans-Regular.ttf);
}
@font-face {
	font-family: 'op-light';
	src: url(../fonts/OpenSans-Light.ttf);
}
@font-face {
	font-family: 'op-bold';
	src: url(../fonts/OpenSans-Bold.ttf);
}
@font-face {
	font-family: 'op-extrabold';
	src: url(../fonts/OpenSans-ExtraBold.ttf);
}
.page {
	width: 100%;
	background-color: white;
	padding: 40px;
}
.container {
	width: 80%;
	overflow: hidden;
	margin: 0 auto;
}
.container-fluid {
	width: 100%;
	margin: 0;
}
.black {
	background-color: black;
}
.grey-text {
	color: #D1D1D1;
}
.backtotop {
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 25px;
	z-index: 100;
	right: -150px;
	transition: all .5s ease;
}
.shadow {
	box-shadow: 0 0 20px rgba(0,0,0,.2);
}
.shadow:hover {
	box-shadow: 0 0 80px rgba(0,0,0,.2);
}
.shadow-card {
	box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.shadow-card:hover {
	box-shadow: 0 0 30px rgba(0,0,0,.3);
}
.shadow-nohover {
	box-shadow: 0 0 20px rgba(0,0,0,.2);
}
/*CSS GRIDS*/
.col-1 {
	width: 8.33%;
}
.col-2 {
	width: 16.66%;
}
.col-3 {
	width: 25%;
}
.col-4 {
	width: 33.33%;
}
.col-5 {
	width: 41.66%;
}
.col-6 {
	width: 50%;
}
.col-7 {
	width: 58.33%;
}
.col-8 {
	width: 66.66%;
}
.col-9 {
	width: 75%;
}
.col-10 {
	width: 83.33%;
}
.col-11 {
	width: 91.66%;
}
.col-12 {
	width: 100%;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

/*PAGES CILIK-CILIK GOES HERE*/
/* START FOOTER*/
/*FOOTER*/
#footer {
	height: auto;
	background-color: #141A21;
	color: white;
	font-family: 'op-light';
	font-size: 0.9em;
	padding: 0 40px;
	overflow: hidden;
}
#footer .row {
	position: relative;
	z-index: 5;
}
.batik-footer {
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 10;
}
#footer .batik-top-left {
	width: 190px;
	height: 190px;
	background-image: url(../img/footer-top-left.svg);
	background-repeat: no-repeat;
	background-position: top left;
}
#footer .batik-btm-left {
	position: absolute;
	left: 0;
	width: 190px;
	height: 190px;
	background-image: url(../img/footer-btm-left.svg);
	background-repeat: no-repeat;
	background-position: bottom left;
}
#footer .batik-btm-right {
	position: absolute;
	/*bottom: -405px;*/
	right: 0px;
	width: 190px;
	height: 190px;
	background-image: url(../img/footer-btm-right.svg);
	background-repeat: no-repeat;
	background-position: bottom right;
}
.footer-1 {
	height: auto;
	padding: 40px 0 0 0;
	/*background-color: rgba(0,0,0,.7);*/
}
.footer-1 .col-8, .footer-1 .col-4 {
	border: none;
}
.footer-1 img {
	width: 110px;
}
.footer-2 {
	height: auto;
	padding: 0 0 40px 0;
}
.footer-2 .col-6 {
	border: none;
	padding: 5px 15px;
}
.footer-2 select {
	transition: all 1s ease;
	font-family: 'op-reg';
	font-size: 1em;
	padding: 5px;
	margin: 13px;
	border: none;
	background-color: #141A21;
	color: white;
	/*outline: 1px solid white;*/
}
.footer-2 select:focus {
	outline: none;
}
.footer-2 select option {
	padding: 10px;
}
ul.socials {
	list-style: none;
	float: right;
	/*padding: 40px;*/
}
ul.socials li {
	display: inline-block;
	padding-left: 40px;
	font-size: 1.3em;
}
ul.socials li a {
	color: white;
	opacity: .4;
}
ul.socials li a:hover {
	color: white;
	opacity: 1;
}
.footer-3 {
	border-top: 1px solid white;
	padding: 20px 10px;
	height: auto;
}
@media (max-width: 768px){
	#footer {
		font-size: 0.7em;
	}
	.footer-1 {
		height: auto;
		padding: 20px 0 0 0;
		/*background-color: rgba(0,0,0,.7);*/
	}
	.footer-1 img {
		width: 70px;
	}
	.footer-2 {
		height: auto;
		padding: 0;
	}
	.footer-2 .col-6 {
		width: 100%;
	}
	.footer-2 p {
		font-size: 1em;
	}
	ul.socials {
		float: none;
		-webkit-padding-start: 0;
		padding-bottom: 20px;
	}
	ul.socials li {
		display: inline-block;
		padding-left: 10px;
		font-size: 1.3em;
	}
	.footer-3 {
		padding: 10px 5px;
	}
	#footer .batik-top-left {
		width: 100px;
		height: 100px;
	}
	#footer .batik-btm-left {
		width: 100px;
		height: 100px;
		bottom: -240px;
		z-index: 10;
	}
	#footer .batik-btm-right {
		width: 100px;
		height: 100px;
		bottom: -240px;
	}
}
/*END OF FOOTER*/
/* START OF GEOGRAPHY PAGES*/
#geography-header-1 {
	height: 100vh;
	background-image: url("../img/time-wib.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
}
#geography-header-2 {
	height: 100vh;
	background-image: url("../img/time-wita.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: none;
}
#geography-header-3 {
	height: 100vh;
	background-image: url("../img/time-wit.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: none;
}
#geography-header-1 svg, #geography-header-2 svg, #geography-header-3 svg {
	visibility: visible;
	width: 40px;
	position: absolute;
	bottom: 20px;
	margin: auto;
	left: 0;
	right: 0;
}
.scroll-outer {
	fill: white;
}
.scroll-inner {
	fill: white;
	animation: mouse-inner-up-down 1s infinite ease;
}
@keyframes mouse-inner-up-down {
  0%   {transform: translateY(0)}
  12.5%  {transform: translateY(-7px)}
  25%  {transform: translateY(-14px)}
  37.5%  {transform: translateY(-7px)}
  50%  {transform: translateY(0)}
  62.5%  {transform: translateY(7px)}
  75%  {transform: translateY(14px)}
  87.5%  {transform: translateY(7px)}
  100% {transform: translateY(0)}
}
.geography-option {
	background-color: black;
	position: fixed;
	padding: 25px 20px;
	left: 40px;
	bottom: 20px;
	cursor: default;
	z-index: 999;
}
.geography-option li {
	list-style: none;
	color: #999999;
	display: inline-block;
	font-family: 'op-bold';
	padding: 0 5px;
	cursor: pointer;
}
.geography-option li:hover {
	color: white;
}
#geography-topthree {
	overflow: auto;
	padding: 40px;
}
#geography-topthree .container {
	width: 70%;
}
.card-group-1 {
	display: block;
}
.card-group-2 {
	display: none;
}
.card-group-3 {
	display: none;
}
.card-group-title {
	font-family: 'op-reg';
	border-bottom: 1px solid black;
	text-align: center;
	padding: 20px;
	font-size: 1.5em;
	margin-bottom: 20px;
}
#geography-topthree .col-12, #geography-topthree .col-4 {
	border: none;
}
.geography-card {
	background-color: white;
	height: auto;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
}
.geography-card-title {
	position: relative;
	float: left;
}
.geography-detail-container {
	transition: all .5s ease;
	background-color: none;
	padding: 30px 25px;
	border-radius: 8px;
}
.geography-title, .geography-location, .geography-detail-btn {
	margin: 0;
	color: black;
	padding-bottom: 20px;
	transition: all .5s ease;
}
.geography-title {
	font-family: 'op-extrabold';
	line-height: 1.2em;
	transform: translate3d(0,40px,0);
	padding-bottom: 10px !important;
	color: white;
}
.geography-location {
	font-family: 'op-reg';

	transform: translate3d(0,140px,0);
	opacity: 0;
}
.geography-detail-btn {
	display: block;
	font-family: 'op-bold';
	background-color: green;
	color: white;
	padding: 5px;
	text-align: center;
	transform: translate3d(0,240px,0);
	opacity: 0;
	border-radius: 3px;
}
.geography-card:hover .geography-title, .geography-card:hover .geography-location {
	color: black;
	transform: translate3d(0,0,0);
	opacity: 1;
}
.geography-card:hover .geography-detail-btn {
	color: white;
	transform: translate3d(0,0,0);
	opacity: 1;
}
.geography-card:hover .geography-detail-container {
	background-color: rgba(255,255,255,.95);
}
.card-group-1 .geography-1 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/w1-borobudur.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card-group-1 .geography-2 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/w2-bromo.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card-group-1 .geography-3 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/w3-toba.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card-group-2 .geography-1 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/m1-bunaken.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card-group-2 .geography-2 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/m2-kuta.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card-group-2 .geography-3 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/m3-bedugul.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card-group-3 .geography-1 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/e1-rajaampat.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card-group-3 .geography-2 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/e2-sentani.jpeg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card-group-3 .geography-3 {
	background: linear-gradient(to right, rgba(8, 81, 120, .35), rgba(132, 217, 207, .55)), url("../img/pages/e3-seram.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
#geography-post {
	height: auto;
	padding: 20px 200px;
}
.post-west, .post-mid, .post-east {
	width: 100%;
	margin: 0 0 80px 0;
	padding-bottom: 30px;
	border-bottom: 2px solid #00CACA;
	transition: all .5s ease;
}
.post-west {
	display: block;
	visibility: visible;
	opacity: 1;
}
.post-mid {
	display: none;
	visibility: hidden;
	opacity: 0;
}
.post-east {
	display: none;
	visibility: hidden;
	opacity: 0;
}
.anim-delay-1 {
	animation-delay: .1s;
}
.anim-delay-2 {
	animation-delay: .2s;
}
.anim-delay-3 {
	animation-delay: .3s;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: .5s;
  animation-name: fade;
  animation-duration: .5s;
}
.slide {
  -webkit-animation-name: slide;
  -webkit-animation-duration: .5s;
  animation-name: slide;
  animation-duration: .5s;
}
@-webkit-keyframes slide {
	from {transform: translate3d(0,300px,0)}
	to {transform: translate3d(0,0,0)}
}
@keyframes slide {
	from {transform: translate3d(0,300px,0)}
	to {transform: translate3d(0,0,0)}
}
@-webkit-keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}
.post-west h1, .post-mid h1, .post-east h1 {
	line-height: 1.2em;
	width: 100%;
	font-size: 3.5em;
	font-family: 'op-extrabold';
	margin-bottom: 0;
}
.post-west h1 span, .post-mid h1 span, .post-east h1 span {
	background-color: #D4FAFA;
}
.post-west h3, .post-mid h3, .post-east h3 {
	width: 100%;
	font-size: 1.1em;
	font-family: 'op-bold';
	padding-bottom: 30px;
	margin-bottom: 50px;
	border-bottom: 2px solid #00CACA;
}
.post-west h4, .post-mid h4, .post-east h4 {
	text-align: left;
	width: 100%;
	font-size: 1em;
	color: black;
	font-family: 'op-reg';
}
.post-west h4 span, .post-mid h4 span, .post-east h4 span {
	background-color: #D4FAFA;
	padding: 10px 0;
	line-height: auto;
}
.post-west p, .post-mid p, .post-east p {
	text-align: left;
	width: 100%;
	font-size: 1em;
	color: black;
	font-family: 'op-reg';
	margin-top: 
}
@media (max-width: 768px){
	#geography-header-1, #geography-header-2, #geography-header-3 {
		height: 300px;
	}
	#geography-header-1 svg, #geography-header-2 svg, #geography-header-3 svg {
		visibility: hidden;
	}
	.geography-option {
		padding: 15px 10px;
		left: 10px;
		bottom: 10px;
		margin: 0;
	}
	.geography-option li {
		font-size: .9em;
		font-family: 'op-reg';
	}
	#geography-topthree {
		padding: 15px;
	}
	#geography-topthree .container {
		width: 90%;
	}
	.geography-card-container {
		width: 100%;
	}
	.geography-title, .geography-location, .geography-author, .discover-post, .discover-detail-btn, .discover-ticket-rate {
		margin: 0;
		color: black;
		padding-bottom: 5px;
		transition: all .5s ease;
	}
	.geography-title {
		font-size: 1em;
		transform: translate3d(0,30px,0);
		color: white;
	}
	.geography-location {
		font-size: 0.9em;
		transform: translate3d(0,130px,0);
	}
	.geography-detail-btn {
		font-size: 0.8em;
		transform: translate3d(0,330px,0);
	}
	#geography-post {
		height: auto;
		padding: 20px 40px;
	}
	.post-west h1, .post-mid h1, .post-east h1 {
		line-height: auto;
		font-size: 2em;
	}
	.post-west h3, .post-mid h3, .post-east h3 {
		font-size: .85em !important;
		font-family: 'op-reg' !important;
	}
	.post-west h4, .post-mid h4, .post-east h4 {
		font-size: 0.75em !important;
		line-height: auto !important;
	}
	.post-west h4 span, .post-mid h4 span, .post-east h4 span {
		padding: 0;
		line-height: 30px !important;
	}
	.post-west p, .post-mid p, .post-east p {
		font-size: 0.7em !important;
	}
}
/*END OF GEOGRAPHY PAGE*/
/*START OF DISCOVER PAGE*/
#discover-header {
	height: 90vh;
	background-image: url(../img/discover.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.balekambang {
	
}
@media (max-width: 768px){
	#discover-header {
		height: 500px;
		background-image: url(../img/discover.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}
#discover-text {
	height: auto;
	display: flex;
	justify-content: center;
	padding: 45px 0;
	/*background-color: #EDEDED;*/
}
#discover-text p {
	color: black;
	font-family: 'op-reg';
	border-bottom: 1px solid #141A21;
	text-align: center;
	display: block;
	width: 60%;
	padding: 0 60px 50px 60px;
}
@media (max-width: 768px){
	#discover-text p {
		width: 80%;
		font-size: 0.9em;
		padding: 0 60px 50px 60px;
	}	
}
#discover-page {
	overflow: auto;
	padding: 40px;
	/*background-color: yellow;*/
}
#discover-page .container {
	width: 70%;
	border-bottom: 2px solid #02B8B9;
	padding-bottom: 25px;
}
#discover-page .col-12, #discover-page .col-4 {
	border: none;
}
.filter-row {
	height: auto;
	width: 100%;
	padding: 0;
}
.filter-row ul {
	text-align: center;
	list-style: none;
}
.filter-row h3 {
	font-family: 'op-extrabold';
	font-size: 1.17em;
}
.filter-row ul li {
	display: inline-block;
	font-family: 'op-reg';
	padding: 0 10px;
}
#filter {
	transition: all 1s ease;
	font-family: 'op-reg';
	font-size: 1em;
	padding: 5px;
	margin: 13px;
	border: none;
	box-shadow: none;
	background-color: white;
}
#filter:hover {
	background-color: #f2f2f2;
}
#filter:focus {
	transition: all 1s ease;
	font-family: 'op-reg';
	font-size: 1em;
	padding: 5px;
	margin: 13px;
	border: none;
	background-color: #f2f2f2;
	outline: none;
}
.discover-card {
	background-color: white;
	height: auto;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
}
.discover-card-title {
	position: relative;
	float: left;
}
.discover-detail-container {
	transition: all .5s ease;
	background-color: none;
	padding: 30px 25px;
	border-radius: 8px;
}
.discover-title, .discover-location, .discover-author, .discover-post, .discover-detail-btn, .discover-ticket-rate {
	margin: 0;
	color: black;
	padding-bottom: 15px;
	transition: all .5s ease;
}
.discover-title {
	font-family: 'op-extrabold';
	line-height: 1.2em;
	transform: translate3d(0,140px,0);
	color: white;
}
.discover-location {
	font-family: 'op-reg';
	transform: translate3d(0,240px,0);
	opacity: 0;
}
.discover-author {
	font-family: 'op-reg';
	transform: translate3d(0,340px,0);
	opacity: 0;
}
.discover-ticket-rate {
	transform: translate3d(0,440px,0);
	opacity: 0;
}
.discover-ticket, .discover-rate {
	padding: 5px 10px;
	font-family: 'op-bold';
	border-radius: 3px;
}
.discover-ticket {
	color: black;
	background-color: yellow;
}
.discover-rate {
	color: white;
	background-color: black;
}
.discover-post {
	font-family: 'op-reg';
	font-size: 0.8em;
	padding-bottom: 20px;
	transform: translate3d(0,540px,0);
	opacity: 0;
}
.discover-detail-btn {
	display: block;
	font-family: 'op-bold';
	background-color: green;
	color: white;
	padding: 5px;
	text-align: center;
	transform: translate3d(0,640px,0);
	opacity: 0;
	border-radius: 3px;
}
.discover-card:hover .discover-title, .discover-card:hover .discover-location, .discover-card:hover .discover-author, .discover-card:hover .discover-post, .discover-card:hover .discover-ticket-rate {
	color: black;
	transform: translate3d(0,0,0);
	opacity: 1;
}
.discover-card:hover .discover-detail-btn {
	color: white;
	transform: translate3d(0,0,0);
	opacity: 1;
}
.discover-card:hover .discover-detail-container {
	background-color: rgba(255,255,255,.95);
}
.discover-1 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/balekambang.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.discover-2 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/semeru.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.discover-3 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/watulumpang.JPG");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.discover-4 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/e1-rajaampat.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.discover-5 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/m2-kuta.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.discover-6 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/geo-tengah-3.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.discover-7 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/m1-bunaken.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.discover-8 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/w2-bromo.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.discover-9 {
	background: linear-gradient(to right, rgba(8, 81, 120, .55), rgba(132, 217, 207, .55)), url("../img/pages/e2-sentani.jpeg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media (max-width: 768px){
	#discover-page {
		padding: 15px;
	}
	#discover-page .container {
		width: 90%;
	}
	.filter-row h3 {
		font-family: 'op-extrabold';
		font-size: 0.9em;
	}
	.filter-row ul {
		padding: 0;
	}
	.filter-row ul li {
		display: inline-block;
		font-family: 'op-reg';
		padding: 0 10px;
	}
	#filter {
		transition: all 1s ease;
		font-family: 'op-reg';
		font-size: 1em;
		padding: 5px;
		margin: 13px;
		border: none;
		box-shadow: none;
	}
	.discover-card-container {
		width: 100%;
	}
	.discover-title, .discover-location, .discover-author, .discover-post, .discover-detail-btn, .discover-ticket-rate {
		margin: 0;
		color: black;
		padding-bottom: 5px;
		transition: all .5s ease;
	}
	.discover-title {
		font-size: 1em;
		transform: translate3d(0,90px,0);
		color: white;
	}
	.discover-location {
		font-size: 0.9em;
		transform: translate3d(0,180px,0);
	}
	.discover-author {
		font-size: 0.8em;
		transform: translate3d(0,270px,0);
		margin-bottom: 10px;
	}
	.discover-ticket-rate {
		margin-bottom: 10px;
	}
	.discover-post {
		font-size: 0.7em;
		transform: translate3d(0,360px,0);
		margin-bottom: 10px;
	}
	.discover-post span {
		display: none;
	}
	.discover-detail-btn {
		font-size: 0.8em;
		transform: translate3d(0,450px,0);
	}

}
/*END OF DISCOVER PAGE*/
/*START OF TOURISM PAGE*/
#tourism-header {
	height: 90vh;
	background-image: url(../img/tourism.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
@media (max-width: 768px){
	#tourism-header {
		height: 500px;
		background-image: url(../img/tourism.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}
#destination-section, #hotel-section, #culinary-section, #event-section {
	height: auto;
	/*background-color: yellow;*/
}
.color-gradientautumn {
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
	top: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;
	transition: all .5s ease;
	border-radius: 8px 8px 0 0;
	background: linear-gradient(45deg, rgba(219, 213, 154, .15), rgba(176, 217, 184, .5));
	opacity: 0;
}
.container .col-3, .container .col-12 {
	border: none;
}
.tourism-title-section {
	font-family: 'op-extrabold';
	border-bottom: 1px solid black;
	text-align: center;
	padding: 20px;
	font-size: 1.5em;
	margin-bottom: 20px;
}
.tourism-card {
	background-color: white;
	padding: 0;
	border-radius: 8px;
	transition: all .5s ease;
}
.tourism-card:hover {
	background-color: white;
}
.tourism-card:hover .color-gradientautumn{
	opacity: 1;
}
.tourism-card-image {
	height: 150px;
	border-radius: 8px 8px 0 0;
}
.tourism-card-date {
	color: black;
	width: 100%;
	font-family: 'op-extrabold';
	margin: 0;
	padding: 5px 10px 0 10px;
}
.tourism-card-image-caption {
	font-family: 'op-bold';
	margin: 0;
	padding: 10px;
}
.tourism-price-rate {
	margin: 10px 0 5px 0;
}
.tourism-price, .tourism-rate {
	font-family: 'op-bold';
	padding: 5px 10px;
	font-size: 0.8em !important;
	border-radius: 3px;
	margin: 10px -5px 0 10px;
}
.tourism-price {
	background-color: black;
	color: white;
}
.tourism-rate {
	background-color: yellow;
	color: black;
}
.tourism-card-image-location, .tourism-distance, .tourism-transportation {
	font-family: 'op-light';
	padding: 0 10px 15px 10px;
	margin: 0;
}
.tourism-transportation i {
	padding: 0 10px 0 0;
}
.card-detail-btn {
	background-color: #51A324;
	padding: 10px;
	display: block;
	border-radius: 0 0 8px 8px;
	font-family: 'op-bold';
	color: white;
	text-align: center;
	transition: all .3s ease;
}
.card-detail-btn:hover {
	background-color: #448A1E;
}
.tourism-section-btn-container {
	text-align: center;
	margin-top: 30px;
}
.tourism-section-btn {
	background: linear-gradient(45deg, #5f2c82, #49a09d);
	background-size: 200%;
	background-position: -10px;
	text-align: center;
	padding: 10px 25px; 
	color: white;
	font-size: 1em;
	font-family: 'op-bold';
	border-radius: 3px;
	transition: all .3s ease;
	border: 2px solid rgba(0,0,0,0)
}
.tourism-section-btn:hover {
	background-position: -100px;
	border: 2px solid #3A1B4F
}
.destination-1 {
	background: url('../img/destination/1borobudur.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-2 {
	background: url('../img/destination/2prambanan.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-3 {
	background: url('../img/destination/3bromo.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-4 {
	background: url('../img/destination/4tangkuban.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-5 {
	background: url('../img/destination/5triogili.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-6 {
	background: url('../img/destination/6sentani.jpeg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-7 {
	background: url('../img/destination/7bunaken.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-8 {
	background: url('../img/destination/8pulaukomodo.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-9 {
	background: url('../img/destination/9toba.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-10 {
	background: url('../img/destination/10kawahptih.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-11 {
	background: url('../img/destination/11kawahijen.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.destination-12 {
	background: url('../img/destination/12rjaampt.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-1 {
	background: url('../img/hotel/1novotel.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-2 {
	background: url('../img/hotel/2doubletreehotel.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-3 {
	background: url('../img/hotel/3fourseason.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-4 {
	background: url('../img/hotel/4mandapa.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-5 {
	background: url('../img/hotel/5kempinski.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-6 {
	background: url('../img/hotel/6Amaris.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-7 {
	background: url('../img/hotel/7VasaHotel.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-8 {
	background: url('../img/hotel/8sensahotel.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-9 {
	background: url('../img/hotel/9hardrock.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-10 {
	background: url('../img/hotel/10andamar.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-11 {
	background: url('../img/hotel/11baliasri.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hotel-12 {
	background: url('../img/hotel/12erravilla.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-1 {
	background: url('../img/cullinaries/1nasipadang.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-2 {
	background: url('../img/cullinaries/2rujakcingur.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-3 {
	background: url('../img/cullinaries/3gudeg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-4 {
	background: url('../img/cullinaries/4rawon.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-5 {
	background: url('../img/cullinaries/5pecelmadiun.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-6 {
	background: url('../img/cullinaries/6bakpiapatok.JPG');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-7 {
	background: url('../img/cullinaries/7piesusu.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-8 {
	background: url('../img/cullinaries/8empekempek.JPG');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-9 {
	background: url('../img/cullinaries/9biakambon.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-10 {
	background: url('../img/cullinaries/10rendang.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-11 {
	background: url('../img/cullinaries/11seruit.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.culinary-12 {
	background: url('../img/cullinaries/12soto.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.events-1 {
	background: url('../img/event/event-1.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.events-2 {
	background: url('../img/event/event-2.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.events-3 {
	background: url('../img/event/event-3.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.events-4 {
	background: url('../img/event/event-4.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.events-5 {
	background: url('../img/event/event-5.JPG');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.events-6 {
	background: url('../img/event/event-6.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media (max-width: 768px){
	.tourism-card-container {
		width: 100%;
	}
	.tourism-card-image {
		height: 130px;
	}
	.tourism-card-image-location, .tourism-distance, .tourism-transportation {
		color: black;
	}
}
/*END OF TOURISM PAGES*/

/*START OF GALLERY PAGES*/
#gallery-header {
	height: 90vh;
	background-image: url(../img/gallery.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
@media (max-width: 768px){
	#gallery-header {
		height: 500px;
		background-image: url(../img/gallery.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}
#gallery {
	padding: 90px 10px;
	height: auto;
}
#gallery .container {
	padding: 0 30px;
}
.gallery-card-container, .gallery-card {
	border: none;
}
.gallery-card {
	height: 270px;
	padding: 20px;
	position: relative;
	overflow: hidden;
	z-index: 4;
	transition: all .5s ease;
	border-radius: 10px;
}
.color-gradientblack, .color-gradientgreen {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;
	transition: all .5s ease;
}
.color-gradientblack {
	background: linear-gradient(to left, rgba(46, 46, 46, .7), rgba(23, 23, 23, .7));
	z-index: 5;
	opacity: 1
}
.color-gradientgreen {
	background: linear-gradient(to right, rgba(18, 76, 92, .7), rgba(112, 178, 129, .7));
	z-index: 5;
	opacity: 0;
}
.gallery-card-title, .gallery-card-caption, .gallery-card-btn {
	margin: 0;
	position: relative;
	z-index: 10;
	transition: all .5s ease;
}
.gallery-card-title {
	font-family: 'op-extrabold';
	font-size: 2em;
	width: 100%;
	color: white;
}
.gallery-card-caption {
	font-family: 'op-reg';
	font-size: .9em;
	color: white;	
}
.gallery-card-btn {
	font-family: 'op-reg';
	display: block;
	background-color: white;
	text-align: center;
	padding: 15px;
	margin: auto -20px 0 -20px;
	cursor: pointer;
}
.gallery-type {
	float: right;
	background-color: #EEEEEE;
	padding: 15px;
	margin: -15px;
}
.one-line-gallery-title h1 {
	margin-bottom: 25px;
	margin-top: 40px;
	transform: translate3d(0,50px,0);
}
.one-line-gallery-title p {
	margin-bottom: 55px;
	transform: translate3d(0,160px,0);
}
.one-line-gallery-title a {
	transform: translate3d(0,280px,0);
}
.two-line-gallery-title h1 {
	margin-bottom: 20px;
	margin-top: 20px;
	transform: translate3d(0,50px,0);
}
.two-line-gallery-title p {
	margin-bottom: 35px;
	transform: translate3d(0,160px,0);
}
.two-line-gallery-title a {
	transform: translate3d(0,280px,0);
}
.vidinc {
	background: url('../img/gallery/incvid.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.barong {
	background: url('../img/gallery/barong.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.love {
	background: url('../img/gallery/poster-2.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.karapan {
	background: url('../img/gallery/karapan.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.negeri {
	background: url('../img/gallery/poster-1.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.kecak {
	background: url('../img/gallery/kecak.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.reog {
	background: url('../img/gallery/reog.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.frame {
	background: url('../img/gallery/frame.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.wayang {
	background: url('../img/gallery/wayang.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (max-width: 768px){
	#gallery {
		padding: 10px;
	}
	#gallery .container {
		padding: 0;
		width: 100%;
	}
	.gallery-card-container {
		width: 100%;
	}
	.gallery-card {
		height: 210px;
		padding: 15px;
	}
	.gallery-card-title {
		font-family: 'op-extrabold';
		font-size: 1.8em;
		width: 100%;
		color: white;
	}
	.gallery-card-caption {
		font-size: .8em;
	}
	.gallery-card-btn {
		padding: 10px;
		margin: auto -20px 0 -20px;
		cursor: pointer;
	}
	.gallery-type {
		padding: 10px;
		margin: -10px;
	}
	.one-line-gallery-title h1 {
		margin-bottom: 10px;
		margin-top: 30px;
		transform: translate3d(0,50px,0);
	}
	.one-line-gallery-title p {
		margin-bottom: 40px;
		transform: translate3d(0,160px,0);
	}
	.one-line-gallery-title a {
		transform: translate3d(0,280px,0);
	}
	.two-line-gallery-title h1 {
		line-height: 1.2em;
		margin-bottom: 10px;
		margin-top: 15px;
		transform: translate3d(0,40px,0);
	}
	.two-line-gallery-title p {
		margin-bottom: 25px;
		transform: translate3d(0,160px,0);
	}
	.two-line-gallery-title a {
		transform: translate3d(0,280px,0);
	}
}
/*POPUPS*/
.popup-bg-transparent {
	visibility: hidden;
	opacity: 0;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,.85);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s ease;
    transition-delay: 0s;
}
.popup-container {
	position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s ease;
    transform: translate3d(0,1000px,0);
    transition-delay: 0s;
}
.vidinc-popup, .barong-popup, .love-popup, .karapan-popup, .negeri-popup, .kecak-popup, .reog-popup, .frame-popup, .wayang-popup {
	background-color: white;
	/*transform: translate3d(0,500px,0);*/
	z-index: 1001;
	width: 55%;
	height: 90%;
	overflow: hidden;
	/*margin: auto;*/
	left: 0;
	right: 0;
	transition: all .5s ease;
}
.barong-popup img, .love-popup img, .karapan-popup img, .negeri-popup img, .kecak-popup img, .reog-popup img, .wayang-popup img {
	width: 100%;
}
.popup-title, .popup-caption {
	margin: 20px;
}
.popup-title {
	font-family: 'op-extrabold';
	padding-bottom: 20px;
	border-bottom: 1px solid black;
	font-size: 2em;
}
.popup-caption {
	font-family: 'op-reg';
	font-size: .9em;
}
.popup-close-btn {
	color: white;
	font-size: 2.5em !important;
	position: absolute;
	right: 30px;
	top: 30px;
	transition: all .3s ease;
	transform: translate3d(500px,0,0);
	transition-delay: 0s;
	cursor: pointer;
	opacity: 0.8;
}
@media (max-width: 768px){
	.vidinc-popup, .barong-popup, .love-popup, .karapan-popup, .negeri-popup, .kecak-popup, .reog-popup, .frame-popup, .wayang-popup {
		width: 85%;
		height: 60%;
	}
	.vidinc-popup iframe, .frame-popup iframe {
		width: 100%;
		height: 45%;
	}
	.barong-popup img {
		width: 100%;
	}
	.popup-title, .popup-caption {
		margin: 15px;
		color: black;
	}
	.popup-title {
		padding-bottom: 15px;
		font-size: 1.5em;
	}
	.popup-caption {
		font-size: .7em;
	}
}


/*START OF LOGIN PAGES*/
#login-page {
	width: 100%;
	height: 100vh;
	background: linear-gradient(to right, rgba(63, 224, 208, .3), rgba(255, 140, 0, .3), rgba(255, 0, 128, .3)), url(../img/bridge.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
#login {
	margin-top: 60px;
	background-color: white;
	padding: 0 30px 30px 30px;
}
#login-title {
	font-family: 'op-extrabold';
	font-size: 1.5em;
	text-align: center;
	margin: 20px 60px 60px 60px;
	padding: 20px 40px 20px 40px;
	/*border-bottom: 2px solid black;*/
}
#signup-title {
	font-family: 'op-extrabold';
	font-size: 1.5em;
	text-align: center;
	margin: 20px 60px 50px 60px;
	padding: 20px 40px 20px 40px;
	/*border-bottom: 2px solid black;*/
}
.login-input {
	display: block;
	padding: 10px;
	margin: 20px 0;
	width: 100%;
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.3);
	transition: all .5s ease;
}
.signup-input {
	display: block;
	padding: 10px;
	margin: 15px 0;
	width: 100%;
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.3);
	transition: all .5s ease;
}
.login-input:focus, .signup-input:focus {
	outline: none;
	border-bottom: 1px solid black;
	width: 100%;
}
.login-submit {
	display: block;
	background-color: #40b275;
	padding: 10px;
	font-family: 'op-reg';
	text-align: center;
	text-decoration: none;
	color: white;
}
.login-submit:hover {
	background-color: #39a069;
}
#login p {
	font-family: 'op-reg';
	font-size: 0.8em;
	text-align: center;
	padding-top: 30px;
	color: #282828;
}
#login-signup {
	font-family: 'op-bold';
	color: black;
}

/*USER DASHBOARD PAGE*/
#dashboard {
	width: 100%;
	background: linear-gradient(to right, rgba(63, 224, 208, .3), rgba(255, 140, 0, .3), rgba(255, 0, 128, .3)), url(../img/bridge.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}
#dashboard-page {
	height: auto;
	margin-top: 100px;
}
#dashboard-page .col-4, #dashboard-page .col-8 {
	border: none;
}
#user, #achievement, #option, #option-discover-section, #option-gallery-section, #option-tourism-section {
	background-color: white;
}
#option-discover-section, #option-gallery-section {
	margin-top: 30px;
}
#user {
	padding: 15px;
}
#user h1, #user h5, #user a {
	margin: 10px;
}
#user h1 {
	font-family: 'op-extrabold';
}
#user h5 {
	font-family: 'op-light';
}
#user h5 span {
	font-family: 'op-light';
	color: #EF4747;
}
#user a {
	font-family: 'op-reg';
	display: block;
}
#achievement {
	margin-top: 30px;
	display: block;
}
#achievement > .col-4 {
	/*border: 1px solid red;*/
}
#achievement > .col-4 img {
	width: 100%;
	cursor: pointer;
}
.tooltip {
	position: relative;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 7px;
    border-radius: 3px;
    font-family: 'op-reg';
    font-size: 0.9em;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
#option {
	padding: 0;
}
#option .col-6 {
	padding: 40px;
	text-align: center;
	font-family: 'op-extrabold';
	cursor: pointer;
	transition: all .3s ease;
	border: none;
}
#option .col-6:hover {
	background-color: #EBEBEB;
}

.activities-title {
	font-family: 'op-light';
	font-variant: uppercase;
	padding: 15px;
}
.action-title {
	padding-bottom: 40px;
	border-bottom: 2px solid #C3C3C3;
}
.activities-post-container {
	list-style: none;
	padding: 0;
	/*border: 1px solid red;*/
}
.activities-post-container li {
	padding: 30px 15px 40px 15px;
	list-style: none;
	border-bottom: 1px solid #C3C3C3;
	transition: all .3s ease;
}
.activities-post-container li:hover {
	background-color: #EBEBEB;
}
.activities-post {
	margin: 0;
	font-family: 'op-bold';
}
.activities-post-place {
	margin: 10px 0;
	/*padding: 5px;*/
	font-family: 'op-reg';
	width: 50%;
	/*background-color: #DFDFDF;*/
}
.activities-post-preview {
	margin: 0 0 20px 0;
	font-family: 'op-reg';
	font-size: 0.8em;
}
.activities-btn {
	padding: 5px 20px;
	color: white;
	font-family: 'op-reg';
	font-size: 0.9em;
	transition: all .3s ease;
	border-radius: 3px;
}
#action {
	padding: 10px 25px;
	background-color: #E8AB1A;
	margin-top: -9px;
	float: right;
	color: white;
}
#view {
	background-color: blue;
}
#edit {
	background-color: green;
}
#view-count {
	background-color: yellow;
	color: black;
}
#action:hover {
	background-color: #B7850D;
}
#view:hover {
	background-color: #0202D5;
}
#edit:hover {
	background-color: #015B01;
}
.no-post {
	color: #C3C3C3;
	font-family: 'op-light';
	padding: 20px 100px 40px 100px;
	font-size: 2em;
	text-align: center;
}
#option-discover-section {
	display: block;
}
#option-gallery-section {
	display: none;
}

@media (max-width: 768px){
	#dashboard-page > .col-4, #dashboard-page > .col-8{
		width: 100%;
	}
	#dashboard-page {
		margin-top: 70px;
	}
	#user h1, #user h5 {
		color: black;
	}
	#user a {
		font-size: .8em;
	}
	#achievement {
		display: none;
	}
	#option > .col-6 {
		padding: 20px;
		font-size: 0.9em;
	}
	#option-discover-section, #option-gallery-section {
		margin-top: 0;
	}
	.activities-title {
		padding: 5px;
		font-size: 0.9em;
	}
	.action-title {
		padding-bottom: 30px;
	}
	.activities-post-container li {
		padding: 25px 15px;
	}
	.activities-post {
		font-size: 1.1em;
	}
	.activities-post-place {
		width: 100%;
		font-size: 0.8em;
	}
	.activities-post-preview {
		color: black;
		font-size: 0.7em;
	}
	.activities-btn {
		padding: 5px 15px;
		font-size: 0.7em;
		border-radius: 3px;
	}
	.no-post {
		padding: 20px 50px 40px 50px;
		font-size: 1.5em;
		text-align: center;
	}
}