body {
	background: #f9f9f9 !important;
}

header {
	margin: 0; padding: 10px 0;
	background: transparent !important;
	position: absolute;
	top: 0;
	left: 0; 
	right: 0;
	z-index: 100;
	height: 110px !important;
}
header .navbar {
	height: auto;
}
header .navbar-link .navbar-item {
	color: #fff;
	display: initial;
}
header .navbar-link:hover {
	
}
header .navbar-brand img {
	max-height: 30px !important;
}

header .navbar-link:hover .navbar-item {
	color: #1E90FF;
	padding-bottom: 10px;
	border-bottom: 1px #1E90FF solid;
}
header .navbar-link:hover i {
	color: #1E90FF !important;
}
section {
	display: block;
}
.box-content {
	background: #fff;
	box-shadow: 0 0 1rem 0 rgba(53, 64, 82, 0.1);
}
.box-header {
	overflow: hidden;
}

/* ====================================================================================================== 
 * INDEX PAGE
*/
.app-index .btn-success {
	background-image: linear-gradient(#41C51D, #359C19);
	transition: .5s;
	border-radius: 25px;
	padding: 0px 25px;
}
.app-index .btn-success:hover {
	background-image: linear-gradient(#359C19, #41C51D);
}

.app-index section.banner-hero {
	margin: 0;
	padding: 0;
	background: url('../../img/-/banner/b-0.png') no-repeat scroll center center;
	background-size: cover;
	height: 700px;
}

.banner-hero .content-hero {
	margin: 0;
	padding: 0;
	position: relative;
	margin-top: 250px;
	margin-bottom: 150px;
}

.banner-hero .content-hero h1 {
	margin: 0;
	padding: 0;
	font-size: 50px;
	color: #fff;
}

.banner-hero .content-hero h4 {
	margin: 0;
	padding: 0;
	font-size: 25px;
	color: #fff;
}

.banner-hero .content-hero p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #fff;
}

.app-index .banner-hero .col-6 .slider {
	margin: 175px 0px;
	padding: 0;
	background: url('../../img/-/banner/draw-1.png') no-repeat scroll center center;
	background-size: cover;
	height: 450px;
}



/* WE Section -------------------------------------------------------------------------- */
.app-index .we-section-menu {
	background: #1E90FF;
	height: 650px;
	margin-top: 20px;
}
.app-index .we-section-menu .nav-link {
	color: #B6DAFE;
	font-size: 20px;
	transition: .5s;
}
.app-index .we-section-menu .nav-link i {
	color: #B6DAFE;
	padding-right: 15px;
	transition: .5s;
}
.app-index .we-section-menu .nav-link::after {
	content: " ";
	border-right: 15px #1E90FF inset;
	border-top: 15px #1E90FF solid;
	border-bottom: 15px #1E90FF inset;
	float: right;
	margin-right: -30px;
	transition: .3s;
}
.app-index .we-section-menu .nav-link:hover::after {
	border-right: 15px #f5f5f5 inset;
}
.app-index .we-section-menu .nav-link:hover {
	color: #fff;
}
.app-index .we-section-menu .nav-link:hover i {
	color: #fff;
}

.app-index .we-section .we-frm-detile i {
	font-size: 50px;
	color: #1E90FF;
	margin: 0; padding: 0;
}
.app-index .we-section .we-frm-detile h3 {
	font-size: 30px;
	color: #1E90FF;
	margin: 0; padding: 0;
}
.app-index .we-section .we-frm-detile span {
	line-height: 30px;
}

/*.app-index .we-section-menu::before {
	content: '';
	background: url('../../img/banner/draw-1.png') no-repeat scroll center center;
	width: 300px;
	height: 300px;
}*/



/* PUB Section ------------------------------------------------------------------------- */
.app-index .pub-section {
	background: url('../../img/-/banner/b-2.jpg') no-repeat scroll center center;
	background-size: cover;
	margin-top: -75px;
}
.app-index .pub-section .row {
	justify-content: flex-end;
}
.app-index .pub-section .row .card {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
	padding: 15px !important;
	transition: .3s;
}
.app-index .pub-section .row .card:hover {
	transform: scale(1.1);
	background: rgba(255, 255, 255, .9) !important;
	cursor: pointer;
}
.app-index .pub-section .row .card img {
	margin-top: 20px;
	max-width: 50px;
}


/* STR Section ------------------------------------------------------------------------- */
.app-index .str-section {
	background: #F5FAFF;
}
.app-index .str-section .str-product {
	background: #fff;
	height: 385px;
	transition: .3s;
	border: 0px solid;
	border-radius: 10px;
	box-sizing: border-box;
	overflow: hidden;
}
.app-index .str-section .str-product:hover {
	box-shadow:  0 0 1rem 0 rgba(53, 64, 82, 0.1);
}
.app-index .str-head {
	text-align: center;
}
.app-index .str-head i {
	font-size: 50px;
	color: #1E90FF;
}
.app-index .str-body {
	text-align: center;
}
.app-index .str-body .product-name {
	font-size: 20px;
	color: #1E90FF;
}
.app-index .str-body .str-deskripsi {
	height: 160px;
}
.app-index .str-section .title {
	text-align: center;
}
.app-index .str-section .title-head {
	font-size: 35px;
	color: #1E85E9;
}
.app-index .str-section p {
	font-size: 25px;
	color: #1E85E9;
	margin: 0; padding: 0;
}
.app-index .str-section .str-body a {
	display: block;
	margin-bottom: 10px;
}
.app-index .str-section .str-body .url-detile {
	color: #1E85E9;
	font-size: 13px;
}
.app-index .str-section .str-body .url-detile:hover {
	color: #40D62C;
}

/* CT Section / global ------------------------------------------------------------------- */
.ct-suport {
	background: url('../../img/-/banner/b-4.jpg') no-repeat scroll center center;
	background-size: cover;
}
.ct-suport .ct-suport-dt i {
	color: #fff;
}
.ct-suport .ct-suport-dt p {
	color: #fff;
	line-height: 30px;
}
.ct-suport .ct-suport-dt h3 {
	color: #fff;
	font-size: 25px;
}

/* ======================================================================================================
 * PRODUCT
*/
.app-product section.banner-hero {
	margin: 0;
	padding: 0;
	background: url('../../img/-/banner/b-0.png') no-repeat scroll center center;
	background-size: cover;
}
.app-product .banner-hero .content-hero {
	margin: 0;
	padding: 0;
	position: relative;
	margin-top: 250px;
	margin-bottom: 150px;
}

.app-product .banner-hero .content-hero h1 {
	margin: 0;
	padding: 0;
	font-size: 50px;
	color: #fff;
}

.app-product .banner-hero .content-hero h4 {
	margin: 0;
	padding: 0;
	font-size: 25px;
	color: #fff;
}

.app-product .banner-hero .content-hero p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #fff;
}

.app-product .content-detile {
	background: #fff;
}
.app-product .content-detile h1 {
	color: #1E85E9;
	text-align: center;
	font-size: 35px;
}
.app-product .content-detile h1 i {
	color: #1E85E9;
	font-size: 35px;
}
.app-product .content-detile p {
	color: #1E85E9;
	text-align: center;
	font-size: 20px;
}

.app-product .content-detile table {
	font-size: 13px;
}
.app-product .content-detile table tr td {
	padding: 15px;
}
.app-product .content-detile table tr th {
	padding: 20px;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}
.app-product .content-detile table tr th:nth-child(1) {
	background: #56A3ED;
	color: #fff;
	font-weight: bold;
	width: 20%;
}
.app-product .content-detile table tr td:nth-child(1) {
	background: #56A3ED;
	color: #fff;
	font-weight: bold;
	width: 25%;
}
.app-product .content-detile table tr td:nth-child(2), .app-product .content-detile table tr td:nth-child(3) {
	text-align: center;
	width: 10%;
}
.app-product .content-detile table tr td:nth-child(2) i, .app-product .content-detile table tr td:nth-child(3) i{
	color: #1EC81E;
}
.app-product .expand i {
	float: right;
}
.app-product .expand-group {
	overflow: auto;
}
.app-product .expand-group::-webkit-scrollbar {
	width: 0px;
}
.app-product .expand-group::-webkit-scrollbar-track {
	background: transparent;
}

/* ======================================================================================================
 * Login
*/
.app-login section.banner-hero {
	margin: 0;
	padding: 0;
	background: url('../../img/-/banner/b-0.png') no-repeat scroll center center;
	background-size: cover;
}
.app-login .banner-hero .content-hero {
	margin: 0;
	padding: 0;
	position: relative;
	margin-top: 250px;
	margin-bottom: 150px;
}
.app-login .banner-hero form label, .app-login .banner-hero form i, .app-login .banner-hero form legend {
	color: #fff;
}
.app-login .banner-hero form .input-control {
	color: #fff;
}
.app-login .banner-hero form .input-control:focus {
	background: rgba(255, 255, 255, .8);
	color: #404040;
}

/* ======================================================================================================
 * Blog
*/
.app-blog section.banner-hero {
	margin: 0;
	padding: 0;
	background: url('../../img/-/banner/b-0.png') no-repeat scroll center center;
	background-size: cover;
}
.app-blog .banner-hero .content-hero {
	margin: 0;
	padding: 0;
	position: relative;
	margin-top: 250px;
	margin-bottom: 150px;
}
.app-blog .banner-hero form label, .app-blog .banner-hero form i, .app-blog .banner-hero form legend {
	color: #fff;
}
.app-blog .banner-hero form .input-control {
	color: #fff;
}
.app-blog .banner-hero form .input-control:focus {
	background: rgba(255, 255, 255, .8);
	color: #404040;
}

/*.app-blog .grid-blog {
	display: inline-block;
}*/

.app-blog .grid-blog .col-1, 
.app-blog .grid-blog .col-2, 
.app-blog .grid-blog .col-3, 
.app-blog .grid-blog .col-4, 
.app-blog .grid-blog .col-5, 
.app-blog .grid-blog .col-6, 
.app-blog .grid-blog .col-7, 
.app-blog .grid-blog .col-8, 
.app-blog .grid-blog .col-9, 
.app-blog .grid-blog .col-10, 
.app-blog .grid-blog .col-11, 
.app-blog .grid-blog .col-12 {
	display: inline-block;
	margin-bottom: 30px;
	flex-basis: auto;
}
.app-blog .content-blog {
	background: #fff;
	border-radius: 5px;
}

.app-blog .content-blog:hover {
	box-shadow: 0 0 1rem 0 rgba(53, 64, 82, 0.1);
}

.app-blog .content-blog .blog-title {
	width: 100%;
	overflow: hidden;
	word-wrap: break-word;
	text-overflow: clip;
	height: 75px;
}
.app-blog .content-blog .blog-thumbnail {
	width: 100%;
	overflow: hidden;
	height: 175px;
}
.app-blog .content-blog .blog-thumbnail img {
	width: 100%;
}
.app-blog .content-blog .blog-footer {
	width: 100%;
}

/* ======================================================================================================
 * FOOTER
*/
.footer {
	background: #171717;
	color: #f5f5f5 !important;
}
.footer-licence {
	background: #171717;
}
.footer-licence .block-licence {
	color: #f5f5f5 !important;
	background: #171717;
	width: 100%;
	text-align: center;
}
.footer-data .footer-head {
	font-size: 15px;
	color: #ddd;
	margin-bottom: 25px;
}
.footer-data .footer-head .footer-head-title {
	font-size: 30px;
	color: #fff;
}
.footer-data .footer-head p {
	font-size: 15px;
	margin: 0; padding: 0;
	line-height: 25px;
	color: #fff;
}
.footer-data .footer-body .list-dt {
	font-size: 15px;
	color: #ccc;
	display: block;
	margin-bottom: 15px;
}
.footer-data .footer-body .footer-sosmed a i {
	font-size: 20px;
	margin-right: 10px;
	color: #fff;
}
.footer-data .footer-body .list-dt:hover {
	color: #1E90FF;
}
.footer .footer-right {
	background: #1E90FF;
	margin-top: -50px;
}
.footer-payment {
	margin: 0; padding: 15px;
	background: #111;
}
.footer-payment .payment img {
	height: 50px;
}