/* ----------------------------------------------------------------
	Responsive CSS
-----------------------------------------------------------------*/

@media (min-width: 992px) and (max-width: 1199px) {
	/*===========Header===========*/
	#header .logoReport{height:90px;}	
	
	/*===========Menu===========*/
	#content .content-wrap .main-menu{width:24%;}
	
	/*===========Content===========*/
	#content .content-wrap .main-index{width:76%; min-height:750px;}
	#content .content-wrap .main-content{padding:20px; width:76%;}
	
	/*===========Content (Index Page)===========*/
	#content .content-wrap .main-index .caption{top:35px; left:45px;}
	#content .content-wrap .main-index .caption_1{font-size:29px;}
	#content .content-wrap .main-index .caption_2{font-size:14px; line-height:1.2em}
	#content .content-wrap .main-index .caption_2 .title{width:235px;}
	#content .content-wrap .main-index .banner{margin-top:200px;}
	
	/*===========Induction (Corporate Page)===========*/
	.corporate_profile_setHeight{height:550px;}
	
	/*===========Induction (Highlight Page)===========*/
	.wrap .divide{width:103%;}
	.wrap .wrap-img .right{margin-right:30px;}
	.wrap .wrap-content{display:block; margin-bottom:10px !important;}
	.wrap .wrap-content .hightlight{float:left; font-size: 11pt; margin-bottom:0;}
	.wrap .wrap-content .hightlight b{font-size: 22pt;}
	.height122{height:122px;}	
	.height140{height:140px;}
	.height170{height:170px;}
	
	
	/*===========Induction (Sustainability Page)===========*/	
	table.Stakeholder.Materiality tr td.title{width:160px;}

	table.CapitaADN{width:95%;}
	
	/*===========GRI (GRI Index Page)===========*/
	.griIndex_logo{position:absolute; top:22px; right:20px; width:160px;}
}


@media (min-width: 768px) and (max-width: 991px) {
	.width-md{width:100% !important;}
	.display-responsive-md{display:block;}
	.hide-responsive-md{display:none;}
	/*===========Header===========*/
	#header .container{width:100%;}
	#header .logo{height:60px;}
	#header .logoReport{height:80px;}

	/*===========Menu===========*/
	#content .content-wrap .main-menu{width:24%;}
	
	/*===========Content===========*/
	#content .container{width:100%;}
	#content .content-wrap .main-index{width:76%; min-height:750px;}
	#content .content-wrap .main-content{padding:20px; width:76%;}
	
	/*===========Content (Index Page)===========*/	
	#content .content-wrap .main-index .caption{top:35px; left:45px;}
	#content .content-wrap .main-index .caption_1{font-size:29px;}
	#content .content-wrap .main-index .caption_2{font-size:14px; line-height:1.2em}
	#content .content-wrap .main-index .caption_2 .title{width:235px;}
	#content .content-wrap .main-index .banner{margin-top:200px;}
		
	/*===========Footer===========*/
	#footer .social {border-top:none; padding:20px 0; width:100%; text-align:center;}
	#footer .social .right{text-align:center;}
	#footer .social ul.terms{ display:inline-block; width:auto;}

	#footer .social .follow{font-size:15px; display:block; padding:18px 0;}
	#footer .social ul.social-icon{display:inline-block; width:auto; float:none;}
	#footer .social ul.social-icon > li{width:35px; height:35px; margin:0 5px; padding:4px 0 0 1px;}
	#footer .social ul.social-icon > li > a > span{font-size:20px;}
		
	/*===========Induction (Highlight Page)===========*/
	.wrap .divide{width:104%;}
	.wrap .wrap-img .right{margin-right:30px;}
	.wrap .wrap-content{display:block; margin-bottom:0;}
	.wrap .wrap-content .hightlight{float:left; font-size: 11pt; margin-bottom:10px;}
	.wrap .wrap-content .hightlight .hightlight-content{float:none;}
	.wrap .wrap-content .hightlight b{font-size: 22pt;}
	.height122{height:140px;}	
	.height140{height:140px;}
	.height170{height:150px;}
	
	/*===========Induction (Sustainability Page)===========*/	
	table.Stakeholder.Materiality tr td.title{width:140px;}

	table.CapitaADN{width:100%;}
	table.CapitaADN tr th{padding:4px 0;}
	table.CapitaADN tr td{padding:4px 8px;}
	
	/*===========Induction (Organisational Page)===========*/	
	.bribery_corruption tr td.title{width:140px; font-size:11pt;}
	.bribery_corruption tr td{font-size:11pt;}
	.bribery_corruption tr td.width420{width:350px !important;}
	
	/*===========Environment (Tracking System Page)===========*/
	.total_carbon_emissions{float:none; padding-left:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.total_carbon_emissions img{width:300px !important;}
	.total_carbon_emissions_bar{width:450px; margin:0 auto; margin-bottom:20px;}
	.total_carbon_intensity_bar{width:400px; margin:0 auto; margin-bottom:20px;}
	.total_carbon_intensity_bar img{width:100% !important;}
	.total_energy_usage_bar{width:450px; margin:0 auto; margin-bottom:20px;}
	.total_energy_intensity_bar{width:400px; margin:0 auto; margin-bottom:20px;}
	.total_energy_intensity_bar img{width:100% !important;}
	.total_water_usage_bar{width:450px; margin:0 auto; margin-bottom:20px;}
	.total_water_intensity_bar{width:400px; margin:0 auto; margin-bottom:20px;}
	.total_water_intensity_bar img{width:100% !important;}
	
	/*===========Human (Human Capital Page)===========*/
	.project{width:50% !important}
	
	/*===========Human (Human Right Page)===========*/
	.global_workforce_nationality{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_age{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_educational{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_gender{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.human_profile_title{margin-left:0;}
	.human_profile_title_female{display:none !important;}
	.human_profile_male{ margin-left:0; padding-right:0; width:190px;}
	.human_profile_female{ padding-right:0; width:300px; margin-bottom:20px;}	
	.human_staff{float:none; padding-left:0; width:400px; margin:0 auto; margin-bottom:20px;}	
	.human_staff img{width:100% !important;}
	
	/*===========Social Responsibility (Guidance Social Responsibility Page)===========*/
	table.Responsibility tr td:last-child{width:240px !important; }
	
	/*===========GRI (GRI Index Page)===========*/
	.griIndex_logo{position:absolute; top:22px; right:20px; width:160px;}
}


@media (min-width: 480px) and (max-width: 767px) {
	html, body{font-size:11pt;}
	h1{font-size:25.5pt;}
	h2{font-size:15pt;}
	h3{font-size:12.5pt;}
	.width-sm{width:100% !important;}
	
	.md-margin-left-10{margin-left:0;}
	.md-margin-right-10{margin-right:0;}
	
	.display-responsive-sm{display:block;}
	.hide-responsive-sm{display:none;}
	
	header{display:block;}
	#header{padding:0;}
	#header .logo{position: absolute; top:10px; height:50px;}
	#header .logoReport{display:none;}
	
	/*===========Menu===========*/
	#content .content-wrap .main-menu{display:none;}
	#content .content-wrap .main-index{padding:0; width:100%; border-left:none; min-height:0;}
	#content .content-wrap .main-content{padding:20px; width:100%; float:none; border-left:none; min-height:0;}
	
	/*===========Content (Index Page)===========*/	
	#content .content-wrap .main-index .caption{top:35px; left:40px;}
	#content .content-wrap .main-index .caption_1{font-size:27px;}
	#content .content-wrap .main-index .caption_2{font-size:12.5px; line-height:1.2em}
	#content .content-wrap .main-index .caption_2 .title{width:220px;}
	#content .content-wrap .main-index .banner{margin-top:200px;}
		
	/*===========Footer===========*/
	#footer .footer-links {width:100%; margin:0; padding:20px 15px; list-style-type:none;}
	#footer .footer-links > li{color:#fff; cursor:pointer; display:block; width:100%; padding:10px 0; border-bottom:1px solid #585858;}
	#footer .footer-links > li > ul{display:none; width:100%; text-transform:capitalize; margin-top:10px;}
	#footer .footer-links > li > ul > li > a:hover{text-decoration:underline;}
	#footer .footer-links > li:after{content: "\f107"; font-family:"awesome"; font-size:25px; position:absolute; top:10px; right:0;}
	#footer .footer-links > li.up:after{content: "\f106"; font-family:"awesome"; font-size:25px; position:absolute; top:10px; right:0;}
		
	#footer .social {border-top:none; padding:20px 0; width:100%; text-align:center;}
	#footer .social .right{text-align:center;}
	#footer .social ul.terms{ display:inline-block; width:auto;}

	#footer .social .follow{font-size:15px; display:block; padding:18px 0;}
	#footer .social ul.social-icon{display:inline-block; width:auto; float:none;}
	#footer .social ul.social-icon > li{width:35px; height:35px; margin:0 5px; padding:4px 0 0 1px;}
	#footer .social ul.social-icon > li > a > span{font-size:20px;}
		
	#footer .copyright, #footer .copyright p{text-align:center;}
	#footer .footer-logo{float:none;}
	/*===========Induction (Corporate Page)===========*/
	.corporate_profile_setHeight{height:100%;}
	
	/*===========Induction (Highlight Page)===========*/
	.wrap img{height:65px;}
	.wrap .divide{height:12px; width:100%; margin-left:-20px; margin-bottom:20px;}
	.wrap .wrap-img .right{margin-right:30px;}
	.wrap .wrap-content{display:block; margin-bottom:0;}
	.wrap .wrap-content .hightlight{float:left;  font-size: 11pt; margin-bottom:10px;}
	.wrap .wrap-content .hightlight .hightlight-content{float:none;}
	.wrap .wrap-content .hightlight b{font-size: 22pt;}
	.height122{height:105px;}	
	.height140{height:135px;}
	.height110{height:110px !important;}
	.height170{height:170px;}
	
	/*===========Induction (Sustainability Page)===========*/	
	table.Stakeholder tr td{padding:8px 10px;}	
	
	table.Stakeholder.Materiality tr td.title{width:120px;}

	table.CapitaADN{width:100%;}
	table.CapitaADN tr th{padding:3px 0; font-size:10pt;}
	table.CapitaADN tr td{padding:3px 5px; font-size:10pt;}
	
	/*===========Induction (Organisational Page)===========*/
	.bribery_corruption tr td.title{width:150px !important;}
	.bribery_corruption tr td.width420{width:300px !important;}
	
	/*===========Environment (Tracking System Page)===========*/
	.total_carbon_emissions{float:none; padding-left:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.total_carbon_emissions img{width:300px !important;}
	.total_carbon_emissions_bar{width:450px; margin:0 auto; margin-bottom:20px;}
	.total_carbon_intensity_bar{width:400px; margin:0 auto; margin-bottom:20px;}
	.total_carbon_intensity_bar img{width:100% !important;}
	.total_energy_usage_bar{width:450px; margin:0 auto; margin-bottom:20px;}
	.total_energy_intensity_bar{width:400px; margin:0 auto; margin-bottom:20px;}
	.total_energy_intensity_bar img{width:100% !important;}
	.total_water_usage_bar{width:450px; margin:0 auto; margin-bottom:20px;}
	.total_water_intensity_bar{width:400px; margin:0 auto; margin-bottom:20px;}
	.total_water_intensity_bar img{width:100% !important;}
	
	/*===========Human (Human Capital Page)===========*/
	.project{width:50% !important;}
	
	/*===========Human (Human Right Page)===========*/
	.global_workforce_nationality{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_age{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_educational{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_gender{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.human_profile_title{margin-left:0;}
	.human_profile_title_female{display:none !important;}
	.human_profile_male{ margin-left:0; padding-right:0; width:190px;}
	.human_profile_female{ padding-right:0; width:300px; margin-bottom:20px;}	
	.human_staff{float:none; padding-left:0; width:400px; margin:0 auto; margin-bottom:20px;}	
	.human_staff img{width:100% !important;}
	
	/*===========Social (Community Development Page)===========*/
	.social_staff{float:none; padding-left:0; width:320px; margin:0 auto; margin-bottom:20px;}	
	.social_staff img{width:100% !important;}
	
	/*===========Social Responsibility (Guidance Social Responsibility Page)===========*/
	table.Responsibility tr td:last-child{width:240px !important; }
	
	/*===========GRI (GRI Index Page)===========*/
	.griIndex_logo{position:relative; top:0; right:0; margin-bottom:20px; text-align:right; width:100%;}
	.griIndex_logo img{width:200px;}
}

@media (max-width: 479px) {
	html, body{font-size:11pt;}
	h1{font-size:25.5pt;}
	h2{font-size:15pt; }
	h3{font-size:12.5pt; }	
	.width-xs{width:100% !important;}
	
	.md-margin-left-10{margin-left:0;}
	.md-margin-right-10{margin-right:0;}
	
	.display-responsive-xs{display:block;}
	.hide-responsive-xs{display:none;}
	
	header{display:block;}
	#header{padding:0;}
	#header .logo{position: absolute; top:10px; height:50px;}
	#header .logoReport{display:none;}
		
	/*===========Menu===========*/
	#content .content-wrap .main-menu{display:none;}
	#content .content-wrap .main-index{padding:0; width:100%; border-left:none; min-height:0;}
	#content .content-wrap .main-content{padding:20px 20px 40px 20px; width:100%; float:none; border-left:none; min-height:0;}
	
	/*===========Content (Index Page)===========*/
	#content .content-wrap .main-index .caption{top:25px; left:30px;}
	#content .content-wrap .main-index .caption_1{font-size:22px;}
	#content .content-wrap .main-index .caption_2{font-size:12px; line-height:1.2em}
	#content .content-wrap .main-index .caption_2 .title{width:220px;}
	#content .content-wrap .main-index .banner{border-top:13px solid #00a55d; margin-top:170px; padding-top:13px;}
	
	/*===========Footer===========*/
	#footer .footer-links {width:100%; margin:0; padding:20px 15px; list-style-type:none;}
	#footer .footer-links > li{color:#fff; cursor:pointer; display:block; width:100%; padding:10px 0; border-bottom:1px solid #585858;}
	#footer .footer-links > li > ul{display:none; width:100%; text-transform:capitalize; margin-top:10px;}
	#footer .footer-links > li > ul > li > a:hover{text-decoration:underline;}
	#footer .footer-links > li:after{content: "\f107"; font-family:"awesome"; font-size:25px; position:absolute; top:10px; right:0;}
	#footer .footer-links > li.up:after{content: "\f106"; font-family:"awesome"; font-size:25px; position:absolute; top:10px; right:0;}
		
	#footer .social {border-top:none; padding:20px 15px; width:100%; text-align:center;}
	#footer .social .right{text-align:center;}
	#footer .social ul.terms{ display:inline-block; width:auto;}

	#footer .social .follow{font-size:15px; display:block; padding:18px 0;}
	#footer .social ul.social-icon{display:inline-block; width:auto; float:none;}
	#footer .social ul.social-icon > li{width:35px; height:35px; margin:0 5px; padding:4px 0 0 1px;}
	#footer .social ul.social-icon > li > a > span{font-size:20px;}
		
	#footer .copyright, #footer .copyright p{text-align:center;}
	#footer .footer-logo{float:none;}
	/*===========Induction (Corporate Page)===========*/
	.corporate_profile_setHeight{height:100%;}
	
	/*===========Induction (Highlight Page)===========*/
	.wrap img{height:60px;}
	.wrap .divide{height:12px; width:105%; margin-left:-20px; margin-bottom:20px;}
	.wrap .wrap-img .right{margin-right:20px;}
	.wrap .wrap-content{display:block; margin-bottom:0;}
	.wrap .wrap-content .hightlight{float:left; font-size: 11pt; margin-bottom:10px;}
	.wrap .wrap-content .hightlight .hightlight-content{float:none;}
	.wrap .wrap-content .hightlight b{font-size: 22pt;}
	.height122{height:130px;}	
	.height140{height:165px;}
	.height110{height:135px !important;}
	.height170{height:165px;}
	
	/*===========Induction (Sustainability Page)===========*/	
	table.Stakeholder tr td{ font-size:10pt;}
	
	table.Stakeholder.Materiality tr td.title{width:110px;}
	
	/*===========Induction (President Page)===========*/
	.ceo-img-caption{padding:5px 8px; font-size:8pt;}
	
	/*===========Environment (Tracking System Page)===========*/
	.total_carbon_emissions{float:none; padding-left:0; width:250px; margin:0 auto; margin-bottom:20px;}
	.environment-Stakeholder-width{width:100px !important;}
	/*===========Human (Human Capital Page)===========*/
	.project{width:50% !important;}
	
	/*===========Human (Human Right Page)===========*/
	.global_workforce_nationality{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_age{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_educational{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.global_workforce_gender{padding-right:0; width:300px; margin:0 auto; margin-bottom:20px;}
	.human_profile_title{margin-left:0;}
	.human_profile_title_female{display:none !important;}
	.human_profile_male{ margin-left:0; padding-right:0; width:190px;}
	.human_profile_female{ padding-right:0; width:300px; margin-bottom:20px;}	
	.human_staff{float:none; padding-left:0; margin-bottom:20px;}	
	.human_staff img{width:100% !important;}
	
	/*===========Social (Community Development Page)===========*/
	.social_staff{float:none; padding-left:0; margin-bottom:20px;}	
	.social_staff img{width:100% !important;}
	.orange-style table.Stakeholder.Key_Programme tr td.left340{width:180px !important;}
	
	/*===========Social (Community Integration Page)===========*/
	.orange-style table.Stakeholder.Raising tr td{padding-left:5px; font-size:10.2pt;}
	.orange-style table.Stakeholder.Raising tr td.width235{padding-right:0; padding-left:5px;}
	
	/*===========Social Responsibility (Guidance Social Responsibility Page)===========*/
	table.Responsibility tr td:last-child{width:230px !important; }

	
	/*===========GRI (GRI Index Page)===========*/
	.griIndex_logo{position:relative; top:0; right:0; margin-bottom:20px; text-align:right; width:100%;}
	.griIndex_logo img{width:200px;}
	.responsive-scroll{overflow-x:auto;}
	
	.xs-full-width{width:100% !important;}
}