@font-face {
    font-family: dinprolight;
    src: url(../fonts/DINPro-Light_13935.ttf);
}
@font-face {
    font-family: dinprobold;
    src: url(../fonts/DINPro-Black_13933.ttf);
}
@font-face {
    font-family: dinpro;
    src: url(../fonts/DINPro-Regular_13937.ttf);
}
html, body,
.containers,
.cbp-fbscroller,
.cbp-fbscroller section {
	height: 100%;
}

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

/* background-attachment does the trick */
.cbp-fbscroller section {
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.no-touch .cbp-fbscroller section {
	background-attachment: fixed;
}

#fbsection1 {
	background-image: url(../images/1.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	transition: all 0.5s;
}

#fbsection1:hover{
    transition: background 1s;
	background-blend-mode: normal;
}

#fbsection2 {
	background-image: url(../images/2.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	transition: all 0.5s;
}

#fbsection2:hover{
    transition: background 1s;
	background-blend-mode: normal;
}

.slickslid{
	
	-top:50px;
}
@media screen and (min-width: 680px){
	.slickslid{
		display: none;
	}
}
#fbsection3 {
	background-color:#fff;
}

#fbsection4 {
	background-image: url(../images/4.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	transition: all 0.5s;
}

#fbsection4:hover{
    transition: background 1s;
	background-blend-mode: normal;
}
#fbsection5 {
	background-image: url(../images/5.png);
	padding:0px 80px;
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	transition: all 0.5s;
}

#fbsection5:hover{
    transition: background 1s;
	background-blend-mode: normal;
}


#fbsection6 {
	background-image: url(../images/about/1.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	transition: all 0.5s;
}

#fbsection6:hover{
    transition: background 1s;
	background-blend-mode: normal;
}


#fbsection7 {
	background-image: url(../images/about/2.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	transition: all 0.5s;
}

#fbsection7:hover{
    transition: background 1s;
	background-blend-mode: normal;
}

#fbsection8 {
	background-image: url(../images/about/3.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	transition: all 0.5s;
}

#fbsection8:hover{
    transition: background 1s;
	background-blend-mode: normal;
}

#fbsection9 {
	background-color:#fff;
}
#fbsection10 {
	background-image: url(../images/news.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	transition: all 0.5s;
}

#fbsection10:hover{
    transition: background 1s;
	background-blend-mode: normal;
}

.penta62 {
	padding-left:90px!important;
	width: 580px;
	height: 650px;
	background-color: #fff;
	-webkit-clip-path: polygon(7% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
	clip-path: polygon(7% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
	float:right;
	color:#858485;
	padding-top: -10px;
	font-family: dinpro;
}

#responsive-admin-menu {
	z-index: 999;
	float: left;
	width: 200px;
	height: 100%;
	position: fixed;
	overflow: hidden;
	left: 0px;

}

#content-wrapper {
	width: auto;
	margin-left: 200px;
}

#responsive-admin-menu #responsive-menu {
	height: 50px;
	display: none;
	line-height: 50px;
	cursor: pointer;
	color: #ffffff;
	text-indent: 10px;
}


#responsive-admin-menu #responsive-menu .menuicon {
	color: #ffffff;
	font-size: 24px;
	position: absolute;
	right: 10px;
	top: 0px;
}
#responsive-admin-menu #logo {
	background-position: -0px -36px;
	height: 90px;
  background-color: #063962;
  padding:10px;
}

/* Menu Styles */
#responsive-admin-menu #menu {
	opacity: 0.75;
	background-color: #000;
	width: 100%;
	min-height: 553px;
}
#responsive-admin-menu #menu a {
	font-size: 14px;
	font-weight: lighter; text-transform: uppercase;
	text-decoration: none;
	display: block;
	padding: 12px;
	color: #FFFFFF;
	position: relative;
	font-weight: 400;
	overflow: hidden;
}
#responsive-admin-menu #menu a:hover {
	color: #52535a;
	background-color:#fcfcfc;
}
#responsive-admin-menu #menu i {
	width: 16px;
	padding-right: 4px;
}
#responsive-admin-menu #menu div {
	display: none;
	width: 100%;
	background-color: #5c5d64;
	overflow: hidden;
}
#responsive-admin-menu #menu div a {
	color: #c0c0c0;
}
#responsive-admin-menu #menu div a:hover {
	color: #888888;
}
#responsive-admin-menu #menu a.submenu:before {
	font-family: FontAwesome;
	content: "\f054";
}
#responsive-admin-menu #menu a.downarrow:before {
	font-family: FontAwesome;
	content: "\f078";
}
#responsive-admin-menu #menu a.submenu:before {
	font-size: 14px;
	position: absolute;
	right: 15px;
	top: 17px;
}

.cbp-fbscroller a span{
	margin-left: 10px;
}

/*Penta Content*/
.penta {
	width: 550px;
	height: 280px;
	background: #063962;
	opacity: .75;
	padding-top: 30px;
	padding-left:80px;
	-webkit-clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
	float:right;
	color:#fff;
	padding-right: 20px;
	float:right;
    position:absolute;
    bottom:30px;
    right:0;
    clear:right;
}

.penta span{
	font-size:40px;
	font-family: dinprolight;
}

.penta b{
	font-family: dinprobold;
}

.penta p{
	line-height: 28px;
}

/*Penta2 Content*/
.penta2 {
	width: 460px;
	height: 230px;
	background: #063962;
	opacity: .75;
	margin-top: 350px;
	padding-top: 10px;
	padding-left:100px;
	-webkit-clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
	float:right;
    position:absolute;
    bottom:50px;
    right:0;
    clear:right;
	color:#fff;
	padding-right: 20px;
}

.penta2 span{
	font-size:32px;
	font-family: dinprolight;
}

.penta2 b{
	font-family: dinprobold;
}

.penta2 p{
	line-height: 26px;
}

.readmore{
	width: 175px;
	height: 84px;
	background-image: url("../images/bottom.png");
	margin-left: 250px;
    position:absolute;
    bottom:50px;
    cursor: pointer;
    z-index: 2;
}

.readmore a{
	color: #fff;
	position: absolute;
	margin-left: 30%;
	top: 50%;
	transform: translateY(-50%);
}
.readmore a:hover{
	color: #fff;
}

.nopadding {
    padding: 0!important;
    margin: 0!important
}

.rowy{
	margin-left: 250px;
    position:fixed;
    bottom:20px;
    cursor: pointer;
    z-index: 9999;
}
[class*="menuhis"] {
	width: 149px;
	height: 84px;
	margin: 0 auto;
	color: #fff;
	float: left;
	text-align: center!important;
	font-size: 14px;
	font-family: dinprolight;
	display: flex;
	align-items: center;
	vertical-align: middle;
	text-align: center;
	position: relative;

    align-items: center;
    justify-content: center;
}

[class*="menuhis"]:hover{
	color: #fff;
}
.menuhis1{
	background-image: url("../images/about/menu1.png");

}
.menuhis2{
	background-image: url("../images/about/menu2.png");
}
.menuhis3{
	background-image: url("../images/about/menu3.png");
}
.menuhis4{
	background-image: url("../images/about/menu4.png");
}
/*Penta2 Content*/
.penta3 {
	background-image: url(../images/3.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	-webkit-clip-path: polygon(90% 0, 100% 45%, 90% 100%, 0 100%, 0 0);
	clip-path: polygon(90% 0, 100% 45%, 90% 100%, 0 100%, 0 0);
	height: 670px;
	transition: all 0.5s;
	color:#fff;

	position: absolute!important;
}


.penta3:hover{
    transition: background 1s;
	background-blend-mode: normal;
}
.penta4 {
	width:100%;
	background-color: #FFF;
	-webkit-clip-path: polygon(80% 0, 100% 45%, 90% 100%, 0 100%, 0 0);
	clip-path: polygon(80% 0, 100% 45%, 90% 100%, 0 100%, 0 0);
	height: 690px;
	padding:10px 40px!important;
	position: absolute;
}

/*Penta2 Content*/
.penta42 {
	width: 580px;
	height: 470px;
	background: #063962;
	opacity: .75;
	margin-top: 150px;
	padding-top: 10px;
	padding-left:80px;
	-webkit-clip-path: polygon(7% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
	clip-path: polygon(7% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
	float:right;
	color:#fff;
	padding-right: 20px;
	font-family: dinpro;
}


.penta4 h3{
	color:#858485;
	font-family: dinprolight;
}

.penta4 .news{
	margin-top:20px;
	font-family: dinpro;
	padding-right: 40px;
}

.penta4 .news p a{
	color:#858485;
	font-style: italic;
}

.news h5{
	font-family: dinprobold;
	color: #858485;
}

.seemore{
	color:#858485;
	font-family: dinprolight;
	float: right;
	padding-right: 40px!important;
	margin-top: 20px;
}



.penta5 {
	-webkit-clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0 100%, 0 0);
	clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0 100%, 0 0);
	height: 390px;
	width: 490px;
	margin-left: 200px;
	position: absolute;
	top: 18%;
}
.penta52 {
	-webkit-clip-path: polygon(7% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
	clip-path: polygon(7% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
	height: 300px;
	width: 490px;
	background: rgba(6,57,98,0.75);
	float: right;
	color: #fff;
	font-family: dinpro;
	transform: translateY(-74%);
	padding: 40px 40px 0px 80px;
	line-height: 25px;
	top: 60%;
	position: relative;
	font-size: 16px;
}
.sosmed{
	margin-top: 30px;
}
.sosmed img{
	margin-right: 10px;
	width:30px;
}

.penta62 p{
}


/*Penta Content*/
.penta7 {
	width: 420px;
	height: 260px;
	background: #063962;
	opacity: .75;
	padding-top: 30px;
	padding-left:60px;
	-webkit-clip-path: polygon(7% 0, 100% 0, 100% 100%, 7% 100%, 0 50%);
	clip-path: polygon(7% 0, 100% 0, 100% 100%, 7% 100%, 0 50%);
	float:right;
	color:#fff;
	padding-right: 20px;
	float:right;
    position:absolute;
    bottom:130px;
    right:0;
    clear:right;
}

.penta7 span{
	font-size:40px;
	font-family: dinprolight;
}

.penta7 b{
	font-family: dinprobold;
}

.penta7 p{
	font-family: dinprolight;
	font-size:16px;
	line-height: 28px;
}



.penta8 {
	width: 100%;
	min-height: 520px;
	background: #063962;
	margin-top: 150px;
	padding-top: 30px;
	padding-left:80px;
	-webkit-clip-path: polygon(7% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
	clip-path: polygon(7% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
	float:right;
    position:relative;
    bottom:120px;
    right:0;
    clear:right;
	color:#fff;
	padding-right: 20px;
	font-family: dinprolight;
	background: rgba(6,57,98,0.75);
}
.profil{
	clear: both;
	position: relative;
	margin-bottom: 20px;
	font-size: 20px;
}
.penta8 .profil img{
	width: 150px;
}
.penta8 .profil .detailprofil{
   position: absolute;
    bottom: 0;
    left: 160px;
}
.map{
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		transition: all 0.2s ease-in-out;
}

.col-centered {
    display:inline-block;
    float:none!important;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.management img{
	height: 100px;
    display: block;
}
.management b{
	font-size:12px;
}

.management b span{
	font-style: italic;
}



.penta9 {
	background-image: url(../images/about/4.png);
	background-color: #FFF;
	background-blend-mode: luminosity, normal;
	-webkit-clip-path: polygon(90% 0, 100% 45%, 90% 100%, 0 100%, 0 0);
	clip-path: polygon(90% 0, 100% 45%, 90% 100%, 0 100%, 0 0);
	height: 670px;
	transition: all 0.5s;
	color:#fff;

	position: absolute!important;
}


.penta9:hover{
    transition: background 1s;
	background-blend-mode: normal;
}

.brand img{
	padding-bottom: 50px;
	width: 100%;
}


.filters{
	border-top: 1px solid #858485;
	width: 90%;
	padding-top: 6px;
}
.filters span{
padding: 0px 10px;
}

.berita{
	padding-bottom: 15px;
	clear: both;
	display: block;
	color: #858485;
}

.filter-capt{
	background-color: #858485;
	color: #fff;
	margin-top: 10px;
	text-align: center;
	padding: 0px 20px;
}

.berita:hover{
	font-weight: bolder!important;
	text-decoration: none;
	color: #858485;
}

/* Menu Styles */

@media screen and (min-width: 1200px){
.bodynews{
	overflow: hidden;
}

}
@media screen and (max-width: 1200px){
	.sub-news{
		padding: 0;
	}
	#fbsection4{
		height:auto;
	}

}
@media screen and (max-width: 960px) {
	#responsive-admin-menu #responsive-menu {
		display: none;
	}
	#responsive-admin-menu #menu a span {
		display: inline-block;
	}
}
@media screen and (max-width: 768px){
	.penta3{
		width: 200px;
		-webkit-clip-path: none;
	}
	.solusi{
		margin-left: 200px;
		position: absolute;
	}
	.penta4{
		-webkit-clip-path: none;
	}
	.penta42{
		margin-top: 0;
		-webkit-clip-path: none;
		float: none;
		width: 100%;
		padding:20px;
		height: auto;
	}
	/*#peta{
		margin-top:-100px!important;
	}*/

	.penta5{
		width: 100%!important;
		height: 250px;
		-webkit-clip-path:none;
		margin: 0;
		padding:0;
		position: relative;

	}
	.penta52{
		width: 100%!important;
		-webkit-clip-path:none;
		margin:0;

	background: rgba(6,57,98,1);
		position: relative;
	}

	#fbsection5{
		padding:0;
	}
}
@media screen and (min-width: 480px){
	.offset{
		margin-left: 200px!important;
	}

	.subpenta4{
		width: 80%;
	}

}
@media screen and (max-width: 680px) {
	.readmore{
		padding: 0;
	}
	.readmore a{
		margin-left:-20%;
		padding: 0;
	}
	#responsive-admin-menu {
		z-index: 999;
		min-height: 50px;
		float: left;
		width: 100%;
		background-color: #404040;
		height: auto;
		position: fixed;
		top: 0;
	}
	#responsive-admin-menu #logo {
		display: none;
	}
	#responsive-admin-menu #menu a span {
		display: inline-block;
	}
	#content-wrapper {
		margin-left: 0;
		padding-top: 60px;
	}
	#responsive-admin-menu #responsive-menu {
		display: block;
	}
	#responsive-admin-menu #menu {
		min-height: 220px;
		display: none;
	}
	#responsive-admin-menu #menu a {
		color: #FFFFFF;
	}
	.penta{
		-webkit-clip-path: none;
		width: 100%;
		height: 100%;
		margin-top: 50px;
		padding-top: 20%;
		padding-left:70px;
		padding-right:70px;
		bottom: 0px;
		position: absolute!important;
	}
	.penta2{
		-webkit-clip-path: none;
		width: 100%;
		height: 100%;
		margin-top: 0px;
		padding-top: 30%;
		padding-left:30px;
		padding-right:30px;
		bottom: 0px;
	}
	#responsive-admin-menu #menu a.submenu:before {
		font-size: 14px;
		right: 15px;
	}
	.penta3{
		display: none;
	}

	.solusi{
		margin: 0;
		padding: 30px!important;
	}
	.penta4{
		width: 100%;
	}

	.readmore{
		margin:0px auto;
		text-align: center;
	}

.management img{
	width: 80px;
    white-space: nowrap;
}
}