body,h1,h2,h3,h4,h5,h6{font-family:roboto !important; }
footer,header,.featured{ background-color:#01cff8 !important;}
.slick-slide a,.NUBreakBox,
#mySliders .carousel-indicators,
#mySlider .carousel-indicators,
.laptop, .laptop:after,#toTop,
.boxLists > .box-footer.p-1,
.boxLists > .box-footer.p-0 > .btn,
.boxLists > .box-body a span.label,
.postSlide,#myGalery .carousel-caption,
.pagerBtn .btn-lg,
.imageUploder,form:after,form #proses .progress-bar{ background-color:#0589a2 !important;}
::-webkit-scrollbar-thumb{ background-color:#0589a2 !important;}
.slick-slide a small,header nav ul li a:hover,header nav ul li a.active,header h3,header h6,header h5,
header section ul.menusys li a,header nav ul li:hover > a,header nav ul li a.active,
header section ul#menuheader li a:hover,header section ul#menuheader > li:hover > a,
.boxLists > .box-body a h5,
#mySlider .carousel-indicators li.active,
article.panel a h4,
.esoftHMDInput,.esoftHMDInputBox label strong i,form #proses .status,.judulPost{color:#0589a2 !important;}
.container > .pad .box .box-header,
.esoftHMDInput:focus,form #proses{border-color:#0589a2 !important;} 

#mySlider .carousel-inner .item .carousel-caption{ background-color:rgba(5,137,162,.71) !important;}
#myFeatured .carousel-inner .item .carousel-caption:after,#myFeatureds .carousel-inner .item .carousel-caption:after{
	background: -webkit-linear-gradient(rgba(5,137,162,1), rgba(5,137,162,.0),rgba(5,137,162,.91),rgba(5,137,162,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(5,137,162,1), rgba(5,137,162,.0),rgba(5,137,162,.91),rgba(5,137,162,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(5,137,162,1), rgba(5,137,162,.0),rgba(5,137,162,.91),rgba(5,137,162,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(5,137,162,1), rgba(5,137,162,.0),rgba(5,137,162,.91),rgba(5,137,162,1)); /* Standard syntax */
}

header,#formSearch{color:#fff !important; background-color: #0589a2 !important; box-shadow: 0 0 21px 3px #005161; }
footer{background-color: #0c1110 !important;}
header > .logo a .brand{margin:19px 11px 0 11px; height: 77px; }
header > .logo > a::after{position: absolute; top: 41px; left: 21px; bottom: 11px; width: 45px; border-radius: 50%; background-color:#005161; box-shadow: 0 0 21px 21px #005161; display: block; content: ''; z-index: 0; transition: all .21s ease-in;}
header > .logo a h6{ min-height: 15px; font-size: 0; opacity: 0; font-weight: bold; font-family: georgia !important; text-indent: 5px;}
header > .logo a h6 small{font-family: Roboto;}
header > .logo a h1{ font-size:13px; font-weight: bold; line-height: 13px; letter-spacing: 9.9px; font-family: Montserrat !important; margin: 33px 0 0 0; text-indent: 5px;}
header > .logo a h2{ font-size:29px; line-height: 29px; font-family: Montserrat !important; font-weight: bold;}
header > .logo a h3{ font-size:13px; font-weight: bold; line-height: 15px; margin: 29px 0 3px 0;}
header > .logo a h4{ padding-left: 99px; font-size:17px; font-weight: bold; text-transform: uppercase; max-height: 58px; overflow: hidden; bottom: 0px; white-space: unset; font-family: roboto !important; line-height: 17px; margin: 0; }
header > .logo a h4 b{display: block; margin: 0; padding: 0; height: 21px; opacity: 1; font-size:13px; font-weight:normal; text-transform: uppercase; line-height: 21px; transition: all ease-out .99s; font-family: Montserrat !important;}
header > .logo a h4 span{display: block; padding-left: 11px; position: relative;}
header > .logo a h4 span::before,header > .logo a h4 span::after{position: absolute; border-radius: 1px; left: 0px; top: 0; width: 7px; height: 7px; display: block; content: ''; background-color: #fc0;}
header > .logo a h4 span::after{background-color: #fff; top: 9px; left: -7px;}
header > .logo a h5{ font-size:11px; font-weight: bold; line-height: 11px; }

header.top > .logo a .brand{height:41px; margin:51px 3px 0 9px;}
header.top > .logo > a::after{top: 65px; width: 11px;}
header.top > .logo a h6{ opacity:1; margin-top: 66px; font-size: 21px; color: #fc0 !important;}
header.top > .logo a h6 small{font-size: 71%; color: #fff; display: inline-block; font-family: inherit; opacity: 1; padding-left:0; }
header.top > .logo a h1,header.top > .logo a h2,header.top > .logo a h3,header.top > .logo a h4,header.top > .logo a h4 b,header.top > .logo a h5{ opacity:0; margin: 0; padding: 0; height: 0; font-size: 0;}
header.top > .logo a h4 b{ margin-left:99px;}

footer .contact h3{font-size:9px; height: 9px; letter-spacing: 7.1px; font-family: verdana !important; text-indent: 3px;}
footer .contact h6{font-size:21px; height: 21px; font-family: Georgia !important; font-weight: bold;}
body > footer > .footer{ background-color: #005161;}

.pagerBtn .btn{line-height: 41px; padding:0 5px; text-align: center; height: 41px; min-width: 41px;}
.pagerBtn .btn .label{margin: 0; padding: 0;}
.pagerBtn .btn.active{margin-bottom: -7px; height: 55px; width: 55px; line-height: 55px;}

@media screen and (max-width: 786px){
header nav > ul{background-color:rgba(0, 75, 90, 0.97); }
}
.container {
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 768px) {
    .container {
        width: 97% !important;
        max-width:97% !important;
    }
}

@media (min-width: 992px) {
    .container {
        width: 97% !important;
        max-width:97% !important;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 97% !important;
        max-width:97% !important;
    }
}

@media (min-width: 1400px) {
    .container {
        width:1393px !important;
        max-width:1393px !important;
    }
}

@media (min-width: 1600px) {
    .container {
        width:1595px !important;
        max-width:1595px !important;
    }
}

@media (min-width: 1790px) {
    .container {
        width:1786px !important;
        max-width:1786px !important;
    }
}