.infohub{ position: relative; overflow: hidden; background-color: #101010; }
@media (min-width: 1px) {
	/**Marcus: First segment with "UPDATES & INFO HUB" and "View All" button**/
	.infohub-group1-m{ position: relative; overflow: hidden; background-color: #5fe4a9; }
	.infohub-whatshappening-m{ display: none; }
	.infohub-group1-title-m{ position: relative; overflow: hidden; float: left; font-size: 15px; font-weight: bolder; padding: 10px 15px; color: #0c2f20; }
	.infohub-group1-title-br-m{ display: none; } /*Break UPDATES & INFO HUB into 2 lines*/
	.infohub-group1-viewall-m{ 
		position: relative; overflow: hidden; float: right; background-color: #113728; margin-top: 7px; margin-right: 10px; /*padding-top: 3px; padding-left: 3px; padding-right: 3px;*/
		background-image: url(../../images/osren/infohub/InfoHub_ViewAll_ArrowIco-M.png); 
		background-repeat: no-repeat; 
		background-position: calc(100% - 9px) center; }
	.infohub-group1-viewall-a-m{ 
		position: relative; overflow: hidden; text-decoration: none; display: /*inline-*/block; 
		color: #5fe4a9; font-size: 13px; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 25px; }
	
	/**Marcus: Three segment of contents**/
	.infohub-group2-m, .infohub-group3-m, .infohub-group4-m{ position: relative; overflow: hidden; /*height: 580px;*/ }/*Do not fix height, allow flexibility*/
	
	.infohub-imagebox-m{ position: relative; overflow: hidden; width: 100%; /*height: 340px;*/ }
	.infohub-image-m{ position: relative; overflow: hidden; display: block; width: 100%; }/*On mobile view port, image should always scale with width*/
	.infohub-image-n, .infohub-image-d{ display: none;  }

	.infohub-dialogbox-m{ position: relative; background-image: url(../../images/osren/infohub/light_green_background.png); /*overflow: hidden;*/ /*height: 280px;*/ /*width: 100%;*/  }
	.infohub-dialogbox-wrapper-m{ position: relative; overflow: hidden; padding-top: 20px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; }
	
	/**Marcus: Second and third segment of contents have different background color**/
	.infohub-group3-m .infohub-dialogbox-m, .infohub-group4-m .infohub-dialogbox-m{ background-image: url(../../images/osren/infohub/dark_green_background.png); }
	.infohub-group3-m .infohub-dialogbox-wrapper-m, .infohub-group4-m .infohub-dialogbox-wrapper-m{ border: 1px solid #5fe4a9; }
	
	/**Marcus: Actual contents**/
		/*BLOG february 24, 2015*/
		.infohub-dialogbox-header-m{ position: relative; overflow: hidden; margin-bottom: 6px; }
		.infohub-dialogbox-type-m{ position: relative; overflow: hidden; background-color: #328660; font-size: 13px; color: #05130d; font-weight: bolder; padding: 2px 6px; float: left; text-transform: uppercase; letter-spacing: 1.3px; }
		.infohub-dialogbox-date-m{ position: relative; overflow: hidden; color: #0c2f20; font-size: 12px; font-style: italic; padding: 2px 6px;  float: left; padding-top: 4px; }
		/*Detailing the Mercedex-Benz A45 AMG*/
		.infohub-dialogbox-title-m{ position: relative; overflow: hidden; font-size: 24px; font-weight: bolder; color: #0c2f20; margin-bottom: 2px; line-height: 28px; }
		/*...*/
		.infohub-dialogbox-desc-m{ position: relative; overflow: hidden; font-size: 13px; color: #14422e; line-height: 16px; margin-bottom: 14px; }
		/*READ POST >*/
		.infohub-dialogbox-link-m{ position: relative; overflow: hidden; background-color: #0d271c; float: left;
		background-image: url(../../images/osren/infohub/InfoHub_ActionBtn_White.png); 
		background-repeat: no-repeat; 
		background-position: calc(100% - 8px) center; }
		.infohub-dialogbox-link-a-m{ position: relative; overflow: hidden; display: block; color: #eafff5; font-size: 13px; font-weight: bolder; text-decoration : none; padding: 2px 10px; padding-right: 20px; padding-top: 3px; }
		.infohub-group2-m .infohub-dialogbox-link-m:hover .infohub-dialogbox-link-a-m{ background-color: #07492d; 
		background-image: url(../../images/osren/infohub/InfoHub_ActionBtn_White.png); 
		background-repeat: no-repeat; 
		background-position: calc(100% - 8px) center;	}
		/*FACEBOOK + TWITTER + GOOGLE*/
		.infohub-dialogbox-share-m{ position: relative; overflow: hidden; padding-left: 20px; float: right; }
		.infohub-dialogbox-social-m{ position: relative; overflow: hidden; display: block; text-decoration: none; float: left; margin-left: 10px; }
		.infohub-dialogbox-social-m img.active{ display: block; }
		.infohub-dialogbox-social-m img.inactive{ display: none; }
		.infohub-dialogbox-social-m:hover img.active{ display: block; }
		.infohub-dialogbox-social-m:hover img.inactive{ display: none; }
	
	/**Marcus: As for actual contents of the second and third, they differ in terms of color**/
	.infohub-group3-m  .infohub-dialogbox-date-m, .infohub-group4-m .infohub-dialogbox-date-m{ color: #ffffff; }
	.infohub-group3-m  .infohub-dialogbox-title-m, .infohub-group4-m .infohub-dialogbox-title-m{ color: #5ec898; }
	.infohub-group3-m  .infohub-dialogbox-desc-m, .infohub-group4-m .infohub-dialogbox-desc-m{ color: #cfe4da; }
	.infohub-group3-m .infohub-dialogbox-link-m, .infohub-group4-m .infohub-dialogbox-link-m{ background-color: #5fe4a9; background-image: url(../../images/osren/infohub/InfoHub_ActionBtn_Black.png); }
	.infohub-group3-m .infohub-dialogbox-link-a-m, .infohub-group4-m .infohub-dialogbox-link-a-m{ color: #000000; }
	
	.infohub-group3-m  .infohub-dialogbox-link-m:hover .infohub-dialogbox-link-a-m,
	.infohub-group4-m  .infohub-dialogbox-link-m:hover .infohub-dialogbox-link-a-m{
		background-color: #48af81; 
		background-image: url(../../images/osren/infohub/InfoHub_ActionBtn_Black.png);
		background-repeat: no-repeat; 
		background-position: calc(100% - 8px) center;
	}
	
	/**Marcus: Dailog tail**/
	.infohub-dialogbox-triangle-m{ position: absolute; overflow: hidden; height: 42px; width: 42px; background-image: url(../../images/osren/infohub/light_green_triangle.png); top: -41px;  right: 20px; /*bottom: 280px;*/ }
	.infohub-group3-m .infohub-dialogbox-m .infohub-dialogbox-triangle-m, 
	.infohub-group4-m .infohub-dialogbox-m .infohub-dialogbox-triangle-m{ background-image: url(../../images/osren/infohub/dark_green_triangle.png); }
	
	.infohub-group5-m{ display: none; }/*Marcus: Only visible for Netbook and above*/
	
	/**CONNECT TO US in Nettbook**/
	.infohub-connecttous-m{ display: none; }
	/**CONNECT TO US in Desktop**/
	.infohub-connecttous-d.desktop{ display: none; }
}

@media (min-width: 768px) {

	/**Marcus: First segment**/
	.infohub-group1-n{ background-color: #1b3b2e; height: 370px; width: 33.33%; float: left; }
	.infohub-whatshappening-n{ 
		display: block; 
		font-size: 12px; font-weight: bolder; color: #8e8e8e; letter-spacing: 2px;
		margin-left: 17px; margin-top: 33px; margin-bottom: 2px;  }
	.infohub-group1-title-n{ 
		float: none; 
		font-size: 33px; color: #ffffff; line-height: 33px; letter-spacing: 0.7px;
		/*padding-top: 0px; padding-bottom: 12px; padding-left: 17px;*/padding: 0; margin-left: 17px; margin-bottom: 12px;	}
	.infohub-group1-title-br-n{ display: block; }/*UPDATES<br>& INFO HUB*/
	.infohub-group1-viewall-n{ float: left; 
		background-color: #51c290; background-image: url(../../images/osren/infohub/InfoHub_ViewAll_ArrowIco.png); background-position: calc(100% - 11px) center; 
		margin-top: 0; margin-left: 17px;  }
	.infohub-group1-viewall-n:hover{ background-color: #5fe5aa; }
	.infohub-group1-viewall-a-n{ 
		display: block; height: 100%; 
		color: #113728; font-weight: bolder; font-size: 14px; letter-spacing: 0.7px; 
		padding-top: 4px; padding-bottom: 5px; padding-right: 30px; padding-left: 11px; }
	/*CONNECT TO US*/
	.infohub-connecttous-n{ position: absolute; overflow: hidden; display: block; left: 17px; bottom: 30px; }
	.infohub-connecttous-desc-n { position: relative; overflow: hidden; color: #50a184; font-size: 16px; font-weight: bolder; letter-spacing: 0.3px; margin-bottom: 3px; }
	.infohub-connecttous-social-n{ position: relative; overflow: hidden; }
	.infohub-connecttous-share-n{ position: relative; overflow: hidden; float: left; height: 34px; width: 34px; margin-right: 8px; }
	.infohub-connecttous-share-n > img.inactive{ display: block; }
	.infohub-connecttous-share-n > img.active{ display: none; }
	.infohub-connecttous-share-n:hover > img.inactive{ display: none; }
	.infohub-connecttous-share-n:hover > img.active{ display: block; }
	
	.infohub-group2-n{ height: 370px; width: 66.66%; float: left; }
	.infohub-group3-n{ height: 370px; width: 50%; float: left; }
	.infohub-group4-n{ height: 370px; width: 50%; float: left; }
	
	/*Marcus: All 3 segments content should share this*/
	.infohub-dialogbox-header-n{ margin-bottom: 10px; }
	.infohub-dialogbox-wrapper-n{ padding-top: 27px; padding-left: /*10*/20px; padding-right: /*10*/20px; }
	.infohub-imagebox-n{ height: 100%; width: 50%; float: left; }
	.infohub-image-m, .infohub-image-d{ display: none;  }/*Each view port has specific images uploaded*/
	.infohub-image-n{ display: block; height: 100%; float: right; }/*Segment 2 and 3 images scale with width*/
	.infohub-group2-n .infohub-image-n{ height: auto; width: 100%; float: none; }/*Segment 1 image scale with height*/
	
	.infohub-dialogbox-n{ height: /*100%*/370px; width: 50%; float: left; padding: 0px; }
	/*.infohub-dialogbox-header-n{ margin-top: 7px; margin-left: 15px; margin-right: 15px; margin-bottom: 6px; }*/
	.infohub-dialogbox-title-n{ margin-left: 0px; margin-right: 0px; font-size: /*19*/25px; line-height: /*22*/27px; font-weight: bold; margin-bottom: 5px; }
	.infohub-dialogbox-desc-n{ margin-left: 0px; margin-right: 0px; letter-spacing: 0.3px; font-size: /*12*/13px; line-height: 16px; }
	.infohub-dialogbox-link-n{ /*margin-left: 15px; margin-right: 15px;*/ margin-bottom: /*20*/23px; }
	.infohub-dialogbox-link-a-n{ font-size: 12px; letter-spacing: 0.5px; }
	.infohub-dialogbox-type-n{ font-size: 12px; }
	.infohub-dialogbox-share-n{ float: none; clear: both; padding-left: 0px; }
	.infohub-dialogbox-social-n{ float: left; margin-left: 0px; margin-right: 10px; }
	
	/*Segment 2 and 3 has different colour for date*/
	.infohub-group3-m .infohub-dialogbox-date-m, 
	.infohub-group4-m .infohub-dialogbox-date-m{ font-size: 11px; color: #979797; }
	
	/*.infohub-dialogbox-triangle-n{ background-image: url(../../images/osren/infohub/light_green_triangle_left.png); right: 50%;  top: 20px; width: 64px; height: 65px; }*/
	
	.infohub-group2-n .infohub-dialogbox-n .infohub-dialogbox-triangle-n{ 
		top: 30px; left: -63px; background-image: url(../../images/osren/infohub/light_green_triangle_left.png); height: 65px; width: 64px; }
	.infohub-group3-n .infohub-dialogbox-n .infohub-dialogbox-triangle-n,
	.infohub-group4-n .infohub-dialogbox-n .infohub-dialogbox-triangle-n{ 
		background-image: url(../../images/osren/infohub/dark_green_triangle_left.png); top: /*10*/27px; left: -39px; width: 40px; height: 41px; }
	
	/*.infohub-group3-n > .infohub-dialogbox-n, .infohub-group4-n > .infohub-dialogbox-n{ width: 50%; }*/
	.infohub-group3-n .infohub-dialogbox-wrapper-n, .infohub-group4-n .infohub-dialogbox-wrapper-n{ 
		height: /*338*/328px; border: 1px solid #488569; padding-top: /*10*/20px; padding-bottom: /*10*/20px; 
		padding-left: 18px; padding-right: 15px; 
	}/*Marcus: Take into account of padding and border from top and bottom*/
	
	.infohub-group5-n{ display: none; } 
	
}

@media (min-width: 1280px) {
	
	.infohub-d{ height: 765px; width: 100%; }
	
	.infohub-image-m, .infohub-image-n{ display: none;  }
	.infohub-dialogbox-header-d{ margin-bottom: 12px; }
	.infohub-image-d{ display: block;  width: 100%; }
	
	.infohub-group1-d{ position: absolute; background-color: transparent; z-index: 1000; top: 30px; left: /*0*/27px; width: auto; }
	.infohub-whatshappening-d{ margin-top: 0px; margin-left: 0px; font-size: 16px; letter-spacing: 3px; }
	.infohub-group1-title-d{ margin-left: 0px; font-size: 53px; line-height: 52px; }
	.infohub-group1-viewall-d{ margin-left: 0px; }
	.infohub-group1-viewall-a-d{ font-size: 17px; }
	
	.infohub-group2-d{ min-height: 765px; width: 60%; position: absolute; top: 0px; left: 0px; } 
	.infohub-group2-d .infohub-imagebox-d{ width: 75%; }
	.infohub-group2-d .infohub-dialogbox-d{ width: 75%; position: absolute; height: 382px; right: 0px; bottom: 0px; }
	.infohub-group2-d .infohub-dialogbox-d .infohub-dialogbox-wrapper-d{ padding-top: 30px; padding-bottom: 30px; padding-left: 30px; padding-right: 30px; }
	.infohub-group2-d .infohub-dialogbox-triangle-d{ top: 400px; right: 75%; }
	.infohub-group2-d .infohub-dialogbox-title-d{ font-size: 30px; line-height: 33px; margin-bottom: 5px; }
	.infohub-group2-d .infohub-dialogbox-desc-d{ font-size: 14px; line-height: 18px; }
	
	.infohub-group3-d{ min-height: 765px; width: 40%; position: absolute; top: 0px; left: 40%; }
	.infohub-group3-d .infohub-imagebox-d{ width: 50%; float: right; height: 383px; }
	.infohub-group3-d .infohub-dialogbox-d{ width: 50%; float: left; height: 383px; }
	.infohub-group3-d .infohub-dialogbox-d .infohub-dialogbox-triangle-d{ 
		top: auto; bottom: 20px; left: calc(100% - 1px); height: 55px; width: 55px; z-index: 9999;
		background-image: url(../../images/osren/infohub/dark_green_triangle_right_top.png);  }
	
	.infohub-group4-d{ min-height: 765px; width: 40%; position: absolute; top: 0px; left: 60%; }
	.infohub-group4-d .infohub-imagebox-d{ width: 50%; float: none; height: 383px; position: absolute; bottom: 0; right: 0; }
	.infohub-group4-d .infohub-dialogbox-d{ width: 50%; float: none; height: 383px; position: absolute; bottom: 0; left: 0; }
	.infohub-group4-d .infohub-dialogbox-d .infohub-dialogbox-triangle-d{ 
		top: 20px; left: calc(100% - 1px); height: 54px; width: 54px; z-index: 9999;
		background-image: url(../../images/osren/infohub/dark_green_triangle_right_bottom.png);  }

	.infohub-group3-d .infohub-dialogbox-wrapper-d, .infohub-group4-d .infohub-dialogbox-wrapper-d{ height: /*351*/341px; padding-top: 30px; padding-bottom: 10px; padding-left: 21px; padding-right: 18px; }
	.infohub-group3-d .infohub-dialogbox-title-d, .infohub-group4-d .infohub-dialogbox-title-d{ font-size: 26px; margin-left: 0px; margin-right: 0px; line-height: 28px; margin-bottom: 5px; }
	.infohub-group3-d .infohub-dialogbox-desc-d, .infohub-group4-d .infohub-dialogbox-desc-d{ font-size: 14px; margin-left: 0px; margin-right: 0px; line-height: 18px; }
	
	.infohub-group5-n{ display: block; position: absolute; top: 0; right: 0; height: 383px; width: 20%; background-color: #1b3b2e; } 
	.infohub-dontmissany-d{ position: absolute; overflow: hidden; color: #367f5e; font-size: 24px; line-height: 25px; letter-spacing: 0.5px; left: 25px; top: 135px; }
	.infohub-dontmissany-d > b{ color: #5ac494; }
	.infohub-connecttous-d{ display: none; }
	.infohub-connecttous-d.desktop{ display: block; left: 25px; }
}