@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("fontawesome-4.6.3.min.css");
@import url("custom.flexslider.css");
@import url("framework.css");


/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1, .row1 a{}
.row2{border-bottom:1px solid;}
.row3, .row3 a{}
.row4, .row4 a{}
.row5{}



/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:0;}

/* Content */
.container .content{}

.sectiontitle{display:block; margin-bottom:80px;}
.sectiontitle *{margin:0;}





/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:80px 0;}

#footer .heading{margin-bottom:50px; font-size:1.2rem;}

#footer nav{margin-bottom:15px; text-transform:uppercase;}
#footer nav ul{}
#footer nav ul li{display:inline-block; margin-right:15px;}
#footer nav ul li:last-child{margin-right:0;}

#footer .linklist li{display:block; margin-bottom:12px; padding:0 0 12px 0; border-bottom:1px solid;}
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
#footer .linklist li, #footer .linklist li::after{clear:both;}


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:20px 0;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}





/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{ height: 69px; margin:0; padding:0; list-style:none; text-align: right; vertical-align: middle; display:flex; justify-content: right; align-items: center;  }
.faico li{ display:inline-block; margin:0 0 0 80px; padding:0;}
.faico li:last-child{margin-right:0;}


.fa {
 
    transition: color 0.2s ease;
  }
  
  /* Add hover effect */
.fa:hover {
    /* Change color on hover */
    color: #217ace ;
  }

/* Font Address
--------------------------------------------------------------------------------------------------------------- */
#navaddress{margin:0; padding:0; list-style:none; }
#navaddress li{margin:0 10px 0 10px; padding:0; line-height:normal;}
#navaddress li:last-child{margin:0;}
#navaddress li a{color:inherit;}
#navaddress .active a, #navaddress a:hover, #navaddress li:hover > a{color:#eeb655; background-color:inherit;}
#navaddress li li a, #navaddress .active li a{color:#FFFFFF; background-color:rgba(130,22,3,.55); border-color:rgba(0,0,0,.6);}
#navaddress li li:hover > a, #navaddress .active .active > a{color:#FFFFFF; background-color:#eeb655;}
/* ------------------------------------------------------------------------------------------------------------ */


/* Font Nav Footer
--------------------------------------------------------------------------------------------------------------- */
.navfooter{margin:0; padding:0; list-style:none; }
.navfooter li{display:inline-block; margin:0 10px 0 10px; padding:0; line-height:1.6em; }
.navfooter li:last-child{margin-right:0;}
.navfooter a{ color: #F4F4F4; }
.navfooter a:hover{color:#eeb655;}
/* ------------------------------------------------------------------------------------------------------------ */
.clear_space { margin: 0 auto; padding: 0; }


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#474747; background-color:#FFFFFF;}
a{color:#eeb655;}
a:active, a:focus{background:transparent;font-weight: bold;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#F4F4F4;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#eeb655;}
.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}
.overlay.coloured::after{background-color:rgba(130,22,3,.55);/* #821603 */}

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#eeb655; border-color:#eeb655;}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}


/* Flexslider */
.flex-direction-nav a, .flex-direction-nav .flex-disabled:hover{color:#FFFFFF;}
.flex-direction-nav a:hover{color:#eeb655;}


/* Rows */
.row0, .row0 a{}
.row1{color:#000000; background-color:#FFFFFF; width: 100vmax}

.row2{ min-height: 450px; height: auto; padding: 140px 0 140px 0; margin: 0 auto;  }
.row_client{ margin: 0 auto;  }

.row3{  color:#FFFFFF; 
		background: url('../images/bg/bg_footer.jpg') no-repeat center center/cover, #263957;
		background-blend-mode: soft-light  ;
		min-height: 484px; height: 100%; padding: 105px 0 76px 0;}

.row4{color:#FFFFFF; background-color:#162f57; min-height: 144px; height: 100%; padding: 45px 150px 0 150px;}
.row4_hr {
	border-bottom: 1px solid #555754;
	margin: 20px 0 0 0;display:inline-block;
  }

.row5{color:#FFFFFF; background-color:#162f57; min-height: 151px; height: 100%; padding: 56px 150px 80px 150px; }


/* Header */


  /* responsive menu header */
  header{display:block; margin:0; padding:0;}
  .logo{
	  float: left;
	  max-width: 219px;
	  max-height: 69px;
	margin-bottom: 20px;
  }
  
  /* header */
  
  .header {
	position: relative;
	width: 100%;
	z-index: 3;
  }
  
  .header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	font-family:"Montserrat", Verdana, Geneva, Tahoma, sans-serif;
  }
  
  .header li a {
	display: block;
	color: #162f57;
	font-weight: 500;
	text-decoration: none;
	padding: 10px 10px;
	/*
	border-right: 1px solid #f4f4f4; */
	border-bottom: 1px solid #f4f4f4;
	text-decoration: none;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
	color: #eeb655;
	background-color: #f3f5f8;
  
  }
  
  .header .logo {
	display: block;
	float: left;
	text-decoration: none;
  }
  
  /* menu */
  
  .header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  .header .menu-icon {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 28px 20px;
	position: relative;
	user-select: none;
  }
  
  .header .menu-icon .navicon {
	background: #162f57;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
	background: #162f57;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
  }
  
  .header .menu-icon .navicon:before {
	top: 5px;
  }
  
  .header .menu-icon .navicon:after {
	top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
	display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
	max-height: 200px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;
  }
  
  /* 48em = 768px Posisi normal */
  @media (min-width: 1127px) {
  .header {
	position: relative;
	width: 100%;
	z-index: 3;
  }
	.logo{
	  margin: 0 auto;
	}
	  .header li {
		  float: left;
		}
		.header li a {
		
		background-color: #fff;
			padding: 20px 0 0 30px;
		border-bottom: none;
		}
	  .header li a:hover,
	  .header .menu-btn:hover {
		color: #eeb655;
		background-color: inherit;
  
	  }
		.header .menu {
		  clear: none;
		  float: right;
		  max-height: none;
		}
		.header .menu-icon {
		  display: none;
		}
  }


/* Split Box */
.split section, .split section::after{color:#000000; background-color:#F9F9F9;}
.split section{background:linear-gradient(to right, rgba(249,249,249,.8), rgba(249,249,249,1));}


/* Content Area */
.elements article figure figcaption{color:#FFFFFF;}
.elements article figure figcaption time strong{background-color:#eeb655;}
.elements article figure figcaption time em{background-color:#821603;}
.elements article .txtwrap{color:#474747; background-color:#F1F0ED;}
.elements article:hover .txtwrap{border-color:#eeb655;}


/* Footer */


#footer .heading{color:#FFFFFF;}

#footer nav a{color:inherit;}
#footer nav li:first-child a, #footer nav a:hover{color:#eeb655;}

#footer .linklist li{border-color:rgba(255,255,255,.2);}

#footer input, #footer button{border-color:transparent;}
#footer input{color:#FFFFFF; background-color:#283F6C;}
#footer input:focus{border-color:#eeb655;}
#footer button{color:#FFFFFF; background-color:#eeb655;}


/* Navigation */
#mainav li a{color:inherit;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#eeb655; background-color:inherit;}
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(130,22,3,.55); border-color:rgba(0,0,0,.6);}
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#eeb655;}
#mainav form select{color:#FFFFFF; background-color:#162f57; border-color:rgba(255,255,255,.2);}

#breadcrumb ul{border-color:rgba(255,255,255,.2);}
#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color:#eeb655;}

.container .sidebar nav a{color:inherit; border-color:#F4F4F4;}
.container .sidebar nav a:hover{color:#eeb655;}

.pagination a, .pagination strong{border-color:#F4F4F4;}
.pagination .current *{color:#FFFFFF; background-color:#eeb655;}

#backtotop{color:#FFFFFF; background-color:#eeb655;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#F4F4F4;}
#comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:#eeb655;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}

/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */

/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1920px){
	.hoc{max-width:1920px;}
	.services_container{ max-width:1483px;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1150px) and (min-width: 1000px){

	
	.service-column{ display: inline-flex;  list-style:none; width: 45%;  }
	
}
@media screen and (max-width:1900px) and (min-width: 1128px){

	.kolom_1{width:46%; margin:100px 4% 100px 4%; }
	.kolom_2{width:46%; }

	
}
@media (min-width:1280px) and (max-width:1580px) {
	
	.partner_container{max-width: 1210px; width: 100%; padding: 0; margin: 0 35px 0 35px;}
	.partner_frame{ width:545px; height: 530px;  border: 2px solid #dbebfe; border-radius: 14px; margin: 0 30px 0 30px; overflow: hidden;}
	.partner_frame:hover{ 
		background-color: #e6eaf0;
	}
	.partner_foto{  width:260px; height: 530px; margin: 0; float: left; background-position:center; background-repeat: no-repeat; background-size: cover; z-index: -100;}
	
	.partner_content{ 
			width:240px; 
			height: 550px; 
			margin: 10px 20px 10px 20px !important; float: left; }

	.owl-carousel .prev-slide{
		left: -15px !important;
		}
	
	.owl-carousel .next-slide{
		right: -15px !important;
	}
}

@media screen and (max-width:1127px){

	h1{ margin:35px 0 30px 0; font-size:24px; line-height:normal; font-weight:bold; text-transform:uppercase;}


	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}

	.wrapper{padding: 20px;}
	.kolom_1{display:block; float:none;  width:100%; max-width:100%; margin:0; padding: 0;}
	.kolom_2{display:block; float:none; }

	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 auto; padding:4%; text-align: center;}
	.one_third{display:block; float:none; width:auto; margin:30px; padding:4%; text-align: center;}

	.service-column{display:block; float:none; width:auto; margin:30px; padding:4%; text-align: center;}
	
	.client{display:inline-block; float:none; margin:20px 0 20px 3.06748466257669%; list-style:none;}

	.client{width:100%;}


	#pageintro li article, #pageintro li p:last-of-type{max-width:none; width:100%; overflow:visible;}

	.elements article{max-width:320px;}

	.container, #footer{padding-bottom:70px;}/* Not neccessary - just looks better */
	.row2, .row3, .row4, .row5 { padding: 4%; margin:0 auto; } 
	.one_half_ { margin:0 auto;padding: 4%; display:table; text-align: center; } 




	.partner_container{ display:block; justify-content:baseline; align-items:baseline;}
	.partner_frame{ width:100%; height: auto; margin: 10px 0 10px 0; }
	.partner_foto{  width:100%; height: 456px; margin: 0 auto; float: none; background-position:center; background-repeat: no-repeat; background-size: cover; }
	.partner_content{ width:100% !important; height: auto; padding: 10px; float: none; margin: 0 auto;}

	.faico{ list-style:none; text-align: center; justify-content: center;}
	.faico li{display:inline-block; margin:0 20px 0 20px; padding:0; }

	
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}

	.hoc.split{max-width:none; width:100%;}
	.service-box{
		
		height:auto;
	}
	
	.btmspace-30{ margin-bottom:5px;}
	
}

@media screen and (max-width:400px){
	.row5 {font-size:.8rem;}
}