*,html,body{
	font-family: 'Quicksand', sans-serif;
}

/*ROOT*/
.bg-green{background-color: var(--bs-green);}
.bg-dark-green{background-color: #035e35;}
.bg-light-green{background-color: #188352;}
.bg-light-gold{background-color: #e3cda3;}

.text-green{color: var(--bs-green);}
.text-dark-green{color: #035e35;}
.text-light-green{color: #188352;}
.text-light-gold{color: #e3cda3;}

.font-dancing{font-family: 'Dancing Script', sans-serif;}
.font-great{font-family: 'Great Vibes', sans-serif;}
.font-quicksand{font-family: 'Quicksand', sans-serif;}

/*CUSTOM*/
body.beranda{
  background-image: url(https://wallpapercave.com/wp/wp1862844.jpg);
  position: fixed;
  background-size: cover;
}

/*LOGIN CUSTOM*/
.preloader.out{
  opacity: 0;
  visibility: hidden;
  transition-delay:1s;
}
.loader{
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  transition-delay:0.8s;
}
.preloader.out .loader{
  transform: translate(-50%,-100%);
  -webkit-transform: translate(-50%,-100%);
  opacity: 0;
}
.preloader.out .loader:before{
  border-color:#fff;
  transition-delay:0.2s;
}
.loader img{
  position: relative;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
}
.loader:before{
  content: "";
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  width: 150px;
  height: 150px;
  background:#222;
  border:5px solid rgba(255,255,255,0.1);
  border-top:5px solid #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  animation:preloaderAnimation 1s linear infinite;
  -webkit-animation:preloaderAnimation 1s linear infinite;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
}
@keyframes preloaderAnimation{
  0%{transform: translate(-50%,-50%) rotate(0deg);}
  100%{transform: translate(-50%,-50%) rotate(360deg);}
}
@-webkit-keyframes preloaderAnimation{
  0%{-webkit-transform: translate(-50%,-50%) rotate(0deg);}
  100%{-webkit-transform: translate(-50%,-50%) rotate(360deg);}
}
#intro-video-container{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#intro-video-container .enter-btn{
  display: inline-block;
  padding:10px 15px;
  border-radius: 50px;
  color:#fff;
  font-weight: bold;
  font-size: 11px;
  z-index: 999;
  background:#c0392b;
  text-decoration: none;
  border:2px solid #fff;
}
#intro-video-container:before{
  content: "";
  position: fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.4);
  z-index: 99;
  overflow: auto;
}
#intro-video{
  position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index:-1;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}
#intro-video-container .caption{
  position: absolute;
  top:50px;
  left: 50%;
  color:#fff;
  z-index: 99;
  width: 780px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  text-align: center;
}
#intro-video-container .caption h2{
  font-weight: bold;
  font-size:60px;
  margin:0;
}
#intro-video-container .caption p{
  font-size:24px;
  font-weight: 200;
}
.intro-searchform{
  width: 400px;
  max-width: 100%;
  margin:0 auto 30px;
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(255,255,255,0.8);
  border-radius: 100px;
  overflow: hidden;
}
.intro-searchform .form-control{
  border:none;
  background:none;
  color:#fff;
  font-weight: bold;
}
.intro-searchform .btn{
  border-radius: 50%!important;
  padding:0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin:2px;
}
.cpanel{
  list-style: none;
  padding:0;
  text-align: center;
}
.cpanel > li{
  display: inline-block;
  height: 130px;
}
.cpanel > li:nth-child(8n+1){
}
.cpanel-item{
  text-align: center;
  display: block;
  margin:0 10px -10px;
  position: relative;
}
.cpanel-item:hover{
  z-index: 10;
}
.cpanel-item .icon{
  position: relative;
  width: 95px;
  height: 95px;
  display: block;
}
.cpanel-item .icon img{
  height: 55px;
  width: auto;
  position: absolute;
  top:60%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}
.cpanel-item .icon:before{
  content: "";
  display: block;
  width: 95px;
  height: 95px;
  background:rgba(255,255,255,0.2);
  position: absolute;
  top:15px;
  left:0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-radius: 30px;
}
.cpanel-item .icon:hover:before{
  background:#c0392b;
  opacity: 1;
}
.cpanel-item .title{
  white-space: nowrap;
  display: inline-block;
  background:#fff;
  color:#333;
  padding:2px 15px;
  border-radius: 20px;
  text-transform: uppercase;
  font-size:11px;
  font-weight: bold;
  position: absolute;
  bottom:0px;
  left:50%;
  transform: translate(-50%,0) scale(0);
  -webkit-transform: translate(-50%,0) scale(0);
  opacity: 0;
  transition: 300ms ease;
  -webkit-transition: 300ms ease;
}
.cpanel-item:hover .title{
  transform: translate(-50%,15px) scale(1);
  -webkit-transform: translate(-50%,15px) scale(1);
  opacity: 1;
}
.cpanel-item .dropdown-menu{
  top:auto;
  bottom:120%;
  left:50%;
  transform: translate(-50%,-30px);
  -webkit-transform: translate(-50%,-30px);
  border:none;
  border-radius: 10px;
  box-shadow: none;
  padding:15px 0;
  background:rgba(255,255,255,0.9);
  display: block!important;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  opacity: 0;
  max-width: 100%;
  min-width: 300px;
  visibility: hidden;
}
.cpanel-item.open .dropdown-menu{
  opacity: 1;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  visibility: visible;
}
.cpanel-item .dropdown-menu:before{
  content: "";
  position: absolute;
  bottom:-20px;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  border:10px solid transparent;
  border-top:10px solid rgba(255,255,255,0.9);
}
.cpanel-item .dropdown-menu li.heading{
  background:#c0392b;
  padding:10px 15px;
  margin:-15px 0 0px;
  border-radius: 5px 5px 0 0;
}
.cpanel-item .dropdown-menu li a{
  position: relative;
  padding:10px 15px;
  padding-left: 35px;
}
.cpanel-item .dropdown-menu li:nth-child(even) a{
  background:#ddd;
}
.cpanel-item .dropdown-menu li a:before{
  content: "\f046";
  font-family: "FontAwesome";
  position: absolute;
  top:12px;
  left:15px;
  color:#c0392b;

}
.cpanel.colorfull li:nth-child(1n) .icon:before{
  background:#b32331;
}
.cpanel.colorfull li:nth-child(2n) .icon:before{
  background:#ffc107;
}
.cpanel.colorfull li:nth-child(3n) .icon:before{
  background:#3498db;
}
.cpanel.colorfull li:nth-child(4n) .icon:before{
  background:#e74c3c;
}
.cpanel.colorfull li:nth-child(5n) .icon:before{
  background:#f39c12;
}
.cpanel.colorfull li:nth-child(6n) .icon:before{
  background:#34495e;
}
.cpanel.colorfull li:nth-child(7n) .icon:before{
  background:#8e44ad;
}

@media (max-width: 767px){
 
}

.caption .aksara{height:auto;width:70%}
/*#intro-video-container .caption h2{margin-top:-35px}*/
#intro-video-container .caption .logo img{max-height: 100px; margin: auto;}
.pelengkap-list{visibility:hidden;width:0;display:none}
.title-mobile{visibility:hidden;display:none}

@media (max-width:500px){
  #intro-video-container{overflow-y: auto;}
  #intro-video-container .caption{width: 100%; position: relative;}
  .pelengkap-list{visibility:visible}
  .perahu{visibility:hidden;width:0;display:none}
  .lambung-kapal{margin-right:0!important;padding-right:15px!important}
  .title-mobile{visibility:visible;display:block;left:5%;color:#fff;position:absolute;bottom:0;right:5%;font-size:0.75rem;text-transform:uppercase}
  .cpanel-item .icon img{height:40px;}
}

/*HEADER*/
h1.title{
	margin-bottom: 2.5px;
	color: #e3cda3;
}
p.cite{
	font-size: 12px;
	margin-bottom: 2.5px;
	color: #ffffff;
}

/*MENU*/
.navbar{
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
.navbar-dark .navbar-toggler{
	color: #e3cda3;
	border: none;
	padding: 0.25rem 0rem;
	cursor: pointer;
    width: 100%;
}
.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {
    color: #e3cda3;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}
.navbar-nav .nav-link {
    font-size: 14px;
}
.dropdown-toggle::after {
	vertical-align: 0.1em;
}

.dropdown-menu {
    font-size: 14px;
    color: #ffff;
    background-color: #035e35;
}
.dropdown-item{
	color: #ffffff;
}
.dropdown-item:focus,
.dropdown-item:hover{
	color:#e3cda3;
	background-color:transparent;
}

.logo-mobile{width: 80px; overflow: hidden; display: block; margin: auto;}

@media (min-width: 992px){
	.position-lg-absolute {position: absolute!important;}
	.logo-mobile{width: auto; overflow: visible; display: block; margin: auto;}
}

/*SLIDESHOW*/
#catatanDosen .carousel-caption, #Berita .carousel-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #fff;
    text-align: left;
    background-color: rgba(0,0,0,0.5);
}