@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;

}



#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: 1;

	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: 100vh;

}

#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: 9999;

}



.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:50px;

    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%;

	transform: translateY(-60%);

}

.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;

	}



	.penta5{

		width: 100%!important;

		-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: 480px) {

	#responsive-admin-menu {

		z-index: 1;

		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;

}

}