@font-face{
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
		url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
		url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
		url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
		url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal
}

@font-face {
    font-family: 'Exo Black';
    src: url('fonts/Exo2-Black.eot');
    src: url('fonts/Exo2-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-Black.woff2') format('woff2'),
        url('fonts/Exo2-Black.woff') format('woff'),
        url('fonts/Exo2-Black.ttf') format('truetype'),
        url('fonts/Exo2-Black.svg#Exo2-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo Light';
    src: url('fonts/Exo2-Light.eot');
    src: url('fonts/Exo2-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-Light.woff2') format('woff2'),
        url('fonts/Exo2-Light.woff') format('woff'),
        url('fonts/Exo2-Light.ttf') format('truetype'),
        url('fonts/Exo2-Light.svg#Exo2-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo Bold';
    src: url('fonts/Exo2-Bold.eot');
    src: url('fonts/Exo2-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-Bold.woff2') format('woff2'),
        url('fonts/Exo2-Bold.woff') format('woff'),
        url('fonts/Exo2-Bold.ttf') format('truetype'),
        url('fonts/Exo2-Bold.svg#Exo2-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo Extra Light';
    src: url('fonts/Exo2-ExtraLight.eot');
    src: url('fonts/Exo2-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-ExtraLight.woff2') format('woff2'),
        url('fonts/Exo2-ExtraLight.woff') format('woff'),
        url('fonts/Exo2-ExtraLight.ttf') format('truetype'),
        url('fonts/Exo2-ExtraLight.svg#Exo2-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo Medium';
    src: url('fonts/Exo2-Medium.eot');
    src: url('fonts/Exo2-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-Medium.woff2') format('woff2'),
        url('fonts/Exo2-Medium.woff') format('woff'),
        url('fonts/Exo2-Medium.ttf') format('truetype'),
        url('fonts/Exo2-Medium.svg#Exo2-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo Extra Bold';
    src: url('fonts/Exo2-ExtraBold.eot');
    src: url('fonts/Exo2-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-ExtraBold.woff2') format('woff2'),
        url('fonts/Exo2-ExtraBold.woff') format('woff'),
        url('fonts/Exo2-ExtraBold.ttf') format('truetype'),
        url('fonts/Exo2-ExtraBold.svg#Exo2-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo Thin';
    src: url('fonts/Exo2-Thin.eot');
    src: url('fonts/Exo2-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-Thin.woff2') format('woff2'),
        url('fonts/Exo2-Thin.woff') format('woff'),
        url('fonts/Exo2-Thin.ttf') format('truetype'),
        url('fonts/Exo2-Thin.svg#Exo2-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo Regular';
    src: url('fonts/Exo2-Regular.eot');
    src: url('fonts/Exo2-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-Regular.woff2') format('woff2'),
        url('fonts/Exo2-Regular.woff') format('woff'),
        url('fonts/Exo2-Regular.ttf') format('truetype'),
        url('fonts/Exo2-Regular.svg#Exo2-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo Semibold';
    src: url('fonts/Exo2-SemiBold.eot');
    src: url('fonts/Exo2-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo2-SemiBold.woff2') format('woff2'),
        url('fonts/Exo2-SemiBold.woff') format('woff'),
        url('fonts/Exo2-SemiBold.ttf') format('truetype'),
        url('fonts/Exo2-SemiBold.svg#Exo2-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.grecaptcha-badge{
	visibility: hidden;
}

/* Smartphone Default*/
.no-padding{
	margin: 0px;
	padding: 0px;
}
.no-padding-left,
.no-padding-right{
	padding: 0px;
}


button,
input,
textarea{
	outline: none;
}

html,
body{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	font-family: 'Myriad Pro Reg';
	font-size: 12px;
}

video {  
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.bg-overlay{
	position: fixed;
	display: block;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	z-index: 3;
	top: 100vh;
	opacity: .7;
}

	main{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		background-image: url('../../images/BG-Mobile.jpg');
		background-position: bottom center;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	.main-home{
		background-image: url('../../images/BG-Mobile-Clear.jpg');
	}
	.main-video{
		background-image: none;
	}


.err{
	position: relative;
	display: block;
	width: 100%;
	font-family: 'Myriad Pro Reg';
	font-size: 16px;
	color: #f00;
	text-align: left;
	display: none;
}
	.text-error,
	.text-error:focus{
		border: solid 1px red;
	}
	
	.header{
		position: fixed;
		display: block;
		width: 100%;
		z-index: 99;
	}
		.box-m-menu{
			position: relative;
			display: block;
		}
			.top-menu{
				position: relative;
				width: 50%;
				left: 50%;
				transform: translateX(-50%);
				cursor: pointer;
			}
			.box-sub-m-menu{
				position: absolute;
				top: 0px;
				display: none;
				width: 50%;
				left: 50%;
				transform: translateX(-50%);
			}
				.img-menu{
					width: 100%;
					cursor: pointer;
				}
		.box-d-menu{
			display: none;
		}
		
	.content{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		font-family: 'Exo Regular';
		font-size: 16px;
	}
		.slider-categori{
			position: fixed;
			width: 100%;
			bottom: 25px;
		}
			.img-category{
				height: 150px;
				cursor: pointer;
			}
		
		.box-content{
			position: relative;
			display: inline-block;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
			.content-contact{
				width: 90%;
			}
			.judul-contact{
				position: absolute;
				display: block;
				width: 150px;
				margin: 0px;
				left: 30px;
				top: -38px;
				z-index: 9;
				height: 40px;
				border: solid 2px #fff;
				border-radius: 20px 20px 0 0;
				backdrop-filter: blur(10px);
				-webkit-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				-moz-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				border-bottom: none;
			}
			.box-isi-contact{
				position: relative;
				display: block;
				width: 100%;
				padding: 7%;
				height: 300px;
				border: solid 2px #fff;
				border-radius: 20px;
				backdrop-filter: blur(10px);
				-webkit-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				-moz-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
			}
				.box-contact{
					width: 100%;
					height: 100%;
					padding: 7%;
					background-color: rgba(255, 255, 255, .7);
					border-radius: 15px 45px 15px 45px;
					color: #000;
				}
					.jdl-contact{
						font-family: 'Exo Bold';
						margin-bottom: 10px;
					}
			
			.content-about{
				width: 90%;
			}
				.about-we{
					position: relative;
					display: inline-block;
					width: 100%;
					vertical-align: top;
					color: #fff;
					font-family: 'Exo Bold';
					font-size: 52px;
					padding: 20px;
				}
				.about-are{
					position: relative;
					display: inline-block;
					width: 100%;
					vertical-align: top;
					padding: 20px;
					padding-bottom: 35px;
					max-height: 500px;
					border: solid 2px #fff;
					color: #fff;
					border-radius: 20px;
					backdrop-filter: blur(10px);
					-webkit-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
					-moz-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
					box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				}
					.judul-are{
						font-family: 'Exo Medium';
						font-size: 52px;
						margin-bottom: 20px;
					}
					.isi-are{
						border-left: solid 10px #fff;
						padding-left: 10px;
					}
					
			.content-services{
				width: 90%;
			}
				.judul-services{
					position: absolute;
					display: block;
					margin: 0px;
					width: 200px;
					text-align: center;
					padding: 5px;
					color: #fff;
					font-family: 'Exo Bold';
					font-size: 18px;
					top: -38px;
					left: 50%;
					transform: translateX(-50%);
					z-index: 9;
					height: 40px;
					border: solid 2px #fff;
					border-radius: 20px 20px 0 0;
					backdrop-filter: blur(10px);
					-webkit-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
					-moz-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
					box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				}
				.box-isi-services{
					position: relative;
					display: block;
					width: 100%;
					padding: 7%;
					border: solid 2px #fff;
					border-radius: 20px;
					backdrop-filter: blur(10px);
					-webkit-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
					-moz-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
					box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				}
					.jdl-isi-services{
						position: relative;
						display: block;
						font-family: 'Exo Bold';
						font-size: 18px;
						margin-bottom: 10px;
						color: #45bf9d;
					}
					.isi-services{
						position: relative;
						display: block;
						color: #fff;
					}
						.icon-services{
							position: relative;
							display: block;
							margin-top: 15px;
						}
							.judul-icon-services{
								position: relative;
								display: inline-block;
								vertical-align: middle;
								margin-bottom: 10px;
								width: 100%;
								text-align: center;
								font-size: 16px;
							}
							.isi-icon-services{
								position: relative;
								display: inline-block;
								text-align: center;
							}
								.img-svc{
									width: 100%;
								}
								.img-svc-end{
									width: 65%;
								}
								
			.content-works{
				width: 90%;
			}
				.judul-works{
					position: relative;
					display: block;
					margin: 0px;
					width: 200px;
					text-align: center;
					padding: 5px;
					color: #fff;
					font-family: 'Exo Bold';
					font-size: 18px;
					left: 50%;
					transform: translateX(-50%);
					z-index: 9;
					height: 40px;
					border: solid 2px #fff;
					border-radius: 15px;
					margin-bottom: 20px;
					backdrop-filter: blur(10px);
					-webkit-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
					-moz-box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
					box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.5);
				}
				.box-isi-works{
					position: relative;
					display: block;
					width: 100%;
					backdrop-filter: blur(10px);
					text-align: center;
				}
					.isi-works{
						position: relative;
						display: block;
						width: 100%;
						height: 50vh;
						padding: 20px 0px;
						overflow-y: auto;
					}
						.client-line{
							position: relative;
							display: block;
							width: 70%;
							left: 50%;
							transform: translateX(-50%);
							border-top: solid 2px #fff;
						}
						.clients{
							position: relative;
							display: inline-block;
							width: 28%;
							margin: 2%;
							transition: all .5s;
							cursor: pointer;
						}
						.clients:hover{
							transform: scale(1.1);
						}
				
			.content-client{
				width: 100%;
			}
				.box-detail-client{
					position: relative;
					display: inline-block;
					width: 90%;
					left: 50%;
					transform: translateX(-50%);
					text-align: right;
					margin-bottom: 20px;
				}
					.nama-client{
						color: #fff;
						font-family: 'Exo Bold';
						font-size: 18px;
						margin-bottom: 10px;
					}
					.logo-client{
						position: relative;
						display: inline-block;
						width: 40%;
						background-color: rgba(255, 255, 255, .7);
						padding: 5px 25px;
						margin-bottom: 10px;
						border-radius: 0px 0px 0px 20px;
					}
					.box-des-client{
						position: relative;
						display: block;
						width: 100%;
						background-color: rgba(255, 255, 255, .7);
						font-family: 'Exo Regular';
						padding: 20px;
						border-radius: 0px 20px 0px 20px;
						text-align: left;
						font-size: 16px;
					}
				.box-project-client{
					position: relative;
					display: inline-block;
					width: 100%;
				}
					.client-line{
						position: relative;
						display: block;
						width: 100%;
						border-top: solid 2px #fff;
					}
					.isi-project-client{
						position: relative;
						display: block;
						width: 100%;
						height: 92vw;
						overflow-y: auto;
						backdrop-filter: blur(10px);
						text-align: center;
						margin: 10px 0px;
						padding: 10px;
					}
						.frame-project-client{
							position: relative;
							display: block;
							width: 100%;
							left: 50%;
							transform: translateX(-50%);
						}
							.cover-project{
								position: relative;
								display: inline-block;
								width: 45%;
								margin: 1.5vw;
								height: 25vw;
								background-position: center center;
								background-size: cover;
								border-radius: 10px;
								cursor: pointer;
							}
			
			.content-project{
				width: 100%;
			}
				.box-detail-project-client{
					position: relative;
					display: inline-block;
					width: 100%;
				}
				
					.isi-galeri-project{
						position: relative;
						display: block;
						width: 100%;
						height: 70vw;
						overflow-y: auto;
						backdrop-filter: blur(10px);
						text-align: center;
						margin: 10px 0px;
						padding: 20px;
					}
						.frame-galeri-project{
							position: relative;
							display: block;
							width: 100%;
							left: 50%;
							transform: translateX(-50%);
						}
							.galeri-project{
								position: relative;
								display: inline-block;
								width: 100%;
								height: 55vw;
								background-position: center center;
								background-size: cover;
								cursor: pointer;
							}
					

			
			
	

/*Tablet / iPad / Laptop Portraid*/
@media only screen
and (min-width: 601px) {
	main{
		background-image: url('../../images/BG-Tablet.jpg');
	}
	.main-home{
		background-image: url('../../images/BG-Tablet-Clear.jpg');
	}
			
			.top-menu{
				width: 20%;
			}
			.box-sub-m-menu{
				width: 20%;
			}
			
			.img-category{
				height: 300px;
			}
			
		.content-contact{
			width: 60%;
		}
			.judul-contact{
				width: 250px;
				left: 30px;
			}
			.box-isi-contact{
				width: 100%;
				padding: 5%;
				height: 350px;
				border-radius: 30px;
			}
				.box-contact{
					padding: 7%;
					border-radius: 20px 60px 20px 60px;
				}
				
			.content-about{
				width: 80%;
			}
				.about-we{
					width: 18%;
					font-size: 52px;
					padding: 20px;
				}
				.about-are{
					width: 80%;
					padding: 20px;
					padding-bottom: 35px;
					max-height: 500px;
				}
					.judul-are{
						font-size: 52px;
						margin-bottom: 20px;
					}
					.isi-are{
						margin-left: 30px;
						padding-left: 10px;
					}
			
			.content-services{
				width: 70%;
			}
				.judul-services{
					width: 200px;
					padding: 5px;
					font-size: 18px;
					top: -38px;
					height: 40px;
				}
				.box-isi-services{
					padding: 7%;
					border-radius: 20px;
				}
					.jdl-isi-services{
						font-size: 18px;
						margin-bottom: 20px;
					}
						.icon-services{
							margin-top: 25px;
						}
							.judul-icon-services{
								margin-bottom: 10px;
								width: 35%;
								font-size: 16px;
								text-align: left;
							}
							.isi-icon-services{
								width: 63%;
								text-align: left;
							}
								.img-svc{
									width: 100%;
								}
								.img-svc-end{
									width: 65%;
								}
								
			.content-works{
				width: 70%;
			}
					.isi-works{
						height: 55vh;
					}
					
			.content-client{
				width: 100%;
			}
				.box-detail-client{
					width: 55%;
					margin-bottom: 20px;
				}
					.nama-client{
						font-size: 18px;
						margin-bottom: 10px;
					}
					.logo-client{
						width: 40%;
						padding: 5px 25px;
						margin-bottom: 10px;
						border-radius: 0px 0px 0px 20px;
					}
					.box-des-client{
						padding: 20px;
						border-radius: 0px 20px 0px 20px;
						font-size: 16px;
					}
					.isi-project-client{
						height: 55vw;
						margin: 10px 0px;
						padding: 20px;
					}
						.frame-project-client{
							width: 85%;
						}
							.cover-project{
								width: 45%;
								margin: 1.5vw;
								height: 22vw;
								border-radius: 10px;
							}
					.isi-galeri-project{
						width: 100%;
						height: 40vw;
						margin: 10px 0px;
						padding: 20px;
					}
						.frame-galeri-project{
							width: 60%;
						}
							.galeri-project{
								height: 35vw;
							}
}


/*Tablet / iPad / Laptop Landscape*/
@media only screen
and (min-width: 1024px) {
	main{
		background-image: url('../../images/BG-Desktop.jpg');
	}
	.main-home{
		background-image: url('../../images/BG-Desktop-Clear.jpg');
	}
		
		.box-m-menu{
			display: none;
		}
		.box-d-menu{
			position: relative;
			display: block;
			width: 100%;
			background-color: rgba(32,56,43, .7);
			color: #fff;
			font-family: 'Exo Regular';
			font-size: 14px;
		}
			.frame-menu{
				position: relative;
				display: inline-block;
				width: 78%;
				left: 50%;
				transform: translateX(-50%);
			}
				.text-menu{
					position: relative;
					display: inline-block;
					width: auto;
					padding: 3px 10px;
					padding-bottom: 7px;
					cursor: pointer;
				}
				.box-sub-menu{
					display: none;
					position: absolute;
					top: 0px;
					right: 50px;
					width: 180px;
				}
				
			.img-category{
				height: 250px;
			}
			
			.content-about{
				width: 65%;
			}
				.about-we{
					width: 25%;
					font-size: 72px;
					padding: 30px;
				}
				.about-are{
					width: 73%;
					padding: 30px;
					padding-bottom: 35px;
					max-height: 500px;
				}
					.judul-are{
						font-size: 72px;
						margin-bottom: 20px;
					}
					.isi-are{
						margin-left: 35px;
						padding-left: 20px;
					}
			
			.content-services{
				width: 55%;
			}
			
			.content-works{
				width: 60%;
			}
					.isi-works{
						height: 33vw;
					}
						.clients{
							width: 20%;
							margin: 2%;
						}
						
			.content-client{
				width: 90%;
			}
				.box-detail-client{
					width: 31%;
					left: 0%;
					transform: none;
					text-align: right;
					margin-bottom: 0px;
					margin-right: 20px;
					margin-top: 12vh;
				}
					.nama-client{
						color: #fff;
						font-family: 'Exo Bold';
						font-size: 18px;
						margin-bottom: 10px;
					}
					.logo-client{
						position: relative;
						display: inline-block;
						width: 40%;
						background-color: rgba(255, 255, 255, .7);
						padding: 5px 25px;
						margin-bottom: 10px;
						border-radius: 0px 0px 0px 20px;
					}
					.box-des-client{
						position: relative;
						display: block;
						width: 100%;
						background-color: rgba(255, 255, 255, .7);
						font-family: 'Exo Regular';
						padding: 20px;
						border-radius: 0px 20px 0px 20px;
						text-align: left;
						font-size: 16px;
					}
				.box-project-client{
					width: 65%;
					vertical-align: top;
					border-left: solid 2px #fff;
					border-right: solid 2px #fff;
				}
					.client-line{
						display: none;
					}
					.isi-project-client{
						position: relative;
						display: inline-block;
						width: 95%;
						left: 50%;
						transform: translateX(-52%);
						height: 99vh;
						margin: 0px 10px;
					}
						.frame-project-client{
							width: 100%;
							height: 52vw;
							top: 50%;
							transform: translate(-50%, -50%);
							overflow-y: auto;
						}
							.cover-project{
								width: 45%;
								margin: 1vw;
								height: 15vw;
							}
				
				.client-project{
					width: 32%;
					padding-left: 5%;
					margin-top: 0vw;
				}
			
				.box-detail-project-client{
					width: 66%;
					float: right;
					border: solid 2px #fff;
					border-right: none;
					border-radius: 20px 0 0 20px;
					padding: 5px 15px;
					padding-right: 0px;
				}
					.isi-galeri-project{
						width: 100%;
						height: 38vw;
						padding: 50px 100px;
						border-radius: 20px 0 0 20px;
						background-color: rgba(255, 255, 255, .3);
					}
						.frame-galeri-project{
							width: 100%;
						}
							.galeri-project{
								height: 28vw;
							}
			
			
}


/*Laptop / Desktop*/
@media only screen
and (min-width: 1280px) {
				.box-sub-menu{
					right: 80px;
					width: 200px;
				}
			
			.img-category{
				height: 320px;
			}
			
		.content-contact{
			width: 45%;
		}
			.box-isi-contact{
				height: 400px;
			}
			
			
			.content-about{
				width: 65%;
				max-width: 900px;
			}
				.about-we{
					width: 23%;
					font-size: 82px;
					padding: 30px;
				}
				.about-are{
					width: 75%;
					padding: 30px;
					padding-bottom: 50px;
					max-height: 500px;
				}
					.judul-are{
						font-size: 82px;
						margin-bottom: 20px;
					}
					.isi-are{
						margin-left: 50px;
						padding-left: 30px;
					}
			
			.content-services{
				width: 45%;
			}
					.isi-galeri-project{
						height: 36vw;
					}
}


/*Desktop 1366*/
@media only screen
and (min-width: 1366px) {
			.img-category{
				height: 350px;
			}	
				
			.content-services{
				width: 40%;
			}
			
			.content-client{
				width: 80%;
			}
				.box-detail-client{
					width: 31%;
					margin-right: 20px;
					margin-top: 12vh;
				}
				.box-project-client{
					width: 65%;
				}
						.frame-project-client{
							height: 43vw;
						}
							.cover-project{
								width: 45%;
								margin: 1vw;
								height: 12vw;
							}
							
					.isi-galeri-project{
						height: 35vw;
					}
}


/*Desktop MAC*/
@media only screen
and (min-width: 1440px) {
			.img-category{
				height: 360px;
			}
			
		.content-contact{
			width: 40%;
		}
			.box-isi-contact{
				height: 500px;
			}
			
				.about-we{
					width: 25%;
					font-size: 100px;
					padding: 30px;
				}
				.about-are{
					width: 73%;
					padding: 30px;
					padding-bottom: 50px;
					max-height: 500px;
				}
					.judul-are{
						font-size: 100px;
						margin-bottom: 20px;
					}
					.isi-are{
						margin-left: 60px;
						padding-left: 30px;
					}
			
			.content-services{
				width: 45%;
			}
}


/*Desktop Full HD MAC*/
@media only screen
and (min-width: 1680px) {
				.text-menu{
					padding: 3px 15px;
					padding-bottom: 7px;
				}
				.box-sub-menu{
					width: 250px;
				}
			
			.img-category{
				height: 420px;
			}
			
					.isi-galeri-project{
						height: 34vw;
					}
}


/*Desktop Full HD*/
@media only screen
and (min-width: 1920px) {
			.img-category{
				height: 500px;
			}
			
			.content-client{
				width: 70%;
			}
				.box-detail-client{
					width: 31%;
					margin-right: 20px;
					margin-top: 12vh;
				}
				.box-project-client{
					width: 65%;
				}
						.frame-project-client{
							height: 37vw;
						}
							.cover-project{
								width: 43%;
								margin: 1vw;
								height: 10vw;
							}
							
					.isi-galeri-project{
						height: 33.5vw;
					}
}