*{margin: 0; padding: 0;box-sizing: border-box;}
body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}

a:hover{
	color: #666;	
}

h2 {
	color: red;
}


.container{
	max-width: 1080px;
	margin: 5px auto;
	background: #fff;
	overflow: hidden;
	padding: 0px;
}


.header {
	padding: 0px;
	max-width: 100%;
	height: auto;
	overflow: hidden;
}

.header .kanan {
	width: 300px;
	float: left;
	height: 124px;
	background: red;
	position: fixed;
}

.header .kanan img {
	max-width: 100%;
	height: auto;
	padding-left: 20px;
	float: left;
	padding-right: 7px;
}

.header .kiri {
	width: 780px;
	height: 124px;
	float: left;
	background: red;
	position: fixed;
	margin-left: 300px;
}

.header .kiri p {
	margin-top: 10px;
	position: static;
	padding-left: 20px;
	padding-bottom: 18px;
}

.cover {
	max-width: 1080px;
	margin: 5px auto;
	background: #fff;
	padding: 50px 0;
	overflow: hidden;
}

.cover img {
	max-width: 100%;
	height: auto;
}

.cover .isi {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	float: left;
}

.cover .isi img {
	max-width: 100%;
	height: auto;
	float: left;
	padding: 20px 20px 10px 5px;
}


.cover .isi p {
	text-align: justify;
	padding-top: 20px;
}


.cover .isi1 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	float: left;
}

.cover .isi1 img {
	max-width: 100%;
	height: auto; 
	float: left;
	padding: 20px 20px 10px 5px;
}

.cover .isi1 h2 {
	color: green;
}

.cover .isi1 p {
	text-align: justify;
	padding-top: 20px;
}


.cover .isi2 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	float: left;
}

.cover .isi2 img {
	max-width: auto;
	height: 190px; 
	float: left;
	padding: 20px 12.7px 10px;
}

.footer {
	max-width: 1080px;
	height: auto;
	border: 2px solid #dedede;
	background: red;
	padding: 10px 5px;
}

.footer {
	text-align: center;
	color: white;
}



/*about us*/
.us {
	max-width: 1080px;
	margin: 5px auto;
	background: #fff;
	padding: 10px 0;
	overflow: hidden;
}

.us img {
	max-width: 100%;
	height: auto;
}

.us .isi {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	float: left;
}

.us .isi img {
	max-width: 35%;
	height: 250px;
	float: left;
	padding: 20px 10px;
}


.us .isi p {
	text-align: justify;
	margin: 20px 10px;
}

/*Wok Services*/
.wokservices {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px; 
	overflow: hidden;
}

.wokservices img {
	max-width: 15%;
	height: auto;
	border: 1px solid #dedede;
	padding: 20px;
	float: left;
}
 .wokservices h2{
 	margin-top: 60px;
 }

/*---------------*/
.wokservices1 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px; 
	overflow: hidden;
	height: auto;
}

.wokservices1 img {
	max-width: 15%;
	height: auto;
	border: 1px solid #dedede;
	padding: 20px;
	float: left;
}
 .wokservices1 h2 {
 	margin-top: 10px;
 	text-align: center;
 	color: red;
  }

 .wokservices1 h3 {
 	margin-top: 10px;
 	text-align: center;
 	color: black;
  }


/*-----------------*/
 
/*work start service 0*/
.wokservices0 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	overflow: hidden;
}

.wokservices0 .wok {
	max-width: 250px;
	border: 0px solid #dedede;
	float: left;
	margin: 5px 5px;
}

.wokservices0 .wok img {
	max-width: auto;
    height: auto;
    margin-left: 5%;
    margin-right: 0%;
    margin-top: 10%;
}

.wokservices0 .wok h3 {
	text-align: center;
	color: red;
}

.wokservices0 .wok p {
	text-align: center;
}

.wokservices0 .wok1 {
	max-width: 250px;
	border: 0px solid #dedede;
	float: left;
	margin: 5px 5px;
}

.wokservices0 .wok1 img {
	max-width: auto;
    height: auto;
    margin-left: 5%;
    margin-right: 0%;
    margin-top: 10%;
    
}

.wokservices0 .wok1 h3 {
	text-align: center;
	color: red;
}

.wokservices0 .wok1 p {
	text-align: center;
}

.wokservices0 .wok2 {
	max-width: 250px;
	border: 0px solid #dedede;
	float: left;
	margin: 5px 5px;
}


.wokservices0 .wok2 img {
	max-width: auto;
    height: auto;
    margin-left: 5%;
    margin-right: 0%;
    margin-top: 10%;
}

.wokservices0 .wok2 h3 {
	text-align: center;
	color: red;
}

.wokservices0 .wok2 p {
	text-align: center;

}
.wokservices0 .wok3 {
	max-width: 250px;
	border: 0px solid #dedede;
	float: left;
	margin: 5px 5px;
}

.wokservices0 .wok3 img {
	max-width: auto;
    height: auto;
    margin-left: 5%;
    margin-right: 0%;
    margin-top: 10%;
}

.wokservices0 .wok3 h3 {
	text-align: center;
	color: red;
}

.wokservices0 .wok3 p {
	text-align: center;
}

/*end work service 0*/

/*start work service 1
.wokservices1 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	overflow: hidden;
}

.wokservices1 .wok4 {
	max-width: 250px;
	border: 1px solid #dedede;
	float: left;
	margin: 5px 5px;
}

.wokservices1 .wok4 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top:  5%;
}

.wokservices1 .wok4 h3 {
	text-align: center;
	color: red;
}

.wokservices1 .wok4 p {
	text-align: center;
}

.wokservices1 .wok5 {
	max-width: 250px;
	border: 1px solid #dedede;
	float: left;
	margin: 5px 5px;
}

.wokservices1 .wok5 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
    
}

.wokservices1 .wok5 h3 {
	text-align: center;
	color: red;
}

.wokservices1 .wok5 p {
	text-align: center;
}

.wokservices1 .wok6 {
	max-width: 250px;
	border: 1px solid #dedede;
	float: left;
	margin: 5px 5px;
}


.wokservices1 .wok6 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
}

.wokservices1 .wok6 h3 {
	text-align: center;
	color: red;
}

.wokservices1 .wok6 p {
	text-align: center;

}
.wokservices1 .wok7 {
	max-width: 250px;
	border: 1px solid #dedede;
	float: left;
	margin: 5px 5px;
}

.wokservices1 .wok7 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
}

.wokservices1 .wok7 h3 {
	text-align: center;
	color: red;
}

.wokservices1 .wok7 p {
	text-align: center;
}
/*end work service 1*/

/*start work service 
.wokservices2 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	overflow: hidden;
}

.wokservices2 .wok8 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices2 .wok8 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 5%;
}

.wokservices2 .wok8 h3 {
	text-align: center;
}

.wokservices2 .wok8 p {
	text-align: center;
}

.wokservices2 .wok9 {
	max-width: 340px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices2 .wok9 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;

}

.wokservices2 .wok9 h3 {
	text-align: center;
}

.wokservices2 .wok9 p {
	text-align: center;
}

.wokservices2 .wok10 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices2 .wok10 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
}

.wokservices2 .wok10 h3 {
	text-align: center;
}

.wokservices2 .wok10 p {
	text-align: center;
}
.wokservices2 .wok11 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices2 .wok11 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
}

.wokservices2 .wok11 h3 {
	text-align: center;
}

.wokservices2 .wok11 p {
	text-align: center;
}

/*end work service 2*/

/*start work service 

.wokservices3 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	overflow: hidden;
}

.wokservices3 .wok12 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices3 .wok12 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 5%;
}

.wokservices3 .wok12 h3 {
	text-align: center;
}

.wokservices3 .wok12 p {
	text-align: center;
}

.wokservices3 .wok13 {
	max-width: 340px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices3 .wok13 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
}

.wokservices3 .wok13 h3 {
	text-align: center;
}

.wokservices3 .wok13 p {
	text-align: center;
}

.wokservices3 .wok14 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices3 .wok14 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
}

.wokservices3 .wok14 h3 {
	text-align: center;
}

.wokservices3 .wok14 p {
	text-align: center;
}
.wokservices3 .wok15 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices3 .wok15 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
}

.wokservices3 .wok15 h3 {
	text-align: center;
}

.wokservices3 .wok15 p {
	text-align: center;
}
/*end work service 3*/

/*start work service 4

.wokservices4 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	overflow: hidden;
}

.wokservices4 .wok16 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices4 .wok16 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}

.wokservices4 .wok16 h3 {
	text-align: center;
}

.wokservices4 .wok16 p {
	text-align: center;
}

.wokservices4 .wok17 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices4 .wok17 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}

.wokservices4 .wok17 h3 {
	text-align: center;
}

.wokservices4 .wok17 p {
	text-align: center;
}

.wokservices4 .wok18 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices4 .wok18 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}

.wokservices4 .wok18 h3 {
	text-align: center;
}

.wokservices4 .wok18 p {
	text-align: center;
}
.wokservices4 .wok19 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices4 .wok19 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}

.wokservices4 .wok19 h3 {
	text-align: center;
}

.wokservices4 .wok19 p {
	text-align: center;
}
/*end work service 4*/
/*start work service 5*

.wokservices5 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	overflow: hidden;
}

.wokservices5 .wok20 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices5 .wok20 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}

.wokservices5 .wok20 h3 {
	text-align: center;
}

.wokservices5 .wok20 p {
	text-align: center;
}

.wokservices5 .wok21 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices5 .wok21 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}

.wokservices5 .wok21 h3 {
	text-align: center;
}

.wokservices5 .wok21 p {
	text-align: center;
}

.wokservices5 .wok22 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices5 .wok22 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}

.wokservices5 .wok22 h3 {
	text-align: center;
}

.wokservices5 .wok22 p {
	text-align: center;
}

.wokservices5 .wok23 {
	max-width: 250px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}

.wokservices5 .wok23 img {
	max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}

.wokservices5 .wok23 h3 {
	text-align: center;
}

.wokservices5 .wok23 p {
	text-align: center;
}
/*end work service 5*/

























/*end wok Services*/

/*Win Services*/
.winservices {
	max-width: 1080px;
	height: auto;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px; 
	overflow: hidden;
}

.winservices img {
	max-width: 300px;
	height: auto;
	border: 1px solid #dedede;
	padding: 20px;
	float: left;
}
 .winservices h2{
 	margin-top: 60px;
 	color: green;
 }


.winservices0 {
	max-width: 1080px;
	border: 1px solid #dedede;
	background: #e5e5e5;
	padding: 10px 5px;
	overflow: hidden;
}

.winservices0 .win {
	max-width: 530px;
	border: 1px solid #dedede;
	float: left;
	margin: 5px 5px;
}


.winservices0 .win img {
	max-width: auto;
	height: 70px;
	margin: 5px 0px;
}

.winservices0 .win h3 {
	text-align: center;
	color: black;
}

.winservices0 .win p {
	text-align: left;
}

.winservices0 .win1 {
	max-width: 500px;
	float: left;
	border: 1px solid #dedede;
	margin: 5px 5px;
}


.winservices0 .win1 img {
	max-width: auto;
	height: 70px;
	margin: 5px 0px;
}

.winservices0 .win1 h3 {
	text-align: center;
	color: black;
}

.winservices0 .win1 p {
	text-align: left;

}
/*Akhir Win Services*/
/*Akhir About Us*/




/*Career*/
.career {
	max-width: 1080px;
	height: auto;
	background: black;
	padding-top: 150px;
}

.career h2 {
	color: white;
	text-align: center;
}

.isi-career {
	width: 100%;
	border: 1px solid #dedede;
	padding: 20px;
	overflow: hidden;
	background: darkred;
}

.isi-career img {
	max-width: 100%;
	height: auto;
	float: left;
	padding: 10px;
}

.isi-career p {
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 10px;
}

.isi-career h4 {
	color: white;
	text-align: center;
	text-decoration: none;
}

.isi-career h4 a {
	color: white;
	text-align: center;
	text-decoration: none;
}

.isi-career h4 a:hover {
	color: blue;
}




/*Akhir Career*/


/*Contac*/
.contact-us-1 {
	max-width: 1080px;
	height: 275px;
	margin-top: 100px;
}
.contact-us-1 img {
	width: 540px;
	height: 275px;
	float: left;
}

.contact-us {
	max-width: 1080px;
	height: 55px;
	background: black;
}

.contact-us h2 {
	color: white;
}

.isi-contact-us {
	width: 100%;
	overflow: hidden;
	background: darkred;
}

.isi-contact-us p {
	color: white;
	margin: 25px 25px 25px 25px;
	text-align: left;
	text-align: justify;
}

.isi-contact-us h2 {
	color: white;
	text-align: center;
}
/*Akhir Contac*/


/*Activity*/
.activity {
	max-width: 1080px;
	border: 1px solid #dedede;
	height: auto;
	margin-top: 130px;
}
.activity img {
	max-width: 100%;
	height: auto;
}

.activity-1 {
	max-width: 1080px;
	border: 1px solid #dedede;
	height: 55px;
	background: black;
}

.activity-1 h2 {
	color: white;
	margin: 5px;
	text-align: center;
	padding-top: 15px;
}

.isi-activity img {
	max-width: 45%;
	height: auto;
	margin: 15px 15px 15px 15px;
	float: left;
}

.isi-activity {
	max-width: 100%;
	border: 1px solid #dedede;
	overflow: hidden;
	background: darkred;
}

.isi-activity p {
	color: white;
	font-size: 25px;
	margin: 15px 15px 15px 15px;
	text-align: left;
	text-align: justify;
}

.isi-activity2 {
	max-width: 100%;
	border: 1px solid #dedede;
	background: darkred;
}

.isi-activity2 img {
	max-width: 45%;
	height: auto;
	margin: 15px 15px 15px 15px;
	float: left;
}

.isi-activity2 p {
	color: white;
	font-size: 25px;
	margin: 15px 15px 15px 15px;
	text-align: left;
	text-align: justify;
}

.isi-activity2 h2 {
	color: white;
	padding: 20px 0 10px 20px;
}

.isi-activity3 {
	max-width: 100%;
	border: 1px solid #dedede;
	background: darkred;
}

.isi-activity3 img {
	max-width: 45%;
	height: auto;
	margin: 15px 15px 15px 15px;
	float: left;
}

.isi-activity3 p {
	color: white;
	font-size: 25px;
	margin: 15px 15px 15px 15px;
	text-align: left;
	text-align: justify;
}

.isi-activity3 h2 {
	color: white;
	padding: 20px 0 10px 20px;
}
/*Akhir Activity*/





/*Navmenu*/
/*Strip the ul of padding and list styling*/
ul {
 list-style-type:none;
 margin-left:0;
 padding:0;
 position: static;
}

/*Create a horizontal list with spacing*/
li {
 display:inline-block;
 float: left;
 margin-right: 0px;
}
/*Style for menu links*/
li a {
 display:block;
 min-width:110px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 color: #fff;
 background: #C0791E;
 text-decoration: none;
 padding-left: 0px;
}
li.active a {  
background-color: #63390A;
}

/*Hover state for top level links*/
li:hover a {
 background: #63390A;
}

/*Style for dropdown links*/
li:hover ul a {
 background: #DCB679;
 color: #2f3036;
 height: 40px;
 line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
 background: #63390A;
 color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
 display: none;
}

/*Make dropdown links vertical*/
li ul li {
 display: block;
 float: none;
}

/*Prevent text wrapping*/
li ul li a {
 width: auto;
 text-align: left;
 min-width: 100px;
 padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
 display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-decoration: none;
 color: #fff;
 background: #11A092;
 text-align: left;
 padding: 10px 0;
 display: none;
 padding-left: 20px;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 1080px){
 /*Make dropdown links appear inline*/
 ul {
  position: static;
  display: none;
 }
 /*Create vertical spacing*/
 li {
  margin-bottom: 1px;
 }
 /*Make all menu links full width*/
 ul li, li a {
  width: 70%;
 }
 /*Display 'show menu' link*/
 .show-menu {
  display:block;
 }
}

/*end-navmenu*/
























/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
	
	.container {
		width: 100%;
	}
	.left {
		width: 100%;
		background: red;
	}
	.middle {
		width: 68%;
		float: right;
	}
	
	.right {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 350px) {
	
	.header,.header .kiri 
	.footer{
		text-align: center;
	}
.header .kanan {
	text-align: center;
	float:none;
	}
	.left {
		width: auto;
		float: none;
	}
	
	.middle {
		width: auto;
		float: none;
	}
	
	.right {
		width: auto;
		float: none;
	}
	.cover img {
		max-width: 100%;
		height: auto;
		float: none;
	}
}