*{
	padding: 0;
	margin: 0;
    box-sizing: border-box;
}


body{
	background-image:url(../images/BACKGROUNDIMAGE.jpg);
	background-repeat:repeat;
	font-family: 'Helvetica', arial, sans-serif;
	font-size: 15px;
}

p{
	margin-bottom: 20px;
	line-height: 1.5em;
}

a{
	text-decoration: none;
	color: #333;
}
	a:hover{
	color: #666;

}

.container{
    max-width: 1000px;
	background-image:url(../images/main_background_TIU.jpg);
	background-repeat:no-repeat;
	margin:10px auto;
    overflow: hidden;
	padding: 0px;
}

.landing-page.full-height {
	margin-top:100px;
	font-size:22px;
	text-align:center;
    height:400px; }

.history_text1{
		width:60%;
		margin-left:50px;
		text-align:justify;
}

.history_text2{
		width:auto;
		margin-left:50px;
		margin-right:50px;
		text-align:justify;
}

.history_text2_prodetail{
		width:auto;
		margin-left:30px;
		margin-right:50px;
		text-align:justify;
}

.history_text2_contactus{
		width:auto;
		margin-left:50px;
		margin-right:50px;
		text-align:justify;
}

.filosofi_text1{
		width:65%;
		margin-left:50px;
		text-align:justify;
}

.filosofi_text2{
		width:auto;
		margin-left:50px;
		margin-right:50px;
		text-align:justify;
}

.container_komitmen{
    max-width: 1024px;
	background:url(../images/background_komitmen.jpg);
	background-repeat:no-repeat;
	margin: 10px auto;
    overflow: hidden;
	padding: 10px;
}

.komitmen_text1{
		width:65%;
		margin-left:50px;
		text-align:justify;
}

.komitmen_text2{
		width:auto;
		margin-left:50px;
		margin-right:50px;
		text-align:justify;
		padding-bottom:80px;
}

.container_tanggungjawab{
    max-width: 1024px;
	background:url(../images/background_tanggungjawab.jpg);
	background-repeat:no-repeat;
	margin: 10px auto;
    overflow: hidden;
	padding: 10px;
}

.tg_text1{
	width:75%;
	margin-left:50px;
	text-align:justify;
}

.tg_text2{	
	width:40%;
	margin-left:80px;
	padding-top:15px;
	text-align:justify;
	float:left;
}

.tg_right{
	width:40%;
	margin-right:80px;
	float:right;
	padding-top:15px;
	text-align:justify;
	padding-bottom:10px;
	}

.tg_text3{
	width:auto;
	margin-left:50px;
	margin-right:50px;
	margin-bottom:30px;
	text-align:left;
}

.tg_img_left{
	width:330px;
	float:left;
	margin-left:50px;
	margin-bottom:10px;
}

.tg_img_left img{
	max-width:100%;
	height:auto;
	padding-bottom:30px;
}

.tg_img_middle{
    width: 300px;
	float: left;
	
}

.tg_img_middle img{
	max-width: 100%;
	height: auto;
	padding-bottom:30px;
}

.tg_img_right{
	width: 300px;
	float: right;
	margin-bottom:10px;
}

.tg_img_right img{
	max-width: 100%;
	height: auto;
	padding-bottom:30px;
}

.header{
	background-color:#CCC;
	text-align:center;
	padding: 0px;
	margin: 0px;
/*	margin-bottom:10px;*/
	width:100%;
	height:auto;
/*	height:96px;*/
}

/* Main */
	.left{
		width:100%;
		/*border: 1px solid #dedede;*/
		/*background: #e5e5e5;*/
		padding: 0px;
		margin-top:0px;
        float:left;
	}

	
	.left img{
		max-width:100%;
		height:auto;
	}
	
	.leftprodetail{
		width: 300px;
		background: #e5e5e5;
		padding: 10px;
		margin: 10px;
		float: left;
		margin-left:20px;
	}

	.middle{
		width: 300px;
		float:left;
		padding:10px;
		margin: 10px;
	}
	
	.middle img{
		max-width: 100%;
		height: auto;
	}


	.right{
		width: 300px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}
	
	.right img{
		min-width:100%;
		height:auto;
	}

	.right ul{
		list-style-type: none;
	}
	.right ul li{
		display: block;
	}
	.right ul li a{
		display: block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 10px;
		padding: 10px 5px;
	}
	.right ul li a:hover{
		color: orange;
	}


	.footer{
		clear:both;
		width:100%;
		padding-top:10px;
		background-color:#CCC;
		/*color:#666;*/
		color:#000;
		font-weight:bold;
		font-size:10px;
		text-align:center;
        border: 1px solid #CCC;
	/*
	padding:5px;
		margin: 5px;*/
	}
			
	.footer a{
		color:#000;
	}
	
	.footer a:hover{
		color:#FFF;
	}
	
	#headertopmenu li{
		display:inherit;
	}

	#footermenu{
		/* if position:absolute then use right not float */
		position:relative;
		list-style:none;
		text-align:center;
		margin-top:0;
		padding-top:0px;
		color:#000;
		font-size:14px;
	}
	
	#footermenu li{
		padding:5px 0px 5px 0px;
		display:inline-block;
	}
	
	#footermenu a:hover{
		text-decoration:underline;
		color:#999;
	}
	
	#footermenu a{
		color:#000;
		text-decoration:none;
	}
    
	.navigation_position{
		width:50%;
		text-align:center;
	}
	
	.ad-left{
		width:50%;
		margin-left:50px;
		margin-bottom:20px;
		float:left;
	}

    .footer_index{
		padding:0;
		}
	
	.ad-right{
		width:40%;
    	float:right;
		padding-left:0px;
		text-align::left;
		padding-right:50px;
	}

	.contactus_detail{
		width:auto;
		margin-left:50px;
		margin-right:50px;
		text-align:justify;
	}
    
	.contactus_left{
		float:left;
		width:550px;
		text-align:left;
		font-size:22px;
		padding-bottom:10px;
	}
	
	.contactus_right{
		float:left;
		width:350px;
		padding-right:30px;
		padding-left:80px;
		text-align:left;
		padding-bottom:5%;
	}
	
	.slideshow_index{
		float:right;
		padding-top:20px;
		padding-bottom:20px;
		padding-right:75px;
	}



/* =======================30 Aug 2018============================ */

.contact-us {
  padding: 0 15px 30px; }
  @media (min-width: 992px) {
    .contact-us {
      padding: 20px 30px 30px; } 
}
	  
  .contact-us h3 {
    color: #ffffff;
    margin-bottom: 20px;
    margin-top: 0; }
  .contact-us p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px; }
  .contact-us .information {
    margin: 0;
    margin-bottom: 20px;
    color: #C2883A;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #1e1e1e;
    padding-bottom: 20px; }
    .contact-us .information .company-name {
      font-size: 25px; }
    .contact-us .information i {
      font-size: 25px;
      vertical-align: middle;
      margin-right: 15px; }
    .contact-us .information div {
      line-height: 40px; }
    .contact-us .information:last-child {
      border: none; }
    .contact-us .information .info-content {
      width: 80%; }
  .contact-us label {
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 18px;
    text-transform: none;
    /*color: #ffffff;*/
	color:#000;}
    .contact-us label.error {
      display: block;
      color: red;
      text-align: right; }
  .contact-us input, .contact-us textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin-bottom: 15px;
    padding: 8px 12px;
    font-size: 16px;
    border-color: transparent;
    border-width: 2px;
    color: #ffffff;
   box-shadow: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-style: solid; }
  .contact-us input {
    height: 40px; }
  .contact-us button {
    margin-top: 10px;
    min-width: 150px;
    border-radius: 6px;
    background-color:#8C0000;
    color: #ffffff; }
    .contact-us button:hover {
      background-color:#590000;
      color: #ffffff; }


/* =============================end oode 28 Aug 2018================================= */
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

/************************************************************************************
FOR MENU NAVIGATION
*************************************************************************************/

.header_navigation{
	width:100%;
    background-color:#CCC;
	height:40px;
	position:relative;
	top:0;
	/*border-bottom:4px solid #4c9cf1;*/
	z-index:1000;
}

nav{
	float:inherit;
	padding:0px;
}
	
#menu-icon{
	display:hidden;
	width:100px;
	height:31px;
	background:url(../images/menuicon_used.png);
}

nav ul{list-style:none;}

nav li{ display:inherit; padding:0px;}

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

.header_navigation{
	width:auto;
	height:40px;
	top:0;
	left:0px;
	}
	
	nav{
	float:left;
	padding:0px;}
	
#menu-icon{
	display:inline-block;}

nav ul, nav:active ul{
	display:none;
	position:absolute;
	padding:0px;
/*	background:#FF0;*/
	background:#FFF;
	border: 10px solid #5b5a5a;
/*	right:20px;*/
	top:10px;
	width:188px;
}

nav li{
	width:100%;
	text-align:left;
	padding:0;
	margin:0;
}

nav li img{
	width:100%;
}

nav:hover ul{
	display:block;
}

/************************************************************************************


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
	
	.container{
		width: 100%;  
	}
	
	.container_history{
		width:100%;
		padding:10px;
	}
	
	.container_brand{
		width:100%;
	}
	
	.container_karir{
		width:100%;
	}
	
	.container_contactus{
		width:100%;
	}
	
	.container_filosofi{
		width:100%;
	}
	
	.container_komitmen{
		width:100%;
	}
	
	.container_tanggungjawab{
		width:100%;
	}
	
	.left {
		width:auto;
		text-align:center;
		padding:inherit;
	}
	
	.middle {
		margin:auto;
		width: auto;
		float: none;
	}
	
	
	.right {
		clear: both;
		width: auto;
		float: none;
	}


	.header{
		clear:both;
		width:auto;
		background-image:none;
		text-align:center;
	}
	


	.footer_index{
		padding:0;
	}
	
	.navigation_position{
		width:auto;
		text-align:center;
	}
	
}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {
	
	body {
		background-color:#f5e9d4;
	}
	
	.container{
		background-image:url(../images/mobile_background_TIU.jpg);
		background-repeat:no-repeat;
		overflow:hidden;
		padding:5px;
	}
	
	.landing-page.full-height {
	    margin-top:80px;
		font-size:17px;
		text-align:center;
    	height:250px; 
	}
	
	.container_history{
    	background:none;
	}
	
	.container_brand{
		background:none;
	}
	
	.container_karir{
    	background:none;
	}
	
	.container_contactus{
		background:none;
	}
	
	.container_filosofi{
		background:none;
	}
	
	.container_komitmen{
		background:none;
	}
	
	.container_tanggungjawab{
		background:none;
	}
	
	.header{
		clear:both;
		width:auto;
		background-image:none;
	}
	
	.header img{
		text-align:center;
		max-width: 100%;
		height: auto;
	}

	.footer{
		color:#000;
		text-align: center;
	}
		
	.left{
		margin:auto;
		width: auto;
		float: none;
	}
	
	.leftprodetail{
		margin:auto;
		width: auto;
		float: none;
	}
	
/*	.left img{width:100%; height:auto;}*/
	
	.middle {
		width: auto;
		float: none;
	}
	
	.right {
		width: auto;
		float: none;
	}

   #footermenu li{
    	padding:3px 10px 5px 15px;
	    display:inline-block;
}

   .navigation_position{
		width:auto;
		left:0px;
	}
	
    .history_text1{
		width:auto;
		margin:0;
		text-align:justify;
	}

    .history_text2{
		width:auto;
		margin:0px;
		text-align:justify;
	}
	
	.history_text2_prodetail{
		width:auto;
		margin:0px;
		text-align:left;
    }
	
	.history_text2_contactus{
		width:auto;
		margin:0px;
		text-align:justify;
}

	.ad-left{
		width:auto;
		float:none;
		padding:0;
		margin-left:auto;
		text-align:justify;
	}

	.ad-right{
		width:auto;
		float:none;
		padding:0;
		padding-top:20px;
		font-size:16px;
		text-align:justify;
		margin-bottom:20px;
	}
	
	.contactus_left{
		width:auto;
		float:none;
		text-align:left;
		font-size:14px;
		padding-bottom:2%;
	}
	
	
	.contactus_right{
		float:left;
		width:350px;
		padding-right:30px;
		padding-left:80px;
		text-align:left;
		padding-bottom:5%;
	}
	
	.contactus_right{
		width:auto;
		float:none;
		text-align:left;
		font-size:14px;
		padding-left:10px;
		padding-bottom:18px;
	}
	
	.contactus_detail{
		width:auto;
		margin:0px;
		text-align:left;
	}
	
    .filosofi_text1{
		width:auto;
		margin:0;
		text-align:justify;
	}

    .filosofi_text2{
		width:auto;
		margin:0;
		text-align:justify;
	}
	
	.komitmen_text1{
		width:auto;
		margin:0;
		text-align:justify;
	}

    .komitmen_text2{
		width:auto;
		margin:0;
		text-align:justify;
		padding-bottom:inherit;
	}
	
	.tg_text1{
		width:auto;
		margin:0;
		text-align:justify;
	}
	
	.tg_text2{
		width:auto;
		margin:0px;
		text-align:center;
		float:none;
	}
	
	.tg_right{
		width:auto;
		margin:0px;
		text-align:center;
		float:none;
	}
	
	.tg_text3{
		width:auto;
		float:inherit;
		margin:0;
		padding-left:10px;
		text-align:justify;
		padding-bottom:20px;
	}
    	
	.tg_img_left{
		width:auto;
		margin:0;
		float:none;
		text-align:center;
		padding-bottom:10px;
	}
	
	.tg_img_middle{
		width:auto;
		float:inherit;
		text-align:center;
		padding-bottom:10px;		
	}
	
	.tg_img_right{
		width:auto;
		float:none;
		padding-bottom:0px;
		text-align:center;
	}
	
	.footer_index{
		padding-right:10px; 
		padding-left:10px;
	}
	
	.slideshow_index{
		float:none;
		padding:10px;
	}

	.navigation_position{
		width:auto;
		text-align:center;
	}
}