/* GENERAL */
*,
*:after,
*::before {
	box-sizing: border-box;
	margin:0px;
	padding:0px;
}
html {
	scroll-behavior: smooth;
}
html,body{
	height: 100%;
}
body{
	font-family: roboto,Helvetica,Arial,sans-serif;
	background: #e8e8e8;
    font-size: 14px;
    /*font-family: 'Poppins', sans-serif;*/
    color:#252525;
    font-weight: 400;
    overflow-x: hidden;
}


p{
	line-height: 180%;
}

.bg1{
	background:#f8f9fa;;
}

.img-icon .svg-inline--fa:hover{
	color: #888787 !important;
}
.img-servis a {
	color: #000000;
    text-decoration: none;
    background-color: transparent;
}

.img-servis a:hover{
	color: #9a9a9a;
    text-decoration: none;
    background-color: transparent;
}

.btn-booking{
	padding: 10px 100px;
}
 .scrolling-wrapper{
	overflow-x: auto;
}
.slick-dots li button:before{
	font-size: 10px !important;
}
.responsive .slick-dots{
	bottom: 10px !important;
}
.dropdown-toggle::after {
    display: none;
  }
.text-decoration-none{
  text-decoration: none!important;
}
/* Font Awesome Icons have variable width. Added fixed width to fix that.*/
.icon-width { width: 2rem;}

.img-icon:hover{
	transform: translateY(-10px);
}
.img-icon {
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

.faq-section {
    background: #fdfdfd;
    min-height: 100vh;
    padding: 10vh 0 0;
}
.faq-title h2 {
  position: relative;
  margin-bottom: 45px;
  display: inline-block;
  font-weight: 600;
  line-height: 1;
}
.faq-title h2::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 60px;
    height: 2px;
    background: #E91E63;
    bottom: -25px;
    margin-left: -30px;
}
.faq-title p {
  padding: 0 190px;
  margin-bottom: 10px;
}

.faq {
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.faq .card {
  border: none;
  background: none;
  border-bottom: 1px dashed #CEE1F8;
}

.faq .card .card-header {
  padding: 0px;
  border: none;
  background: none;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.faq .card .card-header:hover {
    background: rgba(233, 30, 99, 0.1);
    padding-left: 10px;
}
.faq .card .card-header .faq-title {
  width: 100%;
  text-align: left;
  padding: 0px;
  padding-left: 30px;
  padding-right: 30px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: #3B566E;
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  padding-top: 20px;
  padding-bottom: 20px;
}

.faq .card .card-header .faq-title .badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 14px;
  float: left;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  text-align: center;
  background: #E91E63;
  color: #fff;
  font-size: 12px;
  margin-right: 20px;
}

.faq .card .card-body {
  padding: 30px;
  padding-left: 35px;
  padding-bottom: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #6F8BA4;
  line-height: 28px;
  letter-spacing: 1px;
  border-top: 1px solid #F3F8FF;
}

.faq .card .card-body p {
  margin-bottom: 14px;
}

@media (max-width: 991px) {
  .faq {
    margin-bottom: 30px;
  }
  .faq .card .card-header .faq-title {
    line-height: 26px;
    margin-top: 10px;
  }
}



.blink{
 -webkit-animation: blink-text 1s infinite; /* Safari 4+ */
  -moz-animation:   blink-text 1s infinite; /* Fx 5+ */
  -o-animation:     blink-text 1s infinite; /* Opera 12+ */
  animation:        blink-text 1s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes blink-text {
	0%, 49% {
	   color: red;
	}
	50%, 100% {
		color: black;
	}
}
.text-bold{
	font-weight: bold;
}
.frame-shadow{
	border-radius: 10px;
    box-shadow: 0px 0px 5px #888888;

    padding: 10px;
    /* border: 1px solid; */
    background: #ffff;
}
.example1 {
 background: red;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    border: 2px solid red;
    padding: 10px;
    border-radius: 50px 20px;
    color: white;
}

.shadow-only{
    border-radius: 10px;
    box-shadow: 11px 8px 5px #6261619e!important;
    padding: 10px;
    /* border: 1px solid; */
    background: #ffff;
}
}
.text-white{
	color: #ffff;
}
/*strong{
	color:#111;
}*/
.nomargin{
	margin:0;
}
.nopadding{
	padding:0;
}
.btn-download{
	background:#f7910f;
	color:#000;
	border-radius: 50px;
	padding-left: 30px;
	padding-right: 30px;
}
.header{
	background: #272727;
	border-radius: 0;
	border:none;
	border-top:5px solid #f7910f;
	margin:0;
}

/*.navbar-brand img{
	height: 100%;
	width: auto;
}*/
.navbar-text{
	color:#fff!important;
	margin:0;
	height: 100px;
	line-height: 100px;
	padding:0 15px;
}
.navbar-text .fa{
	color:#f7910f;
	font-size: 22px;
	display: inline-block;
	vertical-align: middle;
	margin:-3px 5px 0 0;
}
#intro{
	height: calc(100vh - 105px);
	background: #eee;
	overflow:hidden;
	position: relative;
}
#intro .bg{
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}
#intro .caption{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-80%);
	-webkit-transform: translate(-50%,-80%);
	color:#fff;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	z-index: 10;
}
#intro .caption h4{
	font-size:2em;	
	font-weight: 300;
	margin:0 0 10px;
}
#intro .caption h3{
	font-size:3em;	
	font-weight: 300;
	margin:0 0 10px;
}
#intro .caption h2{
	font-weight: bold;
	font-size:3.1em;
	margin:0 0 30px;
}
#intro .btn-daftar{
	background:#f7910f;
	color:#fff;
	border-radius: 3px;
	font-size:1.5em;
	padding:10px 30px;
	box-shadow: 0px 20px 50px -20px rgba(0,0,0,0.5);
}
.row-feature{
	margin:0;
	position: relative;
	margin-bottom: 50px;
	box-shadow: 0px 20px 50px -20px rgba(0,0,0,0.5);
	z-index: 10;
}
.row-feature > div{
	padding:0;
}
.row-feature .item{
	height: 100%;
	color:#fff;
	text-align: center;
	padding:30px;
}
.row-feature .thumbnail{
	background: none;
	border:none;
	padding:0;
}
.row-feature .thumbnail img{
	height: 100px;
}
.row-feature h4{
	font-size:1.6em;
	text-transform: uppercase;
	margin:0 0 15px;
	font-family: 'Poppins', sans-serif;
}
#welcome .container{
	position: relative;
}
.row-feature a{
	/*font-weight: bold;*/
	color:#fff;
}
#welcome .bg{
	position: absolute;
	top:0;
	right:15px;
	bottom:0;
	width: 50%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right center;
}
.row-welcome h2{
	font-family: 'Poppins', sans-serif;
	margin:0;
	font-weight: bold;
}
.row-welcome .box{
	padding:50px;
	box-shadow: 0px 20px 50px -20px rgba(0,0,0,0.5);
	background: #fff;
	margin:50px 0;
}
#welcome .link{
	list-style: none;
	margin:0 -15px 15px;
	padding:0;
}
#welcome .link > li{
	float: left;
	width: 33%;
	padding:5px;
}
#welcome .link > li > a{
	display: block;
	padding:10px 15px;
	border:1px dashed #ddd;
	text-decoration: none;
	font-weight: bold;
	font-size:12px;
}
#welcome .link > li > a:hover{
	border:1px solid #f6d106;
}
#welcome .link > li > a .caret{
	float: right;
	margin:5px 0 0;
}
#welcome .link > li > .dropdown-menu{
	border:4px solid #f6d106;
	left:5px;
	border-radius: 0;
	box-shadow: none;
	top:calc(100% - 8px);
	min-width: calc(100% - 10px);
	padding:0;
	background: #fff;
}
#welcome .link > li:nth-child(3n) > .dropdown-menu{
	left:auto;
	right:5px;
}
#welcome .link > li > .dropdown-menu li a{
	padding:10px 15px;
	display: block;
	border-bottom: 1px dashed #eee;
	font-size:12px;
}
#welcome .link > li > .dropdown-menu li a span{
	color:#aaa;
	margin-left: 15px;
}
#welcome .link > li > .dropdown-menu li a:hover{
	background: #f5f5f5;
}
#welcome .link > li.open > a{
	background: #f6d106;
	color:#fff;
	border:1px solid #f6d106;
}
#video-section{
	padding:50px 0;
	background: #516695;
	color:#fff;
	position: relative;
	/* text-align: center; */
}
#video-section:before{
	content: "";
	background:url(../images/pendaftaran-bg.html) no-repeat center;
	background-size: cover;
	opacity: 0.1;
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}
#video-section .divider{
	background: url(../images/divider.png) no-repeat center;
	background-size: contain;
	height: 20px;
	margin: 15px 0;
}
.row-pendaftaran{
	position: relative;
	z-index: 10;
}
.row-pendaftaran .icon,
.row-pendaftaran .icon-hexa{
	width: 120px;
	height: 120px;
	margin:0 auto;
	position: relative;
}
.row-pendaftaran .icon:before{
	content: "";
	width: 120px;
	height: 120px;
	background: #fff;
	position: absolute;
	top:0;
	left:0;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
	border-radius: 4px;
}
.row-pendaftaran .icon .instrument{
	position: static;
}
.row-pendaftaran .icon .instrument:before,
.row-pendaftaran .icon .instrument:after{
	content: "";
	position: absolute;
	top:50%;
	left:0;
	width: 30px;
	height: 30px;
	background: rgba(255,255,255,0.5);
	color:#333;
	transform: translate(-120%,-50%) rotate(45deg);
	-webkit-transform: translate(-120%,-50%) rotate(45deg);
	border-radius: 0px;
}
.row-pendaftaran .icon .instrument:after{
	left:auto;
	right:0;
	transform: translate(120%,-50%) rotate(45deg);
	-webkit-transform: translate(120%,-50%) rotate(45deg);
}
.row-pendaftaran .icon-hexa .instrument{
	width: 120px;
	height: 65px;
	background: #fff;
	margin:0 auto;
	position: absolute;
	top:0;
	left:0;
	display: block;
}
.row-pendaftaran .icon-hexa .instrument:before{
	content: "";
	position: absolute;
	top: -30px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 30px solid #fff;
}
.row-pendaftaran .icon-hexa .instrument:after{
	content: "";
	position: absolute;
	bottom: -30px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-top: 30px solid #fff;
}
.row-pendaftaran h4{
	position: relative;
	margin:-60px 0 60px;
	color:#333;
	color:#eac600;
	font-family: 'Roboto Slab', serif;
}
.row-pendaftaran .icon img{
	position: relative;
	width: 80px;
	height: auto;
	margin:15px 0 0;
}
.row-pendaftaran .icon-hexa img{
	position: absolute;
	width: 80px;
	height: auto;
	top:-10px;
	left: 50%;
	transform: translateX(-50%);	
	-webkit-transform: translateX(-50%);	
}
.videobox{
	margin:50px 0 0;
	background: #222;
	box-shadow: 0px 20px 50px -20px rgba(0,0,0,0.5);
	padding:10px;
}
.videobox iframe{
	margin:0;
}
#testimoni{
	padding:50px 0;
	text-align: center;
}
#testimoni h2{
	font-family: 'Roboto Slab', serif;
	position: relative;
	padding:0 0 15px;
	margin:0 0 50px;
	font-weight: bold;
	display: inline-block;
}
#testimoni h2:before{
	content: "";
	position: absolute;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 100px;
	height: 2px;
	background: #eac600;
}
#testimoni{
	background: #f5f5f5;
}
.testimoni-list .text{
	padding:0;
	position: relative;
}
.testimoni-list .text img{
	width: 100%
}
.testimoni-list .thumbnail{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow:hidden;
	border:none;	
	margin:-50px auto 0;
	position: relative;
}
.testimoni-list .user{
	margin:30px 0 0;
}
.testimoni-list .user h4{
	margin:0 0 5px;
	font-family: 'Roboto Slab', serif;
	color:#f7910f;
	font-weight: bold;
}
.testimoni-list .user em{
	color:#aaa;
}
.testimoni-list .slick-dots{
	text-align: center;
	list-style: none;
	margin:30px 0 0;
}
.testimoni-list .slick-dots li{
	display: inline-block;
}
.testimoni-list .slick-dots li button{
	text-indent: -9999px;
	background:#ddd;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border:none;
	outline: none;
	margin:0 3px;
}
.testimoni-list .slick-dots li.slick-active button{
	background:#f7910f;
}
#footer{
	margin-bottom: 45px;
	background: #f7910f;
	color:#fff;
	text-align: center;
}
#footer .container{
	padding:15px 0;
}
#footer a {
	text-decoration:none;
	color:#fff;
}
#footer a:hover {
	color:#333;
}
.social-link{
	background: #272727;
	padding:0px 0;
}
.social{
	list-style: none;
	margin:0;
	padding:0;
	text-align: center;
}
.social li{
	display: inline-block;
}
.social li a{
	display: block;
	color:#fff;
	font-size:1.5em;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
.social li:hover a{
	color:#fff !important;
}
#galeri{
	background: #eee;
	padding:50px 15px;
}
.galeri-item{
	background: #fff;
	margin:15px;
	border-radius: 4px;
	overflow:hidden;
}
.galeri-item .thumbnail{
	height: 200px;
	border:none;
	margin:0;
	padding:0;
	position: relative;
}
.galeri-item .thumbnail .bg{
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.galeri-item .info{
	padding:30px;
}
.galeri-item h4{
	font-family: 'Roboto Slab', serif;
	text-transform: uppercase;
}
.galeri-list .slick-dots{
	text-align: center;
	margin:30px 0 0;
}
.galeri-list .slick-dots li{
	display: inline-block;
}
.galeri-list .slick-dots li button{
	text-indent: -9999px;
	border:none;
	background: #ccc;
	width: 30px;
	height: 4px;
	margin:0 5px;
}
.galeri-list .slick-dots li.slick-active button{
	background: #333;
}

@media (max-width: 992px){
	
}
@media (max-width: 767px){
	.nav-info{
		background: rgba(0,0,0,0.5);
		margin:0 -15px;
		padding:10px;
		font-size:12px;
	}
	#intro .bg{
		background-attachment:scroll;
	}
	#intro .caption{
		width: 100%;
	}
	#intro .caption h4{
		font-size: 1.1em;
	}
	#intro .caption h3{
		font-size: 1.4em;
	}
	#intro .caption h2{
		font-size: 1.5em;
	}
	.navbar-text{
		height: 40px;
		line-height: 40px;
	}
	.row-feature .item{
		min-height: 0;
	}
	.row-feature .item img{
		height: 100px;
	}
	#welcome .bg{
		position: relative;
		top:auto;
		bottom:auto;
		right:auto;
		width: 100%;
		height: 200px;
	}
	#welcome .box{
		margin:0;
		padding:15px;
	}
	#welcome h2{
		font-size:1.5em;
	}
	#galeri{
		padding:0;
	}
	#video-section{
		padding:15px 0;
	}
	#video-section h2{
		font-size: 1.5em;
	}
	#video-section .item{
		margin:0 0 50px;
	}
	#welcome .link > li{
		float: none;
		width: 100%;
		padding:5px;
	}
	.testimoni-list .text{
		padding:30px 15px;
		font-size:13px;
	}
	.testimoni-list .text:before{
		display: none;
	}
	.testimoni-list .thumbnail{
		margin:15px auto 15px;
	}

}
#video-section{
	background:#7b7b7b;
	color:#fff;
}
#video-section h3{
	font-size:18px;
}
#video-section .media-link{
	display: block;
	color:#fff;
	text-decoration: none!important;
	padding:10px;
	background:rgba(0,0,0,0.2);
	border-bottom:1px solid rgba(0,0,0,0.1);
}
#video-section .media-link.active{
	background:rgba(0,0,0,0.5);
}
#youtube-player{
	background:#000;
}

#contact {
	position: relative;
	height: 100vh;
	padding:120px 0;
	text-align: center;
}
#contact h2{
	font-family: 'Roboto Slab', serif;
	position: relative;
	padding:0 0 15px;
	margin:0 0 30px;
	font-weight: bold;
	display: inline-block;
}
#contact h2:before{
	content: "";
	position: absolute;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 100px;
	height: 2px;
	background: #eac600;
}
#contact h4{
	margin-bottom:30px;
}
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 4%;
  vertical-align: middle;
  margin-right: -4px;
}
/*
.modal-dialog {
  max-width: 600px !important;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
*/
#contact.open #contact-controls {
  display: block;
  position: absolute;
  top: 30px;
  right: 30px;
}

#contact-controls {
  padding: 0;
  display: none;
  list-style: none;
  text-align: center;
  margin-bottom: 50px;
}

#contact-controls li {
  display: inline-block;
  margin: 10px;
}

#contact-controls li a {
  display: block;
  color: #ccc;
  border: 2px solid #ccc;
  padding: 4px 0;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  text-align: center;
}
#contact-controls li a:hover {
  color: #f7910f;
  border: 2px solid #f7910f;
}
.btn-submit {
	padding: 10px 30px;
    font-weight: bold;
    color: #000;
    background-color: #f7910f;
    border-color: #eea236;
    border-radius: 0;
}
.btn-submit:hover,
.btn-submit:focus,
.btn-submit:active {
	color: #000;
    background-color: #fff;
    border-color: #f7910f;
}
@media (max-width: 767px){
	#contact {
		height: auto;
		padding: 45px 0;
	}
	#contact.open #contact-controls {
		top: 5px;
		right: 5px;
	}
}


/*Style 3*/
/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
	padding: 0;
}
    
/*Right*/
.modal.right.fade .modal-dialog {
	right: -100%;
	transition: all .75s ease;
	transform:translateY(0);
	-webkit-transform: translateY(0);
    /*transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;*/
}

.modal.right.fade.in .modal-dialog {
	right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
	border-radius: 0;
	border: none;
}

.modal-header {
	border-bottom-color: #EEEEEE;
	background-color: #FAFAFA;
}
.fade {
	transition: all .75s ease;
	transform:translateY(0);
	-webkit-transform: translateY(0);
    /*transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;*/
}
.btn-dekstop{
	    font-size: 34px;
    background: #c77023;
    position: absolute;
       margin-top: 451px;
    right: 326px;
    color: #fff;
    border-radius: 27px;
    font-family: 'Trebuchet MS', sans-serif;
}
.btn-mobile{
	margin-top: 440px;
    position: absolute;
    background: #c96f1f;
    text-align: center;
    left: 134px;
    font-size: 20px;
    font-family: 'Trebuchet MS', sans-serif;
    color: #fff;
    border-radius: 20px;
    font-weight: bold;
}
.btn-desktop:hover {
    color: #e6e5e3 !important;
    text-decoration: none;
}
@media (max-width: 480px){

	.slider .slick-next{
		right: -10px;
	}
	.slider .slick-prev{
		left: -10px;
	}
	.btn-mobile {
    margin-top: 445px;
    position: absolute;
    background: #c96f1f;
    text-align: center;
    left: 135px;
    font-size: 20px;
    font-family: 'Trebuchet MS', sans-serif;
    color: #fff;
    border-radius: 20px;
    font-weight: bold;
}
@media (max-width: 380px){
	.btn-mobile {
    margin-top: 395px;
    position: absolute;
    background: #c96f1f;
    text-align: center;
    left: 110px;
    font-size: 20px;
    font-family: 'Trebuchet MS', sans-serif;
    color: #fff;
    border-radius: 20px;
    font-weight: bold;
}
}