@charset "utf-8";
@font-face {
    font-family: 'myfont'; /*a name to be used later*/
    src: url('../fonts/Abel.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'title'; /*a name to be used later*/
    src: url('../fonts/HARNGTON.TTF'); /*URL to font*/
}
@font-face {
    font-family: 'title2'; /*a name to be used later*/
    src: url('../fonts/MavenPro.ttf'); /*URL to font*/
}

*{
	font-family:"myfont";
}
.page-container {
  padding-top:80px;
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:80px;
}
.bg-slider{
	height:87px;
	width:100%;
	position:relative;
	margin-top:-80px;
	background:url(../img/bg-slideshow.png) left bottom;
	background-repeat:no-repeat;
	background-size:100% auto;
	border:0px;
	z-index:99;
}
.content{
	margin:0 auto;
	width:100%;
	max-width:1000px;
	padding:0px;
	font-family:"myfont";

}
.blank-space{
	display:block;
	margin-top:30px;
	margin-bottom:30px;
	padding:0px;
	height:30px;
}
.line-grey{
	display:block;
	margin-top:50px;
	margin-bottom:50px;
	height:1px;
 	background-image: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(150,150,150,.5) 20%,rgba(150,150,150,1) 50%,rgba(150,150,150,.5) 80%, rgba(255,255,255,0) 100%);
}
.gridme2{
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: auto auto;
	text-align:justify;
}
.gridme3{
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: auto auto auto;
	text-align:justify;
	padding:20px;
}
.gridme3 *{
    color:#fff;
}
.gridme5{
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: auto auto auto auto auto;
	text-align:justify;
	padding:10px;
	height:100%;
}
.gridme5 div{
	background-size:100% auto;
	background-position:center;
	background-repeat:no-repeat;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
	cursor:pointer;    
	overflow:hidden;
    border:1px solid rgba(255,255,255,0);

}
.gridme5 div:hover{
	background-size:110% auto;
    box-shadow:1px 1px 5px rgba(0,0,0,.8);
    border:1px solid rgba(255,255,255,.8);
}
.gridme5 div a img{
    opacity:0;
    position:relative;
    z-index:0;
}
.gridme5 div a {
    position:relative;
    z-index:9;
}
.gridme5 div a:after {
    position: absolute;
    content:attr(title);
    left:0;
    top:20px;
    opacity:0;
    display:block;
    width:100%;
    max-width:100%;
    background-color:rgba(0,0,0,.5);
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    padding:10px 0px;
    color:white;
    z-index:99;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
.gridme5 div:hover a:after {
    top:-20px;
    opacity:1;

}
.gridbtn{
    position:relative;
    top:30px;
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 50% 50%;
	text-align:center;
}
h1,h2,h3{
	color:#666;
	margin:0px;
}
h1 b, h2 b, h3 b{
	color:#000;
	margin:0px;
}
#btn{
	position:relative;
	color:#666;
	cursor:pointer;
	padding:10px 20px;
	text-decoration:none;
	border:1px solid #e7bd81;
	border-radius:5px;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
#btn:hover{
	color:#000;
	padding:20px 30px;
	border:1px solid #cf7a00;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
#tombol{
	position:relative;
	color:#fff;
	cursor:pointer;
	padding:10px 20px;
	text-decoration:none;
	border:1px solid #e7bd81;
	background-color:#557fb4;
	border-radius:5px;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
#tombol:hover{
	color:#000;
	padding:10px 30px;
	border:1px solid #cf7a00;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
#tombol:disabled{
	color:#666;
	padding:10px 30px;
	border:1px solid #666;
	background-color:#ddd;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
#btn2{
	position:relative;
	color:#fff;
	font-weight:bold;
	background-color:#557fb4;
	cursor:pointer;
	padding:10px 20px;
	text-decoration:none;
	border:1px solid #e7bd81;
	border-radius:5px;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
#btn2:hover{
	color:#fff;
	padding:20px 30px;
	border:1px solid #cf7a00;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}
#btn2:disabled{
	background-color:#ccc;
	color:999;
}
.sosicon{
    text-align:center;
}
.bg{
    background:url(../img/bg.jpg);
    padding:20px 0px;
}

.sosicon a{
    margin:30px;
    font-size:5vw;
    color:#333;
    text-shadow:0px;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}
.sosicon a:hover{
    color:#000;
    text-shadow:0px 0px 5px rgb(0,0,0);
}
.footer{
    background-image:linear-gradient(to bottom,#333 0%,#666 100%);
    color:#fff;
    z-index:1;
}
.footer .gridme3 div ul li{
    position:relative;
    margin-left:20px;
    list-style-type: square;
}
.bg-footer{
    top:0px;
    background-image:url(../img/bg-slideshow.png);
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:left top;
    position:relative;
    top:-10px;
    z-index:9;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
.title{
	color:#894f04;
	font-weight:bold;
	text-transform:capitalize;
	font-family:"title";
	font-size:2vw;
}
.arttext{
	color:#333;
	font-weight:bold;
	font-family:"title";
}
.title-big{
	color:#894f04;
	font-weight:bold;
	text-transform:capitalize;
	font-family:"title";
	font-size:2.5vw;
}
.bigtitle{
	color:#000;
	text-transform:uppercase;
	font-size:150%;
}
.normal{
	border-collapse:inherit;
	list-style:inherit;
	border-spacing:5px;
	padding-left:0px;
}
.normal td{
    padding:5px;
}
.normal li{
	list-style:square;
}
@keyframes slidefromLeft {
    from {left:-100%}
    to {left:0%}
}    
@keyframes slidetoLeft {
    from {left:0%}
    to {left:-100%}
}

.slideLeft{
    -webkit-animation-name: slidefromLeft; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    animation-name: slidefromLeft;
	left:0%;
	width:1000px;
	margin:0 auto;
}
.toLeft{
    -webkit-animation-name: slidetoLeft; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    animation-name: slidetoLeft;
	left:-150%;
	width:1000px;
	margin:0 auto;
	
}
@keyframes myLoading {
from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#loading{
 -webkit-animation: myLoading 1s linear infinite;
  -moz-animation: myLoading 1s linear infinite;
  -ms-animation: myLoading 1s linear infinite;
  -o-animation: myLoading 1s linear infinite;
  animation: myLoading 1s linear infinite;
}
.showme{
    opacity:1;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.hideme{
    opacity:0;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.divesite{
    margin:0 auto;
    max-width:100%;
    display:block;
    background-color:#333;
}
.divesite *{
    color:#fff;
}
.divesite div{
    margin-top:30px;
}

.divesite2{
    margin:0 auto;
    max-width:100%;
    display:block;
	background: transparent url(../img/bgpromo.jpg) repeat 0% 0%;

}
.divesite2 *{
    color:#fff;
}
.divesite2 div{
    margin-top:30px;
}

.contactus-table{
max-width:100%;
width:100%;
font-family: 'myfont';
}
.content table tr td{
font-family: 'myfont';
}
.kolom{
    padding:10px;
    border-radius:10px;
    border:1px solid #999;
    max-width:100%;
    width:70%;
    display:block;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    
}
.kolom:hover, .kolom:focus{
    border:1px solid #333;
    width:100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.kolom2{
    padding:5px 10px;
    border-radius:10px;
    border:1px solid #999;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    
}
.kolom2:hover, .kolom2:focus{
    border:1px solid #333;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
textarea{
    border-radius:10px;
    border:1px solid #999;
}
.menuku{
    margin:0px;
    padding:0px;
}
.menuku li{
    list-style:none;
    display:inline-block;
    position:relative;
    margin-right:10px;
}
.menuku li a{
    display:block;
    border:1px solid #999;
    border-radius:5px;
    padding:10px 15px;
    background-color:rgba(50,80,255,0);
    color:#333;
    text-decoration:none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease   
}
.menuku li a:hover{
    background-color:rgba(50,80,255,1);
    color:#fff;
}
#printdata ul {
  list-style: none; /* Remove default bullets */
}
#printdata ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #ff6101; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.printbreak {
page-break-before: always;
}
#loadcal{
    margin:0 auto;
    background-color:#fff;
    position:relative; 
    margin-top:-25%; 
    padding:20px;display:block; 
    text-align:center; 
    border:1px solid #333; 
    border-radius:20px; 
    width:50%;
}
#infostatus{
    position:absolute; 
    background-color:#FFFFFF; 
    box-shadow:1px 1px 5px rgba(0,0,0,0.8); 
    border:1px solid #666666; 
    padding:5px; width:300px; 
    overflow:auto; 
    border-radius:10px;
    z-index:999; 
    font-size:80%;
    display:none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease 
}
@media (max-width:990px) {
    .page-container{
        max-width: calc( 100% - 30px );
    }
    .content {
        padding:15px;
        width:100%;
        max-width: calc( 100% - 30px );
    }
	.gridme2,.gridme3{
	margin-bottom:10px;
    display: block;
	text-align:justify;
	padding:0px;
	grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: 100%;
	}
	.gridme2 div{
		margin-bottom:10px;
		padding:0px;
		text-align:center;
	}
	.gridme3 div{
		margin-bottom:10px;
		padding:10px;
		text-align:center;
	}
	.gridme5{
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: auto auto;
	text-align:justify;
	}
	.gridme5 div a:after {
    top:-20px;
    opacity:1;
	}
	.gridbtn{
	position:relative;
	top:-10px;
	grid-column-gap: 0px;
    grid-row-gap: 0px;
	}
	.gridbtn div{
		margin-top:30px;
		padding:0px;
	}
	.blank-space{
	    margin:0px;
	    height:0px;
	    margin-top:30px;
	    margin-bottom:30px;
	}
	.line-grey{
	    margin:0px;
	    margin-top:30px;
	    margin-bottom:30px;
	}
	h1,h2,h3{
	    font-size:24px;
	}
    .sosicon a{
    margin:10px;
    font-size:40px;
    }
    .da-img img{
        width:150px;
        height:auto;
        left:0px;
        top:0px;
    }
    .footer .gridme3 div ul li{
    position:relative;
    margin-left:0px;
    list-style-type: none;
    }
    .content img{
        width:90%;
        max-width:100%;
    }
table{
    max-width:100%;
}
.title, .title-big{
	font-size:24px;
}
#loadcal{
    margin:0 auto;
    background-color:#fff;
    position:relative; 
    margin-top:-80%; 
    padding:20px;display:block; 
    text-align:center; 
    border:1px solid #333; 
    border-radius:20px; 
    width:50%;
}
}