@font-face{
	font-family: thin;
	src:url(../fonts/thin.woff);
}
@font-face{
	font-family: abel;
	src:url(../fonts/abel.ttf);
}
@font-face{
	font-family: adorable;
	src:url(../fonts/adorable.ttf);
}
@font-face{
	font-family: dafturn;
	src:url(../fonts/dafturn.ttf);
}
@font-face {
	font-family: 'sfbold';
	src: url('../fonts/sf-bold.woff') format('woff');
}
@font-face {
	font-family: 'sfreguler';
	src: url('../fonts/sf-reguler.woff') format('woff');

}
@font-face {
	font-family: 'glight';
	src: url('../fonts/glight.woff') format('woff');
}
@font-face {
	font-family: 'gsemi';
	src: url('../fonts/gsemi.woff') format('woff');

}
@font-face {
	font-family: 'sfthin';
	src: url('../fonts/sf-thin.woff') format('woff');
}
@font-face {
	font-family: 'Sans';
	src: url('../fonts/Sans-Regular.woff') format('woff');
}

body{
	font-size: 16px;
	width: 100%;
	font-family: sf-reguler,Helvetica Neue,sans-serif;
}
html{
	width: 100%;
}

.big-wadah{
	width: 100%;

}
.big-wadah2{
	width: 960px;
	margin: auto;
}
.sans-reguler{
	font-family: Sans;
	font-weight: normal;
}
.sans-light{
	font-family: Sans;
	font-weight: 300;
}
.sans-bold{
	font-family: Sans;
	font-weight: 700;
}
.bg1{
	background-color: #f1f4f9;
}
.bg2{
	background-color: white;
}

/*introo*/
.fa{
	margin-right: 10px;
}
.fa-nav{
	margin-right: 0;
}
.gsemi{
	font-family: gsemi;
}
.glight{
	font-family: glight;
}
.sans-reguler{
	font-family: sans;
	font-weight: normal;
}
.sans-light{
	font-family: sans;
	font-weight: 300;
}
.sans-bold{
	font-family: sans;
	font-weight: 700;
}
.sf-reguler{
	font-family: sfreguler;
}
.sf-bold{
	font-family: sfbold;
}
.sans-thin{
	font-family: sfthin;
}
.dafturn{
	font-family: dafturn;
}
.no-pad{
	padding: 0 !important;
}
.no-pad-right{
	padding-right: 0 !important;
}
.no-gin{
	margin: 0 !important;
}
.logo img{
	width: 70px;
} 
.no-radius{
	border-radius: 0 !important;
}


.navigasi{
    z-index: 11;
    position: relative;
    position: fixed;
    top: 0;
    background: #FFF;
    width: 100%;
    box-shadow: 0 -2px 16px rgba(0,0,0,.1);
}
.r {
    list-style: none;
    padding: 0;
    margin: 0;
    outline: 0;
    border: 0;
}
.inline{
	display: inline;
	float: left;
}
ul.inline li {
    display: inline-block;
    vertical-align: middle;
}
/*warna*/
/* COLORS dari w3  */
.w3-pale-red{background-color:#ffe7e7 !important}.w3-pale-green{background-color:#e7ffe7 !important}.w3-pale-yellow{background-color:#ffffd7 !important}.w3-pale-blue{background-color:#e7ffff !important}
.w3-text-amber{color:#ffc107 !important}.w3-amber{color:#000 !important;background-color:#ffc107 !important}
.w3-text-aqua{color:#00ffff !important}.w3-aqua{color:#000 !important;background-color:#00ffff !important}
.w3-text-blue{color:#2196F3 !important}.w3-blue{color:#fff !important;background-color:#2196F3 !important}
.w3-text-light-blue{color:#87CEEB !important}.w3-light-blue{color:#000 !important;background-color:#87CEEB !important}
.w3-text-brown{color:#795548 !important}.w3-brown{color:#fff !important;background-color:#795548 !important}
.w3-text-cyan{color:#00bcd4 !important}.w3-cyan{color:#000 !important;background-color:#00bcd4 !important}
.w3-text-blue-grey{color:#607d8b !important}.w3-blue-grey{color:#fff !important;background-color:#607d8b !important}
.w3-text-green{color:#4CAF50 !important}.w3-green{color:#fff !important;background-color:#4CAF50 !important}
.w3-text-light-green{color:#8bc34a !important}.w3-light-green{color:#000 !important;background-color:#8bc34a !important}
.w3-text-indigo{color:#3f51b5 !important}.w3-indigo{color:#fff !important;background-color:#3f51b5 !important}
.w3-text-khaki{color:#b4aa50 !important}.w3-khaki{color:#000 !important;background-color:#f0e68c !important}
.w3-text-lime{color:#cddc39 !important}.w3-lime{color:#000 !important;background-color:#cddc39 !important}
.w3-text-orange{color:#ff9800 !important}.w3-orange{color:#000 !important;background-color:#ff9800 !important}
.w3-text-deep-orange{color:#ff5722 !important}.w3-deep-orange{color:#fff !important;background-color:#ff5722 !important}
.w3-text-pink{color:#e91e63 !important}.w3-pink{color:#fff !important;background-color:#e91e63 !important}
.w3-text-purple{color:#9c27b0 !important}.w3-purple{color:#fff !important;background-color:#9c27b0 !important}
.w3-text-deep-purple{color:#673ab7 !important}.w3-deep-purple{color:#fff !important;background-color:#673ab7 !important}
.w3-text-red{color:#f44336 !important}.w3-red{color:#fff !important;background-color:#f44336 !important}
.w3-text-sand{color:#fdf5e6 !important}.w3-sand{color:#000 !important;background-color:#fdf5e6 !important}
.w3-text-teal{color:#009688 !important}.w3-teal{color:#fff !important;background-color:#009688 !important}
.w3-text-yellow{color:#d2be0e !important}.w3-yellow{color:#000 !important;background-color:#ffeb3b !important}
.w3-text-white{color:#fff !important}.w3-white{color:#000 !important;background-color:#fff !important}
.w3-text-black{color:#000 !important}.w3-black{color:#fff !important;background-color:#000 !important}
.w3-text-grey{color:#757575 !important}.w3-grey{color:#000 !important;background-color:#9e9e9e !important}
.w3-text-light-grey{color:#f1f1f1 !important}.w3-light-grey{color:#000;background-color:#f1f1f1 !important}
.w3-text-dark-grey{color:#3a3a3a !important}.w3-dark-grey{color:white;background-color:#616161 !important}
.w3-opacity{opacity:0.60}.w3-text-shadow{text-shadow:1px 1px 0 #444}.w3-text-shadow-white{text-shadow:1px 1px 0 #ddd}

.padding-in {
    padding: 31px 202px;
    margin-top: 165px;
}
.padding-in2 {
    padding: 0 202px;
    margin-top: 63px;
}
.margin-top {
    margin-top: 195px;
}
.margin-bottom{
	margin-bottom: 195px;
}
.margin-top-body {
    margin-top: 76px;
}

.title {
    font-size: 66px;
    font-weight: 800;
    color: black;
    margin-bottom: 21px;
    letter-spacing: -3.5px;
}
.gbr {
    width: 80px;
}
.link {
    font-weight: 400;
    font-size: 55px;
    line-height: 0.9;
    letter-spacing: -1px;
}
.title2 {
    font-size: 52px;
    font-weight: 800;
    color: black;
    margin-bottom: 38px;
    letter-spacing: -2.2px;
}
.kotak-awal {
    width: 1198px;
}
.padding-in5 {
    padding: 0 0 0 202px;
    margin-top: 63px;
}
.link2 {
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0px;
    color: #505050;
}
.link a{
	color: #2f2f2f;
	-webkit-transition: color 0.25s; /* Safari */
  	transition: color 0.25s;
  	text-decoration: none;
	
}
.link a:hover{
	color:#ff9d16;
	text-decoration: none;
	
}

.ttl{
	position: absolute;
    top: 30%;
}
.ttl-person{
	color: #202020;
}
.gray{
	color: #808080;
}
.foot {
    position: fixed;
    right: 116px;
    bottom: 68px;
    font-size: 24px;
    color: #606060;
}
#container{
	width: 1080px;
	margin: auto;
}
/*padding body*/
.padding-in-3{
	padding: 0px 11vw;
}

/**/

.ktk-logo{
	width: 290px;
}
/*.ttl-page {
    margin-top: 26px;
    margin-top: 4vh;

}*/
.ttl-page {
    margin-top: 38px;
    font-size: 42px;
}
.project-ktk {
    margin-top: 4vh;
}
.project-start {
    padding: 0 15px;
   
}

.ttl-project {
    font-size: 17px;
}

.desc-project {
    font-size: 15px;
}
.fix-head{
	position: fixed;
    width: inherit;
    height: 33vh;
    background-color: white;
    top: 0;
/*    background-image: url(../images/pattern.png);
    background-size: 561px;
    background-position: center top;*/
}
.mgt-1{
	margin-top: 33vh;
}

.trgt-lnk:hover{
	text-decoration: none;
	color: #ff8805;
}
.trgt-lnk:focus{
	text-decoration: none;
	color: #ff8805;
}
.trgt-lnk {
    color: #ff9d16;

}

.gbr-link img {
    margin-top: 1px;
    margin-left: 8px;
}
.page ul {

    list-style-type: none;
    margin-left: -40px;

}

.link a {
    color: #505050;
}

.ftr-new{
	font-size: 17px;
    color: #606060;
}
.margin-bottom2{
    margin-bottom: 128px;
}
.menu {
    margin-top: 30px;
}

.padding-in-page {
    padding: 31px 202px;
    margin-top: 99px;
}
.margin-top-image{
	margin-top: 55px;
}
.menu a {
    color: #505050;
    font-size: 18px;
    font-family: glight;
    text-decoration: none;
    margin-left: 17px;
    -webkit-transition: color 0.25s; /* Safari */
  	transition: color 0.25s;
}

.menu a:hover{
	color:#ff9d16;
}

.active{
	color: #b0b0b0 !important;
}
.quote footer{
	margin-top: 11px;
	color: #a0a0a0;
}
/*responsive Home*/
@media (max-width: 1470px) {
	.kotak-awal {
    width: 1000px;
	}
	  .title {
    font-size: 60px;
    font-weight: 800;
    color: black;
    margin-bottom: 21px;
    letter-spacing: -3.5px;
	}
  .link {
    font-weight: 400;
    font-size: 50px;
    line-height: 0.9;
    letter-spacing: -1px;
	}
  .foot {
    font-size: 19px;
	}
	.title2{
		font-size: 44px;
		letter-spacing: -2px;
	}
	.link2{
		font-size: 20px;
	}
	.margin-bottom2 {
    margin-bottom: 78px;
	}
}

@media (max-width: 1370px) {
	.gbr {
    width: 80px;
	}
  .padding-in {
    padding: 31px 136px;
    margin-top: 120px;
  }
  .padding-in2 {
    padding: 0 136px;
    margin-top: 50px;
	}

	.padding-in-page {
    padding: 31px 136px;
    margin-top: 54px;
  }
  .padding-in5 {
    padding: 0 0 0 136px;
    margin-top: 50px;
	}
  .title {
    font-size: 56px;
    font-weight: 800;
    color: black;
    margin-bottom: 21px;
    letter-spacing: -3.5px;
	}
  .link {
    font-weight: 400;
    font-size: 45px;
    line-height: 0.9;
    letter-spacing: -1px;
	}
  .foot {
    font-size: 19px;
	}
	.title2{
		font-size: 40px;
		letter-spacing: -2px;
	}
	.link2{
		font-size: 18px;
	}
	.kotak-awal {
    width: 900px;
	}
	 .margin-bottom2 {
    margin-bottom: 78px;
	}
}
@media (max-width: 1024px){
	.kotak-awal {
    width: 780px;
	}
	.link2 {
    font-size: 16px;
	}
	.title2 {
    font-size: 37px;
	}
	.title{
		font-size: 52px;
		letter-spacing: -2.5px;
	}
	.link{
		font-size: 40px;
	}
}
@media (max-width: 840px){
	.kotak-awal {
    width: 626px;
	}
	.title2 {
    font-size: 32px;
	}

	.link2 {
    font-size: 15px;
	}
	.menu a{
		font-style: 15px;
	}
}
@media (max-width: 992px) {

  .padding-in {
    padding: 31px 136px;
    margin-top: 165px;
  }
  .padding-in2 {
    padding: 0 136px;
    margin-top: 50px;
  }
  .padding-in-page {
    padding: 31px 136px;
    margin-top: 165px;
  }
  .padding-in5 {
    padding: 0px 0px 0px 136px;
    margin-top: 50px;
  }
}


@media (max-width: 768px) {

    .title {
    font-size: 40px;
    letter-spacing: -1.5px;
	}
	.padding-in {
    padding: 31px 136px;
    margin-top: 165px;
  	}
	.padding-in2 {
	    padding: 0 136px;
	    margin-top: 22px;
	}
	.padding-in-page {
    padding: 31px 136px;
    margin-top: 165px;
  	}
	.padding-in5 {
	    padding: 0px 0px 0px 136px;
	    margin-top: 22px;
	}
	.link {
    font-weight: 400;
    font-size: 33px;
    line-height: 0.9;
    letter-spacing: -1px;
	}
	.gbr {
    width: 74px;
	}
	.foot {
    right: 77px;
	}
	.margin-top {
    margin-top: 68px;
	}
}
@media (max-width: 555px){
	.gbr {

    width: 60px;

	}
	.kotak-awal {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
	}
	.padding-in {
    padding: 31px 70px;
    margin-top: 100px;
  	}
	.padding-in2 {
	    padding: 0 70px;
	    margin-top: 22px;
	}
	.menu{
		padding: 0 14px;
	}
	.padding-in-page {
    padding: 31px 14px;
 	margin-top: 13px;
  	}
	.padding-in5 {
	    padding: 0px 14px;
	    margin-top: 22px;
	}
	.ftr{
	font-size: 14px;
	margin-right: 45px;
	margin-bottom: 60px;
	}
	.ktk-logo{
		float: left !important;
		margin-left: 29px;
	}
	.ttl-page{
		font-size: 28px;
		margin-top: 31px;
		margin-left: -27px;
	}
	.margin-top-body {

    margin-top: 55px;

	}
	.menu a{
		display: inline-block;
		font-size: 14px;
	}
	.title2 {

    font-size: 18px;
    letter-spacing: -1.2px;

	}
	.link2 {

    font-size: 12px;

	}
	.margin-bottom2 {
    margin-bottom: 35px;
	}
	.ftr-new{
		font-size: 12px
	}
}
@media (max-width: 390px){
	
	.foot {
		position: absolute;
    font-size: 14px;
	/*margin-right: 45px;*/
	margin-bottom: 60px;
	bottom: 0;
	right: 45px;

	}

	.padding-in2 {
    padding: 0 70px;
    margin-top: 4px;
	}
	.padding-in5 {
    padding: 0px 14px;
    margin-top: 4px;
	}
	.menu{
		padding: 0 14px;
	}
	.title {
    font-size: 28px;
    letter-spacing: -2.5px;
    margin-bottom: 17px;
	}
	.padding-in {
	    padding: 31px 70px;
	    margin-top: 100px;
	}
	.padding-in-page {
	    padding: 31px 14px;
	    margin-top: 13px;
	}
	.gbr {
    width: 58px;
	}
	.link {
    font-weight: 400;
    font-size: 24px;
    line-height: 0.7;
    letter-spacing: -1px;
	}

	.ftr{
	font-size: 14px;
	margin-right: 45px;
	margin-bottom: 60px;
	}

}